mirror of
https://github.com/rowtype-yoga/ry-blocks.git
synced 2024-09-11 21:38:06 +03:00
Add stub for match media for tests
This commit is contained in:
parent
5ca62b4237
commit
ba24329b30
32672
package-lock.json
generated
Normal file
32672
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -56,4 +56,4 @@
|
|||||||
"react-popper": "^2.2.4",
|
"react-popper": "^2.2.4",
|
||||||
"react-syntax-highlighter": "^15.3.1"
|
"react-syntax-highlighter": "^15.3.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -1,5 +1,66 @@
|
|||||||
const framerMotion = require("framer-motion")
|
const framerMotion = require("framer-motion")
|
||||||
|
const React = require("react")
|
||||||
|
const Emotion = require("@emotion/core")
|
||||||
|
|
||||||
exports.animatePresence = () => framerMotion.AnimatePresence
|
exports.animatePresence = () => framerMotion.AnimatePresence
|
||||||
|
|
||||||
exports.animateSharedLayout = () => framerMotion.AnimateSharedLayout
|
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);
|
||||||
|
@ -5,15 +5,21 @@ module Framer.Motion
|
|||||||
, animateSharedLayout
|
, animateSharedLayout
|
||||||
, module Framer.Motion.Types
|
, module Framer.Motion.Types
|
||||||
, module Framer.Motion.MotionComponent
|
, module Framer.Motion.MotionComponent
|
||||||
|
, element
|
||||||
|
, elementKeyed
|
||||||
|
, elementStyled
|
||||||
|
, elementStyledKeyed
|
||||||
) where
|
) where
|
||||||
|
|
||||||
import Prelude hiding (div, map, sub)
|
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 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 Prim.Row (class Nub, class Union)
|
||||||
import React.Basic (ReactComponent)
|
import React.Basic (JSX, ReactComponent)
|
||||||
|
import React.Basic.Emotion (Style)
|
||||||
import Record (disjointUnion)
|
import Record (disjointUnion)
|
||||||
import Untagged.Castable (class Castable, cast)
|
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 ∷
|
withMotion ∷
|
||||||
∀ result baseProps motionSubset.
|
∀ result baseProps motionSubset.
|
||||||
@ -34,3 +40,48 @@ foreign import animateSharedLayout ∷
|
|||||||
∀ attrs attrs_.
|
∀ attrs attrs_.
|
||||||
Union attrs attrs_ AnimateSharedLayoutProps =>
|
Union attrs attrs_ AnimateSharedLayoutProps =>
|
||||||
ReactComponent { | attrs }
|
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
|
||||||
|
@ -16,506 +16,506 @@ foreign import custom ∷
|
|||||||
Effect (ReactComponent { | MotionProps old })
|
Effect (ReactComponent { | MotionProps old })
|
||||||
|
|
||||||
-- DOM
|
-- 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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
bdo = motionComponentImpl "bdo"
|
||||||
|
|
||||||
-- No support in React Basic Hooks
|
-- No support in React Basic Hooks
|
||||||
-- big :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_big) => ReactComponent { | attrs }
|
-- big :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_big) => ReactComponent { | attrs }
|
||||||
-- big = motionComponentImpl "big"
|
-- 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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
_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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
wbr = motionComponentImpl "wbr"
|
||||||
|
|
||||||
-- No support in React.Basic.Hooks
|
-- No support in React.Basic.Hooks
|
||||||
-- webview :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_webview) => ReactComponent { | attrs }
|
-- webview :: forall attrs attrs_. Union attrs attrs_ (MotionProps + DOM.Props_webview) => ReactComponent { | attrs }
|
||||||
-- webview = motionComponentImpl "webview"
|
-- 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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
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"
|
view = motionComponentImpl "view"
|
||||||
|
@ -57,7 +57,7 @@ mkHighlighterTheme theme =
|
|||||||
}
|
}
|
||||||
, "hljs-keyword":
|
, "hljs-keyword":
|
||||||
css
|
css
|
||||||
{ color: Color.cssStringRGBA theme.highlightColour
|
{ color: "var(--highlight)"
|
||||||
, fontWeight: "normal"
|
, fontWeight: "normal"
|
||||||
}
|
}
|
||||||
, "hljs-symbol":
|
, "hljs-symbol":
|
||||||
|
@ -13,4 +13,17 @@ spec =
|
|||||||
$ renderComponent Toggle.component
|
$ renderComponent Toggle.component
|
||||||
{ togglePosition: ToggleIsLeft
|
{ togglePosition: ToggleIsLeft
|
||||||
, setTogglePosition: mempty
|
, 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"
|
||||||
|
@ -34,38 +34,40 @@ toggle = do
|
|||||||
]
|
]
|
||||||
]
|
]
|
||||||
where
|
where
|
||||||
mkBasicExample =
|
mkBasicExample =
|
||||||
React.reactComponent "Toggle example" \p -> React.do
|
React.reactComponent "Toggle example" \p -> React.do
|
||||||
togglePosition /\ setTogglePosition <- React.useState' ToggleIsRight
|
togglePosition /\ setTogglePosition <- React.useState' ToggleIsRight
|
||||||
pure
|
pure
|
||||||
$ element Toggle.component
|
$ element Toggle.component
|
||||||
{ togglePosition
|
{ togglePosition
|
||||||
, setTogglePosition
|
, setTogglePosition
|
||||||
}
|
, ariaLabel: "dark-light-toggle"
|
||||||
|
}
|
||||||
|
|
||||||
mkDarkLightToggle =
|
mkDarkLightToggle =
|
||||||
React.reactComponent "Toggle dark night example" \p -> React.do
|
React.reactComponent "Toggle dark night example" \p -> React.do
|
||||||
togglePosition /\ setTogglePosition <- React.useState' ToggleIsLeft
|
togglePosition /\ setTogglePosition <- React.useState' ToggleIsLeft
|
||||||
theme /\ setTheme <- React.useState' Nothing
|
theme /\ setTheme <- React.useState' Nothing
|
||||||
let
|
let
|
||||||
content =
|
content =
|
||||||
element Toggle.component
|
element Toggle.component
|
||||||
{ togglePosition: togglePosition
|
{ togglePosition: togglePosition
|
||||||
, setTogglePosition:
|
, ariaLabel: "dark-light-toggle"
|
||||||
\newTogglePosition -> do
|
, setTogglePosition:
|
||||||
setTogglePosition newTogglePosition
|
\newTogglePosition -> do
|
||||||
setTheme case newTogglePosition of
|
setTogglePosition newTogglePosition
|
||||||
ToggleIsRight -> Just DarkMode
|
setTheme case newTogglePosition of
|
||||||
ToggleIsLeft -> Just LightMode
|
ToggleIsRight -> Just DarkMode
|
||||||
, left: R.text "🌒"
|
ToggleIsLeft -> Just LightMode
|
||||||
, right: R.text "🌞"
|
, left: R.text "🌒"
|
||||||
, backgroundLeft:
|
, right: R.text "🌞"
|
||||||
Color.hsl 205.0 1.0 0.83
|
, backgroundLeft:
|
||||||
, backgroundRight:
|
Color.hsl 205.0 1.0 0.83
|
||||||
Color.hsl 260.0 0.7 0.45
|
, backgroundRight:
|
||||||
}
|
Color.hsl 260.0 0.7 0.45
|
||||||
pure
|
}
|
||||||
$ element Block.container
|
pure
|
||||||
{ content
|
$ element Block.container
|
||||||
, themeVariant: theme
|
{ content
|
||||||
}
|
, themeVariant: theme
|
||||||
|
}
|
||||||
|
@ -15,7 +15,7 @@ button =
|
|||||||
css
|
css
|
||||||
{ position: relative
|
{ position: relative
|
||||||
, "&:focus": nest { outline: str "none" }
|
, "&:focus": nest { outline: str "none" }
|
||||||
, border: str $ "1px solid " <> colour.inputBorder
|
, border: str $ "1px solid " <> colour.backgroundLayer2
|
||||||
, "&:focus-visible":
|
, "&:focus-visible":
|
||||||
nest
|
nest
|
||||||
{ boxShadow: str $ "0 0 0 var(--s-4) " <> colour.highlight
|
{ boxShadow: str $ "0 0 0 var(--s-4) " <> colour.highlight
|
||||||
|
@ -24,18 +24,19 @@ import Yoga.Block.Atom.Toggle.Types (TogglePosition(..), flipToggle)
|
|||||||
import Yoga.Block.Container.Style (colour)
|
import Yoga.Block.Container.Style (colour)
|
||||||
import Yoga.Block.Icon.SVG as SVGIcon
|
import Yoga.Block.Icon.SVG as SVGIcon
|
||||||
|
|
||||||
type PropsF f
|
type PropsF f =
|
||||||
= ( className ∷ f String
|
( className ∷ f String
|
||||||
, left ∷ f JSX
|
, left ∷ f JSX
|
||||||
, right ∷ f JSX
|
, right ∷ f JSX
|
||||||
| Style.Props f (MandatoryProps InputProps)
|
| Style.Props f (MandatoryProps InputProps)
|
||||||
)
|
)
|
||||||
|
|
||||||
type MandatoryProps r
|
type MandatoryProps r =
|
||||||
= ( togglePosition ∷ TogglePosition
|
( togglePosition ∷ TogglePosition
|
||||||
, setTogglePosition ∷ TogglePosition -> Effect Unit
|
, setTogglePosition ∷ TogglePosition -> Effect Unit
|
||||||
| r
|
, ariaLabel ∷ String
|
||||||
)
|
| r
|
||||||
|
)
|
||||||
|
|
||||||
data TappingState
|
data TappingState
|
||||||
= TapAllowed
|
= TapAllowed
|
||||||
@ -54,11 +55,11 @@ instance showDragState ∷ Show DragState where
|
|||||||
Dragging x -> "Dragging " <> show x
|
Dragging x -> "Dragging " <> show x
|
||||||
DragDone x -> "DragDone " <> show x
|
DragDone x -> "DragDone " <> show x
|
||||||
|
|
||||||
type Props
|
type Props =
|
||||||
= PropsF Id
|
PropsF Id
|
||||||
|
|
||||||
type PropsOptional
|
type PropsOptional =
|
||||||
= PropsF OptionalProp
|
PropsF OptionalProp
|
||||||
|
|
||||||
component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | MandatoryProps p }
|
component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | MandatoryProps p }
|
||||||
component = rawComponent
|
component = rawComponent
|
||||||
@ -67,8 +68,7 @@ rawComponent ∷ ∀ p. ReactComponent (Record p)
|
|||||||
rawComponent =
|
rawComponent =
|
||||||
mkForwardRefComponent "Toggle" do
|
mkForwardRefComponent "Toggle" do
|
||||||
\(props ∷ { | PropsOptional }) ref -> React.do
|
\(props ∷ { | PropsOptional }) ref -> React.do
|
||||||
let
|
let disabled = props.disabled
|
||||||
disabled = props.disabled
|
|
||||||
buttonRef <- useRef null
|
buttonRef <- useRef null
|
||||||
toggleRef <- useRef null
|
toggleRef <- useRef null
|
||||||
tapState <- useRef TapNotAllowed
|
tapState <- useRef TapNotAllowed
|
||||||
@ -91,7 +91,6 @@ rawComponent =
|
|||||||
{ left: { backgroundColor: (Emotion.str <<< Color.cssStringRGBA <$> props.backgroundLeft) ?|| Emotion.str colour.inputBackground }
|
{ left: { backgroundColor: (Emotion.str <<< Color.cssStringRGBA <$> props.backgroundLeft) ?|| Emotion.str colour.inputBackground }
|
||||||
, right: { backgroundColor: (Emotion.str <<< Color.cssStringRGBA <$> props.backgroundRight) ?|| Emotion.str colour.success }
|
, right: { backgroundColor: (Emotion.str <<< Color.cssStringRGBA <$> props.backgroundRight) ?|| Emotion.str colour.success }
|
||||||
}
|
}
|
||||||
|
|
||||||
buttonVariant = Motion.makeVariantLabels buttonVariants
|
buttonVariant = Motion.makeVariantLabels buttonVariants
|
||||||
-- components
|
-- components
|
||||||
let
|
let
|
||||||
@ -117,44 +116,45 @@ rawComponent =
|
|||||||
]
|
]
|
||||||
, toggle
|
, toggle
|
||||||
]
|
]
|
||||||
|
container children =
|
||||||
container =
|
Motion.elementStyled
|
||||||
Motion.button
|
Motion.button
|
||||||
</* { className: "ry-toggle" <>? props.className
|
{ className: "ry-toggle" <>? props.className
|
||||||
, css: Style.button <>? props.css
|
, css: Style.button <>? props.css
|
||||||
, transition: Motion.transition { type: "tween", duration: 0.33, ease: "easeOut" }
|
, transition: Motion.transition { type: "tween", duration: 0.33, ease: "easeOut" }
|
||||||
, variants: Motion.variants buttonVariants
|
, variants: Motion.variants buttonVariants
|
||||||
, animate:
|
, animate:
|
||||||
Motion.animate case props.togglePosition of
|
Motion.animate case props.togglePosition of
|
||||||
ToggleIsRight -> buttonVariant.right
|
ToggleIsRight -> buttonVariant.right
|
||||||
ToggleIsLeft -> buttonVariant.left
|
ToggleIsLeft -> buttonVariant.left
|
||||||
, value: show props.togglePosition
|
, value: show props.togglePosition
|
||||||
, onClick: handler preventDefault \_ -> props.setTogglePosition (flipToggle props.togglePosition)
|
, onClick: handler preventDefault \_ -> props.setTogglePosition (flipToggle props.togglePosition)
|
||||||
, style: props.style
|
, style: props.style
|
||||||
, _data: Object.singleton "testid" "toggle-testid"
|
, _data: Object.singleton "testid" "toggle-testid"
|
||||||
, role: "switch"
|
, role: "switch"
|
||||||
, _aria: Object.singleton "checked" "switch"
|
, _aria:
|
||||||
, ref: buttonRef
|
Object.fromHomogeneous
|
||||||
}
|
{ checked: "switch"
|
||||||
|
, label: props.ariaLabel
|
||||||
|
}
|
||||||
|
, ref: buttonRef
|
||||||
|
, children
|
||||||
|
}
|
||||||
textContainer =
|
textContainer =
|
||||||
div
|
div
|
||||||
</* { className: "ry-toggle-text"
|
</* { className: "ry-toggle-text"
|
||||||
, css: Style.toggleTextContainer
|
, css: Style.toggleTextContainer
|
||||||
}
|
}
|
||||||
|
|
||||||
textOnContainer =
|
textOnContainer =
|
||||||
div
|
div
|
||||||
</* { className: "ry-toggle-text-on"
|
</* { className: "ry-toggle-text-on"
|
||||||
, css: Style.toggleText
|
, css: Style.toggleText
|
||||||
}
|
}
|
||||||
|
|
||||||
textOffContainer =
|
textOffContainer =
|
||||||
div
|
div
|
||||||
</* { className: "ry-toggle-text-off"
|
</* { className: "ry-toggle-text-off"
|
||||||
, css: Style.toggleText
|
, css: Style.toggleText
|
||||||
}
|
}
|
||||||
|
|
||||||
textOn =
|
textOn =
|
||||||
Motion.div
|
Motion.div
|
||||||
</ { className: "ry-toggle-text-container"
|
</ { className: "ry-toggle-text-container"
|
||||||
@ -163,7 +163,6 @@ rawComponent =
|
|||||||
, animate: Motion.animate $ css { scale: 1, opacity: 1 }
|
, animate: Motion.animate $ css { scale: 1, opacity: 1 }
|
||||||
, exit: Motion.exit $ css { scale: 0, opacity: 0 }
|
, exit: Motion.exit $ css { scale: 0, opacity: 0 }
|
||||||
}
|
}
|
||||||
|
|
||||||
textOff =
|
textOff =
|
||||||
Motion.div
|
Motion.div
|
||||||
</ { className: "ry-toggle-text-container"
|
</ { className: "ry-toggle-text-container"
|
||||||
@ -172,9 +171,7 @@ rawComponent =
|
|||||||
, animate: Motion.animate $ css { scale: 1, opacity: 1 }
|
, animate: Motion.animate $ css { scale: 1, opacity: 1 }
|
||||||
, exit: Motion.exit $ css { scale: 0, opacity: 0 }
|
, exit: Motion.exit $ css { scale: 0, opacity: 0 }
|
||||||
}
|
}
|
||||||
|
|
||||||
animateTextPresence = Motion.animatePresence </ {}
|
animateTextPresence = Motion.animatePresence </ {}
|
||||||
|
|
||||||
toggle =
|
toggle =
|
||||||
toggleCircle
|
toggleCircle
|
||||||
</> { buttonRef
|
</> { buttonRef
|
||||||
@ -215,8 +212,7 @@ toggleCircle =
|
|||||||
runMaybeT_ do
|
runMaybeT_ do
|
||||||
b <- getBoundingBoxFromRef buttonRef # MaybeT
|
b <- getBoundingBoxFromRef buttonRef # MaybeT
|
||||||
t <- getBoundingBoxFromRef toggleRef # MaybeT
|
t <- getBoundingBoxFromRef toggleRef # MaybeT
|
||||||
let
|
let ml = b.width - t.width - (2.0 * (t.left - b.left))
|
||||||
ml = b.width - t.width - (2.0 * (t.left - b.left))
|
|
||||||
setMaxLeft (Just ml) # lift
|
setMaxLeft (Just ml) # lift
|
||||||
mempty
|
mempty
|
||||||
let
|
let
|
||||||
@ -224,7 +220,6 @@ toggleCircle =
|
|||||||
{ left: { x: 0.0 }
|
{ left: { x: 0.0 }
|
||||||
, right: { x: maxLeft # fromMaybe 0.0 }
|
, right: { x: maxLeft # fromMaybe 0.0 }
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleVariant = Motion.makeVariantLabels toggleVariants
|
toggleVariant = Motion.makeVariantLabels toggleVariants
|
||||||
pure
|
pure
|
||||||
$ Motion.div
|
$ Motion.div
|
||||||
@ -239,68 +234,66 @@ toggleCircle =
|
|||||||
, key: if isNothing maxLeft then "initialising" else "ready"
|
, key: if isNothing maxLeft then "initialising" else "ready"
|
||||||
, dragElastic: Motion.dragElastic false
|
, dragElastic: Motion.dragElastic false
|
||||||
, dragConstraints:
|
, dragConstraints:
|
||||||
Motion.dragConstraints
|
Motion.dragConstraints
|
||||||
{ left:
|
{ left:
|
||||||
case togglePosition of
|
case togglePosition of
|
||||||
ToggleIsLeft -> zero
|
ToggleIsLeft -> zero
|
||||||
ToggleIsRight -> -(maxLeft <#> (_ - Style.dragWidthDelta) # fromMaybe 0.0)
|
ToggleIsRight -> -(maxLeft <#> (_ - Style.dragWidthDelta) # fromMaybe 0.0)
|
||||||
, right:
|
, right:
|
||||||
case togglePosition of
|
case togglePosition of
|
||||||
ToggleIsRight -> zero
|
ToggleIsRight -> zero
|
||||||
ToggleIsLeft -> maxLeft <#> (_ - Style.dragWidthDelta) # fromMaybe 0.0
|
ToggleIsLeft -> maxLeft <#> (_ - Style.dragWidthDelta) # fromMaybe 0.0
|
||||||
}
|
}
|
||||||
, variants: Motion.variants toggleVariants
|
, variants: Motion.variants toggleVariants
|
||||||
, transition: Motion.transition { type: "tween", duration: 0.33, ease: "easeOut" }
|
, transition: Motion.transition { type: "tween", duration: 0.33, ease: "easeOut" }
|
||||||
, whileTap:
|
, whileTap:
|
||||||
Motion.prop
|
Motion.prop
|
||||||
$ css
|
$ css
|
||||||
{ width: "calc(var(--s2)*0.85 + 10px)"
|
{ width: "calc(var(--s2)*0.85 + 10px)"
|
||||||
, left:
|
, left:
|
||||||
case togglePosition of
|
case togglePosition of
|
||||||
ToggleIsLeft -> Style.toggleLeft
|
ToggleIsLeft -> Style.toggleLeft
|
||||||
ToggleIsRight -> "calc(" <> Style.toggleLeft <> " - 10px)"
|
ToggleIsRight -> "calc(" <> Style.toggleLeft <> " - 10px)"
|
||||||
, transition: { type: "tween", duration: 0.10, ease: "easeInOut" }
|
, transition: { type: "tween", duration: 0.10, ease: "easeInOut" }
|
||||||
}
|
}
|
||||||
, onTapStart: Motion.onTapStart \_ _ -> writeRef tapState TapAllowed
|
, onTapStart: Motion.onTapStart \_ _ -> writeRef tapState TapAllowed
|
||||||
, onTap:
|
, onTap:
|
||||||
Motion.onTap \_ pi -> do
|
Motion.onTap \_ pi -> do
|
||||||
ts <- readRef tapState
|
ts <- readRef tapState
|
||||||
case ts of
|
case ts of
|
||||||
TapAllowed -> setTogglePosition (flipToggle togglePosition)
|
TapAllowed -> setTogglePosition (flipToggle togglePosition)
|
||||||
_ -> mempty
|
_ -> mempty
|
||||||
mempty
|
mempty
|
||||||
, onTapCancel:
|
, onTapCancel:
|
||||||
Motion.onTapCancel \_ pi -> do
|
Motion.onTapCancel \_ pi -> do
|
||||||
writeRef tapState TapNotAllowed
|
writeRef tapState TapNotAllowed
|
||||||
mempty
|
mempty
|
||||||
, initial: Motion.initial false
|
, initial: Motion.initial false
|
||||||
, animate:
|
, animate:
|
||||||
Motion.animate case togglePosition of
|
Motion.animate case togglePosition of
|
||||||
ToggleIsLeft -> toggleVariant.left
|
ToggleIsLeft -> toggleVariant.left
|
||||||
ToggleIsRight -> toggleVariant.right
|
ToggleIsRight -> toggleVariant.right
|
||||||
, onDragStart:
|
, onDragStart:
|
||||||
Motion.onDragStart \_ pi -> do
|
Motion.onDragStart \_ pi -> do
|
||||||
maybeBBox <- getBoundingBoxFromRef toggleRef
|
maybeBBox <- getBoundingBoxFromRef toggleRef
|
||||||
let
|
let x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)
|
||||||
x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)
|
setDragState
|
||||||
setDragState
|
$ Dragging
|
||||||
$ Dragging
|
{ startX: x # fromMaybe pi.point.x, currentX: pi.point.x
|
||||||
{ startX: x # fromMaybe pi.point.x, currentX: pi.point.x
|
}
|
||||||
}
|
|
||||||
, onDrag:
|
, onDrag:
|
||||||
Motion.onDrag \_ pi -> do
|
Motion.onDrag \_ pi -> do
|
||||||
case dragState of
|
case dragState of
|
||||||
Dragging { startX } -> do
|
Dragging { startX } -> do
|
||||||
setDragState $ Dragging { startX, currentX: pi.point.x }
|
setDragState $ Dragging { startX, currentX: pi.point.x }
|
||||||
other -> Console.warn $ i "Unexpected drag state " (show other) " in onDragEvent"
|
other -> Console.warn $ i "Unexpected drag state " (show other) " in onDragEvent"
|
||||||
, onDragEnd:
|
, onDragEnd:
|
||||||
Motion.onDragEnd \_ pi -> do
|
Motion.onDragEnd \_ pi -> do
|
||||||
case dragState of
|
case dragState of
|
||||||
Dragging { startX } -> do
|
Dragging { startX } -> do
|
||||||
maybeBBox <- getBoundingBoxFromRef toggleRef
|
maybeBBox <- getBoundingBoxFromRef toggleRef
|
||||||
let
|
let x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)
|
||||||
x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)
|
setDragState (DragDone { startX, endX: x # fromMaybe' \_ -> unsafeCrashWith "shit" })
|
||||||
setDragState (DragDone { startX, endX: x # fromMaybe' \_ -> unsafeCrashWith "shit" })
|
other -> Console.warn $ i "Unexpected drag state " (show other) " in onDragEvent"
|
||||||
other -> Console.warn $ i "Unexpected drag state " (show other) " in onDragEvent"
|
|
||||||
, ref: toggleRef
|
, ref: toggleRef
|
||||||
}
|
}
|
||||||
|
@ -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.getComputedStyleImpl = (el, window) => window.getComputedStyle(el)
|
||||||
exports.getPropertyValueImpl = (propName, computedStyle) => computedStyle.getPropertyValue(propName)
|
exports.getPropertyValueImpl = (propName, computedStyle) => computedStyle.getPropertyValue(propName)
|
||||||
exports.getElementStyle = el => () => el.style
|
exports.getElementStyle = el => () => el.style
|
||||||
exports.setStyleProperty = prop => value => style => () => style.setProperty(prop, value)
|
exports.setStyleProperty = prop => value => style => () => style.setProperty(prop, value)
|
||||||
exports.matchMedia = string => window => () => window.matchMedia(string)
|
exports.matchMedia = string => window => () => {
|
||||||
exports.matches = matchMedia => () => matchMedia.matches
|
stubMatchMedia()
|
||||||
|
return window.matchMedia(string)
|
||||||
|
}
|
||||||
|
exports.matches = matchMedia => () => {
|
||||||
|
stubMatchMedia()
|
||||||
|
return matchMedia.matches
|
||||||
|
}
|
||||||
|
@ -36,6 +36,7 @@ lightMode = mkGlobal (Just LightMode)
|
|||||||
global ∷ Style
|
global ∷ Style
|
||||||
global = mkGlobal Nothing
|
global = mkGlobal Nothing
|
||||||
|
|
||||||
|
-- [TODO] Move this all out
|
||||||
foreign import data ComputedStyle ∷ Type
|
foreign import data ComputedStyle ∷ Type
|
||||||
|
|
||||||
foreign import getComputedStyleImpl ∷ EffectFn2 Element Window ComputedStyle
|
foreign import getComputedStyleImpl ∷ EffectFn2 Element Window ComputedStyle
|
||||||
@ -96,6 +97,8 @@ setDarkOrLightMode desiredMode =
|
|||||||
DarkMode -> "dark"
|
DarkMode -> "dark"
|
||||||
# lift
|
# lift
|
||||||
|
|
||||||
|
-- [TODO] Move out end
|
||||||
|
--
|
||||||
mkGlobal ∷ Maybe DarkOrLightMode -> Style
|
mkGlobal ∷ Maybe DarkOrLightMode -> Style
|
||||||
mkGlobal maybeMode =
|
mkGlobal maybeMode =
|
||||||
css
|
css
|
||||||
|
@ -1,13 +1,20 @@
|
|||||||
module Yoga.Block.Hook.UseResize where
|
module Yoga.Block.Hook.UseResize where
|
||||||
|
|
||||||
import Prelude
|
import Prelude
|
||||||
|
import Data.Foldable (for_)
|
||||||
import Data.Int (toNumber)
|
import Data.Int (toNumber)
|
||||||
|
import Data.Maybe (Maybe(..))
|
||||||
import Data.Newtype (class Newtype)
|
import Data.Newtype (class Newtype)
|
||||||
|
import Data.Time.Duration (class Duration)
|
||||||
|
import Data.Time.Duration as Milliseconds
|
||||||
import Effect (Effect)
|
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 React.Basic.Hooks as React
|
||||||
import Web.Event.Event (EventType(..))
|
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)
|
||||||
import Web.HTML.Window (innerHeight, innerWidth, toEventTarget)
|
import Web.HTML.Window (innerHeight, innerWidth, toEventTarget)
|
||||||
|
|
||||||
@ -20,42 +27,75 @@ registerListener listener = do
|
|||||||
addEventListener eventType listener false target
|
addEventListener eventType listener false target
|
||||||
pure $ removeEventListener eventType listener false target
|
pure $ removeEventListener eventType listener false target
|
||||||
|
|
||||||
newtype UseResize hooks
|
newtype UseResize hooks = UseResize (UseLayoutEffect Unit (UseState { width ∷ Number, height ∷ Number } hooks))
|
||||||
= UseResize (UseLayoutEffect Unit (UseState { width ∷ Number, height ∷ Number } hooks))
|
|
||||||
derive instance ntUseResize ∷ Newtype (UseResize hooks) _
|
derive instance ntUseResize ∷ Newtype (UseResize hooks) _
|
||||||
|
|
||||||
useResize ∷ Hook UseResize { width ∷ Number, height ∷ Number }
|
useResize ∷ Hook UseResize { width ∷ Number, height ∷ Number }
|
||||||
useResize =
|
useResize =
|
||||||
coerceHook React.do
|
coerceHook React.do
|
||||||
size /\ updateSize <- useState { width: 0.0, height: 0.0 }
|
size /\ setSize <- React.useState' zero
|
||||||
let
|
|
||||||
setSize = updateSize <<< const
|
|
||||||
useLayoutEffect unit do
|
useLayoutEffect unit do
|
||||||
setSizeFromWindow setSize
|
setSizeFromWindow setSize
|
||||||
listener <- makeListener setSize
|
listener <- makeListener setSize
|
||||||
registerListener listener
|
registerListener listener
|
||||||
pure size
|
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
|
setSizeFromWindow setSize = do
|
||||||
win <- window
|
win <- window
|
||||||
width <- innerWidth win <#> toNumber
|
width <- innerWidth win <#> toNumber
|
||||||
height <- innerHeight win <#> toNumber
|
height <- innerHeight win <#> toNumber
|
||||||
setSize { width, height }
|
setSize { width, height }
|
||||||
|
|
||||||
makeListener ∷ ({ height ∷ Number, width ∷ Number } -> Effect Unit) -> Effect EventListener
|
makeListener ∷ (Dimensions -> Effect Unit) -> Effect EventListener
|
||||||
makeListener setSize = do
|
makeListener setSize = do
|
||||||
eventListener
|
eventListener
|
||||||
$ const (setSizeFromWindow setSize)
|
$ const (setSizeFromWindow setSize)
|
||||||
|
|
||||||
useResize' ∷ Effect Unit -> Hook UseResize { width ∷ Number, height ∷ Number }
|
newtype UseOnResize hooks = UseOnResize
|
||||||
useResize' eff =
|
( 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
|
coerceHook React.do
|
||||||
size /\ updateSize <- useState { width: 0.0, height: 0.0 }
|
mbFiber /\ setFiber <- React.useState' Nothing
|
||||||
|
size /\ setSize <- React.useState' (zero ∷ Dimensions)
|
||||||
let
|
let
|
||||||
setSize = updateSize <<< const
|
layoutEffect ∷ Effect (Effect Unit)
|
||||||
useLayoutEffect unit do
|
layoutEffect = do
|
||||||
setSizeFromWindow setSize
|
setSizeFromWindow (setSize ∷ Dimensions -> Effect Unit)
|
||||||
listener <- makeListener (setSize >=> const eff)
|
listener ∷ EventListener <-
|
||||||
registerListener listener
|
makeListener \(dimensions ∷ Dimensions) -> do
|
||||||
pure size
|
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
|
||||||
|
@ -19,39 +19,39 @@ type Props f r =
|
|||||||
sidebar ∷ ∀ p. { | Props OptionalProp p } -> Style
|
sidebar ∷ ∀ p. { | Props OptionalProp p } -> Style
|
||||||
sidebar props = styles <>? props.css
|
sidebar props = styles <>? props.css
|
||||||
where
|
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 =
|
nonSidebarStyle =
|
||||||
nest
|
nest
|
||||||
{ flexBasis: _0
|
{ flexBasis: _0
|
||||||
, flexGrow: "999" # str
|
, flexGrow: "999" # str
|
||||||
, minWidth: "calc(" <> contentMin <> " - " <> space <> ")" # str
|
, minWidth: "calc(" <> contentMin <> " - " <> space <> ")" # str
|
||||||
}
|
}
|
||||||
|
|
||||||
styles =
|
styles =
|
||||||
css
|
css
|
||||||
{ overflow: hidden
|
{ overflow: hidden
|
||||||
, "& > *":
|
, "& > *":
|
||||||
nest
|
nest
|
||||||
{ display: flex
|
{ display: flex
|
||||||
, flexWrap: wrap
|
, flexWrap: wrap
|
||||||
, margin: "calc(" <> space <> "/2 * -1)" # str
|
, margin: "calc(" <> space <> "/2 * -1)" # str
|
||||||
, alignItems: props.noStretch # ifTrue "flex-start" "" # str
|
, alignItems: props.noStretch # ifTrue "flex-start" "" # str
|
||||||
}
|
}
|
||||||
, "& > * > *":
|
, "& > * > *":
|
||||||
nest
|
nest
|
||||||
{ margin: "calc(" <> space <> "/2)" # str
|
{ margin: "calc(" <> space <> "/2)" # str
|
||||||
, flexGrow: "1" # str
|
, flexGrow: "1" # str
|
||||||
, flexBasis: props.sideWidth # foldMap str
|
, flexBasis: props.sideWidth # foldMap str
|
||||||
}
|
}
|
||||||
<> foldMap (nest <<< { flexBasis: _ } <<< str) props.sideWidth
|
<> foldMap (nest <<< { flexBasis: _ } <<< str) props.sideWidth
|
||||||
}
|
}
|
||||||
<> case side of
|
<> case side of
|
||||||
SidebarLeft -> css { "& > * > :last-child": nonSidebarStyle }
|
SidebarLeft -> css { "& > * > :last-child": nonSidebarStyle }
|
||||||
SidebarRight -> css { "& > * > :first-child": nonSidebarStyle }
|
SidebarRight -> css { "& > * > :first-child": nonSidebarStyle }
|
||||||
|
@ -16,38 +16,38 @@ type Props f r =
|
|||||||
switcher ∷ ∀ p. { | Props OptionalProp p } -> Style
|
switcher ∷ ∀ p. { | Props OptionalProp p } -> Style
|
||||||
switcher props = styles <>? props.css
|
switcher props = styles <>? props.css
|
||||||
where
|
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 ∷ String
|
||||||
lastKey =
|
lastKey =
|
||||||
"" -- this is for readability
|
"" -- this is for readability
|
||||||
<> i "& > * > :nth-last-child(n+" (limit + 1) "), "
|
<> i "& > * > :nth-last-child(n+" (limit + 1) "), "
|
||||||
<> i "& > * > :nth-last-child(n+" (limit + 1) ") ~ *"
|
<> i "& > * > :nth-last-child(n+" (limit + 1) ") ~ *"
|
||||||
|
|
||||||
nthLastChild ∷ Style
|
nthLastChild ∷ Style
|
||||||
nthLastChild =
|
nthLastChild =
|
||||||
unsafeCoerce
|
unsafeCoerce
|
||||||
(Object.singleton lastKey { flexBasis: _100percent })
|
(Object.singleton lastKey { flexBasis: _100percent })
|
||||||
|
|
||||||
styles ∷ Style
|
styles ∷ Style
|
||||||
styles =
|
styles =
|
||||||
nthLastChild
|
nthLastChild
|
||||||
<> css
|
<> css
|
||||||
{ "& > *":
|
{ "& > *":
|
||||||
nest
|
nest
|
||||||
{ display: flex
|
{ display: flex
|
||||||
, flexWrap: wrap
|
, flexWrap: wrap
|
||||||
, margin: i "calc((" space " / 2) * -1)" # str
|
, margin: i "calc((" space " / 2) * -1)" # str
|
||||||
}
|
}
|
||||||
, "& > * > *":
|
, "& > * > *":
|
||||||
nest
|
nest
|
||||||
{ flexGrow: str "1"
|
{ flexGrow: str "1"
|
||||||
, flexBasis:
|
, flexBasis:
|
||||||
i "calc((" threshold " - (100% - var(--s1))) * 999)" # str
|
i "calc((" threshold " - (100% - var(--s1))) * 999)" # str
|
||||||
, margin: "calc((" <> space <> "/ 2)" # str
|
, margin: "calc((" <> space <> "/ 2)" # str
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
module Test.Main where
|
module Test.Main where
|
||||||
|
|
||||||
import Prelude
|
import Prelude
|
||||||
|
|
||||||
import Effect (Effect)
|
import Effect (Effect)
|
||||||
import Effect.Aff (launchAff_)
|
import Effect.Aff (launchAff_)
|
||||||
import Test.Spec.Discovery (discover)
|
import Test.Spec.Discovery (discover)
|
||||||
|
Loading…
Reference in New Issue
Block a user