@ozen-ui/kit/__inner__/cjs/components/Input/Input.js

React component library

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Input = exports.cnInput = void 0;
var tslib_1 = require("tslib");
require("./Input.css");
var react_1 = tslib_1.__importStar(require("react"));
var useEventListener_1 = require("../../hooks/useEventListener");
var useMultiRef_1 = require("../../hooks/useMultiRef");
var useThemeProps_1 = require("../../hooks/useThemeProps");
var classname_1 = require("../../utils/classname");
var FieldControl_1 = require("../FieldControl");
var FieldHint_1 = require("../FieldHint");
var FieldIcon_1 = require("../FieldIcon");
var FieldInput_1 = require("../FieldInput");
var FieldLabel_1 = require("../FieldLabel");
var Fieldset_1 = require("../Fieldset");
var constants_1 = require("./constants");
exports.cnInput = (0, classname_1.cn)('Input');
exports.Input = (0, react_1.forwardRef)(function (inProps, ref) {
    var props = (0, useThemeProps_1.useThemeProps)({
        props: inProps,
        name: 'Input',
    });
    var _a = props.size, size = _a === void 0 ? constants_1.INPUT_DEFAULT_SIZE : _a, label = props.label, error = props.error, autoFocus = props.autoFocus, placeholder = props.placeholder, id = props.id, name = props.name, type = props.type, renderLeft = props.renderLeft, renderRight = props.renderRight, fullWidth = props.fullWidth, disabled = props.disabled, hint = props.hint, required = props.required, className = props.className, value = props.value, defaultValue = props.defaultValue, onChange = props.onChange, inputProps = props.inputProps, bodyProps = props.bodyProps, labelProps = props.labelProps, hintProps = props.hintProps, maxLength = props.maxLength, minLength = props.minLength, inputRef = props.inputRef, labelRef = props.labelRef, other = tslib_1.__rest(props, ["size", "label", "error", "autoFocus", "placeholder", "id", "name", "type", "renderLeft", "renderRight", "fullWidth", "disabled", "hint", "required", "className", "value", "defaultValue", "onChange", "inputProps", "bodyProps", "labelProps", "hintProps", "maxLength", "minLength", "inputRef", "labelRef"]);
    var bodyInnerRef = (0, react_1.useRef)(null);
    var fieldInnerRef = (0, react_1.useRef)(null);
    /* Хук useEventListener необходим для того, чтобы при нажатии на кнопку мыши
     * внутри HTML-элемента label — фокус не переходил на body или на цель нажатия кнопки мыши.
     * Если же нажатие кнопки происходит на самом HTML-элементе input, то мы ничего не делаем,
     * так как в противном случае мы сломаем возможность выделять текст для копирования.
     */
    (0, useEventListener_1.useEventListener)({
        element: bodyInnerRef,
        eventName: 'mousedown',
        handler: function (e) {
            var _a;
            if (e.target !== fieldInnerRef.current) {
                e.preventDefault();
                (_a = fieldInnerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
            }
        },
    });
    return (react_1.default.createElement(FieldControl_1.FieldControl, tslib_1.__assign({ size: size, error: error, disabled: disabled, required: required, fullWidth: fullWidth }, other, { ref: ref, className: (0, exports.cnInput)({}, [className]) }),
        react_1.default.createElement("label", tslib_1.__assign({}, bodyProps, { className: (0, exports.cnInput)('Body', [bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.className]), ref: (0, useMultiRef_1.useMultiRef)([bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref, bodyInnerRef]) }),
            react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderLeft }),
            react_1.default.createElement("div", { className: (0, exports.cnInput)('FieldContainer') },
                react_1.default.createElement(FieldLabel_1.FieldLabel, tslib_1.__assign({}, labelProps, { ref: labelRef || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref), className: labelProps === null || labelProps === void 0 ? void 0 : labelProps.className }), label),
                react_1.default.createElement(FieldInput_1.FieldInput, tslib_1.__assign({ id: id, name: name, autoFocus: autoFocus, value: value, type: type, defaultValue: defaultValue, placeholder: placeholder, onChange: onChange, maxLength: maxLength, minLength: minLength }, inputProps, { className: (0, exports.cnInput)('Field', [inputProps === null || inputProps === void 0 ? void 0 : inputProps.className]), ref: (0, useMultiRef_1.useMultiRef)([inputRef || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref), fieldInnerRef]) }))),
            react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderRight }),
            react_1.default.createElement(Fieldset_1.Fieldset, null)),
        react_1.default.createElement(FieldHint_1.FieldHint, tslib_1.__assign({}, hintProps), hint)));
});
exports.Input.displayName = 'Input';