tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: updates faceless modal

Browse Source
This commit is contained in:
James
2022-09-08 18:05:21 -07:00
parent 3c46851426
commit cbbace21ca
17 changed files with 68 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/admin/components/elements/DeleteDocument/index.tsx
View File

@@ -33,7 +33,7 @@ const DeleteDocument: React.FC<Props> = (props) => {
const { serverURL, routes: { api, admin } } = useConfig();
const { setModified } = useForm();
const [deleting, setDeleting] = useState(false);
const { toggle } = useModal();
const { toggleModal } = useModal();
const history = useHistory();
const title = useTitle(useAsTitle) || id;
const titleToRender = titleFromProps || title;
@@ -55,12 +55,12 @@ const DeleteDocument: React.FC<Props> = (props) => {
try {
const json = await res.json();
if (res.status < 400) {
toggle(modalSlug);
toggleModal(modalSlug);
toast.success(`${singular} "${title}" successfully deleted.`);
return history.push(`${admin}/collections/${slug}`);
}
toggle(modalSlug);
toggleModal(modalSlug);
if (json.errors) {
json.errors.forEach((error) => toast.error(error.message));
@@ -72,7 +72,7 @@ const DeleteDocument: React.FC<Props> = (props) => {
return addDefaultError();
}
});
}, [addDefaultError, toggle, modalSlug, history, id, singular, slug, title, admin, api, serverURL, setModified]);
}, [addDefaultError, toggleModal, modalSlug, history, id, singular, slug, title, admin, api, serverURL, setModified]);
if (id) {
return (
@@ -84,7 +84,7 @@ const DeleteDocument: React.FC<Props> = (props) => {
onClick={(e) => {
e.preventDefault();
setDeleting(false);
toggle(modalSlug);
toggleModal(modalSlug);
}}
>
Delete
@@ -110,7 +110,7 @@ const DeleteDocument: React.FC<Props> = (props) => {
id="confirm-cancel"
buttonStyle="secondary"
type="button"
onClick={deleting ? undefined : () => toggle(modalSlug)}
onClick={deleting ? undefined : () => toggleModal(modalSlug)}
>
Cancel
</Button>

8
src/admin/components/elements/DuplicateDocument/index.tsx
View File

@@ -16,7 +16,7 @@ const baseClass = 'duplicate';
const Duplicate: React.FC<Props> = ({ slug, collection, id }) => {
const { push } = useHistory();
const modified = useFormModified();
const { toggle } = useModal();
const { toggleModal } = useModal();
const { setModified } = useForm();
const { serverURL, routes: { api }, localization } = useConfig();
const { routes: { admin } } = useConfig();
@@ -28,7 +28,7 @@ const Duplicate: React.FC<Props> = ({ slug, collection, id }) => {
setHasClicked(true);
if (modified && !override) {
toggle(modalSlug);
toggleModal(modalSlug);
return;
}
@@ -92,7 +92,7 @@ const Duplicate: React.FC<Props> = ({ slug, collection, id }) => {
pathname: `${admin}/collections/${slug}/${duplicateID}`,
});
}, 10);
}, [modified, localization, collection.labels.singular, setModified, toggle, modalSlug, serverURL, api, slug, id, push, admin]);
}, [modified, localization, collection.labels.singular, setModified, toggleModal, modalSlug, serverURL, api, slug, id, push, admin]);
const confirm = useCallback(async () => {
setHasClicked(false);
@@ -123,7 +123,7 @@ const Duplicate: React.FC<Props> = ({ slug, collection, id }) => {
id="confirm-cancel"
buttonStyle="secondary"
type="button"
onClick={() => toggle(modalSlug)}
onClick={() => toggleModal(modalSlug)}
>
Cancel
</Button>

8
src/admin/components/elements/GenerateConfirmation/index.tsx
View File

@@ -17,13 +17,13 @@ const GenerateConfirmation: React.FC<Props> = (props) => {
} = props;
const { id } = useDocumentInfo();
const { toggle } = useModal();
const { toggleModal } = useModal();
const modalSlug = `generate-confirmation-${id}`;
const handleGenerate = () => {
setKey();
toggle(modalSlug);
toggleModal(modalSlug);
toast.success('New API Key Generated.', { autoClose: 3000 });
highlightField(true);
};
@@ -34,7 +34,7 @@ const GenerateConfirmation: React.FC<Props> = (props) => {
size="small"
buttonStyle="secondary"
onClick={() => {
toggle(modalSlug);
toggleModal(modalSlug);
}}
>
Generate new API key
@@ -59,7 +59,7 @@ const GenerateConfirmation: React.FC<Props> = (props) => {
buttonStyle="secondary"
type="button"
onClick={() => {
toggle(modalSlug);
toggleModal(modalSlug);
}}
>
Cancel

16
src/admin/components/elements/Status/index.tsx
View File

@@ -17,7 +17,7 @@ const baseClass = 'status';
const Status: React.FC<Props> = () => {
const { publishedDoc, unpublishedVersions, collection, global, id, getVersions } = useDocumentInfo();
const { toggle } = useModal();
const { toggleModal } = useModal();
const { serverURL, routes: { api } } = useConfig();
const [processing, setProcessing] = useState(false);
const { reset: resetForm } = useForm();
@@ -93,13 +93,13 @@ const Status: React.FC<Props> = () => {
setProcessing(false);
if (action === 'revert') {
toggle(revertModalSlug);
toggleModal(revertModalSlug);
}
if (action === 'unpublish') {
toggle(unPublishModalSlug);
toggleModal(unPublishModalSlug);
}
}, [collection, global, publishedDoc, serverURL, api, id, locale, resetForm, getVersions, toggle, revertModalSlug, unPublishModalSlug]);
}, [collection, global, publishedDoc, serverURL, api, id, locale, resetForm, getVersions, toggleModal, revertModalSlug, unPublishModalSlug]);
if (statusToRender) {
return (
@@ -110,7 +110,7 @@ const Status: React.FC<Props> = () => {
<React.Fragment>
&nbsp;&mdash;&nbsp;
<Button
onClick={() => toggle(unPublishModalSlug)}
onClick={() => toggleModal(unPublishModalSlug)}
className={`${baseClass}__action`}
buttonStyle="none"
>
@@ -126,7 +126,7 @@ const Status: React.FC<Props> = () => {
<Button
buttonStyle="secondary"
type="button"
onClick={processing ? undefined : () => toggle(unPublishModalSlug)}
onClick={processing ? undefined : () => toggleModal(unPublishModalSlug)}
>
Cancel
</Button>
@@ -143,7 +143,7 @@ const Status: React.FC<Props> = () => {
<React.Fragment>
&nbsp;&mdash;&nbsp;
<Button
onClick={() => toggle(revertModalSlug)}
onClick={() => toggleModal(revertModalSlug)}
className={`${baseClass}__action`}
buttonStyle="none"
>
@@ -159,7 +159,7 @@ const Status: React.FC<Props> = () => {
<Button
buttonStyle="secondary"
type="button"
onClick={processing ? undefined : () => toggle(revertModalSlug)}
onClick={processing ? undefined : () => toggleModal(revertModalSlug)}
>
Cancel
</Button>

8
src/admin/components/forms/field-types/RichText/elements/link/Button.tsx
View File

@@ -26,7 +26,7 @@ export const LinkButton = ({ fieldProps }) => {
const editor = useSlate();
const { user } = useAuth();
const locale = useLocale();
const { toggle } = useModal();
const { toggleModal } = useModal();
const [renderModal, setRenderModal] = useState(false);
const [initialState, setInitialState] = useState<Fields>({});
const [fieldSchema] = useState(() => {
@@ -61,7 +61,7 @@ export const LinkButton = ({ fieldProps }) => {
if (isElementActive(editor, 'link')) {
unwrapLink(editor);
} else {
toggle(modalSlug);
toggleModal(modalSlug);
setRenderModal(true);
const isCollapsed = editor.selection && Range.isCollapsed(editor.selection);
@@ -85,7 +85,7 @@ export const LinkButton = ({ fieldProps }) => {
fieldSchema={fieldSchema}
initialState={initialState}
close={() => {
toggle(modalSlug);
toggleModal(modalSlug);
setRenderModal(false);
}}
handleModalSubmit={(fields) => {
@@ -120,7 +120,7 @@ export const LinkButton = ({ fieldProps }) => {
Transforms.insertText(editor, String(data.text), { at: editor.selection.focus.path });
}
toggle(modalSlug);
toggleModal(modalSlug);
setRenderModal(false);
ReactEditor.focus(editor);

8
src/admin/components/forms/field-types/RichText/elements/link/Element.tsx
View File

@@ -30,7 +30,7 @@ export const LinkElement = ({ attributes, children, element, editorRef, fieldPro
const config = useConfig();
const { user } = useAuth();
const locale = useLocale();
const { open, closeAll } = useModal();
const { openModal, toggleModal } = useModal();
const [renderModal, setRenderModal] = useState(false);
const [renderPopup, setRenderPopup] = useState(false);
const [initialState, setInitialState] = useState<Fields>({});
@@ -98,11 +98,11 @@ export const LinkElement = ({ attributes, children, element, editorRef, fieldPro
modalSlug={modalSlug}
fieldSchema={fieldSchema}
close={() => {
closeAll();
toggleModal(modalSlug);
setRenderModal(false);
}}
handleModalSubmit={(fields) => {
closeAll();
toggleModal(modalSlug);
setRenderModal(false);
const data = reduceFieldsToValues(fields, true);
@@ -175,7 +175,7 @@ export const LinkElement = ({ attributes, children, element, editorRef, fieldPro
onClick={(e) => {
e.preventDefault();
setRenderPopup(false);
open(modalSlug);
openModal(modalSlug);
setRenderModal(true);
}}
tooltip="Edit"

12
src/admin/components/forms/field-types/RichText/elements/relationship/Button/index.tsx
View File

@@ -37,7 +37,7 @@ const insertRelationship = (editor, { value, relationTo }) => {
};
const RelationshipButton: React.FC<{ path: string }> = ({ path }) => {
const { toggle } = useModal();
const { toggleModal } = useModal();
const editor = useSlate();
const { serverURL, routes: { api }, collections } = useConfig();
const [renderModal, setRenderModal] = useState(false);
@@ -52,16 +52,16 @@ const RelationshipButton: React.FC<{ path: string }> = ({ path }) => {
const json = await res.json();
insertRelationship(editor, { value: { id: json.id }, relationTo });
toggle(modalSlug);
toggleModal(modalSlug);
setRenderModal(false);
setLoading(false);
}, [editor, toggle, modalSlug, api, serverURL]);
}, [editor, toggleModal, modalSlug, api, serverURL]);
useEffect(() => {
if (renderModal) {
toggle(modalSlug);
toggleModal(modalSlug);
}
}, [renderModal, toggle, modalSlug]);
}, [renderModal, toggleModal, modalSlug]);
if (!hasEnabledCollections) return null;
@@ -85,7 +85,7 @@ const RelationshipButton: React.FC<{ path: string }> = ({ path }) => {
<Button
buttonStyle="none"
onClick={() => {
toggle(modalSlug);
toggleModal(modalSlug);
setRenderModal(false);
}}
>

10
src/admin/components/forms/field-types/RichText/elements/upload/Button/index.tsx
View File

@@ -42,7 +42,7 @@ const insertUpload = (editor, { value, relationTo }) => {
};
const UploadButton: React.FC<{ path: string }> = ({ path }) => {
const { toggle, modalState } = useModal();
const { toggleModal, modalState } = useModal();
const editor = useSlate();
const { serverURL, routes: { api }, collections } = useConfig();
const [availableCollections] = useState(() => collections.filter(({ admin: { enableRichTextRelationship }, upload }) => (Boolean(upload) && enableRichTextRelationship)));
@@ -79,9 +79,9 @@ const UploadButton: React.FC<{ path: string }> = ({ path }) => {
useEffect(() => {
if (renderModal) {
toggle(modalSlug);
toggleModal(modalSlug);
}
}, [renderModal, toggle, modalSlug]);
}, [renderModal, toggleModal, modalSlug]);
useEffect(() => {
const params: {
@@ -137,7 +137,7 @@ const UploadButton: React.FC<{ path: string }> = ({ path }) => {
buttonStyle="icon-label"
iconStyle="with-border"
onClick={() => {
toggle(modalSlug);
toggleModal(modalSlug);
setRenderModal(false);
}}
/>
@@ -175,7 +175,7 @@ const UploadButton: React.FC<{ path: string }> = ({ path }) => {
relationTo: modalCollection.slug,
});
setRenderModal(false);
toggle(modalSlug);
toggleModal(modalSlug);
}}
/>
<div className={`${baseModalClass}__page-controls`}>

10
src/admin/components/forms/field-types/RichText/elements/upload/Element/index.tsx
View File

@@ -21,7 +21,7 @@ const initialParams = {
const Element = ({ attributes, children, element, path, fieldProps }) => {
const { relationTo, value } = element;
const { toggle } = useModal();
const { toggleModal } = useModal();
const { collections, serverURL, routes: { api } } = useConfig();
const [modalToRender, setModalToRender] = useState(undefined);
const [relatedCollection, setRelatedCollection] = useState<SanitizedCollectionConfig>(() => collections.find((coll) => coll.slug === relationTo));
@@ -50,15 +50,15 @@ const Element = ({ attributes, children, element, path, fieldProps }) => {
}, [editor, element]);
const closeModal = useCallback(() => {
toggle(modalSlug);
toggleModal(modalSlug);
setModalToRender(null);
}, [toggle, modalSlug]);
}, [toggleModal, modalSlug]);
useEffect(() => {
if (modalToRender) {
toggle(modalSlug);
toggleModal(modalSlug);
}
}, [modalToRender, toggle, modalSlug]);
}, [modalToRender, toggleModal, modalSlug]);
const fieldSchema = fieldProps?.admin?.upload?.collections?.[relatedCollection.slug]?.fields;

8
src/admin/components/forms/field-types/Upload/Add/index.tsx
View File

@@ -30,12 +30,12 @@ const AddUploadModal: React.FC<Props> = (props) => {
const { permissions } = useAuth();
const { serverURL, routes: { api } } = useConfig();
const { toggle } = useModal();
const { toggleModal } = useModal();
const onSuccess = useCallback((json) => {
toggle(slug);
toggleModal(slug);
setValue(json.doc);
}, [toggle, slug, setValue]);
}, [toggleModal, slug, setValue]);
const classes = [
baseClass,
@@ -69,7 +69,7 @@ const AddUploadModal: React.FC<Props> = (props) => {
round
buttonStyle="icon-label"
iconStyle="with-border"
onClick={() => toggle(slug)}
onClick={() => toggleModal(slug)}
/>
</div>
{description && (

6
src/admin/components/forms/field-types/Upload/Input.tsx
View File

@@ -58,7 +58,7 @@ const UploadInput: React.FC<UploadInputProps> = (props) => {
filterOptions,
} = props;
const { toggle } = useModal();
const { toggleModal } = useModal();
const addModalSlug = `${path}-add`;
const selectExistingModalSlug = `${path}-select-existing`;
@@ -131,7 +131,7 @@ const UploadInput: React.FC<UploadInputProps> = (props) => {
<Button
buttonStyle="secondary"
onClick={() => {
toggle(addModalSlug);
toggleModal(addModalSlug);
}}
>
Upload new
@@ -141,7 +141,7 @@ const UploadInput: React.FC<UploadInputProps> = (props) => {
<Button
buttonStyle="secondary"
onClick={() => {
toggle(selectExistingModalSlug);
toggleModal(selectExistingModalSlug);
}}
>
Choose from existing

6
src/admin/components/forms/field-types/Upload/SelectExisting/index.tsx
View File

@@ -44,7 +44,7 @@ const SelectExistingUploadModal: React.FC<Props> = (props) => {
const { id } = useDocumentInfo();
const { user } = useAuth();
const { getData, getSiblingData } = useWatchForm();
const { toggle, modalState } = useModal();
const { toggleModal, modalState } = useModal();
const [fields] = useState(() => formatFields(collection));
const [limit, setLimit] = useState(defaultLimit);
const [sort, setSort] = useState(null);
@@ -115,7 +115,7 @@ const SelectExistingUploadModal: React.FC<Props> = (props) => {
round
buttonStyle="icon-label"
iconStyle="with-border"
onClick={() => toggle(modalSlug)}
onClick={() => toggleModal(modalSlug)}
/>
</div>
{description && (
@@ -140,7 +140,7 @@ const SelectExistingUploadModal: React.FC<Props> = (props) => {
collection={collection}
onCardClick={(doc) => {
setValue(doc);
toggle(modalSlug);
toggleModal(modalSlug);
}}
/>
<div className={`${baseClass}__page-controls`}>

6
src/admin/components/modals/StayLoggedIn/index.tsx
View File

@@ -16,7 +16,7 @@ const StayLoggedInModal: React.FC<Props> = (props) => {
const { refreshCookie } = props;
const history = useHistory();
const { routes: { admin } } = useConfig();
const { toggle } = useModal();
const { toggleModal } = useModal();
return (
<Modal
@@ -30,7 +30,7 @@ const StayLoggedInModal: React.FC<Props> = (props) => {
<Button
buttonStyle="secondary"
onClick={() => {
toggle(modalSlug);
toggleModal(modalSlug);
history.push(`${admin}/logout`);
}}
>
@@ -38,7 +38,7 @@ const StayLoggedInModal: React.FC<Props> = (props) => {
</Button>
<Button onClick={() => {
refreshCookie();
toggle(modalSlug);
toggleModal(modalSlug);
}}
>
Stay logged in

2
src/admin/components/utilities/Auth/index.tsx
View File

@@ -38,7 +38,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
const [permissions, setPermissions] = useState<Permissions>();
const { open: openModal, closeAll: closeAllModals } = useModal();
const { openModal, closeAllModals } = useModal();
const [lastLocationChange, setLastLocationChange] = useState(0);
const debouncedLocationChange = useDebounce(lastLocationChange, 10000);

6
src/admin/components/views/Version/Restore/index.tsx
View File

@@ -15,7 +15,7 @@ const modalSlug = 'restore-version';
const Restore: React.FC<Props> = ({ collection, global, className, versionID, originalDocID, versionDate }) => {
const { serverURL, routes: { api, admin } } = useConfig();
const history = useHistory();
const { toggle } = useModal();
const { toggleModal } = useModal();
const [processing, setProcessing] = useState(false);
let fetchURL = `${serverURL}${api}`;
@@ -51,7 +51,7 @@ const Restore: React.FC<Props> = ({ collection, global, className, versionID, or
return (
<Fragment>
<Pill
onClick={() => toggle(modalSlug)}
onClick={() => toggleModal(modalSlug)}
className={[baseClass, className].filter(Boolean).join(' ')}
>
Restore this version
@@ -66,7 +66,7 @@ const Restore: React.FC<Props> = ({ collection, global, className, versionID, or
<Button
buttonStyle="secondary"
type="button"
onClick={processing ? undefined : () => toggle(modalSlug)}
onClick={processing ? undefined : () => toggleModal(modalSlug)}
>
Cancel
</Button>