@aj-shadow/z-abs-complayer-bootstrap-client 0.0.0-aj-beta.221

package/project/client/scroll-list/scroll-list-frame.js

@@ -0,0 +1,358 @@
+
+'use strict';
+
+
+class ScrollListFrame {
+  constructor(scrollList, scrollLeft) {
+    this.scrollList = scrollList;
+    this.scrollLeft = scrollLeft;
+    
+    this.previousIndexFirst = 0;
+    this.previousIndexLast = 0;
+    this.zoom = 1.0;
+    
+    this.contentTotalHeight = 0.0;
+    this.contentVisibleHeight = 0.0;
+    this.contentScrollHeight = 0.0;
+    
+    this.contentVisibleHeightZoom = 0.0;
+    this.contentVisibleHeightDivSize = 0.0;
+    this.contentVisibleZoomDiffVisibleDivScrollHeight = 0.0;
+    
+    this.contentTotalHeightChanged = true;
+    this.contentVisibleHeightChanged = true;
+    this.contentScrollPos = 0.0;
+    this.pendingScroll = false;
+    
+    this.mouseDownPosition = 0.0;
+    this.mouseScrollPosition = 0.0;
+    this.mouseDown = false;
+    this.delta = 0.0;
+    
+    this.listDivFrame = document.createElement('div');
+    this.listDivFrame.classList.add('scroll_list_frame');
+    this.listDivView = this.listDivFrame.appendChild(document.createElement('div'));
+    this.listDivView.classList.add('scroll_list_view');
+    this.listDivViewContent = this.listDivView.appendChild(document.createElement('div'));
+    this.listDivViewContent.classList.add('scroll_list_content');
+    
+    this.listDivHide = this.listDivFrame.appendChild(document.createElement('div'));
+    this.listDivHide.classList.add('scroll_list_hide');
+    
+    this.listDivScroller = this.listDivFrame.appendChild(document.createElement('div'));
+    this.listDivScroller.classList.add('scroll_list_scroller');
+    this.listDivFake = this.listDivScroller.appendChild(document.createElement('div'));
+    this.listDivFake.classList.add('scroll_list_fake');
+    
+    this.boundMousedown = this._Mousedown.bind(this);
+    this.boundMousedup = this._Mouseup.bind(this);
+    this.boundMousemove = this._Mousemove.bind(this);
+    this.boundMousemoveView = this._MousemoveView.bind(this);
+    this.boundWheel = this._wheel.bind(this);
+    this.listDivHide.addEventListener('mousedown', this.boundMousedown, {capture: true, passive: true});
+    document.addEventListener('mouseup', this.boundMousedup, {capture: true, passive: true});
+    this.listDivView.addEventListener('wheel', this.boundWheel, {capture: true, passive: true});
+    if(this.scrollLeft) {
+      this.boundScroll = this._scrollHorizontal.bind(this);
+      this.listDivView.addEventListener('scroll', this.boundScroll, {capture: true, passive: true});
+    }
+    this.resizeObserver = new ResizeObserver((entries) => {
+      for(let i = 0; i < entries.length; ++i) {
+        const entry = entries[i];
+        if(this.listDivView === entry.target) {
+          this.contentVisibleHeightChanged = true;
+          if(0 !== entry.contentRect.height) {
+            this.contentVisibleHeight = entry.contentRect.height;
+            this.contentVisibleHeightZoom = this.contentVisibleHeight / this.zoom;
+            this.contentVisibleHeightDivSize = 0 !== this.contentVisibleHeight ? this.contentScrollHeight / this.contentVisibleHeight : 0;
+            this.contentVisibleZoomDiffVisibleDivScrollHeight = 0 !== this.contentScrollHeight ? (this.contentVisibleHeightZoom - this.contentVisibleHeight) / this.contentScrollHeight : 0;
+          }
+          else {
+            this.contentVisibleHeight = 0.0;
+            this.contentVisibleHeightZoom = 0.0;
+            this.contentVisibleHeightDivSize = 0;
+            this.contentVisibleZoomDiffVisibleDivScrollHeight = 0;
+          }
+          this.scrollList.requestRealtimeFrame(false, true);
+          return;
+        }
+      }
+    });
+    this.resizeObserver.observe(this.listDivView);
+  }
+  
+  exit() {
+    this.listDivView.removeEventListener('wheel', this.boundWheel, {capture: true, passive: true});
+    document.removeEventListener('mouseup', this.boundMousedup, {capture: true, passive: true});
+    this.listDivHide.removeEventListener('mousedown', this.boundMousedown, {capture: true, passive: true});
+    if(this.scrollLeft) {
+      this.listDivHide.removeEventListener('scroll', this.boundScroll, {capture: true, passive: true});
+    }
+    this.resizeObserver.unobserve(this.listDivView);
+  }
+  
+  clear() {
+    for(let i = this.previousIndexFirst; i <= this.previousIndexLast; ++i) {
+      const node = this.scrollList.allNodes[i];
+      if(node.visible(this.scrollList.scrollListTemplateData)) {
+        this.listDivViewContent.removeChild(node.getElement(this.scrollList, i));
+        node.removeElement(this.scrollList, i);
+      }
+    }
+    this.previousIndexFirst = 0;
+    this.previousIndexLast = 0;
+  }
+  
+  _scroll(delta) {
+    const update = 0.0 === this.delta && 0.0 !== delta;
+    this.delta += delta;
+    if(update) {
+      this.scrollList.funcRenderRealtime([false, true]);
+    }
+  }
+  
+  _Mousedown(e) {
+    this.mouseDown = true;
+    if(this.scrollList.autoScroll) {
+      this.scrollList.setAutoScroll(false);
+    }
+    
+    this.mouseDownPosition = e.screenY;
+    this.mouseScrollPosition = this.contentScrollPos;
+    document.body.style.userSelect = "none";
+    this.listDivHide.addEventListener('mousemove', this.boundMousemove, {capture: true, passive: true});
+    document.addEventListener('mousemove', this.boundMousemoveView, {capture: true, passive: true});
+  }
+  
+  _Mouseup(e) {
+    if(this.mouseDown) {
+      this.mouseDown = false;
+      document.body.style.userSelect = "auto";
+    }
+  }
+  
+  _MousemoveView(e) {
+    if(this.mouseDown) {
+      this._Mousemove(e);
+    }
+  }
+  
+  _Mousemove(e) {
+    if(1 !== e.buttons) {
+      document.removeEventListener('mousemove', this.boundMousemoveView, {capture: true, passive: true});
+      this.listDivHide.removeEventListener('mousemove', this.boundMousemove, {capture: true, passive: true});
+      return;
+    }
+    if(this.mouseDown) {
+      const delta = e.altKey ? (e.screenY - this.mouseDownPosition) / this.contentVisibleHeightDivSize : e.screenY - this.mouseDownPosition;
+      if(delta > 0.0) {
+        if(this.contentScrollPos === this.contentScrollHeight) {
+          return;
+        }
+      }
+      else {
+        if(0 === this.contentScrollPos) {
+          return;
+        }
+      }
+      this._scroll(delta);
+      this.mouseDownPosition = e.screenY;
+    }
+  }
+  
+  _wheel(e) {
+    if(!e.ctrlKey) {
+      if(0 !== this.contentTotalHeight) {
+        const deltaStep = !e.altKey ? 100 : 1;
+        let delta = 0;
+        if(e.deltaY > 0.0) {
+          if(this.contentScrollPos === this.contentScrollHeight) {
+            return;
+          }
+          delta = deltaStep / this.contentVisibleHeightDivSize;
+          if(this.contentScrollPos + delta >= this.contentTotalHeight) {
+            this.contentScrollPos = this.contentTotalHeight;
+          }
+        }
+        else {
+          if(0 === this.contentScrollPos) {
+            return;
+          }
+          delta = -deltaStep / this.contentVisibleHeightDivSize;
+          if(this.contentScrollPos - delta <= 0) {
+            this.contentScrollPos = 0;
+          }
+        }
+        if(this.scrollList.autoScroll) {
+          this.scrollList.setAutoScroll(false);
+        }
+        this._scroll(delta);
+      }
+    }
+  }
+  
+  _scrollHorizontal(e) {
+    if(this.mouseDown) {
+      if(e.target.scrollLeft !== e.target.dataset.lastScrollLeft) {
+        e.target.dataset.lastScrollLeft = e.target.scrollLeft;
+      }
+      else if(e.currentTarget) {
+        this.scrollLeft(e.currentTarget.scrollLeft);
+      }
+    }
+  }
+  
+  _findindex(pos) {
+    const allNodes = this.scrollList.allNodes;
+    let left = 0;
+    let right = allNodes.length - 1;
+    let mid = 0;
+    while(left <= right) {
+      mid = (left + right) >> 1;
+      const node = allNodes[mid];
+      if(node.getStartPos(this.scrollList.scrollListTemplateData) <= pos && (node.getStopPos(this.scrollList.scrollListTemplateData) >= pos)) {
+        return mid;
+      }
+      else if(node.getStartPos(this.scrollList.scrollListTemplateData) < pos && (node.getStopPos(this.scrollList.scrollListTemplateData) < pos)) {
+        left = mid + 1;
+      }
+      else {
+        right = mid - 1;
+      }
+    }
+    return mid;
+  }
+  
+  realtimeFrameCalculate(size) {
+    if(this.contentTotalHeight !== size) {
+      this.contentTotalHeightChanged = true;
+      this.contentTotalHeight = size;
+    }
+    if(this.contentTotalHeightChanged || this.contentVisibleHeightChanged) {
+      this.contentScrollHeight = Math.max(this.contentTotalHeight - this.contentVisibleHeight, 0.0);
+      this.contentVisibleHeightDivSize = 0 !== this.contentVisibleHeight ? this.contentScrollHeight / this.contentVisibleHeight : 0;
+      this.contentVisibleZoomDiffVisibleDivScrollHeight = 0 !== this.contentScrollHeight ? (this.contentVisibleHeightZoom - this.contentVisibleHeight) / this.contentScrollHeight : 0;
+    }
+    this.mouseScrollPosition += this.delta * this.contentVisibleHeightDivSize;
+    if(this.mouseScrollPosition <= 0) {
+      this.contentScrollPos = 0;
+      this.mouseScrollPosition = 0;
+    }
+    else if(this.mouseScrollPosition >= this.contentScrollHeight) {
+      this.contentScrollPos = this.contentScrollHeight;
+      this.mouseScrollPosition = this.contentScrollHeight;
+    }
+    else {
+      this.contentScrollPos = this.mouseScrollPosition;
+    }
+    this.delta = 0.0;
+  }
+  
+  setZoom(zoom) {
+    this.zoom = zoom;
+    this.contentVisibleHeightZoom = this.contentVisibleHeight / this.zoom;
+    this.contentVisibleZoomDiffVisibleDivScrollHeight = 0 !== this.contentScrollHeight ? (this.contentVisibleHeightZoom - this.contentVisibleHeight) / this.contentScrollHeight : 0;
+  }
+  
+  realtimeFrameRender(pos, force) {
+    if(!this.pendingScroll) {
+      const allNodes = this.scrollList.allNodes;
+      let lastPos = 0;
+      let firstPos = 0;
+      if(this.zoom === 1.0) {
+        firstPos = pos;
+        lastPos = pos + this.contentVisibleHeight;
+      }
+      else if(this.zoom < 1.0) {
+        const deltaDiff = this.contentVisibleZoomDiffVisibleDivScrollHeight * pos;
+        firstPos = Math.max(pos - deltaDiff, 0);
+        lastPos = pos + this.contentVisibleHeightZoom;
+      }
+      else if(this.zoom > 1.0) {
+        const deltaDiff = this.contentVisibleZoomDiffVisibleDivScrollHeight * pos;
+        firstPos = Math.max(pos - deltaDiff, 0);
+        lastPos = pos + this.contentVisibleHeight;
+      }
+      const indexFirst = this._findindex(firstPos);
+      const indexLast = this._findindex(lastPos);
+      if(force || (this.previousIndexFirst !== indexFirst || this.previousIndexLast !== indexLast)) {
+        for(let i = this.previousIndexFirst; i < indexFirst; ++i) {
+          const node = allNodes[i];
+          if(node.rendered(this.scrollList, i)) {
+            this.listDivViewContent.removeChild(node.getElement(this.scrollList, i));
+            node.removeElement(this.scrollList, i, force);
+          }
+        }
+        for(let i = indexLast + 1; i <= this.previousIndexLast; ++i) {
+          const node = allNodes[i];
+          if(node.rendered(this.scrollList, i)) {
+            this.listDivViewContent.removeChild(node.getElement(this.scrollList, i));
+            node.removeElement(this.scrollList, i, force);
+          }
+        }
+        let previousNodeIndex = -1;
+        for(let i = indexFirst; i <= indexLast; ++i) {
+          const node = allNodes[i];
+          if(node.rendered(this.scrollList, i)) {
+            if(!node.visible(this.scrollList.scrollListTemplateData)) {
+              this.listDivViewContent.removeChild(node.getElement(this.scrollList, i));
+              node.removeElement(this.scrollList, i, force);
+            }
+            else {
+              if(force) {
+                const oldElement = node.getElement(this.scrollList, i);
+                node.removeElement(this.scrollList, i, force);
+                const newElement = node.createElement(this.scrollList, i);
+                this.listDivViewContent.replaceChild(newElement, oldElement);
+              }
+              previousNodeIndex = i;
+            }
+          }
+          else {
+            if(node.visible(this.scrollList.scrollListTemplateData)) {
+              const element = node.createElement(this.scrollList, i);
+              if(-1 !== previousNodeIndex) {
+                node.getElement(this.scrollList, previousNodeIndex).after(element);
+              }
+              else {
+                this.listDivViewContent.prepend(element);
+              }
+              previousNodeIndex = i;
+            }
+          }
+        }
+        this.previousIndexFirst = indexFirst;
+        this.previousIndexLast = indexLast;
+        const translatY = Math.floor((allNodes[indexFirst].getStartPos(this.scrollList.scrollListTemplateData) - firstPos) * this.zoom);
+        this.listDivViewContent.setAttribute('style', `transform:translateY(${translatY}px) scale(${this.zoom});`);
+      }
+      if(this.contentTotalHeightChanged || force || this.contentVisibleHeightChanged) {
+        this.contentTotalHeightChanged = false;
+        this.listDivFake.setAttribute('style', `height:${this.contentTotalHeight}px;`);
+        this.contentVisibleHeightChanged = false;
+        this.listDivScroller.setAttribute('style', `height:${this.contentVisibleHeight}px;`);
+        if(this.scrollList.autoScroll) {
+          this.mouseScrollPosition = this.contentScrollHeight;
+          this.contentScrollPos = this.contentScrollHeight;
+          this.pendingScroll = true;
+          setTimeout(() => {
+            this.listDivScroller.scrollTop = this.contentScrollPos;
+            this.pendingScroll = false;
+          });
+        }
+        else {
+          if(this.listDivScroller.scrollTop !== this.contentScrollPos) {
+            this.pendingScroll = true;
+            setTimeout(() => {
+              this.listDivScroller.scrollTop = this.contentScrollPos;
+              this.pendingScroll = false;
+            });
+          }
+        }
+      }
+    }
+  }
+}
+
+
+module.exports = ScrollListFrame;

package/project/client/scroll-list/scroll-list-node.js

@@ -0,0 +1,107 @@
+ 
+'use strict';
+
+
+class ScrollListNode { 
+#BUILD_DEBUG_START
+  static ddmGroup = null;
+  
+  static {
+    ScrollListNode.ddmGroup = ddm.addGroup('ScrollListNode');
+  }
+#BUILD_DEBUG_STOP
+  
+  constructor(bufferData) {
+    this.bufferData = bufferData;
+#BUILD_DEBUG_START
+    ddm.register(this, ScrollListNode.ddmGroup);
+#BUILD_DEBUG_STOP
+  }
+  
+  rendered(scrollList, index) {
+    return scrollList.createdNodes.has(index);
+  }
+  
+  visible(scrollListTemplateData) {
+    return 0 !== this.getHeight(scrollListTemplateData);
+  }
+  
+  setInit(scrollListTemplateData, startPos, templateId) {
+    const height = scrollListTemplateData.templates[templateId].calculateHeight(this.bufferData);
+    scrollListTemplateData.dataScrollListNode.storeRenderData(this.bufferData, startPos, height, templateId);
+  }
+  
+  getStartPos(scrollListTemplateData) {
+    return scrollListTemplateData.dataScrollListNode.restoreRenderDataStartPos(this.bufferData);
+  }
+  
+  setStartPos(scrollListTemplateData, startPos) {
+    scrollListTemplateData.dataScrollListNode.storeRenderDataStartPos(this.bufferData, startPos);
+    return startPos;
+  }
+  
+  getHeight(scrollListTemplateData) {
+    return scrollListTemplateData.dataScrollListNode.restoreRenderDataHeight(this.bufferData);
+  }
+  
+  setHeight(scrollListTemplateData, height) {
+    scrollListTemplateData.dataScrollListNode.storeRenderDataHeight(this.bufferData, height);
+    return height;
+  }
+  
+  getStopPos(scrollListTemplateData) {
+    return this.getStartPos(scrollListTemplateData) + this.getHeight(scrollListTemplateData);
+  }
+  
+  getTemplateId(scrollListTemplateData) {
+    return scrollListTemplateData.dataScrollListNode.restoreRenderDataTemplateId(this.bufferData);
+  }
+  
+  calculateHeight(scrollListTemplateData) {
+    const templateId = scrollListTemplateData.dataScrollListNode.restoreRenderDataTemplateId(this.bufferData);
+    return scrollListTemplateData.templates[templateId].calculateHeight(this.bufferData);
+  }
+  
+  createElement(scrollList, index) {
+    const templateId = scrollList.scrollListTemplateData.dataScrollListNode.restoreRenderDataTemplateId(this.bufferData);
+    const template = scrollList.scrollListTemplateData.templates[templateId];
+    let renderingData = scrollList.createdNodes.get(index);
+    if(!renderingData) {
+      const data = template.restore(this.bufferData);
+      renderingData = {
+        data: data,
+        element: scrollList.cache.get(data)
+      };
+      scrollList.createdNodes.set(index, renderingData);
+      if(!renderingData.element) {
+        renderingData.element = template.createElement(renderingData.data, this.bufferData);
+      }
+      renderingData.element.setAttribute('data-index', index);
+      template.setElementData(renderingData.data, renderingData.element);
+      const height = this.calculateHeight(scrollList.scrollListTemplateData);
+      if(height !== template.defaultHeight) {
+        renderingData.element.setAttribute('style', `height: ${height}px !important;`);
+      }
+    }
+    return renderingData.element;
+  }
+  
+  removeElement(scrollList, index, force) {
+    const renderingData = scrollList.createdNodes.get(index);
+    scrollList.createdNodes.delete(index);
+    if(!force) {
+      scrollList.cache.set(renderingData.data, renderingData.element);
+    }
+    const templateId = scrollList.scrollListTemplateData.dataScrollListNode.restoreRenderDataTemplateId(this.bufferData);
+    const template = scrollList.scrollListTemplateData.templates[templateId];
+    template.removeElement(renderingData.data, renderingData.element);
+    renderingData.data.destroy();
+  }
+  
+  getElement(scrollList, index) {
+    return scrollList.createdNodes.get(index).element;
+  }
+}
+
+
+module.exports = ScrollListNode;

package/project/client/scroll-list/scroll-list-template-data.js

@@ -0,0 +1,13 @@
+
+'use strict';
+
+
+class ScrollListTemplateData {
+  constructor(templates, dataScrollListNode) {
+    this.templates = templates;
+    this.dataScrollListNode = dataScrollListNode;    
+  }
+}
+
+
+module.exports = ScrollListTemplateData;

package/project/client/scroll-list/scroll-list-zero-height.js

@@ -0,0 +1,40 @@
+
+'use strict';
+
+
+class ScrollListZeroHeight {
+  constructor() {}
+  
+  rendered(scrollList, index) {
+    return false;
+  }
+  
+  visible() {
+    return false;
+  }
+  
+  setInit(scrollListTemplateData) {}
+  
+  getStartPos() {
+    return 0;
+  }
+  
+  setStartPos(startPos) {
+    return 0;
+  }
+  
+  getStopPos() {
+    return 0;
+  }
+  
+  getTemplateId(scrollListTemplateData) {
+    return -1;
+  }
+  
+  calculateHeight(scrollListTemplateData) {
+    return 0;  
+  }
+}
+
+
+module.exports = new ScrollListZeroHeight();

package/project/client/scroll-list/scroll-list.js

@@ -0,0 +1,123 @@
+
+'use strict';
+
+import ScrollListCache from './scroll-list-cache';
+import ScrollListFrame from './scroll-list-frame';
+import ScrollListZeroHeight from './scroll-list-zero-height';
+
+
+class ScrollList {
+  constructor(name, scrollListTemplateData, cbAutoScroll, funcRenderRealtime, cbScrollLeft, cache) {
+    this.name = name;
+    this.scrollListTemplateData = scrollListTemplateData;
+    this.cbAutoScroll = cbAutoScroll;
+    this.funcRenderRealtime = funcRenderRealtime;
+    this.autoScroll = true;
+    this.zoom = 1.0;
+    this.scrollListFrame = new ScrollListFrame(this, cbScrollLeft);
+    this.allNodes = [ScrollListZeroHeight];
+    this.createdNodes = new Map();
+    this.isActive = false;
+    this.sizeTransform = 0.0;
+    this.cache = cache;
+  }
+  
+  print() {
+    this.allNodes.forEach((n) => {
+      n.print();
+    });
+  }
+  
+  init(scrollDiv, autoScroll, zoom) {
+    scrollDiv.appendChild(this.scrollListFrame.listDivFrame);
+    this.autoScroll = autoScroll;
+    this.zoom = zoom;
+    this._clear();
+  }
+  
+  update(autoScroll, zoom, recalculate) {
+    const renderRealtime = this.autoScroll !== autoScroll || this.zoom !== zoom;
+    this.autoScroll = autoScroll;
+    if(this.zoom !== zoom) {
+      this.scrollListFrame.setZoom(zoom);
+      this.zoom = zoom;
+    }
+    if(recalculate) {
+      this.recalculate();
+      this.funcRenderRealtime([false, true]);
+    }
+    else if(renderRealtime) {
+      this.funcRenderRealtime([false, true]);
+    }
+  }
+  
+  active(isActive) {
+    this.isActive = isActive;
+  }
+  
+  exit() {
+    this.scrollListFrame.exit();
+  }
+  
+  _clear() {
+    this.scrollListFrame.clear();
+    this.allNodes = [ScrollListZeroHeight];
+    ScrollListCache.clear();
+    this.funcRenderRealtime([true, false], () => {
+      this.scrollListFrame.realtimeFrameCalculate(0);
+      this.scrollListFrame.realtimeFrameRender(0);
+    });
+  }
+  
+  add(node, templateId) {
+    if(node) {
+      const allNodes = this.allNodes;
+      const previous = allNodes[allNodes.length - 1];
+      node.setInit(this.scrollListTemplateData, previous.getStopPos(this.scrollListTemplateData), templateId);
+      allNodes.push(node);
+    }
+  }
+  
+  recalculate() {
+    const allNodes = this.allNodes;
+    let prev = allNodes[0];
+    allNodes.forEach((e, i, b) => {
+      const templateId = b[i].getTemplateId(this.scrollListTemplateData);
+      b[i].setInit(this.scrollListTemplateData, prev.getStopPos(this.scrollListTemplateData), templateId);
+      prev = b[i];
+    });
+  }
+  
+  refresh() {
+    this.funcRenderRealtime([false, true]);
+  }
+  
+  setAutoScroll(autoScroll) {
+    if(autoScroll !== this.autoScroll) {
+      this.autoScroll = autoScroll;
+      setTimeout(this.cbAutoScroll, 0, autoScroll);
+    }
+  }
+  
+  requestRealtimeFrame(clear, force) {
+    this.funcRenderRealtime([clear, force]);
+  }
+  
+  renderRealtimeFrame(timestamp, clear, force) {
+    if(!clear) {
+      if(this.isActive) {
+        const allNodes = this.allNodes;
+        const lastNode = allNodes[allNodes.length - 1];
+        this.scrollListFrame.realtimeFrameCalculate(lastNode.getStopPos(this.scrollListTemplateData));
+        const pos = this.autoScroll ? this.scrollListFrame.contentScrollHeight : this.scrollListFrame.contentScrollPos;
+        this.scrollListFrame.realtimeFrameRender(pos, force);
+      }
+    }
+    else {
+      this._clear();
+    }
+  }
+}
+
+
+module.exports = ScrollList;

package/project/client/tab.jsx

@@ -0,0 +1,30 @@
+
+'use strict';
+
+import ReactComponentBase from 'z-abs-corelayer-client/client/react-component/react-component-base';
+import GuidGenerator from 'z-abs-corelayer-cs/clientServer/guid-generator';
+import React from 'react';
+
+
+class Tab extends ReactComponentBase {
+  constructor(props) {
+    super(props);
+    this.id = props.id ? props.id : GuidGenerator.create();
+  }
+  
+  shouldUpdate(nextProps, nextState) {
+    return !this.shallowCompare(this.props.children, nextProps.children)
+      || !this.shallowCompare(this.props.overflowScroll, nextProps.overflowScroll);
+  }
+  
+  render() {
+    return (
+      <React.Fragment key={this.id}>
+        {this.props.children}
+      </React.Fragment>
+    );
+  }
+}
+
+
+module.exports = Tab;