58 | );
59 | },
60 | });
61 |
62 | module.exports = SideBar;
63 |
--------------------------------------------------------------------------------
/site/examples/ExamplesWrapper.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This file provided by Facebook is for non-commercial testing and evaluation
3 | * purposes only. Facebook reserves all rights not expressly granted.
4 | *
5 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
6 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
7 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
8 | * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
9 | * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
10 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
11 | */
12 |
13 | "use strict";
14 |
15 | require('./examplesPageStyle.less');
16 |
17 | var MiniHeader = require('../MiniHeader');
18 | var SideBar = require('../SideBar');
19 | var React = require('react');
20 | var Constants = require('../Constants');
21 |
22 | var ExamplesWrapper = React.createClass({
23 | render() {
24 | return (
25 |
26 |
27 |
28 |
29 |
30 |
35 |
36 | {this.props.children}
37 |
38 |
39 |
40 |
41 | );
42 | }
43 | });
44 |
45 | module.exports = ExamplesWrapper;
46 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | BSD License
2 |
3 | For FixedDataTable software
4 |
5 | Copyright (c) 2015, Facebook, Inc. All rights reserved.
6 |
7 | Redistribution and use in source and binary forms, with or without modification,
8 | are permitted provided that the following conditions are met:
9 |
10 | * Redistributions of source code must retain the above copyright notice, this
11 | list of conditions and the following disclaimer.
12 |
13 | * Redistributions in binary form must reproduce the above copyright notice,
14 | this list of conditions and the following disclaimer in the documentation
15 | and/or other materials provided with the distribution.
16 |
17 | * Neither the name Facebook nor the names of its contributors may be used to
18 | endorse or promote products derived from this software without specific
19 | prior written permission.
20 |
21 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
22 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
23 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
24 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
25 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
26 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
27 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
28 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
29 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
30 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
31 |
--------------------------------------------------------------------------------
/src/css/style/fixedDataTable.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | *
9 | * @providesModule fixedDataTable
10 | *
11 | */
12 |
13 | /**
14 | * Table.
15 | */
16 | .public/fixedDataTable/main {
17 | border-color: #d3d3d3;
18 | }
19 |
20 | .public/fixedDataTable/header,
21 | .public/fixedDataTable/hasBottomBorder {
22 | border-color: #d3d3d3;
23 | }
24 |
25 | .public/fixedDataTable/header .public/fixedDataTableCell/main {
26 | font-weight: bold;
27 | }
28 |
29 | .public/fixedDataTable/header,
30 | .public/fixedDataTable/header .public/fixedDataTableCell/main {
31 | background-color: var(fbui-desktop-background-light);
32 | background-image: linear-gradient(#fff, #efefef);
33 | }
34 |
35 | .public/fixedDataTable/footer .public/fixedDataTableCell/main {
36 | background-color: var(fbui-desktop-background-light);
37 | border-color: #d3d3d3;
38 | }
39 |
40 | .public/fixedDataTable/topShadow {
41 | background: 0 0 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAF0lEQVR4AWPUkNeSBhHCjJoK2twgFisAFagCCp3pJlAAAAAASUVORK5CYII=) repeat-x;
42 | }
43 |
44 | .public/fixedDataTable/bottomShadow {
45 | background: 0 0 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAHElEQVQI12MwNjZmZdAT1+Nm0JDWEGZQk1GTBgAWkwIeAEp52AAAAABJRU5ErkJggg==) repeat-x;
46 | }
47 |
48 | .public/fixedDataTable/horizontalScrollbar .public/Scrollbar/mainHorizontal {
49 | background-color: var(fbui-white);
50 | }
51 |
--------------------------------------------------------------------------------
/src/stubs/invariant.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | *
9 | * @providesModule invariant
10 | */
11 |
12 | "use strict";
13 |
14 | /**
15 | * Use invariant() to assert state which your program assumes to be true.
16 | *
17 | * Provide sprintf-style format (only %s is supported) and arguments
18 | * to provide information about what broke and what you were
19 | * expecting.
20 | *
21 | * The invariant message will be stripped in production, but the invariant
22 | * will remain to ensure logic does not differ in production.
23 | */
24 |
25 | var invariant = function(condition, format, a, b, c, d, e, f) {
26 | if (__DEV__) {
27 | if (format === undefined) {
28 | throw new Error('invariant requires an error message argument');
29 | }
30 | }
31 |
32 | if (!condition) {
33 | var error;
34 | if (format === undefined) {
35 | error = new Error(
36 | 'Minified exception occurred; use the non-minified dev environment ' +
37 | 'for the full error message and additional helpful warnings.'
38 | );
39 | } else {
40 | var args = [a, b, c, d, e, f];
41 | var argIndex = 0;
42 | error = new Error(
43 | 'Invariant Violation: ' +
44 | format.replace(/%s/g, function() { return args[argIndex++]; })
45 | );
46 | }
47 |
48 | error.framesToPop = 1; // we don't care about invariant's own frame
49 | throw error;
50 | }
51 | };
52 |
53 | module.exports = invariant;
54 |
--------------------------------------------------------------------------------
/src/css/layout/fixedDataTableCellLayout.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | *
9 | * @providesModule fixedDataTableCellLayout
10 | */
11 |
12 | .fixedDataTableCellLayout/main {
13 | border-right-style: solid;
14 | border-right-width: 1px;
15 | border-width: 0 1px 0 0;
16 | box-sizing: border-box;
17 | display: block;
18 | overflow: hidden;
19 | position: absolute;
20 | white-space: normal;
21 | }
22 |
23 | .fixedDataTableCellLayout/lastChild {
24 | border-width: 0 1px 1px 0;
25 | }
26 |
27 | .fixedDataTableCellLayout/alignRight {
28 | text-align: right;
29 | }
30 |
31 | .fixedDataTableCellLayout/alignCenter {
32 | text-align: center;
33 | }
34 |
35 | .fixedDataTableCellLayout/wrap1 {
36 | display: table;
37 | }
38 |
39 | .fixedDataTableCellLayout/wrap2 {
40 | display: table-row;
41 | }
42 |
43 | .fixedDataTableCellLayout/wrap3 {
44 | display: table-cell;
45 | vertical-align: middle;
46 | }
47 |
48 | .fixedDataTableCellLayout/columnResizerContainer {
49 | position: absolute;
50 | right: 0px;
51 | width: 6px;
52 | z-index: 1;
53 | }
54 |
55 | .fixedDataTableCellLayout/columnResizerContainer:hover {
56 | cursor: ew-resize;
57 | }
58 |
59 | .fixedDataTableCellLayout/columnResizerContainer:hover .fixedDataTableCellLayout/columnResizerKnob {
60 | visibility: visible;
61 | }
62 |
63 | .fixedDataTableCellLayout/columnResizerKnob {
64 | position: absolute;
65 | right: 0px;
66 | visibility: hidden;
67 | width: 4px;
68 | }
69 |
--------------------------------------------------------------------------------
/src/vendor_upstream/dom/translateDOMPositionXY.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | *
9 | * @providesModule translateDOMPositionXY
10 | * @typechecks
11 | */
12 |
13 | 'use strict';
14 |
15 | var BrowserSupportCore = require('BrowserSupportCore');
16 |
17 | var getVendorPrefixedName = require('getVendorPrefixedName');
18 |
19 | var TRANSFORM = getVendorPrefixedName('transform');
20 | var BACKFACE_VISIBILITY = getVendorPrefixedName('backfaceVisibility');
21 |
22 | var translateDOMPositionXY = (function() {
23 | if (BrowserSupportCore.hasCSSTransforms()) {
24 | var ua = global.window ? global.window.navigator.userAgent : 'UNKNOWN';
25 | var isSafari = (/Safari\//).test(ua) && !(/Chrome\//).test(ua);
26 | // It appears that Safari messes up the composition order
27 | // of GPU-accelerated layers
28 | // (see bug https://bugs.webkit.org/show_bug.cgi?id=61824).
29 | // Use 2D translation instead.
30 | if (!isSafari && BrowserSupportCore.hasCSS3DTransforms()) {
31 | return function(/*object*/ style, /*number*/ x, /*number*/ y) {
32 | style[TRANSFORM] ='translate3d(' + x + 'px,' + y + 'px,0)';
33 | style[BACKFACE_VISIBILITY] = 'hidden';
34 | };
35 | } else {
36 | return function(/*object*/ style, /*number*/ x, /*number*/ y) {
37 | style[TRANSFORM] = 'translate(' + x + 'px,' + y + 'px)';
38 | };
39 | }
40 | } else {
41 | return function(/*object*/ style, /*number*/ x, /*number*/ y) {
42 | style.left = x + 'px';
43 | style.top = y + 'px';
44 | };
45 | }
46 | })();
47 |
48 | module.exports = translateDOMPositionXY;
49 |
--------------------------------------------------------------------------------
/site/examples/TouchableArea.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This file provided by Facebook is for non-commercial testing and evaluation
3 | * purposes only. Facebook reserves all rights not expressly granted.
4 | *
5 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
6 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
7 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
8 | * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
9 | * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
10 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
11 | */
12 |
13 | var React = require('React');
14 |
15 | var TouchableArea = React.createClass({
16 | getDefaultProps() {
17 | return {
18 | touchable: true
19 | };
20 | },
21 |
22 | handleTouchStart(e) {
23 | if (!this.props.scroller || !this.props.touchable) {
24 | return;
25 | }
26 |
27 | this.props.scroller.doTouchStart(e.touches, e.timeStamp);
28 | e.preventDefault();
29 | },
30 |
31 | handleTouchMove(e) {
32 | if (!this.props.scroller || !this.props.touchable) {
33 | return;
34 | }
35 |
36 | this.props.scroller.doTouchMove(e.touches, e.timeStamp, e.scale);
37 | e.preventDefault();
38 | },
39 |
40 | handleTouchEnd(e) {
41 | if (!this.props.scroller || !this.props.touchable) {
42 | return;
43 | }
44 |
45 | this.props.scroller.doTouchEnd(e.timeStamp);
46 | e.preventDefault();
47 | },
48 |
49 | render() {
50 | return (
51 |
51 | );
52 | },
53 | });
54 |
55 | module.exports = DocsPage;
56 |
--------------------------------------------------------------------------------
/src/vendor_upstream/core/getVendorPrefixedName.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | *
9 | * @providesModule getVendorPrefixedName
10 | * @typechecks
11 | */
12 |
13 | var ExecutionEnvironment = require('ExecutionEnvironment');
14 |
15 | var camelize = require('camelize');
16 | var invariant = require('invariant');
17 |
18 | var memoized = {};
19 | var prefixes = ['Webkit', 'ms', 'Moz', 'O'];
20 | var prefixRegex = new RegExp('^(' + prefixes.join('|') + ')');
21 | var testStyle =
22 | ExecutionEnvironment.canUseDOM ? document.createElement('div').style : {};
23 |
24 | function getWithPrefix(name) {
25 | for (var i = 0; i < prefixes.length; i++) {
26 | var prefixedName = prefixes[i] + name;
27 | if (prefixedName in testStyle) {
28 | return prefixedName;
29 | }
30 | }
31 | return null;
32 | }
33 |
34 | /**
35 | * @param {string} property Name of a css property to check for.
36 | * @return {?string} property name supported in the browser, or null if not
37 | * supported.
38 | */
39 | function getVendorPrefixedName(property) {
40 | var name = camelize(property);
41 | if (memoized[name] === undefined) {
42 | var capitalizedName = name.charAt(0).toUpperCase() + name.slice(1);
43 | if (prefixRegex.test(capitalizedName)) {
44 | invariant(
45 | false,
46 | 'getVendorPrefixedName must only be called with unprefixed' +
47 | 'CSS property names. It was called with %s', property
48 | );
49 | }
50 | memoized[name] =
51 | (name in testStyle) ? name : getWithPrefix(capitalizedName);
52 | }
53 | return memoized[name];
54 | }
55 |
56 | module.exports = getVendorPrefixedName;
57 |
--------------------------------------------------------------------------------
/site/webpack-prerender.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 | var resolvers = require('../build_helpers/resolvers');
4 |
5 | var isDev = process.env.NODE_ENV !== 'production';
6 |
7 | module.exports = {
8 | entry: path.join(__dirname, 'renderPath.js'),
9 |
10 | output: {
11 | path: '__site_prerender__/',
12 | filename: 'renderPath.js',
13 | libraryTarget: 'commonjs2',
14 | },
15 |
16 | target: 'node',
17 |
18 | module: {
19 | loaders: [
20 | {
21 | test: /\.md$/,
22 | loader: [
23 | 'html?{"minimize":false}',
24 | path.join(__dirname, '../build_helpers/markdownLoader')
25 | ].join('!')
26 | },
27 | {
28 | test: /\.js$/,
29 | exclude: /node_modules/,
30 | loader: 'babel-loader'
31 | },
32 | {
33 | test: /\.css$/,
34 | loader: 'null-loader'
35 | },
36 | {
37 | test: /\.less$/,
38 | loader: 'null-loader'
39 | },
40 | {
41 | test: /\.png$/,
42 | loader: 'file-loader',
43 | query: { mimetype: 'image/png', name: 'images/[name]-[hash].[ext]' }
44 | }
45 | ]
46 | },
47 |
48 | resolve: {
49 | alias: {
50 | 'fixed-data-table/css': path.join(__dirname, '../src/css'),
51 | 'fixed-data-table': path.join(__dirname, '../src/FixedDataTableRoot')
52 | }
53 | },
54 |
55 | plugins: [
56 | new webpack.optimize.OccurenceOrderPlugin(),
57 | new webpack.DefinePlugin({
58 | 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
59 | '__DEV__': JSON.stringify(isDev || true)
60 | }),
61 | resolvers.resolveHasteDefines
62 | ]
63 | };
64 |
65 | if (process.env.NODE_ENV === 'production') {
66 | module.exports.plugins.push(
67 | new webpack.optimize.UglifyJsPlugin({
68 | compressor: {
69 | warnings: false
70 | }
71 | })
72 | );
73 | }
74 |
--------------------------------------------------------------------------------
/src/vendor_upstream/stubs/cx.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | *
9 | * @providesModule cx
10 | */
11 |
12 | var slashReplaceRegex = /\//g;
13 | var cache = {};
14 |
15 | function getClassName(className) {
16 | if (cache[className]) {
17 | return cache[className];
18 | }
19 |
20 | cache[className] = className.replace(slashReplaceRegex, '_');
21 | return cache[className];
22 | }
23 |
24 | /**
25 | * This function is used to mark string literals representing CSS class names
26 | * so that they can be transformed statically. This allows for modularization
27 | * and minification of CSS class names.
28 | *
29 | * In static_upstream, this function is actually implemented, but it should
30 | * eventually be replaced with something more descriptive, and the transform
31 | * that is used in the main stack should be ported for use elsewhere.
32 | *
33 | * @param string|object className to modularize, or an object of key/values.
34 | * In the object case, the values are conditions that
35 | * determine if the className keys should be included.
36 | * @param [string ...] Variable list of classNames in the string case.
37 | * @return string Renderable space-separated CSS className.
38 | */
39 | function cx(classNames) {
40 | var classNamesArray;
41 | if (typeof classNames == 'object') {
42 | classNamesArray = Object.keys(classNames).filter(function(className) {
43 | return classNames[className];
44 | });
45 | } else {
46 | classNamesArray = Array.prototype.slice.call(arguments);
47 | }
48 |
49 | return classNamesArray.map(getClassName).join(' ');
50 | }
51 |
52 | module.exports = cx;
53 |
--------------------------------------------------------------------------------
/PATENTS:
--------------------------------------------------------------------------------
1 | Additional Grant of Patent Rights Version 2
2 |
3 | "Software" means the FixedDataTable software distributed by Facebook, Inc.
4 |
5 | Facebook, Inc. ("Facebook") hereby grants to each recipient of the Software
6 | ("you") a perpetual, worldwide, royalty-free, non-exclusive, irrevocable
7 | (subject to the termination provision below) license under any Necessary
8 | Claims, to make, have made, use, sell, offer to sell, import, and otherwise
9 | transfer the Software. For avoidance of doubt, no license is granted under
10 | Facebook’s rights in any patent claims that are infringed by (i) modifications
11 | to the Software made by you or any third party or (ii) the Software in
12 | combination with any software or other technology.
13 |
14 | The license granted hereunder will terminate, automatically and without notice,
15 | if you (or any of your subsidiaries, corporate affiliates or agents) initiate
16 | directly or indirectly, or take a direct financial interest in, any Patent
17 | Assertion: (i) against Facebook or any of its subsidiaries or corporate
18 | affiliates, (ii) against any party if such Patent Assertion arises in whole or
19 | in part from any software, technology, product or service of Facebook or any of
20 | its subsidiaries or corporate affiliates, or (iii) against any party relating
21 | to the Software. Notwithstanding the foregoing, if Facebook or any of its
22 | subsidiaries or corporate affiliates files a lawsuit alleging patent
23 | infringement against you in the first instance, and you respond by filing a
24 | patent infringement counterclaim in that lawsuit against that party that is
25 | unrelated to the Software, the license granted hereunder will not terminate
26 | under section (i) of this paragraph due to such counterclaim.
27 |
28 | A "Necessary Claim" is a claim of a patent owned by Facebook that is
29 | necessarily infringed by the Software standing alone.
30 |
31 | A "Patent Assertion" is any lawsuit or other action alleging direct, indirect,
32 | or contributory infringement or inducement to infringe any patent, including a
33 | cross-claim or counterclaim.
34 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "fixed-data-table",
3 | "version": "0.6.0",
4 | "description": "A React table component designed to allow presenting thousands of rows of data.",
5 | "main": "main.js",
6 | "peerDependencies": {
7 | "react": ">=0.13.0 <0.15.0 || ^0.14.0-beta3",
8 | "react-dom": ">=0.14.0 <0.15.0 || ^0.14.0-beta3"
9 | },
10 | "devDependencies": {
11 | "autoprefixer": "^5.0.0",
12 | "babel-core": "^5.4.7",
13 | "babel-loader": "^5.0.0",
14 | "bundle-loader": "^0.5.2",
15 | "css-loader": "^0.9.1",
16 | "extract-text-webpack-plugin": "^0.3.8",
17 | "faker": "^2.1.2",
18 | "file-loader": "^0.8.1",
19 | "glob": "^4.3.5",
20 | "html-loader": "^0.2.3",
21 | "less": "^2.2.0",
22 | "less-loader": "^2.0.0",
23 | "marked": "^0.3.2",
24 | "null-loader": "^0.1.0",
25 | "postcss": "^4.0.2",
26 | "postcss-custom-properties": "3.0.1",
27 | "react": "^0.14.0",
28 | "react-docgen": "^1.2.0",
29 | "react-tools": "^0.12.2",
30 | "style-loader": "^0.8.3",
31 | "url-loader": "^0.5.5",
32 | "webpack": "^1.8.3",
33 | "webpack-dev-server": "^1.8.0"
34 | },
35 | "scripts": {
36 | "site-dev-server": "./build_helpers/startSiteDevServer.sh",
37 | "site-build": "./build_helpers/buildStaticSite.sh",
38 | "build-dist": "./build_helpers/buildDist.sh",
39 | "build-npm": "./build_helpers/buildNPMInternals.sh",
40 | "build-docs": "./build_helpers/buildAPIDocs.sh",
41 | "publish-site": "./build_helpers/publishStaticSite.sh",
42 | "publish-package": "./build_helpers/publishPackage.sh",
43 | "test": "echo \"Error: no test specified\" && exit 1"
44 | },
45 | "repository": {
46 | "type": "git",
47 | "url": "https://github.com/facebook/fixed-data-table.git"
48 | },
49 | "license": "BSD-3-Clause",
50 | "bugs": {
51 | "url": "https://github.com/facebook/fixed-data-table/issues"
52 | },
53 | "homepage": "http://facebook.github.io/fixed-data-table",
54 | "tags": [
55 | "react",
56 | "table"
57 | ],
58 | "keywords": [
59 | "react",
60 | "react-component",
61 | "table",
62 | "data-table",
63 | "fixed-table"
64 | ]
65 | }
66 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing to FixedDataTable
2 | We want to make contributing to this project as easy and transparent as possible.
3 |
4 | ## Our Development Process
5 | Some of the core team will be working directly on GitHub. These changes will be public from the beginning. Other changesets will come via a bridge with Facebook's internal source control. This is a necessity as it allows engineers at Facebook outside of the core team to move fast and contribute from an environment they are comfortable in.
6 |
7 | ## Pull Requests
8 |
9 | We actively welcome your pull requests - however, before you begin a pull request, please create an issue so we can determine whether or not the work that you are planning to do is either already being worked on or out of the scope of this project.
10 |
11 | 1. Fork the repo and create your branch from `master`.
12 |
13 | 2. If you've added code that should be tested, add tests (tests coming soon).
14 |
15 | 3. Ensure the test suite passes (coming soon).
16 |
17 | 4. Make sure your code lints (coming soon).
18 |
19 | 5. Do not commit anything to the `dist` folder.
20 |
21 | 6. If you haven't already, complete the Contributor License Agreement ("CLA").
22 |
23 | ## Contributor License Agreement ("CLA")
24 | In order to accept your pull request, we need you to submit a CLA. You only need to do this once to work on any of Facebook's open source projects.
25 |
26 | Complete your CLA here:
27 |
28 | ## Issues
29 | We use GitHub issues to track public bugs. Please ensure your description is clear and has sufficient instructions to be able to reproduce the issue.
30 |
31 | Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe disclosure of security bugs. In those cases, please go through the process outlined on that page and do not file a public issue.
32 |
33 | ## Coding Style
34 | * Use semicolons;
35 | * Commas last,
36 | * 2 spaces for indentation (no tabs)
37 | * Prefer `'` over `"`
38 | * `"use strict";`
39 | * 80 character line length
40 | * "Attractive"
41 | * Do not use the optional parameters of `setTimeout` and `setInterval`
42 |
43 | ## License
44 | By contributing to FixedDataTable, you agree that your contributions will be licensed under its BSD license.
45 |
--------------------------------------------------------------------------------
/src/vendor_upstream/core/debounceCore.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | *
9 | * @providesModule debounceCore
10 | * @typechecks
11 | */
12 |
13 | /**
14 | * Invokes the given callback after a specified number of milliseconds have
15 | * elapsed, ignoring subsequent calls.
16 | *
17 | * For example, if you wanted to update a preview after the user stops typing
18 | * you could do the following:
19 | *
20 | * elem.addEventListener('keyup', debounce(this.updatePreview, 250), false);
21 | *
22 | * The returned function has a reset method which can be called to cancel a
23 | * pending invocation.
24 | *
25 | * var debouncedUpdatePreview = debounce(this.updatePreview, 250);
26 | * elem.addEventListener('keyup', debouncedUpdatePreview, false);
27 | *
28 | * // later, to cancel pending calls
29 | * debouncedUpdatePreview.reset();
30 | *
31 | * @param {function} func - the function to debounce
32 | * @param {number} wait - how long to wait in milliseconds
33 | * @param {*} context - optional context to invoke the function in
34 | * @param {?function} setTimeoutFunc - an implementation of setTimeout
35 | * if nothing is passed in the default setTimeout function is used
36 | * @param {?function} clearTimeoutFunc - an implementation of clearTimeout
37 | * if nothing is passed in the default clearTimeout function is used
38 | */
39 | function debounce(func, wait, context, setTimeoutFunc, clearTimeoutFunc) {
40 | setTimeoutFunc = setTimeoutFunc || setTimeout;
41 | clearTimeoutFunc = clearTimeoutFunc || clearTimeout;
42 | var timeout;
43 |
44 | function debouncer(...args) {
45 | debouncer.reset();
46 |
47 | var callback = function() {
48 | func.apply(context, args);
49 | };
50 | callback.__SMmeta = func.__SMmeta;
51 | timeout = setTimeoutFunc(callback, wait);
52 | }
53 |
54 | debouncer.reset = function() {
55 | clearTimeoutFunc(timeout);
56 | };
57 |
58 | return debouncer;
59 | }
60 |
61 | module.exports = debounce;
62 |
--------------------------------------------------------------------------------
/src/vendor_upstream/react/renderers/dom/client/utils/isEventSupported.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2013-2015, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | *
9 | * @providesModule isEventSupported
10 | */
11 |
12 | 'use strict';
13 |
14 | var ExecutionEnvironment = require('ExecutionEnvironment');
15 |
16 | var useHasFeature;
17 | if (ExecutionEnvironment.canUseDOM) {
18 | useHasFeature =
19 | document.implementation &&
20 | document.implementation.hasFeature &&
21 | // always returns true in newer browsers as per the standard.
22 | // @see http://dom.spec.whatwg.org/#dom-domimplementation-hasfeature
23 | document.implementation.hasFeature('', '') !== true;
24 | }
25 |
26 | /**
27 | * Checks if an event is supported in the current execution environment.
28 | *
29 | * NOTE: This will not work correctly for non-generic events such as `change`,
30 | * `reset`, `load`, `error`, and `select`.
31 | *
32 | * Borrows from Modernizr.
33 | *
34 | * @param {string} eventNameSuffix Event name, e.g. "click".
35 | * @param {?boolean} capture Check if the capture phase is supported.
36 | * @return {boolean} True if the event is supported.
37 | * @internal
38 | * @license Modernizr 3.0.0pre (Custom Build) | MIT
39 | */
40 | function isEventSupported(eventNameSuffix, capture) {
41 | if (!ExecutionEnvironment.canUseDOM ||
42 | capture && !('addEventListener' in document)) {
43 | return false;
44 | }
45 |
46 | var eventName = 'on' + eventNameSuffix;
47 | var isSupported = eventName in document;
48 |
49 | if (!isSupported) {
50 | var element = document.createElement('div');
51 | element.setAttribute(eventName, 'return;');
52 | isSupported = typeof element[eventName] === 'function';
53 | }
54 |
55 | if (!isSupported && useHasFeature && eventNameSuffix === 'wheel') {
56 | // This is the only way to test support for the `wheel` event in IE9+.
57 | isSupported = document.implementation.hasFeature('Events.wheel', '3.0');
58 | }
59 |
60 | return isSupported;
61 | }
62 |
63 | module.exports = isEventSupported;
64 |
--------------------------------------------------------------------------------
/examples/helpers/FakeObjectDataListStore.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This file provided by Facebook is for non-commercial testing and evaluation
3 | * purposes only. Facebook reserves all rights not expressly granted.
4 | *
5 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
6 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
7 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
8 | * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
9 | * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
10 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
11 | */
12 |
13 | var faker = require('faker');
14 |
15 | class FakeObjectDataListStore {
16 | constructor(/*number*/ size){
17 | this.size = size || 2000;
18 | this._cache = [];
19 | }
20 |
21 | createFakeRowObjectData(/*number*/ index) /*object*/ {
22 | return {
23 | id: index,
24 | avartar: faker.image.avatar(),
25 | city: faker.address.city(),
26 | email: faker.internet.email(),
27 | firstName: faker.name.firstName(),
28 | lastName: faker.name.lastName(),
29 | street: faker.address.streetName(),
30 | zipCode: faker.address.zipCode(),
31 | date: faker.date.past(),
32 | bs: faker.company.bs(),
33 | catchPhrase: faker.company.catchPhrase(),
34 | companyName: faker.company.companyName(),
35 | words: faker.lorem.words(),
36 | sentence: faker.lorem.sentence(),
37 | };
38 | }
39 |
40 | getObjectAt(/*number*/ index) /*?object*/ {
41 | if (index < 0 || index > this.size){
42 | return undefined;
43 | }
44 | if (this._cache[index] === undefined) {
45 | this._cache[index] = this.createFakeRowObjectData(index);
46 | }
47 | return this._cache[index];
48 | }
49 |
50 | /**
51 | * Populates the entire cache with data.
52 | * Use with Caution! Behaves slowly for large sizes
53 | * ex. 100,000 rows
54 | */
55 | getAll() {
56 | if (this._cache.length < this.size) {
57 | for (var i = 0; i < this.size; i++) {
58 | this.getObjectAt(i);
59 | }
60 | }
61 | return this._cache.slice();
62 | }
63 |
64 | getSize() {
65 | return this.size;
66 | }
67 | }
68 |
69 | module.exports = FakeObjectDataListStore;
70 |
--------------------------------------------------------------------------------
/examples/helpers/ExampleImage.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This file provided by Facebook is for non-commercial testing and evaluation
3 | * purposes only. Facebook reserves all rights not expressly granted.
4 | *
5 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
6 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
7 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
8 | * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
9 | * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
10 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
11 | */
12 |
13 | var React = require('react');
14 |
15 | var PendingPool = {};
16 | var ReadyPool = {};
17 |
18 | var ExampleImage = React.createClass({
19 | propTypes: {
20 | src: React.PropTypes.string.isRequired,
21 | },
22 |
23 | getInitialState() {
24 | return {
25 | ready: false,
26 | };
27 | },
28 |
29 | componentWillMount() {
30 | this._load(this.props.src);
31 | },
32 |
33 | componentWillReceiveProps(nextProps) {
34 | if (nextProps.src !== this.props.src) {
35 | this.setState({src: null});
36 | this._load(nextProps.src);
37 | }
38 | },
39 |
40 | render() {
41 | var style = this.state.src ?
42 | { backgroundImage : 'url(' + this.state.src + ')'} :
43 | undefined;
44 |
45 | return ;
46 | },
47 |
48 | _load(/*string*/ src) {
49 | if (ReadyPool[src]) {
50 | this.setState({src: src});
51 | return;
52 | }
53 |
54 | if (PendingPool[src]) {
55 | PendingPool[src].push(this._onLoad);
56 | return;
57 | }
58 |
59 | PendingPool[src] = [this._onLoad];
60 |
61 | var img = new Image();
62 | img.onload = () => {
63 | PendingPool[src].forEach(/*function*/ callback => {
64 | callback(src);
65 | });
66 | delete PendingPool[src];
67 | img.onload = null;
68 | src = undefined;
69 | };
70 | img.src = src;
71 | },
72 |
73 | _onLoad(/*string*/ src) {
74 | ReadyPool[src] = true;
75 | if (this.isMounted() && src === this.props.src) {
76 | this.setState({
77 | src: src,
78 | });
79 | }
80 | },
81 | });
82 |
83 |
84 | module.exports = ExampleImage;
85 |
--------------------------------------------------------------------------------
/src/FixedDataTableColumnGroupNew.react.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | *
9 | * @providesModule FixedDataTableColumnGroupNew.react
10 | * @typechecks
11 | */
12 |
13 | var React = require('React');
14 |
15 | var {PropTypes} = React;
16 |
17 | /**
18 | * Component that defines the attributes of a table column group.
19 | */
20 | var FixedDataTableColumnGroup = React.createClass({
21 | statics: {
22 | __TableColumnGroup__: true,
23 | },
24 |
25 | propTypes: {
26 | /**
27 | * The horizontal alignment of the table cell content.
28 | */
29 | align: PropTypes.oneOf(['left', 'center', 'right']),
30 |
31 | /**
32 | * Controls if the column group is fixed when scrolling in the X axis.
33 | */
34 | fixed: PropTypes.bool,
35 |
36 | /**
37 | * This is the header cell for this column group.
38 | * This can either be a string or a React element. Passing in a string
39 | * will render a default footer cell with that string. By default, the React
40 | * element passed in can expect to receive the following props:
41 | *
42 | * ```
43 | * props: {
44 | * height: number // (supplied from the groupHeaderHeight)
45 | * width: number // (supplied from the Column)
46 | * }
47 | * ```
48 | *
49 | * Because you are passing in your own React element, you can feel free to
50 | * pass in whatever props you may want or need.
51 | *
52 | * You can also pass in a function that returns a react elemnt, with the
53 | * props object above passed in as the first parameter.
54 | */
55 | header: PropTypes.oneOfType([
56 | PropTypes.node,
57 | PropTypes.func,
58 | ]),
59 |
60 | },
61 |
62 | getDefaultProps() /*object*/ {
63 | return {
64 | fixed: false,
65 | };
66 | },
67 |
68 | render() {
69 | if (__DEV__) {
70 | throw new Error(
71 | 'Component should never render'
72 | );
73 | }
74 | return null;
75 | },
76 | });
77 |
78 | module.exports = FixedDataTableColumnGroup;
79 |
--------------------------------------------------------------------------------
/site/webpack-client.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 | var resolvers = require('../build_helpers/resolvers');
4 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
5 |
6 | var isDev = process.env.NODE_ENV !== 'production';
7 |
8 | module.exports = {
9 |
10 | devtool: 'source-map',
11 |
12 | entry: path.join(__dirname, 'client.js'),
13 |
14 | output: {
15 | path: '__site__/',
16 | filename: isDev ? '[name].js' : '[name]-[hash].js',
17 | publicPath: '',
18 | },
19 |
20 | target: 'web',
21 |
22 | module: {
23 | loaders: [
24 | {
25 | test: /\.md$/,
26 | loader: [
27 | 'html?{"minimize":false}',
28 | path.join(__dirname, '../build_helpers/markdownLoader')
29 | ].join('!')
30 | },
31 | {
32 | test: /\.js$/,
33 | exclude: /node_modules/,
34 | loader: 'babel-loader'
35 | },
36 | {
37 | test: /\.css$/,
38 | loader: ExtractTextPlugin.extract(
39 | 'style-loader',
40 | [
41 | 'css-loader',
42 | path.join(__dirname, '../build_helpers/cssTransformLoader')
43 | ].join('!')
44 | )
45 | },
46 | {
47 | test: /\.less$/,
48 | loader: ExtractTextPlugin.extract(
49 | 'style-loader',
50 | 'css-loader!less-loader'
51 | )
52 | },
53 | {
54 | test: /\.png$/,
55 | loader: 'file-loader',
56 | query: { mimetype: 'image/png', name: 'images/[name]-[hash].[ext]' }
57 | }
58 | ]
59 | },
60 |
61 | resolve: {
62 | alias: {
63 | 'fixed-data-table/css': path.join(__dirname, '../src/css'),
64 | 'fixed-data-table': path.join(__dirname, '../src/FixedDataTableRoot')
65 | }
66 | },
67 |
68 | plugins: [
69 | new ExtractTextPlugin(
70 | isDev ? '[name].css' : '[name]-[hash].css'
71 | ),
72 | new webpack.optimize.OccurenceOrderPlugin(),
73 | new webpack.DefinePlugin({
74 | 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
75 | // 'process.env.NODE_ENV': JSON.stringify('production'),
76 | '__DEV__': JSON.stringify(isDev || true)
77 | }),
78 | resolvers.resolveHasteDefines,
79 | ]
80 | };
81 |
82 | if (process.env.NODE_ENV === 'production') {
83 | module.exports.plugins.push(
84 | new webpack.optimize.UglifyJsPlugin({
85 | compressor: {
86 | warnings: false
87 | }
88 | })
89 | );
90 | }
91 |
--------------------------------------------------------------------------------
/src/css/layout/ScrollbarLayout.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | *
9 | * @providesModule ScrollbarLayout
10 | */
11 |
12 | .ScrollbarLayout/main {
13 | box-sizing: border-box;
14 | outline: none;
15 | overflow: hidden;
16 | position: absolute;
17 | transition-duration: 250ms;
18 | transition-timing-function: ease;
19 | user-select: none;
20 | }
21 |
22 | .ScrollbarLayout/mainVertical {
23 | bottom: 0;
24 | right: 0;
25 | top: 0;
26 | transition-property: background-color width;
27 | width: var(scrollbar-size);
28 | }
29 |
30 | .ScrollbarLayout/mainVertical.public/Scrollbar/mainActive,
31 | .ScrollbarLayout/mainVertical:hover {
32 | width: var(scrollbar-size-large);
33 | }
34 |
35 | .ScrollbarLayout/mainHorizontal {
36 | bottom: 0;
37 | height: var(scrollbar-size);
38 | left: 0;
39 | transition-property: background-color height;
40 | }
41 |
42 | /* Touching the scroll-track directly makes the scroll-track bolder */
43 | .ScrollbarLayout/mainHorizontal.public/Scrollbar/mainActive,
44 | .ScrollbarLayout/mainHorizontal:hover {
45 | height: var(scrollbar-size-large);
46 | }
47 |
48 | .ScrollbarLayout/face {
49 | left: 0;
50 | overflow: hidden;
51 | position: absolute;
52 | z-index: 1;
53 | }
54 |
55 | /**
56 | * This selector renders the "nub" of the scrollface. The nub must
57 | * be rendered as pseudo-element so that it won't receive any UI events then
58 | * we can get the correct `event.offsetX` and `event.offsetY` from the
59 | * scrollface element while dragging it.
60 | */
61 | .ScrollbarLayout/face:after {
62 | border-radius: var(scrollbar-face-radius);
63 | content: '';
64 | display: block;
65 | position: absolute;
66 | transition: background-color 250ms ease;
67 | }
68 |
69 | .ScrollbarLayout/faceHorizontal {
70 | bottom: 0;
71 | left: 0;
72 | top: 0;
73 | }
74 |
75 | .ScrollbarLayout/faceHorizontal:after {
76 | bottom: var(scrollbar-face-margin);
77 | left: 0;
78 | top: var(scrollbar-face-margin);
79 | width: 100%;
80 | }
81 |
82 | .ScrollbarLayout/faceVertical {
83 | left: 0;
84 | right: 0;
85 | top: 0;
86 | }
87 |
88 | .ScrollbarLayout/faceVertical:after {
89 | height: 100%;
90 | left: var(scrollbar-face-margin);
91 | right: var(scrollbar-face-margin);
92 | top: 0;
93 | }
94 |
--------------------------------------------------------------------------------
/src/stubs/react/ReactComponentWithPureRenderMixin.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | *
9 | * @providesModule ReactComponentWithPureRenderMixin
10 | */
11 |
12 | 'use strict';
13 |
14 | /**
15 | * Performs equality by iterating through keys on an object and returning
16 | * false when any key has values which are not strictly equal between
17 | * objA and objB. Returns true when the values of all keys are strictly equal.
18 | *
19 | * @return {boolean}
20 | */
21 | function shallowEqual(objA, objB) {
22 | if (objA === objB) {
23 | return true;
24 | }
25 | var key;
26 | // Test for A's keys different from B.
27 | for (key in objA) {
28 | if (objA.hasOwnProperty(key) &&
29 | (!objB.hasOwnProperty(key) || objA[key] !== objB[key])) {
30 | return false;
31 | }
32 | }
33 | // Test for B's keys missing from A.
34 | for (key in objB) {
35 | if (objB.hasOwnProperty(key) && !objA.hasOwnProperty(key)) {
36 | return false;
37 | }
38 | }
39 | return true;
40 | }
41 |
42 | /**
43 | * If your React component's render function is "pure", e.g. it will render the
44 | * same result given the same props and state, provide this Mixin for a
45 | * considerable performance boost.
46 | *
47 | * Most React components have pure render functions.
48 | *
49 | * Example:
50 | *
51 | * var ReactComponentWithPureRenderMixin =
52 | * require('ReactComponentWithPureRenderMixin');
53 | * React.createClass({
54 | * mixins: [ReactComponentWithPureRenderMixin],
55 | *
56 | * render: function() {
57 | * return
foo
;
58 | * }
59 | * });
60 | *
61 | * Note: This only checks shallow equality for props and state. If these contain
62 | * complex data structures this mixin may have false-negatives for deeper
63 | * differences. Only mixin to components which have simple props and state, or
64 | * use `forceUpdate()` when you know deep data structures have changed.
65 | */
66 | var ReactComponentWithPureRenderMixin = {
67 | shouldComponentUpdate: function(nextProps, nextState) {
68 | return !shallowEqual(this.props, nextProps) ||
69 | !shallowEqual(this.state, nextState);
70 | }
71 | };
72 |
73 | module.exports = ReactComponentWithPureRenderMixin;
74 |
--------------------------------------------------------------------------------
/examples/old/ColumnGroupsExample.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This file provided by Facebook is for non-commercial testing and evaluation
3 | * purposes only. Facebook reserves all rights not expressly granted.
4 | *
5 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
6 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
7 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
8 | * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
9 | * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
10 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
11 | */
12 |
13 | "use strict";
14 |
15 | var FakeObjectDataListStore = require('../helpers/FakeObjectDataListStore');
16 | var FixedDataTable = require('fixed-data-table');
17 | var React = require('react');
18 |
19 | var Column = FixedDataTable.Column;
20 | var Table = FixedDataTable.Table;
21 | var ColumnGroup = FixedDataTable.ColumnGroup;
22 |
23 | var ROWS = 1000000;
24 |
25 | var ColumnGroupsExample = React.createClass({
26 | getInitialState() {
27 | return {
28 | dataList: new FakeObjectDataListStore(ROWS)
29 | }
30 | },
31 |
32 | _rowGetter(index){
33 | return this.state.dataList.getObjectAt(index);
34 | },
35 |
36 | render() {
37 | return (
38 |
47 |
50 |
56 |
62 |
63 |
64 |
70 |
76 |
77 |
78 | );
79 | }
80 | });
81 |
82 | module.exports = ColumnGroupsExample;
83 |
--------------------------------------------------------------------------------
/examples/old/FlexGrowExample.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This file provided by Facebook is for non-commercial testing and evaluation
3 | * purposes only. Facebook reserves all rights not expressly granted.
4 | *
5 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
6 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
7 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
8 | * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
9 | * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
10 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
11 | */
12 |
13 | "use strict";
14 |
15 | var FakeObjectDataListStore = require('../helpers/FakeObjectDataListStore');
16 | var FixedDataTable = require('fixed-data-table');
17 | var React = require('react');
18 |
19 | var Column = FixedDataTable.Column;
20 | var Table = FixedDataTable.Table;
21 |
22 | var ROWS = 1000000;
23 |
24 | function colorizeText(/*string*/ str, key, data, index) {
25 | var val, n = 0;
26 | return str.split('').map((letter) => {
27 | val = index * 70 + n++;
28 | var color = 'hsl(' + val + ', 100%, 50%)';
29 | return {letter};
30 | });
31 | }
32 |
33 | var FlexGrowExample = React.createClass({
34 | getInitialState() {
35 | return {
36 | dataList: new FakeObjectDataListStore(ROWS)
37 | };
38 | },
39 |
40 | _rowGetter(index) {
41 | return this.state.dataList.getObjectAt(index);
42 | },
43 |
44 | render() {
45 | return (
46 |
54 |
60 |
67 |
73 |
78 |
79 | );
80 | }
81 | });
82 |
83 | module.exports = FlexGrowExample;
84 |
--------------------------------------------------------------------------------
/dist/fixed-data-table-style.min.css:
--------------------------------------------------------------------------------
1 | /**
2 | * FixedDataTable v0.6.0
3 | *
4 | * Copyright (c) 2015, Facebook, Inc.
5 | * All rights reserved.
6 | *
7 | * This source code is licensed under the BSD-style license found in the
8 | * LICENSE file in the root directory of this source tree. An additional grant
9 | * of patent rights can be found in the PATENTS file in the same directory.
10 | */
11 |
12 | .public_Scrollbar_main.public_Scrollbar_mainActive,.public_Scrollbar_main:hover{background-color:rgba(255,255,255,.8)}.public_Scrollbar_mainOpaque,.public_Scrollbar_mainOpaque.public_Scrollbar_mainActive,.public_Scrollbar_mainOpaque:hover{background-color:#fff}.public_Scrollbar_face:after{background-color:#c2c2c2}.public_Scrollbar_main:hover .public_Scrollbar_face:after,.public_Scrollbar_mainActive .public_Scrollbar_face:after,.public_Scrollbar_faceActive:after{background-color:#7d7d7d}.public_fixedDataTable_main,.public_fixedDataTable_header,.public_fixedDataTable_hasBottomBorder{border-color:#d3d3d3}.public_fixedDataTable_header .public_fixedDataTableCell_main{font-weight:700}.public_fixedDataTable_header,.public_fixedDataTable_header .public_fixedDataTableCell_main{background-color:#f6f7f8;background-image:-webkit-linear-gradient(#fff,#efefef);background-image:linear-gradient(#fff,#efefef)}.public_fixedDataTable_footer .public_fixedDataTableCell_main{background-color:#f6f7f8;border-color:#d3d3d3}.public_fixedDataTable_topShadow{background:0 0 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAF0lEQVR4AWPUkNeSBhHCjJoK2twgFisAFagCCp3pJlAAAAAASUVORK5CYII=) repeat-x}.public_fixedDataTable_bottomShadow{background:0 0 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAHElEQVQI12MwNjZmZdAT1+Nm0JDWEGZQk1GTBgAWkwIeAEp52AAAAABJRU5ErkJggg==) repeat-x}.public_fixedDataTable_horizontalScrollbar .public_Scrollbar_mainHorizontal{background-color:#fff}.public_fixedDataTableCell_main{background-color:#fff;border-color:#d3d3d3}.public_fixedDataTableCell_highlighted{background-color:#f4f4f4}.public_fixedDataTableCell_cellContent{padding:8px}.public_fixedDataTableCell_columnResizerKnob{background-color:#0284ff}.public_fixedDataTableColumnResizerLine_main{border-color:#0284ff}.public_fixedDataTableRow_main{background-color:#fff}.public_fixedDataTableRow_highlighted,.public_fixedDataTableRow_highlighted .public_fixedDataTableCell_main{background-color:#f6f7f8}.public_fixedDataTableRow_fixedColumnsDivider{border-color:#d3d3d3}.public_fixedDataTableRow_columnsShadow{background:0 0 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQIHWPSkNeSBmJhTQVtbiDNCgASagIIuJX8OgAAAABJRU5ErkJggg==) repeat-y}
--------------------------------------------------------------------------------
/site/examples/TouchExampleWrapper.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This file provided by Facebook is for non-commercial testing and evaluation
3 | * purposes only. Facebook reserves all rights not expressly granted.
4 | *
5 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
6 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
7 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
8 | * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
9 | * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
10 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
11 | */
12 |
13 | "use strict";
14 |
15 | var React = require('react');
16 | var ZyngaScroller = require('../ZyngaScroller');
17 | var TouchableArea = require('./TouchableArea');
18 |
19 | var PropTypes = React.PropTypes;
20 |
21 | function isTouchDevice() {
22 | return 'ontouchstart' in document.documentElement // works on most browsers
23 | || 'onmsgesturechange' in window; // works on ie10
24 | };
25 |
26 | var ExampleTouchWrapper = React.createClass({
27 | propTypes: {
28 | tableWidth: PropTypes.number.isRequired,
29 | tableHeight: PropTypes.number.isRequired,
30 | },
31 |
32 | getInitialState() {
33 | return {
34 | left: 0,
35 | top: 0,
36 | contentHeight: 0,
37 | contentWidth: 0,
38 | };
39 | },
40 |
41 | componentWillMount() {
42 | this.scroller = new ZyngaScroller(this._handleScroll);
43 | },
44 |
45 | render() {
46 | if (!isTouchDevice()) {
47 | return React.cloneElement(this.props.children, {
48 | height: this.props.tableHeight,
49 | width: this.props.tableWidth,
50 | });
51 | }
52 |
53 | var example = React.cloneElement(this.props.children, {
54 | onContentHeightChange: this._onContentHeightChange,
55 | scrollLeft: this.state.left,
56 | scrollTop: this.state.top,
57 | height: this.props.tableHeight,
58 | width: this.props.tableWidth,
59 | overflowX: 'hidden',
60 | overflowY: 'hidden',
61 | });
62 |
63 | return (
64 |
65 | {example}
66 |
67 | );
68 | },
69 |
70 | _onContentHeightChange(contentHeight) {
71 | this.scroller.setDimensions(
72 | this.props.tableWidth,
73 | this.props.tableHeight,
74 | Math.max(600, this.props.tableWidth),
75 | contentHeight
76 | );
77 | },
78 |
79 | _handleScroll(left, top) {
80 | this.setState({
81 | left: left,
82 | top: top
83 | });
84 | }
85 | });
86 |
87 | module.exports = ExampleTouchWrapper;
88 |
--------------------------------------------------------------------------------
/src/vendor_upstream/stubs/EventListener.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | *
9 | * @providesModule EventListener
10 | * @typechecks
11 | */
12 |
13 | var emptyFunction = require('emptyFunction');
14 |
15 | /**
16 | * Upstream version of event listener. Does not take into account specific
17 | * nature of platform.
18 | */
19 | var EventListener = {
20 | /**
21 | * Listen to DOM events during the bubble phase.
22 | *
23 | * @param {DOMEventTarget} target DOM element to register listener on.
24 | * @param {string} eventType Event type, e.g. 'click' or 'mouseover'.
25 | * @param {function} callback Callback function.
26 | * @return {object} Object with a `remove` method.
27 | */
28 | listen: function(target, eventType, callback) {
29 | if (target.addEventListener) {
30 | target.addEventListener(eventType, callback, false);
31 | return {
32 | remove: function() {
33 | target.removeEventListener(eventType, callback, false);
34 | }
35 | };
36 | } else if (target.attachEvent) {
37 | target.attachEvent('on' + eventType, callback);
38 | return {
39 | remove: function() {
40 | target.detachEvent('on' + eventType, callback);
41 | }
42 | };
43 | }
44 | },
45 |
46 | /**
47 | * Listen to DOM events during the capture phase.
48 | *
49 | * @param {DOMEventTarget} target DOM element to register listener on.
50 | * @param {string} eventType Event type, e.g. 'click' or 'mouseover'.
51 | * @param {function} callback Callback function.
52 | * @return {object} Object with a `remove` method.
53 | */
54 | capture: function(target, eventType, callback) {
55 | if (target.addEventListener) {
56 | target.addEventListener(eventType, callback, true);
57 | return {
58 | remove: function () {
59 | target.removeEventListener(eventType, callback, true);
60 | }
61 | };
62 | } else {
63 | if (__DEV__) {
64 | console.error(
65 | 'Attempted to listen to events during the capture phase on a ' +
66 | 'browser that does not support the capture phase. Your application ' +
67 | 'will not receive some events.'
68 | );
69 | }
70 | return {
71 | remove: emptyFunction
72 | };
73 | }
74 | },
75 |
76 | registerDefault: function() {}
77 | };
78 |
79 | module.exports = EventListener;
80 |
--------------------------------------------------------------------------------
/site/base.less:
--------------------------------------------------------------------------------
1 | @import 'variables.less';
2 |
3 | html, body {
4 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
5 | -webkit-text-size-adjust: 100%;
6 | -ms-text-size-adjust: 100%;
7 | margin: 0;
8 | padding: 0;
9 | -webkit-font-smoothing: antialiased;
10 | color: @body-color;
11 | font-family: 'Fira Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
12 | font-size: 16px;
13 | line-height: 1.625;
14 | }
15 |
16 | @media only screen and (max-width: 680px) {
17 | body {
18 | font-size: 14px;
19 | }
20 | }
21 |
22 | h1, h2, h3, h4, h5, h6 {
23 | color: @header-color;
24 | }
25 |
26 | a {
27 | color: @link-color;
28 | text-decoration: none;
29 | cursor: pointer;
30 | }
31 |
32 | pre, code {
33 | font-family: 'Fira Mono', Menlo, monospace;
34 | background: #F9F8F7;
35 | color: #484A4C;
36 | font-size: 0.9375em;
37 | letter-spacing: -0.015em;
38 | }
39 |
40 | code {
41 | margin: -0.05rem -0.15em;
42 | padding: 0.05rem 0.35em;
43 | }
44 |
45 | blockquote {
46 | margin: 1rem 0;
47 | padding: 0 1rem;
48 | color: #727476;
49 | border-left: solid 3px #DCDAD9;
50 | }
51 |
52 | blockquote > :first-child {
53 | margin-top: 0;
54 | }
55 |
56 | blockquote > :last-child {
57 | margin-bottom: 0;
58 | }
59 |
60 |
61 | // Markdown
62 |
63 | .codeBlock {
64 | -webkit-overflow-scrolling: touch;
65 | background: #FCFBFA;
66 | border-left: solid 3px #ECEAE9;
67 | box-sizing: border-box;
68 | display: block;
69 | font-size: 0.875em;
70 | margin: 0.5rem 0;
71 | overflow-y: scroll;
72 | padding: 0.5rem 8px 0.5rem 12px;
73 | white-space: pre;
74 | }
75 |
76 | .t.blockParams {
77 | padding-left: 2ch;
78 | }
79 |
80 | // TODO: not random colors
81 |
82 | .token.punctuation,
83 | .token.ignore,
84 | .t.interfaceDef,
85 | .t.member,
86 | .t.callSig {
87 | color: #808890;
88 | }
89 |
90 | .token.function,
91 | .token.class-name,
92 | .token.qualifier,
93 | .t.fnQualifier,
94 | .t.fnName {
95 | color: #32308E;
96 | }
97 |
98 | .token.primitive,
99 | .t.primitive {
100 | color: #922;
101 | }
102 |
103 | .token.number,
104 | .t.typeParam {
105 | color: #905;
106 | }
107 |
108 | .t.typeQualifier,
109 | .t.typeName {
110 | color: #013679;
111 | }
112 |
113 | .t.param {
114 | color: #945277;
115 | }
116 |
117 | .t.memberName {
118 | color: teal;
119 | }
120 |
121 | .token.block-keyword,
122 | .token.keyword,
123 | .t.keyword {
124 | color: #A51;
125 | }
126 |
127 | .token.string,
128 | .token.regex {
129 | color: #df5050;
130 | }
131 |
132 | .token.operator {
133 | color: #a67f59;
134 | }
135 |
136 | .token.comment {
137 | color: #998;
138 | font-style: italic;
139 | }
140 |
--------------------------------------------------------------------------------
/examples/ColumnGroupsExample.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This file provided by Facebook is for non-commercial testing and evaluation
3 | * purposes only. Facebook reserves all rights not expressly granted.
4 | *
5 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
6 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
7 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
8 | * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
9 | * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
10 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
11 | */
12 |
13 | "use strict";
14 |
15 | var ExampleImage = require('./helpers/ExampleImage');
16 | var FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
17 | var FixedDataTable = require('fixed-data-table');
18 | var React = require('react');
19 |
20 | const {Table, Column, ColumnGroup, Cell} = FixedDataTable;
21 |
22 | const TextCell = ({rowIndex, data, col, ...props}) => (
23 |
24 | {data.getObjectAt(rowIndex)[col]}
25 |
26 | );
27 |
28 | class ColumnGroupsExample extends React.Component {
29 | constructor(props) {
30 | super(props);
31 |
32 | this.state = {
33 | dataList: new FakeObjectDataListStore(1000000),
34 | };
35 | }
36 |
37 | render() {
38 | var {dataList} = this.state;
39 |
40 | return (
41 |
97 | );
98 | }
99 | }
100 |
101 | module.exports = ResizeExample;
102 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Fixed Data Tables for React
2 | ====================================
3 |
4 | FixedDataTable is a React component for building and presenting data in a flexible, powerful way. It supports standard table features, like headers, columns, rows, header groupings, and both fixed-position and scrolling columns.
5 |
6 | The table was designed to handle thousands of rows of data without sacrificing performance. Scrolling smoothly is a first-class goal of FixedDataTable and it's architected in a way to allow for flexibility and extensibility.
7 |
8 | Features of FixedDataTable:
9 | * Fixed headers and footer
10 | * Both fixed and scrollable columns
11 | * Handling huge amounts of data
12 | * Variable row heights (with adaptive scroll positions)
13 | * Column resizing
14 | * Performant scrolling
15 | * Customizable styling
16 | * Jumping to a row or column
17 | * Controlled scroll API allows touch support
18 |
19 | Things the FixedDataTable **doesn't** do:
20 | * FixedDataTable does not provide a layout reflow mechanism or calculate content layout information such as width and height of the cell contents. The developer has to provide the layout information to the table instead.
21 | * FixedDataTable does not handle sorting of data. Instead it allows the developer to supply data getters that can be sort-, filter-, or tail-loading-aware.
22 | * FixedDataTable does not fetch the data (see above)
23 |
24 | Getting started
25 | ---------------
26 |
27 | Install `fixed-data-table` using npm.
28 |
29 | ```shell
30 | npm install fixed-data-table
31 | ```
32 | Add the default stylesheet `dist/fixed-data-table.css`, then import it into any module.
33 |
34 | ### Basic Example
35 |
36 | ```javascript
37 | import React from 'react';
38 | import ReactDOM from 'react-dom';
39 | import {Table, Column, Cell} from 'fixed-data-table';
40 |
41 | // Table data as a list of array.
42 | const rows = [
43 | ['a1', 'b1', 'c1'],
44 | ['a2', 'b2', 'c2'],
45 | ['a3', 'b3', 'c3'],
46 | // .... and more
47 | ];
48 |
49 | // Render your table
50 | ReactDOM.render(
51 |
,
77 | document.getElementById('example')
78 | );
79 | ```
80 |
81 | Contributions
82 | ------------
83 |
84 | Use [GitHub issues](https://github.com/facebook/fixed-data-table/issues) for requests.
85 |
86 | We actively welcome pull requests; learn how to [contribute](https://github.com/facebook/fixed-data-table/blob/master/CONTRIBUTING.md).
87 |
88 |
89 | Changelog
90 | ---------
91 |
92 | Changes are tracked as [GitHub releases](https://github.com/facebook/fixed-data-table/releases).
93 |
94 |
95 | License
96 | -------
97 |
98 | `FixedDataTable` is [BSD-licensed](https://github.com/facebook/fixed-data-table/blob/master/LICENSE). We also provide an additional [patent grant](https://github.com/facebook/fixed-data-table/blob/master/PATENTS).
99 |
--------------------------------------------------------------------------------
/src/vendor_upstream/dom/ReactWheelHandler.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | *
9 | * This is utility that hanlds onWheel events and calls provided wheel
10 | * callback with correct frame rate.
11 | *
12 | * @providesModule ReactWheelHandler
13 | * @typechecks
14 | */
15 |
16 | 'use strict';
17 |
18 | var emptyFunction = require('emptyFunction');
19 | var normalizeWheel = require('normalizeWheel');
20 | var requestAnimationFramePolyfill = require('requestAnimationFramePolyfill');
21 |
22 | class ReactWheelHandler {
23 | /**
24 | * onWheel is the callback that will be called with right frame rate if
25 | * any wheel events happened
26 | * onWheel should is to be called with two arguments: deltaX and deltaY in
27 | * this order
28 | */
29 | constructor(
30 | /*function*/ onWheel,
31 | /*boolean|function*/ handleScrollX,
32 | /*boolean|function*/ handleScrollY,
33 | /*?boolean|?function*/ stopPropagation
34 | ) {
35 | this._animationFrameID = null;
36 | this._deltaX = 0;
37 | this._deltaY = 0;
38 | this._didWheel = this._didWheel.bind(this);
39 | if (typeof handleScrollX !== 'function') {
40 | handleScrollX = handleScrollX ?
41 | emptyFunction.thatReturnsTrue :
42 | emptyFunction.thatReturnsFalse;
43 | }
44 |
45 | if (typeof handleScrollY !== 'function') {
46 | handleScrollY = handleScrollY ?
47 | emptyFunction.thatReturnsTrue :
48 | emptyFunction.thatReturnsFalse;
49 | }
50 |
51 | if (typeof stopPropagation !== 'function') {
52 | stopPropagation = stopPropagation ?
53 | emptyFunction.thatReturnsTrue :
54 | emptyFunction.thatReturnsFalse;
55 | }
56 |
57 | this._handleScrollX = handleScrollX;
58 | this._handleScrollY = handleScrollY;
59 | this._stopPropagation = stopPropagation;
60 | this._onWheelCallback = onWheel;
61 | this.onWheel = this.onWheel.bind(this);
62 | }
63 |
64 | onWheel(/*object*/ event) {
65 | var normalizedEvent = normalizeWheel(event);
66 | var deltaX = this._deltaX + normalizedEvent.pixelX;
67 | var deltaY = this._deltaY + normalizedEvent.pixelY;
68 | var handleScrollX = this._handleScrollX(deltaX, deltaY);
69 | var handleScrollY = this._handleScrollY(deltaY, deltaX);
70 | if (!handleScrollX && !handleScrollY) {
71 | return;
72 | }
73 |
74 | this._deltaX += handleScrollX ? normalizedEvent.pixelX : 0;
75 | this._deltaY += handleScrollY ? normalizedEvent.pixelY : 0;
76 | event.preventDefault();
77 |
78 | var changed;
79 | if (this._deltaX !== 0 || this._deltaY !== 0) {
80 | if (this._stopPropagation()) {
81 | event.stopPropagation();
82 | }
83 | changed = true;
84 | }
85 |
86 | if (changed === true && this._animationFrameID === null) {
87 | this._animationFrameID = requestAnimationFramePolyfill(this._didWheel);
88 | }
89 | }
90 |
91 | _didWheel() {
92 | this._animationFrameID = null;
93 | this._onWheelCallback(this._deltaX, this._deltaY);
94 | this._deltaX = 0;
95 | this._deltaY = 0;
96 | }
97 | }
98 |
99 | module.exports = ReactWheelHandler;
100 |
--------------------------------------------------------------------------------
/examples/old/FilterExample.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This file provided by Facebook is for non-commercial testing and evaluation
3 | * purposes only. Facebook reserves all rights not expressly granted.
4 | *
5 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
6 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
7 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
8 | * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
9 | * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
10 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
11 | */
12 |
13 | "use strict";
14 |
15 | var ExampleImage = require('../helpers/ExampleImage');
16 | var FakeObjectDataListStore = require('../helpers/FakeObjectDataListStore');
17 | var FixedDataTable = require('fixed-data-table');
18 | var React = require('react');
19 |
20 | var Column = FixedDataTable.Column;
21 | var Table = FixedDataTable.Table;
22 |
23 | var ROWS = 1000000;
24 |
25 | function renderImage(/*string*/ cellData) {
26 | return ;
27 | }
28 |
29 | var FilterExample = React.createClass({
30 | getInitialState() {
31 | return {
32 | rows : new FakeObjectDataListStore().getAll(),
33 | filteredRows: null,
34 | filterBy: null
35 | };
36 | },
37 |
38 | componentWillMount() {
39 | this._filterRowsBy(this.state.filterBy);
40 | },
41 |
42 | _filterRowsBy(filterBy) {
43 | var rows = this.state.rows.slice();
44 | var filteredRows = filterBy ? rows.filter(function(row){
45 | return row['firstName'].toLowerCase().indexOf(filterBy.toLowerCase()) >= 0
46 | }) : rows;
47 |
48 | this.setState({
49 | filteredRows,
50 | filterBy,
51 | });
52 | },
53 |
54 | _rowGetter(rowIndex) {
55 | return this.state.filteredRows[rowIndex];
56 | },
57 |
58 | _onFilterChange(e) {
59 | this._filterRowsBy(e.target.value);
60 | },
61 |
62 | render() {
63 | return (
64 |
65 |
66 |
67 |
75 |
82 |
88 |
94 |
99 |
104 |
109 |
110 |
111 | );
112 | },
113 | });
114 |
115 | module.exports = FilterExample;
116 |
--------------------------------------------------------------------------------
/src/FixedDataTableHelper.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | *
9 | * @providesModule FixedDataTableHelper
10 | * @typechecks
11 | */
12 |
13 | 'use strict';
14 |
15 | var Locale = require('Locale');
16 | var React = require('React');
17 | var FixedDataTableColumnGroup = require('FixedDataTableColumnGroup.react');
18 | var FixedDataTableColumn = require('FixedDataTableColumn.react');
19 |
20 | var DIR_SIGN = (Locale.isRTL() ? -1 : +1);
21 | // A cell up to 5px outside of the visible area will still be considered visible
22 | var CELL_VISIBILITY_TOLERANCE = 5; // used for flyouts
23 |
24 | function renderToString(value) /*string*/ {
25 | if (value === null || value === undefined) {
26 | return '';
27 | } else {
28 | return String(value);
29 | }
30 | }
31 |
32 | /**
33 | * Helper method to execute a callback against all columns given the children
34 | * of a table.
35 | * @param {?object|array} children
36 | * Children of a table.
37 | * @param {function} callback
38 | * Function to excecute for each column. It is passed the column.
39 | */
40 | function forEachColumn(children, callback) {
41 | React.Children.forEach(children, (child) => {
42 | if (child.type === FixedDataTableColumnGroup) {
43 | forEachColumn(child.props.children, callback);
44 | } else if (child.type === FixedDataTableColumn) {
45 | callback(child);
46 | }
47 | });
48 | }
49 |
50 | /**
51 | * Helper method to map columns to new columns. This takes into account column
52 | * groups and will generate a new column group if its columns change.
53 | * @param {?object|array} children
54 | * Children of a table.
55 | * @param {function} callback
56 | * Function to excecute for each column. It is passed the column and should
57 | * return a result column.
58 | */
59 | function mapColumns(children, callback) {
60 | var newChildren = [];
61 | React.Children.forEach(children, originalChild => {
62 | var newChild = originalChild;
63 |
64 | // The child is either a column group or a column. If it is a column group
65 | // we need to iterate over its columns and then potentially generate a
66 | // new column group
67 | if (originalChild.type === FixedDataTableColumnGroup) {
68 | var haveColumnsChanged = false;
69 | var newColumns = [];
70 |
71 | forEachColumn(originalChild.props.children, originalcolumn => {
72 | var newColumn = callback(originalcolumn);
73 | if (newColumn !== originalcolumn) {
74 | haveColumnsChanged = true;
75 | }
76 | newColumns.push(newColumn);
77 | });
78 |
79 | // If the column groups columns have changed clone the group and supply
80 | // new children
81 | if (haveColumnsChanged) {
82 | newChild = React.cloneElement(originalChild, {
83 | children: newColumns,
84 | });
85 | }
86 | } else if (originalChild.type === FixedDataTableColumn) {
87 | newChild = callback(originalChild);
88 | }
89 |
90 | newChildren.push(newChild);
91 | });
92 |
93 | return newChildren;
94 | }
95 |
96 | var FixedDataTableHelper = {
97 | DIR_SIGN,
98 | CELL_VISIBILITY_TOLERANCE,
99 | renderToString,
100 | forEachColumn,
101 | mapColumns,
102 | };
103 |
104 | module.exports = FixedDataTableHelper;
105 |
--------------------------------------------------------------------------------
/examples/ObjectDataExample.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This file provided by Facebook is for non-commercial testing and evaluation
3 | * purposes only. Facebook reserves all rights not expressly granted.
4 | *
5 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
6 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
7 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
8 | * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
9 | * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
10 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
11 | */
12 |
13 | "use strict";
14 |
15 | var ExampleImage = require('./helpers/ExampleImage');
16 | var FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
17 | var FixedDataTable = require('fixed-data-table');
18 | var React = require('react');
19 |
20 | const {Table, Column, Cell} = FixedDataTable;
21 |
22 | const DateCell = ({rowIndex, data, col, ...props}) => (
23 |
24 | {data.getObjectAt(rowIndex)[col].toLocaleString()}
25 |
26 | );
27 |
28 | const ImageCell = ({rowIndex, data, col, ...props}) => (
29 |
32 | );
33 |
34 | const LinkCell = ({rowIndex, data, col, ...props}) => (
35 |
36 | {data.getObjectAt(rowIndex)[col]}
37 |
38 | );
39 |
40 | const TextCell = ({rowIndex, data, col, ...props}) => (
41 |
42 | {data.getObjectAt(rowIndex)[col]}
43 |
44 | );
45 |
46 | class ObjectDataExample extends React.Component {
47 | constructor(props) {
48 | super(props);
49 |
50 | this.state = {
51 | dataList: new FakeObjectDataListStore(1000000),
52 | };
53 | }
54 |
55 | render() {
56 | var {dataList} = this.state;
57 | return (
58 |