848 lines
28 KiB
JavaScript
848 lines
28 KiB
JavaScript
'use strict';
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
|
|
var _extends2 = require('babel-runtime/helpers/extends');
|
|
|
|
var _extends3 = _interopRequireDefault(_extends2);
|
|
|
|
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
|
|
|
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
|
|
|
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
|
|
|
|
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
|
|
|
|
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
|
|
|
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
|
|
|
var _createClass2 = require('babel-runtime/helpers/createClass');
|
|
|
|
var _createClass3 = _interopRequireDefault(_createClass2);
|
|
|
|
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
|
|
|
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
|
|
|
var _inherits2 = require('babel-runtime/helpers/inherits');
|
|
|
|
var _inherits3 = _interopRequireDefault(_inherits2);
|
|
|
|
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
|
|
|
|
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
|
|
|
|
var _simpleAssign = require('simple-assign');
|
|
|
|
var _simpleAssign2 = _interopRequireDefault(_simpleAssign);
|
|
|
|
var _react = require('react');
|
|
|
|
var _react2 = _interopRequireDefault(_react);
|
|
|
|
var _keycode = require('keycode');
|
|
|
|
var _keycode2 = _interopRequireDefault(_keycode);
|
|
|
|
var _warning = require('warning');
|
|
|
|
var _warning2 = _interopRequireDefault(_warning);
|
|
|
|
var _transitions = require('../styles/transitions');
|
|
|
|
var _transitions2 = _interopRequireDefault(_transitions);
|
|
|
|
var _FocusRipple = require('../internal/FocusRipple');
|
|
|
|
var _FocusRipple2 = _interopRequireDefault(_FocusRipple);
|
|
|
|
var _deprecatedPropType = require('../utils/deprecatedPropType');
|
|
|
|
var _deprecatedPropType2 = _interopRequireDefault(_deprecatedPropType);
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
/**
|
|
* Verifies min/max range.
|
|
* @param {Object} props Properties of the React component.
|
|
* @param {String} propName Name of the property to validate.
|
|
* @param {String} componentName Name of the component whose property is being validated.
|
|
* @returns {Object} Returns an Error if min >= max otherwise null.
|
|
*/
|
|
var minMaxPropType = function minMaxPropType(props, propName, componentName) {
|
|
for (var _len = arguments.length, rest = Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
|
|
rest[_key - 3] = arguments[_key];
|
|
}
|
|
|
|
var error = _react.PropTypes.number.apply(_react.PropTypes, [props, propName, componentName].concat(rest));
|
|
if (error !== null) {
|
|
return error;
|
|
}
|
|
|
|
if (props.min >= props.max) {
|
|
var errorMsg = propName === 'min' ? 'min should be less than max' : 'max should be greater than min';
|
|
return new Error(errorMsg);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Verifies value is within the min/max range.
|
|
* @param {Object} props Properties of the React component.
|
|
* @param {String} propName Name of the property to validate.
|
|
* @param {String} componentName Name of the component whose property is being validated.
|
|
* @returns {Object} Returns an Error if the value is not within the range otherwise null.
|
|
*/
|
|
var valueInRangePropType = function valueInRangePropType(props, propName, componentName) {
|
|
for (var _len2 = arguments.length, rest = Array(_len2 > 3 ? _len2 - 3 : 0), _key2 = 3; _key2 < _len2; _key2++) {
|
|
rest[_key2 - 3] = arguments[_key2];
|
|
}
|
|
|
|
var error = _react.PropTypes.number.apply(_react.PropTypes, [props, propName, componentName].concat(rest));
|
|
if (error !== null) {
|
|
return error;
|
|
}
|
|
|
|
var value = props[propName];
|
|
if (value < props.min || props.max < value) {
|
|
return new Error(propName + ' should be within the range specified by min and max');
|
|
}
|
|
};
|
|
|
|
var crossAxisProperty = {
|
|
x: 'height',
|
|
'x-reverse': 'height',
|
|
y: 'width',
|
|
'y-reverse': 'width'
|
|
};
|
|
|
|
var crossAxisOffsetProperty = {
|
|
x: 'top',
|
|
'x-reverse': 'top',
|
|
y: 'left',
|
|
'y-reverse': 'left'
|
|
};
|
|
|
|
var mainAxisProperty = {
|
|
x: 'width',
|
|
'x-reverse': 'width',
|
|
y: 'height',
|
|
'y-reverse': 'height'
|
|
};
|
|
|
|
var mainAxisMarginFromEnd = {
|
|
x: 'marginRight',
|
|
'x-reverse': 'marginLeft',
|
|
y: 'marginTop',
|
|
'y-reverse': 'marginBottom'
|
|
};
|
|
|
|
var mainAxisMarginFromStart = {
|
|
x: 'marginLeft',
|
|
'x-reverse': 'marginRight',
|
|
y: 'marginBottom',
|
|
'y-reverse': 'marginTop'
|
|
};
|
|
|
|
var mainAxisOffsetProperty = {
|
|
x: 'left',
|
|
'x-reverse': 'right',
|
|
y: 'bottom',
|
|
'y-reverse': 'top'
|
|
};
|
|
|
|
var mainAxisClientProperty = {
|
|
x: 'clientWidth',
|
|
'x-reverse': 'clientWidth',
|
|
y: 'clientHeight',
|
|
'y-reverse': 'clientHeight'
|
|
};
|
|
|
|
var mainAxisClientOffsetProperty = {
|
|
x: 'clientX',
|
|
'x-reverse': 'clientX',
|
|
y: 'clientY',
|
|
'y-reverse': 'clientY'
|
|
};
|
|
|
|
var reverseMainAxisOffsetProperty = {
|
|
x: 'right',
|
|
'x-reverse': 'left',
|
|
y: 'top',
|
|
'y-reverse': 'bottom'
|
|
};
|
|
|
|
var isMouseControlInverted = function isMouseControlInverted(axis) {
|
|
return axis === 'x-reverse' || axis === 'y';
|
|
};
|
|
|
|
function getPercent(value, min, max) {
|
|
var percent = (value - min) / (max - min);
|
|
if (isNaN(percent)) {
|
|
percent = 0;
|
|
}
|
|
|
|
return percent;
|
|
}
|
|
|
|
var getStyles = function getStyles(props, context, state) {
|
|
var _slider, _track, _filledAndRemaining, _handle, _objectAssign2, _objectAssign3;
|
|
|
|
var axis = props.axis,
|
|
disabled = props.disabled,
|
|
max = props.max,
|
|
min = props.min;
|
|
var _context$muiTheme$sli = context.muiTheme.slider,
|
|
handleColorZero = _context$muiTheme$sli.handleColorZero,
|
|
handleFillColor = _context$muiTheme$sli.handleFillColor,
|
|
handleSize = _context$muiTheme$sli.handleSize,
|
|
handleSizeDisabled = _context$muiTheme$sli.handleSizeDisabled,
|
|
handleSizeActive = _context$muiTheme$sli.handleSizeActive,
|
|
trackSize = _context$muiTheme$sli.trackSize,
|
|
trackColor = _context$muiTheme$sli.trackColor,
|
|
trackColorSelected = _context$muiTheme$sli.trackColorSelected,
|
|
rippleColor = _context$muiTheme$sli.rippleColor,
|
|
selectionColor = _context$muiTheme$sli.selectionColor;
|
|
|
|
|
|
var fillGutter = handleSize / 2;
|
|
var disabledGutter = trackSize + handleSizeDisabled / 2;
|
|
var calcDisabledSpacing = disabled ? ' - ' + disabledGutter + 'px' : '';
|
|
var percent = getPercent(state.value, min, max);
|
|
|
|
var styles = {
|
|
slider: (_slider = {
|
|
touchCallout: 'none',
|
|
userSelect: 'none',
|
|
cursor: 'default'
|
|
}, (0, _defineProperty3.default)(_slider, crossAxisProperty[axis], handleSizeActive), (0, _defineProperty3.default)(_slider, mainAxisProperty[axis], '100%'), (0, _defineProperty3.default)(_slider, 'position', 'relative'), (0, _defineProperty3.default)(_slider, 'marginTop', 24), (0, _defineProperty3.default)(_slider, 'marginBottom', 48), _slider),
|
|
track: (_track = {
|
|
position: 'absolute'
|
|
}, (0, _defineProperty3.default)(_track, crossAxisOffsetProperty[axis], (handleSizeActive - trackSize) / 2), (0, _defineProperty3.default)(_track, mainAxisOffsetProperty[axis], 0), (0, _defineProperty3.default)(_track, mainAxisProperty[axis], '100%'), (0, _defineProperty3.default)(_track, crossAxisProperty[axis], trackSize), _track),
|
|
filledAndRemaining: (_filledAndRemaining = {
|
|
position: 'absolute'
|
|
}, (0, _defineProperty3.default)(_filledAndRemaining, crossAxisOffsetProperty, 0), (0, _defineProperty3.default)(_filledAndRemaining, crossAxisProperty[axis], '100%'), (0, _defineProperty3.default)(_filledAndRemaining, 'transition', _transitions2.default.easeOut(null, 'margin')), _filledAndRemaining),
|
|
handle: (_handle = {
|
|
boxSizing: 'border-box',
|
|
position: 'absolute',
|
|
cursor: 'pointer',
|
|
pointerEvents: 'inherit'
|
|
}, (0, _defineProperty3.default)(_handle, crossAxisOffsetProperty[axis], 0), (0, _defineProperty3.default)(_handle, mainAxisOffsetProperty[axis], percent === 0 ? '0%' : percent * 100 + '%'), (0, _defineProperty3.default)(_handle, 'zIndex', 1), (0, _defineProperty3.default)(_handle, 'margin', {
|
|
x: trackSize / 2 + 'px 0 0 0',
|
|
'x-reverse': trackSize / 2 + 'px 0 0 0',
|
|
y: '0 0 0 ' + trackSize / 2 + 'px',
|
|
'y-reverse': '0 0 0 ' + trackSize / 2 + 'px'
|
|
}[axis]), (0, _defineProperty3.default)(_handle, 'width', handleSize), (0, _defineProperty3.default)(_handle, 'height', handleSize), (0, _defineProperty3.default)(_handle, 'backgroundColor', selectionColor), (0, _defineProperty3.default)(_handle, 'backgroundClip', 'padding-box'), (0, _defineProperty3.default)(_handle, 'border', '0px solid transparent'), (0, _defineProperty3.default)(_handle, 'borderRadius', '50%'), (0, _defineProperty3.default)(_handle, 'transform', {
|
|
x: 'translate(-50%, -50%)',
|
|
'x-reverse': 'translate(50%, -50%)',
|
|
y: 'translate(-50%, 50%)',
|
|
'y-reverse': 'translate(-50%, -50%)'
|
|
}[axis]), (0, _defineProperty3.default)(_handle, 'transition', _transitions2.default.easeOut('450ms', 'background') + ', ' + _transitions2.default.easeOut('450ms', 'border-color') + ', ' + _transitions2.default.easeOut('450ms', 'width') + ', ' + _transitions2.default.easeOut('450ms', 'height')), (0, _defineProperty3.default)(_handle, 'overflow', 'visible'), (0, _defineProperty3.default)(_handle, 'outline', 'none'), _handle),
|
|
handleWhenDisabled: {
|
|
boxSizing: 'content-box',
|
|
cursor: 'not-allowed',
|
|
backgroundColor: trackColor,
|
|
width: handleSizeDisabled,
|
|
height: handleSizeDisabled,
|
|
border: 'none'
|
|
},
|
|
handleWhenPercentZero: {
|
|
border: trackSize + 'px solid ' + handleColorZero,
|
|
backgroundColor: handleFillColor,
|
|
boxShadow: 'none'
|
|
},
|
|
handleWhenPercentZeroAndDisabled: {
|
|
cursor: 'not-allowed',
|
|
width: handleSizeDisabled,
|
|
height: handleSizeDisabled
|
|
},
|
|
handleWhenPercentZeroAndFocused: {
|
|
border: trackSize + 'px solid ' + trackColorSelected
|
|
},
|
|
handleWhenActive: {
|
|
width: handleSizeActive,
|
|
height: handleSizeActive
|
|
},
|
|
ripple: {
|
|
height: handleSize,
|
|
width: handleSize,
|
|
overflow: 'visible'
|
|
},
|
|
rippleWhenPercentZero: {
|
|
top: -trackSize,
|
|
left: -trackSize
|
|
},
|
|
rippleInner: {
|
|
height: '300%',
|
|
width: '300%',
|
|
top: -handleSize,
|
|
left: -handleSize
|
|
},
|
|
rippleColor: {
|
|
fill: percent === 0 ? handleColorZero : rippleColor
|
|
}
|
|
};
|
|
styles.filled = (0, _simpleAssign2.default)({}, styles.filledAndRemaining, (_objectAssign2 = {}, (0, _defineProperty3.default)(_objectAssign2, mainAxisOffsetProperty[axis], 0), (0, _defineProperty3.default)(_objectAssign2, 'backgroundColor', disabled ? trackColor : selectionColor), (0, _defineProperty3.default)(_objectAssign2, mainAxisMarginFromEnd[axis], fillGutter), (0, _defineProperty3.default)(_objectAssign2, mainAxisProperty[axis], 'calc(' + percent * 100 + '%' + calcDisabledSpacing + ')'), _objectAssign2));
|
|
styles.remaining = (0, _simpleAssign2.default)({}, styles.filledAndRemaining, (_objectAssign3 = {}, (0, _defineProperty3.default)(_objectAssign3, reverseMainAxisOffsetProperty[axis], 0), (0, _defineProperty3.default)(_objectAssign3, 'backgroundColor', (state.hovered || state.focused) && !disabled ? trackColorSelected : trackColor), (0, _defineProperty3.default)(_objectAssign3, mainAxisMarginFromStart[axis], fillGutter), (0, _defineProperty3.default)(_objectAssign3, mainAxisProperty[axis], 'calc(' + (1 - percent) * 100 + '%' + calcDisabledSpacing + ')'), _objectAssign3));
|
|
|
|
return styles;
|
|
};
|
|
|
|
var Slider = function (_Component) {
|
|
(0, _inherits3.default)(Slider, _Component);
|
|
|
|
function Slider() {
|
|
var _ref;
|
|
|
|
var _temp, _this, _ret;
|
|
|
|
(0, _classCallCheck3.default)(this, Slider);
|
|
|
|
for (var _len3 = arguments.length, args = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
|
|
args[_key3] = arguments[_key3];
|
|
}
|
|
|
|
return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Slider.__proto__ || (0, _getPrototypeOf2.default)(Slider)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
|
active: false,
|
|
dragging: false,
|
|
focused: false,
|
|
hovered: false,
|
|
value: 0
|
|
}, _this.track = null, _this.handle = null, _this.handleKeyDown = function (event) {
|
|
var _this$props = _this.props,
|
|
axis = _this$props.axis,
|
|
min = _this$props.min,
|
|
max = _this$props.max,
|
|
step = _this$props.step;
|
|
|
|
|
|
var action = void 0;
|
|
|
|
switch ((0, _keycode2.default)(event)) {
|
|
case 'page down':
|
|
case 'down':
|
|
if (axis === 'y-reverse') {
|
|
action = 'increase';
|
|
} else {
|
|
action = 'decrease';
|
|
}
|
|
break;
|
|
case 'left':
|
|
if (axis === 'x-reverse') {
|
|
action = 'increase';
|
|
} else {
|
|
action = 'decrease';
|
|
}
|
|
break;
|
|
case 'page up':
|
|
case 'up':
|
|
if (axis === 'y-reverse') {
|
|
action = 'decrease';
|
|
} else {
|
|
action = 'increase';
|
|
}
|
|
break;
|
|
case 'right':
|
|
if (axis === 'x-reverse') {
|
|
action = 'decrease';
|
|
} else {
|
|
action = 'increase';
|
|
}
|
|
break;
|
|
case 'home':
|
|
action = 'min';
|
|
break;
|
|
case 'end':
|
|
action = 'max';
|
|
break;
|
|
}
|
|
|
|
if (action) {
|
|
var newValue = void 0;
|
|
|
|
// Cancel scroll
|
|
event.preventDefault();
|
|
|
|
switch (action) {
|
|
case 'decrease':
|
|
newValue = _this.state.value - step;
|
|
break;
|
|
case 'increase':
|
|
newValue = _this.state.value + step;
|
|
break;
|
|
case 'min':
|
|
newValue = min;
|
|
break;
|
|
case 'max':
|
|
newValue = max;
|
|
break;
|
|
}
|
|
|
|
// We need to use toFixed() because of float point errors.
|
|
// For example, 0.01 + 0.06 = 0.06999999999999999
|
|
newValue = parseFloat(newValue.toFixed(5));
|
|
|
|
if (newValue > max) {
|
|
newValue = max;
|
|
} else if (newValue < min) {
|
|
newValue = min;
|
|
}
|
|
|
|
if (_this.state.value !== newValue) {
|
|
_this.setState({
|
|
value: newValue
|
|
});
|
|
|
|
if (_this.props.onChange) {
|
|
_this.props.onChange(event, newValue);
|
|
}
|
|
}
|
|
}
|
|
}, _this.handleDragMouseMove = function (event) {
|
|
_this.onDragUpdate(event, 'mouse');
|
|
}, _this.handleTouchMove = function (event) {
|
|
_this.onDragUpdate(event, 'touch');
|
|
}, _this.handleMouseEnd = function (event) {
|
|
document.removeEventListener('mousemove', _this.handleDragMouseMove);
|
|
document.removeEventListener('mouseup', _this.handleMouseEnd);
|
|
|
|
_this.onDragStop(event);
|
|
}, _this.handleTouchEnd = function (event) {
|
|
document.removeEventListener('touchmove', _this.handleTouchMove);
|
|
document.removeEventListener('touchup', _this.handleTouchEnd);
|
|
document.removeEventListener('touchend', _this.handleTouchEnd);
|
|
document.removeEventListener('touchcancel', _this.handleTouchEnd);
|
|
|
|
_this.onDragStop(event);
|
|
}, _this.handleTouchStart = function (event) {
|
|
if (_this.props.disabled) {
|
|
return;
|
|
}
|
|
|
|
var position = void 0;
|
|
if (isMouseControlInverted(_this.props.axis)) {
|
|
position = _this.getTrackOffset() - event.touches[0][mainAxisClientOffsetProperty[_this.props.axis]];
|
|
} else {
|
|
position = event.touches[0][mainAxisClientOffsetProperty[_this.props.axis]] - _this.getTrackOffset();
|
|
}
|
|
_this.setValueFromPosition(event, position);
|
|
|
|
document.addEventListener('touchmove', _this.handleTouchMove);
|
|
document.addEventListener('touchup', _this.handleTouchEnd);
|
|
document.addEventListener('touchend', _this.handleTouchEnd);
|
|
document.addEventListener('touchcancel', _this.handleTouchEnd);
|
|
|
|
_this.onDragStart(event);
|
|
|
|
// Cancel scroll and context menu
|
|
event.preventDefault();
|
|
}, _this.handleFocus = function (event) {
|
|
_this.setState({
|
|
focused: true
|
|
});
|
|
|
|
if (_this.props.onFocus) {
|
|
_this.props.onFocus(event);
|
|
}
|
|
}, _this.handleBlur = function (event) {
|
|
_this.setState({
|
|
focused: false,
|
|
active: false
|
|
});
|
|
|
|
if (_this.props.onBlur) {
|
|
_this.props.onBlur(event);
|
|
}
|
|
}, _this.handleMouseDown = function (event) {
|
|
if (_this.props.disabled) {
|
|
return;
|
|
}
|
|
|
|
var position = void 0;
|
|
if (isMouseControlInverted(_this.props.axis)) {
|
|
position = _this.getTrackOffset() - event[mainAxisClientOffsetProperty[_this.props.axis]];
|
|
} else {
|
|
position = event[mainAxisClientOffsetProperty[_this.props.axis]] - _this.getTrackOffset();
|
|
}
|
|
_this.setValueFromPosition(event, position);
|
|
|
|
document.addEventListener('mousemove', _this.handleDragMouseMove);
|
|
document.addEventListener('mouseup', _this.handleMouseEnd);
|
|
|
|
// Cancel text selection
|
|
event.preventDefault();
|
|
|
|
// Set focus manually since we called preventDefault()
|
|
_this.handle.focus();
|
|
|
|
_this.onDragStart(event);
|
|
}, _this.handleMouseUp = function () {
|
|
if (!_this.props.disabled) {
|
|
_this.setState({
|
|
active: false
|
|
});
|
|
}
|
|
}, _this.handleMouseEnter = function () {
|
|
_this.setState({
|
|
hovered: true
|
|
});
|
|
}, _this.handleMouseLeave = function () {
|
|
_this.setState({
|
|
hovered: false
|
|
});
|
|
}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
|
|
}
|
|
|
|
(0, _createClass3.default)(Slider, [{
|
|
key: 'componentWillMount',
|
|
value: function componentWillMount() {
|
|
var _props = this.props,
|
|
valueProp = _props.value,
|
|
defaultValue = _props.defaultValue,
|
|
min = _props.min,
|
|
max = _props.max;
|
|
|
|
|
|
var value = valueProp;
|
|
if (value === undefined) {
|
|
value = defaultValue !== undefined ? defaultValue : min;
|
|
}
|
|
|
|
if (value > max) {
|
|
value = max;
|
|
} else if (value < min) {
|
|
value = min;
|
|
}
|
|
|
|
this.setState({
|
|
value: value
|
|
});
|
|
}
|
|
}, {
|
|
key: 'componentWillReceiveProps',
|
|
value: function componentWillReceiveProps(nextProps) {
|
|
if (nextProps.value !== undefined && !this.state.dragging) {
|
|
this.setState({
|
|
value: nextProps.value
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: 'getValue',
|
|
value: function getValue() {
|
|
process.env.NODE_ENV !== "production" ? (0, _warning2.default)(false, 'Material-UI Slider: getValue() method is deprecated.\n Use the onChange callbacks instead.\n It will be removed with v0.17.0.') : void 0;
|
|
|
|
return this.state.value;
|
|
}
|
|
}, {
|
|
key: 'clearValue',
|
|
value: function clearValue() {
|
|
process.env.NODE_ENV !== "production" ? (0, _warning2.default)(false, 'Material-UI Slider: clearValue() method is deprecated.\n Use the value property to control the component instead.\n It will be removed with v0.17.0.') : void 0;
|
|
|
|
this.setState({
|
|
value: this.props.min
|
|
});
|
|
}
|
|
}, {
|
|
key: 'getTrackOffset',
|
|
value: function getTrackOffset() {
|
|
return this.track.getBoundingClientRect()[mainAxisOffsetProperty[this.props.axis]];
|
|
}
|
|
}, {
|
|
key: 'onDragStart',
|
|
value: function onDragStart(event) {
|
|
this.setState({
|
|
dragging: true,
|
|
active: true
|
|
});
|
|
|
|
if (this.props.onDragStart) {
|
|
this.props.onDragStart(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'onDragUpdate',
|
|
value: function onDragUpdate(event, type) {
|
|
var _this2 = this;
|
|
|
|
if (this.dragRunning) {
|
|
return;
|
|
}
|
|
this.dragRunning = true;
|
|
|
|
requestAnimationFrame(function () {
|
|
_this2.dragRunning = false;
|
|
|
|
var source = type === 'touch' ? event.touches[0] : event;
|
|
|
|
var position = void 0;
|
|
if (isMouseControlInverted(_this2.props.axis)) {
|
|
position = _this2.getTrackOffset() - source[mainAxisClientOffsetProperty[_this2.props.axis]];
|
|
} else {
|
|
position = source[mainAxisClientOffsetProperty[_this2.props.axis]] - _this2.getTrackOffset();
|
|
}
|
|
|
|
if (!_this2.props.disabled) {
|
|
_this2.setValueFromPosition(event, position);
|
|
}
|
|
});
|
|
}
|
|
}, {
|
|
key: 'onDragStop',
|
|
value: function onDragStop(event) {
|
|
this.setState({
|
|
dragging: false,
|
|
active: false
|
|
});
|
|
|
|
if (this.props.onDragStop) {
|
|
this.props.onDragStop(event);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'setValueFromPosition',
|
|
value: function setValueFromPosition(event, position) {
|
|
var positionMax = this.track[mainAxisClientProperty[this.props.axis]];
|
|
if (position < 0) {
|
|
position = 0;
|
|
} else if (position > positionMax) {
|
|
position = positionMax;
|
|
}
|
|
|
|
var _props2 = this.props,
|
|
step = _props2.step,
|
|
min = _props2.min,
|
|
max = _props2.max;
|
|
|
|
|
|
var value = void 0;
|
|
value = position / positionMax * (max - min);
|
|
value = Math.round(value / step) * step + min;
|
|
value = parseFloat(value.toFixed(5));
|
|
|
|
if (value > max) {
|
|
value = max;
|
|
} else if (value < min) {
|
|
value = min;
|
|
}
|
|
|
|
if (this.state.value !== value) {
|
|
this.setState({
|
|
value: value
|
|
});
|
|
|
|
if (this.props.onChange) {
|
|
this.props.onChange(event, value);
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this3 = this;
|
|
|
|
var _props3 = this.props,
|
|
axis = _props3.axis,
|
|
description = _props3.description,
|
|
disabled = _props3.disabled,
|
|
disableFocusRipple = _props3.disableFocusRipple,
|
|
error = _props3.error,
|
|
max = _props3.max,
|
|
min = _props3.min,
|
|
name = _props3.name,
|
|
onBlur = _props3.onBlur,
|
|
onChange = _props3.onChange,
|
|
onDragStart = _props3.onDragStart,
|
|
onDragStop = _props3.onDragStop,
|
|
onFocus = _props3.onFocus,
|
|
required = _props3.required,
|
|
sliderStyle = _props3.sliderStyle,
|
|
step = _props3.step,
|
|
style = _props3.style,
|
|
other = (0, _objectWithoutProperties3.default)(_props3, ['axis', 'description', 'disabled', 'disableFocusRipple', 'error', 'max', 'min', 'name', 'onBlur', 'onChange', 'onDragStart', 'onDragStop', 'onFocus', 'required', 'sliderStyle', 'step', 'style']);
|
|
var _state = this.state,
|
|
active = _state.active,
|
|
focused = _state.focused,
|
|
hovered = _state.hovered,
|
|
value = _state.value;
|
|
var prepareStyles = this.context.muiTheme.prepareStyles;
|
|
|
|
var styles = getStyles(this.props, this.context, this.state);
|
|
var percent = getPercent(value, min, max);
|
|
|
|
var handleStyles = {};
|
|
if (percent === 0) {
|
|
handleStyles = (0, _simpleAssign2.default)({}, styles.handle, styles.handleWhenPercentZero, active && styles.handleWhenActive, (hovered || focused) && !disabled && styles.handleWhenPercentZeroAndFocused, disabled && styles.handleWhenPercentZeroAndDisabled);
|
|
} else {
|
|
handleStyles = (0, _simpleAssign2.default)({}, styles.handle, active && styles.handleWhenActive, disabled && styles.handleWhenDisabled);
|
|
}
|
|
|
|
var rippleStyle = (0, _simpleAssign2.default)({}, styles.ripple, percent === 0 && styles.rippleWhenPercentZero);
|
|
|
|
return _react2.default.createElement(
|
|
'div',
|
|
(0, _extends3.default)({}, other, { style: prepareStyles((0, _simpleAssign2.default)({}, style)) }),
|
|
_react2.default.createElement(
|
|
'span',
|
|
null,
|
|
description
|
|
),
|
|
_react2.default.createElement(
|
|
'span',
|
|
null,
|
|
error
|
|
),
|
|
_react2.default.createElement(
|
|
'div',
|
|
{
|
|
style: prepareStyles((0, _simpleAssign2.default)({}, styles.slider, sliderStyle)),
|
|
onFocus: this.handleFocus,
|
|
onBlur: this.handleBlur,
|
|
onMouseDown: this.handleMouseDown,
|
|
onMouseEnter: this.handleMouseEnter,
|
|
onMouseLeave: this.handleMouseLeave,
|
|
onMouseUp: this.handleMouseUp,
|
|
onTouchStart: this.handleTouchStart,
|
|
onKeyDown: !disabled && this.handleKeyDown
|
|
},
|
|
_react2.default.createElement(
|
|
'div',
|
|
{ ref: function ref(node) {
|
|
return _this3.track = node;
|
|
}, style: prepareStyles(styles.track) },
|
|
_react2.default.createElement('div', { style: prepareStyles(styles.filled) }),
|
|
_react2.default.createElement('div', { style: prepareStyles(styles.remaining) }),
|
|
_react2.default.createElement(
|
|
'div',
|
|
{
|
|
ref: function ref(node) {
|
|
return _this3.handle = node;
|
|
},
|
|
style: prepareStyles(handleStyles),
|
|
tabIndex: 0
|
|
},
|
|
!disabled && !disableFocusRipple && _react2.default.createElement(_FocusRipple2.default, {
|
|
style: rippleStyle,
|
|
innerStyle: styles.rippleInner,
|
|
show: (hovered || focused) && !active,
|
|
color: styles.rippleColor.fill
|
|
})
|
|
)
|
|
)
|
|
),
|
|
_react2.default.createElement('input', {
|
|
type: 'hidden',
|
|
name: name,
|
|
value: value,
|
|
required: required,
|
|
min: min,
|
|
max: max,
|
|
step: step
|
|
})
|
|
);
|
|
}
|
|
}]);
|
|
return Slider;
|
|
}(_react.Component);
|
|
|
|
Slider.defaultProps = {
|
|
axis: 'x',
|
|
disabled: false,
|
|
disableFocusRipple: false,
|
|
max: 1,
|
|
min: 0,
|
|
required: true,
|
|
step: 0.01,
|
|
style: {}
|
|
};
|
|
Slider.contextTypes = {
|
|
muiTheme: _react.PropTypes.object.isRequired
|
|
};
|
|
process.env.NODE_ENV !== "production" ? Slider.propTypes = {
|
|
/**
|
|
* The axis on which the slider will slide.
|
|
*/
|
|
axis: _react.PropTypes.oneOf(['x', 'x-reverse', 'y', 'y-reverse']),
|
|
/**
|
|
* The default value of the slider.
|
|
*/
|
|
defaultValue: valueInRangePropType,
|
|
/**
|
|
* Describe the slider.
|
|
*/
|
|
description: (0, _deprecatedPropType2.default)(_react.PropTypes.node, 'Use a sibling node element instead. It will be removed with v0.17.0.'),
|
|
/**
|
|
* Disables focus ripple if set to true.
|
|
*/
|
|
disableFocusRipple: _react.PropTypes.bool,
|
|
/**
|
|
* If true, the slider will not be interactable.
|
|
*/
|
|
disabled: _react.PropTypes.bool,
|
|
/**
|
|
* An error message for the slider.
|
|
*/
|
|
error: (0, _deprecatedPropType2.default)(_react.PropTypes.node, 'Use a sibling node element instead. It will be removed with v0.17.0.'),
|
|
/**
|
|
* The maximum value the slider can slide to on
|
|
* a scale from 0 to 1 inclusive. Cannot be equal to min.
|
|
*/
|
|
max: minMaxPropType,
|
|
/**
|
|
* The minimum value the slider can slide to on a scale
|
|
* from 0 to 1 inclusive. Cannot be equal to max.
|
|
*/
|
|
min: minMaxPropType,
|
|
/**
|
|
* The name of the slider. Behaves like the name attribute
|
|
* of an input element.
|
|
*/
|
|
name: _react.PropTypes.string,
|
|
/** @ignore */
|
|
onBlur: _react.PropTypes.func,
|
|
/**
|
|
* Callback function that is fired when the slider's value changed.
|
|
*
|
|
* @param {object} event KeyDown event targeting the slider.
|
|
* @param {number} newValue The new value of the slider.
|
|
*/
|
|
onChange: _react.PropTypes.func,
|
|
/**
|
|
* Callback function that is fired when the slider has begun to move.
|
|
*
|
|
* @param {object} event MouseDown or TouchStart event targeting the slider.
|
|
*/
|
|
onDragStart: _react.PropTypes.func,
|
|
/**
|
|
* Callback function that is fired when the slide has stopped moving.
|
|
*
|
|
* @param {object} event MouseEnd or TouchEnd event targeting the slider.
|
|
*/
|
|
onDragStop: _react.PropTypes.func,
|
|
/** @ignore */
|
|
onFocus: _react.PropTypes.func,
|
|
/**
|
|
* Whether or not the slider is required in a form.
|
|
*/
|
|
required: _react.PropTypes.bool,
|
|
/**
|
|
* Override the inline-styles of the inner slider element.
|
|
*/
|
|
sliderStyle: _react.PropTypes.object,
|
|
/**
|
|
* The granularity the slider can step through values.
|
|
*/
|
|
step: _react.PropTypes.number,
|
|
/**
|
|
* Override the inline-styles of the root element.
|
|
*/
|
|
style: _react.PropTypes.object,
|
|
/**
|
|
* The value of the slider.
|
|
*/
|
|
value: valueInRangePropType
|
|
} : void 0;
|
|
exports.default = Slider; |