fix(AnalyticalTable): Header is now resizable (#76)

Author: MarcusNotheis

package.json

@@ -120,7 +120,7 @@
     "webpack-cli": "^3.3.2"
   },
   "resolutions": {
-    "@types/react": "16.8.19"
+    "@types/react": "16.8.24"
   },
   "husky": {
     "hooks": {

packages/main/__karma_snapshots__/AnalyticalTable.md

@@ -25,7 +25,7 @@
     "@ui5/webcomponents-react-base": "0.4.2-rc.11",
     "lodash.debounce": "^4.0.8",
     "react-scroll": "^1.7.11",
-    "react-table": "6.8.6",
+    "react-table": "6.10.0",
     "react-toastify": "^5.0.1"
   },
   "devDependencies": {

packages/main/package.json

@@ -0,0 +1,19 @@
+import { BusyIndicatorType } from '../../../lib/BusyIndicatorType';
+import { BusyIndicator } from '../../../lib/BusyIndicator';
+import React from 'react';
+
+const LoadingComponent = (props) => {
+  if (!props.loading) {
+    return null;
+  }
+  let className = '-loading -active';
+  return (
+    <div className={className} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+      <BusyIndicator size={BusyIndicatorType.Medium} active style={{ backgroundColor: 'transparent' }} />
+    </div>
+  );
+};
+
+LoadingComponent.displayName = 'LoadingComponent';
+
+export { LoadingComponent };

packages/main/src/components/AnalyticalTable/LoadingComponent/index.tsx

@@ -0,0 +1,27 @@
+import { useMemo, useCallback } from 'react';
+import React from 'react';
+
+const Resizer = ({ children, className, ...rest }) => {
+  const classNames = useMemo(() => {
+    let name = 'rt-resizer';
+    if (className) {
+      name += ` ${className}`;
+    }
+    return name;
+  }, [className]);
+
+  const handleOnClick = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  return (
+    <div className={classNames} {...rest} onClick={handleOnClick}>
+      {children}
+    </div>
+  );
+};
+
+Resizer.displayName = 'Resizer';
+
+export { Resizer };

packages/main/src/components/AnalyticalTable/Resizer/index.tsx

@@ -1,5 +1,5 @@
 import { Event, withStyles } from '@ui5/webcomponents-react-base';
-import React, { Component, FC, ReactNode, RefObject } from 'react';
+import React, { Component, FC, ReactNode, RefObject, CSSProperties } from 'react';
 import { ClassProps } from '../../../interfaces/ClassProps';
 import { JSSTheme } from '../../../interfaces/JSSTheme';
 import { CustomListItem } from '../../../lib/CustomListItem';
@@ -40,6 +40,7 @@ export interface ColumnHeaderModalProperties {
   column: ColumnType;
   onFilterChange: (e?: any) => void;
   onGroupBy: (e?: any) => void;
+  style: CSSProperties;
 }
 
 interface ColumnHeaderModalInternalProperties extends ColumnHeaderModalProperties, ClassProps {}
@@ -85,11 +86,12 @@ export class ColumnHeaderModal extends Component<ColumnHeaderModalProperties> {
   };
 
   render() {
-    const { showGroup, grouping, showSort, showFilter, FilterComponent, onFilterChange, column, filter } = this
+    const { showGroup, grouping, showSort, showFilter, FilterComponent, onFilterChange, column, filter, style } = this
       .props as ColumnHeaderModalInternalProperties;
+
     return (
       <Popover
-        openByStyle={{ flex: '100 0 auto', width: '100px' }}
+        openByStyle={style}
         openBy={this.props.openBy}
         noArrow
         horizontalAlign={PopoverHorizontalAlign.Left}

packages/main/src/components/AnalyticalTable/columnHeader/ColumnHeaderModal.tsx

@@ -1,5 +1,5 @@
 import { Event, fonts, StyleClassHelper, withStyles } from '@ui5/webcomponents-react-base';
-import React, { Component, ReactNode, ReactNodeArray } from 'react';
+import React, { Component, ReactNode, ReactNodeArray, CSSProperties } from 'react';
 import { ClassProps } from '../../../interfaces/ClassProps';
 import { JSSTheme } from '../../../interfaces/JSSTheme';
 import { Icon } from '../../../lib/Icon';
@@ -16,7 +16,7 @@ export interface ColumnHeaderProps {
 }
 
 interface ColumnHeaderPropsInternal extends ColumnHeaderProps, ClassProps {
-  style?: object;
+  style?: CSSProperties;
   toggleSort: () => any;
   sorted: any[];
   column: ColumnType;
@@ -155,7 +155,7 @@ export class ColumnHeader extends Component<ColumnHeaderProps, ColumnHeaderState
   };
 
   render() {
-    const { column, filtered, filterable, groupable, sortable } = this.props as ColumnHeaderPropsInternal;
+    const { column, filtered, filterable, groupable, sortable, style } = this.props as ColumnHeaderPropsInternal;
 
     if (!column) return null;
 
@@ -177,6 +177,7 @@ export class ColumnHeader extends Component<ColumnHeaderProps, ColumnHeaderState
             filter={filter}
             onFilterChange={this.onFilterChange}
             onGroupBy={this.onGroupBy}
+            style={style}
           />
         ) : (
           this.openBy

packages/main/src/components/AnalyticalTable/columnHeader/index.tsx

@@ -4,27 +4,15 @@ import ReactTable from 'react-table';
 import 'react-table/react-table.css';
 import { ClassProps } from '../../interfaces/ClassProps';
 import { CommonProps } from '../../interfaces/CommonProps';
-import { BusyIndicator } from '../../lib/BusyIndicator';
 import { TextAlign } from '../../lib/TextAlign';
 import { VerticalAlign } from '../../lib/VerticalAlign';
 import styles from './AnayticalTable.jss';
 import { ColumnHeader } from './columnHeader';
+import { LoadingComponent } from './LoadingComponent';
 import { Pagination } from './pagination';
+import { Resizer } from './Resizer';
 import { TitleBar } from './titleBar';
 import { FilterEntry } from './types/FilterEntry';
-import { BusyIndicatorType } from '../../lib/BusyIndicatorType';
-
-const CustomLoadingComponent = (props) => {
-  let className = '-loading';
-  if (props.loading) {
-    className += ' -active';
-  }
-  return (
-    <div className={className} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-      <BusyIndicator size={BusyIndicatorType.Medium} active style={{ backgroundColor: 'transparent' }} />
-    </div>
-  );
-};
 
 export interface ColumnConfiguration {
   accessor?: string;
@@ -102,14 +90,18 @@ export class AnalyticalTable extends Component<TablePropsInternal, TableState> {
     pivot: []
   };
 
+  private static DEFAULT_FILTER_METHOD(filter, row) {
+    return new RegExp(filter.value, 'gi').test(String(row[filter.id]));
+  }
+
   getTableProps = () => {
     const { classes } = this.props;
     return {
       className: classes.table
     };
   };
 
-  getTheadProps = (state, rowInfo, column, instance) => {
+  getTheadProps = () => {
     const { classes } = this.props;
     return {
       className: classes.tHead
@@ -147,7 +139,7 @@ export class AnalyticalTable extends Component<TablePropsInternal, TableState> {
     };
   };
 
-  getTdProps = (state, rowInfo, column, instance) => {
+  getTdProps = (state, rowInfo, column) => {
     const { classes, cellHeight } = this.props;
     const enhancedProps: {
       className: string;
@@ -204,19 +196,6 @@ export class AnalyticalTable extends Component<TablePropsInternal, TableState> {
     };
   };
 
-  private static DEFAULT_FILTER_METHOD(filter, row) {
-    return new RegExp(filter.value, 'gi').test(String(row[filter.id]));
-  }
-
-  private onFilteredChange = (event) => {
-    const filtered = event.getParameter('currentFilters');
-    this.setState({ filtered });
-  };
-
-  private onGroupBy = (pivotBy) => {
-    this.setState({ pivot: pivotBy, filtered: [] });
-  };
-
   render() {
     const {
       data,
@@ -265,11 +244,12 @@ export class AnalyticalTable extends Component<TablePropsInternal, TableState> {
           getTdProps={this.getTdProps}
           getTbodyProps={this.getTbodyProps}
           getPaginationProps={this.getPaginationProps}
-          LoadingComponent={CustomLoadingComponent}
+          LoadingComponent={LoadingComponent}
           PaginationComponent={Pagination}
           PreviousComponent={undefined}
           NextComponent={undefined}
           ThComponent={ColumnHeader}
+          ResizerComponent={Resizer}
           multiSort={false}
           filterable={filterable}
           filtered={this.state.filtered}
@@ -283,4 +263,13 @@ export class AnalyticalTable extends Component<TablePropsInternal, TableState> {
       </div>
     );
   }
+
+  private onFilteredChange = (event) => {
+    const filtered = event.getParameter('currentFilters');
+    this.setState({ filtered });
+  };
+
+  private onGroupBy = (pivotBy) => {
+    this.setState({ pivot: pivotBy, filtered: [] });
+  };
 }

packages/main/src/components/AnalyticalTable/index.tsx

@@ -2762,10 +2762,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@16.8.19", "@types/react@^16.8.19":
-  version "16.8.19"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.19.tgz#629154ef05e2e1985cdde94477deefd823ad9be3"
-  integrity sha512-QzEzjrd1zFzY9cDlbIiFvdr+YUmefuuRYrPxmkwG0UQv5XF35gFIi7a95m1bNVcFU0VimxSZ5QVGSiBmlggQXQ==
+"@types/react@*", "@types/react@16.8.24", "@types/react@^16.8.19":
+  version "16.8.24"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.24.tgz#8d1ea1fcbfa214220da3d3c04e506f1077b0deac"
+  integrity sha512-VpFHUoD37YNY2+lr/+c7qL/tZsIU/bKuskUF3tmGUArbxIcQdb5j3zvo4cuuzu2A6UaVmVn7sJ4PgWYNFEBGzg==
   dependencies:
     "@types/prop-types" "*"
     csstype "^2.2.0"
@@ -13258,10 +13258,10 @@ react-syntax-highlighter@^8.0.1:
     prismjs "^1.8.4"
     refractor "^2.4.1"
 
-react-table@6.8.6:
-  version "6.8.6"
-  resolved "https://registry.yarnpkg.com/react-table/-/react-table-6.8.6.tgz#a0ad8b4839319052d5befc012603fb161e52ede3"
-  integrity sha1-oK2LSDkxkFLVvvwBJgP7Fh5S7eM=
+react-table@6.10.0:
+  version "6.10.0"
+  resolved "https://registry.yarnpkg.com/react-table/-/react-table-6.10.0.tgz#20444b19d8ca3c1a08e7544e5c3a93e4ba56690e"
+  integrity sha512-s/mQLI1+mNvlae45MfAZyZ04YIT3jUzWJqx34s0tfwpDdgJkpeK6vyzwMUkKFCpGODBxpjBOekYZzcEmk+2FiQ==
   dependencies:
     classnames "^2.2.5"