yqcloud-ui/lib/input/Input.js

An enterprise-class UI design language and React-based implementation

'use strict';

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

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var React = _interopRequireWildcard(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _omit = require('omit.js');

var _omit2 = _interopRequireDefault(_omit);

var _icon = require('../icon');

var _icon2 = _interopRequireDefault(_icon);

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 fixControlledValue(value) {
    if (typeof value === 'undefined' || value === null) {
        return '';
    }
    return value;
}

var Input = function (_React$Component) {
    (0, _inherits3['default'])(Input, _React$Component);

    function Input() {
        (0, _classCallCheck3['default'])(this, Input);

        var _this = (0, _possibleConstructorReturn3['default'])(this, (Input.__proto__ || Object.getPrototypeOf(Input)).apply(this, arguments));

        _this.state = {
            inputLength: 0,
            focused: false,
            renderedStyle: {
                width: '100%',
                margin: 0
            },
            showLengthInfo: true,
            showPassword: false,
            type: 'text'
        };
        _this.handleKeyDown = function (e) {
            var _this$props = _this.props,
                onPressEnter = _this$props.onPressEnter,
                onKeyDown = _this$props.onKeyDown;

            if (e.keyCode === 13 && onPressEnter) {
                onPressEnter(e);
            }
            if (onKeyDown) {
                onKeyDown(e);
            }
        };
        _this.handleFocus = function (e) {
            var _this$props2 = _this.props,
                onFocus = _this$props2.onFocus,
                readOnly = _this$props2.readOnly;

            if (!readOnly) {
                _this.setState({
                    focused: true
                });
            }
            if (onFocus) {
                onFocus(e);
            }
        };
        _this.handleInput = function () {
            _this.setState({
                inputLength: _this.input.value.length
            });
        };
        _this.handleBlur = function (e) {
            var _this$props3 = _this.props,
                onBlur = _this$props3.onBlur,
                readOnly = _this$props3.readOnly;

            if (!readOnly) {
                _this.setState({
                    focused: false
                });
            }
            if (onBlur) {
                onBlur(e);
            }
        };
        _this.handleCopy = function () {
            var onCopy = _this.props.onCopy;

            _this.input.select();
            document.execCommand('Copy');
            if (onCopy) {
                onCopy(_this.input.value);
            }
        };
        _this.handleShowPassword = function () {
            _this.setState({
                type: 'text',
                showPassword: true
            });
        };
        _this.handleHidePassword = function () {
            _this.setState({
                type: 'password',
                showPassword: false
            });
        };
        _this.saveInput = function (node) {
            _this.input = node;
        };
        return _this;
    }

    (0, _createClass3['default'])(Input, [{
        key: 'componentDidMount',
        value: function componentDidMount() {
            var inputLength = this.state.inputLength;
            var _props = this.props,
                focused = _props.focused,
                showLengthInfo = _props.showLengthInfo;

            var inputValueLength = this.input.value.length;
            if (inputValueLength !== inputLength) {
                this.setState({
                    inputLength: inputValueLength,
                    showLengthInfo: showLengthInfo
                });
            }
            if (this.props.autoFocus) {
                this.setState({
                    focused: true
                });
            }
            if (typeof focused === 'boolean') {
                this.setState({
                    focused: focused
                });
            }
            this.setState({
                type: this.props.type
            });
            this.setRenderedStyle();
        }
    }, {
        key: 'componentWillReceiveProps',
        value: function componentWillReceiveProps(nextProps) {
            if (this.input.value !== nextProps.value) {
                var inputLength = nextProps.value && nextProps.value.length;
                this.setState({
                    inputLength: inputLength || 0
                });
            }
            if (nextProps.autoFocus) {
                this.setState({
                    focused: true
                });
            }
            if (typeof nextProps.focused === 'boolean') {
                this.setState({
                    focused: nextProps.focused
                });
            }
            if ('showLengthInfo' in nextProps) {
                this.setState({
                    showLengthInfo: nextProps.showLengthInfo
                });
            }
            this.setState({
                type: nextProps.type
            });
        }
    }, {
        key: 'componentDidUpdate',
        value: function componentDidUpdate() {
            var inputLength = this.state.inputLength;

            var inputValueLength = this.input.value.length;
            if (inputValueLength !== inputLength) {
                this.setState({
                    inputLength: inputValueLength
                });
            }
            this.setRenderedStyle();
        }
    }, {
        key: 'setRenderedStyle',
        value: function setRenderedStyle() {
            var suffix = this.refs.suffix;
            var prefix = this.refs.prefix;
            var rendered = this.refs.rendered;
            var suffixWidth = void 0;
            var prefixWidth = void 0;
            var margin = '0';
            var width = '100%';
            if (suffix && prefix) {
                suffixWidth = (suffix.clientWidth || -2) + 2 + 'px';
                prefixWidth = (prefix.clientWidth || -2) + 2 + 'px';
                margin = '0 ' + suffixWidth + ' 0 ' + prefixWidth;
                width = 'calc(100% - ' + suffixWidth + ' - ' + prefixWidth + ')';
            } else if (suffix) {
                suffixWidth = (suffix.clientWidth || -2) + 2 + 'px';
                margin = '0 ' + suffixWidth + ' 0 0';
                width = 'calc(100% - ' + suffixWidth + ')';
            } else if (prefix) {
                prefixWidth = (prefix.clientWidth || -2) + 2 + 'px';
                margin = '0 0 0 ' + prefixWidth;
                width = 'calc(100% - ' + prefixWidth + ')';
            }
            rendered.style.margin = margin;
            rendered.style.width = width;
        }
    }, {
        key: 'focus',
        value: function focus() {
            this.input.focus();
        }
    }, {
        key: 'blur',
        value: function blur() {
            this.input.blur();
        }
    }, {
        key: 'getInputClassName',
        value: function getInputClassName() {
            var _classNames;

            var _props2 = this.props,
                prefixCls = _props2.prefixCls,
                size = _props2.size,
                copy = _props2.copy;

            return (0, _classnames2['default'])(prefixCls, (_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls + '-sm', size === 'small'), (0, _defineProperty3['default'])(_classNames, prefixCls + '-lg', size === 'large'), (0, _defineProperty3['default'])(_classNames, prefixCls + '-has-copy', copy), _classNames));
        }
    }, {
        key: 'renderCopyIcon',
        value: function renderCopyIcon() {
            var _props3 = this.props,
                prefixCls = _props3.prefixCls,
                copy = _props3.copy;

            return copy ? React.createElement(
                'span',
                { className: prefixCls + '-icon', onClick: this.handleCopy },
                React.createElement(_icon2['default'], { className: prefixCls + '-icon-copy', type: 'library_books' })
            ) : null;
        }
    }, {
        key: 'renderShowPassword',
        value: function renderShowPassword() {
            var _props4 = this.props,
                prefixCls = _props4.prefixCls,
                type = _props4.type;
            var showPassword = this.state.showPassword;

            return type === 'password' ? React.createElement(
                'span',
                { className: prefixCls + '-icon', onMouseDown: this.handleShowPassword, onMouseLeave: this.handleHidePassword, onMouseUp: this.handleHidePassword },
                React.createElement(_icon2['default'], { className: prefixCls + '-icon-copy', type: showPassword ? 'visibility' : 'visibility_off' })
            ) : null;
        }
    }, {
        key: 'renderInput',
        value: function renderInput() {
            var _props5 = this.props,
                value = _props5.value,
                className = _props5.className,
                label = _props5.label;
            // Fix https://fb.me/react-unknown-prop

            var otherProps = (0, _omit2['default'])(this.props, ['placeholder', 'prefixCls', 'onPressEnter', 'addonBefore', 'addonAfter', 'prefix', 'suffix', 'label', 'copy', 'style', 'underline', 'focused', 'showLengthInfo', 'showPasswordEye']);
            if ('value' in this.props) {
                otherProps.value = fixControlledValue(value);
                // Input elements must be either controlled or uncontrolled,
                // specify either the value prop, or the defaultValue prop, but not both.
                delete otherProps.defaultValue;
            }
            otherProps.onInput = this.handleInput;
            if ('placeholder' in this.props && label) {
                delete otherProps.placeholder;
            }
            return React.createElement('input', (0, _extends3['default'])({}, otherProps, { className: (0, _classnames2['default'])(this.getInputClassName(), className), onKeyDown: this.handleKeyDown, ref: this.saveInput, onFocus: this.handleFocus, onBlur: this.handleBlur, type: this.state.type }));
        }
    }, {
        key: 'getLengthInfo',
        value: function getLengthInfo() {
            var _props6 = this.props,
                prefixCls = _props6.prefixCls,
                maxLength = _props6.maxLength;
            var _state = this.state,
                inputLength = _state.inputLength,
                showLengthInfo = _state.showLengthInfo;

            return maxLength && showLengthInfo ? React.createElement(
                'span',
                { className: prefixCls + '-icon' },
                React.createElement(
                    'span',
                    { className: prefixCls + '-icon-copy ' + prefixCls + '-length-info' },
                    inputLength + '/' + maxLength
                )
            ) : null;
        }
    }, {
        key: 'getUnderLine',
        value: function getUnderLine() {
            var _props7 = this.props,
                prefixCls = _props7.prefixCls,
                underline = _props7.underline;

            return underline ? React.createElement(
                'div',
                { className: prefixCls + '-underline' },
                React.createElement('span', { className: prefixCls + '-ripple' })
            ) : null;
        }
    }, {
        key: 'getSizeClassName',
        value: function getSizeClassName(name) {
            var _classNames2;

            var _props8 = this.props,
                prefixCls = _props8.prefixCls,
                size = _props8.size;

            return (0, _classnames2['default'])(prefixCls + '-' + name, (_classNames2 = {}, (0, _defineProperty3['default'])(_classNames2, prefixCls + '-' + name + '-sm', size === 'small'), (0, _defineProperty3['default'])(_classNames2, prefixCls + '-' + name + '-lg', size === 'large'), _classNames2));
        }
    }, {
        key: 'render',
        value: function render() {
            var _classNames3;

            var props = this.props;
            var _props9 = this.props,
                prefixCls = _props9.prefixCls,
                disabled = _props9.disabled,
                label = _props9.label,
                style = _props9.style,
                placeholder = _props9.placeholder,
                showPasswordEye = _props9.showPasswordEye;
            var _state2 = this.state,
                inputLength = _state2.inputLength,
                focused = _state2.focused;

            var prefix = props.prefix ? React.createElement(
                'span',
                { ref: 'prefix', className: this.getSizeClassName('prefix') },
                props.prefix
            ) : null;
            var suffix = props.suffix ? React.createElement(
                'span',
                { ref: 'suffix', className: this.getSizeClassName('suffix') },
                props.suffix
            ) : null;
            var className = (0, _classnames2['default'])(prefixCls + '-wrapper', (_classNames3 = {}, (0, _defineProperty3['default'])(_classNames3, prefixCls + '-has-value', inputLength !== 0), (0, _defineProperty3['default'])(_classNames3, prefixCls + '-focus', focused), (0, _defineProperty3['default'])(_classNames3, prefixCls + '-disabled', disabled), (0, _defineProperty3['default'])(_classNames3, prefixCls + '-has-label', !!label), (0, _defineProperty3['default'])(_classNames3, prefixCls + '-has-prefix', !!prefix), (0, _defineProperty3['default'])(_classNames3, prefixCls + '-has-suffix', !!suffix), _classNames3));
            return React.createElement(
                'span',
                { className: className, style: style },
                React.createElement(
                    'div',
                    { className: prefixCls + '-content' },
                    label ? React.createElement(
                        'div',
                        { className: prefixCls + '-label' },
                        label
                    ) : null,
                    React.createElement(
                        'div',
                        { className: prefixCls + '-rendered-wrapper' },
                        prefix,
                        React.createElement(
                            'div',
                            { className: this.getSizeClassName('rendered'), ref: 'rendered' },
                            React.createElement(
                                'div',
                                { className: prefixCls + '-placeholder' },
                                placeholder
                            ),
                            this.renderInput(),
                            this.renderCopyIcon(),
                            showPasswordEye ? this.renderShowPassword() : null
                        ),
                        suffix
                    ),
                    this.getLengthInfo()
                ),
                this.getUnderLine()
            );
        }
    }]);
    return Input;
}(React.Component);

exports['default'] = Input;

Input.defaultProps = {
    prefixCls: 'ant-input',
    type: 'text',
    disabled: false,
    underline: true,
    readOnly: false,
    showLengthInfo: true,
    showPasswordEye: false
};
Input.propTypes = {
    type: _propTypes2['default'].string,
    id: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].number]),
    label: _propTypes2['default'].node,
    size: _propTypes2['default'].oneOf(['small', 'default', 'large']),
    maxLength: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].number]),
    disabled: _propTypes2['default'].bool,
    value: _propTypes2['default'].any,
    defaultValue: _propTypes2['default'].any,
    className: _propTypes2['default'].string,
    addonBefore: _propTypes2['default'].node,
    addonAfter: _propTypes2['default'].node,
    prefixCls: _propTypes2['default'].string,
    autosize: _propTypes2['default'].oneOfType([_propTypes2['default'].bool, _propTypes2['default'].object]),
    onPressEnter: _propTypes2['default'].func,
    onKeyDown: _propTypes2['default'].func,
    onKeyUp: _propTypes2['default'].func,
    onFocus: _propTypes2['default'].func,
    onBlur: _propTypes2['default'].func,
    prefix: _propTypes2['default'].node,
    suffix: _propTypes2['default'].node,
    copy: _propTypes2['default'].bool,
    onCopy: _propTypes2['default'].func,
    underline: _propTypes2['default'].bool,
    readOnly: _propTypes2['default'].bool,
    focused: _propTypes2['default'].bool,
    showLengthInfo: _propTypes2['default'].bool,
    showPasswordEye: _propTypes2['default'].bool
};
module.exports = exports['default'];