scripts/apps/contacts/components/Form/MultiTextInput.tsx
import React from 'react';
import PropTypes from 'prop-types';
import {Row, LineInput, Input} from './';
import {KEYCODES} from '../../../contacts/constants';
import {isEmpty, get, set} from 'lodash';
import {gettext} from 'core/utils';
export class MultiTextInput extends React.Component<any, any> {
static propTypes: any;
static defaultProps: any;
errorMessage: any;
constructor(props) {
super(props);
this.state = {
touched: {},
};
this.onBlur = this.onBlur.bind(this);
this.isFieldInvalid = this.isFieldInvalid.bind(this);
this.errorMessage = '';
}
onBlur(e) {
const _touched = this.state.touched;
set(_touched, e.target.name, true);
this.setState({touched: _touched});
}
isFieldInvalid(field, value, errors) {
this.errorMessage = get(this.state.touched, field, false) &&
isEmpty(value) ? gettext('This field is required.') : errors[field] || '';
return !isEmpty(this.errorMessage);
}
render() {
const {value, field, remove, onChange, label, readOnly, errors, ...props} = this.props;
return (
<Row>
<LineInput
{...props}
readOnly={readOnly}
invalid={this.isFieldInvalid(field, value, errors)}
message={this.errorMessage}
>
{label && <label className="sd-line-input__label">{label}</label>}
<Input
field={field}
value={value}
onChange={onChange}
onBlur={this.onBlur}
type={props.type}
readOnly={readOnly}
/>
{!readOnly &&
(
<div>
<a
tabIndex={0}
className="icn-btn sd-line-input__icon-right"
onClick={remove}
onKeyDown={(event) => {
if (event && event.keyCode === KEYCODES.ENTER) {
event.preventDefault();
remove();
}
}}
>
<i className="icon-trash" />
</a>
</div>
)
}
</LineInput>
</Row>
);
}
}
MultiTextInput.propTypes = {
remove: PropTypes.func,
field: PropTypes.string,
type: PropTypes.string,
value: PropTypes.string,
label: PropTypes.string,
onChange: PropTypes.func,
readOnly: PropTypes.bool,
errors: PropTypes.object,
};
MultiTextInput.defaultProps = {
readOnly: false,
value: '',
type: 'text',
};