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

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`}>