@razorpay/blade
Version:
The Design System that powers Razorpay
29 lines (26 loc) • 10.1 kB
JavaScript
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import { DropdownContext } from './useDropdown.js';
import { dropdownComponentIds } from './dropdownComponentIds.js';
import { useId } from '../../utils/useId.js';
import { ComponentIds } from '../BottomSheet/componentIds.js';
import { BottomSheetAndDropdownGlueContext } from '../BottomSheet/BottomSheetContext.js';
import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
import 'react-native';
import '../../tokens/global/typography.js';
import '../../tokens/global/motion.js';
import { throwBladeError } from '../../utils/logger/logger.js';
import '../BladeProvider/useTheme.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
import { getComponentId, isValidAllowedChildren } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.native.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { useControllableState } from '../../utils/useControllable.js';
import { mergeRefs } from '../../utils/useMergeRefs.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import { jsx } from 'react/jsx-runtime';
var _excluded=["children","isOpen","onOpenChange","selectionType","testID","_width"];var validDropdownChildren=[dropdownComponentIds.BaseBox,dropdownComponentIds.triggers.SelectInput,dropdownComponentIds.triggers.SearchInput,dropdownComponentIds.triggers.DropdownButton,dropdownComponentIds.triggers.DropdownIconButton,dropdownComponentIds.triggers.DropdownLink,dropdownComponentIds.DropdownOverlay,dropdownComponentIds.triggers.AutoComplete,ComponentIds.BottomSheet,dropdownComponentIds.triggers.FilterChipSelectInput];var _Dropdown=function _Dropdown(_ref,ref){var children=_ref.children,isOpenControlled=_ref.isOpen,onOpenChange=_ref.onOpenChange,_ref$selectionType=_ref.selectionType,selectionType=_ref$selectionType===void 0?'single':_ref$selectionType,testID=_ref.testID,_width=_ref._width,rest=_objectWithoutProperties(_ref,_excluded);var _React$useState=React__default.useState([]),_React$useState2=_slicedToArray(_React$useState,2),options=_React$useState2[0],setOptions=_React$useState2[1];var _React$useState3=React__default.useState([]),_React$useState4=_slicedToArray(_React$useState3,2),filteredValues=_React$useState4[0],setFilteredValues=_React$useState4[1];var _React$useState5=React__default.useState([]),_React$useState6=_slicedToArray(_React$useState5,2),selectedIndices=_React$useState6[0],setSelectedIndices=_React$useState6[1];var _React$useState7=React__default.useState([]),_React$useState8=_slicedToArray(_React$useState7,2),controlledValueIndices=_React$useState8[0],setControlledValueIndices=_React$useState8[1];var _React$useState9=React__default.useState(-1),_React$useState10=_slicedToArray(_React$useState9,2),activeIndex=_React$useState10[0],setActiveIndex=_React$useState10[1];var _React$useState11=React__default.useState(-1),_React$useState12=_slicedToArray(_React$useState11,2),activeTagIndex=_React$useState12[0],setActiveTagIndex=_React$useState12[1];var _React$useState13=React__default.useState(false),_React$useState14=_slicedToArray(_React$useState13,2),shouldIgnoreBlurAnimation=_React$useState14[0],setShouldIgnoreBlurAnimation=_React$useState14[1];var _React$useState15=React__default.useState(false),_React$useState16=_slicedToArray(_React$useState15,2),hasFooterAction=_React$useState16[0],setHasFooterAction=_React$useState16[1];var _React$useState17=React__default.useState(false),_React$useState18=_slicedToArray(_React$useState17,2),hasAutoCompleteInHeader=_React$useState18[0],setHasAutoCompleteInHeader=_React$useState18[1];var _React$useState19=React__default.useState(false),_React$useState20=_slicedToArray(_React$useState19,2),hasUnControlledFilterChipSelectInput=_React$useState20[0],setHasUnControlledFilterChipSelectInput=_React$useState20[1];var _React$useState21=React__default.useState(false),_React$useState22=_slicedToArray(_React$useState21,2),isKeydownPressed=_React$useState22[0],setIsKeydownPressed=_React$useState22[1];var _React$useState23=React__default.useState(0),_React$useState24=_slicedToArray(_React$useState23,2),changeCallbackTriggerer=_React$useState24[0],setChangeCallbackTriggerer=_React$useState24[1];var _React$useState25=React__default.useState(false),_React$useState26=_slicedToArray(_React$useState25,2),isControlled=_React$useState26[0],setIsControlled=_React$useState26[1];var _React$useState27=React__default.useState(false),_React$useState28=_slicedToArray(_React$useState27,2),dropdownHasBottomSheet=_React$useState28[0],setDropdownHasBottomSheet=_React$useState28[1];var triggererWrapperRef=React__default.useRef(null);var triggererRef=React__default.useRef(null);var headerAutoCompleteRef=React__default.useRef(null);var actionListItemRef=React__default.useRef(null);var dropdownTriggerer=React__default.useRef();var isTagDismissedRef=React__default.useRef({value:false});var visibleTagsCountRef=React__default.useRef({value:0});var dropdownContainerRef=React__default.useRef(null);var dropdownBaseId=useId('dropdown');var isDropdownOpenRef=React__default.useRef(isOpenControlled);var _useControllableState=useControllableState({value:isOpenControlled,defaultValue:false,onChange:function onChange(isOpenControlledValue){isDropdownOpenRef.current=isOpenControlledValue;onOpenChange==null?void 0:onOpenChange(isOpenControlledValue);}}),_useControllableState2=_slicedToArray(_useControllableState,2),isDropdownOpen=_useControllableState2[0],setIsDropdownOpen=_useControllableState2[1];isDropdownOpenRef.current=isDropdownOpen;var setIsOpen=function setIsOpen(isOpenValue){isDropdownOpenRef.current=isOpenValue;setIsDropdownOpen(function(){return isOpenValue;});};var close=React__default.useCallback(function(){setActiveTagIndex(-1);setIsOpen(false);},[]);React__default.Children.map(children,function(child){if(React__default.isValidElement(child)){if(__DEV__){var _getComponentId;if(!validDropdownChildren.includes((_getComponentId=getComponentId(child))!=null?_getComponentId:'')){throwBladeError({message:`Dropdown can only have one of following elements as children - \n\n ${validDropdownChildren.join(', ')} \n\n Check out: https://blade.razorpay.com/?path=/story/components-dropdown`,moduleName:'Dropdown'});}}if(isValidAllowedChildren(child,dropdownComponentIds.triggers.SelectInput)){dropdownTriggerer.current='SelectInput';}if(isValidAllowedChildren(child,dropdownComponentIds.triggers.SearchInput)){dropdownTriggerer.current='SearchInput';}if(isValidAllowedChildren(child,dropdownComponentIds.triggers.DropdownButton)){dropdownTriggerer.current='DropdownButton';}if(isValidAllowedChildren(child,dropdownComponentIds.triggers.DropdownIconButton)){dropdownTriggerer.current='DropdownIconButton';}if(isValidAllowedChildren(child,dropdownComponentIds.triggers.AutoComplete)){dropdownTriggerer.current='AutoComplete';}if(isValidAllowedChildren(child,dropdownComponentIds.triggers.FilterChipSelectInput)){dropdownTriggerer.current='FilterChipSelectInput';}}});var contextValue=React__default.useMemo(function(){return {isOpen:isDropdownOpen,setIsOpen:setIsOpen,close:close,selectedIndices:selectedIndices,setSelectedIndices:setSelectedIndices,controlledValueIndices:controlledValueIndices,setControlledValueIndices:setControlledValueIndices,options:options,setOptions:setOptions,filteredValues:filteredValues,setFilteredValues:setFilteredValues,activeIndex:activeIndex,setActiveIndex:setActiveIndex,activeTagIndex:activeTagIndex,setActiveTagIndex:setActiveTagIndex,visibleTagsCountRef:visibleTagsCountRef,shouldIgnoreBlurAnimation:shouldIgnoreBlurAnimation,setShouldIgnoreBlurAnimation:setShouldIgnoreBlurAnimation,isKeydownPressed:isKeydownPressed,setIsKeydownPressed:setIsKeydownPressed,dropdownBaseId:dropdownBaseId,triggererRef:triggererRef,headerAutoCompleteRef:headerAutoCompleteRef,triggererWrapperRef:triggererWrapperRef,actionListItemRef:actionListItemRef,selectionType:selectionType,hasFooterAction:hasFooterAction,setHasFooterAction:setHasFooterAction,hasAutoCompleteInHeader:hasAutoCompleteInHeader,setHasAutoCompleteInHeader:setHasAutoCompleteInHeader,hasUnControlledFilterChipSelectInput:hasUnControlledFilterChipSelectInput,setHasUnControlledFilterChipSelectInput:setHasUnControlledFilterChipSelectInput,dropdownTriggerer:dropdownTriggerer.current,changeCallbackTriggerer:changeCallbackTriggerer,setChangeCallbackTriggerer:setChangeCallbackTriggerer,isControlled:isControlled,setIsControlled:setIsControlled,isTagDismissedRef:isTagDismissedRef};},[isDropdownOpen,isOpenControlled,selectedIndices,controlledValueIndices,options,filteredValues,activeIndex,activeTagIndex,shouldIgnoreBlurAnimation,selectionType,hasFooterAction,isKeydownPressed,changeCallbackTriggerer,isControlled]);var BottomSheetAndDropdownGlueContextValue=React__default.useMemo(function(){return {isOpen:isDropdownOpen,dropdownHasBottomSheet:dropdownHasBottomSheet,hasAutoCompleteInHeader:hasAutoCompleteInHeader,setDropdownHasBottomSheet:setDropdownHasBottomSheet,onBottomSheetDismiss:close};},[dropdownHasBottomSheet,hasAutoCompleteInHeader,isDropdownOpen,close]);return jsx(BottomSheetAndDropdownGlueContext.Provider,{value:BottomSheetAndDropdownGlueContextValue,children:jsx(DropdownContext.Provider,{value:contextValue,children:jsx(BaseBox,Object.assign({ref:mergeRefs(ref,dropdownContainerRef)},metaAttribute({name:MetaConstants.Dropdown,testID:testID}),getStyledProps(rest),makeAnalyticsAttribute(rest),{width:_width,children:jsx(BaseBox,{position:"relative",textAlign:'left',children:children})}))})});};var Dropdown=assignWithoutSideEffects(React__default.forwardRef(_Dropdown),{componentId:dropdownComponentIds.Dropdown});
export { Dropdown };
//# sourceMappingURL=Dropdown.js.map