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

Format all files with Prettier

Browse Source
This commit is contained in:
Aleksandr Gumroian
2020-08-18 15:39:00 +02:00
parent e41da48b1a
commit f8726e6012
80 changed files with 933 additions and 804 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,19 +52,25 @@ ForisForm.propTypes = {
onSubmitOverridden: PropTypes.func,
/** Reference to actual form element (useful for programmatically submitting it).
* Pass the output of useRef hook to this prop.
*/
*/
formReference: PropTypes.object,
/** reForis form components. */
children: PropTypes.node.isRequired,
// eslint-disable-next-line react/no-unused-prop-types
customWSProp(props) {
const wsModuleIsSpecified = !!(props.forisConfig && props.forisConfig.wsModule);
const wsModuleIsSpecified = !!(
props.forisConfig && props.forisConfig.wsModule
);
if (props.ws && !wsModuleIsSpecified) {
return new Error("forisConfig.wsModule should be specified when ws object is passed.");
return new Error(
"forisConfig.wsModule should be specified when ws object is passed."
);
}
if (!props.ws && wsModuleIsSpecified) {
return new Error("forisConfig.wsModule is specified without passing ws object.");
return new Error(
"forisConfig.wsModule is specified without passing ws object."
);
}
},
};
@ -95,7 +101,10 @@ export function ForisForm({
formReference,
children,
}) {
const [formState, onFormChangeHandler, resetFormData] = useForm(validator, prepData);
const [formState, onFormChangeHandler, resetFormData] = useForm(
validator,
prepData
);
const [setAlert, dismissAlert] = useAlert();
const [forisModuleState] = useForisModule(ws, forisConfig);
@ -141,29 +150,39 @@ export function ForisForm({
return SUBMIT_BUTTON_STATES.READY;
}
const formIsDisabled = (disabled
|| forisModuleState.state === API_STATE.SENDING
|| postState.state === API_STATE.SENDING);
const formIsDisabled =
disabled ||
forisModuleState.state === API_STATE.SENDING ||
postState.state === API_STATE.SENDING;
const submitButtonIsDisabled = disabled || !!formState.errors;
const childrenWithFormProps = React.Children.map(
children,
(child) => React.cloneElement(child, {
const childrenWithFormProps = React.Children.map(children, (child) =>
React.cloneElement(child, {
initialData: formState.initialData,
formData: formState.data,
formErrors: formState.errors,
setFormValue: onFormChangeHandler,
disabled: formIsDisabled,
}),
})
);
const onSubmit = onSubmitOverridden
? onSubmitOverridden(formState.data, onFormChangeHandler, onSubmitHandler)
? 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 (

53
src/form/components/ForisForm.md
View File

@ -1,8 +1,11 @@
`<ForisForm/>` is Higher-Order Component which encapsulates entire form logic and provides with children required props.
This component structure provides comfort API and allows to create typical Foris module forms easily.
`<ForisForm/>` is Higher-Order Component which encapsulates entire form logic
and provides with children required props. This component structure provides
comfort API and allows to create typical Foris module forms easily.
## Example of usage of `<ForisForm/>`
You can pass more forms as children.
```js
<ForisForm
ws={ws}
@ -24,7 +27,10 @@ You can pass more forms as children.
```js
export default function MACForm({
formData, formErrors, setFormValue, ...props
formData,
formErrors,
setFormValue,
...props
}) {
const macSettings = formData.mac_settings;
const errors = (formErrors || {}).mac_settings || {};
@ -35,38 +41,33 @@ export default function MACForm({
label={_("Custom MAC address")}
checked={macSettings.custom_mac_enabled}
helpText={HELP_TEXTS.custom_mac_enabled}
onChange={setFormValue(
(value) => ({ mac_settings: { custom_mac_enabled: { $set: value } } }),
)}
onChange={setFormValue((value) => ({
mac_settings: { custom_mac_enabled: { $set: value } },
}))}
{...props}
/>
{macSettings.custom_mac_enabled
? (
<TextInput
label={_("MAC address")}
value={macSettings.custom_mac || ""}
helpText={HELP_TEXTS.custom_mac}
error={errors.custom_mac}
required
onChange={setFormValue(
(value) => ({ mac_settings: { custom_mac: { $set: value } } }),
)}
{...props}
/>
)
: null}
{macSettings.custom_mac_enabled ? (
<TextInput
label={_("MAC address")}
value={macSettings.custom_mac || ""}
helpText={HELP_TEXTS.custom_mac}
error={errors.custom_mac}
required
onChange={setFormValue((value) => ({
mac_settings: { custom_mac: { $set: value } },
}))}
{...props}
/>
) : null}
</>
);
}
```
The <ForisForm/> passes subsequent `props` to the child components.
| Prop | Type | Description |
|----------------|--------|----------------------------------------------------------------------------|
| -------------- | ------ | -------------------------------------------------------------------------- |
| `formData` | object | Data returned from API. |
| `formErrors` | object | Errors returned after validation via validator. |
| `setFormValue` | func | Function for data update. It takes update rule as arg (see example above). |

20
src/form/components/SubmitButton.js
View File

@ -18,8 +18,7 @@ export const STATES = {
SubmitButton.propTypes = {
disabled: PropTypes.bool,
state: PropTypes.oneOf(Object.keys(STATES)
.map((key) => STATES[key])),
state: PropTypes.oneOf(Object.keys(STATES).map((key) => STATES[key])),
};
export function SubmitButton({ disabled, state, ...props }) {
@ -28,14 +27,14 @@ export function SubmitButton({ disabled, state, ...props }) {
let labelSubmitButton;
switch (state) {
case STATES.SAVING:
labelSubmitButton = _("Updating");
break;
case STATES.LOAD:
labelSubmitButton = _("Load settings");
break;
default:
labelSubmitButton = _("Save");
case STATES.SAVING:
labelSubmitButton = _("Updating");
break;
case STATES.LOAD:
labelSubmitButton = _("Load settings");
break;
default:
labelSubmitButton = _("Save");
}
return (
@ -44,7 +43,6 @@ export function SubmitButton({ disabled, state, ...props }) {
loading={loadingSubmitButton}
disabled={disableSubmitButton}
forisFormSize
{...props}
>
{labelSubmitButton}