@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
108 lines (107 loc) • 5.22 kB
JavaScript
"use strict";
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Context = _interopRequireDefault(require("../../../../shared/Context.js"));
var _index = _interopRequireDefault(require("../String/index.js"));
var _Input = require("../../../../components/Input.js");
var _view = _interopRequireDefault(require("../../../../icons/view.js"));
var _hide = _interopRequireDefault(require("../../../../icons/hide.js"));
var _view_medium = _interopRequireDefault(require("../../../../icons/view_medium.js"));
var _hide_medium = _interopRequireDefault(require("../../../../icons/hide_medium.js"));
var _withSnakeCaseProps = require("../../../../shared/helpers/withSnakeCaseProps.js");
var _useTranslation = _interopRequireDefault(require("../../hooks/useTranslation.js"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function Password({
id,
className,
innerRef,
value,
label,
disabled,
size,
...externalProps
}) {
var _innerRef$current;
const props = (0, _withSnakeCaseProps.convertSnakeCaseProps)(Object.freeze(externalProps));
const [hidden, setHidden] = (0, _react.useState)(true);
const sharedContext = (0, _react.useContext)(_Context.default);
const translations = (0, _useTranslation.default)().Password;
const ref = (0, _react.useRef)((_innerRef$current = innerRef === null || innerRef === void 0 ? void 0 : innerRef.current) !== null && _innerRef$current !== void 0 ? _innerRef$current : null);
const errorMessages = (0, _react.useMemo)(() => {
return {
'Field.errorRequired': translations.errorRequired,
...props.errorMessages
};
}, [translations.errorRequired, props.errorMessages]);
const toggleVisibility = (0, _react.useCallback)(event => {
const {
onShowPassword,
onHidePassword
} = (0, _withSnakeCaseProps.convertSnakeCaseProps)(props);
const value = ref.current.value;
setHidden(hidden => {
hidden ? onShowPassword === null || onShowPassword === void 0 ? void 0 : onShowPassword({
...event,
value
}) : onHidePassword === null || onHidePassword === void 0 ? void 0 : onHidePassword({
...event,
value
});
return !hidden;
});
if (ref.current) {
ref.current.focus();
}
}, [props]);
const getAriaLabel = (0, _react.useCallback)(() => {
const ariaLabels = {
showPassword: translations.ariaLabelShow,
hidePassword: translations.ariaLabelHide
};
if (externalProps.show_password) {
ariaLabels['showPassword'] = externalProps.show_password;
}
if (externalProps.hide_password) {
ariaLabels['hidePassword'] = externalProps.hide_password;
}
return ariaLabels;
}, [externalProps.show_password, externalProps.hide_password, translations]);
const ariaLabels = getAriaLabel();
const ToggleVisibilityButton = (0, _react.useCallback)(() => {
return _react.default.createElement(_Input.SubmitButton, {
id: id + '-submit-button',
type: "button",
variant: "secondary",
"aria-controls": id,
"aria-label": hidden ? ariaLabels.showPassword : ariaLabels.hidePassword,
icon: size === 'large' ? hidden ? _view_medium.default : _hide_medium.default : hidden ? _view.default : _hide.default,
disabled: disabled,
skeleton: sharedContext.skeleton,
onClick: toggleVisibility
});
}, [id, hidden, sharedContext.skeleton, disabled, size, toggleVisibility, ariaLabels]);
return _react.default.createElement(_index.default, _extends({
id: id,
className: (0, _classnames.default)('dnb-forms-field-password', className),
label: label !== null && label !== void 0 ? label : translations.label,
type: hidden ? 'password' : 'text',
value: value,
innerRef: ref,
"aria-describedby": id + '-submit-button',
submitElement: _react.default.createElement(ToggleVisibilityButton, null),
disabled: disabled,
size: size,
autoComplete: "current-password",
errorMessages: errorMessages
}, props));
}
var _default = exports.default = Password;
Password._supportsSpacingProps = true;
//# sourceMappingURL=Password.js.map