fig-tree-editor-react

Demo/Playground

A React component for constructing and editing FigTreeEvaluator expressions.

It's built on json-edit-react (a JSON/object data viewer/editor), so usage is basically the same as for that component. The main addition is the use of Custom Nodes to handle the specifics of FigTree expressions, providing validation and custom UI to select and manipulate the various operators.

Your best bet is to have a play with the Demo to get a feel for it.

Installation

npm i fig-tree-builder-react

or

yarn add fig-tree-builder-react

Implementation

import { FigTreeEditor } from 'fig-tree-builder-react'

// In your React component:
return 
  <FigTreeEditor
    // These 3 props are required, the rest are optional
    figTree={figTree} // your FigTree instance
    expression={expressionObject} // your FigTree expression object
    setData={ (data) => updateMyExpression(data) } // function to update your expression object
    { ...otherProps } />

Available props

The majority of props are those for json-edit-react, so won't be covered here. The ones specific to this component are:

Required

| Prop | Type | Default | Description | | --------------- | ---------------------------------------- | ------- | ---------------------------------------- | | figTree | FigTreeEvaluator | | A FigTree instance to run evaluations on | | expression | EvaluatorNode(object/array/value) | | The FigTree expression | | setExpression | (data: EvaluatorNode) => void | | React state update function |

Optional

| Prop | Type | Default | Description | | ------------------------------ | ----------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | objectData | object | | Data object accessed by FigTree's getData/objectProperties operator. | | | onEvaluate | (value: unknown, e: React.MouseEvent) => void | | Optional function to call on the evaluated result after clicking one of the "Evaluate" buttons. Can be used (for example) to display a Notification with the result. | | onEvaluateStart | () => void | | Called when an "Evaluate" button is clicked. Some evaluations can take some time (e.g. network requests), so this can be used to trigger a "Loading" indicator. | | operatorDisplay | Operator Display Data | | Used to set the background and text colours for the various Operator "Evaluate" buttons. See [below] for details. | | | defaultNewOperatorExpression | EvaluatorNode | | Expression to populate the UI with when switching to a new "Operator" node | | | defaultNewFragment | string | | Name of the Fragment to default to when switching to new "Fragment" node | | | defaultNewCustomOperator | string | | Name of the Custom Operator to default to when switching to new "Custom Operator" node | | | addTopLevelFallback | any | | If defined, the specified value will be inserted as a fallback when selecting a new operator/fragment at the top level only. This offers an option to ensure protection against evaluator errors lower in the tree. | |

Operator UI customisation

You can override the colour scheme for each operator in the UI by passing in an object to the operatorDisplay prop. Each operator can have the backgroundColor, textColor and displayName defined — see defaults file for specific structure.

You can also specify the colours for Fragments and Custom Operators in their metadata definitions.

Help, Feedback, Suggestions

Please open an issue: https://github.com/CarlosNZ/fig-tree-editor-react/issues

Changelog

• v0.7.10:
  • When switching Fragments, remove old fragment properties
• v0.7.9:
  • Switching node type (operator/fragment/custom operator) auto-focuses the operator/fragment selector menu
  • Add addTopLevelFallback prop
• v0.7.8:
  • props to set default expression, fragment and custom operator
• v0.7.5:
  • Fix possible infinite re-render when loading new expression
• v0.7.1:
  • Improve type definitions for styles input
  • Pass "event" to onEvaluate function
• v0.7.0:
  • Use updated editor package (json-edit-react) in order to restrict to enum values when appropriate
  • Correct defaults for all operator properties
• v0.6.6: Respect editing restrictions in Custom Nodes
• v0.5.0 – v0.6.5: Initial release