Infra/typescript page control (#993)

* Rename pageControl from .js to .tsx

* Move PageControl to typescript - initial commit

* Fix forwardRef

* Rename PageControlScreen .js to .tsx

* PageControl - export types properly and fix screen

Author: M-i-k-e-l

demo/src/screens/componentScreens/PageControlScreen.js renamed to demo/src/screens/componentScreens/PageControlScreen.tsx

@@ -22,7 +22,7 @@ export default class PageControlScreen extends Component {
     this.setState({currentPage: this.state.currentPage + 1});
   }
 
-  onPagePress = (index) => {
+  onPagePress = (index: number) => {
     this.setState({currentPage: index});
   }
 

generatedTypes/commons/forwardRef.d.ts

@@ -5,4 +5,4 @@ export interface ForwardRefInjectedProps {
      */
     forwardedRef: any;
 }
-export default function forwardRef(WrappedComponent: React.ComponentType<any>): React.ComponentType<any>;
+export default function forwardRef<P = any>(WrappedComponent: React.ComponentType<P>): React.ComponentType<P>;

generatedTypes/commons/withScrollEnabler.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { LayoutChangeEvent } from 'react-native';
-export declare type ScrollEnablerProps = {
+declare type ScrollEnablerProps = {
     onContentSizeChange: (contentWidth: number, contentHeight: number) => void;
     onLayout: (event: LayoutChangeEvent) => void;
     scrollEnabled: boolean;

generatedTypes/commons/withScrollReached.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
-export declare type ScrollReachedProps = {
+declare type ScrollReachedProps = {
     onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
     /**
      * Is the scroll at the start (or equal\smaller than the threshold if one was given)

generatedTypes/components/button/index.d.ts

@@ -62,7 +62,7 @@ export declare type CardPropTypes = ViewPropTypes & TouchableOpacityProps & {
         hideIndicator?: boolean;
     };
 };
-declare const _default: React.ComponentClass<ViewPropTypes & Pick<import("react-native").TouchableOpacityProps, "testID" | "disabled" | "hitSlop" | "onLayout" | "hasTVPreferredFocus" | "tvParallaxProperties" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityStates" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "activeOpacity" | "onPress" | "onLongPress" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "pressRetentionOffset"> & Partial<Record<import("../../commons/modifiers").AlignmentLiterals, boolean>> & Partial<Record<import("../../commons/modifiers").PositionLiterals, boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"flex" | "flexG" | "flexS", boolean>> & Partial<Record<"br0" | "br10" | "br20" | "br30" | "br40" | "br50" | "br60" | "br100", boolean>> & Partial<Record<"bg", boolean>> & {
+declare const _default: React.ComponentClass<ViewPropTypes & Pick<import("react-native").TouchableOpacityProps, "testID" | "onLayout" | "hitSlop" | "hasTVPreferredFocus" | "tvParallaxProperties" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityStates" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "disabled" | "activeOpacity" | "onLongPress" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "pressRetentionOffset"> & Partial<Record<import("../../commons/modifiers").AlignmentLiterals, boolean>> & Partial<Record<import("../../commons/modifiers").PositionLiterals, boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"flex" | "flexG" | "flexS", boolean>> & Partial<Record<"br0" | "br10" | "br20" | "br30" | "br40" | "br50" | "br60" | "br100", boolean>> & Partial<Record<"bg", boolean>> & {
     backgroundColor?: string | undefined;
     throttleTime?: number | undefined;
     throttleOptions?: {
@@ -71,8 +71,11 @@ declare const _default: React.ComponentClass<ViewPropTypes & Pick<import("react-
     } | undefined;
     activeBackgroundColor?: string | undefined;
     useNative?: boolean | undefined;
-    customValue?: any;
+    customValue?: any; /**
+     * card custom height
+     */
     style?: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | Animated.AnimatedProps<ViewStyle> | Animated.AnimatedProps<import("react-native").RegisteredStyle<ViewStyle>> | Animated.AnimatedProps<import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined>> | null | undefined;
+    onPress?: ((props: TouchableOpacityProps) => void) | undefined;
 } & {
     /**
      * card custom width

generatedTypes/components/card/index.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface PageControlProps {
+    /**
+         * Limit the number of page indicators shown.
+         * enlargeActive prop is disabled in this state,
+         * When set to true there will be maximum of 7 shown.
+         * Only relevant when numOfPages > 5.
+         */
+    limitShownPages?: boolean;
+    /**
+     * Additional styles for the top container
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Total number of pages
+     */
+    numOfPages: number;
+    /**
+     * Zero-based index of the current page
+     */
+    currentPage: number;
+    /**
+     * Action handler for clicking on a page indicator
+     */
+    onPagePress?: (index: number) => void;
+    /**
+     * Color of the selected page dot and, if inactiveColor not passed, the border of the not selected pages
+     */
+    color?: string;
+    /**
+     * Color of the unselected page dots and the border of the not selected pages
+     */
+    inactiveColor?: string;
+    /**
+     * The size of the page indicator.
+     * When setting limitShownPages the medium sized will be 2/3 of size and the small will be 1/3 of size.
+     * An alternative is to send an array [smallSize, mediumSize, largeSize].
+     */
+    size?: number | [number, number, number];
+    /**
+     * Whether to enlarge the active page indicator
+     * Irrelevant when limitShownPages is in effect.
+     */
+    enlargeActive?: boolean;
+    /**
+     * The space between the siblings page indicators
+     */
+    spacing?: number;
+}
+declare const _default: React.ComponentClass<PageControlProps & {
+    useCustomTheme?: boolean | undefined;
+}, any>;
+export default _default;

generatedTypes/components/pageControl/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TouchableOpacityProps as RNTouchableOpacityProps, StyleProp, ViewStyle, Animated } from 'react-native';
 import { ContainerModifiers } from '../../commons/new';
-export declare type TouchableOpacityProps = Omit<RNTouchableOpacityProps, 'style'> & ContainerModifiers & {
+export declare type TouchableOpacityProps = Omit<RNTouchableOpacityProps, 'style' | 'onPress'> & ContainerModifiers & {
     /**
      * background color for TouchableOpacity
      */
@@ -30,8 +30,9 @@ export declare type TouchableOpacityProps = Omit<RNTouchableOpacityProps, 'style
      */
     customValue?: any;
     style?: StyleProp<ViewStyle> | Animated.AnimatedProps<StyleProp<ViewStyle>>;
+    onPress?: (props: TouchableOpacityProps) => void;
 };
-declare const _default: React.ComponentClass<Pick<RNTouchableOpacityProps, "testID" | "disabled" | "hitSlop" | "onLayout" | "hasTVPreferredFocus" | "tvParallaxProperties" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityStates" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "activeOpacity" | "onPress" | "onLongPress" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "pressRetentionOffset"> & Partial<Record<import("../../commons/modifiers").AlignmentLiterals, boolean>> & Partial<Record<import("../../commons/modifiers").PositionLiterals, boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"flex" | "flexG" | "flexS", boolean>> & Partial<Record<"br0" | "br10" | "br20" | "br30" | "br40" | "br50" | "br60" | "br100", boolean>> & Partial<Record<"bg", boolean>> & {
+declare const _default: React.ComponentClass<Pick<RNTouchableOpacityProps, "testID" | "onLayout" | "hitSlop" | "hasTVPreferredFocus" | "tvParallaxProperties" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityStates" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "disabled" | "activeOpacity" | "onLongPress" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "pressRetentionOffset"> & Partial<Record<import("../../commons/modifiers").AlignmentLiterals, boolean>> & Partial<Record<import("../../commons/modifiers").PositionLiterals, boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"flex" | "flexG" | "flexS", boolean>> & Partial<Record<"br0" | "br10" | "br20" | "br30" | "br40" | "br50" | "br60" | "br100", boolean>> & Partial<Record<"bg", boolean>> & {
     /**
      * background color for TouchableOpacity
      */
@@ -60,6 +61,7 @@ declare const _default: React.ComponentClass<Pick<RNTouchableOpacityProps, "test
      */
     customValue?: any;
     style?: false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | Animated.AnimatedProps<ViewStyle> | Animated.AnimatedProps<import("react-native").RegisteredStyle<ViewStyle>> | Animated.AnimatedProps<import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined>> | null | undefined;
+    onPress?: ((props: TouchableOpacityProps) => void) | undefined;
 } & {
     useCustomTheme?: boolean | undefined;
 }, any>;

generatedTypes/components/touchableOpacity/index.d.ts

@@ -41,6 +41,7 @@ export {default as PanListenerView, PanListenerViewPropTypes} from './components
 export {default as PanResponderView, PanResponderViewPropTypes} from './components/panningViews/panResponderView';
 export {default as PanDismissibleView, PanDismissibleViewPropTypes, DismissibleAnimationPropTypes} from './components/panningViews/panDismissibleView';
 export {default as Dialog, DialogProps} from './components/dialog';
+export {default as PageControl, PageControlProps} from './components/pageControl';
 
 /* All components with manual typings */
 export {
@@ -57,7 +58,6 @@ export {
   TextArea,
   MaskedInput,
   ListItem,
-  PageControl,
   ProgressBar,
   Slider,
   GradientSlider,

generatedTypes/index.d.ts

@@ -9,15 +9,14 @@ export interface ForwardRefInjectedProps {
   forwardedRef: any;
 }
 
-export default function forwardRef(WrappedComponent: React.ComponentType<any>): React.ComponentType<any> {
-  function forwardRef(props: any, ref: any) {
+export default function forwardRef<P = any>(WrappedComponent: React.ComponentType<P>): React.ComponentType<P> {
+  function forwardRef(props: P, ref: any) {
     return <WrappedComponent {...props} forwardedRef={ref}/>;
   }
 
   const ForwardedComponent = React.forwardRef(forwardRef);
 
   hoistStatics(ForwardedComponent, WrappedComponent);
-  //@ts-ignore
   ForwardedComponent.displayName = WrappedComponent.displayName;
   //@ts-ignore
   ForwardedComponent.propTypes = WrappedComponent.propTypes;

src/commons/forwardRef.tsx

@@ -6,7 +6,7 @@ import forwardRef, {ForwardRefInjectedProps} from './forwardRef';
 //@ts-ignore
 import hoistStatics from 'hoist-non-react-statics';
 
-export type ScrollEnablerProps = {
+type ScrollEnablerProps = {
   onContentSizeChange: (contentWidth: number, contentHeight: number) => void;
   onLayout: (event: LayoutChangeEvent) => void;
   scrollEnabled: boolean;
@@ -24,7 +24,7 @@ type PropTypes = ForwardRefInjectedProps & SupportedViewsProps;
 function withScrollEnabler<PROPS, STATICS = {}>(
   WrappedComponent: React.ComponentType<PROPS & WithScrollEnablerProps>
 ): React.ComponentType<PROPS> & STATICS {
-  const ScrollEnabler = (props: PROPS & PropTypes) => {
+  const ScrollEnabler: React.FunctionComponent<PROPS & PropTypes> = (props: PROPS & PropTypes) => {
     const [scrollEnabled, setScrollEnabled] = useState(true);
     const contentSize = useRef(0);
     const layoutSize = useRef(0);
@@ -78,7 +78,9 @@ function withScrollEnabler<PROPS, STATICS = {}>(
 
   hoistStatics(ScrollEnabler, WrappedComponent);
   ScrollEnabler.displayName = WrappedComponent.displayName;
+  //@ts-ignore
   ScrollEnabler.propTypes = WrappedComponent.propTypes;
+  //@ts-ignore
   ScrollEnabler.defaultProps = WrappedComponent.defaultProps;
   return forwardRef(ScrollEnabler) as any;
 }

src/commons/withScrollEnabler.tsx

@@ -15,7 +15,7 @@ import forwardRef, {ForwardRefInjectedProps} from './forwardRef';
 import hoistStatics from 'hoist-non-react-statics';
 import {Constants} from '../helpers';
 
-export type ScrollReachedProps = {
+type ScrollReachedProps = {
   onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
   /**
    * Is the scroll at the start (or equal\smaller than the threshold if one was given)
@@ -59,7 +59,7 @@ function withScrollReached<PROPS, STATICS = {}>(
   WrappedComponent: React.ComponentType<PROPS & WithScrollReachedProps>,
   options: WithScrollReachedOptionsProps = {}
 ): React.ComponentType<PROPS> & STATICS {
-  const ScrollReachedDetector = (props: PROPS & PropTypes) => {
+  const ScrollReachedDetector: React.FunctionComponent<PROPS & PropTypes> = (props: PROPS & PropTypes) => {
     // The scroll starts at the start, from what I've tested this works fine
     const [isScrollAtStart, setScrollAtStart] = useState(true);
     const [isScrollAtEnd, setScrollAtEnd] = useState(false);
@@ -102,9 +102,11 @@ function withScrollReached<PROPS, STATICS = {}>(
 
   hoistStatics(ScrollReachedDetector, WrappedComponent);
   ScrollReachedDetector.displayName = WrappedComponent.displayName;
+  //@ts-ignore
   ScrollReachedDetector.propTypes = WrappedComponent.propTypes;
+  //@ts-ignore
   ScrollReachedDetector.defaultProps = WrappedComponent.defaultProps;
-  return forwardRef(ScrollReachedDetector) as any;
+  return forwardRef<PROPS & PropTypes>(ScrollReachedDetector) as any;
 }
 
 export default withScrollReached;

src/commons/withScrollReached.tsx

@@ -572,4 +572,4 @@ function createStyles() {
 
 export {Button}; // For tests
 
-export default asBaseComponent<ButtonPropTypes, typeof Button>(forwardRef(Button));
+export default asBaseComponent<ButtonPropTypes, typeof Button>(forwardRef<Props>(Button));