From 80bf60c717871cbaf7e89c4a8c250fca19e2e6a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 11 Mar 2022 14:29:29 +0800 Subject: [PATCH] chore: Add GenerateStyle ts def (#34429) * chore: Alert with types * chore: rest component * chore: more * chore: fix lint --- components/_util/theme/index.tsx | 13 +- components/alert/style/index.tsx | 64 ++++--- components/cascader/style/index.tsx | 6 +- components/checkbox/style/index.tsx | 22 ++- components/divider/style/index.tsx | 233 +++++++++++++------------ components/rate/style/index.tsx | 7 +- components/result/style/index.tsx | 193 ++++++++++---------- components/select/style/dropdown.tsx | 15 +- components/select/style/index.tsx | 9 +- components/tree-select/style/index.tsx | 8 +- 10 files changed, 297 insertions(+), 273 deletions(-) diff --git a/components/_util/theme/index.tsx b/components/_util/theme/index.tsx index f51a67b632..ae2a99278d 100644 --- a/components/_util/theme/index.tsx +++ b/components/_util/theme/index.tsx @@ -1,7 +1,13 @@ import React from 'react'; import { generate } from '@ant-design/colors'; import { TinyColor } from '@ctrl/tinycolor'; -import { CSSObject, Theme, useCacheToken, useStyleRegister } from '@ant-design/cssinjs'; +import { + CSSInterpolation, + CSSObject, + Theme, + useCacheToken, + useStyleRegister, +} from '@ant-design/cssinjs'; import defaultDesignToken from './default'; import version from '../../version'; import { resetComponent, resetIcon, clearFix } from './util'; @@ -215,6 +221,11 @@ export function useToken(): [Theme, DerivativeToke export type UseComponentStyleResult = [(node: React.ReactNode) => React.ReactElement, string]; +export type GenerateStyle = ( + token: ComponentToken, + hashId?: string, +) => ReturnType; + // ================================== Util ================================== export function withPrefix( style: CSSObject, diff --git a/components/alert/style/index.tsx b/components/alert/style/index.tsx index 30ac7e0039..d6a1950d7f 100644 --- a/components/alert/style/index.tsx +++ b/components/alert/style/index.tsx @@ -11,10 +11,14 @@ import { useToken, resetComponent, UseComponentStyleResult, + GenerateStyle, } from '../../_util/theme'; // FIXME: missing token type AlertToken = DerivativeToken & { + alertCls: string; + iconPrefixCls: string; + alertMessageColor: string; alertCloseColor: string; alertCloseHoverColor: string; @@ -55,8 +59,9 @@ const genAlertTypeStyle = ( }, }); -export const genBaseStyle = (alertCls: string, token: AlertToken): CSSObject => { +export const genBaseStyle: GenerateStyle = (token: AlertToken): CSSObject => { const { + alertCls, duration, marginXS, fontSize, @@ -149,8 +154,9 @@ export const genBaseStyle = (alertCls: string, token: AlertToken): CSSObject => }; }; -export const genTypeStyle = (alertCls: string, token: AlertToken): CSSObject => { +export const genTypeStyle: GenerateStyle = (token: AlertToken): CSSObject => { const { + alertCls, alertInfoBgColor, alertInfoIconColor, alertInfoBorderColor, @@ -208,12 +214,16 @@ export const genTypeStyle = (alertCls: string, token: AlertToken): CSSObject => }; }; -export const genActionStyle = ( - alertCls: string, - iconPrefixCls: string, - token: AlertToken, -): CSSObject => { - const { duration, marginXS, fontSizeSM, alertCloseColor, alertCloseHoverColor } = token; +export const genActionStyle: GenerateStyle = (token: AlertToken): CSSObject => { + const { + alertCls, + iconPrefixCls, + duration, + marginXS, + fontSizeSM, + alertCloseColor, + alertCloseHoverColor, + } = token; return { [alertCls]: { @@ -252,8 +262,8 @@ export const genActionStyle = ( }; }; -export const genRTLStyle = (alertCls: string, token: AlertToken): CSSObject => { - const { alertWithDescriptionIconSize, alertWithDescriptionPaddingVertical } = token; +export const genRTLStyle: GenerateStyle = (token: AlertToken): CSSObject => { + const { alertCls, alertWithDescriptionIconSize, alertWithDescriptionPaddingVertical } = token; return { [alertCls]: { @@ -271,11 +281,19 @@ export const genRTLStyle = (alertCls: string, token: AlertToken): CSSObject => { }; }; -export const genAlertStyle = ( +export const genAlertStyle: GenerateStyle = (token: AlertToken): CSSInterpolation => [ + genBaseStyle(token), + genTypeStyle(token), + genActionStyle(token), + genRTLStyle(token), +]; + +export default function useStyle( prefixCls: string, iconPrefixCls: string, - token: DerivativeToken, -): CSSInterpolation => { +): UseComponentStyleResult { + const [theme, token, hashId] = useToken(); + const alertCls = `.${prefixCls}`; const alertMessageColor = token.headingColor; @@ -308,8 +326,10 @@ export const genAlertStyle = ( const alertErrorIconColor = token.errorColor; const alertErrorBorderColor = errorColors[2]; - const alertToken = { + const alertToken: AlertToken = { ...token, + alertCls, + iconPrefixCls, alertInfoBgColor, alertInfoIconColor, alertInfoBorderColor, @@ -331,23 +351,9 @@ export const genAlertStyle = ( alertWithDescriptionPadding, }; - return [ - genBaseStyle(alertCls, alertToken), - genTypeStyle(alertCls, alertToken), - genActionStyle(alertCls, iconPrefixCls, alertToken), - genRTLStyle(alertCls, alertToken), - ]; -}; - -export default function useStyle( - prefixCls: string, - iconPrefixCls: string, -): UseComponentStyleResult { - const [theme, token, hashId] = useToken(); - return [ useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [ - genAlertStyle(prefixCls, iconPrefixCls, token), + genAlertStyle(alertToken), ]), hashId, ]; diff --git a/components/cascader/style/index.tsx b/components/cascader/style/index.tsx index 0b1706377a..33c1a4d1b6 100644 --- a/components/cascader/style/index.tsx +++ b/components/cascader/style/index.tsx @@ -8,12 +8,12 @@ // // deps-lint-skip: form // deps-lint-skip-all -import { CSSInterpolation } from '@ant-design/cssinjs'; import { DerivativeToken, useStyleRegister, useToken, UseComponentStyleResult, + GenerateStyle, } from '../../_util/theme'; import { getStyle as getCheckboxStyle } from '../../checkbox/style'; @@ -23,7 +23,7 @@ interface CascaderToken extends DerivativeToken { } // =============================== Base =============================== -const genBaseStyle = (token: CascaderToken, hashId: string): CSSInterpolation => { +const genBaseStyle: GenerateStyle = (token, hashId) => { const { prefixCls, cascaderCls } = token; const cascaderMenuItemCls = `${cascaderCls}-menu-item`; const iconCls = ` @@ -51,7 +51,7 @@ const genBaseStyle = (token: CascaderToken, hashId: string): CSSInterpolation => { [`${cascaderCls}-dropdown`]: [ // ==================== Checkbox ==================== - getCheckboxStyle(`${prefixCls}-checkbox`, token, hashId), + getCheckboxStyle(`${prefixCls}-checkbox`, token, hashId!), { [cascaderCls]: { // ================== Checkbox ================== diff --git a/components/checkbox/style/index.tsx b/components/checkbox/style/index.tsx index c68b940d2a..e8056498b2 100644 --- a/components/checkbox/style/index.tsx +++ b/components/checkbox/style/index.tsx @@ -1,13 +1,18 @@ // deps-lint-skip-all -import { CSSInterpolation, Keyframes } from '@ant-design/cssinjs'; +import { Keyframes } from '@ant-design/cssinjs'; import { DerivativeToken, useStyleRegister, useToken, resetComponent, UseComponentStyleResult, + GenerateStyle, } from '../../_util/theme'; +interface CheckboxToken extends DerivativeToken { + checkboxCls: string; +} + // ============================== Motion ============================== const antCheckboxEffect = new Keyframes('antCheckboxEffect', { '0%': { @@ -22,12 +27,8 @@ const antCheckboxEffect = new Keyframes('antCheckboxEffect', { }); // ============================== Styles ============================== -export const genCheckboxStyle = ( - prefixCls: string, - token: DerivativeToken, - hashId: string, -): CSSInterpolation => { - const checkboxCls = `.${prefixCls}`; +export const genCheckboxStyle: GenerateStyle = (token, hashId) => { + const { checkboxCls } = token; const wrapperCls = `${checkboxCls}-wrapper`; return [ @@ -235,7 +236,12 @@ export const genCheckboxStyle = ( // ============================== Export ============================== export function getStyle(prefixCls: string, token: DerivativeToken, hashId: string) { - return [genCheckboxStyle(prefixCls, token, hashId), antCheckboxEffect]; + const checkboxToken: CheckboxToken = { + ...token, + checkboxCls: `.${prefixCls}`, + }; + + return [genCheckboxStyle(checkboxToken, hashId), antCheckboxEffect]; } export default function useStyle(prefixCls: string): UseComponentStyleResult { diff --git a/components/divider/style/index.tsx b/components/divider/style/index.tsx index 40eb51a6c4..1a41365130 100644 --- a/components/divider/style/index.tsx +++ b/components/divider/style/index.tsx @@ -6,9 +6,12 @@ import { useToken, UseComponentStyleResult, resetComponent, + GenerateStyle, } from '../../_util/theme'; interface DividerToken extends DerivativeToken { + dividerCls: string; + dividerBorderColor: string; dividerBorderWidth: number; @@ -19,131 +22,129 @@ interface DividerToken extends DerivativeToken { dividerHorizontalGutterMargin: number; } -// FIXME -interface genStyleProps { - token: DividerToken; - prefixCls: string; -} - // ============================== Shared ============================== -const genSharedDividerStyle = ({ token, prefixCls }: genStyleProps): CSSObject => ({ - [`.${prefixCls}`]: { - ...resetComponent(token), - borderBlockStart: `${token.dividerBorderWidth}px solid ${token.dividerBorderColor}`, +const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { + const { dividerCls } = token; - // vertical - '&-vertical': { - position: 'relative', - top: '-0.06em', - display: 'inline-block', - height: '0.9em', - margin: `0 ${token.dividerVerticalGutterMargin}px`, - verticalAlign: 'middle', - borderTop: 0, - borderInlineStart: `${token.dividerBorderWidth}px solid ${token.dividerBorderColor}`, - }, + return { + [dividerCls]: { + ...resetComponent(token), + borderBlockStart: `${token.dividerBorderWidth}px solid ${token.dividerBorderColor}`, - '&-horizontal': { - display: 'flex', - clear: 'both', - width: '100%', - minWidth: '100%', // Fix https://github.com/ant-design/ant-design/issues/10914 - margin: `${token.dividerHorizontalGutterMargin}px 0`, - }, - - '&-horizontal&-with-text': { - display: 'flex', - margin: `${token.dividerHorizontalWithTextGutterMargin}px 0`, - color: token.headingColor, - fontWeight: 500, - fontSize: token.fontSizeLG, - whiteSpace: 'nowrap', - textAlign: 'center', - borderBlockStart: `0 ${token.dividerBorderColor}`, - - '&::before, &::after': { + // vertical + '&-vertical': { position: 'relative', - top: '50%', - width: '50%', - borderBlockStart: `${token.dividerBorderWidth}px solid transparent`, - // Chrome not accept `inherit` in `border-top` - borderBlockStartColor: 'inherit', - borderBlockEnd: 0, - transform: 'translateY(50%)', - content: "''", - }, - }, - - '&-horizontal&-with-text-right': { - '&::before': { - top: '50%', - width: '95%', + top: '-0.06em', + display: 'inline-block', + height: '0.9em', + margin: `0 ${token.dividerVerticalGutterMargin}px`, + verticalAlign: 'middle', + borderTop: 0, + borderInlineStart: `${token.dividerBorderWidth}px solid ${token.dividerBorderColor}`, }, - '&::after': { - top: '50%', - width: '5%', - }, - }, - - [`.${prefixCls}-inner-text`]: { - display: 'inline-block', - padding: '0 1em', - }, - - '&-dashed': { - background: 'none', - borderColor: token.dividerBorderColor, - borderStyle: 'dashed', - borderWidth: 0, - borderBlockStart: `${token.dividerBorderWidth}px`, - }, - - '&-horizontal&-with-text&-dashed': { - '&::before, &::after': { - borderStyle: 'dashed none none', - }, - }, - - '&-vertical&-dashed': { - borderWidth: `0 0 0 ${token.dividerBorderWidth}px`, - }, - - '&-plain&-with-text': { - color: token.textColor, - fontWeight: 'normal', - fontSize: token.fontSize, - }, - - '&-horizontal&-with-text-left&-no-default-orientation-margin-left': { - '&::before': { - width: 0, - }, - - '&::after': { + '&-horizontal': { + display: 'flex', + clear: 'both', width: '100%', + minWidth: '100%', // Fix https://github.com/ant-design/ant-design/issues/10914 + margin: `${token.dividerHorizontalGutterMargin}px 0`, }, - '.ant-divider-inner-text': { - paddingInlineStart: `${token.dividerNotDefaultTextPadding}px`, + '&-horizontal&-with-text': { + display: 'flex', + margin: `${token.dividerHorizontalWithTextGutterMargin}px 0`, + color: token.headingColor, + fontWeight: 500, + fontSize: token.fontSizeLG, + whiteSpace: 'nowrap', + textAlign: 'center', + borderBlockStart: `0 ${token.dividerBorderColor}`, + + '&::before, &::after': { + position: 'relative', + top: '50%', + width: '50%', + borderBlockStart: `${token.dividerBorderWidth}px solid transparent`, + // Chrome not accept `inherit` in `border-top` + borderBlockStartColor: 'inherit', + borderBlockEnd: 0, + transform: 'translateY(50%)', + content: "''", + }, + }, + + '&-horizontal&-with-text-right': { + '&::before': { + top: '50%', + width: '95%', + }, + + '&::after': { + top: '50%', + width: '5%', + }, + }, + + [`${dividerCls}-inner-text`]: { + display: 'inline-block', + padding: '0 1em', + }, + + '&-dashed': { + background: 'none', + borderColor: token.dividerBorderColor, + borderStyle: 'dashed', + borderWidth: 0, + borderBlockStart: `${token.dividerBorderWidth}px`, + }, + + '&-horizontal&-with-text&-dashed': { + '&::before, &::after': { + borderStyle: 'dashed none none', + }, + }, + + '&-vertical&-dashed': { + borderWidth: `0 0 0 ${token.dividerBorderWidth}px`, + }, + + '&-plain&-with-text': { + color: token.textColor, + fontWeight: 'normal', + fontSize: token.fontSize, + }, + + '&-horizontal&-with-text-left&-no-default-orientation-margin-left': { + '&::before': { + width: 0, + }, + + '&::after': { + width: '100%', + }, + + '.ant-divider-inner-text': { + paddingInlineStart: `${token.dividerNotDefaultTextPadding}px`, + }, + }, + + '&-horizontal&-with-text-right&-no-default-orientation-margin-right': { + '&::before': { + width: '100%', + }, + + '&::after': { + width: 0, + }, + + '.ant-divider-inner-text': { + paddingInlineEnd: `${token.dividerNotDefaultTextPadding}px`, + }, }, }, - - '&-horizontal&-with-text-right&-no-default-orientation-margin-right': { - '&::before': { - width: '100%', - }, - - '&::after': { - width: 0, - }, - - '.ant-divider-inner-text': { - paddingInlineEnd: `${token.dividerNotDefaultTextPadding}px`, - }, - }, - }, -}); + }; +}; // ============================== Export ============================== export default function useStyle(prefixCls: string): UseComponentStyleResult { @@ -161,6 +162,8 @@ export default function useStyle(prefixCls: string): UseComponentStyleResult { const dividerToken: DividerToken = { ...token, + dividerCls: `.${prefixCls}`, + dividerBorderColor, dividerBorderWidth, @@ -173,7 +176,7 @@ export default function useStyle(prefixCls: string): UseComponentStyleResult { return [ useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [ - genSharedDividerStyle({ token: dividerToken, prefixCls }), + genSharedDividerStyle(dividerToken), ]), hashId, ]; diff --git a/components/rate/style/index.tsx b/components/rate/style/index.tsx index 801056a59d..25ebf33504 100644 --- a/components/rate/style/index.tsx +++ b/components/rate/style/index.tsx @@ -1,11 +1,12 @@ // deps-lint-skip-all -import { CSSInterpolation, CSSObject } from '@ant-design/cssinjs'; +import { CSSObject } from '@ant-design/cssinjs'; import { DerivativeToken, resetComponent, UseComponentStyleResult, useStyleRegister, useToken, + GenerateStyle, } from '../../_util/theme'; interface RateToken extends DerivativeToken { @@ -16,7 +17,7 @@ interface RateToken extends DerivativeToken { iconPrefixCls: string; } -const genRateStarStyle = (token: RateToken): CSSObject => { +const genRateStarStyle: GenerateStyle = token => { const { rateCls } = token; return { @@ -84,7 +85,7 @@ const genRateRtlStyle = (token: RateToken): CSSObject => ({ }, }); -const genRateStyle = (token: RateToken): CSSInterpolation => { +const genRateStyle: GenerateStyle = token => { const { rateCls } = token; return { diff --git a/components/result/style/index.tsx b/components/result/style/index.tsx index f7413f38bd..8944005b04 100644 --- a/components/result/style/index.tsx +++ b/components/result/style/index.tsx @@ -1,13 +1,17 @@ // deps-lint-skip-all -import { CSSInterpolation, CSSObject } from '@ant-design/cssinjs'; +import { CSSObject } from '@ant-design/cssinjs'; import { DerivativeToken, useStyleRegister, useToken, UseComponentStyleResult, + GenerateStyle, } from '../../_util/theme'; interface ResultToken extends DerivativeToken { + resultCls: string; + dotIconPrefixCls: string; + resultTitleFontSize: number; resultSubtitleFontSize: number; resultIconFontSize: number; @@ -21,95 +25,101 @@ interface ResultToken extends DerivativeToken { } // ============================== Styles ============================== -const genBaseStyle = ( - resultCls: string, - dotIconPrefixCls: string, - token: ResultToken, -): CSSObject => ({ - // Result - [resultCls]: { - padding: `${token.padding * 3}px ${token.padding * 2}px`, - }, +const genBaseStyle: GenerateStyle = (token): CSSObject => { + const { resultCls, dotIconPrefixCls } = token; - // Exception Status image - [`${resultCls} ${resultCls}-image`]: { - // FIXME: hard code - width: 250, - height: 295, - margin: 'auto', - }, - - [`${resultCls} ${resultCls}-icon`]: { - marginBottom: token.padding * 1.5, - textAlign: 'center', - - [`& > ${dotIconPrefixCls}`]: { - fontSize: token.resultIconFontSize, + return { + // Result + [resultCls]: { + padding: `${token.padding * 3}px ${token.padding * 2}px`, }, - }, - [`${resultCls} ${resultCls}-title`]: { - color: token.headingColor, - fontSize: token.resultTitleFontSize, - // FIXME: hard code - lineHeight: 1.8, - textAlign: 'center', - }, + // Exception Status image + [`${resultCls} ${resultCls}-image`]: { + // FIXME: hard code + width: 250, + height: 295, + margin: 'auto', + }, - [`${resultCls} ${resultCls}-subtitle`]: { - color: token.textColorSecondary, - fontSize: token.resultSubtitleFontSize, - // FIXME: hard code - lineHeight: 1.6, - textAlign: 'center', - }, + [`${resultCls} ${resultCls}-icon`]: { + marginBottom: token.padding * 1.5, + textAlign: 'center', - [`${resultCls} ${resultCls}-content`]: { - marginTop: token.padding * 1.5, - padding: `${token.padding * 1.5}px ${token.padding * 2.5}px`, - backgroundColor: token.backgroundLight, - }, - - [`${resultCls} ${resultCls}-extra`]: { - margin: token.resultExtraMargin, - textAlign: 'center', - - '& > *': { - marginInlineEnd: token.paddingXS, - - '&:last-child': { - marginInlineEnd: 0, + [`& > ${dotIconPrefixCls}`]: { + fontSize: token.resultIconFontSize, }, }, - }, -}); -const genStatusIconStyle = ( - resultCls: string, - iconPrefixCls: string, - token: ResultToken, -): CSSObject => ({ - [`${resultCls}-success ${resultCls}-icon > ${iconPrefixCls}`]: { - color: token.resultSuccessIconColor, - }, - [`${resultCls}-error ${resultCls}-icon > ${iconPrefixCls}`]: { - color: token.resultErrorIconColor, - }, - [`${resultCls}-info ${resultCls}-icon > ${iconPrefixCls}`]: { - color: token.resultInfoIconColor, - }, - [`${resultCls}-warning ${resultCls}-icon > ${iconPrefixCls}`]: { - color: token.resultWarningIconColor, - }, -}); + [`${resultCls} ${resultCls}-title`]: { + color: token.headingColor, + fontSize: token.resultTitleFontSize, + // FIXME: hard code + lineHeight: 1.8, + textAlign: 'center', + }, -export const genResultStyle = ( + [`${resultCls} ${resultCls}-subtitle`]: { + color: token.textColorSecondary, + fontSize: token.resultSubtitleFontSize, + // FIXME: hard code + lineHeight: 1.6, + textAlign: 'center', + }, + + [`${resultCls} ${resultCls}-content`]: { + marginTop: token.padding * 1.5, + padding: `${token.padding * 1.5}px ${token.padding * 2.5}px`, + backgroundColor: token.backgroundLight, + }, + + [`${resultCls} ${resultCls}-extra`]: { + margin: token.resultExtraMargin, + textAlign: 'center', + + '& > *': { + marginInlineEnd: token.paddingXS, + + '&:last-child': { + marginInlineEnd: 0, + }, + }, + }, + }; +}; + +const genStatusIconStyle: GenerateStyle = token => { + const { resultCls, dotIconPrefixCls } = token; + + return { + [`${resultCls}-success ${resultCls}-icon > ${dotIconPrefixCls}`]: { + color: token.resultSuccessIconColor, + }, + [`${resultCls}-error ${resultCls}-icon > ${dotIconPrefixCls}`]: { + color: token.resultErrorIconColor, + }, + [`${resultCls}-info ${resultCls}-icon > ${dotIconPrefixCls}`]: { + color: token.resultInfoIconColor, + }, + [`${resultCls}-warning ${resultCls}-icon > ${dotIconPrefixCls}`]: { + color: token.resultWarningIconColor, + }, + }; +}; + +const genResultStyle: GenerateStyle = token => [ + genBaseStyle(token), + genStatusIconStyle(token), +]; + +// ============================== Export ============================== +const getStyle: GenerateStyle = token => genResultStyle(token); + +export default function useStyle( prefixCls: string, iconPrefixCls: string, - token: DerivativeToken, -): CSSInterpolation => { - const resultCls = `.${prefixCls}`; - const dotIconPrefixCls = `.${iconPrefixCls}`; +): UseComponentStyleResult { + const [theme, token, hashId] = useToken(); // compact 20 // FIXME: maybe we need a new token for fontSize 12px @@ -125,8 +135,10 @@ export const genResultStyle = ( const resultSuccessIconColor = token.successColor; const resultWarningIconColor = token.warningColor; - const resultToken = { + const resultToken: ResultToken = { ...token, + resultCls: `.${prefixCls}`, + dotIconPrefixCls: `.${iconPrefixCls}`, resultTitleFontSize, resultSubtitleFontSize, resultIconFontSize, @@ -138,26 +150,7 @@ export const genResultStyle = ( }; return [ - genBaseStyle(resultCls, dotIconPrefixCls, resultToken), - genStatusIconStyle(resultCls, dotIconPrefixCls, resultToken), - ]; -}; - -// ============================== Export ============================== -export function getStyle(prefixCls: string, iconPrefixCls: string, token: DerivativeToken) { - return [genResultStyle(prefixCls, iconPrefixCls, token)]; -} - -export default function useStyle( - prefixCls: string, - iconPrefixCls: string, -): UseComponentStyleResult { - const [theme, token, hashId] = useToken(); - - return [ - useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => - getStyle(prefixCls, iconPrefixCls, token), - ), + useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => getStyle(resultToken)), hashId, ]; } diff --git a/components/select/style/dropdown.tsx b/components/select/style/dropdown.tsx index bd2a6b4dd6..c4c45e43c3 100644 --- a/components/select/style/dropdown.tsx +++ b/components/select/style/dropdown.tsx @@ -1,4 +1,4 @@ -import { CSSInterpolation, CSSObject } from '@ant-design/cssinjs'; +import { CSSObject } from '@ant-design/cssinjs'; import { resetComponent, initSlideMotion, @@ -6,10 +6,11 @@ import { slideUpOut, slideDownIn, slideDownOut, + GenerateStyle, } from '../../_util/theme'; import type { SelectToken } from '.'; -const genItemStyle = (token: SelectToken): CSSObject => { +const genItemStyle: GenerateStyle = token => { const { controlPaddingHorizontal } = token; return { @@ -26,7 +27,7 @@ const genItemStyle = (token: SelectToken): CSSObject => { }; }; -export default function genSingleStyle(token: SelectToken, hashId: string): CSSInterpolation { +const genSingleStyle: GenerateStyle = (token, hashId) => { const { rootPrefixCls, antCls, selectCls } = token; const selectItemCls = `${selectCls}-item`; @@ -152,11 +153,13 @@ export default function genSingleStyle(token: SelectToken, hashId: string): CSSI }, // Follow code may reuse in other components - initSlideMotion(hashId, rootPrefixCls, 'slide-up', slideUpIn, slideUpOut, token), - initSlideMotion(hashId, rootPrefixCls, 'slide-down', slideDownIn, slideDownOut, token), + initSlideMotion(hashId!, rootPrefixCls, 'slide-up', slideUpIn, slideUpOut, token), + initSlideMotion(hashId!, rootPrefixCls, 'slide-down', slideDownIn, slideDownOut, token), slideUpIn, slideUpOut, slideDownIn, slideDownOut, ]; -} +}; + +export default genSingleStyle; diff --git a/components/select/style/index.tsx b/components/select/style/index.tsx index 5b3e657662..6628b035d2 100644 --- a/components/select/style/index.tsx +++ b/components/select/style/index.tsx @@ -13,6 +13,7 @@ import { resetComponent, resetIcon, UseComponentStyleResult, + GenerateStyle, } from '../../_util/theme'; import genSingleStyle from './single'; import genMultipleStyle from './multiple'; @@ -27,7 +28,7 @@ export type SelectToken = DerivativeToken & { }; // ============================= Selector ============================= -const genSelectorStyle = (token: SelectToken): CSSObject => { +const genSelectorStyle: GenerateStyle = token => { const { selectCls } = token; return { @@ -112,7 +113,7 @@ const genStatusStyle = ( // ============================== Styles ============================== // /* Reset search input style */ -const getSearchInputWithoutBorderStyle = (token: SelectToken): CSSObject => { +const getSearchInputWithoutBorderStyle: GenerateStyle = token => { const { selectCls } = token; return { @@ -133,7 +134,7 @@ const getSearchInputWithoutBorderStyle = (token: SelectToken): CSSObject => { }; // =============================== Base =============================== -const genBaseStyle = (token: SelectToken): CSSObject => { +const genBaseStyle: GenerateStyle = token => { const { selectCls, iconPrefixCls, inputPaddingHorizontalBase } = token; return { @@ -269,7 +270,7 @@ const genBaseStyle = (token: SelectToken): CSSObject => { }; // ============================== Styles ============================== -export const genSelectStyle = ( +const genSelectStyle = ( rootPrefixCls: string, prefixCls: string, iconPrefixCls: string, diff --git a/components/tree-select/style/index.tsx b/components/tree-select/style/index.tsx index 6eb4be7a9e..ca71055e5d 100644 --- a/components/tree-select/style/index.tsx +++ b/components/tree-select/style/index.tsx @@ -7,12 +7,12 @@ // import '../../empty/style'; // deps-lint-skip-all -import { CSSInterpolation } from '@ant-design/cssinjs'; import { DerivativeToken, useStyleRegister, useToken, UseComponentStyleResult, + GenerateStyle, } from '../../_util/theme'; import { getStyle as getCheckboxStyle } from '../../checkbox/style'; import { genTreeStyle } from '../../tree/style'; @@ -23,7 +23,7 @@ interface TreeSelectToken extends DerivativeToken { } // =============================== Base =============================== -const genBaseStyle = (token: TreeSelectToken, hashId: string): CSSInterpolation => { +const genBaseStyle: GenerateStyle = (token, hashId) => { const { selectCls, treePrefixCls } = token; const treeCls = `.${treePrefixCls}`; @@ -38,7 +38,7 @@ const genBaseStyle = (token: TreeSelectToken, hashId: string): CSSInterpolation }, // ====================== Tree ====================== - genTreeStyle(treePrefixCls, token, hashId), + genTreeStyle(treePrefixCls, token, hashId!), { [treeCls]: { borderRadius: 0, @@ -55,7 +55,7 @@ const genBaseStyle = (token: TreeSelectToken, hashId: string): CSSInterpolation }, // ==================== Checkbox ==================== - getCheckboxStyle(`${treePrefixCls}-checkbox`, token, hashId), + getCheckboxStyle(`${treePrefixCls}-checkbox`, token, hashId!), // ====================== RTL ======================= {