A simple Grid layout system with Craft.js

example-grid-craft.js

// Get total `width` of all children
const getAccumulatedChildrenWidth = (helper, parentId) => {
  return helper(self.id).decendants().map(id => helper(id).get())
        .reduce((a, b) => a.data.props.width + b.data.props.width, 0);
}

const Grid = () => {
  return (
    <div>
      {children}
    </div>
  )
}

// 1. Add a rule to reject any more GridItem if there is no more space on the Grid
Grid.craft = {
  canMoveIn = (node, self, helper) =>  node.data.type == GridItem && getAccumulatedChildrenWidth(helper, self.id) <= 12;
}

export const GridItem = ({width = 2, children}) => {
  const isNew = useRef(true);
  const { parentId, setProp } = useNode((node) => ({
    parentId: node.id
  }));

  /** 2. 
   * If the GridItem is rendered with a `width` that is more than the remaining space on the Grid,
   * then, resize the GridItem to fit the remaining space
   */
  useManager((_, query) => {
    const accumulatedChildrenWidth = getAccumulatedChildrenWidth(query.node, parentId);
    const remainingWidth = 12 - accumulatedChildrenWidth;

    if ( isNew.current && width > remainingWidth )  {
      setProp(props => props.width = remainingWidth);
      isNew.current = false;
    }
  });

  return (
    <div className={`md-${width}`}>
      {children}
    </div>
  )
}

Hi @prevwong,

I am considering using craft.js for building a grid designer.

Functionality will be to

1. using grid css,
2. add rows and columns,
3. add children at a certain place in the grid, and
4. resize children (kinda like merging cells in excel)

Do you think craft.js is a good framework for this or would you recommend something else?

I have only spent a couple days looking at existing open source projects that I could leverage. Let me know if you have any thoughts on where to start?

Thanks.

Hi @lablancas, sorry for the late reply!

Craft.js would be a good fit for those requirements, the landing page (http://craft.js.org) has most of this functionality (though that's using flexbox, but grids wouldn't be an issue either).

You could check out some of the examples, including the landing page over here:
https://github.com/prevwong/craft.js/tree/develop/examples

And there's a pretty easy to follow tutorial to get started here: https://craft.js.org/r/docs/guides/basic-tutorial

@lablancas Did you ever make this? Interested to hear how you got on

@prevwong Out of interest... where is useManager imported from?

@lablancas Did you ever make this? Interested to hear how you got on

@danielcranney I did not work on this so nothing to report from my end. Sorry.

i'm strugling a lot to make grids because i'm using Ant Design and it should use his grid components...