@jannie-shao/components-antd4
Version:
124 lines • 4.31 kB
JavaScript
import "antd/es/card/style";
import _Card from "antd/es/card";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["className", "isLoading", "model", "defaultFilter", "layout", "btnGroup", "onFilterChange", "onSearch", "autoSearch", "resetAutoSearch"];
import React, { useImperativeHandle, forwardRef, useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { merge } from 'lodash';
import Form from "../form";
import { rootPrefix } from "../style/config";
import { timestamp } from "../utils";
var prefix = rootPrefix + "-search-bar";
var SearchBar = /*#__PURE__*/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 = _objectWithoutPropertiesLoose(_ref, _excluded);
var compSearchForm = useRef();
var _useState = useState([]),
modelNow = _useState[0],
setModelNow = _useState[1];
var _useState2 = useState([]),
dateRange = _useState2[0],
setDateRange = _useState2[1];
var initFilter = function initFilter(formData) {
var filter = _extends({}, formData);
if (dateRange.length > 0) {
dateRange.forEach(function (d) {
if (formData[d.name]) {
formData[d.name][0] && (filter[d.keys[0]] = timestamp(formData[d.name][0], 'startOfDay'));
formData[d.name][1] && (filter[d.keys[1]] = 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);
};
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: rootPrefix + "-search-bar-fix"
}
};
return merge(mNew, m);
}
return m;
}));
setDateRange(tempDateRange);
}, [model]);
useEffect(function () {
autoSearch && compSearchForm.current && compSearchForm.current.handleSubmit();
}, [autoSearch]);
useImperativeHandle(ref, function () {
return _extends({}, compSearchForm.current || {});
});
return /*#__PURE__*/React.createElement(_Card, {
className: classnames(prefix, className, (_classnames = {}, _classnames[prefix + "-flex"] = layout === 'flex', _classnames))
}, /*#__PURE__*/React.createElement("div", {
className: prefix + "-content"
}, /*#__PURE__*/React.createElement(Form, _extends({}, 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.bool,
model: PropTypes.array,
defaultFilter: PropTypes.object,
layout: PropTypes.string,
onFilterChange: PropTypes.func,
onSearch: PropTypes.func,
autoSearch: PropTypes.bool,
resetAutoSearch: PropTypes.bool
};
SearchBar.defaultProps = {
isLoading: false,
model: [],
defaultFilter: {},
layout: 'auto',
onFilterChange: function onFilterChange() {},
onSearch: function onSearch() {},
autoSearch: false,
resetAutoSearch: false
};
export default SearchBar;