Fix links not always opening outside Electron

Summary:
Changelog: Fix links not always openening in the Browser

As reported in https://fb.workplace.com/groups/flippersupport/permalink/1154240895056567/, in some cases links would open inside Flipper itself, and as a result the user would be stick as he can't navigate away.

This happened only when a `Link` was being deconstructed from `Typography` by a module that was loaded before `Link.tsx`, which fixes `Typography.Link` to do that automatically. For example:

```
import {Typograph} from "antd"
const {Link} = Typography;
```

Addressed this issue by patching the antd package directly during build, rather than during application start.

Reviewed By: passy

Differential Revision: D29193899

fbshipit-source-id: b291018406e343c0f7de1d1d899924902159d8c7
This commit is contained in:
Michel Weststrate
2021-06-17 03:43:33 -07:00
committed by Facebook GitHub Bot
parent c83bd7900f
commit e708b2b693
3 changed files with 63 additions and 51 deletions

View File

@@ -7,32 +7,15 @@
* @format
*/
import {useCallback} from 'react';
import {shell} from 'electron';
import React from 'react';
import {Typography} from 'antd';
const AntOriginalLink = Typography.Link;
export default function Link(props: {
href: string;
children?: React.ReactNode;
style?: React.CSSProperties;
onClick?: ((event: React.MouseEvent<any>) => void) | undefined;
}) {
const onClick = useCallback(
(e: React.MouseEvent<any>) => {
shell.openExternal(props.href);
e.preventDefault();
e.stopPropagation();
},
[props.href],
);
return <AntOriginalLink {...props} onClick={props.onClick ?? onClick} />;
}
// XXX. For consistent usage, we monkey patch AntDesign's Link component,
// as we never want to open links internally, which gives a really bad experience
// used by patch for Typography.Link in AntD
// @ts-ignore
Typography.Link = Link;
global.flipperOpenLink = function openLinkExternal(url: string) {
shell.openExternal(url);
};
export default AntOriginalLink;