Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion docs/examples/point.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
/* eslint no-console:0 */

import React from 'react';
import Trigger, { ActionType } from '@rc-component/trigger';
import type { ActionType } from '@rc-component/trigger';
import Trigger from '@rc-component/trigger';
import '../../assets/index.less';
import './point.less';

Expand Down
20 changes: 5 additions & 15 deletions src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export type {
};

import UniqueProvider, { type UniqueProviderProps } from './UniqueProvider';
import { useControlledState } from '@rc-component/util';

export { UniqueProvider };
export type { UniqueProviderProps };
Expand Down Expand Up @@ -303,12 +304,12 @@ export function generateTrigger(
: null;

// ============================ Open ============================
const [internalOpen, setInternalOpen] = React.useState(
const [internalOpen, setInternalOpen] = useControlledState(
defaultPopupVisible || false,
popupVisible,
);

// Render still use props as first priority
const mergedOpen = popupVisible ?? internalOpen;
const mergedOpen = internalOpen || false;

// ========================== Children ==========================
const child = React.useMemo(() => {
Expand All @@ -321,20 +322,9 @@ export function generateTrigger(

const originChildProps = child?.props || {};

// We use effect sync here in case `popupVisible` back to `undefined`
const setMergedOpen = useEvent((nextOpen: boolean) => {
if (openUncontrolled) {
setInternalOpen(nextOpen);
}
});

// Support ref
const isOpen = useEvent(() => mergedOpen);

useLayoutEffect(() => {
setInternalOpen(popupVisible || false);
}, [popupVisible]);

// Extract common options for UniqueProvider
const getUniqueOptions = useEvent((delay: number = 0) => ({
popup,
Expand Down Expand Up @@ -385,7 +375,7 @@ export function generateTrigger(
lastTriggerRef.current = [];

const internalTriggerOpen = useEvent((nextOpen: boolean) => {
setMergedOpen(nextOpen);
setInternalOpen(nextOpen);

// Enter or Pointer will both trigger open state change
// We only need take one to avoid duplicated change event trigger
Expand Down
15 changes: 11 additions & 4 deletions tests/basic.test.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -371,10 +371,7 @@ describe('Trigger.Basic', () => {
describe('children renderProps', () => {
it('should get current open', () => {
const { container } = render(
<Trigger
popupVisible={true}
popup={<span>Hello!</span>}
>
<Trigger popupVisible={true} popup={<span>Hello!</span>}>
{({ open }) => <button>{String(open)}</button>}
</Trigger>,
);
Expand Down Expand Up @@ -994,6 +991,16 @@ describe('Trigger.Basic', () => {
expect(document.querySelector('.rc-trigger-popup-hidden')).toBeTruthy();
});

it('defaultPopupVisible should work', async () => {
render(
<Trigger defaultPopupVisible>
<div className="target" />
</Trigger>,
);

expect(document.querySelector('.rc-trigger-popup')).toBeTruthy();
});

describe('click window to hide', () => {
it('should hide', async () => {
const onOpenChange = jest.fn();
Expand Down
Loading