Allow different value/label for SelectDataEntry

This commit is contained in:
Maciej Ziarkowski 2021-03-11 19:07:38 +00:00
parent d0a2726f07
commit 3f4464afbf

View File

@ -3,16 +3,31 @@ import React, { Fragment } from 'react';
import { BaseDataEntryProps } from './data-entry'; import { BaseDataEntryProps } from './data-entry';
import { DataTitleCopyable } from './data-title'; import { DataTitleCopyable } from './data-title';
interface SelectOption {
value: string;
label: string;
}
interface SelectDataEntryProps extends BaseDataEntryProps { interface SelectDataEntryProps extends BaseDataEntryProps {
value: string; value: string;
placeholder?: string; placeholder?: string;
options: string[]; options: (string | SelectOption)[];
} }
function makeOption(option: string | SelectOption): SelectOption {
if(typeof option !== 'string' && 'value' in option && 'label' in option) {
return option;
} else return {
value: option,
label: option
}
}
const SelectDataEntry: React.FunctionComponent<SelectDataEntryProps> = (props) => { const SelectDataEntry: React.FunctionComponent<SelectDataEntryProps> = (props) => {
const slugWithModifier = props.slug + (props.slugModifier ?? ''); const slugWithModifier = props.slug + (props.slugModifier ?? '');
const options = props.options.map(makeOption);
return ( return (
<Fragment> <Fragment>
<DataTitleCopyable <DataTitleCopyable
@ -38,8 +53,8 @@ const SelectDataEntry: React.FunctionComponent<SelectDataEntryProps> = (props) =
> >
<option value="">{props.placeholder}</option> <option value="">{props.placeholder}</option>
{ {
props.options.map(option => ( options.map(option => (
<option key={option} value={option}>{option}</option> <option key={option.value} value={option.value}>{option.label}</option>
)) ))
} }
</select> </select>