1
This commit is contained in:
+10
@@ -0,0 +1,10 @@
|
||||
export * from './useClosable';
|
||||
export * from './useForceUpdate';
|
||||
export * from './useMergedMask';
|
||||
export * from './useMergeSemantic';
|
||||
export * from './useMultipleSelect';
|
||||
export * from './useOrientation';
|
||||
export * from './usePatchElement';
|
||||
export * from './useProxyImperativeHandle';
|
||||
export * from './useSyncState';
|
||||
export * from './useZIndex';
|
||||
+115
@@ -0,0 +1,115 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
var _useClosable = require("./useClosable");
|
||||
Object.keys(_useClosable).forEach(function (key) {
|
||||
if (key === "default" || key === "__esModule") return;
|
||||
if (key in exports && exports[key] === _useClosable[key]) return;
|
||||
Object.defineProperty(exports, key, {
|
||||
enumerable: true,
|
||||
get: function () {
|
||||
return _useClosable[key];
|
||||
}
|
||||
});
|
||||
});
|
||||
var _useForceUpdate = require("./useForceUpdate");
|
||||
Object.keys(_useForceUpdate).forEach(function (key) {
|
||||
if (key === "default" || key === "__esModule") return;
|
||||
if (key in exports && exports[key] === _useForceUpdate[key]) return;
|
||||
Object.defineProperty(exports, key, {
|
||||
enumerable: true,
|
||||
get: function () {
|
||||
return _useForceUpdate[key];
|
||||
}
|
||||
});
|
||||
});
|
||||
var _useMergedMask = require("./useMergedMask");
|
||||
Object.keys(_useMergedMask).forEach(function (key) {
|
||||
if (key === "default" || key === "__esModule") return;
|
||||
if (key in exports && exports[key] === _useMergedMask[key]) return;
|
||||
Object.defineProperty(exports, key, {
|
||||
enumerable: true,
|
||||
get: function () {
|
||||
return _useMergedMask[key];
|
||||
}
|
||||
});
|
||||
});
|
||||
var _useMergeSemantic = require("./useMergeSemantic");
|
||||
Object.keys(_useMergeSemantic).forEach(function (key) {
|
||||
if (key === "default" || key === "__esModule") return;
|
||||
if (key in exports && exports[key] === _useMergeSemantic[key]) return;
|
||||
Object.defineProperty(exports, key, {
|
||||
enumerable: true,
|
||||
get: function () {
|
||||
return _useMergeSemantic[key];
|
||||
}
|
||||
});
|
||||
});
|
||||
var _useMultipleSelect = require("./useMultipleSelect");
|
||||
Object.keys(_useMultipleSelect).forEach(function (key) {
|
||||
if (key === "default" || key === "__esModule") return;
|
||||
if (key in exports && exports[key] === _useMultipleSelect[key]) return;
|
||||
Object.defineProperty(exports, key, {
|
||||
enumerable: true,
|
||||
get: function () {
|
||||
return _useMultipleSelect[key];
|
||||
}
|
||||
});
|
||||
});
|
||||
var _useOrientation = require("./useOrientation");
|
||||
Object.keys(_useOrientation).forEach(function (key) {
|
||||
if (key === "default" || key === "__esModule") return;
|
||||
if (key in exports && exports[key] === _useOrientation[key]) return;
|
||||
Object.defineProperty(exports, key, {
|
||||
enumerable: true,
|
||||
get: function () {
|
||||
return _useOrientation[key];
|
||||
}
|
||||
});
|
||||
});
|
||||
var _usePatchElement = require("./usePatchElement");
|
||||
Object.keys(_usePatchElement).forEach(function (key) {
|
||||
if (key === "default" || key === "__esModule") return;
|
||||
if (key in exports && exports[key] === _usePatchElement[key]) return;
|
||||
Object.defineProperty(exports, key, {
|
||||
enumerable: true,
|
||||
get: function () {
|
||||
return _usePatchElement[key];
|
||||
}
|
||||
});
|
||||
});
|
||||
var _useProxyImperativeHandle = require("./useProxyImperativeHandle");
|
||||
Object.keys(_useProxyImperativeHandle).forEach(function (key) {
|
||||
if (key === "default" || key === "__esModule") return;
|
||||
if (key in exports && exports[key] === _useProxyImperativeHandle[key]) return;
|
||||
Object.defineProperty(exports, key, {
|
||||
enumerable: true,
|
||||
get: function () {
|
||||
return _useProxyImperativeHandle[key];
|
||||
}
|
||||
});
|
||||
});
|
||||
var _useSyncState = require("./useSyncState");
|
||||
Object.keys(_useSyncState).forEach(function (key) {
|
||||
if (key === "default" || key === "__esModule") return;
|
||||
if (key in exports && exports[key] === _useSyncState[key]) return;
|
||||
Object.defineProperty(exports, key, {
|
||||
enumerable: true,
|
||||
get: function () {
|
||||
return _useSyncState[key];
|
||||
}
|
||||
});
|
||||
});
|
||||
var _useZIndex = require("./useZIndex");
|
||||
Object.keys(_useZIndex).forEach(function (key) {
|
||||
if (key === "default" || key === "__esModule") return;
|
||||
if (key in exports && exports[key] === _useZIndex[key]) return;
|
||||
Object.defineProperty(exports, key, {
|
||||
enumerable: true,
|
||||
get: function () {
|
||||
return _useZIndex[key];
|
||||
}
|
||||
});
|
||||
});
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import React from 'react';
|
||||
import type { DialogProps } from '@rc-component/dialog';
|
||||
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 const pickClosable: <T extends BaseContextClosable>(context?: ContextClosable<T>) => ContextClosable<T> | undefined;
|
||||
/** Collection contains the all the props related with closable. e.g. `closable`, `closeIcon` */
|
||||
interface ClosableCollection {
|
||||
closable?: ClosableType;
|
||||
closeIcon?: ReactNode;
|
||||
disabled?: boolean;
|
||||
}
|
||||
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;
|
||||
}
|
||||
type DataAttributes = {
|
||||
[key: `data-${string}`]: string;
|
||||
};
|
||||
export declare const computeClosable: (propCloseCollection?: ClosableCollection, contextCloseCollection?: ClosableCollection | null, fallbackCloseCollection?: FallbackCloseCollection, closeLabel?: string) => [closable: boolean, closeIcon: React.ReactNode, closeBtnIsDisabled: boolean, ariaOrDataProps: React.AriaAttributes & DataAttributes];
|
||||
export declare const useClosable: (propCloseCollection?: ClosableCollection, contextCloseCollection?: ClosableCollection | null, fallbackCloseCollection?: FallbackCloseCollection) => [closable: boolean, closeIcon: ReactNode, closeBtnIsDisabled: boolean, ariaOrDataProps: React.AriaAttributes & DataAttributes];
|
||||
export {};
|
||||
+114
@@ -0,0 +1,114 @@
|
||||
"use strict";
|
||||
"use client";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.useClosable = exports.pickClosable = exports.computeClosable = void 0;
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
var _CloseOutlined = _interopRequireDefault(require("@ant-design/icons/CloseOutlined"));
|
||||
var _pickAttrs = _interopRequireDefault(require("@rc-component/util/lib/pickAttrs"));
|
||||
var _locale = require("../../locale");
|
||||
var _en_US = _interopRequireDefault(require("../../locale/en_US"));
|
||||
var _extendsObject = _interopRequireDefault(require("../extendsObject"));
|
||||
var _is = require("../is");
|
||||
const pickClosable = context => {
|
||||
if (!context) {
|
||||
return undefined;
|
||||
}
|
||||
const {
|
||||
closable,
|
||||
closeIcon
|
||||
} = context;
|
||||
return {
|
||||
closable,
|
||||
closeIcon
|
||||
};
|
||||
};
|
||||
exports.pickClosable = pickClosable;
|
||||
const EmptyFallbackCloseCollection = {};
|
||||
const computeClosableConfig = (closable, closeIcon) => {
|
||||
if (!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 ((0, _is.isPlainObject)(closable)) {
|
||||
closableConfig = {
|
||||
...closableConfig,
|
||||
...closable
|
||||
};
|
||||
}
|
||||
return closableConfig;
|
||||
};
|
||||
const mergeClosableConfigs = (propConfig, contextConfig, fallbackConfig) => {
|
||||
if (propConfig === false) {
|
||||
return false;
|
||||
}
|
||||
if (propConfig) {
|
||||
return (0, _extendsObject.default)(fallbackConfig, contextConfig, propConfig);
|
||||
}
|
||||
if (contextConfig === false) {
|
||||
return false;
|
||||
}
|
||||
if (contextConfig) {
|
||||
return (0, _extendsObject.default)(fallbackConfig, contextConfig);
|
||||
}
|
||||
return fallbackConfig.closable ? fallbackConfig : false;
|
||||
};
|
||||
const computeCloseIcon = (mergedConfig, fallbackCloseCollection, closeLabel) => {
|
||||
const {
|
||||
closeIconRender
|
||||
} = fallbackCloseCollection;
|
||||
const {
|
||||
closeIcon,
|
||||
...restConfig
|
||||
} = mergedConfig;
|
||||
let finalCloseIcon = closeIcon;
|
||||
const ariaOrDataProps = (0, _pickAttrs.default)(restConfig, true);
|
||||
if ((0, _is.isNonNullable)(finalCloseIcon)) {
|
||||
if (closeIconRender) {
|
||||
finalCloseIcon = closeIconRender(finalCloseIcon);
|
||||
}
|
||||
finalCloseIcon = /*#__PURE__*/_react.default.isValidElement(finalCloseIcon) ? (/*#__PURE__*/_react.default.cloneElement(finalCloseIcon, {
|
||||
'aria-label': closeLabel,
|
||||
...finalCloseIcon.props,
|
||||
...ariaOrDataProps
|
||||
})) : (/*#__PURE__*/_react.default.createElement("span", {
|
||||
"aria-label": closeLabel,
|
||||
...ariaOrDataProps
|
||||
}, finalCloseIcon));
|
||||
}
|
||||
return [finalCloseIcon, ariaOrDataProps];
|
||||
};
|
||||
const computeClosable = (propCloseCollection, contextCloseCollection, fallbackCloseCollection = EmptyFallbackCloseCollection, closeLabel = 'Close') => {
|
||||
const propConfig = computeClosableConfig(propCloseCollection?.closable, propCloseCollection?.closeIcon);
|
||||
const contextConfig = computeClosableConfig(contextCloseCollection?.closable, contextCloseCollection?.closeIcon);
|
||||
const mergedFallback = {
|
||||
closeIcon: /*#__PURE__*/_react.default.createElement(_CloseOutlined.default, null),
|
||||
...fallbackCloseCollection
|
||||
};
|
||||
const mergedConfig = mergeClosableConfigs(propConfig, contextConfig, mergedFallback);
|
||||
const closeBtnIsDisabled = typeof mergedConfig !== 'boolean' ? !!mergedConfig?.disabled : false;
|
||||
if (mergedConfig === false) {
|
||||
return [false, null, closeBtnIsDisabled, {}];
|
||||
}
|
||||
const [closeIcon, ariaProps] = computeCloseIcon(mergedConfig, mergedFallback, closeLabel);
|
||||
return [true, closeIcon, closeBtnIsDisabled, ariaProps];
|
||||
};
|
||||
exports.computeClosable = computeClosable;
|
||||
const useClosable = (propCloseCollection, contextCloseCollection, fallbackCloseCollection = EmptyFallbackCloseCollection) => {
|
||||
const [contextLocale] = (0, _locale.useLocale)('global', _en_US.default.global);
|
||||
return _react.default.useMemo(() => {
|
||||
return computeClosable(propCloseCollection, contextCloseCollection, {
|
||||
closeIcon: /*#__PURE__*/_react.default.createElement(_CloseOutlined.default, null),
|
||||
...fallbackCloseCollection
|
||||
}, contextLocale.close);
|
||||
}, [propCloseCollection, contextCloseCollection, fallbackCloseCollection, contextLocale.close]);
|
||||
};
|
||||
exports.useClosable = useClosable;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
import React from 'react';
|
||||
export declare const useForceUpdate: () => [number, React.ActionDispatch<[]>];
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.useForceUpdate = void 0;
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
const useForceUpdate = () => {
|
||||
return _react.default.useReducer(ori => ori + 1, 0);
|
||||
};
|
||||
exports.useForceUpdate = useForceUpdate;
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
import * as React from 'react';
|
||||
import type { AnyObject, EmptyObject, ValidChar } from '../type';
|
||||
export type SemanticSchema = {
|
||||
_default?: string;
|
||||
} & {
|
||||
[key: `${ValidChar}${string}`]: SemanticSchema;
|
||||
};
|
||||
export type Resolvable<T, P extends AnyObject> = T | ((info: {
|
||||
props: P;
|
||||
}) => T);
|
||||
export type SemanticClassNamesType<Props extends AnyObject, SemanticClassNames extends Record<PropertyKey, string>, NestedStructure extends EmptyObject = EmptyObject> = Resolvable<Readonly<SemanticClassNames>, Props> & NestedStructure;
|
||||
export type SemanticStylesType<Props extends AnyObject, SemanticStyles extends Record<PropertyKey, React.CSSProperties>, NestedStructure extends EmptyObject = EmptyObject> = Resolvable<Readonly<SemanticStyles>, Props> & NestedStructure;
|
||||
export type SemanticType<P = any, T = any> = T | ((info: {
|
||||
props: P;
|
||||
}) => T);
|
||||
export declare const mergeClassNames: <Name extends string, SemanticClassNames extends Partial<Record<Name, any>>>(schema?: SemanticSchema, ...classNames: (SemanticClassNames | undefined)[]) => SemanticClassNames;
|
||||
export declare const mergeStyles: <StylesType extends AnyObject>(...styles: (Partial<StylesType> | undefined)[]) => Record<PropertyKey, React.CSSProperties>;
|
||||
export declare const resolveStyleOrClass: <T extends AnyObject>(value: T | ((config: any) => T), info: {
|
||||
props: AnyObject;
|
||||
}) => T;
|
||||
type MaybeFn<T, P> = T | ((info: {
|
||||
props: P;
|
||||
}) => T) | undefined;
|
||||
type ObjectOnly<T> = T extends (...args: any) => any ? never : T;
|
||||
/**
|
||||
* @desc Merge classNames and styles from multiple sources. When `schema` is provided, it **must** provide the nest object structure.
|
||||
* @descZH 合并来自多个来源的 classNames 和 styles,当提供了 `schema` 时,必须提供嵌套的对象结构。
|
||||
*/
|
||||
export declare const useMergeSemantic: <ClassNamesType extends AnyObject, StylesType extends AnyObject, Props extends AnyObject>(classNamesList: MaybeFn<ClassNamesType, Props>[], stylesList: MaybeFn<StylesType, Props>[], info: {
|
||||
props: Props;
|
||||
}, schema?: SemanticSchema) => readonly [ObjectOnly<ClassNamesType>, ObjectOnly<StylesType>];
|
||||
export {};
|
||||
+97
@@ -0,0 +1,97 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.useMergeSemantic = exports.resolveStyleOrClass = exports.mergeStyles = exports.mergeClassNames = void 0;
|
||||
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
var _clsx = require("clsx");
|
||||
var _is = require("../is");
|
||||
// ========================= ClassNames =========================
|
||||
const mergeClassNames = (schema, ...classNames) => {
|
||||
const mergedSchema = schema || {};
|
||||
return classNames.filter(Boolean).reduce((acc, cur) => {
|
||||
// Loop keys of the current classNames
|
||||
Object.keys(cur || {}).forEach(key => {
|
||||
const keySchema = mergedSchema[key];
|
||||
const curVal = cur[key];
|
||||
if ((0, _is.isPlainObject)(keySchema)) {
|
||||
if ((0, _is.isPlainObject)(curVal)) {
|
||||
// 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] = (0, _clsx.clsx)(acc[key][defaultField], curVal);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Flatten fill
|
||||
acc[key] = (0, _clsx.clsx)(acc[key], curVal);
|
||||
}
|
||||
});
|
||||
return acc;
|
||||
}, {});
|
||||
};
|
||||
exports.mergeClassNames = mergeClassNames;
|
||||
const useSemanticClassNames = (schema, ...classNames) => {
|
||||
return React.useMemo(() => mergeClassNames.apply(void 0, [schema].concat(classNames)), [schema].concat(classNames));
|
||||
};
|
||||
// =========================== Styles ===========================
|
||||
const mergeStyles = (...styles) => {
|
||||
return styles.filter(Boolean).reduce((acc, cur = {}) => {
|
||||
Object.keys(cur).forEach(key => {
|
||||
acc[key] = {
|
||||
...acc[key],
|
||||
...cur[key]
|
||||
};
|
||||
});
|
||||
return acc;
|
||||
}, {});
|
||||
};
|
||||
exports.mergeStyles = mergeStyles;
|
||||
const useSemanticStyles = (...styles) => {
|
||||
return React.useMemo(() => mergeStyles.apply(void 0, styles), [].concat(styles));
|
||||
};
|
||||
// =========================== Export ===========================
|
||||
const fillObjectBySchema = (obj, schema) => {
|
||||
const newObj = {
|
||||
...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;
|
||||
};
|
||||
const resolveStyleOrClass = (value, info) => {
|
||||
return typeof value === 'function' ? value(info) : value;
|
||||
};
|
||||
/**
|
||||
* @desc Merge classNames and styles from multiple sources. When `schema` is provided, it **must** provide the nest object structure.
|
||||
* @descZH 合并来自多个来源的 classNames 和 styles,当提供了 `schema` 时,必须提供嵌套的对象结构。
|
||||
*/
|
||||
exports.resolveStyleOrClass = resolveStyleOrClass;
|
||||
const useMergeSemantic = (classNamesList, stylesList, info, schema) => {
|
||||
const resolvedClassNamesList = classNamesList.map(classNames => classNames ? resolveStyleOrClass(classNames, info) : undefined);
|
||||
const resolvedStylesList = stylesList.map(styles => styles ? resolveStyleOrClass(styles, info) : undefined);
|
||||
const mergedClassNames = useSemanticClassNames.apply(void 0, [schema].concat((0, _toConsumableArray2.default)(resolvedClassNamesList)));
|
||||
const mergedStyles = useSemanticStyles.apply(void 0, (0, _toConsumableArray2.default)(resolvedStylesList));
|
||||
return React.useMemo(() => {
|
||||
if (!schema) {
|
||||
return [mergedClassNames, mergedStyles];
|
||||
}
|
||||
return [fillObjectBySchema(mergedClassNames, schema), fillObjectBySchema(mergedStyles, schema)];
|
||||
}, [mergedClassNames, mergedStyles, schema]);
|
||||
};
|
||||
exports.useMergeSemantic = useMergeSemantic;
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
export interface MaskConfig {
|
||||
enabled?: boolean;
|
||||
blur?: boolean;
|
||||
closable?: boolean;
|
||||
}
|
||||
export type MaskType = MaskConfig | boolean;
|
||||
export declare const normalizeMaskConfig: (mask?: MaskType, maskClosable?: boolean) => MaskConfig;
|
||||
export declare const useMergedMask: (mask?: MaskType, contextMask?: MaskType, prefixCls?: string, maskClosable?: boolean) => [config: boolean, maskBlurClassName: {
|
||||
[key: string]: string | undefined;
|
||||
}, maskClosable: boolean];
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.useMergedMask = exports.normalizeMaskConfig = void 0;
|
||||
var _react = require("react");
|
||||
var _is = require("../is");
|
||||
const normalizeMaskConfig = (mask, maskClosable) => {
|
||||
let maskConfig = {};
|
||||
if ((0, _is.isPlainObject)(mask)) {
|
||||
maskConfig = mask;
|
||||
}
|
||||
if (typeof mask === 'boolean') {
|
||||
maskConfig = {
|
||||
enabled: mask
|
||||
};
|
||||
}
|
||||
if (maskConfig.closable === undefined && maskClosable !== undefined) {
|
||||
maskConfig.closable = maskClosable;
|
||||
}
|
||||
return maskConfig;
|
||||
};
|
||||
exports.normalizeMaskConfig = normalizeMaskConfig;
|
||||
const useMergedMask = (mask, contextMask, prefixCls, maskClosable) => {
|
||||
return (0, _react.useMemo)(() => {
|
||||
const maskConfig = normalizeMaskConfig(mask, maskClosable);
|
||||
const contextMaskConfig = normalizeMaskConfig(contextMask);
|
||||
const mergedConfig = {
|
||||
blur: false,
|
||||
...contextMaskConfig,
|
||||
...maskConfig,
|
||||
closable: maskConfig.closable ?? maskClosable ?? contextMaskConfig.closable ?? true
|
||||
};
|
||||
const className = mergedConfig.blur ? `${prefixCls}-mask-blur` : undefined;
|
||||
return [mergedConfig.enabled !== false, {
|
||||
mask: className
|
||||
}, !!mergedConfig.closable];
|
||||
}, [mask, contextMask, prefixCls, maskClosable]);
|
||||
};
|
||||
exports.useMergedMask = useMergedMask;
|
||||
+6
@@ -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>>];
|
||||
+38
@@ -0,0 +1,38 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.useMultipleSelect = void 0;
|
||||
var _react = require("react");
|
||||
/**
|
||||
* @title multipleSelect hooks
|
||||
* @description multipleSelect by hold down shift key
|
||||
*/
|
||||
const useMultipleSelect = getKey => {
|
||||
const [prevSelectedIndex, setPrevSelectedIndex] = (0, _react.useState)(null);
|
||||
const multipleSelect = (0, _react.useCallback)((currentSelectedIndex, data, selectedKeys) => {
|
||||
const configPrevSelectedIndex = 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];
|
||||
};
|
||||
exports.useMultipleSelect = useMultipleSelect;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export type Orientation = 'horizontal' | 'vertical';
|
||||
export declare const useOrientation: (orientation?: Orientation, vertical?: boolean, legacyDirection?: Orientation) => [Orientation, boolean];
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.useOrientation = void 0;
|
||||
var _react = require("react");
|
||||
const isValidOrientation = orientation => {
|
||||
return orientation === 'horizontal' || orientation === 'vertical';
|
||||
};
|
||||
const useOrientation = (orientation, vertical, legacyDirection) => {
|
||||
return (0, _react.useMemo)(() => {
|
||||
const validOrientation = isValidOrientation(orientation);
|
||||
let mergedOrientation;
|
||||
if (validOrientation) {
|
||||
mergedOrientation = orientation;
|
||||
} else if (typeof vertical === 'boolean') {
|
||||
mergedOrientation = vertical ? 'vertical' : 'horizontal';
|
||||
} else {
|
||||
const validLegacyDirection = isValidOrientation(legacyDirection);
|
||||
mergedOrientation = validLegacyDirection ? legacyDirection : 'horizontal';
|
||||
}
|
||||
return [mergedOrientation, mergedOrientation === 'vertical'];
|
||||
}, [legacyDirection, orientation, vertical]);
|
||||
};
|
||||
exports.useOrientation = useOrientation;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
import * as React from 'react';
|
||||
export declare const usePatchElement: () => [React.ReactElement[], (element: React.ReactElement) => () => void];
|
||||
+24
@@ -0,0 +1,24 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.usePatchElement = void 0;
|
||||
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
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((0, _toConsumableArray2.default)(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];
|
||||
};
|
||||
exports.usePatchElement = usePatchElement;
|
||||
+4
@@ -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;
|
||||
+42
@@ -0,0 +1,42 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.useProxyImperativeHandle = void 0;
|
||||
var _react = require("react");
|
||||
// Proxy the dom ref with `{ nativeElement, otherFn }` type
|
||||
// ref: https://github.com/ant-design/ant-design/discussions/45242
|
||||
|
||||
const 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;
|
||||
};
|
||||
const useProxyImperativeHandle = (ref, init) => {
|
||||
return (0, _react.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);
|
||||
});
|
||||
};
|
||||
exports.useProxyImperativeHandle = useProxyImperativeHandle;
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
type UseSyncStateProps<T> = readonly [() => T, (newValue: T) => void];
|
||||
export declare const useSyncState: <T>(initialValue: T) => UseSyncStateProps<T>;
|
||||
export {};
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.useSyncState = void 0;
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
var _useForceUpdate = require("./useForceUpdate");
|
||||
const useSyncState = initialValue => {
|
||||
const ref = React.useRef(initialValue);
|
||||
const [, forceUpdate] = (0, _useForceUpdate.useForceUpdate)();
|
||||
return [() => ref.current, newValue => {
|
||||
ref.current = newValue;
|
||||
forceUpdate();
|
||||
}];
|
||||
};
|
||||
exports.useSyncState = useSyncState;
|
||||
+8
@@ -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 {};
|
||||
+72
@@ -0,0 +1,72 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.useZIndex = exports.containerBaseZIndexOffset = exports.consumerBaseZIndexOffset = exports.CONTAINER_MAX_OFFSET = void 0;
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
var _useToken = _interopRequireDefault(require("../../theme/useToken"));
|
||||
var _warning = require("../warning");
|
||||
var _zindexContext = _interopRequireDefault(require("../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;
|
||||
const CONTAINER_MAX_OFFSET = exports.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;
|
||||
const containerBaseZIndexOffset = exports.containerBaseZIndexOffset = {
|
||||
Modal: CONTAINER_OFFSET,
|
||||
Drawer: CONTAINER_OFFSET,
|
||||
Popover: CONTAINER_OFFSET,
|
||||
Popconfirm: CONTAINER_OFFSET,
|
||||
Tooltip: CONTAINER_OFFSET,
|
||||
Tour: CONTAINER_OFFSET,
|
||||
FloatButton: CONTAINER_OFFSET
|
||||
};
|
||||
const consumerBaseZIndexOffset = exports.consumerBaseZIndexOffset = {
|
||||
SelectLike: 50,
|
||||
Dropdown: 50,
|
||||
DatePicker: 50,
|
||||
Menu: 50,
|
||||
ImagePreview: 1
|
||||
};
|
||||
const isContainerType = type => {
|
||||
return type in containerBaseZIndexOffset;
|
||||
};
|
||||
const useZIndex = (componentType, customZIndex) => {
|
||||
const [, token] = (0, _useToken.default)();
|
||||
const parentZIndex = _react.default.useContext(_zindexContext.default);
|
||||
const isContainer = isContainerType(componentType);
|
||||
let result;
|
||||
if (customZIndex !== undefined) {
|
||||
result = [customZIndex, customZIndex];
|
||||
} else {
|
||||
let zIndex = 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 = (0, _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;
|
||||
};
|
||||
exports.useZIndex = useZIndex;
|
||||
Reference in New Issue
Block a user