Literal enum typings

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,

src/components/slider/GradientSlider.tsx

@@ -31,7 +31,7 @@ export type GradientSliderProps = Omit<
   /**
    * The gradient type (default, hue, lightness, saturation)
    */
-  type?: GradientSliderTypes;
+  type?: GradientSliderTypes | `${GradientSliderTypes}`;
   /**
    * The gradient steps
    */

src/components/tabController/useScrollToItem.ts

@@ -28,7 +28,7 @@ export type ScrollToItemProps<T extends ScrollToSupportedViews> = {
   /**
    * Where would the item be located (default to CENTER)
    */
-  offsetType?: OffsetType;
+  offsetType?: OffsetType | `${OffsetType}`;
   /**
    * Add a margin to the offset (default to true)
    * This gives a better UX

src/components/timeline/index.tsx

@@ -49,7 +49,7 @@ const Timeline = (props: TimelineProps) => {
     return [styles.container, visibleStyle];
   }, [visibleStyle]);
 
-  const getStateColor = (state?: StateTypes) => {
+  const getStateColor = (state?: PointProps['state']) => {
     switch (state) {
       case StateTypes.CURRENT:
         return Colors.$backgroundPrimaryHeavy;

src/components/timeline/types.ts

@@ -22,16 +22,16 @@ export enum PointTypes {
 
 export type LineProps = {
   state?: StateTypes;
-  type?: LineTypes;
+  type?: LineTypes | `${LineTypes}`;
   color?: string;
   /** to mark as entry point */
   entry?: boolean;
   width?: number;
 }
 
 export type PointProps = {
-  state?: StateTypes;
-  type?: PointTypes;
+  state?: StateTypes | `${StateTypes}`;
+  type?: PointTypes | `${PointTypes}`;
   color?: string;
   icon?: ImageRequireSource;
   iconProps?: IconProps;

src/components/wizard/types.tsx

@@ -14,7 +14,7 @@ export interface WizardStepProps {
   /**
    * The state of the step (Wizard.States.X)
    */
-  state: WizardStepStates;
+  state: WizardStepStates | `${WizardStepStates}`;
   /**
    * The label of the item
    */

src/hooks/useScrollToItem/index.ts

@@ -23,7 +23,7 @@ export type ScrollToItemProps<T extends ScrollToSupportedViews> = Pick<ScrollToP
   /**
    * Where would the item be located (default to CENTER)
    */
-  offsetType?: OffsetType;
+  offsetType?: OffsetType | `${OffsetType}`;
   /**
    * Add a margin to the offset (default to true)
    * This gives a better UX

src/incubator/Calendar/Month.tsx

@@ -10,7 +10,7 @@ function Month(props: MonthProps) {
   const {firstDayOfWeek} = useContext(CalendarContext);
 
   const weekNumbers = useMemo(() => {
-    return getWeekNumbersOfMonth(year, month, firstDayOfWeek);
+    return getWeekNumbersOfMonth(year, month, Number(firstDayOfWeek));
   }, [year, month, firstDayOfWeek]);
 
   return (

src/incubator/Calendar/types.ts

@@ -108,7 +108,7 @@ export interface TodayButtonProps {
 export interface WeekDaysNamesProps {
   containerStyle?: StyleProp<ViewStyle>;
   textStyle?: StyleProp<TextStyle>;
-  format?: /* `${DayNamesFormat}` &  */ DayNamesFormat; // NOTE: template literals usage depends on ts min version ^4.3.2
+  format?: DayNamesFormat;
 }
 
 export enum DayNamesFormat {
@@ -121,7 +121,7 @@ export interface CalendarProps {
   data: Data;
   initialDate?: number;
   onChangeDate?: (date: number) => void;
-  firstDayOfWeek?: /* `${FirstDayOfWeek}` &  */ FirstDayOfWeek; // NOTE: template literals usage depends on ts min version ^4.3.2
+  firstDayOfWeek?: FirstDayOfWeek;
   staticHeader?: boolean;
   showExtraDays?: boolean;
 }

src/incubator/panView/panningUtil.ts

@@ -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;