Simple buttons on conditionals

This commit is contained in:
Ozzie Gooen 2020-02-13 21:24:47 +00:00
parent 2f503fbef6
commit b06ac56efd
4 changed files with 107 additions and 12 deletions

View File

@ -211,6 +211,7 @@ module A = {
let unsafe_get = Array.unsafe_get; let unsafe_get = Array.unsafe_get;
let get = Belt.Array.get; let get = Belt.Array.get;
let getBy = Belt.Array.getBy; let getBy = Belt.Array.getBy;
let hasBy = (r, fn) => Belt.Array.getBy(r, fn) |> O.isSome;
let fold_left = Array.fold_left; let fold_left = Array.fold_left;
let fold_right = Array.fold_right; let fold_right = Array.fold_right;
let concatMany = Belt.Array.concatMany; let concatMany = Belt.Array.concatMany;

View File

@ -4,7 +4,7 @@ module Value = {
| Unselected; | Unselected;
type conditional = { type conditional = {
statement: string, name: string,
truthValue: bool, truthValue: bool,
}; };
@ -45,7 +45,7 @@ module Value = {
|> ReasonReact.string |> ReasonReact.string
| SelectSingle(r) => r |> ReasonReact.string | SelectSingle(r) => r |> ReasonReact.string
| ConditionalArray(r) => "Array" |> ReasonReact.string | ConditionalArray(r) => "Array" |> ReasonReact.string
| Conditional(r) => r.statement |> ReasonReact.string | Conditional(r) => r.name |> ReasonReact.string
| FloatCdf(r) => | FloatCdf(r) =>
let cdf: Types.distribution = let cdf: Types.distribution =
CdfLibrary.Distribution.fromString(r, 2000); CdfLibrary.Distribution.fromString(r, 2000);

View File

@ -3,6 +3,26 @@ let handleChange = (handleChange, event) =>
handleChange(ReactEvent.Form.target(event)##value); handleChange(ReactEvent.Form.target(event)##value);
type onChange = option(Value.t) => unit; type onChange = option(Value.t) => unit;
module ConditionalReducer = {
type action =
| ADD_OR_UPDATE_CONDITIONAL(Value.conditional)
| REMOVE_CONDITIONAL(Value.conditional);
let reducer = (items: array(Value.conditional), action: action) =>
switch (action) {
| ADD_OR_UPDATE_CONDITIONAL(conditional) =>
items->E.A.hasBy(c => c.name == conditional.name)
? items
|> E.A.fmap((r: Value.conditional) =>
r.name == conditional.name ? conditional : r
)
: E.A.append(items, [|conditional|])
| REMOVE_CONDITIONAL(conditional) =>
items
|> E.A.filter((c: Value.conditional) => c.name != conditional.name)
};
};
[@react.component] [@react.component]
let make = let make =
( (
@ -11,7 +31,80 @@ let make =
~onChange: onChange, ~onChange: onChange,
) => { ) => {
switch (type_.type_, value) { switch (type_.type_, value) {
| (Conditionals(_), r) => "sdfsdf" |> ReasonReact.string | (Conditionals(l), Some(ConditionalArray(n))) =>
<div>
{n
|> E.A.fmap((r: Value.conditional) =>
<div
onClick={_ =>
onChange(
Some(
Value.ConditionalArray(
ConditionalReducer.reducer(
n,
REMOVE_CONDITIONAL({name: r.name, truthValue: true}),
),
),
),
)
}>
{r.name |> ReasonReact.string}
{(r.truthValue ? "TRUE" : "FALSE") |> ReasonReact.string}
</div>
)
|> ReasonReact.array}
{l.options
|> E.A.fmap(r =>
<div
className="max-w-sm rounded overflow-hidden shadow-sm py-1 px-2 rounded mb-3 bg-gray-200">
{r |> ReasonReact.string}
<button
className="bg-blue-500 hover:bg-blue-700 text-white py-1 px-2 rounded"
onClick={e => {
ReactEvent.Synthetic.preventDefault(e);
onChange(
Some(
Value.ConditionalArray(
ConditionalReducer.reducer(
n,
ADD_OR_UPDATE_CONDITIONAL({
name: r,
truthValue: true,
}),
),
),
),
);
();
}}>
{"true" |> ReasonReact.string}
</button>
<button
className="hover:bg-red-700 text-white py-1 px-2 rounded bg-red-500"
onClick={e => {
ReactEvent.Synthetic.preventDefault(e);
onChange(
Some(
Value.ConditionalArray(
ConditionalReducer.reducer(
n,
ADD_OR_UPDATE_CONDITIONAL({
name: r,
truthValue: false,
}),
),
),
),
);
}}>
{"false" |> ReasonReact.string}
</button>
</div>
)
|> ReasonReact.array}
</div>
| (Conditionals(l), _) =>
l.options |> E.A.fmap(r => r |> ReasonReact.string) |> ReasonReact.array
| (Year(_), Some(FloatPoint(r))) => | (Year(_), Some(FloatPoint(r))) =>
<input <input
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"

View File

@ -229,16 +229,17 @@ module Interface = {
}), }),
(), (),
), ),
TypeWithMetadata.make(
~name="Conditional on World Ending",
~id="worldEnd",
~type_=
Conditionals(
Prop.Type.makeConditionals([||], [|"Foo", "Bar", "Char"|]),
),
(),
),
|], |],
outputTypes: [||], outputTypes: [||],
run, run,
}; };
} /* )*/; };
// TypeWithMetadata.make(
// ~name="Conditional on World Ending",
// ~id="worldEnd",
// ~type_=
// Conditionals(
// Prop.Type.makeConditionals([||], [|"Foo", "Bar", "Char"|]),
// ),
// (),