Merge branch 'rescript-refactor' of github.com:QURIresearch/squiggle into rescript-refactor
* 'rescript-refactor' of github.com:QURIresearch/squiggle: Re-add Ant Design components
This commit is contained in:
commit
10dba97f7d
|
@ -38,7 +38,7 @@
|
||||||
"@rescriptbr/reform",
|
"@rescriptbr/reform",
|
||||||
"@rescript/react",
|
"@rescript/react",
|
||||||
"bs-css",
|
"bs-css",
|
||||||
"bs-css-dom",
|
"bs-css-emotion",
|
||||||
"@foretold-app/squiggle",
|
"@foretold-app/squiggle",
|
||||||
"rationale",
|
"rationale",
|
||||||
"bs-moment",
|
"bs-moment",
|
||||||
|
|
|
@ -37,7 +37,7 @@
|
||||||
"binary-search-tree": "0.2.6",
|
"binary-search-tree": "0.2.6",
|
||||||
"bs-ant-design-alt": "2.0.0-alpha.33",
|
"bs-ant-design-alt": "2.0.0-alpha.33",
|
||||||
"bs-css": "^15.1.0",
|
"bs-css": "^15.1.0",
|
||||||
"bs-css-dom": "^3.1.0",
|
"bs-css-emotion": "^4.1.0",
|
||||||
"bs-moment": "0.6.0",
|
"bs-moment": "0.6.0",
|
||||||
"bsb-js": "1.1.7",
|
"bsb-js": "1.1.7",
|
||||||
"css-loader": "^6.6.0",
|
"css-loader": "^6.6.0",
|
||||||
|
|
|
@ -88,9 +88,9 @@ module Index = {
|
||||||
|
|
||||||
let buildNav = _ => {
|
let buildNav = _ => {
|
||||||
let rec buildFolder = (f: folderEntry) =>
|
let rec buildFolder = (f: folderEntry) =>
|
||||||
<div key=f.id style=Styles.folderNav>
|
<div key=f.id className=Styles.folderNav>
|
||||||
<h4 onClick={_e => changeId(f.id)}> {f.title->React.string} </h4>
|
<h4 onClick={_e => changeId(f.id)}> {f.title->React.string} </h4>
|
||||||
<div style=Styles.folderChildren>
|
<div className=Styles.folderChildren>
|
||||||
{(f.children
|
{(f.children
|
||||||
|> E.L.fmap(e =>
|
|> E.L.fmap(e =>
|
||||||
switch e {
|
switch e {
|
||||||
|
@ -102,7 +102,7 @@ module Index = {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
and buildEntry = (e: compEntry) =>
|
and buildEntry = (e: compEntry) =>
|
||||||
<div key=e.id style=Styles.compNav onClick={_e => changeId(e.id)}>
|
<div key=e.id className=Styles.compNav onClick={_e => changeId(e.id)}>
|
||||||
{e.title->React.string}
|
{e.title->React.string}
|
||||||
</div>
|
</div>
|
||||||
(entries
|
(entries
|
||||||
|
@ -118,7 +118,7 @@ module Index = {
|
||||||
let renderEntry = e =>
|
let renderEntry = e =>
|
||||||
switch e.container {
|
switch e.container {
|
||||||
| FullWidth => e.render()
|
| FullWidth => e.render()
|
||||||
| Sidebar => <div style=Styles.sidebarContainer> {e.render()} </div>
|
| Sidebar => <div className=Styles.sidebarContainer> {e.render()} </div>
|
||||||
}
|
}
|
||||||
|
|
||||||
@react.component
|
@react.component
|
||||||
|
@ -132,9 +132,9 @@ module Index = {
|
||||||
let _ = RescriptReactRouter.watchUrl(url => setRoute(_ => url))
|
let _ = RescriptReactRouter.watchUrl(url => setRoute(_ => url))
|
||||||
}) |> ignore
|
}) |> ignore
|
||||||
|
|
||||||
<div style=Styles.pageContainer>
|
<div className=Styles.pageContainer>
|
||||||
<div style=Styles.leftNav> {buildNav(setRoute)} </div>
|
<div className=Styles.leftNav> {buildNav(setRoute)} </div>
|
||||||
<div style=Styles.compContainer>
|
<div className=Styles.compContainer>
|
||||||
{if route.hash == "" {
|
{if route.hash == "" {
|
||||||
React.null
|
React.null
|
||||||
} else {
|
} else {
|
||||||
|
@ -148,7 +148,7 @@ module Index = {
|
||||||
|> E.L.fmap(child =>
|
|> E.L.fmap(child =>
|
||||||
switch child {
|
switch child {
|
||||||
| CompEntry(c) =>
|
| CompEntry(c) =>
|
||||||
<div style=Styles.folderChildContainer key=c.id> {renderEntry(c)} </div>
|
<div className=Styles.folderChildContainer key=c.id> {renderEntry(c)} </div>
|
||||||
| _ => React.null
|
| _ => React.null
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
|
@ -9,7 +9,7 @@ type makeType = props => React.element
|
||||||
~ghost: bool=?,
|
~ghost: bool=?,
|
||||||
~href: string=?,
|
~href: string=?,
|
||||||
~htmlType: @string [#button | #submit | #submit]=?,
|
~htmlType: @string [#button | #submit | #submit]=?,
|
||||||
~icon: 'a=?,
|
~icon: Antd_IconName.t=?,
|
||||||
~shape: @string [#circle | #round]=?,
|
~shape: @string [#circle | #round]=?,
|
||||||
~size: @string [#small | #large]=?,
|
~size: @string [#small | #large]=?,
|
||||||
~target: string=?,
|
~target: string=?,
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
|
|
||||||
@deriving(abstract)
|
@deriving(abstract)
|
||||||
type props
|
type props
|
||||||
type makeType = props => React.element
|
type makeType = props => React.element
|
||||||
|
|
|
@ -47,6 +47,6 @@ module Item = {
|
||||||
~children:React.element=?,
|
~children:React.element=?,
|
||||||
unit
|
unit
|
||||||
) => props = ""
|
) => props = ""
|
||||||
@module("antd")
|
@module("antd/lib/form/FormItem")
|
||||||
external make : makeType = "Form.Item"
|
external make : makeType = "default"
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
%%raw(`require("antd/lib/grid/style")`)
|
||||||
|
|
||||||
|
|
||||||
module Row = {
|
module Row = {
|
||||||
|
|
21397
packages/playground/src/Antd/antd.css
Normal file
21397
packages/playground/src/Antd/antd.css
Normal file
File diff suppressed because it is too large
Load Diff
|
@ -1,60 +1,13 @@
|
||||||
type route =
|
type route =
|
||||||
| DistBuilder
|
| DistBuilder
|
||||||
| Home
|
|
||||||
| NotFound
|
| NotFound
|
||||||
|
|
||||||
let routeToPath = route =>
|
let routeToPath = route =>
|
||||||
switch route {
|
switch route {
|
||||||
| DistBuilder => "/dist-builder"
|
| DistBuilder => "/"
|
||||||
| Home => "/"
|
|
||||||
| _ => "/"
|
| _ => "/"
|
||||||
}
|
}
|
||||||
|
|
||||||
module Menu = {
|
|
||||||
module Styles = {
|
|
||||||
open CssJs
|
|
||||||
let menu = style(. [ position(#relative),
|
|
||||||
marginTop(em(0.25)),
|
|
||||||
marginBottom(em(0.25)),
|
|
||||||
selector(.
|
|
||||||
"a",
|
|
||||||
[ borderRadius(em(0.25)),
|
|
||||||
display(#inlineBlock),
|
|
||||||
backgroundColor(#hex("eee")),
|
|
||||||
padding(em(1.)),
|
|
||||||
cursor(#pointer),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
selector(. "a:hover", [ backgroundColor(#hex("bfcad4")) ]),
|
|
||||||
selector(. "a:hover", [ backgroundColor(#hex("bfcad4")) ]),
|
|
||||||
selector(.
|
|
||||||
"a:not(:firstChild):not(:lastChild)",
|
|
||||||
[ marginRight(em(0.25)), marginLeft(em(0.25)) ],
|
|
||||||
),
|
|
||||||
])
|
|
||||||
}
|
|
||||||
|
|
||||||
module Item = {
|
|
||||||
@react.component
|
|
||||||
let make = (~href, ~children) =>
|
|
||||||
<a
|
|
||||||
href
|
|
||||||
onClick={e => {
|
|
||||||
e->ReactEvent.Synthetic.preventDefault
|
|
||||||
RescriptReactRouter.push(href)
|
|
||||||
}}>
|
|
||||||
children
|
|
||||||
</a>
|
|
||||||
}
|
|
||||||
|
|
||||||
@react.component
|
|
||||||
let make = () =>
|
|
||||||
<div style=Styles.menu>
|
|
||||||
<Item href={routeToPath(Home)} key="home"> {"Home" |> R.ste} </Item>
|
|
||||||
<Item href={routeToPath(DistBuilder)} key="dist-builder"> {"Dist Builder" |> R.ste} </Item>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
let fixedLength = r => <div className="w-full max-w-screen-xl mx-auto px-6"> r </div>
|
let fixedLength = r => <div className="w-full max-w-screen-xl mx-auto px-6"> r </div>
|
||||||
|
|
||||||
@react.component
|
@react.component
|
||||||
|
@ -62,16 +15,13 @@ let make = () => {
|
||||||
let url = RescriptReactRouter.useUrl()
|
let url = RescriptReactRouter.useUrl()
|
||||||
|
|
||||||
let routing = switch url.path {
|
let routing = switch url.path {
|
||||||
| list{"dist-builder"} => DistBuilder
|
| list{} => DistBuilder
|
||||||
| list{} => Home
|
|
||||||
| _ => NotFound
|
| _ => NotFound
|
||||||
}
|
}
|
||||||
|
|
||||||
<>
|
<>
|
||||||
<Menu />
|
|
||||||
{switch routing {
|
{switch routing {
|
||||||
| DistBuilder => <DistBuilder />
|
| DistBuilder => <DistBuilder />
|
||||||
| Home => <Home />
|
|
||||||
| _ => fixedLength("Page is not found" |> R.ste)
|
| _ => fixedLength("Page is not found" |> R.ste)
|
||||||
}}
|
}}
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -59,25 +59,28 @@ module FieldFloat = {
|
||||||
<Form.Field
|
<Form.Field
|
||||||
field
|
field
|
||||||
render={({handleChange, error, value, validate}) =>
|
render={({handleChange, error, value, validate}) =>
|
||||||
<Antd.Input
|
<Antd.Form.Item label={label}>
|
||||||
value
|
<Antd.Input
|
||||||
onChange={ReForm.Helpers.handleChange(handleChange)}
|
value
|
||||||
onBlur={_ => validate()}
|
onChange={ReForm.Helpers.handleChange(handleChange)}
|
||||||
style={className}
|
onBlur={_ => validate()}
|
||||||
/>
|
className={className}
|
||||||
|
/>
|
||||||
|
</Antd.Form.Item>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
|
|
||||||
module Styles = {
|
module Styles = {
|
||||||
open CssJs
|
open CssJs
|
||||||
let rows = style(. [ selector(. ">.antCol:firstChild", [ paddingLeft(em(0.25)), paddingRight(em(0.125)) ]),
|
let rows = style(. [
|
||||||
selector(. ">.antCol:lastChild", [ paddingLeft(em(0.125)), paddingRight(em(0.25)) ]),
|
selector(. ">.antCol:firstChild", [ paddingLeft(em(0.25)), paddingRight(em(0.125)) ]),
|
||||||
selector(.
|
selector(. ">.antCol:lastChild", [ paddingLeft(em(0.125)), paddingRight(em(0.25)) ]),
|
||||||
">.antCol:not(:firstChild):not(:lastChild)",
|
selector(.
|
||||||
[ paddingLeft(em(0.125)), paddingRight(em(0.125)) ],
|
">.antCol:not(:firstChild):not(:lastChild)",
|
||||||
),
|
[ paddingLeft(em(0.125)), paddingRight(em(0.125)) ],
|
||||||
])
|
),
|
||||||
|
])
|
||||||
let parent = style(. [ selector(. ".antInputNumber", [ width(#percent(100.)) ]),
|
let parent = style(. [ selector(. ".antInputNumber", [ width(#percent(100.)) ]),
|
||||||
selector(. ".anticon", [ verticalAlign(#zero) ]),
|
selector(. ".anticon", [ verticalAlign(#zero) ]),
|
||||||
])
|
])
|
||||||
|
@ -238,14 +241,13 @@ let make = () => {
|
||||||
<div className="grid grid-cols-2 gap-4">
|
<div className="grid grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<Antd.Card
|
<Antd.Card
|
||||||
title={"Distribution Form" |> R.ste}
|
title={"Distribution Form" |> R.ste}>
|
||||||
extra={<Antd.Button icon=Antd.IconName.reload shape=#circle onClick=onReload />}>
|
|
||||||
<Form.Provider value=reform>
|
<Form.Provider value=reform>
|
||||||
<Antd.Form onSubmit>
|
<Antd.Form onSubmit>
|
||||||
<Row _type="flex" style=Styles.rows>
|
<Row _type="flex" className=Styles.rows>
|
||||||
<Col span=24> <FieldText field=FormConfig.SquiggleString label="Program" /> </Col>
|
<Col span=24> <FieldText field=FormConfig.SquiggleString label="Program" /> </Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row _type="flex" style=Styles.rows>
|
<Row _type="flex" className=Styles.rows>
|
||||||
<Col span=12> <FieldFloat field=FormConfig.SampleCount label="Sample Count" /> </Col>
|
<Col span=12> <FieldFloat field=FormConfig.SampleCount label="Sample Count" /> </Col>
|
||||||
<Col span=12>
|
<Col span=12>
|
||||||
<FieldFloat field=FormConfig.OutputXYPoints label="Output XY-points" />
|
<FieldFloat field=FormConfig.OutputXYPoints label="Output XY-points" />
|
||||||
|
|
|
@ -234,7 +234,7 @@ module Chart = {
|
||||||
(distPlus, config),
|
(distPlus, config),
|
||||||
)
|
)
|
||||||
<div
|
<div
|
||||||
style={
|
className={
|
||||||
open CssJs
|
open CssJs
|
||||||
style(. [ minHeight(#px(DistPlusPlotReducer.heightToPix(config.height))) ])
|
style(. [ minHeight(#px(DistPlusPlotReducer.heightToPix(config.height))) ])
|
||||||
}>
|
}>
|
||||||
|
|
|
@ -86,7 +86,7 @@ let make = (
|
||||||
~showVerticalLine=false,
|
~showVerticalLine=false,
|
||||||
~timeScale=?,
|
~timeScale=?,
|
||||||
) =>
|
) =>
|
||||||
<div style={Styles.graph(color)}>
|
<div className={Styles.graph(color)}>
|
||||||
<RawPlot
|
<RawPlot
|
||||||
?maxX
|
?maxX
|
||||||
?minX
|
?minX
|
||||||
|
|
|
@ -24,7 +24,7 @@ let make = (~number, ~precision) => {
|
||||||
{JS.powerGet(numberWithPresentation) |> R.O.fmapOrNull(e =>
|
{JS.powerGet(numberWithPresentation) |> R.O.fmapOrNull(e =>
|
||||||
<span>
|
<span>
|
||||||
{j`\\u00b710` |> React.string}
|
{j`\\u00b710` |> React.string}
|
||||||
<span style=sup> {e |> E.Float.toString |> React.string} </span>
|
<span className=sup> {e |> E.Float.toString |> React.string} </span>
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</span>
|
</span>
|
||||||
|
|
|
@ -6,6 +6,7 @@
|
||||||
<title>Squiggle Language</title>
|
<title>Squiggle Language</title>
|
||||||
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
|
||||||
<link href="./styles/index.css" rel="stylesheet">
|
<link href="./styles/index.css" rel="stylesheet">
|
||||||
|
<link href="./styles/antd.css" rel="stylesheet">
|
||||||
<script src="./Index.bs.js" defer></script>
|
<script src="./Index.bs.js" defer></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
|
@ -1,19 +0,0 @@
|
||||||
module Styles = {
|
|
||||||
open CssJs
|
|
||||||
let h3 = style(. [ fontSize(#em(1.5)), marginBottom(#em(1.5)) ])
|
|
||||||
let card = style(. [ marginTop(#em(2.)), marginBottom(#em(2.)) ])
|
|
||||||
}
|
|
||||||
|
|
||||||
module Table = {
|
|
||||||
module TableStyles = {
|
|
||||||
open CssJs
|
|
||||||
let row = style(. [ display(#flex), height(#em(4.)) ])
|
|
||||||
let col = (~f=1.0, ()) => style(. [ flex(#num(f)) ])
|
|
||||||
}
|
|
||||||
|
|
||||||
@react.component
|
|
||||||
let make = () => <> </>
|
|
||||||
}
|
|
||||||
|
|
||||||
@react.component
|
|
||||||
let make = () => <div> <div style=Styles.card> <Table /> </div> </div>
|
|
21397
packages/playground/src/styles/antd.css
Normal file
21397
packages/playground/src/styles/antd.css
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user