fix: rework wallet screen

new-lamassu-admin/src/components/editableTable/Row.js

@@ -1,39 +1,46 @@
 import { makeStyles } from '@material-ui/core'
-import classnames from 'classnames'
 import { Field, useFormikContext } from 'formik'
-import React from 'react'
+import * as R from 'ramda'
+import React, { useContext } from 'react'
 
 import { Link, IconButton } from 'src/components/buttons'
 import { Td, Tr } from 'src/components/fake-table/Table'
+import { Switch } from 'src/components/inputs'
 import { TL2 } from 'src/components/typography'
 import { ReactComponent as DisabledDeleteIcon } from 'src/styling/icons/action/delete/disabled.svg'
 import { ReactComponent as DeleteIcon } from 'src/styling/icons/action/delete/enabled.svg'
 import { ReactComponent as DisabledEditIcon } from 'src/styling/icons/action/edit/disabled.svg'
 import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
+import { ReactComponent as StripesSvg } from 'src/styling/icons/stripes.svg'
 
+import TableCtx from './Context'
 import styles from './Row.styles'
-import { ACTION_COL_SIZE } from './consts'
 
 const useStyles = makeStyles(styles)
 
-const ActionCol = ({
-  editing,
-  setEditing,
-  enableEdit,
-  disabled,
-  onDelete,
-  enableDelete
-}) => {
+const ActionCol = ({ disabled, editing }) => {
   const classes = useStyles()
   const { values, submitForm, resetForm } = useFormikContext()
+  const {
+    editWidth,
+    onEdit,
+    enableEdit,
+    enableDelete,
+    disableRowEdit,
+    onDelete,
+    deleteWidth,
+    enableToggle,
+    onToggle,
+    toggleWidth,
+    actionColSize
+  } = useContext(TableCtx)
 
-  const actionColSize =
-    enableDelete && enableEdit ? ACTION_COL_SIZE / 2 : ACTION_COL_SIZE
+  const disableEdit = disabled || (disableRowEdit && disableRowEdit(values))
 
   return (
     <>
       {editing && (
-        <Td textAlign="center" width={ACTION_COL_SIZE}>
+        <Td textAlign="center" width={actionColSize}>
           <Link
             className={classes.cancelButton}
             color="secondary"
@@ -46,22 +53,32 @@ const ActionCol = ({
         </Td>
       )}
       {!editing && enableEdit && (
-        <Td textAlign="right" width={actionColSize}>
+        <Td textAlign="center" width={editWidth}>
           <IconButton
-            disabled={disabled}
+            disabled={disableEdit}
             className={classes.editButton}
-            onClick={() => setEditing && setEditing(values.id)}>
-            {disabled ? <DisabledEditIcon /> : <EditIcon />}
+            onClick={() => onEdit && onEdit(values.id)}>
+            {disableEdit ? <DisabledEditIcon /> : <EditIcon />}
           </IconButton>
         </Td>
       )}
       {!editing && enableDelete && (
-        <Td textAlign="right" width={actionColSize}>
+        <Td textAlign="center" width={deleteWidth}>
           <IconButton disabled={disabled} onClick={() => onDelete(values.id)}>
             {disabled ? <DisabledDeleteIcon /> : <DeleteIcon />}
           </IconButton>
         </Td>
       )}
+      {!editing && enableToggle && (
+        <Td textAlign="center" width={toggleWidth}>
+          <Switch
+            checked={!!values.active}
+            value={!!values.active}
+            disabled={disabled}
+            onChange={() => onToggle(values.id)}
+          />
+        </Td>
+      )}
     </>
   )
 }
@@ -70,6 +87,7 @@ const ECol = ({ editing, config }) => {
   const {
     name,
     input,
+    editable = true,
     size,
     bold,
     width,
@@ -82,11 +100,6 @@ const ECol = ({ editing, config }) => {
   const { values } = useFormikContext()
   const classes = useStyles({ textAlign, size })
 
-  const viewClasses = {
-    [classes.bold]: bold,
-    [classes.size]: true
-  }
-
   const iProps = {
     fullWidth: true,
     size,
@@ -105,43 +118,58 @@ const ECol = ({ editing, config }) => {
       className={{ [classes.withSuffix]: suffix }}
       width={width}
       size={size}
+      bold={bold}
       textAlign={textAlign}>
-      {editing && <Field name={name} component={input} {...iProps} />}
-      {!editing && values && (
-        <div className={classnames(viewClasses)}>{view(values[name])}</div>
+      {editing && editable ? (
+        <Field name={name} component={input} {...iProps} />
+      ) : (
+        values && <>{view(values[name])}</>
       )}
       {suffix && <TL2 className={classes.suffix}>{suffix}</TL2>}
     </Td>
   )
 }
 
-const ERow = ({
-  elements,
-  enableEdit,
-  enableDelete,
-  onDelete,
-  editing,
-  setEditing,
-  disabled
-}) => {
-  const { errors } = useFormikContext()
+const groupStriped = elements => {
+  const [toStripe, noStripe] = R.partition(R.has('stripe'))(elements)
 
+  if (!toStripe.length) {
+    return elements
+  }
+
+  const index = R.indexOf(toStripe[0], elements)
+  const width = R.compose(R.sum, R.map(R.path(['width'])))(toStripe)
+
+  return R.insert(
+    index,
+    { width, editable: false, view: () => <StripesSvg /> },
+    noStripe
+  )
+}
+
+const ERow = ({ editing, disabled }) => {
+  const { errors } = useFormikContext()
+  const {
+    elements,
+    enableEdit,
+    enableDelete,
+    enableToggle,
+    stripeWhen
+  } = useContext(TableCtx)
+
+  const { values } = useFormikContext()
+  const shouldStripe = stripeWhen && stripeWhen(values) && !editing
+
+  const iElements = shouldStripe ? groupStriped(elements) : elements
   return (
     <Tr
       error={errors && errors.length}
       errorMessage={errors && errors.toString()}>
-      {elements.map((it, idx) => (
-        <ECol key={idx} config={it} editing={editing} />
-      ))}
-      {(enableEdit || enableDelete) && (
-        <ActionCol
-          disabled={disabled}
-          editing={editing}
-          setEditing={setEditing}
-          onDelete={onDelete}
-          enableEdit={enableEdit}
-          enableDelete={enableDelete}
-        />
+      {iElements.map((it, idx) => {
+        return <ECol key={idx} config={it} editing={editing} />
+      })}
+      {(enableEdit || enableDelete || enableToggle) && (
+        <ActionCol disabled={disabled} editing={editing} />
       )}
     </Tr>
   )