mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
refactor: More token used on component (#34766)
* chore: add fontSizeIcon * chore: cascader * chore: slider token * chore: slider token * chore: move to outline * chore: input style * chore: input align * chore: slider full * chore: align inputNumber * chore: input token * chore: input-number token * chore: mention token * fix: ts def
This commit is contained in:
二货机器人
GitHub
parent
b579933ec6
commit
d437f9fad9
@ -1,6 +1,11 @@
|
||||
import * as React from 'react';
|
||||
import type { ComponentToken as ButtonComponentToken } from '../../button/style';
|
||||
import type { ComponentToken as DividerComponentToken } from '../../divider/style';
|
||||
import type { ComponentToken as CascaderComponentToken } from '../../cascader/style';
|
||||
import type { ComponentToken as InputNumberComponentToken } from '../../input-number/style';
|
||||
import type { ComponentToken as MentionsComponentToken } from '../../mentions/style';
|
||||
import type { ComponentToken as SelectComponentToken } from '../../select/style';
|
||||
import type { ComponentToken as SliderComponentToken } from '../../slider/style';
|
||||
import type { ComponentToken as TypographyComponentToken } from '../../typography/style';
|
||||
|
||||
export const PresetColors = [
|
||||
@ -33,9 +38,14 @@ export interface OverrideToken {
|
||||
derivative?: Partial<DerivativeToken & AliasToken>;
|
||||
|
||||
// Customize component
|
||||
button?: ButtonComponentToken;
|
||||
divider?: DividerComponentToken;
|
||||
typography?: TypographyComponentToken;
|
||||
Button?: ButtonComponentToken;
|
||||
Cascader?: CascaderComponentToken;
|
||||
Divider?: DividerComponentToken;
|
||||
InputNumber?: InputNumberComponentToken;
|
||||
Mentions?: MentionsComponentToken;
|
||||
Select?: SelectComponentToken;
|
||||
Slider?: SliderComponentToken;
|
||||
Typography?: TypographyComponentToken;
|
||||
}
|
||||
|
||||
/** Final token which contains the components level override */
|
||||
@ -91,7 +101,6 @@ export interface SeedToken extends PresetColorType {
|
||||
// zIndex
|
||||
/** Base zIndex of component like BackTop, Affix which can be cover by large popup */
|
||||
zIndexBase: number;
|
||||
zIndexPopover: number;
|
||||
/** Base popup component zIndex */
|
||||
zIndexPopup: number;
|
||||
}
|
||||
@ -134,6 +143,7 @@ export interface DerivativeToken extends SeedToken, ColorPalettes {
|
||||
colorTextBelow3: string;
|
||||
|
||||
colorBg2: string;
|
||||
colorBg3: string;
|
||||
colorBgBelow: string;
|
||||
colorBgBelow2: string;
|
||||
|
||||
@ -193,6 +203,8 @@ export interface AliasToken extends Omit<DerivativeToken, OmitDerivativeKey> {
|
||||
fontSize: number;
|
||||
fontSizeLG: number;
|
||||
fontSizeXL: number;
|
||||
/** Operation icon in Select, Cascader, etc. icon fontSize. Normal is same as fontSizeSM */
|
||||
fontSizeIcon: number;
|
||||
|
||||
fontSizeHeading1: number;
|
||||
fontSizeHeading2: number;
|
||||
@ -240,6 +252,7 @@ export interface AliasToken extends Omit<DerivativeToken, OmitDerivativeKey> {
|
||||
colorLinkActive: string;
|
||||
|
||||
colorBgContainer: string;
|
||||
colorBgContainerSecondary: string;
|
||||
colorBgComponent: string;
|
||||
colorBgComponentSecondary: string;
|
||||
colorBgComponentDisabled: string;
|
||||
|
||||
@ -101,6 +101,7 @@ export function derivative(token: SeedToken): DerivativeToken {
|
||||
|
||||
// color
|
||||
colorBg2,
|
||||
colorBg3: '#e1e1e1',
|
||||
colorBgBelow,
|
||||
colorBgBelow2,
|
||||
|
||||
@ -194,7 +195,6 @@ const seedToken: SeedToken = {
|
||||
|
||||
// zIndex
|
||||
zIndexBase: 0,
|
||||
zIndexPopover: 1030,
|
||||
zIndexPopup: 1000,
|
||||
};
|
||||
|
||||
|
||||
@ -27,6 +27,8 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
const warningColors = generate(mergedToken.colorWarning);
|
||||
const errorColors = generate(mergedToken.colorError);
|
||||
|
||||
const fontSizeSM = fontSizes[0];
|
||||
|
||||
// Generate alias token
|
||||
const aliasToken: AliasToken = {
|
||||
...mergedToken,
|
||||
@ -38,6 +40,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
colorTextHeading: mergedToken.colorText,
|
||||
|
||||
colorBgContainer: mergedToken.colorBgBelow2,
|
||||
colorBgContainerSecondary: mergedToken.colorBg3,
|
||||
colorBgComponent: mergedToken.colorBg,
|
||||
colorBgComponentSecondary: mergedToken.colorBg2,
|
||||
colorBgComponentDisabled: mergedToken.colorBgBelow2,
|
||||
@ -50,7 +53,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
colorActionHover: mergedToken.colorText,
|
||||
|
||||
// Font
|
||||
fontSizeSM: fontSizes[0],
|
||||
fontSizeSM,
|
||||
fontSize: fontSizes[1],
|
||||
fontSizeLG: fontSizes[2],
|
||||
fontSizeXL: fontSizes[3],
|
||||
@ -59,6 +62,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
fontSizeHeading3: fontSizes[4],
|
||||
fontSizeHeading4: fontSizes[3],
|
||||
fontSizeHeading5: fontSizes[2],
|
||||
fontSizeIcon: fontSizeSM,
|
||||
|
||||
lineHeight: lineHeights[1],
|
||||
lineHeightLG: lineHeights[2],
|
||||
|
||||
@ -196,7 +196,7 @@ export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CS
|
||||
iconPrefixCls,
|
||||
motionDurationSlow: duration,
|
||||
marginXS,
|
||||
fontSizeSM,
|
||||
fontSizeIcon,
|
||||
alertCloseColor,
|
||||
alertCloseHoverColor,
|
||||
} = token;
|
||||
@ -211,8 +211,8 @@ export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CS
|
||||
marginInlineStart: marginXS,
|
||||
padding: 0,
|
||||
overflow: 'hidden',
|
||||
fontSize: fontSizeSM,
|
||||
lineHeight: `${fontSizeSM}px`,
|
||||
fontSize: fontSizeIcon,
|
||||
lineHeight: `${fontSizeIcon}px`,
|
||||
backgroundColor: 'transparent',
|
||||
border: 'none',
|
||||
outline: 'none',
|
||||
|
||||
@ -13,7 +13,7 @@ ReactDOM.render(
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
override: {
|
||||
button: {
|
||||
Button: {
|
||||
colorBgTextHover: 'red',
|
||||
colorBgTextActive: 'blue',
|
||||
},
|
||||
@ -26,7 +26,7 @@ ReactDOM.render(
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
override: {
|
||||
button: {
|
||||
Button: {
|
||||
colorBgTextHover: 'orange',
|
||||
colorBgTextActive: 'blue',
|
||||
},
|
||||
|
||||
@ -341,7 +341,7 @@ const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls: string = ''): CSS
|
||||
transition: `width ${token.motionDurationSlow} ${token.motionEaseInOut}, opacity ${token.motionDurationSlow} ${token.motionEaseInOut}`,
|
||||
},
|
||||
|
||||
[`&:not(${iconOnlyCls}) ${btnCls}-loading-icon > .${iconPrefixCls}`]: {
|
||||
[`&:not(${iconOnlyCls}) ${btnCls}-loading-icon:not(:only-child) > .${iconPrefixCls}`]: {
|
||||
marginInlineEnd: token.marginXS,
|
||||
},
|
||||
},
|
||||
@ -388,7 +388,7 @@ export default function useStyle(
|
||||
|
||||
return [
|
||||
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => {
|
||||
const { colorText, button = {} } = token;
|
||||
const { colorText, Button = {} } = token;
|
||||
const textColor = new TinyColor(colorText);
|
||||
|
||||
const buttonToken: ButtonToken = {
|
||||
@ -406,7 +406,7 @@ export default function useStyle(
|
||||
btnCls: `.${prefixCls}`,
|
||||
|
||||
// Override by developer
|
||||
...button,
|
||||
...Button,
|
||||
};
|
||||
|
||||
return [
|
||||
|
||||
@ -17,7 +17,13 @@ import {
|
||||
} from '../../_util/theme';
|
||||
import { getStyle as getCheckboxStyle } from '../../checkbox/style';
|
||||
|
||||
interface CascaderToken extends DerivativeToken {
|
||||
export interface ComponentToken {
|
||||
controlWidth: number;
|
||||
controlItemWidth: number;
|
||||
dropdownHeight: number;
|
||||
}
|
||||
|
||||
interface CascaderToken extends DerivativeToken, ComponentToken {
|
||||
prefixCls: string;
|
||||
cascaderCls: string;
|
||||
}
|
||||
@ -27,7 +33,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token, hashId) => {
|
||||
const { prefixCls, cascaderCls } = token;
|
||||
const cascaderMenuItemCls = `${cascaderCls}-menu-item`;
|
||||
const iconCls = `
|
||||
${cascaderMenuItemCls}-expand ${cascaderMenuItemCls}-expand-icon,
|
||||
&${cascaderMenuItemCls}-expand ${cascaderMenuItemCls}-expand-icon,
|
||||
${cascaderMenuItemCls}-loading-icon
|
||||
`;
|
||||
|
||||
@ -41,7 +47,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token, hashId) => {
|
||||
// =====================================================
|
||||
{
|
||||
[cascaderCls]: {
|
||||
width: 184, // FIXME: hardcode in v4
|
||||
width: token.controlWidth,
|
||||
},
|
||||
},
|
||||
|
||||
@ -83,8 +89,8 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token, hashId) => {
|
||||
|
||||
// >>> Menu
|
||||
'&-menu': {
|
||||
minWidth: 111, // FIXME: hardcode in v4
|
||||
height: 180, // FIXME: hardcode in v4
|
||||
minWidth: token.controlItemWidth,
|
||||
height: token.dropdownHeight,
|
||||
margin: `-${token.paddingXS}px 0`,
|
||||
padding: `${token.paddingXS}px 0`,
|
||||
overflow: 'auto',
|
||||
@ -135,7 +141,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token, hashId) => {
|
||||
[iconCls]: {
|
||||
marginInlineStart: token.paddingXXS,
|
||||
color: token.colorTextSecondary,
|
||||
fontSize: 10, // FIXME: hardcode in v4
|
||||
fontSize: token.fontSizeIcon,
|
||||
},
|
||||
|
||||
'&-keyword': {
|
||||
@ -162,16 +168,25 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token, hashId) => {
|
||||
export default function useStyle(prefixCls: string): UseComponentStyleResult {
|
||||
const [theme, token, hashId] = useToken();
|
||||
|
||||
return [
|
||||
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => {
|
||||
const { Cascader = {} } = token;
|
||||
|
||||
const cascaderToken: CascaderToken = {
|
||||
...token,
|
||||
prefixCls,
|
||||
cascaderCls: `.${prefixCls}`,
|
||||
|
||||
controlWidth: 184,
|
||||
controlItemWidth: 111,
|
||||
dropdownHeight: 180,
|
||||
|
||||
// Override
|
||||
...Cascader,
|
||||
};
|
||||
|
||||
return [
|
||||
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
|
||||
genBaseStyle(cascaderToken, hashId),
|
||||
]),
|
||||
return [genBaseStyle(cascaderToken, hashId)];
|
||||
}),
|
||||
hashId,
|
||||
];
|
||||
}
|
||||
|
||||
@ -164,7 +164,7 @@ export default function useStyle(prefixCls: string): UseComponentStyleResult {
|
||||
|
||||
return [
|
||||
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => {
|
||||
const { divider } = token;
|
||||
const { Divider } = token;
|
||||
|
||||
const dividerVerticalGutterMargin = token.marginSM;
|
||||
const dividerHorizontalWithTextGutterMargin = token.margin;
|
||||
@ -181,7 +181,7 @@ export default function useStyle(prefixCls: string): UseComponentStyleResult {
|
||||
dividerHorizontalWithTextGutterMargin,
|
||||
dividerHorizontalGutterMargin,
|
||||
|
||||
...divider,
|
||||
...Divider,
|
||||
};
|
||||
|
||||
return [genSharedDividerStyle(dividerToken)];
|
||||
|
||||
@ -19,48 +19,53 @@ import {
|
||||
InputToken,
|
||||
} from '../../input/style';
|
||||
|
||||
interface InputNumberToken extends InputToken {
|
||||
export interface ComponentToken {
|
||||
controlWidth: number;
|
||||
handleWidth: number;
|
||||
handleFontSize: number;
|
||||
}
|
||||
|
||||
interface InputNumberToken extends InputToken, ComponentToken {
|
||||
inputNumberCls: string;
|
||||
inputNumberHandlerActiveBgColor: string;
|
||||
}
|
||||
|
||||
const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumberToken) => {
|
||||
const {
|
||||
inputNumberCls,
|
||||
controlLineWidth: borderWidth,
|
||||
controlLineType: borderStyle,
|
||||
colorBorder: borderColor,
|
||||
controlRadius: borderRadius,
|
||||
controlLineWidth,
|
||||
controlLineType,
|
||||
colorBorder,
|
||||
controlRadius,
|
||||
fontSizeLG,
|
||||
controlHeightLG,
|
||||
controlHeightSM,
|
||||
colorError,
|
||||
paddingXS,
|
||||
colorTextSecondary: textColorSecondary,
|
||||
motionDurationFast: durationFast,
|
||||
inputNumberHandlerActiveBgColor,
|
||||
inputPaddingHorizontalSM,
|
||||
colorTextSecondary,
|
||||
motionDurationFast,
|
||||
colorPrimary,
|
||||
marginXXS,
|
||||
controlHeight,
|
||||
inputPaddingHorizontal,
|
||||
motionDurationSlow: duration,
|
||||
colorBgComponent: componentBackground,
|
||||
motionDurationMid: durationMid,
|
||||
colorTextDisabled: textColorDisabled,
|
||||
motionDurationSlow,
|
||||
colorBgComponent,
|
||||
motionDurationMid,
|
||||
colorTextDisabled,
|
||||
controlWidth,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
return [
|
||||
{
|
||||
[inputNumberCls]: {
|
||||
...resetComponent(token),
|
||||
...genBasicInputStyle(token),
|
||||
...genStatusStyle(token),
|
||||
|
||||
display: 'inline-block',
|
||||
width: 90, // FIXME: magic number
|
||||
width: controlWidth,
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
border: `${borderWidth}px ${borderStyle} ${borderColor}`,
|
||||
borderRadius,
|
||||
border: `${controlLineWidth}px ${controlLineType} ${colorBorder}`,
|
||||
borderRadius: controlRadius,
|
||||
|
||||
'&-rtl': {
|
||||
direction: 'rtl',
|
||||
@ -70,16 +75,12 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
},
|
||||
},
|
||||
|
||||
[`&:hover ${inputNumberCls}-handler-wrap, &-focused ${inputNumberCls}-handler-wrap`]: {
|
||||
opacity: 1,
|
||||
},
|
||||
|
||||
'&-lg': {
|
||||
padding: 0,
|
||||
fontSize: fontSizeLG,
|
||||
|
||||
[`input${inputNumberCls}-input`]: {
|
||||
height: controlHeightLG - 2 * borderWidth,
|
||||
height: controlHeightLG - 2 * controlLineWidth,
|
||||
},
|
||||
},
|
||||
|
||||
@ -87,8 +88,8 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
padding: 0,
|
||||
|
||||
[`input${inputNumberCls}-input`]: {
|
||||
height: controlHeightSM - 2 * borderWidth,
|
||||
padding: `0 ${paddingXS - borderWidth}px`,
|
||||
height: controlHeightSM - 2 * controlLineWidth,
|
||||
padding: `0 ${inputPaddingHorizontalSM}px`,
|
||||
},
|
||||
},
|
||||
|
||||
@ -105,19 +106,6 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
[`${inputNumberCls}-input`]: {
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
[`${inputNumberCls}-handler-wrap`]: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
|
||||
'&-readonly': {
|
||||
[`${inputNumberCls}-handler-wrap`]: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
|
||||
'&-borderless': {
|
||||
boxShadow: 'none',
|
||||
},
|
||||
|
||||
// ===================== Out Of Range =====================
|
||||
@ -144,53 +132,18 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
},
|
||||
|
||||
[inputNumberCls]: {
|
||||
'&-handler': {
|
||||
position: 'relative',
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
height: '50%',
|
||||
overflow: 'hidden',
|
||||
color: textColorSecondary,
|
||||
fontWeight: 'bold',
|
||||
lineHeight: 0,
|
||||
textAlign: 'center',
|
||||
borderInlineStart: `${borderWidth}px ${borderStyle} ${borderColor}`,
|
||||
transition: `all ${durationFast} linear`,
|
||||
|
||||
'&:active': {
|
||||
background: inputNumberHandlerActiveBgColor,
|
||||
},
|
||||
|
||||
'&:hover &-up-inner, &:hover &-down-inner': {
|
||||
color: colorPrimary,
|
||||
},
|
||||
},
|
||||
|
||||
'&-handler-up-inner, &-handler-down-inner': {
|
||||
...resetIcon(),
|
||||
|
||||
position: 'absolute',
|
||||
insetInlineEnd: marginXXS,
|
||||
width: controlHeightSM / 2,
|
||||
height: controlHeightSM / 2,
|
||||
color: textColorSecondary,
|
||||
lineHeight: controlHeightSM / 2,
|
||||
transition: `all ${durationFast} linear`,
|
||||
userSelect: 'none',
|
||||
},
|
||||
|
||||
'&-input': {
|
||||
width: '100%',
|
||||
height: controlHeight - 2 * borderWidth,
|
||||
padding: `0 ${inputPaddingHorizontal - borderWidth}px`,
|
||||
height: controlHeight - 2 * controlLineWidth,
|
||||
padding: `0 ${inputPaddingHorizontal}px`,
|
||||
textAlign: 'start',
|
||||
backgroundColor: 'transparent',
|
||||
border: 0,
|
||||
borderRadius,
|
||||
borderRadius: controlRadius,
|
||||
outline: 0,
|
||||
transition: `all ${duration} linear`,
|
||||
appearance: 'textfield', // FIXME: important
|
||||
...genPlaceholderStyle(),
|
||||
transition: `all ${motionDurationSlow} linear`,
|
||||
appearance: 'textfield',
|
||||
...genPlaceholderStyle(token.colorPlaceholder),
|
||||
|
||||
'&[type="number"]::-webkit-inner-spin-button, &[type="number"]::-webkit-outer-spin-button':
|
||||
{
|
||||
@ -200,95 +153,137 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
appearance: 'none',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
'&-handler-wrap': {
|
||||
// Handler
|
||||
{
|
||||
[inputNumberCls]: {
|
||||
[`&:hover ${inputNumberCls}-handler-wrap, &-focused ${inputNumberCls}-handler-wrap`]: {
|
||||
opacity: 1,
|
||||
},
|
||||
|
||||
[`${inputNumberCls}-handler-wrap`]: {
|
||||
position: 'absolute',
|
||||
insetBlockStart: 0,
|
||||
insetInlineEnd: 0,
|
||||
width: 22, // FIXME: magic number
|
||||
width: token.handleWidth,
|
||||
height: '100%',
|
||||
background: componentBackground,
|
||||
background: colorBgComponent,
|
||||
borderStartStartRadius: 0,
|
||||
borderStartEndRadius: borderRadius,
|
||||
borderEndEndRadius: borderRadius,
|
||||
borderStartEndRadius: controlRadius,
|
||||
borderEndEndRadius: controlRadius,
|
||||
borderEndStartRadius: 0,
|
||||
opacity: 0,
|
||||
transition: `opacity ${durationMid} linear ${durationFast}`,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'stretch',
|
||||
transition: `opacity ${motionDurationMid} linear ${motionDurationFast}`,
|
||||
|
||||
// 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`]: {
|
||||
[`${inputNumberCls}-handler-up-inner,
|
||||
${inputNumberCls}-handler-down-inner`]: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
minWidth: 'auto',
|
||||
marinInlineEnd: 0,
|
||||
fontSize: 7, // FIXME: magic
|
||||
},
|
||||
},
|
||||
|
||||
[`${inputNumberCls}-borderless &`]: {
|
||||
borderInlineStartWidth: 0,
|
||||
},
|
||||
|
||||
[`&:hover ${inputNumberCls}-handler`]: {
|
||||
flex: 'auto',
|
||||
height: '40%',
|
||||
|
||||
[`
|
||||
${inputNumberCls}-handler-up-inner,
|
||||
${inputNumberCls}-handler-down-inner
|
||||
`]: {
|
||||
marginInlineEnd: 0,
|
||||
fontSize: token.handleFontSize,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
'&-handler-up': {
|
||||
borderStartEndRadius: borderRadius,
|
||||
cursor: 'pointer',
|
||||
|
||||
'&-inner': {
|
||||
top: '50%',
|
||||
marginTop: -5, // FIXME: magic
|
||||
[`${inputNumberCls}-handler`]: {
|
||||
height: '50%',
|
||||
overflow: 'hidden',
|
||||
color: colorTextSecondary,
|
||||
fontWeight: 'bold',
|
||||
lineHeight: 0,
|
||||
textAlign: 'center',
|
||||
},
|
||||
|
||||
'&:hover': {
|
||||
height: '60% !important',
|
||||
},
|
||||
},
|
||||
|
||||
'&-handler-down': {
|
||||
top: 0,
|
||||
borderBlockStart: `${borderWidth}px ${borderStyle} ${borderColor}`,
|
||||
borderEndEndRadius: borderRadius,
|
||||
cursor: 'pointer',
|
||||
|
||||
'&-inner': {
|
||||
top: '50%',
|
||||
textAlign: 'center',
|
||||
transform: 'translateY(-50%)',
|
||||
borderInlineStart: `${controlLineWidth}px ${controlLineType} ${colorBorder}`,
|
||||
transition: `all ${motionDurationFast} linear`,
|
||||
'&:active': {
|
||||
background: token.colorBgComponentSecondary,
|
||||
},
|
||||
|
||||
// Hover
|
||||
'&:hover': {
|
||||
height: '60% !important',
|
||||
height: `60%`,
|
||||
|
||||
[`
|
||||
${inputNumberCls}-handler-up-inner,
|
||||
${inputNumberCls}-handler-down-inner
|
||||
`]: {
|
||||
color: colorPrimary,
|
||||
},
|
||||
},
|
||||
|
||||
[`${inputNumberCls}-borderless &`]: {
|
||||
borderBlockStartWidth: 0,
|
||||
'&-up-inner, &-down-inner': {
|
||||
...resetIcon(),
|
||||
|
||||
color: colorTextSecondary,
|
||||
transition: `all ${motionDurationFast} linear`,
|
||||
userSelect: 'none',
|
||||
},
|
||||
},
|
||||
'&-handler-up-disabled, &-handler-down-disabled': {
|
||||
|
||||
[`${inputNumberCls}-handler-up`]: {
|
||||
borderStartEndRadius: controlRadius,
|
||||
},
|
||||
|
||||
[`${inputNumberCls}-handler-down`]: {
|
||||
borderBlockStart: `${controlLineWidth}px ${controlLineType} ${colorBorder}`,
|
||||
borderEndEndRadius: controlRadius,
|
||||
},
|
||||
|
||||
// Disabled
|
||||
'&-disabled, &-readonly': {
|
||||
[`${inputNumberCls}-handler-wrap`]: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
|
||||
[`
|
||||
${inputNumberCls}-handler-up-disabled,
|
||||
${inputNumberCls}-handler-down-disabled
|
||||
`]: {
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
|
||||
[`&-handler-up-disabled:hover &-handler-up-inner,
|
||||
&-handler-down-disabled:hover &-handler-down-inner`]: {
|
||||
color: textColorDisabled,
|
||||
[`
|
||||
${inputNumberCls}-handler-up-disabled:hover &-handler-up-inner,
|
||||
${inputNumberCls}-handler-down-disabled:hover &-handler-down-inner
|
||||
`]: {
|
||||
color: colorTextDisabled,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Border-less
|
||||
{
|
||||
[`${inputNumberCls}-borderless`]: {
|
||||
borderColor: 'transparent',
|
||||
boxShadow: 'none',
|
||||
|
||||
[`${inputNumberCls}-handler-down`]: {
|
||||
borderBlockStartWidth: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumberToken) => {
|
||||
const { inputNumberCls, inputPaddingHorizontal, inputAffixMargin } = token;
|
||||
const { inputNumberCls, inputPaddingHorizontal, inputAffixPadding, controlWidth } = token;
|
||||
|
||||
return {
|
||||
[`${inputNumberCls}-affix-wrapper`]: {
|
||||
@ -297,7 +292,7 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
|
||||
// or number handler will cover form status
|
||||
position: 'relative',
|
||||
display: 'inline-flex',
|
||||
width: 90, // FIXME: magic
|
||||
width: controlWidth,
|
||||
padding: 0,
|
||||
paddingInlineStart: inputPaddingHorizontal,
|
||||
|
||||
@ -349,7 +344,7 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
|
||||
},
|
||||
|
||||
'&-prefix': {
|
||||
marginInlineEnd: inputAffixMargin,
|
||||
marginInlineEnd: inputAffixPadding,
|
||||
},
|
||||
|
||||
'&-suffix': {
|
||||
@ -359,7 +354,7 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
|
||||
zIndex: 1,
|
||||
height: '100%',
|
||||
marginInlineEnd: inputPaddingHorizontal,
|
||||
marginInlineStart: inputAffixMargin,
|
||||
marginInlineStart: inputAffixPadding,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -373,17 +368,23 @@ export default function useStyle(
|
||||
): 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}`,
|
||||
inputNumberHandlerActiveBgColor: '#f4f4f4', // FIXME: magic number
|
||||
|
||||
controlWidth: 90,
|
||||
handleWidth: controlHeightSM - controlLineWidth * 2,
|
||||
handleFontSize: fontSize / 2,
|
||||
|
||||
...InputNumber,
|
||||
};
|
||||
|
||||
return [
|
||||
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
|
||||
genInputNumberStyles(inputNumberToken),
|
||||
genAffixWrapperStyles(inputNumberToken),
|
||||
]),
|
||||
return [genInputNumberStyles(inputNumberToken), genAffixWrapperStyles(inputNumberToken)];
|
||||
}),
|
||||
hashId,
|
||||
];
|
||||
}
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
// deps-lint-skip-all
|
||||
import { CSSObject } from '@ant-design/cssinjs';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import {
|
||||
clearFix,
|
||||
DerivativeToken,
|
||||
@ -14,19 +13,17 @@ import {
|
||||
export interface InputToken extends DerivativeToken {
|
||||
prefixCls: string;
|
||||
iconPrefixCls: string;
|
||||
inputAffixMargin: number;
|
||||
inputAffixPadding: number;
|
||||
inputPaddingVertical: number;
|
||||
inputPaddingVerticalLG: number;
|
||||
inputPaddingVerticalSM: number;
|
||||
inputPaddingHorizontal: number;
|
||||
inputPaddingHorizontalSM: number;
|
||||
inputBorderHoverColor: string;
|
||||
inputBorderActiveColor: string;
|
||||
}
|
||||
|
||||
// FIXME: magic color string
|
||||
export const genPlaceholderStyle = (
|
||||
color: string = new TinyColor({ h: 0, s: 0, v: '75%' }).toHexString(),
|
||||
): CSSObject => ({
|
||||
export const genPlaceholderStyle = (color: string): CSSObject => ({
|
||||
// Firefox
|
||||
'&::-moz-placeholder': {
|
||||
opacity: 1,
|
||||
@ -137,7 +134,7 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({
|
||||
borderColor: token.colorBorder,
|
||||
borderRadius: token.controlRadius,
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
...genPlaceholderStyle(),
|
||||
...genPlaceholderStyle(token.colorPlaceholder),
|
||||
|
||||
'&:hover': {
|
||||
...genHoverStyle(token),
|
||||
@ -236,7 +233,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
|
||||
[`.${prefixCls}-group`]: {
|
||||
[`&-addon, &-wrap`]: {
|
||||
display: 'table-cell',
|
||||
width: 1, // FIXME: magic number
|
||||
width: 1,
|
||||
whiteSpace: 'nowrap',
|
||||
verticalAlign: 'middle',
|
||||
|
||||
@ -465,7 +462,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
|
||||
},
|
||||
|
||||
[`.${prefixCls}-group-wrapper + .${prefixCls}-group-wrapper`]: {
|
||||
marginInlineStart: -1, // FIXME: magic number
|
||||
marginInlineStart: -token.controlLineWidth,
|
||||
[`.${prefixCls}-affix-wrapper`]: {
|
||||
borderRadius: 0,
|
||||
},
|
||||
@ -490,7 +487,11 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
|
||||
};
|
||||
|
||||
const genInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
|
||||
const { prefixCls } = token;
|
||||
const { prefixCls, controlHeightSM, controlLineWidth } = token;
|
||||
|
||||
const FIXED_CHROME_COLOR_HEIGHT = 16;
|
||||
const colorSmallPadding =
|
||||
(controlHeightSM - controlLineWidth * 2 - FIXED_CHROME_COLOR_HEIGHT) / 2;
|
||||
|
||||
return {
|
||||
[`.${prefixCls}`]: {
|
||||
@ -505,9 +506,9 @@ const genInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
|
||||
height: token.controlHeightLG,
|
||||
},
|
||||
[`&.${prefixCls}-sm`]: {
|
||||
height: token.controlHeightSM,
|
||||
paddingTop: 3, // FIXME: magic number
|
||||
paddingBottom: 3, // FIXME: magic number
|
||||
height: controlHeightSM,
|
||||
paddingTop: colorSmallPadding,
|
||||
paddingBottom: colorSmallPadding,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -521,8 +522,8 @@ const genAllowClearStyle = (token: InputToken): CSSObject => {
|
||||
[`.${prefixCls}-clear-icon`]: {
|
||||
margin: 0,
|
||||
color: token.colorTextDisabled,
|
||||
fontSize: token.fontSizeSM,
|
||||
verticalAlign: -1, // FIXME: magic number
|
||||
fontSize: token.fontSizeIcon,
|
||||
verticalAlign: -1,
|
||||
// https://github.com/ant-design/ant-design/pull/18151
|
||||
// https://codesandbox.io/s/wizardly-sun-u10br
|
||||
cursor: 'pointer',
|
||||
@ -541,7 +542,7 @@ const genAllowClearStyle = (token: InputToken): CSSObject => {
|
||||
},
|
||||
|
||||
'&-has-suffix': {
|
||||
margin: `0 ${token.inputAffixMargin}px`,
|
||||
margin: `0 ${token.inputAffixPadding}px`,
|
||||
},
|
||||
},
|
||||
|
||||
@ -564,7 +565,7 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
|
||||
const {
|
||||
prefixCls,
|
||||
iconPrefixCls,
|
||||
inputAffixMargin,
|
||||
inputAffixPadding,
|
||||
colorTextSecondary,
|
||||
motionDurationSlow,
|
||||
colorAction,
|
||||
@ -617,7 +618,7 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
|
||||
alignItems: 'center',
|
||||
|
||||
'> *:not(:last-child)': {
|
||||
marginInlineEnd: 8, // FIXME: magic number
|
||||
marginInlineEnd: token.paddingXS,
|
||||
},
|
||||
},
|
||||
|
||||
@ -626,15 +627,15 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
|
||||
},
|
||||
|
||||
'&-show-count-has-suffix': {
|
||||
marginInlineEnd: token.marginXXS,
|
||||
marginInlineEnd: token.paddingXXS,
|
||||
},
|
||||
|
||||
'&-prefix': {
|
||||
marginInlineEnd: inputAffixMargin,
|
||||
marginInlineEnd: inputAffixPadding,
|
||||
},
|
||||
|
||||
'&-suffix': {
|
||||
marginInlineStart: inputAffixMargin,
|
||||
marginInlineStart: inputAffixPadding,
|
||||
},
|
||||
},
|
||||
|
||||
@ -783,7 +784,7 @@ export const initInputToken = (
|
||||
...token,
|
||||
prefixCls,
|
||||
iconPrefixCls,
|
||||
inputAffixMargin: token.marginXS,
|
||||
inputAffixPadding: token.paddingXXS,
|
||||
inputPaddingVertical: Math.max(
|
||||
Math.round(((token.controlHeight - token.fontSize * token.lineHeight) / 2) * 10) / 10 -
|
||||
token.controlLineWidth,
|
||||
@ -798,6 +799,7 @@ export const initInputToken = (
|
||||
0,
|
||||
),
|
||||
inputPaddingHorizontal: token.controlPaddingHorizontal - token.controlLineWidth,
|
||||
inputPaddingHorizontalSM: token.controlPaddingHorizontalSM - token.controlLineWidth,
|
||||
inputBorderHoverColor: token.colorPrimaryHover,
|
||||
inputBorderActiveColor: token.colorPrimaryHover,
|
||||
});
|
||||
@ -808,6 +810,8 @@ const genTextAreaStyle: GenerateStyle<InputToken> = token => {
|
||||
|
||||
return {
|
||||
[textareaPrefixCls]: {
|
||||
position: 'relative',
|
||||
|
||||
[`${textareaPrefixCls}-suffix`]: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
@ -837,12 +841,15 @@ const genTextAreaStyle: GenerateStyle<InputToken> = token => {
|
||||
},
|
||||
|
||||
'&::after': {
|
||||
textAlign: 'end',
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
insetInlineEnd: 0,
|
||||
color: token.colorTextSecondary,
|
||||
whiteSpace: 'nowrap',
|
||||
content: 'attr(data-count)',
|
||||
pointerEvents: 'none',
|
||||
display: 'block',
|
||||
transform: 'translateY(100%)',
|
||||
},
|
||||
|
||||
[`&${textareaPrefixCls}-in-form-item`]: {
|
||||
@ -862,16 +869,18 @@ export default function useStyle(
|
||||
): UseComponentStyleResult {
|
||||
const [theme, token, hashId] = useToken();
|
||||
|
||||
return [
|
||||
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => {
|
||||
const inputToken: InputToken = initInputToken(token, prefixCls, iconPrefixCls);
|
||||
|
||||
return [
|
||||
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
|
||||
genInputStyle(inputToken),
|
||||
genTextAreaStyle(inputToken),
|
||||
genAffixStyle(inputToken),
|
||||
genGroupStyle(inputToken),
|
||||
genSearchInputStyle(inputToken),
|
||||
]),
|
||||
];
|
||||
}),
|
||||
hashId,
|
||||
];
|
||||
}
|
||||
|
||||
@ -15,7 +15,13 @@ import {
|
||||
InputToken,
|
||||
} from '../../input/style';
|
||||
|
||||
interface MentionsToken extends InputToken {
|
||||
export interface ComponentToken {
|
||||
zIndexDropdown: number;
|
||||
dropdownHeight: number;
|
||||
controlItemWidth: number;
|
||||
}
|
||||
|
||||
interface MentionsToken extends InputToken, ComponentToken {
|
||||
mentionsCls: string;
|
||||
}
|
||||
|
||||
@ -37,6 +43,10 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
|
||||
boxShadow,
|
||||
} = token;
|
||||
|
||||
const itemPaddingVertical = Math.round(
|
||||
(token.controlHeight - token.fontSize * token.lineHeight) / 2,
|
||||
);
|
||||
|
||||
return {
|
||||
[`${mentionsCls}`]: {
|
||||
...resetComponent(token),
|
||||
@ -103,7 +113,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
|
||||
border: 'none',
|
||||
outline: 'none',
|
||||
resize: 'none',
|
||||
...genPlaceholderStyle(),
|
||||
...genPlaceholderStyle(token.colorPlaceholder),
|
||||
},
|
||||
|
||||
[`${mentionsCls}-measure`]: {
|
||||
@ -130,7 +140,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
|
||||
position: 'absolute',
|
||||
top: -9999,
|
||||
insetInlineStart: -9999,
|
||||
zIndex: 1050, // FIXME: magic
|
||||
zIndex: token.zIndexDropdown,
|
||||
boxSizing: 'border-box',
|
||||
fontSize,
|
||||
fontVariant: 'initial',
|
||||
@ -144,7 +154,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
|
||||
},
|
||||
|
||||
[`${mentionsCls}-dropdown-menu`]: {
|
||||
maxHeight: 250, // FIXME: magic
|
||||
maxHeight: token.dropdownHeight,
|
||||
marginBottom: 0,
|
||||
paddingInlineStart: 0, // Override default ul/ol
|
||||
overflow: 'auto',
|
||||
@ -154,8 +164,8 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
|
||||
'&-item': {
|
||||
position: 'relative',
|
||||
display: 'block',
|
||||
minWidth: 100, // FIXME: magic
|
||||
padding: `5px ${controlPaddingHorizontal}px`, // FIXME: magic
|
||||
minWidth: token.controlItemWidth,
|
||||
padding: `${itemPaddingVertical}px ${controlPaddingHorizontal}px`,
|
||||
overflow: 'hidden',
|
||||
color: colorText,
|
||||
fontWeight: 'normal',
|
||||
@ -196,7 +206,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
|
||||
|
||||
'&-selected': {
|
||||
color: colorText,
|
||||
fontWeight: 600, // FIXME: Need design token?
|
||||
fontWeight: token.fontWeightStrong,
|
||||
backgroundColor: controlItemBgHover,
|
||||
},
|
||||
|
||||
@ -217,15 +227,24 @@ export default function useStyle(
|
||||
): 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 [
|
||||
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
|
||||
genMentionsStyle(mentionsToken),
|
||||
]),
|
||||
return [genMentionsStyle(mentionsToken)];
|
||||
}),
|
||||
hashId,
|
||||
];
|
||||
}
|
||||
|
||||
@ -59,7 +59,6 @@ const genBaseStyle: GenerateStyle<PopoverToken> = token => {
|
||||
lineHeight,
|
||||
radiusBase: borderRadius,
|
||||
paddingSM,
|
||||
zIndexPopover,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
@ -68,7 +67,7 @@ const genBaseStyle: GenerateStyle<PopoverToken> = token => {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
insetInlineStart: 0,
|
||||
zIndex: zIndexPopover,
|
||||
zIndex: 1030, // FIXME: hardcode
|
||||
fontWeight: 'normal',
|
||||
whiteSpace: 'normal',
|
||||
textAlign: 'start',
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
import '../../empty/style';
|
||||
|
||||
// deps-lint-skip-all
|
||||
import { CSSObject, CSSInterpolation } from '@ant-design/cssinjs';
|
||||
import { CSSObject } from '@ant-design/cssinjs';
|
||||
import {
|
||||
DerivativeToken,
|
||||
useStyleRegister,
|
||||
@ -19,14 +19,17 @@ import genSingleStyle from './single';
|
||||
import genMultipleStyle from './multiple';
|
||||
import genDropdownStyle from './dropdown';
|
||||
|
||||
export type SelectToken = DerivativeToken & {
|
||||
export interface ComponentToken {
|
||||
zIndexDropdown: number;
|
||||
}
|
||||
|
||||
export interface SelectToken extends DerivativeToken, ComponentToken {
|
||||
rootPrefixCls: string;
|
||||
antCls: string;
|
||||
selectCls: string;
|
||||
iconPrefixCls: string;
|
||||
inputPaddingHorizontalBase: number;
|
||||
zIndexDropdown: number;
|
||||
};
|
||||
}
|
||||
|
||||
// ============================= Selector =============================
|
||||
const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = token => {
|
||||
@ -178,10 +181,10 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
|
||||
top: '50%',
|
||||
insetInlineStart: 'auto',
|
||||
insetInlineEnd: inputPaddingHorizontalBase,
|
||||
height: token.fontSizeSM,
|
||||
marginTop: -token.fontSizeSM / 2,
|
||||
height: token.fontSizeIcon,
|
||||
marginTop: -token.fontSizeIcon / 2,
|
||||
color: token.colorTextDisabled,
|
||||
fontSize: token.fontSizeSM,
|
||||
fontSize: token.fontSizeIcon,
|
||||
lineHeight: 1,
|
||||
textAlign: 'center',
|
||||
pointerEvents: 'none',
|
||||
@ -218,11 +221,11 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
|
||||
insetInlineEnd: inputPaddingHorizontalBase,
|
||||
zIndex: 1,
|
||||
display: 'inline-block',
|
||||
width: token.fontSizeSM,
|
||||
height: token.fontSizeSM,
|
||||
marginTop: -token.fontSizeSM / 2,
|
||||
width: token.fontSizeIcon,
|
||||
height: token.fontSizeIcon,
|
||||
marginTop: -token.fontSizeIcon / 2,
|
||||
color: token.colorTextDisabled,
|
||||
fontSize: token.fontSizeSM,
|
||||
fontSize: token.fontSizeIcon,
|
||||
fontStyle: 'normal',
|
||||
lineHeight: 1,
|
||||
textAlign: 'center',
|
||||
@ -259,27 +262,8 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
|
||||
};
|
||||
|
||||
// ============================== Styles ==============================
|
||||
const genSelectStyle = (
|
||||
rootPrefixCls: string,
|
||||
prefixCls: string,
|
||||
iconPrefixCls: string,
|
||||
token: DerivativeToken,
|
||||
hashId: string,
|
||||
): CSSInterpolation => {
|
||||
const antCls = `.${rootPrefixCls}`;
|
||||
const selectCls = `.${prefixCls}`;
|
||||
|
||||
const inputPaddingHorizontalBase = token.controlPaddingHorizontal - 1;
|
||||
|
||||
const selectToken: SelectToken = {
|
||||
...token,
|
||||
rootPrefixCls,
|
||||
antCls,
|
||||
selectCls,
|
||||
iconPrefixCls,
|
||||
inputPaddingHorizontalBase,
|
||||
zIndexDropdown: token.zIndexPopup + 50,
|
||||
};
|
||||
const genSelectStyle: GenerateStyle<SelectToken> = (token, hashId) => {
|
||||
const { selectCls } = token;
|
||||
|
||||
return [
|
||||
{
|
||||
@ -302,16 +286,16 @@ const genSelectStyle = (
|
||||
// == LTR ==
|
||||
// =====================================================
|
||||
// Base
|
||||
genBaseStyle(selectToken),
|
||||
genBaseStyle(token),
|
||||
|
||||
// Single
|
||||
genSingleStyle(selectToken),
|
||||
genSingleStyle(token),
|
||||
|
||||
// Multiple
|
||||
genMultipleStyle(selectToken),
|
||||
genMultipleStyle(token),
|
||||
|
||||
// Dropdown
|
||||
genDropdownStyle(selectToken, hashId),
|
||||
genDropdownStyle(token, hashId),
|
||||
|
||||
// =====================================================
|
||||
// == RTL ==
|
||||
@ -326,14 +310,14 @@ const genSelectStyle = (
|
||||
// == Status ==
|
||||
// =====================================================
|
||||
genStatusStyle(selectCls, {
|
||||
...selectToken,
|
||||
...token,
|
||||
borderHoverColor: token.colorPrimaryHover,
|
||||
outlineColor: token.colorPrimaryOutline,
|
||||
}),
|
||||
genStatusStyle(
|
||||
`${selectCls}-status-error`,
|
||||
{
|
||||
...selectToken,
|
||||
...token,
|
||||
borderHoverColor: token.colorErrorHover,
|
||||
outlineColor: token.colorErrorOutline,
|
||||
},
|
||||
@ -342,7 +326,7 @@ const genSelectStyle = (
|
||||
genStatusStyle(
|
||||
`${selectCls}-status-warning`,
|
||||
{
|
||||
...selectToken,
|
||||
...token,
|
||||
borderHoverColor: token.colorWarningHover,
|
||||
outlineColor: token.colorWarningOutline,
|
||||
},
|
||||
@ -360,9 +344,29 @@ export default function useStyle(
|
||||
const [theme, token, hashId] = useToken();
|
||||
|
||||
return [
|
||||
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
|
||||
genSelectStyle(rootPrefixCls, prefixCls, iconPrefixCls, token, hashId),
|
||||
]),
|
||||
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => {
|
||||
const { zIndexPopup, Select } = token;
|
||||
|
||||
const antCls = `.${rootPrefixCls}`;
|
||||
const selectCls = `.${prefixCls}`;
|
||||
|
||||
const inputPaddingHorizontalBase = token.controlPaddingHorizontal - 1;
|
||||
|
||||
const selectToken: SelectToken = {
|
||||
...token,
|
||||
|
||||
rootPrefixCls,
|
||||
antCls,
|
||||
selectCls,
|
||||
iconPrefixCls,
|
||||
inputPaddingHorizontalBase,
|
||||
zIndexDropdown: zIndexPopup + 50,
|
||||
|
||||
...Select,
|
||||
};
|
||||
|
||||
return [genSelectStyle(selectToken, hashId)];
|
||||
}),
|
||||
hashId,
|
||||
];
|
||||
}
|
||||
|
||||
@ -78,7 +78,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
|
||||
&${selectCls}-show-arrow ${selectCls}-selector,
|
||||
&${selectCls}-allow-clear ${selectCls}-selector
|
||||
`]: {
|
||||
paddingInlineEnd: token.fontSizeSM + token.controlPaddingHorizontal,
|
||||
paddingInlineEnd: token.fontSizeIcon + token.controlPaddingHorizontal,
|
||||
},
|
||||
|
||||
// ======================== Selections ========================
|
||||
|
||||
@ -7,7 +7,6 @@
|
||||
// deps-lint-skip-all
|
||||
import * as React from 'react';
|
||||
import { CSSObject } from '@ant-design/cssinjs';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import {
|
||||
DerivativeToken,
|
||||
useStyleRegister,
|
||||
@ -17,32 +16,46 @@ import {
|
||||
resetComponent,
|
||||
} from '../../_util/theme';
|
||||
|
||||
interface SliderToken extends DerivativeToken {
|
||||
sliderCls: string;
|
||||
handleSize: number;
|
||||
sliderSize: number;
|
||||
// Direction naming standard:
|
||||
// Horizontal base:
|
||||
// -0-------------
|
||||
// vertical: part (水平时，垂直方向命名为 part)
|
||||
// horizontal: full (水平时，水平方向命名为 full)
|
||||
|
||||
export interface ComponentToken {
|
||||
controlSize: number;
|
||||
railSize: number;
|
||||
handleSize: number;
|
||||
lineHandleWidth: number;
|
||||
dotSize: number;
|
||||
}
|
||||
|
||||
interface SliderToken extends DerivativeToken, ComponentToken {
|
||||
sliderCls: string;
|
||||
marginFull: number;
|
||||
marginPart: number;
|
||||
marginPartWithMark: number;
|
||||
}
|
||||
|
||||
// =============================== Base ===============================
|
||||
const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
const { sliderCls, sliderSize, dotSize } = token;
|
||||
|
||||
const FIXED_RAIL_HOVER_COLOR = '#e1e1e1';
|
||||
const { sliderCls, controlSize, dotSize, marginFull, marginPart, colorBgContainerSecondary } =
|
||||
token;
|
||||
|
||||
return {
|
||||
[sliderCls]: {
|
||||
...resetComponent(token),
|
||||
|
||||
position: 'relative',
|
||||
height: sliderSize,
|
||||
margin: '10px 6px', // FIXME: hard code in v4
|
||||
height: controlSize,
|
||||
margin: `${marginPart}px ${marginFull}px`,
|
||||
padding: 0,
|
||||
cursor: 'pointer',
|
||||
touchAction: 'none',
|
||||
|
||||
// .vertical();
|
||||
[`&-vertical`]: {
|
||||
margin: `${marginFull}px ${marginPart}px`,
|
||||
},
|
||||
|
||||
[`${sliderCls}-rail`]: {
|
||||
position: 'absolute',
|
||||
@ -63,7 +76,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
width: token.handleSize,
|
||||
height: token.handleSize,
|
||||
backgroundColor: token.colorBgComponent,
|
||||
border: `2px solid ${token.colorPrimarySecondary}`,
|
||||
border: `${token.lineHandleWidth}px solid ${token.colorPrimarySecondary}`,
|
||||
borderRadius: '50%',
|
||||
boxShadow: 'none',
|
||||
cursor: 'pointer',
|
||||
@ -84,13 +97,10 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
},
|
||||
|
||||
'&:focus-visible': {
|
||||
// FIXME: This is a inline color calculation
|
||||
boxShadow: `0 0 0 5px ${new TinyColor(token.colorPrimaryHover)
|
||||
.setAlpha(0.2)
|
||||
.toRgbString()}`,
|
||||
boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.colorPrimarySecondary}`,
|
||||
},
|
||||
|
||||
// FIXME: Seems useless?
|
||||
// Seems useless?
|
||||
// &.@{ant-prefix}-tooltip-open {
|
||||
// border-color: @slider-handle-color-tooltip-open;
|
||||
// }
|
||||
@ -98,18 +108,18 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
|
||||
'&:hover': {
|
||||
[`${sliderCls}-rail`]: {
|
||||
backgroundColor: FIXED_RAIL_HOVER_COLOR, // FIXME: Not match color
|
||||
backgroundColor: colorBgContainerSecondary,
|
||||
},
|
||||
|
||||
[`${sliderCls}-track`]: {
|
||||
backgroundColor: token.colorPrimaryHover, // FIXME: origin primary-4
|
||||
backgroundColor: token.colorPrimaryHover,
|
||||
},
|
||||
|
||||
[`${sliderCls}-dot`]: {
|
||||
borderColor: FIXED_RAIL_HOVER_COLOR,
|
||||
borderColor: colorBgContainerSecondary,
|
||||
},
|
||||
|
||||
// FIXME: We use below style instead
|
||||
// We use below style instead
|
||||
// ${sliderCls}-handle:not(.@{ant-prefix}-tooltip-open) {
|
||||
// border-color: @slider-handle-color-hover;
|
||||
// }
|
||||
@ -152,7 +162,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
width: dotSize,
|
||||
height: dotSize,
|
||||
backgroundColor: token.colorBgComponent,
|
||||
border: `2px solid ${token.colorSplit}`, // FIXME: hardcode in v4
|
||||
border: `${token.lineHandleWidth}px solid ${token.colorSplit}`,
|
||||
borderRadius: '50%',
|
||||
cursor: 'pointer',
|
||||
transition: `border-color ${token.motionDurationSlow}`,
|
||||
@ -196,28 +206,29 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
|
||||
// ============================ Horizontal ============================
|
||||
const genDirectionStyle = (token: SliderToken, horizontal: boolean): CSSObject => {
|
||||
const { sliderCls, railSize, sliderSize, handleSize, dotSize } = token;
|
||||
const { sliderCls, railSize, controlSize, handleSize, dotSize } = token;
|
||||
|
||||
const railPadding: keyof React.CSSProperties = horizontal ? 'paddingBlock' : 'paddingInline';
|
||||
const stretch: keyof React.CSSProperties = horizontal ? 'width' : 'height';
|
||||
const contain: keyof React.CSSProperties = horizontal ? 'height' : 'width';
|
||||
const full: keyof React.CSSProperties = horizontal ? 'width' : 'height';
|
||||
const part: keyof React.CSSProperties = horizontal ? 'height' : 'width';
|
||||
const handlePos: keyof React.CSSProperties = horizontal ? 'insetBlockStart' : 'insetInlineStart';
|
||||
const markInset: keyof React.CSSProperties = horizontal ? 'top' : 'insetInlineStart';
|
||||
|
||||
return {
|
||||
[railPadding]: railSize,
|
||||
[part]: controlSize,
|
||||
|
||||
[`${sliderCls}-rail`]: {
|
||||
[stretch]: '100%',
|
||||
[contain]: railSize,
|
||||
[full]: '100%',
|
||||
[part]: railSize,
|
||||
},
|
||||
|
||||
[`${sliderCls}-track`]: {
|
||||
[contain]: railSize,
|
||||
[part]: railSize,
|
||||
},
|
||||
|
||||
[`${sliderCls}-handle`]: {
|
||||
[handlePos]: (sliderSize - handleSize) / 2,
|
||||
[handlePos]: (controlSize - handleSize) / 2,
|
||||
},
|
||||
|
||||
[`${sliderCls}-mark`]: {
|
||||
@ -225,7 +236,7 @@ const genDirectionStyle = (token: SliderToken, horizontal: boolean): CSSObject =
|
||||
insetInlineStart: 0,
|
||||
top: 0,
|
||||
[markInset]: handleSize,
|
||||
[stretch]: '100%',
|
||||
[full]: '100%',
|
||||
},
|
||||
|
||||
[`${sliderCls}-step`]: {
|
||||
@ -233,8 +244,8 @@ const genDirectionStyle = (token: SliderToken, horizontal: boolean): CSSObject =
|
||||
insetInlineStart: 0,
|
||||
top: 0,
|
||||
[markInset]: railSize,
|
||||
[stretch]: '100%',
|
||||
[contain]: railSize,
|
||||
[full]: '100%',
|
||||
[part]: railSize,
|
||||
},
|
||||
|
||||
[`${sliderCls}-dot`]: {
|
||||
@ -245,14 +256,14 @@ const genDirectionStyle = (token: SliderToken, horizontal: boolean): CSSObject =
|
||||
};
|
||||
// ============================ Horizontal ============================
|
||||
const genHorizontalStyle: GenerateStyle<SliderToken> = token => {
|
||||
const { sliderCls } = token;
|
||||
const { sliderCls, marginPartWithMark } = token;
|
||||
|
||||
return {
|
||||
[`${sliderCls}-horizontal`]: {
|
||||
...genDirectionStyle(token, true),
|
||||
|
||||
[`&${sliderCls}-with-marks`]: {
|
||||
marginBottom: 28, // FIXME: hard code in v4
|
||||
marginBottom: marginPartWithMark,
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -274,23 +285,38 @@ const genVerticalStyle: GenerateStyle<SliderToken> = token => {
|
||||
export default function useStyle(prefixCls: string): UseComponentStyleResult {
|
||||
const [theme, token, hashId] = useToken();
|
||||
|
||||
const sliderSize = 12; // FIXME: hard code in v4
|
||||
return [
|
||||
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => {
|
||||
const { controlHeightSM, controlHeightLG, controlHeight, lineWidth, Slider } = token;
|
||||
|
||||
// Handle line width is always width-er 1px
|
||||
const increaseHandleWidth = 1;
|
||||
const controlSize = controlHeightSM / 2;
|
||||
const lineHandleWidth = lineWidth + increaseHandleWidth;
|
||||
|
||||
const sliderToken: SliderToken = {
|
||||
...token,
|
||||
sliderCls: `.${prefixCls}`,
|
||||
handleSize: 14, // FIXME: hard code in v4
|
||||
sliderSize,
|
||||
railSize: sliderSize / 3,
|
||||
dotSize: 8,
|
||||
|
||||
controlSize,
|
||||
railSize: controlSize / 3,
|
||||
handleSize: controlSize + lineHandleWidth,
|
||||
dotSize: (controlSize / 3) * 2,
|
||||
lineHandleWidth,
|
||||
|
||||
marginPart: (controlHeight - controlSize) / 2,
|
||||
marginFull: controlSize / 2,
|
||||
marginPartWithMark: controlHeightLG - controlSize,
|
||||
|
||||
...Slider,
|
||||
};
|
||||
|
||||
return [
|
||||
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
|
||||
genBaseStyle(sliderToken, hashId),
|
||||
genHorizontalStyle(sliderToken),
|
||||
genVerticalStyle(sliderToken),
|
||||
]),
|
||||
];
|
||||
}),
|
||||
hashId,
|
||||
];
|
||||
}
|
||||
|
||||
@ -126,7 +126,7 @@ export default function useStyle(prefixCls: string): UseComponentStyleResult {
|
||||
|
||||
return [
|
||||
useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => {
|
||||
const { typography } = token;
|
||||
const { Typography } = token;
|
||||
|
||||
const typographyToken: TypographyToken = {
|
||||
...token,
|
||||
@ -136,7 +136,7 @@ export default function useStyle(prefixCls: string): UseComponentStyleResult {
|
||||
sizeMarginHeadingVerticalStart: '1.2em',
|
||||
sizeMarginHeadingVerticalEnd: '0.5em',
|
||||
|
||||
...typography,
|
||||
...Typography,
|
||||
};
|
||||
|
||||
return [genTypographyStyle(typographyToken)];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user