Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx
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,80 +33,100 @@ 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,
recommendedChannels,
onInstalledAndActivated,
} ) => {
const hasRegisteredChannels = registeredChannels.length >= 1;
/** /**
* State to collapse / expand the recommended channels. * Scroll into the "Add channels" section in the card.
* Initial state is expanded if there are no registered channels in first page load. * The section will be expanded, and the "Add channels" button will be in focus.
*/ */
const [ expanded, setExpanded ] = useState( ! hasRegisteredChannels ); scrollIntoAddChannels: () => void;
};
return ( export const Channels = forwardRef< ChannelsRef, ChannelsProps >(
<Card className="woocommerce-marketing-channels-card"> (
<CardHeader> { registeredChannels, recommendedChannels, onInstalledAndActivated },
<CardHeaderTitle> ref
{ __( 'Channels', 'woocommerce' ) } ) => {
</CardHeaderTitle> const hasRegisteredChannels = registeredChannels.length >= 1;
{ ! hasRegisteredChannels && (
<CardHeaderDescription>
{ __(
'Start by adding a channel to your store',
'woocommerce'
) }
</CardHeaderDescription>
) }
</CardHeader>
{ /* Registered channels section. */ } /**
{ registeredChannels.map( ( el, idx ) => { * State to collapse / expand the recommended channels.
return ( * Initial state is expanded if there are no registered channels in first page load.
*/
const [ expanded, setExpanded ] = useState( ! hasRegisteredChannels );
const addChannelsButtonRef = useRef< HTMLButtonElement >( null );
useImperativeHandle(
ref,
() => ( {
scrollIntoAddChannels: () => {
setExpanded( true );
addChannelsButtonRef.current?.focus();
addChannelsButtonRef.current?.scrollIntoView();
},
} ),
[]
);
return (
<Card className="woocommerce-marketing-channels-card">
<CardHeader>
<CardHeaderTitle>
{ __( 'Channels', 'woocommerce' ) }
</CardHeaderTitle>
{ ! hasRegisteredChannels && (
<CardHeaderDescription>
{ __(
'Start by adding a channel to your store',
'woocommerce'
) }
</CardHeaderDescription>
) }
</CardHeader>
{ /* Registered channels section. */ }
{ registeredChannels.map( ( el, idx ) => (
<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 && (
<div> <div>
{ !! hasRegisteredChannels && ( { !! hasRegisteredChannels && (
<> <>
<CardDivider /> <CardDivider />
<CardBody> <CardBody>
<Button <Button
ref={ addChannelsButtonRef } ref={ addChannelsButtonRef }
variant="link" variant="link"
onClick={ () => setExpanded( ! expanded ) } onClick={ () =>
> setExpanded( ! expanded )
{ __( 'Add channels', 'woocommerce' ) }
<Icon
icon={
expanded ? chevronUp : chevronDown
} }
size={ 24 } >
/> { __( 'Add channels', 'woocommerce' ) }
</Button> <Icon
</CardBody> icon={
</> expanded
) } ? chevronUp
{ !! expanded && : chevronDown
recommendedChannels.map( ( el, idx ) => { }
return ( size={ 24 }
/>
</Button>
</CardBody>
</>
) }
{ !! expanded &&
recommendedChannels.map( ( el, idx ) => (
<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> );
); }
}; );

1
plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/index.ts
View File

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

10
plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx
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 }