client,server folders

2024-06-14 13:54:55 +05:00
parent e67512bd6d
commit 158f081b5f
649 changed files with 228 additions and 162 deletions
@@ -0,0 +1,118 @@
+import { useRef, useEffect } from "react";
+import RangeSlider from "react-range-slider-input";
+import { NumericFormat } from "react-number-format";
+import "./multiRangeSlider.css";
+import { IMultirangeSlider } from "../types/multirangeSlider";
+
+interface MultiRangeSliderProps {
+  onChange: (sliderId: string, e: [a: number, b: number]) => void;
+  multirangeSlider: IMultirangeSlider;
+}
+
+const MultiRangeSlider = ({
+  onChange,
+  multirangeSlider,
+}: MultiRangeSliderProps) => {
+  const firstInputRef = useRef(null);
+  const secondInputRef = useRef(null);
+
+  const handleOnRangeInputChange = (e: [a: number, b: number]) => {
+    onChange(multirangeSlider.id, e);
+  };
+
+  const handleOnFirstInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = Number(e.target.value.split(",").join(""));
+    if (
+      value >= multirangeSlider.minValue &&
+      value <= multirangeSlider.maxValue
+    ) {
+      const rangeValue: [a: number, b: number] = [
+        value,
+        multirangeSlider.endValue,
+      ];
+      onChange(multirangeSlider.id, rangeValue);
+    }
+  };
+
+  const handleOnSecondInputChange = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const value = Number(e.target.value.split(",").join(""));
+    if (
+      value >= multirangeSlider.minValue &&
+      value <= multirangeSlider.maxValue
+    ) {
+      const rangeValue: [a: number, b: number] = [
+        multirangeSlider.startValue,
+        value,
+      ];
+      onChange(multirangeSlider.id, rangeValue);
+    }
+  };
+
+  useEffect(() => {
+    if (
+      !firstInputRef.current ||
+      multirangeSlider.startValue === multirangeSlider.minValue
+    )
+      return;
+    (firstInputRef.current as HTMLInputElement).focus();
+  }, [multirangeSlider.startValue]);
+
+  useEffect(() => {
+    if (
+      !secondInputRef.current ||
+      multirangeSlider.maxValue === multirangeSlider.endValue
+    )
+      return;
+    (secondInputRef.current as HTMLInputElement).focus();
+  }, [multirangeSlider.endValue]);
+
+  return (
+    <div className="">
+      <div className="flex justify-between p-3 bg-white rounded-lg relative flex-col">
+        <div className="flex justify-between">
+          {/* <input
+            ref={firstInputRef}
+            key={multirangeSlider.startValue}
+            type="string"
+            onChange={handleOnFirstInputChange}
+            defaultValue={formatNumber(multirangeSlider.startValue, ",", 3, 1)}
+            className="focus:outline-none input_number w-1/2"
+          /> */}
+          <NumericFormat
+            thousandSeparator=","
+            key={multirangeSlider.startValue}
+            onChange={handleOnFirstInputChange}
+            defaultValue={multirangeSlider.startValue}
+            className="focus:outline-none input_number w-1/2"
+          />
+          <NumericFormat
+            thousandSeparator=","
+            key={multirangeSlider.endValue}
+            onChange={handleOnSecondInputChange}
+            defaultValue={multirangeSlider.endValue}
+            className="focus:outline-none input_number w-1/2 text-right"
+          />
+          {/* <input
+            ref={secondInputRef}
+            onChange={handleOnSecondInputChange}
+            key={multirangeSlider.endValue}
+            type="string"
+            defaultValue={formatNumber(multirangeSlider.endValue, ",", 3, 1)}
+            className="focus:outline-none appearance-none input_number text-right w-1/2"
+          /> */}
+        </div>
+        <RangeSlider
+          min={multirangeSlider.minValue}
+          max={multirangeSlider.maxValue}
+          value={[multirangeSlider.startValue, multirangeSlider.endValue]}
+          className="absolute -bottom-3 left-0 w-[calc(100%-16px)] z-20"
+          onInput={handleOnRangeInputChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default MultiRangeSlider;