talexander/organic_ast_explorer
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Fix line breaks in property list keys.

Browse Source
This commit is contained in:
Tom Alexander 2024-01-27 17:01:09 -05:00
parent 1507050128
commit c03bf7458f
Signed by: talexander
GPG Key ID: D3A179C9A53C0EDE
2 changed files with 43 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/OrgAst.module.css
View File

@ -48,7 +48,8 @@
} }
.OrgAstProperties { .OrgAstProperties {
width: 100%; border: 1px solid #000000;
margin: 5px;
> tbody { > tbody {
> tr { > tr {
@ -65,7 +66,6 @@
font-weight: 700; font-weight: 700;
text-align: right; text-align: right;
padding-right: 5px; padding-right: 5px;
width: 0;
} }
} }

79
src/OrgAst.tsx
View File

@ -1,11 +1,11 @@
import React, { ReactNode, useState } from "react"; import React, { ReactNode, useState } from "react";
import styles from "./OrgAst.module.css"; import styles from "./OrgAst.module.css";
import { Fragment } from 'react'; import { Fragment } from "react";
const OrgAst = (props: { const OrgAst = (props: {
setHighlight: Function; setHighlight: Function;
clearHighlights: Function; clearHighlights: Function;
astTree: any, astTree: any;
value: string; value: string;
}) => { }) => {
const [selectedNode, setSelectedNode] = useState<string>(""); const [selectedNode, setSelectedNode] = useState<string>("");
@ -58,31 +58,26 @@ const OrgAstNode = (props: {
</div> </div>
<details> <details>
<summary>Standard Properties</summary> <summary>Standard Properties</summary>
<dl> <OrgPropertiesList
<dt>begin</dt> selectNode={props.selectNode}
<dd>{props.node["standard-properties"]["begin"]}</dd> parentUniqueId={props.uid}
<dt>contents-begin</dt> selectedNode={props.selectedNode}
<dd>{props.node["standard-properties"]["contents-begin"]}</dd> properties={props.node["standard-properties"]}
<dt>contents-end</dt> />
<dd>{props.node["standard-properties"]["contents-end"]}</dd>
<dt>end</dt>
<dd>{props.node["standard-properties"]["end"]}</dd>
<dt>post-blank</dt>
<dd>{props.node["standard-properties"]["post-blank"]}</dd>
</dl>
</details> </details>
{!!Object.keys(props.node.properties).length ? ( {!!Object.keys(props.node.properties).length ? (
<> <>
<details> <details>
<summary>Properties</summary> <summary>Properties</summary>
<OrgPropertiesList selectNode={props.selectNode} <OrgPropertiesList
selectNode={props.selectNode}
parentUniqueId={props.uid} parentUniqueId={props.uid}
selectedNode={props.selectedNode} selectedNode={props.selectedNode}
properties={props.node.properties} properties={props.node.properties}
/> />
</details> </details>
</> </>
) : null } ) : null}
{Array.isArray(props.node.children) && props.node.children.length > 0 ? ( {Array.isArray(props.node.children) && props.node.children.length > 0 ? (
<details open={true}> <details open={true}>
<summary>Children</summary> <summary>Children</summary>
@ -107,15 +102,15 @@ const OrgAstNodeList = (props: {
node_list: any[]; node_list: any[];
}): React.JSX.Element[] => { }): React.JSX.Element[] => {
return props.node_list.map((node) => { return props.node_list.map((node) => {
const uid = const uid =
props.parentUniqueId + props.parentUniqueId +
"_" + "_" +
node["ast-node"] + node["ast-node"] +
"/" + "/" +
node["standard-properties"]["begin"] + node["standard-properties"]["begin"] +
"/" + "/" +
node["standard-properties"]["end"] + node["standard-properties"]["end"] +
"#"; "#";
return ( return (
<OrgAstNode <OrgAstNode
key={uid} key={uid}
@ -134,21 +129,29 @@ const OrgPropertiesList = (props: {
selectedNode: string; selectedNode: string;
properties: Object; properties: Object;
}): React.JSX.Element => { }): React.JSX.Element => {
const entries = Object.entries(props.properties).map(([key, value]) => { const entries = Object.entries(props.properties)
return ( .sort((a, b) => {
<Fragment key={key}> if (a[0] < b[0]) {
<tr> return -1;
<th scope="row">{key}:</th> } else if (a[0] > b[0]) {
<td>{JSON.stringify(value)}</td> return 1;
</tr> } else {
</Fragment> return 0;
); }
}); })
.map(([key, value]) => {
return (
<Fragment key={key}>
<tr>
<th scope="row">{key}:</th>
<td>{JSON.stringify(value)}</td>
</tr>
</Fragment>
);
});
return ( return (
<table className={styles.OrgAstProperties}> <table className={styles.OrgAstProperties}>
<tbody> <tbody>{entries}</tbody>
{entries}
</tbody>
</table> </table>
); );
}; };