99 lines
2.1 KiB
JavaScript
99 lines
2.1 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { reduxForm } from 'redux-form';
|
|
|
|
import {
|
|
FormFields,
|
|
BlockSaveButton,
|
|
BlockSaveWrapper,
|
|
formatUrlValues
|
|
} from './';
|
|
|
|
const propTypes = {
|
|
buttonText: PropTypes.string,
|
|
enableSubmit: PropTypes.bool,
|
|
errors: PropTypes.object,
|
|
fields: PropTypes.objectOf(
|
|
PropTypes.shape({
|
|
name: PropTypes.string.isRequired,
|
|
onChange: PropTypes.func.isRequired,
|
|
value: PropTypes.string.isRequired
|
|
})
|
|
),
|
|
formFields: PropTypes.arrayOf(PropTypes.string).isRequired,
|
|
handleSubmit: PropTypes.func,
|
|
hideButton: PropTypes.bool,
|
|
id: PropTypes.string.isRequired,
|
|
initialValues: PropTypes.object,
|
|
options: PropTypes.shape({
|
|
ignored: PropTypes.arrayOf(PropTypes.string),
|
|
required: PropTypes.arrayOf(PropTypes.string),
|
|
types: PropTypes.objectOf(PropTypes.string)
|
|
}),
|
|
submit: PropTypes.func.isRequired
|
|
};
|
|
|
|
export function DynamicForm({
|
|
// redux-form
|
|
errors,
|
|
fields,
|
|
handleSubmit,
|
|
fields: {
|
|
_meta: { allPristine }
|
|
},
|
|
|
|
// HOC
|
|
buttonText,
|
|
enableSubmit,
|
|
hideButton,
|
|
id,
|
|
options,
|
|
submit
|
|
}) {
|
|
return (
|
|
<form
|
|
id={`dynamic-${id}`}
|
|
onSubmit={handleSubmit((values, ...args) =>
|
|
submit(formatUrlValues(values, options), ...args)
|
|
)}
|
|
style={{ width: '100%' }}
|
|
>
|
|
<FormFields
|
|
errors={errors}
|
|
fields={fields}
|
|
formId={id}
|
|
options={options}
|
|
/>
|
|
<BlockSaveWrapper>
|
|
{hideButton ? null : (
|
|
<BlockSaveButton
|
|
disabled={
|
|
(allPristine && !enableSubmit) ||
|
|
!!Object.keys(errors).filter(key => errors[key]).length
|
|
}
|
|
>
|
|
{buttonText ? buttonText : null}
|
|
</BlockSaveButton>
|
|
)}
|
|
</BlockSaveWrapper>
|
|
</form>
|
|
);
|
|
}
|
|
|
|
DynamicForm.displayName = 'DynamicForm';
|
|
DynamicForm.propTypes = propTypes;
|
|
|
|
const DynamicFormWithRedux = reduxForm()(DynamicForm);
|
|
|
|
export default function Form(props) {
|
|
return (
|
|
<DynamicFormWithRedux
|
|
{...props}
|
|
fields={props.formFields}
|
|
form={props.id}
|
|
/>
|
|
);
|
|
}
|
|
|
|
Form.propTypes = propTypes;
|