fix(DataTable): cells type.

src/components/DataTableCells/AccountsListFieldCell.js

@@ -1,13 +1,12 @@
 import React, { useRef, useCallback, useMemo } from 'react';
 import classNames from 'classnames';
-import { useCellAutoFocus } from 'hooks';
+import { FormGroup, Classes, Intent } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
+import { CellType } from 'common';
+import { useCellAutoFocus } from 'hooks';
 import AccountsSuggestField from 'components/AccountsSuggestField';
 
-// import AccountsSelectList from 'components/AccountsSelectList';
-import { FormGroup, Classes, Intent } from '@blueprintjs/core';
-
 /**
  * Account cell renderer.
  */
@@ -74,3 +73,4 @@ export default function AccountCellRenderer({
     </FormGroup>
   );
 }
+AccountCellRenderer.cellType = CellType.Field;

src/components/DataTableCells/BranchesListFieldCell.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { FormGroup, Intent, Classes } from '@blueprintjs/core';
 import classNames from 'classnames';
+
+import { CellType } from 'common';
 import BranchSuggestField from '../BranchSuggestField';
 
 /**
@@ -38,3 +40,5 @@ export default function BranchesListFieldCell({
     </FormGroup>
   );
 }
+
+BranchesListFieldCell.cellType = CellType.Field;

src/components/DataTableCells/CheckBoxFieldCell.js

@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { get } from 'lodash';
 import { Classes, Checkbox, FormGroup, Intent } from '@blueprintjs/core';
+import { CellType } from 'common';
 
 const CheckboxEditableCell = ({
   row: { index, original },
@@ -45,4 +46,6 @@ const CheckboxEditableCell = ({
   );
 };
 
+CheckboxEditableCell.cellType = CellType.Field;
+
 export default CheckboxEditableCell;

src/components/DataTableCells/ContactsListFieldCell.js

@@ -1,9 +1,9 @@
 import React, { useCallback } from 'react';
 import { FormGroup, Intent, Classes } from '@blueprintjs/core';
 import classNames from 'classnames';
-import { ContactSelecetList } from 'components';
-import ContactsSuggestField from 'components/ContactsSuggestField';
 
+import { CellType } from 'common';
+import ContactsSuggestField from 'components/ContactsSuggestField';
 export default function ContactsListCellRenderer({
   column: { id },
   row: { index, original },
@@ -37,3 +37,5 @@ export default function ContactsListCellRenderer({
     </FormGroup>
   );
 }
+
+ContactsListCellRenderer.cellType = CellType.Field;

src/components/DataTableCells/InputGroupCell.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import classNames from 'classnames';
 import { Classes, InputGroup, FormGroup, Intent } from '@blueprintjs/core';
+import { CellType } from 'common';
 
 const InputEditableCell = ({
   row: { index },
@@ -37,4 +38,6 @@ const InputEditableCell = ({
   );
 };
 
+InputEditableCell.cellType = CellType.Field;
+
 export default InputEditableCell;

src/components/DataTableCells/ItemsListCell.js

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { FormGroup, Classes, Intent } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 
+import { CellType } from 'common';
 import ItemsSuggestField from 'components/ItemsSuggestField';
 
 import { useCellAutoFocus } from 'hooks';
@@ -54,3 +55,5 @@ export default function ItemsListCell({
     </FormGroup>
   );
 }
+
+ItemsListCell.cellType = CellType.Field;

src/components/DataTableCells/MoneyFieldCell.js

@@ -1,7 +1,9 @@
 import React, { useCallback, useState, useEffect } from 'react';
 import { FormGroup, Intent } from '@blueprintjs/core';
+
 import { MoneyInputGroup } from 'components';
 import { CLASSES } from 'common/classes';
+import { CellType } from 'common';
 
 // Input form cell renderer.
 const MoneyFieldCellRenderer = ({
@@ -48,4 +50,6 @@ const MoneyFieldCellRenderer = ({
   );
 };
 
+MoneyFieldCellRenderer.cellType = CellType.Field;
+
 export default MoneyFieldCellRenderer;

src/components/DataTableCells/NumericInputCell.js

@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { FormGroup, NumericInput, Intent } from '@blueprintjs/core';
 import classNames from 'classnames';
+
+import { CellType } from 'common';
 import { CLASSES } from 'common/classes';
 
 /**
@@ -36,8 +38,10 @@ export default function NumericInputCell({
         onValueChange={handleValueChange}
         onBlur={onBlur}
         fill={true}
-        buttonPosition={"none"}
+        buttonPosition={'none'}
       />
     </FormGroup>
   );
 }
+
+NumericInputCell.cellType = CellType.Field;

src/components/DataTableCells/PaymentReceiveListFieldCell.js

@@ -1,8 +1,9 @@
 import React, { useCallback } from 'react';
-import PaymentReceiveListField from 'components/PaymentReceiveListField';
 import classNames from 'classnames';
 import { FormGroup, Classes, Intent } from '@blueprintjs/core';
 
+import PaymentReceiveListField from 'components/PaymentReceiveListField';
+import { CellType } from 'common';
 function PaymentReceiveListFieldCell({
   column: { id },
   row: { index },
@@ -32,4 +33,6 @@ function PaymentReceiveListFieldCell({
   );
 }
 
+PaymentReceiveListFieldCell.cellType = CellType.Field;
+
 export default PaymentReceiveListFieldCell;

src/components/DataTableCells/PercentFieldCell.js

@@ -1,6 +1,8 @@
 import React, { useCallback, useState, useEffect } from 'react';
 import { FormGroup, Intent } from '@blueprintjs/core';
+
 import { MoneyInputGroup } from 'components';
+import { CellType } from 'common';
 
 const PercentFieldCell = ({
   cell: { value: initialValue },
@@ -38,4 +40,6 @@ const PercentFieldCell = ({
   );
 };
 
+PercentFieldCell.cellType = CellType.Field;
+
 export default PercentFieldCell;

src/components/DataTableCells/SwitchFieldCell.js

@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { Classes, Switch, FormGroup, Intent } from '@blueprintjs/core';
 
+import { CellType } from 'common';
 import { safeInvoke } from 'utils';
 
 /**
@@ -48,4 +49,6 @@ const SwitchEditableCell = ({
   );
 };
 
-export default SwitchEditableCell;
+SwitchEditableCell.cellType = CellType.Field;
+
+export default SwitchEditableCell;

src/components/DataTableCells/TextAreaCell.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import classNames from 'classnames';
 import { Classes, TextArea, FormGroup, Intent } from '@blueprintjs/core';
+import { CellType } from 'common';
 
 const TextAreaEditableCell = ({
   row: { index },
@@ -39,4 +40,6 @@ const TextAreaEditableCell = ({
   );
 };
 
+TextAreaEditableCell.cellType = CellType.Field;
+
 export default TextAreaEditableCell;

src/components/Datatable/DatatableEditable.js

@@ -54,10 +54,15 @@ const DatatableEditableRoot = styled.div`
     }
     .tbody {
       .tr .td {
-        padding: 2px;
         border-bottom: 0;
         border-bottom: 1px solid #d8d8d8;
         min-height: 38px;
+        padding: 4px 14px;
+
+        &.td-field-type,
+        &.td-button-type{
+          padding: 2px;
+        }
       }
       .tr:last-of-type .td {
         border-bottom: 0;

src/components/Datatable/TableCell.js

@@ -1,7 +1,8 @@
 import React, { useContext } from 'react';
 import classNames from 'classnames';
-import { If } from 'components';
-import { Skeleton } from 'components';
+import { camelCase} from 'lodash';
+
+import { If, Skeleton } from 'components';
 import { useAppIntlContext } from 'components/AppIntlProvider';
 import TableContext from './TableContext';
 import { saveInvoke, ignoreEventFromSelectors } from 'utils';
@@ -56,7 +57,8 @@ export default function TableCell({ cell, row, index }) {
       return;
     }
     saveInvoke(onCellClick, cell, event);
-  };
+  };  
+  const cellType = camelCase(cell.column.Cell.cellType) || 'text';
 
   return (
     <div
@@ -65,6 +67,8 @@ export default function TableCell({ cell, row, index }) {
           'is-text-overview': cell.column.textOverview,
           clickable: cell.column.clickable,
           'align-right': cell.column.align === 'right',
+          [`td-${cell.column.id}`]: cell.column.id,
+          [`td-${cellType}-type`]: !!cellType,
         }),
         onClick: handleCellClick,
       })}

src/components/Datatable/TableIndeterminateCheckboxRow.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Checkbox } from '@blueprintjs/core';
-
+import { CellType } from 'common';
 export default function TableIndeterminateCheckboxRow({ row }) {
   return (
     <div class="selection-checkbox">
@@ -8,3 +8,5 @@ export default function TableIndeterminateCheckboxRow({ row }) {
     </div>
   );
 }
+
+TableIndeterminateCheckboxRow.cellType = CellType.Field;