diff --git a/example/src/SampleApp/schemas/test_schema.tsx b/example/src/SampleApp/schemas/test_schema.tsx index bb54208..d103d46 100644 --- a/example/src/SampleApp/schemas/test_schema.tsx +++ b/example/src/SampleApp/schemas/test_schema.tsx @@ -82,6 +82,13 @@ export const testEntitySchema = buildSchema({ properties: properties }); }, + + product: { + title: "Product", + dataType: "reference", + path: "products", + previewProperties: ["name", "main_image"] + }, // gallery: { // title: 'Gallery', // dataType: 'array', @@ -223,12 +230,6 @@ export const testEntitySchema = buildSchema({ // unique: true // } // }, - // product: { - // title: "Product", - // dataType: "reference", - // path: "products", - // previewProperties: ["name", "main_image"] - // }, // disabled_product: { // title: "Disabled product", // dataType: "reference", diff --git a/src/core/components/CollectionTable/CollectionTable.tsx b/src/core/components/CollectionTable/CollectionTable.tsx index ff2c590..8515fd7 100644 --- a/src/core/components/CollectionTable/CollectionTable.tsx +++ b/src/core/components/CollectionTable/CollectionTable.tsx @@ -68,7 +68,17 @@ export const useStyles = makeStyles(theme => createStyles({ * @see Table * @category Components */ -export const CollectionTable = React.memo>(CollectionTableInternal) as React.FunctionComponent>; +export const CollectionTable = React.memo>(CollectionTableInternal, areEqual) as React.FunctionComponent>; + +function areEqual(prevProps: CollectionTableProps, nextProps: CollectionTableProps) { + return prevProps.path === nextProps.path + && prevProps.collection === nextProps.collection + && prevProps.title === nextProps.title + && prevProps.toolbarActionsBuilder === nextProps.toolbarActionsBuilder + && prevProps.tableRowActionsBuilder === nextProps.tableRowActionsBuilder + && prevProps.inlineEditing === nextProps.inlineEditing + ; +} export function CollectionTableInternal) { - const context = useFireCMSContext(); const dataSource = useDataSource(); const sideEntityController = useSideEntityController(); diff --git a/src/core/components/EntityCollectionView.tsx b/src/core/components/EntityCollectionView.tsx index 26ae6fa..7cc966d 100644 --- a/src/core/components/EntityCollectionView.tsx +++ b/src/core/components/EntityCollectionView.tsx @@ -56,7 +56,7 @@ export function useSelectionController(): SelectionController { const [selectedEntities, setSelectedEntities] = useState[]>([]); - const toggleEntitySelection = (entity: Entity) => { + const toggleEntitySelection = useCallback((entity: Entity) => { let newValue; if (selectedEntities.map(e => e.id).includes(entity.id)) { newValue = selectedEntities.filter((item: Entity) => item.id !== entity.id); @@ -64,9 +64,9 @@ export function useSelectionController(): SelectionController { newValue = [...selectedEntities, entity]; } setSelectedEntities(newValue); - }; + }, [selectedEntities]); - const isEntitySelected = (entity: Entity) => selectedEntities.map(e => e.id).includes(entity.id); + const isEntitySelected = useCallback((entity: Entity) => selectedEntities.map(e => e.id).includes(entity.id), [selectedEntities]); return { selectedEntities, @@ -269,10 +269,10 @@ export function EntityCollectionView({ ), [path, collection]); - const tableRowActionsBuilder = ({ - entity, - size - }: { entity: Entity, size: CollectionSize }) => { + const tableRowActionsBuilder = useCallback(({ + entity, + size + }: { entity: Entity, size: CollectionSize }) => { const isSelected = isEntitySelected(entity); @@ -322,9 +322,9 @@ export function EntityCollectionView({ /> ); - }; + }, [selectionController, sideEntityController, collection.permissions, authController, path,]); - const toolbarActionsBuilder = (_: { size: CollectionSize, data: Entity[] }) => { + const toolbarActionsBuilder = useCallback((_: { size: CollectionSize, data: Entity[] }) => { const addButton = canCreate(collection.permissions, authController, path, context) && onNewClick && (largeLayout ?