@razorpay/blade
Version:
The Design System that powers Razorpay
24 lines (21 loc) • 3.4 kB
JavaScript
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import { Pressable, Linking } from 'react-native';
import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated';
import styled from 'styled-components/native';
import { CARD_SCALE_DOWN_VALUE } from './constants.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
import { logger } from '../../utils/logger/logger.js';
import { castNativeType } from '../../utils/platform/castUtils.js';
import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.native.js';
import useTheme from '../BladeProvider/useTheme.js';
import '@gorhom/portal';
import 'react-native-gesture-handler';
import '../BottomSheet/BottomSheetStack.js';
import { jsx } from 'react/jsx-runtime';
import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.native.js';
var _excluded=["isSelected"],_excluded2=["children","onClick","isSelected","shouldScaleOnHover","href","as","accessibilityLabel"];var StyledCardRoot=styled(BaseBox)(function(_ref){var isSelected=_ref.isSelected,props=_objectWithoutProperties(_ref,_excluded);var selectedColor=isSelected?props.theme.colors.surface.border.primary.normal:'transparent';return {border:`${props.theme.border.width.thicker}px solid ${selectedColor}`};});var AnimatedPressable=Animated.createAnimatedComponent(Pressable);var openURL=function(){var _ref2=_asyncToGenerator(function*(href){try{var canOpen=yield Linking.canOpenURL(href);if(canOpen){yield Linking.openURL(href);}}catch(_unused){if(__DEV__){logger({type:'warn',message:`Could not open the link "href=${href}"`,moduleName:'BaseButton'});}}});return function openURL(_x){return _ref2.apply(this,arguments);};}();var _CardRoot=function _CardRoot(_ref3,ref){var children=_ref3.children,onClick=_ref3.onClick,isSelected=_ref3.isSelected,shouldScaleOnHover=_ref3.shouldScaleOnHover,href=_ref3.href;_ref3.as;var accessibilityLabel=_ref3.accessibilityLabel,props=_objectWithoutProperties(_ref3,_excluded2);var _useTheme=useTheme(),theme=_useTheme.theme;var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isPressed=_React$useState2[0],setIsPressed=_React$useState2[1];var duration=castNativeType(makeMotionTime(theme.motion.duration.xquick));var easing=castNativeType(theme.motion.easing.standard);var styles=useAnimatedStyle(function(){return {transform:[{scale:withTiming(isPressed?CARD_SCALE_DOWN_VALUE:1,{duration:duration,easing:easing})}]};},[isPressed]);if(onClick||shouldScaleOnHover||href){return jsx(AnimatedPressable,Object.assign({ref:ref},makeAccessible({role:href?'link':undefined,label:accessibilityLabel,selected:isSelected}),{style:styles,onPressIn:function onPressIn(event){if(onClick){onClick(event);}setIsPressed(true);},onPressOut:function onPressOut(){if(href){void openURL(href);}setIsPressed(false);},children:jsx(StyledCardRoot,Object.assign({as:undefined,isSelected:isSelected},props,{children:children}))}));}return jsx(StyledCardRoot,Object.assign({as:undefined,isSelected:isSelected},props,{children:children}));};var CardRoot=React__default.forwardRef(_CardRoot);
export { CardRoot };
//# sourceMappingURL=CardRoot.native.js.map