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 ( |
||||
<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> |
||||
); |
||||
} |
||||
|
||||
@ -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