@qn-pandora/pandora-component 5.1.1 → 5.1.2

package/es/components/Steps/style.css

@@ -63,7 +63,7 @@
 .ant-steps-item-icon .ant-steps-icon {
   position: relative;
   top: -0.5px;
-  color: #7a869a;
+  color: #436bff;
   line-height: 1;
 }
 .ant-steps-item-tail {
@@ -136,13 +136,13 @@
 }
 .ant-steps-item-process .ant-steps-item-icon {
   background-color: #ffffff;
-  border-color: #7a869a;
+  border-color: #436bff;
 }
 .ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon {
-  color: #7a869a;
+  color: #436bff;
 }
 .ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot {
-  background: #7a869a;
+  background: #436bff;
 }
 .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title {
   color: #333;
@@ -157,7 +157,7 @@
   background-color: #e5e5e5;
 }
 .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-icon {
-  background: #7a869a;
+  background: #436bff;
 }
 .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-icon .ant-steps-icon {
   color: #fff;
@@ -167,25 +167,25 @@
 }
 .ant-steps-item-finish .ant-steps-item-icon {
   background-color: #ffffff;
-  border-color: #7a869a;
+  border-color: #436bff;
 }
 .ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon {
-  color: #7a869a;
+  color: #436bff;
 }
 .ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot {
-  background: #7a869a;
+  background: #436bff;
 }
 .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title {
   color: rgba(0, 0, 0, 0.65);
 }
 .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title::after {
-  background-color: #7a869a;
+  background-color: #436bff;
 }
 .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-description {
   color: rgba(0, 0, 0, 0.45);
 }
 .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-tail::after {
-  background-color: #7a869a;
+  background-color: #436bff;
 }
 .ant-steps-item-error .ant-steps-item-icon {
   background-color: #ffffff;
@@ -228,13 +228,13 @@
 .ant-steps .ant-steps-item:not(.ant-steps-item-active) > .ant-steps-item-container[role='button']:hover .ant-steps-item-title,
 .ant-steps .ant-steps-item:not(.ant-steps-item-active) > .ant-steps-item-container[role='button']:hover .ant-steps-item-subtitle,
 .ant-steps .ant-steps-item:not(.ant-steps-item-active) > .ant-steps-item-container[role='button']:hover .ant-steps-item-description {
-  color: #7a869a;
+  color: #436bff;
 }
 .ant-steps .ant-steps-item:not(.ant-steps-item-active):not(.ant-steps-item-process) > .ant-steps-item-container[role='button']:hover .ant-steps-item-icon {
-  border-color: #7a869a;
+  border-color: #436bff;
 }
 .ant-steps .ant-steps-item:not(.ant-steps-item-active):not(.ant-steps-item-process) > .ant-steps-item-container[role='button']:hover .ant-steps-item-icon .ant-steps-icon {
-  color: #7a869a;
+  color: #436bff;
 }
 .ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item {
   padding-left: 16px;
@@ -267,7 +267,7 @@
   line-height: 32px;
 }
 .ant-steps-item-custom.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon {
-  color: #7a869a;
+  color: #436bff;
 }
 .ant-steps:not(.ant-steps-vertical) .ant-steps-item-custom .ant-steps-item-icon {
   width: auto;
@@ -574,7 +574,7 @@
   display: inline-block;
   width: 0;
   height: 2px;
-  background-color: #7a869a;
+  background-color: #436bff;
   -webkit-transition: width 0.3s, left 0.3s;
   transition: width 0.3s, left 0.3s;
   -webkit-transition-timing-function: ease-out;
@@ -814,7 +814,7 @@
 }
 .pandora-sdk-steps .ant-steps-item .ant-steps-item-icon {
   border-radius: 2px;
-  background: #2c6dd2;
+  background: #436bff;
   border: none;
 }
 .pandora-sdk-steps .ant-steps-item.ant-steps-item-finish .ant-steps-item-icon .ant-steps-icon {

package/es/components/Steps/style.less

@@ -1,48 +1,48 @@
-@import 'antd/lib/steps/style/index.less';
-@import '../../style/theme.less';
-
-.@{sdk-prefix}-steps {
-  .@{ant-prefix}-steps-item-icon {
-    width: 24px;
-    height: 24px;
-    font-size: 12px;
-    line-height: 24px;
-    .@{ant-prefix}-steps-icon {
-      font-size: 10px;
-    }
-  }
-  .@{ant-prefix}-steps-item:last-of-type {
-    .@{ant-prefix}-steps-item-title::after {
-      display: none;
-    }
-  }
-
-  .@{ant-prefix}-steps-item-process .@{ant-prefix}-steps-item-title {
-    font-weight: 400;
-  }
-
-  .@{ant-prefix}-steps-item {
-    .@{ant-prefix}-steps-item-icon {
-      border-radius: 2px;
-      background: @theme-color;
-      border: none;
-    }
-    &.@{ant-prefix}-steps-item-finish {
-      .@{ant-prefix}-steps-item-icon {
-        .@{ant-prefix}-steps-icon {
-          color: @normal-color;
-          span.anticon.anticon-check.@{ant-prefix}-steps-finish-icon {
-            color: @normal-color;
-          }
-        }
-      }
-    }
-
-    &.@{ant-prefix}-steps-item-wait .@{ant-prefix}-steps-item-icon {
-      background: @button-disabled-bg;
-      .@{ant-prefix}-steps-icon {
-        color: @icon-color;
-      }
-    }
-  }
-}
+@import 'antd/lib/steps/style/index.less';
+@import '../../style/theme.less';
+
+.@{sdk-prefix}-steps {
+  .@{ant-prefix}-steps-item-icon {
+    width: 24px;
+    height: 24px;
+    font-size: 12px;
+    line-height: 24px;
+    .@{ant-prefix}-steps-icon {
+      font-size: 10px;
+    }
+  }
+  .@{ant-prefix}-steps-item:last-of-type {
+    .@{ant-prefix}-steps-item-title::after {
+      display: none;
+    }
+  }
+
+  .@{ant-prefix}-steps-item-process .@{ant-prefix}-steps-item-title {
+    font-weight: 400;
+  }
+
+  .@{ant-prefix}-steps-item {
+    .@{ant-prefix}-steps-item-icon {
+      border-radius: 2px;
+      background: @theme-color;
+      border: none;
+    }
+    &.@{ant-prefix}-steps-item-finish {
+      .@{ant-prefix}-steps-item-icon {
+        .@{ant-prefix}-steps-icon {
+          color: @normal-color;
+          span.anticon.anticon-check.@{ant-prefix}-steps-finish-icon {
+            color: @normal-color;
+          }
+        }
+      }
+    }
+
+    &.@{ant-prefix}-steps-item-wait .@{ant-prefix}-steps-item-icon {
+      background: @button-disabled-bg;
+      .@{ant-prefix}-steps-icon {
+        color: @icon-color;
+      }
+    }
+  }
+}

package/es/components/Table/ColumnSetting/index.d.ts

@@ -11,6 +11,7 @@ export interface ISettingBtnProps {
     hiddenKeys?: string[];
     options?: IOption[];
     loading?: boolean;
+    sortable: boolean;
 }
 export declare function ColumnSetting(props: ISettingBtnProps): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof ColumnSetting>;

package/es/components/Table/ColumnSetting/index.js

@@ -31,8 +31,17 @@ import { SDK_PREFIX } from '../../../constants/style';
 import NameLimiter from '../../NameLimiter';
 import Input from '../../Input';
 export var All = '_all';
+function Item(_a) {
+    var item = _a.item, checked = _a.checked, onChange = _a.onChange, sortable = _a.sortable;
+    return (React.createElement("div", { key: item.value, "data-id": item.value },
+        React.createElement("div", { className: SDK_PREFIX + "-table-column-setting-checkbox-container" },
+            sortable && (React.createElement("div", { className: SDK_PREFIX + "-table-column-setting-dragholder" },
+                React.createElement(HolderOutlined, null))),
+            React.createElement(Checkbox, { checked: checked, value: item.value, className: SDK_PREFIX + "-table-column-setting-checkbox", onChange: onChange },
+                React.createElement("span", { className: SDK_PREFIX + "-table-column-setting-value" }, typeof item.label === 'string' ? (React.createElement(NameLimiter, { name: item.label })) : (item.label))))));
+}
 export function ColumnSetting(props) {
-    var overlayClass = props.overlayClass, _a = props.hiddenKeys, hiddenKeys = _a === void 0 ? [] : _a, onHiddenKeysChange = props.onHiddenKeysChange, onMove = props.onMove, _b = props.options, options = _b === void 0 ? [] : _b, loading = props.loading;
+    var overlayClass = props.overlayClass, _a = props.hiddenKeys, hiddenKeys = _a === void 0 ? [] : _a, onHiddenKeysChange = props.onHiddenKeysChange, onMove = props.onMove, _b = props.options, options = _b === void 0 ? [] : _b, loading = props.loading, sortable = props.sortable;
     var locale = useContext(ConfigContext).locale;
     var _c = __read(useState(''), 2), prefix = _c[0], setPrefix = _c[1];
     var allKeys = useMemo(function () {
@@ -81,19 +90,15 @@ export function ColumnSetting(props) {
                     React.createElement(Checkbox, { value: All, checked: hiddenKeys.length === 0, onChange: allCheckChange, className: SDK_PREFIX + "-table-column-setting-all-check" }, formatString(TableLocale.check_all, locale)),
                     React.createElement(Input, { value: prefix, allowClear: true, onChange: handlePrefixChange, placeholder: formatString(TableLocale.search, locale), className: SDK_PREFIX + "-table-column-setting-search-input" })),
                 React.createElement("div", null,
-                    React.createElement("div", { className: SDK_PREFIX + "-table-column-setting-content" },
-                        React.createElement(ReactSortable, { onChange: onMove, options: {
-                                group: 'setting-config',
-                                animation: 150,
-                                preventOnFilter: false
-                            } }, realOptions.map(function (item) {
-                            return (React.createElement("div", { key: item.value, "data-id": item.value },
-                                React.createElement("div", { className: SDK_PREFIX + "-table-column-setting-checkbox-container" },
-                                    React.createElement("div", { className: SDK_PREFIX + "-table-column-setting-dragholder" },
-                                        React.createElement(HolderOutlined, null)),
-                                    React.createElement(Checkbox, { checked: !!realValues.find(function (v) { return v === item.value; }), value: item.value, className: SDK_PREFIX + "-table-column-setting-checkbox", onChange: handleChange },
-                                        React.createElement("span", { className: SDK_PREFIX + "-table-column-setting-value" }, typeof item.label === 'string' ? (React.createElement(NameLimiter, { name: item.label })) : (item.label))))));
-                        })))))) },
+                    React.createElement("div", { className: SDK_PREFIX + "-table-column-setting-content" }, sortable ? (React.createElement(ReactSortable, { onChange: onMove, options: {
+                            group: 'setting-config',
+                            animation: 150,
+                            preventOnFilter: false
+                        } }, realOptions.map(function (item) {
+                        return (React.createElement(Item, { item: item, checked: !!realValues.find(function (v) { return v === item.value; }), sortable: true, onChange: handleChange, key: item.value.toString() }));
+                    }))) : (React.createElement("div", null, realOptions.map(function (item) {
+                        return (React.createElement(Item, { item: item, checked: !!realValues.find(function (v) { return v === item.value; }), sortable: false, onChange: handleChange, key: item.value.toString() }));
+                    }))))))) },
         React.createElement(SettingOutlined, { className: SDK_PREFIX + "-table-column-setting-icon", onClick: function (e) {
                 e.stopPropagation();
                 e.preventDefault();

package/es/components/Table/ColumnSetting/style.less

@@ -1,50 +1,50 @@
-@import '../../../style/theme.less';
-
-.@{sdk-prefix}-table-column-setting-popover {
-  padding: 10px;
-  width: 100%;
-  .@{sdk-prefix}-table-column-setting-header {
-    border-bottom: 1px solid @border-color-base;
-    display: flex;
-    padding-bottom: 10px;
-    .@{sdk-prefix}-table-column-setting-all-check {
-      line-height: 32px;
-    }
-    .@{sdk-prefix}-table-column-setting-search-input {
-      width: 200px;
-    }
-  }
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.@{sdk-prefix}-table-column-setting-icon {
-  color: @font-color-7;
-}
-
-.@{sdk-prefix}-table-column-setting-content {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.@{sdk-prefix}-table-column-setting-content > div {
-  box-sizing: border-box;
-  position: relative;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  .@{sdk-prefix}-table-column-setting-checkbox-container {
-    margin: 4px 0;
-    display: flex;
-    .@{sdk-prefix}-table-column-setting-dragholder {
-      cursor: move;
-    }
-    .@{sdk-prefix}-table-column-setting-checkbox {
-      width: 100%;
-      min-width: 120px;
-      overflow: hidden;
-    }
-    .@{sdk-prefix}-table-column-setting-checkbox > span:nth-child(2) {
-      overflow: hidden;
-    }
-  }
-}
+@import '../../../style/theme.less';
+
+.@{sdk-prefix}-table-column-setting-popover {
+  padding: 10px;
+  width: 100%;
+  .@{sdk-prefix}-table-column-setting-header {
+    border-bottom: 1px solid @border-color-base;
+    display: flex;
+    padding-bottom: 10px;
+    .@{sdk-prefix}-table-column-setting-all-check {
+      line-height: 32px;
+    }
+    .@{sdk-prefix}-table-column-setting-search-input {
+      width: 200px;
+    }
+  }
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.@{sdk-prefix}-table-column-setting-icon {
+  color: @font-color-7;
+}
+
+.@{sdk-prefix}-table-column-setting-content {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.@{sdk-prefix}-table-column-setting-content > div {
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  .@{sdk-prefix}-table-column-setting-checkbox-container {
+    margin: 4px 0;
+    display: flex;
+    .@{sdk-prefix}-table-column-setting-dragholder {
+      cursor: move;
+    }
+    .@{sdk-prefix}-table-column-setting-checkbox {
+      width: 100%;
+      min-width: 120px;
+      overflow: hidden;
+    }
+    .@{sdk-prefix}-table-column-setting-checkbox > span:nth-child(2) {
+      overflow: hidden;
+    }
+  }
+}

package/es/components/Table/ColumnTag/style.css

@@ -1,9 +1,9 @@
 .pandora-sdk-table-columnTag-groupTag {
   padding: 4px;
   height: 24px;
-  background: rgba(44, 109, 210, 0.1);
+  background: rgba(67, 107, 255, 0.1);
   margin-right: 4px;
-  color: #7a869a;
+  color: #436bff;
   white-space: nowrap;
   font-size: 12px;
   margin-top: 4px;
@@ -25,8 +25,8 @@
   cursor: pointer;
 }
 .pandora-sdk-table-columnTag-moreTagsIcon:hover {
-  color: #2c6dd2;
-  border-color: #2c6dd2;
+  color: #436bff;
+  border-color: #436bff;
 }
 .pandora-sdk-table-columnTag-tagPopoverContainer {
   padding: 6px 10px 10px 10px;

package/es/components/Table/ColumnTag/style.less

@@ -1,40 +1,40 @@
-@import '../../../style/theme.less';
-.@{sdk-prefix}-table-columnTag-groupTag {
-  padding: 4px;
-  height: 24px;
-  background: @theme-color-010;
-  margin-right: 4px;
-  color: @primary-color;
-  white-space: nowrap;
-  font-size: 12px;
-  margin-top: 4px;
-}
-
-.@{sdk-prefix}-table-columnTag-moreTagsIcon {
-  margin-left: 4px;
-  vertical-align: middle;
-  width: 14px;
-  height: 13px;
-  line-height: 6px;
-  border: 1px solid @icon-color;
-  padding: 0 1px;
-  text-align: center;
-  border-radius: 48%;
-  display: inline-block;
-  font-size: 12px;
-  font-weight: 400;
-  color: @icon-color;
-  cursor: pointer;
-
-  &:hover {
-    color: @theme-color;
-    border-color: @theme-color;
-  }
-}
-
-.@{sdk-prefix}-table-columnTag-tagPopoverContainer {
-  padding: 6px 10px 10px 10px;
-  display: flex;
-  flex-wrap: wrap;
-  width: 400px;
-}
+@import '../../../style/theme.less';
+.@{sdk-prefix}-table-columnTag-groupTag {
+  padding: 4px;
+  height: 24px;
+  background: @theme-color-010;
+  margin-right: 4px;
+  color: @primary-color;
+  white-space: nowrap;
+  font-size: 12px;
+  margin-top: 4px;
+}
+
+.@{sdk-prefix}-table-columnTag-moreTagsIcon {
+  margin-left: 4px;
+  vertical-align: middle;
+  width: 14px;
+  height: 13px;
+  line-height: 6px;
+  border: 1px solid @icon-color;
+  padding: 0 1px;
+  text-align: center;
+  border-radius: 48%;
+  display: inline-block;
+  font-size: 12px;
+  font-weight: 400;
+  color: @icon-color;
+  cursor: pointer;
+
+  &:hover {
+    color: @theme-color;
+    border-color: @theme-color;
+  }
+}
+
+.@{sdk-prefix}-table-columnTag-tagPopoverContainer {
+  padding: 6px 10px 10px 10px;
+  display: flex;
+  flex-wrap: wrap;
+  width: 400px;
+}

package/es/components/Table/EmptyText.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Locale } from 'antd/es/locale-provider';
+declare function EmptyTextComp({ emptyText, locale }: {
+    emptyText?: React.ReactNode;
+    locale: Locale | undefined;
+}): React.JSX.Element;
+export default EmptyTextComp;

package/es/components/Table/EmptyText.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { formatString } from '../../utils/language';
+import { SDK_PREFIX } from '../../constants/style';
+import { TableLocale } from '../../constants/language/table/type';
+import { EmptyIcon } from '@qn-pandora/pandora-component-icons';
+function EmptyTextComp(_a) {
+    var emptyText = _a.emptyText, locale = _a.locale;
+    if (!emptyText) {
+        return (React.createElement("div", { className: SDK_PREFIX + "-table-empty" },
+            React.createElement("div", { className: SDK_PREFIX + "-table-empty-icon" },
+                React.createElement(EmptyIcon, null)),
+            React.createElement("div", { className: SDK_PREFIX + "-table-empty-text" }, formatString(TableLocale.empty, locale))));
+    }
+    if (typeof emptyText === 'string' || typeof emptyText === 'number') {
+        return (React.createElement("div", { className: SDK_PREFIX + "-table-empty" },
+            React.createElement("div", { className: SDK_PREFIX + "-table-empty-icon" },
+                React.createElement(EmptyIcon, null)),
+            React.createElement("div", { className: SDK_PREFIX + "-table-empty-text" }, emptyText)));
+    }
+    return emptyText;
+}
+export default EmptyTextComp;

package/es/components/Table/ResizableTitle/style.less

@@ -1,25 +1,25 @@
-@import '../../../style/theme.less';
-
-.@{sdk-prefix}-table-resizable-th {
-  width: 100%;
-  .@{sdk-prefix}-table-resizable-handle {
-    position: absolute;
-    cursor: col-resize;
-    right: 1px;
-    height: 40%;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 8px;
-    opacity: 0;
-    transition: opacity 0.2s ease-in-out;
-  }
-  &:hover {
-    .@{sdk-prefix}-table-resizable-handle {
-      opacity: 0.3;
-    }
-  }
-
-  &::before {
-    display: none;
-  }
-}
+@import '../../../style/theme.less';
+
+.@{sdk-prefix}-table-resizable-th {
+  width: 100%;
+  .@{sdk-prefix}-table-resizable-handle {
+    position: absolute;
+    cursor: col-resize;
+    right: 1px;
+    height: 40%;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 8px;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+  }
+  &:hover {
+    .@{sdk-prefix}-table-resizable-handle {
+      opacity: 0.3;
+    }
+  }
+
+  &::before {
+    display: none;
+  }
+}