Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | 27x 27x | import PropTypes from 'prop-types';
import { FieldArray } from 'react-final-form-arrays';
import { Form } from 'react-final-form';
import arrayMutators from 'final-form-arrays';
import EditableSettingsListFieldArray from './EditableSettingsListFieldArray';
const EditableSettingsList = ({
allowEdit = true, // A global boolean permission to turn on/off editing of all appSettings in the frontend
initialValues,
intlKey: passedIntlKey,
intlNS: passedIntlNS,
label,
labelOverrides = {},
onSave,
render, // Experimental idea, allow unique rendering per setting?
settingData
}) => {
// Fake the form save... this is super bad I know, but it's very old code and the plan is to get rid of this component
// Because it's in a single Form even though each setting really requires it's own form. It'd be more work to unpick that
// without accidentally causing some backwards compatibility issues I think. So for now we fake it
let settingToSave;
const handleFormSubmit = async (_values) => {
return onSave(settingToSave).then((res) => {
settingToSave = undefined;
return res;
});
};
return (
<Form
enableReinitialize
initialValues={initialValues}
keepDirtyOnReinitialize
mutators={arrayMutators}
navigationCheck
onSubmit={handleFormSubmit}
subscription={{ value: true }}
>
{({ handleSubmit }) => {
// Set up the setting we want to save, then trigger handleSubmit so we get "submitting" in the form.
// Yes this is ugly
const handleSave = async (setting) => {
settingToSave = setting;
return handleSubmit();
};
return (
<form onSubmit={handleSubmit}>
<FieldArray
key="editable-setting-list-field-array"
allowEdit={allowEdit}
component={EditableSettingsListFieldArray}
intlKey={passedIntlKey}
intlNS={passedIntlNS}
label={label}
labelOverrides={labelOverrides}
name="settings"
onSave={handleSave}
render={render}
settingData={settingData}
/>
</form>
);
}}
</Form>
);
};
EditableSettingsList.propTypes = {
allowEdit: PropTypes.bool,
data: PropTypes.shape({
refdatavalues: PropTypes.arrayOf(PropTypes.object)
}),
initialValues: PropTypes.object,
intlKey: PropTypes.string,
intlNS: PropTypes.string,
label: PropTypes.oneOfType([
PropTypes.string,
PropTypes.node,
PropTypes.object
]),
labelOverrides: PropTypes.object,
onSave: PropTypes.func,
};
export default EditableSettingsList;
|