green background on new Rows on edit tables
This commit is contained in:
parent
dee7dde195
commit
a74aaaad41
4 changed files with 21 additions and 3 deletions
|
|
@ -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 (
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue