Skip to content

Commit

Permalink
use single Modal part 1
Browse files Browse the repository at this point in the history
  • Loading branch information
ntsekouras committed May 15, 2023
1 parent 8cfd4d2 commit 12e50cf
Show file tree
Hide file tree
Showing 4 changed files with 189 additions and 152 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,12 @@ import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import {
Button,
Modal,
TextControl,
__experimentalHStack as HStack,
__experimentalVStack as VStack,
} from '@wordpress/components';

/**
* Internal dependencies
*/
import TemplateActionsLoadingScreen from './template-actions-loading-screen';

function AddCustomGenericTemplateModal( {
onClose,
createTemplate,
isCreatingTemplate,
} ) {
function AddCustomGenericTemplateModal( { onClose, createTemplate } ) {
const [ title, setTitle ] = useState( '' );
const defaultTitle = __( 'Custom Template' );
const [ isBusy, setIsBusy ] = useState( false );
Expand All @@ -50,51 +40,42 @@ function AddCustomGenericTemplateModal( {
}
}
return (
<Modal
title={ __( 'Create custom template' ) }
onRequestClose={ () => {
onClose();
} }
overlayClassName="edit-site-custom-generic-template__modal"
>
{ isCreatingTemplate && <TemplateActionsLoadingScreen /> }
<form onSubmit={ onCreateTemplate }>
<VStack spacing={ 6 }>
<TextControl
__nextHasNoMarginBottom
label={ __( 'Name' ) }
value={ title }
onChange={ setTitle }
placeholder={ defaultTitle }
disabled={ isBusy }
help={ __(
'Describe the template, e.g. "Post with sidebar".'
) }
/>
<HStack
className="edit-site-custom-generic-template__modal-actions"
justify="right"
<form onSubmit={ onCreateTemplate }>
<VStack spacing={ 6 }>
<TextControl
__nextHasNoMarginBottom
label={ __( 'Name' ) }
value={ title }
onChange={ setTitle }
placeholder={ defaultTitle }
disabled={ isBusy }
help={ __(
'Describe the template, e.g. "Post with sidebar".'
) }
/>
<HStack
className="edit-site-custom-generic-template__modal-actions"
justify="right"
>
<Button
variant="tertiary"
onClick={ () => {
onClose();
} }
>
{ __( 'Cancel' ) }
</Button>
<Button
variant="primary"
type="submit"
isBusy={ isBusy }
aria-disabled={ isBusy }
>
<Button
variant="tertiary"
onClick={ () => {
onClose();
} }
>
{ __( 'Cancel' ) }
</Button>
<Button
variant="primary"
type="submit"
isBusy={ isBusy }
aria-disabled={ isBusy }
>
{ __( 'Create' ) }
</Button>
</HStack>
</VStack>
</form>
</Modal>
{ __( 'Create' ) }
</Button>
</HStack>
</VStack>
</form>
);
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,11 @@
* WordPress dependencies
*/
import { useState, useMemo, useEffect } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import { __ } from '@wordpress/i18n';
import {
Button,
Flex,
FlexItem,
Modal,
SearchControl,
TextHighlight,
__experimentalText as Text,
Expand All @@ -23,7 +22,6 @@ import { decodeEntities } from '@wordpress/html-entities';
/**
* Internal dependencies
*/
import TemplateActionsLoadingScreen from './template-actions-loading-screen';
import { mapToIHasNameAndId } from './utils';

const EMPTY_ARRAY = [];
Expand Down Expand Up @@ -179,36 +177,25 @@ function SuggestionList( { entityForSuggestions, onSelect } ) {
);
}

function AddCustomTemplateModal( {
onClose,
onSelect,
entityForSuggestions,
isCreatingTemplate,
} ) {
function AddCustomTemplateModal( { onSelect, entityForSuggestions } ) {
const [ showSearchEntities, setShowSearchEntities ] = useState(
entityForSuggestions.hasGeneralTemplate
);
const baseCssClass = 'edit-site-custom-template-modal';
return (
<Modal
title={ sprintf(
// translators: %s: Name of the post type e.g: "Post".
__( 'Add template: %s' ),
entityForSuggestions.labels.singular_name
) }
className={ baseCssClass }
onRequestClose={ onClose }
>
{ isCreatingTemplate && <TemplateActionsLoadingScreen /> }
<>
{ ! showSearchEntities && (
<VStack spacing={ 4 }>
<VStack
spacing={ 4 }
className="edit-site-custom-template-modal__contents-wrapper"
alignment="left"
>
<Text as="p">
{ __(
'Select whether to create a single template for all items or a specific one.'
) }
</Text>
<Flex
className={ `${ baseCssClass }__contents` }
className="edit-site-custom-template-modal__contents"
gap="4"
align="initial"
>
Expand Down Expand Up @@ -275,7 +262,11 @@ function AddCustomTemplateModal( {
</VStack>
) }
{ showSearchEntities && (
<VStack spacing={ 4 }>
<VStack
spacing={ 4 }
className="edit-site-custom-template-modal__contents-wrapper"
alignment="left"
>
<Text as="p">
{ __(
'This template will be used only for the specific item chosen.'
Expand All @@ -287,7 +278,7 @@ function AddCustomTemplateModal( {
/>
</VStack>
) }
</Modal>
</>
);
}

Expand Down
Loading

0 comments on commit 12e50cf

Please sign in to comment.