From 8198cab549af95c69c3dfabd09e52c51edd48c8c Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Tue, 6 Jul 2021 16:16:57 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20transfer=E3=80=81tooltip=20(#4306)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor(transfer): use composition api (#4135) * refactor(transfer): use composition api * fix: remove console * refactor(tooltip): use composition api (#4059) * refactor(tooltip): use composition api * chore: useConfigInject * fix: remove useless * style: format code * refactor: transfer * refactor: tooltip Co-authored-by: ajuner <106791576@qq.com> --- components/dropdown/dropdown.tsx | 13 +- .../__snapshots__/index.test.js.snap | 612 +++++++++++------ components/slider/__tests__/index.test.js | 4 +- components/style/themes/default.less | 3 + components/tooltip/Tooltip.tsx | 265 ++++---- components/tooltip/__tests__/tooltip.test.js | 16 +- components/tooltip/abstractTooltipProps.ts | 41 +- components/tooltip/index.ts | 8 +- components/tooltip/placements.ts | 28 +- components/tooltip/style/index.less | 3 + components/tooltip/style/rtl.less | 14 + components/transfer/ListBody.tsx | 165 +++++ components/transfer/ListItem.tsx | 131 ++-- .../__snapshots__/index.test.js.snap | 40 +- .../__tests__/__snapshots__/list.test.js.snap | 13 +- components/transfer/__tests__/index.test.js | 153 +++-- components/transfer/index.tsx | 617 ++++++++--------- components/transfer/interface.ts | 5 + components/transfer/list.tsx | 640 ++++++++++-------- components/transfer/operation.tsx | 31 +- components/transfer/renderListBody.tsx | 113 ---- components/transfer/search.tsx | 77 ++- components/transfer/style/customize.less | 31 +- components/transfer/style/index.less | 188 +++-- components/transfer/style/index.ts | 3 + components/transfer/style/rtl.less | 69 ++ components/vc-tooltip/Content.jsx | 25 - components/vc-tooltip/Tooltip.jsx | 103 --- components/vc-tooltip/index.js | 4 - components/vc-tooltip/index.ts | 4 + components/vc-tooltip/src/Content.tsx | 29 + components/vc-tooltip/src/Tooltip.tsx | 123 ++++ .../{placements.js => src/placements.ts} | 0 33 files changed, 2049 insertions(+), 1522 deletions(-) create mode 100644 components/tooltip/style/rtl.less create mode 100644 components/transfer/ListBody.tsx create mode 100644 components/transfer/interface.ts delete mode 100644 components/transfer/renderListBody.tsx create mode 100644 components/transfer/style/rtl.less delete mode 100644 components/vc-tooltip/Content.jsx delete mode 100644 components/vc-tooltip/Tooltip.jsx delete mode 100644 components/vc-tooltip/index.js create mode 100644 components/vc-tooltip/index.ts create mode 100644 components/vc-tooltip/src/Content.tsx create mode 100644 components/vc-tooltip/src/Tooltip.tsx rename components/vc-tooltip/{placements.js => src/placements.ts} (100%) diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx index ffc160b8f..8838592c9 100644 --- a/components/dropdown/dropdown.tsx +++ b/components/dropdown/dropdown.tsx @@ -92,10 +92,15 @@ const Dropdown = defineComponent({ const getPrefixCls = this.configProvider.getPrefixCls; const prefixCls = getPrefixCls('dropdown', customizePrefixCls); const child = getSlot(this)[0]; - const dropdownTrigger = cloneElement(child, { - class: classNames(child?.props?.class, `${prefixCls}-trigger`), - disabled, - }); + const dropdownTrigger = cloneElement( + child, + Object.assign( + { + class: classNames(child?.props?.class, `${prefixCls}-trigger`), + }, + disabled ? { disabled } : {}, + ), + ); const triggerActions = disabled ? [] : typeof trigger === 'string' ? [trigger] : trigger; let alignPoint; if (triggerActions && triggerActions.indexOf('contextmenu') !== -1) { diff --git a/components/locale-provider/__tests__/__snapshots__/index.test.js.snap b/components/locale-provider/__tests__/__snapshots__/index.test.js.snap index e7de8ecd5..7c1beb76d 100644 --- a/components/locale-provider/__tests__/__snapshots__/index.test.js.snap +++ b/components/locale-provider/__tests__/__snapshots__/index.test.js.snap @@ -616,9 +616,11 @@ exports[`Locale Provider should display the text as ar 1`] = ` Click to confirm
-
+ 0 عنصر +
@@ -641,9 +643,11 @@ exports[`Locale Provider should display the text as ar 1`] = `
-
+ 0 عنصر +
@@ -1158,9 +1162,11 @@ exports[`Locale Provider should display the text as bg 1`] = ` Click to confirm
-
+ 0 избор +
@@ -1183,9 +1189,11 @@ exports[`Locale Provider should display the text as bg 1`] = `
-
+ 0 избор +
@@ -1700,9 +1708,11 @@ exports[`Locale Provider should display the text as ca 1`] = ` Click to confirm
-
+ 0 item +
@@ -1725,9 +1735,11 @@ exports[`Locale Provider should display the text as ca 1`] = `
-
+ 0 item +
@@ -2242,9 +2254,11 @@ exports[`Locale Provider should display the text as cs 1`] = ` Click to confirm
-
+ 0 položka +
@@ -2267,9 +2281,11 @@ exports[`Locale Provider should display the text as cs 1`] = `
-
+ 0 položka +
@@ -2784,9 +2800,11 @@ exports[`Locale Provider should display the text as da 1`] = ` Click to confirm
-
+ 0 element +
@@ -2809,9 +2827,11 @@ exports[`Locale Provider should display the text as da 1`] = `
-
+ 0 element +
@@ -3326,9 +3346,11 @@ exports[`Locale Provider should display the text as de 1`] = ` Click to confirm
-
+ 0 Eintrag +
@@ -3351,9 +3373,11 @@ exports[`Locale Provider should display the text as de 1`] = `
-
+ 0 Eintrag +
@@ -3868,9 +3892,11 @@ exports[`Locale Provider should display the text as el 1`] = ` Click to confirm
-
+ 0 αντικείμενο +
@@ -3893,9 +3919,11 @@ exports[`Locale Provider should display the text as el 1`] = `
-
+ 0 αντικείμενο +
@@ -4410,9 +4438,11 @@ exports[`Locale Provider should display the text as en 1`] = ` Click to confirm
-
+ 0 item +
@@ -4435,9 +4465,11 @@ exports[`Locale Provider should display the text as en 1`] = `
-
+ 0 item +
@@ -4952,9 +4984,11 @@ exports[`Locale Provider should display the text as en-gb 1`] = ` Click to confirm
-
+ 0 item +
@@ -4977,9 +5011,11 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
-
+ 0 item +
@@ -5494,9 +5530,11 @@ exports[`Locale Provider should display the text as es 1`] = ` Click to confirm
-
+ 0 elemento +
@@ -5519,9 +5557,11 @@ exports[`Locale Provider should display the text as es 1`] = `
-
+ 0 elemento +
@@ -6036,9 +6076,11 @@ exports[`Locale Provider should display the text as et 1`] = ` Click to confirm
-
+ 0 kogus +
@@ -6061,9 +6103,11 @@ exports[`Locale Provider should display the text as et 1`] = `
-
+ 0 kogus +
@@ -6578,9 +6622,11 @@ exports[`Locale Provider should display the text as fa 1`] = ` Click to confirm
-
+ 0 +
@@ -6603,9 +6649,11 @@ exports[`Locale Provider should display the text as fa 1`] = `
-
+ 0 +
@@ -7120,9 +7168,11 @@ exports[`Locale Provider should display the text as fi 1`] = ` Click to confirm
-
+ 0 kohde +
@@ -7145,9 +7195,11 @@ exports[`Locale Provider should display the text as fi 1`] = `
-
+ 0 kohde +
@@ -7662,9 +7714,11 @@ exports[`Locale Provider should display the text as fr 1`] = ` Click to confirm
-
+ 0 élément +
@@ -7687,9 +7741,11 @@ exports[`Locale Provider should display the text as fr 1`] = `
-
+ 0 élément +
@@ -8204,9 +8260,11 @@ exports[`Locale Provider should display the text as fr 2`] = ` Click to confirm
-
+ 0 élément +
@@ -8229,9 +8287,11 @@ exports[`Locale Provider should display the text as fr 2`] = `
-
+ 0 élément +
@@ -8746,9 +8806,11 @@ exports[`Locale Provider should display the text as he 1`] = ` Click to confirm
-
+ 0 פריט +
@@ -8771,9 +8833,11 @@ exports[`Locale Provider should display the text as he 1`] = `
-
+ 0 פריט +
@@ -9288,9 +9352,11 @@ exports[`Locale Provider should display the text as hi 1`] = ` Click to confirm
-
+ 0 तत्त्व +
@@ -9313,9 +9379,11 @@ exports[`Locale Provider should display the text as hi 1`] = `
-
+ 0 तत्त्व +
@@ -9830,9 +9898,11 @@ exports[`Locale Provider should display the text as hr 1`] = ` Click to confirm
-
+ 0 stavka +
@@ -9855,9 +9925,11 @@ exports[`Locale Provider should display the text as hr 1`] = `
-
+ 0 stavka +
@@ -10372,9 +10444,11 @@ exports[`Locale Provider should display the text as hu 1`] = ` Click to confirm
-
+ 0 elem +
@@ -10397,9 +10471,11 @@ exports[`Locale Provider should display the text as hu 1`] = `
-
+ 0 elem +
@@ -10914,9 +10990,11 @@ exports[`Locale Provider should display the text as hy 1`] = ` Click to confirm
-
+ 0 պարագան +
@@ -10939,9 +11017,11 @@ exports[`Locale Provider should display the text as hy 1`] = `
-
+ 0 պարագան +
@@ -11456,9 +11536,11 @@ exports[`Locale Provider should display the text as id 1`] = ` Click to confirm
-
+ 0 item +
@@ -11481,9 +11563,11 @@ exports[`Locale Provider should display the text as id 1`] = `
-
+ 0 item +
@@ -11998,9 +12082,11 @@ exports[`Locale Provider should display the text as is 1`] = ` Click to confirm
-
+ 0 færsla +
@@ -12023,9 +12109,11 @@ exports[`Locale Provider should display the text as is 1`] = `
-
+ 0 færsla +
@@ -12540,9 +12628,11 @@ exports[`Locale Provider should display the text as it 1`] = ` Click to confirm
-
+ 0 elemento +
@@ -12565,9 +12655,11 @@ exports[`Locale Provider should display the text as it 1`] = `
-
+ 0 elemento +
@@ -13082,9 +13174,11 @@ exports[`Locale Provider should display the text as ja 1`] = ` Click to confirm
-
+ 0 アイテム +
@@ -13107,9 +13201,11 @@ exports[`Locale Provider should display the text as ja 1`] = `
-
+ 0 アイテム +
@@ -13624,9 +13720,11 @@ exports[`Locale Provider should display the text as kn 1`] = ` Click to confirm
-
+ 0 ವಿಷಯ +
@@ -13649,9 +13747,11 @@ exports[`Locale Provider should display the text as kn 1`] = `
-
+ 0 ವಿಷಯ +
@@ -14166,9 +14266,11 @@ exports[`Locale Provider should display the text as ko 1`] = ` Click to confirm
-
+ 0 개 +
@@ -14191,9 +14293,11 @@ exports[`Locale Provider should display the text as ko 1`] = `
-
+ 0 개 +
@@ -14708,9 +14812,11 @@ exports[`Locale Provider should display the text as ku-iq 1`] = ` Click to confirm
-
+ 0 tişt +
@@ -14733,9 +14839,11 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
-
+ 0 tişt +
@@ -15250,9 +15358,11 @@ exports[`Locale Provider should display the text as lv 1`] = ` Click to confirm
-
+ 0 vienumu +
@@ -15275,9 +15385,11 @@ exports[`Locale Provider should display the text as lv 1`] = `
-
+ 0 vienumu +
@@ -15792,9 +15904,11 @@ exports[`Locale Provider should display the text as mk 1`] = ` Click to confirm
-
+ 0 предмет +
@@ -15817,9 +15931,11 @@ exports[`Locale Provider should display the text as mk 1`] = `
-
+ 0 предмет +
@@ -16334,9 +16450,11 @@ exports[`Locale Provider should display the text as mn-mn 1`] = ` Click to confirm
-
+ 0 Зүйл +
@@ -16359,9 +16477,11 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
-
+ 0 Зүйл +
@@ -16876,9 +16996,11 @@ exports[`Locale Provider should display the text as ms-my 1`] = ` Click to confirm
-
+ 0 item +
@@ -16901,9 +17023,11 @@ exports[`Locale Provider should display the text as ms-my 1`] = `
-
+ 0 item +
@@ -17418,9 +17542,11 @@ exports[`Locale Provider should display the text as nb 1`] = ` Click to confirm
-
+ 0 element +
@@ -17443,9 +17569,11 @@ exports[`Locale Provider should display the text as nb 1`] = `
-
+ 0 element +
@@ -17960,9 +18088,11 @@ exports[`Locale Provider should display the text as ne-np 1`] = ` Click to confirm
-
+ 0 वस्तु +
@@ -17985,9 +18115,11 @@ exports[`Locale Provider should display the text as ne-np 1`] = `
-
+ 0 वस्तु +
@@ -18502,9 +18634,11 @@ exports[`Locale Provider should display the text as nl 1`] = ` Click to confirm
-
+ 0 item +
@@ -18527,9 +18661,11 @@ exports[`Locale Provider should display the text as nl 1`] = `
-
+ 0 item +
@@ -19044,9 +19180,11 @@ exports[`Locale Provider should display the text as nl-be 1`] = ` Click to confirm
-
+ 0 item +
@@ -19069,9 +19207,11 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
-
+ 0 item +
@@ -19586,9 +19726,11 @@ exports[`Locale Provider should display the text as pl 1`] = ` Click to confirm
-
+ 0 obiekt +
@@ -19611,9 +19753,11 @@ exports[`Locale Provider should display the text as pl 1`] = `
-
+ 0 obiekt +
@@ -20128,9 +20272,11 @@ exports[`Locale Provider should display the text as pt 1`] = ` Click to confirm
-
+ 0 item +
@@ -20153,9 +20299,11 @@ exports[`Locale Provider should display the text as pt 1`] = `
-
+ 0 item +
@@ -20670,9 +20818,11 @@ exports[`Locale Provider should display the text as pt-br 1`] = ` Click to confirm
-
+ 0 item +
@@ -20695,9 +20845,11 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
-
+ 0 item +
@@ -21212,9 +21364,11 @@ exports[`Locale Provider should display the text as ro 1`] = ` Click to confirm
-
+ 0 element +
@@ -21237,9 +21391,11 @@ exports[`Locale Provider should display the text as ro 1`] = `
-
+ 0 element +
@@ -21754,9 +21910,11 @@ exports[`Locale Provider should display the text as ru 1`] = ` Click to confirm
-
+ 0 элем. +
@@ -21779,9 +21937,11 @@ exports[`Locale Provider should display the text as ru 1`] = `
-
+ 0 элем. +
@@ -22296,9 +22456,11 @@ exports[`Locale Provider should display the text as sk 1`] = ` Click to confirm
-
+ 0 položka +
@@ -22321,9 +22483,11 @@ exports[`Locale Provider should display the text as sk 1`] = `
-
+ 0 položka +
@@ -22838,9 +23002,11 @@ exports[`Locale Provider should display the text as sl 1`] = ` Click to confirm
-
+ 0 Objekt +
@@ -22863,9 +23029,11 @@ exports[`Locale Provider should display the text as sl 1`] = `
-
+ 0 Objekt +
@@ -23380,9 +23548,11 @@ exports[`Locale Provider should display the text as sr 1`] = ` Click to confirm
-
+ 0 stavka +
@@ -23405,9 +23575,11 @@ exports[`Locale Provider should display the text as sr 1`] = `
-
+ 0 stavka +
@@ -23922,9 +24094,11 @@ exports[`Locale Provider should display the text as sv 1`] = ` Click to confirm
-
+ 0 element +
@@ -23947,9 +24121,11 @@ exports[`Locale Provider should display the text as sv 1`] = `
-
+ 0 element +
@@ -24464,9 +24640,11 @@ exports[`Locale Provider should display the text as ta 1`] = ` Click to confirm
-
+ 0 தகவல் +
@@ -24489,9 +24667,11 @@ exports[`Locale Provider should display the text as ta 1`] = `
-
+ 0 தகவல் +
@@ -25006,9 +25186,11 @@ exports[`Locale Provider should display the text as th 1`] = ` Click to confirm
-
+ 0 ชิ้น +
@@ -25031,9 +25213,11 @@ exports[`Locale Provider should display the text as th 1`] = `
-
+ 0 ชิ้น +
@@ -25548,9 +25732,11 @@ exports[`Locale Provider should display the text as tr 1`] = ` Click to confirm
-
+ 0 Öğe +
@@ -25573,9 +25759,11 @@ exports[`Locale Provider should display the text as tr 1`] = `
-
+ 0 Öğe +
@@ -26090,9 +26278,11 @@ exports[`Locale Provider should display the text as uk 1`] = ` Click to confirm
-
+ 0 item +
@@ -26115,9 +26305,11 @@ exports[`Locale Provider should display the text as uk 1`] = `
-
+ 0 item +
@@ -26632,9 +26824,11 @@ exports[`Locale Provider should display the text as vi 1`] = ` Click to confirm
-
+ 0 mục +
@@ -26657,9 +26851,11 @@ exports[`Locale Provider should display the text as vi 1`] = `
-
+ 0 mục +
@@ -27174,9 +27370,11 @@ exports[`Locale Provider should display the text as zh-cn 1`] = ` Click to confirm
-
+ 0 项 +
@@ -27199,9 +27397,11 @@ exports[`Locale Provider should display the text as zh-cn 1`] = `
-
+ 0 项 +
@@ -27716,9 +27916,11 @@ exports[`Locale Provider should display the text as zh-tw 1`] = ` Click to confirm
-
+ 0 項目 +
@@ -27741,9 +27943,11 @@ exports[`Locale Provider should display the text as zh-tw 1`] = `
-
+ 0 項目 +
diff --git a/components/slider/__tests__/index.test.js b/components/slider/__tests__/index.test.js index 71e5ad3cb..f2a1af21c 100644 --- a/components/slider/__tests__/index.test.js +++ b/components/slider/__tests__/index.test.js @@ -19,9 +19,9 @@ describe('Slider', () => { await asyncExpect(() => { expect(document.body.innerHTML).toMatchSnapshot(); wrapper.findAll('.ant-slider-handle')[0].trigger('mouseleave'); - }, 0); + }, 100); await asyncExpect(() => { expect(document.body.innerHTML).toMatchSnapshot(); - }, 0); + }, 100); }); }); diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 1b9b0c301..875e1562f 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -775,9 +775,12 @@ // Transfer // --- @transfer-header-height: 40px; +@transfer-item-height: @height-base; @transfer-disabled-bg: @disabled-bg; @transfer-list-height: 200px; @transfer-item-hover-bg: @item-hover-bg; +@transfer-item-padding-vertical: 6px; +@transfer-list-search-icon-top: 12px; // Message // --- diff --git a/components/tooltip/Tooltip.tsx b/components/tooltip/Tooltip.tsx index ab81c82c5..7613115fe 100644 --- a/components/tooltip/Tooltip.tsx +++ b/components/tooltip/Tooltip.tsx @@ -1,21 +1,33 @@ import type { ExtractPropTypes, CSSProperties } from 'vue'; -import { defineComponent, inject } from 'vue'; +import { computed, watch } from 'vue'; +import { defineComponent, onMounted, ref } from 'vue'; import VcTooltip from '../vc-tooltip'; import classNames from '../_util/classNames'; -import getPlacements from './placements'; import PropTypes from '../_util/vue-types'; import { PresetColorTypes } from '../_util/colors'; -import { - hasProp, - getComponent, - getStyle, - filterEmpty, - getSlot, - isValidElement, -} from '../_util/props-util'; +import warning from '../_util/warning'; +import { getPropsSlot, getStyle, filterEmpty, isValidElement } from '../_util/props-util'; import { cloneElement } from '../_util/vnode'; -import { defaultConfigProvider } from '../config-provider'; +import type { triggerTypes, placementTypes } from './abstractTooltipProps'; import abstractTooltipProps from './abstractTooltipProps'; +import useConfigInject from '../_util/hooks/useConfigInject'; +import getPlacements, { AdjustOverflow, PlacementsConfig } from './placements'; + +export { AdjustOverflow, PlacementsConfig }; + +export type TooltipPlacement = typeof placementTypes; + +// https://github.com/react-component/tooltip +// https://github.com/yiminghe/dom-align +export interface TooltipAlignConfig { + points?: [string, string]; + offset?: [number | string, number | string]; + targetOffset?: [number | string, number | string]; + overflow?: { adjustX: boolean; adjustY: boolean }; + useCssRight?: boolean; + useCssBottom?: boolean; + useCssTransform?: boolean; +} const splitObject = (obj: any, keys: string[]) => { const picked = {}; @@ -37,6 +49,10 @@ const tooltipProps = { title: PropTypes.VNodeChild, }; +export type TriggerTypes = typeof triggerTypes[number]; + +export type PlacementTypes = typeof placementTypes[number]; + export type TooltipProps = Partial>; export default defineComponent({ @@ -44,52 +60,59 @@ export default defineComponent({ inheritAttrs: false, props: tooltipProps, emits: ['update:visible', 'visibleChange'], - setup() { - return { - configProvider: inject('configProvider', defaultConfigProvider), - }; - }, - data() { - return { - sVisible: !!this.$props.visible || !!this.$props.defaultVisible, - }; - }, - watch: { - visible(val) { - this.sVisible = val; - }, - }, - methods: { - handleVisibleChange(visible: boolean) { - if (!hasProp(this, 'visible')) { - this.sVisible = this.isNoTitle() ? false : visible; - } - if (!this.isNoTitle()) { - this.$emit('update:visible', visible); - this.$emit('visibleChange', visible); - } - }, + setup(props, { slots, emit, attrs, expose }) { + const { prefixCls, getTargetContainer } = useConfigInject('tooltip', props); - getPopupDomNode() { - return (this.$refs.tooltip as any).getPopupDomNode(); - }, + const visible = ref(false); - getPlacements() { - const { builtinPlacements, arrowPointAtCenter, autoAdjustOverflow } = this.$props; + const tooltip = ref(); + + onMounted(() => { + warning( + !('default-visible' in attrs) || !('defaultVisible' in attrs), + 'Tooltip', + `'defaultVisible' is deprecated, please use 'v-model:visible'`, + ); + }); + watch( + () => props.visible, + val => { + visible.value = !!val; + }, + { immediate: true }, + ); + + const isNoTitle = () => { + const title = getPropsSlot(slots, props, 'title'); + return !title && title !== 0; + }; + + const handleVisibleChange = (val: boolean) => { + visible.value = isNoTitle() ? false : val; + if (!isNoTitle()) { + emit('update:visible', val); + emit('visibleChange', val); + } + }; + + const getPopupDomNode = () => { + return tooltip.value.getPopupDomNode(); + }; + + expose({ getPopupDomNode, visible }); + + const tooltipPlacements = computed(() => { + const { builtinPlacements, arrowPointAtCenter, autoAdjustOverflow } = props; return ( builtinPlacements || getPlacements({ arrowPointAtCenter, - verticalArrowShift: 8, autoAdjustOverflow, }) ); - }, + }); - // Fix Tooltip won't hide at disabled button - // mouse events don't trigger at disabled button in Chrome - // https://github.com/react-component/tooltip/issues/18 - getDisabledCompatibleChildren(ele: any) { + const getDisabledCompatibleChildren = (ele: any) => { if ( ((typeof ele.type === 'object' && (ele.type.__ANT_BUTTON === true || @@ -128,27 +151,22 @@ export default defineComponent({ }, true, ); - return {child}; + return ( + + {child} + + ); } return ele; - }, + }; - isNoTitle() { - const title = getComponent(this, 'title'); - return !title && title !== 0; - }, + const getOverlay = () => { + const title = getPropsSlot(slots, props, 'title'); + return title ?? ''; + }; - getOverlay() { - const title = getComponent(this, 'title'); - if (title === 0) { - return title; - } - return title || ''; - }, - - // 动态设置动画点 - onPopupAlign(domNode: HTMLElement, align: any) { - const placements = this.getPlacements(); + const onPopupAlign = (domNode: HTMLElement, align: any) => { + const placements = tooltipPlacements.value; // 当前返回的位置 const placement = Object.keys(placements).filter( key => @@ -175,67 +193,64 @@ export default defineComponent({ transformOrigin.left = `${-align.offset[0]}px`; } domNode.style.transformOrigin = `${transformOrigin.left} ${transformOrigin.top}`; - }, - }, - - render() { - const { $props, $data, $attrs } = this; - const { - prefixCls: customizePrefixCls, - openClassName, - getPopupContainer, - color, - overlayClassName, - } = $props; - const { getPopupContainer: getContextPopupContainer } = this.configProvider; - const getPrefixCls = this.configProvider.getPrefixCls; - const prefixCls = getPrefixCls('tooltip', customizePrefixCls); - let children = this.children || filterEmpty(getSlot(this)); - children = children.length === 1 ? children[0] : children; - let sVisible = $data.sVisible; - // Hide tooltip when there is no title - if (!hasProp(this, 'visible') && this.isNoTitle()) { - sVisible = false; - } - if (!children) { - return null; - } - const child = this.getDisabledCompatibleChildren( - isValidElement(children) ? children : {children}, - ); - const childCls = classNames({ - [openClassName || `${prefixCls}-open`]: sVisible, - [child.props && child.props.class]: child.props && child.props.class, - }); - const customOverlayClassName = classNames(overlayClassName, { - [`${prefixCls}-${color}`]: color && PresetColorRegex.test(color), - }); - let formattedOverlayInnerStyle: CSSProperties; - let arrowContentStyle: CSSProperties; - if (color && !PresetColorRegex.test(color)) { - formattedOverlayInnerStyle = { backgroundColor: color }; - arrowContentStyle = { backgroundColor: color }; - } - - const vcTooltipProps = { - ...$attrs, - ...$props, - prefixCls, - getTooltipContainer: getPopupContainer || getContextPopupContainer, - builtinPlacements: this.getPlacements(), - overlay: this.getOverlay(), - visible: sVisible, - ref: 'tooltip', - overlayClassName: customOverlayClassName, - overlayInnerStyle: formattedOverlayInnerStyle, - arrowContent: , - onVisibleChange: this.handleVisibleChange, - onPopupAlign: this.onPopupAlign, }; - return ( - - {sVisible ? cloneElement(child, { class: childCls }) : child} - - ); + + return () => { + const { openClassName, getPopupContainer, color, overlayClassName } = props; + let children = filterEmpty(slots.default?.()) ?? null; + children = children.length === 1 ? children[0] : children; + + let tempVisible = visible.value; + // Hide tooltip when there is no title + if (props.visible === undefined && isNoTitle()) { + tempVisible = false; + } + if (!children) { + return null; + } + const child = getDisabledCompatibleChildren( + isValidElement(children) ? children : {children}, + ); + const childCls = classNames({ + [openClassName || `${prefixCls.value}-open`]: true, + [child.props && child.props.class]: child.props && child.props.class, + }); + const customOverlayClassName = classNames(overlayClassName, { + [`${prefixCls.value}-${color}`]: color && PresetColorRegex.test(color), + }); + let formattedOverlayInnerStyle: CSSProperties; + let arrowContentStyle: CSSProperties; + if (color && !PresetColorRegex.test(color)) { + formattedOverlayInnerStyle = { backgroundColor: color }; + arrowContentStyle = { backgroundColor: color }; + } + + const vcTooltipProps = { + ...attrs, + ...props, + prefixCls: prefixCls.value, + getTooltipContainer: getPopupContainer || getTargetContainer.value, + builtinPlacements: tooltipPlacements.value, + overlay: getOverlay(), + visible: tempVisible, + ref: tooltip, + overlayClassName: customOverlayClassName, + overlayInnerStyle: formattedOverlayInnerStyle, + onVisibleChange: handleVisibleChange, + onPopupAlign, + }; + return ( + ( + + ), + }} + > + {visible.value ? cloneElement(child, { class: childCls }) : child} + + ); + }; }, }); diff --git a/components/tooltip/__tests__/tooltip.test.js b/components/tooltip/__tests__/tooltip.test.js index f2fafbd15..f50f52b8f 100644 --- a/components/tooltip/__tests__/tooltip.test.js +++ b/components/tooltip/__tests__/tooltip.test.js @@ -5,7 +5,7 @@ import mountTest from '../../../tests/shared/mountTest'; describe('Tooltip', () => { mountTest(Tooltip); - it('check `onVisibleChange` arguments', async () => { + fit('check `onVisibleChange` arguments', async () => { const onVisibleChange = jest.fn(); const wrapper = mount( { @@ -44,14 +44,14 @@ describe('Tooltip', () => { }); await asyncExpect(() => { expect(onVisibleChange).not.toHaveBeenCalled(); - expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false); + expect(wrapper.vm.$refs.tooltip.visible).toBe(false); }); await asyncExpect(() => { div.dispatchEvent(new MouseEvent('mouseleave')); }); await asyncExpect(() => { expect(onVisibleChange).not.toHaveBeenCalled(); - expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false); + expect(wrapper.vm.$refs.tooltip.visible).toBe(false); }); await asyncExpect(() => { // update `title` value. @@ -62,14 +62,14 @@ describe('Tooltip', () => { }); await asyncExpect(() => { expect(onVisibleChange).toHaveBeenLastCalledWith(true); - expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(true); + expect(wrapper.vm.$refs.tooltip.visible).toBe(true); }, 0); await asyncExpect(() => { wrapper.findAll('#hello')[0].element.dispatchEvent(new MouseEvent('mouseleave')); }); await asyncExpect(() => { expect(onVisibleChange).toHaveBeenLastCalledWith(false); - expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false); + expect(wrapper.vm.$refs.tooltip.visible).toBe(false); }); await asyncExpect(() => { // add `visible` props. @@ -80,16 +80,16 @@ describe('Tooltip', () => { }); await asyncExpect(() => { expect(onVisibleChange).toHaveBeenLastCalledWith(true); - lastCount = onVisibleChange.mock.calls.length; - expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false); + expect(wrapper.vm.$refs.tooltip.visible).toBe(true); }); await asyncExpect(() => { // always trigger onVisibleChange wrapper.findAll('#hello')[0].element.dispatchEvent(new MouseEvent('mouseleave')); + lastCount = onVisibleChange.mock.calls.length; }); await asyncExpect(() => { expect(onVisibleChange.mock.calls.length).toBe(lastCount); // no change with lastCount - expect(wrapper.vm.$refs.tooltip.$refs.tooltip.visible).toBe(false); + expect(wrapper.vm.$refs.tooltip.visible).toBe(false); }); }); }); diff --git a/components/tooltip/abstractTooltipProps.ts b/components/tooltip/abstractTooltipProps.ts index be5e1067c..bbaf225cc 100644 --- a/components/tooltip/abstractTooltipProps.ts +++ b/components/tooltip/abstractTooltipProps.ts @@ -1,27 +1,30 @@ import PropTypes from '../_util/vue-types'; import { tuple } from '../_util/type'; -const triggerType = PropTypes.oneOf(tuple('hover', 'focus', 'click', 'contextmenu')); +export const triggerTypes = tuple('hover', 'focus', 'click', 'contextmenu'); + +export const placementTypes = tuple( + 'top', + 'left', + 'right', + 'bottom', + 'topLeft', + 'topRight', + 'bottomLeft', + 'bottomRight', + 'leftTop', + 'leftBottom', + 'rightTop', + 'rightBottom', +); export default () => ({ - trigger: PropTypes.oneOfType([triggerType, PropTypes.arrayOf(triggerType)]).def('hover'), + trigger: PropTypes.oneOfType([ + PropTypes.oneOf(triggerTypes), + PropTypes.arrayOf(PropTypes.oneOf(triggerTypes)), + ]).def('hover'), visible: PropTypes.looseBool, - defaultVisible: PropTypes.looseBool, - placement: PropTypes.oneOf( - tuple( - 'top', - 'left', - 'right', - 'bottom', - 'topLeft', - 'topRight', - 'bottomLeft', - 'bottomRight', - 'leftTop', - 'leftBottom', - 'rightTop', - 'rightBottom', - ), - ).def('top'), + // defaultVisible: PropTypes.looseBool, + placement: PropTypes.oneOf(placementTypes).def('top'), color: PropTypes.string, transitionName: PropTypes.string.def('zoom-big-fast'), overlayStyle: PropTypes.object.def(() => ({})), diff --git a/components/tooltip/index.ts b/components/tooltip/index.ts index b4e1a468f..54c0fb092 100644 --- a/components/tooltip/index.ts +++ b/components/tooltip/index.ts @@ -1,6 +1,12 @@ import { withInstall } from '../_util/type'; import ToolTip from './Tooltip'; -export { TooltipProps } from './Tooltip'; +export type { + TooltipProps, + AdjustOverflow, + PlacementsConfig, + TooltipAlignConfig, + PlacementTypes, +} from './Tooltip'; export default withInstall(ToolTip); diff --git a/components/tooltip/placements.ts b/components/tooltip/placements.ts index b529f1e75..dc90048b8 100644 --- a/components/tooltip/placements.ts +++ b/components/tooltip/placements.ts @@ -1,4 +1,4 @@ -import { placements as rcPlacements } from '../vc-tooltip/placements'; +import { placements } from '../vc-tooltip/src/placements'; const autoAdjustOverflowEnabled = { adjustX: 1, @@ -12,15 +12,20 @@ const autoAdjustOverflowDisabled = { const targetOffset = [0, 0]; -interface PlacementsConfig { - arrowPointAtCenter: boolean; - arrowWidth?: number; - verticalArrowShift?: number; - horizontalArrowShift?: number; - autoAdjustOverflow?: boolean | Object; +export interface AdjustOverflow { + adjustX?: 0 | 1; + adjustY?: 0 | 1; } -export function getOverflowOptions(autoAdjustOverflow: boolean | Object) { +export interface PlacementsConfig { + arrowWidth?: number; + horizontalArrowShift?: number; + verticalArrowShift?: number; + arrowPointAtCenter?: boolean; + autoAdjustOverflow?: boolean | AdjustOverflow; +} + +export function getOverflowOptions(autoAdjustOverflow?: boolean | AdjustOverflow) { if (typeof autoAdjustOverflow === 'boolean') { return autoAdjustOverflow ? autoAdjustOverflowEnabled : autoAdjustOverflowDisabled; } @@ -34,8 +39,8 @@ export default function getPlacements(config: PlacementsConfig) { const { arrowWidth = 5, horizontalArrowShift = 16, - verticalArrowShift = 12, - autoAdjustOverflow = true, + verticalArrowShift = 8, + autoAdjustOverflow, } = config; const placementMap = { left: { @@ -95,9 +100,10 @@ export default function getPlacements(config: PlacementsConfig) { targetOffset, } : { - ...rcPlacements[key], + ...placements[key], overflow: getOverflowOptions(autoAdjustOverflow), }; + placementMap[key].ignoreShake = true; }); return placementMap; diff --git a/components/tooltip/style/index.less b/components/tooltip/style/index.less index 899a47802..73c9059ee 100644 --- a/components/tooltip/style/index.less +++ b/components/tooltip/style/index.less @@ -18,6 +18,7 @@ position: absolute; z-index: @zindex-tooltip; display: block; + width: max-content; max-width: @tooltip-max-width; visibility: visible; @@ -202,3 +203,5 @@ } } .generator-tooltip-preset-color(); + +@import './rtl'; diff --git a/components/tooltip/style/rtl.less b/components/tooltip/style/rtl.less new file mode 100644 index 000000000..77d09a3f8 --- /dev/null +++ b/components/tooltip/style/rtl.less @@ -0,0 +1,14 @@ +@tooltip-prefix-cls: ~'@{ant-prefix}-tooltip'; + +// Base class +.@{tooltip-prefix-cls} { + &-rtl { + direction: rtl; + } + // Wrapper for the tooltip content + &-inner { + .@{tooltip-prefix-cls}-rtl & { + text-align: right; + } + } +} diff --git a/components/transfer/ListBody.tsx b/components/transfer/ListBody.tsx new file mode 100644 index 000000000..1525cd13d --- /dev/null +++ b/components/transfer/ListBody.tsx @@ -0,0 +1,165 @@ +import type { ExtractPropTypes } from 'vue'; +import { defineComponent, computed, ref, watch } from 'vue'; +import classNames from '../_util/classNames'; +import ListItem from './ListItem'; +import Pagination from '../pagination'; +import PropTypes from '../_util/vue-types'; +import type { TransferItem } from '.'; + +export const transferListBodyProps = { + prefixCls: PropTypes.string, + filteredRenderItems: PropTypes.array.def([]), + selectedKeys: PropTypes.array, + disabled: PropTypes.looseBool, + showRemove: PropTypes.looseBool, + pagination: PropTypes.any, + onItemSelect: PropTypes.func, + onScroll: PropTypes.func, + onItemRemove: PropTypes.func, +}; + +export type TransferListBodyProps = Partial>; + +function parsePagination(pagination) { + if (!pagination) { + return null; + } + + const defaultPagination = { + pageSize: 10, + }; + + if (typeof pagination === 'object') { + return { + ...defaultPagination, + ...pagination, + }; + } + + return defaultPagination; +} + +const ListBody = defineComponent({ + name: 'ListBody', + inheritAttrs: false, + props: transferListBodyProps, + emits: ['itemSelect', 'itemRemove', 'scroll'], + setup(props, { emit, expose }) { + const current = ref(1); + + const handleItemSelect = (item: TransferItem) => { + const { selectedKeys } = props; + const checked = selectedKeys.indexOf(item.key) >= 0; + emit('itemSelect', item.key, !checked); + }; + + const handleItemRemove = (item: TransferItem) => { + emit('itemRemove', item.key); + }; + + const handleScroll = (e: Event) => { + emit('scroll', e); + }; + + const mergedPagination = computed(() => parsePagination(props.pagination)); + + watch( + [mergedPagination, () => props.filteredRenderItems], + () => { + if (mergedPagination.value) { + // Calculate the page number + const maxPageCount = Math.ceil( + props.filteredRenderItems.length / mergedPagination.value.pageSize, + ); + + if (current.value > maxPageCount) { + current.value = maxPageCount; + } + } + }, + { immediate: true }, + ); + const items = computed(() => { + const { filteredRenderItems } = props; + + let displayItems = filteredRenderItems; + + if (mergedPagination.value) { + displayItems = filteredRenderItems.slice( + (current.value - 1) * mergedPagination.value.pageSize, + current.value * mergedPagination.value.pageSize, + ); + } + + return displayItems; + }); + + const onPageChange = (cur: number) => { + current.value = cur; + }; + + expose({ items }); + + return () => { + const { + prefixCls, + filteredRenderItems, + selectedKeys, + disabled: globalDisabled, + showRemove, + } = props; + + let paginationNode = null; + + if (mergedPagination.value) { + paginationNode = ( + + ); + } + + const itemsList = items.value.map(({ renderedEl, renderedText, item }: any) => { + const { disabled } = item; + const checked = selectedKeys.indexOf(item.key) >= 0; + + return ( + + ); + }); + return ( + <> +
    + {itemsList} +
+ {paginationNode} + + ); + }; + }, +}); + +export default ListBody; diff --git a/components/transfer/ListItem.tsx b/components/transfer/ListItem.tsx index 66e03f0d9..8ffa22735 100644 --- a/components/transfer/ListItem.tsx +++ b/components/transfer/ListItem.tsx @@ -1,66 +1,93 @@ -import PropTypes, { withUndefined } from '../_util/vue-types'; +import PropTypes from '../_util/vue-types'; import classNames from '../_util/classNames'; -import Lazyload from '../vc-lazy-load'; +import type { TransferLocale } from '.'; +import DeleteOutlined from '@ant-design/icons-vue/DeleteOutlined'; +import defaultLocale from '../locale/default'; import Checkbox from '../checkbox'; +import TransButton from '../_util/transButton'; +import LocaleReceiver from '../locale-provider/LocaleReceiver'; +import type { ExtractPropTypes } from 'vue'; import { defineComponent } from 'vue'; function noop() {} +export const transferListItemProps = { + renderedText: PropTypes.any, + renderedEl: PropTypes.any, + item: PropTypes.any, + checked: PropTypes.looseBool, + prefixCls: PropTypes.string, + disabled: PropTypes.looseBool, + showRemove: PropTypes.looseBool, + onClick: PropTypes.func, + onRemove: PropTypes.func, +}; + +export type TransferListItemProps = Partial>; + export default defineComponent({ name: 'ListItem', inheritAttrs: false, - props: { - renderedText: PropTypes.any, - renderedEl: PropTypes.any, - item: PropTypes.any, - lazy: withUndefined(PropTypes.oneOfType([PropTypes.looseBool, PropTypes.object])), - checked: PropTypes.looseBool, - prefixCls: PropTypes.string, - disabled: PropTypes.looseBool, - onClick: PropTypes.func, - }, - render() { - const { renderedText, renderedEl, item, lazy, checked, disabled, prefixCls } = this.$props; + props: transferListItemProps, + emits: ['click', 'remove'], + setup(props, { emit }) { + return () => { + const { renderedText, renderedEl, item, checked, disabled, prefixCls, showRemove } = props; + const className = classNames({ + [`${prefixCls}-content-item`]: true, + [`${prefixCls}-content-item-disabled`]: disabled || item.disabled, + }); - const className = classNames({ - [`${prefixCls}-content-item`]: true, - [`${prefixCls}-content-item-disabled`]: disabled || item.disabled, - }); + let title: string; + if (typeof renderedText === 'string' || typeof renderedText === 'number') { + title = String(renderedText); + } - let title; - if (typeof renderedText === 'string' || typeof renderedText === 'number') { - title = String(renderedText); - } + return ( + + {(transferLocale: TransferLocale) => { + const labelNode = {renderedEl}; + if (showRemove) { + return ( +
  • + {labelNode} + { + emit('remove', item); + }} + > + + +
    • + ); + } - const listItem = ( -
  • { - this.$emit('click', item); - } - } - > - - {renderedEl} -
    • - ); - let children = null; - if (lazy) { - const lazyProps = { - height: 32, - offset: 500, - throttle: 0, - debounce: false, - ...(lazy as any), - }; - children = {listItem}; - } else { - children = listItem; - } - return children; + return ( +
  • { + emit('click', item); + } + } + > + + {labelNode} +
    • + ); + }} +     + ); + }; }, }); diff --git a/components/transfer/__tests__/__snapshots__/index.test.js.snap b/components/transfer/__tests__/__snapshots__/index.test.js.snap index f10aa44b3..fa59514b6 100644 --- a/components/transfer/__tests__/__snapshots__/index.test.js.snap +++ b/components/transfer/__tests__/__snapshots__/index.test.js.snap @@ -3,34 +3,40 @@ exports[`Transfer should render correctly 1`] = `
    -
    + 1/2 items +
      -
      • -
    +
    -
    + 1 item +
      -
    +
    @@ -40,34 +46,40 @@ exports[`Transfer should render correctly 1`] = ` exports[`Transfer should show sorted targetkey 1`] = `
    -
    + 1 item +
      -
    • a
    +
    -
    + 2 items +
      -
    • c
      • -
    • b
    +
    diff --git a/components/transfer/__tests__/__snapshots__/list.test.js.snap b/components/transfer/__tests__/__snapshots__/list.test.js.snap index 45b4b10cf..cb224dedd 100644 --- a/components/transfer/__tests__/__snapshots__/list.test.js.snap +++ b/components/transfer/__tests__/__snapshots__/list.test.js.snap @@ -2,22 +2,25 @@ exports[`List should render correctly 1`] = `
    -
    + 1/3 +
      -
      • -
      • -
    +
    diff --git a/components/transfer/__tests__/index.test.js b/components/transfer/__tests__/index.test.js index abc4905ab..ab2a3f18a 100644 --- a/components/transfer/__tests__/index.test.js +++ b/components/transfer/__tests__/index.test.js @@ -90,19 +90,28 @@ const searchTransferProps = { describe('Transfer', () => { mountTest(Transfer); it('should render correctly', () => { - const props = { - props: listCommonProps, - }; - const wrapper = mount(Transfer, props); + const wrapper = mount({ + setup() { + return () => ; + }, + }); + expect(wrapper.html()).toMatchSnapshot(); }); it('should move selected keys to corresponding list', done => { const handleChange = jest.fn(); - const wrapper = mount(Transfer, { - props: { ...listCommonProps, onChange: handleChange }, - sync: false, - }); + + const wrapper = mount( + { + setup() { + return () => ; + }, + }, + { + sync: false, + }, + ); Vue.nextTick(() => { wrapper.findAll('.ant-btn')[0].trigger('click'); // move selected keys to right list expect(handleChange).toHaveBeenCalledWith(['a', 'b'], 'right', ['a']); @@ -111,10 +120,16 @@ describe('Transfer', () => { }); it('should move selected keys expect disabled to corresponding list', done => { const handleChange = jest.fn(); - const wrapper = mount(Transfer, { - props: { ...listDisabledProps, onChange: handleChange }, - sync: false, - }); + const wrapper = mount( + { + setup() { + return () => ; + }, + }, + { + sync: false, + }, + ); Vue.nextTick(() => { wrapper.findAll('.ant-btn')[0].trigger('click'); expect(handleChange).toHaveBeenCalledWith(['b'], 'right', ['b']); @@ -124,10 +139,18 @@ describe('Transfer', () => { it('should uncheck checkbox when click on checked item', async () => { const handleSelectChange = jest.fn(); - const wrapper = mount(Transfer, { - props: { ...listCommonProps, onSelectChange: handleSelectChange }, - sync: false, - }); + + const wrapper = mount( + { + setup() { + return () => ; + }, + }, + { + sync: false, + }, + ); + await sleep(); wrapper.findAll('.ant-transfer-list-content-item')[0].trigger('click'); expect(handleSelectChange).toHaveBeenLastCalledWith([], []); @@ -135,10 +158,18 @@ describe('Transfer', () => { it('should check checkbox when click on unchecked item', async () => { const handleSelectChange = jest.fn(); - const wrapper = mount(Transfer, { - props: { ...listCommonProps, onSelectChange: handleSelectChange }, - sync: false, - }); + + const wrapper = mount( + { + setup() { + return () => ; + }, + }, + { + sync: false, + }, + ); + await sleep(); wrapper.findAll('.ant-transfer-list-content-item')[2].trigger('click'); await sleep(); @@ -147,10 +178,18 @@ describe('Transfer', () => { it('should not check checkbox when click on disabled item', async () => { const handleSelectChange = jest.fn(); - const wrapper = mount(Transfer, { - props: { ...listCommonProps, onSelectChange: handleSelectChange }, - sync: false, - }); + + const wrapper = mount( + { + setup() { + return () => ; + }, + }, + { + sync: false, + }, + ); + await sleep(); wrapper.findAll('.ant-transfer-list-content-item')[1].trigger('click'); expect(handleSelectChange).not.toHaveBeenCalled(); @@ -200,14 +239,26 @@ describe('Transfer', () => { it('should call `filterOption` when use input in search box', done => { const filterOption = (inputValue, option) => inputValue === option.title; - const wrapper = mount(Transfer, { - props: { - ...listCommonProps, - showSearch: true, - filterOption, + + const wrapper = mount( + { + setup() { + return () => ( + + ); + }, }, - sync: false, - }); + { + sync: false, + }, + ); + Vue.nextTick(() => { const input = wrapper.findAll('.ant-transfer-list-body-search-wrapper input')[0]; input.element.value = 'a'; @@ -227,15 +278,26 @@ describe('Transfer', () => { it('should display the correct count of items when filter by input', done => { const filterOption = (inputValue, option) => option.description.indexOf(inputValue) > -1; const renderFunc = item => item.title; - const wrapper = mount(Transfer, { - props: { - ...searchTransferProps, - showSearch: true, - filterOption, - render: renderFunc, + const wrapper = mount( + { + setup() { + return () => ( + + ); + }, }, - sync: false, - }); + { + sync: false, + }, + ); + Vue.nextTick(() => { const input = wrapper.findAll('.ant-transfer-list-body-search-wrapper input')[0]; input.element.value = 'content2'; @@ -247,7 +309,7 @@ describe('Transfer', () => { .findAll('.ant-transfer-list-header-selected > span')[0] .text() .trim(), - ).toEqual('1 items'); + ).toEqual('1 item'); done(); }); }); @@ -395,14 +457,11 @@ describe('Transfer', () => { targetKeys: ['c', 'b'], lazy: false, }; - - const props = { - props: { - ...sortedTargetKeyProps, - render: item => item.title, + const wrapper = mount({ + setup() { + return () => item.title} />; }, - }; - const wrapper = mount(Transfer, props); + }); expect(wrapper.html()).toMatchSnapshot(); }); it('should add custom styles when their props are provided', async () => { diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx index 636f5de41..7199672e3 100644 --- a/components/transfer/index.tsx +++ b/components/transfer/index.tsx @@ -1,175 +1,154 @@ -import { defineComponent, inject } from 'vue'; +import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'; +import { watchEffect } from 'vue'; +import { defineComponent, ref, watch } from 'vue'; import PropTypes from '../_util/vue-types'; -import { hasProp, getOptionProps, getComponent } from '../_util/props-util'; -import initDefaultProps from '../_util/props-util/initDefaultProps'; -import BaseMixin from '../_util/BaseMixin'; +import { getPropsSlot } from '../_util/props-util'; import classNames from '../_util/classNames'; import List from './list'; import Operation from './operation'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; import defaultLocale from '../locale-provider/default'; import type { RenderEmptyHandler } from '../config-provider'; -import { defaultConfigProvider } from '../config-provider'; +import type { VueNode } from '../_util/type'; import { withInstall } from '../_util/type'; +import useConfigInject from '../_util/hooks/useConfigInject'; +import type { TransferListBodyProps } from './ListBody'; +import type { PaginationType } from './interface'; + +export type { TransferListProps } from './list'; +export type { TransferOperationProps } from './operation'; +export type { TransferSearchProps } from './search'; export type TransferDirection = 'left' | 'right'; -export const TransferItem = { - key: PropTypes.string.isRequired, - title: PropTypes.string.isRequired, - description: PropTypes.string, - disabled: PropTypes.looseBool, -}; +export interface RenderResultObject { + label: VueNode; + value: string; +} -export const TransferProps = { - prefixCls: PropTypes.string, - dataSource: PropTypes.arrayOf(PropTypes.shape(TransferItem).loose), - disabled: PropTypes.looseBool, - targetKeys: PropTypes.arrayOf(PropTypes.string), - selectedKeys: PropTypes.arrayOf(PropTypes.string), - render: PropTypes.func, - listStyle: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - operationStyle: PropTypes.object, - titles: PropTypes.arrayOf(PropTypes.string), - operations: PropTypes.arrayOf(PropTypes.string), - showSearch: PropTypes.looseBool, - filterOption: PropTypes.func, - searchPlaceholder: PropTypes.string, +export type RenderResult = VueNode | RenderResultObject | string | null; + +export interface TransferItem { + key?: string; + title?: string; + description?: string; + disabled?: boolean; + [name: string]: any; +} + +export type KeyWise = T & { key: string }; + +export type KeyWiseTransferItem = KeyWise; + +type TransferRender = (item: RecordType) => RenderResult; + +export interface ListStyle { + direction: TransferDirection; +} + +export type SelectAllLabel = + | VueNode + | ((info: { selectedCount: number; totalCount: number }) => VueNode); + +export interface TransferLocale { + titles: VueNode[]; + notFoundContent?: VueNode; + searchPlaceholder: string; + itemUnit: string; + itemsUnit: string; + remove: string; + selectAll: string; + selectCurrent: string; + selectInvert: string; + removeAll: string; + removeCurrent: string; +} + +export const transferProps = { + prefixCls: String, + dataSource: { type: Array as PropType, default: [] }, + disabled: { type: Boolean, default: undefined }, + targetKeys: { type: Array as PropType, default: undefined }, + selectedKeys: { type: Array as PropType, default: undefined }, + render: { type: Function as PropType> }, + listStyle: { + type: [Function, Object] as PropType<((style: ListStyle) => CSSProperties) | CSSProperties>, + default: () => ({}), + }, + operationStyle: PropTypes.style, + titles: { type: Array as PropType }, + operations: { type: Array as PropType }, + showSearch: { type: Boolean, default: false }, + filterOption: { type: Function as PropType<(inputValue: string, item: TransferItem) => boolean> }, + searchPlaceholder: String, notFoundContent: PropTypes.any, - locale: PropTypes.object, - rowKey: PropTypes.func, - lazy: PropTypes.oneOfType([PropTypes.object, PropTypes.looseBool]), - showSelectAll: PropTypes.looseBool, - children: PropTypes.any, + locale: { type: Object as PropType>, default: () => ({}) }, + rowKey: { type: Function as PropType<(record: TransferItem) => string> }, + showSelectAll: { type: Boolean, default: undefined }, + selectAllLabels: { type: Array as PropType }, + children: { type: Function as PropType<(props: TransferListBodyProps) => VueNode> }, + oneWay: { type: Boolean, default: undefined }, + pagination: { type: [Object, Boolean] as PropType, default: undefined }, onChange: PropTypes.func, onSelectChange: PropTypes.func, onSearchChange: PropTypes.func, onSearch: PropTypes.func, onScroll: PropTypes.func, + ['onUpdate:targetKeys']: PropTypes.func, }; -export interface TransferLocale { - titles: string[]; - notFoundContent: string; - searchPlaceholder: string; - itemUnit: string; - itemsUnit: string; -} +export type TransferProps = Partial>; const Transfer = defineComponent({ name: 'ATransfer', - mixins: [BaseMixin], inheritAttrs: false, - props: initDefaultProps(TransferProps, { - dataSource: [], - locale: {}, - showSearch: false, - listStyle: () => {}, - }), - setup() { - return { - separatedDataSource: null, - configProvider: inject('configProvider', defaultConfigProvider), - }; - }, - data() { - // vue 中 通过slot，不方便传递，保留notFoundContent及searchPlaceholder - // warning( - // !(getComponent(this, 'notFoundContent') || hasProp(this, 'searchPlaceholder')), - // 'Transfer[notFoundContent] and Transfer[searchPlaceholder] will be removed, ' + - // 'please use Transfer[locale] instead.', - // ) - const { selectedKeys = [], targetKeys = [] } = this; - return { - leftFilter: '', - rightFilter: '', - sourceSelectedKeys: selectedKeys.filter(key => targetKeys.indexOf(key) === -1), - targetSelectedKeys: selectedKeys.filter(key => targetKeys.indexOf(key) > -1), - }; - }, - watch: { - targetKeys() { - this.updateState(); - if (this.selectedKeys) { - const targetKeys = this.targetKeys || []; - this.setState({ - sourceSelectedKeys: this.selectedKeys.filter(key => !targetKeys.includes(key)), - targetSelectedKeys: this.selectedKeys.filter(key => targetKeys.includes(key)), - }); - } - }, - dataSource() { - this.updateState(); - }, - selectedKeys() { - if (this.selectedKeys) { - const targetKeys = this.targetKeys || []; - this.setState({ - sourceSelectedKeys: this.selectedKeys.filter(key => !targetKeys.includes(key)), - targetSelectedKeys: this.selectedKeys.filter(key => targetKeys.includes(key)), - }); - } - }, - }, - mounted() { - // this.currentProps = { ...this.$props } - }, - methods: { - getSelectedKeysName(direction) { - return direction === 'left' ? 'sourceSelectedKeys' : 'targetSelectedKeys'; - }, + props: transferProps, + slots: [ + 'leftTitle', + 'rightTitle', + 'children', + 'render', + 'notFoundContent', + 'leftSelectAllLabel', + 'rightSelectAllLabel', + 'footer', + ], + emits: ['update:targetKeys', 'change', 'search', 'scroll', 'selectChange', 'searchChange'], + setup(props, { emit, attrs, slots, expose }) { + const { configProvider, prefixCls, direction } = useConfigInject('transfer', props); + const sourceSelectedKeys = ref([]); + const targetSelectedKeys = ref([]); - getTitles(transferLocale: TransferLocale) { - if (this.titles) { - return this.titles; - } - return transferLocale.titles || ['', '']; - }, + watch( + () => props.selectedKeys, + () => { + sourceSelectedKeys.value = + props.selectedKeys?.filter(key => props.targetKeys.indexOf(key) === -1) || []; + targetSelectedKeys.value = + props.selectedKeys?.filter(key => props.targetKeys.indexOf(key) > -1) || []; + }, + { immediate: true }, + ); - getLocale(transferLocale: TransferLocale, renderEmpty: RenderEmptyHandler) { + const getLocale = (transferLocale: TransferLocale, renderEmpty: RenderEmptyHandler) => { // Keep old locale props still working. const oldLocale: { notFoundContent?: any; searchPlaceholder?: string } = { notFoundContent: renderEmpty('Transfer'), }; - const notFoundContent = getComponent(this, 'notFoundContent'); + const notFoundContent = getPropsSlot(slots, props, 'notFoundContent'); if (notFoundContent) { oldLocale.notFoundContent = notFoundContent; } - if (hasProp(this, 'searchPlaceholder')) { - oldLocale.searchPlaceholder = this.$props.searchPlaceholder; + if (props.searchPlaceholder !== undefined) { + oldLocale.searchPlaceholder = props.searchPlaceholder; } - return { ...transferLocale, ...oldLocale, ...this.$props.locale }; - }, - updateState() { - const { sourceSelectedKeys, targetSelectedKeys } = this; - this.separatedDataSource = null; - if (!this.selectedKeys) { - // clear key nolonger existed - // clear checkedKeys according to targetKeys - const { dataSource, targetKeys = [] } = this; + return { ...transferLocale, ...oldLocale, ...props.locale }; + }; - const newSourceSelectedKeys = []; - const newTargetSelectedKeys = []; - dataSource.forEach(({ key }) => { - if (sourceSelectedKeys.includes(key) && !targetKeys.includes(key)) { - newSourceSelectedKeys.push(key); - } - if (targetSelectedKeys.includes(key) && targetKeys.includes(key)) { - newTargetSelectedKeys.push(key); - } - }); - this.setState({ - sourceSelectedKeys: newSourceSelectedKeys, - targetSelectedKeys: newTargetSelectedKeys, - }); - } - }, - - moveTo(direction: TransferDirection) { - const { targetKeys = [], dataSource = [] } = this.$props; - const { sourceSelectedKeys, targetSelectedKeys } = this; - const moveKeys = direction === 'right' ? sourceSelectedKeys : targetSelectedKeys; + const moveTo = (direction: TransferDirection) => { + const { targetKeys = [], dataSource = [] } = props; + const moveKeys = direction === 'right' ? sourceSelectedKeys.value : targetSelectedKeys.value; // filter the disabled options const newMoveKeys = moveKeys.filter( key => !dataSource.some(data => !!(key === data.key && data.disabled)), @@ -182,101 +161,74 @@ const Transfer = defineComponent({ // empty checked keys const oppositeDirection = direction === 'right' ? 'left' : 'right'; - this.setState({ - [this.getSelectedKeysName(oppositeDirection)]: [], - }); - this.handleSelectChange(oppositeDirection, []); + direction === 'right' ? (sourceSelectedKeys.value = []) : (targetSelectedKeys.value = []); + emit('update:targetKeys', newTargetKeys); + handleSelectChange(oppositeDirection, []); + emit('change', newTargetKeys, direction, newMoveKeys); + }; - this.$emit('change', newTargetKeys, direction, newMoveKeys); - }, - moveToLeft() { - this.moveTo('left'); - }, - moveToRight() { - this.moveTo('right'); - }, + const moveToLeft = () => { + moveTo('left'); + }; + const moveToRight = () => { + moveTo('right'); + }; - onItemSelectAll(direction: TransferDirection, selectedKeys: string[], checkAll: boolean) { - const originalSelectedKeys = this.$data[this.getSelectedKeysName(direction)] || []; + const onItemSelectAll = (direction: TransferDirection, selectedKeys: string[]) => { + handleSelectChange(direction, selectedKeys); + }; - let mergedCheckedKeys = []; - if (checkAll) { - // Merge current keys with origin key - mergedCheckedKeys = Array.from(new Set([...originalSelectedKeys, ...selectedKeys])); + const onLeftItemSelectAll = (selectedKeys: string[]) => { + return onItemSelectAll('left', selectedKeys); + }; + + const onRightItemSelectAll = (selectedKeys: string[]) => { + return onItemSelectAll('right', selectedKeys); + }; + + const handleSelectChange = (direction: TransferDirection, holder: string[]) => { + if (direction === 'left') { + if (!props.selectedKeys) { + sourceSelectedKeys.value = holder; + } + + emit('selectChange', holder, targetSelectedKeys.value); } else { - // Remove current keys from origin keys - mergedCheckedKeys = originalSelectedKeys.filter(key => selectedKeys.indexOf(key) === -1); + if (!props.selectedKeys) { + targetSelectedKeys.value = holder; + } + + emit('selectChange', sourceSelectedKeys.value, holder); } + }; - this.handleSelectChange(direction, mergedCheckedKeys); - - if (!this.$props.selectedKeys) { - this.setState({ - [this.getSelectedKeysName(direction)]: mergedCheckedKeys, - }); - } - }, - - handleSelectAll(direction, filteredDataSource, checkAll) { - this.onItemSelectAll( - direction, - filteredDataSource.map(({ key }) => key), - !checkAll, - ); - }, - - // [Legacy] Old prop `body` pass origin check as arg. It's confusing. - // TODO: Remove this in next version. - handleLeftSelectAll(filteredDataSource, checkAll) { - return this.handleSelectAll('left', filteredDataSource, !checkAll); - }, - - handleRightSelectAll(filteredDataSource, checkAll) { - return this.handleSelectAll('right', filteredDataSource, !checkAll); - }, - - onLeftItemSelectAll(selectedKeys, checkAll) { - return this.onItemSelectAll('left', selectedKeys, checkAll); - }, - - onRightItemSelectAll(selectedKeys, checkAll) { - return this.onItemSelectAll('right', selectedKeys, checkAll); - }, - - handleFilter(direction, e) { + const handleFilter = (direction: TransferDirection, e) => { const value = e.target.value; - // if (getListeners(this).searchChange) { - // warning( - // false, - // 'Transfer', - // '`searchChange` in Transfer is deprecated. Please use `search` instead.', - // ); - // this.$emit('searchChange', direction, e); - // } - this.$emit('search', direction, value); - }, + emit('search', direction, value); + }; - handleLeftFilter(e) { - this.handleFilter('left', e); - }, - handleRightFilter(e) { - this.handleFilter('right', e); - }, + const handleLeftFilter = (e: Event) => { + handleFilter('left', e); + }; + const handleRightFilter = (e: Event) => { + handleFilter('right', e); + }; - handleClear(direction) { - this.$emit('search', direction, ''); - }, + const handleClear = (direction: TransferDirection) => { + emit('search', direction, ''); + }; - handleLeftClear() { - this.handleClear('left'); - }, - handleRightClear() { - this.handleClear('right'); - }, + const handleLeftClear = () => { + handleClear('left'); + }; - onItemSelect(direction, selectedKey, checked) { - const { sourceSelectedKeys, targetSelectedKeys } = this; - const holder = direction === 'left' ? [...sourceSelectedKeys] : [...targetSelectedKeys]; + const handleRightClear = () => { + handleClear('right'); + }; + + const onItemSelect = (direction: TransferDirection, selectedKey: string, checked: boolean) => { + const holder = + direction === 'left' ? [...sourceSelectedKeys.value] : [...targetSelectedKeys.value]; const index = holder.indexOf(selectedKey); if (index > -1) { holder.splice(index, 1); @@ -284,67 +236,50 @@ const Transfer = defineComponent({ if (checked) { holder.push(selectedKey); } - this.handleSelectChange(direction, holder); + handleSelectChange(direction, holder); + }; - if (!this.selectedKeys) { - this.setState({ - [this.getSelectedKeysName(direction)]: holder, - }); - } - }, + const onLeftItemSelect = (selectedKey: string, checked: boolean) => { + return onItemSelect('left', selectedKey, checked); + }; + const onRightItemSelect = (selectedKey: string, checked: boolean) => { + return onItemSelect('right', selectedKey, checked); + }; + const onRightItemRemove = (targetedKeys: string[]) => { + const { targetKeys = [] } = props; + const newTargetKeys = targetKeys.filter(key => !targetedKeys.includes(key)); + emit('update:targetKeys', newTargetKeys); + emit('change', newTargetKeys, 'left', [...targetedKeys]); + }; - // handleSelect(direction, selectedItem, checked) { - // warning(false, 'Transfer', '`handleSelect` will be removed, please use `onSelect` instead.'); - // this.onItemSelect(direction, selectedItem.key, checked); - // }, + const handleScroll = (direction: TransferDirection, e: Event) => { + emit('scroll', direction, e); + }; - // handleLeftSelect(selectedItem, checked) { - // return this.handleSelect('left', selectedItem, checked); - // }, - - // handleRightSelect(selectedItem, checked) { - // return this.handleSelect('right', selectedItem, checked); - // }, - - onLeftItemSelect(selectedKey, checked) { - return this.onItemSelect('left', selectedKey, checked); - }, - onRightItemSelect(selectedKey, checked) { - return this.onItemSelect('right', selectedKey, checked); - }, - - handleScroll(direction, e) { - this.$emit('scroll', direction, e); - }, - - handleLeftScroll(e) { - this.handleScroll('left', e); - }, - handleRightScroll(e) { - this.handleScroll('right', e); - }, - - handleSelectChange(direction: TransferDirection, holder: string[]) { - const { sourceSelectedKeys, targetSelectedKeys } = this; - - if (direction === 'left') { - this.$emit('selectChange', holder, targetSelectedKeys); - } else { - this.$emit('selectChange', sourceSelectedKeys, holder); - } - }, - handleListStyle(listStyle, direction) { + const handleLeftScroll = (e: Event) => { + handleScroll('left', e); + }; + const handleRightScroll = (e: Event) => { + handleScroll('right', e); + }; + const handleListStyle = ( + listStyle: ((style: ListStyle) => CSSProperties) | CSSProperties, + direction: TransferDirection, + ) => { if (typeof listStyle === 'function') { return listStyle({ direction }); } return listStyle; - }, + }; - separateDataSource() { - const { dataSource, rowKey, targetKeys = [] } = this.$props; + const leftDataSource = ref([]); + const rightDataSource = ref([]); - const leftDataSource = []; - const rightDataSource = new Array(targetKeys.length); + watchEffect(() => { + const { dataSource, rowKey, targetKeys = [] } = props; + + const ld = []; + const rd = new Array(targetKeys.length); dataSource.forEach(record => { if (rowKey) { record.key = rowKey(record); @@ -354,132 +289,124 @@ const Transfer = defineComponent({ // leftDataSource should be ordered by dataSource const indexOfKey = targetKeys.indexOf(record.key); if (indexOfKey !== -1) { - rightDataSource[indexOfKey] = record; + rd[indexOfKey] = record; } else { - leftDataSource.push(record); + ld.push(record); } }); - return { - leftDataSource, - rightDataSource, - }; - }, + leftDataSource.value = ld; + rightDataSource.value = rd; + }); - renderTransfer(transferLocale: TransferLocale) { - const props = getOptionProps(this); + expose({ handleSelectChange }); + + const renderTransfer = (transferLocale: TransferLocale) => { const { - prefixCls: customizePrefixCls, disabled, operations = [], showSearch, listStyle, operationStyle, filterOption, - lazy, showSelectAll, + selectAllLabels = [], + oneWay, + pagination, } = props; - const { class: className, style } = this.$attrs; - const children = getComponent(this, 'children', {}, false); - const getPrefixCls = this.configProvider.getPrefixCls; - const prefixCls = getPrefixCls('transfer', customizePrefixCls); + const { class: className, style } = attrs; - const renderEmpty = this.configProvider.renderEmpty; - const locale = this.getLocale(transferLocale, renderEmpty); - const { sourceSelectedKeys, targetSelectedKeys, $slots } = this; - const { body, footer } = $slots; - const renderItem = props.render || this.$slots.render; - const { leftDataSource, rightDataSource } = this.separateDataSource(); - const leftActive = targetSelectedKeys.length > 0; - const rightActive = sourceSelectedKeys.length > 0; + const children = slots.children; + const mergedPagination = !children && pagination; - const cls = classNames(prefixCls, className, { - [`${prefixCls}-disabled`]: disabled, - [`${prefixCls}-customize-list`]: !!children, + const renderEmpty = configProvider.renderEmpty; + const locale = getLocale(transferLocale, renderEmpty); + const { footer } = slots; + const renderItem = props.render || slots.render; + const leftActive = targetSelectedKeys.value.length > 0; + const rightActive = sourceSelectedKeys.value.length > 0; + + const cls = classNames(prefixCls.value, className, { + [`${prefixCls.value}-disabled`]: disabled, + [`${prefixCls.value}-customize-list`]: !!children, }); - const titles = this.getTitles(locale); + const titles = props.titles; + const leftTitle = + (titles && titles[0]) ?? slots.leftTitle?.() ?? (locale.titles || ['', ''])[0]; + const rightTitle = + (titles && titles[1]) ?? slots.rightTitle?.() ?? (locale.titles || ['', ''])[1]; return (
    leftTitle, footer }} /> rightTitle, footer }} />
    ); - }, - }, - render() { - return ( + }; + return () => ( ); }, diff --git a/components/transfer/interface.ts b/components/transfer/interface.ts new file mode 100644 index 000000000..d45cd7a65 --- /dev/null +++ b/components/transfer/interface.ts @@ -0,0 +1,5 @@ +export type PaginationType = + | boolean + | { + pageSize?: number; + }; diff --git a/components/transfer/list.tsx b/components/transfer/list.tsx index fac83da9a..2bb2e227b 100644 --- a/components/transfer/list.tsx +++ b/components/transfer/list.tsx @@ -1,32 +1,20 @@ import classNames from '../_util/classNames'; -import PropTypes, { withUndefined } from '../_util/vue-types'; -import { isValidElement, splitAttrs, findDOMNode, filterEmpty } from '../_util/props-util'; -import initDefaultProps from '../_util/props-util/initDefaultProps'; -import BaseMixin from '../_util/BaseMixin'; +import PropTypes from '../_util/vue-types'; +import { isValidElement, splitAttrs, filterEmpty } from '../_util/props-util'; +import DownOutlined from '@ant-design/icons-vue/DownOutlined'; import Checkbox from '../checkbox'; +import Menu from '../menu'; +import Dropdown from '../dropdown'; import Search from './search'; -import defaultRenderList from './renderListBody'; -import triggerEvent from '../_util/triggerEvent'; -import type { VNode, VNodeTypes } from 'vue'; -import { defineComponent, nextTick } from 'vue'; +import ListBody from './ListBody'; +import type { VNode, VNodeTypes, ExtractPropTypes, PropType } from 'vue'; +import { watchEffect, computed } from 'vue'; +import { defineComponent, ref } from 'vue'; import type { RadioChangeEvent } from '../radio/interface'; +import type { TransferItem } from './index'; const defaultRender = () => null; -const TransferItem = { - key: PropTypes.string.isRequired, - title: PropTypes.string.isRequired, - description: PropTypes.string, - disabled: PropTypes.looseBool, -}; - -export interface DataSourceItem { - key: string; - title: string; - description?: string; - disabled?: boolean; -} - function isRenderResultPlainObject(result: VNode) { return ( result && @@ -35,241 +23,70 @@ function isRenderResultPlainObject(result: VNode) { ); } -export const TransferListProps = { +function getEnabledItemKeys(items: RecordType[]) { + return items.filter(data => !data.disabled).map(data => data.key); +} + +export const transferListProps = { prefixCls: PropTypes.string, - titleText: PropTypes.string, - dataSource: PropTypes.arrayOf(PropTypes.shape(TransferItem).loose), + dataSource: { type: Array as PropType, default: [] }, filter: PropTypes.string, filterOption: PropTypes.func, checkedKeys: PropTypes.arrayOf(PropTypes.string), handleFilter: PropTypes.func, - handleSelect: PropTypes.func, - handleSelectAll: PropTypes.func, handleClear: PropTypes.func, renderItem: PropTypes.func, - showSearch: PropTypes.looseBool, + showSearch: PropTypes.looseBool.def(false), searchPlaceholder: PropTypes.string, notFoundContent: PropTypes.any, itemUnit: PropTypes.string, itemsUnit: PropTypes.string, - body: PropTypes.any, renderList: PropTypes.any, - footer: PropTypes.any, - lazy: withUndefined(PropTypes.oneOfType([PropTypes.looseBool, PropTypes.object])), disabled: PropTypes.looseBool, direction: PropTypes.string, showSelectAll: PropTypes.looseBool, + remove: PropTypes.string, + selectAll: PropTypes.string, + selectCurrent: PropTypes.string, + selectInvert: PropTypes.string, + removeAll: PropTypes.string, + removeCurrent: PropTypes.string, + selectAllLabel: PropTypes.any, + showRemove: PropTypes.looseBool, + pagination: PropTypes.any, onItemSelect: PropTypes.func, onItemSelectAll: PropTypes.func, + onItemRemove: PropTypes.func, onScroll: PropTypes.func, }; -function renderListNode(renderList: Function, props: any) { - let bodyContent = renderList ? renderList(props) : null; - const customize = !!bodyContent && filterEmpty(bodyContent).length > 0; - if (!customize) { - bodyContent = defaultRenderList(props); - } - return { - customize, - bodyContent, - }; -} +export type TransferListProps = Partial>; export default defineComponent({ name: 'TransferList', - mixins: [BaseMixin], inheritAttrs: false, - props: initDefaultProps(TransferListProps, { - dataSource: [], - titleText: '', - showSearch: false, - lazy: {}, - }), - setup() { - return { - timer: null, - triggerScrollTimer: null, - scrollEvent: null, + props: transferListProps, + emits: ['scroll', 'itemSelectAll', 'itemRemove', 'itemSelect'], + slots: ['footer', 'titleText'], + setup(props, { attrs, slots }) { + const filterValue = ref(''); + const transferNode = ref(); + const defaultListBodyRef = ref(); + + const renderListBody = (renderList: any, props: any) => { + let bodyContent = renderList ? renderList(props) : null; + const customize = !!bodyContent && filterEmpty(bodyContent).length > 0; + if (!customize) { + bodyContent = ; + } + return { + customize, + bodyContent, + }; }; - }, - data() { - return { - filterValue: '', - }; - }, - beforeUnmount() { - clearTimeout(this.triggerScrollTimer); - // if (this.scrollEvent) { - // this.scrollEvent.remove(); - // } - }, - updated() { - nextTick(() => { - if (this.scrollEvent) { - this.scrollEvent.remove(); - } - }); - }, - methods: { - handleScroll(e: Event) { - this.$emit('scroll', e); - }, - getCheckStatus(filteredItems: DataSourceItem[]) { - const { checkedKeys } = this.$props; - if (checkedKeys.length === 0) { - return 'none'; - } - if (filteredItems.every(item => checkedKeys.indexOf(item.key) >= 0 || !!item.disabled)) { - return 'all'; - } - return 'part'; - }, - getFilteredItems(dataSource: DataSourceItem[], filterValue: string) { - const filteredItems = []; - const filteredRenderItems = []; - - dataSource.forEach(item => { - const renderedItem = this.renderItemHtml(item); - const { renderedText } = renderedItem; - - // Filter skip - if (filterValue && filterValue.trim() && !this.matchFilter(renderedText, item)) { - return null; - } - - filteredItems.push(item); - filteredRenderItems.push(renderedItem); - }); - - return { filteredItems, filteredRenderItems }; - }, - - getListBody( - prefixCls: string, - searchPlaceholder: string, - filterValue: string, - filteredItems: DataSourceItem[], - notFoundContent: unknown, - bodyDom: unknown, - filteredRenderItems: unknown, - checkedKeys: string[], - renderList: Function, - showSearch: boolean, - disabled: boolean, - ) { - const search = showSearch ? ( -
    - -
    - ) : null; - - let listBody = bodyDom; - if (!listBody) { - let bodyNode: VNodeTypes; - const { onEvents } = splitAttrs(this.$attrs); - const { bodyContent, customize } = renderListNode(renderList, { - ...this.$props, - filteredItems, - filteredRenderItems, - selectedKeys: checkedKeys, - ...onEvents, - }); - - // We should wrap customize list body in a classNamed div to use flex layout. - if (customize) { - bodyNode =
    {bodyContent}
    ; - } else { - bodyNode = filteredItems.length ? ( - bodyContent - ) : ( -
    {notFoundContent}
    - ); - } - - listBody = ( -
    - {search} - {bodyNode} -
    - ); - } - return listBody; - }, - - getCheckBox(filteredItems: DataSourceItem[], showSelectAll: boolean, disabled: boolean) { - const checkStatus = this.getCheckStatus(filteredItems); - const checkedAll = checkStatus === 'all'; - const checkAllCheckbox = showSelectAll !== false && ( - { - // Only select enabled items - this.$emit( - 'itemSelectAll', - filteredItems.filter(item => !item.disabled).map(({ key }) => key), - !checkedAll, - ); - }} - /> - ); - - return checkAllCheckbox; - }, - - _handleSelect(selectedItem: DataSourceItem) { - const { checkedKeys } = this.$props; - const result = checkedKeys.some(key => key === selectedItem.key); - this.handleSelect(selectedItem, !result); - }, - _handleFilter(e: RadioChangeEvent) { - const { handleFilter } = this.$props; - const { - target: { value: filterValue }, - } = e; - this.setState({ filterValue }); - handleFilter(e); - if (!filterValue) { - return; - } - // Manually trigger scroll event for lazy search bug - // https://github.com/ant-design/ant-design/issues/5631 - this.triggerScrollTimer = setTimeout(() => { - const transferNode = findDOMNode(this); - const listNode = transferNode.querySelectorAll('.ant-transfer-list-content')[0]; - if (listNode) { - triggerEvent(listNode, 'scroll'); - } - }, 0); - }, - _handleClear(e: Event) { - this.setState({ filterValue: '' }); - this.handleClear(e); - }, - matchFilter(text: string, item: DataSourceItem) { - const { filterValue } = this.$data; - const { filterOption } = this.$props; - if (filterOption) { - return filterOption(filterValue, item); - } - return text.indexOf(filterValue) >= 0; - }, - renderItemHtml(item: DataSourceItem) { - const { renderItem = defaultRender } = this.$props; + const renderItemHtml = (item: TransferItem) => { + const { renderItem = defaultRender } = props; const renderResult = renderItem(item); const isRenderResultPlain = isRenderResultPlainObject(renderResult); return { @@ -277,82 +94,311 @@ export default defineComponent({ renderedEl: isRenderResultPlain ? renderResult.label : renderResult, item, }; - }, - filterNull(arr: unknown[]) { - return arr.filter(item => { - return item !== null; + }; + + const filteredItems = ref([]); + const filteredRenderItems = ref([]); + + watchEffect(() => { + const fItems = []; + const fRenderItems = []; + + props.dataSource.forEach(item => { + const renderedItem = renderItemHtml(item); + const { renderedText } = renderedItem; + + // Filter skip + if (filterValue.value && filterValue.value.trim() && !matchFilter(renderedText, item)) { + return null; + } + + fItems.push(item); + fRenderItems.push(renderedItem); }); - }, - }, - - render() { - const { filterValue } = this.$data; - const { - prefixCls, - dataSource, - titleText, - checkedKeys, - disabled, - body, - footer, - showSearch, - searchPlaceholder, - notFoundContent, - itemUnit, - itemsUnit, - renderList, - showSelectAll, - } = this.$props; - - // Custom Layout - const footerDom = footer && footer({ ...this.$props }); - const bodyDom = body && body({ ...this.$props }); - - const listCls = classNames(prefixCls, { - [`${prefixCls}-with-footer`]: !!footerDom, + filteredItems.value = fItems; + filteredRenderItems.value = fRenderItems; }); - // ====================== Get filtered, checked item list ====================== + const checkStatus = computed(() => { + const { checkedKeys } = props; + if (checkedKeys.length === 0) { + return 'none'; + } + if ( + filteredItems.value.every(item => checkedKeys.indexOf(item.key) >= 0 || !!item.disabled) + ) { + return 'all'; + } + return 'part'; + }); - const { filteredItems, filteredRenderItems } = this.getFilteredItems(dataSource, filterValue); + const enabledItemKeys = computed(() => { + return getEnabledItemKeys(filteredItems.value); + }); - // ================================= List Body ================================= + const getNewSelectKeys = (keys, unCheckedKeys) => { + return Array.from(new Set([...keys, ...props.checkedKeys])).filter( + key => unCheckedKeys.indexOf(key) === -1, + ); + }; - const unit = dataSource.length > 1 ? itemsUnit : itemUnit; + const getCheckBox = (showSelectAll: boolean, disabled?: boolean, prefixCls?: string) => { + const checkedAll = checkStatus.value === 'all'; + const checkAllCheckbox = showSelectAll !== false && ( + { + // Only select enabled items - const listBody = this.getListBody( - prefixCls, - searchPlaceholder, - filterValue, - filteredItems, - notFoundContent, - bodyDom, - filteredRenderItems, - checkedKeys, - renderList, - showSearch, - disabled, - ); + const keys = enabledItemKeys.value; + props.onItemSelectAll( + getNewSelectKeys(!checkedAll ? keys : [], checkedAll ? props.checkedKeys : []), + ); + }} + /> + ); - const listFooter = footerDom ?
    {footerDom}
    : null; + return checkAllCheckbox; + }; - const checkAllCheckbox = this.getCheckBox(filteredItems, showSelectAll, disabled); + const handleFilter = (e: RadioChangeEvent) => { + const { + target: { value: filter }, + } = e; + filterValue.value = filter; + props.handleFilter?.(e); + }; + const handleClear = (e: Event) => { + filterValue.value = ''; + props.handleClear?.(e); + }; + const matchFilter = (text: string, item: TransferItem) => { + const { filterOption } = props; + if (filterOption) { + return filterOption(filterValue.value, item); + } + return text.indexOf(filterValue.value) >= 0; + }; - return ( -
    -
    - {checkAllCheckbox} - - - {(checkedKeys.length > 0 ? `${checkedKeys.length}/` : '') + filteredItems.length}{' '} - {unit} - - {titleText} - + const getSelectAllLabel = (selectedCount: number, totalCount: number) => { + const { itemsUnit, itemUnit, selectAllLabel } = props; + if (selectAllLabel) { + return typeof selectAllLabel === 'function' + ? selectAllLabel({ selectedCount, totalCount }) + : selectAllLabel; + } + const unit = totalCount > 1 ? itemsUnit : itemUnit; + return ( + <> + {(selectedCount > 0 ? `${selectedCount}/` : '') + totalCount} {unit} + + ); + }; + + const getListBody = ( + prefixCls: string, + searchPlaceholder: string, + checkedKeys: string[], + renderList: Function, + showSearch: boolean, + disabled: boolean, + ) => { + const search = showSearch ? ( +
    +
    - {listBody} - {listFooter} -
    - ); + ) : null; + + let bodyNode: VNodeTypes; + const { onEvents } = splitAttrs(attrs); + const { bodyContent, customize } = renderListBody(renderList, { + ...props, + filteredItems: filteredItems.value, + filteredRenderItems: filteredRenderItems.value, + selectedKeys: checkedKeys, + ...onEvents, + }); + + // We should wrap customize list body in a classNamed div to use flex layout. + if (customize) { + bodyNode =
    {bodyContent}
    ; + } else { + bodyNode = filteredItems.value.length ? ( + bodyContent + ) : ( +
    {props.notFoundContent}
    + ); + } + + return ( +
    + {search} + {bodyNode} +
    + ); + }; + + return () => { + const { + prefixCls, + checkedKeys, + disabled, + showSearch, + searchPlaceholder, + selectAll, + selectCurrent, + selectInvert, + removeAll, + removeCurrent, + renderList, + onItemSelectAll, + onItemRemove, + showSelectAll, + showRemove, + pagination, + } = props; + + // Custom Layout + const footerDom = slots.footer?.({ ...props }); + + const listCls = classNames(prefixCls, { + [`${prefixCls}-with-pagination`]: !!pagination, + [`${prefixCls}-with-footer`]: !!footerDom, + }); + + // ================================= List Body ================================= + + const listBody = getListBody( + prefixCls, + searchPlaceholder, + checkedKeys, + renderList, + showSearch, + disabled, + ); + + const listFooter = footerDom ?
    {footerDom}
    : null; + + const checkAllCheckbox = + !showRemove && !pagination && getCheckBox(showSelectAll, disabled, prefixCls); + + let menu = null; + if (showRemove) { + menu = ( + + {/* Remove Current Page */} + {pagination && ( + { + const pageKeys = getEnabledItemKeys( + (defaultListBodyRef.value.items || []).map(entity => entity.item), + ); + onItemRemove?.(pageKeys); + }} + > + {removeCurrent} + + )} + + {/* Remove All */} + { + onItemRemove?.(enabledItemKeys.value); + }} + > + {removeAll} + + + ); + } else { + menu = ( + + { + const keys = enabledItemKeys.value; + onItemSelectAll(getNewSelectKeys(keys, [])); + }} + > + {selectAll} + + {pagination && ( + { + const pageKeys = getEnabledItemKeys( + (defaultListBodyRef.value.items || []).map(entity => entity.item), + ); + onItemSelectAll(getNewSelectKeys(pageKeys, [])); + }} + > + {selectCurrent} + + )} + { + let availableKeys: string[]; + if (pagination) { + availableKeys = getEnabledItemKeys( + (defaultListBodyRef.value.items || []).map(entity => entity.item), + ); + } else { + availableKeys = enabledItemKeys.value; + } + + const checkedKeySet = new Set(checkedKeys); + const newCheckedKeys: string[] = []; + const newUnCheckedKeys: string[] = []; + + availableKeys.forEach(key => { + if (checkedKeySet.has(key)) { + newUnCheckedKeys.push(key); + } else { + newCheckedKeys.push(key); + } + }); + onItemSelectAll(getNewSelectKeys(newCheckedKeys, newUnCheckedKeys)); + }} + > + {selectInvert} + + + ); + } + + const dropdown = ( + + + + ); + + return ( +
    +
    + {checkAllCheckbox} + {dropdown} + + {getSelectAllLabel(checkedKeys.length, filteredItems.value.length)} + {slots.titleText?.()} + +
    + {listBody} + {listFooter} +
    + ); + }; }, }); diff --git a/components/transfer/operation.tsx b/components/transfer/operation.tsx index c3ced7b21..1b43d830b 100644 --- a/components/transfer/operation.tsx +++ b/components/transfer/operation.tsx @@ -2,11 +2,12 @@ import type { CSSProperties, FunctionalComponent } from 'vue'; import LeftOutlined from '@ant-design/icons-vue/LeftOutlined'; import RightOutlined from '@ant-design/icons-vue/RightOutlined'; import Button from '../button'; +import type { Direction } from '../config-provider'; function noop() {} export interface TransferOperationProps { - class?: any; + class?: string; leftArrowText?: string; rightArrowText?: string; moveToLeft?: (e: MouseEvent) => void; @@ -15,6 +16,8 @@ export interface TransferOperationProps { rightActive?: boolean; style?: CSSProperties | string; disabled?: boolean; + direction?: Direction; + oneWay?: boolean; } const Operation: FunctionalComponent = props => { @@ -28,6 +31,8 @@ const Operation: FunctionalComponent = props => { rightActive, class: className, style, + direction, + oneWay, } = props; return ( @@ -37,23 +42,25 @@ const Operation: FunctionalComponent = props => { size="small" disabled={disabled || !rightActive} onClick={moveToRight} - icon={} + icon={direction !== 'rtl' ? : } > {rightArrowText} - + {!oneWay && ( + + )}
    ); }; - +Operation.displayName = 'Operation'; Operation.inheritAttrs = false; export default Operation; diff --git a/components/transfer/renderListBody.tsx b/components/transfer/renderListBody.tsx deleted file mode 100644 index ffb81c573..000000000 --- a/components/transfer/renderListBody.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import { defineComponent, nextTick } from 'vue'; -import raf from '../_util/raf'; -import ListItem from './ListItem'; -import PropTypes, { withUndefined } from '../_util/vue-types'; -import { findDOMNode } from '../_util/props-util'; -import { getTransitionGroupProps, TransitionGroup } from '../_util/transition'; -import type { DataSourceItem } from './list'; -const ListBody = defineComponent({ - name: 'ListBody', - inheritAttrs: false, - props: { - prefixCls: PropTypes.string, - filteredRenderItems: PropTypes.array.def([]), - lazy: withUndefined(PropTypes.oneOfType([PropTypes.looseBool, PropTypes.object])), - selectedKeys: PropTypes.array, - disabled: PropTypes.looseBool, - onItemSelect: PropTypes.func, - onItemSelectAll: PropTypes.func, - onScroll: PropTypes.func, - }, - setup() { - return { - mountId: null, - lazyId: null, - }; - }, - data() { - return { - mounted: false, - }; - }, - computed: { - itemsLength(): number { - return this.filteredRenderItems ? this.filteredRenderItems.length : 0; - }, - }, - watch: { - itemsLength() { - nextTick(() => { - const { lazy } = this.$props; - if (lazy !== false) { - const container = findDOMNode(this); - raf.cancel(this.lazyId); - this.lazyId = raf(() => { - if (container) { - const scrollEvent = new Event('scroll', { bubbles: true }); - container.dispatchEvent(scrollEvent); - } - }); - } - }); - }, - }, - mounted() { - this.mountId = raf(() => { - this.mounted = true; - }); - }, - - beforeUnmount() { - raf.cancel(this.mountId); - raf.cancel(this.lazyId); - }, - methods: { - handleItemSelect(item: DataSourceItem) { - const { selectedKeys } = this.$props; - const checked = selectedKeys.indexOf(item.key) >= 0; - this.$emit('itemSelect', item.key, !checked); - }, - handleScroll(e: Event) { - this.$emit('scroll', e); - }, - }, - render() { - const { mounted } = this.$data; - const { - prefixCls, - filteredRenderItems, - lazy, - selectedKeys, - disabled: globalDisabled, - } = this.$props; - const items = filteredRenderItems.map(({ renderedEl, renderedText, item }: any) => { - const { disabled } = item; - const checked = selectedKeys.indexOf(item.key) >= 0; - - return ( - - ); - }); - const transitionProps = getTransitionGroupProps( - mounted ? `${prefixCls}-content-item-highlight` : '', - { - tag: 'ul', - class: `${prefixCls}-content`, - onScroll: this.handleScroll, - }, - ); - return {items}; - }, -}); - -export default props => ; diff --git a/components/transfer/search.tsx b/components/transfer/search.tsx index c4ac21840..ced5678f8 100644 --- a/components/transfer/search.tsx +++ b/components/transfer/search.tsx @@ -1,62 +1,65 @@ import PropTypes from '../_util/vue-types'; -import { getOptionProps } from '../_util/props-util'; import initDefaultProps from '../_util/props-util/initDefaultProps'; import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled'; import SearchOutlined from '@ant-design/icons-vue/SearchOutlined'; import Input from '../input'; +import type { ExtractPropTypes } from 'vue'; import { defineComponent } from 'vue'; -export const TransferSearchProps = { +export const transferSearchProps = { prefixCls: PropTypes.string, placeholder: PropTypes.string, - value: PropTypes.any, + value: PropTypes.string, handleClear: PropTypes.func, disabled: PropTypes.looseBool, onChange: PropTypes.func, }; +export type TransferSearchProps = Partial>; + export default defineComponent({ name: 'Search', inheritAttrs: false, - props: initDefaultProps(TransferSearchProps, { + props: initDefaultProps(transferSearchProps, { placeholder: '', }), - methods: { - handleChange(e: Event) { - this.$emit('change', e); - }, - handleClear2(e: Event) { - e.preventDefault(); - const { handleClear, disabled } = this.$props; + emits: ['change'], + setup(props, { emit }) { + const handleChange = (e: Event) => { + emit('change', e); + }; + + const handleClearFn = (e: Event) => { + const { handleClear, disabled } = props; if (!disabled && handleClear) { handleClear(e); } - }, - }, - render() { - const { placeholder, value, prefixCls, disabled } = getOptionProps(this); - const icon = - value && value.length > 0 ? ( - - - - ) : ( - - - - ); + }; - return ( - <> - - {icon} - - ); + return () => { + const { placeholder, value, prefixCls, disabled } = props; + const icon = + value && value.length > 0 ? ( + + + + ) : ( + + + + ); + return ( + <> + + {icon} + + ); + }; }, }); diff --git a/components/transfer/style/customize.less b/components/transfer/style/customize.less index 632c43708..1e78a900f 100644 --- a/components/transfer/style/customize.less +++ b/components/transfer/style/customize.less @@ -1,36 +1,14 @@ @import './index.less'; @table-prefix-cls: ~'@{ant-prefix}-table'; +@input-prefix-cls: ~'@{ant-prefix}-input'; .@{transfer-prefix-cls}-customize-list { - display: flex; - - .@{transfer-prefix-cls}-operation { - flex: none; - align-self: center; - } - .@{transfer-prefix-cls}-list { - flex: auto; + flex: 1 1 50%; width: auto; height: auto; min-height: @transfer-list-height; - - &-body { - &-with-search { - padding-top: 0; - } - - // Search box in customize mode do not need fix top - &-search-wrapper { - position: relative; - padding-bottom: 0; - } - - &-customize-wrapper { - padding: 12px; - } - } } // =================== Hook Components =================== @@ -59,4 +37,9 @@ 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 index ce75e43b7..1d4d36db8 100644 --- a/components/transfer/style/index.less +++ b/components/transfer/style/index.less @@ -1,18 +1,20 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; @import '../../checkbox/style/mixin'; -@import './customize.less'; +@import './customize'; @transfer-prefix-cls: ~'@{ant-prefix}-transfer'; -@transfer-header-vertical-padding: ( - (@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(); position: relative; + display: flex; + align-items: stretch; &-disabled { .@{transfer-prefix-cls}-list { @@ -21,17 +23,16 @@ } &-list { - position: relative; - display: inline-block; + display: flex; + flex-direction: column; width: 180px; height: @transfer-list-height; - padding-top: @transfer-header-height; - vertical-align: middle; border: @border-width-base @border-style-base @border-color-base; border-radius: @border-radius-base; - &-with-footer { - padding-bottom: 34px; + &-with-pagination { + width: 250px; + height: auto; } &-search { @@ -39,13 +40,14 @@ padding-left: @control-padding-horizontal-sm; &-action { position: absolute; - top: 12px; + top: @transfer-list-search-icon-top; right: 12px; bottom: 12px; width: 28px; color: @disabled-color; line-height: @input-height-base; text-align: center; + .@{iconfont-css-prefix} { color: @disabled-color; transition: all 0.3s; @@ -60,75 +62,128 @@ } &-header { - position: absolute; - top: 0; - left: 0; - width: 100%; + 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; - overflow: hidden; 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; - &-title { - position: absolute; - right: 12px; + > *:not(:last-child) { + margin-right: 4px; } - .@{ant-prefix}-checkbox-wrapper + span { - padding-left: 8px; + > * { + 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 { - position: relative; - height: 100%; + display: flex; + flex: auto; + flex-direction: column; + overflow: hidden; font-size: @font-size-base; &-search-wrapper { - position: absolute; - top: 0; - left: 0; - width: 100%; - padding: 12px; + position: relative; + flex: none; + padding: @padding-sm; } } - &-body-with-search { - padding-top: @input-height-base + 24px; - } - &-content { - height: 100%; + flex: auto; margin: 0; padding: 0; overflow: auto; list-style: none; - > .LazyLoad { - animation: transferHighlightIn 1s; - } &-item { - min-height: 32px; - padding: 6px @control-padding-horizontal; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + 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; - > span { - padding-right: 0; + + > *:not(:last-child) { + margin-right: 8px; } + + > * { + flex: none; + } + &-text { - padding-left: 8px; + 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; + &-item:not(&-item-disabled) { + &:hover { + background-color: @transfer-item-hover-bg; + cursor: pointer; + } + + &.@{transfer-prefix-cls}-list-content-item-checked:hover { + background-color: darken(@item-active-bg, 2%); + } + } + + // 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 { @@ -137,35 +192,31 @@ } } + &-pagination { + padding: @padding-xs 0; + text-align: right; + border-top: @border-width-base @border-style-base @border-color-split; + } + &-body-not-found { - position: absolute; - top: 50%; + flex: none; width: 100%; - padding-top: 0; + margin: auto 0; color: @disabled-color; text-align: center; - transform: translateY(-50%); - - // with filter should offset the search box height - .@{transfer-prefix-cls}-list-body-with-search & { - margin-top: (@input-height-base / 2); - } } &-footer { - position: absolute; - bottom: 0; - left: 0; - width: 100%; border-top: @border-width-base @border-style-base @border-color-split; - border-radius: 0 0 @border-radius-base @border-radius-base; } } &-operation { - display: inline-block; + display: flex; + flex: none; + flex-direction: column; + align-self: center; margin: 0 8px; - overflow: hidden; vertical-align: middle; .@{ant-prefix}-btn { @@ -180,13 +231,10 @@ } } } + + .@{ant-prefix}-empty-image { + max-height: (@transfer-header-height / 2) - 22; + } } -@keyframes transferHighlightIn { - 0% { - background: @primary-2; - } - 100% { - background: transparent; - } -} +@import './rtl'; diff --git a/components/transfer/style/index.ts b/components/transfer/style/index.ts index b7eb1d789..0cb16d7ce 100644 --- a/components/transfer/style/index.ts +++ b/components/transfer/style/index.ts @@ -6,3 +6,6 @@ import '../../empty/style'; import '../../checkbox/style'; import '../../button/style'; import '../../input/style'; +import '../../menu/style'; +import '../../dropdown/style'; +import '../../pagination/style'; diff --git a/components/transfer/style/rtl.less b/components/transfer/style/rtl.less new file mode 100644 index 000000000..88562310c --- /dev/null +++ b/components/transfer/style/rtl.less @@ -0,0 +1,69 @@ +@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/vc-tooltip/Content.jsx b/components/vc-tooltip/Content.jsx deleted file mode 100644 index f59d62673..000000000 --- a/components/vc-tooltip/Content.jsx +++ /dev/null @@ -1,25 +0,0 @@ -import PropTypes from '../_util/vue-types'; - -export default { - name: 'Content', - props: { - prefixCls: PropTypes.string, - overlay: PropTypes.any, - trigger: PropTypes.any, - overlayInnerStyle: PropTypes.any, - }, - updated() { - const { trigger } = this; - if (trigger) { - trigger.forcePopupAlign(); - } - }, - render() { - const { overlay, prefixCls, overlayInnerStyle } = this; - return ( - - ); - }, -}; diff --git a/components/vc-tooltip/Tooltip.jsx b/components/vc-tooltip/Tooltip.jsx deleted file mode 100644 index df0e9307c..000000000 --- a/components/vc-tooltip/Tooltip.jsx +++ /dev/null @@ -1,103 +0,0 @@ -import PropTypes from '../_util/vue-types'; -import Trigger from '../vc-trigger'; -import { placements } from './placements'; -import Content from './Content'; -import { hasProp, getComponent, getOptionProps, getSlot } from '../_util/props-util'; -import { defineComponent } from 'vue'; -function noop() {} -export default defineComponent({ - name: 'Tooltip', - inheritAttrs: false, - props: { - trigger: PropTypes.any.def(['hover']), - defaultVisible: PropTypes.looseBool, - visible: PropTypes.looseBool, - placement: PropTypes.string.def('right'), - transitionName: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), - animation: PropTypes.any, - afterVisibleChange: PropTypes.func.def(() => {}), - overlay: PropTypes.any, - overlayStyle: PropTypes.object, - overlayClassName: PropTypes.string, - prefixCls: PropTypes.string.def('rc-tooltip'), - mouseEnterDelay: PropTypes.number.def(0), - mouseLeaveDelay: PropTypes.number.def(0.1), - getTooltipContainer: PropTypes.func, - destroyTooltipOnHide: PropTypes.looseBool.def(false), - align: PropTypes.object.def(() => ({})), - arrowContent: PropTypes.any.def(null), - tipId: PropTypes.string, - builtinPlacements: PropTypes.object, - overlayInnerStyle: PropTypes.style, - }, - methods: { - getPopupElement() { - const { prefixCls, tipId, overlayInnerStyle } = this.$props; - return [ -
    - {getComponent(this, 'arrowContent')} -
    , - , - ]; - }, - - getPopupDomNode() { - return this.$refs.trigger.getPopupDomNode(); - }, - }, - render(h) { - const { - overlayClassName, - trigger, - mouseEnterDelay, - mouseLeaveDelay, - overlayStyle, - prefixCls, - afterVisibleChange, - transitionName, - animation, - placement, - align, - destroyTooltipOnHide, - defaultVisible, - getTooltipContainer, - ...restProps - } = getOptionProps(this); - const extraProps = { ...restProps }; - if (hasProp(this, 'visible')) { - extraProps.popupVisible = this.$props.visible; - } - const { $attrs } = this; - const triggerProps = { - popupClassName: overlayClassName, - prefixCls, - action: trigger, - builtinPlacements: placements, - popupPlacement: placement, - popupAlign: align, - getPopupContainer: getTooltipContainer, - afterPopupVisibleChange: afterVisibleChange, - popupTransitionName: transitionName, - popupAnimation: animation, - defaultPopupVisible: defaultVisible, - destroyPopupOnHide: destroyTooltipOnHide, - mouseLeaveDelay, - popupStyle: overlayStyle, - mouseEnterDelay, - ...extraProps, - ...$attrs, - onPopupVisibleChange: $attrs.onVisibleChange || noop, - onPopupAlign: $attrs.onPopupAlign || noop, - ref: 'trigger', - popup: this.getPopupElement(), - }; - return {getSlot(this)[0]}; - }, -}); diff --git a/components/vc-tooltip/index.js b/components/vc-tooltip/index.js deleted file mode 100644 index 142ad098d..000000000 --- a/components/vc-tooltip/index.js +++ /dev/null @@ -1,4 +0,0 @@ -// based on rc-tooltip 3.7.3 -import Tooltip from './Tooltip'; - -export default Tooltip; diff --git a/components/vc-tooltip/index.ts b/components/vc-tooltip/index.ts new file mode 100644 index 000000000..b9a6dd404 --- /dev/null +++ b/components/vc-tooltip/index.ts @@ -0,0 +1,4 @@ +// base rc-tooltip 5.1.1 +import Tooltip from './src/Tooltip'; + +export default Tooltip; diff --git a/components/vc-tooltip/src/Content.tsx b/components/vc-tooltip/src/Content.tsx new file mode 100644 index 000000000..7aa420304 --- /dev/null +++ b/components/vc-tooltip/src/Content.tsx @@ -0,0 +1,29 @@ +import type { ExtractPropTypes } from 'vue'; +import { defineComponent } from 'vue'; +import PropTypes from '../../_util/vue-types'; + +const tooltipContentProps = { + prefixCls: PropTypes.string, + overlay: PropTypes.any, + id: PropTypes.string, + overlayInnerStyle: PropTypes.any, +}; + +export type TooltipContentProps = Partial>; + +export default defineComponent({ + name: 'Content', + props: tooltipContentProps, + setup(props: TooltipContentProps) { + return () => ( + + ); + }, +}); diff --git a/components/vc-tooltip/src/Tooltip.tsx b/components/vc-tooltip/src/Tooltip.tsx new file mode 100644 index 000000000..e49cc36c9 --- /dev/null +++ b/components/vc-tooltip/src/Tooltip.tsx @@ -0,0 +1,123 @@ +import PropTypes from '../../_util/vue-types'; +import Trigger from '../../vc-trigger'; +import { placements } from './placements'; +import Content from './Content'; +import { getPropsSlot } from '../../_util/props-util'; +import { defineComponent, ref, watchEffect } from 'vue'; +function noop() {} +export default defineComponent({ + name: 'Tooltip', + inheritAttrs: false, + props: { + trigger: PropTypes.any.def(['hover']), + defaultVisible: PropTypes.looseBool, + visible: PropTypes.looseBool, + placement: PropTypes.string.def('right'), + transitionName: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), + animation: PropTypes.any, + afterVisibleChange: PropTypes.func.def(() => {}), + overlay: PropTypes.any, + overlayStyle: PropTypes.object, + overlayClassName: PropTypes.string, + prefixCls: PropTypes.string.def('rc-tooltip'), + mouseEnterDelay: PropTypes.number.def(0.1), + mouseLeaveDelay: PropTypes.number.def(0.1), + getTooltipContainer: PropTypes.func, + destroyTooltipOnHide: PropTypes.looseBool.def(false), + align: PropTypes.object.def(() => ({})), + arrowContent: PropTypes.any.def(null), + tipId: PropTypes.string, + builtinPlacements: PropTypes.object, + overlayInnerStyle: PropTypes.style, + popupVisible: PropTypes.looseBool, + }, + slots: ['arrowContent', 'overlay'], + setup(props, { slots, attrs, expose }) { + const triggerDOM = ref(); + + const getPopupElement = () => { + const { prefixCls, tipId, overlayInnerStyle } = props; + return [ +
    + {getPropsSlot(slots, props, 'arrowContent')} +
    , + , + ]; + }; + + const getPopupDomNode = () => { + return triggerDOM.value.getPopupDomNode(); + }; + + expose({ getPopupDomNode, triggerDOM }); + + const destroyTooltip = ref(false); + const autoDestroy = ref(false); + watchEffect(() => { + const { destroyTooltipOnHide } = props; + if (typeof destroyTooltipOnHide === 'boolean') { + destroyTooltip.value = destroyTooltipOnHide; + } else if (destroyTooltipOnHide && typeof destroyTooltipOnHide === 'object') { + const { keepParent } = destroyTooltipOnHide; + destroyTooltip.value = keepParent === true; + autoDestroy.value = keepParent === false; + } + }); + + return () => { + const { + overlayClassName, + trigger, + mouseEnterDelay, + mouseLeaveDelay, + overlayStyle, + prefixCls, + afterVisibleChange, + transitionName, + animation, + placement, + align, + destroyTooltipOnHide, + defaultVisible, + getTooltipContainer, + ...restProps + } = props; + const extraProps = { ...restProps }; + if (props.visible !== undefined) { + extraProps.popupVisible = props.visible; + } + + const triggerProps = { + popupClassName: overlayClassName, + prefixCls, + action: trigger, + builtinPlacements: placements, + popupPlacement: placement, + popupAlign: align, + getPopupContainer: getTooltipContainer, + afterPopupVisibleChange: afterVisibleChange, + popupTransitionName: transitionName, + popupAnimation: animation, + defaultPopupVisible: defaultVisible, + destroyPopupOnHide: destroyTooltip.value, + autoDestroy: autoDestroy.value, + mouseLeaveDelay, + popupStyle: overlayStyle, + mouseEnterDelay, + ...extraProps, + ...attrs, + onPopupVisibleChange: (attrs.onVisibleChange as any) || noop, + onPopupAlign: attrs.onPopupAlign || noop, + ref: triggerDOM, + popup: getPopupElement(), + }; + return {slots.default?.()}; + }; + }, +}); diff --git a/components/vc-tooltip/placements.js b/components/vc-tooltip/src/placements.ts similarity index 100% rename from components/vc-tooltip/placements.js rename to components/vc-tooltip/src/placements.ts