ffr-components/es/dynamic-form/MetaForm.js

Fiori styled UI components

import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

import React from 'react';
import Form from './Form';
import DatePicker from '../date-picker';
import { FormTextarea, FormItem as OriginItem } from 'fundamental-react/Forms';
import { FormInput } from './FormInput';
import Checkbox from './Checkbox';
import Combobox from '../combobox';
import Button from '../button';
import FormItem from './FormItem';
var ComponentMap = {
  INPUT: FormInput,
  CHECKBOX: Checkbox,
  DATEPICKER: DatePicker,
  COMBOBOX: Combobox,
  TEXTAREA: FormTextarea
};
/**
 * formMeta: come from backend
 * validation: array of rules, the structor is {name, rules:[]}
 */

var MetaForm =
/*#__PURE__*/
function (_React$Component) {
  _inherits(MetaForm, _React$Component);

  function MetaForm(_props) {
    var _this;

    _classCallCheck(this, MetaForm);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(MetaForm).call(this, _props));

    _this.mapTagName = function (renderType) {
      return ComponentMap[renderType] || FormInput;
    };

    _this.mapHTMLType = function (renderType) {
      switch (renderType) {
        case 'INPUT':
          return 'text';

        case 'CHECKBOX':
          return 'checkbox';

        default:
          return '';
      }
    };

    _this.handleSubmit = function (data) {
      var onSubmit = _this.props.onSubmit;

      if (onSubmit) {
        onSubmit(data);
      }
    };

    _this.constructControlProps = function (meta) {
      var name = meta.name,
          placeholder = meta.placeholder,
          renderType = meta.renderType,
          valueList = meta.valueList,
          valueListSource = meta.valueListSource;

      var HTMLType = _this.mapHTMLType(renderType);

      var props = {
        name: name,
        type: HTMLType,
        placeholder: placeholder,
        valueList: valueList,
        valueListSource: valueListSource
      };
      return Object.keys(props).filter(function (k) {
        return props[k] !== undefined;
      }).reduce(function (obj, k) {
        var _obj = _objectSpread({}, obj, _defineProperty({}, k, props[k]));

        return _obj;
      }, {});
    };

    _this.mapToFieldMeta = function (meta) {
      var label = meta.label,
          placeholder = meta.placeholder,
          renderType = meta.renderType,
          rules = meta.rules,
          fieldMeta = _objectWithoutProperties(meta, ["label", "placeholder", "renderType", "rules"]);

      if (rules) {
        fieldMeta.mandatory = rules.findIndex(function (rule) {
          return rule.mandatory !== undefined;
        }) >= 0;
      }

      fieldMeta.rules = rules;
      return fieldMeta;
    };

    _this.renderElement = function (renderType, controlProps) {
      var valueList = controlProps.valueList,
          valueListSource = controlProps.valueListSource,
          props = _objectWithoutProperties(controlProps, ["valueList", "valueListSource"]);

      var TagName = _this.mapTagName(renderType);

      if (renderType === 'COMBOBOX') {
        // TODO handle valueListService
        return React.createElement(TagName, _extends({}, props, {
          itemList: valueList
        }));
      } else {
        return React.createElement(TagName, props);
      }
    };

    var formMeta = _props.formMeta,
        validation = _props.validation;

    if (Array.isArray(validation)) {
      validation.forEach(function (_validation) {
        var targetMeta = formMeta.find(function (meta) {
          return meta.name === _validation.name;
        });

        if (!targetMeta) {
          console.error("failed to find meta for name ".concat(_validation.name));
          return;
        }

        if (targetMeta.rules) {
          targetMeta.rules = [].concat(_toConsumableArray(targetMeta.rules), _toConsumableArray(_validation.rules));
        } else {
          targetMeta.rules = _validation.rules;
        }
      });
    }

    return _this;
  }

  _createClass(MetaForm, [{
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props = this.props,
          initialData = _this$props.initialData,
          formMeta = _this$props.formMeta,
          submitText = _this$props.submitText,
          additionActionItem = _this$props.additionActionItem;
      return React.createElement(Form, {
        onSubmit: this.handleSubmit
      }, formMeta && formMeta.map(function (meta) {
        var name = meta.name,
            label = meta.label,
            renderType = meta.renderType;

        var controlProps = _this2.constructControlProps(meta);

        var fieldMeta = _this2.mapToFieldMeta(meta);

        return React.createElement(FormItem, {
          name: name,
          label: label,
          initialValue: initialData && initialData[name],
          fieldMeta: fieldMeta,
          key: name
        }, _this2.renderElement(renderType, controlProps));
      }), React.createElement(OriginItem, null, React.createElement(Button, {
        option: "emphasized"
      }, submitText), additionActionItem));
    }
  }]);

  return MetaForm;
}(React.Component);

MetaForm.defaultProps = {
  formMeta: {},
  onSubmit: function onSubmit() {},
  submitText: '',
  additionActionItem: [],
  isBusy: false
};
export default MetaForm;