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

Fiori styled UI components

import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
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 _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
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 classnames from 'classnames';
import { FormMessage } from './FormMessage';
import FormLabel from './FormLabel';
import { FormConsumer, ITEM_LAYOUT } from './Form';
import { getRandom } from '../utils';
import { elementState, trigger } from './constants';
var MemoLabel = React.memo(function (_ref) {
  var label = _ref.label,
      required = _ref.required,
      id = _ref.id;
  return React.createElement(FormLabel, {
    required: required,
    htmlFor: id
  }, label);
});

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

  /**
   *  label : can be either string or react element
   *  fieldMeta: an configuration object with following properties:
   *            name: field name
   *            fieldType : number,
   *            semantics : string,currency, password...
   *            mandatory :bool
   *            rules: an array of validators, validator is object with fields function (or string) and message
   *            show : show or hide current field
   */
  function FormItem(_props) {
    var _this;

    _classCallCheck(this, FormItem);

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

    _this.update = function (_ref2) {
      var state = _ref2.state,
          message = _ref2.message,
          show = _ref2.show;

      _this.setState({
        state: state,
        message: message
      });
    };

    _this.mapMessageType = function (state) {
      switch (state) {
        case elementState.invalid:
          return 'error';

        case elementState.normal:
        case elementState.valid:
          return 'help';

        default:
          return state;
      }
    };

    _this.renderElements = function (props) {
      var _this$props = _this.props,
          label = _this$props.label,
          children = _this$props.children;

      var mandatory = props.mandatory,
          id = props.id,
          show = props.show,
          state = props.state,
          message = props.message,
          restProps = _objectWithoutProperties(props, ["mandatory", "id", "show", "state", "message"]);

      var checkProps = {};

      if (_this.isCheck) {
        checkProps.required = mandatory;
      }

      return React.createElement(React.Fragment, null, !_this.isCheck && label && React.createElement(MemoLabel, {
        label: label,
        required: mandatory,
        id: id
      }), React.createElement("div", {
        className: "ffr-form-element"
      }, React.cloneElement(children, _objectSpread({
        id: id,
        state: state,
        label: label
      }, checkProps, {}, restProps)), message ? React.createElement(FormMessage, {
        type: _this.mapMessageType(state)
      }, message) : null));
    };

    _this.renderFormItem = function (_ref3) {
      var connect = _ref3.connect,
          itemLayout = _ref3.itemLayout;

      var _this$props2 = _this.props,
          label = _this$props2.label,
          children = _this$props2.children,
          _this$props2$isInline = _this$props2.isInline,
          isInline = _this$props2$isInline === void 0 ? false : _this$props2$isInline,
          className = _this$props2.className,
          rest = _objectWithoutProperties(_this$props2, ["label", "children", "isInline", "className"]);

      var props = connect(_assertThisInitialized(_this), _objectSpread({}, rest, {}, _this.localFieldMeta));
      var show = props.show;
      var klass = classnames(className, 'fd-form-item', {
        'ffr-form-item__h': itemLayout === ITEM_LAYOUT.horizontal
      }, {
        'ffr-form-item__v': itemLayout === ITEM_LAYOUT.vertical
      }, {
        'ffr-form-item__r': !itemLayout
      }, {
        'ffr-form-checkbox': _this.isCheck
      }, {
        'fd-form-item--inline': isInline
      });

      var id = props.id,
          divProps = _objectWithoutProperties(props, ["id"]);

      return show === false ? null : React.createElement("div", _extends({}, divProps, {
        className: klass
      }), _this.renderElements(props));
    };

    var _this$props3 = _this.props,
        _children = _this$props3.children,
        name = _this$props3.name;

    if (!React.isValidElement(_children)) {
      throw new Error("children for Form item must be single React element");
    }

    _this.state = {
      state: 'normal',
      // normal, valid, invalid, warning
      message: null // type : error, warning, help

    };
    _this.localFieldMeta = {};

    if (!_this.localFieldMeta.id) {
      if (_children.props.id) {
        _this.localFieldMeta.id = _children.props.id;
      } else {
        _this.localFieldMeta.id = _this._generateId(name);
      }
    }

    Object.keys(_children.props).forEach(function (k) {
      if (k === trigger.change || k === trigger.blur) {
        if (_this.localFieldMeta.originAction) {
          _this.localFieldMeta.originAction[k] = _children.props[k];
        } else {
          _this.localFieldMeta.originAction = _defineProperty({}, k, _children.props[k]);
        }
      }
    });
    _this.localFieldMeta.disabled = Boolean(_children.props.disabled);
    _this.isCheck = _this.localFieldMeta.isCheck = _children.type && _children.type.displayName === 'Checkbox';
    return _this;
  }

  _createClass(FormItem, [{
    key: "_generateId",
    value: function _generateId(name) {
      return "".concat(name, "_").concat(getRandom());
    }
  }, {
    key: "render",
    value: function render() {
      return React.createElement(FormConsumer, null, this.renderFormItem);
    }
  }]);

  return FormItem;
}(React.Component);

export { FormItem as default };