const ModalOk = props => ( <Modal centered open={props.estado}> <Modal.Header>{props.titulo}</Modal.Header> <Modal.Actions> <Button color="green" onClick={props.cerrar} inverted> <Icon name="checkmark" /> OK ! </Button> </Modal.Actions> </Modal> )
render() { const {open,item} = this.props; return( <Modal open={open} onClose={this.props.onClose}> <Modal.Header>Add position</Modal.Header> <Modal.Content image> <Modal.Description> </Modal.Description> </Modal.Content> </Modal> ) }
const newProjectModal = () => { return ( <Modal open={addProject} onClose={() => setAddProject(false)} size="tiny" closeIcon> <ProjectForm onComplete={_onProjectCreated} /> </Modal> ); }
render() { const { open, size } = this.state return ( <div> <Button onClick={this.show('mini')} className="white-button">Login</Button> <Modal size={size} open={open} onClose={this.close} closeIcon> <Modal.Header>Login</Modal.Header> <Modal.Content> <Login/> </Modal.Content> </Modal> </div> ) }
const AnotherModal = (props) => { const {onClose} = props; return ( <Modal closeIcon="close" open={true} onClose={onClose}> <Modal.Header>Test Modal</Modal.Header> <Modal.Content> <Modal.Description> <p>Another Test Modal...nothing to see here</p> </Modal.Description> </Modal.Content> </Modal> ); }
render() { const { open, size } = this.state return ( <div> <Modal size={size} open={open} onClose={this.close} trigger={<Menu.Item name='signup' onClick={this.handleItemClick} />} closeIcon> <Modal.Header>Sign Up</Modal.Header> <Modal.Content> <Signup/> </Modal.Content> </Modal> </div> ) }
export function ModalForLoggedIn({ postId }) { return ( <Modal trigger={<Icon name="ellipsis horizontal" />}> <Modal.Content> <Modal.Description> <Button as={Link} to={`/p/${postId}`} size="big" fluid> Go to post </Button> <Button size="big" fluid> Copy link </Button> </Modal.Description> </Modal.Content> </Modal> ); }
const ModalModalExample = () => ( <Modal trigger={<Button>Show Modal</Button>}> <Modal.Header>Select a Photo</Modal.Header> <Modal.Content image> <Image wrapped size='medium' src='https://react.semantic-ui.com/images/avatar/large/rachel.png' /> <Modal.Description> <Header>Default Profile Image</Header> <p>We've found the following gravatar image associated with your e-mail address.</p> <p>Is it okay to use this photo?</p> <Loader active inline='centered' /> </Modal.Description> </Modal.Content> </Modal> )
render() { const { open } = this.state; return ( <Modal open={open} onOpen={this.open} onClose={this.close} size="small" trigger={ <Button size="big" content="Update profile picture" primary fluid /> } > <Modal.Header>Select profile picture</Modal.Header> <Modal.Content> <ProfilePictureForm /> </Modal.Content> </Modal> ); }
/* Modal to invite team members */ const invitationModal = () => { return ( <Modal open={addMembersModal} onClose={() => setAddMembersModal(false)} size="small" closeIcon > <InviteMembersForm skipTeamInvite={() => setAddMembersModal(false)} /> </Modal> ); }
const ModalError = props => ( <Modal centered open={props.estado}> <Modal.Header color="red">Hubo un problema. Favor intenta nuevamente</Modal.Header> <Modal.Actions> <Button color="orange" onClick={props.cerrar} inverted> <Icon name="checkmark" /> OK ! </Button> </Modal.Actions> </Modal> )
render() { const { open, size } = this.state return ( <div> <Button onClick={this.show('mini')} className="white-button">Sign Up</Button> <Modal size={size} open={open} onClose={this.close} closeIcon> <Modal.Header>Sign Up</Modal.Header> <Modal.Content> <Signup/> </Modal.Content> </Modal> </div> ) }
const TestModal = (props) => { const {closeModal} = props; return ( <Modal closeIcon="close" open={true} onClose={closeModal}> <Modal.Header>Test Modal</Modal.Header> <Modal.Content> <Modal.Description> <p>Test Modal...nothing to see here</p> </Modal.Description> </Modal.Content> </Modal> ); }
export function ModalForLoggedIn({ postId }) { return ( <Modal trigger={<Icon name="ellipsis horizontal" />}> <Modal.Content> <Modal.Description> <Button as={Link} to={`/p/${postId}`} size="big" fluid> Go to post </Button> <Button size="big" fluid> Copy link </Button> </Modal.Description> </Modal.Content> </Modal> ); }
render() { const { open } = this.state; return ( <Modal open={open} onOpen={this.open} onClose={this.close} size="small" trigger={ <Button size="big" content="Update profile picture" primary fluid /> } > <Modal.Header>Select profile picture</Modal.Header> <Modal.Content> <ProfilePictureForm /> </Modal.Content> </Modal> ); }