Add checkbox to add not on enter key.
--- a/client/src/App.scss Wed Jun 21 14:12:45 2017 +0200
+++ b/client/src/App.scss Thu Jun 22 10:47:10 2017 +0200
@@ -24,15 +24,23 @@
padding-bottom: 10px;
border-bottom: 2px solid #eee;
margin-bottom: 20px;
+ display: flex;
+ align-items: center;
.button {
color: #ccc;
cursor: pointer;
margin-right: 10px;
}
-
.button[data-active="true"] {
color: black;
}
+ > *:last-child {
+ margin-left: auto;
+ .checkbox {
+ display: inline-block;
+ margin-right: 10px;
+ }
+ }
}
.hovering-menu {
--- a/client/src/actions/userActions.js Wed Jun 21 14:12:45 2017 +0200
+++ b/client/src/actions/userActions.js Thu Jun 22 10:47:10 2017 +0200
@@ -8,3 +8,10 @@
lastname
};
}
+
+export const setAutoSubmit = (value) => {
+ return {
+ type: types.USER_TOGGLE_AUTO_SUBMIT,
+ value
+ };
+}
--- a/client/src/components/NoteInput.js Wed Jun 21 14:12:45 2017 +0200
+++ b/client/src/components/NoteInput.js Thu Jun 22 10:47:10 2017 +0200
@@ -1,12 +1,13 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
-import { Form, FormControl, Button, Label } from 'react-bootstrap';
+import { Form, FormControl, Label } from 'react-bootstrap';
import moment from 'moment';
import PropTypes from 'prop-types';
import SlateEditor from './SlateEditor';
import * as notesActions from '../actions/notesActions';
+import * as userActions from '../actions/userActions';
class NoteInput extends Component {
@@ -25,6 +26,7 @@
}
onAddNoteClick = () => {
+
const plain = this.refs.editor.asPlain();
const raw = this.refs.editor.asRaw();
const html = this.refs.editor.asHtml();
@@ -44,6 +46,10 @@
setTimeout(() => this.refs.editor.focus(), 250);
}
+ onCheckboxChange = (e) => {
+ this.props.userActions.setAutoSubmit(e.target.checked);
+ }
+
componentDidMount() {
const text = this.refs.editor.asPlain();
this.setState({ buttonDisabled: text.length === 0 });
@@ -68,7 +74,13 @@
<Form>
<div className="editor">
<div className="editor-left">
- <SlateEditor ref="editor" onChange={this.onEditorChange} onEnterKeyDown={this.onAddNoteClick} />
+ <SlateEditor ref="editor"
+ onChange={this.onEditorChange}
+ onEnterKeyDown={this.onAddNoteClick}
+ onButtonClick={this.onAddNoteClick}
+ onCheckboxChange={this.onCheckboxChange}
+ isChecked={this.props.autoSubmit}
+ isButtonDisabled={this.state.buttonDisabled} />
</div>
<div className="editor-right">
<FormControl
@@ -79,19 +91,21 @@
/>
</div>
</div>
- <Button disabled={this.state.buttonDisabled} bsStyle="primary" type="button" onClick={this.onAddNoteClick}>Add Note</Button>
</Form>
);
}
}
function mapStateToProps(state, props) {
- return {};
+ return {
+ autoSubmit: state.autoSubmit
+ };
}
function mapDispatchToProps(dispatch) {
return {
notesActions: bindActionCreators(notesActions, dispatch),
+ userActions: bindActionCreators(userActions, dispatch),
}
}
--- a/client/src/components/SlateEditor.js Wed Jun 21 14:12:45 2017 +0200
+++ b/client/src/components/SlateEditor.js Thu Jun 22 10:47:10 2017 +0200
@@ -1,6 +1,7 @@
import { Editor, Plain, Raw } from 'slate'
import React from 'react'
import Portal from 'react-portal'
+import { Button } from 'react-bootstrap'
import moment from 'moment'
import Immutable from 'immutable'
import HtmlSerializer from '../HtmlSerializer'
@@ -83,6 +84,7 @@
hoveringMenu: null,
isPortalOpen: false,
categories: Immutable.List([]),
+ isCheckboxChecked: false,
};
}
@@ -197,12 +199,11 @@
onKeyDown = (e, data, state) => {
- if (data.key === 'enter') {
- if (typeof this.props.onEnterKeyDown === 'function') {
- e.preventDefault();
- this.props.onEnterKeyDown();
- return state;
- }
+ if (data.key === 'enter' && this.props.isChecked && typeof this.props.onEnterKeyDown === 'function') {
+ e.preventDefault();
+ this.props.onEnterKeyDown();
+
+ return state;
}
if (!data.isMod) return
@@ -376,6 +377,18 @@
});
}
+ onButtonClick = () => {
+ if (typeof this.props.onButtonClick === 'function') {
+ this.props.onButtonClick();
+ }
+ }
+
+ onCheckboxChange = (e) => {
+ if (typeof this.props.onCheckboxChange === 'function') {
+ this.props.onCheckboxChange(e);
+ }
+ }
+
/**
* Render.
*
@@ -407,6 +420,14 @@
{this.renderBlockButton('numbered-list', 'format_list_numbered')}
{this.renderBlockButton('bulleted-list', 'format_list_bulleted')}
+ <div>
+ <div className="checkbox">
+ <label>
+ <input type="checkbox" checked={this.props.isChecked} onChange={this.onCheckboxChange} /> <kbd>Enter</kbd> = add note
+ </label>
+ </div>
+ <Button bsStyle="primary" disabled={this.props.isButtonDisabled} onClick={this.onButtonClick}>Add note</Button>
+ </div>
</div>
)
}
--- a/client/src/constants/actionTypes.js Wed Jun 21 14:12:45 2017 +0200
+++ b/client/src/constants/actionTypes.js Thu Jun 22 10:47:10 2017 +0200
@@ -16,3 +16,4 @@
export const USER_UPDATE_SETTINGS_ASYNC = 'USER_UPDATE_SETTINGS_ASYNC';
export const USER_UPDATE_SETTINGS = 'USER_UPDATE_SETTINGS'
+export const USER_TOGGLE_AUTO_SUBMIT = 'USER_TOGGLE_AUTO_SUBMIT';
--- a/client/src/reducers/index.js Wed Jun 21 14:12:45 2017 +0200
+++ b/client/src/reducers/index.js Thu Jun 22 10:47:10 2017 +0200
@@ -5,6 +5,7 @@
import notes from './notesReducer';
import { sessions } from './sessionsReducer';
import { isAuthenticated, currentUser, login, token } from './authReducer';
+import { autoSubmit } from './miscReducer';
const rootReducer = combineReducers({
sessions,
@@ -14,6 +15,7 @@
login,
token,
router: routerReducer,
+ autoSubmit
});
export default rootReducer;
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/reducers/miscReducer.js Thu Jun 22 10:47:10 2017 +0200
@@ -0,0 +1,12 @@
+import * as types from '../constants/actionTypes';
+
+export const autoSubmit = (state = false, action) => {
+ switch (action.type) {
+ case types.USER_TOGGLE_AUTO_SUBMIT:
+ return action.value;
+ default:
+ return state;
+ }
+}
+
+
--- a/client/src/store/configureStore.js Wed Jun 21 14:12:45 2017 +0200
+++ b/client/src/store/configureStore.js Thu Jun 22 10:47:10 2017 +0200
@@ -28,6 +28,7 @@
isAuthenticated: false,
currentUser: null,
token: '',
+ autoSubmit: false,
login: Immutable.Map({
loading: false,
success: false,
@@ -43,7 +44,7 @@
const persistOptions = {
storage: localForage,
transforms: [immutableTransform(immutableTransformConfig)],
- whitelist: ['sessions', 'notes', 'isAuthenticated', 'currentUser', 'token', 'offline']
+ whitelist: ['sessions', 'notes', 'isAuthenticated', 'currentUser', 'token', 'offline', 'autoSubmit']
}
const apiClient = new APIClient(config.apiRootUrl);