@brizy/ui
Version:
React elements in Brizy style
22 lines (21 loc) • 1.78 kB
JavaScript
import React, { useCallback, useEffect, useRef } from "react";
import AntInputPassword from "antd/lib/input/Password";
import { getFieldsStyleTheme } from "../utils/getFieldsTheme";
import { WrapperForDisabled } from "./WrapperForDisabled";
import { BRZ_PREFIX } from "../constants";
export const Password = ({ visibilityToggle, onChange, theme, size, disabled, value, placeholder, addonAfter, addonBefore, suffix, prefix, onBlur, onFocus, onToggleClick, }) => {
const ref = useRef(null);
const handleChange = useCallback((e) => {
onChange(e.target.value);
}, [onChange]);
useEffect(() => {
var _a, _b;
const input = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelector("input");
const toggle = (_b = ref.current) === null || _b === void 0 ? void 0 : _b.querySelector(".brz-ui-input-suffix");
const handleClick = () => onToggleClick === null || onToggleClick === void 0 ? void 0 : onToggleClick((input === null || input === void 0 ? void 0 : input.type) === "password");
toggle === null || toggle === void 0 ? void 0 : toggle.addEventListener("click", handleClick);
return () => toggle === null || toggle === void 0 ? void 0 : toggle.removeEventListener("click", handleClick);
}, [onToggleClick]);
return (React.createElement(WrapperForDisabled, { disabled: disabled, ref: onToggleClick ? ref : null },
React.createElement(AntInputPassword, { value: value, placeholder: placeholder, addonAfter: addonAfter, addonBefore: addonBefore, suffix: suffix, prefix: prefix, onBlur: onBlur, onFocus: onFocus, disabled: disabled, size: size, visibilityToggle: visibilityToggle, style: getFieldsStyleTheme(theme), className: `${BRZ_PREFIX}-input-form`, onChange: handleChange })));
};