From 475f147f2cab64bf79ff019a1eae9e7f18690557 Mon Sep 17 00:00:00 2001 From: Jacob Fletcher Date: Thu, 1 Dec 2022 16:34:05 -0500 Subject: [PATCH] feat: retrofits DocumentDrawer into relationship AddNew --- .../Relationship/AddNew/Modal/index.scss | 117 --------------- .../Relationship/AddNew/Modal/index.tsx | 110 -------------- .../Relationship/AddNew/Modal/types.ts | 7 - .../Relationship/AddNew/index.scss | 24 +--- .../field-types/Relationship/AddNew/index.tsx | 136 ++++++++++-------- 5 files changed, 82 insertions(+), 312 deletions(-) delete mode 100644 src/admin/components/forms/field-types/Relationship/AddNew/Modal/index.scss delete mode 100644 src/admin/components/forms/field-types/Relationship/AddNew/Modal/index.tsx delete mode 100644 src/admin/components/forms/field-types/Relationship/AddNew/Modal/types.ts diff --git a/src/admin/components/forms/field-types/Relationship/AddNew/Modal/index.scss b/src/admin/components/forms/field-types/Relationship/AddNew/Modal/index.scss deleted file mode 100644 index a6d8b8f942..0000000000 --- a/src/admin/components/forms/field-types/Relationship/AddNew/Modal/index.scss +++ /dev/null @@ -1,117 +0,0 @@ -@import '../../../../../../scss/styles.scss'; - -.relationship-add-new-modal { - display: flex; - overflow: hidden; - position: fixed; - height: 100vh; - - &__blur-bg { - @include blur-bg(); - position: absolute; - z-index: 1; - top: 0; - right: 0; - bottom: 0; - left: 0; - opacity: 0; - transition: all 300ms ease-out; - } - - .collection-edit { - @include blur-bg(); - transform: translateX(#{base(4)}); - opacity: 0; - transition: all 300ms ease-out; - position: relative; - z-index: 2; - } - - .collection-edit__form { - overflow: auto; - position: relative; - z-index: 1; - } - - .collection-edit__document-actions { - - &:before, - &:after { - content: none; - } - } - - &--animated { - - .collection-edit, - .relationship-add-new-modal__blur-bg, - .relationship-add-new-modal__close { - opacity: 1; - } - - .collection-edit { - transform: translateX(0); - } - } - - .collection-edit__document-actions { - margin-top: base(2.75); - } - - &__close { - @extend %btn-reset; - position: relative; - z-index: 2; - flex-shrink: 0; - text-indent: -9999px; - background: rgba(0, 0, 0, 0.08); - cursor: pointer; - opacity: 0; - transition: all 300ms ease-in-out; - transition-delay: 100ms; - - &:active, - &:focus { - outline: 0; - } - } - - &__header { - display: flex; - justify-content: space-between; - align-items: flex-start; - margin-top: base(2.5); - } - - &__header-close { - svg { - width: base(2.5); - height: base(2.5); - position: relative; - top: base(-.5); - right: base(-.75); - - .stroke { - stroke-width: .5px; - } - } - } - - @include mid-break { - &__header-close { - svg { - top: base(-.75); - } - } - - &__close { - width: base(1); - } - } -} - -html[data-theme=dark] { - .relationship-add-new-modal__close { - background: rgba(0, 0, 0, 0.2); - } -} \ No newline at end of file diff --git a/src/admin/components/forms/field-types/Relationship/AddNew/Modal/index.tsx b/src/admin/components/forms/field-types/Relationship/AddNew/Modal/index.tsx deleted file mode 100644 index b7fd41b6dc..0000000000 --- a/src/admin/components/forms/field-types/Relationship/AddNew/Modal/index.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { Modal, useModal } from '@faceless-ui/modal'; -import { useWindowInfo } from '@faceless-ui/window-info'; -import { useTranslation } from 'react-i18next'; -import Button from '../../../../../elements/Button'; -import { Props } from './types'; -import { useAuth } from '../../../../../utilities/Auth'; -import RenderCustomComponent from '../../../../../utilities/RenderCustomComponent'; -import { useLocale } from '../../../../../utilities/Locale'; -import { useConfig } from '../../../../../utilities/Config'; -import DefaultEdit from '../../../../../views/collections/Edit/Default'; -import X from '../../../../../icons/X'; -import { Fields } from '../../../../Form/types'; -import buildStateFromSchema from '../../../../Form/buildStateFromSchema'; -import { EditDepthContext, useEditDepth } from '../../../../../utilities/EditDepth'; -import { getTranslation } from '../../../../../../../utilities/getTranslation'; -import { DocumentInfoProvider } from '../../../../../utilities/DocumentInfo'; - -import './index.scss'; - -const baseClass = 'relationship-add-new-modal'; - -export const AddNewRelationModal: React.FC = ({ modalCollection, onSave, modalSlug }) => { - const { serverURL, routes: { api } } = useConfig(); - const { toggleModal } = useModal(); - const { breakpoints: { m: midBreak } } = useWindowInfo(); - const locale = useLocale(); - const { permissions, user } = useAuth(); - const [initialState, setInitialState] = useState(); - const [isAnimated, setIsAnimated] = useState(false); - const editDepth = useEditDepth(); - const { t, i18n } = useTranslation('fields'); - - const modalAction = `${serverURL}${api}/${modalCollection.slug}?locale=${locale}&depth=0&fallback-locale=null`; - - useEffect(() => { - const buildState = async () => { - const state = await buildStateFromSchema({ fieldSchema: modalCollection.fields, data: {}, user, operation: 'create', locale, t }); - setInitialState(state); - }; - - buildState(); - }, [modalCollection, locale, user, t]); - - useEffect(() => { - setIsAnimated(true); - }, []); - - return ( - - {editDepth === 1 && ( -
- )} - - - - -

- {t('addNewLabel', { label: getTranslation(modalCollection.labels.singular, i18n) })} -

- -
- ), - }} - /> - - - - ); -}; diff --git a/src/admin/components/forms/field-types/Relationship/AddNew/Modal/types.ts b/src/admin/components/forms/field-types/Relationship/AddNew/Modal/types.ts deleted file mode 100644 index c617447602..0000000000 --- a/src/admin/components/forms/field-types/Relationship/AddNew/Modal/types.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { SanitizedCollectionConfig } from '../../../../../../../collections/config/types'; - -export type Props = { - modalSlug: string - modalCollection: SanitizedCollectionConfig - onSave: (json: Record) => void -} diff --git a/src/admin/components/forms/field-types/Relationship/AddNew/index.scss b/src/admin/components/forms/field-types/Relationship/AddNew/index.scss index 58328e92b7..ea75d441b8 100644 --- a/src/admin/components/forms/field-types/Relationship/AddNew/index.scss +++ b/src/admin/components/forms/field-types/Relationship/AddNew/index.scss @@ -12,28 +12,16 @@ &__add-button { @include formInput; + position: relative; height: 100%; margin-left: -1px; display: flex; - padding: 0; - - .btn__content, - .btn__label { - display: flex; - } - - .btn__content, - .btn__label { - height: 100%; - } - - .btn__label { - padding: 0 base(.5); - align-items: center; - } + padding: 0 base(0.5); + align-items: center; + display: flex; + cursor: pointer; } - &__relations { list-style: none; margin: 0; @@ -57,4 +45,4 @@ opacity: .7; } } -} \ No newline at end of file +} diff --git a/src/admin/components/forms/field-types/Relationship/AddNew/index.tsx b/src/admin/components/forms/field-types/Relationship/AddNew/index.tsx index 56d9d26cf9..91c07ec369 100644 --- a/src/admin/components/forms/field-types/Relationship/AddNew/index.tsx +++ b/src/admin/components/forms/field-types/Relationship/AddNew/index.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useState } from 'react'; +import React, { Fragment, useCallback, useEffect, useState } from 'react'; import { useModal } from '@faceless-ui/modal'; import { useTranslation } from 'react-i18next'; import Button from '../../../../elements/Button'; @@ -7,10 +7,11 @@ import { SanitizedCollectionConfig } from '../../../../../../collections/config/ import Popup from '../../../../elements/Popup'; import { useRelatedCollections } from './useRelatedCollections'; import { useAuth } from '../../../../utilities/Auth'; -import { AddNewRelationModal } from './Modal'; import { useEditDepth } from '../../../../utilities/EditDepth'; import Plus from '../../../../icons/Plus'; import { getTranslation } from '../../../../../../utilities/getTranslation'; +import { DocumentDrawer, DocumentDrawerToggler } from '../../../../elements/DocumentDrawer'; +import Tooltip from '../../../../elements/Tooltip'; import './index.scss'; @@ -18,30 +19,26 @@ const baseClass = 'relationship-add-new'; export const AddNewRelation: React.FC = ({ path, hasMany, relationTo, value, setValue, dispatchOptions }) => { const relatedCollections = useRelatedCollections(relationTo); - const { toggleModal, isModalOpen } = useModal(); + const { isModalOpen } = useModal(); const { permissions } = useAuth(); const [hasPermission, setHasPermission] = useState(false); - const [modalCollection, setModalCollection] = useState(); + const [selectedCollection, setSelectedCollection] = useState(); const [popupOpen, setPopupOpen] = useState(false); const editDepth = useEditDepth(); const { t, i18n } = useTranslation('fields'); + const [showTooltip, setShowTooltip] = useState(false); const modalSlug = `${path}-add-modal-depth-${editDepth}`; - const openModal = useCallback(async (collection: SanitizedCollectionConfig) => { - setModalCollection(collection); - toggleModal(modalSlug); - }, [toggleModal, modalSlug]); - const onSave = useCallback((json) => { const newValue = Array.isArray(relationTo) ? { - relationTo: modalCollection.slug, + relationTo: selectedCollection.slug, value: json.doc.id, } : json.doc.id; dispatchOptions({ type: 'ADD', - collection: modalCollection, + collection: selectedCollection, docs: [ json.doc, ], @@ -55,9 +52,9 @@ export const AddNewRelation: React.FC = ({ path, hasMany, relationTo, val setValue(newValue); } - setModalCollection(undefined); - toggleModal(modalSlug); - }, [relationTo, modalCollection, dispatchOptions, i18n, hasMany, toggleModal, modalSlug, setValue, value]); + setSelectedCollection(undefined); + // toggleModal(modalSlug); + }, [relationTo, selectedCollection, dispatchOptions, i18n, hasMany, setValue, value]); const onPopopToggle = useCallback((state) => { setPopupOpen(state); @@ -75,7 +72,7 @@ export const AddNewRelation: React.FC = ({ path, hasMany, relationTo, val useEffect(() => { if (!isModalOpen(modalSlug)) { - setModalCollection(undefined); + setSelectedCollection(undefined); } }, [isModalOpen, modalSlug]); @@ -85,56 +82,75 @@ export const AddNewRelation: React.FC = ({ path, hasMany, relationTo, val id={`${path}-add-new`} > {relatedCollections.length === 1 && ( - + + setShowTooltip(true)} + onMouseLeave={() => setShowTooltip(false)} + > + {showTooltip && ( + + {t('addNewLabel', { label: relatedCollections[0].labels.singular })} + + )} + + + {relatedCollections[0] && ( + + )} + )} {relatedCollections.length > 1 && ( - - - + + + + )} - render={({ close: closePopup }) => ( -
    - {relatedCollections.map((relatedCollection) => { - if (permissions.collections[relatedCollection.slug].create.permission) { - return ( -
  • - -
    • - ); - } + render={({ close: closePopup }) => ( +
      + {relatedCollections.map((relatedCollection) => { + if (permissions.collections[relatedCollection.slug].create.permission) { + return ( +
    • + { + closePopup(); + setSelectedCollection(relatedCollection); + }} + > + {getTranslation(relatedCollection.labels.singular, i18n)} + +
      • + ); + } - return null; - })} -
    + return null; + })} +
+ )} + /> + {selectedCollection && ( + )} - /> - )} - {modalCollection && ( - + )} ) : null;