react-form-fy/lib/textareaField.js

"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _reactUiSvg = require("react-ui-svg");

var svg = _interopRequireWildcard(_reactUiSvg);

var _utilsFy = require("utils-fy");

var _publicStyle = require("./publicStyle");

var _theme = require("./theme");

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var propTypes = {
    inputName: _react.PropTypes.string.isRequired,
    showFormText: _react.PropTypes.bool,
    svgName: _react.PropTypes.string,
    formText: _react.PropTypes.string,
    hintText: _react.PropTypes.string,
    getValue: _react.PropTypes.func.isRequired,
    required: _react.PropTypes.bool,
    dataObj: _react.PropTypes.object.isRequired,
    textWidth: _react.PropTypes.string,
    valueWidth: _react.PropTypes.string,
    textIconWidth: _react.PropTypes.string,
    textIconHeight: _react.PropTypes.string,
    regexText: _react.PropTypes.string,
    disabled: _react.PropTypes.bool,
    rows: _react.PropTypes.string
};
var extra = void 0,
    isFirefox = void 0,
    isOpera = void 0,
    getStyle = void 0,
    minHeight = void 0,
    addEvent = void 0;

var TextAreaField = function (_Component) {
    _inherits(TextAreaField, _Component);

    function TextAreaField(props) {
        _classCallCheck(this, TextAreaField);

        var _this = _possibleConstructorReturn(this, (TextAreaField.__proto__ || Object.getPrototypeOf(TextAreaField)).call(this, props));

        _this.autoTextarea = function (elem, extr, maxHeight) {
            extra = extr || 0, isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window, isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'), getStyle = elem.currentStyle ? function (name) {
                var val = elem.currentStyle[name];
                if (name === 'height' && val.search(/px/i) !== 1) {
                    var rect = elem.getBoundingClientRect();
                    return rect.bottom - rect.top - parseFloat(getStyle('paddingTop')) - parseFloat(getStyle('paddingBottom')) + 'px';
                }
                return val;
            } : function (name) {
                return getComputedStyle(elem, null)[name];
            }, minHeight = parseFloat(getStyle('height')), addEvent = function addEvent(type, callback) {
                elem.addEventListener ? elem.addEventListener(type, callback, false) : elem.attachEvent('on' + type, callback);
            };
            elem.style.resize = 'none';
        };

        _this.change = function (e) {
            var aa = e.target.value;

            var elem = document.getElementById(_this.props.inputName + "TA"),
                maxHeight;
            var scrollTop = void 0,
                height = void 0,
                padding = 0,
                style = elem.style;

            //let aa = elem.value;
            // if (elem._length === elem.value.length) return;
            // elem._length = elem.value.length;

            if (!isFirefox && !isOpera) {
                padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
            }
            scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            elem.style.height = minHeight + 'px';
            if (elem.scrollHeight > minHeight) {
                if (maxHeight && elem.scrollHeight > maxHeight) {
                    height = maxHeight - padding;
                    style.overflowY = 'auto';
                } else {
                    height = elem.scrollHeight - padding;
                    style.overflowY = 'hidden';
                }
                style.height = height + extra + 'px';
                scrollTop += parseInt(style.height) - elem.currHeight;
                //document.body.scrollTop = scrollTop;
                document.documentElement.scrollTop = scrollTop;
                elem.currHeight = parseInt(style.height);
            }

            _this.setState({
                value: aa,
                showHintText: aa ? false : true,
                focusState: true,
                length: aa.length
            });
            _this.props.getValue && _this.props.getValue("textarea", _this.props.inputName, aa);
        };

        _this.textareaFocus = function () {
            _this.setState({
                focusState: true
            });
        };

        _this.textareaBlur = function (e) {
            _this.setState({
                focusState: false,
                initsState: 1
            });
        };

        _this.state = {
            value: "",
            showHintText: true,
            rows: "5",
            focusState: false,
            initsState: 0,
            styles: {
                publicStyles: (0, _publicStyle.publicStyles)(_this.props.themeObj),
                textareaStyle: (0, _publicStyle.textareaStyle)(_this.props.themeObj)
            },
            length: 0
        };
        return _this;
    }

    _createClass(TextAreaField, [{
        key: "componentWillMount",
        value: function componentWillMount() {
            this.setState({
                rows: this.props.rows || "5"
            });
        }
    }, {
        key: "componentDidMount",
        value: function componentDidMount() {
            var textarea = document.getElementById(this.props.inputName + "TA");
            this.autoTextarea(textarea);
        }
    }, {
        key: "render",
        value: function render() {
            var props = _objectWithoutProperties(this.props, []);

            var required = props.required || false;
            var errorState = false;
            if (required) {
                if (props.dataObj.required) {
                    validate(this.state.value);
                } else {
                    if (this.state.initsState == 1) {
                        validate(this.state.value);
                    }
                }
            }

            function validate(value) {
                if (props.dataObj[props.inputName]) {
                    errorState = false;
                    return;
                }
                if (!value) {
                    errorState = true;
                    return;
                }
                if (value) {
                    errorState = false;
                    return;
                }
            }

            var Svg = svg[props.svgName];

            var _value = props.dataObj[props.inputName] ? props.dataObj[props.inputName] : '';
            var _showHintText = _value ? false : true;

            var styles = eval('(' + JSON.stringify(this.state.styles) + ')');

            styles.publicStyles.formText.width = props.textWidth || '7.5rem';
            styles.publicStyles.formVInput.width = props.valueWidth || '14.375rem';
            styles.publicStyles.formVInput.display = "inline-table";
            styles.publicStyles.errorBox.marginTop = "0";

            var publicStyles = styles.publicStyles,
                textareaStyle = styles.textareaStyle;

            var textareaSty = !props.disabled ? this.state.focusState ? _utilsFy.Obj.merge(eval('(' + JSON.stringify(textareaStyle.textarea) + ')'), eval('(' + JSON.stringify(textareaStyle.focusBorder) + ')')) : _utilsFy.Obj.merge(eval('(' + JSON.stringify(textareaStyle.textarea) + ')'), eval('(' + JSON.stringify(textareaStyle.defaultBorder) + ')')) : _utilsFy.Obj.merge(eval('(' + JSON.stringify(textareaStyle.textarea) + ')'), eval('(' + JSON.stringify(textareaStyle.disabled) + ')'));
            var len = parseInt(props.textlength) || 400;
            return _react2.default.createElement(
                "div",
                { style: publicStyles.formBox },
                props.showFormText == false ? null : _react2.default.createElement(
                    "div",
                    { style: publicStyles.formText },
                    props.svgName ? _react2.default.createElement(Svg, { fill: _theme.svgFill,
                        width: props.textIconWidth || _theme.formTextIconSize / 16 + "rem",
                        height: props.textIconHeight || _theme.formTextIconSize / 16 + "rem",
                        style: publicStyles.formSvg }) : null,
                    _react2.default.createElement(
                        "span",
                        null,
                        props.formText || "i am textarea",
                        required ? _react2.default.createElement(
                            "label",
                            { style: publicStyles.formRequired },
                            "*"
                        ) : null
                    )
                ),
                _react2.default.createElement(
                    "div",
                    { style: publicStyles.formVInput },
                    _showHintText ? _react2.default.createElement(
                        "span",
                        { style: publicStyles.inputHintText },
                        props.hintText
                    ) : null,
                    _react2.default.createElement("textarea", { style: textareaSty,
                        disabled: props.disabled || false,
                        onBlur: this.textareaBlur.bind(this),
                        onFocus: this.textareaFocus.bind(this),
                        onChange: this.change,
                        value: _value,
                        title: _value,
                        id: props.inputName + "TA",
                        maxLength: props.textlength || 400
                    }),
                    _react2.default.createElement(
                        "label",
                        { style: textareaStyle.tiptext },
                        "  ",
                        _value.length,
                        " / ",
                        props.textlength || 400,
                        " "
                    ),
                    required ? errorState ? _react2.default.createElement(
                        "span",
                        { className: "errorTipBox", style: publicStyles.errorBox },
                        "\u8BE5\u503C\u4E0D\u80FD\u4E3A\u7A7A\uFF01"
                    ) : null : null
                )
            );
        }
    }]);

    return TextAreaField;
}(_react.Component);

TextAreaField.propTypes = propTypes;

exports.default = TextAreaField;
//# sourceMappingURL=textareaField.js.map