diff --git a/src/UniqueProvider/index.tsx b/src/UniqueProvider/index.tsx index 78643a8f..a29fee3c 100644 --- a/src/UniqueProvider/index.tsx +++ b/src/UniqueProvider/index.tsx @@ -18,11 +18,22 @@ import { getAlignPopupClassName } from '../util'; export interface UniqueProviderProps { children: React.ReactNode; + /** Additional handle options data to do the customize info */ + postTriggerProps?: (options: UniqueShowOptions) => UniqueShowOptions; } -const UniqueProvider = ({ children }: UniqueProviderProps) => { +const UniqueProvider = ({ children, postTriggerProps }: UniqueProviderProps) => { const [trigger, open, options, onTargetVisibleChanged] = useTargetState(); + // ========================== Options =========================== + const mergedOptions = React.useMemo(() => { + if (!options || !postTriggerProps) { + return options; + } + + return postTriggerProps(options); + }, [options, postTriggerProps]); + // =========================== Popup ============================ const [popupEle, setPopupEle] = React.useState(null); const [popupSize, setPopupSize] = React.useState<{ @@ -155,7 +166,7 @@ const UniqueProvider = ({ children }: UniqueProviderProps) => { ); // =========================== Render =========================== - const prefixCls = options?.prefixCls; + const prefixCls = mergedOptions?.prefixCls; return ( @@ -166,14 +177,14 @@ const UniqueProvider = ({ children }: UniqueProviderProps) => { ref={setPopupRef} portal={Portal} prefixCls={prefixCls} - popup={options.popup} + popup={mergedOptions.popup} className={classNames( - options.popupClassName, + mergedOptions.popupClassName, alignedClassName, `${prefixCls}-unique-controlled`, )} - style={options.popupStyle} - target={options.target} + style={mergedOptions.popupStyle} + target={mergedOptions.target} open={open} keepDom={true} fresh={true} @@ -197,12 +208,12 @@ const UniqueProvider = ({ children }: UniqueProviderProps) => { y: arrowY, }} align={alignInfo} - zIndex={options.zIndex} - mask={options.mask} - arrow={options.arrow} - motion={options.popupMotion} - maskMotion={options.maskMotion} - // getPopupContainer={options.getPopupContainer} + zIndex={mergedOptions.zIndex} + mask={mergedOptions.mask} + arrow={mergedOptions.arrow} + motion={mergedOptions.popupMotion} + maskMotion={mergedOptions.maskMotion} + getPopupContainer={mergedOptions.getPopupContainer} > { y: arrowY, }} popupSize={popupSize} - motion={options.popupMotion} + motion={mergedOptions.popupMotion} uniqueBgClassName={classNames( - options.uniqueBgClassName, + mergedOptions.uniqueBgClassName, alignedClassName, )} - uniqueBgStyle={options.uniqueBgStyle} + uniqueBgStyle={mergedOptions.uniqueBgStyle} /> diff --git a/src/index.tsx b/src/index.tsx index ece9fefd..905694f4 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -32,7 +32,10 @@ export type { BuildInPlacements, }; -export { default as UniqueProvider } from './UniqueProvider'; +import UniqueProvider, { type UniqueProviderProps } from './UniqueProvider'; + +export { UniqueProvider }; +export type { UniqueProviderProps }; export interface TriggerRef { nativeElement: HTMLElement; diff --git a/tests/unique.test.tsx b/tests/unique.test.tsx index 86bd09e3..a5ff3c9c 100644 --- a/tests/unique.test.tsx +++ b/tests/unique.test.tsx @@ -1,8 +1,9 @@ import { cleanup, fireEvent, render } from '@testing-library/react'; import React from 'react'; -import Trigger, { UniqueProvider } from '../src'; +import Trigger, { UniqueProvider, type UniqueProviderProps } from '../src'; import { awaitFakeTimer } from './util'; import type { TriggerProps } from '../src'; +import classNames from 'classnames'; // Mock UniqueBody to check if open props changed global.openChangeLog = []; @@ -254,4 +255,34 @@ describe('Trigger.Unique', () => { expect(computedStyle.getPropertyValue('--arrow-x')).not.toBe(''); expect(computedStyle.getPropertyValue('--arrow-y')).not.toBe(''); }); + + it('should apply postTriggerProps to customize options', async () => { + const postTriggerProps: UniqueProviderProps['postTriggerProps'] = ( + options, + ) => ({ + ...options, + popupClassName: classNames( + options.popupClassName, + 'custom-post-options-class', + ), + }); + + render( + + tooltip} + unique + popupVisible + > +
click me
+
+
, + ); + + // Check that the custom class from postTriggerProps is applied + expect(document.querySelector('.rc-trigger-popup')).toHaveClass( + 'custom-post-options-class', + ); + }); });