Merge pull request #178 from TailorDev/checkboxes

[WIP] Support checkboxes/task lists
TailorDev · Aug 18, 2016 · c77c15e · c77c15e
2 parents 8f0fdea + b97cf84
commit c77c15e
Show file tree

Hide file tree

Showing 12 changed files with 320 additions and 25 deletions.
diff --git a/app/components/Editor/__tests__/Editor-test.js b/app/components/Editor/__tests__/Editor-test.js
@@ -22,6 +22,7 @@ describe('<Editor />', () => {
         onUpdateContent={() => {}}
         template={''}
         forceUpdate={false}
+        onClickCheckbox={() => {}}
       />
     );
     expect(wrapper.find(Markdown)).to.have.length(1);
@@ -35,30 +36,12 @@ describe('<Editor />', () => {
         onUpdateContent={() => {}}
         template={''}
         forceUpdate={false}
+        onClickCheckbox={() => {}}
       />
     );
     expect(wrapper.find(Preview)).to.have.length(1);
   });
 
-  it('calls onUpdateContent() when text is entered in Markdown component', () => {
-    const spy = sinon.spy();
-
-    const wrapper = shallow(
-      <Editor
-        loaded
-        content={''}
-        onUpdateContent={spy}
-        template={''}
-        forceUpdate={false}
-      />
-    );
-    const content = 'Hello, World';
-
-    wrapper.find('Markdown').simulate('change', content);
-
-    expect(spy.calledOnce).to.be.true;
-  });
-
   it('renders a Loader component', () => {
     const wrapper = shallow(
       <Editor
@@ -67,6 +50,7 @@ describe('<Editor />', () => {
         onUpdateContent={() => {}}
         template={''}
         forceUpdate={false}
+        onClickCheckbox={() => {}}
       />
     );
 
@@ -81,6 +65,7 @@ describe('<Editor />', () => {
         onUpdateContent={() => {}}
         template={''}
         forceUpdate={false}
+        onClickCheckbox={() => {}}
       />
     );
 
@@ -95,6 +80,7 @@ describe('<Editor />', () => {
         onUpdateContent={() => {}}
         template={''}
         forceUpdate={false}
+        onClickCheckbox={() => {}}
       />
     );
 
@@ -110,6 +96,7 @@ describe('<Editor />', () => {
         onUpdateContent={spy}
         template={''}
         forceUpdate={false}
+        onClickCheckbox={() => {}}
       />
     );
 
@@ -126,6 +113,7 @@ describe('<Editor />', () => {
         onUpdateContent={() => {}}
         template={''}
         forceUpdate={false}
+        onClickCheckbox={() => {}}
       />
     );
     const verticalHandlerWrapper = wrapper.find('VerticalHandler').shallow();
@@ -146,6 +134,7 @@ describe('<Editor />', () => {
         onUpdateContent={() => {}}
         template={''}
         forceUpdate={false}
+        onClickCheckbox={() => {}}
       />
     );
     const verticalHandlerWrapper = wrapper.find('VerticalHandler').shallow();
@@ -172,6 +161,7 @@ describe('<Editor />', () => {
         onUpdateContent={() => {}}
         template={''}
         forceUpdate={false}
+        onClickCheckbox={() => {}}
       />
     );
     const verticalHandlerWrapper = wrapper.find('VerticalHandler').shallow();
@@ -192,6 +182,7 @@ describe('<Editor />', () => {
         onUpdateContent={() => {}}
         template={''}
         forceUpdate={false}
+        onClickCheckbox={() => {}}
       />
     );
     const verticalHandlerWrapper = wrapper.find('VerticalHandler').shallow();

diff --git a/app/components/Editor/index.js b/app/components/Editor/index.js
@@ -1,6 +1,9 @@
 import { connect } from 'react-redux';
 import Editor from './presenter';
-import { updateContent } from '../../modules/documents';
+import {
+  updateContent,
+  toggleTaskListItem,
+} from '../../modules/documents';
 
 
 const mapStateToProps = (state) => {
@@ -18,6 +21,13 @@ const mapDispatchToProps = (dispatch) => ({
   onUpdateContent: (content) => {
     dispatch(updateContent(content));
   },
+  onClickCheckbox: (index) => {
+    const idx = parseInt(index, 10);
+
+    if (!isNaN(idx)) {
+      dispatch(toggleTaskListItem(idx));
+    }
+  },
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(Editor);
diff --git a/app/components/Editor/presenter.jsx b/app/components/Editor/presenter.jsx
@@ -75,6 +75,7 @@ export default class Editor extends Component {
           content={this.props.content}
           position={this.state.position}
           template={this.props.template}
+          onClickCheckbox={this.props.onClickCheckbox}
         />
       </Loader>
     );
@@ -86,5 +87,6 @@ Editor.propTypes = {
   content: PropTypes.string.isRequired,
   template: PropTypes.string.isRequired,
   onUpdateContent: PropTypes.func.isRequired,
+  onClickCheckbox: PropTypes.func.isRequired,
   forceUpdate: PropTypes.bool.isRequired,
 };