Merge pull request #515 from smalruby/feat/issue-18-extension-filter

feat: add default hidden functionality to extension library

Author: takaokouji

cspell.json

@@ -5,6 +5,7 @@
     "gapi",
     "googleusercontent",
     "Hira",
+    "mbit",
     "smalrubot"
   ],
   "ignorePaths": [

src/components/koshien-test-modal/koshien-test-modal.css

@@ -21,3 +21,16 @@
     flex: 1;
     min-height: 0;
 }
+
+.reload-button {
+    font-weight: normal;
+    font-size: 0.75rem;
+}
+
+.stop-icon {
+    position: relative;
+    margin: 0.25rem;
+    user-select: none;
+    transform-origin: 50%;
+    transform: rotate(45deg);
+}

src/components/koshien-test-modal/koshien-test-modal.jsx

@@ -1,10 +1,14 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import {defineMessages, injectIntl, intlShape} from 'react-intl';
+import {defineMessages, injectIntl, intlShape, FormattedMessage} from 'react-intl';
 
 import Box from '../box/box.jsx';
+import Button from '../button/button.jsx';
 import Modal from '../../containers/modal.jsx';
 
+import reloadIcon from '../../lib/assets/icon--reload.svg';
+import stopIcon from '../close-button/icon--close.svg';
+
 import styles from './koshien-test-modal.css';
 
 const messages = defineMessages({
@@ -33,16 +37,42 @@ const KoshienTestModal = props => {
         setLoading(false);
     }, []);
 
+    const headerActions = loading ? (
+        <Button
+            className={styles.reloadButton}
+            iconClassName={styles.stopIcon}
+            iconSrc={stopIcon}
+            onClick={handleStop}
+        >
+            <FormattedMessage
+                defaultMessage="Stop"
+                description="Stop button in modal"
+                id="gui.modal.stop"
+            />
+        </Button>
+    ) : (
+        <Button
+            className={styles.reloadButton}
+            iconSrc={reloadIcon}
+            onClick={handleReload}
+        >
+            <FormattedMessage
+                defaultMessage="Reload"
+                description="Reload button in modal"
+                id="gui.modal.reload"
+            />
+        </Button>
+    );
+
     return (
         <Modal
             className={styles.modalContent}
             contentLabel={intl.formatMessage(messages.title)}
             fullScreen
+            headerActions={headerActions}
             headerClassName={styles.header}
             id="koshienTestModal"
             loading={loading}
-            onReload={handleReload}
-            onStop={handleStop}
             onRequestClose={onRequestClose}
         >
             <Box

src/components/library/library.jsx

@@ -199,6 +199,7 @@ class LibraryComponent extends React.Component {
             <Modal
                 fullScreen
                 contentLabel={this.props.title}
+                headerActions={this.props.headerActions}
                 id={this.props.id}
                 onRequestClose={this.handleClose}
             >
@@ -275,6 +276,7 @@ LibraryComponent.propTypes = {
         /* eslint-enable react/no-unused-prop-types, lines-around-comment */
     ),
     filterable: PropTypes.bool,
+    headerActions: PropTypes.node,
     id: PropTypes.string.isRequired,
     intl: intlShape.isRequired,
     onItemMouseEnter: PropTypes.func,

src/components/modal/modal.css

@@ -156,6 +156,20 @@ $sides: 20rem;
     margin-right: -4.75rem;
 }
 
+/* Header actions (generic) */
+.header-item-actions {
+    padding: 0;
+    z-index: 1;
+}
+
+[dir="ltr"] .header-item-actions {
+    margin-left: -4.75rem;
+}
+
+[dir="rtl"] .header-item-actions {
+    margin-right: -4.75rem;
+}
+
 .reload-button {
     font-weight: normal;
     font-size: 0.75rem;

src/components/modal/modal.jsx

@@ -10,8 +10,6 @@ import CloseButton from '../close-button/close-button.jsx';
 
 import backIcon from '../../lib/assets/icon--back.svg';
 import helpIcon from '../../lib/assets/icon--help.svg';
-import reloadIcon from '../../lib/assets/icon--reload.svg';
-import stopIcon from '../close-button/icon--close.svg';
 
 import styles from './modal.css';
 
@@ -66,46 +64,16 @@ const ModalComponent = props => (
                     ) : null}
                     {props.contentLabel}
                 </div>
-                {props.loading && props.onStop ? (
+                {props.headerActions ? (
                     <div
                         className={classNames(
                             styles.headerItem,
-                            styles.headerItemReload
+                            styles.headerItemActions
                         )}
                     >
-                        <Button
-                            className={styles.reloadButton}
-                            iconClassName={styles.stopIcon}
-                            iconSrc={stopIcon}
-                            onClick={props.onStop}
-                        >
-                            <FormattedMessage
-                                defaultMessage="Stop"
-                                description="Stop button in modal"
-                                id="gui.modal.stop"
-                            />
-                        </Button>
+                        {props.headerActions}
                     </div>
-                ) : (props.onReload ? (
-                    <div
-                        className={classNames(
-                            styles.headerItem,
-                            styles.headerItemReload
-                        )}
-                    >
-                        <Button
-                            className={styles.reloadButton}
-                            iconSrc={reloadIcon}
-                            onClick={props.onReload}
-                        >
-                            <FormattedMessage
-                                defaultMessage="Reload"
-                                description="Reload button in modal"
-                                id="gui.modal.reload"
-                            />
-                        </Button>
-                    </div>
-                ) : null)}
+                ) : null}
                 <div
                     className={classNames(
                         styles.headerItem,
@@ -150,13 +118,12 @@ ModalComponent.propTypes = {
         PropTypes.object
     ]).isRequired,
     fullScreen: PropTypes.bool,
+    headerActions: PropTypes.node,
     headerClassName: PropTypes.string,
     headerImage: PropTypes.string,
     isRtl: PropTypes.bool,
     loading: PropTypes.bool,
     onHelp: PropTypes.func,
-    onReload: PropTypes.func,
-    onStop: PropTypes.func,
     onRequestClose: PropTypes.func
 };
 

src/containers/extension-library.css

@@ -0,0 +1,25 @@
+@import "../components/modal/modal.css";
+
+.show-all-extensions-label {
+    display: flex;
+    align-items: center;
+    font-size: 0.75rem;
+    font-weight: normal;
+    cursor: pointer;
+    user-select: none;
+    color: $ui-white;
+    white-space: nowrap;
+    padding: 1rem;
+}
+
+.show-all-extensions-checkbox {
+    cursor: pointer;
+}
+
+[dir="ltr"] .show-all-extensions-checkbox {
+    margin-right: 0.5rem;
+}
+
+[dir="rtl"] .show-all-extensions-checkbox {
+    margin-left: 0.5rem;
+}

src/containers/extension-library.jsx

@@ -2,13 +2,18 @@ import bindAll from 'lodash.bindall';
 import PropTypes from 'prop-types';
 import React from 'react';
 import VM from 'scratch-vm';
-import {defineMessages, injectIntl, intlShape} from 'react-intl';
+import {connect} from 'react-redux';
+import {defineMessages, injectIntl, intlShape, FormattedMessage} from 'react-intl';
 
 import extensionLibraryContent from '../lib/libraries/extensions/index.jsx';
 
 import LibraryComponent from '../components/library/library.jsx';
 import extensionIcon from '../components/action-menu/icon--sprite.svg';
 
+import {toggleShowAllExtensions} from '../reducers/extension-filter';
+
+import styles from './extension-library.css';
+
 const messages = defineMessages({
     extensionTitle: {
         defaultMessage: 'Choose an Extension',
@@ -37,9 +42,13 @@ class ExtensionLibrary extends React.PureComponent {
             }
         });
         bindAll(this, [
-            'handleItemSelect'
+            'handleItemSelect',
+            'handleToggleShowAllExtensions'
         ]);
     }
+    handleToggleShowAllExtensions (event) {
+        this.props.onToggleShowAllExtensions(event.target.checked);
+    }
     handleItemSelect (item) {
         const id = item.extensionId;
         let url = item.extensionURL ? item.extensionURL : id;
@@ -62,18 +71,54 @@ class ExtensionLibrary extends React.PureComponent {
         const extensionsParam = query.get('extensions') || '';
         const showMeshV2 = extensionsParam.split(',').includes('meshV2');
 
+        const showAllExtensionsParam = query.get('showAllExtensions');
+        const showAllExtensions = showAllExtensionsParam === 'true' ? true :
+            showAllExtensionsParam === 'false' ? false :
+                this.props.showAllExtensions;
+
         const extensionLibraryThumbnailData = extensionLibraryContent
-            .filter(extension => (
-                extension.extensionId !== 'meshV2' || showMeshV2
-            ))
+            .filter(extension => {
+                if (extension.extensionId === 'meshV2' && !showMeshV2) {
+                    return false;
+                }
+                if (!showAllExtensions && extension.defaultHidden) {
+                    return false;
+                }
+                return true;
+            })
             .map(extension => ({
                 rawURL: extension.iconURL || extensionIcon,
                 ...extension
             }));
+
+        const checkboxLabel = this.props.intl.formatMessage({
+            defaultMessage: 'Show all extensions',
+            description: 'Checkbox label to show all extensions including hidden ones',
+            id: 'gui.extensionLibrary.showAllExtensions'
+        });
+
+        const headerActions = (
+            <label className={styles.showAllExtensionsLabel}>
+                <input
+                    aria-label={checkboxLabel}
+                    checked={showAllExtensions}
+                    className={styles.showAllExtensionsCheckbox}
+                    type="checkbox"
+                    onChange={this.handleToggleShowAllExtensions}
+                />
+                <FormattedMessage
+                    defaultMessage="Show all extensions"
+                    description="Checkbox label to show all extensions including hidden ones"
+                    id="gui.extensionLibrary.showAllExtensions"
+                />
+            </label>
+        );
+
         return (
             <LibraryComponent
                 data={extensionLibraryThumbnailData}
                 filterable={false}
+                headerActions={headerActions}
                 id="extensionLibrary"
                 title={this.props.intl.formatMessage(messages.extensionTitle)}
                 visible={this.props.visible}
@@ -88,8 +133,21 @@ ExtensionLibrary.propTypes = {
     intl: intlShape.isRequired,
     onCategorySelected: PropTypes.func,
     onRequestClose: PropTypes.func,
+    onToggleShowAllExtensions: PropTypes.func,
+    showAllExtensions: PropTypes.bool,
     visible: PropTypes.bool,
     vm: PropTypes.instanceOf(VM).isRequired // eslint-disable-line react/no-unused-prop-types
 };
 
-export default injectIntl(ExtensionLibrary);
+const mapStateToProps = state => ({
+    showAllExtensions: state.scratchGui.extensionFilter.showAllExtensions
+});
+
+const mapDispatchToProps = dispatch => ({
+    onToggleShowAllExtensions: showAll => dispatch(toggleShowAllExtensions(showAll))
+});
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(injectIntl(ExtensionLibrary));

src/containers/library-item.jsx

@@ -157,7 +157,7 @@ LibraryItem.propTypes = {
             md5ext: PropTypes.string // 3.0 library format
         })
     ),
-    id: PropTypes.number.isRequired,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     insetIconURL: PropTypes.string,
     internetConnectionRequired: PropTypes.bool,
     isPlaying: PropTypes.bool,