diff --git a/public/style.css b/public/style.css index beed9e8..ea5ae63 100644 --- a/public/style.css +++ b/public/style.css @@ -220,6 +220,34 @@ aside button { background: transparent; /* optional: just make scrollbar invisible */ } +/* Metamenu */ + +.meta-menu-expander { + position: absolute; + transform: translateY(calc(-100% + 20px)); + top: 0; + right: 0; + transition: transform 100ms ease-out; +} + +.expand-meta-menu { + display: block; + margin-left: auto; +} + +.meta-menu-expander.expanded { + transform: translateY(0); +} + +.meta-menu { + background: white; + border: 0 #f0f0f0 dashed; + border-bottom-width: 3px; + border-left-width: 3px; + padding: 10px; + margin-bottom: 3px; +} + /* Dark Mode */ .dark-mode.app-wrapper { diff --git a/src/components/MetaMenu/index.js b/src/components/MetaMenu/index.js new file mode 100644 index 0000000..4bc3e19 --- /dev/null +++ b/src/components/MetaMenu/index.js @@ -0,0 +1,48 @@ +import React from 'react'; +import {renderExpression} from '../../lib/lambda' + +class MetaMenu extends React.Component { + state = { + isExpanded: false, + } + + toggleExpanded = () => { + this.setState({ + isExpanded: !this.state.isExpanded + }); + } + + render() { + const classname = 'meta-menu-expander' + (this.state.isExpanded ? ' expanded' : ''); + // AKA breaking the model horribly + const definedVariables = this + .props + .lambdaActor + .executionContext + .definedVariables; + + const kvEntries = Object + .entries(definedVariables) + .map(([varName, expr]) => ( +
+ {varName}: {renderExpression(expr)} +
+ )); + + return ( +
+
+ Menu items!! + {kvEntries} +
+ +
+ ); + } +} + +export default MetaMenu; \ No newline at end of file diff --git a/src/components/Repl/index.jsx b/src/components/Repl/index.jsx index 41cf5ac..2e4e5f5 100644 --- a/src/components/Repl/index.jsx +++ b/src/components/Repl/index.jsx @@ -11,6 +11,7 @@ import Assignment from './Assignment'; import Computation from './Computation'; import Error from './Error' import Info from './Info'; +import MetaMenu from '../MetaMenu'; import { renderExpression, parseExtendedSyntax } from '../../lib/lambda'; @@ -189,6 +190,7 @@ class Repl extends React.Component { )); return (
+
{this.state.output.map((elem, idx) => (