From 03caa2c01e543e2d2da2a7078349ec660eded5c4 Mon Sep 17 00:00:00 2001 From: shifeng1993 Date: Wed, 8 Feb 2023 21:43:54 +0800 Subject: [PATCH 1/3] refactor:transfer --- components/style.ts | 2 +- components/theme/interface/components.ts | 4 +- components/transfer/index.tsx | 25 +- components/transfer/style/customize.less | 52 --- components/transfer/style/index.less | 221 ------------- components/transfer/style/index.tsx | 386 ++++++++++++++++++++++- components/transfer/style/rtl.less | 71 ----- components/transfer/style/status.less | 31 -- 8 files changed, 393 insertions(+), 399 deletions(-) delete mode 100644 components/transfer/style/customize.less delete mode 100644 components/transfer/style/index.less delete mode 100644 components/transfer/style/rtl.less delete mode 100644 components/transfer/style/status.less diff --git a/components/style.ts b/components/style.ts index 23700052aa..869e8e3d39 100644 --- a/components/style.ts +++ b/components/style.ts @@ -41,7 +41,7 @@ import './table/style'; // import './progress/style'; import './timeline/style'; import './input-number/style'; -import './transfer/style'; +// import './transfer/style'; import './tree/style'; import './upload/style'; import './layout/style'; diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts index cfd7a4500c..89cf69237c 100644 --- a/components/theme/interface/components.ts +++ b/components/theme/interface/components.ts @@ -42,7 +42,7 @@ import type { ComponentToken as SpinComponentToken } from '../../spin/style'; import type { ComponentToken as TagComponentToken } from '../../tag/style'; // import type { ComponentToken as TimelineComponentToken } from '../../timeline/style'; import type { ComponentToken as TooltipComponentToken } from '../../tooltip/style'; -// import type { ComponentToken as TransferComponentToken } from '../../transfer/style'; +import type { ComponentToken as TransferComponentToken } from '../../transfer/style'; // import type { ComponentToken as TypographyComponentToken } from '../../typography/style'; // import type { ComponentToken as UploadComponentToken } from '../../upload/style'; // import type { ComponentToken as TourComponentToken } from '../../tour/style'; @@ -100,7 +100,7 @@ export interface ComponentTokenMap { TreeSelect?: {}; // Typography?: TypographyComponentToken; // Timeline?: TimelineComponentToken; - // Transfer?: TransferComponentToken; + Transfer?: TransferComponentToken; // Tabs?: TabsComponentToken; // Calendar?: CalendarComponentToken; // Steps?: StepsComponentToken; diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx index 5c1973a5ce..5830faa1cb 100644 --- a/components/transfer/index.tsx +++ b/components/transfer/index.tsx @@ -17,6 +17,9 @@ import type { RenderEmptyHandler } from '../config-provider/renderEmpty'; import type { InputStatus } from '../_util/statusUtils'; import { getStatusClassNames, getMergedStatus } from '../_util/statusUtils'; +// CSSINJS +import useStyle from './style'; + export type { TransferListProps } from './list'; export type { TransferOperationProps } from './operation'; export type { TransferSearchProps } from './search'; @@ -125,6 +128,10 @@ const Transfer = defineComponent({ // emits: ['update:targetKeys', 'update:selectedKeys', 'change', 'search', 'scroll', 'selectChange'], setup(props, { emit, attrs, slots, expose }) { const { configProvider, prefixCls, direction } = useConfigInject('transfer', props); + + // style + const [wrapSSR, hashId] = useStyle(prefixCls); + const sourceSelectedKeys = ref([]); const targetSelectedKeys = ref([]); @@ -349,6 +356,7 @@ const Transfer = defineComponent({ [`${prefixCls.value}-rtl`]: direction.value === 'rtl', }, getStatusClassNames(prefixCls.value, mergedStatus.value, formItemInputContext.hasFeedback), + hashId.value, ); const titles = props.titles; const leftTitle = @@ -356,7 +364,7 @@ const Transfer = defineComponent({ const rightTitle = (titles && titles[1]) ?? slots.rightTitle?.() ?? (locale.titles || ['', ''])[1]; return ( -
+
); }; - return () => ( - - ); + return () => + wrapSSR( + , + ); }, }); diff --git a/components/transfer/style/customize.less b/components/transfer/style/customize.less deleted file mode 100644 index 042a0cb17e..0000000000 --- a/components/transfer/style/customize.less +++ /dev/null @@ -1,52 +0,0 @@ -@import '../../style/themes/index'; - -@transfer-prefix-cls: ~'@{ant-prefix}-transfer'; - -@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; - } - - // =================== 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}-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}-body { - margin: 0; - } - } - - .@{table-prefix-cls}-pagination.@{ant-prefix}-pagination { - margin: 16px 0 4px; - } - } - .@{input-prefix-cls} { - &[disabled] { - background-color: transparent; - } - } -} diff --git a/components/transfer/style/index.less b/components/transfer/style/index.less deleted file mode 100644 index c40b5537c4..0000000000 --- a/components/transfer/style/index.less +++ /dev/null @@ -1,221 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; -@import '../../checkbox/style/mixin'; -@import './customize'; -@import './status'; - -@transfer-prefix-cls: ~'@{ant-prefix}-transfer'; - -@transfer-header-vertical-padding: ceil( - ((@transfer-header-height - 1px - @font-size-base * @line-height-base) / 2) -); - -.@{transfer-prefix-cls} { - .reset-component(); - - position: relative; - display: flex; - align-items: stretch; - - &-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; - - &-with-pagination { - width: 250px; - height: auto; - } - - &-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; - - > *:not(:last-child) { - margin-right: 4px; - } - - > * { - flex: none; - } - - &-title { - flex: auto; - overflow: hidden; - white-space: nowrap; - text-align: right; - text-overflow: ellipsis; - } - - &-dropdown { - font-size: 10px; - transform: translateY(10%); - cursor: pointer; - - &[disabled] { - cursor: not-allowed; - } - } - } - - &-body { - display: flex; - flex: auto; - flex-direction: column; - overflow: hidden; - font-size: @font-size-base; - - &-search-wrapper { - position: relative; - flex: none; - padding: @padding-sm; - } - } - - &-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; - - > *:not(:last-child) { - margin-right: 8px; - } - - > * { - flex: none; - } - - &-text { - flex: auto; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - - &-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: ''; - } - - &:hover { - color: @link-hover-color; - } - } - } - - &-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; - } - } - - // 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-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; - } - - &-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; - } - } - - &-operation { - display: flex; - flex: none; - flex-direction: column; - align-self: center; - margin: 0 8px; - vertical-align: middle; - - .@{ant-prefix}-btn { - display: block; - - &:first-child { - margin-bottom: 4px; - } - - .@{iconfont-css-prefix} { - font-size: 12px; - } - } - } - - .@{ant-prefix}-empty-image { - max-height: (@transfer-header-height / 2) - 22; - } -} - -@import './rtl'; diff --git a/components/transfer/style/index.tsx b/components/transfer/style/index.tsx index 4bf2723fe7..84af98f252 100644 --- a/components/transfer/style/index.tsx +++ b/components/transfer/style/index.tsx @@ -1,13 +1,373 @@ -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 +import type { CSSObject } from '../../_util/cssinjs'; + +import type { FullToken, GenerateStyle } from '../../theme/internal'; +import { genComponentStyleHook, mergeToken } from '../../theme/internal'; +import { resetComponent, resetIcon, textEllipsis } from '../../_style'; + +export interface ComponentToken { + listWidth: number; + listWidthLG: number; + listHeight: number; +} + +interface TransferToken extends FullToken<'Transfer'> { + transferItemHeight: number; + transferHeaderVerticalPadding: number; + transferItemPaddingVertical: number; + transferHeaderHeight: number; +} + +const genTransferCustomizeStyle: GenerateStyle = ( + token: TransferToken, +): CSSObject => { + const { antCls, componentCls, listHeight, controlHeightLG, marginXXS, margin } = token; + + const tableCls = `${antCls}-table`; + const inputCls = `${antCls}-input`; + + return { + [`${componentCls}-customize-list`]: { + [`${componentCls}-list`]: { + flex: '1 1 50%', + width: 'auto', + height: 'auto', + minHeight: listHeight, + }, + + // =================== Hook Components =================== + [`${tableCls}-wrapper`]: { + [`${tableCls}-small`]: { + border: 0, + borderRadius: 0, + + [`${tableCls}-selection-column`]: { + width: controlHeightLG, + minWidth: controlHeightLG, + }, + }, + + [`${tableCls}-pagination${tableCls}-pagination`]: { + margin: `${margin}px 0 ${marginXXS}px`, + }, + }, + + [`${inputCls}[disabled]`]: { + backgroundColor: 'transparent', + }, + }, + }; +}; + +const genTransferStatusColor = (token: TransferToken, color: string): CSSObject => { + const { componentCls, colorBorder } = token; + return { + [`${componentCls}-list`]: { + borderColor: color, + + '&-search:not([disabled])': { + borderColor: colorBorder, + }, + }, + }; +}; + +const genTransferStatusStyle: GenerateStyle = (token: TransferToken): CSSObject => { + const { componentCls } = token; + return { + [`${componentCls}-status-error`]: { + ...genTransferStatusColor(token, token.colorError), + }, + [`${componentCls}-status-warning`]: { + ...genTransferStatusColor(token, token.colorWarning), + }, + }; +}; + +const genTransferListStyle: GenerateStyle = (token: TransferToken): CSSObject => { + const { + componentCls, + colorBorder, + colorSplit, + lineWidth, + transferItemHeight, + transferHeaderHeight, + transferHeaderVerticalPadding, + transferItemPaddingVertical, + controlItemBgActive, + controlItemBgActiveHover, + colorTextDisabled, + listHeight, + listWidth, + listWidthLG, + fontSizeIcon, + marginXS, + paddingSM, + lineType, + iconCls, + motionDurationSlow, + } = token; + + return { + display: 'flex', + flexDirection: 'column', + width: listWidth, + height: listHeight, + border: `${lineWidth}px ${lineType} ${colorBorder}`, + borderRadius: token.borderRadiusLG, + + '&-with-pagination': { + width: listWidthLG, + height: 'auto', + }, + + '&-search': { + [`${iconCls}-search`]: { + color: colorTextDisabled, + }, + }, + + '&-header': { + display: 'flex', + flex: 'none', + alignItems: 'center', + height: transferHeaderHeight, + // border-top is on the transfer dom. We should minus 1px for this + padding: `${ + transferHeaderVerticalPadding - lineWidth + }px ${paddingSM}px ${transferHeaderVerticalPadding}px`, + color: token.colorText, + background: token.colorBgContainer, + borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`, + borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`, + + '> *:not(:last-child)': { + marginInlineEnd: 4, // This is magic and fixed number, DO NOT use token since it may change. + }, + + '> *': { + flex: 'none', + }, + + '&-title': { + ...textEllipsis, + flex: 'auto', + textAlign: 'end', + }, + + '&-dropdown': { + ...resetIcon(), + + fontSize: fontSizeIcon, + transform: 'translateY(10%)', + cursor: 'pointer', + + '&[disabled]': { + cursor: 'not-allowed', + }, + }, + }, + + '&-body': { + display: 'flex', + flex: 'auto', + flexDirection: 'column', + overflow: 'hidden', + fontSize: token.fontSize, + + '&-search-wrapper': { + position: 'relative', + flex: 'none', + padding: paddingSM, + }, + }, + + '&-content': { + flex: 'auto', + margin: 0, + padding: 0, + overflow: 'auto', + listStyle: 'none', + + '&-item': { + display: 'flex', + alignItems: 'center', + minHeight: transferItemHeight, + padding: `${transferItemPaddingVertical}px ${paddingSM}px`, + transition: `all ${motionDurationSlow}`, + + '> *:not(:last-child)': { + marginInlineEnd: marginXS, + }, + + '> *': { + flex: 'none', + }, + + '&-text': { + ...textEllipsis, + flex: 'auto', + }, + + '&-remove': { + position: 'relative', + color: colorBorder, + + cursor: 'pointer', + transition: `all ${motionDurationSlow}`, + + '&:hover': { + color: token.colorLinkHover, + }, + + '&::after': { + position: 'absolute', + insert: `-${transferItemPaddingVertical}px -50%`, + content: '""', + }, + }, + + [`&:not(${componentCls}-list-content-item-disabled)`]: { + '&:hover': { + backgroundColor: token.controlItemBgHover, + cursor: 'pointer', + }, + + [`&${componentCls}-list-content-item-checked:hover`]: { + backgroundColor: controlItemBgActiveHover, + }, + }, + + '&-checked': { + backgroundColor: controlItemBgActive, + }, + + '&-disabled': { + color: colorTextDisabled, + cursor: 'not-allowed', + }, + }, + + // Do not change hover style when `oneWay` mode + [`&-show-remove ${componentCls}-list-content-item:not(${componentCls}-list-content-item-disabled):hover`]: + { + background: 'transparent', + cursor: 'default', + }, + }, + + '&-pagination': { + padding: `${token.paddingXS}px 0`, + textAlign: 'end', + borderTop: `${lineWidth}px ${lineType} ${colorSplit}`, + }, + + '&-body-not-found': { + flex: 'none', + width: '100%', + margin: 'auto 0', + color: colorTextDisabled, + textAlign: 'center', + }, + + '&-footer': { + borderTop: `${lineWidth}px ${lineType} ${colorSplit}`, + }, + }; +}; + +const genTransferStyle: GenerateStyle = (token: TransferToken): CSSObject => { + const { + antCls, + iconCls, + componentCls, + transferHeaderHeight, + marginXS, + marginXXS, + fontSizeIcon, + fontSize, + lineHeight, + } = token; + + return { + [componentCls]: { + ...resetComponent(token), + + position: 'relative', + display: 'flex', + alignItems: 'stretch', + + [`${componentCls}-disabled`]: { + [`${componentCls}-list`]: { + background: token.colorBgContainerDisabled, + }, + }, + + [`${componentCls}-list`]: genTransferListStyle(token), + + [`${componentCls}-operation`]: { + display: 'flex', + flex: 'none', + flexDirection: 'column', + alignSelf: 'center', + margin: `0 ${marginXS}px`, + verticalAlign: 'middle', + + [`${antCls}-btn`]: { + display: 'block', + + '&:first-child': { + marginBottom: marginXXS, + }, + + [iconCls]: { + fontSize: fontSizeIcon, + }, + }, + }, + + [`${antCls}-empty-image`]: { + maxHeight: transferHeaderHeight / 2 - Math.round(fontSize * lineHeight), + }, + }, + }; +}; + +const genTransferRTLStyle: GenerateStyle = (token: TransferToken): CSSObject => { + const { componentCls } = token; + return { + [`${componentCls}-rtl`]: { + direction: 'rtl', + }, + }; +}; + +// ============================== Export ============================== +export default genComponentStyleHook( + 'Transfer', + token => { + const { fontSize, lineHeight, lineWidth, controlHeightLG, controlHeight } = token; + + const fontHeight = Math.round(fontSize * lineHeight); + const transferHeaderHeight = controlHeightLG; + const transferItemHeight = controlHeight; + + const transferToken = mergeToken(token, { + transferItemHeight, + transferHeaderHeight, + transferHeaderVerticalPadding: Math.ceil((transferHeaderHeight - lineWidth - fontHeight) / 2), + transferItemPaddingVertical: (transferItemHeight - fontHeight) / 2, + }); + + return [ + genTransferStyle(transferToken), + genTransferCustomizeStyle(transferToken), + genTransferStatusStyle(transferToken), + genTransferRTLStyle(transferToken), + ]; + }, + { + listWidth: 180, + listHeight: 200, + listWidthLG: 250, + }, +); diff --git a/components/transfer/style/rtl.less b/components/transfer/style/rtl.less deleted file mode 100644 index ee9077e65d..0000000000 --- a/components/transfer/style/rtl.less +++ /dev/null @@ -1,71 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; -@import '../../checkbox/style/mixin'; - -@transfer-prefix-cls: ~'@{ant-prefix}-transfer'; - -.@{transfer-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-list { - &-search { - .@{transfer-prefix-cls}-rtl & { - padding-right: @control-padding-horizontal-sm; - padding-left: 24px; - } - - &-action { - .@{transfer-prefix-cls}-rtl & { - right: auto; - left: 12px; - } - } - } - - &-header { - > *:not(:last-child) { - .@{transfer-prefix-cls}-rtl & { - margin-right: 0; - margin-left: 4px; - } - } - - .@{transfer-prefix-cls}-rtl & { - right: 0; - left: auto; - } - - &-title { - .@{transfer-prefix-cls}-rtl & { - text-align: left; - } - } - } - - &-content { - &-item { - > *:not(:last-child) { - .@{transfer-prefix-cls}-rtl & { - margin-right: 0; - margin-left: 8px; - } - } - } - } - - &-pagination { - .@{transfer-prefix-cls}-rtl & { - text-align: left; - } - } - - &-footer { - .@{transfer-prefix-cls}-rtl & { - right: 0; - left: auto; - } - } - } -} diff --git a/components/transfer/style/status.less b/components/transfer/style/status.less deleted file mode 100644 index a861223174..0000000000 --- a/components/transfer/style/status.less +++ /dev/null @@ -1,31 +0,0 @@ -@import '../../input/style/mixin'; - -@transfer-prefix-cls: ~'@{ant-prefix}-transfer'; - -.transfer-status-color(@color) { - .@{transfer-prefix-cls}-list { - border-color: @color; - - &-search:not([disabled]) { - border-color: @input-border-color; - - &:hover { - .hover(); - } - - &:focus { - .active(); - } - } - } -} - -.@{transfer-prefix-cls} { - &-status-error { - .transfer-status-color(@error-color); - } - - &-status-warning { - .transfer-status-color(@warning-color); - } -} From 12fdb64f9755250f676f8878df3686cc2d23da80 Mon Sep 17 00:00:00 2001 From: shifeng1993 Date: Sun, 12 Feb 2023 12:29:36 +0800 Subject: [PATCH 2/3] merge v4 branch & fix theme interface conflict --- components/theme/interface/components.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts index 89cf69237c..b3fcdf2b77 100644 --- a/components/theme/interface/components.ts +++ b/components/theme/interface/components.ts @@ -10,7 +10,7 @@ import type { ComponentToken as ButtonComponentToken } from '../../button/style' // import type { ComponentToken as CascaderComponentToken } from '../../cascader/style'; // import type { ComponentToken as CheckboxComponentToken } from '../../checkbox/style'; // import type { ComponentToken as CollapseComponentToken } from '../../collapse/style'; -// import type { ComponentToken as DatePickerComponentToken } from '../../date-picker/style'; +import type { ComponentToken as DatePickerComponentToken } from '../../date-picker/style'; import type { ComponentToken as DividerComponentToken } from '../../divider/style'; import type { ComponentToken as DropdownComponentToken } from '../../dropdown/style'; // import type { ComponentToken as DrawerComponentToken } from '../../drawer/style'; @@ -28,13 +28,13 @@ import type { ComponentToken as PopconfirmComponentToken } from '../../popconfir import type { ComponentToken as PopoverComponentToken } from '../../popover/style'; import type { ComponentToken as ProgressComponentToken } from '../../progress/style'; // import type { ComponentToken as RadioComponentToken } from '../../radio/style'; -// import type { ComponentToken as RateComponentToken } from '../../rate/style'; +import type { ComponentToken as RateComponentToken } from '../../rate/style'; // import type { ComponentToken as ResultComponentToken } from '../../result/style'; // import type { ComponentToken as SegmentedComponentToken } from '../../segmented/style'; // import type { ComponentToken as SelectComponentToken } from '../../select/style'; import type { ComponentToken as SkeletonComponentToken } from '../../skeleton/style'; // import type { ComponentToken as SliderComponentToken } from '../../slider/style'; -// import type { ComponentToken as SpaceComponentToken } from '../../space/style'; +import type { ComponentToken as SpaceComponentToken } from '../../space/style'; import type { ComponentToken as SpinComponentToken } from '../../spin/style'; // import type { ComponentToken as StepsComponentToken } from '../../steps/style'; // import type { ComponentToken as TableComponentToken } from '../../table/style'; @@ -43,7 +43,7 @@ import type { ComponentToken as TagComponentToken } from '../../tag/style'; // import type { ComponentToken as TimelineComponentToken } from '../../timeline/style'; import type { ComponentToken as TooltipComponentToken } from '../../tooltip/style'; import type { ComponentToken as TransferComponentToken } from '../../transfer/style'; -// import type { ComponentToken as TypographyComponentToken } from '../../typography/style'; +import type { ComponentToken as TypographyComponentToken } from '../../typography/style'; // import type { ComponentToken as UploadComponentToken } from '../../upload/style'; // import type { ComponentToken as TourComponentToken } from '../../tour/style'; // import type { ComponentToken as QRCodeComponentToken } from '../../qrcode/style'; @@ -65,7 +65,7 @@ export interface ComponentTokenMap { // Checkbox?: CheckboxComponentToken; // Collapse?: CollapseComponentToken; Comment?: {}; - // DatePicker?: DatePickerComponentToken; + DatePicker?: DatePickerComponentToken; Descriptions?: {}; Divider?: DividerComponentToken; // Drawer?: DrawerComponentToken; @@ -85,7 +85,7 @@ export interface ComponentTokenMap { Pagination?: {}; Popover?: PopoverComponentToken; Popconfirm?: PopconfirmComponentToken; - // Rate?: RateComponentToken; + Rate?: RateComponentToken; // Radio?: RadioComponentToken; // Result?: ResultComponentToken; // Segmented?: SegmentedComponentToken; @@ -98,7 +98,7 @@ export interface ComponentTokenMap { Tag?: TagComponentToken; Tree?: {}; TreeSelect?: {}; - // Typography?: TypographyComponentToken; + Typography?: TypographyComponentToken; // Timeline?: TimelineComponentToken; Transfer?: TransferComponentToken; // Tabs?: TabsComponentToken; @@ -110,7 +110,7 @@ export interface ComponentTokenMap { // Upload?: UploadComponentToken; Tooltip?: TooltipComponentToken; // Table?: TableComponentToken; - // Space?: SpaceComponentToken; + Space?: SpaceComponentToken; Progress?: ProgressComponentToken; // Tour?: TourComponentToken; // QRCode?: QRCodeComponentToken; From 13062731637440ea5a72ac8cccd70847638937b7 Mon Sep 17 00:00:00 2001 From: shifeng1993 Date: Sun, 12 Feb 2023 21:04:34 +0800 Subject: [PATCH 3/3] docs:update & refactor: transfer type --- components/transfer/ListBody.tsx | 5 +- components/transfer/ListItem.tsx | 7 +- .../demo/custom-select-all-labels.vue | 102 ++++++++++++++++++ components/transfer/demo/index.vue | 3 + components/transfer/index.en-US.md | 3 +- components/transfer/index.tsx | 73 +++++++------ components/transfer/index.zh-CN.md | 3 +- components/transfer/list.tsx | 15 +-- 8 files changed, 165 insertions(+), 46 deletions(-) create mode 100644 components/transfer/demo/custom-select-all-labels.vue diff --git a/components/transfer/ListBody.tsx b/components/transfer/ListBody.tsx index 6cb2e7a993..e90fde6e58 100644 --- a/components/transfer/ListBody.tsx +++ b/components/transfer/ListBody.tsx @@ -5,13 +5,14 @@ import ListItem from './ListItem'; import Pagination from '../pagination'; import PropTypes from '../_util/vue-types'; import type { TransferItem } from '.'; +import { booleanType } from '../_util/type'; export const transferListBodyProps = { prefixCls: String, filteredRenderItems: PropTypes.array.def([]), selectedKeys: PropTypes.array, - disabled: { type: Boolean, default: undefined }, - showRemove: { type: Boolean, default: undefined }, + disabled: booleanType(), + showRemove: booleanType(), pagination: PropTypes.any, onItemSelect: Function, onScroll: Function, diff --git a/components/transfer/ListItem.tsx b/components/transfer/ListItem.tsx index 44de29d13a..6c80ac0c15 100644 --- a/components/transfer/ListItem.tsx +++ b/components/transfer/ListItem.tsx @@ -8,6 +8,7 @@ import TransButton from '../_util/transButton'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; import type { ExtractPropTypes } from 'vue'; import { defineComponent } from 'vue'; +import { booleanType } from '../_util/type'; function noop() {} @@ -15,10 +16,10 @@ export const transferListItemProps = { renderedText: PropTypes.any, renderedEl: PropTypes.any, item: PropTypes.any, - checked: { type: Boolean, default: undefined }, + checked: booleanType(), prefixCls: String, - disabled: { type: Boolean, default: undefined }, - showRemove: { type: Boolean, default: undefined }, + disabled: booleanType(), + showRemove: booleanType(), onClick: Function, onRemove: Function, }; diff --git a/components/transfer/demo/custom-select-all-labels.vue b/components/transfer/demo/custom-select-all-labels.vue new file mode 100644 index 0000000000..affa0d9949 --- /dev/null +++ b/components/transfer/demo/custom-select-all-labels.vue @@ -0,0 +1,102 @@ + +--- +order: 4 +title: + zh-CN: 自定义全选文字 + en-US: Custom Select All Labels +--- + + +## zh-CN + +自定义穿梭框全选按钮的文字。 + +## en-US + +Custom the labels for select all checkboxs. + + + + + diff --git a/components/transfer/demo/index.vue b/components/transfer/demo/index.vue index a34edc9960..047c84f663 100644 --- a/components/transfer/demo/index.vue +++ b/components/transfer/demo/index.vue @@ -9,6 +9,7 @@ +