GH-46 GH-15 GH-47 GH-48 Partially completed (#50)

* Clean up Builder file

* Add definitions for Range

* Remove temp variables

* Add Javascript skeleton

* Add Javascript reducer

* Add ConfigJavascript

* Fix toggle not listening to target changes

* Add getWidgetByName method

* Add javacript run before model run

* Add debounce to Toggle


closes #48 
closes #47

src/actions/actions.js

@@ -10,5 +10,6 @@ export * from './creators/widget/toggle'
 export * from './creators/widget/chart'
 export * from './creators/widget/label'
 export * from './creators/widget/css'
+export * from './creators/widget/javascript'
 export * from './creators/FunctionEditor'
 export * from './creators/sidebar'

src/actions/creators/widget/css.js

@@ -14,10 +14,10 @@ export const addCss = () => ({
   }
 })
 
-export const renameAction = (action, name) => ({
+export const renameCss = (css, name) => ({
   type: RENAME_WIDGET,
   payload: {
-    widget: action,
+    widget: css,
     name
   }
 })

src/actions/creators/widget/javascript.js

@@ -0,0 +1,23 @@
+import {
+  ADD_WIDGET,
+  RENAME_WIDGET
+} from '@actions/types'
+
+import generateID from '@helpers/generateID'
+import WidgetType from '@enum/WidgetType'
+
+export const addJavascript = () => ({
+  type: ADD_WIDGET,
+  payload: {
+    id: generateID(),
+    type: WidgetType.JAVASCRIPT
+  }
+})
+
+export const renameJavascript = (javascript, name) => ({
+  type: RENAME_WIDGET,
+  payload: {
+    widget: javascript,
+    name
+  }
+})

src/helpers/enum/WidgetType.js

@@ -9,7 +9,8 @@ const WidgetType = {
   TOGGLE: 'TOGGLE',
   CHART: 'CHART',
   LABEL: 'LABEL',
-  CSS: 'CSS'
+  CSS: 'CSS',
+  JAVASCRIPT: 'JAVASCRIPT'
 }
 
 export default WidgetType

src/reducers/reducers.js

@@ -54,6 +54,8 @@ export const getLabels = state => widgetSelectors.getLabels(state.widgets)
 
 export const getCsss = state => widgetSelectors.getCsss(state.widgets)
 export const getCss = state => widgetSelectors.getCss(state.widgets)
+export const getJavascripts = state => widgetSelectors.getJavascripts(state.widgets)
+export const getJavascript = state => widgetSelectors.getJavascript(state.widgets)
 
 export const getSelectedWidget = state => widgetSelectors.getSelectedWidget(state.widgets)
 export const getWidgetsForTree = state => widgetSelectors.getWidgetsForTree(state.widgets)

src/reducers/widgets/reducers/javascripts.js

@@ -0,0 +1,37 @@
+import {
+  ADD_WIDGET,
+  REMOVE_WIDGET,
+  UPDATE_WIDGET_CONFIG
+} from '@actions/types'
+
+import {
+  addWidget,
+  removeWidget,
+  getWidgetsForDropdown,
+  getWidget,
+} from '../commons/widget'
+
+import {
+  updateWidgetConfig
+} from '../commons/config'
+
+import WidgetType from '@enum/WidgetType'
+import memoize from 'memoize-one'
+
+const type = WidgetType.JAVASCRIPT
+
+export default function (state = {}, action) {
+  switch (action.type) {
+  case ADD_WIDGET:
+    return addWidget(state, action.payload, type)
+  case REMOVE_WIDGET:
+    return removeWidget(state, action.payload, type)
+  case UPDATE_WIDGET_CONFIG:
+    return updateWidgetConfig(state, action.payload, type)
+  }
+  return state
+}
+
+export const get = memoize(getWidget)
+export const getAll = state => state
+export const getForDropdown = memoize(getWidgetsForDropdown)

src/reducers/widgets/widgets.js

@@ -11,6 +11,7 @@ import toggles, * as togglesSelectors from './reducers/toggles'
 import charts, * as chartsSelectors from './reducers/charts'
 import labels, * as labelsSelectors from './reducers/labels'
 import csss, * as csssSelectors from './reducers/csss'
+import javascripts, * as javascriptSelectors from './reducers/javascripts'
 
 import memoize from 'memoize-one'
 
@@ -24,6 +25,7 @@ export default combineReducers({
   charts,
   labels,
   csss,
+  javascripts,
   app
 })
 
@@ -42,6 +44,8 @@ export const getLabels = state => labelsSelectors.getAll(state.labels)
  */
 export const getCsss = state => csssSelectors.getAll(state.csss)
 export const getCss = state => csssSelectors.get(state.csss)
+export const getJavascripts = state => javascriptSelectors.getAll(state.javascripts)
+export const getJavascript = state => javascriptSelectors.get(state.javascripts)
 
 const getWidgetMemoized = memoize((state, id) => {
   let widget = null
@@ -54,6 +58,7 @@ const getWidgetMemoized = memoize((state, id) => {
   if ((widget = chartsSelectors.get(state.charts, id)) !== null) { return widget }
   if ((widget = labelsSelectors.get(state.labels, id)) !== null) { return widget }
   if ((widget = csssSelectors.get(state.csss, id)) !== null) { return widget }
+  if ((widget = javascriptSelectors.get(state.javascripts, id)) !== null) { return widget }
   return widget
 })
 
@@ -77,6 +82,7 @@ const getWidgetsForTreeMemoized = memoize(state => {
   widgets.charts = chartsSelectors.getAll(state.charts)
   widgets.labels = labelsSelectors.getAll(state.labels)
   widgets.csss = labelsSelectors.getAll(state.csss)
+  widgets.javascripts = labelsSelectors.getAll(state.javascripts)
   return widgets
 })
 
@@ -93,5 +99,6 @@ export const getTogglesForDropdown = state => togglesSelectors.getForDropdown(st
 export const getChartsForDropdown = state => chartsSelectors.getForDropdown(state.charts)
 export const getLabelsForDropdown = state => labelsSelectors.getForDropdown(state.labels)
 export const getCsssForDropdown = state => csssSelectors.getForDropdown(state.csss)
+export const getJavascriptsForDropdown = state => javascriptSelectors.getForDropdown(state.javascripts)
 
 export const getAnimateWidgetId = (state, idAnimate, name) => animatesSelectors.getAnimateWidgetId(state.animates, idAnimate, name)