@razorpay/blade/build/lib/native/components/Switch/Switch.js

The Design System that powers Razorpay

import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import { ThumbIcon } from './ThumbIcon.js';
import { switchHoverTokens } from './switchTokens.js';
import { Thumb } from './Thumb.js';
import { AnimatedThumb } from './AnimatedThumb.native.js';
import { SwitchTrack } from './SwitchTrack.native.js';
import 'styled-components/native';
import '@gorhom/portal';
import 'react-native-gesture-handler';
import useTheme from '../BladeProvider/useTheme.js';
import 'react-native';
import { useBreakpoint } from '../../utils/useBreakpoint/useBreakpoint.js';
import '../BottomSheet/BottomSheetStack.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
import { useCheckbox } from '../Checkbox/useCheckbox.js';
import { SelectorInput } from '../Form/Selector/SelectorInput.native.js';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.native.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { SelectorLabel } from '../Form/Selector/SelectorLabel.native.js';
import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.native.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
import '../../tokens/global/typography.js';
import '../../tokens/global/motion.js';
import { getOuterMotionRef, getInnerMotionRef } from '../../utils/getMotionRefs.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';

var _excluded=["defaultChecked","isChecked","isDisabled","name","onChange","size","value","accessibilityLabel","testID","_motionMeta"];var _Switch=function _Switch(_ref,ref){var defaultChecked=_ref.defaultChecked,isChecked=_ref.isChecked,isDisabled=_ref.isDisabled,name=_ref.name,onChange=_ref.onChange,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,value=_ref.value,accessibilityLabel=_ref.accessibilityLabel,testID=_ref.testID,_motionMeta=_ref._motionMeta,rest=_objectWithoutProperties(_ref,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isPressed=_React$useState2[0],setIsPressed=_React$useState2[1];var _useCheckbox=useCheckbox({role:'switch',defaultChecked:defaultChecked,isChecked:isChecked,isIndeterminate:false,hasError:false,hasHelperText:false,isDisabled:isDisabled,isRequired:false,name:name,value:value,onChange:onChange}),state=_useCheckbox.state,inputProps=_useCheckbox.inputProps;var handlePointerPressedIn=React__default.useCallback(function(){if(isDisabled)return;setIsPressed(true);},[isDisabled]);var handlePointerPressedOut=React__default.useCallback(function(){if(isDisabled)return;setIsPressed(false);},[isDisabled]);var handleKeyboardPressedIn=React__default.useCallback(function(e){if(isDisabled)return;if(e.key===' '){setIsPressed(true);}},[isDisabled]);var handleKeyboardPressedOut=React__default.useCallback(function(e){if(isDisabled)return;if(e.key===' '){setIsPressed(false);}},[isDisabled]);return jsx(BaseBox,Object.assign({ref:getOuterMotionRef({_motionMeta:_motionMeta,ref:ref})},metaAttribute({testID:testID,name:MetaConstants.Switch}),{display:state.isReactNative?'flex':'inline-block'},getStyledProps(rest),makeAnalyticsAttribute(rest),{children:jsxs(SelectorLabel,{componentName:MetaConstants.SwitchLabel,onTouchStart:handlePointerPressedIn,onTouchEnd:handlePointerPressedOut,onMouseDown:handlePointerPressedIn,onMouseUp:handlePointerPressedOut,onMouseOut:handlePointerPressedOut,onKeyDown:handleKeyboardPressedIn,onKeyUp:handleKeyboardPressedOut,style:{cursor:isDisabled?'not-allowed':'pointer'},inputProps:state.isReactNative?Object.assign({},inputProps,makeAccessible({label:accessibilityLabel})):{},children:[jsx(SelectorInput,{hoverTokens:switchHoverTokens,ref:getInnerMotionRef({_motionMeta:_motionMeta,ref:ref}),isChecked:state.isChecked,isDisabled:isDisabled,hasError:false,inputProps:inputProps,accessibilityLabel:accessibilityLabel}),jsx(SwitchTrack,Object.assign({size:size,deviceType:matchedDeviceType,isDisabled:Boolean(isDisabled),isChecked:state.isChecked},makeAccessible({hidden:true}),{children:jsx(Thumb,{size:size,deviceType:matchedDeviceType,isChecked:state.isChecked,children:jsx(AnimatedThumb,{isPressed:isPressed,isChecked:state.isChecked,isDisabled:isDisabled,size:size,children:jsx(ThumbIcon,{isChecked:state.isChecked,isDisabled:isDisabled,size:size})})})}))]})}));};var Switch=assignWithoutSideEffects(React__default.forwardRef(_Switch),{displayName:'Switch'});

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