feat(TextOverlayTooltip): WIP

src/components/CommercialDoc/index.js

@@ -11,7 +11,7 @@ export const CommercialDocHeader = styled.div`
 `;
 
 export const CommercialDocTopHeader = styled.div`
-  margin-bottom: 25px;
+  margin-bottom: 30px;
 `;
 
 export const CommercialDocEntriesTable = styled(DataTable)`

src/components/DataTableCells/TextOverviewTooltipCell.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Tooltip, Position } from '@blueprintjs/core';
+
+/**
+ * Text overview tooltip cell.
+ * @returns {JSX.Element}
+ */
+export function TextOverviewTooltipCell({ cell: { value } }) {
+  const SUBMENU_POPOVER_MODIFIERS = {
+    flip: { boundariesElement: 'viewport', padding: 20 },
+    offset: { offset: '0, 10' },
+    preventOverflow: { boundariesElement: 'viewport', padding: 40 },
+  };
+
+  return (
+    <Tooltip
+      content={value}
+      position={Position.BOTTOM_LEFT}
+      boundary={'viewport'}
+      minimal={true}
+      modifiers={SUBMENU_POPOVER_MODIFIERS}
+      targetClassName={'table-tooltip-overview-target'}
+    >
+      {value}
+    </Tooltip>
+  );
+}

src/components/DataTableCells/index.js

@@ -10,6 +10,7 @@ import CheckBoxFieldCell from './CheckBoxFieldCell';
 import SwitchFieldCell from './SwitchFieldCell';
 import TextAreaCell from './TextAreaCell';
 import BranchesListFieldCell from './BranchesListFieldCell';
+import { TextOverviewTooltipCell } from './TextOverviewTooltipCell';
 
 export {
   AccountsListFieldCell,
@@ -25,4 +26,5 @@ export {
   SwitchFieldCell,
   TextAreaCell,
   BranchesListFieldCell,
+  TextOverviewTooltipCell,
 };

src/components/index.js

@@ -49,7 +49,6 @@ import DrawerHeaderContent from './Drawer/DrawerHeaderContent';
 import Postbox from './Postbox';
 import AccountsSuggestField from './AccountsSuggestField';
 import MaterialProgressBar from './MaterialProgressBar';
-import { MoneyFieldCell } from './DataTableCells';
 import AvaterCell from './AvaterCell';
 
 import { ItemsMultiSelect } from './Items';
@@ -105,6 +104,7 @@ export * from './Currencies';
 export * from './FormTopbar'
 export * from './Paper';
 export * from './Accounts'
+export * from './DataTableCells';
 
 const Hint = FieldHint;
 
@@ -167,7 +167,6 @@ export {
   Postbox,
   AccountsSuggestField,
   MaterialProgressBar,
-  MoneyFieldCell,
   ItemsMultiSelect,
   AvaterCell,
   MoreMenuItems,

src/containers/Drawers/InvoiceDetailDrawer/utils.js

@@ -19,7 +19,7 @@ import {
   FormattedMessage as T,
   Choose,
   Can,
-  MODIFIER,
+  TextOverviewTooltipCell,
 } from 'components';
 import {
   SaleInvoiceAction,
@@ -27,19 +27,6 @@ import {
 } from '../../../common/abilityOption';
 import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
 
-export function TooltipAccessor({ cell: { value } }) {
-  return (
-    <Tooltip
-      content={value}
-      position={Position.BOTTOM_LEFT}
-      boundary={'viewport'}
-      className={MODIFIER.SELECT_LIST_TOOLTIP_ITEMS} // block
-    >
-      {value}
-    </Tooltip>
-  );
-}
-
 /**
  * Retrieve invoice readonly details table columns.
  */
@@ -54,52 +41,54 @@ export const useInvoiceReadonlyEntriesColumns = () => {
       {
         Header: intl.get('product_and_service'),
         accessor: 'item.name',
-        Cell: TooltipAccessor,
-        width: getColumnWidth(entries, 'item.name', {
-          minWidth: 100,
-          maxWidth: 150,
-          magicSpacing: 5,
-        }),
-        className: 'name',
+        Cell: TextOverviewTooltipCell,
         disableSortBy: true,
         textOverview: true,
+        width: 150,
       },
       {
         Header: intl.get('description'),
         accessor: 'description',
-        // Cell: TooltipAccessor,
-        className: 'description',
-        width: getColumnWidth(entries, 'description', {
-          minWidth: 100,
-          maxWidth: 150,
-          magicSpacing: 5,
-        }),
+        Cell: TextOverviewTooltipCell,
         disableSortBy: true,
         textOverview: true,
+        width: 75,
       },
       {
         Header: intl.get('quantity'),
         accessor: 'quantity',
         Cell: FormatNumberCell,
-        width: 100,
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
+        width: getColumnWidth(entries, 'quantity', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
       },
       {
         Header: intl.get('rate'),
         accessor: 'rate',
         Cell: FormatNumberCell,
-        width: 100,
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
+        width: getColumnWidth(entries, 'rate', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
       },
       {
         Header: intl.get('amount'),
         accessor: 'amount',
         Cell: FormatNumberCell,
-        width: 100,
         align: 'right',
         disableSortBy: true,
+        textOverview: true,
+        width: getColumnWidth(entries, 'amount', {
+          minWidth: 60,
+          magicSpacing: 5,
+        }),
       },
     ],
     [],

src/style/App.scss

@@ -290,3 +290,8 @@ html[lang^='ar'] {
 .font-bold {
   font-weight: 600;
 }
+
+
+span.table-tooltip-overview-target{
+  display: inline;
+}