From 0b27064f81f3726856f5803bc65593fbd2872f81 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Mon, 15 Nov 2021 12:00:40 +0330 Subject: [PATCH] reza added SCH --- src/components/Checkbox/index.js | 6 +- src/components/Search/index.js | 2 +- src/components/SidebarCategoryHover/Col.js | 31 ++++- src/components/SidebarCategoryHover/data.js | 127 +++++++++---------- src/components/SidebarCategoryHover/index.js | 46 +------ src/components/SidebarCategoryHover/list.js | 122 ++++++++++++++++++ 6 files changed, 219 insertions(+), 115 deletions(-) create mode 100644 src/components/SidebarCategoryHover/list.js diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.js index 2033aa2..1c83b36 100644 --- a/src/components/Checkbox/index.js +++ b/src/components/Checkbox/index.js @@ -8,9 +8,9 @@ export default function Checkbox(props) { diff --git a/src/components/Search/index.js b/src/components/Search/index.js index c688cba..f63a973 100644 --- a/src/components/Search/index.js +++ b/src/components/Search/index.js @@ -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" /> diff --git a/src/components/SidebarCategoryHover/Col.js b/src/components/SidebarCategoryHover/Col.js index d3dc253..f36fb01 100644 --- a/src/components/SidebarCategoryHover/Col.js +++ b/src/components/SidebarCategoryHover/Col.js @@ -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 ( -
- -
- ) +
  • + {data?.map((product, i) => ( + <> +
  • + {product.name} +
    • + {product.list.map((item1, i) => ( +
  • + {item1.name} +
    • + ))} + + ))} + + ); } diff --git a/src/components/SidebarCategoryHover/data.js b/src/components/SidebarCategoryHover/data.js index 136583e..be0fb23 100644 --- a/src/components/SidebarCategoryHover/data.js +++ b/src/components/SidebarCategoryHover/data.js @@ -1,7 +1,7 @@ -const category = [ +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: "زیر لینک آزمایشی", - }, ], }, { @@ -1489,4 +1486,4 @@ const category = [ }, ]; -export default category; \ No newline at end of file +export default category; diff --git a/src/components/SidebarCategoryHover/index.js b/src/components/SidebarCategoryHover/index.js index cd8f0c6..582d7ff 100644 --- a/src/components/SidebarCategoryHover/index.js +++ b/src/components/SidebarCategoryHover/index.js @@ -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 ( -
    setActiveItem(null)}> +
    setActiveItem(null)} + >
      {category.map((item, i) => ( <> @@ -19,45 +23,7 @@ export default function SidebarCategoryHover() { > {item.name} -
        setActiveItem(item.id)} - // style={{width : 1000}} - > -
      • -
      • - {item.categories[0].name} -
        • - {item.categories[0].list.map((item1, i) => ( -
      • - {item1.name} -
        • - ))} -
      • - {item.categories[1].name} -
        • - {item.categories[1].list.map((item1, i) => ( -
      • - {item1.name} -
        • - ))} - -
      • -
      • -
      • -
      • -
      • -
      + ))}
    diff --git a/src/components/SidebarCategoryHover/list.js b/src/components/SidebarCategoryHover/list.js new file mode 100644 index 0000000..6b0592c --- /dev/null +++ b/src/components/SidebarCategoryHover/list.js @@ -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 ( +
      setActiveItem(item.id)} + > + {cols?.col1.length > 0 && } + {cols?.col2.length > 0 && } + {cols?.col3.length > 0 && } + {cols?.col4.length > 0 && } + {cols?.col5.length > 0 && } + {cols?.col6.length > 0 && } +
    + ); +}