feat(Grid): adds headCellTooltip prop

innovaccer · Aug 17, 2020 · b13ba22 · b13ba22
1 parent 58171e6
commit b13ba22
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 15 deletions.
diff --git a/core/components/organisms/grid/Cell.tsx b/core/components/organisms/grid/Cell.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { RowData, ColumnSchema } from './Grid';
-import { Dropdown, Grid, Placeholder, PlaceholderParagraph, Heading, Icon, Button } from '@/index';
+import { Dropdown, Grid, Placeholder, PlaceholderParagraph, Text, Icon, Button, Tooltip } from '@/index';
 import { resizeCol, getInit } from './utility';
 import { GridCell } from './GridCell';
 import { DropdownProps } from '@/components/atoms/dropdown';
@@ -41,7 +41,8 @@ const HeaderCell = (props: HeaderCellProps) => {
     loading,
     showMenu,
     sortingList,
-    filterList
+    filterList,
+    headCellTooltip
   } = _this.props;
 
   const {
@@ -95,6 +96,24 @@ const HeaderCell = (props: HeaderCellProps) => {
     }))
     : [];
 
+  const renderLabel = () => (
+    <>
+      <Text weight="strong" className="ellipsis--noWrap">{schema.displayName}</Text>
+      {sorting && (
+        <div className="Grid-sortingIcons">
+          {sorted ? sorted === 'asc' ? (
+            <Icon name="arrow_downward" />
+          ) : (
+              <Icon name="arrow_upward" />
+            ) : (
+              <Icon name="unfold_more" />
+            )
+          }
+        </div>
+      )}
+    </>
+  );
+
   return (
     <div
       key={name}
@@ -117,19 +136,14 @@ const HeaderCell = (props: HeaderCellProps) => {
           </Placeholder>
         ) : (
             <>
-              <Heading size="s" className="ellipsis--noWrap">{schema.displayName}</Heading>
-              {sorting && (
-                <div className="Grid-sortingIcons">
-                  {sorted ? sorted === 'asc' ? (
-                    <Icon name="arrow_downward" />
-                  ) : (
-                      <Icon name="arrow_upward" />
-                    ) : (
-                      <Icon name="unfold_more" />
-                    )
-                  }
-                </div>
-              )}
+              {headCellTooltip ? (
+                <Tooltip position="top-start" triggerClass="w-100 overflow-hidden" tooltip={schema.displayName}>
+                  {renderLabel()}
+                </Tooltip>
+              ) : (
+                  renderLabel()
+                )
+              }
             </>
           )
         }

diff --git a/core/components/organisms/grid/Grid.tsx b/core/components/organisms/grid/Grid.tsx
@@ -269,6 +269,10 @@ export interface GridProps extends BaseProps {
     checked: boolean,
     indeterminate: boolean
   };
+  /**
+   * Shows tooltip on Head Cell hover
+   */
+  headCellTooltip?: boolean;
 }
 
 export class Grid extends React.Component<GridProps> {

diff --git a/core/components/organisms/list/List.tsx b/core/components/organisms/list/List.tsx
@@ -39,6 +39,7 @@ interface SharedListProps extends BaseProps {
   onRowClick?: GridProps['onRowClick'];
   onSelect?: TableProps['onSelect'];
   onPageChange?: GridProps['onPageChange'];
+  headCellTooltip?: boolean;
 }
 
 type SyncListProps = SyncProps & SharedListProps;

diff --git a/core/components/organisms/list/__stories__/index.story.tsx b/core/components/organisms/list/__stories__/index.story.tsx
@@ -88,6 +88,11 @@ export const all = () => {
     false
   );
 
+  const headCellTooltip = boolean(
+    'headCellTooltip',
+    false
+  );
+
   let dataAttr = {};
   if (async) {
     dataAttr = {
@@ -117,6 +122,7 @@ export const all = () => {
           withCheckbox={withCheckbox}
           type={type}
           size={size}
+          headCellTooltip={headCellTooltip}
           withPagination={withPagination}
           paginationType={paginationType}
           pageSize={pageSize}

diff --git a/core/components/organisms/table/Table.tsx b/core/components/organisms/table/Table.tsx
@@ -271,6 +271,10 @@ interface SharedTableProps extends BaseProps {
    * Callback to be called on page change in case of withPagination: true
    */
   onPageChange?: GridProps['onPageChange'];
+  /**
+   * Shows tooltip on Head Cell hover
+   */
+  headCellTooltip?: boolean;
 }
 
 const defaultProps = {
@@ -558,6 +562,7 @@ export class Table extends React.Component<TableProps, TableState> {
       showHead,
       type,
       size,
+      headCellTooltip,
       draggable,
       nestedRows,
       nestedRowRenderer,
@@ -625,6 +630,7 @@ export class Table extends React.Component<TableProps, TableState> {
             showHead={showHead}
             type={type}
             size={size}
+            headCellTooltip={headCellTooltip}
             draggable={draggable}
             nestedRows={nestedRows}
             nestedRowRenderer={nestedRowRenderer}

diff --git a/core/components/organisms/table/__stories__/index.story.tsx b/core/components/organisms/table/__stories__/index.story.tsx
@@ -106,6 +106,11 @@ export const all = () => {
     false
   );
 
+  const headCellTooltip = boolean(
+    'headCellTooltip',
+    false
+  );
+
   let dataAttr = {};
   if (async) {
     dataAttr = {
@@ -141,6 +146,7 @@ export const all = () => {
           showMenu={showMenu}
           type={type}
           size={size}
+          headCellTooltip={headCellTooltip}
           draggable={draggable}
           nestedRows={nestedRows}
           nestedRowRenderer={nestedRowRenderer}