0c34f9c · rowtype-yoga/psfp

git.iko.soy/rowtype-yoga/psfp

on master help sign in

Works

0c34f9cMark Eibes7 years ago

blog/.psc-ide-port+1−1

compare with master

unifiedsplit

@@ -1 +1 @@

1−15750

1+15408

blog/src/components/FillInTheGaps.purs+29−18

@@ -5,6 +5,8 @@ import Data.Array (foldMap, intercalate)

5import Data.Array as A

6import Data.Either (Either(..))

7import Data.Foldable (foldl, for_)

8+import Data.Lens (over, (%~))

9+import Data.Lens.Index (ix)

8import Data.Maybe (Maybe(..), fromMaybe, fromMaybe')

10import Data.Maybe (Maybe(..), fromMaybe, fromMaybe')

9import Data.Monoid (guard)

11import Data.Monoid (guard)

10import Data.String (Pattern(..), split)

12import Data.String (Pattern(..), split)

@@ -14,6 +16,7 @@ import Data.String.Regex as Regex

14import Data.String.Regex.Flags as RegexFlags

16import Data.String.Regex.Flags as RegexFlags

15import Data.String.Regex.Unsafe (unsafeRegex)

17import Data.String.Regex.Unsafe (unsafeRegex)

16import Data.Tuple.Nested ((/\))

18import Data.Tuple.Nested ((/\))

19+import Debug.Trace (spy)

17import Effect (Effect)

20import Effect (Effect)

18import Effect.Aff (launchAff_)

21import Effect.Aff (launchAff_)

19import Effect.Class (liftEffect)

22import Effect.Class (liftEffect)

@@ -70,24 +73,32 @@ complete arr = foldl f true (join arr)

70 Hole _ s -> s /= ""

73 Hole _ s -> s /= ""

71 _ -> true

74 _ -> true

76+visibleRange ∷ Array (Array Segment) -> { end ∷ Int, start ∷ Int }

77+visibleRange arr = { start, end }

78+ where

79+ start = A.findIndex (_ == [ Start ]) arr ?|| 0

80+ end = A.findIndex (_ == [ End ]) arr ?|| A.length arr

81+

73renderSegments ∷ ReactComponent InlineCode.Props -> ((Array (Array Segment) -> Array (Array Segment)) -> Effect Unit) -> Array (Array Segment) -> JSX

82renderSegments ∷ ReactComponent InlineCode.Props -> ((Array (Array Segment) -> Array (Array Segment)) -> Effect Unit) -> Array (Array Segment) -> JSX

74−renderSegments ic update arrs = R.div_ (A.mapWithIndex renderLine (onlyVisible arrs))

83+renderSegments ic update arrs = R.div_ (A.mapWithIndex renderLine arrs)

75 where

84 where

76− onlyVisible arr = A.slice start end arr

85+ { start, end } = visibleRange arrs

77− where

78− start = A.findIndex (_ == [ Start ]) arr ?|| 0

79− end = A.findIndex (_ == [ End ]) arr ?|| A.length arr

80 renderLine i l = R.div_ (A.mapWithIndex (renderSegment i) l)

86 renderLine i l = R.div_ (A.mapWithIndex (renderSegment i) l)

81− renderSegment i j = case _ of

87+ renderSegment i j s =

88+ if between start end i then case s of

82− Filler s -> R.code_ [ R.text s ]

89+ Filler s' -> R.code_ [ R.text s' ]

90+ Hole width _ ->

91+ element ic

92+ $ justifill

93+ { width

83− Hole width _ -> element ic $ justifill { width, onSubmit: \v -> update (updateSegments i j (S.trim v)) }

94+ , onSubmit: update <<< updateSegments i j

95+ }

84− _ -> mempty

96+ _ -> mempty

97+ else

98+ mempty

86updateSegments ∷ Int -> Int -> String -> Array (Array Segment) -> Array (Array Segment)

100updateSegments ∷ Int -> Int -> String -> Array (Array Segment) -> Array (Array Segment)

87−updateSegments i j v arrs = fromMaybe [] (A.modifyAt i (updateLine j v) arrs)

101+updateSegments i j v = (ix (spy "i" i) <<< ix (spy "j" j)) %~ f

88−

89−updateLine ∷ Int -> String -> Array Segment -> Array Segment

90−updateLine idx v arr = fromMaybe [] (A.modifyAt idx f arr)

91 where

102 where

92 f = case _ of

103 f = case _ of

93 Hole h _ -> Hole h v

104 Hole h _ -> Hole h v

@@ -146,10 +157,10 @@ mkFillInTheGaps fetch = do

146 , jsx button

157 , jsx button

147 { onClick: handler_ onClick

158 { onClick: handler_ onClick

148 , buttonType:

159 , buttonType:

149− -- if complete segments

160+ if complete (spy "segsm" segments) then

150− -- then

151− HighlightedButton

161+ HighlightedButton

152− -- else DisabledButton

162+ else

163+ HighlightedButton

153 }

164 }

154 [ R.text "Try it" ]

165 [ R.text "Try it" ]

155 , result

166 , result

@@ -160,7 +171,7 @@ mkFillInTheGaps fetch = do

160 Right { stdout }

171 Right { stdout }

161 | stdout == expectedResult -> "Hooray!"

172 | stdout == expectedResult -> "Hooray!"

162 Left l -> "Does not compile"

173 Left l -> "Does not compile"

163− Right _ -> "Not " <> (findResult (join segments))

174+ Right _ -> "Not " <> (findResult (spy "segs" $ join segments))

164 }

175 }

165 [ R.text $ compileResultToString result ]

176 [ R.text $ compileResultToString result ]

166 ]

177 ]

components/src/Yoga/InlineCode/Component.purs+7−2

@@ -1,6 +1,8 @@

1module Yoga.InlineCode.Component where

3import Prelude

4+import Prelude

5+import CSS (value)

4import Data.Foldable (fold, intercalate)

6import Data.Foldable (fold, intercalate)

5import Data.Maybe (Maybe)

7import Data.Maybe (Maybe)

6import Data.String (trim)

8import Data.String (trim)

@@ -10,7 +12,7 @@ import Foreign.Object as Obj

10import React.Basic.DOM as R

12import React.Basic.DOM as R

11import React.Basic.DOM.Events (preventDefault, targetValue)

13import React.Basic.DOM.Events (preventDefault, targetValue)

12import React.Basic.Events (handler)

14import React.Basic.Events (handler)

13−import React.Basic.Hooks (ReactComponent, component, useState)

15+import React.Basic.Hooks (ReactComponent, component, useEffect, useState)

14import React.Basic.Hooks as React

16import React.Basic.Hooks as React

15import Record.Extra (pick)

17import Record.Extra (pick)

16import Yoga.Helpers ((?||))

18import Yoga.Helpers ((?||))

@@ -35,6 +37,9 @@ makeComponent = do

35 useStyles <- makeStylesJSS styles

37 useStyles <- makeStylesJSS styles

36 component "InlineCode" \props@{ className, onSubmit } -> React.do

38 component "InlineCode" \props@{ className, onSubmit } -> React.do

37 value /\ modifyValue <- useState ""

39 value /\ modifyValue <- useState ""

40+ useEffect value do

41+ onSubmit value

42+ pure mempty

38 classes <- useStyles $ pick props

43 classes <- useStyles $ pick props

39 pure

44 pure

40 $ R.form

45 $ R.form

@@ -51,5 +56,5 @@ makeComponent = do

51 , _data: Obj.singleton "testid" "inline-code"

56 , _data: Obj.singleton "testid" "inline-code"

52 }

57 }

53 ]

58 ]

54− , onSubmit: handler preventDefault (const $ onSubmit value)

59+ , onSubmit: handler preventDefault (const $ mempty)

55 }

60 }