Make selection the default haptic behaviour

jxom · Sep 24, 2021 · 2a6f087 · 2a6f087
1 parent b06a2df
commit 2a6f087
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 63 deletions.
diff --git a/packages/bumbag-native-haptic/src/Haptic/Haptic.tsx b/packages/bumbag-native-haptic/src/Haptic/Haptic.tsx
@@ -29,7 +29,7 @@ const useProps = createHook<HapticRootProps>(
 
     return { onPress: handlePress };
   },
-  { defaultProps: { type: 'impactLight' }, themeKey: 'native.Haptic.Root' }
+  { defaultProps: { type: 'selection' }, themeKey: 'native.Haptic.Root' }
 );
 
 export const HapticRoot = createComponent<HapticRootProps>(
@@ -60,17 +60,15 @@ export const HapticRoot = createComponent<HapticRootProps>(
 
 export type LocalHapticProps = {
   children: HapticRootProps['children'];
-  type?: 'light' | 'medium' | 'heavy' | 'rigid' | 'soft';
 };
 export type HapticProps = LocalHapticProps;
 
 const useHapticProps = createHook<HapticProps, HapticRootProps>(
   (props) => {
-    const { type } = props;
-    const hapticProps = useProps({ ...props, type: getImpactType(type) });
+    const hapticProps = useProps({ ...props, type: 'selection' });
     return hapticProps;
   },
-  { defaultProps: { type: 'light' }, themeKey: 'native.Haptic' }
+  { themeKey: 'native.Haptic' }
 );
 
 export const Haptic = createComponent<HapticProps>(
@@ -89,60 +87,62 @@ export const Haptic = createComponent<HapticProps>(
 
 ////////////////////////////////////////////////////////////////////////////////////////////////////
 
-export type LocalHapticNotificationProps = {
+export type LocalHapticImpactProps = {
   children: HapticRootProps['children'];
-  type: 'success' | 'warning' | 'error';
+  type?: 'light' | 'medium' | 'heavy' | 'rigid' | 'soft';
 };
-export type HapticNotificationProps = LocalHapticNotificationProps;
+export type HapticImpactProps = LocalHapticImpactProps;
 
-const useHapticNotificationProps = createHook<HapticNotificationProps, HapticRootProps>(
+const useHapticImpactProps = createHook<HapticImpactProps, HapticRootProps>(
   (props) => {
     const { type } = props;
-    const hapticProps = useProps({ ...props, type: getNotificationType(type) });
+    const hapticProps = useProps({ ...props, type: getImpactType(type) });
     return hapticProps;
   },
-  { themeKey: 'native.Haptic.Notification' }
+  { defaultProps: { type: 'light' }, themeKey: 'native.Haptic.Impact' }
 );
 
-export const HapticNotification = createComponent<HapticNotificationProps>(
+export const HapticImpact = createComponent<HapticImpactProps>(
   (props) => {
-    const hapticProps = useHapticNotificationProps(props);
-    return <HapticRoot {...hapticProps}>{props.children}</HapticRoot>;
+    const hapticImpactProps = useHapticImpactProps(props);
+    return <HapticRoot {...hapticImpactProps}>{props.children}</HapticRoot>;
   },
   {
     attach: {
-      useProps: useHapticNotificationProps,
-      displayName: 'native.Haptic.Notification',
+      useProps: useHapticImpactProps,
+      displayName: 'native.Haptic.Impact',
     },
-    themeKey: 'native.Haptic.Notification',
+    themeKey: 'native.Haptic.Impact',
   }
 );
 
 ////////////////////////////////////////////////////////////////////////////////////////////////////
 
-export type LocalHapticSelectionProps = {
+export type LocalHapticNotificationProps = {
   children: HapticRootProps['children'];
+  type: 'success' | 'warning' | 'error';
 };
-export type HapticSelectionProps = LocalHapticSelectionProps;
+export type HapticNotificationProps = LocalHapticNotificationProps;
 
-const useHapticSelectionProps = createHook<HapticSelectionProps, HapticRootProps>(
+const useHapticNotificationProps = createHook<HapticNotificationProps, HapticRootProps>(
   (props) => {
-    const hapticProps = useProps({ ...props, type: 'selection' });
+    const { type } = props;
+    const hapticProps = useProps({ ...props, type: getNotificationType(type) });
     return hapticProps;
   },
-  { themeKey: 'native.Haptic.Selection' }
+  { themeKey: 'native.Haptic.Notification' }
 );
 
-export const HapticSelection = createComponent<HapticSelectionProps>(
+export const HapticNotification = createComponent<HapticNotificationProps>(
   (props) => {
-    const hapticProps = useHapticSelectionProps(props);
+    const hapticProps = useHapticNotificationProps(props);
     return <HapticRoot {...hapticProps}>{props.children}</HapticRoot>;
   },
   {
     attach: {
-      useProps: useHapticSelectionProps,
-      displayName: 'native.Haptic.Selection',
+      useProps: useHapticNotificationProps,
+      displayName: 'native.Haptic.Notification',
     },
-    themeKey: 'native.Haptic.Selection',
+    themeKey: 'native.Haptic.Notification',
   }
 );
diff --git a/packages/bumbag-native-haptic/src/Haptic/index.ts b/packages/bumbag-native-haptic/src/Haptic/index.ts
@@ -1,4 +1,4 @@
-import { Haptic as _Haptic, HapticNotification, HapticSelection, HapticRoot } from './Haptic';
+import { Haptic as _Haptic, HapticNotification, HapticImpact, HapticRoot } from './Haptic';
 import { trigger, triggerImpact, triggerSelection, triggerNotification } from './utils';
 
 export * from './Haptic';
@@ -8,6 +8,6 @@ export * from './types';
 export const Haptic = Object.assign(_Haptic, {
   Root: Object.assign(HapticRoot, { trigger }),
   Notification: Object.assign(HapticNotification, { trigger: triggerNotification }),
-  Selection: Object.assign(HapticSelection, { trigger: triggerSelection }),
-  trigger: triggerImpact,
+  Impact: Object.assign(HapticImpact, { trigger: triggerImpact }),
+  trigger: triggerSelection,
 });
diff --git a/packages/bumbag-native-haptic/src/Haptic/utils.ts b/packages/bumbag-native-haptic/src/Haptic/utils.ts
@@ -1,5 +1,5 @@
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
-import { HapticProps, HapticNotificationProps } from './Haptic';
+import { HapticProps, HapticImpactProps, HapticNotificationProps } from './Haptic';
 import { HapticFeedbackTypes, HapticOptions } from './types';
 
 export type { HapticFeedbackTypes, HapticOptions };
@@ -10,7 +10,7 @@ export function trigger(type: HapticFeedbackTypes, options: HapticOptions) {
   ReactNativeHapticFeedback.trigger(type, options);
 }
 
-export function triggerImpact(type: HapticProps['type'], options: HapticOptions) {
+export function triggerImpact(type: HapticImpactProps['type'], options: HapticOptions) {
   trigger(getImpactType(type), options);
 }
 
@@ -24,7 +24,7 @@ export function triggerSelection(options: HapticOptions) {
 
 /////////////////////////////////////////////////////////////////////////////////
 
-export function getImpactType(type: HapticProps['type']) {
+export function getImpactType(type: HapticImpactProps['type']) {
   if (type === 'light') {
     return 'impactLight';
   } else if (type === 'medium') {

diff --git a/packages/bumbag-native-haptic/src/Haptic/utils.web.ts b/packages/bumbag-native-haptic/src/Haptic/utils.web.ts
@@ -1,13 +1,13 @@
-import { HapticProps, HapticNotificationProps } from './Haptic';
+import { HapticImpactProps, HapticNotificationProps } from './Haptic';
 import { HapticFeedbackTypes, HapticOptions } from './types';
 
 export type { HapticFeedbackTypes, HapticOptions };
 
 export function trigger(_type: HapticFeedbackTypes, _options: HapticOptions) {}
-export function triggerImpact(_type: HapticProps['type'], _options: HapticOptions) {}
+export function triggerImpact(_type: HapticImpactProps['type'], _options: HapticOptions) {}
 export function triggerNotification(_type: HapticNotificationProps['type'], _options: HapticOptions) {}
 export function triggerSelection(_options: HapticOptions) {}
 
-export function getImpactType(_type: HapticProps['type']) {}
+export function getImpactType(_type: HapticImpactProps['type']) {}
 
 export function getNotificationType(_type: HapticNotificationProps['type']) {}
diff --git a/website/pages/docs/native/utilities/haptic.mdx b/website/pages/docs/native/utilities/haptic.mdx
@@ -51,34 +51,14 @@ You can also imperatively trigger haptic feedback by calling the `trigger` metho
 Haptic.trigger();
 
 // You can optionally pass a type & options
-Haptic.trigger('light', { enableVibrateFallback: true });
+Haptic.trigger({ enableVibrateFallback: true });
+Haptic.Impact.trigger('light', { enableVibrateFallback: true });
+Haptic.Notification.trigger('success', { enableVibrateFallback: true });
 ```
 
 - [See more on the `type` argument](#types).
 - [See more on the `options` argument](#enableVibrateFallback).
 
-## Types
-
-By default, the `Haptic` component will trigger a 'light' haptic feedback. You can control this with the `type` prop.
-
-```jsx-live
-<Haptic type="light">
-  <Button>Light feedback</Button>
-</Haptic>
-<Haptic type="medium">
-  <Button>Medium feedback</Button>
-</Haptic>
-<Haptic type="heavy">
-  <Button>Heavy feedback</Button>
-</Haptic>
-<Haptic type="soft">
-  <Button>Soft feedback</Button>
-</Haptic>
-<Haptic type="rigid">
-  <Button>Rigid feedback</Button>
-</Haptic>
-```
-
 ## Notification feedback
 
 The `Haptic.Notification` component proveides a way to trigger haptic feedback for notifications.
@@ -95,14 +75,26 @@ The `Haptic.Notification` component proveides a way to trigger haptic feedback f
 </Haptic.Notification>
 ```
 
-## Selection feedback
+## Impact feedback
 
 The `Haptic.Selection` component proveides a way to trigger haptic feedback for selections.
 
 ```jsx-live
-<Haptic.Selection>
-  <Button>Select</Button>
-</Haptic.Selection>
+<Haptic.Impact type="light">
+  <Button>Light feedback</Button>
+</Haptic.Impact>
+<Haptic.Impact type="medium">
+  <Button>Medium feedback</Button>
+</Haptic.Impact>
+<Haptic.Impact type="heavy">
+  <Button>Heavy feedback</Button>
+</Haptic.Impact>
+<Haptic.Impact type="soft">
+  <Button>Soft feedback</Button>
+</Haptic.Impact>
+<Haptic.Impact type="rigid">
+  <Button>Rigid feedback</Button>
+</Haptic.Impact>
 ```
 
 ## Vibrate fallback (iOS only)