plugins/widgets/react-plugin.js at 611549d19d1f007cceb53f84d92a602657de7029 · Freeboard/plugins · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
(function () {

  var ReactWidget = function (settings) {

    var self = this;
    var currentSettings = settings;
    var mountPoint;
    var reactClass;
    var data;

    this.render = function (element) {
      mountPoint = element;
    }

    this.onSettingsChanged = function (newSettings) {
      currentSettings = newSettings;
    }

    this.onCalculatedValueChanged = function (settingName, newValue) {

      if (settingName === 'data') {
        data = newValue;
      }

      if (settingName === 'code') {
        reactClass = newValue;
      }

      React.render(React.createElement(reactClass, { data: data }), mountPoint);
    }

    this.onDispose = function () {
    }

    this.getHeight = function () {
      return Number(currentSettings.height);
    }

    this.onSettingsChanged(settings);
  };

  freeboard.loadWidgetPlugin({
    "type_name": "ReactWidget",
    "display_name": "React",
    "fill_size": true,
    "external_scripts": [
      "plugins/thirdparty/react-0.12.2.js"
    ],
    "settings": [
      {
        "name": "code",
        "display_name": "Component",
        "type": "calculated",
        "description": ""
      },
      {
        "name": "data",
        "display_name": "Data",
        "type": "calculated",
        "description": ""
      },
      {
        "name": "height",
        "display_name": "Height Blocks",
        "type": "number",
        "default_value": 4,
        "description": "A height block is around 60 pixels"
      }
    ],
    newInstance: function (settings, newInstanceCallback) {
      newInstanceCallback(new ReactWidget(settings));
    }
  });

}());