p5.js-web-editor/client/modules/IDE/components/Preferences.js

131 lines
4.4 KiB
JavaScript
Raw Normal View History

import React, { PropTypes } from 'react';
import InlineSVG from 'react-inlinesvg';
import classNames from 'classnames';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as PreferencesActions from '../actions/preferences';
2016-06-23 22:29:55 +00:00
const exitUrl = require('../../../images/exit.svg');
const plusUrl = require('../../../images/plus.svg');
const minusUrl = require('../../../images/minus.svg');
function Preferences(props) {
const preferencesContainerClass = classNames({
preferences: true,
'preferences--selected': props.isVisible
});
2016-07-11 02:52:48 +00:00
let preferencesTabOptionClass = classNames({
preference__option: true,
'preference__option--selected': props.isTabIndent
});
let preferencesSpaceOptionClass = classNames({
preference__option: true,
'preference__option--selected': !props.isTabIndent
});
return (
2016-07-14 21:20:44 +00:00
<section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
<div className="preferences__heading">
<h2 className="preferences__title">Preferences</h2>
2016-07-15 20:47:12 +00:00
<button
className="preferences__exit-button"
onClick={props.closePreferences}
title="exit"
2016-07-31 02:46:48 +00:00
aria-label="exit preferences"
2016-07-15 20:47:12 +00:00
>
<InlineSVG src={exitUrl} alt="Exit Preferences" />
</button>
2016-06-23 22:29:55 +00:00
</div>
2016-07-06 15:27:39 +00:00
<div className="preference">
2016-07-06 15:27:39 +00:00
<h4 className="preference__title">Text Size</h4>
2016-07-15 20:47:12 +00:00
<button
className="preference__plus-button"
onClick={props.decreaseFont}
2016-07-31 02:46:48 +00:00
aria-label="decrease font size"
2016-07-15 20:47:12 +00:00
>
<InlineSVG src={minusUrl} alt="Decrease Font Size" />
2016-07-11 02:52:48 +00:00
<h6 className="preference__label">Decrease</h6>
</button>
2016-07-13 19:23:48 +00:00
<input
className="preference__value"
aria-live="status"
aria-live="polite"
role="status"
value={props.fontSize}
onChange={props.updateFont}
>
</input>
2016-07-15 20:47:12 +00:00
<button
className="preference__minus-button"
onClick={props.increaseFont}
2016-07-31 02:46:48 +00:00
aria-label="increase font size"
2016-07-15 20:47:12 +00:00
>
<InlineSVG src={plusUrl} alt="Increase Font Size" />
2016-07-11 02:52:48 +00:00
<h6 className="preference__label">Increase</h6>
</button>
</div>
2016-07-06 15:27:39 +00:00
<div className="preference">
<h4 className="preference__title">Indentation Amount</h4>
2016-07-15 20:47:12 +00:00
<button
className="preference__plus-button"
onClick={props.decreaseIndentation}
2016-07-31 02:46:48 +00:00
aria-label="decrease indentation amount"
2016-07-15 20:47:12 +00:00
>
<InlineSVG src={minusUrl} alt="DecreaseIndentation Amount" />
2016-07-11 02:52:48 +00:00
<h6 className="preference__label">Decrease</h6>
2016-07-06 15:27:39 +00:00
</button>
2016-07-13 19:23:48 +00:00
<input
className="preference__value"
aria-live="status"
aria-live="polite"
role="status"
value={props.indentationAmount}
onChange={props.updateIndentation}
>
</input>
2016-07-15 20:47:12 +00:00
<button
className="preference__minus-button"
onClick={props.increaseIndentation}
2016-07-31 02:46:48 +00:00
aria-label="increase indentation amount"
2016-07-15 20:47:12 +00:00
>
<InlineSVG src={plusUrl} alt="IncreaseIndentation Amount" />
2016-07-11 02:52:48 +00:00
<h6 className="preference__label">Increase</h6>
2016-07-06 15:27:39 +00:00
</button>
2016-07-11 12:44:27 +00:00
<div className="preference__vertical-list">
2016-07-31 02:46:48 +00:00
<button className={preferencesSpaceOptionClass} onClick={props.indentWithSpace} aria-label="indentation with space">Spaces</button>
<button className={preferencesTabOptionClass} onClick={props.indentWithTab} aria-label="indentation with tab">Tabs</button>
2016-07-11 12:44:27 +00:00
</div>
2016-07-06 15:27:39 +00:00
</div>
2016-07-14 21:20:44 +00:00
</section>
);
2016-06-23 22:29:55 +00:00
}
function mapStateToProps(state) {
return {
...state.preferences
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(PreferencesActions, dispatch);
}
Preferences.propTypes = {
isVisible: PropTypes.bool.isRequired,
closePreferences: PropTypes.func.isRequired,
decreaseFont: PropTypes.func.isRequired,
2016-07-11 00:13:37 +00:00
updateFont: PropTypes.func.isRequired,
fontSize: PropTypes.number.isRequired,
2016-07-06 15:27:39 +00:00
increaseFont: PropTypes.func.isRequired,
indentationAmount: PropTypes.number.isRequired,
decreaseIndentation: PropTypes.func.isRequired,
2016-07-11 00:13:37 +00:00
increaseIndentation: PropTypes.func.isRequired,
2016-07-11 02:52:48 +00:00
updateIndentation: PropTypes.func.isRequired,
indentWithSpace: PropTypes.func.isRequired,
indentWithTab: PropTypes.func.isRequired,
isTabIndent: PropTypes.bool.isRequired
};
export default connect(mapStateToProps, mapDispatchToProps)(Preferences);