zent/es/input/InputCore.js

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

import { __assign, __rest } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import Icon from '../icon';
import { createUseIMEComposition } from '../ime-composition';
import cx from 'classnames';
function preventDefault(e) {
    e.preventDefault();
}
var useIMEComposition = createUseIMEComposition();
export var InputCore = forwardRef(function (props, ref) {
    var addonBefore = props.addonBefore, addonAfter = props.addonAfter, showClear = props.showClear, valueProp = props.value, onChangeProp = props.onChange, onCompositionStartProp = props.onCompositionStart, onCompositionEndProp = props.onCompositionEnd, onClear = props.onClear, width = props.width, size = props.size, onPressEnter = props.onPressEnter, autoFocus = props.autoFocus, autoSelect = props.autoSelect, initSelectionStart = props.initSelectionStart, initSelectionEnd = props.initSelectionEnd, icon = props.icon, _a = props.iconPosition, iconPosition = _a === void 0 ? 'end' : _a, inline = props.inline, onIconClick = props.onIconClick, otherProps = __rest(props, ["addonBefore", "addonAfter", "showClear", "value", "onChange", "onCompositionStart", "onCompositionEnd", "onClear", "width", "size", "onPressEnter", "autoFocus", "autoSelect", "initSelectionStart", "initSelectionEnd", "icon", "iconPosition", "inline", "onIconClick"]);
    var _b = useIMEComposition(valueProp, onChangeProp, onCompositionStartProp, onCompositionEndProp), value = _b.value, onChange = _b.onChange, onCompositionStart = _b.onCompositionStart, onCompositionEnd = _b.onCompositionEnd;
    var showClearIcon = showClear && valueProp && !otherProps.disabled && !otherProps.readOnly;
    var iconClass = cx('zent-input-icon', {
        'zent-input-icon-click': !!onIconClick,
    });
    return (_jsxs(_Fragment, { children: [addonBefore && (_jsx("div", __assign({ className: "zent-input-addon-before", "data-zv": '10.0.17' }, { children: addonBefore }), void 0)), icon && iconPosition === 'front' ? (_jsx(Icon, { className: iconClass, type: icon, onMouseUp: preventDefault, onMouseDown: preventDefault, onClick: onIconClick }, void 0)) : null, _jsx("input", __assign({}, otherProps, { ref: ref, className: "zent-input", value: value, onChange: onChange, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd, "data-zv": '10.0.17' }), void 0), showClearIcon && (_jsx(Icon, { className: "zent-input-icon", type: "close-circle", onClick: onClear, onMouseDown: preventDefault }, void 0)), icon && iconPosition === 'end' ? (_jsx(Icon, { className: iconClass, type: icon, onMouseUp: preventDefault, onMouseDown: preventDefault, onClick: onIconClick }, void 0)) : null, addonAfter && _jsx("div", __assign({ className: "zent-input-addon-after", "data-zv": '10.0.17' }, { children: addonAfter }), void 0)] }, void 0));
});
InputCore.displayName = 'Input';