@rulab/adminjs-components 0.0.13 → 0.1.0-alpha.2
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/LICENSE +21 -21
- package/dist/index.cjs +10 -762
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +10 -21
- package/dist/index.d.ts +10 -21
- package/dist/index.js +3 -754
- package/dist/index.js.map +1 -0
- package/package.json +12 -8
- package/src/components/ColorStatus/ColorStatusEdit.tsx +94 -94
- package/src/components/ColorStatus/ColorStatusList.tsx +20 -20
- package/src/components/ColorStatus/ColorStatusShow.tsx +23 -23
- package/src/components/ColorStatus/index.ts +3 -3
- package/src/components/ColorStatus/styles.ts +30 -30
- package/src/components/ColorStatus/types.ts +5 -5
- package/src/components/Editor/Editor.jsx +49 -49
- package/src/components/Editor/EditorList.jsx +22 -22
- package/src/components/Editor/EditorShow.jsx +24 -24
- package/src/components/Editor/config.ts +35 -35
- package/src/components/Editor/index.ts +3 -3
- package/src/components/Editor/styles.ts +151 -151
- package/src/components/{CustomSlug/CustomSlug.tsx → Slug/SlugEdit.tsx} +68 -68
- package/src/components/Slug/SlugFeature.ts +30 -0
- package/src/components/Slug/index.ts +1 -0
- package/src/components/{CustomSlug → Slug}/styles.ts +24 -24
- package/src/components/StringList/SortableList/SortableList.tsx +98 -98
- package/src/components/StringList/SortableList/components/SortableItem/DragHandle.tsx +20 -20
- package/src/components/StringList/SortableList/components/SortableItem/SortableItem.tsx +59 -59
- package/src/components/StringList/SortableList/components/SortableItem/styles.ts +22 -22
- package/src/components/StringList/SortableList/components/SortableItem/types.ts +7 -7
- package/src/components/StringList/SortableList/components/index.ts +2 -2
- package/src/components/StringList/SortableList/index.ts +1 -1
- package/src/components/StringList/SortableList/styles.ts +9 -9
- package/src/components/StringList/StringList.tsx +136 -136
- package/src/components/StringList/StringListShow.tsx +37 -37
- package/src/components/StringList/constants.ts +1 -1
- package/src/components/StringList/index.ts +2 -2
- package/src/components/StringList/styles.ts +41 -41
- package/src/components/index.ts +10 -9
- package/dist/bundle.js +0 -8
- package/dist/components/CustomSlug/CustomSlug.jsx +0 -29
- package/dist/components/CustomSlug/index.js +0 -1
- package/dist/components/CustomSlug/styles.js +0 -15
- package/dist/components/Editor/config.js +0 -11
- package/dist/components/Editor/index.js +0 -1
- package/dist/components/Editor/styles.js +0 -64
- package/dist/components/StringList/SortableList/SortableList.jsx +0 -43
- package/dist/components/StringList/SortableList/components/SortableItem/DragHandle.jsx +0 -10
- package/dist/components/StringList/SortableList/components/SortableItem/SortableItem.jsx +0 -32
- package/dist/components/StringList/SortableList/components/SortableItem/styles.js +0 -20
- package/dist/components/StringList/SortableList/components/SortableItem/types.js +0 -1
- package/dist/components/StringList/SortableList/components/index.js +0 -2
- package/dist/components/StringList/SortableList/index.js +0 -1
- package/dist/components/StringList/SortableList/styles.js +0 -8
- package/dist/components/StringList/StringList.jsx +0 -67
- package/dist/components/StringList/index.js +0 -1
- package/dist/components/StringList/styles.js +0 -16
- package/dist/components/index.js +0 -3
- package/dist/editorFeature.js +0 -16
- package/dist/index.d.mts +0 -8
- package/dist/index.mjs +0 -37
- package/dist/utils/index.js +0 -1
- package/dist/utils/slugifyImport.js +0 -3
- package/dist/utils/slugifyTitle.js +0 -10
- package/src/components/CustomSlug/index.ts +0 -1
- package/src/index.ts +0 -2
- package/src/types.d.ts +0 -3
- package/src/utils/index.ts +0 -3
- package/src/utils/parseHtml.ts +0 -56
- package/src/utils/slugifyImport.ts +0 -4
- package/src/utils/slugifyTitle.ts +0 -11
- package/tsconfig.json +0 -17
package/dist/index.js
CHANGED
|
@@ -1,757 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import Select from "react-select";
|
|
4
|
-
import chroma from "chroma-js";
|
|
5
|
-
|
|
6
|
-
// src/components/ColorStatus/styles.ts
|
|
7
|
-
import { styled } from "@adminjs/design-system/styled-components";
|
|
8
|
-
var ColorStatusWrapper = styled.div`
|
|
9
|
-
margin-bottom: 24px;
|
|
10
|
-
`;
|
|
11
|
-
var Label = styled.div`
|
|
12
|
-
font-size: 12px;
|
|
13
|
-
margin-bottom: 8px;
|
|
14
|
-
`;
|
|
15
|
-
var ShowLabel = styled.div`
|
|
16
|
-
font-size: 12px;
|
|
17
|
-
margin-bottom: 8px;
|
|
18
|
-
color: rgb(137, 138, 154);
|
|
19
|
-
`;
|
|
20
|
-
var ColorStatusBadgeWrapper = styled.div`
|
|
21
|
-
margin-bottom: 20px;
|
|
22
|
-
`;
|
|
23
|
-
var ColorStatusBadge = styled.div`
|
|
24
|
-
background-color: ${(props) => props.color};
|
|
25
|
-
width: fit-content;
|
|
26
|
-
padding: 5px 10px;
|
|
27
|
-
border-radius: 20px;
|
|
28
|
-
font-size: 12px;
|
|
29
|
-
color: white;
|
|
30
|
-
white-space: nowrap;
|
|
31
|
-
`;
|
|
32
|
-
|
|
33
|
-
// src/components/ColorStatus/ColorStatusEdit.tsx
|
|
34
|
-
var dot = (color = "transparent") => ({
|
|
35
|
-
alignItems: "center",
|
|
36
|
-
display: "flex",
|
|
37
|
-
":before": {
|
|
38
|
-
backgroundColor: color,
|
|
39
|
-
borderRadius: 10,
|
|
40
|
-
content: '" "',
|
|
41
|
-
display: "block",
|
|
42
|
-
marginRight: 8,
|
|
43
|
-
height: 10,
|
|
44
|
-
width: 10
|
|
45
|
-
}
|
|
46
|
-
});
|
|
47
|
-
var colorStyles = {
|
|
48
|
-
control: (styles) => ({ ...styles, backgroundColor: "white" }),
|
|
49
|
-
option: (styles, { data, isDisabled, isFocused, isSelected }) => {
|
|
50
|
-
const color = chroma(data.color);
|
|
51
|
-
return {
|
|
52
|
-
...styles,
|
|
53
|
-
backgroundColor: isSelected ? data.color : isFocused ? color.alpha(0.1).css() : void 0,
|
|
54
|
-
color: isSelected ? chroma.contrast(color, "white") > 2 ? "white" : "black" : data.color,
|
|
55
|
-
":active": {
|
|
56
|
-
...styles[":active"],
|
|
57
|
-
backgroundColor: isSelected ? data.color : color.alpha(0.3).css()
|
|
58
|
-
}
|
|
59
|
-
};
|
|
60
|
-
},
|
|
61
|
-
input: (styles) => ({ ...styles, ...dot() }),
|
|
62
|
-
placeholder: (styles) => ({ ...styles, ...dot("#ccc") }),
|
|
63
|
-
singleValue: (styles, { data }) => ({ ...styles, ...dot(data.color) })
|
|
64
|
-
};
|
|
65
|
-
var ColorStatus = ({ property, record, onChange }) => {
|
|
66
|
-
const availableValues = property.availableValues;
|
|
67
|
-
const currentOption = availableValues.find(
|
|
68
|
-
(item) => item.value === record.params[property.path]
|
|
69
|
-
);
|
|
70
|
-
const [selectOption, setCurrentOption] = useState(currentOption);
|
|
71
|
-
const handleSelectChange = (option) => {
|
|
72
|
-
setCurrentOption(option);
|
|
73
|
-
};
|
|
74
|
-
useEffect(() => {
|
|
75
|
-
onChange(property.path, selectOption?.value);
|
|
76
|
-
}, [selectOption]);
|
|
77
|
-
return /* @__PURE__ */ React.createElement(ColorStatusWrapper, null, /* @__PURE__ */ React.createElement(Label, null, property.path), /* @__PURE__ */ React.createElement(
|
|
78
|
-
Select,
|
|
79
|
-
{
|
|
80
|
-
className: "basic-single",
|
|
81
|
-
classNamePrefix: "select",
|
|
82
|
-
defaultValue: selectOption ?? availableValues[0],
|
|
83
|
-
onChange: handleSelectChange,
|
|
84
|
-
isClearable: true,
|
|
85
|
-
name: "color",
|
|
86
|
-
options: availableValues,
|
|
87
|
-
styles: colorStyles
|
|
88
|
-
}
|
|
89
|
-
));
|
|
90
|
-
};
|
|
91
|
-
var ColorStatusEdit_default = ColorStatus;
|
|
92
|
-
|
|
93
|
-
// src/components/ColorStatus/ColorStatusShow.tsx
|
|
94
|
-
import React2 from "react";
|
|
95
|
-
var ColorStatusShow = ({ property, record }) => {
|
|
96
|
-
const currentOption = property.availableValues?.find(
|
|
97
|
-
(item) => item.value === record.params[property.path]
|
|
98
|
-
);
|
|
99
|
-
return /* @__PURE__ */ React2.createElement(ColorStatusBadgeWrapper, null, /* @__PURE__ */ React2.createElement(ShowLabel, null, property.path), /* @__PURE__ */ React2.createElement(ColorStatusBadge, { color: currentOption.color }, record.params[property.path]));
|
|
100
|
-
};
|
|
101
|
-
var ColorStatusShow_default = ColorStatusShow;
|
|
102
|
-
|
|
103
|
-
// src/components/ColorStatus/ColorStatusList.tsx
|
|
104
|
-
import React3 from "react";
|
|
105
|
-
var ColorStatusList = ({ property, record }) => {
|
|
106
|
-
const currentOption = property.availableValues?.find(
|
|
107
|
-
(item) => item.value === record.params[property.path]
|
|
108
|
-
);
|
|
109
|
-
return /* @__PURE__ */ React3.createElement(ColorStatusBadge, { color: currentOption.color }, record.params[property.path]);
|
|
110
|
-
};
|
|
111
|
-
var ColorStatusList_default = ColorStatusList;
|
|
112
|
-
|
|
113
|
-
// src/components/CustomSlug/CustomSlug.tsx
|
|
114
|
-
import React4, {
|
|
115
|
-
useEffect as useEffect2,
|
|
116
|
-
useState as useState2
|
|
117
|
-
} from "react";
|
|
118
|
-
import { ThemeProvider } from "styled-components";
|
|
119
|
-
import { theme } from "@adminjs/design-system";
|
|
120
|
-
|
|
121
|
-
// src/utils/parseHtml.ts
|
|
122
|
-
import edjsHTML from "editorjs-html";
|
|
123
|
-
var tableParser = (block) => {
|
|
124
|
-
const rows = block.data.content.map((row, index) => {
|
|
125
|
-
const tableHtml = [];
|
|
126
|
-
if (block.data.withHeadings && index === 0) {
|
|
127
|
-
tableHtml.push(`<tr>${row.map((cell) => `<th>${cell}</th>`)}</tr>`);
|
|
128
|
-
} else {
|
|
129
|
-
tableHtml.push(`<tr>${row.map((cell) => `<td>${cell}</td>`)}</tr>`);
|
|
130
|
-
}
|
|
131
|
-
return tableHtml;
|
|
132
|
-
});
|
|
133
|
-
if (block.data.withHeadings) {
|
|
134
|
-
const heading = rows[0];
|
|
135
|
-
const [, ...content] = rows;
|
|
136
|
-
return `<table><thead>${heading.join("")}</thead><tbody>${content.join("")}</tbody></table>`;
|
|
137
|
-
} else {
|
|
138
|
-
return `<table><tbody>${rows.join("")}</tbody></table>`;
|
|
139
|
-
}
|
|
140
|
-
};
|
|
141
|
-
var audioPlayerParser = (block) => {
|
|
142
|
-
return `<audio controls src={${block.data.src}} />`;
|
|
143
|
-
};
|
|
144
|
-
var parseHtml = (jsonData) => {
|
|
145
|
-
const edjsParser = edjsHTML({
|
|
146
|
-
table: tableParser,
|
|
147
|
-
audioPlayer: audioPlayerParser
|
|
148
|
-
});
|
|
149
|
-
try {
|
|
150
|
-
const data = edjsParser.parse(JSON.parse(jsonData));
|
|
151
|
-
return String(data).replace(/>,</g, "><");
|
|
152
|
-
} catch (e) {
|
|
153
|
-
console.log("error", e);
|
|
154
|
-
}
|
|
155
|
-
};
|
|
156
|
-
|
|
157
|
-
// src/utils/slugifyImport.ts
|
|
158
|
-
import slugify from "slugify";
|
|
159
|
-
var slugifyImport_default = slugify;
|
|
160
|
-
|
|
161
|
-
// src/utils/slugifyTitle.ts
|
|
162
|
-
var slugifyTitle = (title) => {
|
|
163
|
-
return slugifyImport_default(title, {
|
|
164
|
-
replacement: "-",
|
|
165
|
-
remove: /[*+~.()'"!:@]/g,
|
|
166
|
-
lower: true,
|
|
167
|
-
locale: "vi",
|
|
168
|
-
trim: true
|
|
169
|
-
});
|
|
170
|
-
};
|
|
171
|
-
|
|
172
|
-
// src/components/CustomSlug/styles.ts
|
|
173
|
-
import { styled as styled2 } from "@adminjs/design-system/styled-components";
|
|
174
|
-
import { Box, Button, Input } from "@adminjs/design-system";
|
|
175
|
-
var StyledInputWrapper = styled2(Box)`
|
|
176
|
-
display: flex;
|
|
177
|
-
margin-bottom: 40px;
|
|
178
|
-
`;
|
|
179
|
-
var StyledCustomInput = styled2(Input)`
|
|
180
|
-
width: 100%;
|
|
181
|
-
margin-right: 10px;
|
|
182
|
-
`;
|
|
183
|
-
var StyledGenerateButton = styled2(Button)`
|
|
184
|
-
white-space: nowrap;
|
|
185
|
-
`;
|
|
186
|
-
var StyledLabel = styled2.div`
|
|
187
|
-
font-size: 12px;
|
|
188
|
-
margin-bottom: 8px;
|
|
189
|
-
text-transform: capitalize;
|
|
190
|
-
`;
|
|
191
|
-
|
|
192
|
-
// src/components/CustomSlug/CustomSlug.tsx
|
|
193
|
-
var CustomSlug = ({
|
|
194
|
-
property,
|
|
195
|
-
record,
|
|
196
|
-
resource,
|
|
197
|
-
onChange
|
|
198
|
-
}) => {
|
|
199
|
-
const [inputValue, setInputValue] = useState2(record.params.slug);
|
|
200
|
-
useEffect2(() => {
|
|
201
|
-
onChange(property.path, inputValue);
|
|
202
|
-
}, [inputValue]);
|
|
203
|
-
return /* @__PURE__ */ React4.createElement(ThemeProvider, { theme }, /* @__PURE__ */ React4.createElement(StyledLabel, { htmlFor: "customSlug" }, property.path), /* @__PURE__ */ React4.createElement(StyledInputWrapper, null, /* @__PURE__ */ React4.createElement(
|
|
204
|
-
StyledCustomInput,
|
|
205
|
-
{
|
|
206
|
-
id: property.path,
|
|
207
|
-
name: property.path,
|
|
208
|
-
value: inputValue,
|
|
209
|
-
onChange: handleInput
|
|
210
|
-
}
|
|
211
|
-
), /* @__PURE__ */ React4.createElement(StyledGenerateButton, { variant: "outlined", onClick: generateSlug }, "Generate Slug")));
|
|
212
|
-
function handleInput(e) {
|
|
213
|
-
setInputValue(e.target.value);
|
|
214
|
-
}
|
|
215
|
-
function generateSlug(e) {
|
|
216
|
-
e.preventDefault();
|
|
217
|
-
const slugSource = record.params[property.props.sourceField ?? resource.titleProperty.name];
|
|
218
|
-
if (slugSource) {
|
|
219
|
-
setInputValue(slugifyTitle(slugSource));
|
|
220
|
-
}
|
|
221
|
-
}
|
|
222
|
-
};
|
|
223
|
-
var CustomSlug_default = CustomSlug;
|
|
224
|
-
|
|
225
|
-
// src/components/Editor/Editor.jsx
|
|
226
|
-
import React5, { memo, useState as useState3, useEffect as useEffect3, useRef } from "react";
|
|
227
|
-
import { ThemeProvider as ThemeProvider2 } from "styled-components";
|
|
228
|
-
import EditorJS from "@editorjs/editorjs";
|
|
229
|
-
import { theme as theme2 } from "@adminjs/design-system";
|
|
230
|
-
|
|
231
|
-
// src/components/Editor/styles.ts
|
|
232
|
-
import { Box as Box2 } from "@adminjs/design-system";
|
|
233
|
-
import { styled as styled3 } from "@adminjs/design-system/styled-components";
|
|
234
|
-
var StyledLabel2 = styled3.div`
|
|
235
|
-
font-size: 12px;
|
|
236
|
-
margin-bottom: 8px;
|
|
237
|
-
text-transform: capitalize;
|
|
238
|
-
`;
|
|
239
|
-
var StyledShowLabel = styled3(StyledLabel2)`
|
|
240
|
-
color: rgb(137, 138, 154);
|
|
241
|
-
font-weight: 300;
|
|
242
|
-
`;
|
|
243
|
-
var StyledEditorWrapper = styled3(Box2)`
|
|
244
|
-
padding: 12px;
|
|
245
|
-
margin-bottom: 24px;
|
|
246
|
-
border: 1px solid rgb(187, 195, 203);
|
|
247
|
-
`;
|
|
248
|
-
var StyledEditorViewWrapper = styled3(Box2)`
|
|
249
|
-
h1,
|
|
250
|
-
h2,
|
|
251
|
-
h3 {
|
|
252
|
-
margin-bottom: 5px;
|
|
253
|
-
font-weight: bold;
|
|
254
|
-
}
|
|
255
|
-
|
|
256
|
-
h1 {
|
|
257
|
-
font-size: 18px;
|
|
258
|
-
}
|
|
259
|
-
|
|
260
|
-
h2 {
|
|
261
|
-
font-size: 16px;
|
|
262
|
-
}
|
|
263
|
-
|
|
264
|
-
h3 {
|
|
265
|
-
font-size: 14px;
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
p {
|
|
269
|
-
margin-bottom: 8px;
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
ol,
|
|
273
|
-
ul {
|
|
274
|
-
margin-left: 20px;
|
|
275
|
-
margin-bottom: 8px;
|
|
276
|
-
}
|
|
277
|
-
|
|
278
|
-
ol {
|
|
279
|
-
list-style: auto;
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
ul {
|
|
283
|
-
list-style: inherit;
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
table,
|
|
287
|
-
audio {
|
|
288
|
-
margin: 16px 0;
|
|
289
|
-
}
|
|
290
|
-
|
|
291
|
-
table,
|
|
292
|
-
th,
|
|
293
|
-
td {
|
|
294
|
-
border: 1px solid;
|
|
295
|
-
}
|
|
296
|
-
|
|
297
|
-
th {
|
|
298
|
-
font-weight: bold;
|
|
299
|
-
}
|
|
300
|
-
|
|
301
|
-
th,
|
|
302
|
-
td {
|
|
303
|
-
padding: 4px;
|
|
304
|
-
}
|
|
305
|
-
|
|
306
|
-
blockquote {
|
|
307
|
-
display: block;
|
|
308
|
-
padding: 5px 8px;
|
|
309
|
-
width: fit-content;
|
|
310
|
-
border-radius: 4px;
|
|
311
|
-
background-color: #e6e6e6;
|
|
312
|
-
}
|
|
313
|
-
`;
|
|
314
|
-
var StyledEditorShowWrapper = styled3(StyledEditorViewWrapper)`
|
|
315
|
-
margin-bottom: 24px;
|
|
316
|
-
`;
|
|
317
|
-
var StyledEditor = styled3.div`
|
|
318
|
-
audio,
|
|
319
|
-
.cdx-block,
|
|
320
|
-
.ce-header {
|
|
321
|
-
padding-left: 58px;
|
|
322
|
-
}
|
|
323
|
-
|
|
324
|
-
input {
|
|
325
|
-
margin-left: 58px;
|
|
326
|
-
width: auto;
|
|
327
|
-
}
|
|
328
|
-
|
|
329
|
-
.cdx-list {
|
|
330
|
-
padding-left: 85px;
|
|
331
|
-
}
|
|
332
|
-
|
|
333
|
-
.ce-block__content {
|
|
334
|
-
width: 100%;
|
|
335
|
-
max-width: none;
|
|
336
|
-
}
|
|
337
|
-
|
|
338
|
-
.ce-toolbar__content {
|
|
339
|
-
max-width: none;
|
|
340
|
-
left: 0;
|
|
341
|
-
}
|
|
342
|
-
|
|
343
|
-
.ce-toolbar__actions {
|
|
344
|
-
left: 0;
|
|
345
|
-
}
|
|
346
|
-
|
|
347
|
-
h1.ce-header {
|
|
348
|
-
font-size: 22px;
|
|
349
|
-
font-weight: bold;
|
|
350
|
-
}
|
|
351
|
-
|
|
352
|
-
h2.ce-header {
|
|
353
|
-
font-size: 20px;
|
|
354
|
-
font-weight: bold;
|
|
355
|
-
}
|
|
356
|
-
|
|
357
|
-
h3.ce-header {
|
|
358
|
-
font-size: 18px;
|
|
359
|
-
font-weight: bold;
|
|
360
|
-
}
|
|
361
|
-
|
|
362
|
-
h4.ce-header {
|
|
363
|
-
font-size: 16px;
|
|
364
|
-
font-weight: bold;
|
|
365
|
-
}
|
|
366
|
-
|
|
367
|
-
h5.ce-header {
|
|
368
|
-
font-size: 15px;
|
|
369
|
-
font-weight: bold;
|
|
370
|
-
}
|
|
371
|
-
|
|
372
|
-
h6.ce-header {
|
|
373
|
-
font-size: 14px;
|
|
374
|
-
font-weight: bold;
|
|
375
|
-
}
|
|
376
|
-
`;
|
|
377
|
-
|
|
378
|
-
// src/components/Editor/config.ts
|
|
379
|
-
import Header from "@editorjs/header";
|
|
380
|
-
import List from "@editorjs/list";
|
|
381
|
-
import Paragraph from "@editorjs/paragraph";
|
|
382
|
-
import Quote from "@editorjs/quote";
|
|
383
|
-
import Table from "@editorjs/table";
|
|
384
|
-
import AudioPlayer from "editorjs-audio-player";
|
|
385
|
-
var EDITOR_TOOLS = {
|
|
386
|
-
paragraph: {
|
|
387
|
-
class: Paragraph,
|
|
388
|
-
inlineToolbar: true
|
|
389
|
-
},
|
|
390
|
-
list: {
|
|
391
|
-
class: List,
|
|
392
|
-
inlineToolbar: true
|
|
393
|
-
},
|
|
394
|
-
header: {
|
|
395
|
-
class: Header,
|
|
396
|
-
config: {
|
|
397
|
-
placeholder: "Enter a header",
|
|
398
|
-
levels: [2, 3, 4],
|
|
399
|
-
defaultLevel: 2
|
|
400
|
-
}
|
|
401
|
-
},
|
|
402
|
-
table: {
|
|
403
|
-
class: Table,
|
|
404
|
-
inlineToolbar: true
|
|
405
|
-
},
|
|
406
|
-
quote: {
|
|
407
|
-
class: Quote,
|
|
408
|
-
inlineToolbar: true
|
|
409
|
-
},
|
|
410
|
-
audioPlayer: AudioPlayer
|
|
411
|
-
};
|
|
412
|
-
|
|
413
|
-
// src/components/Editor/Editor.jsx
|
|
414
|
-
var Editor = ({ property, record, onChangeAdmin, editorId }) => {
|
|
415
|
-
const [jsonData, setJsonData] = useState3();
|
|
416
|
-
const isSavedData = Boolean(record.params[property.path]);
|
|
417
|
-
const ref = useRef();
|
|
418
|
-
useEffect3(() => {
|
|
419
|
-
onChangeAdmin(property.path, jsonData);
|
|
420
|
-
}, [jsonData]);
|
|
421
|
-
useEffect3(() => {
|
|
422
|
-
if (!ref.current) {
|
|
423
|
-
const editor = new EditorJS({
|
|
424
|
-
holder: editorId,
|
|
425
|
-
tools: EDITOR_TOOLS,
|
|
426
|
-
data: isSavedData ? JSON.parse(record.params[property.path]) : "",
|
|
427
|
-
async onChange(api, event) {
|
|
428
|
-
const data = await api.saver.save();
|
|
429
|
-
setJsonData(JSON.stringify(data));
|
|
430
|
-
}
|
|
431
|
-
});
|
|
432
|
-
ref.current = editor;
|
|
433
|
-
}
|
|
434
|
-
return () => {
|
|
435
|
-
ref?.current?.destroy?.();
|
|
436
|
-
};
|
|
437
|
-
}, []);
|
|
438
|
-
return /* @__PURE__ */ React5.createElement(ThemeProvider2, { theme: theme2 }, /* @__PURE__ */ React5.createElement(StyledLabel2, null, property.path), /* @__PURE__ */ React5.createElement(StyledEditorWrapper, null, /* @__PURE__ */ React5.createElement(StyledEditor, { id: editorId })));
|
|
439
|
-
};
|
|
440
|
-
var Editor_default = Editor;
|
|
441
|
-
|
|
442
|
-
// src/components/Editor/EditorList.jsx
|
|
443
|
-
import React6 from "react";
|
|
444
|
-
import { theme as theme3 } from "@adminjs/design-system";
|
|
445
|
-
import { ThemeProvider as ThemeProvider3 } from "styled-components";
|
|
446
|
-
var EditorList = ({ property, record }) => {
|
|
447
|
-
const htmlContent = parseHtml(record.params[property.path]);
|
|
448
|
-
return /* @__PURE__ */ React6.createElement(ThemeProvider3, { theme: theme3 }, /* @__PURE__ */ React6.createElement(StyledEditorViewWrapper, null, htmlContent && /* @__PURE__ */ React6.createElement("div", { dangerouslySetInnerHTML: { __html: htmlContent } })));
|
|
449
|
-
};
|
|
450
|
-
var EditorList_default = EditorList;
|
|
451
|
-
|
|
452
|
-
// src/components/Editor/EditorShow.jsx
|
|
453
|
-
import React7 from "react";
|
|
454
|
-
import { ThemeProvider as ThemeProvider4 } from "styled-components";
|
|
455
|
-
import { theme as theme4 } from "@adminjs/design-system";
|
|
456
|
-
var EditorShow = ({ property, record }) => {
|
|
457
|
-
const htmlContent = parseHtml(record.params[property.path]);
|
|
458
|
-
return /* @__PURE__ */ React7.createElement(ThemeProvider4, { theme: theme4 }, /* @__PURE__ */ React7.createElement(StyledEditorShowWrapper, null, /* @__PURE__ */ React7.createElement(StyledShowLabel, null, property.path), htmlContent && /* @__PURE__ */ React7.createElement("div", { dangerouslySetInnerHTML: { __html: htmlContent } })));
|
|
459
|
-
};
|
|
460
|
-
var EditorShow_default = EditorShow;
|
|
461
|
-
|
|
462
|
-
// src/components/StringList/StringList.tsx
|
|
463
|
-
import { Button as Button3, Input as Input3, theme as theme5 } from "@adminjs/design-system";
|
|
464
|
-
import React11, {
|
|
465
|
-
useEffect as useEffect4,
|
|
466
|
-
useState as useState5
|
|
467
|
-
} from "react";
|
|
468
|
-
import { ThemeProvider as ThemeProvider5 } from "styled-components";
|
|
469
|
-
|
|
470
|
-
// src/components/StringList/styles.ts
|
|
471
|
-
import { Box as Box3, Input as Input2 } from "@adminjs/design-system";
|
|
472
|
-
import { styled as styled4 } from "@adminjs/design-system/styled-components";
|
|
473
|
-
var StyledWrapper = styled4(Box3)`
|
|
474
|
-
display: flex;
|
|
475
|
-
flex-direction: column;
|
|
476
|
-
margin-bottom: 45px;
|
|
477
|
-
`;
|
|
478
|
-
var StyledCustomInput2 = styled4(Input2)`
|
|
479
|
-
width: 100%;
|
|
480
|
-
margin-right: 10px;
|
|
481
|
-
`;
|
|
482
|
-
var StyledInputWrapper2 = styled4(Box3)`
|
|
483
|
-
display: flex;
|
|
484
|
-
`;
|
|
485
|
-
var StyledListWrapper = styled4(Box3)`
|
|
486
|
-
margin-bottom: 15px;
|
|
487
|
-
`;
|
|
488
|
-
var StyledLabel3 = styled4.div`
|
|
489
|
-
font-size: 12px;
|
|
490
|
-
margin-bottom: 8px;
|
|
491
|
-
text-transform: capitalize;
|
|
492
|
-
`;
|
|
493
|
-
var StyledShowLabel2 = styled4(StyledLabel3)`
|
|
494
|
-
line-height: 16px;
|
|
495
|
-
color: rgb(137, 138, 154);
|
|
496
|
-
font-weight: 300;
|
|
497
|
-
`;
|
|
498
|
-
var StyledShowWrapper = styled4(Box3)`
|
|
499
|
-
margin-bottom: 35px;
|
|
500
|
-
`;
|
|
501
|
-
var StyledListItem = styled4.li`
|
|
502
|
-
margin-bottom: 5px;
|
|
503
|
-
`;
|
|
504
|
-
|
|
505
|
-
// src/components/StringList/SortableList/SortableList.tsx
|
|
506
|
-
import React10, { Fragment, useMemo as useMemo2, useState as useState4 } from "react";
|
|
507
|
-
import {
|
|
508
|
-
DndContext,
|
|
509
|
-
KeyboardSensor,
|
|
510
|
-
PointerSensor,
|
|
511
|
-
useSensor,
|
|
512
|
-
useSensors,
|
|
513
|
-
DragOverlay,
|
|
514
|
-
defaultDropAnimationSideEffects
|
|
515
|
-
} from "@dnd-kit/core";
|
|
516
|
-
import {
|
|
517
|
-
SortableContext,
|
|
518
|
-
arrayMove,
|
|
519
|
-
sortableKeyboardCoordinates,
|
|
520
|
-
verticalListSortingStrategy
|
|
521
|
-
} from "@dnd-kit/sortable";
|
|
522
|
-
|
|
523
|
-
// src/components/StringList/SortableList/components/SortableItem/SortableItem.tsx
|
|
524
|
-
import React9, { createContext, useMemo } from "react";
|
|
525
|
-
import { useSortable } from "@dnd-kit/sortable";
|
|
526
|
-
import { Button as Button2, Icon } from "@adminjs/design-system";
|
|
527
|
-
|
|
528
|
-
// src/components/StringList/SortableList/components/SortableItem/DragHandle.tsx
|
|
529
|
-
import React8, { useContext } from "react";
|
|
530
|
-
|
|
531
|
-
// src/components/StringList/SortableList/components/SortableItem/styles.ts
|
|
532
|
-
import { styled as styled5 } from "@adminjs/design-system/styled-components";
|
|
533
|
-
var StyledListItem2 = styled5.li`
|
|
534
|
-
display: flex;
|
|
535
|
-
justify-content: space-between;
|
|
536
|
-
align-items: center;
|
|
537
|
-
background-color: #fff;
|
|
538
|
-
padding: 10px 20px 10px 15px;
|
|
539
|
-
box-shadow:
|
|
540
|
-
0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05),
|
|
541
|
-
0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
|
|
542
|
-
border-radius: 5px;
|
|
543
|
-
list-style: none;
|
|
544
|
-
`;
|
|
545
|
-
var StyledDragButton = styled5.button`
|
|
546
|
-
padding: 3px;
|
|
547
|
-
margin-right: 15px;
|
|
548
|
-
cursor: move;
|
|
549
|
-
background: none;
|
|
550
|
-
border: none;
|
|
551
|
-
`;
|
|
552
|
-
|
|
553
|
-
// src/components/StringList/SortableList/components/SortableItem/DragHandle.tsx
|
|
554
|
-
var DragHandle = ({ context }) => {
|
|
555
|
-
const { attributes, listeners, ref } = useContext(context);
|
|
556
|
-
return /* @__PURE__ */ React8.createElement(StyledDragButton, { ...attributes, ...listeners, ref }, /* @__PURE__ */ React8.createElement("svg", { viewBox: "0 0 20 20", width: "13" }, /* @__PURE__ */ React8.createElement("path", { d: "M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z" })));
|
|
557
|
-
};
|
|
558
|
-
|
|
559
|
-
// src/components/StringList/SortableList/components/SortableItem/SortableItem.tsx
|
|
560
|
-
var SortableItemContext = createContext({
|
|
561
|
-
attributes: {},
|
|
562
|
-
listeners: void 0,
|
|
563
|
-
ref() {
|
|
564
|
-
}
|
|
565
|
-
});
|
|
566
|
-
function SortableItem({
|
|
567
|
-
children,
|
|
568
|
-
id,
|
|
569
|
-
onDelete
|
|
570
|
-
}) {
|
|
571
|
-
const { attributes, isDragging, listeners, setNodeRef, setActivatorNodeRef } = useSortable({ id });
|
|
572
|
-
const context = useMemo(
|
|
573
|
-
() => ({
|
|
574
|
-
attributes,
|
|
575
|
-
listeners,
|
|
576
|
-
ref: setActivatorNodeRef
|
|
577
|
-
}),
|
|
578
|
-
[attributes, listeners, setActivatorNodeRef]
|
|
579
|
-
);
|
|
580
|
-
const style = {
|
|
581
|
-
opacity: isDragging ? 0.4 : void 0
|
|
582
|
-
};
|
|
583
|
-
return /* @__PURE__ */ React9.createElement(SortableItemContext.Provider, { value: context }, /* @__PURE__ */ React9.createElement(StyledListItem2, { ref: setNodeRef, style }, /* @__PURE__ */ React9.createElement("div", null, /* @__PURE__ */ React9.createElement(DragHandle, { context: SortableItemContext }), children), /* @__PURE__ */ React9.createElement(
|
|
584
|
-
Button2,
|
|
585
|
-
{
|
|
586
|
-
variant: "outlined",
|
|
587
|
-
color: "danger",
|
|
588
|
-
size: "icon",
|
|
589
|
-
onClick: (e) => onDelete(e, id)
|
|
590
|
-
},
|
|
591
|
-
/* @__PURE__ */ React9.createElement(Icon, { icon: "X", color: "red" })
|
|
592
|
-
)));
|
|
593
|
-
}
|
|
594
|
-
|
|
595
|
-
// src/components/StringList/SortableList/styles.ts
|
|
596
|
-
import { styled as styled6 } from "@adminjs/design-system/styled-components";
|
|
597
|
-
var StyledListWrapper2 = styled6.ul`
|
|
598
|
-
display: flex;
|
|
599
|
-
flex-direction: column;
|
|
600
|
-
gap: 12px;
|
|
601
|
-
padding: 0;
|
|
602
|
-
list-style: none;
|
|
603
|
-
`;
|
|
604
|
-
|
|
605
|
-
// src/components/StringList/SortableList/SortableList.tsx
|
|
606
|
-
var dropAnimationConfig = {
|
|
607
|
-
sideEffects: defaultDropAnimationSideEffects({
|
|
608
|
-
styles: {
|
|
609
|
-
active: {
|
|
610
|
-
opacity: "0.4"
|
|
611
|
-
}
|
|
612
|
-
}
|
|
613
|
-
})
|
|
614
|
-
};
|
|
615
|
-
function SortableList({
|
|
616
|
-
items,
|
|
617
|
-
onChange,
|
|
618
|
-
renderItem
|
|
619
|
-
}) {
|
|
620
|
-
const [active, setActive] = useState4(null);
|
|
621
|
-
const activeItem = useMemo2(
|
|
622
|
-
() => items.find((item) => item.id === active?.id),
|
|
623
|
-
[active, items]
|
|
624
|
-
);
|
|
625
|
-
const sensors = useSensors(
|
|
626
|
-
useSensor(PointerSensor),
|
|
627
|
-
useSensor(KeyboardSensor, {
|
|
628
|
-
coordinateGetter: sortableKeyboardCoordinates
|
|
629
|
-
})
|
|
630
|
-
);
|
|
631
|
-
return /* @__PURE__ */ React10.createElement(
|
|
632
|
-
DndContext,
|
|
633
|
-
{
|
|
634
|
-
sensors,
|
|
635
|
-
onDragStart: ({ active: active2 }) => {
|
|
636
|
-
setActive(active2);
|
|
637
|
-
},
|
|
638
|
-
onDragEnd: ({ active: active2, over }) => {
|
|
639
|
-
if (over && active2.id !== over?.id) {
|
|
640
|
-
const activeIndex = items.findIndex(({ id }) => id === active2.id);
|
|
641
|
-
const overIndex = items.findIndex(({ id }) => id === over.id);
|
|
642
|
-
onChange(arrayMove(items, activeIndex, overIndex));
|
|
643
|
-
}
|
|
644
|
-
setActive(null);
|
|
645
|
-
},
|
|
646
|
-
onDragCancel: () => {
|
|
647
|
-
setActive(null);
|
|
648
|
-
}
|
|
649
|
-
},
|
|
650
|
-
/* @__PURE__ */ React10.createElement(SortableContext, { items, strategy: verticalListSortingStrategy }, /* @__PURE__ */ React10.createElement(StyledListWrapper2, { role: "application" }, items.map((item, index) => /* @__PURE__ */ React10.createElement(Fragment, { key: index }, renderItem(item))))),
|
|
651
|
-
/* @__PURE__ */ React10.createElement(DragOverlay, { dropAnimation: dropAnimationConfig }, activeItem ? renderItem(activeItem) : null)
|
|
652
|
-
);
|
|
653
|
-
}
|
|
654
|
-
SortableList.Item = SortableItem;
|
|
655
|
-
|
|
656
|
-
// src/components/StringList/constants.ts
|
|
657
|
-
var separator = "|";
|
|
658
|
-
|
|
659
|
-
// src/components/StringList/StringList.tsx
|
|
660
|
-
var StringList = ({
|
|
661
|
-
record,
|
|
662
|
-
onChange,
|
|
663
|
-
property,
|
|
664
|
-
stringListSeparator = separator
|
|
665
|
-
}) => {
|
|
666
|
-
const stringListValue = record.params?.[property.path] ?? property.props.value ?? "";
|
|
667
|
-
const initialList = stringListValue ? prepareDataForList(stringListValue) : [];
|
|
668
|
-
const [inputValue, setInputValue] = useState5("");
|
|
669
|
-
const [list, setList] = useState5(initialList);
|
|
670
|
-
const serializedData = prepareDataForDatabase(list);
|
|
671
|
-
useEffect4(() => {
|
|
672
|
-
onChange(property.path, serializedData);
|
|
673
|
-
}, [serializedData]);
|
|
674
|
-
return /* @__PURE__ */ React11.createElement(ThemeProvider5, { theme: theme5 }, /* @__PURE__ */ React11.createElement(StyledLabel3, { htmlFor: "custom" }, property.path), /* @__PURE__ */ React11.createElement(StyledWrapper, null, /* @__PURE__ */ React11.createElement(StyledListWrapper, null, /* @__PURE__ */ React11.createElement(
|
|
675
|
-
SortableList,
|
|
676
|
-
{
|
|
677
|
-
items: list,
|
|
678
|
-
onChange: setList,
|
|
679
|
-
renderItem: (item) => /* @__PURE__ */ React11.createElement(SortableList.Item, { id: item.id, onDelete: handleDeleteButton }, item.value)
|
|
680
|
-
}
|
|
681
|
-
)), /* @__PURE__ */ React11.createElement(StyledInputWrapper2, null, /* @__PURE__ */ React11.createElement(
|
|
682
|
-
Input3,
|
|
683
|
-
{
|
|
684
|
-
id: "stringList",
|
|
685
|
-
name: property.path,
|
|
686
|
-
value: serializedData,
|
|
687
|
-
hidden: true
|
|
688
|
-
}
|
|
689
|
-
), /* @__PURE__ */ React11.createElement(
|
|
690
|
-
StyledCustomInput2,
|
|
691
|
-
{
|
|
692
|
-
id: "custom",
|
|
693
|
-
name: "customInput",
|
|
694
|
-
value: inputValue,
|
|
695
|
-
onChange: handleInput,
|
|
696
|
-
onKeyPress: handleEnterPress
|
|
697
|
-
}
|
|
698
|
-
), /* @__PURE__ */ React11.createElement(Button3, { variant: "outlined", onClick: handleAddButton }, "Add"))));
|
|
699
|
-
function handleInput(e) {
|
|
700
|
-
setInputValue(e.target.value);
|
|
701
|
-
}
|
|
702
|
-
function handleEnterPress(e) {
|
|
703
|
-
if (e.key === "Enter") {
|
|
704
|
-
handleAddButton(e);
|
|
705
|
-
}
|
|
706
|
-
}
|
|
707
|
-
function handleAddButton(e) {
|
|
708
|
-
e.preventDefault();
|
|
709
|
-
if (Boolean(inputValue)) {
|
|
710
|
-
setList([...list, createListObject(inputValue)]);
|
|
711
|
-
setInputValue("");
|
|
712
|
-
}
|
|
713
|
-
}
|
|
714
|
-
function handleDeleteButton(e, id) {
|
|
715
|
-
e.preventDefault();
|
|
716
|
-
const newData = list.filter((item) => item.id !== id);
|
|
717
|
-
setList(newData);
|
|
718
|
-
}
|
|
719
|
-
function prepareDataForDatabase(list2) {
|
|
720
|
-
return list2.map(({ value }) => value).join(stringListSeparator);
|
|
721
|
-
}
|
|
722
|
-
function prepareDataForList(str) {
|
|
723
|
-
return str.split(stringListSeparator).map((item) => createListObject(item));
|
|
724
|
-
}
|
|
725
|
-
function createListObject(value) {
|
|
726
|
-
return {
|
|
727
|
-
id: `${Date.now()}-${Math.floor(Math.random() * 1e3)}`,
|
|
728
|
-
value
|
|
729
|
-
};
|
|
730
|
-
}
|
|
731
|
-
};
|
|
732
|
-
var StringList_default = StringList;
|
|
733
|
-
|
|
734
|
-
// src/components/StringList/StringListShow.tsx
|
|
735
|
-
import React12 from "react";
|
|
736
|
-
import { ThemeProvider as ThemeProvider6 } from "styled-components";
|
|
737
|
-
import { theme as theme6 } from "@adminjs/design-system";
|
|
738
|
-
var StringListShow = ({
|
|
739
|
-
property,
|
|
740
|
-
record,
|
|
741
|
-
stringListSeparator = separator
|
|
742
|
-
}) => {
|
|
743
|
-
return /* @__PURE__ */ React12.createElement(ThemeProvider6, { theme: theme6 }, /* @__PURE__ */ React12.createElement(StyledShowWrapper, null, /* @__PURE__ */ React12.createElement(StyledShowLabel2, null, property.path), record.params.facts && /* @__PURE__ */ React12.createElement("ul", null, record.params.facts.split(stringListSeparator).map((item, index) => /* @__PURE__ */ React12.createElement(StyledListItem, { key: index }, `- ${item}`)))));
|
|
744
|
-
};
|
|
745
|
-
var StringListShow_default = StringListShow;
|
|
1
|
+
export * from "./components/index.js";
|
|
2
|
+
import { parseHtml } from "./utils/parseHtml.js";
|
|
746
3
|
export {
|
|
747
|
-
ColorStatusEdit_default as ColorStatusEdit,
|
|
748
|
-
ColorStatusList_default as ColorStatusList,
|
|
749
|
-
ColorStatusShow_default as ColorStatusShow,
|
|
750
|
-
CustomSlug_default as CustomSlug,
|
|
751
|
-
Editor_default as Editor,
|
|
752
|
-
EditorList_default as EditorList,
|
|
753
|
-
EditorShow_default as EditorShow,
|
|
754
|
-
StringList_default as StringList,
|
|
755
|
-
StringListShow_default as StringListShow,
|
|
756
4
|
parseHtml
|
|
757
5
|
};
|
|
6
|
+
//# sourceMappingURL=index.js.map
|