fix keys

matronator · Mar 15, 2023 · 8ecde1f · 8ecde1f
1 parent d737013
commit 8ecde1f
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 34 deletions.
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "author": "Matronator",
   "description": "Editor for MTRGen templates",
   "license": "MIT",
-  "version": "1.1.9",
+  "version": "1.1.10",
   "homepage": "https://github.com/matronator/mtrgen-template-editor",
   "repository": {
     "type": "git",

diff --git a/src/Nodes/Node.tsx b/src/Nodes/Node.tsx
@@ -136,7 +136,7 @@ function EnumNode(props: EnumNodeProps) {
                 <select name={props.name} id={props.name} onChange={handleChange}>
                     {props.options.map(option => 
                         <Fragment key={option}>
-                            {option.toString() === props.value ? <option selected={true}>{option}</option> : <option key={option}>{option}</option>}
+                            {option.toString() === props.value ? <option selected={true}>{option}</option> : <option>{option}</option>}
                         </Fragment>
                     )}
                 </select>

diff --git a/src/Nodes/SimpleNode.tsx b/src/Nodes/SimpleNode.tsx
diff --git a/src/Nodes/Template/ClassNode.tsx b/src/Nodes/Template/ClassNode.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Class, Constant, IndexedString, Method, Modifier, Prop } from '../../Schema';
 import { compareChanges, generateUUID } from '../../utils/utils';
 import { CollapsedNode } from '../CollapsedNode';
@@ -100,7 +100,7 @@ export function ClassNode(props: ClassNodeProps) {
             <>
                 {item?.modifier ? `${item?.modifier} ` : ''}class <span className="syntax-operator">{item?.name ?? '_class'}</span>
                 {item?.extends && <> extends <span className="syntax-extends">{item.extends}</span></>}
-                {item?.implements && <> implements <span className="syntax-class">{item.implements.map(({ value }, index) => <>{item.implements!.length - 1 > index ? <>{value}<span key={index} className="syntax-operator">, </span></> : value}</>)}</span></>}
+                {item?.implements && <> implements <span className="syntax-class">{item.implements.map(({ value }, index) => <React.Fragment key={index}>{item.implements!.length - 1 > index ? <>{value}<span key={index} className="syntax-operator">, </span></> : value}</React.Fragment>)}</span></>}
             </>
         );
     }

diff --git a/src/styles/Editor.css b/src/styles/Editor.css
@@ -17,6 +17,10 @@ ul.list {
 .textarea-node textarea {
     font-family: 'Menlo', 'Courier New', Courier, monospace;
 }
+.dark-mode .textarea-node textarea {
+    background-color: #212529;
+    color: #adb5bd;
+}
 
 .node-item {
     padding: .33rem 1rem;
@@ -33,11 +37,11 @@ ul.list {
 }
 
 .dark-mode .node-item:nth-of-type(odd) {
-    background-color: #404040;
+    background-color: #424344;
 }
 
 .dark-mode .node-item:hover {
-    background-color: #2c2d30;
+    background-color: #303133;
 }
 
 .accordion-header pre.item-name {

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -30,5 +30,5 @@ export const compareArrays = (array1: unknown[], array2: unknown[]): boolean =>
 }
 
 export function injectStyles() {
-    (function(){"use strict";try{if(typeof document!="undefined"){var t=document.createElement("style");t.appendChild(document.createTextNode(".app{width:60vw}ul.list{list-style:none}.editor{text-align:center}.editor input[type=text]{font-family:Menlo,Courier New,Courier,monospace}.dark-mode .editor input[type=text]{background-color:#212529;color:#adb5bd}.textarea-node textarea{font-family:Menlo,Courier New,Courier,monospace}.node-item{padding:.33rem 1rem;align-items:center;transition:all .2s ease}.node-item:nth-of-type(odd){background-color:#f5f5f5}.node-item:hover{background-color:#fff6e7}.dark-mode .node-item:nth-of-type(odd){background-color:#404040}.dark-mode .node-item:hover{background-color:#2c2d30}.accordion-header pre.item-name{margin-top:0;margin-bottom:0;background-color:#404040;color:#ffb86c;padding:.33rem;border-radius:5px}.accordion-header pre.item-name>code{white-space:break-spaces}.syntax-class{color:#ffcc95}.syntax-string{color:#19f9d8}.syntax-boolean,.syntax-number{color:#ffb86c}.syntax-type{color:#ff75b5}.syntax-extends{color:#ff9ac1}.syntax-operator{color:#e6e6e6}.syntax-function{color:#6fc1ff}.accordion-node .accordion-body{padding-left:0;padding-right:0}.grid,.node-item{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr}.span-1{grid-column-start:span 1}.span-2{grid-column-start:span 2}.span-3{grid-column-start:span 3}.span-4{grid-column-start:span 4}.span-5{grid-column-start:span 5}.span-6{grid-column-start:span 6}.span-7{grid-column-start:span 7}.span-8{grid-column-start:span 8}.span-9{grid-column-start:span 9}.span-10{grid-column-start:span 10}.span-11{grid-column-start:span 11}.span-12{grid-column-start:span 12}.text-left{text-align:left}.text-right{text-align:right}")),document.head.appendChild(t)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
+    (function(){"use strict";try{if(typeof document!="undefined"){var t=document.createElement("style");t.appendChild(document.createTextNode(".app{width:60vw}ul.list{list-style:none}.editor{text-align:center}.editor input[type=text]{font-family:Menlo,Courier New,Courier,monospace}.dark-mode .editor input[type=text]{background-color:#212529;color:#adb5bd}.textarea-node textarea{font-family:Menlo,Courier New,Courier,monospace}.dark-mode .textarea-node textarea{background-color:#212529;color:#adb5bd}.node-item{padding:.33rem 1rem;align-items:center;transition:all .2s ease}.node-item:nth-of-type(odd){background-color:#f5f5f5}.node-item:hover{background-color:#fff6e7}.dark-mode .node-item:nth-of-type(odd){background-color:#424344}.dark-mode .node-item:hover{background-color:#303133}.accordion-header pre.item-name{margin-top:0;margin-bottom:0;background-color:#404040;color:#ffb86c;padding:.33rem;border-radius:5px}.accordion-header pre.item-name>code{white-space:break-spaces}.syntax-class{color:#ffcc95}.syntax-string{color:#19f9d8}.syntax-boolean,.syntax-number{color:#ffb86c}.syntax-type{color:#ff75b5}.syntax-extends{color:#ff9ac1}.syntax-operator{color:#e6e6e6}.syntax-function{color:#6fc1ff}.accordion-node .accordion-body{padding-left:0;padding-right:0}.grid,.node-item{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr}.span-1{grid-column-start:span 1}.span-2{grid-column-start:span 2}.span-3{grid-column-start:span 3}.span-4{grid-column-start:span 4}.span-5{grid-column-start:span 5}.span-6{grid-column-start:span 6}.span-7{grid-column-start:span 7}.span-8{grid-column-start:span 8}.span-9{grid-column-start:span 9}.span-10{grid-column-start:span 10}.span-11{grid-column-start:span 11}.span-12{grid-column-start:span 12}.text-left{text-align:left}.text-right{text-align:right}")),document.head.appendChild(t)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
 }