Variables
Const AnyPropsKeyboardDatePicker
AnyPropsKeyboardDatePicker: FunctionComponent<any> = KeyboardDatePicker
Const AnyPropsKeyboardDateTimepicker
AnyPropsKeyboardDateTimepicker: FunctionComponent<any> = KeyboardDateTimePicker
Const ArrayLayoutToolbar
Array
LayoutToolbar: NamedExoticComponent<ArrayLayoutToolbarProps> & object = React.memo(({label,errors,addItem,path,createDefault}: ArrayLayoutToolbarProps) => {return (<Toolbar disableGutters={true}><Grid container alignItems='center' justify='space-between'><Grid item><Typography variant={'h6'}>{label}</Typography></Grid><Hidden smUp={errors.length === 0}><Grid item><ValidationIcon id='tooltip-validation' errorMessages={errors} /></Grid></Hidden><Grid item><Grid container><Grid item><Tooltipid='tooltip-add'title={`Add to ${label}`}placement='bottom'><IconButtonaria-label={`Add to ${label}`}onClick={addItem(path, createDefault())}><AddIcon /></IconButton></Tooltip></Grid></Grid></Grid></Grid></Toolbar>);})
Const DeleteDialog
Delete
Dialog: NamedExoticComponent<DeleteDialogProps> & object = React.memo(({ open, onClose, onConfirm, onCancel }: DeleteDialogProps) => {return (<Dialogopen={open}keepMountedonClose={onClose}aria-labelledby='alert-dialog-confirmdelete-title'aria-describedby='alert-dialog-confirmdelete-description'><DialogTitle id='alert-dialog-confirmdelete-title'>{'Confirm Deletion'}</DialogTitle><DialogContent><DialogContentText id='alert-dialog-confirmdelete-description'>Are you sure you want to delete the selected entry?</DialogContentText></DialogContent><DialogActions><Button onClick={onCancel} color='primary'>No</Button><Button onClick={onConfirm} color='primary'>Yes</Button></DialogActions></Dialog>);})
Const GroupComponent
Group
Component: NamedExoticComponent<MaterialLayoutRendererProps> & object = React.memo(({ visible, enabled, uischema, ...props }: MaterialLayoutRendererProps) => {const groupLayout = uischema as GroupLayout;return (<Hidden xsUp={!visible}><Card style={style}>{!isEmpty(groupLayout.label) && (<CardHeader title={groupLayout.label} />)}<CardContent><MaterialLayoutRenderer {...props} visible={visible} enabled={enabled} elements={groupLayout.elements} /></CardContent></Card></Hidden>);})
Const MaterialLayoutRenderer
Material
LayoutRenderer: NamedExoticComponent<MaterialLayoutRendererProps> & object = React.memo(({visible,elements,schema,path,enabled,direction,renderers,cells}: MaterialLayoutRendererProps) => {if (isEmpty(elements)) {return null;} else {return (<Hidden xsUp={!visible}><Gridcontainerdirection={direction}spacing={direction === 'row' ? 2 : 0}>{renderLayoutElements(elements,schema,path,enabled,renderers,cells)}</Grid></Hidden>);}},areEqual)
Const MuiAutocomplete
Mui
Autocomplete: NamedExoticComponent<EnumCellProps & WithClassname & WithOptionLabel> & object = React.memo((props: EnumCellProps & WithClassname & WithOptionLabel) => {const {data,className,id,enabled,uischema,path,handleChange,options,config,getOptionLabel,renderOption,filterOptions} = props;const appliedUiSchemaOptions = merge({}, config, uischema.options);const [inputValue, setInputValue] = React.useState(data ?? '');const findOption = options.find(o => o.value === data) ?? null;return (<AutocompleteclassName={className}id={id}disabled={!enabled}value={findOption}onChange={(_event: any, newValue: EnumOption | null) => {handleChange(path, newValue?.value);}}inputValue={inputValue}onInputChange={(_event, newInputValue) => {setInputValue(newInputValue);}}autoHighlightautoSelectautoCompletefullWidthoptions={options}getOptionLabel={getOptionLabel || (option => option?.label)}style={{ marginTop: 16 }}renderInput={params => (<Inputstyle={{ width: '100%' }}type='text'inputProps={params.inputProps}inputRef={params.InputProps.ref}autoFocus={appliedUiSchemaOptions.focus}disabled={!enabled}/>)}renderOption={renderOption}filterOptions={filterOptions}/>);}, areEqual)
Const MuiCheckbox
MuiCheckbox: NamedExoticComponent<CellProps & WithClassname> & object = React.memo((props: CellProps & WithClassname) => {const {data,className,id,enabled,uischema,path,handleChange,config} = props;const appliedUiSchemaOptions = merge({}, config, uischema.options);const inputProps = { autoFocus: !!appliedUiSchemaOptions.focus };// !! causes undefined value to be converted to false, otherwise has no effectconst checked = !!data;return (<Checkboxchecked={checked}onChange={(_ev, isChecked) => handleChange(path, isChecked)}className={className}id={id}disabled={!enabled}inputProps={inputProps}/>);}, areEqual)
Const MuiInputInteger
MuiInputInteger: NamedExoticComponent<CellProps & WithClassname> & object = React.memo((props: CellProps & WithClassname) => {const {data,className,id,enabled,uischema,path,handleChange,config} = props;const inputProps = { step: '1' };const toNumber = (value: string) =>value === '' ? undefined : parseInt(value, 10);const appliedUiSchemaOptions = merge({}, config, uischema.options);return (<Inputtype='number'value={data !== undefined && data !== null ? data : ''}onChange={ev => handleChange(path, toNumber(ev.target.value))}className={className}id={id}disabled={!enabled}autoFocus={appliedUiSchemaOptions.focus}inputProps={inputProps}fullWidth={true}/>);},areEqual)
Const MuiInputNumber
MuiInputNumber: NamedExoticComponent<CellProps & WithClassname> & object = React.memo((props: CellProps & WithClassname) => {const {data,className,id,enabled,uischema,path,handleChange,config} = props;const inputProps = { step: '0.1' };const toNumber = (value: string) =>value === '' ? undefined : parseFloat(value);const appliedUiSchemaOptions = merge({}, config, uischema.options);return (<Inputtype='number'value={data === undefined || data === null ? '' : data}onChange={ev => handleChange(path, toNumber(ev.target.value))}className={className}id={id}disabled={!enabled}autoFocus={appliedUiSchemaOptions.focus}inputProps={inputProps}fullWidth={true}/>);}, areEqual)
Const MuiInputNumberFormat
MuiInputNumberFormat: NamedExoticComponent<CellProps & WithClassname & Formatted<number>> & object = React.memo((props: CellProps & WithClassname & Formatted<number>) => {const {className,id,enabled,uischema,isValid,path,handleChange,schema,config} = props;const maxLength = schema.maxLength;const appliedUiSchemaOptions = merge({}, config, uischema.options);let inputProps;if (appliedUiSchemaOptions.restrict) {inputProps = { maxLength: maxLength };} else {inputProps = {};}const formattedNumber = props.toFormatted(props.data);const onChange = (ev: any) => {const validStringNumber = props.fromFormatted(ev.currentTarget.value);handleChange(path, validStringNumber);};return (<Inputtype='text'value={formattedNumber}onChange={onChange}className={className}id={id}disabled={!enabled}autoFocus={appliedUiSchemaOptions.focus}multiline={appliedUiSchemaOptions.multi}fullWidth={!appliedUiSchemaOptions.trim || maxLength === undefined}inputProps={inputProps}error={!isValid}/>);},areEqual)
Const MuiInputText
Mui
InputText: NamedExoticComponent<CellProps & WithClassname & MuiTextInputProps> & object = React.memo((props: CellProps & WithClassname & MuiTextInputProps) => {const [showAdornment, setShowAdornment] = useState(false);const {data,config,className,id,enabled,uischema,isValid,path,handleChange,schema,muiInputProps} = props;const maxLength = schema.maxLength;const appliedUiSchemaOptions = merge({}, config, uischema.options);let inputProps: any;if (appliedUiSchemaOptions.restrict) {inputProps = { maxLength: maxLength };} else {inputProps = {};}inputProps = merge(inputProps, muiInputProps);if (appliedUiSchemaOptions.trim && maxLength !== undefined) {inputProps.size = maxLength;}const onChange = (ev: any) => handleChange(path, ev.target.value);const theme: JsonFormsTheme = useTheme();const inputDeleteBackgroundColor = theme.jsonforms?.input?.delete?.background || theme.palette.background.default;return (<Inputtype={appliedUiSchemaOptions.format === 'password' ? 'password' : 'text'}value={data || ''}onChange={onChange}className={className}id={id}disabled={!enabled}autoFocus={appliedUiSchemaOptions.focus}multiline={appliedUiSchemaOptions.multi}fullWidth={!appliedUiSchemaOptions.trim || maxLength === undefined}inputProps={inputProps}error={!isValid}onPointerEnter={() => setShowAdornment(true) }onPointerLeave={() => setShowAdornment(false) }endAdornment={<InputAdornmentposition='end'style={{display:!showAdornment || !enabled || data === undefined ? 'none' : 'flex',position: 'absolute',right: 0}}><IconButtonaria-label='Clear input field'onClick={() => handleChange(path, undefined)}><Close style={{background: inputDeleteBackgroundColor, borderRadius: '50%'}}/></IconButton></InputAdornment>}/>);}, areEqual)
Const MuiInputTime
MuiInputTime: NamedExoticComponent<CellProps & WithClassname> & object = React.memo((props: CellProps & WithClassname) => {const {data,className,id,enabled,uischema,path,handleChange,config} = props;const appliedUiSchemaOptions = merge({}, config, uischema.options);return (<Inputtype='time'value={data || ''}onChange={ev => handleChange(path, ev.target.value)}className={className}id={id}disabled={!enabled}autoFocus={appliedUiSchemaOptions.focus}fullWidth={true}/>);}, areEqual)
Const MuiSelect
MuiSelect: NamedExoticComponent<EnumCellProps & WithClassname> & object = React.memo((props: EnumCellProps & WithClassname) => {const {data,className,id,enabled,uischema,path,handleChange,options,config} = props;const appliedUiSchemaOptions = merge({}, config, uischema.options);return (<SelectclassName={className}id={id}disabled={!enabled}autoFocus={appliedUiSchemaOptions.focus}value={data || ''}onChange={ev => handleChange(path, ev.target.value)}fullWidth={true}>{[<MenuItem value='' key={'empty'} />].concat(options.map(optionValue => (<MenuItem value={optionValue.value} key={optionValue.value}>{optionValue.label}</MenuItem>)))}</Select>);}, areEqual)
Const NonEmptyRow
Non
EmptyRow: NamedExoticComponent<NonEmptyRowProps & WithDeleteDialogSupport> & object = React.memo(({childPath,schema,rowIndex,openDeleteDialog,moveUp,moveDown,enableUp,enableDown,showSortButtons,enabled,cells}: NonEmptyRowProps & WithDeleteDialogSupport) => {return (<TableRow key={childPath} hover>{generateCells(NonEmptyCell, schema, childPath, enabled, cells)}{enabled ? (<NoBorderTableCellstyle={showSortButtons ? styles.fixedCell : styles.fixedCellSmall}><Gridcontainerdirection='row'justify='flex-end'alignItems='center'>{showSortButtons ? (<Fragment><Grid item><IconButtonaria-label={`Move up`}onClick={moveUp}disabled={!enableUp}><ArrowUpward /></IconButton></Grid><Grid item><IconButtonaria-label={`Move down`}onClick={moveDown}disabled={!enableDown}><ArrowDownward /></IconButton></Grid></Fragment>) : null}<Grid item><IconButtonaria-label={`Delete`}onClick={() => openDeleteDialog(childPath, rowIndex)}><DeleteIcon /></IconButton></Grid></Grid></NoBorderTableCell>) : null}</TableRow>);})
Const TableHeaderCell
Table
HeaderCell: NamedExoticComponent<TableHeaderCellProps> & object = React.memo(({ title }: TableHeaderCellProps) => (<TableCell>{title}</TableCell>))
Const TableToolbar
Table
Toolbar: NamedExoticComponent<MaterialTableToolbarProps> & object = React.memo(({numColumns,errors,label,path,addItem,schema,enabled}: MaterialTableToolbarProps) => (<TableRow><NoBorderTableCell colSpan={numColumns}><Gridcontainerjustify={'flex-start'}alignItems={'center'}spacing={2}><Grid item><Typography variant={'h6'}>{label}</Typography></Grid><Grid item><Hidden smUp={errors.length === 0}><Grid item><ValidationIconid='tooltip-validation'errorMessages={errors}/></Grid></Hidden></Grid></Grid></NoBorderTableCell>{enabled ? (<NoBorderTableCell align='right' style={ fixedCellSmall }><Tooltipid='tooltip-add'title={`Add to ${label}`}placement='bottom'><IconButtonaria-label={`Add to ${label}`}onClick={addItem(path, createDefaultValue(schema))}><AddIcon /></IconButton></Tooltip></NoBorderTableCell>) : null}</TableRow>))
Const extendedMaterialRenderers
extendedMaterialRenderers: JsonFormsRendererRegistryEntry[] = [{tester: materialAutocompleteOneOfEnumControlTester,renderer: MaterialAutocompleteOneOfEnumControl},{tester: materialAutocompleteEnumControlTester,renderer: MaterialAutocompleteEnumControl},...materialRenderers]
Const groupTester
groupTester: RankedTester = rankWith(1, uiTypeIs('Group'))
Const isSingleLevelCategorization
isSingleLevelCategorization: Tester = and(uiTypeIs('Categorization'),(uischema: UISchemaElement): boolean => {const categorization = uischema as Categorization;return (categorization.elements &&categorization.elements.reduce((acc, e) => acc && e.type === 'Category',true));})
Const materialAllOfControlTester
materialAllOfControlTester: RankedTester = rankWith(3,isAllOfControl)
Const materialAnyOfControlTester
materialAnyOfControlTester: RankedTester = rankWith(3,isAnyOfControl)
Const materialAnyOfStringOrEnumControlTester
materialAnyOfStringOrEnumControlTester: RankedTester = rankWith(5,simpleAnyOf)
Const materialArrayControlTester
materialArrayControlTester: RankedTester = rankWith(3,or(isObjectArrayControl, isPrimitiveArrayControl))
Const materialArrayLayoutTester
materialArrayLayoutTester: RankedTester = rankWith(4,isObjectArrayWithNesting)
Const materialAutocompleteEnumControlTester
materialAutocompleteEnumControlTester: RankedTester = rankWith(10,isEnumControl)
Const materialAutocompleteOneOfEnumControlTester
materialAutocompleteOneOfEnumControlTester: RankedTester = rankWith(10,isOneOfEnumControl)
Const materialBooleanCellTester
materialBooleanCellTester: RankedTester = rankWith(2,isBooleanControl)
Const materialBooleanControlTester
materialBooleanControlTester: RankedTester = rankWith(2,isBooleanControl)
Const materialCategorizationStepperTester
materialCategorizationStepperTester: RankedTester = rankWith(2,and(uiTypeIs('Categorization'),categorizationHasCategory,optionIs('variant', 'stepper')))
Const materialCategorizationTester
materialCategorizationTester: RankedTester = rankWith(1,isSingleLevelCategorization)
Const materialCells
materialCells: JsonFormsCellRendererRegistryEntry[] = [{ tester: materialBooleanCellTester, cell: MaterialBooleanCell },{ tester: materialDateCellTester, cell: MaterialDateCell },{ tester: materialEnumCellTester, cell: MaterialEnumCell },{ tester: materialIntegerCellTester, cell: MaterialIntegerCell },{ tester: materialNumberCellTester, cell: MaterialNumberCell },{ tester: materialNumberFormatCellTester, cell: MaterialNumberFormatCell },{ tester: materialTextCellTester, cell: MaterialTextCell },{ tester: materialTimeCellTester, cell: MaterialTimeCell }]
Const materialDateCellTester
materialDateCellTester: RankedTester = rankWith(2, isDateControl)
Const materialDateControlTester
materialDateControlTester: RankedTester = rankWith(4,isDateControl)
Const materialDateTimeControlTester
materialDateTimeControlTester: RankedTester = rankWith(2,isDateTimeControl)
Const materialEnumCellTester
materialEnumCellTester: RankedTester = rankWith(2, isEnumControl)
Const materialEnumControlTester
materialEnumControlTester: RankedTester = rankWith(2,isEnumControl)
Const materialGroupTester
materialGroupTester: RankedTester = withIncreasedRank(1,groupTester)
Const materialHorizontalLayoutTester
materialHorizontalLayoutTester: RankedTester = rankWith(2,uiTypeIs('HorizontalLayout'))
Const materialIntegerCellTester
materialIntegerCellTester: RankedTester = rankWith(2,isIntegerControl)
Const materialIntegerControlTester
materialIntegerControlTester: RankedTester = rankWith(2,isIntegerControl)
Const materialLabelRendererTester
materialLabelRendererTester: RankedTester = rankWith(1, uiTypeIs('Label'))
Const materialListWithDetailTester
materialListWithDetailTester: RankedTester = rankWith(4,and(uiTypeIs('ListWithDetail'), isObjectArray))
Const materialNativeControlTester
materialNativeControlTester: RankedTester = rankWith(2,or(isDateControl, isTimeControl))
Const materialNumberCellTester
materialNumberCellTester: RankedTester = rankWith(2,isNumberControl)
Const materialNumberControlTester
materialNumberControlTester: RankedTester = rankWith(2,isNumberControl)
Const materialNumberFormatCellTester
materialNumberFormatCellTester: RankedTester = rankWith(4,isNumberFormatControl)
Const materialObjectControlTester
materialObjectControlTester: RankedTester = rankWith(2,isObjectControl)
Const materialOneOfControlTester
materialOneOfControlTester: RankedTester = rankWith(3, isOneOfControl)
Const materialOneOfEnumControlTester
materialOneOfEnumControlTester: RankedTester = rankWith(5,isOneOfEnumControl)
Const materialOneOfRadioGroupControlTester
materialOneOfRadioGroupControlTester: RankedTester = rankWith(20,and(isOneOfEnumControl, optionIs('format', 'radio')))
Const materialRadioGroupControlTester
materialRadioGroupControlTester: RankedTester = rankWith(20,and(isEnumControl, optionIs('format', 'radio')))
Const materialRenderers
materialRenderers: JsonFormsRendererRegistryEntry[] = [// controls{tester: materialArrayControlTester,renderer: MaterialArrayControlRenderer},{ tester: materialBooleanControlTester, renderer: MaterialBooleanControl },{ tester: materialNativeControlTester, renderer: MaterialNativeControl },{ tester: materialEnumControlTester, renderer: MaterialEnumControl },{ tester: materialIntegerControlTester, renderer: MaterialIntegerControl },{ tester: materialNumberControlTester, renderer: MaterialNumberControl },{ tester: materialTextControlTester, renderer: MaterialTextControl },{ tester: materialDateTimeControlTester, renderer: MaterialDateTimeControl },{ tester: materialDateControlTester, renderer: MaterialDateControl },{ tester: materialSliderControlTester, renderer: MaterialSliderControl },{ tester: materialObjectControlTester, renderer: MaterialObjectRenderer },{ tester: materialAllOfControlTester, renderer: MaterialAllOfRenderer },{ tester: materialAnyOfControlTester, renderer: MaterialAnyOfRenderer },{ tester: materialOneOfControlTester, renderer: MaterialOneOfRenderer },{tester: materialRadioGroupControlTester,renderer: MaterialRadioGroupControl},{tester: materialOneOfRadioGroupControlTester,renderer: MaterialOneOfRadioGroupControl},{ tester: materialOneOfEnumControlTester, renderer: MaterialOneOfEnumControl },// layouts{ tester: materialGroupTester, renderer: MaterialGroupLayout },{tester: materialHorizontalLayoutTester,renderer: MaterialHorizontalLayout},{ tester: materialVerticalLayoutTester, renderer: MaterialVerticalLayout },{tester: materialCategorizationTester,renderer: MaterialCategorizationLayout},{tester: materialCategorizationStepperTester,renderer: MaterialCategorizationStepperLayout},{ tester: materialArrayLayoutTester, renderer: MaterialArrayLayout },// additional{ tester: materialLabelRendererTester, renderer: MaterialLabelRenderer },{tester: materialListWithDetailTester,renderer: MaterialListWithDetailRenderer},{tester: materialAnyOfStringOrEnumControlTester,renderer: MaterialAnyOfStringOrEnumControl}]
Const materialSliderControlTester
materialSliderControlTester: RankedTester = rankWith(4,isRangeControl)
Const materialTextCellTester
materialTextCellTester: RankedTester = rankWith(1,isStringControl)
Const materialTextControlTester
materialTextControlTester: RankedTester = rankWith(1,isStringControl)
Const materialTimeCellTester
materialTimeCellTester: RankedTester = rankWith(2, isTimeControl)
Const materialVerticalLayoutTester
materialVerticalLayoutTester: RankedTester = rankWith(1,uiTypeIs('VerticalLayout'))
Const oneOf
oneOf: "oneOf" = "oneOf"
Const simpleAnyOf
simpleAnyOf: function = and(uiTypeIs('Control'),schemaMatches(schema => schema.hasOwnProperty('anyOf') && hasEnumAndText(schema.anyOf)))
Type declaration
-
- (uischema: UISchemaElement, schema: JsonSchema): boolean
-
Parameters
-
uischema: UISchemaElement
-
schema: JsonSchema
Returns boolean
Includes all 'materialRenderers' and adds additional renderers based on '@material-ui/lab'