7x31/ChatGPT-Next-Web
1
0
Fork 0
mirror of https://github.com/Yidadaa/ChatGPT-Next-Web.git synced 2025-09-07 08:37:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: optiminize

Browse Source
This commit is contained in:
butterfly
2024-04-26 01:31:03 +08:00
parent 59583e53bd
commit 48e8c0a194
30 changed files with 304 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/components/SlideRange/index.tsx
View File

@@ -1,5 +1,6 @@
import { useContext, useEffect, useRef } from "react";
import { ListContext } from "../List";
import { ListContext } from "@/app/components/List";
import useResizeObserver from "use-resize-observer";
interface SlideRangeProps {
className?: string;
@@ -30,11 +31,15 @@ export default function SlideRange(props: SlideRangeProps) {
const slideRef = useRef<HTMLDivElement>(null);
const { ref, width = 1 } = useResizeObserver<HTMLDivElement>();
ref(slideRef.current);
const transformToWidth = (x: number = start) => {
const abs = x - start;
const maxWidth = (slideRef.current?.clientWidth || 1) - margin * 2;
const radio = stroke / maxWidth;
return abs / radio;
const maxWidth = width - margin * 2;
const result = (abs / stroke) * maxWidth;
return result;
};
const setProperty = (value?: number) => {
@@ -44,37 +49,36 @@ export default function SlideRange(props: SlideRangeProps) {
`${initWidth + margin}px`,
);
};
useEffect(() => {
setProperty(value);
update?.({ type: "range" });
}, []);
}, [width]);
return (
<div
className={`flex flex-col justify-center items-end gap-1 w-[100%] ${className} ${rangeClassName}`}
>
{!!description && (
<div className="text-text-slider-block text-common text-sm">
<div className="text-text-slider-block text-common text-sm ">
{description}
</div>
)}
<div
className="flex my-1.5 relative w-[100%] h-1.5 bg-slider rounded-slide"
className="flex my-1.5 relative w-[100%] h-1.5 bg-slider rounded-slide cursor-pointer"
ref={slideRef}
>
<div className="absolute top-0 h-[100%] w-[var(--slide-value-size)] pointer-events-none bg-slider-slided-travel rounded-slide">
<div className="cursor-pointer absolute marker:top-0 h-[100%] w-[var(--slide-value-size)] bg-slider-slided-travel rounded-slide">
&nbsp;
</div>
<div
className=" absolute w-[30px] top-[50%] translate-y-[-50%] left-[var(--slide-value-size)] translate-x-[-50%] pointer-events-none h-slide-btn leading-slide-btn text-sm-mobile text-center rounded-slide border border-slider-block bg-slider-block"
className="cursor-pointer absolute z-1 w-[30px] top-[50%] translate-y-[-50%] left-[var(--slide-value-size)] translate-x-[-50%] h-slide-btn leading-slide-btn text-sm-mobile text-center rounded-slide border border-slider-block bg-slider-block"
// onPointerDown={onPointerDown}
>
{value}
</div>
<input
type="range"
className="w-[100%] h-[100%] opacity-0"
className="w-[100%] h-[100%] opacity-0 cursor-pointer"
value={value}
min={start}
max={start + stroke}