@activecollab/components
Version:
ActiveCollab Components
172 lines • 7.54 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["size", "disabled", "show", "hideControl", "showTooltipText", "hideTooltipText", "value", "validation", "errorMessage", "invalid", "onChange", "wrapperClassName"];
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 = _ref.invalid,
errorMessage = _ref.errorMessage,
size = _ref.size,
hideControl = _ref.hideControl,
showText = _ref.showText,
hideTooltipText = _ref.hideTooltipText,
showTooltipText = _ref.showTooltipText,
disabled = _ref.disabled,
toggleShow = _ref.toggleShow;
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 _ref2$size = _ref2.size,
size = _ref2$size === void 0 ? "regular" : _ref2$size,
disabled = _ref2.disabled,
_ref2$show = _ref2.show,
show = _ref2$show === void 0 ? false : _ref2$show,
hideControl = _ref2.hideControl,
_ref2$showTooltipText = _ref2.showTooltipText,
showTooltipText = _ref2$showTooltipText === void 0 ? "Show" : _ref2$showTooltipText,
_ref2$hideTooltipText = _ref2.hideTooltipText,
hideTooltipText = _ref2$hideTooltipText === void 0 ? "Hide" : _ref2$hideTooltipText,
_ref2$value = _ref2.value,
defaultValue = _ref2$value === void 0 ? "" : _ref2$value,
validation = _ref2.validation,
errorMessage = _ref2.errorMessage,
invalid = _ref2.invalid,
onChange = _ref2.onChange,
wrapperClassName = _ref2.wrapperClassName,
rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
const inputRef = useRef(null);
const handleRef = useForkRef(ref, inputRef);
const _useState = useState(show),
showText = _useState[0],
setShowText = _useState[1];
const _useState2 = useState(0),
strength = _useState2[0],
setStrength = _useState2[1];
const _useState3 = useState(() => defaultValue),
value = _useState3[0],
setValue = _useState3[1];
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, {
className: wrapperClassName
}, /*#__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