diff --git a/components/_util/theme/interface.ts b/components/_util/theme/interface.ts index 362c6a3ba5..dd16af815c 100644 --- a/components/_util/theme/interface.ts +++ b/components/_util/theme/interface.ts @@ -43,8 +43,10 @@ export interface OverrideToken { Cascader?: CascaderComponentToken; Divider?: DividerComponentToken; Empty?: EmptyComponentToken; + Input?: {}; InputNumber?: InputNumberComponentToken; Mentions?: MentionsComponentToken; + Pagination?: {}; Select?: SelectComponentToken; Slider?: SliderComponentToken; Typography?: TypographyComponentToken; diff --git a/components/input-number/index.tsx b/components/input-number/index.tsx index 85309a6df7..72131b7ac4 100644 --- a/components/input-number/index.tsx +++ b/components/input-number/index.tsx @@ -1,15 +1,18 @@ import DownOutlined from '@ant-design/icons/DownOutlined'; import UpOutlined from '@ant-design/icons/UpOutlined'; import classNames from 'classnames'; -import RcInputNumber, { InputNumberProps as RcInputNumberProps } from 'rc-input-number'; +import type { InputNumberProps as RcInputNumberProps } from 'rc-input-number'; +import RcInputNumber from 'rc-input-number'; import * as React from 'react'; import { useContext } from 'react'; import { ConfigContext } from '../config-provider'; -import SizeContext, { SizeType } from '../config-provider/SizeContext'; +import type { SizeType } from '../config-provider/SizeContext'; +import SizeContext from '../config-provider/SizeContext'; import { FormItemInputContext, NoFormStatus } from '../form/context'; import { cloneElement } from '../_util/reactNode'; import useStyle from './style'; -import { getStatusClassNames, InputStatus, getMergedStatus } from '../_util/statusUtils'; +import type { InputStatus } from '../_util/statusUtils'; +import { getStatusClassNames, getMergedStatus } from '../_util/statusUtils'; type ValueType = string | number; @@ -26,7 +29,7 @@ export interface InputNumberProps } const InputNumber = React.forwardRef((props, ref) => { - const { getPrefixCls, direction, iconPrefixCls } = React.useContext(ConfigContext); + const { getPrefixCls, direction } = React.useContext(ConfigContext); const size = React.useContext(SizeContext); const [focused, setFocus] = React.useState(false); const inputRef = React.useRef(null); @@ -50,7 +53,7 @@ const InputNumber = React.forwardRef((props, const prefixCls = getPrefixCls('input-number', customizePrefixCls); // Style - const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls); + const [wrapSSR, hashId] = useStyle(prefixCls); let upIcon = ; let downIcon = ; diff --git a/components/input-number/style/index.tsx b/components/input-number/style/index.tsx index b6a785edd0..455fc8cec2 100644 --- a/components/input-number/style/index.tsx +++ b/components/input-number/style/index.tsx @@ -1,12 +1,7 @@ // deps-lint-skip-all -import { - GenerateStyle, - resetComponent, - resetIcon, - UseComponentStyleResult, - useStyleRegister, - useToken, -} from '../../_util/theme'; +import type { FullToken, GenerateStyle } from '../../_util/theme'; +import { genComponentStyleHook, resetComponent, resetIcon } from '../../_util/theme'; +import type { InputToken } from '../../input/style'; import { genActiveStyle, genBasicInputStyle, @@ -16,7 +11,6 @@ import { genPlaceholderStyle, genStatusStyle, initInputToken, - InputToken, } from '../../input/style'; export interface ComponentToken { @@ -25,13 +19,11 @@ export interface ComponentToken { handleFontSize: number; } -interface InputNumberToken extends InputToken, ComponentToken { - inputNumberCls: string; -} +type InputNumberToken = InputToken>; const genInputNumberStyles: GenerateStyle = (token: InputNumberToken) => { const { - inputNumberCls, + componentCls, controlLineWidth, controlLineType, colorBorder, @@ -55,7 +47,7 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe return [ { - [inputNumberCls]: { + [componentCls]: { ...resetComponent(token), ...genBasicInputStyle(token), ...genStatusStyle(token), @@ -70,7 +62,7 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe '&-rtl': { direction: 'rtl', - [`${inputNumberCls}-input`]: { + [`${componentCls}-input`]: { direction: 'rtl', }, }, @@ -79,7 +71,7 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe padding: 0, fontSize: fontSizeLG, - [`input${inputNumberCls}-input`]: { + [`input${componentCls}-input`]: { height: controlHeightLG - 2 * controlLineWidth, }, }, @@ -87,7 +79,7 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe '&-sm': { padding: 0, - [`input${inputNumberCls}-input`]: { + [`input${componentCls}-input`]: { height: controlHeightSM - 2 * controlLineWidth, padding: `0 ${inputPaddingHorizontalSM}px`, }, @@ -103,7 +95,7 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe '&-disabled': { ...genDisabledStyle(token), - [`${inputNumberCls}-input`]: { + [`${componentCls}-input`]: { cursor: 'not-allowed', }, }, @@ -125,13 +117,13 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe textAlign: 'start', verticalAlign: 'top', // https://github.com/ant-design/ant-design/issues/6403 - [`${inputNumberCls}-affix-wrapper`]: { + [`${componentCls}-affix-wrapper`]: { width: '100%', }, }, }, - [inputNumberCls]: { + [componentCls]: { '&-input': { width: '100%', height: controlHeight - 2 * controlLineWidth, @@ -159,12 +151,12 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe // Handler { - [inputNumberCls]: { - [`&:hover ${inputNumberCls}-handler-wrap, &-focused ${inputNumberCls}-handler-wrap`]: { + [componentCls]: { + [`&:hover ${componentCls}-handler-wrap, &-focused ${componentCls}-handler-wrap`]: { opacity: 1, }, - [`${inputNumberCls}-handler-wrap`]: { + [`${componentCls}-handler-wrap`]: { position: 'absolute', insetBlockStart: 0, insetInlineEnd: 0, @@ -184,7 +176,7 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe // Fix input number inside Menu makes icon too large // We arise the selector priority by nest selector here // https://github.com/ant-design/ant-design/issues/14367 - [`${inputNumberCls}-handler`]: { + [`${componentCls}-handler`]: { display: 'flex', alignItems: 'center', justifyContent: 'center', @@ -192,8 +184,8 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe height: '40%', [` - ${inputNumberCls}-handler-up-inner, - ${inputNumberCls}-handler-down-inner + ${componentCls}-handler-up-inner, + ${componentCls}-handler-down-inner `]: { marginInlineEnd: 0, fontSize: token.handleFontSize, @@ -201,7 +193,7 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe }, }, - [`${inputNumberCls}-handler`]: { + [`${componentCls}-handler`]: { height: '50%', overflow: 'hidden', color: colorTextSecondary, @@ -220,8 +212,8 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe height: `60%`, [` - ${inputNumberCls}-handler-up-inner, - ${inputNumberCls}-handler-down-inner + ${componentCls}-handler-up-inner, + ${componentCls}-handler-down-inner `]: { color: colorPrimary, }, @@ -236,32 +228,32 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe }, }, - [`${inputNumberCls}-handler-up`]: { + [`${componentCls}-handler-up`]: { borderStartEndRadius: controlRadius, }, - [`${inputNumberCls}-handler-down`]: { + [`${componentCls}-handler-down`]: { borderBlockStart: `${controlLineWidth}px ${controlLineType} ${colorBorder}`, borderEndEndRadius: controlRadius, }, // Disabled '&-disabled, &-readonly': { - [`${inputNumberCls}-handler-wrap`]: { + [`${componentCls}-handler-wrap`]: { display: 'none', }, }, [` - ${inputNumberCls}-handler-up-disabled, - ${inputNumberCls}-handler-down-disabled + ${componentCls}-handler-up-disabled, + ${componentCls}-handler-down-disabled `]: { cursor: 'not-allowed', }, [` - ${inputNumberCls}-handler-up-disabled:hover &-handler-up-inner, - ${inputNumberCls}-handler-down-disabled:hover &-handler-down-inner + ${componentCls}-handler-up-disabled:hover &-handler-up-inner, + ${componentCls}-handler-down-disabled:hover &-handler-down-inner `]: { color: colorTextDisabled, }, @@ -270,11 +262,11 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe // Border-less { - [`${inputNumberCls}-borderless`]: { + [`${componentCls}-borderless`]: { borderColor: 'transparent', boxShadow: 'none', - [`${inputNumberCls}-handler-down`]: { + [`${componentCls}-handler-down`]: { borderBlockStartWidth: 0, }, }, @@ -283,10 +275,10 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe }; const genAffixWrapperStyles: GenerateStyle = (token: InputNumberToken) => { - const { inputNumberCls, inputPaddingHorizontal, inputAffixPadding, controlWidth } = token; + const { componentCls, inputPaddingHorizontal, inputAffixPadding, controlWidth } = token; return { - [`${inputNumberCls}-affix-wrapper`]: { + [`${componentCls}-affix-wrapper`]: { ...genBasicInputStyle(token), ...genStatusStyle(token), // or number handler will cover form status @@ -306,22 +298,22 @@ const genAffixWrapperStyles: GenerateStyle = (token: InputNumb }, '&-disabled': { - [`${inputNumberCls}[disabled]`]: { + [`${componentCls}[disabled]`]: { background: 'transparent', }, }, - [`> div${inputNumberCls}`]: { + [`> div${componentCls}`]: { width: '100%', border: 'none', outline: 'none', - [`&${inputNumberCls}-focused`]: { + [`&${componentCls}-focused`]: { boxShadow: 'none !important', }, }, - [`input${inputNumberCls}-input`]: { + [`input${componentCls}-input`]: { padding: 0, }, @@ -331,11 +323,11 @@ const genAffixWrapperStyles: GenerateStyle = (token: InputNumb content: '"\\a0"', }, - [`${inputNumberCls}-handler-wrap`]: { + [`${componentCls}-handler-wrap`]: { zIndex: 2, }, - [inputNumberCls]: { + [componentCls]: { '&-prefix, &-suffix': { display: 'flex', flex: 'none', @@ -362,29 +354,15 @@ const genAffixWrapperStyles: GenerateStyle = (token: InputNumb }; // ============================== Export ============================== -export default function useStyle( - prefixCls: string, - iconPrefixCls: string, -): UseComponentStyleResult { - const [theme, token, hashId] = useToken(); - - return [ - useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => { - const { InputNumber, controlLineWidth, controlHeightSM, fontSize } = token; - - const inputNumberToken: InputNumberToken = { - ...initInputToken(token, prefixCls, iconPrefixCls), - inputNumberCls: `.${prefixCls}`, - - controlWidth: 90, - handleWidth: controlHeightSM - controlLineWidth * 2, - handleFontSize: fontSize / 2, - - ...InputNumber, - }; - - return [genInputNumberStyles(inputNumberToken), genAffixWrapperStyles(inputNumberToken)]; - }), - hashId, - ]; -} +export default genComponentStyleHook( + 'InputNumber', + token => { + const inputNumberToken = initInputToken>(token); + return [genInputNumberStyles(inputNumberToken), genAffixWrapperStyles(inputNumberToken)]; + }, + token => ({ + controlWidth: 90, + handleWidth: token.controlHeightSM - token.controlLineWidth * 2, + handleFontSize: token.fontSize / 2, + }), +); diff --git a/components/input/Group.tsx b/components/input/Group.tsx index 63b7a19f3c..d024fa442c 100644 --- a/components/input/Group.tsx +++ b/components/input/Group.tsx @@ -19,11 +19,11 @@ export interface GroupProps { } const Group: React.FC = props => { - const { getPrefixCls, direction, iconPrefixCls } = useContext(ConfigContext); + const { getPrefixCls, direction } = useContext(ConfigContext); const { prefixCls: customizePrefixCls, className = '' } = props; const prefixCls = getPrefixCls('input-group', customizePrefixCls); const inputPrefixCls = getPrefixCls('input'); - const [wrapSSR, hashId] = useStyle(inputPrefixCls, iconPrefixCls); + const [wrapSSR, hashId] = useStyle(inputPrefixCls); const cls = classNames( prefixCls, { diff --git a/components/input/Input.tsx b/components/input/Input.tsx index b04faf9f38..5b21c51399 100644 --- a/components/input/Input.tsx +++ b/components/input/Input.tsx @@ -1,10 +1,13 @@ import React, { forwardRef, useContext, useEffect, useRef } from 'react'; -import RcInput, { InputProps as RcInputProps, InputRef } from 'rc-input'; +import type { InputProps as RcInputProps, InputRef } from 'rc-input'; +import RcInput from 'rc-input'; import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled'; import classNames from 'classnames'; import { composeRef } from 'rc-util/lib/ref'; -import SizeContext, { SizeType } from '../config-provider/SizeContext'; -import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils'; +import type { SizeType } from '../config-provider/SizeContext'; +import SizeContext from '../config-provider/SizeContext'; +import type { InputStatus } from '../_util/statusUtils'; +import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils'; import { ConfigContext } from '../config-provider'; import { FormItemInputContext, NoFormStatus } from '../form/context'; import { hasPrefixSuffix } from './utils'; @@ -133,13 +136,13 @@ const Input = forwardRef((props, ref) => { addonBefore, ...rest } = props; - const { getPrefixCls, direction, input, iconPrefixCls } = React.useContext(ConfigContext); + const { getPrefixCls, direction, input } = React.useContext(ConfigContext); const prefixCls = getPrefixCls('input', customizePrefixCls); const inputRef = useRef(null); // Style - const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls); + const [wrapSSR, hashId] = useStyle(prefixCls); // ===================== Size ===================== const size = React.useContext(SizeContext); diff --git a/components/input/TextArea.tsx b/components/input/TextArea.tsx index 2155cdb767..07b23644bb 100644 --- a/components/input/TextArea.tsx +++ b/components/input/TextArea.tsx @@ -1,15 +1,19 @@ import classNames from 'classnames'; -import RcTextArea, { TextAreaProps as RcTextAreaProps } from 'rc-textarea'; -import ResizableTextArea from 'rc-textarea/lib/ResizableTextArea'; +import type { TextAreaProps as RcTextAreaProps } from 'rc-textarea'; +import RcTextArea from 'rc-textarea'; +import type ResizableTextArea from 'rc-textarea/lib/ResizableTextArea'; import useMergedState from 'rc-util/lib/hooks/useMergedState'; import omit from 'rc-util/lib/omit'; import * as React from 'react'; import { ConfigContext } from '../config-provider'; -import SizeContext, { SizeType } from '../config-provider/SizeContext'; +import type { SizeType } from '../config-provider/SizeContext'; +import SizeContext from '../config-provider/SizeContext'; import { FormItemInputContext } from '../form/context'; -import { getStatusClassNames, InputStatus, getMergedStatus } from '../_util/statusUtils'; +import type { InputStatus } from '../_util/statusUtils'; +import { getStatusClassNames, getMergedStatus } from '../_util/statusUtils'; import ClearableLabeledInput from './ClearableLabeledInput'; -import { fixControlledValue, InputFocusOptions, resolveOnChange, triggerFocus } from './Input'; +import type { InputFocusOptions } from './Input'; +import { fixControlledValue, resolveOnChange, triggerFocus } from './Input'; import useStyle from './style'; interface ShowCountProps { @@ -72,7 +76,7 @@ const TextArea = React.forwardRef( }, ref, ) => { - const { getPrefixCls, direction, iconPrefixCls } = React.useContext(ConfigContext); + const { getPrefixCls, direction } = React.useContext(ConfigContext); const size = React.useContext(SizeContext); const { @@ -163,7 +167,7 @@ const TextArea = React.forwardRef( const prefixCls = getPrefixCls('input', customizePrefixCls); // Style - const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls); + const [wrapSSR, hashId] = useStyle(prefixCls); React.useImperativeHandle(ref, () => ({ resizableTextArea: innerRef.current?.resizableTextArea, diff --git a/components/input/style/index.tsx b/components/input/style/index.tsx index e26cb2db5c..ccb19c2b87 100644 --- a/components/input/style/index.tsx +++ b/components/input/style/index.tsx @@ -1,18 +1,10 @@ // deps-lint-skip-all import { CSSObject } from '@ant-design/cssinjs'; -import { - clearFix, - DerivativeToken, - GenerateStyle, - resetComponent, - UseComponentStyleResult, - useStyleRegister, - useToken, -} from '../../_util/theme'; +import { clearFix, genComponentStyleHook, GenerateStyle, resetComponent } from '../../_util/theme'; +import type { FullToken } from '../../_util/theme'; +import type { GlobalToken } from '../../_util/theme/interface'; -export interface InputToken extends DerivativeToken { - prefixCls: string; - iconPrefixCls: string; +export type InputToken> = T & { inputAffixPadding: number; inputPaddingVertical: number; inputPaddingVerticalLG: number; @@ -21,7 +13,7 @@ export interface InputToken extends DerivativeToken { inputPaddingHorizontalSM: number; inputBorderHoverColor: string; inputBorderActiveColor: string; -} +}; export const genPlaceholderStyle = (color: string): CSSObject => ({ // Firefox @@ -564,12 +556,12 @@ const genAllowClearStyle = (token: InputToken): CSSObject => { const genAffixStyle: GenerateStyle = (token: InputToken) => { const { prefixCls, - iconPrefixCls, inputAffixPadding, colorTextSecondary, motionDurationSlow, colorAction, colorActionHover, + iconCls, } = token; return { @@ -642,7 +634,7 @@ const genAffixStyle: GenerateStyle = (token: InputToken) => { ...genAllowClearStyle(token), // password - [`.${iconPrefixCls}.${prefixCls}-password-icon`]: { + [`${iconCls}.${prefixCls}-password-icon`]: { color: colorAction, cursor: 'pointer', transition: `all ${motionDurationSlow}`, @@ -776,33 +768,29 @@ const genSearchInputStyle: GenerateStyle = (token: InputToken) => { }; }; -export const initInputToken = ( - token: DerivativeToken, - prefixCls: string, - iconPrefixCls: string, -): InputToken => ({ - ...token, - prefixCls, - iconPrefixCls, - inputAffixPadding: token.paddingXXS, - inputPaddingVertical: Math.max( - Math.round(((token.controlHeight - token.fontSize * token.lineHeight) / 2) * 10) / 10 - +export function initInputToken(token: T): InputToken { + return { + ...token, + inputAffixPadding: token.paddingXXS, + inputPaddingVertical: Math.max( + Math.round(((token.controlHeight - token.fontSize * token.lineHeight) / 2) * 10) / 10 - + token.controlLineWidth, + 3, + ), + inputPaddingVerticalLG: + Math.ceil(((token.controlHeightLG - token.fontSizeLG * token.lineHeight) / 2) * 10) / 10 - token.controlLineWidth, - 3, - ), - inputPaddingVerticalLG: - Math.ceil(((token.controlHeightLG - token.fontSizeLG * token.lineHeight) / 2) * 10) / 10 - - token.controlLineWidth, - inputPaddingVerticalSM: Math.max( - Math.round(((token.controlHeightSM - token.fontSize * token.lineHeight) / 2) * 10) / 10 - - token.controlLineWidth, - 0, - ), - inputPaddingHorizontal: token.controlPaddingHorizontal - token.controlLineWidth, - inputPaddingHorizontalSM: token.controlPaddingHorizontalSM - token.controlLineWidth, - inputBorderHoverColor: token.colorPrimaryHover, - inputBorderActiveColor: token.colorPrimaryHover, -}); + inputPaddingVerticalSM: Math.max( + Math.round(((token.controlHeightSM - token.fontSize * token.lineHeight) / 2) * 10) / 10 - + token.controlLineWidth, + 0, + ), + inputPaddingHorizontal: token.controlPaddingHorizontal - token.controlLineWidth, + inputPaddingHorizontalSM: token.controlPaddingHorizontalSM - token.controlLineWidth, + inputBorderHoverColor: token.colorPrimaryHover, + inputBorderActiveColor: token.colorPrimaryHover, + }; +} const genTextAreaStyle: GenerateStyle = token => { const { prefixCls, inputPaddingHorizontal, paddingLG } = token; @@ -857,24 +845,14 @@ const genTextAreaStyle: GenerateStyle = token => { }; // ============================== Export ============================== -export default function useStyle( - prefixCls: string, - iconPrefixCls: string, -): UseComponentStyleResult { - const [theme, token, hashId] = useToken(); +export default genComponentStyleHook('Input', token => { + const inputToken = initInputToken>(token); return [ - useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => { - const inputToken: InputToken = initInputToken(token, prefixCls, iconPrefixCls); - - return [ - genInputStyle(inputToken), - genTextAreaStyle(inputToken), - genAffixStyle(inputToken), - genGroupStyle(inputToken), - genSearchInputStyle(inputToken), - ]; - }), - hashId, + genInputStyle(inputToken), + genTextAreaStyle(inputToken), + genAffixStyle(inputToken), + genGroupStyle(inputToken), + genSearchInputStyle(inputToken), ]; -} +}); diff --git a/components/mentions/index.tsx b/components/mentions/index.tsx index ea522b95c4..1531077a38 100644 --- a/components/mentions/index.tsx +++ b/components/mentions/index.tsx @@ -1,14 +1,15 @@ import * as React from 'react'; import classNames from 'classnames'; import RcMentions from 'rc-mentions'; -import { MentionsProps as RcMentionsProps } from 'rc-mentions/lib/Mentions'; +import type { MentionsProps as RcMentionsProps } from 'rc-mentions/lib/Mentions'; import { composeRef } from 'rc-util/lib/ref'; // eslint-disable-next-line import/no-named-as-default import Spin from '../spin'; import { ConfigContext } from '../config-provider'; import { FormItemInputContext } from '../form/context'; import useStyle from './style'; -import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils'; +import type { InputStatus } from '../_util/statusUtils'; +import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils'; export const { Option } = RcMentions; @@ -67,7 +68,7 @@ const InternalMentions: React.ForwardRefRenderFunction = const [focused, setFocused] = React.useState(false); const innerRef = React.useRef(); const mergedRef = composeRef(ref, innerRef); - const { getPrefixCls, renderEmpty, direction, iconPrefixCls } = React.useContext(ConfigContext); + const { getPrefixCls, renderEmpty, direction } = React.useContext(ConfigContext); const { status: contextStatus, hasFeedback, @@ -120,7 +121,7 @@ const InternalMentions: React.ForwardRefRenderFunction = const prefixCls = getPrefixCls('mentions', customizePrefixCls); // Style - const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls); + const [wrapSSR, hashId] = useStyle(prefixCls); const mergedClassName = classNames( { diff --git a/components/mentions/style/index.tsx b/components/mentions/style/index.tsx index 697a0fe01b..80c8765401 100644 --- a/components/mentions/style/index.tsx +++ b/components/mentions/style/index.tsx @@ -1,11 +1,5 @@ // deps-lint-skip-all -import { - GenerateStyle, - resetComponent, - UseComponentStyleResult, - useStyleRegister, - useToken, -} from '../../_util/theme'; +import { FullToken, genComponentStyleHook, GenerateStyle, resetComponent } from '../../_util/theme'; import { genActiveStyle, genBasicInputStyle, @@ -22,13 +16,11 @@ export interface ComponentToken { controlItemWidth: number; } -interface MentionsToken extends InputToken, ComponentToken { - mentionsCls: string; -} +type MentionsToken = InputToken>; const genMentionsStyle: GenerateStyle = token => { const { - mentionsCls, + componentCls, colorTextDisabled, controlItemBgHover, controlPaddingHorizontal, @@ -49,7 +41,7 @@ const genMentionsStyle: GenerateStyle = token => { ); return { - [`${mentionsCls}`]: { + [`${componentCls}`]: { ...resetComponent(token), ...genBasicInputStyle(token), @@ -74,7 +66,7 @@ const genMentionsStyle: GenerateStyle = token => { ...genActiveStyle(token), }, - [`&-affix-wrapper ${mentionsCls}-suffix`]: { + [`&-affix-wrapper ${componentCls}-suffix`]: { position: 'absolute', top: 0, insetInlineEnd: inputPaddingHorizontal, @@ -86,7 +78,7 @@ const genMentionsStyle: GenerateStyle = token => { }, // ================= Input Area ================= - [`> textarea, ${mentionsCls}-measure`]: { + [`> textarea, ${componentCls}-measure`]: { minHeight: controlHeight - 2, margin: 0, padding: `${inputPaddingVertical}px ${inputPaddingHorizontal}px`, @@ -119,7 +111,7 @@ const genMentionsStyle: GenerateStyle = token => { ...genPlaceholderStyle(token.colorPlaceholder), }, - [`${mentionsCls}-measure`]: { + [`${componentCls}-measure`]: { position: 'absolute', top: 0, insetInlineEnd: 0, @@ -156,7 +148,7 @@ const genMentionsStyle: GenerateStyle = token => { display: 'none', }, - [`${mentionsCls}-dropdown-menu`]: { + [`${componentCls}-dropdown-menu`]: { maxHeight: token.dropdownHeight, marginBottom: 0, paddingInlineStart: 0, // Override default ul/ol @@ -224,30 +216,15 @@ const genMentionsStyle: GenerateStyle = token => { }; // ============================== Export ============================== -export default function useStyle( - prefixCls: string, - iconPrefixCls: string, -): UseComponentStyleResult { - const [theme, token, hashId] = useToken(); - - return [ - useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => { - const { zIndexPopup, Mentions } = token; - - const mentionsToken: MentionsToken = { - ...initInputToken(token, prefixCls, iconPrefixCls), - - mentionsCls: `.${prefixCls}`, - - dropdownHeight: 250, - controlItemWidth: 100, - zIndexDropdown: zIndexPopup + 50, - - ...Mentions, - }; - - return [genMentionsStyle(mentionsToken)]; - }), - hashId, - ]; -} +export default genComponentStyleHook( + 'Mentions', + token => { + const mentionsToken = initInputToken>(token); + return [genMentionsStyle(mentionsToken)]; + }, + token => ({ + dropdownHeight: 250, + controlItemWidth: 100, + zIndexDropdown: token.zIndexPopup + 50, + }), +); diff --git a/components/pagination/Pagination.tsx b/components/pagination/Pagination.tsx index acf6a6fb1d..7341868bfe 100644 --- a/components/pagination/Pagination.tsx +++ b/components/pagination/Pagination.tsx @@ -1,8 +1,6 @@ import * as React from 'react'; -import RcPagination, { - PaginationLocale, - PaginationProps as RcPaginationProps, -} from 'rc-pagination'; +import type { PaginationProps as RcPaginationProps } from 'rc-pagination'; +import RcPagination, { PaginationLocale } from 'rc-pagination'; import enUS from 'rc-pagination/lib/locale/en_US'; import classNames from 'classnames'; import LeftOutlined from '@ant-design/icons/LeftOutlined'; @@ -43,16 +41,11 @@ const Pagination: React.FC = ({ }) => { const { xs } = useBreakpoint(responsive); - const { getPrefixCls, iconPrefixCls, direction } = React.useContext(ConfigContext); + const { getPrefixCls, direction } = React.useContext(ConfigContext); const prefixCls = getPrefixCls('pagination', customizePrefixCls); // Style - const [wrapSSR, hashId] = useStyle( - getPrefixCls(), - prefixCls, - getPrefixCls('input'), - iconPrefixCls, - ); + const [wrapSSR, hashId] = useStyle(prefixCls); const getIconsProps = () => { const ellipsis = •••; diff --git a/components/pagination/style/index.tsx b/components/pagination/style/index.tsx index 01570e1f22..82ebac5ed6 100644 --- a/components/pagination/style/index.tsx +++ b/components/pagination/style/index.tsx @@ -7,45 +7,33 @@ import { genInputSmallStyle, type InputToken, } from '../../input/style'; -import { - DerivativeToken, - resetComponent, - UseComponentStyleResult, - useStyleRegister, - useToken, - GenerateStyle, -} from '../../_util/theme'; +import { resetComponent, genComponentStyleHook } from '../../_util/theme'; +import type { GenerateStyle, FullToken } from '../../_util/theme'; -interface PaginationToken extends DerivativeToken { - paginationItemSzie: number; +interface PaginationToken extends InputToken> { + paginationItemSize: number; paginationFontFamily: string; paginationItemBg: string; paginationItemBgActive: string; paginationFontWeightActive: number; paginationItemSizeSM: number; - pagniationItemInputBg: string; + paginationItemInputBg: string; paginationMiniOptionsSizeChangerTop: number; paginationItemDisabledBgActive: string; paginationItemDisabledColorActive: string; paginationItemLinkBg: string; - screenLG: number; - screenSM: number; inputOutlineOffset: string; - antPrefixCls: string; - paginationCls: string; - iconPrefixCls: string; - inputToken: InputToken; } const genPaginationDisabledStyle: GenerateStyle = token => { - const { paginationCls } = token; + const { componentCls } = token; return { - [`${paginationCls}-disabled`]: { + [`${componentCls}-disabled`]: { '&, &:hover': { cursor: 'not-allowed', - [`${paginationCls}-item-link`]: { + [`${componentCls}-item-link`]: { color: token.colorTextDisabled, borderColor: token.colorBorder, cursor: 'not-allowed', @@ -55,7 +43,7 @@ const genPaginationDisabledStyle: GenerateStyle = to '&:focus-visible': { cursor: 'not-allowed', - [`${paginationCls}-item-link`]: { + [`${componentCls}-item-link`]: { color: token.colorTextDisabled, borderColor: token.colorBorder, cursor: 'not-allowed', @@ -63,10 +51,10 @@ const genPaginationDisabledStyle: GenerateStyle = to }, }, - [`&${paginationCls}-disabled`]: { + [`&${componentCls}-disabled`]: { cursor: 'not-allowed', - [`${paginationCls}-item`]: { + [`${componentCls}-item`]: { background: token.colorBgComponentDisabled, borderColor: token.colorBorder, cursor: 'not-allowed', @@ -87,26 +75,26 @@ const genPaginationDisabledStyle: GenerateStyle = to }, }, - [`${paginationCls}-item-link`]: { + [`${componentCls}-item-link`]: { color: token.colorTextDisabled, background: token.colorBgComponentDisabled, borderColor: token.colorBorder, cursor: 'not-allowed', - [`${paginationCls}-simple&`]: { + [`${componentCls}-simple&`]: { background: 'transparent', }, }, - [`${paginationCls}-item-link-icon`]: { + [`${componentCls}-item-link-icon`]: { opacity: 0, }, - [`${paginationCls}-item-ellipsis`]: { + [`${componentCls}-item-ellipsis`]: { opacity: 1, }, - [`${paginationCls}-simple-pager`]: { + [`${componentCls}-simple-pager`]: { color: token.colorTextDisabled, }, }, @@ -114,27 +102,27 @@ const genPaginationDisabledStyle: GenerateStyle = to }; const genPaginationMiniStyle: GenerateStyle = token => { - const { paginationCls } = token; + const { componentCls } = token; return { - [`&.mini ${paginationCls}-total-text, &.mini ${paginationCls}-simple-pager`]: { + [`&.mini ${componentCls}-total-text, &.mini ${componentCls}-simple-pager`]: { height: token.paginationItemSizeSM, lineHeight: `${token.paginationItemSizeSM}px`, }, - [`&.mini ${paginationCls}-item`]: { + [`&.mini ${componentCls}-item`]: { minWidth: token.paginationItemSizeSM, height: token.paginationItemSizeSM, margin: 0, lineHeight: `${token.paginationItemSizeSM - 2}px`, }, - [`&.mini ${paginationCls}-item:not(${paginationCls}-item-active)`]: { + [`&.mini ${componentCls}-item:not(${componentCls}-item-active)`]: { background: 'transparent', borderColor: 'transparent', }, - [`&.mini ${paginationCls}-prev, &.mini ${paginationCls}-next`]: { + [`&.mini ${componentCls}-prev, &.mini ${componentCls}-next`]: { minWidth: token.paginationItemSizeSM, height: token.paginationItemSizeSM, margin: 0, @@ -142,8 +130,8 @@ const genPaginationMiniStyle: GenerateStyle = token }, [` - &.mini ${paginationCls}-prev ${paginationCls}-item-link, - &.mini ${paginationCls}-next ${paginationCls}-item-link + &.mini ${componentCls}-prev ${componentCls}-item-link, + &.mini ${componentCls}-next ${componentCls}-item-link `]: { background: 'transparent', borderColor: 'transparent', @@ -154,13 +142,13 @@ const genPaginationMiniStyle: GenerateStyle = token }, }, - [`&.mini ${paginationCls}-jump-prev, &.mini ${paginationCls}-jump-next`]: { + [`&.mini ${componentCls}-jump-prev, &.mini ${componentCls}-jump-next`]: { height: token.paginationItemSizeSM, marginInlineEnd: 0, lineHeight: `${token.paginationItemSizeSM}px`, }, - [`&.mini ${paginationCls}-options`]: { + [`&.mini ${componentCls}-options`]: { // FIXME marginInlineStart: 2, @@ -173,7 +161,7 @@ const genPaginationMiniStyle: GenerateStyle = token lineHeight: `${token.paginationItemSizeSM}px`, input: { - ...genInputSmallStyle(token.inputToken), + ...genInputSmallStyle(token), // FIXME width: 44, @@ -185,17 +173,17 @@ const genPaginationMiniStyle: GenerateStyle = token }; const genPaginationSimpleStyle: GenerateStyle = token => { - const { paginationCls } = token; + const { componentCls } = token; return { [` - &${paginationCls}-simple ${paginationCls}-prev, - &${paginationCls}-simple ${paginationCls}-next + &${componentCls}-simple ${componentCls}-prev, + &${componentCls}-simple ${componentCls}-next `]: { height: token.paginationItemSizeSM, lineHeight: `${token.paginationItemSizeSM}px`, verticalAlign: 'top', - [`${paginationCls}-item-link`]: { + [`${componentCls}-item-link`]: { height: token.paginationItemSizeSM, backgroundColor: 'transparent', border: 0, @@ -207,7 +195,7 @@ const genPaginationSimpleStyle: GenerateStyle = toke }, }, - [`&${paginationCls}-simple ${paginationCls}-simple-pager`]: { + [`&${componentCls}-simple ${componentCls}-simple-pager`]: { display: 'inline-block', height: token.paginationItemSizeSM, marginInlineEnd: token.marginXS, @@ -219,7 +207,7 @@ const genPaginationSimpleStyle: GenerateStyle = toke // FIXME: hardcode in v4 padding: '0 6px', textAlign: 'center', - backgroundColor: token.pagniationItemInputBg, + backgroundColor: token.paginationItemInputBg, border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`, borderRadius: token.radiusBase, outline: 'none', @@ -246,16 +234,16 @@ const genPaginationSimpleStyle: GenerateStyle = toke }; const genPaginationJumpStyle: GenerateStyle = token => { - const { paginationCls } = token; + const { componentCls } = token; return { - [`${paginationCls}-jump-prev, ${paginationCls}-jump-next`]: { + [`${componentCls}-jump-prev, ${componentCls}-jump-next`]: { outline: 0, - [`${paginationCls}-item-container`]: { + [`${componentCls}-item-container`]: { position: 'relative', - [`${paginationCls}-item-link-icon`]: { + [`${componentCls}-item-link-icon`]: { color: token.colorPrimary, fontSize: token.fontSizeSM, // FIXME @@ -272,7 +260,7 @@ const genPaginationJumpStyle: GenerateStyle = token }, }, - [`${paginationCls}-item-ellipsis`]: { + [`${componentCls}-item-ellipsis`]: { position: 'absolute', top: 0, insetInlineEnd: 0, @@ -293,44 +281,44 @@ const genPaginationJumpStyle: GenerateStyle = token }, '&:hover': { - [`${paginationCls}-item-link-icon`]: { + [`${componentCls}-item-link-icon`]: { opacity: 1, }, - [`${paginationCls}-item-ellipsis`]: { + [`${componentCls}-item-ellipsis`]: { opacity: 0, }, }, '&:focus-visible': { - [`${paginationCls}-item-link-icon`]: { + [`${componentCls}-item-link-icon`]: { opacity: 1, }, - [`${paginationCls}-item-ellipsis`]: { + [`${componentCls}-item-ellipsis`]: { opacity: 0, }, }, }, [` - ${paginationCls}-prev, - ${paginationCls}-jump-prev, - ${paginationCls}-jump-next + ${componentCls}-prev, + ${componentCls}-jump-prev, + ${componentCls}-jump-next `]: { marginInlineEnd: token.marginXS, }, [` - ${paginationCls}-prev, - ${paginationCls}-next, - ${paginationCls}-jump-prev, - ${paginationCls}-jump-next + ${componentCls}-prev, + ${componentCls}-next, + ${componentCls}-jump-prev, + ${componentCls}-jump-next `]: { display: 'inline-block', - minWidth: token.paginationItemSzie, - height: token.paginationItemSzie, + minWidth: token.paginationItemSize, + height: token.paginationItemSize, color: token.colorText, fontFamily: token.paginationFontFamily, - lineHeight: `${token.paginationItemSzie}px`, + lineHeight: `${token.paginationItemSize}px`, textAlign: 'center', verticalAlign: 'middle', listStyle: 'none', @@ -339,7 +327,7 @@ const genPaginationJumpStyle: GenerateStyle = token transition: `all ${token.motionDurationSlow}`, }, - [`${paginationCls}-prev, ${paginationCls}-next`]: { + [`${componentCls}-prev, ${componentCls}-next`]: { fontFamily: 'Arial, Helvetica, sans-serif', outline: 0, @@ -353,7 +341,7 @@ const genPaginationJumpStyle: GenerateStyle = token borderColor: token.colorPrimaryHover, }, - [`${paginationCls}-item-link`]: { + [`${componentCls}-item-link`]: { display: 'block', // FIXME width: '100%', @@ -368,24 +356,24 @@ const genPaginationJumpStyle: GenerateStyle = token transition: `all ${token.motionDurationSlow}`, }, - [`&:focus-visible ${paginationCls}-item-link`]: { + [`&:focus-visible ${componentCls}-item-link`]: { color: token.colorPrimary, borderColor: token.colorPrimary, }, - [`&:hover ${paginationCls}-item-link`]: { + [`&:hover ${componentCls}-item-link`]: { color: token.colorPrimary, borderColor: token.colorPrimary, }, }, - [`${paginationCls}-slash`]: { + [`${componentCls}-slash`]: { // FIXME marginInlineEnd: 10, marginInlineStart: 5, }, - [`${paginationCls}-options`]: { + [`${componentCls}-options`]: { display: 'inline-block', marginInlineStart: token.margin, verticalAlign: 'middle', @@ -410,7 +398,7 @@ const genPaginationJumpStyle: GenerateStyle = token verticalAlign: 'top', input: { - ...genBasicInputStyle(token.inputToken), + ...genBasicInputStyle(token), // FIXME width: 50, @@ -425,16 +413,16 @@ const genPaginationJumpStyle: GenerateStyle = token }; const genPaginationItemStyle: GenerateStyle = token => { - const { paginationCls } = token; + const { componentCls } = token; return { - [`${paginationCls}-item`]: { + [`${componentCls}-item`]: { display: 'inline-block', - minWidth: token.paginationItemSzie, - height: token.paginationItemSzie, + minWidth: token.paginationItemSize, + height: token.paginationItemSize, marginInlineEnd: token.marginXS, fontFamily: token.paginationFontFamily, - lineHeight: `${token.paginationItemSzie - 2}px`, + lineHeight: `${token.paginationItemSize - 2}px`, textAlign: 'center', verticalAlign: 'middle', listStyle: 'none', @@ -507,10 +495,10 @@ const genPaginationItemStyle: GenerateStyle = token }; const genPaginationStyle: GenerateStyle = token => { - const { paginationCls } = token; + const { componentCls } = token; return { - [paginationCls]: { + [componentCls]: { ...resetComponent(token), 'ul, ol': { @@ -528,11 +516,11 @@ const genPaginationStyle: GenerateStyle = token => { content: '""', }, - [`${paginationCls}-total-text`]: { + [`${componentCls}-total-text`]: { display: 'inline-block', - height: token.paginationItemSzie, + height: token.paginationItemSize, marginInlineEnd: token.marginXS, - lineHeight: `${token.paginationItemSzie - 2}px`, + lineHeight: `${token.paginationItemSize - 2}px`, verticalAlign: 'middle', }, @@ -553,7 +541,7 @@ const genPaginationStyle: GenerateStyle = token => { // media query style [`@media only screen and (max-width: ${token.screenLG}px)`]: { - [`${paginationCls}-item`]: { + [`${componentCls}-item`]: { '&-after-jump-prev, &-before-jump-next': { display: 'none', }, @@ -561,55 +549,37 @@ const genPaginationStyle: GenerateStyle = token => { }, [`@media only screen and (max-width: ${token.screenSM}px)`]: { - [`${paginationCls}-options`]: { + [`${componentCls}-options`]: { display: 'none', }, }, }, // rtl style - [`&${token.paginationCls}-rtl`]: { + [`&${token.componentCls}-rtl`]: { direction: 'rtl', }, }; }; // ============================== Export ============================== -export default function useStyle( - antPrefixCls: string, - paginationPrefixCls: string, - inputPrefixCls: string, - iconPrefixCls: string, -): UseComponentStyleResult { - const [theme, token, hashId] = useToken(); - +export default genComponentStyleHook('Pagination', token => { const paginationToken: PaginationToken = { ...token, // FIXME: missing token - paginationItemSzie: token.controlHeight, + paginationItemSize: token.controlHeight, paginationFontFamily: token.fontFamily, paginationItemBg: token.colorBgComponent, paginationItemBgActive: token.colorBgComponent, paginationFontWeightActive: 500, paginationItemSizeSM: 24, - pagniationItemInputBg: token.colorBgComponent, + paginationItemInputBg: token.colorBgComponent, paginationMiniOptionsSizeChangerTop: 0, paginationItemDisabledBgActive: new TinyColor('#000').tint(90).toString(), // tint(@black, 90%) paginationItemDisabledColorActive: token.colorTextDisabled, paginationItemLinkBg: token.colorBgComponent, inputOutlineOffset: '0 0', - screenLG: 992, - screenSM: 576, - antPrefixCls: `.${antPrefixCls}`, - paginationCls: `.${paginationPrefixCls}`, - iconPrefixCls: `.${iconPrefixCls}`, - inputToken: initInputToken(token, inputPrefixCls, iconPrefixCls), + ...initInputToken(token), }; - - return [ - useStyleRegister({ theme, token, hashId, path: [paginationPrefixCls] }, () => [ - genPaginationStyle(paginationToken), - ]), - hashId, - ]; -} + return [genPaginationStyle(paginationToken)]; +}); diff --git a/components/typography/style/index.tsx b/components/typography/style/index.tsx index 597bce44d5..cd5edd8de8 100644 --- a/components/typography/style/index.tsx +++ b/components/typography/style/index.tsx @@ -1,6 +1,6 @@ // deps-lint-skip-all -import { useStyleRegister, useToken } from '../../_util/theme'; -import type { UseComponentStyleResult, GenerateStyle, AliasToken } from '../../_util/theme'; +import { FullToken, genComponentStyleHook } from '../../_util/theme'; +import type { GenerateStyle } from '../../_util/theme'; import { operationUnit } from '../../_util/theme/util/operationUnit'; import { getTitleStyles, @@ -17,15 +17,13 @@ export interface ComponentToken { sizeMarginHeadingVerticalEnd: number | string; } -export interface TypographyToken extends AliasToken, ComponentToken { - typographyCls: string; -} +export type TypographyToken = FullToken<'Typography'>; const genTypographyStyle: GenerateStyle = token => { - const { typographyCls, sizeMarginHeadingVerticalStart } = token; + const { componentCls, sizeMarginHeadingVerticalStart } = token; return { - [typographyCls]: { + [componentCls]: { color: token.colorText, overflowWrap: 'break-word', '&&-secondary': { @@ -99,9 +97,9 @@ const genTypographyStyle: GenerateStyle = token => { // Operation [` - ${typographyCls}-expand, - ${typographyCls}-edit, - ${typographyCls}-copy + ${componentCls}-expand, + ${componentCls}-edit, + ${componentCls}-copy `]: { ...operationUnit(token), marginInlineStart: token.marginXXS, @@ -121,26 +119,7 @@ const genTypographyStyle: GenerateStyle = token => { }; // ============================== Export ============================== -export default function useStyle(prefixCls: string): UseComponentStyleResult { - const [theme, token, hashId] = useToken(); - - return [ - useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => { - const { Typography } = token; - - const typographyToken: TypographyToken = { - ...token, - - typographyCls: `.${prefixCls}`, - - sizeMarginHeadingVerticalStart: '1.2em', - sizeMarginHeadingVerticalEnd: '0.5em', - - ...Typography, - }; - - return [genTypographyStyle(typographyToken)]; - }), - hashId, - ]; -} +export default genComponentStyleHook('Typography', token => [genTypographyStyle(token)], { + sizeMarginHeadingVerticalStart: '1.2em', + sizeMarginHeadingVerticalEnd: '0.5em', +}); diff --git a/components/typography/style/mixins.tsx b/components/typography/style/mixins.tsx index dc401f06a3..aa3d28752a 100644 --- a/components/typography/style/mixins.tsx +++ b/components/typography/style/mixins.tsx @@ -56,7 +56,7 @@ export const getTitleStyles: GenerateStyle = token = }; export const getLinkStyles: GenerateStyle = token => { - const { typographyCls } = token; + const { componentCls } = token; return { 'a&, a': { @@ -67,7 +67,7 @@ export const getLinkStyles: GenerateStyle = token => textDecoration: token.linkHoverDecoration, }, - [`&[disabled], &${typographyCls}-disabled`]: { + [`&[disabled], &${componentCls}-disabled`]: { color: token.colorTextDisabled, cursor: 'not-allowed', @@ -183,9 +183,9 @@ export const getResetStyles = (): CSSObject => ({ }); export const getEditableStyles: GenerateStyle = token => { - const { typographyCls } = token; + const { componentCls } = token; - const inputToken = initInputToken(token, '', ''); + const inputToken = initInputToken(token); const inputShift = inputToken.inputPaddingVertical + 1; return { '&-edit-content': { @@ -197,7 +197,7 @@ export const getEditableStyles: GenerateStyle = toke marginBottom: `calc(1em - ${inputShift}px)`, }, - [`${typographyCls}-edit-content-confirm`]: { + [`${componentCls}-edit-content-confirm`]: { position: 'absolute', insetInlineEnd: token.marginXS + 2, insetBlockEnd: token.marginXS,