fit-input
Version:
输入框
96 lines (95 loc) • 3.79 kB
JSX
"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;