react-jsonschema-form-extras 0.9.65 → 0.9.69

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/actionHeaderFactory.js

@@ -12,6 +12,8 @@ var _react2 = _interopRequireDefault(_react);
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function actionFactory(action, actionConfiguration, schema) {
+  var dropDownAction = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+
   if (action === "update") {
     return function (cell, row, enumObject, rowIndex, formData, onChange) {
       var newFormData = formData.slice(0);
@@ -87,9 +89,27 @@ function actionFactory(action, actionConfiguration, schema) {
         var newFormData = formData.slice(0);
         newFormData.splice(rowIndex, 1);
         onChange(newFormData);
-        if (window && window.handleCptUpdatePopUp && schema && schema.code) {
-          window.handleCptUpdatePopUp(rowIndex, "delete");
-        } // to delete the code from diagnosis
+
+        //Windows Object Global Call
+        var selectedAction = null;
+        if (dropDownAction !== null) {
+          selectedAction = dropDownAction.find(function (availableAction) {
+            return availableAction.action === dropDownActionName;
+          });
+        }
+        if (selectedAction) {
+          var _selectedAction = selectedAction,
+              _selectedAction$windo = _selectedAction.windowDeleteAction,
+              windowDeleteAction = _selectedAction$windo === undefined ? null : _selectedAction$windo;
+
+          if (windowDeleteAction && window[windowDeleteAction]) {
+            window[windowDeleteAction](rowIndex, "delete");
+          }
+        } else {
+          if (window && window.handleCptUpdatePopUp && schema && schema.code) {
+            window.handleCptUpdatePopUp(rowIndex, "delete");
+          } // to delete the code from diagnosis
+        }
       } else {
         // Edit
         if (window && window.handleCptUpdatePopUp) {
@@ -116,11 +136,10 @@ function actionColumnFrom(_ref, schema, forceReRenderTable) {
       _actionConfiguration$4 = actionConfiguration.actionCompletedIcon,
       actionCompletedIcon = _actionConfiguration$4 === undefined ? "" : _actionConfiguration$4;
 
-  var handleClick = actionFactory(action, actionConfiguration, schema);
+  var handleClick = actionFactory(action, actionConfiguration, schema, dropDownAction);
   if (!handleClick) {
     return {};
   }
-
   var hideDropDownAction = true;
   var selectedRow = false;
   var prevSelectedRow = "";
@@ -146,7 +165,8 @@ function actionColumnFrom(_ref, schema, forceReRenderTable) {
     selectedRow = rowIndex;
     prevSelectedRow = prevSelectedRow === "" ? rowIndex : prevSelectedRow;
     document.addEventListener("click", handleOutsideClick, false);
-    var handleDropDownAction = actionFactory(action, actionConfiguration, schema);
+
+    var handleDropDownAction = actionFactory(action, actionConfiguration, schema, dropDownAction);
     hideDropDownAction = dropDownActionComponent(rowIndex, formData, handleDropDownAction, dropDownAction, onChange);
   };