| 773 | const controlWidth = {default: 'full', sm: 130} as const; |
| 774 | |
| 775 | function UnionControl({control, value, onChange, isPicker = false}) { |
| 776 | let length = control.value.elements.reduce((p, v) => p + v.value, '').length; |
| 777 | if (isPicker || control.options?.control === 'picker' || length > 18) { |
| 778 | return ( |
| 779 | <Picker |
| 780 | label={control.name} |
| 781 | contextualHelp={<PropContextualHelp control={control} />} |
| 782 | value={value == null && control.optional && !control.default ? '__none' : value} |
| 783 | onChange={v => onChange(v === '__none' ? null : v)} |
| 784 | styles={style({width: controlWidth})}> |
| 785 | {control.optional && !control.default ? <PickerItem id="__none">Default</PickerItem> : null} |
| 786 | {control.value.elements |
| 787 | .filter(e => e.value) |
| 788 | .map(element => ( |
| 789 | <PickerItem key={element.value} id={element.value}> |
| 790 | {String(element.value)} |
| 791 | </PickerItem> |
| 792 | ))} |
| 793 | </Picker> |
| 794 | ); |
| 795 | } |
| 796 | |
| 797 | return ( |
| 798 | <Wrapper |
| 799 | control={control} |
| 800 | styles={style({ |
| 801 | gridColumnStart: { |
| 802 | isLong: 1 |
| 803 | }, |
| 804 | gridColumnEnd: { |
| 805 | isLong: -1 |
| 806 | } |
| 807 | })({isLong: length > 12 || control.value.elements.length > 3})}> |
| 808 | <ToggleButtonGroup |
| 809 | aria-label={control.name} |
| 810 | disallowEmptySelection={!control.optional || !!control.default} |
| 811 | selectedKeys={[value]} |
| 812 | onSelectionChange={keys => onChange([...keys][0])} |
| 813 | density="compact"> |
| 814 | {control.value.elements.map(element => ( |
| 815 | <ToggleButton |
| 816 | key={element.value} |
| 817 | id={element.value} |
| 818 | styles={style({ |
| 819 | flexGrow: { |
| 820 | default: 1, |
| 821 | lg: 0 |
| 822 | } |
| 823 | })}> |
| 824 | {element.value} |
| 825 | </ToggleButton> |
| 826 | ))} |
| 827 | </ToggleButtonGroup> |
| 828 | </Wrapper> |
| 829 | ); |
| 830 | } |
| 831 | |
| 832 | function Wrapper({ |