polestar-ui-kit/lib/SearchForm/SearchForm.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.concat");

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

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

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

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

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

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

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

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 _antd = require("antd");

var _Button = _interopRequireDefault(require("../Button"));

var _SchemaField = _interopRequireDefault(require("./components/SchemaField"));

var _SubmitField = _interopRequireDefault(require("./components/SubmitField"));

var _fieldHelper = _interopRequireDefault(require("./helpers/fieldHelper"));

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

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

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 SearchForm = function (_React$Component) {
  _inherits(SearchForm, _React$Component);

  var _super = _createSuper(SearchForm);

  function SearchForm(props) {
    var _this;

    _classCallCheck(this, SearchForm);

    _this = _super.call(this, props);

    _this.onSearch = function (e) {
      if (typeof _this.props.onSearch === 'function') {
        _this.props.form.validateFields(function (err, values) {
          if (!err) {
            var data = _this._createSearchItem(values);

            _this.props.onSearch(e, data);
          }
        });
      }
    };

    _this.onMoreItemClick = function (e, item) {
      _this.setState({
        showFields: [].concat(_toConsumableArray(_this.state.showFields), [{
          label: item.label,
          fieldName: item.fieldName,
          index: item.index
        }]),
        hiddenFields: _this.state.hiddenFields.filter(function (field) {
          return field.fieldName !== item.fieldName;
        }),
        addedItem: item
      });
    };

    _this.onReset = function () {
      var _this$props = _this.props,
          initFieldCount = _this$props.initFieldCount,
          schema = _this$props.schema;

      var fieldObj = _fieldHelper["default"].setFields(initFieldCount, undefined, schema);

      _this.setState({
        showFields: fieldObj.showFields,
        hiddenFields: fieldObj.hiddenFields,
        addedItem: null
      });

      _this.props.form.resetFields();

      if (_this.props.onReset && typeof _this.props.onReset === 'function') {
        _this.props.onReset({
          showFields: fieldObj.showFields,
          hiddenFields: fieldObj.hiddenFields
        });
      }
    };

    _this.onHidden = function (item) {
      _this.setState({
        showFields: _this.state.showFields.filter(function (field) {
          return field.fieldName !== item.fieldName;
        }),
        hiddenFields: [].concat(_toConsumableArray(_this.state.hiddenFields), [{
          label: item.label,
          fieldName: item.fieldName,
          index: item.index
        }]).sort(function (a, b) {
          return a.index - b.index;
        }),
        addedItem: null
      });
    };

    _this.onEnter = function (e) {
      _this.onSearch(e);
    };

    _this.onExpandCollapse = function () {
      var expand = _this.state.expand;

      _this.setState({
        expand: !expand
      });
    };

    _this.getForm = function () {
      return _this.props.form;
    };

    _this.getSearchItem = function () {
      var searchItem;

      _this.props.form.validateFields(function (err, values) {
        if (!err) {
          searchItem = _this._createSearchItem(values);
        }
      });

      return searchItem;
    };

    _this._createSearchItem = function (values) {
      var data = {};

      _this.state.showFields.forEach(function (item) {
        Object.keys(values).forEach(function (fieldName) {
          if (fieldName === item.fieldName) {
            data[fieldName] = values[fieldName];
          }
        });
      });

      return data;
    };

    var _initFieldCount = props.initFieldCount,
        _searchItem = props.searchItem,
        _schema = props.schema;

    var _fieldObj = _fieldHelper["default"].setFields(_initFieldCount, _searchItem, _schema);

    _this.state = {
      showFields: _fieldObj.showFields,
      hiddenFields: _fieldObj.hiddenFields,
      addedItem: null,
      searchFieldNames: _searchItem && Object.keys(_searchItem),
      expand: true
    };
    return _this;
  }

  _createClass(SearchForm, [{
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          className = _this$props2.className,
          layout = _this$props2.layout,
          schema = _this$props2.schema,
          form = _this$props2.form,
          showExpand = _this$props2.showExpand,
          showMore = _this$props2.showMore,
          showReset = _this$props2.showReset,
          resetTooltip = _this$props2.resetTooltip,
          initFieldCount = _this$props2.initFieldCount,
          expandPosition = _this$props2.expandPosition,
          actionExtra = _this$props2.actionExtra;
      return _react["default"].createElement("div", {
        className: (0, _classnames["default"])('ps-search-form-container', className)
      }, showExpand ? _react["default"].createElement(_Button["default"], {
        className: (0, _classnames["default"])('ps-search-form-display-button', {
          'ps-search-form-collapse-button': this.state.expand,
          'ps-search-form-expand-button': !this.state.expand
        }),
        containerStyle: {
          textAlign: expandPosition
        },
        onClick: this.onExpandCollapse
      }) : null, _react["default"].createElement("div", {
        className: "ps-search-form-display",
        style: {
          display: this.state.expand ? 'block' : 'none'
        }
      }, _react["default"].createElement(_antd.Form, {
        layout: layout,
        className: "ps-search-form"
      }, _react["default"].createElement("div", {
        className: "ps-search-form-wrapper"
      }, _react["default"].createElement(_SchemaField["default"], {
        schema: _fieldHelper["default"].displaySchema(schema),
        form: form,
        initFieldCount: initFieldCount,
        showFields: this.state.showFields,
        addedItem: this.state.addedItem,
        onHidden: this.onHidden,
        onEnter: this.onEnter
      })), _react["default"].createElement("div", {
        className: "ps-search-form-action"
      }, _react["default"].createElement(_SubmitField["default"], {
        items: this.state.hiddenFields,
        showMore: showMore,
        showReset: showReset,
        resetTooltip: resetTooltip,
        onMoreItemClick: this.onMoreItemClick,
        onSearch: this.onSearch,
        onReset: this.onReset
      }), actionExtra ? _react["default"].createElement("div", {
        className: "ps-search-form-action-extra"
      }, actionExtra) : null))));
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(props, state) {
      if (typeof props.searchItem !== 'undefined') {
        var searchFieldNames = Object.keys(props.searchItem);
        var isNotExistField = searchFieldNames.some(function (searchFieldName) {
          return !state.searchFieldNames.some(function (stateSearchFieldName) {
            return stateSearchFieldName === searchFieldName;
          });
        });

        if (isNotExistField) {
          var initFieldCount = props.initFieldCount,
              searchItem = props.searchItem,
              schema = props.schema;

          var fieldObj = _fieldHelper["default"].setFields(initFieldCount, searchItem, schema);

          return {
            showFields: fieldObj.showFields,
            hiddenFields: fieldObj.hiddenFields,
            addedItem: null,
            searchFieldNames: searchFieldNames
          };
        }
      }

      return null;
    }
  }]);

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

SearchForm.propTypes = {
  layout: _propTypes["default"].oneOf(['horizontal', 'vertical']),
  schema: _propTypes["default"].object.isRequired,
  initFieldCount: _propTypes["default"].number,
  searchItem: _propTypes["default"].object,
  actionExtra: _propTypes["default"].element,
  showExpand: _propTypes["default"].bool,
  showMore: _propTypes["default"].bool,
  showReset: _propTypes["default"].bool,
  resetTooltip: _propTypes["default"].string,
  expandPosition: _propTypes["default"].oneOf(['center', 'left', 'right']),
  onSearch: _propTypes["default"].func
};
SearchForm.defaultProps = {
  layout: 'horizontal',
  initFieldCount: 2,
  showExpand: true,
  showMore: true,
  showReset: true,
  expandPosition: 'center'
};

var _default = _antd.Form.create()(SearchForm);

exports["default"] = _default;