@@ -1418,8 +1502,8 @@ class ExtensionLibrary extends React.PureComponent {
type="button"
className={[
libraryStyles.sidebarButton,
- libraryStyles.sidebarActionButton
- ].join(' ')}
+ libraryStyles.sidebarActionButton,
+ ].join(" ")}
onClick={this.handleCustomExtensionOpen}
>
@@ -1431,13 +1515,13 @@ class ExtensionLibrary extends React.PureComponent {
);
}
- getQuickFilterButtons () {
+ getQuickFilterButtons() {
const quickFilterConfig = [
- ['favorites', messages.quickFavorites],
- ['selected', messages.quickSelected],
- ['compatible', messages.quickCompatible],
- ['native', messages.quickNative],
- ['custom', messages.quickCustom]
+ ["favorites", messages.quickFavorites],
+ ["selected", messages.quickSelected],
+ ["compatible", messages.quickCompatible],
+ ["native", messages.quickNative],
+ ["custom", messages.quickCustom],
];
return quickFilterConfig.map(([key, message]) => (
));
}
- renderEmptyState () {
+ renderEmptyState() {
return (
@@ -1472,25 +1556,27 @@ class ExtensionLibrary extends React.PureComponent {
);
}
- render () {
+ render() {
const library = this.getLibraryItems();
- const {counts, sections} = this.getSections();
+ const { counts, sections } = this.getSections();
return (
this.state.quickFilters[key])
- ].join(':')}
- data={library}
- emptyState={this.renderEmptyState()}
- favorites={this.state.favorites}
- filterQuery={this.state.query}
- filterable
- getItemProps={this.getCardProps}
- headerAction={this.state.selectedItemKeys.length > 0 ? (
+ contentKey={[
+ this.state.query,
+ this.state.selectedSource,
+ ...Object.keys(this.state.quickFilters).filter(
+ (key) => this.state.quickFilters[key],
+ ),
+ ].join(":")}
+ data={library}
+ emptyState={this.renderEmptyState()}
+ favorites={this.state.favorites}
+ filterQuery={this.state.query}
+ filterable
+ getItemProps={this.getCardProps}
+ headerAction={
+ this.state.selectedItemKeys.length > 0 ? (
- ) : null}
- id="extensionLibrary"
- isItemSelectable={this.isItemSelectable}
- isItemSelected={this.isItemSelected}
- persistableKey="favoriteKey"
- quickFilters={this.getQuickFilterButtons()}
- sections={library ? sections : []}
- sidebar={this.getSidebar(counts)}
- title={this.props.intl.formatMessage(messages.extensionTitle)}
- visible={this.props.visible}
- onFavoritesChange={this.handleFavoritesChange}
- onFilterQueryChange={this.handleQueryChange}
- onFilterQueryClear={this.handleClearQuery}
- onItemSelectionToggle={this.handleSelectionToggle}
- onItemSelected={this.handleItemSelect}
+ ) : null
+ }
+ id="extensionLibrary"
+ isItemSelectable={this.isItemSelectable}
+ isItemSelected={this.isItemSelected}
+ persistableKey="favoriteKey"
+ quickFilters={this.getQuickFilterButtons()}
+ sections={library ? sections : []}
+ sidebar={this.getSidebar(counts)}
+ title={this.props.intl.formatMessage(messages.extensionTitle)}
+ visible={this.props.visible}
+ onFavoritesChange={this.handleFavoritesChange}
+ onFilterQueryChange={this.handleQueryChange}
+ onFilterQueryClear={this.handleClearQuery}
+ onItemSelectionToggle={this.handleSelectionToggle}
+ onItemSelected={this.handleItemSelect}
onRequestClose={this.props.onRequestClose}
/>
);
@@ -1541,7 +1628,7 @@ ExtensionLibrary.propTypes = {
onSetSelectedExtension: PropTypes.func,
onSetSelectedExtensions: PropTypes.func,
visible: PropTypes.bool,
- vm: PropTypes.instanceOf(VM).isRequired
+ vm: PropTypes.instanceOf(VM).isRequired,
};
export default injectIntl(ExtensionLibrary);
diff --git a/src/playground/render-interface.jsx b/src/playground/render-interface.jsx
index b5a572d26..ce90f52d4 100644
--- a/src/playground/render-interface.jsx
+++ b/src/playground/render-interface.jsx
@@ -14,67 +14,64 @@
* along with this program. If not, see .
*/
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import {connect} from 'react-redux';
-import {compose} from 'redux';
-import {FormattedMessage, defineMessages, injectIntl, intlShape} from 'react-intl';
-import {getIsLoading} from '../reducers/project-state.js';
-import AppStateHOC from '../lib/app-state-hoc.jsx';
-import ErrorBoundaryHOC from '../lib/error-boundary-hoc.jsx';
-import TWProjectMetaFetcherHOC from '../lib/tw-project-meta-fetcher-hoc.jsx';
-import TWStateManagerHOC from '../lib/tw-state-manager-hoc.jsx';
-import SBFileUploaderHOC from '../lib/sb-file-uploader-hoc.jsx';
-import TWPackagerIntegrationHOC from '../lib/tw-packager-integration-hoc.jsx';
-import SettingsStore from '../addons/settings-store-singleton';
-import '../lib/tw-fix-history-api';
-import GUI from './render-gui.jsx';
-import MenuBar from '../components/menu-bar/menu-bar.jsx';
-import ProjectInput from '../components/tw-project-input/project-input.jsx';
-import FeaturedProjects from '../components/tw-featured-projects/featured-projects.jsx';
-import Description from '../components/tw-description/description.jsx';
-import BrowserModal from '../components/browser-modal/browser-modal.jsx';
-import CloudVariableBadge from '../containers/tw-cloud-variable-badge.jsx';
-import {isBrowserSupported} from '../lib/tw-environment-support-prober';
-import AddonChannels from '../addons/channels';
-import {loadServiceWorker} from './load-service-worker';
-import runAddons from '../addons/entry';
-import InvalidEmbed from '../components/tw-invalid-embed/invalid-embed.jsx';
-import {APP_NAME} from '../lib/brand.js';
-
-import styles from './interface.css';
+import classNames from "classnames";
+import PropTypes from "prop-types";
+import React from "react";
+import { connect } from "react-redux";
+import { compose } from "redux";
+import { FormattedMessage, defineMessages, injectIntl, intlShape } from "react-intl";
+import { getIsLoading } from "../reducers/project-state.js";
+import AppStateHOC from "../lib/app-state-hoc.jsx";
+import ErrorBoundaryHOC from "../lib/error-boundary-hoc.jsx";
+import TWProjectMetaFetcherHOC from "../lib/tw-project-meta-fetcher-hoc.jsx";
+import TWStateManagerHOC from "../lib/tw-state-manager-hoc.jsx";
+import SBFileUploaderHOC from "../lib/sb-file-uploader-hoc.jsx";
+import TWPackagerIntegrationHOC from "../lib/tw-packager-integration-hoc.jsx";
+import SettingsStore from "../addons/settings-store-singleton";
+import "../lib/tw-fix-history-api";
+import GUI from "./render-gui.jsx";
+import MenuBar from "../components/menu-bar/menu-bar.jsx";
+import ProjectInput from "../components/tw-project-input/project-input.jsx";
+import FeaturedProjects from "../components/tw-featured-projects/featured-projects.jsx";
+import Description from "../components/tw-description/description.jsx";
+import BrowserModal from "../components/browser-modal/browser-modal.jsx";
+import CloudVariableBadge from "../containers/tw-cloud-variable-badge.jsx";
+import { isBrowserSupported } from "../lib/tw-environment-support-prober";
+import AddonChannels from "../addons/channels";
+import { loadServiceWorker } from "./load-service-worker";
+import runAddons from "../addons/entry";
+import InvalidEmbed from "../components/tw-invalid-embed/invalid-embed.jsx";
+import { APP_NAME } from "../lib/brand.js";
+import { createPortal } from "react-dom";
+import styles from "./interface.css";
const isInvalidEmbed = window.parent !== window;
-const handleClickAddonSettings = addonId => {
+const handleClickAddonSettings = (addonId) => {
// addonId might be a string of the addon to focus on, undefined, or an event (treat like undefined)
- const path = process.env.ROUTING_STYLE === 'wildcard' ? 'addons' : 'addons.html';
- const url = `${process.env.ROOT}${path}${typeof addonId === 'string' ? `#${addonId}` : ''}`;
+ const path = process.env.ROUTING_STYLE === "wildcard" ? "addons" : "addons.html";
+ const url = `${process.env.ROOT}${path}${typeof addonId === "string" ? `#${addonId}` : ""}`;
window.open(url);
};
const messages = defineMessages({
defaultTitle: {
- defaultMessage: 'Run Scratch projects faster',
- description: 'Title of homepage',
- id: 'tw.guiDefaultTitle'
- }
+ defaultMessage: "Run Scratch projects faster",
+ description: "Title of homepage",
+ id: "tw.guiDefaultTitle",
+ },
});
-const WrappedMenuBar = compose(
- SBFileUploaderHOC,
- TWPackagerIntegrationHOC
-)(MenuBar);
+const WrappedMenuBar = compose(SBFileUploaderHOC, TWPackagerIntegrationHOC)(MenuBar);
if (AddonChannels.reloadChannel) {
- AddonChannels.reloadChannel.addEventListener('message', () => {
+ AddonChannels.reloadChannel.addEventListener("message", () => {
location.reload();
});
}
if (AddonChannels.changeChannel) {
- AddonChannels.changeChannel.addEventListener('message', e => {
+ AddonChannels.changeChannel.addEventListener("message", (e) => {
SettingsStore.setStoreWithVersionCheck(e.data);
});
}
@@ -83,10 +80,10 @@ runAddons();
const handleOpenInEditorFooter = (event) => {
event.preventDefault();
- const projectUrl = new URLSearchParams(location.search).get('project_url');
+ const projectUrl = new URLSearchParams(location.search).get("project_url");
if (projectUrl) {
const editorUrl = `${process.env.ROOT}editor?project_url=${encodeURIComponent(projectUrl)}`;
- window.open(editorUrl, '_blank', 'noopener,noreferrer');
+ window.open(editorUrl, "_blank", "noopener,noreferrer");
}
};
@@ -100,7 +97,7 @@ const Footer = () => (
description="Disclaimer that 02Engine is not connected to Scratch"
id="tw.footer.disclaimer"
values={{
- APP_NAME
+ APP_NAME,
}}
/>
@@ -113,19 +110,15 @@ const Footer = () => (
id="tw.footer.scratchDisclaimer"
values={{
scratchDotOrg: (
-
- {'https://scratch.org/'}
+
+ {"https://scratch.org/"}
- )
+ ),
}}
/>