dareway-rui/build/taglib/grid/lovColumn/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 _antd = require('antd');

var _ruiIcon = _interopRequireDefault(require('rui-icon'));

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

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

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

var Search = _antd.Input.Search;

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), 'syncData', function() {
                var _this$props = _this.props,
                    maxLength = _this$props.maxLength,
                    name = _this$props.name,
                    rowNum = _this$props.rowNum,
                    syncCellValue = _this$props.syncCellValue,
                    onBlur = _this$props.onBlur; // 限制 maxlength

                var newValue = (0, _util.filterValueByMaxLength)(_this.state.value, maxLength); // 同步 model 数据

                syncCellValue(rowNum, name, newValue);
                return newValue;
            });
            (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'handleBlur', function(event) {
                var newValue = _this.syncData();

                var onBlur = _this.props.onBlur;

                if (onBlur) {
                    onBlur(newValue);
                }
            });
            (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'handleChange', function(event) {
                var maxLength = _this.props.maxLength;
                var newValue = (0, _util.filterValueByMaxLength)(event.target.value, maxLength); //设置UI显示的内容

                _this.setState({
                    value: newValue
                });
            });
            (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'handleOnSearch', function(
                value,
                event
            ) {
                _this.syncData(); //同步数据

                var lovJS = _this.props.lovJS; // 触发lovJS

                if (lovJS && _this.isTriggerOnSearch()) {
                    // this.endEdit();
                    lovJS();
                }
            });
            (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'isTriggerOnSearch', function() {
                if (_this.props.value !== _this.state.value || _this.state.value === '') {
                    return true;
                }

                return false;
            });
            (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'handleKeyDown', function(
                event
            ) {
                var key = event.which;

                if (key === _FrameConstants.KEY_CODE.ENTER && _this.isTriggerOnSearch()) {
                    return;
                }

                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);
                }
            });
            var value = _this.props.value;
            _this.state = {
                value: value
            };
            _this.inputRef = _react.default.createRef();
            return _this;
        }

        (0, _createClass2.default)(EditInput, [
            {
                key: 'componentWillReceiveProps',
                value: function componentWillReceiveProps(newProps) {
                    if (newProps.value !== this.state.value) {
                        this.setState({
                            value: newProps.value
                        });
                    }
                }
            },
            {
                key: 'componentDidMount',
                value: function componentDidMount() {
                    this.inputRef.current.focus();
                }
            },
            {
                key: 'componentDidUpdate',
                value: function componentDidUpdate(prevProps, prevState, snapshot) {
                    this.inputRef.current.focus();
                }
            },
            {
                key: 'render',
                value: function render() {
                    var _this$props2 = this.props,
                        name = _this$props2.name,
                        bodyAlign = _this$props2.bodyAlign,
                        bodyFontColor = _this$props2.bodyFontColor,
                        bodyBold = _this$props2.bodyBold,
                        bodyOblique = _this$props2.bodyOblique,
                        bodyStyleFilter = _this$props2.bodyStyleFilter; // TODO 这里需要注意，Antd 的 Search 组件，目前不支持配置 style 样式；

                    var style = {};

                    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(Search, {
                            ref: this.inputRef,
                            value: this.state.value,
                            enterButton: _react.default.createElement(_ruiIcon.default, {
                                type: 'search'
                            }),
                            onSearch: this.handleOnSearch,
                            onChange: this.handleChange,
                            onKeyDown: this.handleKeyDown,
                            onBlur: this.handleBlur
                        })
                    );
                }
            }
        ]);
        return EditInput;
    })(_react.default.PureComponent);

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

//@ sourceMappingURL=EditInput.js.map