@razorpay/blade
Version:
The Design System that powers Razorpay
8 lines (5 loc) • 4.61 kB
JavaScript
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { useMemo, useState, useRef, useEffect, useCallback } from 'react';
var format=function format(value,pattern){if(!pattern)return value;var result='';var valueIndex=0;for(var i=0;i<pattern.length;i++){var patternChar=pattern[i];if(patternChar==='#'){if(valueIndex<value.length){result+=value[valueIndex];valueIndex++;}else {break;}}else {result+=patternChar;}}return result;};var stripPatternCharacters=function stripPatternCharacters(value){return value.replace(/[^\dA-z]/g,'');};var isUserCharacter=function isUserCharacter(character){return /[\dA-z]/.test(character);};var useFormattedInput=function useFormattedInput(_ref){var pattern=_ref.format,onChange=_ref.onChange,userValue=_ref.value,_ref$defaultValue=_ref.defaultValue,defaultValue=_ref$defaultValue===void 0?'':_ref$defaultValue;var initialValue=useMemo(function(){return format(userValue!=null?userValue:defaultValue,pattern!=null?pattern:'');},[userValue,defaultValue,pattern]);var _useState=useState(initialValue),_useState2=_slicedToArray(_useState,2),internalValue=_useState2[0],setInternalValue=_useState2[1];var inputRef=useRef(null);var infoRef=useRef({});var maxLength=useMemo(function(){return pattern==null?void 0:pattern.length;},[pattern]);useEffect(function(){if((userValue===''||userValue===undefined)&&defaultValue===''){var emptyFormatted=format('',pattern!=null?pattern:'');setInternalValue(emptyFormatted);}if(userValue!==undefined&&userValue!==''&&pattern){var rawValue=stripPatternCharacters(userValue);var newFormatted=format(rawValue,pattern);if(newFormatted!==internalValue){setInternalValue(newFormatted);}}},[userValue,pattern]);useEffect(function(){var _infoRef$current=infoRef.current,cursorPosition=_infoRef$current.cursorPosition,endOfSection=_infoRef$current.endOfSection;if(endOfSection||cursorPosition===undefined)return;if(inputRef.current){inputRef.current.setSelectionRange(cursorPosition,cursorPosition);}},[internalValue]);var handleChange=useCallback(function(_ref2){var _inputRef$current$sel,_inputRef$current;var name=_ref2.name,inputValue=_ref2.value;if(!pattern){var cleanValue=inputValue!=null?inputValue:'';onChange==null?void 0:onChange({name:name,value:cleanValue});setInternalValue(cleanValue);return;}var currentValue=internalValue;var newInputValue=inputValue!=null?inputValue:'';var cursorPosition=(_inputRef$current$sel=(_inputRef$current=inputRef.current)==null?void 0:_inputRef$current.selectionStart)!=null?_inputRef$current$sel:0;var didDelete=newInputValue.length<currentValue.length;infoRef.current.cursorPosition=cursorPosition;var rawValue=stripPatternCharacters(newInputValue);if(didDelete){var _currentValue$cursorP;var deletedChar=(_currentValue$cursorP=currentValue[cursorPosition])!=null?_currentValue$cursorP:'';var deletedDelimiter=!isUserCharacter(deletedChar);if(deletedDelimiter){var beforeCursor=newInputValue.substring(0,cursorPosition);var afterCursor=newInputValue.substring(cursorPosition);var rawBefore=stripPatternCharacters(beforeCursor);var rawAfter=stripPatternCharacters(afterCursor);rawValue=rawBefore.slice(0,-1)+rawAfter;infoRef.current.cursorPosition=beforeCursor.replace(/([\d\w]+)[^\dA-z]+$/,'$1').length-1;}}var formattedValue=format(rawValue,pattern);infoRef.current.endOfSection=false;if(!didDelete){var nextChar=formattedValue[cursorPosition];var nextIsDelimiter=nextChar?!isUserCharacter(nextChar):false;var remainingText=formattedValue.substring(cursorPosition);var nextUserCharIndex=remainingText.search(/[\dA-z]/);var hasMoreUserChars=nextUserCharIndex!==-1;infoRef.current.endOfSection=nextIsDelimiter&&!hasMoreUserChars;if(nextIsDelimiter&&hasMoreUserChars){var _formattedValue;var prevChar=(_formattedValue=formattedValue[cursorPosition-1])!=null?_formattedValue:'';var prevIsDelimiter=!isUserCharacter(prevChar);if(prevIsDelimiter){infoRef.current.cursorPosition=cursorPosition+nextUserCharIndex+1;}else {var delimiterExistedBefore=currentValue[cursorPosition]===formattedValue[cursorPosition];if(delimiterExistedBefore){infoRef.current.cursorPosition=cursorPosition+1;}}}}onChange==null?void 0:onChange({name:name,value:formattedValue,rawValue:rawValue});setInternalValue(formattedValue);},[pattern,onChange,internalValue]);var handleKeyDown=useCallback(function(event){if(event.currentTarget&&inputRef.current!==event.currentTarget){inputRef.current=event.currentTarget;}},[]);return {formattedValue:internalValue,handleChange:handleChange,handleKeyDown:handleKeyDown,maxLength:maxLength};};
export { useFormattedInput };
//# sourceMappingURL=useFormattedInput.js.map