@firecms/core 3.0.0-beta.2 → 3.0.0-canary.1
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/components/EntityCollectionTable/EntityCollectionRowActions.d.ts +2 -6
- package/dist/index.es.js +810 -805
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +5 -5
- package/dist/index.umd.js.map +1 -1
- package/package.json +12 -4
- package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx +33 -36
- package/src/components/EntityCollectionTable/EntityCollectionTable.tsx +36 -38
- package/src/components/EntityCollectionView/EntityCollectionView.tsx +9 -9
- package/src/hooks/useBuildNavigationController.tsx +26 -6
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@firecms/core",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "3.0.0-
|
|
4
|
+
"version": "3.0.0-canary.1",
|
|
5
5
|
"description": "Awesome Firebase/Firestore-based headless open-source CMS",
|
|
6
6
|
"funding": {
|
|
7
7
|
"url": "https://github.com/sponsors/firecmsco"
|
|
@@ -37,9 +37,17 @@
|
|
|
37
37
|
"clean": "rm -rf dist && find ./src -name '*.js' -type f | xargs rm -f",
|
|
38
38
|
"generateIcons": "ts-node --esm src/icons/generateIcons.ts"
|
|
39
39
|
},
|
|
40
|
+
"exports": {
|
|
41
|
+
".": {
|
|
42
|
+
"import": "./dist/index.es.js",
|
|
43
|
+
"require": "./dist/index.umd.js",
|
|
44
|
+
"types": "./dist/src/index.d.ts"
|
|
45
|
+
},
|
|
46
|
+
"./package.json": "./package.json"
|
|
47
|
+
},
|
|
40
48
|
"dependencies": {
|
|
41
|
-
"@firecms/formex": "^3.0.0-
|
|
42
|
-
"@firecms/ui": "^3.0.0-
|
|
49
|
+
"@firecms/formex": "^3.0.0-canary.1",
|
|
50
|
+
"@firecms/ui": "^3.0.0-canary.1",
|
|
43
51
|
"@fontsource/ibm-plex-mono": "^5.0.8",
|
|
44
52
|
"@fontsource/roboto": "^5.0.8",
|
|
45
53
|
"@hello-pangea/dnd": "^16.5.0",
|
|
@@ -107,7 +115,7 @@
|
|
|
107
115
|
"dist",
|
|
108
116
|
"src"
|
|
109
117
|
],
|
|
110
|
-
"gitHead": "
|
|
118
|
+
"gitHead": "2e4b4126562ef2d7e099bba8b116f77ba3e1e3cf",
|
|
111
119
|
"publishConfig": {
|
|
112
120
|
"access": "public"
|
|
113
121
|
}
|
|
@@ -14,46 +14,43 @@ import { useFireCMSContext, useLargeLayout } from "../../hooks";
|
|
|
14
14
|
* @param selectionEnabled
|
|
15
15
|
* @param size
|
|
16
16
|
* @param toggleEntitySelection
|
|
17
|
-
* @param onCopyClicked
|
|
18
|
-
* @param onEditClicked
|
|
19
|
-
* @param onDeleteClicked
|
|
20
17
|
* @param hideId
|
|
21
18
|
* @constructor
|
|
22
19
|
*
|
|
23
20
|
* @group Collection components
|
|
24
21
|
*/
|
|
25
|
-
export const EntityCollectionRowActions =
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
22
|
+
export const EntityCollectionRowActions = function EntityCollectionRowActions({
|
|
23
|
+
entity,
|
|
24
|
+
collection,
|
|
25
|
+
fullPath,
|
|
26
|
+
width,
|
|
27
|
+
frozen,
|
|
28
|
+
isSelected,
|
|
29
|
+
selectionEnabled,
|
|
30
|
+
size,
|
|
31
|
+
highlightEntity,
|
|
32
|
+
onCollectionChange,
|
|
33
|
+
unhighlightEntity,
|
|
34
|
+
actions = [],
|
|
35
|
+
hideId,
|
|
36
|
+
selectionController,
|
|
37
|
+
}:
|
|
38
|
+
{
|
|
39
|
+
entity: Entity<any>,
|
|
40
|
+
collection?: EntityCollection<any>,
|
|
41
|
+
fullPath?: string,
|
|
42
|
+
width: number,
|
|
43
|
+
frozen?: boolean,
|
|
44
|
+
size: CollectionSize,
|
|
45
|
+
isSelected?: boolean,
|
|
46
|
+
selectionEnabled?: boolean,
|
|
47
|
+
actions?: EntityAction[],
|
|
48
|
+
hideId?: boolean,
|
|
49
|
+
onCollectionChange?: () => void,
|
|
50
|
+
selectionController?: SelectionController;
|
|
51
|
+
highlightEntity?: (entity: Entity<any>) => void;
|
|
52
|
+
unhighlightEntity?: (entity: Entity<any>) => void;
|
|
53
|
+
}) {
|
|
57
54
|
|
|
58
55
|
const largeLayout = useLargeLayout();
|
|
59
56
|
|
|
@@ -171,4 +168,4 @@ export const EntityCollectionRowActions = React.memo(function EntityCollectionRo
|
|
|
171
168
|
</div>
|
|
172
169
|
);
|
|
173
170
|
|
|
174
|
-
}
|
|
171
|
+
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useCallback,
|
|
1
|
+
import React, { useCallback, useMemo, useRef } from "react";
|
|
2
2
|
import equal from "react-fast-compare";
|
|
3
3
|
import { AdditionalFieldDelegate, CollectionSize, Entity, FireCMSContext, User } from "../../types";
|
|
4
4
|
import { PropertyTableCell } from "./PropertyTableCell";
|
|
@@ -8,7 +8,6 @@ import { CellRendererParams, VirtualTableColumn } from "../VirtualTable";
|
|
|
8
8
|
import { getValueInPath } from "../../util";
|
|
9
9
|
import { getRowHeight } from "../VirtualTable/common";
|
|
10
10
|
import { EntityCollectionRowActions } from "./EntityCollectionRowActions";
|
|
11
|
-
import { EntityCollectionTableController } from "../common/types";
|
|
12
11
|
import { CollectionTableToolbar } from "./internal/CollectionTableToolbar";
|
|
13
12
|
import { EntityCollectionTableProps } from "./EntityCollectionTableProps";
|
|
14
13
|
import { EntityTableCell } from "./internal/EntityTableCell";
|
|
@@ -111,12 +110,12 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
|
|
|
111
110
|
|
|
112
111
|
const customFieldValidator: CustomFieldValidator | undefined = uniqueFieldValidator;
|
|
113
112
|
|
|
114
|
-
const propertyCellRenderer =
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
113
|
+
const propertyCellRenderer = ({
|
|
114
|
+
column,
|
|
115
|
+
columnIndex,
|
|
116
|
+
rowData,
|
|
117
|
+
rowIndex
|
|
118
|
+
}: CellRendererParams<any>) => {
|
|
120
119
|
|
|
121
120
|
const entity: Entity<M> = rowData;
|
|
122
121
|
|
|
@@ -158,7 +157,7 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
|
|
|
158
157
|
}
|
|
159
158
|
</ErrorBoundary>);
|
|
160
159
|
|
|
161
|
-
}
|
|
160
|
+
};
|
|
162
161
|
|
|
163
162
|
const additionalCellRenderer = useCallback(({
|
|
164
163
|
column,
|
|
@@ -205,30 +204,29 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
|
|
|
205
204
|
|
|
206
205
|
}, [size, selectedEntityIds]);
|
|
207
206
|
|
|
208
|
-
const collectionColumns: VirtualTableColumn[] =
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
const idColumn: VirtualTableColumn = useMemo(() => ({
|
|
207
|
+
const collectionColumns: VirtualTableColumn[] = (() => {
|
|
208
|
+
const columnsResult: VirtualTableColumn[] = propertiesToColumns({
|
|
209
|
+
properties,
|
|
210
|
+
sortable,
|
|
211
|
+
forceFilter,
|
|
212
|
+
disabledFilter: disabledFilterChange,
|
|
213
|
+
AdditionalHeaderWidget
|
|
214
|
+
});
|
|
215
|
+
|
|
216
|
+
const additionalTableColumns: VirtualTableColumn[] = additionalFields
|
|
217
|
+
? additionalFields.map((additionalField) =>
|
|
218
|
+
({
|
|
219
|
+
key: additionalField.key,
|
|
220
|
+
align: "left",
|
|
221
|
+
sortable: false,
|
|
222
|
+
title: additionalField.name,
|
|
223
|
+
width: additionalField.width ?? 200
|
|
224
|
+
}))
|
|
225
|
+
: [];
|
|
226
|
+
return [...columnsResult, ...additionalTableColumns];
|
|
227
|
+
})();
|
|
228
|
+
|
|
229
|
+
const idColumn: VirtualTableColumn = {
|
|
232
230
|
key: "id_ewcfedcswdf3",
|
|
233
231
|
width: getIdColumnWidth?.() ?? (largeLayout ? 160 : 130),
|
|
234
232
|
title: "ID",
|
|
@@ -237,17 +235,17 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
|
|
|
237
235
|
headerAlign: "center",
|
|
238
236
|
align: "center",
|
|
239
237
|
AdditionalHeaderWidget: () => additionalIDHeaderWidget
|
|
240
|
-
}
|
|
238
|
+
}
|
|
241
239
|
|
|
242
|
-
const columns: VirtualTableColumn[] =
|
|
240
|
+
const columns: VirtualTableColumn[] = [
|
|
243
241
|
idColumn,
|
|
244
242
|
...displayedColumnIds
|
|
245
243
|
.map((p) => {
|
|
246
244
|
return collectionColumns.find(c => c.key === p.key);
|
|
247
245
|
}).filter(Boolean) as VirtualTableColumn[]
|
|
248
|
-
]
|
|
246
|
+
];
|
|
249
247
|
|
|
250
|
-
const cellRenderer =
|
|
248
|
+
const cellRenderer = (props: CellRendererParams<any>) => {
|
|
251
249
|
const column = props.column;
|
|
252
250
|
const columns = props.columns;
|
|
253
251
|
const columnKey = column.key;
|
|
@@ -287,7 +285,7 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
|
|
|
287
285
|
<ErrorView error={e}/>
|
|
288
286
|
</EntityTableCell>;
|
|
289
287
|
}
|
|
290
|
-
}
|
|
288
|
+
}
|
|
291
289
|
|
|
292
290
|
return (
|
|
293
291
|
|
|
@@ -433,7 +433,7 @@ export const EntityCollectionView = React.memo(
|
|
|
433
433
|
|
|
434
434
|
const largeLayout = useLargeLayout();
|
|
435
435
|
|
|
436
|
-
const getActionsForEntity =
|
|
436
|
+
const getActionsForEntity = ({ entity, customEntityActions }: {
|
|
437
437
|
entity?: Entity<M>,
|
|
438
438
|
customEntityActions?: EntityAction[]
|
|
439
439
|
}): EntityAction[] => {
|
|
@@ -446,7 +446,7 @@ export const EntityCollectionView = React.memo(
|
|
|
446
446
|
if (customEntityActions)
|
|
447
447
|
actions.push(...customEntityActions);
|
|
448
448
|
return actions;
|
|
449
|
-
}
|
|
449
|
+
};
|
|
450
450
|
|
|
451
451
|
const getIdColumnWidth = useCallback(() => {
|
|
452
452
|
const entityActions = getActionsForEntity({});
|
|
@@ -456,12 +456,12 @@ export const EntityCollectionView = React.memo(
|
|
|
456
456
|
return (largeLayout ? (80 + actionsWidth) : (70 + actionsWidth)) + (collapsedActions.length > 0 ? (largeLayout ? 40 : 30) : 0);
|
|
457
457
|
}, [largeLayout]);
|
|
458
458
|
|
|
459
|
-
const tableRowActionsBuilder =
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
459
|
+
const tableRowActionsBuilder = ({
|
|
460
|
+
entity,
|
|
461
|
+
size,
|
|
462
|
+
width,
|
|
463
|
+
frozen
|
|
464
|
+
}: {
|
|
465
465
|
entity: Entity<any>,
|
|
466
466
|
size: CollectionSize,
|
|
467
467
|
width: number,
|
|
@@ -491,7 +491,7 @@ export const EntityCollectionView = React.memo(
|
|
|
491
491
|
/>
|
|
492
492
|
);
|
|
493
493
|
|
|
494
|
-
}
|
|
494
|
+
};
|
|
495
495
|
|
|
496
496
|
const title = <Popover
|
|
497
497
|
open={popOverOpen}
|
|
@@ -256,7 +256,7 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
|
|
|
256
256
|
*/
|
|
257
257
|
const baseLocation = state && state.base_location ? state.base_location : location;
|
|
258
258
|
|
|
259
|
-
const
|
|
259
|
+
const getAllParentReferencesForPath = useCallback((path: string): EntityReference[] => {
|
|
260
260
|
return getParentReferencesFromPath({
|
|
261
261
|
path,
|
|
262
262
|
collections
|
|
@@ -264,8 +264,28 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
|
|
|
264
264
|
}, [collections]);
|
|
265
265
|
|
|
266
266
|
const getParentCollectionIds = useCallback((path: string): string[] => {
|
|
267
|
-
|
|
268
|
-
|
|
267
|
+
|
|
268
|
+
const strings = path.split("/");
|
|
269
|
+
const oddPathSegments = strings.filter((_, i) => i % 2 === 0);
|
|
270
|
+
oddPathSegments.pop();
|
|
271
|
+
|
|
272
|
+
const result: string[][] = [];
|
|
273
|
+
|
|
274
|
+
for (let i = 1; i <= oddPathSegments.length; i++) {
|
|
275
|
+
result.push(oddPathSegments.slice(0, i));
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
// for each odd path segment, get the collection
|
|
279
|
+
const parentCollectionIds = result.map(r => getCollectionFromPaths(r)?.id).filter(Boolean) as string[];
|
|
280
|
+
|
|
281
|
+
getCollectionFromPaths(oddPathSegments);
|
|
282
|
+
|
|
283
|
+
// const allParentCollectionsForPath = getAllParentReferencesForPath(path);
|
|
284
|
+
// console.log("allParentCollectionsForPath", allParentCollectionsForPath);
|
|
285
|
+
// const parentCollectionIds = allParentCollectionsForPath.map(r => r.id);
|
|
286
|
+
console.log("getParentCollectionIds", path, parentCollectionIds);
|
|
287
|
+
return parentCollectionIds;
|
|
288
|
+
}, [getAllParentReferencesForPath])
|
|
269
289
|
|
|
270
290
|
const convertIdsToPaths = useCallback((ids: string[]): string[] => {
|
|
271
291
|
let currentCollections = collections;
|
|
@@ -282,7 +302,7 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
|
|
|
282
302
|
}
|
|
283
303
|
, [getCollectionFromIds]);
|
|
284
304
|
|
|
285
|
-
return
|
|
305
|
+
return {
|
|
286
306
|
collections,
|
|
287
307
|
views,
|
|
288
308
|
loading: !initialised || navigationLoading,
|
|
@@ -303,10 +323,10 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
|
|
|
303
323
|
topLevelNavigation,
|
|
304
324
|
baseLocation,
|
|
305
325
|
refreshNavigation,
|
|
306
|
-
getParentReferencesFromPath:
|
|
326
|
+
getParentReferencesFromPath: getAllParentReferencesForPath,
|
|
307
327
|
getParentCollectionIds,
|
|
308
328
|
convertIdsToPaths
|
|
309
|
-
}
|
|
329
|
+
};
|
|
310
330
|
}
|
|
311
331
|
|
|
312
332
|
export function getSidePanelKey(path: string, entityId?: string) {
|