change tab controller center selected logic (and move it to a helper hook)

Author: M-i-k-e-l

demo/src/screens/componentScreens/TabControllerScreen/index.tsx

@@ -35,18 +35,15 @@ class TabControllerScreen extends Component<{}, State> {
     this.state.items = this.generateTabItems();
   }
 
-  generateTabItems = (fewItems = this.state.fewItems, centerSelected = this.state.centerSelected): TabControllerItemProps[] => {
+  generateTabItems = (fewItems = this.state.fewItems): TabControllerItemProps[] => {
     let items: TabControllerItemProps[] = _.chain(TABS)
       .take(fewItems ? 3 : TABS.length)
       .map<TabControllerItemProps>(tab => ({label: tab, key: tab}))
       .value();
 
     const addItem: TabControllerItemProps = {icon: Assets.icons.demo.add, key: 'add', ignore: true, width: 60, onPress: this.onAddItem};
 
-    if (!centerSelected) {
-      items = [...items, addItem];
-    }
-    return items;
+    return [...items, addItem];
   };
 
   componentDidMount() {
@@ -83,7 +80,7 @@ class TabControllerScreen extends Component<{}, State> {
   toggleCenterSelected = () => {
     const {fewItems, centerSelected} = this.state;
     this.setState({
-      items: this.generateTabItems(fewItems, !centerSelected),
+      items: this.generateTabItems(fewItems),
       centerSelected: !centerSelected,
       key: Date.now()
     });

generatedTypes/helpers/FocusItemHelper.d.ts

@@ -0,0 +1,61 @@
+import { RefObject } from 'react';
+import { LayoutChangeEvent, ScrollView, FlatList, NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
+export declare enum OffsetType {
+    CENTER = "CENTER",
+    DYNAMIC = "DYNAMIC",
+    LEFT = "LEFT",
+    RIGHT = "RIGHT"
+}
+export declare type Props = {
+    /**
+     * A reference to the ScrollView (or FlatList) which the items are in
+     */
+    scrollViewRef: RefObject<ScrollView | FlatList>;
+    /**
+     * The number of items
+     */
+    itemsCount: number;
+    /**
+     * The selected item's index
+     */
+    selectedIndex?: number;
+    /**
+     * Where would the item be located (default to CENTER)
+     */
+    offsetType?: OffsetType;
+    /**
+     * Add a margin to the offset (default to true)
+     * This gives a better UX
+     * Not relevant to OffsetType.CENTER
+     */
+    addOffsetMargin?: boolean;
+    /**
+     * How much space (padding \ margin) is there on he left\right of the items
+     */
+    sideSpacing?: number;
+    /**
+     * How much space (padding \ margin) is there between each item
+     */
+    innerSpacing?: number;
+};
+export declare type ResultProps = {
+    /**
+     * This should be called by each ot the items' onLayout
+     */
+    onItemLayout: (event: LayoutChangeEvent, index: number) => void;
+    /**
+     * This should be called by the ScrollView (or FlatList)
+     * If this is not used OffsetType.DYNAMIC will not work properly
+     */
+    onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    /**
+     * The items' width
+     */
+    itemsWidths: number[];
+    /**
+     * Use in order to focus the item with the specified index
+     */
+    focusIndex: (index: number, animated?: boolean) => void;
+};
+declare const focusItemsHelper: (props: Props) => ResultProps;
+export default focusItemsHelper;