refactor:inputnumber (#6265)

* refactor:inputnumber

* docs:update & refactor: inputnumber type

---------

Co-authored-by: tangjinzhou <[email protected]>

Author: shifeng1993

components/input-number/index.en-US.md

@@ -2,7 +2,7 @@
 category: Components
 type: Data Entry
 title: InputNumber
-cover: https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JvWbSYhuNlIAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 Enter a number within certain range with the mouse or keyboard.

components/input-number/index.tsx

@@ -1,4 +1,4 @@
-import type { PropType, ExtractPropTypes, HTMLAttributes, App } from 'vue';
+import type { ExtractPropTypes, HTMLAttributes, App } from 'vue';
 import { watch, defineComponent, ref, computed } from 'vue';
 import classNames from '../_util/classNames';
 import UpOutlined from '@ant-design/icons-vue/UpOutlined';
@@ -17,11 +17,16 @@ import PropTypes from '../_util/vue-types';
 import isValidValue from '../_util/isValidValue';
 import type { InputStatus } from '../_util/statusUtils';
 import { getStatusClassNames, getMergedStatus } from '../_util/statusUtils';
+import { booleanType, stringType } from '../_util/type';
+
+// CSSINJS
+import useStyle from './style';
+
 const baseProps = baseInputNumberProps();
 export const inputNumberProps = () => ({
   ...baseProps,
-  size: { type: String as PropType<SizeType> },
-  bordered: { type: Boolean, default: true },
+  size: stringType<SizeType>(),
+  bordered: booleanType(true),
   placeholder: String,
   name: String,
   id: String,
@@ -31,7 +36,7 @@ export const inputNumberProps = () => ({
   prefix: PropTypes.any,
   'onUpdate:value': baseProps.onChange,
   valueModifiers: Object,
-  status: String as PropType<InputStatus>,
+  status: stringType<InputStatus>(),
 });
 
 export type InputNumberProps = Partial<ExtractPropTypes<ReturnType<typeof inputNumberProps>>>;
@@ -48,6 +53,10 @@ const InputNumber = defineComponent({
     const formItemInputContext = FormItemInputContext.useInject();
     const mergedStatus = computed(() => getMergedStatus(formItemInputContext.status, props.status));
     const { prefixCls, size, direction } = useConfigInject('input-number', props);
+
+    // Style
+    const [wrapSSR, hashId] = useStyle(prefixCls);
+
     const mergedValue = ref(props.value === undefined ? props.defaultValue : props.value);
     const focused = ref(false);
     watch(
@@ -112,6 +121,7 @@ const InputNumber = defineComponent({
         },
         getStatusClassNames(preCls, mergedStatus.value),
         className,
+        hashId.value,
       );
 
       let element = (
@@ -153,6 +163,7 @@ const InputNumber = defineComponent({
             // className will go to addon wrapper
             [`${className}`]: !hasAddon && className,
           },
+          hashId.value,
         );
         element = (
           <div
@@ -175,9 +186,14 @@ const InputNumber = defineComponent({
         ) : null;
         const addonAfterNode = addonAfter ? <div class={addonClassName}>{addonAfter}</div> : null;
 
-        const mergedWrapperClassName = classNames(`${preCls}-wrapper`, wrapperClassName, {
-          [`${wrapperClassName}-rtl`]: direction.value === 'rtl',
-        });
+        const mergedWrapperClassName = classNames(
+          `${preCls}-wrapper`,
+          wrapperClassName,
+          {
+            [`${wrapperClassName}-rtl`]: direction.value === 'rtl',
+          },
+          hashId.value,
+        );
 
         const mergedGroupClassName = classNames(
           `${preCls}-group-wrapper`,
@@ -188,6 +204,7 @@ const InputNumber = defineComponent({
           },
           getStatusClassNames(`${prefixCls}-group-wrapper`, mergedStatus.value, hasFeedback),
           className,
+          hashId.value,
         );
         element = (
           <div class={mergedGroupClassName} style={style}>
@@ -199,7 +216,7 @@ const InputNumber = defineComponent({
           </div>
         );
       }
-      return cloneElement(element, { style });
+      return wrapSSR(cloneElement(element, { style }));
     };
   },
 });

components/input-number/index.zh-CN.md

@@ -3,7 +3,7 @@ category: Components
 type: 数据录入
 title: InputNumber
 subtitle: 数字输入框
-cover: https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JvWbSYhuNlIAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 通过鼠标或键盘，输入范围内的数值。

components/input-number/src/InputNumber.tsx

@@ -5,11 +5,12 @@ import StepHandler from './StepHandler';
 import { getNumberPrecision, num2str, validateNumber } from './utils/numberUtil';
 import useCursor from './hooks/useCursor';
 import useFrame from './hooks/useFrame';
-import type { HTMLAttributes, PropType } from 'vue';
+import type { HTMLAttributes } from 'vue';
 import { watch, computed, ref, defineComponent } from 'vue';
 import type { ChangeEvent, KeyboardEventHandler } from '../../_util/EventInterface';
 import KeyCode from '../../_util/KeyCode';
 import classNames from '../../_util/classNames';
+import { booleanType, stringType, someType, functionType } from '../../_util/type';
 
 /**
  * We support `stringMode` which need handle correct type when user call in onChange
@@ -36,46 +37,42 @@ const getDecimalIfValidate = (value: ValueType) => {
 
 export const inputNumberProps = () => ({
   /** value will show as string */
-  stringMode: { type: Boolean as PropType<boolean> },
-
-  defaultValue: { type: [String, Number] as PropType<ValueType> },
-  value: { type: [String, Number] as PropType<ValueType> },
-
-  prefixCls: { type: String as PropType<string> },
-  min: { type: [String, Number] as PropType<ValueType> },
-  max: { type: [String, Number] as PropType<ValueType> },
-  step: { type: [String, Number] as PropType<ValueType>, default: 1 },
-  tabindex: { type: Number as PropType<number> },
-  controls: { type: Boolean as PropType<boolean>, default: true },
-  readonly: { type: Boolean as PropType<boolean> },
-  disabled: { type: Boolean as PropType<boolean> },
-  autofocus: { type: Boolean as PropType<boolean> },
-  keyboard: { type: Boolean as PropType<boolean>, default: true },
+  stringMode: booleanType(),
+
+  defaultValue: someType<ValueType>([String, Number]),
+  value: someType<ValueType>([String, Number]),
+
+  prefixCls: stringType<string>(),
+  min: someType<ValueType>([String, Number]),
+  max: someType<ValueType>([String, Number]),
+  step: someType<ValueType>([String, Number], 1),
+  tabindex: Number,
+  controls: booleanType(true),
+  readonly: booleanType(),
+  disabled: booleanType(),
+  autofocus: booleanType(),
+  keyboard: booleanType(true),
 
   /** Parse display value to validate number */
-  parser: { type: Function as PropType<(displayValue: string | undefined) => ValueType> },
+  parser: functionType<(displayValue: string | undefined) => ValueType>(),
   /** Transform `value` to display value show in input */
-  formatter: {
-    type: Function as PropType<
+  formatter:
+    functionType<
       (value: ValueType | undefined, info: { userTyping: boolean; input: string }) => string
-    >,
-  },
+    >(),
   /** Syntactic sugar of `formatter`. Config precision of display. */
-  precision: { type: Number as PropType<number> },
+  precision: Number,
   /** Syntactic sugar of `formatter`. Config decimal separator of display. */
-  decimalSeparator: { type: String as PropType<string> },
+  decimalSeparator: String,
 
-  onInput: { type: Function as PropType<(text: string) => void> },
-  onChange: { type: Function as PropType<(value: ValueType) => void> },
-  onPressEnter: { type: Function as PropType<KeyboardEventHandler> },
+  onInput: functionType<(text: string) => void>(),
+  onChange: functionType<(value: ValueType) => void>(),
+  onPressEnter: functionType<KeyboardEventHandler>(),
 
-  onStep: {
-    type: Function as PropType<
-      (value: ValueType, info: { offset: ValueType; type: 'up' | 'down' }) => void
-    >,
-  },
-  onBlur: { type: Function as PropType<(e: FocusEvent) => void> },
-  onFocus: { type: Function as PropType<(e: FocusEvent) => void> },
+  onStep:
+    functionType<(value: ValueType, info: { offset: ValueType; type: 'up' | 'down' }) => void>(),
+  onBlur: functionType<(e: FocusEvent) => void>(),
+  onFocus: functionType<(e: FocusEvent) => void>(),
 });
 
 export default defineComponent({

components/input-number/src/StepHandler.tsx

@@ -1,7 +1,7 @@
 import isMobile from '../../vc-util/isMobile';
-import type { PropType } from 'vue';
 import { onBeforeUnmount, ref, defineComponent } from 'vue';
 import classNames from '../../_util/classNames';
+import { functionType } from '../../_util/type';
 
 /**
  * When click and hold on a button - the speed of auto changing the value.
@@ -21,7 +21,7 @@ export default defineComponent({
     prefixCls: String,
     upDisabled: Boolean,
     downDisabled: Boolean,
-    onStep: { type: Function as PropType<(up: boolean) => void> },
+    onStep: functionType<(up: boolean) => void>(),
   },
   slots: ['upNode', 'downNode'],
   setup(props, { slots, emit }) {