| 1 | {"version":3,"sources":["TouchableRipple.tsx"],"names":["React","TouchableWithoutFeedback","View","StyleSheet","Platform","color","withTheme","TouchableRipple","style","background","_background","borderless","disabled","disabledProp","rippleColor","underlayColor","_underlayColor","children","theme","rest","handlePressIn","e","centered","onPressIn","dark","colors","calculatedRippleColor","text","alpha","rgb","string","button","currentTarget","window","getComputedStyle","dimensions","getBoundingClientRect","touchX","touchY","changedTouches","touches","nativeEvent","touch","width","height","locationX","pageX","locationY","pageY","size","Math","min","max","container","document","createElement","setAttribute","Object","assign","position","pointerEvents","top","left","right","bottom","borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius","overflow","ripple","backgroundColor","borderRadius","transitionProperty","transitionDuration","transitionTimingFunction","transformOrigin","transform","opacity","appendChild","requestAnimationFrame","handlePressOut","onPressOut","containers","querySelectorAll","forEach","firstChild","setTimeout","parentNode","removeChild","onPress","styles","touchable","Children","only","supported","create","OS","cursor"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n TouchableWithoutFeedback,\n View,\n ViewStyle,\n StyleSheet,\n StyleProp,\n GestureResponderEvent,\n Platform,\n} from 'react-native';\nimport color from 'color';\nimport { withTheme } from '../../core/theming';\n\ntype Props = React.ComponentPropsWithRef<typeof TouchableWithoutFeedback> & {\n /**\n * Whether to render the ripple outside the view bounds.\n */\n borderless?: boolean;\n /**\n * Type of background drawabale to display the feedback (Android).\n * https://reactnative.dev/docs/touchablenativefeedback#background\n */\n background?: Object;\n /**\n * Whether to start the ripple at the center (Web).\n */\n centered?: boolean;\n /**\n * Whether to prevent interaction with the touchable.\n */\n disabled?: boolean;\n /**\n * Function to execute on press. If not set, will cause the touchable to be disabled.\n */\n onPress?: (e: GestureResponderEvent) => void;\n /**\n * Function to execute on long press.\n */\n onLongPress?: (e: GestureResponderEvent) => void;\n /**\n * Color of the ripple effect (Android >= 5.0 and Web).\n */\n rippleColor?: string;\n /**\n * Color of the underlay for the highlight effect (Android < 5.0 and iOS).\n */\n underlayColor?: string;\n /**\n * Content of the `TouchableRipple`.\n */\n children: React.ReactNode;\n style?: StyleProp<ViewStyle>;\n /**\n * @optional\n */\n theme: ReactNativePaper.Theme;\n};\n\n/**\n * A wrapper for views that should respond to touches.\n * Provides a material \"ink ripple\" interaction effect for supported platforms (>= Android Lollipop).\n * On unsupported platforms, it falls back to a highlight effect.\n *\n * <div class=\"screenshots\">\n * <figure>\n * <img class=\"medium\" src=\"screenshots/touchable-ripple.gif\" />\n * </figure>\n * </div>\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { View } from 'react-native';\n * import { Text, TouchableRipple } from 'react-native-paper';\n *\n * const MyComponent = () => (\n * <TouchableRipple\n * onPress={() => console.log('Pressed')}\n * rippleColor=\"rgba(0, 0, 0, .32)\"\n * >\n * <Text>Press anywhere</Text>\n * </TouchableRipple>\n * );\n *\n * export default MyComponent;\n * ```\n *\n * @extends TouchableWithoutFeedback props https://reactnative.dev/docs/touchablewithoutfeedback#props\n */\nconst TouchableRipple = ({\n style,\n background: _background,\n borderless = false,\n disabled: disabledProp,\n rippleColor,\n underlayColor: _underlayColor,\n children,\n theme,\n ...rest\n}: Props) => {\n const handlePressIn = (e: any) => {\n const { centered, onPressIn } = rest;\n\n onPressIn?.(e);\n\n const { dark, colors } = theme;\n const calculatedRippleColor =\n rippleColor ||\n color(colors.text)\n .alpha(dark ? 0.32 : 0.2)\n .rgb()\n .string();\n\n const button = e.currentTarget;\n const style = window.getComputedStyle(button);\n const dimensions = button.getBoundingClientRect();\n\n let touchX;\n let touchY;\n\n const { changedTouches, touches } = e.nativeEvent;\n const touch = touches?.[0] ?? changedTouches?.[0];\n\n // If centered or it was pressed using keyboard - enter or space\n if (centered || !touch) {\n touchX = dimensions.width / 2;\n touchY = dimensions.height / 2;\n } else {\n touchX = touch.locationX ?? e.pageX;\n touchY = touch.locationY ?? e.pageY;\n }\n\n // Get the size of the button to determine how big the ripple should be\n const size = centered\n ? // If ripple is always centered, we don't need to make it too big\n Math.min(dimensions.width, dimensions.height) * 1.25\n : // Otherwise make it twice as big so clicking on one end spreads ripple to other\n Math.max(dimensions.width, dimensions.height) * 2;\n\n // Create a container for our ripple effect so we don't need to change the parent's style\n const container = document.createElement('span');\n\n container.setAttribute('data-paper-ripple', '');\n\n Object.assign(container.style, {\n position: 'absolute',\n pointerEvents: 'none',\n top: '0',\n left: '0',\n right: '0',\n bottom: '0',\n borderTopLeftRadius: style.borderTopLeftRadius,\n borderTopRightRadius: style.borderTopRightRadius,\n borderBottomRightRadius: style.borderBottomRightRadius,\n borderBottomLeftRadius: style.borderBottomLeftRadius,\n overflow: centered ? 'visible' : 'hidden',\n });\n\n // Create span to show the ripple effect\n const ripple = document.createElement('span');\n\n Object.assign(ripple.style, {\n position: 'absolute',\n pointerEvents: 'none',\n backgroundColor: calculatedRippleColor,\n borderRadius: '50%',\n\n /* Transition configuration */\n transitionProperty: 'transform opacity',\n transitionDuration: `${Math.min(size * 1.5, 350)}ms`,\n transitionTimingFunction: 'linear',\n transformOrigin: 'center',\n\n /* We'll animate these properties */\n transform: 'translate3d(-50%, -50%, 0) scale3d(0.1, 0.1, 0.1)',\n opacity: '0.5',\n\n // Position the ripple where cursor was\n left: `${touchX}px`,\n top: `${touchY}px`,\n width: `${size}px`,\n height: `${size}px`,\n });\n\n // Finally, append it to DOM\n container.appendChild(ripple);\n button.appendChild(container);\n\n // rAF runs in the same frame as the event handler\n // Use double rAF to ensure the transition class is added in next frame\n // This will make sure that the transition animation is triggered\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n Object.assign(ripple.style, {\n transform: 'translate3d(-50%, -50%, 0) scale3d(1, 1, 1)',\n opacity: '1',\n });\n });\n });\n };\n\n const handlePressOut = (e: any) => {\n rest.onPressOut?.(e);\n\n const containers = e.currentTarget.querySelectorAll(\n '[data-paper-ripple]'\n ) as HTMLElement[];\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n containers.forEach((container) => {\n const ripple = container.firstChild as HTMLSpanElement;\n\n Object.assign(ripple.style, {\n transitionDuration: '250ms',\n opacity: 0,\n });\n\n // Finally remove the span after the transition\n setTimeout(() => {\n const { parentNode } = container;\n\n if (parentNode) {\n parentNode.removeChild(container);\n }\n }, 500);\n });\n });\n });\n };\n\n const disabled = disabledProp || !rest.onPress;\n\n return (\n <TouchableWithoutFeedback\n {...rest}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n disabled={disabled}\n >\n <View style={[styles.touchable, borderless && styles.borderless, style]}>\n {React.Children.only(children)}\n </View>\n </TouchableWithoutFeedback>\n );\n};\n\n/**\n * Whether ripple effect is supported.\n */\nTouchableRipple.supported = true;\n\nconst styles = StyleSheet.create({\n touchable: {\n position: 'relative',\n ...(Platform.OS === 'web' && { cursor: 'pointer' }),\n },\n borderless: {\n overflow: 'hidden',\n },\n});\n\nexport default withTheme(TouchableRipple);\n"]} |