1
This commit is contained in:
+19
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1 @@
|
||||
export {};
|
||||
+1
@@ -0,0 +1 @@
|
||||
export default function capitalize<T extends string>(str: T): Capitalize<T>;
|
||||
+7
@@ -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
@@ -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
@@ -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);
|
||||
}
|
||||
+4
@@ -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
@@ -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
@@ -0,0 +1,4 @@
|
||||
declare function copy(text: string, config?: {
|
||||
format?: 'text/plain' | 'text/html';
|
||||
}): Promise<boolean>;
|
||||
export default copy;
|
||||
+61
@@ -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
@@ -0,0 +1 @@
|
||||
export declare function easeInOutCubic(t: number, b: number, c: number, d: number): number;
|
||||
+9
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export default function getReactMajorVersion(): number;
|
||||
+8
@@ -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
@@ -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
@@ -0,0 +1,6 @@
|
||||
export const getRenderPropValue = propValue => {
|
||||
if (!propValue) {
|
||||
return null;
|
||||
}
|
||||
return typeof propValue === 'function' ? propValue() : propValue;
|
||||
};
|
||||
+3
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,2 @@
|
||||
import React from 'react';
|
||||
export declare const useForceUpdate: () => [number, React.ActionDispatch<[]>];
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import React from 'react';
|
||||
export const useForceUpdate = () => {
|
||||
return React.useReducer(ori => ori + 1, 0);
|
||||
};
|
||||
+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 {};
|
||||
+85
@@ -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
@@ -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
@@ -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]);
|
||||
};
|
||||
+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>>];
|
||||
+31
@@ -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
@@ -0,0 +1,2 @@
|
||||
export type Orientation = 'horizontal' | 'vertical';
|
||||
export declare const useOrientation: (orientation?: Orientation, vertical?: boolean, legacyDirection?: Orientation) => [Orientation, boolean];
|
||||
+19
@@ -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]);
|
||||
};
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
import * as React from 'react';
|
||||
export declare const usePatchElement: () => [React.ReactElement[], (element: React.ReactElement) => () => void];
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
||||
import * as React from 'react';
|
||||
export const usePatchElement = () => {
|
||||
const [elements, setElements] = React.useState([]);
|
||||
const patchElement = React.useCallback(element => {
|
||||
// append a new element to elements (and create a new ref)
|
||||
setElements(originElements => [].concat(_toConsumableArray(originElements), [element]));
|
||||
// return a function that removes the new element out of elements (and create a new ref)
|
||||
// it works a little like useEffect
|
||||
return () => {
|
||||
setElements(originElements => originElements.filter(ele => ele !== element));
|
||||
};
|
||||
}, []);
|
||||
return [elements, patchElement];
|
||||
};
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import type { Ref } from 'react';
|
||||
export declare const useProxyImperativeHandle: <NativeELementType extends HTMLElement, ReturnRefType extends {
|
||||
nativeElement: NativeELementType;
|
||||
}>(ref: Ref<any> | undefined, init: () => ReturnRefType) => void;
|
||||
+34
@@ -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
@@ -0,0 +1,3 @@
|
||||
type UseSyncStateProps<T> = readonly [() => T, (newValue: T) => void];
|
||||
export declare const useSyncState: <T>(initialValue: T) => UseSyncStateProps<T>;
|
||||
export {};
|
||||
+10
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,3 @@
|
||||
import { isStyleSupport } from '@rc-component/util/lib/Dom/styleChecker';
|
||||
export declare const canUseDocElement: () => false | HTMLElement;
|
||||
export { isStyleSupport };
|
||||
+4
@@ -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 };
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
declare function throttleByAnimationFrame<T extends any[]>(fn: (...args: T) => void): {
|
||||
(...args: T): void;
|
||||
cancel(): void;
|
||||
};
|
||||
export default throttleByAnimationFrame;
|
||||
+20
@@ -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
@@ -0,0 +1,5 @@
|
||||
interface Config {
|
||||
skipEmpty?: boolean;
|
||||
}
|
||||
declare const toList: <T>(val: T | T[], config?: Config) => T[];
|
||||
export default toList;
|
||||
+8
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1 @@
|
||||
export {};
|
||||
+31
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,2 @@
|
||||
import { defaultPrefixCls } from '../../config-provider';
|
||||
export const TARGET_CLS = `${defaultPrefixCls}-wave-target`;
|
||||
+7
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,3 @@
|
||||
import React from 'react';
|
||||
declare const ZIndexContext: React.Context<number | undefined>;
|
||||
export default ZIndexContext;
|
||||
+6
@@ -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;
|
||||
Reference in New Issue
Block a user