dareway-rui/build/taglib/grid/dateColumn/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 _react = _interopRequireDefault(require('react'));

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

var _antd = require('antd');

var _util = require('../../../../util');

var _DateMask = require('../../../mask/date/DateMask');

var _date = require('../../../mask/date');

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

var _moment = _interopRequireDefault(require('moment'));

var _DatePicker = _interopRequireDefault(require('../../../DatePicker'));

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

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), 'setCurrentEditing', function() {
                var _this$props = _this.props,
                    setCurrentEditColName = _this$props.setCurrentEditColName,
                    name = _this$props.name;
                setCurrentEditColName(name);
            });
            (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'checkValid', function() {
                try {
                    var mask = _this.props.mask;
                    (0, _DateMask.validDateTime)(mask, _this.state.value);
                } catch (ex) {
                    _util.MsgBox.error(ex.message);

                    _this.setState({
                        cursorPos: 0
                    });

                    _this.setCurrentEditing();

                    return false;
                }

                return true;
            });
            (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'handleBlur', function(event) {
                var result = _this.checkValid();

                if (!result) {
                    return;
                }

                _this.setState({
                    cursorPos: -1
                }); // 同步 model 数据

                var _this$props2 = _this.props,
                    mask = _this$props2.mask,
                    sourceMask = _this$props2.sourceMask;
                var _this$props3 = _this.props,
                    name = _this$props3.name,
                    rowNum = _this$props3.rowNum,
                    syncCellValue = _this$props3.syncCellValue;
                var maskedValue = _this.state.value;
                var newValue = null;

                if (!(0, _DateMask.isEmptyDate)(mask, maskedValue)) {
                    newValue = (0, _date.normalizeDate)(maskedValue, mask, mask);
                } else {
                    newValue = null;
                }

                syncCellValue(rowNum, name, newValue); // 触发 onBlur

                var _this$props4 = _this.props,
                    oldValue = _this$props4.value,
                    onBlur = _this$props4.onBlur;

                if (onBlur) {
                    onBlur(newValue, oldValue);
                }
            });
            (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'handleChange', function(event) {
                var oldValue = _this.state.value;
                var newValue = event.target.value;
                var ele = document.getElementById(_this.domId);
                var cursorPosAfterChange = ele.selectionStart;
                var mask = _this.props.mask;
                var data = (0, _DateMask.normalizeInput)(mask, oldValue, newValue, cursorPosAfterChange);

                if (data) {
                    var value = data.value,
                        cursorPos = data.cursorPos;

                    _this.setState({
                        value: value,
                        cursorPos: cursorPos
                    });
                }
            });
            (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'moveCursor', function() {
                var cursorPos = _this.state.cursorPos;

                if (cursorPos === -1) {
                    return;
                }

                var ele = document.getElementById(_this.domId);
                (0, _DateMask.setCursor)(ele, cursorPos);
            });
            (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'handleKeyDown', function(
                event
            ) {
                var key = event.which;

                if (
                    key === _FrameConstants.KEY_CODE.TAB ||
                    key === _FrameConstants.KEY_CODE.ENTER ||
                    key === _FrameConstants.KEY_CODE.UPARROW ||
                    key === _FrameConstants.KEY_CODE.DOWNARROW
                ) {
                    var result = _this.checkValid();

                    if (!result) {
                        return;
                    }

                    _this.handleBlur();
                }

                var onKeyDown = _this.props.onKeyDown;

                if (onKeyDown) {
                    onKeyDown(event);
                }
            });
            (0, _defineProperty2.default)(
                (0, _assertThisInitialized2.default)(_this),
                'handleDatePickerPosition',
                function(open) {
                    setTimeout(function() {
                        var datePickerDom = document.querySelector('.ant-calendar-picker-container');

                        if (datePickerDom) {
                            var datePickerClassName = datePickerDom.className;

                            if (
                                datePickerClassName.indexOf('ant-calendar-picker-container-placement-bottomLeft') === -1
                            ) {
                                _this.setState({
                                    placement: 'topLeft'
                                });
                            }
                        }
                    }, 0);
                }
            );
            (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'handleFocus', function() {
                var mask = _this.props.mask;

                if (!_this.state.value) {
                    _this.setState({
                        value: (0, _DateMask.formatDateTime)(mask),
                        cursorPos: 0
                    });
                }
            });
            (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'handleClick', function(event) {
                var ele = _this.inputRef.current;
                var cursorPos = ele.selectionStart; // 鼠标点击的时候，弹出日历选择框；

                _this.setState(function(prevStatus) {
                    if (prevStatus.calendarOpenState === true) {
                        return null;
                    }

                    return {
                        calendarOpenState: true,
                        cursorPos: cursorPos
                    };
                });

                _this.handleDatePickerPosition();
            });
            (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'onIconClick', function() {
                _this.handleClick();

                _this.inputRef.current.focus();
            });
            (0, _defineProperty2.default)(
                (0, _assertThisInitialized2.default)(_this),
                'handleCalendarDateChange',
                function(m) {
                    var _this$props5 = _this.props,
                        mask = _this$props5.mask,
                        sourceMask = _this$props5.sourceMask;
                    var momentStr = m.format('YYYYMMDDHHmmss');

                    var dateValue = _util.DateUtil.stringToDate(
                        momentStr,
                        _FrameConstants.DAREWAY_STANDARD_DATETIME_TRANSFORM_FORMAT
                    );

                    var maskedValue = (0, _date.getMaskedValue)(dateValue, mask, sourceMask);

                    _this.setState({
                        value: maskedValue,
                        calendarOpenState: false // 选择日期后，关闭日历组件,
                    });
                }
            );
            (0, _defineProperty2.default)(
                (0, _assertThisInitialized2.default)(_this),
                'handleCalendarTimeChange',
                function(m) {
                    var _this$props6 = _this.props,
                        mask = _this$props6.mask,
                        sourceMask = _this$props6.sourceMask;
                    var momentStr = m.format('YYYYMMDDHHmmss');

                    var dateValue = _util.DateUtil.stringToDate(
                        momentStr,
                        _FrameConstants.DAREWAY_STANDARD_DATETIME_TRANSFORM_FORMAT
                    );

                    var maskedValue = (0, _date.getMaskedValue)(dateValue, mask, sourceMask);

                    _this.setState({
                        value: maskedValue
                    });
                }
            );
            var _this$props7 = _this.props,
                _mask = _this$props7.mask,
                _sourceMask = _this$props7.sourceMask,
                _value = _this$props7.value,
                defaultCalendarOpen = _this$props7.defaultCalendarOpen;
            _this.state = {
                value: (0, _date.getMaskedValue)(_value, _mask, _sourceMask),
                calendarOpenState: defaultCalendarOpen,
                cursorPos: 0,
                placement: 'bottomLeft'
            };
            _this.inputRef = _react.default.createRef();
            _this.domId = 'DateColumn' + (0, _util.uuid)();
            return _this;
        }

        (0, _createClass2.default)(EditInput, [
            {
                key: 'componentDidMount',
                value: function componentDidMount() {
                    this.moveCursor();
                    this.handleDatePickerPosition();
                }
            },
            {
                key: 'componentDidUpdate',
                value: function componentDidUpdate(prevProps, prevState, snapshot) {
                    this.moveCursor();
                }
            },
            {
                key: 'componentWillUnmount',
                value: function componentWillUnmount() {
                    if (this.props.handleWhenDestory) {
                        this.props.handleWhenDestory();
                    }
                }
            },
            {
                key: 'render',
                value: function render() {
                    var _this$props8 = this.props,
                        name = _this$props8.name,
                        bodyAlign = _this$props8.bodyAlign,
                        bodyFontColor = _this$props8.bodyFontColor,
                        bodyBold = _this$props8.bodyBold,
                        bodyOblique = _this$props8.bodyOblique,
                        bodyStyleFilter = _this$props8.bodyStyleFilter,
                        width = _this$props8.width,
                        mask = _this$props8.mask;
                    var _this$state = this.state,
                        value = _this$state.value,
                        calendarOpenState = _this$state.calendarOpenState;
                    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';
                    } // TODO 由于 Date 在录入过程中可能存在非法值，所以不提供给业务过滤功能；
                    // if (bodyStyleFilter) {
                    //     const extraStyles = bodyStyleFilter({ [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(
                            'div',
                            {
                                style: {
                                    position: 'relative'
                                }
                            },
                            _react.default.createElement(_antd.Input, {
                                type: 'text',
                                style: style,
                                id: this.domId,
                                key: this.domId,
                                ref: this.inputRef,
                                value: value,
                                onKeyDown: this.handleKeyDown,
                                onChange: this.handleChange,
                                onBlur: this.handleBlur,
                                onClick: this.handleClick,
                                onFocus: this.handleFocus
                            }),
                            _react.default.createElement(_DatePicker.default, {
                                disabled: false,
                                showToday: true,
                                isForGrid: true,
                                open: calendarOpenState,
                                placement: this.state.placement,
                                value:
                                    value && (0, _moment.default)(value).isValid()
                                        ? (0, _moment.default)(value)
                                        : undefined,
                                showTime:
                                    mask.indexOf('hh') > -1 || mask.indexOf('mm') > -1 || mask.indexOf('ss') > -1
                                        ? true
                                        : false,
                                forceRender: true,
                                onDateChange: this.handleCalendarDateChange,
                                onTimeChange: this.handleCalendarTimeChange,
                                onOpenChange: this.handleDatePickerPosition,
                                onOk: this.handleCalendarDateChange,
                                onIconClick: this.onIconClick
                            })
                        )
                    );
                }
            }
        ]);
        return EditInput;
    })(_react.default.PureComponent);

exports.default = EditInput;
(0, _defineProperty2.default)(EditInput, 'propTypes', {
    name: _propTypes.default.string,
    value: _propTypes.default.object,
    rowNum: _propTypes.default.number,
    mask: _propTypes.default.string,
    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,
    setCurrentEditColName: _propTypes.default.func,
    width: _propTypes.default.number,
    defaultCalendarOpen: _propTypes.default.bool,
    handleWhenDestory: _propTypes.default.func,
    //DatePicker的事件
    onDateChange: _propTypes.default.func,
    onTimeChange: _propTypes.default.func,
    onCalendarOk: _propTypes.default.func,
    onIconClick: _propTypes.default.func
});

//@ sourceMappingURL=EditInput.js.map