SplitPane

[bitpshr]

Specification

This widget provides split pane behavior. Each SplitPane has two children and can be nested inside another SplitPane.

Features

• vertical or horizontal orientation
• ability to specify a minimum panel size
• ability to specify a maximum panel size
• ability to specify an initial panel size
• ability to nest split panes

Value-add
Ability to divide content into resizable horizontal or vertical containers

Callbacks
onResizeStart
onResizeEnd
onResize

Mouse/keyboard interactions
Ability to click and drag divider line

Mandatory/valid/empty/wait states
None

Controlled/uncontrolled
Uncontrolled

List of any icons needed
None

Design input required (inc responsive design)
Look and feel of the center splitter

Any other considerations:

Acceptance criteria

• I can orient a SplitPane vertically or horizontally
• I can test SplitPanes inside other SplitPanes
• I can click the divider bar and resize the primary panel

[rishson]

re: callbacks, if this widget is uncontrolled then what would the enclosing widget need apart from onResizeComplete?

e.g.

const MIN_SIZE = 200;
const INITIAL_SIZE = 300; 
w(SplitPane, {
  min: MIN_SIZE,
  size: INITIAL_SIZE,
  onResizeComplete: onResize,
  orientation: Orientation.VERTICAL,
  leading: someWidget,
  trailing: someOtherWidget
}, []);

function onResize(size) {
  INITIAL_SIZE = undefined;
}

[rishson]

re: above, that is not intended to be the API, its just cutpasted from when I was playing with SplitPane when learning widget-core 😄