tntd 1.4.4 → 1.4.7

package/lib/Layout/EnterpriseLayout/Theme.js

@@ -1,95 +1,97 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-require("antd/lib/row/style");
-
-var _row = _interopRequireDefault(require("antd/lib/row"));
-
-var _react = require("react");
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _Iconfont = _interopRequireDefault(require("../Iconfont"));
-
-var _storage = require("../storage");
-
-var _this = void 0;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
-
-function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n    margin-top: 20px;\n    .user-info-body-theme-row{\n        >div{\n            width: 90px;\n            height: 36px;\n            line-height: 36px;\n            font-family: PingFangSC-Regular;\n            font-size: 12px;\n            border-radius: 2px;\n            text-align: center;\n            cursor:pointer;\n            position: relative;\n            &.themeS3{\n                background-image: linear-gradient(180deg, #213F83 0%, #0F75D6 100%);\n                color: #FFFFFF;\n            }\n            &.themeS2{\n                background: #17233D;\n                color: #FFFFFF;\n            }\n            &.themeS1{\n                background: #FFFFFF;\n                box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.1);\n                color: #17233D;\n            }\n            .icon-checked-wrap{\n                width: 14px;\n                height: 14px;\n                border-radius: 100%;\n                background: #126BFB;\n                position: absolute;\n                top: -5px;\n                right: -5px;\n                &:after{\n                    content:'';\n                    width: 4px;\n                    height: 6px;\n                    border-color: #FFFFFF;\n                    border-width: 0 1px 1px 0;\n                    border-style: solid;\n                    transform: rotate(45deg);\n                    position: absolute;\n                    top: 3px;\n                    left: 5px;\n                }\n            }\n        }\n    }\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var Theme = _styledComponents["default"].li(_templateObject());
-
-var themes = [{
-  value: 'themeS3',
-  label: '科技蓝'
-}, {
-  value: 'themeS2',
-  label: '暗夜黑'
-}, {
-  value: 'themeS1',
-  label: '极致白'
-}];
-
-var _default = function _default(props) {
-  var onChange = props.onChange;
-
-  var getTheme = function getTheme() {
-    var theme = (0, _storage.getThemeStore)() || props.theme || 'themeS3';
-    return themes.some(function (_ref) {
-      var value = _ref.value;
-      return value === theme;
-    }) ? theme : 'themeS3';
-  };
-
-  var _useState = (0, _react.useState)(getTheme()),
-      _useState2 = _slicedToArray(_useState, 2),
-      theme = _useState2[0],
-      setTheme = _useState2[1];
-
-  var changeTheme = function changeTheme(theme) {
-    setTheme(theme);
-    (0, _storage.setThemeStore)(theme);
-    onChange(theme);
-  };
-
-  return React.createElement(Theme, null, React.createElement(_row["default"], {
-    type: "flex",
-    justify: "space-between",
-    className: "user-info-body-theme-row"
-  }, themes.map(function (_ref2) {
-    var value = _ref2.value,
-        label = _ref2.label;
-    return React.createElement("div", {
-      className: value,
-      onClick: changeTheme.bind(_this, value)
-    }, label, theme === value && React.createElement("span", {
-      className: "icon-checked-wrap"
-    }));
-  })));
+import { useState } from 'react';
+import styled from 'styled-components';
+import { Row } from 'antd';
+import Iconfont from '../Iconfont';
+import { setThemeStore, getThemeStore } from '../storage';
+
+const Theme = styled.li`
+    margin-top: 20px;
+    .user-info-body-theme-row{
+        >div{
+            width: 90px;
+            height: 36px;
+            line-height: 36px;
+            font-family: PingFangSC-Regular;
+            font-size: 12px;
+            border-radius: 2px;
+            text-align: center;
+            cursor:pointer;
+            position: relative;
+            &.themeS3{
+                background-image: linear-gradient(180deg, #213F83 0%, #0F75D6 100%);
+                color: #FFFFFF;
+            }
+            &.themeS2{
+                background: #17233D;
+                color: #FFFFFF;
+            }
+            &.themeS1{
+                background: #FFFFFF;
+                box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.1);
+                color: #17233D;
+            }
+            .icon-checked-wrap{
+                width: 14px;
+                height: 14px;
+                border-radius: 100%;
+                background: #126BFB;
+                position: absolute;
+                top: -5px;
+                right: -5px;
+                &:after{
+                    content:'';
+                    width: 4px;
+                    height: 6px;
+                    border-color: #FFFFFF;
+                    border-width: 0 1px 1px 0;
+                    border-style: solid;
+                    transform: rotate(45deg);
+                    position: absolute;
+                    top: 3px;
+                    left: 5px;
+                }
+            }
+        }
+    }
+`;
+
+const themes = [
+    { value: 'themeS3', label: '科技蓝' },
+    { value: 'themeS2', label: '暗夜黑' },
+    { value: 'themeS1', label: '极致白' },
+];
+
+export default props => {
+    const { onChange } = props;
+
+    const getTheme = () => {
+        let theme = getThemeStore() || props.theme || 'themeS3';
+        return themes.some(({ value }) => value === theme) ? theme : 'themeS3';
+    };
+
+    const [theme, setTheme] = useState(getTheme());
+    const changeTheme = theme => {
+        setTheme(theme);
+        setThemeStore(theme);
+        onChange(theme);
+    };
+
+    return (
+        <Theme>
+            <Row type="flex" justify="space-between" className="user-info-body-theme-row">
+                {
+                    themes.map(({ value, label }) => (
+                        <div className={value}  onClick={changeTheme.bind(this, value)}>
+                            {label}
+                            {
+                                theme === value &&
+                                <span className="icon-checked-wrap"></span>
+                            }
+                        </div>
+
+                    ))
+                }
+            </Row>
+        </Theme>
+    );
 };
-
-exports["default"] = _default;

package/lib/Layout/EnterpriseLayout/index.js

@@ -1,46 +1,33 @@
-"use strict";
+import { withTheme } from 'styled-components';
+import Layout from '../Layout';
+import Avatar from './Avatar';
+import {
+    getThemeStore
+} from '../storage';
+
+export default withTheme(
+    props => {
+        const {
+            userInfo = {},
+            extendMap = {}
+        } = props;
+
+        // 企业级的默认蓝色主题
+        let theme = getThemeStore() || extendMap?.defaultTheme || userInfo.theme || 'themeS3';
+        theme = theme === 'default' ? 'themeS3' : theme;
+        const newProps = {
+            ...props,
+            userInfo:{
+                ...userInfo,
+                theme
+            }
+        };
+        return (
+            <Layout
+                {...newProps}
+                AvatarCustom={Avatar}
+            />
+        );
+    }
+);
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _styledComponents = require("styled-components");
-
-var _Layout = _interopRequireDefault(require("../Layout"));
-
-var _Avatar = _interopRequireDefault(require("./Avatar"));
-
-var _storage = require("../storage");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var _default = (0, _styledComponents.withTheme)(function (props) {
-  var _props$userInfo = props.userInfo,
-      userInfo = _props$userInfo === void 0 ? {} : _props$userInfo,
-      _props$extendMap = props.extendMap,
-      extendMap = _props$extendMap === void 0 ? {} : _props$extendMap; // 企业级的默认蓝色主题
-
-  var theme = (0, _storage.getThemeStore)() || (extendMap == null ? void 0 : extendMap.defaultTheme) || userInfo.theme || 'themeS3';
-  theme = theme === 'default' ? 'themeS3' : theme;
-
-  var newProps = _objectSpread({}, props, {
-    userInfo: _objectSpread({}, userInfo, {
-      theme: theme
-    })
-  });
-
-  return React.createElement(_Layout["default"], _extends({}, newProps, {
-    AvatarCustom: _Avatar["default"]
-  }));
-});
-
-exports["default"] = _default;