reactstrap#Modal JavaScript Examples
The following examples show how to use
reactstrap#Modal.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: activityPopup.js From schematic-capture-fe with MIT License | 6 votes |
|
ActivityModal = (props) => {
const {
className
} = props;
const activities = useSelector((state) => state.dashboard.activities);
const [modal, setModal] = useState(false);
const toggle = () => setModal(!modal);
const deleteRead = () => {
// delete endpoint needed for activities
}
return (
<div>
<Button color="danger" onClick={toggle}>Activity</Button>
<Modal isOpen={modal} toggle={toggle} className={className}>
<ModalHeader toggle={toggle}>Activity</ModalHeader>
<ModalBody>
<Activity />
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={toggle}>Sounds Good!</Button>
<Button color="secondary" onClick={deleteRead}>Mark All Read</Button>
</ModalFooter>
</Modal>
</div>
);
}
Example #2
| Source File: index.js From HexactaLabs-NetCore_React-Final with Apache License 2.0 | 6 votes |
|
ElementRemove = ({ remove, goBack }) => {
return (
<Modal isOpen>
<ModalHeader>Eliminar producto</ModalHeader>
<ModalBody>¿Desea eliminar este producto?</ModalBody>
<ModalFooter>
<Button color="danger" onClick={remove}>
Sí
</Button>
<Button color="secondary" onClick={goBack}>
No
</Button>
</ModalFooter>
</Modal>
);
}
Example #3
| Source File: index.js From HexactaLabs-NetCore_React-Level1 with Apache License 2.0 | 6 votes |
|
ElementRemove = ({ remove, goBack }) => {
return (
<Modal isOpen>
<ModalHeader>Eliminar ProdType</ModalHeader>
<ModalBody>
¿Desea eliminar este ProdType? El sabe que quieres eliminarlo?
</ModalBody>
<ModalFooter>
<Button color="danger" onClick={remove}>
Si
</Button>
<Button color="secondary" onClick={goBack}>
No
</Button>
</ModalFooter>
</Modal>
);
}
Example #4
| Source File: index.js From HexactaLabs-NetCore_React-Level2 with Apache License 2.0 | 6 votes |
|
ModalRemove = ({ remove, goBack }) => {
return (
<Modal isOpen>
<ModalHeader>Confirmar</ModalHeader>
<ModalBody>¿Desea eliminar esta categoría?</ModalBody>
<ModalFooter>
<Button color="danger" onClick={remove}>
Sí
</Button>
<Button color="secondary" onClick={goBack}>
No
</Button>
</ModalFooter>
</Modal>
);
}
Example #5
| Source File: MediaList.js From DMS_React with GNU Affero General Public License v3.0 | 6 votes |
|
MediaList = (props) => {
const [previewVisible, setPreviewVisible] = useState();
const handleToggle = () => {
setPreviewVisible(!previewVisible);
};
return (
<Auxiliary>
<GreedImage mediaList={props.mediaList} handleToggle={handleToggle}/>
<Modal isOpen={previewVisible} toggle={handleToggle}>
<ModalHeader toggle={handleToggle}>Slide Show</ModalHeader>
<ModalBody>
<Carousel mediaList={props.mediaList}/>
</ModalBody>
</Modal>
</Auxiliary>
);
}
Example #6
| Source File: ModalConfirm.js From agenda with MIT License | 6 votes |
|
ModalConfirm = ({
message,
title,
onAccept,
onDismiss,
children,
large
}) => (
<Modal
isOpen
centered
toggle={onDismiss}
size={large ? 'lg' : null}
>
<ModalHeader toggle={onDismiss}>
{title}
</ModalHeader>
<ModalBody >
{message}
{children}
</ModalBody>
<ModalFooter>
{onAccept && (
<Button onClick={onAccept} color="primary">
<FontAwesomeIcon icon={faCheck}/>
Confirmar
</Button>
)}
<Button onClick={onDismiss}>
<FontAwesomeIcon icon={faBan}/>
Cancelar
</Button>
</ModalFooter>
</Modal>
)
Example #7
| Source File: index.js From HexactaLabs-NetCore_React-Initial with Apache License 2.0 | 6 votes |
|
ElementRemove = ({ remove, goBack }) => {
return (
<Modal isOpen>
<ModalHeader>Eliminar tienda</ModalHeader>
<ModalBody>¿Desea eliminar esta tienda?</ModalBody>
<ModalFooter>
<Button color="danger" onClick={remove}>
Si
</Button>
<Button color="secondary" onClick={goBack}>
No
</Button>
</ModalFooter>
</Modal>
);
}
Example #8
| Source File: index.js From HexactaLabs-NetCore_React-Level1 with Apache License 2.0 | 6 votes |
|
ElementRemove = ({ remove, goBack }) => {
return (
<Modal isOpen>
<ModalHeader>Eliminar tipo de producto</ModalHeader>
<ModalBody>¿Desea eliminar este tipo de producto?</ModalBody>
<ModalFooter>
<Button color="danger" onClick={remove}>
Si
</Button>
<Button color="secondary" onClick={goBack}>
No
</Button>
</ModalFooter>
</Modal>
);
}
Example #9
| Source File: index.js From HexactaLabs-NetCore_React-Initial with Apache License 2.0 | 6 votes |
|
ElementRemove = ({ remove, goBack }) => {
return (
<Modal isOpen>
<ModalHeader>Eliminar proveedor</ModalHeader>
<ModalBody>¿Desea eliminar este proveedor?</ModalBody>
<ModalFooter>
<Button color="danger" onClick={remove}>
Si
</Button>
<Button color="secondary" onClick={goBack}>
No
</Button>
</ModalFooter>
</Modal>
);
}
Example #10
| Source File: index.js From schematic-capture-fe with MIT License | 5 votes |
|
Mod = (cov_1mfbilmftm().s[17]++, styled(Modal)`
display:flex;
justify-content: space-between;
align-items: center;
width:30%;
`)
Example #11
| Source File: Modal.js From placement-portal-web with MIT License | 5 votes |
|
render() {
const company=this.state
const toggleModalEdit=this.props.toggleModalEdit
return (
<div>
<Modal isOpen={company.modalIsOpen} >
<ModalHeader toggle={ ()=>toggleModalEdit()}>
Edit Details
</ModalHeader>
<ModalBody>
<div className="grid-item"><form >
<div className="display_editGridModal">
<input type="text"className="display_addInput" defaultValue={company.name} placeholder="Name:" onChange={this.handleChange} name="name" required/>
<select className="form-control" defaultValue={company.category} id="exampleFormControlSelect1"placeholder="Category:" onChange={this.handleChange} name="category" required>
<option disabled selected hidden>Category:</option>
<option>Super-Dream</option>
<option>Dream</option>
<option>Regular</option>
</select> </div>
<div className="display_editMore" >
{
this.state.addFields.map((field,index)=>{
let position = `position-${index}`, addDets = `addDets-${index}` ,packages = `packages-${index}`,deadline = `deadline-${index}`,Interviewdate = `Interviewdate-${index}` , noOfPos = `noOfPos-${index}`
return(
<div key={index}>
<div className="display_editMoreGrid">
<input type="text" className="display_addInput"placeholder="Position:" defaultValue={field.position} data-id={index} id={position} onChange={this.handleChange} name="position" required/>
<input type="number" className="display_addInput"placeholder="Number Of Position:" defaultValue={field.noOfPos} data-id={index} id={noOfPos} onChange={this.handleChange} name="noOfPos" required min="0" />
<input type="text"className="display_addInput"placeholder="Interview Date:" defaultValue={field.Interviewdate} data-id={index} id={Interviewdate} onFocus = {this.onFocus} onBlur={this.onBlur} onChange={this.handleChange} name="Interviewdate" required />
<input type="text"className="display_addInput"placeholder="Deadline:" defaultValue={field.deadline} data-id={index} id={deadline} onFocus = {this.onFocus} onBlur={this.onBlur} onChange={this.handleChange} name="deadline" required />
<input type="text"className="display_addInput" placeholder="Package:" defaultValue={field.packages} data-id={index} id={packages} onChange={this.handleChange} name="packages" required/>
</div>
<input type="text" className="display_addInput"placeholder="Add Details" defaultValue={field.addDets} data-id={index} id={addDets} onChange={this.handleChange} name="addDets" required />
</div>
)
})
}
<button className="display_editMoreBtn" onClick={this.handleAddMore}><span className="center" style={{marginBottom:'5px'}}>+</span></button> </div>
<input type="text" className="display_addInput" defaultValue={company.link} placeholder="Link" onChange={this.handleChange} name="link" required="required" />
</form></div>
</ModalBody>
<ModalFooter>
<button type="display_submit" className="display_btnModal" type="submit" onClick={() => { this.handleSave()}}>Save</button>
<button className="display_btnModal" onClick={() => { toggleModalEdit()}} >cancel</button>
</ModalFooter>
</Modal>
</div>
)}
Example #12
| Source File: PartsCard.js From covid-break-master with MIT License | 5 votes |
|
export default function PartsCard(props) {
const {name, url, price} = props.part
return (
<div>
<Modal isOpen={props.modal} toggle={props.toggleModal}>
<ModalHeader toggle={props.toggleModal}>{name}</ModalHeader>
<ModalBody>
{props.part.model && <p>Socket Type: {props.part.model}
</p>}
{props.part.socket && <p>Socket Type: {props.part.socket}
</p>}
{props.part.cores && <p>Cores: {props.part.cores}
</p>}
{props.part.speed && <p>Speed: {props.part.speed}Mhz
</p>}
{props.part.watts && <p>Watts: {props.part.watts}
</p>}
{props.part.formFactor && <p>Form Factor: {props.part.formFactor}
</p>}
{props.part.size && <p>Size: {props.part.size}
</p>}
{props.part.modules && <p>Modules: {props.part.modules}
</p>}
{props.part.capacity && <p>Capacity: {props.part.capacity}
</p>}
{props.part.interface && <p>Interface: {props.part.interface}
</p>}
{props.part.chipset && <p>Chipset: {props.part.chipset}
</p>}
{props.part.memory && <p>Memory: {props.part.memory}
Gb
</p>}
<p>
{price}
</p>
<img
style={{
maxWidth: "100%",
maxHeight: "173px"
}}
src={url}/>
</ModalBody>
<ModalFooter>
{props.cart.items.includes(props.part) ? <button
onClick={() => {
props.cartRemove(props.part.id, props.part.name)
}}>Remove from Cart</button> : null}
<button
onClick={() => {
props.cartAdd(props.part)
}}>Add to Cart</button>
<Button color="secondary" onClick={props.toggleModal}>Close</Button>
</ModalFooter>
</Modal>
</div>
)
}
Example #13
| Source File: fakeModal.js From ErgoAuctionHouse with MIT License | 5 votes |
|
render() {
return (
<Modal
isOpen={this.props.isOpen}
toggle={this.props.close}
>
<ModalHeader toggle={this.props.close}>
<span className="fsize-1 text-muted">Potential warning</span>
</ModalHeader>
<ModalBody>
<Container>
<p className="text-danger mr-2 ml-2">
There is a similar artwork issued before this one.
<br/>
<b>Note that this message may not be accurate! Please see the potential original one and make the decision for yourself.</b>
</p>
</Container>
</ModalBody>
<ModalFooter>
<Button
className="ml-3 mr-3 btn-transition"
color="secondary"
onClick={() => {
this.props.close()
bidHelper(this.props.bid, this.props.box, this.props.modal, null, false)
}}
>
Place the bid anyway
</Button>
<Button
className="ml-3 mr-3 btn-transition"
color="secondary"
onClick={() => {
window.open(getArtworkUrl(this.props.original))
}}
>
See the potential original
</Button>
</ModalFooter>
</Modal>
);
}
Example #14
| Source File: index.js From gobench with Apache License 2.0 | 5 votes |
|
render() {
const { modal, modalCentered } = this.state
return (
<div>
<h5 className="mb-4">
<strong>Default Modals</strong>
</h5>
<div className="mb-5">
<Button color="primary" onClick={this.toggle} className="mr-3">
Launch demo modal
</Button>
<Modal isOpen={modal} toggle={this.toggle}>
<ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="light" onClick={this.toggle}>
Cancel
</Button>{' '}
<Button color="primary" onClick={this.toggle}>
Do Something
</Button>
</ModalFooter>
</Modal>
<Button color="primary" onClick={this.toggleCentered}>
Vertically centered modal
</Button>
<Modal
isOpen={modalCentered}
toggle={this.toggleCentered}
className="modal-dialog-centered"
>
<ModalHeader toggle={this.toggleCentered}>Vertically centered modal</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="light" onClick={this.toggleCentered}>
Cancel
</Button>{' '}
<Button color="primary" onClick={this.toggleCentered}>
Do Something
</Button>
</ModalFooter>
</Modal>
</div>
</div>
)
}
Example #15
| Source File: ConfigResetModal.jsx From watchmo with MIT License | 5 votes |
|
ConfigResetModal = props => {
const { buttonLabel, className, handleReset } = props;
const [modal, setModal] = useState(false);
const toggle = () => setModal(!modal);
const resetReload = () => {
handleReset();
toggle();
};
const center = true;
return (
<div>
<Button color="danger" onClick={toggle}>
{buttonLabel}
</Button>
<Modal
centered={center}
isOpen={modal}
toggle={toggle}
className={className}
>
<ModalHeader toggle={toggle}>Confirm Reset</ModalHeader>
<ModalBody>
Form data will revert to your last saved configuration. Are you sure
you want to do this?
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={resetReload}>
Reset Form
</Button>{' '}
<Button color="secondary" onClick={toggle}>
Cancel Reset
</Button>
</ModalFooter>
</Modal>
</div>
);
}
Example #16
| Source File: index.js From DMS_React with GNU Affero General Public License v3.0 | 5 votes |
|
render() {
const {onMailSend, onClose, user} = this.props;
const {to, subject, message} = this.state;
return (
<Modal className="modal-box modal-box-mail" toggle={onClose} isOpen={this.props.open}
style={{zIndex: 2600}}>
<ModalHeader className="modal-box-header bg-primary text-white">
New Message
<IconButton className="text-white"
onClick={onClose}>
<CloseIcon/>
</IconButton>
</ModalHeader>
<div className="modal-box-content d-flex flex-column">
<TextField
id="required"
label="To*"
onChange={(event) => this.setState({to: event.target.value})}
defaultValue={to}
margin="normal"/>
<TextField
id="required"
label="Subject"
onChange={(event) => this.setState({subject: event.target.value})}
value={subject}
margin="normal"
/>
<TextField
id="required"
label="Message"
onChange={(event) => this.setState({message: event.target.value})}
value={message}
multiline
rowsMax="4"
margin="normal"/>
</div>
<div className="modal-box-footer">
<Button className="attach-file jr-btn text-muted">
<i className="zmdi zmdi-attachment mr-2 zmdi-hc-2x"/> Attach File
</Button>
<Button disabled={to === ''} variant="contained" color="primary" onClick={() => {
onClose();
onMailSend(
{
'id': '15453a06c08fb021776',
'from': {
'name': user.name,
'avatar': user.avatar,
'email': user.email
},
'to': [
{
'name': to,
'email': to
}
],
'subject': subject,
'message': message,
'time': Moment().format('DD MMM'),
'read': false,
'starred': false,
'important': false,
'hasAttachments': false,
'folder': 1,
'selected': false,
'labels': [],
})
}}>
<i className="zmdi zmdi-mail-send mr-2"/> Send Message</Button>
</div>
</Modal>
);
}
Example #17
| Source File: DownloadFileModal.jsx From doc2pen with Creative Commons Zero v1.0 Universal | 5 votes |
|
DownloadFileModal = props => {
const { modal, setModal } = props;
const editContext = React.useContext(EditContext);
const [fileType, setFileType] = React.useState("PNG");
const [value, setValue] = React.useState("");
const [valueError, setValueError] = React.useState(null);
const handleDownloadFile = () => {
if (!value) setValueError("please provide file name");
else {
editContext.setAllPagesVisible(true);
editContext.downloadAction(value, fileType);
setModal(false);
setValue("");
setValueError(null);
}
};
const toggle = () => {
setModal(!modal);
setValue("");
setValueError(null);
};
const files = ["PNG", "PDF"];
return (
<Modal style={{ marginTop: "200px" }} isOpen={modal} toggle={toggle}>
<ModalBody>
<input
placeholder="What would you like to call the file?"
className={styles.modalInput}
type="text"
id="name"
value={value}
onChange={e => setValue(e.target.value)}
/>
<br />
{valueError ? <p style={{ color: "red" }}>{valueError}</p> : null}
<label className={styles.modalLabel}> Export as : </label>
<br />
{files.map(file => {
return (
<button
onClick={() => setFileType(file)}
style={{
backgroundColor: fileType === file ? "#103f5f" : "#add8e6",
color: fileType === file ? "white" : "black",
}}
className={styles.downloadLabelButton}
key={Math.random()}
>
{file} {fileType === file ? "*" : null}
</button>
);
})}
</ModalBody>
<ModalFooter>
<Button className={styles.downloadButton} onClick={handleDownloadFile}>
Download
</Button>
<Button
className={styles.closeModal}
color="secondary"
onClick={toggle}
>
X
</Button>
</ModalFooter>
</Modal>
);
}
Example #18
| Source File: AddPlaylistModal.js From Frontend with Apache License 2.0 | 5 votes |
|
PlaylistModal = (props) => {
const [modal, setModal] = useState(false)
const [playlistName, setPlaylistName] = useState()
const [playlistDes, setPlaylistDes] = useState()
function addPlaylist(e) {
const res = fetch(`https://api.codedigger.tech/lists/userlist/new`, {
method: 'POST',
headers: {
'Content-type': 'application/json',
Authorization: `Bearer ${props.acc}`,
},
body: JSON.stringify({
name: playlistName,
description: playlistDes,
public: true,
}),
})
window.location.reload()
res.catch((err) => console.log(err))
}
const toggle = () => setModal(!modal)
return (
<div>
<Button id="Add_Problem_List" color="danger" onClick={toggle}>
Add Problem List
</Button>
<Modal isOpen={modal} toggle={toggle}>
<ModalHeader toggle={toggle}>Add a Problem List</ModalHeader>
<ModalBody>
Add the name and the description for your Problem List.
</ModalBody>
<Form id="form">
<div>
<Input
type="text"
id="playlistName"
onChange={(e) => setPlaylistName(e.target.value)}
placeholder="Playlist Name"
/>
<Input
type="textarea"
onChange={(e) => setPlaylistDes(e.target.value)}
id="playlistdec"
placeholder="Playlist Description"
/>
<Button
id="Add_Problem_List_With_Details"
color="primary"
onClick={addPlaylist}
>
Add Problem List
</Button>
</div>
</Form>
<ModalFooter>
<Button id="close" color="secondary" onClick={toggle}>
Close
</Button>
</ModalFooter>
</Modal>
</div>
)
}
Example #19
| Source File: Footer.js From covid19 with MIT License | 5 votes |
|
render() {
const { lang, fullMap, fullPlot, fullTree } = this.props
if (fullMap || fullPlot || fullTree) return <div />
return (
<Fragment>
<div className="footer">
<span>
<a href="https://yliu.io">Steven Liu</a> 2020
</span>
<FaInfoCircle
data-tip={!(isMobile || isIPad13) ? i18n.ABOUT[lang] : null}
size={18}
onClick={() => this.setState({ modal: true })}
/>
<FaGithub
data-tip={!(isMobile || isIPad13) ? i18n.SOURCE_CODE[lang] : null}
size={18}
onClick={() => window.open('https://github.com/stevenliuyi/covid19')}
/>
</div>
<Modal isOpen={this.state.modal} centered={true} toggle={this.toggle}>
<ModalHeader toggle={this.toggle}>{i18n.ABOUT[lang]}</ModalHeader>
<ModalBody className="footer-about">
<div dangerouslySetInnerHTML={{ __html: i18n.ABOUT_TEXT[lang] }} />
<a
className="bmc-button"
target="_blank"
href="https://www.buymeacoffee.com/stevenliuyi"
rel="noopener noreferrer"
>
<img
src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg"
alt="Buy me a coffee"
/>
<span style={{ marginLeft: 15, fontSize: 19 }}>Buy me a coffee</span>
</a>
</ModalBody>
</Modal>
</Fragment>
)
}
Example #20
| Source File: index.js From schematic-capture-fe with MIT License | 5 votes |
|
Mod = styled(Modal)`
display: flex;
justify-content: space-between;
align-items: center;
width: 30%;
`
Example #21
| Source File: ConfigSaveModal.jsx From watchmo with MIT License | 5 votes |
|
ConfigSaveModal = props => {
const { buttonLabel, className, handleSubmit } = props;
const [modal, setModal] = useState(false);
const toggle = () => setModal(!modal);
const submitToggle = () => {
handleSubmit();
toggle();
// fileSaved();
};
const center = true;
return (
<div>
<Button color="primary" onClick={toggle}>
{buttonLabel}
</Button>
<Modal
centered={center}
isOpen={modal}
toggle={toggle}
className={className}
>
<ModalHeader toggle={toggle}>Confirm Current Configuration</ModalHeader>
<ModalBody>
Saving will overwrite your existing configuration. Are you sure you
want to do this?
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={submitToggle}>
Save
</Button>{' '}
<Button color="secondary" onClick={toggle}>
Cancel
</Button>
</ModalFooter>
</Modal>
</div>
);
}
Example #22
| Source File: PlacementEditBoard.js From GB-GCGC with MIT License | 5 votes |
|
render() {
const {redirect} = this.state;
if(redirect){
return <Redirect to={"/home"}/>
}
return (
<div className="container">
<Card>
<Card.Body>
<div className="inline">
<Card.Title>
<h5 align="center">
Notice Board-Placements
<Tooltip title="Add">
<Link onClick={this.toggleModal}>
<FontAwesomeIcon icon={faPlus} size="xs" className="p-1 fa-lg" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/>
</Link>
</Tooltip>
</h5>
</Card.Title>
</div>
<div>
<Table size="sm" responsive striped>
<thead className="p-3" style={{backgroundColor:'#2A324B',color:'white',fontSize:'24px'}}>
<tr>
<th>S.No</th>
<th>Name of the Company</th>
<th>Date</th>
<th>CTC</th>
<th colspan="2">Operations</th>
</tr>
</thead>
<tbody>
{this.userList()}
</tbody>
</Table>
</div>
</Card.Body>
</Card>
<Modal isOpen={this.state.isModalOpen} toggle={this.toggleModal}>
<ModalHeader toggle={this.toggleModal}>
Add Placement Event
</ModalHeader>
<ModalBody>
<Form onSubmit={this.handleSubmit}>
<FormGroup>
<Label htmlfor="company">Name Of The Company</Label>
<Input type="text" id="company" name="company" value={this.state.company} onChange={this.onChangeCompany} />
</FormGroup>
<FormGroup>
<Label htmlFor="date"> From </Label>
<Input type="date" id="date" name="date" value={this.state.date} onChange={this.onChangeDate} />
</FormGroup>
<FormGroup>
<Label htmlFor="CTC"> CTC </Label>
<Input type="text" id="ctc" name="ctc" value={this.state.CTC} onChange={this.onChangeCTC}/>
</FormGroup>
<Button type="submit" value="submit" color="primary">
Submit
</Button>
</Form>
</ModalBody>
</Modal>
</div>
);
}
Example #23
| Source File: CronjobDetail.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
// console.log(this.props);
const apiList = this.state.apiList;
const { params } = this.props.match;
console.log(this.state.apiList, "jobdetail");
let status = "";
let apitoData = [];
let dataFromApi = apiList.map((list) => {
console.log(list, "list");
if (list.spec.suspend == false) {
status = "READY"
} else {
status = "NOR READY"
}
return {
name: list.metadata.name,
namespace: list.metadata.namespace,
uid: list.metadata.uid,
schedule: list.spec.schedule,
successfulJobsHistoryLimit: list.spec.successfulJobsHistoryLimit,
failedJobsHistoryLimit: list.spec.failedJobsHistoryLimit,
status: status,
backoffLimit: list.spec.backoffLimit,
completions: list.spec.completions,
parallelism: list.spec.parallelism,
// restartCount: list.status.containerStatuses[0].restartCount,
qosClass: list.status.qosClass,
creationTimestamp: list.metadata.creationTimestamp
};
});
apitoData = dataFromApi;
const joblist = this.state.joblist;
const eventlist = this.state.eventlist;
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="CronJOB Detail" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg={4}>
<Card className="checkout-order-summary">
<CardBody>
{/* <div className="p-3 bg-light mb-4"> */}
<h5 className="text-dark font-weight-bold">
{params.name}
</h5>
<Card></Card>
<Row>
{/* 정보 수정 */}
<div>
<Link onClick={() => this.setState({ isModal: !this.state.modal })} to="#" className="popup-form btn btn-primary" >정보 수정</Link>
</div>
<Col sm={3}>
<Modal
size="xl"
isOpen={this.state.isModal}
centered={true}
toggle={() =>
this.setState({ isModal: !this.state.isModal })
}
>
<ModalHeader
toggle={() =>
this.setState({ isModal: !this.state.isModal })
}
>
정보수정
</ModalHeader>
<ModalBody>
<Form>
<Row>
<Col lg={6}>
<FormGroup>
<Label htmlFor="name">이름</Label>
<Input
type="text"
className="form-control"
id="name"
placeholder={params.name}
disabled
required
/>
</FormGroup>
</Col>
<Col lg={6}>
<FormGroup>
<Label htmlFor="email">Alias</Label>
<Input
type="email"
className="form-control"
id="email"
placeholder="Enter Alias"
required
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg={12}>
<FormGroup>
<Label htmlFor="subject">Description</Label>
<textarea
className="form-control"
id="subject"
rows="3"
></textarea>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg={12}>
<div className="text-right">
<Button
type="submit"
color="primary"
>
Update
</Button>
</div>
</Col>
</Row>
</Form>
</ModalBody>
</Modal>
{/* 더보기 */}
<Dropdown
isOpen={this.state.singlebtn}
toggle={() =>
this.setState({ singlebtn: !this.state.singlebtn })
}
>
<DropdownToggle color="primary" caret> 더보기 <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Rerun</DropdownItem>
<DropdownItem href="/view_yaml">View YAML</DropdownItem>
<DropdownItem>삭제</DropdownItem>
</DropdownMenu>
</Dropdown>
</Col>
{/* <h4 className="card-title">Popup with form</h4> */}
</Row>
{/* </div> */}
<div className="table-responsive">
<Table responsive className="mb-0">
<div>
<thead>
<tr>
<th style={{ width: "100%" }} className="border-top-0">상세정보</th>
</tr>
</thead>
</div>
{apitoData.map((test) => (
<tbody key={test.name}>
<tr>
<td>클러스터</td>
<td>{test.name}</td>
</tr>
<tr>
<td>프로젝트</td>
<td>{test.namespace}</td>
</tr>
<tr>
<td>Status</td>
<td>{test.status}</td>
</tr>
<tr>
<td>schedule</td>
<td>{test.schedule}</td>
</tr>
<tr>
<td>successfulJobsHistoryLimit</td>
<td>{test.successfulJobsHistoryLimit}</td>
</tr>
<tr>
<td>failedJobsHistoryLimit</td>
<td>{test.failedJobsHistoryLimit}</td>
</tr>
<tr>
<td>Created</td>
<td>{test.creationTimestamp}</td>
</tr>
<tr>
<td>Creator</td>
<td></td>
</tr>
</tbody>
))}
</Table>
</div>
</CardBody>
</Card>
</Col>
<Col lg={8}>
<Card>
<CardBody>
{/* <h4 className="card-title">Justify Tabs</h4> */}
{/* <p className="card-title-desc">
Use the tab JavaScript plugin—include it individually or through the compiled{" "} <code className="highlighter-rouge">bootstrap.js</code> file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.
</p> */}
<Nav pills className="navtab-bg nav-justified">
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "5",
})}
onClick={() => {
this.toggle1("5");
}}
>
job Records
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "6",
})}
onClick={() => {
this.toggle1("6");
}}
>
메타 데이터
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "7",
})}
onClick={() => {
this.toggle1("7");
}}
>
이벤트
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab1}>
<TabPane tabId="5" className="p-3">
<Row>
<Col sm="12">
<div >
<CronjobResource joblist={joblist} />
</div>
</Col>
</Row>
</TabPane>
<TabPane tabId="6" className="p-3">
<Row>
<Col sm="12">
<JobDetailMeta apiList={apiList} />
</Col>
</Row>
</TabPane>
<TabPane tabId="7" className="p-3">
<Row>
<Col sm="12">
<div className="table-responsive">
<Event eventlist={eventlist} />
</div>
</Col>
</Row>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #24
| Source File: Modals.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<h2 className="mt-lg mb-5">
<span>Javascript Components</span>
</h2>
<h3 className="h4 text-success font-weight-bold mb-4">Modals</h3>
<Row>
<Col md="4">
<Button
block
className="mb-3"
color="primary"
type="button"
onClick={() => this.toggleModal("defaultModal")}
>
Default
</Button>
<Modal
className="modal-dialog-centered"
isOpen={this.state.defaultModal}
toggle={() => this.toggleModal("defaultModal")}
>
<div className="modal-header">
<h6 className="modal-title" id="modal-title-default">
Type your modal title
</h6>
<button
aria-label="Close"
className="close"
data-dismiss="modal"
type="button"
onClick={() => this.toggleModal("defaultModal")}
>
<span aria-hidden={true}>×</span>
</button>
</div>
<div className="modal-body">
<p>
Far far away, behind the word mountains, far from the
countries Vokalia and Consonantia, there live the blind texts.
Separated they live in Bookmarksgrove right at the coast of
the Semantics, a large language ocean.
</p>
<p>
A small river named Duden flows by their place and supplies it
with the necessary regelialia. It is a paradisematic country,
in which roasted parts of sentences fly into your mouth.
</p>
</div>
<div className="modal-footer">
<Button color="primary" type="button">
Save changes
</Button>
<Button
className="ml-auto"
color="link"
data-dismiss="modal"
type="button"
onClick={() => this.toggleModal("defaultModal")}
>
Close
</Button>
</div>
</Modal>
</Col>
<Col md="4">
<Button
block
className="mb-3"
color="warning"
type="button"
onClick={() => this.toggleModal("notificationModal")}
>
Notification
</Button>
<Modal
className="modal-dialog-centered modal-danger"
contentClassName="bg-gradient-danger"
isOpen={this.state.notificationModal}
toggle={() => this.toggleModal("notificationModal")}
>
<div className="modal-header">
<h6 className="modal-title" id="modal-title-notification">
Your attention is required
</h6>
<button
aria-label="Close"
className="close"
data-dismiss="modal"
type="button"
onClick={() => this.toggleModal("notificationModal")}
>
<span aria-hidden={true}>×</span>
</button>
</div>
<div className="modal-body">
<div className="py-3 text-center">
<i className="ni ni-bell-55 ni-3x" />
<h4 className="heading mt-4">You should read this!</h4>
<p>
A small river named Duden flows by their place and supplies
it with the necessary regelialia.
</p>
</div>
</div>
<div className="modal-footer">
<Button className="btn-white" color="default" type="button">
Ok, Got it
</Button>
<Button
className="text-white ml-auto"
color="link"
data-dismiss="modal"
type="button"
onClick={() => this.toggleModal("notificationModal")}
>
Close
</Button>
</div>
</Modal>
</Col>
<Col md="4">
<Button
block
color="default"
type="button"
onClick={() => this.toggleModal("formModal")}
>
Form
</Button>
<Modal
className="modal-dialog-centered"
size="sm"
isOpen={this.state.formModal}
toggle={() => this.toggleModal("formModal")}
>
<div className="modal-body p-0">
<Card className="bg-secondary shadow border-0">
<CardHeader className="bg-white pb-5">
<div className="text-muted text-center mb-3">
<small>Sign in with</small>
</div>
<div className="btn-wrapper text-center">
<Button
className="btn-icon mt-2 mb-2"
color="neutral"
href="#pablo"
onClick={e => e.preventDefault()}
>
<span className="btn-inner--icon mr-1">
<img
alt="..."
src={require("assets/img/icons/common/github.svg")}
/>
</span>
<span className="btn-inner--text">Github</span>
</Button>
<Button
className="btn-icon mt-2 mb-2 ml-1"
color="neutral"
href="#pablo"
onClick={e => e.preventDefault()}
>
<span className="btn-inner--icon mr-1">
<img
alt="..."
src={require("assets/img/icons/common/google.svg")}
/>
</span>
<span className="btn-inner--text">Google</span>
</Button>
</div>
</CardHeader>
<CardBody className="px-lg-5 py-lg-5">
<div className="text-center text-muted mb-4">
<small>Or sign in with credentials</small>
</div>
<Form role="form">
<FormGroup
className={classnames("mb-3", {
focused: this.state.emailFocused
})}
>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-email-83" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Email"
type="email"
onFocus={e => this.setState({ emailFocused: true })}
onBlur={e => this.setState({ emailFocused: false })}
/>
</InputGroup>
</FormGroup>
<FormGroup
className={classnames({
focused: this.state.passwordFocused
})}
>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-lock-circle-open" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Password"
type="password"
autoComplete="off"
onFocus={e =>
this.setState({ passwordFocused: true })
}
onBlur={e =>
this.setState({ passwordFocused: false })
}
/>
</InputGroup>
</FormGroup>
<div className="custom-control custom-control-alternative custom-checkbox">
<input
className="custom-control-input"
id=" customCheckLogin"
type="checkbox"
/>
<label
className="custom-control-label"
htmlFor=" customCheckLogin"
>
<span className="text-muted">Remember me</span>
</label>
</div>
<div className="text-center">
<Button className="my-4" color="primary" type="button">
Sign in
</Button>
</div>
</Form>
</CardBody>
</Card>
</div>
</Modal>
</Col>
</Row>
</>
);
}
Example #25
| Source File: email-read.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="사용자 프로젝트" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg={12}>
<Card>
<CardBody>
<div>
<Link to="ecommerce-add-product" onClick={() => this.setState({ modal_static: true, isAlertOpen: false })} className="btn btn-success mb-2"><i className="mdi mdi-plus mr-2"></i> 추가</Link>
</div>
<div className="table-responsive mt-3">
<Table className="table-centered datatable dt-responsive nowrap " style={{ borderCollapse: "collapse", borderSpacing: 0, width: "100%" }}>
<thead className="thead-light">
<tr>
<th style={{ width: "20px" }}>
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="customercheck" />
<Label className="custom-control-label" htmlFor="customercheck"> </Label>
</div>
</th>
<th>이름</th>
<th>상태</th>
<th>워크스페이스</th>
<th>CPU</th>
<th>메모리</th>
<th>파드</th>
<th style={{ width: "120px" }}>Action</th>
</tr>
</thead>
<tbody>
{
this.state.data.map((customerData, key) =>
<tr key={key}>
<td>
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id={"customercheck" + key} />
<Label className="custom-control-label" htmlFor={"customercheck" + key}> </Label>
</div>
</td>
<td>{customerData.customer}<Link to="/dashboard"></Link></td>
<td>{customerData.email}</td>
<td>{customerData.phone}</td>
<td>
{customerData.balance}
</td>
<td>
{customerData.date}
</td>
<td>
{customerData.date}
</td>
<td>
<Link to="/dashboard" className="mr-3 text-primary" id={"edit" + key}><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip target={"edit" + key} placement="top">
Edit
</UncontrolledTooltip>
<Link to="#" className="text-danger" id={"delete" + key}><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip target={"delete" + key} placement="top">
Delete
</UncontrolledTooltip>
</td>
</tr>
)
}
</tbody>
</Table>
</div>
</CardBody>
</Card>
</Col>
</Row>
<Modal
isOpen={this.state.modal_static}
toggle={this.tog_static}
backdrop="static"
centered
size="lg"
>
<ModalHeader toggle={() => this.setState({ modal_static: false })}>
Add Customer Details
</ModalHeader>
<ModalBody>
<AvForm onValidSubmit={this.addCustomer}>
<Row>
<Col lg={12}>
<Alert color="success" isOpen={this.state.isAlertOpen} toggle={() => this.setState({ isAlertOpen: false })}>
Data Added Successfully...!
</Alert>
<FormGroup>
<Label htmlFor="name">Customer Name</Label>
<AvField
name="custname"
type="text"
className="form-control"
id="custname"
placeholder="Enter Customer Name"
required
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg={4}>
<FormGroup>
<Label htmlFor="email">Email</Label>
<AvField
name="custemail"
type="email"
className="form-control"
id="custemail"
placeholder="Enter Email"
required
/>
</FormGroup>
</Col>
<Col lg={4}>
<FormGroup>
<Label htmlFor="email">Phone Number</Label>
<AvField
name="phonenumber"
type="number"
className="form-control"
id="phonenumber"
placeholder="Enter Phone Number"
required
/>
</FormGroup>
</Col>
<Col lg={4}>
<FormGroup>
<Label htmlFor="email">Wallet Balance</Label>
<AvField
name="wBalance"
type="number"
className="form-control"
id="wBalance"
placeholder="Wallet Balance"
required
/>
</FormGroup>
</Col>
</Row>
<ModalFooter>
<Button type="button" color="light" onClick={() => this.setState({ modal_static: false })}>Calcel</Button>
<Button type="submit" color="primary">Add</Button>
</ModalFooter>
</AvForm>
</ModalBody>
</Modal>
</Container>
</div>
</React.Fragment>
);
}
Example #26
| Source File: SectionJavaScript.js From Website2020 with MIT License | 4 votes |
|
// core components
function SectionJavaScript() {
const [modal, setModal] = React.useState(false);
const toggleModal = () => {
setModal(!modal);
};
return (
<>
<div className="section javascript-components">
<Container>
<div className="title">
<h2>Javascript Components</h2>
</div>
<Row id="modals">
<Col md="6">
<div className="title">
<h3>Modal</h3>
</div>
{/* Button trigger modal */}
<Button
className="btn-round"
color="danger"
outline
type="button"
onClick={toggleModal}
>
Launch demo modal
</Button>
{/* Modal */}
<Modal isOpen={modal} toggle={toggleModal}>
<div className="modal-header">
<button
aria-label="Close"
className="close"
type="button"
onClick={toggleModal}
>
<span aria-hidden={true}>×</span>
</button>
<h5
className="modal-title text-center"
id="exampleModalLabel"
>
Modal title
</h5>
</div>
<div className="modal-body">
Far far away, behind the word mountains, far from the
countries Vokalia and Consonantia, there live the blind texts.
Separated they live in Bookmarksgrove right at the coast of
the Semantics, a large language ocean. A small river named
Duden flows by their place and supplies it with the necessary
regelialia. It is a paradisematic country, in which roasted
parts of sentences fly into your mouth. Even the all-powerful
Pointing has no control about the blind texts it is an almost
unorthographic life One day however a small line of blind text
by the name of Lorem Ipsum decided to leave for the far World
of Grammar.
</div>
<div className="modal-footer">
<div className="left-side">
<Button
className="btn-link"
color="default"
type="button"
onClick={toggleModal}
>
Never mind
</Button>
</div>
<div className="divider" />
<div className="right-side">
<Button className="btn-link" color="danger" type="button">
Delete
</Button>
</div>
</div>
</Modal>
</Col>
<Col md="6">
<div className="title">
<h3>Popovers</h3>
</div>
<Button
className="btn-round mr-1"
color="danger"
id="tooltip344834141"
outline
onClick={e => e.target.focus()}
>
On top
</Button>
<UncontrolledPopover
placement="top"
target="tooltip344834141"
trigger="focus"
>
<PopoverHeader>Popover on top</PopoverHeader>
<PopoverBody>
Here will be some very useful information about this popover.
</PopoverBody>
</UncontrolledPopover>
<Button
className="btn-round mr-1"
color="danger"
id="tooltip493417725"
outline
onClick={e => e.target.focus()}
>
On bottom
</Button>
<UncontrolledPopover
placement="bottom"
target="tooltip493417725"
trigger="focus"
>
<PopoverHeader>Popover on bottom</PopoverHeader>
<PopoverBody>
Here will be some very useful information about this popover.
</PopoverBody>
</UncontrolledPopover>
<Button
className="btn-round mr-1"
color="danger"
id="tooltip746845223"
outline
onClick={e => e.target.focus()}
>
On left
</Button>
<UncontrolledPopover
placement={window.innerWidth < 768 ? "top" : "left"}
target="tooltip746845223"
trigger="focus"
>
<PopoverHeader>Popover on left</PopoverHeader>
<PopoverBody>
Here will be some very useful information about this popover.
</PopoverBody>
</UncontrolledPopover>
<Button
className="btn-round"
color="danger"
id="tooltip909471006"
outline
onClick={e => e.target.focus()}
>
On right
</Button>
<UncontrolledPopover
placement={window.innerWidth < 768 ? "top" : "right"}
target="tooltip909471006"
trigger="focus"
>
<PopoverHeader>Popover on right</PopoverHeader>
<PopoverBody>
Here will be some very useful information about this popover.
</PopoverBody>
</UncontrolledPopover>
</Col>
<br />
<Col md="6">
<div className="title">
<h3>Datepicker</h3>
</div>
<Row>
<Col sm="6">
<FormGroup>
<InputGroup className="date" id="datetimepicker">
<ReactDatetime
inputProps={{
placeholder: "Datetime Picker Here"
}}
/>
<InputGroupAddon addonType="append">
<InputGroupText>
<span className="glyphicon glyphicon-calendar">
<i aria-hidden={true} className="fa fa-calendar" />
</span>
</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
</Col>
</Row>
</Col>
<Col md="6">
<div className="title">
<h3>Tooltips</h3>
</div>
<Button
className="btn-round mr-1"
color="danger"
id="tooltip392938669"
outline
>
On left
</Button>
<UncontrolledTooltip
delay={0}
placement="left"
target="tooltip392938669"
>
On left
</UncontrolledTooltip>
<Button
className="btn-round mr-1"
color="danger"
id="tooltip354225297"
outline
>
On right
</Button>
<UncontrolledTooltip
delay={0}
placement="right"
target="tooltip354225297"
>
On right
</UncontrolledTooltip>
<Button
className="btn-round mr-1"
color="danger"
id="tooltip739061283"
outline
>
On top
</Button>
<UncontrolledTooltip
delay={0}
placement="top"
target="tooltip739061283"
>
On top
</UncontrolledTooltip>
<Button
className="btn-round"
color="danger"
id="tooltip984013562"
outline
>
On bottom
</Button>
<UncontrolledTooltip
delay={0}
placement="bottom"
target="tooltip984013562"
>
On bottom
</UncontrolledTooltip>
</Col>
</Row>
<div className="title">
<h3>Carousel</h3>
</div>
</Container>
</div>{" "}
</>
);
}
Example #27
| Source File: Modals.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i> Bootstrap Modals
</CardHeader>
<CardBody>
<Button onClick={this.toggle} className="mr-1">Launch demo modal</Button>
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
<ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
<Button color="secondary" onClick={this.toggle}>Cancel</Button>
</ModalFooter>
</Modal>
<Button onClick={this.toggleLarge} className="mr-1">Launch large modal</Button>
<Modal isOpen={this.state.large} toggle={this.toggleLarge}
className={'modal-lg ' + this.props.className}>
<ModalHeader toggle={this.toggleLarge}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggleLarge}>Do Something</Button>{' '}
<Button color="secondary" onClick={this.toggleLarge}>Cancel</Button>
</ModalFooter>
</Modal>
<Button onClick={this.toggleSmall} className="mr-1">Launch small modal</Button>
<Modal isOpen={this.state.small} toggle={this.toggleSmall}
className={'modal-sm ' + this.props.className}>
<ModalHeader toggle={this.toggleSmall}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggleSmall}>Do Something</Button>{' '}
<Button color="secondary" onClick={this.toggleSmall}>Cancel</Button>
</ModalFooter>
</Modal>
<hr />
<Button color="primary" onClick={this.togglePrimary} className="mr-1">Primary modal</Button>
<Modal isOpen={this.state.primary} toggle={this.togglePrimary}
className={'modal-primary ' + this.props.className}>
<ModalHeader toggle={this.togglePrimary}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.togglePrimary}>Do Something</Button>{' '}
<Button color="secondary" onClick={this.togglePrimary}>Cancel</Button>
</ModalFooter>
</Modal>
<Button color="success" onClick={this.toggleSuccess} className="mr-1">Success modal</Button>
<Modal isOpen={this.state.success} toggle={this.toggleSuccess}
className={'modal-success ' + this.props.className}>
<ModalHeader toggle={this.toggleSuccess}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="success" onClick={this.toggleSuccess}>Do Something</Button>{' '}
<Button color="secondary" onClick={this.toggleSuccess}>Cancel</Button>
</ModalFooter>
</Modal>
<Button color="warning" onClick={this.toggleWarning} className="mr-1">Warning modal</Button>
<Modal isOpen={this.state.warning} toggle={this.toggleWarning}
className={'modal-warning ' + this.props.className}>
<ModalHeader toggle={this.toggleWarning}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="warning" onClick={this.toggleWarning}>Do Something</Button>{' '}
<Button color="secondary" onClick={this.toggleWarning}>Cancel</Button>
</ModalFooter>
</Modal>
<Button color="danger" onClick={this.toggleDanger} className="mr-1">Danger modal</Button>
<Modal isOpen={this.state.danger} toggle={this.toggleDanger}
className={'modal-danger ' + this.props.className}>
<ModalHeader toggle={this.toggleDanger}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="danger" onClick={this.toggleDanger}>Do Something</Button>{' '}
<Button color="secondary" onClick={this.toggleDanger}>Cancel</Button>
</ModalFooter>
</Modal>
<Button color="info" onClick={this.toggleInfo} className="mr-1">Info modal</Button>
<Modal isOpen={this.state.info} toggle={this.toggleInfo}
className={'modal-info ' + this.props.className}>
<ModalHeader toggle={this.toggleInfo}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggleInfo}>Do Something</Button>{' '}
<Button color="secondary" onClick={this.toggleInfo}>Cancel</Button>
</ModalFooter>
</Modal>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
Example #28
| Source File: index.js From DMS_React with GNU Affero General Public License v3.0 | 4 votes |
|
WriteBox = (props) => {
const [commentText, setCommentText] = useState('');
const [previewVisible, setPreviewVisible] = useState(false);
const [previewImage, setPreviewImage] = useState('');
const [fileList, setFileList] = useState([]);
const [isOpen, setIsOpen] = useState(false);
const handleCancel = () => {
setPreviewVisible(false)
};
const onDrop = useCallback(acceptedFiles => {
setFileList(acceptedFiles.map(file => URL.createObjectURL(file)));
}, []);
const handleClickImage = () => {
setIsOpen(!isOpen);
};
const handleAddPost = () => {
console.log("send image list", fileList)
props.addPost(commentText, fileList);
setCommentText('');
setPreviewVisible('');
setPreviewImage('');
setFileList([]);
setIsOpen(false);
};
const onChange = (e) => {
setCommentText(e.target.value);
};
const isEnabled = fileList.length === 0 && commentText === "";
const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop});
return (
<Card className="jr-card">
<div className="media mb-2">
<Avatar className="size-50 mr-3" src={props.user.image}/>
<div className="media-body">
<TextField
id="exampleTextarea"
placeholder="Whats in your mind?"
label="Whats in your mind?"
value={commentText}
onChange={(event) => onChange(event)}
multiline
fullWidth
className="jr-wall-textarea"
margin="none"
variant="outlined"
rows="4"
/>
</div>
</div>
<div className="jr-clearfix">
{isOpen === true ? <div className="d-flex flex-row">
{console.log(fileList)}
<ul className="list-inline mb-3 mr-2">
{fileList.map((file, index) =>
<li className="mb-1 mr-0 list-inline-item align-top" key={index}>
<img alt="..." className="size-60 rounded" src={file}/>
</li>
)
}
</ul>
<div className='pointer' {...getRootProps()}>
<input {...getInputProps()} />
{
isDragActive ?
<i className="zmdi zmdi-collection-image"/> :
<i className="zmdi zmdi-collection-image"/>
}
</div>
</div>
: null}
<Divider/>
<Modal isOpen={previewVisible} toggle={handleCancel}>
<ModalHeader>Slide Show</ModalHeader>
<img alt="example" style={{width: '100%'}} src={previewImage}/>
</Modal>
</div>
<div className="d-flex flex-row align-items-center mt-2">
<div className="pointer" onClick={handleClickImage}>
<i className="zmdi zmdi-camera mr-2 jr-fs-xl d-inline-flex align-middle"/>
<span className="jr-fs-sm"> Add Photos/Album </span>
</div>
<Button color="primary" size='small' className="ml-auto mb-0"
disabled={(isEnabled) ? "disabled" : ""}
onClick={handleAddPost}>SEND
</Button>
</div>
</Card>
)
}
Example #29
| Source File: Search.js From hivemind with Apache License 2.0 | 4 votes |
|
export default function Search() {
const { cyWrapper } = useContext(GlobalContext)
const [data, setData] = useState([])
const [modal, setModal] = useState(false)
const { cy, viewApi } = cyWrapper
const toggle = () => {
const { cy } = cyWrapper
setData(
cy.nodes(':visible').map((node) => {
const data = node.data()
const path = getPath(node)
const item = pick(data, 'id', 'title')
item.path = path.join(' ⟶ ')
item.depth = path.length - 1
return item
})
)
setModal(!modal)
}
const columns = [
{
dataField: 'title',
text: 'Title',
sort: true,
filter: textFilter(),
},
{
dataField: 'path',
text: 'Path',
sort: true,
filter: textFilter(),
},
{
dataField: 'depth',
text: 'Depth',
sort: true,
filter: numberFilter(),
},
]
const selectRow = {
mode: 'radio',
clickToSelect: true,
bgColor: '#00BFFF',
onSelect: (row) => {
const node = cy.$id(row.id)
viewApi.zoomToSelected(node)
viewApi.removeHighlights(cy.elements())
viewApi.highlight(node)
toggle()
},
}
return (
<>
<ToolTippedButton
tooltip="Search"
className="ml-1"
outline
color="secondary"
id="search"
onClick={toggle}
>
<SearchIcon size={16} />
</ToolTippedButton>
<Modal
isOpen={modal}
toggle={toggle}
style={{ minWidth: '50vw', maxWidth: '90vw' }}
fade={false}
>
<ModalHeader toggle={toggle}>
Search <small className="text-muted">(Jump to Node)</small>
</ModalHeader>
<ModalBody>
<BootstrapTable
bootstrap4
keyField="id"
data={data}
columns={columns}
hover
condensed
selectRow={selectRow}
filter={filterFactory()}
wrapperClasses="search"
defaultSorted={[{ dataField: 'depth', order: 'asc' }]}
defaultSortDirection={'asc'}
/>
</ModalBody>
</Modal>
</>
)
}
