Change MultiDataEntry to FC with hooks

This commit is contained in:
Maciej Ziarkowski 2021-03-15 19:32:10 +00:00
parent efb660db9e
commit 6ecd5b6819
4 changed files with 66 additions and 98 deletions

View File

@ -1,4 +1,4 @@
import React, { Component, Fragment } from 'react';
import React, { useCallback, useMemo, useState } from 'react';
import './multi-data-entry.css';
@ -6,91 +6,63 @@ import { BaseDataEntryProps } from '../data-entry';
import { DataEntryInput, TextDataEntryInputProps } from '../data-entry-input';
import { DataTitleCopyable } from '../data-title';
interface MultiDataEntryProps extends BaseDataEntryProps, TextDataEntryInputProps {
value: string[];
copyable: boolean;
editableEntries: boolean;
confirmOnEnter: boolean;
addOnAutofillSelect: boolean;
acceptAutofillValuesOnly: boolean;
copyable?: boolean;
editableEntries?: boolean;
confirmOnEnter?: boolean;
}
interface MultiDataEntryState {
newValue: string;
}
export const MultiDataEntry: React.FC<MultiDataEntryProps> = ({
editableEntries = false,
copyable = false,
confirmOnEnter = true,
...props
}) => {
const [newValue, setNewValue] = useState<string>();
class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState> {
const values = useMemo(() => props.value ?? [], [props.value]);
static defaultProps = {
editableEntries: false,
copyable: false,
confirmOnEnter: true,
addOnAutofillSelect: false,
acceptAutofillValuesOnly: false
};
const edit = useCallback((index: number, value: string) => {
const editedValues = values.slice();
editedValues.splice(index, 1, value);
props.onChange(props.slug, editedValues);
}, [values, props.onChange, props.slug]);
constructor(props) {
super(props);
this.state = {
newValue: null
};
this.setNewValue = this.setNewValue.bind(this);
this.edit = this.edit.bind(this);
this.addNew = this.addNew.bind(this);
this.remove = this.remove.bind(this);
}
getValues() {
return this.props.value == undefined ? [] : this.props.value;
}
cloneValues() {
return this.getValues().slice();
}
setNewValue(value: string) {
this.setState({newValue: value});
}
edit(index: number, value: string) {
let values = this.cloneValues();
values.splice(index, 1, value);
this.props.onChange(this.props.slug, values);
}
addNew(newValue?: string) {
// accept a newValue parameter to handle cases where the value is set and submitted at the same time
// (like with autofill select enabled) - but otherwise use the current newValue saved in state
const val = newValue ?? this.state.newValue;
/* accept a newValue parameter to handle cases where the value is set and submitted at the same time
* (like with autofill select enabled) - but otherwise use the current newValue saved in state
*/
const addNew = useCallback((newValueArg?: string) => {
const val = newValueArg ?? newValue;
if(val == undefined) return;
const values = this.cloneValues().concat(val);
this.setState({newValue: null});
this.props.onChange(this.props.slug, values);
}
remove(index: number){
const values = this.cloneValues();
values.splice(index, 1);
this.props.onChange(this.props.slug, values);
}
const editedValues = values.slice().concat(val);
setNewValue(null);
props.onChange(props.slug, editedValues);
}, [newValue, values, props.onChange, props.slug]);
const remove = useCallback((index: number) => {
const editedValues = values.slice();
editedValues.splice(index, 1);
props.onChange(props.slug, editedValues);
}, [values, props.onChange, props.slug]);
render() {
const values = this.getValues();
const props = this.props;
const isEditing = props.mode === 'edit';
const isDisabled = !isEditing || props.disabled;
const slugWithModifier = props.slug + (props.slugModifier ?? '');
return <Fragment>
return (<>
<DataTitleCopyable
slug={props.slug}
slugModifier={props.slugModifier}
title={props.title}
tooltip={props.tooltip}
disabled={props.disabled || props.value == undefined || props.value.length === 0}
copy={props.copyable ? props.copy : undefined}
copy={copyable ? props.copy : undefined}
/>
<div id={`${props.slug}-wrapper`}>
<ul className="data-link-list">
@ -108,8 +80,8 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
name={`${slugWithModifier}-${i}`}
id={`${slugWithModifier}-${i}`}
value={val}
disabled={!props.editableEntries || isDisabled}
onChange={(key, val) => this.edit(i, val)}
disabled={!editableEntries || isDisabled}
onChange={(_key, val) => edit(i, val)}
maxLength={props.maxLength}
isUrl={props.isUrl}
@ -121,7 +93,7 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
{
!isDisabled &&
<div className="input-group-append">
<button type="button" onClick={e => this.remove(i)}
<button type="button" onClick={() => remove(i)}
title="Remove"
data-index={i} className="btn btn-outline-dark"></button>
</div>
@ -137,17 +109,17 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
slug={props.slug}
name={slugWithModifier}
id={slugWithModifier}
value={this.state.newValue}
value={newValue}
disabled={props.disabled}
required={props.required && values.length < 1}
onChange={(key, val) => this.setNewValue(val)}
onConfirm={(key, val) => this.addNew(val)}
onChange={(_key, val) => setNewValue(val)}
onConfirm={(_key, val) => addNew(val)}
maxLength={props.maxLength}
placeholder={props.placeholder}
isUrl={props.isUrl}
valueTransform={props.valueTransform}
confirmOnEnter={props.confirmOnEnter}
confirmOnEnter={confirmOnEnter}
autofill={props.autofill}
showAllOptionsOnEmpty={props.showAllOptionsOnEmpty}
@ -157,15 +129,12 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
<button type="button"
className="btn btn-outline-dark"
title="Add to list"
onClick={() => this.addNew()}
disabled={this.state.newValue == undefined}
onClick={() => addNew()}
disabled={newValue == undefined}
>+</button>
</div>
</div>
}
</div>
</Fragment>;
}
}
export default MultiDataEntry;
</>)
};

View File

@ -1,7 +1,7 @@
import React, { Fragment } from 'react';
import { dataFields } from '../../config/data-fields-config';
import MultiDataEntry from '../data-components/multi-data-entry/multi-data-entry';
import { MultiDataEntry } from '../data-components/multi-data-entry/multi-data-entry';
import NumericDataEntry from '../data-components/numeric-data-entry';
import SelectDataEntry from '../data-components/select-data-entry';
import TextboxDataEntry from '../data-components/textbox-data-entry';

View File

@ -6,7 +6,7 @@ import { FieldRow } from '../../data-components/field-row';
import DataEntry, { BaseDataEntryProps } from '../../data-components/data-entry';
import { dataFields } from '../../../config/data-fields-config';
import SelectDataEntry from '../../data-components/select-data-entry';
import MultiDataEntry from '../../data-components/multi-data-entry/multi-data-entry';
import { MultiDataEntry } from '../../data-components/multi-data-entry/multi-data-entry';
import { NumberRangeDataEntry } from './number-range-data-entry';
import './dynamics-data-entry.css';

View File

@ -3,7 +3,7 @@ import React, { Fragment } from 'react';
import InfoBox from '../../components/info-box';
import { dataFields } from '../../config/data-fields-config';
import DataEntry from '../data-components/data-entry';
import MultiDataEntry from '../data-components/multi-data-entry/multi-data-entry';
import { MultiDataEntry } from '../data-components/multi-data-entry/multi-data-entry';
import withCopyEdit from '../data-container';
import { CategoryViewProps } from './category-view-props';
@ -28,7 +28,6 @@ const UseView: React.FunctionComponent<CategoryViewProps> = (props) => (
copyable={true}
autofill={true}
showAllOptionsOnEmpty={true}
addOnAutofillSelect={true}
/>
<Verification
slug="current_landuse_group"