import { CssGrid, Dialog } from '@elementor/app-ui';
import SiteTemplate from '../molecules/site-template';
import { PartActionsDialogs } from '../part-actions/dialogs-and-buttons';
import { Context as TemplatesContext } from '../context/templates';
import useTemplatesScreenshot from '../hooks/use-templates-screenshot';
export default function SiteTemplates( props ) {
const { templates: contextTemplates, action, resetActionState } = React.useContext( TemplatesContext );
let gridColumns, templates;
// Make the templates object a memorize value, will re run again only if
// templates has been changed, also sort the templates by `isActive`.
templates = React.useMemo( () => {
return Object.values( contextTemplates )
.sort( ( a, b ) => {
// This sort make sure to show first the active templates, second the
// inactive templates that are not draft, and then the drafts,
// in each category it sorts it inside by date.
if ( ! b.isActive && ! a.isActive ) {
if (
( 'draft' === b.status && 'draft' === a.status ) ||
( 'draft' !== b.status && 'draft' !== a.status )
) {
return b.date < a.date ? 1 : -1;
}
return 'draft' === a.status ? 1 : -1;
}
if ( b.isActive && a.isActive ) {
return b.date < a.date ? 1 : -1;
}
return b.isActive ? 1 : -1;
} );
}, [ contextTemplates ] );
// Start to capture screenshots.
useTemplatesScreenshot( props.type );
const siteTemplateConfig = {};
if ( props.type ) {
templates = templates.filter( ( item ) => item.type === props.type );
siteTemplateConfig.extended = true;
siteTemplateConfig.type = props.type;
switch ( props.type ) {
case 'header':
case 'footer':
gridColumns = 1;
siteTemplateConfig.aspectRatio = 'wide';
break;
default:
gridColumns = 2;
}
}
if ( ! templates || ! templates.length ) {
return { __( 'No Templates found. Want to create one?', 'elementor-pro' ) }...
;
}
return (
{
action.error &&
}
{
templates.map( ( item ) =>
,
)
}
);
}
SiteTemplates.propTypes = {
type: PropTypes.string,
id: PropTypes.string,
};