react-jsonschema-form-extras 0.9.72 → 0.9.74

package/lib/DateTimePicker.js

@@ -50,8 +50,8 @@ var DateTimePicker = function (_Component) {
       var onChange = this.props.onChange;
 
       if (value !== "") {
-        this.setState({ dateTimeValue: value }); //2019-02-07T14:02
-        onChange((0, _moment2.default)(value).format("YYYY-MM-DDTHH:mm"));
+        this.setState({ dateTimeValue: value });
+        onChange((0, _moment2.default)(value).format("MM/DD/YYYY, h:mm A"));
       }
     }
   }, {

package/lib/table/index.js

@@ -283,9 +283,14 @@ var TableField = function (_Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
       if (this.adding) {
-        var _props$uiSchema$table = this.props.uiSchema.table,
+        var _props = this.props,
+            _props$uiSchema$table = _props.uiSchema.table,
             focusOnAdd = _props$uiSchema$table.focusOnAdd,
-            focusRowIndex = _props$uiSchema$table.focusRowIndex;
+            focusRowIndex = _props$uiSchema$table.focusRowIndex,
+            _props$uiSchema$table2 = _props$uiSchema$table.tableCols,
+            tableCols = _props$uiSchema$table2 === undefined ? [] : _props$uiSchema$table2,
+            _props$formData = _props.formData,
+            formData = _props$formData === undefined ? [] : _props$formData;
 
 
         var body = this.refs.table.refs.body ? this.refs.table.refs.body : this.refs.table.body;
@@ -293,7 +298,19 @@ var TableField = function (_Component) {
           console.error("Can't find body in the table");
           return;
         }
-        body.handleEditCell(focusRowIndex ? focusRowIndex : this.props.formData.length, focusOnAdd);
+        var allowToFocusField = true;
+        if (focusOnAdd) {
+          var _ref2 = tableCols[focusOnAdd] || {},
+              _ref2$dataField = _ref2.dataField,
+              dataField = _ref2$dataField === undefined ? "" : _ref2$dataField;
+
+          var addedRowIndex = focusRowIndex ? focusRowIndex : this.props.formData.length;
+          var addedRow = formData[addedRowIndex - 1];
+          if (dataField !== "" && addedRow[dataField]) {
+            allowToFocusField = false;
+          }
+        }
+        body.handleEditCell(focusRowIndex ? focusRowIndex : this.props.formData.length, allowToFocusField ? focusOnAdd : undefined);
       }
     }
   }, {
@@ -304,11 +321,11 @@ var TableField = function (_Component) {
   }, {
     key: "myRowExpand",
     value: function myRowExpand(currentTableData) {
-      var _props = this.props,
-          _props$schema$items$p = _props.schema.items.properties,
-          properties = _props$schema$items$p === undefined ? [] : _props$schema$items$p,
-          _props$uiSchema$table2 = _props.uiSchema.table.tableCols,
-          tableCols = _props$uiSchema$table2 === undefined ? [] : _props$uiSchema$table2;
+      var _props2 = this.props,
+          _props2$schema$items$ = _props2.schema.items.properties,
+          properties = _props2$schema$items$ === undefined ? [] : _props2$schema$items$,
+          _props2$uiSchema$tabl = _props2.uiSchema.table.tableCols,
+          tableCols = _props2$uiSchema$tabl === undefined ? [] : _props2$uiSchema$tabl;
 
 
       var tableList = tableCols.map(function (item) {
@@ -394,10 +411,12 @@ var TableField = function (_Component) {
             var _tableListData = _tableList.map(function (fieldName, i) {
               if (fieldData[fieldName] !== undefined && Object.keys(fieldData[fieldName]).length > 0) {
                 isComponentDataAvailable = true;
+                var listElementLeftHand = fieldData[fieldName].code || fieldData[fieldName].question;
+                var listElementRightHand = fieldData[fieldName].description || fieldData[fieldName].answer;
                 return _react2.default.createElement(
                   "li",
                   { className: "customTable-item" },
-                  fieldData[fieldName].code + " - " + fieldData[fieldName].description
+                  listElementLeftHand + " - " + listElementRightHand
                 );
               }
               return;
@@ -428,9 +447,9 @@ var TableField = function (_Component) {
     }
   }, {
     key: "expandColumnComponent",
-    value: function expandColumnComponent(_ref2) {
-      var isExpandableRow = _ref2.isExpandableRow,
-          isExpanded = _ref2.isExpanded;
+    value: function expandColumnComponent(_ref3) {
+      var isExpandableRow = _ref3.isExpandableRow,
+          isExpanded = _ref3.isExpanded;
 
       var icon = _react2.default.createElement("span", { className: "fa fa-plus glyphicon" });
 
@@ -445,10 +464,10 @@ var TableField = function (_Component) {
     key: "getExpandableTableOptions",
     value: function getExpandableTableOptions() {
       if (this.props.uiSchema.table && (this.props.uiSchema.table.isTableExpandable || this.props.uiSchema.table.isTableExpandable !== undefined)) {
-        var _ref3 = this.props.uiSchema.table.expandableTableOptions || {},
-            _ref3$expandBy = _ref3.expandBy,
-            expandBy = _ref3$expandBy === undefined ? "column" : _ref3$expandBy,
-            otherTableOptions = _objectWithoutProperties(_ref3, ["expandBy"]); // expandableTableOptions is option from the uischema
+        var _ref4 = this.props.uiSchema.table.expandableTableOptions || {},
+            _ref4$expandBy = _ref4.expandBy,
+            expandBy = _ref4$expandBy === undefined ? "column" : _ref4$expandBy,
+            otherTableOptions = _objectWithoutProperties(_ref4, ["expandBy"]); // expandableTableOptions is option from the uischema
 
 
         return _extends({ expandBy: expandBy }, otherTableOptions);
@@ -457,16 +476,16 @@ var TableField = function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _props2 = this.props,
-          uiSchema = _props2.uiSchema,
-          schema = _props2.schema,
-          formData = _props2.formData,
-          fields = _props2.registry.fields,
-          _props2$idSchema = _props2.idSchema;
-      _props2$idSchema = _props2$idSchema === undefined ? {} : _props2$idSchema;
-      var $id = _props2$idSchema.$id,
-          onChange = _props2.onChange,
-          selectedItems = _props2.selectedItems;
+      var _props3 = this.props,
+          uiSchema = _props3.uiSchema,
+          schema = _props3.schema,
+          formData = _props3.formData,
+          fields = _props3.registry.fields,
+          _props3$idSchema = _props3.idSchema;
+      _props3$idSchema = _props3$idSchema === undefined ? {} : _props3$idSchema;
+      var $id = _props3$idSchema.$id,
+          onChange = _props3.onChange,
+          selectedItems = _props3.selectedItems;
 
 
       var forceReRenderTable = this.forceReRenderTable;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Extra widgets for Mozilla's react-jsonschema-form",
   "private": false,
   "author": "mavarazy@gmail.com",
-  "version": "0.9.72",
+  "version": "0.9.74",
   "scripts": {
     "build:lib": "rimraf lib && cross-env NODE_ENV=production babel -d lib/ src/ --copy-files",
     "build:dist": "rimraf dist && cross-env NODE_ENV=production webpack --config webpack.config.dist.js --optimize-minimize",

package/lib/CollapsibleField.js.orig

@@ -1,402 +0,0 @@
-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;