@@ -8,7 +8,7 @@ import Data.Tuple.Nested ((/\))
88import Effect.Uncurried (mkEffectFn2)
99import Effect.Unsafe (unsafePerformEffect)
1010import React.Basic (JSX)
11−import React.Basic.Events (EventHandler, handler_)
11+import React.Basic.Events (EventHandler, handler, handler_, unsafeEventFn)
1212import React.Basic.Hooks as React
1313import Unsafe.Coerce (unsafeCoerce)
1414import Yoga.React (component)
@@ -18,7 +18,8 @@ import Yoga.React.Native.Style as Style
1818
1919type SplitViewProps =
2020 { initialPosition :: Number
21− , minPaneWidth :: Number
21+ , minLeftWidth :: Number
22+ , minRightWidth :: Number
2223 , left :: JSX
2324 , right :: JSX
2425 }
@@ -29,11 +30,18 @@ splitView = component "SplitView" \props -> React.do
2930 hovered /\ setHovered <- React.useState' false
3031 widthRef <- React.useRef props.initialPosition
3132 startWidthRef <- React.useRef 0.0
33+ containerWidthRef <- React.useRef 1000.0
3234
3335 React.useEffect sidebarWidth do
3436 React.writeRef widthRef sidebarWidth
3537 pure (pure unit)
3638
39+ let dividerWidth = 5.0
40+ let clampWidth w = do
41+ cw <- React.readRef containerWidthRef
42+ let maxW = cw - props.minRightWidth - dividerWidth
43+ pure (clamp props.minLeftWidth maxW w)
44+
3745 pr <- React.useMemo unit \_ -> unsafePerformEffect $ Pan.create
3846 { onStartShouldSetPanResponder: mkEffectFn2 \_ _ -> pure true
3947 , onMoveShouldSetPanResponder: mkEffectFn2 \_ _ -> pure true
@@ -42,15 +50,18 @@ splitView = component "SplitView" \props -> React.do
4250 React.writeRef startWidthRef w
4351 , onPanResponderMove: mkEffectFn2 \_ (gs :: Pan.GestureState) -> do
4452 sw <- React.readRef startWidthRef
45− let newWidth = max props.minPaneWidth (sw + gs.dx)
53+ newWidth <- clampWidth (sw + gs.dx)
4654 setSidebarWidth newWidth
4755 }
4856
4957 let handlers = toResponderHandlers (Pan.panHandlers pr)
5058 let dColor = if hovered then "rgba(128,128,128,0.6)" else "rgba(128,128,128,0.3)"
5159
60+ let onLayout = handler (unsafeEventFn layoutWidth) \w ->
61+ React.writeRef containerWidthRef w
62+
5263 pure do
53− view { style: tw "flex-1 flex-row" }
64+ view { style: tw "flex-1 flex-row", onLayout }
5465 [ view
5566 { style: Style.style { width: sidebarWidth, overflow: "hidden" }
5667 , allowsVibrancy: true
@@ -81,6 +92,9 @@ splitView = component "SplitView" \props -> React.do
8192
8293-- PanResponder.panHandlers returns responder-named event handlers
8394-- but the PureScript type uses pan-prefixed names, so we coerce
95+layoutWidth :: forall a. a -> Number
96+layoutWidth e = (unsafeCoerce e).nativeEvent.layout.width
97+
8498toResponderHandlers :: Pan.PanResponderHandlers -> ResponderHandlers
8599toResponderHandlers = unsafeCoerce
86100