Last active
July 23, 2019 16:58
-
-
Save xavierzwirtz/ffa0ab4eec82cc6ff62e7d7caa15e777 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
module Theme = MaterialUi_Theme.Theme; | |
module Mixins = MaterialUi_Theme.Mixins; | |
module ZIndex = MaterialUi_Theme.ZIndex; | |
module Spacing = MaterialUi_Theme.Spacing; | |
module Breakpoints = MaterialUi_Theme.Breakpoints; | |
module PaletteColor = MaterialUi_Theme.PaletteColor; | |
module Palette = MaterialUi_Theme.Palette; | |
module Transitions = MaterialUi_Theme.Transitions; | |
type breakpoint; | |
external stringToBreakpoint: string => breakpoint = "%identity"; | |
external intToBreakpoint: int => breakpoint = "%identity"; | |
type breakpointFunc = breakpoint => string; | |
external jsonToBreakpointFunc: Js.Json.t => breakpointFunc = "%identity"; | |
external styleToString: ReactDOMRe.Style.t => string = "%identity"; | |
/* see material-ui.com/layout/breakpoints/#breakpoints for details */ | |
let addBreakpoint = (sourceStyle, ~theme, ~breakpoint, ~style) => { | |
let breakpoint = | |
switch (breakpoint) { | |
| `XS => "xs"->stringToBreakpoint | |
| `SM => "sm"->stringToBreakpoint | |
| `MD => "md"->stringToBreakpoint | |
| `LG => "lg"->stringToBreakpoint | |
| `XL => "xl"->stringToBreakpoint | |
| `Int(x) => x->intToBreakpoint | |
}; | |
let breakpointSource = | |
theme | |
->Theme.breakpointsGet | |
->Breakpoints.upGet | |
->jsonToBreakpointFunc(breakpoint); | |
ReactDOMRe.Style.unsafeAddProp( | |
sourceStyle, | |
breakpointSource, | |
styleToString(style), | |
); | |
}; | |
[@bs.deriving abstract] | |
type transitionCreateArgs = { | |
easing: string, | |
duration: float, | |
}; | |
[@bs.send] | |
external transitionCreateRAW: | |
(Transitions.t, array(string), transitionCreateArgs) => string = | |
"create"; | |
let checkAffect = (affect, value) => affect ? [|value|] : [||]; | |
let transitionCreate = | |
( | |
~theme, | |
~affectWidth=false, | |
~affectMargin=false, | |
~easing: string, | |
~duration: float, | |
() | |
) => { | |
let transitions = Theme.transitionsGet(theme); | |
let affects = | |
Array.concat([ | |
checkAffect(affectWidth, "width"), | |
checkAffect(affectMargin, "margin"), | |
]); | |
let args = transitionCreateArgs(~easing, ~duration); | |
transitionCreateRAW(transitions, affects, args); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment