zent/es/input/Input.js

一套前端设计语言和基于React的实现

import { __assign, __extends } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { Component, createRef } from 'react';
import classNames from 'classnames';
import { InputCore } from './InputCore';
import { TextArea } from './TextArea';
import { InputContext } from './context';
import { DisabledContext } from '../disabled';
import omit from '../utils/omit';
var BLOCKED_CHILD_PROPS = [
    'className',
    'width',
    'style',
    'size',
    'disabled',
    'widthSize',
];
var Input = (function (_super) {
    __extends(Input, _super);
    function Input() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.elementRef = createRef();
        _this.state = {
            hasFocus: false,
        };
        _this.onKeyDown = function (e) {
            var _a = _this.props, onKeyDown = _a.onKeyDown, onPressEnter = _a.onPressEnter;
            if (onPressEnter && e.key === 'Enter') {
                onPressEnter(e);
            }
            onKeyDown && onKeyDown(e);
        };
        _this.onFocus = function (evt) {
            _this.setState({
                hasFocus: true,
            });
            var onFocus = _this.props.onFocus;
            onFocus && onFocus(evt);
        };
        _this.onBlur = function (evt) {
            _this.setState({
                hasFocus: false,
            });
            var onBlur = _this.props.onBlur;
            onBlur && onBlur(evt);
        };
        _this.clearInput = function (evt) {
            var onChange = _this.props.onChange;
            var e = Object.create(evt);
            e.target = __assign(__assign({}, _this.props), { value: '' });
            e.fromClearButton = true;
            onChange && onChange(e);
        };
        _this.renderInput = function (disableContext) {
            return _this.renderImpl(disableContext);
        };
        return _this;
    }
    Object.defineProperty(Input.prototype, "input", {
        get: function () {
            return this.elementRef.current;
        },
        enumerable: false,
        configurable: true
    });
    Input.prototype.focus = function () {
        var el = this.elementRef.current;
        el && el.focus();
    };
    Input.prototype.select = function (selectionStart, selectionEnd) {
        var el = this.elementRef.current;
        if (!el) {
            return;
        }
        if (typeof selectionStart === 'number' &&
            typeof selectionEnd === 'number') {
            el.setSelectionRange(selectionStart, selectionEnd);
        }
        else {
            el.select();
        }
    };
    Input.prototype.componentDidMount = function () {
        var _a = this.props, autoFocus = _a.autoFocus, autoSelect = _a.autoSelect, initSelectionStart = _a.initSelectionStart, initSelectionEnd = _a.initSelectionEnd;
        var el = this.elementRef.current;
        if (autoFocus) {
            el && el.focus();
        }
        if (autoSelect) {
            this.select(initSelectionStart, initSelectionEnd);
        }
    };
    Input.prototype.renderImpl = function (disableCtx) {
        var _a;
        var _b;
        var props = this.props;
        var type = props.type, className = props.className, width = props.width, style = props.style, size = props.size, _c = props.disabled, disabled = _c === void 0 ? disableCtx.value : _c, readOnly = props.readOnly, widthSize = props.widthSize;
        var hasFocus = this.state.hasFocus;
        var isTextarea = type.toLowerCase() === 'textarea';
        var editable = !(disabled || readOnly);
        var renderInner = this.context.renderInner;
        var wrapperStyle = __assign(__assign({}, style), { width: width });
        var isOutOfRange = false;
        var children;
        if (props.type === 'textarea') {
            var textValue = (_b = this.elementRef.current) === null || _b === void 0 ? void 0 : _b.value;
            isOutOfRange =
                !!props.maxCharacterCount && !!textValue
                    ? textValue.length > props.maxCharacterCount
                    : false;
            children = (_jsx(TextArea, __assign({}, omit(props, BLOCKED_CHILD_PROPS), { ref: this.elementRef, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, disabled: disabled }), void 0));
        }
        else {
            children = (_jsx(InputCore, __assign({}, omit(props, BLOCKED_CHILD_PROPS), { ref: this.elementRef, onClear: this.clearInput, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, disabled: disabled }), void 0));
        }
        var wrapClass = classNames('zent-input-wrapper', "zent-input--size-" + size, (_a = {},
            _a["zent-input-wrapper--width-" + widthSize] = !!widthSize,
            _a['zent-input-wrapper__not-editable'] = !editable,
            _a['zent-textarea-wrapper'] = isTextarea,
            _a['zent-textarea-wrapper-out-of-range'] = isOutOfRange,
            _a['zent-input-addons'] = !isTextarea &&
                (props.addonAfter ||
                    props.addonBefore),
            _a['zent-input--has-focus'] = hasFocus,
            _a['zent-input-wrapper-inline'] = props.inline,
            _a['zent-input-wrapper-disabled'] = disabled,
            _a), className);
        return (_jsx("div", __assign({ className: wrapClass, style: wrapperStyle, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, "data-zv": '10.0.17' }, { children: renderInner ? renderInner(children) : children }), void 0));
    };
    Input.prototype.render = function () {
        return (_jsx(DisabledContext.Consumer, { children: this.renderInput }, void 0));
    };
    Input.contextType = InputContext;
    Input.displayName = 'ZentInput';
    Input.defaultProps = {
        type: 'text',
        size: 'normal',
    };
    return Input;
}(Component));
export { Input };
export default Input;