Use useImperativeHandle instead of exposing button ref in Channels.

This commit is contained in:
Gan Eng Chin 2023-03-20 01:00:19 +08:00
parent 75c11a681d
commit 5455abcabb
No known key found for this signature in database
GPG Key ID: 94D5D972860ADB01
3 changed files with 96 additions and 71 deletions

View File

@ -1,7 +1,13 @@
/** /**
* External dependencies * External dependencies
*/ */
import { Fragment, useState } from '@wordpress/element'; import {
Fragment,
useState,
forwardRef,
useImperativeHandle,
useRef,
} from '@wordpress/element';
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { import {
Card, Card,
@ -27,18 +33,24 @@ import { RegisteredChannelCardBody } from './RegisteredChannelCardBody';
import './Channels.scss'; import './Channels.scss';
type ChannelsProps = { type ChannelsProps = {
addChannelsButtonRef: React.ForwardedRef< HTMLButtonElement >;
registeredChannels: Array< RegisteredChannel >; registeredChannels: Array< RegisteredChannel >;
recommendedChannels: Array< RecommendedChannel >; recommendedChannels: Array< RecommendedChannel >;
onInstalledAndActivated?: () => void; onInstalledAndActivated?: () => void;
}; };
export const Channels: React.FC< ChannelsProps > = ( { export type ChannelsRef = {
addChannelsButtonRef, /**
registeredChannels, * Scroll into the "Add channels" section in the card.
recommendedChannels, * The section will be expanded, and the "Add channels" button will be in focus.
onInstalledAndActivated, */
} ) => { scrollIntoAddChannels: () => void;
};
export const Channels = forwardRef< ChannelsRef, ChannelsProps >(
(
{ registeredChannels, recommendedChannels, onInstalledAndActivated },
ref
) => {
const hasRegisteredChannels = registeredChannels.length >= 1; const hasRegisteredChannels = registeredChannels.length >= 1;
/** /**
@ -46,6 +58,19 @@ export const Channels: React.FC< ChannelsProps > = ( {
* Initial state is expanded if there are no registered channels in first page load. * Initial state is expanded if there are no registered channels in first page load.
*/ */
const [ expanded, setExpanded ] = useState( ! hasRegisteredChannels ); const [ expanded, setExpanded ] = useState( ! hasRegisteredChannels );
const addChannelsButtonRef = useRef< HTMLButtonElement >( null );
useImperativeHandle(
ref,
() => ( {
scrollIntoAddChannels: () => {
setExpanded( true );
addChannelsButtonRef.current?.focus();
addChannelsButtonRef.current?.scrollIntoView();
},
} ),
[]
);
return ( return (
<Card className="woocommerce-marketing-channels-card"> <Card className="woocommerce-marketing-channels-card">
@ -64,16 +89,14 @@ export const Channels: React.FC< ChannelsProps > = ( {
</CardHeader> </CardHeader>
{ /* Registered channels section. */ } { /* Registered channels section. */ }
{ registeredChannels.map( ( el, idx ) => { { registeredChannels.map( ( el, idx ) => (
return (
<Fragment key={ el.slug }> <Fragment key={ el.slug }>
<RegisteredChannelCardBody registeredChannel={ el } /> <RegisteredChannelCardBody registeredChannel={ el } />
{ idx !== registeredChannels.length - 1 && ( { idx !== registeredChannels.length - 1 && (
<CardDivider /> <CardDivider />
) } ) }
</Fragment> </Fragment>
); ) ) }
} ) }
{ /* Recommended channels section. */ } { /* Recommended channels section. */ }
{ recommendedChannels.length >= 1 && ( { recommendedChannels.length >= 1 && (
@ -85,12 +108,16 @@ export const Channels: React.FC< ChannelsProps > = ( {
<Button <Button
ref={ addChannelsButtonRef } ref={ addChannelsButtonRef }
variant="link" variant="link"
onClick={ () => setExpanded( ! expanded ) } onClick={ () =>
setExpanded( ! expanded )
}
> >
{ __( 'Add channels', 'woocommerce' ) } { __( 'Add channels', 'woocommerce' ) }
<Icon <Icon
icon={ icon={
expanded ? chevronUp : chevronDown expanded
? chevronUp
: chevronDown
} }
size={ 24 } size={ 24 }
/> />
@ -99,8 +126,7 @@ export const Channels: React.FC< ChannelsProps > = ( {
</> </>
) } ) }
{ !! expanded && { !! expanded &&
recommendedChannels.map( ( el, idx ) => { recommendedChannels.map( ( el, idx ) => (
return (
<Fragment key={ el.plugin }> <Fragment key={ el.plugin }>
<SmartPluginCardBody <SmartPluginCardBody
plugin={ el } plugin={ el }
@ -113,10 +139,10 @@ export const Channels: React.FC< ChannelsProps > = ( {
<CardDivider /> <CardDivider />
) } ) }
</Fragment> </Fragment>
); ) ) }
} ) }
</div> </div>
) } ) }
</Card> </Card>
); );
}; }
);

View File

@ -1 +1,2 @@
export { Channels } from './Channels'; export { Channels } from './Channels';
export type { ChannelsRef } from './Channels';

View File

@ -20,7 +20,7 @@ import {
import { getAdminSetting } from '~/utils/admin-settings'; import { getAdminSetting } from '~/utils/admin-settings';
import { IntroductionBanner } from './IntroductionBanner'; import { IntroductionBanner } from './IntroductionBanner';
import { Campaigns } from './Campaigns'; import { Campaigns } from './Campaigns';
import { Channels } from './Channels'; import { Channels, ChannelsRef } from './Channels';
import { InstalledExtensions } from './InstalledExtensions'; import { InstalledExtensions } from './InstalledExtensions';
import { DiscoverTools } from './DiscoverTools'; import { DiscoverTools } from './DiscoverTools';
import { LearnMarketing } from './LearnMarketing'; import { LearnMarketing } from './LearnMarketing';
@ -46,7 +46,7 @@ export const MarketingOverviewMultichannel: React.FC = () => {
const { loading: loadingRecommended, data: dataRecommended } = const { loading: loadingRecommended, data: dataRecommended } =
useRecommendedChannels(); useRecommendedChannels();
const { currentUserCan } = useUser(); const { currentUserCan } = useUser();
const addChannelsButtonRef = useRef< HTMLButtonElement >( null ); const channelsRef = useRef< ChannelsRef >( null );
if ( if (
loadingIntroductionBanner || loadingIntroductionBanner ||
@ -77,9 +77,7 @@ export const MarketingOverviewMultichannel: React.FC = () => {
<IntroductionBanner <IntroductionBanner
onDismissClick={ dismissIntroductionBanner } onDismissClick={ dismissIntroductionBanner }
onAddChannelsClick={ () => { onAddChannelsClick={ () => {
addChannelsButtonRef.current?.focus(); channelsRef.current?.scrollIntoAddChannels();
addChannelsButtonRef.current?.click();
addChannelsButtonRef.current?.scrollIntoView();
} } } }
/> />
) } ) }
@ -87,7 +85,7 @@ export const MarketingOverviewMultichannel: React.FC = () => {
{ !! ( dataRegistered && dataRecommended ) && { !! ( dataRegistered && dataRecommended ) &&
!! ( dataRegistered.length || dataRecommended.length ) && ( !! ( dataRegistered.length || dataRecommended.length ) && (
<Channels <Channels
addChannelsButtonRef={ addChannelsButtonRef } ref={ channelsRef }
registeredChannels={ dataRegistered } registeredChannels={ dataRegistered }
recommendedChannels={ dataRecommended } recommendedChannels={ dataRecommended }
onInstalledAndActivated={ refetch } onInstalledAndActivated={ refetch }