Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Convert OverlayTrigger to an arrow function to fix type issues #6709

Merged
merged 2 commits into from
Oct 21, 2023
Merged

Convert OverlayTrigger to an arrow function to fix type issues #6709

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c1f7025
Convert OverlayTrigger to an arrow function to fix type issues
snstanton Oct 17, 2023
c957955
Use React.FC to suppress propTypes exports in the .d.ts file
snstanton Oct 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
32 changes: 21 additions & 11 deletions src/OverlayTrigger.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { useUncontrolledProp } from 'uncontrollable';
import useMergedRefs from '@restart/hooks/useMergedRefs';
import Overlay, { OverlayChildren, OverlayProps } from './Overlay';
import safeFindDOMNode from './safeFindDOMNode';
import { Placement } from './types';

export type OverlayTriggerType = 'hover' | 'click' | 'focus';

Expand Down Expand Up @@ -36,6 +37,7 @@ export interface OverlayTriggerProps

target?: never;
onHide?: never;
placement?: Placement;
}

function normalizeDelay(delay?: OverlayDelay) {
Expand Down Expand Up @@ -66,7 +68,11 @@ function handleMouseOverOut(
}
}

const triggerType = PropTypes.oneOf(['click', 'hover', 'focus']);
const triggerType = PropTypes.oneOf<OverlayTriggerType>([
'click',
'hover',
'focus',
]);

const propTypes = {
children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
Expand All @@ -78,16 +84,19 @@ const propTypes = {
*
* @type {'hover' | 'click' |'focus' | Array<'hover' | 'click' |'focus'>}
*/
trigger: PropTypes.oneOfType([triggerType, PropTypes.arrayOf(triggerType)]),
trigger: PropTypes.oneOfType([
triggerType.isRequired,
PropTypes.arrayOf(triggerType.isRequired),
]),

/**
* A millisecond delay amount to show and hide the Overlay once triggered
*/
delay: PropTypes.oneOfType([
PropTypes.number,
PropTypes.number.isRequired,
PropTypes.shape({
show: PropTypes.number,
hide: PropTypes.number,
show: PropTypes.number.isRequired,
hide: PropTypes.number.isRequired,
}),
]),

Expand Down Expand Up @@ -124,10 +133,11 @@ const propTypes = {
/**
* An element or text to overlay next to the target.
*/
overlay: PropTypes.oneOfType([PropTypes.func, PropTypes.element.isRequired]),
overlay: PropTypes.oneOfType([PropTypes.func, PropTypes.element.isRequired])
.isRequired,

/**
* A Popper.js config object passed to the the underlying popper instance.
* A Popper.js config object passed to the underlying popper instance.
*/
popperConfig: PropTypes.object,

Expand All @@ -145,7 +155,7 @@ const propTypes = {
/**
* The placement of the Overlay in relation to it's `target`.
*/
placement: PropTypes.oneOf([
placement: PropTypes.oneOf<Placement>([
'auto-start',
'auto',
'auto-end',
Expand All @@ -164,7 +174,7 @@ const propTypes = {
]),
};

function OverlayTrigger({
const OverlayTrigger: React.FC<OverlayTriggerProps> = ({
trigger = ['hover', 'focus'],
overlay,
children,
Expand All @@ -178,7 +188,7 @@ function OverlayTrigger({
placement,
flip = placement && placement.indexOf('auto') !== -1,
...props
}: OverlayTriggerProps) {
}: OverlayTriggerProps) => {
const triggerNodeRef = useRef(null);
const mergedRef = useMergedRefs<unknown>(
triggerNodeRef,
Expand Down Expand Up @@ -307,7 +317,7 @@ function OverlayTrigger({
</Overlay>
</>
);
}
};

OverlayTrigger.propTypes = propTypes;

Expand Down