scripts/apps/contacts/components/Form/InputArray.tsx
import React from 'react';
import PropTypes from 'prop-types';
import {Row} from './';
import {cloneDeep} from 'lodash';
export const InputArray: React.StatelessComponent<any> = ({
field,
value,
onChange,
addButtonText,
component,
defaultValue,
readOnly,
errors,
...props
}) => {
const add = () => {
const clonedValue = cloneDeep(value);
clonedValue.push(cloneDeep(defaultValue));
onChange(field, [...clonedValue]);
};
const remove = (index) => {
const clonedValue = cloneDeep(value);
clonedValue.splice(index, 1);
onChange(field, [...clonedValue]);
};
const Component = component;
return (
<Row>
{value.map((val, index) => (
<Component
key={index}
field={`${field}[${index}]`}
onChange={onChange}
value={val}
remove={remove.bind(null, index)}
readOnly={readOnly}
errors={errors}
{...props}
/>
))}
{!readOnly && (
<button
className="btn btn-small btn--expanded"
onClick={add}
type="button"
>
{addButtonText ? addButtonText : <i className="icon-plus-large" />}
</button>
)}
</Row>
);
};
InputArray.propTypes = {
field: PropTypes.string.isRequired,
label: PropTypes.string,
value: PropTypes.array,
onChange: PropTypes.func.isRequired,
addButtonText: PropTypes.string,
component: PropTypes.func.isRequired,
defaultValue: PropTypes.any,
hint: PropTypes.string,
message: PropTypes.string,
required: PropTypes.bool,
invalid: PropTypes.bool,
readOnly: PropTypes.bool,
boxed: PropTypes.bool,
noMargin: PropTypes.bool,
errors: PropTypes.object,
};
InputArray.defaultProps = {
value: [],
defaultValue: {},
required: false,
invalid: false,
readOnly: false,
boxed: false,
noMargin: true,
errors: {},
};