cpk-ui 0.1.13 → 0.1.14

package/README.md

@@ -28,7 +28,7 @@ Check out [ui.crossplatformkorea.com](https://ui.crossplatformkorea.com)
 #### For Expo
 
 ```sh
-expo install cpk-ui @emotion/react @emotion/native @expo/vector-icons react-native-gesture-handler react-native-svg expo-screen-orientation @expo/match-media
+expo install cpk-ui @emotion/react @emotion/native @expo/vector-icons react-native-gesture-handler react-native-svg expo-screen-orientation @expo/match-media expo-haptics
 ```
 
 #### For React Native CLI

package/components/uis/Button/Button.js

@@ -7,6 +7,7 @@ import { useTheme } from '../../../providers/ThemeProvider';
 import { cloneElemWithDefaultColors } from '../../../utils/guards';
 import { LoadingIndicator } from '../LoadingIndicator/LoadingIndicator';
 import { Typography } from '../Typography/Typography';
+import Haptics from 'expo-haptics';
 const ButtonContainer = styled.View `
   align-self: stretch;
   flex-direction: row;
@@ -98,7 +99,7 @@ const useButtonState = ({ disabled, onPress, loading, }) => {
         isLoading: loading,
     };
 };
-export function Button({ testID, type = 'solid', color = 'primary', size = 'medium', disabled, loading = false, loadingElement, text, startElement, endElement, style, styles, onPress, activeOpacity = 0.8, touchableHighlightProps, borderRadius = 4, loadingColor, hitSlop = { top: 8, bottom: 8, left: 8, right: 8 }, }) {
+export function Button({ testID, type = 'solid', color = 'primary', size = 'medium', disabled, loading = false, loadingElement, text, startElement, endElement, style, styles, onPress, activeOpacity = 0.8, touchableHighlightProps, borderRadius = 4, loadingColor, hitSlop = { top: 8, bottom: 8, left: 8, right: 8 }, hapticFeedback, }) {
     const ref = useRef(null);
     const hovered = useHover(ref);
     const { theme } = useTheme();
@@ -156,7 +157,12 @@ export function Button({ testID, type = 'solid', color = 'primary', size = 'medi
                 backgroundColor: viewStyle?.backgroundColor,
                 color: textStyle?.color,
             })] }));
-    return (_jsx(TouchableHighlight, { activeOpacity: activeOpacity, delayPressIn: 30, disabled: innerDisabled || loading || !onPress, hitSlop: hitSlop, onPress: onPress, ref: Platform.select({
+    return (_jsx(TouchableHighlight, { activeOpacity: activeOpacity, delayPressIn: 30, disabled: innerDisabled || loading || !onPress, hitSlop: hitSlop, onPress: (e) => {
+            onPress?.(e);
+            if (hapticFeedback) {
+                Haptics.impactAsync(hapticFeedback);
+            }
+        }, ref: Platform.select({
             web: ref,
             default: undefined,
         }), style: [

package/components/uis/Button/Button.tsx

@@ -15,6 +15,7 @@ import {cloneElemWithDefaultColors} from '../../../utils/guards';
 import type {CpkTheme} from '../../../utils/theme';
 import {LoadingIndicator} from '../LoadingIndicator/LoadingIndicator';
 import {Typography} from '../Typography/Typography';
+import Haptics from 'expo-haptics';
 
 export type ButtonType = 'text' | 'solid' | 'outlined';
 export type ButtonColorType =
@@ -49,6 +50,7 @@ export type Props = {
     'onPress' | 'activeOpacity' | 'style'
   >;
   hitSlop?: null | Insets | number | undefined;
+  hapticFeedback?: Haptics.ImpactFeedbackStyle;
 };
 
 type Styles = {
@@ -215,6 +217,7 @@ export function Button({
   borderRadius = 4,
   loadingColor,
   hitSlop = {top: 8, bottom: 8, left: 8, right: 8},
+  hapticFeedback,
 }: Props): JSX.Element {
   const ref = useRef<React.ElementRef<typeof TouchableHighlight>>(null);
   const hovered = useHover(ref);
@@ -323,7 +326,13 @@ export function Button({
       delayPressIn={30}
       disabled={innerDisabled || loading || !onPress}
       hitSlop={hitSlop}
-      onPress={onPress}
+      onPress={(e) => {
+        onPress?.(e);
+
+        if (hapticFeedback) {
+          Haptics.impactAsync(hapticFeedback);
+        }
+      }}
       ref={Platform.select({
         web: ref,
         default: undefined,

package/components/uis/IconButton/IconButton.js

@@ -7,6 +7,7 @@ import { Icon } from '../Icon/Icon';
 import { LoadingIndicator } from '../LoadingIndicator/LoadingIndicator';
 import { getTheme } from '../../../utils/theme';
 import { useTheme } from '../../../providers/ThemeProvider';
+import Haptics from 'expo-haptics';
 export const ButtonStyles = ({ theme, type = 'solid', color = 'primary', loading, disabled, }) => {
     theme = getTheme(theme);
     let backgroundColor = theme.button[color].bg;
@@ -33,7 +34,7 @@ export const ButtonStyles = ({ theme, type = 'solid', color = 'primary', loading
         disabledTextColor: theme.button.disabled.text,
     };
 };
-export function IconButton({ testID, type = 'solid', color = 'primary', size = 'medium', disabled, loading = false, loadingElement, icon, iconElement, style, styles, onPress, activeOpacity = 0.95, touchableHighlightProps, }) {
+export function IconButton({ testID, type = 'solid', color = 'primary', size = 'medium', disabled, loading = false, loadingElement, icon, iconElement, style, styles, onPress, activeOpacity = 0.95, touchableHighlightProps, hapticFeedback, }) {
     const ref = useRef(null);
     const hovered = useHover(ref);
     const { theme } = useTheme();
@@ -92,7 +93,12 @@ export function IconButton({ testID, type = 'solid', color = 'primary', size = '
           border-radius: ${borderRadiusStr};
         `,
             style,
-        ], children: _jsx(TouchableHighlight, { activeOpacity: activeOpacity, delayPressIn: 50, disabled: disabled || loading, onPress: onPress, ref: Platform.select({
+        ], children: _jsx(TouchableHighlight, { activeOpacity: activeOpacity, delayPressIn: 50, disabled: disabled || loading, onPress: (e) => {
+                onPress?.(e);
+                if (hapticFeedback) {
+                    Haptics.impactAsync(hapticFeedback);
+                }
+            }, ref: Platform.select({
                 web: ref,
                 default: undefined,
             }), style: css `

package/components/uis/IconButton/IconButton.tsx

@@ -9,6 +9,7 @@ import {Icon} from '../Icon/Icon';
 import {LoadingIndicator} from '../LoadingIndicator/LoadingIndicator';
 import {CpkTheme, getTheme} from '../../../utils/theme';
 import {useTheme} from '../../../providers/ThemeProvider';
+import Haptics from 'expo-haptics';
 
 type Styles = {
   container?: StyleProp<ViewStyle>;
@@ -99,6 +100,7 @@ export type IconButtonProps = {
   onPress?: TouchableHighlightProps['onPress'];
   activeOpacity?: number;
   touchableHighlightProps?: Omit<TouchableHighlightProps, 'onPress' | 'style'>;
+  hapticFeedback?: Haptics.ImpactFeedbackStyle;
 };
 
 export function IconButton({
@@ -116,6 +118,7 @@ export function IconButton({
   onPress,
   activeOpacity = 0.95,
   touchableHighlightProps,
+  hapticFeedback,
 }: IconButtonProps): JSX.Element {
   const ref = useRef<React.ElementRef<typeof TouchableHighlight>>(null);
   const hovered = useHover(ref);
@@ -196,7 +199,13 @@ export function IconButton({
         activeOpacity={activeOpacity}
         delayPressIn={50}
         disabled={disabled || loading}
-        onPress={onPress}
+        onPress={(e) => {
+          onPress?.(e);
+
+          if (hapticFeedback) {
+            Haptics.impactAsync(hapticFeedback);
+          }
+        }}
         ref={Platform.select({
           web: ref,
           default: undefined,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpk-ui",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "main": "index",
   "react-native": "index",
   "module": "index",
@@ -22,7 +22,8 @@
     "react": ">=16.9",
     "react-native": ">=0.58",
     "react-native-gesture-handler": "*",
-    "@expo/vector-icons": "*"
+    "@expo/vector-icons": "*",
+    "expo-haptics": "*"
   },
   "dependencies": {
     "hyochan-welcome": "^1.0.1",