test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 02:59:04 +08:00
Code Issues Actions 68 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 = () => (
<ConfigProvider
theme={{
components: {
Select: {
multipleItemBorderColor: 'rgba(0,0,0,0.06)',
multipleItemBorderColorDisabled: 'rgba(0,0,0,0.06)',
optionSelectedColor: '#1677ff',
<Space direction="vertical">
<ConfigProvider
theme={{
components: {
Select: {
multipleItemBorderColor: 'rgba(0,0,0,0.06)',
multipleItemBorderColorDisabled: 'rgba(0,0,0,0.06)',
optionSelectedColor: '#1677ff',
},
},
},
}}
>
<Space style={{ width: '100%' }} direction="vertical">
<Select
mode="multiple"
allowClear
style={{ width: '100%' }}
placeholder="Please select"
defaultValue={['a10', 'c12']}
onChange={handleChange}
options={options}
/>
<Select
mode="multiple"
disabled
style={{ width: '100%' }}
placeholder="Please select"
defaultValue={['a10', 'c12']}
onChange={handleChange}
options={options}
/>
</Space>
</ConfigProvider>
}}
>
<Space style={{ width: '100%' }} direction="vertical">
<Select
mode="multiple"
allowClear
style={{ width: '100%' }}
placeholder="Please select"
defaultValue={['a10', 'c12']}
onChange={handleChange}
options={options}
/>
<Select
mode="multiple"
disabled
style={{ width: '100%' }}
placeholder="Please select"
defaultValue={['a10', 'c12']}
onChange={handleChange}
options={options}
/>
</Space>
</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;

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

@ -110,6 +110,7 @@ export interface SelectToken extends FullToken<'Select'> {
rootPrefixCls: string;
inputPaddingHorizontalBase: number;
multipleSelectItemHeight: number;
selectHeight: number;
}
// ============================= Selector =============================
@ -434,6 +435,7 @@ export default genComponentStyleHook(
rootPrefixCls,
inputPaddingHorizontalBase: token.paddingSM - 1,
multipleSelectItemHeight: token.multipleItemHeight,
selectHeight: token.controlHeight,
});
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 getSelectItemStyle = ({
controlHeightSM,
controlHeight,
multipleSelectItemHeight,
selectHeight,
lineWidth: borderWidth,
}: SelectToken): readonly [number, number] => {
const selectItemDist = (controlHeight - controlHeightSM) / 2 - borderWidth;
const selectItemDist = (selectHeight - multipleSelectItemHeight) / 2 - borderWidth;
const selectItemMargin = Math.ceil(selectItemDist / 2);
return [selectItemDist, selectItemMargin] as const;
};
@ -202,7 +202,7 @@ const genMultipleStyle = (token: SelectToken): CSSInterpolation => {
const { componentCls } = token;
const smallToken = mergeToken<SelectToken>(token, {
controlHeight: token.controlHeightSM,
selectHeight: token.controlHeightSM,
multipleSelectItemHeight: token.controlHeightXS,
borderRadius: token.borderRadiusSM,
borderRadiusSM: token.borderRadiusXS,
@ -210,7 +210,7 @@ const genMultipleStyle = (token: SelectToken): CSSInterpolation => {
const largeToken = mergeToken<SelectToken>(token, {
fontSize: token.fontSizeLG,
controlHeight: token.controlHeightLG,
selectHeight: token.controlHeightLG,
multipleSelectItemHeight: token.multipleItemHeightLG,
borderRadius: token.borderRadiusLG,
borderRadiusSM: token.borderRadius,