@aliretail/react-materials-components/es/Filter/index.js

B 端物料组件库

import _extends from "@babel/runtime/helpers/extends";
import _Icon from "@alifd/next/es/icon";
import _Button from "@alifd/next/es/button";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";

/* eslint-disable no-new */
import * as React from 'react';
import { Grid } from '@alifd/layout';
import * as PropTypes from 'prop-types';
import cn from 'classnames';
import ResizeSensor from 'css-element-queries/src/ResizeSensor'; // import {
//   Submit,
//   Reset,
// } from '@formily/next';

var RetailFilter = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(RetailFilter, _React$Component);

  RetailFilter.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
    if (props.cols !== state.cols && props.cols !== undefined) {
      return {
        cols: props.cols
      };
    }

    return null;
  };

  function RetailFilter(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;

    _this.setColumnByWrapperWidth = function () {
      if (!_this.wrapper) return;
      var width = _this.wrapper.clientWidth;
      var cols = 4; // default cols

      if (width < 620) {
        cols = 1;
      } else if (width >= 620 && width < 920) {
        cols = 2;
      } else if (width >= 920 && width < 1220) {
        cols = 3;
      } else if (width >= 1220) {
        cols = 4;
      }

      _this.setState({
        cols: cols
      });
    };

    _this.defaultButtonProps = {
      onSearch: function onSearch() {},
      onReset: function onReset() {}
    };

    _this.toggleExpand = function () {
      _this.setState(function (prevState) {
        return {
          isExpand: !prevState.isExpand
        };
      });
    };

    _this.renderDefaultBtns = function () {
      var buttons = _this.props.buttons;
      var btnProps = Object.assign(_this.defaultButtonProps, buttons);
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Button, {
        type: "primary",
        onClick: btnProps.onSearch
      }, btnProps.searchBtnText || '查询'), /*#__PURE__*/React.createElement(_Button, {
        onClick: btnProps.onReset
      }, btnProps.resetBtnText || '重置'));
    };

    _this.renderOperationBtns = function () {
      var _this$props = _this.props,
          alwaysShowItems = _this$props.alwaysShowItems,
          buttons = _this$props.buttons,
          children = _this$props.children,
          minDisplayRows = _this$props.minDisplayRows,
          showDefaultButton = _this$props.showDefaultButton;
      var _this$state = _this.state,
          cols = _this$state.cols,
          isExpand = _this$state.isExpand;
      var btnRender = buttons.render;
      var childLen = children.length;
      var minDisplayItem = cols * minDisplayRows;
      var alignLeft = childLen <= cols - 1;
      var showMoreBtn = !alwaysShowItems && childLen > minDisplayItem;
      return /*#__PURE__*/React.createElement("div", {
        className: cn('aliretail-filter-buttons', {
          left: alignLeft,
          'has-more': showMoreBtn
        }),
        style: {
          gridColumnEnd: alignLeft ? 'auto' : '-1'
        }
      }, btnRender && !showDefaultButton && btnRender(), showDefaultButton && _this.renderDefaultBtns(), showMoreBtn && /*#__PURE__*/React.createElement(_Button, {
        className: "inside-button",
        onClick: _this.toggleExpand,
        text: true,
        iconSize: "small"
      }, /*#__PURE__*/React.createElement("span", null, isExpand ? '收起' : '展开'), /*#__PURE__*/React.createElement(_Icon, {
        type: isExpand ? 'arrow-up' : 'arrow-down'
      })));
    };

    var _props$defaultExpand = props.defaultExpand,
        defaultExpand = _props$defaultExpand === void 0 ? false : _props$defaultExpand;
    _this.state = {
      isExpand: defaultExpand
    };
    return _this;
  }

  var _proto = RetailFilter.prototype;

  _proto.componentDidMount = function componentDidMount() {
    if (this.props.cols === undefined) {
      // 如果开发没有设置列的话，那么就按响应式规则来
      new ResizeSensor(this.wrapper, this.setColumnByWrapperWidth);
    }
  } // 根据当前容器的宽度，来设置 col
  ;

  _proto.render = function render() {
    var _this2 = this;

    var _this$props2 = this.props,
        children = _this$props2.children,
        minDisplayRows = _this$props2.minDisplayRows,
        _this$props2$alwaysSh = _this$props2.alwaysShowItems,
        alwaysShowItems = _this$props2$alwaysSh === void 0 ? false : _this$props2$alwaysSh,
        showDefaultButton = _this$props2.showDefaultButton,
        buttons = _this$props2.buttons,
        style = _this$props2.style,
        _this$props2$gridItem = _this$props2.gridItemStyle,
        gridItemStyle = _this$props2$gridItem === void 0 ? {} : _this$props2$gridItem,
        columnGap = _this$props2.columnGap,
        rowGap = _this$props2.rowGap;
    var _this$state2 = this.state,
        cols = _this$state2.cols,
        isExpand = _this$state2.isExpand;
    var minDisplayItem = cols * minDisplayRows - 1;
    var gridContainerSty = {
      gridTemplateColumns: "repeat(" + cols + ", minmax(0, 1fr) [col-start])",
      gridColumnGap: columnGap,
      gridRowGap: rowGap
    };
    var btnRender = buttons.render;
    var childLen = children.length;
    var showMoreBtn = !alwaysShowItems && childLen > minDisplayItem;
    var hiddenOperationBtns = !showMoreBtn && !showDefaultButton && !btnRender;
    return /*#__PURE__*/React.createElement("div", {
      className: "aliretail-filter-wrapper",
      "data-name": "GridLayout",
      style: _extends({}, style),
      ref: function ref(wrapper) {
        _this2.wrapper = wrapper;
      }
    }, cols !== undefined && /*#__PURE__*/React.createElement(Grid, {
      style: gridContainerSty,
      className: "aliretail-filterx"
    }, React.Children.map(children, function (child, index) {
      // schema 属性只有在 formily 体系下才会存在
      var _child$props = child.props,
          _child$props$colSpan = _child$props.colSpan,
          jsxColSpan = _child$props$colSpan === void 0 ? 1 : _child$props$colSpan,
          _child$props$rowSpan = _child$props.rowSpan,
          jsxRowSpan = _child$props$rowSpan === void 0 ? 1 : _child$props$rowSpan,
          hidden = _child$props.hidden,
          _child$props$schema = _child$props.schema,
          schema = _child$props$schema === void 0 ? {} : _child$props$schema;
      var colSpan = schema.colSpan || jsxColSpan;
      var rowSpan = schema.rowSpan || jsxRowSpan;
      var overMax = index > minDisplayItem - 1;

      var gridItemSty = _extends({}, gridItemStyle, {
        // 已经超过了当前最大展示条数 & 状态是收起的 && 非总是可见的
        // eslint-disable-next-line no-nested-ternary
        display: hidden ? 'none' : overMax && !isExpand && !alwaysShowItems ? 'none' : 'block'
      }); // formily


      if (child.props.schema && child.props.schema.path) {
        Object.assign(child.props.schema, {
          style: Object.assign(gridItemSty, {
            gridRow: "span " + rowSpan,
            gridColumn: "span " + (colSpan === 'full' ? cols : colSpan)
          })
        });
        return child;
      }

      return /*#__PURE__*/React.createElement("div", {
        colSpan: colSpan === 'full' ? cols : colSpan,
        rowSpan: rowSpan,
        style: gridItemSty
      }, child);
    }), !hiddenOperationBtns && this.renderOperationBtns()));
  };

  return RetailFilter;
}(React.Component);

RetailFilter.propTypes = {
  defaultExpand: PropTypes.bool,
  // 是否默认展开
  children: PropTypes.arrayOf(PropTypes.element),
  cols: PropTypes.number,
  // 分几列展示
  minDisplayRows: PropTypes.number,
  // 分隔行是第几行
  alwaysShowItems: PropTypes.bool,
  // 是否总是显示（不需要展开收起按钮）
  showDefaultButton: PropTypes.bool,
  // 是否展示默认按钮 包含搜索、重置
  buttons: PropTypes.object,
  columnGap: PropTypes.number,
  rowGap: PropTypes.number,
  style: PropTypes.object,
  gridItemStyle: PropTypes.object
};
RetailFilter.defaultProps = {
  defaultExpand: false,
  children: [],
  cols: undefined,
  minDisplayRows: 1,
  alwaysShowItems: true,
  showDefaultButton: false,
  buttons: {},
  style: {},
  gridItemStyle: {}
};
export default RetailFilter;