First attempt at table
This commit is contained in:
parent
c0a80c6235
commit
db12e64c98
|
@ -5,56 +5,9 @@ var Curry = require("bs-platform/lib/js/curry.js");
|
|||
var React = require("react");
|
||||
var Antd_Radio = require("bs-ant-design-alt/src/Antd_Radio.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_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) {
|
||||
return Curry._1(handleChange$1, $$event.target.value);
|
||||
}
|
||||
|
@ -126,21 +79,11 @@ function EAFunds_Form(Props) {
|
|||
}), React.createElement(Antd_Radio.make, {
|
||||
value: "Payouts",
|
||||
children: "Payouts"
|
||||
})), foundGroup !== undefined && foundProperty !== undefined ? EAFunds_Model$ProbExample.run(foundGroup[/* group */0], year, foundProperty) : "", React.createElement("table", {
|
||||
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)));
|
||||
})), foundGroup !== undefined && foundProperty !== undefined ? EAFunds_Model$ProbExample.run(foundGroup[/* group */0], year, foundProperty) : "");
|
||||
}
|
||||
|
||||
var make = EAFunds_Form;
|
||||
|
||||
exports.FormConfig = FormConfig;
|
||||
exports.Form = Form;
|
||||
exports.handleChange = handleChange;
|
||||
exports.make = make;
|
||||
/* Form Not a pure module */
|
||||
/* react Not a pure module */
|
||||
|
|
|
@ -1,16 +1,5 @@
|
|||
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);
|
||||
|
||||
|
@ -62,21 +51,5 @@ let make = () => {
|
|||
}
|
||||
)
|
||||
|> 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>
|
||||
</>;
|
||||
};
|
60
src/EAFunds/EAFunds_Form2.re
Normal file
60
src/EAFunds/EAFunds_Form2.re
Normal 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>
|
||||
</>;
|
||||
};
|
|
@ -2,10 +2,10 @@
|
|||
|
||||
var React = require("react");
|
||||
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')));
|
||||
|
||||
ReactDOMRe.renderToElementWithId(React.createElement(EAFunds_Form$ProbExample.make, { }), "app");
|
||||
ReactDOMRe.renderToElementWithId(React.createElement(EAFunds_Form2$ProbExample.make, { }), "app");
|
||||
|
||||
/* Not a pure module */
|
||||
|
|
|
@ -1,2 +1,2 @@
|
|||
[%bs.raw {|import('./styles/index.css')|}];
|
||||
ReactDOMRe.renderToElementWithId(<EAFunds_Form />, "app");
|
||||
ReactDOMRe.renderToElementWithId(<EAFunds_Form2 />, "app");
|
Loading…
Reference in New Issue
Block a user