From 12ad0d7eb120dc93d970b2b595778c105d22ca5f Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Fri, 7 Apr 2023 10:18:16 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20remove=20tag=20border=20in?= =?UTF-8?q?=20select=20and=20tree-select=20(#41480)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ✨ feat: new tag * update demo * update snap * fix * fix * fix * fix * fix * fix * fix style * update snap * revert * fix * fix * fix * fix * fix * Update components/select/style/multiple.tsx Co-authored-by: MadCcc <1075746765@qq.com> --------- Co-authored-by: MadCcc <1075746765@qq.com> --- components/select/style/index.tsx | 4 +-- components/select/style/multiple.tsx | 40 +++++++++++++-------------- components/tree-select/index.tsx | 2 +- components/tree-select/style/index.ts | 4 +-- 4 files changed, 23 insertions(+), 27 deletions(-) diff --git a/components/select/style/index.tsx b/components/select/style/index.tsx index dbbc482f840d..4024164c71c8 100644 --- a/components/select/style/index.tsx +++ b/components/select/style/index.tsx @@ -1,11 +1,11 @@ import type { CSSObject } from '@ant-design/cssinjs'; +import { resetComponent, resetIcon, textEllipsis } from '../../style'; +import { genCompactItemStyle } from '../../style/compact-item'; import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; import genDropdownStyle from './dropdown'; import genMultipleStyle from './multiple'; import genSingleStyle from './single'; -import { resetComponent, resetIcon, textEllipsis } from '../../style'; -import { genCompactItemStyle } from '../../style/compact-item'; export interface ComponentToken { zIndexPopup: number; diff --git a/components/select/style/multiple.tsx b/components/select/style/multiple.tsx index db63024a6e49..dd984b049e23 100644 --- a/components/select/style/multiple.tsx +++ b/components/select/style/multiple.tsx @@ -1,19 +1,19 @@ import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs'; import type { SelectToken } from '.'; -import { mergeToken } from '../../theme/internal'; import { resetIcon } from '../../style'; +import { mergeToken } from '../../theme/internal'; const FIXED_ITEM_MARGIN = 2; -function getSelectItemStyle({ +const getSelectItemStyle = ({ controlHeightSM, controlHeight, lineWidth: borderWidth, -}: SelectToken) { +}: SelectToken): readonly [number, number] => { const selectItemDist = (controlHeight - controlHeightSM) / 2 - borderWidth; const selectItemMargin = Math.ceil(selectItemDist / 2); - return [selectItemDist, selectItemMargin]; -} + return [selectItemDist, selectItemMargin] as const; +}; function genSizeStyle(token: SelectToken, suffix?: string): CSSObject { const { componentCls, iconCls } = token; @@ -95,7 +95,6 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject { marginBottom: FIXED_ITEM_MARGIN, lineHeight: `${selectItemHeight - token.lineWidth * 2}px`, background: token.colorFillSecondary, - border: `${token.lineWidth}px solid ${token.colorSplit}`, borderRadius: token.borderRadiusSM, cursor: 'default', transition: `font-size ${token.motionDurationSlow}, line-height ${token.motionDurationSlow}, height ${token.motionDurationSlow}`, @@ -106,7 +105,6 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject { [`${componentCls}-disabled&`]: { color: token.colorTextDisabled, - borderColor: token.colorBorder, cursor: 'not-allowed', }, @@ -191,7 +189,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject { }; } -export default function genMultipleStyle(token: SelectToken): CSSInterpolation { +const genMultipleStyle = (token: SelectToken): CSSInterpolation => { const { componentCls } = token; const smallToken = mergeToken(token, { @@ -200,12 +198,20 @@ export default function genMultipleStyle(token: SelectToken): CSSInterpolation { borderRadius: token.borderRadiusSM, borderRadiusSM: token.borderRadiusXS, }); + + const largeToken = mergeToken(token, { + fontSize: token.fontSizeLG, + controlHeight: token.controlHeightLG, + controlHeightSM: token.controlHeight, + borderRadius: token.borderRadiusLG, + borderRadiusSM: token.borderRadius, + }); + const [, smSelectItemMargin] = getSelectItemStyle(token); return [ genSizeStyle(token), // ======================== Small ======================== - // Shared genSizeStyle(smallToken, 'sm'), // Padding @@ -223,16 +229,8 @@ export default function genMultipleStyle(token: SelectToken): CSSInterpolation { }, // ======================== Large ======================== - // Shared - genSizeStyle( - mergeToken(token, { - fontSize: token.fontSizeLG, - controlHeight: token.controlHeightLG, - controlHeightSM: token.controlHeight, - borderRadius: token.borderRadiusLG, - borderRadiusSM: token.borderRadius, - }), - 'lg', - ), + genSizeStyle(largeToken, 'lg'), ]; -} +}; + +export default genMultipleStyle; diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx index 66fe1fe91d89..f28e7d2be7ad 100644 --- a/components/tree-select/index.tsx +++ b/components/tree-select/index.tsx @@ -253,7 +253,7 @@ const InternalTreeSelect = < } treeLine={!!treeLine} inputIcon={suffixIcon} - multiple={multiple} + multiple={isMultiple} placement={memoizedPlacement} removeIcon={removeIcon} clearIcon={clearIcon} diff --git a/components/tree-select/style/index.ts b/components/tree-select/style/index.ts index 4a727593680f..61f15b0e8b61 100644 --- a/components/tree-select/style/index.ts +++ b/components/tree-select/style/index.ts @@ -65,9 +65,7 @@ const genBaseStyle: GenerateStyle = (token) => { // ============================== Export ============================== export default function useTreeSelectStyle(prefixCls: string, treePrefixCls: string) { return genComponentStyleHook('TreeSelect', (token) => { - const treeSelectToken = mergeToken(token, { - treePrefixCls, - }); + const treeSelectToken = mergeToken(token, { treePrefixCls }); return [genBaseStyle(treeSelectToken)]; })(prefixCls); }