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

Add slug modifier for labelling complex inputs

Browse Source 
This adds a slugModifier optional prop for most data entries
the modifier will be used with the slug to form input
element IDs, names and for attributes of label.
This ensures that clicking on a label for a complex attribute will
focus/highlight the correct input field.
This commit is contained in:
Maciej Ziarkowski 2021-03-11 19:06:25 +00:00
parent fc7fbc3334
commit d0a2726f07
5 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,7 @@ import { DataTitleCopyable } from './data-title';
interface BaseDataEntryProps {
slug: string;
slugModifier?: string | number; // string used with slug with array items (ensures the form labels link to the input for the correct item)
title: string;
tooltip?: string;
disabled?: boolean;
@ -26,6 +27,7 @@ const DataEntry: React.FC<DataEntryProps> = (props) => {
<Fragment>
<DataTitleCopyable
slug={props.slug}
slugModifier={props.slugModifier}
title={props.title}
tooltip={props.tooltip}
disabled={props.disabled || props.value == undefined || props.value == ''}
@ -33,6 +35,7 @@ const DataEntry: React.FC<DataEntryProps> = (props) => {
/>
<DataEntryInput
slug={props.slug}
name={props.slug + props.slugModifier ?? ''}
value={props.value}
onChange={props.onChange}
disabled={props.mode === 'view' || props.disabled}

3
app/src/frontend/building/data-components/data-title.tsx
View File

@ -24,6 +24,7 @@ interface DataTitleCopyableProps {
title: string;
tooltip?: string;
slug: string;
slugModifier?: string | number;
disabled?: boolean;
copy?: CopyProps;
}
@ -32,7 +33,7 @@ const DataTitleCopyable: React.FunctionComponent<DataTitleCopyableProps> = (prop
return (
<div className="data-title">
<div className="data-title-text">
<label htmlFor={props.slug}>
<label htmlFor={`${props.slug}${props.slugModifier ?? ''}`}>
{ props.title }
</label>
</div>

11
app/src/frontend/building/data-components/multi-data-entry/multi-data-entry.tsx
View File

@ -81,9 +81,12 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
const props = this.props;
const isEditing = props.mode === 'edit';
const isDisabled = !isEditing || props.disabled;
const slugWithModifier = props.slug + (props.slugModifier ?? '');
return <Fragment>
<DataTitleCopyable
slug={props.slug}
slugModifier={props.slugModifier}
title={props.title}
tooltip={props.tooltip}
disabled={props.disabled || props.value == undefined || props.value.length === 0}
@ -102,8 +105,8 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
<li className="input-group" key={i /* i as key prevents input component recreation on edit */}>
<DataEntryInput
slug={props.slug}
name={`${props.slug}-${i}`}
id={`${props.slug}-${i}`}
name={`${slugWithModifier}-${i}`}
id={`${slugWithModifier}-${i}`}
value={val}
disabled={!props.editableEntries || isDisabled}
onChange={(key, val) => this.edit(i, val)}
@ -132,8 +135,8 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
<div className="input-group">
<DataEntryInput
slug={props.slug}
name={`${props.slug}`}
id={`${props.slug}`}
name={slugWithModifier}
id={slugWithModifier}
value={this.state.newValue}
disabled={props.disabled}
required={props.required && values.length < 1}

7
app/src/frontend/building/data-components/numeric-data-entry.tsx
View File

@ -13,10 +13,13 @@ interface NumericDataEntryProps extends BaseDataEntryProps {
}
const NumericDataEntry: React.FunctionComponent<NumericDataEntryProps> = (props) => {
const slugWithModifier = props.slug + (props.slugModifier ?? '');
return (
<Fragment>
<DataTitleCopyable
slug={props.slug}
slugModifier={props.slugModifier}
title={props.title}
tooltip={props.tooltip}
disabled={props.disabled || props.value == undefined}
@ -25,8 +28,8 @@ const NumericDataEntry: React.FunctionComponent<NumericDataEntryProps> = (props)
<input
className="form-control"
type="number"
id={props.slug}
name={props.slug}
id={slugWithModifier}
name={slugWithModifier}
value={props.value == undefined ? '' : props.value}
step={props.step == undefined ? 1 : props.step}
max={props.max}

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

@ -11,17 +11,20 @@ interface SelectDataEntryProps extends BaseDataEntryProps {
const SelectDataEntry: React.FunctionComponent<SelectDataEntryProps> = (props) => {
const slugWithModifier = props.slug + (props.slugModifier ?? '');
return (
<Fragment>
<DataTitleCopyable
slug={props.slug}
slugModifier={props.slugModifier}
title={props.title}
tooltip={props.tooltip}
disabled={props.disabled || props.value == undefined}
copy={props.copy}
/>
<select className="form-control"
id={props.slug} name={props.slug}
id={slugWithModifier} name={slugWithModifier}
value={props.value || ''}
disabled={props.mode === 'view' || props.disabled}
required={props.required}