@@ -12,7 +12,7 @@ import React.Basic.DOM as R
1212import React.Basic.Hooks (reactComponent)
1313import React.Basic.Hooks as React
1414import Record.Extra (sequenceRecord)
15−import Unsafe.Coerce (unsafeCoerce)
15+import Record.Unsafe.Union (unsafeUnion)
1616import Yoga.Block.Atom.Input.Style as Style
1717
1818type Props =
@@ -80,42 +80,41 @@ component =
8080 Nothing ->
8181 M.div
8282 </*
83− ( unsafeCoerce
84− { className: "ry-input-label-small"
85− , layout: M.layout true
86− , layoutId: M.layoutId ("ry-input-label-" <> props.labelId)
87− , css: Style.labelSmall props.background props.textColour
88− , transition: M.transition { duration: 0.18, ease: "easeOut" }
89− , "data-has-focus": props.isFocussed
83+ ( { className: "ry-input-label-small"
84+ , layout: M.layout true
85+ , layoutId: M.layoutId ("ry-input-label-" <> props.labelId)
86+ , css: Style.labelSmall props.background props.textColour
87+ , transition: M.transition { duration: 0.18, ease: "easeOut" }
88+ , initial: M.initial false
89+ } `unsafeAddProps`
90+ { "data-has-focus": props.isFocussed
9091 , "data-invalid": show props.isInvalid
9192 , "data-required": show props.isRequired
92− , initial: M.initial false
9393 }
9494 )
9595 Just { largeLeft, largeWidth } ->
9696 M.div
9797 </*
98− { className:
99− if props.renderLargeLabel then
100− "ry-input-label-large"
101− else
102− "ry-input-label-small"
103− , layout: M.layout true
104− , layoutId: M.layoutId ("ry-input-label-" <> props.labelId)
105− , css:
106− if props.renderLargeLabel then
107− Style.labelLarge { left: largeLeft, width: largeWidth }
108− else
109− Style.labelSmall props.background props.textColour
110− , transition: M.transition { duration: 0.18, ease: "easeOut" }
111− , _data:
112− Object.fromHomogeneous
113− { "has-focus": show props.isFocussed
114− , "invalid": show props.isInvalid
115− , "required": show props.isRequired
116− }
117− , initial: M.initial false
118− }
98+ ( { className:
99+ if props.renderLargeLabel then
100+ "ry-input-label-large"
101+ else
102+ "ry-input-label-small"
103+ , layout: M.layout true
104+ , layoutId: M.layoutId ("ry-input-label-" <> props.labelId)
105+ , css:
106+ if props.renderLargeLabel then
107+ Style.labelLarge { left: largeLeft, width: largeWidth }
108+ else
109+ Style.labelSmall props.background props.textColour
110+ , transition: M.transition { duration: 0.18, ease: "easeOut" }
111+ , initial: M.initial false
112+ } `unsafeAddProps`
113+ { "data-has-focus": props.isFocussed
114+ , "data-invalid": show props.isInvalid
115+ , "data-required": show props.isRequired
116+ }
117+ )
119118 labelSpan =
120119 M.span
121120 </
@@ -126,3 +125,6 @@ component =
126125 , id: props.labelId
127126 }
128127 pure result
128+
129+unsafeAddProps ∷ ∀ r s. { | r } → { | s } → { | r }
130+unsafeAddProps = unsafeUnion