function DateQuestion(props) { return ( <FormControl type="date" onChange={(e) => props.onAnswerChange(props.id, e.target.value)} /> ); }
function SelectQuestion(props) { const answers = props.answers.map((answer, index) => <option key={index} value={answer}>{answer}</option>); return ( <FormControl componentClass="select" onChange={(e) => props.onAnswerChange(props.id, e.target.value)}> {answers} </FormControl> ); }
const Checkbox = props => ( <CheckboxLabel className="checkbox"> <Input type="checkbox" checked={props.checked} onChange={e => props.onChecked(e.target.checked)} /> <label style={props.withText ? { marginRight: 10 } : {}}>{props.label}</label> {props.withText && props.checked && <TextInput onChange={e => props.onChangeText(e.target.value)} value={props.text} />} </CheckboxLabel> )
function Form({onSubmit, children}) { return ( <form onSubmit={event => { event.preventDefault() const elementValues = getElementValues(event.target) onSubmit(elementValues) }} > {children} </form> ) }
render() { return (<div className='App'> <div className='App-title'> Countdown to {this.state.deadline}</div> <Clock deadline={this.state.deadline} /> <Form inline className='center-block'> <FormControl className='Deadline-input' placeholder='New date' onChange={event => { this.setState({ newDeadline: event.target.value }) }} /> <Button onClick={() => this.changeDeadline()}>Submit</Button> </Form> </div>) }
const EditableTodo = ({ onChangeTodo, onSaveTodo, onCancelTodo, todo }) => ( <div> <EditableTodoStyled> <TodoTitle>Title</TodoTitle> <TodoInput defaultValue={todo} placeholder='What do you need to do?' onChange={(event) => onChangeTodo(event.target.value)} /> </EditableTodoStyled> <Controls> <Control onClick={onSaveTodo}>Save</Control> <Control onClick={onCancelTodo}>Cancel</Control> </Controls> </div> )
render() { const { deadline, newDeadline } = this.state; return( <div className="App"> <h1>Countdown to { deadline }</h1> <Clock deadline={ deadline }/> <Form inline> <FormControl className="Deadline-input" placeholder='new date' onChange={ event => this.setState({newDeadline: event.target.value})}/> <Button onClick={ () => this.changeDeadline() }>Submit</Button> </Form> </div> ) }
render() { const { listState } = this.props.listStore; return ( <Fragment> <div className="dib ba br2 bg-white b--gray mb1"> <form onSubmit={e => { e.preventDefault(); listState.filter = e.target.filter.value; listState.pageCorrect(); }}> <input id="filter" size="15" className="pa1 dib br2 bn pa0" placeholder="Search" /> <span className="dib mh1 h1 w1 v-mid" style={{ backgroundImage: `url(${searchIcon})`, backgroundSize: '70% 70%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat' }}></span> </form> </div> {listState.filter.length > 0 && <div className="mv2"> <span className="dib pa2 pr3 v-mid pointer bg-black-20" onClick={() => listState.filter = ''}><span className="dib h1 w1"><span className="dib w-50 h-50 v-mid mr2" style={{ backgroundImage: `url(${closeIcon})`, backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat' }} ></span></span>{listState.filter}</span> </div> } </Fragment> ); }
render () { return ( <Row className='Search'> <Col xs={6} xsOffset={3}> <form onSubmit={this.props.onSearchSubmit}> <FormGroup> <FormControl type='text' bsSize='sm' placeholder={this.props.placeholder} onChange={event => this.debouncedSearch(event.target.value)} inputRef={input => (this.searchInput = input)} /> </FormGroup> </form> </Col> </Row> ) }
const SearchFormComponent = ({ searchError, submitSearch }) => { return ( <div className="search"> <form className="search-form" onSubmit={(e) => { e.preventDefault(); submitSearch(e.target[0].value); }}> <input className="search-input" type="text" /> <input className="search-button" type="submit" value="Search" /> </form> {searchError && <div className="search-error">{searchError} </div> } </div> ) }
render () { return ( <form onSubmit={(e) => { e.preventDefault(); console.log('event', e) }} onChange={(e) => { console.log('name', e.target.name) console.log('value', e.target.value) }} > <input type='name' name='name'/> <input type='mail' name='mail' /> <textarea name='textarea' defaultValue={'Valor\nvalor'}/> <button type='submit' >Enviar</button> </form> ) }
render() { return ( <div className="App"> <div className="App-title">Countdown to {this.state.deadline}</div> <Clock deadline={this.state.deadline} /> <Form inline={true}> <FormControl placeholder='new date' onChange={event => this.setState({newDeadline: event.target.value})}/> <Button onClick={() => { this.changeDeadLine() }}>Submit</Button> </Form> </div> ); }
function TextQuestion(props) { return ( <FormControl componentClass="textarea" onChange={(e) => props.onAnswerChange(props.id, e.target.value)}></FormControl> ); }
function NumberQuestion(props) { return ( <FormControl type="number" onChange={(e) => props.onAnswerChange(props.id, e.target.value)} /> ); }