Skip to content

Commit

Permalink
BorderBoxControl: use Popover's new anchor prop (#43789)
Browse files Browse the repository at this point in the history
* BorderBoxControl: use new `anchor` prop for `Popover`

* Make sure anchor value is `undefined` instead of `null`
  • Loading branch information
ciampo committed Sep 14, 2022
1 parent 67cef45 commit 0cd0d17
Show file tree
Hide file tree
Showing 4 changed files with 49 additions and 31 deletions.
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@
/**
* External dependencies
*/
import type { ComponentProps } from 'react';
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useRef } from '@wordpress/element';
import { useCallback, useState, useEffect } from '@wordpress/element';
import { useMergeRefs } from '@wordpress/compose';

/**
Expand All @@ -18,6 +14,7 @@ import { Grid } from '../../grid';
import { contextConnect, WordPressComponentProps } from '../../ui/context';
import { useBorderBoxControlSplitControls } from './hook';

import type { BorderControlProps } from '../../border-control/types';
import type { SplitControlsProps } from '../types';

const BorderBoxControlSplitControls = (
Expand All @@ -40,18 +37,27 @@ const BorderBoxControlSplitControls = (
__next36pxDefaultSize,
...otherProps
} = useBorderBoxControlSplitControls( props );
const containerRef = useRef();
const mergedRef = useMergeRefs( [ containerRef, forwardedRef ] );
const popoverProps: ComponentProps<
typeof BorderControl
>[ '__unstablePopoverProps' ] = popoverPlacement
? {

const [ popoverProps, setPopoverProps ] =
useState< BorderControlProps[ '__unstablePopoverProps' ] >();
const [ popoverAnchor, setPopoverAnchor ] = useState< Element >();

const containerRef = useCallback( ( node ) => {
setPopoverAnchor( node ?? undefined );
}, [] );

useEffect( () => {
if ( popoverPlacement ) {
setPopoverProps( {
placement: popoverPlacement,
offset: popoverOffset,
anchorRef: containerRef,
anchor: popoverAnchor,
shift: true,
}
: undefined;
} );
} else {
setPopoverProps( undefined );
}
}, [ popoverPlacement, popoverOffset, popoverAnchor ] );

const sharedBorderControlProps = {
colors,
Expand All @@ -64,6 +70,8 @@ const BorderBoxControlSplitControls = (
__next36pxDefaultSize,
};

const mergedRef = useMergeRefs( [ containerRef, forwardedRef ] );

return (
<Grid { ...otherProps } ref={ mergedRef } gap={ 4 }>
<BorderBoxControlVisualizer
Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,8 @@
/**
* External dependencies
*/
import type { ComponentProps } from 'react';

/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useRef } from '@wordpress/element';
import { useCallback, useState, useEffect } from '@wordpress/element';
import { useMergeRefs } from '@wordpress/compose';

/**
Expand All @@ -24,7 +19,10 @@ import { contextConnect, WordPressComponentProps } from '../../ui/context';
import { useBorderBoxControl } from './hook';

import type { BorderBoxControlProps } from '../types';
import type { LabelProps } from '../../border-control/types';
import type {
LabelProps,
BorderControlProps,
} from '../../border-control/types';

const BorderLabel = ( props: LabelProps ) => {
const { label, hideLabelFromVision } = props;
Expand Down Expand Up @@ -67,18 +65,29 @@ const BorderBoxControl = (
__next36pxDefaultSize = false,
...otherProps
} = useBorderBoxControl( props );
const containerRef = useRef();
const mergedRef = useMergeRefs( [ containerRef, forwardedRef ] );
const popoverProps: ComponentProps<
typeof BorderControl
>[ '__unstablePopoverProps' ] = popoverPlacement
? {

const [ popoverProps, setPopoverProps ] =
useState< BorderControlProps[ '__unstablePopoverProps' ] >();
const [ popoverAnchor, setPopoverAnchor ] = useState< Element >();

const containerRef = useCallback( ( node ) => {
setPopoverAnchor( node ?? undefined );
}, [] );

useEffect( () => {
if ( popoverPlacement ) {
setPopoverProps( {
placement: popoverPlacement,
offset: popoverOffset,
anchorRef: containerRef,
anchor: popoverAnchor,
shift: true,
}
: undefined;
} );
} else {
setPopoverProps( undefined );
}
}, [ popoverPlacement, popoverOffset, popoverAnchor ] );

const mergedRef = useMergeRefs( [ containerRef, forwardedRef ] );

return (
<View className={ className } { ...otherProps } ref={ mergedRef }>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ Default.args = {
width: '1px',
},
__next36pxDefaultSize: false,
popoverPlacement: 'right-start',
};

const WrapperView = styled.div`
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/popover/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export type PopoverProps = {
* be an `Element` or, alternatively, a `VirtualElement` — ie. an object with
* the `getBoundingClientRect()` and the `ownerDocument` properties defined.
*/
anchor: Element | VirtualElement;
anchor?: Element | VirtualElement;
/**
* Whether the popover should animate when opening.
*
Expand Down

0 comments on commit 0cd0d17

Please sign in to comment.