BIG-78: feat: prevent table row click action on some given nested elements.

src/components/Datatable/TableCell.js

@@ -4,9 +4,11 @@ import { If } from 'components';
 import { Skeleton } from 'components';
 import { useAppIntlContext } from 'components/AppIntlProvider';
 import TableContext from './TableContext';
-import { saveInvoke } from 'utils';
+import { saveInvoke, ignoreEventFromSelectors } from 'utils';
 import { isCellLoading } from './utils';
 
+const ROW_CLICK_SELECTORS_INGORED = ['.expand-toggle', '.selection-checkbox'];
+
 /**
  * Table cell.
  */
@@ -50,6 +52,9 @@ export default function TableCell({ cell, row, index }) {
   }
   // Handle cell click action.
   const handleCellClick = (event) => {
+    if (ignoreEventFromSelectors(event, ROW_CLICK_SELECTORS_INGORED)) {
+      return;
+    }
     saveInvoke(onCellClick, cell, event);
   };
 
@@ -58,7 +63,7 @@ export default function TableCell({ cell, row, index }) {
       {...cell.getCellProps({
         className: classNames(cell.column.className, 'td', {
           'is-text-overview': cell.column.textOverview,
-          'clickable': cell.column.clickable,
+          clickable: cell.column.clickable,
           'align-right': cell.column.align === 'right',
         }),
         onClick: handleCellClick,
@@ -83,11 +88,15 @@ export default function TableCell({ cell, row, index }) {
           // to build the toggle for expanding a row
         }
         <If condition={cell.row.canExpand && expandable && isExpandColumn}>
-          <span {...getToggleRowExpandedProps({ className: 'expand-toggle' })}>
           <span
-              className={classNames({
+            {...getToggleRowExpandedProps({
-                'arrow-down': isExpanded,
+              className: 'expand-toggle',
-                'arrow-right': !isExpanded,
+            })}
+            style={{}}
+          >
+            <span
+              className={classNames('expand-arrow', {
+                'is-expanded': isExpanded,
               })}
             />
           </span>

src/components/Datatable/TableIndeterminateCheckboxRow.js

@@ -3,7 +3,7 @@ import { Checkbox } from '@blueprintjs/core';
 
 export default function TableIndeterminateCheckboxRow({ row }) {
   return (
-    <div>
+    <div class="selection-checkbox">
       <Checkbox {...row.getToggleRowSelectedProps()} />
     </div>
   );

src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js

@@ -113,7 +113,6 @@ function ManualJournalsDataTable({
         data={manualJournals}
         manualSortBy={true}
         selectionColumn={true}
-        expandable={true}
         sticky={true}
         loading={isManualJournalsLoading}
         headerLoading={isManualJournalsLoading}

src/lang/ar/index.json

@@ -443,7 +443,7 @@
   "financial_accounting": " محاسبة مالية",
   "after": "بعد",
   "before": "قبل",
-  "count_filters_applied": "تم تطبيق {عدد} من الفلاتر",
+  "count_filters_applied": "تم تطبيق {count} من الفلاتر",
   "is": "هو",
   "is_not": "ليس",
   "create_a_new_view": "قم بإنشاء طريقة عرض جديدة",
@@ -833,7 +833,7 @@
   "the_payment_amount_that_received": "مبلغ الدفع الذي تم استلامه من الزبون أكبر من المبلغ المستحق لهذه الفاتورة.",
   "invoice_number": "رقم الفاتورة",
   "make_payment": "قم بالدفع",
-  "payment_divider": "إضافة الدفع",
+  "payment_divider": "إضافة دفع",
   "quick_receive_payment": "سند قبض سريع",
   "amount_received": "تم استلام المبلغ",
   "payment_receive_number_required": "مطلوب رقم استلام الدفعة",

src/style/components/DataTable/DataTable.scss

@@ -10,6 +10,7 @@
       }
     }
   }
+
   .table {
     text-align: left;
     border-spacing: 0;
@@ -29,12 +30,13 @@
         font-weight: 600;
         border-bottom: 1px solid rgb(224, 224, 224);
 
-        > div {
+        >div {
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
         }
       }
+
       .sort-icon {
         width: 0;
         height: 0;
@@ -48,6 +50,7 @@
           border-right: 4px solid transparent;
           border-bottom: 6px solid #666;
         }
+
         &--asc {
           border-left: 4px solid transparent;
           border-right: 4px solid transparent;
@@ -101,6 +104,7 @@
       .bp3-control {
         margin-bottom: 0;
       }
+
       .resizer {
         display: inline-block;
         background: transparent;
@@ -127,6 +131,7 @@
 
       .bp3-control.bp3-checkbox .bp3-control-indicator {
         border: 1px solid #c2c2c2;
+        cursor: auto;
 
         &,
         &:hover {
@@ -136,8 +141,9 @@
       }
 
       .bp3-control.bp3-checkbox {
-        input:checked ~ .bp3-control-indicator,
+
-        input:indeterminate ~ .bp3-control-indicator {
+        input:checked~.bp3-control-indicator,
+        input:indeterminate~.bp3-control-indicator {
           border-color: #0052ff;
         }
       }
@@ -165,7 +171,7 @@
       overflow: auto;
 
       .tbody-inner {
-        > .loading {
+        >.loading {
           padding-top: 40px;
         }
       }
@@ -178,6 +184,7 @@
         .placeholder {
           color: #a0a0a0;
         }
+
         .text-overview {
           overflow: hidden;
           white-space: nowrap;
@@ -195,12 +202,15 @@
           }
         }
       }
+
       .tr:hover .td {
         background: #f3f7fc;
       }
+
       .tr.is-context-menu-active .td {
         background: #f3fafc;
       }
+
       .td.actions .#{$ns}-button {
         background: #e6effb;
         border: 0;
@@ -212,13 +222,16 @@
         &:focus {
           background-color: #cfdcee;
         }
+
         svg {
           color: #425361;
         }
+
         .bp3-icon-more-h-16 {
           margin-top: 2px;
         }
       }
+
       .tr.no-results {
         .td {
           flex-direction: column;
@@ -234,7 +247,7 @@
         }
       }
 
-      > .loading {
+      >.loading {
         padding-top: 50px;
       }
     }
@@ -242,29 +255,32 @@
     .tr .th,
     .tr .td {
       .expand-toggle {
-        cursor: pointer;
+        cursor: auto;
         display: inline-block;
-        padding: 0 8px 0 0;
+        padding: 4px 8px;
         padding-left: 0;
         margin: auto 0;
         margin-left: 4px;
+        vertical-align: top;
 
-        .arrow-right {
+        .expand-arrow {
           width: 0;
           height: 0;
           border-top: 5px solid transparent;
           border-bottom: 5px solid transparent;
           border-left: 8px solid #acacac;
           display: block;
+          transition: all 0.1s cubic-bezier(.4, 1, .75, .9);
+
+          &.is-expanded {
+            transform: rotate(90deg);
+          }
         }
 
-        .arrow-down {
+        &:hover {
-          width: 0;
+          .expand-arrow {
-          height: 0;
+            border-left-color: #7d8593;
-          border-left: 5px solid transparent;
+          }
-          border-right: 5px solid transparent;
-          border-top: 8px solid #acacac;
-          display: block;
         }
       }
     }
@@ -274,16 +290,17 @@
       width: 100%;
     }
 
-    &-size{
+    &-size {
 
-      &--medium{
+      &--medium {
-        .tbody .tr{
+        .tbody .tr {
           background-size: red;
           min-height: 46px;
         }
       }
-      &--small{
+
-        .tbody .tr{
+      &--small {
+        .tbody .tr {
           min-height: 40px;
         }
       }
@@ -309,6 +326,7 @@
   }
 
   &.has-sticky {
+
     .thead,
     .tfoot {
       position: sticky;
@@ -322,6 +340,7 @@
     .tfoot {
       bottom: 0;
     }
+
     .tbody {
       position: relative;
       z-index: 0;

src/utils.js

@@ -891,3 +891,12 @@ export function flatten(target, opts) {
 
   return output;
 }
+
+/**
+ * Ingores the given selectors from event callback.
+ */
+export function ignoreEventFromSelectors(event, selectors) {
+  return selectors
+    .map((selector) => event.target.closest(selector))
+    .some((element) => !!element);
+}