Remove old group modal
This commit is contained in:
parent
7b5bbcf05d
commit
5f98b318b5
@ -1,65 +0,0 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
|
||||||
import { Box, Button, Label, Flex } from "theme-ui";
|
|
||||||
|
|
||||||
import Modal from "../components/Modal";
|
|
||||||
import Select from "../components/Select";
|
|
||||||
|
|
||||||
function EditGroupModal({
|
|
||||||
isOpen,
|
|
||||||
onRequestClose,
|
|
||||||
onChange,
|
|
||||||
groups,
|
|
||||||
defaultGroup,
|
|
||||||
}) {
|
|
||||||
const [value, setValue] = useState();
|
|
||||||
const [options, setOptions] = useState([]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (defaultGroup) {
|
|
||||||
setValue({ value: defaultGroup, label: defaultGroup });
|
|
||||||
} else {
|
|
||||||
setValue();
|
|
||||||
}
|
|
||||||
}, [defaultGroup]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setOptions(groups.map((group) => ({ value: group, label: group })));
|
|
||||||
}, [groups]);
|
|
||||||
|
|
||||||
function handleCreate(group) {
|
|
||||||
const newOption = { value: group, label: group };
|
|
||||||
setValue(newOption);
|
|
||||||
setOptions((prev) => [...prev, newOption]);
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleChange() {
|
|
||||||
onChange(value ? value.value : "");
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
isOpen={isOpen}
|
|
||||||
onRequestClose={onRequestClose}
|
|
||||||
style={{ overflow: "visible" }}
|
|
||||||
>
|
|
||||||
<Box onSubmit={handleChange} sx={{ width: "300px" }}>
|
|
||||||
<Label py={2}>Select or add a group</Label>
|
|
||||||
<Select
|
|
||||||
creatable
|
|
||||||
options={options}
|
|
||||||
value={value}
|
|
||||||
onChange={setValue}
|
|
||||||
onCreateOption={handleCreate}
|
|
||||||
placeholder=""
|
|
||||||
/>
|
|
||||||
<Flex py={2}>
|
|
||||||
<Button sx={{ flexGrow: 1 }} onClick={handleChange}>
|
|
||||||
Save
|
|
||||||
</Button>
|
|
||||||
</Flex>
|
|
||||||
</Box>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default EditGroupModal;
|
|
Loading…
Reference in New Issue
Block a user