@payloadcms/ui 3.24.0-canary.d22403c → 3.24.0
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/dist/elements/Autosave/index.d.ts.map +1 -1
- package/dist/elements/Autosave/index.js +143 -108
- package/dist/elements/Autosave/index.js.map +1 -1
- package/dist/elements/Button/index.d.ts.map +1 -1
- package/dist/elements/Button/index.js +1 -0
- package/dist/elements/Button/index.js.map +1 -1
- package/dist/elements/Button/index.scss +21 -5
- package/dist/elements/ConfirmationModal/index.d.ts +16 -0
- package/dist/elements/ConfirmationModal/index.d.ts.map +1 -0
- package/dist/elements/ConfirmationModal/index.js +158 -0
- package/dist/elements/ConfirmationModal/index.js.map +1 -0
- package/dist/elements/{GenerateConfirmation → ConfirmationModal}/index.scss +1 -1
- package/dist/elements/DatePicker/DatePicker.d.ts.map +1 -1
- package/dist/elements/DatePicker/DatePicker.js +2 -0
- package/dist/elements/DatePicker/DatePicker.js.map +1 -1
- package/dist/elements/DatePicker/types.d.ts +1 -0
- package/dist/elements/DatePicker/types.d.ts.map +1 -1
- package/dist/elements/DatePicker/types.js.map +1 -1
- package/dist/elements/DeleteDocument/index.d.ts.map +1 -1
- package/dist/elements/DeleteDocument/index.js +31 -79
- package/dist/elements/DeleteDocument/index.js.map +1 -1
- package/dist/elements/DeleteDocument/index.scss +0 -29
- package/dist/elements/DeleteMany/index.d.ts.map +1 -1
- package/dist/elements/DeleteMany/index.js +16 -43
- package/dist/elements/DeleteMany/index.js.map +1 -1
- package/dist/elements/DeleteMany/index.scss +0 -29
- package/dist/elements/DuplicateDocument/index.d.ts +0 -1
- package/dist/elements/DuplicateDocument/index.d.ts.map +1 -1
- package/dist/elements/DuplicateDocument/index.js +25 -54
- package/dist/elements/DuplicateDocument/index.js.map +1 -1
- package/dist/elements/GenerateConfirmation/index.d.ts +1 -2
- package/dist/elements/GenerateConfirmation/index.d.ts.map +1 -1
- package/dist/elements/GenerateConfirmation/index.js +23 -47
- package/dist/elements/GenerateConfirmation/index.js.map +1 -1
- package/dist/elements/LeaveWithoutSaving/index.d.ts +0 -1
- package/dist/elements/LeaveWithoutSaving/index.d.ts.map +1 -1
- package/dist/elements/LeaveWithoutSaving/index.js +56 -113
- package/dist/elements/LeaveWithoutSaving/index.js.map +1 -1
- package/dist/elements/ListControls/index.d.ts +1 -0
- package/dist/elements/ListControls/index.d.ts.map +1 -1
- package/dist/elements/ListControls/index.js +14 -0
- package/dist/elements/ListControls/index.js.map +1 -1
- package/dist/elements/ListControls/index.scss +5 -0
- package/dist/elements/Localizer/LocalizerLabel/index.d.ts.map +1 -1
- package/dist/elements/Localizer/LocalizerLabel/index.js +11 -8
- package/dist/elements/Localizer/LocalizerLabel/index.js.map +1 -1
- package/dist/elements/Localizer/index.d.ts.map +1 -1
- package/dist/elements/Localizer/index.js +2 -0
- package/dist/elements/Localizer/index.js.map +1 -1
- package/dist/elements/Popup/index.d.ts +1 -0
- package/dist/elements/Popup/index.d.ts.map +1 -1
- package/dist/elements/Popup/index.js +2 -0
- package/dist/elements/Popup/index.js.map +1 -1
- package/dist/elements/PublishButton/ScheduleDrawer/index.d.ts +2 -0
- package/dist/elements/PublishButton/ScheduleDrawer/index.d.ts.map +1 -1
- package/dist/elements/PublishButton/ScheduleDrawer/index.js +6 -2
- package/dist/elements/PublishButton/ScheduleDrawer/index.js.map +1 -1
- package/dist/elements/PublishButton/index.d.ts.map +1 -1
- package/dist/elements/PublishButton/index.js +18 -15
- package/dist/elements/PublishButton/index.js.map +1 -1
- package/dist/elements/PublishMany/index.d.ts +0 -1
- package/dist/elements/PublishMany/index.d.ts.map +1 -1
- package/dist/elements/PublishMany/index.js +19 -45
- package/dist/elements/PublishMany/index.js.map +1 -1
- package/dist/elements/RelationshipTable/index.d.ts +7 -2
- package/dist/elements/RelationshipTable/index.d.ts.map +1 -1
- package/dist/elements/RelationshipTable/index.js +69 -23
- package/dist/elements/RelationshipTable/index.js.map +1 -1
- package/dist/elements/RelationshipTable/index.scss +6 -0
- package/dist/elements/Status/index.d.ts.map +1 -1
- package/dist/elements/Status/index.js +173 -154
- package/dist/elements/Status/index.js.map +1 -1
- package/dist/elements/Status/index.scss +0 -41
- package/dist/elements/StayLoggedIn/index.d.ts +0 -1
- package/dist/elements/StayLoggedIn/index.d.ts.map +1 -1
- package/dist/elements/StayLoggedIn/index.js +45 -77
- package/dist/elements/StayLoggedIn/index.js.map +1 -1
- package/dist/elements/TableColumns/buildPolymorphicColumnState.d.ts +20 -0
- package/dist/elements/TableColumns/buildPolymorphicColumnState.d.ts.map +1 -0
- package/dist/elements/TableColumns/buildPolymorphicColumnState.js +200 -0
- package/dist/elements/TableColumns/buildPolymorphicColumnState.js.map +1 -0
- package/dist/elements/TableColumns/index.d.ts +1 -1
- package/dist/elements/TableColumns/index.d.ts.map +1 -1
- package/dist/elements/TableColumns/index.js +4 -3
- package/dist/elements/TableColumns/index.js.map +1 -1
- package/dist/elements/UnpublishMany/index.d.ts +1 -2
- package/dist/elements/UnpublishMany/index.d.ts.map +1 -1
- package/dist/elements/UnpublishMany/index.js +14 -42
- package/dist/elements/UnpublishMany/index.js.map +1 -1
- package/dist/exports/client/CodeEditor-L6GW2VQ6.js.map +0 -1
- package/dist/exports/client/{DatePicker-THCU4KZJ.js → DatePicker-HHQ6TPOW.js} +2 -2
- package/dist/exports/client/{DatePicker-THCU4KZJ.js.map → DatePicker-HHQ6TPOW.js.map} +0 -1
- package/dist/exports/client/chunk-5LKBKI4T.js.map +0 -1
- package/dist/exports/client/{chunk-EG3ZOHFS.js → chunk-IMEQ6NKQ.js} +2 -2
- package/dist/exports/client/{chunk-EG3ZOHFS.js.map → chunk-IMEQ6NKQ.js.map} +3 -4
- package/dist/exports/client/chunk-ZZDNSFEW.js.map +0 -1
- package/dist/exports/client/index.d.ts +2 -0
- package/dist/exports/client/index.d.ts.map +1 -1
- package/dist/exports/client/index.js +23 -23
- package/dist/exports/client/index.js.map +4 -5
- package/dist/fields/DateTime/index.d.ts.map +1 -1
- package/dist/fields/DateTime/index.js +24 -6
- package/dist/fields/DateTime/index.js.map +1 -1
- package/dist/fields/Join/index.d.ts.map +1 -1
- package/dist/fields/Join/index.js +8 -3
- package/dist/fields/Join/index.js.map +1 -1
- package/dist/fields/Select/Input.d.ts.map +1 -1
- package/dist/fields/Select/Input.js +2 -0
- package/dist/fields/Select/Input.js.map +1 -1
- package/dist/fields/Tabs/Tab/index.scss +2 -1
- package/dist/forms/Form/index.d.ts.map +1 -1
- package/dist/forms/Form/index.js +19 -8
- package/dist/forms/Form/index.js.map +1 -1
- package/dist/forms/Form/initContextState.d.ts.map +1 -1
- package/dist/forms/Form/initContextState.js +2 -0
- package/dist/forms/Form/initContextState.js.map +1 -1
- package/dist/forms/Form/types.d.ts +6 -0
- package/dist/forms/Form/types.d.ts.map +1 -1
- package/dist/forms/Form/types.js.map +1 -1
- package/dist/icons/Dots/index.d.ts +7 -0
- package/dist/icons/Dots/index.d.ts.map +1 -0
- package/dist/icons/Dots/index.js +12 -0
- package/dist/icons/Dots/index.js.map +1 -0
- package/dist/icons/Dots/index.scss +27 -0
- package/dist/providers/Selection/index.d.ts.map +1 -1
- package/dist/providers/Selection/index.js +5 -6
- package/dist/providers/Selection/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/utilities/buildTableState.d.ts.map +1 -1
- package/dist/utilities/buildTableState.js +72 -20
- package/dist/utilities/buildTableState.js.map +1 -1
- package/dist/utilities/handleFormStateLocking.d.ts.map +1 -1
- package/dist/utilities/handleFormStateLocking.js +3 -6
- package/dist/utilities/handleFormStateLocking.js.map +1 -1
- package/dist/utilities/renderTable.d.ts +6 -4
- package/dist/utilities/renderTable.d.ts.map +1 -1
- package/dist/utilities/renderTable.js +49 -17
- package/dist/utilities/renderTable.js.map +1 -1
- package/dist/views/Edit/Auth/index.d.ts.map +1 -1
- package/dist/views/Edit/Auth/index.js +56 -55
- package/dist/views/Edit/Auth/index.js.map +1 -1
- package/dist/views/List/index.d.ts.map +1 -1
- package/dist/views/List/index.js +2 -0
- package/dist/views/List/index.js.map +1 -1
- package/package.json +5 -5
- package/dist/elements/DuplicateDocument/index.scss +0 -42
- package/dist/elements/LeaveWithoutSaving/index.scss +0 -39
- package/dist/elements/PublishMany/index.scss +0 -39
- package/dist/elements/StayLoggedIn/index.scss +0 -40
- package/dist/elements/UnpublishMany/index.scss +0 -39
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Autosave/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Autosave/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAIzE,OAAO,KAAwD,MAAM,OAAO,CAAA;AAe5E,OAAO,cAAc,CAAA;AAUrB,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,sBAAsB,CAAA;IACnC,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACpB,qBAAqB,EAAE,MAAM,CAAA;CAC9B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAqTpC,CAAA"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
3
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
4
|
-
import {
|
|
5
|
-
import
|
|
4
|
+
import { dequal } from 'dequal/lite';
|
|
5
|
+
import { reduceFieldsToValues, versionDefaults } from 'payload/shared';
|
|
6
|
+
import React, { useDeferredValue, useEffect, useRef, useState } from 'react';
|
|
6
7
|
import { toast } from 'sonner';
|
|
7
8
|
import { useAllFormFields, useForm, useFormModified, useFormSubmitted } from '../../forms/Form/context.js';
|
|
8
9
|
import { useDebounce } from '../../hooks/useDebounce.js';
|
|
@@ -11,10 +12,11 @@ import { useConfig } from '../../providers/Config/index.js';
|
|
|
11
12
|
import { useDocumentEvents } from '../../providers/DocumentEvents/index.js';
|
|
12
13
|
import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
|
|
13
14
|
import { useLocale } from '../../providers/Locale/index.js';
|
|
14
|
-
import { useTranslation } from '../../providers/Translation/index.js';
|
|
15
15
|
import './index.scss';
|
|
16
|
+
import { useTranslation } from '../../providers/Translation/index.js';
|
|
16
17
|
import { formatTimeToNow } from '../../utilities/formatDate.js';
|
|
17
18
|
import { reduceFieldsToValuesWithValidation } from '../../utilities/reduceFieldsToValuesWithValidation.js';
|
|
19
|
+
import { LeaveWithoutSaving } from '../LeaveWithoutSaving/index.js';
|
|
18
20
|
const baseClass = 'autosave';
|
|
19
21
|
// The minimum time the saving state should be shown
|
|
20
22
|
const minimumAnimationTime = 1000;
|
|
@@ -48,12 +50,13 @@ export const Autosave = ({
|
|
|
48
50
|
} = useDocumentEvents();
|
|
49
51
|
const {
|
|
50
52
|
dispatchFields,
|
|
53
|
+
isValid,
|
|
54
|
+
setIsValid,
|
|
51
55
|
setSubmitted
|
|
52
56
|
} = useForm();
|
|
53
|
-
const submitted = useFormSubmitted();
|
|
54
|
-
const versionsConfig = docConfig?.versions;
|
|
55
57
|
const [fields] = useAllFormFields();
|
|
56
58
|
const modified = useFormModified();
|
|
59
|
+
const submitted = useFormSubmitted();
|
|
57
60
|
const {
|
|
58
61
|
code: locale
|
|
59
62
|
} = useLocale();
|
|
@@ -61,17 +64,23 @@ export const Autosave = ({
|
|
|
61
64
|
i18n,
|
|
62
65
|
t
|
|
63
66
|
} = useTranslation();
|
|
67
|
+
const versionsConfig = docConfig?.versions;
|
|
64
68
|
let interval = versionDefaults.autosaveInterval;
|
|
65
69
|
if (versionsConfig.drafts && versionsConfig.drafts.autosave) {
|
|
66
70
|
interval = versionsConfig.drafts.autosave.interval;
|
|
67
71
|
}
|
|
68
|
-
const
|
|
72
|
+
const validateOnDraft = Boolean(docConfig?.versions?.drafts && docConfig?.versions?.drafts.validate);
|
|
73
|
+
const [_saving, setSaving] = useState(false);
|
|
74
|
+
const saving = useDeferredValue(_saving);
|
|
69
75
|
const debouncedFields = useDebounce(fields, interval);
|
|
70
76
|
const fieldRef = useRef(fields);
|
|
71
77
|
const modifiedRef = useRef(modified);
|
|
72
78
|
const localeRef = useRef(locale);
|
|
73
|
-
|
|
74
|
-
|
|
79
|
+
/**
|
|
80
|
+
* Track the validation internally so Autosave can determine when to run queue processing again
|
|
81
|
+
* Helps us prevent infinite loops when the queue is processing and the form is invalid
|
|
82
|
+
*/
|
|
83
|
+
const isValidRef = useRef(isValid);
|
|
75
84
|
// Store fields in ref so the autosave func
|
|
76
85
|
// can always retrieve the most to date copies
|
|
77
86
|
// after the timeout has executed
|
|
@@ -87,6 +96,13 @@ export const Autosave = ({
|
|
|
87
96
|
if (isProcessingRef.current || queueRef.current.length === 0) {
|
|
88
97
|
return;
|
|
89
98
|
}
|
|
99
|
+
if (!isValidRef.current) {
|
|
100
|
+
// Clear queue so we don't end up in an infinite loop
|
|
101
|
+
queueRef.current = [];
|
|
102
|
+
// Reset internal validation state so queue processing can run again
|
|
103
|
+
isValidRef.current = true;
|
|
104
|
+
return;
|
|
105
|
+
}
|
|
90
106
|
isProcessingRef.current = true;
|
|
91
107
|
const latestAction = queueRef.current[queueRef.current.length - 1];
|
|
92
108
|
queueRef.current = [];
|
|
@@ -99,12 +115,22 @@ export const Autosave = ({
|
|
|
99
115
|
}
|
|
100
116
|
}
|
|
101
117
|
}, []);
|
|
118
|
+
const autosaveTimeoutRef = useRef(null);
|
|
102
119
|
const handleAutosave = useEffectEvent(() => {
|
|
103
|
-
|
|
104
|
-
let autosaveTimeout = undefined;
|
|
120
|
+
autosaveTimeoutRef.current = undefined;
|
|
105
121
|
// We need to log the time in order to figure out if we need to trigger the state off later
|
|
106
122
|
let startTimestamp = undefined;
|
|
107
123
|
let endTimestamp = undefined;
|
|
124
|
+
const hideIndicator = () => {
|
|
125
|
+
// If request was faster than minimum animation time, animate the difference
|
|
126
|
+
if (endTimestamp - startTimestamp < minimumAnimationTime) {
|
|
127
|
+
autosaveTimeoutRef.current = setTimeout(() => {
|
|
128
|
+
setSaving(false);
|
|
129
|
+
}, minimumAnimationTime - (endTimestamp - startTimestamp));
|
|
130
|
+
} else {
|
|
131
|
+
stopAutoSaveIndicator();
|
|
132
|
+
}
|
|
133
|
+
};
|
|
108
134
|
const autosave = async () => {
|
|
109
135
|
if (modified) {
|
|
110
136
|
startTimestamp = new Date().getTime();
|
|
@@ -127,88 +153,86 @@ export const Autosave = ({
|
|
|
127
153
|
const {
|
|
128
154
|
data,
|
|
129
155
|
valid
|
|
130
|
-
} =
|
|
131
|
-
...reduceFieldsToValuesWithValidation(fieldRef.current, true)
|
|
132
|
-
};
|
|
156
|
+
} = reduceFieldsToValuesWithValidation(fieldRef.current, true);
|
|
133
157
|
data._status = 'draft';
|
|
134
158
|
const skipSubmission = submitted && !valid && versionsConfig?.drafts && versionsConfig?.drafts?.validate;
|
|
135
|
-
if (!skipSubmission) {
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
'
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
159
|
+
if (!skipSubmission && isValidRef.current) {
|
|
160
|
+
let res;
|
|
161
|
+
try {
|
|
162
|
+
res = await fetch(url, {
|
|
163
|
+
body: JSON.stringify(data),
|
|
164
|
+
credentials: 'include',
|
|
165
|
+
headers: {
|
|
166
|
+
'Accept-Language': i18n.language,
|
|
167
|
+
'Content-Type': 'application/json'
|
|
168
|
+
},
|
|
169
|
+
method
|
|
170
|
+
});
|
|
171
|
+
} catch (error) {
|
|
172
|
+
// Swallow Error
|
|
173
|
+
}
|
|
174
|
+
const newDate = new Date();
|
|
175
|
+
// We need to log the time in order to figure out if we need to trigger the state off later
|
|
176
|
+
endTimestamp = newDate.getTime();
|
|
177
|
+
if (res.status === 200) {
|
|
178
|
+
setLastUpdateTime(newDate.getTime());
|
|
179
|
+
reportUpdate({
|
|
180
|
+
id,
|
|
181
|
+
entitySlug,
|
|
182
|
+
updatedAt: newDate.toISOString()
|
|
183
|
+
});
|
|
184
|
+
if (!mostRecentVersionIsAutosaved) {
|
|
185
|
+
incrementVersionCount();
|
|
186
|
+
setMostRecentVersionIsAutosaved(true);
|
|
187
|
+
setUnpublishedVersionCount(prev => prev + 1);
|
|
161
188
|
}
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
const document = json?.doc || json?.result;
|
|
197
|
-
// Manually update the data since this function doesn't fire the `submit` function from useForm
|
|
198
|
-
if (document) {
|
|
199
|
-
updateSavedDocumentData(document);
|
|
200
|
-
}
|
|
189
|
+
}
|
|
190
|
+
const json = await res.json();
|
|
191
|
+
if (versionsConfig?.drafts && versionsConfig?.drafts?.validate && json?.errors) {
|
|
192
|
+
if (Array.isArray(json.errors)) {
|
|
193
|
+
const [fieldErrors, nonFieldErrors] = json.errors.reduce(([fieldErrs, nonFieldErrs], err) => {
|
|
194
|
+
const newFieldErrs = [];
|
|
195
|
+
const newNonFieldErrs = [];
|
|
196
|
+
if (err?.message) {
|
|
197
|
+
newNonFieldErrs.push(err);
|
|
198
|
+
}
|
|
199
|
+
if (Array.isArray(err?.data)) {
|
|
200
|
+
err.data.forEach(dataError => {
|
|
201
|
+
if (dataError?.field) {
|
|
202
|
+
newFieldErrs.push(dataError);
|
|
203
|
+
} else {
|
|
204
|
+
newNonFieldErrs.push(dataError);
|
|
205
|
+
}
|
|
206
|
+
});
|
|
207
|
+
}
|
|
208
|
+
return [[...fieldErrs, ...newFieldErrs], [...nonFieldErrs, ...newNonFieldErrs]];
|
|
209
|
+
}, [[], []]);
|
|
210
|
+
dispatchFields({
|
|
211
|
+
type: 'ADD_SERVER_ERRORS',
|
|
212
|
+
errors: fieldErrors
|
|
213
|
+
});
|
|
214
|
+
nonFieldErrors.forEach(err_0 => {
|
|
215
|
+
toast.error(err_0.message || i18n.t('error:unknown'));
|
|
216
|
+
});
|
|
217
|
+
// Set valid to false internally so the queue doesn't process
|
|
218
|
+
isValidRef.current = false;
|
|
219
|
+
setIsValid(false);
|
|
220
|
+
setSubmitted(true);
|
|
221
|
+
hideIndicator();
|
|
222
|
+
return;
|
|
201
223
|
}
|
|
202
|
-
}
|
|
203
|
-
// If
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
224
|
+
} else {
|
|
225
|
+
// If it's not an error then we can update the document data inside the context
|
|
226
|
+
const document = json?.doc || json?.result;
|
|
227
|
+
// Manually update the data since this function doesn't fire the `submit` function from useForm
|
|
228
|
+
if (document) {
|
|
229
|
+
setIsValid(true);
|
|
230
|
+
// Reset internal state allowing the queue to process
|
|
231
|
+
isValidRef.current = true;
|
|
232
|
+
updateSavedDocumentData(document);
|
|
210
233
|
}
|
|
211
|
-
}
|
|
234
|
+
}
|
|
235
|
+
hideIndicator();
|
|
212
236
|
}
|
|
213
237
|
}
|
|
214
238
|
}
|
|
@@ -216,34 +240,45 @@ export const Autosave = ({
|
|
|
216
240
|
};
|
|
217
241
|
queueRef.current.push(autosave);
|
|
218
242
|
void processQueue();
|
|
219
|
-
return {
|
|
220
|
-
abortController,
|
|
221
|
-
autosaveTimeout
|
|
222
|
-
};
|
|
223
243
|
});
|
|
244
|
+
const didMount = useRef(false);
|
|
245
|
+
const previousDebouncedFieldValues = useRef(reduceFieldsToValues(debouncedFields));
|
|
224
246
|
// When debounced fields change, autosave
|
|
225
247
|
useEffect(() => {
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
248
|
+
/**
|
|
249
|
+
* Ensure autosave doesn't run on mount
|
|
250
|
+
*/
|
|
251
|
+
if (!didMount.current) {
|
|
252
|
+
didMount.current = true;
|
|
253
|
+
return;
|
|
254
|
+
}
|
|
255
|
+
/**
|
|
256
|
+
* Ensure autosave only runs if the form data changes, not every time the entire form state changes
|
|
257
|
+
*/
|
|
258
|
+
const debouncedFieldValues = reduceFieldsToValues(debouncedFields);
|
|
259
|
+
if (dequal(debouncedFieldValues, previousDebouncedFieldValues)) {
|
|
260
|
+
return;
|
|
261
|
+
}
|
|
262
|
+
previousDebouncedFieldValues.current = debouncedFieldValues;
|
|
263
|
+
handleAutosave();
|
|
264
|
+
}, [debouncedFields]);
|
|
265
|
+
/**
|
|
266
|
+
* If component unmounts, clear the autosave timeout
|
|
267
|
+
*/
|
|
268
|
+
useEffect(() => {
|
|
230
269
|
return () => {
|
|
231
|
-
|
|
232
|
-
clearTimeout(autosaveTimeout_0);
|
|
233
|
-
}
|
|
234
|
-
if (abortController_0.signal) {
|
|
235
|
-
try {
|
|
236
|
-
abortController_0.abort('Autosave closed early.');
|
|
237
|
-
} catch (error) {
|
|
238
|
-
// swallow error
|
|
239
|
-
}
|
|
240
|
-
}
|
|
241
|
-
setSaving(false);
|
|
270
|
+
stopAutoSaveIndicator();
|
|
242
271
|
};
|
|
243
|
-
}, [
|
|
272
|
+
}, []);
|
|
273
|
+
const stopAutoSaveIndicator = useEffectEvent(() => {
|
|
274
|
+
if (autosaveTimeoutRef.current) {
|
|
275
|
+
clearTimeout(autosaveTimeoutRef.current);
|
|
276
|
+
}
|
|
277
|
+
setSaving(false);
|
|
278
|
+
});
|
|
244
279
|
return /*#__PURE__*/_jsxs("div", {
|
|
245
280
|
className: baseClass,
|
|
246
|
-
children: [saving && t('general:saving'), !saving && Boolean(lastUpdateTime) && /*#__PURE__*/_jsx(React.Fragment, {
|
|
281
|
+
children: [validateOnDraft && !isValid && /*#__PURE__*/_jsx(LeaveWithoutSaving, {}), saving && t('general:saving'), !saving && Boolean(lastUpdateTime) && /*#__PURE__*/_jsx(React.Fragment, {
|
|
247
282
|
children: t('version:lastSavedAgo', {
|
|
248
283
|
distance: formatTimeToNow({
|
|
249
284
|
date: lastUpdateTime,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["versionDefaults","React","useEffect","useRef","useState","toast","useAllFormFields","useForm","useFormModified","useFormSubmitted","useDebounce","useEffectEvent","useConfig","useDocumentEvents","useDocumentInfo","useLocale","useTranslation","formatTimeToNow","reduceFieldsToValuesWithValidation","baseClass","minimumAnimationTime","Autosave","id","collection","global","globalDoc","config","routes","api","serverURL","docConfig","incrementVersionCount","lastUpdateTime","mostRecentVersionIsAutosaved","setLastUpdateTime","setMostRecentVersionIsAutosaved","setUnpublishedVersionCount","updateSavedDocumentData","queueRef","isProcessingRef","reportUpdate","dispatchFields","setSubmitted","submitted","versionsConfig","versions","fields","modified","code","locale","i18n","t","interval","autosaveInterval","drafts","autosave","saving","setSaving","debouncedFields","fieldRef","modifiedRef","localeRef","debouncedRef","current","processQueue","useCallback","length","latestAction","handleAutosave","abortController","AbortController","autosaveTimeout","undefined","startTimestamp","endTimestamp","Date","getTime","url","method","entitySlug","slug","data","valid","_status","skipSubmission","validate","fetch","body","JSON","stringify","credentials","headers","language","signal","then","res","newDate","status","updatedAt","toISOString","prev","json","errors","Array","isArray","fieldErrors","nonFieldErrors","reduce","fieldErrs","nonFieldErrs","err","newFieldErrs","newNonFieldErrs","message","push","forEach","dataError","field","type","error","document","doc","result","setTimeout","clearTimeout","abort","_jsxs","className","Boolean","_jsx","Fragment","distance","date"],"sources":["../../../src/elements/Autosave/index.tsx"],"sourcesContent":["'use client'\n// TODO: abstract the `next/navigation` dependency out from this component\nimport type { ClientCollectionConfig, ClientGlobalConfig } from 'payload'\n\nimport { versionDefaults } from 'payload/shared'\nimport React, { useEffect, useRef, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport {\n useAllFormFields,\n useForm,\n useFormModified,\n useFormSubmitted,\n} from '../../forms/Form/context.js'\nimport { useDebounce } from '../../hooks/useDebounce.js'\nimport { useEffectEvent } from '../../hooks/useEffectEvent.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentEvents } from '../../providers/DocumentEvents/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\nimport { formatTimeToNow } from '../../utilities/formatDate.js'\nimport { reduceFieldsToValuesWithValidation } from '../../utilities/reduceFieldsToValuesWithValidation.js'\n\nconst baseClass = 'autosave'\n// The minimum time the saving state should be shown\nconst minimumAnimationTime = 1000\n\nexport type Props = {\n collection?: ClientCollectionConfig\n global?: ClientGlobalConfig\n id?: number | string\n publishedDocUpdatedAt: string\n}\n\nexport const Autosave: React.FC<Props> = ({ id, collection, global: globalDoc }) => {\n const {\n config: {\n routes: { api },\n serverURL,\n },\n } = useConfig()\n const {\n docConfig,\n incrementVersionCount,\n lastUpdateTime,\n mostRecentVersionIsAutosaved,\n setLastUpdateTime,\n setMostRecentVersionIsAutosaved,\n setUnpublishedVersionCount,\n updateSavedDocumentData,\n } = useDocumentInfo()\n const queueRef = useRef([])\n const isProcessingRef = useRef(false)\n\n const { reportUpdate } = useDocumentEvents()\n const { dispatchFields, setSubmitted } = useForm()\n const submitted = useFormSubmitted()\n const versionsConfig = docConfig?.versions\n\n const [fields] = useAllFormFields()\n const modified = useFormModified()\n const { code: locale } = useLocale()\n const { i18n, t } = useTranslation()\n\n let interval = versionDefaults.autosaveInterval\n if (versionsConfig.drafts && versionsConfig.drafts.autosave) {\n interval = versionsConfig.drafts.autosave.interval\n }\n\n const [saving, setSaving] = useState(false)\n const debouncedFields = useDebounce(fields, interval)\n const fieldRef = useRef(fields)\n const modifiedRef = useRef(modified)\n const localeRef = useRef(locale)\n const debouncedRef = useRef(debouncedFields)\n\n debouncedRef.current = debouncedFields\n\n // Store fields in ref so the autosave func\n // can always retrieve the most to date copies\n // after the timeout has executed\n fieldRef.current = fields\n\n // Store modified in ref so the autosave func\n // can bail out if modified becomes false while\n // timing out during autosave\n modifiedRef.current = modified\n\n // Store locale in ref so the autosave func\n // can always retrieve the most to date locale\n localeRef.current = locale\n\n const processQueue = React.useCallback(async () => {\n if (isProcessingRef.current || queueRef.current.length === 0) {\n return\n }\n\n isProcessingRef.current = true\n const latestAction = queueRef.current[queueRef.current.length - 1]\n queueRef.current = []\n\n try {\n await latestAction()\n } finally {\n isProcessingRef.current = false\n if (queueRef.current.length > 0) {\n await processQueue()\n }\n }\n }, [])\n\n const handleAutosave = useEffectEvent(() => {\n const abortController = new AbortController()\n let autosaveTimeout = undefined\n // We need to log the time in order to figure out if we need to trigger the state off later\n let startTimestamp = undefined\n let endTimestamp = undefined\n\n const autosave = async () => {\n if (modified) {\n startTimestamp = new Date().getTime()\n\n setSaving(true)\n\n let url: string\n let method: string\n let entitySlug: string\n\n if (collection && id) {\n entitySlug = collection.slug\n url = `${serverURL}${api}/${entitySlug}/${id}?draft=true&autosave=true&locale=${localeRef.current}`\n method = 'PATCH'\n }\n\n if (globalDoc) {\n entitySlug = globalDoc.slug\n url = `${serverURL}${api}/globals/${entitySlug}?draft=true&autosave=true&locale=${localeRef.current}`\n method = 'POST'\n }\n\n if (url) {\n if (modifiedRef.current) {\n const { data, valid } = {\n ...reduceFieldsToValuesWithValidation(fieldRef.current, true),\n }\n data._status = 'draft'\n const skipSubmission =\n submitted && !valid && versionsConfig?.drafts && versionsConfig?.drafts?.validate\n\n if (!skipSubmission) {\n await fetch(url, {\n body: JSON.stringify(data),\n credentials: 'include',\n headers: {\n 'Accept-Language': i18n.language,\n 'Content-Type': 'application/json',\n },\n method,\n signal: abortController.signal,\n })\n .then((res) => {\n const newDate = new Date()\n // We need to log the time in order to figure out if we need to trigger the state off later\n endTimestamp = newDate.getTime()\n\n if (res.status === 200) {\n setLastUpdateTime(newDate.getTime())\n\n reportUpdate({\n id,\n entitySlug,\n updatedAt: newDate.toISOString(),\n })\n\n if (!mostRecentVersionIsAutosaved) {\n incrementVersionCount()\n setMostRecentVersionIsAutosaved(true)\n setUnpublishedVersionCount((prev) => prev + 1)\n }\n }\n\n return res.json()\n })\n .then((json) => {\n if (versionsConfig?.drafts && versionsConfig?.drafts?.validate && json?.errors) {\n if (Array.isArray(json.errors)) {\n const [fieldErrors, nonFieldErrors] = json.errors.reduce(\n ([fieldErrs, nonFieldErrs], err) => {\n const newFieldErrs = []\n const newNonFieldErrs = []\n\n if (err?.message) {\n newNonFieldErrs.push(err)\n }\n\n if (Array.isArray(err?.data)) {\n err.data.forEach((dataError) => {\n if (dataError?.field) {\n newFieldErrs.push(dataError)\n } else {\n newNonFieldErrs.push(dataError)\n }\n })\n }\n\n return [\n [...fieldErrs, ...newFieldErrs],\n [...nonFieldErrs, ...newNonFieldErrs],\n ]\n },\n [[], []],\n )\n\n dispatchFields({\n type: 'ADD_SERVER_ERRORS',\n errors: fieldErrors,\n })\n\n nonFieldErrors.forEach((err) => {\n toast.error(err.message || i18n.t('error:unknown'))\n })\n\n setSubmitted(true)\n setSaving(false)\n return\n }\n } else {\n // If it's not an error then we can update the document data inside the context\n const document = json?.doc || json?.result\n\n // Manually update the data since this function doesn't fire the `submit` function from useForm\n if (document) {\n updateSavedDocumentData(document)\n }\n }\n })\n .then(() => {\n // If request was faster than minimum animation time, animate the difference\n if (endTimestamp - startTimestamp < minimumAnimationTime) {\n autosaveTimeout = setTimeout(\n () => {\n setSaving(false)\n },\n minimumAnimationTime - (endTimestamp - startTimestamp),\n )\n } else {\n setSaving(false)\n }\n })\n }\n }\n }\n }\n }\n\n queueRef.current.push(autosave)\n void processQueue()\n\n return { abortController, autosaveTimeout }\n })\n\n // When debounced fields change, autosave\n useEffect(() => {\n const { abortController, autosaveTimeout } = handleAutosave()\n\n return () => {\n if (autosaveTimeout) {\n clearTimeout(autosaveTimeout)\n }\n if (abortController.signal) {\n try {\n abortController.abort('Autosave closed early.')\n } catch (error) {\n // swallow error\n }\n }\n setSaving(false)\n }\n }, [debouncedFields])\n\n return (\n <div className={baseClass}>\n {saving && t('general:saving')}\n {!saving && Boolean(lastUpdateTime) && (\n <React.Fragment>\n {t('version:lastSavedAgo', {\n distance: formatTimeToNow({ date: lastUpdateTime, i18n }),\n })}\n </React.Fragment>\n )}\n </div>\n )\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"index.js","names":["dequal","reduceFieldsToValues","versionDefaults","React","useDeferredValue","useEffect","useRef","useState","toast","useAllFormFields","useForm","useFormModified","useFormSubmitted","useDebounce","useEffectEvent","useConfig","useDocumentEvents","useDocumentInfo","useLocale","useTranslation","formatTimeToNow","reduceFieldsToValuesWithValidation","LeaveWithoutSaving","baseClass","minimumAnimationTime","Autosave","id","collection","global","globalDoc","config","routes","api","serverURL","docConfig","incrementVersionCount","lastUpdateTime","mostRecentVersionIsAutosaved","setLastUpdateTime","setMostRecentVersionIsAutosaved","setUnpublishedVersionCount","updateSavedDocumentData","queueRef","isProcessingRef","reportUpdate","dispatchFields","isValid","setIsValid","setSubmitted","fields","modified","submitted","code","locale","i18n","t","versionsConfig","versions","interval","autosaveInterval","drafts","autosave","validateOnDraft","Boolean","validate","_saving","setSaving","saving","debouncedFields","fieldRef","modifiedRef","localeRef","isValidRef","current","processQueue","useCallback","length","latestAction","autosaveTimeoutRef","handleAutosave","undefined","startTimestamp","endTimestamp","hideIndicator","setTimeout","stopAutoSaveIndicator","Date","getTime","url","method","entitySlug","slug","data","valid","_status","skipSubmission","res","fetch","body","JSON","stringify","credentials","headers","language","error","newDate","status","updatedAt","toISOString","prev","json","errors","Array","isArray","fieldErrors","nonFieldErrors","reduce","fieldErrs","nonFieldErrs","err","newFieldErrs","newNonFieldErrs","message","push","forEach","dataError","field","type","document","doc","result","didMount","previousDebouncedFieldValues","debouncedFieldValues","clearTimeout","_jsxs","className","_jsx","Fragment","distance","date"],"sources":["../../../src/elements/Autosave/index.tsx"],"sourcesContent":["'use client'\n// TODO: abstract the `next/navigation` dependency out from this component\nimport type { ClientCollectionConfig, ClientGlobalConfig } from 'payload'\n\nimport { dequal } from 'dequal/lite'\nimport { reduceFieldsToValues, versionDefaults } from 'payload/shared'\nimport React, { useDeferredValue, useEffect, useRef, useState } from 'react'\nimport { toast } from 'sonner'\n\nimport {\n useAllFormFields,\n useForm,\n useFormModified,\n useFormSubmitted,\n} from '../../forms/Form/context.js'\nimport { useDebounce } from '../../hooks/useDebounce.js'\nimport { useEffectEvent } from '../../hooks/useEffectEvent.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentEvents } from '../../providers/DocumentEvents/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport './index.scss'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { formatTimeToNow } from '../../utilities/formatDate.js'\nimport { reduceFieldsToValuesWithValidation } from '../../utilities/reduceFieldsToValuesWithValidation.js'\nimport { LeaveWithoutSaving } from '../LeaveWithoutSaving/index.js'\n\nconst baseClass = 'autosave'\n// The minimum time the saving state should be shown\nconst minimumAnimationTime = 1000\n\nexport type Props = {\n collection?: ClientCollectionConfig\n global?: ClientGlobalConfig\n id?: number | string\n publishedDocUpdatedAt: string\n}\n\nexport const Autosave: React.FC<Props> = ({ id, collection, global: globalDoc }) => {\n const {\n config: {\n routes: { api },\n serverURL,\n },\n } = useConfig()\n const {\n docConfig,\n incrementVersionCount,\n lastUpdateTime,\n mostRecentVersionIsAutosaved,\n setLastUpdateTime,\n setMostRecentVersionIsAutosaved,\n setUnpublishedVersionCount,\n updateSavedDocumentData,\n } = useDocumentInfo()\n const queueRef = useRef([])\n const isProcessingRef = useRef(false)\n\n const { reportUpdate } = useDocumentEvents()\n const { dispatchFields, isValid, setIsValid, setSubmitted } = useForm()\n\n const [fields] = useAllFormFields()\n const modified = useFormModified()\n const submitted = useFormSubmitted()\n\n const { code: locale } = useLocale()\n const { i18n, t } = useTranslation()\n\n const versionsConfig = docConfig?.versions\n let interval = versionDefaults.autosaveInterval\n\n if (versionsConfig.drafts && versionsConfig.drafts.autosave) {\n interval = versionsConfig.drafts.autosave.interval\n }\n\n const validateOnDraft = Boolean(\n docConfig?.versions?.drafts && docConfig?.versions?.drafts.validate,\n )\n\n const [_saving, setSaving] = useState(false)\n const saving = useDeferredValue(_saving)\n const debouncedFields = useDebounce(fields, interval)\n const fieldRef = useRef(fields)\n const modifiedRef = useRef(modified)\n const localeRef = useRef(locale)\n /**\n * Track the validation internally so Autosave can determine when to run queue processing again\n * Helps us prevent infinite loops when the queue is processing and the form is invalid\n */\n const isValidRef = useRef(isValid)\n\n // Store fields in ref so the autosave func\n // can always retrieve the most to date copies\n // after the timeout has executed\n fieldRef.current = fields\n\n // Store modified in ref so the autosave func\n // can bail out if modified becomes false while\n // timing out during autosave\n modifiedRef.current = modified\n\n // Store locale in ref so the autosave func\n // can always retrieve the most to date locale\n localeRef.current = locale\n\n const processQueue = React.useCallback(async () => {\n if (isProcessingRef.current || queueRef.current.length === 0) {\n return\n }\n\n if (!isValidRef.current) {\n // Clear queue so we don't end up in an infinite loop\n queueRef.current = []\n // Reset internal validation state so queue processing can run again\n isValidRef.current = true\n return\n }\n isProcessingRef.current = true\n\n const latestAction = queueRef.current[queueRef.current.length - 1]\n queueRef.current = []\n\n try {\n await latestAction()\n } finally {\n isProcessingRef.current = false\n if (queueRef.current.length > 0) {\n await processQueue()\n }\n }\n }, [])\n\n const autosaveTimeoutRef = useRef<NodeJS.Timeout | null>(null)\n\n const handleAutosave = useEffectEvent(() => {\n autosaveTimeoutRef.current = undefined\n // We need to log the time in order to figure out if we need to trigger the state off later\n let startTimestamp = undefined\n let endTimestamp = undefined\n\n const hideIndicator = () => {\n // If request was faster than minimum animation time, animate the difference\n if (endTimestamp - startTimestamp < minimumAnimationTime) {\n autosaveTimeoutRef.current = setTimeout(\n () => {\n setSaving(false)\n },\n minimumAnimationTime - (endTimestamp - startTimestamp),\n )\n } else {\n stopAutoSaveIndicator()\n }\n }\n\n const autosave = async () => {\n if (modified) {\n startTimestamp = new Date().getTime()\n\n setSaving(true)\n\n let url: string\n let method: string\n let entitySlug: string\n\n if (collection && id) {\n entitySlug = collection.slug\n url = `${serverURL}${api}/${entitySlug}/${id}?draft=true&autosave=true&locale=${localeRef.current}`\n method = 'PATCH'\n }\n\n if (globalDoc) {\n entitySlug = globalDoc.slug\n url = `${serverURL}${api}/globals/${entitySlug}?draft=true&autosave=true&locale=${localeRef.current}`\n method = 'POST'\n }\n\n if (url) {\n if (modifiedRef.current) {\n const { data, valid } = reduceFieldsToValuesWithValidation(fieldRef.current, true)\n\n data._status = 'draft'\n\n const skipSubmission =\n submitted && !valid && versionsConfig?.drafts && versionsConfig?.drafts?.validate\n\n if (!skipSubmission && isValidRef.current) {\n let res\n try {\n res = await fetch(url, {\n body: JSON.stringify(data),\n credentials: 'include',\n headers: {\n 'Accept-Language': i18n.language,\n 'Content-Type': 'application/json',\n },\n method,\n })\n } catch (error) {\n // Swallow Error\n }\n\n const newDate = new Date()\n // We need to log the time in order to figure out if we need to trigger the state off later\n endTimestamp = newDate.getTime()\n\n if (res.status === 200) {\n setLastUpdateTime(newDate.getTime())\n\n reportUpdate({\n id,\n entitySlug,\n updatedAt: newDate.toISOString(),\n })\n\n if (!mostRecentVersionIsAutosaved) {\n incrementVersionCount()\n setMostRecentVersionIsAutosaved(true)\n setUnpublishedVersionCount((prev) => prev + 1)\n }\n }\n const json = await res.json()\n\n if (versionsConfig?.drafts && versionsConfig?.drafts?.validate && json?.errors) {\n if (Array.isArray(json.errors)) {\n const [fieldErrors, nonFieldErrors] = json.errors.reduce(\n ([fieldErrs, nonFieldErrs], err) => {\n const newFieldErrs = []\n const newNonFieldErrs = []\n\n if (err?.message) {\n newNonFieldErrs.push(err)\n }\n\n if (Array.isArray(err?.data)) {\n err.data.forEach((dataError) => {\n if (dataError?.field) {\n newFieldErrs.push(dataError)\n } else {\n newNonFieldErrs.push(dataError)\n }\n })\n }\n\n return [\n [...fieldErrs, ...newFieldErrs],\n [...nonFieldErrs, ...newNonFieldErrs],\n ]\n },\n [[], []],\n )\n\n dispatchFields({\n type: 'ADD_SERVER_ERRORS',\n errors: fieldErrors,\n })\n\n nonFieldErrors.forEach((err) => {\n toast.error(err.message || i18n.t('error:unknown'))\n })\n\n // Set valid to false internally so the queue doesn't process\n isValidRef.current = false\n setIsValid(false)\n setSubmitted(true)\n hideIndicator()\n return\n }\n } else {\n // If it's not an error then we can update the document data inside the context\n const document = json?.doc || json?.result\n\n // Manually update the data since this function doesn't fire the `submit` function from useForm\n if (document) {\n setIsValid(true)\n\n // Reset internal state allowing the queue to process\n isValidRef.current = true\n updateSavedDocumentData(document)\n }\n }\n\n hideIndicator()\n }\n }\n }\n }\n }\n\n queueRef.current.push(autosave)\n void processQueue()\n })\n\n const didMount = useRef(false)\n const previousDebouncedFieldValues = useRef(reduceFieldsToValues(debouncedFields))\n // When debounced fields change, autosave\n useEffect(() => {\n /**\n * Ensure autosave doesn't run on mount\n */\n if (!didMount.current) {\n didMount.current = true\n return\n }\n\n /**\n * Ensure autosave only runs if the form data changes, not every time the entire form state changes\n */\n const debouncedFieldValues = reduceFieldsToValues(debouncedFields)\n if (dequal(debouncedFieldValues, previousDebouncedFieldValues)) {\n return\n }\n\n previousDebouncedFieldValues.current = debouncedFieldValues\n\n handleAutosave()\n }, [debouncedFields])\n\n /**\n * If component unmounts, clear the autosave timeout\n */\n useEffect(() => {\n return () => {\n stopAutoSaveIndicator()\n }\n }, [])\n\n const stopAutoSaveIndicator = useEffectEvent(() => {\n if (autosaveTimeoutRef.current) {\n clearTimeout(autosaveTimeoutRef.current)\n }\n\n setSaving(false)\n })\n\n return (\n <div className={baseClass}>\n {validateOnDraft && !isValid && <LeaveWithoutSaving />}\n {saving && t('general:saving')}\n {!saving && Boolean(lastUpdateTime) && (\n <React.Fragment>\n {t('version:lastSavedAgo', {\n distance: formatTimeToNow({ date: lastUpdateTime, i18n }),\n })}\n </React.Fragment>\n )}\n </div>\n )\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Button/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmC,MAAM,OAAO,CAAA;AAEvD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAWvC,OAAO,cAAc,CAAA;AAarB,eAAO,MAAM,cAAc;;;;;uBAqB1B,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Button/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmC,MAAM,OAAO,CAAA;AAEvD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAWvC,OAAO,cAAc,CAAA;AAarB,eAAO,MAAM,cAAc;;;;;uBAqB1B,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAoJlC,CAAA"}
|
|
@@ -161,6 +161,7 @@ export const Button = props => {
|
|
|
161
161
|
className: disabled && !enableSubMenu ? `${baseClass}--popup-disabled` : '',
|
|
162
162
|
disabled: disabled && !enableSubMenu,
|
|
163
163
|
horizontalAlign: "right",
|
|
164
|
+
id: `${id}-popup`,
|
|
164
165
|
noBackground: true,
|
|
165
166
|
render: ({
|
|
166
167
|
close
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","Fragment","isValidElement","ChevronIcon","EditIcon","LinkIcon","PlusIcon","SwapIcon","XIcon","Link","Popup","Tooltip","icons","chevron","edit","link","plus","swap","x","baseClass","ButtonContents","children","icon","showTooltip","tooltip","BuiltInIcon","_jsxs","_jsx","className","show","Button","props","id","type","ariaLabel","buttonStyle","disabled","el","enableSubMenu","iconPosition","iconStyle","newTab","onClick","onMouseDown","ref","round","size","SubMenuPopupContent","to","url","setShowTooltip","useState","classes","filter","Boolean","join","handleClick","event","preventDefault","styleClasses","buttonProps","undefined","onPointerEnter","onPointerLeave","rel","target","buttonElement","prefetch","href","Tag","button","buttonSize","horizontalAlign","noBackground","render","close","verticalAlign"],"sources":["../../../src/elements/Button/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment, isValidElement } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { EditIcon } from '../../icons/Edit/index.js'\nimport { LinkIcon } from '../../icons/Link/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { SwapIcon } from '../../icons/Swap/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { Link } from '../Link/index.js'\nimport { Popup } from '../Popup/index.js'\nimport { Tooltip } from '../Tooltip/index.js'\nimport './index.scss'\n\nconst icons = {\n chevron: ChevronIcon,\n edit: EditIcon,\n link: LinkIcon,\n plus: PlusIcon,\n swap: SwapIcon,\n x: XIcon,\n}\n\nconst baseClass = 'btn'\n\nexport const ButtonContents = ({ children, icon, showTooltip, tooltip }) => {\n const BuiltInIcon = icons[icon]\n\n return (\n <Fragment>\n {tooltip && (\n <Tooltip className={`${baseClass}__tooltip`} show={showTooltip}>\n {tooltip}\n </Tooltip>\n )}\n <span className={`${baseClass}__content`}>\n {children && <span className={`${baseClass}__label`}>{children}</span>}\n {icon && (\n <span className={`${baseClass}__icon`}>\n {isValidElement(icon) && icon}\n {BuiltInIcon && <BuiltInIcon />}\n </span>\n )}\n </span>\n </Fragment>\n )\n}\n\nexport const Button: React.FC<Props> = (props) => {\n const {\n id,\n type = 'button',\n 'aria-label': ariaLabel,\n buttonStyle = 'primary',\n children,\n className,\n disabled,\n el = 'button',\n enableSubMenu,\n icon,\n iconPosition = 'right',\n iconStyle = 'without-border',\n newTab,\n onClick,\n onMouseDown,\n ref,\n round,\n size = 'medium',\n SubMenuPopupContent,\n to,\n tooltip,\n url,\n } = props\n\n const [showTooltip, setShowTooltip] = React.useState(false)\n\n const classes = [\n baseClass,\n className && className,\n icon && `${baseClass}--icon`,\n iconStyle && `${baseClass}--icon-style-${iconStyle}`,\n icon && !children && `${baseClass}--icon-only`,\n size && `${baseClass}--size-${size}`,\n icon && iconPosition && `${baseClass}--icon-position-${iconPosition}`,\n tooltip && `${baseClass}--has-tooltip`,\n !SubMenuPopupContent && `${baseClass}--withoutPopup`,\n ]\n .filter(Boolean)\n .join(' ')\n\n function handleClick(event) {\n setShowTooltip(false)\n if (type !== 'submit' && onClick) {\n event.preventDefault()\n }\n if (onClick) {\n onClick(event)\n }\n }\n\n const styleClasses = [\n buttonStyle && `${baseClass}--style-${buttonStyle}`,\n disabled && `${baseClass}--disabled`,\n round && `${baseClass}--round`,\n SubMenuPopupContent ? `${baseClass}--withPopup` : `${baseClass}--withoutPopup`,\n ]\n .filter(Boolean)\n .join(' ')\n\n const buttonProps = {\n id,\n type,\n 'aria-disabled': disabled,\n 'aria-label': ariaLabel,\n className: !SubMenuPopupContent ? [classes, styleClasses].join(' ') : classes,\n disabled,\n onClick: !disabled ? handleClick : undefined,\n onMouseDown: !disabled ? onMouseDown : undefined,\n onPointerEnter: tooltip ? () => setShowTooltip(true) : undefined,\n onPointerLeave: tooltip ? () => setShowTooltip(false) : undefined,\n rel: newTab ? 'noopener noreferrer' : undefined,\n target: newTab ? '_blank' : undefined,\n }\n\n let buttonElement\n let prefetch\n\n switch (el) {\n case 'anchor':\n buttonElement = (\n <a\n {...buttonProps}\n href={!disabled ? url : undefined}\n ref={ref as React.RefObject<HTMLAnchorElement>}\n >\n <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n {children}\n </ButtonContents>\n </a>\n )\n break\n\n case 'link':\n if (disabled) {\n buttonElement = (\n <div {...buttonProps}>\n <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n {children}\n </ButtonContents>\n </div>\n )\n }\n\n buttonElement = (\n <Link {...buttonProps} href={to || url} prefetch={prefetch}>\n <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n {children}\n </ButtonContents>\n </Link>\n )\n\n break\n\n default:\n const Tag = el // eslint-disable-line no-case-declarations\n\n buttonElement = (\n <Tag ref={ref} type=\"submit\" {...buttonProps}>\n <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n {children}\n </ButtonContents>\n </Tag>\n )\n break\n }\n if (SubMenuPopupContent) {\n return (\n <div className={styleClasses}>\n {buttonElement}\n <Popup\n button={<ChevronIcon />}\n buttonSize={size}\n className={disabled && !enableSubMenu ? `${baseClass}--popup-disabled` : ''}\n disabled={disabled && !enableSubMenu}\n horizontalAlign=\"right\"\n noBackground\n render={({ close }) => SubMenuPopupContent({ close: () => close() })}\n size=\"large\"\n verticalAlign=\"bottom\"\n />\n </div>\n )\n }\n\n return buttonElement\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","Fragment","isValidElement","ChevronIcon","EditIcon","LinkIcon","PlusIcon","SwapIcon","XIcon","Link","Popup","Tooltip","icons","chevron","edit","link","plus","swap","x","baseClass","ButtonContents","children","icon","showTooltip","tooltip","BuiltInIcon","_jsxs","_jsx","className","show","Button","props","id","type","ariaLabel","buttonStyle","disabled","el","enableSubMenu","iconPosition","iconStyle","newTab","onClick","onMouseDown","ref","round","size","SubMenuPopupContent","to","url","setShowTooltip","useState","classes","filter","Boolean","join","handleClick","event","preventDefault","styleClasses","buttonProps","undefined","onPointerEnter","onPointerLeave","rel","target","buttonElement","prefetch","href","Tag","button","buttonSize","horizontalAlign","noBackground","render","close","verticalAlign"],"sources":["../../../src/elements/Button/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment, isValidElement } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { EditIcon } from '../../icons/Edit/index.js'\nimport { LinkIcon } from '../../icons/Link/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { SwapIcon } from '../../icons/Swap/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { Link } from '../Link/index.js'\nimport { Popup } from '../Popup/index.js'\nimport { Tooltip } from '../Tooltip/index.js'\nimport './index.scss'\n\nconst icons = {\n chevron: ChevronIcon,\n edit: EditIcon,\n link: LinkIcon,\n plus: PlusIcon,\n swap: SwapIcon,\n x: XIcon,\n}\n\nconst baseClass = 'btn'\n\nexport const ButtonContents = ({ children, icon, showTooltip, tooltip }) => {\n const BuiltInIcon = icons[icon]\n\n return (\n <Fragment>\n {tooltip && (\n <Tooltip className={`${baseClass}__tooltip`} show={showTooltip}>\n {tooltip}\n </Tooltip>\n )}\n <span className={`${baseClass}__content`}>\n {children && <span className={`${baseClass}__label`}>{children}</span>}\n {icon && (\n <span className={`${baseClass}__icon`}>\n {isValidElement(icon) && icon}\n {BuiltInIcon && <BuiltInIcon />}\n </span>\n )}\n </span>\n </Fragment>\n )\n}\n\nexport const Button: React.FC<Props> = (props) => {\n const {\n id,\n type = 'button',\n 'aria-label': ariaLabel,\n buttonStyle = 'primary',\n children,\n className,\n disabled,\n el = 'button',\n enableSubMenu,\n icon,\n iconPosition = 'right',\n iconStyle = 'without-border',\n newTab,\n onClick,\n onMouseDown,\n ref,\n round,\n size = 'medium',\n SubMenuPopupContent,\n to,\n tooltip,\n url,\n } = props\n\n const [showTooltip, setShowTooltip] = React.useState(false)\n\n const classes = [\n baseClass,\n className && className,\n icon && `${baseClass}--icon`,\n iconStyle && `${baseClass}--icon-style-${iconStyle}`,\n icon && !children && `${baseClass}--icon-only`,\n size && `${baseClass}--size-${size}`,\n icon && iconPosition && `${baseClass}--icon-position-${iconPosition}`,\n tooltip && `${baseClass}--has-tooltip`,\n !SubMenuPopupContent && `${baseClass}--withoutPopup`,\n ]\n .filter(Boolean)\n .join(' ')\n\n function handleClick(event) {\n setShowTooltip(false)\n if (type !== 'submit' && onClick) {\n event.preventDefault()\n }\n if (onClick) {\n onClick(event)\n }\n }\n\n const styleClasses = [\n buttonStyle && `${baseClass}--style-${buttonStyle}`,\n disabled && `${baseClass}--disabled`,\n round && `${baseClass}--round`,\n SubMenuPopupContent ? `${baseClass}--withPopup` : `${baseClass}--withoutPopup`,\n ]\n .filter(Boolean)\n .join(' ')\n\n const buttonProps = {\n id,\n type,\n 'aria-disabled': disabled,\n 'aria-label': ariaLabel,\n className: !SubMenuPopupContent ? [classes, styleClasses].join(' ') : classes,\n disabled,\n onClick: !disabled ? handleClick : undefined,\n onMouseDown: !disabled ? onMouseDown : undefined,\n onPointerEnter: tooltip ? () => setShowTooltip(true) : undefined,\n onPointerLeave: tooltip ? () => setShowTooltip(false) : undefined,\n rel: newTab ? 'noopener noreferrer' : undefined,\n target: newTab ? '_blank' : undefined,\n }\n\n let buttonElement\n let prefetch\n\n switch (el) {\n case 'anchor':\n buttonElement = (\n <a\n {...buttonProps}\n href={!disabled ? url : undefined}\n ref={ref as React.RefObject<HTMLAnchorElement>}\n >\n <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n {children}\n </ButtonContents>\n </a>\n )\n break\n\n case 'link':\n if (disabled) {\n buttonElement = (\n <div {...buttonProps}>\n <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n {children}\n </ButtonContents>\n </div>\n )\n }\n\n buttonElement = (\n <Link {...buttonProps} href={to || url} prefetch={prefetch}>\n <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n {children}\n </ButtonContents>\n </Link>\n )\n\n break\n\n default:\n const Tag = el // eslint-disable-line no-case-declarations\n\n buttonElement = (\n <Tag ref={ref} type=\"submit\" {...buttonProps}>\n <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n {children}\n </ButtonContents>\n </Tag>\n )\n break\n }\n if (SubMenuPopupContent) {\n return (\n <div className={styleClasses}>\n {buttonElement}\n <Popup\n button={<ChevronIcon />}\n buttonSize={size}\n className={disabled && !enableSubMenu ? `${baseClass}--popup-disabled` : ''}\n disabled={disabled && !enableSubMenu}\n horizontalAlign=\"right\"\n id={`${id}-popup`}\n noBackground\n render={({ close }) => SubMenuPopupContent({ close: () => close() })}\n size=\"large\"\n verticalAlign=\"bottom\"\n />\n </div>\n )\n }\n\n return buttonElement\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -68,11 +68,20 @@
|
|
|
68
68
|
background-color: var(--bg-color);
|
|
69
69
|
box-shadow: var(--box-shadow);
|
|
70
70
|
border-radius: $style-radius-m;
|
|
71
|
-
border-left: 1px solid var(--theme-bg);
|
|
72
|
-
border-top-left-radius: 0;
|
|
73
|
-
border-bottom-left-radius: 0;
|
|
74
71
|
align-items: center;
|
|
75
72
|
|
|
73
|
+
html:not([dir='RTL']) & {
|
|
74
|
+
border-left: 1px solid var(--theme-bg);
|
|
75
|
+
border-top-left-radius: 0;
|
|
76
|
+
border-bottom-left-radius: 0;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
html[dir='RTL'] & {
|
|
80
|
+
border-right: 1px solid var(--theme-bg);
|
|
81
|
+
border-top-right-radius: 0;
|
|
82
|
+
border-bottom-right-radius: 0;
|
|
83
|
+
}
|
|
84
|
+
|
|
76
85
|
&:hover,
|
|
77
86
|
&:focus-visible,
|
|
78
87
|
&:focus,
|
|
@@ -236,8 +245,15 @@
|
|
|
236
245
|
}
|
|
237
246
|
|
|
238
247
|
&--withPopup .btn {
|
|
239
|
-
|
|
240
|
-
|
|
248
|
+
html:not([dir='RTL']) & {
|
|
249
|
+
border-top-right-radius: 0;
|
|
250
|
+
border-bottom-right-radius: 0;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
html[dir='RTL'] & {
|
|
254
|
+
border-top-left-radius: 0;
|
|
255
|
+
border-bottom-left-radius: 0;
|
|
256
|
+
}
|
|
241
257
|
}
|
|
242
258
|
|
|
243
259
|
&--style-icon-label,
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './index.scss';
|
|
3
|
+
export type OnCancel = () => void;
|
|
4
|
+
export type ConfirmationModalProps = {
|
|
5
|
+
body: React.ReactNode;
|
|
6
|
+
cancelLabel?: string;
|
|
7
|
+
className?: string;
|
|
8
|
+
confirmingLabel?: string;
|
|
9
|
+
confirmLabel?: string;
|
|
10
|
+
heading: React.ReactNode;
|
|
11
|
+
modalSlug: string;
|
|
12
|
+
onCancel?: OnCancel;
|
|
13
|
+
onConfirm: () => Promise<void> | void;
|
|
14
|
+
};
|
|
15
|
+
export declare function ConfirmationModal(props: ConfirmationModalProps): React.JSX.Element;
|
|
16
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ConfirmationModal/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAM1C,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAA;AAEjC,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;CACtC,CAAA;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,qBA4E9D"}
|