@kineticdata/react 6.0.1 → 6.0.3

package/lib/components/form/Form.models.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FormState = exports.Field = exports.FIELD_DEFAULT_VALUES = exports.DataSource = exports.DATA_SOURCE_STATUS = void 0;
 var _immutable = require("immutable");
-var FormState = (0, _immutable.Record)({
+var FormState = exports.FormState = (0, _immutable.Record)({
   addFields: (0, _immutable.List)(),
   alterFields: (0, _immutable.Map)(),
   bindings: {},
@@ -23,14 +23,12 @@ var FormState = (0, _immutable.Record)({
   onSubmit: null,
   submitting: false
 });
-exports.FormState = FormState;
-var DATA_SOURCE_STATUS = {
+var DATA_SOURCE_STATUS = exports.DATA_SOURCE_STATUS = {
   PENDING: 'PENDING',
   RESOLVED: 'RESOLVED',
   REJECTED: 'REJECTED'
 };
-exports.DATA_SOURCE_STATUS = DATA_SOURCE_STATUS;
-var DataSource = (0, _immutable.Record)({
+var DataSource = exports.DataSource = (0, _immutable.Record)({
   data: null,
   fn: null,
   params: null,
@@ -38,8 +36,7 @@ var DataSource = (0, _immutable.Record)({
   status: DATA_SOURCE_STATUS.PENDING,
   transform: null
 });
-exports.DataSource = DataSource;
-var FIELD_DEFAULT_VALUES = (0, _immutable.Map)({
+var FIELD_DEFAULT_VALUES = exports.FIELD_DEFAULT_VALUES = (0, _immutable.Map)({
   attributes: (0, _immutable.Map)(),
   checkbox: false,
   'checkbox-multi': (0, _immutable.List)(),
@@ -56,8 +53,7 @@ var FIELD_DEFAULT_VALUES = (0, _immutable.Map)({
   user: null,
   'user-multi': (0, _immutable.List)()
 });
-exports.FIELD_DEFAULT_VALUES = FIELD_DEFAULT_VALUES;
-var Field = (0, _immutable.Record)({
+var Field = exports.Field = (0, _immutable.Record)({
   constraint: null,
   constraintMessage: 'Invalid',
   dirty: false,
@@ -89,5 +85,4 @@ var Field = (0, _immutable.Record)({
   valid: true,
   value: null,
   visible: true
-});
-exports.Field = Field;
+});

package/lib/components/form/FormState.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.FormState = void 0;
 var _store = require("../../store");
 var selectFormState = function selectFormState(formState) {
+  var _formState$fields;
   return {
-    dirty: formState.fields.some(function (field) {
+    dirty: (_formState$fields = formState.fields) === null || _formState$fields === void 0 ? void 0 : _formState$fields.some(function (field) {
       return field.dirty;
     }),
     error: formState.error
@@ -21,5 +22,4 @@ var mapStateToProps = function mapStateToProps(state, props) {
 var FormStateComopnent = function FormStateComopnent(props) {
   return props.formState && props.children(selectFormState(props.formState));
 };
-var FormState = (0, _store.connect)(mapStateToProps)(FormStateComopnent);
-exports.FormState = FormState;
+var FormState = exports.FormState = (0, _store.connect)(mapStateToProps)(FormStateComopnent);

package/lib/components/form/KitchenSinkForm.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.KitchenSinkForm = void 0;
 var _Form = require("./Form");
-var KitchenSinkForm = (0, _Form.generateForm)({
+var KitchenSinkForm = exports.KitchenSinkForm = (0, _Form.generateForm)({
   dataSources: function dataSources() {
     return {};
   },
@@ -392,6 +392,27 @@ var KitchenSinkForm = (0, _Form.generateForm)({
         }],
         helpText: 'Help Text',
         placeholder: 'Placeholder'
+      }, {
+        name: 'number1',
+        type: 'number',
+        label: 'Number 1'
+      }, {
+        name: 'number2',
+        type: 'number',
+        label: 'Number 2',
+        required: true
+      }, {
+        name: 'number3',
+        type: 'number',
+        label: 'Number 3',
+        enabled: false,
+        initialValue: 'asdfasdf'
+      }, {
+        name: 'number4',
+        type: 'number',
+        label: 'Number 4',
+        helpText: 'Help Text',
+        placeholder: 'Placeholder'
       }, {
         name: 'password1',
         type: 'password',
@@ -764,5 +785,4 @@ var KitchenSinkForm = (0, _Form.generateForm)({
       });
     };
   }
-});
-exports.KitchenSinkForm = KitchenSinkForm;
+});

package/lib/components/form/SimpleForm.helpers.js

@@ -0,0 +1,262 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isEmpty = exports.getFieldComponents = exports.getFieldComponentProps = exports.getComponentName = exports.evaluateFields = exports.createFormState = exports.createFieldState = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _immutable = require("immutable");
+var _SimpleForm = require("./SimpleForm");
+var _SimpleForm2 = require("./SimpleForm.models");
+var _Form = require("./Form.models");
+// If value is null for a text or select field, change it to the default value
+// to prevent HTML errors
+var correctRenderValue = function correctRenderValue(type) {
+  var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _Form.FIELD_DEFAULT_VALUES.get(type, '');
+  switch (type) {
+    case 'text':
+    case 'select':
+      return value !== null ? value : _Form.FIELD_DEFAULT_VALUES.get(type, '');
+    default:
+      return value;
+  }
+};
+
+// Converts an array of fields to an OrderedMap using the `name` as the key
+var convertFieldsToMap = function convertFieldsToMap(fields) {
+  return (0, _immutable.OrderedMap)(fields.filter(Boolean).map(function (field) {
+    return [field.name, field];
+  }));
+};
+var createFieldState = exports.createFieldState = function createFieldState(formKey) {
+  return function (_ref) {
+    var bindings = _ref.bindings,
+      constraint = _ref.constraint,
+      constraintMessage = _ref.constraintMessage,
+      enabled = _ref.enabled,
+      form = _ref.form,
+      helpText = _ref.helpText,
+      label = _ref.label,
+      language = _ref.language,
+      name = _ref.name,
+      onFocus = _ref.onFocus,
+      onChange = _ref.onChange,
+      onBlur = _ref.onBlur,
+      options = _ref.options,
+      pattern = _ref.pattern,
+      patternMessage = _ref.patternMessage,
+      placeholder = _ref.placeholder,
+      renderAttributes = _ref.renderAttributes,
+      required = _ref.required,
+      requiredMessage = _ref.requiredMessage,
+      search = _ref.search,
+      serialize = _ref.serialize,
+      _transient = _ref["transient"],
+      type = _ref.type,
+      visible = _ref.visible;
+    return (0, _SimpleForm2.SimpleFieldState)({
+      // Derived options
+      id: btoa("".concat(formKey, " ").concat(name)).replace(/=+$/, ''),
+      renderAttributes: (0, _immutable.fromJS)(renderAttributes),
+      // Options supporting conditional expressions,
+      enabled: typeof enabled === 'function' ? false : enabled,
+      label: typeof label === 'function' ? '' : label,
+      options: typeof options === 'function' ? (0, _immutable.List)() : (0, _immutable.fromJS)(options),
+      placeholder: typeof placeholder === 'function' ? '' : placeholder,
+      required: typeof required === 'function' ? false : required,
+      search: typeof search === 'function' ? (0, _immutable.Map)() : (0, _immutable.fromJS)(search),
+      "transient": typeof _transient === 'function' ? false : _transient,
+      visible: typeof visible === 'function' ? false : visible,
+      language: typeof language === 'function' ? null : language,
+      bindings: typeof bindings === 'function' ? null : bindings,
+      functions: (0, _immutable.Map)({
+        enabled: typeof enabled === 'function' ? enabled : null,
+        label: typeof label === 'function' ? label : null,
+        options: typeof options === 'function' ? options : null,
+        placeholder: typeof placeholder === 'function' ? placeholder : null,
+        required: typeof required === 'function' ? required : null,
+        search: typeof search === 'function' ? search : null,
+        "transient": typeof _transient === 'function' ? _transient : null,
+        visible: typeof visible === 'function' ? visible : null,
+        language: typeof language === 'function' ? language : null,
+        bindings: typeof bindings === 'function' ? bindings : null
+      }),
+      // Event handlers
+      eventHandlers: (0, _immutable.Map)({
+        onBlur: null,
+        onChange: null,
+        onFocus: null
+      }),
+      eventHandlerFunctions: (0, _immutable.Map)({
+        onBlur: (0, _SimpleForm.onBlur)({
+          formKey: formKey,
+          name: name
+        }),
+        onChange: (0, _SimpleForm.onChange)({
+          formKey: formKey,
+          type: type,
+          name: name
+        }),
+        onFocus: (0, _SimpleForm.onFocus)({
+          formKey: formKey,
+          name: name
+        })
+      }),
+      // Pass-through options
+      constraint: constraint,
+      constraintMessage: constraintMessage,
+      form: form,
+      helpText: helpText,
+      name: name,
+      onFocus: onFocus,
+      onChange: onChange,
+      onBlur: onBlur,
+      pattern: pattern,
+      patternMessage: patternMessage,
+      requiredMessage: requiredMessage,
+      serialize: serialize,
+      type: type
+    });
+  };
+};
+var createFormState = exports.createFormState = function createFormState(_ref2) {
+  var fields = _ref2.fields,
+    formKey = _ref2.formKey,
+    onLoad = _ref2.onLoad,
+    onReset = _ref2.onReset,
+    onSubmit = _ref2.onSubmit,
+    values = _ref2.values;
+  return (0, _SimpleForm2.SimpleFormState)({
+    fields: convertFieldsToMap(fields).map(createFieldState(formKey)),
+    formKey: formKey,
+    initialValues: values,
+    onLoad: onLoad,
+    onReset: onReset,
+    onSubmit: onSubmit
+  });
+};
+var isEmpty = exports.isEmpty = function isEmpty(value) {
+  return value === null || value === undefined || value === false || value === '' || (0, _immutable.isImmutable)(value) && value.isEmpty();
+};
+var checkRequired = function checkRequired(field) {
+  return field.required && isEmpty(field.value) ? (0, _immutable.List)([field.requiredMessage]) : (0, _immutable.List)();
+};
+var checkPattern = function checkPattern(bindings) {
+  return function (field) {
+    return field.pattern && field.type === 'text' && field.value !== '' && field.value !== null && !field.value.match(typeof field.pattern === 'function' ? field.pattern((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, bindings), {}, {
+      field: (0, _SimpleForm2.SimpleFieldBinding)(field)
+    })) : field.pattern) ? (0, _immutable.List)([field.patternMessage]) : (0, _immutable.List)();
+  };
+};
+var checkConstraint = function checkConstraint(bindings) {
+  return function (field) {
+    if (field.constraint) {
+      var result = field.constraint((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, bindings), {}, {
+        field: (0, _SimpleForm2.SimpleFieldBinding)(field)
+      }));
+      if (!result) {
+        return (0, _immutable.List)([field.constraintMessage]);
+      } else if (typeof result === 'string') {
+        return (0, _immutable.List)([result]);
+      }
+    }
+    // Return no errors if there was no constraint or if the constraint did not
+    // evaluate to false or an error string.
+    return (0, _immutable.List)();
+  };
+};
+
+// Validate the field
+var validateField = function validateField(bindings) {
+  var validateOnLoad = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  return function (field, name, fields) {
+    var errors = (0, _immutable.List)([checkRequired, checkPattern((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, bindings), {}, {
+      fields: fields.map(_SimpleForm2.SimpleFieldBinding)
+    })), checkConstraint((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, bindings), {}, {
+      fields: fields.map(_SimpleForm2.SimpleFieldBinding)
+    }))]).flatMap(function (fn) {
+      return fn(field);
+    });
+    return field.set('errors', errors).update('touched',
+    // Set touched to true if there are errors and the validateOnLoad flag is
+    // true to allow for showing errors on load of the form
+    function (touched) {
+      return errors.isEmpty() ? touched : touched || validateOnLoad;
+    });
+  };
+};
+
+// Resolve function props of the field
+var evaluateFieldProps = function evaluateFieldProps(bindings) {
+  return function (field, name, fields) {
+    return field.functions.filter(function (fn) {
+      return !!fn;
+    }).reduce(function (reduction, fn, prop) {
+      return reduction.set(prop, (0, _immutable.fromJS)(fn((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, bindings), {}, {
+        fields: fields.map(_SimpleForm2.SimpleFieldBinding)
+      }))));
+    }, field);
+  };
+};
+var evaluateFieldHandlers = function evaluateFieldHandlers(bindings) {
+  return function (field, name, fields) {
+    return field.eventHandlerFunctions.filter(function (fn) {
+      return !!fn;
+    }).reduce(function (reduction, fn, prop) {
+      return reduction.setIn(['eventHandlers', prop], (0, _immutable.fromJS)(fn((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, bindings), {}, {
+        fields: fields.map(_SimpleForm2.SimpleFieldBinding)
+      }))));
+    }, field);
+  };
+};
+
+// Set the value into the field state object and set the dirty flag
+var evaluateFieldValue = function evaluateFieldValue(bindings) {
+  return function (field) {
+    var value = (0, _immutable.getIn)(bindings, ['values', field.name]);
+    var initialValue = (0, _immutable.getIn)(bindings, ['initialValues', field.name]);
+    return field.set('value', (0, _immutable.fromJS)(value)).set('dirty', typeof initialValue !== 'undefined' ? value !== initialValue : field.touched);
+  };
+};
+var evaluateFields = exports.evaluateFields = function evaluateFields(fields, bindings, validateOnLoad) {
+  return fields ? fields.map(evaluateFieldValue(bindings)).map(evaluateFieldProps(bindings)).map(evaluateFieldHandlers(bindings)).map(validateField(bindings, validateOnLoad)) : fields;
+};
+var getComponentName = exports.getComponentName = function getComponentName(field) {
+  return field.type ? field.type.split('-').map(function (word) {
+    return "".concat(word.charAt(0).toUpperCase()).concat(word.substring(1));
+  }).join('') + 'Field' : null;
+};
+var getFieldComponents = exports.getFieldComponents = function getFieldComponents(fields) {
+  return convertFieldsToMap(fields).filter(function (fieldConfig) {
+    return fieldConfig.component;
+  }).map(function (fieldConfig) {
+    return fieldConfig.component;
+  });
+};
+var getFieldComponentProps = exports.getFieldComponentProps = function getFieldComponentProps(field, readOnly) {
+  return {
+    bindings: field.bindings,
+    dirty: field.dirty,
+    enabled: readOnly ? false : field.enabled,
+    errors: field.errors,
+    focused: field.focused,
+    form: field.form,
+    helpText: field.helpText,
+    id: field.id,
+    label: field.label,
+    language: field.type === 'code' ? field.language : undefined,
+    name: field.name,
+    onBlur: field.eventHandlers.get('onBlur'),
+    onChange: field.eventHandlers.get('onChange'),
+    onFocus: field.eventHandlers.get('onFocus'),
+    options: ['attributes', 'checkbox-multi', 'code', 'form', 'form-multi', 'list', 'map', 'radio', 'select', 'select-multi', 'table', 'text', 'text-multi'].includes(field.type) ? field.options : undefined,
+    placeholder: field.placeholder,
+    renderAttributes: field.renderAttributes,
+    required: field.required,
+    search: ['form', 'form-multi'].includes(field.type) ? field.search : undefined,
+    touched: field.touched,
+    value: correctRenderValue(field.type, field.value),
+    visible: field.visible
+  };
+};