feat(AnalyticalTable): add onSort callback to Table (#123)

[ci skip]
SAP · Sep 17, 2019 · de7843f · de7843f
1 parent f87d62b
commit de7843f
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 5 deletions.
diff --git a/packages/main/src/components/AnalyticalTable/columnHeader/ColumnHeaderModal.tsx b/packages/main/src/components/AnalyticalTable/columnHeader/ColumnHeaderModal.tsx
@@ -1,5 +1,6 @@
 import React, { CSSProperties, FC, ReactNode, RefObject, useCallback, useRef } from 'react';
 import { Ui5PopoverDomRef } from '../../../interfaces/Ui5PopoverDomRef';
+import { Event } from '@ui5/webcomponents-react-base';
 import { CustomListItem } from '@ui5/webcomponents-react/lib/CustomListItem';
 import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
 import { FlexBoxAlignItems } from '@ui5/webcomponents-react/lib/FlexBoxAlignItems';
@@ -19,10 +20,11 @@ export interface ColumnHeaderModalProperties {
   showGroup?: boolean;
   column: ColumnType;
   style: CSSProperties;
+  onSort?: (e: Event) => void;
 }
 
 export const ColumnHeaderModal: FC<ColumnHeaderModalProperties> = (props) => {
-  const { showGroup, showSort, showFilter, column, style, openBy } = props;
+  const { showGroup, showSort, showFilter, column, style, openBy, onSort } = props;
 
   const { Filter } = column;
 
@@ -35,9 +37,25 @@ export const ColumnHeaderModal: FC<ColumnHeaderModalProperties> = (props) => {
       switch (sortType) {
         case 'asc':
           column.toggleSortBy(false);
+          if (typeof onSort === 'function') {
+            onSort(
+              Event.of(null, e, {
+                column,
+                sortDirection: sortType
+              })
+            );
+          }
           break;
         case 'desc':
           column.toggleSortBy(true);
+          if (typeof onSort === 'function') {
+            onSort(
+              Event.of(null, e, {
+                column,
+                sortDirection: sortType
+              })
+            );
+          }
           break;
         case 'group':
           column.toggleGroupBy(!column.isGrouped);

diff --git a/packages/main/src/components/AnalyticalTable/columnHeader/index.tsx b/packages/main/src/components/AnalyticalTable/columnHeader/index.tsx
@@ -19,6 +19,7 @@ export interface ColumnHeaderProps {
   sortable: boolean;
   filterable: boolean;
   sticky?: boolean;
+  onSort?: (e: Event) => void;
 }
 
 const styles = ({ parameters }: JSSTheme) => ({
@@ -56,7 +57,7 @@ const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(sty
 export const ColumnHeader: FC<ColumnHeaderProps> = (props) => {
   const classes = useStyles(props);
 
-  const { children, column, className, style, groupable, sortable, filterable, sticky } = props;
+  const { children, column, className, style, groupable, sortable, filterable, sticky, onSort } = props;
 
   const openBy = useMemo(() => {
     if (!column) return null;
@@ -103,6 +104,7 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props) => {
           showSort={sortable}
           column={column}
           style={style}
+          onSort={onSort}
         />
       ) : (
         openBy

diff --git a/packages/main/src/components/AnalyticalTable/demo/demo.stories.tsx b/packages/main/src/components/AnalyticalTable/demo/demo.stories.tsx
@@ -66,6 +66,7 @@ export const defaultStory = () => {
       selectable={boolean('selectable', true)}
       style={{ height: '600px', overflowY: 'auto', paddingRight: '12px' }}
       onRowSelected={action('onRowSelected')}
+      onSort={action('onSort')}
     />
   );
 };

diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
@@ -61,6 +61,7 @@ export interface TableProps extends CommonProps {
   NoDataComponent?: ReactComponentLike;
   noDataText?: string;
   stickyHeader?: boolean;
+  onSort?: (e?: Event) => void;
 }
 
 const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles);
@@ -93,7 +94,8 @@ export const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, re
     noDataText,
     selectable,
     onRowSelected,
-    stickyHeader
+    stickyHeader,
+    onSort
   } = props;
 
   const [selectedRow, setSelectedRow] = useState(null);
@@ -207,12 +209,13 @@ export const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, re
 
   const onRowClicked = useCallback(
     (row) => (e) => {
-      setSelectedRow(row.getRowProps().key);
+      const newKey = row.getRowProps().key;
+      setSelectedRow(selectedRow === newKey ? null : newKey);
       if (typeof onRowSelected === 'function') {
         onRowSelected(Event.of(null, e, { row }));
       }
     },
-    []
+    [selectedRow]
   );
 
   const tableBodyClasses = StyleClassHelper.of(classes.tbody);
@@ -239,6 +242,7 @@ export const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, re
                       sortable={sortable}
                       filterable={filterable}
                       sticky={stickyHeader}
+                      onSort={onSort}
                     >
                       {column.render('Header')}
                     </ColumnHeader>