const InputText = (props) => { const { inputType, item, hideLabel, handlePayload, disabled } = props; return ( <Form.Group> { !hideLabel && <Form.Label>{inputType.label}</Form.Label> } <Form.Control type={inputType.type} placeholder={inputType.placeholder} name={inputType.name} onChange={handlePayload} defaultValue={item[inputType.name]} disabled={disabled} /> </Form.Group> ); }
export function SearchForm({ searchField, updateSearch }) { const [searchValue, setSearchValue] = useState(searchField); function changeSearchField({ target }) { setSearchValue(target.value); } function updatePath(evt) { evt.preventDefault(); updateSearch(searchValue); } return <Form onSubmit={updatePath} className="search-form"> <Form.Group controlId="formBasicEmail"> <Form.Control className="search-form__input" type="text" placeholder="Enter your search here" value={searchValue} onChange={changeSearchField} /> </Form.Group> <Button className="search-form__submit" variant="primary" type="submit" disabled={searchValue === searchField}> Submit </Button> </Form>; }
renderForm() { const { newComment: { comment } } = this.state; return ( <Row> <Col md={6}> <Form onSubmit={this.handleSubmit}> <Form.Group controlId="comment"> <Form.Label>Comment</Form.Label> <Form.Control as="textarea" rows="3" name="comment" value={comment} onChange={this.handleChange} /> </Form.Group> <div className="btn-toolbar"> <Button type="submit">Submit</Button> <Button variant="link" onClick={this.hideForm}>Cancel</Button> </div> </Form> </Col> </Row> ); }
render() { const { title } = this.props; const { post } = this.state; return ( <Card> <Card.Header as="h5">{title}</Card.Header> <Card.Body> <Form onSubmit={this.handleSubmit}> <Form.Group controlId="title"> <Form.Label>Title</Form.Label> <Form.Control as="input" name="title" value={post.title} onChange={this.handleChange} autoFocus /> </Form.Group> <Form.Group controlId="body"> <Form.Label>Body</Form.Label> <Form.Control as="textarea" rows="5" name="body" value={post.body} onChange={this.handleChange} /> </Form.Group> <div className="btn-toolbar"> <Button variant="primary" type="submit">Save</Button> <Button variant="link" onClick={this.goBack}>Cancel</Button> </div> </Form> </Card.Body> </Card> ); }
render() { return ( <div> <h1>Contact Form</h1> <Form> <Form.Group controlId="formBasicName"> <Form.Label>Your Name</Form.Label> <Form.Control onChange={this.handleNameChange} placeholder="Your name..." /> <Form.Text className="text-muted"> We'll never share your data with anyone else. </Form.Text> </Form.Group> <Form.Group controlId="formBasicSubject"> <Form.Label>Your Subject</Form.Label> <Form.Control onChange={this.handleSubjectChange} placeholder="Your subject..." /> </Form.Group> <Form.Group controlId="exampleForm.ControlTextarea1"> <Form.Label>Your Message</Form.Label> <Form.Control onChange={this.handleMessageChange} as="textarea" rows="3" placeholder="Your Message..."/> </Form.Group> <Button onClick={this.handleClick} variant="primary" type="submit">Submit</Button> </Form> </div> ) }
Login with user name 'admin' and password 'Admin@123' </Form.Text> <Form.Group controlId='formBasicUsername'> <Form.Label>User name</Form.Label> <Form.Control type='text' name='userName' onChange={this.updateCredentials} /> </Form.Group> <Form.Group controlId='formBasicPassword'> <Form.Label>Password</Form.Label> <Form.Control type='password' name='password' autoComplete='off' onChange={this.updateCredentials} /> </Form.Group>
const Header = ({value, pending, onChange, onClick}) => ( <Form.Row> <button className="btn mb-3 mr-n2" type="button" disabled={pending} onClick={onClick}> <i className="fa fa-times" /> </button> <Form.Group as={Col}> <Form.Control name="name" placeholder="Name" type="text" required minLength="5" maxLength="32" value={value.name} onChange={onChange} /> </Form.Group> <Form.Group as={Col}> <Form.Control name="value" placeholder="Value" type="text" required maxLength="256" value={value.value} onChange={onChange} /> </Form.Group> </Form.Row> )
render() { const formStyle = { marginTop: '5%' }; return ( <Form style={formStyle}> <Form.Row> <Form.Group as={Col} md="12"> <Form.Label>Receiver TC</Form.Label> <Form.Control type="text" placeholder="Receiver TC" onChange={this.handleTcNoChange} value={this.state.tcno} maxLength="11" /> </Form.Group> </Form.Row> <Form.Row> <Form.Group as={Col} md="2"> <Form.Label>Currency</Form.Label> <CurrencyDropdown onDropdownChanged={this.handleCurrencyChange} /> </Form.Group> <Form.Group as={Col} md="10"> <Form.Label>Amount</Form.Label> <Form.Control type="text" placeholder="Amount" onChange={this.handleAmountChange} value={this.state.amount} maxLength="8" /> </Form.Group> </Form.Row> <Form.Row className="justify-content-end"> <Button variant="primary" size="lg" onClick={this.handleClick} disabled={this.state.isProcessingTransfer}>Transfer</Button> </Form.Row> </Form> ) }
const SelectTest = (props) =>{ return( <Form> <Form.Group controlId="testSelect"> <Form.Label>Test Select</Form.Label> <Form.Control as="select" defaultValue={props.value} ref={props.Ref} > <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> </Form.Control> </Form.Group> <Form.Group controlId="choiceDisplay"> <Form.Label>Current Choice</Form.Label> <Form.Control type="text" defaultValue={props.value} ref={props.Ref} readOnly > </Form.Control> </Form.Group> </Form> ) }
render(){ return( <Container> <h1 className="text-center">contact us</h1> <Form> <Form.Group controlId="formBasicEmail"> <Form.Label>email adress</Form.Label> <Form.Control type="email" placeholder="Enter email" /> <Form.Text> we will never share your email to someone else </Form.Text> </Form.Group> <Form.Group controlId="formBasicPassword"> <Form.Label>Example taxtarea</Form.Label> <Form.Control as="textarea" rows="3" /> </Form.Group> <Form.Group controlId="formBasicCheckBox"> <Form.Check type="checkbox" label="Check me out" /> </Form.Group> <Button variant="primary" type="submit">Submit</Button> </Form> </Container > ) }
function Step1(props) { if (props.currentStep !== 1) { return null } return( <Form.Row className="modal__row"> <Form.Group as={Col} className="modal__group"> <Form.Label htmlFor="email" className="modal__label" > Registered-Email address </Form.Label> <Form.Control id="email" name="email" type="text" placeholder="abc@gmail.com" value={props.email} onChange={props.onChange} /> </Form.Group> </Form.Row> ); }