import React, { PropTypes } from 'react'; import InlineSVG from 'react-inlinesvg'; import classNames from 'classnames'; import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; // import { bindActionCreators } from 'redux'; // import { connect } from 'react-redux'; // import * as PreferencesActions from '../actions/preferences'; const exitUrl = require('../../../images/exit.svg'); const plusUrl = require('../../../images/plus.svg'); const minusUrl = require('../../../images/minus.svg'); const beepUrl = require('../../../sounds/audioAlert.mp3'); // import { debounce } from 'lodash'; class Preferences extends React.Component { constructor(props) { super(props); this.handleUpdateAutosave = this.handleUpdateAutosave.bind(this); this.handleUpdateFont = this.handleUpdateFont.bind(this); this.handleUpdateIndentation = this.handleUpdateIndentation.bind(this); this.handleLintWarning = this.handleLintWarning.bind(this); // this.handleTab = this.handleTab.bind(this); } handleUpdateFont(event) { let value = parseInt(event.target.value, 10); if (isNaN(value)) { value = 16; } this.props.setFontSize(value); } handleUpdateIndentation(event) { let value = parseInt(event.target.value, 10); if (isNaN(value)) { value = 2; } this.props.setIndentation(value); } handleUpdateAutosave(event) { const value = event.target.value === 'true'; this.props.setAutosave(value); } handleLintWarning(event) { const value = event.target.value === 'true'; this.props.setLintWarning(value); } // handleTab(event, TabName) { // this.props.openTab(event, TabName); // } render() { const beep = new Audio(beepUrl); const preferencesContainerClass = classNames({ 'preferences': true, 'preferences--selected': this.props.isVisible }); return (

Settings

General Settings

Sketch Settings

Accessibility

Theme

this.props.setTheme('light')} aria-label="light theme on" name="light theme" id="light-theme-on" className="preference__radio-button" value="light" checked={this.props.theme === 'light'} /> this.props.setTheme('dark')} aria-label="dark theme on" name="dark theme" id="dark-theme-on" className="preference__radio-button" value="dark" checked={this.props.theme === 'dark'} />

Text size

{ this.fontSizeInput = element; }} onClick={() => { this.fontSizeInput.select(); }} >

Indentation amount

{ this.indentationInput = element; }} onClick={() => { this.indentationInput.select(); }} >

Autosave

this.props.setAutosave(true)} aria-label="autosave on" name="autosave" id="autosave-on" className="preference__radio-button" value="On" checked={this.props.autosave} /> this.props.setAutosave(false)} aria-label="autosave off" name="autosave" id="autosave-off" className="preference__radio-button" value="Off" checked={!this.props.autosave} />


Add a p5.js or an external library

Add a script library resource field

Security Protocol

{ this.props.currentUser == null ? null :
{ this.props.setServeSecure(event.target.checked); }} />
}

Serve over HTTPS

Accessible text-based canvas

Used with screen reader
{ this.props.setTextOutput(event.target.checked); }} aria-label="text output on" name="text output" id="text-output-on" className="preference__radio-button" value="On" checked={(this.props.textOutput)} /> { this.props.setGridOutput(event.target.checked); }} aria-label="table output on" name="table output" id="table-output-on" className="preference__radio-button" value="On" checked={(this.props.gridOutput)} />

Lint warning sound

this.props.setLintWarning(true)} aria-label="lint warning on" name="lint warning" id="lint-warning-on" className="preference__radio-button" value="On" checked={this.props.lintWarning} /> this.props.setLintWarning(false)} aria-label="lint warning off" name="lint warning" id="lint-warning-off" className="preference__radio-button" value="Off" checked={!this.props.lintWarning} />
); } } Preferences.propTypes = { isVisible: PropTypes.bool.isRequired, closePreferences: PropTypes.func.isRequired, fontSize: PropTypes.number.isRequired, indentationAmount: PropTypes.number.isRequired, setIndentation: PropTypes.func.isRequired, indentWithSpace: PropTypes.func.isRequired, indentWithTab: PropTypes.func.isRequired, isTabIndent: PropTypes.bool.isRequired, setFontSize: PropTypes.func.isRequired, autosave: PropTypes.bool.isRequired, setAutosave: PropTypes.func.isRequired, textOutput: PropTypes.bool.isRequired, gridOutput: PropTypes.bool.isRequired, // soundOutput: PropTypes.bool.isRequired, setTextOutput: PropTypes.func.isRequired, setGridOutput: PropTypes.func.isRequired, // setSoundOutput: PropTypes.func.isRequired, lintWarning: PropTypes.bool.isRequired, setLintWarning: PropTypes.func.isRequired, // openTab: PropTypes.func.isRequired, theme: PropTypes.string.isRequired, setServeSecure: PropTypes.func.isRequired, currentUser: PropTypes.string, project: PropTypes.shape({ name: PropTypes.string.isRequired, isEditingName: PropTypes.bool, id: PropTypes.string, serveSecure: PropTypes.bool, }).isRequired, setTheme: PropTypes.func.isRequired }; Preferences.defaultProps = { currentUser: undefined }; export default Preferences;