tplus-pos/dist/components/modalWraperPosTouch/guide/index.js

pos module

'use strict';

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

var _Checkbox2 = require('tinper-bee/dist/Checkbox');

var _Checkbox3 = _interopRequireDefault(_Checkbox2);

var _Radio4 = require('tinper-bee/dist/Radio');

var _Radio5 = _interopRequireDefault(_Radio4);

var _regenerator = require('babel-runtime/regenerator');

var _regenerator2 = _interopRequireDefault(_regenerator);

var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');

var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);

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 _dec, _class;

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

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _mutantsAppfx = require('mutants-appfx');

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

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

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

require('../textBox/style.less');

require('./style.less');

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

var t = _mutantsMicrofx.i18n.getFixedT(null, 'appfx');
var GuideModal = (_dec = (0, _mutantsAppfx.injectViewModel)('GuideModal'), _dec(_class = (0, _mutantsMicrofx.observer)(_class = function (_Component) {
    (0, _inherits3.default)(GuideModal, _Component);

    function GuideModal(props, context) {
        var _this2 = this;

        (0, _classCallCheck3.default)(this, GuideModal);

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

        _this.onSelect = function (v) {
            _this.setGuide(v);
        };

        _this.choiceChange = function (value) {
            _this.setChoice(value);
            var el = event && event.target;
            if (el) el.parentElement.firstChild.focus();
        };

        _this.autoCompleteClick = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee() {
            var checkStatus, searchValue;
            return _regenerator2.default.wrap(function _callee$(_context) {
                while (1) {
                    switch (_context.prev = _context.next) {
                        case 0:
                            checkStatus = _this.props.viewModel.checkStatus;
                            searchValue = _this.state.searchValue;

                            _this.searchGuide(searchValue, checkStatus);

                        case 3:
                        case 'end':
                            return _context.stop();
                    }
                }
            }, _callee, _this2);
        }));

        _this.onChange = function (v) {
            var checkStatus = _this.props.viewModel.checkStatus;

            _this.searchGuide(v, checkStatus);
            _this.selectIndex = -1;
            _this.setState({ searchValue: v });
        };

        _this.onOtherChange = function (status) {
            var searchValue = _this.state.searchValue;

            _this.searchGuide(searchValue, status);
            _this.setCheckStatus(status);
            _this.selectIndex = -1;
            setTimeout(function () {
                _this.downPanel.auto.input.input.focus();
            }, 0);
        };

        _this.ok = function () {
            var ok = _this.props.viewModel.ok;

            ok && ok();
            _this.selectIndex = -1;
            _this.setState({ searchValue: '' });
        };

        _this.cancel = function () {
            var cancel = _this.props.viewModel.cancel;

            cancel && cancel();
            _this.selectIndex = -1;
            _this.setState({ searchValue: '' });
        };

        _this.initData = function () {
            _this.searchGuide('');
        };

        _this.onRadioKeyDown = function (ev) {
            var key = ev && ev.keyCode;
            if (key == 38 || key == 40) {
                _this.onKeyDown(ev);
            }
            if (key == 37 || key == 38 || key == 39 || key == 40) {
                ev.stopPropagation(); //阻止事件冒泡,可阻止父类事件的发生
                ev.preventDefault(); //阻止默认行为
            }
        };

        _this.onKeyDown = function (ev) {
            var _this$props$viewModel = _this.props.viewModel,
                guides = _this$props$viewModel.guides,
                guide = _this$props$viewModel.guide;

            var selectIndex = guide && _this.selectIndex == -1 ? _this.selectIndex + 1 : _this.selectIndex;
            var key = ev && ev.keyCode;
            switch (key) {
                case 13:
                    if (ev && ev.target && ev.target.tagName == 'INPUT') {
                        _this.ok();
                    }
                    break;
                case 38:case 40:
                    var top = 0;
                    var rowHeight = 30;
                    var length = guides && guides.length;
                    var downPanel = _this.downPanel.auto.input.input.parentElement.parentElement.childNodes[1];
                    if (!length) return;
                    if (key == 38) {
                        selectIndex = selectIndex <= 0 ? selectIndex : selectIndex - 1; //上
                        top = downPanel.childNodes[selectIndex].offsetTop - downPanel.scrollTop < rowHeight ? downPanel.scrollTop - rowHeight : downPanel.scrollTop;
                    }
                    if (key == 40) {
                        selectIndex = selectIndex >= length - 1 ? selectIndex : selectIndex + 1; //下
                        top = downPanel.childNodes[selectIndex].offsetTop > 150 ? downPanel.scrollTop + rowHeight : downPanel.scrollTop;
                    }
                    downPanel.scrollTop = top;
                    var item = guides[selectIndex];
                    _this.setGuide(item);
                    _this.selectIndex = selectIndex;
                    if (selectIndex == 0) {
                        _this.downPanel.auto.input.input.focus();
                    }
                    break;
            }
        };

        var _ref2 = _this.props.viewModel || {},
            searchGuide = _ref2.searchGuide,
            setGuide = _ref2.setGuide,
            setChoice = _ref2.setChoice,
            setCheckStatus = _ref2.setCheckStatus;

        _this.searchGuide = searchGuide;
        _this.setGuide = setGuide;
        _this.setChoice = setChoice;
        _this.setCheckStatus = setCheckStatus;
        _this.selectIndex = -1;
        _this.state = {
            searchValue: ''
        };
        return _this;
    }

    (0, _createClass3.default)(GuideModal, [{
        key: 'render',
        value: function render() {
            var _this3 = this;

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

            console.log(' this.props.viewModel==============', this.props.viewModel);
            var _props$viewModel = this.props.viewModel,
                visible = _props$viewModel.visible,
                guides = _props$viewModel.guides,
                choice = _props$viewModel.choice,
                cancel = _props$viewModel.cancel,
                guide = _props$viewModel.guide;

            var options = (guides || []).map(function (item) {
                var className = '';
                if (guide.ID === item.ID) {
                    className = 'guide-focus';
                }
                return _react2.default.createElement(
                    _tplusComponentsTouch.AutoCompleteWithKeyboard.Option,
                    { className: className, value: item, showValue: item.Name, key: item.Code },
                    _react2.default.createElement(
                        'span',
                        { className: 'guide-item' },
                        '(' + item.Code + ')' + item.Name
                    )
                );
            });
            var voucherDefaultPosMode = _mutantsMicrofx.localStore && _mutantsMicrofx.localStore.get('voucherDefaultPosMode') || 'touch';
            return _react2.default.createElement(
                _tplusComponentsTouch.ModalWraper,
                {
                    show: visible,
                    animation: true,
                    className: 'guide-modal',
                    modalType: 'mid',
                    title: t('导购员'),
                    cancel: this.cancel,
                    ok: this.ok,
                    onEnter: this.initData,
                    exclueBoard: true
                },
                _react2.default.createElement(
                    'div',
                    { className: _tplusComponentsTouch.hotKey.hotKeyBindClass('6', 'guide-content-out'), onKeyDown: this.onKeyDown, tabIndex: 1 },
                    _react2.default.createElement(
                        'div',
                        { className: 'guide-content' },
                        _react2.default.createElement(
                            _Radio5.default.RadioGroup,
                            {
                                className: 'radio-group',
                                name: 'rangeChoice',
                                selectedValue: choice,
                                onChange: this.choiceChange,
                                onKeyDown: this.onRadioKeyDown
                            },
                            _react2.default.createElement(
                                _Radio5.default,
                                { className: 'radio', value: 'all' },
                                '\u6574\u5355\u5BFC\u8D2D'
                            ),
                            _react2.default.createElement(
                                _Radio5.default,
                                { className: 'radio', value: 'single' },
                                '\u5F53\u524D\u884C\u5546\u54C1\u5BFC\u8D2D'
                            )
                        ),
                        _react2.default.createElement(
                            'div',
                            { className: 'guide-select' },
                            _react2.default.createElement(
                                _tplusComponentsTouch.AutoCompleteWithKeyboard,
                                {
                                    ref: function ref(el) {
                                        return _this3.downPanel = el;
                                    },
                                    placeholder: t('请输入导购员名称'),
                                    showDropDownPanel: true,
                                    onSelect: this.onSelect,
                                    onClick: this.autoCompleteClick,
                                    onChange: this.onChange,
                                    className: 'guide-select-input',
                                    style: { width: '270px' },
                                    maxHeight: voucherDefaultPosMode == 'voucher' ? '166px' : '195px'
                                },
                                options
                            ),
                            _react2.default.createElement(
                                _Checkbox3.default,
                                { className: 'guide-checkbox', onChange: this.onOtherChange },
                                '\u4ED6\u5E97'
                            )
                        )
                    ),
                    voucherDefaultPosMode == 'voucher' && !isHorizontalPad ? _react2.default.createElement(
                        'div',
                        { className: 'guide-voucher-footer' },
                        '\u2193\u2191\u65B9\u5411\u952E\uFF1A\u9009\u62E9\u5BFC\u8D2D\u3001F5\uFF1A\u6574\u5355\u3001F6\uFF1A\u5F53\u524D\u884C\u3001F7\uFF1A\u4ED6\u5E97'
                    ) : null
                )
            );
        }
    }]);
    return GuideModal;
}(_react.Component)) || _class) || _class);
exports.default = GuideModal;
//# sourceMappingURL=index.js.map