@6thquake/react-material/ActionBar/ActionBar.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.styles = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _withStyles = _interopRequireDefault(require("../styles/withStyles"));

var _AppBar = _interopRequireDefault(require("../AppBar"));

var _MenuItem = _interopRequireDefault(require("../MenuItem"));

var _MenuList = _interopRequireDefault(require("../MenuList"));

var _Typography = _interopRequireDefault(require("../Typography"));

var _Paper = _interopRequireDefault(require("../Paper"));

var _isEqual = _interopRequireDefault(require("lodash/isEqual"));

var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));

var _KeyboardArrowDown = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowDown"));

var _KeyboardArrowUp = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowUp"));

var _FilterList = _interopRequireDefault(require("@material-ui/icons/FilterList"));

var _SwipeableDrawer = _interopRequireDefault(require("../SwipeableDrawer"));

var _ActionFilter = _interopRequireDefault(require("./ActionFilter"));

var dropDownStyle = function dropDownStyle(theme) {
  return {
    root: {
      position: 'absolute',
      width: '100%',
      top: 0,
      backgroundColor: 'inherit',
      boxSizing: 'content-box',
      zIndex: theme.zIndex.appBar - 1
    },
    menuList: {
      zIndex: theme.zIndex.appBar,
      position: 'relative'
    },
    menuItem: {
      backgroundColor: theme.palette.primary.main,
      '& $primary, & $icon': {
        color: theme.palette.common.white
      }
    },
    mask: {
      width: '100vh',
      height: '100vh',
      position: 'fixed',
      opacity: 0,
      background: 'black',
      left: 0,
      top: 0,
      zIndex: theme.zIndex.appBar - 1
    }
  };
};

function DropDown(_ref) {
  var theme = _ref.theme,
      onClose = _ref.onClose,
      onChange = _ref.onChange,
      classes = _ref.classes,
      value = _ref.value,
      _ref$options = _ref.options,
      options = _ref$options === void 0 ? [] : _ref$options;
  return _react.default.createElement(_Paper.default, {
    square: true,
    elevation: 1,
    className: classes.root
  }, _react.default.createElement(_MenuList.default, {
    className: classes.menuList
  }, options.map(function (item) {
    var active = item.value === value;
    return _react.default.createElement(_MenuItem.default, {
      onClick: function onClick() {
        onChange(item.value);
      },
      key: item.value,
      className: active ? classes.menuItem : ''
    }, _react.default.createElement(_Typography.default, {
      style: {
        color: active ? theme.palette.common.white : ''
      },
      variant: 'body1'
    }, item.label));
  })), _react.default.createElement("div", {
    className: classes.mask,
    onClick: onClose
  }));
}

var StyledDropDown = (0, _withStyles.default)(dropDownStyle, {
  name: 'RMDropDown',
  withTheme: true
})(DropDown);

var styles = function styles(theme) {
  return {
    root: {
      position: 'relative',
      'box-sizing': 'border-box',
      backgroundColor: theme.palette.background.paper
    },
    bar: {
      display: 'flex',
      flex: 1,
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: "".concat(theme.spacing(1.5), "px ").concat(theme.spacing(1), "px"),
      zIndex: theme.zIndex.appBar
    },
    leftBox: {
      display: 'flex'
    },
    left: {
      display: 'flex',
      alignItems: 'center',
      paddingRight: theme.spacing(0.5)
    },
    label: {
      paddingLeft: theme.spacing(1)
    },
    leftPriority: {
      display: 'flex',
      alignItems: 'center'
    },
    slots: {
      display: 'flex',
      flex: 1,
      alignItems: 'center'
    },
    rightBox: {
      display: 'flex',
      alignItems: 'center',
      paddingLeft: theme.spacing(0.5),
      justifyContent: 'flex-end'
    },
    right: {
      alignItems: 'center',
      display: 'flex'
    },
    rightPriority: {
      alignItems: 'center',
      display: 'flex'
    },
    item: {
      marginRight: theme.spacing(1)
    },
    menuBox: {
      position: 'relative',
      backgroundColor: 'inherit',
      width: '100%'
    }
  };
};

exports.styles = styles;

var ActionBar =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(ActionBar, _React$Component);

  function ActionBar(_props) {
    var _this;

    (0, _classCallCheck2.default)(this, ActionBar);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(ActionBar).call(this, _props));

    _this.init = function (props) {
      var filters = props.filters,
          sorts = props.sorts;

      var _filters = (0, _cloneDeep.default)(filters);

      var _sorts = (0, _cloneDeep.default)(sorts);

      var priorityFilters = [];
      var selectedFilters = [];

      _filters.forEach(function (filter, i) {
        var label = filter.label,
            value = filter.value,
            data = filter.data;
        var datas = [];
        data.forEach(function (item, j) {
          if (item.priority) {
            item.i = i;
            item.j = j;
            priorityFilters.push(item);
          }

          if (item.active) {
            datas.push(item);
          }
        });

        if (datas.length > 0) {
          selectedFilters.push({
            label: label,
            value: value,
            data: datas
          });
        }
      });

      var prioritySorts = [];
      var normalSorts = [];
      var value = '';

      _sorts.forEach(function (item) {
        if (item.priority) {
          prioritySorts.push(item);
        } else {
          normalSorts.push(item);
        }

        if (item.active) {
          value = item.value;
        }
      });

      _this.setState({
        value: value,
        prioritySorts: prioritySorts,
        normalSorts: normalSorts,
        priorityFilters: priorityFilters,
        selectedFilters: selectedFilters
      });
    };

    _this.filter = null;

    _this.refFilter = function (node) {
      return _this.filter = node;
    };

    _this.handleTitleClick = function (e) {
      var expanded = _this.state.expanded;

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

    _this.handleChange = function (value) {
      var _this$state = _this.state,
          normalSorts = _this$state.normalSorts,
          prioritySorts = _this$state.prioritySorts;
      normalSorts.forEach(function (item) {
        if (item.value === value) {
          item.active = true;
        } else {
          item.active = false;
        }
      });
      prioritySorts.forEach(function (item) {
        item.active = false;
      });

      _this.setState({
        value: value,
        expanded: false
      }, function () {
        _this.onChange();
      });
    };

    _this.handleSiftingClick = function () {
      _this.setState({
        open: true,
        expanded: false
      });
    };

    _this.handleFilterChange = function (e) {
      var priorityFilters = [];
      e.forEach(function (filter, i) {
        filter.data.forEach(function (item, j) {
          if (item.priority) {
            item.i = i;
            item.j = j;
            priorityFilters.push(item);
          }
        });
      });

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

    _this.handleFilterOk = function (e) {
      _this.setState({
        selectedFilters: e,
        open: false
      }, function () {
        _this.onChange();
      });
    };

    _this.handleFilterReset = function (e) {
      _this.setState({
        selectedFilters: e
      }, function () {
        _this.onChange();
      });
    };

    _this.onChange = function () {
      var _this$props = _this.props,
          onChange = _this$props.onChange,
          sorts = _this$props.sorts;
      var _this$state2 = _this.state,
          selectedFilters = _this$state2.selectedFilters,
          value = _this$state2.value;
      var data = {
        sort: sorts.filter(function (item) {
          return item.value === value;
        })[0],
        filters: selectedFilters
      };
      onChange(data);
    };

    _this.handleDrawerClose = function () {
      _this.setState({
        open: false
      });
    };

    _this.handleDropDownClose = function () {
      _this.setState({
        expanded: false
      });
    };

    _this.handleDrawerClose = function () {
      _this.setState({
        open: false
      });
    };

    _this.domRef = _react.default.createRef();
    _this.state = {
      expanded: false,
      open: false,
      value: ''
    };
    return _this;
  }

  (0, _createClass2.default)(ActionBar, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.init(this.props);
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      var _this$props2 = this.props,
          filter = _this$props2.filter,
          sorts = _this$props2.sorts;

      if (!(0, _isEqual.default)(nextProps.filter, filter) || !(0, _isEqual.default)(nextProps.sorts, sorts)) {
        this.init(nextProps);
      }
    }
  }, {
    key: "handlePriorities",
    value: function handlePriorities(index) {
      var _this2 = this;

      var _this$state3 = this.state,
          normalSorts = _this$state3.normalSorts,
          prioritySorts = _this$state3.prioritySorts;
      var value = null;
      prioritySorts.forEach(function (item, i) {
        if (i === index) {
          item.active = true;
          value = item.value;
        } else {
          item.active = false;
        }
      });
      normalSorts.forEach(function (item) {
        item.active = false;
      });
      this.setState({
        value: value,
        expanded: false
      }, function () {
        _this2.onChange();
      });
    }
  }, {
    key: "handleFilters",
    value: function handleFilters(i, j) {
      this.filter.handleClick(i, j, true);
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var _this$props3 = this.props,
          classes = _this$props3.classes,
          theme = _this$props3.theme,
          filters = _this$props3.filters,
          AppBarProps = _this$props3.AppBarProps,
          children = _this$props3.children;
      var iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);
      var _this$state4 = this.state,
          expanded = _this$state4.expanded,
          value = _this$state4.value,
          open = _this$state4.open;
      var _this$state5 = this.state,
          _this$state5$selected = _this$state5.selectedFilters,
          selectedFilters = _this$state5$selected === void 0 ? [] : _this$state5$selected,
          _this$state5$priority = _this$state5.priorityFilters,
          priorityFilters = _this$state5$priority === void 0 ? [] : _this$state5$priority,
          _this$state5$normalSo = _this$state5.normalSorts,
          normalSorts = _this$state5$normalSo === void 0 ? [] : _this$state5$normalSo,
          _this$state5$priority2 = _this$state5.prioritySorts,
          prioritySorts = _this$state5$priority2 === void 0 ? [] : _this$state5$priority2;
      var multiLength = selectedFilters.reduce(function (r, next) {
        return r + next.data.length;
      }, 0);
      var selectedSort = normalSorts.filter(function (item) {
        return item.value === value;
      })[0] || {
        label: '排序',
        active: false,
        value: value
      };
      var ArrowIcon = expanded ? _KeyboardArrowDown.default : _KeyboardArrowUp.default;
      return _react.default.createElement(_AppBar.default, (0, _extends2.default)({
        elevation: 1,
        position: "static",
        color: "default",
        className: classes.root
      }, AppBarProps), _react.default.createElement("div", {
        className: classes.bar
      }, _react.default.createElement("div", {
        className: classes.leftBox
      }, _react.default.createElement("div", {
        onClick: this.handleTitleClick,
        className: classes.left
      }, _react.default.createElement(_Typography.default, {
        style: {
          color: selectedSort.active ? theme.palette.primary.main : ''
        },
        className: classes.label,
        variant: "body1"
      }, selectedSort.label), _react.default.createElement(ArrowIcon, {
        color: selectedSort.active ? 'primary' : 'inherit'
      })), _react.default.createElement("div", {
        className: classes.leftPriority
      }, prioritySorts.map(function (item, index) {
        var color = item.active ? theme.palette.primary.main : '';
        var className = item.active ? 'body2' : 'body1';
        return _react.default.createElement("div", {
          key: item.value,
          className: classes.item,
          onClick: _this3.handlePriorities.bind(_this3, index)
        }, _react.default.createElement(_Typography.default, {
          style: {
            color: color
          },
          variant: className
        }, item.label));
      }))), _react.default.createElement("div", {
        className: classes.slots
      }, children), _react.default.createElement("div", {
        className: classes.rightBox
      }, _react.default.createElement("div", {
        className: classes.rightPriority
      }, priorityFilters.map(function (item, index) {
        var color = item.active ? theme.palette.primary.main : '';
        var className = item.active ? 'body2' : 'body1';
        return _react.default.createElement("div", {
          key: item.value,
          className: classes.item,
          onClick: _this3.handleFilters.bind(_this3, item.i, item.j)
        }, _react.default.createElement(_Typography.default, {
          style: {
            color: color
          },
          variant: className
        }, item.label));
      })), _react.default.createElement("div", {
        className: classes.right
      }, _react.default.createElement("div", {
        onClick: this.handleSiftingClick,
        className: classes.left
      }, _react.default.createElement(_Typography.default, {
        color: multiLength ? 'primary' : '',
        className: classes.label,
        variant: multiLength > 0 ? 'body2' : 'body1'
      }, "\u7B5B\u9009", multiLength ? "(".concat(multiLength, ")") : ''), _react.default.createElement(_FilterList.default, {
        color: multiLength > 0 ? 'primary' : 'inherit'
      }))))), expanded && _react.default.createElement("div", {
        className: classes.menuBox
      }, _react.default.createElement(StyledDropDown, {
        onClose: this.handleDropDownClose,
        onChange: this.handleChange,
        options: normalSorts,
        value: value
      })), _react.default.createElement(_SwipeableDrawer.default, {
        variant: "persistent",
        disableBackdropTransition: !iOS,
        disableDiscovery: iOS,
        onClose: this.handleDrawerClose,
        anchor: "right",
        open: open
      }, _react.default.createElement(_ActionFilter.default, {
        data: filters,
        onOk: this.handleFilterOk,
        onReset: this.handleFilterReset,
        onChange: this.handleFilterChange,
        innerRef: this.refFilter
      })));
    }
  }]);
  return ActionBar;
}(_react.default.Component);

ActionBar.propTypes = {
  /**
   * items of filters
   */
  filters: _propTypes.default.array,

  /**
   * data of sort bar
   */
  sorts: _propTypes.default.array,

  /**
   * Callback fired when the selected data to be changed.
   */
  onChange: _propTypes.default.func,

  /**
   * Props of AppBar
   */
  AppBarProps: _propTypes.default.object
};
ActionBar.defaultProps = {
  onChange: function onChange() {},
  filters: [],
  sorts: [],
  AppBarProps: {}
};

var _default = (0, _withStyles.default)(styles, {
  name: 'RMActionBar',
  withTheme: true
})(ActionBar);

exports.default = _default;