@layr/browser-navigator
Version:
Provides a navigation system for a Layr app running in a browser
109 lines (108 loc) • 5.22 kB
TypeScript
/// <reference types="react" />
import { Navigator, NavigatorOptions } from '@layr/navigator';
export type BrowserNavigatorLinkProps = {
to: string;
className?: string;
activeClassName?: string;
style?: React.CSSProperties;
activeStyle?: React.CSSProperties;
};
export type BrowserNavigatorOptions = NavigatorOptions;
/**
* *Inherits from [`Navigator`](https://layrjs.com/docs/v2/reference/navigator).*
*
* A [`Navigator`](https://layrjs.com/docs/v2/reference/navigator) relying on the browser's [History API](https://developer.mozilla.org/en-US/docs/Web/API/History) to determine the current [route](https://layrjs.com/docs/v2/reference/route).
*
* #### Usage
*
* If you are using [React](https://reactjs.org/), the easiest way to set up a `BrowserNavigator` in your app is to use the [`BrowserNavigatorView`](https://layrjs.com/docs/v2/reference/react-integration#browser-navigator-view-react-component) React component that is provided by the `@layr/react-integration` package.
*
* See an example of use in the [`BrowserNavigatorView`](https://layrjs.com/docs/v2/reference/react-integration#browser-navigator-view-react-component) React component.
*/
export declare class BrowserNavigator extends Navigator {
/**
* Creates a [`BrowserNavigator`](https://layrjs.com/docs/v2/reference/browser-navigator).
*
* @returns The [`BrowserNavigator`](https://layrjs.com/docs/v2/reference/browser-navigator) instance that was created.
*
* @category Creation
*/
constructor(options?: BrowserNavigatorOptions);
_popStateHandler: (event: PopStateEvent) => void;
_ignorePopStateHandler: boolean;
_beforeUnloadHandler: (event: BeforeUnloadEvent) => void;
_mouseUpHandler: (event: MouseEvent) => void;
_openNewWindowUntil: number | undefined;
_openNewWindowPopup: boolean | undefined;
_navigateHandler: (event: Event) => void;
_mutationObserver: MutationObserver;
_expectedHash: string | undefined;
_scrollToHash: () => void;
mount(): void;
unmount(): void;
/**
* See the methods that are inherited from the [`Navigator`](https://layrjs.com/docs/v2/reference/navigator#component-registration) class.
*
* @category Component Registration
*/
/**
* See the methods that are inherited from the [`Navigator`](https://layrjs.com/docs/v2/reference/navigator#routes) class.
*
* @category Routes
*/
/**
* See the methods that are inherited from the [`Navigator`](https://layrjs.com/docs/v2/reference/navigator#current-location) class.
*
* @category Current Location
*/
_getCurrentURL(): URL;
/**
* See the methods that are inherited from the [`Navigator`](https://layrjs.com/docs/v2/reference/navigator#navigation) class.
*
* @category Navigation
*/
_navigate(url: URL): void;
_redirect(url: URL): void;
shouldOpenNewWindow(): boolean;
_possiblyOpenNewWindow(url: URL): boolean;
_fixScrollPosition(): void;
_reload(url: URL | undefined): void;
_go(delta: number): Promise<void>;
_getHistoryLength(): number;
_getHistoryIndex(): number;
/**
* Renders a link that is managed by the navigator.
*
* This method is only available when you create your navigator by using the [`useBrowserNavigator()`](https://layrjs.com/docs/v2/reference/react-integration#use-browser-navigator-react-hook) React hook.
*
* Note that instead of using this method, you can use the handy `Link()` shortcut function that you get when you define a route with the [`@route()`](https://layrjs.com/docs/v2/reference/routable#route-decorator) decorator.
*
* @param props.to A string representing the target URL of the link.
* @param props.className A [`className`](https://reactjs.org/docs/dom-elements.html#classname) attribute to apply to the rendered link.
* @param props.activeClassName An additional [`className`](https://reactjs.org/docs/dom-elements.html#classname) attribute to apply to the rendered link when the URL of the current navigator's route is the same as the target URL of the link.
* @param props.style A [`style`](https://reactjs.org/docs/dom-elements.html#style) attribute to apply to the rendered link.
* @param props.activeStyle An additional [`style`](https://reactjs.org/docs/dom-elements.html#style) attribute to apply to the rendered link when the URL of the current navigator's route is the same as the target URL of the link.
*
* @returns An `<a>` React element.
*
* @example
* ```
* class Application extends Routable(Component) {
* ﹫route('/') @view static Home() {
* const navigator = this.getNavigator();
* return <navigator.Link to="/about-us">About Us</navigator.Link>;
*
* // Same as above, but in a more idiomatic way:
* return <this.AboutUs.Link>About Us</this.AboutUs.Link>;
* }
*
* ﹫route('/about-us') @view static AboutUs() {
* return <div>Here is everything about us.<div>;
* }
* }
* ```
*
* @category Link Rendering
*/
Link: (props: BrowserNavigatorLinkProps) => any;
}