Merge branch 'develop' into feature/click-to-add

package.json

@@ -23,7 +23,7 @@
     "react-dom": "^15"
   },
   "devDependencies": {
-    "autoprefixer": "6.7.7",
+    "autoprefixer": "7.1.0",
     "babel-core": "^6.23.1",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^7.0.0",
@@ -32,11 +32,11 @@
     "babel-preset-react": "^6.22.0",
     "classnames": "2.2.5",
     "copy-webpack-plugin": "4.0.1",
-    "css-loader": "0.28.0",
+    "css-loader": "0.28.1",
     "eslint": "^3.16.1",
     "eslint-config-scratch": "^3.0.0",
-    "eslint-plugin-react": "^6.10.0",
-    "gh-pages": "^0.12.0",
+    "eslint-plugin-react": "^7.0.1",
+    "gh-pages": "^1.0.0",
     "html-webpack-plugin": "2.28.0",
     "lodash.bindall": "4.4.0",
     "lodash.defaultsdeep": "4.6.0",
@@ -45,17 +45,17 @@
     "lodash.pick": "4.4.0",
     "minilog": "3.1.0",
     "mkdirp": "^0.5.1",
-    "postcss-import": "9.1.0",
-    "postcss-loader": "1.3.3",
-    "postcss-simple-vars": "3.1.0",
-    "prop-types": "15.5.8",
+    "postcss-import": "^10.0.0",
+    "postcss-loader": "^2.0.5",
+    "postcss-simple-vars": "^4.0.0",
+    "prop-types": "^15.5.10",
     "react": "15.5.4",
     "react-dom": "15.5.4",
     "react-draggable": "2.2.6",
     "react-modal": "1.7.7",
-    "react-redux": "5.0.4",
+    "react-redux": "5.0.5",
     "react-style-proptype": "3.0.0",
-    "react-tabs": "0.8.3",
+    "react-tabs": "1.0.0",
     "redux": "3.6.0",
     "redux-throttle": "0.1.1",
     "rimraf": "^2.6.1",
@@ -64,7 +64,7 @@
     "scratch-render": "^0.1.0-prerelease.0",
     "scratch-storage": "^0.1.0",
     "scratch-vm": "^0.1.0-prerelease.0",
-    "style-loader": "0.16.1",
+    "style-loader": "^0.17.0",
     "svg-to-image": "1.1.3",
     "svg-url-loader": "2.0.2",
     "travis-after-all": "^1.4.4",

src/components/gui/gui.css

@@ -47,7 +47,7 @@
     border-bottom: 0 !important;
 }
 
-.tab-list .tab {
+.tab {
     flex-grow: 1;
     height: 80%;
     margin-left: 1px;
@@ -63,9 +63,9 @@
     align-items: center;
 }
 
-
-.tab-list .tab[aria-selected="true"] {
+.tab.is-selected {
     color: #40B9F5;
+    background-color: #FFFFFF;
 }
 
 .tabs {
@@ -80,6 +80,10 @@
     position: relative;
     flex-grow: 1;
     flex-shrink: 0;
+    display: none;
+}
+
+.tab-panel.is-selected {
     display: flex;
 }
 

src/components/gui/gui.jsx

+const classNames = require('classnames');
 const PropTypes = require('prop-types');
 const React = require('react');
+const {Tab, Tabs, TabList, TabPanel} = require('react-tabs');
+const tabStyles = require('react-tabs/style/react-tabs.css');
 const VM = require('scratch-vm');
+
 const Blocks = require('../../containers/blocks.jsx');
 const CostumeTab = require('../../containers/costume-tab.jsx');
 const GreenFlag = require('../../containers/green-flag.jsx');
@@ -8,12 +12,13 @@ const TargetPane = require('../../containers/target-pane.jsx');
 const SoundTab = require('../../containers/sound-tab.jsx');
 const Stage = require('../../containers/stage.jsx');
 const StopAll = require('../../containers/stop-all.jsx');
-const MenuBar = require('../menu-bar/menu-bar.jsx');
-const {Tab, Tabs, TabList, TabPanel} = require('react-tabs');
 
 const Box = require('../box/box.jsx');
+const MenuBar = require('../menu-bar/menu-bar.jsx');
+
 const styles = require('./gui.css');
 
+
 const GUIComponent = props => {
     const {
         basePath,
@@ -31,6 +36,15 @@ const GUIComponent = props => {
         );
     }
 
+    const tabClassNames = {
+        tabs: styles.tabs,
+        tab: classNames(tabStyles.reactTabsTab, styles.tab),
+        tabList: classNames(tabStyles.reactTabsTabList, styles.tabList),
+        tabPanel: classNames(tabStyles.reactTabsTabPanel, styles.tabPanel),
+        tabPanelSelected: classNames(tabStyles.reactTabsTabPanelSelected, styles.isSelected),
+        tabSelected: classNames(tabStyles.reactTabsTabSelected, styles.isSelected)
+    };
+
     return (
         <Box
             className={styles.pageWrapper}
@@ -41,16 +55,18 @@ const GUIComponent = props => {
                 <Box className={styles.flexWrapper}>
                     <Box className={styles.editorWrapper}>
                         <Tabs
-                            className={styles.tabs}
+                            className={tabClassNames.tabs}
                             forceRenderTabPanel={true} // eslint-disable-line react/jsx-boolean-value
+                            selectedTabClassName={tabClassNames.tabSelected}
+                            selectedTabPanelClassName={tabClassNames.tabPanelSelected}
                             onSelect={onTabSelect}
                         >
-                            <TabList className={styles.tabList}>
-                                <Tab className={styles.tab}>Scripts</Tab>
-                                <Tab className={styles.tab}>Costumes</Tab>
-                                <Tab className={styles.tab}>Sounds</Tab>
+                            <TabList className={tabClassNames.tabList}>
+                                <Tab className={tabClassNames.tab}>Scripts</Tab>
+                                <Tab className={tabClassNames.tab}>Costumes</Tab>
+                                <Tab className={tabClassNames.tab}>Sounds</Tab>
                             </TabList>
-                            <TabPanel className={styles.tabPanel}>
+                            <TabPanel className={tabClassNames.tabPanel}>
                                 <Box className={styles.blocksWrapper}>
                                     <Blocks
                                         grow={1}
@@ -62,10 +78,10 @@ const GUIComponent = props => {
                                     />
                                 </Box>
                             </TabPanel>
-                            <TabPanel className={styles.tabPanel}>
+                            <TabPanel className={tabClassNames.tabPanel}>
                                 <CostumeTab vm={vm} />
                             </TabPanel>
-                            <TabPanel className={styles.tabPanel}>
+                            <TabPanel className={tabClassNames.tabPanel}>
                                 <SoundTab vm={vm} />
                             </TabPanel>
                         </Tabs>

src/containers/costume-tab.jsx

@@ -23,28 +23,25 @@ class CostumeTab extends React.Component {
         this.state = {selectedCostumeIndex: 0};
     }
 
+    componentWillReceiveProps (nextProps) {
+        const {
+            editingTarget,
+            sprites,
+            stage
+        } = nextProps;
+
+        const target = editingTarget && sprites[editingTarget] ? sprites[editingTarget] : stage;
+        if (target && target.costumes && this.state.selectedCostumeIndex > target.costumes.length - 1) {
+            this.setState({selectedCostumeIndex: target.costumes.length - 1});
+        }
+    }
+
     handleSelectCostume (costumeIndex) {
         this.setState({selectedCostumeIndex: costumeIndex});
     }
 
     handleDeleteCostume (costumeIndex) {
-        // @todo the VM should handle all of this logic
-        const {editingTarget} = this.props.vm;
-
-        if (costumeIndex === editingTarget.currentCostume) {
-            editingTarget.setCostume(costumeIndex - 1);
-        }
-
-        editingTarget.sprite.costumes = editingTarget.sprite.costumes
-            .slice(0, costumeIndex)
-            .concat(editingTarget.sprite.costumes.slice(costumeIndex + 1));
-        this.props.vm.runtime.requestTargetsUpdate(editingTarget);
-        // @todo not sure if this is getting redrawn correctly
-        this.props.vm.runtime.requestRedraw();
-
-        this.setState({
-            selectedCostumeIndex: this.state.selectedCostumeIndex % editingTarget.sprite.costumes.length
-        });
+        this.props.vm.deleteCostume(costumeIndex);
     }
 
     render () {

src/containers/sound-tab.jsx

@@ -23,6 +23,20 @@ class SoundTab extends React.Component {
         this.state = {selectedSoundIndex: 0};
     }
 
+    componentWillReceiveProps (nextProps) {
+        const {
+            editingTarget,
+            sprites,
+            stage
+        } = nextProps;
+
+        const target = editingTarget && sprites[editingTarget] ? sprites[editingTarget] : stage;
+
+        if (target && target.sounds && this.state.selectedSoundIndex > target.sounds.length - 1) {
+            this.setState({selectedSoundIndex: target.sounds.length - 1});
+        }
+    }
+
     handleSelectSound (soundIndex) {
         const sound = this.props.vm.editingTarget.sprite.sounds[soundIndex];
         this.props.vm.editingTarget.audioPlayer.playSound(sound.md5);
@@ -30,17 +44,7 @@ class SoundTab extends React.Component {
     }
 
     handleDeleteSound (soundIndex) {
-        // @todo the VM should handle all of this logic
-        const {editingTarget} = this.props.vm;
-        editingTarget.sprite.sounds = editingTarget.sprite.sounds
-            .slice(0, soundIndex)
-            .concat(editingTarget.sprite.sounds.slice(soundIndex + 1));
-        this.props.vm.emitTargetsUpdate();
-        this.props.vm.runtime.requestRedraw();
-
-        this.setState({
-            selectedSoundIndex: this.state.selectedSoundIndex % editingTarget.sprite.sounds.length
-        });
+        this.props.vm.deleteSound(soundIndex);
     }
 
     render () {

src/lib/blocks.js

@@ -9,7 +9,9 @@ module.exports = function (vm) {
                 {
                     type: 'field_dropdown',
                     name: name,
-                    options: start.concat(menuOptionsFn())
+                    options: function () {
+                        return start.concat(menuOptionsFn());
+                    }
                 }
             ],
             inputsInline: true,