@storybook/components 6.5.0-alpha.3 → 6.5.0-alpha.30

package/dist/modern/controls/react-editable-json-tree/JsonNodes.js

@@ -0,0 +1,1539 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
+/* eslint-disable react/sort-comp */
+
+/* eslint-disable react/no-array-index-key */
+
+/* eslint-disable no-undef */
+
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
+/* eslint-disable react/button-has-type */
+import React, { cloneElement, Component } from 'react';
+import * as inputUsageTypes from './types/inputUsageTypes';
+import * as dataTypes from './types/dataTypes';
+import * as deltaTypes from './types/deltaTypes';
+import { getObjectType, isComponentWillChange } from './utils/objectTypes';
+export class JsonAddValue extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      inputRefKey: null,
+      inputRefValue: null
+    }; // Bind
+
+    this.refInputValue = this.refInputValue.bind(this);
+    this.refInputKey = this.refInputKey.bind(this);
+    this.onKeydown = this.onKeydown.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
+  }
+
+  componentDidMount() {
+    const {
+      inputRefKey,
+      inputRefValue
+    } = this.state;
+    const {
+      onlyValue
+    } = this.props;
+
+    if (inputRefKey && typeof inputRefKey.focus === 'function') {
+      inputRefKey.focus();
+    }
+
+    if (onlyValue && inputRefValue && typeof inputRefValue.focus === 'function') {
+      inputRefValue.focus();
+    }
+
+    document.addEventListener('keydown', this.onKeydown);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.onKeydown);
+  }
+
+  onKeydown(event) {
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.repeat) return;
+
+    if (event.code === 'Enter' || event.key === 'Enter') {
+      event.preventDefault();
+      this.onSubmit();
+    }
+
+    if (event.code === 'Escape' || event.key === 'Escape') {
+      event.preventDefault();
+      this.props.handleCancel();
+    }
+  }
+
+  onSubmit() {
+    const {
+      handleAdd,
+      onlyValue,
+      onSubmitValueParser,
+      keyPath,
+      deep
+    } = this.props;
+    const {
+      inputRefKey,
+      inputRefValue
+    } = this.state;
+    const result = {}; // Check if we have the key
+
+    if (!onlyValue) {
+      // Check that there is a key
+      if (!inputRefKey.value) {
+        // Empty key => Not authorized
+        return;
+      }
+
+      result.key = inputRefKey.value;
+    }
+
+    result.newValue = onSubmitValueParser(false, keyPath, deep, result.key, inputRefValue.value);
+    handleAdd(result);
+  }
+
+  refInputKey(node) {
+    // @ts-ignore
+    this.state.inputRefKey = node;
+  }
+
+  refInputValue(node) {
+    // @ts-ignore
+    this.state.inputRefValue = node;
+  }
+
+  render() {
+    const {
+      handleCancel,
+      onlyValue,
+      addButtonElement,
+      cancelButtonElement,
+      inputElementGenerator,
+      keyPath,
+      deep
+    } = this.props;
+    const addButtonElementLayout = /*#__PURE__*/cloneElement(addButtonElement, {
+      onClick: this.onSubmit
+    });
+    const cancelButtonElementLayout = /*#__PURE__*/cloneElement(cancelButtonElement, {
+      onClick: handleCancel
+    });
+    const inputElementValue = inputElementGenerator(inputUsageTypes.VALUE, keyPath, deep);
+    const inputElementValueLayout = /*#__PURE__*/cloneElement(inputElementValue, {
+      placeholder: 'Value',
+      ref: this.refInputValue
+    });
+    let inputElementKeyLayout = null;
+
+    if (!onlyValue) {
+      const inputElementKey = inputElementGenerator(inputUsageTypes.KEY, keyPath, deep);
+      inputElementKeyLayout = /*#__PURE__*/cloneElement(inputElementKey, {
+        placeholder: 'Key',
+        ref: this.refInputKey
+      });
+    }
+
+    return /*#__PURE__*/React.createElement("span", {
+      className: "rejt-add-value-node"
+    }, inputElementKeyLayout, inputElementValueLayout, cancelButtonElementLayout, addButtonElementLayout);
+  }
+
+}
+JsonAddValue.displayName = "JsonAddValue";
+// @ts-ignore
+JsonAddValue.defaultProps = {
+  onlyValue: false,
+  addButtonElement: /*#__PURE__*/React.createElement("button", null, "+"),
+  cancelButtonElement: /*#__PURE__*/React.createElement("button", null, "c")
+};
+export class JsonArray extends Component {
+  constructor(props) {
+    super(props);
+    const keyPath = [...props.keyPath, props.name];
+    this.state = {
+      data: props.data,
+      name: props.name,
+      keyPath,
+      deep: props.deep,
+      nextDeep: props.deep + 1,
+      collapsed: props.isCollapsed(keyPath, props.deep, props.data),
+      addFormVisible: false
+    }; // Bind
+
+    this.handleCollapseMode = this.handleCollapseMode.bind(this);
+    this.handleRemoveItem = this.handleRemoveItem.bind(this);
+    this.handleAddMode = this.handleAddMode.bind(this);
+    this.handleAddValueAdd = this.handleAddValueAdd.bind(this);
+    this.handleAddValueCancel = this.handleAddValueCancel.bind(this);
+    this.handleEditValue = this.handleEditValue.bind(this);
+    this.onChildUpdate = this.onChildUpdate.bind(this);
+    this.renderCollapsed = this.renderCollapsed.bind(this);
+    this.renderNotCollapsed = this.renderNotCollapsed.bind(this);
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    return props.data !== state.data ? {
+      data: props.data
+    } : null;
+  }
+
+  onChildUpdate(childKey, childData) {
+    const {
+      data,
+      keyPath
+    } = this.state; // Update data
+    // @ts-ignore
+
+    data[childKey] = childData; // Put new data
+
+    this.setState({
+      data
+    }); // Spread
+
+    const {
+      onUpdate
+    } = this.props;
+    const size = keyPath.length;
+    onUpdate(keyPath[size - 1], data);
+  }
+
+  handleAddMode() {
+    this.setState({
+      addFormVisible: true
+    });
+  }
+
+  handleCollapseMode() {
+    this.setState(state => ({
+      collapsed: !state.collapsed
+    }));
+  }
+
+  handleRemoveItem(index) {
+    return () => {
+      const {
+        beforeRemoveAction,
+        logger
+      } = this.props;
+      const {
+        data,
+        keyPath,
+        nextDeep: deep
+      } = this.state;
+      const oldValue = data[index]; // Before Remove Action
+
+      beforeRemoveAction(index, keyPath, deep, oldValue).then(() => {
+        const deltaUpdateResult = {
+          keyPath,
+          deep,
+          key: index,
+          oldValue,
+          type: deltaTypes.REMOVE_DELTA_TYPE
+        };
+        data.splice(index, 1);
+        this.setState({
+          data
+        }); // Spread new update
+
+        const {
+          onUpdate,
+          onDeltaUpdate
+        } = this.props;
+        onUpdate(keyPath[keyPath.length - 1], data); // Spread delta update
+
+        onDeltaUpdate(deltaUpdateResult);
+      }).catch(logger.error);
+    };
+  }
+
+  handleAddValueAdd({
+    newValue
+  }) {
+    const {
+      data,
+      keyPath,
+      nextDeep: deep
+    } = this.state;
+    const {
+      beforeAddAction,
+      logger
+    } = this.props;
+    beforeAddAction(data.length, keyPath, deep, newValue).then(() => {
+      // Update data
+      const newData = [...data, newValue];
+      this.setState({
+        data: newData
+      }); // Cancel add to close
+
+      this.handleAddValueCancel(); // Spread new update
+
+      const {
+        onUpdate,
+        onDeltaUpdate
+      } = this.props;
+      onUpdate(keyPath[keyPath.length - 1], newData); // Spread delta update
+
+      onDeltaUpdate({
+        type: deltaTypes.ADD_DELTA_TYPE,
+        keyPath,
+        deep,
+        key: newData.length - 1,
+        newValue
+      });
+    }).catch(logger.error);
+  }
+
+  handleAddValueCancel() {
+    this.setState({
+      addFormVisible: false
+    });
+  }
+
+  handleEditValue({
+    key,
+    value
+  }) {
+    return new Promise((resolve, reject) => {
+      const {
+        beforeUpdateAction
+      } = this.props;
+      const {
+        data,
+        keyPath,
+        nextDeep: deep
+      } = this.state; // Old value
+
+      const oldValue = data[key]; // Before update action
+
+      beforeUpdateAction(key, keyPath, deep, oldValue, value).then(() => {
+        // Update value
+        data[key] = value; // Set state
+
+        this.setState({
+          data
+        }); // Spread new update
+
+        const {
+          onUpdate,
+          onDeltaUpdate
+        } = this.props;
+        onUpdate(keyPath[keyPath.length - 1], data); // Spread delta update
+
+        onDeltaUpdate({
+          type: deltaTypes.UPDATE_DELTA_TYPE,
+          keyPath,
+          deep,
+          key,
+          newValue: value,
+          oldValue
+        }); // Resolve
+
+        resolve(undefined);
+      }).catch(reject);
+    });
+  }
+
+  renderCollapsed() {
+    const {
+      name,
+      data,
+      keyPath,
+      deep
+    } = this.state;
+    const {
+      handleRemove,
+      readOnly,
+      getStyle,
+      dataType,
+      minusMenuElement
+    } = this.props;
+    const {
+      minus,
+      collapsed
+    } = getStyle(name, data, keyPath, deep, dataType);
+    const isReadOnly = readOnly(name, data, keyPath, deep, dataType);
+    const removeItemButton = /*#__PURE__*/cloneElement(minusMenuElement, {
+      onClick: handleRemove,
+      className: 'rejt-minus-menu',
+      style: minus
+    });
+    return /*#__PURE__*/React.createElement("span", {
+      className: "rejt-collapsed"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "rejt-collapsed-text",
+      style: collapsed,
+      onClick: this.handleCollapseMode
+    }, "[...] ", data.length, " ", data.length === 1 ? 'item' : 'items'), !isReadOnly && removeItemButton);
+  }
+
+  renderNotCollapsed() {
+    const {
+      name,
+      data,
+      keyPath,
+      deep,
+      addFormVisible,
+      nextDeep
+    } = this.state;
+    const {
+      isCollapsed,
+      handleRemove,
+      onDeltaUpdate,
+      readOnly,
+      getStyle,
+      dataType,
+      addButtonElement,
+      cancelButtonElement,
+      editButtonElement,
+      inputElementGenerator,
+      textareaElementGenerator,
+      minusMenuElement,
+      plusMenuElement,
+      beforeRemoveAction,
+      beforeAddAction,
+      beforeUpdateAction,
+      logger,
+      onSubmitValueParser
+    } = this.props;
+    const {
+      minus,
+      plus,
+      delimiter,
+      ul,
+      addForm
+    } = getStyle(name, data, keyPath, deep, dataType);
+    const isReadOnly = readOnly(name, data, keyPath, deep, dataType);
+    const addItemButton = /*#__PURE__*/cloneElement(plusMenuElement, {
+      onClick: this.handleAddMode,
+      className: 'rejt-plus-menu',
+      style: plus
+    });
+    const removeItemButton = /*#__PURE__*/cloneElement(minusMenuElement, {
+      onClick: handleRemove,
+      className: 'rejt-minus-menu',
+      style: minus
+    });
+    const onlyValue = true;
+    const startObject = '[';
+    const endObject = ']';
+    return /*#__PURE__*/React.createElement("span", {
+      className: "rejt-not-collapsed"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "rejt-not-collapsed-delimiter",
+      style: delimiter
+    }, startObject), !addFormVisible && addItemButton, /*#__PURE__*/React.createElement("ul", {
+      className: "rejt-not-collapsed-list",
+      style: ul
+    }, data.map((item, index) => /*#__PURE__*/React.createElement(JsonNode, {
+      key: index,
+      name: `${index}`,
+      data: item,
+      keyPath: keyPath,
+      deep: nextDeep,
+      isCollapsed: isCollapsed,
+      handleRemove: this.handleRemoveItem(index),
+      handleUpdateValue: this.handleEditValue,
+      onUpdate: this.onChildUpdate,
+      onDeltaUpdate: onDeltaUpdate,
+      readOnly: readOnly,
+      getStyle: getStyle,
+      addButtonElement: addButtonElement,
+      cancelButtonElement: cancelButtonElement,
+      editButtonElement: editButtonElement,
+      inputElementGenerator: inputElementGenerator,
+      textareaElementGenerator: textareaElementGenerator,
+      minusMenuElement: minusMenuElement,
+      plusMenuElement: plusMenuElement,
+      beforeRemoveAction: beforeRemoveAction,
+      beforeAddAction: beforeAddAction,
+      beforeUpdateAction: beforeUpdateAction,
+      logger: logger,
+      onSubmitValueParser: onSubmitValueParser
+    }))), !isReadOnly && addFormVisible && /*#__PURE__*/React.createElement("div", {
+      className: "rejt-add-form",
+      style: addForm
+    }, /*#__PURE__*/React.createElement(JsonAddValue, {
+      handleAdd: this.handleAddValueAdd,
+      handleCancel: this.handleAddValueCancel,
+      onlyValue: onlyValue,
+      addButtonElement: addButtonElement,
+      cancelButtonElement: cancelButtonElement,
+      inputElementGenerator: inputElementGenerator,
+      keyPath: keyPath,
+      deep: deep,
+      onSubmitValueParser: onSubmitValueParser
+    })), /*#__PURE__*/React.createElement("span", {
+      className: "rejt-not-collapsed-delimiter",
+      style: delimiter
+    }, endObject), !isReadOnly && removeItemButton);
+  }
+
+  render() {
+    const {
+      name,
+      collapsed,
+      data,
+      keyPath,
+      deep
+    } = this.state;
+    const {
+      dataType,
+      getStyle
+    } = this.props;
+    const value = collapsed ? this.renderCollapsed() : this.renderNotCollapsed();
+    const style = getStyle(name, data, keyPath, deep, dataType);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "rejt-array-node"
+    }, /*#__PURE__*/React.createElement("span", {
+      onClick: this.handleCollapseMode
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "rejt-name",
+      style: style.name
+    }, name, " :", ' ')), value);
+  }
+
+}
+JsonArray.displayName = "JsonArray";
+// @ts-ignore
+JsonArray.defaultProps = {
+  keyPath: [],
+  deep: 0,
+  minusMenuElement: /*#__PURE__*/React.createElement("span", null, " - "),
+  plusMenuElement: /*#__PURE__*/React.createElement("span", null, " + ")
+};
+export class JsonFunctionValue extends Component {
+  constructor(props) {
+    super(props);
+    const keyPath = [...props.keyPath, props.name];
+    this.state = {
+      value: props.value,
+      name: props.name,
+      keyPath,
+      deep: props.deep,
+      editEnabled: false,
+      inputRef: null
+    }; // Bind
+
+    this.handleEditMode = this.handleEditMode.bind(this);
+    this.refInput = this.refInput.bind(this);
+    this.handleCancelEdit = this.handleCancelEdit.bind(this);
+    this.handleEdit = this.handleEdit.bind(this);
+    this.onKeydown = this.onKeydown.bind(this);
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    return props.value !== state.value ? {
+      value: props.value
+    } : null;
+  }
+
+  componentDidUpdate() {
+    const {
+      editEnabled,
+      inputRef,
+      name,
+      value,
+      keyPath,
+      deep
+    } = this.state;
+    const {
+      readOnly,
+      dataType
+    } = this.props;
+    const readOnlyResult = readOnly(name, value, keyPath, deep, dataType);
+
+    if (editEnabled && !readOnlyResult && typeof inputRef.focus === 'function') {
+      inputRef.focus();
+    }
+  }
+
+  componentDidMount() {
+    document.addEventListener('keydown', this.onKeydown);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.onKeydown);
+  }
+
+  onKeydown(event) {
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.repeat) return;
+
+    if (event.code === 'Enter' || event.key === 'Enter') {
+      event.preventDefault();
+      this.handleEdit();
+    }
+
+    if (event.code === 'Escape' || event.key === 'Escape') {
+      event.preventDefault();
+      this.handleCancelEdit();
+    }
+  }
+
+  handleEdit() {
+    const {
+      handleUpdateValue,
+      originalValue,
+      logger,
+      onSubmitValueParser,
+      keyPath
+    } = this.props;
+    const {
+      inputRef,
+      name,
+      deep
+    } = this.state;
+    if (!inputRef) return;
+    const newValue = onSubmitValueParser(true, keyPath, deep, name, inputRef.value);
+    const result = {
+      value: newValue,
+      key: name
+    }; // Run update
+
+    handleUpdateValue(result).then(() => {
+      // Cancel edit mode if necessary
+      if (!isComponentWillChange(originalValue, newValue)) {
+        this.handleCancelEdit();
+      }
+    }).catch(logger.error);
+  }
+
+  handleEditMode() {
+    this.setState({
+      editEnabled: true
+    });
+  }
+
+  refInput(node) {
+    // @ts-ignore
+    this.state.inputRef = node;
+  }
+
+  handleCancelEdit() {
+    this.setState({
+      editEnabled: false
+    });
+  }
+
+  render() {
+    const {
+      name,
+      value,
+      editEnabled,
+      keyPath,
+      deep
+    } = this.state;
+    const {
+      handleRemove,
+      originalValue,
+      readOnly,
+      dataType,
+      getStyle,
+      editButtonElement,
+      cancelButtonElement,
+      textareaElementGenerator,
+      minusMenuElement,
+      keyPath: comeFromKeyPath
+    } = this.props;
+    const style = getStyle(name, originalValue, keyPath, deep, dataType);
+    let result = null;
+    let minusElement = null;
+    const resultOnlyResult = readOnly(name, originalValue, keyPath, deep, dataType);
+
+    if (editEnabled && !resultOnlyResult) {
+      const textareaElement = textareaElementGenerator(inputUsageTypes.VALUE, comeFromKeyPath, deep, name, originalValue, dataType);
+      const editButtonElementLayout = /*#__PURE__*/cloneElement(editButtonElement, {
+        onClick: this.handleEdit
+      });
+      const cancelButtonElementLayout = /*#__PURE__*/cloneElement(cancelButtonElement, {
+        onClick: this.handleCancelEdit
+      });
+      const textareaElementLayout = /*#__PURE__*/cloneElement(textareaElement, {
+        ref: this.refInput,
+        defaultValue: originalValue
+      });
+      result = /*#__PURE__*/React.createElement("span", {
+        className: "rejt-edit-form",
+        style: style.editForm
+      }, textareaElementLayout, " ", cancelButtonElementLayout, editButtonElementLayout);
+      minusElement = null;
+    } else {
+      result = /*#__PURE__*/React.createElement("span", {
+        className: "rejt-value",
+        style: style.value,
+        onClick: resultOnlyResult ? null : this.handleEditMode
+      }, value);
+      const minusMenuLayout = /*#__PURE__*/cloneElement(minusMenuElement, {
+        onClick: handleRemove,
+        className: 'rejt-minus-menu',
+        style: style.minus
+      });
+      minusElement = resultOnlyResult ? null : minusMenuLayout;
+    }
+
+    return /*#__PURE__*/React.createElement("li", {
+      className: "rejt-function-value-node",
+      style: style.li
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "rejt-name",
+      style: style.name
+    }, name, " :", ' '), result, minusElement);
+  }
+
+}
+JsonFunctionValue.displayName = "JsonFunctionValue";
+// @ts-ignore
+JsonFunctionValue.defaultProps = {
+  keyPath: [],
+  deep: 0,
+  handleUpdateValue: () => {},
+  editButtonElement: /*#__PURE__*/React.createElement("button", null, "e"),
+  cancelButtonElement: /*#__PURE__*/React.createElement("button", null, "c"),
+  minusMenuElement: /*#__PURE__*/React.createElement("span", null, " - ")
+};
+export class JsonNode extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: props.data,
+      name: props.name,
+      keyPath: props.keyPath,
+      deep: props.deep
+    };
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    return props.data !== state.data ? {
+      data: props.data
+    } : null;
+  }
+
+  render() {
+    const {
+      data,
+      name,
+      keyPath,
+      deep
+    } = this.state;
+    const {
+      isCollapsed,
+      handleRemove,
+      handleUpdateValue,
+      onUpdate,
+      onDeltaUpdate,
+      readOnly,
+      getStyle,
+      addButtonElement,
+      cancelButtonElement,
+      editButtonElement,
+      inputElementGenerator,
+      textareaElementGenerator,
+      minusMenuElement,
+      plusMenuElement,
+      beforeRemoveAction,
+      beforeAddAction,
+      beforeUpdateAction,
+      logger,
+      onSubmitValueParser
+    } = this.props;
+
+    const readOnlyTrue = () => true;
+
+    const dataType = getObjectType(data);
+
+    switch (dataType) {
+      case dataTypes.ERROR:
+        return /*#__PURE__*/React.createElement(JsonObject, {
+          data: data,
+          name: name,
+          isCollapsed: isCollapsed,
+          keyPath: keyPath,
+          deep: deep,
+          handleRemove: handleRemove,
+          onUpdate: onUpdate,
+          onDeltaUpdate: onDeltaUpdate,
+          readOnly: readOnlyTrue,
+          dataType: dataType,
+          getStyle: getStyle,
+          addButtonElement: addButtonElement,
+          cancelButtonElement: cancelButtonElement,
+          editButtonElement: editButtonElement,
+          inputElementGenerator: inputElementGenerator,
+          textareaElementGenerator: textareaElementGenerator,
+          minusMenuElement: minusMenuElement,
+          plusMenuElement: plusMenuElement,
+          beforeRemoveAction: beforeRemoveAction,
+          beforeAddAction: beforeAddAction,
+          beforeUpdateAction: beforeUpdateAction,
+          logger: logger,
+          onSubmitValueParser: onSubmitValueParser
+        });
+
+      case dataTypes.OBJECT:
+        return /*#__PURE__*/React.createElement(JsonObject, {
+          data: data,
+          name: name,
+          isCollapsed: isCollapsed,
+          keyPath: keyPath,
+          deep: deep,
+          handleRemove: handleRemove,
+          onUpdate: onUpdate,
+          onDeltaUpdate: onDeltaUpdate,
+          readOnly: readOnly,
+          dataType: dataType,
+          getStyle: getStyle,
+          addButtonElement: addButtonElement,
+          cancelButtonElement: cancelButtonElement,
+          editButtonElement: editButtonElement,
+          inputElementGenerator: inputElementGenerator,
+          textareaElementGenerator: textareaElementGenerator,
+          minusMenuElement: minusMenuElement,
+          plusMenuElement: plusMenuElement,
+          beforeRemoveAction: beforeRemoveAction,
+          beforeAddAction: beforeAddAction,
+          beforeUpdateAction: beforeUpdateAction,
+          logger: logger,
+          onSubmitValueParser: onSubmitValueParser
+        });
+
+      case dataTypes.ARRAY:
+        return /*#__PURE__*/React.createElement(JsonArray, {
+          data: data,
+          name: name,
+          isCollapsed: isCollapsed,
+          keyPath: keyPath,
+          deep: deep,
+          handleRemove: handleRemove,
+          onUpdate: onUpdate,
+          onDeltaUpdate: onDeltaUpdate,
+          readOnly: readOnly,
+          dataType: dataType,
+          getStyle: getStyle,
+          addButtonElement: addButtonElement,
+          cancelButtonElement: cancelButtonElement,
+          editButtonElement: editButtonElement,
+          inputElementGenerator: inputElementGenerator,
+          textareaElementGenerator: textareaElementGenerator,
+          minusMenuElement: minusMenuElement,
+          plusMenuElement: plusMenuElement,
+          beforeRemoveAction: beforeRemoveAction,
+          beforeAddAction: beforeAddAction,
+          beforeUpdateAction: beforeUpdateAction,
+          logger: logger,
+          onSubmitValueParser: onSubmitValueParser
+        });
+
+      case dataTypes.STRING:
+        return /*#__PURE__*/React.createElement(JsonValue, {
+          name: name,
+          value: `"${data}"`,
+          originalValue: data,
+          keyPath: keyPath,
+          deep: deep,
+          handleRemove: handleRemove,
+          handleUpdateValue: handleUpdateValue,
+          readOnly: readOnly,
+          dataType: dataType,
+          getStyle: getStyle,
+          cancelButtonElement: cancelButtonElement,
+          editButtonElement: editButtonElement,
+          inputElementGenerator: inputElementGenerator,
+          minusMenuElement: minusMenuElement,
+          logger: logger,
+          onSubmitValueParser: onSubmitValueParser
+        });
+
+      case dataTypes.NUMBER:
+        return /*#__PURE__*/React.createElement(JsonValue, {
+          name: name,
+          value: data,
+          originalValue: data,
+          keyPath: keyPath,
+          deep: deep,
+          handleRemove: handleRemove,
+          handleUpdateValue: handleUpdateValue,
+          readOnly: readOnly,
+          dataType: dataType,
+          getStyle: getStyle,
+          cancelButtonElement: cancelButtonElement,
+          editButtonElement: editButtonElement,
+          inputElementGenerator: inputElementGenerator,
+          minusMenuElement: minusMenuElement,
+          logger: logger,
+          onSubmitValueParser: onSubmitValueParser
+        });
+
+      case dataTypes.BOOLEAN:
+        return /*#__PURE__*/React.createElement(JsonValue, {
+          name: name,
+          value: data ? 'true' : 'false',
+          originalValue: data,
+          keyPath: keyPath,
+          deep: deep,
+          handleRemove: handleRemove,
+          handleUpdateValue: handleUpdateValue,
+          readOnly: readOnly,
+          dataType: dataType,
+          getStyle: getStyle,
+          cancelButtonElement: cancelButtonElement,
+          editButtonElement: editButtonElement,
+          inputElementGenerator: inputElementGenerator,
+          minusMenuElement: minusMenuElement,
+          logger: logger,
+          onSubmitValueParser: onSubmitValueParser
+        });
+
+      case dataTypes.DATE:
+        return /*#__PURE__*/React.createElement(JsonValue, {
+          name: name,
+          value: data.toISOString(),
+          originalValue: data,
+          keyPath: keyPath,
+          deep: deep,
+          handleRemove: handleRemove,
+          handleUpdateValue: handleUpdateValue,
+          readOnly: readOnlyTrue,
+          dataType: dataType,
+          getStyle: getStyle,
+          cancelButtonElement: cancelButtonElement,
+          editButtonElement: editButtonElement,
+          inputElementGenerator: inputElementGenerator,
+          minusMenuElement: minusMenuElement,
+          logger: logger,
+          onSubmitValueParser: onSubmitValueParser
+        });
+
+      case dataTypes.NULL:
+        return /*#__PURE__*/React.createElement(JsonValue, {
+          name: name,
+          value: "null",
+          originalValue: "null",
+          keyPath: keyPath,
+          deep: deep,
+          handleRemove: handleRemove,
+          handleUpdateValue: handleUpdateValue,
+          readOnly: readOnly,
+          dataType: dataType,
+          getStyle: getStyle,
+          cancelButtonElement: cancelButtonElement,
+          editButtonElement: editButtonElement,
+          inputElementGenerator: inputElementGenerator,
+          minusMenuElement: minusMenuElement,
+          logger: logger,
+          onSubmitValueParser: onSubmitValueParser
+        });
+
+      case dataTypes.UNDEFINED:
+        return /*#__PURE__*/React.createElement(JsonValue, {
+          name: name,
+          value: "undefined",
+          originalValue: "undefined",
+          keyPath: keyPath,
+          deep: deep,
+          handleRemove: handleRemove,
+          handleUpdateValue: handleUpdateValue,
+          readOnly: readOnly,
+          dataType: dataType,
+          getStyle: getStyle,
+          cancelButtonElement: cancelButtonElement,
+          editButtonElement: editButtonElement,
+          inputElementGenerator: inputElementGenerator,
+          minusMenuElement: minusMenuElement,
+          logger: logger,
+          onSubmitValueParser: onSubmitValueParser
+        });
+
+      case dataTypes.FUNCTION:
+        return /*#__PURE__*/React.createElement(JsonFunctionValue, {
+          name: name,
+          value: data.toString(),
+          originalValue: data,
+          keyPath: keyPath,
+          deep: deep,
+          handleRemove: handleRemove,
+          handleUpdateValue: handleUpdateValue,
+          readOnly: readOnly,
+          dataType: dataType,
+          getStyle: getStyle,
+          cancelButtonElement: cancelButtonElement,
+          editButtonElement: editButtonElement,
+          textareaElementGenerator: textareaElementGenerator,
+          minusMenuElement: minusMenuElement,
+          logger: logger,
+          onSubmitValueParser: onSubmitValueParser
+        });
+
+      case dataTypes.SYMBOL:
+        return /*#__PURE__*/React.createElement(JsonValue, {
+          name: name,
+          value: data.toString(),
+          originalValue: data,
+          keyPath: keyPath,
+          deep: deep,
+          handleRemove: handleRemove,
+          handleUpdateValue: handleUpdateValue,
+          readOnly: readOnlyTrue,
+          dataType: dataType,
+          getStyle: getStyle,
+          cancelButtonElement: cancelButtonElement,
+          editButtonElement: editButtonElement,
+          inputElementGenerator: inputElementGenerator,
+          minusMenuElement: minusMenuElement,
+          logger: logger,
+          onSubmitValueParser: onSubmitValueParser
+        });
+
+      default:
+        return null;
+    }
+  }
+
+}
+JsonNode.displayName = "JsonNode";
+/// @ts-ignore
+JsonNode.defaultProps = {
+  keyPath: [],
+  deep: 0
+};
+export class JsonObject extends Component {
+  constructor(props) {
+    super(props);
+    const keyPath = props.deep === -1 ? [] : [...props.keyPath, props.name];
+    this.state = {
+      name: props.name,
+      data: props.data,
+      keyPath,
+      deep: props.deep,
+      nextDeep: props.deep + 1,
+      collapsed: props.isCollapsed(keyPath, props.deep, props.data),
+      addFormVisible: false
+    }; // Bind
+
+    this.handleCollapseMode = this.handleCollapseMode.bind(this);
+    this.handleRemoveValue = this.handleRemoveValue.bind(this);
+    this.handleAddMode = this.handleAddMode.bind(this);
+    this.handleAddValueAdd = this.handleAddValueAdd.bind(this);
+    this.handleAddValueCancel = this.handleAddValueCancel.bind(this);
+    this.handleEditValue = this.handleEditValue.bind(this);
+    this.onChildUpdate = this.onChildUpdate.bind(this);
+    this.renderCollapsed = this.renderCollapsed.bind(this);
+    this.renderNotCollapsed = this.renderNotCollapsed.bind(this);
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    return props.data !== state.data ? {
+      data: props.data
+    } : null;
+  }
+
+  onChildUpdate(childKey, childData) {
+    const {
+      data,
+      keyPath
+    } = this.state; // Update data
+    // @ts-ignore
+
+    data[childKey] = childData; // Put new data
+
+    this.setState({
+      data
+    }); // Spread
+
+    const {
+      onUpdate
+    } = this.props;
+    const size = keyPath.length;
+    onUpdate(keyPath[size - 1], data);
+  }
+
+  handleAddMode() {
+    this.setState({
+      addFormVisible: true
+    });
+  }
+
+  handleAddValueCancel() {
+    this.setState({
+      addFormVisible: false
+    });
+  }
+
+  handleAddValueAdd({
+    key,
+    newValue
+  }) {
+    const {
+      data,
+      keyPath,
+      nextDeep: deep
+    } = this.state;
+    const {
+      beforeAddAction,
+      logger
+    } = this.props;
+    beforeAddAction(key, keyPath, deep, newValue).then(() => {
+      // Update data
+      // @ts-ignore
+      data[key] = newValue;
+      this.setState({
+        data
+      }); // Cancel add to close
+
+      this.handleAddValueCancel(); // Spread new update
+
+      const {
+        onUpdate,
+        onDeltaUpdate
+      } = this.props;
+      onUpdate(keyPath[keyPath.length - 1], data); // Spread delta update
+
+      onDeltaUpdate({
+        type: deltaTypes.ADD_DELTA_TYPE,
+        keyPath,
+        deep,
+        key,
+        newValue
+      });
+    }).catch(logger.error);
+  }
+
+  handleRemoveValue(key) {
+    return () => {
+      const {
+        beforeRemoveAction,
+        logger
+      } = this.props;
+      const {
+        data,
+        keyPath,
+        nextDeep: deep
+      } = this.state; // @ts-ignore
+
+      const oldValue = data[key]; // Before Remove Action
+
+      beforeRemoveAction(key, keyPath, deep, oldValue).then(() => {
+        const deltaUpdateResult = {
+          keyPath,
+          deep,
+          key,
+          oldValue,
+          type: deltaTypes.REMOVE_DELTA_TYPE
+        }; // @ts-ignore
+
+        delete data[key];
+        this.setState({
+          data
+        }); // Spread new update
+
+        const {
+          onUpdate,
+          onDeltaUpdate
+        } = this.props;
+        onUpdate(keyPath[keyPath.length - 1], data); // Spread delta update
+
+        onDeltaUpdate(deltaUpdateResult);
+      }).catch(logger.error);
+    };
+  }
+
+  handleCollapseMode() {
+    this.setState(state => ({
+      collapsed: !state.collapsed
+    }));
+  }
+
+  handleEditValue({
+    key,
+    value
+  }) {
+    return new Promise((resolve, reject) => {
+      const {
+        beforeUpdateAction
+      } = this.props;
+      const {
+        data,
+        keyPath,
+        nextDeep: deep
+      } = this.state; // Old value
+      // @ts-ignore
+
+      const oldValue = data[key]; // Before update action
+
+      beforeUpdateAction(key, keyPath, deep, oldValue, value).then(() => {
+        // Update value
+        // @ts-ignore
+        data[key] = value; // Set state
+
+        this.setState({
+          data
+        }); // Spread new update
+
+        const {
+          onUpdate,
+          onDeltaUpdate
+        } = this.props;
+        onUpdate(keyPath[keyPath.length - 1], data); // Spread delta update
+
+        onDeltaUpdate({
+          type: deltaTypes.UPDATE_DELTA_TYPE,
+          keyPath,
+          deep,
+          key,
+          newValue: value,
+          oldValue
+        }); // Resolve
+
+        resolve();
+      }).catch(reject);
+    });
+  }
+
+  renderCollapsed() {
+    const {
+      name,
+      keyPath,
+      deep,
+      data
+    } = this.state;
+    const {
+      handleRemove,
+      readOnly,
+      dataType,
+      getStyle,
+      minusMenuElement
+    } = this.props;
+    const {
+      minus,
+      collapsed
+    } = getStyle(name, data, keyPath, deep, dataType);
+    const keyList = Object.getOwnPropertyNames(data);
+    const isReadOnly = readOnly(name, data, keyPath, deep, dataType);
+    const removeItemButton = /*#__PURE__*/cloneElement(minusMenuElement, {
+      onClick: handleRemove,
+      className: 'rejt-minus-menu',
+      style: minus
+    });
+    return /*#__PURE__*/React.createElement("span", {
+      className: "rejt-collapsed"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "rejt-collapsed-text",
+      style: collapsed,
+      onClick: this.handleCollapseMode
+    }, '{...}', " ", keyList.length, " ", keyList.length === 1 ? 'key' : 'keys'), !isReadOnly && removeItemButton);
+  }
+
+  renderNotCollapsed() {
+    const {
+      name,
+      data,
+      keyPath,
+      deep,
+      nextDeep,
+      addFormVisible
+    } = this.state;
+    const {
+      isCollapsed,
+      handleRemove,
+      onDeltaUpdate,
+      readOnly,
+      getStyle,
+      dataType,
+      addButtonElement,
+      cancelButtonElement,
+      editButtonElement,
+      inputElementGenerator,
+      textareaElementGenerator,
+      minusMenuElement,
+      plusMenuElement,
+      beforeRemoveAction,
+      beforeAddAction,
+      beforeUpdateAction,
+      logger,
+      onSubmitValueParser
+    } = this.props;
+    const {
+      minus,
+      plus,
+      addForm,
+      ul,
+      delimiter
+    } = getStyle(name, data, keyPath, deep, dataType);
+    const keyList = Object.getOwnPropertyNames(data);
+    const isReadOnly = readOnly(name, data, keyPath, deep, dataType);
+    const addItemButton = /*#__PURE__*/cloneElement(plusMenuElement, {
+      onClick: this.handleAddMode,
+      className: 'rejt-plus-menu',
+      style: plus
+    });
+    const removeItemButton = /*#__PURE__*/cloneElement(minusMenuElement, {
+      onClick: handleRemove,
+      className: 'rejt-minus-menu',
+      style: minus
+    });
+    const list = keyList.map(key => /*#__PURE__*/React.createElement(JsonNode, {
+      key: key,
+      name: key,
+      data: data[key],
+      keyPath: keyPath,
+      deep: nextDeep,
+      isCollapsed: isCollapsed,
+      handleRemove: this.handleRemoveValue(key),
+      handleUpdateValue: this.handleEditValue,
+      onUpdate: this.onChildUpdate,
+      onDeltaUpdate: onDeltaUpdate,
+      readOnly: readOnly,
+      getStyle: getStyle,
+      addButtonElement: addButtonElement,
+      cancelButtonElement: cancelButtonElement,
+      editButtonElement: editButtonElement,
+      inputElementGenerator: inputElementGenerator,
+      textareaElementGenerator: textareaElementGenerator,
+      minusMenuElement: minusMenuElement,
+      plusMenuElement: plusMenuElement,
+      beforeRemoveAction: beforeRemoveAction,
+      beforeAddAction: beforeAddAction,
+      beforeUpdateAction: beforeUpdateAction,
+      logger: logger,
+      onSubmitValueParser: onSubmitValueParser
+    }));
+    const startObject = '{';
+    const endObject = '}';
+    return /*#__PURE__*/React.createElement("span", {
+      className: "rejt-not-collapsed"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "rejt-not-collapsed-delimiter",
+      style: delimiter
+    }, startObject), !isReadOnly && addItemButton, /*#__PURE__*/React.createElement("ul", {
+      className: "rejt-not-collapsed-list",
+      style: ul
+    }, list), !isReadOnly && addFormVisible && /*#__PURE__*/React.createElement("div", {
+      className: "rejt-add-form",
+      style: addForm
+    }, /*#__PURE__*/React.createElement(JsonAddValue, {
+      handleAdd: this.handleAddValueAdd,
+      handleCancel: this.handleAddValueCancel,
+      addButtonElement: addButtonElement,
+      cancelButtonElement: cancelButtonElement,
+      inputElementGenerator: inputElementGenerator,
+      keyPath: keyPath,
+      deep: deep,
+      onSubmitValueParser: onSubmitValueParser
+    })), /*#__PURE__*/React.createElement("span", {
+      className: "rejt-not-collapsed-delimiter",
+      style: delimiter
+    }, endObject), !isReadOnly && removeItemButton);
+  }
+
+  render() {
+    const {
+      name,
+      collapsed,
+      data,
+      keyPath,
+      deep
+    } = this.state;
+    const {
+      getStyle,
+      dataType
+    } = this.props;
+    const value = collapsed ? this.renderCollapsed() : this.renderNotCollapsed();
+    const style = getStyle(name, data, keyPath, deep, dataType);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "rejt-object-node"
+    }, /*#__PURE__*/React.createElement("span", {
+      onClick: this.handleCollapseMode
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "rejt-name",
+      style: style.name
+    }, name, " :", ' ')), value);
+  }
+
+}
+JsonObject.displayName = "JsonObject";
+// @ts-ignore
+JsonObject.defaultProps = {
+  keyPath: [],
+  deep: 0,
+  minusMenuElement: /*#__PURE__*/React.createElement("span", null, " - "),
+  plusMenuElement: /*#__PURE__*/React.createElement("span", null, " + ")
+};
+export class JsonValue extends Component {
+  constructor(props) {
+    super(props);
+    const keyPath = [...props.keyPath, props.name];
+    this.state = {
+      value: props.value,
+      name: props.name,
+      keyPath,
+      deep: props.deep,
+      editEnabled: false,
+      inputRef: null
+    }; // Bind
+
+    this.handleEditMode = this.handleEditMode.bind(this);
+    this.refInput = this.refInput.bind(this);
+    this.handleCancelEdit = this.handleCancelEdit.bind(this);
+    this.handleEdit = this.handleEdit.bind(this);
+    this.onKeydown = this.onKeydown.bind(this);
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    return props.value !== state.value ? {
+      value: props.value
+    } : null;
+  }
+
+  componentDidUpdate() {
+    const {
+      editEnabled,
+      inputRef,
+      name,
+      value,
+      keyPath,
+      deep
+    } = this.state;
+    const {
+      readOnly,
+      dataType
+    } = this.props;
+    const isReadOnly = readOnly(name, value, keyPath, deep, dataType);
+
+    if (editEnabled && !isReadOnly && typeof inputRef.focus === 'function') {
+      inputRef.focus();
+    }
+  }
+
+  componentDidMount() {
+    document.addEventListener('keydown', this.onKeydown);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.onKeydown);
+  }
+
+  onKeydown(event) {
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.repeat) return;
+
+    if (event.code === 'Enter' || event.key === 'Enter') {
+      event.preventDefault();
+      this.handleEdit();
+    }
+
+    if (event.code === 'Escape' || event.key === 'Escape') {
+      event.preventDefault();
+      this.handleCancelEdit();
+    }
+  }
+
+  handleEdit() {
+    const {
+      handleUpdateValue,
+      originalValue,
+      logger,
+      onSubmitValueParser,
+      keyPath
+    } = this.props;
+    const {
+      inputRef,
+      name,
+      deep
+    } = this.state;
+    if (!inputRef) return;
+    const newValue = onSubmitValueParser(true, keyPath, deep, name, inputRef.value);
+    const result = {
+      value: newValue,
+      key: name
+    }; // Run update
+
+    handleUpdateValue(result).then(() => {
+      // Cancel edit mode if necessary
+      if (!isComponentWillChange(originalValue, newValue)) {
+        this.handleCancelEdit();
+      }
+    }).catch(logger.error);
+  }
+
+  handleEditMode() {
+    this.setState({
+      editEnabled: true
+    });
+  }
+
+  refInput(node) {
+    // @ts-ignore
+    this.state.inputRef = node;
+  }
+
+  handleCancelEdit() {
+    this.setState({
+      editEnabled: false
+    });
+  }
+
+  render() {
+    const {
+      name,
+      value,
+      editEnabled,
+      keyPath,
+      deep
+    } = this.state;
+    const {
+      handleRemove,
+      originalValue,
+      readOnly,
+      dataType,
+      getStyle,
+      editButtonElement,
+      cancelButtonElement,
+      inputElementGenerator,
+      minusMenuElement,
+      keyPath: comeFromKeyPath
+    } = this.props;
+    const style = getStyle(name, originalValue, keyPath, deep, dataType);
+    const isReadOnly = readOnly(name, originalValue, keyPath, deep, dataType);
+    const isEditing = editEnabled && !isReadOnly;
+    const inputElement = inputElementGenerator(inputUsageTypes.VALUE, comeFromKeyPath, deep, name, originalValue, dataType);
+    const editButtonElementLayout = /*#__PURE__*/cloneElement(editButtonElement, {
+      onClick: this.handleEdit
+    });
+    const cancelButtonElementLayout = /*#__PURE__*/cloneElement(cancelButtonElement, {
+      onClick: this.handleCancelEdit
+    });
+    const inputElementLayout = /*#__PURE__*/cloneElement(inputElement, {
+      ref: this.refInput,
+      defaultValue: JSON.stringify(originalValue)
+    });
+    const minusMenuLayout = /*#__PURE__*/cloneElement(minusMenuElement, {
+      onClick: handleRemove,
+      className: 'rejt-minus-menu',
+      style: style.minus
+    });
+    return /*#__PURE__*/React.createElement("li", {
+      className: "rejt-value-node",
+      style: style.li
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "rejt-name",
+      style: style.name
+    }, name, ' : '), isEditing ? /*#__PURE__*/React.createElement("span", {
+      className: "rejt-edit-form",
+      style: style.editForm
+    }, inputElementLayout, " ", cancelButtonElementLayout, editButtonElementLayout) : /*#__PURE__*/React.createElement("span", {
+      className: "rejt-value",
+      style: style.value,
+      onClick: isReadOnly ? null : this.handleEditMode
+    }, String(value)), !isReadOnly && !isEditing && minusMenuLayout);
+  }
+
+}
+JsonValue.displayName = "JsonValue";
+// @ts-ignore
+JsonValue.defaultProps = {
+  keyPath: [],
+  deep: 0,
+  handleUpdateValue: () => Promise.resolve(),
+  editButtonElement: /*#__PURE__*/React.createElement("button", null, "e"),
+  cancelButtonElement: /*#__PURE__*/React.createElement("button", null, "c"),
+  minusMenuElement: /*#__PURE__*/React.createElement("span", null, " - ")
+};