feat: InputNumber support pure panel (#37526)

* feat: InputNumber support purePanel * test: Update snapshot * chore: simplify code
2 years ago · 9818c71eb7
5 changed files with 220 additions and 4 deletions
--- a/components/input-number/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/input-number/tests/snapshots/demo-extend.test.ts.snap
@ -2098,6 +2098,87 @@ Array [
 ]
 `;

+exports[`renders ./components/input-number/demo/render-panel.md extend context correctly 1`] = `
+<div
+  style="display:flex;flex-direction:column;row-gap:16px"
+>
+  <div
+    class="ant-input-number"
+    style="width:100%"
+  >
+    <div
+      class="ant-input-number-handler-wrap"
+    >
+      <span
+        aria-disabled="false"
+        aria-label="Increase Value"
+        class="ant-input-number-handler ant-input-number-handler-up"
+        role="button"
+        unselectable="on"
+      >
+        <span
+          aria-label="up"
+          class="anticon anticon-up ant-input-number-handler-up-inner"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="up"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
+      <span
+        aria-disabled="false"
+        aria-label="Decrease Value"
+        class="ant-input-number-handler ant-input-number-handler-down"
+        role="button"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-input-number-handler-down-inner"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+    <div
+      class="ant-input-number-input-wrap"
+    >
+      <input
+        autocomplete="off"
+        class="ant-input-number-input"
+        role="spinbutton"
+        step="1"
+        value=""
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/input-number/demo/size.md extend context correctly 1`] = `
 <div
  class="ant-space ant-space-horizontal ant-space-align-center"
--- a/components/input-number/tests/snapshots/demo.test.ts.snap
+++ b/components/input-number/tests/snapshots/demo.test.ts.snap
@ -1826,6 +1826,87 @@ Array [
 ]
 `;

+exports[`renders ./components/input-number/demo/render-panel.md correctly 1`] = `
+<div
+  style="display:flex;flex-direction:column;row-gap:16px"
+>
+  <div
+    class="ant-input-number"
+    style="width:100%"
+  >
+    <div
+      class="ant-input-number-handler-wrap"
+    >
+      <span
+        aria-disabled="false"
+        aria-label="Increase Value"
+        class="ant-input-number-handler ant-input-number-handler-up"
+        role="button"
+        unselectable="on"
+      >
+        <span
+          aria-label="up"
+          class="anticon anticon-up ant-input-number-handler-up-inner"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="up"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
+      <span
+        aria-disabled="false"
+        aria-label="Decrease Value"
+        class="ant-input-number-handler ant-input-number-handler-down"
+        role="button"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-input-number-handler-down-inner"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+    <div
+      class="ant-input-number-input-wrap"
+    >
+      <input
+        autocomplete="off"
+        class="ant-input-number-input"
+        role="spinbutton"
+        step="1"
+        value=""
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
 <div
  class="ant-space ant-space-horizontal ant-space-align-center"
--- a/components/input-number/demo/render-panel.md
+++ b/components/input-number/demo/render-panel.md
@ -0,0 +1,29 @@
+---
+order: 99
+title:
+  zh-CN: _InternalPanelDoNotUseOrYouWillBeFired
+  en-US: _InternalPanelDoNotUseOrYouWillBeFired
+debug: true
+---
+
+## zh-CN
+
+调试用组件，请勿直接使用。
+
+## en-US
+
+Debug usage. Do not use in your production.
+
+```tsx
+import React from 'react';
+import { InputNumber } from 'antd';
+
+/** Test usage. Do not use in your production. */
+const { _InternalPanelDoNotUseOrYouWillBeFired: InternalInputNumber } = InputNumber;
+
+export default () => (
+  <div style={{ display: 'flex', flexDirection: 'column', rowGap: 16 }}>
+    <InternalInputNumber style={{ width: '100%' }} />
+  </div>
+);
+```
--- a/components/input-number/index.tsx
+++ b/components/input-number/index.tsx
@ -6,7 +6,7 @@ import RcInputNumber from 'rc-input-number';
 import type { ValueType } from 'rc-input-number/lib/utils/MiniDecimal';
 import * as React from 'react';
 import { useContext } from 'react';
-import { ConfigContext } from '../config-provider';
+import ConfigProvider, { ConfigContext } from '../config-provider';
 import DisabledContext from '../config-provider/DisabledContext';
 import type { SizeType } from '../config-provider/SizeContext';
 import SizeContext from '../config-provider/SizeContext';
@ -203,8 +203,29 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
  return wrapSSR(element);
 });

-export default InputNumber as (<T extends ValueType = ValueType>(
+const TypedInputNumber = InputNumber as unknown as (<T extends ValueType = ValueType>(
  props: React.PropsWithChildren<InputNumberProps<T>> & {
    ref?: React.Ref<HTMLInputElement>;
  },
-) => React.ReactElement) & { displayName?: string };
+) => React.ReactElement) & {
+  displayName?: string;
+  _InternalPanelDoNotUseOrYouWillBeFired: typeof PureInputNumber;
+};
+
+const PureInputNumber = (props: InputNumberProps<any>) => (
+  <ConfigProvider
+    theme={{
+      override: {
+        InputNumber: {
+          handleVisible: true,
+        },
+      },
+    }}
+  >
+    <InputNumber {...props} />
+  </ConfigProvider>
+);
+
+TypedInputNumber._InternalPanelDoNotUseOrYouWillBeFired = PureInputNumber;
+
+export default TypedInputNumber;
--- a/components/input-number/style/index.tsx
+++ b/components/input-number/style/index.tsx
@ -17,6 +17,8 @@ export interface ComponentToken {
  controlWidth: number;
  handleWidth: number;
  handleFontSize: number;
+  /** Default `auto`. Set `true` will always show the handle */
+  handleVisible: 'auto' | true;
 }

 type InputNumberToken = InputToken<FullToken<'InputNumber'>>;
@ -44,6 +46,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
    controlRadiusSM,
    controlRadiusLG,
    controlWidth,
+    handleVisible,
  } = token;

  return [
@ -182,7 +185,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
          borderStartEndRadius: controlRadius,
          borderEndEndRadius: controlRadius,
          borderEndStartRadius: 0,
-          opacity: 0,
+          opacity: handleVisible === true ? 1 : 0,
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'stretch',
@ -394,5 +397,6 @@ export default genComponentStyleHook(
    controlWidth: 90,
    handleWidth: token.controlHeightSM - token.controlLineWidth * 2,
    handleFontSize: token.fontSize / 2,
+    handleVisible: 'auto',
  }),
 );