1
0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2025-06-15 13:36:35 +02:00

Fix and update docs.

This commit is contained in:
Bogdan Bodnar
2020-06-04 22:52:24 +02:00
parent 182cbe698f
commit a5e096dc00
13 changed files with 1520 additions and 20 deletions

View File

@ -1,4 +1,5 @@
Bootstrap alert component.
```jsx
import {useState} from 'react';
@ -7,14 +8,14 @@ function AlertExample(){
if (alert)
return <Alert
type='warning'
message='Some warning out there!'
onDismiss={()=>setAlert(false)}
/>;
>
Some warning out there!
</Alert>;
return <button
className='btn btn-secondary'
onClick={()=>setAlert(true)}
>Show alert again</button>;
};
<AlertExample/>
```

View File

@ -19,6 +19,8 @@ FileInput.propTypes = {
helpText: PropTypes.string,
/** Email value. */
value: PropTypes.string,
/** Allow selecting multiple files. */
multiple: PropTypes.bool,
};
export function FileInput({ ...props }) {

View File

@ -3,13 +3,39 @@ Bootstrap component for file input. Includes label and has predefined sizes and
All additional `props` are passed to the `<input type="file">` HTML component.
```js
import {useState} from 'react';
import { useState } from 'react';
const [files, setFiles] = useState([]);
<FileInput
files={files}
label="Some file"
helpText="Will be uploaded"
onChange={event =>setFiles(event.target.files)}
/>
// Note that files is not an array but FileList.
const label = files.length === 1 ? files[0].name : "Choose file";
<form className="col">
<FileInput
files={files}
label={label}
helpText="Will be uploaded"
onChange={event=>setFiles(event.target.files)}
/>
</form>
```
### FileInput with multiple files
```js
import { useState } from 'react';
const [files, setFiles] = useState([]);
// Note that files is not an array but FileList.
const label = files.length > 0 ? Array.from(files).map(file=>file.name).join(", ") : "Choose files";
<form className="col">
<FileInput
files={files}
label={label}
helpText="Will be uploaded"
onChange={event=>setFiles(event.target.files)}
multiple
/>
</form>
```

View File

@ -6,8 +6,6 @@ it's required to have an element `<div id={"modal-container"}/>` somewhere on th
<div id="modal-container"/>
```
I have no idea why example doesn't work here but you can investigate HTML code and Foris project.
```js
import {ModalHeader, ModalBody, ModalFooter} from './Modal';