filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-27 19:15:26 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(DownloadExtensionButton): add DownloadExtensionButton component

Browse Source
This commit is contained in:
Aminejv 2021-11-04 16:51:14 +01:00
parent 440802987f
commit 9c6d2f9087
2 changed files with 64 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
components/core/ApplicationUserControls.js
View File

@ -3,10 +3,9 @@ import * as Constants from "~/common/constants";
import * as Styles from "~/common/styles";
import * as UserBehaviors from "~/common/user-behaviors";
import * as Strings from "~/common/strings";
import * as Environment from "~/common/environment";
import * as Utilities from "~/common/utilities";
import { ButtonPrimaryFull, PopoverNavigation } from "~/components/system";
import { PopoverNavigation } from "~/components/system";
import { css } from "@emotion/react";
import { Link } from "~/components/core/Link";
import { Boundary } from "~/components/system/components/fragments/Boundary";
@ -14,6 +13,7 @@ import { H4, P3 } from "~/components/system/components/Typography";
import ProfilePhoto from "~/components/core/ProfilePhoto";
import DataMeter from "~/components/core/DataMeter";
import DownloadExtensionButton from "~/components/core/Extension/DownloadExtensionButton";
const STYLES_HEADER = css`
position: relative;
@ -62,7 +62,7 @@ const STYLES_POPOVER_SECTION = (theme) => css`
}
`;
const STYLES_POPOVER_SECTION_ITEM = (theme) => css`
const STYLES_POPOVER_SECTION_ITEM = css`
position: relative;
width: calc(100% + 16px);
left: -8px;
@ -84,37 +84,6 @@ const STYLES_SECTION_ITEM_HOVER = (theme) => css`
`;
export class ApplicationUserControlsPopup extends React.Component {
state = {
isExtensionDownloaded: false,
};
componentDidMount() {
if (document) {
const isExtensionDownloaded = this._checkIfExtensionIsDownloaded();
this.setState({ isExtensionDownloaded });
}
}
_checkIfExtensionIsDownloaded = () => {
const extensionElement = document.getElementById("browser_extension");
if (!extensionElement) return false;
return extensionElement.className.includes("isDownloaded");
};
_handleExtensionDownloadLink = () => {
const testUserAgent = (regex) => regex.test(window.navigator.userAgent);
const isFirefox = testUserAgent(/firefox/i);
const firefoxLink = Environment.EXTENSION_FIREFOX;
if (isFirefox && firefoxLink) return window.open(firefoxLink, "_blank");
const isSafari = testUserAgent(/safari/i);
const safariLink = Environment.EXTENSION_SAFARI;
if (isSafari && safariLink) return window.open(safariLink, "_blank");
window.open(Environment.EXTENSION_CHROME, "_blank");
};
_handleAction = (props) => {
this.props.onTogglePopup();
this.props.onAction(props);
@ -162,20 +131,6 @@ export class ApplicationUserControlsPopup extends React.Component {
</Link>
);
const ExtensionButton = (
<div css={Styles.MOBILE_HIDDEN}>
<ButtonPrimaryFull
style={{
padding: "5px 24px 7px",
marginTop: "8px",
}}
onClick={this._handleExtensionDownloadLink}
>
Install Slate browser extension
</ButtonPrimaryFull>
</div>
);
const navigation = [
[
{
@ -222,7 +177,13 @@ export class ApplicationUserControlsPopup extends React.Component {
this._handleSignOut(e);
},
},
...(!this.state.isExtensionDownloaded ? [{ text: ExtensionButton }] : []),
{
text: (
<div css={Styles.MOBILE_HIDDEN}>
<DownloadExtensionButton style={{ marginTop: "4px", marginBottom: "28px" }} />
</div>
),
},
],
];

54
components/core/Extension/DownloadExtensionButton.js Normal file
View File

@ -0,0 +1,54 @@
import * as React from "react";
import * as Environment from "~/common/environment";
import * as System from "~/components/system";
import * as Constants from "~/common/constants";
const checkIfExtensionIsDownloaded = () => {
const extensionElement = document.getElementById("browser_extension");
if (!extensionElement) return false;
return extensionElement.className.includes("isDownloaded");
};
const getExtensionBrowserAndLink = () => {
const testUserAgent = (regex) => regex.test(window.navigator.userAgent);
const isFirefox = testUserAgent(/firefox/i);
const firefoxLink = Environment.EXTENSION_FIREFOX;
if (isFirefox && firefoxLink) return { browser: "Firefox", link: firefoxLink };
const isSafari = testUserAgent(/safari/i);
const safariLink = Environment.EXTENSION_SAFARI;
if (isSafari && safariLink) return { browser: "Safari", link: safariLink };
return { browser: "Chrome", link: Environment.EXTENSION_CHROME };
};
export default function DownloadExtensionButton({ hideIfDownloaded = true, style, ...props }) {
const [isExtensionDownloaded, setExtensionDownload] = React.useState(false);
React.useEffect(() => {
if (document && hideIfDownloaded) {
const isExtensionDownloaded = checkIfExtensionIsDownloaded();
setExtensionDownload(isExtensionDownloaded);
}
}, []);
if (isExtensionDownloaded) return null;
const extension = getExtensionBrowserAndLink();
return (
<System.ButtonPrimaryFull
style={{
padding: "0px 12px",
minHeight: "30px",
fontFamily: Constants.font.text,
...style,
}}
onClick={() => window.open(extension.link, "_blank")}
{...props}
>
Install Slate for {extension.browser}
</System.ButtonPrimaryFull>
);
}