render() { return ( <Dropzone className={`ignore `} onDrop={file => this.handleUpload(file[0])} > <Button icon> <Icon name="paperclip" /> </Button> </Dropzone> ); }
response.catch(error => { alerts.error(error.message) actions.setSubmitting(false); actions.resetForm() this.submitButton.ref.removeAttribute('disabled') })
renderCreateButton() { return <Button primary as={Link} to={route(`/books/create`)}> {this.props.t('link.create')} </Button> }
render() { const {t} = this.props; return <div> <h1>Add new book</h1> <BookCreateForm afterCreatePath={route('/books')}/> <Button primary style={{marginTop: '1rem'}} as={Link} to={route(`/books`)}> {t('link.back')} </Button> </div> }
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> )
datasets.map((dataset) => { return ( <Button style={styles.datasetButtons} key={dataset.id} primary onClick={() => _onDatasetChanged(dataset)} basic={dataset.id !== activeDataset.id} > {dataset.legend} </Button> ); })
const ItemVacuna = props => ( <List.Item> <List.Content floated="right"> <Button basic color="red" onClick={() => props.eliminarVacuna(props.vacuna._id)}> Eliminar </Button> </List.Content> <List.Content> <List.Header>{props.vacuna.tipoVacuna}</List.Header> Fecha de AplicaciĆ³n: {props.vacuna.fechaAplicacion} </List.Content> </List.Item> )
render() { return ( <div> <h3>{MakeUppercase(this.props.title)}</h3> <Button id="click-me-btn" onClick={this.clickHandler}>Click me!</Button> <Button id="decrease-btn" onClick={this.decrease}>-</Button> <Button id="increase-btn" onClick={this.increase}>+</Button> <p>{this.state.counter}</p> </div> ); }
render() { const {t} = this.props; return ( <div className="book"> <p style={{fontWeight: 'bold'}}>{this.state.book.title}</p> <p>{this.state.book.description}</p> <p>isbn: {this.state.book.isbn}</p> <Button primary as={Link} to={route(`/books`)}> {t('link.back')} </Button> </div> ) }
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 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> )
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 {data, incrementCounter, decrementCounter, asyncDecrement, registerNewAccount} = this.props return ( <div> <h1>Test component</h1> <h3> this is answer: {data}</h3> <Button onClick={incrementCounter} positive content="Increment"/> <Button onClick={decrementCounter} positive content="Decrement"/> <Button onClick={asyncDecrement} positive content="AsyncCrement"/> <Button onClick={registerNewAccount} positive content="New Account"/> </div> ) }