@synerise/ds-table 0.43.8 → 0.44.0

package/dist/VirtualTable/VirtualTableRow.js

@@ -4,14 +4,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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 _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
-
 import * as React from 'react';
 import classNames from 'classnames';
+import { areEqual } from 'react-window';
 import InfiniteLoaderItem from '../InfiniteScroll/InfiniteLoaderItem';
 import { EXPANDED_ROW_PROPERTY } from './VirtualTable';
 import * as S from './VirtualTable.styles';
-import { calculatePixels } from '../utils/calculatePixels';
+import { getValueFromPath, calculatePixels } from '../utils';
 
 var isColumnSortingActive = function isColumnSortingActive(columns, column) {
   return !!columns.find(function (c) {
@@ -23,65 +22,65 @@ var calculateToPixelsIfDefined = function calculateToPixelsIfDefined(value) {
   return value ? calculatePixels(value) : value;
 };
 
-var VirtualTableRow = /*#__PURE__*/function (_React$PureComponent) {
-  _inheritsLoose(VirtualTableRow, _React$PureComponent);
-
-  function VirtualTableRow() {
-    return _React$PureComponent.apply(this, arguments) || this;
-  }
-
-  var _proto = VirtualTableRow.prototype;
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        index = _this$props.index,
-        style = _this$props.style,
-        data = _this$props.data;
-    var mergedColumns = data.mergedColumns,
-        onRowClick = data.onRowClick,
-        selection = data.selection,
-        dataSource = data.dataSource,
-        cellHeight = data.cellHeight,
-        infiniteScroll = data.infiniteScroll,
-        defaultTableProps = data.defaultTableProps;
-    var rowData = dataSource[index];
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-      React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.RowWrapper, {
-        className: classNames('virtual-table-row', {
-          'ds-expanded-row': rowData[EXPANDED_ROW_PROPERTY]
-        }),
-        style: style,
-        onClick: function onClick() {
-          return onRowClick && onRowClick(rowData);
-        }
-      }, mergedColumns.map(function (column, columnIndex) {
-        return /*#__PURE__*/React.createElement(S.ColWrapper, {
-          className: classNames('virtual-table-cell', {
-            'virtual-table-cell-last': columnIndex === mergedColumns.length - 1,
-            'ant-table-selection-column': columnIndex === 0 && selection,
-            'ds-expanded-row-first': rowData[EXPANDED_ROW_PROPERTY] && columnIndex === 0,
-            'ds-expanded-row-data': rowData[EXPANDED_ROW_PROPERTY] && (columnIndex === 1 && selection || columnIndex === 0 && !selection)
-          }, isColumnSortingActive((defaultTableProps == null ? void 0 : defaultTableProps.columns) || [], column) && 'ant-table-column-sort', column.className),
-          key: "row-" + index + "-column-" + (column.dataIndex || column.key),
-          minWidth: calculateToPixelsIfDefined(column == null ? void 0 : column.minWidth),
-          width: column.width,
-          maxWidth: calculateToPixelsIfDefined(column == null ? void 0 : column.maxWidth)
-        }, column.render ? column.render(rowData[column.dataIndex], rowData) : rowData[column.dataIndex]);
-      })), infiniteScroll && index === dataSource.length - 1 && /*#__PURE__*/React.createElement(S.RowWrapper, {
-        style: _objectSpread({}, style, {
-          top: Number(style.top) + cellHeight + "px",
-          height: '64px',
-          padding: '16px 24px'
-        })
-      }, /*#__PURE__*/React.createElement(InfiniteLoaderItem, {
-        infiniteScroll: infiniteScroll
-      })))
-    );
-  };
+function VirtualTableRow(_ref) {
+  var index = _ref.index,
+      style = _ref.style,
+      _ref$data = _ref.data,
+      mergedColumns = _ref$data.mergedColumns,
+      onRowClick = _ref$data.onRowClick,
+      selection = _ref$data.selection,
+      rowStar = _ref$data.rowStar,
+      dataSource = _ref$data.dataSource,
+      cellHeight = _ref$data.cellHeight,
+      infiniteScroll = _ref$data.infiniteScroll,
+      defaultTableProps = _ref$data.defaultTableProps;
+  var renderColumn = React.useCallback(function (column, rowData, columnIndex) {
+    if (rowData[EXPANDED_ROW_PROPERTY] && column.childRender) {
+      return column.childRender(getValueFromPath(rowData, column.dataIndex), rowData, columnIndex);
+    }
 
-  return VirtualTableRow;
-}(React.PureComponent);
+    return column.render ? column.render(getValueFromPath(rowData, column.dataIndex), rowData, columnIndex) : getValueFromPath(rowData, column.dataIndex);
+  }, []);
+  var rowData = React.useMemo(function () {
+    return dataSource[index];
+  }, [dataSource, index]);
+  var infiniteLoader = React.useMemo(function () {
+    return infiniteScroll && index === dataSource.length - 1 && /*#__PURE__*/React.createElement(S.RowWrapper, {
+      style: _objectSpread({}, style, {
+        top: Number(style.top) + cellHeight + "px",
+        height: '64px',
+        padding: '16px 24px'
+      })
+    }, /*#__PURE__*/React.createElement(InfiniteLoaderItem, {
+      infiniteScroll: infiniteScroll
+    }));
+  }, [cellHeight, dataSource.length, index, infiniteScroll, style]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.RowWrapper, {
+    className: classNames('virtual-table-row', {
+      'ds-expanded-row': rowData[EXPANDED_ROW_PROPERTY]
+    }),
+    style: style,
+    onClick: function onClick(event) {
+      event.stopPropagation();
+      onRowClick && onRowClick(rowData);
+    }
+  }, mergedColumns.map(function (column, columnIndex) {
+    var firstWithSelectionAndStar = selection && rowStar && columnIndex === 2;
+    var firstWithSelectionOrStar = (selection || rowStar) && columnIndex === 1;
+    var firstWithoutSelectionAndStar = columnIndex === 0 && !selection && !rowStar;
+    return /*#__PURE__*/React.createElement(S.ColWrapper, {
+      className: classNames('virtual-table-cell', {
+        'virtual-table-cell-last': columnIndex === mergedColumns.length - 1,
+        'ant-table-selection-column': columnIndex === 0 && selection,
+        'ds-expanded-row-first': rowData[EXPANDED_ROW_PROPERTY] && columnIndex === 0,
+        'ds-expanded-row-data': rowData[EXPANDED_ROW_PROPERTY] && (firstWithoutSelectionAndStar || firstWithSelectionOrStar || firstWithSelectionAndStar)
+      }, isColumnSortingActive((defaultTableProps == null ? void 0 : defaultTableProps.columns) || [], column) && 'ant-table-column-sort', column.className),
+      key: "row-" + index + "-column-" + (column.dataIndex || column.key),
+      minWidth: calculateToPixelsIfDefined(column == null ? void 0 : column.minWidth),
+      width: column.width,
+      maxWidth: calculateToPixelsIfDefined(column == null ? void 0 : column.maxWidth)
+    }, renderColumn(column, rowData, columnIndex));
+  })), infiniteLoader);
+}
 
-export default VirtualTableRow;
+export default React.memo(VirtualTableRow, areEqual);

package/dist/hooks/useRowKey/index.d.ts

@@ -0,0 +1 @@
+export * from './useRowKey';

package/dist/hooks/useRowKey/index.js

@@ -0,0 +1 @@
+export * from './useRowKey';

package/dist/hooks/useRowKey/useRowKey.d.ts

@@ -0,0 +1,7 @@
+declare type Row = any & {
+    key?: string;
+};
+export declare const useRowKey: (rowKey: string | Function | undefined) => {
+    getRowKey: (row: Row) => string | number | undefined;
+};
+export {};

package/dist/hooks/useRowKey/useRowKey.js

@@ -0,0 +1,13 @@
+import * as React from 'react'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+// eslint-disable-next-line import/prefer-default-export
+export var useRowKey = function useRowKey(rowKey) {
+  var getRowKey = React.useCallback(function (row) {
+    if (typeof rowKey === 'function') return rowKey(row);
+    if (typeof rowKey === 'string') return row[rowKey];
+    return row.key || undefined;
+  }, [rowKey]);
+  return {
+    getRowKey: getRowKey
+  };
+};

package/dist/hooks/useRowStar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useRowStar.types';
+export * from './useRowStar';

package/dist/hooks/useRowStar/index.js

@@ -0,0 +1,2 @@
+export * from './useRowStar.types';
+export * from './useRowStar';

package/dist/hooks/useRowStar/useRowStar.d.ts

@@ -0,0 +1,2 @@
+import { UseStarredApi } from './useRowStar.types';
+export declare const useRowStar: (initialStarredKeys: string[]) => UseStarredApi;

package/dist/hooks/{useRowStar.js → useRowStar/useRowStar.js}

@@ -10,14 +10,16 @@ var createRowStarColumn = function createRowStarColumn(_ref) {
   return function (_ref2) {
     var locale = _ref2.locale,
         rowStar = _ref2.rowStar,
-        selection = _ref2.selection;
+        selection = _ref2.selection,
+        getRowKey = _ref2.getRowKey;
     return {
       key: '_row-star',
       className: ((rowStar == null ? void 0 : rowStar.className) || '') + " ds-table-star-column",
       width: !!selection && !!rowStar ? STAR_COL_WIDTH_SELECTON : STAR_COL_WIDTH_SINGLE,
-      render: (rowStar == null ? void 0 : rowStar.renderCell) || function (value, _ref3) {
-        var key = _ref3.key;
-        var keyString = String(key);
+      render: (rowStar == null ? void 0 : rowStar.renderCell) || function (value, record) {
+        var expandedChild = record.expandedChild;
+        var keyString = String(getRowKey(record));
+        if (expandedChild && rowStar != null && rowStar.disableForExpandedRows) return null;
         return /*#__PURE__*/React.createElement(Tooltip, {
           title: locale == null ? void 0 : locale.starRowTooltip
         }, /*#__PURE__*/React.createElement(Button.Star, {
@@ -27,7 +29,7 @@ var createRowStarColumn = function createRowStarColumn(_ref) {
             var newStarredRowKeys = toggleStarred(keyString);
 
             if (typeof (rowStar == null ? void 0 : rowStar.onChange) === 'function') {
-              rowStar.onChange(newStarredRowKeys);
+              rowStar.onChange(newStarredRowKeys, keyString, isStarred(keyString));
             }
 
             if (typeof (rowStar == null ? void 0 : rowStar.onClick) === 'function') {
@@ -38,9 +40,10 @@ var createRowStarColumn = function createRowStarColumn(_ref) {
       }
     };
   };
-};
+}; // eslint-disable-next-line import/prefer-default-export
 
-var useRowStar = function useRowStar(initialStarredKeys) {
+
+export var useRowStar = function useRowStar(initialStarredKeys) {
   var starredKeys = React.useRef(new Set(initialStarredKeys));
 
   var getStarredRowKeys = function getStarredRowKeys() {
@@ -71,6 +74,4 @@ var useRowStar = function useRowStar(initialStarredKeys) {
     toggleStarred: toggleStarred,
     getRowStarColumn: getRowStarColumn
   };
-};
-
-export default useRowStar;
+};

package/dist/hooks/useRowStar/useRowStar.types.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ColumnType } from 'antd/lib/table';
+import { DSTableProps, DSColumnType } from '../../Table.types';
+export interface RowStar<T> {
+    className?: string;
+    starredRowKeys: string[];
+    renderCell?: ColumnType<T>['render'];
+    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    onChange?: (starredRowKeys: string[], starredKey: string, isStarred: boolean) => void;
+    disableForExpandedRows?: boolean;
+}
+export declare type AnyRecordType = any;
+export interface UseStarredApi {
+    getStarredKeys: () => string[];
+    isStarred: (key: string) => boolean;
+    toggleStarred: (key: string) => string[];
+    getRowStarColumn: (dsTableProps: CreateRowStarColumnProps) => DSColumnType<AnyRecordType>;
+}
+export declare type CreateRowStarColumnProps = DSTableProps<AnyRecordType> & {
+    getRowKey: (row: AnyRecordType) => React.ReactText | undefined;
+};

package/dist/hooks/useRowStar/useRowStar.types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/__specs__/getValueFromPath.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/getValueFromPath.d.ts

@@ -0,0 +1 @@
+export declare const getValueFromPath: (object: object, valuePath?: string | number | (string | number)[] | undefined) => string | number | boolean;

package/dist/utils/getValueFromPath.js

@@ -0,0 +1,7 @@
+import { path } from 'ramda'; // eslint-disable-next-line import/prefer-default-export
+
+export var getValueFromPath = function getValueFromPath(object, valuePath) {
+  if (typeof valuePath === 'string') return object[valuePath];
+  if (Array.isArray(valuePath)) return path(valuePath, object) || '';
+  return '';
+};

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './getValueFromPath';
+export * from './locale';
+export * from './calculatePixels';

package/dist/utils/index.js

@@ -0,0 +1,3 @@
+export * from './getValueFromPath';
+export * from './locale';
+export * from './calculatePixels';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-table",
-  "version": "0.43.8",
+  "version": "0.44.0",
   "description": "Table UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -35,27 +35,28 @@
     "@synerise/ds-alert": "^0.5.2",
     "@synerise/ds-button": "^0.17.1",
     "@synerise/ds-button-group": "^0.6.8",
-    "@synerise/ds-checkbox": "^0.11.6",
-    "@synerise/ds-column-manager": "^0.10.7",
-    "@synerise/ds-dropdown": "^0.17.12",
+    "@synerise/ds-checkbox": "^0.11.7",
+    "@synerise/ds-column-manager": "^0.10.8",
+    "@synerise/ds-dropdown": "^0.17.13",
     "@synerise/ds-flag": "^0.3.2",
     "@synerise/ds-icon": "^0.48.0",
     "@synerise/ds-input": "^0.18.9",
-    "@synerise/ds-loader": "^0.2.6",
-    "@synerise/ds-menu": "^0.12.5",
+    "@synerise/ds-loader": "^0.2.7",
+    "@synerise/ds-menu": "^0.13.0",
     "@synerise/ds-pagination": "^0.7.8",
-    "@synerise/ds-search": "^0.7.6",
+    "@synerise/ds-search": "^0.7.7",
     "@synerise/ds-search-bar": "^0.5.10",
     "@synerise/ds-select": "^0.14.10",
-    "@synerise/ds-skeleton": "^0.2.6",
-    "@synerise/ds-status": "^0.5.12",
-    "@synerise/ds-tags": "^0.6.12",
+    "@synerise/ds-skeleton": "^0.2.7",
+    "@synerise/ds-status": "^0.5.13",
+    "@synerise/ds-tags": "^0.6.13",
     "@synerise/ds-tooltip": "^0.11.8",
     "@synerise/ds-typography": "^0.12.2",
     "@synerise/ds-utils": "^0.19.0",
     "@types/react-window": "^1.8.2",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.3.1",
+    "ramda": "0.27.0",
     "rc-resize-observer": "^0.2.1",
     "react-window": "^1.8.6",
     "unit-to-px": "^1.0.5"
@@ -65,5 +66,5 @@
     "antd": "^4",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "233a9fede96c39eb8c5feeb5f58c635053ba875a"
+  "gitHead": "7f696cdfd31f36bbeeb750df44b0f6d2010d0c9d"
 }

package/dist/hooks/useRowStar.d.ts

@@ -1,3 +0,0 @@
-import { UseStarredApi } from './useRowStar.types';
-declare const useRowStar: (initialStarredKeys: string[]) => UseStarredApi;
-export default useRowStar;

package/dist/hooks/useRowStar.types.d.ts

@@ -1,17 +0,0 @@
-/// <reference types="react" />
-import { ColumnType } from 'antd/lib/table';
-import { DSTableProps, DSColumnType } from '../Table.types';
-export interface RowStar<T> {
-    className?: string;
-    starredRowKeys: string[];
-    renderCell?: ColumnType<T>['render'];
-    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-    onChange?: (starredRowKeys: string[]) => void;
-}
-export declare type AnyRecordType = any;
-export interface UseStarredApi {
-    getStarredKeys: () => string[];
-    isStarred: (key: string) => boolean;
-    toggleStarred: (key: string) => string[];
-    getRowStarColumn: (dsTableProps: DSTableProps<AnyRecordType>) => DSColumnType<AnyRecordType>;
-}