Fix tests

This commit is contained in:
Mark Eibes 2021-01-04 20:51:31 +01:00
parent a571217004
commit cccc9e0848
11 changed files with 656 additions and 614 deletions

View File

@ -1,7 +1,7 @@
module Yoga.Block where
import Prim.Row (class Union)
import React.Basic (ReactComponent)
import React.Basic (JSX, ReactComponent)
import Yoga.Block.Atom.Button as Button
import Yoga.Block.Atom.Icon as Icon
import Yoga.Block.Atom.Range as Range
@ -47,10 +47,10 @@ range = Range.component
segmented ∷ ReactComponent Segmented.Props
segmented = Segmented.component
sidebar ∷ ∀ p q. Union p q Sidebar.Props => ReactComponent { | p }
sidebar ∷ ∀ p q. Union p q Sidebar.Props => ReactComponent { children ∷ Array JSX | p }
sidebar = Sidebar.component
stack ∷ ∀ p q. Union p q Stack.Props => ReactComponent { | p }
stack ∷ ∀ p q. Union p q Stack.Props => ReactComponent { children ∷ Array JSX | p }
stack = Stack.component
switcher ∷ ∀ p q. Union p q Switcher.Props => ReactComponent { | p }

View File

@ -4,10 +4,10 @@ import Yoga.Prelude.Style
import Data.Interpolate (i)
import Yoga.Block.Container.Style (colour)
type Props f r =
( css ∷ f Style
| r
)
type Props f r
= ( css ∷ f Style
| r
)
gradientBackground ∷ StyleProperty
gradientBackground =
@ -40,7 +40,8 @@ button =
, borderTop: str $ i "1px solid " colour.interfaceBackgroundHighlight
, borderBottom: str $ i "1px solid " colour.interfaceBackgroundShadow
, display: inlineFlex
, padding: str "calc(var(--s-1) * 0.85) var(--s0)"
, padding: str "calc(var(--s-1) * 0.8) var(--s0)"
, paddingBottom: str "calc(var(--s-1) * 0.8 + 1px)"
, justifyContent: center
, alignItems: center
, borderRadius: var "--s-1"
@ -53,61 +54,61 @@ button =
, userSelect: none
, transition: str "all 0.2s ease-out" <> str "transform 50ms ease-in"
, """&[data-button-shape="pill"]""":
nest
{ borderRadius: str "calc(var(--s1) * 0.85)"
, padding: str "calc(var(--s-1) * 0.85) var(--s0)"
, paddingBottom: str "calc(var(--s-1))"
}
nest
{ borderRadius: str "calc(var(--s1) * 0.85)"
, padding: str "calc(var(--s-1) * 0.85) var(--s0)"
, paddingBottom: str "calc(var(--s-1))"
}
, """&[data-button-type="primary"]""":
nest
{ background: gradientBackground
, backgroundSize: str "200% 200%"
, fontWeight: str "600"
, letterSpacing: str "calc(var(--s-5)* (0.1))"
, animation: backgroundAnimation <> str " alternate ease-out 10s infinite"
, boxShadow: str "0 1px 4px 0px rgba(0,0,0,0.40)"
, borderColor: str "transparent"
, color: str colour.highlightText
, """&:focus-visible""":
nest
{ borderColor: str "inherit"
}
, """&:active""":
nest
{ boxShadow: str "inset 0 1px 6px rgba(0,0,0,0.40)"
, border: str $ i "1px solid transparent"
}
, "&:disabled":
nest
{ background: str colour.highlightDisabled
}
}
nest
{ background: gradientBackground
, backgroundSize: str "200% 200%"
, fontWeight: str "600"
, letterSpacing: str "calc(var(--s-5)* (0.1))"
, animation: backgroundAnimation <> str " alternate ease-out 10s infinite"
, boxShadow: str "0 1px 4px 0px rgba(0,0,0,0.40)"
, borderColor: str "transparent"
, color: str colour.highlightText
, """&:focus-visible""":
nest
{ borderColor: str "inherit"
}
, """&:active""":
nest
{ boxShadow: str "inset 0 1px 6px rgba(0,0,0,0.40)"
, border: str $ i "1px solid transparent"
}
, "&:disabled":
nest
{ background: str colour.highlightDisabled
}
}
, """&[data-button-type="dangerous"]""":
nest
{ color: str $ colour.interfaceDangerousText
, background: str $ colour.interfaceBackgroundDangerous
, fontWeight: str "600"
, letterSpacing: str "calc(var(--s-5) * -0.10)"
}
nest
{ color: str $ colour.interfaceDangerousText
, background: str $ colour.interfaceBackgroundDangerous
, fontWeight: str "600"
, letterSpacing: str "calc(var(--s-5) * -0.10)"
}
, """&:focus""": nest { outline: none }
, """&:focus-visible""":
nest
{ boxShadow: str $ "0 0 0 var(--s-4) " <> colour.highlight
}
nest
{ boxShadow: str $ "0 0 0 var(--s-4) " <> colour.highlight
}
, """&:active""":
nest
{ boxShadow: str $ "inset 0 1px var(--s-1) rgba(0,0,0,0.20)"
, borderTop: str $ i "1px solid " colour.interfaceBackgroundShadow
, borderBottom: str $ i "1px solid " colour.interfaceBackgroundShadow
, transform: str "scale3d(0.95,0.95,0.95)"
, transition: str "transform 50ms ease"
}
nest
{ boxShadow: str $ "inset 0 1px var(--s-1) rgba(0,0,0,0.20)"
, borderTop: str $ i "1px solid " colour.interfaceBackgroundShadow
, borderBottom: str $ i "1px solid " colour.interfaceBackgroundShadow
, transform: str "scale3d(0.95,0.95,0.95)"
, transition: str "transform 50ms ease"
}
, "&:disabled":
nest
{ color: str colour.interfaceTextDisabled
, boxShadow: none
, background: str colour.interfaceBackgroundDisabled
, borderTop: str $ i "1px solid " colour.interfaceBackgroundShadow
, borderBottom: str $ i "1px solid " colour.interfaceBackgroundShadow
}
nest
{ color: str colour.interfaceTextDisabled
, boxShadow: none
, background: str colour.interfaceBackgroundDisabled
, borderTop: str $ i "1px solid " colour.interfaceBackgroundShadow
, borderBottom: str $ i "1px solid " colour.interfaceBackgroundShadow
}
}

View File

@ -17,12 +17,12 @@ default ∷
default =
{ title: "Atom/Icon"
, decorators:
[ \storyFn ->
R.div_
[ element E.global { styles: Styles.global }
, unsafePerformEffect storyFn
]
]
[ \storyFn ->
R.div_
[ element E.global { styles: Styles.global }
, unsafePerformEffect storyFn
]
]
}
icon ∷ Effect JSX

View File

@ -13,7 +13,7 @@ import Literals.Undefined (undefined)
import MotionValue (useMotionValue)
import MotionValue as MotionValue
import Partial.Unsafe (unsafeCrashWith)
import React.Basic.DOM (css)
import React.Basic.DOM (CSS, css)
import React.Basic.Emotion as Emotion
import React.Basic.Hooks (reactComponent)
import React.Basic.Hooks as React
@ -21,12 +21,12 @@ import Unsafe.Coerce (unsafeCoerce)
import Yoga.Block.Atom.Segmented.Style as Style
import Yoga.Block.Hook.Scroll (useScrollPosition)
type Props =
{ activeItemRefs ∷ TwoOrMore (Ref (Nullable Node))
, activeItemIndex ∷ Int
, updateActiveIndex ∷ Int -> Effect Unit
, windowWidth ∷ Number
}
type Props
= { activeItemRefs ∷ TwoOrMore (Ref (Nullable Node))
, activeItemIndex ∷ Int
, updateActiveIndex ∷ Int -> Effect Unit
, windowWidth ∷ Number
}
component ∷ ReactComponent Props
component =
@ -42,14 +42,17 @@ component =
_ <-
runMaybeT do
rawStyles <- traverse getStyle props.activeItemRefs
let styles = rawStyles <#> \s -> s { left = s.left + scrollX }
let
-- [TODO] ScrollX is questionable
styles = rawStyles <#> \s -> s { left = s.left + scrollX }
unless (maybeAnimationVariants == Just styles) do
setVariants (Just styles) # lift
mempty
useLayoutEffect maybeDragX do
case maybeDragX, maybeAnimationVariants of
Just x, Just animationVariants -> do
let { left, width } = handleDrag { activeItemIndex: props.activeItemIndex, animationVariants, x }
let
{ left, width } = handleDrag { activeItemIndex: props.activeItemIndex, animationVariants, x }
activeLeft # MotionValue.set left
activeWidth # MotionValue.set width
_, _ -> mempty
@ -76,42 +79,44 @@ component =
, dragMomentum: Motion.dragMomentum false
, animate: Motion.animate $ indexToVariant props.activeItemIndex
, style:
css
{ left: activeLeft
, width: activeWidth
}
css
{ left: activeLeft
, width: activeWidth
}
, onDragStart:
Motion.onDragStart \_ pi -> do
setDragX (Just pi.point.x)
Motion.onDragStart \_ pi -> do
setDragX (Just pi.point.x)
, onDrag:
Motion.onDrag \_ pi -> do
when (isJust maybeDragX) $ setDragX (Just pi.point.x)
Motion.onDrag \_ pi -> do
when (isJust maybeDragX) $ setDragX (Just pi.point.x)
, onDragEnd:
Motion.onDragEnd \_ pi -> do
let
x =
maybeDragX
# fromMaybe' \_ -> unsafeCrashWith "no x"
newIdx =
findOverlapping
props.activeItemIndex
animationVariants
x
v =
animationVariants TwoOrMore.!! newIdx
# fromMaybe' \_ -> unsafeCrashWith "omg"
setDragX Nothing
activeLeft # MotionValue.set v.left
activeWidth # MotionValue.set v.width
props.updateActiveIndex newIdx
Motion.onDragEnd \_ pi -> do
let
x =
maybeDragX
# fromMaybe' \_ -> unsafeCrashWith "no x"
newIdx =
findOverlapping
props.activeItemIndex
animationVariants
x
v =
animationVariants TwoOrMore.!! newIdx
# fromMaybe' \_ -> unsafeCrashWith "omg"
setDragX Nothing
activeLeft # MotionValue.set v.left
activeWidth # MotionValue.set v.width
props.updateActiveIndex newIdx
, dragConstraints: Motion.dragConstraints { left: 0, right: 0 }
, dragElastic: Motion.dragElastic false
, transition:
Motion.transition
{ type: "tween"
, duration: if isJust maybeDragX then 0.0 else 0.167
, ease: "easeOut"
}
Motion.transition
{ type: "tween"
, duration: if isJust maybeDragX then 0.0 else 0.167
, ease: "easeOut"
}
, _aria: Object.fromHomogeneous { hidden: "true" }
}
@ -127,21 +132,49 @@ getStyle itemRef = do
, top: br.top
}
mkVariantForIndex :: Int -> CSS
mkVariantForIndex i =
css
{ width: unsafeStyle _.width
, height: unsafeStyle _.height
, x: unsafeStyle _.left
, y: unsafeStyle _.top
}
where
unsafeStyle :: _ -> TwoOrMore NodeRef -> Number
unsafeStyle fn refs =
unsafeGetRefAtI refs
# unsafeGetBoundingBoxFromRef
<#> fn
# fromMaybe 0.0
unsafeGetRefAtI :: TwoOrMore NodeRef -> NodeRef
unsafeGetRefAtI x =
(x TwoOrMore.!! i)
# fromMaybe' \_ -> unsafeCrashWith "Trying to get non-existing index"
unsafeGetBoundingBoxFromRef = unsafePerformEffect <<< getBoundingBoxFromRef
indexToVariant ∷ Int -> VariantLabel
indexToVariant = show >>> unsafeCoerce
type BBox =
{ top ∷ Number, left ∷ Number, width ∷ Number, height ∷ Number }
type BBox
= { top ∷ Number, left ∷ Number, width ∷ Number, height ∷ Number }
findOverlapping ∷ Int -> TwoOrMore BBox -> Number -> Int
findOverlapping activeIndex styles x =
fromMaybe activeIndex do
curr <- styles TwoOrMore.!! activeIndex
let fst = TwoOrMore.head styles
let lst = TwoOrMore.last styles
let inside e = (e.left < x) && (e.left + e.width) >= x
let tooFarLeft = MZ.guard (x <= fst.left + fst.width) $> 0
let tooFarRight = MZ.guard (x >= lst.left) $> TwoOrMore.length styles - 1
let
fst = TwoOrMore.head styles
let
lst = TwoOrMore.last styles
let
inside e = (e.left < x) && (e.left + e.width) >= x
let
tooFarLeft = MZ.guard (x <= fst.left + fst.width) $> 0
let
tooFarRight = MZ.guard (x >= lst.left) $> TwoOrMore.length styles - 1
TwoOrMore.findIndex inside styles <|> tooFarLeft <|> tooFarRight
handleDrag ∷
@ -151,11 +184,16 @@ handleDrag ∷
} ->
{ left ∷ Number, width ∷ Number }
handleDrag { x, activeItemIndex, animationVariants } = do
let idx = findOverlapping activeItemIndex animationVariants x
let av = animationVariants
let firstVariant = av # TwoOrMore.head
let lastVariant = av # TwoOrMore.last
let baseVariant = av TwoOrMore.!! idx # fromMaybe' \_ -> unsafeCrashWith "shit"
let
idx = findOverlapping activeItemIndex animationVariants x
let
av = animationVariants
let
firstVariant = av # TwoOrMore.head
let
lastVariant = av # TwoOrMore.last
let
baseVariant = av TwoOrMore.!! idx # fromMaybe' \_ -> unsafeCrashWith "shit"
let
closestVariant =
if x >= (baseVariant.left + (baseVariant.width / 2.0)) then
@ -169,29 +207,44 @@ handleDrag { x, activeItemIndex, animationVariants } = do
else
closestVariant /\ baseVariant
-- Total
let rangeStart = smaller.left + (smaller.width / 2.0)
let rangeEnd = greater.left + (greater.width / 2.0)
let range = rangeEnd - rangeStart
let ratio = ((x - rangeStart) / range)
let interpolatedWidth = (greater.width * ratio) + smaller.width * (1.0 - ratio)
let
rangeStart = smaller.left + (smaller.width / 2.0)
let
rangeEnd = greater.left + (greater.width / 2.0)
let
range = rangeEnd - rangeStart
let
ratio = ((x - rangeStart) / range)
let
interpolatedWidth = (greater.width * ratio) + smaller.width * (1.0 - ratio)
-- Right
let rangeStartRight = smaller.left + smaller.width
let rangeEndRight = greater.left + greater.width
let rangeRight = rangeEndRight - rangeStartRight
let ratioRight = ((x + (interpolatedWidth / 2.0) - rangeStartRight) / rangeRight)
let
rangeStartRight = smaller.left + smaller.width
let
rangeEndRight = greater.left + greater.width
let
rangeRight = rangeEndRight - rangeStartRight
let
ratioRight = ((x + (interpolatedWidth / 2.0) - rangeStartRight) / rangeRight)
-- Left
let rangeStartLeft = smaller.left
let rangeEndLeft = greater.left
let rangeLeft = rangeEndLeft - rangeStartLeft
let ratioLeft = (((x - (interpolatedWidth / 2.0)) - rangeStartLeft) / rangeLeft)
let
rangeStartLeft = smaller.left
let
rangeEndLeft = greater.left
let
rangeLeft = rangeEndLeft - rangeStartLeft
let
ratioLeft = (((x - (interpolatedWidth / 2.0)) - rangeStartLeft) / rangeLeft)
-- Individual
let left = rangeStartLeft + (ratioLeft * rangeLeft)
let right = rangeStartRight + (ratioRight * rangeRight)
let width = right - left
let
left = rangeStartLeft + (ratioLeft * rangeLeft)
let
right = rangeStartRight + (ratioRight * rangeRight)
let
width = right - left
if x < firstVariant.left then
{ left: firstVariant.left, width: firstVariant.width }
else
if x >= lastVariant.left + lastVariant.width then do
{ left: lastVariant.left, width: lastVariant.width }
else do
{ left, width }
else if x >= lastVariant.left + lastVariant.width then do
{ left: lastVariant.left, width: lastVariant.width }
else do
{ left, width }

View File

@ -108,7 +108,7 @@ mkGlobal maybeMode =
}
, "&:visited":
nest
{ color: str colour.backgroundLayer1
{ color: str colour.text
, textDecorationColor: str colour.backgroundLayer1
}
}

View File

@ -67,8 +67,8 @@ foreign import mkForwardRefComponentEffect ∷
foreign import createRef ∷ ∀ a. Effect (Ref a)
type NodeRef =
Ref (Nullable Node)
type NodeRef
= Ref (Nullable Node)
getBoundingBoxFromRef ∷ Ref (Nullable Node) -> Effect (Maybe DOMRect)
getBoundingBoxFromRef itemRef = do
@ -84,8 +84,8 @@ getHTMLElementFromRef itemRef =
forwardedRefAsMaybe ∷ ∀ a. Ref a -> Maybe (Ref a)
forwardedRefAsMaybe r = safelyWrapped # uorToMaybe >>= Nullable.toMaybe
where
safelyWrapped ∷ UndefinedOr (Nullable (Ref a))
safelyWrapped = unsafeCoerce r
safelyWrapped ∷ UndefinedOr (Nullable (Ref a))
safelyWrapped = unsafeCoerce r
foreign import unsafeUnionDroppingUndefined ∷ ∀ r1 r2 r3. Record r1 -> Record r2 -> Record r3
@ -94,9 +94,6 @@ foreign import unsafeMergeSecond ∷ ∀ r1 r2 r3. Record r1 -> Record r2 -> Rec
unsafeEmotion ∷ ∀ props propsA propsB. ReactComponent { className ∷ String, css ∷ E.Style | props } -> Record propsA -> { className ∷ String, css ∷ E.Style | propsB } -> JSX
unsafeEmotion component propsA propsB = E.element component (unsafeUnionDroppingUndefined propsB propsA)
unsafeEmotionKeyed ∷ ∀ props propsA propsB. ReactComponent { className ∷ String, css ∷ E.Style, key ∷ String | props } -> Record propsA -> { className ∷ String, css ∷ E.Style | propsB } -> JSX
unsafeEmotionKeyed component propsA propsB = E.elementKeyed component (unsafeUnionDroppingUndefined propsB propsA)
emotionDiv_ ∷
∀ props props_.
Lacks "ref" props =>
@ -137,21 +134,7 @@ pickDefined ∷
{ ref ∷ Ref (Nullable Node) | b }
pickDefined ref = runFn3 pickDefinedFn ref ks
where
ks = Array.fromFoldable $ keys (RProxy ∷ RProxy b)
-- [TODO] Delete?
emotionInputKeyed_ ∷
∀ props props_.
Lacks "ref" props =>
Union props props_ ( className ∷ String, css ∷ Style, ref ∷ Ref (Nullable Node), key ∷ String | InputProps ) =>
{ | InputProps } ->
{ className ∷ String
, css ∷ Style
, key ∷ String
| props
} ->
JSX
emotionInputKeyed_ = unsafeEmotionKeyed unsafeInput
ks = Array.fromFoldable $ keys (RProxy ∷ RProxy b)
emotionInput_ ∷
∀ props props_.
@ -178,8 +161,8 @@ emotionInput ∷
JSX
emotionInput ref = emotionInput_ <<< pickDefined ref <<< coerceUnOptional
where
coerceUnOptional ∷ { | InputPropsF OptionalProp more } -> { | InputPropsF Id more }
coerceUnOptional = unsafeCoerce
coerceUnOptional ∷ { | InputPropsF OptionalProp more } -> { | InputPropsF Id more }
coerceUnOptional = unsafeCoerce
unsafeInput ∷ ∀ r. ReactComponent (Record r)
unsafeInput = dangerous "input"
@ -217,443 +200,443 @@ dangerous = unsafePerformEffect <<< unsafeCreateDOMComponent
-- type DivProps =
-- Props_div
type DivProps =
DivPropsF Id ()
type DivProps
= DivPropsF Id ()
type DivPropsF f more =
( _aria ∷ f (Object String)
, _data ∷ f (Object String)
, about ∷ f String
, acceptCharset ∷ f String
, accessKey ∷ f String
, allowFullScreen ∷ f Boolean
, autoFocus ∷ f Boolean
, autoPlay ∷ f Boolean
, capture ∷ f Boolean
, cellPadding ∷ f String
, cellSpacing ∷ f String
, charSet ∷ f String
, children ∷ f (Array JSX)
, classID ∷ f String
, colSpan ∷ f Int
, contentEditable ∷ f Boolean
, contextMenu ∷ f String
, crossOrigin ∷ f String
, dangerouslySetInnerHTML ∷ f { __html ∷ f String }
, datatype ∷ f String
, dateTime ∷ f String
, dir ∷ f String
, draggable ∷ f Boolean
, encType ∷ f String
, formAction ∷ f String
, formEncType ∷ f String
, formMethod ∷ f String
, formNoValidate ∷ f Boolean
, formTarget ∷ f String
, frameBorder ∷ f String
, hidden ∷ f Boolean
, hrefLang ∷ f String
, htmlFor ∷ f String
, httpEquiv ∷ f String
, icon ∷ f String
, id ∷ f String
, inlist ∷ f String
, inputMode ∷ f String
, is ∷ f String
, itemID ∷ f String
, itemProp ∷ f String
, itemRef ∷ f String
, itemScope ∷ f Boolean
, itemType ∷ f String
, keyParams ∷ f String
, keyType ∷ f String
, lang ∷ f String
, marginHeight ∷ f String
, marginWidth ∷ f String
, maxLength ∷ f Int
, mediaGroup ∷ f String
, minLength ∷ f Int
, noValidate ∷ f Boolean
, onAnimationEnd ∷ f EventHandler
, onAnimationIteration ∷ f EventHandler
, onAnimationStart ∷ f EventHandler
, onBlur ∷ f EventHandler
, onClick ∷ f EventHandler
, onCompositionEnd ∷ f EventHandler
, onCompositionStart ∷ f EventHandler
, onCompositionUpdate ∷ f EventHandler
, onContextMenu ∷ f EventHandler
, onCopy ∷ f EventHandler
, onCut ∷ f EventHandler
, onDoubleClick ∷ f EventHandler
, onDrag ∷ f EventHandler
, onDragEnd ∷ f EventHandler
, onDragEnter ∷ f EventHandler
, onDragExit ∷ f EventHandler
, onDragLeave ∷ f EventHandler
, onDragOver ∷ f EventHandler
, onDragStart ∷ f EventHandler
, onDrop ∷ f EventHandler
, onFocus ∷ f EventHandler
, onGotPointerCapture ∷ f EventHandler
, onInvalid ∷ f EventHandler
, onKeyDown ∷ f EventHandler
, onKeyPress ∷ f EventHandler
, onKeyUp ∷ f EventHandler
, onLostPointerCapture ∷ f EventHandler
, onMouseDown ∷ f EventHandler
, onMouseEnter ∷ f EventHandler
, onMouseLeave ∷ f EventHandler
, onMouseMove ∷ f EventHandler
, onMouseOut ∷ f EventHandler
, onMouseOver ∷ f EventHandler
, onMouseUp ∷ f EventHandler
, onPaste ∷ f EventHandler
, onPointerCancel ∷ f EventHandler
, onPointerDown ∷ f EventHandler
, onPointerEnter ∷ f EventHandler
, onPointerLeave ∷ f EventHandler
, onPointerMove ∷ f EventHandler
, onPointerOut ∷ f EventHandler
, onPointerOver ∷ f EventHandler
, onPointerUp ∷ f EventHandler
, onSelect ∷ f EventHandler
, onSubmit ∷ f EventHandler
, onTouchCancel ∷ f EventHandler
, onTouchEnd ∷ f EventHandler
, onTouchMove ∷ f EventHandler
, onTouchStart ∷ f EventHandler
, onTransitionEnd ∷ f EventHandler
, onWheel ∷ f EventHandler
, prefix ∷ f String
, property ∷ f String
, radioGroup ∷ f String
, readOnly ∷ f Boolean
, ref ∷ f (Ref (Nullable Node))
, resource ∷ f String
, role ∷ f String
, rowSpan ∷ f Int
, scoped ∷ f Boolean
, seamless ∷ f Boolean
, security ∷ f String
, spellCheck ∷ f Boolean
, srcDoc ∷ f JSX
, srcLang ∷ f String
, srcSet ∷ f String
, style ∷ f CSS
, suppressContentEditableWarning ∷ f Boolean
, tabIndex ∷ f Int
, title ∷ f String
, typeof ∷ f String
, unselectable ∷ f Boolean
, useMap ∷ f String
, vocab ∷ f String
, wmode ∷ f String
| more
)
type DivPropsF f more
= ( _aria ∷ f (Object String)
, _data ∷ f (Object String)
, about ∷ f String
, acceptCharset ∷ f String
, accessKey ∷ f String
, allowFullScreen ∷ f Boolean
, autoFocus ∷ f Boolean
, autoPlay ∷ f Boolean
, capture ∷ f Boolean
, cellPadding ∷ f String
, cellSpacing ∷ f String
, charSet ∷ f String
, children ∷ f (Array JSX)
, classID ∷ f String
, colSpan ∷ f Int
, contentEditable ∷ f Boolean
, contextMenu ∷ f String
, crossOrigin ∷ f String
, dangerouslySetInnerHTML ∷ f { __html ∷ f String }
, datatype ∷ f String
, dateTime ∷ f String
, dir ∷ f String
, draggable ∷ f Boolean
, encType ∷ f String
, formAction ∷ f String
, formEncType ∷ f String
, formMethod ∷ f String
, formNoValidate ∷ f Boolean
, formTarget ∷ f String
, frameBorder ∷ f String
, hidden ∷ f Boolean
, hrefLang ∷ f String
, htmlFor ∷ f String
, httpEquiv ∷ f String
, icon ∷ f String
, id ∷ f String
, inlist ∷ f String
, inputMode ∷ f String
, is ∷ f String
, itemID ∷ f String
, itemProp ∷ f String
, itemRef ∷ f String
, itemScope ∷ f Boolean
, itemType ∷ f String
, keyParams ∷ f String
, keyType ∷ f String
, lang ∷ f String
, marginHeight ∷ f String
, marginWidth ∷ f String
, maxLength ∷ f Int
, mediaGroup ∷ f String
, minLength ∷ f Int
, noValidate ∷ f Boolean
, onAnimationEnd ∷ f EventHandler
, onAnimationIteration ∷ f EventHandler
, onAnimationStart ∷ f EventHandler
, onBlur ∷ f EventHandler
, onClick ∷ f EventHandler
, onCompositionEnd ∷ f EventHandler
, onCompositionStart ∷ f EventHandler
, onCompositionUpdate ∷ f EventHandler
, onContextMenu ∷ f EventHandler
, onCopy ∷ f EventHandler
, onCut ∷ f EventHandler
, onDoubleClick ∷ f EventHandler
, onDrag ∷ f EventHandler
, onDragEnd ∷ f EventHandler
, onDragEnter ∷ f EventHandler
, onDragExit ∷ f EventHandler
, onDragLeave ∷ f EventHandler
, onDragOver ∷ f EventHandler
, onDragStart ∷ f EventHandler
, onDrop ∷ f EventHandler
, onFocus ∷ f EventHandler
, onGotPointerCapture ∷ f EventHandler
, onInvalid ∷ f EventHandler
, onKeyDown ∷ f EventHandler
, onKeyPress ∷ f EventHandler
, onKeyUp ∷ f EventHandler
, onLostPointerCapture ∷ f EventHandler
, onMouseDown ∷ f EventHandler
, onMouseEnter ∷ f EventHandler
, onMouseLeave ∷ f EventHandler
, onMouseMove ∷ f EventHandler
, onMouseOut ∷ f EventHandler
, onMouseOver ∷ f EventHandler
, onMouseUp ∷ f EventHandler
, onPaste ∷ f EventHandler
, onPointerCancel ∷ f EventHandler
, onPointerDown ∷ f EventHandler
, onPointerEnter ∷ f EventHandler
, onPointerLeave ∷ f EventHandler
, onPointerMove ∷ f EventHandler
, onPointerOut ∷ f EventHandler
, onPointerOver ∷ f EventHandler
, onPointerUp ∷ f EventHandler
, onSelect ∷ f EventHandler
, onSubmit ∷ f EventHandler
, onTouchCancel ∷ f EventHandler
, onTouchEnd ∷ f EventHandler
, onTouchMove ∷ f EventHandler
, onTouchStart ∷ f EventHandler
, onTransitionEnd ∷ f EventHandler
, onWheel ∷ f EventHandler
, prefix ∷ f String
, property ∷ f String
, radioGroup ∷ f String
, readOnly ∷ f Boolean
, ref ∷ f (Ref (Nullable Node))
, resource ∷ f String
, role ∷ f String
, rowSpan ∷ f Int
, scoped ∷ f Boolean
, seamless ∷ f Boolean
, security ∷ f String
, spellCheck ∷ f Boolean
, srcDoc ∷ f JSX
, srcLang ∷ f String
, srcSet ∷ f String
, style ∷ f CSS
, suppressContentEditableWarning ∷ f Boolean
, tabIndex ∷ f Int
, title ∷ f String
, typeof ∷ f String
, unselectable ∷ f Boolean
, useMap ∷ f String
, vocab ∷ f String
, wmode ∷ f String
| more
)
type InputProps =
InputPropsF Id ()
type InputProps
= InputPropsF Id ()
type InputPropsF f more =
( _aria ∷ f (Object String)
, _data ∷ f (Object String)
, about ∷ f String
, accept ∷ f String
, acceptCharset ∷ f String
, accessKey ∷ f String
, allowFullScreen ∷ f Boolean
, alt ∷ f String
, autoCapitalize ∷ f String
, autoComplete ∷ f String
, autoCorrect ∷ f String
, autoFocus ∷ f Boolean
, autoPlay ∷ f Boolean
, autoSave ∷ f String
, capture ∷ f Boolean
, cellPadding ∷ f String
, cellSpacing ∷ f String
, charSet ∷ f String
, checked ∷ f Boolean
, classID ∷ f String
, colSpan ∷ f Int
, contentEditable ∷ f Boolean
, contextMenu ∷ f String
, crossOrigin ∷ f String
, dangerouslySetInnerHTML ∷ f { __html ∷ f String }
, datatype ∷ f String
, dateTime ∷ f String
, defaultChecked ∷ f String
, defaultValue ∷ f String
, dir ∷ f String
, disabled ∷ f Boolean
, draggable ∷ f Boolean
, encType ∷ f String
, form ∷ f String
, formAction ∷ f String
, formEncType ∷ f String
, formMethod ∷ f String
, formNoValidate ∷ f Boolean
, formTarget ∷ f String
, frameBorder ∷ f String
, height ∷ f String
, hidden ∷ f Boolean
, hrefLang ∷ f String
, htmlFor ∷ f String
, httpEquiv ∷ f String
, icon ∷ f String
, id ∷ f String
, inlist ∷ f String
, inputMode ∷ f String
, is ∷ f String
, itemID ∷ f String
, itemProp ∷ f String
, itemRef ∷ f String
, itemScope ∷ f Boolean
, itemType ∷ f String
, keyParams ∷ f String
, keyType ∷ f String
, lang ∷ f String
, list ∷ f String
, marginHeight ∷ f String
, marginWidth ∷ f String
, maxLength ∷ f Int
, mediaGroup ∷ f String
, minLength ∷ f Int
, multiple ∷ f Boolean
, name ∷ f String
, noValidate ∷ f Boolean
, onAnimationEnd ∷ f EventHandler
, onAnimationIteration ∷ f EventHandler
, onAnimationStart ∷ f EventHandler
, onBlur ∷ f EventHandler
, onChange ∷ f EventHandler
, onClick ∷ f EventHandler
, onCompositionEnd ∷ f EventHandler
, onCompositionStart ∷ f EventHandler
, onCompositionUpdate ∷ f EventHandler
, onContextMenu ∷ f EventHandler
, onCopy ∷ f EventHandler
, onCut ∷ f EventHandler
, onDoubleClick ∷ f EventHandler
, onDrag ∷ f EventHandler
, onDragEnd ∷ f EventHandler
, onDragEnter ∷ f EventHandler
, onDragExit ∷ f EventHandler
, onDragLeave ∷ f EventHandler
, onDragOver ∷ f EventHandler
, onDragStart ∷ f EventHandler
, onDrop ∷ f EventHandler
, onFocus ∷ f EventHandler
, onGotPointerCapture ∷ f EventHandler
, onInvalid ∷ f EventHandler
, onKeyDown ∷ f EventHandler
, onKeyPress ∷ f EventHandler
, onKeyUp ∷ f EventHandler
, onLostPointerCapture ∷ f EventHandler
, onMouseDown ∷ f EventHandler
, onMouseEnter ∷ f EventHandler
, onMouseLeave ∷ f EventHandler
, onMouseMove ∷ f EventHandler
, onMouseOut ∷ f EventHandler
, onMouseOver ∷ f EventHandler
, onMouseUp ∷ f EventHandler
, onPaste ∷ f EventHandler
, onPointerCancel ∷ f EventHandler
, onPointerDown ∷ f EventHandler
, onPointerEnter ∷ f EventHandler
, onPointerLeave ∷ f EventHandler
, onPointerMove ∷ f EventHandler
, onPointerOut ∷ f EventHandler
, onPointerOver ∷ f EventHandler
, onPointerUp ∷ f EventHandler
, onSelect ∷ f EventHandler
, onSubmit ∷ f EventHandler
, onTouchCancel ∷ f EventHandler
, onTouchEnd ∷ f EventHandler
, onTouchMove ∷ f EventHandler
, onTouchStart ∷ f EventHandler
, onTransitionEnd ∷ f EventHandler
, onWheel ∷ f EventHandler
, pattern ∷ f String
, placeholder ∷ f String
, prefix ∷ f String
, property ∷ f String
, radioGroup ∷ f String
, ref ∷ f (Ref (Nullable Node))
, readOnly ∷ f Boolean
, required ∷ f Boolean
, resource ∷ f String
, results ∷ f String
, role ∷ f String
, rowSpan ∷ f Int
, scoped ∷ f Boolean
, seamless ∷ f Boolean
, security ∷ f String
, size ∷ f Int
, spellCheck ∷ f Boolean
, src ∷ f String
, srcDoc ∷ f JSX
, srcLang ∷ f String
, srcSet ∷ f String
, step ∷ f String
, style ∷ f CSS
, suppressContentEditableWarning ∷ f Boolean
, tabIndex ∷ f Int
, title ∷ f String
, title ∷ f String
, type ∷ f String
, typeof ∷ f String
, unselectable ∷ f Boolean
, useMap ∷ f String
, value ∷ f String
, vocab ∷ f String
, width ∷ f String
, wmode ∷ f String
, min ∷ f (String)
, max ∷ f (String)
| more
)
type InputPropsF f more
= ( _aria ∷ f (Object String)
, _data ∷ f (Object String)
, about ∷ f String
, accept ∷ f String
, acceptCharset ∷ f String
, accessKey ∷ f String
, allowFullScreen ∷ f Boolean
, alt ∷ f String
, autoCapitalize ∷ f String
, autoComplete ∷ f String
, autoCorrect ∷ f String
, autoFocus ∷ f Boolean
, autoPlay ∷ f Boolean
, autoSave ∷ f String
, capture ∷ f Boolean
, cellPadding ∷ f String
, cellSpacing ∷ f String
, charSet ∷ f String
, checked ∷ f Boolean
, classID ∷ f String
, colSpan ∷ f Int
, contentEditable ∷ f Boolean
, contextMenu ∷ f String
, crossOrigin ∷ f String
, dangerouslySetInnerHTML ∷ f { __html ∷ f String }
, datatype ∷ f String
, dateTime ∷ f String
, defaultChecked ∷ f String
, defaultValue ∷ f String
, dir ∷ f String
, disabled ∷ f Boolean
, draggable ∷ f Boolean
, encType ∷ f String
, form ∷ f String
, formAction ∷ f String
, formEncType ∷ f String
, formMethod ∷ f String
, formNoValidate ∷ f Boolean
, formTarget ∷ f String
, frameBorder ∷ f String
, height ∷ f String
, hidden ∷ f Boolean
, hrefLang ∷ f String
, htmlFor ∷ f String
, httpEquiv ∷ f String
, icon ∷ f String
, id ∷ f String
, inlist ∷ f String
, inputMode ∷ f String
, is ∷ f String
, itemID ∷ f String
, itemProp ∷ f String
, itemRef ∷ f String
, itemScope ∷ f Boolean
, itemType ∷ f String
, keyParams ∷ f String
, keyType ∷ f String
, lang ∷ f String
, list ∷ f String
, marginHeight ∷ f String
, marginWidth ∷ f String
, maxLength ∷ f Int
, mediaGroup ∷ f String
, minLength ∷ f Int
, multiple ∷ f Boolean
, name ∷ f String
, noValidate ∷ f Boolean
, onAnimationEnd ∷ f EventHandler
, onAnimationIteration ∷ f EventHandler
, onAnimationStart ∷ f EventHandler
, onBlur ∷ f EventHandler
, onChange ∷ f EventHandler
, onClick ∷ f EventHandler
, onCompositionEnd ∷ f EventHandler
, onCompositionStart ∷ f EventHandler
, onCompositionUpdate ∷ f EventHandler
, onContextMenu ∷ f EventHandler
, onCopy ∷ f EventHandler
, onCut ∷ f EventHandler
, onDoubleClick ∷ f EventHandler
, onDrag ∷ f EventHandler
, onDragEnd ∷ f EventHandler
, onDragEnter ∷ f EventHandler
, onDragExit ∷ f EventHandler
, onDragLeave ∷ f EventHandler
, onDragOver ∷ f EventHandler
, onDragStart ∷ f EventHandler
, onDrop ∷ f EventHandler
, onFocus ∷ f EventHandler
, onGotPointerCapture ∷ f EventHandler
, onInvalid ∷ f EventHandler
, onKeyDown ∷ f EventHandler
, onKeyPress ∷ f EventHandler
, onKeyUp ∷ f EventHandler
, onLostPointerCapture ∷ f EventHandler
, onMouseDown ∷ f EventHandler
, onMouseEnter ∷ f EventHandler
, onMouseLeave ∷ f EventHandler
, onMouseMove ∷ f EventHandler
, onMouseOut ∷ f EventHandler
, onMouseOver ∷ f EventHandler
, onMouseUp ∷ f EventHandler
, onPaste ∷ f EventHandler
, onPointerCancel ∷ f EventHandler
, onPointerDown ∷ f EventHandler
, onPointerEnter ∷ f EventHandler
, onPointerLeave ∷ f EventHandler
, onPointerMove ∷ f EventHandler
, onPointerOut ∷ f EventHandler
, onPointerOver ∷ f EventHandler
, onPointerUp ∷ f EventHandler
, onSelect ∷ f EventHandler
, onSubmit ∷ f EventHandler
, onTouchCancel ∷ f EventHandler
, onTouchEnd ∷ f EventHandler
, onTouchMove ∷ f EventHandler
, onTouchStart ∷ f EventHandler
, onTransitionEnd ∷ f EventHandler
, onWheel ∷ f EventHandler
, pattern ∷ f String
, placeholder ∷ f String
, prefix ∷ f String
, property ∷ f String
, radioGroup ∷ f String
, ref ∷ f (Ref (Nullable Node))
, readOnly ∷ f Boolean
, required ∷ f Boolean
, resource ∷ f String
, results ∷ f String
, role ∷ f String
, rowSpan ∷ f Int
, scoped ∷ f Boolean
, seamless ∷ f Boolean
, security ∷ f String
, size ∷ f Int
, spellCheck ∷ f Boolean
, src ∷ f String
, srcDoc ∷ f JSX
, srcLang ∷ f String
, srcSet ∷ f String
, step ∷ f String
, style ∷ f CSS
, suppressContentEditableWarning ∷ f Boolean
, tabIndex ∷ f Int
, title ∷ f String
, title ∷ f String
, type ∷ f String
, typeof ∷ f String
, unselectable ∷ f Boolean
, useMap ∷ f String
, value ∷ f String
, vocab ∷ f String
, width ∷ f String
, wmode ∷ f String
, min ∷ f (String)
, max ∷ f (String)
| more
)
type ButtonProps =
ButtonPropsF Id ()
type ButtonProps
= ButtonPropsF Id ()
type ButtonPropsF f more =
( _aria ∷ f (Object String)
, _data ∷ f (Object String)
, about ∷ f String
, acceptCharset ∷ f String
, accessKey ∷ f String
, allowFullScreen ∷ f Boolean
, allowTransparency ∷ f Boolean
, autoFocus ∷ f Boolean
, autoPlay ∷ f Boolean
, capture ∷ f Boolean
, cellPadding ∷ f String
, cellSpacing ∷ f String
, charSet ∷ f String
, children ∷ f (Array JSX)
, classID ∷ f String
, className ∷ f String
, colSpan ∷ f Int
, contentEditable ∷ f Boolean
, contextMenu ∷ f String
, crossOrigin ∷ f String
, dangerouslySetInnerHTML ∷ f { __html ∷ String }
, datatype ∷ f String
, dateTime ∷ f String
, dir ∷ f String
, disabled ∷ f Boolean
, draggable ∷ f Boolean
, encType ∷ f String
, form ∷ f String
, formAction ∷ f String
, formEncType ∷ f String
, formMethod ∷ f String
, formNoValidate ∷ f Boolean
, formTarget ∷ f String
, frameBorder ∷ f String
, hidden ∷ f Boolean
, hrefLang ∷ f String
, htmlFor ∷ f String
, httpEquiv ∷ f String
, icon ∷ f String
, id ∷ f String
, inlist ∷ f String
, inputMode ∷ f String
, is ∷ f String
, itemID ∷ f String
, itemProp ∷ f String
, itemRef ∷ f String
, itemScope ∷ f Boolean
, itemType ∷ f String
, key ∷ f String
, keyParams ∷ f String
, keyType ∷ f String
, lang ∷ f String
, marginHeight ∷ f String
, marginWidth ∷ f String
, maxLength ∷ f Int
, mediaGroup ∷ f String
, minLength ∷ f Int
, name ∷ f String
, noValidate ∷ f Boolean
, onAnimationEnd ∷ f EventHandler
, onAnimationIteration ∷ f EventHandler
, onAnimationStart ∷ f EventHandler
, onBlur ∷ f EventHandler
, onClick ∷ f EventHandler
, onCompositionEnd ∷ f EventHandler
, onCompositionStart ∷ f EventHandler
, onCompositionUpdate ∷ f EventHandler
, onContextMenu ∷ f EventHandler
, onCopy ∷ f EventHandler
, onCut ∷ f EventHandler
, onDoubleClick ∷ f EventHandler
, onDrag ∷ f EventHandler
, onDragEnd ∷ f EventHandler
, onDragEnter ∷ f EventHandler
, onDragExit ∷ f EventHandler
, onDragLeave ∷ f EventHandler
, onDragOver ∷ f EventHandler
, onDragStart ∷ f EventHandler
, onDrop ∷ f EventHandler
, onFocus ∷ f EventHandler
, onGotPointerCapture ∷ f EventHandler
, onInvalid ∷ f EventHandler
, onKeyDown ∷ f EventHandler
, onKeyPress ∷ f EventHandler
, onKeyUp ∷ f EventHandler
, onLostPointerCapture ∷ f EventHandler
, onMouseDown ∷ f EventHandler
, onMouseEnter ∷ f EventHandler
, onMouseLeave ∷ f EventHandler
, onMouseMove ∷ f EventHandler
, onMouseOut ∷ f EventHandler
, onMouseOver ∷ f EventHandler
, onMouseUp ∷ f EventHandler
, onPaste ∷ f EventHandler
, onPointerCancel ∷ f EventHandler
, onPointerDown ∷ f EventHandler
, onPointerEnter ∷ f EventHandler
, onPointerLeave ∷ f EventHandler
, onPointerMove ∷ f EventHandler
, onPointerOut ∷ f EventHandler
, onPointerOver ∷ f EventHandler
, onPointerUp ∷ f EventHandler
, onSelect ∷ f EventHandler
, onSubmit ∷ f EventHandler
, onTouchCancel ∷ f EventHandler
, onTouchEnd ∷ f EventHandler
, onTouchMove ∷ f EventHandler
, onTouchStart ∷ f EventHandler
, onTransitionEnd ∷ f EventHandler
, onWheel ∷ f EventHandler
, prefix ∷ f String
, property ∷ f String
, radioGroup ∷ f String
, readOnly ∷ f Boolean
, ref ∷ f (Ref (Nullable Node))
, resource ∷ f String
, role ∷ f String
, rowSpan ∷ f Int
, scoped ∷ f Boolean
, seamless ∷ f Boolean
, security ∷ f String
, spellCheck ∷ f Boolean
, srcDoc ∷ f JSX
, srcLang ∷ f String
, srcSet ∷ f String
, style ∷ f CSS
, suppressContentEditableWarning ∷ f Boolean
, tabIndex ∷ f Int
, title ∷ f String
, type ∷ f String
, typeof ∷ f String
, unselectable ∷ f Boolean
, useMap ∷ f String
, value ∷ f String
, vocab ∷ f String
, wmode ∷ f String
| more
)
type ButtonPropsF f more
= ( _aria ∷ f (Object String)
, _data ∷ f (Object String)
, about ∷ f String
, acceptCharset ∷ f String
, accessKey ∷ f String
, allowFullScreen ∷ f Boolean
, allowTransparency ∷ f Boolean
, autoFocus ∷ f Boolean
, autoPlay ∷ f Boolean
, capture ∷ f Boolean
, cellPadding ∷ f String
, cellSpacing ∷ f String
, charSet ∷ f String
, children ∷ f (Array JSX)
, classID ∷ f String
, className ∷ f String
, colSpan ∷ f Int
, contentEditable ∷ f Boolean
, contextMenu ∷ f String
, crossOrigin ∷ f String
, dangerouslySetInnerHTML ∷ f { __html ∷ String }
, datatype ∷ f String
, dateTime ∷ f String
, dir ∷ f String
, disabled ∷ f Boolean
, draggable ∷ f Boolean
, encType ∷ f String
, form ∷ f String
, formAction ∷ f String
, formEncType ∷ f String
, formMethod ∷ f String
, formNoValidate ∷ f Boolean
, formTarget ∷ f String
, frameBorder ∷ f String
, hidden ∷ f Boolean
, hrefLang ∷ f String
, htmlFor ∷ f String
, httpEquiv ∷ f String
, icon ∷ f String
, id ∷ f String
, inlist ∷ f String
, inputMode ∷ f String
, is ∷ f String
, itemID ∷ f String
, itemProp ∷ f String
, itemRef ∷ f String
, itemScope ∷ f Boolean
, itemType ∷ f String
, key ∷ f String
, keyParams ∷ f String
, keyType ∷ f String
, lang ∷ f String
, marginHeight ∷ f String
, marginWidth ∷ f String
, maxLength ∷ f Int
, mediaGroup ∷ f String
, minLength ∷ f Int
, name ∷ f String
, noValidate ∷ f Boolean
, onAnimationEnd ∷ f EventHandler
, onAnimationIteration ∷ f EventHandler
, onAnimationStart ∷ f EventHandler
, onBlur ∷ f EventHandler
, onClick ∷ f EventHandler
, onCompositionEnd ∷ f EventHandler
, onCompositionStart ∷ f EventHandler
, onCompositionUpdate ∷ f EventHandler
, onContextMenu ∷ f EventHandler
, onCopy ∷ f EventHandler
, onCut ∷ f EventHandler
, onDoubleClick ∷ f EventHandler
, onDrag ∷ f EventHandler
, onDragEnd ∷ f EventHandler
, onDragEnter ∷ f EventHandler
, onDragExit ∷ f EventHandler
, onDragLeave ∷ f EventHandler
, onDragOver ∷ f EventHandler
, onDragStart ∷ f EventHandler
, onDrop ∷ f EventHandler
, onFocus ∷ f EventHandler
, onGotPointerCapture ∷ f EventHandler
, onInvalid ∷ f EventHandler
, onKeyDown ∷ f EventHandler
, onKeyPress ∷ f EventHandler
, onKeyUp ∷ f EventHandler
, onLostPointerCapture ∷ f EventHandler
, onMouseDown ∷ f EventHandler
, onMouseEnter ∷ f EventHandler
, onMouseLeave ∷ f EventHandler
, onMouseMove ∷ f EventHandler
, onMouseOut ∷ f EventHandler
, onMouseOver ∷ f EventHandler
, onMouseUp ∷ f EventHandler
, onPaste ∷ f EventHandler
, onPointerCancel ∷ f EventHandler
, onPointerDown ∷ f EventHandler
, onPointerEnter ∷ f EventHandler
, onPointerLeave ∷ f EventHandler
, onPointerMove ∷ f EventHandler
, onPointerOut ∷ f EventHandler
, onPointerOver ∷ f EventHandler
, onPointerUp ∷ f EventHandler
, onSelect ∷ f EventHandler
, onSubmit ∷ f EventHandler
, onTouchCancel ∷ f EventHandler
, onTouchEnd ∷ f EventHandler
, onTouchMove ∷ f EventHandler
, onTouchStart ∷ f EventHandler
, onTransitionEnd ∷ f EventHandler
, onWheel ∷ f EventHandler
, prefix ∷ f String
, property ∷ f String
, radioGroup ∷ f String
, readOnly ∷ f Boolean
, ref ∷ f (Ref (Nullable Node))
, resource ∷ f String
, role ∷ f String
, rowSpan ∷ f Int
, scoped ∷ f Boolean
, seamless ∷ f Boolean
, security ∷ f String
, spellCheck ∷ f Boolean
, srcDoc ∷ f JSX
, srcLang ∷ f String
, srcSet ∷ f String
, style ∷ f CSS
, suppressContentEditableWarning ∷ f Boolean
, tabIndex ∷ f Int
, title ∷ f String
, type ∷ f String
, typeof ∷ f String
, unselectable ∷ f Boolean
, useMap ∷ f String
, value ∷ f String
, vocab ∷ f String
, wmode ∷ f String
| more
)

View File

@ -1,8 +1,8 @@
module Yoga.Block.Layout.Sidebar.Spec where
import Yoga.Prelude.Spec
import Yoga.Block.Layout.Sidebar as Sidebar
import React.Basic.DOM as R
import Yoga.Block.Layout.Sidebar as Sidebar
spec ∷ Spec Unit
spec =
@ -10,7 +10,7 @@ spec =
describe "The sidebar" do
it "renders without errors" do
void
$ renderComponent Sidebar.component {}
$ renderComponent Sidebar.component { children: [] }
it "accepts div props" do
{ findByText } <-
renderComponent Sidebar.component
@ -18,4 +18,5 @@ spec =
, children: [ R.text "Find me!" ]
}
elem <- findByText "Find me!"
elem `shouldHaveAttribute` "role"
parent <- elem # getParentOrFailWith "Sidebar has no parent"
parent `shouldHaveAttribute` "role"

View File

@ -3,18 +3,18 @@ module Yoga.Block.Layout.Sidebar.View (component, Props, PropsF) where
import Yoga.Prelude.View
import Yoga.Block.Layout.Sidebar.Style as Style
type PropsF f =
( className ∷ f String
| Style.Props f DivProps
)
type PropsF f
= ( className ∷ f String
| Style.Props f DivProps
)
type Props =
PropsF Id
type Props
= PropsF Id
type PropsOptional =
PropsF OptionalProp
type PropsOptional
= PropsF OptionalProp
component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | p }
component ∷ ∀ p p_. Union p p_ Props => ReactComponent { children :: Array JSX | p }
component = rawComponent
rawComponent ∷ ∀ p. ReactComponent { | p }

View File

@ -10,7 +10,7 @@ spec =
describe "The stack" do
it "renders without errors" do
void
$ renderComponent Stack.component {}
$ renderComponent Stack.component { children: [] }
it "accepts div props" do
{ findByText } <-
renderComponent Stack.component
@ -18,4 +18,5 @@ spec =
, children: [ R.text "Find me!" ]
}
elem <- findByText "Find me!"
elem `shouldHaveAttribute` "role"
parent <- elem # getParentOrFailWith "No parent!"
parent `shouldHaveAttribute` "role"

View File

@ -1,6 +1,7 @@
module Yoga.Block.Layout.Stack.View (component, Props, PropsF) where
import Yoga.Prelude.View
import Unsafe.Coerce (unsafeCoerce)
import Yoga.Block.Layout.Stack.Style as Style
type PropsF f =
@ -14,16 +15,18 @@ type Props =
type PropsOptional =
PropsF OptionalProp
component ∷ ∀ p q. Union p q Props => ReactComponent { | p }
component ∷ ∀ p q. Union p q Props => ReactComponent { children ∷ Array JSX | p }
component = rawComponent
rawComponent ∷ ∀ p. ReactComponent { | p }
rawComponent =
mkForwardRefComponent "Stack" do
\(props ∷ { | PropsOptional }) ref -> React.do
-- Must be careful here because React fiddles with children
let safeChildren = reactChildrenToArray (unsafeCoerce props.children)
-- Wrapping children to use `:nth-of-type` instead of `:nth-child`
-- in CSS because the latter is problematic in SSR
let wrappedChildren = props.children <#> \c -> div </ {} /> [ c ]
let wrappedChildren = safeChildren <#> \c -> div </ {} /> [ c ]
pure
$ emotionDiv ref props
{ className: "ry-stack " <>? props.className

View File

@ -12,4 +12,4 @@ import Effect.Aff (Aff)
import React.Basic (ReactComponent)
import React.TestingLibrary (class TextMatch, FakeKeyboardEvent, RenderQueries, cleanup, defaultKeyboardEvent, describeComponent, findByText, fireEvent, fireEventAbort, fireEventAnimationEnd, fireEventAnimationIteration, fireEventAnimationStart, fireEventBlur, fireEventCanPlay, fireEventCanPlayThrough, fireEventChange, fireEventClick, fireEventCompositionEnd, fireEventCompositionStart, fireEventCompositionUpdate, fireEventContextMenu, fireEventCopy, fireEventCut, fireEventDblClick, fireEventDoubleClick, fireEventDrag, fireEventDragEnd, fireEventDragEnter, fireEventDragExit, fireEventDragLeave, fireEventDragOver, fireEventDragStart, fireEventDrop, fireEventDurationChange, fireEventEmptied, fireEventEncrypted, fireEventEnded, fireEventError, fireEventFocus, fireEventFocusIn, fireEventFocusOut, fireEventInput, fireEventInvalid, fireEventKeyDown, fireEventKeyPress, fireEventKeyUp, fireEventLoad, fireEventLoadStart, fireEventLoadedData, fireEventLoadedMetadata, fireEventMouseDown, fireEventMouseEnter, fireEventMouseLeave, fireEventMouseMove, fireEventMouseOut, fireEventMouseOver, fireEventMouseUp, fireEventPaste, fireEventPause, fireEventPlay, fireEventPlaying, fireEventPointerCancel, fireEventPointerDown, fireEventPointerMove, fireEventPointerOut, fireEventPointerOver, fireEventPointerUp, fireEventProgress, fireEventRateChange, fireEventScroll, fireEventSeeked, fireEventSeeking, fireEventSelect, fireEventStalled, fireEventSubmit, fireEventSuspend, fireEventTimeUpdate, fireEventTouchCancel, fireEventTouchEnd, fireEventTouchMove, fireEventTouchStart, fireEventTransitionEnd, fireEventVolumeChange, fireEventWaiting, fireEventWheel, render, renderComponent, typeText)
import Test.Spec (class Example, class FocusWarning, ActionWith, ComputationType(..), Item(..), Spec, SpecT(..), SpecTree, Tree(..), after, afterAll, afterAll_, after_, around, aroundWith, around_, before, beforeAll, beforeAll_, beforeWith, before_, collect, describe, describeOnly, evaluateExample, focus, hoistSpec, it, itOnly, mapSpecTree, parallel, pending, pending', sequential)
import Test.Spec.Assertions.DOM (shouldHaveAttribute, shouldHaveAttributeWithValue, textContentShouldEqual, valueShouldEqual)
import Test.Spec.Assertions.DOM (getParentOrFailWith, shouldHaveAttribute, shouldHaveAttributeWithValue, textContentShouldEqual, valueShouldEqual)