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:
@ -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/>
|
||||
|
||||
```
|
||||
|
@ -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 }) {
|
||||
|
@ -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>
|
||||
```
|
||||
|
@ -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';
|
||||
|
||||
|
Reference in New Issue
Block a user