From 04cffb8a142ea7e414e88d0caa0b840ffcadc29f Mon Sep 17 00:00:00 2001
From: Matthew Wolfe <matthew.wolfe2@gmail.com>
Date: Sat, 15 Oct 2022 14:22:33 -0700
Subject: [PATCH] minor: add useActionSheet hook

---
 App.tsx                                    | 18 ++++++-
 babel.config.js                            |  3 +-
 src/hooks/useActionSheet/index.ts          |  1 +
 src/hooks/useActionSheet/useActionSheet.ts | 56 ++++++++++++++++++++++
 src/index.ts                               |  4 ++
 5 files changed, 80 insertions(+), 2 deletions(-)
 create mode 100644 src/hooks/useActionSheet/index.ts
 create mode 100644 src/hooks/useActionSheet/useActionSheet.ts

diff --git a/App.tsx b/App.tsx
index b952ab4..1dd1e37 100644
--- a/App.tsx
+++ b/App.tsx
@@ -8,12 +8,16 @@ import { Table } from 'components/Table';
 import { TextInput } from 'components/TextInput';
 import { TopNavigation } from 'components/TopNavigation';
 
+import { useActionSheet } from 'hooks/useActionSheet';
+
 function App() {
+  const { showActionSheetWithOptions } = useActionSheet();
+
   const [activeTab, setActiveTab] = useState<number>(0);
 
   return (
     <SafeAreaView style={{ backgroundColor: '#F2F1F6', flex: 1 }}>
-      <ScrollView style={{ marginHorizontal: 16 }}>
+      <ScrollView style={{ paddingHorizontal: 16 }}>
         <TopNavigation
           left={{ icon: <Ionicons name="chevron-back" size={32} />, title: 'Back' }}
           right={{ title: 'Save' }}
@@ -57,6 +61,18 @@ function App() {
             rows={[{ rightIcon: true, title: 'Z17AHW' }, { title: 'HP24' }, { title: 'My Wifi' }]}
           />
         </Flex>
+
+        <Flex>
+          <Button
+            title="Action Sheet"
+            onPress={() =>
+              showActionSheetWithOptions({
+                cancel: { onPress: () => console.log('cancel'), title: 'Cancel' },
+                options: [{ onPress: () => console.log('save'), title: 'Save' }],
+              })
+            }
+          />
+        </Flex>
       </ScrollView>
     </SafeAreaView>
   );
diff --git a/babel.config.js b/babel.config.js
index e831fbc..3a44c9a 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -21,7 +21,8 @@ module.exports = function (api) {
           ],
           alias: {
             components: './src/components',
-            theme: './src/theme'
+            hooks: './src/hooks',
+            theme: './src/theme',
           },
         },
       ],
diff --git a/src/hooks/useActionSheet/index.ts b/src/hooks/useActionSheet/index.ts
new file mode 100644
index 0000000..6ac71b1
--- /dev/null
+++ b/src/hooks/useActionSheet/index.ts
@@ -0,0 +1 @@
+export { default as useActionSheet } from './useActionSheet';
diff --git a/src/hooks/useActionSheet/useActionSheet.ts b/src/hooks/useActionSheet/useActionSheet.ts
new file mode 100644
index 0000000..5340f84
--- /dev/null
+++ b/src/hooks/useActionSheet/useActionSheet.ts
@@ -0,0 +1,56 @@
+import { useCallback } from 'react';
+import { ActionSheetIOS } from 'react-native';
+
+interface Option {
+  disabled?: boolean;
+  destructive?: boolean;
+  onPress: () => void;
+  title: string;
+}
+
+interface CancelOption extends Omit<Option, 'destructive'> {}
+
+interface Options {
+  cancel?: CancelOption;
+  options: Option[];
+}
+
+function useActionSheet() {
+  const showActionSheetWithOptions = useCallback(({ cancel, options }: Options) => {
+    const actionSheetOptions = cancel ? [cancel, ...options] : options;
+    const actionSheetTitles = actionSheetOptions.map(({ title }) => title);
+
+    ActionSheetIOS.showActionSheetWithOptions(
+      {
+        options: actionSheetTitles,
+        destructiveButtonIndex: [
+          ...options
+            .filter(({ destructive }) => destructive)
+            .map((_, index) => (cancel ? index + 1 : index)),
+        ],
+        disabledButtonIndices: [
+          ...actionSheetOptions.filter(({ disabled }) => disabled).map((_, index) => index),
+        ],
+        cancelButtonIndex: cancel ? 0 : undefined,
+        userInterfaceStyle: 'dark',
+      },
+      (selectedIndex: number) => {
+        if (cancel && selectedIndex === 0) {
+          return cancel.onPress();
+        }
+
+        if (cancel) {
+          return options[selectedIndex - 1].onPress();
+        }
+
+        return options[selectedIndex].onPress();
+      }
+    );
+  }, []);
+
+  return {
+    showActionSheetWithOptions,
+  };
+}
+
+export default useActionSheet;
diff --git a/src/index.ts b/src/index.ts
index ff6ee37..436121b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,6 +1,10 @@
+// components
 export { Button } from 'components/Button';
 export { Switch } from 'components/Switch';
 export { TabBar } from 'components/TabBar';
 export { Table } from 'components/Table';
 export { TextInput } from 'components/TextInput';
 export { TopNavigation } from 'components/TopNavigation';
+
+// hooks
+export { useActionSheet } from 'hooks/useActionSheet';