From 9232ab8c56bbb180a1c01583f0639f661a296a1a Mon Sep 17 00:00:00 2001 From: klotske Date: Fri, 13 Jan 2023 17:38:52 +0300 Subject: [PATCH 1/9] Extract Slider Label to own component --- .../components/Survey/LabelSliderGroup.tsx | 60 +++++++++++++++++ website/src/components/Tasks/LabelTask.tsx | 65 ++----------------- 2 files changed, 64 insertions(+), 61 deletions(-) create mode 100644 website/src/components/Survey/LabelSliderGroup.tsx diff --git a/website/src/components/Survey/LabelSliderGroup.tsx b/website/src/components/Survey/LabelSliderGroup.tsx new file mode 100644 index 00000000..f7b54807 --- /dev/null +++ b/website/src/components/Survey/LabelSliderGroup.tsx @@ -0,0 +1,60 @@ +import { Grid, Slider, SliderFilledTrack, SliderThumb, SliderTrack, useColorMode } from "@chakra-ui/react"; +import { useId, useState } from "react"; +import { colors } from "styles/Theme/colors"; + +// TODO: consolidate with FlaggableElement +interface LabelSliderGroupProps { + labelIDs: Array; + onChange: (sliderValues: number[]) => unknown; + isDisabled?: boolean; +} + +export const LabelSliderGroup = ({ labelIDs, onChange, isDisabled }: LabelSliderGroupProps) => { + const [sliderValues, setSliderValues] = useState(Array.from({ length: labelIDs.length }).map(() => 0)); + + return ( + + {labelIDs.map((labelId, idx) => ( + { + const newState = sliderValues.slice(); + newState[idx] = sliderValue; + onChange(sliderValues); + setSliderValues(newState); + }} + isDisabled={isDisabled} + /> + ))} + + ); +}; + +function CheckboxSliderItem(props: { + labelId: string; + sliderValue: number; + sliderHandler: (newVal: number) => unknown; + isDisabled: boolean; +}) { + const id = useId(); + const { colorMode } = useColorMode(); + + const labelTextClass = colorMode === "light" ? `text-${colors.light.text}` : `text-${colors.dark.text}`; + + return ( + <> + + props.sliderHandler(val / 100)}> + + + + + + + ); +} diff --git a/website/src/components/Tasks/LabelTask.tsx b/website/src/components/Tasks/LabelTask.tsx index ea56ab34..191a47d1 100644 --- a/website/src/components/Tasks/LabelTask.tsx +++ b/website/src/components/Tasks/LabelTask.tsx @@ -1,12 +1,12 @@ -import { Box, Grid, Slider, SliderFilledTrack, SliderThumb, SliderTrack } from "@chakra-ui/react"; -import { Text, useColorMode, useColorModeValue } from "@chakra-ui/react"; -import { useEffect, useId, useState } from "react"; +import { Box } from "@chakra-ui/react"; +import { Text, useColorModeValue } from "@chakra-ui/react"; +import { useEffect, useState } from "react"; import { MessageView } from "src/components/Messages"; import { MessageTable } from "src/components/Messages/MessageTable"; import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards"; import { TaskSurveyProps } from "src/components/Tasks/Task"; import { TaskType } from "src/types/Task"; -import { colors } from "styles/Theme/colors"; +import { LabelSliderGroup } from "src/components/Survey/LabelSliderGroup"; export const LabelTask = ({ task, @@ -70,60 +70,3 @@ export const LabelTask = ({ ); }; - -// TODO: consolidate with FlaggableElement -interface LabelSliderGroupProps { - labelIDs: Array; - onChange: (sliderValues: number[]) => unknown; - isDisabled?: boolean; -} - -export const LabelSliderGroup = ({ labelIDs, onChange, isDisabled }: LabelSliderGroupProps) => { - const [sliderValues, setSliderValues] = useState(Array.from({ length: labelIDs.length }).map(() => 0)); - - return ( - - {labelIDs.map((labelId, idx) => ( - { - const newState = sliderValues.slice(); - newState[idx] = sliderValue; - onChange(sliderValues); - setSliderValues(newState); - }} - isDisabled={isDisabled} - /> - ))} - - ); -}; - -function CheckboxSliderItem(props: { - labelId: string; - sliderValue: number; - sliderHandler: (newVal: number) => unknown; - isDisabled: boolean; -}) { - const id = useId(); - const { colorMode } = useColorMode(); - - const labelTextClass = colorMode === "light" ? `text-${colors.light.text}` : `text-${colors.dark.text}`; - - return ( - <> - - props.sliderHandler(val / 100)}> - - - - - - - ); -} From 76cdab9876051f8f61b38e430ead1b891240595e Mon Sep 17 00:00:00 2001 From: klotske Date: Fri, 13 Jan 2023 19:09:04 +0300 Subject: [PATCH 2/9] Added LabelSimpleGroup & updated LabelTask --- .../components/Survey/LabelSimpleGroup.tsx | 78 +++++++++++++++++++ website/src/components/Tasks/LabelTask.tsx | 7 +- 2 files changed, 84 insertions(+), 1 deletion(-) create mode 100644 website/src/components/Survey/LabelSimpleGroup.tsx diff --git a/website/src/components/Survey/LabelSimpleGroup.tsx b/website/src/components/Survey/LabelSimpleGroup.tsx new file mode 100644 index 00000000..38ee967c --- /dev/null +++ b/website/src/components/Survey/LabelSimpleGroup.tsx @@ -0,0 +1,78 @@ +import { Box, Button, Flex, useColorMode } from "@chakra-ui/react"; +import { useId, useState } from "react"; +import { colors } from "src/styles/Theme/colors"; + +interface LabelSimpleGroupProps { + labelIDs: Array; + onChange: (sliderValues: number[]) => unknown; + isDisabled?: boolean; +} + +export const LabelSimpleGroup = (props: LabelSimpleGroupProps) => { + const [labelValues, setLabelValues] = useState(Array.from({ length: props.labelIDs.length }).map(() => 0)); + + return ( + + {props.labelIDs.map((labelId, idx) => ( + { + const newState = labelValues.slice(); + newState[idx] = newValue; + props.onChange(labelValues); + setLabelValues(newState); + }} + states={[ + { text: "No", value: 0 }, + { text: "Yes", value: 1 }, + ]} + isDisabled={props.isDisabled} + /> + ))} + + ); +}; + +interface ButtonState { + text: string; + value: number; +} + +interface LabelSimpleItemProps { + labelId: string; + labelValue: number; + clickHandler: (newVal: number) => unknown; + states: ButtonState[]; + isDisabled: boolean; +} + +const LabelSimpleItem = (props: LabelSimpleItemProps) => { + const id = useId(); + const { colorMode } = useColorMode(); + + const labelTextClass = colorMode === "light" ? `text-${colors.light.text}` : `text-${colors.dark.text}`; + + return ( + + + + {props.states.map((item, idx) => ( + + ))} + + + ); +}; diff --git a/website/src/components/Tasks/LabelTask.tsx b/website/src/components/Tasks/LabelTask.tsx index 191a47d1..0d43effd 100644 --- a/website/src/components/Tasks/LabelTask.tsx +++ b/website/src/components/Tasks/LabelTask.tsx @@ -7,6 +7,7 @@ import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards"; import { TaskSurveyProps } from "src/components/Tasks/Task"; import { TaskType } from "src/types/Task"; import { LabelSliderGroup } from "src/components/Survey/LabelSliderGroup"; +import { LabelSimpleGroup } from "src/components/Survey/LabelSimpleGroup"; export const LabelTask = ({ task, @@ -65,7 +66,11 @@ export const LabelTask = ({ )} - + {valid_labels.length === 1 ? ( + + ) : ( + + )} ); From f4742585cb7afffbc06ec08a9955a913e4d54c8e Mon Sep 17 00:00:00 2001 From: klotske Date: Fri, 13 Jan 2023 19:20:01 +0300 Subject: [PATCH 3/9] Add configurable colorScheme --- website/src/components/Survey/LabelSimpleGroup.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/website/src/components/Survey/LabelSimpleGroup.tsx b/website/src/components/Survey/LabelSimpleGroup.tsx index 38ee967c..18980983 100644 --- a/website/src/components/Survey/LabelSimpleGroup.tsx +++ b/website/src/components/Survey/LabelSimpleGroup.tsx @@ -25,8 +25,8 @@ export const LabelSimpleGroup = (props: LabelSimpleGroupProps) => { setLabelValues(newState); }} states={[ - { text: "No", value: 0 }, - { text: "Yes", value: 1 }, + { text: "No", value: 0, colorScheme: "green" }, + { text: "Yes", value: 1, colorScheme: "red" }, ]} isDisabled={props.isDisabled} /> @@ -38,6 +38,7 @@ export const LabelSimpleGroup = (props: LabelSimpleGroupProps) => { interface ButtonState { text: string; value: number; + colorScheme: string; } interface LabelSimpleItemProps { @@ -63,7 +64,7 @@ const LabelSimpleItem = (props: LabelSimpleItemProps) => { {props.states.map((item, idx) => (