Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

3 лет назад
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
  6. var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
  7. var _extends2 = require('babel-runtime/helpers/extends');
  8. var _extends3 = _interopRequireDefault(_extends2);
  9. var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
  10. var _defineProperty3 = _interopRequireDefault(_defineProperty2);
  11. var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
  12. var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
  13. var _createClass2 = require('babel-runtime/helpers/createClass');
  14. var _createClass3 = _interopRequireDefault(_createClass2);
  15. var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
  16. var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
  17. var _get2 = require('babel-runtime/helpers/get');
  18. var _get3 = _interopRequireDefault(_get2);
  19. var _inherits2 = require('babel-runtime/helpers/inherits');
  20. var _inherits3 = _interopRequireDefault(_inherits2);
  21. exports['default'] = createSlider;
  22. var _react = require('react');
  23. var _react2 = _interopRequireDefault(_react);
  24. var _propTypes = require('prop-types');
  25. var _propTypes2 = _interopRequireDefault(_propTypes);
  26. var _addEventListener = require('rc-util/lib/Dom/addEventListener');
  27. var _addEventListener2 = _interopRequireDefault(_addEventListener);
  28. var _classnames = require('classnames');
  29. var _classnames2 = _interopRequireDefault(_classnames);
  30. var _warning = require('warning');
  31. var _warning2 = _interopRequireDefault(_warning);
  32. var _Steps = require('./Steps');
  33. var _Steps2 = _interopRequireDefault(_Steps);
  34. var _Marks = require('./Marks');
  35. var _Marks2 = _interopRequireDefault(_Marks);
  36. var _Handle = require('../Handle');
  37. var _Handle2 = _interopRequireDefault(_Handle);
  38. var _utils = require('../utils');
  39. var utils = _interopRequireWildcard(_utils);
  40. 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; } }
  41. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  42. function noop() {}
  43. function createSlider(Component) {
  44. var _class, _temp;
  45. return _temp = _class = function (_Component) {
  46. (0, _inherits3['default'])(ComponentEnhancer, _Component);
  47. function ComponentEnhancer(props) {
  48. (0, _classCallCheck3['default'])(this, ComponentEnhancer);
  49. var _this = (0, _possibleConstructorReturn3['default'])(this, (ComponentEnhancer.__proto__ || Object.getPrototypeOf(ComponentEnhancer)).call(this, props));
  50. _this.onMouseDown = function (e) {
  51. if (e.button !== 0) {
  52. return;
  53. }
  54. var isVertical = _this.props.vertical;
  55. var position = utils.getMousePosition(isVertical, e);
  56. if (!utils.isEventFromHandle(e, _this.handlesRefs)) {
  57. _this.dragOffset = 0;
  58. } else {
  59. var handlePosition = utils.getHandleCenterPosition(isVertical, e.target);
  60. _this.dragOffset = position - handlePosition;
  61. position = handlePosition;
  62. }
  63. _this.removeDocumentEvents();
  64. _this.onStart(position);
  65. _this.addDocumentMouseEvents();
  66. };
  67. _this.onTouchStart = function (e) {
  68. if (utils.isNotTouchEvent(e)) return;
  69. var isVertical = _this.props.vertical;
  70. var position = utils.getTouchPosition(isVertical, e);
  71. if (!utils.isEventFromHandle(e, _this.handlesRefs)) {
  72. _this.dragOffset = 0;
  73. } else {
  74. var handlePosition = utils.getHandleCenterPosition(isVertical, e.target);
  75. _this.dragOffset = position - handlePosition;
  76. position = handlePosition;
  77. }
  78. _this.onStart(position);
  79. _this.addDocumentTouchEvents();
  80. utils.pauseEvent(e);
  81. };
  82. _this.onFocus = function (e) {
  83. var _this$props = _this.props,
  84. onFocus = _this$props.onFocus,
  85. vertical = _this$props.vertical;
  86. if (utils.isEventFromHandle(e, _this.handlesRefs)) {
  87. var handlePosition = utils.getHandleCenterPosition(vertical, e.target);
  88. _this.dragOffset = 0;
  89. _this.onStart(handlePosition);
  90. utils.pauseEvent(e);
  91. if (onFocus) {
  92. onFocus(e);
  93. }
  94. }
  95. };
  96. _this.onBlur = function (e) {
  97. var onBlur = _this.props.onBlur;
  98. _this.onEnd();
  99. if (onBlur) {
  100. onBlur(e);
  101. }
  102. };
  103. _this.onMouseUp = function () {
  104. if (_this.handlesRefs[_this.prevMovedHandleIndex]) {
  105. _this.handlesRefs[_this.prevMovedHandleIndex].clickFocus();
  106. }
  107. };
  108. _this.onMouseMove = function (e) {
  109. if (!_this.sliderRef) {
  110. _this.onEnd();
  111. return;
  112. }
  113. var position = utils.getMousePosition(_this.props.vertical, e);
  114. _this.onMove(e, position - _this.dragOffset);
  115. };
  116. _this.onTouchMove = function (e) {
  117. if (utils.isNotTouchEvent(e) || !_this.sliderRef) {
  118. _this.onEnd();
  119. return;
  120. }
  121. var position = utils.getTouchPosition(_this.props.vertical, e);
  122. _this.onMove(e, position - _this.dragOffset);
  123. };
  124. _this.onKeyDown = function (e) {
  125. if (_this.sliderRef && utils.isEventFromHandle(e, _this.handlesRefs)) {
  126. _this.onKeyboard(e);
  127. }
  128. };
  129. _this.onClickMarkLabel = function (e, value) {
  130. e.stopPropagation();
  131. _this.onChange({ value: value });
  132. _this.setState({ value: value }, function () {
  133. return _this.onEnd(true);
  134. });
  135. };
  136. _this.saveSlider = function (slider) {
  137. _this.sliderRef = slider;
  138. };
  139. var step = props.step,
  140. max = props.max,
  141. min = props.min;
  142. var isPointDiffEven = isFinite(max - min) ? (max - min) % step === 0 : true; // eslint-disable-line
  143. (0, _warning2['default'])(step && Math.floor(step) === step ? isPointDiffEven : true, 'Slider[max] - Slider[min] (%s) should be a multiple of Slider[step] (%s)', max - min, step);
  144. _this.handlesRefs = {};
  145. return _this;
  146. }
  147. (0, _createClass3['default'])(ComponentEnhancer, [{
  148. key: 'componentDidMount',
  149. value: function componentDidMount() {
  150. // Snapshot testing cannot handle refs, so be sure to null-check this.
  151. this.document = this.sliderRef && this.sliderRef.ownerDocument;
  152. var _props = this.props,
  153. autoFocus = _props.autoFocus,
  154. disabled = _props.disabled;
  155. if (autoFocus && !disabled) {
  156. this.focus();
  157. }
  158. }
  159. }, {
  160. key: 'componentWillUnmount',
  161. value: function componentWillUnmount() {
  162. if ((0, _get3['default'])(ComponentEnhancer.prototype.__proto__ || Object.getPrototypeOf(ComponentEnhancer.prototype), 'componentWillUnmount', this)) (0, _get3['default'])(ComponentEnhancer.prototype.__proto__ || Object.getPrototypeOf(ComponentEnhancer.prototype), 'componentWillUnmount', this).call(this);
  163. this.removeDocumentEvents();
  164. }
  165. }, {
  166. key: 'getSliderStart',
  167. value: function getSliderStart() {
  168. var slider = this.sliderRef;
  169. var _props2 = this.props,
  170. vertical = _props2.vertical,
  171. reverse = _props2.reverse;
  172. var rect = slider.getBoundingClientRect();
  173. if (vertical) {
  174. return reverse ? rect.bottom : rect.top;
  175. }
  176. return window.pageXOffset + (reverse ? rect.right : rect.left);
  177. }
  178. }, {
  179. key: 'getSliderLength',
  180. value: function getSliderLength() {
  181. var slider = this.sliderRef;
  182. if (!slider) {
  183. return 0;
  184. }
  185. var coords = slider.getBoundingClientRect();
  186. return this.props.vertical ? coords.height : coords.width;
  187. }
  188. }, {
  189. key: 'addDocumentTouchEvents',
  190. value: function addDocumentTouchEvents() {
  191. // just work for Chrome iOS Safari and Android Browser
  192. this.onTouchMoveListener = (0, _addEventListener2['default'])(this.document, 'touchmove', this.onTouchMove);
  193. this.onTouchUpListener = (0, _addEventListener2['default'])(this.document, 'touchend', this.onEnd);
  194. }
  195. }, {
  196. key: 'addDocumentMouseEvents',
  197. value: function addDocumentMouseEvents() {
  198. this.onMouseMoveListener = (0, _addEventListener2['default'])(this.document, 'mousemove', this.onMouseMove);
  199. this.onMouseUpListener = (0, _addEventListener2['default'])(this.document, 'mouseup', this.onEnd);
  200. }
  201. }, {
  202. key: 'removeDocumentEvents',
  203. value: function removeDocumentEvents() {
  204. /* eslint-disable no-unused-expressions */
  205. this.onTouchMoveListener && this.onTouchMoveListener.remove();
  206. this.onTouchUpListener && this.onTouchUpListener.remove();
  207. this.onMouseMoveListener && this.onMouseMoveListener.remove();
  208. this.onMouseUpListener && this.onMouseUpListener.remove();
  209. /* eslint-enable no-unused-expressions */
  210. }
  211. }, {
  212. key: 'focus',
  213. value: function focus() {
  214. if (!this.props.disabled) {
  215. this.handlesRefs[0].focus();
  216. }
  217. }
  218. }, {
  219. key: 'blur',
  220. value: function blur() {
  221. var _this2 = this;
  222. if (!this.props.disabled) {
  223. Object.keys(this.handlesRefs).forEach(function (key) {
  224. if (_this2.handlesRefs[key] && _this2.handlesRefs[key].blur) {
  225. _this2.handlesRefs[key].blur();
  226. }
  227. });
  228. }
  229. }
  230. }, {
  231. key: 'calcValue',
  232. value: function calcValue(offset) {
  233. var _props3 = this.props,
  234. vertical = _props3.vertical,
  235. min = _props3.min,
  236. max = _props3.max;
  237. var ratio = Math.abs(Math.max(offset, 0) / this.getSliderLength());
  238. var value = vertical ? (1 - ratio) * (max - min) + min : ratio * (max - min) + min;
  239. return value;
  240. }
  241. }, {
  242. key: 'calcValueByPos',
  243. value: function calcValueByPos(position) {
  244. var sign = this.props.reverse ? -1 : +1;
  245. var pixelOffset = sign * (position - this.getSliderStart());
  246. var nextValue = this.trimAlignValue(this.calcValue(pixelOffset));
  247. return nextValue;
  248. }
  249. }, {
  250. key: 'calcOffset',
  251. value: function calcOffset(value) {
  252. var _props4 = this.props,
  253. min = _props4.min,
  254. max = _props4.max;
  255. var ratio = (value - min) / (max - min);
  256. return ratio * 100;
  257. }
  258. }, {
  259. key: 'saveHandle',
  260. value: function saveHandle(index, handle) {
  261. this.handlesRefs[index] = handle;
  262. }
  263. }, {
  264. key: 'render',
  265. value: function render() {
  266. var _classNames;
  267. var _props5 = this.props,
  268. prefixCls = _props5.prefixCls,
  269. className = _props5.className,
  270. marks = _props5.marks,
  271. dots = _props5.dots,
  272. step = _props5.step,
  273. included = _props5.included,
  274. disabled = _props5.disabled,
  275. vertical = _props5.vertical,
  276. reverse = _props5.reverse,
  277. min = _props5.min,
  278. max = _props5.max,
  279. children = _props5.children,
  280. maximumTrackStyle = _props5.maximumTrackStyle,
  281. style = _props5.style,
  282. railStyle = _props5.railStyle,
  283. dotStyle = _props5.dotStyle,
  284. activeDotStyle = _props5.activeDotStyle;
  285. var _get$call = (0, _get3['default'])(ComponentEnhancer.prototype.__proto__ || Object.getPrototypeOf(ComponentEnhancer.prototype), 'render', this).call(this),
  286. tracks = _get$call.tracks,
  287. handles = _get$call.handles;
  288. var sliderClassName = (0, _classnames2['default'])(prefixCls, (_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls + '-with-marks', Object.keys(marks).length), (0, _defineProperty3['default'])(_classNames, prefixCls + '-disabled', disabled), (0, _defineProperty3['default'])(_classNames, prefixCls + '-vertical', vertical), (0, _defineProperty3['default'])(_classNames, className, className), _classNames));
  289. return _react2['default'].createElement(
  290. 'div',
  291. {
  292. ref: this.saveSlider,
  293. className: sliderClassName,
  294. onTouchStart: disabled ? noop : this.onTouchStart,
  295. onMouseDown: disabled ? noop : this.onMouseDown,
  296. onMouseUp: disabled ? noop : this.onMouseUp,
  297. onKeyDown: disabled ? noop : this.onKeyDown,
  298. onFocus: disabled ? noop : this.onFocus,
  299. onBlur: disabled ? noop : this.onBlur,
  300. style: style
  301. },
  302. _react2['default'].createElement('div', {
  303. className: prefixCls + '-rail',
  304. style: (0, _extends3['default'])({}, maximumTrackStyle, railStyle)
  305. }),
  306. tracks,
  307. _react2['default'].createElement(_Steps2['default'], {
  308. prefixCls: prefixCls,
  309. vertical: vertical,
  310. reverse: reverse,
  311. marks: marks,
  312. dots: dots,
  313. step: step,
  314. included: included,
  315. lowerBound: this.getLowerBound(),
  316. upperBound: this.getUpperBound(),
  317. max: max,
  318. min: min,
  319. dotStyle: dotStyle,
  320. activeDotStyle: activeDotStyle
  321. }),
  322. handles,
  323. _react2['default'].createElement(_Marks2['default'], {
  324. className: prefixCls + '-mark',
  325. onClickLabel: disabled ? noop : this.onClickMarkLabel,
  326. vertical: vertical,
  327. marks: marks,
  328. included: included,
  329. lowerBound: this.getLowerBound(),
  330. upperBound: this.getUpperBound(),
  331. max: max,
  332. min: min,
  333. reverse: reverse
  334. }),
  335. children
  336. );
  337. }
  338. }]);
  339. return ComponentEnhancer;
  340. }(Component), _class.displayName = 'ComponentEnhancer(' + Component.displayName + ')', _class.propTypes = (0, _extends3['default'])({}, Component.propTypes, {
  341. min: _propTypes2['default'].number,
  342. max: _propTypes2['default'].number,
  343. step: _propTypes2['default'].number,
  344. marks: _propTypes2['default'].object,
  345. included: _propTypes2['default'].bool,
  346. className: _propTypes2['default'].string,
  347. prefixCls: _propTypes2['default'].string,
  348. disabled: _propTypes2['default'].bool,
  349. children: _propTypes2['default'].any,
  350. onBeforeChange: _propTypes2['default'].func,
  351. onChange: _propTypes2['default'].func,
  352. onAfterChange: _propTypes2['default'].func,
  353. handle: _propTypes2['default'].func,
  354. dots: _propTypes2['default'].bool,
  355. vertical: _propTypes2['default'].bool,
  356. style: _propTypes2['default'].object,
  357. reverse: _propTypes2['default'].bool,
  358. minimumTrackStyle: _propTypes2['default'].object, // just for compatibility, will be deperecate
  359. maximumTrackStyle: _propTypes2['default'].object, // just for compatibility, will be deperecate
  360. handleStyle: _propTypes2['default'].oneOfType([_propTypes2['default'].object, _propTypes2['default'].arrayOf(_propTypes2['default'].object)]),
  361. trackStyle: _propTypes2['default'].oneOfType([_propTypes2['default'].object, _propTypes2['default'].arrayOf(_propTypes2['default'].object)]),
  362. railStyle: _propTypes2['default'].object,
  363. dotStyle: _propTypes2['default'].object,
  364. activeDotStyle: _propTypes2['default'].object,
  365. autoFocus: _propTypes2['default'].bool,
  366. onFocus: _propTypes2['default'].func,
  367. onBlur: _propTypes2['default'].func
  368. }), _class.defaultProps = (0, _extends3['default'])({}, Component.defaultProps, {
  369. prefixCls: 'rc-slider',
  370. className: '',
  371. min: 0,
  372. max: 100,
  373. step: 1,
  374. marks: {},
  375. handle: function handle(_ref) {
  376. var index = _ref.index,
  377. restProps = (0, _objectWithoutProperties3['default'])(_ref, ['index']);
  378. delete restProps.dragging;
  379. if (restProps.value === null) {
  380. return null;
  381. }
  382. return _react2['default'].createElement(_Handle2['default'], (0, _extends3['default'])({}, restProps, { key: index }));
  383. },
  384. onBeforeChange: noop,
  385. onChange: noop,
  386. onAfterChange: noop,
  387. included: true,
  388. disabled: false,
  389. dots: false,
  390. vertical: false,
  391. reverse: false,
  392. trackStyle: [{}],
  393. handleStyle: [{}],
  394. railStyle: {},
  395. dotStyle: {},
  396. activeDotStyle: {}
  397. }), _temp;
  398. }
  399. module.exports = exports['default'];