Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Add isBusy state for template card

Browse Source 
[MAILPOET-4676]
This commit is contained in:
Jan Jakes
2023-11-08 15:50:46 +01:00
committed by Aschepikov
parent 13d0258004
commit c7f2894bec
2 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
mailpoet/assets/css/src/mailpoet-templates.scss
View File

@ -54,7 +54,7 @@
position: absolute; position: absolute;
} }
&:disabled { &:disabled:not(.mailpoet-templates-card-is-busy) {
filter: grayscale(1); filter: grayscale(1);
opacity: 0.7; opacity: 0.7;
} }

11
mailpoet/assets/js/src/common/templates/item.tsx
View File

@ -1,3 +1,4 @@
import classNames from 'classnames';
import { EventHandler, MouseEvent } from 'react'; import { EventHandler, MouseEvent } from 'react';
import { Card, CardBody, CardHeader } from '@wordpress/components'; import { Card, CardBody, CardHeader } from '@wordpress/components';
import { Tag } from '@woocommerce/components'; import { Tag } from '@woocommerce/components';
@ -10,6 +11,7 @@ type Props = {
badge?: 'essential' | 'coming-soon' | 'premium'; badge?: 'essential' | 'coming-soon' | 'premium';
onClick?: EventHandler<MouseEvent<HTMLButtonElement>>; onClick?: EventHandler<MouseEvent<HTMLButtonElement>>;
disabled?: boolean; disabled?: boolean;
isBusy?: boolean;
}; };
export function Item({ export function Item({
@ -19,14 +21,17 @@ export function Item({
badge, badge,
onClick, onClick,
disabled = false, disabled = false,
isBusy = false,
}: Props): JSX.Element { }: Props): JSX.Element {
return ( return (
<Card <Card
as="button" as="button"
className="mailpoet-templates-card" className={classNames('mailpoet-templates-card', {
'mailpoet-templates-card-is-busy': isBusy,
})}
onClick={onClick} onClick={onClick}
disabled={disabled} disabled={disabled || isBusy}
aria-disabled={disabled} aria-disabled={disabled || isBusy}
> >
<CardHeader className="mailpoet-templates-card-header"> <CardHeader className="mailpoet-templates-card-header">
{badge && <ItemBadge type={badge} />} {badge && <ItemBadge type={badge} />}