bee595b · rowtype-yoga/ry-blocks

git.iko.soy/rowtype-yoga/ry-blocks

Looks like it works now

commitbee595be4ccb70c4c9d743ca0092094e8b91f7b7 authorMark Eibes <mark.eibes@gmail.com> dateSat 19 Mar 2022, 21:05 (5 years ago) parentbfed44c

4 files changed+46−37

compare with main

unifiedsplit

src/Yoga/Block/Atom/Input/Hook/UseTypingPlaceholders.purs+8−4 src/Yoga/Block/Atom/Input/View.purs+10−11 src/Yoga/Block/Atom/Input/View/Label.purs+1−1 src/Yoga/Block/Organism/Form/Story.purs+27−21

src/Yoga/Block/Atom/Input/Hook/UseTypingPlaceholders.purs+8−4

@@ -9,9 +9,11 @@ import Data.String as String

99import Data.Traversable (for)

1010import Effect.Aff (Fiber, Milliseconds(..), delay, killFiber, launchAff, launchAff_)

1111import Effect.Aff as Aff

12+import Effect.Class.Console as Console

1213import Effect.Random (randomRange)

1314import Partial.Unsafe (unsafeCrashWith)

1415import React.Basic.Hooks as React

16+import Unsafe.Reference (UnsafeRefEq(..))

1517import Web.DOM.Node as Node

1618import Web.Event.Event (EventType(..))

1719import Web.Event.EventTarget (addEventListener, eventListener, removeEventListener)

@@ -42,9 +44,11 @@ useTypingPlaceholders defaultPlaceholder otherPlaceholders = coerceHook React.do

4244 inputElement ← HTMLInputElement.fromNode node # pure # MaybeT

4345 HTMLInputElement.value inputElement <#> pure # MaybeT

4446

45− useEffectOnce do

47+ useEffectAlways do

48+ Console.log "Let's go"

4649 let

4750 start = do

51+ Console.log "I'm starting!"

4852 fiber ← launchAff go

4953 writeRef fiberRef $ Just fiber

5054

@@ -72,8 +76,8 @@ useTypingPlaceholders defaultPlaceholder otherPlaceholders = coerceHook React.do

7276 setPlaceholder defaultPlaceholder

7377 writeRef placeholderIndexRef 0

7478 writeRef isDeletingRef false

75− maybeInputValue ← getInputValue

76− when (maybeInputValue == Just "") start

79+ inputValueʔ ← getInputValue

80+ when (inputValueʔ == Just "") start

7781

7882 mkOnBlurListener =

7983 eventListener \_ → do

@@ -158,4 +162,4 @@ useTypingPlaceholders defaultPlaceholder otherPlaceholders = coerceHook React.do

158162 unregister (EventType "focus") onFocusListener

159163 unregister (EventType "blur") onBlurListener

160164 unregister (EventType "input") onInputListener

161− pure $ inputRef

165+ pure inputRef

src/Yoga/Block/Atom/Input/View.purs+10−11

@@ -121,17 +121,16 @@ rawComponent =

121121 maybePlaceholder = do

122122 given <- props.placeholder # opToMaybe

123123 if isJust maybeLabelText && hasFocus then Just given else Nothing

124− onBlur =

125− handler preventDefault

126− ( const do

127− when hasFocus $ setHasFocus false

128− el <- getHTMLElementFromRef ref

129− let inputEl = InputElement.fromHTMLElement =<< el

130− for_ inputEl \ie -> do

131− v <- InputElement.value ie

132− setValue v

133− )

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

124+

125+ onBlur = handler_ do

126+ when hasFocus $ setHasFocus false

127+ el <- getHTMLElementFromRef ref

128+ let inputEl = InputElement.fromHTMLElement =<< el

129+ for_ inputEl \ie -> do

130+ v <- InputElement.value ie

131+ setValue v

132+

133+ onFocus = handler_ (unless hasFocus $ setHasFocus true)

135134 onChange = handler targetValue (setValue <<< fromMaybe "")

136135 let

137136 inputProps ∷ { | PropsOptional }

src/Yoga/Block/Atom/Input/View/Label.purs+1−1

@@ -31,7 +31,7 @@ type Props =

3131component ∷ ReactComponent Props

3232component =

3333 unsafePerformEffect

34− $ reactComponent "Input Label" \props@{ inputRef, parentRef } -> React.do

34+ $ reactComponent "InputLabel" \props@{ inputRef, parentRef } -> React.do

3535 maybeOffsets /\ setOffsets <- useState' Nothing

3636 -- this is so complicated because we need to take scale into account

3737 useLayoutEffectAlways do

src/Yoga/Block/Organism/Form/Story.purs+27−21

@@ -1,6 +1,7 @@

11module Yoga.Block.Organism.Form.Story where

33import Prelude

45import Data.Lens.Record (prop)

56import Data.Maybe (Maybe(..))

67import Data.String.NonEmpty (NonEmptyString, nes)

@@ -17,26 +18,29 @@ import React.Basic.Hooks as React

1718import Type.Prelude (Proxy(..))

1819import Yoga ((/>), (</), (</>))

1920import Yoga.Block as Block

21+import Yoga.Block.Atom.Input.Hook.UseTypingPlaceholders (useTypingPlaceholders)

2022import Yoga.Block.Atom.Input.Types as InputType

2123import Yoga.Block.Container.Style as Styles

24+import Yoga.Block.Internal (NodeRef)

2225import Yoga.Block.Organism.Form (FormBuilder, Validated(..), formDefaults)

2326import Yoga.Block.Organism.Form as Form

2427import Yoga.Block.Organism.Form.Types (RequiredField(..))

2528

26−default ∷

27− { decorators ∷ Array (Effect JSX -> JSX)

28− , title ∷ String

29− }

29+default

30+ ∷ { decorators ∷ Array (Effect JSX -> JSX)

31+ , title ∷ String

32+ }

3033default =

3134 { title: "Organism/Form"

3235 , decorators:

33− [ \storyFn ->

34− Block.container

35− </ {}

36− /> [ element E.global { styles: Styles.global }

37− , unsafePerformEffect storyFn

38− ]

39− ]

36+ [ \storyFn ->

37+ Block.container

38+ </ {}

39+ />

40+ [ element E.global { styles: Styles.global }

41+ , unsafePerformEffect storyFn

42+ ]

43+ ]

4044 }

4145

4246type User =

@@ -72,13 +76,15 @@ aForm = do

7276 where

7377 mkExample =

7478 reactComponent "FormExample" \_ -> React.do

79+ inputRef ← useTypingPlaceholders "First name"

80+ [ "Type in your given name", "WAAAAARUMÄ" ]

7581 _userDialog /\ setUserDialog <- useState' Nothing

7682 { setModified, reset: _reset, validated, form } <-

77− Form.useForm userForm

83+ Form.useForm (userForm inputRef)

7884 { initialState: formDefaults

7985 , formProps:

80− { readOnly: false

81− }

86+ { readOnly: false

87+ }

8288 }

8389 pure

8490 $ fragment

@@ -87,10 +93,10 @@ aForm = do

8793 -- on the form's submit button and `preventDefault` to keep the browser

8894 -- from reloading the page on submission.

8995 { onSubmit:

90− handler preventDefault \_ -> case validated of

91− Nothing -> do

92− setModified

93− Just { firstName, lastName } -> setUserDialog $ Just { firstName, lastName }

96+ handler preventDefault \_ -> case validated of

97+ Nothing -> do

98+ setModified

99+ Just { firstName, lastName } -> setUserDialog $ Just { firstName, lastName }

94100 , style: R.css { alignSelf: "stretch" }

95101 , children: [ form ]

96102 }

@@ -123,13 +129,13 @@ aForm = do

123129 }

124130 in { nickname, age }

125131

126− userForm ∷ ∀ props. FormBuilder { readOnly ∷ Boolean | props } User ValidUser

127− userForm = ado

132+ userForm ∷ ∀ props. NodeRef -> FormBuilder { readOnly ∷ Boolean | props } User ValidUser

133+ userForm inputRef = ado

128134 firstName <-

129135 Form.focus (prop (Proxy ∷ _ "firstName"))

130136 $ Form.validated (Form.nonEmpty' "You must have a first name")

131137 $ Form.inputBox (nes (Proxy ∷ _ "First Name")) Required

132− { placeholder: "First name" }

138+ { id: "firstName", inputRef }

133139 lastName <-

134140 Form.focus (prop (Proxy ∷ _ "lastName"))

135141 $ Form.validated