@zat-design/sisyphus-react 3.0.16-beta.2 → 3.1.4

package/lib/ProLayout/index.js

@@ -1,6 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,8 +8,9 @@ exports.default = exports.LayoutContext = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _jsxRuntime = require("react/jsx-runtime");
 var _antd = require("antd");
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _ahooks = require("ahooks");
 var _index = require("../index");
@@ -18,8 +18,7 @@ var _components = require("./components");
 var _index2 = require("./components/Layout/index");
 var _utils = require("./utils");
 // 全局上下文
-var LayoutContext = /*#__PURE__*/(0, _react.createContext)({});
-exports.LayoutContext = LayoutContext;
+var LayoutContext = exports.LayoutContext = /*#__PURE__*/(0, _react.createContext)(undefined);
 var ProLayout = function ProLayout(props) {
   var children = props.children,
     _props$className = props.className,
@@ -31,15 +30,18 @@ var ProLayout = function ProLayout(props) {
     waterMarkProps = _props$waterMarkProps === void 0 ? {} : _props$waterMarkProps,
     headerNotice = props.headerNotice,
     noticeIn = props.notice,
-    dataSource = props.dataSource;
+    dataSource = props.dataSource,
+    theme = props.theme;
   var _useSetState = (0, _ahooks.useSetState)({
       notice: headerNotice || noticeIn,
-      menus: []
+      menus: [],
+      selectedPath: ''
     }),
     _useSetState2 = (0, _slicedToArray2.default)(_useSetState, 2),
     _useSetState2$ = _useSetState2[0],
     notice = _useSetState2$.notice,
     menus = _useSetState2$.menus,
+    selectedPath = _useSetState2$.selectedPath,
     setState = _useSetState2[1];
   var _useToggle = (0, _ahooks.useToggle)(props.collapsed || false),
     _useToggle2 = (0, _slicedToArray2.default)(_useToggle, 2),
@@ -75,29 +77,42 @@ var ProLayout = function ProLayout(props) {
     'pro-layout-row-left-pure': typeof pure !== 'boolean' && pure.leftMenu
   });
   var noticeHeight = notice ? 32 : 0;
-  var layoutDom = /*#__PURE__*/_react.default.createElement("div", {
+  var layoutDom = (0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames.default)((0, _defineProperty2.default)({
-      'pro-layout': true
-    }, "".concat(className), className))
-  }, /*#__PURE__*/_react.default.createElement(_index2.Header, (0, _objectSpread2.default)({}, props)), /*#__PURE__*/_react.default.createElement(_index2.Notice, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
-    notice: notice,
-    onCancel: onCancelNotice
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: contentCls
-  }, /*#__PURE__*/_react.default.createElement(_index2.Menu, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
-    dataSource: menus,
-    notice: notice,
-    collapsed: collapsed,
-    onToggle: toggle
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "pro-layout-content",
-    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, contentStyle), {}, {
-      marginTop: headerHeight + noticeHeight
-    })
-  }, /*#__PURE__*/_react.default.createElement("div", null, children))));
-  return /*#__PURE__*/_react.default.createElement(LayoutContext.Provider, {
-    value: {}
-  }, !waterMarkProps ? layoutDom : /*#__PURE__*/_react.default.createElement(_index.ProWaterMark, (0, _objectSpread2.default)({}, waterMarkProps), layoutDom));
+      'pro-layout': true,
+      'pro-layout-dark': theme === 'dark',
+      'pro-layout-light': theme === 'light'
+    }, "".concat(className), className)),
+    children: [(0, _jsxRuntime.jsx)(_index2.Header, (0, _objectSpread2.default)({}, props)), (0, _jsxRuntime.jsx)(_index2.Notice, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+      notice: notice,
+      onCancel: onCancelNotice
+    })), (0, _jsxRuntime.jsxs)("div", {
+      className: contentCls,
+      children: [(0, _jsxRuntime.jsx)(_index2.Menu, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+        dataSource: menus,
+        notice: notice,
+        collapsed: collapsed,
+        onToggle: toggle
+      })), (0, _jsxRuntime.jsx)("div", {
+        className: "pro-layout-content",
+        style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, contentStyle), {}, {
+          marginTop: headerHeight + noticeHeight
+        }),
+        children: (0, _jsxRuntime.jsx)("div", {
+          children: children
+        })
+      })]
+    })]
+  });
+  return (0, _jsxRuntime.jsx)(LayoutContext.Provider, {
+    value: {
+      selectedPath: selectedPath,
+      onSelected: setState
+    },
+    children: !waterMarkProps ? layoutDom : (0, _jsxRuntime.jsx)(_index.ProWaterMark, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, waterMarkProps), {}, {
+      children: layoutDom
+    }))
+  });
 };
 ProLayout.defaultProps = {
   menus: [],
@@ -106,11 +121,11 @@ ProLayout.defaultProps = {
   collapsed: false,
   routerMatch: 'id',
   pure: false,
+  theme: 'dark',
   headerHeight: 48,
   contentStyle: {}
 };
 ProLayout.ProCollapse = _components.ProCollapse;
 ProLayout.ProFooter = _components.ProFooter;
 ProLayout.ProHeader = _components.ProHeader;
-var _default = ProLayout;
-exports.default = _default;
+var _default = exports.default = ProLayout;

package/lib/ProLayout/propTypes.d.ts

@@ -24,6 +24,7 @@ export interface DataSourceProps {
     userInfo?: any;
     menus?: MenusProps[];
 }
+type themeEnum = 'light' | 'dark';
 type pureKey = boolean | {
     topMenu?: boolean;
     leftMenu?: boolean;
@@ -47,6 +48,7 @@ export interface ProLayoutProps {
     headerHeight?: number;
     contentStyle?: CSSProperties;
     waterMarkProps?: ProWaterMarkProps;
+    theme?: themeEnum;
     [key: string]: any;
 }
 export interface ProLayoutStates {

package/lib/ProLayout/style/index.less

@@ -9,6 +9,161 @@
   flex-direction: column;
   background    : var(--zaui-base-bg, #ffffff);
 
+  .pro-layout-menu-open {
+    .pro-layout-open-menu-lv1 {
+      h2 {
+        font-weight: bold;
+      }
+    }
+  }
+
+  // light模式
+  &.pro-layout-light {
+
+
+    .pro-layout-menu-open,
+    .pro-layout-menu {
+      box-shadow: 2px 0px 5px 0px rgba(0, 55, 93, 0.1);
+    }
+
+    .pro-layout-open-menu .ant-menu-title-content div .pro-layout-icon {
+      color   : var(--zaui-text, #343434);
+      position: relative;
+      z-index : 1;
+    }
+
+    .pro-layout-menu-fold-list {
+      li {
+        position: relative;
+
+        &>div {
+          position: relative;
+          z-index : 1;
+        }
+
+        &.active {
+          background: transparent;
+
+          div .pro-layout-icon {
+            color: #fff;
+          }
+
+          &::before {
+            content         : '';
+            border-radius   : var(--zaui-border-radius, 4px);
+            background-color: var(--zaui-brand, #006aff);
+            height          : 38px;
+            position        : absolute;
+            left            : 5px;
+            top             : 4px;
+            width           : calc(100% - 10px);
+            opacity         : 1 !important;
+          }
+        }
+
+        &:hover {
+          background: transparent;
+
+          &::before {
+            content         : '';
+            border-radius   : var(--zaui-border-radius, 4px);
+            background-color: var(--zaui-brand, #006aff);
+            height          : 38px;
+            position        : absolute;
+            left            : 5px;
+            top             : 4px;
+            width           : calc(100% - 10px);
+            opacity         : 0.08;
+          }
+
+        }
+
+        div .pro-layout-icon {
+          color: var(--zaui-text, #343434);
+        }
+      }
+    }
+
+
+    .pro-layout-menu-fold-list li.active {
+      border-radius: var(--zaui-border-radius, 4px);
+    }
+
+    .pro-layout-menu-collapsed {
+      position: relative;
+
+      &::before {
+        content   : '';
+        height    : 1px;
+        background: #DEE0E3;
+        width     : calc(100% - 16px);
+        position  : absolute;
+        top       : 0;
+        left      : var(--zaui-space-size-sm, 8px);
+
+      }
+    }
+
+    .pro-layout-row {
+      .pro-layout-arrow {
+        border-color: var(--zaui-text, #343434);
+      }
+    }
+
+    .pro-layout-menu-collapsed {
+      background: var(--zaui-base-bg, #fff);
+    }
+
+    .ant-menu-root {
+      overflow-x: hidden !important;
+    }
+
+    .anticon-caret-down {
+      color: #CACACA !important;
+    }
+
+    .pro-layout-row .pro-layout-menu {
+      background: var(--zaui-base-bg, #ffffff);
+    }
+
+    .pro-layout-open-menu .ant-menu-root>.ant-menu-submenu .ant-menu-sub {
+      background: var(--zaui-base-bg, #ffffff);
+    }
+
+    .pro-layout-open-menu .ant-menu-title-content div h2 {
+      color: var(--zaui-text, #343434);
+    }
+
+    .pro-layout-open-menu .ant-menu-item:hover,
+    .pro-layout-open-menu .ant-menu-submenu-title:hover {
+      background: transparent;
+      position  : relative;
+
+      &:before {
+        content         : '';
+        border-radius   : var(--zaui-border-radius, 4px);
+        background-color: var(--zaui-brand, #006aff);
+        opacity         : 0.08;
+        height          : 38px;
+        position        : absolute;
+        left            : var(--zaui-space-size-sm, 8px);
+        width           : calc(100% - 16px);
+      }
+    }
+
+    .pro-layout-open-menu .ant-menu-item-selected {
+      &::after {
+        display: none;
+      }
+
+      background: transparent !important;
+
+      h2 {
+        color: var(--zaui-brand, #006aff) !important;
+      }
+    }
+  }
+
   .pro-layout-row-has-notice {
     .pro-layout-content {
       min-height: calc(100vh - 80px);
@@ -55,4 +210,4 @@
       top: 0 !important;
     }
   }
-}
+}

package/lib/ProLayout/utils/index.js

@@ -19,7 +19,7 @@ var _lodash = require("lodash");
  * @param activeMenu  上一次激活url地址
  * @return result
  */
-var getIdsByPathName = function getIdsByPathName(menus, activeMenu) {
+var getIdsByPathName = exports.getIdsByPathName = function getIdsByPathName(menus, activeMenu) {
   var _pathName = window.location.pathname;
   if (activeMenu) {
     _pathName = activeMenu;
@@ -50,8 +50,7 @@ var getIdsByPathName = function getIdsByPathName(menus, activeMenu) {
  * @param menuData 菜单数据源
  * @returns []
  */
-exports.getIdsByPathName = getIdsByPathName;
-var transformMenu = function transformMenu(menuData) {
+var transformMenu = exports.transformMenu = function transformMenu(menuData) {
   var data = (0, _toConsumableArray2.default)(menuData);
   var menuDeep = function menuDeep(menuDeepItem) {
     if (!Array.isArray(menuDeepItem) || !menuDeepItem.length) {
@@ -96,8 +95,7 @@ var transformMenu = function transformMenu(menuData) {
  * @param data 菜单数据源
  * @returns []
  */
-exports.transformMenu = transformMenu;
-var transformMenus = function transformMenus(data) {
+var transformMenus = exports.transformMenus = function transformMenus(data) {
   if ((0, _lodash.isPlainObject)(data)) {
     // @ts-ignore
     if (!Array.isArray(data === null || data === void 0 ? void 0 : data.menus)) {
@@ -117,7 +115,6 @@ var transformMenus = function transformMenus(data) {
  * @param name 参数key
  * @returns string
  */
-exports.transformMenus = transformMenus;
 function getUrlParams(name) {
   var search = window.location.search;
   var tmpArray = search.substr(1, search.length).split('&');
@@ -141,7 +138,7 @@ function getUrlParams(name) {
  * @param pathName  url地址
  * @param routerMatch  匹配模式id & url
  */
-var getPathNameKey = function getPathNameKey(_ref) {
+var getPathNameKey = exports.getPathNameKey = function getPathNameKey(_ref) {
   var menus = _ref.menus,
     pathName = _ref.pathName;
   var result;
@@ -169,5 +166,4 @@ var getPathNameKey = function getPathNameKey(_ref) {
   };
   menuDeep(menus);
   return result;
-};
-exports.getPathNameKey = getPathNameKey;
+};

package/lib/ProSelect/components/AdaptiveTooltip.d.ts

@@ -0,0 +1,4 @@
+declare const AdaptiveTooltip: ({ children }: {
+    children: any;
+}) => JSX.Element;
+export default AdaptiveTooltip;

package/lib/ProSelect/components/AdaptiveTooltip.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _antd = require("antd");
+var _react = require("react");
+var AdaptiveTooltip = function AdaptiveTooltip(_ref) {
+  var children = _ref.children;
+  var _useState = (0, _react.useState)('right'),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    placement = _useState2[0],
+    setPlacement = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var handleResize = function handleResize() {
+      var tooltipElement = document.getElementById('adaptive-tooltip');
+      if (tooltipElement) {
+        var boundingRect = tooltipElement.getBoundingClientRect();
+        var windowWidth = window.innerWidth;
+        if (windowWidth - boundingRect.right < 150) {
+          setPlacement('left');
+        } else {
+          setPlacement('right');
+        }
+      }
+    };
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return function () {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [children]);
+  return (0, _jsxRuntime.jsx)(_antd.Tooltip, {
+    placement: placement,
+    title: (0, _jsxRuntime.jsx)("div", {
+      onMouseDown: function onMouseDown(e) {
+        return e.stopPropagation();
+      },
+      children: children
+    }),
+    id: "adaptive-tooltip",
+    children: (0, _jsxRuntime.jsxs)("span", {
+      className: "pro-select-ellipse",
+      children: [" ", children]
+    })
+  });
+};
+var _default = exports.default = AdaptiveTooltip;

package/lib/ProSelect/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { PropSelectProps } from './propsType';
-export declare const ProSelect: (props: PropSelectProps, ref: React.Ref<unknown> | undefined) => React.JSX.Element;
+import './index.less';
+export declare const ProSelect: (props: PropSelectProps, ref: React.Ref<unknown> | undefined) => JSX.Element;
 declare const _default: React.ForwardRefExoticComponent<PropSelectProps & React.RefAttributes<unknown>>;
 export default _default;