tplus-pos/dist/components/voucherMenuButtons/menuButtons.js

pos module

'use strict';

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

var _Popover2 = require('tinper-bee/dist/Popover');

var _Popover3 = _interopRequireDefault(_Popover2);

var _Button5 = require('tinper-bee/dist/Button');

var _Button6 = _interopRequireDefault(_Button5);

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, _class2, _temp;

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

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _mutantsMicrofx = require('mutants-microfx');

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

var _mutantsUtil = require('mutants-util');

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

var buttonMarginHorzontal = 12;
var moreButtonColumns = 4;

var MenuButtons = (0, _mutantsMicrofx.observer)(_class = (_temp = _class2 = function (_Component) {
    (0, _inherits3.default)(MenuButtons, _Component);

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

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

        _this.clicks = function (it) {
            _this.props.clicks(it);
        };

        _this.moreClicks = function (it) {
            _this.setState({
                moreVisible: false
            });
            _this.clicks(it);
        };

        _this.moreButtonClick = function () {
            console.log('点击更多按钮...');
            _this.setState({
                moreVisible: true
            });
        };

        _this.moreHide = function () {
            _this.setState({
                moreVisible: false
            });
        };

        _this.renderButtons = function (buttons, style, click) {
            return buttons.map(function (el, index) {
                return _react2.default.createElement(
                    _Button6.default,
                    { className: 'action-btn', key: index, style: style, type: 'default', onClick: function onClick() {
                            click(el);
                        } },
                    el.Title
                );
            });
        };

        _this.state = {
            showNumber: 0,
            moreVisible: false
        };

        var _ref = _mutantsUtil.platform || {},
            isHorizontalPad = _ref.isHorizontalPad;

        _this.isHorizontalPad = !!isHorizontalPad;
        return _this;
    }

    //点击更多按钮


    //关闭更多


    (0, _createClass3.default)(MenuButtons, [{
        key: 'componentDidMount',
        value: function componentDidMount() {
            var _this2 = this;

            setTimeout(function () {
                var width = _this2.wraper.clientWidth;
                var baseWidth = _this2.props.baseWidth;

                var showNumber = void 0;
                try {
                    showNumber = parseInt((width - buttonMarginHorzontal * 2) / parseInt(baseWidth));
                    _this2.setState({ showNumber: showNumber });
                } catch (e) {
                    console.warn('baseWidth格式不正确');
                }
            }, 0);
        }
    }, {
        key: '_getStyles',
        value: function _getStyles() {
            return {
                moreBtnStyle: {
                    width: '86px',
                    marginBottom: '12px'
                }
            };
        }
    }, {
        key: 'render',
        value: function render() {
            var _this3 = this;

            var _props = this.props,
                className = _props.className,
                menu = _props.menu,
                style = _props.style,
                baseWidth = _props.baseWidth,
                baseStyle = _props.baseStyle,
                hideStyle = _props.hideStyle,
                collapsed = _props.collapsed;

            var _getStyles2 = this._getStyles(),
                moreBtnStyle = _getStyles2.moreBtnStyle;

            var _state = this.state,
                showNumber = _state.showNumber,
                moreVisible = _state.moreVisible;


            var baseStyleMap = (0, _extends3.default)({
                'boxSizing': 'border-box'
            }, baseStyle, {
                width: baseWidth
            });

            var showMenu = [],
                hideMenu = [],
                moreButton = null;
            var createMoreMenuContent = void 0;
            if (menu.length <= showNumber) {
                showMenu = menu.slice(0, showNumber);
            } else {
                //给更多留一个位置
                showMenu = menu.slice(0, showNumber - 1);
                hideMenu = menu.slice(showNumber - 1);

                //移动端
                if (this.isHorizontalPad) {
                    hideMenu = hideMenu.filter(function (item) {
                        return item.Name != 'Balance';
                    });
                }

                var lastRowLength = hideMenu.length % moreButtonColumns;
                //占位控制
                if (lastRowLength > 0) {
                    var occupyLength = moreButtonColumns - lastRowLength;
                    for (var i = 0; i < occupyLength; i++) {
                        hideMenu.push({});
                    }
                }

                var createMoreMenu = function createMoreMenu() {
                    var hideMenu = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
                    return _react2.default.createElement(
                        'div',
                        { className: 'overlayWrapped' },
                        hideMenu.map(function (item, index) {
                            var uiState = item.uiState;
                            if (item.Title) {
                                return _react2.default.createElement(
                                    _Button6.default,
                                    { key: index, className: 'action-btn', style: moreBtnStyle, type: 'default', onClick: function onClick() {
                                            _this3.moreClicks(item);
                                        } },
                                    item.Title
                                );
                            } else {
                                return _react2.default.createElement(
                                    _Button6.default,
                                    { key: index, className: 'action-btn', style: (0, _extends3.default)({}, moreBtnStyle, { visibility: 'hidden' }), type: 'default' },
                                    item.Title
                                );
                            }
                        })
                    );
                };

                createMoreMenuContent = createMoreMenu(hideMenu);

                moreButton = _react2.default.createElement(
                    _Popover3.default,
                    {
                        className: 'moreButtonPopover',
                        placement: 'topRight',
                        positionLeft: collapsed ? '40px' : '91px',
                        style: { width: '400px' },
                        content: createMoreMenuContent,
                        trigger: 'click',
                        id: 'leftBottom',
                        show: moreVisible,
                        onHide: this.moreHide },
                    _react2.default.createElement(
                        _Button6.default,
                        {
                            key: 'showMoreButton',
                            className: _tplusComponentsTouch.hotKey.hotKeyPart('B', 'action-btn'),
                            onClick: this.moreButtonClick,
                            style: baseStyleMap
                        },
                        '\u66F4\u591A'
                    )
                );
            }

            var commonButton = this.renderButtons(showMenu, baseStyleMap, this.clicks);

            return _react2.default.createElement(
                'div',
                { className: 'btn-container hide-dom-tokey', ref: function ref(dom) {
                        _this3.wraper = dom;
                    } },
                commonButton,
                moreButton,
                _react2.default.createElement(
                    'div',
                    { className: 'hide-dom-tokey-container' },
                    createMoreMenuContent
                )
            );
        }
    }]);
    return MenuButtons;
}(_react.Component), _class2.propTypes = {
    style: _propTypes.PropTypes.object, //显示区域样式
    baseStyle: _propTypes.PropTypes.object, //按钮样式
    hideStyle: _propTypes.PropTypes.object, //隐藏区域样式
    className: _propTypes.PropTypes.string, //组件name
    baseWidth: _propTypes.PropTypes.string //按钮基本宽度
}, _temp)) || _class;

exports.default = MenuButtons;
//# sourceMappingURL=menuButtons.js.map