react-jsonschema-form-extras 0.9.67 → 0.9.71

package/lib/CollapsibleField.js.orig

@@ -0,0 +1,402 @@
+import React, { Component } from "react";
+import {
+  deepEquals,
+  getDefaultFormState
+} from "react-jsonschema-form/lib/utils";
+import PropTypes from "prop-types";
+
+import { getFieldName } from "./utils";
+
+class CollapseMenuAction extends Component {
+  render() {
+    let { action, allActions = {} } = this.props;
+    if (!action) {
+      return null;
+    }
+    if (typeof action === "string") {
+      return <div>{action}</div>;
+    } else if (typeof action === "object") {
+      const Component = allActions[action.component];
+      if (!Component) {
+        console.error(
+          `Can't find ${action.component} in formContext.allActions`
+        );
+        return (
+          <h2 className="warning bg-error" style={{ color: "red" }}>
+            Can't find <b>{action.component}</b> in <b>formContext</b>.<b>allActions</b>
+          </h2>
+        );
+      }
+      return <Component {...action.props} />;
+    }
+  }
+}
+
+function CollapseMenu(props) {
+  let {
+    headerElementsSchemas,
+    uiSchema,
+    formContext = {},
+    formData = {},
+    onChange,
+    onAdd,
+    title,
+    name,
+    collapsed,
+    fields,
+    propsOnChange
+  } = props;
+
+  const {
+    collapse: {
+      collapsibleHeaderElements = {},
+      icon: {
+        enabled = "glyphicon glyphicon-chevron-down",
+        disabled = "glyphicon glyphicon-chevron-right",
+        add = "glyphicon glyphicon-plus-sign"
+      } = {},
+      separate = true,
+      addTo,
+      wrapClassName = "lead",
+      actions = [],
+      classNames = "collapsibleHeading",
+      collapseDivStyles: {
+        textColor = "white",
+        background = "linear-gradient(to right, #0472B6, white)",
+        collapseGlyphColor = "white",
+        addGlyphColor = "white",
+        padding = "14px",
+        margin = "",
+        marginLeft = "-5px",
+        marginBottom = "5px",
+        zIndex = -1,
+        divCursor = "pointer",
+        addCursor = "copy"
+      } = {}
+    }
+  } = uiSchema;
+
+  const handleAdd = event => {
+    event.stopPropagation();
+    onAdd(event);
+  };
+
+  let headerElements = [];
+  let {
+    className: headerElementsWrapperClass = "header-element-wrapper"
+  } = collapsibleHeaderElements;
+
+  Object.keys(headerElementsSchemas).map(key => {
+    const fieldSchema = headerElementsSchemas[key];
+    const fieldName = getFieldName(fieldSchema.type);
+
+    if (fieldName) {
+      let FieldElement = fields[fieldName];
+      const fieldId = `${key}`;
+      const fieldUiSchema = uiSchema[key];
+      const fieldFormData = formData[key];
+
+      const elementOnChange = (value, options) => {
+        formData[key] = value;
+        propsOnChange(formData, options);
+      };
+
+      headerElements.push(
+        <FieldElement
+          formContext={formContext}
+          formData={fieldFormData}
+          idSchema={{ $id: fieldId }}
+          key={key}
+          onChange={elementOnChange}
+          schema={fieldSchema}
+          uiSchema={fieldUiSchema}
+        />
+      );
+    }
+  });
+
+  return (
+    <div className={`${wrapClassName}`}>
+      <div
+        className={classNames}
+        onClick={onChange}
+        style={{
+          padding,
+          margin,
+          marginLeft,
+          marginBottom,
+          zIndex,
+          cursor: divCursor,
+          background
+        }}
+      >
+        <span style={{ color: textColor }}>{title || name}</span>&nbsp;
+        {addTo && (
+          <a
+            onClick={handleAdd}
+            style={{ color: addGlyphColor, cursor: addCursor }}
+          >
+            <i style={{ cursor: addCursor }} className={add} />
+          </a>
+        )}
+        <a>
+          <i
+            style={{ color: collapseGlyphColor }}
+            className={collapsed ? disabled : enabled}
+          />
+        </a>
+        {!!headerElements.length && (
+          <div
+            className={headerElementsWrapperClass}
+            onClick={event => event.stopPropagation()}
+          >
+            {headerElements}
+          </div>
+        )}
+        {actions.map((action, i) => (
+          <CollapseMenuAction
+            key={i}
+            action={action}
+            allActions={formContext.allActions}
+          />
+        ))}
+      </div>
+      {separate && <hr />}
+    </div>
+  );
+}
+
+class CollapseLegend extends Component {
+  render() {
+    let {
+      uiSchema: { collapse: { legend } },
+      formContext: { legends = {} } = {}
+    } = this.props;
+    if (!legend) {
+      return null;
+    }
+    if (typeof legend === "string") {
+      return <div>{legend}</div>;
+    } else if (typeof legend === "object") {
+      const Component = legends[legend.component];
+      if (!Component) {
+        console.error(`Can't find ${legend.components} in formContext.legends`);
+        return (
+          <h2 className="warning bg-error" style={{ color: "red" }}>
+            Can't find <b>{legend.component}</b> in <b>formContext</b>.<b>legends</b>
+          </h2>
+        );
+      }
+      return <Component {...legend.props} />;
+    }
+    return <div>I'm a legend</div>;
+  }
+}
+
+class CollapsibleField extends Component {
+  constructor(props) {
+    super(props);
+
+    let { uiSchema: { collapse: { collapsed = true } = {} } } = props;
+
+    this.state = { collapsed };
+  }
+
+  appendToArray = (formData = [], newVal) => {
+    let { uiSchema: { collapse: { addToBottom = true } = {} } } = this.props;
+    if (formData.some(v => deepEquals(v, newVal))) {
+      return formData;
+    } else {
+      // newVal can be either array or a single element, concat flattens value
+      if (addToBottom) {
+        return formData.concat(newVal);
+      } else {
+        return [newVal].concat(formData);
+      }
+    }
+  };
+
+  doAdd = (field, formData, newVal) => {
+    if (field === "self") {
+      this.props.onChange(this.appendToArray(formData, newVal));
+    } else {
+      let fieldVal = this.appendToArray(formData[field], newVal);
+      let change = Object.assign({}, formData, { [field]: fieldVal });
+      this.props.onChange(change);
+    }
+  };
+
+  handleAdd = () => {
+    this.setState({ collapsed: false });
+    this.forceUpdate(() => {
+      let {
+        schema,
+        uiSchema,
+        formData,
+        registry: { fields },
+        formContext
+      } = this.props;
+      let { collapse: { addTo, addElement } } = uiSchema;
+
+      let fieldSchema =
+        addTo === "self"
+          ? schema.items
+          : schema.properties
+            ? schema.properties[addTo] ? schema.properties[addTo].items : null
+            : null;
+      if (!fieldSchema) {
+        return false;
+      }
+      let fieldUiSchema = addTo === "self" ? uiSchema : uiSchema[addTo];
+      let fieldFormData = addTo === "self" ? formData : formData[addTo];
+
+      if (addElement) {
+        if (typeof addElement === "function") {
+          let onSubmit = newVal => {
+            this.setState({ AddElement: undefined });
+            this.doAdd(addTo, formData, newVal);
+          };
+          let AddElement = addElement(fieldSchema, fieldUiSchema, onSubmit);
+          this.setState({ AddElement });
+        } else {
+          let FieldElement = fields[addElement];
+          let onBlur = newVal => {
+            this.setState({ AddElement: undefined });
+            this.doAdd(addTo, formData, newVal);
+          };
+          let AddElement = () => (
+            <FieldElement
+              schema={fieldSchema}
+              uiSchema={fieldUiSchema}
+              onChange={formData => {
+                onBlur(formData);
+              }}
+              formContext={formContext}
+              formData={fieldFormData}
+            />
+          );
+          this.setState({ AddElement });
+        }
+      } else {
+        let newVal = getDefaultFormState(fieldSchema, {});
+        this.doAdd(addTo, formData, newVal);
+      }
+    });
+  };
+
+  handleCollapsed = () => {
+    this.setState(function(state) {
+      return { collapsed: !state.collapsed };
+    });
+  };
+
+  componentDidCatch(error, errorInfo) {
+    // You can also log the error to an error reporting service
+    console.log({ error, errorInfo });
+  }
+
+  render() {
+    let {
+      schema: { title, properties = {} },
+      uiSchema,
+      registry: { fields },
+      idSchema: { $id } = {},
+      name,
+      formContext,
+      formData,
+      onChange: propsOnChange
+    } = this.props;
+    let { collapsed, AddElement } = this.state;
+    let { collapse: { collapsibleHeaderElements = {}, field } } = uiSchema;
+    let CollapseElement = fields[field];
+<<<<<<< HEAD
+
+    // uischema retains the value for the state
+=======
+    let { elements = [] } = collapsibleHeaderElements;
+    // uischema retains the value form the state
+>>>>>>> origin/master
+    uiSchema.collapse.collapsed = this.state.collapsed;
+
+    title = uiSchema["ui:title"] ? uiSchema["ui:title"] : title ? title : name;
+    let customizedId = collapsed ? $id : undefined;
+
+    //remove header elements from the schema
+    let headerElementsSchemas = {};
+    let propertiesNoHeader = { ...properties };
+    let orderNoHeader = uiSchema["ui:order"]
+      ? uiSchema["ui:order"].filter(x => elements.indexOf(x) < 0)
+      : uiSchema["ui:order"];
+
+    elements.forEach(key => {
+      if (propertiesNoHeader[key]) {
+        headerElementsSchemas[key] = propertiesNoHeader[key];
+        delete propertiesNoHeader[key];
+      }
+    });
+
+    const collapseElementProps = {
+      ...this.props,
+      schema: { ...this.props.schema, properties: propertiesNoHeader },
+      uiSchema: { ...this.props.uiSchema, "ui:order": orderNoHeader }
+    };
+
+    return (
+      <div id={customizedId}>
+        <CollapseMenu
+          headerElementsSchemas={headerElementsSchemas}
+          collapsibleFieldId={$id}
+          title={title}
+          uiSchema={uiSchema}
+          collapsed={collapsed}
+          formContext={formContext}
+          formData={formData}
+          fields={fields}
+          onAdd={this.handleAdd}
+          onChange={this.handleCollapsed}
+          propsOnChange={propsOnChange}
+        />
+        <div className="form-group">
+          {AddElement && <AddElement />}
+          {!collapsed && <CollapseLegend {...this.props} />}
+          {!collapsed && <CollapseElement {...collapseElementProps} />}
+        </div>
+      </div>
+    );
+  }
+}
+
+CollapsibleField.propTypes = {
+  uiSchema: PropTypes.shape({
+    collapse: PropTypes.shape({
+      field: PropTypes.string.isRequired,
+      icon: PropTypes.shape({
+        enabled: PropTypes.string,
+        disabled: PropTypes.string,
+        add: PropTypes.string
+      }),
+      separate: PropTypes.boolean,
+      addTo: PropTypes.string,
+      addElement: PropTypes.oneOfType([PropTypes.string, PropTypes.string]),
+      legend: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.shape({
+          component: PropTypes.string.isRequired,
+          props: PropTypes.object
+        })
+      ]),
+      actions: PropTypes.arrayOf(
+        PropTypes.shape({
+          component: PropTypes.string.isRequired,
+          props: PropTypes.object
+        })
+      ),
+      wrapClassName: PropTypes.string
+    }).isRequired
+  }).isRequired,
+  registry: PropTypes.shape({
+    fields: PropTypes.object.isRequired
+  }).isRequired
+};
+
+export default CollapsibleField;

package/lib/DraftRte.js

@@ -74,15 +74,15 @@ function mapFromObject(data, mapping, defVal) {
     return agg;
   }, defVal);
 }
-/**
- *
- * @param {*} data
- * @param {*} mapping
- * Mapped object is converted to the object mapping takes
+/**
+ *
+ * @param {*} data
+ * @param {*} mapping
+ * Mapped object is converted to the object mapping takes
  */
 function mapFromSchema(data, mapping) {
-  /* if (isEmpty(data)) {
-    return;
+  /* if (isEmpty(data)) {
+    return;
   } */
   if (!mapping || mapping === null) {
     return data;
@@ -95,11 +95,11 @@ function mapFromSchema(data, mapping) {
   }
 }
 
-/**
- *
- * @param {*} data
- * @param {*} mapping
- * prepare the String to display
+/**
+ *
+ * @param {*} data
+ * @param {*} mapping
+ * prepare the String to display
  */
 function optionToString(fields, separator) {
   return function (option) {
@@ -119,11 +119,11 @@ function optionToString(fields, separator) {
     }, "");
   };
 }
-/**
- *
- * @param {*} data
- * @param {*} mapping
- * maping the label
+/**
+ *
+ * @param {*} data
+ * @param {*} mapping
+ * maping the label
  */
 function mapLabelKey(labelKey) {
   if (Array.isArray(labelKey)) {
@@ -140,10 +140,10 @@ function mapLabelKey(labelKey) {
 var DraftRTE = function (_Component) {
   _inherits(DraftRTE, _Component);
 
-  /**
-   *
-   * @param {*} props
-   * Currently only supports HTML
+  /**
+   *
+   * @param {*} props
+   * Currently only supports HTML
    */
   function DraftRTE(props) {
     _classCallCheck(this, DraftRTE);
@@ -183,24 +183,24 @@ var DraftRTE = function (_Component) {
     };
     return _this;
   }
-  /**
-   * updates formData by calling parent's onChange function with current html content
+  /**
+   * updates formData by calling parent's onChange function with current html content
    */
 
 
-  /**
-   * handles editor's onChange
-   * handles logic to update form data based on props supplied to the component
+  /**
+   * handles editor's onChange
+   * handles logic to update form data based on props supplied to the component
    */
   //will only be executed if debounce is present
 
-  /**
-   * handles the logic to update formData on blur
+  /**
+   * handles the logic to update formData on blur
    */
 
 
-  /**
-   * handles the logic to load the suggestions on the time of focus
+  /**
+   * handles the logic to load the suggestions on the time of focus
    */
 
 
@@ -208,8 +208,8 @@ var DraftRTE = function (_Component) {
     key: "render",
 
 
-    /**
-     * react render function
+    /**
+     * react render function
      */
     value: function render() {
       var _this2 = this;

package/lib/TypeaheadField.js

@@ -154,11 +154,11 @@ function mapFromObject(data, mapping, defVal) {
     return agg;
   }, defVal);
 }
-/**
- *
- * @param {*} data
- * @param {*} mapping
- * Mapped object is converted to the object mapping takes
+/**
+ *
+ * @param {*} data
+ * @param {*} mapping
+ * Mapped object is converted to the object mapping takes
  */
 function mapFromSchema(data, mapping) {
   if (isEmpty(data)) {
@@ -223,9 +223,9 @@ function isFunction(functionToCheck) {
   return functionToCheck instanceof Function;
 }
 
-/*
- this is done to prevent an edge case with a typeahead wrapped inside a table that has an item selected & uses a function as a labelKey
- TODO: Need to find a better solution for this
+/*
+ this is done to prevent an edge case with a typeahead wrapped inside a table that has an item selected & uses a function as a labelKey
+ TODO: Need to find a better solution for this
  */
 function transformLabelKey(labelKey, schema, selected) {
   if (isFunction(labelKey) && selected && selected.length > 0 && schema.type === "string" && selected.every(function (x) {

package/lib/css/form-extras.css

@@ -0,0 +1,10 @@
+/*Collapsible header items*/
+.header-elements-wrapper {
+    align-items: center;
+    color: #fff;
+    display: inline-flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    padding-left: 20px;
+    white-space: nowrap;
+  }

package/lib/table/index.js

@@ -92,32 +92,6 @@ function getFieldValue(cellValue, type, format, dataFormat) {
   }
   return cellValue;
 }
-function isEquivalentObject(a, b) {
-  // Create arrays of property names
-  var aProps = Object.getOwnPropertyNames(a);
-  var bProps = Object.getOwnPropertyNames(b);
-
-  // If number of properties is different,
-  // objects are not equivalent
-  if (aProps.length != bProps.length) {
-    return false;
-  }
-
-  for (var i = 0; i < aProps.length; i++) {
-    var propName = aProps[i];
-
-    // If values of same property are not equal,
-    // objects are not equivalent
-    if (a[propName] !== b[propName]) {
-      return false;
-    }
-  }
-
-  // If we made it this far, objects
-  // are considered equivalent
-
-  return true;
-}
 
 var TableField = function (_Component) {
   _inherits(TableField, _Component);
@@ -255,31 +229,35 @@ var TableField = function (_Component) {
   }, {
     key: "handleRowSelect",
     value: function handleRowSelect(row, isSelected, e) {
+      var onChange = this.props.onChange;
       var _tableConf3 = this.tableConf,
-          data = _tableConf3.data,
+          _tableConf3$data = _tableConf3.data,
+          data = _tableConf3$data === undefined ? [] : _tableConf3$data,
           _tableConf3$selectRow = _tableConf3.selectRow.onSelectRow.fieldToUpdate,
           fieldToUpdate = _tableConf3$selectRow === undefined ? "picked" : _tableConf3$selectRow;
 
-      var filteredRows = (data || []).map(function (item) {
-        if (!isSelected && item[fieldToUpdate] !== undefined) {
-          if (isEquivalentObject(item, row)) {
-            delete item[fieldToUpdate];
-          }
-        } else if (isEquivalentObject(item, row)) {
-          item[fieldToUpdate] = isSelected;
-        }
-        return item;
-      });
-      this.props.onChange(filteredRows);
+
+      row.isRowSelected = isSelected;
+
+      if (!isSelected) {
+        delete row[fieldToUpdate];
+      } else {
+        row[fieldToUpdate] = isSelected;
+      }
+
+      onChange(data);
     }
   }, {
     key: "handleAllRowSelect",
     value: function handleAllRowSelect(isSelected, rows, e) {
-      var _tableConf$selectRow$ = this.tableConf.selectRow.onSelectAllRow.fieldToUpdate,
-          fieldToUpdate = _tableConf$selectRow$ === undefined ? "picked" : _tableConf$selectRow$;
+      var _tableConf4 = this.tableConf,
+          data = _tableConf4.data,
+          _tableConf4$selectRow = _tableConf4.selectRow.onSelectAllRow.fieldToUpdate,
+          fieldToUpdate = _tableConf4$selectRow === undefined ? "picked" : _tableConf4$selectRow;
 
 
-      var filteredRows = (rows || []).map(function (item) {
+      var filteredRows = data.map(function (item) {
+        item.isRowSelected = isSelected;
         if (!isSelected && item[fieldToUpdate] !== undefined) {
           delete item[fieldToUpdate];
         } else {
@@ -487,12 +465,14 @@ var TableField = function (_Component) {
           _props2$idSchema = _props2.idSchema;
       _props2$idSchema = _props2$idSchema === undefined ? {} : _props2$idSchema;
       var $id = _props2$idSchema.$id,
-          onChange = _props2.onChange;
+          onChange = _props2.onChange,
+          selectedItems = _props2.selectedItems;
 
 
       var forceReRenderTable = this.forceReRenderTable;
 
-      this.tableConf = (0, _tableConfFactory2.default)(uiSchema, formData, this.handleCellSave, this.handleRowsDelete, this.handleDeletedRow, this.handleRowSelect, this.handleAllRowSelect, this.myRowExpand, this.isRowExpandable, this.expandColumnComponent);
+      this.tableConf = (0, _tableConfFactory2.default)(uiSchema, formData, this.handleCellSave, this.handleRowsDelete, this.handleDeletedRow, this.handleRowSelect, this.handleAllRowSelect, this.myRowExpand, this.isRowExpandable, this.expandColumnComponent, selectedItems);
+
       var expandableTableOptions = this.getExpandableTableOptions();
       this.tableConf.options.insertModal = this.createCustomModal;
       var boostrapTableOptions = _extends({
@@ -508,7 +488,10 @@ var TableField = function (_Component) {
         { id: $id },
         _react2.default.createElement(
           _reactBootstrapTable.BootstrapTable,
-          _extends({}, this.tableConf, { trClassName: this.handleRowColorChange, ref: "table" }),
+          _extends({}, this.tableConf, {
+            trClassName: this.handleRowColorChange,
+            ref: "table"
+          }),
           columns.map(function (column, i) {
             return _react2.default.createElement(
               _reactBootstrapTable.TableHeaderColumn,