More work
This commit is contained in:
parent
6ac72aa11c
commit
466aae951f
10 changed files with 63 additions and 8 deletions
|
@ -3,6 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ReasonReact Examples</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/picnic">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" />
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ReasonReact Examples</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/picnic">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" />
|
||||
|
|
22
src/Container/Container.bs.js
Normal file
22
src/Container/Container.bs.js
Normal file
|
@ -0,0 +1,22 @@
|
|||
'use strict';
|
||||
|
||||
var React = require("react");
|
||||
var UserEntry$ReasonReactExamples = require("../UserEntry/UserEntry.bs.js");
|
||||
var DatePicker$ReasonReactExamples = require("../DatePicker/DatePicker.bs.js");
|
||||
|
||||
function Container(Props) {
|
||||
return React.createElement("div", {
|
||||
className: "flex one"
|
||||
}, React.createElement(DatePicker$ReasonReactExamples.make, { }), React.createElement("ul", undefined, React.createElement(UserEntry$ReasonReactExamples.make, {
|
||||
name: "Anthony",
|
||||
score: "1:00"
|
||||
}), React.createElement(UserEntry$ReasonReactExamples.make, {
|
||||
name: "Mae",
|
||||
score: "0:15"
|
||||
})));
|
||||
}
|
||||
|
||||
var make = Container;
|
||||
|
||||
exports.make = make;
|
||||
/* react Not a pure module */
|
10
src/Container/Container.re
Normal file
10
src/Container/Container.re
Normal file
|
@ -0,0 +1,10 @@
|
|||
[@react.component]
|
||||
let make = () => {
|
||||
<div className="flex one">
|
||||
<DatePicker />
|
||||
<ul>
|
||||
<UserEntry name="Anthony" score="1:00" />
|
||||
<UserEntry name="Mae" score="0:15" />
|
||||
</ul>
|
||||
</div>;
|
||||
};
|
|
@ -5,10 +5,10 @@ var Moment = require("moment");
|
|||
|
||||
function DatePicker(Props) {
|
||||
var date = Moment().format("YYYY-MM-DD");
|
||||
return React.createElement("input", {
|
||||
return React.createElement("div", undefined, React.createElement("input", {
|
||||
type: "date",
|
||||
value: date
|
||||
});
|
||||
}));
|
||||
}
|
||||
|
||||
var make = DatePicker;
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
[@react.component]
|
||||
let make = () => {
|
||||
let date = MomentRe.momentNow() |> MomentRe.Moment.format("YYYY-MM-DD");
|
||||
<input type_="date" value=date />;
|
||||
<div> <input type_="date" value=date /> </div>;
|
||||
};
|
|
@ -2,8 +2,8 @@
|
|||
|
||||
var React = require("react");
|
||||
var ReactDOMRe = require("reason-react/src/ReactDOMRe.js");
|
||||
var DatePicker$ReasonReactExamples = require("./DatePicker/DatePicker.bs.js");
|
||||
var Container$ReasonReactExamples = require("./Container/Container.bs.js");
|
||||
|
||||
ReactDOMRe.renderToElementWithId(React.createElement(DatePicker$ReasonReactExamples.make, { }), "root");
|
||||
ReactDOMRe.renderToElementWithId(React.createElement(Container$ReasonReactExamples.make, { }), "root");
|
||||
|
||||
/* Not a pure module */
|
||||
|
|
|
@ -1 +1 @@
|
|||
ReactDOMRe.renderToElementWithId(<DatePicker />, "root");
|
||||
ReactDOMRe.renderToElementWithId(<Container />, "root");
|
16
src/UserEntry/UserEntry.bs.js
Normal file
16
src/UserEntry/UserEntry.bs.js
Normal file
|
@ -0,0 +1,16 @@
|
|||
'use strict';
|
||||
|
||||
var React = require("react");
|
||||
|
||||
function UserEntry(Props) {
|
||||
var name = Props.name;
|
||||
var score = Props.score;
|
||||
return React.createElement("article", {
|
||||
className: "stack pseudo button"
|
||||
}, React.createElement("div", undefined, name + (" - " + score)));
|
||||
}
|
||||
|
||||
var make = UserEntry;
|
||||
|
||||
exports.make = make;
|
||||
/* react Not a pure module */
|
5
src/UserEntry/UserEntry.re
Normal file
5
src/UserEntry/UserEntry.re
Normal file
|
@ -0,0 +1,5 @@
|
|||
[@react.component]
|
||||
let make = (~name: string, ~score: string) =>
|
||||
<article className="stack pseudo button">
|
||||
<div> {React.string(name ++ " - " ++ score)} </div>
|
||||
</article>;
|
Loading…
Add table
Reference in a new issue