Repository: h2oai/wave
File: ui/src/form.tsx (TypeScript)

Code before:
            key={name || `${componentKey}-${i}`}
            data-visible={visible}
            className={height === '1' ? css.fullHeight : ''}
            style={{ ...visibleStyles, width, alignSelf, flexGrow: shouldParentGrow ? 1 : undefined }}
          >
            <XComponent model={m} />
          </div>
        )
      })

    return (
      <div
        className={clas(direction === 'row' ? css.horizontal : css.vertical, inset ? css.inset : '', height === '1' ? css.fullHeight : '')}
        style={{
          justifyContent: justifications[justify || ''],
          alignItems: alignments[align || ''],
          height: height === '1' ? undefined : height,
        }}
      >{components}</div>
    )
  },
  XInline = ({ model: m }: { model: Inline }) => (
    <XComponents
      items={m.items}
      justify={m.justify}
      align={m.align || m.direction === 'row' ? 'center' : undefined}
      inset={m.inset}
      height={m.height}
      direction={m.direction || 'row'}
      isInline
    />
  )


const
  XComponent = ({ model: m }: { model: Component }) => {
    if (m.text) return <XToolTip content={m.text.tooltip} expand={false}><XText name={m.text.name} content={m.text.content} size={m.text.size} /></XToolTip>
    if (m.text_xl) return <XToolTip content={m.text_xl.tooltip} expand={false}><XText name={m.text_xl.name} content={m.text_xl.content} size='xl' commands={m.text_xl.commands} /></XToolTip>
    if (m.text_l) return <XToolTip content={m.text_l.tooltip} expand={false}><XText name={m.text_l.name} content={m.text_l.content} size='l' commands={m.text_l.commands} /></XToolTip>
    if (m.text_m) return <XToolTip content={m.text_m.tooltip} expand={false}><XText name={m.text_m.name} content={m.text_m.content} /></XToolTip>
    if (m.text_s) return <XToolTip content={m.text_s.tooltip} expand={false}><XText name={m.text_s.name} content={m.text_s.content} size='s' /></XToolTip>
    if (m.text_xs) return <XToolTip content={m.text_xs.tooltip} expand={false}><XText name={m.text_xs.name} content={m.text_xs.content} size='xs' /></XToolTip>
    if (m.label) return <XToolTip content={m.label.tooltip} expand={false}><XLabel model={m.label} /></XToolTip>
    if (m.link) return <XToolTip content={m.link.tooltip} expand={false}><XLink model={m.link} /></XToolTip>
    if (m.links) return <XLinks model={m.links} />
    if (m.separator) return <XSeparator model={m.separator} />
    if (m.progress) return <XToolTip content={m.progress.tooltip}><XProgress model={m.progress} /></XToolTip>
    if (m.message_bar) return <XMessageBar model={m.message_bar} />
    if (m.textbox) return <XToolTip content={m.textbox.tooltip}><XTextbox model={m.textbox} /></XToolTip>
    if (m.checkbox) return <XToolTip content={m.checkbox.tooltip} expand={false}><XCheckbox model={m.checkbox} /></XToolTip>
    if (m.toggle) return <XToolTip content={m.toggle.tooltip} expand={false}><XToggle model={m.toggle} /></XToolTip>

Review comment (bug):
```suggestion
      align={m.align || (m.direction === 'row' ? 'center' : undefined)}
```
Without the parentheses the condition results in wrong value a therefore alignment can result always being `center` in some cases - please, see the **align** demo in broken `inline.py` example.

Code after:
            key={name || `${componentKey}-${i}`}
            data-visible={visible}
            className={height === '1' ? css.fullHeight : ''}
            style={{ ...visibleStyles, width, minWidth: width, alignSelf, flexGrow: shouldParentGrow ? 1 : undefined }}
          >
            <XComponent model={m} />
          </div>
        )
      })

    return (
      <div
        className={clas(direction === 'row' ? css.horizontal : css.vertical, inset ? css.inset : '', height === '1' ? css.fullHeight : '')}
        style={{
          justifyContent: justifications[justify || ''],
          alignItems: alignments[align || ''],
          height: height === '1' ? undefined : height,
        }}
      >{components}</div>
    )
  },
  XInline = ({ model: m }: { model: Inline }) => (
    <XComponents
      items={m.items}
      justify={m.justify}
      align={m.align || (m.direction === 'row' ? 'center' : undefined)}
      inset={m.inset}
      height={m.height}
      direction={m.direction || 'row'}
      isInline
    />
  )


const
  XComponent = ({ model: m }: { model: Component }) => {
    if (m.text) return <XToolTip content={m.text.tooltip} expand={false}><XText name={m.text.name} content={m.text.content} size={m.text.size} /></XToolTip>
    if (m.text_xl) return <XToolTip content={m.text_xl.tooltip} expand={false}><XText name={m.text_xl.name} content={m.text_xl.content} size='xl' commands={m.text_xl.commands} /></XToolTip>
    if (m.text_l) return <XToolTip content={m.text_l.tooltip} expand={false}><XText name={m.text_l.name} content={m.text_l.content} size='l' commands={m.text_l.commands} /></XToolTip>
    if (m.text_m) return <XToolTip content={m.text_m.tooltip} expand={false}><XText name={m.text_m.name} content={m.text_m.content} /></XToolTip>
    if (m.text_s) return <XToolTip content={m.text_s.tooltip} expand={false}><XText name={m.text_s.name} content={m.text_s.content} size='s' /></XToolTip>
    if (m.text_xs) return <XToolTip content={m.text_xs.tooltip} expand={false}><XText name={m.text_xs.name} content={m.text_xs.content} size='xs' /></XToolTip>
    if (m.label) return <XToolTip content={m.label.tooltip} expand={false}><XLabel model={m.label} /></XToolTip>
    if (m.link) return <XToolTip content={m.link.tooltip} expand={false}><XLink model={m.link} /></XToolTip>
    if (m.links) return <XLinks model={m.links} />
    if (m.separator) return <XSeparator model={m.separator} />
    if (m.progress) return <XToolTip content={m.progress.tooltip}><XProgress model={m.progress} /></XToolTip>
    if (m.message_bar) return <XMessageBar model={m.message_bar} />
    if (m.textbox) return <XToolTip content={m.textbox.tooltip}><XTextbox model={m.textbox} /></XToolTip>
    if (m.checkbox) return <XToolTip content={m.checkbox.tooltip} expand={false}><XCheckbox model={m.checkbox} /></XToolTip>
    if (m.toggle) return <XToolTip content={m.toggle.tooltip} expand={false}><XToggle model={m.toggle} /></XToolTip>