import React, { Component } from 'react'; import './index.less'; import Icon from '../Icon'; export default class Input extends Component { render() { const { className = '', onChange, placeholder, value, error, left, right } = this.props; return ( <div className={`g-input-container ${className}`}> <div className={`g-input-wrapper ${error ? 'error' : ''}`}> {left && <div className="g-input-left">{left}</div>} <input className="g-input" placeholder={placeholder} value={value} onChange={data => onChange && onChange(data)} /> {right && <div className="g-input-right">{right}</div>} </div> <div hidden={!error} className="g-input-error"> {error} </div> </div> ); } } export class SelectInput extends Component { constructor(props) { super(props); this.state = { showSelect: false }; } render() { const { showSelect } = this.state; const { className = '', onChange, placeholder, value, error, selectValue, select, onSelect } = this.props; return ( <Input className={className} left={ <span className="g-input-left-select" onClick={() => this.setState({ showSelect: !showSelect })}> {selectValue} <Icon type={showSelect ? 'up' : 'down'} /> {showSelect && <ul className="select-list">{select.map((row) => { return <li onClick={() => { this.setState({ showSelect: false }); if (onSelect) onSelect(row.value); }}>{row.label}</li>; })}</ul>} </span> } value={value} placeholder={placeholder} onChange={data => onChange && onChange(data)} error={error} /> ); } } export class VerificationInput extends Component { constructor(props) { super(props); this.timeKey = null; this.state = { loading: 0 }; } componentWillUnmount() { if (this.timeKey) clearTimeout(this.timeKey); } onSend() { const { onSend, time = 60 } = this.props; if (onSend) { onSend() .then(() => { if (this.timeKey) clearTimeout(this.timeKey); this.setTime(time); }); } } setTime(time) { this.setState({ loading: time }); this.timeKey = setTimeout(() => { this.setTime(time - 1); }, 1000); } render() { const { loading } = this.state; const { className = '', onChange, placeholder, value, error } = this.props; return ( <Input className={className} right={ loading <= 0 ? ( <span className="g-input-right-verification" onClick={() => this.onSend()}> 获取验证码 </span> ) : ( <span className="g-input-right-verification-loading">等待{loading}秒</span> ) } value={value} error={error} placeholder={placeholder} onChange={data => onChange && onChange(data)} /> ); } }