iron-data-table/data-table-cell.html at master · IngressoRapidoWebComponents/iron-data-table · 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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<link rel="import" href="data-table-templatizer-behavior.html">

<dom-module id="data-table-cell">
  <template>
    <style>
      :host {
        flex: 1 0 100px;
        padding: 0 24px 0 24px;
        min-height: 10px; /* Prevent iron-list from looping when item height is really small */
        height: 48px;
        display: flex;
        align-items: center;
        overflow: hidden;
        transition: flex-basis 200ms, flex-grow 200ms;
      }

      :host([header]) {
        height: 56px;
      }

      :host([hidden]) {
        display: none;
      }
    </style>
    <content></content>
  </template>
  <script>
    Polymer({
      is: 'data-table-cell',
      behaviors: [saulis.DataTableTemplatizerBehavior],

      properties: {
        alignRight: Boolean,
        column: Object,
        columnIndex: Number,
        flex: Number,
        header: Boolean,
        hidden: Boolean,
        order: Number,
        template: Object,
        width: String,

        beforeBind: {
          type: Object,
          value: function() {
            return function(data, cell) {};
          }
        }
      },

      observers: [
                  '_beforeBind(beforeBind, column.*, index, columnIndex, item.*, expanded, selected)',
                  '_beforeBindHeader(beforeBind, column.*)',
                  '_alignRightChanged(alignRight)',
                  '_columnChanged(_instance, column)',
                  '_columnPathChanged(_instance, column.*)',
                  '_flexChanged(flex)',
                  '_hiddenChanged(hidden)',
                  '_orderChanged(order)',
                  '_widthChanged(width)'],

      attached: function() {
        if (!Polymer.Settings.useNativeShadow) {
          // cell is supposed to be placed outside the local dom of iron-data-table.
          Polymer.StyleTransformer.dom(this, 'iron-data-table', this._scopeCssViaAttr, true);
          if (this.domHost) {
            Polymer.StyleTransformer.dom(this, this.domHost.tagName.toLowerCase(), this._scopeCssViaAttr, false);
          }
        }
      },

      _alignRightChanged: function(alignRight) {
        this.style.flexDirection = alignRight ? 'row-reverse' : 'row';
      },

      _beforeBind: function(beforeBind, column, index, columnIndex, item, expanded, selected) {
        var data = {
          column: column.base,
          index: index,
          columnIndex: columnIndex,
          item: item.base,
          expanded: expanded,
          selected: selected
        };

        beforeBind(data, this);
      },

      // header cells aren't bound with item, index etc. so _beforeBind is never
      // called for them so we need a separate observer.
      _beforeBindHeader: function(beforeBind, column) {
        if (this.header) {
          var data = {
            column: column.base
          };

          beforeBind(data, this);
        }
      },

      _hiddenChanged: function(hidden) {
        this.toggleAttribute('hidden', hidden);
      },

      _orderChanged: function(order) {
        this.style.order = order;
      },

      _flexChanged: function(flex) {
        this.style.flexGrow = flex;
      },

      _widthChanged: function(width) {
        this.style.flexBasis = width;
      },

      _columnChanged: function(instance, column) {
        instance.column = column;
      },

      _columnPathChanged: function(instance, column) {
        // sometimes instance isn't ready to be notified yet and throws an error.
        this.async(function() {
          // TODO: hack to avoid: https://github.com/Polymer/polymer/issues/3307
          this._parentProps = this._parentProps || {};
          instance.notifyPath(column.path, column.value);
        });
      }
    });
  </script>
</dom-module>