@@ -71,32 +71,34 @@ rawComponent =
7171 buttonRef <- useRef null
7272 toggleRef <- useRef null
7373 tapState <- useRef TapNotAllowed
74− dragState /\ setDragState <- React.useState' NotDragging
75− useEffect dragState do
76− case dragState of
77− NotDragging -> mempty
78− Dragging _ -> do
79− writeRef tapState TapNotAllowed
80− DragDone { startX, endX } -> do
81− maybeBbox <- getBoundingBoxFromRef buttonRef
82− for_ maybeBbox \bbox -> do
83− if endX - startX <= (bbox.left - startX) + (bbox.width / 2.0) then do
84− setTogglePosition ToggleIsLeft
85− else do
86− setTogglePosition ToggleIsRight
87− mempty
74+ dragStateRef <- useRef NotDragging
75+ let
76+ setDragState new = do
77+ writeRef dragStateRef new
78+ dragState <- readRef dragStateRef
79+ case dragState of
80+ NotDragging -> mempty
81+ Dragging _ -> do
82+ writeRef tapState TapNotAllowed
83+ DragDone { startX, endX } -> do
84+ maybeBbox <- getBoundingBoxFromRef buttonRef
85+ for_ maybeBbox \bbox -> do
86+ if endX - startX <= (bbox.left - startX) + (bbox.width / 2.0) then do
87+ setTogglePosition ToggleIsLeft
88+ else do
89+ setTogglePosition ToggleIsRight
8890 let
8991 buttonVariants =
9092 { left:
91− { backgroundColor:
92− (Emotion.str <<< Color.cssStringRGBA <$> props.backgroundLeft)
93− ?|| (Emotion.str colour.backgroundLayer3)
94− }
93+ { backgroundColor:
94+ (Emotion.str <<< Color.cssStringRGBA <$> props.backgroundLeft)
95+ ?|| (Emotion.str colour.backgroundLayer3)
96+ }
9597 , right:
96− { backgroundColor:
97− (Emotion.str <<< Color.cssStringRGBA <$> props.backgroundRight)
98− ?|| (Emotion.str colour.success)
99− }
98+ { backgroundColor:
99+ (Emotion.str <<< Color.cssStringRGBA <$> props.backgroundRight)
100+ ?|| (Emotion.str colour.success)
101+ }
100102 }
101103 buttonVariant = Motion.makeVariantLabels buttonVariants
102104 -- components
@@ -108,40 +110,43 @@ rawComponent =
108110 , css: Style.button <>? props.css
109111 , variants: Motion.variants buttonVariants
110112 , initial:
111− Motion.initial case togglePosition of
112− ToggleIsRight -> buttonVariant.right
113− ToggleIsLeft -> buttonVariant.left
113+ Motion.initial case togglePosition of
114+ ToggleIsRight -> buttonVariant.right
115+ ToggleIsLeft -> buttonVariant.left
114116 , animate:
115− Motion.animate case togglePosition of
116− ToggleIsRight -> buttonVariant.right
117− ToggleIsLeft -> buttonVariant.left
117+ Motion.animate case togglePosition of
118+ ToggleIsRight -> buttonVariant.right
119+ ToggleIsLeft -> buttonVariant.left
118120 , value: show togglePosition
119121 , onClick: handler preventDefault \_ -> setTogglePosition (flipToggle togglePosition)
120122 , style: props.style
121123 , _data: Object.singleton "testid" "toggle-testid"
122124 , role: "switch"
123125 , _aria:
124− Object.fromHomogeneous
125− { checked:
126− case togglePosition of
127− ToggleIsLeft -> "false"
128− ToggleIsRight -> "true"
129− }
130− <>? (props.ariaLabel <#> Object.singleton "label")
126+ Object.fromHomogeneous
127+ { checked:
128+ case togglePosition of
129+ ToggleIsLeft -> "false"
130+ ToggleIsRight -> "true"
131+ }
132+ <>? (props.ariaLabel <#> Object.singleton "label")
131133 , ref: buttonRef
132134 , children
133135 }
134136 textContainer =
135137 div
136− </* { className: "ry-toggle-text"
138+ </*
139+ { className: "ry-toggle-text"
137140 , css: Style.toggleTextContainer
138141 }
139142 textOnContainer =
140143 div
141− </* { className: "ry-toggle-text-on"
144+ </*
145+ { className: "ry-toggle-text-on"
142146 , css: Style.toggleText
143147 }
144− /> [ guard (togglePosition == ToggleIsRight)
148+ />
149+ [ guard (togglePosition == ToggleIsRight)
145150 $ textOn
146151 [ props.left
147152 ?|| (Icon.component </> { icon: SVGIcon.on, stroke: Style.successTextColour })
@@ -149,10 +154,12 @@ rawComponent =
149154 ]
150155 textOffContainer =
151156 div
152− </* { className: "ry-toggle-text-off"
157+ </*
158+ { className: "ry-toggle-text-off"
153159 , css: Style.toggleText
154160 }
155− /> [ guard (togglePosition == ToggleIsLeft)
161+ />
162+ [ guard (togglePosition == ToggleIsLeft)
156163 $ textOff
157164 [ props.right
158165 ?|| (Icon.component </> { icon: SVGIcon.off, stroke: Style.disabledTextColour })
@@ -160,7 +167,8 @@ rawComponent =
160167 ]
161168 textOn =
162169 Motion.div
163− </ { className: "ry-toggle-text-container"
170+ </
171+ { className: "ry-toggle-text-container"
164172 , key: "ry-toggle-text-on-container"
165173 , initial: Motion.initial $ false
166174 , animate: Motion.animate $ css { scale: 1, opacity: 1 }
@@ -168,7 +176,8 @@ rawComponent =
168176 }
169177 textOff =
170178 Motion.div
171− </ { className: "ry-toggle-text-container"
179+ </
180+ { className: "ry-toggle-text-container"
172181 , key: "ry-toggle-text-off-container"
173182 , initial: Motion.initial $ false
174183 , animate: Motion.animate $ css { scale: 1, opacity: 1 }
@@ -177,11 +186,12 @@ rawComponent =
177186 animateTextPresence = Motion.animatePresence </ {}
178187 toggle =
179188 toggleCircle
180− </> { buttonRef
189+ </>
190+ { buttonRef
181191 , toggleRef
182192 , togglePosition
183193 , onChange: setTogglePosition
184− , dragState
194+ , dragStateRef
185195 , setDragState
186196 , tapState
187197 }
@@ -198,7 +208,7 @@ toggleCircle ∷
198208 , toggleRef ∷ NodeRef
199209 , buttonRef ∷ NodeRef
200210 , togglePosition ∷ TogglePosition
201− , dragState ∷ DragState
211+ , dragStateRef ∷ Ref DragState
202212 , setDragState ∷ DragState -> Effect Unit
203213 , tapState ∷ Ref TappingState
204214 }
@@ -206,14 +216,14 @@ toggleCircle =
206216 unsafePerformEffect
207217 $ reactComponent "ToggleCircle" do
208218 \( { togglePosition
209− , onChange
210− , toggleRef
211− , buttonRef
212− , dragState
213− , setDragState
214− , tapState
215− }
216− ) -> React.do
219+ , onChange
220+ , toggleRef
221+ , buttonRef
222+ , dragStateRef
223+ , setDragState
224+ , tapState
225+ }
226+ ) -> React.do
217227 maxLeft /\ setMaxLeft <- useState' Nothing
218228 yPos /\ setYPos <- useState' Nothing
219229 useEffectAlways do
@@ -236,7 +246,8 @@ toggleCircle =
236246 toggleVariant = Motion.makeVariantLabels toggleVariants
237247 pure
238248 $ Motion.div
239− </*> { className: "ry-toggle-toggle"
249+ </*>
250+ { className: "ry-toggle-toggle"
240251 , layout: Motion.layout true
241252 , onClick: handler stopPropagation mempty
242253 , onTouchStart: handler stopPropagation mempty
@@ -247,67 +258,70 @@ toggleCircle =
247258 , key: if isNothing maxLeft then "initialising" else show yPos
248259 , dragElastic: Motion.dragElastic false
249260 , dragConstraints:
250− Motion.dragConstraintsBoundingBox
251− { left:
252− case togglePosition of
253− ToggleIsLeft -> zero
254− ToggleIsRight -> -(maxLeft <#> (_ - Style.dragWidthDelta) # fromMaybe 0.0)
255− , right:
256− case togglePosition of
257− ToggleIsRight -> zero
258− ToggleIsLeft -> maxLeft <#> (_ - Style.dragWidthDelta) # fromMaybe 0.0
259− }
261+ Motion.dragConstraintsBoundingBox
262+ { left:
263+ case togglePosition of
264+ ToggleIsLeft -> zero
265+ ToggleIsRight -> 10.0 -- [WARN] Maybe this breaks down
266+ , right:
267+ case togglePosition of
268+ ToggleIsRight -> 26.0 -- [WARN] Maybe this breaks down
269+ ToggleIsLeft -> maxLeft <#> (_ - Style.dragWidthDelta) # fromMaybe 0.0
270+ }
260271 , variants: Motion.variants toggleVariants
261272 , transition: Motion.transition { type: "tween", duration: 0.33, ease: "easeOut" }
262273 , whileTap:
263− Motion.prop
264− $ css
265− { width: "calc(var(--s2)*0.85 + 10px)"
266− , left:
267− case togglePosition of
268− ToggleIsLeft -> Style.toggleLeft
269− ToggleIsRight -> "calc(" <> Style.toggleLeft <> " - 10px)"
270− , transition: { type: "tween", duration: 0.10, ease: "easeInOut" }
271− }
274+ Motion.prop
275+ $ css
276+ { width: "calc(var(--s2)*0.85 + 10px)"
277+ , left:
278+ case togglePosition of
279+ ToggleIsLeft -> Style.toggleLeft
280+ ToggleIsRight -> "calc(" <> Style.toggleLeft <> " - 10px)"
281+ , transition: { type: "tween", duration: 0.10, ease: "easeInOut" }
282+ }
272283 , onTapStart:
273− Motion.onTapStart \_ _ -> writeRef tapState TapAllowed
284+ Motion.onTapStart \_ _ -> writeRef tapState TapAllowed
274285 , onTap:
275− Motion.onTap \_ _ -> do
276− ts <- readRef tapState
277− case ts of
278− TapAllowed -> onChange (flipToggle togglePosition)
279− _ -> mempty
280− mempty
286+ Motion.onTap \_ _ -> do
287+ ts <- readRef tapState
288+ case ts of
289+ TapAllowed -> onChange (flipToggle togglePosition)
290+ _ -> mempty
291+ mempty
281292 , onTapCancel:
282− Motion.onTapCancel \_ _ -> do
283− writeRef tapState TapNotAllowed
284− mempty
293+ Motion.onTapCancel \_ _ -> do
294+ writeRef tapState TapNotAllowed
295+ mempty
285296 , initial: Motion.initial false
286297 , animate:
287− Motion.animate case togglePosition of
288− ToggleIsLeft -> toggleVariant.left
289− ToggleIsRight -> toggleVariant.right
298+ Motion.animate case togglePosition of
299+ ToggleIsLeft -> toggleVariant.left
300+ ToggleIsRight -> toggleVariant.right
290301 , onDragStart:
291− Motion.onDragStart \_ pi -> do
292− maybeBBox <- getBoundingBoxFromRef toggleRef
293− let x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)
294− setDragState
295− $ Dragging
296− { startX: x # fromMaybe pi.point.x, currentX: pi.point.x
297− }
302+ Motion.onDragStart \_ pi -> do
303+ maybeBBox <- getBoundingBoxFromRef toggleRef
304+ let x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)
305+ setDragState
306+ $ Dragging
307+ { startX: x # fromMaybe pi.point.x
308+ , currentX: pi.point.x
309+ }
298310 , onDrag:
299− Motion.onDrag \_ pi -> do
300− case dragState of
301− Dragging { startX } -> do
302− setDragState $ Dragging { startX, currentX: pi.point.x }
303− other -> Console.warn $ i "Unexpected drag state " (show other) " in onDragEvent"
311+ Motion.onDrag \_ pi -> do
312+ dragState <- readRef dragStateRef
313+ case dragState of
314+ Dragging { startX } -> do
315+ setDragState $ Dragging { startX, currentX: pi.point.x }
316+ other -> Console.warn $ i "Unexpected drag state " (show other) " in onDragEvent"
304317 , onDragEnd:
305− Motion.onDragEnd \_ _ -> do
306− case dragState of
307− Dragging { startX } -> do
308− maybeBBox <- getBoundingBoxFromRef toggleRef
309− let x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)
310− setDragState (DragDone { startX, endX: x # fromMaybe' \_ -> unsafeCrashWith "shit" })
311− other -> Console.warn $ i "Unexpected drag state " (show other) " in onDragEndEvent"
318+ Motion.onDragEnd \_ _ -> do
319+ dragState <- readRef dragStateRef
320+ case dragState of
321+ Dragging { startX } -> do
322+ maybeBBox <- getBoundingBoxFromRef toggleRef
323+ let x = maybeBBox <#> \bbox -> bbox.left + (bbox.width / 2.0)
324+ setDragState (DragDone { startX, endX: x # fromMaybe' \_ -> unsafeCrashWith "shit" })
325+ other -> Console.warn $ i "Unexpected drag state " (show other) " in onDragEndEvent"
312326 , ref: toggleRef
313327 }