mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-02 15:59:38 +08:00
aefba96f13
* refactor: Transfer cssinjs * chore: add fixme * chore: fix lint * chore: fix lint * chore: bundle size * chore: fix test * refactor: adjust status style
406 lines
11 KiB
TypeScript
406 lines
11 KiB
TypeScript
// import '../../style/index.less';
|
|
// import './index.less';
|
|
|
|
// style dependencies
|
|
// import '../../empty/style';
|
|
// import '../../checkbox/style';
|
|
// import '../../button/style';
|
|
// import '../../input/style';
|
|
// import '../../menu/style';
|
|
// import '../../dropdown/style';
|
|
// import '../../pagination/style';
|
|
|
|
// deps-lint-skip: form
|
|
|
|
// deps-lint-skip-all
|
|
import type { CSSObject } from '@ant-design/cssinjs';
|
|
import { TinyColor } from '@ctrl/tinycolor';
|
|
|
|
import {
|
|
resetComponent,
|
|
genComponentStyleHook,
|
|
mergeToken,
|
|
operationUnit,
|
|
} from '../../_util/theme';
|
|
import type { FullToken, GenerateStyle } from '../../_util/theme';
|
|
|
|
import { genHoverStyle, genActiveStyle, initInputToken } from '../../input/style';
|
|
import type { InputToken } from '../../input/style';
|
|
|
|
// FIXME: need full token check
|
|
type TransferToken = InputToken<FullToken<'Transfer'>> & {
|
|
borderColorBase: string;
|
|
borderColorSplit: string;
|
|
heightBase: number;
|
|
disabledColor: string;
|
|
backgroundColorLight: string;
|
|
transferListHeight: number;
|
|
transferHeaderHeight: number;
|
|
transferHeaderVerticalPadding: number;
|
|
transferItemPaddingVertical: number;
|
|
transferItemSelectedHoverBg: string;
|
|
};
|
|
|
|
const genTransferCustomizeStyle: GenerateStyle<TransferToken> = (
|
|
token: TransferToken,
|
|
): CSSObject => {
|
|
const { antCls, componentCls, borderColorSplit, backgroundColorLight, transferListHeight } =
|
|
token;
|
|
|
|
const tableCls = `${antCls}-table`;
|
|
const inputCls = `${antCls}-input`;
|
|
|
|
return {
|
|
[`${componentCls}-customize-list`]: {
|
|
[`${componentCls}-list`]: {
|
|
flex: '1 1 50%',
|
|
width: 'auto',
|
|
height: 'auto',
|
|
minHeight: transferListHeight,
|
|
},
|
|
|
|
// =================== Hook Components ===================
|
|
[`${tableCls}-wrapper`]: {
|
|
[`${tableCls}-small`]: {
|
|
border: 0,
|
|
borderRadius: 0,
|
|
|
|
[`${tableCls}-selection-column`]: {
|
|
width: 40, // FIXME: hardcode in v4,
|
|
minWidth: 40, // FIXME: hardcode in v4,
|
|
},
|
|
|
|
[`> ${tableCls}-content`]: {
|
|
// Header background color
|
|
[`> ${tableCls}-body > table > ${tableCls}-thead > tr > th`]: {
|
|
background: backgroundColorLight,
|
|
},
|
|
|
|
[`${tableCls}-row:last-child td`]: {
|
|
borderBottom: `${token.controlLineWidth}px ${token.controlLineType} ${borderColorSplit}`,
|
|
},
|
|
},
|
|
|
|
[`${tableCls}-body`]: {
|
|
margin: 0,
|
|
},
|
|
},
|
|
|
|
[`${tableCls}-pagination${tableCls}-pagination`]: {
|
|
margin: '16px 0 4px', // FIXME: hardcode in v4,
|
|
},
|
|
},
|
|
|
|
[`${inputCls}[disabled]`]: {
|
|
backgroundColor: 'transparent',
|
|
},
|
|
},
|
|
};
|
|
};
|
|
|
|
const genTransferStatusColor = (token: TransferToken, color: string): CSSObject => {
|
|
const { componentCls, borderColorBase } = token;
|
|
return {
|
|
[`${componentCls}-list`]: {
|
|
borderColor: color,
|
|
|
|
'&-search:not([disabled])': {
|
|
borderColor: borderColorBase,
|
|
|
|
'&:hover': {
|
|
...genHoverStyle(token),
|
|
},
|
|
|
|
'&:focus': {
|
|
...genActiveStyle(token),
|
|
},
|
|
},
|
|
},
|
|
};
|
|
};
|
|
|
|
const genTransferStatusStyle: GenerateStyle<TransferToken> = (token: TransferToken): CSSObject => {
|
|
const { componentCls } = token;
|
|
return {
|
|
[`${componentCls}-status-error`]: {
|
|
...genTransferStatusColor(token, token.colorError),
|
|
},
|
|
[`${componentCls}-status-warning`]: {
|
|
...genTransferStatusColor(token, token.colorWarning),
|
|
},
|
|
};
|
|
};
|
|
|
|
const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken): CSSObject => {
|
|
const {
|
|
componentCls,
|
|
borderColorBase,
|
|
borderColorSplit,
|
|
heightBase,
|
|
transferListHeight,
|
|
transferHeaderHeight,
|
|
transferHeaderVerticalPadding,
|
|
transferItemPaddingVertical,
|
|
transferItemSelectedHoverBg,
|
|
disabledColor,
|
|
} = token;
|
|
|
|
return {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
width: 180, // FIXME: hardcode in v4,
|
|
height: transferListHeight,
|
|
border: `${token.controlLineWidth}px ${token.controlLineType} ${borderColorBase}`,
|
|
borderRadius: token.radiusBase,
|
|
|
|
'&-with-pagination': {
|
|
width: 250, // FIXME: hardcode in v4,
|
|
height: 'auto',
|
|
},
|
|
|
|
'&-search': {
|
|
'.anticon-search': {
|
|
color: disabledColor,
|
|
},
|
|
},
|
|
|
|
'&-header': {
|
|
display: 'flex',
|
|
flex: 'none',
|
|
alignItems: 'center',
|
|
height: transferHeaderHeight,
|
|
// border-top is on the transfer dom. We should minus 1px for this
|
|
padding: `${transferHeaderVerticalPadding - 1}px ${
|
|
token.paddingSM
|
|
}px ${transferHeaderVerticalPadding}px`,
|
|
color: token.colorText,
|
|
background: token.colorBgComponent,
|
|
borderBottom: `${token.controlLineWidth}px ${token.controlLineType} ${borderColorSplit}`,
|
|
borderRadius: `${token.radiusBase}px ${token.radiusBase}px 0 0`,
|
|
|
|
'> *:not(:last-child)': {
|
|
marginInlineEnd: 4, // FIXME: hardcode in v4,
|
|
},
|
|
|
|
'> *': {
|
|
flex: 'none',
|
|
},
|
|
|
|
'&-title': {
|
|
flex: 'auto',
|
|
overflow: 'hidden',
|
|
whiteSpace: 'nowrap',
|
|
textAlign: 'end',
|
|
textOverflow: 'ellipsis',
|
|
},
|
|
|
|
'&-dropdown': {
|
|
fontSize: 10, // FIXME: hardcode in v4,
|
|
transform: 'translateY(10%)',
|
|
cursor: 'pointer',
|
|
|
|
'&[disabled]': {
|
|
cursor: 'not-allowed',
|
|
},
|
|
},
|
|
},
|
|
|
|
'&-body': {
|
|
display: 'flex',
|
|
flex: 'auto',
|
|
flexDirection: 'column',
|
|
overflow: 'hidden',
|
|
fontSize: token.fontSizeBase,
|
|
|
|
'&-search-wrapper': {
|
|
position: 'relative',
|
|
flex: 'none',
|
|
padding: token.paddingSM,
|
|
},
|
|
},
|
|
|
|
'&-content': {
|
|
flex: 'auto',
|
|
margin: 0,
|
|
padding: 0,
|
|
overflow: 'auto',
|
|
listStyle: 'none',
|
|
|
|
'&-item': {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
minHeight: heightBase,
|
|
padding: `${transferItemPaddingVertical}px ${token.paddingSM}px`,
|
|
lineHeight: `${heightBase - 2 * transferItemPaddingVertical}px`,
|
|
transition: `all ${token.motionDurationSlow}`,
|
|
|
|
'> *:not(:last-child)': {
|
|
marginInlineEnd: 8, // FIXME: hardcode in v4,
|
|
},
|
|
|
|
'> *': {
|
|
flex: 'none',
|
|
},
|
|
|
|
'&-text': {
|
|
flex: 'auto',
|
|
overflow: 'hidden',
|
|
whiteSpace: 'nowrap',
|
|
textOverflow: 'ellipsis',
|
|
},
|
|
|
|
'&-remove': {
|
|
...operationUnit(token),
|
|
position: 'relative',
|
|
color: token.borderColorBase,
|
|
|
|
'&::after': {
|
|
position: 'absolute',
|
|
insert: `-${transferItemPaddingVertical}px -50%`,
|
|
content: '""',
|
|
},
|
|
|
|
'&:hover': {
|
|
color: token.colorLinkHover,
|
|
},
|
|
},
|
|
|
|
'&:not(&-disabled)': {
|
|
'&:hover': {
|
|
backgroundColor: token.controlItemBgHover,
|
|
cursor: 'pointer',
|
|
},
|
|
|
|
[`&${componentCls}-list-content-item-checked:hover`]: {
|
|
backgroundColor: transferItemSelectedHoverBg,
|
|
},
|
|
},
|
|
|
|
// Do not change hover style when `oneWay` mode
|
|
'&-show-remove &-item:not(&-item-disabled):hover': {
|
|
background: 'transparent',
|
|
cursor: 'default',
|
|
},
|
|
|
|
'&-checked': {
|
|
backgroundColor: token.controlItemBgActive,
|
|
},
|
|
|
|
'&-disabled': {
|
|
color: disabledColor,
|
|
cursor: 'not-allowed',
|
|
},
|
|
},
|
|
},
|
|
|
|
'&-pagination': {
|
|
padding: `${token.paddingXS}px 0`,
|
|
textAlign: 'end',
|
|
borderTop: `${token.controlLineWidth}px ${token.controlLineType} ${borderColorSplit}`,
|
|
},
|
|
|
|
'&-body-not-found': {
|
|
flex: 'none',
|
|
width: '100%',
|
|
margin: 'auto 0',
|
|
color: disabledColor,
|
|
textAlign: 'center',
|
|
},
|
|
|
|
'&-footer': {
|
|
borderTop: `${token.controlLineWidth}px ${token.controlLineType} ${borderColorSplit}`,
|
|
},
|
|
};
|
|
};
|
|
|
|
const genTransferStyle: GenerateStyle<TransferToken> = (token: TransferToken): CSSObject => {
|
|
const { antCls, iconCls, componentCls, transferHeaderHeight } = token;
|
|
|
|
return {
|
|
[componentCls]: {
|
|
...resetComponent(token),
|
|
|
|
position: 'relative',
|
|
display: 'flex',
|
|
alignItems: 'stretch',
|
|
|
|
[`${componentCls}-disabled`]: {
|
|
[`${componentCls}-list`]: {
|
|
background: token.colorBgComponentDisabled,
|
|
},
|
|
},
|
|
|
|
[`${componentCls}-list`]: genTransferListStyle(token),
|
|
|
|
[`${componentCls}-operation`]: {
|
|
display: 'flex',
|
|
flex: 'none',
|
|
flexDirection: 'column',
|
|
alignSelf: 'center',
|
|
margin: '0 8px', // FIXME: hardcode in v4,
|
|
verticalAlign: 'middle',
|
|
|
|
[`${antCls}-btn`]: {
|
|
display: 'block',
|
|
|
|
'&:first-child': {
|
|
marginBottom: 4, // FIXME: hardcode in v4,
|
|
},
|
|
|
|
[iconCls]: {
|
|
fontSize: 12, // FIXME: hardcode in v4,
|
|
},
|
|
},
|
|
},
|
|
|
|
[`${antCls}-empty-image`]: {
|
|
maxHeight: transferHeaderHeight / 2 - 22, // FIXME: hardcode in v4,
|
|
},
|
|
},
|
|
};
|
|
};
|
|
|
|
const genTransferRTLStyle: GenerateStyle<TransferToken> = (token: TransferToken): CSSObject => {
|
|
const { componentCls } = token;
|
|
return {
|
|
[`${componentCls}-rtl`]: {
|
|
direction: 'rtl',
|
|
|
|
[`${componentCls}-list`]: {
|
|
'&-search': {
|
|
paddingInlineStart: token.paddingXS,
|
|
paddingInlineEnd: 24, // FIXME: hardcode in v4,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
};
|
|
|
|
// ============================== Export ==============================
|
|
export default genComponentStyleHook('Transfer', token => {
|
|
const transferHeaderHeight = 40;
|
|
const lineHeightBase = 1.5715;
|
|
|
|
const transferToken = mergeToken<TransferToken>(initInputToken<FullToken<'Transfer'>>(token), {
|
|
borderColorBase: new TinyColor({ h: 0, s: 0, v: 85 }).toHexString(), // FIXME: hardcode in v4
|
|
borderColorSplit: new TinyColor({ h: 0, s: 0, v: 94 }).toHexString(), // FIXME: hardcode in v4
|
|
backgroundColorLight: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(), // FIXME: hardcode in v4
|
|
disabledColor: new TinyColor('#000').setAlpha(0.25).toRgbString(), // FIXME: hardcode in v4
|
|
heightBase: 32, // FIXME: hardcode in v4,
|
|
transferListHeight: 200, // FIXME: hardcode in v4,
|
|
transferHeaderHeight, // FIXME: hardcode in v4,
|
|
transferHeaderVerticalPadding: Math.ceil(
|
|
(transferHeaderHeight - 1 - token.fontSizeBase * lineHeightBase) / 2, // FIXME: hardcode in v4,
|
|
),
|
|
transferItemPaddingVertical: 6, // FIXME: hardcode in v4,
|
|
transferItemSelectedHoverBg: new TinyColor(token.controlItemBgActive).darken(2).toHexString(), // FIXME: hardcode in v4,
|
|
});
|
|
|
|
return [
|
|
genTransferStyle(transferToken),
|
|
genTransferCustomizeStyle(transferToken),
|
|
genTransferStatusStyle(transferToken),
|
|
genTransferRTLStyle(transferToken),
|
|
];
|
|
});
|