1303dc4 · rowtype-yoga/ry-blocks

10import Foreign.Object as Object

11import Framer.Motion as M

12import Partial.Unsafe (unsafeCrashWith)

13−import React.Basic.DOM (CSS, Props_input, css)

13+import React.Basic.DOM (CSS, css)

14import React.Basic.DOM as R

15import React.Basic.Emotion (Style)

16import React.Basic.Hooks (reactComponent)

131

132rawContainer ∷ ∀ p. ReactComponent { | p }

133rawContainer =

134− mkForwardRefComponent "Input" do

134+ mkForwardRefComponent "InputContainer" do

135 \( props ∷

136 { children ∷ Array JSX

137 , label ∷ JSX

228 setHasValue (v /= "")

229 )

230 onFocus = handler preventDefault (const $ unless hasFocus $ setHasFocus true)

231+ theInput =

232+ rawInput

233+ </> ( props

234+ { onFocus = composeHandler props.onFocus onFocus

235+ , onBlur = composeHandler props.onBlur onBlur

236+ , ref = ref

237+ , placeholder = maybePlaceholder # maybeToOp # unsafeUnOptional

238+ , _aria =

239+ if props.label # opToMaybe # isJust then

240+ aria # Object.insert "labelledby" labelId

241+ else

242+ aria

243+ }

244+ )

231 inputContainer =

245 inputContainer =

232− M.div

246+ rawContainer

233− </* M.motion

247+ </ { label: (mkLabel <$> props.label) ?|| mempty

234− { variants: M.variants containerVariants

248+ , hasFocus: hasFocus

235− , animate: M.animate if hasFocus then containerVariantLabels.focussed else containerVariantLabels.blurred

249+ , inputProps: props

236− }

250+ , css: props.css

237− { className: "ry-input-container"

238− , css: Style.inputContainer props

239− , _data:

240− Object.fromHomogeneous

241− { "invalid": aria # Object.lookup "invalid" # fromMaybe ""

242− }

243− }

251+ }

244 /> [ leading # foldMap \l -> div </ { ref: leftIconRef } /> [ l ]

252 /> [ leading # foldMap \l -> div </ { ref: leftIconRef } /> [ l ]

245− , rawInput

253+ , theInput

246− </> ( props

247− { onFocus = composeHandler props.onFocus onFocus

248− , onBlur = composeHandler props.onBlur onBlur

249− , ref = ref

250− , placeholder = maybePlaceholder # maybeToOp # unsafeUnOptional

251− , _aria =

252− if props.label # opToMaybe # isJust then

253− aria # Object.insert "labelledby" labelId

254− else

255− aria

256− }

257− )

258− -- ref

259− -- ( props { type = HTMLInput.toString <$> props.type # unsafeUnOptional }

260− -- # setOrDelete (SProxy ∷ _ "placeholder") (maybePlaceholder # maybeToOp)

261− -- # setOrDelete (SProxy ∷ _ "value") (maybeValue # maybeToOp)

262− -- )

263− -- { className: "ry-input"

264− -- , css: Style.input

265− -- }

266 , trailing # foldMap \t -> div </ {} /> [ t ]

254 , trailing # foldMap \t -> div </ {} /> [ t ]

267 ]

255 ]

268 pure

256 pure