@jannie-shao/components-antd4/es/search/index.js

基于 Antd 4 的组件封装

import _extends from "@babel/runtime/helpers/extends";
import React, { useImperativeHandle, forwardRef, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import { callFun } from "../utils";
import SearchBar from "../search-bar";
import SearchRet from "../search-ret";
var defaultStore = {
  filter: {},
  page: {
    current: 1,
    pageSize: 20
  },
  total: 0,
  list: []
};
var List = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var className = _ref.className,
    model = _ref.model,
    defaultFilter = _ref.defaultFilter,
    columns = _ref.columns,
    useSearchBar = _ref.useSearchBar,
    searchBarProps = _ref.searchBarProps,
    searchRetProps = _ref.searchRetProps,
    onFilterChange = _ref.onFilterChange,
    onSearch = _ref.onSearch,
    autoSearch = _ref.autoSearch,
    resetAutoSearch = _ref.resetAutoSearch;
  var _searchRetProps$usePa = searchRetProps.usePagination,
    usePagination = _searchRetProps$usePa === void 0 ? true : _searchRetProps$usePa;
  var compSearchBar = useRef();
  var _useState = useState(false),
    loading = _useState[0],
    setLoading = _useState[1];
  var _useState2 = useState(defaultStore),
    store = _useState2[0],
    setStore = _useState2[1];
  var doSearch = function doSearch(searchFilter) {
    setLoading(true);
    callFun(function () {
      return onSearch(searchFilter);
    }, function (res) {
      setLoading(false);
      var _ref2 = res || {},
        _ref2$total = _ref2.total,
        total = _ref2$total === void 0 ? 0 : _ref2$total,
        _ref2$list = _ref2.list,
        list = _ref2$list === void 0 ? [] : _ref2$list;
      setStore(_extends({}, store, {
        filter: _extends({}, searchFilter.filter),
        page: _extends({}, searchFilter.page),
        total: total || list.length,
        list: list
      }));
    });
  };
  var handleSearch = function handleSearch(f, pageNow) {
    var _store$page;
    if (f === void 0) {
      f = {};
    }
    if (pageNow === void 0) {
      pageNow = 1;
    }
    var searchFilter = {
      filter: _extends({}, f),
      page: {
        current: pageNow,
        pageSize: (store === null || store === void 0 ? void 0 : (_store$page = store.page) === null || _store$page === void 0 ? void 0 : _store$page.pageSize) || defaultStore.page.pageSize
      }
    };
    doSearch(searchFilter);
  };
  var handlePageChange = function handlePageChange(cp) {
    var _store$page2;
    var searchFilter = {
      filter: _extends({}, store.filter || {}),
      page: {
        current: ((_store$page2 = store.page) === null || _store$page2 === void 0 ? void 0 : _store$page2.pageSize) === cp.pageSize ? cp.current : 1,
        pageSize: cp.pageSize
      }
    };
    doSearch(searchFilter);
  };
  useImperativeHandle(ref, function () {
    return {
      setFilter: function setFilter(f) {
        return compSearchBar.current && compSearchBar.current.setFieldsValue(f);
      },
      getFilter: function getFilter(f) {
        return compSearchBar.current && compSearchBar.current.getFieldsValue(f);
      },
      getStore: function getStore() {
        return store;
      },
      autoSearch: function autoSearch(f) {
        return handleSearch(_extends({}, defaultFilter, f));
      },
      handleSearch: function handleSearch() {
        return compSearchBar.current && compSearchBar.current.handleSubmit();
      },
      reload: function reload() {
        return handleSearch(store === null || store === void 0 ? void 0 : store.filter, store === null || store === void 0 ? void 0 : store.page.current);
      },
      reset: function reset() {
        return compSearchBar.current && compSearchBar.current.handleReset();
      },
      resetSubmit: function resetSubmit() {
        return compSearchBar.current && compSearchBar.current.handleResetSubmit();
      }
    };
  });
  return /*#__PURE__*/React.createElement("div", {
    className: className
  }, useSearchBar && /*#__PURE__*/React.createElement(SearchBar, _extends({}, searchBarProps, {
    ref: compSearchBar,
    isLoading: searchBarProps.useLoading ? loading : false,
    model: model,
    defaultFilter: defaultFilter,
    onFilterChange: onFilterChange,
    onSearch: handleSearch,
    autoSearch: autoSearch,
    resetAutoSearch: resetAutoSearch
  })), /*#__PURE__*/React.createElement(SearchRet, _extends({}, searchRetProps, {
    isLoading: searchRetProps.useLoading ? loading : false,
    dataList: store.list,
    columns: columns,
    pagination: usePagination ? _extends({}, store.page, {
      total: store.total
    }) : false,
    onPageChange: handlePageChange
  })));
});
List.propTypes = {
  className: PropTypes.string,
  model: PropTypes.array,
  columns: PropTypes.array,
  store: PropTypes.object,
  defaultFilter: PropTypes.object,
  // searchBar & searchRet
  useSearchBar: PropTypes.bool,
  searchBarProps: PropTypes.object,
  searchRetProps: PropTypes.object,
  // functions & flag
  onSearch: PropTypes.func,
  autoSearch: PropTypes.bool,
  resetAutoSearch: PropTypes.bool
};
List.defaultProps = {
  className: '',
  model: [],
  columns: [],
  store: {},
  defaultFilter: {},
  // searchBar & searchRet
  useSearchBar: true,
  searchBarProps: {},
  searchRetProps: {},
  // functions & flag
  onSearch: function onSearch() {},
  autoSearch: true,
  resetAutoSearch: false
};
List.Result = function (props) {
  if (props === void 0) {
    props = {};
  }
  return /*#__PURE__*/React.createElement(SearchRet, props);
};
export default List;