@aloudata/aloudata-design 0.3.2 → 0.3.5

package/lib/Table/hooks/useTableColumn.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _utils = require("../utils");
+
+var _message = _interopRequireDefault(require("../../message"));
+
+require("react-table/node_modules/@types/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function useTableColumn(props) {
+  var columnsWidthMapRef = props.columnsWidthMapRef,
+      columnsTotalWidthRef = props.columnsTotalWidthRef,
+      columnsRef = props.columnsRef,
+      tableClientWidth = props.tableClientWidth,
+      sortable = props.sortable; // 转换外部传入的columns
+
+  var newColumns = (0, _react.useMemo)(function () {
+    var _getColumnsWidthMap = (0, _utils.getColumnsWidthMap)(columnsRef.current, tableClientWidth, columnsWidthMapRef.current),
+        columnsWidthMap = _getColumnsWidthMap.columnsWidthMap,
+        totalColumnWidth = _getColumnsWidthMap.totalColumnWidth;
+
+    columnsWidthMapRef.current = columnsWidthMap;
+    columnsTotalWidthRef.current = totalColumnWidth;
+    return columnsRef.current.map(function (column, index) {
+      var _columnsWidthMapRef$c, _columnsWidthMapRef$c2;
+
+      var key = index.toString(); // 不设置dataIndex同时进行排序 则报错
+
+      if (!column.dataIndex === undefined && sortable) {
+        _message.default.error('不支持未设置dataIndex时进行排序设置');
+      }
+
+      return _objectSpread(_objectSpread({}, column), {}, {
+        width: (_columnsWidthMapRef$c = columnsWidthMapRef.current) === null || _columnsWidthMapRef$c === void 0 ? void 0 : (_columnsWidthMapRef$c2 = _columnsWidthMapRef$c.get(key)) === null || _columnsWidthMapRef$c2 === void 0 ? void 0 : _columnsWidthMapRef$c2.width,
+        Header: column.title ? column.title : function () {
+          return null;
+        },
+        disableSortBy: !sortable || typeof column.sorter === 'boolean',
+        accessor: column.dataIndex,
+        Cell: function Cell(_ref) {
+          var row = _ref.row,
+              value = _ref.value;
+          return typeof column.render === 'function' ? column.render(value, row.original, row.index) : value;
+        }
+      });
+    });
+  }, [columnsRef, columnsTotalWidthRef, columnsWidthMapRef, sortable, tableClientWidth]);
+  return newColumns;
+}
+
+var _default = useTableColumn;
+exports.default = _default;

package/lib/Table/interface.d.ts

@@ -9,7 +9,7 @@ export interface IColumn<RecordType> {
     title: string | null;
     dataIndex: string;
     render?: (value: any, row: RecordType, index: number) => React.ReactNode;
-    width?: number;
+    width?: number | string;
     minWidth?: number;
     sorter?: boolean | 'string' | 'number' | 'basic' | 'datetime' | 'alphanumeric';
     sortOrder?: TSortOrder;
@@ -20,7 +20,7 @@ export interface ITableProps<RecordType> {
     columns: IColumn<RecordType>[];
     data: RecordType[];
     onRowSelected?: (row: RecordType) => void;
-    loadMore?: () => void | Promise<void>;
+    loadMore?: () => Promise<void>;
     hasNextPage?: boolean;
     loading?: boolean;
     sortable?: boolean;
@@ -29,6 +29,7 @@ export interface ITableProps<RecordType> {
     sortDirections?: Array<'ascend' | 'descend'>;
     resizeColumn?: boolean;
     showHeader?: boolean;
+    height?: string | number;
     innerScroll?: boolean;
     ref?: React.RefObject<unknown>;
     scrollThreshold?: string | number;

package/lib/Table/style/index.less

@@ -1,14 +1,16 @@
-@import '../../style/index.less';
+/* stylelint-disable property-no-unknown */
 
-@ald-iconfont-css-prefix: anticon;
-@table-row-height: 48px;
+@import '../../style/index.less';
+@import '../../Empty/style/index.less';
+@import '../../message/style/index.less';
+@import './variable.less';
 
 .ald-table {
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 100%;
   overflow: hidden;
+  user-select: none;
 
   &-page-loading {
     opacity: 0;
@@ -21,6 +23,17 @@
     overflow: hidden;
   }
 
+  &-inner-wrap {
+    width: 100%;
+    height: 100%;
+    overflow-x: overlay;
+  }
+
+  &-tableHeadScrollWrap {
+    width: 100%;
+    overflow-x: hidden;
+  }
+
   &-cell {
     flex-grow: 1;
     height: unset;
@@ -35,8 +48,7 @@
   }
 
   &-row {
-    max-width: 100%;
-    height: 48px;
+    height: @table-head-row-height;
 
     &-ellipsis {
       .ald-table-cell {
@@ -48,8 +60,12 @@
   }
 
   &-thead {
+    flex: 1;
+    overflow: hidden;
+
     .ald-table-row {
-      height: 48px;
+      min-width: 9999px; // 防止拖动时的闪动
+      height: @table-head-row-height;
     }
 
     .ald-table-cell {
@@ -57,7 +73,7 @@
       padding: 14px 24px;
       color: @NL50;
       line-height: 20px;
-      background-color: @BG97;
+      background-color: @BG95;
 
       .ald-table-cell-content {
         overflow: hidden;
@@ -72,7 +88,7 @@
         z-index: 1;
         display: inline-block;
         width: 12px;
-        height: 12px;
+        height: 14px;
         transform: translateY(-50%);
         touch-action: none;
 
@@ -80,7 +96,7 @@
           display: block;
           width: 1px;
           height: 100%;
-          background-color: @NL95;
+          background-color: @BG70;
           content: '';
         }
       }
@@ -103,11 +119,12 @@
     }
 
     .ald-table-row {
-      height: 68px;
+      height: @table-body-row-height;
 
       .ald-table-cell {
-        padding: 24px;
-        line-height: 20px;
+        display: flex;
+        align-items: center;
+        padding-left: 24px;
       }
 
       &:hover {
@@ -124,10 +141,18 @@
     }
   }
 
+  &-tbody&-tbody-innerScroll {
+    overflow: hidden;
+  }
+
+  &-row-list-wrap {
+    overflow: unset;
+  }
+
   &-loading {
-    height: 48px;
+    height: @table-body-row-height;
     color: @NL80;
-    line-height: @table-row-height;
+    line-height: @table-body-row-height;
     text-align: center;
 
     &-icon {
@@ -145,6 +170,7 @@
       align-items: center;
       justify-content: center;
       padding-top: 84px;
+      padding-bottom: 84px;
     }
   }
 
@@ -170,33 +196,11 @@
     }
   }
 
-  /* stylelint-disable-next-line selector-class-pattern */
-  &-list&-innerScroll {
-    height: 100%;
-    overflow: overlay !important;
-  }
-
   // 当出现多行的时候 会顶出一个滚动条 通过复写三方库的样式覆盖
   &-list&-canNotInnerScroll {
     overflow: hidden !important;
   }
 
-  &-list {
-    &::-webkit-scrollbar-thumb {
-      background: @NL90;
-      background-clip: padding-box;
-      border: 3px solid transparent;
-      border-radius: 6px;
-    }
-
-    &::-webkit-scrollbar {
-      width: 12px;
-      height: 12px;
-      min-height: 12px;
-      background-color: transparent;
-    }
-  }
-
   &-sortIcon {
     margin-top: -2px;
     margin-left: 4px;

package/lib/Table/style/index.less.d.ts

@@ -0,0 +1,126 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'B10': string;
+  'B20': string;
+  'B30': string;
+  'B40': string;
+  'B50': string;
+  'B60': string;
+  'B70': string;
+  'B80': string;
+  'B90': string;
+  'B95': string;
+  'B98': string;
+  'BG0': string;
+  'BG10': string;
+  'BG100': string;
+  'BG20': string;
+  'BG30': string;
+  'BG40': string;
+  'BG50': string;
+  'BG60': string;
+  'BG70': string;
+  'BG80': string;
+  'BG90': string;
+  'BG95': string;
+  'BG97': string;
+  'BLACK': string;
+  'IMAGE_HOLDER': string;
+  'MATE': string;
+  'ND0': string;
+  'ND10': string;
+  'ND20': string;
+  'ND30': string;
+  'ND40': string;
+  'ND50': string;
+  'ND60': string;
+  'ND70': string;
+  'ND80': string;
+  'ND90': string;
+  'ND95': string;
+  'ND97': string;
+  'NL0': string;
+  'NL10': string;
+  'NL20': string;
+  'NL30': string;
+  'NL40': string;
+  'NL50': string;
+  'NL60': string;
+  'NL70': string;
+  'NL80': string;
+  'NL90': string;
+  'NL95': string;
+  'NL97': string;
+  'SA10': string;
+  'SA20': string;
+  'SA30': string;
+  'SA40': string;
+  'SA50': string;
+  'SA60': string;
+  'SA70': string;
+  'SA80': string;
+  'SA90': string;
+  'SA95': string;
+  'SA98': string;
+  'SB10': string;
+  'SB20': string;
+  'SB30': string;
+  'SB40': string;
+  'SB50': string;
+  'SB60': string;
+  'SB70': string;
+  'SB80': string;
+  'SB90': string;
+  'SB95': string;
+  'SB98': string;
+  'SC10': string;
+  'SC20': string;
+  'SC30': string;
+  'SC40': string;
+  'SC50': string;
+  'SC60': string;
+  'SC70': string;
+  'SC80': string;
+  'SC90': string;
+  'SC95': string;
+  'SC98': string;
+  'SHADOW_L': string;
+  'TableHeadRowHeight': string;
+  'WHITE': string;
+  'ald-empty': string;
+  'ald-empty-description': string;
+  'ald-empty-image': string;
+  'ald-empty-img': string;
+  'ald-empty-large': string;
+  'ald-empty-small': string;
+  'ald-empty-title': string;
+  'ald-table': string;
+  'ald-table-bar': string;
+  'ald-table-canNotInnerScroll': string;
+  'ald-table-cell': string;
+  'ald-table-cell-content': string;
+  'ald-table-column-resizable': string;
+  'ald-table-empty-icon': string;
+  'ald-table-header': string;
+  'ald-table-header-left': string;
+  'ald-table-header-right': string;
+  'ald-table-init-loading': string;
+  'ald-table-inner-wrap': string;
+  'ald-table-list': string;
+  'ald-table-loading': string;
+  'ald-table-loading-icon': string;
+  'ald-table-page-loading': string;
+  'ald-table-row': string;
+  'ald-table-row-ellipsis': string;
+  'ald-table-row-list-wrap': string;
+  'ald-table-row-selected': string;
+  'ald-table-sortIcon': string;
+  'ald-table-table-wrap': string;
+  'ald-table-tableHeadScrollWrap': string;
+  'ald-table-tbody': string;
+  'ald-table-tbody-innerScroll': string;
+  'ald-table-thead': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/lib/Table/style/variable.less

@@ -0,0 +1,10 @@
+/* stylelint-disable property-no-unknown */
+
+@ald-iconfont-css-prefix: anticon;
+@table-head-row-height: 44px;
+@table-head-row-height-num: 44;
+@table-body-row-height: 72px;
+
+:export {
+  TableHeadRowHeight: @table-head-row-height-num;
+}

package/lib/Table/style/variable.less.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'TableHeadRowHeight': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/lib/Table/utils.d.ts

@@ -0,0 +1,15 @@
+import { IColumn } from './interface';
+export interface IWidthDetail {
+    width: number;
+    isSpecific: boolean;
+}
+export declare function getColumnsWidthMap<T>(columns: IColumn<T>[], clientWidth: number, lastWidthMap?: Map<string, IWidthDetail>): {
+    columnsWidthMap: Map<string, IWidthDetail>;
+    totalColumnWidth: number;
+};
+export declare function isPercentageWidth(width: string): boolean;
+export declare function isSpecificPxWidth(width: string): boolean;
+export declare function getValidWidthByNumber(width: number): number;
+export declare function getValidScrollThreshold(height: string | number, clientHeight: number): number;
+export declare function getPercentageValue(percentage: string, containerNum: number): number;
+export declare function getPxValue(px: string): number;

package/lib/Table/utils.js

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getColumnsWidthMap = getColumnsWidthMap;
+exports.getPercentageValue = getPercentageValue;
+exports.getPxValue = getPxValue;
+exports.getValidScrollThreshold = getValidScrollThreshold;
+exports.getValidWidthByNumber = getValidWidthByNumber;
+exports.isPercentageWidth = isPercentageWidth;
+exports.isSpecificPxWidth = isSpecificPxWidth;
+var ZERO = 0;
+var NOT_SET = -1;
+var COLUMN_MIN_WIDTH = 72;
+var HUNDRED = 100; // TODO: 添加单侧
+
+function getColumnsWidthMap(columns, clientWidth, lastWidthMap) {
+  var settedTotalWidth = ZERO;
+  var unsetWidthIndex = [];
+  var widthMap = new Map();
+  var totalColumnWidth = ZERO;
+  columns.forEach(function (item, index) {
+    var _lastWidthMap$get;
+
+    var key = index.toString();
+    var width = getWidthByColumnsWidth(clientWidth, item.width); // 首先判断是否是否是容器宽度的变化
+
+    var isSpecific = lastWidthMap ? (_lastWidthMap$get = lastWidthMap.get(key)) === null || _lastWidthMap$get === void 0 ? void 0 : _lastWidthMap$get.isSpecific : isSpecificWidth(item.width);
+
+    if (lastWidthMap && isSpecific) {
+      var _lastWidthMap$get2;
+
+      width = (_lastWidthMap$get2 = lastWidthMap.get(key)) === null || _lastWidthMap$get2 === void 0 ? void 0 : _lastWidthMap$get2.width;
+    }
+
+    if (width === NOT_SET) {
+      unsetWidthIndex.push(key);
+    } else {
+      settedTotalWidth += width;
+    }
+
+    widthMap.set(key, {
+      width: width,
+      isSpecific: isSpecific
+    });
+  }); // 设定宽度大于容器宽度时
+
+  if (settedTotalWidth < clientWidth) {
+    unsetWidthIndex.map(function (item) {
+      var _widthMap$get;
+
+      return widthMap.set(item, {
+        isSpecific: (_widthMap$get = widthMap.get(item)) === null || _widthMap$get === void 0 ? void 0 : _widthMap$get.isSpecific,
+        width: 72
+      });
+    });
+  } // 设定宽度小于容器宽度时
+
+
+  if (unsetWidthIndex.length > ZERO) {
+    var leftWidth = clientWidth - settedTotalWidth;
+    var average = getValidWidthByNumber(leftWidth / unsetWidthIndex.length);
+    unsetWidthIndex.map(function (item) {
+      var _widthMap$get2;
+
+      return widthMap.set(item, {
+        isSpecific: (_widthMap$get2 = widthMap.get(item)) === null || _widthMap$get2 === void 0 ? void 0 : _widthMap$get2.isSpecific,
+        width: average
+      });
+    });
+  }
+
+  columns.forEach(function (item, index) {
+    var _widthMap$get3;
+
+    var key = index.toString();
+    var width = (_widthMap$get3 = widthMap.get(key)) === null || _widthMap$get3 === void 0 ? void 0 : _widthMap$get3.width;
+    totalColumnWidth += width;
+  });
+  return {
+    columnsWidthMap: widthMap,
+    totalColumnWidth: totalColumnWidth
+  };
+}
+
+function getWidthByColumnsWidth(clientWidth, width) {
+  if (width === undefined) {
+    return NOT_SET;
+  }
+
+  if (typeof width === 'number') {
+    return getValidWidthByNumber(width);
+  }
+
+  if (isPercentageWidth(width)) {
+    return getPercentageValue(width, clientWidth);
+  }
+
+  if (isSpecificPxWidth(width)) {
+    var specificNum = getPxValue(width);
+    return getValidWidthByNumber(specificNum);
+  }
+
+  return NOT_SET;
+}
+
+function isPercentageWidth(width) {
+  return /[0-9]{1,}%$/.test(width);
+}
+
+function isSpecificPxWidth(width) {
+  return /[0-9]{1,}(px)$/.test(width);
+}
+
+function isSpecificWidth(width) {
+  return typeof width === 'number' || !!(width && isSpecificPxWidth(width));
+}
+
+function getValidWidthByNumber(width) {
+  return width < COLUMN_MIN_WIDTH ? COLUMN_MIN_WIDTH : width;
+}
+
+function getValidScrollThreshold(height, clientHeight) {
+  var scrollThreshold = ZERO;
+
+  if (typeof height === 'string') {
+    if (isPercentageWidth(height)) {
+      scrollThreshold = getPercentageValue(height, clientHeight);
+    } else {
+      scrollThreshold = getPxValue(height);
+    }
+  } else {
+    scrollThreshold = height;
+  }
+
+  return scrollThreshold;
+}
+
+function getPercentageValue(percentage, containerNum) {
+  var percent = Math.floor(Number(percentage.replace('%', '')) / HUNDRED);
+  return getValidWidthByNumber(containerNum * percent);
+}
+
+function getPxValue(px) {
+  return Number(px.replace('px', ''));
+}

package/lib/Tabs/index.js

@@ -5,14 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Tabs;
 
+require("@aloudata/icons-react/styles/index.less");
+
+var _More2 = _interopRequireDefault(require("@aloudata/icons-react/es/icons/More"));
+
 require("antd/es/tabs/style");
 
 var _tabs = _interopRequireDefault(require("antd/es/tabs"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _More = _interopRequireDefault(require("../Icon/icons/More"));
-
 var _TabPane = _interopRequireDefault(require("./TabPane"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -47,7 +49,7 @@ function Tabs(props) {
   return /*#__PURE__*/_react.default.createElement(_tabs.default, Object.assign({
     moreIcon: /*#__PURE__*/_react.default.createElement("div", {
       className: "ald-tabs-moreIcon"
-    }, /*#__PURE__*/_react.default.createElement(_More.default, {
+    }, /*#__PURE__*/_react.default.createElement(_More2.default, {
       color: "currentColor"
     })),
     tabBarGutter: 24,

package/lib/Tabs/style/index.less

@@ -2,21 +2,21 @@
 @import '../../style/index.less';
 @import '../../Button/style/index.less';
 //status- default
-@Tabs-color: @NL30;
-@Tabs-fontWeight: 400;
+@tabs-color: @NL30;
+@tabs-fontWeight: 400;
 //active
-@Tabs-color-active: @B60;
-@Tabs-fontWeight-active: 600;
+@tabs-color-active: @B60;
+@tabs-fontWeight-active: 600;
 
 //middle - default
-@Tabs-fontSize: 14px;
-@Tabs-lineHeight: 20px;
-@Tabs-ink-link-bar-height: 2px;
+@tabs-font-size: 14px;
+@tabs-line-height: 20px;
+@tabs-ink-link-bar-height: 2px;
 //large
-@Tabs-fontSize-large: 16px;
-@Tabs-lineHeight-large: 24px;
-@Tabs-ink-link-bar-height-large: 3px;
-// @Tabs-
+@tabs-font-size-large: 16px;
+@tabs-line-height-large: 24px;
+@tabs-ink-link-bar-height-large: 3px;
+// @tabs-
 .ant-tabs.ald-tabs {
   &.ant-tabs {
     color: @NL30;
@@ -24,29 +24,29 @@
 
   .ant-tabs-tab {
     padding: 8px 0;
-    color: @Tabs-color;
-    font-weight: @Tabs-fontWeight;
-    font-size: @Tabs-fontSize;
-    line-height: @Tabs-lineHeight;
+    color: @tabs-color;
+    font-weight: @tabs-fontWeight;
+    font-size: @tabs-font-size;
+    line-height: @tabs-line-height;
 
     &:hover {
       color: inherit;
     }
 
     &.ant-tabs-tab-active {
-      font-weight: @Tabs-fontWeight-active;
+      font-weight: @tabs-fontWeight-active;
     }
   }
 
   .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
-    color: @Tabs-color-active;
-    font-weight: @Tabs-fontWeight-active;
+    color: @tabs-color-active;
+    font-weight: @tabs-fontWeight-active;
     text-shadow: none;
   }
 
   .ant-tabs-ink-bar {
-    height: @Tabs-ink-link-bar-height;
-    background: @Tabs-color-active;
+    height: @tabs-ink-link-bar-height;
+    background: @tabs-color-active;
     border-top-left-radius: 2px;
     border-top-right-radius: 2px;
   }
@@ -54,12 +54,12 @@
   /* large size */
   &.ant-tabs-large {
     .ant-tabs-tab {
-      font-size: @Tabs-fontSize-large;
-      line-height: @Tabs-lineHeight-large;
+      font-size: @tabs-font-size-large;
+      line-height: @tabs-line-height-large;
     }
 
     .ant-tabs-ink-bar {
-      height: @Tabs-ink-link-bar-height-large;
+      height: @tabs-ink-link-bar-height-large;
     }
 
     .ald-tabs-moreIcon {
@@ -71,8 +71,8 @@
 
   &.ald-tabs-default {
     .ant-tabs-tab {
-      font-size: @Tabs-fontSize;
-      line-height: @Tabs-lineHeight;
+      font-size: @tabs-font-size;
+      line-height: @tabs-line-height;
     }
 
     .ald-tabs-moreIcon {