modo-mobile/lib/number-keyboard/keyboard.js

A mobile UI toolkit, based on React

'use strict';

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

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 _react = require('react');

var React = _interopRequireWildcard(_react);

var _icon = require('../icon');

var _icon2 = _interopRequireDefault(_icon);

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }

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

var Keyboard = function (_React$PureComponent) {
    (0, _inherits3['default'])(Keyboard, _React$PureComponent);

    function Keyboard() {
        (0, _classCallCheck3['default'])(this, Keyboard);

        var _this = (0, _possibleConstructorReturn3['default'])(this, (Keyboard.__proto__ || Object.getPrototypeOf(Keyboard)).apply(this, arguments));

        _this.state = {
            baseStack: []
        };
        _this.orderKeyNumber = function () {
            var disorder = _this.props.disorder;

            var baseStack = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
            var keyNumberList = [];
            if (disorder) {
                var index = 0;
                while (index < 10) {
                    keyNumberList[index] = baseStack.splice(Math.floor(Math.random() * baseStack.length), 1)[0] || 0;
                    index++;
                }
            } else {
                keyNumberList = baseStack;
            }
            _this.setState({ baseStack: keyNumberList });
        };
        _this.onNumberClick = function (e, num) {
            e.nativeEvent.stopImmediatePropagation();
            var onEnter = _this.props.onEnter;

            if (onEnter) onEnter(num);
        };
        _this.onSlideDoneClick = function (e) {
            e.nativeEvent.stopImmediatePropagation();
            var onHide = _this.props.onHide;

            if (onHide) onHide();
        };
        _this.onDeleteClick = function (e) {
            e.nativeEvent.stopImmediatePropagation();
            var onDelete = _this.props.onDelete;

            if (onDelete) onDelete();
        };
        _this.onConfirmClick = function (e) {
            e.nativeEvent.stopImmediatePropagation();
            var onConfirm = _this.props.onConfirm;

            if (onConfirm) onConfirm();
        };
        return _this;
    }

    (0, _createClass3['default'])(Keyboard, [{
        key: 'componentDidMount',
        value: function componentDidMount() {
            this.orderKeyNumber();
        }
    }, {
        key: 'render',
        value: function render() {
            var _this2 = this;

            var _props = this.props,
                prefixCls = _props.prefixCls,
                type = _props.type,
                okText = _props.okText,
                hideDot = _props.hideDot;
            var baseStack = this.state.baseStack;

            var numberNode = baseStack.map(function (num, index) {
                return index !== 9 ? React.createElement(
                    'li',
                    { key: num, className: prefixCls + '-number-item', onClick: function onClick(e) {
                            return _this2.onNumberClick(e, num);
                        } },
                    num
                ) : null;
            });
            var numOperateNode = type === 'professional' ? React.createElement(
                React.Fragment,
                null,
                hideDot ? React.createElement('li', { className: prefixCls + '-number-item ' + prefixCls + '-number-item-no' }) : React.createElement(
                    'li',
                    { className: prefixCls + '-number-item', onClick: function onClick(e) {
                            return _this2.onNumberClick(e, '.');
                        } },
                    '.'
                ),
                React.createElement(
                    'li',
                    { className: prefixCls + '-number-item', onClick: function onClick(e) {
                            return _this2.onNumberClick(e, baseStack[9]);
                        } },
                    baseStack[9]
                ),
                React.createElement(
                    'li',
                    { className: prefixCls + '-number-item ' + prefixCls + '-number-item-slidedown', onClick: this.onSlideDoneClick },
                    React.createElement(_icon2['default'], { type: 'keyboard' })
                )
            ) : React.createElement(
                React.Fragment,
                null,
                React.createElement('li', { className: prefixCls + '-number-item ' + prefixCls + '-number-item-no' }),
                React.createElement(
                    'li',
                    { className: prefixCls + '-number-item', onClick: function onClick(e) {
                            return _this2.onNumberClick(e, baseStack[9]);
                        } },
                    baseStack[9]
                ),
                React.createElement(
                    'li',
                    { className: prefixCls + '-number-item ' + prefixCls + '-number-item-delete', onClick: this.onDeleteClick },
                    React.createElement(_icon2['default'], { type: 'backspace' })
                )
            );
            return React.createElement(
                'div',
                { className: prefixCls },
                React.createElement(
                    'div',
                    { className: prefixCls + '-number' },
                    React.createElement(
                        'ul',
                        { className: prefixCls + '-number-list' },
                        numberNode,
                        numOperateNode
                    )
                ),
                type === 'professional' ? React.createElement(
                    'div',
                    { className: prefixCls + '-operate' },
                    React.createElement(
                        'ul',
                        { className: prefixCls + '-operate-list' },
                        React.createElement(
                            'li',
                            { className: prefixCls + '-operate-item ' + prefixCls + '-operate-item-delete', onClick: this.onDeleteClick },
                            React.createElement(_icon2['default'], { type: 'backspace' })
                        ),
                        React.createElement(
                            'li',
                            { className: prefixCls + '-operate-item ' + prefixCls + '-operate-item-confirm', onClick: this.onConfirmClick },
                            okText
                        )
                    )
                ) : null
            );
        }
    }]);
    return Keyboard;
}(React.PureComponent);

exports['default'] = Keyboard;

Keyboard.defaultProps = {
    prefixCls: 'm-number-keyboard',
    type: 'professional',
    okText: '确定',
    disorder: false,
    hideDot: false
};
module.exports = exports['default'];