Literal enum typings (#2892)

* Page control enum

* Fader position enum

* FloatingButtonLayouts enum

* GradientTypes enum

* MarqueeDirections enum

* OverlayIntesityType enum

* GestureDirections enum

* PanningDirectionsEnum enum

* Picker enums

* SkeletonView enums

* GradientSliderTypes enum

* tabControll OffsetType enum

* Timline enums

* WizardStepsState enum

* useScrollToItem OffsetType

* Calendar types

* PanView tiny change

* ts fixes

* Reverted change to overlay type

* Skeleton better typing

Author: nitzanyiz

src/components/carousel/types.tsx

@@ -62,7 +62,7 @@ export interface CarouselProps extends ScrollViewProps {
   /**
    * The position of the PageControl component ['over', 'under'], otherwise it won't display
    */
-  pageControlPosition?: PageControlPosition;
+  pageControlPosition?: PageControlPosition | `${PageControlPosition}`;
   /**
    * whether to show a page counter (will not work with 'pageWidth' prop)
    */

src/components/fader/index.tsx

@@ -20,7 +20,7 @@ export type FaderProps = Pick<ImageProps, 'supportRTL'> & {
   /**
    * The position of the fader (the image is different), defaults to Fader.position.END
    */
-  position?: FaderPosition;
+  position?: FaderPosition | `${FaderPosition}`;
   /**
    * Set to change from the default size (50) of the fade view.
    */

src/components/floatingButton/index.tsx

@@ -49,7 +49,7 @@ export interface FloatingButtonProps {
   /**
    * Button layout direction: vertical or horizontal
    */
-  buttonLayout?: FloatingButtonLayouts;
+  buttonLayout?: FloatingButtonLayouts | `${FloatingButtonLayouts}`;
 }
 
 const gradientImage = () => require('./gradient.png');

src/components/gradient/index.tsx

@@ -14,7 +14,7 @@ export enum GradientTypes {
 
 export interface GradientProps {
   color?: string | tinycolor.ColorFormats.HSLA;
-  type?: GradientTypes;
+  type?: GradientTypes | `${GradientTypes}`;
   numberOfSteps: number;
   style?: StyleProp<ViewStyle>;
 }

src/components/marquee/types.ts

@@ -21,7 +21,7 @@ export type MarqueeProps = PropsWithChildren<{
   /**
    * Marquee direction
    */
-  direction?: MarqueeDirections;
+  direction?: MarqueeDirections | `${MarqueeDirections}`;
   /**
    * Marquee animation duration
    */

src/components/overlay/index.tsx

@@ -31,7 +31,7 @@ export type OverlayTypes = {
   /**
    * The intensity of the gradient, default is 'LOW'.
    */
-  intensity?: OverlayIntensityType;
+  intensity?: OverlayIntensityType | `${OverlayIntensityType}`;
   /**
    * The overlay color
    */
@@ -91,7 +91,7 @@ class Overlay extends PureComponent<OverlayTypes> {
     return <Image style={[styles.container, style]} resizeMode={'stretch'} source={source}/>;
   };
 
-  getImageSource = (type?: OverlayTypeType, intensity?: OverlayIntensityType) => {
+  getImageSource = (type?: OverlayTypeType, intensity?: OverlayTypes['intensity']) => {
     if (type !== OVERLY_TYPES.SOLID) {
       if (intensity === OverlayIntensityType.MEDIUM) {
         return gradientImageMed;

src/components/panningViews/panGestureView.tsx

@@ -30,7 +30,7 @@ export interface PanGestureViewProps {
   /**
    * The direction of the allowed pan (default is down)
    */
-  direction?: GestureDirections;
+  direction?: GestureDirections | `${GestureDirections}`;
   children?: React.ReactNode;
 }
 

src/components/panningViews/panningProvider.tsx

@@ -8,7 +8,7 @@ export enum PanningDirectionsEnum {
   RIGHT = 'right'
 }
 
-export type PanningDirectionsUnion = 'up' | 'down' | 'left' | 'right';
+export type PanningDirectionsUnion = `${PanningDirectionsEnum}`;
 
 export type PanningDirections = PanningDirectionsEnum | PanningDirectionsUnion;
 

src/components/picker/types.tsx

@@ -61,7 +61,7 @@ export type PickerBaseProps = Omit<NewTextFieldProps, 'value' | 'onChange'> & {
   /**
    * Pass for different field type UI (form, filter or settings)
    */
-  fieldType?: PickerFieldTypes;
+  fieldType?: PickerFieldTypes | `${PickerFieldTypes}`;
   /**
    * Picker current value in the shape of {value: ..., label: ...}, for custom shape use 'getItemValue' prop
    */
@@ -73,7 +73,7 @@ export type PickerBaseProps = Omit<NewTextFieldProps, 'value' | 'onChange'> & {
   /**
    * SINGLE mode or MULTI mode
    */
-  mode?: PickerModes;
+  mode?: PickerModes | `${PickerModes}`;
   /**
    * Limit the number of selected items
    */

src/components/skeletonView/index.tsx

@@ -33,12 +33,12 @@ export interface SkeletonListProps {
    * The size of the skeleton view.
    * Types: SMALL and LARGE (using SkeletonView.sizes.###)
    */
-  size?: Size;
+  size?: Size | `${Size}`;
   /**
    * Add content to the skeleton.
    * Types: AVATAR and THUMBNAIL (using SkeletonView.contentTypes.###)
    */
-  contentType?: ContentType;
+  contentType?: ContentType | `${ContentType}`;
   /**
    * Whether to hide the list item template separator
    */
@@ -71,7 +71,7 @@ export interface SkeletonViewProps extends AccessibilityProps, AlignmentModifier
    * The type of the skeleton view.
    * Types: LIST_ITEM and TEXT_CONTENT (using SkeletonView.templates.###)
    */
-  template?: Template;
+  template?: Template | `${Template}`;
   /**
    * Props that are available when using template={SkeletonView.templates.LIST_ITEM}
    */
@@ -151,7 +151,7 @@ class SkeletonView extends Component<SkeletonViewProps, SkeletonState> {
   contentAccessibilityProps?: AccessibilityProps;
   listItemAccessibilityProps?: AccessibilityProps;
 
-  setAccessibilityProps(template?: Template) {
+  setAccessibilityProps(template?: SkeletonViewProps['template']) {
     const isListItem = template === Template.LIST_ITEM;
     const accessibilityProps = {
       accessible: true,