Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added prop to open up a new tab instead of a new window #342

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Added prop to open up a new tab instead of a new window #342

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
561b0ca
feat: added prop to open up link in a new tab
Aug 24, 2020
267b430
add documentation for opening up share window in a new tab
Aug 24, 2020
908d892
fix: remove prop for opening window in new tab from props that are pa…
Aug 24, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ import {

| | Required props | Optional props |
| ---------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **All** | **`children`** (string/element): React node<br />**`url`** (string): URL of the shared page | **`disabled`** (bool): Disables click action and adds "disabled" class<br/>**`disabledStyle`** (object, default=`{ opacity: 0.6 }`): Disabled style<br/>**`windowWidth`, `windowHeight`** (number, different default for all share buttons): opened window dimensions<br />**`beforeOnClick`** (`() => Promise`/`() => void`): Takes a function that returns a Promise to be fulfilled before calling `onClick`. If you do not return promise, `onClick` is called immediately.<br/>**`openShareDialogOnClick`** (boolean): Open dialog on click. Defaults to `true` except on EmailShareButton<br/>**`onShareWindowClose`** (`() => void`): Takes a function to be called after closing share dialog.<br/>**`resetButtonStyle`** (boolean, default=`true`): Reset `button` element style. Preferred to be set to `false` if you want to customize the button style. |
| **All** | **`children`** (string/element): React node<br />**`url`** (string): URL of the shared page | **`disabled`** (bool): Disables click action and adds "disabled" class<br/>**`disabledStyle`** (object, default=`{ opacity: 0.6 }`): Disabled style<br/>**`windowWidth`, `windowHeight`** (number, different default for all share buttons): opened window dimensions<br />**`beforeOnClick`** (`() => Promise`/`() => void`): Takes a function that returns a Promise to be fulfilled before calling `onClick`. If you do not return promise, `onClick` is called immediately.<br/>**`openShareDialogOnClick`** (boolean): Open dialog on click. Defaults to `true` except on EmailShareButton<br/>**`onShareWindowClose`** (`() => void`): Takes a function to be called after closing share dialog.<br/>**`resetButtonStyle`** (boolean, default=`true`): Reset `button` element style. Preferred to be set to `false` if you want to customize the button style.<br/>**`hasBlankTarget`** (boolean, default=`false`): Open up share window in a new tab if set to `true`. |
| EmailShareButton | - | **`subject`** (string): Title of the shared page<br/>**`body`** (string): Email, will be prepended to the url.<br/>**`separator`** (string, default=`" "`): Separates body from the url |
| FacebookShareButton | - | **`quote`** (string): A quote to be shared along with the link.<br/>**`hashtag`** (string): A hashtag specified by the developer to be added to the shared content. People will still have the opportunity to remove this hashtag in the dialog. The hashtag should include the hash symbol. |
| FacebookMessengerShareButton | **`appId`** (string): Facebook application id | **`redirectUri`** (string): The URL to redirect to after sharing (default: the shared url).<br />**`to`** (string): A user ID of a recipient. Once the dialog comes up, the sender can specify additional people as recipients. |
Expand Down
25 changes: 17 additions & 8 deletions src/ShareButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ const getBoxPositionOnScreenCenter = (width: number, height: number) => ({
function windowOpen(
url: string,
{ height, width, ...configRest }: { height: number; width: number; [key: string]: any },
hasBlankTarget: boolean,
onClose?: (dialog: Window | null) => void,
) {
const config: { [key: string]: string | number } = {
Expand All @@ -38,13 +39,18 @@ function windowOpen(
...configRest,
};

const shareDialog = window.open(
url,
'',
Object.keys(config)
.map(key => `${key}=${config[key]}`)
.join(', '),
);
let shareDialog: Window;
if (hasBlankTarget) {
shareDialog = window.open(url, '_blank') as Window;
} else {
shareDialog = window.open(
url,
'',
Object.keys(config)
.map(key => `${key}=${config[key]}`)
.join(', '),
) as Window;
}

if (onClose) {
const interval = window.setInterval(() => {
Expand Down Expand Up @@ -98,6 +104,7 @@ interface CustomProps<LinkOptions> {
*/
onShareWindowClose?: () => void;
resetButtonStyle?: boolean;
hasBlankTarget?: boolean;
}

export type Props<LinkOptions> = Omit<
Expand All @@ -119,6 +126,7 @@ export default class ShareButton<LinkOptions> extends Component<Props<LinkOption
windowHeight = 400,
windowPosition = 'windowCenter',
windowWidth = 550,
hasBlankTarget = false,
} = this.props;

const windowConfig = {
Expand All @@ -129,7 +137,7 @@ export default class ShareButton<LinkOptions> extends Component<Props<LinkOption
: getBoxPositionOnScreenCenter(windowWidth, windowHeight)),
};

windowOpen(link, windowConfig, onShareWindowClose);
windowOpen(link, windowConfig, hasBlankTarget, onShareWindowClose);
};

handleClick = async (event: React.MouseEvent<HTMLButtonElement>) => {
Expand Down Expand Up @@ -187,6 +195,7 @@ export default class ShareButton<LinkOptions> extends Component<Props<LinkOption
windowHeight,
windowPosition,
windowWidth,
hasBlankTarget,
...rest
} = this.props;

Expand Down