import React from "react";
import ReactDOM from "react-dom";
import "../src/genfun_formatter";
import { Receipt } from "./render";
import * as m from "./Model";
import * as gf from "../src/genfuns";
const Editable = gf
.defgeneric("Editable", "props")
.around([Object], function (_) {
return (
{this.call_next_method()}
);
})
.primary([gf.Shape("label", "htmlFor")], ({ label, htmlFor }) => (
{label}
))
.primary(
[gf.Shape("label", "htmlFor", "value")],
function ({ value, onChange }) {
return (
<>
{this.call_next_method()}
{onChange ? null : {value} }
>
);
}
)
.primary(
[gf.Shape("label", "htmlFor", "value", "onChange")],
function ({ value, htmlFor, onChange }) {
return (
<>
{this.call_next_method()}
>
);
}
).fn;
class Field extends React.Component {
constructor(props) {
super();
this.state = { editing: false, val: props.value };
}
click() {
this.setState(() => ({
editing: !this.state.editing,
val: this.state.val,
}));
}
onChange(e) {
const val = e.target.value;
this.setState(() => ({ editing: true, val }));
}
render() {
const editingProps = {};
if (this.state.editing) {
editingProps.onChange = this.onChange.bind(this);
}
return (
Toggle
);
}
}
ReactDOM.render(
,
document.querySelector("main"),
() => {
console.log("rendered");
}
);