Reza_ashrafi
3 years ago
parent
d3c7962a15
commit
0b27064f81
6 changed files with 219 additions and 115 deletions
@ -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 ( |
return ( |
||||||
<div> |
<li className="h-full w-40 flex flex-col px-2"> |
||||||
|
{data?.map((product, i) => ( |
||||||
</div> |
<> |
||||||
) |
<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> |
||||||
|
); |
||||||
} |
} |
||||||
|
|||||||
@ -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…
Reference in new issue