const PhotoModal = ({ photo, show, onHide }) => ( photo ? ( <Modal show={show} bsSize='large' onHide={onHide}> <Modal.Header closeButton={true}> <Modal.Title>{photo.name} by {photo.user.username}</Modal.Title> </Modal.Header> <Modal.Body> <img src={photo.image_url[1]} style={{ width: '100%' }} /> </Modal.Body> </Modal> ) : null )
render() { return ( <Modal show={this.props.modal_delete.show}> <Modal.Header> <Modal.Title> Are you sure you want to delete <span>{this.props.modal_delete.username}</span>? </Modal.Title> </Modal.Header> <Modal.Footer> <Button onClick={this.userDelete}>Yes</Button> <Button onClick={this.modalHide}>No</Button> </Modal.Footer> </Modal> ) }
renderCategoryEditModal(category, index) { const CategoriesEditForm = Telescope.components.CategoriesEditForm; return ( <Modal key={index} show={this.state.openModal === index+1} onHide={this.closeModal}> <Modal.Header closeButton> <Modal.Title>Edit Category</Modal.Title> </Modal.Header> <Modal.Body> <ContextPasser currentUser={this.context.currentUser} closeCallback={this.closeModal}> <CategoriesEditForm category={category}/> </ContextPasser> </Modal.Body> </Modal> ) }
render() { return ( <div> <Button bsStyle="primary" bsSize="large" onClick={this.open} > {this.props.buttonText} </Button> <Modal show={this.state.showModal} onHide={this.close}> <Modal.Header closeButton> <Modal.Title>{this.props.title}</Modal.Title> </Modal.Header> <Modal.Body> {this.props.body} </Modal.Body> </Modal> </div> ); }
const CustomModal = props => { const { title, body, handleSave } = props; return ( <div className="static-modal"> <Modal.Dialog> <Modal.Header> <Modal.Title>{title}</Modal.Title> </Modal.Header> <Modal.Body>{body}</Modal.Body> <Modal.Footer> <Button>Close</Button> <Button bsStyle="primary" onClick={handleSave}> Save changes </Button> </Modal.Footer> </Modal.Dialog> </div> ); }
render () { return ( <div> <Modal show={this.state.show} onHide={this.handleClose}> <Modal.Header closeButton> <Modal.Title>{this.state.StepInfo.title}</Modal.Title> </Modal.Header> <Modal.Body> <StepInfoDetails StepInfo={this.state.StepInfo} metadata={this.props.userMetadata} onSubmit={(model) => {this.handleSubmit(model)}} /> </Modal.Body> <Modal.Footer> <Button onClick={this.handleClose}>Close</Button> </Modal.Footer> </Modal> </div> ) }
render() { return ( <div> <Button className='btn btn-newProject' bsStyle="primary" bsSize="large" onClick={this.open}>New Project</Button> <Modal show={this.state.showModal} onHide={this.close}> <Modal.Header closeButton> <Modal.Title>Modal heading</Modal.Title> </Modal.Header> <Modal.Body> <h4>New Project</h4> <hr /> <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> <p>Praesent sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> </Modal.Body> <Modal.Footer> <Button onClick={this.close}>Close</Button> </Modal.Footer> </Modal> </div> ); }
render() { return ( <Modal show={this.state.show} onHide={this.close}> <Modal.Header > <Modal.Title >New Component</Modal.Title> </Modal.Header> <Modal.Body > <form > <Input type='text' label='w' ref='w'/> <Input type='text' label='h' ref='h'/> <Input type='text' label='content' ref='content'/> </form> </Modal.Body> <Modal.Footer > <Button onClick={this.close}>Cancel</Button> <Button onClick={this._create}>Confirm</Button> </Modal.Footer> </Modal> ) }
render() { return ( <div {...this.props}> <Modal show={this.state.showConfig} onHide={this.closeConfig}> <Modal.Header > <Modal.Title >Config</Modal.Title> </Modal.Header> <Modal.Body > Config goes here </Modal.Body> <Modal.Footer > <Button onClick={this.closeConfig}>Cancel</Button> <Button onClick={this._applyConfig}>Confirm</Button> </Modal.Footer> </Modal> <h1 className={styles.text}>{this.state.content}</h1> </div> ) }
render() { return ( <div> <Button bsStyle="primary" onClick={this.open} id="show"> Add </Button> <Modal show={this.state.showModal} onHide={this.close}> <Modal.Header closeButton> <Modal.Title id="modalTitle">Add a Recipe</Modal.Title> </Modal.Header> <Modal.Body> <form> <FieldGroup id="ProductID" type="text" label="ID" placeholder="Enter Product ID"/> <FieldGroup id="ProductName" type="text" label="Name" placeholder="Enter Product Name"/> <FieldGroup id="ProductPrice" type="text" label="Price" placeholder="Enter Product Price"/> </form> </Modal.Body> <Modal.Footer> <Button onClick={this.add} bsStyle="primary" id="addButton">Add</Button> <Button onClick={this.close}>Close</Button> </Modal.Footer> </Modal> </div> ); }
renderSettingsModal() { const SettingsEditForm = Telescope.components.SettingsEditForm; return ( <Modal show={this.state.modalOpen} onHide={this.closeModal}> <Modal.Header closeButton> <Modal.Title>Edit Settings</Modal.Title> </Modal.Header> <Modal.Body> <ContextPasser currentUser={this.props.user} closeCallback={this.closeModal}> <SettingsEditForm/> </ContextPasser> </Modal.Body> </Modal> ) }
renderCategoryNewModal() { const CategoriesNewForm = Telescope.components.CategoriesNewForm; return ( <Modal show={this.state.openModal === 0} onHide={this.closeModal}> <Modal.Header closeButton> <Modal.Title>New Category</Modal.Title> </Modal.Header> <Modal.Body> <ContextPasser currentUser={this.context.currentUser} closeCallback={this.closeModal}> <CategoriesNewForm/> </ContextPasser> </Modal.Body> </Modal> ) }
render () { return ( <div className='static-modal'> <Modal.Dialog onHide={() => {}}> <Modal.Header> <Modal.Title>Modal title</Modal.Title> </Modal.Header> <Modal.Body> One fine body... </Modal.Body> <Modal.Footer> <Button>Close</Button> <Button bsStyle="primary">Save changes</Button> </Modal.Footer> </Modal.Dialog> </div> ) }