dareway-rui/build/taglib/grid/numberColumn/bodyCell/EditInput.js

'use strict';

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

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

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 _assertThisInitialized2 = _interopRequireDefault(require('@babel/runtime/helpers/assertThisInitialized'));

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

var _defineProperty2 = _interopRequireDefault(require('@babel/runtime/helpers/defineProperty'));

var _typeof2 = _interopRequireDefault(require('@babel/runtime/helpers/typeof'));

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

var _antd = require('antd');

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

var _deleteInValidMaskChar = _interopRequireDefault(require('../../../mask/number/deleteInValidMaskChar'));

var _uuid = _interopRequireDefault(require('../../../../util/uuid'));

var _FrameConstants = require('../../../../constants/FrameConstants');

var _dataNormalizeHelper = require('../../../../taglib/form/dataNormalizeHelper');

var _StringUtil = _interopRequireDefault(require('../../../../util/StringUtil'));

var _generator = require('../../utils/generator');

function genInitState(value, nullable, zeroDisplayAs0, mask, maxLength) {
    if (value != null && typeof value !== 'number') {
        throw new Error(
            'NumberColumnTag -> genInitState, \u5165\u53C2 value \u53EA\u63A5\u53D7\u3010null\u3001number\u3011\u7C7B\u578B\uFF0C\u5F53\u524D\u4F20\u5165\u3010'
                .concat(value, ':')
                .concat((0, _typeof2.default)(value), '\u3011\uFF0C\u8BF7\u68C0\u67E5\uFF01')
        );
    }

    if (value == null || value === '') {
        if (nullable) {
            return {
                value: null,
                visualValue: ''
            };
        }
    }

    var visualValue = (0, _dataNormalizeHelper.formatNumber)(value, nullable, zeroDisplayAs0, mask, maxLength);
    return {
        value: value,
        // 真正的 number 类型 value，
        visualValue: visualValue // 显示在 input 组件中的展示值
    };
}

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

        function EditInput(props) {
            var _this;

            (0, _classCallCheck2.default)(this, EditInput);
            _this = (0, _possibleConstructorReturn2.default)(
                this,
                (0, _getPrototypeOf2.default)(EditInput).call(this, props)
            );
            (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'handleBlur', function(event) {
                var _this$props = _this.props,
                    onBlur = _this$props.onBlur,
                    name = _this$props.name,
                    rowNum = _this$props.rowNum,
                    syncCellValue = _this$props.syncCellValue;
                var value = _this.state.value; // 同步 model 数据

                syncCellValue(rowNum, name, value); // 触发 blur 事件

                if (onBlur) {
                    onBlur(value);
                }
            });
            (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'handleChange', function(event) {
                var _this$props2 = _this.props,
                    mask = _this$props2.mask,
                    zeroDisplayAs0 = _this$props2.zeroDisplayAs0,
                    maxLength = _this$props2.maxLength,
                    nullable = _this$props2.nullable;
                var rawValue = event.target.value; // 录入框中的原始值

                rawValue = _StringUtil.default.trim(rawValue); // 避免用户录入进去一堆空格

                var visualValue;
                var maskedValue;
                var value;

                if (rawValue === '' && nullable) {
                    visualValue = '';
                    maskedValue = '';
                    value = null;
                } else {
                    visualValue = (0, _deleteInValidMaskChar.default)(rawValue, mask, maxLength);
                    maskedValue = (0, _dataNormalizeHelper.formatNumber)(
                        (0, _dataNormalizeHelper.stringToNumber)(visualValue),
                        nullable,
                        zeroDisplayAs0,
                        mask,
                        maxLength
                    );
                    value = (0, _dataNormalizeHelper.stringToNumber)(maskedValue);
                }

                _this.setState({
                    value: value,
                    visualValue: visualValue
                });
            });
            (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'handleKeyDown', function(
                event
            ) {
                var key = event.which;

                if (
                    key === _FrameConstants.KEY_CODE.ENTER ||
                    key === _FrameConstants.KEY_CODE.TAB ||
                    key === _FrameConstants.KEY_CODE.DOWNARROW ||
                    key === _FrameConstants.KEY_CODE.UPARROW
                ) {
                    _this.handleBlur();
                }

                var onKeyDown = _this.props.onKeyDown;

                if (onKeyDown) {
                    onKeyDown(event);
                }
            });
            (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'selectValue', function(
                realValue
            ) {
                var end = realValue.length <= 0 ? 0 : realValue.length;
                var ele = document.getElementById(_this.domId); // 选中全部

                if (!end) {
                    return;
                }

                ele.setSelectionRange(0, end);
            });
            (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'handleFocus', function(event) {
                //获取焦点后，输入框显示真正的数据，并全部选中
                var mask = _this.props.mask;

                if (mask.indexOf('%') === -1) {
                    _this.setState(
                        function() {
                            return null;
                        },
                        function() {
                            _this.selectValue(_this.state.visualValue);
                        }
                    );
                } else {
                    //value中最后一位一定是%，不选中%
                    _this.setState(
                        function() {
                            return null;
                        },
                        function() {
                            _this.selectValue(_this.state.visualValue.slice(0, -1));
                        }
                    );
                }
            });
            var _this$props3 = _this.props,
                _value = _this$props3.value,
                _mask = _this$props3.mask,
                _maxLength = _this$props3.maxLength,
                _zeroDisplayAs = _this$props3.zeroDisplayAs0,
                _nullable = _this$props3.nullable;
            _this.state = genInitState(_value, _nullable, _zeroDisplayAs, _mask, _maxLength);
            _this.inputRef = _react.default.createRef();
            _this.domId = 'numberColumn_' + (0, _uuid.default)();
            return _this;
        }

        (0, _createClass2.default)(EditInput, [
            {
                key: 'componentDidMount',
                value: function componentDidMount() {
                    this.inputRef.current.focus();
                }
            },
            {
                key: 'render',
                value: function render() {
                    var _this$props4 = this.props,
                        name = _this$props4.name,
                        bodyAlign = _this$props4.bodyAlign,
                        bodyFontColor = _this$props4.bodyFontColor,
                        bodyBold = _this$props4.bodyBold,
                        bodyOblique = _this$props4.bodyOblique,
                        bodyStyleFilter = _this$props4.bodyStyleFilter;
                    var style = (0, _generator.generateEditCellStyle)({});

                    if (bodyAlign) {
                        style['textAlign'] = bodyAlign;
                    }

                    if (bodyFontColor) {
                        style['color'] = bodyFontColor;
                    }

                    if (bodyBold) {
                        style['fontWeight'] = 'bold';
                    }

                    if (bodyOblique) {
                        style['fontStyle'] = 'oblique';
                    }

                    if (bodyStyleFilter) {
                        var extraStyles = bodyStyleFilter((0, _defineProperty2.default)({}, name, this.state.value));

                        if (extraStyles) {
                            if (extraStyles.color) {
                                style['color'] = extraStyles.color;
                            }

                            if (extraStyles.bold) {
                                style['fontWeight'] = 'bold';
                            }

                            if (extraStyles.oblique) {
                                style['fontStyle'] = 'oblique';
                            }
                        }
                    }

                    return _react.default.createElement(
                        'div',
                        null,
                        _react.default.createElement(_antd.Input, {
                            type: 'text',
                            style: style,
                            id: this.domId,
                            ref: this.inputRef,
                            value: this.state.visualValue,
                            onKeyDown: this.handleKeyDown,
                            onFocus: this.handleFocus,
                            onChange: this.handleChange,
                            onBlur: this.handleBlur
                        })
                    );
                }
            }
        ]);
        return EditInput;
    })(_react.default.PureComponent);

exports.default = EditInput;
(0, _defineProperty2.default)(EditInput, 'propTypes', {
    name: _propTypes.default.string,
    value: _propTypes.default.number,
    rowNum: _propTypes.default.number,
    mask: _propTypes.default.string,
    maxLength: _propTypes.default.number,
    zeroDisplayAs0: _propTypes.default.bool,
    bodyAlign: _propTypes.default.string,
    bodyBold: _propTypes.default.bool,
    bodyFontColor: _propTypes.default.string,
    bodyOblique: _propTypes.default.bool,
    bodyStyleFilter: _propTypes.default.func,
    onBlur: _propTypes.default.func,
    onKeyDown: _propTypes.default.func,
    syncCellValue: _propTypes.default.func
});

//@ sourceMappingURL=EditInput.js.map