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');
}
);