import range from 'lodash/range' ; import React , { useState , useCallback } from 'react' ; import { ArrayLayoutProps , composePaths , computeLabel , createDefaultValue , } from '@jsonforms/core' ; import map from 'lodash/map' ; import { ArrayLayoutToolbar } from './ArrayToolbar' ; import ExpandPanelRenderer from './ExpandPanelRenderer' ; import merge from 'lodash/merge' ; const MaterialArrayLayoutComponent = ( props ) => { const [ expanded , setExpanded ] = useState < string | boolean > ( false ) ; const innerCreateDefaultValue = useCallback ( ( ) => createDefaultValue ( props . schema ) , [ props . schema ] ) ; const handleChange = useCallback ( ( panel ) => ( _event , expandedPanel ) => { setExpanded ( expandedPanel ? panel : false ) ; } , [ ] ) ; const isExpanded = ( index ) => expanded === composePaths ( props . path , `${ index }` ) ; const { data , path , schema , uischema , errors , addItem , renderers , cells , label , required , rootSchema , config , uischemas } = props ; const appliedUiSchemaOptions = merge ( { } , config , props . uischema . options ) ; return ( < div > < ArrayLayoutToolbar label = { computeLabel ( label , required , appliedUiSchemaOptions . hideRequiredAsterisk ) } errors = { errors } path = { path } addItem = { addItem } createDefault = { innerCreateDefaultValue } / > < div > { data > 0 ? ( map ( range ( data ) , index => { return ( < ExpandPanelRenderer index = { index } expanded = { isExpanded ( index ) } schema = { schema } path = { path } handleExpansion = { handleChange } uischema = { uischema } renderers = { renderers } cells = { cells } key = { index } rootSchema = { rootSchema } enableMoveUp = { index != 0 } enableMoveDown = { index < data - 1 } config = { config } childLabelProp = { appliedUiSchemaOptions . elementLabelProp } uischemas = { uischemas } / > ) ; } ) ) : ( < p > No data < /p>)} < /div> < /div>); } ; export const MaterialArrayLayout = React . memo ( MaterialArrayLayoutComponent ) ;