Import fix
This commit is contained in:
José Oliveira
Josh Harvey
parent
a3973f3258
commit
2ccbbdeb50
1 changed files with 267 additions and 268 deletions
|
|
@ -1,268 +1,267 @@
|
|||
/* eslint-disable import/order */
|
||||
import { makeStyles } from '@material-ui/core'
|
||||
import classnames from 'classnames'
|
||||
import { Field, useFormikContext } from 'formik'
|
||||
import * as R from 'ramda'
|
||||
import React, { useContext, useState } from 'react'
|
||||
|
||||
import { DeleteDialog } from 'src/components/DeleteDialog'
|
||||
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'
|
||||
|
||||
const useStyles = makeStyles(styles)
|
||||
|
||||
const ActionCol = ({ disabled, editing }) => {
|
||||
const classes = useStyles()
|
||||
const { values, submitForm, resetForm } = useFormikContext()
|
||||
const {
|
||||
editWidth,
|
||||
onEdit,
|
||||
enableEdit,
|
||||
enableDelete,
|
||||
disableRowEdit,
|
||||
onDelete,
|
||||
deleteWidth,
|
||||
enableToggle,
|
||||
onToggle,
|
||||
toggleWidth,
|
||||
forceAdd,
|
||||
clearError,
|
||||
actionColSize,
|
||||
error
|
||||
} = useContext(TableCtx)
|
||||
|
||||
const disableEdit = disabled || (disableRowEdit && disableRowEdit(values))
|
||||
const cancel = () => {
|
||||
clearError()
|
||||
resetForm()
|
||||
}
|
||||
|
||||
const [deleteDialog, setDeleteDialog] = useState(false)
|
||||
|
||||
const onConfirmed = () => {
|
||||
onDelete(values.id).then(res => {
|
||||
if (!R.isNil(res)) setDeleteDialog(false)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{editing && (
|
||||
<Td textAlign="center" width={actionColSize}>
|
||||
<Link
|
||||
className={classes.saveButton}
|
||||
type="submit"
|
||||
color="primary"
|
||||
onClick={submitForm}>
|
||||
Save
|
||||
</Link>
|
||||
{!forceAdd && (
|
||||
<Link color="secondary" onClick={cancel}>
|
||||
Cancel
|
||||
</Link>
|
||||
)}
|
||||
</Td>
|
||||
)}
|
||||
{!editing && enableEdit && (
|
||||
<Td textAlign="center" width={editWidth}>
|
||||
<IconButton
|
||||
disabled={disableEdit}
|
||||
className={classes.editButton}
|
||||
onClick={() => onEdit && onEdit(values.id)}>
|
||||
{disableEdit ? <DisabledEditIcon /> : <EditIcon />}
|
||||
</IconButton>
|
||||
</Td>
|
||||
)}
|
||||
{!editing && enableDelete && (
|
||||
<Td textAlign="center" width={deleteWidth}>
|
||||
<IconButton
|
||||
disabled={disabled}
|
||||
onClick={() => {
|
||||
setDeleteDialog(true)
|
||||
}}>
|
||||
{disabled ? <DisabledDeleteIcon /> : <DeleteIcon />}
|
||||
</IconButton>
|
||||
<DeleteDialog
|
||||
open={deleteDialog}
|
||||
setDeleteDialog={setDeleteDialog}
|
||||
onConfirmed={onConfirmed}
|
||||
onDismissed={() => {
|
||||
setDeleteDialog(false)
|
||||
clearError()
|
||||
}}
|
||||
errorMessage={error}
|
||||
/>
|
||||
</Td>
|
||||
)}
|
||||
{!editing && enableToggle && (
|
||||
<Td textAlign="center" width={toggleWidth}>
|
||||
<Switch
|
||||
checked={!!values.active}
|
||||
value={!!values.active}
|
||||
disabled={disabled}
|
||||
onChange={() => onToggle(values.id)}
|
||||
/>
|
||||
</Td>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
|
||||
const {
|
||||
name,
|
||||
bypassField,
|
||||
input,
|
||||
editable = true,
|
||||
size,
|
||||
bold,
|
||||
width,
|
||||
textAlign,
|
||||
suffix,
|
||||
SuffixComponent = TL2,
|
||||
textStyle = it => {},
|
||||
view = it => it?.toString(),
|
||||
inputProps = {}
|
||||
} = config
|
||||
|
||||
const { values } = useFormikContext()
|
||||
const classes = useStyles({ textAlign, size })
|
||||
|
||||
const innerProps = {
|
||||
fullWidth: true,
|
||||
autoFocus: focus,
|
||||
size,
|
||||
bold,
|
||||
textAlign,
|
||||
...inputProps
|
||||
}
|
||||
|
||||
const isEditing = editing && editable
|
||||
const isField = !bypassField
|
||||
|
||||
return (
|
||||
<Td
|
||||
className={{
|
||||
[classes.extraPaddingRight]: extraPaddingRight,
|
||||
[classes.extraPadding]: extraPadding,
|
||||
[classes.withSuffix]: suffix
|
||||
}}
|
||||
width={width}
|
||||
size={size}
|
||||
bold={bold}
|
||||
textAlign={textAlign}>
|
||||
{isEditing && isField && (
|
||||
<Field name={name} component={input} {...innerProps} />
|
||||
)}
|
||||
{isEditing && !isField && <config.input name={name} />}
|
||||
{!isEditing && values && (
|
||||
<div style={textStyle(values, isEditing)}>
|
||||
{view(values[name], values)}
|
||||
</div>
|
||||
)}
|
||||
{suffix && (
|
||||
<SuffixComponent
|
||||
className={classes.suffix}
|
||||
style={isEditing ? {} : textStyle(values, isEditing)}>
|
||||
{suffix}
|
||||
</SuffixComponent>
|
||||
)}
|
||||
</Td>
|
||||
)
|
||||
}
|
||||
|
||||
const groupStriped = elements => {
|
||||
const [toStripe, noStripe] = R.partition(R.propEq('stripe', true))(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, lastOfGroup }) => {
|
||||
const { touched, errors, values } = useFormikContext()
|
||||
const {
|
||||
elements,
|
||||
enableEdit,
|
||||
enableDelete,
|
||||
error,
|
||||
enableToggle,
|
||||
rowSize,
|
||||
stripeWhen
|
||||
} = useContext(TableCtx)
|
||||
|
||||
const classes = useStyles()
|
||||
|
||||
const shouldStripe = stripeWhen && stripeWhen(values)
|
||||
|
||||
const innerElements = shouldStripe ? groupStriped(elements) : elements
|
||||
const [toSHeader] = R.partition(R.has('doubleHeader'))(elements)
|
||||
|
||||
const extraPaddingIndex = toSHeader?.length
|
||||
? R.indexOf(toSHeader[0], elements)
|
||||
: -1
|
||||
|
||||
const extraPaddingRightIndex = toSHeader?.length
|
||||
? R.indexOf(toSHeader[toSHeader.length - 1], elements)
|
||||
: -1
|
||||
|
||||
const elementToFocusIndex = innerElements.findIndex(
|
||||
it => it.editable === undefined || it.editable
|
||||
)
|
||||
|
||||
const classNames = {
|
||||
[classes.lastOfGroup]: lastOfGroup
|
||||
}
|
||||
|
||||
const touchedErrors = R.pick(R.keys(touched), errors)
|
||||
const hasTouchedErrors = touchedErrors && R.keys(touchedErrors).length > 0
|
||||
const hasErrors = hasTouchedErrors || !!error
|
||||
|
||||
const errorMessage =
|
||||
error || (touchedErrors && R.values(touchedErrors).join(', '))
|
||||
|
||||
return (
|
||||
<Tr
|
||||
className={classnames(classNames)}
|
||||
size={rowSize}
|
||||
error={editing && hasErrors}
|
||||
errorMessage={errorMessage}>
|
||||
{innerElements.map((it, idx) => {
|
||||
return (
|
||||
<ECol
|
||||
key={idx}
|
||||
config={it}
|
||||
editing={editing}
|
||||
focus={idx === elementToFocusIndex && editing}
|
||||
extraPaddingRight={extraPaddingRightIndex === idx}
|
||||
extraPadding={extraPaddingIndex === idx}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
{(enableEdit || enableDelete || enableToggle) && (
|
||||
<ActionCol disabled={disabled} editing={editing} />
|
||||
)}
|
||||
</Tr>
|
||||
)
|
||||
}
|
||||
|
||||
export default ERow
|
||||
import { makeStyles } from '@material-ui/core'
|
||||
import classnames from 'classnames'
|
||||
import { Field, useFormikContext } from 'formik'
|
||||
import * as R from 'ramda'
|
||||
import React, { useContext, useState } from 'react'
|
||||
|
||||
import { DeleteDialog } from 'src/components/DeleteDialog'
|
||||
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'
|
||||
|
||||
const useStyles = makeStyles(styles)
|
||||
|
||||
const ActionCol = ({ disabled, editing }) => {
|
||||
const classes = useStyles()
|
||||
const { values, submitForm, resetForm } = useFormikContext()
|
||||
const {
|
||||
editWidth,
|
||||
onEdit,
|
||||
enableEdit,
|
||||
enableDelete,
|
||||
disableRowEdit,
|
||||
onDelete,
|
||||
deleteWidth,
|
||||
enableToggle,
|
||||
onToggle,
|
||||
toggleWidth,
|
||||
forceAdd,
|
||||
clearError,
|
||||
actionColSize,
|
||||
error
|
||||
} = useContext(TableCtx)
|
||||
|
||||
const disableEdit = disabled || (disableRowEdit && disableRowEdit(values))
|
||||
const cancel = () => {
|
||||
clearError()
|
||||
resetForm()
|
||||
}
|
||||
|
||||
const [deleteDialog, setDeleteDialog] = useState(false)
|
||||
|
||||
const onConfirmed = () => {
|
||||
onDelete(values.id).then(res => {
|
||||
if (!R.isNil(res)) setDeleteDialog(false)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{editing && (
|
||||
<Td textAlign="center" width={actionColSize}>
|
||||
<Link
|
||||
className={classes.saveButton}
|
||||
type="submit"
|
||||
color="primary"
|
||||
onClick={submitForm}>
|
||||
Save
|
||||
</Link>
|
||||
{!forceAdd && (
|
||||
<Link color="secondary" onClick={cancel}>
|
||||
Cancel
|
||||
</Link>
|
||||
)}
|
||||
</Td>
|
||||
)}
|
||||
{!editing && enableEdit && (
|
||||
<Td textAlign="center" width={editWidth}>
|
||||
<IconButton
|
||||
disabled={disableEdit}
|
||||
className={classes.editButton}
|
||||
onClick={() => onEdit && onEdit(values.id)}>
|
||||
{disableEdit ? <DisabledEditIcon /> : <EditIcon />}
|
||||
</IconButton>
|
||||
</Td>
|
||||
)}
|
||||
{!editing && enableDelete && (
|
||||
<Td textAlign="center" width={deleteWidth}>
|
||||
<IconButton
|
||||
disabled={disabled}
|
||||
onClick={() => {
|
||||
setDeleteDialog(true)
|
||||
}}>
|
||||
{disabled ? <DisabledDeleteIcon /> : <DeleteIcon />}
|
||||
</IconButton>
|
||||
<DeleteDialog
|
||||
open={deleteDialog}
|
||||
setDeleteDialog={setDeleteDialog}
|
||||
onConfirmed={onConfirmed}
|
||||
onDismissed={() => {
|
||||
setDeleteDialog(false)
|
||||
clearError()
|
||||
}}
|
||||
errorMessage={error}
|
||||
/>
|
||||
</Td>
|
||||
)}
|
||||
{!editing && enableToggle && (
|
||||
<Td textAlign="center" width={toggleWidth}>
|
||||
<Switch
|
||||
checked={!!values.active}
|
||||
value={!!values.active}
|
||||
disabled={disabled}
|
||||
onChange={() => onToggle(values.id)}
|
||||
/>
|
||||
</Td>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
|
||||
const {
|
||||
name,
|
||||
bypassField,
|
||||
input,
|
||||
editable = true,
|
||||
size,
|
||||
bold,
|
||||
width,
|
||||
textAlign,
|
||||
suffix,
|
||||
SuffixComponent = TL2,
|
||||
textStyle = it => {},
|
||||
view = it => it?.toString(),
|
||||
inputProps = {}
|
||||
} = config
|
||||
|
||||
const { values } = useFormikContext()
|
||||
const classes = useStyles({ textAlign, size })
|
||||
|
||||
const innerProps = {
|
||||
fullWidth: true,
|
||||
autoFocus: focus,
|
||||
size,
|
||||
bold,
|
||||
textAlign,
|
||||
...inputProps
|
||||
}
|
||||
|
||||
const isEditing = editing && editable
|
||||
const isField = !bypassField
|
||||
|
||||
return (
|
||||
<Td
|
||||
className={{
|
||||
[classes.extraPaddingRight]: extraPaddingRight,
|
||||
[classes.extraPadding]: extraPadding,
|
||||
[classes.withSuffix]: suffix
|
||||
}}
|
||||
width={width}
|
||||
size={size}
|
||||
bold={bold}
|
||||
textAlign={textAlign}>
|
||||
{isEditing && isField && (
|
||||
<Field name={name} component={input} {...innerProps} />
|
||||
)}
|
||||
{isEditing && !isField && <config.input name={name} />}
|
||||
{!isEditing && values && (
|
||||
<div style={textStyle(values, isEditing)}>
|
||||
{view(values[name], values)}
|
||||
</div>
|
||||
)}
|
||||
{suffix && (
|
||||
<SuffixComponent
|
||||
className={classes.suffix}
|
||||
style={isEditing ? {} : textStyle(values, isEditing)}>
|
||||
{suffix}
|
||||
</SuffixComponent>
|
||||
)}
|
||||
</Td>
|
||||
)
|
||||
}
|
||||
|
||||
const groupStriped = elements => {
|
||||
const [toStripe, noStripe] = R.partition(R.propEq('stripe', true))(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, lastOfGroup }) => {
|
||||
const { touched, errors, values } = useFormikContext()
|
||||
const {
|
||||
elements,
|
||||
enableEdit,
|
||||
enableDelete,
|
||||
error,
|
||||
enableToggle,
|
||||
rowSize,
|
||||
stripeWhen
|
||||
} = useContext(TableCtx)
|
||||
|
||||
const classes = useStyles()
|
||||
|
||||
const shouldStripe = stripeWhen && stripeWhen(values)
|
||||
|
||||
const innerElements = shouldStripe ? groupStriped(elements) : elements
|
||||
const [toSHeader] = R.partition(R.has('doubleHeader'))(elements)
|
||||
|
||||
const extraPaddingIndex = toSHeader?.length
|
||||
? R.indexOf(toSHeader[0], elements)
|
||||
: -1
|
||||
|
||||
const extraPaddingRightIndex = toSHeader?.length
|
||||
? R.indexOf(toSHeader[toSHeader.length - 1], elements)
|
||||
: -1
|
||||
|
||||
const elementToFocusIndex = innerElements.findIndex(
|
||||
it => it.editable === undefined || it.editable
|
||||
)
|
||||
|
||||
const classNames = {
|
||||
[classes.lastOfGroup]: lastOfGroup
|
||||
}
|
||||
|
||||
const touchedErrors = R.pick(R.keys(touched), errors)
|
||||
const hasTouchedErrors = touchedErrors && R.keys(touchedErrors).length > 0
|
||||
const hasErrors = hasTouchedErrors || !!error
|
||||
|
||||
const errorMessage =
|
||||
error || (touchedErrors && R.values(touchedErrors).join(', '))
|
||||
|
||||
return (
|
||||
<Tr
|
||||
className={classnames(classNames)}
|
||||
size={rowSize}
|
||||
error={editing && hasErrors}
|
||||
errorMessage={errorMessage}>
|
||||
{innerElements.map((it, idx) => {
|
||||
return (
|
||||
<ECol
|
||||
key={idx}
|
||||
config={it}
|
||||
editing={editing}
|
||||
focus={idx === elementToFocusIndex && editing}
|
||||
extraPaddingRight={extraPaddingRightIndex === idx}
|
||||
extraPadding={extraPaddingIndex === idx}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
{(enableEdit || enableDelete || enableToggle) && (
|
||||
<ActionCol disabled={disabled} editing={editing} />
|
||||
)}
|
||||
</Tr>
|
||||
)
|
||||
}
|
||||
|
||||
export default ERow
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue