feat(web/dialog): add slider input type (#69)

web/src/features/dialog/InputDialog.tsx

@@ -13,15 +13,16 @@ import { useKeyPress } from "../../hooks/useKeyPress";
 import { useLocales } from "../../providers/LocaleProvider";
 import { debugData } from "../../utils/debugData";
 import { fetchNui } from "../../utils/fetchNui";
-import { IInput, ICheckbox, ISelect, INumber } from "../../interfaces/dialog";
+import { IInput, ICheckbox, ISelect, INumber, ISlider } from "../../interfaces/dialog";
 import InputField from "./components/input";
 import CheckboxField from "./components/checkbox";
 import SelectField from "./components/select";
 import NumberField from "./components/number";
+import SliderField from "./components/slider";
 
 interface Props {
   heading: string;
-  rows: Array<IInput | ICheckbox | ISelect | INumber>;
+  rows: Array<IInput | ICheckbox | ISelect | INumber | ISlider>;
 }
 
 // debugData<Props>([
@@ -44,6 +45,7 @@ interface Props {
 //           ],
 //         },
 //         { type: "number", label: "Number counter", default: 12 },
+//         { type: "slider", label: "Slide bar", min: 10, max: 50, step: 2 },
 //       ],
 //     },
 //   },
@@ -111,7 +113,7 @@ const InputDialog: React.FC = () => {
         <ModalContent>
           <ModalHeader textAlign="center">{fields.heading}</ModalHeader>
           <ModalBody fontFamily="Poppins" textAlign="left">
-            {fields.rows.map((row: IInput | ICheckbox | ISelect | INumber, index) => (
+            {fields.rows.map((row: IInput | ICheckbox | ISelect | INumber | ISlider, index) => (
               <React.Fragment key={`row-${index}`}>
                 {row.type === "input" && (
                   <InputField
@@ -144,6 +146,13 @@ const InputDialog: React.FC = () => {
                     handleChange={handleChange}
                   />
                 )}
+                {row.type === "slider" && (
+                  <SliderField
+                    row={row}
+                    index={index}
+                    handleChange={handleChange}
+                  />
+                )}
               </React.Fragment>
             ))}
           </ModalBody>

web/src/features/dialog/components/slider.tsx

@@ -0,0 +1,51 @@
+import { Box, Text, Slider, SliderTrack, SliderFilledTrack, SliderThumb, HStack, Tooltip } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import { ISlider } from "../../../interfaces/dialog";
+
+interface Props {
+  row: ISlider;
+  index: number;
+  handleChange: (value: number, index: number) => void;
+}
+
+const SliderField: React.FC<Props> = (props) => {
+  useEffect(() => {
+    if(props.row.default) props.handleChange(props.row.default, props.index);
+  }, []);
+
+  const [sliderValue, setSliderValue] = useState(props.row.default || props.row.min || 0);
+
+  return (
+    <>
+      <Box mb={3} key={`slider-${props.index}`}>
+        <Text>{props.row.label}</Text>
+        <Slider
+          onChangeEnd={(val: number) => props.handleChange(val, props.index)}
+          onChange={(val: number) => setSliderValue(val)}
+          defaultValue={props.row.default || props.row.min || 0}
+          min={props.row.min}
+          max={props.row.max}
+          step={props.row.step}
+        >
+          <SliderTrack>
+            <SliderFilledTrack />
+          </SliderTrack>
+          <Tooltip
+            hasArrow
+            label={sliderValue}
+            placement="bottom"
+            gutter={10}
+          >
+            <SliderThumb />
+          </Tooltip>
+        </Slider>
+        <HStack justifyContent="space-between">
+          <Text fontSize="sm">{props.row.min || 0}</Text>
+          <Text fontSize="sm">{props.row.max || 100}</Text>
+        </HStack>
+      </Box>
+    </>
+  );
+};
+
+export default SliderField;

web/src/interfaces/dialog.ts

@@ -28,3 +28,12 @@ export interface INumber {
   placeholder?: string;
   default?: number;
 }
+
+export interface ISlider {
+  type: "slider",
+  label: string;
+  default?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+}