feat: 46739 Table component fixes

emgage · Sep 23, 2020 · c75f2ce · c75f2ce
1 parent cdb0235
commit c75f2ce
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
@@ -16,15 +16,15 @@ export interface Props {
   // This will help to set popover active or inactive when required from parent component
   manualInActive?: boolean;
   addArrow?: boolean;
-  // Set anchor element 
+  // Set anchor element
   anchorEl?: any;
   // The children that activate the popover.
   children?: React.ReactNode;
   closeOnClickInside?: boolean;
   componentClass?: string;
   componentStyle?: any;
   // Unique ID
-  componentId?: string; 
+  componentId?: string;
   onClose?(): void;
   // The direction the popover tries to display Availabel options: above | below | mostSpace
   preferredPosition?: PreferredPosition;

diff --git a/src/components/Table/RowAction.tsx b/src/components/Table/RowAction.tsx
@@ -21,6 +21,7 @@ interface RenderProps {
 }
 
 export interface Props {
+  componentId?: string;
   data?: any;
   render?: RenderProps;
   // Individual row action, if available add it in last of the column
@@ -76,12 +77,12 @@ class RowAction extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { actionConfig, data, rowActionLeft = false, actionInProgress = false, theme } = this.props;
+    const { actionConfig, data, rowActionLeft = false, actionInProgress = false, componentId = '', theme } = this.props;
     const validActionConfigs = this.getActions(actionConfig, data);
     return (
       <React.Fragment>
         <div>
-        <Button theme={theme} componentClass={theme.rowActionButton} disabled={actionInProgress} icon="horizontalDots" onClick={(e: React.FormEvent<HTMLElement>) => this.dropdownToggle(e)} />
+        <Button componentId={`${componentId}BtnMoreActions`} theme={theme} componentClass={theme.rowActionButton} disabled={actionInProgress} icon="horizontalDots" onClick={(e: React.FormEvent<HTMLElement>) => this.dropdownToggle(e)} />
           <Dropdown
             dropdownItems={validActionConfigs}
             toggle={() => this.dropdownToggle}

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -264,7 +264,7 @@ class Table extends React.Component<Props, State> {
                   sortBy={sortBy}
                   componentStyle={item.style}
                   accessibilityId={id}
-                  componentId={componentId ? `${componentId}Col${item.label}` : ''}
+                  componentId={componentId ? `${componentId}Col${item.label?.replace(/ /g, '')}` : ''}
                   className={item.className}
                   order={field === item.key ? order.current : ''}
                   clickHandler={this.sortData}
@@ -353,6 +353,7 @@ class Table extends React.Component<Props, State> {
       rowCallbackValue,
       rowAction,
       selectRow,
+      componentId = '',
       theme
     } = this.props;
     const { nestedChildData } = this.state;
@@ -385,7 +386,7 @@ class Table extends React.Component<Props, State> {
                     Here injectBody helps to inject any custom component to td,
                     we also return the specifc value, which then can be used in injected component
                   */}
-                  { colItem.key === 'rowAction' ? <RowAction theme={theme} actionInProgress={actionInProgress} isRowLoading={item.isRowLoading} actionConfig={rowAction}  data={item} rowActionLeft /> : '' }
+                  { colItem.key === 'rowAction' ? <RowAction componentId={componentId} theme={theme} actionInProgress={actionInProgress} isRowLoading={item.isRowLoading} actionConfig={rowAction}  data={item} rowActionLeft /> : '' }
                   { renderCheckbox ? this.renderCheckColumn(item, false) : ''}
                   { colItem.injectBody ? colItem.injectBody(item) : renderCheckbox ? <span style={{ paddingLeft: '16px' }}>{item[colItem.key]}</span> : <span className={theme.tableDataWrap}>{item[colItem.key]}</span> }
                   {item.isRowLoading && <Spinner componentSize="small" componentColor="disabled" />}
@@ -394,7 +395,7 @@ class Table extends React.Component<Props, State> {
             })
           }
 
-          { rowAction && !rowActionLeft ? <TableData componentClass={theme.lastData} componentStyle={{ float: 'right' }}>{item.isRowLoading && <Spinner componentSize="small" componentColor="disabled" />} <RowAction actionInProgress={actionInProgress && !!item.processing} isRowLoading={item.isRowLoading} actionConfig={rowAction} data={item} theme={theme} /> </TableData> : '' }
+          { rowAction && !rowActionLeft ? <TableData componentClass={theme.lastData} componentStyle={{ float: 'right' }}>{item.isRowLoading && <Spinner componentSize="small" componentColor="disabled" />} <RowAction componentId={componentId} actionInProgress={actionInProgress && !!item.processing} isRowLoading={item.isRowLoading} actionConfig={rowAction} data={item} theme={theme} /> </TableData> : '' }
         </TableRow>
         { renderBanner &&
         <TableRow>