@firecms/collection_editor 3.0.0-canary.13 → 3.0.0-canary.131

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.
Files changed (58) hide show
  1. package/LICENSE +114 -21
  2. package/dist/ConfigControllerProvider.d.ts +11 -2
  3. package/dist/index.d.ts +1 -0
  4. package/dist/index.es.js +4715 -3491
  5. package/dist/index.es.js.map +1 -1
  6. package/dist/index.umd.js +6685 -3
  7. package/dist/index.umd.js.map +1 -1
  8. package/dist/types/collection_editor_controller.d.ts +14 -2
  9. package/dist/types/collection_inference.d.ts +1 -1
  10. package/dist/ui/CollectionViewHeaderAction.d.ts +3 -2
  11. package/dist/ui/EditorCollectionActionStart.d.ts +2 -0
  12. package/dist/ui/PropertyAddColumnComponent.d.ts +3 -1
  13. package/dist/ui/collection_editor/CollectionEditorDialog.d.ts +4 -3
  14. package/dist/ui/collection_editor/CollectionEditorWelcomeView.d.ts +1 -1
  15. package/dist/ui/collection_editor/CollectionPropertiesEditorForm.d.ts +1 -1
  16. package/dist/ui/collection_editor/PropertyTree.d.ts +9 -9
  17. package/dist/ui/collection_editor/SubcollectionsEditTab.d.ts +1 -1
  18. package/dist/ui/collection_editor/properties/MarkdownPropertyField.d.ts +4 -0
  19. package/dist/ui/collection_editor/properties/StringPropertyField.d.ts +1 -1
  20. package/dist/useCollectionEditorPlugin.d.ts +15 -9
  21. package/dist/utils/collections.d.ts +6 -0
  22. package/package.json +20 -34
  23. package/src/ConfigControllerProvider.tsx +75 -63
  24. package/src/index.ts +1 -0
  25. package/src/types/collection_editor_controller.tsx +14 -4
  26. package/src/types/collection_inference.ts +1 -1
  27. package/src/ui/CollectionViewHeaderAction.tsx +9 -4
  28. package/src/ui/EditorCollectionAction.tsx +10 -63
  29. package/src/ui/EditorCollectionActionStart.tsx +88 -0
  30. package/src/ui/HomePageEditorCollectionAction.tsx +18 -13
  31. package/src/ui/NewCollectionButton.tsx +12 -10
  32. package/src/ui/NewCollectionCard.tsx +3 -3
  33. package/src/ui/PropertyAddColumnComponent.tsx +9 -4
  34. package/src/ui/collection_editor/CollectionDetailsForm.tsx +69 -8
  35. package/src/ui/collection_editor/CollectionEditorDialog.tsx +57 -32
  36. package/src/ui/collection_editor/CollectionEditorWelcomeView.tsx +6 -5
  37. package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx +33 -27
  38. package/src/ui/collection_editor/GetCodeDialog.tsx +15 -3
  39. package/src/ui/collection_editor/PropertyEditView.tsx +21 -13
  40. package/src/ui/collection_editor/PropertyFieldPreview.tsx +3 -6
  41. package/src/ui/collection_editor/PropertySelectItem.tsx +3 -3
  42. package/src/ui/collection_editor/PropertyTree.tsx +7 -5
  43. package/src/ui/collection_editor/SubcollectionsEditTab.tsx +26 -19
  44. package/src/ui/collection_editor/import/CollectionEditorImportDataPreview.tsx +25 -9
  45. package/src/ui/collection_editor/import/CollectionEditorImportMapping.tsx +9 -7
  46. package/src/ui/collection_editor/properties/BlockPropertyField.tsx +14 -8
  47. package/src/ui/collection_editor/properties/DateTimePropertyField.tsx +50 -47
  48. package/src/ui/collection_editor/properties/EnumPropertyField.tsx +1 -1
  49. package/src/ui/collection_editor/properties/MapPropertyField.tsx +5 -5
  50. package/src/ui/collection_editor/properties/MarkdownPropertyField.tsx +139 -0
  51. package/src/ui/collection_editor/properties/RepeatPropertyField.tsx +0 -1
  52. package/src/ui/collection_editor/properties/StoragePropertyField.tsx +31 -16
  53. package/src/ui/collection_editor/properties/StringPropertyField.tsx +1 -10
  54. package/src/ui/collection_editor/templates/pages_template.ts +1 -6
  55. package/src/useCollectionEditorPlugin.tsx +37 -27
  56. package/src/utils/collections.ts +30 -0
  57. package/dist/ui/RootCollectionSuggestions.d.ts +0 -3
  58. package/src/ui/RootCollectionSuggestions.tsx +0 -63
@@ -1,4 +1,4 @@
1
- import React, { useCallback } from "react";
1
+ import React from "react";
2
2
  import equal from "react-fast-compare"
3
3
 
4
4
  import {
@@ -48,7 +48,7 @@ export const PropertyTree = React.memo(
48
48
 
49
49
  const propertiesOrder = propertiesOrderProp ?? Object.keys(properties);
50
50
 
51
- const onDragEnd = useCallback((result: any) => {
51
+ const onDragEnd = (result: any) => {
52
52
  // dropped outside the list
53
53
  if (!result.destination) {
54
54
  return;
@@ -61,7 +61,7 @@ export const PropertyTree = React.memo(
61
61
  newPropertiesOrder.splice(endIndex, 0, removed);
62
62
  if (onPropertyMove)
63
63
  onPropertyMove(newPropertiesOrder, namespace);
64
- }, [namespace, onPropertyMove, propertiesOrder])
64
+ }
65
65
 
66
66
  return (
67
67
  <>
@@ -227,7 +227,8 @@ export function PropertyTreeEntry({
227
227
  <AutoAwesomeIcon size="small" className={"p-2"}/>
228
228
  </Tooltip>}
229
229
 
230
- {onPropertyRemove && <Tooltip title={"Remove"}>
230
+ {onPropertyRemove && <Tooltip title={"Remove"}
231
+ asChild={true}>
231
232
  <IconButton size="small"
232
233
  color="inherit"
233
234
  onClick={() => onPropertyRemove(propertyKey, namespace)}>
@@ -235,7 +236,8 @@ export function PropertyTreeEntry({
235
236
  </IconButton>
236
237
  </Tooltip>}
237
238
 
238
- {onPropertyMove && <Tooltip title={"Move"}>
239
+ {onPropertyMove && <Tooltip title={"Move"}
240
+ asChild={true}>
239
241
  <IconButton
240
242
  component={"span"}
241
243
  size="small"
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import {
3
- DeleteConfirmationDialog,
3
+ ConfirmationDialog,
4
4
  EntityCollection,
5
5
  EntityCustomView,
6
6
  resolveEntityView,
@@ -41,7 +41,7 @@ export function SubcollectionsEditTab({
41
41
  parentCollection?: EntityCollection,
42
42
  configController: CollectionsConfigController;
43
43
  collectionInference?: CollectionInference;
44
- getUser: (uid: string) => User | null;
44
+ getUser?: (uid: string) => User | null;
45
45
  parentCollectionIds?: string[];
46
46
  }) {
47
47
 
@@ -61,7 +61,7 @@ export function SubcollectionsEditTab({
61
61
  setFieldValue,
62
62
  } = useFormex<EntityCollection>();
63
63
 
64
- const subcollections = collection.subcollections ?? [];
64
+ const [subcollections, setSubcollections] = React.useState<EntityCollection[]>(collection.subcollections ?? []);
65
65
  const resolvedEntityViews = values.entityViews?.filter(e => typeof e === "string")
66
66
  .map(e => resolveEntityView(e, contextEntityViews))
67
67
  .filter(Boolean) as EntityCustomView[] ?? [];
@@ -95,7 +95,8 @@ export function SubcollectionsEditTab({
95
95
  </TableCell>
96
96
  <TableCell
97
97
  align="right">
98
- <Tooltip title={"Remove"}>
98
+ <Tooltip title={"Remove"}
99
+ asChild={true}>
99
100
  <IconButton size="small"
100
101
  onClick={(e) => {
101
102
  e.preventDefault();
@@ -135,7 +136,7 @@ export function SubcollectionsEditTab({
135
136
  {totalEntityViews === 0 &&
136
137
  <Alert action={<Button variant="text"
137
138
  size={"small"}
138
- href={"https://firecms.co/docs/customization_quickstart"}
139
+ href={"https://firecms.co/docs/cloud/quickstart"}
139
140
  component={"a"}
140
141
  rel="noopener noreferrer"
141
142
  target="_blank">More info</Button>}>
@@ -157,7 +158,8 @@ export function SubcollectionsEditTab({
157
158
  </TableCell>
158
159
  <TableCell
159
160
  align="right">
160
- <Tooltip title={"Remove"}>
161
+ <Tooltip title={"Remove"}
162
+ asChild={true}>
161
163
  <IconButton size="small"
162
164
  onClick={(e) => {
163
165
  e.preventDefault();
@@ -209,30 +211,32 @@ export function SubcollectionsEditTab({
209
211
  <div style={{ height: "52px" }}/>
210
212
 
211
213
  {subcollectionToDelete &&
212
- <DeleteConfirmationDialog open={Boolean(subcollectionToDelete)}
213
- onAccept={() => {
214
+ <ConfirmationDialog open={Boolean(subcollectionToDelete)}
215
+ onAccept={() => {
214
216
  const props = {
215
217
  id: subcollectionToDelete,
216
218
  parentCollectionIds: [...(parentCollectionIds ?? []), collection.id]
217
219
  };
218
220
  console.debug("Deleting subcollection", props)
219
- configController.deleteCollection(props);
220
- setSubcollectionToDelete(undefined);
221
+ configController.deleteCollection(props).then(() => {
222
+ setSubcollectionToDelete(undefined);
223
+ setSubcollections(subcollections?.filter(e => e.id !== subcollectionToDelete))
224
+ });
221
225
  }}
222
- onCancel={() => setSubcollectionToDelete(undefined)}
223
- title={<>Delete this subcollection?</>}
224
- body={<> This will <b>not
226
+ onCancel={() => setSubcollectionToDelete(undefined)}
227
+ title={<>Delete this subcollection?</>}
228
+ body={<> This will <b>not
225
229
  delete any data</b>, only
226
230
  the collection in the CMS</>}/>}
227
231
  {viewToDelete &&
228
- <DeleteConfirmationDialog open={Boolean(viewToDelete)}
229
- onAccept={() => {
232
+ <ConfirmationDialog open={Boolean(viewToDelete)}
233
+ onAccept={() => {
230
234
  setFieldValue("entityViews", values.entityViews?.filter(e => e !== viewToDelete));
231
235
  setViewToDelete(undefined);
232
236
  }}
233
- onCancel={() => setViewToDelete(undefined)}
234
- title={<>Remove this view?</>}
235
- body={<>This will <b>not
237
+ onCancel={() => setViewToDelete(undefined)}
238
+ title={<>Remove this view?</>}
239
+ body={<>This will <b>not
236
240
  delete any data</b>, only
237
241
  the view in the CMS</>}/>}
238
242
 
@@ -245,7 +249,10 @@ export function SubcollectionsEditTab({
245
249
  isNewCollection={false}
246
250
  {...currentDialog}
247
251
  getUser={getUser}
248
- handleClose={() => {
252
+ handleClose={(updatedCollection) => {
253
+ if (updatedCollection && !subcollections.map(e => e.id).includes(updatedCollection.id)) {
254
+ setSubcollections([...subcollections, updatedCollection]);
255
+ }
249
256
  setCurrentDialog(undefined);
250
257
  }}/>
251
258
 
@@ -1,21 +1,33 @@
1
- import { convertDataToEntity, getPropertiesMapping, ImportConfig } from "@firecms/data_import_export";
2
- import { EntityCollectionTable, Properties, useSelectionController } from "@firecms/core";
3
- import { useEffect } from "react";
1
+ import { convertDataToEntity, ImportConfig } from "@firecms/data_import_export";
2
+ import { CircularProgressCenter, EntityCollectionTable, Properties, useSelectionController } from "@firecms/core";
3
+ import { useEffect, useState } from "react";
4
4
  import { Typography } from "@firecms/ui";
5
5
 
6
- export function CollectionEditorImportDataPreview({ importConfig, properties, propertiesOrder }: {
6
+ export function CollectionEditorImportDataPreview({
7
+ importConfig,
8
+ properties,
9
+ propertiesOrder
10
+ }: {
7
11
  importConfig: ImportConfig,
8
12
  properties: Properties,
9
13
  propertiesOrder: string[]
10
14
  }) {
11
15
 
12
- useEffect(() => {
13
- const propertiesMapping = getPropertiesMapping(importConfig.originProperties, properties);
14
- const mappedData = importConfig.importData.map(d => convertDataToEntity(d, importConfig.idColumn, importConfig.headersMapping, properties, propertiesMapping, "TEMP_PATH"));
16
+ const [loading, setLoading] = useState<boolean>(false);
17
+
18
+ async function loadEntities() {
19
+ // const propertiesMapping = getPropertiesMapping(importConfig.originProperties, properties, importConfig.headersMapping);
20
+ const mappedData = importConfig.importData.map(d => convertDataToEntity(d, importConfig.idColumn, importConfig.headersMapping, properties, "TEMP_PATH", importConfig.defaultValues));
15
21
  importConfig.setEntities(mappedData);
22
+ }
23
+
24
+ useEffect(() => {
25
+ loadEntities().finally(() => setLoading(false));
16
26
  }, []);
17
27
 
18
28
  const selectionController = useSelectionController();
29
+ if (loading)
30
+ return <CircularProgressCenter/>
19
31
 
20
32
  return <EntityCollectionTable
21
33
  title={<div>
@@ -31,7 +43,11 @@ export function CollectionEditorImportDataPreview({ importConfig, properties, pr
31
43
  filterable={false}
32
44
  sortable={false}
33
45
  selectionController={selectionController}
34
- displayedColumnIds={propertiesOrder.map(p => ({ key: p, disabled: false }))}
35
- properties={properties}/>
46
+ displayedColumnIds={propertiesOrder.map(p => ({
47
+ key: p,
48
+ disabled: false
49
+ }))}
50
+ properties={properties}
51
+ enablePopupIcon={false}/>
36
52
 
37
53
  }
@@ -6,7 +6,7 @@ import {
6
6
  } from "@firecms/data_import_export";
7
7
  import { getIn, useFormex } from "@firecms/formex";
8
8
 
9
- import { PropertyConfigBadge, getFieldConfig, getFieldId, Properties, Property, PropertyConfig, } from "@firecms/core";
9
+ import { getFieldConfig, getFieldId, Properties, Property, PropertyConfig, PropertyConfigBadge, } from "@firecms/core";
10
10
  import { Container, Select, Tooltip, Typography } from "@firecms/ui";
11
11
  import React, { useState } from "react";
12
12
  import { OnPropertyChangedParams, PropertyFormDialog, PropertyWithId } from "../PropertyEditView";
@@ -143,18 +143,20 @@ export function CollectionEditorImportMapping({
143
143
  <div className={"overflow-auto my-auto"}>
144
144
  <Container maxWidth={"6xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
145
145
 
146
- <Typography variant="h6" className={"mt-4"}>Data property mapping</Typography>
146
+ <Typography variant="h6" className={"my-4 ml-3.5"}>Data property mapping</Typography>
147
147
 
148
- <DataNewPropertiesMapping headersMapping={importConfig.headersMapping}
149
- idColumn={importConfig.idColumn}
150
- originProperties={importConfig.originProperties}
148
+ <DataNewPropertiesMapping importConfig={importConfig}
151
149
  destinationProperties={values.properties as Properties}
152
- onIdPropertyChanged={(value) => importConfig.setIdColumn(value ?? undefined)}
153
150
  buildPropertyView={({
154
151
  property,
155
152
  propertyKey,
156
- importKey
153
+ importKey,
154
+ isIdColumn
157
155
  }) => {
156
+ if (isIdColumn) {
157
+ return <Typography> This column will be used as ID</Typography>
158
+ }
159
+
158
160
  return <ImportNewPropertyFieldPreview
159
161
  property={property}
160
162
  propertyKey={propertyKey}
@@ -1,12 +1,18 @@
1
- import React, { useCallback, useState } from "react";
1
+ import React, { useState } from "react";
2
2
  import { AddIcon, Button, Paper, Typography } from "@firecms/ui";
3
3
  import { getIn, useFormex } from "@firecms/formex";
4
4
  import { PropertyFormDialog } from "../PropertyEditView";
5
- import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath } from "../util";
5
+ import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath, namespaceToPropertiesPath } from "../util";
6
6
  import { PropertyTree } from "../PropertyTree";
7
7
  import { ArrayProperty, Property, PropertyConfig } from "@firecms/core";
8
8
 
9
- export function BlockPropertyField({ disabled, getData, allowDataInference, propertyConfigs, collectionEditable }: {
9
+ export function BlockPropertyField({
10
+ disabled,
11
+ getData,
12
+ allowDataInference,
13
+ propertyConfigs,
14
+ collectionEditable
15
+ }: {
10
16
  disabled: boolean;
11
17
  getData?: () => Promise<object[]>;
12
18
  allowDataInference: boolean;
@@ -43,20 +49,20 @@ export function BlockPropertyField({ disabled, getData, allowDataInference, prop
43
49
  const selectedPropertyFullId = selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : undefined;
44
50
  const selectedProperty = selectedPropertyFullId ? getIn(values.oneOf?.properties, selectedPropertyFullId.replaceAll(".", ".properties.")) : undefined;
45
51
 
46
- const deleteProperty = useCallback((propertyKey?: string, namespace?: string) => {
52
+ const deleteProperty = (propertyKey?: string, namespace?: string) => {
47
53
  const fullId = propertyKey ? getFullId(propertyKey, namespace) : undefined;
48
54
  if (!fullId)
49
55
  throw Error("collection editor miss config");
50
56
 
51
57
  setFieldValue(`oneOf.${idToPropertiesPath(fullId)}`, undefined, false);
52
58
  const propertiesOrderPath = `oneOf.${namespaceToPropertiesOrderPath(namespace)}`;
53
- const currentPropertiesOrder: string[] = getIn(values, propertiesOrderPath);
59
+ const currentPropertiesOrder: string[] = getIn(values, propertiesOrderPath) ?? Object.keys(getIn(values, namespaceToPropertiesPath(namespace)));
54
60
  setFieldValue(propertiesOrderPath, currentPropertiesOrder.filter((p) => p !== propertyKey), false);
55
61
 
56
62
  setPropertyDialogOpen(false);
57
63
  setSelectedPropertyKey(undefined);
58
64
  setSelectedPropertyNamespace(undefined);
59
- }, [setFieldValue, values]);
65
+ };
60
66
 
61
67
  const addChildButton = <Button
62
68
  autoFocus
@@ -68,9 +74,9 @@ export function BlockPropertyField({ disabled, getData, allowDataInference, prop
68
74
  Add property to {values.name ?? "this block"}
69
75
  </Button>;
70
76
 
71
- const onPropertyMove = useCallback((propertiesOrder: string[], namespace?: string) => {
77
+ const onPropertyMove = (propertiesOrder: string[], namespace?: string) => {
72
78
  setFieldValue(`oneOf.${namespaceToPropertiesOrderPath(namespace)}`, propertiesOrder, false);
73
- }, []);
79
+ };
74
80
 
75
81
  return (
76
82
  <>
@@ -26,53 +26,56 @@ export function DateTimePropertyField({ disabled }: {
26
26
 
27
27
  return (
28
28
  <>
29
- <div className={"flex flex-col col-span-12"}>
30
- <Select name={modePath}
31
- value={modeValue ?? "date"}
32
- error={Boolean(modeError)}
33
- onValueChange={(v) => setFieldValue(modePath, v)}
34
- label={"Mode"}
35
- renderValue={(v) => {
36
- switch (v) {
37
- case "date_time":
38
- return "Date/Time";
39
- case "date":
40
- return "Date";
41
- default:
42
- return "";
43
- }
44
- }}
45
- disabled={disabled}>
46
- <SelectItem value={"date_time"}> Date/Time </SelectItem>
47
- <SelectItem value={"date"}> Date </SelectItem>
48
- </Select>
49
- <FieldCaption error={Boolean(modeError)}>
50
- {modeError}
51
- </FieldCaption>
52
-
53
- <Select name={autoValuePath}
54
- disabled={disabled}
55
- value={autoValueValue ?? ""}
56
- onValueChange={(v) => setFieldValue(autoValuePath, v === "none" ? null : v)}
57
- renderValue={(v) => {
58
- switch (v) {
59
- case "on_create":
60
- return "On create";
61
- case "on_update":
62
- return "On any update";
63
- default:
64
- return "None";
65
- }
66
- }}
67
- error={Boolean(autoValueError)}
68
- label={"Automatic value"}>
69
- <SelectItem value={"none"}> None </SelectItem>
70
- <SelectItem value={"on_create"}> On create </SelectItem>
71
- <SelectItem value={"on_update"}> On any update </SelectItem>
72
- </Select>
73
- <FieldCaption error={Boolean(autoValueError)}>
74
- {autoValueError ?? "Update this field automatically when creating or updating the entity"}
75
- </FieldCaption>
29
+ <div className={"flex flex-col col-span-12 gap-2"}>
30
+ <div>
31
+ <Select name={modePath}
32
+ value={modeValue ?? "date"}
33
+ error={Boolean(modeError)}
34
+ onValueChange={(v) => setFieldValue(modePath, v)}
35
+ label={"Mode"}
36
+ renderValue={(v) => {
37
+ switch (v) {
38
+ case "date_time":
39
+ return "Date/Time";
40
+ case "date":
41
+ return "Date";
42
+ default:
43
+ return "";
44
+ }
45
+ }}
46
+ disabled={disabled}>
47
+ <SelectItem value={"date_time"}> Date/Time </SelectItem>
48
+ <SelectItem value={"date"}> Date </SelectItem>
49
+ </Select>
50
+ <FieldCaption error={Boolean(modeError)}>
51
+ {modeError}
52
+ </FieldCaption>
53
+ </div>
54
+ <div>
55
+ <Select name={autoValuePath}
56
+ disabled={disabled}
57
+ value={autoValueValue ?? ""}
58
+ onValueChange={(v) => setFieldValue(autoValuePath, v === "none" ? null : v)}
59
+ renderValue={(v) => {
60
+ switch (v) {
61
+ case "on_create":
62
+ return "On create";
63
+ case "on_update":
64
+ return "On any update";
65
+ default:
66
+ return "None";
67
+ }
68
+ }}
69
+ error={Boolean(autoValueError)}
70
+ label={"Automatic value"}>
71
+ <SelectItem value={"none"}> None </SelectItem>
72
+ <SelectItem value={"on_create"}> On create </SelectItem>
73
+ <SelectItem value={"on_update"}> On any update </SelectItem>
74
+ </Select>
75
+ <FieldCaption error={Boolean(autoValueError)}>
76
+ {autoValueError ?? "Update this field automatically when creating or updating the entity"}
77
+ </FieldCaption>
78
+ </div>
76
79
 
77
80
  </div>
78
81
 
@@ -71,7 +71,7 @@ export function EnumPropertyField({
71
71
  }}
72
72
  getData={getData
73
73
  ? () => getData()
74
- .then(res => res.map(d => values.id && getIn(d, values.id)).filter(Boolean))
74
+ .then(res => res.map(entry => values.id && getIn(entry, values.id)).filter(Boolean))
75
75
  : undefined}
76
76
  onValuesChanged={onValuesChanged}/>
77
77
  </div>
@@ -1,4 +1,4 @@
1
- import React, { useCallback, useState } from "react";
1
+ import React, { useState } from "react";
2
2
  import { FieldCaption, MapProperty, Property, PropertyConfig, } from "@firecms/core";
3
3
  import { AddIcon, BooleanSwitchWithLabel, Button, Paper, Typography } from "@firecms/ui";
4
4
  import { PropertyFormDialog } from "../PropertyEditView";
@@ -42,7 +42,7 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
42
42
  setPropertyDialogOpen(false);
43
43
  };
44
44
 
45
- const deleteProperty = useCallback((propertyKey?: string, namespace?: string) => {
45
+ const deleteProperty = (propertyKey?: string, namespace?: string) => {
46
46
  const fullId = propertyKey ? getFullId(propertyKey, namespace) : undefined;
47
47
  if (!fullId)
48
48
  throw Error("collection editor miss config");
@@ -58,16 +58,16 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
58
58
  setPropertyDialogOpen(false);
59
59
  setSelectedPropertyKey(undefined);
60
60
  setSelectedPropertyNamespace(undefined);
61
- }, [setFieldValue, values]);
61
+ };
62
62
 
63
63
  const selectedPropertyFullId = selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : undefined;
64
64
  const selectedProperty = selectedPropertyFullId ? getIn(values.properties, selectedPropertyFullId.replaceAll(".", ".properties.")) : undefined;
65
65
 
66
66
  const empty = !propertiesOrder || propertiesOrder.length < 1;
67
67
 
68
- const onPropertyMove = useCallback((propertiesOrder: string[], namespace?: string) => {
68
+ const onPropertyMove = (propertiesOrder: string[], namespace?: string) => {
69
69
  setFieldValue(namespaceToPropertiesOrderPath(namespace), propertiesOrder, false);
70
- }, []);
70
+ };
71
71
 
72
72
  return (
73
73
  <>
@@ -0,0 +1,139 @@
1
+ import React from "react";
2
+ import { StringPropertyValidation } from "./validation/StringPropertyValidation";
3
+ import { ValidationPanel } from "./validation/ValidationPanel";
4
+ import { Field, getIn, useFormex } from "@firecms/formex";
5
+
6
+ import { DebouncedTextField, ExpandablePanel, FileUploadIcon, TextField, Typography } from "@firecms/ui";
7
+
8
+ export function MarkdownPropertyField({
9
+ disabled,
10
+ showErrors
11
+ }: {
12
+ disabled: boolean;
13
+ showErrors: boolean;
14
+ }) {
15
+
16
+ const {
17
+ values,
18
+ setFieldValue
19
+ } = useFormex();
20
+
21
+ const baseStoragePath = "storage";
22
+
23
+ const metadata = `${baseStoragePath}.metadata`;
24
+ const fileName = `${baseStoragePath}.fileName`;
25
+ const maxSize = `${baseStoragePath}.maxSize`;
26
+ const storagePath = `${baseStoragePath}.storagePath`;
27
+
28
+ const fileNameValue = getIn(values, fileName) ?? "{rand}_{file}";
29
+ const storagePathValue = getIn(values, storagePath) ?? "/";
30
+ const maxSizeValue = getIn(values, maxSize);
31
+
32
+ const hasFilenameCallback = typeof fileNameValue === "function";
33
+ const hasStoragePathCallback = typeof storagePathValue === "function";
34
+
35
+ return (
36
+ <>
37
+ <div className={"col-span-12"}>
38
+
39
+ <ValidationPanel>
40
+
41
+ <StringPropertyValidation disabled={disabled}
42
+ length={true}
43
+ lowercase={true}
44
+ max={true}
45
+ min={true}
46
+ trim={true}
47
+ uppercase={true}
48
+ showErrors={showErrors}/>
49
+
50
+ </ValidationPanel>
51
+
52
+ </div>
53
+
54
+ <div className={"col-span-12"}>
55
+ <ExpandablePanel
56
+ title={
57
+ <div className="flex flex-row text-gray-500">
58
+ <FileUploadIcon/>
59
+ <Typography variant={"subtitle2"}
60
+ className="ml-2">
61
+ File upload config
62
+ </Typography>
63
+ </div>
64
+ }>
65
+
66
+ <div className={"grid grid-cols-12 gap-2 p-4"}>
67
+
68
+
69
+ <div className={"col-span-12"}>
70
+ <Field name={fileName}
71
+ as={DebouncedTextField}
72
+ label={"File name"}
73
+ size={"small"}
74
+ disabled={hasFilenameCallback || disabled}
75
+ value={hasFilenameCallback ? "-" : fileNameValue}
76
+ />
77
+ </div>
78
+ <div className={"col-span-12"}>
79
+ <Field name={storagePath}
80
+ as={DebouncedTextField}
81
+ label={"Storage path"}
82
+ disabled={hasStoragePathCallback || disabled}
83
+ size={"small"}
84
+ value={hasStoragePathCallback ? "-" : storagePathValue}
85
+ />
86
+ <Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
87
+ <p>You can use the following placeholders in
88
+ the file name
89
+ and storage path values:</p>
90
+ <ul>
91
+ <li>{"{file} - Full name of the uploaded file"}</li>
92
+ <li>{"{file.name} - Name of the uploaded file without extension"}</li>
93
+ <li>{"{file.ext} - Extension of the uploaded file"}</li>
94
+ <li>{"{entityId} - ID of the entity"}</li>
95
+ <li>{"{propertyKey} - ID of this field"}</li>
96
+ <li>{"{path} - Path of this entity"}</li>
97
+ <li>{"{rand} - Random value used to avoid name collisions"}</li>
98
+ </ul>
99
+ </Typography>
100
+
101
+ <Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
102
+ When using Markdown, the URL of the uploaded files are always saved in the text value
103
+ (not
104
+ the path).
105
+ </Typography>
106
+ </div>
107
+
108
+ <div className={"col-span-12"}>
109
+ <DebouncedTextField name={maxSize}
110
+ type={"number"}
111
+ label={"Max size (in bytes)"}
112
+ size={"small"}
113
+ value={maxSizeValue !== undefined && maxSizeValue !== null ? maxSizeValue.toString() : ""}
114
+ onChange={(e) => {
115
+ const value = e.target.value;
116
+ if (value === "") setFieldValue(maxSize, undefined);
117
+ else setFieldValue(maxSize, parseInt(value));
118
+ }}
119
+ />
120
+ </div>
121
+
122
+ </div>
123
+ </ExpandablePanel>
124
+ </div>
125
+
126
+ <div className={"col-span-12"}>
127
+
128
+ <TextField name={"defaultValue"}
129
+ disabled={disabled}
130
+ onChange={(e: any) => {
131
+ setFieldValue("defaultValue", e.target.value === "" ? undefined : e.target.value);
132
+ }}
133
+ label={"Default value"}
134
+ value={getIn(values, "defaultValue") ?? ""}/>
135
+
136
+ </div>
137
+ </>
138
+ );
139
+ }
@@ -39,7 +39,6 @@ export function RepeatPropertyField({
39
39
 
40
40
  const onPropertyChanged = ({ id, property, namespace }:
41
41
  { id?: string, property: Property, namespace?: string }) => {
42
- console.log("onPropertyChanged", id, property, namespace);
43
42
  setFieldValue("of", property);
44
43
  };
45
44