payload 1.0.34 → 1.0.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.js +1 -0
- package/CHANGELOG.md +16 -0
- package/components/index.js +2 -2
- package/dist/admin/components/elements/DeleteDocument/index.js +6 -6
- package/dist/admin/components/elements/DuplicateDocument/index.js +4 -4
- package/dist/admin/components/elements/GenerateConfirmation/index.js +7 -5
- package/dist/admin/components/elements/Popup/index.js +14 -13
- package/dist/admin/components/elements/Status/index.js +14 -9
- package/dist/admin/components/forms/Error/index.scss +2 -1
- package/dist/admin/components/forms/Label/index.scss +3 -1
- package/dist/admin/components/forms/field-types/RichText/RichText.d.ts +2 -2
- package/dist/admin/components/forms/field-types/RichText/RichText.js +3 -6
- package/dist/admin/components/forms/field-types/RichText/elements/indent/index.js +0 -3
- package/dist/admin/components/forms/field-types/RichText/elements/index.d.ts +6 -3
- package/dist/admin/components/forms/field-types/RichText/elements/link/Button.d.ts +4 -0
- package/dist/admin/components/forms/field-types/RichText/elements/link/Button.js +105 -0
- package/dist/admin/components/forms/field-types/RichText/elements/link/Element.d.ts +9 -0
- package/dist/admin/components/forms/field-types/RichText/elements/link/Element.js +120 -0
- package/dist/admin/components/forms/field-types/RichText/elements/link/Modal/baseFields.d.ts +3 -0
- package/dist/admin/components/forms/field-types/RichText/elements/link/Modal/baseFields.js +56 -0
- package/dist/admin/components/forms/field-types/RichText/elements/link/Modal/index.d.ts +4 -0
- package/dist/admin/components/forms/field-types/RichText/elements/link/Modal/index.js +22 -0
- package/dist/admin/components/forms/field-types/RichText/elements/link/Modal/index.scss +29 -0
- package/dist/admin/components/forms/field-types/RichText/elements/link/Modal/types.d.ts +9 -0
- package/dist/admin/components/forms/field-types/RichText/elements/link/Modal/types.js +1 -0
- package/dist/admin/components/forms/field-types/RichText/elements/link/index.d.ts +6 -5
- package/dist/admin/components/forms/field-types/RichText/elements/link/index.js +4 -67
- package/dist/admin/components/forms/field-types/RichText/elements/link/index.scss +36 -63
- package/dist/admin/components/forms/field-types/RichText/elements/link/shared.d.ts +1 -0
- package/dist/admin/components/forms/field-types/RichText/elements/link/shared.js +1 -0
- package/dist/admin/components/forms/field-types/RichText/elements/link/utilities.d.ts +1 -1
- package/dist/admin/components/forms/field-types/RichText/elements/link/utilities.js +13 -23
- package/dist/admin/components/forms/field-types/RichText/elements/relationship/Button/index.js +6 -10
- package/dist/admin/components/forms/field-types/RichText/elements/toggle.js +0 -3
- package/dist/admin/components/forms/field-types/RichText/elements/upload/Button/index.js +8 -12
- package/dist/admin/components/forms/field-types/RichText/elements/upload/Element/EditModal/index.js +2 -3
- package/dist/admin/components/forms/field-types/RichText/elements/upload/Element/index.js +6 -6
- package/dist/admin/components/forms/field-types/RichText/types.d.ts +0 -4
- package/dist/admin/components/forms/field-types/Text/Input.d.ts +2 -0
- package/dist/admin/components/forms/field-types/Text/Input.js +2 -3
- package/dist/admin/components/forms/field-types/Text/index.js +2 -2
- package/dist/admin/components/forms/field-types/Text/types.d.ts +3 -0
- package/dist/admin/components/forms/field-types/Upload/Add/index.js +4 -4
- package/dist/admin/components/forms/field-types/Upload/Input.js +3 -3
- package/dist/admin/components/forms/field-types/Upload/SelectExisting/index.js +6 -6
- package/dist/admin/components/modals/StayLoggedIn/index.js +4 -3
- package/dist/admin/components/utilities/Auth/index.js +1 -1
- package/dist/admin/components/views/Version/Restore/index.js +3 -3
- package/dist/admin/hooks/useThrottledEffect.js +15 -10
- package/dist/admin/index.js +1 -1
- package/dist/admin/scss/vars.scss +2 -2
- package/dist/auth/types.d.ts +1 -1
- package/dist/fields/config/schema.js +4 -1
- package/dist/fields/config/types.d.ts +3 -0
- package/dist/fields/config/types.js +1 -1
- package/dist/fields/hooks/afterRead/promise.js +3 -3
- package/dist/fields/richText/recurseNestedFields.js +3 -3
- package/dist/fields/richText/{relationshipPromise.d.ts → richTextRelationshipPromise.d.ts} +0 -0
- package/dist/fields/richText/richTextRelationshipPromise.js +104 -0
- package/dist/graphql/schema/buildObjectType.js +3 -3
- package/dist/uploads/getBaseFields.js +3 -3
- package/docs/fields/rich-text.mdx +7 -0
- package/package.json +2 -2
- package/dist/fields/richText/relationshipPromise.js +0 -71
|
@@ -1,32 +1,22 @@
|
|
|
1
1
|
import { Transforms, Range, Element } from 'slate';
|
|
2
|
-
import isElementActive from '../isActive';
|
|
3
2
|
export const unwrapLink = (editor) => {
|
|
4
3
|
Transforms.unwrapNodes(editor, { match: (n) => Element.isElement(n) && n.type === 'link' });
|
|
5
4
|
};
|
|
6
|
-
export const wrapLink = (editor
|
|
7
|
-
const { selection
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
5
|
+
export const wrapLink = (editor) => {
|
|
6
|
+
const { selection } = editor;
|
|
7
|
+
const isCollapsed = selection && Range.isCollapsed(selection);
|
|
8
|
+
const link = {
|
|
9
|
+
type: 'link',
|
|
10
|
+
url: undefined,
|
|
11
|
+
newTab: false,
|
|
12
|
+
children: isCollapsed ? [{ text: '' }] : [],
|
|
13
|
+
};
|
|
14
|
+
if (isCollapsed) {
|
|
15
|
+
Transforms.insertNodes(editor, link);
|
|
13
16
|
}
|
|
14
17
|
else {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
const link = {
|
|
18
|
-
type: 'link',
|
|
19
|
-
url,
|
|
20
|
-
newTab,
|
|
21
|
-
children: isCollapsed ? [{ text: url }] : [],
|
|
22
|
-
};
|
|
23
|
-
if (isCollapsed) {
|
|
24
|
-
Transforms.insertNodes(editor, link);
|
|
25
|
-
}
|
|
26
|
-
else {
|
|
27
|
-
Transforms.wrapNodes(editor, link, { split: true });
|
|
28
|
-
Transforms.collapse(editor, { edge: 'end' });
|
|
29
|
-
}
|
|
18
|
+
Transforms.wrapNodes(editor, link, { split: true });
|
|
19
|
+
Transforms.collapse(editor, { edge: 'end' });
|
|
30
20
|
}
|
|
31
21
|
};
|
|
32
22
|
export const withLinks = (incomingEditor) => {
|
package/dist/admin/components/forms/field-types/RichText/elements/relationship/Button/index.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React, { Fragment, useCallback, useEffect, useState } from 'react';
|
|
2
2
|
import { Modal, useModal } from '@faceless-ui/modal';
|
|
3
|
-
import { Transforms } from 'slate';
|
|
4
3
|
import { ReactEditor, useSlate } from 'slate-react';
|
|
5
4
|
import { useConfig } from '../../../../../../utilities/Config';
|
|
6
5
|
import ElementButton from '../../Button';
|
|
@@ -26,14 +25,11 @@ const insertRelationship = (editor, { value, relationTo }) => {
|
|
|
26
25
|
text,
|
|
27
26
|
],
|
|
28
27
|
};
|
|
29
|
-
if (editor.blurSelection) {
|
|
30
|
-
Transforms.select(editor, editor.blurSelection);
|
|
31
|
-
}
|
|
32
28
|
injectVoidElement(editor, relationship);
|
|
33
29
|
ReactEditor.focus(editor);
|
|
34
30
|
};
|
|
35
31
|
const RelationshipButton = ({ path }) => {
|
|
36
|
-
const {
|
|
32
|
+
const { toggleModal } = useModal();
|
|
37
33
|
const editor = useSlate();
|
|
38
34
|
const { serverURL, routes: { api }, collections } = useConfig();
|
|
39
35
|
const [renderModal, setRenderModal] = useState(false);
|
|
@@ -45,15 +41,15 @@ const RelationshipButton = ({ path }) => {
|
|
|
45
41
|
const res = await requests.get(`${serverURL}${api}/${relationTo}/${value}?depth=0`);
|
|
46
42
|
const json = await res.json();
|
|
47
43
|
insertRelationship(editor, { value: { id: json.id }, relationTo });
|
|
48
|
-
|
|
44
|
+
toggleModal(modalSlug);
|
|
49
45
|
setRenderModal(false);
|
|
50
46
|
setLoading(false);
|
|
51
|
-
}, [editor,
|
|
47
|
+
}, [editor, toggleModal, modalSlug, api, serverURL]);
|
|
52
48
|
useEffect(() => {
|
|
53
49
|
if (renderModal) {
|
|
54
|
-
|
|
50
|
+
toggleModal(modalSlug);
|
|
55
51
|
}
|
|
56
|
-
}, [renderModal,
|
|
52
|
+
}, [renderModal, toggleModal, modalSlug]);
|
|
57
53
|
if (!hasEnabledCollections)
|
|
58
54
|
return null;
|
|
59
55
|
return (React.createElement(Fragment, null,
|
|
@@ -64,7 +60,7 @@ const RelationshipButton = ({ path }) => {
|
|
|
64
60
|
React.createElement("header", { className: `${baseClass}__header` },
|
|
65
61
|
React.createElement("h3", null, "Add Relationship"),
|
|
66
62
|
React.createElement(Button, { buttonStyle: "none", onClick: () => {
|
|
67
|
-
|
|
63
|
+
toggleModal(modalSlug);
|
|
68
64
|
setRenderModal(false);
|
|
69
65
|
} },
|
|
70
66
|
React.createElement(X, null))),
|
|
@@ -12,9 +12,6 @@ const toggleElement = (editor, format) => {
|
|
|
12
12
|
else if (isList) {
|
|
13
13
|
type = 'li';
|
|
14
14
|
}
|
|
15
|
-
if (editor.blurSelection) {
|
|
16
|
-
Transforms.select(editor, editor.blurSelection);
|
|
17
|
-
}
|
|
18
15
|
Transforms.unwrapNodes(editor, {
|
|
19
16
|
match: (n) => Element.isElement(n) && listTypes.includes(n.type),
|
|
20
17
|
split: true,
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React, { Fragment, useEffect, useState } from 'react';
|
|
2
2
|
import { Modal, useModal } from '@faceless-ui/modal';
|
|
3
|
-
import { Transforms } from 'slate';
|
|
4
3
|
import { ReactEditor, useSlate } from 'slate-react';
|
|
5
4
|
import { useConfig } from '../../../../../../utilities/Config';
|
|
6
5
|
import ElementButton from '../../Button';
|
|
@@ -30,15 +29,12 @@ const insertUpload = (editor, { value, relationTo }) => {
|
|
|
30
29
|
text,
|
|
31
30
|
],
|
|
32
31
|
};
|
|
33
|
-
if (editor.blurSelection) {
|
|
34
|
-
Transforms.select(editor, editor.blurSelection);
|
|
35
|
-
}
|
|
36
32
|
injectVoidElement(editor, upload);
|
|
37
33
|
ReactEditor.focus(editor);
|
|
38
34
|
};
|
|
39
35
|
const UploadButton = ({ path }) => {
|
|
40
|
-
var _a, _b;
|
|
41
|
-
const {
|
|
36
|
+
var _a, _b, _c;
|
|
37
|
+
const { toggleModal, modalState } = useModal();
|
|
42
38
|
const editor = useSlate();
|
|
43
39
|
const { serverURL, routes: { api }, collections } = useConfig();
|
|
44
40
|
const [availableCollections] = useState(() => collections.filter(({ admin: { enableRichTextRelationship }, upload }) => (Boolean(upload) && enableRichTextRelationship)));
|
|
@@ -58,7 +54,7 @@ const UploadButton = ({ path }) => {
|
|
|
58
54
|
const [page, setPage] = useState(null);
|
|
59
55
|
const modalSlug = `${path}-add-upload`;
|
|
60
56
|
const moreThanOneAvailableCollection = availableCollections.length > 1;
|
|
61
|
-
const isOpen =
|
|
57
|
+
const isOpen = (_a = modalState[modalSlug]) === null || _a === void 0 ? void 0 : _a.isOpen;
|
|
62
58
|
// If modal is open, get active page of upload gallery
|
|
63
59
|
const apiURL = isOpen ? `${serverURL}${api}/${modalCollection.slug}` : null;
|
|
64
60
|
const [{ data }, { setParams }] = usePayloadAPI(apiURL, {});
|
|
@@ -69,9 +65,9 @@ const UploadButton = ({ path }) => {
|
|
|
69
65
|
}, [modalCollection]);
|
|
70
66
|
useEffect(() => {
|
|
71
67
|
if (renderModal) {
|
|
72
|
-
|
|
68
|
+
toggleModal(modalSlug);
|
|
73
69
|
}
|
|
74
|
-
}, [renderModal,
|
|
70
|
+
}, [renderModal, toggleModal, modalSlug]);
|
|
75
71
|
useEffect(() => {
|
|
76
72
|
const params = {};
|
|
77
73
|
if (page)
|
|
@@ -102,7 +98,7 @@ const UploadButton = ({ path }) => {
|
|
|
102
98
|
' ',
|
|
103
99
|
modalCollection.labels.singular),
|
|
104
100
|
React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick: () => {
|
|
105
|
-
|
|
101
|
+
toggleModal(modalSlug);
|
|
106
102
|
setRenderModal(false);
|
|
107
103
|
} })),
|
|
108
104
|
moreThanOneAvailableCollection && (React.createElement("div", { className: `${baseModalClass}__select-collection-wrap` },
|
|
@@ -120,7 +116,7 @@ const UploadButton = ({ path }) => {
|
|
|
120
116
|
relationTo: modalCollection.slug,
|
|
121
117
|
});
|
|
122
118
|
setRenderModal(false);
|
|
123
|
-
|
|
119
|
+
toggleModal(modalSlug);
|
|
124
120
|
} }),
|
|
125
121
|
React.createElement("div", { className: `${baseModalClass}__page-controls` },
|
|
126
122
|
React.createElement(Paginator, { limit: data.limit, totalPages: data.totalPages, page: data.page, hasPrevPage: data.hasPrevPage, hasNextPage: data.hasNextPage, prevPage: data.prevPage, nextPage: data.nextPage, numberOfNeighbors: 1, onChange: setPage, disableHistoryChange: true }),
|
|
@@ -133,6 +129,6 @@ const UploadButton = ({ path }) => {
|
|
|
133
129
|
"of",
|
|
134
130
|
' ',
|
|
135
131
|
data.totalDocs),
|
|
136
|
-
React.createElement(PerPage, { limits: (
|
|
132
|
+
React.createElement(PerPage, { limits: (_c = (_b = modalCollection === null || modalCollection === void 0 ? void 0 : modalCollection.admin) === null || _b === void 0 ? void 0 : _b.pagination) === null || _c === void 0 ? void 0 : _c.limits, limit: limit, modifySearchParams: false, handleChange: setLimit }))))))))));
|
|
137
133
|
};
|
|
138
134
|
export default UploadButton;
|
package/dist/admin/components/forms/field-types/RichText/elements/upload/Element/EditModal/index.js
CHANGED
|
@@ -9,7 +9,6 @@ import Button from '../../../../../../../elements/Button';
|
|
|
9
9
|
import RenderFields from '../../../../../../RenderFields';
|
|
10
10
|
import fieldTypes from '../../../../..';
|
|
11
11
|
import Form from '../../../../../../Form';
|
|
12
|
-
import reduceFieldsToValues from '../../../../../../Form/reduceFieldsToValues';
|
|
13
12
|
import Submit from '../../../../../../Submit';
|
|
14
13
|
import { useLocale } from '../../../../../../../utilities/Locale';
|
|
15
14
|
import './index.scss';
|
|
@@ -19,9 +18,9 @@ export const EditModal = ({ slug, closeModal, relatedCollectionConfig, fieldSche
|
|
|
19
18
|
const [initialState, setInitialState] = useState({});
|
|
20
19
|
const { user } = useAuth();
|
|
21
20
|
const locale = useLocale();
|
|
22
|
-
const handleUpdateEditData = useCallback((
|
|
21
|
+
const handleUpdateEditData = useCallback((_, data) => {
|
|
23
22
|
const newNode = {
|
|
24
|
-
fields:
|
|
23
|
+
fields: data,
|
|
25
24
|
};
|
|
26
25
|
const elementPath = ReactEditor.findPath(editor, element);
|
|
27
26
|
Transforms.setNodes(editor, newNode, { at: elementPath });
|
|
@@ -17,7 +17,7 @@ const initialParams = {
|
|
|
17
17
|
const Element = ({ attributes, children, element, path, fieldProps }) => {
|
|
18
18
|
var _a, _b, _c, _d;
|
|
19
19
|
const { relationTo, value } = element;
|
|
20
|
-
const {
|
|
20
|
+
const { toggleModal } = useModal();
|
|
21
21
|
const { collections, serverURL, routes: { api } } = useConfig();
|
|
22
22
|
const [modalToRender, setModalToRender] = useState(undefined);
|
|
23
23
|
const [relatedCollection, setRelatedCollection] = useState(() => collections.find((coll) => coll.slug === relationTo));
|
|
@@ -33,14 +33,14 @@ const Element = ({ attributes, children, element, path, fieldProps }) => {
|
|
|
33
33
|
Transforms.removeNodes(editor, { at: elementPath });
|
|
34
34
|
}, [editor, element]);
|
|
35
35
|
const closeModal = useCallback(() => {
|
|
36
|
-
|
|
36
|
+
toggleModal(modalSlug);
|
|
37
37
|
setModalToRender(null);
|
|
38
|
-
}, [
|
|
38
|
+
}, [toggleModal, modalSlug]);
|
|
39
39
|
useEffect(() => {
|
|
40
|
-
if (modalToRender
|
|
41
|
-
|
|
40
|
+
if (modalToRender) {
|
|
41
|
+
toggleModal(modalSlug);
|
|
42
42
|
}
|
|
43
|
-
}, [modalToRender,
|
|
43
|
+
}, [modalToRender, toggleModal, modalSlug]);
|
|
44
44
|
const fieldSchema = (_d = (_c = (_b = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.admin) === null || _a === void 0 ? void 0 : _a.upload) === null || _b === void 0 ? void 0 : _b.collections) === null || _c === void 0 ? void 0 : _c[relatedCollection.slug]) === null || _d === void 0 ? void 0 : _d.fields;
|
|
45
45
|
return (React.createElement("div", { className: [
|
|
46
46
|
baseClass,
|
|
@@ -1,8 +1,4 @@
|
|
|
1
|
-
import { BaseEditor, Selection } from 'slate';
|
|
2
1
|
import { RichTextField } from '../../../../../fields/config/types';
|
|
3
2
|
export declare type Props = Omit<RichTextField, 'type'> & {
|
|
4
3
|
path?: string;
|
|
5
4
|
};
|
|
6
|
-
export interface BlurSelectionEditor extends BaseEditor {
|
|
7
|
-
blurSelection?: Selection;
|
|
8
|
-
}
|
|
@@ -11,10 +11,12 @@ export declare type TextInputProps = Omit<TextField, 'type'> & {
|
|
|
11
11
|
value?: string;
|
|
12
12
|
description?: Description;
|
|
13
13
|
onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
14
|
+
onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
|
|
14
15
|
placeholder?: string;
|
|
15
16
|
style?: React.CSSProperties;
|
|
16
17
|
className?: string;
|
|
17
18
|
width?: string;
|
|
19
|
+
inputRef?: React.MutableRefObject<HTMLInputElement>;
|
|
18
20
|
};
|
|
19
21
|
declare const TextInput: React.FC<TextInputProps>;
|
|
20
22
|
export default TextInput;
|
|
@@ -2,10 +2,9 @@ import React from 'react';
|
|
|
2
2
|
import Label from '../../Label';
|
|
3
3
|
import Error from '../../Error';
|
|
4
4
|
import FieldDescription from '../../FieldDescription';
|
|
5
|
-
// import { FieldType } from '../../useField/types';
|
|
6
5
|
import './index.scss';
|
|
7
6
|
const TextInput = (props) => {
|
|
8
|
-
const { showError, errorMessage, placeholder, readOnly, path, label, required, value, onChange, description, style, className, width, } = props;
|
|
7
|
+
const { showError, errorMessage, placeholder, readOnly, path, label, required, value, onChange, onKeyDown, description, style, className, width, inputRef, } = props;
|
|
9
8
|
const classes = [
|
|
10
9
|
'field-type',
|
|
11
10
|
'text',
|
|
@@ -19,7 +18,7 @@ const TextInput = (props) => {
|
|
|
19
18
|
} },
|
|
20
19
|
React.createElement(Error, { showError: showError, message: errorMessage }),
|
|
21
20
|
React.createElement(Label, { htmlFor: `field-${path.replace(/\./gi, '__')}`, label: label, required: required }),
|
|
22
|
-
React.createElement("input", { id: `field-${path.replace(/\./gi, '__')}`, value: value || '', onChange: onChange, disabled: readOnly, placeholder: placeholder, type: "text", name: path }),
|
|
21
|
+
React.createElement("input", { ref: inputRef, id: `field-${path.replace(/\./gi, '__')}`, value: value || '', onChange: onChange, onKeyDown: onKeyDown, disabled: readOnly, placeholder: placeholder, type: "text", name: path }),
|
|
23
22
|
React.createElement(FieldDescription, { value: value, description: description })));
|
|
24
23
|
};
|
|
25
24
|
export default TextInput;
|
|
@@ -4,7 +4,7 @@ import withCondition from '../../withCondition';
|
|
|
4
4
|
import { text } from '../../../../../fields/validations';
|
|
5
5
|
import TextInput from './Input';
|
|
6
6
|
const Text = (props) => {
|
|
7
|
-
const { path: pathFromProps, name, required, validate = text, label, minLength, maxLength, admin: { placeholder, readOnly, style, className, width, description, condition, } = {}, } = props;
|
|
7
|
+
const { path: pathFromProps, name, required, validate = text, label, minLength, maxLength, admin: { placeholder, readOnly, style, className, width, description, condition, } = {}, inputRef, } = props;
|
|
8
8
|
const path = pathFromProps || name;
|
|
9
9
|
const memoizedValidate = useCallback((value, options) => {
|
|
10
10
|
return validate(value, { ...options, minLength, maxLength, required });
|
|
@@ -18,6 +18,6 @@ const Text = (props) => {
|
|
|
18
18
|
const { value, showError, setValue, errorMessage, } = field;
|
|
19
19
|
return (React.createElement(TextInput, { path: path, name: name, onChange: (e) => {
|
|
20
20
|
setValue(e.target.value);
|
|
21
|
-
}, showError: showError, errorMessage: errorMessage, required: required, label: label, value: value, placeholder: placeholder, readOnly: readOnly, style: style, className: className, width: width, description: description }));
|
|
21
|
+
}, showError: showError, errorMessage: errorMessage, required: required, label: label, value: value, placeholder: placeholder, readOnly: readOnly, style: style, className: className, width: width, description: description, inputRef: inputRef }));
|
|
22
22
|
};
|
|
23
23
|
export default withCondition(Text);
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { TextField } from '../../../../../fields/config/types';
|
|
2
3
|
export declare type Props = Omit<TextField, 'type'> & {
|
|
3
4
|
path?: string;
|
|
5
|
+
inputRef?: React.MutableRefObject<HTMLInputElement>;
|
|
6
|
+
onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
|
|
4
7
|
};
|
|
@@ -16,11 +16,11 @@ const AddUploadModal = (props) => {
|
|
|
16
16
|
const { collection, collection: { admin: { description, } = {}, } = {}, slug, fieldTypes, setValue, } = props;
|
|
17
17
|
const { permissions } = useAuth();
|
|
18
18
|
const { serverURL, routes: { api } } = useConfig();
|
|
19
|
-
const {
|
|
19
|
+
const { toggleModal } = useModal();
|
|
20
20
|
const onSuccess = useCallback((json) => {
|
|
21
|
-
|
|
21
|
+
toggleModal(slug);
|
|
22
22
|
setValue(json.doc);
|
|
23
|
-
}, [
|
|
23
|
+
}, [toggleModal, slug, setValue]);
|
|
24
24
|
const classes = [
|
|
25
25
|
baseClass,
|
|
26
26
|
].filter(Boolean).join(' ');
|
|
@@ -35,7 +35,7 @@ const AddUploadModal = (props) => {
|
|
|
35
35
|
' ',
|
|
36
36
|
collection.labels.singular),
|
|
37
37
|
React.createElement(FormSubmit, null, "Save"),
|
|
38
|
-
React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick:
|
|
38
|
+
React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick: () => toggleModal(slug) })),
|
|
39
39
|
description && (React.createElement("div", { className: `${baseClass}__sub-header` },
|
|
40
40
|
React.createElement(ViewDescription, { description: description })))),
|
|
41
41
|
React.createElement(Upload, { collection: collection }),
|
|
@@ -11,7 +11,7 @@ import './index.scss';
|
|
|
11
11
|
const baseClass = 'upload';
|
|
12
12
|
const UploadInput = (props) => {
|
|
13
13
|
const { path, required, readOnly, style, className, width, description, label, relationTo, fieldTypes, value, onChange, showError, serverURL = 'http://localhost:3000', api = '/api', collection, errorMessage, filterOptions, } = props;
|
|
14
|
-
const {
|
|
14
|
+
const { toggleModal } = useModal();
|
|
15
15
|
const addModalSlug = `${path}-add`;
|
|
16
16
|
const selectExistingModalSlug = `${path}-select-existing`;
|
|
17
17
|
const [file, setFile] = useState(undefined);
|
|
@@ -59,13 +59,13 @@ const UploadInput = (props) => {
|
|
|
59
59
|
} })),
|
|
60
60
|
(!file || missingFile) && (React.createElement("div", { className: `${baseClass}__wrap` },
|
|
61
61
|
React.createElement(Button, { buttonStyle: "secondary", onClick: () => {
|
|
62
|
-
|
|
62
|
+
toggleModal(addModalSlug);
|
|
63
63
|
} },
|
|
64
64
|
"Upload new",
|
|
65
65
|
' ',
|
|
66
66
|
collection.labels.singular),
|
|
67
67
|
React.createElement(Button, { buttonStyle: "secondary", onClick: () => {
|
|
68
|
-
|
|
68
|
+
toggleModal(selectExistingModalSlug);
|
|
69
69
|
} }, "Choose from existing"))),
|
|
70
70
|
React.createElement(AddModal, { ...{
|
|
71
71
|
collection,
|
|
@@ -18,13 +18,13 @@ import ViewDescription from '../../../../elements/ViewDescription';
|
|
|
18
18
|
import './index.scss';
|
|
19
19
|
const baseClass = 'select-existing-upload-modal';
|
|
20
20
|
const SelectExistingUploadModal = (props) => {
|
|
21
|
-
var _a, _b;
|
|
21
|
+
var _a, _b, _c;
|
|
22
22
|
const { setValue, collection, collection: { slug: collectionSlug, admin: { description, pagination: { defaultLimit, }, } = {}, } = {}, slug: modalSlug, path, filterOptions, } = props;
|
|
23
23
|
const { serverURL, routes: { api } } = useConfig();
|
|
24
24
|
const { id } = useDocumentInfo();
|
|
25
25
|
const { user } = useAuth();
|
|
26
26
|
const { getData, getSiblingData } = useWatchForm();
|
|
27
|
-
const {
|
|
27
|
+
const { toggleModal, modalState } = useModal();
|
|
28
28
|
const [fields] = useState(() => formatFields(collection));
|
|
29
29
|
const [limit, setLimit] = useState(defaultLimit);
|
|
30
30
|
const [sort, setSort] = useState(null);
|
|
@@ -34,7 +34,7 @@ const SelectExistingUploadModal = (props) => {
|
|
|
34
34
|
const classes = [
|
|
35
35
|
baseClass,
|
|
36
36
|
].filter(Boolean).join(' ');
|
|
37
|
-
const isOpen =
|
|
37
|
+
const isOpen = (_a = modalState[modalSlug]) === null || _a === void 0 ? void 0 : _a.isOpen;
|
|
38
38
|
const apiURL = isOpen ? `${serverURL}${api}/${collectionSlug}` : null;
|
|
39
39
|
const [{ data }, { setParams }] = usePayloadAPI(apiURL, {});
|
|
40
40
|
useEffect(() => {
|
|
@@ -72,7 +72,7 @@ const SelectExistingUploadModal = (props) => {
|
|
|
72
72
|
"Select existing",
|
|
73
73
|
' ',
|
|
74
74
|
collection.labels.singular),
|
|
75
|
-
React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick:
|
|
75
|
+
React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick: () => toggleModal(modalSlug) })),
|
|
76
76
|
description && (React.createElement("div", { className: `${baseClass}__sub-header` },
|
|
77
77
|
React.createElement(ViewDescription, { description: description })))),
|
|
78
78
|
React.createElement(ListControls, { collection: {
|
|
@@ -81,7 +81,7 @@ const SelectExistingUploadModal = (props) => {
|
|
|
81
81
|
}, enableColumns: false, enableSort: true, modifySearchQuery: false, handleSortChange: setSort, handleWhereChange: setWhere }),
|
|
82
82
|
React.createElement(UploadGallery, { docs: data === null || data === void 0 ? void 0 : data.docs, collection: collection, onCardClick: (doc) => {
|
|
83
83
|
setValue(doc);
|
|
84
|
-
|
|
84
|
+
toggleModal(modalSlug);
|
|
85
85
|
} }),
|
|
86
86
|
React.createElement("div", { className: `${baseClass}__page-controls` },
|
|
87
87
|
React.createElement(Paginator, { limit: data.limit, totalPages: data.totalPages, page: data.page, hasPrevPage: data.hasPrevPage, hasNextPage: data.hasNextPage, prevPage: data.prevPage, nextPage: data.nextPage, numberOfNeighbors: 1, onChange: setPage, disableHistoryChange: true }),
|
|
@@ -94,6 +94,6 @@ const SelectExistingUploadModal = (props) => {
|
|
|
94
94
|
"of",
|
|
95
95
|
' ',
|
|
96
96
|
data.totalDocs),
|
|
97
|
-
React.createElement(PerPage, { limits: (
|
|
97
|
+
React.createElement(PerPage, { limits: (_c = (_b = collection === null || collection === void 0 ? void 0 : collection.admin) === null || _b === void 0 ? void 0 : _b.pagination) === null || _c === void 0 ? void 0 : _c.limits, limit: limit, modifySearchParams: false, handleChange: setLimit }))))))));
|
|
98
98
|
};
|
|
99
99
|
export default SelectExistingUploadModal;
|
|
@@ -6,23 +6,24 @@ import MinimalTemplate from '../../templates/Minimal';
|
|
|
6
6
|
import Button from '../../elements/Button';
|
|
7
7
|
import './index.scss';
|
|
8
8
|
const baseClass = 'stay-logged-in';
|
|
9
|
+
const modalSlug = 'stay-logged-in';
|
|
9
10
|
const StayLoggedInModal = (props) => {
|
|
10
11
|
const { refreshCookie } = props;
|
|
11
12
|
const history = useHistory();
|
|
12
13
|
const { routes: { admin } } = useConfig();
|
|
13
|
-
const {
|
|
14
|
+
const { toggleModal } = useModal();
|
|
14
15
|
return (React.createElement(Modal, { className: baseClass, slug: "stay-logged-in" },
|
|
15
16
|
React.createElement(MinimalTemplate, { className: `${baseClass}__template` },
|
|
16
17
|
React.createElement("h1", null, "Stay logged in"),
|
|
17
18
|
React.createElement("p", null, "You haven't been active in a little while and will shortly be automatically logged out for your own security. Would you like to stay logged in?"),
|
|
18
19
|
React.createElement("div", { className: `${baseClass}__actions` },
|
|
19
20
|
React.createElement(Button, { buttonStyle: "secondary", onClick: () => {
|
|
20
|
-
|
|
21
|
+
toggleModal(modalSlug);
|
|
21
22
|
history.push(`${admin}/logout`);
|
|
22
23
|
} }, "Log out"),
|
|
23
24
|
React.createElement(Button, { onClick: () => {
|
|
24
25
|
refreshCookie();
|
|
25
|
-
|
|
26
|
+
toggleModal(modalSlug);
|
|
26
27
|
} }, "Stay logged in")))));
|
|
27
28
|
};
|
|
28
29
|
export default StayLoggedInModal;
|
|
@@ -16,7 +16,7 @@ export const AuthProvider = ({ children }) => {
|
|
|
16
16
|
const { admin: { user: userSlug, }, serverURL, routes: { admin, api, }, } = config;
|
|
17
17
|
const exp = user === null || user === void 0 ? void 0 : user.exp;
|
|
18
18
|
const [permissions, setPermissions] = useState();
|
|
19
|
-
const {
|
|
19
|
+
const { openModal, closeAllModals } = useModal();
|
|
20
20
|
const [lastLocationChange, setLastLocationChange] = useState(0);
|
|
21
21
|
const debouncedLocationChange = useDebounce(lastLocationChange, 10000);
|
|
22
22
|
const id = user === null || user === void 0 ? void 0 : user.id;
|
|
@@ -11,7 +11,7 @@ const modalSlug = 'restore-version';
|
|
|
11
11
|
const Restore = ({ collection, global, className, versionID, originalDocID, versionDate }) => {
|
|
12
12
|
const { serverURL, routes: { api, admin } } = useConfig();
|
|
13
13
|
const history = useHistory();
|
|
14
|
-
const {
|
|
14
|
+
const { toggleModal } = useModal();
|
|
15
15
|
const [processing, setProcessing] = useState(false);
|
|
16
16
|
let fetchURL = `${serverURL}${api}`;
|
|
17
17
|
let redirectURL;
|
|
@@ -39,12 +39,12 @@ const Restore = ({ collection, global, className, versionID, originalDocID, vers
|
|
|
39
39
|
}
|
|
40
40
|
}, [history, fetchURL, redirectURL]);
|
|
41
41
|
return (React.createElement(Fragment, null,
|
|
42
|
-
React.createElement(Pill, { onClick: () =>
|
|
42
|
+
React.createElement(Pill, { onClick: () => toggleModal(modalSlug), className: [baseClass, className].filter(Boolean).join(' ') }, "Restore this version"),
|
|
43
43
|
React.createElement(Modal, { slug: modalSlug, className: `${baseClass}__modal` },
|
|
44
44
|
React.createElement(MinimalTemplate, { className: `${baseClass}__modal-template` },
|
|
45
45
|
React.createElement("h1", null, "Confirm version restoration"),
|
|
46
46
|
React.createElement("p", null, restoreMessage),
|
|
47
|
-
React.createElement(Button, { buttonStyle: "secondary", type: "button", onClick: processing ? undefined : () =>
|
|
47
|
+
React.createElement(Button, { buttonStyle: "secondary", type: "button", onClick: processing ? undefined : () => toggleModal(modalSlug) }, "Cancel"),
|
|
48
48
|
React.createElement(Button, { onClick: processing ? undefined : handleRestore }, processing ? 'Restoring...' : 'Confirm')))));
|
|
49
49
|
};
|
|
50
50
|
export default Restore;
|
|
@@ -1,17 +1,22 @@
|
|
|
1
1
|
/* eslint-disable react-hooks/exhaustive-deps */
|
|
2
2
|
import { useEffect, useRef } from 'react';
|
|
3
3
|
const useThrottledEffect = (callback, delay, deps = []) => {
|
|
4
|
-
const lastRan = useRef(
|
|
4
|
+
const lastRan = useRef(null);
|
|
5
5
|
useEffect(() => {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
6
|
+
if (lastRan) {
|
|
7
|
+
const handler = setTimeout(() => {
|
|
8
|
+
if (Date.now() - lastRan.current >= delay) {
|
|
9
|
+
callback();
|
|
10
|
+
lastRan.current = Date.now();
|
|
11
|
+
}
|
|
12
|
+
}, delay - (Date.now() - lastRan.current));
|
|
13
|
+
return () => {
|
|
14
|
+
clearTimeout(handler);
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
callback();
|
|
18
|
+
lastRan.current = Date.now();
|
|
19
|
+
return () => null;
|
|
15
20
|
}, [delay, ...deps]);
|
|
16
21
|
};
|
|
17
22
|
export default useThrottledEffect;
|
package/dist/admin/index.js
CHANGED
|
@@ -28,7 +28,7 @@ const Index = () => (React.createElement(React.Fragment, null,
|
|
|
28
28
|
} },
|
|
29
29
|
React.createElement(ScrollInfoProvider, null,
|
|
30
30
|
React.createElement(Router, null,
|
|
31
|
-
React.createElement(ModalProvider, { classPrefix: "payload", zIndex: 50 },
|
|
31
|
+
React.createElement(ModalProvider, { classPrefix: "payload", zIndex: 50, transTime: 0 },
|
|
32
32
|
React.createElement(AuthProvider, null,
|
|
33
33
|
React.createElement(PreferencesProvider, null,
|
|
34
34
|
React.createElement(ThemeProvider, null,
|
|
@@ -129,7 +129,7 @@ $focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
|
|
|
129
129
|
|
|
130
130
|
&:before {
|
|
131
131
|
background: $color;
|
|
132
|
-
opacity: .
|
|
132
|
+
opacity: .85;
|
|
133
133
|
}
|
|
134
134
|
|
|
135
135
|
&:after {
|
|
@@ -181,4 +181,4 @@ $focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
|
|
|
181
181
|
border-color: var(--theme-elevation-150);
|
|
182
182
|
}
|
|
183
183
|
}
|
|
184
|
-
}
|
|
184
|
+
}
|
package/dist/auth/types.d.ts
CHANGED
|
@@ -74,7 +74,7 @@ declare type GenerateForgotPasswordEmailSubject = (args?: {
|
|
|
74
74
|
token?: string;
|
|
75
75
|
user?: any;
|
|
76
76
|
}) => Promise<string> | string;
|
|
77
|
-
declare type AuthStrategy = (ctx: Payload) => Strategy | Strategy;
|
|
77
|
+
declare type AuthStrategy = ((ctx: Payload) => Strategy) | Strategy;
|
|
78
78
|
export interface IncomingAuthType {
|
|
79
79
|
tokenExpiration?: number;
|
|
80
80
|
verify?: boolean | {
|