@zat-design/sisyphus-react 3.0.13

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

@@ -0,0 +1,95 @@
+import "antd/es/descriptions/style";
+import _Descriptions from "antd/es/descriptions";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import "antd/es/collapse/style";
+import _Collapse from "antd/es/collapse";
+import React from 'react';
+import { CaretRightOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
+var Panel = _Collapse.Panel;
+var ProCollapse = function ProCollapse(props) {
+  var title = props.title,
+    id = props.id,
+    _props$contentStyle = props.contentStyle,
+    contentStyle = _props$contentStyle === void 0 ? {} : _props$contentStyle,
+    children = props.children,
+    _props$level = props.level,
+    level = _props$level === void 0 ? '1' : _props$level,
+    _props$towCollapse = props.towCollapse,
+    towCollapse = _props$towCollapse === void 0 ? false : _props$towCollapse,
+    titleList = props.titleList,
+    extra = props.extra,
+    _props$column = props.column,
+    column = _props$column === void 0 ? 3 : _props$column,
+    style = props.style,
+    _props$folding = props.folding,
+    folding = _props$folding === void 0 ? false : _props$folding,
+    collapseProps = props.collapseProps,
+    collapsePanelProps = props.collapsePanelProps;
+  var cls = classNames({
+    'pro-collapse': true,
+    'pro-collapse-level2': level === '2',
+    'pro-collapse-list': titleList === null || titleList === void 0 ? void 0 : titleList.length
+  });
+  var content = /*#__PURE__*/React.createElement("div", {
+    className: "pro-collapse-content",
+    style: contentStyle
+  }, children);
+  var renderPanel = function renderPanel() {
+    if (level === '2') {
+      var level2Panel = classNames({
+        'pro-collapse-level2-collapse': towCollapse,
+        'pro-collapse-panel': true
+      });
+      var hasCollapse = {};
+      if (!towCollapse) {
+        hasCollapse.collapsible = 'disabled';
+      }
+      return /*#__PURE__*/React.createElement(Panel, _objectSpread(_objectSpread({
+        header: title,
+        key: "1",
+        className: level2Panel,
+        extra: /*#__PURE__*/React.createElement("div", {
+          className: "extra-info"
+        }, extra),
+        forceRender: true
+      }, hasCollapse), collapsePanelProps), content);
+    }
+    return /*#__PURE__*/React.createElement(Panel, _objectSpread({
+      header: title,
+      key: "1",
+      className: "pro-collapse-panel",
+      extra: /*#__PURE__*/React.createElement("div", {
+        className: "extra-info"
+      }, extra),
+      forceRender: true
+    }, collapsePanelProps), content);
+  };
+  var renderTitleList = function renderTitleList() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cls
+    }, /*#__PURE__*/React.createElement(_Descriptions, {
+      column: column
+    }, titleList === null || titleList === void 0 ? void 0 : titleList.map(function (item) {
+      return /*#__PURE__*/React.createElement(_Descriptions.Item, {
+        label: item.label
+      }, item.value || '-');
+    })), content);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    style: style
+  }, Array.isArray(titleList) && titleList.length ? renderTitleList() : /*#__PURE__*/React.createElement(_Collapse, _objectSpread({
+    className: cls,
+    bordered: false,
+    expandIcon: function expandIcon(_ref) {
+      var isActive = _ref.isActive;
+      return /*#__PURE__*/React.createElement(CaretRightOutlined, {
+        rotate: isActive ? -90 : 90
+      });
+    },
+    expandIconPosition: "end",
+    defaultActiveKey: folding ? [] : ['1']
+  }, collapseProps), renderPanel()));
+};
+export default ProCollapse;

package/es/ProLayout/components/ProCollapse/style/index.less

@@ -0,0 +1,153 @@
+.pro-collapse {
+  background: #f6f8fc;
+
+  &.ant-collapse {
+    .pro-collapse-panel {
+      margin-bottom: var(--zaui-space-size-md, 16px);
+    }
+  }
+
+  .ant-collapse-header {
+    align-items: center !important;
+    padding    : 14px var(--zaui-space-size-md, 16px) !important;
+  }
+
+  .ant-collapse-header-text {
+    color      : var(--zaui-text, #343434);
+    font-weight: 500;
+    font-size  : var(--zaui-font-size-lg, 16px);
+  }
+
+  .ant-collapse-expand-icon {
+    color: #c5c7cd;
+  }
+
+  &.ant-collapse-borderless .ant-collapse-item>.ant-collapse-content>.ant-collapse-content-box {
+    padding: 0;
+  }
+
+  .ant-collapse-content-box {
+    padding   : 0;
+    background: var(--zaui-base-bg, #ffffff);
+
+    .pro-collapse-content {
+      padding       : var(--zaui-space-size-md, 16px);
+      padding-bottom: 0;
+      background    : var(--zaui-base-bg, #ffffff);
+    }
+  }
+
+  &.pro-collapse-level2 {
+    margin-bottom: 0;
+    background   : var(--zaui-base-bg, #ffffff);
+
+    .ant-collapse-header {
+      margin-bottom: var(--zaui-space-size-md, 16px);
+      padding      : 0 !important;
+      background   : var(--zaui-base-bg, #ffffff);
+
+      .ant-collapse-header-text {
+        position    : relative;
+        padding-left: var(--zaui-space-size-sm, 8px);
+        font-size   : var(--zaui-font-size, 14px);
+
+        &::before {
+          position     : absolute;
+          top          : 50%;
+          left         : 0;
+          width        : 4px;
+          height       : 14px;
+          background   : var(--zaui-brand);
+          border-radius: var(--zaui-border-radius-card, 2px);
+          transform    : translateY(-50%);
+          content      : '';
+        }
+      }
+
+      .ant-collapse-extra {
+        .extra-info {
+          margin-right: 8px;
+        }
+      }
+    }
+
+    .pro-collapse-level2-collapse {
+      .ant-collapse-extra {
+        .extra-info {
+          margin-right: 32px;
+        }
+      }
+    }
+
+    .pro-collapse-content {
+      padding: 0;
+    }
+
+    &.ant-collapse .ant-collapse-item-disabled>.ant-collapse-header,
+    .ant-collapse .ant-collapse-item-disabled>.ant-collapse-header>.arrow {
+      color : var(--zaui-text, #343434);
+      cursor: default;
+    }
+
+    .ant-collapse-expand-icon {
+      display: none;
+    }
+
+    .pro-collapse-level2-collapse {
+      .ant-collapse-expand-icon {
+        display: block;
+      }
+    }
+  }
+
+  .ant-collapse-extra {
+    .extra-info {
+      margin-right: 24px;
+    }
+  }
+
+  &.pro-collapse-list {
+
+    .ant-descriptions-row>th,
+    .ant-descriptions-row>td {
+      padding   : 15px 0;
+      background: #fafafa;
+
+      &.ant-descriptions-item {
+        padding-left: var(--zaui-space-size-md, 16px);
+      }
+    }
+
+    .ant-descriptions-row {
+      td:first-child {
+        position: relative;
+
+        &::before {
+          position     : absolute;
+          top          : 50%;
+          left         : 8px;
+          width        : 4px;
+          height       : 14px;
+          background   : var(--zaui-brand);
+          border-radius: var(--zaui-border-radius-card, 2px);
+          transform    : translateY(-50%);
+          content      : '';
+        }
+      }
+    }
+
+    .ant-descriptions-item-container {
+
+      .ant-descriptions-item-label,
+      .ant-descriptions-item-content {
+        color      : #0a0a0a !important;
+        font-weight: 500 !important;
+        font-size  : var(--zaui-font-size, 14px);
+      }
+    }
+
+    .ant-descriptions {
+      margin-bottom: var(--zaui-space-size-md, 16px);
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+export interface stateProps {
+    width?: number;
+    [key: string]: any;
+}
+export interface ProFooterProps {
+    visible?: boolean;
+    zIndex?: number;
+    sideDom?: string;
+    contentDom?: string;
+    [key: string]: any;
+}

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

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

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ProFooterProps } from './PropTypes';
+declare const _default: React.MemoExoticComponent<(props: ProFooterProps) => JSX.Element>;
+export default _default;

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

@@ -0,0 +1,47 @@
+import "antd/es/space/style";
+import _Space from "antd/es/space";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { useSize } from 'ahooks';
+import classnames from 'classnames';
+import React, { memo, useEffect } from 'react';
+var ProFooter = function ProFooter(props) {
+  var _props$visible = props.visible,
+    visible = _props$visible === void 0 ? true : _props$visible,
+    className = props.className,
+    children = props.children,
+    _props$zIndex = props.zIndex,
+    zIndex = _props$zIndex === void 0 ? 100 : _props$zIndex,
+    _props$sideDom = props.sideDom,
+    sideDom = _props$sideDom === void 0 ? '.pro-layout-sider-nav' : _props$sideDom,
+    _props$contentDom = props.contentDom,
+    contentDom = _props$contentDom === void 0 ? '.pro-layout-content' : _props$contentDom;
+  var size = useSize(function () {
+    return document.querySelector(sideDom) || document.querySelector('.pro-layout-menu');
+  });
+  var boxDom = document.querySelector(contentDom);
+  useEffect(function () {
+    if (boxDom && visible) {
+      boxDom.style.paddingBottom = '64px';
+    }
+    return function () {
+      if (boxDom) {
+        boxDom.style.paddingBottom = '16px';
+      }
+    };
+  }, [boxDom]);
+  if (!visible) {
+    return null;
+  }
+  var cls = classnames(_defineProperty({
+    'pro-footer': true
+  }, "".concat(className), className));
+  return /*#__PURE__*/React.createElement("div", {
+    className: cls,
+    style: _objectSpread({
+      zIndex: zIndex,
+      width: "calc(100% - ".concat(size === null || size === void 0 ? void 0 : size.width, "px)")
+    }, props.style)
+  }, /*#__PURE__*/React.createElement(_Space, null, children));
+};
+export default /*#__PURE__*/memo(ProFooter);

package/es/ProLayout/components/ProFooter/style/index.less

@@ -0,0 +1,10 @@
+.pro-footer {
+  position  : fixed;
+  bottom    : 0;
+  right     : 0;
+  width     : 100%;
+  padding   : var(--zaui-space-size-md, 16px) var(--zaui-space-size-lg, 32px);
+  background: var(--zaui-base-bg, #ffffff);
+  box-shadow: 3px 2px 12px 0 hsla(0, 0%, 59.2%, .32);
+  z-index   : 999;
+}

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

@@ -0,0 +1,72 @@
+import React from 'react';
+export type BreadcrumbType = 'breadcrumb' | 'copy' | 'info' | 'version' | 'tag';
+export type NavType = 'money' | 'thousandth' | 'enumName' | 'enumCodeName' | 'date' | 'dateTime';
+export interface BreadcrumbColumnsProps {
+    type?: BreadcrumbType;
+    valueType?: BreadcrumbType;
+    value: any;
+    width?: string | number;
+    show?: boolean;
+    tag?: string | React.ReactNode;
+}
+export interface SubDescribeColumnsProps {
+    label: string | React.ReactNode;
+    type?: NavType;
+    valueType?: NavType;
+    precision?: number;
+    value: any;
+    show?: boolean;
+    code?: string;
+}
+export interface DescribeColumnsProps {
+    label: string | React.ReactNode;
+    copyable?: boolean;
+    value: string | React.ReactNode;
+    show?: boolean;
+    link?: string;
+    tag?: string | React.ReactNode;
+}
+export interface ProHeaderProps {
+    title?: string | React.ReactNode;
+    /**
+     * @description       面包屑配置数据
+     * @deprecated        将于下个版本 4.0.0 被弃用
+     * @default           -
+     */
+    breadcrumbList?: BreadcrumbColumnsProps[];
+    /**
+   * @description      面包屑配置数据
+   * @default           -
+   */
+    breadcrumbColumns?: BreadcrumbColumnsProps[];
+    bodyOverFlowHidden?: boolean;
+    actionRender?: React.ReactNode | React.ReactNode[];
+    /**
+    * @description      次级描述数据源配置
+    * @deprecated        将于下个版本 4.0.0 被弃用
+    * @default           -
+    */
+    describeList?: SubDescribeColumnsProps[];
+    /**
+    * @description      主要描述数据源配置
+    * @default           -
+    */
+    describeColumns?: DescribeColumnsProps[];
+    /**
+    * @description      次级描述数据源配置
+    * @default           -
+    */
+    subDescribeColumns?: SubDescribeColumnsProps[];
+    /**
+   * @description      次级描述是否展开
+   * @default           -
+   */
+    collapsed?: boolean;
+    fixedTop?: string | number;
+    showBack?: boolean;
+    showShadow?: boolean;
+    autoBack?: number;
+    zIndex?: number;
+    onBack?: () => void;
+    [key: string]: any;
+}

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

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

package/es/ProLayout/components/ProHeader/components/Copy/index.d.ts

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

package/es/ProLayout/components/ProHeader/components/Copy/index.js

@@ -0,0 +1,25 @@
+import "antd/es/typography/style";
+import _Typography from "antd/es/typography";
+import React from 'react';
+import { ReactSVG } from 'react-svg';
+import { CheckOutlined } from '@ant-design/icons';
+import copySvg from '../../../../../assets/copy.svg';
+var Paragraph = _Typography.Paragraph;
+var Copy = function Copy(_ref) {
+  var text = _ref.text;
+  return /*#__PURE__*/React.createElement(Paragraph, {
+    className: "pro-header-copy",
+    copyable: {
+      text: text,
+      icon: [/*#__PURE__*/React.createElement(ReactSVG, {
+        key: "copy-icon",
+        className: "drag-icon",
+        src: copySvg
+      }), /*#__PURE__*/React.createElement(CheckOutlined, {
+        key: "copied-icon"
+      })],
+      tooltips: ['复制', '复制成功']
+    }
+  });
+};
+export default Copy;

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

@@ -0,0 +1 @@
+export { default as Copy } from './Copy';

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

@@ -0,0 +1 @@
+export { default as Copy } from './Copy';

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ProHeaderProps } from './PropTypes';
+declare const _default: React.MemoExoticComponent<(props: ProHeaderProps) => JSX.Element>;
+export default _default;