zent/es/input/TextArea.js

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

import { __assign, __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import cx from 'classnames';
import { forwardRef } from 'react';
import { autosize, destroy, update } from '../utils/dom/autosize';
import noop from '../utils/noop';
import { createUseIMEComposition } from '../ime-composition';
import { useIsomorphicLayoutEffect } from '../utils/hooks/useIsomorphicLayoutEffect';
var useIMEComposition = createUseIMEComposition();
export var TextArea = forwardRef(function (props, ref) {
    var valueProp = props.value, onChangeProp = props.onChange, onCompositionStartProp = props.onCompositionStart, onCompositionEndProp = props.onCompositionEnd, autoSize = props.autoSize, showCount = props.showCount, maxLength = props.maxLength, width = props.width, size = props.size, onPressEnter = props.onPressEnter, autoFocus = props.autoFocus, autoSelect = props.autoSelect, initSelectionStart = props.initSelectionStart, initSelectionEnd = props.initSelectionEnd, inline = props.inline, maxCharacterCount = props.maxCharacterCount, type = props.type, otherProps = __rest(props, ["value", "onChange", "onCompositionStart", "onCompositionEnd", "autoSize", "showCount", "maxLength", "width", "size", "onPressEnter", "autoFocus", "autoSelect", "initSelectionStart", "initSelectionEnd", "inline", "maxCharacterCount", "type"]);
    var _a = useIMEComposition(valueProp, onChangeProp, onCompositionStartProp, onCompositionEndProp), value = _a.value, onChange = _a.onChange, onCompositionStart = _a.onCompositionStart, onCompositionEnd = _a.onCompositionEnd;
    var textareaRef = ref;
    useIsomorphicLayoutEffect(function () {
        if (!autoSize) {
            return noop;
        }
        var el = textareaRef.current;
        if (!el) {
            return noop;
        }
        autosize(el);
        return function () {
            destroy(el);
        };
    }, [autoSize, textareaRef]);
    useIsomorphicLayoutEffect(function () {
        var el = textareaRef.current;
        if (autoSize && el) {
            update(el);
        }
    }, [value, autoSize, textareaRef]);
    var isOutOfRange = !!maxCharacterCount && !!value ? value.length > maxCharacterCount : false;
    return (_jsxs(_Fragment, { children: [_jsx("textarea", __assign({}, otherProps, { ref: ref, className: cx('zent-textarea', {
                    'zent-textarea-with-count': showCount,
                }), value: value, maxLength: maxLength, onChange: onChange, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd, "data-zv": '10.0.17' }), void 0), showCount && (_jsxs("span", __assign({ className: cx('zent-textarea-count', {
                    'zent-textarea-out-of-range-text': isOutOfRange,
                }), "data-zv": '10.0.17' }, { children: [(value || '').length, "/", maxLength !== null && maxLength !== void 0 ? maxLength : maxCharacterCount] }), void 0))] }, void 0));
});
TextArea.displayName = 'TextArea';