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

fix: renders rte upload drawer #2178

Browse Source
This commit is contained in:
Jacob Fletcher
2023-02-28 09:08:16 -05:00
committed by GitHub
parent b0b82e1f57
commit 523d9d4952
32 changed files with 201 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/admin/components/elements/Button/index.tsx
View File

@@ -7,6 +7,7 @@ import x from '../../icons/X';
import chevron from '../../icons/Chevron';
import edit from '../../icons/Edit';
import swap from '../../icons/Swap';
import linkIcon from '../../icons/Link';
import Tooltip from '../Tooltip';
import './index.scss';
@@ -17,6 +18,7 @@ const icons = {
chevron,
edit,
swap,
link: linkIcon,
};
const baseClass = 'btn';

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

@@ -49,16 +49,18 @@
outline: none;
}
.rich-text-relationship__doc-drawer-toggler {
text-decoration: underline;
pointer-events: all;
line-height: inherit;
}
&__actions {
display: flex;
align-items: center;
flex-shrink: 0;
margin-left: base(0.5);
.rich-text-relationship__doc-drawer-toggler {
pointer-events: all;
}
& > *:not(:last-child) {
margin-right: base(.25);
}

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

@@ -146,25 +146,13 @@ const Element: React.FC<Props> = (props) => {
<p className={`${baseClass}__label`}>
{t('labelRelationship', { label: getTranslation(relatedCollection.labels.singular, i18n) })}
</p>
<p className={`${baseClass}__title`}>
{data[relatedCollection?.admin?.useAsTitle || 'id']}
</p>
<DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>
<p className={`${baseClass}__title`}>
{data[relatedCollection?.admin?.useAsTitle || 'id']}
</p>
</DocumentDrawerToggler>
</div>
<div className={`${baseClass}__actions`}>
{value?.id && (
<DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>
<Button
icon="edit"
round
buttonStyle="icon-label"
el="div"
onClick={(e) => {
e.preventDefault();
}}
tooltip={t('general:editLabel', { label: getTranslation(relatedCollection.labels.singular, i18n) })}
/>
</DocumentDrawerToggler>
)}
<ListDrawerToggler
disabled={fieldProps?.admin?.readOnly}
className={`${baseClass}__list-drawer-toggler`}

82
src/admin/components/forms/field-types/RichText/elements/upload/Element/UploadDrawer/index.tsx Normal file
View File

@@ -0,0 +1,82 @@
import { useModal } from '@faceless-ui/modal';
import { Transforms } from 'slate';
import { ReactEditor, useSlateStatic } from 'slate-react';
import React, { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ElementProps } from '..';
import fieldTypes from '../../../../..';
import { SanitizedCollectionConfig } from '../../../../../../../../../collections/config/types';
import { Drawer } from '../../../../../../../elements/Drawer';
import { useAuth } from '../../../../../../../utilities/Auth';
import { useLocale } from '../../../../../../../utilities/Locale';
import Form from '../../../../../../Form';
import RenderFields from '../../../../../../RenderFields';
import FormSubmit from '../../../../../../Submit';
import buildStateFromSchema from '../../../../../../Form/buildStateFromSchema';
import { getTranslation } from '../../../../../../../../../utilities/getTranslation';
export const UploadDrawer: React.FC<ElementProps & {
drawerSlug: string
relatedCollection: SanitizedCollectionConfig
}> = (props) => {
const editor = useSlateStatic();
const {
fieldProps,
relatedCollection,
drawerSlug,
element,
} = props;
const { t, i18n } = useTranslation();
const locale = useLocale();
const { user } = useAuth();
const { closeModal } = useModal();
const [initialState, setInitialState] = useState({});
const fieldSchema = fieldProps?.admin?.upload?.collections?.[relatedCollection.slug]?.fields;
const handleUpdateEditData = useCallback((_, data) => {
const newNode = {
fields: data,
};
const elementPath = ReactEditor.findPath(editor, element);
Transforms.setNodes(
editor,
newNode,
{ at: elementPath },
);
closeModal(drawerSlug);
}, [closeModal, editor, element, drawerSlug]);
useEffect(() => {
const awaitInitialState = async () => {
const state = await buildStateFromSchema({ fieldSchema, data: { ...element?.fields || {} }, user, operation: 'update', locale, t });
setInitialState(state);
};
awaitInitialState();
}, [fieldSchema, element.fields, user, locale, t]);
return (
<Drawer
slug={drawerSlug}
title={t('general:editLabel', { label: getTranslation(relatedCollection.labels.singular, i18n) })}
>
<Form
onSubmit={handleUpdateEditData}
initialState={initialState}
>
<RenderFields
readOnly={false}
fieldTypes={fieldTypes}
fieldSchema={fieldSchema}
/>
<FormSubmit>
{t('fields:saveChanges')}
</FormSubmit>
</Form>
</Drawer>
);
};

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

@@ -84,8 +84,22 @@
}
}
&__upload-drawer-toggler {
background-color: transparent;
border: none;
padding: 0;
margin: 0;
outline: none;
line-height: inherit;
}
&__doc-drawer-toggler {
text-decoration: underline;
}
&__doc-drawer-toggler,
&__list-drawer-toggler {
&__list-drawer-toggler,
&__upload-drawer-toggler {
& > * {
margin: 0;
}

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

@@ -13,6 +13,9 @@ import { useListDrawer } from '../../../../../../elements/ListDrawer';
import { SanitizedCollectionConfig } from '../../../../../../../../collections/config/types';
import { Props as RichTextProps } from '../../../types';
import { EnabledRelationshipsCondition } from '../../EnabledRelationshipsCondition';
import { useDrawerSlug } from '../../../../../../elements/Drawer/useDrawerSlug';
import { UploadDrawer } from './UploadDrawer';
import { DrawerToggler } from '../../../../../../elements/Drawer';
import './index.scss';
@@ -22,7 +25,7 @@ const initialParams = {
depth: 0,
};
type ElementProps = {
export type ElementProps = {
attributes: HTMLAttributes<HTMLDivElement>
children: React.ReactNode
element: any
@@ -48,6 +51,8 @@ const Element: React.FC<ElementProps> = (props) => {
const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0);
const [relatedCollection, setRelatedCollection] = useState<SanitizedCollectionConfig>(() => collections.find((coll) => coll.slug === relationTo));
const drawerSlug = useDrawerSlug('upload-drawer');
const [
ListDrawer,
ListDrawerToggler,
@@ -142,6 +147,8 @@ const Element: React.FC<ElementProps> = (props) => {
closeListDrawer();
}, [closeListDrawer, editor, element, collections]);
const customFields = fieldProps?.admin?.upload?.collections?.[relatedCollection.slug]?.fields;
return (
<div
className={[
@@ -168,8 +175,12 @@ const Element: React.FC<ElementProps> = (props) => {
{getTranslation(relatedCollection.labels.singular, i18n)}
</div>
<div className={`${baseClass}__actions`}>
{value?.id && (
<DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>
{customFields?.length > 0 && (
<DrawerToggler
slug={drawerSlug}
className={`${baseClass}__upload-drawer-toggler`}
disabled={fieldProps?.admin?.readOnly}
>
<Button
icon="edit"
round
@@ -178,9 +189,9 @@ const Element: React.FC<ElementProps> = (props) => {
onClick={(e) => {
e.preventDefault();
}}
tooltip={t('general:editLabel', { label: relatedCollection.labels.singular })}
tooltip={t('fields:editRelationship')}
/>
</DocumentDrawerToggler>
</DrawerToggler>
)}
<ListDrawerToggler
className={`${baseClass}__list-drawer-toggler`}
@@ -214,9 +225,11 @@ const Element: React.FC<ElementProps> = (props) => {
</div>
</div>
<div className={`${baseClass}__bottomRow`}>
<strong>
{data?.filename}
</strong>
<DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>
<strong>
{data?.filename}
</strong>
</DocumentDrawerToggler>
</div>
</div>
{children}
@@ -224,6 +237,11 @@ const Element: React.FC<ElementProps> = (props) => {
<DocumentDrawer onSave={updateUpload} />
)}
<ListDrawer onSelect={swapUpload} />
<UploadDrawer
drawerSlug={drawerSlug}
relatedCollection={relatedCollection}
{...props}
/>
</div>
);
};

11
src/admin/components/icons/Link/index.scss Normal file
View File

@@ -0,0 +1,11 @@
@import '../../../scss/styles';
.icon--link {
width: $baseline;
height: $baseline;
.stroke {
stroke: var(--theme-elevation-800);
stroke-width: $style-stroke-width;
}
}

4
src/admin/components/icons/Link/index.tsx
View File

@@ -1,5 +1,7 @@
import React from 'react';
import './index.scss';
const LinkIcon: React.FC = () => (
<svg
viewBox="0 0 24 24"
@@ -7,7 +9,7 @@ const LinkIcon: React.FC = () => (
focusable="false"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
className="graphic link"
className="graphic link icon icon--link"
>
<path
fill="none"