diff --git a/desktop/app/src/ui/components/Link.tsx b/desktop/app/src/ui/components/Link.tsx index 290281e5e..47e392a9e 100644 --- a/desktop/app/src/ui/components/Link.tsx +++ b/desktop/app/src/ui/components/Link.tsx @@ -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) => void) | undefined; -}) { - const onClick = useCallback( - (e: React.MouseEvent) => { - shell.openExternal(props.href); - e.preventDefault(); - e.stopPropagation(); - }, - [props.href], - ); - - return ; -} - -// 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; diff --git a/desktop/patches/antd+4.15.4.patch b/desktop/patches/antd+4.15.4.patch deleted file mode 100644 index 924032ac7..000000000 --- a/desktop/patches/antd+4.15.4.patch +++ /dev/null @@ -1,28 +0,0 @@ -diff --git a/node_modules/antd/es/button/button.js b/node_modules/antd/es/button/button.js -index c96d188..bba8ba5 100644 ---- a/node_modules/antd/es/button/button.js -+++ b/node_modules/antd/es/button/button.js -@@ -189,6 +189,8 @@ var InternalButton = function InternalButton(props, ref) { - }, [loadingOrDelay]); - React.useEffect(fixTwoCNChar, [buttonRef]); - -+ var scope = React.useContext(global.FlipperTrackingScopeContext); -+ - var handleClick = function handleClick(e) { - var _a; - -@@ -200,7 +202,13 @@ var InternalButton = function InternalButton(props, ref) { - return; - } - -- (_a = onClick) === null || _a === void 0 ? void 0 : _a(e); -+ if(onClick !== null && onClick !== void 0) { -+ global.flipperTrackInteraction( -+ 'Button', 'onClick', scope, props.title || props.children || props.icon, -+ onClick, -+ e -+ ); -+ } - }; - - devWarning(!(typeof icon === 'string' && icon.length > 2), 'Button', "`icon` is using ReactNode instead of string naming in v4. Please check `".concat(icon, "` at https://ant.design/components/icon")); diff --git a/desktop/patches/antd+4.16.3.patch b/desktop/patches/antd+4.16.3.patch new file mode 100644 index 000000000..14bdd7281 --- /dev/null +++ b/desktop/patches/antd+4.16.3.patch @@ -0,0 +1,57 @@ +diff --git a/node_modules/antd/es/button/button.js b/node_modules/antd/es/button/button.js +index 28a12c7..13f7382 100644 +--- a/node_modules/antd/es/button/button.js ++++ b/node_modules/antd/es/button/button.js +@@ -193,6 +193,8 @@ var InternalButton = function InternalButton(props, ref) { + }, [loadingOrDelay]); + React.useEffect(fixTwoCNChar, [buttonRef]); + ++ var scope = React.useContext(global.FlipperTrackingScopeContext); ++ + var handleClick = function handleClick(e) { + var _a; + +@@ -204,7 +206,13 @@ var InternalButton = function InternalButton(props, ref) { + return; + } + +- (_a = onClick) === null || _a === void 0 ? void 0 : _a(e); ++ if(onClick !== null && onClick !== void 0) { ++ global.flipperTrackInteraction( ++ 'Button', 'onClick', scope, props.title || props.children || props.icon, ++ onClick, ++ e ++ ); ++ } + }; + + devWarning(!(typeof icon === 'string' && icon.length > 2), 'Button', "`icon` is using ReactNode instead of string naming in v4. Please check `".concat(icon, "` at https://ant.design/components/icon")); +diff --git a/node_modules/antd/es/typography/Link.js b/node_modules/antd/es/typography/Link.js +index 2847840..294ec8d 100644 +--- a/node_modules/antd/es/typography/Link.js ++++ b/node_modules/antd/es/typography/Link.js +@@ -36,12 +36,23 @@ var Link = function Link(_a, ref) { + }); // https://github.com/ant-design/ant-design/issues/26622 + // @ts-ignore + ++ var onClick = React.useCallback((e) => { ++ if (mergedProps.onClick) { ++ return mergedProps.onClick(e); ++ } ++ if (mergedProps.href) { ++ global.flipperOpenLink(mergedProps.href); ++ e.preventDefault(); ++ e.stopPropagation(); ++ }; ++ }, [mergedProps.href, mergedProps.onClick]) + + delete mergedProps.navigate; + return /*#__PURE__*/React.createElement(Base, _extends({}, mergedProps, { + ref: baseRef, + ellipsis: !!ellipsis, +- component: "a" ++ component: "a", ++ onClick: onClick, + })); + }; +