index.js 6.9 KB

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