-
- {children}
-
-
+ {children}
+
- {props.onHelp ? (
+
+
- {props.children}
-
+ {props.onHelp ? (
+
-
+
+
+ ) : null}
-
+ ) : null}
+ {props.contentLabel}
- ) : null}
-
- {props.headerImage ? (
- 
- ) : null}
- {props.contentLabel}
-
-
- {props.fullScreen ? (
-
- ) : (
-
{props.number}
- )}
- {props.costumeURL ? (
-
-
- {props.onDuplicateButtonClick ? (
-
+
+ {props.onDuplicateButtonClick ? (
+
+ ) : null}
+ {props.onExportButtonClick ? (
+
+ ) : null}
+ {props.onRenameButtonClick ? (
+
+ ) : null}
+ {props.onDeleteButtonClick ? (
+
+
+ ) : null}
+
+ ) : null}
+
+ );
+}
SpriteSelectorItem.propTypes = {
className: PropTypes.string,
@@ -116,4 +149,12 @@ SpriteSelectorItem.propTypes = {
selected: PropTypes.bool.isRequired
};
-export default SpriteSelectorItem;
+const mapStateToProps = (state) => {
+ return {
+ animPref: state.scratchGui.addonUtil.editorAnimPref,
+ };
+};
+
+export default connect(
+ mapStateToProps
+)(SpriteSelectorItem);
diff --git a/src/containers/extension-library.jsx b/src/containers/extension-library.jsx
index 4ffd582d0c5..2d4b936b5c9 100644
--- a/src/containers/extension-library.jsx
+++ b/src/containers/extension-library.jsx
@@ -214,6 +214,7 @@ class ExtensionLibrary extends React.PureComponent {
id="extensionLibrary"
actor="ExtensionLibrary"
header={"Extensions"}
+ kind="extension"
title={this.props.intl.formatMessage(messages.extensionTitle)}
visible={this.props.visible}
onItemSelected={this.handleItemSelect}
diff --git a/src/containers/sprite-selector-item.jsx b/src/containers/sprite-selector-item.jsx
index 1d601b8cebe..dd45d64a213 100644
--- a/src/containers/sprite-selector-item.jsx
+++ b/src/containers/sprite-selector-item.jsx
@@ -91,7 +91,7 @@ class SpriteSelectorItem extends React.PureComponent {
}
}
handleDelete (e) {
- e.stopPropagation(); // To prevent from bubbling back to handleClick
+ if (e) e.stopPropagation(); // To prevent from bubbling back to handleClick
this.props.onDeleteButtonClick(this.props.id);
}
handleDuplicate (e) {
diff --git a/src/reducers/addon-util.js b/src/reducers/addon-util.js
index 9d5c2df08a4..376cc20be65 100644
--- a/src/reducers/addon-util.js
+++ b/src/reducers/addon-util.js
@@ -1,7 +1,9 @@
const SET_SOUND_EDITOR_WAVEFORM_CHUNK_SIZE = 'scratch-gui/addon-util/SET_SOUND_EDITOR_WAVEFORM_CHUNK_SIZE';
+const SET_EDITOR_ANIM_PREF = 'scratch-gui/addon-util/SET_EDITOR_ANIM_PREF';
const initialState = {
soundEditorWaveformChunkSize: 1024,
+ editorAnimPref: 'default'
};
const reducer = function (state, action) {
@@ -11,6 +13,10 @@ const reducer = function (state, action) {
return {
soundEditorWaveformChunkSize: action.chunkSize
};
+ case SET_EDITOR_ANIM_PREF:
+ return {
+ editorAnimPref: action.animPref
+ };
default:
return state;
}
@@ -23,8 +29,16 @@ const setSoundEditorWaveformChunkSize = function (chunkSize) {
};
};
+const setEditorAnimPref = function (preference) {
+ return {
+ type: SET_EDITOR_ANIM_PREF,
+ animPref: preference
+ };
+};
+
export {
reducer as default,
initialState as addonUtilInitialState,
- setSoundEditorWaveformChunkSize
+ setSoundEditorWaveformChunkSize,
+ setEditorAnimPref
};
\ No newline at end of file
- 
+
+
+const SpriteSelectorItem = props => {
+ const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+ const animOut = props.animPref == "none" ? 0 : 150; // ms
+ const [visible, setVisible] = useState(true); // provides a clear way to check visibility
+ const waitOut = useRef(null);
+ const onReqCloseRef = useRef(props.onDeleteButtonClick);
+
+ useEffect(() => {
+ onReqCloseRef.current = props.onDeleteButtonClick;
+ }, [props.onDeleteButtonClick]);
+
+ useEffect(() => {
+ const waitIn = setTimeout(() => setVisible(true), 0); // you could add an "in" delay here but it just doesn't feel right
+ return () => {
+ clearTimeout(waitIn);
+ if (waitOut.current) clearTimeout(waitOut.current);
+ };
+ }, []);
+
+ const onDelete = useCallback(() => {
+ setVisible(false); // animate out
+ waitOut.current = setTimeout(() => {
+ console.log('SpriteSelectorItem: onDelete');
+ if (onReqCloseRef.current) onReqCloseRef.current(); // delete sprite after animating out
+ }, animOut);
+ }, []);
+
+ return (
+
+ {typeof props.number === 'undefined' ? null : (
+
- ) : null}
- {props.number}
+ )}
+ {props.costumeURL ? (
+
+
-
+
+
-
- {(props.selected && props.onDeleteButtonClick) ? (
- {props.name}
- {props.details ? (
- {props.details}
) : null}
-
+
-
- ) : null }
-
- ) : null}
-
-);
+
+ {(props.selected && props.onDeleteButtonClick) ? (
+ {props.name}
+ {props.details ? (
+ {props.details}
) : null}
- {props.onExportButtonClick ? (
-
- ) : null }
- {props.onRenameButtonClick ? (
-
- ) : null}
- {props.onDeleteButtonClick ? (
-