Re-add Ant Design components
This commit is contained in:
parent
c357b3c7c1
commit
9fec945273
|
@ -38,7 +38,7 @@
|
|||
"@rescriptbr/reform",
|
||||
"@rescript/react",
|
||||
"bs-css",
|
||||
"bs-css-dom",
|
||||
"bs-css-emotion",
|
||||
"@foretold-app/squiggle",
|
||||
"rationale",
|
||||
"bs-moment",
|
||||
|
|
|
@ -37,7 +37,7 @@
|
|||
"binary-search-tree": "0.2.6",
|
||||
"bs-ant-design-alt": "2.0.0-alpha.33",
|
||||
"bs-css": "^15.1.0",
|
||||
"bs-css-dom": "^3.1.0",
|
||||
"bs-css-emotion": "^4.1.0",
|
||||
"bs-moment": "0.6.0",
|
||||
"bsb-js": "1.1.7",
|
||||
"css-loader": "^6.6.0",
|
||||
|
|
|
@ -88,9 +88,9 @@ module Index = {
|
|||
|
||||
let buildNav = _ => {
|
||||
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>
|
||||
<div style=Styles.folderChildren>
|
||||
<div className=Styles.folderChildren>
|
||||
{(f.children
|
||||
|> E.L.fmap(e =>
|
||||
switch e {
|
||||
|
@ -102,7 +102,7 @@ module Index = {
|
|||
</div>
|
||||
</div>
|
||||
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}
|
||||
</div>
|
||||
(entries
|
||||
|
@ -118,7 +118,7 @@ module Index = {
|
|||
let renderEntry = e =>
|
||||
switch e.container {
|
||||
| FullWidth => e.render()
|
||||
| Sidebar => <div style=Styles.sidebarContainer> {e.render()} </div>
|
||||
| Sidebar => <div className=Styles.sidebarContainer> {e.render()} </div>
|
||||
}
|
||||
|
||||
@react.component
|
||||
|
@ -132,9 +132,9 @@ module Index = {
|
|||
let _ = RescriptReactRouter.watchUrl(url => setRoute(_ => url))
|
||||
}) |> ignore
|
||||
|
||||
<div style=Styles.pageContainer>
|
||||
<div style=Styles.leftNav> {buildNav(setRoute)} </div>
|
||||
<div style=Styles.compContainer>
|
||||
<div className=Styles.pageContainer>
|
||||
<div className=Styles.leftNav> {buildNav(setRoute)} </div>
|
||||
<div className=Styles.compContainer>
|
||||
{if route.hash == "" {
|
||||
React.null
|
||||
} else {
|
||||
|
@ -148,7 +148,7 @@ module Index = {
|
|||
|> E.L.fmap(child =>
|
||||
switch child {
|
||||
| CompEntry(c) =>
|
||||
<div style=Styles.folderChildContainer key=c.id> {renderEntry(c)} </div>
|
||||
<div className=Styles.folderChildContainer key=c.id> {renderEntry(c)} </div>
|
||||
| _ => React.null
|
||||
}
|
||||
)
|
||||
|
|
|
@ -9,7 +9,7 @@ type makeType = props => React.element
|
|||
~ghost: bool=?,
|
||||
~href: string=?,
|
||||
~htmlType: @string [#button | #submit | #submit]=?,
|
||||
~icon: 'a=?,
|
||||
~icon: Antd_IconName.t=?,
|
||||
~shape: @string [#circle | #round]=?,
|
||||
~size: @string [#small | #large]=?,
|
||||
~target: string=?,
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
@deriving(abstract)
|
||||
type props
|
||||
type makeType = props => React.element
|
||||
|
|
|
@ -47,6 +47,6 @@ module Item = {
|
|||
~children:React.element=?,
|
||||
unit
|
||||
) => props = ""
|
||||
@module("antd")
|
||||
external make : makeType = "Form.Item"
|
||||
@module("antd/lib/form/FormItem")
|
||||
external make : makeType = "default"
|
||||
}
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
%%raw(`require("antd/lib/grid/style")`)
|
||||
|
||||
|
||||
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 =
|
||||
| DistBuilder
|
||||
| Home
|
||||
| NotFound
|
||||
|
||||
let routeToPath = route =>
|
||||
switch route {
|
||||
| DistBuilder => "/dist-builder"
|
||||
| Home => "/"
|
||||
| DistBuilder => "/"
|
||||
| _ => "/"
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
@react.component
|
||||
|
@ -62,16 +15,13 @@ let make = () => {
|
|||
let url = RescriptReactRouter.useUrl()
|
||||
|
||||
let routing = switch url.path {
|
||||
| list{"dist-builder"} => DistBuilder
|
||||
| list{} => Home
|
||||
| list{} => DistBuilder
|
||||
| _ => NotFound
|
||||
}
|
||||
|
||||
<>
|
||||
<Menu />
|
||||
{switch routing {
|
||||
| DistBuilder => <DistBuilder />
|
||||
| Home => <Home />
|
||||
| _ => fixedLength("Page is not found" |> R.ste)
|
||||
}}
|
||||
</>
|
||||
|
|
|
@ -59,19 +59,22 @@ module FieldFloat = {
|
|||
<Form.Field
|
||||
field
|
||||
render={({handleChange, error, value, validate}) =>
|
||||
<Antd.Form.Item label={label}>
|
||||
<Antd.Input
|
||||
value
|
||||
onChange={ReForm.Helpers.handleChange(handleChange)}
|
||||
onBlur={_ => validate()}
|
||||
style={className}
|
||||
className={className}
|
||||
/>
|
||||
</Antd.Form.Item>
|
||||
}
|
||||
/>
|
||||
}
|
||||
|
||||
module Styles = {
|
||||
open CssJs
|
||||
let rows = style(. [ selector(. ">.antCol:firstChild", [ paddingLeft(em(0.25)), paddingRight(em(0.125)) ]),
|
||||
let rows = style(. [
|
||||
selector(. ">.antCol:firstChild", [ paddingLeft(em(0.25)), paddingRight(em(0.125)) ]),
|
||||
selector(. ">.antCol:lastChild", [ paddingLeft(em(0.125)), paddingRight(em(0.25)) ]),
|
||||
selector(.
|
||||
">.antCol:not(:firstChild):not(:lastChild)",
|
||||
|
@ -238,14 +241,13 @@ let make = () => {
|
|||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Antd.Card
|
||||
title={"Distribution Form" |> R.ste}
|
||||
extra={<Antd.Button icon=Antd.IconName.reload shape=#circle onClick=onReload />}>
|
||||
title={"Distribution Form" |> R.ste}>
|
||||
<Form.Provider value=reform>
|
||||
<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>
|
||||
</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.OutputXYPoints label="Output XY-points" />
|
||||
|
|
|
@ -234,7 +234,7 @@ module Chart = {
|
|||
(distPlus, config),
|
||||
)
|
||||
<div
|
||||
style={
|
||||
className={
|
||||
open CssJs
|
||||
style(. [ minHeight(#px(DistPlusPlotReducer.heightToPix(config.height))) ])
|
||||
}>
|
||||
|
|
|
@ -86,7 +86,7 @@ let make = (
|
|||
~showVerticalLine=false,
|
||||
~timeScale=?,
|
||||
) =>
|
||||
<div style={Styles.graph(color)}>
|
||||
<div className={Styles.graph(color)}>
|
||||
<RawPlot
|
||||
?maxX
|
||||
?minX
|
||||
|
|
|
@ -24,7 +24,7 @@ let make = (~number, ~precision) => {
|
|||
{JS.powerGet(numberWithPresentation) |> R.O.fmapOrNull(e =>
|
||||
<span>
|
||||
{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>
|
||||
|
|
|
@ -6,6 +6,7 @@
|
|||
<title>Squiggle Language</title>
|
||||
<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/antd.css" rel="stylesheet">
|
||||
<script src="./Index.bs.js" defer></script>
|
||||
</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