index.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
  1. "use strict";
  2. "use client";
  3. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  4. Object.defineProperty(exports, "__esModule", {
  5. value: true
  6. });
  7. exports.default = void 0;
  8. var _react = _interopRequireDefault(require("react"));
  9. var _classnames = _interopRequireDefault(require("classnames"));
  10. var _rcSlider = _interopRequireDefault(require("rc-slider"));
  11. var _raf = _interopRequireDefault(require("rc-util/lib/raf"));
  12. var _warning = require("../_util/warning");
  13. var _DisabledContext = _interopRequireDefault(require("../config-provider/DisabledContext"));
  14. var _Context = _interopRequireDefault(require("./Context"));
  15. var _SliderTooltip = _interopRequireDefault(require("./SliderTooltip"));
  16. var _style = _interopRequireDefault(require("./style"));
  17. var _useRafLock = _interopRequireDefault(require("./useRafLock"));
  18. var _context = require("../config-provider/context");
  19. var __rest = void 0 && (void 0).__rest || function (s, e) {
  20. var t = {};
  21. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  22. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  23. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  24. }
  25. return t;
  26. };
  27. function getTipFormatter(tipFormatter, legacyTipFormatter) {
  28. if (tipFormatter || tipFormatter === null) {
  29. return tipFormatter;
  30. }
  31. if (legacyTipFormatter || legacyTipFormatter === null) {
  32. return legacyTipFormatter;
  33. }
  34. return val => typeof val === 'number' ? val.toString() : '';
  35. }
  36. const Slider = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
  37. const {
  38. prefixCls: customizePrefixCls,
  39. range,
  40. className,
  41. rootClassName,
  42. style,
  43. disabled,
  44. // Deprecated Props
  45. tooltipPrefixCls: legacyTooltipPrefixCls,
  46. tipFormatter: legacyTipFormatter,
  47. tooltipVisible: legacyTooltipVisible,
  48. getTooltipPopupContainer: legacyGetTooltipPopupContainer,
  49. tooltipPlacement: legacyTooltipPlacement,
  50. tooltip = {},
  51. onChangeComplete,
  52. classNames: sliderClassNames,
  53. styles
  54. } = props,
  55. restProps = __rest(props, ["prefixCls", "range", "className", "rootClassName", "style", "disabled", "tooltipPrefixCls", "tipFormatter", "tooltipVisible", "getTooltipPopupContainer", "tooltipPlacement", "tooltip", "onChangeComplete", "classNames", "styles"]);
  56. const {
  57. vertical
  58. } = props;
  59. const {
  60. getPrefixCls,
  61. direction: contextDirection,
  62. className: contextClassName,
  63. style: contextStyle,
  64. classNames: contextClassNames,
  65. styles: contextStyles,
  66. getPopupContainer
  67. } = (0, _context.useComponentConfig)('slider');
  68. const contextDisabled = _react.default.useContext(_DisabledContext.default);
  69. const mergedDisabled = disabled !== null && disabled !== void 0 ? disabled : contextDisabled;
  70. // ============================= Context ==============================
  71. const {
  72. handleRender: contextHandleRender,
  73. direction: internalContextDirection
  74. } = _react.default.useContext(_Context.default);
  75. const mergedDirection = internalContextDirection || contextDirection;
  76. const isRTL = mergedDirection === 'rtl';
  77. // =============================== Open ===============================
  78. const [hoverOpen, setHoverOpen] = (0, _useRafLock.default)();
  79. const [focusOpen, setFocusOpen] = (0, _useRafLock.default)();
  80. const tooltipProps = Object.assign({}, tooltip);
  81. const {
  82. open: tooltipOpen,
  83. placement: tooltipPlacement,
  84. getPopupContainer: getTooltipPopupContainer,
  85. prefixCls: customizeTooltipPrefixCls,
  86. formatter: tipFormatter
  87. } = tooltipProps;
  88. const lockOpen = tooltipOpen !== null && tooltipOpen !== void 0 ? tooltipOpen : legacyTooltipVisible;
  89. const activeOpen = (hoverOpen || focusOpen) && lockOpen !== false;
  90. const mergedTipFormatter = getTipFormatter(tipFormatter, legacyTipFormatter);
  91. // ============================= Change ==============================
  92. const [dragging, setDragging] = (0, _useRafLock.default)();
  93. const onInternalChangeComplete = nextValues => {
  94. onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(nextValues);
  95. setDragging(false);
  96. };
  97. // ============================ Placement ============================
  98. const getTooltipPlacement = (placement, vert) => {
  99. if (placement) {
  100. return placement;
  101. }
  102. if (!vert) {
  103. return 'top';
  104. }
  105. return isRTL ? 'left' : 'right';
  106. };
  107. // ============================== Style ===============================
  108. const prefixCls = getPrefixCls('slider', customizePrefixCls);
  109. const [wrapCSSVar, hashId, cssVarCls] = (0, _style.default)(prefixCls);
  110. const rootClassNames = (0, _classnames.default)(className, contextClassName, contextClassNames.root, sliderClassNames === null || sliderClassNames === void 0 ? void 0 : sliderClassNames.root, rootClassName, {
  111. [`${prefixCls}-rtl`]: isRTL,
  112. [`${prefixCls}-lock`]: dragging
  113. }, hashId, cssVarCls);
  114. // make reverse default on rtl direction
  115. if (isRTL && !restProps.vertical) {
  116. restProps.reverse = !restProps.reverse;
  117. }
  118. // ============================= Warning ==============================
  119. // Warning for deprecated usage
  120. if (process.env.NODE_ENV !== 'production') {
  121. const warning = (0, _warning.devUseWarning)('Slider');
  122. [['tooltipPrefixCls', 'prefixCls'], ['getTooltipPopupContainer', 'getPopupContainer'], ['tipFormatter', 'formatter'], ['tooltipPlacement', 'placement'], ['tooltipVisible', 'open']].forEach(([deprecatedName, newName]) => {
  123. warning.deprecated(!(deprecatedName in props), deprecatedName, `tooltip.${newName}`);
  124. });
  125. }
  126. // ============================== Handle ==============================
  127. _react.default.useEffect(() => {
  128. const onMouseUp = () => {
  129. // Delay for 1 frame to make the click to enable hide tooltip
  130. // even when the handle is focused
  131. (0, _raf.default)(() => {
  132. setFocusOpen(false);
  133. }, 1);
  134. };
  135. document.addEventListener('mouseup', onMouseUp);
  136. return () => {
  137. document.removeEventListener('mouseup', onMouseUp);
  138. };
  139. }, []);
  140. const useActiveTooltipHandle = range && !lockOpen;
  141. const handleRender = contextHandleRender || ((node, info) => {
  142. const {
  143. index
  144. } = info;
  145. const nodeProps = node.props;
  146. function proxyEvent(eventName, event, triggerRestPropsEvent) {
  147. var _a, _b, _c, _d;
  148. if (triggerRestPropsEvent) {
  149. (_b = (_a = restProps)[eventName]) === null || _b === void 0 ? void 0 : _b.call(_a, event);
  150. }
  151. (_d = (_c = nodeProps)[eventName]) === null || _d === void 0 ? void 0 : _d.call(_c, event);
  152. }
  153. const passedProps = Object.assign(Object.assign({}, nodeProps), {
  154. onMouseEnter: e => {
  155. setHoverOpen(true);
  156. proxyEvent('onMouseEnter', e);
  157. },
  158. onMouseLeave: e => {
  159. setHoverOpen(false);
  160. proxyEvent('onMouseLeave', e);
  161. },
  162. onMouseDown: e => {
  163. setFocusOpen(true);
  164. setDragging(true);
  165. proxyEvent('onMouseDown', e);
  166. },
  167. onFocus: e => {
  168. var _a;
  169. setFocusOpen(true);
  170. (_a = restProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
  171. proxyEvent('onFocus', e, true);
  172. },
  173. onBlur: e => {
  174. var _a;
  175. setFocusOpen(false);
  176. (_a = restProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
  177. proxyEvent('onBlur', e, true);
  178. }
  179. });
  180. const cloneNode = /*#__PURE__*/_react.default.cloneElement(node, passedProps);
  181. const open = (!!lockOpen || activeOpen) && mergedTipFormatter !== null;
  182. // Wrap on handle with Tooltip when is single mode or multiple with all show tooltip
  183. if (!useActiveTooltipHandle) {
  184. return /*#__PURE__*/_react.default.createElement(_SliderTooltip.default, Object.assign({}, tooltipProps, {
  185. prefixCls: getPrefixCls('tooltip', customizeTooltipPrefixCls !== null && customizeTooltipPrefixCls !== void 0 ? customizeTooltipPrefixCls : legacyTooltipPrefixCls),
  186. title: mergedTipFormatter ? mergedTipFormatter(info.value) : '',
  187. value: info.value,
  188. open: open,
  189. placement: getTooltipPlacement(tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : legacyTooltipPlacement, vertical),
  190. key: index,
  191. classNames: {
  192. root: `${prefixCls}-tooltip`
  193. },
  194. getPopupContainer: getTooltipPopupContainer || legacyGetTooltipPopupContainer || getPopupContainer
  195. }), cloneNode);
  196. }
  197. return cloneNode;
  198. });
  199. // ========================== Active Handle ===========================
  200. const activeHandleRender = useActiveTooltipHandle ? (handle, info) => {
  201. const cloneNode = /*#__PURE__*/_react.default.cloneElement(handle, {
  202. style: Object.assign(Object.assign({}, handle.props.style), {
  203. visibility: 'hidden'
  204. })
  205. });
  206. return /*#__PURE__*/_react.default.createElement(_SliderTooltip.default, Object.assign({}, tooltipProps, {
  207. prefixCls: getPrefixCls('tooltip', customizeTooltipPrefixCls !== null && customizeTooltipPrefixCls !== void 0 ? customizeTooltipPrefixCls : legacyTooltipPrefixCls),
  208. title: mergedTipFormatter ? mergedTipFormatter(info.value) : '',
  209. open: mergedTipFormatter !== null && activeOpen,
  210. placement: getTooltipPlacement(tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : legacyTooltipPlacement, vertical),
  211. key: "tooltip",
  212. classNames: {
  213. root: `${prefixCls}-tooltip`
  214. },
  215. getPopupContainer: getTooltipPopupContainer || legacyGetTooltipPopupContainer || getPopupContainer,
  216. draggingDelete: info.draggingDelete
  217. }), cloneNode);
  218. } : undefined;
  219. // ============================== Render ==============================
  220. const rootStyle = Object.assign(Object.assign(Object.assign(Object.assign({}, contextStyles.root), contextStyle), styles === null || styles === void 0 ? void 0 : styles.root), style);
  221. const mergedTracks = Object.assign(Object.assign({}, contextStyles.tracks), styles === null || styles === void 0 ? void 0 : styles.tracks);
  222. const mergedTracksClassNames = (0, _classnames.default)(contextClassNames.tracks, sliderClassNames === null || sliderClassNames === void 0 ? void 0 : sliderClassNames.tracks);
  223. return wrapCSSVar(
  224. /*#__PURE__*/
  225. // @ts-ignore
  226. _react.default.createElement(_rcSlider.default, Object.assign({}, restProps, {
  227. classNames: Object.assign({
  228. handle: (0, _classnames.default)(contextClassNames.handle, sliderClassNames === null || sliderClassNames === void 0 ? void 0 : sliderClassNames.handle),
  229. rail: (0, _classnames.default)(contextClassNames.rail, sliderClassNames === null || sliderClassNames === void 0 ? void 0 : sliderClassNames.rail),
  230. track: (0, _classnames.default)(contextClassNames.track, sliderClassNames === null || sliderClassNames === void 0 ? void 0 : sliderClassNames.track)
  231. }, mergedTracksClassNames ? {
  232. tracks: mergedTracksClassNames
  233. } : {}),
  234. styles: Object.assign({
  235. handle: Object.assign(Object.assign({}, contextStyles.handle), styles === null || styles === void 0 ? void 0 : styles.handle),
  236. rail: Object.assign(Object.assign({}, contextStyles.rail), styles === null || styles === void 0 ? void 0 : styles.rail),
  237. track: Object.assign(Object.assign({}, contextStyles.track), styles === null || styles === void 0 ? void 0 : styles.track)
  238. }, Object.keys(mergedTracks).length ? {
  239. tracks: mergedTracks
  240. } : {}),
  241. step: restProps.step,
  242. range: range,
  243. className: rootClassNames,
  244. style: rootStyle,
  245. disabled: mergedDisabled,
  246. ref: ref,
  247. prefixCls: prefixCls,
  248. handleRender: handleRender,
  249. activeHandleRender: activeHandleRender,
  250. onChangeComplete: onInternalChangeComplete
  251. })));
  252. });
  253. if (process.env.NODE_ENV !== 'production') {
  254. Slider.displayName = 'Slider';
  255. }
  256. var _default = exports.default = Slider;