const MensajeDatosIncompletos = props => ( <Message negative> <Message.Header> Oops... Hay un problema con los datos ingresados </Message.Header> <p>{props.mensaje}</p> </Message> )
render() { // the style contains only the margin given as offset // options contains all alert given options // message is the alert message... // close is a function that closes the alert const {style, options, message, close} = this.props; const props = {[options.type]: true}; return ( <Message {...props} onDismiss={close}> {message} </Message> ) }
const UserNotFound = () => { return ( <Message icon error> <Icon name='warning' /> <Message.Content> <Message.Header>Username Not Found</Message.Header> The username you supplied was not found, therefore no repositories can be listed! </Message.Content> </Message> ); }
// Component const Notification = () => { // state const { message: { open, success, message } } = useSelector(state => state.common) const dispatch = useDispatch() // render return ( open && <Message onClick={() => dispatch(messageHide())} style={{ position: 'fixed', bottom: 0, left: 0, margin: '2em' }} floating > <Message.Header>{ success ? '✅ Success' : '❌ Error' }</Message.Header> <p>{ message }</p> </Message> ) }
render() { return ( <Form onSubmit={this.onSubmit} error={!!this.state.errorMessage}> <Form.Field> <label>Amount to Contribute</label> <Input value={this.state.value} onChange={event => this.setState({ value: event.target.value })} label="ether" labelPosition="right" /> </Form.Field> <Message error header="Oops!" content={this.state.errorMessage} /> <Button primary loading={this.state.loading}> Contribute </Button> </Form> ) }
render() { return ( <Layout> <h3>Create a Campaign</h3> <Form onSubmit={this.onSubmit} error={!!this.state.errorMessage}> <Form.Field> <label>Minimum Contribution</label> <Input label="wei" labelPosition="right" value={this.state.minimumContribution} onChange={event => this.setState({ minimumContribution: event.target.value })} /> </Form.Field> <Message error header="Opps!" content={this.state.errorMessage} /> <Button loading={this.state.loading} primary>Create!</Button> </Form> </Layout> ); }
// <div className="loading">Loading…</div> function SecondtStep({ cropImgSrc, message }) { return ( <div className="edit-post"> {message} <AddTagsToImage cropImgSrc={cropImgSrc} /> <div> <Message size="large" color="blue"> Click on image to tag people </Message> </div> <div> <Map /> </div> <div> <Message size="large" color="blue"> Type @ to get suggestions </Message> <AddPostTextArea /> </div> </div> ); }
renderField({ input, type, meta: { touched, error }, ...custom }) { const hasError = touched && error !== undefined; return ( <Form.Field> { !hasError && <Message error header="Error" content={error} />} <Form.Input iconPosition="left" type={type} error={hasError} {...input} {...custom} /> {/* eslint-disable-line */} {touched && ((error && ( <Label size="medium" style={{ marginTop: -30 }} basic pointing> {" "} {error} {" "} </Label> )))} </Form.Field> ); }
render() { return ( <Form error={!!this.state.errorMessage} onSubmit={this.onSubmit}> <Form.Field> <label>Amount to Contribute</label> <Input value={this.state.value} label="ether" labelPosition="right" onChange={this.onChange} /> </Form.Field> <Button primary loading={this.state.loading}> Contribute! </Button> <Message error header="Oops!" content={this.state.errorMessage} /> </Form> ); }
render() { let errorJSX = ( <Message negative header="El campo no puede estar vacio" content="Favor de ingresar el tipo de vacuna" /> ); if (!this.state.error) { errorJSX = null; } return ( <Form onSubmit={this.agregaVacuna}> <Header as="h3" content="Adición de vacuna" /> <Form.Input fluid label="Tipo de Vacuna" placeholder="Tipo de Vacuna" onChange={this.tipoVacunaOnChangeHandler} value={this.state.tipoVacuna} /> {errorJSX} <BotonAnimado fluid contenido="Agregar vacuna" icono="add" /> </Form> ); }
renderLoginFailureMessage(message: string) { return ( <Message negative size="tiny"> <p>{message}</p> </Message> ); }
const Error = () => ( <Message negative> <Message.Header>Oopss... Ocurrió un error</Message.Header> <Message.Content> Favor de intentar otro perfil o contactar a servicio técnico. </Message.Content> </Message> )
// <div className="loading">Loading…</div> function SecondtStep({ cropImgSrc, message }) { return ( <div className="edit-post"> {message} <AddTagsToImage cropImgSrc={cropImgSrc} /> <div> <Message size="large" color="blue"> Click on image to tag people </Message> </div> <div> <Map /> </div> <div> <Message size="large" color="blue"> Type @ to get suggestions </Message> <AddPostTextArea /> </div> </div> ); }