feat: page input

Oc1S · Jun 26, 2024 · 82aee62 · 82aee62
1 parent dfdc4c2
commit 82aee62
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 6 deletions.
diff --git a/pages/popup/src/Popup.tsx b/pages/popup/src/Popup.tsx
@@ -332,9 +332,7 @@ const Popup = () => {
 
                 {[StatusEnum.BeforeDownload].includes(status) && (
                   <div className="fixed bottom-40 flex flex-col items-center">
-                    {range[1] > 0 && (
-                      <PageSelector range={range} maxValue={totalImages} onChangeEnd={setRange as any} />
-                    )}
+                    {range[1] > 0 && <PageSelector range={range} setRange={setRange} maxValue={totalImages} />}
                     <Button
                       color="primary"
                       hidden={isBtnVisible}

diff --git a/pages/popup/src/components/PageSelector/index.tsx b/pages/popup/src/components/PageSelector/index.tsx
@@ -1,23 +1,60 @@
-import { Slider, SliderProps } from '@nextui-org/react';
+import { Input, Slider, SliderProps } from '@nextui-org/react';
 import clsx from 'clsx';
 import { FC } from 'react';
 
 type PageSelectorProps = {
   range: [number, number];
+  setRange: (range: [number, number]) => void;
 } & SliderProps;
 
-export const PageSelector: FC<PageSelectorProps> = ({ range, ...rest }) => {
+export const PageSelector: FC<PageSelectorProps> = ({ range, maxValue, setRange, ...rest }) => {
   return (
     <Slider
       label="Page Range"
+      renderValue={() => {
+        return (
+          <div className="flex items-center gap-0.5">
+            {/* start */}
+            <Input
+              type="number"
+              min={1}
+              value={String(range[0])}
+              max={range[1]}
+              size="sm"
+              onChange={e => {
+                const { value } = e.target;
+                range[0] = Number(value);
+                setRange([...range]);
+              }}
+            />
+            -{/* end */}
+            <Input
+              type="number"
+              min={range[0]}
+              value={String(range[1])}
+              max={maxValue}
+              size="sm"
+              onChange={e => {
+                const { value } = e.target;
+                range[1] = Number(value);
+                setRange([...range]);
+              }}
+            />
+          </div>
+        );
+      }}
       minValue={1}
       step={1}
-      defaultValue={range}
+      value={range}
       classNames={{
         base: 'w-60 gap-3',
         filler: 'bg-gradient-to-r from-secondary to-primary h-4',
         track: 'border-x-4 h-4',
       }}
+      onChange={val => {
+        setRange(val as [number, number]);
+      }}
+      maxValue={maxValue}
       renderThumb={({ index, ...props }) => (
         <div
           {...props}