editable-cell-logic.js

const CHANGE_VALUE = 'CHANGE_VALUE'
const STOP_CHANGING = 'STOP_CHANGING'
const START_CHANGING = 'START_CHANGING'

export const initialState = {
  editing: false,
  changedValue: null
}

export const reducer = (state, action) => {
  switch (action.type) {
    case START_CHANGING: return {...state, editing: true, changedValue: action.value}
    case CHANGE_VALUE: return {...state, changedValue: action.value}
    case STOP_CHANGING: return {...state, editing: false}
  }
  return state
}

export const createActions = ({getState, dispatch}) => ({
  startEditing: value => () => dispatch(START_CHANGING, {value}),
  stopEditing: () => dispatch(STOP_CHANGING),
  changeValue: ev => dispatch(CHANGE_VALUE, {value: ev.target.value}),
  checkEndChanging: modifyValue => ev => {
    if (ev.key === 'Enter') {
      return dispatch(STOP_CHANGING)
        .then(() => modifyValue(getState().changedValue))
    }
  }
})