First part in modification
This commit is contained in:
parent
8fdcc99231
commit
2325ac8d33
|
@ -1,11 +1,11 @@
|
|||
{
|
||||
"name": "reason-react-examples",
|
||||
"name": "probExample",
|
||||
"reason": {
|
||||
"react-jsx": 3
|
||||
},
|
||||
"sources": {
|
||||
"dir" : "src",
|
||||
"subdirs" : true
|
||||
"dir": "src",
|
||||
"subdirs": true
|
||||
},
|
||||
"bsc-flags": ["-bs-super-errors", "-bs-no-version-header"],
|
||||
"package-specs": [{
|
||||
|
@ -15,7 +15,13 @@
|
|||
"suffix": ".bs.js",
|
||||
"namespace": true,
|
||||
"bs-dependencies": [
|
||||
"reason-react"
|
||||
"bs-ant-design-alt",
|
||||
"reason-react",
|
||||
"bs-reform",
|
||||
"reschema"
|
||||
],
|
||||
"refmt": 3
|
||||
}
|
||||
"refmt": 3,
|
||||
"ppx-flags": [
|
||||
"lenses-ppx/ppx"
|
||||
],
|
||||
}
|
10
my-react-app/src/ExampleStyles.bs.js
Normal file
10
my-react-app/src/ExampleStyles.bs.js
Normal file
|
@ -0,0 +1,10 @@
|
|||
'use strict';
|
||||
|
||||
|
||||
var reasonReactBlue = "#48a9dc";
|
||||
|
||||
var style = "\n body {\n background-color: rgb(224, 226, 229);\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n button {\n background-color: white;\n color: " + (String(reasonReactBlue) + (";\n box-shadow: 0 0 0 1px " + (String(reasonReactBlue) + (";\n border: none;\n padding: 8px;\n font-size: 16px;\n }\n button:active {\n background-color: " + (String(reasonReactBlue) + ";\n color: white;\n }\n .container {\n margin: 12px 0px;\n box-shadow: 0px 4px 16px rgb(200, 200, 200);\n width: 720px;\n border-radius: 12px;\n font-family: sans-serif;\n }\n .containerTitle {\n background-color: rgb(242, 243, 245);\n border-radius: 12px 12px 0px 0px;\n padding: 12px;\n font-weight: bold;\n }\n .containerContent {\n background-color: white;\n padding: 16px;\n border-radius: 0px 0px 12px 12px;\n }\n")))));
|
||||
|
||||
exports.reasonReactBlue = reasonReactBlue;
|
||||
exports.style = style;
|
||||
/* style Not a pure module */
|
|
@ -11,7 +11,7 @@ function FetchedDogPictures(Props) {
|
|||
var setState = match[1];
|
||||
var state = match[0];
|
||||
React.useEffect((function () {
|
||||
fetch("https://dog.ceo/api/breeds/image/random/2").then((function (response) {
|
||||
fetch("https://dog.ceo/api/breeds/image/random/3").then((function (response) {
|
||||
return response.json();
|
||||
})).then((function (jsonResponse) {
|
||||
Curry._1(setState, (function (_previousState) {
|
43
my-react-app/src/Index.bs.js
Normal file
43
my-react-app/src/Index.bs.js
Normal file
|
@ -0,0 +1,43 @@
|
|||
'use strict';
|
||||
|
||||
var React = require("react");
|
||||
var ReactDom = require("react-dom");
|
||||
var ExampleStyles$ReasonReactExamples = require("./ExampleStyles.bs.js");
|
||||
var BlinkingGreeting$ReasonReactExamples = require("./BlinkingGreeting/BlinkingGreeting.bs.js");
|
||||
var FetchedDogPictures$ReasonReactExamples = require("./FetchedDogPictures/FetchedDogPictures.bs.js");
|
||||
var ReducerFromReactJSDocs$ReasonReactExamples = require("./ReducerFromReactJSDocs/ReducerFromReactJSDocs.bs.js");
|
||||
var ReasonUsingJSUsingReason$ReasonReactExamples = require("./ReasonUsingJSUsingReason/ReasonUsingJSUsingReason.bs.js");
|
||||
|
||||
var style = document.createElement("style");
|
||||
|
||||
document.head.appendChild(style);
|
||||
|
||||
style.innerHTML = ExampleStyles$ReasonReactExamples.style;
|
||||
|
||||
function makeContainer(text) {
|
||||
var container = document.createElement("div");
|
||||
container.className = "container";
|
||||
var title = document.createElement("div");
|
||||
title.className = "containerTitle";
|
||||
title.innerText = text;
|
||||
var content = document.createElement("div");
|
||||
content.className = "containerContent";
|
||||
container.appendChild(title);
|
||||
container.appendChild(content);
|
||||
document.body.appendChild(container);
|
||||
return content;
|
||||
}
|
||||
|
||||
ReactDom.render(React.createElement(BlinkingGreeting$ReasonReactExamples.make, {
|
||||
children: "Hello!"
|
||||
}), makeContainer("Blinking Greeting"));
|
||||
|
||||
ReactDom.render(React.createElement(ReducerFromReactJSDocs$ReasonReactExamples.make, { }), makeContainer("Reducer From ReactJS Docs"));
|
||||
|
||||
ReactDom.render(React.createElement(FetchedDogPictures$ReasonReactExamples.make, { }), makeContainer("Fetched Dog Pictures"));
|
||||
|
||||
ReactDom.render(React.createElement(ReasonUsingJSUsingReason$ReasonReactExamples.make, { }), makeContainer("Reason Using JS Using Reason"));
|
||||
|
||||
exports.style = style;
|
||||
exports.makeContainer = makeContainer;
|
||||
/* style Not a pure module */
|
11
package.json
11
package.json
|
@ -5,6 +5,7 @@
|
|||
"build": "bsb -make-world",
|
||||
"start": "bsb -make-world -w -ws _ ",
|
||||
"clean": "bsb -clean-world",
|
||||
"parcel": "parcel ./src/index.html --public-url / --no-autoinstall -- watch",
|
||||
"server": "moduleserve ./ --port 8000",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
|
@ -16,12 +17,18 @@
|
|||
"author": "",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"antd": "^3.26.8",
|
||||
"bs-ant-design-alt": "^2.0.0-alpha.32",
|
||||
"bs-reform": "9.7.1",
|
||||
"lenses-ppx": "4.0.0",
|
||||
"parcel-bundler": "^1.12.4",
|
||||
"react": "^16.8.1",
|
||||
"react-dom": "^16.8.1",
|
||||
"reason-react": ">=0.7.0"
|
||||
"reason-react": ">=0.7.0",
|
||||
"reschema": "^1.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"bs-platform": "^7.1.0",
|
||||
"bs-platform": "^5.0.6",
|
||||
"moduleserve": "^0.9.0"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,25 +0,0 @@
|
|||
[@react.component]
|
||||
let make = (~children) => {
|
||||
let (show, setShow) = React.useState(() => true);
|
||||
|
||||
// Notice that instead of `useEffect`, we have `useEffect0`. See
|
||||
// reasonml.github.io/reason-react/docs/en/components#hooks for more info
|
||||
React.useEffect0(() => {
|
||||
let id =
|
||||
Js.Global.setInterval(
|
||||
() => setShow(previousShow => !previousShow),
|
||||
1000,
|
||||
);
|
||||
|
||||
Some(() => Js.Global.clearInterval(id));
|
||||
});
|
||||
|
||||
let style =
|
||||
if (show) {
|
||||
ReactDOMRe.Style.make(~opacity="1", ~transition="opacity 1s", ());
|
||||
} else {
|
||||
ReactDOMRe.Style.make(~opacity="0", ~transition="opacity 1s", ());
|
||||
};
|
||||
|
||||
<div style> children </div>;
|
||||
};
|
48
src/EAFunds/EAFunds_Data.bs.js
Normal file
48
src/EAFunds/EAFunds_Data.bs.js
Normal file
|
@ -0,0 +1,48 @@
|
|||
'use strict';
|
||||
|
||||
|
||||
function makeFundWithInfo(name, group, existingDonations, existingPayouts) {
|
||||
return /* record */[
|
||||
/* group */group,
|
||||
/* name */name,
|
||||
/* existingDonations */existingDonations,
|
||||
/* existingPayouts */existingPayouts
|
||||
];
|
||||
}
|
||||
|
||||
var funds = /* array */[
|
||||
/* record */[
|
||||
/* group : Fund */[/* ANIMAL_WELFARE */0],
|
||||
/* name */"Animal Welfare Fund",
|
||||
/* existingDonations */4000.0,
|
||||
/* existingPayouts */10.0
|
||||
],
|
||||
/* record */[
|
||||
/* group : Fund */[/* GLOBAL_HEALTH */1],
|
||||
/* name */"Global Health Fund",
|
||||
/* existingDonations */4000.0,
|
||||
/* existingPayouts */10.0
|
||||
],
|
||||
/* record */[
|
||||
/* group : Fund */[/* LONG_TERM_FUTURE */2],
|
||||
/* name */"Long Term Future Fund",
|
||||
/* existingDonations */4000.0,
|
||||
/* existingPayouts */10.0
|
||||
],
|
||||
/* record */[
|
||||
/* group : Fund */[/* ANIMAL_WELFARE */0],
|
||||
/* name */"Meta Fund",
|
||||
/* existingDonations */4000.0,
|
||||
/* existingPayouts */10.0
|
||||
],
|
||||
/* record */[
|
||||
/* group : Fund */[/* ANIMAL_WELFARE */0],
|
||||
/* name */"All",
|
||||
/* existingDonations */undefined,
|
||||
/* existingPayouts */undefined
|
||||
]
|
||||
];
|
||||
|
||||
exports.makeFundWithInfo = makeFundWithInfo;
|
||||
exports.funds = funds;
|
||||
/* No side effect */
|
55
src/EAFunds/EAFunds_Data.re
Normal file
55
src/EAFunds/EAFunds_Data.re
Normal file
|
@ -0,0 +1,55 @@
|
|||
type fund =
|
||||
| ANIMAL_WELFARE
|
||||
| GLOBAL_HEALTH
|
||||
| LONG_TERM_FUTURE
|
||||
| META;
|
||||
|
||||
type group =
|
||||
| Fund(fund)
|
||||
| All;
|
||||
|
||||
type parameter =
|
||||
| DONATIONS
|
||||
| PAYOUTS;
|
||||
|
||||
type fundWithInfo = {
|
||||
group,
|
||||
name: string,
|
||||
existingDonations: option(float),
|
||||
existingPayouts: option(float),
|
||||
};
|
||||
|
||||
let makeFundWithInfo = (name, group, existingDonations, existingPayouts) => {
|
||||
group,
|
||||
name,
|
||||
existingDonations,
|
||||
existingPayouts,
|
||||
};
|
||||
|
||||
let funds = [|
|
||||
makeFundWithInfo(
|
||||
"Animal Welfare Fund",
|
||||
Fund(ANIMAL_WELFARE),
|
||||
Some(4000.0),
|
||||
Some(10.0),
|
||||
),
|
||||
makeFundWithInfo(
|
||||
"Global Health Fund",
|
||||
Fund(GLOBAL_HEALTH),
|
||||
Some(4000.0),
|
||||
Some(10.0),
|
||||
),
|
||||
makeFundWithInfo(
|
||||
"Long Term Future Fund",
|
||||
Fund(LONG_TERM_FUTURE),
|
||||
Some(4000.0),
|
||||
Some(10.0),
|
||||
),
|
||||
makeFundWithInfo(
|
||||
"Meta Fund",
|
||||
Fund(ANIMAL_WELFARE),
|
||||
Some(4000.0),
|
||||
Some(10.0),
|
||||
),
|
||||
makeFundWithInfo("All", Fund(ANIMAL_WELFARE), None, None),
|
||||
|];
|
107
src/EAFunds/EAFunds_Form.bs.js
Normal file
107
src/EAFunds/EAFunds_Form.bs.js
Normal file
|
@ -0,0 +1,107 @@
|
|||
'use strict';
|
||||
|
||||
var Curry = require("bs-platform/lib/js/curry.js");
|
||||
var React = require("react");
|
||||
var Antd_Form = require("bs-ant-design-alt/src/Antd_Form.js");
|
||||
var Antd_Input = require("bs-ant-design-alt/src/Antd_Input.js");
|
||||
var Antd_Radio = require("bs-ant-design-alt/src/Antd_Radio.js");
|
||||
var ReForm$BsReform = require("bs-reform/src/ReForm.bs.js");
|
||||
var Helpers$BsReform = require("bs-reform/src/Helpers.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);
|
||||
}
|
||||
|
||||
function EAFunds_Form$FieldString(Props) {
|
||||
Props.field;
|
||||
Props.label;
|
||||
return React.createElement(Form.Field.make, {
|
||||
field: /* Group */0,
|
||||
render: (function (param) {
|
||||
var value = param[/* value */4];
|
||||
var handleChange = param[/* handleChange */0];
|
||||
return React.createElement(Antd_Form.Item.make, {
|
||||
label: "Question Type",
|
||||
help: "Number example: 'How many inches of rain will there be tomorrow?' Binary example: 'Will it rain tomorrow?'",
|
||||
required: true,
|
||||
children: React.createElement(Antd_Radio.Group.make, {
|
||||
defaultValue: value,
|
||||
value: value,
|
||||
onChange: (function (param) {
|
||||
return Helpers$BsReform.handleChange(handleChange, param);
|
||||
}),
|
||||
children: null
|
||||
}, React.createElement(Antd_Radio.make, {
|
||||
value: "FLOAT",
|
||||
children: "Number"
|
||||
}), React.createElement(Antd_Radio.make, {
|
||||
value: "PERCENTAGE",
|
||||
children: "Binary"
|
||||
}))
|
||||
});
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
var FieldString = {
|
||||
make: EAFunds_Form$FieldString
|
||||
};
|
||||
|
||||
function EAFunds_Form(Props) {
|
||||
return React.createElement(Antd_Input.make, { });
|
||||
}
|
||||
|
||||
var make = EAFunds_Form;
|
||||
|
||||
exports.FormConfig = FormConfig;
|
||||
exports.Form = Form;
|
||||
exports.handleChange = handleChange;
|
||||
exports.FieldString = FieldString;
|
||||
exports.make = make;
|
||||
/* Form Not a pure module */
|
54
src/EAFunds/EAFunds_Form.re
Normal file
54
src/EAFunds/EAFunds_Form.re
Normal file
|
@ -0,0 +1,54 @@
|
|||
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);
|
||||
|
||||
module FieldString = {
|
||||
[@react.component]
|
||||
let make = (~field, ~label) => {
|
||||
<Form.Field
|
||||
field=FormConfig.Group
|
||||
render={({handleChange, value}) =>
|
||||
<Antd.Form.Item
|
||||
label={"Question Type" |> ReasonReact.string}
|
||||
required=true
|
||||
help={
|
||||
"Number example: 'How many inches of rain will there be tomorrow?' Binary example: 'Will it rain tomorrow?'"
|
||||
|> ReasonReact.string
|
||||
}>
|
||||
<Antd.Radio.Group
|
||||
value
|
||||
defaultValue=value
|
||||
onChange={Helpers.handleChange(handleChange)}>
|
||||
<Antd.Radio value="FLOAT">
|
||||
{"Number" |> ReasonReact.string}
|
||||
</Antd.Radio>
|
||||
<Antd.Radio value="PERCENTAGE">
|
||||
{"Binary" |> ReasonReact.string}
|
||||
</Antd.Radio>
|
||||
</Antd.Radio.Group>
|
||||
</Antd.Form.Item>
|
||||
}
|
||||
/>;
|
||||
};
|
||||
};
|
||||
|
||||
[@react.component]
|
||||
let make = () => {
|
||||
<Antd.Input
|
||||
// </Antd.Radio.Group>;
|
||||
// <Antd.Radio.Group value=group onChange={handleChange(r => setText(r))}>
|
||||
// let (group, setText) = React.useState(() => "");
|
||||
/>;
|
||||
};
|
|
@ -1,23 +1,23 @@
|
|||
'use strict';
|
||||
|
||||
var Math$ReasonReactExamples = require("./Math.bs.js");
|
||||
var Math$ProbExample = require("../Math.bs.js");
|
||||
|
||||
function yearDiff(year) {
|
||||
return year - 2020.0;
|
||||
}
|
||||
|
||||
function yearlyMeanGrowthRateIfNotClosed(group) {
|
||||
return {
|
||||
meanDiff: 1.1,
|
||||
stdDiff: 1.1
|
||||
};
|
||||
return /* record */[
|
||||
/* meanDiff */1.1,
|
||||
/* stdDiff */1.1
|
||||
];
|
||||
}
|
||||
|
||||
function calculateDifference(currentValue, yearInQuestion, y) {
|
||||
var yearDiff = yearInQuestion - 2020.0;
|
||||
var meanDiff = Math.pow(y.meanDiff, yearDiff);
|
||||
var stdDevDiff = Math.pow(y.meanDiff, yearDiff);
|
||||
return Math$ReasonReactExamples.normal(currentValue * meanDiff, 0.2 * stdDevDiff);
|
||||
var meanDiff = Math.pow(y[/* meanDiff */0], yearDiff);
|
||||
var stdDevDiff = Math.pow(y[/* meanDiff */0], yearDiff);
|
||||
return Math$ProbExample.normal(currentValue * meanDiff, 0.2 * stdDevDiff);
|
||||
}
|
||||
|
||||
function currentValue(group, parameter) {
|
||||
|
@ -63,13 +63,16 @@ var PayoutsIfAround = {
|
|||
currentValue: currentValue
|
||||
};
|
||||
|
||||
function calculate(group, year, parameter) {
|
||||
return calculateDifference(currentValue(group, parameter), year, {
|
||||
meanDiff: 1.1,
|
||||
stdDiff: 1.1
|
||||
});
|
||||
function run(group, year, parameter) {
|
||||
return calculateDifference(currentValue(group, parameter), year, /* record */[
|
||||
/* meanDiff */1.1,
|
||||
/* stdDiff */1.1
|
||||
]);
|
||||
}
|
||||
|
||||
var Model = { };
|
||||
|
||||
exports.PayoutsIfAround = PayoutsIfAround;
|
||||
exports.calculate = calculate;
|
||||
exports.run = run;
|
||||
exports.Model = Model;
|
||||
/* No side effect */
|
|
@ -1,16 +1,4 @@
|
|||
type fund =
|
||||
| ANIMAL_WELFARE
|
||||
| GLOBAL_HEALTH
|
||||
| LONG_TERM_FUTURE
|
||||
| META;
|
||||
|
||||
type group =
|
||||
| Fund(fund)
|
||||
| All;
|
||||
|
||||
type parameter =
|
||||
| DONATIONS
|
||||
| PAYOUTS;
|
||||
open EAFunds_Data;
|
||||
|
||||
type yearlyNumericDiff = {
|
||||
meanDiff: float,
|
||||
|
@ -54,7 +42,7 @@ module PayoutsIfAround = {
|
|||
};
|
||||
};
|
||||
|
||||
let calculate = (group: group, year: float, parameter: parameter) => {
|
||||
let run = (group: group, year: float, parameter: parameter) => {
|
||||
PayoutsIfAround.(
|
||||
calculateDifference(
|
||||
currentValue(group, parameter),
|
||||
|
@ -62,4 +50,12 @@ let calculate = (group: group, year: float, parameter: parameter) => {
|
|||
yearlyMeanGrowthRateIfNotClosed(group),
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
module Model = {
|
||||
type params = {
|
||||
groups: array(fundWithInfo),
|
||||
year: float,
|
||||
parameters: array(parameter),
|
||||
};
|
||||
};
|
|
@ -1,70 +0,0 @@
|
|||
[@bs.val] external fetch: string => Js.Promise.t('a) = "fetch";
|
||||
|
||||
type state =
|
||||
| LoadingDogs
|
||||
| ErrorFetchingDogs
|
||||
| LoadedDogs(array(string));
|
||||
|
||||
[@react.component]
|
||||
let make = () => {
|
||||
let (state, setState) = React.useState(() => LoadingDogs);
|
||||
|
||||
// Notice that instead of `useEffect`, we have `useEffect0`. See
|
||||
// reasonml.github.io/reason-react/docs/en/components#hooks for more info
|
||||
React.useEffect0(() => {
|
||||
Js.Promise.(
|
||||
fetch("https://dog.ceo/api/breeds/image/random/2")
|
||||
|> then_(response => response##json())
|
||||
|> then_(jsonResponse => {
|
||||
setState(_previousState => LoadedDogs(jsonResponse##message));
|
||||
Js.Promise.resolve();
|
||||
})
|
||||
|> catch(_err => {
|
||||
setState(_previousState => ErrorFetchingDogs);
|
||||
Js.Promise.resolve();
|
||||
})
|
||||
|> ignore
|
||||
);
|
||||
|
||||
// Returning None, instead of Some(() => ...), means we don't have any
|
||||
// cleanup to do before unmounting. That's not 100% true. We should
|
||||
// technically cancel the promise. Unofortunately, there's currently no
|
||||
// way to cancel a promise. Promises in general should be way less used
|
||||
// for React components; but since folks do use them, we provide such an
|
||||
// example here. In reality, this fetch should just be a plain callback,
|
||||
// with a cancellation API
|
||||
None;
|
||||
});
|
||||
|
||||
<div
|
||||
style={ReactDOMRe.Style.make(
|
||||
~height="120px",
|
||||
~display="flex",
|
||||
~alignItems="center",
|
||||
~justifyContent="center",
|
||||
(),
|
||||
)}>
|
||||
{switch (state) {
|
||||
| ErrorFetchingDogs => React.string("An error occurred!")
|
||||
| LoadingDogs => React.string("Loading...")
|
||||
| LoadedDogs(dogs) =>
|
||||
dogs
|
||||
->Belt.Array.mapWithIndex((i, dog) => {
|
||||
let imageStyle =
|
||||
ReactDOMRe.Style.make(
|
||||
~height="120px",
|
||||
~width="100%",
|
||||
~marginRight=i === Js.Array.length(dogs) - 1 ? "0px" : "8px",
|
||||
~borderRadius="8px",
|
||||
~boxShadow="0px 4px 16px rgb(200, 200, 200)",
|
||||
~backgroundSize="cover",
|
||||
~backgroundImage={j|url($dog)|j},
|
||||
~backgroundPosition="center",
|
||||
(),
|
||||
);
|
||||
<div key=dog style=imageStyle />;
|
||||
})
|
||||
->React.array
|
||||
}}
|
||||
</div>;
|
||||
};
|
|
@ -1,9 +1,9 @@
|
|||
'use strict';
|
||||
|
||||
var React = require("react");
|
||||
var EAFunds$ReasonReactExamples = require("./EAFunds.bs.js");
|
||||
var EAFunds_Model$ProbExample = require("./EAFunds/EAFunds_Model.bs.js");
|
||||
|
||||
var response = EAFunds$ReasonReactExamples.calculate(/* Fund */[/* GLOBAL_HEALTH */1], 2029, /* DONATIONS */0);
|
||||
var response = EAFunds_Model$ProbExample.run(/* Fund */[/* GLOBAL_HEALTH */1], 2029, /* DONATIONS */0);
|
||||
|
||||
function Funds(Props) {
|
||||
return React.createElement("div", undefined, response);
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
let response = EAFunds.calculate(Fund(GLOBAL_HEALTH), 2029., DONATIONS);
|
||||
let response = EAFunds_Model.run(Fund(GLOBAL_HEALTH), 2029., DONATIONS);
|
||||
|
||||
[@react.component]
|
||||
let make = () => {
|
||||
|
|
|
@ -2,14 +2,14 @@
|
|||
|
||||
var React = require("react");
|
||||
var ReactDom = require("react-dom");
|
||||
var Funds$ReasonReactExamples = require("./Funds.bs.js");
|
||||
var ExampleStyles$ReasonReactExamples = require("./ExampleStyles.bs.js");
|
||||
var EAFunds_Form$ProbExample = require("./EAFunds/EAFunds_Form.bs.js");
|
||||
var ExampleStyles$ProbExample = require("./ExampleStyles.bs.js");
|
||||
|
||||
var style = document.createElement("style");
|
||||
|
||||
document.head.appendChild(style);
|
||||
|
||||
style.innerHTML = ExampleStyles$ReasonReactExamples.style;
|
||||
style.innerHTML = ExampleStyles$ProbExample.style;
|
||||
|
||||
function makeContainer(text) {
|
||||
var container = document.createElement("div");
|
||||
|
@ -25,7 +25,7 @@ function makeContainer(text) {
|
|||
return content;
|
||||
}
|
||||
|
||||
ReactDom.render(React.createElement(Funds$ReasonReactExamples.make, { }), makeContainer("Reason Using JS Using Reason"));
|
||||
ReactDom.render(React.createElement(EAFunds_Form$ProbExample.make, { }), makeContainer("Funds Calculation"));
|
||||
|
||||
exports.style = style;
|
||||
exports.makeContainer = makeContainer;
|
||||
|
|
|
@ -27,4 +27,4 @@ let makeContainer = text => {
|
|||
content;
|
||||
};
|
||||
|
||||
ReactDOMRe.render(<Funds />, makeContainer("Reason Using JS Using Reason"));
|
||||
ReactDOMRe.render(<EAFunds_Form />, makeContainer("Funds Calculation"));
|
|
@ -1,31 +0,0 @@
|
|||
// In this Interop example folder, we have:
|
||||
// - A ReasonReact component, ReasonReactCard.re
|
||||
// - Used by a ReactJS component, ReactJSCard.js (this file)
|
||||
// - ReactJSCard.js can be used by ReasonReact, through bindings in ReasonUsingJSUsingReason.re
|
||||
// - ReasonUsingJSUsingReason.re is used by Index.re
|
||||
|
||||
var ReactDOM = require('react-dom');
|
||||
var React = require('react');
|
||||
|
||||
var ReasonReactCard = require('./ReasonReactCard.bs').make;
|
||||
|
||||
var ReactJSComponent = function() {
|
||||
let backgroundColor = "rgba(0, 0, 0, 0.05)";
|
||||
let padding = "12px";
|
||||
|
||||
// We're not using JSX here, to avoid folks needing to install the related
|
||||
// React toolchains just for this example.
|
||||
// <div style={...}>
|
||||
// <div style={...}>This is a ReactJS card</div>
|
||||
// <ReasonReactCard style={...} />
|
||||
// </div>
|
||||
return React.createElement(
|
||||
"div",
|
||||
{style: {backgroundColor, padding, borderRadius: "8px"}},
|
||||
React.createElement("div", {style: {marginBottom: "8px"}}, "This is a ReactJS card"),
|
||||
React.createElement(ReasonReactCard, {style: {backgroundColor, padding, borderRadius: "4px"}}),
|
||||
)
|
||||
};
|
||||
ReactJSComponent.displayName = "MyBanner";
|
||||
|
||||
module.exports = ReactJSComponent;
|
|
@ -1,10 +0,0 @@
|
|||
// In this Interop example folder, we have:
|
||||
// - A ReasonReact component, ReasonReactCard.re (this file)
|
||||
// - Used by a ReactJS component, ReactJSCard.js
|
||||
// - ReactJSCard.js can be used by ReasonReact, through bindings in ReasonUsingJSUsingReason.re
|
||||
// - ReasonUsingJSUsingReason.re is used by Index.re
|
||||
|
||||
[@react.component]
|
||||
let make = (~style) => {
|
||||
<div style> {React.string("This is a ReasonReact card")} </div>;
|
||||
};
|
|
@ -1,10 +0,0 @@
|
|||
// In this Interop example folder, we have:
|
||||
// - A ReasonReact component, ReasonReactCard.re
|
||||
// - Used by a ReactJS component, ReactJSCard.js
|
||||
// - ReactJSCard.js can be used by ReasonReact, through bindings in ReasonUsingJSUsingReason.re (this file)
|
||||
// - ReasonUsingJSUsingReason.re is used by Index.re
|
||||
|
||||
// All you need to do to use a ReactJS component in ReasonReact, is to write the lines below!
|
||||
// reasonml.github.io/reason-react/docs/en/components#import-from-js
|
||||
[@react.component] [@bs.module]
|
||||
external make: unit => React.element = "./ReactJSCard";
|
|
@ -1,44 +0,0 @@
|
|||
// This is the ReactJS documentation's useReducer example, directly ported over
|
||||
// https://reactjs.org/docs/hooks-reference.html#usereducer
|
||||
|
||||
// A little extra we've put, because the ReactJS example has no styling
|
||||
let leftButtonStyle = ReactDOMRe.Style.make(~borderRadius="4px 0px 0px 4px", ~width="48px", ());
|
||||
let rightButtonStyle = ReactDOMRe.Style.make(~borderRadius="0px 4px 4px 0px", ~width="48px", ());
|
||||
|
||||
// Record and variant need explicit declarations.
|
||||
type state = {count: int};
|
||||
|
||||
type action =
|
||||
| Increment
|
||||
| Decrement;
|
||||
|
||||
let initialState = {count: 0};
|
||||
|
||||
let reducer = (state, action) => {
|
||||
switch (action) {
|
||||
| Increment => {count: state.count + 1}
|
||||
| Decrement => {count: state.count - 1}
|
||||
};
|
||||
};
|
||||
|
||||
[@react.component]
|
||||
let make = () => {
|
||||
let (state, dispatch) = React.useReducer(reducer, initialState);
|
||||
|
||||
// We can use a fragment here, but we don't, because we want to style the counter
|
||||
<div
|
||||
style={ReactDOMRe.Style.make(~display="flex", ~alignItems="center", ~justifyContent="space-between", ())}>
|
||||
<div>
|
||||
{React.string("Count: ")}
|
||||
{React.string(string_of_int(state.count))}
|
||||
</div>
|
||||
<div>
|
||||
<button style=leftButtonStyle onClick={_event => dispatch(Decrement)}>
|
||||
{React.string("-")}
|
||||
</button>
|
||||
<button style=rightButtonStyle onClick={_event => dispatch(Increment)}>
|
||||
{React.string("+")}
|
||||
</button>
|
||||
</div>
|
||||
</div>;
|
||||
};
|
|
@ -3,59 +3,59 @@
|
|||
var Block = require("bs-platform/lib/js/block.js");
|
||||
|
||||
function foo(joint) {
|
||||
return [
|
||||
{
|
||||
statements: [
|
||||
{
|
||||
statement: /* Senate */Block.__(0, [/* DEMOCRAT_VICTORY */0]),
|
||||
outcome: /* Bool */Block.__(0, [true])
|
||||
},
|
||||
{
|
||||
statement: /* House */Block.__(1, [/* DEMOCRAT_VICTORY */0]),
|
||||
outcome: /* Bool */Block.__(0, [true])
|
||||
}
|
||||
return /* array */[
|
||||
/* record */[
|
||||
/* statements : array */[
|
||||
/* record */[
|
||||
/* statement : Senate */Block.__(0, [/* DEMOCRAT_VICTORY */0]),
|
||||
/* outcome : Bool */Block.__(0, [true])
|
||||
],
|
||||
/* record */[
|
||||
/* statement : House */Block.__(1, [/* DEMOCRAT_VICTORY */0]),
|
||||
/* outcome : Bool */Block.__(0, [true])
|
||||
]
|
||||
],
|
||||
probability: 0.2
|
||||
},
|
||||
{
|
||||
statements: [
|
||||
{
|
||||
statement: /* Senate */Block.__(0, [/* DEMOCRAT_VICTORY */0]),
|
||||
outcome: /* Bool */Block.__(0, [true])
|
||||
},
|
||||
{
|
||||
statement: /* House */Block.__(1, [/* DEMOCRAT_VICTORY */0]),
|
||||
outcome: /* Bool */Block.__(0, [false])
|
||||
}
|
||||
/* probability */0.2
|
||||
],
|
||||
/* record */[
|
||||
/* statements : array */[
|
||||
/* record */[
|
||||
/* statement : Senate */Block.__(0, [/* DEMOCRAT_VICTORY */0]),
|
||||
/* outcome : Bool */Block.__(0, [true])
|
||||
],
|
||||
/* record */[
|
||||
/* statement : House */Block.__(1, [/* DEMOCRAT_VICTORY */0]),
|
||||
/* outcome : Bool */Block.__(0, [false])
|
||||
]
|
||||
],
|
||||
probability: 0.2
|
||||
},
|
||||
{
|
||||
statements: [
|
||||
{
|
||||
statement: /* Senate */Block.__(0, [/* DEMOCRAT_VICTORY */0]),
|
||||
outcome: /* Bool */Block.__(0, [false])
|
||||
},
|
||||
{
|
||||
statement: /* House */Block.__(1, [/* DEMOCRAT_VICTORY */0]),
|
||||
outcome: /* Bool */Block.__(0, [true])
|
||||
}
|
||||
/* probability */0.2
|
||||
],
|
||||
/* record */[
|
||||
/* statements : array */[
|
||||
/* record */[
|
||||
/* statement : Senate */Block.__(0, [/* DEMOCRAT_VICTORY */0]),
|
||||
/* outcome : Bool */Block.__(0, [false])
|
||||
],
|
||||
/* record */[
|
||||
/* statement : House */Block.__(1, [/* DEMOCRAT_VICTORY */0]),
|
||||
/* outcome : Bool */Block.__(0, [true])
|
||||
]
|
||||
],
|
||||
probability: 0.5
|
||||
},
|
||||
{
|
||||
statements: [
|
||||
{
|
||||
statement: /* Senate */Block.__(0, [/* DEMOCRAT_VICTORY */0]),
|
||||
outcome: /* Bool */Block.__(0, [false])
|
||||
},
|
||||
{
|
||||
statement: /* House */Block.__(1, [/* DEMOCRAT_VICTORY */0]),
|
||||
outcome: /* Bool */Block.__(0, [false])
|
||||
}
|
||||
/* probability */0.5
|
||||
],
|
||||
/* record */[
|
||||
/* statements : array */[
|
||||
/* record */[
|
||||
/* statement : Senate */Block.__(0, [/* DEMOCRAT_VICTORY */0]),
|
||||
/* outcome : Bool */Block.__(0, [false])
|
||||
],
|
||||
/* record */[
|
||||
/* statement : House */Block.__(1, [/* DEMOCRAT_VICTORY */0]),
|
||||
/* outcome : Bool */Block.__(0, [false])
|
||||
]
|
||||
],
|
||||
probability: 0.1
|
||||
}
|
||||
/* probability */0.1
|
||||
]
|
||||
];
|
||||
}
|
||||
|
||||
|
|
|
@ -24,12 +24,12 @@ function sharesOutstanding(price, marketCap) {
|
|||
}
|
||||
|
||||
function run(company, year, param, otherSettings) {
|
||||
var match = company.currentPrice;
|
||||
var match$1 = company.marketCap;
|
||||
var match = company[/* currentPrice */1];
|
||||
var match$1 = company[/* marketCap */2];
|
||||
switch (param) {
|
||||
case /* SHARE_PRICE */0 :
|
||||
if (match !== undefined && year > 2019 && year < 2030) {
|
||||
var diffYears = year - otherSettings.currentYear | 0;
|
||||
var diffYears = year - otherSettings[/* currentYear */0] | 0;
|
||||
return normal(match, diffYears * 0.1);
|
||||
} else {
|
||||
return ;
|
||||
|
@ -44,7 +44,7 @@ function run(company, year, param, otherSettings) {
|
|||
}
|
||||
case /* MARKET_CAP */2 :
|
||||
if (match$1 !== undefined && year > 2019 && year < 2030) {
|
||||
var diffYears$1 = year - otherSettings.currentYear | 0;
|
||||
var diffYears$1 = year - otherSettings[/* currentYear */0] | 0;
|
||||
return normal(match$1, diffYears$1 * 0.1);
|
||||
} else {
|
||||
return ;
|
||||
|
|
Loading…
Reference in New Issue
Block a user