Style the docs, standard lint

Author: nadbm

docs/src/examples/ComponentSheet.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import Select from 'react-select'
 import _ from 'lodash'
-import Datasheet from '../lib/DataSheet' 
+import Datasheet from '../lib/DataSheet'
 
 export default class ComponentSheet extends React.Component {
   constructor (props) {
@@ -49,32 +49,31 @@ export default class ComponentSheet extends React.Component {
     let rows = [
       [{readOnly: true, colSpan: 2, value: 'Shopping List'}],
       [
-        {readOnly: true, value: ''}, 
-        { 
-          value: 'Grocery Item', 
+        {readOnly: true, value: ''},
+        {
+          value: 'Grocery Item',
           component: (
-            <div className={'add-grocery'}> Grocery List 
-              <div className={'add-button'} onClick={()=>{console.log("add");this.setState({items: this.state.items+1})}}> add item</div> 
+            <div className={'add-grocery'}> Grocery List
+              <div className={'add-button'} onClick={() => { console.log('add'); this.setState({items: this.state.items + 1}) }}> add item</div>
             </div>
-          ), 
+          ),
           forceComponent: true
         }]
     ]
     rows = rows.concat(_.range(1, this.state.items + 1).map(id => [{readOnly: true, value: `Item ${id}`}, {value: groceryValue(id), component: component(id)}]))
-    
+
     rows = rows.concat([[{readOnly: true, value: 'Total'}, {readOnly: true, value: `${total.toFixed(2)} $`}]])
     console.log(rows)
     return rows
   }
 
-
   render () {
     return (
       <Datasheet
         data={this.generateGrid()}
         valueRenderer={(cell) => cell.value}
-        onChange={()=>{}}
+        onChange={() => {}}
       />
     )
   }
-}
+}

docs/src/examples/CustomRendererSheet.js

@@ -1,16 +1,15 @@
 import React, { PureComponent } from 'react'
-import { DragDropContextProvider } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
+import { DragDropContextProvider } from 'react-dnd'
+import HTML5Backend from 'react-dnd-html5-backend'
 import Select from 'react-select'
 
-import DataSheet from '../lib';
+import DataSheet from '../lib'
 import {ENTER_KEY, TAB_KEY} from '../lib/keys'
 
 import {
   colDragSource, colDropTarget,
-  rowDragSource, rowDropTarget,
-} from './drag-drop.js';
-
+  rowDragSource, rowDropTarget
+} from './drag-drop.js'
 
 const Header = colDropTarget(colDragSource((props) => {
   const { col, connectDragSource, connectDropTarget, isOver } = props
@@ -22,8 +21,8 @@ const Header = colDropTarget(colDragSource((props) => {
 }))
 
 class SheetRenderer extends PureComponent {
-  render() {
-    const { className, columns, onColumnDrop } = this.props;
+  render () {
+    const { className, columns, onColumnDrop } = this.props
     return (
       <table className={className}>
         <thead>
@@ -45,18 +44,18 @@ class SheetRenderer extends PureComponent {
 }
 
 const RowRenderer = rowDropTarget(rowDragSource((props) => {
-  const { isOver, children, connectDropTarget, connectDragPreview, connectDragSource } = props;
-  const className = isOver ? 'drop-target' : '';
+  const { isOver, children, connectDropTarget, connectDragPreview, connectDragSource } = props
+  const className = isOver ? 'drop-target' : ''
   return connectDropTarget(connectDragPreview(
     <tr className={className}>
-      { connectDragSource(<td className='cell read-only row-handle' key='$$actionCell'> </td>)}
+      { connectDragSource(<td className='cell read-only row-handle' key='$$actionCell' />)}
       { children }
     </tr>
   ))
 }))
 
 class SelectEditor extends PureComponent {
-  constructor(props) {
+  constructor (props) {
     super(props)
     this.handleChange = this.handleChange.bind(this)
     this.handleKeyDown = this.handleKeyDown.bind(this)
@@ -70,6 +69,7 @@ class SelectEditor extends PureComponent {
     }
     const { e } = this.state
     onCommit(opt.value, e)
+    console.log('COMMITTED', opt.value)
   }
 
   handleKeyDown (e) {
@@ -82,7 +82,7 @@ class SelectEditor extends PureComponent {
     }
   }
 
-  render() {
+  render () {
     return (
       <Select
         autoFocus
@@ -96,21 +96,21 @@ class SelectEditor extends PureComponent {
           {label: '2', value: 2},
           {label: '3', value: 3},
           {label: '4', value: 4},
-          {label: '5', value: 5},
+          {label: '5', value: 5}
         ]}
       />
     )
   }
 }
 
 class RangeEditor extends PureComponent {
-  constructor(props) {
+  constructor (props) {
     super(props)
     this.handleChange = this.handleChange.bind(this)
   }
 
-  componentDidMount() {
-    this._input.focus();
+  componentDidMount () {
+    this._input.focus()
   }
 
   handleChange (e) {
@@ -138,11 +138,10 @@ const FillViewer = props => {
   const { value } = props
   return (
     <div style={{width: '100%'}}>
-      {[1,2,3,4,5].map(v => {
+      {[1, 2, 3, 4, 5].map(v => {
         const backgroundColor = v > value ? 'transparent' : '#007eff'
         return (
-          <div key={v} style={{float: 'left', width: '20%', height: '17px', backgroundColor}}>
-          </div>
+          <div key={v} style={{float: 'left', width: '20%', height: '17px', backgroundColor}} />
         )
       })}
     </div>
@@ -151,7 +150,7 @@ const FillViewer = props => {
 
 class CustomRendererSheet extends PureComponent {
   constructor (props) {
-    super(props);
+    super(props)
     this.state = {
       columns: [
         { label: 'Style', width: '40%' },
@@ -174,7 +173,7 @@ class CustomRendererSheet extends PureComponent {
         [{ value: 'Pale Mild Ale'}, { value: '10 - 20'}, { value: '6 - 9'}, { value: 3, dataEditor: SelectEditor }],
         [{ value: 'Dark Mild Ale'}, { value: '10 - 24'}, { value: '17 - 34'}, { value: 3, dataEditor: SelectEditor }],
         [{ value: 'Brown Ale'}, { value: '12 - 25'}, { value: '12 - 17'}, { value: 3, dataEditor: SelectEditor }]
-      ]
+      ].map((a, i) => a.map((cell, j) => Object.assign(cell, {key: `${i}-${j}`})))
     }
 
     this.handleColumnDrop = this.handleColumnDrop.bind(this)
@@ -184,24 +183,24 @@ class CustomRendererSheet extends PureComponent {
     this.renderRow = this.renderRow.bind(this)
   }
 
-  handleColumnDrop(from, to) {
-    const columns = [...this.state.columns];
-    columns.splice(to, 0, ...columns.splice(from, 1));
+  handleColumnDrop (from, to) {
+    const columns = [...this.state.columns]
+    columns.splice(to, 0, ...columns.splice(from, 1))
     const grid = this.state.grid.map(r => {
-      const row = [...r];
-      row.splice(to, 0, ...row.splice(from, 1));
-      return row;
-    });
-    this.setState({ columns, grid });
+      const row = [...r]
+      row.splice(to, 0, ...row.splice(from, 1))
+      return row
+    })
+    this.setState({ columns, grid })
   }
 
-  handleRowDrop(from, to) {
-    const grid = [ ...this.state.grid ];
-    grid.splice(to, 0, ...grid.splice(from, 1));
-    this.setState({ grid });
+  handleRowDrop (from, to) {
+    const grid = [ ...this.state.grid ]
+    grid.splice(to, 0, ...grid.splice(from, 1))
+    this.setState({ grid })
   }
 
-  handleChange(modifiedCell, i, j, value) {
+  handleChange (modifiedCell, i, j, value) {
     this.setState((prevState) => {
       const grid = [...prevState.grid]
       grid[i] = [...grid[i]]
@@ -219,7 +218,7 @@ class CustomRendererSheet extends PureComponent {
     return <RowRenderer rowIndex={row} onRowDrop={this.handleRowDrop} {...rest} />
   }
 
-  render() {
+  render () {
     return (
       <DragDropContextProvider backend={HTML5Backend}>
         <DataSheet
@@ -230,7 +229,7 @@ class CustomRendererSheet extends PureComponent {
           onChange={this.handleChange}
         />
       </DragDropContextProvider>
-    );
+    )
   }
 }
 

docs/src/examples/OverrideEverythingSheet.js

@@ -1,10 +1,10 @@
 import React, { PureComponent } from 'react'
-import DataSheet from '../lib';
+import DataSheet from '../lib'
 
 import './override-everything.css'
 
 const SheetRenderer = props => {
-  const {as: Tag, headerAs: Header, bodyAs: Body, rowAs: Row, cellAs: Cell, 
+  const {as: Tag, headerAs: Header, bodyAs: Body, rowAs: Row, cellAs: Cell,
     className, columns, selections, onSelectAllChanged} = props
   return (
     <Tag className={className}>
@@ -65,7 +65,6 @@ const CellRenderer = props => {
   )
 }
 
-
 export default class OverrideEverythingSheet extends PureComponent {
   constructor (props) {
     super(props)
@@ -87,20 +86,20 @@ export default class OverrideEverythingSheet extends PureComponent {
         { label: 'Rating', width: '20%' }
       ],
       grid: [
-        [{ value: 'Ordinary Bitter'}, { value: '20 - 35'}, { value: '5 - 12'}, { value: 4, attributes: {'data-foo': 'bar'} }],
-        [{ value: 'Special Bitter'}, { value: '28 - 40'}, { value: '6 - 14'}, { value: 4 }],
-        [{ value: 'ESB'}, { value: '30 - 45'}, { value: '6 - 14'}, { value: 5 }],
-        [{ value: 'Scottish Light'}, { value: '9 - 20'}, { value: '6 - 15'}, { value: 3 }],
-        [{ value: 'Scottish Heavy'}, { value: '12 - 20'}, { value: '8 - 30'}, { value: 4 }],
-        [{ value: 'Scottish Export'}, { value: '15 - 25'}, { value: '9 - 19'}, { value: 4 }],
-        [{ value: 'English Summer Ale'}, { value: '20 - 30'}, { value: '3 - 7'}, { value: 3 }],
-        [{ value: 'English Pale Ale'}, { value: '20 - 40'}, { value: '5 - 12'}, { value: 4 }],
-        [{ value: 'English IPA'}, { value: '35 - 63'}, { value: '6 - 14'}, { value: 4 }],
-        [{ value: 'Strong Ale'}, { value: '30 - 65'}, { value: '8 - 21'}, { value: 4 }],
-        [{ value: 'Old Ale'}, { value: '30 -65'}, { value: '12 - 30'}, { value: 4 }],
-        [{ value: 'Pale Mild Ale'}, { value: '10 - 20'}, { value: '6 - 9'}, { value: 3 }],
-        [{ value: 'Dark Mild Ale'}, { value: '10 - 24'}, { value: '17 - 34'}, { value: 3 }],
-        [{ value: 'Brown Ale'}, { value: '12 - 25'}, { value: '12 - 17'}, { value: 3 }]
+        [{ value: 'Ordinary Bitter' }, { value: '20 - 35' }, { value: '5 - 12' }, { value: 4, attributes: {'data-foo': 'bar' } }],
+        [{ value: 'Special Bitter' }, { value: '28 - 40' }, { value: '6 - 14' }, { value: 4 }],
+        [{ value: 'ESB' }, { value: '30 - 45' }, { value: '6 - 14' }, { value: 5 }],
+        [{ value: 'Scottish Light' }, { value: '9 - 20' }, { value: '6 - 15' }, { value: 3 }],
+        [{ value: 'Scottish Heavy' }, { value: '12 - 20' }, { value: '8 - 30' }, { value: 4 }],
+        [{ value: 'Scottish Export' }, { value: '15 - 25' }, { value: '9 - 19' }, { value: 4 }],
+        [{ value: 'English Summer Ale' }, { value: '20 - 30' }, { value: '3 - 7' }, { value: 3 }],
+        [{ value: 'English Pale Ale' }, { value: '20 - 40' }, { value: '5 - 12' }, { value: 4 }],
+        [{ value: 'English IPA' }, { value: '35 - 63' }, { value: '6 - 14' }, { value: 4 }],
+        [{ value: 'Strong Ale' }, { value: '30 - 65' }, { value: '8 - 21' }, { value: 4 }],
+        [{ value: 'Old Ale' }, { value: '30 -65' }, { value: '12 - 30' }, { value: 4 }],
+        [{ value: 'Pale Mild Ale' }, { value: '10 - 20' }, { value: '6 - 9' }, { value: 3 }],
+        [{ value: 'Dark Mild Ale' }, { value: '10 - 24' }, { value: '17 - 34' }, { value: 3 }],
+        [{ value: 'Brown Ale' }, { value: '12 - 25' }, { value: '12 - 17' }, { value: 3 }]
       ],
       selections: [false, false, false, false, false, false, false, false, false, false, false, false, false, false]
     }
@@ -121,7 +120,7 @@ export default class OverrideEverythingSheet extends PureComponent {
     this.setState({selections})
   }
 
-  handleChange(modifiedCell, i, j, value) {
+  handleChange (modifiedCell, i, j, value) {
     this.setState((prevState) => {
       const grid = [...prevState.grid]
       grid[i] = [...grid[i]]
@@ -165,7 +164,7 @@ export default class OverrideEverythingSheet extends PureComponent {
     }
   }
 
-  render() {
+  render () {
     return (
       <div>
         <div>
@@ -189,8 +188,8 @@ export default class OverrideEverythingSheet extends PureComponent {
           cellRenderer={this.cellRenderer}
           onChange={this.handleChange}
           valueRenderer={(cell) => cell.value}
-        />        
+        />
       </div>
     )
   }
-}
+}