+
```
I have no idea why example doesn't work here but you can investigate HTML code and Foris project.
diff --git a/src/bootstrap/NumberInput.md b/src/bootstrap/NumberInput.md
index a2c7fb6..098efdf 100644
--- a/src/bootstrap/NumberInput.md
+++ b/src/bootstrap/NumberInput.md
@@ -12,6 +12,6 @@ const [value, setValue] = useState(42);
helpText="Read the small text!"
min='33'
max='54'
- onChange={e => setValue(e.target.value)}
+ onChange={event =>setValue(event.target.value)}
/>
```
diff --git a/src/bootstrap/PasswordInput.md b/src/bootstrap/PasswordInput.md
index 7eef4aa..c0f2ed4 100644
--- a/src/bootstrap/PasswordInput.md
+++ b/src/bootstrap/PasswordInput.md
@@ -12,6 +12,6 @@ const [value, setValue] = useState('secret');
value={value}
label="Some password"
helpText="Read the small text!"
- onChange={e => setValue(e.target.value)}
+ onChange={event =>setValue(event.target.value)}
/>
```
diff --git a/src/bootstrap/RadioSet.md b/src/bootstrap/RadioSet.md
index 8c29017..5ccc534 100644
--- a/src/bootstrap/RadioSet.md
+++ b/src/bootstrap/RadioSet.md
@@ -17,7 +17,7 @@ const [value, setValue] = useState(CHOICES[0].value);
value={value}
name='some-radio'
choices={CHOICES}
- onChange={e => setValue(e.target.value)}
+ onChange={event =>setValue(event.target.value)}
/>
Selected value: {value}
>
diff --git a/src/bootstrap/TextInput.md b/src/bootstrap/TextInput.md
index 26472e6..944d01c 100644
--- a/src/bootstrap/TextInput.md
+++ b/src/bootstrap/TextInput.md
@@ -10,6 +10,6 @@ const [value, setValue] = useState('Bla bla');
value={value}
label="Some text"
helpText="Read the small text!"
- onChange={e => setValue(e.target.value)}
+ onChange={event =>setValue(event.target.value)}
/>
```
diff --git a/src/form/components/ForisForm.md b/src/form/components/ForisForm.md
new file mode 100644
index 0000000..c3fa814
--- /dev/null
+++ b/src/form/components/ForisForm.md
@@ -0,0 +1,73 @@
+`
` 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 `
`
+You can pass more forms as children.
+```js
+
+
+
+
+
+```
+
+### Example of children forms `props` usage
+
+```js
+export default function MACForm({
+ formData, formErrors, setFormValue, ...props
+}) {
+ const macSettings = formData.mac_settings;
+ const errors = (formErrors || {}).mac_settings || {};
+ return (
+ <>
+
{_("MAC")}
+
({ mac_settings: { custom_mac_enabled: { $set: value } } }),
+ )}
+
+ {...props}
+ />
+ {macSettings.custom_mac_enabled
+ ? (
+ ({ mac_settings: { custom_mac: { $set: value } } }),
+ )}
+
+ {...props}
+ />
+ )
+ : null}
+ >
+ );
+}
+```
+The 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). |
+| `disabled` | bool | Flag to disable form elements (during updates or loadings e.t.c.). |
diff --git a/styleguide.config.js b/styleguide.config.js
index a34211e..128925c 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -14,7 +14,6 @@ module.exports = {
},
{
name: "Foris forms",
- content: "docs/forms.md",
components: [
"src/form/components/ForisForm.js",
"src/form/components/alerts.js",