Computed Properties

[joekjoshua]

I wish to make a select input UI for property named "Simple Layout" with values ['column', 'row', 'none'].

Such a property doesn't exist in css. However, based on the selected value of Simple Layout , I set the "css properties" display and flex. And if display and flex are updated elsewhere, the value of simple layout is calculated.

Is there a way to achieve this?

Breaking down my understanding further.

I imagine I need two conversion functions.
{ Simple Layout } => { display, flex }
{ display, flex } => { Simple Layout }

I tried creating a composite Property with sub properties [layout, display, flex]

  {
    id: 'layout',
    name: 'Layout',
      properties: [
      {
        id: 'layout',
        label: 'Direction',
        type: 'composite',
        detached: true,
        properties: [
          { id: 'layout', label: 'Layout', property: 'layout', type: 'select', options: getOptions(['none', 'column', 'row']) },
          { label: 'Display', property: 'display', type: 'select', options: getOptions(['block', 'inline', 'inline-block', 'flex', 'none'])},
          { label: 'Direction', property: 'flex-direction', type: 'select', options: getOptions(['row', 'row-reverse', 'column', 'column-reverse'])}
        ],
        onChange: console.log, 
        fromStyle: (style: StyleProps, opts: any) => {
          let display = style.display
          let direction = style['flex-direction'] || 'row'
          const prop = opts.property
          const layout = prop.getValues()?.['layout']
          if (display === 'flex') { 
            return { display, layout: direction, 'flex-direction': direction}
          } else {
            return { display, layout: 'none', 'flex-direction': 'row' }
          }
        },
        toStyle: (values: PropValues, opts: any) => {
          let { layout } = values
          switch (layout) {
            case 'column':
              console.log(layout)
              return { "flex-direction": 'column', display: 'flex' }
            case 'row':
              return { "flex-direction": 'row', display: 'flex' }
            case 'none':
              return { "flex-direction": '', display: 'block'  }
            default:
              return { "flex-direction": '', display: 'block' }
          }
        }
        ]
  }


What's not working?
1. onChange doesn't fire when I change value of "layout". It fires when I clear it. 
2. toStyle doesn't set values of display and flex-direction if I change the value of layout. 

My understanding 
toStyle sets the value of all "css properties" we pass to it. 
onChange should fire because I did select a new value for layout dropdown.