mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 05:05:48 +08:00
Code Issues Actions 43 Packages Projects Releases Wiki Activity

feat: DatePicker & TimePicker support z-index manager (#45497)

Browse Source 
* 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>
This commit is contained in:
kiner-tang(文辉) 2023-10-24 21:54:36 +08:00 committed by GitHub
parent e7109d31b0
commit 3ec0ec23ee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/_util/__tests__/useZIndex.test.tsx
View File

@ -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];

8
components/date-picker/generatePicker/generateRangePicker.tsx
View File

@ -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<DateType>(generateConfig: GenerateConfig<DateType>) {
type InternalRangePickerProps = RangePickerProps<DateType> & {};
@ -110,6 +111,9 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
const locale = { ...contextLocale, ...props.locale! };
// ============================ zIndex ============================
const [zIndex] = useZIndex('DatePicker', props.popupStyle?.zIndex as number);
return wrapSSR(
<RCRangePicker<DateType>
separator={
@ -147,6 +151,10 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
components={Components}
direction={direction}
dropdownClassName={classNames(hashId, popupClassName || dropdownClassName, rootClassName)}
popupStyle={{
...props.popupStyle,
zIndex,
}}
allowClear={mergeAllowClear(allowClear, clearIcon, <CloseCircleFilled />)}
/>,
);

7
components/date-picker/generatePicker/generateSinglePicker.tsx
View File

@ -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<DateType>(generateConfig: GenerateConfig<DateType>) {
type CustomPickerProps = {
@ -138,6 +139,8 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
const [contextLocale] = useLocale('DatePicker', enUS);
const locale = { ...contextLocale, ...props.locale! };
// ============================ zIndex ============================
const [zIndex] = useZIndex('DatePicker', props.popupStyle?.zIndex as number);
return wrapSSR(
<RCPicker<DateType>
@ -182,6 +185,10 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
rootClassName,
popupClassName || dropdownClassName,
)}
popupStyle={{
...props.popupStyle,
zIndex,
}}
allowClear={mergeAllowClear(allowClear, clearIcon, <CloseCircleFilled />)}
/>,
);

2
components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
View File

@ -1635,7 +1635,7 @@ Array [
</div>
<div
class="ant-picker-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-picker-dropdown-range ant-picker-dropdown-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1050;"
>
<div
class="ant-picker-range-wrapper ant-picker-date-range-wrapper"

2
components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -10721,7 +10721,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
</div>
<div
class="ant-picker-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-picker-dropdown-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120;"
>
<div
class="ant-picker-panel-container"