108 lines
3.5 KiB
JavaScript
108 lines
3.5 KiB
JavaScript
import { makeStyles } from '@material-ui/core/styles'
|
|
import React, { useState, memo } from 'react'
|
|
|
|
import { Link } from 'src/components/buttons'
|
|
import { RadioGroup } from 'src/components/inputs'
|
|
import { Table, TableBody, TableRow, TableCell } from 'src/components/table'
|
|
import BooleanCell from 'src/components/tables/BooleanCell'
|
|
import { H4 } from 'src/components/typography'
|
|
import { ReactComponent as EditIconDisabled } from 'src/styling/icons/action/edit/disabled.svg'
|
|
import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
|
|
|
|
import { booleanPropertiesTableStyles } from './BooleanPropertiesTable.styles'
|
|
|
|
const useStyles = makeStyles(booleanPropertiesTableStyles)
|
|
|
|
const BooleanPropertiesTable = memo(
|
|
({ title, disabled, data, elements, save }) => {
|
|
const [editing, setEditing] = useState(false)
|
|
const [radioGroupValues, setRadioGroupValues] = useState(elements)
|
|
|
|
const classes = useStyles()
|
|
|
|
const innerSave = () => {
|
|
radioGroupValues.forEach(element => {
|
|
data[element.name] = element.value
|
|
})
|
|
|
|
save(data)
|
|
setEditing(false)
|
|
}
|
|
|
|
const innerCancel = () => {
|
|
setEditing(false)
|
|
}
|
|
|
|
const handleRadioButtons = (elementName, newValue) => {
|
|
setRadioGroupValues(
|
|
radioGroupValues.map(element =>
|
|
element.name === elementName
|
|
? { ...element, value: newValue }
|
|
: element
|
|
)
|
|
)
|
|
}
|
|
|
|
const radioButtonOptions = [
|
|
{ label: 'Yes', value: true },
|
|
{ label: 'No', value: false }
|
|
]
|
|
|
|
if (!elements || radioGroupValues?.length === 0) return null
|
|
|
|
return (
|
|
<div className={classes.booleanPropertiesTableWrapper}>
|
|
<div className={classes.rowWrapper}>
|
|
<H4>{title}</H4>
|
|
{editing ? (
|
|
<div className={classes.rightAligned}>
|
|
<Link onClick={innerCancel} color="secondary">
|
|
Cancel
|
|
</Link>
|
|
<Link
|
|
className={classes.rightLink}
|
|
onClick={innerSave}
|
|
color="primary">
|
|
Save
|
|
</Link>
|
|
</div>
|
|
) : (
|
|
<div className={classes.transparentButton}>
|
|
<button disabled={disabled} onClick={() => setEditing(true)}>
|
|
{disabled ? <EditIconDisabled /> : <EditIcon />}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<Table className={classes.fillColumn}>
|
|
<TableBody className={classes.fillColumn}>
|
|
{radioGroupValues &&
|
|
radioGroupValues.map((element, idx) => (
|
|
<TableRow key={idx} size="sm" className={classes.tableRow}>
|
|
<TableCell className={classes.tableCell}>
|
|
{element.display}
|
|
{editing && (
|
|
<RadioGroup
|
|
options={radioButtonOptions}
|
|
value={element.value}
|
|
onChange={event =>
|
|
handleRadioButtons(
|
|
element.name,
|
|
event.target.value === 'true'
|
|
)
|
|
}
|
|
className={classes.radioButtons}
|
|
/>
|
|
)}
|
|
{!editing && <BooleanCell value={element.value} />}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
)
|
|
}
|
|
)
|
|
|
|
export default BooleanPropertiesTable
|