Track.js 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  3. import cls from 'classnames';
  4. import * as React from 'react';
  5. import SliderContext from "../context";
  6. import { getOffset } from "../util";
  7. var Track = function Track(props) {
  8. var prefixCls = props.prefixCls,
  9. style = props.style,
  10. start = props.start,
  11. end = props.end,
  12. index = props.index,
  13. onStartMove = props.onStartMove,
  14. replaceCls = props.replaceCls;
  15. var _React$useContext = React.useContext(SliderContext),
  16. direction = _React$useContext.direction,
  17. min = _React$useContext.min,
  18. max = _React$useContext.max,
  19. disabled = _React$useContext.disabled,
  20. range = _React$useContext.range,
  21. classNames = _React$useContext.classNames;
  22. var trackPrefixCls = "".concat(prefixCls, "-track");
  23. var offsetStart = getOffset(start, min, max);
  24. var offsetEnd = getOffset(end, min, max);
  25. // ============================ Events ============================
  26. var onInternalStartMove = function onInternalStartMove(e) {
  27. if (!disabled && onStartMove) {
  28. onStartMove(e, -1);
  29. }
  30. };
  31. // ============================ Render ============================
  32. var positionStyle = {};
  33. switch (direction) {
  34. case 'rtl':
  35. positionStyle.right = "".concat(offsetStart * 100, "%");
  36. positionStyle.width = "".concat(offsetEnd * 100 - offsetStart * 100, "%");
  37. break;
  38. case 'btt':
  39. positionStyle.bottom = "".concat(offsetStart * 100, "%");
  40. positionStyle.height = "".concat(offsetEnd * 100 - offsetStart * 100, "%");
  41. break;
  42. case 'ttb':
  43. positionStyle.top = "".concat(offsetStart * 100, "%");
  44. positionStyle.height = "".concat(offsetEnd * 100 - offsetStart * 100, "%");
  45. break;
  46. default:
  47. positionStyle.left = "".concat(offsetStart * 100, "%");
  48. positionStyle.width = "".concat(offsetEnd * 100 - offsetStart * 100, "%");
  49. }
  50. var className = replaceCls || cls(trackPrefixCls, _defineProperty(_defineProperty({}, "".concat(trackPrefixCls, "-").concat(index + 1), index !== null && range), "".concat(prefixCls, "-track-draggable"), onStartMove), classNames.track);
  51. return /*#__PURE__*/React.createElement("div", {
  52. className: className,
  53. style: _objectSpread(_objectSpread({}, positionStyle), style),
  54. onMouseDown: onInternalStartMove,
  55. onTouchStart: onInternalStartMove
  56. });
  57. };
  58. export default Track;