@aloudata/aloudata-design 0.4.0-beta.6 → 0.4.0-beta.8

package/es/Table/Table.js

@@ -62,12 +62,12 @@ function Table(props, ref) {
       rowKey = props.rowKey,
       height = props.height;
 
-  var _useState = useState(ZERO),
+  var _useState = useState(undefined),
       _useState2 = _slicedToArray(_useState, 2),
       tableClientWidth = _useState2[0],
       setTableClientWidth = _useState2[1];
 
-  var _useState3 = useState(ZERO),
+  var _useState3 = useState(undefined),
       _useState4 = _slicedToArray(_useState3, 2),
       tableClientHeight = _useState4[0],
       setTableClientHeight = _useState4[1];
@@ -76,7 +76,6 @@ function Table(props, ref) {
   var tableRef = useRef(null);
   var tableHeadRef = useRef(null);
   var tableBodyRef = useRef(null);
-  var columnsRef = useRef([]);
   var columnsWidthMapRef = useRef();
   var columnsTotalWidthRef = useRef(ZERO);
 
@@ -91,12 +90,7 @@ function Table(props, ref) {
   var _useTimeoutLock = useTimeoutLock(),
       _useTimeoutLock2 = _slicedToArray(_useTimeoutLock, 2),
       setScrollTarget = _useTimeoutLock2[0],
-      getScrollTarget = _useTimeoutLock2[1]; // 记录初始columns, 后续更改不响应
-
-
-  if (columns && columnsRef.current.length === ZERO) {
-    columnsRef.current = columns;
-  } // 初始化进入时 渲染表格容器宽度
+      getScrollTarget = _useTimeoutLock2[1]; // 初始化进入时 渲染表格容器宽度
 
 
   useEffect(function () {
@@ -106,13 +100,17 @@ function Table(props, ref) {
   }, []); // 转换外部传入的columns
 
   var newColumns = useMemo(function () {
-    var _getColumnsWidthMap = getColumnsWidthMap(columnsRef.current, tableClientWidth, columnsWidthMapRef.current),
+    if (!tableClientWidth) {
+      return [];
+    }
+
+    var _getColumnsWidthMap = getColumnsWidthMap(columns, tableClientWidth, columnsWidthMapRef.current),
         columnsWidthMap = _getColumnsWidthMap.columnsWidthMap,
         totalColumnWidth = _getColumnsWidthMap.totalColumnWidth;
 
     columnsWidthMapRef.current = columnsWidthMap;
     columnsTotalWidthRef.current = totalColumnWidth;
-    return columnsRef.current.map(function (column, index) {
+    return columns.map(function (column, index) {
       var _columnsWidthMapRef$c, _columnsWidthMapRef$c2;
 
       var key = index.toString(); // 不设置dataIndex同时进行排序 则报错
@@ -135,7 +133,7 @@ function Table(props, ref) {
         }
       });
     });
-  }, [sortable, tableClientWidth]); // 将rowId转为React Table支持的值
+  }, [columns, sortable, tableClientWidth]); // 将rowId转为React Table支持的值
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
   var transformRowId = function transformRowId(row, relativeIndex, parent) {
@@ -161,7 +159,9 @@ function Table(props, ref) {
 
 
   var getTableInitSort = function getTableInitSort() {
-    if (!sortable || loadMore) {
+    var EMPTY_SIZE = 0;
+
+    if (!sortable || loadMore || newColumns.length === EMPTY_SIZE) {
       return [];
     }
 
@@ -216,7 +216,7 @@ function Table(props, ref) {
   var tableHeadNode = /*#__PURE__*/React.createElement(TableHead, {
     canResizeColumn: resizeColumn,
     headerGroups: headerGroups,
-    tableContentWidth: columnsTotalWidthRef.current,
+    // tableContentWidth={columnsTotalWidthRef.current}
     defaultSort: defaultSort,
     sortable: sortable,
     columns: newColumns,
@@ -275,6 +275,10 @@ function Table(props, ref) {
   }, []); // 内部滚动时 纵向的滚动
 
   var onBodyVerticalScroll = useCallback(function (target) {
+    if (!tableClientHeight) {
+      return;
+    }
+
     var scrollHeight = target.scrollHeight,
         clientHeight = target.clientHeight,
         scrollTop = target.scrollTop;
@@ -328,6 +332,10 @@ function Table(props, ref) {
   }, [hasNextPage]); // 渲染有设置高度的表格
 
   var renderTableWithHeight = function renderTableWithHeight() {
+    if (!tableClientWidth || !tableClientHeight) {
+      return null;
+    }
+
     var renderNoHeightTableBody = function renderNoHeightTableBody() {
       if (loading && !rows.length) {
         return /*#__PURE__*/React.createElement(Loading, null);
@@ -358,21 +366,21 @@ function Table(props, ref) {
     }), renderNoHeightTableBody()));
   };
 
-  return /*#__PURE__*/React.createElement(ResizeObserver, {
-    onResize: function onResize(_ref2) {
-      var clientWidth = _ref2.width,
-          clientHeight = _ref2.height;
-      setTableClientWidth(clientWidth);
-      setTableClientHeight(clientHeight);
-    }
-  }, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     key: tableKey,
     className: prefixCls,
     ref: tableRef,
     style: {
       height: !height ? 'unset' : height
     }
-  }, /*#__PURE__*/React.createElement("div", Object.assign({}, getTableProps(), {
+  }, /*#__PURE__*/React.createElement(ResizeObserver, {
+    onResize: function onResize(_ref2) {
+      var clientWidth = _ref2.width,
+          clientHeight = _ref2.height;
+      setTableClientWidth(clientWidth);
+      setTableClientHeight(clientHeight);
+    }
+  }, !tableClientWidth ? null : /*#__PURE__*/React.createElement("div", Object.assign({}, getTableProps(), {
     className: classnames("".concat(prefixCls, "-table-wrap"), (_classnames3 = {}, _defineProperty(_classnames3, "".concat(prefixCls, "-init-loading"), data.length === ZERO && loading), _defineProperty(_classnames3, "".concat(prefixCls, "-empty"), data.length === ZERO && loading), _classnames3))
   }), height ? renderTableWithHeight() : renderTableWithoutHeight())));
 }

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

@@ -4,7 +4,6 @@ import { ISort, TSortOrder } from '../../interface';
 import { IWidthDetail } from '../../utils';
 interface ITableWithoutHeightProps<T extends object = {}> {
     headerGroups: HeaderGroup<T>[];
-    tableContentWidth: number;
     canResizeColumn?: boolean;
     defaultSort?: ISort<T>;
     sortable?: boolean;

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

@@ -36,7 +36,6 @@ var ARRAY_FIRST_INDEX = 0;
 
 function TableHead(props) {
   var headerGroups = props.headerGroups,
-      tableContentWidth = props.tableContentWidth,
       canResizeColumn = props.canResizeColumn,
       defaultSort = props.defaultSort,
       _props$sortable = props.sortable,
@@ -228,7 +227,7 @@ function TableHead(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-thead"),
     style: {
-      width: tableContentWidth
+      width: columnsTotalWidthRef.current
     }
   }, headerGroups.map(function (headerGroup) {
     var _headerGroup$getHeade = headerGroup.getHeaderGroupProps(),

package/es/Table/interface.d.ts

@@ -11,6 +11,7 @@ export interface IColumn<RecordType> {
     render?: (value: any, row: RecordType, index: number) => React.ReactNode;
     width?: number | string;
     minWidth?: number;
+    widthFlex?: boolean;
     sorter?: boolean | 'string' | 'number' | 'basic' | 'datetime' | 'alphanumeric';
     sortOrder?: TSortOrder;
     sortDirections?: Array<'ascend' | 'descend'>;

package/es/Table/style/index.less

@@ -30,6 +30,7 @@
   }
 
   &-tableHeadScrollWrap {
+    display: flex;
     width: 100%;
     overflow-x: hidden;
   }
@@ -37,7 +38,7 @@
   &-cell {
     flex-grow: 1;
     height: unset;
-    color: @NL0;
+    color: inherit;
     text-align: left;
     word-break: break-all;
     border-bottom: 1px solid @NL95;

package/es/Table/utils.js

@@ -1,6 +1,6 @@
 var ZERO = 0;
 var NOT_SET = -1;
-var COLUMN_MIN_WIDTH = 72;
+var COLUMN_MIN_WIDTH = 80;
 var HUNDRED = 100; // TODO: 添加单侧
 
 export function getColumnsWidthMap(columns, clientWidth, lastWidthMap) {
@@ -9,12 +9,19 @@ export function getColumnsWidthMap(columns, clientWidth, lastWidthMap) {
   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 widthFlex = item.widthFlex;
+    var width = getWidthByColumnsWidth(clientWidth, item.width, widthFlex); // 首先判断是否是否是容器宽度的变化
+
+    var isSpecific;
 
-    var isSpecific = lastWidthMap ? (_lastWidthMap$get = lastWidthMap.get(key)) === null || _lastWidthMap$get === void 0 ? void 0 : _lastWidthMap$get.isSpecific : isSpecificWidth(item.width);
+    if (widthFlex) {
+      isSpecific = false;
+    } else {
+      var _lastWidthMap$get;
+
+      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;
@@ -40,7 +47,7 @@ export function getColumnsWidthMap(columns, clientWidth, lastWidthMap) {
 
       return widthMap.set(item, {
         isSpecific: (_widthMap$get = widthMap.get(item)) === null || _widthMap$get === void 0 ? void 0 : _widthMap$get.isSpecific,
-        width: 72
+        width: COLUMN_MIN_WIDTH
       });
     });
   } // 设定宽度小于容器宽度时
@@ -72,8 +79,8 @@ export function getColumnsWidthMap(columns, clientWidth, lastWidthMap) {
   };
 }
 
-function getWidthByColumnsWidth(clientWidth, width) {
-  if (width === undefined) {
+function getWidthByColumnsWidth(clientWidth, width, widthFlex) {
+  if (width === undefined || widthFlex) {
     return NOT_SET;
   }
 
@@ -123,7 +130,7 @@ export function getValidScrollThreshold(height, clientHeight) {
   return scrollThreshold;
 }
 export function getPercentageValue(percentage, containerNum) {
-  var percent = Math.floor(Number(percentage.replace('%', '')) / HUNDRED);
+  var percent = Number(percentage.replace('%', '')) / HUNDRED;
   return getValidWidthByNumber(containerNum * percent);
 }
 export function getPxValue(px) {

package/es/Tabs/style/index.less

@@ -5,7 +5,7 @@
 @tabs-color: @NL30;
 @tabs-fontWeight: 400;
 //active
-@tabs-color-active: @B60;
+@tabs-color-active: @B30;
 @tabs-fontWeight-active: 600;
 
 //middle - default

package/es/Tooltip/style/index.less

@@ -5,7 +5,7 @@
     padding: 6px 12px;
     line-height: 20px;
     background: @BG10;
-    border-radius: @border-radius-base;
+    border-radius: @ald-border-radius-base;
     box-shadow: none;
   }
 

package/es/index.d.ts

@@ -55,18 +55,18 @@ export { default as Steps } from './Steps';
 export { default as Form } from './Form';
 export type { FormInstance, FormProps, FormItemProps } from './Form';
 export { default as Divider } from './Divider';
-export type { DividerProps } from './Divider';
+export type { IDividerProps as DividerProps } from './Divider';
 export { default as Drawer } from './Drawer';
 export type { DrawerProps } from './Drawer';
 export { default as Radio } from './Radio';
 export type { RadioProps, RadioGroupProps } from './Radio';
 export { default as Checkbox } from './Checkbox';
-export type { CheckboxProps, CheckboxOptionType } from './Checkbox';
+export type { ICheckboxProps as CheckboxProps, CheckboxOptionType } from './Checkbox';
 export { default as Modal } from './Modal';
 export type { ModalProps, ModalFuncProps } from './Modal';
 export { default as Popover } from './Popover';
 export type { PopoverProps } from './Popover';
-export type { InputNumberProps } from './InputNumber';
+export type { IInputNumberProps as InputNumberProps } from './InputNumber';
 export { default as InputNumber } from './InputNumber';
 export { default as Breadcrumb } from './Breadcrumb';
 export type { BreadcrumbProps, BreadcrumbItemProps } from './Breadcrumb';

package/es/style/themes/default/scrollBar.less

@@ -1,13 +1,16 @@
-::-webkit-scrollbar-thumb {
-  background: @NL90;
-  background-clip: padding-box;
+&::-webkit-scrollbar {
+  width: 12px !important;
+  height: 12px !important;
+  opacity: 0.5;
+}
+
+&::-webkit-scrollbar-thumb {
+  background-color: rgba(152, 162, 179, 0.5);
   border: 3px solid transparent;
   border-radius: 6px;
+  background-clip: padding-box;
 }
 
-::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
-  min-height: 12px;
+&::-webkit-scrollbar-track {
   background-color: transparent;
 }