Use css grid to layout form

[yahoo]

Use css grid to layout form

[galhavivi]

pr - #65
demo - https://yahoo.github.io/jafar/demo-react-layout.html#/item/sections-grid/html

available on v1.0.7

[WangLarry]

Beautiful and elegant! @galhavivi

[galhavivi]

I agree its more clean :) and when I'll use it ill probably do like you suggested... but i think it might be better to keep the demo with the getGrid so it will be more clear to people that the grid configuration is an object of { templateAreas, elements } - rather than array (they might miss the last row of sections.map if well change it)

[WangLarry]

'benefits' can occupy two rows. See my updated picture

[galhavivi]

done :) i was slow here lol

[galhavivi]

@WangLarry
Thats a great idea and definitely more intuitive, thank you! :)
Let me check how we can offer a different / newer sections version based on grid.
we can have for example that each section will get content - array of strings (or array of arrays) instead of boxes like:

sections: [{
   id: 'basic-info',
   title: 'Basic Info',
   content: [
       "name name . . age age . .",
       ". . . . phone . . ."
   ],
}]

BTW - our advanced goal is to create also a Layout editor, where you will have all your defined fields in a list and you can drag & drop fields to some area - to create different layouts, and behind the scene it will translate to the sections json.
We had this feature in a prior version of Jafar in our portal, and it was very useful for non UI developers - such as backend devs or product manages to create different layouts for the same form based on user role / permissions.
For example - one set of user can get a different layout that another set of users (different sections and fields order) - but both based on the same form model fields. :)

[WangLarry]

Maybe It looks pleasant to get rid of 'getGrid()' in array?

grid: [
    'firstName lastName .',
    'personalId address .',
  ],

...

sections.map(section => ({...section, grid: getGrid(section.grid)})

Oh, current syntax can style every row.

[WangLarry]

Maybe we should show the feature of gird - can span rows. For example:

  grid: getGrid([
    'department  benefits    .    ',
    'level        benefits    .    ',
  ]),

[galhavivi]

Not sure i understand what you meant ..?

[WangLarry]

[galhavivi]

like this?