1 line
16 KiB
JSON
1 line
16 KiB
JSON
|
{"ast":null,"code":"import _objectSpread from \"@babel/runtime/helpers/esm/objectSpread2\";\nimport _slicedToArray from \"@babel/runtime/helpers/esm/slicedToArray\";\nimport classNames from 'classnames';\nimport CSSMotion from 'rc-motion';\nimport useLayoutEffect from \"rc-util/es/hooks/useLayoutEffect\";\nimport { composeRef } from \"rc-util/es/ref\";\nimport * as React from 'react';\nvar calcThumbStyle = function calcThumbStyle(targetElement) {\n return targetElement ? {\n left: targetElement.offsetLeft,\n right: targetElement.parentElement.clientWidth - targetElement.clientWidth - targetElement.offsetLeft,\n width: targetElement.clientWidth\n } : null;\n};\nvar toPX = function toPX(value) {\n return value !== undefined ? \"\".concat(value, \"px\") : undefined;\n};\nexport default function MotionThumb(props) {\n var prefixCls = props.prefixCls,\n containerRef = props.containerRef,\n value = props.value,\n getValueIndex = props.getValueIndex,\n motionName = props.motionName,\n onMotionStart = props.onMotionStart,\n onMotionEnd = props.onMotionEnd,\n direction = props.direction;\n var thumbRef = React.useRef(null);\n var _React$useState = React.useState(value),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n prevValue = _React$useState2[0],\n setPrevValue = _React$useState2[1];\n\n // =========================== Effect ===========================\n var findValueElement = function findValueElement(val) {\n var _containerRef$current;\n var index = getValueIndex(val);\n var ele = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelectorAll(\".\".concat(prefixCls, \"-item\"))[index];\n return (ele === null || ele === void 0 ? void 0 : ele.offsetParent) && ele;\n };\n var _React$useState3 = React.useState(null),\n _React$useState4 = _slicedToArray(_React$useState3, 2),\n prevStyle = _React$useState4[0],\n setPrevStyle = _React$useState4[1];\n var _React$useState5 = React.useState(null),\n _React$useState6 = _slicedToArray(_React$useState5, 2),\n nextStyle = _React$useState6[0],\n setNextStyle = _React$useState6[1];\n useLayoutEffect(function () {\n if (prevValue !== value) {\n var prev = findValueElement(prevValue);\n var next = findValueElement(value);\n var calcPrevStyle = calcThumbStyle(prev);\n var calcNextStyle = calcThumbStyle(next);\n setPrevValue(value);\n setPrevStyle(calcPrevStyle);\n setNextStyle(calcNextStyle);\n if (prev && next) {\n onMotionStart();\n } else {\n onMotionEnd();\n }\n }\n }, [value]);\n var thumbStart = React.useMemo(function () {\n return direction === 'rtl' ? toPX(-(prevStyle === null || prevStyle === void 0 ? void 0 : prevStyle.right)) : toPX(prevStyle === null || prevStyle === void 0 ? void 0 : prevStyle.left);\n }, [direction, prevStyle]);\n var thumbActive = React.useMemo(function () {\n return direction === 'rtl' ? toPX(-(nextStyle === null || nextStyle === void 0 ? void 0 : nextStyle.right)) : toPX(nextStyle === null || nextStyle === void 0 ? void 0 : nextStyle.left);\n }, [direction, nextStyle]);\n\n // =========================== Motion ===========================\n var onAppearStart = function onAppearStart() {\n return {\n transform: \"translateX(var(--thumb-start-left))\",\n width: \"var(--thumb-start-width)\"\n };\n };\n var onAppearActive = function onAppearActive() {\n return {\n transform: \"translateX(var(--thumb-active-left))\",\n width: \"var(--thumb-active-width)\"\n };\n };\n var onVisibleChanged = function onVisibleChanged() {\n setPrevStyle(null);\n setNextStyle(null);\n onMotionEnd();\n };\n\n // =========================== Render ===========================\n // No need motion when nothing exist in queue\n if (!prevStyle || !nextStyle) {\n return null;\n }\n return /*#__PURE__*/React.createElement(CSSMotion, {\n visible: true,\n motionName: motionName,\n mot
|