var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import React, { Component } from 'react';
import classNames from 'classnames';
import './style.css';
var MyContainer = function (WrappedComponent) {
    return /** @class */ (function (_super) {
        __extends(MyContainer, _super);
        function MyContainer(props) {
            var _this = _super.call(this, props) || this;
            _this.state = {
                name: _this.props.value || ''
            };
            _this.onNameChange = _this.onNameChange.bind(_this);
            return _this;
        }
        MyContainer.prototype.onNameChange = function (event) {
            this.setState({ name: event.target.value });
            if (this.props.onChange) {
                this.props.onChange(event, event.target.value);
            }
        };
        MyContainer.prototype.componentWillReceiveProps = function (_a) {
            var value = _a.value;
            if (value) {
                this.setState({ name: value });
            }
        };
        MyContainer.prototype.render = function () {
            var newProps = {
                name: {
                    value: this.state.name,
                    onChange: this.onNameChange
                }
            };
            return <WrappedComponent {...this.props} {...newProps} />;
        };
        return MyContainer;
    }(Component));
};
var Input = /** @class */ (function (_super) {
    __extends(Input, _super);
    function Input(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            focusState: false
        };
        return _this;
    }
    Input.prototype.focusCtrl = function (focusState) {
        this.setState({ focusState: focusState });
        const { onBlur = () => { }, onFocus = () => { } } = this.props;
        focusState ? onFocus() : onBlur();
    };
    Input.prototype.render = function () {
        var _a = this.props, type = _a.type, autoFocus = _a.autoFocus;
        var focusState = this.state.focusState;
        var focusClass = classNames({
            'focus-border': focusState,
            'input-box': true
        });
        return (<div className={focusClass}>
            {type === 'text' ? (<input type="text" onFocus={this.focusCtrl.bind(this, true)} onBlur={this.focusCtrl.bind(this, false)} placeholder={this.props.placeholder} readOnly={this.props.placeholder !== '请输入'} autoFocus={autoFocus} {...this.props.name} />) : (<textarea {...this.props.name} onFocus={this.focusCtrl.bind(this, true)} onBlur={this.focusCtrl.bind(this, false)} placeholder={this.props.placeholder}>
                {this.props.value}
            </textarea>)}
        </div>);
    };
    Input.defaultProps = {
        type: 'text'
    };
    return Input;
}(Component));
export default MyContainer(Input);