Makes use Antd components
This commit is contained in:
parent
6c6f1e151c
commit
95585fb43d
|
@ -1,4 +1,5 @@
|
||||||
open BsReform;
|
open BsReform;
|
||||||
|
open Antd.Grid;
|
||||||
|
|
||||||
module FormConfig = [%lenses
|
module FormConfig = [%lenses
|
||||||
type state = {
|
type state = {
|
||||||
|
@ -40,10 +41,20 @@ module FieldString = {
|
||||||
|
|
||||||
module Styles = {
|
module Styles = {
|
||||||
open Css;
|
open Css;
|
||||||
let row =
|
let rows =
|
||||||
style([display(`flex), selector("div > div", [flex(`num(1.))])]);
|
style([
|
||||||
|
selector(
|
||||||
|
">.ant-col:first-child",
|
||||||
|
[paddingLeft(em(0.25)), paddingRight(em(0.125))],
|
||||||
|
),
|
||||||
|
selector(
|
||||||
|
">.ant-col:last-child",
|
||||||
|
[paddingLeft(em(0.125)), paddingRight(em(0.25))],
|
||||||
|
),
|
||||||
|
]);
|
||||||
let form = style([backgroundColor(hex("eee")), padding(em(1.))]);
|
let form = style([backgroundColor(hex("eee")), padding(em(1.))]);
|
||||||
let spacer = style([marginTop(em(3.))]);
|
let dist = style([padding(em(1.))]);
|
||||||
|
let spacer = style([marginTop(em(1.))]);
|
||||||
};
|
};
|
||||||
|
|
||||||
module FieldFloat = {
|
module FieldFloat = {
|
||||||
|
@ -64,6 +75,26 @@ module FieldFloat = {
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
module DemoDist = {
|
||||||
|
[@react.component]
|
||||||
|
let make = (~guesstimatorString, ~domain, ~unit) => {
|
||||||
|
<Antd.Card title={"Distribution" |> E.ste}>
|
||||||
|
<div className=Styles.spacer />
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
{DistPlusIngredients.make(~guesstimatorString, ~domain, ~unit, ())
|
||||||
|
|> DistPlusIngredients.toDistPlus(
|
||||||
|
~sampleCount=10000,
|
||||||
|
~outputXYPoints=2000,
|
||||||
|
~truncateTo=Some(1000),
|
||||||
|
)
|
||||||
|
|> E.O.React.fmapOrNull(distPlus => <DistPlusPlot distPlus />)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Antd.Card>;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
[@react.component]
|
[@react.component]
|
||||||
let make = () => {
|
let make = () => {
|
||||||
let reform =
|
let reform =
|
||||||
|
@ -134,29 +165,36 @@ let make = () => {
|
||||||
|
|
||||||
let guesstimatorString = reform.state.values.guesstimatorString;
|
let guesstimatorString = reform.state.values.guesstimatorString;
|
||||||
|
|
||||||
|
let demoDist =
|
||||||
|
React.useMemo1(
|
||||||
|
() => {<DemoDist guesstimatorString domain unit />},
|
||||||
|
[|
|
||||||
|
reform.state.values.guesstimatorString,
|
||||||
|
reform.state.values.domainType,
|
||||||
|
reform.state.values.xPoint,
|
||||||
|
reform.state.values.xPoint2,
|
||||||
|
reform.state.values.xPoint2,
|
||||||
|
reform.state.values.excludingProbabilityMass,
|
||||||
|
reform.state.values.excludingProbabilityMass2,
|
||||||
|
reform.state.values.unitType,
|
||||||
|
reform.state.values.zero |> E.M.format(E.M.format_standard),
|
||||||
|
reform.state.values.unit,
|
||||||
|
|],
|
||||||
|
);
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<div className=Styles.spacer />
|
<div className=Styles.spacer />
|
||||||
<div>
|
demoDist
|
||||||
<div>
|
|
||||||
{DistPlusIngredients.make(~guesstimatorString, ~domain, ~unit, ())
|
|
||||||
|> DistPlusIngredients.toDistPlus(
|
|
||||||
~sampleCount=10000,
|
|
||||||
~outputXYPoints=2000,
|
|
||||||
~truncateTo=Some(1000),
|
|
||||||
)
|
|
||||||
|> E.O.React.fmapOrNull(distPlus => <DistPlusPlot distPlus />)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className=Styles.spacer />
|
<div className=Styles.spacer />
|
||||||
<div className=Styles.form>
|
<Antd.Card title={"Distribution Form" |> E.ste}>
|
||||||
<Form.Provider value=reform>
|
<Form.Provider value=reform>
|
||||||
<Antd.Form onSubmit>
|
<Antd.Form onSubmit>
|
||||||
<FieldString
|
<FieldString
|
||||||
field=FormConfig.GuesstimatorString
|
field=FormConfig.GuesstimatorString
|
||||||
label="Guesstimator String"
|
label="Guesstimator String"
|
||||||
/>
|
/>
|
||||||
<div className=Styles.row>
|
<Row _type=`flex>
|
||||||
<div>
|
<Col span=4>
|
||||||
<Form.Field
|
<Form.Field
|
||||||
field=FormConfig.DomainType
|
field=FormConfig.DomainType
|
||||||
render={({handleChange, value}) =>
|
render={({handleChange, value}) =>
|
||||||
|
@ -178,28 +216,36 @@ let make = () => {
|
||||||
</Antd.Form.Item>
|
</Antd.Form.Item>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</Col>
|
||||||
<div>
|
<Col span=10>
|
||||||
<FieldString field=FormConfig.XPoint label="X-point" />
|
<Row _type=`flex className=Styles.rows>
|
||||||
</div>
|
<Col span=12>
|
||||||
<div>
|
<FieldString field=FormConfig.XPoint label="X-point" />
|
||||||
<FieldString
|
</Col>
|
||||||
field=FormConfig.ExcludingProbabilityMass
|
<Col span=12>
|
||||||
label="Excluding Probability Mass"
|
<FieldString
|
||||||
/>
|
field=FormConfig.ExcludingProbabilityMass
|
||||||
</div>
|
label="Excluding Probability Mass"
|
||||||
<div>
|
/>
|
||||||
<FieldString field=FormConfig.XPoint2 label="X-point (2)" />
|
</Col>
|
||||||
</div>
|
</Row>
|
||||||
<div>
|
</Col>
|
||||||
<FieldString
|
<Col span=10>
|
||||||
field=FormConfig.ExcludingProbabilityMass2
|
<Row _type=`flex className=Styles.rows>
|
||||||
label="Excluding Probability Mass (2)"
|
<Col span=12>
|
||||||
/>
|
<FieldString field=FormConfig.XPoint2 label="X-point (2)" />
|
||||||
</div>
|
</Col>
|
||||||
</div>
|
<Col span=12>
|
||||||
<div className=Styles.row>
|
<FieldString
|
||||||
<div>
|
field=FormConfig.ExcludingProbabilityMass2
|
||||||
|
label="Excluding Probability Mass (2)"
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row _type=`flex>
|
||||||
|
<Col span=4>
|
||||||
<Form.Field
|
<Form.Field
|
||||||
field=FormConfig.UnitType
|
field=FormConfig.UnitType
|
||||||
render={({handleChange, value}) =>
|
render={({handleChange, value}) =>
|
||||||
|
@ -215,64 +261,37 @@ let make = () => {
|
||||||
</Antd.Form.Item>
|
</Antd.Form.Item>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</Col>
|
||||||
<div>
|
<Col span=10>
|
||||||
<Form.Field
|
<Row _type=`flex className=Styles.rows>
|
||||||
field=FormConfig.Zero
|
<Col span=12>
|
||||||
render={({handleChange, value}) =>
|
<Form.Field
|
||||||
<Antd.Form.Item label={"Zero" |> E.ste}>
|
field=FormConfig.Zero
|
||||||
<Antd_DatePicker
|
render={({handleChange, value}) =>
|
||||||
value
|
<Antd.Form.Item label={"Zero" |> E.ste}>
|
||||||
onChange={e => {
|
<Antd_DatePicker
|
||||||
e |> handleChange;
|
value
|
||||||
_ => ();
|
onChange={e => {
|
||||||
}}
|
e |> handleChange;
|
||||||
/>
|
_ => ();
|
||||||
</Antd.Form.Item>
|
}}
|
||||||
}
|
/>
|
||||||
/>
|
</Antd.Form.Item>
|
||||||
</div>
|
}
|
||||||
<div>
|
/>
|
||||||
<Form.Field
|
</Col>
|
||||||
field=FormConfig.Unit
|
<Col span=12>
|
||||||
render={({handleChange, value}) =>
|
<FieldString
|
||||||
<Antd.Form.Item label={"Unit" |> E.ste}>
|
field=FormConfig.ExcludingProbabilityMass
|
||||||
<Antd.Select value onChange={e => e |> handleChange}>
|
label="Excluding Probability Mass"
|
||||||
<Antd.Select.Option value="days">
|
/>
|
||||||
{"days" |> E.ste}
|
</Col>
|
||||||
</Antd.Select.Option>
|
</Row>
|
||||||
<Antd.Select.Option value="hours">
|
</Col>
|
||||||
{"hours" |> E.ste}
|
<Col span=10 />
|
||||||
</Antd.Select.Option>
|
</Row>
|
||||||
<Antd.Select.Option value="milliseconds">
|
|
||||||
{"milliseconds" |> E.ste}
|
|
||||||
</Antd.Select.Option>
|
|
||||||
<Antd.Select.Option value="minutes">
|
|
||||||
{"minutes" |> E.ste}
|
|
||||||
</Antd.Select.Option>
|
|
||||||
<Antd.Select.Option value="months">
|
|
||||||
{"months" |> E.ste}
|
|
||||||
</Antd.Select.Option>
|
|
||||||
<Antd.Select.Option value="quarters">
|
|
||||||
{"quarters" |> E.ste}
|
|
||||||
</Antd.Select.Option>
|
|
||||||
<Antd.Select.Option value="seconds">
|
|
||||||
{"seconds" |> E.ste}
|
|
||||||
</Antd.Select.Option>
|
|
||||||
<Antd.Select.Option value="weeks">
|
|
||||||
{"weeks" |> E.ste}
|
|
||||||
</Antd.Select.Option>
|
|
||||||
<Antd.Select.Option value="years">
|
|
||||||
{"years" |> E.ste}
|
|
||||||
</Antd.Select.Option>
|
|
||||||
</Antd.Select>
|
|
||||||
</Antd.Form.Item>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Antd.Form>
|
</Antd.Form>
|
||||||
</Form.Provider>
|
</Form.Provider>
|
||||||
</div>
|
</Antd.Card>
|
||||||
</div>;
|
</div>;
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue
Block a user