41 lines
1.0 KiB
TypeScript
41 lines
1.0 KiB
TypeScript
import { Button } from '@wordpress/components';
|
|
import { __ } from '@wordpress/i18n';
|
|
import { useDispatch, useSelect } from '@wordpress/data';
|
|
import { check, cloud, Icon } from '@wordpress/icons';
|
|
import { storeName } from '../../store';
|
|
|
|
export function SaveEmailButton() {
|
|
const { saveEditedEmail } = useDispatch( storeName );
|
|
|
|
const { hasEdits, isEmpty, isSaving } = useSelect(
|
|
( select ) => ( {
|
|
hasEdits: select( storeName ).hasEdits(),
|
|
isEmpty: select( storeName ).isEmpty(),
|
|
isSaving: select( storeName ).isSaving(),
|
|
} ),
|
|
[]
|
|
);
|
|
|
|
const isSaved = ! isEmpty && ! isSaving && ! hasEdits;
|
|
const isDisabled = isEmpty || isSaving || isSaved;
|
|
|
|
let label = __( 'Save Draft', 'mailpoet' );
|
|
if ( isSaved ) {
|
|
label = __( 'Saved', 'mailpoet' );
|
|
} else if ( isSaving ) {
|
|
label = __( 'Saving', 'mailpoet' );
|
|
}
|
|
|
|
return (
|
|
<Button
|
|
variant="tertiary"
|
|
disabled={ isDisabled }
|
|
onClick={ saveEditedEmail }
|
|
>
|
|
{ isSaving && <Icon icon={ cloud } /> }
|
|
{ isSaved && <Icon icon={ check } /> }
|
|
{ label }
|
|
</Button>
|
|
);
|
|
}
|