first commit
This commit is contained in:
8
frontend/node_modules/antd/es/_util/hooks/index.d.ts
generated
vendored
Normal file
8
frontend/node_modules/antd/es/_util/hooks/index.d.ts
generated
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
export * from './useClosable';
|
||||
export * from './useForceUpdate';
|
||||
export * from './useMergeSemantic';
|
||||
export * from './useMultipleSelect';
|
||||
export * from './usePatchElement';
|
||||
export * from './useProxyImperativeHandle';
|
||||
export * from './useSyncState';
|
||||
export * from './useZIndex';
|
||||
8
frontend/node_modules/antd/es/_util/hooks/index.js
generated
vendored
Normal file
8
frontend/node_modules/antd/es/_util/hooks/index.js
generated
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
export * from './useClosable';
|
||||
export * from './useForceUpdate';
|
||||
export * from './useMergeSemantic';
|
||||
export * from './useMultipleSelect';
|
||||
export * from './usePatchElement';
|
||||
export * from './useProxyImperativeHandle';
|
||||
export * from './useSyncState';
|
||||
export * from './useZIndex';
|
||||
33
frontend/node_modules/antd/es/_util/hooks/useClosable.d.ts
generated
vendored
Normal file
33
frontend/node_modules/antd/es/_util/hooks/useClosable.d.ts
generated
vendored
Normal file
@@ -0,0 +1,33 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import React from 'react';
|
||||
import type { DialogProps } from 'rc-dialog';
|
||||
import type { HTMLAriaDataAttributes } from '../aria-data-attrs';
|
||||
export type ClosableType = DialogProps['closable'];
|
||||
export type BaseContextClosable = {
|
||||
closable?: ClosableType;
|
||||
closeIcon?: ReactNode;
|
||||
};
|
||||
export type ContextClosable<T extends BaseContextClosable = any> = Partial<Pick<T, 'closable' | 'closeIcon'>>;
|
||||
export declare function pickClosable<T extends BaseContextClosable>(context?: ContextClosable<T>): ContextClosable<T> | undefined;
|
||||
export type UseClosableParams = {
|
||||
closable?: ClosableType;
|
||||
closeIcon?: ReactNode;
|
||||
defaultClosable?: boolean;
|
||||
defaultCloseIcon?: ReactNode;
|
||||
customCloseIconRender?: (closeIcon: ReactNode) => ReactNode;
|
||||
context?: ContextClosable;
|
||||
};
|
||||
/** Collection contains the all the props related with closable. e.g. `closable`, `closeIcon` */
|
||||
interface ClosableCollection {
|
||||
closable?: ClosableType;
|
||||
closeIcon?: ReactNode;
|
||||
}
|
||||
interface FallbackCloseCollection extends ClosableCollection {
|
||||
/**
|
||||
* Some components need to wrap CloseIcon twice,
|
||||
* this method will be executed once after the final CloseIcon is calculated
|
||||
*/
|
||||
closeIconRender?: (closeIcon: ReactNode) => ReactNode;
|
||||
}
|
||||
export declare const useClosable: (propCloseCollection?: ClosableCollection, contextCloseCollection?: ClosableCollection | null, fallbackCloseCollection?: FallbackCloseCollection) => [closable: boolean, closeIcon: React.ReactNode, closeBtnIsDisabled: boolean, ariaOrDataProps?: HTMLAriaDataAttributes];
|
||||
export {};
|
||||
106
frontend/node_modules/antd/es/_util/hooks/useClosable.js
generated
vendored
Normal file
106
frontend/node_modules/antd/es/_util/hooks/useClosable.js
generated
vendored
Normal file
@@ -0,0 +1,106 @@
|
||||
"use client";
|
||||
|
||||
import React from 'react';
|
||||
import CloseOutlined from "@ant-design/icons/es/icons/CloseOutlined";
|
||||
import pickAttrs from "rc-util/es/pickAttrs";
|
||||
import { useLocale } from '../../locale';
|
||||
import defaultLocale from '../../locale/en_US';
|
||||
import extendsObject from '../extendsObject';
|
||||
export function pickClosable(context) {
|
||||
if (!context) {
|
||||
return undefined;
|
||||
}
|
||||
const {
|
||||
closable,
|
||||
closeIcon
|
||||
} = context;
|
||||
return {
|
||||
closable,
|
||||
closeIcon
|
||||
};
|
||||
}
|
||||
/** Convert `closable` and `closeIcon` to config object */
|
||||
function useClosableConfig(closableCollection) {
|
||||
const {
|
||||
closable,
|
||||
closeIcon
|
||||
} = closableCollection || {};
|
||||
return React.useMemo(() => {
|
||||
if (
|
||||
// If `closable`, whatever rest be should be true
|
||||
!closable && (closable === false || closeIcon === false || closeIcon === null)) {
|
||||
return false;
|
||||
}
|
||||
if (closable === undefined && closeIcon === undefined) {
|
||||
return null;
|
||||
}
|
||||
let closableConfig = {
|
||||
closeIcon: typeof closeIcon !== 'boolean' && closeIcon !== null ? closeIcon : undefined
|
||||
};
|
||||
if (closable && typeof closable === 'object') {
|
||||
closableConfig = Object.assign(Object.assign({}, closableConfig), closable);
|
||||
}
|
||||
return closableConfig;
|
||||
}, [closable, closeIcon]);
|
||||
}
|
||||
/** Use same object to support `useMemo` optimization */
|
||||
const EmptyFallbackCloseCollection = {};
|
||||
export const useClosable = (propCloseCollection, contextCloseCollection, fallbackCloseCollection = EmptyFallbackCloseCollection) => {
|
||||
// Align the `props`, `context` `fallback` to config object first
|
||||
const propCloseConfig = useClosableConfig(propCloseCollection);
|
||||
const contextCloseConfig = useClosableConfig(contextCloseCollection);
|
||||
const [contextLocale] = useLocale('global', defaultLocale.global);
|
||||
const closeBtnIsDisabled = typeof propCloseConfig !== 'boolean' ? !!(propCloseConfig === null || propCloseConfig === void 0 ? void 0 : propCloseConfig.disabled) : false;
|
||||
const mergedFallbackCloseCollection = React.useMemo(() => Object.assign({
|
||||
closeIcon: /*#__PURE__*/React.createElement(CloseOutlined, null)
|
||||
}, fallbackCloseCollection), [fallbackCloseCollection]);
|
||||
// Use fallback logic to fill the config
|
||||
const mergedClosableConfig = React.useMemo(() => {
|
||||
// ================ Props First ================
|
||||
// Skip if prop is disabled
|
||||
if (propCloseConfig === false) {
|
||||
return false;
|
||||
}
|
||||
if (propCloseConfig) {
|
||||
return extendsObject(mergedFallbackCloseCollection, contextCloseConfig, propCloseConfig);
|
||||
}
|
||||
// =============== Context Second ==============
|
||||
// Skip if context is disabled
|
||||
if (contextCloseConfig === false) {
|
||||
return false;
|
||||
}
|
||||
if (contextCloseConfig) {
|
||||
return extendsObject(mergedFallbackCloseCollection, contextCloseConfig);
|
||||
}
|
||||
// ============= Fallback Default ==============
|
||||
return !mergedFallbackCloseCollection.closable ? false : mergedFallbackCloseCollection;
|
||||
}, [propCloseConfig, contextCloseConfig, mergedFallbackCloseCollection]);
|
||||
// Calculate the final closeIcon
|
||||
return React.useMemo(() => {
|
||||
var _a, _b;
|
||||
if (mergedClosableConfig === false) {
|
||||
return [false, null, closeBtnIsDisabled, {}];
|
||||
}
|
||||
const {
|
||||
closeIconRender
|
||||
} = mergedFallbackCloseCollection;
|
||||
const {
|
||||
closeIcon
|
||||
} = mergedClosableConfig;
|
||||
let mergedCloseIcon = closeIcon;
|
||||
// Wrap the closeIcon with aria props
|
||||
const ariaOrDataProps = pickAttrs(mergedClosableConfig, true);
|
||||
if (mergedCloseIcon !== null && mergedCloseIcon !== undefined) {
|
||||
// Wrap the closeIcon if needed
|
||||
if (closeIconRender) {
|
||||
mergedCloseIcon = closeIconRender(closeIcon);
|
||||
}
|
||||
mergedCloseIcon = /*#__PURE__*/React.isValidElement(mergedCloseIcon) ? (/*#__PURE__*/React.cloneElement(mergedCloseIcon, Object.assign(Object.assign(Object.assign({}, mergedCloseIcon.props), {
|
||||
'aria-label': (_b = (_a = mergedCloseIcon.props) === null || _a === void 0 ? void 0 : _a['aria-label']) !== null && _b !== void 0 ? _b : contextLocale.close
|
||||
}), ariaOrDataProps))) : (/*#__PURE__*/React.createElement("span", Object.assign({
|
||||
"aria-label": contextLocale.close
|
||||
}, ariaOrDataProps), mergedCloseIcon));
|
||||
}
|
||||
return [true, mergedCloseIcon, closeBtnIsDisabled, ariaOrDataProps];
|
||||
}, [closeBtnIsDisabled, contextLocale.close, mergedClosableConfig, mergedFallbackCloseCollection]);
|
||||
};
|
||||
2
frontend/node_modules/antd/es/_util/hooks/useForceUpdate.d.ts
generated
vendored
Normal file
2
frontend/node_modules/antd/es/_util/hooks/useForceUpdate.d.ts
generated
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
import React from 'react';
|
||||
export declare const useForceUpdate: () => [number, React.ActionDispatch<[]>];
|
||||
4
frontend/node_modules/antd/es/_util/hooks/useForceUpdate.js
generated
vendored
Normal file
4
frontend/node_modules/antd/es/_util/hooks/useForceUpdate.js
generated
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
import React from 'react';
|
||||
export const useForceUpdate = () => {
|
||||
return React.useReducer(ori => ori + 1, 0);
|
||||
};
|
||||
14
frontend/node_modules/antd/es/_util/hooks/useMergeSemantic.d.ts
generated
vendored
Normal file
14
frontend/node_modules/antd/es/_util/hooks/useMergeSemantic.d.ts
generated
vendored
Normal file
@@ -0,0 +1,14 @@
|
||||
import type { ValidChar } from '../type';
|
||||
type TemplateSemanticClassNames<T extends string> = Partial<Record<T, string>>;
|
||||
export type SemanticSchema = {
|
||||
_default?: string;
|
||||
} & {
|
||||
[key: `${ValidChar}${string}`]: SemanticSchema;
|
||||
};
|
||||
export declare function mergeClassNames<T extends string, SemanticClassNames extends Partial<Record<T, any>> = TemplateSemanticClassNames<T>>(schema?: SemanticSchema, ...classNames: (SemanticClassNames | undefined)[]): any;
|
||||
/**
|
||||
* Merge classNames and styles from multiple sources.
|
||||
* When `schema` is provided, it will **must** provide the nest object structure.
|
||||
*/
|
||||
export declare const useMergeSemantic: <ClassNamesType extends object, StylesType extends object>(classNamesList: (ClassNamesType | undefined)[], stylesList: (StylesType | undefined)[], schema?: SemanticSchema) => readonly [ClassNamesType, StylesType];
|
||||
export {};
|
||||
70
frontend/node_modules/antd/es/_util/hooks/useMergeSemantic.js
generated
vendored
Normal file
70
frontend/node_modules/antd/es/_util/hooks/useMergeSemantic.js
generated
vendored
Normal file
@@ -0,0 +1,70 @@
|
||||
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
||||
import * as React from 'react';
|
||||
import classnames from 'classnames';
|
||||
// ========================= ClassNames =========================
|
||||
export function mergeClassNames(schema, ...classNames) {
|
||||
const mergedSchema = schema || {};
|
||||
return classNames.reduce((acc, cur) => {
|
||||
// Loop keys of the current classNames
|
||||
Object.keys(cur || {}).forEach(key => {
|
||||
const keySchema = mergedSchema[key];
|
||||
const curVal = cur[key];
|
||||
if (keySchema && typeof keySchema === 'object') {
|
||||
if (curVal && typeof curVal === 'object') {
|
||||
// Loop fill
|
||||
acc[key] = mergeClassNames(keySchema, acc[key], curVal);
|
||||
} else {
|
||||
// Covert string to object structure
|
||||
const {
|
||||
_default: defaultField
|
||||
} = keySchema;
|
||||
if (defaultField) {
|
||||
acc[key] = acc[key] || {};
|
||||
acc[key][defaultField] = classnames(acc[key][defaultField], curVal);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Flatten fill
|
||||
acc[key] = classnames(acc[key], curVal);
|
||||
}
|
||||
});
|
||||
return acc;
|
||||
}, {});
|
||||
}
|
||||
function useSemanticClassNames(schema, ...classNames) {
|
||||
return React.useMemo(() => mergeClassNames.apply(void 0, [schema].concat(classNames)), [classNames, schema]);
|
||||
}
|
||||
// =========================== Styles ===========================
|
||||
function useSemanticStyles(...styles) {
|
||||
return React.useMemo(() => {
|
||||
return styles.reduce((acc, cur = {}) => {
|
||||
Object.keys(cur).forEach(key => {
|
||||
acc[key] = Object.assign(Object.assign({}, acc[key]), cur[key]);
|
||||
});
|
||||
return acc;
|
||||
}, {});
|
||||
}, [styles]);
|
||||
}
|
||||
// =========================== Export ===========================
|
||||
function fillObjectBySchema(obj, schema) {
|
||||
const newObj = Object.assign({}, obj);
|
||||
Object.keys(schema).forEach(key => {
|
||||
if (key !== '_default') {
|
||||
const nestSchema = schema[key];
|
||||
const nextValue = newObj[key] || {};
|
||||
newObj[key] = nestSchema ? fillObjectBySchema(nextValue, nestSchema) : nextValue;
|
||||
}
|
||||
});
|
||||
return newObj;
|
||||
}
|
||||
/**
|
||||
* Merge classNames and styles from multiple sources.
|
||||
* When `schema` is provided, it will **must** provide the nest object structure.
|
||||
*/
|
||||
export const useMergeSemantic = (classNamesList, stylesList, schema) => {
|
||||
const mergedClassNames = useSemanticClassNames.apply(void 0, [schema].concat(_toConsumableArray(classNamesList)));
|
||||
const mergedStyles = useSemanticStyles.apply(void 0, _toConsumableArray(stylesList));
|
||||
return React.useMemo(() => {
|
||||
return [fillObjectBySchema(mergedClassNames, schema), fillObjectBySchema(mergedStyles, schema)];
|
||||
}, [mergedClassNames, mergedStyles, schema]);
|
||||
};
|
||||
6
frontend/node_modules/antd/es/_util/hooks/useMultipleSelect.d.ts
generated
vendored
Normal file
6
frontend/node_modules/antd/es/_util/hooks/useMultipleSelect.d.ts
generated
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
export type PrevSelectedIndex = null | number;
|
||||
/**
|
||||
* @title multipleSelect hooks
|
||||
* @description multipleSelect by hold down shift key
|
||||
*/
|
||||
export declare const useMultipleSelect: <T, K>(getKey: (item: T, index: number, array: T[]) => K) => readonly [(currentSelectedIndex: number, data: T[], selectedKeys: Set<K>) => K[], import("react").Dispatch<import("react").SetStateAction<PrevSelectedIndex>>];
|
||||
31
frontend/node_modules/antd/es/_util/hooks/useMultipleSelect.js
generated
vendored
Normal file
31
frontend/node_modules/antd/es/_util/hooks/useMultipleSelect.js
generated
vendored
Normal file
@@ -0,0 +1,31 @@
|
||||
import { useCallback, useState } from 'react';
|
||||
/**
|
||||
* @title multipleSelect hooks
|
||||
* @description multipleSelect by hold down shift key
|
||||
*/
|
||||
export const useMultipleSelect = getKey => {
|
||||
const [prevSelectedIndex, setPrevSelectedIndex] = useState(null);
|
||||
const multipleSelect = useCallback((currentSelectedIndex, data, selectedKeys) => {
|
||||
const configPrevSelectedIndex = prevSelectedIndex !== null && prevSelectedIndex !== void 0 ? prevSelectedIndex : currentSelectedIndex;
|
||||
// add/delete the selected range
|
||||
const startIndex = Math.min(configPrevSelectedIndex || 0, currentSelectedIndex);
|
||||
const endIndex = Math.max(configPrevSelectedIndex || 0, currentSelectedIndex);
|
||||
const rangeKeys = data.slice(startIndex, endIndex + 1).map(getKey);
|
||||
const shouldSelected = rangeKeys.some(rangeKey => !selectedKeys.has(rangeKey));
|
||||
const changedKeys = [];
|
||||
rangeKeys.forEach(item => {
|
||||
if (shouldSelected) {
|
||||
if (!selectedKeys.has(item)) {
|
||||
changedKeys.push(item);
|
||||
}
|
||||
selectedKeys.add(item);
|
||||
} else {
|
||||
selectedKeys.delete(item);
|
||||
changedKeys.push(item);
|
||||
}
|
||||
});
|
||||
setPrevSelectedIndex(shouldSelected ? endIndex : null);
|
||||
return changedKeys;
|
||||
}, [prevSelectedIndex]);
|
||||
return [multipleSelect, setPrevSelectedIndex];
|
||||
};
|
||||
2
frontend/node_modules/antd/es/_util/hooks/usePatchElement.d.ts
generated
vendored
Normal file
2
frontend/node_modules/antd/es/_util/hooks/usePatchElement.d.ts
generated
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
import * as React from 'react';
|
||||
export declare const usePatchElement: () => [React.ReactElement[], (element: React.ReactElement) => () => void];
|
||||
15
frontend/node_modules/antd/es/_util/hooks/usePatchElement.js
generated
vendored
Normal file
15
frontend/node_modules/antd/es/_util/hooks/usePatchElement.js
generated
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
||||
import * as React from 'react';
|
||||
export const usePatchElement = () => {
|
||||
const [elements, setElements] = React.useState([]);
|
||||
const patchElement = React.useCallback(element => {
|
||||
// append a new element to elements (and create a new ref)
|
||||
setElements(originElements => [].concat(_toConsumableArray(originElements), [element]));
|
||||
// return a function that removes the new element out of elements (and create a new ref)
|
||||
// it works a little like useEffect
|
||||
return () => {
|
||||
setElements(originElements => originElements.filter(ele => ele !== element));
|
||||
};
|
||||
}, []);
|
||||
return [elements, patchElement];
|
||||
};
|
||||
4
frontend/node_modules/antd/es/_util/hooks/useProxyImperativeHandle.d.ts
generated
vendored
Normal file
4
frontend/node_modules/antd/es/_util/hooks/useProxyImperativeHandle.d.ts
generated
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
import type { Ref } from 'react';
|
||||
export declare const useProxyImperativeHandle: <NativeELementType extends HTMLElement, ReturnRefType extends {
|
||||
nativeElement: NativeELementType;
|
||||
}>(ref: Ref<any> | undefined, init: () => ReturnRefType) => void;
|
||||
34
frontend/node_modules/antd/es/_util/hooks/useProxyImperativeHandle.js
generated
vendored
Normal file
34
frontend/node_modules/antd/es/_util/hooks/useProxyImperativeHandle.js
generated
vendored
Normal file
@@ -0,0 +1,34 @@
|
||||
// Proxy the dom ref with `{ nativeElement, otherFn }` type
|
||||
// ref: https://github.com/ant-design/ant-design/discussions/45242
|
||||
import { useImperativeHandle } from 'react';
|
||||
function fillProxy(element, handler) {
|
||||
element._antProxy = element._antProxy || {};
|
||||
Object.keys(handler).forEach(key => {
|
||||
if (!(key in element._antProxy)) {
|
||||
const ori = element[key];
|
||||
element._antProxy[key] = ori;
|
||||
element[key] = handler[key];
|
||||
}
|
||||
});
|
||||
return element;
|
||||
}
|
||||
export const useProxyImperativeHandle = (ref, init) => {
|
||||
return useImperativeHandle(ref, () => {
|
||||
const refObj = init();
|
||||
const {
|
||||
nativeElement
|
||||
} = refObj;
|
||||
if (typeof Proxy !== 'undefined') {
|
||||
return new Proxy(nativeElement, {
|
||||
get(obj, prop) {
|
||||
if (refObj[prop]) {
|
||||
return refObj[prop];
|
||||
}
|
||||
return Reflect.get(obj, prop);
|
||||
}
|
||||
});
|
||||
}
|
||||
// Fallback of IE
|
||||
return fillProxy(nativeElement, refObj);
|
||||
});
|
||||
};
|
||||
3
frontend/node_modules/antd/es/_util/hooks/useSyncState.d.ts
generated
vendored
Normal file
3
frontend/node_modules/antd/es/_util/hooks/useSyncState.d.ts
generated
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
type UseSyncStateProps<T> = readonly [() => T, (newValue: T) => void];
|
||||
export declare const useSyncState: <T>(initialValue: T) => UseSyncStateProps<T>;
|
||||
export {};
|
||||
11
frontend/node_modules/antd/es/_util/hooks/useSyncState.js
generated
vendored
Normal file
11
frontend/node_modules/antd/es/_util/hooks/useSyncState.js
generated
vendored
Normal file
@@ -0,0 +1,11 @@
|
||||
import * as React from 'react';
|
||||
import { useForceUpdate } from './useForceUpdate';
|
||||
export const useSyncState = initialValue => {
|
||||
const ref = React.useRef(initialValue);
|
||||
const [, forceUpdate] = useForceUpdate();
|
||||
return [() => ref.current, newValue => {
|
||||
ref.current = newValue;
|
||||
// re-render
|
||||
forceUpdate();
|
||||
}];
|
||||
};
|
||||
8
frontend/node_modules/antd/es/_util/hooks/useZIndex.d.ts
generated
vendored
Normal file
8
frontend/node_modules/antd/es/_util/hooks/useZIndex.d.ts
generated
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
export type ZIndexContainer = 'Modal' | 'Drawer' | 'Popover' | 'Popconfirm' | 'Tooltip' | 'Tour' | 'FloatButton';
|
||||
export type ZIndexConsumer = 'SelectLike' | 'Dropdown' | 'DatePicker' | 'Menu' | 'ImagePreview';
|
||||
export declare const CONTAINER_MAX_OFFSET: number;
|
||||
export declare const containerBaseZIndexOffset: Record<ZIndexContainer, number>;
|
||||
export declare const consumerBaseZIndexOffset: Record<ZIndexConsumer, number>;
|
||||
type ReturnResult = [zIndex: number | undefined, contextZIndex: number];
|
||||
export declare const useZIndex: (componentType: ZIndexContainer | ZIndexConsumer, customZIndex?: number) => ReturnResult;
|
||||
export {};
|
||||
64
frontend/node_modules/antd/es/_util/hooks/useZIndex.js
generated
vendored
Normal file
64
frontend/node_modules/antd/es/_util/hooks/useZIndex.js
generated
vendored
Normal file
@@ -0,0 +1,64 @@
|
||||
import React from 'react';
|
||||
import useToken from '../../theme/useToken';
|
||||
import { devUseWarning } from '../warning';
|
||||
import zIndexContext from '../zindexContext';
|
||||
// Z-Index control range
|
||||
// Container: 1000 + offset 100 (max base + 10 * offset = 2000)
|
||||
// Popover: offset 50
|
||||
// Notification: Container Max zIndex + componentOffset
|
||||
const CONTAINER_OFFSET = 100;
|
||||
const CONTAINER_OFFSET_MAX_COUNT = 10;
|
||||
export const CONTAINER_MAX_OFFSET = CONTAINER_OFFSET * CONTAINER_OFFSET_MAX_COUNT;
|
||||
/**
|
||||
* Static function will default be the `CONTAINER_MAX_OFFSET`.
|
||||
* But it still may have children component like Select, Dropdown.
|
||||
* So the warning zIndex should exceed the `CONTAINER_MAX_OFFSET`.
|
||||
*/
|
||||
const CONTAINER_MAX_OFFSET_WITH_CHILDREN = CONTAINER_MAX_OFFSET + CONTAINER_OFFSET;
|
||||
export const containerBaseZIndexOffset = {
|
||||
Modal: CONTAINER_OFFSET,
|
||||
Drawer: CONTAINER_OFFSET,
|
||||
Popover: CONTAINER_OFFSET,
|
||||
Popconfirm: CONTAINER_OFFSET,
|
||||
Tooltip: CONTAINER_OFFSET,
|
||||
Tour: CONTAINER_OFFSET,
|
||||
FloatButton: CONTAINER_OFFSET
|
||||
};
|
||||
export const consumerBaseZIndexOffset = {
|
||||
SelectLike: 50,
|
||||
Dropdown: 50,
|
||||
DatePicker: 50,
|
||||
Menu: 50,
|
||||
ImagePreview: 1
|
||||
};
|
||||
function isContainerType(type) {
|
||||
return type in containerBaseZIndexOffset;
|
||||
}
|
||||
export const useZIndex = (componentType, customZIndex) => {
|
||||
const [, token] = useToken();
|
||||
const parentZIndex = React.useContext(zIndexContext);
|
||||
const isContainer = isContainerType(componentType);
|
||||
let result;
|
||||
if (customZIndex !== undefined) {
|
||||
result = [customZIndex, customZIndex];
|
||||
} else {
|
||||
let zIndex = parentZIndex !== null && parentZIndex !== void 0 ? parentZIndex : 0;
|
||||
if (isContainer) {
|
||||
zIndex +=
|
||||
// Use preset token zIndex by default but not stack when has parent container
|
||||
(parentZIndex ? 0 : token.zIndexPopupBase) +
|
||||
// Container offset
|
||||
containerBaseZIndexOffset[componentType];
|
||||
} else {
|
||||
zIndex += consumerBaseZIndexOffset[componentType];
|
||||
}
|
||||
result = [parentZIndex === undefined ? customZIndex : zIndex, zIndex];
|
||||
}
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
const warning = devUseWarning(componentType);
|
||||
const maxZIndex = token.zIndexPopupBase + CONTAINER_MAX_OFFSET_WITH_CHILDREN;
|
||||
const currentZIndex = result[0] || 0;
|
||||
process.env.NODE_ENV !== "production" ? warning(customZIndex !== undefined || currentZIndex <= maxZIndex, 'usage', '`zIndex` is over design token `zIndexPopupBase` too much. It may cause unexpected override.') : void 0;
|
||||
}
|
||||
return result;
|
||||
};
|
||||
Reference in New Issue
Block a user