feat: redesign settings page

2025-09-07 16:47:03 +08:00 · 2024-04-24 15:44:24 +08:00
parent f7074bba8c
commit c99086447e
55 changed files with 2603 additions and 1446 deletions
--- a/app/components/Select/index.tsx
+++ b/app/components/Select/index.tsx
@@ -0,0 +1,104 @@
+import SelectIcon from "@/app/icons/downArrowIcon.svg";
+import Popover from "@/app/components/Popover";
+import React, { useContext, useMemo, useRef } from "react";
+import useRelativePosition, {
+  Orientation,
+} from "@/app/hooks/useRelativePosition";
+import List from "@/app/components/List";
+
+export type Option<Value> = {
+  value: Value;
+  label: string;
+  icon?: React.ReactNode;
+};
+
+export interface SearchProps<Value> {
+  value?: string;
+  onSelect?: (v: Value) => void;
+  options?: Option<Value>[];
+  inMobile?: boolean;
+}
+
+const Select = <Value extends number | string>(props: SearchProps<Value>) => {
+  const { value, onSelect, options = [], inMobile } = props;
+
+  const { isMobileScreen, selectClassName } = useContext(List.ListContext);
+
+  const optionsRef = useRef<Option<Value>[]>([]);
+  optionsRef.current = options;
+  const selectedOption = useMemo(
+    () => optionsRef.current.find((o) => o.value === value),
+    [value],
+  );
+
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const { position, getRelativePosition } = useRelativePosition({
+    delay: 0,
+  });
+
+  let headerH = 100;
+  let baseH = position?.poi.distanceToBottomBoundary || 0;
+  if (isMobileScreen) {
+    headerH = 60;
+  }
+  if (position?.poi.relativePosition[1] === Orientation.bottom) {
+    baseH = position?.poi.distanceToTopBoundary;
+  }
+
+  const maxHeight = `${baseH - headerH}px`;
+
+  const content = (
+    <div
+      className={`px-2 py-2 flex flex-col gap-1 overflow-y-auto overflow-x-hidden`}
+      style={{ maxHeight }}
+    >
+      {options?.map((o) => (
+        <div
+          key={o.value}
+          className={`flex  items-center p-3 gap-2 ${
+            selectedOption?.value === o.value ? "bg-gray-100 rounded-md" : ""
+          }`}
+          onClick={() => {
+            onSelect?.(o.value);
+          }}
+        >
+          {!!o.icon && <div className="">{o.icon}</div>}
+          <div className={`flex-1`}>{o.label}</div>
+        </div>
+      ))}
+    </div>
+  );
+
+  return (
+    <Popover
+      content={content}
+      trigger="click"
+      noArrow
+      placement={
+        position?.poi.relativePosition[1] !== Orientation.bottom ? "rb" : "rt"
+      }
+      popoverClassName="border-actions-popover border-gray-200 rounded-md shadow-actions-popover w-actions-popover  bg-white"
+      onShow={(e) => {
+        getRelativePosition(contentRef.current!, "");
+      }}
+    >
+      <div
+        className={`flex items-center gap-3 py-2 px-3 bg-gray-100 rounded-action-btn font-time text-sm-title ${selectClassName}`}
+        ref={contentRef}
+      >
+        <div className={`flex items-center gap-2 flex-1`}>
+          {!!selectedOption?.icon && (
+            <div className={``}>{selectedOption?.icon}</div>
+          )}
+          <div className={`flex-1`}>{selectedOption?.label}</div>
+        </div>
+        <div className={``}>
+          <SelectIcon />
+        </div>
+      </div>
+    </Popover>
+  );
+};
+
+export default Select;