UNPKG

7.13 kBJavaScriptView Raw
1"use client";
2
3var __rest = this && this.__rest || function (s, e) {
4 var t = {};
5 for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
6 if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7 if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
8 }
9 return t;
10};
11import * as React from 'react';
12import DownOutlined from "@ant-design/icons/es/icons/DownOutlined";
13import UpOutlined from "@ant-design/icons/es/icons/UpOutlined";
14import classNames from 'classnames';
15import RcInputNumber from 'rc-input-number';
16import ContextIsolator from '../_util/ContextIsolator';
17import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
18import { devUseWarning } from '../_util/warning';
19import ConfigProvider, { ConfigContext } from '../config-provider';
20import DisabledContext from '../config-provider/DisabledContext';
21import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
22import useSize from '../config-provider/hooks/useSize';
23import { FormItemInputContext } from '../form/context';
24import useVariant from '../form/hooks/useVariants';
25import { useCompactItemContext } from '../space/Compact';
26import useStyle from './style';
27const InputNumber = /*#__PURE__*/React.forwardRef((props, ref) => {
28 if (process.env.NODE_ENV !== 'production') {
29 const typeWarning = devUseWarning('InputNumber');
30 typeWarning.deprecated(!('bordered' in props), 'bordered', 'variant');
31 typeWarning(!(props.type === 'number' && props.changeOnWheel), 'usage', 'When `type=number` is used together with `changeOnWheel`, changeOnWheel may not work properly. Please delete `type=number` if it is not necessary.');
32 }
33 const {
34 getPrefixCls,
35 direction
36 } = React.useContext(ConfigContext);
37 const inputRef = React.useRef(null);
38 React.useImperativeHandle(ref, () => inputRef.current);
39 const {
40 className,
41 rootClassName,
42 size: customizeSize,
43 disabled: customDisabled,
44 prefixCls: customizePrefixCls,
45 addonBefore,
46 addonAfter,
47 prefix,
48 suffix,
49 bordered,
50 readOnly,
51 status: customStatus,
52 controls,
53 variant: customVariant
54 } = props,
55 others = __rest(props, ["className", "rootClassName", "size", "disabled", "prefixCls", "addonBefore", "addonAfter", "prefix", "suffix", "bordered", "readOnly", "status", "controls", "variant"]);
56 const prefixCls = getPrefixCls('input-number', customizePrefixCls);
57 // Style
58 const rootCls = useCSSVarCls(prefixCls);
59 const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
60 const {
61 compactSize,
62 compactItemClassnames
63 } = useCompactItemContext(prefixCls, direction);
64 let upIcon = /*#__PURE__*/React.createElement(UpOutlined, {
65 className: `${prefixCls}-handler-up-inner`
66 });
67 let downIcon = /*#__PURE__*/React.createElement(DownOutlined, {
68 className: `${prefixCls}-handler-down-inner`
69 });
70 const controlsTemp = typeof controls === 'boolean' ? controls : undefined;
71 if (typeof controls === 'object') {
72 upIcon = typeof controls.upIcon === 'undefined' ? upIcon : (/*#__PURE__*/React.createElement("span", {
73 className: `${prefixCls}-handler-up-inner`
74 }, controls.upIcon));
75 downIcon = typeof controls.downIcon === 'undefined' ? downIcon : (/*#__PURE__*/React.createElement("span", {
76 className: `${prefixCls}-handler-down-inner`
77 }, controls.downIcon));
78 }
79 const {
80 hasFeedback,
81 status: contextStatus,
82 isFormItemInput,
83 feedbackIcon
84 } = React.useContext(FormItemInputContext);
85 const mergedStatus = getMergedStatus(contextStatus, customStatus);
86 const mergedSize = useSize(ctx => {
87 var _a;
88 return (_a = customizeSize !== null && customizeSize !== void 0 ? customizeSize : compactSize) !== null && _a !== void 0 ? _a : ctx;
89 });
90 // ===================== Disabled =====================
91 const disabled = React.useContext(DisabledContext);
92 const mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
93 const [variant, enableVariantCls] = useVariant('inputNumber', customVariant, bordered);
94 /* biome-ignore lint/complexity/noUselessFragments: avoid falsy value */ /* eslint-disable-next-line react/jsx-no-useless-fragment */
95 const suffixNode = hasFeedback && /*#__PURE__*/React.createElement(React.Fragment, null, feedbackIcon);
96 const inputNumberClass = classNames({
97 [`${prefixCls}-lg`]: mergedSize === 'large',
98 [`${prefixCls}-sm`]: mergedSize === 'small',
99 [`${prefixCls}-rtl`]: direction === 'rtl',
100 [`${prefixCls}-in-form-item`]: isFormItemInput
101 }, hashId);
102 const wrapperClassName = `${prefixCls}-group`;
103 const element = /*#__PURE__*/React.createElement(RcInputNumber, Object.assign({
104 ref: inputRef,
105 disabled: mergedDisabled,
106 className: classNames(cssVarCls, rootCls, className, rootClassName, compactItemClassnames),
107 upHandler: upIcon,
108 downHandler: downIcon,
109 prefixCls: prefixCls,
110 readOnly: readOnly,
111 controls: controlsTemp,
112 prefix: prefix,
113 suffix: suffixNode || suffix,
114 addonBefore: addonBefore && (/*#__PURE__*/React.createElement(ContextIsolator, {
115 form: true,
116 space: true
117 }, addonBefore)),
118 addonAfter: addonAfter && (/*#__PURE__*/React.createElement(ContextIsolator, {
119 form: true,
120 space: true
121 }, addonAfter)),
122 classNames: {
123 input: inputNumberClass,
124 variant: classNames({
125 [`${prefixCls}-${variant}`]: enableVariantCls
126 }, getStatusClassNames(prefixCls, mergedStatus, hasFeedback)),
127 affixWrapper: classNames({
128 [`${prefixCls}-affix-wrapper-sm`]: mergedSize === 'small',
129 [`${prefixCls}-affix-wrapper-lg`]: mergedSize === 'large',
130 [`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl',
131 [`${prefixCls}-affix-wrapper-without-controls`]: controls === false
132 }, hashId),
133 wrapper: classNames({
134 [`${wrapperClassName}-rtl`]: direction === 'rtl'
135 }, hashId),
136 groupWrapper: classNames({
137 [`${prefixCls}-group-wrapper-sm`]: mergedSize === 'small',
138 [`${prefixCls}-group-wrapper-lg`]: mergedSize === 'large',
139 [`${prefixCls}-group-wrapper-rtl`]: direction === 'rtl',
140 [`${prefixCls}-group-wrapper-${variant}`]: enableVariantCls
141 }, getStatusClassNames(`${prefixCls}-group-wrapper`, mergedStatus, hasFeedback), hashId)
142 }
143 }, others));
144 return wrapCSSVar(element);
145});
146const TypedInputNumber = InputNumber;
147/** @private Internal Component. Do not use in your production. */
148const PureInputNumber = props => (/*#__PURE__*/React.createElement(ConfigProvider, {
149 theme: {
150 components: {
151 InputNumber: {
152 handleVisible: true
153 }
154 }
155 }
156}, /*#__PURE__*/React.createElement(InputNumber, Object.assign({}, props))));
157if (process.env.NODE_ENV !== 'production') {
158 TypedInputNumber.displayName = 'InputNumber';
159}
160TypedInputNumber._InternalPanelDoNotUseOrYouWillBeFired = PureInputNumber;
161export default TypedInputNumber;
\No newline at end of file