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
*/
import { Fragment, useState } from '@wordpress/element';
import {
Fragment,
useState,
forwardRef,
useImperativeHandle,
useRef,
} from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import {
Card,
@ -27,80 +33,100 @@ import { RegisteredChannelCardBody } from './RegisteredChannelCardBody';
import './Channels.scss';
type ChannelsProps = {
addChannelsButtonRef: React.ForwardedRef< HTMLButtonElement >;
registeredChannels: Array< RegisteredChannel >;
recommendedChannels: Array< RecommendedChannel >;
onInstalledAndActivated?: () => void;
};
export const Channels: React.FC< ChannelsProps > = ( {
addChannelsButtonRef,
registeredChannels,
recommendedChannels,
onInstalledAndActivated,
} ) => {
const hasRegisteredChannels = registeredChannels.length >= 1;
export type ChannelsRef = {
/**
* State to collapse / expand the recommended channels.
* Initial state is expanded if there are no registered channels in first page load.
* Scroll into the "Add channels" section in the card.
* The section will be expanded, and the "Add channels" button will be in focus.
*/
const [ expanded, setExpanded ] = useState( ! hasRegisteredChannels );
scrollIntoAddChannels: () => void;
};
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>
export const Channels = forwardRef< ChannelsRef, ChannelsProps >(
(
{ registeredChannels, recommendedChannels, onInstalledAndActivated },
ref
) => {
const hasRegisteredChannels = registeredChannels.length >= 1;
{ /* Registered channels section. */ }
{ registeredChannels.map( ( el, idx ) => {
return (
/**
* State to collapse / expand the recommended channels.
* 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 }>
<RegisteredChannelCardBody registeredChannel={ el } />
{ idx !== registeredChannels.length - 1 && (
<CardDivider />
) }
</Fragment>
);
} ) }
) ) }
{ /* Recommended channels section. */ }
{ recommendedChannels.length >= 1 && (
<div>
{ !! hasRegisteredChannels && (
<>
<CardDivider />
<CardBody>
<Button
ref={ addChannelsButtonRef }
variant="link"
onClick={ () => setExpanded( ! expanded ) }
>
{ __( 'Add channels', 'woocommerce' ) }
<Icon
icon={
expanded ? chevronUp : chevronDown
{ /* Recommended channels section. */ }
{ recommendedChannels.length >= 1 && (
<div>
{ !! hasRegisteredChannels && (
<>
<CardDivider />
<CardBody>
<Button
ref={ addChannelsButtonRef }
variant="link"
onClick={ () =>
setExpanded( ! expanded )
}
size={ 24 }
/>
</Button>
</CardBody>
</>
) }
{ !! expanded &&
recommendedChannels.map( ( el, idx ) => {
return (
>
{ __( 'Add channels', 'woocommerce' ) }
<Icon
icon={
expanded
? chevronUp
: chevronDown
}
size={ 24 }
/>
</Button>
</CardBody>
</>
) }
{ !! expanded &&
recommendedChannels.map( ( el, idx ) => (
<Fragment key={ el.plugin }>
<SmartPluginCardBody
plugin={ el }
@ -113,10 +139,10 @@ export const Channels: React.FC< ChannelsProps > = ( {
<CardDivider />
) }
</Fragment>
);
} ) }
</div>
) }
</Card>
);
};
) ) }
</div>
) }
</Card>
);
}
);

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

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