Merge pull request #932 from intellihr/release/404

Release 404

Author: intellibot-access[bot]

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@intellihr/ui-components",
   "description": "A common React components library that is used in our company",
-  "version": "50.14.0",
+  "version": "50.14.1",
   "main": "./dist/",
   "types": "./types/index.d.ts",
   "files": [

src/domain/Tables/Table/Table.examples.md

@@ -195,7 +195,8 @@ initialState = {
       id: '4',
       data: {fileName: 'test1.pdf', createAt: '05/01/2018', size: '1.5', fileType: 'PDF'},
       isSelectable: true,
-      actions: rowActions
+      actions: rowActions,
+      onClick: () => alert('row click')
     },
     {
       id: '5',

src/domain/Tables/Table/services/style.ts

@@ -56,6 +56,7 @@ interface IStyledHeaderCellProps {
 }
 
 interface IStyledDataCellProps {
+  clickable?: boolean
   size?: ColumnSize
   alignment?: ColumnAlignment
   isLastColumn?: boolean
@@ -223,13 +224,23 @@ const StyledDataCellChangeAnimation = keyframes`
   }
 `
 
-const StyledDataCell = styled.td`
+const StyledDataCell = styled.td<IStyledDataCellProps>`
   padding:  ${Variables.Spacing.sSmall}px;
   text-align: left;
   animation-name: ${StyledDataCellChangeAnimation};
   animation-duration: 500ms;
   animation-timing-function: ease-in;
 
+  ${(props: IStyledDataCellProps) => props.clickable && css`
+    & > span {
+      cursor: pointer;
+    }
+
+    &:hover {
+      text-decoration: underline;
+    }
+  `}
+
   ${(props: IStyledDataCellProps) => props.size === ColumnSize.Auto && css`
       width: 100%;
       max-width: 0;
@@ -454,27 +465,27 @@ const StyledFontAwesomeIconButtonWrapper = styled.span`
 `
 
 export {
-  StyledTable,
-  StyledRow,
-  StyledProgressBar,
-  StyledHeaderCell,
   StyledDataCell,
-  StyledProgressBarCell,
-  StyledProgressBarRow,
-  StyledHeaderLeftCell,
-  StyledTHead,
   StyledEmptyStateCell,
-  StyledTableCheckboxInput,
-  StyledTableCheckboxLabel,
+  StyledEmptyStateRow,
   StyledFontAwesomeIcon,
+  StyledFontAwesomeIconButtonWrapper,
+  StyledHeaderCell,
+  StyledHeaderCellContent,
+  StyledHeaderCellWithHeaderSize,
+  StyledHeaderLeftCell,
+  StyledHeaderLeftCellContent,
+  StyledProgressBar,
+  StyledProgressBarCell,
+  StyledProgressBarRow,
+  StyledRow,
   StyledSortButton,
-  StyledTableWrapper,
-  StyledSwipeActionsCell,
   StyledSwipeActions,
-  StyledHeaderCellWithHeaderSize,
-  StyledEmptyStateRow,
-  StyledFontAwesomeIconButtonWrapper,
   StyledSwipeActionsButtonWrapper,
-  StyledHeaderCellContent,
-  StyledHeaderLeftCellContent
+  StyledSwipeActionsCell,
+  StyledTable,
+  StyledTableCheckboxInput,
+  StyledTableCheckboxLabel,
+  StyledTableWrapper,
+  StyledTHead
 }

src/domain/Tables/Table/subcomponents/TableRow.tsx

@@ -74,6 +74,7 @@ const getLeftCell = <T extends {}>({ isSelectable, isSelected, isRemovable, hasL
             isSelectable && (
               <TableCheckboxInput
                 name={row.id}
+                hasStyledOnRowHovered={!row.onClick}
                 value={selectedCheckboxInputValue}
                 // tslint:disable-next-line:jsx-no-lambda
                 onChange={() => toggleSelected(row)}

src/domain/Tables/Table/subcomponents/TableRowDataCell.tsx

@@ -1,6 +1,6 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useMemo } from 'react'
 
-import { TooltipPopover } from '../../../Popovers/TooltipPopover'
+import { TooltipPopover } from '../../../Popovers'
 import { TooltipPopoverVariant } from '../../../Popovers/TooltipPopover/TooltipPopover'
 import { StyledDataCell } from '../services/style'
 import { IColumnProps, IRowProps } from '../services/types'
@@ -63,7 +63,7 @@ const TableRowDataCell = <T extends {}>(props: ITableRowDataCellProps<T>) => {
   } = row
 
   const handleTableCellClicked = useCallback(() => {
-    if (isSelectable) {
+    if (!onClick && isSelectable) {
       toggleSelected(row)
     }
 
@@ -82,6 +82,7 @@ const TableRowDataCell = <T extends {}>(props: ITableRowDataCellProps<T>) => {
 
   return (
     <StyledDataCell
+      clickable={!!onClick}
       size={column.size}
       hasProgressBar={hasProgressBar}
       colSpan={(isLastColumn && hasTableSwipeActions && !hasSwipeActions) ? 2 : undefined}