test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 12:09:14 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

fix: select small height (#44859)

Browse Source
This commit is contained in:
MadCcc 2023-09-14 19:12:17 +08:00 committed by GitHub
parent afcdc3fbe2
commit 102c4654e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 69 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
components/select/demo/component-token.tsx
View File

@ -16,38 +16,69 @@ const handleChange = (value: string[]) => {
}; };
const App: React.FC = () => ( const App: React.FC = () => (
<ConfigProvider <Space direction="vertical">
theme={{ <ConfigProvider
components: { theme={{
Select: { components: {
multipleItemBorderColor: 'rgba(0,0,0,0.06)', Select: {
multipleItemBorderColorDisabled: 'rgba(0,0,0,0.06)', multipleItemBorderColor: 'rgba(0,0,0,0.06)',
optionSelectedColor: '#1677ff', multipleItemBorderColorDisabled: 'rgba(0,0,0,0.06)',
optionSelectedColor: '#1677ff',
},
}, },
}, }}
}} >
> <Space style={{ width: '100%' }} direction="vertical">
<Space style={{ width: '100%' }} direction="vertical"> <Select
<Select mode="multiple"
mode="multiple" allowClear
allowClear style={{ width: '100%' }}
style={{ width: '100%' }} placeholder="Please select"
placeholder="Please select" defaultValue={['a10', 'c12']}
defaultValue={['a10', 'c12']} onChange={handleChange}
onChange={handleChange} options={options}
options={options} />
/> <Select
<Select mode="multiple"
mode="multiple" disabled
disabled style={{ width: '100%' }}
style={{ width: '100%' }} placeholder="Please select"
placeholder="Please select" defaultValue={['a10', 'c12']}
defaultValue={['a10', 'c12']} onChange={handleChange}
onChange={handleChange} options={options}
options={options} />
/> </Space>
</Space> </ConfigProvider>
</ConfigProvider> <ConfigProvider
theme={{
token: {
controlHeightSM: 28,
},
}}
>
<Space style={{ width: '100%' }} direction="vertical">
<Select
mode="multiple"
allowClear
size="small"
style={{ width: '100%' }}
placeholder="Please select"
defaultValue={['a10', 'c12']}
onChange={handleChange}
options={options}
/>
<Select
mode="multiple"
allowClear
style={{ width: '100%' }}
placeholder="Please select"
defaultValue={['a10', 'c12']}
onChange={handleChange}
options={options}
/>
</Space>
</ConfigProvider>
</Space>
); );
export default App; export default App;

2
components/select/style/index.tsx
View File

@ -110,6 +110,7 @@ export interface SelectToken extends FullToken<'Select'> {
rootPrefixCls: string; rootPrefixCls: string;
inputPaddingHorizontalBase: number; inputPaddingHorizontalBase: number;
multipleSelectItemHeight: number; multipleSelectItemHeight: number;
selectHeight: number;
} }
// ============================= Selector ============================= // ============================= Selector =============================
@ -434,6 +435,7 @@ export default genComponentStyleHook(
rootPrefixCls, rootPrefixCls,
inputPaddingHorizontalBase: token.paddingSM - 1, inputPaddingHorizontalBase: token.paddingSM - 1,
multipleSelectItemHeight: token.multipleItemHeight, multipleSelectItemHeight: token.multipleItemHeight,
selectHeight: token.controlHeight,
}); });
return [genSelectStyle(selectToken)]; return [genSelectStyle(selectToken)];

10
components/select/style/multiple.tsx
View File

@ -6,11 +6,11 @@ import { mergeToken } from '../../theme/internal';
const FIXED_ITEM_MARGIN = 2; const FIXED_ITEM_MARGIN = 2;
const getSelectItemStyle = ({ const getSelectItemStyle = ({
controlHeightSM, multipleSelectItemHeight,
controlHeight, selectHeight,
lineWidth: borderWidth, lineWidth: borderWidth,
}: SelectToken): readonly [number, number] => { }: SelectToken): readonly [number, number] => {
const selectItemDist = (controlHeight - controlHeightSM) / 2 - borderWidth; const selectItemDist = (selectHeight - multipleSelectItemHeight) / 2 - borderWidth;
const selectItemMargin = Math.ceil(selectItemDist / 2); const selectItemMargin = Math.ceil(selectItemDist / 2);
return [selectItemDist, selectItemMargin] as const; return [selectItemDist, selectItemMargin] as const;
}; };
@ -202,7 +202,7 @@ const genMultipleStyle = (token: SelectToken): CSSInterpolation => {
const { componentCls } = token; const { componentCls } = token;
const smallToken = mergeToken<SelectToken>(token, { const smallToken = mergeToken<SelectToken>(token, {
controlHeight: token.controlHeightSM, selectHeight: token.controlHeightSM,
multipleSelectItemHeight: token.controlHeightXS, multipleSelectItemHeight: token.controlHeightXS,
borderRadius: token.borderRadiusSM, borderRadius: token.borderRadiusSM,
borderRadiusSM: token.borderRadiusXS, borderRadiusSM: token.borderRadiusXS,
@ -210,7 +210,7 @@ const genMultipleStyle = (token: SelectToken): CSSInterpolation => {
const largeToken = mergeToken<SelectToken>(token, { const largeToken = mergeToken<SelectToken>(token, {
fontSize: token.fontSizeLG, fontSize: token.fontSizeLG,
controlHeight: token.controlHeightLG, selectHeight: token.controlHeightLG,
multipleSelectItemHeight: token.multipleItemHeightLG, multipleSelectItemHeight: token.multipleItemHeightLG,
borderRadius: token.borderRadiusLG, borderRadius: token.borderRadiusLG,
borderRadiusSM: token.borderRadius, borderRadiusSM: token.borderRadius,