green background on new Rows on edit tables

This commit is contained in:
mrSnow95 2021-02-22 14:22:14 +00:00
parent dee7dde195
commit a74aaaad41
4 changed files with 21 additions and 3 deletions

View file

@ -202,7 +202,7 @@ const groupStriped = elements => {
) )
} }
const ERow = ({ editing, disabled, lastOfGroup }) => { const ERow = ({ editing, disabled, lastOfGroup, newRow }) => {
const { touched, errors, values } = useFormikContext() const { touched, errors, values } = useFormikContext()
const { const {
elements, elements,
@ -249,6 +249,7 @@ const ERow = ({ editing, disabled, lastOfGroup }) => {
className={classnames(classNames)} className={classnames(classNames)}
size={rowSize} size={rowSize}
error={editing && hasErrors} error={editing && hasErrors}
newRow={newRow && !hasErrors}
errorMessage={errorMessage}> errorMessage={errorMessage}>
{innerElements.map((it, idx) => { {innerElements.map((it, idx) => {
return ( return (

View file

@ -191,7 +191,11 @@ const ETable = ({
onSubmit={innerSave}> onSubmit={innerSave}>
<Form> <Form>
<PromptWhenDirty /> <PromptWhenDirty />
<ERow editing={true} disabled={forceDisable} /> <ERow
editing={true}
disabled={forceDisable}
newRow={true}
/>
</Form> </Form>
</Formik> </Formik>
)} )}

View file

@ -75,13 +75,22 @@ const ThDoubleLevel = ({ title, children, className, width }) => {
) )
} }
const Tr = ({ onClick, error, errorMessage, children, className, size }) => { const Tr = ({
onClick,
error,
errorMessage,
children,
className,
size,
newRow
}) => {
const classes = useStyles({ size }) const classes = useStyles({ size })
const cardClasses = { root: classes.cardContentRoot } const cardClasses = { root: classes.cardContentRoot }
const classNames = { const classNames = {
[classes.tr]: true, [classes.tr]: true,
[classes.trError]: error, [classes.trError]: error,
[classes.card]: true, [classes.card]: true,
[classes.trAdding]: newRow,
className className
} }

View file

@ -4,6 +4,7 @@ import {
tableHeaderColor, tableHeaderColor,
tableHeaderHeight, tableHeaderHeight,
tableErrorColor, tableErrorColor,
tableSuccessColor,
spacer, spacer,
white, white,
tableDoubleHeaderHeight, tableDoubleHeaderHeight,
@ -71,6 +72,9 @@ export default {
trError: { trError: {
backgroundColor: tableErrorColor backgroundColor: tableErrorColor
}, },
trAdding: {
backgroundColor: tableSuccessColor
},
mainContent: ({ size }) => { mainContent: ({ size }) => {
const sizes = { const sizes = {
sm: 34, sm: 34,