-
Notifications
You must be signed in to change notification settings - Fork 1
/
channel.switch.tsx
85 lines (77 loc) · 2.85 KB
/
channel.switch.tsx
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
import { CHANNEL_SWITCH_STYLES } from "@features/images/images.constants";
import { Channel } from "@graphql/generated/codegen.generated";
import { InputWrapper, Switch } from "@mantine/core";
import { useEffect, useState } from "react";
import type {
ChannelSwitchStateType,
ChannelSwitchType,
} from "@features/images/images.types";
import type { UseForm } from "@mantine/hooks/lib/use-form/use-form";
export type ChannelSwitchesProps<T extends { channel?: Channel }> = {
form: UseForm<T>;
required?: boolean;
disabled?: boolean;
};
const ChannelSwitches = <T extends { channel?: Channel }>({
form,
required,
disabled,
}: ChannelSwitchesProps<T>): JSX.Element => {
const [redChecked, setRedChecked] = useState(true);
const [greenChecked, setGreenChecked] = useState(true);
const [blueChecked, setBlueChecked] = useState(true);
const switchStates: ChannelSwitchStateType[] = [
{ checked: redChecked, setChecked: setRedChecked },
{ checked: greenChecked, setChecked: setGreenChecked },
{ checked: blueChecked, setChecked: setBlueChecked },
];
const switches: ChannelSwitchType[] = CHANNEL_SWITCH_STYLES.map(
(style, index) => {
return { style, state: switchStates[index] };
},
);
useEffect(() => {
let updatedChannel: Channel | undefined;
if (redChecked && greenChecked && blueChecked) {
updatedChannel = Channel.RedGreenBlue;
} else if (redChecked && greenChecked && !blueChecked) {
updatedChannel = Channel.RedGreen;
} else if (redChecked && !greenChecked && blueChecked) {
updatedChannel = Channel.RedBlue;
} else if (redChecked && !greenChecked && !blueChecked) {
updatedChannel = Channel.Red;
} else if (!redChecked && greenChecked && blueChecked) {
updatedChannel = Channel.GreenBlue;
} else if (!redChecked && greenChecked && !blueChecked) {
updatedChannel = Channel.Green;
} else if (!redChecked && !greenChecked && blueChecked) {
updatedChannel = Channel.Blue;
}
form.setFieldValue(`channel`, updatedChannel);
form.validateField(`channel`);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [blueChecked, greenChecked, redChecked]);
return (
<InputWrapper
required={required}
label="Color channels"
description="Chosen channels will be used when encoding data into your image."
error={form.errors.channel}
>
{switches.map((channelSwitch, index) => (
<Switch
key={index}
label={channelSwitch.style.label}
color={channelSwitch.style.color}
checked={channelSwitch.state.checked}
onChange={(event) =>
channelSwitch.state.setChecked(event.currentTarget.checked)
}
onBlur={() => form.validateField(`channel`)}
disabled={disabled}
/>
))}
</InputWrapper>
);
};
export default ChannelSwitches;