diff --git a/.babelrc.js b/.babelrc.js index 57c6b2aa4..75c4651d4 100644 --- a/.babelrc.js +++ b/.babelrc.js @@ -12,44 +12,65 @@ if (env === 'commonjs' || env === 'es') { 'source/TestUtils.js', ], plugins: [ - 'transform-runtime', + '@babel/plugin-transform-runtime', + '@babel/plugin-proposal-class-properties', + '@babel/plugin-transform-flow-comments', ['flow-react-proptypes', {deadCode: true, useESModules: true}], ['transform-react-remove-prop-types', {mode: 'wrap'}], ], - presets: [['env', {modules: false}], 'react', 'flow', 'stage-2'], + presets: [ + ['@babel/preset-env', {modules: false}], + '@babel/preset-react', + '@babel/preset-flow', + ], }; if (env === 'commonjs') { - module.exports.plugins.push('transform-es2015-modules-commonjs'); + module.exports.plugins.push('@babel/plugin-transform-modules-commonjs'); } } if (env === 'rollup') { module.exports = { comments: false, - plugins: ['external-helpers'], - presets: [['env', {modules: false}], 'react', 'flow', 'stage-2'], + plugins: [ + '@babel/plugin-external-helpers', + '@babel/plugin-proposal-class-properties', + ], + presets: [ + ['@babel/preset-env', {modules: false}], + '@babel/preset-react', + '@babel/preset-flow', + ], }; } if (env === 'development') { module.exports = { - presets: ['react', 'flow', 'stage-2'], + plugins: ['@babel/plugin-proposal-class-properties'], + presets: ['@babel/preset-react', '@babel/preset-flow'], }; } if (env === 'production') { module.exports = { comments: false, - plugins: ['transform-runtime'], - presets: ['env', 'react', 'flow', 'stage-2'], + plugins: [ + '@babel/plugin-transform-runtime', + '@babel/plugin-proposal-class-properties', + ], + presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow'], }; } if (env === 'test') { module.exports = { comments: false, - plugins: ['transform-es2015-modules-commonjs'], - presets: ['react', 'flow', 'stage-2'], + + plugins: [ + '@babel/plugin-transform-modules-commonjs', + '@babel/plugin-proposal-class-properties', + ], + presets: ['@babel/preset-react', '@babel/preset-flow'], }; } diff --git a/.circleci/config.yml b/.circleci/config.yml index 9346df667..af3d0ca18 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -1,56 +1,119 @@ -version: 2 +version: 2.1 + +defaults: &defaults + working_directory: ~/repo + docker: + - image: circleci/node:10.16.3-stretch-browsers + jobs: - build: - docker: - - image: circleci/node:latest + dependencies: + <<: *defaults steps: - checkout - restore_cache: - keys: - - dependencies-{{ checksum "yarn.lock" }} - # fallback to using the latest cache if no exact match is found - - dependencies- + key: npm-cache-{{ checksum "yarn.lock" }} - run: - name: Install - command: yarn install + name: Install NPM Dependencies + command: yarn --frozen-lockfile - save_cache: + key: npm-cache-{{ checksum "yarn.lock" }} paths: - - node_modules - key: dependencies-{{ checksum "yarn.lock" }} + - ~/repo/node_modules + + lint: + <<: *defaults + steps: + - checkout + - restore_cache: + key: npm-cache-{{ checksum "yarn.lock" }} + - run: + name: ESLint Code Analysis + command: yarn lint + + typecheck: + <<: *defaults + steps: + - checkout + - restore_cache: + key: npm-cache-{{ checksum "yarn.lock" }} - run: - name: Check Prettier, ESLint, Flow - command: yarn ci-check + name: Typechecking with flow + command: yarn typecheck + test: - docker: - - image: circleci/node:8.9.1-stretch-browsers + <<: *defaults steps: - checkout + - attach_workspace: + at: ~/repo - restore_cache: - keys: - - dependencies-{{ checksum "yarn.lock" }} - # fallback to using the latest cache if no exact match is found - - dependencies- + key: npm-cache-{{ checksum "yarn.lock" }} - run: - name: Install - command: yarn install - - save_cache: - paths: - - node_modules - key: dependencies-{{ checksum "yarn.lock" }} + name: Run tests + command: yarn test + + coverage: + <<: *defaults + steps: + - checkout + - attach_workspace: + at: ~/repo + - restore_cache: + key: npm-cache-{{ checksum "yarn.lock" }} + - run: + name: Run tests and upload coverage results + command: yarn test:coverage + + prettier: + <<: *defaults + steps: + - checkout + - restore_cache: + key: npm-cache-{{ checksum "yarn.lock" }} + - run: + name: Check prettier diff + command: yarn prettier:diff + + build: + <<: *defaults + steps: + - checkout + - restore_cache: + key: npm-cache-{{ checksum "yarn.lock" }} - run: - name: Test - command: yarn test:ci - - store_artifacts: - path: coverage - prefix: coverage + name: Build all distributions formats + command: yarn build + - persist_to_workspace: + root: . + paths: + - dist + workflows: version: 2 build_and_test: jobs: - - build + - dependencies + - lint: + requires: + - dependencies + - typecheck: + requires: + - dependencies + - prettier: + requires: + - dependencies + - build: + requires: + - dependencies - test: requires: - build filters: branches: ignore: gh-pages + - coverage: + requires: + - build + filters: + branches: + ignore: gh-pages diff --git a/.eslintrc b/.eslintrc index bf26fb178..ad28271c9 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,13 +1,7 @@ { "parser": "babel-eslint", - "plugins": [ - "react" - ], - "extends": [ - "fbjs", - "eslint:recommended", - "plugin:prettier/recommended" - ], + "plugins": ["react"], + "extends": ["fbjs", "eslint:recommended", "plugin:prettier/recommended"], "rules": { "no-console": 0 } diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE/bug-report.md similarity index 55% rename from .github/ISSUE_TEMPLATE.md rename to .github/ISSUE_TEMPLATE/bug-report.md index e57ecc993..85ef34482 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE/bug-report.md @@ -1,20 +1,9 @@ -## Asking a Question? +--- +name: Bug Report +about: Bugs, missing documentation, or unexpected behavior πŸ€”. +--- -Please don't file GitHub issues to ask questions! Instead use: -* Stack Overflow: http://stackoverflow.com/questions/tagged/react-virtualized -* The react-virtualized Slack channel: https://react-virtualized.now.sh - -### Do you want to request a *feature* or report a *bug*? - -Requesting a feature? - -Provide as much information as possible about your requested feature. Here are a few questions you may consider answering: - -* What's your use case? (Tell me about your application and what problem you're trying to solve.) -* What interface do you have in mind? (What new properties or methods do you think might be helpful?) -* Can you point to similar functionality with any existing libraries or components? (Working demos can be helpful.) - -Reporting a Bug? +## Bug Report Please include either a failing unit test or a simple repro. You can start by forking this Code Sandbox: https://codesandbox.io/s/03qpzq1p9p?module=%2FExample.js diff --git a/.github/ISSUE_TEMPLATE/feature-request.md b/.github/ISSUE_TEMPLATE/feature-request.md new file mode 100644 index 000000000..6eb38d03c --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature-request.md @@ -0,0 +1,12 @@ +--- +name: Feature request +about: Ideas and suggestions +--- + +## Feature Request + +Provide as much information as possible about your requested feature. Here are a few questions you may consider answering: + +* What's your use case? (Tell me about your application and what problem you're trying to solve.) +* What interface do you have in mind? (What new properties or methods do you think might be helpful?) +* Can you point to similar functionality with any existing libraries or components? (Working demos can be helpful.) diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md new file mode 100644 index 000000000..fc40bcfe5 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/question.md @@ -0,0 +1,9 @@ +--- +name: Questions +about: Questions about react-virtualized +--- + +## Asking a Question? + +Please don't file GitHub issues to ask questions! Instead use: +* Stack Overflow: http://stackoverflow.com/questions/tagged/react-virtualized diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 56c75aef1..798e73834 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -6,9 +6,10 @@ Thanks for contributing to react-virtualized! - [ ] For any new features or bug fixes, both positive and negative test cases have been added - [ ] For any new features, documentation has been added - [ ] For any documentation changes, the text has been proofread and is clear to both experienced users and beginners. -- [ ] Format your code with [prettier](https://github.com/prettier/prettier) (`npm run prettier`). -- [ ] Run the [Flow](https://flowtype.org/) typechecks (`npm run typecheck`). +- [ ] Format your code with [prettier](https://github.com/prettier/prettier) (`yarn run prettier`). +- [ ] Run the [Flow](https://flowtype.org/) typechecks (`yarn run typecheck`). Here is a short checklist of additional things to keep in mind before submitting: -* Please make sure your pull request description makes it very clear what you're trying to accomplish. If it's a bug fix, please also provide a failing test case (if possible). In either case, please add additional unit test coverage for your changes. :) -* Be sure you have notifications setup so that you'll see my code review responses. (I may ask you to make some adjustments before merging.) + +- Please make sure your pull request description makes it very clear what you're trying to accomplish. If it's a bug fix, please also provide a failing test case (if possible). In either case, please add additional unit test coverage for your changes. :) +- Be sure you have notifications setup so that you'll see my code review responses. (I may ask you to make some adjustments before merging.) diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml new file mode 100644 index 000000000..880e5ddc3 --- /dev/null +++ b/.github/workflows/stale.yml @@ -0,0 +1,15 @@ +name: Close stale issues and PRs +on: + schedule: + - cron: '0 8 * * *' + +jobs: + stale: + runs-on: ubuntu-latest + steps: + - uses: actions/stale@v9.0.0 + with: + days-before-stale: 28 + days-before-close: 0 + exempt-issue-labels: do-not-close + exempt-pr-labels: do-not-close diff --git a/.nvmrc b/.nvmrc index 33edba2d0..70047db82 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v8.4.0 +v10.16.3 diff --git a/.prettierrc b/.prettierrc index eb91e6abb..fb944c939 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,7 +1,6 @@ { "bracketSpacing": false, "jsxBracketSameLine": true, - "parser": "flow", "printWidth": 80, "singleQuote": true, "trailingComma": "all" diff --git a/CHANGELOG.md b/CHANGELOG.md index 172586c13..082c3cc12 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,67 +1,116 @@ -Changelog ------------- +## Changelog + +##### NEXT + +- Update peer dependencies to allow React 17 ([levenleven](https://github.com/levenleven) - [#1625](https://github.com/bvaughn/react-virtualized/pull/1625)) +- Use DOM API instead of creating Trusted Types policy to append a markup ([shhnjk](https://github.com/shhnjk) - [#1627](https://github.com/bvaughn/react-virtualized/pull/1627)) +- Fix bug in WindowScroller::updatePosition ([yamadapc](https://github.com/yamadapc) - [#1642](https://github.com/bvaughn/react-virtualized/pull/1642), [#1648](https://github.com/bvaughn/react-virtualized/pull/1648)) +- Fix babel tranform es error ([fupengl](https://github.com/fupengl) - [#1651](https://github.com/bvaughn/react-virtualized/pull/1651)) +- Fix issue with unused import being emitted ([mewhhaha](https://github.com/mewhhaha) - [#1635](https://github.com/bvaughn/react-virtualized/pull/1635)) +- Fix grid roles for accessbility ([asnewman](https://github.com/asnewman) - [#1624](https://github.com/bvaughn/react-virtualized/pull/1624)) + +##### 9.22.5 + +- React 19 support added; special thanks to ([artur-ptaszek-mck](https://github.com/artur-ptaszek-mck) and ([adubrouski](https://github.com/adubrouski) + +##### 9.22.4 + +- README changes + +##### 9.22.3 + +- Add Trusted Types support ([shhnjk](https://github.com/shhnjk) - [#1614](https://github.com/bvaughn/react-virtualized/pull/1614)) + +##### 9.22.2 + +- CollectionView scrollTop/scrollLeft ([dawnmist](https://github.com/dawnmist) - [#1260](https://github.com/bvaughn/react-virtualized/pull/1260)) + +##### 9.22.1 + +- Upgrade babel-plugin-flow-react-proptypes ([Hypnosphi](https://github.com/Hypnosphi) - [#1578](https://github.com/bvaughn/react-virtualized/pull/1578)) + +##### 9.22.0 + +- Make AutoSizer a Component ([vzaidman](https://github.com/vzaidman) - [#1490](https://github.com/bvaughn/react-virtualized/pull/1490)) +- Update masonry props and docs ([seanstrom](https://github.com/seanstrom) - [#1493](https://github.com/bvaughn/react-virtualized/pull/1493)) +- CellMeasurer: add registerChild render prop ([Hypnosphi](https://github.com/Hypnosphi) - [#1477](https://github.com/bvaughn/react-virtualized/pull/1477)) +- Fix Table class names in documentation ([jakemmarsh](https://github.com/jakemmarsh) - [#1471](https://github.com/bvaughn/react-virtualized/pull/1471)) +- Fix style.css import in demo ([Dominic0512](https://github.com/Dominic0512) - [#1466](https://github.com/bvaughn/react-virtualized/pull/1466)) + +##### 9.21.2 + +- πŸŽ‰ Update prettier ([wuweiweiwu](https://github.com/wuweiweiwu) - [#1455](https://github.com/bvaughn/react-virtualized/pull/1455)) +- πŸŽ‰ Remove slack from documentation ([wuweiweiwu](https://github.com/wuweiweiwu) - [#1417](https://github.com/bvaughn/react-virtualized/pull/1417)) +- πŸ› Fix masionry scroll handler target ([chinmay17](https://github.com/chinmay17) - [#1420](https://github.com/bvaughn/react-virtualized/pull/1420)) +- πŸŽ‰ AutoSizer support for multi window ([mbman](https://github.com/mbman) - [#1421](https://github.com/bvaughn/react-virtualized/pull/1421)) +- πŸŽ‰ Upgrade dom-helpers ([dominykas](https://github.com/dominykas) - [#1424](https://github.com/bvaughn/react-virtualized/pull/1424)) +- πŸŽ‰ Remove react-vtree from docs ([Lodin](https://github.com/Lodin) - [#1415](https://github.com/bvaughn/react-virtualized/pull/1415)) +- πŸ› Fix detection of chrome ([nifgraup](https://github.com/nifgraup) - [#1355](https://github.com/bvaughn/react-virtualized/pull/1355)) +- πŸ› Fix hostname issues for images ([nickstew](https://github.com/nickstew) - [#1401](https://github.com/bvaughn/react-virtualized/pull/1401)) +- πŸ› Fix aria attributes on Table ([eps1lon](https://github.com/eps1lon) - [#1380](https://github.com/bvaughn/react-virtualized/pull/1380)) + ##### 9.21.1 -* πŸ› Fix doc typos. ([tienpham94](https://github.com/tienpham94) - [#1268](https://github.com/bvaughn/react-virtualized/pull/1268)) -* πŸ› Fix typos in changelog. ([misacorn](https://github.com/misacorn) - [#1267](https://github.com/bvaughn/react-virtualized/pull/1267)) -* πŸ› Fix formatting in AutoSizer.md ([jacklee814](https://github.com/jacklee814) - [#1246](https://github.com/bvaughn/react-virtualized/pull/1246)) -* πŸ› Fix usage of reduce in InfiniteLoader ([jedwards1211](https://github.com/jedwards1211) - [#1277](https://github.com/bvaughn/react-virtualized/pull/1277)) -* πŸŽ‰ Migrate from classnames to clsx ([TrySound](https://github.com/TrySound) - [#1306](https://github.com/bvaughn/react-virtualized/pull/1306)) -* πŸ› Ensure a string title for header ([oakfang](https://github.com/oakfang) - [#1321](https://github.com/bvaughn/react-virtualized/pull/1321)) -* πŸŽ‰ Use sparse array for cell position caches ([trxcllnt](https://github.com/trxcllnt) - [#1312](https://github.com/bvaughn/react-virtualized/pull/1312)) -* πŸ› Fix scrollToPosition ([jaycrypto](https://github.com/jaycrypto) - [#1288](https://github.com/bvaughn/react-virtualized/pull/1288)) +- πŸ› Fix doc typos. ([tienpham94](https://github.com/tienpham94) - [#1268](https://github.com/bvaughn/react-virtualized/pull/1268)) +- πŸ› Fix typos in changelog. ([misacorn](https://github.com/misacorn) - [#1267](https://github.com/bvaughn/react-virtualized/pull/1267)) +- πŸ› Fix formatting in AutoSizer.md ([jacklee814](https://github.com/jacklee814) - [#1246](https://github.com/bvaughn/react-virtualized/pull/1246)) +- πŸ› Fix usage of reduce in InfiniteLoader ([jedwards1211](https://github.com/jedwards1211) - [#1277](https://github.com/bvaughn/react-virtualized/pull/1277)) +- πŸŽ‰ Migrate from classnames to clsx ([TrySound](https://github.com/TrySound) - [#1306](https://github.com/bvaughn/react-virtualized/pull/1306)) +- πŸ› Ensure a string title for header ([oakfang](https://github.com/oakfang) - [#1321](https://github.com/bvaughn/react-virtualized/pull/1321)) +- πŸŽ‰ Use sparse array for cell position caches ([trxcllnt](https://github.com/trxcllnt) - [#1312](https://github.com/bvaughn/react-virtualized/pull/1312)) +- πŸ› Fix scrollToPosition ([jaycrypto](https://github.com/jaycrypto) - [#1288](https://github.com/bvaughn/react-virtualized/pull/1288)) ##### 9.21.0 -* πŸŽ‰ Added new use case example for CellMeasurer. ([wuweiweiwu](https://github.com/wuweiweiwu) - [#1168](https://github.com/bvaughn/react-virtualized/pull/1168)) -* πŸŽ‰ Added react-timeline-9000 as a related library. ([vasdee](https://github.com/vasdee) - [#1197](https://github.com/bvaughn/react-virtualized/pull/1197)) -* πŸ› Fix CellMeasurer docs with correct import statement. ([skipjack](https://github.com/skipjack) - [#1187](https://github.com/bvaughn/react-virtualized/pull/1187)) -* πŸ› Fix broken Slack badge. ([slieshke](https://github.com/slieshke) - [#1205](https://github.com/bvaughn/react-virtualized/pull/1205)) -* πŸ› Fix type in CellMeasurer example. ([rloqvist](https://github.com/rloqvist) - [#1190](https://github.com/bvaughn/react-virtualized/pull/1190)) -* πŸ› Fix Table aria attributes. ([jsomsanith](https://github.com/jsomsanith) - [#1208](https://github.com/bvaughn/react-virtualized/pull/1208)) -* πŸ› Removed unused variable in Masonry example. ([ignocide](https://github.com/ignocide) - [#1218](https://github.com/bvaughn/react-virtualized/pull/1218)) -* πŸŽ‰ Add onColumnClick to Table. ([grahamlyus](https://github.com/grahamlyus) - [#1207](https://github.com/bvaughn/react-virtualized/pull/1207)) -* πŸŽ‰ Allow users to override default table row styles. ([emroussel](https://github.com/emroussel) - [#1175](https://github.com/bvaughn/react-virtualized/pull/1175)) +- πŸŽ‰ Added new use case example for CellMeasurer. ([wuweiweiwu](https://github.com/wuweiweiwu) - [#1168](https://github.com/bvaughn/react-virtualized/pull/1168)) +- πŸŽ‰ Added react-timeline-9000 as a related library. ([vasdee](https://github.com/vasdee) - [#1197](https://github.com/bvaughn/react-virtualized/pull/1197)) +- πŸ› Fix CellMeasurer docs with correct import statement. ([skipjack](https://github.com/skipjack) - [#1187](https://github.com/bvaughn/react-virtualized/pull/1187)) +- πŸ› Fix broken Slack badge. ([slieshke](https://github.com/slieshke) - [#1205](https://github.com/bvaughn/react-virtualized/pull/1205)) +- πŸ› Fix type in CellMeasurer example. ([rloqvist](https://github.com/rloqvist) - [#1190](https://github.com/bvaughn/react-virtualized/pull/1190)) +- πŸ› Fix Table aria attributes. ([jsomsanith](https://github.com/jsomsanith) - [#1208](https://github.com/bvaughn/react-virtualized/pull/1208)) +- πŸ› Removed unused variable in Masonry example. ([ignocide](https://github.com/ignocide) - [#1218](https://github.com/bvaughn/react-virtualized/pull/1218)) +- πŸŽ‰ Add onColumnClick to Table. ([grahamlyus](https://github.com/grahamlyus) - [#1207](https://github.com/bvaughn/react-virtualized/pull/1207)) +- πŸŽ‰ Allow users to override default table row styles. ([emroussel](https://github.com/emroussel) - [#1175](https://github.com/bvaughn/react-virtualized/pull/1175)) ##### 9.20.1 -* πŸ› Removing `sideEffects: false` from package.json. ([wuweiweiwu](https://github.com/wuweiweiwu) - [#1163](https://github.com/bvaughn/react-virtualized/pull/1163)) -* πŸ› Prevent early `debounceScrollEndedCallback`. ([Gvozd](https://github.com/Gvozd) - [#1141](https://github.com/bvaughn/react-virtualized/pull/1141)) -* πŸ› Fix `scrollToIndex` behavior in `InfiniteLoader`. ([mengdage](https://github.com/mengdage), [dcolens](https://github.com/dcolens) - [#1154](https://github.com/bvaughn/react-virtualized/pull/1154)) +- πŸ› Removing `sideEffects: false` from package.json. ([wuweiweiwu](https://github.com/wuweiweiwu) - [#1163](https://github.com/bvaughn/react-virtualized/pull/1163)) +- πŸ› Prevent early `debounceScrollEndedCallback`. ([Gvozd](https://github.com/Gvozd) - [#1141](https://github.com/bvaughn/react-virtualized/pull/1141)) +- πŸ› Fix `scrollToIndex` behavior in `InfiniteLoader`. ([mengdage](https://github.com/mengdage), [dcolens](https://github.com/dcolens) - [#1154](https://github.com/bvaughn/react-virtualized/pull/1154)) ##### 9.20.0 -* πŸŽ‰ Code of Conduct and updated Issue/PR templates. ([aem](https://github.com/aem) - [#1052](https://github.com/bvaughn/react-virtualized/pull/1052)) -* πŸ› Make scrollTo{Column,Row} take precedence over scroll{Left,Top}. ([wuweiweiwu](https://github.com/wuweiweiwu) - [#1130](https://github.com/bvaughn/react-virtualized/pull/1130)) -* πŸ› No `setState(null)`. ([wuweiweiwu](https://github.com/wuweiweiwu) - [#1129](https://github.com/bvaughn/react-virtualized/pull/1129)) -* πŸŽ‰ New `isScrollingOptOut` prop for `Grid` that prevents re-rendering on scroll-end. ([wuweiweiwu](https://github.com/wuweiweiwu) - [#1131](https://github.com/bvaughn/react-virtualized/pull/1131)) -* πŸ› Updated npm badge link. ([SpainTrain](https://github.com/SpainTrain) - [#1146](https://github.com/bvaughn/react-virtualized/pull/1146)) +- πŸŽ‰ Code of Conduct and updated Issue/PR templates. ([aem](https://github.com/aem) - [#1052](https://github.com/bvaughn/react-virtualized/pull/1052)) +- πŸ› Make scrollTo{Column,Row} take precedence over scroll{Left,Top}. ([wuweiweiwu](https://github.com/wuweiweiwu) - [#1130](https://github.com/bvaughn/react-virtualized/pull/1130)) +- πŸ› No `setState(null)`. ([wuweiweiwu](https://github.com/wuweiweiwu) - [#1129](https://github.com/bvaughn/react-virtualized/pull/1129)) +- πŸŽ‰ New `isScrollingOptOut` prop for `Grid` that prevents re-rendering on scroll-end. ([wuweiweiwu](https://github.com/wuweiweiwu) - [#1131](https://github.com/bvaughn/react-virtualized/pull/1131)) +- πŸ› Updated npm badge link. ([SpainTrain](https://github.com/SpainTrain) - [#1146](https://github.com/bvaughn/react-virtualized/pull/1146)) ##### 9.19.1 -* Updated [react-lifecycles-compat](https://github.com/reactjs/react-lifecycles-compat) to 3.0.4. ([pigcan](https://github.com/pigcan) - [#1114](https://github.com/bvaughn/react-virtualized/pull/1114)) +- Updated [react-lifecycles-compat](https://github.com/reactjs/react-lifecycles-compat) to 3.0.4. ([pigcan](https://github.com/pigcan) - [#1114](https://github.com/bvaughn/react-virtualized/pull/1114)) ##### 9.19.0 -* Replaced `componentWillMount`, `componentWillReceiveProps`, and `componentWillUpdate` with async-safe lifecycles in advance of React 16.x deprecation warnings. Added [react-lifecycles-compat](https://github.com/reactjs/react-lifecycles-compat) as a dependency, to ensure backwards compatibility. -* Public flow interface for `CellMeasurer`. ([diogofcunha](https://github.com/diogofcunha) - [#1058](https://github.com/bvaughn/react-virtualized/pull/1058)) -* Improved build by setting `sideEffects` to `false`. ([0xR](https://github.com/0xR) - [#1064](https://github.com/bvaughn/react-virtualized/pull/1064)) -* πŸ› Fix flow type checks. ([RyanLiu0235](https://github.com/RyanLiu0235) - [#1066](https://github.com/bvaughn/react-virtualized/pull/1066)) -* Rollup for UMD build. ([TrySound](https://github.com/TrySound) - [#994](https://github.com/bvaughn/react-virtualized/pull/994)) -* Row direction support for `Masonry` ([bardiarastin](https://github.com/bardiarastin) - [#1071](https://github.com/bvaughn/react-virtualized/pull/1071)) -* Add lint-staged and precommit hooks ([TrySound](https://github.com/TrySound) - [#1082](https://github.com/bvaughn/react-virtualized/pull/1082)) -* Add `scrollToRow` and `scrollToColumn` support for ssr. ([microcood](https://github.com/microcood) - [#1072](https://github.com/bvaughn/react-virtualized/pull/1072)) -* Add `getTotalRowsHeight` and `getTotalColumnsWidth` to `Grid`. ([nihgwu](https://github.com/nihgwu) - [#1022](https://github.com/bvaughn/react-virtualized/pull/1022)) -* Allow top-right and bottom-left scrollbars in `MultiGrid` be hidden. ([RaviDasari](https://github.com/RaviDasari) - [#1040](https://github.com/bvaughn/react-virtualized/pull/1040)) -* Documentation changes - * Added `forceUpdateGrid` documentation for `MultiGrid`. ([kartikluke](https://github.com/kartikluke) - [#1079](https://github.com/bvaughn/react-virtualized/pull/1079)) - * πŸ› Fixed typo in `Grid` docs. ([r-kot](https://github.com/r-kot) - [#1092](https://github.com/bvaughn/react-virtualized/pull/1092)) - * πŸ› Fixed typo in `Collection` docs. ([skipjack](https://github.com/skipjack) - [#1050](https://github.com/bvaughn/react-virtualized/pull/1050)) - * Added dynamically measured images example for `Masonry`. ([kirill-konshin](https://github.com/kirill-konshin) - [#1081](https://github.com/bvaughn/react-virtualized/pull/1081)) - +- Replaced `componentWillMount`, `componentWillReceiveProps`, and `componentWillUpdate` with async-safe lifecycles in advance of React 16.x deprecation warnings. Added [react-lifecycles-compat](https://github.com/reactjs/react-lifecycles-compat) as a dependency, to ensure backwards compatibility. +- Public flow interface for `CellMeasurer`. ([diogofcunha](https://github.com/diogofcunha) - [#1058](https://github.com/bvaughn/react-virtualized/pull/1058)) +- Improved build by setting `sideEffects` to `false`. ([0xR](https://github.com/0xR) - [#1064](https://github.com/bvaughn/react-virtualized/pull/1064)) +- πŸ› Fix flow type checks. ([RyanLiu0235](https://github.com/RyanLiu0235) - [#1066](https://github.com/bvaughn/react-virtualized/pull/1066)) +- Rollup for UMD build. ([TrySound](https://github.com/TrySound) - [#994](https://github.com/bvaughn/react-virtualized/pull/994)) +- Row direction support for `Masonry` ([bardiarastin](https://github.com/bardiarastin) - [#1071](https://github.com/bvaughn/react-virtualized/pull/1071)) +- Add lint-staged and precommit hooks ([TrySound](https://github.com/TrySound) - [#1082](https://github.com/bvaughn/react-virtualized/pull/1082)) +- Add `scrollToRow` and `scrollToColumn` support for ssr. ([microcood](https://github.com/microcood) - [#1072](https://github.com/bvaughn/react-virtualized/pull/1072)) +- Add `getTotalRowsHeight` and `getTotalColumnsWidth` to `Grid`. ([nihgwu](https://github.com/nihgwu) - [#1022](https://github.com/bvaughn/react-virtualized/pull/1022)) +- Allow top-right and bottom-left scrollbars in `MultiGrid` be hidden. ([RaviDasari](https://github.com/RaviDasari) - [#1040](https://github.com/bvaughn/react-virtualized/pull/1040)) +- Documentation changes + - Added `forceUpdateGrid` documentation for `MultiGrid`. ([kartikluke](https://github.com/kartikluke) - [#1079](https://github.com/bvaughn/react-virtualized/pull/1079)) + - πŸ› Fixed typo in `Grid` docs. ([r-kot](https://github.com/r-kot) - [#1092](https://github.com/bvaughn/react-virtualized/pull/1092)) + - πŸ› Fixed typo in `Collection` docs. ([skipjack](https://github.com/skipjack) - [#1050](https://github.com/bvaughn/react-virtualized/pull/1050)) + - Added dynamically measured images example for `Masonry`. ([kirill-konshin](https://github.com/kirill-konshin) - [#1081](https://github.com/bvaughn/react-virtualized/pull/1081)) ##### 9.18.5 -* πŸ› Revert changes > 9.18.0 + +- πŸ› Revert changes > 9.18.0 ##### 9.18.0 -* ✨ Add `onScrollbarPresenceChange` prop to `MultiGrid`. + +- ✨ Add `onScrollbarPresenceChange` prop to `MultiGrid`. ##### 9.17.3 -* πŸ› Fix `Grid` server-side rendering which was broken after natural scrolling tweak in Chrome. ([TrySound](https://github.com/TrySound) - [#970](https://github.com/bvaughn/react-virtualized/pull/970)) + +- πŸ› Fix `Grid` server-side rendering which was broken after natural scrolling tweak in Chrome. ([TrySound](https://github.com/TrySound) - [#970](https://github.com/bvaughn/react-virtualized/pull/970)) ##### 9.17.2 -* ✨ Eliminate unnecessary renders for `CellMeasurer` and `Grid`. ([bvaughn](https://github.com/bvaughn) - [#969](https://github.com/bvaughn/react-virtualized/pull/969)) + +- ✨ Eliminate unnecessary renders for `CellMeasurer` and `Grid`. ([bvaughn](https://github.com/bvaughn) - [#969](https://github.com/bvaughn/react-virtualized/pull/969)) ##### 9.17.1 -* πŸ› `CellMeasurer` works properly in iframes and popup windows. ([dfdeagle47](https://github.com/dfdeagle47) - [#968](https://github.com/bvaughn/react-virtualized/pull/968)) + +- πŸ› `CellMeasurer` works properly in iframes and popup windows. ([dfdeagle47](https://github.com/dfdeagle47) - [#968](https://github.com/bvaughn/react-virtualized/pull/968)) ##### 9.17.0 -* More natural scrolling speeds for large lists in Chrome. ([TrySound](https://github.com/TrySound) - [#936](https://github.com/bvaughn/react-virtualized/pull/936)) -* Support for multi-column sort added to `Table` component. Read more about this [here](https://github.com/bvaughn/react-virtualized/blob/master/docs/multiColumnSortTable.md). Special thanks to [CzBuCHi](https://github.com/CzBuCHi) for the initial proposal and iteration in PRs [#946](https://github.com/bvaughn/react-virtualized/pull/946) and [#957](https://github.com/bvaughn/react-virtualized/pull/957). ([bvaughn](https://github.com/bvaughn) - [#966](https://github.com/bvaughn/react-virtualized/pull/966)) -* ✨ Improved `Table` performance for cases with large numbers of columns. ([gannunziata](https://github.com/gannunziata) - [#942](https://github.com/bvaughn/react-virtualized/pull/942)) -* πŸ› Fixed potential initial render bug when using `CellMeasurer` with a `List`. ([OriR](https://github.com/OriR) - [#959](https://github.com/bvaughn/react-virtualized/pull/959)) -* πŸ› `Masonry` component now renders at least one column to avoid an invalid, Infinity height layout issue. ([djeeg](https://github.com/djeeg) - [#961](https://github.com/bvaughn/react-virtualized/pull/961)) -* πŸŽ‰ Optional `className` and `style` props added to `AutoSizer` component. +- More natural scrolling speeds for large lists in Chrome. ([TrySound](https://github.com/TrySound) - [#936](https://github.com/bvaughn/react-virtualized/pull/936)) +- Support for multi-column sort added to `Table` component. Read more about this [here](https://github.com/bvaughn/react-virtualized/blob/master/docs/multiColumnSortTable.md). Special thanks to [CzBuCHi](https://github.com/CzBuCHi) for the initial proposal and iteration in PRs [#946](https://github.com/bvaughn/react-virtualized/pull/946) and [#957](https://github.com/bvaughn/react-virtualized/pull/957). ([bvaughn](https://github.com/bvaughn) - [#966](https://github.com/bvaughn/react-virtualized/pull/966)) +- ✨ Improved `Table` performance for cases with large numbers of columns. ([gannunziata](https://github.com/gannunziata) - [#942](https://github.com/bvaughn/react-virtualized/pull/942)) +- πŸ› Fixed potential initial render bug when using `CellMeasurer` with a `List`. ([OriR](https://github.com/OriR) - [#959](https://github.com/bvaughn/react-virtualized/pull/959)) +- πŸ› `Masonry` component now renders at least one column to avoid an invalid, Infinity height layout issue. ([djeeg](https://github.com/djeeg) - [#961](https://github.com/bvaughn/react-virtualized/pull/961)) +- πŸŽ‰ Optional `className` and `style` props added to `AutoSizer` component. ##### 9.16.1 -* πŸ› Run server-side rendering tests under pure node environment and fix SSR in `WindowScroller` ([TrySound](https://github.com/TrySound) - [#953](https://github.com/bvaughn/react-virtualized/pull/953)) -* πŸŽ‰ Warn on passing wrong value to registerChild in `WindowScroller` ([TrySound](https://github.com/TrySound) - [#949](https://github.com/bvaughn/react-virtualized/pull/949)) -* πŸ› Fixed overrided merge `WindowScroller` scrollElement prop type ([TrySound](https://github.com/TrySound) - [#948](https://github.com/bvaughn/react-virtualized/pull/948)) -* πŸŽ‰ `AutoSizer` (via the `detectElementResize` helper) now supports properly rendering into iframes and child windows ([ahutchings](https://github.com/ahutchings) - [#900](https://github.com/bvaughn/react-virtualized/pull/900)) +- πŸ› Run server-side rendering tests under pure node environment and fix SSR in `WindowScroller` ([TrySound](https://github.com/TrySound) - [#953](https://github.com/bvaughn/react-virtualized/pull/953)) +- πŸŽ‰ Warn on passing wrong value to registerChild in `WindowScroller` ([TrySound](https://github.com/TrySound) - [#949](https://github.com/bvaughn/react-virtualized/pull/949)) +- πŸ› Fixed overrided merge `WindowScroller` scrollElement prop type ([TrySound](https://github.com/TrySound) - [#948](https://github.com/bvaughn/react-virtualized/pull/948)) +- πŸŽ‰ `AutoSizer` (via the `detectElementResize` helper) now supports properly rendering into iframes and child windows ([ahutchings](https://github.com/ahutchings) - [#900](https://github.com/bvaughn/react-virtualized/pull/900)) ##### 9.16.0 -* πŸ› Fixed window check for SSR in `detectElementResize` ([eqyiel](https://github.com/eqyiel) - [#945](https://github.com/bvaughn/react-virtualized/pull/945)) -* πŸŽ‰ Allowed custom `WindowScroller` child with `registerChild` in children function ([TrySound](https://github.com/TrySound) - [#940](https://github.com/bvaughn/react-virtualized/pull/940) and [#947](https://github.com/bvaughn/react-virtualized/pull/947)) -* πŸ› Fixed `WindowScroller` scrollElement prop type ([TrySound](https://github.com/TrySound) - [#939](https://github.com/bvaughn/react-virtualized/pull/939)) +- πŸ› Fixed window check for SSR in `detectElementResize` ([eqyiel](https://github.com/eqyiel) - [#945](https://github.com/bvaughn/react-virtualized/pull/945)) +- πŸŽ‰ Allowed custom `WindowScroller` child with `registerChild` in children function ([TrySound](https://github.com/TrySound) - [#940](https://github.com/bvaughn/react-virtualized/pull/940) and [#947](https://github.com/bvaughn/react-virtualized/pull/947)) +- πŸ› Fixed `WindowScroller` scrollElement prop type ([TrySound](https://github.com/TrySound) - [#939](https://github.com/bvaughn/react-virtualized/pull/939)) ##### 9.15.0 -* πŸŽ‰ Detected `WindowScroller` container (not only window) resize similar to `AutoSizer` ([TrySound](https://github.com/TrySound) - [#918](https://github.com/bvaughn/react-virtualized/pull/918)) -* πŸ› Prevented position breaking on `WindowScroller` container resize ([TrySound](https://github.com/TrySound) - [#920](https://github.com/bvaughn/react-virtualized/pull/920)) -* πŸŽ‰ Published `AutoSizer` Flow types ([TrySound](https://github.com/TrySound) - [#934](https://github.com/bvaughn/react-virtualized/pull/934)) -* πŸŽ‰ Published `WindowScroller` Flow types ([TrySound](https://github.com/TrySound) - [#915](https://github.com/bvaughn/react-virtualized/pull/915)) +- πŸŽ‰ Detected `WindowScroller` container (not only window) resize similar to `AutoSizer` ([TrySound](https://github.com/TrySound) - [#918](https://github.com/bvaughn/react-virtualized/pull/918)) +- πŸ› Prevented position breaking on `WindowScroller` container resize ([TrySound](https://github.com/TrySound) - [#920](https://github.com/bvaughn/react-virtualized/pull/920)) +- πŸŽ‰ Published `AutoSizer` Flow types ([TrySound](https://github.com/TrySound) - [#934](https://github.com/bvaughn/react-virtualized/pull/934)) +- πŸŽ‰ Published `WindowScroller` Flow types ([TrySound](https://github.com/TrySound) - [#915](https://github.com/bvaughn/react-virtualized/pull/915)) ##### 9.14.1 -* πŸ› Fixed server-side rendering bug in `WindowScroller` with undefined `window` variable. + +- πŸ› Fixed server-side rendering bug in `WindowScroller` with undefined `window` variable. ##### 9.14.0 -* πŸŽ‰ Added `serverHeight` and `serverWidth` props to `WindowScroller` for better server-side rendering support. + +- πŸŽ‰ Added `serverHeight` and `serverWidth` props to `WindowScroller` for better server-side rendering support. ##### 9.13.0 -* πŸŽ‰ Added `headerStyle` support for `Table` columns ([@mucsi96](https://github.com/mucsi96) - [#877](https://github.com/bvaughn/react-virtualized/pull/877)) -* πŸ› Fixed `Masonry` bug that caused cells to be unnecessarily destroyed and then recreated when new cells were measured - d561d9c + +- πŸŽ‰ Added `headerStyle` support for `Table` columns ([@mucsi96](https://github.com/mucsi96) - [#877](https://github.com/bvaughn/react-virtualized/pull/877)) +- πŸ› Fixed `Masonry` bug that caused cells to be unnecessarily destroyed and then recreated when new cells were measured - d561d9c ##### 9.12.0 -* πŸŽ‰ Added `defaultWidth` and `defaultHeight` props to `AutoSizer` to better support server-side rendering. + +- πŸŽ‰ Added `defaultWidth` and `defaultHeight` props to `AutoSizer` to better support server-side rendering. ##### 9.11.1 -* πŸ› `Masonry` component now properly pre-renders as specified by `overscanByPixels` + +- πŸ› `Masonry` component now properly pre-renders as specified by `overscanByPixels` ##### 9.11.0 -* πŸ› `List` and `Grid` scroll snapping / resetting bugfix #825 by @TrySound -* πŸ› `MultiGrid` crash due to `scrollTo*` prop being `NaN` #829 by @mcordova47 -* πŸ› `MultiGrid` invalid `tabIndex` prop type #818 by @kalley -* πŸŽ‰ Column default sort direction #833 by @mbseid + +- πŸ› `List` and `Grid` scroll snapping / resetting bugfix #825 by @TrySound +- πŸ› `MultiGrid` crash due to `scrollTo*` prop being `NaN` #829 by @mcordova47 +- πŸ› `MultiGrid` invalid `tabIndex` prop type #818 by @kalley +- πŸŽ‰ Column default sort direction #833 by @mbseid ##### 9.10.1 -* πŸ› Server-side rendering `window` reference bugfix -* πŸ› `Grid.defaultProps` bugfix + +- πŸ› Server-side rendering `window` reference bugfix +- πŸ› `Grid.defaultProps` bugfix ##### 9.10.0 -* ✨ `Grid` uses `requestAnimationFrame` instead of `setTimeout` for improved scroll-ended debounce timing ([@guilhermefloriani](https://github.com/guilhermefloriani) - [#742](https://github.com/bvaughn/react-virtualized/pull/742)) -* πŸŽ‰ `onRowRightClick` prop added to `Table` ([@damian-codilime](https://github.com/damian-codilime) - [#741](https://github.com/bvaughn/react-virtualized/pull/741)) -* πŸŽ‰ `Table` component now allow children that extend `Column` ([@CptLemming](https://github.com/CptLemming) - [#748](https://github.com/bvaughn/react-virtualized/pull/748)) -* πŸ› Firefox edge-case bugfix ([@ReinAkane](https://github.com/ReinAkane) - [#798](https://github.com/bvaughn/react-virtualized/pull/798)) -* πŸŽ‰ `containerProps` prop added to `Grid` ([@implausible](https://github.com/implausible) - [#778](https://github.com/bvaughn/react-virtualized/pull/778)) -* ✨ `Grid` accessibility improved via better aria attributes ([@smockle](https://github.com/smockle) - [#744](https://github.com/bvaughn/react-virtualized/pull/744)) -* ✨ `CellMeasurererCache.clearAll` also sets row and column counts ([@tcosentino](https://github.com/tcosentino) - [#796](https://github.com/bvaughn/react-virtualized/pull/796)) + +- ✨ `Grid` uses `requestAnimationFrame` instead of `setTimeout` for improved scroll-ended debounce timing ([@guilhermefloriani](https://github.com/guilhermefloriani) - [#742](https://github.com/bvaughn/react-virtualized/pull/742)) +- πŸŽ‰ `onRowRightClick` prop added to `Table` ([@damian-codilime](https://github.com/damian-codilime) - [#741](https://github.com/bvaughn/react-virtualized/pull/741)) +- πŸŽ‰ `Table` component now allow children that extend `Column` ([@CptLemming](https://github.com/CptLemming) - [#748](https://github.com/bvaughn/react-virtualized/pull/748)) +- πŸ› Firefox edge-case bugfix ([@ReinAkane](https://github.com/ReinAkane) - [#798](https://github.com/bvaughn/react-virtualized/pull/798)) +- πŸŽ‰ `containerProps` prop added to `Grid` ([@implausible](https://github.com/implausible) - [#778](https://github.com/bvaughn/react-virtualized/pull/778)) +- ✨ `Grid` accessibility improved via better aria attributes ([@smockle](https://github.com/smockle) - [#744](https://github.com/bvaughn/react-virtualized/pull/744)) +- ✨ `CellMeasurererCache.clearAll` also sets row and column counts ([@tcosentino](https://github.com/tcosentino) - [#796](https://github.com/bvaughn/react-virtualized/pull/796)) ##### 9.9.0 -* πŸŽ‰ `InfiniteLoader` API method `resetLoadMoreRowsCache` accepts optional parameter to auto-reload most recent range of rows. ([@BamaBoy](https://github.com/BamaBoy) - [#704](https://github.com/bvaughn/react-virtualized/pull/704)) -* πŸŽ‰ `MultiGrid` now supports scrolling when hovering over fixed rows or columns by way of new `enableFixedColumnScroll` and `enableFixedRowScroll` props. ([@danalloway](https://github.com/danalloway) - [#708](https://github.com/bvaughn/react-virtualized/pull/708)) -* πŸŽ‰ `WindowScroller` supports new configurable `scrollingResetTimeInterval` prop (similar to `Grid`). ([@djeeg](https://github.com/djeeg) - [#728](https://github.com/bvaughn/react-virtualized/pull/728)) -* πŸ› Edge-case bugfix for style caching of `Grids` locked with `ScrollSync`. ([@nathanpower](https://github.com/nathanpower) - [#727](https://github.com/bvaughn/react-virtualized/pull/727)) -* ✨ New `onScrollbarPresenceChange` prop added to `Grid`. + +- πŸŽ‰ `InfiniteLoader` API method `resetLoadMoreRowsCache` accepts optional parameter to auto-reload most recent range of rows. ([@BamaBoy](https://github.com/BamaBoy) - [#704](https://github.com/bvaughn/react-virtualized/pull/704)) +- πŸŽ‰ `MultiGrid` now supports scrolling when hovering over fixed rows or columns by way of new `enableFixedColumnScroll` and `enableFixedRowScroll` props. ([@danalloway](https://github.com/danalloway) - [#708](https://github.com/bvaughn/react-virtualized/pull/708)) +- πŸŽ‰ `WindowScroller` supports new configurable `scrollingResetTimeInterval` prop (similar to `Grid`). ([@djeeg](https://github.com/djeeg) - [#728](https://github.com/bvaughn/react-virtualized/pull/728)) +- πŸ› Edge-case bugfix for style caching of `Grids` locked with `ScrollSync`. ([@nathanpower](https://github.com/nathanpower) - [#727](https://github.com/bvaughn/react-virtualized/pull/727)) +- ✨ New `onScrollbarPresenceChange` prop added to `Grid`. ##### 9.8.0 -* πŸŽ‰ `WindowScroller` supports `scrollToIndex` prop. ([@leoasis](https://github.com/leoasis) - [#643](https://github.com/bvaughn/react-virtualized/pull/643)) -* πŸŽ‰ Allow `ArrowKeyStepper` to be used as a controlled component. ([@mking-clari](https://github.com/mking-clari) - [#688](https://github.com/bvaughn/react-virtualized/pull/688)) -* πŸŽ‰New `handleScroll` method on `Grid` to better support custom scrollbars. ([@5angel](https://github.com/5angel) - [#693](https://github.com/bvaughn/react-virtualized/pull/693)) -* πŸ› Added edge-case guard to `WindowScroller ` to prevent calling `setState` when unmounted. ([@liorbrauer](https://github.com/liorbrauer) - [#689](https://github.com/bvaughn/react-virtualized/pull/689)) -* πŸ› Fixed edge-case in `Grid` where setting an initial scroll-to offset with a `height` or `width` of 0 caused the scroll-to prop to be ignored when size later changed. ([#691](https://github.com/bvaughn/react-virtualized/pull/691)) + +- πŸŽ‰ `WindowScroller` supports `scrollToIndex` prop. ([@leoasis](https://github.com/leoasis) - [#643](https://github.com/bvaughn/react-virtualized/pull/643)) +- πŸŽ‰ Allow `ArrowKeyStepper` to be used as a controlled component. ([@mking-clari](https://github.com/mking-clari) - [#688](https://github.com/bvaughn/react-virtualized/pull/688)) +- πŸŽ‰New `handleScroll` method on `Grid` to better support custom scrollbars. ([@5angel](https://github.com/5angel) - [#693](https://github.com/bvaughn/react-virtualized/pull/693)) +- πŸ› Added edge-case guard to `WindowScroller` to prevent calling `setState` when unmounted. ([@liorbrauer](https://github.com/liorbrauer) - [#689](https://github.com/bvaughn/react-virtualized/pull/689)) +- πŸ› Fixed edge-case in `Grid` where setting an initial scroll-to offset with a `height` or `width` of 0 caused the scroll-to prop to be ignored when size later changed. ([#691](https://github.com/bvaughn/react-virtualized/pull/691)) ##### 9.7.6 -* ✨ Better aria roles set for `Table` column cells and headers. ([@jchen527](https://github.com/jchen527) - [#681](https://github.com/bvaughn/react-virtualized/pull/681)) -* πŸ› `CellMeasurer` restores `width` and `height` `style` values after measuring to avoid edge-case layout bugs. ([@marcelmokos](https://github.com/marcelmokos) - [#675](https://github.com/bvaughn/react-virtualized/pull/675)) + +- ✨ Better aria roles set for `Table` column cells and headers. ([@jchen527](https://github.com/jchen527) - [#681](https://github.com/bvaughn/react-virtualized/pull/681)) +- πŸ› `CellMeasurer` restores `width` and `height` `style` values after measuring to avoid edge-case layout bugs. ([@marcelmokos](https://github.com/marcelmokos) - [#675](https://github.com/bvaughn/react-virtualized/pull/675)) ##### 9.7.5 -* ✨ Improved performance for `CellMeasurerCache` by removing some unnecessary computations for fixed-width/fixed-height use cases. ([@RaviDasari](https://github.com/RaviDasari) - [#676](https://github.com/bvaughn/react-virtualized/pull/676)) -* πŸ› `MultiGrid` ensures correct row/column indices are passed to `CellMeasurerCache` for top-right and bottom `Grid`s. ([#670](https://github.com/bvaughn/react-virtualized/pull/670)) + +- ✨ Improved performance for `CellMeasurerCache` by removing some unnecessary computations for fixed-width/fixed-height use cases. ([@RaviDasari](https://github.com/RaviDasari) - [#676](https://github.com/bvaughn/react-virtualized/pull/676)) +- πŸ› `MultiGrid` ensures correct row/column indices are passed to `CellMeasurerCache` for top-right and bottom `Grid`s. ([#670](https://github.com/bvaughn/react-virtualized/pull/670)) ##### 9.7.4 -* πŸŽ‰ Add `nonce` attribute to `AutoSizer` for better [Content Security Policy compliance](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute). ([@akihikodaki](https://github.com/akihikodaki) - [#663](https://github.com/bvaughn/react-virtualized/pull/663)) -* ✨ `Column` renderers now accept a `columnIndex` parameter as well. This allows multiple `Table` columns to more easily use `CellMeasurer` to compute the min row height. ([@BamaBoy](https://github.com/BamaBoy) - [#662](https://github.com/bvaughn/react-virtualized/pull/662)) + +- πŸŽ‰ Add `nonce` attribute to `AutoSizer` for better [Content Security Policy compliance](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute). ([@akihikodaki](https://github.com/akihikodaki) - [#663](https://github.com/bvaughn/react-virtualized/pull/663)) +- ✨ `Column` renderers now accept a `columnIndex` parameter as well. This allows multiple `Table` columns to more easily use `CellMeasurer` to compute the min row height. ([@BamaBoy](https://github.com/BamaBoy) - [#662](https://github.com/bvaughn/react-virtualized/pull/662)) ##### 9.7.3 -* Clear cell and style cache when controlled-scroll mode `Grid` stops scrolling. ([@leoasis](https://github.com/leoasis) - [#649](https://github.com/bvaughn/react-virtualized/pull/649)) + +- Clear cell and style cache when controlled-scroll mode `Grid` stops scrolling. ([@leoasis](https://github.com/leoasis) - [#649](https://github.com/bvaughn/react-virtualized/pull/649)) ##### 9.7.2 -* ✨ Removed lingering `React.PropTypes` reference in `InfiniteLoader`. + +- ✨ Removed lingering `React.PropTypes` reference in `InfiniteLoader`. ##### 9.7.1 -* ✨ Added `prop-types` dependency to avoid deprecation warnings for React 15.5+. + +- ✨ Added `prop-types` dependency to avoid deprecation warnings for React 15.5+. ##### 9.7.0 -* Added publicΒ animation-friendly API methods to `Grid`/`List`/`Table` for an alternative to props-based animating. ([@imadha](https://github.com/imadha) - [#641](https://github.com/bvaughn/react-virtualized/pull/641)) + +- Added publicΒ animation-friendly API methods to `Grid`/`List`/`Table` for an alternative to props-based animating. ([@imadha](https://github.com/imadha) - [#641](https://github.com/bvaughn/react-virtualized/pull/641)) ##### 9.6.1 -* πŸ› Fixed module syntax error in vendered file. + +- πŸ› Fixed module syntax error in vendered file. ##### 9.6.0 -* πŸŽ‰ `WindowScroller` and `Grid` now support horizontal window-scrolling via new `autoWidth` property. ([@maxnowack](https://github.com/maxnowack) - [#644](https://github.com/bvaughn/react-virtualized/pull/644)) -* πŸ› Fixed a Content Security Policy (CSP) issue in an upstream dependency that impacted users of the `Masonry` component. For more information see issue [#640](https://github.com/bvaughn/react-virtualized/issues/640). -* ✨ `List` and `Table` always overscan 1 row in the direction _not_ being scrolled to better support keyboard navigation (via TAB and SHIFT+TAB). For more information see [issue #625](https://github.com/bvaughn/react-virtualized/issues/625). -* ✨ `Grid` no longer alters scroll direction for one axis (eg vertical) if a scroll event occurs for another axis (eg horizontal). + +- πŸŽ‰ `WindowScroller` and `Grid` now support horizontal window-scrolling via new `autoWidth` property. ([@maxnowack](https://github.com/maxnowack) - [#644](https://github.com/bvaughn/react-virtualized/pull/644)) +- πŸ› Fixed a Content Security Policy (CSP) issue in an upstream dependency that impacted users of the `Masonry` component. For more information see issue [#640](https://github.com/bvaughn/react-virtualized/issues/640). +- ✨ `List` and `Table` always overscan 1 row in the direction _not_ being scrolled to better support keyboard navigation (via TAB and SHIFT+TAB). For more information see [issue #625](https://github.com/bvaughn/react-virtualized/issues/625). +- ✨ `Grid` no longer alters scroll direction for one axis (eg vertical) if a scroll event occurs for another axis (eg horizontal). ##### 9.5.0 -* πŸŽ‰ `Grid` supports state-override of `isScrolling` value via new `isScrolling` prop. This enables cache-while-scrolling of cells when used with `WindowScroller`. ([@olavk](https://github.com/olavk) - [#639](https://github.com/bvaughn/react-virtualized/pull/639)) + +- πŸŽ‰ `Grid` supports state-override of `isScrolling` value via new `isScrolling` prop. This enables cache-while-scrolling of cells when used with `WindowScroller`. ([@olavk](https://github.com/olavk) - [#639](https://github.com/bvaughn/react-virtualized/pull/639)) ##### 9.4.2 -* πŸ› Small accessibility fix to `MultiGrid` so that focus outline shows through by default for main (bottom/right) `Grid`. Top and left `Grid`s are also not tab-focusable by default now since they are scroll-observers anyway. -* ✨ Added `columnWidth` parameter to `ColumnSizer` and deprecated `getColumnWidth` callback. The callback was not necessary since `columnWidth` doesn't change without a re-render and fixed number values perform better in `Grid` due to some internal optimizations anyway. + +- πŸ› Small accessibility fix to `MultiGrid` so that focus outline shows through by default for main (bottom/right) `Grid`. Top and left `Grid`s are also not tab-focusable by default now since they are scroll-observers anyway. +- ✨ Added `columnWidth` parameter to `ColumnSizer` and deprecated `getColumnWidth` callback. The callback was not necessary since `columnWidth` doesn't change without a re-render and fixed number values perform better in `Grid` due to some internal optimizations anyway. ##### 9.4.1 -* πŸ› Edge-case `InfiniteLoader` bug fix; prevent jumping to the first row when scrolling fast. ([@reVrost](https://github.com/reVrost) - [#632](https://github.com/bvaughn/react-virtualized/pull/632)) -* πŸ› Reverted unexpected regression from [#616](https://github.com/bvaughn/react-virtualized/pull/616) until a safer fix can be found. + +- πŸ› Edge-case `InfiniteLoader` bug fix; prevent jumping to the first row when scrolling fast. ([@reVrost](https://github.com/reVrost) - [#632](https://github.com/bvaughn/react-virtualized/pull/632)) +- πŸ› Reverted unexpected regression from [#616](https://github.com/bvaughn/react-virtualized/pull/616) until a safer fix can be found. ##### 9.4.0 -* πŸŽ‰ New `Masonry` component optimized for Pinterest-style layouts. Check out the [docs](https://github.com/bvaughn/react-virtualized/blob/master/docs/Masonry.md) and [demo page](https://bvaughn.github.io/react-virtualized/#/components/Masonry) to learn more. ([#618](https://github.com/bvaughn/react-virtualized/pull/618)) -* πŸŽ‰ `MultiGrid` supports `scrollLeft` and `scrollTop` props for controlled scrolling. ([@julianwong94](https://github.com/julianwong94) - [#624](https://github.com/bvaughn/react-virtualized/pull/624)) -* πŸŽ‰ New `direction` parameter passed to `overscanIndicesGetter` with values "horizontal" or "vertical". ([@offsky](https://github.com/offsky) - [#629](https://github.com/bvaughn/react-virtualized/pull/629)) -* ✨ Replaced inline `require` statement with header `import` in `Grid` for better integration with the Rollup module bundler. ([@odogono](https://github.com/odogono) - [#617](https://github.com/bvaughn/react-virtualized/pull/617)) -* πŸ› Improved guard for edge-case scrolling issue with rubberband scrolling in iOS. ([@dtoddtarsi](https://github.com/offsky) - [#616](https://github.com/bvaughn/react-virtualized/pull/616)) -* ✨ Replaced `getBoundingClientRect()` with slightly faster `offsetWidth` and `offsetHeight` inside of `AutoSizer`. -* ✨ `AutoSizer` no longer re-renders nor calls `onResize` callback unless `width` and/or `height` have changed (depending on which properties are being watched). + +- πŸŽ‰ New `Masonry` component optimized for Pinterest-style layouts. Check out the [docs](https://github.com/bvaughn/react-virtualized/blob/master/docs/Masonry.md) and [demo page](https://bvaughn.github.io/react-virtualized/#/components/Masonry) to learn more. ([#618](https://github.com/bvaughn/react-virtualized/pull/618)) +- πŸŽ‰ `MultiGrid` supports `scrollLeft` and `scrollTop` props for controlled scrolling. ([@julianwong94](https://github.com/julianwong94) - [#624](https://github.com/bvaughn/react-virtualized/pull/624)) +- πŸŽ‰ New `direction` parameter passed to `overscanIndicesGetter` with values "horizontal" or "vertical". ([@offsky](https://github.com/offsky) - [#629](https://github.com/bvaughn/react-virtualized/pull/629)) +- ✨ Replaced inline `require` statement with header `import` in `Grid` for better integration with the Rollup module bundler. ([@odogono](https://github.com/odogono) - [#617](https://github.com/bvaughn/react-virtualized/pull/617)) +- πŸ› Improved guard for edge-case scrolling issue with rubberband scrolling in iOS. ([@dtoddtarsi](https://github.com/offsky) - [#616](https://github.com/bvaughn/react-virtualized/pull/616)) +- ✨ Replaced `getBoundingClientRect()` with slightly faster `offsetWidth` and `offsetHeight` inside of `AutoSizer`. +- ✨ `AutoSizer` no longer re-renders nor calls `onResize` callback unless `width` and/or `height` have changed (depending on which properties are being watched). ##### 9.3.0 -* πŸŽ‰ Added `resetLoadMoreRowsCache` method to `InfiniteLoader` to reset any cached data about loaded rows. This method should be called if any/all loaded data needs to be refetched (eg a filtered list where the search criteria changes). ([#612](https://github.com/bvaughn/react-virtualized/issues/612)) + +- πŸŽ‰ Added `resetLoadMoreRowsCache` method to `InfiniteLoader` to reset any cached data about loaded rows. This method should be called if any/all loaded data needs to be refetched (eg a filtered list where the search criteria changes). ([#612](https://github.com/bvaughn/react-virtualized/issues/612)) ##### 9.2.3 -* πŸ› `CellMeasurer` should work better out of the box with `MultiGrid`. -* πŸ› `CellMeasurerCache` should return correct values from `rowHeight` and `columnWidth` functions when `keyMapper` is used. ([#613](https://github.com/bvaughn/react-virtualized/pull/613)) + +- πŸ› `CellMeasurer` should work better out of the box with `MultiGrid`. +- πŸ› `CellMeasurerCache` should return correct values from `rowHeight` and `columnWidth` functions when `keyMapper` is used. ([#613](https://github.com/bvaughn/react-virtualized/pull/613)) ##### 9.2.2 -* πŸ› Fixed small scrollbar offset bug in `MultiGrid`. ([#609](https://github.com/bvaughn/react-virtualized/issues/609)) + +- πŸ› Fixed small scrollbar offset bug in `MultiGrid`. ([#609](https://github.com/bvaughn/react-virtualized/issues/609)) ##### 9.2.1 -* πŸ› Fixed potential scrollbar offset bug in `MultiGrid` by giving top and left `Grid`s a little extra space to scroll into. ([#535](https://github.com/bvaughn/react-virtualized/pull/535)) + +- πŸ› Fixed potential scrollbar offset bug in `MultiGrid` by giving top and left `Grid`s a little extra space to scroll into. ([#535](https://github.com/bvaughn/react-virtualized/pull/535)) ##### 9.2.0 -* πŸŽ‰ New `Table` prop, `headerRowRenderer`. ([@kaoDev](https://github.com/kaoDev) - [#600](https://github.com/bvaughn/react-virtualized/pull/600)) -* πŸŽ‰ All `Table` event handlers now receive a named `event` params ([@paulbrom](https://github.com/paulbrom) - [#605](https://github.com/bvaughn/react-virtualized/pull/605)) -* πŸŽ‰ Aria roles for `Table` improved to specify `role="row"` for table rows and `role="rowgroup"` for inner `Grid`. ([@jchen527](https://github.com/jchen527) - [#607](https://github.com/bvaughn/react-virtualized/pull/607)) -* πŸ› Calling `scrollToRow` for `List` or `Table` no longer potentially messes up horizontal scroll position. ([#603](https://github.com/bvaughn/react-virtualized/issues/603)) + +- πŸŽ‰ New `Table` prop, `headerRowRenderer`. ([@kaoDev](https://github.com/kaoDev) - [#600](https://github.com/bvaughn/react-virtualized/pull/600)) +- πŸŽ‰ All `Table` event handlers now receive a named `event` params ([@paulbrom](https://github.com/paulbrom) - [#605](https://github.com/bvaughn/react-virtualized/pull/605)) +- πŸŽ‰ Aria roles for `Table` improved to specify `role="row"` for table rows and `role="rowgroup"` for inner `Grid`. ([@jchen527](https://github.com/jchen527) - [#607](https://github.com/bvaughn/react-virtualized/pull/607)) +- πŸ› Calling `scrollToRow` for `List` or `Table` no longer potentially messes up horizontal scroll position. ([#603](https://github.com/bvaughn/react-virtualized/issues/603)) ##### 9.1.0 -* πŸŽ‰ Public method `setScrollIndexes` added to `ArrowKeyStepper` to enable easier overrides of current/default focused cell. - ([@alexandro81](https://github.com/alexandro81) - [#592](https://github.com/bvaughn/react-virtualized/pull/592)) -* ✨ Replaced `value instanceof Function` checks with `typeof value === 'function'` for improved robustness with iframes/frames/popups. (Learn more [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof#instanceof_and_multiple_context_(e.g._frames_or_windows)).) ([@rickychien](https://github.com/rickychien) - [#596](https://github.com/bvaughn/react-virtualized/pull/596)) -* πŸ› `Grid` props `scrollToColumn` and `scrollToRow` as well as `Collection` prop `scrollToCell` now default to `-1` to avoid false positives from `null>=0` check. - ([#595](https://github.com/bvaughn/react-virtualized/issues/595)) + +- πŸŽ‰ Public method `setScrollIndexes` added to `ArrowKeyStepper` to enable easier overrides of current/default focused cell. - ([@alexandro81](https://github.com/alexandro81) - [#592](https://github.com/bvaughn/react-virtualized/pull/592)) +- ✨ Replaced `value instanceof Function` checks with `typeof value === 'function'` for improved robustness with iframes/frames/popups. (Learn more [here]().) ([@rickychien](https://github.com/rickychien) - [#596](https://github.com/bvaughn/react-virtualized/pull/596)) +- πŸ› `Grid` props `scrollToColumn` and `scrollToRow` as well as `Collection` prop `scrollToCell` now default to `-1` to avoid false positives from `null>=0` check. - ([#595](https://github.com/bvaughn/react-virtualized/issues/595)) ##### 9.0.5 -* πŸŽ‰ Explicitly set `width`/`height` style to "auto" before re-measuring `CellMeasurer` content so that new measurements can be taken. ([#593](https://github.com/bvaughn/react-virtualized/issues/593)) -* πŸ› CellMeasurerCache now correctly recomputes cached row height and column width values when cells are cleared. ([#594](https://github.com/bvaughn/react-virtualized/issues/594)) + +- πŸŽ‰ Explicitly set `width`/`height` style to "auto" before re-measuring `CellMeasurer` content so that new measurements can be taken. ([#593](https://github.com/bvaughn/react-virtualized/issues/593)) +- πŸ› CellMeasurerCache now correctly recomputes cached row height and column width values when cells are cleared. ([#594](https://github.com/bvaughn/react-virtualized/issues/594)) ##### 9.0.4 -* πŸ› Moved flow-bin from 'dependencies' to 'devDependencies'. This was accidentally placed as a dep before. + +- πŸ› Moved flow-bin from 'dependencies' to 'devDependencies'. This was accidentally placed as a dep before. ##### 9.0.3 -* πŸ› `Grid` takes scrollbar size into account when aligning cells for `scrollToColumn` or `scrollToRow` usage. ([#543](https://github.com/bvaughn/react-virtualized/issues/543)) + +- πŸ› `Grid` takes scrollbar size into account when aligning cells for `scrollToColumn` or `scrollToRow` usage. ([#543](https://github.com/bvaughn/react-virtualized/issues/543)) ##### 9.0.2 -* πŸŽ‰ Added additional DEV-only warnings for improperly configured `CellMeasurerCache` based on user-feedback for the new API. -* πŸ› Fixed edge-case where restoring `columnCount` from 0 wouldnt properly restore previous `scrollToRow` offset (and vice versa for `rowCount` and `scrollToColumn`) -* Updated `Grid` and `Collection` to move some state-setting logic related to offsets from `componentWillUpdate` to `componentWillReceiveProps`. This change should have no externally visible impact. ([#585](https://github.com/bvaughn/react-virtualized/issues/585)) + +- πŸŽ‰ Added additional DEV-only warnings for improperly configured `CellMeasurerCache` based on user-feedback for the new API. +- πŸ› Fixed edge-case where restoring `columnCount` from 0 wouldnt properly restore previous `scrollToRow` offset (and vice versa for `rowCount` and `scrollToColumn`) +- Updated `Grid` and `Collection` to move some state-setting logic related to offsets from `componentWillUpdate` to `componentWillReceiveProps`. This change should have no externally visible impact. ([#585](https://github.com/bvaughn/react-virtualized/issues/585)) ##### 9.0.1 -* πŸ› Edge-case bug with scroll-to-index and cell size function property ([#565](https://github.com/bvaughn/react-virtualized/issues/565)) -* πŸ› Edge-case bug with `WindowScroller` and mocked `window` object + +- πŸ› Edge-case bug with scroll-to-index and cell size function property ([#565](https://github.com/bvaughn/react-virtualized/issues/565)) +- πŸ› Edge-case bug with `WindowScroller` and mocked `window` object # 9.0.0 + Version 9 changes and upgrade steps are described in detail on the [version 9 pull request](https://github.com/bvaughn/react-virtualized/pull/577). ##### 8.11.4 -* πŸ› Better guard against minification/uglification in `ColumnSizer` when verifying child is either a `Grid` or a `MultiGrid`. (#558) + +- πŸ› Better guard against minification/uglification in `ColumnSizer` when verifying child is either a `Grid` or a `MultiGrid`. (#558) ##### 8.11.3 -* Adding missing `scrollToRow` method to `List` and `Table` (as pass-thrus for `Grid.scrollToCell`). -* πŸ› Bugfixes with `MultiGrid` resize handling and caching. ([@codingbull](https://github.com/codingbull) - [#552](https://github.com/bvaughn/react-virtualized/pull/552)) -* πŸ› List checks it row-style object has been frozen before modifying width; (fix for [upcoming React 16 change](https://github.com/facebook/react/commit/977357765b44af8ff0cfea327866861073095c12#commitcomment-20648713)). -* πŸ› `MultiGrid` better handles case where `rowCount === fixedRowCount`. + +- Adding missing `scrollToRow` method to `List` and `Table` (as pass-thrus for `Grid.scrollToCell`). +- πŸ› Bugfixes with `MultiGrid` resize handling and caching. ([@codingbull](https://github.com/codingbull) - [#552](https://github.com/bvaughn/react-virtualized/pull/552)) +- πŸ› List checks it row-style object has been frozen before modifying width; (fix for [upcoming React 16 change](https://github.com/facebook/react/commit/977357765b44af8ff0cfea327866861073095c12#commitcomment-20648713)). +- πŸ› `MultiGrid` better handles case where `rowCount === fixedRowCount`. ##### 8.11.2 -* πŸ› Added `MultiGrid` method `measureAllCells`; deprecated misnamed `measureAllRows` method. + +- πŸ› Added `MultiGrid` method `measureAllCells`; deprecated misnamed `measureAllRows` method. ##### 8.11.1 -* πŸ› Fixed regression in `WindowScroller` when browser is resized. ([@andrewbranch](https://github.com/andrewbranch) - [#548](https://github.com/bvaughn/react-virtualized/pull/548)) + +- πŸ› Fixed regression in `WindowScroller` when browser is resized. ([@andrewbranch](https://github.com/andrewbranch) - [#548](https://github.com/bvaughn/react-virtualized/pull/548)) ##### 8.11.0 -* πŸ› Minor Preact compat fix to element resize detector; see [developit/preact-compat/issues/228](https://github.com/developit/preact-compat/issues/228) -* πŸŽ‰ New `scrollToCell` public method added to `Grid`. + +- πŸ› Minor Preact compat fix to element resize detector; see [developit/preact-compat/issues/228](https://github.com/developit/preact-compat/issues/228) +- πŸŽ‰ New `scrollToCell` public method added to `Grid`. ##### 8.10.0 -* πŸŽ‰ `WindowScroller` supports custom target element via a new `scrollElement` prop; defaults to `window` for backwards compatibility. ([@andrewbranch](https://github.com/andrewbranch) - [#481](https://github.com/bvaughn/react-virtualized/pull/481)) -* πŸ› `MultiGrid` supports `onScroll` property. ([@Pana](https://github.com/Pana) - [#536](https://github.com/bvaughn/react-virtualized/pull/536)) -* πŸŽ‰ New id-based `CellMeasurer` cell size cache, `idCellMeasurerCellSizeCache`. ([@bvaughn](https://github.com/bvaughn) - [#538](https://github.com/bvaughn/react-virtualized/pull/538)) + +- πŸŽ‰ `WindowScroller` supports custom target element via a new `scrollElement` prop; defaults to `window` for backwards compatibility. ([@andrewbranch](https://github.com/andrewbranch) - [#481](https://github.com/bvaughn/react-virtualized/pull/481)) +- πŸ› `MultiGrid` supports `onScroll` property. ([@Pana](https://github.com/Pana) - [#536](https://github.com/bvaughn/react-virtualized/pull/536)) +- πŸŽ‰ New id-based `CellMeasurer` cell size cache, `idCellMeasurerCellSizeCache`. ([@bvaughn](https://github.com/bvaughn) - [#538](https://github.com/bvaughn/react-virtualized/pull/538)) ##### 8.9.0 -* New `MultiGrid` reduces the boilerplate required to configure a `Grid` with fixed columns and/or rows. -* `defaultTableRowRenderer` passes new `rowData` param to event handlers (in addition to `index`). -* πŸ› Styles are no longer cached while scrolling for compressed lists ([@nickclaw](https://github.com/nickclaw) - [#527](https://github.com/bvaughn/react-virtualized/pull/527)) -* πŸ› Cell cache is reset once `InfiniteLoader` load completes ([@nickclaw](https://github.com/nickclaw) - [#528](https://github.com/bvaughn/react-virtualized/pull/528)) -* Add loose-envify support for Browserify users ([@chrisvasz](https://github.com/chrisvasz) - [#519](https://github.com/bvaughn/react-virtualized/pull/519), [#523](https://github.com/bvaughn/react-virtualized/pull/523)) -* `dom-helpers` dependency relaxed to support 2.x and 3.x versions ([@danez](https://github.com/danez) - [#522](https://github.com/bvaughn/react-virtualized/pull/522)) -* πŸ› `Collection` no longer drops its `overflow` style in certain conditions; see facebook/react/issues/8689 for more info. +- New `MultiGrid` reduces the boilerplate required to configure a `Grid` with fixed columns and/or rows. +- `defaultTableRowRenderer` passes new `rowData` param to event handlers (in addition to `index`). +- πŸ› Styles are no longer cached while scrolling for compressed lists ([@nickclaw](https://github.com/nickclaw) - [#527](https://github.com/bvaughn/react-virtualized/pull/527)) +- πŸ› Cell cache is reset once `InfiniteLoader` load completes ([@nickclaw](https://github.com/nickclaw) - [#528](https://github.com/bvaughn/react-virtualized/pull/528)) +- Add loose-envify support for Browserify users ([@chrisvasz](https://github.com/chrisvasz) - [#519](https://github.com/bvaughn/react-virtualized/pull/519), [#523](https://github.com/bvaughn/react-virtualized/pull/523)) +- `dom-helpers` dependency relaxed to support 2.x and 3.x versions ([@danez](https://github.com/danez) - [#522](https://github.com/bvaughn/react-virtualized/pull/522)) +- πŸ› `Collection` no longer drops its `overflow` style in certain conditions; see facebook/react/issues/8689 for more info. ##### 8.8.1 + Fixed a bug with `Grid` style-cache that caused stale cell-sizes to be used when `Grid` resized. ##### 8.8.0 + `Grid` now temporarily caches inline style objects to avoid causing shallow compare to fail unnecessarily (see [PR 506](https://github.com/bvaughn/react-virtualized/pull/506)). `AutoSizer` internal `detectElementResize` library now no longer creates duplicate `` tags when unmounted and remounted (see [PR 507](https://github.com/bvaughn/react-virtualized/pull/507)). ##### 8.7.1 + Reverted part of the change introduced in version 8.6.0 that changed the behavior regarding controlled/uncontrolled `scrollTop` and `scrollLeft` props and `Grid` in a way that was not backwards compatible. (See issue #490 for more.) ##### 8.7.0 + Added `updatePosition` to `WindowScroller` to handle case when header items change or resize. `WindowScroller` also better handles window resize events. ##### 8.6.1 + Updated `CellSizeCache` interface for the better perfomance by removing `has` methods, reducing a double hashtable lookup to a single lookup. Special thanks to @arusakov for this contribution! ##### 8.6.0 + `CellMeasurer` passes `index` param (duplicate of `rowIndex`) in order to more easily integrate with `List` by default. `Grid` now better handles a mix of controlled and uncontrolled scroll offsets. Previously changes to one offset would wipe out the other causing cells to disappear (see PR #482). This is an edge-case bug and only impacted an uncommon usecase for `Grid`. As such this change is expected to only impact only a small percetange of users. ##### 8.5.3 + Changed overscan rows/cols behavior as described [here](https://github.com/bvaughn/react-virtualized/pull/478). This change targets performance improvements only and should have no other noticeable impact. ##### 8.5.2 + Added guard against potential `null` return value from `getComputedStyle` for hidden elements (see PR #465). ##### 8.5.1 + `Table` header height is no longer subtracted from overall (rows) height if header is disabled. Thanks to @Jakehp for this contribution! ##### 8.5.0 + Added `disabled` property to `ArrowKeyStepper`; when `true` this component ignores keyboard events. ##### 8.4.1 + `Collection` and `Grid` now set a default `direction: ltr` style property. Neither component gracefully handles RTL layout at the moment and so it is disabled by default. Cells within either component can be layed out RTL without any problem though. To do so, just add an additional `direction: rtl` style property via the cell renderer. ##### 8.4.0 + `ArrowKeyStepper` incrementing behavior can now be further customized via new `mode` prop. Default behavior will remain the same (eg `mode='edges'`). Use `mode='cells'` to prefer smaller increments. ##### 8.3.1 + Fixed `scrollToAlignment` bug in `Collection` that caused cells not to render under certain conditions. Special thanks to @coluccini for spotting and fixing this bug! ##### 8.3.0 + `cellRenderer` and `rowRenderer` callbacks now accept an additional property, `isVisible`. This property can be used to differentiate between visible and overscanned cells. Thanks to @mbrevda for this feature! ##### 8.2.0 + Added optional `id` prop to `Collection`, `Grid`, `List`, and `Table`. Thanks to @mnquintana for the contribution! ##### 8.1.1 + Wrapped component `propTypes` with `process.env.NODE_ENV !== 'production'` so they can be stripped from production builds. Thanks to @mbrevda for the suggestion and contribution. ##### 8.1.0 + Added `containerStyle` property to `Grid`. This property allows custom styling to be applied to the inner cell-containing div. This can be used to enable padding within the grid. @@ -372,10 +483,12 @@ This event is now specifically checked for and removed. Special thanks to @yb (PR #436) for this bugfix contribution. ##### 8.0.13 + Replaces references to `getComputedStyle` with `window.getComputedStyle` to better support Enzyme. Thanks to @DevinClark for the contribution! ##### 8.0.12 + Added "module" entry to `package.json` in order to support ES modules with the latest Webpack. This should enable tree-shaking support ouf of the box for Webpack. Rollup will continue to use the "jsnext:main" entry to my knowledge. @@ -384,24 +497,30 @@ For more info see https://github.com/dherman/defense-of-dot-js/blob/master/propo Related issues: webpack/webpack#1979, bvaughn/react-virtualized/issues/427 ##### 8.0.11 + Fixed an invalid export for `IS_SCROLLING_TIMEOUT` inside the `WindowScroller` module. ##### 8.0.10 + Changed the embedded `detect-element-resize` library `includes` call to use `indexOf` instead for better IE compatibility. ##### 8.0.9 + `scrollToColumn` and `scrollToRow` offsets will always be 0 when `Grid` size is <= 0. Technically this is an invalid size but a 0 offset is a more meaningful return value. Previously the min/max offset check could result in a positive offset in this case (which is invalid). ##### 8.0.8 + Fixes bug in resize detector that broke scrollbar functionality in Safari. ##### 8.0.7 + Fixed a small `Table` alignment issue due to conflicting `padding-right` and `width: 100%` value. Also fixed an edge-case horiztonal scrollbar that was appearing for some tables. ##### 8.0.6 + Updated the embedded `detect-element-resize` library to reduce the number of reflows it triggered. This library was forcing reflow (to measure itself) each time a scroll event occurred within its children. This was unnecessary since it really only cared about resizes to its expand-trigger and collapse-trigger. @@ -412,100 +531,128 @@ This opens the door to potentially using passive scroll event handlers in the fu It also fixes a long-standing bug that prevented scrollbars from working correctly within auto-sized-content. ##### 8.0.5 + `Grid` notifies `onScroll` callback if `scrollLeft` or `scrollTop` have changed in response to prop changes (including `scrollToColumn` or `scrollToRow`). ##### 8.0.4 + Fixed a small regression in the `Table` component that caused a horizontal scrollbar to appear. ##### 8.0.3 + Removed unnecessary `react-router` dependency. (This was accidentally added as to `dependencies` when it should have been in `devDependencies`). ##### 8.0.2 + Improved fix for regression with scaled `Grid`s that caused position offsets to be incorrect while scrolling. ##### 8.0.1 + Initial attempt at fixing regression with scaled `Grid`s that caused position offsets to be incorrect while scrolling. # 8.0.0 + Version 8 changes are described in detail on the [Version 8 Roadmap](https://github.com/bvaughn/react-virtualized/issues/386). Upgrade instructions and [jscodeshift](https://github.com/facebook/jscodeshift) mods can be found [here](docs/upgrades/Version8.md). ##### 7.24.3 + ES module build (_jsnext:main_ target) updated to depend on Babel's `transform-runtime` rather than referencing global `babelHelpers`. This should fix support within projects like `react-boilerplate`. ##### 7.24.2 + `Grid` and `Collection` now set `pointer-events: ''` (instead of _auto_) after scrolling has stopped to avoid overriding parents who may have specified `pointer-events: 'none'`. ##### 7.24.1 + Refactored `AutoSizer` slightly to add support for `react-lite`. Note that if you intend to use the UMD build of `react-lite` the following lines are required before `react-virtualized` is loaded: + ```js React.addons = { - shallowCompare (context, nextProps, nextState) { - return React.PureComponent.prototype.shouldComponentUpdate(nextProps, nextState) - } + shallowCompare(context, nextProps, nextState) { + return React.PureComponent.prototype.shouldComponentUpdate( + nextProps, + nextState, + ); + }, }; ReactDOM = React; ``` ##### 7.24.0 + Added `autoHeight` prop to `Collection` so that it can more easily be used with `WindowScroller`. ##### 7.23.0 + `Grid` scrolling timeout for pointer events can be customized now via `scrollingResetTimeInterval` property. This defaults to 150ms (as before). Also addressed a couple of small bugs as well: -* Multiple `WindowScroller` instances can be used on a single page now without interfering with each other's `pointer-events` settings. -* Calling `recomputeGridSize` on `Grid` (or any of its wrapping HOCs) will clear any pending cell cache to avoid edge-case issue where a scrolling `Grid` has invalid cached cells due to a change in the underlying collection data. + +- Multiple `WindowScroller` instances can be used on a single page now without interfering with each other's `pointer-events` settings. +- Calling `recomputeGridSize` on `Grid` (or any of its wrapping HOCs) will clear any pending cell cache to avoid edge-case issue where a scrolling `Grid` has invalid cached cells due to a change in the underlying collection data. ##### 7.22.3 + While a scroll is in progress, `Grid` focuses overscan on the direction being scrolled- doubling up the number of overscanned cells. This reduces the amount of empty space that temporarily appears when a user is quickly scrolling. It does not increase the overall number of cells being rendered (and so does not negatively impact performance). ##### 7.22.2 + In the event that size or cell count decreases for a `Grid`, remaining cells are no longer remeasured in order to verify the current scroll offset. Instead the most recent measurements are used. This change should positively impact performance but should have no other affect. ##### 7.22.1 + `InfiniteLoader` now better handles `FlexTable` and `VirtualScroll` children by calling `forceUpdateGrid` when defined. This prevents rows from being stuck in a visual "loading" state until a user scrolls. ##### 7.22.0 + Updated the exported `defaultCellMeasurerCellSizeCache` to support configured uniform column widths and/or row heights. This allows greater customization and flexibility than the version released in 7.21.0. For backwards compat `uniformSizeCellMeasurerCellSizeCache` is still exported but also points to `defaultCellMeasurerCellSizeCache`. ##### 7.21.1 + Lowered the `ScalingCellSizeAndPositionManager` maximum scroll threshold from 10M to 1.5M pixels to accommodate Edge's lower-than-expected `scrollTop` maximum. ##### 7.21.0 + New `cellSizeCache` added for `CellMeasurer` (`uniformSizeCellMeasurerCellSizeCache`) for cells that have a _dyanmic but uniform_ width or height. This cache will measure only a single cell and then return its width and height for all other cells. This allows for greater performance optimization for use cases like virtualized drop-down lists, etc. ##### 7.20.0 + `Collection` now temporarily caches cells while scrolling is in progress. ##### 7.19.4 + Initialize `WindowScroller` height to `window.innerHeight` if component is initially rendered in the browser. This fixes temporary zero-height that would cause previous scroll position to be lost when a user navigates back in their history. ##### 7.19.3 + Improved memoization in `InfiniteLoader` to reduce repeated calls to `loadMoreRows`. ##### 7.19.2 + Edge-case bug fix for `WindowScroller` when user returning to a page (via browser back button) that has already been scrolled. Previously, `WindowScroller` failed to correctly calculate its position from the top under these conditions. Now it calculates the proper position. ##### 7.19.1 + `WindowScroller` auto-restores body pointer-events when unmounted to fix edge-case bug when component was unmounted during (or _right after_) scrolling. ##### 7.19.0 + `CellMeasurer` now properly uses `shallowCompare`. It also supports a custom caching strategy for measured cell sizes (see `cellSizeCache` prop). @@ -514,91 +661,113 @@ These properties enable the `Collection` to "overscan" its content similar to ho This can reduce flicker around the edges when a user scrolls quickly. ##### 7.18.1 + Fixed edge-case scroll-to-cell bug in `Grid` when row or column count increases from 0 after a scroll-offset was previous assigned. For more info see issue #218. ##### 7.18.0 + Added named exports for `defaultFlexTableCellDataGetter`, `defaultFlexTableCellRenderer`, and `defaultFlexTableHeaderRenderer` due to user request. ##### 7.17.1 + Fixed a `Collection` bug that could cause the `noContentRenderer` to be shown when a collection happened to contain no visible children (due to a sparse layout). ##### 7.17.0 + `CellMeasurer` exposes 2 new public methods: `resetMeasurementForColumn` and `resetMeasurementForRow`. These methods allow a finer grain of control over the cell measurement cache. Learn more [here](docs/CellMeasurer.md#children-function). ##### 7.16.0 + Added new property `autoContainerWidth` to `Grid`. It can be used to set the width of the inner scrollable container to 'auto'. This is useful for single-column Grids to ensure that the column doesn't extend below a vertical scrollbar. By default this is disabled but `VirtualScroll` and `FlexTable` both enable it on their inner `Grid`s. ##### 7.15.1 + Renamed `Grid` refs within `FlexTable` and `VirtualScroll` from `_grid` to `Grid`. This is done to better support interoperability between `FlexTable` and `react-sortable-hoc` which requires a handle on the inner `Grid`. Technically the change is not required but it is more inline with JavaScript naming conventions (since I plan to preserve this property from an Api perspective). ##### 7.15.0 + Added support for greater `FlexTable` customization via a new `rowRenderer` property. Also exported default implementation as `defaultFlexTableRowRenderer`. Learn more [here](docs/FlexTable.md#rowrenderer). ##### 7.14.0 + `WindowScroller` component passes new named argument, `isScrolling`, to its child render function. ##### 7.13.0 + Added `onRowDoubleClick` support to `FlexTable`. ##### 7.12.3 + `CellMeasurer` implementation changed to use `ReactDOM.unstable_renderSubtreeIntoContainer` instead of `ReactDOMServer.renderToString` in order to support `context`. `Grid` has been changed slightly as well to calculate its visible children just before `render` (instead of in it). This change is not expected to have any public-facing consequences beyond supporting the `context` property for `CellMeasure`d cells. Thanks to @jquense for this contribution! ##### 7.12.2 + User-specified `Grid` and `Collection` styles can now override default style options (eg overflow, height/width). ##### 7.12.1 + Fixed unexpected usage of `recomputeRowHeights` / `recomputeGridSize` where method is called with an index higher than the last measured row/cell index. Cell measurer now properly updates the value only if the requested index is lower than the most-recently-measured cell. ##### 7.12.0 + `FlexTable` `rowStyle` property can now be a on Object _or_ a function similar to the `rowClassName` property. ##### 7.11.8 + Fixed edge-case bug previously possible when combining the `scrollToAlignment` property with `scrollToRow` or `scrollToColumn` at the end of a collection. Under certain circumstances this caused the grid to scroll too far; that has now been resolved. Center-alignment logic has also been improved to better align scrolled cells. ##### 7.11.7 + Removed `xmlns` property from `` tag in `SortEditor` to avoid React 15.2 property warning. ##### 7.11.6 + Fixed `CellMeasurer` throws "Only a ReactOwner can have refs" error. ##### 7.11.5 + Small change to inline styles for `Grid` to work around obscure bug where an initial scroll offset prop is specified before external CSS stylesheets have loaded. ##### 7.11.4 + Added more pass-thru props from `VirtualScroll` to `Grid` to ensure that when `VirtualScroll` re-renders (due to changed props) so does its inner `Grid`. Both components are still "pure" (from a shallow comparison perspective). ##### 7.11.3 + Updated `Grid` and `VirtualScroll` so that the width of rows in a `VirtualScroll` does not stretch beneath a scrollbar (if one is visible). ##### 7.11.2 + Added more pass-thru props from `FlexTable` to `Grid` to ensure that when `FlexTable` re-renders (due to changed props) so does its inner `Grid`. Both components are still "pure" (from a shallow comparison perspective). This just avoids the unintuitive use-case where some table properties (eg headers) may change while others (eg rows) do not. ##### 7.11.1 + Updated UMD build to remove `react-addons-shallow-compare` from the build. UMD users should use `react-with-addons.min.js` (should have already been using it in fact) instead of `react.min.js`. Thanks to @ducky427 for reporting this oversight and updating the Webpack config! ##### 7.11.0 + The `recomputeRowHeights` method of `FlexTable` and `VirtualScroll` accepts an optional index (defaults to 0) after which to recompute sizes. The `recomputeGridSize` method of `Grid` accepts named `columnIndex` and `rowIndex` parameters tha function similarly. @@ -610,29 +779,36 @@ If several items in the collection have changed and you are unsure of which, it This remains the default behavior unless override indices are specified as parameters. ##### 7.10.0 + New `gridClassName` and `gridStyle` pass-through properties added to `FlexTable`. ##### 7.9.1 + Fixed edge-case bug in `FlexTable` that caused the inner `Grid` not to update when there was a vertical scrollbar. This in turn caused headers to be misaligned. ##### 7.9.0 + Added `forceUpdateGrid` method to `FlexTable` and `VirtualScroll` to enable the inner `Grid` to be udpated without resorting to recomputing cached row heights. ##### 7.8.3 + `Grid` no longer checks `scrollTop` when `autoHeight=true` in order to avoid unnecessary reflows/repaints. This change only impacts `WindowScroller` use cases. ##### 7.8.2 + Fixed edge-case problem with `FlexTable` where changes to the number of children (`FlexColumn`s) didn't update the inner `Grid`. ##### 7.8.1 + Reverted default `tabIndex = null` value for `Grid` (introduced in 7.8.0) due to a negative accessibility impact. A focused `Grid` paints significantly more while scrolling which impacts FPS. Unfortunately it is a necessity to support keyboard scrolling properly and so it's the default once more. This can be explicitly disabled by setting `tabIndex = null` if you want. ##### 7.8.0 + Scrolling performance improvements for `FlexTable` and to a lesser extent `Grid`. The primary change to `Grid` is that `tabIndex` will be set to `null` by default instead of `0`. @@ -646,43 +822,53 @@ This release also changes the primary `FlexTable` cell from a flex container to This means that if you were right-aligning text within a column you will need to change from `align-items: flex-end` to `text-align: right`. ##### 7.7.1 + Export the `defaultCellRangeRenderer` used by `Grid` in order to enable easier composition. ##### 7.7.0 + Added configurable `tabIndex` property to `Grid`, `FlexTable`, and `VirtualScroll`. Default value remains 0 but can now be overridden. ##### 7.6.0 + New property added to `Grid`, `FlexTable`, and `VirtualScroll` to enable custom CSS class name and style to be added to the outer cell decorator. This can be used to greater customize styles as well as to better implement custom (non-flexbox) styles for IE9. Thanks to nicholasrq@ for this contribution! ##### 7.5.0 + New `WindowScroller` HOC added to enable a `FlexTable` or `VirtualScroll` component to be scrolled based on the window's scroll positions. This can be used to create layouts similar to Facebook or Twitter news feeds. Big thanks to minheq@ for this contribution! ##### 7.4.0 + Added mouse-over and mouse-out row-level events to `FlexTable`. Thanks to @queeto for the PR! ##### 7.3.3 + Fixed unintention regression in IE10 support introduced with `ScalingCellSizeAndPositionManager` extending `CellSizeAndPositionManager`. Inheritance has been replaced with composition for this case in order to simplify IE10 compatibility. Notice that Babel `babel-polyfill` is still required in order to support other ES5 features. ##### 7.3.2 + Edge-case bug fix for `CellMeasurer` in the event that its `getRowHeight` or `getColumnWidth` method gets called before the initial render completes. ##### 7.3.1 + Increased the safe-scale size from 1,000,000 to 10,000,000 to make for better UX. ##### 7.3.0 + `Grid` (and its HOCs `FlexTable` and `VirtualScroll`) now support larger heights and widths than browsers support natively. For example, the current version of Chrome will not allow users to scroll pass ~33.5M pixel offset. To work around this limitation, `Grid` increases the density of cells, shifting them as a ratio of what the full scrollable size would be to a browser-safe size. This should be more or less transparent to users, although in extreme cases it can lead to _really sensitive_ scroll responsiveness. ##### 7.2.0 + Added new method- `measureAllCells`- to `Grid`, `FlexTable`, and `VirtualScroll` to force-measure all cells. This supports special use-cases where deferred measuring is not desired. @@ -691,78 +877,99 @@ Added `estimatedRowSize` property to `FlexTable` and `VirtualScroll` to be passe Also added guard to ensure the `onScroll` callback for `Collection`, `Grid`, `FlexTable`, and `VirtualScroll` is never called with a negative number. ##### 7.1.3 + The inner javascript-detect-element-resize library used by `AutoSizer` now passes the proper `useCapture` value when removing listeners as well. This should prevent lingering event listeners in certain cases. Thanks to @cyberxndr for this fix. ##### 7.1.2 + Added "_center_" option for `scrollToAlignment` property of `Collection`, `Grid`, `FlexTable`, and `VirtualScroll`. Thanks to @edulan for the contribution! Also added a check to avoid rendering content frmo `noContentRenderer` if `width` or `height` are 0. ##### 7.1.1 + Resolved edge-case bug that caused the bottom/right cells in a `Grid` or `Collection` to be partially overlapped by a scrollbar. Thanks to @anjianshi for reporting this and collaborating on the fix! ##### 7.1.0 + Added `scrollToAlignment` property to `Collection`, `Grid`, `FlexTable`, and `VirtualScroll` to offer finer-grained control of how scrolled-to cells are aligned. Default behavior ("_auto_") remains unchanged- the least amount of scrolling will occur to ensure that the specified cell is visible. ##### 7.0.5 + Fixed edge-case bug where `InfiniteLoader` did not respect `minBatchSize` setting when a user was scrolling up. ##### 7.0.4 + Added `scrollLeft` and `scrollTop` parameters to `cellRangeRenderer` callback for `Grid`. ##### 7.0.3 + Added `box-sizing: border-box` rules to `.FlexTable__headerRow` and `.FlexTable__Grid` classes to fix edge-case scrollbar bug experienced by some users. ##### 7.0.2 + Added `recomputeCellSizesAndPositions` method to `Collection` (to pass through to inner `CollectionView`). ##### 7.0.1 + Replaced single occurence of `Number.isNaN` with `isNaN` to avoid IE compatibility issues. # 7.0.0 + Version 7 changes are described in detail on the [Version 7 Roadmap wiki page](https://github.com/bvaughn/react-virtualized/wiki/Version-7-Roadmap). Upgrade instructions and [jscodeshift](https://github.com/facebook/jscodeshift) mods can also be found there. To run a code mod, check out react-virtualized (or download the codemod) and then... + ``` jscodeshift -t /path/to/react-virtualized/codemods/6-to-7/rename-properties.js source ``` ##### 6.3.2 + Fixed edge-case bug in `Collection` where initial `scrollLeft` and `scrollTop` would not correctly adjust inner offsets. Thanks @edulan for the contribution! ##### 6.3.1 + Added better checks against invalid style properties in `AutoSizer` to protected against the case when it is removed from the DOM immediately after being added. ##### 6.3.0 + Added new `minimumBatchSize` property to `InfiniteLoader` to simplify HTTP request batching. Fixed edge-case NPE with `AutoSizer` when it is unmounted immediately after being mounted. ##### 6.2.2 + Fixed off-by-one for `InfiniteLoader` that caused it to request one too many rows when scrolled to the end of the list. ##### 6.2.1 + `FlexTable` supports `true`, `false`, `undefined`, and `null` children now to more easily enable support for dynamic columns (see issue #174). Improved edge-case handling for changes to cell counts when scroll-to-index properties have been set. ### 6.2.0 + Added new `Collection` component for rendering non-checkboard data. This component's cells can be positioned in any arrangement, even overlapping. Note that because it has fewer constraints, `Collection` cannot compute positioning and layout data as fast as `Grid`. ##### 6.1.2 + Moved `react-addons-shallow-compare` from `dependencies` to `peerDependencies`. ##### 6.1.1 + Updated React dependency ranges now that 15.0 has been released. ### 6.1.0 + `Grid` supports a new `renderCellRanges` property for customizing the rendering of a window of cells. This function should implement the following signature: + ```js function renderCellRanges ({ columnMetadata:Array, @@ -776,32 +983,40 @@ function renderCellRanges ({ ``` ##### 6.0.8 + Fixed dependency ranges for `react-addons-shallow-compare` and `react-dom`. ##### 6.0.7 + Added key handling to sortable `FlexTable` headers so that ENTER and SPACE keys can be used to toggle sort direction. ##### 6.0.6 + Added conditional checks to when `aria-label`, `role`, and `tabIndex` get attached to `FlexTable` headers and rows. These a11y properties are only added when on-click or sort handlers are present. ##### 6.0.5 + Added `aria-label` and `role` attributes to `FlexTable`, `Grid`, and `VirtualScroll` components to fix a11y issues reported by [reactjs/react-a11y](https://github.com/reactjs/react-a11y). Thanks to @globexdesigns for the contributions! ##### 6.0.4 + Separated horiontal and vertical `Grid` metadata calculation to avoid unnecessarily recomputing row metadata for `FlexTable`s and `VirtualScroll`s when a browser's window is resized, for example. Also replaced `columnWidth` and `rowHeight` getter uses in `Grid.render` in favor of cached cell metadata instead. ##### 6.0.3 + Small update to `FlexTable` to move the `rowGetter` call outside of the column loop to reduce the number of times that method gets called. ##### 6.0.2 + Added [transform-react-inline-elements](http://babeljs.io/docs/plugins/transform-react-inline-elements/) to UMD build for minor runtime performance improvements. This change does not effect CommonJS or ES6 module builds because I did not want to remove prop-type checks. You should apply this transformation step as part of your own production build pipeline. ##### 6.0.1 + Removed lingering references to `react-pure-render` with with [`shallowCompare`](https://facebook.github.io/react/docs/shallow-compare.html). This was meant to be part of the initial 6.0 release but was left out accidentally. @@ -812,7 +1027,8 @@ Version 6 includes the following changes. At a high-level the purpose of this release is to improve customization and flexibility with regard to arrow-key event handling. ### Backwards-incompatible changes -* Refactored `Grid` to remove arrow-key scroll-snapping. Instead this feature is implemented in a HOC, `ArrowKeyStepper`. The upgrade path from React 5.x to 6.x if you want to maintain arrow-key navigation behavior is as follows: + +- Refactored `Grid` to remove arrow-key scroll-snapping. Instead this feature is implemented in a HOC, `ArrowKeyStepper`. The upgrade path from React 5.x to 6.x if you want to maintain arrow-key navigation behavior is as follows: ```jsx // Before... @@ -835,24 +1051,29 @@ At a high-level the purpose of this release is to improve customization and flex )} ``` -* The following public methods have also be removed from components: - * `FlexTable`: `scrollToRow` (use `scrollToIndex` prop instead), `setScrollTop` (use `scrollTop` prop instead) - * `Grid`: `scrollToCell` (use `scrollToColumn` and `scrollToRow` props instead), `setScrollPosition` (use `scrollLeft` and `scrollTop` props instead) - * `VirtualScroll`: `scrollToRow` (use `scrollToIndex` prop instead), `setScrollTop` (use `scrollTop` prop instead) + +- The following public methods have also be removed from components: + - `FlexTable`: `scrollToRow` (use `scrollToIndex` prop instead), `setScrollTop` (use `scrollTop` prop instead) + - `Grid`: `scrollToCell` (use `scrollToColumn` and `scrollToRow` props instead), `setScrollPosition` (use `scrollLeft` and `scrollTop` props instead) + - `VirtualScroll`: `scrollToRow` (use `scrollToIndex` prop instead), `setScrollTop` (use `scrollTop` prop instead) ### Backwards-compatible changes -* Replaced (the now unsupported) `react-pure-render` with [`shallowCompare`](https://facebook.github.io/react/docs/shallow-compare.html). + +- Replaced (the now unsupported) `react-pure-render` with [`shallowCompare`](https://facebook.github.io/react/docs/shallow-compare.html). ##### 5.5.6 + Max scroll position logic in `Grid` now takes scrollbar size into consideration. Also includes a small `render` optimization for null cells. This release made possible by @jquense! ##### 5.5.5 + Updated `package.json` to support React `^0.14.0` as well as `^15.0.0-rc.1`. Thanks to @opichals for the PR. ##### 5.5.4 + Changed key-down event handler in `VirtualScroll`, `FlexTable`, and `Grid` to no longer call `event.preventDefault()` for arrow-key events. This was causing poor user interactions for `React virtualized](http://bvaughn.github.io/react-virtualized/) -[![NPM version](https://img.shields.io/npm/v/react-virtualized.svg?style=flat)](https://www.npmjs.com/package/react-virtualized) -![NPM license](https://img.shields.io/npm/l/react-virtualized.svg?style=flat) -[![NPM total downloads](https://img.shields.io/npm/dt/react-virtualized.svg?style=flat)](https://npmcharts.com/compare/react-virtualized?minimal=true) -[![NPM monthly downloads](https://img.shields.io/npm/dm/react-virtualized.svg?style=flat)](https://npmcharts.com/compare/react-virtualized?minimal=true) -[![CircleCI](https://circleci.com/gh/bvaughn/react-virtualized/tree/master.svg?style=svg)](https://circleci.com/gh/bvaughn/react-virtualized/tree/master) -[![Codecov badge](https://img.shields.io/codecov/c/github/bvaughn/react-virtualized/master.svg)](https://codecov.io/github/bvaughn/react-virtualized) -[![Slack chat](https://react-virtualized.now.sh/badge.svg)](https://react-virtualized.now.sh) -[![OpenCollective](https://opencollective.com/react-virtualized/backers/badge.svg)](#backers) -[![OpenCollective](https://opencollective.com/react-virtualized/sponsors/badge.svg)](#sponsors) - React components for efficiently rendering large lists and tabular data. Check out [the demo](https://bvaughn.github.io/react-virtualized/) for some examples. -Join the official Slack chat at [react-virtualized.now.sh](https://react-virtualized.now.sh/). + +### If you like this project, πŸŽ‰ [become a sponsor](https://github.com/sponsors/bvaughn/) or β˜• [buy me a coffee](http://givebrian.coffee/) ### Sponsors + The following wonderful companies have sponsored react-virtualized: @@ -83,13 +75,11 @@ The following wonderful companies have sponsored react-virtualized: -A word about `react-window` ---------------- +## A word about `react-window` If you're considering adding `react-virtualized` to a project, take a look at [`react-window`](https://github.com/bvaughn/react-window) as a possible lighter-weight alternative. [Learn more about how the two libraries compare here.](https://github.com/bvaughn/react-window#how-is-react-window-different-from-react-virtualized) -Getting started ---------------- +## Getting started Install `react-virtualized` using npm. @@ -106,16 +96,16 @@ For example: // The Table component ships with a few presentational styles as well. // They are optional, but if you want them you will need to also import the CSS file. // This only needs to be done once; probably during your application's bootstrapping process. -import 'react-virtualized/styles.css' +import 'react-virtualized/styles.css'; // You can import any component you want as a named export from 'react-virtualized', eg -import { Column, Table } from 'react-virtualized' +import {Column, Table} from 'react-virtualized'; // But if you only use a few react-virtualized components, // And you're concerned about increasing your application's bundle size, // You can directly import only the components you need, like so: -import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer' -import List from 'react-virtualized/dist/commonjs/List' +import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer'; +import List from 'react-virtualized/dist/commonjs/List'; ``` Note webpack 4 makes this optimization itself, see the [documentation](https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free). @@ -133,6 +123,7 @@ If the above syntax looks too cumbersome, or you import react-virtualized compon ``` Then you can just import like so: + ```js import List from 'react-virtualized/List'; @@ -142,15 +133,14 @@ import List from 'react-virtualized/List'; You can also use a global-friendly UMD build: ```html - + ``` Now you're ready to start using the components. You can learn more about which components react-virtualized has to offer [below](#documentation). -Dependencies ---------------- +## Dependencies React Virtualized has very few dependencies and most are managed by NPM automatically. However the following peer dependencies must be specified by your project in order to avoid version conflicts: @@ -158,8 +148,7 @@ However the following peer dependencies must be specified by your project in ord [`react-dom`](https://www.npmjs.com/package/react-dom). NPM will not automatically install these for you but it will show you a warning message with instructions on how to install them. -Pure Components ---------------- +## Pure Components By default all react-virtualized components use [`shallowCompare`](https://facebook.github.io/react/docs/shallow-compare.html) to avoid re-rendering unless props or state has changed. This occasionally confuses users when a collection's data changes (eg `['a','b','c']` => `['d','e','f']`) but props do not (eg `array.length`). @@ -176,10 +165,7 @@ However you can pass through the additional sort property to trigger a re-render For example: ```js - + ``` ###### Public methods @@ -187,78 +173,75 @@ For example: `Grid` and `Collection` components can be forcefully re-rendered using [`forceUpdate`](https://facebook.github.io/react/docs/component-api.html#forceupdate). For `Table` and `List`, you'll need to call [`forceUpdateGrid`](https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md#forceupdategrid) to ensure that the inner `Grid` is also updated. For `MultiGrid`, you'll need to call [`forceUpdateGrids`](https://github.com/bvaughn/react-virtualized/blob/master/docs/MultiGrid.md#forceupdategrids) to ensure that the inner `Grid`s are updated. -Documentation ---------------- +## Documentation API documentation available [here](docs/README.md). There are also a couple of how-to guides: -* [Customizing classes and styles](docs/customizingStyles.md) -* [Displaying items in reverse order](docs/reverseList.md) -* [Using AutoSizer](docs/usingAutoSizer.md) -* [Creating an infinite-loading list](docs/creatingAnInfiniteLoadingList.md) -* [Natural sort Table](docs/tableWithNaturalSort.md) -* [Sorting a Table by multiple columns](docs/multiColumnSortTable.md) +- [Customizing classes and styles](docs/customizingStyles.md) +- [Displaying items in reverse order](docs/reverseList.md) +- [Using AutoSizer](docs/usingAutoSizer.md) +- [Creating an infinite-loading list](docs/creatingAnInfiniteLoadingList.md) +- [Natural sort Table](docs/tableWithNaturalSort.md) +- [Sorting a Table by multiple columns](docs/multiColumnSortTable.md) -Examples ---------------- +## Examples Examples for each component can be seen in [the documentation](docs/README.md). Here are some online demos of each component: -* [ArrowKeyStepper](https://bvaughn.github.io/react-virtualized/#/components/ArrowKeyStepper) -* [AutoSizer](https://bvaughn.github.io/react-virtualized/#/components/AutoSizer) -* [CellMeasurer](https://bvaughn.github.io/react-virtualized/#/components/CellMeasurer) -* [Collection](https://bvaughn.github.io/react-virtualized/#/components/Collection) -* [ColumnSizer](https://bvaughn.github.io/react-virtualized/#/components/ColumnSizer) -* [Grid](https://bvaughn.github.io/react-virtualized/#/components/Grid) -* [InfiniteLoader](https://bvaughn.github.io/react-virtualized/#/components/InfiniteLoader) -* [List](https://bvaughn.github.io/react-virtualized/#/components/List) -* [Masonry](https://bvaughn.github.io/react-virtualized/#/components/Masonry) -* [MultiGrid](https://bvaughn.github.io/react-virtualized/#/components/MultiGrid) -* [ScrollSync](https://bvaughn.github.io/react-virtualized/#/components/ScrollSync) -* [Table](https://bvaughn.github.io/react-virtualized/#/components/Table) -* [WindowScroller](https://bvaughn.github.io/react-virtualized/#/components/WindowScroller) +- [ArrowKeyStepper](https://bvaughn.github.io/react-virtualized/#/components/ArrowKeyStepper) +- [AutoSizer](https://bvaughn.github.io/react-virtualized/#/components/AutoSizer) +- [CellMeasurer](https://bvaughn.github.io/react-virtualized/#/components/CellMeasurer) +- [Collection](https://bvaughn.github.io/react-virtualized/#/components/Collection) +- [ColumnSizer](https://bvaughn.github.io/react-virtualized/#/components/ColumnSizer) +- [Grid](https://bvaughn.github.io/react-virtualized/#/components/Grid) +- [InfiniteLoader](https://bvaughn.github.io/react-virtualized/#/components/InfiniteLoader) +- [List](https://bvaughn.github.io/react-virtualized/#/components/List) +- [Masonry](https://bvaughn.github.io/react-virtualized/#/components/Masonry) +- [MultiGrid](https://bvaughn.github.io/react-virtualized/#/components/MultiGrid) +- [ScrollSync](https://bvaughn.github.io/react-virtualized/#/components/ScrollSync) +- [Table](https://bvaughn.github.io/react-virtualized/#/components/Table) +- [WindowScroller](https://bvaughn.github.io/react-virtualized/#/components/WindowScroller) And here are some "recipe" type demos: -* [Table with resizable (drag and drop) columns](https://codesandbox.io/s/j30k46l7xw) -* [Collapsable tree view](https://rawgit.com/bvaughn/react-virtualized/master/playground/tree.html) -* [Full-page grid (spreadsheet)](https://rawgit.com/bvaughn/react-virtualized/master/playground/grid.html) -* [Dynamic cell measuring](https://rawgit.com/bvaughn/react-virtualized/master/playground/chat.html) -* [Cell hover effects](https://rawgit.com/bvaughn/react-virtualized/master/playground/hover.html) - -Supported Browsers ---------------- + +- [Table with resizable (drag and drop) columns](https://codesandbox.io/s/j30k46l7xw) +- [Collapsable tree view](https://rawgit.com/bvaughn/react-virtualized/master/playground/tree.html) +- [Full-page grid (spreadsheet)](https://rawgit.com/bvaughn/react-virtualized/master/playground/grid.html) +- [Dynamic cell measuring](https://rawgit.com/bvaughn/react-virtualized/master/playground/chat.html) +- [Cell hover effects](https://rawgit.com/bvaughn/react-virtualized/master/playground/hover.html) + +## Supported Browsers + react-virtualized aims to support all evergreen browsers and recent mobile browsers for iOS and Android. IE 9+ is also supported (although IE 9 will require some user-defined, custom CSS since flexbox layout is not supported). If you find a browser-specific problem, please report it along with a repro case. The easiest way to do this is probably by forking [this Plunker](https://plnkr.co/edit/6syKo8cx3RfoO96hXFT1). -Friends ---------------- +## Friends + Here are some great components built on top of react-virtualized: -* [react-infinite-calendar](https://github.com/clauderic/react-infinite-calendar): Infinite scrolling date-picker with localization, themes, keyboard support, and more -* [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc): Higher-order components to turn any list into an animated, touch-friendly, sortable list -* [react-sortable-tree](https://github.com/fritz-c/react-sortable-tree): Drag-and-drop sortable representation of hierarchical data -* [react-virtualized-checkbox](https://github.com/emilebres/react-virtualized-checkbox): Checkbox group component with virtualization for large number of options -* [react-virtualized-select](https://github.com/bvaughn/react-virtualized-select): Drop-down menu for React with windowing to support large numbers of options. -* [react-virtualized-tree](https://github.com/diogofcunha/react-virtualized-tree/): A reactive tree component that aims to render large sets of tree structured data in an elegant and performant way -* [react-timeline-9000](https://github.com/BHP-DevHub/react-timeline-9000/): A calendar timeline component that is capable of displaying and interacting with a large number of items -Contributions ------------- +- [react-infinite-calendar](https://github.com/clauderic/react-infinite-calendar): Infinite scrolling date-picker with localization, themes, keyboard support, and more +- [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc): Higher-order components to turn any list into an animated, touch-friendly, sortable list +- [react-sortable-tree](https://github.com/fritz-c/react-sortable-tree): Drag-and-drop sortable representation of hierarchical data +- [react-virtualized-checkbox](https://github.com/emilebres/react-virtualized-checkbox): Checkbox group component with virtualization for large number of options +- [react-virtualized-select](https://github.com/bvaughn/react-virtualized-select): Drop-down menu for React with windowing to support large numbers of options. +- [react-virtualized-tree](https://github.com/diogofcunha/react-virtualized-tree/): A reactive tree component that aims to render large sets of tree structured data in an elegant and performant way +- [react-timeline-9000](https://github.com/BHP-DevHub/react-timeline-9000/): A calendar timeline component that is capable of displaying and interacting with a large number of items + +## Contributions Use [GitHub issues](https://github.com/bvaughn/react-virtualized/issues) for requests. I actively welcome pull requests; learn how to [contribute](https://github.com/bvaughn/react-virtualized/blob/master/CONTRIBUTING.md). -Changelog ---------- +## Changelog Changes are tracked in the [changelog](https://github.com/bvaughn/react-virtualized/blob/master/CHANGELOG.md). -License ---------- +## License -*react-virtualized* is available under the MIT License. +_react-virtualized_ is available under the MIT License. diff --git a/docs/ArrowKeyStepper.md b/docs/ArrowKeyStepper.md index 9421b3e86..4c9083098 100644 --- a/docs/ArrowKeyStepper.md +++ b/docs/ArrowKeyStepper.md @@ -1,5 +1,4 @@ -ArrowKeyStepper ---------------- +## ArrowKeyStepper High-order component that decorates another virtualized component and responds to arrow-key events by scrolling one row or column at a time. This provides a snap-to behavior rather than the default browser scrolling behavior. @@ -8,33 +7,35 @@ Note that unlike the other HOCs in react-virtualized, the `ArrowKeyStepper` adds The appearance of this wrapper element can be customized using the `className` property. ### Prop Types -| Property | Type | Required? | Description | -|:---|:---|:---:|:---| -| children | Function | βœ“ | Function responsible for rendering children. This function should implement the following signature: `({ onSectionRendered: Function, scrollToColumn: number, scrollToRow: number }) => PropTypes.element` | -| className | String | | CSS class name to attach to the wrapper `
`. | -| columnCount | Number | βœ“ | Number of columns in grid; for `Table` and `List` this property should always be `1`. | -| disabled | Boolean | | Disables all scrolling using arrow-keys; defaults to `false` | -| isControlled | Boolean | | This component is "controlled"; it will not update `scrollToColumn` or `scrollToRow`. This property should be used with `onScrollToChange`. | -| mode | "edges" or "cells" | | Controls behavior of stepper when arrow key direction changes. "cells" means that the index will only increment or decrement by 1; "edges" (default) means that the opposite side of the grid will be incremented. | -| onScrollToChange | Function | | Called when arrow key navigation should update the current scroll-to values. | -| rowCount | Number | βœ“ | Number of rows in grid. | -| scrollToColumn | Number | | Optional default/initial `scrollToColumn` value | -| scrollToRow | Number | | Optional default/initial `scrollToRow` value | + +| Property | Type | Required? | Description | +| :--------------- | :----------------- | :-------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| children | Function | βœ“ | Function responsible for rendering children. This function should implement the following signature: `({ onSectionRendered: Function, scrollToColumn: number, scrollToRow: number }) => PropTypes.element` | +| className | String | | CSS class name to attach to the wrapper `
`. | +| columnCount | Number | βœ“ | Number of columns in grid; for `Table` and `List` this property should always be `1`. | +| disabled | Boolean | | Disables all scrolling using arrow-keys; defaults to `false` | +| isControlled | Boolean | | This component is "controlled"; it will not update `scrollToColumn` or `scrollToRow`. This property should be used with `onScrollToChange`. | +| mode | "edges" or "cells" | | Controls behavior of stepper when arrow key direction changes. "cells" means that the index will only increment or decrement by 1; "edges" (default) means that the opposite side of the grid will be incremented. | +| onScrollToChange | Function | | Called when arrow key navigation should update the current scroll-to values. | +| rowCount | Number | βœ“ | Number of rows in grid. | +| scrollToColumn | Number | | Optional default/initial `scrollToColumn` value | +| scrollToRow | Number | | Optional default/initial `scrollToRow` value | ### Public Methods ##### setScrollIndexes ({ scrollToColumn: number, scrollToRow: number }) + Override the local state of the component with new values for `scrollToRow` and `scrollToColumn`. ### Children function The child function is passed the following named parameters: -| Parameter | Type | Description | -|:---|:---|:---| +| Parameter | Type | Description | +| :---------------- | :------- | :--------------------------------------------------------------------------------------------------------------------------- | | onSectionRendered | Function | Pass-through callback to be attached to child component; informs the key-stepper which range of cells are currently visible. | -| scrollToColumn | Number | Specifies which column in the child component should be visible | -| scrollToRow | Number | Specifies which row in the child component should be visible | +| scrollToColumn | Number | Specifies which column in the child component should be visible | +| scrollToRow | Number | Specifies which row in the child component should be visible | ### Examples @@ -43,15 +44,12 @@ You can decorate any virtualized component (eg. `Table`, `Grid`, or `List`) with ```javascript import React from 'react'; import ReactDOM from 'react-dom'; -import { ArrowKeyStepper, Grid } from 'react-virtualized'; +import {ArrowKeyStepper, Grid} from 'react-virtualized'; import 'react-virtualized/styles.css'; // only needs to be imported once ReactDOM.render( - - {({ onSectionRendered, scrollToColumn, scrollToRow }) => ( + + {({onSectionRendered, scrollToColumn, scrollToRow}) => ( )} , - document.getElementById('example') + document.getElementById('example'), ); ``` diff --git a/docs/AutoSizer.md b/docs/AutoSizer.md index ad09e8ece..ff7350aad 100644 --- a/docs/AutoSizer.md +++ b/docs/AutoSizer.md @@ -1,20 +1,20 @@ -AutoSizer ---------------- +## AutoSizer High-order component that automatically adjusts the width and height of a single child. ### Prop Types -| Property | Type | Required? | Description | -|:---|:---|:---:|:---| -| children | Function | βœ“ | Function responsible for rendering children. This function should implement the following signature: `({ height: number, width: number }) => PropTypes.element` | -| className | String | | Optional custom CSS class name to attach to root `AutoSizer` element. This is an advanced property and is not typically necessary. | -| defaultHeight | Number | | Height passed to child for initial render; useful for server-side rendering. This value will be overridden with an accurate height after mounting. | -| defaultWidth | Number | | Width passed to child for initial render; useful for server-side rendering. This value will be overridden with an accurate width after mounting. | -| disableHeight | Boolean | | Fixed `height`; if specified, the child's `height` property will not be managed | -| disableWidth | Boolean | | Fixed `width`; if specified, the child's `width` property will not be managed | -| nonce | String | | Nonce of the inlined stylesheets for [Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute) | -| onResize | Function | | Callback to be invoked on-resize; it is passed the following named parameters: `({ height: number, width: number })`. | -| style | Object | | Optional custom inline style to attach to root `AutoSizer` element. This is an advanced property and is not typically necessary. | + +| Property | Type | Required? | Description | +| :------------ | :------- | :-------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| children | Function | βœ“ | Function responsible for rendering children. This function should implement the following signature: `({ height: number, width: number }) => PropTypes.element` | +| className | String | | Optional custom CSS class name to attach to root `AutoSizer` element. This is an advanced property and is not typically necessary. | +| defaultHeight | Number | | Height passed to child for initial render; useful for server-side rendering. This value will be overridden with an accurate height after mounting. | +| defaultWidth | Number | | Width passed to child for initial render; useful for server-side rendering. This value will be overridden with an accurate width after mounting. | +| disableHeight | Boolean | | Fixed `height`; if specified, the child's `height` property will not be managed | +| disableWidth | Boolean | | Fixed `width`; if specified, the child's `width` property will not be managed | +| nonce | String | | Nonce of the inlined stylesheets for [Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute) | +| onResize | Function | | Callback to be invoked on-resize; it is passed the following named parameters: `({ height: number, width: number })`. | +| style | Object | | Optional custom inline style to attach to root `AutoSizer` element. This is an advanced property and is not typically necessary. | ### Examples @@ -30,30 +30,27 @@ Read more about common `AutoSizer` questions [here](usingAutoSizer.md). ```javascript import React from 'react'; import ReactDOM from 'react-dom'; -import { AutoSizer, List } from 'react-virtualized'; +import {AutoSizer, List} from 'react-virtualized'; import 'react-virtualized/styles.css'; // only needs to be imported once // List data as an array of strings const list = [ - 'Brian Vaughn' + 'Brian Vaughn', // And so on... ]; -function rowRenderer ({ key, index, style }) { +function rowRenderer({key, index, style}) { return ( -
+
{list[index]}
- ) + ); } // Render your list ReactDOM.render( - {({ height, width }) => ( + {({height, width}) => ( )} , - document.getElementById('example') + document.getElementById('example'), ); ``` diff --git a/docs/CellMeasurer.md b/docs/CellMeasurer.md index 1608cbf67..126e81485 100644 --- a/docs/CellMeasurer.md +++ b/docs/CellMeasurer.md @@ -1,5 +1,4 @@ -CellMeasurer ---------------- +## CellMeasurer High-order component that automatically measures a cell's contents by temporarily rendering it in a way that is not visible to the user. Specify a fixed width to measure dynamic height (or vice versa). @@ -9,13 +8,21 @@ This is an advanced component and has some limitations and performance considera `CellMeasurer` can be used with `Grid`, `List`, and `Table` components. It is not intended to be used with the `Collection` component. ### Prop Types -| Property | Type | Required? | Description | -|:---|:---|:---:|:---| -| cache | `CellMeasurerCache` | βœ“ | Cache to be shared between `CellMeasurer` and its parent `Grid`. Learn more [here](#cellmeasurercache). | -| children | Element or Function | βœ“ | Either a React element as a child (eg `
`) or a function (eg. `({ measure }) =>
`). See [below](#using-cellmeasurer-with-images) for more detailed examples. | -| columnIndex | number | βœ“ | Index of column being measured (within the parent `Grid`) or 0 (if used within a `List` or `Table`). | -| parent | `Grid` | βœ“ | Reference to the parent `Grid`; this value is passed by `Grid` to the `cellRenderer` and should be passed along as-is. | -| rowIndex | number | βœ“ | Index of row being measured (within the parent `Grid`). | + +| Property | Type | Required? | Description | +| :---------- | :------------------ | :-------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| cache | `CellMeasurerCache` | βœ“ | Cache to be shared between `CellMeasurer` and its parent `Grid`. Learn more [here](#cellmeasurercache). | +| children | Element or Function | βœ“ | Either a React element as a child (eg `
`) or a function (eg. `({ measure, registerChild }) =>
`). See [below](#using-cellmeasurer-with-images) for more detailed examples. | +| columnIndex | number | βœ“ | Index of column being measured (within the parent `Grid`) or 0 (if used within a `List` or `Table`). | +| parent | `Grid` | βœ“ | Reference to the parent `Grid`; this value is passed by `Grid` to the `cellRenderer` and should be passed along as-is. | +| rowIndex | number | βœ“ | Index of row being measured (within the parent `Grid`). | + +### Render Props + +| Property | Type | Description | +| :------------ | :------- | :----------------------------------------------------------------------------------------------------------------------------- | +| measure | Function | Perform the cell measurements. | +| registerChild | Function | Specify DOM element to be measured, can be used as a `ref` (by default `WindowScroller` uses `ReactDOM.findDOMNode` function). | ### CellMeasurerCache @@ -23,15 +30,16 @@ The `CellMeasurerCache` stores `CellMeasurer` measurements and shares them with It should be configured based on the type of measurements you need. It accepts the following parameters: ### Prop Types -| Property | Type | Required? | Description | -|:---|:---|:---:|:---| -| defaultHeight | number | | Unmeasured cells will initially report this height | -| defaultWidth | number | | Unmeasured cells will initially report this width | -| fixedHeight | boolean | | Rendered cells will have a fixed height, dynamic width | -| fixedWidth | boolean | | Rendered cells will have a fixed width, dynamic height | -| minHeight | number | | Derived row height (of multiple cells) should not be less than this value | -| minWidth | number | | Derived column width (of multiple cells) should not be less than this value | -| keyMapper | KeyMapper | | Enables more intelligent mapping of a given column and row index to an item ID. This prevents a cell cache from being invalidated when its parent collection is modified. `(rowIndex: number, columnIndex: number) => any` | + +| Property | Type | Required? | Description | +| :------------ | :-------- | :-------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| defaultHeight | number | | Unmeasured cells will initially report this height | +| defaultWidth | number | | Unmeasured cells will initially report this width | +| fixedHeight | boolean | | Rendered cells will have a fixed height, dynamic width | +| fixedWidth | boolean | | Rendered cells will have a fixed width, dynamic height | +| minHeight | number | | Derived row height (of multiple cells) should not be less than this value | +| minWidth | number | | Derived column width (of multiple cells) should not be less than this value | +| keyMapper | KeyMapper | | Enables more intelligent mapping of a given column and row index to an item ID. This prevents a cell cache from being invalidated when its parent collection is modified. `(rowIndex: number, columnIndex: number) => any` | Note that while all of the individual parameters above are optional, you must supply at least some of them. `CellMeasurerCache` is not meant to measure cells that are both dynamic width _and_ height. @@ -41,11 +49,13 @@ See [below](#limitations-and-performance-considerations) for more information. ### `CellMeasurerCache` Public Methods ##### clear (rowIndex: number, columnIndex: number) + Reset cached measurements for a specific cell. This should be called when a cell needs to be re-measured to handle dynamic content (eg. replacing a loading indicator with loaded content or reacting to state-changes for stateful cells). ##### clearAll () + Reset cached measurements for all cells. This method should be called when a `Grid`, `List` or `Table` needs to reflow content due to a resizing event for a responsive layout (eg. a window width resize may have an impact on the height of cells). @@ -107,11 +117,69 @@ function renderGrid (props) { } ``` +##### Using `registerChild` + +By default, `CellMeasurer` uses `findDOMNode` to access the DOM element to measure. +This API is [deprecated in React `StrictMode`](https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage), so you may want to avoid its usage. +As an alternative, you can use `registerChild` render prop to specify the element, e.g. by passing as a `ref`. + +```jsx +import React from 'react'; +import { CellMeasurer, CellMeasurerCache, Grid } from 'react-virtualized'; + +// In this example, average cell width is assumed to be about 100px. +// This value will be used for the initial `Grid` layout. +// Cell measurements smaller than 75px should also be rounded up. +// Height is not dynamic. +const cache = new CellMeasurerCache({ + defaultWidth: 100, + minWidth: 75, + fixedHeight: true +}); + +function cellRenderer ({ columnIndex, key, parent, rowIndex, style }) { + const content // Derive this from your data somehow + + return ( + + {({registerChild}) => ( +
+ {content} +
+ )} +
+ ); +} + +function renderGrid (props) { + return ( + + ); +} +``` + ###### Using `CellMeasurer` with images This example shows how you might use the `CellMeasurer` component along with the `List` component in order to display dynamic-height rows. The difference between this example and the above example is that the height of the row is not determined until image data has loaded. -To support this, a function-child is passed to `CellMeasurer` which then receives a `measure` parameter. +To support this, a function-child is passed to `CellMeasurer` which then receives `measure` and `registerChild` parameters. `measure` should be called when cell content is ready to be measured (in this case, when the image has loaded). ```jsx @@ -137,9 +205,9 @@ function rowRenderer ({ index, isScrolling, key, parent, style }) { parent={parent} rowIndex={index} > - {({ measure }) => ( + {({ measure, registerChild }) => ( // 'style' attribute required to position cell (within parent List) -
+
, cellRenderer: Function }): Array` | -| cellRenderer | Function | βœ“ | Responsible for rendering a cell given an row and column index: `({ index: number, isScrolling: boolean, key: string, style: object }): PropTypes.element` | -| cellSizeAndPositionGetter | Function | βœ“ | Callback responsible for returning size and offset/position information for a given cell (index): `({ index: number }): { height: number, width: number, x: number, y: number }` | -| height | Number | βœ“ | Height of Collection; this property determines the number of visible (vs virtualized) rows. | -| horizontalOverscanSize | Number | | Enables the `Collection` to horizontally "overscan" its content similar to how `Grid` does. This can reduce flicker around the edges when a user scrolls quickly. This property defaults to `0`; | -| id | String | | Optional custom id to attach to root `Collection` element. | -| noContentRenderer | Function | | Optional renderer to be rendered inside the grid when `cellCount` is 0: `(): PropTypes.node` | -| onSectionRendered | Function | | Callback invoked with information about the section of the Collection that was just rendered: `({ indices: Array }): void` | -| onScroll | Function | | Callback invoked whenever the scroll offset changes within the inner scrollable region: `({ clientHeight: number, clientWidth: number, scrollHeight: number, scrollLeft: number, scrollTop: number, scrollWidth: number }): void` | -| scrollLeft | Number | | Horizontal offset | -| scrollToAlignment | String | | Controls the alignment of scrolled-to-cells. The default ("_auto_") scrolls the least amount possible to ensure that the specified cell is fully visible. Use "_start_" to always align cells to the top/left of the `Collection` and "_end_" to align them bottom/right. Use "_center_" to align specified cell in the middle of container. | -| scrollToCell | Number | | Cell index to ensure visible (by scrolling if necessary) | -| scrollTop | Number | | Vertical offset | -| sectionSize | Number | | Optionally override the size of the sections a Collection's cells are split into. This is an advanced option and should only be used for performance tuning purposes. | -| style | Object | | Optional custom inline style to attach to root Collection element. | -| verticalOverscanSize | Number | | Enables the `Collection` to vertically "overscan" its content similar to how `Grid` does. This can reduce flicker around the edges when a user scrolls quickly. This property defaults to `0`; | -| width | Number | βœ“ | Width of Collection; this property determines the number of visible (vs virtualized) columns. | + +| Property | Type | Required? | Description | +| :------------------------ | :------- | :-------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| autoHeight | Boolean | | Outer `height` of `Collection` is set to "auto". This property should only be used in conjunction with the `WindowScroller` HOC. | +| className | String | | Optional custom CSS class name to attach to root `Collection` element. | +| cellCount | Number | βœ“ | Number of cells in collection. | +| cellGroupRenderer | Function | | Responsible for rendering a group of cells given their indices.: `({ cellSizeAndPositionGetter:Function, indices: Array, cellRenderer: Function }): Array` | +| cellRenderer | Function | βœ“ | Responsible for rendering a cell given an row and column index: `({ index: number, isScrolling: boolean, key: string, style: object }): PropTypes.element` | +| cellSizeAndPositionGetter | Function | βœ“ | Callback responsible for returning size and offset/position information for a given cell (index): `({ index: number }): { height: number, width: number, x: number, y: number }` | +| height | Number | βœ“ | Height of Collection; this property determines the number of visible (vs virtualized) rows. | +| horizontalOverscanSize | Number | | Enables the `Collection` to horizontally "overscan" its content similar to how `Grid` does. This can reduce flicker around the edges when a user scrolls quickly. This property defaults to `0`; | +| id | String | | Optional custom id to attach to root `Collection` element. | +| noContentRenderer | Function | | Optional renderer to be rendered inside the grid when `cellCount` is 0: `(): PropTypes.node` | +| onSectionRendered | Function | | Callback invoked with information about the section of the Collection that was just rendered: `({ indices: Array }): void` | +| onScroll | Function | | Callback invoked whenever the scroll offset changes within the inner scrollable region: `({ clientHeight: number, clientWidth: number, scrollHeight: number, scrollLeft: number, scrollTop: number, scrollWidth: number }): void` | +| scrollLeft | Number | | Horizontal offset | +| scrollToAlignment | String | | Controls the alignment of scrolled-to-cells. The default ("_auto_") scrolls the least amount possible to ensure that the specified cell is fully visible. Use "_start_" to always align cells to the top/left of the `Collection` and "_end_" to align them bottom/right. Use "_center_" to align specified cell in the middle of container. | +| scrollToCell | Number | | Cell index to ensure visible (by scrolling if necessary) | +| scrollTop | Number | | Vertical offset | +| sectionSize | Number | | Optionally override the size of the sections a Collection's cells are split into. This is an advanced option and should only be used for performance tuning purposes. | +| style | Object | | Optional custom inline style to attach to root Collection element. | +| verticalOverscanSize | Number | | Enables the `Collection` to vertically "overscan" its content similar to how `Grid` does. This can reduce flicker around the edges when a user scrolls quickly. This property defaults to `0`; | +| width | Number | βœ“ | Width of Collection; this property determines the number of visible (vs virtualized) columns. | ### Public Methods @@ -43,10 +43,10 @@ Since Collection only receives `cellCount` (and not the underlying List or Array The Collection component supports the following static class names -| Property | Description | -|:---|:---| -| ReactVirtualized__Collection | Main (outer) element | -| ReactVirtualized__Collection__innerScrollContainer | Inner scrollable area | +| Property | Description | +| :------------------------------------------------- | :-------------------- | +| ReactVirtualized\_\_Collection | Main (outer) element | +| ReactVirtualized**Collection**innerScrollContainer | Inner scrollable area | ### Examples @@ -56,35 +56,32 @@ Below is a very basic `Collection` example. It displays an array of objects with ```jsx import React from 'react'; import ReactDOM from 'react-dom'; -import { Collection } from 'react-virtualized'; +import {Collection} from 'react-virtualized'; import 'react-virtualized/styles.css'; // only needs to be imported once // Collection data as an array of objects const list = [ - { name: 'Brian Vaughn', x: 13, y: 34, width: 123, height: 234 } + {name: 'Brian Vaughn', x: 13, y: 34, width: 123, height: 234}, // And so on... ]; -function cellRenderer ({ index, key, style }) { +function cellRenderer({index, key, style}) { return ( -
+
{list[index].name}
- ) + ); } -function cellSizeAndPositionGetter ({ index }) { - const datum = list[index] +function cellSizeAndPositionGetter({index}) { + const datum = list[index]; return { height: datum.height, width: datum.width, x: datum.x, - y: datum.y - } + y: datum.y, + }; } // Render your grid @@ -96,6 +93,6 @@ ReactDOM.render( height={300} width={300} />, - document.getElementById('example') + document.getElementById('example'), ); ``` diff --git a/docs/Column.md b/docs/Column.md index 98ad711cb..195f4fe07 100644 --- a/docs/Column.md +++ b/docs/Column.md @@ -1,29 +1,29 @@ -Column ---------------- +## Column Describes the header and cell contents of a table column. #### Prop Types -| Property | Type | Required? | Description | -|:---|:---|:---:|:---| -| cellDataGetter | Function | | Callback responsible for returning a cell's data, given its `dataKey`. [Learn more](#celldatagetter) | -| cellRenderer | Function | | Callback responsible for rendering a cell's contents. [Learn more](#cellrenderer) | -| className | String | | CSS class to apply to rendered cell container | -| columnData | Object | | Additional data passed to this column's `cellDataGetter`. Use this object to relay action-creators or relational data. | -| dataKey | any | βœ“ | Uniquely identifies the row-data attribute corresponding to this cell (eg this might be "name" in an array of user objects). | -| defaultSortDirection| [SortDirection](SortDirection.md) | | Default sort order when clicked for the first time. Valid options include "ASC" and "DESC". Defaults to "ASC" | -| disableSort | Boolean | | If sort is enabled for the table at large, disable it for this column | -| flexGrow | Number | | Flex grow style; defaults to 0 | -| flexShrink | Number | | Flex shrink style; defaults to 1 | -| headerClassName | String | | CSS class to apply to this column's header | -| headerRenderer | Function | | Optional callback responsible for rendering a column's header column. [Learn more](#headerrenderer) | -| headerStyle | Object | | Optional inline style to apply to this column's header | -| id | String | | Optional id to set on the column header; used for [`aria-describedby`](https://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby) | -| label | Node | | Header label for this column | -| maxWidth | Number | | Maximum width of column; this property will only be used if :flexGrow is greater than 0 | -| minWidth | Number | | Minimum width of column | -| style | Object | | Optional inline style to apply to rendered cell container | -| width | Number | βœ“ | Flex basis (width) for this column; This value can grow or shrink based on `flexGrow` and `flexShrink` properties | + +| Property | Type | Required? | Description | +| :------------------- | :-------------------------------- | :-------: | :-------------------------------------------------------------------------------------------------------------------------------------------- | +| cellDataGetter | Function | | Callback responsible for returning a cell's data, given its `dataKey`. [Learn more](#celldatagetter) | +| cellRenderer | Function | | Callback responsible for rendering a cell's contents. [Learn more](#cellrenderer) | +| className | String | | CSS class to apply to rendered cell container | +| columnData | Object | | Additional data passed to this column's `cellDataGetter`. Use this object to relay action-creators or relational data. | +| dataKey | any | βœ“ | Uniquely identifies the row-data attribute corresponding to this cell (eg this might be "name" in an array of user objects). | +| defaultSortDirection | [SortDirection](SortDirection.md) | | Default sort order when clicked for the first time. Valid options include "ASC" and "DESC". Defaults to "ASC" | +| disableSort | Boolean | | If sort is enabled for the table at large, disable it for this column | +| flexGrow | Number | | Flex grow style; defaults to 0 | +| flexShrink | Number | | Flex shrink style; defaults to 1 | +| headerClassName | String | | CSS class to apply to this column's header | +| headerRenderer | Function | | Optional callback responsible for rendering a column's header column. [Learn more](#headerrenderer) | +| headerStyle | Object | | Optional inline style to apply to this column's header | +| id | String | | Optional id to set on the column header; used for [`aria-describedby`](https://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby) | +| label | Node | | Header label for this column | +| maxWidth | Number | | Maximum width of column; this property will only be used if :flexGrow is greater than 0 | +| minWidth | Number | | Minimum width of column | +| style | Object | | Optional inline style to apply to rendered cell container | +| width | Number | βœ“ | Flex basis (width) for this column; This value can grow or shrink based on `flexGrow` and `flexShrink` properties | #### cellDataGetter diff --git a/docs/ColumnSizer.md b/docs/ColumnSizer.md index be869fdf5..010879cba 100644 --- a/docs/ColumnSizer.md +++ b/docs/ColumnSizer.md @@ -1,26 +1,26 @@ -ColumnSizer ---------------- +## ColumnSizer High-order component that auto-calculates column-widths for `Grid` cells. ### Prop Types -| Property | Type | Required? | Description | -|:---|:---|:---:|:---| -| children | Function | βœ“ | Function responsible for rendering a virtualized Grid. This function should implement the following signature: `({ adjustedWidth: number, getColumnWidth: Function, registerChild: Function }) => PropTypes.element` | -| columnMaxWidth | Number | | Optional maximum allowed column width | -| columnMinWidth | Number | | Optional minimum allowed column width | -| width | Number | βœ“ | Width of Grid or `Table` child | + +| Property | Type | Required? | Description | +| :------------- | :------- | :-------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| children | Function | βœ“ | Function responsible for rendering a virtualized Grid. This function should implement the following signature: `({ adjustedWidth: number, getColumnWidth: Function, registerChild: Function }) => PropTypes.element` | +| columnMaxWidth | Number | | Optional maximum allowed column width | +| columnMinWidth | Number | | Optional minimum allowed column width | +| width | Number | βœ“ | Width of Grid or `Table` child | ### Children function The child function is passed the following named parameters: -| Parameter | Type | Description | -|:---|:---|:---| -| adjustedWidth | Number | This number reflects the lesser of the overall `Grid` width or the width of all columns. Use this to make your `Grid` shrink to fit sparse content. | -| columnWidth | Number | This value should be passed to the `Grid`'s `columnWidth` property. | +| Parameter | Type | Description | +| :------------- | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| adjustedWidth | Number | This number reflects the lesser of the overall `Grid` width or the width of all columns. Use this to make your `Grid` shrink to fit sparse content. | +| columnWidth | Number | This value should be passed to the `Grid`'s `columnWidth` property. | | getColumnWidth | Function | This value can be passed to the `Grid`'s `columnWidth` property but it's recommended that you use the `columnWidth` property instead. This is a legacy property. | -| registerChild | Function | This function should be set as the child's `ref` property. It enables a set of rows to be refreshed once their data has finished loading. | +| registerChild | Function | This function should be set as the child's `ref` property. It enables a set of rows to be refreshed once their data has finished loading. | ### Examples @@ -29,7 +29,7 @@ This example displays a `Grid` that shrinks to fit sparse content (using the `ad ```javascript import React from 'react'; import ReactDOM from 'react-dom'; -import { ColumnSizer, Grid } from 'react-virtualized'; +import {ColumnSizer, Grid} from 'react-virtualized'; import 'react-virtualized/styles.css'; // only needs to be imported once // numColumns, numRows, someCalculatedHeight, and someCalculatedWidth determined here... @@ -40,9 +40,8 @@ ReactDOM.render( columnMaxWidth={100} columnMinWidth={50} columnCount={numColumns} - width={someCalculatedWidth} - > - {({ adjustedWidth, getColumnWidth, registerChild }) => ( + width={someCalculatedWidth}> + {({adjustedWidth, getColumnWidth, registerChild}) => ( )} , - document.getElementById('example') + document.getElementById('example'), ); ``` diff --git a/docs/Grid.md b/docs/Grid.md index 7a7b54eef..746fa6136 100644 --- a/docs/Grid.md +++ b/docs/Grid.md @@ -1,48 +1,48 @@ -Grid ---------------- +## Grid A windowed grid of elements. `Grid` only renders cells necessary to fill itself based on the current horizontal and vertical scroll position. A simple `Grid` example can be seen [here](#basic-grid-example). ### Prop Types -| Property | Type | Required? | Description | -|:---|:---|:---:|:---| -| autoContainerWidth | Boolean | | Set the width of the inner scrollable container to 'auto'. This is useful for single-column Grids to ensure that the column doesn't extend below a vertical scrollbar. | -| autoHeight | Boolean | | Outer `height` of `Grid` is set to "auto". This property should only be used in conjunction with the `WindowScroller` HOC. | -| autoWidth | Boolean | | Outer `width` of `Grid` is set to "auto". This property should only be used in conjunction with the `WindowScroller` HOC. | -| cellRangeRenderer | Function | | Responsible for rendering a group of cells given their index ranges. [Learn more](#cellrangerenderer) | -| cellRenderer | Function | βœ“ | Responsible for rendering a cell given an row and column index. [Learn more](#cellrenderer) | -| className | String | | Optional custom CSS class name to attach to root `Grid` element. | -| columnCount | Number | βœ“ | Number of columns in grid. | -| columnWidth | Number or Function | βœ“ | Either a fixed column width (number) or a function that returns the width of a column given its index: `({ index: number }): number`. If function is used, specify `estimatedColumnSize` for more consistent scrolling behavior. | -| containerProps | Object | | Responsible for adding props to the cell-container, i.e. `onWheel`. -| containerRole | string | | ARIA role for the cell-container; defaults to "rowgroup" | -| containerStyle | Object | | Optional custom inline style to attach to inner cell-container element. | -| deferredMeasurementCache | `CellMeasurer` | | If CellMeasurer is used to measure this Grid's children, this should be a pointer to its CellMeasurerCache. A shared CellMeasurerCache reference enables Grid and CellMeasurer to share measurement data. | -| estimatedColumnSize | Number | | Used to estimate the total width of a `Grid` before all of its columns have actually been measured. The estimated total width is adjusted as columns are rendered. | -| estimatedRowSize | Number | | Used to estimate the total height of a `Grid` before all of its rows have actually been measured. The estimated total height is adjusted as rows are rendered. | -| height | Number | βœ“ | Height of Grid; this property determines the number of visible (vs virtualized) rows. | -| id | String | | Optional custom id to attach to root `Grid` element. | -| isScrolling | Boolean | | Override internal is-scrolling state tracking. This property is primarily intended for use with the WindowScroller component. | -| isScrollingOptOut | Boolean | | Prevents re-rendering of visible cells on scroll end. | -| noContentRenderer | Function | | Optional renderer to be rendered inside the grid when either `rowCount` or `columnCount` is empty: `(): PropTypes.node` | -| onSectionRendered | Function | | Callback invoked with information about the section of the Grid that was just rendered. This callback is only invoked when visible rows have changed: `({ columnOverscanStartIndex: number, columnOverscanStopIndex: number, columnStartIndex: number, columnStopIndex: number, rowOverscanStartIndex: number, rowOverscanStopIndex: number, rowStartIndex: number, rowStopIndex: number }): void` | -| onScroll | Function | | Callback invoked whenever the scroll offset changes within the inner scrollable region: `({ clientHeight: number, clientWidth: number, scrollHeight: number, scrollLeft: number, scrollTop: number, scrollWidth: number }): void` | -| onScrollbarPresenceChange | Function | | Called whenever a horizontal or vertical scrollbar is added or removed: `({ horizontal: boolean, size: number, vertical: boolean }): void` | -| overscanColumnCount | Number | | Number of columns to render before/after the visible slice of the grid. This can help reduce flickering during scrolling on certain browsers/devices. See [here](overscanUsage.md) for an important note about this property. | -| overscanIndicesGetter | Function | | Responsible for calculating the number of cells to overscan before and after a specified range [Learn more](#overscanindicesgetter) | -| overscanRowCount | Number | | Number of rows to render above/below the visible slice of the grid. This can help reduce flickering during scrolling on certain browsers/devices. See [here](overscanUsage.md) for an important note about this property. | -| role | String | | Optional override of ARIA role default; defaults to `grid`. | -| rowCount | Number | βœ“ | Number of rows in grid. | -| rowHeight | Number or Function | βœ“ | Either a fixed row height (number) or a function that returns the height of a row given its index: `({ index: number }): number`. If function is used, specify `estimatedRowSize` for more consistent scrolling behavior. | -| scrollingResetTimeInterval | Number | | Wait this amount of time after the last scroll event before resetting Grid `pointer-events`; defaults to 150ms. | -| scrollLeft | Number | | Horizontal offset | -| scrollToAlignment | String | | Controls the alignment of scrolled-to-cells. The default ("_auto_") scrolls the least amount possible to ensure that the specified cell is fully visible. Use "_start_" to always align cells to the top/left of the `Grid` and "_end_" to align them bottom/right. Use "_center_" to align specified cell in the middle of container. | -| scrollToColumn | Number | | Column index to ensure visible (by forcefully scrolling if necessary). Takes precedence over `scrollLeft`. | -| scrollToRow | Number | | Row index to ensure visible (by forcefully scrolling if necessary). Takes precedence over `scrollTop`. | -| scrollTop | Number | | Vertical offset | -| style | Object | | Optional custom inline style to attach to root `Grid` element. | -| tabIndex | Number | | Optional override of tab index default; defaults to `0`. | -| width | Number | βœ“ | Width of Grid; this property determines the number of visible (vs virtualized) columns. | + +| Property | Type | Required? | Description | +| :------------------------- | :----------------- | :-------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| autoContainerWidth | Boolean | | Set the width of the inner scrollable container to 'auto'. This is useful for single-column Grids to ensure that the column doesn't extend below a vertical scrollbar. | +| autoHeight | Boolean | | Outer `height` of `Grid` is set to "auto". This property should only be used in conjunction with the `WindowScroller` HOC. | +| autoWidth | Boolean | | Outer `width` of `Grid` is set to "auto". This property should only be used in conjunction with the `WindowScroller` HOC. | +| cellRangeRenderer | Function | | Responsible for rendering a group of cells given their index ranges. [Learn more](#cellrangerenderer) | +| cellRenderer | Function | βœ“ | Responsible for rendering a cell given an row and column index. [Learn more](#cellrenderer) | +| className | String | | Optional custom CSS class name to attach to root `Grid` element. | +| columnCount | Number | βœ“ | Number of columns in grid. | +| columnWidth | Number or Function | βœ“ | Either a fixed column width (number) or a function that returns the width of a column given its index: `({ index: number }): number`. If function is used, specify `estimatedColumnSize` for more consistent scrolling behavior. | +| containerProps | Object | | Responsible for adding props to the cell-container, i.e. `onWheel`. | +| containerRole | string | | ARIA role for the cell-container; defaults to "rowgroup" | +| containerStyle | Object | | Optional custom inline style to attach to inner cell-container element. | +| deferredMeasurementCache | `CellMeasurer` | | If CellMeasurer is used to measure this Grid's children, this should be a pointer to its CellMeasurerCache. A shared CellMeasurerCache reference enables Grid and CellMeasurer to share measurement data. | +| estimatedColumnSize | Number | | Used to estimate the total width of a `Grid` before all of its columns have actually been measured. The estimated total width is adjusted as columns are rendered. | +| estimatedRowSize | Number | | Used to estimate the total height of a `Grid` before all of its rows have actually been measured. The estimated total height is adjusted as rows are rendered. | +| height | Number | βœ“ | Height of Grid; this property determines the number of visible (vs virtualized) rows. | +| id | String | | Optional custom id to attach to root `Grid` element. | +| isScrolling | Boolean | | Override internal is-scrolling state tracking. This property is primarily intended for use with the WindowScroller component. | +| isScrollingOptOut | Boolean | | Prevents re-rendering of visible cells on scroll end. | +| noContentRenderer | Function | | Optional renderer to be rendered inside the grid when either `rowCount` or `columnCount` is empty: `(): PropTypes.node` | +| onSectionRendered | Function | | Callback invoked with information about the section of the Grid that was just rendered. This callback is only invoked when visible rows have changed: `({ columnOverscanStartIndex: number, columnOverscanStopIndex: number, columnStartIndex: number, columnStopIndex: number, rowOverscanStartIndex: number, rowOverscanStopIndex: number, rowStartIndex: number, rowStopIndex: number }): void` | +| onScroll | Function | | Callback invoked whenever the scroll offset changes within the inner scrollable region: `({ clientHeight: number, clientWidth: number, scrollHeight: number, scrollLeft: number, scrollTop: number, scrollWidth: number }): void` | +| onScrollbarPresenceChange | Function | | Called whenever a horizontal or vertical scrollbar is added or removed: `({ horizontal: boolean, size: number, vertical: boolean }): void` | +| overscanColumnCount | Number | | Number of columns to render before/after the visible slice of the grid. This can help reduce flickering during scrolling on certain browsers/devices. See [here](overscanUsage.md) for an important note about this property. | +| overscanIndicesGetter | Function | | Responsible for calculating the number of cells to overscan before and after a specified range [Learn more](#overscanindicesgetter) | +| overscanRowCount | Number | | Number of rows to render above/below the visible slice of the grid. This can help reduce flickering during scrolling on certain browsers/devices. See [here](overscanUsage.md) for an important note about this property. | +| role | String | | Optional override of ARIA role default; defaults to `grid`. | +| rowCount | Number | βœ“ | Number of rows in grid. | +| rowHeight | Number or Function | βœ“ | Either a fixed row height (number) or a function that returns the height of a row given its index: `({ index: number }): number`. If function is used, specify `estimatedRowSize` for more consistent scrolling behavior. | +| scrollingResetTimeInterval | Number | | Wait this amount of time after the last scroll event before resetting Grid `pointer-events`; defaults to 150ms. | +| scrollLeft | Number | | Horizontal offset | +| scrollToAlignment | String | | Controls the alignment of scrolled-to-cells. The default ("_auto_") scrolls the least amount possible to ensure that the specified cell is fully visible. Use "_start_" to always align cells to the top/left of the `Grid` and "_end_" to align them bottom/right. Use "_center_" to align specified cell in the middle of container. | +| scrollToColumn | Number | | Column index to ensure visible (by forcefully scrolling if necessary). Takes precedence over `scrollLeft`. | +| scrollToRow | Number | | Row index to ensure visible (by forcefully scrolling if necessary). Takes precedence over `scrollTop`. | +| scrollTop | Number | | Vertical offset | +| style | Object | | Optional custom inline style to attach to root `Grid` element. | +| tabIndex | Number | | Optional override of tab index default; defaults to `0`. | +| width | Number | βœ“ | Width of Grid; this property determines the number of visible (vs virtualized) columns. | ### Public Methods @@ -93,10 +93,10 @@ Useful for animating position changes. The Grid component supports the following static class names -| Property | Description | -|:---|:---| -| ReactVirtualized__Grid | Main (outer) element | -| ReactVirtualized__Grid__innerScrollContainer | Inner scrollable area | +| Property | Description | +| :------------------------------------------- | :-------------------- | +| ReactVirtualized\_\_Grid | Main (outer) element | +| ReactVirtualized**Grid**innerScrollContainer | Inner scrollable area | ### cellRangeRenderer @@ -107,23 +107,16 @@ Many use cases can be solved more easily using the `onScroll` callback or the `S If you do want to override `cellRangeRenderer` the easiest way is to decorate the default implementation like so: ```jsx -import { defaultCellRangeRenderer, Grid } from 'react-virtualized' - -function cellRangeRenderer (props) { - const children = defaultCellRangeRenderer(props) - children.push( -
My custom overlay
- ) - return children +import {defaultCellRangeRenderer, Grid} from 'react-virtualized'; + +function cellRangeRenderer(props) { + const children = defaultCellRangeRenderer(props); + children.push(
My custom overlay
); + return children; } -function CustomizedGrid (props) { - return ( - - ) +function CustomizedGrid(props) { + return ; } ``` @@ -132,69 +125,76 @@ If you require greater customization, you may want to fork the [`defaultCellRang This function accepts the following named parameters: ```js -function cellRangeRenderer ({ - cellCache, // Temporary cell cache used while scrolling - cellRenderer, // Cell renderer prop supplied to Grid +function cellRangeRenderer({ + cellCache, // Temporary cell cache used while scrolling + cellRenderer, // Cell renderer prop supplied to Grid columnSizeAndPositionManager, // @see CellSizeAndPositionManager, - columnStartIndex, // Index of first column (inclusive) to render - columnStopIndex, // Index of last column (inclusive) to render - horizontalOffsetAdjustment, // Horizontal pixel offset (required for scaling) - isScrolling, // The Grid is currently being scrolled - rowSizeAndPositionManager, // @see CellSizeAndPositionManager, - rowStartIndex, // Index of first row (inclusive) to render - rowStopIndex, // Index of last row (inclusive) to render - scrollLeft, // Current horizontal scroll offset of Grid - scrollTop, // Current vertical scroll offset of Grid - styleCache, // Temporary style (size & position) cache used while scrolling - verticalOffsetAdjustment // Vertical pixel offset (required for scaling) + columnStartIndex, // Index of first column (inclusive) to render + columnStopIndex, // Index of last column (inclusive) to render + horizontalOffsetAdjustment, // Horizontal pixel offset (required for scaling) + isScrolling, // The Grid is currently being scrolled + rowSizeAndPositionManager, // @see CellSizeAndPositionManager, + rowStartIndex, // Index of first row (inclusive) to render + rowStopIndex, // Index of last row (inclusive) to render + scrollLeft, // Current horizontal scroll offset of Grid + scrollTop, // Current vertical scroll offset of Grid + styleCache, // Temporary style (size & position) cache used while scrolling + verticalOffsetAdjustment, // Vertical pixel offset (required for scaling) }) { - const renderedCells = [] + const renderedCells = []; for (let rowIndex = rowStartIndex; rowIndex <= rowStopIndex; rowIndex++) { // This contains :offset (top) and :size (height) information for the cell - let rowDatum = rowSizeAndPositionManager.getSizeAndPositionOfCell(rowIndex) + let rowDatum = rowSizeAndPositionManager.getSizeAndPositionOfCell(rowIndex); - for (let columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) { + for ( + let columnIndex = columnStartIndex; + columnIndex <= columnStopIndex; + columnIndex++ + ) { // This contains :offset (left) and :size (width) information for the cell - let columnDatum = columnSizeAndPositionManager.getSizeAndPositionOfCell(columnIndex) + let columnDatum = columnSizeAndPositionManager.getSizeAndPositionOfCell( + columnIndex, + ); // Be sure to adjust cell position in case the total set of cells is too large to be supported by the browser natively. // In this case, Grid will shift cells as a user scrolls to increase cell density. - let left = columnDatum.offset + horizontalOffsetAdjustment - let top = rowDatum.offset + verticalOffsetAdjustment + let left = columnDatum.offset + horizontalOffsetAdjustment; + let top = rowDatum.offset + verticalOffsetAdjustment; // The rest of the information you need to render the cell are contained in the data. // Be sure to provide unique :key attributes. - let key = `${rowIndex}-${columnIndex}` - let height = rowDatum.size - let width = columnDatum.size + let key = `${rowIndex}-${columnIndex}`; + let height = rowDatum.size; + let width = columnDatum.size; // Now render your cell and additional UI as you see fit. // Add all rendered children to the :renderedCells Array. } } - return renderedCells + return renderedCells; } ``` ### overscanIndicesGetter + This is an advanced property. This function is responsible for calculating the number of cells to overscan before and after a specified range. By default, React Virtualized optimizes the number of cells to overscan based on scroll direction. If you'd like to customize this behavior, you may want to fork the [`defaultOverscanIndicesGetter`](https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/defaultOverscanIndicesGetter.js) function. -``` -function overscanIndicesGetter ({ - direction, // One of "horizontal" or "vertical" - cellCount, // Number of rows or columns in the current axis - scrollDirection, // 1 (forwards) or -1 (backwards) +```js +function overscanIndicesGetter({ + direction, // One of "horizontal" or "vertical" + cellCount, // Number of rows or columns in the current axis + scrollDirection, // 1 (forwards) or -1 (backwards) overscanCellsCount, // Maximum number of cells to over-render in either direction - startIndex, // Begin of range of visible cells - stopIndex // End of range of visible cells + startIndex, // Begin of range of visible cells + stopIndex, // End of range of visible cells }) { return { overscanStartIndex: Math.max(0, startIndex - overscanCellsCount), - overscanStopIndex: Math.min(cellCount - 1, stopIndex + overscanCellsCount) - } + overscanStopIndex: Math.min(cellCount - 1, stopIndex + overscanCellsCount), + }; } ``` @@ -204,23 +204,21 @@ Responsible for rendering a single cell, given its row and column index. This function accepts the following named parameters: ```jsx -function cellRenderer ({ +function cellRenderer({ columnIndex, // Horizontal (column) index of cell isScrolling, // The Grid is currently being scrolled - isVisible, // This cell is visible within the grid (eg it is not an overscanned cell) - key, // Unique key within array of cells - parent, // Reference to the parent Grid (instance) - rowIndex, // Vertical (row) index of cell - style // Style object to be applied to cell (to position it); - // This must be passed through to the rendered cell element. + isVisible, // This cell is visible within the grid (eg it is not an overscanned cell) + key, // Unique key within array of cells + parent, // Reference to the parent Grid (instance) + rowIndex, // Vertical (row) index of cell + style, // Style object to be applied to cell (to position it); + // This must be passed through to the rendered cell element. }) { // Grid data is a 2d array in this example... - const user = list[rowIndex][columnIndex] + const user = list[rowIndex][columnIndex]; // If cell content is complex, consider rendering a lighter-weight placeholder while scrolling. - const content = isScrolling - ? '...' - : + const content = isScrolling ? '...' : ; // Style is required since it specifies how the cell is to be sized and positioned. // React Virtualized depends on this sizing/positioning for proper scrolling behavior. @@ -233,13 +231,10 @@ function cellRenderer ({ // You can add additional class names or style properties as you would like. // Key is also required by React to more efficiently manage the array of cells. return ( -
+
{content}
- ) + ); } ``` @@ -250,23 +245,20 @@ Below is a very basic `Grid` example. The grid displays an array of objects with ```jsx import React from 'react'; import ReactDOM from 'react-dom'; -import { Grid } from 'react-virtualized'; +import {Grid} from 'react-virtualized'; // Grid data as an array of arrays const list = [ - ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125 /* ... */ ] + ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125 /* ... */], // And so on... ]; -function cellRenderer ({ columnIndex, key, rowIndex, style }) { +function cellRenderer({columnIndex, key, rowIndex, style}) { return ( -
+
{list[rowIndex][columnIndex]}
- ) + ); } // Render your grid @@ -280,6 +272,6 @@ ReactDOM.render( rowHeight={30} width={300} />, - document.getElementById('example') + document.getElementById('example'), ); ``` diff --git a/docs/InfiniteLoader.md b/docs/InfiniteLoader.md index 28a0b46e0..f351f4a67 100644 --- a/docs/InfiniteLoader.md +++ b/docs/InfiniteLoader.md @@ -1,5 +1,4 @@ -InfiniteLoader ---------------- +## InfiniteLoader A component that manages just-in-time fetching of data as a user scrolls up or down in a list. @@ -11,30 +10,33 @@ This is an advanced component and can be confusing in certain situations. [See below for more information](#edge-cases-and-considerations). ### Prop Types -| Property | Type | Required? | Description | -|:---|:---|:---:|:---| -| children | Function | βœ“ | Function responsible for rendering a virtualized component. This function should implement the following signature: `({ onRowsRendered: Function, registerChild: Function }) => PropTypes.element` | -| isRowLoaded | Function | βœ“ | Function responsible for tracking the loaded state of each row. It should implement the following signature: `({ index: number }): boolean` | -| loadMoreRows | Function | βœ“ | Callback to be invoked when more rows must be loaded. It should implement the following signature: `({ startIndex: number, stopIndex: number }): Promise`. The returned Promise should be resolved once row data has finished loading. It will be used to determine when to refresh the list with the newly-loaded data. This callback may be called multiple times in reaction to a single scroll event. | -| minimumBatchSize | Number | | Minimum number of rows to be loaded at a time. This property can be used to batch requests to reduce HTTP requests. Defaults to `10`. | -| rowCount | Number | βœ“ | Number of rows in list; can be arbitrary high number if actual number is unknown. | -| threshold | Number | | Threshold at which to pre-fetch data. A threshold X means that data will start loading when a user scrolls within X rows. Defaults to `15`. | + +| Property | Type | Required? | Description | +| :--------------- | :------- | :-------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| children | Function | βœ“ | Function responsible for rendering a virtualized component. This function should implement the following signature: `({ onRowsRendered: Function, registerChild: Function }) => PropTypes.element` | +| isRowLoaded | Function | βœ“ | Function responsible for tracking the loaded state of each row. It should implement the following signature: `({ index: number }): boolean` | +| loadMoreRows | Function | βœ“ | Callback to be invoked when more rows must be loaded. It should implement the following signature: `({ startIndex: number, stopIndex: number }): Promise`. The returned Promise should be resolved once row data has finished loading. It will be used to determine when to refresh the list with the newly-loaded data. This callback may be called multiple times in reaction to a single scroll event. | +| minimumBatchSize | Number | | Minimum number of rows to be loaded at a time. This property can be used to batch requests to reduce HTTP requests. Defaults to `10`. | +| rowCount | Number | βœ“ | Number of rows in list; can be arbitrary high number if actual number is unknown. | +| threshold | Number | | Threshold at which to pre-fetch data. A threshold X means that data will start loading when a user scrolls within X rows. Defaults to `15`. | ### Public Methods ##### resetLoadMoreRowsCache (autoReload: boolean = false) + Reset any cached data about already-loaded rows. This method should be called if any/all loaded data needs to be refetched (eg a filtered list where the search criteria changes). If `autoReload` passed as true, the last loaded batch would be automatically reloaded. ### Children function The child function is passed the following named parameters: -| Parameter | Type | Description | -|:---|:---|:---| -| onRowsRendered | Function | This function should be passed as the child's `onRowsRendered` property. It informs the loader when the user is scrolling. | -| registerChild | Function | This function should be set as the child's `ref` property. It enables a set of rows to be refreshed once their data has finished loading. | +| Parameter | Type | Description | +| :------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------- | +| onRowsRendered | Function | This function should be passed as the child's `onRowsRendered` property. It informs the loader when the user is scrolling. | +| registerChild | Function | This function should be set as the child's `ref` property. It enables a set of rows to be refreshed once their data has finished loading. | ### Examples + ###### InfiniteLoader and List This example uses `InfiniteLoader` to prefetch rows in a `List` list as a user scrolls. @@ -97,6 +99,7 @@ ReactDOM.render( ``` ###### InfiniteLoader and Grid + It is not common to use `InfiniteLoader` and `Grid` together but it is possible using an approach like this: ```jsx @@ -169,6 +172,7 @@ In that case it is possible that `InfiniteLoader` will not _know_ to call `loadM The easiest way to address this is for your application code to call `loadMoreRows` when it detects that the underlying collection may have changed. For example: + ```js _loadMoreRows ({ startIndex, stopIndex }) { this._loadMoreRowsStartIndex = startIndex diff --git a/docs/List.md b/docs/List.md index b2492cda5..ded07b303 100644 --- a/docs/List.md +++ b/docs/List.md @@ -1,35 +1,36 @@ -List ---------------- +## List This component renders a windowed list (rows) of elements. It uses a `Grid` internally to render the rows and all props are relayed to that inner `Grid`. That means that `List` also accepts [`Grid` props](Grid.md) in addition to the props shown below. ### Prop Types -| Property | Type | Required? | Description | -|:---|:---|:---:|:---| -| autoHeight | Boolean | | Outer `height` of `List` is set to "auto". This property should only be used in conjunction with the `WindowScroller` HOC. | -| className | String | | Optional custom CSS class name to attach to root `List` element. | -| estimatedRowSize | Number | | Used to estimate the total height of a `List` before all of its rows have actually been measured. The estimated total height is adjusted as rows are rendered. | -| height | Number | βœ“ | Height constraint for list (determines how many actual rows are rendered) | -| id | String | | Optional custom id to attach to root `List` element. | -| noRowsRenderer | Function | | Callback used to render placeholder content when `rowCount` is 0 | -| onRowsRendered | Function | | Callback invoked with information about the slice of rows that were just rendered: `({ overscanStartIndex: number, overscanStopIndex: number, startIndex: number, stopIndex: number }): void` | -| onScroll | Function | | Callback invoked whenever the scroll offset changes within the inner scrollable region: `({ clientHeight: number, scrollHeight: number, scrollTop: number }): void` | -| overscanRowCount | Number | | Number of rows to render above/below the visible bounds of the list. This can help reduce flickering during scrolling on certain browsers/devices. See [here](overscanUsage.md) for an important note about this property. | -| rowCount | Number | βœ“ | Number of rows in list. | -| rowHeight | Number or Function | βœ“ | Either a fixed row height (number) or a function that returns the height of a row given its index: `({ index: number }): number` | -| rowRenderer | Function | βœ“ | Responsible for rendering a row. [Learn more](#rowrenderer).| -| scrollToAlignment | String | | Controls the alignment scrolled-to-rows. The default ("_auto_") scrolls the least amount possible to ensure that the specified row is fully visible. Use "_start_" to always align rows to the top of the list and "_end_" to align them bottom. Use "_center_" to align them in the middle of container. | -| scrollToIndex | Number | | Row index to ensure visible (by forcefully scrolling if necessary) | -| scrollTop | Number | | Forced vertical scroll offset; can be used to synchronize scrolling between components | -| style | Object | | Optional custom inline style to attach to root `List` element. | -| tabIndex | Number | | Optional override of tab index default; defaults to `0`. | -| width | Number | βœ“ | Width of the list | + +| Property | Type | Required? | Description | +| :---------------- | :----------------- | :-------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| autoHeight | Boolean | | Outer `height` of `List` is set to "auto". This property should only be used in conjunction with the `WindowScroller` HOC. | +| className | String | | Optional custom CSS class name to attach to root `List` element. | +| estimatedRowSize | Number | | Used to estimate the total height of a `List` before all of its rows have actually been measured. The estimated total height is adjusted as rows are rendered. | +| height | Number | βœ“ | Height constraint for list (determines how many actual rows are rendered) | +| id | String | | Optional custom id to attach to root `List` element. | +| noRowsRenderer | Function | | Callback used to render placeholder content when `rowCount` is 0 | +| onRowsRendered | Function | | Callback invoked with information about the slice of rows that were just rendered: `({ overscanStartIndex: number, overscanStopIndex: number, startIndex: number, stopIndex: number }): void` | +| onScroll | Function | | Callback invoked whenever the scroll offset changes within the inner scrollable region: `({ clientHeight: number, scrollHeight: number, scrollTop: number }): void` | +| overscanRowCount | Number | | Number of rows to render above/below the visible bounds of the list. This can help reduce flickering during scrolling on certain browsers/devices. See [here](overscanUsage.md) for an important note about this property. | +| rowCount | Number | βœ“ | Number of rows in list. | +| rowHeight | Number or Function | βœ“ | Either a fixed row height (number) or a function that returns the height of a row given its index: `({ index: number }): number` | +| rowRenderer | Function | βœ“ | Responsible for rendering a row. [Learn more](#rowrenderer). | +| scrollToAlignment | String | | Controls the alignment scrolled-to-rows. The default ("_auto_") scrolls the least amount possible to ensure that the specified row is fully visible. Use "_start_" to always align rows to the top of the list and "_end_" to align them bottom. Use "_center_" to align them in the middle of container. | +| scrollToIndex | Number | | Row index to ensure visible (by forcefully scrolling if necessary) | +| scrollTop | Number | | Forced vertical scroll offset; can be used to synchronize scrolling between components | +| style | Object | | Optional custom inline style to attach to root `List` element. | +| tabIndex | Number | | Optional override of tab index default; defaults to `0`. | +| width | Number | βœ“ | Width of the list | ### Public Methods ##### forceUpdateGrid + Forcefully re-render the inner `Grid` component. Calling `forceUpdate` on `List` may not re-render the inner `Grid` since it uses `shallowCompare` as a performance optimization. @@ -41,12 +42,14 @@ This may be appropriate if the underlying row data has changed but the row sizes Gets offset for a given row and alignment. ##### measureAllRows + Pre-measure all rows in a `List`. Typically rows are only measured as needed and estimated heights are used for cells that have not yet been measured. This method ensures that the next call to getTotalSize() returns an exact size (as opposed to just an estimated one). ##### recomputeRowHeights (index: number) + Recompute row heights and offsets after the specified index (defaults to 0). `List` has no way of knowing when its underlying list data has changed since it only receives a `rowHeight` property. @@ -71,21 +74,19 @@ Responsible for rendering a single row, given its index. This function accepts the following named parameters: ```jsx -function rowRenderer ({ - index, // Index of row +function rowRenderer({ + index, // Index of row isScrolling, // The List is currently being scrolled - isVisible, // This row is visible within the List (eg it is not an overscanned row) - key, // Unique key within array of rendered rows - parent, // Reference to the parent List (instance) - style // Style object to be applied to row (to position it); - // This must be passed through to the rendered row element. + isVisible, // This row is visible within the List (eg it is not an overscanned row) + key, // Unique key within array of rendered rows + parent, // Reference to the parent List (instance) + style, // Style object to be applied to row (to position it); + // This must be passed through to the rendered row element. }) { - const user = list[index] + const user = list[index]; // If row content is complex, consider rendering a light-weight placeholder while scrolling. - const content = isScrolling - ? '...' - : + const content = isScrolling ? '...' : ; // Style is required since it specifies how the row is to be sized and positioned. // React Virtualized depends on this sizing/positioning for proper scrolling behavior. @@ -98,13 +99,10 @@ function rowRenderer ({ // You can add additional class names or style properties as you would like. // Key is also required by React to more efficiently manage the array of rows. return ( -
+
{content}
- ) + ); } ``` @@ -112,9 +110,9 @@ function rowRenderer ({ The List component supports the following static class names -| Property | Description | -|:---|:---| -| ReactVirtualized__List | Main (outer) element | +| Property | Description | +| :----------------------- | :------------------- | +| ReactVirtualized\_\_List | Main (outer) element | ### Examples @@ -127,29 +125,26 @@ For this reason it is recommended that your rows use a style like `overflow-y: h ```javascript import React from 'react'; import ReactDOM from 'react-dom'; -import { List } from 'react-virtualized'; +import {List} from 'react-virtualized'; // List data as an array of strings const list = [ - 'Brian Vaughn' + 'Brian Vaughn', // And so on... ]; -function rowRenderer ({ - key, // Unique key within array of rows - index, // Index of row within collection +function rowRenderer({ + key, // Unique key within array of rows + index, // Index of row within collection isScrolling, // The List is currently being scrolled - isVisible, // This row is visible within the List (eg it is not an overscanned row) - style // Style object to be applied to row (to position it) + isVisible, // This row is visible within the List (eg it is not an overscanned row) + style, // Style object to be applied to row (to position it) }) { return ( -
+
{list[index]}
- ) + ); } // Render your list @@ -161,6 +156,6 @@ ReactDOM.render( rowHeight={20} rowRenderer={rowRenderer} />, - document.getElementById('example') + document.getElementById('example'), ); ``` diff --git a/docs/Masonry.md b/docs/Masonry.md index 47594e809..f00c30169 100644 --- a/docs/Masonry.md +++ b/docs/Masonry.md @@ -1,47 +1,56 @@ The `Masonry` component efficiently displays dynamically-sized, user-positioned cells using windowing techniques. Cell positions are controlled by an injected `cellPositioner` property. Windowing is vertical; this component does not support horizontal scrolling. ### Overview + #### Measuring and layout + Rendering occurs in two phases: ##### Phase 1: Measurement + This phase uses estimated cell sizes (provided by the `cellMeasurerCache` property) to determine how many cells to measure in a batch. Batch size is chosen using a fast, naive layout algorithm that stacks images in order until the viewport has been filled. After measurement is complete (`componentDidMount` or `componentDidUpdate`) this component evaluates positioned cells in order to determine if another measurement pass is required (eg if actual cell sizes were less than estimated sizes). All measurements are permanently cached (keyed by `keyMapper`) for performance purposes. + ##### Phase 2: Layout + This phase uses the external `cellPositioner` to position cells. At this time the positioner has access to cached size measurements for all cells. The positions it returns are cached by `Masonry` for fast access later. Phase one is repeated if the user scrolls beyond the current layout's bounds. If the layout is invalidated due to eg a resize, cached positions can be cleared using `recomputeCellPositions()` or `clearCellPositions()`. #### Animation Constraints -* Simple animations are supported (eg translate/slide into place on initial reveal). -* More complex animations are not (eg flying from one position to another on resize). + +- Simple animations are supported (eg translate/slide into place on initial reveal). +- More complex animations are not (eg flying from one position to another on resize). #### Layout Constraints -* This component supports a multi-column layout. -* Each item can have a unique, lazily-measured height. -* The width of all items in a column must be equal. (Items may not span multiple columns.) -* The left position of all items within a column must align. -* Cell measurements must be synchronous. Size impacts layout and async measurements would require frequent layout invalidation. Support for this may be added in the future but for now the use of the `CellMeasurer` render callback's async `measure` parameter is not supported. + +- This component supports a multi-column layout. +- Each item can have a unique, lazily-measured height. +- The width of all items in a column must be equal. (Items may not span multiple columns.) +- The left position of all items within a column must align. +- Cell measurements must be synchronous. Size impacts layout and async measurements would require frequent layout invalidation. Support for this may be added in the future but for now the use of the `CellMeasurer` render callback's async `measure` parameter is not supported. ### Prop Types -| Property | Type | Required? | Description | -|:---|:---|:---:|:---| -| cellCount | number | βœ“ | Total number of items | -| cellMeasurerCache | mixed | βœ“ | Caches item measurements. Default sizes help `Masonry` decide how many images to batch-measure. Learn more [here](CellMeasurer.md#cellmeasurercache). | -| cellPositioner | function | βœ“ | Positions a cell given an index: `(index: number) => ({ left: number, top: number })`. [Learn more](#createmasonrycellpositioner) | -| cellRenderer | function | βœ“ | Responsible for rendering a cell given an index. [Learn more](#cellrenderer) | -| className | string | | Optional custom CSS class name to attach to root `Masonry` element. | -| height | number | βœ“ | Height of the component; this value determines the number of visible items. | -| id | string | | Optional custom id to attach to root `Masonry` element. | -| keyMapper | function | | Maps an index to a unique id to store cached measurement and position info for a cell. This prevents eg cached measurements from being invalidated when a collection is re-ordered. `(index: number) => any` | -| onCellsRendered | function | | Callback invoked with information about the cells that were most recently rendered. This callback is only invoked when visible cells have changed: `({ startIndex: number, stopIndex: number }): void` | -| onScroll | function | | Callback invoked whenever the scroll offset changes within the inner scrollable region: `({ clientHeight: number, scrollHeight: number, scrollTop: number }): void` | -| overscanByPixels | number | | Render this many additional pixels above and below the viewport. This helps reduce flicker when a user scrolls quickly. Defaults to 20. | -| role | string | | Optional override of ARIA role default; defaults to "grid". | -| scrollingResetTimeInterval | number | | Wait this amount of time after the last scroll event before resetting `pointer-events`; defaults to 150ms. | -| style | mixed | | Optional custom inline style to attach to root `Masonry` element. | -| tabIndex | number | | Optional override of tab index default; defaults to 0. | -| width | number | βœ“ | Width of the component; this value determines the number of visible items. | -| rowDirection | string | | row direction of items, can be ```ltr``` or ```rtl``` defaults to ```ltr``` | + +| Property | Type | Required? | Description | +| :------------------------- | :------- | :-------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| cellCount | number | βœ“ | Total number of items | +| cellMeasurerCache | mixed | βœ“ | Caches item measurements. Default sizes help `Masonry` decide how many images to batch-measure. Learn more [here](CellMeasurer.md#cellmeasurercache). | +| cellPositioner | function | βœ“ | Positions a cell given an index: `(index: number) => ({ left: number, top: number })`. [Learn more](#createmasonrycellpositioner) | +| cellRenderer | function | βœ“ | Responsible for rendering a cell given an index. [Learn more](#cellrenderer) | +| className | string | | Optional custom CSS class name to attach to root `Masonry` element. | +| height | number | βœ“ | Height of the component; this value determines the number of visible items. | +| id | string | | Optional custom id to attach to root `Masonry` element. | +| keyMapper | function | | Maps an index to a unique id to store cached measurement and position info for a cell. This prevents eg cached measurements from being invalidated when a collection is re-ordered. `(index: number) => any` | +| onCellsRendered | function | | Callback invoked with information about the cells that were most recently rendered. This callback is only invoked when visible cells have changed: `({ startIndex: number, stopIndex: number }): void` | +| onScroll | function | | Callback invoked whenever the scroll offset changes within the inner scrollable region: `({ clientHeight: number, scrollHeight: number, scrollTop: number }): void` | +| overscanByPixels | number | | Render this many additional pixels above and below the viewport. This helps reduce flicker when a user scrolls quickly. Defaults to 20. | +| role | string | | Optional override of ARIA role default; defaults to "grid". | +| scrollingResetTimeInterval | number | | Wait this amount of time after the last scroll event before resetting `pointer-events`; defaults to 150ms. | +| style | mixed | | Optional custom inline style to attach to root `Masonry` element. | +| tabIndex | number | | Optional override of tab index default; defaults to 0. | +| width | number | βœ“ | Width of the component; this value determines the number of visible items. | +| rowDirection | string | | row direction of items, can be `ltr` or `rtl` defaults to `ltr` | +| scrollTop | number | | Forced vertical scroll offset; can be used to synchronize scrolling between components | ## Public Methods @@ -58,24 +67,21 @@ Resets internal position cache, synchronously re-computes positions, then force- Responsible for rendering a single cell given its index. This function accepts the following named parameters: ```jsx -function cellRenderer ({ - index, // Index of item within the collection +function cellRenderer({ + index, // Index of item within the collection isScrolling, // The Grid is currently being scrolled - key, // Unique key within array of cells - parent, // Reference to the parent Grid (instance) - style // Style object to be applied to cell (to position it); - // This must be passed through to the rendered cell element. + key, // Unique key within array of cells + parent, // Reference to the parent Grid (instance) + style, // Style object to be applied to cell (to position it); + // This must be passed through to the rendered cell element. }) { return ( -
- {/* Your content goes here */} -
+ parent={parent}> +
{/* Your content goes here */}
); } @@ -85,12 +91,12 @@ function cellRenderer ({ `Masonry` provides a built-in positioner for a simple layout. This positioner requires a few configuration settings: -| Property | Type | Required? | Description | -|:---|:---|:---:|:---| -| cellMeasurerCache | `CellMeasurerCache` | βœ“ | Contains cell measurements (eg item height). | -| columnCount | number | βœ“ | Number of columns to use in layout. | -| columnWidth | number | βœ“ | Column width. | -| spacer | number | | Empty space between columns; defaults to 0. | +| Property | Type | Required? | Description | +| :---------------- | :------------------ | :-------: | :------------------------------------------- | +| cellMeasurerCache | `CellMeasurerCache` | βœ“ | Contains cell measurements (eg item height). | +| columnCount | number | βœ“ | Number of columns to use in layout. | +| columnWidth | number | βœ“ | Column width. | +| spacer | number | | Empty space between columns; defaults to 0. | You can use this layout as shown below: @@ -99,20 +105,20 @@ const cellPositioner = createMasonryCellPositioner({ cellMeasurerCache: cache, columnCount: 3, columnWidth: 200, - spacer: 10 -}) + spacer: 10, +}); -let masonryRef +let masonryRef; -function renderMasonry (props) { +function renderMasonry(props) { return ( masonryRef = ref} + ref={ref => (masonryRef = ref)} {...props} /> - ) + ); } ``` @@ -122,10 +128,10 @@ If any of the configuration settings change due to external changes (eg window r cellPositioner.reset({ columnCount: 4, columnWidth: 250, - spacer: 15 -}) + spacer: 15, +}); -masonryRef.recomputeCellPositions() +masonryRef.recomputeCellPositions(); ``` ### Basic `Masonry` Example @@ -139,7 +145,7 @@ import { CellMeasurer, CellMeasurerCache, createMasonryCellPositioner, - Masonry + Masonry, } from 'react-virtualized'; // Array of images with captions @@ -149,39 +155,34 @@ const list = []; const cache = new CellMeasurerCache({ defaultHeight: 250, defaultWidth: 200, - fixedWidth: true -}) + fixedWidth: true, +}); // Our masonry layout will use 3 columns with a 10px gutter between const cellPositioner = createMasonryCellPositioner({ cellMeasurerCache: cache, columnCount: 3, columnWidth: 200, - spacer: 10 -}) + spacer: 10, +}); -function cellRenderer ({ index, key, parent, style }) { - const datum = list[index] +function cellRenderer({index, key, parent, style}) { + const datum = list[index]; return ( - +

{datum.caption}

- ) + ); } // Render your grid @@ -194,7 +195,7 @@ ReactDOM.render( height={600} width={800} />, - document.getElementById('example') + document.getElementById('example'), ); ``` @@ -210,15 +211,15 @@ These specifics were taken into account in a small library here is an example with dynamically measured images: ```js -import React from "react"; -import { render } from "react-dom"; +import React from 'react'; +import {render} from 'react-dom'; import { CellMeasurer, CellMeasurerCache, createMasonryCellPositioner, - Masonry -} from "react-virtualized"; -import ImageMeasurer from "react-virtualized-image-measurer"; + Masonry, +} from 'react-virtualized'; +import ImageMeasurer from 'react-virtualized-image-measurer'; // Array of images with captions //const list = [{image: 'http://...', title: 'Foo'}]; @@ -226,7 +227,7 @@ import ImageMeasurer from "react-virtualized-image-measurer"; // We need to make sure images are loaded from scratch every time for this demo const noCacheList = list.map(item => ({ ...item, - image: item.image + "?noCache=" + Math.random() + image: item.image + '?noCache=' + Math.random(), })); const columnWidth = 200; @@ -237,7 +238,7 @@ const defaultWidth = columnWidth; const cache = new CellMeasurerCache({ defaultHeight, defaultWidth, - fixedWidth: true + fixedWidth: true, }); // Our masonry layout will use 3 columns with a 10px gutter between @@ -245,13 +246,12 @@ const cellPositioner = createMasonryCellPositioner({ cellMeasurerCache: cache, columnCount: 3, columnWidth, - spacer: 10 + spacer: 10, }); -const MasonryComponent = ({ itemsWithSizes }) => { - - function cellRenderer({ index, key, parent, style }) { - const { item, size } = itemsWithSizes[index]; +const MasonryComponent = ({itemsWithSizes}) => { + function cellRenderer({index, key, parent, style}) { + const {item, size} = itemsWithSizes[index]; const height = columnWidth * (size.height / size.width) || defaultHeight; return ( @@ -262,7 +262,7 @@ const MasonryComponent = ({ itemsWithSizes }) => { alt={item.title} style={{ height: height, - width: columnWidth + width: columnWidth, }} />

{item.title}

@@ -289,14 +289,11 @@ render( items={noCacheList} image={item => item.image} defaultHeight={defaultHeight} - defaultWidth={defaultWidth} - > - {({ itemsWithSizes }) => ( - - )} + defaultWidth={defaultWidth}> + {({itemsWithSizes}) => } , - document.getElementById("root") + document.getElementById('root'), ); ``` -Live demo: https://codesandbox.io/s/7y66p25qv6 \ No newline at end of file +Live demo: https://codesandbox.io/s/7y66p25qv6 diff --git a/docs/MultiGrid.md b/docs/MultiGrid.md index 2b60bd9d6..77b4bfb9b 100644 --- a/docs/MultiGrid.md +++ b/docs/MultiGrid.md @@ -1,5 +1,4 @@ -MultiGrid ---------------- +## MultiGrid Decorates `Grid` and adds fixed columns and/or rows. This is already possible using `ScrollSync` and 2 or more `Grid`s but `MultiGrid` reduces the boilerplate. @@ -8,24 +7,25 @@ The majority of `MultiGrid` properties (eg `cellRenderer`) are relayed to all ch Some properties (eg `columnCount`, `rowCount`) are adjusted slightly to supported fixed rows and columns. ### Prop Types -| Property | Type | Required? | Description | -|:---|:---|:---:|:---| -| classNameBottomLeftGrid | string | | Optional custom className to attach to bottom-left `Grid` element. | -| classNameBottomRightGrid | string | | Optional custom className to attach to bottom-right `Grid` element. | -| classNameTopLeftGrid | string | | Optional custom className to attach to top-left `Grid` element. | -| classNameTopRightGrid | string | | Optional custom className to attach to top-right `Grid` element. | -| enableFixedColumnScroll | boolean | | Fixed column can be actively scrolled; disabled by default | -| enableFixedRowScroll | boolean | | Fixed row can be actively scrolled; disabled by default | -| fixedColumnCount | number | | Number of fixed columns; defaults to `0` | -| fixedRowCount | number | | Number of fixed rows; defaults to `0` | -| onScrollbarPresenceChange | Function | | Called whenever a horizontal or vertical scrollbar is added or removed from the bottom, right `Grid`.: `({ horizontal: boolean, size: number, vertical: boolean }): void` | -| style | object | | Optional custom inline style to attach to root `MultiGrid` element. | -| styleBottomLeftGrid | object | | Optional custom inline style to attach to bottom-left `Grid` element. | -| styleBottomRightGrid | object | | Optional custom inline style to attach to bottom-right `Grid` element. | -| styleTopLeftGrid | object | | Optional custom inline style to attach to top-left `Grid` element. | -| styleTopRightGrid | object | | Optional custom inline style to attach to top-right `Grid` element. | -| hideTopRightGridScrollbar | boolean | | Optional hides top-right `Grid` scrollbar by adding an additional wrapper. Only useful if `enableFixedRowScroll` is set to `true` | -| hideBottomLeftGridScrollbar | boolean | | Optional hides bottom-left `Grid` scrollbar by adding an additional wrapper. Only useful if `enableFixedColumnScroll` is set to `true` | + +| Property | Type | Required? | Description | +| :-------------------------- | :------- | :-------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| classNameBottomLeftGrid | string | | Optional custom className to attach to bottom-left `Grid` element. | +| classNameBottomRightGrid | string | | Optional custom className to attach to bottom-right `Grid` element. | +| classNameTopLeftGrid | string | | Optional custom className to attach to top-left `Grid` element. | +| classNameTopRightGrid | string | | Optional custom className to attach to top-right `Grid` element. | +| enableFixedColumnScroll | boolean | | Fixed column can be actively scrolled; disabled by default | +| enableFixedRowScroll | boolean | | Fixed row can be actively scrolled; disabled by default | +| fixedColumnCount | number | | Number of fixed columns; defaults to `0` | +| fixedRowCount | number | | Number of fixed rows; defaults to `0` | +| onScrollbarPresenceChange | Function | | Called whenever a horizontal or vertical scrollbar is added or removed from the bottom, right `Grid`.: `({ horizontal: boolean, size: number, vertical: boolean }): void` | +| style | object | | Optional custom inline style to attach to root `MultiGrid` element. | +| styleBottomLeftGrid | object | | Optional custom inline style to attach to bottom-left `Grid` element. | +| styleBottomRightGrid | object | | Optional custom inline style to attach to bottom-right `Grid` element. | +| styleTopLeftGrid | object | | Optional custom inline style to attach to top-left `Grid` element. | +| styleTopRightGrid | object | | Optional custom inline style to attach to top-right `Grid` element. | +| hideTopRightGridScrollbar | boolean | | Optional hides top-right `Grid` scrollbar by adding an additional wrapper. Only useful if `enableFixedRowScroll` is set to `true` | +| hideBottomLeftGridScrollbar | boolean | | Optional hides bottom-left `Grid` scrollbar by adding an additional wrapper. Only useful if `enableFixedColumnScroll` is set to `true` | ### Public Methods @@ -44,9 +44,9 @@ Pass-thru that calls `recomputeGridSize` on all child `Grid`s. ### Examples ```jsx -import { MultiGrid } from 'react-virtualized' +import {MultiGrid} from 'react-virtualized'; -function render () { +function render() { return ( - ) + ); } ``` diff --git a/docs/README.md b/docs/README.md index 356b3a21d..fffbebc4b 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,32 +1,31 @@ -Documentation ---------------- +## Documentation ### Components -* [Collection](Collection.md) -* [Grid](Grid.md) -* [List](List.md) -* [Masonry](Masonry.md) -* [Table](Table.md) - * [Column](Column.md) - * [SortDirection](SortDirection.md) +- [Collection](Collection.md) +- [Grid](Grid.md) +- [List](List.md) +- [Masonry](Masonry.md) +- [Table](Table.md) + - [Column](Column.md) + - [SortDirection](SortDirection.md) ### High-Order Components -* [ArrowKeyStepper](ArrowKeyStepper.md) -* [AutoSizer](AutoSizer.md) -* [CellMeasurer](CellMeasurer.md) -* [ColumnSizer](ColumnSizer.md) -* [InfiniteLoader](InfiniteLoader.md) -* [MultiGrid](MultiGrid.md) -* [ScrollSync](ScrollSync.md) -* [WindowScroller](WindowScroller.md) +- [ArrowKeyStepper](ArrowKeyStepper.md) +- [AutoSizer](AutoSizer.md) +- [CellMeasurer](CellMeasurer.md) +- [ColumnSizer](ColumnSizer.md) +- [InfiniteLoader](InfiniteLoader.md) +- [MultiGrid](MultiGrid.md) +- [ScrollSync](ScrollSync.md) +- [WindowScroller](WindowScroller.md) ### How-to Guides -* [Customizing classes and styles](customizingStyles.md) -* [Displaying items in reverse order](reverseList.md) -* [Using AutoSizer](usingAutoSizer.md) -* [Creating an infinite-loading list](creatingAnInfiniteLoadingList.md) -* [Natural sort Table](tableWithNaturalSort.md) -* [Sorting a Table by multiple columns](multiColumnSortTable.md) \ No newline at end of file +- [Customizing classes and styles](customizingStyles.md) +- [Displaying items in reverse order](reverseList.md) +- [Using AutoSizer](usingAutoSizer.md) +- [Creating an infinite-loading list](creatingAnInfiniteLoadingList.md) +- [Natural sort Table](tableWithNaturalSort.md) +- [Sorting a Table by multiple columns](multiColumnSortTable.md) diff --git a/docs/ScrollSync.md b/docs/ScrollSync.md index d89a61891..6d515969d 100644 --- a/docs/ScrollSync.md +++ b/docs/ScrollSync.md @@ -1,55 +1,57 @@ -ScrollSync ---------------- +## ScrollSync High order component that simplifies the process of synchronizing scrolling between two or more virtualized components. ### Prop Types -| Property | Type | Required? | Description | -|:---|:---|:---:|:---| -| children | Function | βœ“ | Function responsible for rendering 2 or more virtualized components. [See below](#children-function) for details about this function's signature. | + +| Property | Type | Required? | Description | +| :------- | :------- | :-------: | :------------------------------------------------------------------------------------------------------------------------------------------------ | +| children | Function | βœ“ | Function responsible for rendering 2 or more virtualized components. [See below](#children-function) for details about this function's signature. | ### Children function The child function is passed the following named parameters: -| Parameter | Type | Description | -|:---|:---|:---| -| clientHeight | Number | Height of the visible portion of the `Grid` (or other scroll-synced component) | -| clientWidth | Number | Width of the visible portion of the `Grid` (or other scroll-synced component) | -| onScroll | Function | This function should be passed through to at least one of the virtualized child components. Updates to it will trigger updates to the scroll offset parameters which will in turn update the other virtualized children. | -| scrollHeight | Number | Total height of all rows in the `Grid` (or other scroll-synced component) | -| scrollLeft | Number | The current scroll-left offset. | -| scrollTop | Number | The current scroll-top offset. | -| scrollWidth | Number | Total width of all rows in the `Grid` (or other scroll-synced component) | +| Parameter | Type | Description | +| :----------- | :------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| clientHeight | Number | Height of the visible portion of the `Grid` (or other scroll-synced component) | +| clientWidth | Number | Width of the visible portion of the `Grid` (or other scroll-synced component) | +| onScroll | Function | This function should be passed through to at least one of the virtualized child components. Updates to it will trigger updates to the scroll offset parameters which will in turn update the other virtualized children. | +| scrollHeight | Number | Total height of all rows in the `Grid` (or other scroll-synced component) | +| scrollLeft | Number | The current scroll-left offset. | +| scrollTop | Number | The current scroll-top offset. | +| scrollWidth | Number | Total width of all rows in the `Grid` (or other scroll-synced component) | ### Examples This example uses `ScrollSync` to create a fixed row of columns to go along with a scrollable grid. ```jsx -import { Grid, List, ScrollSync } from 'react-virtualized' +import {Grid, List, ScrollSync} from 'react-virtualized'; import 'react-virtualized/styles.css'; // only needs to be imported once -function render (props) { +function render(props) { return ( - {({ clientHeight, clientWidth, onScroll, scrollHeight, scrollLeft, scrollTop, scrollWidth }) => ( -
-
- + {({ + clientHeight, + clientWidth, + onScroll, + scrollHeight, + scrollLeft, + scrollTop, + scrollWidth, + }) => ( +
+
+
-
- +
+
)} - ) + ); } ``` diff --git a/docs/SortDirection.md b/docs/SortDirection.md index 992ce32cc..2a4f3dece 100644 --- a/docs/SortDirection.md +++ b/docs/SortDirection.md @@ -1,12 +1,13 @@ -SortDirection ---------------- +## SortDirection Specifies which direction [Table](Table.md) data is currently sorted in. #### SortDirection.ASC + Sort items in ascending order. This means arranging from the lowest value to the highest (e.g. a-z, 0-9). #### SortDirection.DESC + Sort items in descending order. This means arranging from the highest value to the lowest (e.g. z-a, 9-0). diff --git a/docs/Table.md b/docs/Table.md index 3309b24d9..0f1e857f6 100644 --- a/docs/Table.md +++ b/docs/Table.md @@ -1,56 +1,57 @@ -Table ---------------- +## Table Table component with fixed headers and windowed rows for improved performance with large data sets. This component expects explicit `width` and `height` parameters. `Table` content can scroll vertically but it is not meant to scroll horizontally. ### Prop Types -| Property | Type | Required? | Description | -|:---|:---|:---:|:---| -| autoHeight | Boolean | | Outer `height` of `Table` is set to "auto". This property should only be used in conjunction with the `WindowScroller` HOC. | -| children | [Column](Column.md) | βœ“ | One or more Columns describing the data displayed in this table | -| className | String | | Optional custom CSS class name to attach to root `Table` element. | -| disableHeader | Boolean | | Do not render the table header (only the rows) | -| estimatedRowSize | Number | | Used to estimate the total height of a `Table` before all of its rows have actually been measured. The estimated total height is adjusted as rows are rendered. | -| gridClassName | String | | Optional custom CSS class name to attach to inner Grid element | -| gridStyle | Object | | Optional inline style to attach to inner Grid element | -| headerClassName | String | | CSS class to apply to all column headers | -| headerHeight | Number | βœ“ | Fixed height of header row | -| headerRowRenderer | Function | | Responsible for rendering the table header row given an array of columns. [Learn more](#headerrowrenderer) | -| headerStyle | Object | | Optional custom inline style to attach to table header columns. | -| height | Number | βœ“ | Fixed/available height for out DOM element | -| id | String | | Optional custom id to attach to root `Table` element. | -| noRowsRenderer | Function | | Callback used to render placeholder content when :rowCount is 0 | -| onColumnClick | Function | | Callback invoked when a user clicks on a table column. `({ columnData: any, dataKey: string, event: Event }): void` | -| onHeaderClick | Function | | Callback invoked when a user clicks on a table header. `({ columnData: any, dataKey: string, event: Event }): void` | -| onRowClick | Function | | Callback invoked when a user clicks on a table row. `({ event: Event, index: number, rowData: any }): void` | -| onRowDoubleClick | Function | | Callback invoked when a user double-clicks on a table row. `({ event: Event, index: number, rowData: any }): void` | -| onRowMouseOut | Function | | Callback invoked when the mouse leaves a table row. `({ event: Event, index: number, rowData: any }): void` | -| onRowMouseOver | Function | | Callback invoked when a user moves the mouse over a table row. `({ event: Event, index: number, rowData: any }): void` | -| onRowRightClick | Function | | Callback invoked when a user right-clicks on a table row. `({ event: Event, index: number, rowData: any }): void` | -| onRowsRendered | Function | | Callback invoked with information about the slice of rows that were just rendered: `({ overscanStartIndex: number, overscanStopIndex: number, startIndex: number, stopIndex: number }): void` | -| overscanRowCount | Number | | Number of rows to render above/below the visible bounds of the list. This can help reduce flickering during scrolling on certain browsers/devices. See [here](overscanUsage.md) for an important note about this property. | -| onScroll | Function | | Callback invoked whenever the scroll offset changes within the inner scrollable region: `({ clientHeight: number, scrollHeight: number, scrollTop: number }): void` | -| rowClassName | String or Function | | CSS class to apply to all table rows (including the header row). This value may be either a static string or a function with the signature `({ index: number }): string`. Note that for the header row an index of `-1` is provided. | -| rowCount | Number | βœ“ | Number of rows in table. | -| rowGetter | Function | βœ“ | Callback responsible for returning a data row given an index. `({ index: int }): any` | -| rowHeight | Number or Function | βœ“ | Either a fixed row height (number) or a function that returns the height of a row given its index: `({ index: number }): number` | -| rowRenderer | Function | | Responsible for rendering a table row given an array of columns. [Learn more](#rowrenderer) | -| rowStyle | Object or Function | | Optional custom inline style to attach to table rows. This value may be either a style object or a function with the signature `({ index: number }): Object`. Note that for the header row an index of `-1` is provided. | -| scrollToAlignment | String | | Controls the alignment scrolled-to-rows. The default ("_auto_") scrolls the least amount possible to ensure that the specified row is fully visible. Use "_start_" to always align rows to the top of the list and "_end_" to align them bottom. Use "_center_" to align them in the middle of container. | -| scrollToIndex | Number | | Row index to ensure visible (by forcefully scrolling if necessary) | -| scrollTop | Number | | Vertical offset | -| sort | Function | | Sort function to be called if a sortable header is clicked. `({ defaultSortDirection: string, event: MouseEvent, sortBy: string, sortDirection: SortDirection }): void` | -| sortBy | String | | Data is currently sorted by this `dataKey` (if it is sorted at all) | -| sortDirection | [SortDirection](SortDirection.md) | | Data is currently sorted in this direction (if it is sorted at all) | -| style | Object | | Optional custom inline style to attach to root `Table` element. | -| tabIndex | Number | | Optional override of inner `Grid` tab index default; defaults to `0`. | -| width | Number | βœ“ | Width of the table | + +| Property | Type | Required? | Description | +| :---------------- | :-------------------------------- | :-------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| autoHeight | Boolean | | Outer `height` of `Table` is set to "auto". This property should only be used in conjunction with the `WindowScroller` HOC. | +| children | [Column](Column.md) | βœ“ | One or more Columns describing the data displayed in this table | +| className | String | | Optional custom CSS class name to attach to root `Table` element. | +| disableHeader | Boolean | | Do not render the table header (only the rows) | +| estimatedRowSize | Number | | Used to estimate the total height of a `Table` before all of its rows have actually been measured. The estimated total height is adjusted as rows are rendered. | +| gridClassName | String | | Optional custom CSS class name to attach to inner Grid element | +| gridStyle | Object | | Optional inline style to attach to inner Grid element | +| headerClassName | String | | CSS class to apply to all column headers | +| headerHeight | Number | βœ“ | Fixed height of header row | +| headerRowRenderer | Function | | Responsible for rendering the table header row given an array of columns. [Learn more](#headerrowrenderer) | +| headerStyle | Object | | Optional custom inline style to attach to table header columns. | +| height | Number | βœ“ | Fixed/available height for out DOM element | +| id | String | | Optional custom id to attach to root `Table` element. | +| noRowsRenderer | Function | | Callback used to render placeholder content when :rowCount is 0 | +| onColumnClick | Function | | Callback invoked when a user clicks on a table column. `({ columnData: any, dataKey: string, event: Event }): void` | +| onHeaderClick | Function | | Callback invoked when a user clicks on a table header. `({ columnData: any, dataKey: string, event: Event }): void` | +| onRowClick | Function | | Callback invoked when a user clicks on a table row. `({ event: Event, index: number, rowData: any }): void` | +| onRowDoubleClick | Function | | Callback invoked when a user double-clicks on a table row. `({ event: Event, index: number, rowData: any }): void` | +| onRowMouseOut | Function | | Callback invoked when the mouse leaves a table row. `({ event: Event, index: number, rowData: any }): void` | +| onRowMouseOver | Function | | Callback invoked when a user moves the mouse over a table row. `({ event: Event, index: number, rowData: any }): void` | +| onRowRightClick | Function | | Callback invoked when a user right-clicks on a table row. `({ event: Event, index: number, rowData: any }): void` | +| onRowsRendered | Function | | Callback invoked with information about the slice of rows that were just rendered: `({ overscanStartIndex: number, overscanStopIndex: number, startIndex: number, stopIndex: number }): void` | +| overscanRowCount | Number | | Number of rows to render above/below the visible bounds of the list. This can help reduce flickering during scrolling on certain browsers/devices. See [here](overscanUsage.md) for an important note about this property. | +| onScroll | Function | | Callback invoked whenever the scroll offset changes within the inner scrollable region: `({ clientHeight: number, scrollHeight: number, scrollTop: number }): void` | +| rowClassName | String or Function | | CSS class to apply to all table rows (including the header row). This value may be either a static string or a function with the signature `({ index: number }): string`. Note that for the header row an index of `-1` is provided. | +| rowCount | Number | βœ“ | Number of rows in table. | +| rowGetter | Function | βœ“ | Callback responsible for returning a data row given an index. `({ index: int }): any` | +| rowHeight | Number or Function | βœ“ | Either a fixed row height (number) or a function that returns the height of a row given its index: `({ index: number }): number` | +| rowRenderer | Function | | Responsible for rendering a table row given an array of columns. [Learn more](#rowrenderer) | +| rowStyle | Object or Function | | Optional custom inline style to attach to table rows. This value may be either a style object or a function with the signature `({ index: number }): Object`. Note that for the header row an index of `-1` is provided. | +| scrollToAlignment | String | | Controls the alignment scrolled-to-rows. The default ("_auto_") scrolls the least amount possible to ensure that the specified row is fully visible. Use "_start_" to always align rows to the top of the list and "_end_" to align them bottom. Use "_center_" to align them in the middle of container. | +| scrollToIndex | Number | | Row index to ensure visible (by forcefully scrolling if necessary) | +| scrollTop | Number | | Vertical offset | +| sort | Function | | Sort function to be called if a sortable header is clicked. `({ defaultSortDirection: string, event: MouseEvent, sortBy: string, sortDirection: SortDirection }): void` | +| sortBy | String | | Data is currently sorted by this `dataKey` (if it is sorted at all) | +| sortDirection | [SortDirection](SortDirection.md) | | Data is currently sorted in this direction (if it is sorted at all) | +| style | Object | | Optional custom inline style to attach to root `Table` element. | +| tabIndex | Number | | Optional override of inner `Grid` tab index default; defaults to `0`. | +| width | Number | βœ“ | Width of the table | ### Public Methods ##### forceUpdateGrid + Forcefully re-render the inner `Grid` component. Calling `forceUpdate` on `Table` may not re-render the inner `Grid` since it uses `shallowCompare` as a performance optimization. @@ -66,12 +67,14 @@ Gets offset for a given row and alignment. Gets the scrollbar width used to pad the table-header. ##### measureAllRows + Pre-measure all rows in a `Table`. Typically rows are only measured as needed and estimated heights are used for cells that have not yet been measured. This method ensures that the next call to getTotalSize() returns an exact size (as opposed to just an estimated one). ##### recomputeRowHeights (index: number) + Recompute row heights and offsets after the specified index (defaults to 0). `Table` has no way of knowing when its underlying list data has changed since it only receives a `rowHeight` property. @@ -94,15 +97,15 @@ This method can be used to safely scroll back to a cell that a user has scrolled The Table component supports the following static class names -| Property | Description | -|:---|:---| -| ReactVirtualized__Table | Main (outer) element | -| ReactVirtualized__Table__headerColumn | Header cell (similar to `thead > tr > th`) | -| ReactVirtualized__Table__headerRow | Header row (similar to `thead > tr`) | -| ReactVirtualized__Table__row | Table row (akin to `tbody > tr`) | -| ReactVirtualized__Table__rowColumn | Table column (akin to `tbody > tr > td`) | -| ReactVirtualized__Table__sortableHeaderColumn | Applied to header columns that are sortable | -| ReactVirtualized__Table__sortableHeaderIcon | SVG sort indicator | +| Property | Description | +| :------------------------------------------------ | :------------------------------------------ | +| ReactVirtualized\_\_Table | Main (outer) element | +| ReactVirtualized\_\_Table\_\_headerColumnn | Header cell (similar to `thead > tr > th`) | +| ReactVirtualized\_\_Table\_\_headerRow | Header row (similar to `thead > tr`) | +| ReactVirtualized\_\_Table\_\_row | Table row (akin to `tbody > tr`) | +| ReactVirtualized\_\_Table\_\_rowColumn | Table column (akin to `tbody > tr > td`) | +| ReactVirtualized\_\_Table\_\_sortableHeaderColumn | Applied to header columns that are sortable | +| ReactVirtualized\_\_Table\_\_sortableHeaderIcon | SVG sort indicator | ### headerRowRenderer @@ -112,11 +115,11 @@ You may want to start by forking the [`defaultTableHeaderRowRenderer`](https://g This function accepts the following named parameters: -| Property | Description | -|:---|:---| -| className | Header class name | -| columns | Array of React nodes | -| style | Header style object | +| Property | Description | +| :-------- | :------------------- | +| className | Header class name | +| columns | Array of React nodes | +| style | Header style object | ### rowRenderer @@ -125,23 +128,18 @@ It is useful for situations where you require additional hooks into `Table` (eg If you do override `rowRenderer` the easiest way is to decorate the default implementation like so: ```jsx -import { SortableContainer, SortableElement } from 'react-sortable-hoc' -import { defaultTableRowRenderer, Table } from 'react-virtualized' +import {SortableContainer, SortableElement} from 'react-sortable-hoc'; +import {defaultTableRowRenderer, Table} from 'react-virtualized'; -const SortableTable = SortableContainer(Table) -const SortableTableRowRenderer = SortableElement(defaultTableRowRenderer) +const SortableTable = SortableContainer(Table); +const SortableTableRowRenderer = SortableElement(defaultTableRowRenderer); -function rowRenderer (props) { - return +function rowRenderer(props) { + return ; } -function CustomizedTable (props) { - return ( - - ) +function CustomizedTable(props) { + return ; } ``` @@ -149,18 +147,19 @@ If you require greater customization, you may want to fork the [`defaultTableRow This function accepts the following named parameters: -| Property | Description | -|:---|:---| -| className | Row-level class name | -| columns | Array of React nodes | -| index | Row index | -| isScrolling | Boolean flag indicating if `Table` is currently being scrolled | -| onRowClick | Optional row `onClick` handler | -| onRowDoubleClick | Optional row `onDoubleClick` handler | -| onRowMouseOver | Optional row `onMouseOver` handler | -| onRowMouseOut | Optional row `onMouseOut` handler | -| rowData | Row data | -| style | Row-level style object | +| Property | Description | +| :--------------- | :------------------------------------------------------------- | +| className | Row-level class name | +| columns | Array of React nodes | +| index | Row index | +| isScrolling | Boolean flag indicating if `Table` is currently being scrolled | +| onRowClick | Optional row `onClick` handler | +| onRowDoubleClick | Optional row `onDoubleClick` handler | +| onRowMouseOver | Optional row `onMouseOver` handler | +| onRowMouseOut | Optional row `onMouseOut` handler | +| rowData | Row data | +| style | Row-level style object | +| key | Unique key within array of rendered rows | ### Examples @@ -169,12 +168,12 @@ Below is a very basic `Table` example. This table has only 2 columns, each conta ```javascript import React from 'react'; import ReactDOM from 'react-dom'; -import { Column, Table } from 'react-virtualized'; +import {Column, Table} from 'react-virtualized'; import 'react-virtualized/styles.css'; // only needs to be imported once // Table data as an array of objects const list = [ - { name: 'Brian Vaughn', description: 'Software engineer' } + {name: 'Brian Vaughn', description: 'Software engineer'}, // And so on... ]; @@ -186,19 +185,10 @@ ReactDOM.render( headerHeight={20} rowHeight={30} rowCount={list.length} - rowGetter={({ index }) => list[index]} - > - - + rowGetter={({index}) => list[index]}> + + , - document.getElementById('example') + document.getElementById('example'), ); ``` diff --git a/docs/WindowScroller.md b/docs/WindowScroller.md index 9736f0a0c..8f6f15212 100644 --- a/docs/WindowScroller.md +++ b/docs/WindowScroller.md @@ -1,5 +1,4 @@ -WindowScroller ---------------- +## WindowScroller A component that enables a `Table` or `List` component to be scrolled based on the window's scroll positions. This can be used to create layouts similar to Facebook or Twitter news feeds. @@ -8,24 +7,26 @@ This can be used to create layouts similar to Facebook or Twitter news feeds. This may change with a future release but for the time being this component should be used with `Table` or `List` only. ### Prop Types -| Property | Type | Required? | Description | -|:---|:---|:---:|:---| -| children | Function | βœ“ | Function responsible for rendering children. This function should implement the following signature: `({ height: number, width: number, isScrolling: boolean, scrollTop: number, registerChild: function, onChildScroll: function }) => PropTypes.element` | -| onResize | Function | | Callback to be invoked on-resize; it is passed the following named parameters: `({ height: number, width: number })`. | -| onScroll | Function | | Callback to be invoked on-scroll; it is passed the following named parameters: `({ scrollTop: number, scrollLeft: number })`. | -| scrollElement | any | | Element to attach scroll event listeners. Defaults to `window`. | -| scrollingResetTimeInterval | Number | | Wait this amount of time after the last scroll event before resetting WindowScroller `pointer-events`; defaults to 150ms. | -| serverHeight | Number | | Height used for server-side rendering. | -| serverWidth | Number | | Width used for server-side rendering. | - -### Render Props -| Property | Type | Description | -|:---|:---|:---| -| height | Number | The height of the viewport. | -| isScrolling | Boolean | Indicates if the `Table` or `List` is scrolling | -| onChildScroll | Function | Used by the `Table` or `List`'s `onScroll` prop to "scroll" the list | + +| Property | Type | Required? | Description | +| :------------------------- | :------- | :-------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| children | Function | βœ“ | Function responsible for rendering children. This function should implement the following signature: `({ height: number, width: number, isScrolling: boolean, scrollTop: number, registerChild: function, onChildScroll: function }) => PropTypes.element` | +| onResize | Function | | Callback to be invoked on-resize; it is passed the following named parameters: `({ height: number, width: number })`. | +| onScroll | Function | | Callback to be invoked on-scroll; it is passed the following named parameters: `({ scrollTop: number, scrollLeft: number })`. | +| scrollElement | any | | Element to attach scroll event listeners. Defaults to `window`. | +| scrollingResetTimeInterval | Number | | Wait this amount of time after the last scroll event before resetting WindowScroller `pointer-events`; defaults to 150ms. | +| serverHeight | Number | | Height used for server-side rendering. | +| serverWidth | Number | | Width used for server-side rendering. | + +### Render Props + +| Property | Type | Description | +| :------------ | :------- | :--------------------------------------------------------------------------------------------------------- | +| height | Number | The height of the viewport. | +| isScrolling | Boolean | Indicates if the `Table` or `List` is scrolling | +| onChildScroll | Function | Used by the `Table` or `List`'s `onScroll` prop to "scroll" the list | | registerChild | Function | specify grid container deeper in layout (by default `WindowScroller` uses `ReactDOM.findDOMNode` function) | -| scrollTop | Number | Scroll distance from the page | +| scrollTop | Number | Scroll distance from the page | ### Public Methods diff --git a/docs/creatingAnInfiniteLoadingList.md b/docs/creatingAnInfiniteLoadingList.md index 9b1a279ef..04ddb3101 100644 --- a/docs/creatingAnInfiniteLoadingList.md +++ b/docs/creatingAnInfiniteLoadingList.md @@ -1,12 +1,11 @@ -Creating an Infinite-Loading List ---------------- +## Creating an Infinite-Loading List The `InfiniteLoader` component was created to help break large data sets down into chunks that could be just-in-time loaded as they were scrolled into view. It can also be used to create an infinite-loading list (eg. Twitter or Facebook). Here's a basic example of how you might implement that: ```jsx -function MyComponent ({ +function MyComponent({ /** Are there more items to load? (This information comes from the most recent API request.) */ hasNextPage, /** Are we currently loading a page of items? (This may be an in-flight flag in your Redux store for example.) */ @@ -14,49 +13,41 @@ function MyComponent ({ /** List of items loaded so far */ list, /** Callback function (eg. Redux action-creator) responsible for loading the next page of items */ - loadNextPage + loadNextPage, }) { // If there are more items to be loaded then add an extra row to hold a loading indicator. - const rowCount = hasNextPage - ? list.size + 1 - : list.size + const rowCount = hasNextPage ? list.size + 1 : list.size; // Only load 1 page of items at a time. // Pass an empty callback to InfiniteLoader in case it asks us to load more than once. - const loadMoreRows = isNextPageLoading - ? () => {} - : loadNextPage + const loadMoreRows = isNextPageLoading ? () => {} : loadNextPage; // Every row is loaded except for our loading indicator row. - const isRowLoaded = ({ index }) => !hasNextPage || index < list.size + const isRowLoaded = ({index}) => !hasNextPage || index < list.size; // Render a list item or a loading indicator. - const rowRenderer = ({ index, key, style }) => { - let content + const rowRenderer = ({index, key, style}) => { + let content; - if (!isRowLoaded({ index })) { - content = 'Loading...' + if (!isRowLoaded({index})) { + content = 'Loading...'; } else { - content = list.getIn([index, 'name']) + content = list.getIn([index, 'name']); } return ( -
+
{content}
- ) - } + ); + }; return ( - {({ onRowsRendered, registerChild }) => ( + rowCount={rowCount}> + {({onRowsRendered, registerChild}) => ( )} - ) + ); } ``` diff --git a/docs/customizingStyles.md b/docs/customizingStyles.md index c7606b7a0..bdb5732b7 100644 --- a/docs/customizingStyles.md +++ b/docs/customizingStyles.md @@ -1,5 +1,4 @@ -Customizing Classes and Styles ---------------- +## Customizing Classes and Styles React virtual CSS styles are split into their own, separately loaded stylesheet in order to simplify universal/isomorphic usage while also enabling styles to be customized. This stylesheet should be imported somewhere (usually during bootstrapping) like so: @@ -10,19 +9,23 @@ import 'react-virtualized/styles.css'; You can also customize component styles in any of the ways below: #### Forked Styles + Fork the react-virtualized `styles.css` file and load your own, totally custom styles. #### Global CSS + Load an additional, external CSS file that defines global classes (eg. `.ReactVirtualized__Table`, `.ReactVirtualized__Table__row`) to append to default inline styles. Learn more about which class names a component supports in the [API docs](https://github.com/bvaughn/react-virtualized/blob/master/docs/). #### CSS Modules + If you are using CSS modules you can specify custom class names to be appended to a component instance (eg. `Table` supports `className`, `headerClassName`, and `rowClassName` properties). Learn more about which class names are supported in the [API docs](https://github.com/bvaughn/react-virtualized/blob/master/docs/). #### Inline Styles + react-virtualized components support inline style props for style overrides. Learn more about which inline style properties are supported in the [API docs](https://github.com/bvaughn/react-virtualized/blob/master/docs/). diff --git a/docs/multiColumnSortTable.md b/docs/multiColumnSortTable.md index dbaf95061..533ae38a8 100644 --- a/docs/multiColumnSortTable.md +++ b/docs/multiColumnSortTable.md @@ -3,16 +3,9 @@ For advanced use cases, you may want to sort by multiple fields. This can be accomplished using the `createMultiSort` utility. ```jsx -import { - createTableMultiSort, - Column, - Table, -} from 'react-virtualized'; +import {createTableMultiSort, Column, Table} from 'react-virtualized'; -function sort({ - sortBy, - sortDirection, -}) { +function sort({sortBy, sortDirection}) { // 'sortBy' is an ordered Array of fields. // 'sortDirection' is a map of field name to "ASC" or "DESC" directions. // Sort your collection however you'd like. @@ -23,7 +16,7 @@ const sortState = createMultiSort(sort); // When rendering your header columns, // Use the sort state exposed by sortState: -const headerRenderer = ({ dataKey, label }) => { +const headerRenderer = ({dataKey, label}) => { const showSortIndicator = sortState.sortBy.includes(dataKey); return ( <> @@ -40,16 +33,13 @@ const headerRenderer = ({ dataKey, label }) => { {...tableProps} sort={sortState.sort} sortBy={undefined} - sortDirection={undefined} -> - - + sortDirection={undefined}> + +; ``` The `createMultiSort` utility also accepts default sort-by values: + ```js const sortState = createMultiSort(sort, { defaultSortBy: ['firstName', 'lastName'], @@ -58,4 +48,4 @@ const sortState = createMultiSort(sort, { lastName: 'ASC', }, }); -``` \ No newline at end of file +``` diff --git a/docs/overscanUsage.md b/docs/overscanUsage.md index 4e5dbd570..3242508f0 100644 --- a/docs/overscanUsage.md +++ b/docs/overscanUsage.md @@ -4,4 +4,4 @@ This property has performance implications though: the higher the value, the mor I suggest using the default value (10) as a starting point and lowering it if possible. Setting the value too high will erase the performance gains achieved by using react-virtualized. You should aim to use the lowest value as possible that still generally avoids any empty space from appearing during normal scrolling actions. -Note that the same advice applies to the `overscanColumnCount` as well. \ No newline at end of file +Note that the same advice applies to the `overscanColumnCount` as well. diff --git a/docs/reverseList.md b/docs/reverseList.md index e6442efb2..2a8b752a8 100644 --- a/docs/reverseList.md +++ b/docs/reverseList.md @@ -1,5 +1,4 @@ -Displaying Items in Reverse Order ---------------- +## Displaying Items in Reverse Order Sometimes it is desirable to display a list in reverse order. The simplest way to do this is to add items to the front of the list (`unshift`) instead of the end (`push`). @@ -7,29 +6,29 @@ Here is a high level template for doing this: ```jsx export default class Example extends Component { - constructor (props) { - super(props) + constructor(props) { + super(props); this.state = { - list: [] - } + list: [], + }; } - componentDidMount () { - this._interval = setInterval(::this._updateFeed, 500) + componentDidMount() { + this._interval = setInterval(::this._updateFeed, 500); } - componentWillUnmount () { - clearInterval(this._interval) + componentWillUnmount() { + clearInterval(this._interval); } - render () { - const { list } = this.state + render() { + const {list} = this.state; return (
- ) + ); } - _updateFeed () { - const list = [ ...this.state.list ] + _updateFeed() { + const list = [...this.state.list]; - list.unshift( + list + .unshift // Add new item here - ) + (); - this.setState({ list }) + this.setState({list}); // If you want to scroll to the top you can do it like this - this.refs.List.scrollToRow(0) + this.refs.List.scrollToRow(0); } - _rowRenderer ({ key, index }) { + _rowRenderer({key, index}) { return ( -
+
{/* Your content goes here */}
- ) + ); } } ``` diff --git a/docs/tableWithNaturalSort.md b/docs/tableWithNaturalSort.md index 6841d2587..95589e668 100644 --- a/docs/tableWithNaturalSort.md +++ b/docs/tableWithNaturalSort.md @@ -10,66 +10,59 @@ Fortunately `Table` makes it easy for you to implement this functionality within ```jsx export default class NaturalSortTable extends Component { - constructor (props, context) { - super(props, context) + constructor(props, context) { + super(props, context); this.state = { - list: props.list // Naturally sorted list - } + list: props.list, // Naturally sorted list + }; } - componentWillUpdate (nextProps, nextState) { - const { - sortBy: prevSortBy, - sortDirection: prevSortDirection - } = this.state + componentWillUpdate(nextProps, nextState) { + const {sortBy: prevSortBy, sortDirection: prevSortDirection} = this.state; if ( nextState.sortBy !== prevSortBy || nextState.sortDirection !== prevSortDirection ) { - const { sortBy, sortDirection } = nextState + const {sortBy, sortDirection} = nextState; - let { list } = this.props + let {list} = this.props; if (sortBy) { - list = list.sortBy(item => item[sortBy]) + list = list.sortBy(item => item[sortBy]); if (sortDirection === SortDirection.DESC) { - list = list.reverse() + list = list.reverse(); } } } } - render () { - const { list, sortBy, sortDirection } = this.state + render() { + const {list, sortBy, sortDirection} = this.state; return ( + sortDirection={sortDirection}> {/* s go here */}
- ) + ); } - _sort ({ sortBy, sortDirection }) { - const { - sortBy: prevSortBy, - sortDirection: prevSortDirection - } = this.state + _sort({sortBy, sortDirection}) { + const {sortBy: prevSortBy, sortDirection: prevSortDirection} = this.state; // If list was sorted DESC by this column. // Rather than switch to ASC, return to "natural" order. if (prevSortDirection === SortDirection.DESC) { - sortBy = null - sortDirection = null + sortBy = null; + sortDirection = null; } - this.setState({ sortBy, sortDirection }) + this.setState({sortBy, sortDirection}); } } ``` diff --git a/docs/upgrades/Version8.md b/docs/upgrades/Version8.md index 680b819e8..0dd16f1ce 100644 --- a/docs/upgrades/Version8.md +++ b/docs/upgrades/Version8.md @@ -29,32 +29,23 @@ Due to the complexity of this change there is no codemod. However you can use th ```jsx // Can be used for Grid, List, or Table -function createCellRenderer (cellRenderer) { - console.warn('cellRenderer udpate needed') +function createCellRenderer(cellRenderer) { + console.warn('cellRenderer udpate needed'); - return function cellRendererWrapper ({ key, style, ...rest }) { + return function cellRendererWrapper({key, style, ...rest}) { return ( -
+
{cellRenderer(rest)}
- ) - } + ); + }; } // Demonstrates example usage -function renderGrid (props) { - const { cellRenderer, ...rest } = props +function renderGrid(props) { + const {cellRenderer, ...rest} = props; - return ( - - ) + return ; } ``` @@ -63,11 +54,11 @@ function renderGrid (props) { Removing the DOM wrapper for cells (and rows) means that you can now fully control a cell's styles. However this means that you'll need to audit your code to ensure that you've migrated the following properties: -| Component | Properties to be removed | -|:---|:---| -| `Grid` | `cellClassName`, `cellStyle` | -| `VirtualScroll` | `rowClassName`, `rowStyle` | -| `FlexTable` | `rowWrapperClassName`, `rowWrapperStyle` | +| Component | Properties to be removed | +| :-------------- | :--------------------------------------- | +| `Grid` | `cellClassName`, `cellStyle` | +| `VirtualScroll` | `rowClassName`, `rowStyle` | +| `FlexTable` | `rowWrapperClassName`, `rowWrapperStyle` | Here is an example: @@ -118,7 +109,7 @@ function renderGrid (props) { Typically this step will not require any action. However if you have customized react-virtualized's global styles, you'll need to be update your overrides as follows: -1. Add the prefix: _ReactVirtualized___. +1. Add the prefix: \_ReactVirtualized\_\_\_. 2. Replace _FlexTable_ with _Table_ and _VirtualScroll_ with _List_. ```css diff --git a/docs/usingAutoSizer.md b/docs/usingAutoSizer.md index 0bed95b59..49013b01e 100644 --- a/docs/usingAutoSizer.md +++ b/docs/usingAutoSizer.md @@ -1,5 +1,4 @@ -Using AutoSizer ---------------- +## Using AutoSizer The `AutoSizer` component decorates a React element and automatically manages `width` and `height` properties so that decorated element fills the available space. This simplifies usage of components like `Grid`, `Table`, and `List` that require explicit dimensions. @@ -12,6 +11,7 @@ This component uses [`javascript-detect-element-resize`](https://github.com/sdec If the parent has style `position: static` (default value), it changes to `position: relative`. It also injects a sibling `div` for size measuring. #### Why is my `AutoSizer` setting a height of 0? + `AutoSizer` expands to _fill_ its parent but it will not _stretch_ the parent. This is done to prevent problems with flexbox layouts. If `AutoSizer` is reporting a height (or width) of 0- then it's likely that the parent element (or one of its parents) has a height of 0. @@ -19,21 +19,17 @@ One easy way to test this is to add a style property (eg `background-color: red; (eg You may need to add `height: 100%` or `flex: 1` to the parent.) #### Can I use AutoSizer to manage only width or height (not both)? + You can use `AutoSizer` to control only one dimension of its child component using the `disableHeight` or `disableWidth` attributes. For example, a fixed-height component that should grow to fill the available width can be created like so: ```jsx - {({ width }) => ( - - )} + {({width}) => } ``` #### Can I use AutoSizer within a flex container? + When using an `AutoSizer` as a direct child of a flex box it usually works out best to wrap it with a div, like so: ```jsx @@ -54,13 +50,14 @@ When using an `AutoSizer` as a direct child of a flex box it usually works out b ``` #### Can I use AutoSizer with other HOCs like InfiniteLoader? + `AutoSizer` can be used within other react-virtualized HOCs such as `InfiniteLoader` or `ScrollSync` like so: ```jsx - {({ onRowsRendered, registerChild }) => ( + {({onRowsRendered, registerChild}) => ( - {({ height, width }) => ( + {({height, width}) => ( ", "user": "bvaughn", - "version": "9.21.1", + "version": "9.22.6", "homepage": "https://github.com/bvaughn/react-virtualized", "main": "dist/commonjs/index.js", "module": "dist/es/index.js", @@ -11,15 +11,13 @@ "license": "MIT", "scripts": { "build:types": "flow-copy-source --ignore \"**/*.{jest,e2e,ssr,example}.js\" source/WindowScroller dist/es/WindowScroller && flow-copy-source --ignore \"**/*.{jest,e2e,ssr,example}.js\" source/AutoSizer dist/es/AutoSizer", - "build": "npm run build:commonjs && npm run build:css && npm run build:es && npm run build:demo && npm run build:umd", - "build:commonjs": "npm run clean:commonjs && cross-env NODE_ENV=commonjs babel source --out-dir dist/commonjs", + "build": "yarn run build:commonjs && yarn run build:css && yarn run build:es && yarn run build:demo && yarn run build:umd", + "build:commonjs": "yarn run clean:commonjs && cross-env NODE_ENV=commonjs babel source --out-dir dist/commonjs", "build:css": "postcss source/styles.css -o styles.css --use autoprefixer", - "build:demo": "npm run clean:demo && cross-env NODE_ENV=production webpack --config webpack.config.demo.js -p --bail", - "build:es": "npm run clean:es && npm run build:types && cross-env NODE_ENV=es babel source --out-dir dist/es", - "build:umd": "npm run clean:umd && cross-env NODE_ENV=rollup rollup -c", - "check-all": "yarn prettier && yarn lint && yarn flow", - "ci-check": "yarn prettier:diff && yarn lint && yarn flow", - "clean": "npm run clean:commonjs && npm run clean:demo && npm run clean:es && npm run clean:umd", + "build:demo": "yarn run clean:demo && cross-env NODE_ENV=production webpack --config webpack.config.demo.js -p --bail", + "build:es": "yarn run clean:es && yarn run build:types && cross-env NODE_ENV=es babel source --out-dir dist/es", + "build:umd": "yarn run clean:umd && cross-env NODE_ENV=rollup rollup -c", + "clean": "yarn run clean:commonjs && yarn run clean:demo && yarn run clean:es && yarn run clean:umd", "clean:commonjs": "rimraf dist/commonjs", "clean:demo": "rimraf build", "clean:es": "rimraf dist/es", @@ -27,29 +25,21 @@ "deploy": "gh-pages -d build", "lint": "eslint 'source/**/*.js'", "typecheck": "flow check", - "prebuild": "npm run typecheck && npm run lint", - "prettier": "prettier --write '{playground,source}/**/*.js'", - "prettier:diff": "prettier --list-different '{playground,source}/**/*.js'", - "postpublish": "npm run deploy", - "prepublish": "npm run build", + "prettier": "prettier --write '{playground,source,docs}/**/*.{js,md}'", + "prettier:diff": "prettier --list-different '{playground,source,docs}/**/*.{js,md}'", + "postpublish": "yarn run deploy", + "prepublishOnly": "yarn run build", "start": "cross-env NODE_ENV=development webpack-dev-server --hot --config webpack.config.dev.js", - "test": "npm run test:jest", + "test": "yarn run test:jest", "test:jest": "jest --no-watchman --runInBand", - "test:ci": "jest --no-watchman --maxWorkers 2 --coverage && codecov", - "watch": "watch 'clear && npm run test -s' source", - "watch:jest": "jest --no-watchman --watch", - "precommit": "lint-staged" + "test:coverage": "jest --no-watchman --maxWorkers 2 --coverage && codecov", + "watch": "watch 'clear && yarn run test -s' source", + "watch:jest": "jest --no-watchman --watch" }, - "lint-staged": { - "*.{js,md}": [ - "prettier --write", - "git add" - ] - }, - "babel": { - "presets": [ - "./.babelrc.js" - ] + "husky": { + "hooks": { + "pre-commit": "pretty-quick --staged" + } }, "files": [ "dist", @@ -79,105 +69,86 @@ "bugs": { "url": "https://github.com/bvaughn/react-virtualized/issues" }, - "jest": { - "globalSetup": "jest-environment-puppeteer/setup", - "globalTeardown": "jest-environment-puppeteer/teardown", - "setupFiles": [ - "./source/jest-setup.js" - ], - "roots": [ - "./source" - ], - "coverageReporters": [ - "lcov" - ], - "collectCoverageFrom": [ - "source/**/*.js", - "!source/vendor/**", - "!source/demo/**", - "!source/jest-*.js", - "!source/TestUtils.js", - "!**/*.example.js" - ], - "testRegex": ".(jest|e2e|ssr).js$", - "verbose": true - }, "devDependencies": { - "autoprefixer": "^7.2.3", - "babel-cli": "^6.26.0", - "babel-core": "^6.26.0", - "babel-eslint": "^8.1.2", - "babel-jest": "^22.0.4", - "babel-loader": "7.1.2", - "babel-plugin-external-helpers": "^6.22.0", - "babel-plugin-flow-react-proptypes": "^21.0.0", - "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", - "babel-plugin-transform-react-remove-prop-types": "^0.4.12", - "babel-plugin-transform-runtime": "^6.23.0", - "babel-polyfill": "^6.26.0", - "babel-preset-env": "^1.6.1", - "babel-preset-flow": "^6.23.0", - "babel-preset-react": "^6.24.1", - "babel-preset-stage-2": "^6.24.1", - "codecov": "^2.2.0", - "codemirror": "^5.18.0", - "cross-env": "^5.0.1", - "css-loader": "^0.28.7", - "eslint": "^4.14.0", - "eslint-config-fbjs": "^2.0.1", - "eslint-config-prettier": "^2.9.0", + "@babel/cli": "^7.7.0", + "@babel/core": "^7.7.2", + "@babel/plugin-external-helpers": "^7.2.0", + "@babel/plugin-proposal-class-properties": "^7.7.0", + "@babel/plugin-transform-flow-comments": "^7.12.13", + "@babel/plugin-transform-modules-commonjs": "^7.7.0", + "@babel/plugin-transform-runtime": "^7.6.2", + "@babel/polyfill": "^7.7.0", + "@babel/preset-env": "^7.7.1", + "@babel/preset-flow": "^7.0.0", + "@babel/preset-react": "^7.7.0", + "@babel/preset-stage-2": "^7.0.0", + "autoprefixer": "^9.7.1", + "babel-eslint": "^10.0.3", + "babel-jest": "^24.9.0", + "babel-loader": "8.0.6", + "babel-plugin-flow-react-proptypes": "^26.0.0", + "babel-plugin-transform-react-remove-prop-types": "^0.4.24", + "codecov": "^3.6.1", + "codemirror": "^5.49.2", + "cross-env": "^6.0.3", + "css-loader": "^3.2.0", + "eslint": "^6.6.0", + "eslint-config-fbjs": "^3.1.1", + "eslint-config-prettier": "^6.5.0", "eslint-config-react": "^1.1.7", - "eslint-plugin-babel": "^4.1.2", - "eslint-plugin-flowtype": "^2.40.1", - "eslint-plugin-jsx-a11y": "^6.0.3", - "eslint-plugin-prettier": "^2.4.0", - "eslint-plugin-react": "^7.5.1", - "eslint-plugin-relay": "^0.0.20", + "eslint-plugin-babel": "^5.3.0", + "eslint-plugin-flowtype": "^4.3.0", + "eslint-plugin-jsx-a11y": "^6.2.3", + "eslint-plugin-prettier": "^3.1.1", + "eslint-plugin-react": "^7.16.0", + "eslint-plugin-relay": "^1.3.12", "extract-text-webpack-plugin": "^3.0.2", - "file-loader": "^1.1.6", - "flow-bin": "^0.63.1", - "flow-copy-source": "^1.2.1", - "gh-pages": "^1.0.0", - "html-webpack-plugin": "^2.30.1", - "husky": "^0.14.3", - "immutable": "^3.7.5", - "jest": "^22.0.4", - "jest-environment-puppeteer": "^1.1.1", - "lint-staged": "^7.0.4", - "postcss": "^6.0.14", - "postcss-cli": "^4.1.1", - "postcss-loader": "^2.0.9", - "prettier": "^1.9.2", - "puppeteer": "^1.1.1", - "react": "^16.2.0", + "file-loader": "^4.2.0", + "flow-bin": "^0.111.3", + "flow-copy-source": "^2.0.8", + "gh-pages": "^2.1.1", + "html-webpack-plugin": "^3.2.0", + "husky": "^3.0.9", + "immutable": "^4.0.0-rc.12", + "jest": "^24.9.0", + "jest-environment-puppeteer": "^4.3.0", + "lint-staged": "^9.4.2", + "postcss": "^7.0.21", + "postcss-cli": "^6.1.3", + "postcss-loader": "^3.0.0", + "prettier": "1.19.1", + "pretty-quick": "^2.0.1", + "puppeteer": "^2.0.0", + "react": "^17.0.1", "react-codemirror": "^1.0.0", - "react-dom": "^16.2.0", - "react-router": "^4.1.1", - "react-router-dom": "^4.1.1", - "react-test-renderer": "^16.2.0", - "rimraf": "^2.4.3", - "rollup": "^0.57.1", - "rollup-plugin-babel": "^3.0.3", - "rollup-plugin-commonjs": "^9.1.0", - "rollup-plugin-node-resolve": "^3.3.0", - "rollup-plugin-replace": "^2.0.0", - "rollup-plugin-uglify": "^3.0.0", - "style-loader": "^0.19.1", + "react-dom": "^17.0.1", + "react-router": "^5.2.0", + "react-router-dom": "^5.2.0", + "react-test-renderer": "^17.0.1", + "rimraf": "^6.0.1", + "rollup": "^1.26.5", + "rollup-plugin-babel": "^4.3.3", + "rollup-plugin-commonjs": "^10.1.0", + "rollup-plugin-node-resolve": "^5.2.0", + "rollup-plugin-replace": "^2.2.0", + "rollup-plugin-uglify": "^6.0.3", + "style-loader": "^1.0.0", "watch": "^1.0.2", - "webpack": "^3.10.0", - "webpack-dev-server": "^2.9.7" + "webpack": "^4.41.2", + "webpack-cli": "^3.3.10", + "webpack-dev-server": "^3.9.0" }, "dependencies": { - "babel-runtime": "^6.26.0", - "clsx": "^1.0.1", - "dom-helpers": "^2.4.0 || ^3.0.0", - "loose-envify": "^1.3.0", - "prop-types": "^15.6.0", + "@babel/runtime": "^7.7.2", + "clsx": "^1.0.4", + "dom-helpers": "^5.1.3", + "loose-envify": "^1.4.0", + "prop-types": "^15.7.2", "react-lifecycles-compat": "^3.0.4" }, "peerDependencies": { - "react": "^15.3.0 || ^16.0.0-alpha", - "react-dom": "^15.3.0 || ^16.0.0-alpha" + "react": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "browserify": { "transform": [ diff --git a/rollup.config.js b/rollup.config.js index c322f43e6..e3e73016b 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -2,7 +2,7 @@ import nodeResolve from 'rollup-plugin-node-resolve'; import commonjs from 'rollup-plugin-commonjs'; import babel from 'rollup-plugin-babel'; import replace from 'rollup-plugin-replace'; -import uglify from 'rollup-plugin-uglify'; +import {uglify} from 'rollup-plugin-uglify'; export default { input: './source/index.js', diff --git a/source/ArrowKeyStepper/ArrowKeyStepper.example.js b/source/ArrowKeyStepper/ArrowKeyStepper.example.js index 5f4de2fab..cfc9fbd22 100644 --- a/source/ArrowKeyStepper/ArrowKeyStepper.example.js +++ b/source/ArrowKeyStepper/ArrowKeyStepper.example.js @@ -59,7 +59,7 @@ export default class ArrowKeyStepperExample extends React.PureComponent< mode: