@storybook/components 6.4.0-beta.24 → 6.4.0-beta.25

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

@@ -0,0 +1,394 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import JsonNode from './JsonNode';
+import JsonAddValue from './JsonAddValue';
+import { ADD_DELTA_TYPE, REMOVE_DELTA_TYPE, UPDATE_DELTA_TYPE } from '../types/deltaTypes';
+
+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
+
+    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
+      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: 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;
+      const oldValue = data[key]; // Before Remove Action
+
+      beforeRemoveAction(key, keyPath, deep, oldValue).then(() => {
+        const deltaUpdateResult = {
+          keyPath,
+          deep,
+          key,
+          oldValue,
+          type: REMOVE_DELTA_TYPE
+        };
+        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
+
+      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: 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__*/React.cloneElement(minusMenuElement, {
+      onClick: handleRemove,
+      className: 'rejt-minus-menu',
+      style: minus
+    });
+    /* eslint-disable jsx-a11y/no-static-element-interactions */
+
+    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);
+    /* eslint-enable */
+  }
+
+  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__*/React.cloneElement(plusMenuElement, {
+      onClick: this.handleAddMode,
+      className: 'rejt-plus-menu',
+      style: plus
+    });
+    const removeItemButton = /*#__PURE__*/React.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);
+    /* eslint-disable jsx-a11y/no-static-element-interactions */
+
+    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);
+    /* eslint-enable */
+  }
+
+}
+
+JsonObject.displayName = "JsonObject";
+JsonObject.propTypes = {
+  data: PropTypes.object.isRequired,
+  name: PropTypes.string.isRequired,
+  isCollapsed: PropTypes.func.isRequired,
+  keyPath: PropTypes.array,
+  deep: PropTypes.number,
+  handleRemove: PropTypes.func,
+  onUpdate: PropTypes.func.isRequired,
+  onDeltaUpdate: PropTypes.func.isRequired,
+  readOnly: PropTypes.func.isRequired,
+  dataType: PropTypes.string,
+  getStyle: PropTypes.func.isRequired,
+  addButtonElement: PropTypes.element,
+  cancelButtonElement: PropTypes.element,
+  editButtonElement: PropTypes.element,
+  inputElementGenerator: PropTypes.func.isRequired,
+  textareaElementGenerator: PropTypes.func.isRequired,
+  minusMenuElement: PropTypes.element,
+  plusMenuElement: PropTypes.element,
+  beforeRemoveAction: PropTypes.func,
+  beforeAddAction: PropTypes.func,
+  beforeUpdateAction: PropTypes.func,
+  logger: PropTypes.object.isRequired,
+  onSubmitValueParser: PropTypes.func.isRequired
+};
+JsonObject.defaultProps = {
+  keyPath: [],
+  deep: 0,
+  minusMenuElement: /*#__PURE__*/React.createElement("span", null, " - "),
+  plusMenuElement: /*#__PURE__*/React.createElement("span", null, " + ")
+};
+export default JsonObject;

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

@@ -0,0 +1,202 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { isComponentWillChange } from '../utils/objectTypes';
+import inputUsageTypes from '../types/inputUsageTypes';
+
+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) {
+    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__*/React.cloneElement(editButtonElement, {
+      onClick: this.handleEdit
+    });
+    const cancelButtonElementLayout = /*#__PURE__*/React.cloneElement(cancelButtonElement, {
+      onClick: this.handleCancelEdit
+    });
+    const inputElementLayout = /*#__PURE__*/React.cloneElement(inputElement, {
+      ref: this.refInput,
+      defaultValue: JSON.stringify(originalValue)
+    });
+    const minusMenuLayout = /*#__PURE__*/React.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";
+JsonValue.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.any.isRequired,
+  originalValue: PropTypes.any,
+  keyPath: PropTypes.array,
+  deep: PropTypes.number,
+  handleRemove: PropTypes.func,
+  handleUpdateValue: PropTypes.func,
+  readOnly: PropTypes.func.isRequired,
+  dataType: PropTypes.string,
+  getStyle: PropTypes.func.isRequired,
+  editButtonElement: PropTypes.element,
+  cancelButtonElement: PropTypes.element,
+  inputElementGenerator: PropTypes.func.isRequired,
+  minusMenuElement: PropTypes.element,
+  logger: PropTypes.object.isRequired,
+  onSubmitValueParser: PropTypes.func.isRequired
+};
+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, " - ")
+};
+export default JsonValue;