JSFiddle - React, Tailwind, and code Playground

by Hemanth HM

JavaScript

const common = [{
  name: 'line1',
  attr: {}
}, {
  name: 'line2',
  attr: {}
}]

const template = {
  selectedView: 'basic',
  context: {},
  elements: [{
    name: 'address',
    type: 'group',
    elements: [{
      type: 'vertical',
      elements: ['line1', 'line2'],
    }],
  }],
  views: [{
    name: 'basic',
    layout: 'layoutType',
    elements: [
      'address',
    ],
    action: {
      path: 'path/to/end/point',
      data: {},
      error: {},
    },
    nextView: 'businessInfo',
  }, ],
}


const selectedView = template.views.find(view => view.name === template.selectedView)

const ElemFromCommon = el => common.find(cm => cm.name === el)

const ElemFromTemplate = el => template.elements.find(elm => elm.name === el)

const walk = (elements) => {
  elements.forEach((v, i, a) => {
    a[i] = ElemFromTemplate(v) || ElemFromCommon(v)
  })

  selectedView.elements.map(elem => {
    if (Array.isArray(elem.elements)) {
    	elem.elements.forEach((v, i, a) => {
      debugger
    a[i].elements = [...v.elements.map(ElemFromCommon), ...v.elements.map(ElemFromTemplate),].filter(Boolean)
  })
    } 
  })
}

walk(selectedView.elements)

debugger

console.log(selectedView)


/*
0. Filter the views and pick the template.selectedView
1. For each element in views, resolve it's definiation from either template.elements or commons

*/

/*
Expected template after processing, the select view would be:

{
  name: 'basic',
  layout: 'layoutType',
  elements: [{
    name: 'address',
    type: 'group',
    elements: [{
      type: 'vertical',
      elements: [{
        name: 'line1',
        attr: {}
      }, {
        name: 'line2',
        attr: {}
      }],
    }],
  }],
  action: {
    path: 'path/to/end/point',
    data: {},
    error: {},
  },
  nextView: 'businessInfo',
},

*/