Reduce linting complexity

Author: jakezatecky

.eslintrc

@@ -1,7 +1,6 @@
 {
   "extends": "takiyon-react",
   "env": {
-    "browser": true,
     "node": true
   },
   "settings": {
@@ -10,9 +9,5 @@
         "config": "webpack.test.config.js"
       }
     }
-  },
-  "rules": {
-    "react/destructuring-assignment": "off",
-    "react/jsx-sort-props": "off"
   }
 }

examples/.eslintrc

@@ -1,4 +1,8 @@
 {
+  "env": {
+    "browser": true,
+    "node": false
+  },
   "rules": {
     "import/no-extraneous-dependencies": ["error", {
       "devDependencies": true

examples/src/js/ClickableLabelsExample.js

@@ -124,9 +124,9 @@ class ClickExample extends React.Component {
             <div className="clickable-labels">
                 <CheckboxTree
                     checked={checked}
+                    expandOnClick
                     expanded={expanded}
                     nodes={nodes}
-                    expandOnClick
                     onCheck={this.onCheck}
                     onClick={this.onClick}
                     onExpand={this.onExpand}

examples/src/js/FilterExample.js

@@ -120,8 +120,10 @@ class FilterExample extends React.Component {
     }
 
     filterTree() {
+        const { filterText } = this.state;
+
         // Reset nodes back to unfiltered state
-        if (!this.state.filterText) {
+        if (!filterText) {
             this.setState((prevState) => ({
                 nodesFiltered: prevState.nodes,
             }));

src/js/CheckboxTree.js

@@ -109,7 +109,6 @@ class CheckboxTree extends React.Component {
         this.combineMemorized = memoize((icons1, icons2) => ({ ...icons1, ...icons2 })).bind(this);
     }
 
-    // eslint-disable-next-line react/sort-comp
     static getDerivedStateFromProps(newProps, prevState) {
         const { model, prevProps } = prevState;
         const { disabled, id, nodes } = newProps;
@@ -138,20 +137,22 @@ class CheckboxTree extends React.Component {
 
     onCheck(nodeInfo) {
         const { checkModel, noCascade, onCheck } = this.props;
-        const model = this.state.model.clone();
-        const node = model.getNode(nodeInfo.value);
+        const { model } = this.state;
+        const newModel = model.clone();
+        const node = newModel.getNode(nodeInfo.value);
 
-        model.toggleChecked(nodeInfo, nodeInfo.checked, checkModel, noCascade);
-        onCheck(model.serializeList('checked'), { ...node, ...nodeInfo });
+        newModel.toggleChecked(nodeInfo, nodeInfo.checked, checkModel, noCascade);
+        onCheck(newModel.serializeList('checked'), { ...node, ...nodeInfo });
     }
 
     onExpand(nodeInfo) {
         const { onExpand } = this.props;
-        const model = this.state.model.clone();
-        const node = model.getNode(nodeInfo.value);
+        const { model } = this.state;
+        const newModel = model.clone();
+        const node = newModel.getNode(nodeInfo.value);
 
-        model.toggleNode(nodeInfo.value, 'expanded', nodeInfo.expanded);
-        onExpand(model.serializeList('expanded'), { ...node, ...nodeInfo });
+        newModel.toggleNode(nodeInfo.value, 'expanded', nodeInfo.expanded);
+        onExpand(newModel.serializeList('expanded'), { ...node, ...nodeInfo });
     }
 
     onNodeClick(nodeInfo) {
@@ -172,16 +173,18 @@ class CheckboxTree extends React.Component {
 
     expandAllNodes(expand = true) {
         const { onExpand } = this.props;
+        const { model } = this.state;
 
         onExpand(
-            this.state.model.clone()
+            model.clone()
                 .expandAllNodes(expand)
                 .serializeList('expanded'),
         );
     }
 
     determineShallowCheckState(node, noCascade) {
-        const flatNode = this.state.model.getNode(node.value);
+        const { model } = this.state;
+        const flatNode = model.getNode(node.value);
 
         if (flatNode.isLeaf || noCascade || node.children.length === 0) {
             // Note that an empty parent node tracks its own state
@@ -200,14 +203,18 @@ class CheckboxTree extends React.Component {
     }
 
     isEveryChildChecked(node) {
+        const { model } = this.state;
+
         return node.children.every(
-            (child) => this.state.model.getNode(child.value).checkState === 1,
+            (child) => model.getNode(child.value).checkState === 1,
         );
     }
 
     isSomeChildChecked(node) {
+        const { model } = this.state;
+
         return node.children.some(
-            (child) => this.state.model.getNode(child.value).checkState > 0,
+            (child) => model.getNode(child.value).checkState > 0,
         );
     }
 
@@ -258,11 +265,11 @@ class CheckboxTree extends React.Component {
                     expanded={flatNode.expanded}
                     icon={node.icon}
                     icons={this.combineMemorized(defaultIcons, icons)}
+                    isLeaf={flatNode.isLeaf}
+                    isParent={flatNode.isParent}
                     label={node.label}
                     lang={lang}
                     optimisticToggle={optimisticToggle}
-                    isLeaf={flatNode.isLeaf}
-                    isParent={flatNode.isParent}
                     showCheckbox={showCheckbox}
                     showNodeIcon={showNodeIcon}
                     title={showNodeTitle ? node.title || node.label : node.title}

src/js/TreeNode.js

@@ -202,10 +202,10 @@ class TreeNode extends React.PureComponent {
                 {clickable ? (
                     <span
                         className="rct-node-clickable"
-                        onClick={this.onClick}
-                        onKeyPress={this.onClick}
                         role="button"
                         tabIndex={0}
+                        onClick={this.onClick}
+                        onKeyPress={this.onClick}
                     >
                         {children}
                     </span>
@@ -233,8 +233,8 @@ class TreeNode extends React.PureComponent {
                     disabled={disabled}
                     id={inputId}
                     indeterminate={checked === 2}
-                    onClick={this.onCheck}
                     onChange={() => {}}
+                    onClick={this.onCheck}
                 />
                 <span
                     aria-checked={checked === 1}
@@ -256,10 +256,10 @@ class TreeNode extends React.PureComponent {
                 <span
                     key={1}
                     className="rct-node-clickable"
-                    onClick={this.onClick}
-                    onKeyPress={this.onClick}
                     role="link"
                     tabIndex={0}
+                    onClick={this.onClick}
+                    onKeyPress={this.onClick}
                 >
                     {children}
                 </span>
@@ -290,11 +290,13 @@ class TreeNode extends React.PureComponent {
     }
 
     renderChildren() {
-        if (!this.props.expanded) {
+        const { children, expanded } = this.props;
+
+        if (!expanded) {
             return null;
         }
 
-        return this.props.children;
+        return children;
     }
 
     render() {

test/.eslintrc

@@ -3,7 +3,6 @@
     "mocha": true
   },
   "rules": {
-    "import/no-extraneous-dependencies": ["error", {"devDependencies": ["**/*.js"]}],
     "react/jsx-props-no-spreading": "off"
   }
 }

test/CheckboxTree.js

@@ -757,14 +757,14 @@ describe('<CheckboxTree />', () => {
             const makeEmptyParentNode = (checked) => (
                 mount(
                     <CheckboxTree
+                        checked={checked}
                         nodes={[
                             {
                                 value: 'jupiter',
                                 label: 'Jupiter',
                                 children: [],
                             },
                         ]}
-                        checked={checked}
                         onCheck={(node) => {
                             actualChecked = node;
                         }}