Merge pull request #81 from cmaycumber/pressable

Pressable

examples/example/App.tsx

@@ -7,10 +7,11 @@ import {
   DripsyProvider,
   Container,
   Theme,
+  Pressable,
 } from 'dripsy'
 // Import from core
 import { H4 } from '@dripsy/core'
-import { Text } from 'react-native'
+import { Text, Pressable as RNPressable } from 'react-native'
 
 const theme = {
   useBodyStyles: false,
@@ -84,20 +85,35 @@ export default function App() {
             height: [400, 800],
           }}
         >
-          <H4 sx={{ color: 'text', mb: 2, mt: 0, fontSize: [5] }}>Test</H4>
-          {/* <Pressable>
-            {({ pressed }) => (
-              <DripText sx={{ cursor: 'pointer' }}>
-                {pressed ? 'Joi!' : 'Press Me'}
-              </DripText>
-            )}
-          </Pressable> */}
+          <H4 sx={{ color: 'text', mb: 2, mt: 0, fontSize: [5] }}>Test</H4> 
           <G variant="primary">Hey</G>
           <G>Hi!</G>
           <View sx={{ bg: 'white', boxShadow: 'md' }}>
             <Text>Card</Text>
           </View>
           <ResponsiveSquare />
+          <Pressable 
+            sx={{
+              height: 50,
+              width: 50, 
+            }}
+          >
+            {({ pressed }) => 
+              <View 
+                sx={{
+                  flex: 1,
+                  backgroundColor: pressed ? 'green' : 'red',
+                }} 
+              />
+            }
+          </Pressable>
+          <RNPressable
+            style={({ pressed }) => ({
+              height: 50,
+              width: 50,
+              backgroundColor: pressed ? 'green' : 'red',
+            })}
+          />
         </View>
       </Container>
     </DripsyProvider>

packages/core/src/components/index.tsx

@@ -24,6 +24,7 @@ import {
 import { createThemedComponent } from '../css/create-themed-component'
 
 import Indicator from './activity-indicator'
+export { default as Pressable } from './pressable'
 
 export const View = createThemedComponent(rView)
 

packages/core/src/components/pressable.tsx

@@ -0,0 +1,49 @@
+import React, { ComponentProps } from 'react'
+import { styled } from '../css/styled'
+import { Pressable as NativePressable, Platform } from 'react-native'
+
+declare module 'react-native' {
+  interface PressableStateCallbackType {
+    hovered?: boolean
+    focused?: boolean
+  }
+}
+
+const StyledPressable = styled(NativePressable)({})
+const Press = React.forwardRef(function Pressable(
+  {
+    sx = {},
+    style,
+    disabled,
+    ...props
+  }: ComponentProps<typeof StyledPressable>,
+  ref: ComponentProps<typeof NativePressable>['ref']
+) {
+  // TODO: Pressable accepts a function as a style with the computed properties figure out a way to pass these along
+  if (style)
+    console.error(
+      `[dripsy] Hey there. Looks like you used an invalid prop "style" on the Pressable component. Please use the `sx` prop directly instead, or use a child function. If this is a problem feel free to open an issue on github.`
+    )
+
+  return (
+    <StyledPressable
+      {...props}
+      // TODO: Figure out why the pressable type is wrong
+      ref={ref as any}
+      disabled={disabled}
+      sx={{
+        ...Platform.select({
+          web: {
+            cursor:
+              props.onPress || props.accessibilityRole === 'link' || !disabled
+                ? 'pointer'
+                : 'default',
+          },
+        }),
+        ...sx,
+      }}
+    />
+  )
+})
+
+export default Press