From 0c1c3ad3db60d7b38863171361e8536841fc72d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Tue, 31 Dec 2024 09:27:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E5=AE=8C=E6=88=90=E9=A2=9C?=
 =?UTF-8?q?=E8=89=B2=E5=88=86=E9=87=8F=E9=80=89=E6=8B=A9=E6=9D=A1=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ColorRangePicker.module.css | 23 +++++++++
 src/components/ColorRangePicker.tsx        | 60 ++++++++++++++++++++++
 2 files changed, 83 insertions(+)
 create mode 100644 src/components/ColorRangePicker.module.css
 create mode 100644 src/components/ColorRangePicker.tsx

diff --git a/src/components/ColorRangePicker.module.css b/src/components/ColorRangePicker.module.css
new file mode 100644
index 0000000..fd5df59
--- /dev/null
+++ b/src/components/ColorRangePicker.module.css
@@ -0,0 +1,23 @@
+@layer components {
+  .picker_container {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+    gap: var(--spacing-xs);
+    .title_row {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      align-items: baseline;
+      label {
+        flex: 1;
+        font-size: var(--font-size-xs);
+      }
+      & > span {
+        text-align: right;
+        font-size: var(--font-size-xs);
+      }
+    }
+  }
+}
diff --git a/src/components/ColorRangePicker.tsx b/src/components/ColorRangePicker.tsx
new file mode 100644
index 0000000..4960c0a
--- /dev/null
+++ b/src/components/ColorRangePicker.tsx
@@ -0,0 +1,60 @@
+import cx from 'clsx';
+import { isEqual } from 'lodash-es';
+import { ChangeEvent, useEffect, useState } from 'react';
+import styles from './ColorRangePicker.module.css';
+
+type ColorRangePickerProps = {
+  title: string;
+  value?: number;
+  onChange: (value: number) => void;
+  startColor: string;
+  endColor: string;
+  min?: number;
+  max: number;
+  step?: number;
+  valueProcess?: (value: number) => number;
+};
+
+export function ColorRangePicker({
+  title,
+  value = 0,
+  onChange,
+  startColor,
+  endColor,
+  min = 0,
+  max = 100,
+  step = 1,
+  valueProcess = (v) => v,
+}: ColorRangePickerProps) {
+  const [pickerValue, setPickerValue] = useState(value);
+  const handlePickerChange = (evt: ChangeEvent<HTMLInputElement>) => {
+    const value = evt.target.value as number;
+    setPickerValue(valueProcess(value));
+    onChange?.(valueProcess(value));
+  };
+
+  useEffect(() => {
+    if (!isEqual(value, pickerValue)) {
+      setPickerValue(value);
+    }
+  }, [value]);
+
+  return (
+    <div className={styles.picker_container}>
+      <div className={styles.title_row}>
+        <label>{title}</label>
+        <span>{pickerValue}</span>
+      </div>
+      <input
+        type="range"
+        className={cx('picker')}
+        value={pickerValue}
+        onChange={handlePickerChange}
+        min={min}
+        max={max}
+        step={step}
+        style={{ background: `linear-gradient(to right, ${startColor} 0%, ${endColor} 100%)` }}
+      />
+    </div>
+  );
+}