232 lines
10 KiB
JavaScript
232 lines
10 KiB
JavaScript
"use strict";
|
|
"use client";
|
|
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = void 0;
|
|
var _react = _interopRequireDefault(require("react"));
|
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
var _rcSlider = _interopRequireDefault(require("rc-slider"));
|
|
var _raf = _interopRequireDefault(require("rc-util/lib/raf"));
|
|
var _warning = require("../_util/warning");
|
|
var _configProvider = require("../config-provider");
|
|
var _DisabledContext = _interopRequireDefault(require("../config-provider/DisabledContext"));
|
|
var _SliderTooltip = _interopRequireDefault(require("./SliderTooltip"));
|
|
var _style = _interopRequireDefault(require("./style"));
|
|
var _Context = _interopRequireDefault(require("./Context"));
|
|
var _useRafLock = _interopRequireDefault(require("./useRafLock"));
|
|
var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
var t = {};
|
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
}
|
|
return t;
|
|
};
|
|
function getTipFormatter(tipFormatter, legacyTipFormatter) {
|
|
if (tipFormatter || tipFormatter === null) {
|
|
return tipFormatter;
|
|
}
|
|
if (legacyTipFormatter || legacyTipFormatter === null) {
|
|
return legacyTipFormatter;
|
|
}
|
|
return val => typeof val === 'number' ? val.toString() : '';
|
|
}
|
|
const Slider = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
|
|
const {
|
|
prefixCls: customizePrefixCls,
|
|
range,
|
|
className,
|
|
rootClassName,
|
|
style,
|
|
disabled,
|
|
// Deprecated Props
|
|
tooltipPrefixCls: legacyTooltipPrefixCls,
|
|
tipFormatter: legacyTipFormatter,
|
|
tooltipVisible: legacyTooltipVisible,
|
|
getTooltipPopupContainer: legacyGetTooltipPopupContainer,
|
|
tooltipPlacement: legacyTooltipPlacement,
|
|
tooltip = {},
|
|
onChangeComplete
|
|
} = props,
|
|
restProps = __rest(props, ["prefixCls", "range", "className", "rootClassName", "style", "disabled", "tooltipPrefixCls", "tipFormatter", "tooltipVisible", "getTooltipPopupContainer", "tooltipPlacement", "tooltip", "onChangeComplete"]);
|
|
const {
|
|
vertical
|
|
} = props;
|
|
const {
|
|
direction: contextDirection,
|
|
slider,
|
|
getPrefixCls,
|
|
getPopupContainer
|
|
} = _react.default.useContext(_configProvider.ConfigContext);
|
|
const contextDisabled = _react.default.useContext(_DisabledContext.default);
|
|
const mergedDisabled = disabled !== null && disabled !== void 0 ? disabled : contextDisabled;
|
|
// ============================= Context ==============================
|
|
const {
|
|
handleRender: contextHandleRender,
|
|
direction: internalContextDirection
|
|
} = _react.default.useContext(_Context.default);
|
|
const mergedDirection = internalContextDirection || contextDirection;
|
|
const isRTL = mergedDirection === 'rtl';
|
|
// =============================== Open ===============================
|
|
const [hoverOpen, setHoverOpen] = (0, _useRafLock.default)();
|
|
const [focusOpen, setFocusOpen] = (0, _useRafLock.default)();
|
|
const tooltipProps = Object.assign({}, tooltip);
|
|
const {
|
|
open: tooltipOpen,
|
|
placement: tooltipPlacement,
|
|
getPopupContainer: getTooltipPopupContainer,
|
|
prefixCls: customizeTooltipPrefixCls,
|
|
formatter: tipFormatter
|
|
} = tooltipProps;
|
|
const lockOpen = tooltipOpen !== null && tooltipOpen !== void 0 ? tooltipOpen : legacyTooltipVisible;
|
|
const activeOpen = (hoverOpen || focusOpen) && lockOpen !== false;
|
|
const mergedTipFormatter = getTipFormatter(tipFormatter, legacyTipFormatter);
|
|
// ============================= Change ==============================
|
|
const [dragging, setDragging] = (0, _useRafLock.default)();
|
|
const onInternalChangeComplete = nextValues => {
|
|
onChangeComplete === null || onChangeComplete === void 0 ? void 0 : onChangeComplete(nextValues);
|
|
setDragging(false);
|
|
};
|
|
// ============================ Placement ============================
|
|
const getTooltipPlacement = (placement, vert) => {
|
|
if (placement) {
|
|
return placement;
|
|
}
|
|
if (!vert) {
|
|
return 'top';
|
|
}
|
|
return isRTL ? 'left' : 'right';
|
|
};
|
|
// ============================== Style ===============================
|
|
const prefixCls = getPrefixCls('slider', customizePrefixCls);
|
|
const [wrapCSSVar, hashId, cssVarCls] = (0, _style.default)(prefixCls);
|
|
const cls = (0, _classnames.default)(className, slider === null || slider === void 0 ? void 0 : slider.className, rootClassName, {
|
|
[`${prefixCls}-rtl`]: isRTL,
|
|
[`${prefixCls}-lock`]: dragging
|
|
}, hashId, cssVarCls);
|
|
// make reverse default on rtl direction
|
|
if (isRTL && !restProps.vertical) {
|
|
restProps.reverse = !restProps.reverse;
|
|
}
|
|
// ============================= Warning ==============================
|
|
// Warning for deprecated usage
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
const warning = (0, _warning.devUseWarning)('Slider');
|
|
[['tooltipPrefixCls', 'prefixCls'], ['getTooltipPopupContainer', 'getPopupContainer'], ['tipFormatter', 'formatter'], ['tooltipPlacement', 'placement'], ['tooltipVisible', 'open']].forEach(_ref => {
|
|
let [deprecatedName, newName] = _ref;
|
|
warning.deprecated(!(deprecatedName in props), deprecatedName, `tooltip.${newName}`);
|
|
});
|
|
}
|
|
// ============================== Handle ==============================
|
|
_react.default.useEffect(() => {
|
|
const onMouseUp = () => {
|
|
// Delay for 1 frame to make the click to enable hide tooltip
|
|
// even when the handle is focused
|
|
(0, _raf.default)(() => {
|
|
setFocusOpen(false);
|
|
}, 1);
|
|
};
|
|
document.addEventListener('mouseup', onMouseUp);
|
|
return () => {
|
|
document.removeEventListener('mouseup', onMouseUp);
|
|
};
|
|
}, []);
|
|
const useActiveTooltipHandle = range && !lockOpen;
|
|
const handleRender = contextHandleRender || ((node, info) => {
|
|
const {
|
|
index
|
|
} = info;
|
|
const nodeProps = node.props;
|
|
function proxyEvent(eventName, event, triggerRestPropsEvent) {
|
|
var _a, _b, _c, _d;
|
|
if (triggerRestPropsEvent) {
|
|
(_b = (_a = restProps)[eventName]) === null || _b === void 0 ? void 0 : _b.call(_a, event);
|
|
}
|
|
(_d = (_c = nodeProps)[eventName]) === null || _d === void 0 ? void 0 : _d.call(_c, event);
|
|
}
|
|
const passedProps = Object.assign(Object.assign({}, nodeProps), {
|
|
onMouseEnter: e => {
|
|
setHoverOpen(true);
|
|
proxyEvent('onMouseEnter', e);
|
|
},
|
|
onMouseLeave: e => {
|
|
setHoverOpen(false);
|
|
proxyEvent('onMouseLeave', e);
|
|
},
|
|
onMouseDown: e => {
|
|
setFocusOpen(true);
|
|
setDragging(true);
|
|
proxyEvent('onMouseDown', e);
|
|
},
|
|
onFocus: e => {
|
|
var _a;
|
|
setFocusOpen(true);
|
|
(_a = restProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
|
|
proxyEvent('onFocus', e, true);
|
|
},
|
|
onBlur: e => {
|
|
var _a;
|
|
setFocusOpen(false);
|
|
(_a = restProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
|
|
proxyEvent('onBlur', e, true);
|
|
}
|
|
});
|
|
const cloneNode = /*#__PURE__*/_react.default.cloneElement(node, passedProps);
|
|
const open = (!!lockOpen || activeOpen) && mergedTipFormatter !== null;
|
|
// Wrap on handle with Tooltip when is single mode or multiple with all show tooltip
|
|
if (!useActiveTooltipHandle) {
|
|
return /*#__PURE__*/_react.default.createElement(_SliderTooltip.default, Object.assign({}, tooltipProps, {
|
|
prefixCls: getPrefixCls('tooltip', customizeTooltipPrefixCls !== null && customizeTooltipPrefixCls !== void 0 ? customizeTooltipPrefixCls : legacyTooltipPrefixCls),
|
|
title: mergedTipFormatter ? mergedTipFormatter(info.value) : '',
|
|
open: open,
|
|
placement: getTooltipPlacement(tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : legacyTooltipPlacement, vertical),
|
|
key: index,
|
|
overlayClassName: `${prefixCls}-tooltip`,
|
|
getPopupContainer: getTooltipPopupContainer || legacyGetTooltipPopupContainer || getPopupContainer
|
|
}), cloneNode);
|
|
}
|
|
return cloneNode;
|
|
});
|
|
// ========================== Active Handle ===========================
|
|
const activeHandleRender = useActiveTooltipHandle ? (handle, info) => {
|
|
const cloneNode = /*#__PURE__*/_react.default.cloneElement(handle, {
|
|
style: Object.assign(Object.assign({}, handle.props.style), {
|
|
visibility: 'hidden'
|
|
})
|
|
});
|
|
return /*#__PURE__*/_react.default.createElement(_SliderTooltip.default, Object.assign({}, tooltipProps, {
|
|
prefixCls: getPrefixCls('tooltip', customizeTooltipPrefixCls !== null && customizeTooltipPrefixCls !== void 0 ? customizeTooltipPrefixCls : legacyTooltipPrefixCls),
|
|
title: mergedTipFormatter ? mergedTipFormatter(info.value) : '',
|
|
open: mergedTipFormatter !== null && activeOpen,
|
|
placement: getTooltipPlacement(tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : legacyTooltipPlacement, vertical),
|
|
key: "tooltip",
|
|
overlayClassName: `${prefixCls}-tooltip`,
|
|
getPopupContainer: getTooltipPopupContainer || legacyGetTooltipPopupContainer || getPopupContainer,
|
|
draggingDelete: info.draggingDelete
|
|
}), cloneNode);
|
|
} : undefined;
|
|
// ============================== Render ==============================
|
|
const mergedStyle = Object.assign(Object.assign({}, slider === null || slider === void 0 ? void 0 : slider.style), style);
|
|
return wrapCSSVar(
|
|
/*#__PURE__*/
|
|
// @ts-ignore
|
|
_react.default.createElement(_rcSlider.default, Object.assign({}, restProps, {
|
|
step: restProps.step,
|
|
range: range,
|
|
className: cls,
|
|
style: mergedStyle,
|
|
disabled: mergedDisabled,
|
|
ref: ref,
|
|
prefixCls: prefixCls,
|
|
handleRender: handleRender,
|
|
activeHandleRender: activeHandleRender,
|
|
onChangeComplete: onInternalChangeComplete
|
|
})));
|
|
});
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
Slider.displayName = 'Slider';
|
|
}
|
|
var _default = exports.default = Slider; |