First attempt at table

This commit is contained in:
Ozzie Gooen 2020-02-07 16:22:25 +00:00
parent c0a80c6235
commit db12e64c98
5 changed files with 65 additions and 89 deletions

View File

@ -5,56 +5,9 @@ var Curry = require("bs-platform/lib/js/curry.js");
var React = require("react"); var React = require("react");
var Antd_Radio = require("bs-ant-design-alt/src/Antd_Radio.js"); var Antd_Radio = require("bs-ant-design-alt/src/Antd_Radio.js");
var Belt_Array = require("bs-platform/lib/js/belt_Array.js"); var Belt_Array = require("bs-platform/lib/js/belt_Array.js");
var ReForm$BsReform = require("bs-reform/src/ReForm.bs.js");
var EAFunds_Data$ProbExample = require("./EAFunds_Data.bs.js"); var EAFunds_Data$ProbExample = require("./EAFunds_Data.bs.js");
var EAFunds_Model$ProbExample = require("./EAFunds_Model.bs.js"); var EAFunds_Model$ProbExample = require("./EAFunds_Model.bs.js");
function get(state, field) {
switch (field) {
case /* Group */0 :
return state[/* group */0];
case /* Year */1 :
return state[/* year */1];
case /* Parameter */2 :
return state[/* parameter */2];
}
}
function set(state, field, value) {
switch (field) {
case /* Group */0 :
return /* record */[
/* group */value,
/* year */state[/* year */1],
/* parameter */state[/* parameter */2]
];
case /* Year */1 :
return /* record */[
/* group */state[/* group */0],
/* year */value,
/* parameter */state[/* parameter */2]
];
case /* Parameter */2 :
return /* record */[
/* group */state[/* group */0],
/* year */state[/* year */1],
/* parameter */value
];
}
}
var FormConfig = {
get: get,
set: set
};
var Form = ReForm$BsReform.Make({
set: set,
get: get
});
function handleChange(handleChange$1, $$event) { function handleChange(handleChange$1, $$event) {
return Curry._1(handleChange$1, $$event.target.value); return Curry._1(handleChange$1, $$event.target.value);
} }
@ -126,21 +79,11 @@ function EAFunds_Form(Props) {
}), React.createElement(Antd_Radio.make, { }), React.createElement(Antd_Radio.make, {
value: "Payouts", value: "Payouts",
children: "Payouts" children: "Payouts"
})), foundGroup !== undefined && foundProperty !== undefined ? EAFunds_Model$ProbExample.run(foundGroup[/* group */0], year, foundProperty) : "", React.createElement("table", { })), foundGroup !== undefined && foundProperty !== undefined ? EAFunds_Model$ProbExample.run(foundGroup[/* group */0], year, foundProperty) : "");
className: "table-auto"
}, React.createElement("thead", undefined, React.createElement("tr", undefined, React.createElement("th", {
className: "px-4 py-2 border"
}, "sdfsdf"), React.createElement("th", {
className: "px-4 py-2 border"
}, "sdfsdf"), React.createElement("th", {
className: "px-4 py-2 border"
}, "sdfsdf"))), React.createElement("tbody", undefined)));
} }
var make = EAFunds_Form; var make = EAFunds_Form;
exports.FormConfig = FormConfig;
exports.Form = Form;
exports.handleChange = handleChange; exports.handleChange = handleChange;
exports.make = make; exports.make = make;
/* Form Not a pure module */ /* react Not a pure module */

View File

@ -1,16 +1,5 @@
open BsReform;
open EAFunds_Data; open EAFunds_Data;
module FormConfig = [%lenses
type state = {
group: string,
year: float,
parameter: string,
}
];
module Form = ReForm.Make(FormConfig);
let handleChange = (handleChange, event) => let handleChange = (handleChange, event) =>
handleChange(ReactEvent.Form.target(event)##value); handleChange(ReactEvent.Form.target(event)##value);
@ -62,21 +51,5 @@ let make = () => {
} }
) )
|> ReasonReact.string} |> ReasonReact.string}
<table className="table-auto">
<thead>
<tr>
<th className="px-4 py-2 border">
{"sdfsdf" |> ReasonReact.string}
</th>
<th className="px-4 py-2 border">
{"sdfsdf" |> ReasonReact.string}
</th>
<th className="px-4 py-2 border">
{"sdfsdf" |> ReasonReact.string}
</th>
</tr>
</thead>
<tbody />
</table>
</>; </>;
}; };

View File

@ -0,0 +1,60 @@
open BsReform;
open EAFunds_Data;
module FormConfig = [%lenses
type state = {
group: string,
year: float,
parameter: string,
}
];
module Form = ReForm.Make(FormConfig);
let handleChange = (handleChange, event) =>
handleChange(ReactEvent.Form.target(event)##value);
[@react.component]
let make = () => {
let (year, setYear) = React.useState(() => 2021.);
<>
<input
type_="number"
value={year |> Js.Float.toString}
onChange={handleChange(r =>
switch (Js.Float.fromString(r)) {
| r when r >= 2020.0 && r <= 2050.0 => setYear(_ => r)
| _ => ()
}
)}
/>
<table className="table-auto">
<thead>
<tr>
<th className="px-4 py-2"> {"Fund Name" |> ReasonReact.string} </th>
<th className="px-4 py-2"> {"Donations" |> ReasonReact.string} </th>
<th className="px-4 py-2"> {"Payouts" |> ReasonReact.string} </th>
</tr>
</thead>
<tbody>
{funds
|> Belt.Array.map(_, r =>
<tr>
<th className="px-4 py-2 border ">
{r.name |> ReasonReact.string}
</th>
<th className="px-4 py-2 border font-normal">
{EAFunds_Model.run(r.group, year, DONATIONS)
|> ReasonReact.string}
</th>
<th className="px-4 py-2 border font-normal">
{EAFunds_Model.run(r.group, year, PAYOUTS)
|> ReasonReact.string}
</th>
</tr>
)
|> ReasonReact.array}
</tbody>
</table>
</>;
};

View File

@ -2,10 +2,10 @@
var React = require("react"); var React = require("react");
var ReactDOMRe = require("reason-react/src/ReactDOMRe.js"); var ReactDOMRe = require("reason-react/src/ReactDOMRe.js");
var EAFunds_Form$ProbExample = require("./EAFunds/EAFunds_Form.bs.js"); var EAFunds_Form2$ProbExample = require("./EAFunds/EAFunds_Form2.bs.js");
((import('./styles/index.css'))); ((import('./styles/index.css')));
ReactDOMRe.renderToElementWithId(React.createElement(EAFunds_Form$ProbExample.make, { }), "app"); ReactDOMRe.renderToElementWithId(React.createElement(EAFunds_Form2$ProbExample.make, { }), "app");
/* Not a pure module */ /* Not a pure module */

View File

@ -1,2 +1,2 @@
[%bs.raw {|import('./styles/index.css')|}]; [%bs.raw {|import('./styles/index.css')|}];
ReactDOMRe.renderToElementWithId(<EAFunds_Form />, "app"); ReactDOMRe.renderToElementWithId(<EAFunds_Form2 />, "app");