Shared class

examples/AutoScrollExample.js

@@ -8,6 +8,7 @@ import FakeObjectDataListStore from './helpers/FakeObjectDataListStore';
 import { ImageCell, LinkCell, TextCell } from './helpers/cells';
 import { Table, Column, DataCell, Plugins } from 'fixed-data-table-2';
 import React from 'react';
+import Shared from '../src/SharedClass';
 import cx from '../src/vendor_upstream/stubs/cx';
 import joinClasses from '../src/vendor_upstream/core/joinClasses';
 
@@ -16,16 +17,19 @@ class AutoScrollExample extends React.Component {
     super(props);
     this.state = {
       dataList: new FakeObjectDataListStore(10000),
-      scrollTop: 0,
-      scrollLeft: 0,
-      autoScrollEnabled: true,
-      horizontalScrollDelta: 0,
-      verticalScrollDelta: 0,
       columns: [],
-      columnGroups: [],
-      columnsCount: 10000,
+      columnsCount: 100,
       shouldUseLegacyComponents: false, //we have to pass this as a prop to FixedDataTableContainer
+      isSplitted: false,
+      isPinned: false,
+      scrollbarHoverLeft: 0,
+      tablePosition: 0,
+      isScrollbarHovering: false,
+      isPinContainerHovering: false,
     };
+
+    this.shared = new Shared(this.forceUpdate.bind(this));
+
     //these are legacy function because we are already providing the styles in FixedDataTableCell for this so there is no need of any div here
     const cellRendererLegacy = (props) =>
       `${props.columnKey}, ${props.rowIndex}`;
@@ -49,11 +53,9 @@ class AutoScrollExample extends React.Component {
       <DataCell {...props}>{props.columnKey}</DataCell>
     );
 
-    for (let i = 0; i < 10000; i++) {
-      const columnGroupIndex = Math.floor(i / 2);
+    for (let i = 0; i < 100; i++) {
       this.state.columns[i] = {
         columnKey: 'Column ' + i,
-        columnGroupIndex,
         header: this.state.shouldUseLegacyComponents
           ? headercellRendererLegacy
           : headerCellRenderer,
@@ -62,132 +64,213 @@ class AutoScrollExample extends React.Component {
           : i % 2
           ? cellRendererDatacell
           : cellRendererDiv,
-        width: 100,
-        allowCellsRecycling: true,
-        fixed: i < 2 ? true : false,
-        fixedRight: i >= 10000 - 4 ? true : false,
-      };
-      this.state.columnGroups[columnGroupIndex] = {
-        columnKey: 'Column Group ' + columnGroupIndex,
-        header: headerCellRenderer,
+        width: 50 + Math.floor((i * 300) / this.state.columnsCount),
       };
     }
-
-    this.onVerticalScroll = this.onVerticalScroll.bind(this);
-    this.onHorizontalScroll = this.onHorizontalScroll.bind(this);
-    this.toggleAutoScroll = this.toggleAutoScroll.bind(this);
-    this.setHorizontalScrollDelta = this.setHorizontalScrollDelta.bind(this);
-    this.setVerticalScrollDelta = this.setVerticalScrollDelta.bind(this);
-  }
-
-  componentDidMount() {
-    setInterval(() => {
-      if (!this.state.autoScrollEnabled) {
-        return;
-      }
-      this.setState((prevState) => ({
-        scrollTop: prevState.scrollTop + (prevState.verticalScrollDelta || 0),
-        scrollLeft:
-          prevState.scrollLeft + (prevState.horizontalScrollDelta || 0),
-      }));
-    }, 16);
   }
 
   render() {
     return (
       <div className="autoScrollContainer">
-        {this.renderControls()}
-        {this.renderTable()}
+        <div>{this.renderMainTable()}</div>
+        <div
+          style={{
+            position: 'relative',
+            left: this.state.isSplitted ? 0 : this.state.tablePosition,
+          }}
+          onMouseEnter={() => this.setState({ isPinContainerHovering: true })}
+          onMouseLeave={() => this.setState({ isPinContainerHovering: false })}
+        >
+          {this.renderPinAndTable()}
+        </div>
       </div>
     );
   }
+  renderPinAndTable() {
+    if (!this.state.isPinned) {
+      if (
+        !this.state.isScrollbarHovering &&
+        !this.state.isSplitted &&
+        !this.state.isPinContainerHovering
+      ) {
+        return null;
+      } else {
+        let containerStyles = {
+          position: 'absolute',
+          top: '-270px',
+          display: 'flex',
+          flexDirection: 'column',
+          transform: 'scale(0.5)',
+          transformOrigin: 'top left',
+        };
+
+        if (this.state.isSplitted) {
+          containerStyles = {
+            position: 'absolute',
+            top: -3,
+            display: 'flex',
+            flexDirection: 'column',
+          };
+        }
+        let buttonStyles = {
+          alignSelf: 'end',
+          display: 'flex',
+        };
+        return (
+          <div style={containerStyles}>
+            <div style={buttonStyles}>
+              {this.renderPin()}
+              {this.renderSplit()}
+            </div>
+
+            {this.renderPreviewTable()}
+          </div>
+        );
+      }
+    } else {
+      let containerStyles = {
+        position: 'absolute',
+        top: '-270px',
+        display: 'flex',
+        flexDirection: 'column',
+        transform: 'scale(0.5)',
+        transformOrigin: 'top left',
+      };
+
+      if (this.state.isSplitted) {
+        containerStyles = {
+          position: 'absolute',
+          top: -3,
+          display: 'flex',
+          flexDirection: 'column',
+        };
+      }
+      let buttonStyles = {
+        display: 'flex',
+        alignSelf: 'end',
+      };
+      return (
+        <div style={containerStyles}>
+          <div style={buttonStyles}>
+            {this.renderPin()}
+            {this.renderSplit()}
+          </div>
 
-  renderControls() {
+          {this.renderPreviewTable()}
+        </div>
+      );
+    }
+  }
+  renderPin() {
     return (
-      <div className="autoScrollControls">
-        <label>
-          Auto Scroll Enabled
-          <input
-            type="checkbox"
-            checked={this.state.autoScrollEnabled}
-            onChange={this.toggleAutoScroll}
-          />
-        </label>
-        <label>
-          Horizontal Scroll Delta
-          <input
-            type="number"
-            value={this.state.horizontalScrollDelta}
-            onChange={this.setHorizontalScrollDelta}
-          />
-        </label>
-        <label>
-          Vertical Scroll Delta
-          <input
-            type="number"
-            value={this.state.verticalScrollDelta}
-            onChange={this.setVerticalScrollDelta}
-          />
-        </label>
-      </div>
+      <img
+        id="myImagePin"
+        style={{ alignSelf: 'end', padding: '5px', margin: '5px' }}
+        src={require('./pin-button.png')}
+        alt="Pin Button"
+        className="button-img"
+        onClick={() => this.pinned(this.state.isPinned)}
+        height="30px"
+        width="30px"
+      />
     );
   }
+  pinned = (isPinned) => {
+    var image = document.getElementById('myImagePin');
+    if (isPinned === true) {
+      image.src = require('./pin-button.png');
+    } else {
+      image.src = require('./unpin-button.png');
+    }
+    this.setState({
+      isPinned: !isPinned,
+    });
+  };
+  renderSplit() {
+    return (
+      <img
+        id="myImage"
+        style={{ alignSelf: 'end', padding: '5px', margin: '5px' }}
+        src={require('./split-button.png')}
+        alt="Split Button"
+        className="button-img"
+        onClick={() => this.splitted(this.state.isSplitted)}
+        height="30px"
+        width="30px"
+      />
+    );
+  }
+  splitted = (isSplitted) => {
+    var image = document.getElementById('myImage');
+    if (isSplitted === true) {
+      image.src = require('./split-button.png');
+    } else {
+      image.src = require('./unsplit-button.png');
+    }
+    this.setState({
+      isSplitted: !isSplitted,
+    });
+  };
 
-  renderTable() {
-    var { dataList, scrollLeft, scrollTop } = this.state;
+  renderMainTable() {
+    var { dataList } = this.state;
     return (
       <Table
-        groupHeaderHeight={50}
+        ref={this.shared.setRef}
+        onScrollHoverMove={(scrollbarHoverLeft, tablePosition) => {
+          if (!this.state.isPinned) {
+            clearTimeout(window.hoverTimeoutId);
+            this.setState({ scrollbarHoverLeft });
+            if (tablePosition + this.props.width / 2 > this.props.width) {
+              tablePosition = this.props.width - this.props.width / 2 - 15;
+            }
+            this.setState({ tablePosition });
+          }
+        }}
+        onScrollHoverStart={() => {
+          if (!this.state.isPinned) {
+            this.setState({ isScrollbarHovering: true });
+            clearTimeout(window.hoverTimeoutId);
+          }
+        }}
+        onScrollHoverEnd={() => {
+          window.hoverTimeoutId = setTimeout(() => {
+            this.setState({ isScrollbarHovering: false });
+          }, 500);
+        }}
         rowHeight={50}
         headerHeight={50}
         rowsCount={dataList.getSize()}
-        width={1000}
-        height={500}
-        scrollLeft={scrollLeft}
-        scrollTop={scrollTop}
-        onVerticalScroll={this.onVerticalScroll}
-        onHorizontalScroll={this.onHorizontalScroll}
+        width={this.props.width}
+        height={
+          this.state.isSplitted ? this.props.height / 2 : this.props.height
+        }
+        scrollLeft={this.shared.state.scrollLeft}
         columnsCount={this.state.columnsCount}
         getColumn={(i) => this.state.columns[i]}
-        getColumnGroup={(i) => this.state.columnGroups[i]}
         shouldUseLegacyComponents={this.state.shouldUseLegacyComponents}
-        {...this.props}
       />
     );
   }
-
-  onVerticalScroll(scrollTop) {
-    this.setState({ scrollTop });
-  }
-
-  onHorizontalScroll(scrollLeft) {
-    this.setState({ scrollLeft });
-  }
-
-  toggleAutoScroll() {
-    this.setState((prevState) => ({
-      autoScrollEnabled: !prevState.autoScrollEnabled,
-    }));
-  }
-
-  setHorizontalScrollDelta(event) {
-    const { value } = event.target;
-    if (isNaN(value)) {
-      return;
-    }
-    this.setState({
-      horizontalScrollDelta: parseInt(value),
-    });
-  }
-
-  setVerticalScrollDelta(event) {
-    const { value } = event.target;
-    if (isNaN(value)) {
-      return;
-    }
-    this.setState({
-      verticalScrollDelta: parseInt(value),
-    });
+  renderPreviewTable() {
+    var { dataList } = this.state;
+    return (
+      <Table
+        rowHeight={50}
+        headerHeight={50}
+        rowsCount={dataList.getSize()}
+        width={this.props.width}
+        height={this.props.height / 2}
+        scrollLeft={Math.round(this.state.scrollbarHoverLeft)}
+        storedWidths={this.shared.state.storedWidths}
+        scrollableColOffsetIntervalTree={
+          this.shared.state.scrollableColOffsetIntervalTree
+        }
+        columnsCount={this.state.columnsCount}
+        getColumn={(i) => this.state.columns[i]}
+        shouldUseLegacyComponents={this.state.shouldUseLegacyComponents}
+      />
+    );
   }
 }
 

site/Constants.js

@@ -201,9 +201,9 @@ exports.ExamplePages = {
   AUTO_SCROLL_EXAMPLE: {
     location: 'example-auto-scroll.html',
     fileName: 'AutoScrollExample.js',
-    title: 'Auto Scroll',
+    title: 'Preview Table',
     description:
-      'An example using Controlled Scrolling to mimic auto scrolling',
+      'An example for a POC on sharing the states between different fdt instances',
   },
 };