50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
|
/**
|
||
|
|
* External dependencies
|
||
|
|
*/
|
||
|
|
import { Notice } from '@wordpress/components';
|
||
|
|
import { useSelect } from '@wordpress/data';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Internal dependencies
|
||
|
|
*/
|
||
|
|
import Alert from '../../assets/images/alert.svg';
|
||
|
|
import { Notice as NoticeType } from '../../contexts/types';
|
||
|
|
import { noticeStore } from '../../contexts/notice-store';
|
||
|
|
import { removeNotice } from '../../utils/functions';
|
||
|
|
|
||
|
|
export default function Notices() {
|
||
|
|
const notices: NoticeType[] = useSelect(
|
||
|
|
( select ) => select( noticeStore ).notices(),
|
||
|
|
[]
|
||
|
|
);
|
||
|
|
|
||
|
|
const actions = ( notice: NoticeType ) => {
|
||
|
|
if ( ! notice.options?.actions ) {
|
||
|
|
return [];
|
||
|
|
}
|
||
|
|
return notice.options?.actions.map( ( action ) => {
|
||
|
|
return {
|
||
|
|
...action,
|
||
|
|
variant: 'link',
|
||
|
|
className: 'is-link',
|
||
|
|
};
|
||
|
|
} );
|
||
|
|
};
|
||
|
|
|
||
|
|
const errorNotices = [];
|
||
|
|
for ( const notice of notices ) {
|
||
|
|
errorNotices.push(
|
||
|
|
<Notice
|
||
|
|
status={ notice.status }
|
||
|
|
onRemove={ () => removeNotice( notice.productKey ) }
|
||
|
|
key={ notice.productKey }
|
||
|
|
actions={ actions( notice ) }
|
||
|
|
>
|
||
|
|
<img src={ Alert } alt="" width={ 24 } height={ 24 } />
|
||
|
|
{ notice.message }
|
||
|
|
</Notice>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
return <>{ errorNotices }</>;
|
||
|
|
}
|