minor fixes

matronator · Mar 15, 2023 · b6eb44f · b6eb44f
1 parent c0ca2fc
commit b6eb44f
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 12 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.7",
+  "version": "1.1.8",
   "homepage": "https://github.com/matronator/mtrgen-template-editor",
   "repository": {
     "type": "git",

diff --git a/src/Editor.tsx b/src/Editor.tsx
@@ -22,6 +22,8 @@ interface EditorProps {
 export function Editor(props: EditorProps) {
     const [styles, setStyles] = useState<boolean>(false);
 
+    // #region
+
     useEffectOnce(() => {
         if (!styles) {
             injectStyles();
@@ -268,6 +270,8 @@ export function Editor(props: EditorProps) {
         }));
     }
 
+    // #endregion
+
     return (
         <Accordion defaultActiveKey="root" className="accordion-node editor">
             <Accordion.Item eventKey="root">
@@ -276,7 +280,7 @@ export function Editor(props: EditorProps) {
                     <>
                         {Object.keys(props.template).map((key: string) => key !== 'file' && <Node key={key} title={key} value={props.template[key as 'name'|'filename'|'path']} onChange={(e) => props.setTemplate(prevVal => ({ ...prevVal, [key]: e.target.value }))} />)}
                         <CollapsedNode eventKey="file" header="File">
-                            <Node title="strict" type="checkbox" />
+                        <Node title="strict" type="checkbox" checked={props.template.file.strict} onChange={(e) => props.setTemplate(prevVal => ({ ...prevVal, file: { ...prevVal.file, strict: e.target.checked } }))} />
                             <Node.Array title="use" onAdd={handleAddFileUse} addButtonTitle="Add use statement">
                                 {props.template.file.use?.map((item, key) => <InputGroup key={item.id}>
                                     <Form.Control type="text" value={item.value} onChange={e => handleChangeFileUse(item.id, e.target.value)} />

diff --git a/src/Nodes/CollapsedNode.tsx b/src/Nodes/CollapsedNode.tsx
@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
-import { Accordion, CloseButton } from "react-bootstrap";
+import { ReactNode, useState } from 'react';
+import { Accordion, CloseButton, useAccordionButton } from 'react-bootstrap';
 
 interface CollapsedNodeProps {
     eventKey: string;
@@ -10,14 +10,35 @@ interface CollapsedNodeProps {
     onCloseClick?: () => void;
 }
 
+interface AccordionToggleProps {
+    children?: ReactNode;
+    eventKey: string;
+}
+
+function AccordionToggle(props: AccordionToggleProps) {
+    const [collapsed, setCollapsed] = useState(false);
+
+    const decoratedOnClick = useAccordionButton(props.eventKey, () => {
+        setCollapsed(prevValue => !prevValue);
+    });
+
+    return (
+        <span onClick={decoratedOnClick} className={`accordion-button ${collapsed ? 'collapsed' : ''}`} style={{ cursor: 'pointer' }}>
+            {props.children || ''}
+        </span>
+    );
+}
+
 export function CollapsedNode(props: CollapsedNodeProps) {
     return (
         <Accordion defaultActiveKey={props.eventKey} className="accordion-node">
             <Accordion.Item eventKey={props.eventKey}>
-                <Accordion.Header>
-                    {props.closeButton && <CloseButton onClick={() => props.onCloseClick && props.onCloseClick()} />}
-                    {props.header ?? ''}{props.name && <>{props.header ? <>:&nbsp;</> : ''}<pre className="item-name"><code>{props.name}</code></pre></>}
-                </Accordion.Header>
+                <h2 className='accordion-header'>
+                    <AccordionToggle eventKey={props.eventKey}>
+                        {props.closeButton && <CloseButton onClick={() => props.onCloseClick && props.onCloseClick()} />}
+                        {props.header ?? ''}{props.name && <>{props.header ? <>:&nbsp;</> : ''}<pre className="item-name"><code>{props.name}</code></pre></>}
+                    </AccordionToggle>
+                </h2>
                 <Accordion.Body>
                     {props.children}
                 </Accordion.Body>

diff --git a/src/Nodes/Node.tsx b/src/Nodes/Node.tsx
@@ -1,20 +1,26 @@
-import { ChangeEvent, Fragment, MouseEvent, ReactNode, useState } from "react";
-import { Button } from "react-bootstrap";
+import { ChangeEvent, Fragment, MouseEvent, ReactNode, useState } from 'react';
+import { Button } from 'react-bootstrap';
 
 interface NodeProps {
     title: string;
     type?: string;
     value?: string;
+    checked?: boolean;
     titleClass?: string;
     valueClass?: string;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 
 function Node(props: NodeProps) {
     const [value, setValue] = useState(props.value ?? '');
+    const [checked, setChecked] = useState(props.checked ?? false);
 
     function handleChange(e: ChangeEvent<HTMLInputElement>) {
-        setValue(e.target.value);
+        if (props.type === 'checkbox') {
+            setChecked(e.target.checked);
+        } else {
+            setValue(e.target.value);
+        }
         if (props.onChange instanceof Function) {
             props.onChange(e);
         }
@@ -26,7 +32,7 @@ function Node(props: NodeProps) {
                 {props.title}:
             </div>
             <div className={`${props.valueClass ?? ''} span-6`}>
-                <input type={props.type ?? 'text'} value={props.value ?? value} onChange={handleChange} />
+                <input type={props.type ?? 'text'} checked={props.checked ?? checked} value={props.value ?? value} onChange={handleChange} />
             </div>
         </div>
     );

diff --git a/src/styles/Editor.css b/src/styles/Editor.css
@@ -9,6 +9,10 @@ ul.list {
 .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;