fc-react-slider
Version:
A fully featured slider component made in React
242 lines (194 loc) • 9.18 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _index = require('/Users/ritz078/projects/react-slider/node_modules/redbox-react/lib/index.js');
var _index2 = _interopRequireDefault(_index);
var _index3 = require('/Users/ritz078/projects/react-slider/node_modules/react-transform-catch-errors/lib/index.js');
var _index4 = _interopRequireDefault(_index3);
var _react2 = require('react');
var _react3 = _interopRequireDefault(_react2);
var _index5 = require('/Users/ritz078/projects/react-slider/node_modules/react-transform-hmr/lib/index.js');
var _index6 = _interopRequireDefault(_index5);
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _utils = require('./utils');
var _helpers = require('./helpers');
var _autoBind = require('./utils/autoBind');
var _autoBind2 = _interopRequireDefault(_autoBind);
var _constants = require('./constants');
var _constants2 = _interopRequireDefault(_constants);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var _components = {
Control: {
displayName: 'Control'
}
};
var _UsersRitz078ProjectsReactSliderNode_modulesReactTransformHmrLibIndexJs2 = (0, _index6.default)({
filename: 'components/Slider/Control.js',
components: _components,
locals: [module],
imports: [_react3.default]
});
var _UsersRitz078ProjectsReactSliderNode_modulesReactTransformCatchErrorsLibIndexJs2 = (0, _index4.default)({
filename: 'components/Slider/Control.js',
components: _components,
locals: [],
imports: [_react3.default, _index2.default]
});
function _wrapComponent(id) {
return function (Component) {
return _UsersRitz078ProjectsReactSliderNode_modulesReactTransformHmrLibIndexJs2(_UsersRitz078ProjectsReactSliderNode_modulesReactTransformCatchErrorsLibIndexJs2(Component, id), id);
};
}
var Control = _wrapComponent('Control')(function (_Component) {
_inherits(Control, _Component);
function Control(props, context) {
_classCallCheck(this, Control);
var _this = _possibleConstructorReturn(this, (Control.__proto__ || Object.getPrototypeOf(Control)).call(this, props, context));
(0, _autoBind2.default)(['handleMouseDown', 'handleDrag', 'handleMouseUp', 'handleTouchStart', 'handleTouchEnd', 'onChange'], _this);
return _this;
}
_createClass(Control, [{
key: 'componentDidMount',
value: function componentDidMount() {
this.setSliderPosition(this.props);
this.controlWidth = this.getControlWidth();
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(newProps) {
var propsChanged = newProps.value !== this.props.value || newProps.trackOffset.width !== this.props.trackOffset.width;
if (propsChanged) this.setSliderPosition(newProps);
}
}, {
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(newProps) {
var dimension = _constants2.default[newProps.orientation].dimension;
return (0, _utils.hasStepDifference)(newProps.value, this.props.value, newProps.step) && (0, _utils.isWithinRange)(newProps, newProps.value) || newProps.trackOffset[dimension] !== this.props.trackOffset[dimension];
}
}, {
key: 'onChange',
value: function onChange(value) {
var isRenderRequired = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
this.props.onChange({
controlWidth: this.controlWidth,
name: this.props.name,
value: value
}, isRenderRequired);
}
}, {
key: 'getControlWidth',
value: function getControlWidth() {
var control = this.refs.control;
if (!control) return 0;
return control.offsetWidth;
}
}, {
key: 'setSliderPosition',
value: function setSliderPosition(props) {
var value = props.value;
this.onChange(value, true);
}
}, {
key: 'handleMouseDown',
value: function handleMouseDown(e) {
(0, _utils.suppress)(e);
this.refs.controlWrapper.className += ' slider-active';
document.addEventListener('mouseup', this.handleMouseUp);
if (this.props.readOnly) return;
document.addEventListener('mousemove', this.handleDrag);
this.props.onDragExtreme(this.props.name, this.props.value, 'start');
}
}, {
key: 'handleMouseUp',
value: function handleMouseUp(e) {
(0, _utils.suppress)(e);
this.refs.controlWrapper.className = (0, _utils.removeClass)(this.refs.controlWrapper, 'slider-active');
document.removeEventListener('mouseup', this.handleMouseUp);
if (this.props.readOnly) return;
document.removeEventListener('mousemove', this.handleDrag);
this.props.onDragExtreme(this.props.name, this.newValue, 'end');
}
}, {
key: 'handleTouchStart',
value: function handleTouchStart() {
document.addEventListener('touchmove', this.handleDrag);
document.addEventListener('touchend', this.handleTouchEnd);
this.props.onDragExtreme(this.props.name, this.props.value, 'start');
}
}, {
key: 'handleTouchEnd',
value: function handleTouchEnd() {
document.removeEventListener('touchmove', this.handleDrag);
document.removeEventListener('touchend', this.handleTouchEnd);
this.props.onDragExtreme(this.props.name, this.newValue, 'end');
}
}, {
key: 'handleDrag',
value: function handleDrag(e) {
(0, _utils.suppress)(e);
var position = (0, _helpers.getRelativePosition)(e, this.props, this.controlWidth);
this.newValue = (0, _helpers.getValueFromPosition)(this.props, position);
this.onChange(this.newValue);
}
}, {
key: 'render',
value: function render() {
var _props = this.props,
name = _props.name,
value = _props.value,
toolTipTemplate = _props.toolTipTemplate,
disabled = _props.disabled,
orientation = _props.orientation;
var className = (0, _classnames2.default)('slider-control', name);
var sliderPosition = (0, _utils.isVertical)(orientation) ? 100 - (0, _helpers.getPositionFromValue)(this.props) : (0, _helpers.getPositionFromValue)(this.props);
var style = void 0;
if ((0, _utils.isVertical)(orientation)) {
style = {
top: sliderPosition + '%'
};
} else {
style = {
transform: 'translateX(' + sliderPosition + '%) translate3d(0,0,0)'
};
}
return _react3.default.createElement(
'div',
{ className: 'slider-slider-wrapper', ref: 'controlWrapper', style: style },
_react3.default.createElement(
'div',
{ className: 'slider-value' },
toolTipTemplate(value)
),
_react3.default.createElement('div', {
className: className,
draggable: 'false',
onMouseDown: !disabled && this.handleMouseDown,
onTouchStart: !disabled && this.handleTouchStart,
ref: 'control'
})
);
}
}]);
return Control;
}(_react2.Component));
exports.default = Control;
Control.propTypes = {
disabled: _react2.PropTypes.bool.isRequired,
max: _react2.PropTypes.number.isRequired,
min: _react2.PropTypes.number.isRequired,
name: _react2.PropTypes.string.isRequired,
onChange: _react2.PropTypes.func.isRequired,
onDragExtreme: _react2.PropTypes.func.isRequired,
orientation: _react2.PropTypes.string.isRequired,
readOnly: _react2.PropTypes.bool.isRequired,
step: _react2.PropTypes.number.isRequired,
toolTipTemplate: _react2.PropTypes.func.isRequired,
trackOffset: _react2.PropTypes.object.isRequired,
value: _react2.PropTypes.number.isRequired
};