diff --git a/src/components/asset-panel/selector.jsx b/src/components/asset-panel/selector.jsx index d0d076bab5b9be6ecc64a152cb8e3f6954021106..b2c278bbec9c8b2a900cb8efbe0dc9df4f2ec0bb 100644 --- a/src/components/asset-panel/selector.jsx +++ b/src/components/asset-panel/selector.jsx @@ -27,8 +27,8 @@ const Selector = props => { <Box className={styles.listArea}> {items.map((item, index) => ( <SpriteSelectorItem + assetId={item.assetId} className={styles.listItem} - costumeURL={item.url} id={index} key={`asset-${index}`} name={item.name} diff --git a/src/components/sprite-selector/sprite-selector.jsx b/src/components/sprite-selector/sprite-selector.jsx index df48343745100b55e7f2a1334681b0aec65c3e58..3410c75809e683e67f664d11b01049f003fd0855 100644 --- a/src/components/sprite-selector/sprite-selector.jsx +++ b/src/components/sprite-selector/sprite-selector.jsx @@ -53,17 +53,15 @@ const SpriteSelectorComponent = function (props) { {Object.keys(sprites) // Re-order by list order .sort((id1, id2) => sprites[id1].order - sprites[id2].order) - .map(id => ( + .map(id => sprites[id]) + .map(sprite => ( <SpriteSelectorItem + assetId={sprite.costume && sprite.costume.assetId} className={styles.sprite} - costumeURL={ - sprites[id].costume && - sprites[id].costume.url - } - id={id} - key={id} - name={sprites[id].name} - selected={id === selectedId} + id={sprite.id} + key={sprite.id} + name={sprite.name} + selected={sprite.id === selectedId} onClick={onSelectSprite} onDeleteButtonClick={onDeleteSprite} /> diff --git a/src/containers/sprite-selector-item.jsx b/src/containers/sprite-selector-item.jsx index a9182996e171321066dc8cf52233816b32b6aa4f..dacac38e152a7d9b6f13848dc258d4d344bc4c81 100644 --- a/src/containers/sprite-selector-item.jsx +++ b/src/containers/sprite-selector-item.jsx @@ -2,6 +2,8 @@ const bindAll = require('lodash.bindall'); const PropTypes = require('prop-types'); const React = require('react'); +const {connect} = require('react-redux'); + const SpriteSelectorItemComponent = require('../components/sprite-selector-item/sprite-selector-item.jsx'); class SpriteSelectorItem extends React.Component { @@ -40,6 +42,7 @@ class SpriteSelectorItem extends React.Component { } SpriteSelectorItem.propTypes = { + assetId: PropTypes.string, costumeURL: PropTypes.string, id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), name: PropTypes.string, @@ -48,4 +51,10 @@ SpriteSelectorItem.propTypes = { selected: PropTypes.bool }; -module.exports = SpriteSelectorItem; +const mapStateToProps = (state, {assetId}) => ({ + costumeURL: assetId && state.vm.runtime.storage.get(assetId).encodeDataURI() +}); + +module.exports = connect( + mapStateToProps +)(SpriteSelectorItem); diff --git a/src/containers/stage-selector.jsx b/src/containers/stage-selector.jsx index d37a4437c51d2c6c8b6b631005fc5a938e3f7256..9b4b83d0d7a3efcdd98697915af2da8c51ba6a62 100644 --- a/src/containers/stage-selector.jsx +++ b/src/containers/stage-selector.jsx @@ -2,6 +2,8 @@ const bindAll = require('lodash.bindall'); const PropTypes = require('prop-types'); const React = require('react'); +const {connect} = require('react-redux'); + const StageSelectorComponent = require('../components/stage-selector/stage-selector.jsx'); class StageSelector extends React.Component { @@ -18,6 +20,7 @@ class StageSelector extends React.Component { render () { const { /* eslint-disable no-unused-vars */ + assetId, id, onSelect, /* eslint-enable no-unused-vars */ @@ -36,4 +39,12 @@ StageSelector.propTypes = { id: PropTypes.string, onSelect: PropTypes.func }; -module.exports = StageSelector; + +const mapStateToProps = (state, {assetId}) => ({ + url: assetId && state.vm.runtime.storage.get(assetId).encodeDataURI() +}); + +module.exports = connect( + mapStateToProps, + () => ({}) // omit dispatch prop +)(StageSelector);