@zat-design/sisyphus-react 3.0.13

package/lib/ProLayout/components/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ProCollapse", {
+  enumerable: true,
+  get: function get() {
+    return _ProCollapse.default;
+  }
+});
+Object.defineProperty(exports, "ProFooter", {
+  enumerable: true,
+  get: function get() {
+    return _ProFooter.default;
+  }
+});
+Object.defineProperty(exports, "ProHeader", {
+  enumerable: true,
+  get: function get() {
+    return _ProHeader.default;
+  }
+});
+var _ProCollapse = _interopRequireDefault(require("./ProCollapse"));
+var _ProFooter = _interopRequireDefault(require("./ProFooter"));
+var _ProHeader = _interopRequireDefault(require("./ProHeader"));

package/lib/ProLayout/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { ProLayoutProps } from './propTypes';
+export declare const LayoutContext: React.Context<{}>;
+declare const ProLayout: {
+    (props: ProLayoutProps): JSX.Element;
+    defaultProps: {
+        menus: any[];
+        iconfontUrl: string;
+        title: string;
+        collapsed: boolean;
+        routerMatch: string;
+        pure: boolean;
+        headerHeight: number;
+        contentStyle: {};
+    };
+    ProCollapse: (props: import("./components/ProCollapse/PropTypes").ProCollapseProps) => JSX.Element;
+    ProFooter: React.MemoExoticComponent<(props: import("./components/ProFooter/PropTypes").ProFooterProps) => JSX.Element>;
+    ProHeader: React.MemoExoticComponent<(props: import("./components/ProHeader/PropTypes").ProHeaderProps) => JSX.Element>;
+};
+export default ProLayout;

package/lib/ProLayout/index.js

@@ -0,0 +1,117 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _antd = require("antd");
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _ahooks = require("ahooks");
+var _index = require("../index");
+var _components = require("./components");
+var _index2 = require("./components/Layout/index");
+var _utils = require("./utils");
+// 全局上下文
+var LayoutContext = /*#__PURE__*/(0, _react.createContext)({});
+exports.LayoutContext = LayoutContext;
+var ProLayout = function ProLayout(props) {
+  var children = props.children,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    pure = props.pure,
+    headerHeight = props.headerHeight,
+    contentStyle = props.contentStyle,
+    _props$waterMarkProps = props.waterMarkProps,
+    waterMarkProps = _props$waterMarkProps === void 0 ? {} : _props$waterMarkProps,
+    headerNotice = props.headerNotice,
+    noticeIn = props.notice,
+    dataSource = props.dataSource;
+  var _useSetState = (0, _ahooks.useSetState)({
+      notice: headerNotice || noticeIn,
+      menus: []
+    }),
+    _useSetState2 = (0, _slicedToArray2.default)(_useSetState, 2),
+    _useSetState2$ = _useSetState2[0],
+    notice = _useSetState2$.notice,
+    menus = _useSetState2$.menus,
+    setState = _useSetState2[1];
+  var _useToggle = (0, _ahooks.useToggle)(props.collapsed || false),
+    _useToggle2 = (0, _slicedToArray2.default)(_useToggle, 2),
+    collapsed = _useToggle2[0],
+    _useToggle2$ = _useToggle2[1],
+    toggle = _useToggle2$.toggle,
+    set = _useToggle2$.set;
+  (0, _ahooks.useDeepCompareEffect)(function () {
+    set(props.collapsed || false);
+  }, [props.collapsed]);
+  (0, _ahooks.useDeepCompareEffect)(function () {
+    if (Array.isArray(dataSource) && !dataSource.length) {
+      return _antd.message.warning('Warning: Missing menu data source, or menu data source is not an array');
+    }
+    var userData = (0, _utils.transformMenus)(dataSource);
+    setState({
+      menus: userData
+    });
+  }, [dataSource]);
+  /**
+   * 关闭提示框
+   */
+  var onCancelNotice = function onCancelNotice() {
+    setState({
+      notice: null
+    });
+  };
+  var contentCls = (0, _classnames.default)({
+    'pro-layout-row': true,
+    'pro-layout-row-has-notice': notice,
+    'pro-layout-row-pure': typeof pure === 'boolean' && pure,
+    'pro-layout-row-top-pure': typeof pure !== 'boolean' && pure.topMenu,
+    'pro-layout-row-left-pure': typeof pure !== 'boolean' && pure.leftMenu
+  });
+  var layoutDom = /*#__PURE__*/_react.default.createElement("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)({}, contentStyle)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: headerHeight - 48
+    }
+  }, children))));
+  return /*#__PURE__*/_react.default.createElement(LayoutContext.Provider, {
+    value: {}
+  }, !waterMarkProps ? layoutDom : /*#__PURE__*/_react.default.createElement(_index.ProWaterMark, (0, _objectSpread2.default)({}, waterMarkProps), layoutDom));
+};
+ProLayout.defaultProps = {
+  menus: [],
+  iconfontUrl: '',
+  title: '',
+  collapsed: false,
+  routerMatch: 'id',
+  pure: false,
+  headerHeight: 48,
+  contentStyle: {}
+};
+ProLayout.ProCollapse = _components.ProCollapse;
+ProLayout.ProFooter = _components.ProFooter;
+ProLayout.ProHeader = _components.ProHeader;
+var _default = ProLayout;
+exports.default = _default;

package/lib/ProLayout/propTypes.d.ts

@@ -0,0 +1,60 @@
+import { CSSProperties, ReactNode } from 'react';
+import { ProWaterMarkProps } from '../ProWaterMark/propsType';
+export interface MenusProps {
+    id?: number;
+    code?: string;
+    name?: string;
+    url?: string;
+    redirectUrl?: string;
+    parentId?: number | null;
+    description?: any;
+    extraInfo?: any;
+    sort?: number | undefined | null;
+    hideInMenu?: boolean;
+    icon?: string;
+    imgUrl?: string;
+    imgActiveUrl?: string;
+    type?: string;
+    keyUrlPath?: string[];
+    keyIdPath?: number[];
+    children?: MenusProps[] | null;
+    [key: string]: any;
+}
+export interface DataSourceProps {
+    userInfo?: any;
+    menus?: MenusProps[];
+}
+type pureKey = boolean | {
+    topMenu?: boolean;
+    leftMenu?: boolean;
+};
+interface pureObject {
+    [key: string]: pureKey;
+}
+export interface ProLayoutProps {
+    logo?: ReactNode | string;
+    className?: string;
+    iconfontUrl?: string;
+    rightContentRender?: ReactNode;
+    headerContentRender?: ReactNode;
+    headerTitleRender?: ReactNode;
+    headerNotice?: ReactNode | string;
+    notice?: ReactNode | string;
+    title?: string;
+    dataSource?: DataSourceProps | Partial<MenusProps>;
+    collapsed?: boolean;
+    /**
+    *  是否带有菜单界面，true不带，只显示content内容
+    */
+    pure: pureObject;
+    headerHeight: number;
+    contentStyle?: CSSProperties;
+    waterMarkProps?: ProWaterMarkProps;
+    [key: string]: any;
+}
+export interface ProLayoutStates {
+    collapsed?: boolean;
+    notice?: ReactNode | string;
+    [key: string]: any;
+}
+export {};

package/lib/ProLayout/propTypes.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/ProLayout/style/index.less

@@ -0,0 +1,52 @@
+@import "../components/Layout/index.less";
+@import "../components/ProCollapse/style/index.less";
+@import "../components/ProFooter/style/index.less";
+@import "../components/ProHeader/style/index.less";
+
+
+.pro-layout {
+  display       : flex;
+  flex-direction: column;
+  background    : var(--zaui-base-bg, #ffffff);
+
+  /** 内容区 */
+  .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-has-notice {
+      margin-top: 80px;
+      min-height: calc(100vh - 80px);
+    }
+  }
+
+  .pro-layout-row-pure {
+    .pro-layout-content {
+      margin: 0 !important;
+    }
+  }
+
+  .pro-layout-row-top-pure {
+    .pro-layout-content {
+      margin-top: 0 !important;
+    }
+  }
+
+  .pro-layout-row-left-pure {
+    .pro-layout-content {
+      margin-left: 0 !important;
+    }
+  }
+
+  .pro-layout-header-pure+.pro-layout-row {
+    .pro-layout-sider-new-nav {
+      top: 0 !important;
+    }
+  }
+}

package/lib/ProLayout/utils/index.d.ts

@@ -0,0 +1,36 @@
+import type { MenusProps } from '../propTypes';
+/**
+ * 通过URL获取对应keyIdPath
+ * @param menus  菜单数据
+ * @param activeMenu  上一次激活url地址
+ * @return result
+ */
+export declare const getIdsByPathName: (menus: any[], activeMenu?: string) => number[];
+/**
+ * 转换菜单数据源评价keyUrlPath与keyIdPath
+ * @param menuData 菜单数据源
+ * @returns []
+ */
+export declare const transformMenu: (menuData: any[]) => any[];
+/**
+ * 转换菜单数据源评价keyUrlPath与keyIdPath
+ * @param data 菜单数据源
+ * @returns []
+ */
+export declare const transformMenus: (data: MenusProps) => any[] | MenusProps;
+/**
+ * 获取URL中的search参数
+ * @param name 参数key
+ * @returns string
+ */
+export declare function getUrlParams(name: string): string;
+/**
+ * 通过URL获取对应keyIdPath
+ * @param menus  菜单数据
+ * @param pathName  url地址
+ * @param routerMatch  匹配模式id & url
+ */
+export declare const getPathNameKey: ({ menus, pathName, }: {
+    menus: any[];
+    pathName: string;
+}) => any;

package/lib/ProLayout/utils/index.js

@@ -0,0 +1,173 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPathNameKey = exports.getIdsByPathName = void 0;
+exports.getUrlParams = getUrlParams;
+exports.transformMenus = exports.transformMenu = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _lodash = require("lodash");
+/* eslint-disable no-mixed-operators */
+/* eslint-disable prefer-destructuring */
+
+/**
+ * 通过URL获取对应keyIdPath
+ * @param menus  菜单数据
+ * @param activeMenu  上一次激活url地址
+ * @return result
+ */
+var getIdsByPathName = function getIdsByPathName(menus, activeMenu) {
+  var _pathName = window.location.pathname;
+  if (activeMenu) {
+    _pathName = activeMenu;
+  }
+  var result;
+  var menuDeep = function menuDeep(menuDeepItem) {
+    for (var i = 0; i <= menuDeepItem.length - 1; i++) {
+      var item = menuDeepItem[i];
+      // 只包含一级菜单时，解决URL：/endorsement/demo/123无法选中问题
+      if ((item === null || item === void 0 ? void 0 : item.url) === _pathName || item.redirectUrl === _pathName) {
+        result = item.keyIdPath;
+        break;
+      }
+      if (Array.isArray(item.children) && item.children.length) {
+        menuDeep(item.children);
+      } else if (((item === null || item === void 0 ? void 0 : item.url) && _pathName.includes(item.url.split('?')[0]) || (item === null || item === void 0 ? void 0 : item.redirectUrl) && _pathName.includes(item.redirectUrl.split('?')[0])) && !result) {
+        // 当循环到最后一层时判断URL是否包含最后一层的URL，解决URL在URL中不存在的场景
+        result = item.keyIdPath;
+        break;
+      }
+    }
+  };
+  menuDeep(menus);
+  return result || [];
+};
+/**
+ * 转换菜单数据源评价keyUrlPath与keyIdPath
+ * @param menuData 菜单数据源
+ * @returns []
+ */
+exports.getIdsByPathName = getIdsByPathName;
+var transformMenu = function transformMenu(menuData) {
+  var data = (0, _toConsumableArray2.default)(menuData);
+  var menuDeep = function menuDeep(menuDeepItem) {
+    if (!Array.isArray(menuDeepItem) || !menuDeepItem.length) {
+      return [];
+    }
+    menuDeepItem.forEach(function (item, index) {
+      var _item$keyUrlPath, _item$keyIdPath, _item$children;
+      item.code = item.code || item.id;
+      // 拼接父级url与id数据
+      if (item === null || item === void 0 ? void 0 : (_item$keyUrlPath = item.keyUrlPath) === null || _item$keyUrlPath === void 0 ? void 0 : _item$keyUrlPath.length) {
+        item.keyUrlPath.push(item.redirectUrl || item.url);
+        // 去重解决重复问题
+        item.keyUrlPath = (0, _toConsumableArray2.default)(new Set(item.keyUrlPath));
+      } else {
+        item.keyUrlPath = [item.redirectUrl || item.url];
+      }
+      if (item === null || item === void 0 ? void 0 : (_item$keyIdPath = item.keyIdPath) === null || _item$keyIdPath === void 0 ? void 0 : _item$keyIdPath.length) {
+        item.keyIdPath.push(item.id);
+        // 去重解决重复问题
+        item.keyIdPath = (0, _toConsumableArray2.default)(new Set(item.keyIdPath));
+      } else {
+        item.keyIdPath = [item.id];
+      }
+      if (!['PAGE', 'MENU'].includes(item.type)) {
+        menuDeepItem.splice(index, 1);
+      }
+      if (Array.isArray(item === null || item === void 0 ? void 0 : item.children) && (item === null || item === void 0 ? void 0 : (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length)) {
+        // 给children注入keyUrlPath，keyIdPath
+        item.children.forEach(function (childrenItem) {
+          childrenItem.keyUrlPath = (0, _toConsumableArray2.default)(item.keyUrlPath);
+          childrenItem.keyIdPath = (0, _toConsumableArray2.default)(item.keyIdPath);
+        });
+        menuDeep(item.children);
+      }
+    });
+  };
+  menuDeep(data);
+  return data;
+};
+/**
+ * 转换菜单数据源评价keyUrlPath与keyIdPath
+ * @param data 菜单数据源
+ * @returns []
+ */
+exports.transformMenu = transformMenu;
+var transformMenus = function transformMenus(data) {
+  if ((0, _lodash.isPlainObject)(data)) {
+    // @ts-ignore
+    if (!Array.isArray(data === null || data === void 0 ? void 0 : data.menus)) {
+      return [];
+    }
+    // @ts-ignore
+    data.menus = transformMenu(data.menus);
+    return data;
+  }
+  if (Array.isArray(data)) {
+    return transformMenu(data);
+  }
+  return data;
+};
+/**
+ * 获取URL中的search参数
+ * @param name 参数key
+ * @returns string
+ */
+exports.transformMenus = transformMenus;
+function getUrlParams(name) {
+  var search = window.location.search;
+  var tmpArray = search.substr(1, search.length).split('&');
+  var paramsObj = {};
+  if (tmpArray != null) {
+    for (var i = 0; i < tmpArray.length; i++) {
+      var reg = /[=|^==]/; // 用=进行拆分，但不包括==
+      var set1 = tmpArray[i].replace(reg, '&');
+      var tmpStr2 = set1.split('&');
+      var array = {};
+      array[tmpStr2[0]] = tmpStr2[1];
+      paramsObj = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, paramsObj), array);
+    }
+  }
+  // 将参数进行返回
+  return paramsObj[name] ? decodeURIComponent(paramsObj[name]) : '';
+}
+/**
+ * 通过URL获取对应keyIdPath
+ * @param menus  菜单数据
+ * @param pathName  url地址
+ * @param routerMatch  匹配模式id & url
+ */
+var getPathNameKey = function getPathNameKey(_ref) {
+  var menus = _ref.menus,
+    pathName = _ref.pathName;
+  var result;
+  var menuDeep = function menuDeep(menuDeepItem) {
+    if (!Array.isArray(menuDeepItem) || !menuDeepItem.length) {
+      return [];
+    }
+    for (var i = 0; i <= menuDeepItem.length - 1; i++) {
+      var item = menuDeepItem[i];
+      if (!Array.isArray(item.keyUrlPath) || !item.keyUrlPath.length) {
+        break;
+      }
+      if ((item === null || item === void 0 ? void 0 : item.url) === pathName || (item === null || item === void 0 ? void 0 : item.redirectUrl) === pathName) {
+        result = item.keyIdPath;
+        break;
+      }
+      if (Array.isArray(item.children) && item.children.length) {
+        menuDeep(item.children);
+      } else if (((item === null || item === void 0 ? void 0 : item.url) && pathName.includes(item.url.split('?')[0]) || (item === null || item === void 0 ? void 0 : item.redirectUrl) && pathName.includes(item.redirectUrl.split('?')[0])) && !result) {
+        // URL未匹配时，循环到最后一层时判断URL是否包含最后一层的URL，解决URL在URL中不存在的场景
+        result = item.keyIdPath;
+        break;
+      }
+    }
+  };
+  menuDeep(menus);
+  return result;
+};
+exports.getPathNameKey = getPathNameKey;

package/lib/ProSelect/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { PropSelectProps } from './propsType';
+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;