rowtype-yoga/ry-blocks
1
0
Fork 0
mirror of https://github.com/rowtype-yoga/ry-blocks.git synced 2024-08-18 01:30:31 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add stub for match media for tests

Browse Source
This commit is contained in:
Mark Eibes 2021-01-09 17:50:29 +01:00
parent 5ca62b4237
commit ba24329b30
17 changed files with 40820 additions and 7712 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32672
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -56,4 +56,4 @@
"react-popper": "^2.2.4",
"react-syntax-highlighter": "^15.3.1"
}
}
}

61
src/Framer/Motion.js
View File

@ -1,5 +1,66 @@
const framerMotion = require("framer-motion")
const React = require("react")
const Emotion = require("@emotion/core")
exports.animatePresence = () => framerMotion.AnimatePresence
exports.animateSharedLayout = () => framerMotion.AnimateSharedLayout
const flattenDataProp = (props) => {
let data = null;
if (props._data != null) {
data = { _data: undefined };
Object.entries(props._data).forEach(function (entry) {
data["data-" + entry[0]] = entry[1];
});
}
let aria = null;
if (props._aria != null) {
aria = { _aria: undefined };
Object.entries(props._aria).forEach(function (entry) {
aria["aria-" + entry[0]] = entry[1];
});
}
if (data == null && aria == null) {
return props
} else if (aria == null) {
return Object.assign({}, props, data);
} else if (data == null) {
return Object.assign({}, props, aria)
} else {
return Object.assign({}, props, data, aria)
}
};
exports.motionElement_ = (component, props, areChildrenDynamic) => {
const args = [component, flattenDataProp(props)];
// const c = React.forwardRef((props, ref) =>
// createElement(el)(flattenDataProp(props, ref))
// );
return React.createElement.apply(
null,
areChildrenDynamic || props.children == null
? args
: args.concat(props.children)
);
};
exports.motionElementKeyed_ = (component, props) =>
exports.motionElement_(component, props, true);
exports.styledMotionElement_ = (component, props, areChildrenDynamic) => {
const args = [component, flattenDataProp(props)];
// const c = React.forwardRef((props, ref) =>
// createElement(el)(flattenDataProp(props, ref))
// );
return Emotion.jsx.apply(
null,
areChildrenDynamic || props.children == null
? args
: args.concat(props.children)
);
};
exports.styledMotionElementKeyed_ = (component, props) =>
exports.styledMotionElement_(component, props, true);

55
src/Framer/Motion.purs
View File

@ -5,15 +5,21 @@ module Framer.Motion
, animateSharedLayout
, module Framer.Motion.Types
, module Framer.Motion.MotionComponent
, element
, elementKeyed
, elementStyled
, elementStyledKeyed
) where
import Prelude hiding (div, map, sub)
import Data.Function.Uncurried (Fn2, runFn2)
import Framer.Motion.MotionComponent (_data, abbr, address, area, article, aside, audio, b, base, bdi, bdo, blockquote, body, br, button, canvas, caption, circle, cite, clipPath, code, col, colgroup, custom, datalist, dd, defs, del, desc, details, dfn, dialog, div, dl, dt, ellipse, em, embed, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feDropShadow, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feImage, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence, fieldset, figcaption, figure, filter, footer, foreignObject, form, g, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, image, img, input, ins, kbd, keygen, label, legend, li, line, linearGradient, link, main, map, mark, marker, mask, menu, menuitem, meta, metadata, meter, motionComponentImpl, nav, noscript, object, ol, optgroup, option, output, p, param, path, pattern, picture, polygon, polyline, pre, progress, q, radialGradient, rect, rp, rt, ruby, s, samp, script, section, select, small, source, span, stop, strong, style, sub, summary, sup, svg, svgAnimate, svgSwitch, symbol, table, tbody, td, text, textPath, textarea, tfoot, th, thead, time, title, tr, track, tspan, u, ul, use, var, video, view, wbr)
import Framer.Motion.Types (class EffectFnMaker, Animate, AnimatePresenceProps, AnimateSharedLayoutProps, AnimateSharedLayoutType(..), AnimationControls, BoundingBox2D, Drag, DragConstraints, DragElastic, DragMomentum, DragPropagation, EventInfo, Exit, Infinity, Initial, Layout, LayoutId, LayoutTransition, MakeVariantLabel(..), MotionProps, MotionPropsF, OnDrag, OnDragEnd, OnDragStart, OnHoverEnd, OnHoverStart, OnTap, OnTapCancel, OnTapEnd, OnTapStart, PanInfo, Point2D, TapInfo, Target(..), TargetAndTransition, Transition, VariantLabel(..), Variants, WhileHover, WhileTap, animate, boundingBox2D, callback, crossfade, customProp, drag, dragConstraints, dragElastic, dragMomentum, dragPropagation, exit, infinity, initial, layout, layoutId, makeVariantLabels, onDrag, onDragEnd, onDragStart, onHoverEnd, onHoverStart, onTap, onTapCancel, onTapEnd, onTapStart, prop, switch, toEffectFn, transition, variants, variantsFromObject, whileHover, whileTap)
import Prim.Row (class Nub, class Union)
import React.Basic (ReactComponent)
import React.Basic (JSX, ReactComponent)
import React.Basic.Emotion (Style)
import Record (disjointUnion)
import Untagged.Castable (class Castable, cast)
import Framer.Motion.MotionComponent (_data, abbr, address, area, article, aside, audio, b, base, bdi, bdo, blockquote, body, br, button, canvas, caption, circle, cite, clipPath, code, col, colgroup, custom, datalist, dd, defs, del, desc, details, dfn, dialog, div, dl, dt, ellipse, em, embed, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feDropShadow, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feImage, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence, fieldset, figcaption, figure, filter, footer, foreignObject, form, g, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, image, img, input, ins, kbd, keygen, label, legend, li, line, linearGradient, link, main, map, mark, marker, mask, menu, menuitem, meta, metadata, meter, motionComponentImpl, nav, noscript, object, ol, optgroup, option, output, p, param, path, pattern, picture, polygon, polyline, pre, progress, q, radialGradient, rect, rp, rt, ruby, s, samp, script, section, select, small, source, span, stop, strong, style, sub, summary, sup, svg, svgAnimate, svgSwitch, symbol, table, tbody, td, text, textPath, textarea, tfoot, th, thead, time, title, tr, track, tspan, u, ul, use, var, video, view, wbr)
withMotion ∷
∀ result baseProps motionSubset.
@ -34,3 +40,48 @@ foreign import animateSharedLayout ∷
∀ attrs attrs_.
Union attrs attrs_ AnimateSharedLayoutProps =>
ReactComponent { | attrs }
element ∷ ∀ p. ReactComponent { | p } -> { | p } -> JSX
element = runFn2 motionElement_
foreign import motionElement_ ∷
∀ props. Fn2 (ReactComponent { | props }) { | props } JSX
elementKeyed ∷
∀ props.
ReactComponent { | MotionProps props } ->
{ key ∷ String | MotionProps props } ->
JSX
elementKeyed = runFn2 motionElementKeyed_
foreign import motionElementKeyed_ ∷
∀ props.
Fn2 (ReactComponent { | MotionProps props })
{ key ∷ String | MotionProps props }
JSX
elementStyled ∷
∀ props.
ReactComponent { className ∷ String | props } ->
{ className ∷ String, css ∷ Style | props } ->
JSX
elementStyled = runFn2 styledMotionElement_
foreign import styledMotionElement_ ∷
∀ props.
Fn2 (ReactComponent { className ∷ String | props })
{ className ∷ String, css ∷ Style | props }
JSX
elementStyledKeyed ∷
∀ props.
ReactComponent { className ∷ String | props } ->
{ className ∷ String, css ∷ Style, key ∷ String | props } ->
JSX
elementStyledKeyed = runFn2 styledMotionElementKeyed_
foreign import styledMotionElementKeyed_ ∷
∀ props.
Fn2 (ReactComponent { className ∷ String | props })
{ className ∷ String, css ∷ Style, key ∷ String | props }
JSX

332
src/Framer/Motion/MotionComponent.purs
View File

@ -16,506 +16,506 @@ foreign import custom ∷
Effect (ReactComponent { | MotionProps old })
-- DOM
abbr :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_abbr) => ReactComponent { | attrs }
abbr ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_abbr) => ReactComponent { | attrs }
abbr = motionComponentImpl "abbr"
address :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_address) => ReactComponent { | attrs }
address ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_address) => ReactComponent { | attrs }
address = motionComponentImpl "address"
area :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_area) => ReactComponent { | attrs }
area ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_area) => ReactComponent { | attrs }
area = motionComponentImpl "area"
article :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_article) => ReactComponent { | attrs }
article ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_article) => ReactComponent { | attrs }
article = motionComponentImpl "article"
aside :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_aside) => ReactComponent { | attrs }
aside ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_aside) => ReactComponent { | attrs }
aside = motionComponentImpl "aside"
audio :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_audio) => ReactComponent { | attrs }
audio ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_audio) => ReactComponent { | attrs }
audio = motionComponentImpl "audio"
b :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_b) => ReactComponent { | attrs }
b ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_b) => ReactComponent { | attrs }
b = motionComponentImpl "b"
base :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_base) => ReactComponent { | attrs }
base ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_base) => ReactComponent { | attrs }
base = motionComponentImpl "base"
bdi :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_bdi) => ReactComponent { | attrs }
bdi ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_bdi) => ReactComponent { | attrs }
bdi = motionComponentImpl "bdi"
bdo :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_bdo) => ReactComponent { | attrs }
bdo ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_bdo) => ReactComponent { | attrs }
bdo = motionComponentImpl "bdo"
-- No support in React Basic Hooks
-- big :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_big) => ReactComponent { | attrs }
-- big = motionComponentImpl "big"
blockquote :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_blockquote) => ReactComponent { | attrs }
blockquote ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_blockquote) => ReactComponent { | attrs }
blockquote = motionComponentImpl "blockquote"
body :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_body) => ReactComponent { | attrs }
body ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_body) => ReactComponent { | attrs }
body = motionComponentImpl "body"
br :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_br) => ReactComponent { | attrs }
br ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_br) => ReactComponent { | attrs }
br = motionComponentImpl "br"
button :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_button) => ReactComponent { | attrs }
button ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_button) => ReactComponent { | attrs }
button = motionComponentImpl "button"
canvas :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_canvas) => ReactComponent { | attrs }
canvas ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_canvas) => ReactComponent { | attrs }
canvas = motionComponentImpl "canvas"
caption :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_caption) => ReactComponent { | attrs }
caption ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_caption) => ReactComponent { | attrs }
caption = motionComponentImpl "caption"
cite :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_cite) => ReactComponent { | attrs }
cite ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_cite) => ReactComponent { | attrs }
cite = motionComponentImpl "cite"
code :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_code) => ReactComponent { | attrs }
code ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_code) => ReactComponent { | attrs }
code = motionComponentImpl "code"
col :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_col) => ReactComponent { | attrs }
col ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_col) => ReactComponent { | attrs }
col = motionComponentImpl "col"
colgroup :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_colgroup) => ReactComponent { | attrs }
colgroup ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_colgroup) => ReactComponent { | attrs }
colgroup = motionComponentImpl "colgroup"
_data :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_data) => ReactComponent { | attrs }
_data ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_data) => ReactComponent { | attrs }
_data = motionComponentImpl "data"
datalist :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_datalist) => ReactComponent { | attrs }
datalist ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_datalist) => ReactComponent { | attrs }
datalist = motionComponentImpl "datalist"
dd :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_dd) => ReactComponent { | attrs }
dd ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_dd) => ReactComponent { | attrs }
dd = motionComponentImpl "dd"
del :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_del) => ReactComponent { | attrs }
del ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_del) => ReactComponent { | attrs }
del = motionComponentImpl "del"
details :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_details) => ReactComponent { | attrs }
details ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_details) => ReactComponent { | attrs }
details = motionComponentImpl "details"
dfn :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_dfn) => ReactComponent { | attrs }
dfn ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_dfn) => ReactComponent { | attrs }
dfn = motionComponentImpl "dfn"
dialog :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_dialog) => ReactComponent { | attrs }
dialog ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_dialog) => ReactComponent { | attrs }
dialog = motionComponentImpl "dialog"
div :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_div) => ReactComponent { | attrs }
div ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_div) => ReactComponent { | attrs }
div = motionComponentImpl "div"
dl :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_dl) => ReactComponent { | attrs }
dl ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_dl) => ReactComponent { | attrs }
dl = motionComponentImpl "dl"
dt :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_dt) => ReactComponent { | attrs }
dt ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_dt) => ReactComponent { | attrs }
dt = motionComponentImpl "dt"
em :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_em) => ReactComponent { | attrs }
em ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_em) => ReactComponent { | attrs }
em = motionComponentImpl "em"
embed :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_embed) => ReactComponent { | attrs }
embed ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_embed) => ReactComponent { | attrs }
embed = motionComponentImpl "embed"
fieldset :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_fieldset) => ReactComponent { | attrs }
fieldset ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_fieldset) => ReactComponent { | attrs }
fieldset = motionComponentImpl "fieldset"
figcaption :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_figcaption) => ReactComponent { | attrs }
figcaption ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_figcaption) => ReactComponent { | attrs }
figcaption = motionComponentImpl "figcaption"
figure :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_figure) => ReactComponent { | attrs }
figure ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_figure) => ReactComponent { | attrs }
figure = motionComponentImpl "figure"
footer :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_footer) => ReactComponent { | attrs }
footer ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_footer) => ReactComponent { | attrs }
footer = motionComponentImpl "footer"
form :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_form) => ReactComponent { | attrs }
form ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_form) => ReactComponent { | attrs }
form = motionComponentImpl "form"
h1 :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h1) => ReactComponent { | attrs }
h1 ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h1) => ReactComponent { | attrs }
h1 = motionComponentImpl "h1"
h2 :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h2) => ReactComponent { | attrs }
h2 ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h2) => ReactComponent { | attrs }
h2 = motionComponentImpl "h2"
h3 :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h3) => ReactComponent { | attrs }
h3 ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h3) => ReactComponent { | attrs }
h3 = motionComponentImpl "h3"
h4 :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h4) => ReactComponent { | attrs }
h4 ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h4) => ReactComponent { | attrs }
h4 = motionComponentImpl "h4"
h5 :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h5) => ReactComponent { | attrs }
h5 ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h5) => ReactComponent { | attrs }
h5 = motionComponentImpl "h5"
h6 :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h6) => ReactComponent { | attrs }
h6 ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_h6) => ReactComponent { | attrs }
h6 = motionComponentImpl "h6"
head :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_head) => ReactComponent { | attrs }
head ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_head) => ReactComponent { | attrs }
head = motionComponentImpl "head"
header :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_header) => ReactComponent { | attrs }
header ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_header) => ReactComponent { | attrs }
header = motionComponentImpl "header"
hgroup :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_hgroup) => ReactComponent { | attrs }
hgroup ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_hgroup) => ReactComponent { | attrs }
hgroup = motionComponentImpl "hgroup"
hr :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_hr) => ReactComponent { | attrs }
hr ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_hr) => ReactComponent { | attrs }
hr = motionComponentImpl "hr"
html :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_html) => ReactComponent { | attrs }
html ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_html) => ReactComponent { | attrs }
html = motionComponentImpl "html"
i :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_i) => ReactComponent { | attrs }
i ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_i) => ReactComponent { | attrs }
i = motionComponentImpl "i"
iframe :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_iframe) => ReactComponent { | attrs }
iframe ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_iframe) => ReactComponent { | attrs }
iframe = motionComponentImpl "iframe"
img :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_img) => ReactComponent { | attrs }
img ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_img) => ReactComponent { | attrs }
img = motionComponentImpl "img"
input :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_input) => ReactComponent { | attrs }
input ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_input) => ReactComponent { | attrs }
input = motionComponentImpl "input"
ins :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_ins) => ReactComponent { | attrs }
ins ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_ins) => ReactComponent { | attrs }
ins = motionComponentImpl "ins"
kbd :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_kbd) => ReactComponent { | attrs }
kbd ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_kbd) => ReactComponent { | attrs }
kbd = motionComponentImpl "kbd"
keygen :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_keygen) => ReactComponent { | attrs }
keygen ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_keygen) => ReactComponent { | attrs }
keygen = motionComponentImpl "keygen"
label :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_label) => ReactComponent { | attrs }
label ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_label) => ReactComponent { | attrs }
label = motionComponentImpl "label"
legend :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_legend) => ReactComponent { | attrs }
legend ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_legend) => ReactComponent { | attrs }
legend = motionComponentImpl "legend"
li :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_li) => ReactComponent { | attrs }
li ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_li) => ReactComponent { | attrs }
li = motionComponentImpl "li"
link :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_link) => ReactComponent { | attrs }
link ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_link) => ReactComponent { | attrs }
link = motionComponentImpl "link"
main :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_main) => ReactComponent { | attrs }
main ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_main) => ReactComponent { | attrs }
main = motionComponentImpl "main"
map :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_map) => ReactComponent { | attrs }
map ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_map) => ReactComponent { | attrs }
map = motionComponentImpl "map"
mark :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_mark) => ReactComponent { | attrs }
mark ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_mark) => ReactComponent { | attrs }
mark = motionComponentImpl "mark"
menu :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_menu) => ReactComponent { | attrs }
menu ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_menu) => ReactComponent { | attrs }
menu = motionComponentImpl "menu"
menuitem :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_menuitem) => ReactComponent { | attrs }
menuitem ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_menuitem) => ReactComponent { | attrs }
menuitem = motionComponentImpl "menuitem"
meta :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_meta) => ReactComponent { | attrs }
meta ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_meta) => ReactComponent { | attrs }
meta = motionComponentImpl "meta"
meter :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_meter) => ReactComponent { | attrs }
meter ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_meter) => ReactComponent { | attrs }
meter = motionComponentImpl "meter"
nav :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_nav) => ReactComponent { | attrs }
nav ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_nav) => ReactComponent { | attrs }
nav = motionComponentImpl "nav"
noscript :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_noscript) => ReactComponent { | attrs }
noscript ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_noscript) => ReactComponent { | attrs }
noscript = motionComponentImpl "noscript"
object :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_object) => ReactComponent { | attrs }
object ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_object) => ReactComponent { | attrs }
object = motionComponentImpl "object"
ol :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_ol) => ReactComponent { | attrs }
ol ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_ol) => ReactComponent { | attrs }
ol = motionComponentImpl "ol"
optgroup :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_optgroup) => ReactComponent { | attrs }
optgroup ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_optgroup) => ReactComponent { | attrs }
optgroup = motionComponentImpl "optgroup"
option :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_option) => ReactComponent { | attrs }
option ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_option) => ReactComponent { | attrs }
option = motionComponentImpl "option"
output :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_output) => ReactComponent { | attrs }
output ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_output) => ReactComponent { | attrs }
output = motionComponentImpl "output"
p :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_p) => ReactComponent { | attrs }
p ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_p) => ReactComponent { | attrs }
p = motionComponentImpl "p"
param :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_param) => ReactComponent { | attrs }
param ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_param) => ReactComponent { | attrs }
param = motionComponentImpl "param"
picture :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_picture) => ReactComponent { | attrs }
picture ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_picture) => ReactComponent { | attrs }
picture = motionComponentImpl "picture"
pre :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_pre) => ReactComponent { | attrs }
pre ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_pre) => ReactComponent { | attrs }
pre = motionComponentImpl "pre"
progress :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_progress) => ReactComponent { | attrs }
progress ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_progress) => ReactComponent { | attrs }
progress = motionComponentImpl "progress"
q :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_q) => ReactComponent { | attrs }
q ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_q) => ReactComponent { | attrs }
q = motionComponentImpl "q"
rp :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_rp) => ReactComponent { | attrs }
rp ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_rp) => ReactComponent { | attrs }
rp = motionComponentImpl "rp"
rt :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_rt) => ReactComponent { | attrs }
rt ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_rt) => ReactComponent { | attrs }
rt = motionComponentImpl "rt"
ruby :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_ruby) => ReactComponent { | attrs }
ruby ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_ruby) => ReactComponent { | attrs }
ruby = motionComponentImpl "ruby"
s :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_s) => ReactComponent { | attrs }
s ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_s) => ReactComponent { | attrs }
s = motionComponentImpl "s"
samp :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_samp) => ReactComponent { | attrs }
samp ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_samp) => ReactComponent { | attrs }
samp = motionComponentImpl "samp"
script :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_script) => ReactComponent { | attrs }
script ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_script) => ReactComponent { | attrs }
script = motionComponentImpl "script"
section :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_section) => ReactComponent { | attrs }
section ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_section) => ReactComponent { | attrs }
section = motionComponentImpl "section"
select :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_select) => ReactComponent { | attrs }
select ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_select) => ReactComponent { | attrs }
select = motionComponentImpl "select"
small :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_small) => ReactComponent { | attrs }
small ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_small) => ReactComponent { | attrs }
small = motionComponentImpl "small"
source :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_source) => ReactComponent { | attrs }
source ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_source) => ReactComponent { | attrs }
source = motionComponentImpl "source"
span :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_span) => ReactComponent { | attrs }
span ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_span) => ReactComponent { | attrs }
span = motionComponentImpl "span"
strong :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_strong) => ReactComponent { | attrs }
strong ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_strong) => ReactComponent { | attrs }
strong = motionComponentImpl "strong"
style :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_style) => ReactComponent { | attrs }
style ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_style) => ReactComponent { | attrs }
style = motionComponentImpl "style"
sub :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_sub) => ReactComponent { | attrs }
sub ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_sub) => ReactComponent { | attrs }
sub = motionComponentImpl "sub"
summary :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_summary) => ReactComponent { | attrs }
summary ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_summary) => ReactComponent { | attrs }
summary = motionComponentImpl "summary"
sup :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_sup) => ReactComponent { | attrs }
sup ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_sup) => ReactComponent { | attrs }
sup = motionComponentImpl "sup"
table :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_table) => ReactComponent { | attrs }
table ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_table) => ReactComponent { | attrs }
table = motionComponentImpl "table"
tbody :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_tbody) => ReactComponent { | attrs }
tbody ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_tbody) => ReactComponent { | attrs }
tbody = motionComponentImpl "tbody"
td :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_td) => ReactComponent { | attrs }
td ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_td) => ReactComponent { | attrs }
td = motionComponentImpl "td"
textarea :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_textarea) => ReactComponent { | attrs }
textarea ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_textarea) => ReactComponent { | attrs }
textarea = motionComponentImpl "textarea"
tfoot :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_tfoot) => ReactComponent { | attrs }
tfoot ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_tfoot) => ReactComponent { | attrs }
tfoot = motionComponentImpl "tfoot"
th :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_th) => ReactComponent { | attrs }
th ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_th) => ReactComponent { | attrs }
th = motionComponentImpl "th"
thead :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_thead) => ReactComponent { | attrs }
thead ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_thead) => ReactComponent { | attrs }
thead = motionComponentImpl "thead"
time :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_time) => ReactComponent { | attrs }
time ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_time) => ReactComponent { | attrs }
time = motionComponentImpl "time"
title :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_title) => ReactComponent { | attrs }
title ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_title) => ReactComponent { | attrs }
title = motionComponentImpl "title"
tr :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_tr) => ReactComponent { | attrs }
tr ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_tr) => ReactComponent { | attrs }
tr = motionComponentImpl "tr"
track :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_track) => ReactComponent { | attrs }
track ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_track) => ReactComponent { | attrs }
track = motionComponentImpl "track"
u :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_u) => ReactComponent { | attrs }
u ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_u) => ReactComponent { | attrs }
u = motionComponentImpl "u"
ul :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_ul) => ReactComponent { | attrs }
ul ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_ul) => ReactComponent { | attrs }
ul = motionComponentImpl "ul"
var :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_var) => ReactComponent { | attrs }
var ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_var) => ReactComponent { | attrs }
var = motionComponentImpl "var"
video :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_video) => ReactComponent { | attrs }
video ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_video) => ReactComponent { | attrs }
video = motionComponentImpl "video"
wbr :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_wbr) => ReactComponent { | attrs }
wbr ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_wbr) => ReactComponent { | attrs }
wbr = motionComponentImpl "wbr"
-- No support in React.Basic.Hooks
-- webview :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_webview) => ReactComponent { | attrs }
-- webview = motionComponentImpl "webview"
svgAnimate :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_animate) => ReactComponent { | attrs }
svgAnimate ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_animate) => ReactComponent { | attrs }
svgAnimate = motionComponentImpl "animate"
circle :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_circle) => ReactComponent { | attrs }
circle ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_circle) => ReactComponent { | attrs }
circle = motionComponentImpl "circle"
clipPath :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_clipPath) => ReactComponent { | attrs }
clipPath ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_clipPath) => ReactComponent { | attrs }
clipPath = motionComponentImpl "clipPath"
defs :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_defs) => ReactComponent { | attrs }
defs ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_defs) => ReactComponent { | attrs }
defs = motionComponentImpl "defs"
desc :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_desc) => ReactComponent { | attrs }
desc ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_desc) => ReactComponent { | attrs }
desc = motionComponentImpl "desc"
ellipse :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_ellipse) => ReactComponent { | attrs }
ellipse ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_ellipse) => ReactComponent { | attrs }
ellipse = motionComponentImpl "ellipse"
feBlend :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feBlend) => ReactComponent { | attrs }
feBlend ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feBlend) => ReactComponent { | attrs }
feBlend = motionComponentImpl "feBlend"
feColorMatrix :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feColorMatrix) => ReactComponent { | attrs }
feColorMatrix ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feColorMatrix) => ReactComponent { | attrs }
feColorMatrix = motionComponentImpl "feColorMatrix"
feComponentTransfer :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feComponentTransfer) => ReactComponent { | attrs }
feComponentTransfer ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feComponentTransfer) => ReactComponent { | attrs }
feComponentTransfer = motionComponentImpl "feComponentTransfer"
feComposite :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feComposite) => ReactComponent { | attrs }
feComposite ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feComposite) => ReactComponent { | attrs }
feComposite = motionComponentImpl "feComposite"
feConvolveMatrix :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feConvolveMatrix) => ReactComponent { | attrs }
feConvolveMatrix ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feConvolveMatrix) => ReactComponent { | attrs }
feConvolveMatrix = motionComponentImpl "feConvolveMatrix"
feDiffuseLighting :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feDiffuseLighting) => ReactComponent { | attrs }
feDiffuseLighting ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feDiffuseLighting) => ReactComponent { | attrs }
feDiffuseLighting = motionComponentImpl "feDiffuseLighting"
feDisplacementMap :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feDisplacementMap) => ReactComponent { | attrs }
feDisplacementMap ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feDisplacementMap) => ReactComponent { | attrs }
feDisplacementMap = motionComponentImpl "feDisplacementMap"
feDistantLight :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feDistantLight) => ReactComponent { | attrs }
feDistantLight ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feDistantLight) => ReactComponent { | attrs }
feDistantLight = motionComponentImpl "feDistantLight"
feDropShadow :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feDropShadow) => ReactComponent { | attrs }
feDropShadow ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feDropShadow) => ReactComponent { | attrs }
feDropShadow = motionComponentImpl "feDropShadow"
feFlood :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feFlood) => ReactComponent { | attrs }
feFlood ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feFlood) => ReactComponent { | attrs }
feFlood = motionComponentImpl "feFlood"
feFuncA :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feFuncA) => ReactComponent { | attrs }
feFuncA ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feFuncA) => ReactComponent { | attrs }
feFuncA = motionComponentImpl "feFuncA"
feFuncB :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feFuncB) => ReactComponent { | attrs }
feFuncB ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feFuncB) => ReactComponent { | attrs }
feFuncB = motionComponentImpl "feFuncB"
feFuncG :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feFuncG) => ReactComponent { | attrs }
feFuncG ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feFuncG) => ReactComponent { | attrs }
feFuncG = motionComponentImpl "feFuncG"
feFuncR :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feFuncR) => ReactComponent { | attrs }
feFuncR ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feFuncR) => ReactComponent { | attrs }
feFuncR = motionComponentImpl "feFuncR"
feGaussianBlur :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feGaussianBlur) => ReactComponent { | attrs }
feGaussianBlur ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feGaussianBlur) => ReactComponent { | attrs }
feGaussianBlur = motionComponentImpl "feGaussianBlur"
feImage :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feImage) => ReactComponent { | attrs }
feImage ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feImage) => ReactComponent { | attrs }
feImage = motionComponentImpl "feImage"
feMerge :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feMerge) => ReactComponent { | attrs }
feMerge ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feMerge) => ReactComponent { | attrs }
feMerge = motionComponentImpl "feMerge"
feMergeNode :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feMergeNode) => ReactComponent { | attrs }
feMergeNode ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feMergeNode) => ReactComponent { | attrs }
feMergeNode = motionComponentImpl "feMergeNode"
feMorphology :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feMorphology) => ReactComponent { | attrs }
feMorphology ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feMorphology) => ReactComponent { | attrs }
feMorphology = motionComponentImpl "feMorphology"
feOffset :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feOffset) => ReactComponent { | attrs }
feOffset ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feOffset) => ReactComponent { | attrs }
feOffset = motionComponentImpl "feOffset"
fePointLight :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_fePointLight) => ReactComponent { | attrs }
fePointLight ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_fePointLight) => ReactComponent { | attrs }
fePointLight = motionComponentImpl "fePointLight"
feSpecularLighting :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feSpecularLighting) => ReactComponent { | attrs }
feSpecularLighting ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feSpecularLighting) => ReactComponent { | attrs }
feSpecularLighting = motionComponentImpl "feSpecularLighting"
feSpotLight :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feSpotLight) => ReactComponent { | attrs }
feSpotLight ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feSpotLight) => ReactComponent { | attrs }
feSpotLight = motionComponentImpl "feSpotLight"
feTile :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feTile) => ReactComponent { | attrs }
feTile ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feTile) => ReactComponent { | attrs }
feTile = motionComponentImpl "feTile"
feTurbulence :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feTurbulence) => ReactComponent { | attrs }
feTurbulence ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_feTurbulence) => ReactComponent { | attrs }
feTurbulence = motionComponentImpl "feTurbulence"
filter :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_filter) => ReactComponent { | attrs }
filter ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_filter) => ReactComponent { | attrs }
filter = motionComponentImpl "filter"
foreignObject :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_foreignObject) => ReactComponent { | attrs }
foreignObject ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_foreignObject) => ReactComponent { | attrs }
foreignObject = motionComponentImpl "foreignObject"
g :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_g) => ReactComponent { | attrs }
g ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_g) => ReactComponent { | attrs }
g = motionComponentImpl "g"
image :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_image) => ReactComponent { | attrs }
image ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_image) => ReactComponent { | attrs }
image = motionComponentImpl "image"
line :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_line) => ReactComponent { | attrs }
line ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_line) => ReactComponent { | attrs }
line = motionComponentImpl "line"
linearGradient :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_linearGradient) => ReactComponent { | attrs }
linearGradient ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_linearGradient) => ReactComponent { | attrs }
linearGradient = motionComponentImpl "linearGradient"
marker :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_marker) => ReactComponent { | attrs }
marker ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_marker) => ReactComponent { | attrs }
marker = motionComponentImpl "marker"
mask :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_mask) => ReactComponent { | attrs }
mask ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_mask) => ReactComponent { | attrs }
mask = motionComponentImpl "mask"
metadata :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_metadata) => ReactComponent { | attrs }
metadata ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_metadata) => ReactComponent { | attrs }
metadata = motionComponentImpl "metadata"
path :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_path) => ReactComponent { | attrs }
path ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_path) => ReactComponent { | attrs }
path = motionComponentImpl "path"
pattern :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_pattern) => ReactComponent { | attrs }
pattern ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_pattern) => ReactComponent { | attrs }
pattern = motionComponentImpl "pattern"
polygon :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_polygon) => ReactComponent { | attrs }
polygon ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_polygon) => ReactComponent { | attrs }
polygon = motionComponentImpl "polygon"
polyline :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_polyline) => ReactComponent { | attrs }
polyline ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_polyline) => ReactComponent { | attrs }
polyline = motionComponentImpl "polyline"
radialGradient :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_radialGradient) => ReactComponent { | attrs }
radialGradient ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_radialGradient) => ReactComponent { | attrs }
radialGradient = motionComponentImpl "radialGradient"
rect :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_rect) => ReactComponent { | attrs }
rect ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_rect) => ReactComponent { | attrs }
rect = motionComponentImpl "rect"
stop :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_stop) => ReactComponent { | attrs }
stop ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_stop) => ReactComponent { | attrs }
stop = motionComponentImpl "stop"
svg :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_svg) => ReactComponent { | attrs }
svg ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_svg) => ReactComponent { | attrs }
svg = motionComponentImpl "svg"
svgSwitch :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_switch) => ReactComponent { | attrs }
svgSwitch ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_switch) => ReactComponent { | attrs }
svgSwitch = motionComponentImpl "switch"
symbol :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_symbol) => ReactComponent { | attrs }
symbol ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_symbol) => ReactComponent { | attrs }
symbol = motionComponentImpl "symbol"
text :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_text) => ReactComponent { | attrs }
text ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_text) => ReactComponent { | attrs }
text = motionComponentImpl "text"
textPath :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_textPath) => ReactComponent { | attrs }
textPath ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_textPath) => ReactComponent { | attrs }
textPath = motionComponentImpl "textPath"
tspan :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_tspan) => ReactComponent { | attrs }
tspan ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_tspan) => ReactComponent { | attrs }
tspan = motionComponentImpl "tspan"
use :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_use) => ReactComponent { | attrs }
use ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_use) => ReactComponent { | attrs }
use = motionComponentImpl "use"
view :: forall attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_view) => ReactComponent { | attrs }
view ∷ ∀ attrs attrs_. Union attrs attrs_ (MotionProps + SVG.Props_view) => ReactComponent { | attrs }
view = motionComponentImpl "view"

2
src/React/Basic/SyntaxHighlighter/Component.purs
View File

@ -57,7 +57,7 @@ mkHighlighterTheme theme =
}
, "hljs-keyword":
css
{ color: Color.cssStringRGBA theme.highlightColour
{ color: "var(--highlight)"
, fontWeight: "normal"
}
, "hljs-symbol":

13
src/Yoga/Block/Atom/Toggle/Spec.purs
View File

@ -13,4 +13,17 @@ spec =
$ renderComponent Toggle.component
{ togglePosition: ToggleIsLeft
, setTogglePosition: mempty
, ariaLabel: "Example Toggle"
}
it "has an aria-label" do
{ findByRole } <-
renderComponent Toggle.component
{ togglePosition: ToggleIsLeft
, setTogglePosition: mempty
, ariaLabel: "Example Toggle"
}
elem <- findByRole "switch"
shouldHaveAttributeWithValue
elem
"aria-label"
"Example Toggle"

70
src/Yoga/Block/Atom/Toggle/Story.purs
View File

@ -34,38 +34,40 @@ toggle = do
]
]
where
mkBasicExample =
React.reactComponent "Toggle example" \p -> React.do
togglePosition /\ setTogglePosition <- React.useState' ToggleIsRight
pure
$ element Toggle.component
{ togglePosition
, setTogglePosition
}
mkBasicExample =
React.reactComponent "Toggle example" \p -> React.do
togglePosition /\ setTogglePosition <- React.useState' ToggleIsRight
pure
$ element Toggle.component
{ togglePosition
, setTogglePosition
, ariaLabel: "dark-light-toggle"
}
mkDarkLightToggle =
React.reactComponent "Toggle dark night example" \p -> React.do
togglePosition /\ setTogglePosition <- React.useState' ToggleIsLeft
theme /\ setTheme <- React.useState' Nothing
let
content =
element Toggle.component
{ togglePosition: togglePosition
, setTogglePosition:
\newTogglePosition -> do
setTogglePosition newTogglePosition
setTheme case newTogglePosition of
ToggleIsRight -> Just DarkMode
ToggleIsLeft -> Just LightMode
, left: R.text "🌒"
, right: R.text "🌞"
, backgroundLeft:
Color.hsl 205.0 1.0 0.83
, backgroundRight:
Color.hsl 260.0 0.7 0.45
}
pure
$ element Block.container
{ content
, themeVariant: theme
}
mkDarkLightToggle =
React.reactComponent "Toggle dark night example" \p -> React.do
togglePosition /\ setTogglePosition <- React.useState' ToggleIsLeft
theme /\ setTheme <- React.useState' Nothing
let
content =
element Toggle.component
{ togglePosition: togglePosition
, ariaLabel: "dark-light-toggle"
, setTogglePosition:
\newTogglePosition -> do
setTogglePosition newTogglePosition
setTheme case newTogglePosition of
ToggleIsRight -> Just DarkMode
ToggleIsLeft -> Just LightMode
, left: R.text "🌒"
, right: R.text "🌞"
, backgroundLeft:
Color.hsl 205.0 1.0 0.83
, backgroundRight:
Color.hsl 260.0 0.7 0.45
}
pure
$ element Block.container
{ content
, themeVariant: theme
}

2
src/Yoga/Block/Atom/Toggle/Style.purs
View File

@ -15,7 +15,7 @@ button =
css
{ position: relative
, "&:focus": nest { outline: str "none" }
, border: str $ "1px solid " <> colour.inputBorder
, border: str $ "1px solid " <> colour.backgroundLayer2
, "&:focus-visible":
nest
{ boxShadow: str $ "0 0 0 var(--s-4) " <> colour.highlight

191
src/Yoga/Block/Atom/Toggle/View.purs
View File

@ -24,18 +24,19 @@ import Yoga.Block.Atom.Toggle.Types (TogglePosition(..), flipToggle)
import Yoga.Block.Container.Style (colour)
import Yoga.Block.Icon.SVG as SVGIcon
type PropsF f
= ( className ∷ f String
, left ∷ f JSX
, right ∷ f JSX
| Style.Props f (MandatoryProps InputProps)
)
type PropsF f =
( className ∷ f String
, left ∷ f JSX
, right ∷ f JSX
| Style.Props f (MandatoryProps InputProps)
)
type MandatoryProps r
= ( togglePosition ∷ TogglePosition
, setTogglePosition ∷ TogglePosition -> Effect Unit
| r
)
type MandatoryProps r =
( togglePosition ∷ TogglePosition
, setTogglePosition ∷ TogglePosition -> Effect Unit
, ariaLabel ∷ String
| r
)
data TappingState
= TapAllowed
@ -54,11 +55,11 @@ instance showDragState ∷ Show DragState where
Dragging x -> "Dragging " <> show x
DragDone x -> "DragDone " <> show x
type Props
= PropsF Id
type Props =
PropsF Id
type PropsOptional
= PropsF OptionalProp
type PropsOptional =
PropsF OptionalProp
component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | MandatoryProps p }
component = rawComponent
@ -67,8 +68,7 @@ rawComponent ∷ ∀ p. ReactComponent (Record p)
rawComponent =
mkForwardRefComponent "Toggle" do
\(props ∷ { | PropsOptional }) ref -> React.do
let
disabled = props.disabled
let disabled = props.disabled
buttonRef <- useRef null
toggleRef <- useRef null
tapState <- useRef TapNotAllowed
@ -91,7 +91,6 @@ rawComponent =
{ left: { backgroundColor: (Emotion.str <<< Color.cssStringRGBA <$> props.backgroundLeft) ?|| Emotion.str colour.inputBackground }
, right: { backgroundColor: (Emotion.str <<< Color.cssStringRGBA <$> props.backgroundRight) ?|| Emotion.str colour.success }
}
buttonVariant = Motion.makeVariantLabels buttonVariants
-- components
let
@ -117,44 +116,45 @@ rawComponent =
]
, toggle
]
container =
Motion.button
</* { className: "ry-toggle" <>? props.className
, css: Style.button <>? props.css
, transition: Motion.transition { type: "tween", duration: 0.33, ease: "easeOut" }
, variants: Motion.variants buttonVariants
, animate:
Motion.animate case props.togglePosition of
ToggleIsRight -> buttonVariant.right
ToggleIsLeft -> buttonVariant.left
, value: show props.togglePosition
, onClick: handler preventDefault \_ -> props.setTogglePosition (flipToggle props.togglePosition)
, style: props.style
, _data: Object.singleton "testid" "toggle-testid"
, role: "switch"
, _aria: Object.singleton "checked" "switch"
, ref: buttonRef
}
container children =
Motion.elementStyled
Motion.button
{ className: "ry-toggle" <>? props.className
, css: Style.button <>? props.css
, transition: Motion.transition { type: "tween", duration: 0.33, ease: "easeOut" }
, variants: Motion.variants buttonVariants
, animate:
Motion.animate case props.togglePosition of
ToggleIsRight -> buttonVariant.right
ToggleIsLeft -> buttonVariant.left
, value: show props.togglePosition
, onClick: handler preventDefault \_ -> props.setTogglePosition (flipToggle props.togglePosition)
, style: props.style
, _data: Object.singleton "testid" "toggle-testid"
, role: "switch"
, _aria:
Object.fromHomogeneous
{ checked: "switch"
, label: props.ariaLabel
}
, ref: buttonRef
, children
}
textContainer =
div
</* { className: "ry-toggle-text"
, css: Style.toggleTextContainer
}
textOnContainer =
div
</* { className: "ry-toggle-text-on"
, css: Style.toggleText
}
textOffContainer =
div
</* { className: "ry-toggle-text-off"
, css: Style.toggleText
}
textOn =
Motion.div
</ { className: "ry-toggle-text-container"
@ -163,7 +163,6 @@ rawComponent =
, animate: Motion.animate $ css { scale: 1, opacity: 1 }
, exit: Motion.exit $ css { scale: 0, opacity: 0 }
}
textOff =
Motion.div
</ { className: "ry-toggle-text-container"
@ -172,9 +171,7 @@ rawComponent =
, animate: Motion.animate $ css { scale: 1, opacity: 1 }
, exit: Motion.exit $ css { scale: 0, opacity: 0 }
}
animateTextPresence = Motion.animatePresence </ {}
toggle =
toggleCircle
</> { buttonRef
@ -215,8 +212,7 @@ toggleCircle =
runMaybeT_ do
b <- getBoundingBoxFromRef buttonRef # MaybeT
t <- getBoundingBoxFromRef toggleRef # MaybeT
let
ml = b.width - t.width - (2.0 * (t.left - b.left))
let ml = b.width - t.width - (2.0 * (t.left - b.left))
setMaxLeft (Just ml) # lift
mempty
let
@ -224,7 +220,6 @@ toggleCircle =
{ left: { x: 0.0 }
, right: { x: maxLeft # fromMaybe 0.0 }
}
toggleVariant = Motion.makeVariantLabels toggleVariants
pure
$ Motion.div
@ -239,68 +234,66 @@ toggleCircle =
, key: if isNothing maxLeft then "initialising" else "ready"
, dragElastic: Motion.dragElastic false
, dragConstraints:
Motion.dragConstraints
{ left:
case togglePosition of
ToggleIsLeft -> zero
ToggleIsRight -> -(maxLeft <#> (_ - Style.dragWidthDelta) # fromMaybe 0.0)
, right:
case togglePosition of
ToggleIsRight -> zero
ToggleIsLeft -> maxLeft <#> (_ - Style.dragWidthDelta) # fromMaybe 0.0
}
Motion.dragConstraints
{ left:
case togglePosition of
ToggleIsLeft -> zero
ToggleIsRight -> -(maxLeft <#> (_ - Style.dragWidthDelta) # fromMaybe 0.0)
, right:
case togglePosition of
ToggleIsRight -> zero
ToggleIsLeft -> maxLeft <#> (_ - Style.dragWidthDelta) # fromMaybe 0.0
}
, variants: Motion.variants toggleVariants
, transition: Motion.transition { type: "tween", duration: 0.33, ease: "easeOut" }
, whileTap:
Motion.prop
$ css
{ width: "calc(var(--s2)*0.85 + 10px)"
, left:
case togglePosition of
ToggleIsLeft -> Style.toggleLeft
ToggleIsRight -> "calc(" <> Style.toggleLeft <> " - 10px)"
, transition: { type: "tween", duration: 0.10, ease: "easeInOut" }
}
Motion.prop
$ css
{ width: "calc(var(--s2)*0.85 + 10px)"
, left:
case togglePosition of
ToggleIsLeft -> Style.toggleLeft
ToggleIsRight -> "calc(" <> Style.toggleLeft <> " - 10px)"
, transition: { type: "tween", duration: 0.10, ease: "easeInOut" }
}
, onTapStart: Motion.onTapStart \_ _ -> writeRef tapState TapAllowed
, onTap:
Motion.onTap \_ pi -> do
ts <- readRef tapState
case ts of
TapAllowed -> setTogglePosition (flipToggle togglePosition)
_ -> mempty
mempty
Motion.onTap \_ pi -> do
ts <- readRef tapState
case ts of
TapAllowed -> setTogglePosition (flipToggle togglePosition)
_ -> mempty
mempty
, onTapCancel:
Motion.onTapCancel \_ pi -> do
writeRef tapState TapNotAllowed
mempty
Motion.onTapCancel \_ pi -> do
writeRef tapState TapNotAllowed
mempty
, initial: Motion.initial false
, animate:
Motion.animate case togglePosition of
ToggleIsLeft -> toggleVariant.left
ToggleIsRight -> toggleVariant.right
Motion.animate case togglePosition of
ToggleIsLeft -> toggleVariant.left
ToggleIsRight -> toggleVariant.right
, onDragStart:
Motion.onDragStart \_ pi -> do
maybeBBox <- getBoundingBoxFromRef toggleRef
let
x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)
setDragState
$ Dragging
{ startX: x # fromMaybe pi.point.x, currentX: pi.point.x
}
Motion.onDragStart \_ pi -> do
maybeBBox <- getBoundingBoxFromRef toggleRef
let x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)
setDragState
$ Dragging
{ startX: x # fromMaybe pi.point.x, currentX: pi.point.x
}
, onDrag:
Motion.onDrag \_ pi -> do
case dragState of
Dragging { startX } -> do
setDragState $ Dragging { startX, currentX: pi.point.x }
other -> Console.warn $ i "Unexpected drag state " (show other) " in onDragEvent"
Motion.onDrag \_ pi -> do
case dragState of
Dragging { startX } -> do
setDragState $ Dragging { startX, currentX: pi.point.x }
other -> Console.warn $ i "Unexpected drag state " (show other) " in onDragEvent"
, onDragEnd:
Motion.onDragEnd \_ pi -> do
case dragState of
Dragging { startX } -> do
maybeBBox <- getBoundingBoxFromRef toggleRef
let
x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)
setDragState (DragDone { startX, endX: x # fromMaybe' \_ -> unsafeCrashWith "shit" })
other -> Console.warn $ i "Unexpected drag state " (show other) " in onDragEvent"
Motion.onDragEnd \_ pi -> do
case dragState of
Dragging { startX } -> do
maybeBBox <- getBoundingBoxFromRef toggleRef
let x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)
setDragState (DragDone { startX, endX: x # fromMaybe' \_ -> unsafeCrashWith "shit" })
other -> Console.warn $ i "Unexpected drag state " (show other) " in onDragEvent"
, ref: toggleRef
}

25
src/Yoga/Block/Container/Style.js
View File

@ -1,6 +1,27 @@
// This is for the browser tests to work
// JSDOM does not have support for matchMedia
// So we just pretend nothing every matches
// And never invoke the listeners
const stubMatchMedia = () => {
if (window.matchMedia) return
window.matchMedia = (name) =>
({
matches: false,
addEventListener: () => { },
removeEventListener: () => { }
})
}
exports.getComputedStyleImpl = (el, window) => window.getComputedStyle(el)
exports.getPropertyValueImpl = (propName, computedStyle) => computedStyle.getPropertyValue(propName)
exports.getElementStyle = el => () => el.style
exports.setStyleProperty = prop => value => style => () => style.setProperty(prop, value)
exports.matchMedia = string => window => () => window.matchMedia(string)
exports.matches = matchMedia => () => matchMedia.matches
exports.matchMedia = string => window => () => {
stubMatchMedia()
return window.matchMedia(string)
}
exports.matches = matchMedia => () => {
stubMatchMedia()
return matchMedia.matches
}

3
src/Yoga/Block/Container/Style.purs
View File

@ -36,6 +36,7 @@ lightMode = mkGlobal (Just LightMode)
global ∷ Style
global = mkGlobal Nothing
-- [TODO] Move this all out
foreign import data ComputedStyle ∷ Type
foreign import getComputedStyleImpl ∷ EffectFn2 Element Window ComputedStyle
@ -96,6 +97,8 @@ setDarkOrLightMode desiredMode =
DarkMode -> "dark"
# lift
-- [TODO] Move out end
--
mkGlobal ∷ Maybe DarkOrLightMode -> Style
mkGlobal maybeMode =
css

76
src/Yoga/Block/Hook/UseResize.purs
View File

@ -1,13 +1,20 @@
module Yoga.Block.Hook.UseResize where
import Prelude
import Data.Foldable (for_)
import Data.Int (toNumber)
import Data.Maybe (Maybe(..))
import Data.Newtype (class Newtype)
import Data.Time.Duration (class Duration)
import Data.Time.Duration as Milliseconds
import Effect (Effect)
import React.Basic.Hooks (Hook, UseLayoutEffect, UseState, coerceHook, useLayoutEffect, useState, (/\))
import Effect.Aff (Aff, Fiber, delay, error, killFiber, launchAff, launchAff_)
import Effect.Class (liftEffect)
import Math as Math
import React.Basic.Hooks (Hook, UseLayoutEffect, UseState, coerceHook, useLayoutEffect, useLayoutEffectOnce, (/\))
import React.Basic.Hooks as React
import Web.Event.Event (EventType(..))
import Web.Event.EventTarget (EventListener, addEventListener, eventListener, removeEventListener)
import Web.Event.EventTarget (EventListener, EventTarget, addEventListener, eventListener, removeEventListener)
import Web.HTML (window)
import Web.HTML.Window (innerHeight, innerWidth, toEventTarget)
@ -20,42 +27,75 @@ registerListener listener = do
addEventListener eventType listener false target
pure $ removeEventListener eventType listener false target
newtype UseResize hooks
= UseResize (UseLayoutEffect Unit (UseState { width ∷ Number, height ∷ Number } hooks))
newtype UseResize hooks = UseResize (UseLayoutEffect Unit (UseState { width ∷ Number, height ∷ Number } hooks))
derive instance ntUseResize ∷ Newtype (UseResize hooks) _
useResize ∷ Hook UseResize { width ∷ Number, height ∷ Number }
useResize =
coerceHook React.do
size /\ updateSize <- useState { width: 0.0, height: 0.0 }
let
setSize = updateSize <<< const
size /\ setSize <- React.useState' zero
useLayoutEffect unit do
setSizeFromWindow setSize
listener <- makeListener setSize
registerListener listener
pure size
setSizeFromWindow ∷ ({ height ∷ Number, width ∷ Number } -> Effect Unit) -> Effect Unit
type Dimensions =
{ height ∷ Number, width ∷ Number }
setSizeFromWindow ∷ (Dimensions -> Effect Unit) -> Effect Unit
setSizeFromWindow setSize = do
win <- window
width <- innerWidth win <#> toNumber
height <- innerHeight win <#> toNumber
setSize { width, height }
makeListener ∷ ({ height ∷ Number, width ∷ Number } -> Effect Unit) -> Effect EventListener
makeListener ∷ (Dimensions -> Effect Unit) -> Effect EventListener
makeListener setSize = do
eventListener
$ const (setSizeFromWindow setSize)
useResize' ∷ Effect Unit -> Hook UseResize { width ∷ Number, height ∷ Number }
useResize' eff =
newtype UseOnResize hooks = UseOnResize
( UseLayoutEffect Unit
( UseState Dimensions
(UseState (Maybe (Fiber Unit)) hooks)
)
)
derive instance ntUseOnResize ∷ Newtype (UseOnResize hooks) _
useOnResize ∷
∀ d.
Duration d =>
d ->
({ width ∷ Number, height ∷ Number, deltaWidth ∷ Number, deltaHeight ∷ Number } -> Effect Unit) ->
Hook UseOnResize Unit
useOnResize debounceBy callback =
coerceHook React.do
size /\ updateSize <- useState { width: 0.0, height: 0.0 }
mbFiber /\ setFiber <- React.useState' Nothing
size /\ setSize <- React.useState' (zero ∷ Dimensions)
let
setSize = updateSize <<< const
useLayoutEffect unit do
setSizeFromWindow setSize
listener <- makeListener (setSize >=> const eff)
registerListener listener
pure size
layoutEffect ∷ Effect (Effect Unit)
layoutEffect = do
setSizeFromWindow (setSize ∷ Dimensions -> Effect Unit)
listener ∷ EventListener <-
makeListener \(dimensions ∷ Dimensions) -> do
let
aff ∷ Aff Unit
aff = do
for_ mbFiber (killFiber (error "Fiber cancelled"))
delay (Milliseconds.fromDuration debounceBy)
let { width, height } = dimensions
let deltaWidth = Math.abs (size.width - width)
let deltaHeight = Math.abs (size.height - height)
setSize dimensions # liftEffect
callback { width, height, deltaWidth, deltaHeight } # liftEffect
fiber ∷ Fiber _ <- launchAff aff
setFiber (Just fiber)
target ∷ EventTarget <- window <#> toEventTarget
addEventListener eventType listener false target
pure
$ launchAff_
$ for_ mbFiber (killFiber (error "Fiber cancelled"))
useLayoutEffectOnce layoutEffect

62
src/Yoga/Block/Layout/Sidebar/Style.purs
View File

@ -19,39 +19,39 @@ type Props f r =
sidebar ∷ ∀ p. { | Props OptionalProp p } -> Style
sidebar props = styles <>? props.css
where
adjustedSpace = props.space <#> \s -> if s == "0" then "0px" else s
adjustedSpace = props.space <#> \s -> if s == "0" then "0px" else s
space = adjustedSpace ?|| "1rem"
space = adjustedSpace ?|| "1rem"
side = props.side ?|| SidebarLeft
side = props.side ?|| SidebarLeft
contentMin = props.contentMin ?|| "50%"
contentMin = props.contentMin ?|| "50%"
nonSidebarStyle =
nest
{ flexBasis: _0
, flexGrow: "999" # str
, minWidth: "calc(" <> contentMin <> " - " <> space <> ")" # str
}
nonSidebarStyle =
nest
{ flexBasis: _0
, flexGrow: "999" # str
, minWidth: "calc(" <> contentMin <> " - " <> space <> ")" # str
}
styles =
css
{ overflow: hidden
, "& > *":
nest
{ display: flex
, flexWrap: wrap
, margin: "calc(" <> space <> "/2 * -1)" # str
, alignItems: props.noStretch # ifTrue "flex-start" "" # str
}
, "& > * > *":
nest
{ margin: "calc(" <> space <> "/2)" # str
, flexGrow: "1" # str
, flexBasis: props.sideWidth # foldMap str
}
<> foldMap (nest <<< { flexBasis: _ } <<< str) props.sideWidth
}
<> case side of
SidebarLeft -> css { "& > * > :last-child": nonSidebarStyle }
SidebarRight -> css { "& > * > :first-child": nonSidebarStyle }
styles =
css
{ overflow: hidden
, "& > *":
nest
{ display: flex
, flexWrap: wrap
, margin: "calc(" <> space <> "/2 * -1)" # str
, alignItems: props.noStretch # ifTrue "flex-start" "" # str
}
, "& > * > *":
nest
{ margin: "calc(" <> space <> "/2)" # str
, flexGrow: "1" # str
, flexBasis: props.sideWidth # foldMap str
}
<> foldMap (nest <<< { flexBasis: _ } <<< str) props.sideWidth
}
<> case side of
SidebarLeft -> css { "& > * > :last-child": nonSidebarStyle }
SidebarRight -> css { "& > * > :first-child": nonSidebarStyle }

60
src/Yoga/Block/Layout/Switcher/Style.purs
View File

@ -16,38 +16,38 @@ type Props f r =
switcher ∷ ∀ p. { | Props OptionalProp p } -> Style
switcher props = styles <>? props.css
where
limit = props.limit ?|| 4
limit = props.limit ?|| 4
space = (props.space <#> \s -> if s == "0" then "0px" else s) ?|| "var(--s1)"
space = (props.space <#> \s -> if s == "0" then "0px" else s) ?|| "var(--s1)"
threshold = props.threshold ?|| "60ch"
threshold = props.threshold ?|| "60ch"
lastKey ∷ String
lastKey =
"" -- this is for readability
<> i "& > * > :nth-last-child(n+" (limit + 1) "), "
<> i "& > * > :nth-last-child(n+" (limit + 1) ") ~ *"
lastKey ∷ String
lastKey =
"" -- this is for readability
<> i "& > * > :nth-last-child(n+" (limit + 1) "), "
<> i "& > * > :nth-last-child(n+" (limit + 1) ") ~ *"
nthLastChild ∷ Style
nthLastChild =
unsafeCoerce
(Object.singleton lastKey { flexBasis: _100percent })
nthLastChild ∷ Style
nthLastChild =
unsafeCoerce
(Object.singleton lastKey { flexBasis: _100percent })
styles ∷ Style
styles =
nthLastChild
<> css
{ "& > *":
nest
{ display: flex
, flexWrap: wrap
, margin: i "calc((" space " / 2) * -1)" # str
}
, "& > * > *":
nest
{ flexGrow: str "1"
, flexBasis:
i "calc((" threshold " - (100% - var(--s1))) * 999)" # str
, margin: "calc((" <> space <> "/ 2)" # str
}
}
styles ∷ Style
styles =
nthLastChild
<> css
{ "& > *":
nest
{ display: flex
, flexWrap: wrap
, margin: i "calc((" space " / 2) * -1)" # str
}
, "& > * > *":
nest
{ flexGrow: str "1"
, flexBasis:
i "calc((" threshold " - (100% - var(--s1))) * 999)" # str
, margin: "calc((" <> space <> "/ 2)" # str
}
}

1
test/Main.purs
View File

@ -1,7 +1,6 @@
module Test.Main where
import Prelude
import Effect (Effect)
import Effect.Aff (launchAff_)
import Test.Spec.Discovery (discover)

14905
yarn.lock
View File

File diff suppressed because it is too large Load Diff