@zat-design/sisyphus-react 3.0.13

package/es/ProLayout/components/Layout/Menu/OpenMenu/style/index.less

@@ -0,0 +1,177 @@
+.pro-layout-open-menu {
+  color: #fff;
+
+  .ant-menu-root {
+    overflow-y: auto !important;
+
+    &>.ant-menu-submenu>.ant-menu-submenu-title,
+    &>.ant-menu-item.ant-menu-item-only-child {
+      padding-left: 16px !important;
+    }
+
+    &>.ant-menu-submenu {
+
+      &>.ant-menu-sub>.ant-menu-submenu>.ant-menu-submenu-title,
+      &>.ant-menu-item-only-child,
+      &>.ant-menu-sub>.ant-menu-item-only-child {
+        padding-left: 16px !important;
+      }
+    }
+
+    &>.ant-menu-item-only-child {
+      min-height    : 48px;
+      padding-top   : 12px;
+      padding-bottom: 12px;
+      margin        : 0;
+      height        : auto;
+
+      h2 {
+        line-height: initial !important;
+        height     : auto !important;
+        white-space: pre-wrap;
+      }
+    }
+
+    .ant-menu-item {
+      padding-left: 30px !important;
+    }
+
+  }
+
+  .ant-menu-inline {
+    .ant-menu-submenu-title {
+      margin: 0;
+    }
+  }
+
+  .ant-menu-item,
+  .ant-menu-submenu-title {
+    &:hover {
+      background: var(--ant-primary-8, #003eb3);
+    }
+  }
+
+
+  .ant-menu.ant-menu-dark {
+    background: #1A202D;
+    overflow-x: hidden;
+
+    .ant-menu-item-only-child {
+      &:hover {
+        background: var(--ant-primary-8, #003eb3);
+      }
+    }
+  }
+
+  .ant-menu-item-selected {
+    background: var(--zaui-brand, #006aff) !important;
+
+    h2 {
+      color: #fff !important;
+    }
+  }
+
+  .ant-menu-sub.ant-menu-inline>.ant-menu-item,
+  .ant-menu-submenu-title {
+    white-space   : pre-wrap;
+    line-height   : initial !important;
+    height        : auto !important;
+    margin        : 0;
+    padding-top   : 12px;
+    padding-bottom: 12px;
+    min-height    : 48px;
+  }
+
+  .ant-menu-title-content {
+
+
+    div {
+      display        : flex;
+      align-items    : center;
+      justify-content: left;
+
+      .pro-layout-icon {
+        flex  : 0 0 20px;
+        width : 20px;
+        height: 20px;
+        color : #CACACA;
+      }
+
+      h2 {
+        flex-grow       : 1;
+        margin-bottom   : 0;
+        opacity         : 1;
+        color           : #fff;
+        transition      : opacity .3s cubic-bezier(.645, .045, .355, 1), margin .3s, color .3s;
+        display         : inline-block;
+        padding-left    : 12px;
+        color           : #CACACA;
+        // color        : var(--zaui-base-bg, #fff);
+        font-weight     : 400;
+        font-size       : 14px;
+      }
+    }
+
+
+  }
+
+  .anticon-caret-down {
+    color     : #CACACA;
+    transform : rotateZ(0deg);
+    top       : auto;
+    transition: all 0.1s ease-in;
+  }
+
+  .ant-menu-submenu-open {
+    .anticon-caret-down {
+      transform: rotateZ(180deg);
+      color    : #fff;
+    }
+
+    .ant-menu-submenu-inline {
+      .anticon-caret-down {
+        transform: rotateZ(0deg);
+        color    : #CACACA;
+      }
+
+      &.ant-menu-submenu-open {
+        .anticon-caret-down {
+          transform: rotateZ(180deg);
+          color    : #fff;
+        }
+      }
+    }
+  }
+
+  .ant-menu-submenu:hover>.ant-menu-submenu-title>.ant-menu-submenu-expand-icon {
+    color: #fff;
+  }
+
+  .ant-menu-submenu-selected {
+    &>.ant-menu-submenu-title {
+      .ant-menu-title-content div {
+        .pro-layout-icon {
+          color: #fff;
+        }
+
+        h2 {
+          font-weight: bold;
+          color      : #fff;
+        }
+      }
+
+    }
+
+    .ant-menu-item-only-child .ant-menu-title-content div {
+      .pro-layout-icon {
+        color: #CACACA;
+      }
+
+      h2 {
+        font-weight: 400;
+        color      : #CACACA;
+      }
+    }
+
+  }
+}

package/es/ProLayout/components/Layout/Menu/SideMenu/index.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+declare const SideMenu: FC<any>;
+export default SideMenu;

package/es/ProLayout/components/Layout/Menu/SideMenu/index.js

@@ -0,0 +1,34 @@
+import React, { useRef } from 'react';
+import classnames from 'classnames';
+import { useSize } from 'ahooks';
+import OpenMenu from '../OpenMenu';
+var SideMenu = function SideMenu(props) {
+  var dataSource = props.dataSource;
+  var ref = useRef(null);
+  var size = useSize(ref);
+  var menus = dataSource.menus,
+    iconfontUrl = dataSource.iconfontUrl,
+    notice = dataSource.notice,
+    collapsed = dataSource.collapsed,
+    headerHeight = dataSource.headerHeight;
+  var cls = classnames({
+    'pro-layout-sider-menu': true
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: cls
+  }, /*#__PURE__*/React.createElement("h2", {
+    ref: ref
+  }, (menus === null || menus === void 0 ? void 0 : menus.name) || ''), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(OpenMenu, {
+    className: "pro-layout-sider-menu-list",
+    theme: "light",
+    dataSource: {
+      menus: (menus === null || menus === void 0 ? void 0 : menus.children) || [],
+      iconfontUrl: iconfontUrl,
+      sideMenu: true
+    },
+    style: {
+      height: "calc(100vh - ".concat(headerHeight + (notice ? 32 : 0) + ((size === null || size === void 0 ? void 0 : size.height) || 0), "px)")
+    }
+  })));
+};
+export default SideMenu;

package/es/ProLayout/components/Layout/Menu/SideMenu/style/index.less

@@ -0,0 +1,97 @@
+.pro-layout-sider-menu {
+  width     : 220px;
+  background: #fff;
+
+  h2 {
+    margin-bottom: 0;
+    padding      : 16px 16px 8px;
+    color        : #343434;
+    color        : var(--zaui-text);
+    font-weight  : 500;
+    font-size    : var(--zaui-font-size-lg, 16px);
+    line-height  : inherit;
+    text-align   : left;
+  }
+
+  .pro-layout-open-menu {
+    &.pro-layout-sider-menu-list {
+      overflow-y: auto;
+
+      .ant-menu-item-selected {
+        background-color: var(--ant-primary-1, #e6f4ff) !important;
+
+        h2 {
+          color: var(--zaui-brand, #006aff) !important;
+        }
+
+        &::after {
+          border-right-color: var(--ant-primary-1, #e6f4ff);
+        }
+      }
+
+      .ant-menu {
+        .ant-menu-title-content {
+          div h2 {
+            color  : var(--zaui-text);
+            padding: 0;
+          }
+
+          .pro-layout-open-menu-lv1 {
+            h2 {
+              color      : var(--zaui-text);
+              font-weight: 500;
+            }
+          }
+        }
+
+        .ant-menu-title-content div .pro-layout-icon {
+          margin-right: 12px;
+
+          &.pro-layout-icon-empty {
+            display: none;
+
+            &~h2 {
+              margin-left: 16px;
+            }
+          }
+        }
+
+        .pro-layout-icon {
+          fill : currentColor;
+          color: #343434 !important;
+        }
+
+        &.ant-menu-sub {
+          overflow  : hidden;
+          background: #fff;
+        }
+
+        overflow-x: hidden;
+        overflow-y: auto;
+
+        .ant-menu-submenu-title:hover,
+        .ant-menu-item:hover {
+          background-color: #f2f2f2;
+        }
+
+        .ant-menu-item {
+          margin: 0;
+        }
+
+        .anticon-caret-down {
+          color: #909090;
+        }
+
+        .ant-menu-submenu-title,
+        &.ant-menu-root>.ant-menu-item-only-child,
+        &.ant-menu-sub.ant-menu-inline>.ant-menu-item {
+          padding-top   : 10px;
+          padding-bottom: 10px;
+          min-height    : 40px;
+        }
+      }
+    }
+  }
+
+
+}

package/es/ProLayout/components/Layout/Menu/index.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import type { ProLayoutProps } from '../../../propTypes';
+declare const Menu: FC<ProLayoutProps>;
+export default Menu;

package/es/ProLayout/components/Layout/Menu/index.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import classnames from 'classnames';
+import packImg from '../../../images/pack.png';
+import OpenMenu from './OpenMenu';
+import FoldMenu from './FoldMenu'; // 折叠后菜单
+var Menu = function Menu(props) {
+  var headerHeight = props.headerHeight,
+    dataSource = props.dataSource,
+    iconfontUrl = props.iconfontUrl,
+    collapsed = props.collapsed,
+    notice = props.notice,
+    onToggle = props.onToggle,
+    pure = props.pure;
+  var menus = [];
+  var menuCls = classnames({
+    'pro-layout-menu': true,
+    'pro-layout-menu-open': collapsed
+  });
+  if (Array.isArray(dataSource)) {
+    menus = dataSource;
+  } else if (dataSource) {
+    menus = dataSource === null || dataSource === void 0 ? void 0 : dataSource.menus;
+  }
+  if (pure.leftMenu || pure === true) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: menuCls,
+    style: {
+      top: notice ? 80 + headerHeight - 48 : headerHeight
+    }
+  }, /*#__PURE__*/React.createElement(OpenMenu, {
+    dataSource: {
+      menus: menus,
+      iconfontUrl: iconfontUrl,
+      height: headerHeight + (notice ? 32 : 0) + 48
+    },
+    style: {
+      display: collapsed ? 'block' : 'none'
+    }
+  }), /*#__PURE__*/React.createElement(FoldMenu, {
+    dataSource: {
+      menus: menus,
+      iconfontUrl: iconfontUrl,
+      height: headerHeight + (notice ? 32 : 0) + 48,
+      notice: notice,
+      collapsed: collapsed,
+      headerHeight: headerHeight
+    },
+    style: {
+      display: collapsed ? 'none' : 'block',
+      height: "calc(100vh - ".concat(headerHeight + (notice ? 32 : 0) + 48 || 0, "px)")
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "pro-layout-menu-collapsed",
+    onClick: onToggle
+  }, /*#__PURE__*/React.createElement("img", {
+    src: packImg,
+    alt: "pack"
+  })));
+};
+export default Menu;

package/es/ProLayout/components/Layout/Menu/style/index.less

@@ -0,0 +1,131 @@
+@import "../FoldMenu/style/index.less";
+@import "../OpenMenu/style/index.less";
+@import "../SideMenu/style/index.less";
+
+/** 侧边栏 + 内容区 */
+.pro-layout-row {
+  flex-direction: column;
+
+  &.pro-layout-menu-no-collapsed {
+    .pro-layout-menu-fold-li {
+      display        : flex;
+      align-items    : center;
+      justify-content: center;
+
+      div {
+        width: 20px;
+      }
+
+      a {
+        width: 20px;
+      }
+
+      h2 {
+        display    : inline-block;
+        white-space: nowrap;
+        opacity    : 0;
+        transition : opacity 0.5s cubic-bezier(0.645, 0.045, 0.355, 1),
+          color 0.5s;
+      }
+    }
+  }
+
+  &.pro-layout-menu-collapsed {
+    .pro-layout-content {
+      margin-left: 220px !important;
+
+      .pro-layout-content {
+        margin-left: 0 !important;
+      }
+
+      &.pro-layout-content-left-pure {
+        margin-left: 0 !important;
+      }
+    }
+  }
+
+  &.pro-layout-has-notice {
+    .pro-layout-menu {
+      top: 80px;
+
+      #nav-list {
+        height: calc(100vh - 128px);
+      }
+    }
+
+    .pro-layout-content {
+      min-height: calc(100vh - 80px);
+      margin-top: 80px;
+    }
+  }
+
+  .pro-layout-menu {
+    position        : fixed;
+    top             : 48px;
+    left            : 0;
+    z-index         : 3;
+    width           : 48px;
+    height          : 100vh;
+    min-height      : 100%;
+    padding         : 0;
+    overflow-x      : hidden;
+    overflow-y      : auto;
+    background-color: #1a202d;
+    transition      : background .3s, width .3s cubic-bezier(.2, 0, 0, 1) 0s;
+
+    &.pro-layout-menu-open {
+      width: 220px;
+    }
+  }
+
+  /** 内容区 */
+  .pro-layout-content {
+    flex       : auto;
+    margin-left: 48px;
+    padding    : 0 var(--zaui-space-size-md, 16px);
+    transition : all 0.3s ease-in-out;
+    z-index    : 1;
+    flex       : auto;
+    min-height : calc(100vh - 48px);
+    margin-top : 48px;
+  }
+
+
+
+  .pro-layout-menu.pro-layout-menu-open .pro-layout-menu-collapsed {
+    left : 0;
+    width: 220px
+  }
+
+  .pro-layout-menu.pro-layout-menu-open .pro-layout-menu-collapsed img {
+    transform: rotate(-180deg)
+  }
+
+  .pro-layout-menu .pro-layout-menu-collapsed {
+    position       : fixed;
+    bottom         : 0;
+    left           : 0;
+    z-index        : 10;
+    display        : flex;
+    align-items    : center;
+    justify-content: center;
+    width          : 48px;
+    height         : 48px;
+    transition     : all .25s ease;
+    background     : #292f3b
+  }
+
+  .pro-layout-menu .pro-layout-menu-collapsed:hover {
+    background-color: rgba(185, 185, 189, .1)
+  }
+
+  .pro-layout-menu .pro-layout-menu-collapsed img {
+    display: inline-block;
+    width  : 20px;
+    height : 20px
+  }
+
+  .pro-layout-menu-open~.pro-layout-content {
+    margin-left: 220px !important
+  }
+}

package/es/ProLayout/components/Layout/Notice/index.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import type { ProLayoutProps } from '../../../propTypes';
+declare const Notice: FC<ProLayoutProps>;
+export default Notice;

package/es/ProLayout/components/Layout/Notice/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import tipMsg from '../../../images/tipMsg.png';
+import close from '../../../images/close.png';
+var Notice = function Notice(props) {
+  var headerHeight = props.headerHeight,
+    notice = props.notice,
+    onCancel = props.onCancel;
+  if (!notice) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pro-layout-header-notice",
+    style: {
+      top: headerHeight
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: tipMsg,
+    alt: "\u63D0\u793A"
+  }), " ", notice, /*#__PURE__*/React.createElement("span", {
+    className: "pro-layout-header-notice-close",
+    onClick: onCancel
+  }, /*#__PURE__*/React.createElement("img", {
+    src: close,
+    alt: "\u5173\u95ED"
+  })));
+};
+export default Notice;

package/es/ProLayout/components/Layout/Notice/style/index.less

@@ -0,0 +1,34 @@
+  /** 告知区 */
+  .pro-layout-header-notice {
+    position       : fixed;
+    top            : 48px;
+    z-index        : 101;
+    display        : flex;
+    align-items    : center;
+    justify-content: center;
+    width          : 100%;
+    min-height     : 32px;
+    color          : var(--zaui-text, #343434);
+    line-height    : 32px;
+    text-align     : center;
+    background     : var(--ant-primary-1, #e6f4ff);
+
+
+    img {
+      width       : 16px;
+      margin-right: 8px;
+    }
+
+    .pro-layout-header-notice-close {
+      position: absolute;
+      right   : 0;
+      display : block;
+      padding : 0 17px;
+      cursor  : pointer;
+
+      img {
+        width       : 12px;
+        margin-right: 0;
+      }
+    }
+  }

package/es/ProLayout/components/Layout/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Header } from './Header';
+export { default as Notice } from './Notice';
+export { default as Menu } from './Menu';
+export { default as Icon } from './Icon';

package/es/ProLayout/components/Layout/index.js

@@ -0,0 +1,4 @@
+export { default as Header } from './Header';
+export { default as Notice } from './Notice';
+export { default as Menu } from './Menu';
+export { default as Icon } from './Icon';

package/es/ProLayout/components/Layout/index.less

@@ -0,0 +1,4 @@
+@import "./Header/style/index.less";
+@import "./Icon/style/index.less";
+@import "./Menu/style/index.less";
+@import "./Notice/style/index.less";

package/es/ProLayout/components/ProCollapse/PropTypes.d.ts

@@ -0,0 +1,73 @@
+import React, { CSSProperties } from 'react';
+import { CollapseProps, CollapsePanelProps } from 'antd/lib/collapse';
+export type levelType = '1' | '2';
+export interface TitleListProps {
+    /**
+    * @description       描述的标题
+    * @default           -
+    */
+    label: string;
+    /**
+    * @description       描述的值
+    * @default           -
+    */
+    value: string | number | undefined | React.ReactNode;
+}
+export interface ProCollapseProps {
+    /**
+    * @description       折叠头部标题
+    * @default           -
+    */
+    title?: string | React.ReactNode;
+    /**
+    * @description       折叠头部多个标题
+    * @default           []
+    */
+    titleList?: TitleListProps[];
+    /**
+    * @description       id用于锚点定位
+    * @default           -
+    */
+    id?: string;
+    /**
+     * @description       内容区域样式
+     * @default           -
+     */
+    contentStyle?: CSSProperties;
+    /**
+    * @description       折叠等级
+    * @default           1
+    */
+    level?: levelType;
+    /**
+     * @description       二级折叠是否带收起
+     * @default           false
+     */
+    towCollapse?: boolean;
+    /**
+    * @description      标题右侧扩展信息
+    * @default           -
+    */
+    extra?: React.ReactNode;
+    /**
+    * @description      当有titleList显示的换行的数量
+    * @default           3
+    */
+    column?: number;
+    /**
+   * @description      一级标题是否默认折叠
+   * @default           false
+   */
+    folding?: boolean;
+    /**
+  * @description      antd Collapse属性
+  * @default           -
+  */
+    collapseProps?: CollapseProps;
+    /**
+  * @description      antd  CollapsePanel属性
+  * @default           -
+  */
+    collapsePanelProps?: CollapsePanelProps;
+    [key: string]: any;
+}

package/es/ProLayout/components/ProCollapse/PropTypes.js

@@ -0,0 +1 @@
+export {};

package/es/ProLayout/components/ProCollapse/index.d.ts

@@ -0,0 +1,3 @@
+import { ProCollapseProps } from './PropTypes';
+declare const ProCollapse: (props: ProCollapseProps) => JSX.Element;
+export default ProCollapse;