type provider

RocketChat · Mar 18, 2022 · fd49634 · fd49634
1 parent e337d99
commit fd49634
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 22 deletions.
diff --git a/app/containers/ActionSheet/ActionSheet.tsx b/app/containers/ActionSheet/ActionSheet.tsx
@@ -16,17 +16,10 @@ import * as List from '../List';
 import { Button } from './Button';
 import { Handle } from './Handle';
 import { IActionSheetItem, Item } from './Item';
+import { TActionSheetOptions, TActionSheetOptionsItem } from './Provider';
 import styles, { ITEM_HEIGHT } from './styles';
 
-type TOptions = { title: string; icon: string; onPress: () => void };
-interface IActionSheetData {
-	options: TOptions[];
-	headerHeight?: number;
-	hasCancel?: boolean;
-	customHeader?: React.ReactElement;
-}
-
-const getItemLayout = (data: TOptions[] | null | undefined, index: number) => ({
+const getItemLayout = (data: TActionSheetOptionsItem[] | null | undefined, index: number) => ({
 	length: ITEM_HEIGHT,
 	offset: ITEM_HEIGHT * index,
 	index
@@ -47,8 +40,8 @@ const ANIMATION_CONFIG = {
 const ActionSheet = React.memo(
 	forwardRef(({ children }: { children: React.ReactElement }, ref) => {
 		const { theme } = useTheme();
-		const bottomSheetRef = useRef<ScrollBottomSheet<TOptions>>(null);
-		const [data, setData] = useState<IActionSheetData>({} as IActionSheetData);
+		const bottomSheetRef = useRef<ScrollBottomSheet<TActionSheetOptionsItem>>(null);
+		const [data, setData] = useState<TActionSheetOptions>({} as TActionSheetOptions);
 		const [isVisible, setVisible] = useState(false);
 		const { height } = useDimensions();
 		const { isLandscape } = useOrientation();
@@ -86,7 +79,7 @@ const ActionSheet = React.memo(
 			bottomSheetRef.current?.snapTo(closedSnapIndex);
 		};
 
-		const show = (options: IActionSheetData) => {
+		const show = (options: TActionSheetOptions) => {
 			setData(options);
 			toggleVisible();
 		};
@@ -169,7 +162,7 @@ const ActionSheet = React.memo(
 								]}
 							/>
 						</TapGestureHandler>
-						<ScrollBottomSheet<TOptions>
+						<ScrollBottomSheet<TActionSheetOptionsItem>
 							testID='action-sheet'
 							ref={bottomSheetRef}
 							componentType='FlatList'

diff --git a/app/containers/ActionSheet/Provider.tsx b/app/containers/ActionSheet/Provider.tsx
@@ -2,12 +2,20 @@ import React, { ForwardedRef, forwardRef, useContext, useRef } from 'react';
 
 import ActionSheet from './ActionSheet';
 
+export type TActionSheetOptionsItem = { title: string; icon: string; onPress: () => void };
+
+export type TActionSheetOptions = {
+	options: TActionSheetOptionsItem[];
+	headerHeight: number;
+	customHeader: React.ReactElement | null;
+	hasCancel?: boolean;
+};
 interface IActionSheetProvider {
-	Provider: any;
-	Consumer: any;
+	showActionSheet: (item: TActionSheetOptions) => void;
+	hideActionSheet: () => void;
 }
 
-const context: IActionSheetProvider = React.createContext({
+const context = React.createContext<IActionSheetProvider>({
 	showActionSheet: () => {},
 	hideActionSheet: () => {}
 });
@@ -16,16 +24,16 @@ export const useActionSheet = () => useContext(context);
 
 const { Provider, Consumer } = context;
 
-export const withActionSheet = (Component: any): any =>
-	forwardRef((props: any, ref: ForwardedRef<any>) => (
-		<Consumer>{(contexts: any) => <Component {...props} {...contexts} ref={ref} />}</Consumer>
+export const withActionSheet = (Component: React.ComponentType<any>): typeof Component =>
+	forwardRef((props: typeof React.Component, ref: ForwardedRef<IActionSheetProvider>) => (
+		<Consumer>{(contexts: IActionSheetProvider) => <Component {...props} {...contexts} ref={ref} />}</Consumer>
 	));
 
-export const ActionSheetProvider = React.memo(({ children }: { children: JSX.Element | JSX.Element[] }) => {
-	const ref: ForwardedRef<any> = useRef();
+export const ActionSheetProvider = React.memo(({ children }: { children: React.ReactElement | React.ReactElement[] }) => {
+	const ref: ForwardedRef<IActionSheetProvider> = useRef(null);
 
 	const getContext = () => ({
-		showActionSheet: (options: any) => {
+		showActionSheet: (options: TActionSheetOptions) => {
 			ref.current?.showActionSheet(options);
 		},
 		hideActionSheet: () => {