mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 16:06:28 +08:00
feat: InputNumber support pure panel (#37526)
* feat: InputNumber support purePanel * test: Update snapshot * chore: simplify code
This commit is contained in:
二货爱吃白萝卜
GitHub
parent
d3d3402ae0
commit
9818c71eb7
@ -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"
|
||||
|
||||
@ -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"
|
||||
|
||||
29
components/input-number/demo/render-panel.md
Normal file
29
components/input-number/demo/render-panel.md
Normal file
@ -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>
|
||||
);
|
||||
```
|
||||
@ -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;
|
||||
|
||||
@ -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',
|
||||
}),
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user