fix: 🐛 图片大小的筛选问题

✅ Closes: #88
meetqy · Mar 6, 2023 · dc01e32 · dc01e32
1 parent dbdd523
commit dc01e32
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 8 deletions.
diff --git a/components/JustifyLayout/Search.tsx b/components/JustifyLayout/Search.tsx
@@ -76,6 +76,7 @@ const JustifyLayoutSearch = (props: Props) => {
             {!hidden && (
               <Col>
                 <SearchModule.Size
+                  value={params.size}
                   onChange={(e) =>
                     onChange({
                       ...params,

diff --git a/components/JustifyLayout/SearchModule/Size.tsx b/components/JustifyLayout/SearchModule/Size.tsx
@@ -1,9 +1,11 @@
 import { CaretDownOutlined } from "@ant-design/icons";
 import { Col, InputNumber, Popover, Row, Typography } from "antd";
-import { useMemo, useState } from "react";
+import _ from "lodash";
+import { useEffect, useMemo, useState } from "react";
 
 interface Props {
-  onChange?: (value: EagleUse.SearchParams["size"]) => void;
+  value: EagleUse.SearchParams["size"];
+  onChange: (value: EagleUse.SearchParams["size"]) => void;
 }
 
 const Size = (props: Props) => {
@@ -18,17 +20,24 @@ const Size = (props: Props) => {
     },
   });
 
+  useEffect(() => {
+    if (_.isEqual(props.value, value)) return;
+    if (!props.value) return;
+
+    setValue(props.value);
+  }, [props.value, value]);
+
   const changeValue = (
     e: number,
     size: "width" | "height",
     type: "min" | "max"
   ) => {
-    value[size][type] = e;
+    const newValue = JSON.parse(JSON.stringify(value));
+    newValue[size][type] = e;
     setValue({
       ...value,
+      [size]: newValue[size],
     });
-
-    props?.onChange(value);
   };
 
   const text = useMemo(() => {
@@ -69,6 +78,7 @@ const Size = (props: Props) => {
               <InputNumber
                 value={value.width.min}
                 onChange={(e) => changeValue(e, "width", "min")}
+                onBlur={() => props?.onChange(value)}
                 placeholder="最小"
                 size="small"
                 min={0}
@@ -77,6 +87,7 @@ const Size = (props: Props) => {
               <InputNumber
                 value={value.width.max}
                 onChange={(e) => changeValue(e, "width", "max")}
+                onBlur={() => props?.onChange(value)}
                 placeholder="最大"
                 size="small"
                 min={0}
@@ -89,6 +100,7 @@ const Size = (props: Props) => {
               <InputNumber
                 value={value.height.min}
                 onChange={(e) => changeValue(e, "height", "min")}
+                onBlur={() => props?.onChange(value)}
                 placeholder="最小"
                 size="small"
                 min={0}
@@ -97,6 +109,7 @@ const Size = (props: Props) => {
               <InputNumber
                 value={value.height.max}
                 onChange={(e) => changeValue(e, "height", "max")}
+                onBlur={() => props?.onChange(value)}
                 placeholder="最大"
                 size="small"
                 min={0}

diff --git a/components/JustifyLayout/index.tsx b/components/JustifyLayout/index.tsx
@@ -65,7 +65,6 @@ const JustifyLayout = ({ infiniteScroll, header }: Props) => {
   useEffect(() => {
     if (!size || !size.width) return;
     const clientWidth = size.width;
-    console.log(images);
     setLayoutPos(
       justifyLayout([...images], {
         containerWidth:

diff --git a/hooks/prismaInput.ts b/hooks/prismaInput.ts
@@ -8,7 +8,7 @@ export const handleOrderBy = ({ orderBy }: EagleUse.SearchParams) => {
 
 // 尺寸
 export const handleSize = ({ size }: EagleUse.SearchParams) => {
-  if (!size) return undefined;
+  if (!size) return [];
 
   const { width, height } = size;
 

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -35,7 +35,7 @@ function getLoadMoreList(params: Params): Promise<Result> {
       body: JSON.stringify({
         where: {
           AND: [
-            handleSize({ size: body.size }),
+            ...handleSize({ size: body.size }),
             !_.isEmpty(body.tags)
               ? { tags: { some: { id: { in: body.tags } } } }
               : undefined,