From 3ec0ec23ee476c1d2f232355b51a15bb7cfdee1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Tue, 24 Oct 2023 21:54:36 +0800 Subject: [PATCH] feat: DatePicker & TimePicker support z-index manager (#45497) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: dropdown support z-index manager * feat: update snap * feat: optimize code * feat: SelectLike components support z-index manager * feat: ColorPicker support z-index manager * feat: ColorPicker support z-index manager * feat: DatePicker & TimePicker support z-index manager * feat: update snap --------- Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> --- components/_util/__tests__/useZIndex.test.tsx | 4 ++-- .../date-picker/generatePicker/generateRangePicker.tsx | 8 ++++++++ .../date-picker/generatePicker/generateSinglePicker.tsx | 7 +++++++ .../__tests__/__snapshots__/demo-extend.test.tsx.snap | 2 +- .../__tests__/__snapshots__/demo-extend.test.ts.snap | 2 +- 5 files changed, 19 insertions(+), 4 deletions(-) diff --git a/components/_util/__tests__/useZIndex.test.tsx b/components/_util/__tests__/useZIndex.test.tsx index ab7e3094f9..e9444411e5 100644 --- a/components/_util/__tests__/useZIndex.test.tsx +++ b/components/_util/__tests__/useZIndex.test.tsx @@ -207,7 +207,7 @@ describe('Test useZIndex hooks', () => { }); const containers = Object.keys(containerComponent); // const containers = ['Modal']; - const consumers = ['Dropdown', 'SelectLike', 'ColorPicker']; + const consumers = ['Dropdown', 'SelectLike', 'ColorPicker', 'DatePicker']; // const consumers = Object.keys(consumerComponent); containers.forEach((containerKey) => { @@ -238,7 +238,7 @@ describe('Test useZIndex hooks', () => { consumerBaseZIndexOffset[key as ZIndexConsumer], ); }); - // 先暂时不测试，等所有的消费组件功能都合并过去后再统一测试 + it('Test Component', async () => { const Container = containerComponent[containerKey as ZIndexContainer]; const Consumer = consumerComponent[key as ZIndexConsumer]; diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx index 7eb6c49a81..eaa7cd1bde 100644 --- a/components/date-picker/generatePicker/generateRangePicker.tsx +++ b/components/date-picker/generatePicker/generateRangePicker.tsx @@ -27,6 +27,7 @@ import { } from '../util'; import Components from './Components'; import type { CommonPickerMethods, PickerComponentClass } from './interface'; +import { useZIndex } from '../../_util/hooks/useZIndex'; export default function generateRangePicker(generateConfig: GenerateConfig) { type InternalRangePickerProps = RangePickerProps & {}; @@ -110,6 +111,9 @@ export default function generateRangePicker(generateConfig: GenerateCo const locale = { ...contextLocale, ...props.locale! }; + // ============================ zIndex ============================ + const [zIndex] = useZIndex('DatePicker', props.popupStyle?.zIndex as number); + return wrapSSR( separator={ @@ -147,6 +151,10 @@ export default function generateRangePicker(generateConfig: GenerateCo components={Components} direction={direction} dropdownClassName={classNames(hashId, popupClassName || dropdownClassName, rootClassName)} + popupStyle={{ + ...props.popupStyle, + zIndex, + }} allowClear={mergeAllowClear(allowClear, clearIcon, )} />, ); diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx index 5039f2733f..c79979b2b5 100644 --- a/components/date-picker/generatePicker/generateSinglePicker.tsx +++ b/components/date-picker/generatePicker/generateSinglePicker.tsx @@ -28,6 +28,7 @@ import { } from '../util'; import Components from './Components'; import type { CommonPickerMethods, DatePickRef, PickerComponentClass } from './interface'; +import { useZIndex } from '../../_util/hooks/useZIndex'; export default function generatePicker(generateConfig: GenerateConfig) { type CustomPickerProps = { @@ -138,6 +139,8 @@ export default function generatePicker(generateConfig: GenerateConfig< const [contextLocale] = useLocale('DatePicker', enUS); const locale = { ...contextLocale, ...props.locale! }; + // ============================ zIndex ============================ + const [zIndex] = useZIndex('DatePicker', props.popupStyle?.zIndex as number); return wrapSSR( @@ -182,6 +185,10 @@ export default function generatePicker(generateConfig: GenerateConfig< rootClassName, popupClassName || dropdownClassName, )} + popupStyle={{ + ...props.popupStyle, + zIndex, + }} allowClear={mergeAllowClear(allowClear, clearIcon, )} />, ); diff --git a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap index 2bcc1cc018..c01bd5256e 100644 --- a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap +++ b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap @@ -1635,7 +1635,7 @@ Array [