@aloudata/aloudata-design 0.2.0-beta.8 → 0.2.0-beta.9

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, onChange, }: ITableProps<T>): ReactElement;
+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;
 export default Table;

package/es/Table/index.js

@@ -5,6 +5,12 @@ 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; }
 
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -17,12 +23,6 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-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; }
-
 /// <reference types ='./react-table-config' />
 import React, { useCallback, useMemo } from 'react';
 import { useTable, useBlockLayout, useRowSelect, useSortBy, useResizeColumns } from 'react-table';
@@ -55,8 +55,16 @@ function Table(_ref) {
       _ref$resizeColumn = _ref.resizeColumn,
       resizeColumn = _ref$resizeColumn === void 0 ? false : _ref$resizeColumn,
       allSortDirections = _ref.sortDirections,
+      _ref$showHeader = _ref.showHeader,
+      showHeader = _ref$showHeader === void 0 ? true : _ref$showHeader,
       _ref$onChange = _ref.onChange,
       onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
+
+  var _React$useState = React.useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      selectedRowId = _React$useState2[0],
+      setSelectedRowId = _React$useState2[1];
+
   var newColumns = useMemo(function () {
     return columns.map(function (column) {
       return _objectSpread(_objectSpread({}, column), {}, {
@@ -72,13 +80,28 @@ function Table(_ref) {
     });
   }, [columns, sortable]);
 
-  var _React$useState = React.useState({
-    id: (defaultSort === null || defaultSort === void 0 ? void 0 : defaultSort.id) || sortable ? newColumns[ARRAY_FIRST_INDEX].dataIndex : '',
-    desc: (defaultSort === null || defaultSort === void 0 ? void 0 : defaultSort.desc) || false
-  }),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      sortDirection = _React$useState2[0],
-      setSortDirection = _React$useState2[1];
+  var getInitialSortDirection = function getInitialSortDirection() {
+    if (defaultSort && defaultSort.id) {
+      return defaultSort;
+    }
+
+    if (sortable) {
+      return {
+        id: newColumns[ARRAY_FIRST_INDEX].accessor,
+        desc: false
+      };
+    }
+
+    return {
+      id: '',
+      desc: false
+    };
+  };
+
+  var _React$useState3 = React.useState(getInitialSortDirection()),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      sortDirection = _React$useState4[0],
+      setSortDirection = _React$useState4[1];
 
   var _useTable = useTable({
     columns: newColumns,
@@ -86,10 +109,7 @@ function Table(_ref) {
     disableMultiSort: true,
     disableSortBy: !sortable,
     initialState: {
-      sortBy: [{
-        id: sortDirection.id,
-        desc: sortDirection.desc
-      }]
+      sortBy: sortDirection.id ? [sortDirection] : []
     }
   }, useBlockLayout, useSortBy, useRowSelect, useResizeColumns),
       getTableProps = _useTable.getTableProps,
@@ -99,11 +119,6 @@ function Table(_ref) {
       prepareRow = _useTable.prepareRow,
       setSortBy = _useTable.setSortBy;
 
-  var _React$useState3 = React.useState(null),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      selectedRowId = _React$useState4[0],
-      setSelectedRowId = _React$useState4[1];
-
   var theadRowWidthRef = React.useRef(DEFAULT_ROW_WIDTH);
   var prefixCls = usePrefixCls('block-table');
 
@@ -225,7 +240,7 @@ function Table(_ref) {
               id: typeof desc === 'undefined' ? '' : id,
               desc: desc
             };
-            setSortBy([sortBy]);
+            setSortBy(typeof desc === 'undefined' ? [] : [sortBy]);
             setSortDirection(sortBy);
             onChange(sortBy);
           }
@@ -280,7 +295,7 @@ function Table(_ref) {
 
   return /*#__PURE__*/React.createElement("div", {
     className: prefixCls
-  }, renderHeader(data.length), /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread({}, getTableProps()), {}, {
+  }, showHeader && renderHeader(data.length), /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread({}, getTableProps()), {}, {
     className: classnames(_defineProperty({}, "".concat(prefixCls, "-column-resizable"), resizeColumn))
   }), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-thead")

package/es/Table/interface.d.ts

@@ -8,12 +8,13 @@ export interface ISort<T> {
 export interface IColumn<T extends object> {
     title: string;
     dataIndex: string;
-    render?: (value: unknown, row: Record<string, T>, index: number) => React.ReactNode;
+    render?: (value: any, row: Record<string, T>, index: number) => React.ReactNode;
     width?: number;
     minWidth?: number;
     sorter?: boolean | 'string' | 'number' | 'basic' | 'datetime' | 'alphanumeric' | ((rowA: Row<T>, rowB: Row<T>, columnId: IdType<T>, desc?: boolean) => number);
     sortOrder?: TSortOrder;
     sortDirections?: Array<'ascend' | 'descend'>;
+    selected?: boolean;
 }
 export interface ITableProps<T extends object> {
     columns: IColumn<T>[];
@@ -31,4 +32,5 @@ export interface ITableProps<T extends object> {
     defaultSort?: ISort<T>;
     sortDirections?: Array<'ascend' | 'descend'>;
     resizeColumn?: boolean;
+    showHeader?: boolean;
 }

package/es/Table/style/index.less

@@ -6,6 +6,7 @@
 
 .ant-block-table {
   overflow: hidden;
+  user-select: none;
 
   &-cell {
     padding: 0 12px;
@@ -106,6 +107,7 @@
 
     &-right {
       display: flex;
+      justify-content: flex-end;
       height: 28px;
       align-items: center;
       font-size: 14px;

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, onChange, }: ITableProps<T>): ReactElement;
+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;
 export default Table;

package/lib/Table/index.js

@@ -38,6 +38,12 @@ 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; }
 
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -50,12 +56,6 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-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; }
-
 var DEFAULT_ROW_HEIGHT = 40;
 var ARRAY_FIRST_INDEX = 0;
 var DEFAULT_ROW_WIDTH = 0;
@@ -78,8 +78,16 @@ function Table(_ref) {
       _ref$resizeColumn = _ref.resizeColumn,
       resizeColumn = _ref$resizeColumn === void 0 ? false : _ref$resizeColumn,
       allSortDirections = _ref.sortDirections,
+      _ref$showHeader = _ref.showHeader,
+      showHeader = _ref$showHeader === void 0 ? true : _ref$showHeader,
       _ref$onChange = _ref.onChange,
       onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
+
+  var _React$useState = _react.default.useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      selectedRowId = _React$useState2[0],
+      setSelectedRowId = _React$useState2[1];
+
   var newColumns = (0, _react.useMemo)(function () {
     return columns.map(function (column) {
       return _objectSpread(_objectSpread({}, column), {}, {
@@ -95,13 +103,28 @@ function Table(_ref) {
     });
   }, [columns, sortable]);
 
-  var _React$useState = _react.default.useState({
-    id: (defaultSort === null || defaultSort === void 0 ? void 0 : defaultSort.id) || sortable ? newColumns[ARRAY_FIRST_INDEX].dataIndex : '',
-    desc: (defaultSort === null || defaultSort === void 0 ? void 0 : defaultSort.desc) || false
-  }),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      sortDirection = _React$useState2[0],
-      setSortDirection = _React$useState2[1];
+  var getInitialSortDirection = function getInitialSortDirection() {
+    if (defaultSort && defaultSort.id) {
+      return defaultSort;
+    }
+
+    if (sortable) {
+      return {
+        id: newColumns[ARRAY_FIRST_INDEX].accessor,
+        desc: false
+      };
+    }
+
+    return {
+      id: '',
+      desc: false
+    };
+  };
+
+  var _React$useState3 = _react.default.useState(getInitialSortDirection()),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      sortDirection = _React$useState4[0],
+      setSortDirection = _React$useState4[1];
 
   var _useTable = (0, _reactTable.useTable)({
     columns: newColumns,
@@ -109,10 +132,7 @@ function Table(_ref) {
     disableMultiSort: true,
     disableSortBy: !sortable,
     initialState: {
-      sortBy: [{
-        id: sortDirection.id,
-        desc: sortDirection.desc
-      }]
+      sortBy: sortDirection.id ? [sortDirection] : []
     }
   }, _reactTable.useBlockLayout, _reactTable.useSortBy, _reactTable.useRowSelect, _reactTable.useResizeColumns),
       getTableProps = _useTable.getTableProps,
@@ -122,11 +142,6 @@ function Table(_ref) {
       prepareRow = _useTable.prepareRow,
       setSortBy = _useTable.setSortBy;
 
-  var _React$useState3 = _react.default.useState(null),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      selectedRowId = _React$useState4[0],
-      setSelectedRowId = _React$useState4[1];
-
   var theadRowWidthRef = _react.default.useRef(DEFAULT_ROW_WIDTH);
 
   var prefixCls = (0, _usePrefixCls.default)('block-table');
@@ -249,7 +264,7 @@ function Table(_ref) {
               id: typeof desc === 'undefined' ? '' : id,
               desc: desc
             };
-            setSortBy([sortBy]);
+            setSortBy(typeof desc === 'undefined' ? [] : [sortBy]);
             setSortDirection(sortBy);
             onChange(sortBy);
           }
@@ -304,7 +319,7 @@ function Table(_ref) {
 
   return /*#__PURE__*/_react.default.createElement("div", {
     className: prefixCls
-  }, renderHeader(data.length), /*#__PURE__*/_react.default.createElement("div", _objectSpread(_objectSpread({}, getTableProps()), {}, {
+  }, showHeader && renderHeader(data.length), /*#__PURE__*/_react.default.createElement("div", _objectSpread(_objectSpread({}, getTableProps()), {}, {
     className: (0, _classnames6.default)(_defineProperty({}, "".concat(prefixCls, "-column-resizable"), resizeColumn))
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(prefixCls, "-thead")

package/lib/Table/interface.d.ts

@@ -8,12 +8,13 @@ export interface ISort<T> {
 export interface IColumn<T extends object> {
     title: string;
     dataIndex: string;
-    render?: (value: unknown, row: Record<string, T>, index: number) => React.ReactNode;
+    render?: (value: any, row: Record<string, T>, index: number) => React.ReactNode;
     width?: number;
     minWidth?: number;
     sorter?: boolean | 'string' | 'number' | 'basic' | 'datetime' | 'alphanumeric' | ((rowA: Row<T>, rowB: Row<T>, columnId: IdType<T>, desc?: boolean) => number);
     sortOrder?: TSortOrder;
     sortDirections?: Array<'ascend' | 'descend'>;
+    selected?: boolean;
 }
 export interface ITableProps<T extends object> {
     columns: IColumn<T>[];
@@ -31,4 +32,5 @@ export interface ITableProps<T extends object> {
     defaultSort?: ISort<T>;
     sortDirections?: Array<'ascend' | 'descend'>;
     resizeColumn?: boolean;
+    showHeader?: boolean;
 }

package/lib/Table/style/index.less

@@ -6,6 +6,7 @@
 
 .ant-block-table {
   overflow: hidden;
+  user-select: none;
 
   &-cell {
     padding: 0 12px;
@@ -106,6 +107,7 @@
 
     &-right {
       display: flex;
+      justify-content: flex-end;
       height: 28px;
       align-items: center;
       font-size: 14px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aloudata/aloudata-design",
-  "version": "0.2.0-beta.8",
+  "version": "0.2.0-beta.9",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",