tplus-pos/dist/components/siderBar/siderBarContent.js

pos module

'use strict';

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

var _Menu4 = require('tinper-bee/dist/Menu');

var _Menu5 = _interopRequireDefault(_Menu4);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _class, _temp, _initialiseProps;

require('tinper-bee/dist/Menu/index.css');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _tplusComponentsTouch = require('tplus-components-touch');

var _AuthProcess = require('../../domain/retail/auth/AuthProcess');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Sider = _tplusComponentsTouch.Layout.Sider;
var SubMenu = _Menu5.default.SubMenu,
    Item = _Menu5.default.Item;
var SiderBarContent = (_temp = _class = function (_Component) {
  (0, _inherits3.default)(SiderBarContent, _Component);

  function SiderBarContent(props) {
    (0, _classCallCheck3.default)(this, SiderBarContent);

    var _this = (0, _possibleConstructorReturn3.default)(this, (SiderBarContent.__proto__ || (0, _getPrototypeOf2.default)(SiderBarContent)).call(this, props));

    _initialiseProps.call(_this);

    var _props$collapsed = props.collapsed,
        collapsed = _props$collapsed === undefined ? false : _props$collapsed,
        _props$selectedKey = props.selectedKey,
        selectedKey = _props$selectedKey === undefined ? '' : _props$selectedKey;

    _this.state = {
      collapsed: collapsed,
      selectedKey: selectedKey,
      subMenuShow: []
    };
    return _this;
  }

  (0, _createClass3.default)(SiderBarContent, [{
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this.removeSubMenuListener();
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _state = this.state,
          collapsed = _state.collapsed,
          _state$selectedKey = _state.selectedKey,
          selectedKey = _state$selectedKey === undefined ? '' : _state$selectedKey;
      var _props = this.props,
          trigger = _props.trigger,
          _props$menu = _props.menu,
          menu = _props$menu === undefined ? [] : _props$menu,
          _props$menuStyle = _props.menuStyle,
          menuStyle = _props$menuStyle === undefined ? {} : _props$menuStyle,
          _props$iconStyle = _props.iconStyle,
          iconStyle = _props$iconStyle === undefined ? {} : _props$iconStyle,
          _props$style = _props.style,
          style = _props$style === undefined ? {} : _props$style,
          _props$collapsedWidth = _props.collapsedWidth,
          collapsedWidth = _props$collapsedWidth === undefined ? 40 : _props$collapsedWidth,
          _props$width = _props.width,
          width = _props$width === undefined ? 88 : _props$width,
          collapsible = _props.collapsible,
          toggleAnimate = _props.toggleAnimate;

      var menuItems = !!menu.length && menu.map(function (item, i) {
        return _this2.renderMenuItem(item, i, selectedKey, collapsed, menuStyle, iconStyle);
      });
      return _react2.default.createElement(
        'div',
        { style: (0, _extends3.default)({ display: 'inline-block' }, style), className: 'sider-bar-content' },
        _react2.default.createElement(
          Sider,
          {
            collapsed: collapsed,
            width: width,
            collapsedWidth: collapsedWidth,
            trigger: trigger,
            onCollapse: this.onCollapse,
            collapsible: collapsible,
            toggleAnimate: toggleAnimate
          },
          _react2.default.createElement(
            _Menu5.default,
            {
              theme: 'dark',
              style: { backgroundColor: '#464263' },
              selectedKeys: [selectedKey || (menu[0] || {}).key || '0'],
              onClick: this.onClick,
              className: 'sider-menu'
            },
            menuItems
          )
        )
      );
    }
  }]);
  return SiderBarContent;
}(_react.Component), _initialiseProps = function _initialiseProps() {
  var _this3 = this;

  this.removeSubMenuListener = function () {
    document.removeEventListener('click', _this3.hideSubMenu);
  };

  this.hideSubMenu = function (event) {
    var _state2 = _this3.state,
        subMenuShow = _state2.subMenuShow,
        subMenuShowed = _state2.subMenuShowed;

    var currentDom = document.querySelector('.sider-menu');
    var targetDom = event.target;

    if (currentDom === targetDom || currentDom.contains(targetDom)) {
      // TODO: 点击自身的一些判断操作...
    } else {
      _this3.setState({ subMenuShow: [] }, function () {
        return _this3.removeSubMenuListener();
      });
    }
  };

  this.onClick = function () {
    var _props2 = _this3.props,
        menuOnClick = _props2.menuOnClick,
        _props2$menu = _props2.menu,
        menu = _props2$menu === undefined ? [] : _props2$menu;

    var _ref = arguments.length <= 0 ? undefined : arguments[0],
        key = _ref.key;

    var _state3 = _this3.state,
        _state3$subMenuShow = _state3.subMenuShow,
        subMenuShow = _state3$subMenuShow === undefined ? [] : _state3$subMenuShow,
        _state3$subMenuShowed = _state3.subMenuShowed,
        subMenuShowed = _state3$subMenuShowed === undefined ? [] : _state3$subMenuShowed;

    var selectedKey = key;
    var currentItem = menu.find(function (v) {
      return v.key === key;
    }) || {};
    var subs = currentItem.subs,
        action = currentItem.action;

    if (subs) {
      if (!subMenuShow.includes(key)) {
        subMenuShow = [key];
        subMenuShowed = [key];
        _this3.setState({ subMenuShow: subMenuShow, subMenuShowed: subMenuShowed, subItemClickKey: '' }, function () {
          document.addEventListener('click', _this3.hideSubMenu);
        });
      } else {
        _this3.setState({ subMenuShow: [] });
      }
    } else {
      _this3.setState({ subMenuShow: [] });
    }
    _this3.setState({ selectedKey: selectedKey, itemClickKey: selectedKey }, function () {
      setTimeout(function () {
        if (action) return; // 如果是路由跳转，则不去setState
        _this3.setState({ itemClickKey: '' });
      }, 200);
    });
    menuOnClick && menuOnClick(key);
  };

  this.subItemClick = function (item, selectedKey) {
    console.log(selectedKey);
    var subItemClickKey = item.key;
    var _state$subMenuShow = _this3.state.subMenuShow,
        subMenuShow = _state$subMenuShow === undefined ? [] : _state$subMenuShow;
    var subMenuClick = _this3.props.subMenuClick;

    _this3.setState({ subItemClickKey: subItemClickKey });
    // subItemClickKey === 'refundCurrent' 非原单退货
    if (subItemClickKey === 'refundCurrent' || subItemClickKey === 'refundBefore') {
      var status = _AuthProcess.AuthProcess.execute('ReverseOperation');
      if (!status) {
        _this3.props.authorityValidate && _this3.props.authorityValidate({ callback: function callback(result) {
            if (result) {
              subMenuClick && subMenuClick(subItemClickKey);
            }
          } });
      } else {
        subMenuClick && subMenuClick(subItemClickKey);
      }
    } else {
      subMenuClick && subMenuClick(subItemClickKey);
    }
    setTimeout(function () {
      var subMenuShowFilter = subMenuShow.filter(function (v) {
        return v !== selectedKey;
      });
      _this3.setState({ subMenuShow: subMenuShowFilter });
    }, 200);
  };

  this.onCollapse = function () {
    var onCollapse = _this3.props.onCollapse;

    var collapsed = !_this3.state.collapsed;
    onCollapse && onCollapse(collapsed);
    _this3.setState({ collapsed: collapsed });
  };

  this.renderMenuItem = function (item, i, selectedKey, collapsed, menuStyle, iconStyle) {
    var _state4 = _this3.state,
        itemClickKey = _state4.itemClickKey,
        subItemClickKey = _state4.subItemClickKey,
        _state4$subMenuShow = _state4.subMenuShow,
        subMenuShow = _state4$subMenuShow === undefined ? [] : _state4$subMenuShow,
        _state4$subMenuShowed = _state4.subMenuShowed,
        subMenuShowed = _state4$subMenuShowed === undefined ? [] : _state4$subMenuShowed;
    var _props3 = _this3.props,
        _props3$collapsedWidt = _props3.collapsedWidth,
        collapsedWidth = _props3$collapsedWidt === undefined ? 40 : _props3$collapsedWidt,
        _props3$width = _props3.width,
        width = _props3$width === undefined ? 88 : _props3$width;
    var _item$className = item.className,
        className = _item$className === undefined ? '' : _item$className,
        key = item.key,
        _item$subs = item.subs,
        subs = _item$subs === undefined ? [] : _item$subs;

    className = className || 'sider-bar-menu-item-' + key;
    var subComponents = !!subs.length && subs.map(function (value, i) {
      return _react2.default.createElement(
        'div',
        {
          key: value.key,
          className: 'sub-menu-item ' + (subItemClickKey === value.key ? 'sub-menu-item-active' : ''),
          onClick: function onClick(e) {
            e.stopPropagation();
            _this3.subItemClick(value, item.key);
          }
        },
        _react2.default.createElement(
          'span',
          null,
          value.title
        ),
        value.isTotal && value.totalNum > 0 && _react2.default.createElement(
          'div',
          { className: 'sub-menu-item-total' },
          value.totalNum > 99 ? '99+' : value.totalNum
        )
      );
    });
    var subShow = subMenuShow.includes(item.key);
    return _react2.default.createElement(
      Item,
      { key: item.key,
        className: 'sider-bar-menu-item ' + className + ' ' + (item.subs ? 'sider-bar-menu-submenu' : '') + ' ' + (itemClickKey === (item.key || i) ? 'sider-bar-menu-item-click' : '')
      },
      _react2.default.createElement(
        'div',
        { className: 'menu-submenu-content' },
        _react2.default.createElement(_tplusComponentsTouch.Ticon, {
          icon: '' + (selectedKey === (item.key || i) ? item.activeIcon : item.icon),
          className: 'menu-item-icon',
          style: (0, _extends3.default)({}, item.icon ? {} : { backgroundColor: '#fff' }, iconStyle)
        }),
        item.isTotal && item.totalNum > 0 && _react2.default.createElement(
          'div',
          { className: 'menu-submenu-total' },
          item.totalNum > 99 ? '99+' : item.totalNum
        ),
        !collapsed && _react2.default.createElement(
          'h1',
          { className: 'menu-submenu-title' },
          item.title
        ),
        item.subs && _react2.default.createElement(
          'div',
          {
            style: {
              display: subMenuShowed.includes(item.key) ? 'block' : 'none',
              left: (collapsed ? collapsedWidth : width) + 10
            },
            className: 'menu-submenu-list-wrapper ' + (subShow ? 'menu-submenu-list-active submenu-zoom-enter submenu-zoom-enter-active' : 'submenu-zoom-leave submenu-zoom-leave-active') },
          subComponents
        )
      )
    );
  };
}, _temp);
exports.default = SiderBarContent;
//# sourceMappingURL=siderBarContent.js.map