converting view to typescript (#714)

* converting view to typescript

* fix bad import

* Update src/components/view/index.tsx

Co-Authored-By: Ethan Sharabi <ethans@wix.com>

* code review fixes

* add missing comments

Co-authored-by: Ethan Sharabi <ethans@wix.com>

Author: Niryo

generatedTypes/commons/asBaseComponent.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
-declare function asBaseComponent(WrappedComponent: React.ClassType<any, any, any>): React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
+import * as Modifiers from './modifiers';
+export interface BaseComponentInjectedProps {
+    modifiers: ReturnType<typeof Modifiers.generateModifiersStyle>;
+}
+declare function asBaseComponent<PROPS>(WrappedComponent: React.ComponentType<PROPS>): React.ComponentType<Omit<PROPS, keyof BaseComponentInjectedProps>>;
 export default asBaseComponent;

generatedTypes/commons/forwardRef.d.ts

@@ -1,3 +1,5 @@
 import React from 'react';
-declare const _default: <PROPS extends {}>(WrappedComponent: any) => React.ForwardRefExoticComponent<React.PropsWithoutRef<PROPS> & React.RefAttributes<unknown>>;
-export default _default;
+export interface ForwardRefInjectedProps {
+    forwardedRef: any;
+}
+export default function forwardRef<P>(WrappedComponent: React.ComponentType<P>): React.ComponentType<Omit<P, keyof ForwardRefInjectedProps>>;

generatedTypes/commons/modifiers.d.ts

@@ -56,9 +56,9 @@ export declare function extractTypographyValue(props: Dictionary<any>): undefine
 export declare function extractPaddingValues(props: Dictionary<any>): Partial<Record<"padding" | "paddingLeft" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingHorizontal" | "paddingVertical", number>>;
 export declare function extractMarginValues(props: Dictionary<any>): Partial<Record<"margin" | "marginLeft" | "marginTop" | "marginRight" | "marginBottom" | "marginHorizontal" | "marginVertical", number>>;
 export declare function extractAlignmentsValues(props: Dictionary<any>): any;
-export declare function extractPositionStyle(props: Dictionary<any>): import("react-native").RegisteredStyle<{
+export declare function extractPositionStyle(props: Dictionary<any>): {
     position: "absolute";
-}> | undefined;
+} | undefined;
 export declare function extractFlexStyle(props: Dictionary<any>): Partial<Record<NativeFlexModifierKeyType, number>> | undefined;
 export declare function extractAccessibilityProps(props?: any): Partial<any>;
 export declare function extractBorderRadiusValue(props: Dictionary<any>): number | undefined;

generatedTypes/commons/modifiers2.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+import { BaseComponentInjectedProps } from '../../commons/asBaseComponent';
+import { ForwardRefInjectedProps } from '../../commons/forwardRef';
+import { ContainerModifiers } from '../../../typings/modifiers';
+/**
+ * @description: Wrapper component for React Native View component
+ * @extends: View
+ * @extendslink: https://facebook.github.io/react-native/docs/view.html
+ * @modifiers: margins, paddings, alignments, background, borderRadius
+ */
+interface ViewPropTypes extends ViewProps {
+    /**
+     * If true, will render as SafeAreaView
+     */
+    useSafeArea?: boolean;
+    animated?: boolean;
+    inaccessible?: boolean;
+}
+declare type PropsTypes = BaseComponentInjectedProps & ViewPropTypes & ForwardRefInjectedProps & ContainerModifiers;
+declare const _default: React.ComponentType<Pick<Pick<PropsTypes, "br0" | "br10" | "br20" | "br30" | "br40" | "br50" | "br60" | "br100" | "padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV" | "margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV" | "flex" | "flexG" | "flexS" | "row" | "center" | "left" | "right" | "centerH" | "spread" | "top" | "bottom" | "centerV" | "style" | "testID" | "modifiers" | "useSafeArea" | "animated" | "inaccessible" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityStates" | "accessibilityState" | "accessibilityHint" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors">, "br0" | "br10" | "br20" | "br30" | "br40" | "br50" | "br60" | "br100" | "padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV" | "margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV" | "flex" | "flexG" | "flexS" | "row" | "center" | "left" | "right" | "centerH" | "spread" | "top" | "bottom" | "centerV" | "style" | "testID" | "useSafeArea" | "animated" | "inaccessible" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityStates" | "accessibilityState" | "accessibilityHint" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors">>;
+export default _default;

generatedTypes/components/view/index.d.ts

@@ -1,11 +1,12 @@
+export declare function updateConstants(dimensions: any): void;
 declare const constants: {
     orientations: {
         PORTRAIT: string;
         LANDSCAPE: string;
     };
     isAndroid: boolean;
     isIOS: boolean;
-    readonly getAndroidVersion: number | undefined;
+    getAndroidVersion: () => number | undefined;
     readonly statusBarHeight: number;
     isRTL: boolean;
     readonly orientation: string;
@@ -18,7 +19,7 @@ declare const constants: {
     readonly isShortScreen: boolean;
     readonly screenAspectRatio: number;
     readonly isTablet: any;
-    readonly getSafeAreaInsets: {
+    getSafeAreaInsets: () => {
         left: number;
         right: number;
         bottom: number;