UNPKG

fit-input

Version:

输入框

96 lines (95 loc) 3.79 kB
"use strict"; const React = require('react'); const classNames = require('classnames'); const module = require('./module'); const _ = require('lodash'); const src_1 = require('../../../../common/transmit-transparently/src'); const validate_1 = require('./validate'); require('./index.scss'); /** * 抽出子元素的布局样式 */ const separateLayoutStyle = (props) => { const cloneStyle = _.cloneDeep(props['style']) || {}; let separateStyle = {}; const layoutStyles = ['width', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft']; layoutStyles.forEach((styleName) => { separateStyle[styleName] = _.cloneDeep(cloneStyle[styleName]); cloneStyle[styleName] = null; }); return { separateStyle: separateStyle, originStyle: cloneStyle }; }; class Input extends React.Component { constructor(props) { super(props); this.state = new module.State(); } componentWillMount() { // 同步到自己的value this.setState({ value: this.props.value || this.props.defaultValue }); } handleInputChange(event) { this.props['onChange'] && this.props['onChange'](event); const validateResult = this.props.validateMiddleware(event.target.value, validate_1.default); this.setState({ hasError: !validateResult.ok, errorMessage: validateResult.errorMessage, value: event.target.value }); } render() { const classes = classNames({ '_namespace': true, [this.props['className']]: !!this.props['className'] }); // 获取焦点时高亮的dom let Highlight = null; if (this.props.highlight) { Highlight = <span className="highlight"/>; } // input 的样式加在父级上 const { separateStyle, originStyle } = separateLayoutStyle(this.props); const inputClasses = classNames({ 'input': true, 'no-label': this.props.label === '', [this.props.textAlign]: true }); const labelClasses = classNames({ 'label': true, [this.props.textAlign]: true, 'disabled': this.props.disabled, 'valid-disabled': this.props.disabled && this.state.value !== null && this.state.value !== undefined }); const bottomBarClasses = classNames({ 'bottom-bar': true, 'bottom-bar-error': this.state.hasError }); let HighlightLine = null; if (this.props.highlightLine) { HighlightLine = <span className={bottomBarClasses}/>; } // 错误文字提示 let ErrorLabel = null; if (this.state.hasError) { ErrorLabel = <span className="label-error">{this.state.errorMessage}</span>; } return (<div className={classes} style={separateStyle}> <input {...src_1.others(new module.Props(), this.props, ['style'])} style={originStyle} required={true} disabled={this.props.disabled} onChange={this.handleInputChange.bind(this)} className={inputClasses}/> <div className="right-addon"> {this.props.rightRender()} </div> {this.props.innerRender.constructor.name === 'Function' ? this.props.innerRender() : this.props.innerRender} {Highlight} {HighlightLine} <label className={labelClasses}>{this.props.label}{ErrorLabel}</label> </div>); } } Input.defaultProps = new module.Props(); Object.defineProperty(exports, "__esModule", { value: true }); exports.default = Input;