add LogicalDataEntryYesOnly

This commit is contained in:
Ed Chalstrey 2022-07-22 16:06:59 +01:00
parent 813e7440e8
commit e00621df41
2 changed files with 40 additions and 2 deletions

View File

@ -107,3 +107,41 @@ export const LogicalDataEntry: React.FC<LogicalDataEntryProps> = (props) => {
</>
);
};
export const LogicalDataEntryYesOnly: React.FC<LogicalDataEntryProps> = (props) => {
function handleValueChange(e: React.ChangeEvent<HTMLInputElement>) {
props.onChange?.(props.slug, e.target.value === 'true');
}
function handleClear(e: React.MouseEvent<HTMLButtonElement>) {
props.onChange?.(props.slug, null);
}
const isDisabled = props.mode === 'view' || props.disabled;
return (
<>
<DataTitleCopyable
slug={props.slug}
title={props.title}
tooltip={props.tooltip}
disabled={props.disabled || props.value == undefined}
copy={props.copy}
/>
<div className="btn-group btn-group-toggle">
<ToggleButton
value="true"
checked={props.value === true}
disabled={isDisabled || props.disallowTrue}
checkedClassName='btn-outline-dark active'
uncheckedClassName='btn-outline-dark'
onChange={handleValueChange}
>Yes</ToggleButton>
</div>
{
!isDisabled && props.value != null &&
<ClearButton onClick={handleClear} disabled={props.disallowNull}/>
}
</>
);
};

View File

@ -5,7 +5,7 @@ import SelectDataEntry from '../data-components/select-data-entry';
import NumericDataEntry from '../data-components/numeric-data-entry';
import Verification from '../data-components/verification';
import { MultiDataEntry } from '../data-components/multi-data-entry/multi-data-entry';
import { LogicalDataEntry } from '../data-components/logical-data-entry/logical-data-entry';
import { LogicalDataEntry, LogicalDataEntryYesOnly } from '../data-components/logical-data-entry/logical-data-entry';
import { DataEntryGroup } from '../data-components/data-entry-group';
import withCopyEdit from '../data-container';
@ -187,7 +187,7 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
user_verified_as={props.user_verified.lead_designer_type}
verified_count={props.building.verified.lead_designer_type}
/>
<LogicalDataEntry
<LogicalDataEntryYesOnly
slug='designer_awards'
title={dataFields.designer_awards.title}
tooltip={dataFields.designer_awards.tooltip}