a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Allow different value/label for SelectDataEntry

Browse Source
This commit is contained in:
Maciej Ziarkowski 2021-03-11 19:07:38 +00:00
parent d0a2726f07
commit 3f4464afbf
1 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/src/frontend/building/data-components/select-data-entry.tsx
View File

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