mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 09:26:06 +08:00
refactor: cssinjs for Transfer (#35508)
* refactor: Transfer cssinjs * chore: add fixme * chore: fix lint * chore: fix lint * chore: bundle size * chore: fix test * refactor: adjust status style
This commit is contained in:
miracles1919
GitHub
parent
fb9c2fc51e
commit
aefba96f13
@ -104,6 +104,7 @@ export interface OverrideToken {
|
||||
Tooltip?: {};
|
||||
Space?: SpaceComponentToken;
|
||||
Progress?: ProgressComponentToken;
|
||||
Transfer?: {};
|
||||
}
|
||||
|
||||
/** Final token which contains the components level override */
|
||||
|
||||
@ -443,7 +443,7 @@ describe('Transfer', () => {
|
||||
/>,
|
||||
);
|
||||
|
||||
const wrapper = component.find('.ant-transfer');
|
||||
const wrapper = component.find('.ant-transfer').last();
|
||||
const listSource = component.find('.ant-transfer-list').first();
|
||||
const listTarget = component.find('.ant-transfer-list').last();
|
||||
const operation = component.find('.ant-transfer-operation').first();
|
||||
|
||||
@ -14,6 +14,7 @@ import warning from '../_util/warning';
|
||||
import { FormItemInputContext } from '../form/context';
|
||||
import type { InputStatus } from '../_util/statusUtils';
|
||||
import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
|
||||
import useStyle from './style';
|
||||
|
||||
export { TransferListProps } from './list';
|
||||
export { TransferOperationProps } from './operation';
|
||||
@ -104,6 +105,25 @@ interface TransferState {
|
||||
targetSelectedKeys: string[];
|
||||
}
|
||||
|
||||
interface TransferFCProps {
|
||||
prefixCls: string;
|
||||
className: string;
|
||||
style?: React.CSSProperties;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const TransferFC: React.FC<TransferFCProps> = props => {
|
||||
const { prefixCls } = props;
|
||||
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
|
||||
return wrapSSR(
|
||||
<div className={classNames(props.className, hashId)} style={props.style}>
|
||||
{props.children}
|
||||
</div>,
|
||||
);
|
||||
};
|
||||
|
||||
class Transfer<RecordType extends TransferItem = TransferItem> extends React.Component<
|
||||
TransferProps<RecordType>,
|
||||
TransferState
|
||||
@ -399,7 +419,7 @@ class Transfer<RecordType extends TransferItem = TransferItem> extends React.Com
|
||||
const titles = this.getTitles(locale);
|
||||
const selectAllLabels = this.props.selectAllLabels || [];
|
||||
return (
|
||||
<div className={cls} style={style}>
|
||||
<TransferFC prefixCls={prefixCls} className={cls} style={style}>
|
||||
<List<KeyWise<RecordType>>
|
||||
prefixCls={`${prefixCls}-list`}
|
||||
titleText={titles[0]}
|
||||
@ -461,7 +481,7 @@ class Transfer<RecordType extends TransferItem = TransferItem> extends React.Com
|
||||
pagination={mergedPagination}
|
||||
{...locale}
|
||||
/>
|
||||
</div>
|
||||
</TransferFC>
|
||||
);
|
||||
}}
|
||||
</FormItemInputContext.Consumer>
|
||||
|
||||
@ -1,52 +1,52 @@
|
||||
@import '../../style/themes/index';
|
||||
// @import '../../style/themes/index';
|
||||
|
||||
@transfer-prefix-cls: ~'@{ant-prefix}-transfer';
|
||||
// @transfer-prefix-cls: ~'@{ant-prefix}-transfer';
|
||||
|
||||
@table-prefix-cls: ~'@{ant-prefix}-table';
|
||||
@input-prefix-cls: ~'@{ant-prefix}-input';
|
||||
// @table-prefix-cls: ~'@{ant-prefix}-table';
|
||||
// @input-prefix-cls: ~'@{ant-prefix}-input';
|
||||
|
||||
.@{transfer-prefix-cls}-customize-list {
|
||||
.@{transfer-prefix-cls}-list {
|
||||
flex: 1 1 50%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
min-height: @transfer-list-height;
|
||||
}
|
||||
// .@{transfer-prefix-cls}-customize-list {
|
||||
// .@{transfer-prefix-cls}-list {
|
||||
// flex: 1 1 50%;
|
||||
// width: auto;
|
||||
// height: auto;
|
||||
// min-height: @transfer-list-height;
|
||||
// }
|
||||
|
||||
// =================== Hook Components ===================
|
||||
.@{table-prefix-cls}-wrapper {
|
||||
.@{table-prefix-cls}-small {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
// // =================== Hook Components ===================
|
||||
// .@{table-prefix-cls}-wrapper {
|
||||
// .@{table-prefix-cls}-small {
|
||||
// border: 0;
|
||||
// border-radius: 0;
|
||||
|
||||
.@{table-prefix-cls}-selection-column {
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
}
|
||||
// .@{table-prefix-cls}-selection-column {
|
||||
// width: 40px;
|
||||
// min-width: 40px;
|
||||
// }
|
||||
|
||||
> .@{table-prefix-cls}-content {
|
||||
// Header background color
|
||||
> .@{table-prefix-cls}-body > table > .@{table-prefix-cls}-thead > tr > th {
|
||||
background: @table-header-bg;
|
||||
}
|
||||
// > .@{table-prefix-cls}-content {
|
||||
// // Header background color
|
||||
// > .@{table-prefix-cls}-body > table > .@{table-prefix-cls}-thead > tr > th {
|
||||
// background: @table-header-bg;
|
||||
// }
|
||||
|
||||
.@{table-prefix-cls}-row:last-child td {
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
}
|
||||
}
|
||||
// .@{table-prefix-cls}-row:last-child td {
|
||||
// border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
// }
|
||||
// }
|
||||
|
||||
.@{table-prefix-cls}-body {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
// .@{table-prefix-cls}-body {
|
||||
// margin: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
.@{table-prefix-cls}-pagination.@{ant-prefix}-pagination {
|
||||
margin: 16px 0 4px;
|
||||
}
|
||||
}
|
||||
.@{input-prefix-cls} {
|
||||
&[disabled] {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .@{table-prefix-cls}-pagination.@{ant-prefix}-pagination {
|
||||
// margin: 16px 0 4px;
|
||||
// }
|
||||
// }
|
||||
// .@{input-prefix-cls} {
|
||||
// &[disabled] {
|
||||
// background-color: transparent;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -1,221 +1,221 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
@import '../../checkbox/style/mixin';
|
||||
@import './customize';
|
||||
@import './status';
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
// @import '../../checkbox/style/mixin';
|
||||
// @import './customize';
|
||||
// @import './status';
|
||||
|
||||
@transfer-prefix-cls: ~'@{ant-prefix}-transfer';
|
||||
// @transfer-prefix-cls: ~'@{ant-prefix}-transfer';
|
||||
|
||||
@transfer-header-vertical-padding: ceil(
|
||||
((@transfer-header-height - 1px - @font-size-base * @line-height-base) / 2)
|
||||
);
|
||||
// @transfer-header-vertical-padding: ceil(
|
||||
// ((@transfer-header-height - 1px - @font-size-base * @line-height-base) / 2)
|
||||
// );
|
||||
|
||||
.@{transfer-prefix-cls} {
|
||||
.reset-component();
|
||||
// .@{transfer-prefix-cls} {
|
||||
// .reset-component();
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
// position: relative;
|
||||
// display: flex;
|
||||
// align-items: stretch;
|
||||
|
||||
&-disabled {
|
||||
.@{transfer-prefix-cls}-list {
|
||||
background: @transfer-disabled-bg;
|
||||
}
|
||||
}
|
||||
// &-disabled {
|
||||
// .@{transfer-prefix-cls}-list {
|
||||
// background: @transfer-disabled-bg;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 180px;
|
||||
height: @transfer-list-height;
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
border-radius: @border-radius-base;
|
||||
// &-list {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// width: 180px;
|
||||
// height: @transfer-list-height;
|
||||
// border: @border-width-base @border-style-base @border-color-base;
|
||||
// border-radius: @border-radius-base;
|
||||
|
||||
&-with-pagination {
|
||||
width: 250px;
|
||||
height: auto;
|
||||
}
|
||||
// &-with-pagination {
|
||||
// width: 250px;
|
||||
// height: auto;
|
||||
// }
|
||||
|
||||
&-search {
|
||||
.anticon-search {
|
||||
color: @disabled-color;
|
||||
}
|
||||
}
|
||||
// &-search {
|
||||
// .anticon-search {
|
||||
// color: @disabled-color;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
height: @transfer-header-height;
|
||||
// border-top is on the transfer dom. We should minus 1px for this
|
||||
padding: (@transfer-header-vertical-padding - 1px) @control-padding-horizontal
|
||||
@transfer-header-vertical-padding;
|
||||
color: @text-color;
|
||||
background: @component-background;
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
// &-header {
|
||||
// display: flex;
|
||||
// flex: none;
|
||||
// align-items: center;
|
||||
// height: @transfer-header-height;
|
||||
// // border-top is on the transfer dom. We should minus 1px for this
|
||||
// padding: (@transfer-header-vertical-padding - 1px) @control-padding-horizontal
|
||||
// @transfer-header-vertical-padding;
|
||||
// color: @text-color;
|
||||
// background: @component-background;
|
||||
// border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
// border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-right: 4px;
|
||||
}
|
||||
// > *:not(:last-child) {
|
||||
// margin-right: 4px;
|
||||
// }
|
||||
|
||||
> * {
|
||||
flex: none;
|
||||
}
|
||||
// > * {
|
||||
// flex: none;
|
||||
// }
|
||||
|
||||
&-title {
|
||||
flex: auto;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
// &-title {
|
||||
// flex: auto;
|
||||
// overflow: hidden;
|
||||
// white-space: nowrap;
|
||||
// text-align: right;
|
||||
// text-overflow: ellipsis;
|
||||
// }
|
||||
|
||||
&-dropdown {
|
||||
font-size: 10px;
|
||||
transform: translateY(10%);
|
||||
cursor: pointer;
|
||||
// &-dropdown {
|
||||
// font-size: 10px;
|
||||
// transform: translateY(10%);
|
||||
// cursor: pointer;
|
||||
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &[disabled] {
|
||||
// cursor: not-allowed;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&-body {
|
||||
display: flex;
|
||||
flex: auto;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
font-size: @font-size-base;
|
||||
// &-body {
|
||||
// display: flex;
|
||||
// flex: auto;
|
||||
// flex-direction: column;
|
||||
// overflow: hidden;
|
||||
// font-size: @font-size-base;
|
||||
|
||||
&-search-wrapper {
|
||||
position: relative;
|
||||
flex: none;
|
||||
padding: @padding-sm;
|
||||
}
|
||||
}
|
||||
// &-search-wrapper {
|
||||
// position: relative;
|
||||
// flex: none;
|
||||
// padding: @padding-sm;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-content {
|
||||
flex: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
list-style: none;
|
||||
// &-content {
|
||||
// flex: auto;
|
||||
// margin: 0;
|
||||
// padding: 0;
|
||||
// overflow: auto;
|
||||
// list-style: none;
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: @transfer-item-height;
|
||||
padding: @transfer-item-padding-vertical @control-padding-horizontal;
|
||||
line-height: @transfer-item-height - 2 * @transfer-item-padding-vertical;
|
||||
transition: all 0.3s;
|
||||
// &-item {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// min-height: @transfer-item-height;
|
||||
// padding: @transfer-item-padding-vertical @control-padding-horizontal;
|
||||
// line-height: @transfer-item-height - 2 * @transfer-item-padding-vertical;
|
||||
// transition: all 0.3s;
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
// > *:not(:last-child) {
|
||||
// margin-right: 8px;
|
||||
// }
|
||||
|
||||
> * {
|
||||
flex: none;
|
||||
}
|
||||
// > * {
|
||||
// flex: none;
|
||||
// }
|
||||
|
||||
&-text {
|
||||
flex: auto;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
// &-text {
|
||||
// flex: auto;
|
||||
// overflow: hidden;
|
||||
// white-space: nowrap;
|
||||
// text-overflow: ellipsis;
|
||||
// }
|
||||
|
||||
&-remove {
|
||||
.operation-unit();
|
||||
position: relative;
|
||||
color: @border-color-base;
|
||||
// &-remove {
|
||||
// .operation-unit();
|
||||
// position: relative;
|
||||
// color: @border-color-base;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: -@transfer-item-padding-vertical;
|
||||
right: -50%;
|
||||
bottom: -@transfer-item-padding-vertical;
|
||||
left: -50%;
|
||||
content: '';
|
||||
}
|
||||
// &::after {
|
||||
// position: absolute;
|
||||
// top: -@transfer-item-padding-vertical;
|
||||
// right: -50%;
|
||||
// bottom: -@transfer-item-padding-vertical;
|
||||
// left: -50%;
|
||||
// content: '';
|
||||
// }
|
||||
|
||||
&:hover {
|
||||
color: @link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &:hover {
|
||||
// color: @link-hover-color;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&-item:not(&-item-disabled) {
|
||||
&:hover {
|
||||
background-color: @transfer-item-hover-bg;
|
||||
cursor: pointer;
|
||||
}
|
||||
// &-item:not(&-item-disabled) {
|
||||
// &:hover {
|
||||
// background-color: @transfer-item-hover-bg;
|
||||
// cursor: pointer;
|
||||
// }
|
||||
|
||||
&.@{transfer-prefix-cls}-list-content-item-checked:hover {
|
||||
background-color: @transfer-item-selected-hover-bg;
|
||||
}
|
||||
}
|
||||
// &.@{transfer-prefix-cls}-list-content-item-checked:hover {
|
||||
// background-color: @transfer-item-selected-hover-bg;
|
||||
// }
|
||||
// }
|
||||
|
||||
// Do not change hover style when `oneWay` mode
|
||||
&-show-remove &-item:not(&-item-disabled):hover {
|
||||
background: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
// // Do not change hover style when `oneWay` mode
|
||||
// &-show-remove &-item:not(&-item-disabled):hover {
|
||||
// background: transparent;
|
||||
// cursor: default;
|
||||
// }
|
||||
|
||||
&-item-checked {
|
||||
background-color: @item-active-bg;
|
||||
}
|
||||
// &-item-checked {
|
||||
// background-color: @item-active-bg;
|
||||
// }
|
||||
|
||||
&-item-disabled {
|
||||
color: @btn-disable-color;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
// &-item-disabled {
|
||||
// color: @btn-disable-color;
|
||||
// cursor: not-allowed;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-pagination {
|
||||
padding: @padding-xs 0;
|
||||
text-align: right;
|
||||
border-top: @border-width-base @border-style-base @border-color-split;
|
||||
}
|
||||
// &-pagination {
|
||||
// padding: @padding-xs 0;
|
||||
// text-align: right;
|
||||
// border-top: @border-width-base @border-style-base @border-color-split;
|
||||
// }
|
||||
|
||||
&-body-not-found {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
margin: auto 0;
|
||||
color: @disabled-color;
|
||||
text-align: center;
|
||||
}
|
||||
// &-body-not-found {
|
||||
// flex: none;
|
||||
// width: 100%;
|
||||
// margin: auto 0;
|
||||
// color: @disabled-color;
|
||||
// text-align: center;
|
||||
// }
|
||||
|
||||
&-footer {
|
||||
border-top: @border-width-base @border-style-base @border-color-split;
|
||||
}
|
||||
}
|
||||
// &-footer {
|
||||
// border-top: @border-width-base @border-style-base @border-color-split;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-operation {
|
||||
display: flex;
|
||||
flex: none;
|
||||
flex-direction: column;
|
||||
align-self: center;
|
||||
margin: 0 8px;
|
||||
vertical-align: middle;
|
||||
// &-operation {
|
||||
// display: flex;
|
||||
// flex: none;
|
||||
// flex-direction: column;
|
||||
// align-self: center;
|
||||
// margin: 0 8px;
|
||||
// vertical-align: middle;
|
||||
|
||||
.@{ant-prefix}-btn {
|
||||
display: block;
|
||||
// .@{ant-prefix}-btn {
|
||||
// display: block;
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
// &:first-child {
|
||||
// margin-bottom: 4px;
|
||||
// }
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .@{iconfont-css-prefix} {
|
||||
// font-size: 12px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.@{ant-prefix}-empty-image {
|
||||
max-height: (@transfer-header-height / 2) - 22;
|
||||
}
|
||||
}
|
||||
// .@{ant-prefix}-empty-image {
|
||||
// max-height: (@transfer-header-height / 2) - 22;
|
||||
// }
|
||||
// }
|
||||
|
||||
@import './rtl';
|
||||
// @import './rtl';
|
||||
|
||||
@ -1,13 +1,405 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
// 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';
|
||||
// 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),
|
||||
];
|
||||
});
|
||||
|
||||
@ -1,71 +1,71 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
@import '../../checkbox/style/mixin';
|
||||
// @import '../../style/themes/index';
|
||||
// @import '../../style/mixins/index';
|
||||
// @import '../../checkbox/style/mixin';
|
||||
|
||||
@transfer-prefix-cls: ~'@{ant-prefix}-transfer';
|
||||
// @transfer-prefix-cls: ~'@{ant-prefix}-transfer';
|
||||
|
||||
.@{transfer-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
// .@{transfer-prefix-cls} {
|
||||
// &-rtl {
|
||||
// direction: rtl;
|
||||
// }
|
||||
|
||||
&-list {
|
||||
&-search {
|
||||
.@{transfer-prefix-cls}-rtl & {
|
||||
padding-right: @control-padding-horizontal-sm;
|
||||
padding-left: 24px;
|
||||
}
|
||||
// &-list {
|
||||
// &-search {
|
||||
// .@{transfer-prefix-cls}-rtl & {
|
||||
// padding-right: @control-padding-horizontal-sm;
|
||||
// padding-left: 24px;
|
||||
// }
|
||||
|
||||
&-action {
|
||||
.@{transfer-prefix-cls}-rtl & {
|
||||
right: auto;
|
||||
left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &-action {
|
||||
// .@{transfer-prefix-cls}-rtl & {
|
||||
// right: auto;
|
||||
// left: 12px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&-header {
|
||||
> *:not(:last-child) {
|
||||
.@{transfer-prefix-cls}-rtl & {
|
||||
margin-right: 0;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
// &-header {
|
||||
// > *:not(:last-child) {
|
||||
// .@{transfer-prefix-cls}-rtl & {
|
||||
// margin-right: 0;
|
||||
// margin-left: 4px;
|
||||
// }
|
||||
// }
|
||||
|
||||
.@{transfer-prefix-cls}-rtl & {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
// .@{transfer-prefix-cls}-rtl & {
|
||||
// right: 0;
|
||||
// left: auto;
|
||||
// }
|
||||
|
||||
&-title {
|
||||
.@{transfer-prefix-cls}-rtl & {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &-title {
|
||||
// .@{transfer-prefix-cls}-rtl & {
|
||||
// text-align: left;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&-content {
|
||||
&-item {
|
||||
> *:not(:last-child) {
|
||||
.@{transfer-prefix-cls}-rtl & {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// &-content {
|
||||
// &-item {
|
||||
// > *:not(:last-child) {
|
||||
// .@{transfer-prefix-cls}-rtl & {
|
||||
// margin-right: 0;
|
||||
// margin-left: 8px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&-pagination {
|
||||
.@{transfer-prefix-cls}-rtl & {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
// &-pagination {
|
||||
// .@{transfer-prefix-cls}-rtl & {
|
||||
// text-align: left;
|
||||
// }
|
||||
// }
|
||||
|
||||
&-footer {
|
||||
.@{transfer-prefix-cls}-rtl & {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// &-footer {
|
||||
// .@{transfer-prefix-cls}-rtl & {
|
||||
// right: 0;
|
||||
// left: auto;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -1,31 +1,31 @@
|
||||
@import '../../input/style/mixin';
|
||||
// @import '../../input/style/mixin';
|
||||
|
||||
@transfer-prefix-cls: ~'@{ant-prefix}-transfer';
|
||||
// @transfer-prefix-cls: ~'@{ant-prefix}-transfer';
|
||||
|
||||
.transfer-status-color(@color) {
|
||||
.@{transfer-prefix-cls}-list {
|
||||
border-color: @color;
|
||||
// .transfer-status-color(@color) {
|
||||
// .@{transfer-prefix-cls}-list {
|
||||
// border-color: @color;
|
||||
|
||||
&-search:not([disabled]) {
|
||||
border-color: @input-border-color;
|
||||
// &-search:not([disabled]) {
|
||||
// border-color: @input-border-color;
|
||||
|
||||
&:hover {
|
||||
.hover();
|
||||
}
|
||||
// &:hover {
|
||||
// .hover();
|
||||
// }
|
||||
|
||||
&:focus {
|
||||
.active();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// &:focus {
|
||||
// .active();
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.@{transfer-prefix-cls} {
|
||||
&-status-error {
|
||||
.transfer-status-color(@error-color);
|
||||
}
|
||||
// .@{transfer-prefix-cls} {
|
||||
// &-status-error {
|
||||
// .transfer-status-color(@error-color);
|
||||
// }
|
||||
|
||||
&-status-warning {
|
||||
.transfer-status-color(@warning-color);
|
||||
}
|
||||
}
|
||||
// &-status-warning {
|
||||
// .transfer-status-color(@warning-color);
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -306,7 +306,7 @@
|
||||
"bundlesize": [
|
||||
{
|
||||
"path": "./dist/antd.min.js",
|
||||
"maxSize": "358 kB"
|
||||
"maxSize": "360 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/antd.min.css",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user