🐎 Check whether component should be updated

qilin-editor · Sep 13, 2017 · 728fdac · 728fdac
1 parent 3caf0de
commit 728fdac
Show file tree

Hide file tree

Showing 18 changed files with 103 additions and 181 deletions.
diff --git a/src/scripts/components/Alert/Failure.jsx b/src/scripts/components/Alert/Failure.jsx
@@ -1,8 +1,8 @@
-import React, { Component } from "react";
+import React, { PureComponent } from "react";
 import PropTypes from "prop-types";
 import ReactSVG from "react-svg";
 
-class AlertFailure extends Component {
+class AlertFailure extends PureComponent {
     static propTypes = {
         index: PropTypes.number.isRequired,
         message: PropTypes.string.isRequired,

diff --git a/src/scripts/components/Alert/Info.jsx b/src/scripts/components/Alert/Info.jsx
@@ -1,8 +1,8 @@
-import React, { Component } from "react";
+import React, { PureComponent } from "react";
 import PropTypes from "prop-types";
 import ReactSVG from "react-svg";
 
-class AlertInfo extends Component {
+class AlertInfo extends PureComponent {
     static propTypes = {
         index: PropTypes.number.isRequired,
         message: PropTypes.string.isRequired,

diff --git a/src/scripts/components/Alert/Success.jsx b/src/scripts/components/Alert/Success.jsx
@@ -1,8 +1,8 @@
-import React, { Component } from "react";
+import React, { PureComponent } from "react";
 import PropTypes from "prop-types";
 import ReactSVG from "react-svg";
 
-class AlertSuccess extends Component {
+class AlertSuccess extends PureComponent {
     static propTypes = {
         index: PropTypes.number.isRequired,
         message: PropTypes.string.isRequired,

diff --git a/src/scripts/components/App.jsx b/src/scripts/components/App.jsx
@@ -1,11 +1,11 @@
-import React, { Component } from "react";
+import React, { PureComponent } from "react";
 import className from "classnames";
 import Header from "./Header";
 import Content from "./Content";
 import Footer from "./Footer";
-import EditorForumlaPopup from "./Editor/Formula/Popup";
+import EditorForumlaPopup from "./Editor/Formula";
 
-class App extends Component {
+class App extends PureComponent {
     state = {
         isPreviewToggled: false,
         isFormulaToggled: false,
@@ -31,31 +31,32 @@ class App extends Component {
     }
 
     render() {
-        const theme = className("app qilin-panel", {
+        const theme = className("app", "qilin-panel", {
             "is-light": !this.state.isThemeToggled,
             "is-dark": this.state.isThemeToggled,
         });
 
         return (
             <div className={theme}>
                 <Header
-                    {...this.state}
+                    isPreviewToggled={this.state.isPreviewToggled}
+                    isFormulaToggled={this.state.isFormulaToggled}
+                    isThemeToggled={this.state.isThemeToggled}
                     toggleTheme={this.toggleTheme}
                     togglePreview={this.togglePreview}
                     toggleFormula={this.toggleFormula}
                 />
 
                 <Content
-                    {...this.state}
-                    toggleFormula={this.toggleFormula}
+                    isPreviewToggled={this.state.isPreviewToggled}
                 />
 
                 <EditorForumlaPopup
                     isOpen={this.state.isFormulaToggled}
                     close={this.toggleFormula}
                 />
 
-                <Footer {...this.state} />
+                <Footer />
             </div>
         );
     }

diff --git a/src/scripts/components/Content.jsx b/src/scripts/components/Content.jsx
@@ -1,11 +1,11 @@
-import React, { Component } from "react";
+import React, { PureComponent } from "react";
 import PropTypes from "prop-types";
 import className from "classnames";
 import SplitPane from "react-split-pane";
 import EditorEditable from "./Editor/Editable";
 import EditorPreview from "./Editor/Preview";
 
-class Content extends Component {
+class Content extends PureComponent {
     static propTypes = {
         isPreviewToggled: PropTypes.bool.isRequired,
     }
@@ -26,7 +26,7 @@ class Content extends Component {
                         className={splitPaneClasses}
                     >
                         <EditorEditable />
-                        <EditorPreview />
+                        <EditorPreview isOpen={this.props.isPreviewToggled} />
                     </SplitPane>
                 </div>
             </div>

diff --git a/src/scripts/components/Control/Close.jsx → src/scripts/components/Controls/Close.jsx b/src/scripts/components/Control/Close.jsx → src/scripts/components/Controls/Close.jsx
@@ -1,7 +1,7 @@
-import React, { Component } from "react";
+import React, { PureComponent } from "react";
 import PropTypes from "prop-types";
 
-class ControlClose extends Component {
+class ControlClose extends PureComponent {
     static propTypes = {
         window: PropTypes.shape({
             close: PropTypes.func.isRequired,

diff --git a/src/scripts/components/Control/Maximize.jsx → src/scripts/components/Controls/Maximize.jsx b/src/scripts/components/Control/Maximize.jsx → src/scripts/components/Controls/Maximize.jsx
@@ -1,7 +1,7 @@
-import React, { Component } from "react";
+import React, { PureComponent } from "react";
 import PropTypes from "prop-types";
 
-class ControlMaximize extends Component {
+class ControlMaximize extends PureComponent {
     static propTypes = {
         window: PropTypes.shape({
             close: PropTypes.func.isRequired,

diff --git a/src/scripts/components/Control/Minimize.jsx → src/scripts/components/Controls/Minimize.jsx b/src/scripts/components/Control/Minimize.jsx → src/scripts/components/Controls/Minimize.jsx
@@ -1,7 +1,7 @@
-import React, { Component } from "react";
+import React, { PureComponent } from "react";
 import PropTypes from "prop-types";
 
-class ControlMinimize extends Component {
+class ControlMinimize extends PureComponent {
     static propTypes = {
         window: PropTypes.shape({
             close: PropTypes.func.isRequired,

diff --git a/src/scripts/components/Control/Wrapper.jsx → src/scripts/components/Controls/index.jsx b/src/scripts/components/Control/Wrapper.jsx → src/scripts/components/Controls/index.jsx
@@ -1,9 +1,9 @@
-import React, { Component } from "react";
+import React, { PureComponent } from "react";
 import Close from "./Close";
 import Maximize from "./Maximize";
 import Minimize from "./Minimize";
 
-class ControlWrapper extends Component {
+class ControlWrapper extends PureComponent {
     render() {
         const WebWindow = nw.Window.get();
 

diff --git a/src/scripts/components/Editor/Editable.jsx b/src/scripts/components/Editor/Editable.jsx
@@ -25,6 +25,10 @@ class EditorEditable extends Component {
         },
     }
 
+    shouldComponentUpdate(nextProps) {
+        return nextProps.editorStore.content !== this.props.editorStore.content;
+    }
+
     editorDidChange = (value) => {
         this.props.editorStore.changeContent(value);
     }

diff --git a/src/scripts/components/Editor/Formula/Help.jsx b/src/scripts/components/Editor/Formula/Help.jsx
@@ -1,105 +1,58 @@
-import React, { Component } from "react";
+import React, { PureComponent } from "react";
 import PropTypes from "prop-types";
 import EditorForumlaHelpGroup from "./HelpGroup";
+import EditorForumlaHelpGroupSymbol from "./HelpGroupSymbol";
 import KatexConstant from "../../../constants/katex";
+import { getMarkdown } from "../../../utils/MarkdownUtils";
 
-class EditorForumlaHelp extends Component {
+class EditorForumlaHelp extends PureComponent {
     static propTypes = {
         choose: PropTypes.func.isRequired,
     }
 
-    render() {
-        return (
-            <div className="formula-help">
-                <EditorForumlaHelpGroup
-                    {...this.props}
-                    name="Accents"
-                    symbols={KatexConstant.Accents}
-                />
-
-                <EditorForumlaHelpGroup
-                    {...this.props}
-                    name="Greek letters"
-                    symbols={KatexConstant.GreekLetters}
-                />
-
-                <EditorForumlaHelpGroup
-                    {...this.props}
-                    name="Other letters"
-                    symbols={KatexConstant.OtherLetters}
-                />
-
-                <EditorForumlaHelpGroup
-                    {...this.props}
-                    name="Logic and Set Theory"
-                    symbols={KatexConstant.LogicAndSetTheory}
-                />
-
-                <EditorForumlaHelpGroup
-                    {...this.props}
-                    name="Big operators"
-                    symbols={KatexConstant.BigOperators}
-                />
-
-                <EditorForumlaHelpGroup
-                    {...this.props}
-                    name="Environments"
-                    symbols={KatexConstant.Environments}
-                />
-
-                <EditorForumlaHelpGroup
-                    {...this.props}
-                    name="Annotations"
-                    symbols={KatexConstant.Annotations}
-                />
-
-                <EditorForumlaHelpGroup
-                    {...this.props}
-                    name="Math operators"
-                    symbols={KatexConstant.MathOperators}
-                />
-
-                <EditorForumlaHelpGroup
-                    {...this.props}
-                    name="Binary operators"
-                    symbols={KatexConstant.BinaryOperators}
-                />
-
-                <EditorForumlaHelpGroup
-                    {...this.props}
-                    name="Deliminers"
-                    symbols={KatexConstant.Deliminers}
-                />
-
-                <EditorForumlaHelpGroup
-                    {...this.props}
-                    name="Relations"
-                    symbols={KatexConstant.Relations}
-                />
-
-                <EditorForumlaHelpGroup
-                    {...this.props}
-                    name="Negated relations"
-                    symbols={KatexConstant.NegatedRelations}
-                />
+    static symbols = {
+        "Accents ": KatexConstant.Accents,
+        "Greek Letters": KatexConstant.GreekLetters,
+        "Other letters": KatexConstant.OtherLetters,
+        "Logic and Set Theory": KatexConstant.LogicAndSetTheory,
+        "Big operators": KatexConstant.BigOperators,
+        "Environments ": KatexConstant.Environments,
+        "Annotations ": KatexConstant.Annotations,
+        "Math operators": KatexConstant.MathOperators,
+        "Binary operators": KatexConstant.BinaryOperators,
+        "Deliminers ": KatexConstant.Deliminers,
+        "Relations ": KatexConstant.Relations,
+        "Negated relations": KatexConstant.NegatedRelations,
+        "Vertical layout": KatexConstant.VerticalLayout,
+        "Arrows ": KatexConstant.Arrows,
+        "Extensible arrows": KatexConstant.ExtensibleArrows,
+    }
 
-                <EditorForumlaHelpGroup
-                    {...this.props}
-                    name="Vertical layout"
-                    symbols={KatexConstant.VerticalLayout}
-                />
+    componentWillMount() {
+        this.markdown = getMarkdown({
+            html: true,
+            linkify: true,
+            typography: true,
+        });
+    }
 
-                <EditorForumlaHelpGroup
-                    {...this.props}
-                    name="Arrows"
-                    symbols={KatexConstant.Arrows}
+    renderGroup = (name, symbols) => (
+        <EditorForumlaHelpGroup key={name} name={name}>
+            {Object.keys(symbols).map(id => (
+                <EditorForumlaHelpGroupSymbol
+                    key={id}
+                    data={symbols[id]}
+                    choose={this.props.choose}
+                    renderer={this.markdown}
                 />
+            ))}
+        </EditorForumlaHelpGroup>
+    )
 
-                <EditorForumlaHelpGroup
-                    {...this.props}
-                    name="Extensible arrows"
-                    symbols={KatexConstant.ExtensibleArrows}
-                />
+    render() {
+        return (
+            <div className="formula-help">
+                {Object.keys(EditorForumlaHelp.symbols).map(type => this.renderGroup(type, EditorForumlaHelp.symbols[type]))}
             </div>
         );
     }

diff --git a/src/scripts/components/Editor/Formula/HelpGroup.jsx b/src/scripts/components/Editor/Formula/HelpGroup.jsx
@@ -1,39 +1,22 @@
-import React, { Component } from "react";
+import React, { PureComponent } from "react";
 import PropTypes from "prop-types";
-import EditorForumlaHelpGroupSymbol from "./HelpGroupSymbol";
-import { getMarkdown } from "../../../utils/MarkdownUtils";
 
-class EditorForumlaHelpGroup extends Component {
+class EditorForumlaHelpGroup extends PureComponent {
     static propTypes = {
         name: PropTypes.string.isRequired,
-        choose: PropTypes.func.isRequired,
-        symbols: PropTypes.objectOf(PropTypes.object).isRequired,
-    }
-
-    componentWillMount() {
-        this.markdown = getMarkdown({
-            html: true,
-            linkify: true,
-            typography: true,
-        });
+        children: PropTypes.oneOfType([
+            PropTypes.arrayOf(PropTypes.node),
+            PropTypes.node,
+        ]),
     }
 
     render() {
-        const { name, symbols, choose } = this.props;
-
         return (
             <div className="formula-help-group">
-                <div className="formula-help-group-name">{name}</div>
+                <div className="formula-help-group-name">{this.props.name}</div>
 
                 <div className="formula-help-group-symbols">
-                    {Object.keys(symbols).map(id => (
-                        <EditorForumlaHelpGroupSymbol
-                            key={id}
-                            data={symbols[id]}
-                            choose={choose}
-                            renderer={this.markdown}
-                        />
-                    ))}
+                    {this.props.children}
                 </div>
             </div>
         );

diff --git a/src/scripts/components/Editor/Formula/HelpGroupSymbol.jsx b/src/scripts/components/Editor/Formula/HelpGroupSymbol.jsx
@@ -1,8 +1,8 @@
-import React, { Component } from "react";
+import React, { PureComponent } from "react";
 import PropTypes from "prop-types";
 import Markdown from "markdown-it";
 
-class EditorForumlaHelpGroupSymbol extends Component {
+class EditorForumlaHelpGroupSymbol extends PureComponent {
     static propTypes = {
         data: PropTypes.shape({
             type: PropTypes.string.isRequired,

diff --git a/src/scripts/components/Editor/Formula/Preview.jsx b/src/scripts/components/Editor/Formula/Preview.jsx
@@ -1,8 +1,8 @@
-import React, { Component } from "react";
+import React, { PureComponent } from "react";
 import PropTypes from "prop-types";
 import { getMarkdown } from "../../../utils/MarkdownUtils";
 
-class EditorForumlaPreview extends Component {
+class EditorForumlaPreview extends PureComponent {
     static propTypes = {
         value: PropTypes.string.isRequired,
     }

diff --git a/...ripts/components/Editor/Formula/Popup.jsx → ...ripts/components/Editor/Formula/index.jsx b/...ripts/components/Editor/Formula/Popup.jsx → ...ripts/components/Editor/Formula/index.jsx
@@ -7,7 +7,7 @@ import FormulaHelp from "./Help";
 import FormulaEditor from "./Editor";
 import FormulaPreview from "./Preview";
 
-class EditorForumlaPopup extends Component {
+class EditorForumla extends Component {
     static propTypes = {
         isOpen: PropTypes.bool.isRequired,
         close: PropTypes.func.isRequired,
@@ -130,4 +130,4 @@ class EditorForumlaPopup extends Component {
     }
 }
 
-export default EditorForumlaPopup;
+export default EditorForumla;