@qn-pandora/pandora-component 2.1.2 → 3.0.0

package/es/components/Table/index.js

@@ -66,7 +66,7 @@ import * as React from 'react';
 import { Table as AntTable, Checkbox } from 'antd';
 import classnames from 'classnames';
 import { observable, action, computed } from 'mobx';
-import { size, xor, union, unionBy, differenceBy, get, isUndefined } from 'lodash';
+import { size, xor, union, unionBy, differenceBy, get } from 'lodash';
 import { observer } from 'mobx-react';
 import bind from '../../utils/bind';
 import { SDK_PREFIX } from '../../constants/style';
@@ -126,10 +126,23 @@ var Table = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(Table.prototype, "undisabledData", {
+        get: function () {
+            var _a = this.props, dataSource = _a.dataSource, rowSelection = _a.rowSelection;
+            var getCheckboxProps = (rowSelection || {}).getCheckboxProps;
+            var undisabledData = dataSource || [];
+            if (getCheckboxProps) {
+                // 如果checkbox有disabled的，要去掉这些rowItem
+                undisabledData = undisabledData.filter(function (data) { return !getCheckboxProps(data).disabled; });
+            }
+            return undisabledData;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(Table.prototype, "keysOfCurrentPage", {
         get: function () {
-            var dataSource = this.props.dataSource;
-            return (dataSource || []).map(this.getRowKey);
+            return this.undisabledData.map(this.getRowKey);
         },
         enumerable: true,
         configurable: true
@@ -205,19 +218,29 @@ var Table = /** @class */ (function (_super) {
             ? rowClassName
             : rowClassName(record, index, indent));
     };
+    Table.prototype.getDisabledStatus = function (option) {
+        var noneSelected = this.selectedRowKeys.length === 0;
+        var disabled = typeof option.disabled === 'function'
+            ? option.disabled(__spread(this.undisabledData))
+            : option.disabled;
+        return noneSelected || disabled;
+    };
     Table.prototype.render = function () {
         var _a, _b;
         var _this = this;
         var _c = this.props, className = _c.className, batchOptions = _c.batchOptions, scroll = _c.scroll, restProps = __rest(_c, ["className", "batchOptions", "scroll"]);
         return (React.createElement("div", null,
-            React.createElement(AntTable, __assign({ scroll: scroll }, restProps, { className: classnames(SDK_PREFIX + "-table-wrapper", (_a = {}, _a[SDK_PREFIX + "-table-scrollX"] = get(scroll, 'x'), _a), (_b = {}, _b[SDK_PREFIX + "-table-scrollY"] = get(scroll, 'y'), _b), className), rowSelection: batchOptions && this.props.rowSelection
+            React.createElement(AntTable, __assign({ scroll: scroll }, restProps, { className: classnames(SDK_PREFIX + "-table-wrapper", (_a = {}, _a[SDK_PREFIX + "-table-scrollX"] = get(scroll, 'x'), _a), (_b = {}, _b[SDK_PREFIX + "-table-scrollY"] = get(scroll, 'y'), _b), className), 
+                // 涉及到权限
+                // getCheckboxProps只能放到tableBatchWrapper里，因为selectedRowKeys在那个组件计算
+                rowSelection: batchOptions && this.props.rowSelection
                     ? this.rowSelection
                     : this.props.rowSelection, rowClassName: this.getRowClassName })),
             this.props.batchOptions &&
                 this.props.rowSelection &&
                 this.props.dataSource &&
                 this.props.dataSource.length > 0 ? (React.createElement("div", { className: SDK_PREFIX + "-table-batch-opt" },
-                React.createElement(Checkbox, { indeterminate: this.indeterminate, onChange: this.handleCheckAllChange, checked: this.checkAll, disabled: size(this.props.dataSource) === 0 }),
+                React.createElement(Checkbox, { indeterminate: this.indeterminate, onChange: this.handleCheckAllChange, checked: this.checkAll, disabled: size(this.undisabledData) === 0 }),
                 React.createElement("span", { className: SDK_PREFIX + "-table-batch-opt-label" },
                     "\u5DF2\u9009 ",
                     this.selectedRowKeys.length),
@@ -225,9 +248,7 @@ var Table = /** @class */ (function (_super) {
                     var _a;
                     return (React.createElement("span", { key: index, className: classnames((_a = {},
                             _a[SDK_PREFIX + "-table-batch-opt-item"] = true,
-                            _a[SDK_PREFIX + "-table-batch-opt-disabled"] = isUndefined(option.disabled)
-                                ? _this.selectedRowKeys.length === 0
-                                : option.disabled,
+                            _a[SDK_PREFIX + "-table-batch-opt-disabled"] = _this.getDisabledStatus(option),
                             _a)), onClick: function () { return _this.handleBatchOptionClick(option); } }, option.text));
                 })))) : null));
     };
@@ -251,6 +272,11 @@ var Table = /** @class */ (function (_super) {
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [])
     ], Table.prototype, "rowSelection", null);
+    __decorate([
+        computed,
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [])
+    ], Table.prototype, "undisabledData", null);
     __decorate([
         computed,
         __metadata("design:type", Object),
@@ -312,6 +338,12 @@ var Table = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [Object, Number, Number]),
         __metadata("design:returntype", void 0)
     ], Table.prototype, "getRowClassName", null);
+    __decorate([
+        bind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], Table.prototype, "getDisabledStatus", null);
     Table = __decorate([
         observer
     ], Table);

package/es/components/Table/style.css

@@ -264,7 +264,7 @@
   border-radius: 0;
 }
 .ant-table-tbody > tr.ant-table-row:hover > td {
-  background: rgba(44, 109, 210, 0.1);
+  background: #e9f0fa;
 }
 .ant-table-tbody > tr.ant-table-row-selected > td {
   background: #2c6dd2;
@@ -1145,7 +1145,7 @@ tr.ant-table-expanded-row .ant-descriptions-view table {
   line-height: 1.5715;
   background-color: transparent;
   background-image: none;
-  border: 1px solid #d9d9d9;
+  border: 1px solid #bfbfbf;
   border-radius: 2px;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
@@ -1187,7 +1187,7 @@ tr.ant-table-expanded-row .ant-descriptions-view table {
   opacity: 1;
 }
 .ant-pagination-options-quick-jumper input-disabled:hover {
-  border-color: #d9d9d9;
+  border-color: #bfbfbf;
   border-right-width: 1px !important;
 }
 .ant-pagination-options-quick-jumper input[disabled] {
@@ -1197,7 +1197,7 @@ tr.ant-table-expanded-row .ant-descriptions-view table {
   opacity: 1;
 }
 .ant-pagination-options-quick-jumper input[disabled]:hover {
-  border-color: #d9d9d9;
+  border-color: #bfbfbf;
   border-right-width: 1px !important;
 }
 .ant-pagination-options-quick-jumper input-borderless,
@@ -1221,7 +1221,7 @@ textarea.ant-pagination-options-quick-jumper input {
   transition: all 0.3s, height 0s;
 }
 .ant-pagination-options-quick-jumper input-lg {
-  padding: 2.5px 11px;
+  padding: 6.5px 11px;
   font-size: 16px;
 }
 .ant-pagination-options-quick-jumper input-sm {
@@ -1512,10 +1512,10 @@ textarea.ant-pagination-options-quick-jumper input {
   background: #ffffff !important;
 }
 .pandora-sdk-table-wrapper .ant-table-row:hover {
-  background: rgba(44, 109, 210, 0.1);
+  background: #e9f0fa;
 }
 .pandora-sdk-table-wrapper .ant-table-row-hover {
-  background: rgba(44, 109, 210, 0.1);
+  background: #e9f0fa;
 }
 .pandora-sdk-table-wrapper .ant-table-placeholder {
   border: none;
@@ -1608,7 +1608,7 @@ textarea.ant-pagination-options-quick-jumper input {
   max-height: 200px;
 }
 .pandora-sdk-table-wrapper .ant-table-tbody > tr.ant-table-row:hover > td {
-  background-color: rgba(44, 109, 210, 0.1);
+  background-color: #e9f0fa;
 }
 .pandora-sdk-table-wrapper .ant-table-filter-trigger {
   display: block;
@@ -1647,3 +1647,6 @@ textarea.ant-pagination-options-quick-jumper input {
 .ant-table-cell::before {
   display: none;
 }
+.ant-empty .ant-empty-description {
+  color: #bfbfbf;
+}

package/es/components/Table/style.less

@@ -298,3 +298,9 @@
 .@{ant-prefix}-table-cell::before {
   display: none;
 }
+
+.@{ant-prefix}-empty {
+  .@{ant-prefix}-empty-description {
+    color: @input-placeholder-color;
+  }
+}

package/es/components/TagList/Tag/style.css

@@ -9,7 +9,7 @@
   line-height: 24px;
   margin-right: 8px;
   border-radius: 1px;
-  color: #42526e;
+  color: #333;
   text-align: center;
   vertical-align: middle;
   border-radius: 2px;
@@ -47,8 +47,8 @@
   border-left: 1px solid rgba(44, 109, 210, 0.1);
 }
 .pandora-sdk-root .pandora-sdk-content {
-  padding: 0 4px;
-  max-width: 200px;
+  padding: 0 8px;
+  max-width: 150px;
   vertical-align: middle;
   overflow: hidden;
   white-space: nowrap;

package/es/components/TagList/Tag/style.less

@@ -5,7 +5,7 @@
   line-height: 24px;
   margin-right: 8px;
   border-radius: 1px;
-  color: @font-color-2;
+  color: @font-color-7;
   text-align: center;
   vertical-align: middle;
   border-radius: @border-radius-base;
@@ -45,8 +45,8 @@
   }
 
   .@{sdk-prefix}-content {
-    padding: 0 4px;
-    max-width: 200px;
+    padding: 0 8px;
+    max-width: 150px;
     vertical-align: middle;
     overflow: hidden;
     white-space: nowrap;

package/es/components/TagList/index.js

@@ -26,7 +26,7 @@ import { MoreCircle } from '@qn-pandora/pandora-component-icons';
 import Tag from './Tag';
 import TagSwitch from './TagSwitch';
 import { SDK_PREFIX } from '../../constants/style';
-export default function TagList(props) {
+function TagList(props) {
     var _a = props.mode, mode = _a === void 0 ? 'tag' : _a, className = props.className;
     var handleSwitchChange = function (active, value) {
         var values = props.values, onChange = props.onChange;
@@ -57,10 +57,11 @@ export default function TagList(props) {
         }
         return (React.createElement("div", { className: classnames(SDK_PREFIX + "-simplify", props.className) },
             React.Children.toArray(children).slice(0, simplifyTo),
-            React.createElement(Popover, { content: React.createElement("div", { className: SDK_PREFIX + "-popover" }, children), getPopupContainer: getPopupContainer },
+            React.createElement(Popover, { content: React.createElement("div", { className: SDK_PREFIX + "-popover" }, React.Children.toArray(children).slice(simplifyTo, childSize)), getPopupContainer: getPopupContainer },
                 React.createElement(MoreCircle, { className: SDK_PREFIX + "-icon" }))));
     };
     return (React.createElement("div", { className: classnames(SDK_PREFIX + "-taglist-containter", className) }, mode === 'tag' ? getTagList() : getTagSwitchList()));
 }
 TagList.Tag = Tag;
 TagList.TagSwitch = TagSwitch;
+export default TagList;

package/es/components/TagList/style.css

@@ -266,12 +266,12 @@
 .pandora-sdk-taglist-containter .pandora-sdk-simplify .pandora-sdk-icon:hover {
   color: #7a869a;
 }
-.pandora-sdk-taglist-containter .pandora-sdk-popover {
+.pandora-sdk-popover {
   max-width: 400px;
   max-height: 1000px;
   overflow: auto;
-  padding: 16px;
+  padding: 8px !important;
 }
-.pandora-sdk-taglist-containter .pandora-sdk-popover > div {
+.pandora-sdk-popover > div {
   margin: 4px;
 }

package/es/components/TagList/style.less

@@ -15,14 +15,14 @@
       }
     }
   }
+}
 
-  .@{sdk-prefix}-popover {
-    max-width: 400px;
-    max-height: 1000px;
-    overflow: auto;
-    padding: 16px;
-    > div {
-      margin: 4px;
-    }
+.@{sdk-prefix}-popover {
+  max-width: 400px;
+  max-height: 1000px;
+  overflow: auto;
+  padding: 8px !important;
+  > div {
+    margin: 4px;
   }
 }