Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | 1x 1x 1x 1x 1x 4x 4x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 4x 1x | import { useCallback, useState } from 'react';
import { calculateCenterPoint } from './calculateCenterPoint';
import { windowOptionsMapper } from './windowOptionsMapper';
export type SpecsOption = 'yes' | 'no' | 1 | 0;
export interface UseOpenInWindowOptions {
/* Specifies the target attribute or the name of the window. The following values are supported:
_blank - URL is loaded into a new window, or tab. This is default
_parent - URL is loaded into the parent frame
_self - URL replaces the current page
_top - URL replaces any framesets that may be loaded
name - The name of the window (Note: the name does not specify the title of the new window)
*/
name?: '_blank' | '_parent' | '_self' | '_top' | string;
/* specifies if window should be centered, default true */
centered?: boolean;
/* put window in focus, default true */
focus?: boolean;
/* Optional. A comma-separated list of items, no whitespaces. */
specs?: {
/* The height of the window. Min. value is 100, default is 800*/
height: number;
/* The width of the window. Min. value is 100, default is 800*/
width: number;
/* The left position of the window. Negative values not allowed */
left?: number;
/* The top position of the window. Negative values not allowed */
top?: number;
/* Whether or not to display the window in theater mode. Default is no. IE only */
channelmode?: SpecsOption;
directories?: SpecsOption;
/* Whether or not to display the browser in full-screen mode. Default is no. A window in full-screen mode must also be in theater mode. IE only */
fullscreen?: SpecsOption;
/* Whether or not to display the address field. Opera only */
location?: SpecsOption;
/* Whether or not to display the menu bar */
menubar?: SpecsOption;
/* Whether or not the window is resizable. IE only */
resizable?: SpecsOption;
/* Whether or not to display scroll bars. IE, Firefox & Opera only */
scrollbars?: SpecsOption;
/* Whether or not to add a status bar */
status?: SpecsOption;
/* Whether or not to display the title bar. Ignored unless the calling application is an HTML Application or a trusted dialog box */
titlebar?: SpecsOption;
/* Whether or not to display the browser toolbar. IE and Firefox only */
toolbar?: SpecsOption;
};
}
const defaultOptions: Required<UseOpenInWindowOptions> = {
name: '_blank',
centered: true,
focus: true,
specs: {
height: 300,
width: 600,
scrollbars: 'yes'
}
};
const useOpenInWindow = (url: string, options: UseOpenInWindowOptions = {}) => {
const [newWindowHandler, setNewWindowHandler] = useState<Window | null>();
const openInWindow = useCallback(() => {
const { specs } = options;
const { specs: defaultSpecs } = defaultOptions;
const mixedOptions = { ...defaultOptions, ...options };
const mixedSpecs = { ...defaultSpecs, ...specs };
const { focus, name, centered } = mixedOptions;
let windowOptions = '';
Eif (centered) {
const { width, height, ...restSpecs } = mixedSpecs;
const centerPoint = calculateCenterPoint(width, height);
windowOptions = windowOptionsMapper({ width, height, ...centerPoint, ...restSpecs });
} else {
windowOptions = windowOptionsMapper(mixedSpecs);
}
const newWindow = window.open(url, name, windowOptions);
// Puts focus on the newWindow
if (focus && newWindow) newWindow.focus();
setNewWindowHandler(newWindow);
}, [url, options, setNewWindowHandler]);
return [openInWindow, newWindowHandler] as [() => void, Window | null | undefined];
};
export default useOpenInWindow;
|