diff --git a/.gitignore b/.gitignore index 06f291a..1627611 100644 --- a/.gitignore +++ b/.gitignore @@ -2,5 +2,4 @@ build coverage docs -lib node_modules diff --git a/example/js/example-app.jsx b/example/js/example-app.jsx index c02c2bb..1783e94 100644 --- a/example/js/example-app.jsx +++ b/example/js/example-app.jsx @@ -49,6 +49,7 @@ export default class ExampleApp extends React.Component { maxValue={20} minValue={0} labelSuffix="kg" + isExternal value={this.state.value4} onChange={value => this.setState({ value4: value })} onChangeComplete={value => console.log(value)} /> diff --git a/lib/bundle/react-input-range.css b/lib/bundle/react-input-range.css new file mode 100644 index 0000000..8825607 --- /dev/null +++ b/lib/bundle/react-input-range.css @@ -0,0 +1,97 @@ +.input-range__slider { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: #3f51b5; + border: 1px solid #3f51b5; + border-radius: 100%; + cursor: pointer; + display: block; + height: 1rem; + margin-left: -0.5rem; + margin-top: -0.65rem; + outline: none; + position: absolute; + top: 50%; + -webkit-transition: box-shadow 0.3s ease-out, -webkit-transform 0.3s ease-out; + transition: box-shadow 0.3s ease-out, -webkit-transform 0.3s ease-out; + transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; + transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, -webkit-transform 0.3s ease-out; + width: 1rem; } + .input-range__slider:active { + -webkit-transform: scale(1.3); + transform: scale(1.3); } + .input-range__slider:focus { + box-shadow: 0 0 0 5px rgba(63, 81, 181, 0.2); } + .input-range--disabled .input-range__slider { + background: #cccccc; + border: 1px solid #cccccc; + box-shadow: none; + -webkit-transform: none; + transform: none; } + +.input-range__slider-container { + -webkit-transition: left 0.3s ease-out; + transition: left 0.3s ease-out; } + +.input-range__label { + color: #aaaaaa; + font-family: "Helvetica Neue", san-serif; + font-size: 0.8rem; + -webkit-transform: translateZ(0); + transform: translateZ(0); + white-space: nowrap; } + +.input-range__label--min, +.input-range__label--max { + bottom: -1.4rem; + position: absolute; } + +.input-range__label--min { + left: 0; } + +.input-range__label--max { + right: 0; } + +.input-range__label--value { + position: absolute; + top: -1.8rem; } + +.input-range__label-container { + left: -50%; + position: relative; } + .input-range__label--max .input-range__label-container { + left: 50%; } + .input-range__label-container.marker-min { + left: -90%; } + .input-range__label-container.marker-max { + left: 0%; } + +.input-range__track { + background: #eeeeee; + border-radius: 0.3rem; + cursor: pointer; + display: block; + height: 0.3rem; + position: relative; + -webkit-transition: left 0.3s ease-out, width 0.3s ease-out; + transition: left 0.3s ease-out, width 0.3s ease-out; } + .input-range--disabled .input-range__track { + background: #eeeeee; } + +.input-range__track--background { + left: 0; + margin-top: -0.15rem; + position: absolute; + right: 0; + top: 50%; } + +.input-range__track--active { + background: #3f51b5; } + +.input-range { + height: 1rem; + position: relative; + width: 100%; } + +/*# sourceMappingURL=react-input-range.css.map*/ \ No newline at end of file diff --git a/lib/bundle/react-input-range.css.map b/lib/bundle/react-input-range.css.map new file mode 100644 index 0000000..c238e84 --- /dev/null +++ b/lib/bundle/react-input-range.css.map @@ -0,0 +1 @@ +{"version":3,"sources":[],"names":[],"mappings":"","file":"react-input-range.css","sourceRoot":""} \ No newline at end of file diff --git a/lib/bundle/react-input-range.js b/lib/bundle/react-input-range.js new file mode 100644 index 0000000..5eb8127 --- /dev/null +++ b/lib/bundle/react-input-range.js @@ -0,0 +1,2340 @@ +(function webpackUniversalModuleDefinition(root, factory) { + if(typeof exports === 'object' && typeof module === 'object') + module.exports = factory(require("react")); + else if(typeof define === 'function' && define.amd) + define(["react"], factory); + else if(typeof exports === 'object') + exports["InputRange"] = factory(require("react")); + else + root["InputRange"] = factory(root["React"]); +})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) { +return /******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) +/******/ return installedModules[moduleId].exports; +/******/ +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ i: moduleId, +/******/ l: false, +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); +/******/ +/******/ // Flag the module as loaded +/******/ module.l = true; +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/******/ +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; +/******/ +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; +/******/ +/******/ // identity function for calling harmony imports with the correct context +/******/ __webpack_require__.i = function(value) { return value; }; +/******/ +/******/ // define getter function for harmony exports +/******/ __webpack_require__.d = function(exports, name, getter) { +/******/ if(!__webpack_require__.o(exports, name)) { +/******/ Object.defineProperty(exports, name, { +/******/ configurable: false, +/******/ enumerable: true, +/******/ get: getter +/******/ }); +/******/ } +/******/ }; +/******/ +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = function(module) { +/******/ var getter = module && module.__esModule ? +/******/ function getDefault() { return module['default']; } : +/******/ function getModuleExports() { return module; }; +/******/ __webpack_require__.d(getter, 'a', getter); +/******/ return getter; +/******/ }; +/******/ +/******/ // Object.prototype.hasOwnProperty.call +/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; +/******/ +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; +/******/ +/******/ // Load entry module and return exports +/******/ return __webpack_require__(__webpack_require__.s = 5); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _captialize = __webpack_require__(14); + +Object.defineProperty(exports, 'captialize', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_captialize).default; + } +}); + +var _clamp = __webpack_require__(15); + +Object.defineProperty(exports, 'clamp', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_clamp).default; + } +}); + +var _distanceTo = __webpack_require__(16); + +Object.defineProperty(exports, 'distanceTo', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_distanceTo).default; + } +}); + +var _isDefined = __webpack_require__(17); + +Object.defineProperty(exports, 'isDefined', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_isDefined).default; + } +}); + +var _isNumber = __webpack_require__(18); + +Object.defineProperty(exports, 'isNumber', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_isNumber).default; + } +}); + +var _isObject = __webpack_require__(19); + +Object.defineProperty(exports, 'isObject', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_isObject).default; + } +}); + +var _length = __webpack_require__(20); + +Object.defineProperty(exports, 'length', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_length).default; + } +}); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +/***/ }), +/* 1 */ +/***/ (function(module, exports) { + +module.exports = __WEBPACK_EXTERNAL_MODULE_1__; + +/***/ }), +/* 2 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; +/** + * @copyright 2015, Andrey Popp <8mayday@gmail.com> + * + * The decorator may be used on classes or methods + * ``` + * @autobind + * class FullBound {} + * + * class PartBound { + * @autobind + * method () {} + * } + * ``` + */ + + +Object.defineProperty(exports, '__esModule', { + value: true +}); +exports['default'] = autobind; + +function autobind() { + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + if (args.length === 1) { + return boundClass.apply(undefined, args); + } else { + return boundMethod.apply(undefined, args); + } +} + +/** + * Use boundMethod to bind all methods on the target.prototype + */ +function boundClass(target) { + // (Using reflect to get all keys including symbols) + var keys = undefined; + // Use Reflect if exists + if (typeof Reflect !== 'undefined' && typeof Reflect.ownKeys === 'function') { + keys = Reflect.ownKeys(target.prototype); + } else { + keys = Object.getOwnPropertyNames(target.prototype); + // use symbols if support is provided + if (typeof Object.getOwnPropertySymbols === 'function') { + keys = keys.concat(Object.getOwnPropertySymbols(target.prototype)); + } + } + + keys.forEach(function (key) { + // Ignore special case target method + if (key === 'constructor') { + return; + } + + var descriptor = Object.getOwnPropertyDescriptor(target.prototype, key); + + // Only methods need binding + if (typeof descriptor.value === 'function') { + Object.defineProperty(target.prototype, key, boundMethod(target, key, descriptor)); + } + }); + return target; +} + +/** + * Return a descriptor removing the value and returning a getter + * The getter will return a .bind version of the function + * and memoize the result against a symbol on the instance + */ +function boundMethod(target, key, descriptor) { + var fn = descriptor.value; + + if (typeof fn !== 'function') { + throw new Error('@autobind decorator can only be applied to methods not: ' + typeof fn); + } + + // In IE11 calling Object.defineProperty has a side-effect of evaluating the + // getter for the property which is being replaced. This causes infinite + // recursion and an "Out of stack space" error. + var definingProperty = false; + + return { + configurable: true, + get: function get() { + if (definingProperty || this === target.prototype || this.hasOwnProperty(key)) { + return fn; + } + + var boundFn = fn.bind(this); + definingProperty = true; + Object.defineProperty(this, key, { + value: boundFn, + configurable: true, + writable: true + }); + definingProperty = false; + return boundFn; + } + }; +} +module.exports = exports['default']; + + +/***/ }), +/* 3 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = Label; + +var _react = __webpack_require__(1); + +var _react2 = _interopRequireDefault(_react); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +/** + * @ignore + * @param {Object} props + * @param {InputRangeClassNames} props.classNames + * @param {Function} props.formatLabel + * @param {string} props.type + */ +function Label(props) { + var labelValue = props.formatLabel ? props.formatLabel(props.children, props.type) : props.children; + var labelClassName = props.markerType === 'track' ? props.classNames.labelContainer + ' marker-' + props.markerValue : props.classNames.labelContainer; + return _react2.default.createElement( + 'span', + { className: props.classNames[props.type + 'Label'] }, + _react2.default.createElement( + 'span', + { className: labelClassName }, + labelValue + ) + ); +} + +/** + * @type {Object} + * @property {Function} children + * @property {Function} classNames + * @property {Function} formatLabel + * @property {Function} type + */ +Label.propTypes = { + children: _react2.default.PropTypes.node.isRequired, + classNames: _react2.default.PropTypes.objectOf(_react2.default.PropTypes.string).isRequired, + formatLabel: _react2.default.PropTypes.func, + type: _react2.default.PropTypes.string.isRequired, + markerType: _react2.default.PropTypes.string, + markerValue: _react2.default.PropTypes.string + +}; +module.exports = exports['default']; + +/***/ }), +/* 4 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _inputRange = __webpack_require__(7); + +Object.defineProperty(exports, 'InputRange', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_inputRange).default; + } +}); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +/***/ }), +/* 5 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _inputRange = __webpack_require__(4); + +/** + * @ignore + * @typedef {Object} ClientRect + * @property {number} height + * @property {number} left + * @property {number} top + * @property {number} width + */ + +/** + * @typedef {Object} InputRangeClassNames + * @property {string} activeTrack + * @property {string} disabledInputRange + * @property {string} inputRange + * @property {string} labelContainer + * @property {string} maxLabel + * @property {string} minLabel + * @property {string} slider + * @property {string} sliderContainer + * @property {string} track + * @property {string} valueLabel + */ + +/** + * @typedef {Function} LabelFormatter + * @param {number} value + * @param {string} type + * @return {string} + */ + +/** + * @ignore + * @typedef {Object} Point + * @property {number} x + * @property {number} y + */ + +/** + * @typedef {Object} Range + * @property {number} min - Min value + * @property {number} max - Max value + */ + +exports.default = _inputRange.InputRange; +module.exports = exports['default']; + +/***/ }), +/* 6 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); +/** +* Default CSS class names +* @ignore +* @type {InputRangeClassNames} +*/ +var DEFAULT_CLASS_NAMES = { + activeTrack: 'input-range__track input-range__track--active', + disabledInputRange: 'input-range input-range--disabled', + inputRange: 'input-range', + labelContainer: 'input-range__label-container', + maxLabel: 'input-range__label input-range__label--max', + minLabel: 'input-range__label input-range__label--min', + slider: 'input-range__slider', + sliderContainer: 'input-range__slider-container', + track: 'input-range__track input-range__track--background', + valueLabel: 'input-range__label input-range__label--value' +}; + +exports.default = DEFAULT_CLASS_NAMES; +module.exports = exports['default']; + +/***/ }), +/* 7 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +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 _desc, _value, _class; + +var _react = __webpack_require__(1); + +var _react2 = _interopRequireDefault(_react); + +var _autobindDecorator = __webpack_require__(2); + +var _autobindDecorator2 = _interopRequireDefault(_autobindDecorator); + +var _valueTransformer = __webpack_require__(13); + +var valueTransformer = _interopRequireWildcard(_valueTransformer); + +var _defaultClassNames = __webpack_require__(6); + +var _defaultClassNames2 = _interopRequireDefault(_defaultClassNames); + +var _label = __webpack_require__(3); + +var _label2 = _interopRequireDefault(_label); + +var _rangePropType = __webpack_require__(9); + +var _rangePropType2 = _interopRequireDefault(_rangePropType); + +var _valuePropType = __webpack_require__(12); + +var _valuePropType2 = _interopRequireDefault(_valuePropType); + +var _slider = __webpack_require__(10); + +var _slider2 = _interopRequireDefault(_slider); + +var _track = __webpack_require__(11); + +var _track2 = _interopRequireDefault(_track); + +var _utils = __webpack_require__(0); + +var _keyCodes = __webpack_require__(8); + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } } + +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; } + +function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) { + var desc = {}; + Object['ke' + 'ys'](descriptor).forEach(function (key) { + desc[key] = descriptor[key]; + }); + desc.enumerable = !!desc.enumerable; + desc.configurable = !!desc.configurable; + + if ('value' in desc || desc.initializer) { + desc.writable = true; + } + + desc = decorators.slice().reverse().reduce(function (desc, decorator) { + return decorator(target, property, desc) || desc; + }, desc); + + if (context && desc.initializer !== void 0) { + desc.value = desc.initializer ? desc.initializer.call(context) : void 0; + desc.initializer = undefined; + } + + if (desc.initializer === void 0) { + Object['define' + 'Property'](target, property, desc); + desc = null; + } + + return desc; +} + +/** + * A React component that allows users to input numeric values within a range + * by dragging its sliders. + */ +var InputRange = (_class = function (_React$Component) { + _inherits(InputRange, _React$Component); + + _createClass(InputRange, null, [{ + key: 'propTypes', + + /** + * @ignore + * @override + * @return {Object} + */ + get: function get() { + return { + ariaLabelledby: _react2.default.PropTypes.string, + ariaControls: _react2.default.PropTypes.string, + classNames: _react2.default.PropTypes.objectOf(_react2.default.PropTypes.string), + disabled: _react2.default.PropTypes.bool, + formatLabel: _react2.default.PropTypes.func, + isExternal: _react2.default.PropTypes.bool, + maxValue: _rangePropType2.default, + minValue: _rangePropType2.default, + name: _react2.default.PropTypes.string, + onChangeStart: _react2.default.PropTypes.func, + onChange: _react2.default.PropTypes.func.isRequired, + onChangeComplete: _react2.default.PropTypes.func, + step: _react2.default.PropTypes.number, + value: _valuePropType2.default + }; + } + + /** + * @ignore + * @override + * @return {Object} + */ + + }, { + key: 'defaultProps', + get: function get() { + return { + classNames: _defaultClassNames2.default, + disabled: false, + maxValue: 10, + minValue: 0, + step: 1, + isExternal: false + }; + } + + /** + * @param {Object} props + * @param {string} [props.ariaLabelledby] + * @param {string} [props.ariaControls] + * @param {InputRangeClassNames} [props.classNames] + * @param {boolean} [props.disabled = false] + * @param {Function} [props.formatLabel] + * @param {number|Range} [props.maxValue = 10] + * @param {number|Range} [props.minValue = 0] + * @param {string} [props.name] + * @param {string} props.onChange + * @param {Function} [props.onChangeComplete] + * @param {Function} [props.onChangeStart] + * @param {number} [props.step = 1] + * @param {number|Range} props.value + */ + + }]); + + function InputRange(props) { + _classCallCheck(this, InputRange); + + /** + * @private + * @type {?number} + */ + var _this = _possibleConstructorReturn(this, (InputRange.__proto__ || Object.getPrototypeOf(InputRange)).call(this, props)); + + _this.startValue = null; + + /** + * @private + * @type {?Component} + */ + _this.node = null; + + /** + * @private + * @type {?Component} + */ + _this.trackNode = null; + return _this; + } + + /** + * @ignore + * @override + * @return {void} + */ + + + _createClass(InputRange, [{ + key: 'componentWillUnmount', + value: function componentWillUnmount() { + this.removeDocumentMouseUpListener(); + this.removeDocumentTouchEndListener(); + } + + /** + * Return the CSS class name of the component + * @private + * @return {string} + */ + + }, { + key: 'getComponentClassName', + value: function getComponentClassName() { + if (!this.props.disabled) { + return this.props.classNames.inputRange; + } + + return this.props.classNames.disabledInputRange; + } + + /** + * Return the bounding rect of the track + * @private + * @return {ClientRect} + */ + + }, { + key: 'getTrackClientRect', + value: function getTrackClientRect() { + return this.trackNode.getClientRect(); + } + + /** + * Return the slider key closest to a point + * @private + * @param {Point} position + * @return {string} + */ + + }, { + key: 'getKeyByPosition', + value: function getKeyByPosition(position) { + var values = valueTransformer.getValueFromProps(this.props, this.isMultiValue()); + var positions = valueTransformer.getPositionsFromValues(values, this.props.minValue, this.props.maxValue, this.getTrackClientRect()); + + if (this.isMultiValue()) { + var distanceToMin = (0, _utils.distanceTo)(position, positions.min); + var distanceToMax = (0, _utils.distanceTo)(position, positions.max); + + if (distanceToMin < distanceToMax) { + return 'min'; + } + } + + return 'max'; + } + + /** + * Return all the slider keys + * @private + * @return {string[]} + */ + + }, { + key: 'getKeys', + value: function getKeys() { + if (this.isMultiValue()) { + return ['min', 'max']; + } + + return ['max']; + } + + /** + * Return true if the difference between the new and the current value is + * greater or equal to the step amount of the component + * @private + * @param {Range} values + * @return {boolean} + */ + + }, { + key: 'hasStepDifference', + value: function hasStepDifference(values) { + var currentValues = valueTransformer.getValueFromProps(this.props, this.isMultiValue()); + + return (0, _utils.length)(values.min, currentValues.min) >= this.props.step || (0, _utils.length)(values.max, currentValues.max) >= this.props.step; + } + + /** + * Return true if the component accepts a min and max value + * @private + * @return {boolean} + */ + + }, { + key: 'isMultiValue', + value: function isMultiValue() { + return (0, _utils.isObject)(this.props.value); + } + + /** + * Return true if the range is within the max and min value of the component + * @private + * @param {Range} values + * @return {boolean} + */ + + }, { + key: 'isWithinRange', + value: function isWithinRange(values) { + if (this.isMultiValue()) { + return values.min >= this.props.minValue && values.max <= this.props.maxValue && values.min < values.max; + } + + return values.max >= this.props.minValue && values.max <= this.props.maxValue; + } + + /** + * Return true if the new value should trigger a render + * @private + * @param {Range} values + * @return {boolean} + */ + + }, { + key: 'shouldUpdate', + value: function shouldUpdate(values) { + return this.isWithinRange(values) && this.hasStepDifference(values); + } + + /** + * Update the position of a slider + * @private + * @param {string} key + * @param {Point} position + * @return {void} + */ + + }, { + key: 'updatePosition', + value: function updatePosition(key, position) { + var values = valueTransformer.getValueFromProps(this.props, this.isMultiValue()); + var positions = valueTransformer.getPositionsFromValues(values, this.props.minValue, this.props.maxValue, this.getTrackClientRect()); + + positions[key] = position; + + this.updatePositions(positions); + } + + /** + * Update the positions of multiple sliders + * @private + * @param {Object} positions + * @param {Point} positions.min + * @param {Point} positions.max + * @return {void} + */ + + }, { + key: 'updatePositions', + value: function updatePositions(positions) { + var values = { + min: valueTransformer.getValueFromPosition(positions.min, this.props.minValue, this.props.maxValue, this.getTrackClientRect()), + max: valueTransformer.getValueFromPosition(positions.max, this.props.minValue, this.props.maxValue, this.getTrackClientRect()) + }; + + var transformedValues = { + min: valueTransformer.getStepValueFromValue(values.min, this.props.step), + max: valueTransformer.getStepValueFromValue(values.max, this.props.step) + }; + + this.updateValues(transformedValues); + } + + /** + * Update the value of a slider + * @private + * @param {string} key + * @param {number} value + * @return {void} + */ + + }, { + key: 'updateValue', + value: function updateValue(key, value) { + var values = valueTransformer.getValueFromProps(this.props, this.isMultiValue()); + + values[key] = value; + + this.updateValues(values); + } + + /** + * Update the values of multiple sliders + * @private + * @param {Range|number} values + * @return {void} + */ + + }, { + key: 'updateValues', + value: function updateValues(values) { + if (!this.shouldUpdate(values)) { + return; + } + + this.props.onChange(this.isMultiValue() ? values : values.max); + } + + /** + * Increment the value of a slider by key name + * @private + * @param {string} key + * @return {void} + */ + + }, { + key: 'incrementValue', + value: function incrementValue(key) { + var values = valueTransformer.getValueFromProps(this.props, this.isMultiValue()); + var value = values[key] + this.props.step; + + this.updateValue(key, value); + } + + /** + * Decrement the value of a slider by key name + * @private + * @param {string} key + * @return {void} + */ + + }, { + key: 'decrementValue', + value: function decrementValue(key) { + var values = valueTransformer.getValueFromProps(this.props, this.isMultiValue()); + var value = values[key] - this.props.step; + + this.updateValue(key, value); + } + + /** + * Listen to mouseup event + * @private + * @return {void} + */ + + }, { + key: 'addDocumentMouseUpListener', + value: function addDocumentMouseUpListener() { + this.removeDocumentMouseUpListener(); + this.node.ownerDocument.addEventListener('mouseup', this.handleMouseUp); + } + + /** + * Listen to touchend event + * @private + * @return {void} + */ + + }, { + key: 'addDocumentTouchEndListener', + value: function addDocumentTouchEndListener() { + this.removeDocumentTouchEndListener(); + this.node.ownerDocument.addEventListener('touchend', this.handleTouchEnd); + } + + /** + * Stop listening to mouseup event + * @private + * @return {void} + */ + + }, { + key: 'removeDocumentMouseUpListener', + value: function removeDocumentMouseUpListener() { + this.node.ownerDocument.removeEventListener('mouseup', this.handleMouseUp); + } + + /** + * Stop listening to touchend event + * @private + * @return {void} + */ + + }, { + key: 'removeDocumentTouchEndListener', + value: function removeDocumentTouchEndListener() { + this.node.ownerDocument.removeEventListener('touchend', this.handleTouchEnd); + } + + /** + * Handle any "mousemove" event received by the slider + * @private + * @param {SyntheticEvent} event + * @param {string} key + * @return {void} + */ + + }, { + key: 'handleSliderDrag', + value: function handleSliderDrag(event, key) { + var _this2 = this; + + if (this.props.disabled) { + return; + } + + var position = valueTransformer.getPositionFromEvent(event, this.getTrackClientRect()); + + requestAnimationFrame(function () { + return _this2.updatePosition(key, position); + }); + } + + /** + * Handle any "keydown" event received by the slider + * @private + * @param {SyntheticEvent} event + * @param {string} key + * @return {void} + */ + + }, { + key: 'handleSliderKeyDown', + value: function handleSliderKeyDown(event, key) { + if (this.props.disabled) { + return; + } + + switch (event.keyCode) { + case _keyCodes.LEFT_ARROW: + case _keyCodes.DOWN_ARROW: + event.preventDefault(); + this.decrementValue(key); + break; + + case _keyCodes.RIGHT_ARROW: + case _keyCodes.UP_ARROW: + event.preventDefault(); + this.incrementValue(key); + break; + + default: + break; + } + } + + /** + * Handle any "mousedown" event received by the track + * @private + * @param {SyntheticEvent} event + * @param {Point} position + * @return {void} + */ + + }, { + key: 'handleTrackMouseDown', + value: function handleTrackMouseDown(event, position) { + if (this.props.disabled) { + return; + } + + event.preventDefault(); + + this.updatePosition(this.getKeyByPosition(position), position); + } + + /** + * Handle the start of any mouse/touch event + * @private + * @return {void} + */ + + }, { + key: 'handleInteractionStart', + value: function handleInteractionStart() { + if (this.props.onChangeStart) { + this.props.onChangeStart(this.props.value); + } + + if (this.props.onChangeComplete && !(0, _utils.isDefined)(this.startValue)) { + this.startValue = this.props.value; + } + } + + /** + * Handle the end of any mouse/touch event + * @private + * @return {void} + */ + + }, { + key: 'handleInteractionEnd', + value: function handleInteractionEnd() { + if (!this.props.onChangeComplete || !(0, _utils.isDefined)(this.startValue)) { + return; + } + + if (this.startValue !== this.props.value) { + this.props.onChangeComplete(this.props.value); + } + + this.startValue = null; + } + + /** + * Handle any "keydown" event received by the component + * @private + * @param {SyntheticEvent} event + * @return {void} + */ + + }, { + key: 'handleKeyDown', + value: function handleKeyDown(event) { + this.handleInteractionStart(event); + } + + /** + * Handle any "keyup" event received by the component + * @private + * @param {SyntheticEvent} event + * @return {void} + */ + + }, { + key: 'handleKeyUp', + value: function handleKeyUp(event) { + this.handleInteractionEnd(event); + } + + /** + * Handle any "mousedown" event received by the component + * @private + * @param {SyntheticEvent} event + * @return {void} + */ + + }, { + key: 'handleMouseDown', + value: function handleMouseDown(event) { + this.handleInteractionStart(event); + this.addDocumentMouseUpListener(); + } + + /** + * Handle any "mouseup" event received by the component + * @private + * @param {SyntheticEvent} event + */ + + }, { + key: 'handleMouseUp', + value: function handleMouseUp(event) { + this.handleInteractionEnd(event); + this.removeDocumentMouseUpListener(); + } + + /** + * Handle any "touchstart" event received by the component + * @private + * @param {SyntheticEvent} event + * @return {void} + */ + + }, { + key: 'handleTouchStart', + value: function handleTouchStart(event) { + this.handleInteractionStart(event); + this.addDocumentTouchEndListener(); + } + + /** + * Handle any "touchend" event received by the component + * @private + * @param {SyntheticEvent} event + */ + + }, { + key: 'handleTouchEnd', + value: function handleTouchEnd(event) { + this.handleInteractionEnd(event); + this.removeDocumentTouchEndListener(); + } + + /** + * Return JSX of sliders + * @private + * @return {JSX.Element} + */ + + }, { + key: 'renderSliders', + value: function renderSliders() { + var _this3 = this; + + var values = valueTransformer.getValueFromProps(this.props, this.isMultiValue()); + var percentages = valueTransformer.getPercentagesFromValues(values, this.props.minValue, this.props.maxValue); + + return this.getKeys().map(function (key) { + var value = values[key]; + var percentage = percentages[key]; + + var _props = _this3.props, + maxValue = _props.maxValue, + minValue = _props.minValue; + + + if (key === 'min') { + maxValue = values.max; + } else { + minValue = values.min; + } + + var slider = _react2.default.createElement(_slider2.default, { + ariaLabelledby: _this3.props.ariaLabelledby, + ariaControls: _this3.props.ariaControls, + classNames: _this3.props.classNames, + formatLabel: _this3.props.formatLabel, + key: key, + maxValue: maxValue, + minValue: minValue, + onSliderDrag: _this3.handleSliderDrag, + onSliderKeyDown: _this3.handleSliderKeyDown, + percentage: percentage, + type: key, + value: value }); + + return slider; + }); + } + + /** + * Return JSX of hidden inputs + * @private + * @return {JSX.Element} + */ + + }, { + key: 'renderHiddenInputs', + value: function renderHiddenInputs() { + var _this4 = this; + + if (!this.props.name) { + return []; + } + + var isMultiValue = this.isMultiValue(); + var values = valueTransformer.getValueFromProps(this.props, isMultiValue); + + return this.getKeys().map(function (key) { + var value = values[key]; + var name = isMultiValue ? '' + _this4.props.name + (0, _utils.captialize)(key) : _this4.props.name; + + return _react2.default.createElement('input', { key: key, type: 'hidden', name: name, value: value }); + }); + } + + /** + * @ignore + * @override + * @return {JSX.Element} + */ + + }, { + key: 'render', + value: function render() { + var _this5 = this; + + var componentClassName = this.getComponentClassName(); + var values = valueTransformer.getValueFromProps(this.props, this.isMultiValue()); + var percentages = valueTransformer.getPercentagesFromValues(values, this.props.minValue, this.props.maxValue); + + return _react2.default.createElement( + 'div', + { + 'aria-disabled': this.props.disabled, + ref: function ref(node) { + _this5.node = node; + }, + className: componentClassName, + onKeyDown: this.handleKeyDown, + onKeyUp: this.handleKeyUp, + onMouseDown: this.handleMouseDown, + onTouchStart: this.handleTouchStart }, + _react2.default.createElement( + _label2.default, + { + classNames: this.props.classNames, + formatLabel: this.props.formatLabel, + type: 'min' }, + this.props.minValue + ), + _react2.default.createElement( + _track2.default, + { + classNames: this.props.classNames, + ref: function ref(trackNode) { + _this5.trackNode = trackNode; + }, + percentages: percentages, + onTrackMouseDown: this.handleTrackMouseDown, + isExternal: this.props.isExternal }, + this.renderSliders() + ), + _react2.default.createElement( + _label2.default, + { + classNames: this.props.classNames, + formatLabel: this.props.formatLabel, + type: 'max' }, + this.props.maxValue + ), + this.renderHiddenInputs() + ); + } + }]); + + return InputRange; +}(_react2.default.Component), (_applyDecoratedDescriptor(_class.prototype, 'handleSliderDrag', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleSliderDrag'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleSliderKeyDown', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleSliderKeyDown'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleTrackMouseDown', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleTrackMouseDown'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleInteractionStart', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleInteractionStart'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleInteractionEnd', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleInteractionEnd'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleKeyDown', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleKeyDown'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleKeyUp', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleKeyUp'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleMouseDown', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleMouseDown'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleMouseUp', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleMouseUp'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleTouchStart', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleTouchStart'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleTouchEnd', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleTouchEnd'), _class.prototype)), _class); +exports.default = InputRange; +module.exports = exports['default']; + +/***/ }), +/* 8 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); +/** @ignore */ +var DOWN_ARROW = exports.DOWN_ARROW = 40; + +/** @ignore */ +var LEFT_ARROW = exports.LEFT_ARROW = 37; + +/** @ignore */ +var RIGHT_ARROW = exports.RIGHT_ARROW = 39; + +/** @ignore */ +var UP_ARROW = exports.UP_ARROW = 38; + +/***/ }), +/* 9 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = rangePropType; + +var _utils = __webpack_require__(0); + +/** + * @ignore + * @param {Object} props - React component props + * @return {?Error} Return Error if validation fails + */ +function rangePropType(props) { + var maxValue = props.maxValue, + minValue = props.minValue; + + + if (!(0, _utils.isNumber)(minValue) || !(0, _utils.isNumber)(maxValue)) { + return new Error('"minValue" and "maxValue" must be a number'); + } + + if (minValue >= maxValue) { + return new Error('"minValue" must be smaller than "maxValue"'); + } +} +module.exports = exports['default']; + +/***/ }), +/* 10 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +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 _desc, _value, _class; + +var _react = __webpack_require__(1); + +var _react2 = _interopRequireDefault(_react); + +var _autobindDecorator = __webpack_require__(2); + +var _autobindDecorator2 = _interopRequireDefault(_autobindDecorator); + +var _label = __webpack_require__(3); + +var _label2 = _interopRequireDefault(_label); + +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; } + +function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) { + var desc = {}; + Object['ke' + 'ys'](descriptor).forEach(function (key) { + desc[key] = descriptor[key]; + }); + desc.enumerable = !!desc.enumerable; + desc.configurable = !!desc.configurable; + + if ('value' in desc || desc.initializer) { + desc.writable = true; + } + + desc = decorators.slice().reverse().reduce(function (desc, decorator) { + return decorator(target, property, desc) || desc; + }, desc); + + if (context && desc.initializer !== void 0) { + desc.value = desc.initializer ? desc.initializer.call(context) : void 0; + desc.initializer = undefined; + } + + if (desc.initializer === void 0) { + Object['define' + 'Property'](target, property, desc); + desc = null; + } + + return desc; +} + +/** + * @ignore + */ +var Slider = (_class = function (_React$Component) { + _inherits(Slider, _React$Component); + + _createClass(Slider, null, [{ + key: 'propTypes', + + /** + * Accepted propTypes of Slider + * @override + * @return {Object} + * @property {Function} ariaLabelledby + * @property {Function} ariaControls + * @property {Function} className + * @property {Function} formatLabel + * @property {Function} maxValue + * @property {Function} minValue + * @property {Function} onSliderDrag + * @property {Function} onSliderKeyDown + * @property {Function} percentage + * @property {Function} type + * @property {Function} value + */ + get: function get() { + return { + ariaLabelledby: _react2.default.PropTypes.string, + ariaControls: _react2.default.PropTypes.string, + classNames: _react2.default.PropTypes.objectOf(_react2.default.PropTypes.string).isRequired, + formatLabel: _react2.default.PropTypes.func, + maxValue: _react2.default.PropTypes.number, + minValue: _react2.default.PropTypes.number, + onSliderDrag: _react2.default.PropTypes.func.isRequired, + onSliderKeyDown: _react2.default.PropTypes.func.isRequired, + percentage: _react2.default.PropTypes.number.isRequired, + type: _react2.default.PropTypes.string.isRequired, + value: _react2.default.PropTypes.number.isRequired + }; + } + + /** + * @param {Object} props + * @param {string} [props.ariaLabelledby] + * @param {string} [props.ariaControls] + * @param {InputRangeClassNames} props.classNames + * @param {Function} [props.formatLabel] + * @param {number} [props.maxValue] + * @param {number} [props.minValue] + * @param {Function} props.onSliderKeyDown + * @param {Function} props.onSliderDrag + * @param {number} props.percentage + * @param {number} props.type + * @param {number} props.value + */ + + }]); + + function Slider(props) { + _classCallCheck(this, Slider); + + /** + * @private + * @type {?Component} + */ + var _this = _possibleConstructorReturn(this, (Slider.__proto__ || Object.getPrototypeOf(Slider)).call(this, props)); + + _this.node = null; + return _this; + } + + /** + * @ignore + * @override + * @return {void} + */ + + + _createClass(Slider, [{ + key: 'componentWillUnmount', + value: function componentWillUnmount() { + this.removeDocumentMouseMoveListener(); + this.removeDocumentMouseUpListener(); + this.removeDocumentTouchEndListener(); + this.removeDocumentTouchMoveListener(); + } + + /** + * @private + * @return {Object} + */ + + }, { + key: 'getStyle', + value: function getStyle() { + var perc = (this.props.percentage || 0) * 100; + var style = { + position: 'absolute', + left: perc + '%' + }; + + return style; + } + + /** + * Listen to mousemove event + * @private + * @return {void} + */ + + }, { + key: 'addDocumentMouseMoveListener', + value: function addDocumentMouseMoveListener() { + this.removeDocumentMouseMoveListener(); + this.node.ownerDocument.addEventListener('mousemove', this.handleMouseMove); + } + + /** + * Listen to mouseup event + * @private + * @return {void} + */ + + }, { + key: 'addDocumentMouseUpListener', + value: function addDocumentMouseUpListener() { + this.removeDocumentMouseUpListener(); + this.node.ownerDocument.addEventListener('mouseup', this.handleMouseUp); + } + + /** + * Listen to touchmove event + * @private + * @return {void} + */ + + }, { + key: 'addDocumentTouchMoveListener', + value: function addDocumentTouchMoveListener() { + this.removeDocumentTouchMoveListener(); + this.node.ownerDocument.addEventListener('touchmove', this.handleTouchMove); + } + + /** + * Listen to touchend event + * @private + * @return {void} + */ + + }, { + key: 'addDocumentTouchEndListener', + value: function addDocumentTouchEndListener() { + this.removeDocumentTouchEndListener(); + this.node.ownerDocument.addEventListener('touchend', this.handleTouchEnd); + } + + /** + * @private + * @return {void} + */ + + }, { + key: 'removeDocumentMouseMoveListener', + value: function removeDocumentMouseMoveListener() { + this.node.ownerDocument.removeEventListener('mousemove', this.handleMouseMove); + } + + /** + * @private + * @return {void} + */ + + }, { + key: 'removeDocumentMouseUpListener', + value: function removeDocumentMouseUpListener() { + this.node.ownerDocument.removeEventListener('mouseup', this.handleMouseUp); + } + + /** + * @private + * @return {void} + */ + + }, { + key: 'removeDocumentTouchMoveListener', + value: function removeDocumentTouchMoveListener() { + this.node.ownerDocument.removeEventListener('touchmove', this.handleTouchMove); + } + + /** + * @private + * @return {void} + */ + + }, { + key: 'removeDocumentTouchEndListener', + value: function removeDocumentTouchEndListener() { + this.node.ownerDocument.removeEventListener('touchend', this.handleTouchUp); + } + + /** + * @private + * @return {void} + */ + + }, { + key: 'handleMouseDown', + value: function handleMouseDown() { + this.addDocumentMouseMoveListener(); + this.addDocumentMouseUpListener(); + } + + /** + * @private + * @return {void} + */ + + }, { + key: 'handleMouseUp', + value: function handleMouseUp() { + this.removeDocumentMouseMoveListener(); + this.removeDocumentMouseUpListener(); + } + + /** + * @private + * @param {SyntheticEvent} event + * @return {void} + */ + + }, { + key: 'handleMouseMove', + value: function handleMouseMove(event) { + this.props.onSliderDrag(event, this.props.type); + } + + /** + * @private + * @return {void} + */ + + }, { + key: 'handleTouchStart', + value: function handleTouchStart() { + this.addDocumentTouchEndListener(); + this.addDocumentTouchMoveListener(); + } + + /** + * @private + * @param {SyntheticEvent} event + * @return {void} + */ + + }, { + key: 'handleTouchMove', + value: function handleTouchMove(event) { + this.props.onSliderDrag(event, this.props.type); + } + + /** + * @private + * @return {void} + */ + + }, { + key: 'handleTouchEnd', + value: function handleTouchEnd() { + this.removeDocumentTouchMoveListener(); + this.removeDocumentTouchEndListener(); + } + + /** + * @private + * @param {SyntheticEvent} event + * @return {void} + */ + + }, { + key: 'handleKeyDown', + value: function handleKeyDown(event) { + this.props.onSliderKeyDown(event, this.props.type); + } + + /** + * @override + * @return {JSX.Element} + */ + + }, { + key: 'render', + value: function render() { + var _this2 = this; + + var style = this.getStyle(); + + return _react2.default.createElement( + 'span', + { + className: this.props.classNames.sliderContainer, + ref: function ref(node) { + _this2.node = node; + }, + style: style }, + _react2.default.createElement( + _label2.default, + { + classNames: this.props.classNames, + formatLabel: this.props.formatLabel, + type: 'value', + markerType: 'track', + markerValue: this.props.type }, + this.props.value + ), + _react2.default.createElement('div', { + 'aria-labelledby': this.props.ariaLabelledby, + 'aria-controls': this.props.ariaControls, + 'aria-valuemax': this.props.maxValue, + 'aria-valuemin': this.props.minValue, + 'aria-valuenow': this.props.value, + className: this.props.classNames.slider, + draggable: 'false', + onKeyDown: this.handleKeyDown, + onMouseDown: this.handleMouseDown, + onTouchStart: this.handleTouchStart, + role: 'slider', + tabIndex: '0' }) + ); + } + }]); + + return Slider; +}(_react2.default.Component), (_applyDecoratedDescriptor(_class.prototype, 'handleMouseDown', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleMouseDown'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleMouseUp', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleMouseUp'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleMouseMove', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleMouseMove'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleTouchStart', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleTouchStart'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleTouchMove', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleTouchMove'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleTouchEnd', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleTouchEnd'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleKeyDown', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleKeyDown'), _class.prototype)), _class); +exports.default = Slider; +module.exports = exports['default']; + +/***/ }), +/* 11 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +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 _desc, _value, _class; + +var _react = __webpack_require__(1); + +var _react2 = _interopRequireDefault(_react); + +var _autobindDecorator = __webpack_require__(2); + +var _autobindDecorator2 = _interopRequireDefault(_autobindDecorator); + +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; } + +function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) { + var desc = {}; + Object['ke' + 'ys'](descriptor).forEach(function (key) { + desc[key] = descriptor[key]; + }); + desc.enumerable = !!desc.enumerable; + desc.configurable = !!desc.configurable; + + if ('value' in desc || desc.initializer) { + desc.writable = true; + } + + desc = decorators.slice().reverse().reduce(function (desc, decorator) { + return decorator(target, property, desc) || desc; + }, desc); + + if (context && desc.initializer !== void 0) { + desc.value = desc.initializer ? desc.initializer.call(context) : void 0; + desc.initializer = undefined; + } + + if (desc.initializer === void 0) { + Object['define' + 'Property'](target, property, desc); + desc = null; + } + + return desc; +} + +/** + * @ignore + */ +var Track = (_class = function (_React$Component) { + _inherits(Track, _React$Component); + + _createClass(Track, null, [{ + key: 'propTypes', + + /** + * @override + * @return {Object} + * @property {Function} children + * @property {Function} classNames + * @property {Function} onTrackMouseDown + * @property {Function} percentages + */ + get: function get() { + return { + children: _react2.default.PropTypes.node.isRequired, + classNames: _react2.default.PropTypes.objectOf(_react2.default.PropTypes.string).isRequired, + onTrackMouseDown: _react2.default.PropTypes.func.isRequired, + percentages: _react2.default.PropTypes.objectOf(_react2.default.PropTypes.number).isRequired, + isExternal: _react2.default.PropTypes.bool.isRequired + }; + } + + /** + * @param {Object} props + * @param {InputRangeClassNames} props.classNames + * @param {Function} props.onTrackMouseDown + * @param {number} props.percentages + */ + + }]); + + function Track(props) { + _classCallCheck(this, Track); + + /** + * @private + * @type {?Component} + */ + var _this = _possibleConstructorReturn(this, (Track.__proto__ || Object.getPrototypeOf(Track)).call(this, props)); + + _this.node = null; + return _this; + } + + /** + * @private + * @return {ClientRect} + */ + + + _createClass(Track, [{ + key: 'getClientRect', + value: function getClientRect() { + return this.node.getBoundingClientRect(); + } + + /** + * @private + * @return {Object} CSS styles + */ + + }, { + key: 'getActiveTrackStyle', + value: function getActiveTrackStyle() { + var width = (this.props.percentages.max - this.props.percentages.min) * 100 + '%'; + var left = this.props.percentages.min * 100 + '%'; + + return { left: left, width: width }; + } + + /** + * @private + * @return {Object} CSS styles + */ + + }, { + key: 'getActiveTrackStylePre', + value: function getActiveTrackStylePre() { + var width = this.props.percentages.min * 100 + '%'; + var left = '0'; + var float = 'left'; + return { left: left, width: width, float: float }; + } + + /** + * @private + * @return {Object} CSS styles + */ + + }, { + key: 'getActiveTrackStylePost', + value: function getActiveTrackStylePost() { + var width = (1 - this.props.percentages.max) * 100 + '%'; + var left = this.props.percentages.max * 100 + '%'; + + return { left: left, width: width }; + } + + /** + * @private + * @param {SyntheticEvent} event - User event + */ + + }, { + key: 'handleMouseDown', + value: function handleMouseDown(event) { + var clientX = event.touches ? event.touches[0].clientX : event.clientX; + var trackClientRect = this.getClientRect(); + var position = { + x: clientX - trackClientRect.left, + y: 0 + }; + + this.props.onTrackMouseDown(event, position); + } + + /** + * @private + * @param {SyntheticEvent} event - User event + */ + + }, { + key: 'handleTouchStart', + value: function handleTouchStart(event) { + event.preventDefault(); + + this.handleMouseDown(event); + } + + /** + * @override + * @return {JSX.Element} + */ + + }, { + key: 'render', + value: function render() { + var _this2 = this; + + var activeTrackStyle = this.getActiveTrackStyle(); + var activeTrackStyleExternalPre = this.getActiveTrackStylePre(); + var activeTrackStyleExternalPost = this.getActiveTrackStylePost(); + + return _react2.default.createElement( + 'div', + { + className: this.props.classNames.track, + onMouseDown: this.handleMouseDown, + onTouchStart: this.handleTouchStart, + ref: function ref(node) { + _this2.node = node; + } }, + !this.props.isExternal ? _react2.default.createElement('div', { + style: activeTrackStyle, + className: this.props.classNames.activeTrack }) : _react2.default.createElement( + 'div', + null, + _react2.default.createElement('div', { + style: activeTrackStyleExternalPre, + className: this.props.classNames.activeTrack }), + _react2.default.createElement('div', { + style: activeTrackStyleExternalPost, + className: this.props.classNames.activeTrack }) + ), + this.props.children + ); + } + }]); + + return Track; +}(_react2.default.Component), (_applyDecoratedDescriptor(_class.prototype, 'getActiveTrackStylePre', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'getActiveTrackStylePre'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'getActiveTrackStylePost', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'getActiveTrackStylePost'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleMouseDown', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleMouseDown'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleTouchStart', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleTouchStart'), _class.prototype)), _class); +exports.default = Track; +module.exports = exports['default']; + +/***/ }), +/* 12 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = valuePropType; + +var _utils = __webpack_require__(0); + +/** + * @ignore + * @param {Object} props + * @return {?Error} Return Error if validation fails + */ +function valuePropType(props, propName) { + var maxValue = props.maxValue, + minValue = props.minValue; + + var value = props[propName]; + + if (!(0, _utils.isNumber)(value) && (!(0, _utils.isObject)(value) || !(0, _utils.isNumber)(value.min) || !(0, _utils.isNumber)(value.max))) { + return new Error('"' + propName + '" must be a number or a range object'); + } + + if ((0, _utils.isNumber)(value) && (value < minValue || value > maxValue)) { + return new Error('"' + propName + '" must be in between "minValue" and "maxValue"'); + } + + if ((0, _utils.isObject)(value) && (value.min < minValue || value.min > maxValue || value.max < minValue || value.max > maxValue)) { + return new Error('"' + propName + '" must be in between "minValue" and "maxValue"'); + } +} +module.exports = exports['default']; + +/***/ }), +/* 13 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +exports.getPercentageFromPosition = getPercentageFromPosition; +exports.getValueFromPosition = getValueFromPosition; +exports.getValueFromProps = getValueFromProps; +exports.getPercentageFromValue = getPercentageFromValue; +exports.getPercentagesFromValues = getPercentagesFromValues; +exports.getPositionFromValue = getPositionFromValue; +exports.getPositionsFromValues = getPositionsFromValues; +exports.getPositionFromEvent = getPositionFromEvent; +exports.getStepValueFromValue = getStepValueFromValue; + +var _utils = __webpack_require__(0); + +/** + * Convert a point into a percentage value + * @ignore + * @param {Point} position + * @param {ClientRect} clientRect + * @return {number} Percentage value + */ +function getPercentageFromPosition(position, clientRect) { + var length = clientRect.width; + var sizePerc = position.x / length; + + return sizePerc || 0; +} + +/** + * Convert a point into a model value + * @ignore + * @param {Point} position + * @param {number} minValue + * @param {number} maxValue + * @param {ClientRect} clientRect + * @return {number} + */ +function getValueFromPosition(position, minValue, maxValue, clientRect) { + var sizePerc = getPercentageFromPosition(position, clientRect); + var valueDiff = maxValue - minValue; + + return minValue + valueDiff * sizePerc; +} + +/** + * Convert props into a range value + * @ignore + * @param {Object} props + * @param {boolean} isMultiValue + * @return {Range} + */ +function getValueFromProps(props, isMultiValue) { + if (isMultiValue) { + return _extends({}, props.value); + } + + return { + min: props.minValue, + max: props.value + }; +} + +/** + * Convert a model value into a percentage value + * @ignore + * @param {number} value + * @param {number} minValue + * @param {number} maxValue + * @return {number} + */ +function getPercentageFromValue(value, minValue, maxValue) { + var validValue = (0, _utils.clamp)(value, minValue, maxValue); + var valueDiff = maxValue - minValue; + var valuePerc = (validValue - minValue) / valueDiff; + + return valuePerc || 0; +} + +/** + * Convert model values into percentage values + * @ignore + * @param {Range} values + * @param {number} minValue + * @param {number} maxValue + * @return {Range} + */ +function getPercentagesFromValues(values, minValue, maxValue) { + return { + min: getPercentageFromValue(values.min, minValue, maxValue), + max: getPercentageFromValue(values.max, minValue, maxValue) + }; +} + +/** + * Convert a value into a point + * @ignore + * @param {number} value + * @param {number} minValue + * @param {number} maxValue + * @param {ClientRect} clientRect + * @return {Point} Position + */ +function getPositionFromValue(value, minValue, maxValue, clientRect) { + var length = clientRect.width; + var valuePerc = getPercentageFromValue(value, minValue, maxValue); + var positionValue = valuePerc * length; + + return { + x: positionValue, + y: 0 + }; +} + +/** + * Convert a range of values into points + * @ignore + * @param {Range} values + * @param {number} minValue + * @param {number} maxValue + * @param {ClientRect} clientRect + * @return {Range} + */ +function getPositionsFromValues(values, minValue, maxValue, clientRect) { + return { + min: getPositionFromValue(values.min, minValue, maxValue, clientRect), + max: getPositionFromValue(values.max, minValue, maxValue, clientRect) + }; +} + +/** + * Convert an event into a point + * @ignore + * @param {Event} event + * @param {ClientRect} clientRect + * @return {Point} + */ +function getPositionFromEvent(event, clientRect) { + var length = clientRect.width; + + var _ref = event.touches ? event.touches[0] : event, + clientX = _ref.clientX; + + return { + x: (0, _utils.clamp)(clientX - clientRect.left, 0, length), + y: 0 + }; +} + +/** + * Convert a value into a step value + * @ignore + * @param {number} value + * @param {number} valuePerStep + * @return {number} + */ +function getStepValueFromValue(value, valuePerStep) { + return Math.round(value / valuePerStep) * valuePerStep; +} + +/***/ }), +/* 14 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = captialize; +/** + * Captialize a string + * @ignore + * @param {string} string + * @return {string} + */ +function captialize(string) { + return string.charAt(0).toUpperCase() + string.slice(1); +} +module.exports = exports["default"]; + +/***/ }), +/* 15 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = clamp; +/** + * Clamp a value between a min and max value + * @ignore + * @param {number} value + * @param {number} min + * @param {number} max + * @return {number} + */ +function clamp(value, min, max) { + return Math.min(Math.max(value, min), max); +} +module.exports = exports["default"]; + +/***/ }), +/* 16 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = distanceTo; +/** + * Calculate the distance between pointA and pointB + * @ignore + * @param {Point} pointA + * @param {Point} pointB + * @return {number} Distance + */ +function distanceTo(pointA, pointB) { + var xDiff = Math.pow(pointB.x - pointA.x, 2); + var yDiff = Math.pow(pointB.y - pointA.y, 2); + + return Math.sqrt(xDiff + yDiff); +} +module.exports = exports["default"]; + +/***/ }), +/* 17 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = isDefined; +/** + * Check if a value is defined + * @ignore + * @param {*} value + * @return {boolean} + */ +function isDefined(value) { + return value !== undefined && value !== null; +} +module.exports = exports["default"]; + +/***/ }), +/* 18 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = isNumber; +/** + * Check if a value is a number + * @ignore + * @param {*} value + * @return {boolean} + */ +function isNumber(value) { + return typeof value === 'number'; +} +module.exports = exports['default']; + +/***/ }), +/* 19 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; + +exports.default = isObject; +/** + * Check if a value is an object + * @ignore + * @param {*} value + * @return {boolean} + */ +function isObject(value) { + return value !== null && (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object'; +} +module.exports = exports['default']; + +/***/ }), +/* 20 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = length; +/** + * Calculate the absolute difference between two numbers + * @ignore + * @param {number} numA + * @param {number} numB + * @return {number} + */ +function length(numA, numB) { + return Math.abs(numA - numB); +} +module.exports = exports["default"]; + +/***/ }) +/******/ ]); +}); +//# sourceMappingURL=react-input-range.js.map \ No newline at end of file diff --git a/lib/bundle/react-input-range.js.map b/lib/bundle/react-input-range.js.map new file mode 100644 index 0000000..52e50be --- /dev/null +++ b/lib/bundle/react-input-range.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///webpack/bootstrap 6af9e803c14c83c10faf","webpack:///./src/js/utils/index.js","webpack:///external {\"amd\":\"react\",\"commonjs\":\"react\",\"commonjs2\":\"react\",\"root\":\"React\"}","webpack:///./~/autobind-decorator/lib/index.js","webpack:///./src/js/input-range/label.jsx","webpack:///./src/js/input-range/index.js","webpack:///./src/js/index.js","webpack:///./src/js/input-range/default-class-names.js","webpack:///./src/js/input-range/input-range.jsx","webpack:///./src/js/input-range/key-codes.js","webpack:///./src/js/input-range/range-prop-type.js","webpack:///./src/js/input-range/slider.jsx","webpack:///./src/js/input-range/track.jsx","webpack:///./src/js/input-range/value-prop-type.js","webpack:///./src/js/input-range/value-transformer.js","webpack:///./src/js/utils/captialize.js","webpack:///./src/js/utils/clamp.js","webpack:///./src/js/utils/distance-to.js","webpack:///./src/js/utils/is-defined.js","webpack:///./src/js/utils/is-number.js","webpack:///./src/js/utils/is-object.js","webpack:///./src/js/utils/length.js"],"names":["default","Label","props","labelValue","formatLabel","children","type","labelClassName","markerType","classNames","labelContainer","markerValue","propTypes","PropTypes","node","isRequired","objectOf","string","func","DEFAULT_CLASS_NAMES","activeTrack","disabledInputRange","inputRange","maxLabel","minLabel","slider","sliderContainer","track","valueLabel","valueTransformer","InputRange","ariaLabelledby","ariaControls","disabled","bool","isExternal","maxValue","minValue","name","onChangeStart","onChange","onChangeComplete","step","number","value","startValue","trackNode","removeDocumentMouseUpListener","removeDocumentTouchEndListener","getClientRect","position","values","getValueFromProps","isMultiValue","positions","getPositionsFromValues","getTrackClientRect","distanceToMin","min","distanceToMax","max","currentValues","isWithinRange","hasStepDifference","key","updatePositions","getValueFromPosition","transformedValues","getStepValueFromValue","updateValues","shouldUpdate","updateValue","ownerDocument","addEventListener","handleMouseUp","handleTouchEnd","removeEventListener","event","getPositionFromEvent","requestAnimationFrame","updatePosition","keyCode","preventDefault","decrementValue","incrementValue","getKeyByPosition","handleInteractionStart","handleInteractionEnd","addDocumentMouseUpListener","addDocumentTouchEndListener","percentages","getPercentagesFromValues","getKeys","map","percentage","handleSliderDrag","handleSliderKeyDown","componentClassName","getComponentClassName","handleKeyDown","handleKeyUp","handleMouseDown","handleTouchStart","handleTrackMouseDown","renderSliders","renderHiddenInputs","Component","DOWN_ARROW","LEFT_ARROW","RIGHT_ARROW","UP_ARROW","rangePropType","Error","Slider","onSliderDrag","onSliderKeyDown","removeDocumentMouseMoveListener","removeDocumentTouchMoveListener","perc","style","left","handleMouseMove","handleTouchMove","handleTouchUp","addDocumentMouseMoveListener","addDocumentTouchMoveListener","getStyle","Track","onTrackMouseDown","getBoundingClientRect","width","float","clientX","touches","trackClientRect","x","y","activeTrackStyle","getActiveTrackStyle","activeTrackStyleExternalPre","getActiveTrackStylePre","activeTrackStyleExternalPost","getActiveTrackStylePost","valuePropType","propName","getPercentageFromPosition","getPercentageFromValue","getPositionFromValue","clientRect","length","sizePerc","valueDiff","validValue","valuePerc","positionValue","valuePerStep","Math","round","captialize","charAt","toUpperCase","slice","clamp","distanceTo","pointA","pointB","xDiff","yDiff","sqrt","isDefined","undefined","isNumber","isObject","numA","numB","abs"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,O;ACVA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA,mDAA2C,cAAc;;AAEzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;AAEA;AACA;;;;;;;;;;;;;;;;;;;+CChESA,O;;;;;;;;;0CACAA,O;;;;;;;;;+CACAA,O;;;;;;;;;8CACAA,O;;;;;;;;;6CACAA,O;;;;;;;;;6CACAA,O;;;;;;;;;2CACAA,O;;;;;;;;;;ACNT,+C;;;;;;;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,CAAC;AACD;;AAEA;AACA,iEAAiE,aAAa;AAC9E;AACA;;AAEA;AACA;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;kBC7FwBC,K;;AATxB;;;;;;AAEA;;;;;;;AAOe,SAASA,KAAT,CAAeC,KAAf,EAAsB;AACnC,MAAMC,aAAaD,MAAME,WAAN,GAAoBF,MAAME,WAAN,CAAkBF,MAAMG,QAAxB,EAAk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","file":"react-input-range.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"react\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"react\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"InputRange\"] = factory(require(\"react\"));\n\telse\n\t\troot[\"InputRange\"] = factory(root[\"React\"]);\n})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) {\nreturn \n\n\n// WEBPACK FOOTER //\n// webpack/universalModuleDefinition"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// identity function for calling harmony imports with the correct context\n \t__webpack_require__.i = function(value) { return value; };\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 5);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 6af9e803c14c83c10faf","export { default as captialize } from './captialize';\nexport { default as clamp } from './clamp';\nexport { default as distanceTo } from './distance-to';\nexport { default as isDefined } from './is-defined';\nexport { default as isNumber } from './is-number';\nexport { default as isObject } from './is-object';\nexport { default as length } from './length';\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/utils/index.js","module.exports = __WEBPACK_EXTERNAL_MODULE_1__;\n\n\n//////////////////\n// WEBPACK FOOTER\n// external {\"amd\":\"react\",\"commonjs\":\"react\",\"commonjs2\":\"react\",\"root\":\"React\"}\n// module id = 1\n// module chunks = 0 1","/**\n * @copyright 2015, Andrey Popp <8mayday@gmail.com>\n *\n * The decorator may be used on classes or methods\n * ```\n * @autobind\n * class FullBound {}\n *\n * class PartBound {\n * @autobind\n * method () {}\n * }\n * ```\n */\n'use strict';\n\nObject.defineProperty(exports, '__esModule', {\n value: true\n});\nexports['default'] = autobind;\n\nfunction autobind() {\n for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n if (args.length === 1) {\n return boundClass.apply(undefined, args);\n } else {\n return boundMethod.apply(undefined, args);\n }\n}\n\n/**\n * Use boundMethod to bind all methods on the target.prototype\n */\nfunction boundClass(target) {\n // (Using reflect to get all keys including symbols)\n var keys = undefined;\n // Use Reflect if exists\n if (typeof Reflect !== 'undefined' && typeof Reflect.ownKeys === 'function') {\n keys = Reflect.ownKeys(target.prototype);\n } else {\n keys = Object.getOwnPropertyNames(target.prototype);\n // use symbols if support is provided\n if (typeof Object.getOwnPropertySymbols === 'function') {\n keys = keys.concat(Object.getOwnPropertySymbols(target.prototype));\n }\n }\n\n keys.forEach(function (key) {\n // Ignore special case target method\n if (key === 'constructor') {\n return;\n }\n\n var descriptor = Object.getOwnPropertyDescriptor(target.prototype, key);\n\n // Only methods need binding\n if (typeof descriptor.value === 'function') {\n Object.defineProperty(target.prototype, key, boundMethod(target, key, descriptor));\n }\n });\n return target;\n}\n\n/**\n * Return a descriptor removing the value and returning a getter\n * The getter will return a .bind version of the function\n * and memoize the result against a symbol on the instance\n */\nfunction boundMethod(target, key, descriptor) {\n var fn = descriptor.value;\n\n if (typeof fn !== 'function') {\n throw new Error('@autobind decorator can only be applied to methods not: ' + typeof fn);\n }\n\n // In IE11 calling Object.defineProperty has a side-effect of evaluating the\n // getter for the property which is being replaced. This causes infinite\n // recursion and an \"Out of stack space\" error.\n var definingProperty = false;\n\n return {\n configurable: true,\n get: function get() {\n if (definingProperty || this === target.prototype || this.hasOwnProperty(key)) {\n return fn;\n }\n\n var boundFn = fn.bind(this);\n definingProperty = true;\n Object.defineProperty(this, key, {\n value: boundFn,\n configurable: true,\n writable: true\n });\n definingProperty = false;\n return boundFn;\n }\n };\n}\nmodule.exports = exports['default'];\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/autobind-decorator/lib/index.js\n// module id = 2\n// module chunks = 0 1","import React from 'react';\n\n/**\n * @ignore\n * @param {Object} props\n * @param {InputRangeClassNames} props.classNames\n * @param {Function} props.formatLabel\n * @param {string} props.type\n */\nexport default function Label(props) {\n const labelValue = props.formatLabel ? props.formatLabel(props.children, props.type) : props.children;\n const labelClassName = props.markerType === 'track' ? `${props.classNames.labelContainer} marker-${props.markerValue}` : props.classNames.labelContainer;\n return (\n \n \n {labelValue}\n \n \n );\n}\n\n/**\n * @type {Object}\n * @property {Function} children\n * @property {Function} classNames\n * @property {Function} formatLabel\n * @property {Function} type\n */\nLabel.propTypes = {\n children: React.PropTypes.node.isRequired,\n classNames: React.PropTypes.objectOf(React.PropTypes.string).isRequired,\n formatLabel: React.PropTypes.func,\n type: React.PropTypes.string.isRequired,\n markerType: React.PropTypes.string,\n markerValue: React.PropTypes.string,\n\n};\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/input-range/label.jsx","export { default as InputRange } from './input-range';\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/input-range/index.js","import { InputRange } from './input-range';\n\n/**\n * @ignore\n * @typedef {Object} ClientRect\n * @property {number} height\n * @property {number} left\n * @property {number} top\n * @property {number} width\n */\n\n/**\n * @typedef {Object} InputRangeClassNames\n * @property {string} activeTrack\n * @property {string} disabledInputRange\n * @property {string} inputRange\n * @property {string} labelContainer\n * @property {string} maxLabel\n * @property {string} minLabel\n * @property {string} slider\n * @property {string} sliderContainer\n * @property {string} track\n * @property {string} valueLabel\n */\n\n/**\n * @typedef {Function} LabelFormatter\n * @param {number} value\n * @param {string} type\n * @return {string}\n */\n\n/**\n * @ignore\n * @typedef {Object} Point\n * @property {number} x\n * @property {number} y\n */\n\n/**\n * @typedef {Object} Range\n * @property {number} min - Min value\n * @property {number} max - Max value\n */\n\nexport default InputRange;\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/index.js","/**\n* Default CSS class names\n* @ignore\n* @type {InputRangeClassNames}\n*/\nconst DEFAULT_CLASS_NAMES = {\n activeTrack: 'input-range__track input-range__track--active',\n disabledInputRange: 'input-range input-range--disabled',\n inputRange: 'input-range',\n labelContainer: 'input-range__label-container',\n maxLabel: 'input-range__label input-range__label--max',\n minLabel: 'input-range__label input-range__label--min',\n slider: 'input-range__slider',\n sliderContainer: 'input-range__slider-container',\n track: 'input-range__track input-range__track--background',\n valueLabel: 'input-range__label input-range__label--value',\n};\n\nexport default DEFAULT_CLASS_NAMES;\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/input-range/default-class-names.js","import React from 'react';\nimport autobind from 'autobind-decorator';\nimport * as valueTransformer from './value-transformer';\nimport DEFAULT_CLASS_NAMES from './default-class-names';\nimport Label from './label';\nimport rangePropType from './range-prop-type';\nimport valuePropType from './value-prop-type';\nimport Slider from './slider';\nimport Track from './track';\nimport { captialize, distanceTo, isDefined, isObject, length } from '../utils';\nimport { DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, UP_ARROW } from './key-codes';\n\n/**\n * A React component that allows users to input numeric values within a range\n * by dragging its sliders.\n */\nexport default class InputRange extends React.Component {\n /**\n * @ignore\n * @override\n * @return {Object}\n */\n static get propTypes() {\n return {\n ariaLabelledby: React.PropTypes.string,\n ariaControls: React.PropTypes.string,\n classNames: React.PropTypes.objectOf(React.PropTypes.string),\n disabled: React.PropTypes.bool,\n formatLabel: React.PropTypes.func,\n isExternal: React.PropTypes.bool,\n maxValue: rangePropType,\n minValue: rangePropType,\n name: React.PropTypes.string,\n onChangeStart: React.PropTypes.func,\n onChange: React.PropTypes.func.isRequired,\n onChangeComplete: React.PropTypes.func,\n step: React.PropTypes.number,\n value: valuePropType,\n };\n }\n\n /**\n * @ignore\n * @override\n * @return {Object}\n */\n static get defaultProps() {\n return {\n classNames: DEFAULT_CLASS_NAMES,\n disabled: false,\n maxValue: 10,\n minValue: 0,\n step: 1,\n isExternal: false,\n };\n }\n\n /**\n * @param {Object} props\n * @param {string} [props.ariaLabelledby]\n * @param {string} [props.ariaControls]\n * @param {InputRangeClassNames} [props.classNames]\n * @param {boolean} [props.disabled = false]\n * @param {Function} [props.formatLabel]\n * @param {number|Range} [props.maxValue = 10]\n * @param {number|Range} [props.minValue = 0]\n * @param {string} [props.name]\n * @param {string} props.onChange\n * @param {Function} [props.onChangeComplete]\n * @param {Function} [props.onChangeStart]\n * @param {number} [props.step = 1]\n * @param {number|Range} props.value\n */\n constructor(props) {\n super(props);\n\n /**\n * @private\n * @type {?number}\n */\n this.startValue = null;\n\n /**\n * @private\n * @type {?Component}\n */\n this.node = null;\n\n /**\n * @private\n * @type {?Component}\n */\n this.trackNode = null;\n }\n\n /**\n * @ignore\n * @override\n * @return {void}\n */\n componentWillUnmount() {\n this.removeDocumentMouseUpListener();\n this.removeDocumentTouchEndListener();\n }\n\n /**\n * Return the CSS class name of the component\n * @private\n * @return {string}\n */\n getComponentClassName() {\n if (!this.props.disabled) {\n return this.props.classNames.inputRange;\n }\n\n return this.props.classNames.disabledInputRange;\n }\n\n /**\n * Return the bounding rect of the track\n * @private\n * @return {ClientRect}\n */\n getTrackClientRect() {\n return this.trackNode.getClientRect();\n }\n\n /**\n * Return the slider key closest to a point\n * @private\n * @param {Point} position\n * @return {string}\n */\n getKeyByPosition(position) {\n const values = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n const positions = valueTransformer.getPositionsFromValues(values, this.props.minValue, this.props.maxValue, this.getTrackClientRect());\n\n if (this.isMultiValue()) {\n const distanceToMin = distanceTo(position, positions.min);\n const distanceToMax = distanceTo(position, positions.max);\n\n if (distanceToMin < distanceToMax) {\n return 'min';\n }\n }\n\n return 'max';\n }\n\n /**\n * Return all the slider keys\n * @private\n * @return {string[]}\n */\n getKeys() {\n if (this.isMultiValue()) {\n return ['min', 'max'];\n }\n\n return ['max'];\n }\n\n /**\n * Return true if the difference between the new and the current value is\n * greater or equal to the step amount of the component\n * @private\n * @param {Range} values\n * @return {boolean}\n */\n hasStepDifference(values) {\n const currentValues = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n\n return length(values.min, currentValues.min) >= this.props.step ||\n length(values.max, currentValues.max) >= this.props.step;\n }\n\n /**\n * Return true if the component accepts a min and max value\n * @private\n * @return {boolean}\n */\n isMultiValue() {\n return isObject(this.props.value);\n }\n\n /**\n * Return true if the range is within the max and min value of the component\n * @private\n * @param {Range} values\n * @return {boolean}\n */\n isWithinRange(values) {\n if (this.isMultiValue()) {\n return values.min >= this.props.minValue &&\n values.max <= this.props.maxValue &&\n values.min < values.max;\n }\n\n return values.max >= this.props.minValue && values.max <= this.props.maxValue;\n }\n\n /**\n * Return true if the new value should trigger a render\n * @private\n * @param {Range} values\n * @return {boolean}\n */\n shouldUpdate(values) {\n return this.isWithinRange(values) && this.hasStepDifference(values);\n }\n\n /**\n * Update the position of a slider\n * @private\n * @param {string} key\n * @param {Point} position\n * @return {void}\n */\n updatePosition(key, position) {\n const values = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n const positions = valueTransformer.getPositionsFromValues(values, this.props.minValue, this.props.maxValue, this.getTrackClientRect());\n\n positions[key] = position;\n\n this.updatePositions(positions);\n }\n\n /**\n * Update the positions of multiple sliders\n * @private\n * @param {Object} positions\n * @param {Point} positions.min\n * @param {Point} positions.max\n * @return {void}\n */\n updatePositions(positions) {\n const values = {\n min: valueTransformer.getValueFromPosition(positions.min, this.props.minValue, this.props.maxValue, this.getTrackClientRect()),\n max: valueTransformer.getValueFromPosition(positions.max, this.props.minValue, this.props.maxValue, this.getTrackClientRect()),\n };\n\n const transformedValues = {\n min: valueTransformer.getStepValueFromValue(values.min, this.props.step),\n max: valueTransformer.getStepValueFromValue(values.max, this.props.step),\n };\n\n this.updateValues(transformedValues);\n }\n\n /**\n * Update the value of a slider\n * @private\n * @param {string} key\n * @param {number} value\n * @return {void}\n */\n updateValue(key, value) {\n const values = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n\n values[key] = value;\n\n this.updateValues(values);\n }\n\n /**\n * Update the values of multiple sliders\n * @private\n * @param {Range|number} values\n * @return {void}\n */\n updateValues(values) {\n if (!this.shouldUpdate(values)) {\n return;\n }\n\n this.props.onChange(this.isMultiValue() ? values : values.max);\n }\n\n /**\n * Increment the value of a slider by key name\n * @private\n * @param {string} key\n * @return {void}\n */\n incrementValue(key) {\n const values = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n const value = values[key] + this.props.step;\n\n this.updateValue(key, value);\n }\n\n /**\n * Decrement the value of a slider by key name\n * @private\n * @param {string} key\n * @return {void}\n */\n decrementValue(key) {\n const values = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n const value = values[key] - this.props.step;\n\n this.updateValue(key, value);\n }\n\n /**\n * Listen to mouseup event\n * @private\n * @return {void}\n */\n addDocumentMouseUpListener() {\n this.removeDocumentMouseUpListener();\n this.node.ownerDocument.addEventListener('mouseup', this.handleMouseUp);\n }\n\n /**\n * Listen to touchend event\n * @private\n * @return {void}\n */\n addDocumentTouchEndListener() {\n this.removeDocumentTouchEndListener();\n this.node.ownerDocument.addEventListener('touchend', this.handleTouchEnd);\n }\n\n /**\n * Stop listening to mouseup event\n * @private\n * @return {void}\n */\n removeDocumentMouseUpListener() {\n this.node.ownerDocument.removeEventListener('mouseup', this.handleMouseUp);\n }\n\n /**\n * Stop listening to touchend event\n * @private\n * @return {void}\n */\n removeDocumentTouchEndListener() {\n this.node.ownerDocument.removeEventListener('touchend', this.handleTouchEnd);\n }\n\n /**\n * Handle any \"mousemove\" event received by the slider\n * @private\n * @param {SyntheticEvent} event\n * @param {string} key\n * @return {void}\n */\n @autobind\n handleSliderDrag(event, key) {\n if (this.props.disabled) {\n return;\n }\n\n const position = valueTransformer.getPositionFromEvent(event, this.getTrackClientRect());\n\n requestAnimationFrame(() => this.updatePosition(key, position));\n }\n\n /**\n * Handle any \"keydown\" event received by the slider\n * @private\n * @param {SyntheticEvent} event\n * @param {string} key\n * @return {void}\n */\n @autobind\n handleSliderKeyDown(event, key) {\n if (this.props.disabled) {\n return;\n }\n\n switch (event.keyCode) {\n case LEFT_ARROW:\n case DOWN_ARROW:\n event.preventDefault();\n this.decrementValue(key);\n break;\n\n case RIGHT_ARROW:\n case UP_ARROW:\n event.preventDefault();\n this.incrementValue(key);\n break;\n\n default:\n break;\n }\n }\n\n /**\n * Handle any \"mousedown\" event received by the track\n * @private\n * @param {SyntheticEvent} event\n * @param {Point} position\n * @return {void}\n */\n @autobind\n handleTrackMouseDown(event, position) {\n if (this.props.disabled) {\n return;\n }\n\n event.preventDefault();\n\n this.updatePosition(this.getKeyByPosition(position), position);\n }\n\n /**\n * Handle the start of any mouse/touch event\n * @private\n * @return {void}\n */\n @autobind\n handleInteractionStart() {\n if (this.props.onChangeStart) {\n this.props.onChangeStart(this.props.value);\n }\n\n if (this.props.onChangeComplete && !isDefined(this.startValue)) {\n this.startValue = this.props.value;\n }\n }\n\n /**\n * Handle the end of any mouse/touch event\n * @private\n * @return {void}\n */\n @autobind\n handleInteractionEnd() {\n if (!this.props.onChangeComplete || !isDefined(this.startValue)) {\n return;\n }\n\n if (this.startValue !== this.props.value) {\n this.props.onChangeComplete(this.props.value);\n }\n\n this.startValue = null;\n }\n\n /**\n * Handle any \"keydown\" event received by the component\n * @private\n * @param {SyntheticEvent} event\n * @return {void}\n */\n @autobind\n handleKeyDown(event) {\n this.handleInteractionStart(event);\n }\n\n /**\n * Handle any \"keyup\" event received by the component\n * @private\n * @param {SyntheticEvent} event\n * @return {void}\n */\n @autobind\n handleKeyUp(event) {\n this.handleInteractionEnd(event);\n }\n\n /**\n * Handle any \"mousedown\" event received by the component\n * @private\n * @param {SyntheticEvent} event\n * @return {void}\n */\n @autobind\n handleMouseDown(event) {\n this.handleInteractionStart(event);\n this.addDocumentMouseUpListener();\n }\n\n /**\n * Handle any \"mouseup\" event received by the component\n * @private\n * @param {SyntheticEvent} event\n */\n @autobind\n handleMouseUp(event) {\n this.handleInteractionEnd(event);\n this.removeDocumentMouseUpListener();\n }\n\n /**\n * Handle any \"touchstart\" event received by the component\n * @private\n * @param {SyntheticEvent} event\n * @return {void}\n */\n @autobind\n handleTouchStart(event) {\n this.handleInteractionStart(event);\n this.addDocumentTouchEndListener();\n }\n\n /**\n * Handle any \"touchend\" event received by the component\n * @private\n * @param {SyntheticEvent} event\n */\n @autobind\n handleTouchEnd(event) {\n this.handleInteractionEnd(event);\n this.removeDocumentTouchEndListener();\n }\n\n /**\n * Return JSX of sliders\n * @private\n * @return {JSX.Element}\n */\n renderSliders() {\n const values = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n const percentages = valueTransformer.getPercentagesFromValues(values, this.props.minValue, this.props.maxValue);\n\n return this.getKeys().map((key) => {\n const value = values[key];\n const percentage = percentages[key];\n\n let { maxValue, minValue } = this.props;\n\n if (key === 'min') {\n maxValue = values.max;\n } else {\n minValue = values.min;\n }\n\n const slider = (\n \n );\n\n return slider;\n });\n }\n\n /**\n * Return JSX of hidden inputs\n * @private\n * @return {JSX.Element}\n */\n renderHiddenInputs() {\n if (!this.props.name) {\n return [];\n }\n\n const isMultiValue = this.isMultiValue();\n const values = valueTransformer.getValueFromProps(this.props, isMultiValue);\n\n return this.getKeys().map((key) => {\n const value = values[key];\n const name = isMultiValue ? `${this.props.name}${captialize(key)}` : this.props.name;\n\n return (\n \n );\n });\n }\n\n /**\n * @ignore\n * @override\n * @return {JSX.Element}\n */\n render() {\n const componentClassName = this.getComponentClassName();\n const values = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n const percentages = valueTransformer.getPercentagesFromValues(values, this.props.minValue, this.props.maxValue);\n\n return (\n { this.node = node; }}\n className={componentClassName}\n onKeyDown={this.handleKeyDown}\n onKeyUp={this.handleKeyUp}\n onMouseDown={this.handleMouseDown}\n onTouchStart={this.handleTouchStart}>\n \n {this.props.minValue}\n \n\n { this.trackNode = trackNode; }}\n percentages={percentages}\n onTrackMouseDown={this.handleTrackMouseDown}\n isExternal={this.props.isExternal} >\n {this.renderSliders()}\n \n\n \n {this.props.maxValue}\n \n\n {this.renderHiddenInputs()}\n \n );\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/input-range/input-range.jsx","/** @ignore */\nexport const DOWN_ARROW = 40;\n\n/** @ignore */\nexport const LEFT_ARROW = 37;\n\n/** @ignore */\nexport const RIGHT_ARROW = 39;\n\n/** @ignore */\nexport const UP_ARROW = 38;\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/input-range/key-codes.js","import { isNumber } from '../utils';\n\n/**\n * @ignore\n * @param {Object} props - React component props\n * @return {?Error} Return Error if validation fails\n */\nexport default function rangePropType(props) {\n const { maxValue, minValue } = props;\n\n if (!isNumber(minValue) || !isNumber(maxValue)) {\n return new Error('\"minValue\" and \"maxValue\" must be a number');\n }\n\n if (minValue >= maxValue) {\n return new Error('\"minValue\" must be smaller than \"maxValue\"');\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/input-range/range-prop-type.js","import React from 'react';\nimport autobind from 'autobind-decorator';\nimport Label from './label';\n\n/**\n * @ignore\n */\nexport default class Slider extends React.Component {\n /**\n * Accepted propTypes of Slider\n * @override\n * @return {Object}\n * @property {Function} ariaLabelledby\n * @property {Function} ariaControls\n * @property {Function} className\n * @property {Function} formatLabel\n * @property {Function} maxValue\n * @property {Function} minValue\n * @property {Function} onSliderDrag\n * @property {Function} onSliderKeyDown\n * @property {Function} percentage\n * @property {Function} type\n * @property {Function} value\n */\n static get propTypes() {\n return {\n ariaLabelledby: React.PropTypes.string,\n ariaControls: React.PropTypes.string,\n classNames: React.PropTypes.objectOf(React.PropTypes.string).isRequired,\n formatLabel: React.PropTypes.func,\n maxValue: React.PropTypes.number,\n minValue: React.PropTypes.number,\n onSliderDrag: React.PropTypes.func.isRequired,\n onSliderKeyDown: React.PropTypes.func.isRequired,\n percentage: React.PropTypes.number.isRequired,\n type: React.PropTypes.string.isRequired,\n value: React.PropTypes.number.isRequired,\n };\n }\n\n /**\n * @param {Object} props\n * @param {string} [props.ariaLabelledby]\n * @param {string} [props.ariaControls]\n * @param {InputRangeClassNames} props.classNames\n * @param {Function} [props.formatLabel]\n * @param {number} [props.maxValue]\n * @param {number} [props.minValue]\n * @param {Function} props.onSliderKeyDown\n * @param {Function} props.onSliderDrag\n * @param {number} props.percentage\n * @param {number} props.type\n * @param {number} props.value\n */\n constructor(props) {\n super(props);\n\n /**\n * @private\n * @type {?Component}\n */\n this.node = null;\n }\n\n /**\n * @ignore\n * @override\n * @return {void}\n */\n componentWillUnmount() {\n this.removeDocumentMouseMoveListener();\n this.removeDocumentMouseUpListener();\n this.removeDocumentTouchEndListener();\n this.removeDocumentTouchMoveListener();\n }\n\n /**\n * @private\n * @return {Object}\n */\n getStyle() {\n const perc = (this.props.percentage || 0) * 100;\n const style = {\n position: 'absolute',\n left: `${perc}%`,\n };\n\n return style;\n }\n\n /**\n * Listen to mousemove event\n * @private\n * @return {void}\n */\n addDocumentMouseMoveListener() {\n this.removeDocumentMouseMoveListener();\n this.node.ownerDocument.addEventListener('mousemove', this.handleMouseMove);\n }\n\n /**\n * Listen to mouseup event\n * @private\n * @return {void}\n */\n addDocumentMouseUpListener() {\n this.removeDocumentMouseUpListener();\n this.node.ownerDocument.addEventListener('mouseup', this.handleMouseUp);\n }\n\n /**\n * Listen to touchmove event\n * @private\n * @return {void}\n */\n addDocumentTouchMoveListener() {\n this.removeDocumentTouchMoveListener();\n this.node.ownerDocument.addEventListener('touchmove', this.handleTouchMove);\n }\n\n /**\n * Listen to touchend event\n * @private\n * @return {void}\n */\n addDocumentTouchEndListener() {\n this.removeDocumentTouchEndListener();\n this.node.ownerDocument.addEventListener('touchend', this.handleTouchEnd);\n }\n\n /**\n * @private\n * @return {void}\n */\n removeDocumentMouseMoveListener() {\n this.node.ownerDocument.removeEventListener('mousemove', this.handleMouseMove);\n }\n\n /**\n * @private\n * @return {void}\n */\n removeDocumentMouseUpListener() {\n this.node.ownerDocument.removeEventListener('mouseup', this.handleMouseUp);\n }\n\n /**\n * @private\n * @return {void}\n */\n removeDocumentTouchMoveListener() {\n this.node.ownerDocument.removeEventListener('touchmove', this.handleTouchMove);\n }\n\n /**\n * @private\n * @return {void}\n */\n removeDocumentTouchEndListener() {\n this.node.ownerDocument.removeEventListener('touchend', this.handleTouchUp);\n }\n\n /**\n * @private\n * @return {void}\n */\n @autobind\n handleMouseDown() {\n this.addDocumentMouseMoveListener();\n this.addDocumentMouseUpListener();\n }\n\n /**\n * @private\n * @return {void}\n */\n @autobind\n handleMouseUp() {\n this.removeDocumentMouseMoveListener();\n this.removeDocumentMouseUpListener();\n }\n\n /**\n * @private\n * @param {SyntheticEvent} event\n * @return {void}\n */\n @autobind\n handleMouseMove(event) {\n this.props.onSliderDrag(event, this.props.type);\n }\n\n /**\n * @private\n * @return {void}\n */\n @autobind\n handleTouchStart() {\n this.addDocumentTouchEndListener();\n this.addDocumentTouchMoveListener();\n }\n\n /**\n * @private\n * @param {SyntheticEvent} event\n * @return {void}\n */\n @autobind\n handleTouchMove(event) {\n this.props.onSliderDrag(event, this.props.type);\n }\n\n /**\n * @private\n * @return {void}\n */\n @autobind\n handleTouchEnd() {\n this.removeDocumentTouchMoveListener();\n this.removeDocumentTouchEndListener();\n }\n\n /**\n * @private\n * @param {SyntheticEvent} event\n * @return {void}\n */\n @autobind\n handleKeyDown(event) {\n this.props.onSliderKeyDown(event, this.props.type);\n }\n\n /**\n * @override\n * @return {JSX.Element}\n */\n render() {\n const style = this.getStyle();\n\n return (\n { this.node = node; }}\n style={style}>\n \n {this.props.value}\n \n\n \n \n );\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/input-range/slider.jsx","import React from 'react';\nimport autobind from 'autobind-decorator';\n\n/**\n * @ignore\n */\nexport default class Track extends React.Component {\n /**\n * @override\n * @return {Object}\n * @property {Function} children\n * @property {Function} classNames\n * @property {Function} onTrackMouseDown\n * @property {Function} percentages\n */\n static get propTypes() {\n return {\n children: React.PropTypes.node.isRequired,\n classNames: React.PropTypes.objectOf(React.PropTypes.string).isRequired,\n onTrackMouseDown: React.PropTypes.func.isRequired,\n percentages: React.PropTypes.objectOf(React.PropTypes.number).isRequired,\n isExternal: React.PropTypes.bool.isRequired,\n };\n }\n\n /**\n * @param {Object} props\n * @param {InputRangeClassNames} props.classNames\n * @param {Function} props.onTrackMouseDown\n * @param {number} props.percentages\n */\n constructor(props) {\n super(props);\n\n /**\n * @private\n * @type {?Component}\n */\n this.node = null;\n }\n\n /**\n * @private\n * @return {ClientRect}\n */\n getClientRect() {\n return this.node.getBoundingClientRect();\n }\n\n /**\n * @private\n * @return {Object} CSS styles\n */\n getActiveTrackStyle() {\n const width = `${(this.props.percentages.max - this.props.percentages.min) * 100}%`;\n const left = `${this.props.percentages.min * 100}%`;\n\n return { left, width };\n }\n\n /**\n * @private\n * @return {Object} CSS styles\n */\n @autobind\n getActiveTrackStylePre() {\n const width = `${(this.props.percentages.min) * 100}%`;\n const left = '0';\n const float = 'left';\n return { left, width, float };\n }\n\n\n /**\n * @private\n * @return {Object} CSS styles\n */\n @autobind\n getActiveTrackStylePost() {\n const width = `${(1 - this.props.percentages.max) * 100}%`;\n const left = `${this.props.percentages.max * 100}%`;\n\n return { left, width };\n }\n\n /**\n * @private\n * @param {SyntheticEvent} event - User event\n */\n @autobind\n handleMouseDown(event) {\n const clientX = event.touches ? event.touches[0].clientX : event.clientX;\n const trackClientRect = this.getClientRect();\n const position = {\n x: clientX - trackClientRect.left,\n y: 0,\n };\n\n this.props.onTrackMouseDown(event, position);\n }\n\n /**\n * @private\n * @param {SyntheticEvent} event - User event\n */\n @autobind\n handleTouchStart(event) {\n event.preventDefault();\n\n this.handleMouseDown(event);\n }\n\n /**\n * @override\n * @return {JSX.Element}\n */\n render() {\n const activeTrackStyle = this.getActiveTrackStyle();\n const activeTrackStyleExternalPre = this.getActiveTrackStylePre();\n const activeTrackStyleExternalPost = this.getActiveTrackStylePost();\n\n return (\n { this.node = node; }}>\n {\n !this.props.isExternal ? (\n \n ) : (\n
\n \n \n
\n )\n }\n {this.props.children}\n \n );\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/input-range/track.jsx","import { isNumber, isObject } from '../utils';\n\n/**\n * @ignore\n * @param {Object} props\n * @return {?Error} Return Error if validation fails\n */\nexport default function valuePropType(props, propName) {\n const { maxValue, minValue } = props;\n const value = props[propName];\n\n if (!isNumber(value) && (!isObject(value) || !isNumber(value.min) || !isNumber(value.max))) {\n return new Error(`\"${propName}\" must be a number or a range object`);\n }\n\n if (isNumber(value) && (value < minValue || value > maxValue)) {\n return new Error(`\"${propName}\" must be in between \"minValue\" and \"maxValue\"`);\n }\n\n if (isObject(value) && (value.min < minValue || value.min > maxValue || value.max < minValue || value.max > maxValue)) {\n return new Error(`\"${propName}\" must be in between \"minValue\" and \"maxValue\"`);\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/input-range/value-prop-type.js","import { clamp } from '../utils';\n\n/**\n * Convert a point into a percentage value\n * @ignore\n * @param {Point} position\n * @param {ClientRect} clientRect\n * @return {number} Percentage value\n */\nexport function getPercentageFromPosition(position, clientRect) {\n const length = clientRect.width;\n const sizePerc = position.x / length;\n\n return sizePerc || 0;\n}\n\n/**\n * Convert a point into a model value\n * @ignore\n * @param {Point} position\n * @param {number} minValue\n * @param {number} maxValue\n * @param {ClientRect} clientRect\n * @return {number}\n */\nexport function getValueFromPosition(position, minValue, maxValue, clientRect) {\n const sizePerc = getPercentageFromPosition(position, clientRect);\n const valueDiff = maxValue - minValue;\n\n return minValue + (valueDiff * sizePerc);\n}\n\n/**\n * Convert props into a range value\n * @ignore\n * @param {Object} props\n * @param {boolean} isMultiValue\n * @return {Range}\n */\nexport function getValueFromProps(props, isMultiValue) {\n if (isMultiValue) {\n return { ...props.value };\n }\n\n return {\n min: props.minValue,\n max: props.value,\n };\n}\n\n/**\n * Convert a model value into a percentage value\n * @ignore\n * @param {number} value\n * @param {number} minValue\n * @param {number} maxValue\n * @return {number}\n */\nexport function getPercentageFromValue(value, minValue, maxValue) {\n const validValue = clamp(value, minValue, maxValue);\n const valueDiff = maxValue - minValue;\n const valuePerc = (validValue - minValue) / valueDiff;\n\n return valuePerc || 0;\n}\n\n/**\n * Convert model values into percentage values\n * @ignore\n * @param {Range} values\n * @param {number} minValue\n * @param {number} maxValue\n * @return {Range}\n */\nexport function getPercentagesFromValues(values, minValue, maxValue) {\n return {\n min: getPercentageFromValue(values.min, minValue, maxValue),\n max: getPercentageFromValue(values.max, minValue, maxValue),\n };\n}\n\n/**\n * Convert a value into a point\n * @ignore\n * @param {number} value\n * @param {number} minValue\n * @param {number} maxValue\n * @param {ClientRect} clientRect\n * @return {Point} Position\n */\nexport function getPositionFromValue(value, minValue, maxValue, clientRect) {\n const length = clientRect.width;\n const valuePerc = getPercentageFromValue(value, minValue, maxValue);\n const positionValue = valuePerc * length;\n\n return {\n x: positionValue,\n y: 0,\n };\n}\n\n/**\n * Convert a range of values into points\n * @ignore\n * @param {Range} values\n * @param {number} minValue\n * @param {number} maxValue\n * @param {ClientRect} clientRect\n * @return {Range}\n */\nexport function getPositionsFromValues(values, minValue, maxValue, clientRect) {\n return {\n min: getPositionFromValue(values.min, minValue, maxValue, clientRect),\n max: getPositionFromValue(values.max, minValue, maxValue, clientRect),\n };\n}\n\n/**\n * Convert an event into a point\n * @ignore\n * @param {Event} event\n * @param {ClientRect} clientRect\n * @return {Point}\n */\nexport function getPositionFromEvent(event, clientRect) {\n const length = clientRect.width;\n const { clientX } = event.touches ? event.touches[0] : event;\n\n return {\n x: clamp(clientX - clientRect.left, 0, length),\n y: 0,\n };\n}\n\n/**\n * Convert a value into a step value\n * @ignore\n * @param {number} value\n * @param {number} valuePerStep\n * @return {number}\n */\nexport function getStepValueFromValue(value, valuePerStep) {\n return Math.round(value / valuePerStep) * valuePerStep;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/input-range/value-transformer.js","/**\n * Captialize a string\n * @ignore\n * @param {string} string\n * @return {string}\n */\nexport default function captialize(string) {\n return string.charAt(0).toUpperCase() + string.slice(1);\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/utils/captialize.js","/**\n * Clamp a value between a min and max value\n * @ignore\n * @param {number} value\n * @param {number} min\n * @param {number} max\n * @return {number}\n */\nexport default function clamp(value, min, max) {\n return Math.min(Math.max(value, min), max);\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/utils/clamp.js","/**\n * Calculate the distance between pointA and pointB\n * @ignore\n * @param {Point} pointA\n * @param {Point} pointB\n * @return {number} Distance\n */\nexport default function distanceTo(pointA, pointB) {\n const xDiff = (pointB.x - pointA.x) ** 2;\n const yDiff = (pointB.y - pointA.y) ** 2;\n\n return Math.sqrt(xDiff + yDiff);\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/utils/distance-to.js","/**\n * Check if a value is defined\n * @ignore\n * @param {*} value\n * @return {boolean}\n */\nexport default function isDefined(value) {\n return value !== undefined && value !== null;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/utils/is-defined.js","/**\n * Check if a value is a number\n * @ignore\n * @param {*} value\n * @return {boolean}\n */\nexport default function isNumber(value) {\n return typeof value === 'number';\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/utils/is-number.js","/**\n * Check if a value is an object\n * @ignore\n * @param {*} value\n * @return {boolean}\n */\nexport default function isObject(value) {\n return value !== null && typeof value === 'object';\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/utils/is-object.js","/**\n * Calculate the absolute difference between two numbers\n * @ignore\n * @param {number} numA\n * @param {number} numB\n * @return {number}\n */\nexport default function length(numA, numB) {\n return Math.abs(numA - numB);\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/utils/length.js"],"sourceRoot":""} \ No newline at end of file diff --git a/lib/bundle/react-input-range.min.js b/lib/bundle/react-input-range.min.js new file mode 100644 index 0000000..7f229f3 --- /dev/null +++ b/lib/bundle/react-input-range.min.js @@ -0,0 +1,2 @@ +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.InputRange=t(require("react")):e.InputRange=t(e.React)}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=5)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(14);Object.defineProperty(t,"captialize",{enumerable:!0,get:function(){return r(o).default}});var a=n(15);Object.defineProperty(t,"clamp",{enumerable:!0,get:function(){return r(a).default}});var i=n(16);Object.defineProperty(t,"distanceTo",{enumerable:!0,get:function(){return r(i).default}});var u=n(17);Object.defineProperty(t,"isDefined",{enumerable:!0,get:function(){return r(u).default}});var s=n(18);Object.defineProperty(t,"isNumber",{enumerable:!0,get:function(){return r(s).default}});var l=n(19);Object.defineProperty(t,"isObject",{enumerable:!0,get:function(){return r(l).default}});var p=n(20);Object.defineProperty(t,"length",{enumerable:!0,get:function(){return r(p).default}})},function(t,n){t.exports=e},function(e,t,n){"use strict";function r(){for(var e=arguments.length,t=Array(e),n=0;n=this.props.step||(0,V.length)(e.max,t.max)>=this.props.step}},{key:"isMultiValue",value:function(){return(0,V.isObject)(this.props.value)}},{key:"isWithinRange",value:function(e){return this.isMultiValue()?e.min>=this.props.minValue&&e.max<=this.props.maxValue&&e.min=this.props.minValue&&e.max<=this.props.maxValue}},{key:"shouldUpdate",value:function(e){return this.isWithinRange(e)&&this.hasStepDifference(e)}},{key:"updatePosition",value:function(e,t){var n=y.getValueFromProps(this.props,this.isMultiValue()),r=y.getPositionsFromValues(n,this.props.minValue,this.props.maxValue,this.getTrackClientRect());r[e]=t,this.updatePositions(r)}},{key:"updatePositions",value:function(e){var t={min:y.getValueFromPosition(e.min,this.props.minValue,this.props.maxValue,this.getTrackClientRect()),max:y.getValueFromPosition(e.max,this.props.minValue,this.props.maxValue,this.getTrackClientRect())},n={min:y.getStepValueFromValue(t.min,this.props.step),max:y.getStepValueFromValue(t.max,this.props.step)};this.updateValues(n)}},{key:"updateValue",value:function(e,t){var n=y.getValueFromProps(this.props,this.isMultiValue());n[e]=t,this.updateValues(n)}},{key:"updateValues",value:function(e){this.shouldUpdate(e)&&this.props.onChange(this.isMultiValue()?e:e.max)}},{key:"incrementValue",value:function(e){var t=y.getValueFromProps(this.props,this.isMultiValue()),n=t[e]+this.props.step;this.updateValue(e,n)}},{key:"decrementValue",value:function(e){var t=y.getValueFromProps(this.props,this.isMultiValue()),n=t[e]-this.props.step;this.updateValue(e,n)}},{key:"addDocumentMouseUpListener",value:function(){this.removeDocumentMouseUpListener(),this.node.ownerDocument.addEventListener("mouseup",this.handleMouseUp)}},{key:"addDocumentTouchEndListener",value:function(){this.removeDocumentTouchEndListener(),this.node.ownerDocument.addEventListener("touchend",this.handleTouchEnd)}},{key:"removeDocumentMouseUpListener",value:function(){this.node.ownerDocument.removeEventListener("mouseup",this.handleMouseUp)}},{key:"removeDocumentTouchEndListener",value:function(){this.node.ownerDocument.removeEventListener("touchend",this.handleTouchEnd)}},{key:"handleSliderDrag",value:function(e,t){var n=this;if(!this.props.disabled){var r=y.getPositionFromEvent(e,this.getTrackClientRect());requestAnimationFrame(function(){return n.updatePosition(t,r)})}}},{key:"handleSliderKeyDown",value:function(e,t){if(!this.props.disabled)switch(e.keyCode){case j.LEFT_ARROW:case j.DOWN_ARROW:e.preventDefault(),this.decrementValue(t);break;case j.RIGHT_ARROW:case j.UP_ARROW:e.preventDefault(),this.incrementValue(t)}}},{key:"handleTrackMouseDown",value:function(e,t){this.props.disabled||(e.preventDefault(),this.updatePosition(this.getKeyByPosition(t),t))}},{key:"handleInteractionStart",value:function(){this.props.onChangeStart&&this.props.onChangeStart(this.props.value),this.props.onChangeComplete&&!(0,V.isDefined)(this.startValue)&&(this.startValue=this.props.value)}},{key:"handleInteractionEnd",value:function(){this.props.onChangeComplete&&(0,V.isDefined)(this.startValue)&&(this.startValue!==this.props.value&&this.props.onChangeComplete(this.props.value),this.startValue=null)}},{key:"handleKeyDown",value:function(e){this.handleInteractionStart(e)}},{key:"handleKeyUp",value:function(e){this.handleInteractionEnd(e)}},{key:"handleMouseDown",value:function(e){this.handleInteractionStart(e),this.addDocumentMouseUpListener()}},{key:"handleMouseUp",value:function(e){this.handleInteractionEnd(e),this.removeDocumentMouseUpListener()}},{key:"handleTouchStart",value:function(e){this.handleInteractionStart(e),this.addDocumentTouchEndListener()}},{key:"handleTouchEnd",value:function(e){this.handleInteractionEnd(e),this.removeDocumentTouchEndListener()}},{key:"renderSliders",value:function(){var e=this,t=y.getValueFromProps(this.props,this.isMultiValue()),n=y.getPercentagesFromValues(t,this.props.minValue,this.props.maxValue);return this.getKeys().map(function(r){var o=t[r],a=n[r],i=e.props,u=i.maxValue,s=i.minValue;return"min"===r?u=t.max:s=t.min,c.default.createElement(M.default,{ariaLabelledby:e.props.ariaLabelledby,ariaControls:e.props.ariaControls,classNames:e.props.classNames,formatLabel:e.props.formatLabel,key:r,maxValue:u,minValue:s,onSliderDrag:e.handleSliderDrag,onSliderKeyDown:e.handleSliderKeyDown,percentage:a,type:r,value:o})})}},{key:"renderHiddenInputs",value:function(){var e=this;if(!this.props.name)return[];var t=this.isMultiValue(),n=y.getValueFromProps(this.props,t);return this.getKeys().map(function(r){var o=n[r],a=t?""+e.props.name+(0,V.captialize)(r):e.props.name;return c.default.createElement("input",{key:r,type:"hidden",name:a,value:o})})}},{key:"render",value:function(){var e=this,t=this.getComponentClassName(),n=y.getValueFromProps(this.props,this.isMultiValue()),r=y.getPercentagesFromValues(n,this.props.minValue,this.props.maxValue);return c.default.createElement("div",{"aria-disabled":this.props.disabled,ref:function(t){e.node=t},className:t,onKeyDown:this.handleKeyDown,onKeyUp:this.handleKeyUp,onMouseDown:this.handleMouseDown,onTouchStart:this.handleTouchStart},c.default.createElement(g.default,{classNames:this.props.classNames,formatLabel:this.props.formatLabel,type:"min"},this.props.minValue),c.default.createElement(_.default,{classNames:this.props.classNames,ref:function(t){e.trackNode=t},percentages:r,onTrackMouseDown:this.handleTrackMouseDown,isExternal:this.props.isExternal},this.renderSliders()),c.default.createElement(g.default,{classNames:this.props.classNames,formatLabel:this.props.formatLabel,type:"max"},this.props.maxValue),this.renderHiddenInputs())}}]),t}(c.default.Component),u(s.prototype,"handleSliderDrag",[f.default],Object.getOwnPropertyDescriptor(s.prototype,"handleSliderDrag"),s.prototype),u(s.prototype,"handleSliderKeyDown",[f.default],Object.getOwnPropertyDescriptor(s.prototype,"handleSliderKeyDown"),s.prototype),u(s.prototype,"handleTrackMouseDown",[f.default],Object.getOwnPropertyDescriptor(s.prototype,"handleTrackMouseDown"),s.prototype),u(s.prototype,"handleInteractionStart",[f.default],Object.getOwnPropertyDescriptor(s.prototype,"handleInteractionStart"),s.prototype),u(s.prototype,"handleInteractionEnd",[f.default],Object.getOwnPropertyDescriptor(s.prototype,"handleInteractionEnd"),s.prototype),u(s.prototype,"handleKeyDown",[f.default],Object.getOwnPropertyDescriptor(s.prototype,"handleKeyDown"),s.prototype),u(s.prototype,"handleKeyUp",[f.default],Object.getOwnPropertyDescriptor(s.prototype,"handleKeyUp"),s.prototype),u(s.prototype,"handleMouseDown",[f.default],Object.getOwnPropertyDescriptor(s.prototype,"handleMouseDown"),s.prototype),u(s.prototype,"handleMouseUp",[f.default],Object.getOwnPropertyDescriptor(s.prototype,"handleMouseUp"),s.prototype),u(s.prototype,"handleTouchStart",[f.default],Object.getOwnPropertyDescriptor(s.prototype,"handleTouchStart"),s.prototype),u(s.prototype,"handleTouchEnd",[f.default],Object.getOwnPropertyDescriptor(s.prototype,"handleTouchEnd"),s.prototype),s);t.default=x,e.exports=t.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.DOWN_ARROW=40,t.LEFT_ARROW=37,t.RIGHT_ARROW=39,t.UP_ARROW=38},function(e,t,n){"use strict";function r(e){var t=e.maxValue,n=e.minValue;return(0,o.isNumber)(n)&&(0,o.isNumber)(t)?n>=t?new Error('"minValue" must be smaller than "maxValue"'):void 0:new Error('"minValue" and "maxValue" must be a number')}Object.defineProperty(t,"__esModule",{value:!0}),t.default=r;var o=n(0);e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function u(e,t,n,r,o){var a={};return Object.keys(r).forEach(function(e){a[e]=r[e]}),a.enumerable=!!a.enumerable,a.configurable=!!a.configurable,("value"in a||a.initializer)&&(a.writable=!0),a=n.slice().reverse().reduce(function(n,r){return r(e,t,n)||n},a),o&&void 0!==a.initializer&&(a.value=a.initializer?a.initializer.call(o):void 0,a.initializer=void 0),void 0===a.initializer&&(Object.defineProperty(e,t,a),a=null),a}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var s,l=function(){function e(e,t){for(var n=0;nn)?new Error('"'+t+'" must be in between "minValue" and "maxValue"'):(0,o.isObject)(a)&&(a.minn||a.maxn)?new Error('"'+t+'" must be in between "minValue" and "maxValue"'):void 0:new Error('"'+t+'" must be a number or a range object')}Object.defineProperty(t,"__esModule",{value:!0}),t.default=r;var o=n(0);e.exports=t.default},function(e,t,n){"use strict";function r(e,t){var n=t.width;return e.x/n||0}function o(e,t,n,o){return t+(n-t)*r(e,o)}function a(e,t){return t?d({},e.value):{min:e.minValue,max:e.value}}function i(e,t,n){return((0,f.clamp)(e,t,n)-t)/(n-t)||0}function u(e,t,n){return{min:i(e.min,t,n),max:i(e.max,t,n)}}function s(e,t,n,r){var o=r.width;return{x:i(e,t,n)*o,y:0}}function l(e,t,n,r){return{min:s(e.min,t,n,r),max:s(e.max,t,n,r)}}function p(e,t){var n=t.width,r=e.touches?e.touches[0]:e,o=r.clientX;return{x:(0,f.clamp)(o-t.left,0,n),y:0}}function c(e,t){return Math.round(e/t)*t}Object.defineProperty(t,"__esModule",{value:!0});var d=Object.assign||function(e){for(var t=1;t\n *\n * The decorator may be used on classes or methods\n * ```\n * @autobind\n * class FullBound {}\n *\n * class PartBound {\n * @autobind\n * method () {}\n * }\n * ```\n */\n\n\nObject.defineProperty(exports, '__esModule', {\n value: true\n});\nexports['default'] = autobind;\n\nfunction autobind() {\n for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n if (args.length === 1) {\n return boundClass.apply(undefined, args);\n } else {\n return boundMethod.apply(undefined, args);\n }\n}\n\n/**\n * Use boundMethod to bind all methods on the target.prototype\n */\nfunction boundClass(target) {\n // (Using reflect to get all keys including symbols)\n var keys = undefined;\n // Use Reflect if exists\n if (typeof Reflect !== 'undefined' && typeof Reflect.ownKeys === 'function') {\n keys = Reflect.ownKeys(target.prototype);\n } else {\n keys = Object.getOwnPropertyNames(target.prototype);\n // use symbols if support is provided\n if (typeof Object.getOwnPropertySymbols === 'function') {\n keys = keys.concat(Object.getOwnPropertySymbols(target.prototype));\n }\n }\n\n keys.forEach(function (key) {\n // Ignore special case target method\n if (key === 'constructor') {\n return;\n }\n\n var descriptor = Object.getOwnPropertyDescriptor(target.prototype, key);\n\n // Only methods need binding\n if (typeof descriptor.value === 'function') {\n Object.defineProperty(target.prototype, key, boundMethod(target, key, descriptor));\n }\n });\n return target;\n}\n\n/**\n * Return a descriptor removing the value and returning a getter\n * The getter will return a .bind version of the function\n * and memoize the result against a symbol on the instance\n */\nfunction boundMethod(target, key, descriptor) {\n var fn = descriptor.value;\n\n if (typeof fn !== 'function') {\n throw new Error('@autobind decorator can only be applied to methods not: ' + typeof fn);\n }\n\n // In IE11 calling Object.defineProperty has a side-effect of evaluating the\n // getter for the property which is being replaced. This causes infinite\n // recursion and an \"Out of stack space\" error.\n var definingProperty = false;\n\n return {\n configurable: true,\n get: function get() {\n if (definingProperty || this === target.prototype || this.hasOwnProperty(key)) {\n return fn;\n }\n\n var boundFn = fn.bind(this);\n definingProperty = true;\n Object.defineProperty(this, key, {\n value: boundFn,\n configurable: true,\n writable: true\n });\n definingProperty = false;\n return boundFn;\n }\n };\n}\nmodule.exports = exports['default'];\n\n\n/***/ }),\n/* 3 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = Label;\n\nvar _react = __webpack_require__(1);\n\nvar _react2 = _interopRequireDefault(_react);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n/**\n * @ignore\n * @param {Object} props\n * @param {InputRangeClassNames} props.classNames\n * @param {Function} props.formatLabel\n * @param {string} props.type\n */\nfunction Label(props) {\n var labelValue = props.formatLabel ? props.formatLabel(props.children, props.type) : props.children;\n var labelClassName = props.markerType === 'track' ? props.classNames.labelContainer + ' marker-' + props.markerValue : props.classNames.labelContainer;\n return _react2.default.createElement(\n 'span',\n { className: props.classNames[props.type + 'Label'] },\n _react2.default.createElement(\n 'span',\n { className: labelClassName },\n labelValue\n )\n );\n}\n\n/**\n * @type {Object}\n * @property {Function} children\n * @property {Function} classNames\n * @property {Function} formatLabel\n * @property {Function} type\n */\nLabel.propTypes = {\n children: _react2.default.PropTypes.node.isRequired,\n classNames: _react2.default.PropTypes.objectOf(_react2.default.PropTypes.string).isRequired,\n formatLabel: _react2.default.PropTypes.func,\n type: _react2.default.PropTypes.string.isRequired,\n markerType: _react2.default.PropTypes.string,\n markerValue: _react2.default.PropTypes.string\n\n};\nmodule.exports = exports['default'];\n\n/***/ }),\n/* 4 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _inputRange = __webpack_require__(7);\n\nObject.defineProperty(exports, 'InputRange', {\n enumerable: true,\n get: function get() {\n return _interopRequireDefault(_inputRange).default;\n }\n});\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n/***/ }),\n/* 5 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _inputRange = __webpack_require__(4);\n\n/**\n * @ignore\n * @typedef {Object} ClientRect\n * @property {number} height\n * @property {number} left\n * @property {number} top\n * @property {number} width\n */\n\n/**\n * @typedef {Object} InputRangeClassNames\n * @property {string} activeTrack\n * @property {string} disabledInputRange\n * @property {string} inputRange\n * @property {string} labelContainer\n * @property {string} maxLabel\n * @property {string} minLabel\n * @property {string} slider\n * @property {string} sliderContainer\n * @property {string} track\n * @property {string} valueLabel\n */\n\n/**\n * @typedef {Function} LabelFormatter\n * @param {number} value\n * @param {string} type\n * @return {string}\n */\n\n/**\n * @ignore\n * @typedef {Object} Point\n * @property {number} x\n * @property {number} y\n */\n\n/**\n * @typedef {Object} Range\n * @property {number} min - Min value\n * @property {number} max - Max value\n */\n\nexports.default = _inputRange.InputRange;\nmodule.exports = exports['default'];\n\n/***/ }),\n/* 6 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n/**\n* Default CSS class names\n* @ignore\n* @type {InputRangeClassNames}\n*/\nvar DEFAULT_CLASS_NAMES = {\n activeTrack: 'input-range__track input-range__track--active',\n disabledInputRange: 'input-range input-range--disabled',\n inputRange: 'input-range',\n labelContainer: 'input-range__label-container',\n maxLabel: 'input-range__label input-range__label--max',\n minLabel: 'input-range__label input-range__label--min',\n slider: 'input-range__slider',\n sliderContainer: 'input-range__slider-container',\n track: 'input-range__track input-range__track--background',\n valueLabel: 'input-range__label input-range__label--value'\n};\n\nexports.default = DEFAULT_CLASS_NAMES;\nmodule.exports = exports['default'];\n\n/***/ }),\n/* 7 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = undefined;\n\nvar _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; }; }();\n\nvar _desc, _value, _class;\n\nvar _react = __webpack_require__(1);\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _autobindDecorator = __webpack_require__(2);\n\nvar _autobindDecorator2 = _interopRequireDefault(_autobindDecorator);\n\nvar _valueTransformer = __webpack_require__(13);\n\nvar valueTransformer = _interopRequireWildcard(_valueTransformer);\n\nvar _defaultClassNames = __webpack_require__(6);\n\nvar _defaultClassNames2 = _interopRequireDefault(_defaultClassNames);\n\nvar _label = __webpack_require__(3);\n\nvar _label2 = _interopRequireDefault(_label);\n\nvar _rangePropType = __webpack_require__(9);\n\nvar _rangePropType2 = _interopRequireDefault(_rangePropType);\n\nvar _valuePropType = __webpack_require__(12);\n\nvar _valuePropType2 = _interopRequireDefault(_valuePropType);\n\nvar _slider = __webpack_require__(10);\n\nvar _slider2 = _interopRequireDefault(_slider);\n\nvar _track = __webpack_require__(11);\n\nvar _track2 = _interopRequireDefault(_track);\n\nvar _utils = __webpack_require__(0);\n\nvar _keyCodes = __webpack_require__(8);\n\nfunction _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _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; }\n\nfunction _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; }\n\nfunction _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {\n var desc = {};\n Object['ke' + 'ys'](descriptor).forEach(function (key) {\n desc[key] = descriptor[key];\n });\n desc.enumerable = !!desc.enumerable;\n desc.configurable = !!desc.configurable;\n\n if ('value' in desc || desc.initializer) {\n desc.writable = true;\n }\n\n desc = decorators.slice().reverse().reduce(function (desc, decorator) {\n return decorator(target, property, desc) || desc;\n }, desc);\n\n if (context && desc.initializer !== void 0) {\n desc.value = desc.initializer ? desc.initializer.call(context) : void 0;\n desc.initializer = undefined;\n }\n\n if (desc.initializer === void 0) {\n Object['define' + 'Property'](target, property, desc);\n desc = null;\n }\n\n return desc;\n}\n\n/**\n * A React component that allows users to input numeric values within a range\n * by dragging its sliders.\n */\nvar InputRange = (_class = function (_React$Component) {\n _inherits(InputRange, _React$Component);\n\n _createClass(InputRange, null, [{\n key: 'propTypes',\n\n /**\n * @ignore\n * @override\n * @return {Object}\n */\n get: function get() {\n return {\n ariaLabelledby: _react2.default.PropTypes.string,\n ariaControls: _react2.default.PropTypes.string,\n classNames: _react2.default.PropTypes.objectOf(_react2.default.PropTypes.string),\n disabled: _react2.default.PropTypes.bool,\n formatLabel: _react2.default.PropTypes.func,\n isExternal: _react2.default.PropTypes.bool,\n maxValue: _rangePropType2.default,\n minValue: _rangePropType2.default,\n name: _react2.default.PropTypes.string,\n onChangeStart: _react2.default.PropTypes.func,\n onChange: _react2.default.PropTypes.func.isRequired,\n onChangeComplete: _react2.default.PropTypes.func,\n step: _react2.default.PropTypes.number,\n value: _valuePropType2.default\n };\n }\n\n /**\n * @ignore\n * @override\n * @return {Object}\n */\n\n }, {\n key: 'defaultProps',\n get: function get() {\n return {\n classNames: _defaultClassNames2.default,\n disabled: false,\n maxValue: 10,\n minValue: 0,\n step: 1,\n isExternal: false\n };\n }\n\n /**\n * @param {Object} props\n * @param {string} [props.ariaLabelledby]\n * @param {string} [props.ariaControls]\n * @param {InputRangeClassNames} [props.classNames]\n * @param {boolean} [props.disabled = false]\n * @param {Function} [props.formatLabel]\n * @param {number|Range} [props.maxValue = 10]\n * @param {number|Range} [props.minValue = 0]\n * @param {string} [props.name]\n * @param {string} props.onChange\n * @param {Function} [props.onChangeComplete]\n * @param {Function} [props.onChangeStart]\n * @param {number} [props.step = 1]\n * @param {number|Range} props.value\n */\n\n }]);\n\n function InputRange(props) {\n _classCallCheck(this, InputRange);\n\n /**\n * @private\n * @type {?number}\n */\n var _this = _possibleConstructorReturn(this, (InputRange.__proto__ || Object.getPrototypeOf(InputRange)).call(this, props));\n\n _this.startValue = null;\n\n /**\n * @private\n * @type {?Component}\n */\n _this.node = null;\n\n /**\n * @private\n * @type {?Component}\n */\n _this.trackNode = null;\n return _this;\n }\n\n /**\n * @ignore\n * @override\n * @return {void}\n */\n\n\n _createClass(InputRange, [{\n key: 'componentWillUnmount',\n value: function componentWillUnmount() {\n this.removeDocumentMouseUpListener();\n this.removeDocumentTouchEndListener();\n }\n\n /**\n * Return the CSS class name of the component\n * @private\n * @return {string}\n */\n\n }, {\n key: 'getComponentClassName',\n value: function getComponentClassName() {\n if (!this.props.disabled) {\n return this.props.classNames.inputRange;\n }\n\n return this.props.classNames.disabledInputRange;\n }\n\n /**\n * Return the bounding rect of the track\n * @private\n * @return {ClientRect}\n */\n\n }, {\n key: 'getTrackClientRect',\n value: function getTrackClientRect() {\n return this.trackNode.getClientRect();\n }\n\n /**\n * Return the slider key closest to a point\n * @private\n * @param {Point} position\n * @return {string}\n */\n\n }, {\n key: 'getKeyByPosition',\n value: function getKeyByPosition(position) {\n var values = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n var positions = valueTransformer.getPositionsFromValues(values, this.props.minValue, this.props.maxValue, this.getTrackClientRect());\n\n if (this.isMultiValue()) {\n var distanceToMin = (0, _utils.distanceTo)(position, positions.min);\n var distanceToMax = (0, _utils.distanceTo)(position, positions.max);\n\n if (distanceToMin < distanceToMax) {\n return 'min';\n }\n }\n\n return 'max';\n }\n\n /**\n * Return all the slider keys\n * @private\n * @return {string[]}\n */\n\n }, {\n key: 'getKeys',\n value: function getKeys() {\n if (this.isMultiValue()) {\n return ['min', 'max'];\n }\n\n return ['max'];\n }\n\n /**\n * Return true if the difference between the new and the current value is\n * greater or equal to the step amount of the component\n * @private\n * @param {Range} values\n * @return {boolean}\n */\n\n }, {\n key: 'hasStepDifference',\n value: function hasStepDifference(values) {\n var currentValues = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n\n return (0, _utils.length)(values.min, currentValues.min) >= this.props.step || (0, _utils.length)(values.max, currentValues.max) >= this.props.step;\n }\n\n /**\n * Return true if the component accepts a min and max value\n * @private\n * @return {boolean}\n */\n\n }, {\n key: 'isMultiValue',\n value: function isMultiValue() {\n return (0, _utils.isObject)(this.props.value);\n }\n\n /**\n * Return true if the range is within the max and min value of the component\n * @private\n * @param {Range} values\n * @return {boolean}\n */\n\n }, {\n key: 'isWithinRange',\n value: function isWithinRange(values) {\n if (this.isMultiValue()) {\n return values.min >= this.props.minValue && values.max <= this.props.maxValue && values.min < values.max;\n }\n\n return values.max >= this.props.minValue && values.max <= this.props.maxValue;\n }\n\n /**\n * Return true if the new value should trigger a render\n * @private\n * @param {Range} values\n * @return {boolean}\n */\n\n }, {\n key: 'shouldUpdate',\n value: function shouldUpdate(values) {\n return this.isWithinRange(values) && this.hasStepDifference(values);\n }\n\n /**\n * Update the position of a slider\n * @private\n * @param {string} key\n * @param {Point} position\n * @return {void}\n */\n\n }, {\n key: 'updatePosition',\n value: function updatePosition(key, position) {\n var values = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n var positions = valueTransformer.getPositionsFromValues(values, this.props.minValue, this.props.maxValue, this.getTrackClientRect());\n\n positions[key] = position;\n\n this.updatePositions(positions);\n }\n\n /**\n * Update the positions of multiple sliders\n * @private\n * @param {Object} positions\n * @param {Point} positions.min\n * @param {Point} positions.max\n * @return {void}\n */\n\n }, {\n key: 'updatePositions',\n value: function updatePositions(positions) {\n var values = {\n min: valueTransformer.getValueFromPosition(positions.min, this.props.minValue, this.props.maxValue, this.getTrackClientRect()),\n max: valueTransformer.getValueFromPosition(positions.max, this.props.minValue, this.props.maxValue, this.getTrackClientRect())\n };\n\n var transformedValues = {\n min: valueTransformer.getStepValueFromValue(values.min, this.props.step),\n max: valueTransformer.getStepValueFromValue(values.max, this.props.step)\n };\n\n this.updateValues(transformedValues);\n }\n\n /**\n * Update the value of a slider\n * @private\n * @param {string} key\n * @param {number} value\n * @return {void}\n */\n\n }, {\n key: 'updateValue',\n value: function updateValue(key, value) {\n var values = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n\n values[key] = value;\n\n this.updateValues(values);\n }\n\n /**\n * Update the values of multiple sliders\n * @private\n * @param {Range|number} values\n * @return {void}\n */\n\n }, {\n key: 'updateValues',\n value: function updateValues(values) {\n if (!this.shouldUpdate(values)) {\n return;\n }\n\n this.props.onChange(this.isMultiValue() ? values : values.max);\n }\n\n /**\n * Increment the value of a slider by key name\n * @private\n * @param {string} key\n * @return {void}\n */\n\n }, {\n key: 'incrementValue',\n value: function incrementValue(key) {\n var values = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n var value = values[key] + this.props.step;\n\n this.updateValue(key, value);\n }\n\n /**\n * Decrement the value of a slider by key name\n * @private\n * @param {string} key\n * @return {void}\n */\n\n }, {\n key: 'decrementValue',\n value: function decrementValue(key) {\n var values = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n var value = values[key] - this.props.step;\n\n this.updateValue(key, value);\n }\n\n /**\n * Listen to mouseup event\n * @private\n * @return {void}\n */\n\n }, {\n key: 'addDocumentMouseUpListener',\n value: function addDocumentMouseUpListener() {\n this.removeDocumentMouseUpListener();\n this.node.ownerDocument.addEventListener('mouseup', this.handleMouseUp);\n }\n\n /**\n * Listen to touchend event\n * @private\n * @return {void}\n */\n\n }, {\n key: 'addDocumentTouchEndListener',\n value: function addDocumentTouchEndListener() {\n this.removeDocumentTouchEndListener();\n this.node.ownerDocument.addEventListener('touchend', this.handleTouchEnd);\n }\n\n /**\n * Stop listening to mouseup event\n * @private\n * @return {void}\n */\n\n }, {\n key: 'removeDocumentMouseUpListener',\n value: function removeDocumentMouseUpListener() {\n this.node.ownerDocument.removeEventListener('mouseup', this.handleMouseUp);\n }\n\n /**\n * Stop listening to touchend event\n * @private\n * @return {void}\n */\n\n }, {\n key: 'removeDocumentTouchEndListener',\n value: function removeDocumentTouchEndListener() {\n this.node.ownerDocument.removeEventListener('touchend', this.handleTouchEnd);\n }\n\n /**\n * Handle any \"mousemove\" event received by the slider\n * @private\n * @param {SyntheticEvent} event\n * @param {string} key\n * @return {void}\n */\n\n }, {\n key: 'handleSliderDrag',\n value: function handleSliderDrag(event, key) {\n var _this2 = this;\n\n if (this.props.disabled) {\n return;\n }\n\n var position = valueTransformer.getPositionFromEvent(event, this.getTrackClientRect());\n\n requestAnimationFrame(function () {\n return _this2.updatePosition(key, position);\n });\n }\n\n /**\n * Handle any \"keydown\" event received by the slider\n * @private\n * @param {SyntheticEvent} event\n * @param {string} key\n * @return {void}\n */\n\n }, {\n key: 'handleSliderKeyDown',\n value: function handleSliderKeyDown(event, key) {\n if (this.props.disabled) {\n return;\n }\n\n switch (event.keyCode) {\n case _keyCodes.LEFT_ARROW:\n case _keyCodes.DOWN_ARROW:\n event.preventDefault();\n this.decrementValue(key);\n break;\n\n case _keyCodes.RIGHT_ARROW:\n case _keyCodes.UP_ARROW:\n event.preventDefault();\n this.incrementValue(key);\n break;\n\n default:\n break;\n }\n }\n\n /**\n * Handle any \"mousedown\" event received by the track\n * @private\n * @param {SyntheticEvent} event\n * @param {Point} position\n * @return {void}\n */\n\n }, {\n key: 'handleTrackMouseDown',\n value: function handleTrackMouseDown(event, position) {\n if (this.props.disabled) {\n return;\n }\n\n event.preventDefault();\n\n this.updatePosition(this.getKeyByPosition(position), position);\n }\n\n /**\n * Handle the start of any mouse/touch event\n * @private\n * @return {void}\n */\n\n }, {\n key: 'handleInteractionStart',\n value: function handleInteractionStart() {\n if (this.props.onChangeStart) {\n this.props.onChangeStart(this.props.value);\n }\n\n if (this.props.onChangeComplete && !(0, _utils.isDefined)(this.startValue)) {\n this.startValue = this.props.value;\n }\n }\n\n /**\n * Handle the end of any mouse/touch event\n * @private\n * @return {void}\n */\n\n }, {\n key: 'handleInteractionEnd',\n value: function handleInteractionEnd() {\n if (!this.props.onChangeComplete || !(0, _utils.isDefined)(this.startValue)) {\n return;\n }\n\n if (this.startValue !== this.props.value) {\n this.props.onChangeComplete(this.props.value);\n }\n\n this.startValue = null;\n }\n\n /**\n * Handle any \"keydown\" event received by the component\n * @private\n * @param {SyntheticEvent} event\n * @return {void}\n */\n\n }, {\n key: 'handleKeyDown',\n value: function handleKeyDown(event) {\n this.handleInteractionStart(event);\n }\n\n /**\n * Handle any \"keyup\" event received by the component\n * @private\n * @param {SyntheticEvent} event\n * @return {void}\n */\n\n }, {\n key: 'handleKeyUp',\n value: function handleKeyUp(event) {\n this.handleInteractionEnd(event);\n }\n\n /**\n * Handle any \"mousedown\" event received by the component\n * @private\n * @param {SyntheticEvent} event\n * @return {void}\n */\n\n }, {\n key: 'handleMouseDown',\n value: function handleMouseDown(event) {\n this.handleInteractionStart(event);\n this.addDocumentMouseUpListener();\n }\n\n /**\n * Handle any \"mouseup\" event received by the component\n * @private\n * @param {SyntheticEvent} event\n */\n\n }, {\n key: 'handleMouseUp',\n value: function handleMouseUp(event) {\n this.handleInteractionEnd(event);\n this.removeDocumentMouseUpListener();\n }\n\n /**\n * Handle any \"touchstart\" event received by the component\n * @private\n * @param {SyntheticEvent} event\n * @return {void}\n */\n\n }, {\n key: 'handleTouchStart',\n value: function handleTouchStart(event) {\n this.handleInteractionStart(event);\n this.addDocumentTouchEndListener();\n }\n\n /**\n * Handle any \"touchend\" event received by the component\n * @private\n * @param {SyntheticEvent} event\n */\n\n }, {\n key: 'handleTouchEnd',\n value: function handleTouchEnd(event) {\n this.handleInteractionEnd(event);\n this.removeDocumentTouchEndListener();\n }\n\n /**\n * Return JSX of sliders\n * @private\n * @return {JSX.Element}\n */\n\n }, {\n key: 'renderSliders',\n value: function renderSliders() {\n var _this3 = this;\n\n var values = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n var percentages = valueTransformer.getPercentagesFromValues(values, this.props.minValue, this.props.maxValue);\n\n return this.getKeys().map(function (key) {\n var value = values[key];\n var percentage = percentages[key];\n\n var _props = _this3.props,\n maxValue = _props.maxValue,\n minValue = _props.minValue;\n\n\n if (key === 'min') {\n maxValue = values.max;\n } else {\n minValue = values.min;\n }\n\n var slider = _react2.default.createElement(_slider2.default, {\n ariaLabelledby: _this3.props.ariaLabelledby,\n ariaControls: _this3.props.ariaControls,\n classNames: _this3.props.classNames,\n formatLabel: _this3.props.formatLabel,\n key: key,\n maxValue: maxValue,\n minValue: minValue,\n onSliderDrag: _this3.handleSliderDrag,\n onSliderKeyDown: _this3.handleSliderKeyDown,\n percentage: percentage,\n type: key,\n value: value });\n\n return slider;\n });\n }\n\n /**\n * Return JSX of hidden inputs\n * @private\n * @return {JSX.Element}\n */\n\n }, {\n key: 'renderHiddenInputs',\n value: function renderHiddenInputs() {\n var _this4 = this;\n\n if (!this.props.name) {\n return [];\n }\n\n var isMultiValue = this.isMultiValue();\n var values = valueTransformer.getValueFromProps(this.props, isMultiValue);\n\n return this.getKeys().map(function (key) {\n var value = values[key];\n var name = isMultiValue ? '' + _this4.props.name + (0, _utils.captialize)(key) : _this4.props.name;\n\n return _react2.default.createElement('input', { key: key, type: 'hidden', name: name, value: value });\n });\n }\n\n /**\n * @ignore\n * @override\n * @return {JSX.Element}\n */\n\n }, {\n key: 'render',\n value: function render() {\n var _this5 = this;\n\n var componentClassName = this.getComponentClassName();\n var values = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n var percentages = valueTransformer.getPercentagesFromValues(values, this.props.minValue, this.props.maxValue);\n\n return _react2.default.createElement(\n 'div',\n {\n 'aria-disabled': this.props.disabled,\n ref: function ref(node) {\n _this5.node = node;\n },\n className: componentClassName,\n onKeyDown: this.handleKeyDown,\n onKeyUp: this.handleKeyUp,\n onMouseDown: this.handleMouseDown,\n onTouchStart: this.handleTouchStart },\n _react2.default.createElement(\n _label2.default,\n {\n classNames: this.props.classNames,\n formatLabel: this.props.formatLabel,\n type: 'min' },\n this.props.minValue\n ),\n _react2.default.createElement(\n _track2.default,\n {\n classNames: this.props.classNames,\n ref: function ref(trackNode) {\n _this5.trackNode = trackNode;\n },\n percentages: percentages,\n onTrackMouseDown: this.handleTrackMouseDown,\n isExternal: this.props.isExternal },\n this.renderSliders()\n ),\n _react2.default.createElement(\n _label2.default,\n {\n classNames: this.props.classNames,\n formatLabel: this.props.formatLabel,\n type: 'max' },\n this.props.maxValue\n ),\n this.renderHiddenInputs()\n );\n }\n }]);\n\n return InputRange;\n}(_react2.default.Component), (_applyDecoratedDescriptor(_class.prototype, 'handleSliderDrag', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleSliderDrag'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleSliderKeyDown', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleSliderKeyDown'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleTrackMouseDown', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleTrackMouseDown'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleInteractionStart', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleInteractionStart'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleInteractionEnd', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleInteractionEnd'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleKeyDown', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleKeyDown'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleKeyUp', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleKeyUp'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleMouseDown', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleMouseDown'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleMouseUp', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleMouseUp'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleTouchStart', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleTouchStart'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleTouchEnd', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleTouchEnd'), _class.prototype)), _class);\nexports.default = InputRange;\nmodule.exports = exports['default'];\n\n/***/ }),\n/* 8 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n/** @ignore */\nvar DOWN_ARROW = exports.DOWN_ARROW = 40;\n\n/** @ignore */\nvar LEFT_ARROW = exports.LEFT_ARROW = 37;\n\n/** @ignore */\nvar RIGHT_ARROW = exports.RIGHT_ARROW = 39;\n\n/** @ignore */\nvar UP_ARROW = exports.UP_ARROW = 38;\n\n/***/ }),\n/* 9 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = rangePropType;\n\nvar _utils = __webpack_require__(0);\n\n/**\n * @ignore\n * @param {Object} props - React component props\n * @return {?Error} Return Error if validation fails\n */\nfunction rangePropType(props) {\n var maxValue = props.maxValue,\n minValue = props.minValue;\n\n\n if (!(0, _utils.isNumber)(minValue) || !(0, _utils.isNumber)(maxValue)) {\n return new Error('\"minValue\" and \"maxValue\" must be a number');\n }\n\n if (minValue >= maxValue) {\n return new Error('\"minValue\" must be smaller than \"maxValue\"');\n }\n}\nmodule.exports = exports['default'];\n\n/***/ }),\n/* 10 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = undefined;\n\nvar _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; }; }();\n\nvar _desc, _value, _class;\n\nvar _react = __webpack_require__(1);\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _autobindDecorator = __webpack_require__(2);\n\nvar _autobindDecorator2 = _interopRequireDefault(_autobindDecorator);\n\nvar _label = __webpack_require__(3);\n\nvar _label2 = _interopRequireDefault(_label);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _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; }\n\nfunction _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; }\n\nfunction _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {\n var desc = {};\n Object['ke' + 'ys'](descriptor).forEach(function (key) {\n desc[key] = descriptor[key];\n });\n desc.enumerable = !!desc.enumerable;\n desc.configurable = !!desc.configurable;\n\n if ('value' in desc || desc.initializer) {\n desc.writable = true;\n }\n\n desc = decorators.slice().reverse().reduce(function (desc, decorator) {\n return decorator(target, property, desc) || desc;\n }, desc);\n\n if (context && desc.initializer !== void 0) {\n desc.value = desc.initializer ? desc.initializer.call(context) : void 0;\n desc.initializer = undefined;\n }\n\n if (desc.initializer === void 0) {\n Object['define' + 'Property'](target, property, desc);\n desc = null;\n }\n\n return desc;\n}\n\n/**\n * @ignore\n */\nvar Slider = (_class = function (_React$Component) {\n _inherits(Slider, _React$Component);\n\n _createClass(Slider, null, [{\n key: 'propTypes',\n\n /**\n * Accepted propTypes of Slider\n * @override\n * @return {Object}\n * @property {Function} ariaLabelledby\n * @property {Function} ariaControls\n * @property {Function} className\n * @property {Function} formatLabel\n * @property {Function} maxValue\n * @property {Function} minValue\n * @property {Function} onSliderDrag\n * @property {Function} onSliderKeyDown\n * @property {Function} percentage\n * @property {Function} type\n * @property {Function} value\n */\n get: function get() {\n return {\n ariaLabelledby: _react2.default.PropTypes.string,\n ariaControls: _react2.default.PropTypes.string,\n classNames: _react2.default.PropTypes.objectOf(_react2.default.PropTypes.string).isRequired,\n formatLabel: _react2.default.PropTypes.func,\n maxValue: _react2.default.PropTypes.number,\n minValue: _react2.default.PropTypes.number,\n onSliderDrag: _react2.default.PropTypes.func.isRequired,\n onSliderKeyDown: _react2.default.PropTypes.func.isRequired,\n percentage: _react2.default.PropTypes.number.isRequired,\n type: _react2.default.PropTypes.string.isRequired,\n value: _react2.default.PropTypes.number.isRequired\n };\n }\n\n /**\n * @param {Object} props\n * @param {string} [props.ariaLabelledby]\n * @param {string} [props.ariaControls]\n * @param {InputRangeClassNames} props.classNames\n * @param {Function} [props.formatLabel]\n * @param {number} [props.maxValue]\n * @param {number} [props.minValue]\n * @param {Function} props.onSliderKeyDown\n * @param {Function} props.onSliderDrag\n * @param {number} props.percentage\n * @param {number} props.type\n * @param {number} props.value\n */\n\n }]);\n\n function Slider(props) {\n _classCallCheck(this, Slider);\n\n /**\n * @private\n * @type {?Component}\n */\n var _this = _possibleConstructorReturn(this, (Slider.__proto__ || Object.getPrototypeOf(Slider)).call(this, props));\n\n _this.node = null;\n return _this;\n }\n\n /**\n * @ignore\n * @override\n * @return {void}\n */\n\n\n _createClass(Slider, [{\n key: 'componentWillUnmount',\n value: function componentWillUnmount() {\n this.removeDocumentMouseMoveListener();\n this.removeDocumentMouseUpListener();\n this.removeDocumentTouchEndListener();\n this.removeDocumentTouchMoveListener();\n }\n\n /**\n * @private\n * @return {Object}\n */\n\n }, {\n key: 'getStyle',\n value: function getStyle() {\n var perc = (this.props.percentage || 0) * 100;\n var style = {\n position: 'absolute',\n left: perc + '%'\n };\n\n return style;\n }\n\n /**\n * Listen to mousemove event\n * @private\n * @return {void}\n */\n\n }, {\n key: 'addDocumentMouseMoveListener',\n value: function addDocumentMouseMoveListener() {\n this.removeDocumentMouseMoveListener();\n this.node.ownerDocument.addEventListener('mousemove', this.handleMouseMove);\n }\n\n /**\n * Listen to mouseup event\n * @private\n * @return {void}\n */\n\n }, {\n key: 'addDocumentMouseUpListener',\n value: function addDocumentMouseUpListener() {\n this.removeDocumentMouseUpListener();\n this.node.ownerDocument.addEventListener('mouseup', this.handleMouseUp);\n }\n\n /**\n * Listen to touchmove event\n * @private\n * @return {void}\n */\n\n }, {\n key: 'addDocumentTouchMoveListener',\n value: function addDocumentTouchMoveListener() {\n this.removeDocumentTouchMoveListener();\n this.node.ownerDocument.addEventListener('touchmove', this.handleTouchMove);\n }\n\n /**\n * Listen to touchend event\n * @private\n * @return {void}\n */\n\n }, {\n key: 'addDocumentTouchEndListener',\n value: function addDocumentTouchEndListener() {\n this.removeDocumentTouchEndListener();\n this.node.ownerDocument.addEventListener('touchend', this.handleTouchEnd);\n }\n\n /**\n * @private\n * @return {void}\n */\n\n }, {\n key: 'removeDocumentMouseMoveListener',\n value: function removeDocumentMouseMoveListener() {\n this.node.ownerDocument.removeEventListener('mousemove', this.handleMouseMove);\n }\n\n /**\n * @private\n * @return {void}\n */\n\n }, {\n key: 'removeDocumentMouseUpListener',\n value: function removeDocumentMouseUpListener() {\n this.node.ownerDocument.removeEventListener('mouseup', this.handleMouseUp);\n }\n\n /**\n * @private\n * @return {void}\n */\n\n }, {\n key: 'removeDocumentTouchMoveListener',\n value: function removeDocumentTouchMoveListener() {\n this.node.ownerDocument.removeEventListener('touchmove', this.handleTouchMove);\n }\n\n /**\n * @private\n * @return {void}\n */\n\n }, {\n key: 'removeDocumentTouchEndListener',\n value: function removeDocumentTouchEndListener() {\n this.node.ownerDocument.removeEventListener('touchend', this.handleTouchUp);\n }\n\n /**\n * @private\n * @return {void}\n */\n\n }, {\n key: 'handleMouseDown',\n value: function handleMouseDown() {\n this.addDocumentMouseMoveListener();\n this.addDocumentMouseUpListener();\n }\n\n /**\n * @private\n * @return {void}\n */\n\n }, {\n key: 'handleMouseUp',\n value: function handleMouseUp() {\n this.removeDocumentMouseMoveListener();\n this.removeDocumentMouseUpListener();\n }\n\n /**\n * @private\n * @param {SyntheticEvent} event\n * @return {void}\n */\n\n }, {\n key: 'handleMouseMove',\n value: function handleMouseMove(event) {\n this.props.onSliderDrag(event, this.props.type);\n }\n\n /**\n * @private\n * @return {void}\n */\n\n }, {\n key: 'handleTouchStart',\n value: function handleTouchStart() {\n this.addDocumentTouchEndListener();\n this.addDocumentTouchMoveListener();\n }\n\n /**\n * @private\n * @param {SyntheticEvent} event\n * @return {void}\n */\n\n }, {\n key: 'handleTouchMove',\n value: function handleTouchMove(event) {\n this.props.onSliderDrag(event, this.props.type);\n }\n\n /**\n * @private\n * @return {void}\n */\n\n }, {\n key: 'handleTouchEnd',\n value: function handleTouchEnd() {\n this.removeDocumentTouchMoveListener();\n this.removeDocumentTouchEndListener();\n }\n\n /**\n * @private\n * @param {SyntheticEvent} event\n * @return {void}\n */\n\n }, {\n key: 'handleKeyDown',\n value: function handleKeyDown(event) {\n this.props.onSliderKeyDown(event, this.props.type);\n }\n\n /**\n * @override\n * @return {JSX.Element}\n */\n\n }, {\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n var style = this.getStyle();\n\n return _react2.default.createElement(\n 'span',\n {\n className: this.props.classNames.sliderContainer,\n ref: function ref(node) {\n _this2.node = node;\n },\n style: style },\n _react2.default.createElement(\n _label2.default,\n {\n classNames: this.props.classNames,\n formatLabel: this.props.formatLabel,\n type: 'value',\n markerType: 'track',\n markerValue: this.props.type },\n this.props.value\n ),\n _react2.default.createElement('div', {\n 'aria-labelledby': this.props.ariaLabelledby,\n 'aria-controls': this.props.ariaControls,\n 'aria-valuemax': this.props.maxValue,\n 'aria-valuemin': this.props.minValue,\n 'aria-valuenow': this.props.value,\n className: this.props.classNames.slider,\n draggable: 'false',\n onKeyDown: this.handleKeyDown,\n onMouseDown: this.handleMouseDown,\n onTouchStart: this.handleTouchStart,\n role: 'slider',\n tabIndex: '0' })\n );\n }\n }]);\n\n return Slider;\n}(_react2.default.Component), (_applyDecoratedDescriptor(_class.prototype, 'handleMouseDown', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleMouseDown'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleMouseUp', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleMouseUp'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleMouseMove', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleMouseMove'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleTouchStart', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleTouchStart'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleTouchMove', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleTouchMove'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleTouchEnd', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleTouchEnd'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleKeyDown', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleKeyDown'), _class.prototype)), _class);\nexports.default = Slider;\nmodule.exports = exports['default'];\n\n/***/ }),\n/* 11 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = undefined;\n\nvar _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; }; }();\n\nvar _desc, _value, _class;\n\nvar _react = __webpack_require__(1);\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _autobindDecorator = __webpack_require__(2);\n\nvar _autobindDecorator2 = _interopRequireDefault(_autobindDecorator);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _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; }\n\nfunction _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; }\n\nfunction _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {\n var desc = {};\n Object['ke' + 'ys'](descriptor).forEach(function (key) {\n desc[key] = descriptor[key];\n });\n desc.enumerable = !!desc.enumerable;\n desc.configurable = !!desc.configurable;\n\n if ('value' in desc || desc.initializer) {\n desc.writable = true;\n }\n\n desc = decorators.slice().reverse().reduce(function (desc, decorator) {\n return decorator(target, property, desc) || desc;\n }, desc);\n\n if (context && desc.initializer !== void 0) {\n desc.value = desc.initializer ? desc.initializer.call(context) : void 0;\n desc.initializer = undefined;\n }\n\n if (desc.initializer === void 0) {\n Object['define' + 'Property'](target, property, desc);\n desc = null;\n }\n\n return desc;\n}\n\n/**\n * @ignore\n */\nvar Track = (_class = function (_React$Component) {\n _inherits(Track, _React$Component);\n\n _createClass(Track, null, [{\n key: 'propTypes',\n\n /**\n * @override\n * @return {Object}\n * @property {Function} children\n * @property {Function} classNames\n * @property {Function} onTrackMouseDown\n * @property {Function} percentages\n */\n get: function get() {\n return {\n children: _react2.default.PropTypes.node.isRequired,\n classNames: _react2.default.PropTypes.objectOf(_react2.default.PropTypes.string).isRequired,\n onTrackMouseDown: _react2.default.PropTypes.func.isRequired,\n percentages: _react2.default.PropTypes.objectOf(_react2.default.PropTypes.number).isRequired,\n isExternal: _react2.default.PropTypes.bool.isRequired\n };\n }\n\n /**\n * @param {Object} props\n * @param {InputRangeClassNames} props.classNames\n * @param {Function} props.onTrackMouseDown\n * @param {number} props.percentages\n */\n\n }]);\n\n function Track(props) {\n _classCallCheck(this, Track);\n\n /**\n * @private\n * @type {?Component}\n */\n var _this = _possibleConstructorReturn(this, (Track.__proto__ || Object.getPrototypeOf(Track)).call(this, props));\n\n _this.node = null;\n return _this;\n }\n\n /**\n * @private\n * @return {ClientRect}\n */\n\n\n _createClass(Track, [{\n key: 'getClientRect',\n value: function getClientRect() {\n return this.node.getBoundingClientRect();\n }\n\n /**\n * @private\n * @return {Object} CSS styles\n */\n\n }, {\n key: 'getActiveTrackStyle',\n value: function getActiveTrackStyle() {\n var width = (this.props.percentages.max - this.props.percentages.min) * 100 + '%';\n var left = this.props.percentages.min * 100 + '%';\n\n return { left: left, width: width };\n }\n\n /**\n * @private\n * @return {Object} CSS styles\n */\n\n }, {\n key: 'getActiveTrackStylePre',\n value: function getActiveTrackStylePre() {\n var width = this.props.percentages.min * 100 + '%';\n var left = '0';\n var float = 'left';\n return { left: left, width: width, float: float };\n }\n\n /**\n * @private\n * @return {Object} CSS styles\n */\n\n }, {\n key: 'getActiveTrackStylePost',\n value: function getActiveTrackStylePost() {\n var width = (1 - this.props.percentages.max) * 100 + '%';\n var left = this.props.percentages.max * 100 + '%';\n\n return { left: left, width: width };\n }\n\n /**\n * @private\n * @param {SyntheticEvent} event - User event\n */\n\n }, {\n key: 'handleMouseDown',\n value: function handleMouseDown(event) {\n var clientX = event.touches ? event.touches[0].clientX : event.clientX;\n var trackClientRect = this.getClientRect();\n var position = {\n x: clientX - trackClientRect.left,\n y: 0\n };\n\n this.props.onTrackMouseDown(event, position);\n }\n\n /**\n * @private\n * @param {SyntheticEvent} event - User event\n */\n\n }, {\n key: 'handleTouchStart',\n value: function handleTouchStart(event) {\n event.preventDefault();\n\n this.handleMouseDown(event);\n }\n\n /**\n * @override\n * @return {JSX.Element}\n */\n\n }, {\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n var activeTrackStyle = this.getActiveTrackStyle();\n var activeTrackStyleExternalPre = this.getActiveTrackStylePre();\n var activeTrackStyleExternalPost = this.getActiveTrackStylePost();\n\n return _react2.default.createElement(\n 'div',\n {\n className: this.props.classNames.track,\n onMouseDown: this.handleMouseDown,\n onTouchStart: this.handleTouchStart,\n ref: function ref(node) {\n _this2.node = node;\n } },\n !this.props.isExternal ? _react2.default.createElement('div', {\n style: activeTrackStyle,\n className: this.props.classNames.activeTrack }) : _react2.default.createElement(\n 'div',\n null,\n _react2.default.createElement('div', {\n style: activeTrackStyleExternalPre,\n className: this.props.classNames.activeTrack }),\n _react2.default.createElement('div', {\n style: activeTrackStyleExternalPost,\n className: this.props.classNames.activeTrack })\n ),\n this.props.children\n );\n }\n }]);\n\n return Track;\n}(_react2.default.Component), (_applyDecoratedDescriptor(_class.prototype, 'getActiveTrackStylePre', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'getActiveTrackStylePre'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'getActiveTrackStylePost', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'getActiveTrackStylePost'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleMouseDown', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleMouseDown'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleTouchStart', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleTouchStart'), _class.prototype)), _class);\nexports.default = Track;\nmodule.exports = exports['default'];\n\n/***/ }),\n/* 12 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = valuePropType;\n\nvar _utils = __webpack_require__(0);\n\n/**\n * @ignore\n * @param {Object} props\n * @return {?Error} Return Error if validation fails\n */\nfunction valuePropType(props, propName) {\n var maxValue = props.maxValue,\n minValue = props.minValue;\n\n var value = props[propName];\n\n if (!(0, _utils.isNumber)(value) && (!(0, _utils.isObject)(value) || !(0, _utils.isNumber)(value.min) || !(0, _utils.isNumber)(value.max))) {\n return new Error('\"' + propName + '\" must be a number or a range object');\n }\n\n if ((0, _utils.isNumber)(value) && (value < minValue || value > maxValue)) {\n return new Error('\"' + propName + '\" must be in between \"minValue\" and \"maxValue\"');\n }\n\n if ((0, _utils.isObject)(value) && (value.min < minValue || value.min > maxValue || value.max < minValue || value.max > maxValue)) {\n return new Error('\"' + propName + '\" must be in between \"minValue\" and \"maxValue\"');\n }\n}\nmodule.exports = exports['default'];\n\n/***/ }),\n/* 13 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nexports.getPercentageFromPosition = getPercentageFromPosition;\nexports.getValueFromPosition = getValueFromPosition;\nexports.getValueFromProps = getValueFromProps;\nexports.getPercentageFromValue = getPercentageFromValue;\nexports.getPercentagesFromValues = getPercentagesFromValues;\nexports.getPositionFromValue = getPositionFromValue;\nexports.getPositionsFromValues = getPositionsFromValues;\nexports.getPositionFromEvent = getPositionFromEvent;\nexports.getStepValueFromValue = getStepValueFromValue;\n\nvar _utils = __webpack_require__(0);\n\n/**\n * Convert a point into a percentage value\n * @ignore\n * @param {Point} position\n * @param {ClientRect} clientRect\n * @return {number} Percentage value\n */\nfunction getPercentageFromPosition(position, clientRect) {\n var length = clientRect.width;\n var sizePerc = position.x / length;\n\n return sizePerc || 0;\n}\n\n/**\n * Convert a point into a model value\n * @ignore\n * @param {Point} position\n * @param {number} minValue\n * @param {number} maxValue\n * @param {ClientRect} clientRect\n * @return {number}\n */\nfunction getValueFromPosition(position, minValue, maxValue, clientRect) {\n var sizePerc = getPercentageFromPosition(position, clientRect);\n var valueDiff = maxValue - minValue;\n\n return minValue + valueDiff * sizePerc;\n}\n\n/**\n * Convert props into a range value\n * @ignore\n * @param {Object} props\n * @param {boolean} isMultiValue\n * @return {Range}\n */\nfunction getValueFromProps(props, isMultiValue) {\n if (isMultiValue) {\n return _extends({}, props.value);\n }\n\n return {\n min: props.minValue,\n max: props.value\n };\n}\n\n/**\n * Convert a model value into a percentage value\n * @ignore\n * @param {number} value\n * @param {number} minValue\n * @param {number} maxValue\n * @return {number}\n */\nfunction getPercentageFromValue(value, minValue, maxValue) {\n var validValue = (0, _utils.clamp)(value, minValue, maxValue);\n var valueDiff = maxValue - minValue;\n var valuePerc = (validValue - minValue) / valueDiff;\n\n return valuePerc || 0;\n}\n\n/**\n * Convert model values into percentage values\n * @ignore\n * @param {Range} values\n * @param {number} minValue\n * @param {number} maxValue\n * @return {Range}\n */\nfunction getPercentagesFromValues(values, minValue, maxValue) {\n return {\n min: getPercentageFromValue(values.min, minValue, maxValue),\n max: getPercentageFromValue(values.max, minValue, maxValue)\n };\n}\n\n/**\n * Convert a value into a point\n * @ignore\n * @param {number} value\n * @param {number} minValue\n * @param {number} maxValue\n * @param {ClientRect} clientRect\n * @return {Point} Position\n */\nfunction getPositionFromValue(value, minValue, maxValue, clientRect) {\n var length = clientRect.width;\n var valuePerc = getPercentageFromValue(value, minValue, maxValue);\n var positionValue = valuePerc * length;\n\n return {\n x: positionValue,\n y: 0\n };\n}\n\n/**\n * Convert a range of values into points\n * @ignore\n * @param {Range} values\n * @param {number} minValue\n * @param {number} maxValue\n * @param {ClientRect} clientRect\n * @return {Range}\n */\nfunction getPositionsFromValues(values, minValue, maxValue, clientRect) {\n return {\n min: getPositionFromValue(values.min, minValue, maxValue, clientRect),\n max: getPositionFromValue(values.max, minValue, maxValue, clientRect)\n };\n}\n\n/**\n * Convert an event into a point\n * @ignore\n * @param {Event} event\n * @param {ClientRect} clientRect\n * @return {Point}\n */\nfunction getPositionFromEvent(event, clientRect) {\n var length = clientRect.width;\n\n var _ref = event.touches ? event.touches[0] : event,\n clientX = _ref.clientX;\n\n return {\n x: (0, _utils.clamp)(clientX - clientRect.left, 0, length),\n y: 0\n };\n}\n\n/**\n * Convert a value into a step value\n * @ignore\n * @param {number} value\n * @param {number} valuePerStep\n * @return {number}\n */\nfunction getStepValueFromValue(value, valuePerStep) {\n return Math.round(value / valuePerStep) * valuePerStep;\n}\n\n/***/ }),\n/* 14 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = captialize;\n/**\n * Captialize a string\n * @ignore\n * @param {string} string\n * @return {string}\n */\nfunction captialize(string) {\n return string.charAt(0).toUpperCase() + string.slice(1);\n}\nmodule.exports = exports[\"default\"];\n\n/***/ }),\n/* 15 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = clamp;\n/**\n * Clamp a value between a min and max value\n * @ignore\n * @param {number} value\n * @param {number} min\n * @param {number} max\n * @return {number}\n */\nfunction clamp(value, min, max) {\n return Math.min(Math.max(value, min), max);\n}\nmodule.exports = exports[\"default\"];\n\n/***/ }),\n/* 16 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = distanceTo;\n/**\n * Calculate the distance between pointA and pointB\n * @ignore\n * @param {Point} pointA\n * @param {Point} pointB\n * @return {number} Distance\n */\nfunction distanceTo(pointA, pointB) {\n var xDiff = Math.pow(pointB.x - pointA.x, 2);\n var yDiff = Math.pow(pointB.y - pointA.y, 2);\n\n return Math.sqrt(xDiff + yDiff);\n}\nmodule.exports = exports[\"default\"];\n\n/***/ }),\n/* 17 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = isDefined;\n/**\n * Check if a value is defined\n * @ignore\n * @param {*} value\n * @return {boolean}\n */\nfunction isDefined(value) {\n return value !== undefined && value !== null;\n}\nmodule.exports = exports[\"default\"];\n\n/***/ }),\n/* 18 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = isNumber;\n/**\n * Check if a value is a number\n * @ignore\n * @param {*} value\n * @return {boolean}\n */\nfunction isNumber(value) {\n return typeof value === 'number';\n}\nmodule.exports = exports['default'];\n\n/***/ }),\n/* 19 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _typeof = typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; };\n\nexports.default = isObject;\n/**\n * Check if a value is an object\n * @ignore\n * @param {*} value\n * @return {boolean}\n */\nfunction isObject(value) {\n return value !== null && (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object';\n}\nmodule.exports = exports['default'];\n\n/***/ }),\n/* 20 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = length;\n/**\n * Calculate the absolute difference between two numbers\n * @ignore\n * @param {number} numA\n * @param {number} numB\n * @return {number}\n */\nfunction length(numA, numB) {\n return Math.abs(numA - numB);\n}\nmodule.exports = exports[\"default\"];\n\n/***/ })\n/******/ ]);\n});\n\n\n// WEBPACK FOOTER //\n// react-input-range.min.js"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// identity function for calling harmony imports with the correct context\n \t__webpack_require__.i = function(value) { return value; };\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 5);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 6af9e803c14c83c10faf","export { default as captialize } from './captialize';\nexport { default as clamp } from './clamp';\nexport { default as distanceTo } from './distance-to';\nexport { default as isDefined } from './is-defined';\nexport { default as isNumber } from './is-number';\nexport { default as isObject } from './is-object';\nexport { default as length } from './length';\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/utils/index.js","module.exports = __WEBPACK_EXTERNAL_MODULE_1__;\n\n\n//////////////////\n// WEBPACK FOOTER\n// external {\"amd\":\"react\",\"commonjs\":\"react\",\"commonjs2\":\"react\",\"root\":\"React\"}\n// module id = 1\n// module chunks = 0 1","/**\n * @copyright 2015, Andrey Popp <8mayday@gmail.com>\n *\n * The decorator may be used on classes or methods\n * ```\n * @autobind\n * class FullBound {}\n *\n * class PartBound {\n * @autobind\n * method () {}\n * }\n * ```\n */\n'use strict';\n\nObject.defineProperty(exports, '__esModule', {\n value: true\n});\nexports['default'] = autobind;\n\nfunction autobind() {\n for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n if (args.length === 1) {\n return boundClass.apply(undefined, args);\n } else {\n return boundMethod.apply(undefined, args);\n }\n}\n\n/**\n * Use boundMethod to bind all methods on the target.prototype\n */\nfunction boundClass(target) {\n // (Using reflect to get all keys including symbols)\n var keys = undefined;\n // Use Reflect if exists\n if (typeof Reflect !== 'undefined' && typeof Reflect.ownKeys === 'function') {\n keys = Reflect.ownKeys(target.prototype);\n } else {\n keys = Object.getOwnPropertyNames(target.prototype);\n // use symbols if support is provided\n if (typeof Object.getOwnPropertySymbols === 'function') {\n keys = keys.concat(Object.getOwnPropertySymbols(target.prototype));\n }\n }\n\n keys.forEach(function (key) {\n // Ignore special case target method\n if (key === 'constructor') {\n return;\n }\n\n var descriptor = Object.getOwnPropertyDescriptor(target.prototype, key);\n\n // Only methods need binding\n if (typeof descriptor.value === 'function') {\n Object.defineProperty(target.prototype, key, boundMethod(target, key, descriptor));\n }\n });\n return target;\n}\n\n/**\n * Return a descriptor removing the value and returning a getter\n * The getter will return a .bind version of the function\n * and memoize the result against a symbol on the instance\n */\nfunction boundMethod(target, key, descriptor) {\n var fn = descriptor.value;\n\n if (typeof fn !== 'function') {\n throw new Error('@autobind decorator can only be applied to methods not: ' + typeof fn);\n }\n\n // In IE11 calling Object.defineProperty has a side-effect of evaluating the\n // getter for the property which is being replaced. This causes infinite\n // recursion and an \"Out of stack space\" error.\n var definingProperty = false;\n\n return {\n configurable: true,\n get: function get() {\n if (definingProperty || this === target.prototype || this.hasOwnProperty(key)) {\n return fn;\n }\n\n var boundFn = fn.bind(this);\n definingProperty = true;\n Object.defineProperty(this, key, {\n value: boundFn,\n configurable: true,\n writable: true\n });\n definingProperty = false;\n return boundFn;\n }\n };\n}\nmodule.exports = exports['default'];\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/autobind-decorator/lib/index.js\n// module id = 2\n// module chunks = 0 1","import React from 'react';\n\n/**\n * @ignore\n * @param {Object} props\n * @param {InputRangeClassNames} props.classNames\n * @param {Function} props.formatLabel\n * @param {string} props.type\n */\nexport default function Label(props) {\n const labelValue = props.formatLabel ? props.formatLabel(props.children, props.type) : props.children;\n const labelClassName = props.markerType === 'track' ? `${props.classNames.labelContainer} marker-${props.markerValue}` : props.classNames.labelContainer;\n return (\n \n \n {labelValue}\n \n \n );\n}\n\n/**\n * @type {Object}\n * @property {Function} children\n * @property {Function} classNames\n * @property {Function} formatLabel\n * @property {Function} type\n */\nLabel.propTypes = {\n children: React.PropTypes.node.isRequired,\n classNames: React.PropTypes.objectOf(React.PropTypes.string).isRequired,\n formatLabel: React.PropTypes.func,\n type: React.PropTypes.string.isRequired,\n markerType: React.PropTypes.string,\n markerValue: React.PropTypes.string,\n\n};\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/input-range/label.jsx","export { default as InputRange } from './input-range';\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/input-range/index.js","import { InputRange } from './input-range';\n\n/**\n * @ignore\n * @typedef {Object} ClientRect\n * @property {number} height\n * @property {number} left\n * @property {number} top\n * @property {number} width\n */\n\n/**\n * @typedef {Object} InputRangeClassNames\n * @property {string} activeTrack\n * @property {string} disabledInputRange\n * @property {string} inputRange\n * @property {string} labelContainer\n * @property {string} maxLabel\n * @property {string} minLabel\n * @property {string} slider\n * @property {string} sliderContainer\n * @property {string} track\n * @property {string} valueLabel\n */\n\n/**\n * @typedef {Function} LabelFormatter\n * @param {number} value\n * @param {string} type\n * @return {string}\n */\n\n/**\n * @ignore\n * @typedef {Object} Point\n * @property {number} x\n * @property {number} y\n */\n\n/**\n * @typedef {Object} Range\n * @property {number} min - Min value\n * @property {number} max - Max value\n */\n\nexport default InputRange;\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/index.js","/**\n* Default CSS class names\n* @ignore\n* @type {InputRangeClassNames}\n*/\nconst DEFAULT_CLASS_NAMES = {\n activeTrack: 'input-range__track input-range__track--active',\n disabledInputRange: 'input-range input-range--disabled',\n inputRange: 'input-range',\n labelContainer: 'input-range__label-container',\n maxLabel: 'input-range__label input-range__label--max',\n minLabel: 'input-range__label input-range__label--min',\n slider: 'input-range__slider',\n sliderContainer: 'input-range__slider-container',\n track: 'input-range__track input-range__track--background',\n valueLabel: 'input-range__label input-range__label--value',\n};\n\nexport default DEFAULT_CLASS_NAMES;\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/input-range/default-class-names.js","import React from 'react';\nimport autobind from 'autobind-decorator';\nimport * as valueTransformer from './value-transformer';\nimport DEFAULT_CLASS_NAMES from './default-class-names';\nimport Label from './label';\nimport rangePropType from './range-prop-type';\nimport valuePropType from './value-prop-type';\nimport Slider from './slider';\nimport Track from './track';\nimport { captialize, distanceTo, isDefined, isObject, length } from '../utils';\nimport { DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, UP_ARROW } from './key-codes';\n\n/**\n * A React component that allows users to input numeric values within a range\n * by dragging its sliders.\n */\nexport default class InputRange extends React.Component {\n /**\n * @ignore\n * @override\n * @return {Object}\n */\n static get propTypes() {\n return {\n ariaLabelledby: React.PropTypes.string,\n ariaControls: React.PropTypes.string,\n classNames: React.PropTypes.objectOf(React.PropTypes.string),\n disabled: React.PropTypes.bool,\n formatLabel: React.PropTypes.func,\n isExternal: React.PropTypes.bool,\n maxValue: rangePropType,\n minValue: rangePropType,\n name: React.PropTypes.string,\n onChangeStart: React.PropTypes.func,\n onChange: React.PropTypes.func.isRequired,\n onChangeComplete: React.PropTypes.func,\n step: React.PropTypes.number,\n value: valuePropType,\n };\n }\n\n /**\n * @ignore\n * @override\n * @return {Object}\n */\n static get defaultProps() {\n return {\n classNames: DEFAULT_CLASS_NAMES,\n disabled: false,\n maxValue: 10,\n minValue: 0,\n step: 1,\n isExternal: false,\n };\n }\n\n /**\n * @param {Object} props\n * @param {string} [props.ariaLabelledby]\n * @param {string} [props.ariaControls]\n * @param {InputRangeClassNames} [props.classNames]\n * @param {boolean} [props.disabled = false]\n * @param {Function} [props.formatLabel]\n * @param {number|Range} [props.maxValue = 10]\n * @param {number|Range} [props.minValue = 0]\n * @param {string} [props.name]\n * @param {string} props.onChange\n * @param {Function} [props.onChangeComplete]\n * @param {Function} [props.onChangeStart]\n * @param {number} [props.step = 1]\n * @param {number|Range} props.value\n */\n constructor(props) {\n super(props);\n\n /**\n * @private\n * @type {?number}\n */\n this.startValue = null;\n\n /**\n * @private\n * @type {?Component}\n */\n this.node = null;\n\n /**\n * @private\n * @type {?Component}\n */\n this.trackNode = null;\n }\n\n /**\n * @ignore\n * @override\n * @return {void}\n */\n componentWillUnmount() {\n this.removeDocumentMouseUpListener();\n this.removeDocumentTouchEndListener();\n }\n\n /**\n * Return the CSS class name of the component\n * @private\n * @return {string}\n */\n getComponentClassName() {\n if (!this.props.disabled) {\n return this.props.classNames.inputRange;\n }\n\n return this.props.classNames.disabledInputRange;\n }\n\n /**\n * Return the bounding rect of the track\n * @private\n * @return {ClientRect}\n */\n getTrackClientRect() {\n return this.trackNode.getClientRect();\n }\n\n /**\n * Return the slider key closest to a point\n * @private\n * @param {Point} position\n * @return {string}\n */\n getKeyByPosition(position) {\n const values = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n const positions = valueTransformer.getPositionsFromValues(values, this.props.minValue, this.props.maxValue, this.getTrackClientRect());\n\n if (this.isMultiValue()) {\n const distanceToMin = distanceTo(position, positions.min);\n const distanceToMax = distanceTo(position, positions.max);\n\n if (distanceToMin < distanceToMax) {\n return 'min';\n }\n }\n\n return 'max';\n }\n\n /**\n * Return all the slider keys\n * @private\n * @return {string[]}\n */\n getKeys() {\n if (this.isMultiValue()) {\n return ['min', 'max'];\n }\n\n return ['max'];\n }\n\n /**\n * Return true if the difference between the new and the current value is\n * greater or equal to the step amount of the component\n * @private\n * @param {Range} values\n * @return {boolean}\n */\n hasStepDifference(values) {\n const currentValues = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n\n return length(values.min, currentValues.min) >= this.props.step ||\n length(values.max, currentValues.max) >= this.props.step;\n }\n\n /**\n * Return true if the component accepts a min and max value\n * @private\n * @return {boolean}\n */\n isMultiValue() {\n return isObject(this.props.value);\n }\n\n /**\n * Return true if the range is within the max and min value of the component\n * @private\n * @param {Range} values\n * @return {boolean}\n */\n isWithinRange(values) {\n if (this.isMultiValue()) {\n return values.min >= this.props.minValue &&\n values.max <= this.props.maxValue &&\n values.min < values.max;\n }\n\n return values.max >= this.props.minValue && values.max <= this.props.maxValue;\n }\n\n /**\n * Return true if the new value should trigger a render\n * @private\n * @param {Range} values\n * @return {boolean}\n */\n shouldUpdate(values) {\n return this.isWithinRange(values) && this.hasStepDifference(values);\n }\n\n /**\n * Update the position of a slider\n * @private\n * @param {string} key\n * @param {Point} position\n * @return {void}\n */\n updatePosition(key, position) {\n const values = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n const positions = valueTransformer.getPositionsFromValues(values, this.props.minValue, this.props.maxValue, this.getTrackClientRect());\n\n positions[key] = position;\n\n this.updatePositions(positions);\n }\n\n /**\n * Update the positions of multiple sliders\n * @private\n * @param {Object} positions\n * @param {Point} positions.min\n * @param {Point} positions.max\n * @return {void}\n */\n updatePositions(positions) {\n const values = {\n min: valueTransformer.getValueFromPosition(positions.min, this.props.minValue, this.props.maxValue, this.getTrackClientRect()),\n max: valueTransformer.getValueFromPosition(positions.max, this.props.minValue, this.props.maxValue, this.getTrackClientRect()),\n };\n\n const transformedValues = {\n min: valueTransformer.getStepValueFromValue(values.min, this.props.step),\n max: valueTransformer.getStepValueFromValue(values.max, this.props.step),\n };\n\n this.updateValues(transformedValues);\n }\n\n /**\n * Update the value of a slider\n * @private\n * @param {string} key\n * @param {number} value\n * @return {void}\n */\n updateValue(key, value) {\n const values = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n\n values[key] = value;\n\n this.updateValues(values);\n }\n\n /**\n * Update the values of multiple sliders\n * @private\n * @param {Range|number} values\n * @return {void}\n */\n updateValues(values) {\n if (!this.shouldUpdate(values)) {\n return;\n }\n\n this.props.onChange(this.isMultiValue() ? values : values.max);\n }\n\n /**\n * Increment the value of a slider by key name\n * @private\n * @param {string} key\n * @return {void}\n */\n incrementValue(key) {\n const values = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n const value = values[key] + this.props.step;\n\n this.updateValue(key, value);\n }\n\n /**\n * Decrement the value of a slider by key name\n * @private\n * @param {string} key\n * @return {void}\n */\n decrementValue(key) {\n const values = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n const value = values[key] - this.props.step;\n\n this.updateValue(key, value);\n }\n\n /**\n * Listen to mouseup event\n * @private\n * @return {void}\n */\n addDocumentMouseUpListener() {\n this.removeDocumentMouseUpListener();\n this.node.ownerDocument.addEventListener('mouseup', this.handleMouseUp);\n }\n\n /**\n * Listen to touchend event\n * @private\n * @return {void}\n */\n addDocumentTouchEndListener() {\n this.removeDocumentTouchEndListener();\n this.node.ownerDocument.addEventListener('touchend', this.handleTouchEnd);\n }\n\n /**\n * Stop listening to mouseup event\n * @private\n * @return {void}\n */\n removeDocumentMouseUpListener() {\n this.node.ownerDocument.removeEventListener('mouseup', this.handleMouseUp);\n }\n\n /**\n * Stop listening to touchend event\n * @private\n * @return {void}\n */\n removeDocumentTouchEndListener() {\n this.node.ownerDocument.removeEventListener('touchend', this.handleTouchEnd);\n }\n\n /**\n * Handle any \"mousemove\" event received by the slider\n * @private\n * @param {SyntheticEvent} event\n * @param {string} key\n * @return {void}\n */\n @autobind\n handleSliderDrag(event, key) {\n if (this.props.disabled) {\n return;\n }\n\n const position = valueTransformer.getPositionFromEvent(event, this.getTrackClientRect());\n\n requestAnimationFrame(() => this.updatePosition(key, position));\n }\n\n /**\n * Handle any \"keydown\" event received by the slider\n * @private\n * @param {SyntheticEvent} event\n * @param {string} key\n * @return {void}\n */\n @autobind\n handleSliderKeyDown(event, key) {\n if (this.props.disabled) {\n return;\n }\n\n switch (event.keyCode) {\n case LEFT_ARROW:\n case DOWN_ARROW:\n event.preventDefault();\n this.decrementValue(key);\n break;\n\n case RIGHT_ARROW:\n case UP_ARROW:\n event.preventDefault();\n this.incrementValue(key);\n break;\n\n default:\n break;\n }\n }\n\n /**\n * Handle any \"mousedown\" event received by the track\n * @private\n * @param {SyntheticEvent} event\n * @param {Point} position\n * @return {void}\n */\n @autobind\n handleTrackMouseDown(event, position) {\n if (this.props.disabled) {\n return;\n }\n\n event.preventDefault();\n\n this.updatePosition(this.getKeyByPosition(position), position);\n }\n\n /**\n * Handle the start of any mouse/touch event\n * @private\n * @return {void}\n */\n @autobind\n handleInteractionStart() {\n if (this.props.onChangeStart) {\n this.props.onChangeStart(this.props.value);\n }\n\n if (this.props.onChangeComplete && !isDefined(this.startValue)) {\n this.startValue = this.props.value;\n }\n }\n\n /**\n * Handle the end of any mouse/touch event\n * @private\n * @return {void}\n */\n @autobind\n handleInteractionEnd() {\n if (!this.props.onChangeComplete || !isDefined(this.startValue)) {\n return;\n }\n\n if (this.startValue !== this.props.value) {\n this.props.onChangeComplete(this.props.value);\n }\n\n this.startValue = null;\n }\n\n /**\n * Handle any \"keydown\" event received by the component\n * @private\n * @param {SyntheticEvent} event\n * @return {void}\n */\n @autobind\n handleKeyDown(event) {\n this.handleInteractionStart(event);\n }\n\n /**\n * Handle any \"keyup\" event received by the component\n * @private\n * @param {SyntheticEvent} event\n * @return {void}\n */\n @autobind\n handleKeyUp(event) {\n this.handleInteractionEnd(event);\n }\n\n /**\n * Handle any \"mousedown\" event received by the component\n * @private\n * @param {SyntheticEvent} event\n * @return {void}\n */\n @autobind\n handleMouseDown(event) {\n this.handleInteractionStart(event);\n this.addDocumentMouseUpListener();\n }\n\n /**\n * Handle any \"mouseup\" event received by the component\n * @private\n * @param {SyntheticEvent} event\n */\n @autobind\n handleMouseUp(event) {\n this.handleInteractionEnd(event);\n this.removeDocumentMouseUpListener();\n }\n\n /**\n * Handle any \"touchstart\" event received by the component\n * @private\n * @param {SyntheticEvent} event\n * @return {void}\n */\n @autobind\n handleTouchStart(event) {\n this.handleInteractionStart(event);\n this.addDocumentTouchEndListener();\n }\n\n /**\n * Handle any \"touchend\" event received by the component\n * @private\n * @param {SyntheticEvent} event\n */\n @autobind\n handleTouchEnd(event) {\n this.handleInteractionEnd(event);\n this.removeDocumentTouchEndListener();\n }\n\n /**\n * Return JSX of sliders\n * @private\n * @return {JSX.Element}\n */\n renderSliders() {\n const values = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n const percentages = valueTransformer.getPercentagesFromValues(values, this.props.minValue, this.props.maxValue);\n\n return this.getKeys().map((key) => {\n const value = values[key];\n const percentage = percentages[key];\n\n let { maxValue, minValue } = this.props;\n\n if (key === 'min') {\n maxValue = values.max;\n } else {\n minValue = values.min;\n }\n\n const slider = (\n \n );\n\n return slider;\n });\n }\n\n /**\n * Return JSX of hidden inputs\n * @private\n * @return {JSX.Element}\n */\n renderHiddenInputs() {\n if (!this.props.name) {\n return [];\n }\n\n const isMultiValue = this.isMultiValue();\n const values = valueTransformer.getValueFromProps(this.props, isMultiValue);\n\n return this.getKeys().map((key) => {\n const value = values[key];\n const name = isMultiValue ? `${this.props.name}${captialize(key)}` : this.props.name;\n\n return (\n \n );\n });\n }\n\n /**\n * @ignore\n * @override\n * @return {JSX.Element}\n */\n render() {\n const componentClassName = this.getComponentClassName();\n const values = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n const percentages = valueTransformer.getPercentagesFromValues(values, this.props.minValue, this.props.maxValue);\n\n return (\n { this.node = node; }}\n className={componentClassName}\n onKeyDown={this.handleKeyDown}\n onKeyUp={this.handleKeyUp}\n onMouseDown={this.handleMouseDown}\n onTouchStart={this.handleTouchStart}>\n \n {this.props.minValue}\n \n\n { this.trackNode = trackNode; }}\n percentages={percentages}\n onTrackMouseDown={this.handleTrackMouseDown}\n isExternal={this.props.isExternal} >\n {this.renderSliders()}\n \n\n \n {this.props.maxValue}\n \n\n {this.renderHiddenInputs()}\n \n );\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/input-range/input-range.jsx","/** @ignore */\nexport const DOWN_ARROW = 40;\n\n/** @ignore */\nexport const LEFT_ARROW = 37;\n\n/** @ignore */\nexport const RIGHT_ARROW = 39;\n\n/** @ignore */\nexport const UP_ARROW = 38;\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/input-range/key-codes.js","import { isNumber } from '../utils';\n\n/**\n * @ignore\n * @param {Object} props - React component props\n * @return {?Error} Return Error if validation fails\n */\nexport default function rangePropType(props) {\n const { maxValue, minValue } = props;\n\n if (!isNumber(minValue) || !isNumber(maxValue)) {\n return new Error('\"minValue\" and \"maxValue\" must be a number');\n }\n\n if (minValue >= maxValue) {\n return new Error('\"minValue\" must be smaller than \"maxValue\"');\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/input-range/range-prop-type.js","import React from 'react';\nimport autobind from 'autobind-decorator';\nimport Label from './label';\n\n/**\n * @ignore\n */\nexport default class Slider extends React.Component {\n /**\n * Accepted propTypes of Slider\n * @override\n * @return {Object}\n * @property {Function} ariaLabelledby\n * @property {Function} ariaControls\n * @property {Function} className\n * @property {Function} formatLabel\n * @property {Function} maxValue\n * @property {Function} minValue\n * @property {Function} onSliderDrag\n * @property {Function} onSliderKeyDown\n * @property {Function} percentage\n * @property {Function} type\n * @property {Function} value\n */\n static get propTypes() {\n return {\n ariaLabelledby: React.PropTypes.string,\n ariaControls: React.PropTypes.string,\n classNames: React.PropTypes.objectOf(React.PropTypes.string).isRequired,\n formatLabel: React.PropTypes.func,\n maxValue: React.PropTypes.number,\n minValue: React.PropTypes.number,\n onSliderDrag: React.PropTypes.func.isRequired,\n onSliderKeyDown: React.PropTypes.func.isRequired,\n percentage: React.PropTypes.number.isRequired,\n type: React.PropTypes.string.isRequired,\n value: React.PropTypes.number.isRequired,\n };\n }\n\n /**\n * @param {Object} props\n * @param {string} [props.ariaLabelledby]\n * @param {string} [props.ariaControls]\n * @param {InputRangeClassNames} props.classNames\n * @param {Function} [props.formatLabel]\n * @param {number} [props.maxValue]\n * @param {number} [props.minValue]\n * @param {Function} props.onSliderKeyDown\n * @param {Function} props.onSliderDrag\n * @param {number} props.percentage\n * @param {number} props.type\n * @param {number} props.value\n */\n constructor(props) {\n super(props);\n\n /**\n * @private\n * @type {?Component}\n */\n this.node = null;\n }\n\n /**\n * @ignore\n * @override\n * @return {void}\n */\n componentWillUnmount() {\n this.removeDocumentMouseMoveListener();\n this.removeDocumentMouseUpListener();\n this.removeDocumentTouchEndListener();\n this.removeDocumentTouchMoveListener();\n }\n\n /**\n * @private\n * @return {Object}\n */\n getStyle() {\n const perc = (this.props.percentage || 0) * 100;\n const style = {\n position: 'absolute',\n left: `${perc}%`,\n };\n\n return style;\n }\n\n /**\n * Listen to mousemove event\n * @private\n * @return {void}\n */\n addDocumentMouseMoveListener() {\n this.removeDocumentMouseMoveListener();\n this.node.ownerDocument.addEventListener('mousemove', this.handleMouseMove);\n }\n\n /**\n * Listen to mouseup event\n * @private\n * @return {void}\n */\n addDocumentMouseUpListener() {\n this.removeDocumentMouseUpListener();\n this.node.ownerDocument.addEventListener('mouseup', this.handleMouseUp);\n }\n\n /**\n * Listen to touchmove event\n * @private\n * @return {void}\n */\n addDocumentTouchMoveListener() {\n this.removeDocumentTouchMoveListener();\n this.node.ownerDocument.addEventListener('touchmove', this.handleTouchMove);\n }\n\n /**\n * Listen to touchend event\n * @private\n * @return {void}\n */\n addDocumentTouchEndListener() {\n this.removeDocumentTouchEndListener();\n this.node.ownerDocument.addEventListener('touchend', this.handleTouchEnd);\n }\n\n /**\n * @private\n * @return {void}\n */\n removeDocumentMouseMoveListener() {\n this.node.ownerDocument.removeEventListener('mousemove', this.handleMouseMove);\n }\n\n /**\n * @private\n * @return {void}\n */\n removeDocumentMouseUpListener() {\n this.node.ownerDocument.removeEventListener('mouseup', this.handleMouseUp);\n }\n\n /**\n * @private\n * @return {void}\n */\n removeDocumentTouchMoveListener() {\n this.node.ownerDocument.removeEventListener('touchmove', this.handleTouchMove);\n }\n\n /**\n * @private\n * @return {void}\n */\n removeDocumentTouchEndListener() {\n this.node.ownerDocument.removeEventListener('touchend', this.handleTouchUp);\n }\n\n /**\n * @private\n * @return {void}\n */\n @autobind\n handleMouseDown() {\n this.addDocumentMouseMoveListener();\n this.addDocumentMouseUpListener();\n }\n\n /**\n * @private\n * @return {void}\n */\n @autobind\n handleMouseUp() {\n this.removeDocumentMouseMoveListener();\n this.removeDocumentMouseUpListener();\n }\n\n /**\n * @private\n * @param {SyntheticEvent} event\n * @return {void}\n */\n @autobind\n handleMouseMove(event) {\n this.props.onSliderDrag(event, this.props.type);\n }\n\n /**\n * @private\n * @return {void}\n */\n @autobind\n handleTouchStart() {\n this.addDocumentTouchEndListener();\n this.addDocumentTouchMoveListener();\n }\n\n /**\n * @private\n * @param {SyntheticEvent} event\n * @return {void}\n */\n @autobind\n handleTouchMove(event) {\n this.props.onSliderDrag(event, this.props.type);\n }\n\n /**\n * @private\n * @return {void}\n */\n @autobind\n handleTouchEnd() {\n this.removeDocumentTouchMoveListener();\n this.removeDocumentTouchEndListener();\n }\n\n /**\n * @private\n * @param {SyntheticEvent} event\n * @return {void}\n */\n @autobind\n handleKeyDown(event) {\n this.props.onSliderKeyDown(event, this.props.type);\n }\n\n /**\n * @override\n * @return {JSX.Element}\n */\n render() {\n const style = this.getStyle();\n\n return (\n { this.node = node; }}\n style={style}>\n \n {this.props.value}\n \n\n \n \n );\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/input-range/slider.jsx","import React from 'react';\nimport autobind from 'autobind-decorator';\n\n/**\n * @ignore\n */\nexport default class Track extends React.Component {\n /**\n * @override\n * @return {Object}\n * @property {Function} children\n * @property {Function} classNames\n * @property {Function} onTrackMouseDown\n * @property {Function} percentages\n */\n static get propTypes() {\n return {\n children: React.PropTypes.node.isRequired,\n classNames: React.PropTypes.objectOf(React.PropTypes.string).isRequired,\n onTrackMouseDown: React.PropTypes.func.isRequired,\n percentages: React.PropTypes.objectOf(React.PropTypes.number).isRequired,\n isExternal: React.PropTypes.bool.isRequired,\n };\n }\n\n /**\n * @param {Object} props\n * @param {InputRangeClassNames} props.classNames\n * @param {Function} props.onTrackMouseDown\n * @param {number} props.percentages\n */\n constructor(props) {\n super(props);\n\n /**\n * @private\n * @type {?Component}\n */\n this.node = null;\n }\n\n /**\n * @private\n * @return {ClientRect}\n */\n getClientRect() {\n return this.node.getBoundingClientRect();\n }\n\n /**\n * @private\n * @return {Object} CSS styles\n */\n getActiveTrackStyle() {\n const width = `${(this.props.percentages.max - this.props.percentages.min) * 100}%`;\n const left = `${this.props.percentages.min * 100}%`;\n\n return { left, width };\n }\n\n /**\n * @private\n * @return {Object} CSS styles\n */\n @autobind\n getActiveTrackStylePre() {\n const width = `${(this.props.percentages.min) * 100}%`;\n const left = '0';\n const float = 'left';\n return { left, width, float };\n }\n\n\n /**\n * @private\n * @return {Object} CSS styles\n */\n @autobind\n getActiveTrackStylePost() {\n const width = `${(1 - this.props.percentages.max) * 100}%`;\n const left = `${this.props.percentages.max * 100}%`;\n\n return { left, width };\n }\n\n /**\n * @private\n * @param {SyntheticEvent} event - User event\n */\n @autobind\n handleMouseDown(event) {\n const clientX = event.touches ? event.touches[0].clientX : event.clientX;\n const trackClientRect = this.getClientRect();\n const position = {\n x: clientX - trackClientRect.left,\n y: 0,\n };\n\n this.props.onTrackMouseDown(event, position);\n }\n\n /**\n * @private\n * @param {SyntheticEvent} event - User event\n */\n @autobind\n handleTouchStart(event) {\n event.preventDefault();\n\n this.handleMouseDown(event);\n }\n\n /**\n * @override\n * @return {JSX.Element}\n */\n render() {\n const activeTrackStyle = this.getActiveTrackStyle();\n const activeTrackStyleExternalPre = this.getActiveTrackStylePre();\n const activeTrackStyleExternalPost = this.getActiveTrackStylePost();\n\n return (\n { this.node = node; }}>\n {\n !this.props.isExternal ? (\n \n ) : (\n
\n \n \n
\n )\n }\n {this.props.children}\n \n );\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/input-range/track.jsx","import { isNumber, isObject } from '../utils';\n\n/**\n * @ignore\n * @param {Object} props\n * @return {?Error} Return Error if validation fails\n */\nexport default function valuePropType(props, propName) {\n const { maxValue, minValue } = props;\n const value = props[propName];\n\n if (!isNumber(value) && (!isObject(value) || !isNumber(value.min) || !isNumber(value.max))) {\n return new Error(`\"${propName}\" must be a number or a range object`);\n }\n\n if (isNumber(value) && (value < minValue || value > maxValue)) {\n return new Error(`\"${propName}\" must be in between \"minValue\" and \"maxValue\"`);\n }\n\n if (isObject(value) && (value.min < minValue || value.min > maxValue || value.max < minValue || value.max > maxValue)) {\n return new Error(`\"${propName}\" must be in between \"minValue\" and \"maxValue\"`);\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/input-range/value-prop-type.js","import { clamp } from '../utils';\n\n/**\n * Convert a point into a percentage value\n * @ignore\n * @param {Point} position\n * @param {ClientRect} clientRect\n * @return {number} Percentage value\n */\nexport function getPercentageFromPosition(position, clientRect) {\n const length = clientRect.width;\n const sizePerc = position.x / length;\n\n return sizePerc || 0;\n}\n\n/**\n * Convert a point into a model value\n * @ignore\n * @param {Point} position\n * @param {number} minValue\n * @param {number} maxValue\n * @param {ClientRect} clientRect\n * @return {number}\n */\nexport function getValueFromPosition(position, minValue, maxValue, clientRect) {\n const sizePerc = getPercentageFromPosition(position, clientRect);\n const valueDiff = maxValue - minValue;\n\n return minValue + (valueDiff * sizePerc);\n}\n\n/**\n * Convert props into a range value\n * @ignore\n * @param {Object} props\n * @param {boolean} isMultiValue\n * @return {Range}\n */\nexport function getValueFromProps(props, isMultiValue) {\n if (isMultiValue) {\n return { ...props.value };\n }\n\n return {\n min: props.minValue,\n max: props.value,\n };\n}\n\n/**\n * Convert a model value into a percentage value\n * @ignore\n * @param {number} value\n * @param {number} minValue\n * @param {number} maxValue\n * @return {number}\n */\nexport function getPercentageFromValue(value, minValue, maxValue) {\n const validValue = clamp(value, minValue, maxValue);\n const valueDiff = maxValue - minValue;\n const valuePerc = (validValue - minValue) / valueDiff;\n\n return valuePerc || 0;\n}\n\n/**\n * Convert model values into percentage values\n * @ignore\n * @param {Range} values\n * @param {number} minValue\n * @param {number} maxValue\n * @return {Range}\n */\nexport function getPercentagesFromValues(values, minValue, maxValue) {\n return {\n min: getPercentageFromValue(values.min, minValue, maxValue),\n max: getPercentageFromValue(values.max, minValue, maxValue),\n };\n}\n\n/**\n * Convert a value into a point\n * @ignore\n * @param {number} value\n * @param {number} minValue\n * @param {number} maxValue\n * @param {ClientRect} clientRect\n * @return {Point} Position\n */\nexport function getPositionFromValue(value, minValue, maxValue, clientRect) {\n const length = clientRect.width;\n const valuePerc = getPercentageFromValue(value, minValue, maxValue);\n const positionValue = valuePerc * length;\n\n return {\n x: positionValue,\n y: 0,\n };\n}\n\n/**\n * Convert a range of values into points\n * @ignore\n * @param {Range} values\n * @param {number} minValue\n * @param {number} maxValue\n * @param {ClientRect} clientRect\n * @return {Range}\n */\nexport function getPositionsFromValues(values, minValue, maxValue, clientRect) {\n return {\n min: getPositionFromValue(values.min, minValue, maxValue, clientRect),\n max: getPositionFromValue(values.max, minValue, maxValue, clientRect),\n };\n}\n\n/**\n * Convert an event into a point\n * @ignore\n * @param {Event} event\n * @param {ClientRect} clientRect\n * @return {Point}\n */\nexport function getPositionFromEvent(event, clientRect) {\n const length = clientRect.width;\n const { clientX } = event.touches ? event.touches[0] : event;\n\n return {\n x: clamp(clientX - clientRect.left, 0, length),\n y: 0,\n };\n}\n\n/**\n * Convert a value into a step value\n * @ignore\n * @param {number} value\n * @param {number} valuePerStep\n * @return {number}\n */\nexport function getStepValueFromValue(value, valuePerStep) {\n return Math.round(value / valuePerStep) * valuePerStep;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/input-range/value-transformer.js","/**\n * Captialize a string\n * @ignore\n * @param {string} string\n * @return {string}\n */\nexport default function captialize(string) {\n return string.charAt(0).toUpperCase() + string.slice(1);\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/utils/captialize.js","/**\n * Clamp a value between a min and max value\n * @ignore\n * @param {number} value\n * @param {number} min\n * @param {number} max\n * @return {number}\n */\nexport default function clamp(value, min, max) {\n return Math.min(Math.max(value, min), max);\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/utils/clamp.js","/**\n * Calculate the distance between pointA and pointB\n * @ignore\n * @param {Point} pointA\n * @param {Point} pointB\n * @return {number} Distance\n */\nexport default function distanceTo(pointA, pointB) {\n const xDiff = (pointB.x - pointA.x) ** 2;\n const yDiff = (pointB.y - pointA.y) ** 2;\n\n return Math.sqrt(xDiff + yDiff);\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/utils/distance-to.js","/**\n * Check if a value is defined\n * @ignore\n * @param {*} value\n * @return {boolean}\n */\nexport default function isDefined(value) {\n return value !== undefined && value !== null;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/utils/is-defined.js","/**\n * Check if a value is a number\n * @ignore\n * @param {*} value\n * @return {boolean}\n */\nexport default function isNumber(value) {\n return typeof value === 'number';\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/utils/is-number.js","/**\n * Check if a value is an object\n * @ignore\n * @param {*} value\n * @return {boolean}\n */\nexport default function isObject(value) {\n return value !== null && typeof value === 'object';\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/utils/is-object.js","/**\n * Calculate the absolute difference between two numbers\n * @ignore\n * @param {number} numA\n * @param {number} numB\n * @return {number}\n */\nexport default function length(numA, numB) {\n return Math.abs(numA - numB);\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/js/utils/length.js"],"sourceRoot":""} \ No newline at end of file diff --git a/lib/css/index.css b/lib/css/index.css new file mode 100644 index 0000000..b9aeb90 --- /dev/null +++ b/lib/css/index.css @@ -0,0 +1,87 @@ +.input-range__slider { + appearance: none; + background: #3f51b5; + border: 1px solid #3f51b5; + border-radius: 100%; + cursor: pointer; + display: block; + height: 1rem; + margin-left: -0.5rem; + margin-top: -0.65rem; + outline: none; + position: absolute; + top: 50%; + transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; + width: 1rem; } + .input-range__slider:active { + transform: scale(1.3); } + .input-range__slider:focus { + box-shadow: 0 0 0 5px rgba(63, 81, 181, 0.2); } + .input-range--disabled .input-range__slider { + background: #cccccc; + border: 1px solid #cccccc; + box-shadow: none; + transform: none; } + +.input-range__slider-container { + transition: left 0.3s ease-out; } + +.input-range__label { + color: #aaaaaa; + font-family: "Helvetica Neue", san-serif; + font-size: 0.8rem; + transform: translateZ(0); + white-space: nowrap; } + +.input-range__label--min, +.input-range__label--max { + bottom: -1.4rem; + position: absolute; } + +.input-range__label--min { + left: 0; } + +.input-range__label--max { + right: 0; } + +.input-range__label--value { + position: absolute; + top: -1.8rem; } + +.input-range__label-container { + left: -50%; + position: relative; } + .input-range__label--max .input-range__label-container { + left: 50%; } + .input-range__label-container.marker-min { + left: -90%; } + .input-range__label-container.marker-max { + left: 0%; } + +.input-range__track { + background: #eeeeee; + border-radius: 0.3rem; + cursor: pointer; + display: block; + height: 0.3rem; + position: relative; + transition: left 0.3s ease-out, width 0.3s ease-out; } + .input-range--disabled .input-range__track { + background: #eeeeee; } + +.input-range__track--background { + left: 0; + margin-top: -0.15rem; + position: absolute; + right: 0; + top: 50%; } + +.input-range__track--active { + background: #3f51b5; } + +.input-range { + height: 1rem; + position: relative; + width: 100%; } + +/*# sourceMappingURL=index.css.map */ \ No newline at end of file diff --git a/lib/css/index.css.map b/lib/css/index.css.map new file mode 100644 index 0000000..14211f5 --- /dev/null +++ b/lib/css/index.css.map @@ -0,0 +1,15 @@ +{ + "version": 3, + "file": "index.css", + "sources": [ + "../../src/scss/index.scss", + "../../src/scss/input-range/input-range.scss", + "../../src/scss/input-range/_input-range-variables.scss", + "../../src/scss/input-range/_input-range-slider.scss", + "../../src/scss/input-range/_input-range-label.scss", + "../../src/scss/input-range/_input-range-label-container.scss", + "../../src/scss/input-range/_input-range-track.scss" + ], + "names": [], + "mappings": "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" +} \ No newline at end of file diff --git a/lib/css/input-range/input-range.css b/lib/css/input-range/input-range.css new file mode 100644 index 0000000..442fef2 --- /dev/null +++ b/lib/css/input-range/input-range.css @@ -0,0 +1,87 @@ +.input-range__slider { + appearance: none; + background: #3f51b5; + border: 1px solid #3f51b5; + border-radius: 100%; + cursor: pointer; + display: block; + height: 1rem; + margin-left: -0.5rem; + margin-top: -0.65rem; + outline: none; + position: absolute; + top: 50%; + transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; + width: 1rem; } + .input-range__slider:active { + transform: scale(1.3); } + .input-range__slider:focus { + box-shadow: 0 0 0 5px rgba(63, 81, 181, 0.2); } + .input-range--disabled .input-range__slider { + background: #cccccc; + border: 1px solid #cccccc; + box-shadow: none; + transform: none; } + +.input-range__slider-container { + transition: left 0.3s ease-out; } + +.input-range__label { + color: #aaaaaa; + font-family: "Helvetica Neue", san-serif; + font-size: 0.8rem; + transform: translateZ(0); + white-space: nowrap; } + +.input-range__label--min, +.input-range__label--max { + bottom: -1.4rem; + position: absolute; } + +.input-range__label--min { + left: 0; } + +.input-range__label--max { + right: 0; } + +.input-range__label--value { + position: absolute; + top: -1.8rem; } + +.input-range__label-container { + left: -50%; + position: relative; } + .input-range__label--max .input-range__label-container { + left: 50%; } + .input-range__label-container.marker-min { + left: -90%; } + .input-range__label-container.marker-max { + left: 0%; } + +.input-range__track { + background: #eeeeee; + border-radius: 0.3rem; + cursor: pointer; + display: block; + height: 0.3rem; + position: relative; + transition: left 0.3s ease-out, width 0.3s ease-out; } + .input-range--disabled .input-range__track { + background: #eeeeee; } + +.input-range__track--background { + left: 0; + margin-top: -0.15rem; + position: absolute; + right: 0; + top: 50%; } + +.input-range__track--active { + background: #3f51b5; } + +.input-range { + height: 1rem; + position: relative; + width: 100%; } + +/*# sourceMappingURL=input-range.css.map */ \ No newline at end of file diff --git a/lib/css/input-range/input-range.css.map b/lib/css/input-range/input-range.css.map new file mode 100644 index 0000000..d2bbc84 --- /dev/null +++ b/lib/css/input-range/input-range.css.map @@ -0,0 +1,14 @@ +{ + "version": 3, + "file": "input-range.css", + "sources": [ + "../../../src/scss/input-range/input-range.scss", + "../../../src/scss/input-range/_input-range-variables.scss", + "../../../src/scss/input-range/_input-range-slider.scss", + "../../../src/scss/input-range/_input-range-label.scss", + "../../../src/scss/input-range/_input-range-label-container.scss", + "../../../src/scss/input-range/_input-range-track.scss" + ], + "names": [], + "mappings": "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" +} \ No newline at end of file diff --git a/lib/js/index.js b/lib/js/index.js new file mode 100644 index 0000000..0b0815b --- /dev/null +++ b/lib/js/index.js @@ -0,0 +1,54 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _inputRange = require('./input-range'); + +/** + * @ignore + * @typedef {Object} ClientRect + * @property {number} height + * @property {number} left + * @property {number} top + * @property {number} width + */ + +/** + * @typedef {Object} InputRangeClassNames + * @property {string} activeTrack + * @property {string} disabledInputRange + * @property {string} inputRange + * @property {string} labelContainer + * @property {string} maxLabel + * @property {string} minLabel + * @property {string} slider + * @property {string} sliderContainer + * @property {string} track + * @property {string} valueLabel + */ + +/** + * @typedef {Function} LabelFormatter + * @param {number} value + * @param {string} type + * @return {string} + */ + +/** + * @ignore + * @typedef {Object} Point + * @property {number} x + * @property {number} y + */ + +/** + * @typedef {Object} Range + * @property {number} min - Min value + * @property {number} max - Max value + */ + +exports.default = _inputRange.InputRange; +module.exports = exports['default']; +//# sourceMappingURL=index.js.map \ No newline at end of file diff --git a/lib/js/index.js.map b/lib/js/index.js.map new file mode 100644 index 0000000..d512f33 --- /dev/null +++ b/lib/js/index.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../src/js/index.js"],"names":[],"mappings":";;;;;;AAAA;;AAEA;;;;;;;;;AASA;;;;;;;;;;;;;;AAcA;;;;;;;AAOA;;;;;;;AAOA","file":"index.js","sourcesContent":["import { InputRange } from './input-range';\n\n/**\n * @ignore\n * @typedef {Object} ClientRect\n * @property {number} height\n * @property {number} left\n * @property {number} top\n * @property {number} width\n */\n\n/**\n * @typedef {Object} InputRangeClassNames\n * @property {string} activeTrack\n * @property {string} disabledInputRange\n * @property {string} inputRange\n * @property {string} labelContainer\n * @property {string} maxLabel\n * @property {string} minLabel\n * @property {string} slider\n * @property {string} sliderContainer\n * @property {string} track\n * @property {string} valueLabel\n */\n\n/**\n * @typedef {Function} LabelFormatter\n * @param {number} value\n * @param {string} type\n * @return {string}\n */\n\n/**\n * @ignore\n * @typedef {Object} Point\n * @property {number} x\n * @property {number} y\n */\n\n/**\n * @typedef {Object} Range\n * @property {number} min - Min value\n * @property {number} max - Max value\n */\n\nexport default InputRange;\n"]} \ No newline at end of file diff --git a/lib/js/input-range/default-class-names.js b/lib/js/input-range/default-class-names.js new file mode 100644 index 0000000..f0c4baa --- /dev/null +++ b/lib/js/input-range/default-class-names.js @@ -0,0 +1,26 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +/** +* Default CSS class names +* @ignore +* @type {InputRangeClassNames} +*/ +var DEFAULT_CLASS_NAMES = { + activeTrack: 'input-range__track input-range__track--active', + disabledInputRange: 'input-range input-range--disabled', + inputRange: 'input-range', + labelContainer: 'input-range__label-container', + maxLabel: 'input-range__label input-range__label--max', + minLabel: 'input-range__label input-range__label--min', + slider: 'input-range__slider', + sliderContainer: 'input-range__slider-container', + track: 'input-range__track input-range__track--background', + valueLabel: 'input-range__label input-range__label--value' +}; + +exports.default = DEFAULT_CLASS_NAMES; +module.exports = exports['default']; +//# sourceMappingURL=default-class-names.js.map \ No newline at end of file diff --git a/lib/js/input-range/default-class-names.js.map b/lib/js/input-range/default-class-names.js.map new file mode 100644 index 0000000..6c4ce1c --- /dev/null +++ b/lib/js/input-range/default-class-names.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../src/js/input-range/default-class-names.js"],"names":["DEFAULT_CLASS_NAMES","activeTrack","disabledInputRange","inputRange","labelContainer","maxLabel","minLabel","slider","sliderContainer","track","valueLabel"],"mappings":";;;;;AAAA;;;;;AAKA,IAAMA,sBAAsB;AAC1BC,eAAa,+CADa;AAE1BC,sBAAoB,mCAFM;AAG1BC,cAAY,aAHc;AAI1BC,kBAAgB,8BAJU;AAK1BC,YAAU,4CALgB;AAM1BC,YAAU,4CANgB;AAO1BC,UAAQ,qBAPkB;AAQ1BC,mBAAiB,+BARS;AAS1BC,SAAO,mDATmB;AAU1BC,cAAY;AAVc,CAA5B;;kBAaeV,mB","file":"default-class-names.js","sourcesContent":["/**\n* Default CSS class names\n* @ignore\n* @type {InputRangeClassNames}\n*/\nconst DEFAULT_CLASS_NAMES = {\n activeTrack: 'input-range__track input-range__track--active',\n disabledInputRange: 'input-range input-range--disabled',\n inputRange: 'input-range',\n labelContainer: 'input-range__label-container',\n maxLabel: 'input-range__label input-range__label--max',\n minLabel: 'input-range__label input-range__label--min',\n slider: 'input-range__slider',\n sliderContainer: 'input-range__slider-container',\n track: 'input-range__track input-range__track--background',\n valueLabel: 'input-range__label input-range__label--value',\n};\n\nexport default DEFAULT_CLASS_NAMES;\n"]} \ No newline at end of file diff --git a/lib/js/input-range/index.js b/lib/js/input-range/index.js new file mode 100644 index 0000000..34f8a4c --- /dev/null +++ b/lib/js/input-range/index.js @@ -0,0 +1,17 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _inputRange = require('./input-range'); + +Object.defineProperty(exports, 'InputRange', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_inputRange).default; + } +}); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } +//# sourceMappingURL=index.js.map \ No newline at end of file diff --git a/lib/js/input-range/index.js.map b/lib/js/input-range/index.js.map new file mode 100644 index 0000000..5334088 --- /dev/null +++ b/lib/js/input-range/index.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../src/js/input-range/index.js"],"names":["default"],"mappings":";;;;;;;;;;;+CAASA,O","file":"index.js","sourcesContent":["export { default as InputRange } from './input-range';\n"]} \ No newline at end of file diff --git a/lib/js/input-range/input-range.js b/lib/js/input-range/input-range.js new file mode 100644 index 0000000..75a5b20 --- /dev/null +++ b/lib/js/input-range/input-range.js @@ -0,0 +1,822 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +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 _desc, _value, _class; + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _autobindDecorator = require('autobind-decorator'); + +var _autobindDecorator2 = _interopRequireDefault(_autobindDecorator); + +var _valueTransformer = require('./value-transformer'); + +var valueTransformer = _interopRequireWildcard(_valueTransformer); + +var _defaultClassNames = require('./default-class-names'); + +var _defaultClassNames2 = _interopRequireDefault(_defaultClassNames); + +var _label = require('./label'); + +var _label2 = _interopRequireDefault(_label); + +var _rangePropType = require('./range-prop-type'); + +var _rangePropType2 = _interopRequireDefault(_rangePropType); + +var _valuePropType = require('./value-prop-type'); + +var _valuePropType2 = _interopRequireDefault(_valuePropType); + +var _slider = require('./slider'); + +var _slider2 = _interopRequireDefault(_slider); + +var _track = require('./track'); + +var _track2 = _interopRequireDefault(_track); + +var _utils = require('../utils'); + +var _keyCodes = require('./key-codes'); + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } } + +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; } + +function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) { + var desc = {}; + Object['ke' + 'ys'](descriptor).forEach(function (key) { + desc[key] = descriptor[key]; + }); + desc.enumerable = !!desc.enumerable; + desc.configurable = !!desc.configurable; + + if ('value' in desc || desc.initializer) { + desc.writable = true; + } + + desc = decorators.slice().reverse().reduce(function (desc, decorator) { + return decorator(target, property, desc) || desc; + }, desc); + + if (context && desc.initializer !== void 0) { + desc.value = desc.initializer ? desc.initializer.call(context) : void 0; + desc.initializer = undefined; + } + + if (desc.initializer === void 0) { + Object['define' + 'Property'](target, property, desc); + desc = null; + } + + return desc; +} + +/** + * A React component that allows users to input numeric values within a range + * by dragging its sliders. + */ +var InputRange = (_class = function (_React$Component) { + _inherits(InputRange, _React$Component); + + _createClass(InputRange, null, [{ + key: 'propTypes', + + /** + * @ignore + * @override + * @return {Object} + */ + get: function get() { + return { + ariaLabelledby: _react2.default.PropTypes.string, + ariaControls: _react2.default.PropTypes.string, + classNames: _react2.default.PropTypes.objectOf(_react2.default.PropTypes.string), + disabled: _react2.default.PropTypes.bool, + formatLabel: _react2.default.PropTypes.func, + isExternal: _react2.default.PropTypes.bool, + maxValue: _rangePropType2.default, + minValue: _rangePropType2.default, + name: _react2.default.PropTypes.string, + onChangeStart: _react2.default.PropTypes.func, + onChange: _react2.default.PropTypes.func.isRequired, + onChangeComplete: _react2.default.PropTypes.func, + step: _react2.default.PropTypes.number, + value: _valuePropType2.default + }; + } + + /** + * @ignore + * @override + * @return {Object} + */ + + }, { + key: 'defaultProps', + get: function get() { + return { + classNames: _defaultClassNames2.default, + disabled: false, + maxValue: 10, + minValue: 0, + step: 1, + isExternal: false + }; + } + + /** + * @param {Object} props + * @param {string} [props.ariaLabelledby] + * @param {string} [props.ariaControls] + * @param {InputRangeClassNames} [props.classNames] + * @param {boolean} [props.disabled = false] + * @param {Function} [props.formatLabel] + * @param {number|Range} [props.maxValue = 10] + * @param {number|Range} [props.minValue = 0] + * @param {string} [props.name] + * @param {string} props.onChange + * @param {Function} [props.onChangeComplete] + * @param {Function} [props.onChangeStart] + * @param {number} [props.step = 1] + * @param {number|Range} props.value + */ + + }]); + + function InputRange(props) { + _classCallCheck(this, InputRange); + + /** + * @private + * @type {?number} + */ + var _this = _possibleConstructorReturn(this, (InputRange.__proto__ || Object.getPrototypeOf(InputRange)).call(this, props)); + + _this.startValue = null; + + /** + * @private + * @type {?Component} + */ + _this.node = null; + + /** + * @private + * @type {?Component} + */ + _this.trackNode = null; + return _this; + } + + /** + * @ignore + * @override + * @return {void} + */ + + + _createClass(InputRange, [{ + key: 'componentWillUnmount', + value: function componentWillUnmount() { + this.removeDocumentMouseUpListener(); + this.removeDocumentTouchEndListener(); + } + + /** + * Return the CSS class name of the component + * @private + * @return {string} + */ + + }, { + key: 'getComponentClassName', + value: function getComponentClassName() { + if (!this.props.disabled) { + return this.props.classNames.inputRange; + } + + return this.props.classNames.disabledInputRange; + } + + /** + * Return the bounding rect of the track + * @private + * @return {ClientRect} + */ + + }, { + key: 'getTrackClientRect', + value: function getTrackClientRect() { + return this.trackNode.getClientRect(); + } + + /** + * Return the slider key closest to a point + * @private + * @param {Point} position + * @return {string} + */ + + }, { + key: 'getKeyByPosition', + value: function getKeyByPosition(position) { + var values = valueTransformer.getValueFromProps(this.props, this.isMultiValue()); + var positions = valueTransformer.getPositionsFromValues(values, this.props.minValue, this.props.maxValue, this.getTrackClientRect()); + + if (this.isMultiValue()) { + var distanceToMin = (0, _utils.distanceTo)(position, positions.min); + var distanceToMax = (0, _utils.distanceTo)(position, positions.max); + + if (distanceToMin < distanceToMax) { + return 'min'; + } + } + + return 'max'; + } + + /** + * Return all the slider keys + * @private + * @return {string[]} + */ + + }, { + key: 'getKeys', + value: function getKeys() { + if (this.isMultiValue()) { + return ['min', 'max']; + } + + return ['max']; + } + + /** + * Return true if the difference between the new and the current value is + * greater or equal to the step amount of the component + * @private + * @param {Range} values + * @return {boolean} + */ + + }, { + key: 'hasStepDifference', + value: function hasStepDifference(values) { + var currentValues = valueTransformer.getValueFromProps(this.props, this.isMultiValue()); + + return (0, _utils.length)(values.min, currentValues.min) >= this.props.step || (0, _utils.length)(values.max, currentValues.max) >= this.props.step; + } + + /** + * Return true if the component accepts a min and max value + * @private + * @return {boolean} + */ + + }, { + key: 'isMultiValue', + value: function isMultiValue() { + return (0, _utils.isObject)(this.props.value); + } + + /** + * Return true if the range is within the max and min value of the component + * @private + * @param {Range} values + * @return {boolean} + */ + + }, { + key: 'isWithinRange', + value: function isWithinRange(values) { + if (this.isMultiValue()) { + return values.min >= this.props.minValue && values.max <= this.props.maxValue && values.min < values.max; + } + + return values.max >= this.props.minValue && values.max <= this.props.maxValue; + } + + /** + * Return true if the new value should trigger a render + * @private + * @param {Range} values + * @return {boolean} + */ + + }, { + key: 'shouldUpdate', + value: function shouldUpdate(values) { + return this.isWithinRange(values) && this.hasStepDifference(values); + } + + /** + * Update the position of a slider + * @private + * @param {string} key + * @param {Point} position + * @return {void} + */ + + }, { + key: 'updatePosition', + value: function updatePosition(key, position) { + var values = valueTransformer.getValueFromProps(this.props, this.isMultiValue()); + var positions = valueTransformer.getPositionsFromValues(values, this.props.minValue, this.props.maxValue, this.getTrackClientRect()); + + positions[key] = position; + + this.updatePositions(positions); + } + + /** + * Update the positions of multiple sliders + * @private + * @param {Object} positions + * @param {Point} positions.min + * @param {Point} positions.max + * @return {void} + */ + + }, { + key: 'updatePositions', + value: function updatePositions(positions) { + var values = { + min: valueTransformer.getValueFromPosition(positions.min, this.props.minValue, this.props.maxValue, this.getTrackClientRect()), + max: valueTransformer.getValueFromPosition(positions.max, this.props.minValue, this.props.maxValue, this.getTrackClientRect()) + }; + + var transformedValues = { + min: valueTransformer.getStepValueFromValue(values.min, this.props.step), + max: valueTransformer.getStepValueFromValue(values.max, this.props.step) + }; + + this.updateValues(transformedValues); + } + + /** + * Update the value of a slider + * @private + * @param {string} key + * @param {number} value + * @return {void} + */ + + }, { + key: 'updateValue', + value: function updateValue(key, value) { + var values = valueTransformer.getValueFromProps(this.props, this.isMultiValue()); + + values[key] = value; + + this.updateValues(values); + } + + /** + * Update the values of multiple sliders + * @private + * @param {Range|number} values + * @return {void} + */ + + }, { + key: 'updateValues', + value: function updateValues(values) { + if (!this.shouldUpdate(values)) { + return; + } + + this.props.onChange(this.isMultiValue() ? values : values.max); + } + + /** + * Increment the value of a slider by key name + * @private + * @param {string} key + * @return {void} + */ + + }, { + key: 'incrementValue', + value: function incrementValue(key) { + var values = valueTransformer.getValueFromProps(this.props, this.isMultiValue()); + var value = values[key] + this.props.step; + + this.updateValue(key, value); + } + + /** + * Decrement the value of a slider by key name + * @private + * @param {string} key + * @return {void} + */ + + }, { + key: 'decrementValue', + value: function decrementValue(key) { + var values = valueTransformer.getValueFromProps(this.props, this.isMultiValue()); + var value = values[key] - this.props.step; + + this.updateValue(key, value); + } + + /** + * Listen to mouseup event + * @private + * @return {void} + */ + + }, { + key: 'addDocumentMouseUpListener', + value: function addDocumentMouseUpListener() { + this.removeDocumentMouseUpListener(); + this.node.ownerDocument.addEventListener('mouseup', this.handleMouseUp); + } + + /** + * Listen to touchend event + * @private + * @return {void} + */ + + }, { + key: 'addDocumentTouchEndListener', + value: function addDocumentTouchEndListener() { + this.removeDocumentTouchEndListener(); + this.node.ownerDocument.addEventListener('touchend', this.handleTouchEnd); + } + + /** + * Stop listening to mouseup event + * @private + * @return {void} + */ + + }, { + key: 'removeDocumentMouseUpListener', + value: function removeDocumentMouseUpListener() { + this.node.ownerDocument.removeEventListener('mouseup', this.handleMouseUp); + } + + /** + * Stop listening to touchend event + * @private + * @return {void} + */ + + }, { + key: 'removeDocumentTouchEndListener', + value: function removeDocumentTouchEndListener() { + this.node.ownerDocument.removeEventListener('touchend', this.handleTouchEnd); + } + + /** + * Handle any "mousemove" event received by the slider + * @private + * @param {SyntheticEvent} event + * @param {string} key + * @return {void} + */ + + }, { + key: 'handleSliderDrag', + value: function handleSliderDrag(event, key) { + var _this2 = this; + + if (this.props.disabled) { + return; + } + + var position = valueTransformer.getPositionFromEvent(event, this.getTrackClientRect()); + + requestAnimationFrame(function () { + return _this2.updatePosition(key, position); + }); + } + + /** + * Handle any "keydown" event received by the slider + * @private + * @param {SyntheticEvent} event + * @param {string} key + * @return {void} + */ + + }, { + key: 'handleSliderKeyDown', + value: function handleSliderKeyDown(event, key) { + if (this.props.disabled) { + return; + } + + switch (event.keyCode) { + case _keyCodes.LEFT_ARROW: + case _keyCodes.DOWN_ARROW: + event.preventDefault(); + this.decrementValue(key); + break; + + case _keyCodes.RIGHT_ARROW: + case _keyCodes.UP_ARROW: + event.preventDefault(); + this.incrementValue(key); + break; + + default: + break; + } + } + + /** + * Handle any "mousedown" event received by the track + * @private + * @param {SyntheticEvent} event + * @param {Point} position + * @return {void} + */ + + }, { + key: 'handleTrackMouseDown', + value: function handleTrackMouseDown(event, position) { + if (this.props.disabled) { + return; + } + + event.preventDefault(); + + this.updatePosition(this.getKeyByPosition(position), position); + } + + /** + * Handle the start of any mouse/touch event + * @private + * @return {void} + */ + + }, { + key: 'handleInteractionStart', + value: function handleInteractionStart() { + if (this.props.onChangeStart) { + this.props.onChangeStart(this.props.value); + } + + if (this.props.onChangeComplete && !(0, _utils.isDefined)(this.startValue)) { + this.startValue = this.props.value; + } + } + + /** + * Handle the end of any mouse/touch event + * @private + * @return {void} + */ + + }, { + key: 'handleInteractionEnd', + value: function handleInteractionEnd() { + if (!this.props.onChangeComplete || !(0, _utils.isDefined)(this.startValue)) { + return; + } + + if (this.startValue !== this.props.value) { + this.props.onChangeComplete(this.props.value); + } + + this.startValue = null; + } + + /** + * Handle any "keydown" event received by the component + * @private + * @param {SyntheticEvent} event + * @return {void} + */ + + }, { + key: 'handleKeyDown', + value: function handleKeyDown(event) { + this.handleInteractionStart(event); + } + + /** + * Handle any "keyup" event received by the component + * @private + * @param {SyntheticEvent} event + * @return {void} + */ + + }, { + key: 'handleKeyUp', + value: function handleKeyUp(event) { + this.handleInteractionEnd(event); + } + + /** + * Handle any "mousedown" event received by the component + * @private + * @param {SyntheticEvent} event + * @return {void} + */ + + }, { + key: 'handleMouseDown', + value: function handleMouseDown(event) { + this.handleInteractionStart(event); + this.addDocumentMouseUpListener(); + } + + /** + * Handle any "mouseup" event received by the component + * @private + * @param {SyntheticEvent} event + */ + + }, { + key: 'handleMouseUp', + value: function handleMouseUp(event) { + this.handleInteractionEnd(event); + this.removeDocumentMouseUpListener(); + } + + /** + * Handle any "touchstart" event received by the component + * @private + * @param {SyntheticEvent} event + * @return {void} + */ + + }, { + key: 'handleTouchStart', + value: function handleTouchStart(event) { + this.handleInteractionStart(event); + this.addDocumentTouchEndListener(); + } + + /** + * Handle any "touchend" event received by the component + * @private + * @param {SyntheticEvent} event + */ + + }, { + key: 'handleTouchEnd', + value: function handleTouchEnd(event) { + this.handleInteractionEnd(event); + this.removeDocumentTouchEndListener(); + } + + /** + * Return JSX of sliders + * @private + * @return {JSX.Element} + */ + + }, { + key: 'renderSliders', + value: function renderSliders() { + var _this3 = this; + + var values = valueTransformer.getValueFromProps(this.props, this.isMultiValue()); + var percentages = valueTransformer.getPercentagesFromValues(values, this.props.minValue, this.props.maxValue); + + return this.getKeys().map(function (key) { + var value = values[key]; + var percentage = percentages[key]; + + var _props = _this3.props, + maxValue = _props.maxValue, + minValue = _props.minValue; + + + if (key === 'min') { + maxValue = values.max; + } else { + minValue = values.min; + } + + var slider = _react2.default.createElement(_slider2.default, { + ariaLabelledby: _this3.props.ariaLabelledby, + ariaControls: _this3.props.ariaControls, + classNames: _this3.props.classNames, + formatLabel: _this3.props.formatLabel, + key: key, + maxValue: maxValue, + minValue: minValue, + onSliderDrag: _this3.handleSliderDrag, + onSliderKeyDown: _this3.handleSliderKeyDown, + percentage: percentage, + type: key, + value: value }); + + return slider; + }); + } + + /** + * Return JSX of hidden inputs + * @private + * @return {JSX.Element} + */ + + }, { + key: 'renderHiddenInputs', + value: function renderHiddenInputs() { + var _this4 = this; + + if (!this.props.name) { + return []; + } + + var isMultiValue = this.isMultiValue(); + var values = valueTransformer.getValueFromProps(this.props, isMultiValue); + + return this.getKeys().map(function (key) { + var value = values[key]; + var name = isMultiValue ? '' + _this4.props.name + (0, _utils.captialize)(key) : _this4.props.name; + + return _react2.default.createElement('input', { key: key, type: 'hidden', name: name, value: value }); + }); + } + + /** + * @ignore + * @override + * @return {JSX.Element} + */ + + }, { + key: 'render', + value: function render() { + var _this5 = this; + + var componentClassName = this.getComponentClassName(); + var values = valueTransformer.getValueFromProps(this.props, this.isMultiValue()); + var percentages = valueTransformer.getPercentagesFromValues(values, this.props.minValue, this.props.maxValue); + + return _react2.default.createElement( + 'div', + { + 'aria-disabled': this.props.disabled, + ref: function ref(node) { + _this5.node = node; + }, + className: componentClassName, + onKeyDown: this.handleKeyDown, + onKeyUp: this.handleKeyUp, + onMouseDown: this.handleMouseDown, + onTouchStart: this.handleTouchStart }, + _react2.default.createElement( + _label2.default, + { + classNames: this.props.classNames, + formatLabel: this.props.formatLabel, + type: 'min' }, + this.props.minValue + ), + _react2.default.createElement( + _track2.default, + { + classNames: this.props.classNames, + ref: function ref(trackNode) { + _this5.trackNode = trackNode; + }, + percentages: percentages, + onTrackMouseDown: this.handleTrackMouseDown, + isExternal: this.props.isExternal }, + this.renderSliders() + ), + _react2.default.createElement( + _label2.default, + { + classNames: this.props.classNames, + formatLabel: this.props.formatLabel, + type: 'max' }, + this.props.maxValue + ), + this.renderHiddenInputs() + ); + } + }]); + + return InputRange; +}(_react2.default.Component), (_applyDecoratedDescriptor(_class.prototype, 'handleSliderDrag', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleSliderDrag'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleSliderKeyDown', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleSliderKeyDown'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleTrackMouseDown', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleTrackMouseDown'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleInteractionStart', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleInteractionStart'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleInteractionEnd', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleInteractionEnd'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleKeyDown', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleKeyDown'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleKeyUp', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleKeyUp'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleMouseDown', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleMouseDown'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleMouseUp', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleMouseUp'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleTouchStart', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleTouchStart'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleTouchEnd', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleTouchEnd'), _class.prototype)), _class); +exports.default = InputRange; +module.exports = exports['default']; +//# sourceMappingURL=input-range.js.map \ No newline at end of file diff --git a/lib/js/input-range/input-range.js.map b/lib/js/input-range/input-range.js.map new file mode 100644 index 0000000..22ee289 --- /dev/null +++ b/lib/js/input-range/input-range.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../src/js/input-range/input-range.jsx"],"names":["valueTransformer","InputRange","ariaLabelledby","PropTypes","string","ariaControls","classNames","objectOf","disabled","bool","formatLabel","func","isExternal","maxValue","minValue","name","onChangeStart","onChange","isRequired","onChangeComplete","step","number","value","props","startValue","node","trackNode","removeDocumentMouseUpListener","removeDocumentTouchEndListener","inputRange","disabledInputRange","getClientRect","position","values","getValueFromProps","isMultiValue","positions","getPositionsFromValues","getTrackClientRect","distanceToMin","min","distanceToMax","max","currentValues","isWithinRange","hasStepDifference","key","updatePositions","getValueFromPosition","transformedValues","getStepValueFromValue","updateValues","shouldUpdate","updateValue","ownerDocument","addEventListener","handleMouseUp","handleTouchEnd","removeEventListener","event","getPositionFromEvent","requestAnimationFrame","updatePosition","keyCode","preventDefault","decrementValue","incrementValue","getKeyByPosition","handleInteractionStart","handleInteractionEnd","addDocumentMouseUpListener","addDocumentTouchEndListener","percentages","getPercentagesFromValues","getKeys","map","percentage","slider","handleSliderDrag","handleSliderKeyDown","componentClassName","getComponentClassName","handleKeyDown","handleKeyUp","handleMouseDown","handleTouchStart","handleTrackMouseDown","renderSliders","renderHiddenInputs","Component"],"mappings":"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","file":"input-range.js","sourcesContent":["import React from 'react';\nimport autobind from 'autobind-decorator';\nimport * as valueTransformer from './value-transformer';\nimport DEFAULT_CLASS_NAMES from './default-class-names';\nimport Label from './label';\nimport rangePropType from './range-prop-type';\nimport valuePropType from './value-prop-type';\nimport Slider from './slider';\nimport Track from './track';\nimport { captialize, distanceTo, isDefined, isObject, length } from '../utils';\nimport { DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, UP_ARROW } from './key-codes';\n\n/**\n * A React component that allows users to input numeric values within a range\n * by dragging its sliders.\n */\nexport default class InputRange extends React.Component {\n /**\n * @ignore\n * @override\n * @return {Object}\n */\n static get propTypes() {\n return {\n ariaLabelledby: React.PropTypes.string,\n ariaControls: React.PropTypes.string,\n classNames: React.PropTypes.objectOf(React.PropTypes.string),\n disabled: React.PropTypes.bool,\n formatLabel: React.PropTypes.func,\n isExternal: React.PropTypes.bool,\n maxValue: rangePropType,\n minValue: rangePropType,\n name: React.PropTypes.string,\n onChangeStart: React.PropTypes.func,\n onChange: React.PropTypes.func.isRequired,\n onChangeComplete: React.PropTypes.func,\n step: React.PropTypes.number,\n value: valuePropType,\n };\n }\n\n /**\n * @ignore\n * @override\n * @return {Object}\n */\n static get defaultProps() {\n return {\n classNames: DEFAULT_CLASS_NAMES,\n disabled: false,\n maxValue: 10,\n minValue: 0,\n step: 1,\n isExternal: false,\n };\n }\n\n /**\n * @param {Object} props\n * @param {string} [props.ariaLabelledby]\n * @param {string} [props.ariaControls]\n * @param {InputRangeClassNames} [props.classNames]\n * @param {boolean} [props.disabled = false]\n * @param {Function} [props.formatLabel]\n * @param {number|Range} [props.maxValue = 10]\n * @param {number|Range} [props.minValue = 0]\n * @param {string} [props.name]\n * @param {string} props.onChange\n * @param {Function} [props.onChangeComplete]\n * @param {Function} [props.onChangeStart]\n * @param {number} [props.step = 1]\n * @param {number|Range} props.value\n */\n constructor(props) {\n super(props);\n\n /**\n * @private\n * @type {?number}\n */\n this.startValue = null;\n\n /**\n * @private\n * @type {?Component}\n */\n this.node = null;\n\n /**\n * @private\n * @type {?Component}\n */\n this.trackNode = null;\n }\n\n /**\n * @ignore\n * @override\n * @return {void}\n */\n componentWillUnmount() {\n this.removeDocumentMouseUpListener();\n this.removeDocumentTouchEndListener();\n }\n\n /**\n * Return the CSS class name of the component\n * @private\n * @return {string}\n */\n getComponentClassName() {\n if (!this.props.disabled) {\n return this.props.classNames.inputRange;\n }\n\n return this.props.classNames.disabledInputRange;\n }\n\n /**\n * Return the bounding rect of the track\n * @private\n * @return {ClientRect}\n */\n getTrackClientRect() {\n return this.trackNode.getClientRect();\n }\n\n /**\n * Return the slider key closest to a point\n * @private\n * @param {Point} position\n * @return {string}\n */\n getKeyByPosition(position) {\n const values = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n const positions = valueTransformer.getPositionsFromValues(values, this.props.minValue, this.props.maxValue, this.getTrackClientRect());\n\n if (this.isMultiValue()) {\n const distanceToMin = distanceTo(position, positions.min);\n const distanceToMax = distanceTo(position, positions.max);\n\n if (distanceToMin < distanceToMax) {\n return 'min';\n }\n }\n\n return 'max';\n }\n\n /**\n * Return all the slider keys\n * @private\n * @return {string[]}\n */\n getKeys() {\n if (this.isMultiValue()) {\n return ['min', 'max'];\n }\n\n return ['max'];\n }\n\n /**\n * Return true if the difference between the new and the current value is\n * greater or equal to the step amount of the component\n * @private\n * @param {Range} values\n * @return {boolean}\n */\n hasStepDifference(values) {\n const currentValues = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n\n return length(values.min, currentValues.min) >= this.props.step ||\n length(values.max, currentValues.max) >= this.props.step;\n }\n\n /**\n * Return true if the component accepts a min and max value\n * @private\n * @return {boolean}\n */\n isMultiValue() {\n return isObject(this.props.value);\n }\n\n /**\n * Return true if the range is within the max and min value of the component\n * @private\n * @param {Range} values\n * @return {boolean}\n */\n isWithinRange(values) {\n if (this.isMultiValue()) {\n return values.min >= this.props.minValue &&\n values.max <= this.props.maxValue &&\n values.min < values.max;\n }\n\n return values.max >= this.props.minValue && values.max <= this.props.maxValue;\n }\n\n /**\n * Return true if the new value should trigger a render\n * @private\n * @param {Range} values\n * @return {boolean}\n */\n shouldUpdate(values) {\n return this.isWithinRange(values) && this.hasStepDifference(values);\n }\n\n /**\n * Update the position of a slider\n * @private\n * @param {string} key\n * @param {Point} position\n * @return {void}\n */\n updatePosition(key, position) {\n const values = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n const positions = valueTransformer.getPositionsFromValues(values, this.props.minValue, this.props.maxValue, this.getTrackClientRect());\n\n positions[key] = position;\n\n this.updatePositions(positions);\n }\n\n /**\n * Update the positions of multiple sliders\n * @private\n * @param {Object} positions\n * @param {Point} positions.min\n * @param {Point} positions.max\n * @return {void}\n */\n updatePositions(positions) {\n const values = {\n min: valueTransformer.getValueFromPosition(positions.min, this.props.minValue, this.props.maxValue, this.getTrackClientRect()),\n max: valueTransformer.getValueFromPosition(positions.max, this.props.minValue, this.props.maxValue, this.getTrackClientRect()),\n };\n\n const transformedValues = {\n min: valueTransformer.getStepValueFromValue(values.min, this.props.step),\n max: valueTransformer.getStepValueFromValue(values.max, this.props.step),\n };\n\n this.updateValues(transformedValues);\n }\n\n /**\n * Update the value of a slider\n * @private\n * @param {string} key\n * @param {number} value\n * @return {void}\n */\n updateValue(key, value) {\n const values = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n\n values[key] = value;\n\n this.updateValues(values);\n }\n\n /**\n * Update the values of multiple sliders\n * @private\n * @param {Range|number} values\n * @return {void}\n */\n updateValues(values) {\n if (!this.shouldUpdate(values)) {\n return;\n }\n\n this.props.onChange(this.isMultiValue() ? values : values.max);\n }\n\n /**\n * Increment the value of a slider by key name\n * @private\n * @param {string} key\n * @return {void}\n */\n incrementValue(key) {\n const values = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n const value = values[key] + this.props.step;\n\n this.updateValue(key, value);\n }\n\n /**\n * Decrement the value of a slider by key name\n * @private\n * @param {string} key\n * @return {void}\n */\n decrementValue(key) {\n const values = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n const value = values[key] - this.props.step;\n\n this.updateValue(key, value);\n }\n\n /**\n * Listen to mouseup event\n * @private\n * @return {void}\n */\n addDocumentMouseUpListener() {\n this.removeDocumentMouseUpListener();\n this.node.ownerDocument.addEventListener('mouseup', this.handleMouseUp);\n }\n\n /**\n * Listen to touchend event\n * @private\n * @return {void}\n */\n addDocumentTouchEndListener() {\n this.removeDocumentTouchEndListener();\n this.node.ownerDocument.addEventListener('touchend', this.handleTouchEnd);\n }\n\n /**\n * Stop listening to mouseup event\n * @private\n * @return {void}\n */\n removeDocumentMouseUpListener() {\n this.node.ownerDocument.removeEventListener('mouseup', this.handleMouseUp);\n }\n\n /**\n * Stop listening to touchend event\n * @private\n * @return {void}\n */\n removeDocumentTouchEndListener() {\n this.node.ownerDocument.removeEventListener('touchend', this.handleTouchEnd);\n }\n\n /**\n * Handle any \"mousemove\" event received by the slider\n * @private\n * @param {SyntheticEvent} event\n * @param {string} key\n * @return {void}\n */\n @autobind\n handleSliderDrag(event, key) {\n if (this.props.disabled) {\n return;\n }\n\n const position = valueTransformer.getPositionFromEvent(event, this.getTrackClientRect());\n\n requestAnimationFrame(() => this.updatePosition(key, position));\n }\n\n /**\n * Handle any \"keydown\" event received by the slider\n * @private\n * @param {SyntheticEvent} event\n * @param {string} key\n * @return {void}\n */\n @autobind\n handleSliderKeyDown(event, key) {\n if (this.props.disabled) {\n return;\n }\n\n switch (event.keyCode) {\n case LEFT_ARROW:\n case DOWN_ARROW:\n event.preventDefault();\n this.decrementValue(key);\n break;\n\n case RIGHT_ARROW:\n case UP_ARROW:\n event.preventDefault();\n this.incrementValue(key);\n break;\n\n default:\n break;\n }\n }\n\n /**\n * Handle any \"mousedown\" event received by the track\n * @private\n * @param {SyntheticEvent} event\n * @param {Point} position\n * @return {void}\n */\n @autobind\n handleTrackMouseDown(event, position) {\n if (this.props.disabled) {\n return;\n }\n\n event.preventDefault();\n\n this.updatePosition(this.getKeyByPosition(position), position);\n }\n\n /**\n * Handle the start of any mouse/touch event\n * @private\n * @return {void}\n */\n @autobind\n handleInteractionStart() {\n if (this.props.onChangeStart) {\n this.props.onChangeStart(this.props.value);\n }\n\n if (this.props.onChangeComplete && !isDefined(this.startValue)) {\n this.startValue = this.props.value;\n }\n }\n\n /**\n * Handle the end of any mouse/touch event\n * @private\n * @return {void}\n */\n @autobind\n handleInteractionEnd() {\n if (!this.props.onChangeComplete || !isDefined(this.startValue)) {\n return;\n }\n\n if (this.startValue !== this.props.value) {\n this.props.onChangeComplete(this.props.value);\n }\n\n this.startValue = null;\n }\n\n /**\n * Handle any \"keydown\" event received by the component\n * @private\n * @param {SyntheticEvent} event\n * @return {void}\n */\n @autobind\n handleKeyDown(event) {\n this.handleInteractionStart(event);\n }\n\n /**\n * Handle any \"keyup\" event received by the component\n * @private\n * @param {SyntheticEvent} event\n * @return {void}\n */\n @autobind\n handleKeyUp(event) {\n this.handleInteractionEnd(event);\n }\n\n /**\n * Handle any \"mousedown\" event received by the component\n * @private\n * @param {SyntheticEvent} event\n * @return {void}\n */\n @autobind\n handleMouseDown(event) {\n this.handleInteractionStart(event);\n this.addDocumentMouseUpListener();\n }\n\n /**\n * Handle any \"mouseup\" event received by the component\n * @private\n * @param {SyntheticEvent} event\n */\n @autobind\n handleMouseUp(event) {\n this.handleInteractionEnd(event);\n this.removeDocumentMouseUpListener();\n }\n\n /**\n * Handle any \"touchstart\" event received by the component\n * @private\n * @param {SyntheticEvent} event\n * @return {void}\n */\n @autobind\n handleTouchStart(event) {\n this.handleInteractionStart(event);\n this.addDocumentTouchEndListener();\n }\n\n /**\n * Handle any \"touchend\" event received by the component\n * @private\n * @param {SyntheticEvent} event\n */\n @autobind\n handleTouchEnd(event) {\n this.handleInteractionEnd(event);\n this.removeDocumentTouchEndListener();\n }\n\n /**\n * Return JSX of sliders\n * @private\n * @return {JSX.Element}\n */\n renderSliders() {\n const values = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n const percentages = valueTransformer.getPercentagesFromValues(values, this.props.minValue, this.props.maxValue);\n\n return this.getKeys().map((key) => {\n const value = values[key];\n const percentage = percentages[key];\n\n let { maxValue, minValue } = this.props;\n\n if (key === 'min') {\n maxValue = values.max;\n } else {\n minValue = values.min;\n }\n\n const slider = (\n \n );\n\n return slider;\n });\n }\n\n /**\n * Return JSX of hidden inputs\n * @private\n * @return {JSX.Element}\n */\n renderHiddenInputs() {\n if (!this.props.name) {\n return [];\n }\n\n const isMultiValue = this.isMultiValue();\n const values = valueTransformer.getValueFromProps(this.props, isMultiValue);\n\n return this.getKeys().map((key) => {\n const value = values[key];\n const name = isMultiValue ? `${this.props.name}${captialize(key)}` : this.props.name;\n\n return (\n \n );\n });\n }\n\n /**\n * @ignore\n * @override\n * @return {JSX.Element}\n */\n render() {\n const componentClassName = this.getComponentClassName();\n const values = valueTransformer.getValueFromProps(this.props, this.isMultiValue());\n const percentages = valueTransformer.getPercentagesFromValues(values, this.props.minValue, this.props.maxValue);\n\n return (\n { this.node = node; }}\n className={componentClassName}\n onKeyDown={this.handleKeyDown}\n onKeyUp={this.handleKeyUp}\n onMouseDown={this.handleMouseDown}\n onTouchStart={this.handleTouchStart}>\n \n {this.props.minValue}\n \n\n { this.trackNode = trackNode; }}\n percentages={percentages}\n onTrackMouseDown={this.handleTrackMouseDown}\n isExternal={this.props.isExternal} >\n {this.renderSliders()}\n \n\n \n {this.props.maxValue}\n \n\n {this.renderHiddenInputs()}\n \n );\n }\n}\n"]} \ No newline at end of file diff --git a/lib/js/input-range/key-codes.js b/lib/js/input-range/key-codes.js new file mode 100644 index 0000000..437450e --- /dev/null +++ b/lib/js/input-range/key-codes.js @@ -0,0 +1,17 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +/** @ignore */ +var DOWN_ARROW = exports.DOWN_ARROW = 40; + +/** @ignore */ +var LEFT_ARROW = exports.LEFT_ARROW = 37; + +/** @ignore */ +var RIGHT_ARROW = exports.RIGHT_ARROW = 39; + +/** @ignore */ +var UP_ARROW = exports.UP_ARROW = 38; +//# sourceMappingURL=key-codes.js.map \ No newline at end of file diff --git a/lib/js/input-range/key-codes.js.map b/lib/js/input-range/key-codes.js.map new file mode 100644 index 0000000..bf8dc03 --- /dev/null +++ b/lib/js/input-range/key-codes.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../src/js/input-range/key-codes.js"],"names":["DOWN_ARROW","LEFT_ARROW","RIGHT_ARROW","UP_ARROW"],"mappings":";;;;;AAAA;AACO,IAAMA,kCAAa,EAAnB;;AAEP;AACO,IAAMC,kCAAa,EAAnB;;AAEP;AACO,IAAMC,oCAAc,EAApB;;AAEP;AACO,IAAMC,8BAAW,EAAjB","file":"key-codes.js","sourcesContent":["/** @ignore */\nexport const DOWN_ARROW = 40;\n\n/** @ignore */\nexport const LEFT_ARROW = 37;\n\n/** @ignore */\nexport const RIGHT_ARROW = 39;\n\n/** @ignore */\nexport const UP_ARROW = 38;\n"]} \ No newline at end of file diff --git a/lib/js/input-range/label.js b/lib/js/input-range/label.js new file mode 100644 index 0000000..dc57422 --- /dev/null +++ b/lib/js/input-range/label.js @@ -0,0 +1,52 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = Label; + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +/** + * @ignore + * @param {Object} props + * @param {InputRangeClassNames} props.classNames + * @param {Function} props.formatLabel + * @param {string} props.type + */ +function Label(props) { + var labelValue = props.formatLabel ? props.formatLabel(props.children, props.type) : props.children; + var labelClassName = props.markerType === 'track' ? props.classNames.labelContainer + ' marker-' + props.markerValue : props.classNames.labelContainer; + return _react2.default.createElement( + 'span', + { className: props.classNames[props.type + 'Label'] }, + _react2.default.createElement( + 'span', + { className: labelClassName }, + labelValue + ) + ); +} + +/** + * @type {Object} + * @property {Function} children + * @property {Function} classNames + * @property {Function} formatLabel + * @property {Function} type + */ +Label.propTypes = { + children: _react2.default.PropTypes.node.isRequired, + classNames: _react2.default.PropTypes.objectOf(_react2.default.PropTypes.string).isRequired, + formatLabel: _react2.default.PropTypes.func, + type: _react2.default.PropTypes.string.isRequired, + markerType: _react2.default.PropTypes.string, + markerValue: _react2.default.PropTypes.string + +}; +module.exports = exports['default']; +//# sourceMappingURL=label.js.map \ No newline at end of file diff --git a/lib/js/input-range/label.js.map b/lib/js/input-range/label.js.map new file mode 100644 index 0000000..0ad12d3 --- /dev/null +++ b/lib/js/input-range/label.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../src/js/input-range/label.jsx"],"names":["Label","props","labelValue","formatLabel","children","type","labelClassName","markerType","classNames","labelContainer","markerValue","propTypes","PropTypes","node","isRequired","objectOf","string","func"],"mappings":";;;;;kBASwBA,K;;AATxB;;;;;;AAEA;;;;;;;AAOe,SAASA,KAAT,CAAeC,KAAf,EAAsB;AACnC,MAAMC,aAAaD,MAAME,WAAN,GAAoBF,MAAME,WAAN,CAAkBF,MAAMG,QAAxB,EAAkCH,MAAMI,IAAxC,CAApB,GAAoEJ,MAAMG,QAA7F;AACA,MAAME,iBAAiBL,MAAMM,UAAN,KAAqB,OAArB,GAAkCN,MAAMO,UAAN,CAAiBC,cAAnD,gBAA4ER,MAAMS,WAAlF,GAAkGT,MAAMO,UAAN,CAAiBC,cAA1I;AACA,SACE;AAAA;AAAA,MAAM,WAAWR,MAAMO,UAAN,CAAoBP,MAAMI,IAA1B,WAAjB;AACE;AAAA;AAAA,QAAM,WAAWC,cAAjB;AACGJ;AADH;AADF,GADF;AAOD;;AAED;;;;;;;AAOAF,MAAMW,SAAN,GAAkB;AAChBP,YAAU,gBAAMQ,SAAN,CAAgBC,IAAhB,CAAqBC,UADf;AAEhBN,cAAY,gBAAMI,SAAN,CAAgBG,QAAhB,CAAyB,gBAAMH,SAAN,CAAgBI,MAAzC,EAAiDF,UAF7C;AAGhBX,eAAa,gBAAMS,SAAN,CAAgBK,IAHb;AAIhBZ,QAAM,gBAAMO,SAAN,CAAgBI,MAAhB,CAAuBF,UAJb;AAKhBP,cAAY,gBAAMK,SAAN,CAAgBI,MALZ;AAMhBN,eAAa,gBAAME,SAAN,CAAgBI;;AANb,CAAlB","file":"label.js","sourcesContent":["import React from 'react';\n\n/**\n * @ignore\n * @param {Object} props\n * @param {InputRangeClassNames} props.classNames\n * @param {Function} props.formatLabel\n * @param {string} props.type\n */\nexport default function Label(props) {\n const labelValue = props.formatLabel ? props.formatLabel(props.children, props.type) : props.children;\n const labelClassName = props.markerType === 'track' ? `${props.classNames.labelContainer} marker-${props.markerValue}` : props.classNames.labelContainer;\n return (\n \n \n {labelValue}\n \n \n );\n}\n\n/**\n * @type {Object}\n * @property {Function} children\n * @property {Function} classNames\n * @property {Function} formatLabel\n * @property {Function} type\n */\nLabel.propTypes = {\n children: React.PropTypes.node.isRequired,\n classNames: React.PropTypes.objectOf(React.PropTypes.string).isRequired,\n formatLabel: React.PropTypes.func,\n type: React.PropTypes.string.isRequired,\n markerType: React.PropTypes.string,\n markerValue: React.PropTypes.string,\n\n};\n"]} \ No newline at end of file diff --git a/lib/js/input-range/range-prop-type.js b/lib/js/input-range/range-prop-type.js new file mode 100644 index 0000000..0d68d71 --- /dev/null +++ b/lib/js/input-range/range-prop-type.js @@ -0,0 +1,29 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = rangePropType; + +var _utils = require('../utils'); + +/** + * @ignore + * @param {Object} props - React component props + * @return {?Error} Return Error if validation fails + */ +function rangePropType(props) { + var maxValue = props.maxValue, + minValue = props.minValue; + + + if (!(0, _utils.isNumber)(minValue) || !(0, _utils.isNumber)(maxValue)) { + return new Error('"minValue" and "maxValue" must be a number'); + } + + if (minValue >= maxValue) { + return new Error('"minValue" must be smaller than "maxValue"'); + } +} +module.exports = exports['default']; +//# sourceMappingURL=range-prop-type.js.map \ No newline at end of file diff --git a/lib/js/input-range/range-prop-type.js.map b/lib/js/input-range/range-prop-type.js.map new file mode 100644 index 0000000..7a9b7f5 --- /dev/null +++ b/lib/js/input-range/range-prop-type.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../src/js/input-range/range-prop-type.js"],"names":["rangePropType","props","maxValue","minValue","Error"],"mappings":";;;;;kBAOwBA,a;;AAPxB;;AAEA;;;;;AAKe,SAASA,aAAT,CAAuBC,KAAvB,EAA8B;AAAA,MACnCC,QADmC,GACZD,KADY,CACnCC,QADmC;AAAA,MACzBC,QADyB,GACZF,KADY,CACzBE,QADyB;;;AAG3C,MAAI,CAAC,qBAASA,QAAT,CAAD,IAAuB,CAAC,qBAASD,QAAT,CAA5B,EAAgD;AAC9C,WAAO,IAAIE,KAAJ,CAAU,4CAAV,CAAP;AACD;;AAED,MAAID,YAAYD,QAAhB,EAA0B;AACxB,WAAO,IAAIE,KAAJ,CAAU,4CAAV,CAAP;AACD;AACF","file":"range-prop-type.js","sourcesContent":["import { isNumber } from '../utils';\n\n/**\n * @ignore\n * @param {Object} props - React component props\n * @return {?Error} Return Error if validation fails\n */\nexport default function rangePropType(props) {\n const { maxValue, minValue } = props;\n\n if (!isNumber(minValue) || !isNumber(maxValue)) {\n return new Error('\"minValue\" and \"maxValue\" must be a number');\n }\n\n if (minValue >= maxValue) {\n return new Error('\"minValue\" must be smaller than \"maxValue\"');\n }\n}\n"]} \ No newline at end of file diff --git a/lib/js/input-range/slider.js b/lib/js/input-range/slider.js new file mode 100644 index 0000000..ad79615 --- /dev/null +++ b/lib/js/input-range/slider.js @@ -0,0 +1,396 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +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 _desc, _value, _class; + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _autobindDecorator = require('autobind-decorator'); + +var _autobindDecorator2 = _interopRequireDefault(_autobindDecorator); + +var _label = require('./label'); + +var _label2 = _interopRequireDefault(_label); + +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; } + +function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) { + var desc = {}; + Object['ke' + 'ys'](descriptor).forEach(function (key) { + desc[key] = descriptor[key]; + }); + desc.enumerable = !!desc.enumerable; + desc.configurable = !!desc.configurable; + + if ('value' in desc || desc.initializer) { + desc.writable = true; + } + + desc = decorators.slice().reverse().reduce(function (desc, decorator) { + return decorator(target, property, desc) || desc; + }, desc); + + if (context && desc.initializer !== void 0) { + desc.value = desc.initializer ? desc.initializer.call(context) : void 0; + desc.initializer = undefined; + } + + if (desc.initializer === void 0) { + Object['define' + 'Property'](target, property, desc); + desc = null; + } + + return desc; +} + +/** + * @ignore + */ +var Slider = (_class = function (_React$Component) { + _inherits(Slider, _React$Component); + + _createClass(Slider, null, [{ + key: 'propTypes', + + /** + * Accepted propTypes of Slider + * @override + * @return {Object} + * @property {Function} ariaLabelledby + * @property {Function} ariaControls + * @property {Function} className + * @property {Function} formatLabel + * @property {Function} maxValue + * @property {Function} minValue + * @property {Function} onSliderDrag + * @property {Function} onSliderKeyDown + * @property {Function} percentage + * @property {Function} type + * @property {Function} value + */ + get: function get() { + return { + ariaLabelledby: _react2.default.PropTypes.string, + ariaControls: _react2.default.PropTypes.string, + classNames: _react2.default.PropTypes.objectOf(_react2.default.PropTypes.string).isRequired, + formatLabel: _react2.default.PropTypes.func, + maxValue: _react2.default.PropTypes.number, + minValue: _react2.default.PropTypes.number, + onSliderDrag: _react2.default.PropTypes.func.isRequired, + onSliderKeyDown: _react2.default.PropTypes.func.isRequired, + percentage: _react2.default.PropTypes.number.isRequired, + type: _react2.default.PropTypes.string.isRequired, + value: _react2.default.PropTypes.number.isRequired + }; + } + + /** + * @param {Object} props + * @param {string} [props.ariaLabelledby] + * @param {string} [props.ariaControls] + * @param {InputRangeClassNames} props.classNames + * @param {Function} [props.formatLabel] + * @param {number} [props.maxValue] + * @param {number} [props.minValue] + * @param {Function} props.onSliderKeyDown + * @param {Function} props.onSliderDrag + * @param {number} props.percentage + * @param {number} props.type + * @param {number} props.value + */ + + }]); + + function Slider(props) { + _classCallCheck(this, Slider); + + /** + * @private + * @type {?Component} + */ + var _this = _possibleConstructorReturn(this, (Slider.__proto__ || Object.getPrototypeOf(Slider)).call(this, props)); + + _this.node = null; + return _this; + } + + /** + * @ignore + * @override + * @return {void} + */ + + + _createClass(Slider, [{ + key: 'componentWillUnmount', + value: function componentWillUnmount() { + this.removeDocumentMouseMoveListener(); + this.removeDocumentMouseUpListener(); + this.removeDocumentTouchEndListener(); + this.removeDocumentTouchMoveListener(); + } + + /** + * @private + * @return {Object} + */ + + }, { + key: 'getStyle', + value: function getStyle() { + var perc = (this.props.percentage || 0) * 100; + var style = { + position: 'absolute', + left: perc + '%' + }; + + return style; + } + + /** + * Listen to mousemove event + * @private + * @return {void} + */ + + }, { + key: 'addDocumentMouseMoveListener', + value: function addDocumentMouseMoveListener() { + this.removeDocumentMouseMoveListener(); + this.node.ownerDocument.addEventListener('mousemove', this.handleMouseMove); + } + + /** + * Listen to mouseup event + * @private + * @return {void} + */ + + }, { + key: 'addDocumentMouseUpListener', + value: function addDocumentMouseUpListener() { + this.removeDocumentMouseUpListener(); + this.node.ownerDocument.addEventListener('mouseup', this.handleMouseUp); + } + + /** + * Listen to touchmove event + * @private + * @return {void} + */ + + }, { + key: 'addDocumentTouchMoveListener', + value: function addDocumentTouchMoveListener() { + this.removeDocumentTouchMoveListener(); + this.node.ownerDocument.addEventListener('touchmove', this.handleTouchMove); + } + + /** + * Listen to touchend event + * @private + * @return {void} + */ + + }, { + key: 'addDocumentTouchEndListener', + value: function addDocumentTouchEndListener() { + this.removeDocumentTouchEndListener(); + this.node.ownerDocument.addEventListener('touchend', this.handleTouchEnd); + } + + /** + * @private + * @return {void} + */ + + }, { + key: 'removeDocumentMouseMoveListener', + value: function removeDocumentMouseMoveListener() { + this.node.ownerDocument.removeEventListener('mousemove', this.handleMouseMove); + } + + /** + * @private + * @return {void} + */ + + }, { + key: 'removeDocumentMouseUpListener', + value: function removeDocumentMouseUpListener() { + this.node.ownerDocument.removeEventListener('mouseup', this.handleMouseUp); + } + + /** + * @private + * @return {void} + */ + + }, { + key: 'removeDocumentTouchMoveListener', + value: function removeDocumentTouchMoveListener() { + this.node.ownerDocument.removeEventListener('touchmove', this.handleTouchMove); + } + + /** + * @private + * @return {void} + */ + + }, { + key: 'removeDocumentTouchEndListener', + value: function removeDocumentTouchEndListener() { + this.node.ownerDocument.removeEventListener('touchend', this.handleTouchUp); + } + + /** + * @private + * @return {void} + */ + + }, { + key: 'handleMouseDown', + value: function handleMouseDown() { + this.addDocumentMouseMoveListener(); + this.addDocumentMouseUpListener(); + } + + /** + * @private + * @return {void} + */ + + }, { + key: 'handleMouseUp', + value: function handleMouseUp() { + this.removeDocumentMouseMoveListener(); + this.removeDocumentMouseUpListener(); + } + + /** + * @private + * @param {SyntheticEvent} event + * @return {void} + */ + + }, { + key: 'handleMouseMove', + value: function handleMouseMove(event) { + this.props.onSliderDrag(event, this.props.type); + } + + /** + * @private + * @return {void} + */ + + }, { + key: 'handleTouchStart', + value: function handleTouchStart() { + this.addDocumentTouchEndListener(); + this.addDocumentTouchMoveListener(); + } + + /** + * @private + * @param {SyntheticEvent} event + * @return {void} + */ + + }, { + key: 'handleTouchMove', + value: function handleTouchMove(event) { + this.props.onSliderDrag(event, this.props.type); + } + + /** + * @private + * @return {void} + */ + + }, { + key: 'handleTouchEnd', + value: function handleTouchEnd() { + this.removeDocumentTouchMoveListener(); + this.removeDocumentTouchEndListener(); + } + + /** + * @private + * @param {SyntheticEvent} event + * @return {void} + */ + + }, { + key: 'handleKeyDown', + value: function handleKeyDown(event) { + this.props.onSliderKeyDown(event, this.props.type); + } + + /** + * @override + * @return {JSX.Element} + */ + + }, { + key: 'render', + value: function render() { + var _this2 = this; + + var style = this.getStyle(); + + return _react2.default.createElement( + 'span', + { + className: this.props.classNames.sliderContainer, + ref: function ref(node) { + _this2.node = node; + }, + style: style }, + _react2.default.createElement( + _label2.default, + { + classNames: this.props.classNames, + formatLabel: this.props.formatLabel, + type: 'value', + markerType: 'track', + markerValue: this.props.type }, + this.props.value + ), + _react2.default.createElement('div', { + 'aria-labelledby': this.props.ariaLabelledby, + 'aria-controls': this.props.ariaControls, + 'aria-valuemax': this.props.maxValue, + 'aria-valuemin': this.props.minValue, + 'aria-valuenow': this.props.value, + className: this.props.classNames.slider, + draggable: 'false', + onKeyDown: this.handleKeyDown, + onMouseDown: this.handleMouseDown, + onTouchStart: this.handleTouchStart, + role: 'slider', + tabIndex: '0' }) + ); + } + }]); + + return Slider; +}(_react2.default.Component), (_applyDecoratedDescriptor(_class.prototype, 'handleMouseDown', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleMouseDown'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleMouseUp', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleMouseUp'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleMouseMove', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleMouseMove'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleTouchStart', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleTouchStart'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleTouchMove', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleTouchMove'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleTouchEnd', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleTouchEnd'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleKeyDown', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleKeyDown'), _class.prototype)), _class); +exports.default = Slider; +module.exports = exports['default']; +//# sourceMappingURL=slider.js.map \ No newline at end of file diff --git a/lib/js/input-range/slider.js.map b/lib/js/input-range/slider.js.map new file mode 100644 index 0000000..bb0fe8b --- /dev/null +++ b/lib/js/input-range/slider.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../src/js/input-range/slider.jsx"],"names":["Slider","ariaLabelledby","PropTypes","string","ariaControls","classNames","objectOf","isRequired","formatLabel","func","maxValue","number","minValue","onSliderDrag","onSliderKeyDown","percentage","type","value","props","node","removeDocumentMouseMoveListener","removeDocumentMouseUpListener","removeDocumentTouchEndListener","removeDocumentTouchMoveListener","perc","style","position","left","ownerDocument","addEventListener","handleMouseMove","handleMouseUp","handleTouchMove","handleTouchEnd","removeEventListener","handleTouchUp","addDocumentMouseMoveListener","addDocumentMouseUpListener","event","addDocumentTouchEndListener","addDocumentTouchMoveListener","getStyle","sliderContainer","slider","handleKeyDown","handleMouseDown","handleTouchStart","Component"],"mappings":"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","file":"slider.js","sourcesContent":["import React from 'react';\nimport autobind from 'autobind-decorator';\nimport Label from './label';\n\n/**\n * @ignore\n */\nexport default class Slider extends React.Component {\n /**\n * Accepted propTypes of Slider\n * @override\n * @return {Object}\n * @property {Function} ariaLabelledby\n * @property {Function} ariaControls\n * @property {Function} className\n * @property {Function} formatLabel\n * @property {Function} maxValue\n * @property {Function} minValue\n * @property {Function} onSliderDrag\n * @property {Function} onSliderKeyDown\n * @property {Function} percentage\n * @property {Function} type\n * @property {Function} value\n */\n static get propTypes() {\n return {\n ariaLabelledby: React.PropTypes.string,\n ariaControls: React.PropTypes.string,\n classNames: React.PropTypes.objectOf(React.PropTypes.string).isRequired,\n formatLabel: React.PropTypes.func,\n maxValue: React.PropTypes.number,\n minValue: React.PropTypes.number,\n onSliderDrag: React.PropTypes.func.isRequired,\n onSliderKeyDown: React.PropTypes.func.isRequired,\n percentage: React.PropTypes.number.isRequired,\n type: React.PropTypes.string.isRequired,\n value: React.PropTypes.number.isRequired,\n };\n }\n\n /**\n * @param {Object} props\n * @param {string} [props.ariaLabelledby]\n * @param {string} [props.ariaControls]\n * @param {InputRangeClassNames} props.classNames\n * @param {Function} [props.formatLabel]\n * @param {number} [props.maxValue]\n * @param {number} [props.minValue]\n * @param {Function} props.onSliderKeyDown\n * @param {Function} props.onSliderDrag\n * @param {number} props.percentage\n * @param {number} props.type\n * @param {number} props.value\n */\n constructor(props) {\n super(props);\n\n /**\n * @private\n * @type {?Component}\n */\n this.node = null;\n }\n\n /**\n * @ignore\n * @override\n * @return {void}\n */\n componentWillUnmount() {\n this.removeDocumentMouseMoveListener();\n this.removeDocumentMouseUpListener();\n this.removeDocumentTouchEndListener();\n this.removeDocumentTouchMoveListener();\n }\n\n /**\n * @private\n * @return {Object}\n */\n getStyle() {\n const perc = (this.props.percentage || 0) * 100;\n const style = {\n position: 'absolute',\n left: `${perc}%`,\n };\n\n return style;\n }\n\n /**\n * Listen to mousemove event\n * @private\n * @return {void}\n */\n addDocumentMouseMoveListener() {\n this.removeDocumentMouseMoveListener();\n this.node.ownerDocument.addEventListener('mousemove', this.handleMouseMove);\n }\n\n /**\n * Listen to mouseup event\n * @private\n * @return {void}\n */\n addDocumentMouseUpListener() {\n this.removeDocumentMouseUpListener();\n this.node.ownerDocument.addEventListener('mouseup', this.handleMouseUp);\n }\n\n /**\n * Listen to touchmove event\n * @private\n * @return {void}\n */\n addDocumentTouchMoveListener() {\n this.removeDocumentTouchMoveListener();\n this.node.ownerDocument.addEventListener('touchmove', this.handleTouchMove);\n }\n\n /**\n * Listen to touchend event\n * @private\n * @return {void}\n */\n addDocumentTouchEndListener() {\n this.removeDocumentTouchEndListener();\n this.node.ownerDocument.addEventListener('touchend', this.handleTouchEnd);\n }\n\n /**\n * @private\n * @return {void}\n */\n removeDocumentMouseMoveListener() {\n this.node.ownerDocument.removeEventListener('mousemove', this.handleMouseMove);\n }\n\n /**\n * @private\n * @return {void}\n */\n removeDocumentMouseUpListener() {\n this.node.ownerDocument.removeEventListener('mouseup', this.handleMouseUp);\n }\n\n /**\n * @private\n * @return {void}\n */\n removeDocumentTouchMoveListener() {\n this.node.ownerDocument.removeEventListener('touchmove', this.handleTouchMove);\n }\n\n /**\n * @private\n * @return {void}\n */\n removeDocumentTouchEndListener() {\n this.node.ownerDocument.removeEventListener('touchend', this.handleTouchUp);\n }\n\n /**\n * @private\n * @return {void}\n */\n @autobind\n handleMouseDown() {\n this.addDocumentMouseMoveListener();\n this.addDocumentMouseUpListener();\n }\n\n /**\n * @private\n * @return {void}\n */\n @autobind\n handleMouseUp() {\n this.removeDocumentMouseMoveListener();\n this.removeDocumentMouseUpListener();\n }\n\n /**\n * @private\n * @param {SyntheticEvent} event\n * @return {void}\n */\n @autobind\n handleMouseMove(event) {\n this.props.onSliderDrag(event, this.props.type);\n }\n\n /**\n * @private\n * @return {void}\n */\n @autobind\n handleTouchStart() {\n this.addDocumentTouchEndListener();\n this.addDocumentTouchMoveListener();\n }\n\n /**\n * @private\n * @param {SyntheticEvent} event\n * @return {void}\n */\n @autobind\n handleTouchMove(event) {\n this.props.onSliderDrag(event, this.props.type);\n }\n\n /**\n * @private\n * @return {void}\n */\n @autobind\n handleTouchEnd() {\n this.removeDocumentTouchMoveListener();\n this.removeDocumentTouchEndListener();\n }\n\n /**\n * @private\n * @param {SyntheticEvent} event\n * @return {void}\n */\n @autobind\n handleKeyDown(event) {\n this.props.onSliderKeyDown(event, this.props.type);\n }\n\n /**\n * @override\n * @return {JSX.Element}\n */\n render() {\n const style = this.getStyle();\n\n return (\n { this.node = node; }}\n style={style}>\n \n {this.props.value}\n \n\n \n \n );\n }\n}\n"]} \ No newline at end of file diff --git a/lib/js/input-range/track.js b/lib/js/input-range/track.js new file mode 100644 index 0000000..bb826a0 --- /dev/null +++ b/lib/js/input-range/track.js @@ -0,0 +1,235 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +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 _desc, _value, _class; + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _autobindDecorator = require('autobind-decorator'); + +var _autobindDecorator2 = _interopRequireDefault(_autobindDecorator); + +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; } + +function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) { + var desc = {}; + Object['ke' + 'ys'](descriptor).forEach(function (key) { + desc[key] = descriptor[key]; + }); + desc.enumerable = !!desc.enumerable; + desc.configurable = !!desc.configurable; + + if ('value' in desc || desc.initializer) { + desc.writable = true; + } + + desc = decorators.slice().reverse().reduce(function (desc, decorator) { + return decorator(target, property, desc) || desc; + }, desc); + + if (context && desc.initializer !== void 0) { + desc.value = desc.initializer ? desc.initializer.call(context) : void 0; + desc.initializer = undefined; + } + + if (desc.initializer === void 0) { + Object['define' + 'Property'](target, property, desc); + desc = null; + } + + return desc; +} + +/** + * @ignore + */ +var Track = (_class = function (_React$Component) { + _inherits(Track, _React$Component); + + _createClass(Track, null, [{ + key: 'propTypes', + + /** + * @override + * @return {Object} + * @property {Function} children + * @property {Function} classNames + * @property {Function} onTrackMouseDown + * @property {Function} percentages + */ + get: function get() { + return { + children: _react2.default.PropTypes.node.isRequired, + classNames: _react2.default.PropTypes.objectOf(_react2.default.PropTypes.string).isRequired, + onTrackMouseDown: _react2.default.PropTypes.func.isRequired, + percentages: _react2.default.PropTypes.objectOf(_react2.default.PropTypes.number).isRequired, + isExternal: _react2.default.PropTypes.bool.isRequired + }; + } + + /** + * @param {Object} props + * @param {InputRangeClassNames} props.classNames + * @param {Function} props.onTrackMouseDown + * @param {number} props.percentages + */ + + }]); + + function Track(props) { + _classCallCheck(this, Track); + + /** + * @private + * @type {?Component} + */ + var _this = _possibleConstructorReturn(this, (Track.__proto__ || Object.getPrototypeOf(Track)).call(this, props)); + + _this.node = null; + return _this; + } + + /** + * @private + * @return {ClientRect} + */ + + + _createClass(Track, [{ + key: 'getClientRect', + value: function getClientRect() { + return this.node.getBoundingClientRect(); + } + + /** + * @private + * @return {Object} CSS styles + */ + + }, { + key: 'getActiveTrackStyle', + value: function getActiveTrackStyle() { + var width = (this.props.percentages.max - this.props.percentages.min) * 100 + '%'; + var left = this.props.percentages.min * 100 + '%'; + + return { left: left, width: width }; + } + + /** + * @private + * @return {Object} CSS styles + */ + + }, { + key: 'getActiveTrackStylePre', + value: function getActiveTrackStylePre() { + var width = this.props.percentages.min * 100 + '%'; + var left = '0'; + var float = 'left'; + return { left: left, width: width, float: float }; + } + + /** + * @private + * @return {Object} CSS styles + */ + + }, { + key: 'getActiveTrackStylePost', + value: function getActiveTrackStylePost() { + var width = (1 - this.props.percentages.max) * 100 + '%'; + var left = this.props.percentages.max * 100 + '%'; + + return { left: left, width: width }; + } + + /** + * @private + * @param {SyntheticEvent} event - User event + */ + + }, { + key: 'handleMouseDown', + value: function handleMouseDown(event) { + var clientX = event.touches ? event.touches[0].clientX : event.clientX; + var trackClientRect = this.getClientRect(); + var position = { + x: clientX - trackClientRect.left, + y: 0 + }; + + this.props.onTrackMouseDown(event, position); + } + + /** + * @private + * @param {SyntheticEvent} event - User event + */ + + }, { + key: 'handleTouchStart', + value: function handleTouchStart(event) { + event.preventDefault(); + + this.handleMouseDown(event); + } + + /** + * @override + * @return {JSX.Element} + */ + + }, { + key: 'render', + value: function render() { + var _this2 = this; + + var activeTrackStyle = this.getActiveTrackStyle(); + var activeTrackStyleExternalPre = this.getActiveTrackStylePre(); + var activeTrackStyleExternalPost = this.getActiveTrackStylePost(); + + return _react2.default.createElement( + 'div', + { + className: this.props.classNames.track, + onMouseDown: this.handleMouseDown, + onTouchStart: this.handleTouchStart, + ref: function ref(node) { + _this2.node = node; + } }, + !this.props.isExternal ? _react2.default.createElement('div', { + style: activeTrackStyle, + className: this.props.classNames.activeTrack }) : _react2.default.createElement( + 'div', + null, + _react2.default.createElement('div', { + style: activeTrackStyleExternalPre, + className: this.props.classNames.activeTrack }), + _react2.default.createElement('div', { + style: activeTrackStyleExternalPost, + className: this.props.classNames.activeTrack }) + ), + this.props.children + ); + } + }]); + + return Track; +}(_react2.default.Component), (_applyDecoratedDescriptor(_class.prototype, 'getActiveTrackStylePre', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'getActiveTrackStylePre'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'getActiveTrackStylePost', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'getActiveTrackStylePost'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleMouseDown', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleMouseDown'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleTouchStart', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'handleTouchStart'), _class.prototype)), _class); +exports.default = Track; +module.exports = exports['default']; +//# sourceMappingURL=track.js.map \ No newline at end of file diff --git a/lib/js/input-range/track.js.map b/lib/js/input-range/track.js.map new file mode 100644 index 0000000..9ad123d --- /dev/null +++ b/lib/js/input-range/track.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../src/js/input-range/track.jsx"],"names":["Track","children","PropTypes","node","isRequired","classNames","objectOf","string","onTrackMouseDown","func","percentages","number","isExternal","bool","props","getBoundingClientRect","width","max","min","left","float","event","clientX","touches","trackClientRect","getClientRect","position","x","y","preventDefault","handleMouseDown","activeTrackStyle","getActiveTrackStyle","activeTrackStyleExternalPre","getActiveTrackStylePre","activeTrackStyleExternalPost","getActiveTrackStylePost","track","handleTouchStart","activeTrack","Component"],"mappings":"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","file":"track.js","sourcesContent":["import React from 'react';\nimport autobind from 'autobind-decorator';\n\n/**\n * @ignore\n */\nexport default class Track extends React.Component {\n /**\n * @override\n * @return {Object}\n * @property {Function} children\n * @property {Function} classNames\n * @property {Function} onTrackMouseDown\n * @property {Function} percentages\n */\n static get propTypes() {\n return {\n children: React.PropTypes.node.isRequired,\n classNames: React.PropTypes.objectOf(React.PropTypes.string).isRequired,\n onTrackMouseDown: React.PropTypes.func.isRequired,\n percentages: React.PropTypes.objectOf(React.PropTypes.number).isRequired,\n isExternal: React.PropTypes.bool.isRequired,\n };\n }\n\n /**\n * @param {Object} props\n * @param {InputRangeClassNames} props.classNames\n * @param {Function} props.onTrackMouseDown\n * @param {number} props.percentages\n */\n constructor(props) {\n super(props);\n\n /**\n * @private\n * @type {?Component}\n */\n this.node = null;\n }\n\n /**\n * @private\n * @return {ClientRect}\n */\n getClientRect() {\n return this.node.getBoundingClientRect();\n }\n\n /**\n * @private\n * @return {Object} CSS styles\n */\n getActiveTrackStyle() {\n const width = `${(this.props.percentages.max - this.props.percentages.min) * 100}%`;\n const left = `${this.props.percentages.min * 100}%`;\n\n return { left, width };\n }\n\n /**\n * @private\n * @return {Object} CSS styles\n */\n @autobind\n getActiveTrackStylePre() {\n const width = `${(this.props.percentages.min) * 100}%`;\n const left = '0';\n const float = 'left';\n return { left, width, float };\n }\n\n\n /**\n * @private\n * @return {Object} CSS styles\n */\n @autobind\n getActiveTrackStylePost() {\n const width = `${(1 - this.props.percentages.max) * 100}%`;\n const left = `${this.props.percentages.max * 100}%`;\n\n return { left, width };\n }\n\n /**\n * @private\n * @param {SyntheticEvent} event - User event\n */\n @autobind\n handleMouseDown(event) {\n const clientX = event.touches ? event.touches[0].clientX : event.clientX;\n const trackClientRect = this.getClientRect();\n const position = {\n x: clientX - trackClientRect.left,\n y: 0,\n };\n\n this.props.onTrackMouseDown(event, position);\n }\n\n /**\n * @private\n * @param {SyntheticEvent} event - User event\n */\n @autobind\n handleTouchStart(event) {\n event.preventDefault();\n\n this.handleMouseDown(event);\n }\n\n /**\n * @override\n * @return {JSX.Element}\n */\n render() {\n const activeTrackStyle = this.getActiveTrackStyle();\n const activeTrackStyleExternalPre = this.getActiveTrackStylePre();\n const activeTrackStyleExternalPost = this.getActiveTrackStylePost();\n\n return (\n { this.node = node; }}>\n {\n !this.props.isExternal ? (\n \n ) : (\n
\n \n \n
\n )\n }\n {this.props.children}\n \n );\n }\n}\n"]} \ No newline at end of file diff --git a/lib/js/input-range/value-prop-type.js b/lib/js/input-range/value-prop-type.js new file mode 100644 index 0000000..420623c --- /dev/null +++ b/lib/js/input-range/value-prop-type.js @@ -0,0 +1,34 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = valuePropType; + +var _utils = require('../utils'); + +/** + * @ignore + * @param {Object} props + * @return {?Error} Return Error if validation fails + */ +function valuePropType(props, propName) { + var maxValue = props.maxValue, + minValue = props.minValue; + + var value = props[propName]; + + if (!(0, _utils.isNumber)(value) && (!(0, _utils.isObject)(value) || !(0, _utils.isNumber)(value.min) || !(0, _utils.isNumber)(value.max))) { + return new Error('"' + propName + '" must be a number or a range object'); + } + + if ((0, _utils.isNumber)(value) && (value < minValue || value > maxValue)) { + return new Error('"' + propName + '" must be in between "minValue" and "maxValue"'); + } + + if ((0, _utils.isObject)(value) && (value.min < minValue || value.min > maxValue || value.max < minValue || value.max > maxValue)) { + return new Error('"' + propName + '" must be in between "minValue" and "maxValue"'); + } +} +module.exports = exports['default']; +//# sourceMappingURL=value-prop-type.js.map \ No newline at end of file diff --git a/lib/js/input-range/value-prop-type.js.map b/lib/js/input-range/value-prop-type.js.map new file mode 100644 index 0000000..e0c9061 --- /dev/null +++ b/lib/js/input-range/value-prop-type.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../src/js/input-range/value-prop-type.js"],"names":["valuePropType","props","propName","maxValue","minValue","value","min","max","Error"],"mappings":";;;;;kBAOwBA,a;;AAPxB;;AAEA;;;;;AAKe,SAASA,aAAT,CAAuBC,KAAvB,EAA8BC,QAA9B,EAAwC;AAAA,MAC7CC,QAD6C,GACtBF,KADsB,CAC7CE,QAD6C;AAAA,MACnCC,QADmC,GACtBH,KADsB,CACnCG,QADmC;;AAErD,MAAMC,QAAQJ,MAAMC,QAAN,CAAd;;AAEA,MAAI,CAAC,qBAASG,KAAT,CAAD,KAAqB,CAAC,qBAASA,KAAT,CAAD,IAAoB,CAAC,qBAASA,MAAMC,GAAf,CAArB,IAA4C,CAAC,qBAASD,MAAME,GAAf,CAAlE,CAAJ,EAA4F;AAC1F,WAAO,IAAIC,KAAJ,OAAcN,QAAd,0CAAP;AACD;;AAED,MAAI,qBAASG,KAAT,MAAoBA,QAAQD,QAAR,IAAoBC,QAAQF,QAAhD,CAAJ,EAA+D;AAC7D,WAAO,IAAIK,KAAJ,OAAcN,QAAd,oDAAP;AACD;;AAED,MAAI,qBAASG,KAAT,MAAoBA,MAAMC,GAAN,GAAYF,QAAZ,IAAwBC,MAAMC,GAAN,GAAYH,QAApC,IAAgDE,MAAME,GAAN,GAAYH,QAA5D,IAAwEC,MAAME,GAAN,GAAYJ,QAAxG,CAAJ,EAAuH;AACrH,WAAO,IAAIK,KAAJ,OAAcN,QAAd,oDAAP;AACD;AACF","file":"value-prop-type.js","sourcesContent":["import { isNumber, isObject } from '../utils';\n\n/**\n * @ignore\n * @param {Object} props\n * @return {?Error} Return Error if validation fails\n */\nexport default function valuePropType(props, propName) {\n const { maxValue, minValue } = props;\n const value = props[propName];\n\n if (!isNumber(value) && (!isObject(value) || !isNumber(value.min) || !isNumber(value.max))) {\n return new Error(`\"${propName}\" must be a number or a range object`);\n }\n\n if (isNumber(value) && (value < minValue || value > maxValue)) {\n return new Error(`\"${propName}\" must be in between \"minValue\" and \"maxValue\"`);\n }\n\n if (isObject(value) && (value.min < minValue || value.min > maxValue || value.max < minValue || value.max > maxValue)) {\n return new Error(`\"${propName}\" must be in between \"minValue\" and \"maxValue\"`);\n }\n}\n"]} \ No newline at end of file diff --git a/lib/js/input-range/value-transformer.js b/lib/js/input-range/value-transformer.js new file mode 100644 index 0000000..cbfd766 --- /dev/null +++ b/lib/js/input-range/value-transformer.js @@ -0,0 +1,165 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +exports.getPercentageFromPosition = getPercentageFromPosition; +exports.getValueFromPosition = getValueFromPosition; +exports.getValueFromProps = getValueFromProps; +exports.getPercentageFromValue = getPercentageFromValue; +exports.getPercentagesFromValues = getPercentagesFromValues; +exports.getPositionFromValue = getPositionFromValue; +exports.getPositionsFromValues = getPositionsFromValues; +exports.getPositionFromEvent = getPositionFromEvent; +exports.getStepValueFromValue = getStepValueFromValue; + +var _utils = require('../utils'); + +/** + * Convert a point into a percentage value + * @ignore + * @param {Point} position + * @param {ClientRect} clientRect + * @return {number} Percentage value + */ +function getPercentageFromPosition(position, clientRect) { + var length = clientRect.width; + var sizePerc = position.x / length; + + return sizePerc || 0; +} + +/** + * Convert a point into a model value + * @ignore + * @param {Point} position + * @param {number} minValue + * @param {number} maxValue + * @param {ClientRect} clientRect + * @return {number} + */ +function getValueFromPosition(position, minValue, maxValue, clientRect) { + var sizePerc = getPercentageFromPosition(position, clientRect); + var valueDiff = maxValue - minValue; + + return minValue + valueDiff * sizePerc; +} + +/** + * Convert props into a range value + * @ignore + * @param {Object} props + * @param {boolean} isMultiValue + * @return {Range} + */ +function getValueFromProps(props, isMultiValue) { + if (isMultiValue) { + return _extends({}, props.value); + } + + return { + min: props.minValue, + max: props.value + }; +} + +/** + * Convert a model value into a percentage value + * @ignore + * @param {number} value + * @param {number} minValue + * @param {number} maxValue + * @return {number} + */ +function getPercentageFromValue(value, minValue, maxValue) { + var validValue = (0, _utils.clamp)(value, minValue, maxValue); + var valueDiff = maxValue - minValue; + var valuePerc = (validValue - minValue) / valueDiff; + + return valuePerc || 0; +} + +/** + * Convert model values into percentage values + * @ignore + * @param {Range} values + * @param {number} minValue + * @param {number} maxValue + * @return {Range} + */ +function getPercentagesFromValues(values, minValue, maxValue) { + return { + min: getPercentageFromValue(values.min, minValue, maxValue), + max: getPercentageFromValue(values.max, minValue, maxValue) + }; +} + +/** + * Convert a value into a point + * @ignore + * @param {number} value + * @param {number} minValue + * @param {number} maxValue + * @param {ClientRect} clientRect + * @return {Point} Position + */ +function getPositionFromValue(value, minValue, maxValue, clientRect) { + var length = clientRect.width; + var valuePerc = getPercentageFromValue(value, minValue, maxValue); + var positionValue = valuePerc * length; + + return { + x: positionValue, + y: 0 + }; +} + +/** + * Convert a range of values into points + * @ignore + * @param {Range} values + * @param {number} minValue + * @param {number} maxValue + * @param {ClientRect} clientRect + * @return {Range} + */ +function getPositionsFromValues(values, minValue, maxValue, clientRect) { + return { + min: getPositionFromValue(values.min, minValue, maxValue, clientRect), + max: getPositionFromValue(values.max, minValue, maxValue, clientRect) + }; +} + +/** + * Convert an event into a point + * @ignore + * @param {Event} event + * @param {ClientRect} clientRect + * @return {Point} + */ +function getPositionFromEvent(event, clientRect) { + var length = clientRect.width; + + var _ref = event.touches ? event.touches[0] : event, + clientX = _ref.clientX; + + return { + x: (0, _utils.clamp)(clientX - clientRect.left, 0, length), + y: 0 + }; +} + +/** + * Convert a value into a step value + * @ignore + * @param {number} value + * @param {number} valuePerStep + * @return {number} + */ +function getStepValueFromValue(value, valuePerStep) { + return Math.round(value / valuePerStep) * valuePerStep; +} +//# sourceMappingURL=value-transformer.js.map \ No newline at end of file diff --git a/lib/js/input-range/value-transformer.js.map b/lib/js/input-range/value-transformer.js.map new file mode 100644 index 0000000..cbfe678 --- /dev/null +++ b/lib/js/input-range/value-transformer.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../src/js/input-range/value-transformer.js"],"names":["getPercentageFromPosition","getValueFromPosition","getValueFromProps","getPercentageFromValue","getPercentagesFromValues","getPositionFromValue","getPositionsFromValues","getPositionFromEvent","getStepValueFromValue","position","clientRect","length","width","sizePerc","x","minValue","maxValue","valueDiff","props","isMultiValue","value","min","max","validValue","valuePerc","values","positionValue","y","event","touches","clientX","left","valuePerStep","Math","round"],"mappings":";;;;;;;;QASgBA,yB,GAAAA,yB;QAgBAC,oB,GAAAA,oB;QAcAC,iB,GAAAA,iB;QAmBAC,sB,GAAAA,sB;QAgBAC,wB,GAAAA,wB;QAgBAC,oB,GAAAA,oB;QAoBAC,sB,GAAAA,sB;QAcAC,oB,GAAAA,oB;QAiBAC,qB,GAAAA,qB;;AA7IhB;;AAEA;;;;;;;AAOO,SAASR,yBAAT,CAAmCS,QAAnC,EAA6CC,UAA7C,EAAyD;AAC9D,MAAMC,SAASD,WAAWE,KAA1B;AACA,MAAMC,WAAWJ,SAASK,CAAT,GAAaH,MAA9B;;AAEA,SAAOE,YAAY,CAAnB;AACD;;AAED;;;;;;;;;AASO,SAASZ,oBAAT,CAA8BQ,QAA9B,EAAwCM,QAAxC,EAAkDC,QAAlD,EAA4DN,UAA5D,EAAwE;AAC7E,MAAMG,WAAWb,0BAA0BS,QAA1B,EAAoCC,UAApC,CAAjB;AACA,MAAMO,YAAYD,WAAWD,QAA7B;;AAEA,SAAOA,WAAYE,YAAYJ,QAA/B;AACD;;AAED;;;;;;;AAOO,SAASX,iBAAT,CAA2BgB,KAA3B,EAAkCC,YAAlC,EAAgD;AACrD,MAAIA,YAAJ,EAAkB;AAChB,wBAAYD,MAAME,KAAlB;AACD;;AAED,SAAO;AACLC,SAAKH,MAAMH,QADN;AAELO,SAAKJ,MAAME;AAFN,GAAP;AAID;;AAED;;;;;;;;AAQO,SAASjB,sBAAT,CAAgCiB,KAAhC,EAAuCL,QAAvC,EAAiDC,QAAjD,EAA2D;AAChE,MAAMO,aAAa,kBAAMH,KAAN,EAAaL,QAAb,EAAuBC,QAAvB,CAAnB;AACA,MAAMC,YAAYD,WAAWD,QAA7B;AACA,MAAMS,YAAY,CAACD,aAAaR,QAAd,IAA0BE,SAA5C;;AAEA,SAAOO,aAAa,CAApB;AACD;;AAED;;;;;;;;AAQO,SAASpB,wBAAT,CAAkCqB,MAAlC,EAA0CV,QAA1C,EAAoDC,QAApD,EAA8D;AACnE,SAAO;AACLK,SAAKlB,uBAAuBsB,OAAOJ,GAA9B,EAAmCN,QAAnC,EAA6CC,QAA7C,CADA;AAELM,SAAKnB,uBAAuBsB,OAAOH,GAA9B,EAAmCP,QAAnC,EAA6CC,QAA7C;AAFA,GAAP;AAID;;AAED;;;;;;;;;AASO,SAASX,oBAAT,CAA8Be,KAA9B,EAAqCL,QAArC,EAA+CC,QAA/C,EAAyDN,UAAzD,EAAqE;AAC1E,MAAMC,SAASD,WAAWE,KAA1B;AACA,MAAMY,YAAYrB,uBAAuBiB,KAAvB,EAA8BL,QAA9B,EAAwCC,QAAxC,CAAlB;AACA,MAAMU,gBAAgBF,YAAYb,MAAlC;;AAEA,SAAO;AACLG,OAAGY,aADE;AAELC,OAAG;AAFE,GAAP;AAID;;AAED;;;;;;;;;AASO,SAASrB,sBAAT,CAAgCmB,MAAhC,EAAwCV,QAAxC,EAAkDC,QAAlD,EAA4DN,UAA5D,EAAwE;AAC7E,SAAO;AACLW,SAAKhB,qBAAqBoB,OAAOJ,GAA5B,EAAiCN,QAAjC,EAA2CC,QAA3C,EAAqDN,UAArD,CADA;AAELY,SAAKjB,qBAAqBoB,OAAOH,GAA5B,EAAiCP,QAAjC,EAA2CC,QAA3C,EAAqDN,UAArD;AAFA,GAAP;AAID;;AAED;;;;;;;AAOO,SAASH,oBAAT,CAA8BqB,KAA9B,EAAqClB,UAArC,EAAiD;AACtD,MAAMC,SAASD,WAAWE,KAA1B;;AADsD,aAElCgB,MAAMC,OAAN,GAAgBD,MAAMC,OAAN,CAAc,CAAd,CAAhB,GAAmCD,KAFD;AAAA,MAE9CE,OAF8C,QAE9CA,OAF8C;;AAItD,SAAO;AACLhB,OAAG,kBAAMgB,UAAUpB,WAAWqB,IAA3B,EAAiC,CAAjC,EAAoCpB,MAApC,CADE;AAELgB,OAAG;AAFE,GAAP;AAID;;AAED;;;;;;;AAOO,SAASnB,qBAAT,CAA+BY,KAA/B,EAAsCY,YAAtC,EAAoD;AACzD,SAAOC,KAAKC,KAAL,CAAWd,QAAQY,YAAnB,IAAmCA,YAA1C;AACD","file":"value-transformer.js","sourcesContent":["import { clamp } from '../utils';\n\n/**\n * Convert a point into a percentage value\n * @ignore\n * @param {Point} position\n * @param {ClientRect} clientRect\n * @return {number} Percentage value\n */\nexport function getPercentageFromPosition(position, clientRect) {\n const length = clientRect.width;\n const sizePerc = position.x / length;\n\n return sizePerc || 0;\n}\n\n/**\n * Convert a point into a model value\n * @ignore\n * @param {Point} position\n * @param {number} minValue\n * @param {number} maxValue\n * @param {ClientRect} clientRect\n * @return {number}\n */\nexport function getValueFromPosition(position, minValue, maxValue, clientRect) {\n const sizePerc = getPercentageFromPosition(position, clientRect);\n const valueDiff = maxValue - minValue;\n\n return minValue + (valueDiff * sizePerc);\n}\n\n/**\n * Convert props into a range value\n * @ignore\n * @param {Object} props\n * @param {boolean} isMultiValue\n * @return {Range}\n */\nexport function getValueFromProps(props, isMultiValue) {\n if (isMultiValue) {\n return { ...props.value };\n }\n\n return {\n min: props.minValue,\n max: props.value,\n };\n}\n\n/**\n * Convert a model value into a percentage value\n * @ignore\n * @param {number} value\n * @param {number} minValue\n * @param {number} maxValue\n * @return {number}\n */\nexport function getPercentageFromValue(value, minValue, maxValue) {\n const validValue = clamp(value, minValue, maxValue);\n const valueDiff = maxValue - minValue;\n const valuePerc = (validValue - minValue) / valueDiff;\n\n return valuePerc || 0;\n}\n\n/**\n * Convert model values into percentage values\n * @ignore\n * @param {Range} values\n * @param {number} minValue\n * @param {number} maxValue\n * @return {Range}\n */\nexport function getPercentagesFromValues(values, minValue, maxValue) {\n return {\n min: getPercentageFromValue(values.min, minValue, maxValue),\n max: getPercentageFromValue(values.max, minValue, maxValue),\n };\n}\n\n/**\n * Convert a value into a point\n * @ignore\n * @param {number} value\n * @param {number} minValue\n * @param {number} maxValue\n * @param {ClientRect} clientRect\n * @return {Point} Position\n */\nexport function getPositionFromValue(value, minValue, maxValue, clientRect) {\n const length = clientRect.width;\n const valuePerc = getPercentageFromValue(value, minValue, maxValue);\n const positionValue = valuePerc * length;\n\n return {\n x: positionValue,\n y: 0,\n };\n}\n\n/**\n * Convert a range of values into points\n * @ignore\n * @param {Range} values\n * @param {number} minValue\n * @param {number} maxValue\n * @param {ClientRect} clientRect\n * @return {Range}\n */\nexport function getPositionsFromValues(values, minValue, maxValue, clientRect) {\n return {\n min: getPositionFromValue(values.min, minValue, maxValue, clientRect),\n max: getPositionFromValue(values.max, minValue, maxValue, clientRect),\n };\n}\n\n/**\n * Convert an event into a point\n * @ignore\n * @param {Event} event\n * @param {ClientRect} clientRect\n * @return {Point}\n */\nexport function getPositionFromEvent(event, clientRect) {\n const length = clientRect.width;\n const { clientX } = event.touches ? event.touches[0] : event;\n\n return {\n x: clamp(clientX - clientRect.left, 0, length),\n y: 0,\n };\n}\n\n/**\n * Convert a value into a step value\n * @ignore\n * @param {number} value\n * @param {number} valuePerStep\n * @return {number}\n */\nexport function getStepValueFromValue(value, valuePerStep) {\n return Math.round(value / valuePerStep) * valuePerStep;\n}\n"]} \ No newline at end of file diff --git a/lib/js/utils/captialize.js b/lib/js/utils/captialize.js new file mode 100644 index 0000000..09f47aa --- /dev/null +++ b/lib/js/utils/captialize.js @@ -0,0 +1,17 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = captialize; +/** + * Captialize a string + * @ignore + * @param {string} string + * @return {string} + */ +function captialize(string) { + return string.charAt(0).toUpperCase() + string.slice(1); +} +module.exports = exports["default"]; +//# sourceMappingURL=captialize.js.map \ No newline at end of file diff --git a/lib/js/utils/captialize.js.map b/lib/js/utils/captialize.js.map new file mode 100644 index 0000000..a5413e7 --- /dev/null +++ b/lib/js/utils/captialize.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../src/js/utils/captialize.js"],"names":["captialize","string","charAt","toUpperCase","slice"],"mappings":";;;;;kBAMwBA,U;AANxB;;;;;;AAMe,SAASA,UAAT,CAAoBC,MAApB,EAA4B;AACzC,SAAOA,OAAOC,MAAP,CAAc,CAAd,EAAiBC,WAAjB,KAAiCF,OAAOG,KAAP,CAAa,CAAb,CAAxC;AACD","file":"captialize.js","sourcesContent":["/**\n * Captialize a string\n * @ignore\n * @param {string} string\n * @return {string}\n */\nexport default function captialize(string) {\n return string.charAt(0).toUpperCase() + string.slice(1);\n}\n"]} \ No newline at end of file diff --git a/lib/js/utils/clamp.js b/lib/js/utils/clamp.js new file mode 100644 index 0000000..cd6c491 --- /dev/null +++ b/lib/js/utils/clamp.js @@ -0,0 +1,19 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = clamp; +/** + * Clamp a value between a min and max value + * @ignore + * @param {number} value + * @param {number} min + * @param {number} max + * @return {number} + */ +function clamp(value, min, max) { + return Math.min(Math.max(value, min), max); +} +module.exports = exports["default"]; +//# sourceMappingURL=clamp.js.map \ No newline at end of file diff --git a/lib/js/utils/clamp.js.map b/lib/js/utils/clamp.js.map new file mode 100644 index 0000000..a82326b --- /dev/null +++ b/lib/js/utils/clamp.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../src/js/utils/clamp.js"],"names":["clamp","value","min","max","Math"],"mappings":";;;;;kBAQwBA,K;AARxB;;;;;;;;AAQe,SAASA,KAAT,CAAeC,KAAf,EAAsBC,GAAtB,EAA2BC,GAA3B,EAAgC;AAC7C,SAAOC,KAAKF,GAAL,CAASE,KAAKD,GAAL,CAASF,KAAT,EAAgBC,GAAhB,CAAT,EAA+BC,GAA/B,CAAP;AACD","file":"clamp.js","sourcesContent":["/**\n * Clamp a value between a min and max value\n * @ignore\n * @param {number} value\n * @param {number} min\n * @param {number} max\n * @return {number}\n */\nexport default function clamp(value, min, max) {\n return Math.min(Math.max(value, min), max);\n}\n"]} \ No newline at end of file diff --git a/lib/js/utils/distance-to.js b/lib/js/utils/distance-to.js new file mode 100644 index 0000000..22e3449 --- /dev/null +++ b/lib/js/utils/distance-to.js @@ -0,0 +1,21 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = distanceTo; +/** + * Calculate the distance between pointA and pointB + * @ignore + * @param {Point} pointA + * @param {Point} pointB + * @return {number} Distance + */ +function distanceTo(pointA, pointB) { + var xDiff = Math.pow(pointB.x - pointA.x, 2); + var yDiff = Math.pow(pointB.y - pointA.y, 2); + + return Math.sqrt(xDiff + yDiff); +} +module.exports = exports["default"]; +//# sourceMappingURL=distance-to.js.map \ No newline at end of file diff --git a/lib/js/utils/distance-to.js.map b/lib/js/utils/distance-to.js.map new file mode 100644 index 0000000..3242600 --- /dev/null +++ b/lib/js/utils/distance-to.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../src/js/utils/distance-to.js"],"names":["distanceTo","pointA","pointB","xDiff","x","yDiff","y","Math","sqrt"],"mappings":";;;;;kBAOwBA,U;AAPxB;;;;;;;AAOe,SAASA,UAAT,CAAoBC,MAApB,EAA4BC,MAA5B,EAAoC;AACjD,MAAMC,iBAASD,OAAOE,CAAP,GAAWH,OAAOG,CAA3B,EAAiC,CAAjC,CAAN;AACA,MAAMC,iBAASH,OAAOI,CAAP,GAAWL,OAAOK,CAA3B,EAAiC,CAAjC,CAAN;;AAEA,SAAOC,KAAKC,IAAL,CAAUL,QAAQE,KAAlB,CAAP;AACD","file":"distance-to.js","sourcesContent":["/**\n * Calculate the distance between pointA and pointB\n * @ignore\n * @param {Point} pointA\n * @param {Point} pointB\n * @return {number} Distance\n */\nexport default function distanceTo(pointA, pointB) {\n const xDiff = (pointB.x - pointA.x) ** 2;\n const yDiff = (pointB.y - pointA.y) ** 2;\n\n return Math.sqrt(xDiff + yDiff);\n}\n"]} \ No newline at end of file diff --git a/lib/js/utils/index.js b/lib/js/utils/index.js new file mode 100644 index 0000000..14f7751 --- /dev/null +++ b/lib/js/utils/index.js @@ -0,0 +1,71 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _captialize = require('./captialize'); + +Object.defineProperty(exports, 'captialize', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_captialize).default; + } +}); + +var _clamp = require('./clamp'); + +Object.defineProperty(exports, 'clamp', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_clamp).default; + } +}); + +var _distanceTo = require('./distance-to'); + +Object.defineProperty(exports, 'distanceTo', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_distanceTo).default; + } +}); + +var _isDefined = require('./is-defined'); + +Object.defineProperty(exports, 'isDefined', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_isDefined).default; + } +}); + +var _isNumber = require('./is-number'); + +Object.defineProperty(exports, 'isNumber', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_isNumber).default; + } +}); + +var _isObject = require('./is-object'); + +Object.defineProperty(exports, 'isObject', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_isObject).default; + } +}); + +var _length = require('./length'); + +Object.defineProperty(exports, 'length', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_length).default; + } +}); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } +//# sourceMappingURL=index.js.map \ No newline at end of file diff --git a/lib/js/utils/index.js.map b/lib/js/utils/index.js.map new file mode 100644 index 0000000..2e7b0e3 --- /dev/null +++ b/lib/js/utils/index.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../src/js/utils/index.js"],"names":["default"],"mappings":";;;;;;;;;;;+CAASA,O;;;;;;;;;0CACAA,O;;;;;;;;;+CACAA,O;;;;;;;;;8CACAA,O;;;;;;;;;6CACAA,O;;;;;;;;;6CACAA,O;;;;;;;;;2CACAA,O","file":"index.js","sourcesContent":["export { default as captialize } from './captialize';\nexport { default as clamp } from './clamp';\nexport { default as distanceTo } from './distance-to';\nexport { default as isDefined } from './is-defined';\nexport { default as isNumber } from './is-number';\nexport { default as isObject } from './is-object';\nexport { default as length } from './length';\n"]} \ No newline at end of file diff --git a/lib/js/utils/is-defined.js b/lib/js/utils/is-defined.js new file mode 100644 index 0000000..e5e838a --- /dev/null +++ b/lib/js/utils/is-defined.js @@ -0,0 +1,17 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = isDefined; +/** + * Check if a value is defined + * @ignore + * @param {*} value + * @return {boolean} + */ +function isDefined(value) { + return value !== undefined && value !== null; +} +module.exports = exports["default"]; +//# sourceMappingURL=is-defined.js.map \ No newline at end of file diff --git a/lib/js/utils/is-defined.js.map b/lib/js/utils/is-defined.js.map new file mode 100644 index 0000000..4911398 --- /dev/null +++ b/lib/js/utils/is-defined.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../src/js/utils/is-defined.js"],"names":["isDefined","value","undefined"],"mappings":";;;;;kBAMwBA,S;AANxB;;;;;;AAMe,SAASA,SAAT,CAAmBC,KAAnB,EAA0B;AACvC,SAAOA,UAAUC,SAAV,IAAuBD,UAAU,IAAxC;AACD","file":"is-defined.js","sourcesContent":["/**\n * Check if a value is defined\n * @ignore\n * @param {*} value\n * @return {boolean}\n */\nexport default function isDefined(value) {\n return value !== undefined && value !== null;\n}\n"]} \ No newline at end of file diff --git a/lib/js/utils/is-number.js b/lib/js/utils/is-number.js new file mode 100644 index 0000000..973064c --- /dev/null +++ b/lib/js/utils/is-number.js @@ -0,0 +1,17 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = isNumber; +/** + * Check if a value is a number + * @ignore + * @param {*} value + * @return {boolean} + */ +function isNumber(value) { + return typeof value === 'number'; +} +module.exports = exports['default']; +//# sourceMappingURL=is-number.js.map \ No newline at end of file diff --git a/lib/js/utils/is-number.js.map b/lib/js/utils/is-number.js.map new file mode 100644 index 0000000..068422c --- /dev/null +++ b/lib/js/utils/is-number.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../src/js/utils/is-number.js"],"names":["isNumber","value"],"mappings":";;;;;kBAMwBA,Q;AANxB;;;;;;AAMe,SAASA,QAAT,CAAkBC,KAAlB,EAAyB;AACtC,SAAO,OAAOA,KAAP,KAAiB,QAAxB;AACD","file":"is-number.js","sourcesContent":["/**\n * Check if a value is a number\n * @ignore\n * @param {*} value\n * @return {boolean}\n */\nexport default function isNumber(value) {\n return typeof value === 'number';\n}\n"]} \ No newline at end of file diff --git a/lib/js/utils/is-object.js b/lib/js/utils/is-object.js new file mode 100644 index 0000000..12b53d8 --- /dev/null +++ b/lib/js/utils/is-object.js @@ -0,0 +1,20 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; + +exports.default = isObject; +/** + * Check if a value is an object + * @ignore + * @param {*} value + * @return {boolean} + */ +function isObject(value) { + return value !== null && (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object'; +} +module.exports = exports['default']; +//# sourceMappingURL=is-object.js.map \ No newline at end of file diff --git a/lib/js/utils/is-object.js.map b/lib/js/utils/is-object.js.map new file mode 100644 index 0000000..9f8faf8 --- /dev/null +++ b/lib/js/utils/is-object.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../src/js/utils/is-object.js"],"names":["isObject","value"],"mappings":";;;;;;;;kBAMwBA,Q;AANxB;;;;;;AAMe,SAASA,QAAT,CAAkBC,KAAlB,EAAyB;AACtC,SAAOA,UAAU,IAAV,IAAkB,QAAOA,KAAP,yCAAOA,KAAP,OAAiB,QAA1C;AACD","file":"is-object.js","sourcesContent":["/**\n * Check if a value is an object\n * @ignore\n * @param {*} value\n * @return {boolean}\n */\nexport default function isObject(value) {\n return value !== null && typeof value === 'object';\n}\n"]} \ No newline at end of file diff --git a/lib/js/utils/length.js b/lib/js/utils/length.js new file mode 100644 index 0000000..cb904b9 --- /dev/null +++ b/lib/js/utils/length.js @@ -0,0 +1,18 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = length; +/** + * Calculate the absolute difference between two numbers + * @ignore + * @param {number} numA + * @param {number} numB + * @return {number} + */ +function length(numA, numB) { + return Math.abs(numA - numB); +} +module.exports = exports["default"]; +//# sourceMappingURL=length.js.map \ No newline at end of file diff --git a/lib/js/utils/length.js.map b/lib/js/utils/length.js.map new file mode 100644 index 0000000..91b61ac --- /dev/null +++ b/lib/js/utils/length.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../src/js/utils/length.js"],"names":["length","numA","numB","Math","abs"],"mappings":";;;;;kBAOwBA,M;AAPxB;;;;;;;AAOe,SAASA,MAAT,CAAgBC,IAAhB,EAAsBC,IAAtB,EAA4B;AACzC,SAAOC,KAAKC,GAAL,CAASH,OAAOC,IAAhB,CAAP;AACD","file":"length.js","sourcesContent":["/**\n * Calculate the absolute difference between two numbers\n * @ignore\n * @param {number} numA\n * @param {number} numB\n * @return {number}\n */\nexport default function length(numA, numB) {\n return Math.abs(numA - numB);\n}\n"]} \ No newline at end of file diff --git a/src/js/input-range/input-range.jsx b/src/js/input-range/input-range.jsx index ac25821..601b9d9 100644 --- a/src/js/input-range/input-range.jsx +++ b/src/js/input-range/input-range.jsx @@ -27,6 +27,7 @@ export default class InputRange extends React.Component { classNames: React.PropTypes.objectOf(React.PropTypes.string), disabled: React.PropTypes.bool, formatLabel: React.PropTypes.func, + isExternal: React.PropTypes.bool, maxValue: rangePropType, minValue: rangePropType, name: React.PropTypes.string, @@ -50,6 +51,7 @@ export default class InputRange extends React.Component { maxValue: 10, minValue: 0, step: 1, + isExternal: false, }; } @@ -601,8 +603,8 @@ export default class InputRange extends React.Component { classNames={this.props.classNames} ref={(trackNode) => { this.trackNode = trackNode; }} percentages={percentages} - onTrackMouseDown={this.handleTrackMouseDown}> - + onTrackMouseDown={this.handleTrackMouseDown} + isExternal={this.props.isExternal} > {this.renderSliders()} diff --git a/src/js/input-range/label.jsx b/src/js/input-range/label.jsx index 45e0b3f..0286d7e 100644 --- a/src/js/input-range/label.jsx +++ b/src/js/input-range/label.jsx @@ -9,10 +9,10 @@ import React from 'react'; */ export default function Label(props) { const labelValue = props.formatLabel ? props.formatLabel(props.children, props.type) : props.children; - + const labelClassName = props.markerType === 'track' ? `${props.classNames.labelContainer} marker-${props.markerValue}` : props.classNames.labelContainer; return ( - + {labelValue} @@ -31,4 +31,7 @@ Label.propTypes = { classNames: React.PropTypes.objectOf(React.PropTypes.string).isRequired, formatLabel: React.PropTypes.func, type: React.PropTypes.string.isRequired, + markerType: React.PropTypes.string, + markerValue: React.PropTypes.string, + }; diff --git a/src/js/input-range/slider.jsx b/src/js/input-range/slider.jsx index 3df937b..6486df4 100644 --- a/src/js/input-range/slider.jsx +++ b/src/js/input-range/slider.jsx @@ -245,7 +245,9 @@ export default class Slider extends React.Component { diff --git a/src/js/input-range/track.jsx b/src/js/input-range/track.jsx index c2a06c0..99813b5 100644 --- a/src/js/input-range/track.jsx +++ b/src/js/input-range/track.jsx @@ -19,6 +19,7 @@ export default class Track extends React.Component { classNames: React.PropTypes.objectOf(React.PropTypes.string).isRequired, onTrackMouseDown: React.PropTypes.func.isRequired, percentages: React.PropTypes.objectOf(React.PropTypes.number).isRequired, + isExternal: React.PropTypes.bool.isRequired, }; } @@ -57,6 +58,31 @@ export default class Track extends React.Component { return { left, width }; } + /** + * @private + * @return {Object} CSS styles + */ + @autobind + getActiveTrackStylePre() { + const width = `${(this.props.percentages.min) * 100}%`; + const left = '0'; + const float = 'left'; + return { left, width, float }; + } + + + /** + * @private + * @return {Object} CSS styles + */ + @autobind + getActiveTrackStylePost() { + const width = `${(1 - this.props.percentages.max) * 100}%`; + const left = `${this.props.percentages.max * 100}%`; + + return { left, width }; + } + /** * @private * @param {SyntheticEvent} event - User event @@ -90,6 +116,8 @@ export default class Track extends React.Component { */ render() { const activeTrackStyle = this.getActiveTrackStyle(); + const activeTrackStyleExternalPre = this.getActiveTrackStylePre(); + const activeTrackStyleExternalPost = this.getActiveTrackStylePost(); return (
{ this.node = node; }}> -
+ { + !this.props.isExternal ? ( +
+ ) : ( +
+
+
+
+ ) + } {this.props.children}
); diff --git a/src/scss/input-range/_input-range-label-container.scss b/src/scss/input-range/_input-range-label-container.scss index 737526b..580719f 100644 --- a/src/scss/input-range/_input-range-label-container.scss +++ b/src/scss/input-range/_input-range-label-container.scss @@ -5,4 +5,12 @@ .input-range__label--max & { left: 50%; } + + &.marker-min { + left: -90%; + } + + &.marker-max { + left: 0%; + } }