0d8219a · rowtype-yoga/psfp

git.iko.soy/rowtype-yoga/psfp

Resize is better

commit0d8219adddd76c66344e4b0c594a189db329e176 authorMark Eibes <mark.eibes@gmail.com> dateSat 9 May 2020, 15:13 (6 years ago) parent3d6eb2f

6 files changed+51−37

compare with master

unifiedsplit

components/src/React/Basic/Hooks/UseGesture.purs+3−3 components/src/Yoga/Grimoire/Component.purs+32−14 components/src/Yoga/Grimoire/Spell/Spec.purs−1 components/src/Yoga/Grimoire/Spell/Styles.purs+14−5 components/src/Yoga/Grimoire/Stories.purs+1−13 components/src/Yoga/Theme/Default.purs+1−1

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

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

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

3737

3838type DragOptions

39− = GenericOptions ()

39+ = GenericOptions ( filterTaps ∷ Maybe Boolean )

4040

4141type DragOptionsImpl

42− = GenericOptionsImpl ()

42+ = GenericOptionsImpl ( filterTaps ∷ Boolean )

4343

4444dragOptionsToImpl ∷ DragOptions -> DragOptionsImpl

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

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

4646

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

4848

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

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

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

55import Data.Array as Array

66import Data.FoldableWithIndex (findWithIndex)

7+import Data.Interpolate as Interp

78import Data.Lens (set)

89import Data.Lens.Index (ix)

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

1011import Data.Nullable (Nullable)

1112import Data.Nullable as Nullable

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

1214import Data.Traversable (for, sequence)

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

14−import Debug.Trace (spy)

1516import Effect (Effect)

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

1717import Justifill (justifill)

1818import React.Basic (ReactComponent)

1919import React.Basic.DOM (css)

2020import 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)

2222import React.Basic.Hooks as React

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

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

25+import Record as Record

2526import Record.Extra (pick)

2627import Unsafe.Coerce (unsafeCoerce)

2728import Web.DOM (Node)

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

8182 useStyles <- makeStylesJSS styles

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

8384 {} <- 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− nodeRefs <- useRef (props.spells $> (Nullable.null ∷ (_ Node)))

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

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

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

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

88101 initialisedRef <- useRef false

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

95108 writeRef positionsRef (rects <#> fromMaybe emptyDomRect)

96109 writeRef originalPositionsRef (rects <#> fromMaybe emptyDomRect)

97110 writeRef initialisedRef true

98− useEffect windowSize do

111+ useLayoutEffect windowSize do

112+ springs.stop

99113 writeRef initialisedRef false

100− positions <- readRef positionsRef

101− let

102− newOriginalPositions = positions

103− writeRef positionsRef newOriginalPositions

104− init

114+ springs.set defaultSprings

105115 mempty

106116 theme ∷ CSSTheme <- useTheme

107117 bindDragProps <-

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

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

109119 init

110− rects <- getRects nodeRefs

111120 originalPositions <- readRef originalPositionsRef

112121 positionsBefore <- readRef positionsRef

113122 let

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

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

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

146155 , zIndex: 0

156+ , shadow: 2

157+ , height: "100px"

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

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

148160 , immediate: const false

149161 }

150162 true, true, _ ->

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

152164 , y: my + topOffset

153165 , zIndex: 1

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

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

168+ , height: "100px"

169+ , shadow: 20

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

156171 }

157172 _, _, _ ->

158173 { x: leftOffset

159174 , y: topOffset

175+ , shadow: 2

176+ , height: "100px"

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

160178 , zIndex: 0

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

162180 , immediate: const false

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

165183 renderSpells =

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

167185 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)

169187 , ref: unsafeCoerce (unsafeUpdateRefs nodeRefs i)

170188 , children:

171189 [ element

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

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

33import Prelude

44import Justifill (justifill)

5−import React.Basic.DOM as R

65import React.TestingLibrary (describeComponent, renderComponent)

76import Test.Spec (Spec, it)

87import Yoga.Grimoire.Spell.Component as Spell

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

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

11module Yoga.Grimoire.Spell.Styles where

33import 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)

55import CSS.FontStyle (italic)

6+import CSS.Overflow (overflow, overflowY)

7+import CSS.Overflow as Overflow

8+import CSS.Text.Overflow (ellipsis)

69import CSS.TextAlign (rightTextAlign, textAlign)

710import Data.Array (fromFoldable)

811import Data.NonEmpty as NonEmpty

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

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

1014import Yoga.Theme.Types (YogaTheme)

1115

1216type PropsR

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

3034 do

3135 width (100.0 # pct)

3236 height (100.0 # pct)

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

3338 , container:

34− jss { userSelect: "none" }

35− <> jss do

36− backgroundColor theme.backgroundColourLighter

37− height (100.0 # pct)

39+ jss do

40+ backgroundColor theme.backgroundColourLighter

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

42+ height (100.0 # pct)

3843 , signature:

3944 do

4045 color theme.textColour

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

4853 fontSize s1

4954 , description:

5055 do

56+ display inlineBlock

5157 color theme.grey

5258 fontStyle italic

59+ overflow Overflow.hidden

60+ textWhitespace whitespaceNoWrap

61+ textOverflow ellipsis

5362 }

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

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

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

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

2323 , { 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" }

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" }

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" }

3725 ]

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

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

2222

2323darkTheme ∷ Theme

2424darkTheme =

25− { backgroundColour: Color.hsl 238.0 0.18 0.20

25+ { backgroundColour: Color.hsl 238.0 0.18 0.30

2626 , textColour: Color.hsl 225.0 0.28 0.90

2727 , interfaceColour: Color.hsl 225.0 0.48 0.12

2828 , highlightColour: Color.hsl 285.0 0.88 0.72