0d8219a · rowtype-yoga/psfp

git.iko.soy/rowtype-yoga/psfp

on master help sign in

Resize is better

0d8219aMark Eibes6 years ago

components/src/React/Basic/Hooks/UseGesture.purs+3−3

compare with master

unifiedsplit

@@ -36,13 +36,13 @@ type GenericOptions r

36 = { domTarget ∷ Maybe (Ref (Nullable Node)) | r }

38type DragOptions

39− = GenericOptions ()

39+ = GenericOptions ( filterTaps ∷ Maybe Boolean )

41type DragOptionsImpl

42− = GenericOptionsImpl ()

42+ = GenericOptionsImpl ( filterTaps ∷ Boolean )

44dragOptionsToImpl ∷ DragOptions -> DragOptionsImpl

45−dragOptionsToImpl { domTarget } = { domTarget: domTarget # orUndefined }

45+dragOptionsToImpl { domTarget, filterTaps } = { domTarget: domTarget # orUndefined, filterTaps: filterTaps ?|| false }

47foreign import useDragImpl ∷ ∀ a. EffectFn2 (DragHandlerImpl a) DragOptionsImpl (a -> DragProps)

components/src/Yoga/Grimoire/Component.purs+32−14

@@ -4,24 +4,25 @@ import Prelude

4import Data.Array (mapWithIndex, zip, (!!))

5import Data.Array as Array

6import Data.FoldableWithIndex (findWithIndex)

7+import Data.Interpolate as Interp

7import Data.Lens (set)

8import Data.Lens (set)

8import Data.Lens.Index (ix)

9import Data.Lens.Index (ix)

9import Data.Maybe (Maybe(..), fromMaybe)

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

10import Data.Nullable (Nullable)

11import Data.Nullable (Nullable)

11import Data.Nullable as Nullable

12import Data.Nullable as Nullable

13+import Data.Symbol (SProxy(..))

12import Data.Traversable (for, sequence)

14import Data.Traversable (for, sequence)

13import Data.Tuple.Nested ((/\), type (/\))

15import Data.Tuple.Nested ((/\), type (/\))

14−import Debug.Trace (spy)

15import Effect (Effect)

16import Effect (Effect)

16−import Effect.Aff (Milliseconds(..), delay, launchAff_)

17import Justifill (justifill)

18import React.Basic (ReactComponent)

19import React.Basic.DOM (css)

20import React.Basic.Helpers (jsx)

21−import React.Basic.Hooks (Ref, component, element, readRef, useEffect, useRef, writeRef)

21+import React.Basic.Hooks (Ref, component, element, readRef, useLayoutEffect, useRef, writeRef)

22import React.Basic.Hooks as React

23import React.Basic.Hooks.Spring (animatedDiv, useSprings)

24import React.Basic.Hooks.UseGesture (useDrag, withDragProps)

25+import Record as Record

25import Record.Extra (pick)

26import Record.Extra (pick)

26import Unsafe.Coerce (unsafeCoerce)

27import Unsafe.Coerce (unsafeCoerce)

27import Web.DOM (Node)

28import Web.DOM (Node)

@@ -81,8 +82,20 @@ makeComponent = do

81 useStyles <- makeStylesJSS styles

82 useStyles <- makeStylesJSS styles

82 component "Grimoire" \(props ∷ Props) -> React.do

83 component "Grimoire" \(props ∷ Props) -> React.do

83 {} <- useStyles (pick props)

84 {} <- useStyles (pick props)

84− springs <- useSprings (Array.length props.spells) \_ -> { x: 0.0, y: 0.0, zIndex: 0, immediate: false, transform: "scale3d(1.0,1.0,1.0)" }

85+ let

86+ defaultSprings = \_ ->

87+ { x: 0.0

88+ , y: 0.0

89+ , height: "100px"

90+ , shadow: 2

91+ , borderRadius: "var(--s-2)"

92+ , zIndex: 0

93+ , immediate: const false

94+ , transform: "scale3d(1.0,1.0,1.0)"

95+ }

96+ springs <-

97+ useSprings (Array.length props.spells) defaultSprings

85− nodeRefs <- useRef (props.spells $> (Nullable.null ∷ (_ Node)))

98+ nodeRefs <- useRef (props.spells $> Nullable.null)

86 positionsRef <- useRef ([] ∷ _ DOMRect)

99 positionsRef <- useRef ([] ∷ _ DOMRect)

87 originalPositionsRef <- useRef ([] ∷ _ DOMRect)

100 originalPositionsRef <- useRef ([] ∷ _ DOMRect)

88 initialisedRef <- useRef false

101 initialisedRef <- useRef false

@@ -95,19 +108,15 @@ makeComponent = do

95 writeRef positionsRef (rects <#> fromMaybe emptyDomRect)

108 writeRef positionsRef (rects <#> fromMaybe emptyDomRect)

96 writeRef originalPositionsRef (rects <#> fromMaybe emptyDomRect)

109 writeRef originalPositionsRef (rects <#> fromMaybe emptyDomRect)

97 writeRef initialisedRef true

110 writeRef initialisedRef true

98− useEffect windowSize do

111+ useLayoutEffect windowSize do

112+ springs.stop

99 writeRef initialisedRef false

113 writeRef initialisedRef false

100− positions <- readRef positionsRef

114+ springs.set defaultSprings

101− let

102− newOriginalPositions = positions

103− writeRef positionsRef newOriginalPositions

104− init

105 mempty

115 mempty

106 theme ∷ CSSTheme <- useTheme

116 theme ∷ CSSTheme <- useTheme

107 bindDragProps <-

117 bindDragProps <-

108− useDrag (justifill {}) \{ arg, down, movement: mx /\ my } -> do

118+ useDrag (justifill { filterTaps: true }) \{ arg, down, movement: mx /\ my } -> do

109 init

119 init

110− rects <- getRects nodeRefs

111 originalPositions <- readRef originalPositionsRef

120 originalPositions <- readRef originalPositionsRef

112 positionsBefore <- readRef positionsRef

121 positionsBefore <- readRef positionsRef

113 let

122 let

@@ -144,7 +153,10 @@ makeComponent = do

144 { x: originalPosDragged.left - value.left + leftOffset

153 { x: originalPosDragged.left - value.left + leftOffset

145 , y: originalPosDragged.top - value.top + topOffset

154 , y: originalPosDragged.top - value.top + topOffset

146 , zIndex: 0

155 , zIndex: 0

156+ , shadow: 2

157+ , height: "100px"

147 , transform: "scale3d(1.0, 1.0, 1.0)"

158 , transform: "scale3d(1.0, 1.0, 1.0)"

159+ , borderRadius: "var(--s-2)"

148 , immediate: const false

160 , immediate: const false

149 }

161 }

150 true, true, _ ->

162 true, true, _ ->

@@ -152,11 +164,17 @@ makeComponent = do

152 , y: my + topOffset

164 , y: my + topOffset

153 , zIndex: 1

165 , zIndex: 1

154 , transform: "scale3d(1.1, 1.1, 1.1)"

166 , transform: "scale3d(1.1, 1.1, 1.1)"

167+ , borderRadius: "var(--s-2)"

168+ , height: "100px"

169+ , shadow: 20

155 , immediate: \n -> n == "x" || n == "y" || n == "zIndex"

170 , immediate: \n -> n == "x" || n == "y" || n == "zIndex"

156 }

171 }

157 _, _, _ ->

172 _, _, _ ->

158 { x: leftOffset

173 { x: leftOffset

159 , y: topOffset

174 , y: topOffset

175+ , shadow: 2

176+ , height: "100px"

177+ , borderRadius: "var(--s-2)"

160 , zIndex: 0

178 , zIndex: 0

161 , transform: "scale3d(1.0, 1.0, 1.0)"

179 , transform: "scale3d(1.0, 1.0, 1.0)"

162 , immediate: const false

180 , immediate: const false

@@ -165,7 +183,7 @@ makeComponent = do

165 renderSpells =

183 renderSpells =

166 mapWithIndex \i (spell /\ style) ->

184 mapWithIndex \i (spell /\ style) ->

167 animatedDiv

185 animatedDiv

168− $ { style: css style

186+ $ { style: css (Record.insert (SProxy ∷ _ "boxShadow") ((unsafeCoerce (style.shadow ∷ Int)).interpolate (\s -> Interp.i "rgba(0, 0, 0, 0.15) 0px " s "px " (2 * s) "px 0px" ∷ String)) style)

169 , ref: unsafeCoerce (unsafeUpdateRefs nodeRefs i)

187 , ref: unsafeCoerce (unsafeUpdateRefs nodeRefs i)

170 , children:

188 , children:

171 [ element

189 [ element

components/src/Yoga/Grimoire/Spell/Spec.purs−1

@@ -2,7 +2,6 @@ module Yoga.Spell.Spec where

3import Prelude

4import Justifill (justifill)

5−import React.Basic.DOM as R

6import React.TestingLibrary (describeComponent, renderComponent)

5import React.TestingLibrary (describeComponent, renderComponent)

7import Test.Spec (Spec, it)

6import Test.Spec (Spec, it)

8import Yoga.Grimoire.Spell.Component as Spell

7import Yoga.Grimoire.Spell.Component as Spell

components/src/Yoga/Grimoire/Spell/Styles.purs+14−5

@@ -1,12 +1,16 @@

1module Yoga.Grimoire.Spell.Styles where

3import Prelude hiding (top)

4−import CSS (backgroundColor, color, fontFamily, fontSize, fontStyle, height, pct, sansSerif, width)

4+import CSS (backgroundColor, black, block, boxShadow, color, display, fontFamily, fontSize, fontStyle, fromString, height, inlineBlock, key, lineHeight, maxHeight, pct, px, sansSerif, textOverflow, textWhitespace, unitless, whitespaceNoWrap, width)

5import CSS.FontStyle (italic)

6+import CSS.Overflow (overflow, overflowY)

7+import CSS.Overflow as Overflow

8+import CSS.Text.Overflow (ellipsis)

6import CSS.TextAlign (rightTextAlign, textAlign)

9import CSS.TextAlign (rightTextAlign, textAlign)

7import Data.Array (fromFoldable)

10import Data.Array (fromFoldable)

8import Data.NonEmpty as NonEmpty

11import Data.NonEmpty as NonEmpty

9import JSS (JSSClasses, JSSElem, jss, jssClasses)

12import JSS (JSSClasses, JSSElem, jss, jssClasses)

13+import Text.Parsing.StringParser.CodePoints (whiteSpace)

10import Yoga.Theme.Types (YogaTheme)

14import Yoga.Theme.Types (YogaTheme)

12type PropsR

16type PropsR

@@ -30,11 +34,12 @@ styles =

30 do

34 do

31 width (100.0 # pct)

35 width (100.0 # pct)

32 height (100.0 # pct)

36 height (100.0 # pct)

37+ boxShadow (0.0 # unitless) (0.0 # unitless) (0.0 # unitless) black

33 , container:

38 , container:

34− jss { userSelect: "none" }

35− <> jss do

39+ jss do

36− backgroundColor theme.backgroundColourLighter

40+ backgroundColor theme.backgroundColourLighter

41+ (key $ fromString "user-select") "none"

37− height (100.0 # pct)

42+ height (100.0 # pct)

38 , signature:

43 , signature:

39 do

44 do

40 color theme.textColour

45 color theme.textColour

@@ -48,6 +53,10 @@ styles =

48 fontSize s1

53 fontSize s1

49 , description:

54 , description:

50 do

55 do

56+ display inlineBlock

51 color theme.grey

57 color theme.grey

52 fontStyle italic

58 fontStyle italic

59+ overflow Overflow.hidden

60+ textWhitespace whitespaceNoWrap

61+ textOverflow ellipsis

53 }

62 }

components/src/Yoga/Grimoire/Stories.purs+1−13

@@ -21,17 +21,5 @@ spells =

21 [ { name: "cast", signature: "String -> Effect Unit", description: "Casts an incantation" }

22 , { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }

23 , { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }

24− , { name: "drop", signature: "Int -> String -> String", description: "Removes the first characters of a string" }

24+ , { name: "drop", signature: "Int -> String -> String", description: "Removes the first characters of a string wow man this is a really long description I bet it produces a much longer card than the others if I keep writing like a crazy person" }

25− , { name: "cast", signature: "String -> Effect Unit", description: "Casts an incantation" }

26− , { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }

27− , { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }

28− , { name: "drop", signature: "Int -> String -> String", description: "Removes the first characters of a string" }

29− , { name: "cast", signature: "String -> Effect Unit", description: "Casts an incantation" }

30− , { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }

31− , { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }

32− , { name: "drop", signature: "Int -> String -> String", description: "Removes the first characters of a string" }

33− , { name: "cast", signature: "String -> Effect Unit", description: "Casts an incantation" }

34− , { name: "take", signature: "Int -> String -> String", description: "Takes the first characters of a string" }

35− , { name: "append", signature: "a -> a -> a", description: "Takes two values and produces one" }

36− , { name: "drop", signature: "Int -> String -> String", description: "Removes the first characters of a string" }

37 ]

25 ]

components/src/Yoga/Theme/Default.purs+1−1

@@ -22,7 +22,7 @@ fontFaces = jss (Rubik.fontFamilies <> VictorMono.fontFamilies)

23darkTheme ∷ Theme

24darkTheme =

25− { backgroundColour: Color.hsl 238.0 0.18 0.20

25+ { backgroundColour: Color.hsl 238.0 0.18 0.30

26 , textColour: Color.hsl 225.0 0.28 0.90

27 , interfaceColour: Color.hsl 225.0 0.48 0.12

28 , highlightColour: Color.hsl 285.0 0.88 0.72