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