@activecollab/components
Version:
ActiveCollab Components
160 lines • 6.33 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import React, { forwardRef, useCallback, useEffect, useRef, useState } from "react";
import styled from "styled-components";
import { Input } from "./Input";
import { StyledPasswordIndicator, StyledPasswordIndicatorWrapper } from "./Styles";
import { useForkRef } from "../../utils";
import { IconButton } from "../IconButton";
import { EyeIcon, EyeOffIcon, EyeOffSmallIcon, EyeSmallIcon, InfoIcon, InfoSmallIcon } from "../Icons";
import { Tooltip } from "../Tooltip";
import { Caption1 } from "../Typography";
const transform = {
biggest: "big",
regular: "small",
big: "medium"
};
const StypedEyeIconSmall = styled(EyeSmallIcon).withConfig({
displayName: "InputPassword__StypedEyeIconSmall",
componentId: "sc-v930fj-0"
})(["", ""], {
"cursor": "pointer"
});
const StypedEyeOffIconSmall = styled(EyeOffSmallIcon).withConfig({
displayName: "InputPassword__StypedEyeOffIconSmall",
componentId: "sc-v930fj-1"
})(["", ""], {
"cursor": "pointer"
});
const StypedEyeIcon = styled(EyeIcon).withConfig({
displayName: "InputPassword__StypedEyeIcon",
componentId: "sc-v930fj-2"
})(["", ""], {
"cursor": "pointer"
});
const StypedEyeOffIcon = styled(EyeOffIcon).withConfig({
displayName: "InputPassword__StypedEyeOffIcon",
componentId: "sc-v930fj-3"
})(["", ""], {
"cursor": "pointer"
});
const StyledInfoIcon = styled(InfoIcon).withConfig({
displayName: "InputPassword__StyledInfoIcon",
componentId: "sc-v930fj-4"
})(["", ""], {
"marginRight": "0.25rem",
"cursor": "help",
"fill": "var(--red-alert)"
});
const StyledInfoSmallIcon = styled(InfoSmallIcon).withConfig({
displayName: "InputPassword__StyledInfoSmallIcon",
componentId: "sc-v930fj-5"
})(["", ""], {
"marginRight": "0.25rem",
"cursor": "help",
"fill": "var(--red-alert)"
});
const StyledInputPasswordWrapper = styled.div.withConfig({
displayName: "InputPassword__StyledInputPasswordWrapper",
componentId: "sc-v930fj-6"
})(["width:fit-content;display:flex;flex-direction:column;"]);
const InputPasswordAdornment = _ref => {
let {
invalid,
errorMessage,
size,
hideControl,
showText,
hideTooltipText,
showTooltipText,
disabled,
toggleShow
} = _ref;
return /*#__PURE__*/React.createElement(React.Fragment, null, invalid && errorMessage && /*#__PURE__*/React.createElement(Tooltip, {
title: errorMessage
}, size === "regular" ? /*#__PURE__*/React.createElement(StyledInfoSmallIcon, null) : /*#__PURE__*/React.createElement(StyledInfoIcon, null)), !hideControl && /*#__PURE__*/React.createElement(Tooltip, {
title: showText ? hideTooltipText : showTooltipText
}, /*#__PURE__*/React.createElement(IconButton, {
variant: "text gray",
type: "button",
size: transform[size],
disabled: disabled,
onClick: toggleShow,
style: {
flexShrink: 0
}
}, showText ? size === "regular" ? /*#__PURE__*/React.createElement(StypedEyeOffIconSmall, null) : /*#__PURE__*/React.createElement(StypedEyeOffIcon, null) : size === "regular" ? /*#__PURE__*/React.createElement(StypedEyeIconSmall, null) : /*#__PURE__*/React.createElement(StypedEyeIcon, null))));
};
export const InputPassword = /*#__PURE__*/forwardRef((_ref2, ref) => {
var _validation$levels;
let {
size = "regular",
disabled,
show = false,
hideControl,
showTooltipText = "Show",
hideTooltipText = "Hide",
value: defaultValue = "",
validation,
errorMessage,
invalid,
onChange,
...rest
} = _ref2;
const inputRef = useRef(null);
const handleRef = useForkRef(ref, inputRef);
const [showText, setShowText] = useState(show);
const [strength, setStrength] = useState(0);
const [value, setValue] = useState(() => defaultValue);
const handleChange = useCallback(e => {
setValue(e.target.value);
typeof (validation == null ? void 0 : validation.getStrength) === "function" && setStrength(validation.getStrength(e.target.value));
typeof onChange === "function" && onChange(e.target.value);
}, [onChange, validation]);
const toggleShow = useCallback(() => {
var _inputRef$current;
(_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
setShowText(prevState => !prevState);
}, []);
useEffect(() => {
setShowText(show);
}, [show]);
if (validation != null && validation.levels && validation != null && validation.getStrength && typeof (validation == null ? void 0 : validation.getStrength) === "function") {
if (validation.levels.length !== 5) {
console.warn("Levels length must be exactly 5.");
}
if (typeof validation.getStrength("test") !== "number") {
console.warn("getStrength must be a function that accepts a string and returns a number.");
}
}
return /*#__PURE__*/React.createElement(StyledInputPasswordWrapper, null, /*#__PURE__*/React.createElement(Input, _extends({}, rest, {
ref: handleRef,
size: size,
value: value,
disabled: disabled,
type: showText ? "text" : "password",
onChange: handleChange,
invalid: invalid,
"data-testid": "InputPassword",
endAdornment: /*#__PURE__*/React.createElement(InputPasswordAdornment, {
invalid: invalid,
errorMessage: errorMessage,
size: size,
hideControl: hideControl,
showText: showText,
hideTooltipText: hideTooltipText,
showTooltipText: showTooltipText,
disabled: disabled,
toggleShow: toggleShow
})
})), (validation == null || (_validation$levels = validation.levels) == null ? void 0 : _validation$levels.length) === 5 && typeof (validation == null ? void 0 : validation.getStrength) === "function" && typeof (validation == null ? void 0 : validation.getStrength("test")) === "number" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledPasswordIndicatorWrapper, null, [...Array(4)].map((_, index) => /*#__PURE__*/React.createElement(StyledPasswordIndicator, {
key: index,
$strength: strength,
$index: index,
"data-testid": strength >= index + 1 ? "active" : ""
}))), /*#__PURE__*/React.createElement(Caption1, {
align: "right",
color: "tertiary"
}, validation.levels[strength])));
});
InputPassword.displayName = "InputPassword";
//# sourceMappingURL=InputPassword.js.map