react-native-navigation/lib/src/interfaces/Options.ts

// tslint:disable jsdoc-format
import { ImageRequireSource, Insets } from 'react-native';

type Color = string;
type FontFamily = string;
type FontWeight = 'regular' | 'bold' | 'thin' | 'ultraLight' | 'light' | 'medium' | 'semibold' | 'heavy' | 'black';
type LayoutOrientation = 'portrait' | 'landscape';
type AndroidDensityNumber = number;
type SystemItemIcon = 'done' | 'cancel' | 'edit'
  | 'save' | 'add' | 'flexibleSpace' | 'fixedSpace'
  | 'compose' | 'reply' | 'action' | 'organize'
  | 'bookmarks' | 'search' | 'refresh' | 'stop'
  | 'camera' | 'trash' | 'play' | 'pause'
  | 'rewind' | 'fastForward' | 'undo' | 'redo';

export interface OptionsSplitView {
  /**
   * Master view display mode
   * @default 'auto'
   */
  displayMode?: 'auto' | 'visible' | 'hidden' | 'overlay';
  /**
   * Master view side. Leading is left. Trailing is right.
   * @default 'leading'
   */
  primaryEdge?: 'leading' | 'trailing';
  /**
   * Set the minimum width of master view
   */
  minWidth?: number;
  /**
   * Set the maximum width of master view
   */
  maxWidth?: number;
}

export interface OptionsStatusBar {
  /**
   * Set the status bar visibility
   * @default true
   */
  visible?: boolean;
  /**
   * Set the text color of the status bar
   * @default 'light'
   */
  style?: 'light' | 'dark';
  /**
   * Set the background color of the status bar
   * #### (Android specific)
   */
  backgroundColor?: Color;
  /**
   * Draw screen behind the status bar
   * #### (Android specific)
   */
  drawBehind?: boolean;
}

export interface OptionsLayout {
  fitSystemWindows?: boolean;
  /**
   * Set the screen background color
   */
  backgroundColor?: Color;
  /**
   * Set background color only for components, helps reduce overdraw if background color is set in default options.
   * #### (Android specific)
   */
  componentBackgroundColor?: Color;
  /**
   * Set the allowed orientations
   */
  orientation?: LayoutOrientation[];
  /**
   * Layout top margin
   * #### (Android specific)
   */
  topMargin?: number;

  /**
   * Set language direction.
   * only works with DefaultOptions
   */
  direction?: 'rtl' | 'ltr';
}

export enum OptionsModalPresentationStyle {
  formSheet = 'formSheet',
  pageSheet = 'pageSheet',
  overFullScreen = 'overFullScreen',
  overCurrentContext = 'overCurrentContext',
  currentContext = 'currentContext',
  popOver = 'popOver',
  fullScreen = 'fullScreen',
  none = 'none'
}

export enum OptionsModalTransitionStyle {
  coverVertical = 'coverVertical',
  crossDissolve = 'crossDissolve',
  flipHorizontal = 'flipHorizontal',
  partialCurl = 'partialCurl'
}

export interface OptionsTopBarLargeTitle {
  /**
   * Enable large titles
   */
  visible?: boolean;
  /**
   * Set the font size of large title's text
   */
  fontSize?: number;
  /**
   * Set the color of large title's text
   */
  color?: Color;
  /**
   * Set the font family of large title's text
   */
  fontFamily?: FontFamily;
  /**
   * Set the font weight, ignore fontFamily and use the iOS system fonts instead
   * #### (iOS specific)
   */
  fontWeight?: FontWeight;
}

export interface OptionsTopBarTitle {
  /**
   * Text to display in the title area
   */
  text?: string;
  /**
   * Font size
   */
  fontSize?: number;
  /**
   * Text color
   */
  color?: Color;
  /**
   * Title font family
   *
   * Make sure that the font is available
   */
  fontFamily?: FontFamily;
  /**
   * Set the font weight, ignore fontFamily and use the iOS system fonts instead
   * #### (iOS specific)
   */
  fontWeight?: FontWeight;
  /**
   * Custom component as the title view
   */
  component?: {
    /**
     * Component reference id, Auto generated if empty
     */
    id?: string;
    /**
     * Name of your component
     */
    name: string;
    /**
     * Set component alignment
     */
    alignment?: 'center' | 'fill';
    /**
     * Properties to pass down to the component
     */
    passProps?: object;
  };
  /**
   * Top Bar title height in densitiy pixels
   * #### (Android specific)
   */
  height?: number;
  /**
   * Title alignment
   * #### (Android specific)
   */
  alignment?: 'center' | 'fill';
}

export interface OptionsTopBarSubtitle {
  /**
   * Set subtitle text
   */
  text?: string;
  /**
   * Set subtitle font size
   */
  fontSize?: number;
  /**
   * Set subtitle color
   */
  color?: Color;
  /**
   * Set subtitle font family
   */
  fontFamily?: FontFamily;
  /**
   * Set the font weight, ignore fontFamily and use the iOS system fonts instead
   * #### (iOS specific)
   */
  fontWeight?: FontWeight;
  /**
   * Set subtitle alignment
   */
  alignment?: 'center';
}

export interface OptionsTopBarBackButton {
  /**
   * Image to show as the back button
   */
  icon?: ImageRequireSource;
  /**
   * Weither the back button is visible or not
   * @default true
   */
  visible?: boolean;
  /**
   * Set the back button title
   * #### (iOS specific)
   */
  title?: string;
  /**
   * Show title or just the icon
   * #### (iOS specific)
   */
  showTitle?: boolean;
  /**
   * Back button icon and text color
   */
  color?: Color;
}

export interface OptionsTopBarBackground {
  /**
   * Background color of the top bar
   */
  color?: Color;
  /**
   * Clip the top bar background to bounds if set to true.
   * #### (iOS specific)
   */
  clipToBounds?: boolean;
  /**
   * Set a custom component for the Top Bar background
   */
  component?: {
    name?: string;
    /**
     * Properties to pass down to the component
     */
    passProps?: object;
  };
  /**
   * Allows the NavBar to be translucent (blurred)
   * #### (iOS specific)
   */
  translucent?: boolean;
  /**
   * Enable background blur
   * #### (iOS specific)
   */
  blur?: boolean;
}

export interface OptionsTopBarButton {
  /**
   * Button id for reference press event
   */
  id: string;
  /**
   * Set the button icon
   */
  icon?: ImageRequireSource;
  /**
  * Set the button icon insets
  */
  iconInsets?: IconInsets;
  /**
   * Set the button as a custom component
   */
  component?: {
    name: string;
    /**
     * Properties to pass down to the component
     */
    passProps?: object;
  };
  /**
   * (iOS only) Set the button as an iOS system icon
   */
  systemItem?: SystemItemIcon;
  /**
   * Set the button text
   */
  text?: string;
  /**
   * Set the button font family
   */
  fontFamily?: string;
  /**
   * Set the font weight, ignore fontFamily and use the iOS system fonts instead
   * #### (iOS specific)
   */
  fontWeight?: FontWeight;
  /**
   * Set the button enabled or disabled
   * @default true
   */
  enabled?: boolean;
  /**
   * Disable icon tinting
   */
  disableIconTint?: boolean;
  /**
   * Set text color
   */
  color?: Color;
  /**
   * Set text color in disabled state
   */
  disabledColor?: Color;
  /**
   * Set testID for reference in E2E tests
   */
  testID?: string;
  /**
   * (Android only) Set showAsAction value
   * @see {@link https://developer.android.com/guide/topics/resources/menu-resource|Android developer guide: Menu resource}
   */
  showAsAction?: 'ifRoom' | 'withText' | 'always' | 'never';
}

export interface OptionsTopBar {
  /**
   * Show or hide the top bar
   */
  visible?: boolean;
  /**
   * Controls whether TopBar visibility changes should be animated
   */
  animate?: boolean;
  /**
   * Top bar will hide and show based on users scroll direction
   */
  hideOnScroll?: boolean;
  /**
   * Change button colors in the top bar
   */

  leftButtonColor?: Color;
  rightButtonColor?: Color;
  leftButtonDisabledColor?: Color;
  rightButtonDisabledColor?: Color;
  /**
   * Draw behind the navbar
   */
  drawBehind?: boolean;
  /**
   * Can be used to reference the top bar in E2E tests
   */
  testID?: string;
  /**
   * Title configuration
   */
  title?: OptionsTopBarTitle;
  /**
   * Subtitle configuration
   */
  subtitle?: OptionsTopBarSubtitle;
  /**
   * Back button configuration
   */
  backButton?: OptionsTopBarBackButton;
  /**
   * List of buttons to the left
   */
  leftButtons?: OptionsTopBarButton[];
  /**
   * List of buttons to the right
   */
  rightButtons?: OptionsTopBarButton[];
  /**
   * Background configuration
   */
  background?: OptionsTopBarBackground;
  /**
   * Control the NavBar blur style
   * #### (iOS specific)
   * @requires translucent: true
   * @default 'default'
   */
  barStyle?: 'default' | 'black';
  /**
   * Disable the border on bottom of the navbar
   * #### (iOS specific)
   * @default false
   */
  noBorder?: boolean;
  /**
   * Show a UISearchBar in the Top Bar
   * #### (iOS 11+ specific)
   */
  searchBar?: boolean;
  /**
   * Hides the UISearchBar when scrolling
   * #### (iOS 11+ specific)
   */
  searchBarHiddenWhenScrolling?: boolean;
  /**
   * The placeholder value in the UISearchBar
   * #### (iOS 11+ specific)
   */
  searchBarPlaceholder?: string;
  /**
   * Controls Hiding NavBar on focus UISearchBar
   * #### (iOS 11+ specific)
   */
  hideNavBarOnFocusSearchBar?: boolean;
  /**
   * Control the Large Title configuration
   * #### (iOS 11+ specific)
   */
  largeTitle?: OptionsTopBarLargeTitle;
  /**
   * Set the height of the navbar in dp
   * #### (Android specific)
   */
  height?: AndroidDensityNumber;
  /**
   * Change the navbar border color
   * #### (Android specific)
   */
  borderColor?: Color;
  /**
   * Set the border height of the navbar in dp
   * #### (Android specific)
   */
  borderHeight?: AndroidDensityNumber;
  /**
   * Set the elevation of the navbar in dp
   * #### (Android specific)
   */
  elevation?: AndroidDensityNumber;
  /**
   * Layout top margin
   * #### (Android specific)
   */
  topMargin?: number;
}

export interface OptionsFab {
  id: string;
  backgroundColor?: Color;
  clickColor?: Color;
  rippleColor?: Color;
  visible?: boolean;
  icon?: ImageRequireSource;
  iconColor?: Color;
  alignHorizontally?: 'left' | 'right';
  alignVertically?: 'top' | 'bottom';
  hideOnScroll?: boolean;
  size?: number;
  actions?: OptionsFab[];
}

export interface OptionsBottomTabs {
  /**
   * Show or hide the bottom tabs
   */
  visible?: boolean;
  /**
   * Enable animations when toggling visibility
   */
  animate?: boolean;
  /**
   * Switch to another screen within the bottom tabs via index (starting from 0)
   */
  currentTabIndex?: number;
  /**
   * Switch to another screen within the bottom tabs via screen name
   */
  currentTabId?: string;
  /**
   * Set a testID to reference the bottom tabs
   */
  testID?: string;
  /**
   * Draw screen component under the tab bar
   */
  drawBehind?: boolean;
  /**
   * Set a background color for the bottom tabs
   */
  backgroundColor?: Color;
  /**
   * Set when tabs are attached to hierarchy consequently when the
   * RootView's constructor is called.
   */
  tabsAttachMode?: 'together' | 'afterInitialTab' | 'onSwitchToTab';
  /**
   * Control the Bottom Tabs blur style
   * #### (iOS specific)
   * @requires translucent: true
   * @default 'default'
   */
  barStyle?: 'default' | 'black';
  /**
   * Allows the Bottom Tabs to be translucent (blurred)
   * #### (iOS specific)
   */
  translucent?: boolean;
  /**
   * Hide the top line of the Tab Bar
   * #### (iOS specific)
   */
  hideShadow?: boolean;
  /**
   * Control the text display mode below the tab icon
   * #### (Android specific)
   */
  titleDisplayMode?: 'alwaysShow' | 'showWhenActive' | 'alwaysHide';
  /**
   * Set the elevation of the Bottom Tabs in dp
   * #### (Android specific)
   */
  elevation?: AndroidDensityNumber;
}

export interface DotIndicatorOptions {
    // default red
    color?: Color;
    // default 6
    size?: number;
    // default false
    visible?: boolean;
}

export interface OptionsBottomTab {
    dotIndicator?: DotIndicatorOptions;

  /**
   * Set the text to display below the icon
   */
  text?: string;
  /**
   * Set the text in a badge that is overlayed over the component
   */
  badge?: string;
  /**
   * Set the background color of the badge that is overlayed over the component
   */
  badgeColor?: string;
  /**
   * Set a testID to reference the tab in E2E tests
   */
  testID?: string;
  /**
   * Set the tab icon
   */
  icon?: ImageRequireSource;
  /**
   * Set the icon tint
   */
  iconColor?: Color;
  /**
   * Set the text color
   */
  textColor?: Color;
  /**
   * Set the selected icon tint
   */
  selectedIconColor?: Color;
  /**
   * Set the selected text color
   */
  selectedTextColor?: Color;
  /**
   * Set the text font family
   */
  fontFamily?: FontFamily;
    /**
   * Set the font weight, ignore fontFamily and use the iOS system fonts instead
   * #### (iOS specific)
   */
  fontWeight?: FontWeight;
  /**
   * Set the text font size
   */
  fontSize?: number;
  /**
   * Set the insets of the icon
   * #### (iOS specific)
   */
  iconInsets?: Insets;
  /**
   * Set selected icon image
   * #### (iOS specific)
   */
  selectedIcon?: ImageRequireSource;
  /**
   * Set true if you want to disable the icon tinting
   * #### (iOS specific)
   */
  disableIconTint?: boolean;
  /**
   * Set true if you want to disable the text tinting
   * #### (iOS specific)
   */
  disableSelectedIconTint?: boolean;
  /**
   * Set the font size for selected tabs
   * #### (Android specific)
   */
  selectedFontSize?: number;
}

export interface SideMenuSide {
  /**
   * Show or hide the side menu
   */
  visible?: boolean;
  /**
   * Enable or disable the side menu
   */
  enabled?: boolean;
  /**
   * Set the width of the side menu
   */
  width?: number;
  /**
   * Set the height of the side menu
   */
  height?: number;
}

export interface OptionsSideMenu {
  /**
   * Configure the left side menu
   */
  left?: SideMenuSide;
  /**
   * Configure the right side menu
   */
  right?: SideMenuSide;
  /**
   * Configure how a user is allowed to open a drawer using gestures
   * #### (iOS specific)
   * @default 'entireScreen'
   */
  openGestureMode?: 'entireScreen' | 'bezel';
}

export interface OverlayOptions {
  /**
   * Capture touches outside of the Component View
   */
  interceptTouchOutside?: boolean;
  /**
   * Control wether this Overlay should handle Keyboard events.
   * Set this to true if your Overlay contains a TextInput.
   */
  handleKeyboardEvents?: boolean;
}

export interface OptionsPreviewAction {
  /**
   * Reference ID to get callbacks from
   */
  id: string;
  /**
   * Action text
   */
  title: string;
  /**
   * Action style
   */
  style?: 'default' | 'selected' | 'destructive';
  /**
   * Subactions that will be shown when this action is pressed.
   */
  actions?: OptionsPreviewAction[];
}

export interface OptionsPreview {
  /**
   * Pass a react node tag to mark a SourceRect for a specific
   * peek and pop preview element.
   */
  reactTag?: number;
  /**
   * You can set this property specify the width of the preview.
   * If the width is greater than the device width, it will be zoomed in.
   */
  width?: number;
  /**
   * Height of the preview
   */
  height?: 100;
  /**
   * You can control if the users gesture will result in pushing
   * the preview screen into the stack.
   */
  commit?: boolean;
  /**
   * List of actions that will appear underneath the preview window.
   * They can be nested for sub actions.
   */
  actions?: OptionsPreviewAction[];
}

export interface OptionsAnimationPropertyConfig {
  /**
   * Animate from this value, ex. 0
   */
  from?: number;
  /**
   * Animate to this value, ex. 1
   */
  to?: number;
  /**
   * Animation duration
   * @default 300
   */
  duration?: number;
  /**
   * Animation delay
   * @default 0
   */
  startDelay?: number;
  /**
   * Animation interplation
   */
  interpolation?: 'accelerate' | 'decelerate';
}

/**
 * Used to animate the actual content added to the hierarchy.
 * Content can be a React component (component) or any other layout (Stack, BottomTabs etc)
 */
export interface ScreenAnimationOptions {
  /**
   * Animate the element over translateX
   */
  x?: OptionsAnimationPropertyConfig;
  /**
   * Animate the element over translateY
   */
  y?: OptionsAnimationPropertyConfig;
  /**
   * Animate the element over opacity
   */
  alpha?: OptionsAnimationPropertyConfig;
  /**
   * Animate the element over scaleX
   */
  scaleX?: OptionsAnimationPropertyConfig;
  /**
   * Animate the element over scaleY
   */
  scaleY?: OptionsAnimationPropertyConfig;
  /**
   * Animate the element over rotationX
   */
  rotationX?: OptionsAnimationPropertyConfig;
  /**
   * Animate the element over rotationY
   */
  rotationY?: OptionsAnimationPropertyConfig;
  /**
   * Animate the element over rotation
   */
  rotation?: OptionsAnimationPropertyConfig;
  /**
   * Wait for the root view to render before start animation
   */
  waitForRender?: boolean;
  /**
   * Enable or disable the animation
   * @default true
   */
  enabled?: boolean;
}

export interface IconInsets {
  /**
   * Configure top inset
   */
  top?: number;
  /**
   * Configure left inset
   */
  left?: number;
  /**
   * Configure bottom inset
   */
  bottom?: number;
  /**
   * Configure right inset
   */
  right?: number;
}

export interface ViewAnimationOptions extends ScreenAnimationOptions {
  /**
   * ID of the Top Bar we want to animate
   */
  id?: string;
}

/**
 * Used for describing stack commands animations.
 */
export interface StackAnimationOptions {
  /**
   * Wait for the View to render before start animation
   */
  waitForRender?: boolean;
  /**
   * Enable or disable the animation
   * @default true
   */
  enabled?: boolean;
  /**
   * Configure animations for the top bar
   */
  topBar?: ViewAnimationOptions;
  /**
   * Configure animations for the bottom tabs
   */
  bottomTabs?: ViewAnimationOptions;
  /**
   * Configure animations for the content (Screen)
   */
  content?: ViewAnimationOptions;
}

/**
 * Used for configuring command animations
 */
export interface AnimationOptions {
  /**
   * Configure the setRoot animation
   */
  setRoot?: ScreenAnimationOptions;
  /**
   * Configure what animates when a screen is pushed
   */
  push?: StackAnimationOptions;
  /**
   * Configure what animates when a screen is popped
   */
  pop?: StackAnimationOptions;
  /**
   * Configure what animates when modal is shown
   */
  showModal?: ScreenAnimationOptions;
  /**
   * Configure what animates when modal is dismissed
   */
  dismissModal?: ScreenAnimationOptions;
}

export interface OptionsCustomTransition {
  animations: OptionsCustomTransitionAnimation[];
  duration?: number;
}

export interface OptionsCustomTransitionAnimation {
  /**
   * Animation type, only support sharedElement currently
   */
  type: 'sharedElement';
  /**
   * Transition from element Id
   */
  fromId: string;
  /**
   * Transition to element Id
   */
  toId: string;
  /**
   * Animation delay
   */
  startDelay?: number;
  /**
   * Animation spring Velocity
   */
  springVelocity?: number;
  /**
   * Animation duration
   */
  duration?: number;
}

export interface Options {
  /**
   * Configure the status bar
   */
  statusBar?: OptionsStatusBar;
  /**
   * Configure the layout
   */
  layout?: OptionsLayout;
  /**
   * Configure the presentation style of the modal
   */
  modalPresentationStyle?: OptionsModalPresentationStyle;
  /**
   * Configure the transition style of the modal
   *
   * #### (Android specific)
   */
  modalTransitionStyle?: OptionsModalTransitionStyle;
  /**
   * Configure the top bar
   */
  topBar?: OptionsTopBar;
  fab?: OptionsFab;
  /**
   * Configure the bottom tabs
   */
  bottomTabs?: OptionsBottomTabs;
  /**
   * Configure the bottom tab associated to the screen
   */
  bottomTab?: OptionsBottomTab;
  /**
   * Configure the side menu
   */
  sideMenu?: OptionsSideMenu;
  /**
   * Configure the splitView controller
   */
  splitView?: OptionsSplitView;
  /**
   * Configure the overlay
   */
  overlay?: OverlayOptions;
  /**
   * Animation used for navigation commands that modify the layout
   * hierarchy can be controlled in options.
   *
   * Animations can be modified per command and it's also possible
   * to change the default animation for each command.
   *
   * Example:
```js
setRoot: {
  y: {
    from: 1000,
    to: 0,
    duration: 500,
    interpolation: 'accelerate',
  },
  alpha: {
    from: 0,
    to: 1,
    duration: 400,
    startDelay: 100,
    interpolation: 'accelerate'
  }
}
```
   */
  animations?: AnimationOptions;

  /**
   * Custom Transition used for animate shared element between two screens
   * Example:
  ```js
  Navigation.push(this.props.componentId, {
    component: {
      name: 'second.screen',
      options: {
        customTransition: {
          animations: [
            { type: 'sharedElement', fromId: 'image1', toId: 'image2', startDelay: 0, springVelocity: 0.2, duration: 0.5 }
          ],
          duration: 0.8
        }
      }
    }
  });
  ```
  */
  customTransition?: OptionsCustomTransition;
  /**
   * Preview configuration for Peek and Pop
   * #### (iOS specific)
   */
  preview?: OptionsPreview;
  /**
   * Enable or disable swipe back to pop gesture
   * #### (iOS specific)
   * @default true
   */
  popGesture?: boolean;
  /**
   * Background image for the screen
   * #### (iOS specific)
   */
  backgroundImage?: ImageRequireSource;
  /**
   * Background image for the Navigation View
   * #### (iOS specific)
   */
  rootBackgroundImage?: ImageRequireSource;
  /**
   * Enable or disable automatically blurring focused input, dismissing keyboard on unmount
   * #### (Android specific)
   * @default false
   */
  blurOnUnmount?: boolean;
  /**
   * Props to pass to a component
   */
  passProps?: Record<string, any>;
}