index.js 11 KB

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