add sound selector

2021-12-13 15:35:25 +01:00
parent 59a226f22e
commit 258f0f0841
9 changed files with 110 additions and 3 deletions
@@ -0,0 +1,63 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { setSounds } from "../../actions/generalActions";
+
+import * as Blockly from "blockly/core";
+
+import InputLabel from "@material-ui/core/InputLabel";
+import MenuItem from "@material-ui/core/MenuItem";
+import FormControl from "@material-ui/core/FormControl";
+import Select from "@material-ui/core/Select";
+import Typography from "@material-ui/core/Typography";
+import FormHelperText from "@material-ui/core/FormHelperText";
+
+class SoundsSelector extends Component {
+  componentDidMount() {
+    // Ensure that Blockly.setLocale is adopted in the component.
+    // Otherwise, the text will not be displayed until the next update of the component.
+    this.forceUpdate();
+  }
+
+  render() {
+    return (
+      <div>
+        <Typography style={{ fontWeight: "bold" }}>
+          {Blockly.Msg.settings_sounds}
+        </Typography>
+        <FormHelperText
+          style={{ color: "black", lineHeight: 1.3, marginBottom: "8px" }}
+        >
+          {Blockly.Msg.settings_sounds_text}
+        </FormHelperText>
+        <FormControl>
+          <InputLabel id="demo-simple-select-label">
+            {Blockly.Msg.settings_sounds}
+          </InputLabel>
+          <Select
+            labelId="demo-simple-select-label"
+            id="demo-simple-select"
+            value={this.props.sounds}
+            onChange={(e) => this.props.setSounds(e.target.value)}
+          >
+            <MenuItem value={false}>{Blockly.Msg.settings_ota_off}</MenuItem>
+            <MenuItem value={true}>{Blockly.Msg.settings_ota_on}</MenuItem>
+          </Select>
+        </FormControl>
+      </div>
+    );
+  }
+}
+
+SoundsSelector.propTypes = {
+  setSounds: PropTypes.func.isRequired,
+  language: PropTypes.string.isRequired,
+  sounds: PropTypes.string.isRequired,
+};
+
+const mapStateToProps = (state) => ({
+  sounds: state.general.sounds,
+  language: state.general.language,
+});
+
+export default connect(mapStateToProps, { setSounds })(SoundsSelector);