Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | 1x 1x 1x 23x 23x 23x 23x 23x 23x 10x 23x 23x 3x 3x 3x 3x 3x 23x 2x 2x 1x 1x 2x 23x 16x 16x 16x 16x 16x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x | import React, { useState, useEffect } from "react";
import { Form, Button, Row, Col } from "react-bootstrap";
export default function CommonsFeaturesForm({
features = {},
onSubmit,
buttonLabel = "Save",
}) {
const [localFeatures, setLocalFeatures] = useState({});
useEffect(() => {
setLocalFeatures({ ...features });
}, [features]);
const handleCheckboxChange = (featureName) => {
setLocalFeatures((prev) => ({
...prev,
[featureName]: !prev[featureName],
}));
};
const handleSubmit = (e) => {
e.preventDefault();
if (onSubmit) {
onSubmit(localFeatures);
}
};
const formatFeatureName = (featureName) => {
return featureName
.split("_")
.map((word) => word.charAt(0) + word.slice(1).toLowerCase())
.join(" ");
};
return (
<Form onSubmit={handleSubmit}>
<Row>
{Object.keys(localFeatures).map((featureName) => (
<Col key={featureName} md={6} className="mb-3">
<Form.Group>
<Form.Check
type="checkbox"
id={featureName}
label={formatFeatureName(featureName)}
checked={localFeatures[featureName] || false}
onChange={() => handleCheckboxChange(featureName)}
data-testid={`CommonsFeaturesForm-${featureName}`}
/>
</Form.Group>
</Col>
))}
</Row>
<Row>
<Col>
<Button
type="submit"
variant="primary"
data-testid="CommonsFeaturesForm-Submit-Button"
>
{buttonLabel}
</Button>
</Col>
</Row>
</Form>
);
}
|