dlt-for-react 2.0.2 → 2.0.3

package/lib/layouts/settingDrawer/colorChange.js

@@ -1,45 +1,45 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 exports.default = undefined;
 
-var _message2 = require('antd/lib/message');
+var _message2 = require("antd/lib/message");
 
 var _message3 = _interopRequireDefault(_message2);
 
-var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
 
-var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");
 
 var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
 
-var _createClass2 = require('babel-runtime/helpers/createClass');
+var _createClass2 = require("babel-runtime/helpers/createClass");
 
 var _createClass3 = _interopRequireDefault(_createClass2);
 
-var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");
 
 var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
 
-var _inherits2 = require('babel-runtime/helpers/inherits');
+var _inherits2 = require("babel-runtime/helpers/inherits");
 
 var _inherits3 = _interopRequireDefault(_inherits2);
 
-require('antd/lib/message/style');
+require("antd/lib/message/style");
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _reactColor = require('react-color');
+var _reactColor = require("react-color");
 
-var _colorSetting = require('./colorSetting');
+var _colorSetting = require("./colorSetting");
 
-require('../../../assets/layouts/settingDrawer/style.less');
+require("../../../assets/layouts/settingDrawer/style.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -51,190 +51,213 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @LastEditTime: 2021-11-05 15:41:19
  */
 var pickers = {
-    circle: _reactColor.CirclePicker,
-    sketch: _reactColor.SketchPicker
+  circle: _reactColor.CirclePicker,
+  sketch: _reactColor.SketchPicker
 };
 
 var colorPicker = function (_Component) {
-    (0, _inherits3.default)(colorPicker, _Component);
-
-    function colorPicker(props) {
-        (0, _classCallCheck3.default)(this, colorPicker);
-
-        var _this = (0, _possibleConstructorReturn3.default)(this, (colorPicker.__proto__ || (0, _getPrototypeOf2.default)(colorPicker)).call(this, props));
-
-        _this.handleChangeComplete = function (color) {
-            _this.setState({ color: color });
-            if (!window.less || !window.less.modifyVars) {
-                _message3.default.warn('抱歉，当前无法切换主题色！');
-            } else {
-                var messageKey = 'updateTheme';
-                // message.loading({ content: '正在切换主题色...', key: messageKey })
-                window.less.modifyVars({
-                    '@primary-color': color
-                }).then(function () {
-                    var styleDom = document.createElement('style');
-                    styleDom.innerHTML = '\n                .xgui-nhTableNew .ant-table-tbody>tr:nth-of-type(2n){\n                    background: ' + color + '0D;\n                }';
-                    document.getElementsByTagName('body')[0].appendChild(styleDom);
-                    // message.success({ content: '主题色切换成功！', key: messageKey, duration: 2 });
-                }).catch(function () {
-                    _message3.default.error({ content: '主题色切换失败，请联系管理员处理！', key: messageKey, duration: 2 });
-                });
-            }
-            // changeDynamicAntdTheme(color)
-
-            _this.props.onChangeComplete(color);
-        };
-
-        _this.onShowCustom = function () {
-            _this.setState({
-                customPickerShow: true
-            });
-        };
-
-        _this.onCloseCustom = function () {
-            _this.setState({
-                customPickerShow: false
-            });
-        };
-
-        _this.changeCustomColor = function (color) {
-            _this.setState({
-                customPickerShow: false
-            });
-            _this.handleChangeComplete(color.hex);
-        };
-
-        _this.renderBox = function (colorList) {
-            var dom = [];
-            var popover = {
-                position: 'absolute',
-                zIndex: '2',
-                bottom: '100px',
-                right: '0'
-            };
-            var cover = {
-                position: 'fixed',
-                top: '0px',
-                right: '0px',
-                bottom: '0px',
-                left: '0px'
-            };
-            colorList.map(function (item) {
-                // 是否选中当前颜色
-                var isSelect = _this.state.color === item.color;
-                if (item.name === '自定义') {
-                    dom.push(_react2.default.createElement(
-                        'div',
-                        { className: 'colorContentBox' },
-                        _this.state.customPickerShow && _react2.default.createElement(
-                            'div',
-                            { style: popover },
-                            _react2.default.createElement('div', { style: cover, onClick: _this.onCloseCustom }),
-                            _react2.default.createElement(_reactColor.SketchPicker, { color: _this.state.color, onChangeComplete: _this.changeCustomColor })
-                        ),
-                        _react2.default.createElement(
-                            'div',
-                            { className: 'colorBox', style: { border: isSelect ? '1px solid var(--primary-color)' : 'none' }, onClick: _this.onShowCustom },
-                            _react2.default.createElement('div', { className: 'colorHeader', style: { background: 'var(--primary-color)' } }),
-                            _react2.default.createElement(
-                                'div',
-                                { className: 'leftBox' },
-                                _react2.default.createElement('div', { className: 'whiteBox1' }),
-                                _react2.default.createElement('div', { className: 'whiteBox2' })
-                            ),
-                            _react2.default.createElement('div', { className: 'whiteBox3' })
-                        ),
-                        _react2.default.createElement(
-                            'p',
-                            null,
-                            item.name
-                        )
-                    ));
-                } else {
-                    dom.push(_react2.default.createElement(
-                        'div',
-                        { className: 'colorContentBox' },
-                        _react2.default.createElement(
-                            'div',
-                            { onClick: function onClick() {
-                                    _this.handleChangeComplete(item.color);
-                                }, className: 'colorBox', style: { border: isSelect ? ' 1px solid ' + item.color : 'none' } },
-                            _react2.default.createElement('div', { className: 'colorHeader', style: { background: item.color } }),
-                            _react2.default.createElement(
-                                'div',
-                                { className: 'leftBox' },
-                                _react2.default.createElement('div', { className: 'whiteBox1' }),
-                                _react2.default.createElement('div', { className: 'whiteBox2' })
-                            ),
-                            _react2.default.createElement('div', { className: 'whiteBox3' })
-                        ),
-                        _react2.default.createElement(
-                            'p',
-                            null,
-                            item.name
-                        )
-                    ));
-                }
-            });
-            return dom;
-        };
-
-        _this.state = {
-            color: props.color, //当前选中的颜色
-            customPickerShow: false //自定义显示
-        };
-        return _this;
-    }
-
-    //颜色选择确认事件
-
-
-    (0, _createClass3.default)(colorPicker, [{
-        key: 'render',
-        value: function render() {
-            var _props = this.props,
-                type = _props.type,
-                colorBox = _props.colorBox;
-            var color = this.state.color;
-
-            var Picker = pickers[type];
-            return _react2.default.createElement(
-                'div',
-                { className: 'ColorChangeBox' },
-                this.renderBox(colorBox)
-            );
+  (0, _inherits3.default)(colorPicker, _Component);
+
+  function colorPicker(props) {
+    (0, _classCallCheck3.default)(this, colorPicker);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (colorPicker.__proto__ || (0, _getPrototypeOf2.default)(colorPicker)).call(this, props));
+
+    _this.handleChangeComplete = function (color) {
+      _this.setState({ color: color });
+      if (!window.less || !window.less.modifyVars) {
+        _message3.default.warn("抱歉，当前无法切换主题色！");
+      } else {
+        var messageKey = "updateTheme";
+        // message.loading({ content: '正在切换主题色...', key: messageKey })
+        window.less.modifyVars({
+          "@primary-color": color
+        }).then(function () {
+          var styleDom = document.createElement("style");
+          styleDom.innerHTML = "\n                .dlt-nhTableNew .ant-table-tbody>tr:nth-of-type(2n){\n                    background: " + color + "0D;\n                }";
+          document.getElementsByTagName("body")[0].appendChild(styleDom);
+          // message.success({ content: '主题色切换成功！', key: messageKey, duration: 2 });
+        }).catch(function () {
+          _message3.default.error({
+            content: "主题色切换失败，请联系管理员处理！",
+            key: messageKey,
+            duration: 2
+          });
+        });
+      }
+      // changeDynamicAntdTheme(color)
+
+      _this.props.onChangeComplete(color);
+    };
+
+    _this.onShowCustom = function () {
+      _this.setState({
+        customPickerShow: true
+      });
+    };
+
+    _this.onCloseCustom = function () {
+      _this.setState({
+        customPickerShow: false
+      });
+    };
+
+    _this.changeCustomColor = function (color) {
+      _this.setState({
+        customPickerShow: false
+      });
+      _this.handleChangeComplete(color.hex);
+    };
+
+    _this.renderBox = function (colorList) {
+      var dom = [];
+      var popover = {
+        position: "absolute",
+        zIndex: "2",
+        bottom: "100px",
+        right: "0"
+      };
+      var cover = {
+        position: "fixed",
+        top: "0px",
+        right: "0px",
+        bottom: "0px",
+        left: "0px"
+      };
+      colorList.map(function (item) {
+        // 是否选中当前颜色
+        var isSelect = _this.state.color === item.color;
+        if (item.name === "自定义") {
+          dom.push(_react2.default.createElement(
+            "div",
+            { className: "colorContentBox" },
+            _this.state.customPickerShow && _react2.default.createElement(
+              "div",
+              { style: popover },
+              _react2.default.createElement("div", { style: cover, onClick: _this.onCloseCustom }),
+              _react2.default.createElement(_reactColor.SketchPicker, {
+                color: _this.state.color,
+                onChangeComplete: _this.changeCustomColor
+              })
+            ),
+            _react2.default.createElement(
+              "div",
+              {
+                className: "colorBox",
+                style: {
+                  border: isSelect ? "1px solid var(--primary-color)" : "none"
+                },
+                onClick: _this.onShowCustom
+              },
+              _react2.default.createElement("div", {
+                className: "colorHeader",
+                style: { background: "var(--primary-color)" }
+              }),
+              _react2.default.createElement(
+                "div",
+                { className: "leftBox" },
+                _react2.default.createElement("div", { className: "whiteBox1" }),
+                _react2.default.createElement("div", { className: "whiteBox2" })
+              ),
+              _react2.default.createElement("div", { className: "whiteBox3" })
+            ),
+            _react2.default.createElement(
+              "p",
+              null,
+              item.name
+            )
+          ));
+        } else {
+          dom.push(_react2.default.createElement(
+            "div",
+            { className: "colorContentBox" },
+            _react2.default.createElement(
+              "div",
+              {
+                onClick: function onClick() {
+                  _this.handleChangeComplete(item.color);
+                },
+                className: "colorBox",
+                style: { border: isSelect ? " 1px solid " + item.color : "none" }
+              },
+              _react2.default.createElement("div", {
+                className: "colorHeader",
+                style: { background: item.color }
+              }),
+              _react2.default.createElement(
+                "div",
+                { className: "leftBox" },
+                _react2.default.createElement("div", { className: "whiteBox1" }),
+                _react2.default.createElement("div", { className: "whiteBox2" })
+              ),
+              _react2.default.createElement("div", { className: "whiteBox3" })
+            ),
+            _react2.default.createElement(
+              "p",
+              null,
+              item.name
+            )
+          ));
         }
-    }]);
-    return colorPicker;
+      });
+      return dom;
+    };
+
+    _this.state = {
+      color: props.color, //当前选中的颜色
+      customPickerShow: false //自定义显示
+    };
+    return _this;
+  }
+
+  //颜色选择确认事件
+
+
+  (0, _createClass3.default)(colorPicker, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          type = _props.type,
+          colorBox = _props.colorBox;
+      var color = this.state.color;
+
+      var Picker = pickers[type];
+      return _react2.default.createElement(
+        "div",
+        { className: "dlt-setting-colorChangeBox" },
+        this.renderBox(colorBox)
+      );
+    }
+  }]);
+  return colorPicker;
 }(_react.Component);
 
 colorPicker.defaultProps = {
-    type: 'circle', //选择器类型
-    colorBox: [{
-        name: '联奕蓝',
-        color: '#397ef0'
-    }, {
-        name: '浪漫紫',
-        color: '#9e91ff'
-    }, {
-        name: '活力橙',
-        color: '#ffc765'
-    }, {
-        name: '极光绿',
-        color: '#4fc88c'
-    }, {
-        name: '斗志红',
-        color: '#e25e5e'
-    }, {
-        name: '日暮黄',
-        color: '#ffad67'
-    }, {
-        name: '希望青',
-        color: '#5ddbd3'
-    }, {
-        name: '自定义',
-        color: '#e6e6e6'
-    }] //颜色列表
+  type: "circle", //选择器类型
+  colorBox: [{
+    name: "联奕蓝",
+    color: "#397ef0"
+  }, {
+    name: "浪漫紫",
+    color: "#9e91ff"
+  }, {
+    name: "活力橙",
+    color: "#ffc765"
+  }, {
+    name: "极光绿",
+    color: "#4fc88c"
+  }, {
+    name: "斗志红",
+    color: "#e25e5e"
+  }, {
+    name: "日暮黄",
+    color: "#ffad67"
+  }, {
+    name: "希望青",
+    color: "#5ddbd3"
+  }, {
+    name: "自定义",
+    color: "#e6e6e6"
+  }] //颜色列表
 };
 exports.default = colorPicker;