informed/dist/esm/components/FormFields.js

A lightweight framework and utility for building powerful forms in React applications

import { slicedToArray as _slicedToArray } from '../_virtual/_rollupPluginBabelHelpers.js';
import React, { useMemo } from 'react';
import { useFormController } from '../hooks/useFormController.js';
import { computeFieldsFromSchema, uuidv4, checkCondition } from '../utils.js';
import { FormField } from './FormField.js';
import { Relevant } from './Relevant.js';
import { UpdateFields } from './UpdateFields.js';

// const logger = Debug('informed:FormFields' + '\t');

var FormFields = function FormFields(_ref) {
  var schema = _ref.schema,
    onlyValidateSchema = _ref.onlyValidateSchema;
  var _useFormController = useFormController(),
    getOptions = _useFormController.getOptions;
  var _getOptions = getOptions(),
    componentsMap = _getOptions.components;
  var fields = useMemo(function () {
    var _computeFieldsFromSch = computeFieldsFromSchema(schema, onlyValidateSchema),
      properties = _computeFieldsFromSch.properties,
      conditions = _computeFieldsFromSch.conditions,
      components = _computeFieldsFromSch.components;
    var mappedProperties = properties.map(function (name) {
      // Not for
      // ui:component:id ---> foobar
      // Only for
      // ui:foobar ---> foobar
      if (name.includes('ui:') && name.split(':').length !== 3) {
        return {
          $id: name.split('ui:')[1]
        };
      }

      // Need to get required off schema
      var required = schema.required && schema.required.includes(name) ? true : undefined;
      var uuid = uuidv4();
      var Component = /*#__PURE__*/React.createElement(FormField, {
        name: name,
        schema: schema,
        key: "schema-field-".concat(name, "-").concat(uuid),
        required: required
      });
      return {
        Component: Component
      };
    });
    var mappedComponents = components.map(function (component) {
      // console.log('WTF', component);
      if (component['ui:control']) {
        var RenderedComponent = componentsMap[component['ui:control']];
        var Component = /*#__PURE__*/React.createElement(RenderedComponent, null, /*#__PURE__*/React.createElement(FormFields, {
          schema: component
        }));
        return {
          Component: Component,
          $id: component.$id
        };
      }
    });

    // For conditionals
    var mappedConditionals = conditions.map(function (conditional, j) {
      // Example then ( its a subschema )
      // then: {
      //   properties: {
      //     spouse: {
      //       type: 'string',
      //       title: 'Spouse name',
      //       'ui:control': 'input'
      //     }
      //   }
      // }
      var subSchema = conditional.then;
      // console.log('SUBSCHEMA', subSchema);
      var $id = conditional.$id;
      var thenProps = conditional.thenProps;

      // Turn the if into a when function for informed
      // Example if condition
      // if: {
      //   properties: {
      //     married: { const: 'yes' }
      //   },
      //   required: ['married']
      // },
      var conditions = conditional["if"].properties;
      var when = function when(_ref2) {
        var formApi = _ref2.formApi,
          scope = _ref2.scope;
        // Example key "married, Example condition: "{ const: 'yes' }"
        return Object.entries(conditions).every(function (_ref3) {
          var _ref4 = _slicedToArray(_ref3, 2),
            propertyName = _ref4[0],
            condition = _ref4[1];
          return checkCondition(condition, formApi.getValue(scope ? "".concat(scope, ".").concat(propertyName) : propertyName));
        });
      };
      var Component = /*#__PURE__*/React.createElement(Relevant, {
        key: "Conditional-ScheamField-".concat(j),
        when: when
      }, subSchema ? /*#__PURE__*/React.createElement(FormFields, {
        schema: subSchema
      }) : null, thenProps ? /*#__PURE__*/React.createElement(UpdateFields, {
        schema: thenProps
      }) : null);
      return {
        Component: Component,
        $id: $id
      };
    });
    var mappedFields = [];

    // Iterate through the mapped properties
    mappedProperties.forEach(function (_ref5) {
      var $id = _ref5.$id,
        Component = _ref5.Component;
      if (Component) {
        mappedFields.push(Component);
      } else if ($id) {
        // Grab the id from the mapped conditionals
        var conditional = mappedConditionals.find(function (c) {
          return c.$id === $id;
        });
        var component = mappedComponents.find(function (c) {
          return c.$id === $id;
        });
        if (conditional) {
          mappedFields.push(conditional.Component);
          // Make sure to take it off so we dont render it twice ( defaults at the end )
          var index = mappedConditionals.findIndex(function (c) {
            return c.$id === $id;
          });
          mappedConditionals.splice(index, 1);
        } else if (component) {
          mappedFields.push(component.Component);
        } else {
          console.error('MappedConditionals', mappedConditionals);
          throw new Error("Unable to find mapping for ".concat($id));
        }
      } else {
        throw new Error('Found property with no ID or component...');
      }
    });

    // Add whatever is left at the end
    mappedConditionals.forEach(function (_ref6) {
      var Component = _ref6.Component;
      mappedFields.push(Component);
    });
    return mappedFields;
  }, [schema]);
  return fields;
};

export { FormFields };