polestar-ui-kit/lib/SearchForm/components/ComponentField.js

## Install

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

require("core-js/modules/es.array.for-each");

require("core-js/modules/es.array.is-array");

require("core-js/modules/es.date.to-string");

require("core-js/modules/es.function.name");

require("core-js/modules/es.object.get-prototype-of");

require("core-js/modules/es.object.set-prototype-of");

require("core-js/modules/es.object.to-string");

require("core-js/modules/es.reflect.construct");

require("core-js/modules/es.regexp.to-string");

require("core-js/modules/web.dom-collections.for-each");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _classnames = _interopRequireDefault(require("classnames"));

var _polestarIcons = _interopRequireDefault(require("polestar-icons"));

var _antd = require("antd");

var _Field = require("../../Field");

var _i18n = require("../../i18n");

var _checkMaxBytes = _interopRequireDefault(require("../../SchemaForm/helpers/checkMaxBytes"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

var COMPONENT_FIELD_TYPES = {
  input: _Field.Input,
  inputNumber: _Field.InputNumber,
  inputNumberRange: _Field.InputNumberRange,
  checkbox: _Field.Checkbox,
  select: _Field.Select,
  datepicker: _Field.DatePicker,
  daterangepicker: _Field.DateRangePicker,
  basedatepicker: _Field.BaseDatePicker,
  datetimerangepicker: _Field.DateTimeRangePicker
};

var ComponentField = function (_React$Component) {
  _inherits(ComponentField, _React$Component);

  var _super = _createSuper(ComponentField);

  function ComponentField(props) {
    var _this;

    _classCallCheck(this, ComponentField);

    _this = _super.call(this, props);

    _this.onMouseOver = function () {
      _this.setState({
        closeHidden: false
      });
    };

    _this.onMouseOut = function () {
      _this.isMouseOut = true;

      _this.setState({
        closeHidden: true
      }, function () {
        _this.isMouseOut = false;
      });
    };

    _this.onHidden = function () {
      if (typeof _this.props.onHidden === 'function') {
        _this.props.onHidden(_this.props.showItem);
      }
    };

    _this.onEnter = function (e) {
      if (e.keyCode === 13 && typeof _this.props.onEnter === 'function') {
        _this.props.onEnter(e);
      }
    };

    _this._getValue = function () {
      var _this$props = _this.props,
          value = _this$props.value,
          showItem = _this$props.showItem;

      if (showItem && typeof showItem.value !== 'undefined') {
        return showItem.value;
      }

      return value;
    };

    _this.state = {
      closeHidden: true
    };
    _this.isMouseOut = false;
    return _this;
  }

  _createClass(ComponentField, [{
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          label = _this$props2.label,
          name = _this$props2.name,
          value = _this$props2.value,
          icon = _this$props2.icon,
          form = _this$props2.form,
          hidden = _this$props2.hidden,
          required = _this$props2.required,
          maxBytes = _this$props2.maxBytes,
          validator = _this$props2.validator,
          component = _this$props2.component,
          showItem = _this$props2.showItem,
          addedItem = _this$props2.addedItem,
          showClose = _this$props2.showClose,
          onHidden = _this$props2.onHidden,
          onEnter = _this$props2.onEnter,
          rest = _objectWithoutProperties(_this$props2, ["label", "name", "value", "icon", "form", "hidden", "required", "maxBytes", "validator", "component", "showItem", "addedItem", "showClose", "onHidden", "onEnter"]);

      var rules = [];

      if (required) {
        rules.push({
          required: true,
          message: required.message || (0, _i18n.translate)('uikit:message.required')
        });
      }

      var componentType = component ? component.type : 'input';

      if (componentType === 'input') {
        if (typeof maxBytes !== 'undefined') {
          rules.push({
            validator: _checkMaxBytes["default"],
            maxBytes: maxBytes
          });
        }

        rules.push({
          validator: typeof validator === 'undefined' && typeof maxBytes === 'undefined' ? _Field.Input.validator : validator
        });
      }

      if (validator !== undefined) {
        if (Array.isArray(validator)) {
          validator.forEach(function (_validator) {
            rules.push({
              validator: _validator
            });
          });
        } else {
          rules.push({
            validator: validator
          });
        }
      } else {
        if (componentType === 'datetimerangepicker') {
          rules.push({
            validator: _Field.DateTimeRangePicker.validator
          });
        }

        if (componentType === 'inputNumberRange') {
          rules.push({
            validator: _Field.InputNumberRange.validator
          });
        }
      }

      var defaultDecorator = {
        initialValue: this._getValue(),
        rules: rules
      };
      var checkDecorator;

      if (componentType === 'checkbox') {
        checkDecorator = {
          valuePropName: 'checked'
        };
      }

      var fieldDecorator = _extends({}, defaultDecorator, checkDecorator);

      var formProps;

      if (componentType === 'basedatepicker' || componentType === 'datetimerangepicker' || componentType === 'inputNumberRange' || typeof componentType === 'function' || _react["default"].isValidElement(componentType) === true) {
        formProps = {
          form: form
        };
      }

      var componentOptions = component ? component.options : null;
      var ComponentFieldObj = typeof componentType === 'string' ? COMPONENT_FIELD_TYPES[componentType] : componentType;
      var fieldTitle = icon ? _react["default"].createElement("span", null, _react["default"].createElement(_polestarIcons["default"], {
        name: icon
      }), label) : label;
      return _react["default"].createElement(_antd.Form.Item, {
        label: fieldTitle,
        className: (0, _classnames["default"])('ps-search-form-item', {
          'added-form-item': showItem && addedItem && showItem.fieldName === addedItem.fieldName && !this.isMouseOut
        }),
        style: {
          display: hidden ? 'none' : 'block'
        }
      }, _react["default"].createElement("div", {
        className: "ps-search-form-item-domain",
        onMouseOver: this.onMouseOver,
        onMouseOut: this.onMouseOut,
        onFocus: function onFocus() {
          return undefined;
        },
        onBlur: function onBlur() {
          return undefined;
        }
      }, form.getFieldDecorator(name, _extends({}, fieldDecorator))(_react["default"].isValidElement(ComponentFieldObj) ? _react["default"].cloneElement(ComponentFieldObj, _extends({}, rest, formProps, {
        onKeyDown: this.onEnter
      })) : _react["default"].createElement(ComponentFieldObj, _extends({}, componentOptions, rest, formProps, {
        onKeyDown: this.onEnter
      }))), showClose ? _react["default"].createElement(_polestarIcons["default"], {
        name: "close",
        hidden: this.state.closeHidden,
        onClick: this.onHidden
      }) : null));
    }
  }]);

  return ComponentField;
}(_react["default"].Component);

ComponentField.propTypes = {
  name: _propTypes["default"].string,
  label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element]),
  icon: _propTypes["default"].string,
  form: _propTypes["default"].object,
  showItem: _propTypes["default"].object,
  hidden: _propTypes["default"].bool,
  showClose: _propTypes["default"].bool
};
ComponentField.defaultProps = {
  label: 'label',
  hidden: false,
  showClose: true
};
var _default = ComponentField;
exports["default"] = _default;