Merge branch 'feat/grid-revamp' of https://github.com/ToolJet/ToolJet into feat/grid-revamp

This commit is contained in:
Kavin Venkatachalam 2024-01-11 12:00:54 +05:30
commit 03d92815d2
2 changed files with 22 additions and 20 deletions

View file

@ -106,25 +106,25 @@ export const Container = ({
const [canvasHeight, setCanvasHeight] = useState(null);
useEffect(() => {
// if (currentLayout === 'mobile' && appDefinition.pages[currentPageId]?.autoComputeLayout) {
// const mobLayouts = Object.keys(boxes).map((key) => {
// return { ...cloneDeep(boxes[key]?.layouts?.desktop), i: key };
// });
// const updatedBoxes = cloneDeep(boxes);
// let newmMobLayouts = correctBounds(mobLayouts, { cols: 12 });
// newmMobLayouts = compact(newmMobLayouts, 'vertical', 12);
// Object.keys(boxes).forEach((id) => {
// const mobLayout = newmMobLayouts.find((layout) => layout.i === id);
// updatedBoxes[id].layouts.mobile = {
// left: mobLayout.left,
// height: mobLayout.height,
// top: mobLayout.top,
// width: mobLayout.width,
// };
// });
// setBoxes({ ...updatedBoxes });
// // console.log('currentLayout', data);
// }
if (currentLayout === 'mobile' && appDefinition.pages[currentPageId]?.autoComputeLayout) {
const mobLayouts = Object.keys(boxes).map((key) => {
return { ...cloneDeep(boxes[key]?.layouts?.desktop), i: key };
});
const updatedBoxes = cloneDeep(boxes);
let newmMobLayouts = correctBounds(mobLayouts, { cols: 43 });
newmMobLayouts = compact(newmMobLayouts, 'vertical', 43);
Object.keys(boxes).forEach((id) => {
const mobLayout = newmMobLayouts.find((layout) => layout.i === id);
updatedBoxes[id].layouts.mobile = {
left: mobLayout.left,
height: mobLayout.height,
top: mobLayout.top,
width: mobLayout.width,
};
});
setBoxes({ ...updatedBoxes });
// console.log('currentLayout', data);
}
// setNoOfGrids(currentLayout === 'mobile' ? 12 : 43);
}, [currentLayout]);

View file

@ -228,6 +228,8 @@ function sortLayoutItemsByRowCol(layout) {
function scaleLayouts(layouts, cols = 6) {
return layouts.map((layout) => ({
...layout,
width: layout.width <= 4 ? 2 : layout.width <= 8 ? 3 : layout.width,
// width: layout.width <= 4 ? 2 : layout.width <= 8 ? 3 : layout.width,
// width: layout.width <= 10 ? 10 : layout.width <= 20 ? 24 : 43,
width: layout.width * 3 > 43 ? 43 : layout.width * 3,
}));
}