cdlab-sit · higurashi-takuto · Jul 30, 2020 · Jul 26, 2020 · Jul 26, 2020 · Jul 26, 2020
diff --git a/package.json b/package.json
@@ -60,6 +60,7 @@
   "dependencies": {
     "ace-builds": "^1.4.11",
     "electron": "^8.2.5",
+    "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-ace": "^8.1.0",
     "react-dom": "^16.13.1",

diff --git a/src/renderer/App.jsx b/src/renderer/App.jsx
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { remote } from 'electron';
 import Footer from './components/Footer';
-import Main from './components/Main';
+import Body from './components/Body';
 import TitleBar from './components/TitleBar';
 
 export default class App extends Component {
@@ -38,7 +38,7 @@ export default class App extends Component {
     return (
       <div className="flex flex-col h-screen">
         {!isFullScreen && <TitleBar />}
-        <Main />
+        <Body />
         <Footer />
       </div>
     );

diff --git a/src/renderer/components/Body.jsx b/src/renderer/components/Body.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import ResizePanel from 'react-resize-panel';
+import SideBar from './SideBar';
+import Main from './Main';
+
+export default function Body() {
+  return (
+    <div className="flex flex-auto">
+      <ResizePanel
+        direction="e"
+        handleClass="hidden"
+        style={{ width: '200px' }}
+      >
+        <SideBar />
+      </ResizePanel>
+      <Main />
+    </div>
+  );
+}
diff --git a/src/renderer/components/EditArea.jsx b/src/renderer/components/EditArea.jsx
@@ -1,52 +1,72 @@
 import 'ace-builds/src-noconflict/ace';
 import 'ace-builds/src-noconflict/mode-c_cpp';
 import './theme-xenon';
-import React, { useCallback } from 'react';
+import React from 'react';
 import AceEditor from 'react-ace';
-import { useDispatch, useSelector } from 'react-redux';
-import { setSelectedText, setText } from '../reducks/edit/actions';
-import { getActiveText } from '../reducks/edit/selectors';
-import { getNewText } from '../reducks/file/selectors';
+import PropTypes from 'prop-types';
+import { useDispatch } from 'react-redux';
+import {
+  setSelectedText,
+  setText,
+  setEditorId,
+  setActiveEditorId,
+} from '../reducks/editor/actions';
 
-let // エディタインスタンス
-  editorInstance = null;
+const EditArea = React.memo(
+  (props) => {
+    let editorInstance = null;
+    /*  XenonTextで開いている際, 他のエディタなどでファイルが変更されると
+    initialTextが変更され反映される.
+    しかしeditorIdも新しくなるためゾンビがのこるかもしれない.
+    確認が必要 */
+    const { initialText } = props;
 
-export default function EditArea() {
-  const activeText = getActiveText(useSelector((state) => state));
-  const initialText = getNewText(useSelector((state) => state));
-  const dispatch = useDispatch();
-  const onChange = useCallback(() => {
-    dispatch(setText(editorInstance));
-  });
-  const onLoad = useCallback((newEditorInstance) => {
-    editorInstance = newEditorInstance;
-    dispatch(setText(editorInstance));
-  });
-  const onSelectionChange = useCallback(() => {
-    dispatch(setSelectedText(editorInstance));
-  });
+    const dispatch = useDispatch();
+    const onChange = () => {
+      dispatch(setText(editorInstance));
+    };
+    /* editorInstance作成後 */
+    const onLoad = (newEditorInstance) => {
+      editorInstance = newEditorInstance;
+      /* ストアにeditorIdを登録(初期状態は'') */
+      dispatch(setEditorId(editorInstance.id));
+      /* ストアにActiveEditorIdを登録 */
+      dispatch(setActiveEditorId(editorInstance.id));
+      /* ストアにTextを登録 */
+      dispatch(setText(editorInstance));
+    };
+    const onSelectionChange = () => {
+      dispatch(setSelectedText(editorInstance));
+    };
 
-  return (
-    <div className="bg-gray-900 flex-auto">
-      <AceEditor
-        defaultValue={initialText}
-        editorProps={{ $blockScrolling: 'true' }}
-        focus={false}
-        fontSize="16px"
-        height="100%"
-        highlightActiveLine={false}
-        mode="c_cpp"
-        name="UNIQUE_ID_OF_DIV"
-        onChange={onChange}
-        onLoad={onLoad}
-        onSelectionChange={onSelectionChange}
-        showPrintMargin={false}
-        tabSize={4}
-        theme="xenon"
-        value={activeText}
-        width="100%"
-        wrapEnabed={false}
-      />
-    </div>
-  );
-}
+    return (
+      <div className="bg-gray-900 flex-auto">
+        <AceEditor
+          defaultValue={initialText}
+          editorProps={{ $blockScrolling: 'true' }}
+          fontSize="16px"
+          height="100%"
+          highlightActiveLine={false}
+          mode="c_cpp"
+          name="UNIQUE_ID_OF_DIV"
+          onChange={onChange}
+          onLoad={onLoad}
+          onSelectionChange={onSelectionChange}
+          showPrintMargin={false}
+          tabSize={4}
+          theme="xenon"
+          width="100%"
+          wrapEnabed={false}
+        />
+      </div>
+    );
+  },
+  // Props.initialTextが変更されない限り, 再レンダリングしない
+  (prevProps, nextProps) => prevProps.initialText === nextProps.initialText,
+);
+
+EditArea.propTypes = {
+  initialText: PropTypes.string.isRequired,
+};
+
+export default EditArea;
diff --git a/src/renderer/components/FileBlock.jsx b/src/renderer/components/FileBlock.jsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import FileStatus from './FileStatus';
 
 export default function FileBlock() {
   const item = 'untitled';
 
   return (
     <div className="flex h-6 w-full bg-gray-800 items-center">
-      <FileStatus />
+      {/* 現在未実装 */}
+      {/* <FileStatus /> */}
       <h3
         className="
                 text-xs text-gray-300

diff --git a/src/renderer/components/FileStatus.jsx b/src/renderer/components/FileStatus.jsx
@@ -1,6 +1,10 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 import React from 'react';
-import { useSelector } from 'react-redux';
-import { getFileStatus } from '../reducks/file/selectors';
+import PropTypes from 'prop-types';
+import { useSelector, useDispatch } from 'react-redux';
+import { getFileStatus } from '../reducks/editor/selectors';
+import { deleteDocument } from '../reducks/editor/actions';
 
 const savedImagePathCommand =
   'M4.293 4.293a1 1 0 011.414 0L10 ' +
@@ -13,17 +17,33 @@ const unsavedImagePathCommand =
   '1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 ' +
   '10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z';
 
-export default function FileStatus() {
+export default function FileStatus(props) {
+  const { editorId } = props;
   let fileStatusPathCommand = savedImagePathCommand;
-  const isSaved = getFileStatus(useSelector((state) => state));
+  const dispatch = useDispatch();
+  /* FileStatusが押された時
+  -> タブとドキュメントを削除 */
+  const onClick = (e) => {
+    e.stopPropagation();
+    dispatch(deleteDocument(editorId));
+  };
+
+  const isSaved = getFileStatus(
+    useSelector((state) => state.editor),
+    editorId,
+  );
   if (!isSaved) {
     fileStatusPathCommand = unsavedImagePathCommand;
   }
   return (
-    <div className="w-3 h-3 mx-2 flex-shrink-0">
+    <div className="w-3 h-3 mx-2 flex-shrink-0" onClick={onClick}>
       <svg className="text-gray-300" fill="currentColor" viewBox="0 0 20 20">
         <path clipRule="evenodd" d={fileStatusPathCommand} fillRule="evenodd" />
       </svg>
     </div>
   );
 }
+
+FileStatus.propTypes = {
+  editorId: PropTypes.string.isRequired,
+};
diff --git a/src/renderer/components/Footer.jsx b/src/renderer/components/Footer.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { getCharCount } from '../reducks/edit/selectors';
+import { getCharCount } from '../reducks/editor/selectors';
 
 export default function Footer() {
   const charCount = getCharCount(useSelector((state) => state));

diff --git a/src/renderer/components/Main.jsx b/src/renderer/components/Main.jsx
@@ -1,23 +1,51 @@
-import React from 'react';
-import ResizePanel from 'react-resize-panel';
+import React, { useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
 import EditArea from './EditArea';
-import SideBar from './SideBar';
 import Tabs from './Tabs';
 
+import { getActiveEditorId, getDocuments } from '../reducks/editor/selectors';
+import { setNewDocument } from '../reducks/editor/actions';
+
 export default function Main() {
+  // state.editor変更時, なぜ2回呼び出されるのかは不明
+  const dispatch = useDispatch();
+
+  const editorSelector = useSelector((state) => state.editor);
+  const activeEditorId = getActiveEditorId(editorSelector);
+  const documents = getDocuments(editorSelector);
+
+  /* これでできたけど根本的な理由は不明, あとで調べる */
+  useEffect(() => {
+    if (documents.length === 0) {
+      dispatch(setNewDocument());
+    }
+  });
+
+  const shouldShow = (id) => {
+    if (id !== activeEditorId) {
+      return false;
+    }
+    return true;
+  };
+
   return (
-    <div className="flex flex-auto">
-      <ResizePanel
-        direction="e"
-        handleClass="hidden"
-        style={{ width: '200px' }}
-      >
-        <SideBar />
-      </ResizePanel>
-      <div className="flex flex-col w-full">
-        <Tabs />
-        <EditArea />
-      </div>
+    <div className="flex flex-auto flex-col">
+      <Tabs documents={documents} />
+      {/* documentsに含まれているdocumentを全てレンダリング */}
+      {documents.map((document, index) => {
+        return (
+          <div
+            className={`flex flex-auto ${
+              /* アクティブなdocumentのみを表示 */
+              shouldShow(document.editorId) ? '' : 'hidden'
+            }`}
+            // eslint-disable-next-line react/no-array-index-key
+            key={index}
+          >
+            <EditArea initialText={document.fileText} />
+          </div>
+        );
+      })}
     </div>
   );
 }
diff --git a/src/renderer/components/Tab.jsx b/src/renderer/components/Tab.jsx
@@ -1,21 +1,52 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 import React from 'react';
+import { useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
 import FileStatus from './FileStatus';
+import { setActiveEditorId } from '../reducks/editor/actions';
 
-export default function Tabs() {
-  const item = 'Untitled';
+const activeTabColor = 'bg-gray-900';
+const inactiveTabColor = 'bg-gray-800';
+
+export default function Tab(props) {
+  const { title } = props;
+  const { editorId } = props;
+  const { isActive } = props;
+  const dispatch = useDispatch();
+
+  // タブ(FileStatus以外の場所)が押された時
+  const onClick = () => {
+    /* activeEditorIdをストアにセット */
+    dispatch(setActiveEditorId(editorId));
+  };
+
+  let tabColor = inactiveTabColor;
+  if (isActive) {
+    tabColor = activeTabColor;
+  }
 
   return (
-    <div className="bg-gray-900 h-8 w-40 flex flex-row items-center">
+    <div
+      className={`"h-8 w-40 flex flex-row items-center " ${tabColor}`}
+      onClick={onClick}
+    >
       <h2
         className="
                 text-xs text-gray-300 select-none
                 my-1 ml-2 leading-6
                 w-full h-6
                 "
       >
-        {item}
+        {title}
       </h2>
-      <FileStatus />
+      <FileStatus editorId={editorId} />
     </div>
   );
 }
+
+Tab.propTypes = {
+  editorId: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  isActive: PropTypes.bool.isRequired,
+};