From a9da1a474b1e53296dca1f28055e9a6354fcf13b Mon Sep 17 00:00:00 2001
From: Nikki Kang <kangaroo233@gmail.com>
Date: Wed, 30 Aug 2023 12:17:25 -0400
Subject: [PATCH] add harmony selectable pill mobile

---
 .../components/core/HarmonySelectablePill.tsx | 111 ++++++++++++++++++
 1 file changed, 111 insertions(+)
 create mode 100644 packages/mobile/src/components/core/HarmonySelectablePill.tsx

diff --git a/packages/mobile/src/components/core/HarmonySelectablePill.tsx b/packages/mobile/src/components/core/HarmonySelectablePill.tsx
new file mode 100644
index 0000000000..5905336e04
--- /dev/null
+++ b/packages/mobile/src/components/core/HarmonySelectablePill.tsx
@@ -0,0 +1,111 @@
+import React, { useCallback } from 'react'
+
+import type {
+  ButtonProps,
+  GestureResponderEvent,
+  PressableProps,
+  ViewStyle
+} from 'react-native'
+import { Animated, Pressable, Text } from 'react-native'
+
+import { usePressScaleAnimation } from 'app/hooks/usePressScaleAnimation'
+import type { StylesProps } from 'app/styles'
+import { makeStyles } from 'app/styles'
+
+const useStyles = makeStyles(({ spacing, palette, typography }) => ({
+  pill: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 100,
+    borderWidth: 1,
+    borderColor: palette.neutralLight7,
+    backgroundColor: palette.white
+  },
+  pressable: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: spacing(6),
+    paddingLeft: spacing(3),
+    paddingRight: spacing(3),
+    gap: spacing(1)
+  },
+  text: {
+    fontSize: typography.fontSize.medium,
+    fontFamily: typography.fontByWeight.medium,
+    color: palette.neutralLight4,
+    lineHeight: 1.25 * typography.fontSize.medium
+  },
+  pressed: {
+    backgroundColor: palette.secondaryLight1,
+    borderColor: palette.secondary
+  },
+  textPressed: {
+    color: palette.staticWhite
+  },
+  icon: {
+    marginRight: spacing(1),
+    width: spacing(4),
+    height: spacing(4)
+  }
+}))
+
+type HarmonySelectablePillProps = Omit<ButtonProps, 'title'> &
+  PressableProps & {
+    isSelected: boolean
+    icon?: React.ReactElement
+    label: string
+  } & StylesProps<{ root: ViewStyle }>
+
+export const HarmonySelectablePill = (props: HarmonySelectablePillProps) => {
+  const styles = useStyles()
+  const { isSelected, label, icon, onPressIn, onPressOut, style, ...other } =
+    props
+
+  const {
+    scale,
+    handlePressIn: handlePressInScale,
+    handlePressOut: handlePressOutScale
+  } = usePressScaleAnimation()
+
+  const handlePressIn = useCallback(
+    (event: GestureResponderEvent) => {
+      onPressIn?.(event)
+      handlePressInScale()
+    },
+    [handlePressInScale, onPressIn]
+  )
+
+  const handlePressOut = useCallback(
+    (event: GestureResponderEvent) => {
+      onPressOut?.(event)
+      handlePressOutScale()
+    },
+    [handlePressOutScale, onPressOut]
+  )
+
+  return (
+    <Animated.View
+      style={[
+        styles.pill,
+        isSelected ? styles.pressed : undefined,
+        { transform: [{ scale }] },
+        style
+      ]}
+    >
+      <Pressable
+        accessibilityRole='button'
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        style={[styles.pressable]}
+        {...other}
+      >
+        {icon || null}
+        <Text
+          style={[styles.text, isSelected ? styles.textPressed : undefined]}
+        >
+          {label}
+        </Text>
+      </Pressable>
+    </Animated.View>
+  )
+}