ant-design/components/menu/OverrideContext.tsx
MadCcc 96fa23ea7c
refactor: Tooltip, Popover, Dropdown, Tour support css var ()
* feat: Tooltip, Popover, Dropdown, Tour support css var

* chore: update snapshot

* chore: code clean

* chore: code clean

* chore: update snapshot

* chore: update snapshot

* chore: update snapshot

* chore: add test
2023-11-08 14:56:15 +08:00

55 lines
1.7 KiB
TypeScript

import * as React from 'react';
import { supportNodeRef, useComposeRef } from 'rc-util';
import { NoCompactStyle } from '../space/Compact';
import type { MenuProps } from './menu';
// Used for Dropdown only
export interface OverrideContextProps {
prefixCls?: string;
expandIcon?: React.ReactNode;
mode?: MenuProps['mode'];
selectable?: boolean;
validator?: (menuProps: Pick<MenuProps, 'mode'>) => void;
onClick?: () => void;
rootClassName?: string;
}
const OverrideContext = React.createContext<OverrideContextProps | null>(null);
/** @internal Only used for Dropdown component. Do not use this in your production. */
export const OverrideProvider = React.forwardRef<
HTMLElement,
OverrideContextProps & { children: React.ReactNode }
>((props, ref) => {
const { children, ...restProps } = props;
const override = React.useContext(OverrideContext);
const context = React.useMemo<OverrideContextProps>(
() => ({ ...override, ...restProps }),
[
override,
restProps.prefixCls,
// restProps.expandIcon, Not mark as deps since this is a ReactNode
restProps.mode,
restProps.selectable,
restProps.rootClassName,
// restProps.validator, Not mark as deps since this is a function
],
);
const canRef = supportNodeRef(children);
const mergedRef = useComposeRef(ref, canRef ? (children as any).ref : null);
return (
<OverrideContext.Provider value={context}>
<NoCompactStyle>
{canRef ? React.cloneElement(children as React.ReactElement, { ref: mergedRef }) : children}
</NoCompactStyle>
</OverrideContext.Provider>
);
});
/** @internal Only used for Dropdown component. Do not use this in your production. */
export default OverrideContext;