reza added SCH

master
Reza_ashrafi 3 years ago
parent d3c7962a15
commit 0b27064f81
  1. 6
      src/components/Checkbox/index.js
  2. 2
      src/components/Search/index.js
  3. 31
      src/components/SidebarCategoryHover/Col.js
  4. 123
      src/components/SidebarCategoryHover/data.js
  5. 46
      src/components/SidebarCategoryHover/index.js
  6. 122
      src/components/SidebarCategoryHover/list.js

@ -8,9 +8,9 @@ export default function Checkbox(props) {
<symbol id="check" viewBox="0 0 12 10">
<polyline
points="1.5 6 4.5 9 10.5 1"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
></polyline>
</symbol>
</svg>

@ -23,7 +23,7 @@ export default function Search(props) {
name="q"
className="w-full py-2 text-sm text-white border rounded-sm pr-5 outline-none focus:ring-1 focus:text-gray-900"
placeholder={_.join([langDetector(props.lang , "جستجو...", "Search...")], " ")}
autocomplete="off"
autoComplete="off"
/>
</div>
</div>

@ -1,9 +1,28 @@
import React from 'react'
import React from "react";
export default function Col() {
export default function Col({ data, colLength }) {
const length = data?.length;
return (
<div>
</div>
)
<li className="h-full w-40 flex flex-col px-2">
{data?.map((product, i) => (
<>
<li
className="flex items-center text-right w-full cursor-pointer text-md"
style={{ minHeight: `calc(100% / ${colLength})` }}
>
{product.name}
</li>
{product.list.map((item1, i) => (
<li
key={i}
className="w-full text-normal justify-center cursor-pointer flex items-center text-sm font-normal text-gray-400 hover:bg-blue-50"
style={{ minHeight: "calc(100% / 9)" }}
>
{item1.name}
</li>
))}
</>
))}
</li>
);
}

@ -1,7 +1,7 @@
const category = [
{
name: "کالای دیجیتال",
id : 0,
id: 0,
categories: [
{
name: "سخت افزار کامپیوتر",
@ -60,6 +60,9 @@ const category = [
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
],
},
{
@ -93,12 +96,6 @@ const category = [
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
],
},
{
@ -169,7 +166,7 @@ const category = [
},
{
name: "کالای دیجیتالوسایل آشپزخانه",
id : 1,
id: 1,
categories: [
{
name: "سخت افزار کامپیوتر",
@ -186,6 +183,9 @@ const category = [
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
],
},
{
@ -225,6 +225,9 @@ const category = [
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
],
},
{
@ -258,12 +261,6 @@ const category = [
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
],
},
{
@ -334,7 +331,7 @@ const category = [
},
{
name: "ماشین و موتور سیکلت",
id : 2,
id: 2,
categories: [
{
name: "سخت افزار کامپیوتر",
@ -351,6 +348,9 @@ const category = [
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
],
},
{
@ -390,6 +390,9 @@ const category = [
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
],
},
{
@ -423,12 +426,6 @@ const category = [
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
],
},
{
@ -499,7 +496,7 @@ const category = [
},
{
name: "اتاق خواب",
id : 3,
id: 3,
categories: [
{
name: "سخت افزار کامپیوتر",
@ -516,6 +513,9 @@ const category = [
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
],
},
{
@ -555,6 +555,9 @@ const category = [
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
],
},
{
@ -588,12 +591,6 @@ const category = [
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
],
},
{
@ -664,7 +661,7 @@ const category = [
},
{
name: "دکوراسیون و چیدمان",
id : 4,
id: 4,
categories: [
{
name: "سخت افزار کامپیوتر",
@ -681,6 +678,9 @@ const category = [
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
],
},
{
@ -720,6 +720,9 @@ const category = [
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
],
},
{
@ -753,12 +756,6 @@ const category = [
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
],
},
{
@ -829,7 +826,7 @@ const category = [
},
{
name: "وسایل بهداشت شخصی",
id : 5,
id: 5,
categories: [
{
name: "سخت افزار کامپیوتر",
@ -846,6 +843,9 @@ const category = [
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
],
},
{
@ -885,6 +885,9 @@ const category = [
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
],
},
{
@ -918,12 +921,6 @@ const category = [
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
],
},
{
@ -994,7 +991,7 @@ const category = [
},
{
name: "وسایل بهداشت شخصدارو و تقویتی",
id : 6,
id: 6,
categories: [
{
name: "سخت افزار کامپیوتر",
@ -1011,6 +1008,9 @@ const category = [
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
],
},
{
@ -1050,6 +1050,9 @@ const category = [
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
],
},
{
@ -1083,12 +1086,6 @@ const category = [
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
],
},
{
@ -1159,7 +1156,7 @@ const category = [
},
{
name: "موبایل و تبلت",
id : 7,
id: 7,
categories: [
{
name: "سخت افزار کامپیوتر",
@ -1176,6 +1173,9 @@ const category = [
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
],
},
{
@ -1215,6 +1215,9 @@ const category = [
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
],
},
{
@ -1248,12 +1251,6 @@ const category = [
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
],
},
{
@ -1324,7 +1321,7 @@ const category = [
},
{
name: "هارد و ذخیره سازی",
id : 8,
id: 8,
categories: [
{
name: "سخت افزار کامپیوتر",
@ -1341,6 +1338,9 @@ const category = [
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
],
},
{
@ -1380,6 +1380,9 @@ const category = [
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
],
},
{
@ -1413,12 +1416,6 @@ const category = [
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
{
name: "زیر لینک آزمایشی",
},
],
},
{

@ -1,5 +1,6 @@
import React, { useState } from "react";
import category from "./data";
import List from "./list";
import _ from "lodash";
export default function SidebarCategoryHover() {
@ -8,7 +9,10 @@ export default function SidebarCategoryHover() {
const arrayLength = category.length;
return (
<div className="flex flex-col w-60 relative" onMouseOut={() => setActiveItem(null)}>
<div
className="flex flex-col w-60 relative"
onMouseOut={() => setActiveItem(null)}
>
<ul className="list-none w-full divide-y border divide-gray-200">
{category.map((item, i) => (
<>
@ -19,45 +23,7 @@ export default function SidebarCategoryHover() {
>
{item.name}
</li>
<ul
className={_.join(
[
"absolute right-60 top-0 h-full border flex-row divide-x divide-gray-200",
activeItem === item.id ? "flex" : "hidden",
],
" "
)}
onMouseOver={() => setActiveItem(item.id)}
// style={{width : 1000}}
>
<li className="h-full w-52 bg-red-50 flex flex-col text-right">
<li className="flex items-center" style={{ minHeight: "calc(100% / 9)" }}>
{item.categories[0].name}
</li>
{item.categories[0].list.map((item1, i) => (
<li
key={i}
className="text-normal flex text-sm items-center"
style={{ minHeight: "calc(100% / 9)" }}
>
{item1.name}
</li>
))}
<li className="flex items-center" style={{ minHeight: "calc(100% / 9)" }}>
{item.categories[1].name}
</li>
{item.categories[1].list.map((item1, i) => (
<li key={i} className="flex items-center" style={{ minHeight: "calc(100% / 9)" }}>
{item1.name}
</li>
))}
</li>
<li className="h-full w-52 bg-green-50"></li>
<li className="h-full w-52 bg-blue-50"></li>
<li className="h-full w-52 bg-red-50"></li>
<li className="h-full w-52 bg-green-50"></li>
<li className="h-full w-52 bg-blue-50"></li>
</ul>
<List activeItem={activeItem} item={item} setActiveItem={setActiveItem} colLength={9} />
</>
))}
</ul>

@ -0,0 +1,122 @@
import React, { useState, useEffect } from "react";
import _, { set } from "lodash";
import Col from "./col";
export default function List({ activeItem, item, setActiveItem, colLength }) {
const [cols, setCols] = useState(null);
const [disable, setDisable] = useState(false);
useEffect(() => {
let vCols = {
col1: [],
col2: [],
col3: [],
col4: [],
col5: [],
col6: [],
};
let index = 1;
for (let category of item.categories) {
if (index === 1) {
let col1 = vCols.col1;
let col1Length = col1.length;
col1.forEach((colsItem) => {
col1Length = col1Length + colsItem.list.length;
});
if (col1Length === colLength) {
index = 2;
} else {
col1 = [...col1, category];
vCols = { ...vCols, col1: col1 };
}
}
if (index === 2) {
let col2 = vCols.col2;
let col2Length = col2.length;
col2.forEach((colsItem) => {
col2Length = col2Length + colsItem.list.length;
});
if (col2Length === colLength) {
index = 3;
} else {
col2 = [...col2, category];
vCols = { ...vCols, col2: col2 };
}
}
if (index === 3) {
let col3 = vCols.col3;
let col3Length = col3.length;
col3.forEach((colsItem) => {
col3Length = col3Length + colsItem.list.length;
});
if (col3Length === colLength) {
index = 4;
} else {
col3 = [...col3, category];
vCols = { ...vCols, col3: col3 };
}
}
if (index === 4) {
let col4 = vCols.col4;
let col4Length = col4.length;
col4.forEach((colsItem) => {
col4Length = col4Length + colsItem.list.length;
});
if (col4Length === colLength) {
index = 5;
} else {
col4 = [...col4, category];
vCols = { ...vCols, col4: col4 };
}
}
if (index === 5) {
let col5 = vCols.col5;
let col5Length = col5.length;
col5.forEach((colsItem) => {
col5Length = col5Length + colsItem.list.length;
});
if (col5Length === colLength) {
index = 6;
} else {
col5 = [...col5, category];
vCols = { ...vCols, col5: col5 };
}
}
if (index === 6) {
let col6 = vCols.col6;
let col6Length = col6.length;
col6.forEach((colsItem) => {
col6Length = col6Length + colsItem.list.length;
});
if (col6Length === colLength) {
index = 7;
} else {
col6 = [...col6, category];
vCols = { ...vCols, col6: col6 };
}
} else {
setCols(() => vCols);
}
}
}, []);
return (
<ul
className={_.join(
[
"absolute right-60 top-0 h-full border flex-row",
activeItem === item.id ? "flex" : "hidden",
],
" "
)}
onMouseOver={() => setActiveItem(item.id)}
>
{cols?.col1.length > 0 && <Col data={cols?.col1} colLength={colLength} />}
{cols?.col2.length > 0 && <Col data={cols?.col2} colLength={colLength} />}
{cols?.col3.length > 0 && <Col data={cols?.col3} colLength={colLength} />}
{cols?.col4.length > 0 && <Col data={cols?.col4} colLength={colLength} />}
{cols?.col5.length > 0 && <Col data={cols?.col5} colLength={colLength} />}
{cols?.col6.length > 0 && <Col data={cols?.col6} colLength={colLength} />}
</ul>
);
}
Loading…
Cancel
Save