@payloadcms/ui 3.0.0-beta.90 → 3.0.0-beta.91
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/AddNewRelation/index.d.ts.map +1 -1
- package/dist/elements/AddNewRelation/index.js +1 -1
- package/dist/elements/AddNewRelation/index.js.map +1 -1
- package/dist/elements/AddNewRelation/index.scss +14 -4
- package/dist/elements/AppHeader/index.js +41 -80
- package/dist/elements/AppHeader/index.js.map +1 -1
- package/dist/elements/Autosave/index.js +148 -231
- package/dist/elements/Autosave/index.js.map +1 -1
- package/dist/elements/Button/index.js +86 -218
- package/dist/elements/Button/index.js.map +1 -1
- package/dist/elements/Collapsible/index.js +44 -62
- package/dist/elements/Collapsible/index.js.map +1 -1
- package/dist/elements/Collapsible/index.scss +15 -28
- package/dist/elements/CopyToClipboard/index.js +20 -54
- package/dist/elements/CopyToClipboard/index.js.map +1 -1
- package/dist/elements/Dropzone/index.js +59 -119
- package/dist/elements/Dropzone/index.js.map +1 -1
- package/dist/elements/EditMany/index.js +124 -230
- package/dist/elements/EditMany/index.js.map +1 -1
- package/dist/elements/EditUpload/index.js +133 -206
- package/dist/elements/EditUpload/index.js.map +1 -1
- package/dist/elements/ListControls/index.js +82 -188
- package/dist/elements/ListControls/index.js.map +1 -1
- package/dist/elements/Nav/context.js +47 -83
- package/dist/elements/Nav/context.js.map +1 -1
- package/dist/elements/SaveButton/index.js +30 -81
- package/dist/elements/SaveButton/index.js.map +1 -1
- package/dist/elements/SaveDraftButton/index.js +54 -116
- package/dist/elements/SaveDraftButton/index.js.map +1 -1
- package/dist/elements/SearchFilter/index.js +21 -77
- package/dist/elements/SearchFilter/index.js.map +1 -1
- package/dist/elements/Upload/index.js +130 -280
- package/dist/elements/Upload/index.js.map +1 -1
- package/dist/exports/client/{CodeEditor-C4FLUUO7.js → CodeEditor-MTP455NO.js} +2 -2
- package/dist/exports/client/chunk-NJHSEGFB.js +14 -0
- package/dist/exports/client/{chunk-UGBVRIVY.js.map → chunk-NJHSEGFB.js.map} +2 -2
- package/dist/exports/client/index.d.ts +1 -1
- package/dist/exports/client/index.d.ts.map +1 -1
- package/dist/exports/client/index.js +19 -19
- package/dist/exports/client/index.js.map +3 -3
- package/dist/fields/Relationship/index.js +318 -504
- package/dist/fields/Relationship/index.js.map +1 -1
- package/dist/fields/Upload/HasMany/index.d.ts.map +1 -1
- package/dist/fields/Upload/HasMany/index.js +192 -422
- package/dist/fields/Upload/HasMany/index.js.map +1 -1
- package/dist/fields/Upload/HasMany/index.scss +19 -1
- package/dist/forms/Submit/index.js +12 -28
- package/dist/forms/Submit/index.js.map +1 -1
- package/dist/hooks/useDelay.js +15 -48
- package/dist/hooks/useDelay.js.map +1 -1
- package/dist/hooks/useDelayedRender.js +32 -71
- package/dist/hooks/useDelayedRender.js.map +1 -1
- package/dist/hooks/useIntersect.js +14 -20
- package/dist/hooks/useIntersect.js.map +1 -1
- package/dist/providers/Preferences/index.js +1 -3
- package/dist/providers/Preferences/index.js.map +1 -1
- package/dist/providers/Selection/index.js +102 -190
- package/dist/providers/Selection/index.js.map +1 -1
- package/dist/scss/app.scss +6 -6
- package/dist/scss/type.scss +4 -4
- package/dist/styles.css +1 -1
- package/package.json +8 -8
- package/dist/exports/client/chunk-UGBVRIVY.js +0 -14
- /package/dist/exports/client/{CodeEditor-C4FLUUO7.js.map → CodeEditor-MTP455NO.js.map} +0 -0
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
import { c as _c } from "react/compiler-runtime";
|
|
4
3
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
4
|
import React, { useRef } from 'react';
|
|
6
5
|
import { useForm, useFormModified } from '../../forms/Form/context.js';
|
|
@@ -10,11 +9,9 @@ import { RenderComponent } from '../../providers/Config/RenderComponent.js';
|
|
|
10
9
|
import { useEditDepth } from '../../providers/EditDepth/index.js';
|
|
11
10
|
import { useOperation } from '../../providers/Operation/index.js';
|
|
12
11
|
import { useTranslation } from '../../providers/Translation/index.js';
|
|
13
|
-
export const DefaultSaveButton =
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
label: labelProp
|
|
17
|
-
} = t0;
|
|
12
|
+
export const DefaultSaveButton = ({
|
|
13
|
+
label: labelProp
|
|
14
|
+
}) => {
|
|
18
15
|
const {
|
|
19
16
|
t
|
|
20
17
|
} = useTranslation();
|
|
@@ -22,84 +19,36 @@ export const DefaultSaveButton = t0 => {
|
|
|
22
19
|
submit
|
|
23
20
|
} = useForm();
|
|
24
21
|
const modified = useFormModified();
|
|
25
|
-
|
|
26
|
-
if ($[0] !== labelProp || $[1] !== t) {
|
|
27
|
-
t1 = labelProp || t("general:save");
|
|
28
|
-
$[0] = labelProp;
|
|
29
|
-
$[1] = t;
|
|
30
|
-
$[2] = t1;
|
|
31
|
-
} else {
|
|
32
|
-
t1 = $[2];
|
|
33
|
-
}
|
|
34
|
-
const label = t1;
|
|
22
|
+
const label = labelProp || t('general:save');
|
|
35
23
|
const ref = useRef(null);
|
|
36
24
|
const editDepth = useEditDepth();
|
|
37
25
|
const operation = useOperation();
|
|
38
|
-
const forceDisable = operation ===
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
if (ref?.current) {
|
|
65
|
-
ref.current.click();
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
$[6] = forceDisable;
|
|
69
|
-
$[7] = ref;
|
|
70
|
-
$[8] = t4;
|
|
71
|
-
} else {
|
|
72
|
-
t4 = $[8];
|
|
73
|
-
}
|
|
74
|
-
useHotkey(t3, t4);
|
|
75
|
-
let t5;
|
|
76
|
-
if ($[9] !== submit) {
|
|
77
|
-
t5 = () => void submit();
|
|
78
|
-
$[9] = submit;
|
|
79
|
-
$[10] = t5;
|
|
80
|
-
} else {
|
|
81
|
-
t5 = $[10];
|
|
82
|
-
}
|
|
83
|
-
let t6;
|
|
84
|
-
if ($[11] !== forceDisable || $[12] !== t5 || $[13] !== ref || $[14] !== label) {
|
|
85
|
-
t6 = _jsx(FormSubmit, {
|
|
86
|
-
buttonId: "action-save",
|
|
87
|
-
disabled: forceDisable,
|
|
88
|
-
onClick: t5,
|
|
89
|
-
ref,
|
|
90
|
-
size: "medium",
|
|
91
|
-
type: "button",
|
|
92
|
-
children: label
|
|
93
|
-
});
|
|
94
|
-
$[11] = forceDisable;
|
|
95
|
-
$[12] = t5;
|
|
96
|
-
$[13] = ref;
|
|
97
|
-
$[14] = label;
|
|
98
|
-
$[15] = t6;
|
|
99
|
-
} else {
|
|
100
|
-
t6 = $[15];
|
|
101
|
-
}
|
|
102
|
-
return t6;
|
|
26
|
+
const forceDisable = operation === 'update' && !modified;
|
|
27
|
+
useHotkey({
|
|
28
|
+
cmdCtrlKey: true,
|
|
29
|
+
editDepth,
|
|
30
|
+
keyCodes: ['s']
|
|
31
|
+
}, e => {
|
|
32
|
+
if (forceDisable) {
|
|
33
|
+
// absorb the event
|
|
34
|
+
}
|
|
35
|
+
e.preventDefault();
|
|
36
|
+
e.stopPropagation();
|
|
37
|
+
if (ref?.current) {
|
|
38
|
+
ref.current.click();
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
return /*#__PURE__*/_jsx(FormSubmit, {
|
|
42
|
+
buttonId: "action-save",
|
|
43
|
+
disabled: forceDisable,
|
|
44
|
+
onClick: () => {
|
|
45
|
+
return void submit();
|
|
46
|
+
},
|
|
47
|
+
ref: ref,
|
|
48
|
+
size: "medium",
|
|
49
|
+
type: "button",
|
|
50
|
+
children: label
|
|
51
|
+
});
|
|
103
52
|
};
|
|
104
53
|
export const SaveButton = ({
|
|
105
54
|
CustomComponent
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useRef","useForm","useFormModified","FormSubmit","useHotkey","RenderComponent","useEditDepth","useOperation","useTranslation","DefaultSaveButton","label","labelProp","t","submit","modified","ref","editDepth","operation","forceDisable","cmdCtrlKey","keyCodes","e","preventDefault","stopPropagation","current","click","_jsx","buttonId","disabled","onClick","size","type","SaveButton","CustomComponent","mappedComponent"],"sources":["../../../src/elements/SaveButton/index.tsx"],"sourcesContent":["'use client'\n\nimport type { MappedComponent } from 'payload'\n\nimport React, { useRef } from 'react'\n\nimport { useForm, useFormModified } from '../../forms/Form/context.js'\nimport { FormSubmit } from '../../forms/Submit/index.js'\nimport { useHotkey } from '../../hooks/useHotkey.js'\nimport { RenderComponent } from '../../providers/Config/RenderComponent.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useOperation } from '../../providers/Operation/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\n\nexport const DefaultSaveButton: React.FC<{ label?: string }> = ({ label: labelProp }) => {\n const { t } = useTranslation()\n const { submit } = useForm()\n const modified = useFormModified()\n const label = labelProp || t('general:save')\n const ref = useRef<HTMLButtonElement>(null)\n const editDepth = useEditDepth()\n const operation = useOperation()\n\n const forceDisable = operation === 'update' && !modified\n\n useHotkey({ cmdCtrlKey: true, editDepth, keyCodes: ['s'] }, (e) => {\n if (forceDisable) {\n // absorb the event\n }\n\n e.preventDefault()\n e.stopPropagation()\n if (ref?.current) {\n ref.current.click()\n }\n })\n\n return (\n <FormSubmit\n buttonId=\"action-save\"\n disabled={forceDisable}\n onClick={() => {\n return void submit()\n }}\n ref={ref}\n size=\"medium\"\n type=\"button\"\n >\n {label}\n </FormSubmit>\n )\n}\n\ntype Props = {\n CustomComponent?: MappedComponent\n}\n\nexport const SaveButton: React.FC<Props> = ({ CustomComponent }) => {\n if (CustomComponent) return <RenderComponent mappedComponent={CustomComponent} />\n return <DefaultSaveButton />\n}\n"],"mappings":"AAAA;;;AAIA,OAAOA,KAAA,IAASC,MAAM,QAAQ;AAE9B,SAASC,OAAO,EAAEC,eAAe,QAAQ;AACzC,SAASC,UAAU,QAAQ;AAC3B,SAASC,SAAS,QAAQ;AAC1B,SAASC,eAAe,QAAQ;AAChC,SAASC,YAAY,QAAQ;AAC7B,SAASC,YAAY,QAAQ;AAC7B,SAASC,cAAc,QAAQ;AAE/B,OAAO,MAAMC,iBAAA,GAAkDA,CAAC;EAAEC,KAAA,EAAOC;AAAS,CAAE;EAClF,MAAM;IAAEC;EAAC,CAAE,GAAGJ,cAAA;EACd,MAAM;IAAEK;EAAM,CAAE,GAAGZ,OAAA;EACnB,MAAMa,QAAA,GAAWZ,eAAA;EACjB,MAAMQ,KAAA,GAAQC,SAAA,IAAaC,CAAA,CAAE;EAC7B,MAAMG,GAAA,GAAMf,MAAA,CAA0B;EACtC,MAAMgB,SAAA,GAAYV,YAAA;EAClB,MAAMW,SAAA,GAAYV,YAAA;EAElB,MAAMW,YAAA,GAAeD,SAAA,KAAc,YAAY,CAACH,QAAA;EAEhDV,SAAA,CAAU;IAAEe,UAAA,EAAY;IAAMH,SAAA;IAAWI,QAAA,EAAU,CAAC;EAAK,GAAIC,CAAA;IAC3D,IAAIH,YAAA,EAAc;MAChB;IAAA;IAGFG,CAAA,CAAEC,cAAc;IAChBD,CAAA,CAAEE,eAAe;IACjB,IAAIR,GAAA,EAAKS,OAAA,EAAS;MAChBT,GAAA,CAAIS,OAAO,CAACC,KAAK;IACnB;EACF;EAEA,oBACEC,IAAA,CAACvB,UAAA;IACCwB,QAAA,EAAS;IACTC,QAAA,EAAUV,YAAA;IACVW,OAAA,EAASA,CAAA;MACP,OAAO,KAAKhB,MAAA;IACd;IACAE,GAAA,EAAKA,GAAA;IACLe,IAAA,EAAK;IACLC,IAAA,EAAK;cAEJrB;;AAGP;AAMA,OAAO,MAAMsB,UAAA,GAA8BA,CAAC;EAAEC;AAAe,CAAE;EAC7D,IAAIA,eAAA,EAAiB,oBAAOP,IAAA,CAACrB,eAAA;IAAgB6B,eAAA,EAAiBD;;EAC9D,oBAAOP,IAAA,CAACjB,iBAAA;AACV","ignoreList":[]}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
import { c as _c } from "react/compiler-runtime";
|
|
4
3
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
4
|
import React, { useCallback, useRef } from 'react';
|
|
6
5
|
import { useForm, useFormModified } from '../../forms/Form/context.js';
|
|
@@ -15,17 +14,14 @@ import { useOperation } from '../../providers/Operation/index.js';
|
|
|
15
14
|
import { useTranslation } from '../../providers/Translation/index.js';
|
|
16
15
|
const baseClass = 'save-draft';
|
|
17
16
|
export const DefaultSaveDraftButton = () => {
|
|
18
|
-
const $ = _c(22);
|
|
19
17
|
const {
|
|
20
|
-
config:
|
|
18
|
+
config: {
|
|
19
|
+
routes: {
|
|
20
|
+
api
|
|
21
|
+
},
|
|
22
|
+
serverURL
|
|
23
|
+
}
|
|
21
24
|
} = useConfig();
|
|
22
|
-
const {
|
|
23
|
-
routes: t1,
|
|
24
|
-
serverURL
|
|
25
|
-
} = t0;
|
|
26
|
-
const {
|
|
27
|
-
api
|
|
28
|
-
} = t1;
|
|
29
25
|
const {
|
|
30
26
|
id,
|
|
31
27
|
collectionSlug,
|
|
@@ -44,113 +40,55 @@ export const DefaultSaveDraftButton = () => {
|
|
|
44
40
|
submit
|
|
45
41
|
} = useForm();
|
|
46
42
|
const operation = useOperation();
|
|
47
|
-
const forceDisable = operation ===
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
action,
|
|
68
|
-
method,
|
|
69
|
-
overrides: {
|
|
70
|
-
_status: "draft"
|
|
71
|
-
},
|
|
72
|
-
skipValidation: true
|
|
73
|
-
});
|
|
74
|
-
};
|
|
75
|
-
$[0] = forceDisable;
|
|
76
|
-
$[1] = locale;
|
|
77
|
-
$[2] = collectionSlug;
|
|
78
|
-
$[3] = serverURL;
|
|
79
|
-
$[4] = api;
|
|
80
|
-
$[5] = id;
|
|
81
|
-
$[6] = globalSlug;
|
|
82
|
-
$[7] = submit;
|
|
83
|
-
$[8] = t2;
|
|
84
|
-
} else {
|
|
85
|
-
t2 = $[8];
|
|
86
|
-
}
|
|
87
|
-
const saveDraft = t2;
|
|
88
|
-
let t3;
|
|
89
|
-
if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
|
|
90
|
-
t3 = ["s"];
|
|
91
|
-
$[9] = t3;
|
|
92
|
-
} else {
|
|
93
|
-
t3 = $[9];
|
|
94
|
-
}
|
|
95
|
-
let t4;
|
|
96
|
-
if ($[10] !== editDepth) {
|
|
97
|
-
t4 = {
|
|
98
|
-
cmdCtrlKey: true,
|
|
99
|
-
editDepth,
|
|
100
|
-
keyCodes: t3
|
|
101
|
-
};
|
|
102
|
-
$[10] = editDepth;
|
|
103
|
-
$[11] = t4;
|
|
104
|
-
} else {
|
|
105
|
-
t4 = $[11];
|
|
106
|
-
}
|
|
107
|
-
let t5;
|
|
108
|
-
if ($[12] !== forceDisable || $[13] !== ref) {
|
|
109
|
-
t5 = e => {
|
|
110
|
-
if (forceDisable) {}
|
|
111
|
-
e.preventDefault();
|
|
112
|
-
e.stopPropagation();
|
|
113
|
-
if (ref?.current) {
|
|
114
|
-
ref.current.click();
|
|
115
|
-
}
|
|
116
|
-
};
|
|
117
|
-
$[12] = forceDisable;
|
|
118
|
-
$[13] = ref;
|
|
119
|
-
$[14] = t5;
|
|
120
|
-
} else {
|
|
121
|
-
t5 = $[14];
|
|
122
|
-
}
|
|
123
|
-
useHotkey(t4, t5);
|
|
124
|
-
let t6;
|
|
125
|
-
if ($[15] !== saveDraft) {
|
|
126
|
-
t6 = () => void saveDraft();
|
|
127
|
-
$[15] = saveDraft;
|
|
128
|
-
$[16] = t6;
|
|
129
|
-
} else {
|
|
130
|
-
t6 = $[16];
|
|
131
|
-
}
|
|
132
|
-
let t7;
|
|
133
|
-
if ($[17] !== t || $[18] !== forceDisable || $[19] !== t6 || $[20] !== ref) {
|
|
134
|
-
t7 = _jsx(FormSubmit, {
|
|
135
|
-
buttonId: "action-save-draft",
|
|
136
|
-
buttonStyle: "secondary",
|
|
137
|
-
className: baseClass,
|
|
138
|
-
disabled: forceDisable,
|
|
139
|
-
onClick: t6,
|
|
140
|
-
ref,
|
|
141
|
-
size: "medium",
|
|
142
|
-
type: "button",
|
|
143
|
-
children: t("version:saveDraft")
|
|
43
|
+
const forceDisable = operation === 'update' && !modified;
|
|
44
|
+
const saveDraft = useCallback(async () => {
|
|
45
|
+
if (forceDisable) return;
|
|
46
|
+
const search = `?locale=${locale}&depth=0&fallback-locale=null&draft=true`;
|
|
47
|
+
let action;
|
|
48
|
+
let method = 'POST';
|
|
49
|
+
if (collectionSlug) {
|
|
50
|
+
action = `${serverURL}${api}/${collectionSlug}${id ? `/${id}` : ''}${search}`;
|
|
51
|
+
if (id) method = 'PATCH';
|
|
52
|
+
}
|
|
53
|
+
if (globalSlug) {
|
|
54
|
+
action = `${serverURL}${api}/globals/${globalSlug}${search}`;
|
|
55
|
+
}
|
|
56
|
+
await submit({
|
|
57
|
+
action,
|
|
58
|
+
method,
|
|
59
|
+
overrides: {
|
|
60
|
+
_status: 'draft'
|
|
61
|
+
},
|
|
62
|
+
skipValidation: true
|
|
144
63
|
});
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
64
|
+
}, [submit, collectionSlug, globalSlug, serverURL, api, locale, id, forceDisable]);
|
|
65
|
+
useHotkey({
|
|
66
|
+
cmdCtrlKey: true,
|
|
67
|
+
editDepth,
|
|
68
|
+
keyCodes: ['s']
|
|
69
|
+
}, e => {
|
|
70
|
+
if (forceDisable) {
|
|
71
|
+
// absorb the event
|
|
72
|
+
}
|
|
73
|
+
e.preventDefault();
|
|
74
|
+
e.stopPropagation();
|
|
75
|
+
if (ref?.current) {
|
|
76
|
+
ref.current.click();
|
|
77
|
+
}
|
|
78
|
+
});
|
|
79
|
+
return /*#__PURE__*/_jsx(FormSubmit, {
|
|
80
|
+
buttonId: "action-save-draft",
|
|
81
|
+
buttonStyle: "secondary",
|
|
82
|
+
className: baseClass,
|
|
83
|
+
disabled: forceDisable,
|
|
84
|
+
onClick: () => {
|
|
85
|
+
return void saveDraft();
|
|
86
|
+
},
|
|
87
|
+
ref: ref,
|
|
88
|
+
size: "medium",
|
|
89
|
+
type: "button",
|
|
90
|
+
children: t('version:saveDraft')
|
|
91
|
+
});
|
|
154
92
|
};
|
|
155
93
|
export const SaveDraftButton = ({
|
|
156
94
|
CustomComponent
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useCallback","useRef","useForm","useFormModified","FormSubmit","useHotkey","RenderComponent","useConfig","useDocumentInfo","useEditDepth","useLocale","useOperation","useTranslation","baseClass","DefaultSaveDraftButton","config","routes","api","serverURL","id","collectionSlug","globalSlug","modified","code","locale","ref","editDepth","t","submit","operation","forceDisable","saveDraft","search","action","method","overrides","_status","skipValidation","cmdCtrlKey","keyCodes","e","preventDefault","stopPropagation","current","click","_jsx","buttonId","buttonStyle","className","disabled","onClick","size","type","SaveDraftButton","CustomComponent","mappedComponent"],"sources":["../../../src/elements/SaveDraftButton/index.tsx"],"sourcesContent":["'use client'\n\nimport type { MappedComponent } from 'payload'\n\nimport React, { useCallback, useRef } from 'react'\n\nimport { useForm, useFormModified } from '../../forms/Form/context.js'\nimport { FormSubmit } from '../../forms/Submit/index.js'\nimport { useHotkey } from '../../hooks/useHotkey.js'\nimport { RenderComponent } from '../../providers/Config/RenderComponent.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useOperation } from '../../providers/Operation/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\n\nconst baseClass = 'save-draft'\n\nexport const DefaultSaveDraftButton: React.FC = () => {\n const {\n config: {\n routes: { api },\n serverURL,\n },\n } = useConfig()\n const { id, collectionSlug, globalSlug } = useDocumentInfo()\n const modified = useFormModified()\n const { code: locale } = useLocale()\n const ref = useRef<HTMLButtonElement>(null)\n const editDepth = useEditDepth()\n const { t } = useTranslation()\n const { submit } = useForm()\n const operation = useOperation()\n\n const forceDisable = operation === 'update' && !modified\n\n const saveDraft = useCallback(async () => {\n if (forceDisable) return\n\n const search = `?locale=${locale}&depth=0&fallback-locale=null&draft=true`\n let action\n let method = 'POST'\n\n if (collectionSlug) {\n action = `${serverURL}${api}/${collectionSlug}${id ? `/${id}` : ''}${search}`\n if (id) method = 'PATCH'\n }\n\n if (globalSlug) {\n action = `${serverURL}${api}/globals/${globalSlug}${search}`\n }\n\n await submit({\n action,\n method,\n overrides: {\n _status: 'draft',\n },\n skipValidation: true,\n })\n }, [submit, collectionSlug, globalSlug, serverURL, api, locale, id, forceDisable])\n\n useHotkey({ cmdCtrlKey: true, editDepth, keyCodes: ['s'] }, (e) => {\n if (forceDisable) {\n // absorb the event\n }\n\n e.preventDefault()\n e.stopPropagation()\n if (ref?.current) {\n ref.current.click()\n }\n })\n\n return (\n <FormSubmit\n buttonId=\"action-save-draft\"\n buttonStyle=\"secondary\"\n className={baseClass}\n disabled={forceDisable}\n onClick={() => {\n return void saveDraft()\n }}\n ref={ref}\n size=\"medium\"\n type=\"button\"\n >\n {t('version:saveDraft')}\n </FormSubmit>\n )\n}\n\ntype Props = {\n CustomComponent?: MappedComponent\n}\n\nexport const SaveDraftButton: React.FC<Props> = ({ CustomComponent }) => {\n if (CustomComponent) return <RenderComponent mappedComponent={CustomComponent} />\n return <DefaultSaveDraftButton />\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
import { c as _c } from "react/compiler-runtime";
|
|
4
3
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
4
|
import React, { useEffect, useRef } from 'react';
|
|
6
5
|
import { useDebounce } from '../../hooks/useDebounce.js';
|
|
7
6
|
import './index.scss';
|
|
8
7
|
const baseClass = 'search-filter';
|
|
9
8
|
export const SearchFilter = props => {
|
|
10
|
-
const $ = _c(16);
|
|
11
9
|
const {
|
|
12
10
|
handleChange,
|
|
13
11
|
initialParams,
|
|
@@ -15,81 +13,27 @@ export const SearchFilter = props => {
|
|
|
15
13
|
setValue,
|
|
16
14
|
value
|
|
17
15
|
} = props;
|
|
18
|
-
const previousSearch = useRef(typeof initialParams?.search ===
|
|
16
|
+
const previousSearch = useRef(typeof initialParams?.search === 'string' ? initialParams?.search : '');
|
|
19
17
|
const debouncedSearch = useDebounce(value, 300);
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
$[4] = previousSearch;
|
|
41
|
-
$[5] = handleChange;
|
|
42
|
-
$[6] = t1;
|
|
43
|
-
} else {
|
|
44
|
-
t1 = $[6];
|
|
45
|
-
}
|
|
46
|
-
useEffect(t0, t1);
|
|
47
|
-
let t2;
|
|
48
|
-
if ($[7] !== setValue) {
|
|
49
|
-
t2 = () => () => setValue("");
|
|
50
|
-
$[7] = setValue;
|
|
51
|
-
$[8] = t2;
|
|
52
|
-
} else {
|
|
53
|
-
t2 = $[8];
|
|
54
|
-
}
|
|
55
|
-
let t3;
|
|
56
|
-
if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
|
|
57
|
-
t3 = [];
|
|
58
|
-
$[9] = t3;
|
|
59
|
-
} else {
|
|
60
|
-
t3 = $[9];
|
|
61
|
-
}
|
|
62
|
-
useEffect(t2, t3);
|
|
63
|
-
let t4;
|
|
64
|
-
if ($[10] !== setValue) {
|
|
65
|
-
t4 = e => setValue(e.target.value);
|
|
66
|
-
$[10] = setValue;
|
|
67
|
-
$[11] = t4;
|
|
68
|
-
} else {
|
|
69
|
-
t4 = $[11];
|
|
70
|
-
}
|
|
71
|
-
const t5 = value || "";
|
|
72
|
-
let t6;
|
|
73
|
-
if ($[12] !== label || $[13] !== t4 || $[14] !== t5) {
|
|
74
|
-
t6 = _jsx("div", {
|
|
75
|
-
className: baseClass,
|
|
76
|
-
children: _jsx("input", {
|
|
77
|
-
"aria-label": label,
|
|
78
|
-
className: `${baseClass}__input`,
|
|
79
|
-
id: "search-filter-input",
|
|
80
|
-
onChange: t4,
|
|
81
|
-
placeholder: label,
|
|
82
|
-
type: "text",
|
|
83
|
-
value: t5
|
|
84
|
-
})
|
|
85
|
-
});
|
|
86
|
-
$[12] = label;
|
|
87
|
-
$[13] = t4;
|
|
88
|
-
$[14] = t5;
|
|
89
|
-
$[15] = t6;
|
|
90
|
-
} else {
|
|
91
|
-
t6 = $[15];
|
|
92
|
-
}
|
|
93
|
-
return t6;
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
if (debouncedSearch !== previousSearch.current) {
|
|
20
|
+
if (handleChange) handleChange(debouncedSearch);
|
|
21
|
+
previousSearch.current = debouncedSearch;
|
|
22
|
+
}
|
|
23
|
+
}, [debouncedSearch, previousSearch, handleChange]);
|
|
24
|
+
// Cleans up the search input when the component is unmounted
|
|
25
|
+
useEffect(() => () => setValue(''), []);
|
|
26
|
+
return /*#__PURE__*/_jsx("div", {
|
|
27
|
+
className: baseClass,
|
|
28
|
+
children: /*#__PURE__*/_jsx("input", {
|
|
29
|
+
"aria-label": label,
|
|
30
|
+
className: `${baseClass}__input`,
|
|
31
|
+
id: "search-filter-input",
|
|
32
|
+
onChange: e => setValue(e.target.value),
|
|
33
|
+
placeholder: label,
|
|
34
|
+
type: "text",
|
|
35
|
+
value: value || ''
|
|
36
|
+
})
|
|
37
|
+
});
|
|
94
38
|
};
|
|
95
39
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useEffect","useRef","useDebounce","baseClass","SearchFilter","props","handleChange","initialParams","label","setValue","value","previousSearch","search","debouncedSearch","current","_jsx","className","id","onChange","e","target","placeholder","type"],"sources":["../../../src/elements/SearchFilter/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect, useRef } from 'react'\n\nexport type SearchFilterProps = {\n fieldName?: string\n handleChange?: (search: string) => void\n initialParams?: ParsedQs\n label: string\n setValue?: (arg: string) => void\n value?: string\n}\n\nimport type { ParsedQs } from 'qs-esm'\n\nimport { useDebounce } from '../../hooks/useDebounce.js'\nimport './index.scss'\n\nconst baseClass = 'search-filter'\n\nexport const SearchFilter: React.FC<SearchFilterProps> = (props) => {\n const { handleChange, initialParams, label, setValue, value } = props\n\n const previousSearch = useRef(\n typeof initialParams?.search === 'string' ? initialParams?.search : '',\n )\n\n const debouncedSearch = useDebounce(value, 300)\n\n useEffect(() => {\n if (debouncedSearch !== previousSearch.current) {\n if (handleChange) handleChange(debouncedSearch)\n\n previousSearch.current = debouncedSearch\n }\n }, [debouncedSearch, previousSearch, handleChange])\n\n // Cleans up the search input when the component is unmounted\n useEffect(() => () => setValue(''), [])\n\n return (\n <div className={baseClass}>\n <input\n aria-label={label}\n className={`${baseClass}__input`}\n id=\"search-filter-input\"\n onChange={(e) => setValue(e.target.value)}\n placeholder={label}\n type=\"text\"\n value={value || ''}\n />\n </div>\n )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,SAAS,EAAEC,MAAM,QAAQ;AAazC,SAASC,WAAW,QAAQ;AAC5B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,YAAA,GAA6CC,KAAA;EACxD,MAAM;IAAEC,YAAY;IAAEC,aAAa;IAAEC,KAAK;IAAEC,QAAQ;IAAEC;EAAK,CAAE,GAAGL,KAAA;EAEhE,MAAMM,cAAA,GAAiBV,MAAA,CACrB,OAAOM,aAAA,EAAeK,MAAA,KAAW,WAAWL,aAAA,EAAeK,MAAA,GAAS;EAGtE,MAAMC,eAAA,GAAkBX,WAAA,CAAYQ,KAAA,EAAO;EAE3CV,SAAA,CAAU;IACR,IAAIa,eAAA,KAAoBF,cAAA,CAAeG,OAAO,EAAE;MAC9C,IAAIR,YAAA,EAAcA,YAAA,CAAaO,eAAA;MAE/BF,cAAA,CAAeG,OAAO,GAAGD,eAAA;IAC3B;EACF,GAAG,CAACA,eAAA,EAAiBF,cAAA,EAAgBL,YAAA,CAAa;EAElD;EACAN,SAAA,CAAU,MAAM,MAAMS,QAAA,CAAS,KAAK,EAAE;EAEtC,oBACEM,IAAA,CAAC;IAAIC,SAAA,EAAWb,SAAA;cACd,aAAAY,IAAA,CAAC;MACC,cAAYP,KAAA;MACZQ,SAAA,EAAW,GAAGb,SAAA,SAAkB;MAChCc,EAAA,EAAG;MACHC,QAAA,EAAWC,CAAA,IAAMV,QAAA,CAASU,CAAA,CAAEC,MAAM,CAACV,KAAK;MACxCW,WAAA,EAAab,KAAA;MACbc,IAAA,EAAK;MACLZ,KAAA,EAAOA,KAAA,IAAS;;;AAIxB","ignoreList":[]}
|