@jannie-shao/components-antd4/lib/search-bar/index.js

基于 Antd 4 的组件封装

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
require("antd/es/card/style");
var _card = _interopRequireDefault(require("antd/es/card"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames2 = _interopRequireDefault(require("classnames"));
var _lodash = require("lodash");
var _form = _interopRequireDefault(require("../form"));
var _config = require("../style/config");
var _utils = require("../utils");
var _excluded = ["className", "isLoading", "model", "defaultFilter", "layout", "btnGroup", "onFilterChange", "onSearch", "autoSearch", "resetAutoSearch"];
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var prefix = _config.rootPrefix + "-search-bar";
var SearchBar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
  var _classnames;
  var _ref$className = _ref.className,
    className = _ref$className === void 0 ? '' : _ref$className,
    isLoading = _ref.isLoading,
    model = _ref.model,
    defaultFilter = _ref.defaultFilter,
    layout = _ref.layout,
    btnGroup = _ref.btnGroup,
    onFilterChange = _ref.onFilterChange,
    onSearch = _ref.onSearch,
    autoSearch = _ref.autoSearch,
    resetAutoSearch = _ref.resetAutoSearch,
    formProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
  var compSearchForm = (0, _react.useRef)();
  var _useState = (0, _react.useState)([]),
    modelNow = _useState[0],
    setModelNow = _useState[1];
  var _useState2 = (0, _react.useState)([]),
    dateRange = _useState2[0],
    setDateRange = _useState2[1];
  var initFilter = function initFilter(formData) {
    var filter = (0, _extends2["default"])({}, formData);
    if (dateRange.length > 0) {
      dateRange.forEach(function (d) {
        if (formData[d.name]) {
          formData[d.name][0] && (filter[d.keys[0]] = (0, _utils.timestamp)(formData[d.name][0], 'startOfDay'));
          formData[d.name][1] && (filter[d.keys[1]] = (0, _utils.timestamp)(formData[d.name][1], 'endOfDay'));
          delete filter[d.name];
        }
      });
    }
    return filter;
  };
  var handleFilterChange = function handleFilterChange(changedKeys, all) {
    var filterAll = initFilter(all);
    onFilterChange(changedKeys, filterAll);
  };
  var handleSearch = function handleSearch(formData) {
    if (formData === void 0) {
      formData = {};
    }
    onSearch(initFilter(formData), 1);
  };
  (0, _react.useEffect)(function () {
    var tempDateRange = [];
    setModelNow(model.map(function (m) {
      if (m.type === 'dateRange') {
        if (m.keys) {
          tempDateRange.push({
            name: m.name,
            keys: m.keys
          });
        }
        var mNew = {
          formProps: {
            className: _config.rootPrefix + "-search-bar-fix"
          }
        };
        return (0, _lodash.merge)(mNew, m);
      }
      return m;
    }));
    setDateRange(tempDateRange);
  }, [model]);
  (0, _react.useEffect)(function () {
    autoSearch && compSearchForm.current && compSearchForm.current.handleSubmit();
  }, [autoSearch]);
  (0, _react.useImperativeHandle)(ref, function () {
    return (0, _extends2["default"])({}, compSearchForm.current || {});
  });
  return /*#__PURE__*/_react["default"].createElement(_card["default"], {
    className: (0, _classnames2["default"])(prefix, className, (_classnames = {}, _classnames[prefix + "-flex"] = layout === 'flex', _classnames))
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: prefix + "-content"
  }, /*#__PURE__*/_react["default"].createElement(_form["default"], (0, _extends2["default"])({}, formProps, {
    ref: compSearchForm,
    className: prefix + "-form",
    isLoading: isLoading,
    layout: ['horizontal', 'vertical'].includes(layout) ? layout : 'inline',
    onChange: handleFilterChange,
    onSubmit: handleSearch,
    model: modelNow,
    btnGroup: btnGroup || [{
      opType: 'submit',
      btnText: 'Search'
    }, autoSearch || resetAutoSearch ? 'resetSubmit' : 'reset'],
    initialValues: defaultFilter
  }))));
});
SearchBar.propTypes = {
  isLoading: _propTypes["default"].bool,
  model: _propTypes["default"].array,
  defaultFilter: _propTypes["default"].object,
  layout: _propTypes["default"].string,
  onFilterChange: _propTypes["default"].func,
  onSearch: _propTypes["default"].func,
  autoSearch: _propTypes["default"].bool,
  resetAutoSearch: _propTypes["default"].bool
};
SearchBar.defaultProps = {
  isLoading: false,
  model: [],
  defaultFilter: {},
  layout: 'auto',
  onFilterChange: function onFilterChange() {},
  onSearch: function onSearch() {},
  autoSearch: false,
  resetAutoSearch: false
};
var _default = SearchBar;
exports["default"] = _default;