mirror of
https://github.com/vale981/Vulcan
synced 2025-03-09 12:16:37 -04:00
c3f33cb7e0
- Moved UI portions of FormComponent to FormComponentInner.jsx in vulcan-ui-bootstrap
- Added user alert when the user navigates to another route while there are unsaved changed in the form (disabled by default)
- Added setting forms.warnUnsavedChanges and SmartForm property warnUnsavedChanges to enable user alert
- Added optional Revert button in FormSubmits to allow the user to discard any changes to the form; this is activated by passing a "revertCallback" property to SmartForm (which can be empty: () => {})
- Added two functions that form components can access in the child context: refetchForm() to refetch the document from the database (in case it was updated by a background process), isChanged() to determine if there are any unsaved changes
- For any phrases I have added to en_US.js I also added it to es_ES.js and fr_FR.js with the comment // TODO: translate
- Updated Form.clearForm and Form.mutationSuccessCallback so that the user can continue working on the document after submitting it
- The form now scrolls the flash message into view when a submit results in errors
- Fixed bugs in FormComponent.shouldComponentUpdate() and Form.getDocument()
- Fixed bug in FormComponent.handleChange() - number fields could not be cleared, only set to 0
- Fixed a bug in FormComponent.getValue() - it returned the initial value of a checkbox even after it was set to false, and a number even after it was set to 0
80 lines
2 KiB
JavaScript
80 lines
2 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { Components } from 'meteor/vulcan:core';
|
|
import { registerComponent } from 'meteor/vulcan:core';
|
|
import { FormattedMessage } from 'meteor/vulcan:i18n';
|
|
|
|
const FormSubmit = ({
|
|
submitLabel,
|
|
cancelLabel,
|
|
cancelCallback,
|
|
revertLabel,
|
|
revertCallback,
|
|
document,
|
|
deleteDocument,
|
|
collectionName,
|
|
classes,
|
|
}, {
|
|
isChanged,
|
|
clearForm,
|
|
}) => (
|
|
<div className="form-submit">
|
|
<Components.Button type="submit" variant="primary">
|
|
{submitLabel ? submitLabel : <FormattedMessage id="forms.submit" />}
|
|
</Components.Button>
|
|
|
|
{cancelCallback ? (
|
|
<a
|
|
className="form-cancel"
|
|
onClick={e => {
|
|
e.preventDefault();
|
|
cancelCallback(document);
|
|
}}
|
|
>
|
|
{cancelLabel ? cancelLabel : <FormattedMessage id="forms.cancel" />}
|
|
</a>
|
|
) : null}
|
|
|
|
{revertCallback ? (
|
|
<a
|
|
className="form-cancel"
|
|
onClick={e => {
|
|
e.preventDefault();
|
|
clearForm({ clearErrors: true, clearCurrentValues: true, clearDeletedValues: true });
|
|
revertCallback(document);
|
|
}}
|
|
>
|
|
{revertLabel ? revertLabel : <FormattedMessage id="forms.revert"/>}
|
|
</a>
|
|
) : null}
|
|
|
|
{deleteDocument ? (
|
|
<div>
|
|
<hr />
|
|
<a href="javascript:void(0)" onClick={deleteDocument} className={`delete-link ${collectionName}-delete-link`}>
|
|
<Components.Icon name="close" /> <FormattedMessage id="forms.delete" />
|
|
</a>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
|
|
FormSubmit.propTypes = {
|
|
submitLabel: PropTypes.string,
|
|
cancelLabel: PropTypes.string,
|
|
cancelCallback: PropTypes.func,
|
|
revertLabel: PropTypes.string,
|
|
revertCallback: PropTypes.func,
|
|
document: PropTypes.object,
|
|
deleteDocument: PropTypes.func,
|
|
collectionName: PropTypes.string,
|
|
classes: PropTypes.object,
|
|
};
|
|
|
|
FormSubmit.contextTypes = {
|
|
isChanged: PropTypes.func,
|
|
clearForm: PropTypes.func,
|
|
};
|
|
|
|
|
|
registerComponent('FormSubmit', FormSubmit);
|