feat: Checkboxes instead of contenteditable div

Author: finom

package.json

@@ -88,6 +88,6 @@
     "eslint-plugin-promise": "^3.0.0",
     "eslint-plugin-react": "^6.4.1",
     "eslint-plugin-standard": "^2.0.1",
-    "matreshka": "^2.0.0-beta.2"
+    "matreshka": "^2.0.0-beta.3"
   }
 }

src/index.js

@@ -69,7 +69,8 @@ module.exports = new class Application extends MatreshkaObject {
 
                 console.log(results);
             },
-            'change:parserName': () => setParser(this.parserName)
+            'change:parserName': () => setParser(this.parserName),
+            'rules@modify': evt => console.log('tablo')
         });
     }
 }

src/lint/configs/index.js

@@ -2,10 +2,11 @@ const names = ['airbnb', 'eslint', 'google', 'standard'];
 const configs = [];
 
 for(const name of names) {
-    configs.push({
-        name,
-        config: require(`./eslint-config-${name}.json`)
-    });
+    const config = {
+        ...require(`./eslint-config-${name}.json`)
+    };
+
+    configs.push({ name, config });
 }
 
 export default configs;

src/rules/index.js

@@ -33,8 +33,8 @@ export default class Rules extends MatreshkaArray {
     toJSON() {
         const result = {};
         for(const group of this) {
-            for(const { ruleName, value } of group) {
-                result[group.getFullRuleName(ruleName, group.name)] = value;
+            for(const { ruleName, value, isOn } of group) {
+                result[group.getFullRuleName(ruleName, group.name)] = isOn ? value : 0;
             }
         }
 

src/rules/rule.js

@@ -0,0 +1,45 @@
+import MatreshkaObject from 'matreshka/object';
+//import prop from 'matreshka/binders/prop';
+
+export default class Rule extends MatreshkaObject {
+    renderer = `<label title="{{ dynamicValueJSON }}">
+        <input type="checkbox" checked="{{ isOn }}"> {{ ruleName }}
+    </label>`;
+    constructor(data) {
+        super(data)
+            .calc({
+                value: {
+                    source: 'valueJSON',
+                    handler: value => value ? JSON.parse(value) : 0
+                },
+                isOn: {
+                    source: 'value',
+                    handler: value => {
+                        const v = value instanceof Array ? value[0] : value;
+                        return v !== 0 && v !== 'off';
+                    }
+                },
+                dynamicValue: {
+                    source: ['value', 'isOn'],
+                    handler: (value, isOn) => {
+                        const [errorLevel, ...settings] = value instanceof Array ? value : [value];
+                        let newErrorLevel;
+
+                        if(!isOn) {
+                            newErrorLevel = 'off';
+                        } else if(errorLevel === 'off' || errorLevel === 0) {
+                            newErrorLevel = 'error';
+                        } else {
+                            newErrorLevel = errorLevel;
+                        }
+
+                        return settings.length ? [newErrorLevel, ...settings] : newErrorLevel;
+                    }
+                },
+                dynamicValueJSON: {
+                    source: 'dynamicValue',
+                    handler: value => JSON.stringify(value, null, '\t')
+                }
+            });
+    }
+}

src/rules/rules-group.js

@@ -1,25 +1,23 @@
 import MatreshkaArray from 'matreshka/array';
-import chain from 'matreshka/chain';
-import html from 'matreshka/binders/html';
+import Rule from './rule';
 
 export default class RulesGroup extends MatreshkaArray {
+    Model = Rule;
+
     renderer = `<fieldset>
         <legend>{{ name }}</legend>
         <div class="rules-list"></div>
     </fieldset>`;
-    itemRenderer = `<label>
-        {{ ruleName }}: <code contenteditable class="value-json"></code>
-    </label>`
+
     constructor(plugin) {
         super()
             .set(plugin);
 
         const { plugin: { rules } } = plugin;
         for(const ruleName of Object.keys(rules)) {
-            //console.log(rules);
             this.push({
                 ruleName,
-                value: 0
+                value: 'off'
             });
         }
     }
@@ -29,11 +27,4 @@ export default class RulesGroup extends MatreshkaArray {
             .bindNode('container', ':sandbox .rules-list')
             .rerender();
     }
-
-    onItemRender(item) {
-        chain(item)
-            .calc('valueJSON', 'value', value => JSON.stringify(value, null, '\t'))
-            .calc('value', 'valueJSON', value => value ? JSON.parse(value) : 0)
-            .bindNode('valueJSON', ':sandbox .value-json', html());
-    }
 }