From 1fce85d49d22e92db5e62f396d01ca1e6e9fe8a1 Mon Sep 17 00:00:00 2001 From: mahdi Date: Wed, 11 May 2022 10:15:20 +0430 Subject: [PATCH] update data.js --- .../arrow-top.png | Bin 0 -> 229 bytes .../VerticalExpandableProductFilter/index.js | 171 ++++++++++++++++++ .../search.png | Bin 0 -> 857 bytes src/components/ProductFilter/index.js | 25 +++ src/redux/data.js | 11 ++ 5 files changed, 207 insertions(+) create mode 100644 src/components/ProductFilter/VerticalExpandableProductFilter/arrow-top.png create mode 100644 src/components/ProductFilter/VerticalExpandableProductFilter/index.js create mode 100644 src/components/ProductFilter/VerticalExpandableProductFilter/search.png create mode 100644 src/components/ProductFilter/index.js diff --git a/src/components/ProductFilter/VerticalExpandableProductFilter/arrow-top.png b/src/components/ProductFilter/VerticalExpandableProductFilter/arrow-top.png new file mode 100644 index 0000000000000000000000000000000000000000..1b296a6563cec4c1f9a16ad37d17d500057591f5 GIT binary patch literal 229 zcmeAS@N?(olHy`uVBq!ia0vp^f*{Pn1|+R>-G2comSQK*5Dp-y;YjHK^5=NEIEGmG zU%lkW*W|#%df~s} { + return lang === "fa" ? option1 : option2; +}; + +export default function VerticalExpandableProductFilter(props) { + const [text, setText] = useState(""); + const [searchResult, setSearchResult] = useState([]); + useEffect(() => { + let fakeSearchResult; + fakeSearchResult = props.list.filter( + (item1) => item1.name.indexOf(text) !== -1 + ); + setSearchResult(fakeSearchResult); + }, [text]); + + return ( +
+ + دسته بندی + +
+ setText(e.target.value)} + /> + + + +
+
    + {(searchResult.length > 0 ? searchResult : props.list)?.map( + (item1, i) => ( +
  • +
    + + + {item1.name} + +
    + {item1.subList?.length > 0 && ( + + )} +
  • + ) + )} +
+
+ ); +} + +VerticalExpandableProductFilter.defaultProps = { + list: [ + { + id: 0, + name: "وسایل آشپزخانه", + expaneded: false, + subList: [], + }, + { + id: 3, + name: "ماشین و موتور سیکلت", + expaneded: false, + subList: [ + { + id: 4, + name: "ماشین", + }, + { + id: 5, + name: "موتور", + }, + ], + }, + { + id: 6, + name: "اتاق خواب", + expaneded: false, + subList: [ + { + id: 7, + name: "کمد", + }, + { + id: 8, + name: "تخت خواب", + }, + ], + }, + { + id: 9, + name: "دکوراسیون و چیدمان", + expaneded: false, + subList: [], + }, + { + id: 10, + name: "وسایل بهداشت شخصی", + expaneded: false, + subList: [ + { + id: 11, + name: "مسواک", + }, + { + id: 12, + name: "حوله", + }, + ], + }, + { + id: 13, + name: "وسایل بهداشت شخصی", + expaneded: false, + subList: [ + { + id: 14, + name: "مسواک", + }, + { + id: 15, + name: "حوله", + }, + ], + }, + { + id: 16, + name: "وسایل بهداشت شخصی", + expaneded: false, + subList: [], + }, + ], +}; diff --git a/src/components/ProductFilter/VerticalExpandableProductFilter/search.png b/src/components/ProductFilter/VerticalExpandableProductFilter/search.png new file mode 100644 index 0000000000000000000000000000000000000000..81d586c7fa7862e5d51c832c1c1a94814283778a GIT binary patch literal 857 zcmV-f1E&0mP)(+L_Ts5c;; zpmc)L3DW=bJ>?Wfw(L0WrFZD=9SN57KK*)6eoAt3#4R~uwv$0{v)SyUEpD=2uix`I zNs^WRyz2Xp`F#F5WbwV>1av3Ishr-(Dxj9O6l|&fU-tp+43}jYK!t1~`y*SLq0Y)V zS3jNu4LoB$prj!4q9`8wC>e#5GaLammHm?C0$Fr*Vz6`dCj{8?dyVIBw6($+*mqNF zrb%(KS2N{Ndo8=wRAp?UMmPiesR`(F(`B-lGtGIfJ^-@S0P?x91>ro!E;KUjx(zWn zp4;50b|$-Oo4X0_iv~_@a8&*-P<|f+e9`}Y%PyNTc?Zs7gE$)$V=-V$lxOw(EVw+> zKLp2sQw<q-}kpQEs<|s_P zYxz8l!4aTOp;e3}p|@Kk#@6Ay*;X$RqUX;cK`nC;WhXI0aGX8mApv4@36Qr&D_o`y zg}|ck+nBSy&jnYBA>XM#)>kgqgHLa8HEFvjNB#9pwv#n|x2bP`!I2OYq=eR{{Wl3g zQOOD(>nrH1M4$dr&F$FE5mtYFQD2=2?y`@AA$h`<^-bYj15hmuEvBgw<^@a{&9Q=#2XBI- zpe42^O+K37xOo8<555OTzfzGoNLUJfo&G%6}St{b6;1#6Pz1l7m{4x+3t7VWTp3+Wa7MZ z4Ji2z7qH$9YzMFxoWC;LZg;Au-ZK&iHCIjBRadA9aBsM}gQ4F&z)b;gG;kK%Q{vgh j@lnAIN{FFb*LVD1*@<&E6n{BQ00000NkvXXu0mjfUL%A| literal 0 HcmV?d00001 diff --git a/src/components/ProductFilter/index.js b/src/components/ProductFilter/index.js new file mode 100644 index 0000000..e7aa5bf --- /dev/null +++ b/src/components/ProductFilter/index.js @@ -0,0 +1,25 @@ +import React, { useState } from "react"; + +import VerticalExpandableProductFilter from "./VerticalExpandableProductFilter"; + +function ProductFilter() { + const list = { + 1: , + }; + const [type, setType] = useState(1); + return ( +
+ + {list[type]} +
+ ); +} + +export default ProductFilter; diff --git a/src/redux/data.js b/src/redux/data.js index 24fa7b2..7d9a3e8 100644 --- a/src/redux/data.js +++ b/src/redux/data.js @@ -13,6 +13,7 @@ import Checkbox from "../components/Checkbox"; import CommentDesign from "../components/CommentDesign"; import CounterDesign from "../components/CounterDesign"; import CourseList from "../components/CourseList"; +import ProductFilter from "../components/ProductFilter"; // mini components import MiniComponents from "../components/MiniComponents"; @@ -257,6 +258,16 @@ const components = [ code: null, }, }, + { + name: "Product Filter", + author: "Ashrafi", + props: [], + content: { + name: "Product Filter", + component: , + code: null, + }, + }, // mini components { name: "Mini Components",