mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 01:13:58 +08:00
refactor: Components based on Input migrate to genHook (#34884)
* refactor: Input base components use genHook * chore: code style * chore: code clean
This commit is contained in:
MadCcc
GitHub
parent
f9b80cbcc3
commit
e5efbee968
@ -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;
|
||||
|
||||
@ -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<T extends ValueType = ValueType>
|
||||
}
|
||||
|
||||
const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((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<HTMLInputElement>(null);
|
||||
@ -50,7 +53,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
|
||||
const prefixCls = getPrefixCls('input-number', customizePrefixCls);
|
||||
|
||||
// Style
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls);
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
|
||||
let upIcon = <UpOutlined className={`${prefixCls}-handler-up-inner`} />;
|
||||
let downIcon = <DownOutlined className={`${prefixCls}-handler-down-inner`} />;
|
||||
|
||||
@ -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<FullToken<'InputNumber'>>;
|
||||
|
||||
const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumberToken) => {
|
||||
const {
|
||||
inputNumberCls,
|
||||
componentCls,
|
||||
controlLineWidth,
|
||||
controlLineType,
|
||||
colorBorder,
|
||||
@ -55,7 +47,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
|
||||
return [
|
||||
{
|
||||
[inputNumberCls]: {
|
||||
[componentCls]: {
|
||||
...resetComponent(token),
|
||||
...genBasicInputStyle(token),
|
||||
...genStatusStyle(token),
|
||||
@ -70,7 +62,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
'&-rtl': {
|
||||
direction: 'rtl',
|
||||
|
||||
[`${inputNumberCls}-input`]: {
|
||||
[`${componentCls}-input`]: {
|
||||
direction: 'rtl',
|
||||
},
|
||||
},
|
||||
@ -79,7 +71,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
padding: 0,
|
||||
fontSize: fontSizeLG,
|
||||
|
||||
[`input${inputNumberCls}-input`]: {
|
||||
[`input${componentCls}-input`]: {
|
||||
height: controlHeightLG - 2 * controlLineWidth,
|
||||
},
|
||||
},
|
||||
@ -87,7 +79,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (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<InputNumberToken> = (token: InputNumbe
|
||||
|
||||
'&-disabled': {
|
||||
...genDisabledStyle(token),
|
||||
[`${inputNumberCls}-input`]: {
|
||||
[`${componentCls}-input`]: {
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
},
|
||||
@ -125,13 +117,13 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (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<InputNumberToken> = (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<InputNumberToken> = (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<InputNumberToken> = (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<InputNumberToken> = (token: InputNumbe
|
||||
},
|
||||
},
|
||||
|
||||
[`${inputNumberCls}-handler`]: {
|
||||
[`${componentCls}-handler`]: {
|
||||
height: '50%',
|
||||
overflow: 'hidden',
|
||||
color: colorTextSecondary,
|
||||
@ -220,8 +212,8 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (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<InputNumberToken> = (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<InputNumberToken> = (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<InputNumberToken> = (token: InputNumbe
|
||||
};
|
||||
|
||||
const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (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<InputNumberToken> = (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<InputNumberToken> = (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<InputNumberToken> = (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<FullToken<'InputNumber'>>(token);
|
||||
return [genInputNumberStyles(inputNumberToken), genAffixWrapperStyles(inputNumberToken)];
|
||||
},
|
||||
token => ({
|
||||
controlWidth: 90,
|
||||
handleWidth: token.controlHeightSM - token.controlLineWidth * 2,
|
||||
handleFontSize: token.fontSize / 2,
|
||||
}),
|
||||
);
|
||||
|
||||
@ -19,11 +19,11 @@ export interface GroupProps {
|
||||
}
|
||||
|
||||
const Group: React.FC<GroupProps> = 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,
|
||||
{
|
||||
|
||||
@ -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<InputRef, InputProps>((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<InputRef>(null);
|
||||
|
||||
// Style
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls);
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
|
||||
// ===================== Size =====================
|
||||
const size = React.useContext(SizeContext);
|
||||
|
||||
@ -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<TextAreaRef, TextAreaProps>(
|
||||
},
|
||||
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<TextAreaRef, TextAreaProps>(
|
||||
const prefixCls = getPrefixCls('input', customizePrefixCls);
|
||||
|
||||
// Style
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls);
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
|
||||
React.useImperativeHandle(ref, () => ({
|
||||
resizableTextArea: innerRef.current?.resizableTextArea,
|
||||
|
||||
@ -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 extends GlobalToken = FullToken<'Input'>> = 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<InputToken> = (token: InputToken) => {
|
||||
const {
|
||||
prefixCls,
|
||||
iconPrefixCls,
|
||||
inputAffixPadding,
|
||||
colorTextSecondary,
|
||||
motionDurationSlow,
|
||||
colorAction,
|
||||
colorActionHover,
|
||||
iconCls,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
@ -642,7 +634,7 @@ const genAffixStyle: GenerateStyle<InputToken> = (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<InputToken> = (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<T extends GlobalToken = GlobalToken>(token: T): InputToken<T> {
|
||||
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<InputToken> = token => {
|
||||
const { prefixCls, inputPaddingHorizontal, paddingLG } = token;
|
||||
@ -857,24 +845,14 @@ const genTextAreaStyle: GenerateStyle<InputToken> = token => {
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default function useStyle(
|
||||
prefixCls: string,
|
||||
iconPrefixCls: string,
|
||||
): UseComponentStyleResult {
|
||||
const [theme, token, hashId] = useToken();
|
||||
export default genComponentStyleHook('Input', token => {
|
||||
const inputToken = initInputToken<FullToken<'Input'>>(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),
|
||||
];
|
||||
}
|
||||
});
|
||||
|
||||
@ -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<unknown, MentionProps> =
|
||||
const [focused, setFocused] = React.useState(false);
|
||||
const innerRef = React.useRef<HTMLElement>();
|
||||
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<unknown, MentionProps> =
|
||||
const prefixCls = getPrefixCls('mentions', customizePrefixCls);
|
||||
|
||||
// Style
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls);
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
|
||||
const mergedClassName = classNames(
|
||||
{
|
||||
|
||||
@ -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<FullToken<'Mentions'>>;
|
||||
|
||||
const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
|
||||
const {
|
||||
mentionsCls,
|
||||
componentCls,
|
||||
colorTextDisabled,
|
||||
controlItemBgHover,
|
||||
controlPaddingHorizontal,
|
||||
@ -49,7 +41,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
|
||||
);
|
||||
|
||||
return {
|
||||
[`${mentionsCls}`]: {
|
||||
[`${componentCls}`]: {
|
||||
...resetComponent(token),
|
||||
...genBasicInputStyle(token),
|
||||
|
||||
@ -74,7 +66,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
|
||||
...genActiveStyle(token),
|
||||
},
|
||||
|
||||
[`&-affix-wrapper ${mentionsCls}-suffix`]: {
|
||||
[`&-affix-wrapper ${componentCls}-suffix`]: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
insetInlineEnd: inputPaddingHorizontal,
|
||||
@ -86,7 +78,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = 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<MentionsToken> = token => {
|
||||
...genPlaceholderStyle(token.colorPlaceholder),
|
||||
},
|
||||
|
||||
[`${mentionsCls}-measure`]: {
|
||||
[`${componentCls}-measure`]: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
insetInlineEnd: 0,
|
||||
@ -156,7 +148,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = 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<MentionsToken> = 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<FullToken<'Mentions'>>(token);
|
||||
return [genMentionsStyle(mentionsToken)];
|
||||
},
|
||||
token => ({
|
||||
dropdownHeight: 250,
|
||||
controlItemWidth: 100,
|
||||
zIndexDropdown: token.zIndexPopup + 50,
|
||||
}),
|
||||
);
|
||||
|
||||
@ -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<PaginationProps> = ({
|
||||
}) => {
|
||||
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 = <span className={`${prefixCls}-item-ellipsis`}>•••</span>;
|
||||
|
||||
@ -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<FullToken<'Pagination'>> {
|
||||
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<PaginationToken, CSSObject> = 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<PaginationToken, CSSObject> = 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<PaginationToken, CSSObject> = 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<PaginationToken, CSSObject> = 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<PaginationToken, CSSObject> = to
|
||||
};
|
||||
|
||||
const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = 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<PaginationToken, CSSObject> = 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<PaginationToken, CSSObject> = 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<PaginationToken, CSSObject> = token
|
||||
lineHeight: `${token.paginationItemSizeSM}px`,
|
||||
|
||||
input: {
|
||||
...genInputSmallStyle(token.inputToken),
|
||||
...genInputSmallStyle(token),
|
||||
|
||||
// FIXME
|
||||
width: 44,
|
||||
@ -185,17 +173,17 @@ const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = token
|
||||
};
|
||||
|
||||
const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = 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<PaginationToken, CSSObject> = 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<PaginationToken, CSSObject> = 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<PaginationToken, CSSObject> = toke
|
||||
};
|
||||
|
||||
const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = 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<PaginationToken, CSSObject> = token
|
||||
},
|
||||
},
|
||||
|
||||
[`${paginationCls}-item-ellipsis`]: {
|
||||
[`${componentCls}-item-ellipsis`]: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
insetInlineEnd: 0,
|
||||
@ -293,44 +281,44 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = 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<PaginationToken, CSSObject> = 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<PaginationToken, CSSObject> = token
|
||||
borderColor: token.colorPrimaryHover,
|
||||
},
|
||||
|
||||
[`${paginationCls}-item-link`]: {
|
||||
[`${componentCls}-item-link`]: {
|
||||
display: 'block',
|
||||
// FIXME
|
||||
width: '100%',
|
||||
@ -368,24 +356,24 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = 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<PaginationToken, CSSObject> = token
|
||||
verticalAlign: 'top',
|
||||
|
||||
input: {
|
||||
...genBasicInputStyle(token.inputToken),
|
||||
...genBasicInputStyle(token),
|
||||
|
||||
// FIXME
|
||||
width: 50,
|
||||
@ -425,16 +413,16 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = token
|
||||
};
|
||||
|
||||
const genPaginationItemStyle: GenerateStyle<PaginationToken, CSSObject> = 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<PaginationToken, CSSObject> = token
|
||||
};
|
||||
|
||||
const genPaginationStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
|
||||
const { paginationCls } = token;
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
[paginationCls]: {
|
||||
[componentCls]: {
|
||||
...resetComponent(token),
|
||||
|
||||
'ul, ol': {
|
||||
@ -528,11 +516,11 @@ const genPaginationStyle: GenerateStyle<PaginationToken, CSSObject> = 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<PaginationToken, CSSObject> = 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<PaginationToken, CSSObject> = 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)];
|
||||
});
|
||||
|
||||
@ -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<TypographyToken> = 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<TypographyToken> = 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<TypographyToken> = 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',
|
||||
});
|
||||
|
||||
@ -56,7 +56,7 @@ export const getTitleStyles: GenerateStyle<TypographyToken, CSSObject> = token =
|
||||
};
|
||||
|
||||
export const getLinkStyles: GenerateStyle<TypographyToken, CSSObject> = token => {
|
||||
const { typographyCls } = token;
|
||||
const { componentCls } = token;
|
||||
|
||||
return {
|
||||
'a&, a': {
|
||||
@ -67,7 +67,7 @@ export const getLinkStyles: GenerateStyle<TypographyToken, CSSObject> = 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<TypographyToken, CSSObject> = 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<TypographyToken, CSSObject> = toke
|
||||
marginBottom: `calc(1em - ${inputShift}px)`,
|
||||
},
|
||||
|
||||
[`${typographyCls}-edit-content-confirm`]: {
|
||||
[`${componentCls}-edit-content-confirm`]: {
|
||||
position: 'absolute',
|
||||
insetInlineEnd: token.marginXS + 2,
|
||||
insetBlockEnd: token.marginXS,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user