UNPKG

@razorpay/blade

Version:

The Design System that powers Razorpay

29 lines (26 loc) 4.99 kB
import _slicedToArray from '@babel/runtime/helpers/slicedToArray'; import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties'; import React__default from 'react'; import { BaseInput } from '../BaseInput/BaseInput.js'; import 'react-native-svg'; import '@babel/runtime/helpers/defineProperty'; import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js'; import { jsx } from 'react/jsx-runtime'; import '../../Icons/_Svg/Svg/Svg.native.js'; import 'styled-components/native'; import '@gorhom/portal'; import 'react-native-gesture-handler'; import '../../BladeProvider/useTheme.js'; import 'react-native'; import '../../BottomSheet/BottomSheetStack.js'; import '../../../tokens/global/typography.js'; import '../../../tokens/global/motion.js'; import EyeIcon from '../../Icons/EyeIcon/EyeIcon.js'; import EyeOffIcon from '../../Icons/EyeOffIcon/EyeOffIcon.js'; import { BaseBox } from '../../Box/BaseBox/BaseBox.native.js'; import { CharacterCounter } from '../../Form/CharacterCounter/CharacterCounter.js'; import { IconButton } from '../../Button/IconButton/IconButton.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"];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;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?jsx(IconButton,{size:"medium",icon:revealButtonIcon,onClick:toggleIsRevealed,accessibilityLabel:iconAccessibilityLabel}):null;var trailingFooterSlot=function trailingFooterSlot(value){var _value$length;return maxCharacters?jsx(BaseBox,{marginTop:"spacing.2",marginRight:"spacing.1",children:jsx(CharacterCounter,{currentCount:(_value$length=value==null?void 0:value.length)!=null?_value$length:0,maxCount:maxCharacters})}):null;};return jsx(BaseInput,Object.assign({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,autoFocus:autoFocus,autoCompleteSuggestionType:autoCompleteSuggestionType,keyboardReturnKeyType:keyboardReturnKeyType,autoCapitalize:"none",testID:testID,size:size},rest));};var PasswordInput=assignWithoutSideEffects(React__default.forwardRef(_PasswordInput),{displayName:'PasswordInput'}); export { PasswordInput }; //# sourceMappingURL=PasswordInput.js.map