1 line
22 KiB
JSON
1 line
22 KiB
JSON
|
{"ast":null,"code":"\"use client\";\n\nimport _toConsumableArray from \"@babel/runtime/helpers/esm/toConsumableArray\";\nvar __rest = this && this.__rest || function (s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n }\n return t;\n};\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { useEvent } from 'rc-util';\nimport pickAttrs from \"rc-util/es/pickAttrs\";\nimport { getMergedStatus } from '../../_util/statusUtils';\nimport { devUseWarning } from '../../_util/warning';\nimport { ConfigContext } from '../../config-provider';\nimport useCSSVarCls from '../../config-provider/hooks/useCSSVarCls';\nimport useSize from '../../config-provider/hooks/useSize';\nimport { FormItemInputContext } from '../../form/context';\nimport useStyle from '../style/otp';\nimport OTPInput from './OTPInput';\nfunction strToArr(str) {\n return (str || '').split('');\n}\nconst OTP = /*#__PURE__*/React.forwardRef((props, ref) => {\n const {\n prefixCls: customizePrefixCls,\n length = 6,\n size: customSize,\n defaultValue,\n value,\n onChange,\n formatter,\n variant,\n disabled,\n status: customStatus,\n autoFocus,\n mask\n } = props,\n restProps = __rest(props, [\"prefixCls\", \"length\", \"size\", \"defaultValue\", \"value\", \"onChange\", \"formatter\", \"variant\", \"disabled\", \"status\", \"autoFocus\", \"mask\"]);\n if (process.env.NODE_ENV !== 'production') {\n const warning = devUseWarning('Input.OTP');\n process.env.NODE_ENV !== \"production\" ? warning(!(typeof mask === 'string' && mask.length > 1), 'usage', '`mask` prop should be a single character.') : void 0;\n }\n const {\n getPrefixCls,\n direction\n } = React.useContext(ConfigContext);\n const prefixCls = getPrefixCls('otp', customizePrefixCls);\n const domAttrs = pickAttrs(restProps, {\n aria: true,\n data: true,\n attr: true\n });\n // ========================= Root =========================\n // Style\n const rootCls = useCSSVarCls(prefixCls);\n const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);\n // ========================= Size =========================\n const mergedSize = useSize(ctx => customSize !== null && customSize !== void 0 ? customSize : ctx);\n // ======================== Status ========================\n const formContext = React.useContext(FormItemInputContext);\n const mergedStatus = getMergedStatus(formContext.status, customStatus);\n const proxyFormContext = React.useMemo(() => Object.assign(Object.assign({}, formContext), {\n status: mergedStatus,\n hasFeedback: false,\n feedbackIcon: null\n }), [formContext, mergedStatus]);\n // ========================= Refs =========================\n const containerRef = React.useRef(null);\n const refs = React.useRef({});\n React.useImperativeHandle(ref, () => ({\n focus: () => {\n var _a;\n (_a = refs.current[0]) === null || _a === void 0 ? void 0 : _a.focus();\n },\n blur: () => {\n var _a;\n for (let i = 0; i < length; i += 1) {\n (_a = refs.current[i]) === null || _a === void 0 ? void 0 : _a.blur();\n }\n },\n nativeElement: containerRef.current\n }));\n // ======================= Formatter ======================\n const internalFormatter = txt => formatter ? formatter(txt) : txt;\n // ======================== Values ========================\n const [valueCells, setValueCells] = React.useState(strToArr(internalFormatter(defaultValue || '')));\n React.useEffect(() => {\n if (value !== undefined) {\n setValueCells(strToArr(value));\n }\n }, [value]);\n const triggerValueCellsChange = useEvent(nextValueCells => {\n setValueCells(nextValueCells);\n // Trigger
|