dlt-for-react 1.0.2 → 1.0.3

package/lib/components/KyInputPicker/setting-input.js

@@ -0,0 +1,555 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _input = require('antd/lib/input');
+
+var _input2 = _interopRequireDefault(_input);
+
+var _inputNumber = require('antd/lib/input-number');
+
+var _inputNumber2 = _interopRequireDefault(_inputNumber);
+
+var _row = require('antd/lib/row');
+
+var _row2 = _interopRequireDefault(_row);
+
+var _col = require('antd/lib/col');
+
+var _col2 = _interopRequireDefault(_col);
+
+var _select = require('antd/lib/select');
+
+var _select2 = _interopRequireDefault(_select);
+
+var _message2 = require('antd/lib/message');
+
+var _message3 = _interopRequireDefault(_message2);
+
+var _stringify = require('babel-runtime/core-js/json/stringify');
+
+var _stringify2 = _interopRequireDefault(_stringify);
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+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 _radio = require('antd/lib/radio');
+
+var _radio2 = _interopRequireDefault(_radio);
+
+require('antd/lib/input/style');
+
+require('antd/lib/input-number/style');
+
+require('antd/lib/row/style');
+
+require('antd/lib/col/style');
+
+require('antd/lib/select/style');
+
+require('antd/lib/message/style');
+
+require('antd/lib/radio/style');
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _inputConst = require('./input-const');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var RadioGroup = _radio2.default.Group;
+
+//最小宽度
+var minWidth = 1;
+
+/**
+ * 单行文本输入控件配置组件
+ * Author: zengxiangkai@ly-sky.com
+ * Created on: 2018-02-05 19:21:51
+ * Version: 1.0
+ * Modify log:
+ * 2019-03-21：1、增加validationValueType表单校验值类型属性
+ */
+
+var SettingInput = function (_React$Component) {
+    (0, _inherits3.default)(SettingInput, _React$Component);
+
+    function SettingInput(props) {
+        (0, _classCallCheck3.default)(this, SettingInput);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (SettingInput.__proto__ || (0, _getPrototypeOf2.default)(SettingInput)).call(this, props));
+
+        _this.getFeature = function () {
+            return _this.state.feature;
+        };
+
+        _this.handleWidthRadioChange = function (e) {
+            var widthType = e.target.value;
+
+            var fp = (0, _extends3.default)({}, _this.state.featureParams);
+            fp.widthType = widthType;
+            fp.widthStr = '';
+
+            _this.setState({ width: '', featureParams: fp });
+            _this.createFeature(fp);
+        };
+
+        _this.handleWidthChange = function (value) {
+            var widthStr = void 0;
+            var widthType = _this.state.featureParams.widthType;
+
+            if (widthType == _inputConst.WidthType.RELATIVE) {
+                widthStr = value + '%';
+            } else if (widthType == _inputConst.WidthType.FIXED) {
+                widthStr = value + 'px';
+            } else {
+                widthStr = '';
+            }
+
+            var fp = (0, _extends3.default)({}, _this.state.featureParams);
+            fp.widthStr = widthStr;
+
+            _this.setState({ width: value, featureParams: fp });
+            _this.createFeature(fp);
+        };
+
+        _this.handleRequiredRadioChange = function (e) {
+            var required = e.target.value;
+
+            var fp = (0, _extends3.default)({}, _this.state.featureParams);
+            fp.required = required;
+
+            _this.setState({ featureParams: fp });
+            _this.createFeature(fp);
+        };
+
+        _this.handleRegularChange = function (value) {
+            var fp = (0, _extends3.default)({}, _this.state.featureParams);
+            fp.patternTag = value;
+
+            _this.setState({ featureParams: fp });
+            _this.createFeature(fp);
+        };
+
+        _this.handlePlaceholderChange = function (e) {
+            var placeholder = e.target.value;
+            var fp = (0, _extends3.default)({}, _this.state.featureParams);
+            fp.placeholder = placeholder;
+            _this.setState({ featureParams: fp });
+            _this.createFeature(fp);
+        };
+
+        _this.handleDefaultValueChange = function (e) {
+            var defaultValue = e.target.value;
+            var fp = (0, _extends3.default)({}, _this.state.featureParams);
+            fp.defaultValue = defaultValue;
+            _this.setState({ featureParams: fp });
+            _this.createFeature(fp);
+        };
+
+        _this.createFeature = function (featureParams) {
+
+            try {
+                var feature = (0, _stringify2.default)(featureParams);
+                _this.setState({
+                    feature: feature
+                });
+                _this.props.onChange(feature);
+            } catch (e) {
+                console.log(e);
+                _message3.default.error('生成控件配置参数出错！');
+            }
+        };
+
+        _this.handleMaxLengthChange = function (value) {
+            _this.setState({ spanDisplay: 'none' });
+            //value为输入的值
+            var fp = (0, _extends3.default)({}, _this.state.featureParams);
+            if (parseInt(fp.minLength) >= parseInt(value)) {
+                _this.setState({ spanDisplay: 'block' });
+            }
+            fp.maxLength = value ? value : '';
+            _this.setState({ featureParams: fp });
+            _this.createFeature(fp);
+        };
+
+        _this.handleMinLengthChange = function (value) {
+            _this.setState({ spanDisplay: 'none' });
+            //value为输入的值
+            var fp = (0, _extends3.default)({}, _this.state.featureParams);
+
+            if (parseInt(fp.maxLength) <= parseInt(value)) {
+                _this.setState({ spanDisplay: 'block' });
+            }
+            fp.minLength = value ? value : '';
+            _this.setState({ featureParams: fp });
+            _this.createFeature(fp);
+        };
+
+        _this.state = {
+            feature: '', //原参数json字符串
+            width: minWidth, //设置的宽度值，初始为最小宽度值
+            featureParams: {
+                name: '单行文本输入组件',
+                type: _inputConst.InputType.INPUT, //控件类型，必须有此属性，用于渲染时期判断控件类型
+                widthType: _inputConst.WidthType.DEFAULT, //宽度类型：自适应'default'、百分比'relative'、固定值'fixed'
+                widthStr: '', //input宽度值
+                patternTag: '', //正则表达式标识
+                placeholder: '', //输入提示
+                required: false, //是否必须
+                defaultValue: '', //默认值
+                validationValueType: 'string',
+                maxLength: '', //输入字数最大值
+                minLength: 0 //输入字数最小值
+            },
+            spanDisplay: "none",
+            selectOptions: []
+        };
+        return _this;
+    }
+
+    (0, _createClass3.default)(SettingInput, [{
+        key: 'componentWillMount',
+
+
+        //在渲染前调用,可在此最后一次初始化组件状态
+        value: function componentWillMount() {
+            //将输入控件配置参数设置到状态中
+            if (this.props.initFeature) {
+                try {
+                    var initFeature = JSON.parse(this.props.initFeature);
+                    if (initFeature.type == _inputConst.InputType.INPUT) {
+                        var widthType = initFeature.widthType,
+                            _initFeature$widthStr = initFeature.widthStr,
+                            widthStr = _initFeature$widthStr === undefined ? '' : _initFeature$widthStr,
+                            _initFeature$patternT = initFeature.patternTag,
+                            patternTag = _initFeature$patternT === undefined ? '' : _initFeature$patternT,
+                            _initFeature$placehol = initFeature.placeholder,
+                            placeholder = _initFeature$placehol === undefined ? '' : _initFeature$placehol,
+                            _initFeature$required = initFeature.required,
+                            required = _initFeature$required === undefined ? false : _initFeature$required,
+                            _initFeature$defaultV = initFeature.defaultValue,
+                            defaultValue = _initFeature$defaultV === undefined ? '' : _initFeature$defaultV,
+                            _initFeature$maxLengt = initFeature.maxLength,
+                            maxLength = _initFeature$maxLengt === undefined ? '' : _initFeature$maxLengt;
+
+                        var width = '';
+
+                        if (widthType == _inputConst.WidthType.RELATIVE) {
+                            width = widthStr.replace('%', '');
+                        } else if (widthType == _inputConst.WidthType.FIXED) {
+                            width = widthStr.replace('px', '');
+                        }
+                        var fp = (0, _extends3.default)({}, this.state.featureParams);
+                        fp.widthType = widthType;
+                        fp.widthStr = widthStr;
+                        fp.patternTag = patternTag;
+                        fp.placeholder = placeholder;
+                        fp.required = required;
+                        fp.defaultValue = defaultValue;
+                        fp.maxLength = maxLength;
+                        this.setState({
+                            feature: this.props.initFeature,
+                            width: width,
+                            featureParams: fp
+                        });
+                    }
+                } catch (e) {
+                    console.log(e);
+                    _message3.default.error('解析控件配置参数出错！');
+                }
+            } else {
+                try {
+                    var feature = (0, _stringify2.default)(this.state.featureParams);
+                    this.setState({
+                        feature: feature
+                    });
+                } catch (e) {
+                    console.log(e);
+                    _message3.default.error('生成控件配置参数出错！');
+                }
+            }
+            var Option = _select2.default.Option;
+            //构建正则表达式下拉数据
+            var selectOptions = [_react2.default.createElement(
+                Option,
+                { key: -1, value: '' },
+                '\u8BF7\u9009\u62E9...'
+            )];
+            for (var key in _inputConst.RegularExpression) {
+                var option = _react2.default.createElement(
+                    Option,
+                    { key: key, value: key },
+                    _inputConst.RegularExpression[key].describe
+                );
+                selectOptions.push(option);
+            }
+            this.setState({ selectOptions: selectOptions });
+        }
+
+        //供父组件获取feature
+
+
+        //切换宽度类型radio时回调，清空之前的值
+
+
+        //宽度值改变的时候，同步更新状态参数
+
+
+        //是否必填
+
+
+        //当选中正则表达式改变后
+
+
+        //当输入的提示信息改变时
+
+
+        //当输入默认值改变时
+
+
+        //生成feature参数json字符串
+
+
+        //字数最大值限制
+
+        //字数最小值限制
+
+    }, {
+        key: 'render',
+        value: function render() {
+
+            var width = this.state.width;
+            var _state$featureParams = this.state.featureParams,
+                widthType = _state$featureParams.widthType,
+                patternTag = _state$featureParams.patternTag,
+                placeholder = _state$featureParams.placeholder,
+                required = _state$featureParams.required,
+                defaultValue = _state$featureParams.defaultValue,
+                maxLength = _state$featureParams.maxLength,
+                minLength = _state$featureParams.minLength;
+
+
+            return _react2.default.createElement(
+                'div',
+                { id: 'input-setting-div' },
+                _react2.default.createElement(
+                    _row2.default,
+                    { type: 'flex' },
+                    _react2.default.createElement(
+                        _col2.default,
+                        null,
+                        _react2.default.createElement(
+                            'div',
+                            { style: { margin: "16px 0" } },
+                            '\u5BBD\u5EA6'
+                        )
+                    )
+                ),
+                _react2.default.createElement(
+                    _row2.default,
+                    { type: 'flex' },
+                    _react2.default.createElement(
+                        _col2.default,
+                        null,
+                        _react2.default.createElement(
+                            RadioGroup,
+                            { onChange: this.handleWidthRadioChange, name: 'widthradiogroup',
+                                value: widthType },
+                            _react2.default.createElement(
+                                _radio2.default,
+                                { value: _inputConst.WidthType.DEFAULT },
+                                '\u81EA\u9002\u5E94'
+                            ),
+                            _react2.default.createElement(
+                                _radio2.default,
+                                { value: _inputConst.WidthType.RELATIVE },
+                                '\u767E\u5206\u6BD4'
+                            ),
+                            _react2.default.createElement(
+                                _radio2.default,
+                                { value: _inputConst.WidthType.FIXED },
+                                '\u56FA\u5B9A\u5BBD\u5EA6'
+                            )
+                        )
+                    ),
+                    _react2.default.createElement(
+                        _col2.default,
+                        null,
+                        widthType == _inputConst.WidthType.RELATIVE ? _react2.default.createElement(_inputNumber2.default, { size: 'small',
+                            min: minWidth,
+                            formatter: function formatter(value) {
+                                return value + '%';
+                            },
+                            parser: function parser(value) {
+                                return value.replace('%', '');
+                            },
+                            onChange: this.handleWidthChange,
+                            value: width }) : widthType == _inputConst.WidthType.FIXED ? _react2.default.createElement(_inputNumber2.default, { size: 'small',
+                            min: minWidth,
+                            formatter: function formatter(value) {
+                                return value + 'px';
+                            },
+                            parser: function parser(value) {
+                                return value.replace('px', '');
+                            },
+                            onChange: this.handleWidthChange,
+                            value: width }) : null
+                    )
+                ),
+                _react2.default.createElement(
+                    _row2.default,
+                    { type: 'flex' },
+                    _react2.default.createElement(
+                        _col2.default,
+                        null,
+                        _react2.default.createElement(
+                            'div',
+                            { style: { margin: "16px 0" } },
+                            '\u662F\u5426\u5FC5\u586B'
+                        )
+                    )
+                ),
+                _react2.default.createElement(
+                    _row2.default,
+                    { type: 'flex' },
+                    _react2.default.createElement(
+                        _col2.default,
+                        null,
+                        _react2.default.createElement(
+                            RadioGroup,
+                            { onChange: this.handleRequiredRadioChange, name: 'requiredradiogroup',
+                                value: required },
+                            _react2.default.createElement(
+                                _radio2.default,
+                                { value: false },
+                                '\u975E\u5FC5\u586B'
+                            ),
+                            _react2.default.createElement(
+                                _radio2.default,
+                                { value: true },
+                                '\u5FC5\u586B'
+                            )
+                        )
+                    )
+                ),
+                _react2.default.createElement(
+                    _row2.default,
+                    { type: 'flex' },
+                    _react2.default.createElement(
+                        _col2.default,
+                        null,
+                        _react2.default.createElement(
+                            'div',
+                            { style: { margin: "16px 0" } },
+                            '\u6240\u8F93\u5B57\u6570\u8303\u56F4'
+                        )
+                    )
+                ),
+                _react2.default.createElement(
+                    _row2.default,
+                    { type: 'flex', style: { alignItems: "center" } },
+                    _react2.default.createElement(
+                        _col2.default,
+                        { span: 11 },
+                        _react2.default.createElement(_inputNumber2.default, { placeholder: '\u8BF7\u8F93\u5165\u5B57\u6570\u6700\u5C0F\u503C\u9650\u5236', value: minLength, onChange: this.handleMinLengthChange })
+                    ),
+                    '~',
+                    _react2.default.createElement(
+                        _col2.default,
+                        { span: 11 },
+                        _react2.default.createElement(_inputNumber2.default, { placeholder: '\u8BF7\u8F93\u5165\u5B57\u6570\u6700\u5927\u503C\u9650\u5236', value: maxLength, onChange: this.handleMaxLengthChange })
+                    ),
+                    _react2.default.createElement(
+                        'span',
+                        { style: { color: 'red', 'fontSize': '10px', display: this.state.spanDisplay } },
+                        '\u6700\u5C0F\u503C\u4E0D\u53EF\u4EE5\u8D85\u8FC7\u6700\u5927\u503C!'
+                    )
+                ),
+                _react2.default.createElement(
+                    _row2.default,
+                    { type: 'flex' },
+                    _react2.default.createElement(
+                        _col2.default,
+                        null,
+                        _react2.default.createElement(
+                            'div',
+                            { style: { margin: "16px 0" } },
+                            '\u6B63\u5219\u6821\u9A8C'
+                        )
+                    )
+                ),
+                _react2.default.createElement(
+                    _row2.default,
+                    { type: 'flex' },
+                    _react2.default.createElement(
+                        _col2.default,
+                        { span: 12 },
+                        _react2.default.createElement(
+                            _select2.default,
+                            { style: { width: '100%' }, defaultValue: patternTag, onChange: this.handleRegularChange },
+                            this.state.selectOptions
+                        )
+                    )
+                ),
+                _react2.default.createElement(
+                    _row2.default,
+                    { type: 'flex' },
+                    _react2.default.createElement(
+                        _col2.default,
+                        { span: 24 },
+                        _react2.default.createElement(
+                            'div',
+                            { style: { margin: "16px 0" } },
+                            '\u8F93\u5165\u63D0\u793A | \u9ED8\u8BA4\u503C'
+                        )
+                    )
+                ),
+                _react2.default.createElement(
+                    _row2.default,
+                    { type: 'flex' },
+                    _react2.default.createElement(
+                        _col2.default,
+                        { span: 12 },
+                        _react2.default.createElement(_input2.default, { placeholder: '\u8BF7\u8F93\u5165\u5B57\u6BB5\u9884\u671F\u503C\u7684\u63D0\u793A\u4FE1\u606F', onChange: this.handlePlaceholderChange, value: placeholder })
+                    ),
+                    _react2.default.createElement(
+                        _col2.default,
+                        { span: 12 },
+                        _react2.default.createElement(_input2.default, { placeholder: '\u8BF7\u8F93\u5165\u9ED8\u8BA4\u503C', onChange: this.handleDefaultValueChange, value: defaultValue })
+                    )
+                )
+            );
+        }
+    }]);
+    return SettingInput;
+}(_react2.default.Component);
+
+SettingInput.defaultProps = {
+    initFeature: '' };
+exports.default = SettingInput;