批量导入扩展

Author: DDguan2010

src/components/library-item/library-item.css

@@ -240,3 +240,41 @@
 .library-item:hover .favorite-container {
     display: block;
 }
+
+.selection-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    right: 0.75rem;
+    bottom: 0.75rem;
+    cursor: pointer;
+}
+
+.selection-checkbox {
+    width: 22px;
+    height: 22px;
+    border-radius: 6px;
+    border: 2px solid $motion-primary;
+    background: $ui-white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
+}
+
+.selection-active .selection-checkbox {
+    background: $motion-primary;
+}
+
+.selection-checkmark {
+    width: 6px;
+    height: 10px;
+    border-right: 2px solid $ui-white;
+    border-bottom: 2px solid $ui-white;
+    transform: rotate(45deg) translate(-1px, -1px);
+}

src/components/library-item/library-item.jsx

@@ -45,6 +45,19 @@ class LibraryItemComponent extends React.PureComponent {
                 />
             </button>
         );
+        const selectionCheckbox = this.props.isSelectable ? (
+            <button
+                className={classNames(styles.selectionContainer, {
+                    [styles.selectionActive]: this.props.isSelected
+                })}
+                onClick={this.props.onSelectionToggle}
+                title={this.props.isSelected ? 'Cancel selection' : 'Select'}
+            >
+                <span className={styles.selectionCheckbox}>
+                    {this.props.isSelected ? <span className={styles.selectionCheckmark} /> : null}
+                </span>
+            </button>
+        ) : null;
 
         return this.props.featured ? (
             <div
@@ -203,6 +216,7 @@ class LibraryItemComponent extends React.PureComponent {
                 ) : null}
 
                 {favorite}
+                {selectionCheckbox}
             </div>
         ) : (
             <Box
@@ -245,6 +259,7 @@ class LibraryItemComponent extends React.PureComponent {
                 ) : null}
 
                 {favorite}
+                {selectionCheckbox}
             </Box>
         );
     }
@@ -268,6 +283,8 @@ LibraryItemComponent.propTypes = {
     insetIconURL: PropTypes.string,
     internetConnectionRequired: PropTypes.bool,
     isPlaying: PropTypes.bool,
+    isSelectable: PropTypes.bool,
+    isSelected: PropTypes.bool,
     name: PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.node
@@ -290,6 +307,7 @@ LibraryItemComponent.propTypes = {
     onMouseEnter: PropTypes.func.isRequired,
     onMouseLeave: PropTypes.func.isRequired,
     onPlay: PropTypes.func.isRequired,
+    onSelectionToggle: PropTypes.func,
     onStop: PropTypes.func.isRequired,
     showPlayButton: PropTypes.bool
 };

src/components/library/library.css

@@ -61,6 +61,27 @@
     overflow: hidden;
 }
 
+.header-action {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+}
+
+.header-action-button {
+    background: $motion-primary;
+    color: $ui-white;
+    border: none;
+    border-radius: 999px;
+    padding: 0.6rem 1rem;
+    font-size: 0.875rem;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.header-action-button:hover {
+    background: $motion-primary;
+}
+
 .spinner-wrapper {
     width: 100%;
     height: 100%;

src/components/library/library.jsx

@@ -41,6 +41,7 @@ class LibraryComponent extends React.Component {
             'handleFilterClear',
             'handleMouseEnter',
             'handleMouseLeave',
+            'handleItemSelectionToggle',
             'handlePlayingEnd',
             'handleSelect',
             'handleFavorite',
@@ -85,6 +86,11 @@ class LibraryComponent extends React.Component {
         this.handleClose();
         this.props.onItemSelected(this.getFilteredData()[id]);
     }
+    handleItemSelectionToggle (id) {
+        if (this.props.onItemSelectionToggle) {
+            this.props.onItemSelectionToggle(this.getFilteredData()[id]);
+        }
+    }
     readFavoritesFromStorage () {
         let data;
         try {
@@ -290,6 +296,11 @@ class LibraryComponent extends React.Component {
                                 ))}
                             </div>
                         }
+                        {this.props.headerAction ? (
+                            <div className={styles.headerAction}>
+                                {this.props.headerAction}
+                            </div>
+                        ) : null}
                     </div>
                 )}
                 <div
@@ -321,6 +332,8 @@ class LibraryComponent extends React.Component {
                                 insetIconURL={dataItem.insetIconURL}
                                 internetConnectionRequired={dataItem.internetConnectionRequired}
                                 isPlaying={this.state.playingItem === index}
+                                isSelectable={this.props.isItemSelectable && this.props.isItemSelectable(dataItem)}
+                                isSelected={this.props.isItemSelected && this.props.isItemSelected(dataItem)}
                                 key={dataItem.key || (
                                     typeof dataItem.name === 'string' ?
                                         dataItem.name :
@@ -333,6 +346,7 @@ class LibraryComponent extends React.Component {
                                 showPlayButton={this.props.showPlayButton}
                                 onMouseEnter={this.handleMouseEnter}
                                 onMouseLeave={this.handleMouseLeave}
+                                onSelectionToggle={this.handleItemSelectionToggle}
                                 onSelect={this.handleSelect}
                             />
                         )
@@ -379,11 +393,15 @@ LibraryComponent.propTypes = {
         PropTypes.instanceOf(Promise)
     ]),
     filterable: PropTypes.bool,
+    headerAction: PropTypes.node,
     id: PropTypes.string.isRequired,
+    isItemSelectable: PropTypes.func,
+    isItemSelected: PropTypes.func,
     persistableKey: PropTypes.string,
     intl: intlShape.isRequired,
     onItemMouseEnter: PropTypes.func,
     onItemMouseLeave: PropTypes.func,
+    onItemSelectionToggle: PropTypes.func,
     onItemSelected: PropTypes.func,
     onRequestClose: PropTypes.func,
     setStopHandler: PropTypes.func,

src/components/tw-extension-import-modal/extension-import-modal.css

@@ -24,6 +24,13 @@
     color: $text-primary-transparent;
 }
 
+.progressText {
+    margin: -0.75rem 0 1rem 0;
+    line-height: 1.4;
+    font-size: 0.8125rem;
+    color: $text-primary-transparent;
+}
+
 .errorMessage {
     color: $error-primary;
     margin: 0 0 1.5rem 0;
@@ -97,4 +104,4 @@
 .cancelButton:disabled {
     background-color: $ui-tertiary;
     cursor: not-allowed;
-}
+}

src/components/tw-extension-import-modal/extension-import-modal.jsx

@@ -17,6 +17,16 @@ const messages = defineMessages({
         description: 'Description for extension import method selection',
         id: 'tw.extensionImportModal.description'
     },
+    batchDescription: {
+        defaultMessage: 'How would you like to import these {count} extensions?',
+        description: 'Description for batch extension import method selection',
+        id: 'tw.extensionImportModal.batchDescription'
+    },
+    progress: {
+        defaultMessage: 'Importing {current} / {total}',
+        description: 'Progress text shown while importing extensions in batch',
+        id: 'tw.extensionImportModal.progress'
+    },
     normalImport: {
         defaultMessage: 'Normal Import',
         description: 'Button to import extension normally',
@@ -46,9 +56,25 @@ const ExtensionImportModal = props => (
                 <FormattedMessage {...messages.title} />
             </h3>
             <p className={styles.description}>
-                <FormattedMessage {...messages.description} />
+                {props.batchMode ? (
+                    <FormattedMessage {...messages.batchDescription} values={{count: props.itemCount}} />
+                ) : (
+                    <FormattedMessage {...messages.description} />
+                )}
             </p>
 
+            {props.loading && props.batchMode && props.itemCount > 1 ? (
+                <p className={styles.progressText}>
+                    <FormattedMessage
+                        {...messages.progress}
+                        values={{
+                            current: props.progressIndex || 1,
+                            total: props.itemCount
+                        }}
+                    />
+                </p>
+            ) : null}
+
             {props.error && (
                 <div className={styles.errorMessage}>
                     {props.error}
@@ -91,13 +117,16 @@ const ExtensionImportModal = props => (
 );
 
 ExtensionImportModal.propTypes = {
+    batchMode: PropTypes.bool,
     extensionName: PropTypes.string,
+    itemCount: PropTypes.number,
     loading: PropTypes.bool,
     error: PropTypes.string,
     onClose: PropTypes.func,
     onNormalImport: PropTypes.func,
     onTextImport: PropTypes.func,
+    progressIndex: PropTypes.number,
     intl: intlShape.isRequired
 };
 
-export default injectIntl(ExtensionImportModal);
+export default injectIntl(ExtensionImportModal);

src/containers/blocks.jsx

@@ -32,7 +32,8 @@ import {
     openConnectionModal,
     openCustomExtensionModal,
     openExtensionImportMethodModal,
-    setSelectedExtension
+    setSelectedExtension,
+    setSelectedExtensions
 } from '../reducers/modals';
 import { activateCustomProcedures, deactivateCustomProcedures } from '../reducers/custom-procedures';
 import { setConnectionModalExtensionId } from '../reducers/connection-modal';
@@ -199,6 +200,10 @@ class Blocks extends React.Component {
         this.workspace = this.ScratchBlocks.inject(this.blocks, workspaceConfig);
         AddonHooks.blocklyWorkspace = this.workspace;
         this.syncWorkspaceCullingState();
+        window.__twEnableProcedureReturns = () => {
+            this.handleEnableProcedureReturns();
+            this.handleCategorySelected('myBlocks');
+        };
 
         // Register buttons under new callback keys for creating variables,
         // lists, and procedures from extensions.
@@ -346,6 +351,9 @@ class Blocks extends React.Component {
             cancelAnimationFrame(this.toolboxStateSyncFrame);
             this.toolboxStateSyncFrame = null;
         }
+        if (window.__twEnableProcedureReturns) {
+            delete window.__twEnableProcedureReturns;
+        }
         this.workspace.dispose();
 
         // Clear the flyout blocks so that they can be recreated on mount.
@@ -1204,6 +1212,7 @@ class Blocks extends React.Component {
             onOpenCustomExtensionModal,
             onOpenExtensionImportMethodModal,
             onSetSelectedExtension,
+            onSetSelectedExtensions,
             reduxOnOpenCustomExtensionModal,
             updateToolboxState,
             onActivateCustomProcedures,
@@ -1246,6 +1255,7 @@ class Blocks extends React.Component {
                         onOpenCustomExtensionModal={onOpenCustomExtensionModal || reduxOnOpenCustomExtensionModal}
                         onOpenExtensionImportMethodModal={onOpenExtensionImportMethodModal}
                         onSetSelectedExtension={onSetSelectedExtension}
+                        onSetSelectedExtensions={onSetSelectedExtensions}
                     />
                 ) : null}
                 {customProceduresVisible ? (
@@ -1282,6 +1292,7 @@ Blocks.propTypes = {
     onOpenCustomExtensionModal: PropTypes.func,
     onOpenExtensionImportMethodModal: PropTypes.func,
     onSetSelectedExtension: PropTypes.func,
+    onSetSelectedExtensions: PropTypes.func,
     reduxOnOpenCustomExtensionModal: PropTypes.func,
     onRequestCloseCustomProcedures: PropTypes.func,
     onRequestCloseExtensionLibrary: PropTypes.func,
@@ -1359,6 +1370,7 @@ const mapDispatchToProps = dispatch => ({
     reduxOnOpenCustomExtensionModal: () => dispatch(openCustomExtensionModal()),
     onOpenExtensionImportMethodModal: () => dispatch(openExtensionImportMethodModal()),
     onSetSelectedExtension: extension => dispatch(setSelectedExtension(extension)),
+    onSetSelectedExtensions: extensions => dispatch(setSelectedExtensions(extensions)),
     onRequestCloseExtensionLibrary: () => {
         dispatch(closeExtensionLibrary());
     },