Options
All
  • Public
  • Public/Protected
  • All
Menu

JSON Forms Material Tree Renderer

Index

Type aliases

InstanceLabelProvider

InstanceLabelProvider: function

Type declaration

    • (schema: JsonSchema, data: any, instancePath: string): string
    • Parameters

      • schema: JsonSchema
      • data: any
      • instancePath: string

      Returns string

SchemaLabelProvider

SchemaLabelProvider: function

Type declaration

    • (schema: JsonSchema, schemaPath?: string): string
    • Parameters

      • schema: JsonSchema
      • Optional schemaPath: string

      Returns string

Variables

Const CSS_DELAY

CSS_DELAY: 30 = 30

The delay in milliseconds before D&D related CSS (e.g. highlighting valid drop targets) is applied.

Const ConnectedTreeWithDetailRenderer

ConnectedTreeWithDetailRenderer: ComponentClass<object & OwnPropsOfTreeControl & WithImageProvider & WithLabelProviders, any> & object & object = connect(mapStateToProps,mapDispatchToProps)(DnDTreeMasterDetail)

Const DnDExandArrayContainer

DnDExandArrayContainer: ComponentClass<ExpandArrayContainerProps, any> = compose<ExpandArrayContainerProps, ExpandArrayContainerProps>(withStyles(styles, { name: 'ExpandArrayContainer' }),DropTarget(Types.TREE_DND, arrayDropTarget, collect))(ExpandArrayContainer)

Const DnDTreeMasterDetail

DnDTreeMasterDetail: ComponentClass<TreeWithDetailProps, any> = compose<TreeWithDetailProps, TreeWithDetailProps>(withStyles(styles, { name: 'TreeMasterDetail' }),DragDropContext(HTML5Backend))(TreeWithDetailRenderer)

DragDropContext

DragDropContext: any

DragSource

DragSource: any

DropTarget

DropTarget: any

Const HTML5Backend

HTML5Backend: any = require('react-dnd-html5-backend')

Const ListItem

ListItem: ComponentClass<ObjectListItemProps, any> = compose<ObjectListItemProps, ObjectListItemProps>(withStyles(styles, { name: 'ObjectListItem' }),)(ObjectListItem)

Const RESET_SELECTION_DELAY

RESET_SELECTION_DELAY: 40 = 40

The delay (in milliseconds) between removing this object list item's data from the store and resetting the selection. This is necessary because without a delay the resetted selection is overwritten by the on click handler of this object list item which sets the selection to this item.

Const listItemDnd

listItemDnd: any = DropTarget(Types.TREE_DND, objectDropTarget, collectDropTarget)(DragSource(Types.TREE_DND, objectDragSource, collectDragSource)(ObjectListItemDnd))

Configure a list item as a drop target and a drag source. Drop Target: Allows to drop other list items on this list item and is necessary to sort elements inside a list

Drag Source: Allows to drag a list item

Const theme

theme: Theme = createMuiTheme({palette: {secondary: {main: '#ee6e73',dark: '#26a69a'}}})

Functions

Const ExpandArray

  • ExpandArray(__namedParameters: object): any
  • Expands the given data array by expanding every element. If the parent data containing the array is provided, a suitable delete function for the expanded elements is created.

    Parameters

    • __namedParameters: object
      • containmentProps: Property[]
      • filterPredicate: any
      • handlers: any
      • imageProvider: any
      • labelProvider: any
      • path: string
      • rootData: any
      • selection: any

    Returns any

Const ExpandRootArray

  • ExpandRootArray(__namedParameters: object): any
  • Expands the given root data array by expanding every element. If the parent data containing the array is provided, a suitable delete function for the expanded elements is created.

    As a difference to the ExpandArray component this component does not use containment properties because it is only used for the root nodes of a tree.

    Parameters

    • __namedParameters: object
      • filterPredicate: any
      • handlers: any
      • imageProvider: any
      • labelProvider: any
      • path: string
      • rootData: any
      • schema: JsonSchema7 | JsonSchema4 | (JsonSchema7 | JsonSchema4)[]
      • selection: any

    Returns any

Const ExpandRootArrayContainer

  • ExpandRootArrayContainer(__namedParameters: object): Element
  • Parameters

    • __namedParameters: object
      • filterPredicate: any
      • handlers: any
      • imageProvider: any
      • labelProvider: any
      • path: string
      • rootData: any
      • schema: JsonSchema7 | JsonSchema4 | (JsonSchema7 | JsonSchema4)[]
      • selection: any

    Returns Element

Const Master

  • Master(__namedParameters: object): Element
  • Parameters

    • __namedParameters: object
      • filterPredicate: any
      • handlers: object
        • onAdd: any
        • Optional onRemove?: any
        • onSelect: any
        • resetSelection: any
      • imageProvider: any
      • labelProviders: object
      • path: string
      • rootData: any
      • schema: JsonSchema7 | JsonSchema4
      • selection: any
      • uischema: UISchemaElement

    Returns Element

Const ThemedTreeWithDetail

  • ThemedTreeWithDetail(props: any): Element
  • Parameters

    • props: any

    Returns Element

Const canDropDraggedItem

  • Returns whether the dragged item can be dropped in a list.

    Parameters

    • containerProps: Property[]

      The ContainmentProperties that the list can supports

    • dragInfo: DragInfo

      The DragInfo describing the dragged item

    Returns boolean

Const collect

  • collect(dndConnect: any, monitor: any): object
  • Injects drag and drop related properties into an expanded array

    Parameters

    • dndConnect: any
    • monitor: any

    Returns object

    • connectDropTarget: any
    • isDragging: boolean
    • isOver: any
    • validDropTarget: any

Const collectDragSource

  • collectDragSource(dndConnect: any, monitor: any): object
  • Injects drag and drop (drag source) related properties into a list item

    Parameters

    • dndConnect: any
    • monitor: any

    Returns object

    • connectDragSource: any
    • isDragging: any

Const collectDropTarget

  • collectDropTarget(dndConnect: any, monitor: any): object
  • Injects drag and drop (drop target) related properties into a list item

    Parameters

    • dndConnect: any
    • monitor: any

    Returns object

    • connectDropTarget: any
    • isOver: any

Const createData

  • createData(defaultData: any, prop: Property): any
  • Parameters

    Returns any

Const createPropLabel

  • createPropLabel(prop: Property, labelProvider: function): string
  • Parameters

    • prop: Property
    • labelProvider: function
        • (schema: JsonSchema, path: string): string
        • Parameters

          • schema: JsonSchema
          • path: string

          Returns string

    Returns string

Const findContainerProperties

  • findContainerProperties(schema: JsonSchema7, rootSchema: JsonSchema7, recurse: boolean): Property[]
  • Retrieves an array of properties based on the provided schema.

    Parameters

    • schema: JsonSchema7

      the schema to check for container properties

    • rootSchema: JsonSchema7

      the root schema

    • recurse: boolean

      whether to recurse in case properties have already been found. Set to true for finding all valid, i.e. nested container properties

    Returns Property[]

    The array of Property or empty if no properties are available

Const findContainerProps

  • findContainerProps(property: string, label: string, schemaPath: string, schema: JsonSchema7, rootSchema: JsonSchema7, isInContainer: boolean, visited: string[], recurse: boolean): Property[]
  • Returns a flattened list of container properties. A property is being considered a container property if it is an array of objects, meaning that all its children are non-primitive.

    Parameters

    • property: string

      The schema key from which this property was created.

    • label: string

      The name of the schema the property describes.

    • schemaPath: string
    • schema: JsonSchema7

      The schema is the JsonSchema this property describes.

    • rootSchema: JsonSchema7

      The parent schema

    • isInContainer: boolean

      To indicate whether the schema is in a container or not Properties that are described in array are considered as being in a container.

    • visited: string[]
    • recurse: boolean

    Returns Property[]

    An array of properties where each property describes a self-contained schema for the corresponding schema

Const findPropertyLabel

  • findPropertyLabel(property: Property): string
  • Returns the label of a property based on the best-effort solution

    Parameters

    • property: Property

      The property contains a schema, label and a property as key

    Returns string

Const findReferences

  • Finding required definitions from parentSchema by using schema refs

    Parameters

    • parentSchema: JsonSchema

      The root schema

    • allRefs: SchemaRefs

      All the refs of root schema

    • schemaRefs: SchemaRefs

      The current schema refs

    • extractedReferences: object

      Contains the definition attributes for the current schema

      • [id: string]: string

    Returns SchemaRefs

    SchemaRefs all the required reference paths for subschema

Const indexFromPath

  • indexFromPath(path: string): number
  • Extract the array index from the given path.

    Parameters

    • path: string

    Returns number

Const isArray

  • isArray(schema: JsonSchema): boolean
  • Parameters

    • schema: JsonSchema

    Returns boolean

Const isNotTuple

  • isNotTuple(schema: JsonSchema): boolean
  • Parameters

    • schema: JsonSchema

    Returns boolean

Const isObject

  • isObject(schema: JsonSchema): boolean
  • Parameters

    • schema: JsonSchema

    Returns boolean

Const makeSchemaSelfContained

  • makeSchemaSelfContained(parentSchema: JsonSchema7, schema: JsonSchema7): JsonSchema7
  • Calculate references for a given schema and copy definitions into the schema

    Parameters

    • parentSchema: JsonSchema7

      root schema which is used to find all the schema refs

    • schema: JsonSchema7

      current subschema without resolved references

    Returns JsonSchema7

    JsonSchema current subschema with resolved references

Const mapDispatchToProps

  • mapDispatchToProps(dispatch: Dispatch<AnyAction>, ownProps: any): object
  • mapDispatchToProps(dispatch: Dispatch<AnyAction>): object
  • mapDispatchToProps(dispatch: Dispatch<AnyAction>): DispatchPropsOfTreeWithDetail
  • Parameters

    • dispatch: Dispatch<AnyAction>
    • ownProps: any

    Returns object

    • moveListItem: (Anonymous function)
    • remove: function
      • remove(): void
      • Returns void

  • Parameters

    • dispatch: Dispatch<AnyAction>

    Returns object

    • add: function
      • add(path: string, prop: Property, newData: any): void
      • Parameters

        • path: string
        • prop: Property
        • newData: any

        Returns void

  • Parameters

    • dispatch: Dispatch<AnyAction>

    Returns DispatchPropsOfTreeWithDetail

Const mapDispatchToTreeListProps

  • mapDispatchToTreeListProps(dispatch: Dispatch<AnyAction>): object
  • Parameters

    • dispatch: Dispatch<AnyAction>

    Returns object

    • moveListItem: (Anonymous function)

Const mapStateToProps

  • Parameters

    • state: JsonFormsState

    Returns object

    • rootData: any
  • Parameters

    • state: JsonFormsState
    • ownProps: any

    Returns object

    • containerProperties: Property[]
    • index: number
    • rootData: any
    • rootSchema: JsonSchema7 | JsonSchema4
  • Parameters

    • state: JsonFormsState
    • ownProps: any

    Returns object

    • closeDialog: any
    • containerProperties: Property[]
    • defaultData: JsonFormsDefaultDataRegistryEntry[]
    • dialogProps: any
    • labelProvider: any
    • path: any
    • rootData: any
    • rootSchema: JsonSchema7 | JsonSchema4
    • schema: any
    • setSelection: any
  • Parameters

    Returns StatePropsOfTreeWithDetail

Const matchContainerProperty

  • matchContainerProperty(data: Object, properties: Property[], filterPredicate: any): Property
  • Determines the properties of the given data object by using the model mapping. If only one property is given, it is assumed to be the matching one.

    Parameters

    • data: Object

      The data object to match

    • properties: Property[]

      The array of properties of root schema

    • filterPredicate: any

      used to filter properties of the given data

    Returns Property

    The matching Property

Const mergeProps

  • mergeProps(stateProps: any, dispatchProps: any, ownProps: any): any
  • Parameters

    • stateProps: any
    • dispatchProps: any
    • ownProps: any

    Returns any

Const moveListItem

  • moveListItem(dispatch: Dispatch<AnyAction>): (Anonymous function)
  • Moves the given data from the oldPath to the newPath by deleting the data object at the old path and inserting the data at the new path.

    Note: an item at the index of the new path is pushed behind the inserted item

    Parameters

    • dispatch: Dispatch<AnyAction>

      the redux dispatcher used to execute the remove and add actions

    Returns (Anonymous function)

Const parentPath

  • parentPath(path: string): string
  • Gets the parent path from the given path by cutting of the last segment

    Parameters

    • path: string

      The path to get the parent path from

    Returns string

Const resolveAndMakeSchemaSelfContained

  • resolveAndMakeSchemaSelfContained(parentSchema: JsonSchema7, refPath: string): JsonSchema7
  • Create a self contained schema.

    Parameters

    • parentSchema: JsonSchema7

      The schema to use for resolving

    • refPath: string

      The path to resolve

    Returns JsonSchema7

    a JsonSchema that is self-contained

Const resolveLocalData

  • resolveLocalData(rootData: Object, path: string): Object
  • Resolves the given local data path against the root data.

    Parameters

    • rootData: Object

      the root data to resolve the data from

    • path: string

      The path to resolve against the root data

    Returns Object

    the resolved data or {null} if the path is not a valid path in the root data

Const styles

  • styles(): object
  • styles(theme: Theme): object
  • styles(): object
  • Returns object

    • currentTarget: object
      • borderWidth: string
    • invalidTarget: object
      • borderColor: string
      • borderStyle: string
      • borderWidth: string
    • validTarget: object
      • borderColor: string
      • borderStyle: string
      • borderWidth: string
      • minHeight: string
  • Parameters

    • theme: Theme

    Returns object

    • actionButton: object
      • cursor: string
      • display: string
      • fontWeight: "normal"
      • height: string
      • marginLeft: string
      • width: string
    • itemContainer: object
      • alignItems: string
      • display: string
      • flexDirection: "row"
      • & .icon: object
        • backgroundPosition: string
        • backgroundRepeat: string
        • flexBasis: string
        • marginRight: string
        • minHeight: string
      • &:hover: object
        • backgroundColor: string
        • cursor: string
        • fontWeight: "bold"
        • opacity: number
    • label: object
      • alignItems: string
      • display: string
      • flex: number
      • marginRight: string
      • minHeight: string
      • & span:first-child:empty: object
        • background: string
        • maxHeight: string
      • &:hover $actionButton: object
        • display: string
        • justifyContent: string
        • &:hover: object
          • backgroundColor: string
          • borderRadius: string
          • color: string
    • listItem: object
      • minHeight: string
      • paddingLeft: string
      • position: "relative"
      • &:after: object
        • content: string
        • height: string
        • left: string
        • position: "absolute"
        • top: string
      • &:before: object
        • content: string
        • left: string
        • position: "absolute"
        • top: string
        • width: string
    • selected: object
      • fontWeight: "bold"
    • withoutBorders: object
      • &:last-child:after: object
        • display: string
      • &:only-child: object
        • paddingLeft: string
      • &:only-child:before: object
        • display: string
  • Returns object

    • treeMasterDetail: object
      • display: string
      • flexDirection: "column"
      • & $treeMasterDetailContent: object
        • display: string
        • flexDirection: "row"
    • treeMasterDetailContent: object
      • paddingBottom: string
      • paddingTop: string
    • treeMasterDetailDetail: object
      • flex: number
      • padding: string
      • paddingLeft: string
      • &:first-child: object
        • marginRight: string
    • treeMasterDetailMaster: object
      • borderRight: string
      • borderWidth: string
      • flex: number
      • height: string
      • padding: string
      • & ul: object
        • listStyleType: string
        • margin: number
        • overflow: string
        • padding: number
        • position: "relative"
        • &:after: object
          • bottom: string
          • content: string
          • height: string
          • left: string
          • position: "absolute"
        • &:last-child::after: object
          • display: string

Const wrapImageIfNecessary

  • wrapImageIfNecessary(el: ReactElement<any> | string): ReactElement<any>
  • Parameters

    • el: ReactElement<any> | string

    Returns ReactElement<any>

Object literals

Const Types

Types: object

TREE_DND

TREE_DND: string = "tree-master-detail-DnD"

Const arrayDropTarget

arrayDropTarget: object

The drop target contract for an expanded array. The specified methods are executed by React DnD when appropriate (e.g. a draggable component hovers over an expanded array).

canDrop

  • Tests wether the currently dragged object list item can be dropped in this list by checking whether the item's schema id matches with a containment property of this list.

    Parameters

    Returns boolean

drop

  • drop(props: any, monitor: any): any
  • Called when an item was dropped at a valid location (canDrop() === true) The calls also go up the chain when the drop occurred in a nested component. The most nested one is called first, return results are available from the before called component.

    Parameters

    • props: any
    • monitor: any

    Returns any

Const objectDragSource

objectDragSource: object

Define the drag and drop source (item is dragged) behavior of the list items

beginDrag

  • Parameters

    • props: any

    Returns DragInfo

endDrag

Const objectDropTarget

objectDropTarget: object

Define the drag and drop target (another item is dragged over this item) behavior of list items.

canDrop

  • canDrop(props: any, monitor: any): boolean
  • Parameters

    • props: any
    • monitor: any

    Returns boolean

drop

  • On drop of a dragged item on another dragged item, mark the drop as handled and that the item does not need to be moved. This is the case because the item is already moved on hover.

    Returns DropResult

hover

  • If the dragged item can be dropped in the list of the hovered item, move it there on the fly.

    Parameters

    Returns void

Generated using TypeDoc