92 lines
1.9 KiB
TypeScript
92 lines
1.9 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import React from 'react';
|
|
import { createInterpolateElement, useState } from '@wordpress/element';
|
|
import { useDispatch } from '@wordpress/data';
|
|
|
|
type ShowSnackbarProps = {
|
|
label: string;
|
|
onPositiveResponse: () => void;
|
|
onNegativeResponse: () => void;
|
|
};
|
|
|
|
type NoticeItem = {
|
|
notice: { id: string };
|
|
};
|
|
|
|
export const useFeedbackSnackbar = () => {
|
|
const { createNotice, removeNotice } = useDispatch( 'core/notices' );
|
|
const [ noticeId, setNoticeId ] = useState< string | null >( null );
|
|
|
|
const showSnackbar = async ( {
|
|
label,
|
|
onPositiveResponse,
|
|
onNegativeResponse,
|
|
}: ShowSnackbarProps ) => {
|
|
const noticePromise: Promise< NoticeItem > = createNotice(
|
|
'info',
|
|
label,
|
|
{
|
|
type: 'snackbar',
|
|
explicitDismiss: true,
|
|
actions: [
|
|
{
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
// @ts-ignore
|
|
label: createInterpolateElement(
|
|
'<ThumbsUp /> <ThumbsDown />',
|
|
{
|
|
ThumbsUp: (
|
|
<span
|
|
className="woo-ai-feedback-snackbar-action"
|
|
data-response="positive"
|
|
>
|
|
👍
|
|
</span>
|
|
),
|
|
ThumbsDown: (
|
|
<span
|
|
className="woo-ai-feedback-snackbar-action"
|
|
data-response="negative"
|
|
>
|
|
👎
|
|
</span>
|
|
),
|
|
}
|
|
),
|
|
onClick: (
|
|
e: React.MouseEvent< HTMLButtonElement >
|
|
) => {
|
|
const response = (
|
|
e.target as HTMLSpanElement
|
|
).getAttribute( 'data-response' );
|
|
|
|
if ( response === 'positive' ) {
|
|
onPositiveResponse();
|
|
}
|
|
|
|
if ( response === 'negative' ) {
|
|
onNegativeResponse();
|
|
}
|
|
},
|
|
},
|
|
],
|
|
}
|
|
);
|
|
|
|
return noticePromise.then( ( item: NoticeItem ) => {
|
|
setNoticeId( item.notice.id );
|
|
} );
|
|
};
|
|
|
|
return {
|
|
showSnackbar,
|
|
removeSnackbar: () => {
|
|
if ( noticeId ) {
|
|
removeNotice( noticeId );
|
|
}
|
|
},
|
|
};
|
|
};
|