@aloudata/aloudata-design 0.2.0-beta.10 → 0.2.0-beta.11

package/es/Button/style/index.less

@@ -248,6 +248,7 @@
     &-sm {
       height: 24px;
       border-radius: @border-radius-sm;
+      line-height: 22px;
 
       &.ant-btn-icon-only {
         height: 24px;

package/es/Dropdown/Button.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactElement } from 'react';
 import { ButtonType, Size } from '../Button';
+import '../Button/style';
 export declare type ActionType = 'hover' | 'click' | 'contextMenu';
 export interface IDropdownButton {
     /**

package/es/Dropdown/Button.js

@@ -11,7 +11,8 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 import React from 'react';
-import Button from '../Button'; // eslint-disable-next-line import/no-cycle
+import Button from '../Button';
+import '../Button/style'; // eslint-disable-next-line import/no-cycle
 
 import Dropdown from './index';
 import Icon from '../Icon';

package/es/Dropdown/style/index.d.ts

@@ -1,2 +1,3 @@
+import 'antd/lib/dropdown/style';
 import '../../style';
 import './index.less';

package/es/Dropdown/style/index.js

@@ -1,2 +1,3 @@
+import 'antd/lib/dropdown/style';
 import '../../style';
 import './index.less';

package/es/Input/components/TextArea/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { TextAreaProps, TextAreaRef } from 'antd/lib/input/TextArea';
+export type { TextAreaRef };
 export interface ITextAreaProps extends Omit<TextAreaProps, 'onPressEnter'> {
     /**
      * @description 可以点击清除图标删除内容

package/es/Input/index.d.ts

@@ -5,7 +5,7 @@ import TextArea from './components/TextArea';
 import Password from './components/Password';
 export type { IInputProps, InputRef, TSize } from './components/Input';
 export type { IGroupProps } from './components/Group';
-export type { ITextAreaProps } from './components/TextArea';
+export type { ITextAreaProps, TextAreaRef } from './components/TextArea';
 export type { IPasswordProps } from './components/Password';
 interface ICompoundedComponent extends React.ForwardRefExoticComponent<IInputProps & React.RefAttributes<InputRef>> {
     Group: typeof Group;

package/es/Input/style/index.d.ts

@@ -1,2 +1,3 @@
+import 'antd/lib/input/style';
 import '../../style';
 import './index.less';

package/es/Input/style/index.js

@@ -1,2 +1,3 @@
+import 'antd/lib/input/style';
 import '../../style';
 import './index.less';

package/es/Menu/style/index.d.ts

@@ -1,2 +1,3 @@
+import 'antd/lib/menu/style';
 import '../../style';
 import './index.less';

package/es/Menu/style/index.js

@@ -1,2 +1,3 @@
+import 'antd/lib/menu/style';
 import '../../style';
 import './index.less';

package/es/Table/index.d.ts

@@ -1,4 +1,4 @@
 import { ReactElement } from 'react';
 import { ITableProps } from './interface';
-declare function Table<T extends Record<string, unknown>>({ columns, data, total, renderHeaderLeft, renderHeaderRight, scrollY, onRowSelected, loadMore, hasNextPage, loading, sortable, defaultSort, resizeColumn, sortDirections: allSortDirections, showHeader, onChange, }: ITableProps<T>): ReactElement;
+declare function Table<T extends Record<string, unknown>>({ columns, data, total, renderHeaderLeft, renderHeaderRight, onRowSelected, loadMore, hasNextPage, loading, sortable, defaultSort, resizeColumn, sortDirections: allSortDirections, showHeader, onChange, }: ITableProps<T>): ReactElement;
 export default Table;

package/es/Table/index.js

@@ -24,7 +24,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 /// <reference types ='./react-table-config' />
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTable, useBlockLayout, useRowSelect, useSortBy, useResizeColumns } from 'react-table';
 import usePrefixCls from '../_utils/hooks/usePrefixCls';
 import { FixedSizeList } from 'react-window';
@@ -36,6 +36,7 @@ import _ from 'lodash';
 var DEFAULT_ROW_HEIGHT = 40;
 var ARRAY_FIRST_INDEX = 0;
 var DEFAULT_ROW_WIDTH = 0;
+var DEFAULT_BODY_HEIGHT = 0;
 
 function Table(_ref) {
   var columns = _ref.columns,
@@ -43,7 +44,6 @@ function Table(_ref) {
       total = _ref.total,
       renderHeaderLeft = _ref.renderHeaderLeft,
       renderHeaderRight = _ref.renderHeaderRight,
-      scrollY = _ref.scrollY,
       onRowSelected = _ref.onRowSelected,
       _ref$loadMore = _ref.loadMore,
       loadMore = _ref$loadMore === void 0 ? function () {} : _ref$loadMore,
@@ -65,6 +65,18 @@ function Table(_ref) {
       selectedRowId = _React$useState2[0],
       setSelectedRowId = _React$useState2[1];
 
+  var tableBodyRef = useRef(null);
+
+  var _useState = useState(DEFAULT_BODY_HEIGHT),
+      _useState2 = _slicedToArray(_useState, 2),
+      bodyClientHeight = _useState2[0],
+      setBodyClientHeight = _useState2[1];
+
+  useEffect(function () {
+    if (tableBodyRef.current) {
+      setBodyClientHeight(tableBodyRef.current.clientHeight);
+    }
+  }, []);
   var newColumns = useMemo(function () {
     return columns.map(function (column) {
       return _objectSpread(_objectSpread({}, column), {}, {
@@ -121,17 +133,6 @@ function Table(_ref) {
 
   var theadRowWidthRef = React.useRef(DEFAULT_ROW_WIDTH);
   var prefixCls = usePrefixCls('block-table');
-
-  function getTbodyStyle() {
-    if (scrollY) {
-      return {
-        height: "".concat(scrollY, "px")
-      };
-    }
-
-    return {};
-  }
-
   var onRowClick = useCallback(function (row) {
     if (!onRowSelected) {
       return;
@@ -293,10 +294,46 @@ function Table(_ref) {
     });
   };
 
+  var renderTableBody = function renderTableBody() {
+    if (!loading && !rows.length) {
+      return /*#__PURE__*/React.createElement(Empty, {
+        description: "\u5F53\u524D\u65E0\u6570\u636E"
+      });
+    }
+
+    if (loadMoreItems) {
+      return /*#__PURE__*/React.createElement(InfiniteLoader, {
+        isItemLoaded: isItemLoaded,
+        itemCount: itemCount,
+        loadMoreItems: loadMoreItems
+      }, function (_ref5) {
+        var onItemsRendered = _ref5.onItemsRendered,
+            ref = _ref5.ref;
+        return /*#__PURE__*/React.createElement(FixedSizeList, {
+          itemCount: itemCount,
+          onItemsRendered: onItemsRendered,
+          height: bodyClientHeight,
+          itemSize: DEFAULT_ROW_HEIGHT,
+          width: resizeColumn ? theadRowWidthRef.current : '100%',
+          ref: ref,
+          className: "".concat(prefixCls, "-list")
+        }, RenderRow);
+      });
+    }
+
+    return /*#__PURE__*/React.createElement(FixedSizeList, {
+      itemCount: itemCount,
+      height: bodyClientHeight,
+      itemSize: DEFAULT_ROW_HEIGHT,
+      width: resizeColumn ? theadRowWidthRef.current : '100%',
+      className: "".concat(prefixCls, "-list")
+    }, RenderRow);
+  };
+
   return /*#__PURE__*/React.createElement("div", {
     className: prefixCls
   }, showHeader && renderHeader(data.length), /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread({}, getTableProps()), {}, {
-    className: classnames(_defineProperty({}, "".concat(prefixCls, "-column-resizable"), resizeColumn))
+    className: classnames("".concat(prefixCls, "-table-wrap"), _defineProperty({}, "".concat(prefixCls, "-column-resizable"), resizeColumn))
   }), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-thead")
   }, headerGroups.map(function (headerGroup) {
@@ -324,27 +361,9 @@ function Table(_ref) {
       }));
     }));
   })), /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread({}, getTableBodyProps()), {}, {
-    className: classnames("".concat(prefixCls, "-tbody"), _defineProperty({}, "".concat(prefixCls, "-tbody-scroll"), !loadMoreItems)),
-    style: getTbodyStyle()
-  }), !loading && !rows.length && /*#__PURE__*/React.createElement(Empty, {
-    description: "\u5F53\u524D\u65E0\u6570\u636E"
-  }), /*#__PURE__*/React.createElement(InfiniteLoader, {
-    isItemLoaded: isItemLoaded,
-    itemCount: itemCount,
-    loadMoreItems: loadMoreItems
-  }, function (_ref5) {
-    var onItemsRendered = _ref5.onItemsRendered,
-        ref = _ref5.ref;
-    return /*#__PURE__*/React.createElement(FixedSizeList, {
-      itemCount: itemCount,
-      onItemsRendered: onItemsRendered,
-      height: scrollY || data.length * DEFAULT_ROW_HEIGHT,
-      itemSize: DEFAULT_ROW_HEIGHT,
-      width: resizeColumn ? theadRowWidthRef.current : '100%',
-      ref: ref,
-      className: "".concat(prefixCls, "-list")
-    }, RenderRow);
-  }))));
+    className: classnames("".concat(prefixCls, "-tbody")),
+    ref: tableBodyRef
+  }), renderTableBody())));
 }
 
 export default Table;

package/es/Table/interface.d.ts

@@ -20,7 +20,6 @@ export interface ITableProps<T extends object> {
     columns: IColumn<T>[];
     data: T[];
     total?: number;
-    scrollY?: number;
     onRowSelected?: (row: T) => void;
     loadMore?: (startIndex: number, stopIndex: number) => void | Promise<void>;
     hasNextPage?: boolean;

package/es/Table/style/index.less

@@ -1,24 +1,34 @@
 @import '../../style/index.less';
 
-@ald-prefix:ant;
-@ald-iconfont-css-prefix:anticon;
-@table-row-height:40px;
+@ald-prefix: ant;
+@ald-iconfont-css-prefix: anticon;
+@table-row-height: 40px;
 
 .ant-block-table {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
   overflow: hidden;
   user-select: none;
 
+  &-table-wrap {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+
   &-cell {
-    padding: 0 12px;
+    flex-grow: 1;
     height: @table-row-height;
-    line-height: @table-row-height;
-    border-bottom: 1px solid @NL95;
-    text-align: left;
-    color: @NL0;
+    padding: 0 12px;
     overflow: hidden;
+    color: @NL0;
+    line-height: @table-row-height;
     white-space: nowrap;
+    text-align: left;
     text-overflow: ellipsis;
-    flex-grow: 1;
+    border-bottom: 1px solid @NL95;
   }
 
   &-row {
@@ -36,17 +46,17 @@
       // border: 1px solid red;
 
       .ant-block-table-bar {
-        display: inline-block;
-        background: blue;
-        width: 1px;
-        height: 12px;
         position: absolute;
         top: 50%;
         right: 0;
-        transform: translateY(-50%);
         z-index: 1;
-        touch-action: none;
+        display: inline-block;
+        width: 1px;
+        height: 12px;
+        background: blue;
         background-color: @NL95;
+        transform: translateY(-50%);
+        touch-action: none;
       }
 
       &:last-child {
@@ -58,11 +68,11 @@
   }
 
   &-tbody {
+    flex: 1;
     overflow: hidden;
 
-    &-scroll {
-      overflow-y: scroll;
-      overflow-y: overlay;
+    .ant-empty {
+      padding-top: 80px;
     }
 
     .ant-block-table-row {
@@ -87,41 +97,55 @@
   }
 
   &-loading {
-    text-align: center;
-    line-height: @table-row-height;
     color: @NL80;
+    line-height: @table-row-height;
+    text-align: center;
   }
 
   &-header {
     display: flex;
-    justify-content: space-between;
-    padding: 0 10px;
     align-items: center;
+    justify-content: space-between;
     margin-bottom: 24px;
+    padding: 0 10px;
 
     &-left {
+      color: @NL0;
       font-weight: 500;
       font-size: 14px;
-      color: @NL0;
     }
 
     &-right {
       display: flex;
+      align-items: center;
       justify-content: flex-end;
       height: 28px;
-      align-items: center;
-      font-size: 14px;
       color: @NL0;
+      font-size: 14px;
     }
   }
 
   &-list {
     overflow: overlay !important;
+
+    &::-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-left: 4px;
     margin-top: -2px;
+    margin-left: 4px;
   }
 
   &-column-resizable {
@@ -148,4 +172,4 @@
       }
     }
   }
-}
+}

package/es/Tabs/index.js

@@ -1,3 +1,5 @@
+import "antd/es/tabs/style";
+import _Tabs from "antd/es/tabs";
 var _excluded = ["size", "className", "adaptHeight"];
 
 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; }
@@ -10,8 +12,8 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-import React from 'react';
-import AntdTabs from 'antd/lib/tabs';
+import React from 'react'; // import AntdTabs, { TabsProps } from 'antd/lib/tabs';
+
 import Icon from '../Icon';
 import TabPane from './TabPane';
 import classNames from 'classnames';
@@ -27,7 +29,7 @@ export default function Tabs(props) {
     tabsProps.size = size;
   }
 
-  return /*#__PURE__*/React.createElement(AntdTabs, _objectSpread({
+  return /*#__PURE__*/React.createElement(_Tabs, _objectSpread({
     moreIcon: /*#__PURE__*/React.createElement(Icon, {
       type: "more_vert",
       size: 18

package/es/Tabs/style/index.d.ts

@@ -1,2 +1,3 @@
+import 'antd/lib/tabs/style';
 import '../../style';
 import './index.less';

package/es/Tabs/style/index.js

@@ -1,2 +1,3 @@
+import 'antd/lib/tabs/style';
 import '../../style';
 import './index.less';

package/es/index.d.ts

@@ -7,7 +7,7 @@ export { MenuClickEventHandler } from 'rc-menu/lib/interface';
 export { default as Menu } from './Menu';
 export type { IMenuProps as MenuProps } from './Menu';
 export { default as Input } from './Input';
-export type { IInputProps as InputProps, TSize } from './Input';
+export type { IInputProps as InputProps, TSize, InputRef, TextAreaRef } from './Input';
 export { default as Tabs } from './Tabs';
 export type { ITabsProps as TabsProps, TabsSize } from './Tabs';
 export { default as Tooltip } from './Tooltip';

package/es/style/index.d.ts

@@ -1,2 +1,2 @@
-import 'antd/dist/antd.compact.css';
+import 'antd/lib/style/compact.less';
 import './index.less';

package/es/style/index.js

@@ -1,2 +1,2 @@
-import 'antd/dist/antd.compact.css';
+import 'antd/lib/style/compact.less';
 import './index.less';

package/lib/Button/style/index.less

@@ -248,6 +248,7 @@
     &-sm {
       height: 24px;
       border-radius: @border-radius-sm;
+      line-height: 22px;
 
       &.ant-btn-icon-only {
         height: 24px;

package/lib/Dropdown/Button.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactElement } from 'react';
 import { ButtonType, Size } from '../Button';
+import '../Button/style';
 export declare type ActionType = 'hover' | 'click' | 'contextMenu';
 export interface IDropdownButton {
     /**

package/lib/Dropdown/Button.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Button = _interopRequireDefault(require("../Button"));
 
+require("../Button/style");
+
 var _index = _interopRequireDefault(require("./index"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));

package/lib/Dropdown/style/index.d.ts

@@ -1,2 +1,3 @@
+import 'antd/lib/dropdown/style';
 import '../../style';
 import './index.less';

package/lib/Dropdown/style/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+require("antd/lib/dropdown/style");
+
 require("../../style");
 
 require("./index.less");

package/lib/Input/components/TextArea/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { TextAreaProps, TextAreaRef } from 'antd/lib/input/TextArea';
+export type { TextAreaRef };
 export interface ITextAreaProps extends Omit<TextAreaProps, 'onPressEnter'> {
     /**
      * @description 可以点击清除图标删除内容

package/lib/Input/index.d.ts

@@ -5,7 +5,7 @@ import TextArea from './components/TextArea';
 import Password from './components/Password';
 export type { IInputProps, InputRef, TSize } from './components/Input';
 export type { IGroupProps } from './components/Group';
-export type { ITextAreaProps } from './components/TextArea';
+export type { ITextAreaProps, TextAreaRef } from './components/TextArea';
 export type { IPasswordProps } from './components/Password';
 interface ICompoundedComponent extends React.ForwardRefExoticComponent<IInputProps & React.RefAttributes<InputRef>> {
     Group: typeof Group;

package/lib/Input/style/index.d.ts

@@ -1,2 +1,3 @@
+import 'antd/lib/input/style';
 import '../../style';
 import './index.less';

package/lib/Input/style/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+require("antd/lib/input/style");
+
 require("../../style");
 
 require("./index.less");

package/lib/Menu/style/index.d.ts

@@ -1,2 +1,3 @@
+import 'antd/lib/menu/style';
 import '../../style';
 import './index.less';

package/lib/Menu/style/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+require("antd/lib/menu/style");
+
 require("../../style");
 
 require("./index.less");

package/lib/Table/index.d.ts

@@ -1,4 +1,4 @@
 import { ReactElement } from 'react';
 import { ITableProps } from './interface';
-declare function Table<T extends Record<string, unknown>>({ columns, data, total, renderHeaderLeft, renderHeaderRight, scrollY, onRowSelected, loadMore, hasNextPage, loading, sortable, defaultSort, resizeColumn, sortDirections: allSortDirections, showHeader, onChange, }: ITableProps<T>): ReactElement;
+declare function Table<T extends Record<string, unknown>>({ columns, data, total, renderHeaderLeft, renderHeaderRight, onRowSelected, loadMore, hasNextPage, loading, sortable, defaultSort, resizeColumn, sortDirections: allSortDirections, showHeader, onChange, }: ITableProps<T>): ReactElement;
 export default Table;

package/lib/Table/index.js

@@ -17,7 +17,7 @@ var _reactWindow = require("react-window");
 
 var _reactWindowInfiniteLoader = _interopRequireDefault(require("react-window-infinite-loader"));
 
-var _classnames6 = _interopRequireDefault(require("classnames"));
+var _classnames5 = _interopRequireDefault(require("classnames"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
@@ -59,6 +59,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var DEFAULT_ROW_HEIGHT = 40;
 var ARRAY_FIRST_INDEX = 0;
 var DEFAULT_ROW_WIDTH = 0;
+var DEFAULT_BODY_HEIGHT = 0;
 
 function Table(_ref) {
   var columns = _ref.columns,
@@ -66,7 +67,6 @@ function Table(_ref) {
       total = _ref.total,
       renderHeaderLeft = _ref.renderHeaderLeft,
       renderHeaderRight = _ref.renderHeaderRight,
-      scrollY = _ref.scrollY,
       onRowSelected = _ref.onRowSelected,
       _ref$loadMore = _ref.loadMore,
       loadMore = _ref$loadMore === void 0 ? function () {} : _ref$loadMore,
@@ -88,6 +88,18 @@ function Table(_ref) {
       selectedRowId = _React$useState2[0],
       setSelectedRowId = _React$useState2[1];
 
+  var tableBodyRef = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(DEFAULT_BODY_HEIGHT),
+      _useState2 = _slicedToArray(_useState, 2),
+      bodyClientHeight = _useState2[0],
+      setBodyClientHeight = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    if (tableBodyRef.current) {
+      setBodyClientHeight(tableBodyRef.current.clientHeight);
+    }
+  }, []);
   var newColumns = (0, _react.useMemo)(function () {
     return columns.map(function (column) {
       return _objectSpread(_objectSpread({}, column), {}, {
@@ -145,17 +157,6 @@ function Table(_ref) {
   var theadRowWidthRef = _react.default.useRef(DEFAULT_ROW_WIDTH);
 
   var prefixCls = (0, _usePrefixCls.default)('block-table');
-
-  function getTbodyStyle() {
-    if (scrollY) {
-      return {
-        height: "".concat(scrollY, "px")
-      };
-    }
-
-    return {};
-  }
-
   var onRowClick = (0, _react.useCallback)(function (row) {
     if (!onRowSelected) {
       return;
@@ -178,7 +179,7 @@ function Table(_ref) {
     if (!isItemLoaded(index)) {
       return /*#__PURE__*/_react.default.createElement("div", {
         style: style,
-        className: (0, _classnames6.default)("".concat(prefixCls, "-loading"))
+        className: (0, _classnames5.default)("".concat(prefixCls, "-loading"))
       }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
         type: "waiting",
         size: 16
@@ -196,24 +197,24 @@ function Table(_ref) {
       style: _objectSpread(_objectSpread(_objectSpread({}, style), rowStyle), {}, {
         width: resizeColumn ? style === null || style === void 0 ? void 0 : style.width : '100%'
       }),
-      className: (0, _classnames6.default)("".concat(prefixCls, "-row"), _defineProperty({}, "".concat(prefixCls, "-row-selected"), row.id === selectedRowId)),
+      className: (0, _classnames5.default)("".concat(prefixCls, "-row"), _defineProperty({}, "".concat(prefixCls, "-row-selected"), row.id === selectedRowId)),
       onClick: function onClick() {
         return onRowClick(row);
       }
     }), row.cells.map(function (cell) {
       return /*#__PURE__*/_react.default.createElement("div", _objectSpread(_objectSpread({}, cell.getCellProps()), {}, {
-        className: (0, _classnames6.default)("".concat(prefixCls, "-cell"))
+        className: (0, _classnames5.default)("".concat(prefixCls, "-cell"))
       }), cell.render('Cell'));
     }));
   };
 
   var renderHeader = function renderHeader(len) {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames6.default)("".concat(prefixCls, "-header"))
+      className: (0, _classnames5.default)("".concat(prefixCls, "-header"))
     }, renderHeaderLeft ? renderHeaderLeft() : /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames6.default)("".concat(prefixCls, "-header-left"))
+      className: (0, _classnames5.default)("".concat(prefixCls, "-header-left"))
     }, "\u5171\u8BA1", total || len, "\u6761"), /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames6.default)("".concat(prefixCls, "-header-right"))
+      className: (0, _classnames5.default)("".concat(prefixCls, "-header-right"))
     }, renderHeaderRight ? renderHeaderRight() : null));
   };
 
@@ -317,10 +318,46 @@ function Table(_ref) {
     });
   };
 
+  var renderTableBody = function renderTableBody() {
+    if (!loading && !rows.length) {
+      return /*#__PURE__*/_react.default.createElement(_Empty.default, {
+        description: "\u5F53\u524D\u65E0\u6570\u636E"
+      });
+    }
+
+    if (loadMoreItems) {
+      return /*#__PURE__*/_react.default.createElement(_reactWindowInfiniteLoader.default, {
+        isItemLoaded: isItemLoaded,
+        itemCount: itemCount,
+        loadMoreItems: loadMoreItems
+      }, function (_ref5) {
+        var onItemsRendered = _ref5.onItemsRendered,
+            ref = _ref5.ref;
+        return /*#__PURE__*/_react.default.createElement(_reactWindow.FixedSizeList, {
+          itemCount: itemCount,
+          onItemsRendered: onItemsRendered,
+          height: bodyClientHeight,
+          itemSize: DEFAULT_ROW_HEIGHT,
+          width: resizeColumn ? theadRowWidthRef.current : '100%',
+          ref: ref,
+          className: "".concat(prefixCls, "-list")
+        }, RenderRow);
+      });
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_reactWindow.FixedSizeList, {
+      itemCount: itemCount,
+      height: bodyClientHeight,
+      itemSize: DEFAULT_ROW_HEIGHT,
+      width: resizeColumn ? theadRowWidthRef.current : '100%',
+      className: "".concat(prefixCls, "-list")
+    }, RenderRow);
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: prefixCls
   }, showHeader && renderHeader(data.length), /*#__PURE__*/_react.default.createElement("div", _objectSpread(_objectSpread({}, getTableProps()), {}, {
-    className: (0, _classnames6.default)(_defineProperty({}, "".concat(prefixCls, "-column-resizable"), resizeColumn))
+    className: (0, _classnames5.default)("".concat(prefixCls, "-table-wrap"), _defineProperty({}, "".concat(prefixCls, "-column-resizable"), resizeColumn))
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(prefixCls, "-thead")
   }, headerGroups.map(function (headerGroup) {
@@ -338,37 +375,19 @@ function Table(_ref) {
       var barPorps = resizeColumn ? column.getResizerProps() : {};
       return /*#__PURE__*/_react.default.createElement("div", _objectSpread(_objectSpread({
         // {...column.getHeaderProps(column.getSortByToggleProps())}
-        className: (0, _classnames6.default)(_defineProperty({}, "".concat(prefixCls, "-cell-sorting"), column.id === sortDirection.id), "".concat(prefixCls, "-cell"))
+        className: (0, _classnames5.default)(_defineProperty({}, "".concat(prefixCls, "-cell-sorting"), column.id === sortDirection.id), "".concat(prefixCls, "-cell"))
       }, getHeaderProps(column)), {}, {
         key: column.id
       }), column.render('Header'), /*#__PURE__*/_react.default.createElement("div", _objectSpread(_objectSpread({}, barPorps), {}, {
-        className: (0, _classnames6.default)(_defineProperty({}, "".concat(prefixCls, "-dragBar"), resizeColumn), "".concat(prefixCls, "-bar"))
+        className: (0, _classnames5.default)(_defineProperty({}, "".concat(prefixCls, "-dragBar"), resizeColumn), "".concat(prefixCls, "-bar"))
       })), /*#__PURE__*/_react.default.createElement(SortIcons, {
         id: column.id
       }));
     }));
   })), /*#__PURE__*/_react.default.createElement("div", _objectSpread(_objectSpread({}, getTableBodyProps()), {}, {
-    className: (0, _classnames6.default)("".concat(prefixCls, "-tbody"), _defineProperty({}, "".concat(prefixCls, "-tbody-scroll"), !loadMoreItems)),
-    style: getTbodyStyle()
-  }), !loading && !rows.length && /*#__PURE__*/_react.default.createElement(_Empty.default, {
-    description: "\u5F53\u524D\u65E0\u6570\u636E"
-  }), /*#__PURE__*/_react.default.createElement(_reactWindowInfiniteLoader.default, {
-    isItemLoaded: isItemLoaded,
-    itemCount: itemCount,
-    loadMoreItems: loadMoreItems
-  }, function (_ref5) {
-    var onItemsRendered = _ref5.onItemsRendered,
-        ref = _ref5.ref;
-    return /*#__PURE__*/_react.default.createElement(_reactWindow.FixedSizeList, {
-      itemCount: itemCount,
-      onItemsRendered: onItemsRendered,
-      height: scrollY || data.length * DEFAULT_ROW_HEIGHT,
-      itemSize: DEFAULT_ROW_HEIGHT,
-      width: resizeColumn ? theadRowWidthRef.current : '100%',
-      ref: ref,
-      className: "".concat(prefixCls, "-list")
-    }, RenderRow);
-  }))));
+    className: (0, _classnames5.default)("".concat(prefixCls, "-tbody")),
+    ref: tableBodyRef
+  }), renderTableBody())));
 }
 
 var _default = Table;

package/lib/Table/interface.d.ts

@@ -20,7 +20,6 @@ export interface ITableProps<T extends object> {
     columns: IColumn<T>[];
     data: T[];
     total?: number;
-    scrollY?: number;
     onRowSelected?: (row: T) => void;
     loadMore?: (startIndex: number, stopIndex: number) => void | Promise<void>;
     hasNextPage?: boolean;

package/lib/Table/style/index.less

@@ -1,24 +1,34 @@
 @import '../../style/index.less';
 
-@ald-prefix:ant;
-@ald-iconfont-css-prefix:anticon;
-@table-row-height:40px;
+@ald-prefix: ant;
+@ald-iconfont-css-prefix: anticon;
+@table-row-height: 40px;
 
 .ant-block-table {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
   overflow: hidden;
   user-select: none;
 
+  &-table-wrap {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+
   &-cell {
-    padding: 0 12px;
+    flex-grow: 1;
     height: @table-row-height;
-    line-height: @table-row-height;
-    border-bottom: 1px solid @NL95;
-    text-align: left;
-    color: @NL0;
+    padding: 0 12px;
     overflow: hidden;
+    color: @NL0;
+    line-height: @table-row-height;
     white-space: nowrap;
+    text-align: left;
     text-overflow: ellipsis;
-    flex-grow: 1;
+    border-bottom: 1px solid @NL95;
   }
 
   &-row {
@@ -36,17 +46,17 @@
       // border: 1px solid red;
 
       .ant-block-table-bar {
-        display: inline-block;
-        background: blue;
-        width: 1px;
-        height: 12px;
         position: absolute;
         top: 50%;
         right: 0;
-        transform: translateY(-50%);
         z-index: 1;
-        touch-action: none;
+        display: inline-block;
+        width: 1px;
+        height: 12px;
+        background: blue;
         background-color: @NL95;
+        transform: translateY(-50%);
+        touch-action: none;
       }
 
       &:last-child {
@@ -58,11 +68,11 @@
   }
 
   &-tbody {
+    flex: 1;
     overflow: hidden;
 
-    &-scroll {
-      overflow-y: scroll;
-      overflow-y: overlay;
+    .ant-empty {
+      padding-top: 80px;
     }
 
     .ant-block-table-row {
@@ -87,41 +97,55 @@
   }
 
   &-loading {
-    text-align: center;
-    line-height: @table-row-height;
     color: @NL80;
+    line-height: @table-row-height;
+    text-align: center;
   }
 
   &-header {
     display: flex;
-    justify-content: space-between;
-    padding: 0 10px;
     align-items: center;
+    justify-content: space-between;
     margin-bottom: 24px;
+    padding: 0 10px;
 
     &-left {
+      color: @NL0;
       font-weight: 500;
       font-size: 14px;
-      color: @NL0;
     }
 
     &-right {
       display: flex;
+      align-items: center;
       justify-content: flex-end;
       height: 28px;
-      align-items: center;
-      font-size: 14px;
       color: @NL0;
+      font-size: 14px;
     }
   }
 
   &-list {
     overflow: overlay !important;
+
+    &::-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-left: 4px;
     margin-top: -2px;
+    margin-left: 4px;
   }
 
   &-column-resizable {
@@ -148,4 +172,4 @@
       }
     }
   }
-}
+}

package/lib/Tabs/index.js

@@ -5,9 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Tabs;
 
-var _react = _interopRequireDefault(require("react"));
+require("antd/es/tabs/style");
+
+var _tabs = _interopRequireDefault(require("antd/es/tabs"));
 
-var _tabs = _interopRequireDefault(require("antd/lib/tabs"));
+var _react = _interopRequireDefault(require("react"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 

package/lib/Tabs/style/index.d.ts

@@ -1,2 +1,3 @@
+import 'antd/lib/tabs/style';
 import '../../style';
 import './index.less';

package/lib/Tabs/style/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+require("antd/lib/tabs/style");
+
 require("../../style");
 
 require("./index.less");

package/lib/index.d.ts

@@ -7,7 +7,7 @@ export { MenuClickEventHandler } from 'rc-menu/lib/interface';
 export { default as Menu } from './Menu';
 export type { IMenuProps as MenuProps } from './Menu';
 export { default as Input } from './Input';
-export type { IInputProps as InputProps, TSize } from './Input';
+export type { IInputProps as InputProps, TSize, InputRef, TextAreaRef } from './Input';
 export { default as Tabs } from './Tabs';
 export type { ITabsProps as TabsProps, TabsSize } from './Tabs';
 export { default as Tooltip } from './Tooltip';

package/lib/style/index.d.ts

@@ -1,2 +1,2 @@
-import 'antd/dist/antd.compact.css';
+import 'antd/lib/style/compact.less';
 import './index.less';

package/lib/style/index.js

@@ -1,5 +1,5 @@
 "use strict";
 
-require("antd/dist/antd.compact.css");
+require("antd/lib/style/compact.less");
 
 require("./index.less");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aloudata/aloudata-design",
-  "version": "0.2.0-beta.10",
+  "version": "0.2.0-beta.11",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -87,7 +87,7 @@
     "gh-pages": "^3.0.0",
     "husky": "^3.0.9",
     "lint-staged": "^10.0.7",
-    "postcss": "^8.4.7",
+    "postcss": "^8.4.12",
     "postcss-import": "^14.1.0",
     "postcss-less": "^6.0.0",
     "prettier": "^2.2.1",