dlt-for-react 1.1.15 → 1.1.17

package/lib/components/HqInputPicker/setting-inputNumber.js

@@ -0,0 +1,658 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _tooltip = require("antd/lib/tooltip");
+
+var _tooltip2 = _interopRequireDefault(_tooltip);
+
+var _icon = require("antd/lib/icon");
+
+var _icon2 = _interopRequireDefault(_icon);
+
+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 _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/tooltip/style");
+
+require("antd/lib/icon/style");
+
+require("antd/lib/input-number/style");
+
+require("antd/lib/row/style");
+
+require("antd/lib/col/style");
+
+require("antd/lib/message/style");
+
+require("antd/lib/radio/style");
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _inputConst = require("./input-const");
+
+var _reactCustomScrollbarsPatched = require("react-custom-scrollbars-patched");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var RadioGroup = _radio2.default.Group;
+
+//最小宽度
+var minWidth = 1;
+
+var SettingInputNumber = function (_React$Component) {
+  (0, _inherits3.default)(SettingInputNumber, _React$Component);
+
+  function SettingInputNumber(props) {
+    (0, _classCallCheck3.default)(this, SettingInputNumber);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (SettingInputNumber.__proto__ || (0, _getPrototypeOf2.default)(SettingInputNumber)).call(this, props));
+
+    _this.getFeature = function () {
+      return _this.state.feature;
+    };
+
+    _this.handleSizeRadioChange = function (e) {
+      var size = e.target.value;
+      var fp = (0, _extends3.default)({}, _this.state.featureParams);
+      fp.size = size;
+
+      _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.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.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.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.handleDefaultValueChange = function (value) {
+      var fp = (0, _extends3.default)({}, _this.state.featureParams);
+      fp.defaultValue = value ? value : "";
+      _this.setState({ featureParams: fp });
+      _this.createFeature(fp);
+    };
+
+    _this.handleNumberLimitChange = function (value) {
+      var fp = (0, _extends3.default)({}, _this.state.featureParams);
+      fp.step = value;
+      _this.setState({ featureParams: fp });
+      _this.createFeature(fp);
+    };
+
+    _this.handleMaxNumberChange = function (value) {
+      var fp = (0, _extends3.default)({}, _this.state.featureParams);
+      fp.max = value ? value : "";
+      _this.setState({ featureParams: fp });
+      _this.createFeature(fp);
+    };
+
+    _this.handleMinNumberChange = function (value) {
+      var fp = (0, _extends3.default)({}, _this.state.featureParams);
+      fp.min = value ? value : "";
+      _this.setState({ featureParams: fp });
+      _this.createFeature(fp);
+    };
+
+    _this.handleIntegerLimitChange = function (value) {
+      var fp = (0, _extends3.default)({}, _this.state.featureParams);
+      fp.integerLength = value ? value : "";
+      _this.setState({ featureParams: fp });
+      _this.createFeature(fp);
+    };
+
+    _this.handleDecimalLimitChange = function (value) {
+      var fp = (0, _extends3.default)({}, _this.state.featureParams);
+      fp.decimalLength = value ? value : "";
+      _this.setState({ featureParams: fp });
+      _this.createFeature(fp);
+    };
+
+    _this.state = {
+      feature: "", //原参数json字符串
+      width: minWidth, //设置的宽度值，初始为最小宽度值
+      featureParams: {
+        name: "数字输入框组件",
+        type: _inputConst.InputType.INPUTNUMBER, //控件类型，必须有此属性，用于渲染时期判断控件类型
+        widthType: _inputConst.WidthType.DEFAULT, //宽度类型：自适应'default'、百分比'relative'、固定值'fixed'
+        widthStr: "", //input宽度值
+        required: false, //是否必须
+        defaultValue: "", //默认值
+        size: "default", //输入框大小
+        step: "1", //步长
+        max: "", //最大值
+        min: "", //最小值
+        validationValueType: "number",
+        integerLength: null, // 整数位数
+        decimalLength: null // 整数位数
+      }
+    };
+    return _this;
+  }
+
+  (0, _createClass3.default)(SettingInputNumber, [{
+    key: "componentWillMount",
+
+
+    //在渲染前调用,可在此最后一次初始化组件状态
+    value: function componentWillMount() {
+      //将输入控件配置参数设置到状态中
+      if (this.props.initFeature) {
+        try {
+          var initFeature = JSON.parse(this.props.initFeature);
+          if (initFeature.type == _inputConst.InputType.INPUTNUMBER) {
+            var widthType = initFeature.widthType,
+                _initFeature$widthStr = initFeature.widthStr,
+                widthStr = _initFeature$widthStr === undefined ? "" : _initFeature$widthStr,
+                _initFeature$size = initFeature.size,
+                size = _initFeature$size === undefined ? "" : _initFeature$size,
+                _initFeature$step = initFeature.step,
+                step = _initFeature$step === undefined ? "" : _initFeature$step,
+                _initFeature$max = initFeature.max,
+                max = _initFeature$max === undefined ? "" : _initFeature$max,
+                _initFeature$min = initFeature.min,
+                min = _initFeature$min === undefined ? "" : _initFeature$min,
+                _initFeature$required = initFeature.required,
+                required = _initFeature$required === undefined ? false : _initFeature$required,
+                _initFeature$defaultV = initFeature.defaultValue,
+                defaultValue = _initFeature$defaultV === undefined ? "" : _initFeature$defaultV,
+                integerLength = initFeature.integerLength,
+                decimalLength = initFeature.decimalLength;
+
+            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.size = size;
+            fp.step = step;
+            fp.max = max;
+            fp.min = min;
+            fp.required = required;
+            fp.defaultValue = defaultValue;
+            fp.integerLength = integerLength;
+            fp.decimalLength = decimalLength;
+            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("生成控件配置参数出错！");
+        }
+      }
+    }
+
+    //供父组件获取feature
+
+
+    //切换输入框大小类型radio时回调，清空之前的值
+
+
+    //生成feature参数json字符串
+
+
+    //切换宽度类型radio时回调，清空之前的值
+
+
+    //是否必填
+
+
+    //宽度值改变的时候，同步更新状态参数
+
+
+    //当输入默认值改变时
+
+
+    //步长值改变的时候，同步更新状态参数
+
+
+    //最大值改变的时候，同步更新状态参数
+
+
+    //最小值改变的时候，同步更新状态参数
+
+
+    //整数位数最大值改变的时候，同步更新状态参数
+
+    //小数位数最大值改变的时候，同步更新状态参数
+
+  }, {
+    key: "render",
+    value: function render() {
+      var width = this.state.width;
+      var _state$featureParams = this.state.featureParams,
+          widthType = _state$featureParams.widthType,
+          required = _state$featureParams.required,
+          defaultValue = _state$featureParams.defaultValue,
+          size = _state$featureParams.size,
+          step = _state$featureParams.step,
+          max = _state$featureParams.max,
+          min = _state$featureParams.min,
+          integerLength = _state$featureParams.integerLength,
+          decimalLength = _state$featureParams.decimalLength;
+
+
+      return _react2.default.createElement(
+        _reactCustomScrollbarsPatched.Scrollbars,
+        { style: { height: "500px" } },
+        _react2.default.createElement(
+          "div",
+          { id: "input-setting-div", style: { paddingBottom: "30px" } },
+          _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,
+              { span: 24 },
+              _react2.default.createElement(
+                "div",
+                { style: { margin: "16px 0" } },
+                "\u6700\u5927\u503C | \u6700\u5C0F\u503C"
+              )
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              { span: 12 },
+              _react2.default.createElement(_inputNumber2.default, {
+                min: 1,
+                value: max,
+                style: { width: "60%" },
+                placeholder: "\u8BF7\u8F93\u5165\u6700\u5927\u503C",
+                onChange: this.handleMaxNumberChange
+              })
+            ),
+            _react2.default.createElement(
+              _col2.default,
+              { span: 12 },
+              _react2.default.createElement(_inputNumber2.default, {
+                min: 1,
+                value: min,
+                style: { width: "60%" },
+                placeholder: "\u8BF7\u8F93\u5165\u6700\u5C0F\u503C",
+                onChange: this.handleMinNumberChange
+              })
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              { span: 24 },
+              _react2.default.createElement(
+                "div",
+                { style: { margin: "16px 0" } },
+                "\u6574\u6570\u4F4D\u6570 | \u5C0F\u6570\u4F4D\u6570"
+              )
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              { span: 12 },
+              _react2.default.createElement(_inputNumber2.default, {
+                min: 1,
+                value: integerLength,
+                style: { width: "60%" },
+                placeholder: "\u8BF7\u8F93\u5165\u6574\u6570\u4F4D\u6570\u6700\u5927\u503C",
+                onChange: this.handleIntegerLimitChange
+              })
+            ),
+            _react2.default.createElement(
+              _col2.default,
+              { span: 12 },
+              _react2.default.createElement(_inputNumber2.default, {
+                min: 1,
+                value: decimalLength,
+                style: { width: "60%" },
+                placeholder: "\u8BF7\u8F93\u5165\u5C0F\u6570\u4F4D\u6570\u6700\u5927\u503C",
+                onChange: this.handleDecimalLimitChange
+              })
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              null,
+              _react2.default.createElement(
+                "div",
+                { style: { margin: "16px 0" } },
+                "\u6B65\u957F",
+                " ",
+                _react2.default.createElement(
+                  _tooltip2.default,
+                  { title: "即每次增加或递减的大小", placement: "top" },
+                  _react2.default.createElement(_icon2.default, { type: "question-circle" })
+                )
+              )
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              { span: 12 },
+              _react2.default.createElement(_inputNumber2.default, {
+                min: 0,
+                style: { width: "60%" },
+                placeholder: "\u8BF7\u8F93\u5165\u6B65\u957F",
+                onChange: this.handleNumberLimitChange,
+                value: step
+              })
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              null,
+              _react2.default.createElement(
+                "div",
+                { style: { margin: "16px 0" } },
+                "\u8F93\u5165\u6846\u5927\u5C0F"
+              )
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              { style: { align: "center" } },
+              _react2.default.createElement(
+                RadioGroup,
+                { value: size, onChange: this.handleSizeRadioChange },
+                _react2.default.createElement(
+                  _radio2.default,
+                  { value: "large" },
+                  "\u5927"
+                ),
+                _react2.default.createElement(
+                  _radio2.default,
+                  { value: "default" },
+                  "\u9ED8\u8BA4"
+                ),
+                _react2.default.createElement(
+                  _radio2.default,
+                  { value: "small" },
+                  "\u5C0F"
+                )
+              )
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              null,
+              _react2.default.createElement(
+                "div",
+                { style: { margin: "16px 0" } },
+                "\u9ED8\u8BA4\u503C"
+              )
+            )
+          ),
+          _react2.default.createElement(
+            _row2.default,
+            { type: "flex" },
+            _react2.default.createElement(
+              _col2.default,
+              { span: 12 },
+              _react2.default.createElement(_inputNumber2.default, {
+                placeholder: "\u8BF7\u8F93\u5165\u9ED8\u8BA4\u503C",
+                min: 1,
+                style: { width: "60%" },
+                onChange: this.handleDefaultValueChange,
+                value: defaultValue
+              })
+            )
+          )
+        )
+      );
+    }
+  }]);
+  return SettingInputNumber;
+}(_react2.default.Component);
+
+SettingInputNumber.defaultProps = {
+  initFeature: ""
+};
+exports.default = SettingInputNumber;