@razorpay/blade/build/lib/native/components/Input/SearchInput/SearchInput.js

The Design System that powers Razorpay

import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default, { useState, useEffect } from 'react';
import { BaseInput } from '../BaseInput/BaseInput.js';
import { getKeyboardAndAutocompleteProps } from '../BaseInput/utils.js';
import isEmpty from '../../../utils/lodashButBetter/isEmpty.js';
import 'react-native-svg';
import '@babel/runtime/helpers/defineProperty';
import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import '../../Icons/_Svg/Svg/Svg.native.js';
import '../../../tokens/global/typography.js';
import '../../../tokens/global/motion.js';
import 'styled-components/native';
import '@gorhom/portal';
import 'react-native-gesture-handler';
import '../../BladeProvider/useTheme.js';
import 'react-native';
import { getPlatformType } from '../../../utils/getPlatformType/getPlatformType.js';
import '../../BottomSheet/BottomSheetStack.js';
import CloseIcon from '../../Icons/CloseIcon/CloseIcon.js';
import SearchIcon from '../../Icons/SearchIcon/SearchIcon.js';
import { IconButton } from '../../Button/IconButton/IconButton.js';
import { BaseBox } from '../../Box/BaseBox/BaseBox.native.js';
import { Spinner } from '../../Spinner/Spinner/Spinner.js';
import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
import { useMergeRefs } from '../../../utils/useMergeRefs.js';
import { dropdownComponentIds } from '../../Dropdown/dropdownComponentIds.js';
import { useDropdown } from '../../Dropdown/useDropdown.js';
import '../../Dropdown/Dropdown.js';
import { DropdownOverlay } from '../../Dropdown/DropdownOverlay.native.js';
import '../../Dropdown/DropdownButton.js';
import '../../Dropdown/DropdownLink.js';
import '../../Dropdown/DropdownIconButton.js';
import '../../Dropdown/DropdownHeaderFooter.js';
import { InputDropdownButton } from '../../Dropdown/InputDropdownButton.native.js';
import { Divider } from '../../Divider/Divider.js';
import { getComponentId } from '../../../utils/isValidAllowedChildren/isValidAllowedChildren.js';

var _excluded=["label","accessibilityLabel","labelPosition","placeholder","defaultValue","name","value","onChange","onClick","onFocus","onBlur","onSubmit","isDisabled","helpText","onClearButtonClick","isLoading","autoCapitalize","autoFocus","testID","size","showSearchIcon","trailing"];var isReactNative=function isReactNative(_textInputRef){return getPlatformType()==='react-native';};var _SearchInput=function _SearchInput(_ref,ref){var label=_ref.label,accessibilityLabel=_ref.accessibilityLabel,_ref$labelPosition=_ref.labelPosition,labelPosition=_ref$labelPosition===void 0?'top':_ref$labelPosition,placeholder=_ref.placeholder,defaultValue=_ref.defaultValue,name=_ref.name,value=_ref.value,_onChange=_ref.onChange,_onClick=_ref.onClick,onFocus=_ref.onFocus,onBlur=_ref.onBlur,onSubmit=_ref.onSubmit,isDisabled=_ref.isDisabled,helpText=_ref.helpText,onClearButtonClick=_ref.onClearButtonClick,isLoading=_ref.isLoading,autoCapitalize=_ref.autoCapitalize,autoFocus=_ref.autoFocus,testID=_ref.testID,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,_ref$showSearchIcon=_ref.showSearchIcon,showSearchIcon=_ref$showSearchIcon===void 0?true:_ref$showSearchIcon,trailing=_ref.trailing,rest=_objectWithoutProperties(_ref,_excluded);var textInputRef=React__default.useRef(null);var mergedRef=useMergeRefs(ref,textInputRef);var _useState=useState(false),_useState2=_slicedToArray(_useState,2),shouldShowClearButton=_useState2[0],setShouldShowClearButton=_useState2[1];var _useState3=useState(false),_useState4=_slicedToArray(_useState3,2),isTrailingDropDownOpen=_useState4[0],setIsTrailingDropDownOpen=_useState4[1];var _useDropdown=useDropdown(),triggererWrapperRef=_useDropdown.triggererWrapperRef,onTriggerKeydown=_useDropdown.onTriggerKeydown,onTriggerClick=_useDropdown.onTriggerClick,dropdownTriggerer=_useDropdown.dropdownTriggerer,closeParentDropDown=_useDropdown.close,isParentDropDownOpen=_useDropdown.isOpen;var isInsideDropdown=dropdownTriggerer==='SearchInput';React__default.useEffect(function(){setShouldShowClearButton(Boolean(defaultValue!=null?defaultValue:value));},[defaultValue,value]);useEffect(function(){if(isParentDropDownOpen&&isTrailingDropDownOpen){setIsTrailingDropDownOpen(false);}},[closeParentDropDown,isParentDropDownOpen]);useEffect(function(){if(isTrailingDropDownOpen&&isParentDropDownOpen){closeParentDropDown();}},[setIsTrailingDropDownOpen,isTrailingDropDownOpen]);var trailingDropdown=trailing&&getComponentId(trailing)==='Dropdown'?trailing:null;var renderTrailingDropDown=function renderTrailingDropDown(){if(!trailingDropdown){return null;}return React__default.cloneElement(trailingDropdown,{selectionType:'single',isOpen:isTrailingDropDownOpen,onOpenChange:function onOpenChange(isOpen){setIsTrailingDropDownOpen(isOpen);},children:React__default.Children.map(trailingDropdown.props.children,function(child){if(child.type===InputDropdownButton){return React__default.cloneElement(child,{_isInsideSearchInput:true});}if(child.type===DropdownOverlay){return React__default.cloneElement(child,{referenceRef:triggererWrapperRef,_isNestedDropdown:true,defaultPlacement:'bottom-end'});}return child;})});};var renderClearButton=function renderClearButton(){return jsx(IconButton,{size:"medium",icon:CloseIcon,onClick:function onClick(){var _textInputRef$current;if(isEmpty(value)&&textInputRef.current){if(isReactNative(textInputRef.current)){textInputRef.current.clear();textInputRef.current.focus();}else if(textInputRef.current instanceof HTMLInputElement){textInputRef.current.value='';textInputRef.current.focus();}}onClearButtonClick==null?void 0:onClearButtonClick();textInputRef==null?void 0:(_textInputRef$current=textInputRef.current)==null?void 0:_textInputRef$current.focus();setShouldShowClearButton(false);},isDisabled:isDisabled,accessibilityLabel:"Clear Input Content"});};var renderInteractionElement=function renderInteractionElement(){if(isLoading){return jsx(Spinner,{accessibilityLabel:"Loading Content",color:"primary"});}if(shouldShowClearButton&&trailingDropdown){return jsxs(BaseBox,{display:"flex",gap:"spacing.3",children:[renderClearButton()," ",jsx(Divider,{orientation:"vertical"})]});}if(shouldShowClearButton){return renderClearButton();}return null;};return jsx(BaseBox,{position:"relative",children:jsx(BaseInput,Object.assign({id:"searchinput",componentName:MetaConstants.SearchInput,ref:mergedRef,isDropdownTrigger:true,setInputWrapperRef:isInsideDropdown||isTrailingDropDownOpen?function(wrapperNode){triggererWrapperRef.current=wrapperNode;}:undefined,label:label,accessibilityLabel:accessibilityLabel,hideLabelText:!Boolean(label),labelPosition:labelPosition,placeholder:placeholder,defaultValue:defaultValue,value:value,name:name,onKeyDown:isInsideDropdown?onTriggerKeydown:undefined,onChange:function onChange(_ref2){var name=_ref2.name,value=_ref2.value;if(value!=null&&value.length){setShouldShowClearButton(true);}if(shouldShowClearButton&&!(value!=null&&value.length)){setShouldShowClearButton(false);}_onChange==null?void 0:_onChange({name:name,value:value});},onClick:function onClick(e){if(isDisabled)return;if(isInsideDropdown){onTriggerClick();}_onClick==null?void 0:_onClick(e);},onFocus:onFocus,onBlur:onBlur,onSubmit:onSubmit,isDisabled:isDisabled,leadingIcon:showSearchIcon?SearchIcon:undefined,trailingInteractionElement:renderInteractionElement(),trailingDropDown:renderTrailingDropDown(),helpText:helpText,autoFocus:autoFocus,testID:testID},getKeyboardAndAutocompleteProps({type:'search',autoCapitalize:autoCapitalize}),{size:size},rest))});};var SearchInput=assignWithoutSideEffects(React__default.forwardRef(_SearchInput),{displayName:'SearchInput',componentId:dropdownComponentIds.triggers.SearchInput});

export { SearchInput };
//# sourceMappingURL=SearchInput.js.map