import React , { useEffect , useState } from "react" ; import { CollectionSize , Entity , EntityCollectionResolver } from "../../models" ; import { Button , Dialog , DialogActions , Divider , Typography } from "@mui/material" ; import createStyles from "@mui/styles/createStyles" ; import makeStyles from "@mui/styles/makeStyles" ; import { CollectionTable } from "./CollectionTable" ; import { CollectionRowActions } from "./CollectionTable/internal/CollectionRowActions" ; import { useDataSource } from "../../hooks" ; export const useStyles = makeStyles ( theme => createStyles ( { dialogBody : { flexGrow : 1 , overflow : "auto" , minWidth : "85vw" } , paper : { height : "100%" } } ) ) ; category export interface ReferenceDialogProps { /**
     * Is the dialog currently open
     */ open : boolean ; /**
     * Allow multiple selection of values
     */ multiselect : boolean ; /**
     * Entity collection config
     */ collectionResolver : EntityCollectionResolver ; /**
     * Absolute path of the collection
     */ path : string ; /**
     * If you are opening the dialog for the first time, you can select some
     * entity ids to be displayed first.
     */ selectedEntityIds ? : string [ ] ; param entity callback @callback
         onSingleEntitySelected ? ( entity ) : void ; param entities callback @callback
         onMultipleEntitiesSelected ? ( entities ) : void ; callback @callback
         onClose ( ) : void ; } category export function ReferenceDialog ( { onSingleEntitySelected , onMultipleEntitiesSelected , onClose , open , multiselect , collectionResolver , path , selectedEntityIds } ) { const classes = useStyles ( ) ; const dataSource = useDataSource ( ) ; const collection = collectionResolver ; const schema = collectionResolver . schema ; const schemaResolver = collectionResolver . schemaResolver ; const [ selectedEntities , setSelectedEntities ] = useState < Entity < any > [ ] | undefined > ( ) ; useEffect ( ( ) => { let unmounted = false ; if ( selectedEntityIds ) { Promise . all ( selectedEntityIds . map ( ( entityId ) => { return dataSource . fetchEntity ( { path , entityId , schema : schemaResolver } ) ; } ) ) . then ( ( entities ) => { if ( ! unmounted ) setSelectedEntities ( entities ) ; } ) ; } else { setSelectedEntities ( [ ] ) ; } return ( ) => { unmounted = true ; } ; } , [ dataSource , path , selectedEntityIds ] ) ; const onEntityClick = ( entity ) => { if ( ! multiselect && onSingleEntitySelected ) { onSingleEntitySelected ( entity ) ; } else { toggleEntitySelection ( entity ) ; } } ; const onClear = ( ) => { if ( ! multiselect && onSingleEntitySelected ) { onSingleEntitySelected ( null ) ; } else if ( onMultipleEntitiesSelected ) { onMultipleEntitiesSelected ( [ ] ) ; } } ; const toggleEntitySelection = ( entity ) => { let newValue ; if ( selectedEntities ) { if ( selectedEntities . map ( ( e ) => e . id ) . indexOf ( entity . id ) > - 1 ) { newValue = selectedEntities . filter ( ( item ) => item . id !== entity . id ) ; } else { newValue = [ ... selectedEntities , entity ] ; } setSelectedEntities ( newValue ) ; if ( onMultipleEntitiesSelected ) onMultipleEntitiesSelected ( newValue ) ; } } ; const tableRowActionsBuilder = ( { entity , size } ) => { const isSelected = selectedEntityIds && selectedEntityIds . indexOf ( entity . id ) > - 1 ; return < CollectionRowActions entity = { entity } size = { size } isSelected = { isSelected } selectionEnabled = { multiselect } toggleEntitySelection = { toggleEntitySelection } / > ; } ; const toolbarActionsBuilder = ( ) => ( < Button onClick = { onClear } color = "primary" > Clear < /Button>); const title = ( < Typography variant = { "h6" } > { `Select ${ schema . name }` } < /Typography>); return ( < Dialog onClose = { onClose } classes = { { paper : classes . paper } } maxWidth = { "xl" } scroll = { "paper" } open = { open } > < div className = { classes . dialogBody } > { selectedEntities && < CollectionTable path = { path } collection = { collection } schemaResolver = { schemaResolver } inlineEditing = { false } toolbarActionsBuilder = { toolbarActionsBuilder } onEntityClick = { onEntityClick } tableRowActionsBuilder = { tableRowActionsBuilder } title = { title } entitiesDisplayedFirst = { selectedEntities } / > } < /div> < Divider / > < DialogActions > < Button onClick = { ( event ) => { event . stopPropagation ( ) ; onClose ( ) ; } } color = "primary" variant = "contained" > Close < /Button> < /DialogActions> < /Dialog>); }