fit-input/lib/input/index.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;