This commit is contained in:
2026-05-25 17:08:18 +08:00
parent df501f6151
commit f1259b71b5
9178 changed files with 1626125 additions and 0 deletions
+19
View File
@@ -0,0 +1,19 @@
import * as React from 'react';
import type { ButtonProps, LegacyButtonType } from '../button/Button';
export interface ActionButtonProps {
type?: LegacyButtonType;
actionFn?: (...args: any[]) => any | PromiseLike<any>;
close?: (...args: any[]) => void;
autoFocus?: boolean;
prefixCls: string;
buttonProps?: ButtonProps;
emitEvent?: boolean;
quitOnNullishReturnValue?: boolean;
children?: React.ReactNode;
/**
* Do not throw if is await mode
*/
isSilent?: () => boolean;
}
declare const ActionButton: React.FC<ActionButtonProps>;
export default ActionButton;
+101
View File
@@ -0,0 +1,101 @@
"use client";
import * as React from 'react';
import useState from "@rc-component/util/es/hooks/useState";
import Button from '../button/Button';
import { convertLegacyProps } from '../button/buttonHelpers';
import { isThenable } from './is';
const ActionButton = props => {
const {
type,
children,
prefixCls,
buttonProps,
close,
autoFocus,
emitEvent,
isSilent,
quitOnNullishReturnValue,
actionFn
} = props;
const clickedRef = React.useRef(false);
const buttonRef = React.useRef(null);
const [loading, setLoading] = useState(false);
const onInternalClose = (...args) => {
close?.(...args);
};
React.useEffect(() => {
let timeoutId = null;
if (autoFocus) {
timeoutId = setTimeout(() => {
buttonRef.current?.focus({
preventScroll: true
});
});
}
return () => {
if (timeoutId) {
clearTimeout(timeoutId);
}
};
}, [autoFocus]);
const handlePromiseOnOk = returnValueOfOnOk => {
if (!isThenable(returnValueOfOnOk)) {
return;
}
setLoading(true);
returnValueOfOnOk.then((...args) => {
setLoading(false, true);
onInternalClose.apply(void 0, args);
clickedRef.current = false;
}, e => {
// See: https://github.com/ant-design/ant-design/issues/6183
setLoading(false, true);
clickedRef.current = false;
// Do not throw if is `await` mode
if (isSilent?.()) {
return;
}
return Promise.reject(e);
});
};
const onClick = e => {
if (clickedRef.current) {
return;
}
clickedRef.current = true;
if (!actionFn) {
onInternalClose();
return;
}
let returnValueOfOnOk;
if (emitEvent) {
returnValueOfOnOk = actionFn(e);
if (quitOnNullishReturnValue && !isThenable(returnValueOfOnOk)) {
clickedRef.current = false;
onInternalClose(e);
return;
}
} else if (actionFn.length) {
returnValueOfOnOk = actionFn(close);
// https://github.com/ant-design/ant-design/issues/23358
clickedRef.current = false;
} else {
returnValueOfOnOk = actionFn();
if (!isThenable(returnValueOfOnOk)) {
onInternalClose();
return;
}
}
handlePromiseOnOk(returnValueOfOnOk);
};
return /*#__PURE__*/React.createElement(Button, {
...convertLegacyProps(type),
onClick: onClick,
loading: loading,
prefixCls: prefixCls,
...buttonProps,
ref: buttonRef
}, children);
};
export default ActionButton;
+3
View File
@@ -0,0 +1,3 @@
import React from 'react';
declare const ContextIsolator: React.FC<Readonly<React.PropsWithChildren<Partial<Record<'space' | 'form', boolean>>>>>;
export default ContextIsolator;
+28
View File
@@ -0,0 +1,28 @@
"use client";
import React from 'react';
import { NoFormStyle } from '../form/context';
import { NoCompactStyle } from '../space/Compact';
import { isNonNullable } from './is';
const ContextIsolator = props => {
const {
space,
form,
children
} = props;
if (!isNonNullable(children)) {
return null;
}
let result = children;
if (form) {
result = /*#__PURE__*/React.createElement(NoFormStyle, {
override: true,
status: true
}, result);
}
if (space) {
result = /*#__PURE__*/React.createElement(NoCompactStyle, null, result);
}
return result;
};
export default ContextIsolator;
+9
View File
@@ -0,0 +1,9 @@
import * as React from 'react';
import type { AnyObject } from './type';
export declare function withPureRenderTheme<T extends AnyObject = AnyObject>(Component: React.FC<T>): (props: T) => React.JSX.Element;
export interface BaseProps {
prefixCls?: string;
style?: React.CSSProperties;
}
declare const genPurePanel: <ComponentProps extends BaseProps = BaseProps>(Component: React.ComponentType<Readonly<ComponentProps>>, alignPropName?: "align" | "dropdownAlign" | "popupAlign", postProps?: (props: ComponentProps) => ComponentProps, defaultPrefixCls?: string, getDropdownCls?: (prefixCls: string) => string) => (props: AnyObject) => React.JSX.Element;
export default genPurePanel;
+93
View File
@@ -0,0 +1,93 @@
"use client";
import * as React from 'react';
import { useControlledState } from '@rc-component/util';
import ConfigProvider, { ConfigContext } from '../config-provider';
export function withPureRenderTheme(Component) {
return props => (/*#__PURE__*/React.createElement(ConfigProvider, {
theme: {
token: {
motion: false,
zIndexPopupBase: 0
}
}
}, /*#__PURE__*/React.createElement(Component, {
...props
})));
}
/* istanbul ignore next */
const genPurePanel = (Component, alignPropName, postProps, defaultPrefixCls, getDropdownCls) => {
const PurePanel = props => {
const {
prefixCls: customizePrefixCls,
style
} = props;
const holderRef = React.useRef(null);
const [popupHeight, setPopupHeight] = React.useState(0);
const [popupWidth, setPopupWidth] = React.useState(0);
const [open, setOpen] = useControlledState(false, props.open);
const {
getPrefixCls
} = React.useContext(ConfigContext);
const prefixCls = getPrefixCls(defaultPrefixCls || 'select', customizePrefixCls);
React.useEffect(() => {
// We do not care about ssr
setOpen(true);
if (typeof ResizeObserver !== 'undefined') {
const resizeObserver = new ResizeObserver(entries => {
const element = entries[0].target;
setPopupHeight(element.offsetHeight + 8);
setPopupWidth(element.offsetWidth);
});
const interval = setInterval(() => {
const dropdownCls = getDropdownCls ? `.${getDropdownCls(prefixCls)}` : `.${prefixCls}-dropdown`;
const popup = holderRef.current?.querySelector(dropdownCls);
if (popup) {
clearInterval(interval);
resizeObserver.observe(popup);
}
}, 10);
return () => {
clearInterval(interval);
resizeObserver.disconnect();
};
}
}, [prefixCls]);
let mergedProps = {
...props,
style: {
...style,
margin: 0
},
open,
getPopupContainer: () => holderRef.current
};
if (postProps) {
mergedProps = postProps(mergedProps);
}
if (alignPropName) {
mergedProps = {
...mergedProps,
[alignPropName]: {
overflow: {
adjustX: false,
adjustY: false
}
}
};
}
const mergedStyle = {
paddingBottom: popupHeight,
position: 'relative',
minWidth: popupWidth
};
return /*#__PURE__*/React.createElement("div", {
ref: holderRef,
style: mergedStyle
}, /*#__PURE__*/React.createElement(Component, {
...mergedProps
}));
};
return withPureRenderTheme(PurePanel);
};
export default genPurePanel;
+4
View File
@@ -0,0 +1,4 @@
import type * as React from 'react';
export type HTMLAriaDataAttributes = React.AriaAttributes & {
[key: `data-${string}`]: unknown;
} & Pick<React.HTMLAttributes<HTMLDivElement>, 'role'>;
+1
View File
@@ -0,0 +1 @@
export {};
+1
View File
@@ -0,0 +1 @@
export default function capitalize<T extends string>(str: T): Capitalize<T>;
+7
View File
@@ -0,0 +1,7 @@
export default function capitalize(str) {
if (typeof str !== 'string') {
return str;
}
const ret = str.charAt(0).toUpperCase() + str.slice(1);
return ret;
}
+13
View File
@@ -0,0 +1,13 @@
import type { PresetColorKey } from '../theme/interface';
type InverseColor = `${PresetColorKey}-inverse`;
export declare const PresetStatusColors: readonly ["success", "processing", "error", "default", "warning"];
export type PresetColorType = PresetColorKey | InverseColor;
export type PresetStatusColorType = (typeof PresetStatusColors)[number];
/**
* determine if the color keyword belongs to the `Ant Design` {@link PresetColors}.
* @param color color to be judged
* @param includeInverse whether to include reversed colors
*/
export declare function isPresetColor(color?: any, includeInverse?: boolean): boolean;
export declare function isPresetStatusColor(color?: any): color is PresetStatusColorType;
export {};
+18
View File
@@ -0,0 +1,18 @@
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import { PresetColors } from '../theme/interface';
const inverseColors = PresetColors.map(color => `${color}-inverse`);
export const PresetStatusColors = ['success', 'processing', 'error', 'default', 'warning'];
/**
* determine if the color keyword belongs to the `Ant Design` {@link PresetColors}.
* @param color color to be judged
* @param includeInverse whether to include reversed colors
*/
export function isPresetColor(color, includeInverse = true) {
if (includeInverse) {
return [].concat(_toConsumableArray(inverseColors), _toConsumableArray(PresetColors)).includes(color);
}
return PresetColors.includes(color);
}
export function isPresetStatusColor(color) {
return PresetStatusColors.includes(color);
}
@@ -0,0 +1,4 @@
import type { ReactNode } from 'react';
import type { TooltipProps } from '../tooltip';
declare const convertToTooltipProps: <P extends TooltipProps>(tooltip: P | ReactNode, context?: P) => P | null;
export default convertToTooltipProps;
+18
View File
@@ -0,0 +1,18 @@
import { isValidElement } from 'react';
import { isNonNullable, isPlainObject } from './is';
const convertToTooltipProps = (tooltip, context) => {
if (!isNonNullable(tooltip)) {
return null;
}
if (isPlainObject(tooltip) && ! /*#__PURE__*/isValidElement(tooltip)) {
return {
...context,
...tooltip
};
}
return {
...context,
title: tooltip
};
};
export default convertToTooltipProps;
+4
View File
@@ -0,0 +1,4 @@
declare function copy(text: string, config?: {
format?: 'text/plain' | 'text/html';
}): Promise<boolean>;
export default copy;
+61
View File
@@ -0,0 +1,61 @@
import warning from './warning';
const execCopy = (text, isHtmlFormat) => {
let copySuccess = false;
const onCopy = event => {
event.stopPropagation();
event.preventDefault();
event.clipboardData?.clearData();
event.clipboardData?.setData('text/plain', text);
if (isHtmlFormat) {
event.clipboardData?.setData('text/html', text);
}
copySuccess = true;
};
try {
document.addEventListener('copy', onCopy, {
capture: true
});
document.execCommand('copy');
return copySuccess;
} catch {
return false;
} finally {
document.removeEventListener('copy', onCopy, {
capture: true
});
}
};
const asyncCopy = async (text, isHtmlFormat) => {
try {
if (isHtmlFormat) {
await navigator.clipboard.write([new ClipboardItem({
'text/html': new Blob([text], {
type: 'text/html'
}),
'text/plain': new Blob([text], {
type: 'text/plain'
})
})]);
} else {
await navigator.clipboard.writeText(text);
}
return true;
} catch {
return false;
}
};
async function copy(text, config) {
if (typeof text !== 'string') {
process.env.NODE_ENV !== "production" ? warning(false, 'The clipboard content must be of string type', '') : void 0;
return false;
}
const isHtmlFormat = config?.format === 'text/html';
if (await asyncCopy(text, isHtmlFormat)) {
return true;
}
if (execCopy(text, isHtmlFormat)) {
return true;
}
return false;
}
export default copy;
+1
View File
@@ -0,0 +1 @@
export declare function easeInOutCubic(t: number, b: number, c: number, d: number): number;
+9
View File
@@ -0,0 +1,9 @@
export function easeInOutCubic(t, b, c, d) {
const cc = c - b;
t /= d / 2;
if (t < 1) {
return cc / 2 * t * t * t + b;
}
// biome-ignore lint: it is a common easing function
return cc / 2 * ((t -= 2) * t * t + 2) + b;
}
+4
View File
@@ -0,0 +1,4 @@
declare function mergeProps<A, B>(a: A, b: B): B & A;
declare function mergeProps<A, B, C>(a: A, b: B, c: C): C & B & A;
declare function mergeProps<A, B, C, D>(a: A, b: B, c: C, d: D): D & C & B & A;
export default mergeProps;
+14
View File
@@ -0,0 +1,14 @@
function mergeProps(...items) {
const ret = {};
items.forEach(item => {
if (item) {
Object.keys(item).forEach(key => {
if (item[key] !== undefined) {
ret[key] = item[key];
}
});
}
});
return ret;
}
export default mergeProps;
+3
View File
@@ -0,0 +1,3 @@
import type { SizeType } from '../config-provider/SizeContext';
export declare function isPresetSize(size?: SizeType | string | number): size is SizeType;
export declare function isValidGapNumber(size?: SizeType | string | number): size is number;
+11
View File
@@ -0,0 +1,11 @@
import { isNumber } from './is';
export function isPresetSize(size) {
return ['small', 'middle', 'medium', 'large'].includes(size);
}
export function isValidGapNumber(size) {
if (!size) {
// The case of size = 0 is deliberately excluded here, because the default value of the gap attribute in CSS is 0, so if the user passes 0 in, we can directly ignore it.
return false;
}
return isNumber(size);
}
+4
View File
@@ -0,0 +1,4 @@
import type { BaseInputProps } from '@rc-component/input/lib/interface';
export type AllowClear = BaseInputProps['allowClear'];
declare const getAllowClear: (allowClear: AllowClear) => AllowClear;
export default getAllowClear;
+17
View File
@@ -0,0 +1,17 @@
"use client";
import React from 'react';
import CloseCircleFilled from "@ant-design/icons/es/icons/CloseCircleFilled";
import { isPlainObject } from './is';
const getAllowClear = allowClear => {
let mergedAllowClear;
if (isPlainObject(allowClear) && allowClear?.clearIcon) {
mergedAllowClear = allowClear;
} else if (allowClear) {
mergedAllowClear = {
clearIcon: /*#__PURE__*/React.createElement(CloseCircleFilled, null)
};
}
return mergedAllowClear;
};
export default getAllowClear;
@@ -0,0 +1 @@
export default function getReactMajorVersion(): number;
@@ -0,0 +1,8 @@
// ZombieJ: This is only warn for React 17 not support.
// But Jest mock React 17 will cause many issues in testing,
// Can be safe to remove in next major version.
import { version } from 'react';
export default function getReactMajorVersion() {
const majorVersion = Number.parseInt(version.split('.')[0], 10);
return majorVersion;
}
+3
View File
@@ -0,0 +1,3 @@
import type * as React from 'react';
export type RenderFunction = () => React.ReactNode;
export declare const getRenderPropValue: (propValue?: React.ReactNode | RenderFunction) => React.ReactNode;
+6
View File
@@ -0,0 +1,6 @@
export const getRenderPropValue = propValue => {
if (!propValue) {
return null;
}
return typeof propValue === 'function' ? propValue() : propValue;
};
+3
View File
@@ -0,0 +1,3 @@
export declare const isWindow: (obj: any) => obj is Window;
declare const getScroll: (target: HTMLElement | Window | Document | null) => number;
export default getScroll;
+31
View File
@@ -0,0 +1,31 @@
import { isNonNullable } from './is';
export const isWindow = obj => {
return isNonNullable(obj) && obj === obj.window;
};
const getScroll = target => {
if (typeof window === 'undefined') {
/* istanbul ignore next */
return 0;
}
let result = 0;
if (isWindow(target)) {
result = target.pageYOffset;
} else if (target instanceof Document) {
result = target.documentElement.scrollTop;
} else if (target instanceof HTMLElement) {
result = target.scrollTop;
} else if (target) {
// According to the type inference, the `target` is `never` type.
// Since we configured the loose mode type checking, and supports mocking the target with such shape below::
// `{ documentElement: { scrollLeft: 200, scrollTop: 400 } }`,
// the program may falls into this branch.
// Check the corresponding tests for details. Don't sure what is the real scenario this happens.
/* biome-ignore lint/complexity/useLiteralKeys: target is a never type */ /* eslint-disable-next-line dot-notation */
result = target['scrollTop'];
}
if (target && !isWindow(target) && typeof result !== 'number') {
result = (target.ownerDocument ?? target).documentElement?.scrollTop;
}
return result;
};
export default getScroll;
+10
View File
@@ -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';
+10
View File
@@ -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';
+29
View File
@@ -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 {};
+105
View File
@@ -0,0 +1,105 @@
"use client";
import React from 'react';
import CloseOutlined from "@ant-design/icons/es/icons/CloseOutlined";
import pickAttrs from "@rc-component/util/es/pickAttrs";
import { useLocale } from '../../locale';
import defaultLocale from '../../locale/en_US';
import extendsObject from '../extendsObject';
import { isNonNullable, isPlainObject } from '../is';
export const pickClosable = context => {
if (!context) {
return undefined;
}
const {
closable,
closeIcon
} = context;
return {
closable,
closeIcon
};
};
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 (isPlainObject(closable)) {
closableConfig = {
...closableConfig,
...closable
};
}
return closableConfig;
};
const mergeClosableConfigs = (propConfig, contextConfig, fallbackConfig) => {
if (propConfig === false) {
return false;
}
if (propConfig) {
return extendsObject(fallbackConfig, contextConfig, propConfig);
}
if (contextConfig === false) {
return false;
}
if (contextConfig) {
return extendsObject(fallbackConfig, contextConfig);
}
return fallbackConfig.closable ? fallbackConfig : false;
};
const computeCloseIcon = (mergedConfig, fallbackCloseCollection, closeLabel) => {
const {
closeIconRender
} = fallbackCloseCollection;
const {
closeIcon,
...restConfig
} = mergedConfig;
let finalCloseIcon = closeIcon;
const ariaOrDataProps = pickAttrs(restConfig, true);
if (isNonNullable(finalCloseIcon)) {
if (closeIconRender) {
finalCloseIcon = closeIconRender(finalCloseIcon);
}
finalCloseIcon = /*#__PURE__*/React.isValidElement(finalCloseIcon) ? (/*#__PURE__*/React.cloneElement(finalCloseIcon, {
'aria-label': closeLabel,
...finalCloseIcon.props,
...ariaOrDataProps
})) : (/*#__PURE__*/React.createElement("span", {
"aria-label": closeLabel,
...ariaOrDataProps
}, finalCloseIcon));
}
return [finalCloseIcon, ariaOrDataProps];
};
export 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.createElement(CloseOutlined, 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];
};
export const useClosable = (propCloseCollection, contextCloseCollection, fallbackCloseCollection = EmptyFallbackCloseCollection) => {
const [contextLocale] = useLocale('global', defaultLocale.global);
return React.useMemo(() => {
return computeClosable(propCloseCollection, contextCloseCollection, {
closeIcon: /*#__PURE__*/React.createElement(CloseOutlined, null),
...fallbackCloseCollection
}, contextLocale.close);
}, [propCloseCollection, contextCloseCollection, fallbackCloseCollection, contextLocale.close]);
};
+2
View File
@@ -0,0 +1,2 @@
import React from 'react';
export declare const useForceUpdate: () => [number, React.ActionDispatch<[]>];
+4
View File
@@ -0,0 +1,4 @@
import React from 'react';
export const useForceUpdate = () => {
return React.useReducer(ori => ori + 1, 0);
};
+32
View File
@@ -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 {};
+85
View File
@@ -0,0 +1,85 @@
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import * as React from 'react';
import { clsx } from 'clsx';
import { isPlainObject } from '../is';
// ========================= ClassNames =========================
export 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 (isPlainObject(keySchema)) {
if (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] = clsx(acc[key][defaultField], curVal);
}
}
} else {
// Flatten fill
acc[key] = clsx(acc[key], curVal);
}
});
return acc;
}, {});
};
const useSemanticClassNames = (schema, ...classNames) => {
return React.useMemo(() => mergeClassNames.apply(void 0, [schema].concat(classNames)), [schema].concat(classNames));
};
// =========================== Styles ===========================
export const mergeStyles = (...styles) => {
return styles.filter(Boolean).reduce((acc, cur = {}) => {
Object.keys(cur).forEach(key => {
acc[key] = {
...acc[key],
...cur[key]
};
});
return acc;
}, {});
};
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;
};
export 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` 时,必须提供嵌套的对象结构。
*/
export 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(_toConsumableArray(resolvedClassNamesList)));
const mergedStyles = useSemanticStyles.apply(void 0, _toConsumableArray(resolvedStylesList));
return React.useMemo(() => {
if (!schema) {
return [mergedClassNames, mergedStyles];
}
return [fillObjectBySchema(mergedClassNames, schema), fillObjectBySchema(mergedStyles, schema)];
}, [mergedClassNames, mergedStyles, schema]);
};
+10
View File
@@ -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];
+33
View File
@@ -0,0 +1,33 @@
import { useMemo } from 'react';
import { isPlainObject } from '../is';
export const normalizeMaskConfig = (mask, maskClosable) => {
let maskConfig = {};
if (isPlainObject(mask)) {
maskConfig = mask;
}
if (typeof mask === 'boolean') {
maskConfig = {
enabled: mask
};
}
if (maskConfig.closable === undefined && maskClosable !== undefined) {
maskConfig.closable = maskClosable;
}
return maskConfig;
};
export const useMergedMask = (mask, contextMask, prefixCls, maskClosable) => {
return 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]);
};
@@ -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
View 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 ?? 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
View File
@@ -0,0 +1,2 @@
export type Orientation = 'horizontal' | 'vertical';
export declare const useOrientation: (orientation?: Orientation, vertical?: boolean, legacyDirection?: Orientation) => [Orientation, boolean];
+19
View File
@@ -0,0 +1,19 @@
import { useMemo } from 'react';
const isValidOrientation = orientation => {
return orientation === 'horizontal' || orientation === 'vertical';
};
export const useOrientation = (orientation, vertical, legacyDirection) => {
return 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]);
};
@@ -0,0 +1,2 @@
import * as React from 'react';
export declare const usePatchElement: () => [React.ReactElement[], (element: React.ReactElement) => () => void];
+15
View 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];
};
@@ -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;
@@ -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';
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;
};
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
View File
@@ -0,0 +1,3 @@
type UseSyncStateProps<T> = readonly [() => T, (newValue: T) => void];
export declare const useSyncState: <T>(initialValue: T) => UseSyncStateProps<T>;
export {};
+10
View File
@@ -0,0 +1,10 @@
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;
forceUpdate();
}];
};
+8
View 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
View 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
};
const 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 ?? 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;
};
+7
View File
@@ -0,0 +1,7 @@
export declare const isNonNullable: <T>(val: T) => val is NonNullable<T>;
export declare const isNumber: (val: any) => val is number;
export declare const isString: (val: any) => val is string;
export declare const isPlainObject: <T extends object = object>(val: any) => val is T;
export declare const isFunction: (val: any) => val is (...args: any[]) => any;
export declare const isThenable: <T>(val?: PromiseLike<T>) => val is PromiseLike<T>;
export declare const isPrimitive: (val: any) => boolean;
+21
View File
@@ -0,0 +1,21 @@
export const isNonNullable = val => {
return val !== undefined && val !== null;
};
export const isNumber = val => {
return typeof val === 'number' && !Number.isNaN(val);
};
export const isString = val => {
return typeof val === 'string';
};
export const isPlainObject = val => {
return val !== null && typeof val === 'object';
};
export const isFunction = val => {
return typeof val === 'function';
};
export const isThenable = val => {
return isNonNullable(val) && isFunction(val.then);
};
export const isPrimitive = val => {
return typeof val !== 'object' && !isFunction(val) || val === null;
};
+7
View File
@@ -0,0 +1,7 @@
import type { CSSMotionProps } from '@rc-component/motion';
declare const initCollapseMotion: (rootCls?: string) => CSSMotionProps;
declare const _SelectPlacements: readonly ["bottomLeft", "bottomRight", "topLeft", "topRight"];
export type SelectCommonPlacement = (typeof _SelectPlacements)[number];
declare const getTransitionName: (rootPrefixCls: string, motion: string, transitionName?: string) => string;
export { getTransitionName };
export default initCollapseMotion;
+42
View File
@@ -0,0 +1,42 @@
import { defaultPrefixCls } from '../config-provider';
import { isPlainObject } from './is';
// ================== Collapse Motion ==================
const getCollapsedHeight = () => ({
height: 0,
opacity: 0
});
const getRealHeight = node => ({
height: node?.scrollHeight ?? 0,
opacity: node ? 1 : 0
});
const getCurrentHeight = node => ({
height: node?.offsetHeight ?? 0
});
const isTransitionEvent = event => {
return isPlainObject(event) && 'propertyName' in event;
};
const skipOpacityTransition = (_, event) => {
return event?.deadline === true || (isTransitionEvent(event) ? event.propertyName === 'height' : false);
};
const initCollapseMotion = (rootCls = defaultPrefixCls) => ({
motionName: `${rootCls}-motion-collapse`,
onAppearStart: getCollapsedHeight,
onEnterStart: getCollapsedHeight,
onAppearActive: getRealHeight,
onEnterActive: getRealHeight,
onLeaveStart: getCurrentHeight,
onLeaveActive: getCollapsedHeight,
onAppearEnd: skipOpacityTransition,
onEnterEnd: skipOpacityTransition,
onLeaveEnd: skipOpacityTransition,
motionDeadline: 500
});
const _SelectPlacements = ['bottomLeft', 'bottomRight', 'topLeft', 'topRight'];
const getTransitionName = (rootPrefixCls, motion, transitionName) => {
if (transitionName !== undefined) {
return transitionName;
}
return `${rootPrefixCls}-${motion}`;
};
export { getTransitionName };
export default initCollapseMotion;
+21
View File
@@ -0,0 +1,21 @@
import type { BuildInPlacements } from '@rc-component/trigger';
import { getArrowOffsetToken } from '../style/placementArrow';
export interface AdjustOverflow {
adjustX?: 0 | 1;
adjustY?: 0 | 1;
}
export interface PlacementsConfig {
arrowWidth: number;
arrowPointAtCenter?: boolean;
autoAdjustOverflow?: boolean | AdjustOverflow;
offset: number;
borderRadius: number;
visibleFirst?: boolean;
}
export declare function getOverflowOptions(placement: string, arrowOffset: ReturnType<typeof getArrowOffsetToken>, arrowWidth: number, autoAdjustOverflow?: boolean | AdjustOverflow): {
adjustX?: boolean | number;
adjustY?: boolean | number;
shiftX?: boolean | number;
shiftY?: boolean | number;
};
export default function getPlacements(config: PlacementsConfig): BuildInPlacements;
+183
View File
@@ -0,0 +1,183 @@
import { getArrowOffsetToken } from '../style/placementArrow';
import { isPlainObject } from './is';
export function getOverflowOptions(placement, arrowOffset, arrowWidth, autoAdjustOverflow) {
if (autoAdjustOverflow === false) {
return {
adjustX: false,
adjustY: false
};
}
const overflow = isPlainObject(autoAdjustOverflow) ? autoAdjustOverflow : {};
const baseOverflow = {};
switch (placement) {
case 'top':
case 'bottom':
baseOverflow.shiftX = arrowOffset.arrowOffsetHorizontal * 2 + arrowWidth;
baseOverflow.shiftY = true;
baseOverflow.adjustY = true;
break;
case 'left':
case 'right':
baseOverflow.shiftY = arrowOffset.arrowOffsetVertical * 2 + arrowWidth;
baseOverflow.shiftX = true;
baseOverflow.adjustX = true;
break;
}
const mergedOverflow = {
...baseOverflow,
...overflow
};
// Support auto shift
if (!mergedOverflow.shiftX) {
mergedOverflow.adjustX = true;
}
if (!mergedOverflow.shiftY) {
mergedOverflow.adjustY = true;
}
return mergedOverflow;
}
const PlacementAlignMap = {
left: {
points: ['cr', 'cl']
},
right: {
points: ['cl', 'cr']
},
top: {
points: ['bc', 'tc']
},
bottom: {
points: ['tc', 'bc']
},
topLeft: {
points: ['bl', 'tl']
},
leftTop: {
points: ['tr', 'tl']
},
topRight: {
points: ['br', 'tr']
},
rightTop: {
points: ['tl', 'tr']
},
bottomRight: {
points: ['tr', 'br']
},
rightBottom: {
points: ['bl', 'br']
},
bottomLeft: {
points: ['tl', 'bl']
},
leftBottom: {
points: ['br', 'bl']
}
};
const ArrowCenterPlacementAlignMap = {
topLeft: {
points: ['bl', 'tc']
},
leftTop: {
points: ['tr', 'cl']
},
topRight: {
points: ['br', 'tc']
},
rightTop: {
points: ['tl', 'cr']
},
bottomRight: {
points: ['tr', 'bc']
},
rightBottom: {
points: ['bl', 'cr']
},
bottomLeft: {
points: ['tl', 'bc']
},
leftBottom: {
points: ['br', 'cl']
}
};
const DisableAutoArrowList = new Set(['topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom']);
export default function getPlacements(config) {
const {
arrowWidth,
autoAdjustOverflow,
arrowPointAtCenter,
offset,
borderRadius,
visibleFirst
} = config;
const halfArrowWidth = arrowWidth / 2;
const placementMap = {};
// Dynamic offset
const arrowOffset = getArrowOffsetToken({
contentRadius: borderRadius,
limitVerticalRadius: true
});
Object.keys(PlacementAlignMap).forEach(key => {
const template = arrowPointAtCenter && ArrowCenterPlacementAlignMap[key] || PlacementAlignMap[key];
const placementInfo = {
...template,
offset: [0, 0],
dynamicInset: true
};
placementMap[key] = placementInfo;
// Disable autoArrow since design is fixed position
if (DisableAutoArrowList.has(key)) {
placementInfo.autoArrow = false;
}
// Static offset
switch (key) {
case 'top':
case 'topLeft':
case 'topRight':
placementInfo.offset[1] = -halfArrowWidth - offset;
break;
case 'bottom':
case 'bottomLeft':
case 'bottomRight':
placementInfo.offset[1] = halfArrowWidth + offset;
break;
case 'left':
case 'leftTop':
case 'leftBottom':
placementInfo.offset[0] = -halfArrowWidth - offset;
break;
case 'right':
case 'rightTop':
case 'rightBottom':
placementInfo.offset[0] = halfArrowWidth + offset;
break;
}
if (arrowPointAtCenter) {
switch (key) {
case 'topLeft':
case 'bottomLeft':
placementInfo.offset[0] = -arrowOffset.arrowOffsetHorizontal - halfArrowWidth;
break;
case 'topRight':
case 'bottomRight':
placementInfo.offset[0] = arrowOffset.arrowOffsetHorizontal + halfArrowWidth;
break;
case 'leftTop':
case 'rightTop':
placementInfo.offset[1] = -arrowOffset.arrowOffsetHorizontal * 2 + halfArrowWidth;
break;
case 'leftBottom':
case 'rightBottom':
placementInfo.offset[1] = arrowOffset.arrowOffsetHorizontal * 2 - halfArrowWidth;
break;
}
}
// Overflow
placementInfo.overflow = getOverflowOptions(key, arrowOffset, arrowWidth, autoAdjustOverflow);
// VisibleFirst
if (visibleFirst) {
placementInfo.htmlRegion = 'visibleFirst';
}
});
return placementMap;
}
+7
View File
@@ -0,0 +1,7 @@
import React from 'react';
import type { AnyObject } from './type';
export declare function isFragment(child: any): boolean;
type RenderProps = AnyObject | ((originProps: AnyObject) => AnyObject | undefined);
export declare const replaceElement: <P>(element: React.ReactNode, replacement: React.ReactNode, props?: RenderProps) => React.ReactNode;
export declare function cloneElement<P>(element: React.ReactNode, props?: RenderProps): React.ReactElement<P>;
export {};
+14
View File
@@ -0,0 +1,14 @@
import React from 'react';
import { isFunction } from './is';
export function isFragment(child) {
return child && /*#__PURE__*/React.isValidElement(child) && child.type === React.Fragment;
}
export const replaceElement = (element, replacement, props) => {
if (! /*#__PURE__*/React.isValidElement(element)) {
return replacement;
}
return /*#__PURE__*/React.cloneElement(element, isFunction(props) ? props(element.props || {}) : props);
};
export function cloneElement(element, props) {
return replaceElement(element, element, props);
}
+22
View File
@@ -0,0 +1,22 @@
export declare const responsiveArray: readonly ["xxxl", "xxl", "xl", "lg", "md", "sm", "xs"];
export declare const responsiveArrayReversed: ("xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl")[];
export type Breakpoint = (typeof responsiveArray)[number];
export type BreakpointMap = Record<Breakpoint, string>;
export type ScreenMap = Partial<Record<Breakpoint, boolean>>;
export type ScreenSizeMap = Partial<Record<Breakpoint, number>>;
type SubscribeFunc = (screens: ScreenMap) => void;
export declare const matchScreen: (screens: ScreenMap, screenSizes?: ScreenSizeMap) => number | undefined;
interface ResponsiveObserverType {
responsiveMap: BreakpointMap;
dispatch: (map: ScreenMap) => boolean;
subscribe: (func: SubscribeFunc) => number;
unsubscribe: (token: number) => void;
register: () => void;
unregister: () => void;
matchHandlers: Record<PropertyKey, {
mql: MediaQueryList;
listener: (this: MediaQueryList, ev: MediaQueryListEvent) => void;
}>;
}
declare const useResponsiveObserver: () => ResponsiveObserverType;
export default useResponsiveObserver;
+118
View File
@@ -0,0 +1,118 @@
import React from 'react';
import { useToken } from '../theme/internal';
export const responsiveArray = ['xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
export const responsiveArrayReversed = [].concat(responsiveArray).reverse();
const getResponsiveMap = token => ({
xs: `(max-width: ${token.screenXSMax}px)`,
sm: `(min-width: ${token.screenSM}px)`,
md: `(min-width: ${token.screenMD}px)`,
lg: `(min-width: ${token.screenLG}px)`,
xl: `(min-width: ${token.screenXL}px)`,
xxl: `(min-width: ${token.screenXXL}px)`,
xxxl: `(min-width: ${token.screenXXXL}px)`
});
/**
* Ensures that the breakpoints token are valid, in good order
* For each breakpoint : screenMin <= screen <= screenMax and screenMax <= nextScreenMin
*/
const validateBreakpoints = token => {
const indexableToken = token;
const revBreakpoints = [].concat(responsiveArray).reverse();
revBreakpoints.forEach((breakpoint, i) => {
const breakpointUpper = breakpoint.toUpperCase();
const screenMin = `screen${breakpointUpper}Min`;
const screen = `screen${breakpointUpper}`;
if (!(indexableToken[screenMin] <= indexableToken[screen])) {
throw new Error(`${screenMin}<=${screen} fails : !(${indexableToken[screenMin]}<=${indexableToken[screen]})`);
}
if (i < revBreakpoints.length - 1) {
const screenMax = `screen${breakpointUpper}Max`;
if (!(indexableToken[screen] <= indexableToken[screenMax])) {
throw new Error(`${screen}<=${screenMax} fails : !(${indexableToken[screen]}<=${indexableToken[screenMax]})`);
}
const nextBreakpointUpperMin = revBreakpoints[i + 1].toUpperCase();
const nextScreenMin = `screen${nextBreakpointUpperMin}Min`;
if (!(indexableToken[screenMax] <= indexableToken[nextScreenMin])) {
throw new Error(`${screenMax}<=${nextScreenMin} fails : !(${indexableToken[screenMax]}<=${indexableToken[nextScreenMin]})`);
}
}
});
return token;
};
export const matchScreen = (screens, screenSizes) => {
if (!screenSizes) {
return;
}
for (const breakpoint of responsiveArray) {
if (screens[breakpoint] && screenSizes?.[breakpoint] !== undefined) {
return screenSizes[breakpoint];
}
}
};
const useResponsiveObserver = () => {
const [, token] = useToken();
const responsiveMap = getResponsiveMap(validateBreakpoints(token));
// To avoid repeat create instance, we add `useMemo` here.
return React.useMemo(() => {
const subscribers = new Map();
let subUid = -1;
let screens = {};
return {
responsiveMap,
matchHandlers: {},
dispatch(pointMap) {
screens = pointMap;
subscribers.forEach(func => {
func(screens);
});
return subscribers.size >= 1;
},
subscribe(func) {
if (!subscribers.size) {
this.register();
}
subUid += 1;
subscribers.set(subUid, func);
func(screens);
return subUid;
},
unsubscribe(paramToken) {
subscribers.delete(paramToken);
if (!subscribers.size) {
this.unregister();
}
},
register() {
Object.entries(responsiveMap).forEach(([screen, mediaQuery]) => {
const listener = ({
matches
}) => {
this.dispatch({
...screens,
[screen]: matches
});
};
const mql = window.matchMedia(mediaQuery);
if (typeof mql?.addEventListener === 'function') {
mql.addEventListener('change', listener);
}
this.matchHandlers[mediaQuery] = {
mql,
listener
};
listener(mql);
});
},
unregister() {
Object.values(responsiveMap).forEach(mediaQuery => {
const handler = this.matchHandlers[mediaQuery];
if (typeof handler?.mql?.removeEventListener === 'function') {
handler.mql.removeEventListener('change', handler?.listener);
}
});
subscribers.clear();
}
};
}, [responsiveMap]);
};
export default useResponsiveObserver;
+10
View File
@@ -0,0 +1,10 @@
interface ScrollToOptions {
/** Scroll container, default as window */
getContainer?: () => HTMLElement | Window | Document;
/** Scroll end callback */
callback?: () => void;
/** Animation duration, default as 450 */
duration?: number;
}
export default function scrollTo(y: number, options?: ScrollToOptions): () => void;
export {};
+35
View File
@@ -0,0 +1,35 @@
import raf from "@rc-component/util/es/raf";
import { easeInOutCubic } from './easings';
import getScroll, { isWindow } from './getScroll';
export default function scrollTo(y, options = {}) {
const {
getContainer = () => window,
callback,
duration = 450
} = options;
const container = getContainer();
const scrollTop = getScroll(container);
const startTime = Date.now();
let rafId;
const frameFunc = () => {
const timestamp = Date.now();
const time = timestamp - startTime;
const nextScrollTop = easeInOutCubic(time > duration ? duration : time, scrollTop, y, duration);
if (isWindow(container)) {
container.scrollTo(window.pageXOffset, nextScrollTop);
} else if (container instanceof Document || container.constructor.name === 'HTMLDocument') {
container.documentElement.scrollTop = nextScrollTop;
} else {
container.scrollTop = nextScrollTop;
}
if (time < duration) {
rafId = raf(frameFunc);
} else if (typeof callback === 'function') {
callback();
}
};
rafId = raf(frameFunc);
return () => {
raf.cancel(rafId);
};
}
+6
View File
@@ -0,0 +1,6 @@
import type { ValidateStatus } from '../form/FormItem';
declare const _InputStatuses: readonly ["warning", "error", "", "success", "validating"];
export type InputStatus = (typeof _InputStatuses)[number];
export declare const getStatusClassNames: (prefixCls: string, status?: ValidateStatus, hasFeedback?: boolean) => string;
export declare const getMergedStatus: (contextStatus?: ValidateStatus, customStatus?: InputStatus) => "" | "success" | "error" | "warning" | "validating" | undefined;
export {};
+12
View File
@@ -0,0 +1,12 @@
import { clsx } from 'clsx';
const _InputStatuses = ['warning', 'error', '', 'success', 'validating'];
export const getStatusClassNames = (prefixCls, status, hasFeedback) => {
return clsx({
[`${prefixCls}-status-success`]: status === 'success',
[`${prefixCls}-status-warning`]: status === 'warning',
[`${prefixCls}-status-error`]: status === 'error',
[`${prefixCls}-status-validating`]: status === 'validating',
[`${prefixCls}-has-feedback`]: hasFeedback
});
};
export const getMergedStatus = (contextStatus, customStatus) => customStatus || contextStatus;
+3
View File
@@ -0,0 +1,3 @@
import { isStyleSupport } from '@rc-component/util/lib/Dom/styleChecker';
export declare const canUseDocElement: () => false | HTMLElement;
export { isStyleSupport };
+4
View File
@@ -0,0 +1,4 @@
import canUseDom from "@rc-component/util/es/Dom/canUseDom";
import { isStyleSupport } from "@rc-component/util/es/Dom/styleChecker";
export const canUseDocElement = () => canUseDom() && window.document.documentElement;
export { isStyleSupport };
@@ -0,0 +1,5 @@
declare function throttleByAnimationFrame<T extends any[]>(fn: (...args: T) => void): {
(...args: T): void;
cancel(): void;
};
export default throttleByAnimationFrame;
+20
View File
@@ -0,0 +1,20 @@
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import raf from "@rc-component/util/es/raf";
function throttleByAnimationFrame(fn) {
let requestId = null;
const later = args => () => {
requestId = null;
fn.apply(void 0, _toConsumableArray(args));
};
const throttled = (...args) => {
if (requestId === null) {
requestId = raf(later(args));
}
};
throttled.cancel = () => {
raf.cancel(requestId);
requestId = null;
};
return throttled;
}
export default throttleByAnimationFrame;
+5
View File
@@ -0,0 +1,5 @@
interface Config {
skipEmpty?: boolean;
}
declare const toList: <T>(val: T | T[], config?: Config) => T[];
export default toList;
+8
View File
@@ -0,0 +1,8 @@
import { isNonNullable } from './is';
const toList = (val, config = {}) => {
if (!isNonNullable(val) && config?.skipEmpty) {
return [];
}
return Array.isArray(val) ? val : [val];
};
export default toList;
+3
View File
@@ -0,0 +1,3 @@
import type { TransferKey } from '../transfer/interface';
export declare const groupKeysMap: (keys: TransferKey[]) => Map<import("react").Key, number>;
export declare const groupDisabledKeysMap: <RecordType extends any[]>(dataSource: RecordType) => Map<import("react").Key, number>;
+19
View File
@@ -0,0 +1,19 @@
export const groupKeysMap = keys => {
const map = new Map();
keys.forEach((key, index) => {
map.set(key, index);
});
return map;
};
export const groupDisabledKeysMap = dataSource => {
const map = new Map();
dataSource.forEach(({
disabled,
key
}, index) => {
if (disabled) {
map.set(key, index);
}
});
return map;
};
+59
View File
@@ -0,0 +1,59 @@
import type React from 'react';
export type Primitive = null | undefined | string | number | boolean | symbol | bigint;
/** https://github.com/Microsoft/TypeScript/issues/29729 */
export type LiteralUnion<T, U extends Primitive = string> = T | (U & Record<never, never>);
export type AnyObject = Record<PropertyKey, any>;
export type EmptyObject = Record<never, never>;
export type CustomComponent<P = AnyObject> = React.ComponentType<P> | string;
/**
* Get component props
* @example
* ```ts
* import { Checkbox } from 'antd'
* import type { GetProps } from 'antd';
*
* type CheckboxGroupProps = GetProps<typeof Checkbox.Group>
*
* const MyContext = React.createContext<{ sample?: boolean }>({});
* type MyContextProps = GetProps<typeof MyContext>;
*
* ```
* @since 5.13.0
*/
export type GetProps<T extends React.ComponentType<any> | object> = T extends React.Context<infer CP> ? CP : T extends React.ComponentType<infer P> ? P : T extends object ? T : never;
/**
* Get component props by component name
* @example
* ```ts
* import { Select } from 'antd';
* import type { GetProp, SelectProps } from 'antd';
*
* type SelectOption1 = GetProp<SelectProps, 'options'>[number];
* // or
* type SelectOption2 = GetProp<typeof Select, 'options'>[number];
*
* const onChange: GetProp<typeof Select, 'onChange'> = (value, option) => {
* // Do something
* };
* ```
* @since 5.13.0
*/
export type GetProp<T extends React.ComponentType<any> | object, PropName extends keyof GetProps<T>> = NonNullable<GetProps<T>[PropName]>;
type ReactRefComponent<Props extends {
ref?: React.Ref<any> | string;
}> = (props: Props) => React.ReactNode;
type ExtractRefAttributesRef<T> = T extends React.RefAttributes<infer P> ? P : never;
/**
* Get component ref
* @example
* ```ts
* import { Input } from 'antd';
* import type { GetRef } from 'antd';
*
* type InputRef = GetRef<typeof Input>;
* ```
* @since 5.13.0
*/
export type GetRef<T extends ReactRefComponent<any> | React.Component<any>> = T extends React.Component<any> ? T : T extends React.ComponentType<infer P> ? ExtractRefAttributesRef<P> : never;
export type ValidChar = 'a' | 'b' | 'c' | 'd' | 'e' | 'f' | 'g' | 'h' | 'i' | 'j' | 'k' | 'l' | 'm' | 'n' | 'o' | 'p' | 'q' | 'r' | 's' | 't' | 'u' | 'v' | 'w' | 'x' | 'y' | 'z';
export {};
+1
View File
@@ -0,0 +1 @@
export {};
+31
View File
@@ -0,0 +1,31 @@
import * as React from 'react';
export declare function noop(): void;
export declare function resetWarned(): void;
type Warning = (valid: boolean, component: string, message?: string) => void;
declare const warning: Warning;
type BaseTypeWarning = (valid: boolean,
/**
* - deprecated: Some API will be removed in future but still support now.
* - usage: Some API usage is not correct.
* - breaking: Breaking change like API is removed.
*/
type: 'deprecated' | 'usage' | 'breaking', message?: string) => void;
type TypeWarning = BaseTypeWarning & {
deprecated: (valid: boolean, oldProp: string, newProp: string, message?: string) => void;
};
export interface WarningContextProps {
/**
* @descCN 设置警告等级,设置 `false` 时会将废弃相关信息聚合为单条信息。
* @descEN Set the warning level. When set to `false`, discard related information will be aggregated into a single message.
* @since 5.10.0
*/
strict?: boolean;
}
export declare const WarningContext: React.Context<WarningContextProps>;
/**
* This is a hook but we not named as `useWarning`
* since this is only used in development.
* We should always wrap this in `if (process.env.NODE_ENV !== 'production')` condition
*/
export declare const devUseWarning: (component: string) => TypeWarning;
export default warning;
+62
View File
@@ -0,0 +1,62 @@
import * as React from 'react';
import { warning as rcWarning } from '@rc-component/util';
export function noop() {}
const {
resetWarned: rcResetWarned
} = rcWarning;
let deprecatedWarnList = null;
export function resetWarned() {
deprecatedWarnList = null;
rcResetWarned();
}
let _warning = noop;
if (process.env.NODE_ENV !== 'production') {
_warning = (valid, component, message) => {
rcWarning(valid, `[antd: ${component}] ${message}`);
// StrictMode will inject console which will not throw warning in React 17.
if (process.env.NODE_ENV === 'test') {
resetWarned();
}
};
}
const warning = _warning;
export const WarningContext = /*#__PURE__*/React.createContext({});
/**
* This is a hook but we not named as `useWarning`
* since this is only used in development.
* We should always wrap this in `if (process.env.NODE_ENV !== 'production')` condition
*/
export const devUseWarning = process.env.NODE_ENV !== 'production' ? component => {
const {
strict
} = React.useContext(WarningContext);
const typeWarning = (valid, type, message) => {
if (!valid) {
if (strict === false && type === 'deprecated') {
const existWarning = deprecatedWarnList;
if (!deprecatedWarnList) {
deprecatedWarnList = {};
}
deprecatedWarnList[component] = deprecatedWarnList[component] || [];
if (!deprecatedWarnList[component].includes(message || '')) {
deprecatedWarnList[component].push(message || '');
}
// Warning for the first time
if (!existWarning) {
console.warn('[antd] There exists deprecated usage in your code:', deprecatedWarnList);
}
} else {
process.env.NODE_ENV !== "production" ? warning(valid, component, message) : void 0;
}
}
};
typeWarning.deprecated = (valid, oldProp, newProp, message = '') => {
typeWarning(valid, 'deprecated', `\`${oldProp}\` is deprecated. Please use \`${newProp}\` instead.${message ? ` ${message}` : ''}`);
};
return typeWarning;
} : () => {
const noopWarning = () => {};
noopWarning.deprecated = noop;
return noopWarning;
};
export default warning;
+10
View File
@@ -0,0 +1,10 @@
import type { WaveProps } from '.';
import type { ShowWaveEffect } from './interface';
export interface WaveEffectProps {
className: string;
target: HTMLElement;
component?: string;
colorSource?: WaveProps['colorSource'];
}
declare const showWaveEffect: ShowWaveEffect;
export default showWaveEffect;
+137
View File
@@ -0,0 +1,137 @@
"use client";
import * as React from 'react';
import CSSMotion from '@rc-component/motion';
import raf from "@rc-component/util/es/raf";
import { render, unmount } from "@rc-component/util/es/React/render";
import { composeRef } from "@rc-component/util/es/ref";
import { clsx } from 'clsx';
import { ConfigContext } from '../../config-provider';
import { genCssVar } from '../../theme/util/genStyleUtils';
import { TARGET_CLS } from './interface';
import { getTargetWaveColor } from './util';
function validateNum(value) {
return Number.isNaN(value) ? 0 : value;
}
const WaveEffect = props => {
const {
className,
target,
component,
colorSource
} = props;
const divRef = React.useRef(null);
const {
getPrefixCls
} = React.useContext(ConfigContext);
const rootPrefixCls = getPrefixCls();
const [varName] = genCssVar(rootPrefixCls, 'wave');
// ===================== Effect =====================
const [waveColor, setWaveColor] = React.useState(null);
const [borderRadius, setBorderRadius] = React.useState([]);
const [left, setLeft] = React.useState(0);
const [top, setTop] = React.useState(0);
const [width, setWidth] = React.useState(0);
const [height, setHeight] = React.useState(0);
const [enabled, setEnabled] = React.useState(false);
const waveStyle = {
left,
top,
width,
height,
borderRadius: borderRadius.map(radius => `${radius}px`).join(' ')
};
if (waveColor) {
waveStyle[varName('color')] = waveColor;
}
function syncPos() {
const nodeStyle = getComputedStyle(target);
// Get wave color from target
setWaveColor(getTargetWaveColor(target, colorSource));
const isStatic = nodeStyle.position === 'static';
// Rect
const {
borderLeftWidth,
borderTopWidth
} = nodeStyle;
setLeft(isStatic ? target.offsetLeft : validateNum(-Number.parseFloat(borderLeftWidth)));
setTop(isStatic ? target.offsetTop : validateNum(-Number.parseFloat(borderTopWidth)));
setWidth(target.offsetWidth);
setHeight(target.offsetHeight);
// Get border radius
const {
borderTopLeftRadius,
borderTopRightRadius,
borderBottomLeftRadius,
borderBottomRightRadius
} = nodeStyle;
setBorderRadius([borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius].map(radius => validateNum(Number.parseFloat(radius))));
}
React.useEffect(() => {
if (target) {
// We need delay to check position here
// since UI may change after click
const id = raf(() => {
syncPos();
setEnabled(true);
});
// Add resize observer to follow size
let resizeObserver;
if (typeof ResizeObserver !== 'undefined') {
resizeObserver = new ResizeObserver(syncPos);
resizeObserver.observe(target);
}
return () => {
raf.cancel(id);
resizeObserver?.disconnect();
};
}
}, [target]);
if (!enabled) {
return null;
}
const isSmallComponent = (component === 'Checkbox' || component === 'Radio') && target?.classList.contains(TARGET_CLS);
return /*#__PURE__*/React.createElement(CSSMotion, {
visible: true,
motionAppear: true,
motionName: "wave-motion",
motionDeadline: 5000,
onAppearEnd: (_, event) => {
if (event.deadline || event.propertyName === 'opacity') {
const holder = divRef.current?.parentElement;
unmount(holder).then(() => {
holder?.remove();
});
}
return false;
}
}, ({
className: motionClassName
}, ref) => (/*#__PURE__*/React.createElement("div", {
ref: composeRef(divRef, ref),
className: clsx(className, motionClassName, {
'wave-quick': isSmallComponent
}),
style: waveStyle
})));
};
const showWaveEffect = (target, info) => {
const {
component
} = info;
// Skip for unchecked checkbox
if (component === 'Checkbox' && !target.querySelector('input')?.checked) {
return;
}
// Create holder
const holder = document.createElement('div');
holder.style.position = 'absolute';
holder.style.left = '0px';
holder.style.top = '0px';
target?.insertBefore(holder, target?.firstChild);
render(/*#__PURE__*/React.createElement(WaveEffect, {
...info,
target: target
}), holder);
};
export default showWaveEffect;
+10
View File
@@ -0,0 +1,10 @@
import React from 'react';
import type { WaveComponent } from './interface';
export interface WaveProps {
disabled?: boolean;
children?: React.ReactNode;
component?: WaveComponent;
colorSource?: 'color' | 'backgroundColor' | 'borderColor' | null;
}
declare const Wave: React.FC<WaveProps>;
export default Wave;
+59
View File
@@ -0,0 +1,59 @@
import React, { useContext, useRef } from 'react';
import isVisible from "@rc-component/util/es/Dom/isVisible";
import { composeRef, getNodeRef, supportRef } from "@rc-component/util/es/ref";
import { clsx } from 'clsx';
import { ConfigContext } from '../../config-provider';
import { cloneElement } from '../reactNode';
import useStyle from './style';
import useWave from './useWave';
const Wave = props => {
const {
children,
disabled,
component,
colorSource
} = props;
const {
getPrefixCls
} = useContext(ConfigContext);
const containerRef = useRef(null);
// ============================== Style ===============================
const prefixCls = getPrefixCls('wave');
const hashId = useStyle(prefixCls);
// =============================== Wave ===============================
const showWave = useWave(containerRef, clsx(prefixCls, hashId), component, colorSource);
// ============================== Effect ==============================
React.useEffect(() => {
const node = containerRef.current;
if (!node || node.nodeType !== window.Node.ELEMENT_NODE || disabled) {
return;
}
// Click handler
const onClick = e => {
// Fix radio button click twice
if (!isVisible(e.target) ||
// No need wave
!node.getAttribute || node.getAttribute('disabled') || node.disabled || node.className.includes('disabled') && !node.className.includes('disabled:') || node.getAttribute('aria-disabled') === 'true' || node.className.includes('-leave')) {
return;
}
showWave(e);
};
// Bind events
node.addEventListener('click', onClick, true);
return () => {
node.removeEventListener('click', onClick, true);
};
}, [disabled]);
// ============================== Render ==============================
if (! /*#__PURE__*/React.isValidElement(children)) {
return children ?? null;
}
const ref = supportRef(children) ? composeRef(getNodeRef(children), containerRef) : containerRef;
return cloneElement(children, {
ref
});
};
if (process.env.NODE_ENV !== 'production') {
Wave.displayName = 'Wave';
}
export default Wave;
+13
View File
@@ -0,0 +1,13 @@
import type { WaveProps } from '.';
import type { GlobalToken } from '../../theme/internal';
export declare const TARGET_CLS = "ant-wave-target";
export type ShowWaveEffect = (element: HTMLElement, info: {
className: string;
token: GlobalToken;
component?: WaveComponent;
event: MouseEvent;
hashId: string;
colorSource?: WaveProps['colorSource'];
}) => void;
export type ShowWave = (event: MouseEvent) => void;
export type WaveComponent = 'Tag' | 'Button' | 'Checkbox' | 'Radio' | 'Switch' | 'Steps';
+2
View File
@@ -0,0 +1,2 @@
import { defaultPrefixCls } from '../../config-provider';
export const TARGET_CLS = `${defaultPrefixCls}-wave-target`;
+7
View File
@@ -0,0 +1,7 @@
import type { FullToken } from '../../theme/internal';
export interface ComponentToken {
}
export interface WaveToken extends FullToken<'Wave'> {
}
declare const _default: (prefixCls: string, rootCls?: string) => string;
export default _default;
+36
View File
@@ -0,0 +1,36 @@
import { genComponentStyleHook } from '../../theme/internal';
import { genCssVar } from '../../theme/util/genStyleUtils';
const genWaveStyle = token => {
const {
componentCls,
colorPrimary,
motionDurationSlow,
motionEaseInOut,
motionEaseOutCirc,
antCls
} = token;
const [, varRef] = genCssVar(antCls, 'wave');
return {
[componentCls]: {
position: 'absolute',
background: 'transparent',
pointerEvents: 'none',
boxSizing: 'border-box',
color: varRef('color', colorPrimary),
boxShadow: `0 0 0 0 currentcolor`,
opacity: 0.2,
// =================== Motion ===================
'&.wave-motion-appear': {
transition: [`box-shadow 0.4s`, `opacity 2s`].map(prop => `${prop} ${motionEaseOutCirc}`).join(','),
'&-active': {
boxShadow: `0 0 0 6px currentcolor`,
opacity: 0
},
'&.wave-quick': {
transition: [`box-shadow`, `opacity`].map(prop => `${prop} ${motionDurationSlow} ${motionEaseInOut}`).join(',')
}
}
}
};
};
export default genComponentStyleHook('Wave', genWaveStyle);
+5
View File
@@ -0,0 +1,5 @@
import * as React from 'react';
import type { WaveProps } from '.';
import type { ShowWave, WaveComponent } from './interface';
declare const useWave: (nodeRef: React.RefObject<HTMLElement | null>, className: string, component?: WaveComponent, colorSource?: WaveProps["colorSource"]) => ShowWave;
export default useWave;
+46
View File
@@ -0,0 +1,46 @@
import * as React from 'react';
import { useEvent } from '@rc-component/util';
import raf from "@rc-component/util/es/raf";
import { ConfigContext } from '../../config-provider';
import useToken from '../../theme/useToken';
import { TARGET_CLS } from './interface';
import showWaveEffect from './WaveEffect';
const useWave = (nodeRef, className, component, colorSource) => {
const {
wave
} = React.useContext(ConfigContext);
const [, token, hashId] = useToken();
const showWave = useEvent(event => {
const node = nodeRef.current;
if (wave?.disabled || !node) {
return;
}
const targetNode = node.querySelector(`.${TARGET_CLS}`) || node;
const {
showEffect
} = wave || {};
// Customize wave effect
(showEffect || showWaveEffect)(targetNode, {
className,
token,
component,
event,
hashId,
colorSource
});
});
const rafIdRef = React.useRef(null);
// Clean up RAF on unmount to prevent memory leaks and stale callbacks
React.useEffect(() => () => {
raf.cancel(rafIdRef.current);
}, []);
// Merge trigger event into one for each frame
const showDebounceWave = event => {
raf.cancel(rafIdRef.current);
rafIdRef.current = raf(() => {
showWave(event);
});
};
return showDebounceWave;
};
export default useWave;
+2
View File
@@ -0,0 +1,2 @@
export declare function isValidWaveColor(color: CSSStyleDeclaration[keyof CSSStyleDeclaration]): color is string;
export declare function getTargetWaveColor(node: HTMLElement, colorSource?: keyof CSSStyleDeclaration | null): string | null;
+17
View File
@@ -0,0 +1,17 @@
export function isValidWaveColor(color) {
return color && typeof color === 'string' && color !== '#fff' && color !== '#ffffff' && color !== 'rgb(255, 255, 255)' && color !== 'rgba(255, 255, 255, 1)' && !/rgba\((?:\d*, ){3}0\)/.test(color) &&
// any transparent rgba color
color !== 'transparent' && color !== 'canvastext';
}
export function getTargetWaveColor(node, colorSource = null) {
const style = getComputedStyle(node);
const {
borderTopColor,
borderColor,
backgroundColor
} = style;
if (colorSource && isValidWaveColor(style[colorSource])) {
return style[colorSource];
}
return [borderTopColor, borderColor, backgroundColor].find(isValidWaveColor) ?? null;
}
+3
View File
@@ -0,0 +1,3 @@
import React from 'react';
declare const ZIndexContext: React.Context<number | undefined>;
export default ZIndexContext;
+6
View File
@@ -0,0 +1,6 @@
import React from 'react';
const ZIndexContext = /*#__PURE__*/React.createContext(undefined);
if (process.env.NODE_ENV !== 'production') {
ZIndexContext.displayName = 'ZIndexContext';
}
export default ZIndexContext;