feat(overmind-components): new state API and provoked problem

Author: christianalfoni

packages/node_modules/overmind-components/src/component.ts

@@ -39,9 +39,12 @@ function init(componentNode: VNode): void {
     const name = component.name
     const tree = (component.tree = getApp().proxyStateTree.getTrackStateTree())
 
+    component.state = component.fn.getInitialState
+      ? component.fn.getInitialState(component.props)
+      : {}
     component.currentNode = componentNode
     component.changeState = (newState) => {
-      component.state = newState
+      Object.assign(component.state, newState)
       patch(component.currentNode, {
         ...component.currentNode,
         forceUpdate: true,

packages/node_modules/overmind-components/src/index.ts

@@ -12,13 +12,14 @@ export interface IComponent<
     props: Props,
     overmind: {
       state: State
-      changeState: (newState: State) => void
+      changeState: (newState: Partial<State>) => void
       appState: Overmind<Config>['state']
       actions: Overmind<Config>['actions']
       effects: Overmind<Config>['effects']
       reaction: Overmind<Config>['reaction']
     }
   ): any
+  getInitialState?: (props: Props) => State
 }
 
 export type Child = React.ReactNode

packages/node_modules/overmind-devtools-client/src/components/Actions/index.tsx

@@ -5,15 +5,22 @@ import * as textStyles from '../../styles/text'
 import Action from '../Action'
 import ActionsList from '../ActionsList'
 import ActionsTools from '../ActionsTools'
+import SplitPane from '../SplitPane'
 import * as styles from './styles'
 
-const Actions: Component = (_, { appState }) => (
+const Actions: Component = (_, { appState, actions }) => (
   <self className={styles.wrapper}>
     <ActionsTools />
     {appState.currentAction ? (
       <div className={styles.columns}>
-        <ActionsList />
-        <Action action={appState.currentAction} />
+        <SplitPane
+          minSize={100}
+          defaultSize={appState.actionsSplitSize}
+          onChange={(size) => actions.updateActionsSplitSize(size)}
+        >
+          <ActionsList />
+          <Action action={appState.currentAction} />
+        </SplitPane>
       </div>
     ) : (
       <div className={styles.centerWrapper}>
@@ -24,13 +31,3 @@ const Actions: Component = (_, { appState }) => (
 )
 
 export default Actions
-
-/* <SplitPane
-          split="vertical"
-          minSize={100}
-          defaultSize={appState.actionsSplitSize}
-          onChange={(size) => actions.updateActionsSplitSize(size)}
-        >
-
-        </SplitPane>
-        */

packages/node_modules/overmind-devtools-client/src/components/ActionsList/styles.ts

@@ -9,6 +9,7 @@ export const separator = css({
 })
 
 export const wrapper = css({
+  display: 'block',
   padding: '1rem',
   height: '100%',
   overflowY: 'scroll',

packages/node_modules/overmind-devtools-client/src/components/SplitPane/index.tsx

@@ -0,0 +1,79 @@
+import { Child, createElement } from 'overmind-components'
+
+import { Component } from '../../overmind'
+import * as styles from './styles'
+
+type Props = {
+  minSize: number
+  defaultSize: number
+  onChange: (size: number) => void
+  children: [Child, Child]
+}
+
+type State = {
+  isDragging: boolean
+  size: number
+  initialX: number
+}
+
+const SplitPane: Component<Props, State> = (
+  { children, minSize, defaultSize, onChange },
+  { state, changeState }
+) => {
+  return (
+    <self
+      onMount={() => {
+        function onMouseMove(event) {
+          if (state.isDragging) {
+            const newSize = defaultSize + (event.clientX - state.initialX)
+
+            changeState({
+              size: Math.max(minSize, newSize),
+            })
+          }
+        }
+        function onMouseUp() {
+          changeState({
+            isDragging: false,
+          })
+          onChange(state.size)
+        }
+
+        window.addEventListener('mousemove', onMouseMove)
+        window.addEventListener('mouseup', onMouseUp)
+
+        return () => {
+          window.removeEventListener('mousemove', onMouseMove)
+          window.removeEventListener('mouseup', onMouseUp)
+        }
+      }}
+      className={styles.wrapper}
+    >
+      <div
+        style={{
+          width: state.size + 'px',
+        }}
+      >
+        {children[0]}
+      </div>
+      <div
+        className={styles.splitter}
+        onMouseDown={(event) => {
+          changeState({
+            isDragging: true,
+            initialX: event.clientX,
+          })
+        }}
+      />
+      {children[1]}
+    </self>
+  )
+}
+
+SplitPane.getInitialState = ({ defaultSize }) => ({
+  size: defaultSize,
+  isDragging: false,
+  initialX: 0,
+})
+
+export default SplitPane

packages/node_modules/overmind-devtools-client/src/components/SplitPane/styles.ts

@@ -0,0 +1,15 @@
+import { css } from 'emotion'
+
+import { colors } from '../../theme'
+
+export const wrapper = css({
+  display: 'flex',
+})
+
+export const splitter = css({
+  margin: '0 1rem',
+  width: 3,
+  backgroundColor: colors.foreground,
+  cursor: 'col-resize',
+  userSelect: 'none',
+})

packages/node_modules/overmind-devtools-client/src/components/ValueInspector/index.tsx

@@ -9,30 +9,38 @@ type Props = {
   small?: boolean
 }
 
-const ValueInspector: Component<Props, string[]> = (
+const ValueInspector: Component<Props, { expandedPaths: string[] }> = (
   { value, small },
-  { state = [], changeState }
+  { state: { expandedPaths }, changeState }
 ) => {
   function onToggleExpand(path: string[]) {
     const pathString = path.join('.')
 
-    if (state.includes(pathString)) {
-      changeState(state.filter((currentPath) => currentPath !== pathString))
+    if (expandedPaths.includes(pathString)) {
+      changeState({
+        expandedPaths: expandedPaths.filter(
+          (currentPath) => currentPath !== pathString
+        ),
+      })
     } else {
-      changeState(state.concat(pathString))
+      changeState({ expandedPaths: expandedPaths.concat(pathString) })
     }
   }
 
   return (
     <self className={styles.wrapper}>
       <Inspector
         value={value}
-        expandedPaths={state}
+        expandedPaths={expandedPaths}
         onToggleExpand={onToggleExpand}
         small={small}
       />
     </self>
   )
 }
 
+ValueInspector.getInitialState = () => ({
+  expandedPaths: [],
+})
+
 export default ValueInspector