dlt-for-react 1.0.1

package/lib/layouts/settingDrawer/colorChange.js

@@ -0,0 +1,239 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _message2 = require('antd/lib/message');
+
+var _message3 = _interopRequireDefault(_message2);
+
+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);
+
+require('antd/lib/message/style');
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactColor = require('react-color');
+
+var _colorSetting = require('./colorSetting');
+
+require('../../../assets/layouts/settingDrawer/style.less');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/*
+ * @Description: 颜色选择块
+ * @Author: lisenlin
+ * @Date: 2021-10-22 09:18:01
+ * @LastEditors: lisenlin
+ * @LastEditTime: 2021-11-05 15:41:19
+ */
+var pickers = {
+    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)
+            );
+        }
+    }]);
+    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'
+    }] //颜色列表
+};
+exports.default = colorPicker;

package/lib/layouts/settingDrawer/colorPicker.js

@@ -0,0 +1,124 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _message2 = require('antd/lib/message');
+
+var _message3 = _interopRequireDefault(_message2);
+
+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);
+
+require('antd/lib/message/style');
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactColor = require('react-color');
+
+var _colorSetting = require('./colorSetting');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var pickers = {
+    circle: _reactColor.CirclePicker,
+    sketch: _reactColor.SketchPicker
+}; /*
+    * @Description: 颜色选择器
+    * @Author: lisenlin
+    * @Date: 2021-06-22 10:42:57
+    * @LastEditors: lisenlin
+    * @LastEditTime: 2021-11-05 15:40:52
+    */
+
+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.hex });
+            if (!window.less || !window.less.modifyVars) {
+                _message3.default.warn('抱歉，当前无法切换主题色！');
+            } else {
+                var messageKey = 'updateTheme';
+                _message3.default.loading({ content: '正在切换主题色...', key: messageKey });
+                window.less.modifyVars({
+                    '@primary-color': color.hex
+                }).then(function () {
+                    var styleDom = document.createElement('style');
+                    styleDom.innerHTML = '\n                .xgui-nhTableNew .ant-table-tbody>tr:nth-of-type(2n){\n                    background: ' + color.hex + '0D;\n                }';
+                    document.getElementsByTagName('body')[0].appendChild(styleDom);
+                    _message3.default.success({ content: '主题色切换成功！', key: messageKey, duration: 2 });
+                }).catch(function () {
+                    _message3.default.error({ content: '主题色切换失败，请联系管理员处理！', key: messageKey, duration: 2 });
+                });
+            }
+            // changeDynamicAntdTheme(color.hex);
+            _this.props.onChangeComplete(color.hex);
+        };
+
+        _this.state = {
+            color: props.color //当前选中的颜色
+        };
+        return _this;
+    }
+
+    //颜色选择确认事件
+
+
+    (0, _createClass3.default)(colorPicker, [{
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                type = _props.type,
+                colors = _props.colors;
+            var color = this.state.color;
+
+            var Picker = pickers[type];
+            return _react2.default.createElement(
+                _react.Fragment,
+                null,
+                _react2.default.createElement(Picker, (0, _extends3.default)({}, this.props, {
+                    color: color,
+                    colors: colors,
+                    onChangeComplete: this.handleChangeComplete
+                }))
+            );
+        }
+    }]);
+    return colorPicker;
+}(_react.Component);
+
+colorPicker.defaultProps = {
+    type: 'circle', //选择器类型
+    colors: ["#1890ff", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#4caf50", "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107", "#ff9800", "#ff5722", "#795548", "#607d8b"] //颜色列表
+};
+exports.default = colorPicker;

package/lib/layouts/settingDrawer/colorSetting.js

@@ -0,0 +1,73 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.changeDynamicAntdTheme = exports.loadScript = undefined;
+
+var _promise = require('babel-runtime/core-js/promise');
+
+var _promise2 = _interopRequireDefault(_promise);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/*
+ * @Description: 
+ * @Author: lisenlin
+ * @Date: 2021-10-25 15:12:18
+ * @LastEditors: lisenlin
+ * @LastEditTime: 2021-12-08 14:46:17
+ */
+var timer = null,
+    timeScape = 500;
+var loadScript = exports.loadScript = function loadScript(src, id) {
+  return new _promise2.default(function (resolve, reject) {
+    var script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = src;
+    script.id = id;
+    script.onload = resolve;
+    script.onerror = reject;
+    document.head.appendChild(script);
+  });
+};
+var changeDynamicAntdTheme = exports.changeDynamicAntdTheme = function changeDynamicAntdTheme(color) {
+
+  var changeColor = function changeColor() {
+    window.less.modifyVars({
+      '@primary-color': color
+    }).then(function () {
+      //防抖
+      var run = function run() {
+        // 样式变换代码
+        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);
+        if (!timer) {
+          timer = setTimeout(function () {
+            console.log('触发抖动，重置定时器,抖动间隔');
+            run(timeScape);
+          }, timeScape);
+        } else {
+          clearTimeout(timer);
+          timer = null;
+          timer = setTimeout(function () {
+            message.success('切换成功');
+          }, timeScape);
+        }
+      };
+      run(timeScape);
+    });
+  };
+  var lessUrl = 'https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js';
+  if (document.getElementById('lessScript')) {
+    changeColor();
+  } else {
+    window.less = {
+      async: true
+    };
+    loadScript(lessUrl, 'lessScript').then(function () {
+      changeColor();
+    });
+  }
+};

package/lib/layouts/settingDrawer/fontChange.js

@@ -0,0 +1,115 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
+
+var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
+
+exports.default = FontChange;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+require('../../../assets/layouts/settingDrawer/style.less');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function FontChange(props) {
+    var _props$initFontSize = props.initFontSize,
+        initFontSize = _props$initFontSize === undefined ? 'default' : _props$initFontSize,
+        updateFontSize = props.updateFontSize; //字号  default/big/huge
+
+    var _useState = (0, _react.useState)(initFontSize),
+        _useState2 = (0, _slicedToArray3.default)(_useState, 2),
+        fontSize = _useState2[0],
+        setFontSize = _useState2[1];
+
+    var Dom = document.getElementsByTagName('html')[0];
+    var changeFontSize = function changeFontSize(size) {
+        var baseNumberFontSize = 54; //默认号54
+        switch (size) {
+            case 'default':
+                Dom.style.fontSize = baseNumberFontSize + 'Px';
+                setFontSize(size);
+                updateFontSize(size);
+                break;
+            case 'big':
+                Dom.style.fontSize = +baseNumberFontSize + 5 + 'Px';
+                setFontSize(size);
+                updateFontSize(size);
+                break;
+            case 'huge':
+                Dom.style.fontSize = +baseNumberFontSize + 15 + 'Px';
+                setFontSize(size);
+                updateFontSize(size);
+                break;
+        }
+    };
+    return _react2.default.createElement(
+        'div',
+        null,
+        _react2.default.createElement(
+            'div',
+            { className: 'fontContent' },
+            _react2.default.createElement(
+                'div',
+                null,
+                _react2.default.createElement(
+                    'div',
+                    { className: (0, _classnames2.default)('fontContentBox', { 'selected': fontSize == 'default' }),
+                        onClick: function onClick() {
+                            changeFontSize('default');
+                        } },
+                    _react2.default.createElement(
+                        'p',
+                        null,
+                        '\u6807\u51C6'
+                    )
+                ),
+                _react2.default.createElement(
+                    'p',
+                    { className: 'hint' },
+                    '\u63A8\u8350'
+                )
+            ),
+            _react2.default.createElement(
+                'div',
+                { className: (0, _classnames2.default)('fontContentBox', { 'selected': fontSize == 'big' }),
+                    onClick: function onClick() {
+                        changeFontSize('big');
+                    } },
+                _react2.default.createElement(
+                    'p',
+                    null,
+                    '\u5927\u53F7'
+                )
+            ),
+            _react2.default.createElement(
+                'div',
+                { className: (0, _classnames2.default)('fontContentBox', { 'selected': fontSize == 'huge' }),
+                    onClick: function onClick() {
+                        changeFontSize('huge');
+                    } },
+                _react2.default.createElement(
+                    'p',
+                    null,
+                    '\u52A0\u5927'
+                )
+            )
+        )
+    );
+} /*
+   * @Description: 字号切换
+   * @Author: lisenlin
+   * @Date: 2021-10-29 16:00:07
+   * @LastEditors: lisenlin
+   * @LastEditTime: 2021-10-29 16:45:50
+   */