git.iko.soy/rowtype-yoga/ry-blocks
on main help sign in
Segmented
a05b188Mark Eibes
src/Yoga/Block/Atom/Segmented/Style.purs−1
compare with main
unifiedsplit
@@ -47,7 +47,6 @@ activeElementWrapper =
47 { position: relative
47 { position: relative
48 , boxSizing: borderBox
48 , boxSizing: borderBox
49 , width: str "0"
49 , width: str "0"
50− , height: str "100%"
51 , overflow: visible
50 , overflow: visible
52 , padding: _0
51 , padding: _0
53 , margin: _0
52 , margin: _0
src/Yoga/Block/Atom/Segmented/View/ActiveIndicator.purs+8−11
@@ -80,10 +80,9 @@ component =
80 { className: "ry-active-segmented-element-wrapper"
80 { className: "ry-active-segmented-element-wrapper"
81 , css: Style.activeElementWrapper
81 , css: Style.activeElementWrapper
82 , children:
82 , children:
83− [ Emotion.elementKeyed Motion.div
83+ [ Emotion.element Motion.div
84 { css: Style.activeElement
84 { css: Style.activeElement
85 , layout: Motion.layout true
85 , layout: Motion.layout true
86− , key: show (props.windowSize /\ scrollX /\ scrollY) -- to force rerender
87 , custom: Motion.customProp (({ childRefs: props.activeItemRefs, scrollX, scrollY }) ∷ Custom)
86 , custom: Motion.customProp (({ childRefs: props.activeItemRefs, scrollX, scrollY }) ∷ Custom)
88 , variants
87 , variants
89 , className: "ry-active-segmented-element"
88 , className: "ry-active-segmented-element"
@@ -96,6 +95,7 @@ component =
96 { left: activeLeft
95 { left: activeLeft
97 , width: activeWidth
96 , width: activeWidth
98 }
97 }
98+ , whileTap: Motion.whileTap $ css { scaleY: 0.8, scaleX: 0.95, y: -1.0 }
99 , onDragStart:
99 , onDragStart:
100 Motion.onDragStart \_ pi -> do
100 Motion.onDragStart \_ pi -> do
101 maybeBbox <- getBoundingBoxFromRef (TwoOrMore.head props.activeItemRefs)
101 maybeBbox <- getBoundingBoxFromRef (TwoOrMore.head props.activeItemRefs)
@@ -110,22 +110,19 @@ component =
110 , onDragEnd:
110 , onDragEnd:
111 Motion.onDragEnd \_ pi -> do
111 Motion.onDragEnd \_ pi -> do
112 let
112 let
113− x =
114− maybeDragX
115− # fromMaybe' \_ -> unsafeCrashWith "no x"
113+ x = maybeDragX # fromMaybe' \_ -> unsafeCrashWith "no x"
116 newIdx =
114 newIdx =
117 findOverlapping
115 findOverlapping
118 props.activeItemIndex
116 props.activeItemIndex
119 animationVariants
117 animationVariants
120 x
118 x
121− v =
122− animationVariants TwoOrMore.!! newIdx
119+ v = animationVariants TwoOrMore.!! newIdx
123 # fromMaybe' \_ -> unsafeCrashWith "omg"
120 # fromMaybe' \_ -> unsafeCrashWith "omg"
124− setDragX Nothing
125 activeLeft # MotionValue.set v.left
121 activeLeft # MotionValue.set v.left
126 activeWidth # MotionValue.set v.width
122 activeWidth # MotionValue.set v.width
127 props.updateActiveIndex newIdx
123 props.updateActiveIndex newIdx
124+ setDragX Nothing
128− , dragConstraints: Motion.dragConstraints { left: 0, right: 0 }
125+ , dragConstraints: Motion.dragConstraints { left: 0, right: 0, top: 0, bottom: 0 }
129 , dragElastic: Motion.dragElastic false
126 , dragElastic: Motion.dragElastic false
130 , transition:
127 , transition:
131 Motion.transition
128 Motion.transition
@@ -198,8 +195,8 @@ handleDrag { x, activeItemIndex, animationVariants } = do
198 else
195 else
199 closestVariant /\ baseVariant
196 closestVariant /\ baseVariant
200 -- Total
197 -- Total
201− let rangeStart = smaller.left + (smaller.width / 2.0)
198+ let rangeStart = smaller.left + smaller.width / 2.0
202− let rangeEnd = greater.left + (greater.width / 2.0)
199+ let rangeEnd = greater.left + greater.width / 2.0
203 let range = rangeEnd - rangeStart
200 let range = rangeEnd - rangeStart
204 let ratio = ((x - rangeStart) / range)
201 let ratio = ((x - rangeStart) / range)
205 let interpolatedWidth = (greater.width * ratio) + smaller.width * (1.0 - ratio)
202 let interpolatedWidth = (greater.width * ratio) + smaller.width * (1.0 - ratio)