2021-09-01 21:28:24 +00:00
|
|
|
/**
|
|
|
|
* External dependencies
|
|
|
|
*/
|
|
|
|
import { __ } from '@wordpress/i18n';
|
|
|
|
import { Button } from '@wordpress/components';
|
|
|
|
import { EllipsisMenu } from '@woocommerce/components';
|
|
|
|
import { ONBOARDING_STORE_NAME } from '@woocommerce/data';
|
|
|
|
import { useDispatch } from '@wordpress/data';
|
|
|
|
|
|
|
|
export type TaskListMenuProps = {
|
|
|
|
id: string;
|
2022-03-21 13:52:04 +00:00
|
|
|
hideTaskListText?: string;
|
2021-09-01 21:28:24 +00:00
|
|
|
};
|
|
|
|
|
2022-03-21 13:52:04 +00:00
|
|
|
export const TaskListMenu: React.FC< TaskListMenuProps > = ( {
|
|
|
|
id,
|
|
|
|
hideTaskListText,
|
|
|
|
} ) => {
|
2021-09-01 21:28:24 +00:00
|
|
|
const { hideTaskList } = useDispatch( ONBOARDING_STORE_NAME );
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="woocommerce-card__menu woocommerce-card__header-item">
|
|
|
|
<EllipsisMenu
|
2022-03-30 09:00:04 +00:00
|
|
|
label={ __( 'Task List Options', 'woocommerce' ) }
|
2021-09-01 21:28:24 +00:00
|
|
|
renderContent={ () => (
|
|
|
|
<div className="woocommerce-task-card__section-controls">
|
|
|
|
<Button onClick={ () => hideTaskList( id ) }>
|
2022-03-21 13:52:04 +00:00
|
|
|
{ hideTaskListText ||
|
2022-03-30 09:00:04 +00:00
|
|
|
__( 'Hide this', 'woocommerce' ) }
|
2021-09-01 21:28:24 +00:00
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
) }
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|