joyent-portal/packages/ui-toolkit/src/slider/index.js

77 lines
1.8 KiB
JavaScript
Raw Normal View History

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
2017-09-18 14:12:01 +03:00
import InputRange from './react-input-range';
import remcalc from 'remcalc';
import FormLabel from '../form/label';
const Label = styled(FormLabel)`
margin-bottom: ${remcalc(10)};
margin-top: ${remcalc(12)};
`;
class Slider extends Component {
constructor(props) {
super(props);
this.state = {
minValue: this.props.minValue,
maxValue: this.props.maxValue,
value: this.props.value
};
this.changeValue = this.changeValue.bind(this);
}
changeValue(value) {
this.setState({ value }, () => this.props.onChange(value));
}
render() {
const { minValue, maxValue, value } = this.state;
const { children, ...rest } = this.props;
return (
2017-09-18 14:12:01 +03:00
<div>
<Label>{children}</Label>
<InputRange
{...rest}
minValue={minValue}
maxValue={maxValue}
value={value}
onChange={value => this.changeValue(value)}
/>
2017-09-18 14:12:01 +03:00
</div>
);
}
}
Slider.propTypes = {
minValue: PropTypes.number,
maxValue: PropTypes.number,
step: PropTypes.number,
value: PropTypes.oneOfType([PropTypes.number, PropTypes.shape()]),
onChangeComplete: PropTypes.func,
onChange: PropTypes.func,
formatLabel: PropTypes.func,
ariaLabelledby: PropTypes.string,
ariaControls: PropTypes.string,
disabled: PropTypes.bool,
draggableTrack: PropTypes.bool,
onChangeStart: PropTypes.func,
children: PropTypes.node
};
Slider.defaultProps = {
onChangeComplete: () => {},
onChange: () => {},
formatLabel: value =>
(value.toString().split('.')[1] || []).length > 3
? Math.round(value).toFixed(3)
: value,
onChangeStart: () => {},
2017-09-18 14:12:01 +03:00
step: 1
};
export default Slider;