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

Fiori styled UI components

import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
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 _templateObject3() {
  var data = _taggedTemplateLiteral(["\n      ", "\n    "]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["mutation dynamicMutation ($requestPayload : ", " ){\n      ", " (requestPayload : $requestPayload)", "\n    }\n    "]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n      query dynamicQuery ", " {\n        ", "\n        getUIMetadata @dynamicMeta(name: \"", "\")\n      }\n    "]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

import React from 'react';
import MetaForm from './MetaForm';
import gql from 'graphql-tag';
var graphqlService = process.env.REACT_APP_GRAPHQL_ADDRESS || '/graphql';
var notation = '@@';
var mutationResult = "{\n  status\n  message\n  identifier\n}";
/**
 * formMeta: come from backend
 * validation: array of rules, the structor is {name, rules:[]}
 */

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

  function DynamicForm(props) {
    var _this;

    _classCallCheck(this, DynamicForm);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(DynamicForm).call(this, props));

    _this.constructQuery = function (formMetaName) {
      var queryName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
      var queryParams = arguments.length > 2 ? arguments[2] : undefined;
      var outsideParam = '',
          realParams = '';
      _this.queryParam = {};

      if (queryParams) {
        queryParams.forEach(function (oParam, inx) {
          if (inx === 0) {
            outsideParam = realParams = '(';
          }

          _this.queryParam[oParam.name] = oParam.value;
          outsideParam = "".concat(outsideParam, " $").concat(oParam.name, " : ").concat(oParam.type);
          outsideParam = "".concat(outsideParam).concat(inx === queryParams.length - 1 ? ')' : ',');
          realParams = "".concat(realParams, " ").concat(oParam.name, " : $").concat(oParam.name);
          realParams = "".concat(realParams).concat(inx === queryParams.length - 1 ? ')' : ',');
        });
      }

      var queryDataStr = "".concat(queryName, " ").concat(realParams);
      return gql(_templateObject(), outsideParam, queryDataStr, formMetaName);
    };

    _this.constructMutation = function (mutationName, inputType) {
      return gql(_templateObject2(), inputType, mutationName, mutationResult);
    };

    _this.onSubmit = function (data) {
      _this._submit(_this.mutation, data);
    };

    _this.submitHandler = function (data) {
      _this.formData = data;
      var param = JSON.stringify(data, null, notation).replace(/@@"(\S+?)"(:)/g, '$1$2').replace(new RegExp(notation, 'g'), '');
      var mutationName = _this.props.mutationName;
      var str = "mutation dynamicMutation {\n      ".concat(mutationName, "(requestPayload: ").concat(param, ")").concat(mutationResult, "}\n    ");
      var mutationObject = gql(_templateObject3(), str);

      _this._submit(mutationObject, data);
    };

    _this._submit = function (mutation, data) {
      var submitted = _this.props.submitted;
      _this.formData = data;
      submitted(null, null, null, 'send');

      _this.client.mutate(mutation, {
        requestPayload: data
      }, graphqlService).then(function (_ref) {
        var response = _ref.data;
        // TODO
        submitted(null, response, _this.formData, 'finish');
      })["catch"](function (error) {
        console.error(error);

        if (submitted) {
          submitted(error, null, _this.formData, 'finish');
        }
      });
    };

    _this.componentDidMount = function () {
      _this.client.query(_this.query, _this.queryParam, graphqlService).then(function (_ref2) {
        var data = _ref2.data;
        var _data$getUIMetadata = data.getUIMetadata,
            getUIMetadata = _data$getUIMetadata === void 0 ? {} : _data$getUIMetadata;
        var _getUIMetadata$UIMeta = getUIMetadata.UIMetadata,
            UIMetadata = _getUIMetadata$UIMeta === void 0 ? [] : _getUIMetadata$UIMeta;

        _this.setState({
          UIMetadata: UIMetadata
        });
      });
    };

    _this.renderWithInputType = function (UIMetadata) {
      var _this$props = _this.props,
          submitText = _this$props.submitText,
          additionActionItem = _this$props.additionActionItem;
      return React.createElement(MetaForm, {
        formMeta: UIMetadata,
        submitText: submitText,
        onSubmit: _this.onSubmit,
        additionActionItem: additionActionItem
      });
    };

    _this.renderWithoutInputType = function (UIMetadata) {
      var _this$props2 = _this.props,
          submitText = _this$props2.submitText,
          additionActionItem = _this$props2.additionActionItem;
      return React.createElement(MetaForm, {
        formMeta: UIMetadata,
        submitText: submitText,
        onSubmit: _this.submitHandler,
        additionActionItem: additionActionItem
      });
    };

    var _formMetaName = props.formMetaName,
        _queryName = props.queryName,
        _queryParams = props.queryParams,
        _mutationName = props.mutationName,
        _inputType = props.inputType,
        client = props.client;
    _this.query = _this.constructQuery(_formMetaName, _queryName, _queryParams);
    _this.mutation = _this.constructMutation(_mutationName, _inputType);
    _this.formData = null;
    _this.client = client;
    _this.state = {
      UIMetadata: null
    };
    return _this;
  }

  _createClass(DynamicForm, [{
    key: "render",
    value: function render() {
      var inputType = this.props.inputType;
      var _this$state$UIMetadat = this.state.UIMetadata,
          UIMetadata = _this$state$UIMetadat === void 0 ? [] : _this$state$UIMetadat;
      return inputType ? this.renderWithInputType(UIMetadata) : this.renderWithoutInputType(UIMetadata);
    }
  }]);

  return DynamicForm;
}(React.Component);

DynamicForm.displayName = 'DynamicForm';
DynamicForm.defaultProps = {
  formMetaName: '',
  mutationName: '',
  submitText: '',
  additionActionItem: []
};
export default DynamicForm;