GGLinnk/foris-js
1
0
Fork 0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2025-06-16 13:46:16 +02:00
Code Issues Releases Activity

Fix lint.

Browse Source
This commit is contained in:
Bogdan Bodnar
2019-08-27 16:09:18 +02:00
parent 18e8e20206
commit c0d742b13b
36 changed files with 620 additions and 831 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
src/form/components/ForisForm.js
View File

@ -5,16 +5,16 @@
* See /LICENSE for more information.
*/
import React, {useEffect, useState} from 'react';
import PropTypes from 'prop-types';
import {Prompt} from 'react-router';
import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import {Spinner} from 'bootstrap/Spinner';
import {useAPIPost} from 'api/hooks';
import { Spinner } from "bootstrap/Spinner";
import { useAPIPost } from "api/hooks";
import {useForisModule, useForm} from '../hooks';
import {STATES as SUBMIT_BUTTON_STATES, SubmitButton} from './SubmitButton';
import {FailAlert, SuccessAlert} from './alerts';
import { Prompt } from "react-router";
import { useForisModule, useForm } from "../hooks";
import { STATES as SUBMIT_BUTTON_STATES, SubmitButton } from "./SubmitButton";
import { FailAlert, SuccessAlert } from "./alerts";
ForisForm.propTypes = {
/** WebSocket object see `scr/common/WebSockets.js`. */
@ -27,7 +27,7 @@ ForisForm.propTypes = {
* If it's not passed then WebSockets aren't used
* */
wsModule: PropTypes.string,
/**`foris-controller` action name to be used via WebSockets.
/** `foris-controller` action name to be used via WebSockets.
* If it's not passed then `update_settings` is used. see `src/common/WebSocketHooks.js`
* */
wsAction: PropTypes.string,
@ -45,42 +45,41 @@ ForisForm.propTypes = {
/** reForis form components. */
children: PropTypes.node.isRequired,
/** Optional override of form submit callback */
onSubmitOverridden: PropTypes.func
onSubmitOverridden: PropTypes.func,
};
ForisForm.defaultProps = {
prepData: data => data,
prepDataToSubmit: data => data,
prepData: (data) => data,
prepDataToSubmit: (data) => data,
postCallback: () => undefined,
validator: () => undefined,
disabled: false
disabled: false,
};
/** Serves as HOC for all foris forms components. */
export function ForisForm({
ws,
forisConfig,
prepData,
prepDataToSubmit,
postCallback,
validator,
disabled,
onSubmitOverridden,
children
}) {
export default function ForisForm({
ws,
forisConfig,
prepData,
prepDataToSubmit,
postCallback,
validator,
disabled,
onSubmitOverridden,
children,
}) {
const [formState, onFormChangeHandler, resetFormData] = useForm(validator, prepData);
const [forisModuleState] = useForisModule(ws, forisConfig);
useEffect(() => {
if (forisModuleState.data) {
resetFormData(forisModuleState.data)
resetFormData(forisModuleState.data);
}
}, [forisModuleState.data, resetFormData, prepData]);
const [postState, post] = useAPIPost(forisConfig.endpoint);
useEffect(() => {
if (postState.isSuccess)
postCallback();
if (postState.isSuccess) postCallback();
}, [postCallback, postState.isSuccess]);
@ -93,56 +92,57 @@ export function ForisForm({
}
function getSubmitButtonState() {
if (postState.isSending)
return SUBMIT_BUTTON_STATES.SAVING;
else if (forisModuleState.isLoading)
return SUBMIT_BUTTON_STATES.LOAD;
if (postState.isSending) return SUBMIT_BUTTON_STATES.SAVING;
if (forisModuleState.isLoading) return SUBMIT_BUTTON_STATES.LOAD;
return SUBMIT_BUTTON_STATES.READY;
}
const [alertIsDismissed, setAlertIsDismissed] = useState(false);
if (!formState.data)
return <Spinner className='row justify-content-center'/>;
if (!formState.data) return <Spinner className="row justify-content-center"/>;
const formIsDisabled = disabled || forisModuleState.isLoading || postState.isSending;
const submitButtonIsDisabled = disabled || !!formState.errors;
const childrenWithFormProps =
React.Children.map(children, child =>
React.cloneElement(child, {
formData: formState.data,
formErrors: formState.errors,
setFormValue: onFormChangeHandler,
disabled: formIsDisabled,
})
);
const childrenWithFormProps = React.Children.map(
children,
(child) => React.cloneElement(child, {
formData: formState.data,
formErrors: formState.errors,
setFormValue: onFormChangeHandler,
disabled: formIsDisabled,
}),
);
const onSubmit = onSubmitOverridden ?
onSubmitOverridden(formState.data, onFormChangeHandler, onSubmitHandler) : onSubmitHandler;
const onSubmit = onSubmitOverridden
? onSubmitOverridden(formState.data, onFormChangeHandler, onSubmitHandler)
: onSubmitHandler;
function getMessageOnLeavingPage() {
if (JSON.stringify(formState.data) === JSON.stringify(formState.initialData))
return true;
return _('Changes you made may not be saved. Are you sure you want to leave?')
if (JSON.stringify(formState.data) === JSON.stringify(formState.initialData)) return true;
return _("Changes you made may not be saved. Are you sure you want to leave?");
}
return <>
<Prompt message={getMessageOnLeavingPage}/>
{!alertIsDismissed ?
postState.isSuccess ?
<SuccessAlert onDismiss={() => setAlertIsDismissed(true)}/>
: postState.isError ?
<FailAlert onDismiss={() => setAlertIsDismissed(true)}/>
: null
: null
let alert = null;
if (!alertIsDismissed) {
if (postState.isSuccess) {
alert = <SuccessAlert onDismiss={() => setAlertIsDismissed(true)}/>;
} else if (postState.isError) {
alert = <FailAlert onDismiss={() => setAlertIsDismissed(true)}/>;
}
<form onSubmit={onSubmit}>
{childrenWithFormProps}
<SubmitButton
state={getSubmitButtonState()}
disabled={submitButtonIsDisabled}
/>
</form>
</>
}
return (
<>
<Prompt message={getMessageOnLeavingPage}/>
{alert}
<form onSubmit={onSubmit}>
{childrenWithFormProps}
<SubmitButton
state={getSubmitButtonState()}
disabled={submitButtonIsDisabled}
/>
</form>
</>
);
}