@razorpay/blade
Version:
The Design System that powers Razorpay
138 lines (133 loc) • 6.67 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import '../BaseInput/index.js';
import '../../Icons/index.js';
import '../../Box/BaseBox/index.js';
import '../../Form/CharacterCounter/index.js';
import '../../Button/IconButton/index.js';
import '../../../utils/assignWithoutSideEffects/index.js';
import '../../../utils/metaAttribute/index.js';
import { jsx } from 'react/jsx-runtime';
import EyeOffIcon from '../../Icons/EyeOffIcon/EyeOffIcon.js';
import EyeIcon from '../../Icons/EyeIcon/EyeIcon.js';
import { IconButton } from '../../Button/IconButton/IconButton.js';
import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
import { CharacterCounter } from '../../Form/CharacterCounter/CharacterCounter.js';
import { BaseInput } from '../BaseInput/BaseInput.js';
import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
var _excluded = ["label", "accessibilityLabel", "labelPosition", "showRevealButton", "maxCharacters", "validationState", "errorText", "successText", "helpText", "isDisabled", "defaultValue", "placeholder", "isRequired", "necessityIndicator", "value", "onChange", "onFocus", "onBlur", "onSubmit", "name", "autoFocus", "keyboardReturnKeyType", "autoCompleteSuggestionType", "testID", "size"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var _PasswordInput = function _PasswordInput(_ref, ref) {
var label = _ref.label,
accessibilityLabel = _ref.accessibilityLabel,
_ref$labelPosition = _ref.labelPosition,
labelPosition = _ref$labelPosition === void 0 ? 'top' : _ref$labelPosition,
_ref$showRevealButton = _ref.showRevealButton,
showRevealButton = _ref$showRevealButton === void 0 ? true : _ref$showRevealButton,
maxCharacters = _ref.maxCharacters,
validationState = _ref.validationState,
errorText = _ref.errorText,
successText = _ref.successText,
helpText = _ref.helpText,
_ref$isDisabled = _ref.isDisabled,
isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
defaultValue = _ref.defaultValue,
placeholder = _ref.placeholder,
_ref$isRequired = _ref.isRequired,
isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
_ref$necessityIndicat = _ref.necessityIndicator,
necessityIndicator = _ref$necessityIndicat === void 0 ? 'none' : _ref$necessityIndicat,
value = _ref.value,
onChange = _ref.onChange,
onFocus = _ref.onFocus,
onBlur = _ref.onBlur,
onSubmit = _ref.onSubmit,
name = _ref.name,
_ref$autoFocus = _ref.autoFocus,
autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
_ref$keyboardReturnKe = _ref.keyboardReturnKeyType,
keyboardReturnKeyType = _ref$keyboardReturnKe === void 0 ? 'done' : _ref$keyboardReturnKe,
autoCompleteSuggestionType = _ref.autoCompleteSuggestionType,
testID = _ref.testID,
_ref$size = _ref.size,
size = _ref$size === void 0 ? 'medium' : _ref$size,
rest = _objectWithoutProperties(_ref, _excluded);
var _React$useState = React__default.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
isRevealed = _React$useState2[0],
setIsRevealed = _React$useState2[1];
var isEnabled = !isDisabled;
// If input is disabled reveal button shouldn't be present and input should be masked
var isRevealedAndEnabled = isRevealed && isEnabled;
var toggleIsRevealed = function toggleIsRevealed() {
return setIsRevealed(function (revealed) {
return !revealed;
});
};
var iconAccessibilityLabel = isRevealedAndEnabled ? 'Hide password' : 'Show password';
var type = isRevealedAndEnabled ? 'text' : 'password';
var revealButtonIcon = isRevealedAndEnabled ? EyeOffIcon : EyeIcon;
var revealButton = showRevealButton && !isDisabled ? /*#__PURE__*/jsx(IconButton, {
size: "medium",
icon: revealButtonIcon,
onClick: toggleIsRevealed,
accessibilityLabel: iconAccessibilityLabel
}) : null;
var trailingFooterSlot = function trailingFooterSlot(value) {
var _value$length;
return maxCharacters ? /*#__PURE__*/jsx(BaseBox, {
marginTop: "spacing.2",
marginRight: "spacing.1",
children: /*#__PURE__*/jsx(CharacterCounter, {
currentCount: (_value$length = value === null || value === void 0 ? void 0 : value.length) !== null && _value$length !== void 0 ? _value$length : 0,
maxCount: maxCharacters
})
}) : null;
};
return /*#__PURE__*/jsx(BaseInput, _objectSpread({
ref: ref,
componentName: MetaConstants.PasswordInput,
id: "password-field",
label: label,
accessibilityLabel: accessibilityLabel,
hideLabelText: !Boolean(label),
labelPosition: labelPosition,
type: type,
trailingInteractionElement: revealButton,
trailingFooterSlot: trailingFooterSlot,
maxCharacters: maxCharacters,
validationState: validationState,
errorText: errorText,
successText: successText,
helpText: helpText,
isDisabled: isDisabled,
defaultValue: defaultValue,
placeholder: placeholder,
isRequired: isRequired,
necessityIndicator: necessityIndicator,
value: value,
onChange: onChange,
onBlur: onBlur,
onSubmit: onSubmit,
onFocus: onFocus,
name: name
// eslint-disable-next-line jsx-a11y/no-autofocus
,
autoFocus: autoFocus,
autoCompleteSuggestionType: autoCompleteSuggestionType,
keyboardReturnKeyType: keyboardReturnKeyType,
autoCapitalize: "none",
testID: testID,
size: size
}, rest));
};
// nosemgrep
var PasswordInput = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_PasswordInput), {
displayName: 'PasswordInput'
});
export { PasswordInput };
//# sourceMappingURL=PasswordInput.js.map