render() { return ( <Container> <Header as="h1">Login Required</Header> <Form onSubmit={this._login}> <Form.Input label="Password" type="password" name="password" onChange={this.handleChange}/> <Form.Button>Submit</Form.Button> </Form> </Container> ) }
const SignupForm = () => ( <Form> <Form.Field> <label>Email</label> <input placeholder='Your email address' /> </Form.Field> <Form.Field> <label>Password</label> <input placeholder='Your Password to login' /> </Form.Field> <Button content='Login' color='yellow' fluid size='huge' /> <a href="#" className="itemlink">Forgot Password?</a> </Form> )
render() { let remaining_words = this.props.limit - this.state.characterCount; return ( <Form> <Form.Group widths="equal"> <Form.Field control={TextArea} label="Write something cool" placeholder="Tell us what are you thinking..." onChange={this.handleChange} className="comment-box" /> </Form.Group> <span className={"badge " + (remaining_words < 0 ? "color-red" : "")}> {remaining_words}</span> </Form> ); }
connection.options.map((header) => { return ( <List.Item key={header}> <List.Content> <Form> <Form.Group widths={2}> <Form.Field width={7}> <Input value={Object.keys(header)[0]} /> </Form.Field> <Form.Field width={7}> <Input value={header[Object.keys(header)[0]]} /> </Form.Field> </Form.Group> </Form> </List.Content> </List.Item> ); })
render() { const { value, suggestions } = this.state; return ( <Form reply onSubmit={this.handlePostCommentSubmit}> <TextInput maxOptions={8} offsetY={20} minChars={1} value={value} onRequestOptions={this.debouncedRequestOptions} options={suggestions} onChange={this.handleChange} type="textarea" name="commentText" style={{ minHeight: 70, maxHeight: 70, marginBottom: "1%" }} /> <Button content="Add Comment" labelPosition="left" icon="edit" primary /> </Form> ); }
const Hook = () => { const context = useContext(Context); const {user, pass, setUser, setPass} = context; return ( <div style={{marginTop: 20}}> <h2>Hook</h2> <Form> <Form.Field> <label>Username</label> <Input value={user} onChange={e => setUser(e.target.value)} placeholder="Username" /> </Form.Field> <Form.Field> <label>Password</label> <Input value={pass} onChange={e => setPass(e.target.value)} placeholder="Password" type="password" /> </Form.Field> </Form> </div> ); }
const Original = () => ( <div> <h2>Consumer w/render prop</h2> <Context.Consumer> {context => { const {user, pass, setUser, setPass} = context; return ( <Form> <Form.Field> <label>Username</label> <Input value={user} onChange={e => setUser(e.target.value)} placeholder="Username" /> </Form.Field> <Form.Field> <label>Password</label> <Input value={pass} onChange={e => setPass(e.target.value)} placeholder="Password" type="password" /> </Form.Field> </Form> ); }} </Context.Consumer> </div> )
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> ); }
/** and so on for the rest of the Components **/ const App = (props) => { const errorLabel = <Label color="red" pointing/> return ( <Form onValidSubmit={ props.onValidSubmit } loading={ props.isLoading } > <Form.Input name="email" label="Email" validations="isEmail" validationErrors={{ isEmail: 'Email not valid' }} errorLabel={ errorLabel } /> </Form> ) }
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() { const { data, errors } = this.state return ( <Form onSubmit={this.onSubmit}> <Form.Field error={!!errors.email}> <label htmlFor="email">Email</label> <input type="email" id="email" name="email" placeholder="example@example.com" value={data.email} onChange={this.onChange} /> {errors.email && <InlineError text={errors.email}/>} </Form.Field> <Form.Field error={!!errors.password}> <label htmlFor="password">Password</label> <input type="password" id="password" name="password" placeholder="Make it secure" value={data.password} onChange={this.onChange} /> {errors.password && <InlineError text={errors.password}/>} </Form.Field> <Button primary>Login</Button> </Form> ) }
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> ); }
const SignupForm = () => ( <Form> <Form.Field> <label>Name</label> <input placeholder='Your full name' /> </Form.Field> <Form.Field> <label>Email</label> <input placeholder='Your Email Id' /> </Form.Field> <Form.Field> <label>Password</label> <input placeholder='Set Password to login' /> </Form.Field> <Form.Field> <label>Contact Number</label> <input placeholder='Your contact number' /> </Form.Field> <Form.Field> <label>Upload Resume</label> <input type="file" placeholder='Your contact number' /> </Form.Field> <Button content='Register' color='yellow' fluid size='huge' /> </Form> )
render() { return ( <Container> <Header as="h1">Login Required</Header> <Form onSubmit={this._login}> <Form.Input label="Password" type="password" name="password" onChange={this.handleChange}/> <Form.Button>Submit</Form.Button> </Form> </Container> ) }
render() { const { value, suggestions } = this.state; return ( <Form reply onSubmit={this.handlePostCommentSubmit}> <TextInput maxOptions={8} offsetY={20} minChars={1} value={value} onRequestOptions={this.debouncedRequestOptions} options={suggestions} onChange={this.handleChange} type="textarea" name="commentText" style={{ minHeight: 70, maxHeight: 70, marginBottom: "1%" }} /> <Button content="Add Comment" labelPosition="left" icon="edit" primary /> </Form> ); }