Function ChildrenControl

packages/dev/s2-docs/src/VisualExampleClient.tsx:1094–1138

({control, value, onChange}: ControlProps)

}

function ChildrenControl({control, value, onChange}: ControlProps) {
  if (control.slots) {
    let objectValue = typeof value === 'string' ? {text: value} : value;
    return (
      <Wrapper control={control} styles={style({gridColumnStart: 1, gridColumnEnd: -1})}>
        <div className={style({display: 'flex', flexDirection: 'column', rowGap: 4})}>
          {control.slots.icon && (
            <div className={style({display: 'flex', columnGap: 4})}>
              <TextField
                aria-label={control.name}
                placeholder="–"
                value={objectValue?.text || ''}
                onChange={text => onChange({...objectValue, text})}
                styles={style({width: 80, flexGrow: 1})}
              />
              <Suspense fallback={<ActionButton isPending>No icon</ActionButton>}>
                <IconPicker value={value} onChange={onChange} />
              </Suspense>
            </div>
          )}
          {(control.slots.avatar || control.slots.badge) && (
            <ToggleButtonGroup density="compact" isJustified>
              {control.slots.avatar && (
                <ToggleButton
                  isSelected={objectValue?.avatar ?? false}
                  onChange={avatar => onChange({...objectValue, avatar})}>
                  Avatar
                </ToggleButton>
              )}
              {control.slots.badge && (
                <ToggleButton
                  isSelected={objectValue?.badge ?? false}
                  onChange={badge => onChange({...objectValue, badge})}>
                  Badge
                </ToggleButton>
              )}
            </ToggleButtonGroup>
          )}
        </div>
      </Wrapper>
    );
  }

  return <StringControl control={control} value={value} onChange={onChange} />;
}

// https://github.com/unicode-org/cldr/blob/22af90ae3bb04263f651323ce3d9a71747a75ffb/common/supplemental/supplementalData.xml#L4649-L4664
const preferences = [