AG-1053 Tidy react examples, make more idiomatic

2017-11-08 14:45:28 +00:00
parent b030235bbc
commit 983b5974cf
149 changed files with 339 additions and 8856 deletions
--- a/src-examples/richGridExample/SkillsFilter.jsx
+++ b/src-examples/richGridExample/SkillsFilter.jsx
@@ -0,0 +1,126 @@
+import React from 'react';
+import RefData from './RefData';
+
+// the skills filter component. this can be laid out much better in a 'React'
+// way. there are design patterns you can apply to layout out your React classes.
+// however, i'm not worried, as the intention here is to show you ag-Grid
+// working with React, and that's all. i'm not looking for any awards for my
+// React design skills.
+export default class SkillsFilter extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            android: false,
+            css: false,
+            html5: false,
+            mac: false,
+            windows: false
+        };
+    }
+
+    getModel() {
+        return {
+            android: this.state.android,
+            css: this.state.css,
+            html5: this.state.html5,
+            mac: this.state.mac,
+            windows: this.state.windows
+        }
+    }
+
+    setModel(model) {
+        this.setState({
+            android: model ? model.android : null,
+            css: model ? model.css : null,
+            html5: model ? model.html5 : null,
+            mac: model ? model.mac : null,
+            windows: model ? model.windows : null
+        });
+    }
+
+    // called by agGrid
+    doesFilterPass(params) {
+
+        const rowSkills = params.data.skills;
+        let passed = true;
+
+        RefData.IT_SKILLS.forEach((skill) => {
+            if (this.state[skill]) {
+                if (!rowSkills[skill]) {
+                    passed = false;
+                }
+            }
+        });
+
+        return passed;
+    };
+
+    getModel() {
+        return ''
+    }
+
+    // called by agGrid
+    isFilterActive() {
+        const somethingSelected = this.state.android || this.state.css ||
+            this.state.html5 || this.state.mac || this.state.windows;
+        return somethingSelected;
+    };
+
+    onSkillChanged(skill, event) {
+        const newValue = event.target.checked;
+        const newModel = {};
+        newModel[skill] = newValue;
+        // set the state, and once it is done, then call filterChangedCallback
+        this.setState(newModel, this.props.filterChangedCallback);
+    }
+
+    helloFromSkillsFilter() {
+        alert("Hello From The Skills Filter!");
+    }
+
+    render() {
+
+        const skillsTemplates = [];
+        RefData.IT_SKILLS.forEach((skill, index) => {
+
+            const skillName = RefData.IT_SKILLS_NAMES[index];
+            const template = (
+                <label key={skill}
+                       style={{border: '1px solid lightgrey', margin: 4, padding: 4, display: 'inline-block'}}>
+                    <span>
+                        <div style={{textAlign: 'center'}}>{skillName}</div>
+                        <div>
+                            <input type="checkbox" onClick={this.onSkillChanged.bind(this, skill)}/>
+                            <img src={'images/skills/' + skill + '.png'} width={30}/>
+                        </div>
+                    </span>
+                </label>
+            );
+
+            skillsTemplates.push(template);
+        });
+
+        return (
+            <div style={{width: 380}}>
+                <div style={{
+                    textAlign: 'center',
+                    background: 'lightgray',
+                    width: '100%',
+                    display: 'block',
+                    borderBottom: '1px solid grey'
+                }}>
+                    <b>Custom Skills Filter</b>
+                </div>
+                {skillsTemplates}
+            </div>
+        );
+    }
+
+    // these are other method that agGrid calls that we
+    // could of implemented, but they are optional and
+    // we have no use for them in this particular filter.
+    //afterGuiAttached(params) {}
+    //onNewRowsLoaded() {}
+    //onAnyFilterChanged() {}
+}