update data.js

master
mahdi 2 years ago
parent 3c4708278a
commit 1fce85d49d
  1. BIN
      src/components/ProductFilter/VerticalExpandableProductFilter/arrow-top.png
  2. 171
      src/components/ProductFilter/VerticalExpandableProductFilter/index.js
  3. BIN
      src/components/ProductFilter/VerticalExpandableProductFilter/search.png
  4. 25
      src/components/ProductFilter/index.js
  5. 11
      src/redux/data.js

Binary file not shown.

After

Width:  |  Height:  |  Size: 229 B

@ -0,0 +1,171 @@
import React, { useState, useEffect } from "react";
import _ from "lodash";
import Checkbox from "../../Checkbox";
import arrowIcon from "./arrow-top.png";
import searchIcon from "./search.png";
const langDetector = (lang = "fa", option1, option2) => {
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 (
<div className="w-full max-h-screen flex flex-col my-2 pt-6 bg-white border rounded-md">
<strong className="w-full mb-3 px-3 text-sm text-gray-500">
دسته بندی
</strong>
<form className="relative w-full px-4 mb-4">
<input
type="text"
placeholder={_.join(
[langDetector(props.lang, "جستجو...", "Search...")],
" "
)}
className="w-full py-1 px-2 text-gray-500 border rounded-md placeholder-gray-300 outline-none"
onChange={(e) => setText(e.target.value)}
/>
<span
className={_.join(
[
" flex items-center absolute inset-y-0",
langDetector(props.lang, "left-4", "right-4"),
],
" "
)}
>
<button
type="submit"
className="p-1 focus:outline-none focus:shadow-outline"
>
<img src={searchIcon} className="w-5 h-5" alt="" />
</button>
</span>
</form>
<ul className="w-full flex flex-col list-none divide-y divide-gray-200">
{(searchResult.length > 0 ? searchResult : props.list)?.map(
(item1, i) => (
<li
key={i}
className="hover:bg-gray-100 px-3 flex flex-row items-center justify-between py-2"
>
<div className="flex flex-row items-center">
<Checkbox />
<strong className="text-xs text-gray-500 mr-2">
{item1.name}
</strong>
</div>
{item1.subList?.length > 0 && (
<img
src={arrowIcon}
alt=""
className={_.join(
[
"cursor-pointer w-5 transform transition-all duration-300",
item1.expaneded ? "" : "rotate-180",
],
" "
)}
/>
)}
</li>
)
)}
</ul>
</div>
);
}
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: [],
},
],
};

Binary file not shown.

After

Width:  |  Height:  |  Size: 857 B

@ -0,0 +1,25 @@
import React, { useState } from "react";
import VerticalExpandableProductFilter from "./VerticalExpandableProductFilter";
function ProductFilter() {
const list = {
1: <VerticalExpandableProductFilter />,
};
const [type, setType] = useState(1);
return (
<div className="w-full flex flex-col items-center">
<select
className="mb-10 w-20 bg-gray-200"
onChange={(e) => setType(e.target.value)}
>
{Object.keys(list).map((option, index) => (
<option key={index}>{option}</option>
))}
</select>
{list[type]}
</div>
);
}
export default ProductFilter;

@ -13,6 +13,7 @@ import Checkbox from "../components/Checkbox";
import CommentDesign from "../components/CommentDesign"; import CommentDesign from "../components/CommentDesign";
import CounterDesign from "../components/CounterDesign"; import CounterDesign from "../components/CounterDesign";
import CourseList from "../components/CourseList"; import CourseList from "../components/CourseList";
import ProductFilter from "../components/ProductFilter";
// mini components // mini components
import MiniComponents from "../components/MiniComponents"; import MiniComponents from "../components/MiniComponents";
@ -257,6 +258,16 @@ const components = [
code: null, code: null,
}, },
}, },
{
name: "Product Filter",
author: "Ashrafi",
props: [],
content: {
name: "Product Filter",
component: <ProductFilter />,
code: null,
},
},
// mini components // mini components
{ {
name: "Mini Components", name: "Mini Components",

Loading…
Cancel
Save