feat: notifications rework
This commit is contained in:
Taranto
Josh Harvey
parent
b6e7d98b72
commit
ffa8713ee4
77 changed files with 2281 additions and 3269 deletions
|
|
@ -1,250 +1,150 @@
|
|||
import React, { memo } from 'react'
|
||||
import * as R from 'ramda'
|
||||
import classnames from 'classnames'
|
||||
import { Form, Formik, Field, useFormikContext } from 'formik'
|
||||
import { makeStyles } from '@material-ui/core'
|
||||
import classnames from 'classnames'
|
||||
import { Field, useFormikContext } from 'formik'
|
||||
import React from 'react'
|
||||
|
||||
import { Link } from 'src/components/buttons'
|
||||
import { Td, Tr, CellDoubleLevel } from 'src/components/fake-table/Table'
|
||||
import { TextInputDisplay } from 'src/components/inputs/base/TextInput'
|
||||
import { ReactComponent as DeleteIcon } from 'src/styling/icons/action/delete/enabled.svg'
|
||||
import { Link, IconButton } from 'src/components/buttons'
|
||||
import { Td, Tr } from 'src/components/fake-table/Table'
|
||||
import { TL2 } from 'src/components/typography'
|
||||
import { ReactComponent as DisabledDeleteIcon } from 'src/styling/icons/action/delete/disabled.svg'
|
||||
// import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
|
||||
// import { ReactComponent as DisabledEditIcon } from 'src/styling/icons/action/edit/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'
|
||||
|
||||
const styles = {
|
||||
button: {
|
||||
border: 'none',
|
||||
backgroundColor: 'transparent',
|
||||
outline: 0,
|
||||
cursor: 'pointer'
|
||||
},
|
||||
actionCol: {
|
||||
display: 'flex',
|
||||
marginLeft: 'auto'
|
||||
},
|
||||
actionColDisplayMode: {
|
||||
justifyContent: 'center'
|
||||
},
|
||||
actionColEditMode: {
|
||||
justifyContent: 'flex-end',
|
||||
'& > :first-child': {
|
||||
marginRight: 16
|
||||
}
|
||||
},
|
||||
textInput: {
|
||||
'& > .MuiInputBase-input': {
|
||||
width: 282
|
||||
}
|
||||
}
|
||||
// doubleLevelRow: {
|
||||
// '& > div': {
|
||||
// marginRight: 72
|
||||
// }
|
||||
// }
|
||||
}
|
||||
import styles from './Row.styles'
|
||||
import { ACTION_COL_SIZE } from './consts'
|
||||
|
||||
const useStyles = makeStyles(styles)
|
||||
|
||||
const ERow = memo(
|
||||
({ elements, editing, setEditing, disableAction, action }) => {
|
||||
const classes = useStyles()
|
||||
const ActionCol = ({
|
||||
editing,
|
||||
setEditing,
|
||||
enableEdit,
|
||||
disabled,
|
||||
onDelete,
|
||||
enableDelete
|
||||
}) => {
|
||||
const classes = useStyles()
|
||||
const { values, submitForm, resetForm } = useFormikContext()
|
||||
|
||||
const Cell = ({
|
||||
name,
|
||||
input,
|
||||
type,
|
||||
display,
|
||||
className,
|
||||
size,
|
||||
textAlign,
|
||||
inputProps,
|
||||
editing
|
||||
}) => {
|
||||
return (
|
||||
<Td size={size} textAlign={textAlign}>
|
||||
{editing && (
|
||||
<Field
|
||||
id={name}
|
||||
name={name}
|
||||
component={input}
|
||||
className={className}
|
||||
{...inputProps}
|
||||
/>
|
||||
)}
|
||||
{!editing && type === 'text' && (
|
||||
<TextInputDisplay display={display} {...inputProps} />
|
||||
)}
|
||||
const actionColSize =
|
||||
enableDelete && enableEdit ? ACTION_COL_SIZE / 2 : ACTION_COL_SIZE
|
||||
|
||||
return (
|
||||
<>
|
||||
{editing && (
|
||||
<Td textAlign="center" width={ACTION_COL_SIZE}>
|
||||
<Link
|
||||
className={classes.cancelButton}
|
||||
color="secondary"
|
||||
onClick={resetForm}>
|
||||
Cancel
|
||||
</Link>
|
||||
<Link color="primary" onClick={submitForm}>
|
||||
Save
|
||||
</Link>
|
||||
</Td>
|
||||
)
|
||||
}
|
||||
|
||||
const actionCol = R.last(elements)
|
||||
const { values, errors } = useFormikContext()
|
||||
|
||||
const actionColClasses = {
|
||||
[classes.actionCol]: true,
|
||||
[classes.actionColDisplayMode]: !editing,
|
||||
[classes.actionColEditMode]: editing
|
||||
}
|
||||
|
||||
const icon = (action, disabled) => {
|
||||
if (action === 'delete' && !disabled) return <DeleteIcon />
|
||||
if (action === 'delete' && disabled) return <DisabledDeleteIcon />
|
||||
}
|
||||
|
||||
return (
|
||||
<Tr
|
||||
error={errors && errors.length}
|
||||
errorMessage={errors && errors.toString()}>
|
||||
{R.init(elements).map((element, idx) => {
|
||||
const colClasses = {
|
||||
[classes.textInput]: true
|
||||
}
|
||||
|
||||
if (Array.isArray(element)) {
|
||||
return (
|
||||
<CellDoubleLevel key={idx} className={classes.doubleLevelRow}>
|
||||
{R.map(
|
||||
(
|
||||
{
|
||||
name,
|
||||
input,
|
||||
size,
|
||||
textAlign,
|
||||
type,
|
||||
view = it => it?.toString(),
|
||||
inputProps
|
||||
},
|
||||
idx
|
||||
) => (
|
||||
<Cell
|
||||
key={name}
|
||||
name={name}
|
||||
input={input}
|
||||
type={type}
|
||||
display={view(values[name])}
|
||||
className={classnames(colClasses)}
|
||||
size={size}
|
||||
textAlign={textAlign}
|
||||
inputProps={inputProps}
|
||||
editing={editing}
|
||||
/>
|
||||
// <Td size={sizes.cashOut1} textAlign="right">
|
||||
// <Field
|
||||
// editing={editing}
|
||||
// field={fields[CASSETTE_1_KEY]}
|
||||
// displayValue={x => (x === '' ? '-' : x)}
|
||||
// decoration="%"
|
||||
// className={classes.eRowField}
|
||||
// setError={setError}
|
||||
// />
|
||||
// </Td>
|
||||
)
|
||||
)(R.tail(element))}
|
||||
</CellDoubleLevel>
|
||||
)
|
||||
}
|
||||
|
||||
const {
|
||||
name,
|
||||
input,
|
||||
size,
|
||||
textAlign,
|
||||
type,
|
||||
view = it => it?.toString(),
|
||||
inputProps
|
||||
} = element
|
||||
|
||||
return (
|
||||
<Cell
|
||||
key={idx}
|
||||
name={name}
|
||||
input={input}
|
||||
type={type}
|
||||
display={view(values[name])}
|
||||
className={classnames(colClasses)}
|
||||
size={size}
|
||||
textAlign={textAlign}
|
||||
inputProps={inputProps}
|
||||
editing={editing}
|
||||
/>
|
||||
// <Td key={idx} size={size} textAlign={textAlign}>
|
||||
// {editing && (
|
||||
// <Field
|
||||
// id={name}
|
||||
// name={name}
|
||||
// component={input}
|
||||
// className={classnames(colClasses)}
|
||||
// {...inputProps}
|
||||
// />
|
||||
// )}
|
||||
// {!editing && type === 'text' && (
|
||||
// <TextInputDisplay
|
||||
// display={view(values[name])}
|
||||
// {...inputProps}
|
||||
// />
|
||||
// )}
|
||||
// </Td>
|
||||
)
|
||||
})}
|
||||
<Td size={actionCol.size} className={classnames(actionColClasses)}>
|
||||
{!editing && !disableAction && (
|
||||
<button
|
||||
type="button"
|
||||
className={classes.button}
|
||||
onClick={() => action(values)}>
|
||||
{icon(actionCol.name, disableAction)}
|
||||
</button>
|
||||
)}
|
||||
{!editing && disableAction && (
|
||||
<div>{icon(actionCol.name, disableAction)}</div>
|
||||
)}
|
||||
{editing && (
|
||||
<>
|
||||
<Link color="secondary" type="reset">
|
||||
Cancel
|
||||
</Link>
|
||||
<Link color="primary" type="submit">
|
||||
Save
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
)}
|
||||
{!editing && enableEdit && (
|
||||
<Td textAlign="right" width={actionColSize}>
|
||||
<IconButton
|
||||
disabled={disabled}
|
||||
className={classes.editButton}
|
||||
onClick={() => setEditing && setEditing(values.id)}>
|
||||
{disabled ? <DisabledEditIcon /> : <EditIcon />}
|
||||
</IconButton>
|
||||
</Td>
|
||||
</Tr>
|
||||
)
|
||||
}
|
||||
)
|
||||
)}
|
||||
{!editing && enableDelete && (
|
||||
<Td textAlign="right" width={actionColSize}>
|
||||
<IconButton disabled={disabled} onClick={() => onDelete(values.id)}>
|
||||
{disabled ? <DisabledDeleteIcon /> : <DeleteIcon />}
|
||||
</IconButton>
|
||||
</Td>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const ERowWithFormik = memo(
|
||||
({
|
||||
initialValues,
|
||||
validationSchema,
|
||||
save,
|
||||
reset,
|
||||
action,
|
||||
elements,
|
||||
editing,
|
||||
disableAction
|
||||
}) => {
|
||||
return (
|
||||
<Formik
|
||||
enableReinitialize
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={save}
|
||||
onReset={reset}>
|
||||
<Form>
|
||||
<ERow
|
||||
elements={elements}
|
||||
editing={editing}
|
||||
disableAction={disableAction}
|
||||
action={action}
|
||||
/>
|
||||
</Form>
|
||||
</Formik>
|
||||
)
|
||||
}
|
||||
)
|
||||
const ECol = ({ editing, config }) => {
|
||||
const {
|
||||
name,
|
||||
input,
|
||||
size,
|
||||
bold,
|
||||
width,
|
||||
textAlign,
|
||||
suffix,
|
||||
view = it => it?.toString(),
|
||||
inputProps = {}
|
||||
} = config
|
||||
|
||||
export default ERowWithFormik
|
||||
const { values } = useFormikContext()
|
||||
const classes = useStyles({ textAlign, size })
|
||||
|
||||
const viewClasses = {
|
||||
[classes.bold]: bold,
|
||||
[classes.size]: true
|
||||
}
|
||||
|
||||
const iProps = {
|
||||
fullWidth: true,
|
||||
size,
|
||||
bold,
|
||||
textAlign,
|
||||
...inputProps
|
||||
}
|
||||
|
||||
// Autocomplete
|
||||
if (iProps.options && !iProps.getLabel) {
|
||||
iProps.getLabel = view
|
||||
}
|
||||
|
||||
return (
|
||||
<Td
|
||||
className={{ [classes.withSuffix]: suffix }}
|
||||
width={width}
|
||||
size={size}
|
||||
textAlign={textAlign}>
|
||||
{editing && <Field name={name} component={input} {...iProps} />}
|
||||
{!editing && values && (
|
||||
<div className={classnames(viewClasses)}>{view(values[name])}</div>
|
||||
)}
|
||||
{suffix && <TL2 className={classes.suffix}>{suffix}</TL2>}
|
||||
</Td>
|
||||
)
|
||||
}
|
||||
|
||||
const ERow = ({
|
||||
elements,
|
||||
enableEdit,
|
||||
enableDelete,
|
||||
onDelete,
|
||||
editing,
|
||||
setEditing,
|
||||
disabled
|
||||
}) => {
|
||||
const { errors } = useFormikContext()
|
||||
|
||||
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}
|
||||
/>
|
||||
)}
|
||||
</Tr>
|
||||
)
|
||||
}
|
||||
|
||||
export default ERow
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue