mirror of
https://gitlab.nic.cz/turris/reforis/foris-js.git
synced 2024-12-24 00:01:36 +01:00
Core review docs fixes.
This commit is contained in:
parent
e4e28dbce4
commit
680871de62
|
@ -1,2 +0,0 @@
|
||||||
`<ForisForm/>` is HOC which encapsulates entire form logic and provided children required props.
|
|
||||||
This component structure provides comfort API and allows to create typical Foris module forms easily.
|
|
|
@ -11,6 +11,6 @@ const [value, setValue] = useState(false);
|
||||||
value={value}
|
value={value}
|
||||||
label="Some label"
|
label="Some label"
|
||||||
helpText="Read the small text!"
|
helpText="Read the small text!"
|
||||||
onChange={e => setValue(e.target.value)}
|
onChange={event =>setValue(event.target.value)}
|
||||||
/>
|
/>
|
||||||
```
|
```
|
||||||
|
|
|
@ -11,7 +11,7 @@ const [email, setEmail] = useState('Wrong email');
|
||||||
value={email}
|
value={email}
|
||||||
label="Some label"
|
label="Some label"
|
||||||
helpText="Read the small text!"
|
helpText="Read the small text!"
|
||||||
onChange={e => setEmail(e.target.value)}
|
onChange={event =>setEmail(event.target.value)}
|
||||||
/>
|
/>
|
||||||
<button type="submit">Try to submit</button>
|
<button type="submit">Try to submit</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
|
@ -3,7 +3,7 @@ Bootstrap modal component.
|
||||||
it's required to have an element `<div id={"modal-container"}/>` somewhere on the page since modals are rendered in portals.
|
it's required to have an element `<div id={"modal-container"}/>` somewhere on the page since modals are rendered in portals.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
<div id={"modal-container"}/>
|
<div id="modal-container"/>
|
||||||
```
|
```
|
||||||
|
|
||||||
I have no idea why example doesn't work here but you can investigate HTML code and Foris project.
|
I have no idea why example doesn't work here but you can investigate HTML code and Foris project.
|
||||||
|
|
|
@ -12,6 +12,6 @@ const [value, setValue] = useState(42);
|
||||||
helpText="Read the small text!"
|
helpText="Read the small text!"
|
||||||
min='33'
|
min='33'
|
||||||
max='54'
|
max='54'
|
||||||
onChange={e => setValue(e.target.value)}
|
onChange={event =>setValue(event.target.value)}
|
||||||
/>
|
/>
|
||||||
```
|
```
|
||||||
|
|
|
@ -12,6 +12,6 @@ const [value, setValue] = useState('secret');
|
||||||
value={value}
|
value={value}
|
||||||
label="Some password"
|
label="Some password"
|
||||||
helpText="Read the small text!"
|
helpText="Read the small text!"
|
||||||
onChange={e => setValue(e.target.value)}
|
onChange={event =>setValue(event.target.value)}
|
||||||
/>
|
/>
|
||||||
```
|
```
|
||||||
|
|
|
@ -17,7 +17,7 @@ const [value, setValue] = useState(CHOICES[0].value);
|
||||||
value={value}
|
value={value}
|
||||||
name='some-radio'
|
name='some-radio'
|
||||||
choices={CHOICES}
|
choices={CHOICES}
|
||||||
onChange={e => setValue(e.target.value)}
|
onChange={event =>setValue(event.target.value)}
|
||||||
/>
|
/>
|
||||||
<p>Selected value: {value}</p>
|
<p>Selected value: {value}</p>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -10,6 +10,6 @@ const [value, setValue] = useState('Bla bla');
|
||||||
value={value}
|
value={value}
|
||||||
label="Some text"
|
label="Some text"
|
||||||
helpText="Read the small text!"
|
helpText="Read the small text!"
|
||||||
onChange={e => setValue(e.target.value)}
|
onChange={event =>setValue(event.target.value)}
|
||||||
/>
|
/>
|
||||||
```
|
```
|
||||||
|
|
73
src/form/components/ForisForm.md
Normal file
73
src/form/components/ForisForm.md
Normal file
|
@ -0,0 +1,73 @@
|
||||||
|
`<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}
|
||||||
|
forisConfig={{
|
||||||
|
endpoint: API_URLs.wan,
|
||||||
|
wsModule: "wan",
|
||||||
|
}}
|
||||||
|
prepData={prepData}
|
||||||
|
prepDataToSubmit={prepDataToSubmit}
|
||||||
|
validator={validator}
|
||||||
|
>
|
||||||
|
<WANForm />
|
||||||
|
<WAN6Form />
|
||||||
|
<MACForm />
|
||||||
|
</ForisForm>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 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 (
|
||||||
|
<>
|
||||||
|
<h3>{_("MAC")}</h3>
|
||||||
|
<CheckBox
|
||||||
|
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 } } }),
|
||||||
|
)}
|
||||||
|
|
||||||
|
{...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}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
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). |
|
||||||
|
| `disabled` | bool | Flag to disable form elements (during updates or loadings e.t.c.). |
|
|
@ -14,7 +14,6 @@ module.exports = {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Foris forms",
|
name: "Foris forms",
|
||||||
content: "docs/forms.md",
|
|
||||||
components: [
|
components: [
|
||||||
"src/form/components/ForisForm.js",
|
"src/form/components/ForisForm.js",
|
||||||
"src/form/components/alerts.js",
|
"src/form/components/alerts.js",
|
||||||
|
|
Loading…
Reference in New Issue
Block a user