@qn-pandora/pandora-component 4.0.13 → 4.1.0

package/CHANGELOG.json

@@ -2,21 +2,21 @@
   "name": "@qn-pandora/pandora-component",
   "entries": [
     {
-      "version": "4.0.13",
-      "tag": "@qn-pandora/pandora-component_v4.0.13",
-      "date": "Tue, 06 Jun 2023 07:33:10 GMT",
+      "version": "4.1.0",
+      "tag": "@qn-pandora/pandora-component_v4.1.0",
+      "date": "Tue, 27 Jun 2023 06:38:00 GMT",
       "comments": {
-        "patch": [
+        "minor": [
           {
-            "comment": "2023.06.06发布"
+            "comment": "2023.06.27发包"
           }
         ],
         "dependency": [
           {
-            "comment": "Updating dependency \"@qn-pandora/pandora-component-icons\" from `^3.0.15` to `^3.0.16`"
+            "comment": "Updating dependency \"@qn-pandora/pandora-component-icons\" from `^3.0.15` to `^3.1.0`"
           },
           {
-            "comment": "Updating dependency \"@qn-pandora/app-sdk\" from `^3.0.16` to `^3.0.17`"
+            "comment": "Updating dependency \"@qn-pandora/app-sdk\" from `^3.0.16` to `^3.1.0`"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,14 +1,14 @@
 # Change Log - @qn-pandora/pandora-component
 
-This log was last generated on Tue, 06 Jun 2023 07:33:10 GMT and should not be manually modified.
+This log was last generated on Tue, 27 Jun 2023 06:38:00 GMT and should not be manually modified.
 
-## 4.0.13
+## 4.1.0
 
-Tue, 06 Jun 2023 07:33:10 GMT
+Tue, 27 Jun 2023 06:38:00 GMT
 
-### Patches
+### Minor changes
 
-- 2023.06.06 发布
+- 2023.06.27 发包
 
 ## 4.0.12
 

package/es/components/Descriptions/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { DescriptionsProps } from 'antd/es/descriptions';
+import type { DescriptionsItemProps } from 'antd/es/descriptions/Item';
+export declare type TItem = DescriptionsItemProps & {
+    labelCol?: number;
+    remark?: string;
+};
+interface IDescriptionsProps extends DescriptionsProps {
+    labelCol?: number;
+    items: TItem[];
+}
+declare const Descriptions: React.FC<IDescriptionsProps>;
+export default Descriptions;

package/es/components/Descriptions/index.js

@@ -0,0 +1,57 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useMemo, useCallback } from 'react';
+import { Descriptions as BaseDescriptions, Tooltip } from 'antd';
+import classname from 'classnames';
+import { QuestionCircleOutlined } from '@qn-pandora/pandora-component-icons';
+import { SDK_PREFIX } from '../../constants/style';
+var Item = BaseDescriptions.Item;
+var DEFAYLT_MAX_COL = 24;
+var Descriptions = function (props) {
+    var items = props.items, className = props.className, labelStyle = props.labelStyle, labelCol = props.labelCol, other = __rest(props, ["items", "className", "labelStyle", "labelCol"]);
+    var getRealLabelWith = useCallback(function (labelCol) {
+        if (!labelCol)
+            return;
+        if (labelCol <= 1)
+            return 1;
+        if (labelCol >= DEFAYLT_MAX_COL)
+            return DEFAYLT_MAX_COL;
+        return (Math.round(labelCol) / DEFAYLT_MAX_COL) * 100;
+    }, []);
+    var getLabelStyle = useCallback(function (labelStyle, labelCol) {
+        var col = getRealLabelWith(labelCol);
+        return labelCol ? __assign(__assign({}, labelStyle), { width: col + "%" }) : labelStyle;
+    }, [getRealLabelWith]);
+    var realLabelStyle = useMemo(function () {
+        return getLabelStyle(labelStyle, labelCol);
+    }, [labelStyle, labelCol, getLabelStyle]);
+    return (React.createElement(BaseDescriptions, __assign({ className: classname(SDK_PREFIX + "-descriptions", className), labelStyle: realLabelStyle }, other), items.map(function (item, index) {
+        var label = item.label, labelCol = item.labelCol, labelStyle = item.labelStyle, other = __rest(item, ["label", "labelCol", "labelStyle"]);
+        return (React.createElement(Item, __assign({ key: index, labelStyle: getLabelStyle(labelStyle, labelCol), label: React.createElement(React.Fragment, null,
+                React.createElement("span", null,
+                    item.label,
+                    !!item.remark && (React.createElement(Tooltip, { title: item.remark },
+                        React.createElement(QuestionCircleOutlined, { className: SDK_PREFIX + "-remark-icon" }))))) }, other), item.children));
+    })));
+};
+export default Descriptions;

package/es/components/Descriptions/style.css

@@ -0,0 +1,337 @@
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+.ant-popover {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  -webkit-font-feature-settings: 'tnum';
+          font-feature-settings: 'tnum';
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1200;
+  font-weight: normal;
+  white-space: normal;
+  text-align: left;
+  cursor: auto;
+  -webkit-user-select: text;
+     -moz-user-select: text;
+      -ms-user-select: text;
+          user-select: text;
+}
+.ant-popover::after {
+  position: absolute;
+  background: rgba(255, 255, 255, 0.01);
+  content: '';
+}
+.ant-popover-hidden {
+  display: none;
+}
+.ant-popover-placement-top,
+.ant-popover-placement-topLeft,
+.ant-popover-placement-topRight {
+  padding-bottom: 10px;
+}
+.ant-popover-placement-right,
+.ant-popover-placement-rightTop,
+.ant-popover-placement-rightBottom {
+  padding-left: 10px;
+}
+.ant-popover-placement-bottom,
+.ant-popover-placement-bottomLeft,
+.ant-popover-placement-bottomRight {
+  padding-top: 10px;
+}
+.ant-popover-placement-left,
+.ant-popover-placement-leftTop,
+.ant-popover-placement-leftBottom {
+  padding-right: 10px;
+}
+.ant-popover-inner {
+  background-color: #ffffff;
+  background-clip: padding-box;
+  border-radius: 2px;
+  -webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+          box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.15) \9;
+          box-shadow: 0 0 8px rgba(0, 0, 0, 0.15) \9;
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .ant-popover {
+    /* IE10+ */
+  }
+  .ant-popover-inner {
+    -webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+            box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  }
+}
+.ant-popover-title {
+  min-width: 177px;
+  min-height: 32px;
+  margin: 0;
+  padding: 5px 16px 4px;
+  color: #333;
+  font-weight: 500;
+  border-bottom: 1px solid #e5e5e5;
+}
+.ant-popover-inner-content {
+  padding: 12px 16px;
+  color: rgba(0, 0, 0, 0.65);
+}
+.ant-popover-message {
+  position: relative;
+  padding: 4px 0 12px;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+}
+.ant-popover-message > .anticon {
+  position: absolute;
+  top: 8.0005px;
+  color: #f0a818;
+  font-size: 14px;
+}
+.ant-popover-message-title {
+  padding-left: 22px;
+}
+.ant-popover-buttons {
+  margin-bottom: 4px;
+  text-align: right;
+}
+.ant-popover-buttons button {
+  margin-left: 8px;
+}
+.ant-popover-arrow {
+  position: absolute;
+  display: block;
+  width: 8.48528137px;
+  height: 8.48528137px;
+  overflow: hidden;
+  background: transparent;
+  pointer-events: none;
+}
+.ant-popover-arrow-content {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  width: 6px;
+  height: 6px;
+  margin: auto;
+  background-color: #ffffff;
+  content: '';
+  pointer-events: auto;
+}
+.ant-popover-placement-top .ant-popover-arrow,
+.ant-popover-placement-topLeft .ant-popover-arrow,
+.ant-popover-placement-topRight .ant-popover-arrow {
+  bottom: 1.51471863px;
+}
+.ant-popover-placement-top .ant-popover-arrow-content,
+.ant-popover-placement-topLeft .ant-popover-arrow-content,
+.ant-popover-placement-topRight .ant-popover-arrow-content {
+  -webkit-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
+          box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
+  -webkit-transform: translateY(-4.24264069px) rotate(45deg);
+          transform: translateY(-4.24264069px) rotate(45deg);
+}
+.ant-popover-placement-top .ant-popover-arrow {
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+.ant-popover-placement-topLeft .ant-popover-arrow {
+  left: 16px;
+}
+.ant-popover-placement-topRight .ant-popover-arrow {
+  right: 16px;
+}
+.ant-popover-placement-right .ant-popover-arrow,
+.ant-popover-placement-rightTop .ant-popover-arrow,
+.ant-popover-placement-rightBottom .ant-popover-arrow {
+  left: 1.51471863px;
+}
+.ant-popover-placement-right .ant-popover-arrow-content,
+.ant-popover-placement-rightTop .ant-popover-arrow-content,
+.ant-popover-placement-rightBottom .ant-popover-arrow-content {
+  -webkit-box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
+          box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
+  -webkit-transform: translateX(4.24264069px) rotate(45deg);
+          transform: translateX(4.24264069px) rotate(45deg);
+}
+.ant-popover-placement-right .ant-popover-arrow {
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+.ant-popover-placement-rightTop .ant-popover-arrow {
+  top: 12px;
+}
+.ant-popover-placement-rightBottom .ant-popover-arrow {
+  bottom: 12px;
+}
+.ant-popover-placement-bottom .ant-popover-arrow,
+.ant-popover-placement-bottomLeft .ant-popover-arrow,
+.ant-popover-placement-bottomRight .ant-popover-arrow {
+  top: 1.51471863px;
+}
+.ant-popover-placement-bottom .ant-popover-arrow-content,
+.ant-popover-placement-bottomLeft .ant-popover-arrow-content,
+.ant-popover-placement-bottomRight .ant-popover-arrow-content {
+  -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06);
+          box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06);
+  -webkit-transform: translateY(4.24264069px) rotate(45deg);
+          transform: translateY(4.24264069px) rotate(45deg);
+}
+.ant-popover-placement-bottom .ant-popover-arrow {
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+.ant-popover-placement-bottomLeft .ant-popover-arrow {
+  left: 16px;
+}
+.ant-popover-placement-bottomRight .ant-popover-arrow {
+  right: 16px;
+}
+.ant-popover-placement-left .ant-popover-arrow,
+.ant-popover-placement-leftTop .ant-popover-arrow,
+.ant-popover-placement-leftBottom .ant-popover-arrow {
+  right: 1.51471863px;
+}
+.ant-popover-placement-left .ant-popover-arrow-content,
+.ant-popover-placement-leftTop .ant-popover-arrow-content,
+.ant-popover-placement-leftBottom .ant-popover-arrow-content {
+  -webkit-box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
+          box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
+  -webkit-transform: translateX(-4.24264069px) rotate(45deg);
+          transform: translateX(-4.24264069px) rotate(45deg);
+}
+.ant-popover-placement-left .ant-popover-arrow {
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+.ant-popover-placement-leftTop .ant-popover-arrow {
+  top: 12px;
+}
+.ant-popover-placement-leftBottom .ant-popover-arrow {
+  bottom: 12px;
+}
+.ant-popover-pink .ant-popover-inner {
+  background-color: #eb2f96;
+}
+.ant-popover-pink .ant-popover-arrow-content {
+  background-color: #eb2f96;
+}
+.ant-popover-magenta .ant-popover-inner {
+  background-color: #eb2f96;
+}
+.ant-popover-magenta .ant-popover-arrow-content {
+  background-color: #eb2f96;
+}
+.ant-popover-red .ant-popover-inner {
+  background-color: #f5222d;
+}
+.ant-popover-red .ant-popover-arrow-content {
+  background-color: #f5222d;
+}
+.ant-popover-volcano .ant-popover-inner {
+  background-color: #fa541c;
+}
+.ant-popover-volcano .ant-popover-arrow-content {
+  background-color: #fa541c;
+}
+.ant-popover-orange .ant-popover-inner {
+  background-color: #fa8c16;
+}
+.ant-popover-orange .ant-popover-arrow-content {
+  background-color: #fa8c16;
+}
+.ant-popover-yellow .ant-popover-inner {
+  background-color: #fadb14;
+}
+.ant-popover-yellow .ant-popover-arrow-content {
+  background-color: #fadb14;
+}
+.ant-popover-gold .ant-popover-inner {
+  background-color: #faad14;
+}
+.ant-popover-gold .ant-popover-arrow-content {
+  background-color: #faad14;
+}
+.ant-popover-cyan .ant-popover-inner {
+  background-color: #13c2c2;
+}
+.ant-popover-cyan .ant-popover-arrow-content {
+  background-color: #13c2c2;
+}
+.ant-popover-lime .ant-popover-inner {
+  background-color: #a0d911;
+}
+.ant-popover-lime .ant-popover-arrow-content {
+  background-color: #a0d911;
+}
+.ant-popover-green .ant-popover-inner {
+  background-color: #52c41a;
+}
+.ant-popover-green .ant-popover-arrow-content {
+  background-color: #52c41a;
+}
+.ant-popover-blue .ant-popover-inner {
+  background-color: #1890ff;
+}
+.ant-popover-blue .ant-popover-arrow-content {
+  background-color: #1890ff;
+}
+.ant-popover-geekblue .ant-popover-inner {
+  background-color: #2f54eb;
+}
+.ant-popover-geekblue .ant-popover-arrow-content {
+  background-color: #2f54eb;
+}
+.ant-popover-purple .ant-popover-inner {
+  background-color: #722ed1;
+}
+.ant-popover-purple .ant-popover-arrow-content {
+  background-color: #722ed1;
+}
+.ant-popover-rtl {
+  direction: rtl;
+  text-align: right;
+}
+.ant-popover-rtl .ant-popover-message-title {
+  padding-right: 22px;
+  padding-left: 16px;
+}
+.ant-popover-rtl .ant-popover-buttons {
+  text-align: left;
+}
+.ant-popover-rtl .ant-popover-buttons button {
+  margin-right: 8px;
+  margin-left: 0;
+}
+.ant-btn {
+  padding: 4px 15px;
+}
+.ant-btn-sm {
+  padding: 0 7px;
+}
+.pandora-sdk-descriptions .pandora-sdk-remark-icon {
+  margin-left: 5px;
+}
+.pandora-sdk-descriptions .ant-descriptions-item-label {
+  color: #999;
+}
+.pandora-sdk-descriptions .ant-descriptions-item-content {
+  color: #333;
+}

package/es/components/Descriptions/style.less

@@ -0,0 +1,15 @@
+@import 'antd/lib/popover/style/index.less';
+@import '../../style/theme.less';
+
+.@{sdk-prefix}-descriptions {
+  .@{sdk-prefix}-remark-icon {
+    margin-left: 5px;
+  }
+  .@{ant-prefix}-descriptions-item-label {
+    color: @font-color-9;
+  }
+
+  .@{ant-prefix}-descriptions-item-content {
+    color: @font-color-7;
+  }
+}

package/es/components/Drawer/CloseIcon/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface IProps {
+    className?: string;
+    onClick?: (e: any) => void;
+}
+export declare const CloseIcon: React.FC<IProps>;
+export default CloseIcon;

package/es/components/Drawer/CloseIcon/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import classnames from 'classnames';
+import { Tooltip } from 'antd';
+import { Close } from '@qn-pandora/pandora-component-icons';
+import { SDK_PREFIX } from '../../../constants/style';
+import { formatString } from '../../../utils/language';
+import { ModalLocale } from '../../../constants/language/modal/type';
+export var CloseIcon = function (props) {
+    var className = props.className, onClick = props.onClick;
+    return (React.createElement(Tooltip, { title: formatString(ModalLocale.close_tooltip) },
+        React.createElement(Close, { className: classnames(SDK_PREFIX + "-modal-close-icon", className), onClick: onClick })));
+};
+export default CloseIcon;

package/es/components/Drawer/CloseIcon/style.css

@@ -0,0 +1,12 @@
+.ant-btn {
+  padding: 4px 15px;
+}
+.ant-btn-sm {
+  padding: 0 7px;
+}
+.pandora-sdk-modal-close-icon {
+  font-size: 20px;
+}
+.pandora-sdk-modal-close-icon:hover {
+  background: #f4f5f6;
+}

package/es/components/Drawer/CloseIcon/style.less

@@ -0,0 +1,8 @@
+@import '../../../style/theme.less';
+
+.@{sdk-prefix}-modal-close-icon {
+  font-size: 20px;
+  &:hover {
+    background: @close-icon-hover-color;
+  }
+}

package/es/components/Drawer/index.d.ts

@@ -7,7 +7,7 @@ declare type getContainerFunc = () => HTMLElement;
 export declare type IDrawerProps = Overwrite<DrawerProps, {
     className?: string;
     /**
-     * 是否显示关闭按钮
+     * 是否显示关闭按钮,默认true
      */
     closable?: boolean;
     /**
@@ -62,11 +62,12 @@ export declare type IDrawerProps = Overwrite<DrawerProps, {
      * 无遮罩时点击空白处中的哪些元素不关闭
      */
     nonCloseSelector?: string;
+    size?: 'small' | 'default' | 'large';
 }>;
 export declare class Drawer extends React.Component<React.PropsWithChildren<IDrawerProps>, any> {
     drawerId: string;
     isResizing: boolean;
-    realWidth: string | number | undefined;
+    realWidth: React.ReactText;
     throttleMouseMove: import("lodash").DebouncedFunc<(e: any) => void>;
     get closable(): boolean | undefined;
     get extra(): {} | null | undefined;
@@ -76,6 +77,7 @@ export declare class Drawer extends React.Component<React.PropsWithChildren<IDra
     onMouseUp(): void;
     onMouseMove(e: any): void;
     onMouseClick(e: MouseEvent): void;
+    initWidth(width?: string | number, size?: string): React.ReactText;
     componentDidMount(): void;
     UNSAFE_componentWillUpdate(nextProps: Readonly<React.PropsWithChildren<IDrawerProps>>): void;
     componentWillUnmount(): void;
@@ -84,7 +86,7 @@ export declare class Drawer extends React.Component<React.PropsWithChildren<IDra
 declare const _default: (props: {
     className?: string | undefined;
     /**
-     * 是否显示关闭按钮
+     * 是否显示关闭按钮,默认true
      */
     closable?: boolean | undefined;
     /**
@@ -139,11 +141,13 @@ declare const _default: (props: {
      * 无遮罩时点击空白处中的哪些元素不关闭
      */
     nonCloseSelector?: string | undefined;
-} & Pick<DrawerProps, "style" | "autoFocus" | "size" | "prefixCls" | "footer" | "extra" | "bodyStyle" | "forceRender" | "keyboard" | "destroyOnClose" | "closeIcon" | "drawerStyle" | "headerStyle" | "contentWrapperStyle" | "push" | "handler" | "footerStyle" | "level" | "levelMove"> & {
+    size?: "small" | "default" | "large" | undefined;
+} & Pick<DrawerProps, "style" | "autoFocus" | "prefixCls" | "footer" | "extra" | "bodyStyle" | "forceRender" | "keyboard" | "destroyOnClose" | "closeIcon" | "drawerStyle" | "headerStyle" | "contentWrapperStyle" | "push" | "handler" | "footerStyle" | "level" | "levelMove"> & {
     children?: React.ReactNode;
 } & {
     bodyStyle?: React.CSSProperties | undefined;
     children: React.ReactNode;
     title?: React.ReactNode;
+    extra?: React.ReactNode;
 }) => JSX.Element;
 export default _default;