From 460a4c4c0649df813c4608fcdfa4584c6bb02e25 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Wed, 5 Jun 2019 16:54:18 -0400 Subject: [PATCH 01/32] fix(accordion): prop for heading level --- .../src/components/Accordion/Accordion.js | 4 ++ .../components/Accordion/AccordionToggle.js | 50 +++++++++++++------ 2 files changed, 38 insertions(+), 16 deletions(-) diff --git a/packages/patternfly-4/react-core/src/components/Accordion/Accordion.js b/packages/patternfly-4/react-core/src/components/Accordion/Accordion.js index 33ee5d98711..6c8e01841a8 100644 --- a/packages/patternfly-4/react-core/src/components/Accordion/Accordion.js +++ b/packages/patternfly-4/react-core/src/components/Accordion/Accordion.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/patternfly/components/Accordion/accordion.css'; +import { HeadingLevelTypes } from './AccordionToggle'; const Accordion = ({ children, className, 'aria-label': ariaLabel, ...props }) => (
@@ -14,6 +15,8 @@ Accordion.propTypes = { children: PropTypes.node, /** Additional classes added to the Accordion */ className: PropTypes.string, + /** Allows user to specify heading level */ + headingLevel: PropTypes.oneOf(Object.values(HeadingLevelTypes)), /** Adds accessible text to the Accordion */ 'aria-label': PropTypes.string, /** Additional props are spread to the container
*/ @@ -23,6 +26,7 @@ Accordion.propTypes = { Accordion.defaultProps = { children: null, className: '', + headingLevel: '', 'aria-label': '' }; diff --git a/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.js b/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.js index 98cc8241886..2d986c258b8 100644 --- a/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.js +++ b/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.js @@ -3,23 +3,38 @@ import PropTypes from 'prop-types'; import { css } from '@patternfly/react-styles'; import { AngleRightIcon } from '@patternfly/react-icons'; import styles from '@patternfly/patternfly/components/Accordion/accordion.css'; +import { Accordion } from '../Accordion'; +import { ApplicationLauncherPosition } from '../ApplicationLauncher/applicationLauncherConstants'; -const AccordionToggle = ({ className, id, isExpanded, children, ...props }) => ( -
-

- -

-
-); +export const HeadingLevelTypes = { + h1: 'h1', + h2: 'h2', + h3: 'h3', + h4: 'h4', + h5: 'h5', + h6: 'h6' +}; + +const AccordionToggle = ({ className, headingLevel, id, isExpanded, children, ...props }) => { + const HeadingLevel = HeadingLevelTypes[headingLevel]; + + return ( +
+ + + +
+ ); +}; AccordionToggle.propTypes = { /** Content rendered inside the Accordion toggle */ @@ -30,6 +45,8 @@ AccordionToggle.propTypes = { isExpanded: PropTypes.bool, /** Identify the Accordion toggle number */ id: PropTypes.string.isRequired, + /** Allows user to specify heading level */ + headingLevel: PropTypes.oneOf(Object.values(HeadingLevelTypes)), /** Additional props are spread to the container
*/ '': PropTypes.any // eslint-disable-line react/require-default-props }; @@ -37,6 +54,7 @@ AccordionToggle.propTypes = { AccordionToggle.defaultProps = { className: '', children: null, + headingLevel: 'h1', isExpanded: false }; From fc3da9a2b1d3bdaabfd1bfb704a087c7aa82c9f5 Mon Sep 17 00:00:00 2001 From: zallen <47335686+redallen@users.noreply.github.com> Date: Thu, 6 Jun 2019 09:58:43 -0400 Subject: [PATCH 02/32] fix stale config (#2123) --- .github/stale.yml | 41 ++--------------------------------------- 1 file changed, 2 insertions(+), 39 deletions(-) diff --git a/.github/stale.yml b/.github/stale.yml index 3e722a14319..bd4cbae38d1 100644 --- a/.github/stale.yml +++ b/.github/stale.yml @@ -1,55 +1,18 @@ # Configuration for probot-stale - https://github.com/probot/stale - # Number of days of inactivity before an Issue or Pull Request becomes stale -daysUntilStale: 90 +daysUntilStale: 60 # Number of days of inactivity before an Issue or Pull Request with the stale label is closed. # Set to false to disable. If disabled, issues still need to be closed manually, but will remain marked as stale. daysUntilClose: 7 -# Issues or Pull Requests with these labels will never be considered stale. Set to `[]` to disable -exemptLabels: - - pinned - - security - - "[Status] Maybe Later" - -# Set to true to ignore issues in a project (defaults to false) -exemptProjects: false - -# Set to true to ignore issues in a milestone (defaults to false) -exemptMilestones: false - # Label to use when marking as stale staleLabel: wontfix # Comment to post when marking as stale. Set to `false` to disable markComment: > This issue has been automatically marked as stale because it has not had - recent activity. It will be closed if no further activity occurs. Thank you - for your contributions. - -# Comment to post when removing the stale label. -# unmarkComment: > -# Your comment here. - -# Comment to post when closing a stale Issue or Pull Request. -# closeComment: > -# Your comment here. + recent activity. It will be closed if no further activity occurs. # Limit the number of actions per hour, from 1-30. Default is 30 limitPerRun: 30 - -# Limit to only `issues` or `pulls` -only: pulls - -# Optionally, specify configuration settings that are specific to just 'issues' or 'pulls': -# pulls: -# daysUntilStale: 30 -# markComment: > -# This pull request has been automatically marked as stale because it has not had -# recent activity. It will be closed if no further activity occurs. Thank you -# for your contributions. - -# issues: -# exemptLabels: -# - confirmed \ No newline at end of file From 012a762b512c3a376c0a0d6012d13b9ae06a60b6 Mon Sep 17 00:00:00 2001 From: Dana Gutride Date: Thu, 6 Jun 2019 15:42:17 -0400 Subject: [PATCH 03/32] chore(bot): update stale bot configuration and package sideeffects (#2177) --- .github/stale.yml | 8 +++++++- packages/patternfly-4/react-core/package.json | 3 ++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/.github/stale.yml b/.github/stale.yml index bd4cbae38d1..1f7f5a80ed6 100644 --- a/.github/stale.yml +++ b/.github/stale.yml @@ -4,7 +4,13 @@ daysUntilStale: 60 # Number of days of inactivity before an Issue or Pull Request with the stale label is closed. # Set to false to disable. If disabled, issues still need to be closed manually, but will remain marked as stale. -daysUntilClose: 7 +daysUntilClose: 14 + +# Issues with these labels will never be considered stale +exemptLabels: + - pinned + - security + - accessibility # Label to use when marking as stale staleLabel: wontfix diff --git a/packages/patternfly-4/react-core/package.json b/packages/patternfly-4/react-core/package.json index 4eb2373ffde..43d21aeca25 100644 --- a/packages/patternfly-4/react-core/package.json +++ b/packages/patternfly-4/react-core/package.json @@ -7,7 +7,8 @@ "types": "dist/js/index.d.ts", "patternfly:src": "src/", "sideEffects": [ - "*.css" + "*.css", + "*.scss" ], "publishConfig": { "access": "public", From df6afc132fad2e6797eeb537acc153be84abfb1e Mon Sep 17 00:00:00 2001 From: patternfly-build Date: Thu, 6 Jun 2019 19:58:29 +0000 Subject: [PATCH 04/32] chore(release): releasing packages [ci skip] - @patternfly/react-core@3.36.1 - @patternfly/react-docs@4.6.5 - @patternfly/react-inline-edit-extension@2.7.1 - demo-app-ts@1.18.1 - @patternfly/react-table@2.10.1 --- packages/patternfly-4/react-core/CHANGELOG.md | 8 ++++++++ packages/patternfly-4/react-core/package.json | 2 +- packages/patternfly-4/react-docs/CHANGELOG.md | 8 ++++++++ packages/patternfly-4/react-docs/package.json | 4 ++-- .../patternfly-4/react-inline-edit-extension/CHANGELOG.md | 8 ++++++++ .../patternfly-4/react-inline-edit-extension/package.json | 6 +++--- .../react-integration/demo-app-ts/CHANGELOG.md | 8 ++++++++ .../react-integration/demo-app-ts/package.json | 4 ++-- packages/patternfly-4/react-table/CHANGELOG.md | 8 ++++++++ packages/patternfly-4/react-table/package.json | 4 ++-- 10 files changed, 50 insertions(+), 10 deletions(-) diff --git a/packages/patternfly-4/react-core/CHANGELOG.md b/packages/patternfly-4/react-core/CHANGELOG.md index 099c8896239..749541a8888 100644 --- a/packages/patternfly-4/react-core/CHANGELOG.md +++ b/packages/patternfly-4/react-core/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [3.36.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.36.0...@patternfly/react-core@3.36.1) (2019-06-06) + +**Note:** Version bump only for package @patternfly/react-core + + + + + # [3.36.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.35.0...@patternfly/react-core@3.36.0) (2019-06-05) diff --git a/packages/patternfly-4/react-core/package.json b/packages/patternfly-4/react-core/package.json index 43d21aeca25..a0d062f6649 100644 --- a/packages/patternfly-4/react-core/package.json +++ b/packages/patternfly-4/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-core", - "version": "3.36.0", + "version": "3.36.1", "description": "This library provides a set of common React components for use with the PatternFly reference implementation.", "main": "dist/js/index.js", "module": "dist/esm/index.js", diff --git a/packages/patternfly-4/react-docs/CHANGELOG.md b/packages/patternfly-4/react-docs/CHANGELOG.md index dc426bd7cfe..c3743c38623 100644 --- a/packages/patternfly-4/react-docs/CHANGELOG.md +++ b/packages/patternfly-4/react-docs/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [4.6.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.6.4...@patternfly/react-docs@4.6.5) (2019-06-06) + +**Note:** Version bump only for package @patternfly/react-docs + + + + + ## [4.6.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.6.3...@patternfly/react-docs@4.6.4) (2019-06-05) **Note:** Version bump only for package @patternfly/react-docs diff --git a/packages/patternfly-4/react-docs/package.json b/packages/patternfly-4/react-docs/package.json index 513227422b6..c4de0798f82 100644 --- a/packages/patternfly-4/react-docs/package.json +++ b/packages/patternfly-4/react-docs/package.json @@ -1,7 +1,7 @@ { "name": "@patternfly/react-docs", "description": "PatternFly React Docs", - "version": "4.6.4", + "version": "4.6.5", "author": "Red Hat", "license": "MIT", "private": true, @@ -17,7 +17,7 @@ "@mdx-js/mdx": "1.0.2", "@mdx-js/react": "1.0.2", "@patternfly/patternfly": "2.8.2", - "@patternfly/react-core": "^3.36.0", + "@patternfly/react-core": "^3.36.1", "@patternfly/react-icons": "^3.9.3", "gatsby": "2.3.14", "gatsby-mdx": "0.6.3", diff --git a/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md b/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md index 38ae38721c3..3361d4fe556 100644 --- a/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md +++ b/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.7.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.7.0...@patternfly/react-inline-edit-extension@2.7.1) (2019-06-06) + +**Note:** Version bump only for package @patternfly/react-inline-edit-extension + + + + + # [2.7.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.6.0...@patternfly/react-inline-edit-extension@2.7.0) (2019-06-05) diff --git a/packages/patternfly-4/react-inline-edit-extension/package.json b/packages/patternfly-4/react-inline-edit-extension/package.json index 2bbd0ea51bb..898127a04b5 100644 --- a/packages/patternfly-4/react-inline-edit-extension/package.json +++ b/packages/patternfly-4/react-inline-edit-extension/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-inline-edit-extension", - "version": "2.7.0", + "version": "2.7.1", "description": "This library provides inline editing support for PatternFly 4 React table", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -28,10 +28,10 @@ "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/", "dependencies": { "@patternfly/patternfly": "2.8.2", - "@patternfly/react-core": "^3.36.0", + "@patternfly/react-core": "^3.36.1", "@patternfly/react-icons": "^3.9.3", "@patternfly/react-styles": "^3.3.0", - "@patternfly/react-table": "^2.10.0", + "@patternfly/react-table": "^2.10.1", "classnames": "^2.2.5", "exenv": "^1.2.2", "reactabular-table": "^8.14.0" diff --git a/packages/patternfly-4/react-integration/demo-app-ts/CHANGELOG.md b/packages/patternfly-4/react-integration/demo-app-ts/CHANGELOG.md index db5fc7ba0e7..9405343ef9b 100644 --- a/packages/patternfly-4/react-integration/demo-app-ts/CHANGELOG.md +++ b/packages/patternfly-4/react-integration/demo-app-ts/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.18.1](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.18.0...demo-app-ts@1.18.1) (2019-06-06) + +**Note:** Version bump only for package demo-app-ts + + + + + # [1.18.0](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.17.0...demo-app-ts@1.18.0) (2019-06-05) diff --git a/packages/patternfly-4/react-integration/demo-app-ts/package.json b/packages/patternfly-4/react-integration/demo-app-ts/package.json index 5f457831064..d4893c6f75d 100644 --- a/packages/patternfly-4/react-integration/demo-app-ts/package.json +++ b/packages/patternfly-4/react-integration/demo-app-ts/package.json @@ -1,13 +1,13 @@ { "name": "demo-app-ts", "private": true, - "version": "1.18.0", + "version": "1.18.1", "scripts": { "build:demo-app": "react-scripts build", "start:demo-app": "react-scripts start" }, "dependencies": { - "@patternfly/react-core": "^3.36.0", + "@patternfly/react-core": "^3.36.1", "react": "^16.8.4", "react-dom": "^16.8.4", "react-router": "^4.3.1", diff --git a/packages/patternfly-4/react-table/CHANGELOG.md b/packages/patternfly-4/react-table/CHANGELOG.md index 3a5e60ad3a1..758970787a3 100644 --- a/packages/patternfly-4/react-table/CHANGELOG.md +++ b/packages/patternfly-4/react-table/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.10.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.10.0...@patternfly/react-table@2.10.1) (2019-06-06) + +**Note:** Version bump only for package @patternfly/react-table + + + + + # [2.10.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.9.4...@patternfly/react-table@2.10.0) (2019-06-05) diff --git a/packages/patternfly-4/react-table/package.json b/packages/patternfly-4/react-table/package.json index 3e35ccff605..850d462b336 100644 --- a/packages/patternfly-4/react-table/package.json +++ b/packages/patternfly-4/react-table/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-table", - "version": "2.10.0", + "version": "2.10.1", "description": "This library provides a set of React table components for use with the PatternFly 4", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -28,7 +28,7 @@ "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/react-table#readme", "dependencies": { "@patternfly/patternfly": "2.8.2", - "@patternfly/react-core": "^3.36.0", + "@patternfly/react-core": "^3.36.1", "@patternfly/react-icons": "^3.9.3", "@patternfly/react-styles": "^3.3.0", "exenv": "^1.2.2", From 84122a18ae339c43298f5cadced0ee261b85f931 Mon Sep 17 00:00:00 2001 From: Patrick Riley Date: Fri, 7 Jun 2019 09:11:23 -0400 Subject: [PATCH 05/32] React-Virtualized PF4 tables (#2011) * feat(virtualized): add virtualized table extensions * fix eslint * snaps * clean a little * fix window scroller scrollbar --- jest.config.js | 55 +- .../patternfly-4/react-docs/gatsby-node.js | 1 + .../patternfly-4/react-table/package.json | 7 +- .../react-table/src/components/Table/Body.js | 16 +- .../src/components/Table/BodyWrapper.js | 26 +- .../src/components/Table/Header.js | 2 +- .../react-table/src/components/Table/Table.js | 17 +- .../Table/__snapshots__/Table.test.js.snap | 170 ++ .../src/components/Table/base/body-row.js | 79 + .../src/components/Table/base/body.js | 67 + .../Table/base/columns-are-equal.js | 19 + .../Table/base/evaluate-formatters.js | 18 + .../Table/base/evaluate-transforms.js | 24 + .../src/components/Table/base/header-row.js | 45 + .../src/components/Table/base/header.js | 38 + .../src/components/Table/base/index.js | 9 + .../src/components/Table/base/merge-props.js | 36 + .../src/components/Table/base/provider.js | 56 + .../components/Table/base/resolve-row-key.js | 27 + .../src/components/Table/base/types.js | 107 ++ .../react-table/src/components/Table/index.js | 1 + .../react-virtualized-extension/.babelrc | 6 + .../react-virtualized-extension/.npmignore | 1 + .../react-virtualized-extension/README.md | 5 + .../build/copyStyles.js | 42 + .../react-virtualized-extension/package.json | 65 + .../scripts/copyTS.js | 15 + .../Virtualized/VirtualGrid.example.css | 326 ++++ .../src/components/Virtualized/VirtualGrid.js | 1473 +++++++++++++++++ .../Virtualized/VirtualTableBody.js | 288 ++++ .../src/components/Virtualized/Virtualized.md | 590 +++++++ .../Virtualized/WindowScroller.example.css | 7 + .../components/Virtualized/WindowScroller.md | 182 ++ .../accessibilityOverscanIndicesGetter.js | 38 + .../Virtualized/defaultCellRangeRenderer.js | 156 ++ .../defaultOverscanIndicesGetter.js | 33 + .../src/components/Virtualized/index.js | 3 + .../src/components/Virtualized/types.js | 111 ++ .../utils/CellSizeAndPositionManager.js | 256 +++ .../ScalingCellSizeAndPositionManager.js | 191 +++ .../Virtualized/utils/animationFrame.js | 41 + ...izeAndPositionDataAndUpdateScrollOffset.js | 61 + .../utils/createCallbackMemoizer.js | 30 + .../Virtualized/utils/maxElementSize.js | 17 + .../utils/requestAnimationTimeout.js | 39 + .../utils/updateScrollIndexHelper.js | 92 + .../src/components/index.js | 1 + .../react-virtualized-extension/src/index.js | 1 + yarn.lock | 4 +- 49 files changed, 4839 insertions(+), 55 deletions(-) create mode 100644 packages/patternfly-4/react-table/src/components/Table/base/body-row.js create mode 100644 packages/patternfly-4/react-table/src/components/Table/base/body.js create mode 100644 packages/patternfly-4/react-table/src/components/Table/base/columns-are-equal.js create mode 100644 packages/patternfly-4/react-table/src/components/Table/base/evaluate-formatters.js create mode 100644 packages/patternfly-4/react-table/src/components/Table/base/evaluate-transforms.js create mode 100644 packages/patternfly-4/react-table/src/components/Table/base/header-row.js create mode 100644 packages/patternfly-4/react-table/src/components/Table/base/header.js create mode 100644 packages/patternfly-4/react-table/src/components/Table/base/index.js create mode 100644 packages/patternfly-4/react-table/src/components/Table/base/merge-props.js create mode 100644 packages/patternfly-4/react-table/src/components/Table/base/provider.js create mode 100644 packages/patternfly-4/react-table/src/components/Table/base/resolve-row-key.js create mode 100644 packages/patternfly-4/react-table/src/components/Table/base/types.js create mode 100644 packages/patternfly-4/react-virtualized-extension/.babelrc create mode 100644 packages/patternfly-4/react-virtualized-extension/.npmignore create mode 100644 packages/patternfly-4/react-virtualized-extension/README.md create mode 100644 packages/patternfly-4/react-virtualized-extension/build/copyStyles.js create mode 100644 packages/patternfly-4/react-virtualized-extension/package.json create mode 100644 packages/patternfly-4/react-virtualized-extension/scripts/copyTS.js create mode 100644 packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualGrid.example.css create mode 100644 packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualGrid.js create mode 100644 packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualTableBody.js create mode 100644 packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/Virtualized.md create mode 100644 packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/WindowScroller.example.css create mode 100644 packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/WindowScroller.md create mode 100644 packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/accessibilityOverscanIndicesGetter.js create mode 100644 packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultCellRangeRenderer.js create mode 100644 packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultOverscanIndicesGetter.js create mode 100644 packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/index.js create mode 100644 packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/types.js create mode 100644 packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/CellSizeAndPositionManager.js create mode 100644 packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/ScalingCellSizeAndPositionManager.js create mode 100644 packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/animationFrame.js create mode 100644 packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/calculateSizeAndPositionDataAndUpdateScrollOffset.js create mode 100644 packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/createCallbackMemoizer.js create mode 100644 packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/maxElementSize.js create mode 100644 packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/requestAnimationTimeout.js create mode 100644 packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/updateScrollIndexHelper.js create mode 100644 packages/patternfly-4/react-virtualized-extension/src/components/index.js create mode 100644 packages/patternfly-4/react-virtualized-extension/src/index.js diff --git a/jest.config.js b/jest.config.js index cd352076dda..a5d66cd9119 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,53 +1,46 @@ module.exports = { collectCoverage: true, clearMocks: true, - coverageReporters: [ - "lcov" - ], + coverageReporters: ['lcov'], modulePathIgnorePatterns: [ - "/packages/*.*/dist/*.*", - "/packages/*.*/public/*.*", - "/packages/*.*/.cache/*.*" + '/packages/*.*/dist/*.*', + '/packages/*.*/public/*.*', + '/packages/*.*/.cache/*.*' ], coveragePathIgnorePatterns: [ - "/packages/*.*/dist/*.*", - "/packages/*.*/examples/*.*", - "/packages/*.docs.*", - "/packages/react-docs/*.*" + '/packages/*.*/dist/*.*', + '/packages/*.*/examples/*.*', + '/packages/*.docs.*', + '/packages/react-docs/*.*' ], modulePaths: [ - "/**/node_modules/", - "/packages/", - "/packages/patternfly-3/", - "/packages/patternfly-4/" - ], - roots: [ - "/packages" - ], - setupFiles: [ - "./test.env.js" + '/**/node_modules/', + '/packages/', + '/packages/patternfly-3/', + '/packages/patternfly-4/' ], + roots: ['/packages'], + setupFiles: ['./test.env.js'], snapshotSerializers: [ "enzyme-to-json/serializer", "/packages/patternfly-4/react-core/scripts/snapshot-serializer" ], transform: { - "^.+\\.(ts|tsx)?$": "ts-jest", - "^.+\\.jsx?$": "babel-jest", - "\\.(css)$": "/packages/patternfly-4/react-styles/jest-transform.js" + '^.+\\.(ts|tsx)?$': 'ts-jest', + '^.+\\.jsx?$': 'babel-jest', + '\\.(css)$': '/packages/patternfly-4/react-styles/jest-transform.js' }, testPathIgnorePatterns: [ - "/scripts/generators/", - "/packages/patternfly-4/react-integration/" - ], - transformIgnorePatterns: [ - "node_modules/(?!@patternfly|@novnc|tippy.js)" + '/scripts/generators/', + '/packages/patternfly-4/react-integration/', + '/node_modules/(?!lodash-es/.*)' ], + transformIgnorePatterns: ['node_modules/(?!@patternfly|@novnc|tippy.js|lodash-es)'], // https://github.com/kulshekhar/ts-jest/blob/master/docs/user/config/index.md - preset: "ts-jest/presets/js-with-babel", + preset: 'ts-jest/presets/js-with-babel', globals: { - "ts-jest": { - tsConfig: "packages/patternfly-4/react-core/tsconfig.jest.json" + 'ts-jest': { + tsConfig: 'packages/patternfly-4/react-core/tsconfig.jest.json' } } }; diff --git a/packages/patternfly-4/react-docs/gatsby-node.js b/packages/patternfly-4/react-docs/gatsby-node.js index 047a7043085..68c746a33d7 100644 --- a/packages/patternfly-4/react-docs/gatsby-node.js +++ b/packages/patternfly-4/react-docs/gatsby-node.js @@ -91,6 +91,7 @@ exports.onCreateWebpackConfig = ({ actions }) => { '@patternfly/react-core': path.resolve(__dirname, '../react-core'), '@patternfly/react-icons': path.resolve(__dirname, '../../react-icons'), '@patternfly/react-inline-edit-extension': path.resolve(__dirname, '../react-inline-edit-extension'), + '@patternfly/react-virtualized-extension': path.resolve(__dirname, '../react-virtualized-extension'), '@patternfly/react-styled-system': path.resolve(__dirname, '../react-styled-system'), '@patternfly/react-styles': path.resolve(__dirname, '../react-styles'), '@patternfly/react-table': path.resolve(__dirname, '../react-table'), diff --git a/packages/patternfly-4/react-table/package.json b/packages/patternfly-4/react-table/package.json index 850d462b336..e85e091ab33 100644 --- a/packages/patternfly-4/react-table/package.json +++ b/packages/patternfly-4/react-table/package.json @@ -31,13 +31,14 @@ "@patternfly/react-core": "^3.36.1", "@patternfly/react-icons": "^3.9.3", "@patternfly/react-styles": "^3.3.0", - "exenv": "^1.2.2", - "reactabular-table": "^8.14.0" + "classnames": "^2.2.5", + "exenv": "^1.2.2" }, "peerDependencies": { "prop-types": "^15.6.1", "react": "^16.4.0", - "react-dom": "^15.6.2 || ^16.4.0" + "react-dom": "^15.6.2 || ^16.4.0", + "lodash-es": "4.x" }, "scripts": { "build": "yarn build:babel && node ./scripts/copyTS.js && node ./build/copyStyles.js", diff --git a/packages/patternfly-4/react-table/src/components/Table/Body.js b/packages/patternfly-4/react-table/src/components/Table/Body.js index 0d80e7d1725..d8dc2d3af49 100644 --- a/packages/patternfly-4/react-table/src/components/Table/Body.js +++ b/packages/patternfly-4/react-table/src/components/Table/Body.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Body } from 'reactabular-table'; +import { Body } from './base'; import PropTypes from 'prop-types'; import { TableContext } from './Table'; import { isRowExpanded } from './utils'; @@ -29,10 +29,14 @@ const flagVisibility = rows => { class ContextBody extends React.Component { onRow = (row, rowProps) => { - const { onRowClick } = this.props; + const { onRowClick, onRow } = this.props; + const extendedRowProps = { + ...rowProps, + ...(onRow ? onRow(row, rowProps) : {}) + }; return { row, - rowProps, + rowProps: extendedRowProps, onMouseDown: event => { const computedData = { isInput: event.target.tagName !== 'INPUT', @@ -117,7 +121,8 @@ ContextBody.propTypes = { headerData: PropTypes.array, rows: PropTypes.array, rowKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, - onRowClick: PropTypes.func + onRowClick: PropTypes.func, + onRow: PropTypes.func }; ContextBody.defaultProps = { @@ -125,7 +130,8 @@ ContextBody.defaultProps = { children: null, headerData: [], rows: [], - onRowClick: () => undefined + onRowClick: () => undefined, + onRow: () => undefined }; const TableBody = props => ( diff --git a/packages/patternfly-4/react-table/src/components/Table/BodyWrapper.js b/packages/patternfly-4/react-table/src/components/Table/BodyWrapper.js index 4cff7139326..9b3c17cc0db 100644 --- a/packages/patternfly-4/react-table/src/components/Table/BodyWrapper.js +++ b/packages/patternfly-4/react-table/src/components/Table/BodyWrapper.js @@ -7,30 +7,42 @@ import { mapOpenedRows } from './utils/headerUtils'; // eslint-disable-next-line react/prefer-stateless-function class BodyWrapper extends React.Component { render() { - const { children, mappedRows, ...props } = this.props; - if (mappedRows.some(row => row.hasOwnProperty('parent'))) { + const { mappedRows, tbodyRef, ...props } = this.props; + if (mappedRows && mappedRows.some(row => row.hasOwnProperty('parent'))) { return ( - {mapOpenedRows(mappedRows, children).map((oneRow, key) => ( - + {mapOpenedRows(mappedRows, this.props.children).map((oneRow, key) => ( + {oneRow.rows} ))} ); } - return {children}; + + return ; } } BodyWrapper.propTypes = { children: PropTypes.node, - mappedRows: PropTypes.array + mappedRows: PropTypes.array, + rows: PropTypes.array, + onCollapse: PropTypes.func, + tbodyRef: PropTypes.func }; BodyWrapper.defaultProps = { children: null, - mappedRows: undefined + mappedRows: undefined, + rows: [], + onCollapse: null, + tbodyRef: null }; export default BodyWrapper; diff --git a/packages/patternfly-4/react-table/src/components/Table/Header.js b/packages/patternfly-4/react-table/src/components/Table/Header.js index d12c831f646..5da0f03b89f 100644 --- a/packages/patternfly-4/react-table/src/components/Table/Header.js +++ b/packages/patternfly-4/react-table/src/components/Table/Header.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Header } from 'reactabular-table'; +import { Header } from './base'; import PropTypes from 'prop-types'; import { TableContext } from './Table'; diff --git a/packages/patternfly-4/react-table/src/components/Table/Table.js b/packages/patternfly-4/react-table/src/components/Table/Table.js index b6e98285180..302bd677e9f 100644 --- a/packages/patternfly-4/react-table/src/components/Table/Table.js +++ b/packages/patternfly-4/react-table/src/components/Table/Table.js @@ -1,7 +1,7 @@ import React from 'react'; import styles from '@patternfly/react-styles/css/components/Table/table'; import stylesGrid from '@patternfly/react-styles/css/components/Table/table-grid'; -import { Provider } from 'reactabular-table'; +import { Provider } from './base'; import { DropdownPosition, DropdownDirection } from '@patternfly/react-core'; import { css, getModifier } from '@patternfly/react-styles'; import PropTypes from 'prop-types'; @@ -125,25 +125,26 @@ const propTypes = { dropdownDirection: PropTypes.oneOf(Object.values(DropdownDirection)), /** Header to display above table for accessibility reasons. */ header: props => { - if (!props['aria-label'] && !props.caption && !props.header) { + if (!props['aria-label'] && !props.caption && !props.header && !props.role === 'presentation') { throw new Error('Specify at least one of: header, caption, aria-label'); } return null; }, /** Caption to display in table for accessibility reasons. */ caption: props => { - if (!props['aria-label'] && !props.caption && !props.header) { + if (!props['aria-label'] && !props.caption && !props.header && !props.role === 'presentation') { throw new Error('Specify at least one of: header, caption, aria-label'); } return null; }, /** aria-label in table for accessibility reasons. */ 'aria-label': props => { - if (!props['aria-label'] && !props.caption && !props.header) { + if (!props['aria-label'] && !props.caption && !props.header && !props.role === 'presentation') { throw new Error('Specify at least one of: header, caption, aria-label'); } return null; - } + }, + role: PropTypes.string }; const defaultProps = { @@ -169,7 +170,8 @@ const defaultProps = { header: undefined, caption: undefined, 'aria-label': undefined, - gridBreakPoint: TableGridBreakpoint.gridMd + gridBreakPoint: TableGridBreakpoint.gridMd, + role: 'grid' }; export const TableContext = React.createContext(); @@ -206,6 +208,7 @@ class Table extends React.Component { bodyWrapper, rowWrapper, borders, + role, ...props } = this.props; @@ -248,7 +251,7 @@ class Table extends React.Component { } }} columns={headerData} - role="grid" + role={role} className={css( styles.table, gridBreakPoint && getModifier(stylesGrid, gridBreakPoint), diff --git a/packages/patternfly-4/react-table/src/components/Table/__snapshots__/Table.test.js.snap b/packages/patternfly-4/react-table/src/components/Table/__snapshots__/Table.test.js.snap index 31f123e8efb..847654317e7 100644 --- a/packages/patternfly-4/react-table/src/components/Table/__snapshots__/Table.test.js.snap +++ b/packages/patternfly-4/react-table/src/components/Table/__snapshots__/Table.test.js.snap @@ -32,6 +32,7 @@ exports[`Actions table 1`] = ` gridBreakPoint="grid-md" onCollapse={null} onExpand={null} + role="grid" rowLabeledBy="simple-node" rows={ Array [ @@ -1076,6 +1077,7 @@ exports[`Actions table 1`] = ` }, ] } + onRow={[Function]} onRowClick={[Function]} rowKey="id" rows={ @@ -2398,9 +2400,14 @@ exports[`Actions table 1`] = ` }, ] } + onCollapse={null} + rows={Array []} + tbodyRef={null} > { + const { property, cell, props } = column; + const evaluatedProperty = property || (cell && cell.property); + const { transforms = [], formatters = [] } = cell || {}; // TODO: test against this case + const extraParameters = { + columnIndex, + property: evaluatedProperty, + column, + rowData, + rowIndex, + rowKey + }; + const transformed = evaluateTransforms(transforms, rowData[evaluatedProperty], extraParameters); + + if (!transformed) { + console.warn('Table.Body - Failed to receive a transformed result'); // eslint-disable-line max-len, no-console + } + + return React.createElement( + renderers.cell, + { + key: `${columnIndex}-cell`, + ...mergeProps(props, cell && cell.props, transformed) + }, + transformed.children || + evaluateFormatters(formatters)( + rowData[`_${evaluatedProperty}`] || rowData[evaluatedProperty], + extraParameters + ) + ); + }) + ); + } +} +BodyRow.defaultProps = tableBodyRowDefaults; +BodyRow.propTypes = tableBodyRowTypes; + +export default BodyRow; diff --git a/packages/patternfly-4/react-table/src/components/Table/base/body.js b/packages/patternfly-4/react-table/src/components/Table/base/body.js new file mode 100644 index 00000000000..7c3b2e8e373 --- /dev/null +++ b/packages/patternfly-4/react-table/src/components/Table/base/body.js @@ -0,0 +1,67 @@ +/** + * body.js + * + * Forked from reactabular-table version 8.14.0 + * https://github.com/reactabular/reactabular/tree/v8.14.0/packages/reactabular-table/src + * */ +import { isEqual, isFunction } from 'lodash-es'; +import React from 'react'; +import { tableBodyTypes, tableBodyDefaults, tableBodyContextTypes } from './types'; +import BodyRow from './body-row'; +import resolveRowKey from './resolve-row-key'; + +class Body extends React.Component { + shouldComponentUpdate(nextProps, nextState, nextContext) { + // eslint-disable-line no-unused-vars + // Skip checking props against `onRow` since that can be bound at render(). + // That's not particularly good practice but you never know how the users + // prefer to define the handler. + + // Check for wrapper based override. + const { renderers } = nextContext; + + if (renderers && renderers.body && renderers.body.wrapper.shouldComponentUpdate) { + if (isFunction(renderers.body.wrapper.shouldComponentUpdate)) { + return renderers.body.wrapper.shouldComponentUpdate.call(this, nextProps, nextState, nextContext); + } + + return true; + } + + return !(isEqual(omitOnRow(this.props), omitOnRow(nextProps)) && isEqual(this.context, nextContext)); + } + render() { + const { onRow, rows, rowKey, ...props } = this.props; + const { columns, renderers } = this.context; + + return React.createElement( + renderers.body.wrapper, + props, + rows.map((rowData, index) => { + const rowIndex = rowData._index || index; + const key = resolveRowKey({ rowData, rowIndex, rowKey }); + + return React.createElement(BodyRow, { + key, + renderers: renderers.body, + onRow, + rowKey: key, + rowIndex, + rowData, + columns + }); + }) + ); + } +} +Body.propTypes = tableBodyTypes; +Body.defaultProps = tableBodyDefaults; +Body.contextTypes = tableBodyContextTypes; + +function omitOnRow(props) { + const { onRow, ...ret } = props; // eslint-disable-line no-unused-vars + + return ret; +} + +export default Body; diff --git a/packages/patternfly-4/react-table/src/components/Table/base/columns-are-equal.js b/packages/patternfly-4/react-table/src/components/Table/base/columns-are-equal.js new file mode 100644 index 00000000000..9541dad5bea --- /dev/null +++ b/packages/patternfly-4/react-table/src/components/Table/base/columns-are-equal.js @@ -0,0 +1,19 @@ +/** + * columns-are-equal.js + * + * Forked from reactabular-table version 8.14.0 + * https://github.com/reactabular/reactabular/tree/v8.14.0/packages/reactabular-table/src + * */ +import { isFunction, isEqualWith } from 'lodash-es'; + +function columnsAreEqual(oldColumns, newColumns) { + return isEqualWith(oldColumns, newColumns, (a, b) => { + if (isFunction(a) && isFunction(b)) { + return true; + } + + return undefined; + }); +} + +export default columnsAreEqual; diff --git a/packages/patternfly-4/react-table/src/components/Table/base/evaluate-formatters.js b/packages/patternfly-4/react-table/src/components/Table/base/evaluate-formatters.js new file mode 100644 index 00000000000..cf0cfe47be1 --- /dev/null +++ b/packages/patternfly-4/react-table/src/components/Table/base/evaluate-formatters.js @@ -0,0 +1,18 @@ +/** + * evaluate-formatters.js + * + * Forked from reactabular-table version 8.14.0 + * https://github.com/reactabular/reactabular/tree/v8.14.0/packages/reactabular-table/src + * */ +function evaluateFormatters(formatters) { + return (value, extra) => + formatters.reduce( + (parameters, formatter) => ({ + value: formatter(parameters.value, parameters.extra), + extra + }), + { value, extra } + ).value; +} + +export default evaluateFormatters; diff --git a/packages/patternfly-4/react-table/src/components/Table/base/evaluate-transforms.js b/packages/patternfly-4/react-table/src/components/Table/base/evaluate-transforms.js new file mode 100644 index 00000000000..b0e7deed564 --- /dev/null +++ b/packages/patternfly-4/react-table/src/components/Table/base/evaluate-transforms.js @@ -0,0 +1,24 @@ +/** + * evaluate-transforms.js + * + * Forked from reactabular-table version 8.14.0 + * https://github.com/reactabular/reactabular/tree/v8.14.0/packages/reactabular-table/src + * */ +import { isFunction } from 'lodash-es'; +import mergeProps from './merge-props'; + +function evaluateTransforms(transforms = [], value, extraParameters = {}) { + if (process.env.NODE_ENV !== 'production') { + if (!transforms.every(isFunction)) { + throw new Error("All transforms weren't functions!", transforms); + } + } + + if (transforms.length === 0) { + return {}; + } + + return mergeProps(...transforms.map(transform => transform(value, extraParameters))); +} + +export default evaluateTransforms; diff --git a/packages/patternfly-4/react-table/src/components/Table/base/header-row.js b/packages/patternfly-4/react-table/src/components/Table/base/header-row.js new file mode 100644 index 00000000000..f4925b14477 --- /dev/null +++ b/packages/patternfly-4/react-table/src/components/Table/base/header-row.js @@ -0,0 +1,45 @@ +/** + * header-row.js + * + * Forked from reactabular-table version 8.14.0 + * https://github.com/reactabular/reactabular/tree/v8.14.0/packages/reactabular-table/src + * */ +import React from 'react'; +import evaluateFormatters from './evaluate-formatters'; +import evaluateTransforms from './evaluate-transforms'; +import mergeProps from './merge-props'; +import { tableHeaderRowTypes, tableHeaderRowDefaults } from './types'; + +const HeaderRow = ({ rowData, rowIndex, renderers, onRow }) => + React.createElement( + renderers.row, + onRow(rowData, { rowIndex }), + rowData.map((column, columnIndex) => { + const { property, header = {}, props = {} } = column; + const evaluatedProperty = property || (header && header.property); + const { label, transforms = [], formatters = [] } = header; + const extraParameters = { + columnIndex, + property: evaluatedProperty, + column + }; + const transformedProps = evaluateTransforms(transforms, label, extraParameters); + + if (!transformedProps) { + console.warn('Table.Header - Failed to receive a transformed result'); // eslint-disable-line max-len, no-console + } + + return React.createElement( + renderers.cell, + { + key: `${columnIndex}-header`, + ...mergeProps(props, header && header.props, transformedProps) + }, + transformedProps.children || evaluateFormatters(formatters)(label, extraParameters) + ); + }) + ); +HeaderRow.defaultProps = tableHeaderRowDefaults; +HeaderRow.propTypes = tableHeaderRowTypes; + +export default HeaderRow; diff --git a/packages/patternfly-4/react-table/src/components/Table/base/header.js b/packages/patternfly-4/react-table/src/components/Table/base/header.js new file mode 100644 index 00000000000..49f5c06d01b --- /dev/null +++ b/packages/patternfly-4/react-table/src/components/Table/base/header.js @@ -0,0 +1,38 @@ +/** + * header.js + * + * Forked from reactabular-table version 8.14.0 + * https://github.com/reactabular/reactabular/tree/v8.14.0/packages/reactabular-table/src + * */ +import React from 'react'; +import { tableHeaderTypes, tableHeaderContextTypes } from './types'; +import HeaderRow from './header-row'; + +// eslint-disable-next-line react/prefer-stateless-function +class Header extends React.Component { + render() { + const { children, headerRows, onRow, ...props } = this.props; + const { renderers, columns } = this.context; + + // If headerRows aren't passed, default to bodyColumns as header rows + return React.createElement( + renderers.header.wrapper, + props, + [ + (headerRows || [columns]).map((rowData, rowIndex) => + React.createElement(HeaderRow, { + key: `${rowIndex}-header-row`, + renderers: renderers.header, + onRow, + rowData, + rowIndex + }) + ) + ].concat(children) + ); + } +} +Header.propTypes = tableHeaderTypes; +Header.contextTypes = tableHeaderContextTypes; + +export default Header; diff --git a/packages/patternfly-4/react-table/src/components/Table/base/index.js b/packages/patternfly-4/react-table/src/components/Table/base/index.js new file mode 100644 index 00000000000..31f9e2760e6 --- /dev/null +++ b/packages/patternfly-4/react-table/src/components/Table/base/index.js @@ -0,0 +1,9 @@ +export { default as Provider } from './provider'; +export { default as Header } from './header'; +export { default as Body } from './body'; +export { default as BodyRow } from './body-row'; +export { default as evaluateFormatters } from './evaluate-formatters'; +export { default as evaluateTransforms } from './evaluate-transforms'; +export { default as mergeProps } from './merge-props'; +export { default as columnsAreEqual } from './columns-are-equal'; +export { default as resolveRowKey } from './resolve-row-key'; diff --git a/packages/patternfly-4/react-table/src/components/Table/base/merge-props.js b/packages/patternfly-4/react-table/src/components/Table/base/merge-props.js new file mode 100644 index 00000000000..e7a58581138 --- /dev/null +++ b/packages/patternfly-4/react-table/src/components/Table/base/merge-props.js @@ -0,0 +1,36 @@ +/** + * merge-props.js + * + * Forked from reactabular-table version 8.14.0 + * https://github.com/reactabular/reactabular/tree/v8.14.0/packages/reactabular-table/src + * */ +import { mergeWith } from 'lodash-es'; +import classNames from 'classnames'; + +function mergePropPair(...props) { + const firstProps = props[0]; + const restProps = props.slice(1); + + if (!restProps.length) { + return mergeWith({}, firstProps); + } + + // Avoid mutating the first prop collection + return mergeWith(mergeWith({}, firstProps), ...restProps, (a, b, key) => { + if (key === 'children') { + // Children have to be merged in reverse order for Reactabular + // logic to work. + return { ...b, ...a }; + } + + if (key === 'className') { + // Process class names through classNames to merge properly + // as a string. + return classNames(a, b); + } + + return undefined; + }); +} + +export default mergePropPair; diff --git a/packages/patternfly-4/react-table/src/components/Table/base/provider.js b/packages/patternfly-4/react-table/src/components/Table/base/provider.js new file mode 100644 index 00000000000..499bba82518 --- /dev/null +++ b/packages/patternfly-4/react-table/src/components/Table/base/provider.js @@ -0,0 +1,56 @@ +/** + * provider.js + * + * Forked from reactabular-table version 8.14.0 + * https://github.com/reactabular/reactabular/tree/v8.14.0/packages/reactabular-table/src + * */ +import React from 'react'; +import PropTypes from 'prop-types'; +import { tableTypes, tableDefaults, tableContextTypes } from './types'; + +const componentDefaults = tableDefaults.renderers; + +export default class Provider extends React.Component { + getChildContext() { + const { columns, components, renderers } = this.props; + let finalRenderers = renderers; + + // XXXXX: Drop in the next major version + if (components) { + // eslint-disable-next-line no-console + console.warn( + '`components` have been deprecated in favor of `renderers` and will be removed in the next major version, please rename!' + ); + + finalRenderers = components; + } + + return { + columns, + renderers: { + table: finalRenderers.table || componentDefaults.table, + header: { ...componentDefaults.header, ...finalRenderers.header }, + body: { ...componentDefaults.body, ...finalRenderers.body } + } + }; + } + render() { + const { + columns, // eslint-disable-line no-unused-vars + renderers, + components, // XXXXX: Drop in the next major version + children, + ...props + } = this.props; + + return React.createElement(renderers.table || tableDefaults.renderers.table, props, children); + } +} +Provider.propTypes = { + ...tableTypes, + children: PropTypes.any +}; +Provider.defaultProps = { + ...tableDefaults +}; +Provider.childContextTypes = tableContextTypes; diff --git a/packages/patternfly-4/react-table/src/components/Table/base/resolve-row-key.js b/packages/patternfly-4/react-table/src/components/Table/base/resolve-row-key.js new file mode 100644 index 00000000000..ee8f180f168 --- /dev/null +++ b/packages/patternfly-4/react-table/src/components/Table/base/resolve-row-key.js @@ -0,0 +1,27 @@ +/** + * resolve-row-key.js + * + * Forked from reactabular-table version 8.14.0 + * https://github.com/reactabular/reactabular/tree/v8.14.0/packages/reactabular-table/src + * */ +import { isArray } from 'lodash-es'; + +function resolveRowKey({ rowData, rowIndex, rowKey }) { + if (typeof rowKey === 'function') { + return `${rowKey({ rowData, rowIndex })}-row`; + } else if (process.env.NODE_ENV !== 'production') { + // Arrays cannot have rowKeys by definition so we have to go by index there. + if (!isArray(rowData) && rowData[rowKey] === undefined) { + // eslint-disable-next-line no-console + console.warn('Table.Body - Missing valid rowKey!', rowData, rowKey); + } + } + + if (rowData[rowKey] === 0) { + return `${rowData[rowKey]}-row`; + } + + return `${rowData[rowKey] || rowIndex}-row`; +} + +export default resolveRowKey; diff --git a/packages/patternfly-4/react-table/src/components/Table/base/types.js b/packages/patternfly-4/react-table/src/components/Table/base/types.js new file mode 100644 index 00000000000..20293559f6c --- /dev/null +++ b/packages/patternfly-4/react-table/src/components/Table/base/types.js @@ -0,0 +1,107 @@ +/** + * types.js + * + * Forked from reactabular-table version 8.14.0 + * https://github.com/reactabular/reactabular/tree/v8.14.0/packages/reactabular-table/src + * */ +import PropTypes from 'prop-types'; + +const arrayOfObjectColumns = PropTypes.arrayOf( + PropTypes.shape({ + header: PropTypes.shape({ + label: PropTypes.string, + transforms: PropTypes.arrayOf(PropTypes.func), + formatters: PropTypes.arrayOf(PropTypes.func), + props: PropTypes.object + }), + cell: PropTypes.shape({ + property: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + transforms: PropTypes.arrayOf(PropTypes.func), + formatters: PropTypes.arrayOf(PropTypes.func), + props: PropTypes.object + }) + }) +); +const arrayOfArrayColumns = PropTypes.arrayOf(PropTypes.array); +const rowsType = PropTypes.oneOfType([arrayOfObjectColumns, arrayOfArrayColumns]); +const rowKeyType = PropTypes.oneOfType([PropTypes.func, PropTypes.string]); +const rowDataType = PropTypes.oneOfType([PropTypes.array, PropTypes.object]); +const tableTypes = { + columns: PropTypes.array.isRequired, + renderers: PropTypes.object, + components: PropTypes.object // XXXXX: Deprecated in favor of renderers, remove in the next major! +}; +const tableContextTypes = { + columns: PropTypes.array.isRequired, + renderers: PropTypes.object +}; +const tableBodyDefaults = { + onRow: () => {} +}; +const tableBodyTypes = { + onRow: PropTypes.func, + rows: rowsType.isRequired, + rowKey: rowKeyType +}; +const tableBodyContextTypes = { + columns: PropTypes.array.isRequired, + renderers: PropTypes.object +}; +const tableBodyRowDefaults = { + onRow: () => ({}) +}; +const tableBodyRowTypes = { + columns: PropTypes.array.isRequired, + renderers: PropTypes.object, + onRow: PropTypes.func, + rowIndex: PropTypes.number.isRequired, + rowData: rowDataType.isRequired, + rowKey: PropTypes.string.isRequired +}; +const tableHeaderTypes = { + headerRows: PropTypes.arrayOf(arrayOfObjectColumns), + children: PropTypes.any +}; +const tableHeaderContextTypes = { + columns: PropTypes.array.isRequired, + renderers: PropTypes.object +}; +const tableHeaderRowDefaults = { + onRow: () => ({}) +}; +const tableHeaderRowTypes = { + renderers: PropTypes.object, + onRow: PropTypes.func, + rowIndex: PropTypes.number.isRequired, + rowData: rowDataType.isRequired +}; +const tableDefaults = { + renderers: { + table: 'table', + header: { + wrapper: 'thead', + row: 'tr', + cell: 'th' + }, + body: { + wrapper: 'tbody', + row: 'tr', + cell: 'td' + } + } +}; + +export { + tableTypes, + tableContextTypes, + tableBodyTypes, + tableBodyDefaults, + tableBodyContextTypes, + tableBodyRowTypes, + tableBodyRowDefaults, + tableHeaderTypes, + tableHeaderContextTypes, + tableHeaderRowTypes, + tableHeaderRowDefaults, + tableDefaults +}; diff --git a/packages/patternfly-4/react-table/src/components/Table/index.js b/packages/patternfly-4/react-table/src/components/Table/index.js index 884b75e3211..c65bab9f987 100644 --- a/packages/patternfly-4/react-table/src/components/Table/index.js +++ b/packages/patternfly-4/react-table/src/components/Table/index.js @@ -1,3 +1,4 @@ +export { default as ActionsColumn } from './ActionsColumn'; export { default as Table, TableContext, TableGridBreakpoint, TableVariant } from './Table'; export { default as TableHeader } from './Header'; export { default as TableBody } from './Body'; diff --git a/packages/patternfly-4/react-virtualized-extension/.babelrc b/packages/patternfly-4/react-virtualized-extension/.babelrc new file mode 100644 index 00000000000..40b9ca6c624 --- /dev/null +++ b/packages/patternfly-4/react-virtualized-extension/.babelrc @@ -0,0 +1,6 @@ +{ + "presets": [ + "../.babelrc.js", + "flow" + ] +} \ No newline at end of file diff --git a/packages/patternfly-4/react-virtualized-extension/.npmignore b/packages/patternfly-4/react-virtualized-extension/.npmignore new file mode 100644 index 00000000000..378eac25d31 --- /dev/null +++ b/packages/patternfly-4/react-virtualized-extension/.npmignore @@ -0,0 +1 @@ +build diff --git a/packages/patternfly-4/react-virtualized-extension/README.md b/packages/patternfly-4/react-virtualized-extension/README.md new file mode 100644 index 00000000000..ba01cc213be --- /dev/null +++ b/packages/patternfly-4/react-virtualized-extension/README.md @@ -0,0 +1,5 @@ +# react-virtualized-extension + +This package contains virtualization extensions for tables and lists. + +This package is currently an extension. Extension components do not undergo the same rigorous design or coding review process as core PatternFly components. If enough members of the community find them useful, we will work to move them into our core PatternFly system by starting the design process for the idea. diff --git a/packages/patternfly-4/react-virtualized-extension/build/copyStyles.js b/packages/patternfly-4/react-virtualized-extension/build/copyStyles.js new file mode 100644 index 00000000000..3c501ed0ad6 --- /dev/null +++ b/packages/patternfly-4/react-virtualized-extension/build/copyStyles.js @@ -0,0 +1,42 @@ +/* eslint-disable no-case-declarations */ +const { copySync, readFileSync, writeFileSync } = require('fs-extra'); +const { resolve, dirname, join } = require('path'); +const { parse: parseCSS, stringify: stringifyCSS } = require('css'); + +const baseCSSFilename = 'patternfly-base.css'; +const stylesDir = resolve(__dirname, '../dist/styles'); +const pfDir = dirname(require.resolve(`@patternfly/patternfly/${baseCSSFilename}`)); + +const css = readFileSync(join(pfDir, baseCSSFilename), 'utf8'); +const ast = parseCSS(css); + +const unusedSelectorRegEx = /(\.fas?|\.sr-only)/; +const unusedKeyFramesRegEx = /fa-/; +const unusedFontFamilyRegEx = /Font Awesome 5 Free/; +const ununsedFontFilesRegExt = /(fa-|\.html$|\.css$)/; + +// Core provides font awesome fonts and utlities. React does not use these +ast.stylesheet.rules = ast.stylesheet.rules.filter(rule => { + switch (rule.type) { + case 'rule': + return !rule.selectors.some(sel => unusedSelectorRegEx.test(sel)); + case 'keyframes': + return !unusedKeyFramesRegEx.test(rule.name); + case 'charset': + case 'comment': + return false; + case 'font-face': + const fontFamilyDecl = rule.declarations.find(decl => decl.property === 'font-family'); + return !unusedFontFamilyRegEx.test(fontFamilyDecl.value); + default: + return true; + } +}); + +copySync(join(pfDir, 'assets/images'), join(stylesDir, 'assets/images')); +copySync(join(pfDir, 'assets/fonts'), join(stylesDir, 'assets/fonts'), { + filter(src) { + return !ununsedFontFilesRegExt.test(src); + } +}); +writeFileSync(join(stylesDir, 'base.css'), stringifyCSS(ast)); diff --git a/packages/patternfly-4/react-virtualized-extension/package.json b/packages/patternfly-4/react-virtualized-extension/package.json new file mode 100644 index 00000000000..30b4902329e --- /dev/null +++ b/packages/patternfly-4/react-virtualized-extension/package.json @@ -0,0 +1,65 @@ +{ + "name": "@patternfly/react-virtualized-extension", + "version": "1.0.0", + "description": "This library provides efficient rendering extensions for PatternFly 4 React tables and lists.", + "main": "dist/js/index.js", + "module": "dist/esm/index.js", + "types": "dist/js/index.d.ts", + "sideEffects": false, + "publishConfig": { + "access": "public", + "tag": "prerelease" + }, + "repository": { + "type": "git", + "url": "https://github.com/patternfly/patternfly-react.git" + }, + "keywords": [ + "react", + "patternfly", + "table", + "reacttabular" + ], + "author": "Red Hat", + "license": "Apache-2.0", + "bugs": { + "url": "https://github.com/patternfly/patternfly-react/issues" + }, + "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/", + "dependencies": { + "@patternfly/patternfly": "2.8.2", + "@patternfly/react-core": "^3.36.0", + "@patternfly/react-icons": "^3.9.3", + "@patternfly/react-styles": "^3.3.0", + "exenv": "^1.2.2", + "react-virtualized": "9.21.1", + "clsx": "^1.0.1", + "dom-helpers": "^2.4.0 || ^3.0.0", + "react-lifecycles-compat": "^3.0.4", + "linear-layout-vector": "0.0.1" + }, + "peerDependencies": { + "@patternfly/react-table": "^2.10.0", + "lodash-es": "4.x", + "prop-types": "^15.6.1", + "react": "^16.4.0", + "react-dom": "^15.6.2 || ^16.4.0" + }, + "scripts": { + "build": "yarn build:babel && node ./scripts/copyTS.js && node ./build/copyStyles.js", + "build:babel": "concurrently 'yarn build:babel:esm && yarn build:babel:umd' 'yarn build:babel:cjs'", + "build:babel:cjs": "babel src --out-dir dist/js -q", + "build:babel:esm": "babel src --out-dir dist/esm -q", + "build:babel:umd": "babel dist/esm --out-dir dist/umd --plugins transform-es2015-modules-umd --extensions '.js,.ts,.tsx' -q", + "clean": "rimraf dist", + "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose" + }, + "devDependencies": { + "babel-preset-flow": "^6.23.0", + "css": "^2.2.3", + "fs-extra": "^6.0.1", + "glob": "^7.1.2", + "uuid": "^3.3.2", + "rimraf": "^2.6.2" + } +} diff --git a/packages/patternfly-4/react-virtualized-extension/scripts/copyTS.js b/packages/patternfly-4/react-virtualized-extension/scripts/copyTS.js new file mode 100644 index 00000000000..569890d173f --- /dev/null +++ b/packages/patternfly-4/react-virtualized-extension/scripts/copyTS.js @@ -0,0 +1,15 @@ +const path = require('path'); +const glob = require('glob'); +const fse = require('fs-extra'); + +const srcDir = path.join('./src'); +const distDir = path.join('./dist/js'); + +const files = glob.sync('**/*.d.ts', { + cwd: srcDir +}); +files.forEach(file => { + const from = path.join(srcDir, file); + const to = path.join(distDir, file); + fse.copySync(from, to); +}); diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualGrid.example.css b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualGrid.example.css new file mode 100644 index 00000000000..12d45ab06eb --- /dev/null +++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualGrid.example.css @@ -0,0 +1,326 @@ +.pf-c-scrollablegrid .pf-c-table { + table-layout: fixed; +} + +.pf-c-table.pf-c-virtualized tr { + display: table; + table-layout: fixed; + width: 100%; +} + +.pf-c-scrollablegrid .pf-c-table tr > * { + height: auto; +} + +.pf-c-scrollablegrid .pf-c-table tbody > tr > :first-child::before { + content: none; + width: 0 !important; +} + +.pf-c-scrollablegrid .pf-c-table .pf-c-table__check { + width: 8.333% !important; +} + +@media screen and (max-width: 768px) { + .pf-c-scrollablegrid .pf-c-table .pf-c-table__check { + width: 16.66% !important; + } +} + +.pf-c-scrollablegrid .pf-c-table .pf-c-table__action { + width: 5% !important; + padding-left: 0px !important; +} +@media screen and (max-width: 992px) { + .pf-c-scrollablegrid .pf-c-table .pf-c-table__action { + width: 10% !important; + } +} + +@media screen and (min-width: 576px) and (max-width: 768px) { + .pf-m-1-col-on-sm { + width: 8.333% !important; + } +} + +@media screen and (min-width: 768px) and (max-width: 992px) { + .pf-m-1-col-on-md { + width: 8.33% !important; + } +} + +@media screen and (min-width: 992px) and (max-width: 1200px) { + .pf-m-1-col-on-lg { + width: 8.33% !important; + } +} + +@media screen and (min-width: 1200px) { + .pf-m-1-col-on-xl { + width: 8.33% !important; + } +} + +@media screen and (min-width: 576px) and (max-width: 768px) { + .pf-m-2-col-on-sm { + width: 16.66% !important; + } +} + +@media screen and (min-width: 768px) and (max-width: 992px) { + .pf-m-2-col-on-md { + width: 16.66% !important; + } +} + +@media screen and (min-width: 992px) and (max-width: 1200px) { + .pf-m-2-col-on-lg { + width: 16.66% !important; + } +} + +@media screen and (min-width: 1200px) { + .pf-m-2-col-on-xl { + width: 16.66% !important; + } +} + +@media screen and (min-width: 576px) and (max-width: 768px) { + .pf-m-3-col-on-sm { + width: 25% !important; + } +} + +@media screen and (min-width: 768px) and (max-width: 992px) { + .pf-m-3-col-on-md { + width: 25% !important; + } +} + +@media screen and (min-width: 992px) and (max-width: 1200px) { + .pf-m-3-col-on-lg { + width: 25% !important; + } +} + +@media screen and (min-width: 1200px) { + .pf-m-3-col-on-xl { + width: 25% !important; + } +} + +@media screen and (min-width: 576px) and (max-width: 768px) { + .pf-m-4-col-on-xl { + width: 33.333% !important; + } +} + +@media screen and (min-width: 768px) and (max-width: 992px) { + .pf-m-4-col-on-md { + width: 33.333% !important; + } +} + +@media screen and (min-width: 992px) and (max-width: 1200px) { + .pf-m-4-col-on-lg { + width: 33.333% !important; + } +} + +@media screen and (min-width: 1200px) { + .pf-m-4-col-on-xl { + width: 33.333% !important; + } +} + +@media screen and (min-width: 576px) and (max-width: 768px) { + .pf-m-5-col-on-sm { + width: 41.67% !important; + } +} + +@media screen and (min-width: 768px) and (max-width: 992px) { + .pf-m-5-col-on-md { + width: 41.67% !important; + } +} + +@media screen and (min-width: 992px) and (max-width: 1200px) { + .pf-m-5-col-on-lg { + width: 41.67% !important; + } +} + +@media screen and (min-width: 1200px) { + .pf-m-5-col-on-xl { + width: 41.67% !important; + } +} + +@media screen and (max-width: 768px) { + .pf-m-6-col-on-sm { + width: 50% !important; + } +} + +@media screen and (min-width: 768px) and (max-width: 992px) { + .pf-m-6-col-on-md { + width: 50% !important; + } +} + +@media screen and (min-width: 992px) and (max-width: 1200px) { + .pf-m-6-col-on-lg { + width: 50% !important; + } +} + +@media screen and (min-width: 1200px) { + .pf-m-6-col-on-xl { + width: 50% !important; + } +} + +@media screen and (min-width: 576px) and (max-width: 768px) { + .pf-m-7-col-on-sm { + width: 58.333% !important; + } +} + +@media screen and (min-width: 768px) and (max-width: 992px) { + .pf-m-7-col-on-md { + width: 58.333% !important; + } +} + +@media screen and (min-width: 992px) and (max-width: 1200px) { + .pf-m-7-col-on-lg { + width: 58.333% !important; + } +} + +@media screen and (min-width: 1200px) { + .pf-m-7-col-on-xl { + width: 58.333% !important; + } +} + +@media screen and (min-width: 576px) and (max-width: 768px) { + .pf-m-8-col-on-sm { + width: 66.66% !important; + } +} + +@media screen and (min-width: 768px) and (max-width: 992px) { + .pf-m-8-col-on-md { + width: 66.66% !important; + } +} + +@media screen and (min-width: 992px) and (max-width: 1200px) { + .pf-m-8-col-on-lg { + width: 66.66% !important; + } +} + +@media screen and (min-width: 1200px) { + .pf-m-8-col-on-xl { + width: 66.66% !important; + } +} + +@media screen and (min-width: 576px) and (max-width: 768px) { + .pf-m-9-col-on-sm { + width: 75% !important; + } +} + +@media screen and (min-width: 768px) and (max-width: 992px) { + .pf-m-9-col-on-md { + width: 75% !important; + } +} + +@media screen and (min-width: 992px) and (max-width: 1200px) { + .pf-m-9-col-on-lg { + width: 75% !important; + } +} + +@media screen and (min-width: 1200px) { + .pf-m-9-col-on-xl { + width: 75% !important; + } +} + +@media screen and (min-width: 576px) and (max-width: 768px) { + .pf-m-10-col-on-sm { + width: 83.333% !important; + } +} + +@media screen and (min-width: 768px) and (max-width: 992px) { + .pf-m-10-col-on-md { + width: 83.333% !important; + } +} + +@media screen and (min-width: 992px) and (max-width: 1200px) { + .pf-m-10-col-on-lg { + width: 83.333% !important; + } +} + +@media screen and (min-width: 1200px) { + .pf-m-10-col-on-xl { + width: 83.333% !important; + } +} + +@media screen and (min-width: 576px) and (max-width: 768px) { + .pf-m-11-col-on-sm { + width: 91.67% !important; + } +} + +@media screen and (min-width: 768px) and (max-width: 992px) { + .pf-m-11-col-on-md { + width: 91.67% !important; + } +} + +@media screen and (min-width: 992px) and (max-width: 1200px) { + .pf-m-11-col-on-lg { + width: 91.67% !important; + } +} + +@media screen and (min-width: 1200px) { + .pf-m-11-col-on-xl { + width: 91.67% !important; + } +} + +@media screen and (min-width: 576px) and (max-width: 768px) { + .pf-m-12-col-on-sm { + width: 100% !important; + } +} + +@media screen and (min-width: 768px) and (max-width: 992px) { + .pf-m-12-col-on-md { + width: 100% !important; + } +} + +@media screen and (min-width: 992px) and (max-width: 1200px) { + .pf-m-12-col-on-lg { + width: 100% !important; + } +} + +@media screen and (min-width: 1200px) { + .pf-m-12-col-on-xl { + width: 100% !important; + } +} \ No newline at end of file diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualGrid.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualGrid.js new file mode 100644 index 00000000000..ccb17f4b936 --- /dev/null +++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualGrid.js @@ -0,0 +1,1473 @@ +/** @flow */ +/* eslint-disable */ + +import type { + CellRenderer, + CellRangeRenderer, + CellPosition, + CellSize, + CellSizeGetter, + NoContentRenderer, + Scroll, + ScrollbarPresenceChange, + RenderedSection, + OverscanIndicesGetter, + Alignment, + CellCache, + StyleCache +} from './types'; +import type { AnimationTimeoutId } from './utils/requestAnimationTimeout'; + +import * as React from 'react'; +import clsx from 'clsx'; +import calculateSizeAndPositionDataAndUpdateScrollOffset from './utils/calculateSizeAndPositionDataAndUpdateScrollOffset'; +import ScalingCellSizeAndPositionManager from './utils/ScalingCellSizeAndPositionManager'; +import createCallbackMemoizer from './utils/createCallbackMemoizer'; +import defaultOverscanIndicesGetter, { + SCROLL_DIRECTION_BACKWARD, + SCROLL_DIRECTION_FORWARD +} from './defaultOverscanIndicesGetter'; +import updateScrollIndexHelper from './utils/updateScrollIndexHelper'; +import defaultCellRangeRenderer from './defaultCellRangeRenderer'; +import scrollbarSize from 'dom-helpers/util/scrollbarSize'; +import { polyfill } from 'react-lifecycles-compat'; +import { requestAnimationTimeout, cancelAnimationTimeout } from './utils/requestAnimationTimeout'; + +/** + * Specifies the number of milliseconds during which to disable pointer events while a scroll is in progress. + * This improves performance and makes scrolling smoother. + */ +export const DEFAULT_SCROLLING_RESET_TIME_INTERVAL = 150; + +/** + * Controls whether the VirtualGrid updates the DOM element's scrollLeft/scrollTop based on the current state or just observes it. + * This prevents VirtualGrid from interrupting mouse-wheel animations (see issue #2). + */ +const SCROLL_POSITION_CHANGE_REASONS = { + OBSERVED: 'observed', + REQUESTED: 'requested' +}; + +const renderNull: NoContentRenderer = () => null; + +type ScrollPosition = { + scrollTop?: number, + scrollLeft?: number +}; + +type Props = { + 'aria-label': string, + 'aria-readonly'?: boolean, + + /** + * Set the width of the inner scrollable container to 'auto'. + * This is useful for single-column VirtualGrids to ensure that the column doesn't extend below a vertical scrollbar. + */ + autoContainerWidth: boolean, + + /** + * Removes fixed height from the scrollingContainer so that the total height of rows can stretch the window. + * Intended for use with WindowScroller + */ + autoHeight: boolean, + + /** + * Removes fixed width from the scrollingContainer so that the total width of rows can stretch the window. + * Intended for use with WindowScroller + */ + autoWidth: boolean, + + /** Responsible for rendering a cell given an row and column index. */ + cellRenderer: CellRenderer, + + /** Responsible for rendering a group of cells given their index ranges. */ + cellRangeRenderer: CellRangeRenderer, + + /** Optional custom CSS class name to attach to root VirtualGrid element. */ + className?: string, + + /** Number of columns in grid. */ + columnCount: number, + + /** Either a fixed column width (number) or a function that returns the width of a column given its index. */ + columnWidth: CellSize, + + /** Unfiltered props for the VirtualGrid container. */ + containerProps?: Object, + + /** ARIA role for the cell-container. */ + containerRole: string, + + /** Optional inline style applied to inner cell-container */ + containerStyle: Object, + + /** + * If CellMeasurer is used to measure this VirtualGrid's children, this should be a pointer to its CellMeasurerCache. + * A shared CellMeasurerCache reference enables VirtualGrid and CellMeasurer to share measurement data. + */ + deferredMeasurementCache?: Object, + + /** + * Used to estimate the total width of a VirtualGrid before all of its columns have actually been measured. + * The estimated total width is adjusted as columns are rendered. + */ + estimatedColumnSize: number, + + /** + * Used to estimate the total height of a VirtualGrid before all of its rows have actually been measured. + * The estimated total height is adjusted as rows are rendered. + */ + estimatedRowSize: number, + + /** Exposed for testing purposes only. */ + getScrollbarSize: () => number, + + /** Height of VirtualGrid; this property determines the number of visible (vs virtualized) rows. */ + height: number, + + /** Optional custom id to attach to root VirtualGrid element. */ + id?: string, + + /** + * Override internal is-scrolling state tracking. + * This property is primarily intended for use with the WindowScroller component. + */ + isScrolling?: boolean, + + /** + * Opt-out of isScrolling param passed to cellRangeRenderer. + * To avoid the extra render when scroll stops. + */ + isScrollingOptOut: boolean, + + /** Optional renderer to be used in place of rows when either :rowCount or :columnCount is 0. */ + noContentRenderer: NoContentRenderer, + + /** + * Callback invoked whenever the scroll offset changes within the inner scrollable region. + * This callback can be used to sync scrolling between lists, tables, or grids. + */ + onScroll: (params: Scroll) => void, + + /** + * Called whenever a horizontal or vertical scrollbar is added or removed. + * This prop is not intended for end-user use; + * It is used by MultiVirtualGrid to support fixed-row/fixed-column scroll syncing. + */ + onScrollbarPresenceChange: (params: ScrollbarPresenceChange) => void, + + /** Callback invoked with information about the section of the VirtualGrid that was just rendered. */ + onSectionRendered: (params: RenderedSection) => void, + + /** + * Number of columns to render before/after the visible section of the grid. + * These columns can help for smoother scrolling on touch devices or browsers that send scroll events infrequently. + */ + overscanColumnCount: number, + + /** + * Calculates the number of cells to overscan before and after a specified range. + * This function ensures that overscanning doesn't exceed the available cells. + */ + overscanIndicesGetter: OverscanIndicesGetter, + + /** + * Number of rows to render above/below the visible section of the grid. + * These rows can help for smoother scrolling on touch devices or browsers that send scroll events infrequently. + */ + overscanRowCount: number, + + /** ARIA role for the grid element. */ + role: string, + + /** + * Either a fixed row height (number) or a function that returns the height of a row given its index. + * Should implement the following interface: ({ index: number }): number + */ + rowHeight: CellSize, + + /** Number of rows in grid. */ + rowCount: number, + + /** Wait this amount of time after the last scroll event before resetting VirtualGrid `pointer-events`. */ + scrollingResetTimeInterval: number, + + /** Horizontal offset. */ + scrollLeft?: number, + + /** + * Controls scroll-to-cell behavior of the VirtualGrid. + * The default ("auto") scrolls the least amount possible to ensure that the specified cell is fully visible. + * Use "start" to align cells to the top/left of the VirtualGrid and "end" to align bottom/right. + */ + scrollToAlignment: Alignment, + + /** Column index to ensure visible (by forcefully scrolling if necessary) */ + scrollToColumn: number, + + /** Vertical offset. */ + scrollTop?: number, + + /** Row index to ensure visible (by forcefully scrolling if necessary) */ + scrollToRow: number, + + /** Optional inline style */ + style: Object, + + /** Tab index for focus */ + tabIndex: ?number, + + /** Width of VirtualGrid; this property determines the number of visible (vs virtualized) columns. */ + width: number, + + /** Scroll Container element to render */ + scrollContainerComponent: string | React.ComponentType, + + /** Inner Scroll Container element to render */ + innerScrollContainerComponent: string | React.ComponentType +}; + +type InstanceProps = { + prevColumnWidth: CellSize, + prevRowHeight: CellSize, + + prevColumnCount: number, + prevRowCount: number, + prevIsScrolling: boolean, + prevScrollToColumn: number, + prevScrollToRow: number, + prevScrollLeft: ?number, + prevScrollTop: ?number, + + columnSizeAndPositionManager: ScalingCellSizeAndPositionManager, + rowSizeAndPositionManager: ScalingCellSizeAndPositionManager, + + scrollbarSize: number, + scrollbarSizeMeasured: boolean +}; + +type State = { + instanceProps: InstanceProps, + isScrolling: boolean, + scrollDirectionHorizontal: -1 | 1, + scrollDirectionVertical: -1 | 1, + scrollLeft: number, + scrollTop: number, + scrollPositionChangeReason: 'observed' | 'requested' | null, + needToResetStyleCache: boolean +}; + +/** + * Renders tabular data with virtualization along the vertical and horizontal axes. + * Row heights and column widths must be known ahead of time and specified as properties. + */ +class VirtualGrid extends React.PureComponent { + static defaultProps = { + 'aria-label': 'grid', + 'aria-readonly': true, + autoContainerWidth: false, + autoHeight: false, + autoWidth: false, + cellRangeRenderer: defaultCellRangeRenderer, + containerRole: 'rowgroup', + containerStyle: {}, + estimatedColumnSize: 100, + estimatedRowSize: 30, + getScrollbarSize: scrollbarSize, + noContentRenderer: renderNull, + onScroll: () => {}, + onScrollbarPresenceChange: () => {}, + onSectionRendered: () => {}, + overscanColumnCount: 0, + overscanIndicesGetter: defaultOverscanIndicesGetter, + overscanRowCount: 10, + role: 'grid', + scrollingResetTimeInterval: DEFAULT_SCROLLING_RESET_TIME_INTERVAL, + scrollToAlignment: 'auto', + scrollToColumn: -1, + scrollToRow: -1, + style: {}, + tabIndex: 0, + isScrollingOptOut: false, + scrollContainerComponent: 'div', + innerScrollContainerComponent: 'div' + }; + + // Invokes onSectionRendered callback only when start/stop row or column indices change + _onVirtualGridRenderedMemoizer = createCallbackMemoizer(); + _onScrollMemoizer = createCallbackMemoizer(false); + + _deferredInvalidateColumnIndex = null; + _deferredInvalidateRowIndex = null; + _recomputeScrollLeftFlag = false; + _recomputeScrollTopFlag = false; + + _horizontalScrollBarSize = 0; + _verticalScrollBarSize = 0; + _scrollbarPresenceChanged = false; + _scrollingContainer: Element; + + _childrenToDisplay: React.Element<*>[]; + + _columnStartIndex: number; + _columnStopIndex: number; + _rowStartIndex: number; + _rowStopIndex: number; + _renderedColumnStartIndex = 0; + _renderedColumnStopIndex = 0; + _renderedRowStartIndex = 0; + _renderedRowStopIndex = 0; + + _initialScrollTop: number; + _initialScrollLeft: number; + + _disablePointerEventsTimeoutId: ?AnimationTimeoutId; + + _styleCache: StyleCache = {}; + _cellCache: CellCache = {}; + + constructor(props: Props) { + super(props); + const columnSizeAndPositionManager = new ScalingCellSizeAndPositionManager({ + cellCount: props.columnCount, + cellSizeGetter: params => VirtualGrid._wrapSizeGetter(props.columnWidth)(params), + estimatedCellSize: VirtualGrid._getEstimatedColumnSize(props) + }); + const rowSizeAndPositionManager = new ScalingCellSizeAndPositionManager({ + cellCount: props.rowCount, + cellSizeGetter: params => VirtualGrid._wrapSizeGetter(props.rowHeight)(params), + estimatedCellSize: VirtualGrid._getEstimatedRowSize(props) + }); + + this.state = { + instanceProps: { + columnSizeAndPositionManager, + rowSizeAndPositionManager, + + prevColumnWidth: props.columnWidth, + prevRowHeight: props.rowHeight, + prevColumnCount: props.columnCount, + prevRowCount: props.rowCount, + prevIsScrolling: props.isScrolling === true, + prevScrollToColumn: props.scrollToColumn, + prevScrollToRow: props.scrollToRow, + prevScrollLeft: props.scrollLeft, + prevScrollTop: props.scrollTop, + + scrollbarSize: 0, + scrollbarSizeMeasured: false + }, + isScrolling: false, + scrollDirectionHorizontal: SCROLL_DIRECTION_FORWARD, + scrollDirectionVertical: SCROLL_DIRECTION_FORWARD, + scrollLeft: props.scrollLeft || 0, + scrollTop: props.scrollTop || 0, + scrollPositionChangeReason: null, + + needToResetStyleCache: false + }; + + if (props.scrollToRow > 0) { + this._initialScrollTop = this._getCalculatedScrollTop(props, this.state); + } + if (props.scrollToColumn > 0) { + this._initialScrollLeft = this._getCalculatedScrollLeft(props, this.state); + } + } + + /** + * Gets offsets for a given cell and alignment. + */ + getOffsetForCell({ + alignment = this.props.scrollToAlignment, + columnIndex = this.props.scrollToColumn, + rowIndex = this.props.scrollToRow + }: { + alignment?: Alignment, + columnIndex?: number, + rowIndex?: number + } = {}) { + const offsetProps = { + ...this.props, + scrollToAlignment: alignment, + scrollToColumn: columnIndex, + scrollToRow: rowIndex + }; + + return { + scrollLeft: this._getCalculatedScrollLeft(offsetProps), + scrollTop: this._getCalculatedScrollTop(offsetProps) + }; + } + + /** + * Gets estimated total rows' height. + */ + getTotalRowsHeight() { + return this.state.instanceProps.rowSizeAndPositionManager.getTotalSize(); + } + + /** + * Gets estimated total columns' width. + */ + getTotalColumnsWidth() { + return this.state.instanceProps.columnSizeAndPositionManager.getTotalSize(); + } + + /** + * This method handles a scroll event originating from an external scroll control. + * It's an advanced method and should probably not be used unless you're implementing a custom scroll-bar solution. + */ + handleScrollEvent({ scrollLeft: scrollLeftParam = 0, scrollTop: scrollTopParam = 0 }: ScrollPosition) { + // On iOS, we can arrive at negative offsets by swiping past the start. + // To prevent flicker here, we make playing in the negative offset zone cause nothing to happen. + if (scrollTopParam < 0) { + return; + } + + // Prevent pointer events from interrupting a smooth scroll + this._debounceScrollEnded(); + + const { autoHeight, autoWidth, height, width } = this.props; + const { instanceProps } = this.state; + + // When this component is shrunk drastically, React dispatches a series of back-to-back scroll events, + // Gradually converging on a scrollTop that is within the bounds of the new, smaller height. + // This causes a series of rapid renders that is slow for long lists. + // We can avoid that by doing some simple bounds checking to ensure that scroll offsets never exceed their bounds. + const { scrollbarSize } = instanceProps; + const totalRowsHeight = instanceProps.rowSizeAndPositionManager.getTotalSize(); + const totalColumnsWidth = instanceProps.columnSizeAndPositionManager.getTotalSize(); + const scrollLeft = Math.min(Math.max(0, totalColumnsWidth - width + scrollbarSize), scrollLeftParam); + const scrollTop = Math.min(Math.max(0, totalRowsHeight - height + scrollbarSize), scrollTopParam); + + // Certain devices (like Apple touchpad) rapid-fire duplicate events. + // Don't force a re-render if this is the case. + // The mouse may move faster then the animation frame does. + // Use requestAnimationFrame to avoid over-updating. + if (this.state.scrollLeft !== scrollLeft || this.state.scrollTop !== scrollTop) { + // Track scrolling direction so we can more efficiently overscan rows to reduce empty space around the edges while scrolling. + // Don't change direction for an axis unless scroll offset has changed. + const scrollDirectionHorizontal = + scrollLeft !== this.state.scrollLeft + ? scrollLeft > this.state.scrollLeft + ? SCROLL_DIRECTION_FORWARD + : SCROLL_DIRECTION_BACKWARD + : this.state.scrollDirectionHorizontal; + const scrollDirectionVertical = + scrollTop !== this.state.scrollTop + ? scrollTop > this.state.scrollTop + ? SCROLL_DIRECTION_FORWARD + : SCROLL_DIRECTION_BACKWARD + : this.state.scrollDirectionVertical; + + const newState: $Shape = { + isScrolling: true, + scrollDirectionHorizontal, + scrollDirectionVertical, + scrollPositionChangeReason: SCROLL_POSITION_CHANGE_REASONS.OBSERVED + }; + + if (!autoHeight) { + newState.scrollTop = scrollTop; + } + + if (!autoWidth) { + newState.scrollLeft = scrollLeft; + } + + newState.needToResetStyleCache = false; + this.setState(newState); + } + + this._invokeOnScrollMemoizer({ + scrollLeft, + scrollTop, + totalColumnsWidth, + totalRowsHeight + }); + } + + /** + * Invalidate VirtualGrid size and recompute visible cells. + * This is a deferred wrapper for recomputeVirtualGridSize(). + * It sets a flag to be evaluated on cDM/cDU to avoid unnecessary renders. + * This method is intended for advanced use-cases like CellMeasurer. + */ + // @TODO (bvaughn) Add automated test coverage for this. + invalidateCellSizeAfterRender({ columnIndex, rowIndex }: CellPosition) { + this._deferredInvalidateColumnIndex = + typeof this._deferredInvalidateColumnIndex === 'number' + ? Math.min(this._deferredInvalidateColumnIndex, columnIndex) + : columnIndex; + this._deferredInvalidateRowIndex = + typeof this._deferredInvalidateRowIndex === 'number' + ? Math.min(this._deferredInvalidateRowIndex, rowIndex) + : rowIndex; + } + + /** + * Pre-measure all columns and rows in a VirtualGrid. + * Typically cells are only measured as needed and estimated sizes 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). + */ + measureAllCells() { + const { columnCount, rowCount } = this.props; + const { instanceProps } = this.state; + instanceProps.columnSizeAndPositionManager.getSizeAndPositionOfCell(columnCount - 1); + instanceProps.rowSizeAndPositionManager.getSizeAndPositionOfCell(rowCount - 1); + } + + /** + * Forced recompute of row heights and column widths. + * This function should be called if dynamic column or row sizes have changed but nothing else has. + * Since VirtualGrid only receives :columnCount and :rowCount it has no way of detecting when the underlying data changes. + */ + recomputeVirtualGridSize({ columnIndex = 0, rowIndex = 0 }: CellPosition = {}) { + const { scrollToColumn, scrollToRow } = this.props; + const { instanceProps } = this.state; + + instanceProps.columnSizeAndPositionManager.resetCell(columnIndex); + instanceProps.rowSizeAndPositionManager.resetCell(rowIndex); + + // Cell sizes may be determined by a function property. + // In this case the cDU handler can't know if they changed. + // Store this flag to let the next cDU pass know it needs to recompute the scroll offset. + this._recomputeScrollLeftFlag = + scrollToColumn >= 0 && + (this.state.scrollDirectionHorizontal === SCROLL_DIRECTION_FORWARD + ? columnIndex <= scrollToColumn + : columnIndex >= scrollToColumn); + this._recomputeScrollTopFlag = + scrollToRow >= 0 && + (this.state.scrollDirectionVertical === SCROLL_DIRECTION_FORWARD + ? rowIndex <= scrollToRow + : rowIndex >= scrollToRow); + + // Clear cell cache in case we are scrolling; + // Invalid row heights likely mean invalid cached content as well. + this._styleCache = {}; + this._cellCache = {}; + + this.forceUpdate(); + } + + /** + * Ensure column and row are visible. + */ + scrollToCell({ columnIndex, rowIndex }: CellPosition) { + const { columnCount } = this.props; + + const { props } = this; + + // Don't adjust scroll offset for single-column grids (eg List, Table). + // This can cause a funky scroll offset because of the vertical scrollbar width. + if (columnCount > 1 && columnIndex !== undefined) { + this._updateScrollLeftForScrollToColumn({ + ...props, + scrollToColumn: columnIndex + }); + } + + if (rowIndex !== undefined) { + this._updateScrollTopForScrollToRow({ + ...props, + scrollToRow: rowIndex + }); + } + } + + componentDidMount() { + const { getScrollbarSize, height, scrollLeft, scrollToColumn, scrollTop, scrollToRow, width } = this.props; + + const { instanceProps } = this.state; + + // Reset initial offsets to be ignored in browser + this._initialScrollTop = 0; + this._initialScrollLeft = 0; + + // If cell sizes have been invalidated (eg we are using CellMeasurer) then reset cached positions. + // We must do this at the start of the method as we may calculate and update scroll position below. + this._handleInvalidatedVirtualGridSize(); + + // If this component was first rendered server-side, scrollbar size will be undefined. + // In that event we need to remeasure. + if (!instanceProps.scrollbarSizeMeasured) { + this.setState(prevState => { + const stateUpdate = { ...prevState, needToResetStyleCache: false }; + stateUpdate.instanceProps.scrollbarSize = getScrollbarSize(); + stateUpdate.instanceProps.scrollbarSizeMeasured = true; + return stateUpdate; + }); + } + + if ((typeof scrollLeft === 'number' && scrollLeft >= 0) || (typeof scrollTop === 'number' && scrollTop >= 0)) { + const stateUpdate = VirtualGrid._getScrollToPositionStateUpdate({ + prevState: this.state, + scrollLeft, + scrollTop + }); + if (stateUpdate) { + stateUpdate.needToResetStyleCache = false; + this.setState(stateUpdate); + } + } + + // refs don't work in `react-test-renderer` + if (this._scrollingContainer) { + // setting the ref's scrollLeft and scrollTop. + // Somehow in MultiVirtualGrid the main grid doesn't trigger a update on mount. + if (this._scrollingContainer.scrollLeft !== this.state.scrollLeft) { + this._scrollingContainer.scrollLeft = this.state.scrollLeft; + } + if (this._scrollingContainer.scrollTop !== this.state.scrollTop) { + this._scrollingContainer.scrollTop = this.state.scrollTop; + } + } + + // Don't update scroll offset if the size is 0; we don't render any cells in this case. + // Setting a state may cause us to later thing we've updated the offce when we haven't. + const sizeIsBiggerThanZero = height > 0 && width > 0; + if (scrollToColumn >= 0 && sizeIsBiggerThanZero) { + this._updateScrollLeftForScrollToColumn(); + } + if (scrollToRow >= 0 && sizeIsBiggerThanZero) { + this._updateScrollTopForScrollToRow(); + } + + // Update onRowsRendered callback + this._invokeOnVirtualGridRenderedHelper(); + + // Initialize onScroll callback + this._invokeOnScrollMemoizer({ + scrollLeft: scrollLeft || 0, + scrollTop: scrollTop || 0, + totalColumnsWidth: instanceProps.columnSizeAndPositionManager.getTotalSize(), + totalRowsHeight: instanceProps.rowSizeAndPositionManager.getTotalSize() + }); + + this._maybeCallOnScrollbarPresenceChange(); + } + + /** + * @private + * This method updates scrollLeft/scrollTop in state for the following conditions: + * 1) New scroll-to-cell props have been set + */ + componentDidUpdate(prevProps: Props, prevState: State) { + const { + autoHeight, + autoWidth, + columnCount, + height, + rowCount, + scrollToAlignment, + scrollToColumn, + scrollToRow, + width + } = this.props; + const { scrollLeft, scrollPositionChangeReason, scrollTop, instanceProps } = this.state; + // If cell sizes have been invalidated (eg we are using CellMeasurer) then reset cached positions. + // We must do this at the start of the method as we may calculate and update scroll position below. + this._handleInvalidatedVirtualGridSize(); + + // Handle edge case where column or row count has only just increased over 0. + // In this case we may have to restore a previously-specified scroll offset. + // For more info see bvaughn/react-virtualized/issues/218 + const columnOrRowCountJustIncreasedFromZero = + (columnCount > 0 && prevProps.columnCount === 0) || (rowCount > 0 && prevProps.rowCount === 0); + + // Make sure requested changes to :scrollLeft or :scrollTop get applied. + // Assigning to scrollLeft/scrollTop tells the browser to interrupt any running scroll animations, + // And to discard any pending async changes to the scroll position that may have happened in the meantime (e.g. on a separate scrolling thread). + // So we only set these when we require an adjustment of the scroll position. + // See issue #2 for more information. + if (scrollPositionChangeReason === SCROLL_POSITION_CHANGE_REASONS.REQUESTED) { + // @TRICKY :autoHeight and :autoWidth properties instructs VirtualGrid to leave :scrollTop and :scrollLeft management to an external HOC (eg WindowScroller). + // In this case we should avoid checking scrollingContainer.scrollTop and scrollingContainer.scrollLeft since it forces layout/flow. + if ( + !autoWidth && + scrollLeft >= 0 && + (scrollLeft !== this._scrollingContainer.scrollLeft || columnOrRowCountJustIncreasedFromZero) + ) { + this._scrollingContainer.scrollLeft = scrollLeft; + } + if ( + !autoHeight && + scrollTop >= 0 && + (scrollTop !== this._scrollingContainer.scrollTop || columnOrRowCountJustIncreasedFromZero) + ) { + this._scrollingContainer.scrollTop = scrollTop; + } + } + + // Special case where the previous size was 0: + // In this case we don't show any windowed cells at all. + // So we should always recalculate offset afterwards. + const sizeJustIncreasedFromZero = (prevProps.width === 0 || prevProps.height === 0) && (height > 0 && width > 0); + + // Update scroll offsets if the current :scrollToColumn or :scrollToRow values requires it + // @TODO Do we also need this check or can the one in componentWillUpdate() suffice? + if (this._recomputeScrollLeftFlag) { + this._recomputeScrollLeftFlag = false; + this._updateScrollLeftForScrollToColumn(this.props); + } else { + updateScrollIndexHelper({ + cellSizeAndPositionManager: instanceProps.columnSizeAndPositionManager, + previousCellsCount: prevProps.columnCount, + previousCellSize: prevProps.columnWidth, + previousScrollToAlignment: prevProps.scrollToAlignment, + previousScrollToIndex: prevProps.scrollToColumn, + previousSize: prevProps.width, + scrollOffset: scrollLeft, + scrollToAlignment, + scrollToIndex: scrollToColumn, + size: width, + sizeJustIncreasedFromZero, + updateScrollIndexCallback: () => this._updateScrollLeftForScrollToColumn(this.props) + }); + } + + if (this._recomputeScrollTopFlag) { + this._recomputeScrollTopFlag = false; + this._updateScrollTopForScrollToRow(this.props); + } else { + updateScrollIndexHelper({ + cellSizeAndPositionManager: instanceProps.rowSizeAndPositionManager, + previousCellsCount: prevProps.rowCount, + previousCellSize: prevProps.rowHeight, + previousScrollToAlignment: prevProps.scrollToAlignment, + previousScrollToIndex: prevProps.scrollToRow, + previousSize: prevProps.height, + scrollOffset: scrollTop, + scrollToAlignment, + scrollToIndex: scrollToRow, + size: height, + sizeJustIncreasedFromZero, + updateScrollIndexCallback: () => this._updateScrollTopForScrollToRow(this.props) + }); + } + + // Update onRowsRendered callback if start/stop indices have changed + this._invokeOnVirtualGridRenderedHelper(); + + // Changes to :scrollLeft or :scrollTop should also notify :onScroll listeners + if (scrollLeft !== prevState.scrollLeft || scrollTop !== prevState.scrollTop) { + const totalRowsHeight = instanceProps.rowSizeAndPositionManager.getTotalSize(); + const totalColumnsWidth = instanceProps.columnSizeAndPositionManager.getTotalSize(); + + this._invokeOnScrollMemoizer({ + scrollLeft, + scrollTop, + totalColumnsWidth, + totalRowsHeight + }); + } + + this._maybeCallOnScrollbarPresenceChange(); + } + + componentWillUnmount() { + if (this._disablePointerEventsTimeoutId) { + cancelAnimationTimeout(this._disablePointerEventsTimeoutId); + } + } + + /** + * This method updates scrollLeft/scrollTop in state for the following conditions: + * 1) Empty content (0 rows or columns) + * 2) New scroll props overriding the current state + * 3) Cells-count or cells-size has changed, making previous scroll offsets invalid + */ + static getDerivedStateFromProps(nextProps: Props, prevState: State): $Shape { + const newState = {}; + const { instanceProps } = prevState; + + if ( + (nextProps.columnCount === 0 && prevState.scrollLeft !== 0) || + (nextProps.rowCount === 0 && prevState.scrollTop !== 0) + ) { + newState.scrollLeft = 0; + newState.scrollTop = 0; + + // only use scroll{Left,Top} from props if scrollTo{Column,Row} isn't specified + // scrollTo{Column,Row} should override scroll{Left,Top} + } else if ( + (nextProps.scrollLeft !== instanceProps.prevScrollLeft && nextProps.scrollToColumn < 0) || + (nextProps.scrollTop !== instanceProps.prevScrollTop && nextProps.scrollToRow < 0) + ) { + Object.assign( + newState, + VirtualGrid._getScrollToPositionStateUpdate({ + prevState, + scrollLeft: nextProps.scrollLeft, + scrollTop: nextProps.scrollTop + }) + ); + } + + // Initially we should not clearStyleCache + newState.needToResetStyleCache = false; + if ( + nextProps.columnWidth !== instanceProps.prevColumnWidth || + nextProps.rowHeight !== instanceProps.prevRowHeight + ) { + // Reset cache. set it to {} in render + newState.needToResetStyleCache = true; + } + + instanceProps.columnSizeAndPositionManager.configure({ + cellCount: nextProps.columnCount, + estimatedCellSize: VirtualGrid._getEstimatedColumnSize(nextProps), + cellSizeGetter: VirtualGrid._wrapSizeGetter(nextProps.columnWidth) + }); + + instanceProps.rowSizeAndPositionManager.configure({ + cellCount: nextProps.rowCount, + estimatedCellSize: VirtualGrid._getEstimatedRowSize(nextProps), + cellSizeGetter: VirtualGrid._wrapSizeGetter(nextProps.rowHeight) + }); + + if (instanceProps.prevColumnCount === 0 || instanceProps.prevRowCount === 0) { + instanceProps.prevColumnCount = 0; + instanceProps.prevRowCount = 0; + } + + // If scrolling is controlled outside this component, clear cache when scrolling stops + if (nextProps.autoHeight && nextProps.isScrolling === false && instanceProps.prevIsScrolling === true) { + Object.assign(newState, { + isScrolling: false + }); + } + + let maybeStateA; + let maybeStateB; + + calculateSizeAndPositionDataAndUpdateScrollOffset({ + cellCount: instanceProps.prevColumnCount, + cellSize: typeof instanceProps.prevColumnWidth === 'number' ? instanceProps.prevColumnWidth : null, + computeMetadataCallback: () => instanceProps.columnSizeAndPositionManager.resetCell(0), + computeMetadataCallbackProps: nextProps, + nextCellsCount: nextProps.columnCount, + nextCellSize: typeof nextProps.columnWidth === 'number' ? nextProps.columnWidth : null, + nextScrollToIndex: nextProps.scrollToColumn, + scrollToIndex: instanceProps.prevScrollToColumn, + updateScrollOffsetForScrollToIndex: () => { + maybeStateA = VirtualGrid._getScrollLeftForScrollToColumnStateUpdate(nextProps, prevState); + } + }); + calculateSizeAndPositionDataAndUpdateScrollOffset({ + cellCount: instanceProps.prevRowCount, + cellSize: typeof instanceProps.prevRowHeight === 'number' ? instanceProps.prevRowHeight : null, + computeMetadataCallback: () => instanceProps.rowSizeAndPositionManager.resetCell(0), + computeMetadataCallbackProps: nextProps, + nextCellsCount: nextProps.rowCount, + nextCellSize: typeof nextProps.rowHeight === 'number' ? nextProps.rowHeight : null, + nextScrollToIndex: nextProps.scrollToRow, + scrollToIndex: instanceProps.prevScrollToRow, + updateScrollOffsetForScrollToIndex: () => { + maybeStateB = VirtualGrid._getScrollTopForScrollToRowStateUpdate(nextProps, prevState); + } + }); + + instanceProps.prevColumnCount = nextProps.columnCount; + instanceProps.prevColumnWidth = nextProps.columnWidth; + instanceProps.prevIsScrolling = nextProps.isScrolling === true; + instanceProps.prevRowCount = nextProps.rowCount; + instanceProps.prevRowHeight = nextProps.rowHeight; + instanceProps.prevScrollToColumn = nextProps.scrollToColumn; + instanceProps.prevScrollToRow = nextProps.scrollToRow; + instanceProps.prevScrollLeft = nextProps.scrollLeft; + instanceProps.prevScrollTop = nextProps.scrollTop; + + // getting scrollBarSize (moved from componentWillMount) + instanceProps.scrollbarSize = nextProps.getScrollbarSize(); + if (instanceProps.scrollbarSize === undefined) { + instanceProps.scrollbarSizeMeasured = false; + instanceProps.scrollbarSize = 0; + } else { + instanceProps.scrollbarSizeMeasured = true; + } + + newState.instanceProps = instanceProps; + + return { ...newState, ...maybeStateA, ...maybeStateB }; + } + + render() { + const { + autoContainerWidth, + autoHeight, + autoWidth, + className, + containerProps, + containerRole, + containerStyle, + height, + id, + noContentRenderer, + role, + style, + tabIndex, + width, + scrollContainerComponent, + innerScrollContainerComponent + } = this.props; + const { instanceProps, needToResetStyleCache } = this.state; + + const isScrolling = this._isScrolling(); + + const gridStyle: Object = { + boxSizing: 'border-box', + direction: 'ltr', + height: autoHeight ? 'auto' : height, + position: 'relative', + width: autoWidth ? 'auto' : width, + WebkitOverflowScrolling: 'touch', + willChange: 'transform' + }; + + if (needToResetStyleCache) { + this._styleCache = {}; + } + + // calculate _styleCache here + // if state.isScrolling (not from _isScrolling) then reset + if (!this.state.isScrolling) { + this._resetStyleCache(); + } + + // calculate children to render here + this._calculateChildrenToRender(this.props, this.state); + + const totalColumnsWidth = instanceProps.columnSizeAndPositionManager.getTotalSize(); + const totalRowsHeight = instanceProps.rowSizeAndPositionManager.getTotalSize(); + + // Force browser to hide scrollbars when we know they aren't necessary. + // Otherwise once scrollbars appear they may not disappear again. + // For more info see issue #116 + const verticalScrollBarSize = totalRowsHeight > height ? instanceProps.scrollbarSize : 0; + const horizontalScrollBarSize = totalColumnsWidth > width ? instanceProps.scrollbarSize : 0; + + if ( + horizontalScrollBarSize !== this._horizontalScrollBarSize || + verticalScrollBarSize !== this._verticalScrollBarSize + ) { + this._horizontalScrollBarSize = horizontalScrollBarSize; + this._verticalScrollBarSize = verticalScrollBarSize; + this._scrollbarPresenceChanged = true; + } + + // Also explicitly init styles to 'auto' if scrollbars are required. + // This works around an obscure edge case where external CSS styles have not yet been loaded, + // But an initial scroll index of offset is set as an external prop. + // Without this style, VirtualGrid would render the correct range of cells but would NOT update its internal offset. + // This was originally reported via clauderic/react-infinite-calendar/issues/23 + gridStyle.overflowX = totalColumnsWidth + verticalScrollBarSize <= width ? 'hidden' : 'auto'; + gridStyle.overflowY = totalRowsHeight + horizontalScrollBarSize <= height ? 'hidden' : 'auto'; + + const childrenToDisplay = this._childrenToDisplay; + + const showNoContentRenderer = childrenToDisplay.length === 0 && height > 0 && width > 0; + + const scrollContainerProps = { + ...containerProps, + ref: this._setScrollingContainerRef, + 'aria-label': this.props['aria-label'], + 'aria-readonly': this.props['aria-readonly'], + className: clsx('ReactVirtualized__VirtualGrid', className), + id, + onScroll: this._onScroll, + role, + style: { + ...gridStyle, + ...style + }, + tabIndex + }; + + let innerScrollContainer = null; + if (childrenToDisplay.length > 0) { + const innerScrollContainerProps = { + className: 'ReactVirtualized__VirtualGrid__innerScrollContainer', + key: 'ReactVirtualized__VirtualGrid__innerScrollContainer', + role: containerRole, + style: { + width: autoContainerWidth ? 'auto' : totalColumnsWidth, + height: totalRowsHeight, + maxWidth: totalColumnsWidth, + maxHeight: totalRowsHeight, + overflow: 'hidden', + pointerEvents: isScrolling ? 'none' : '', + position: 'relative', + ...containerStyle + } + }; + innerScrollContainer = React.createElement( + innerScrollContainerComponent, + innerScrollContainerProps, + childrenToDisplay + ); + } + return React.createElement(scrollContainerComponent, scrollContainerProps, [ + innerScrollContainer, + showNoContentRenderer && noContentRenderer() + ]); + } + + /* ---------------------------- Helper methods ---------------------------- */ + + _calculateChildrenToRender(props: Props = this.props, state: State = this.state) { + const { + cellRenderer, + cellRangeRenderer, + columnCount, + deferredMeasurementCache, + height, + overscanColumnCount, + overscanIndicesGetter, + overscanRowCount, + rowCount, + width, + isScrollingOptOut + } = props; + + const { scrollDirectionHorizontal, scrollDirectionVertical, instanceProps } = state; + + const scrollTop = this._initialScrollTop > 0 ? this._initialScrollTop : state.scrollTop; + const scrollLeft = this._initialScrollLeft > 0 ? this._initialScrollLeft : state.scrollLeft; + + const isScrolling = this._isScrolling(props, state); + + this._childrenToDisplay = []; + + // Render only enough columns and rows to cover the visible area of the grid. + if (height > 0 && width > 0) { + const visibleColumnIndices = instanceProps.columnSizeAndPositionManager.getVisibleCellRange({ + containerSize: width, + offset: scrollLeft + }); + const visibleRowIndices = instanceProps.rowSizeAndPositionManager.getVisibleCellRange({ + containerSize: height, + offset: scrollTop + }); + + const horizontalOffsetAdjustment = instanceProps.columnSizeAndPositionManager.getOffsetAdjustment({ + containerSize: width, + offset: scrollLeft + }); + const verticalOffsetAdjustment = instanceProps.rowSizeAndPositionManager.getOffsetAdjustment({ + containerSize: height, + offset: scrollTop + }); + + // Store for _invokeOnVirtualGridRenderedHelper() + this._renderedColumnStartIndex = visibleColumnIndices.start; + this._renderedColumnStopIndex = visibleColumnIndices.stop; + this._renderedRowStartIndex = visibleRowIndices.start; + this._renderedRowStopIndex = visibleRowIndices.stop; + + const overscanColumnIndices = overscanIndicesGetter({ + direction: 'horizontal', + cellCount: columnCount, + overscanCellsCount: overscanColumnCount, + scrollDirection: scrollDirectionHorizontal, + startIndex: typeof visibleColumnIndices.start === 'number' ? visibleColumnIndices.start : 0, + stopIndex: typeof visibleColumnIndices.stop === 'number' ? visibleColumnIndices.stop : -1 + }); + + const overscanRowIndices = overscanIndicesGetter({ + direction: 'vertical', + cellCount: rowCount, + overscanCellsCount: overscanRowCount, + scrollDirection: scrollDirectionVertical, + startIndex: typeof visibleRowIndices.start === 'number' ? visibleRowIndices.start : 0, + stopIndex: typeof visibleRowIndices.stop === 'number' ? visibleRowIndices.stop : -1 + }); + + // Store for _invokeOnVirtualGridRenderedHelper() + let columnStartIndex = overscanColumnIndices.overscanStartIndex; + let columnStopIndex = overscanColumnIndices.overscanStopIndex; + let rowStartIndex = overscanRowIndices.overscanStartIndex; + let rowStopIndex = overscanRowIndices.overscanStopIndex; + + // Advanced use-cases (eg CellMeasurer) require batched measurements to determine accurate sizes. + if (deferredMeasurementCache) { + // If rows have a dynamic height, scan the rows we are about to render. + // If any have not yet been measured, then we need to render all columns initially, + // Because the height of the row is equal to the tallest cell within that row, + // (And so we can't know the height without measuring all column-cells first). + if (!deferredMeasurementCache.hasFixedHeight()) { + for (let rowIndex = rowStartIndex; rowIndex <= rowStopIndex; rowIndex++) { + if (!deferredMeasurementCache.has(rowIndex, 0)) { + columnStartIndex = 0; + columnStopIndex = columnCount - 1; + break; + } + } + } + + // If columns have a dynamic width, scan the columns we are about to render. + // If any have not yet been measured, then we need to render all rows initially, + // Because the width of the column is equal to the widest cell within that column, + // (And so we can't know the width without measuring all row-cells first). + if (!deferredMeasurementCache.hasFixedWidth()) { + for (let columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) { + if (!deferredMeasurementCache.has(0, columnIndex)) { + rowStartIndex = 0; + rowStopIndex = rowCount - 1; + break; + } + } + } + } + + this._childrenToDisplay = cellRangeRenderer({ + cellCache: this._cellCache, + cellRenderer, + columnSizeAndPositionManager: instanceProps.columnSizeAndPositionManager, + columnStartIndex, + columnStopIndex, + deferredMeasurementCache, + horizontalOffsetAdjustment, + isScrolling, + isScrollingOptOut, + parent: this, + rowSizeAndPositionManager: instanceProps.rowSizeAndPositionManager, + rowStartIndex, + rowStopIndex, + scrollLeft, + scrollTop, + styleCache: this._styleCache, + verticalOffsetAdjustment, + visibleColumnIndices, + visibleRowIndices + }); + + // update the indices + this._columnStartIndex = columnStartIndex; + this._columnStopIndex = columnStopIndex; + this._rowStartIndex = rowStartIndex; + this._rowStopIndex = rowStopIndex; + } + } + + /** + * Sets an :isScrolling flag for a small window of time. + * This flag is used to disable pointer events on the scrollable portion of the VirtualGrid. + * This prevents jerky/stuttery mouse-wheel scrolling. + */ + _debounceScrollEnded() { + const { scrollingResetTimeInterval } = this.props; + + if (this._disablePointerEventsTimeoutId) { + cancelAnimationTimeout(this._disablePointerEventsTimeoutId); + } + + this._disablePointerEventsTimeoutId = requestAnimationTimeout( + this._debounceScrollEndedCallback, + scrollingResetTimeInterval + ); + } + + _debounceScrollEndedCallback = () => { + this._disablePointerEventsTimeoutId = null; + // isScrolling is used to determine if we reset styleCache + this.setState({ + isScrolling: false, + needToResetStyleCache: false + }); + }; + + static _getEstimatedColumnSize(props: Props) { + return typeof props.columnWidth === 'number' ? props.columnWidth : props.estimatedColumnSize; + } + + static _getEstimatedRowSize(props: Props) { + return typeof props.rowHeight === 'number' ? props.rowHeight : props.estimatedRowSize; + } + + /** + * Check for batched CellMeasurer size invalidations. + * This will occur the first time one or more previously unmeasured cells are rendered. + */ + _handleInvalidatedVirtualGridSize() { + if ( + typeof this._deferredInvalidateColumnIndex === 'number' && + typeof this._deferredInvalidateRowIndex === 'number' + ) { + const columnIndex = this._deferredInvalidateColumnIndex; + const rowIndex = this._deferredInvalidateRowIndex; + + this._deferredInvalidateColumnIndex = null; + this._deferredInvalidateRowIndex = null; + + this.recomputeVirtualGridSize({ columnIndex, rowIndex }); + } + } + + _invokeOnVirtualGridRenderedHelper = () => { + const { onSectionRendered } = this.props; + + this._onVirtualGridRenderedMemoizer({ + callback: onSectionRendered, + indices: { + columnOverscanStartIndex: this._columnStartIndex, + columnOverscanStopIndex: this._columnStopIndex, + columnStartIndex: this._renderedColumnStartIndex, + columnStopIndex: this._renderedColumnStopIndex, + rowOverscanStartIndex: this._rowStartIndex, + rowOverscanStopIndex: this._rowStopIndex, + rowStartIndex: this._renderedRowStartIndex, + rowStopIndex: this._renderedRowStopIndex + } + }); + }; + + _invokeOnScrollMemoizer({ + scrollLeft, + scrollTop, + totalColumnsWidth, + totalRowsHeight + }: { + scrollLeft: number, + scrollTop: number, + totalColumnsWidth: number, + totalRowsHeight: number + }) { + this._onScrollMemoizer({ + callback: ({ scrollLeft, scrollTop }) => { + const { height, onScroll, width } = this.props; + + onScroll({ + clientHeight: height, + clientWidth: width, + scrollHeight: totalRowsHeight, + scrollLeft, + scrollTop, + scrollWidth: totalColumnsWidth + }); + }, + indices: { + scrollLeft, + scrollTop + } + }); + } + + _isScrolling(props: Props = this.props, state: State = this.state): boolean { + // If isScrolling is defined in props, use it to override the value in state + // This is a performance optimization for WindowScroller + VirtualGrid + return Object.hasOwnProperty.call(props, 'isScrolling') ? Boolean(props.isScrolling) : Boolean(state.isScrolling); + } + + _maybeCallOnScrollbarPresenceChange() { + if (this._scrollbarPresenceChanged) { + const { onScrollbarPresenceChange } = this.props; + + this._scrollbarPresenceChanged = false; + + onScrollbarPresenceChange({ + horizontal: this._horizontalScrollBarSize > 0, + size: this.state.instanceProps.scrollbarSize, + vertical: this._verticalScrollBarSize > 0 + }); + } + } + + _setScrollingContainerRef = (ref: Element) => { + this._scrollingContainer = ref; + }; + + /** + * Get the updated state after scrolling to + * scrollLeft and scrollTop + */ + static _getScrollToPositionStateUpdate({ + prevState, + scrollLeft, + scrollTop + }: { + prevState: State, + scrollLeft?: number, + scrollTop?: number + }): $Shape { + const newState: Object = { + scrollPositionChangeReason: SCROLL_POSITION_CHANGE_REASONS.REQUESTED + }; + + if (typeof scrollLeft === 'number' && scrollLeft >= 0) { + newState.scrollDirectionHorizontal = + scrollLeft > prevState.scrollLeft ? SCROLL_DIRECTION_FORWARD : SCROLL_DIRECTION_BACKWARD; + newState.scrollLeft = scrollLeft; + } + + if (typeof scrollTop === 'number' && scrollTop >= 0) { + newState.scrollDirectionVertical = + scrollTop > prevState.scrollTop ? SCROLL_DIRECTION_FORWARD : SCROLL_DIRECTION_BACKWARD; + newState.scrollTop = scrollTop; + } + + if ( + (typeof scrollLeft === 'number' && scrollLeft >= 0 && scrollLeft !== prevState.scrollLeft) || + (typeof scrollTop === 'number' && scrollTop >= 0 && scrollTop !== prevState.scrollTop) + ) { + return newState; + } + return null; + } + + /** + * Scroll to the specified offset(s). + * Useful for animating position changes. + */ + scrollToPosition({ scrollLeft, scrollTop }: ScrollPosition) { + const stateUpdate = VirtualGrid._getScrollToPositionStateUpdate({ + prevState: this.state, + scrollLeft, + scrollTop + }); + + if (stateUpdate) { + stateUpdate.needToResetStyleCache = false; + this.setState(stateUpdate); + } + } + + static _wrapSizeGetter(value: CellSize): CellSizeGetter { + return typeof value === 'function' ? value : () => (value: any); + } + + static _getCalculatedScrollLeft(nextProps: Props, prevState: State) { + const { columnCount, height, scrollToAlignment, scrollToColumn, width } = nextProps; + const { scrollLeft, instanceProps } = prevState; + + if (columnCount > 0) { + const finalColumn = columnCount - 1; + const targetIndex = scrollToColumn < 0 ? finalColumn : Math.min(finalColumn, scrollToColumn); + const totalRowsHeight = instanceProps.rowSizeAndPositionManager.getTotalSize(); + const scrollBarSize = + instanceProps.scrollbarSizeMeasured && totalRowsHeight > height ? instanceProps.scrollbarSize : 0; + + return instanceProps.columnSizeAndPositionManager.getUpdatedOffsetForIndex({ + align: scrollToAlignment, + containerSize: width - scrollBarSize, + currentOffset: scrollLeft, + targetIndex + }); + } + return 0; + } + + _getCalculatedScrollLeft(props: Props = this.props, state: State = this.state) { + return VirtualGrid._getCalculatedScrollLeft(props, state); + } + + static _getScrollLeftForScrollToColumnStateUpdate(nextProps: Props, prevState: State): $Shape { + const { scrollLeft } = prevState; + const calculatedScrollLeft = VirtualGrid._getCalculatedScrollLeft(nextProps, prevState); + + if (typeof calculatedScrollLeft === 'number' && calculatedScrollLeft >= 0 && scrollLeft !== calculatedScrollLeft) { + return VirtualGrid._getScrollToPositionStateUpdate({ + prevState, + scrollLeft: calculatedScrollLeft, + scrollTop: -1 + }); + } + return null; + } + + _updateScrollLeftForScrollToColumn(props: Props = this.props, state: State = this.state) { + const stateUpdate = VirtualGrid._getScrollLeftForScrollToColumnStateUpdate(props, state); + if (stateUpdate) { + stateUpdate.needToResetStyleCache = false; + this.setState(stateUpdate); + } + } + + static _getCalculatedScrollTop(nextProps: Props, prevState: State) { + const { height, rowCount, scrollToAlignment, scrollToRow, width } = nextProps; + const { scrollTop, instanceProps } = prevState; + + if (rowCount > 0) { + const finalRow = rowCount - 1; + const targetIndex = scrollToRow < 0 ? finalRow : Math.min(finalRow, scrollToRow); + const totalColumnsWidth = instanceProps.columnSizeAndPositionManager.getTotalSize(); + const scrollBarSize = + instanceProps.scrollbarSizeMeasured && totalColumnsWidth > width ? instanceProps.scrollbarSize : 0; + + return instanceProps.rowSizeAndPositionManager.getUpdatedOffsetForIndex({ + align: scrollToAlignment, + containerSize: height - scrollBarSize, + currentOffset: scrollTop, + targetIndex + }); + } + return 0; + } + + _getCalculatedScrollTop(props: Props = this.props, state: State = this.state) { + return VirtualGrid._getCalculatedScrollTop(props, state); + } + + _resetStyleCache() { + const styleCache = this._styleCache; + const cellCache = this._cellCache; + const { isScrollingOptOut } = this.props; + + // Reset cell and style caches once scrolling stops. + // This makes VirtualGrid simpler to use (since cells commonly change). + // And it keeps the caches from growing too large. + // Performance is most sensitive when a user is scrolling. + // Don't clear visible cells from cellCache if isScrollingOptOut is specified. + // This keeps the cellCache to a resonable size. + this._cellCache = {}; + this._styleCache = {}; + + // Copy over the visible cell styles so avoid unnecessary re-render. + for (let rowIndex = this._rowStartIndex; rowIndex <= this._rowStopIndex; rowIndex++) { + for (let columnIndex = this._columnStartIndex; columnIndex <= this._columnStopIndex; columnIndex++) { + const key = `${rowIndex}-${columnIndex}`; + this._styleCache[key] = styleCache[key]; + + if (isScrollingOptOut) { + this._cellCache[key] = cellCache[key]; + } + } + } + } + + static _getScrollTopForScrollToRowStateUpdate(nextProps: Props, prevState: State): $Shape { + const { scrollTop } = prevState; + const calculatedScrollTop = VirtualGrid._getCalculatedScrollTop(nextProps, prevState); + + if (typeof calculatedScrollTop === 'number' && calculatedScrollTop >= 0 && scrollTop !== calculatedScrollTop) { + return VirtualGrid._getScrollToPositionStateUpdate({ + prevState, + scrollLeft: -1, + scrollTop: calculatedScrollTop + }); + } + return null; + } + + _updateScrollTopForScrollToRow(props: Props = this.props, state: State = this.state) { + const stateUpdate = VirtualGrid._getScrollTopForScrollToRowStateUpdate(props, state); + if (stateUpdate) { + stateUpdate.needToResetStyleCache = false; + this.setState(stateUpdate); + } + } + + _onScroll = (event: Event) => { + // In certain edge-cases React dispatches an onScroll event with an invalid target.scrollLeft / target.scrollTop. + // This invalid event can be detected by comparing event.target to this component's scrollable DOM element. + // See issue #404 for more information. + if (event.target === this._scrollingContainer) { + this.handleScrollEvent((event.target: any)); + } + }; +} + +polyfill(VirtualGrid); +export default VirtualGrid; diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualTableBody.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualTableBody.js new file mode 100644 index 00000000000..02180fc3760 --- /dev/null +++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualTableBody.js @@ -0,0 +1,288 @@ +/** @flow */ +/* eslint-disable */ + +import * as React from 'react'; +import type { + NoContentRenderer, + Alignment, + CellSize, + CellPosition, + OverscanIndicesGetter, + RenderedSection, + CellRendererParams, + Scroll as VirtualGridScroll, + RowRenderer, + RenderedRows, + Scroll +} from './types'; + +import accessibilityOverscanIndicesGetter from './accessibilityOverscanIndicesGetter'; +import VirtualGrid from './VirtualGrid'; +import clsx from 'clsx'; + +/** + * It is inefficient to create and manage a large list of DOM elements within a scrolling container + * if only a few of those elements are visible. The primary purpose of this component is to improve + * performance by only rendering the DOM nodes that a user is able to see based on their current + * scroll position. + * + * This component renders a virtualized list of elements with either fixed or dynamic heights. + */ + +type Props = { + 'aria-label'?: string, + + /** + * Removes fixed height from the scrollingContainer so that the total height + * of rows can stretch the window. Intended for use with WindowScroller + */ + autoHeight: boolean, + + /** Optional CSS class name */ + className?: string, + + /** + * 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. + */ + estimatedRowSize: number, + + /** Height constraint for list (determines how many actual rows are rendered) */ + height: number, + + /** Optional renderer to be used in place of rows when rowCount is 0 */ + noRowsRenderer: NoContentRenderer, + + /** Callback invoked with information about the slice of rows that were just rendered. */ + + onRowsRendered: (params: RenderedRows) => void, + + /** + * Callback invoked whenever the scroll offset changes within the inner scrollable region. + * This callback can be used to sync scrolling between lists, tables, or grids. + */ + onScroll: (params: Scroll) => void, + + /** See VirtualGrid#overscanIndicesGetter */ + overscanIndicesGetter: OverscanIndicesGetter, + + /** + * Number of rows to render above/below the visible bounds of the list. + * These rows can help for smoother scrolling on touch devices. + */ + overscanRowCount: number, + + /** Either a fixed row height (number) or a function that returns the height of a row given its index. */ + rowHeight: CellSize, + + /** Responsible for rendering a row given an index; ({ index: number }): node */ + rowRenderer: RowRenderer, + + /** Number of rows in list. */ + rowCount: number, + + /** See VirtualGrid#scrollToAlignment */ + scrollToAlignment: Alignment, + + /** Row index to ensure visible (by forcefully scrolling if necessary) */ + scrollToIndex: number, + + /** Vertical offset. */ + scrollTop?: number, + + /** Optional inline style */ + style: Object, + + /** Tab index for focus */ + tabIndex?: number, + + /** Width of list */ + width: number, + + columns: Array, + + rows: Array +}; + +export default class VirtualTableBody extends React.PureComponent { + static defaultProps = { + autoHeight: false, + estimatedRowSize: 30, + onScroll: () => {}, + noRowsRenderer: () => null, + onRowsRendered: () => {}, + overscanIndicesGetter: accessibilityOverscanIndicesGetter, + overscanRowCount: 10, + scrollToAlignment: 'auto', + scrollToIndex: -1, + style: {} + }; + + VirtualGrid: ?React.ElementRef; + + forceUpdateVirtualGrid() { + if (this.VirtualGrid) { + this.VirtualGrid.forceUpdate(); + } + } + + /** See VirtualGrid#getOffsetForCell */ + getOffsetForRow({ alignment, index }: { alignment: Alignment, index: number }) { + if (this.VirtualGrid) { + const { scrollTop } = this.VirtualGrid.getOffsetForCell({ + alignment, + rowIndex: index, + columnIndex: 0 + }); + + return scrollTop; + } + return 0; + } + + /** CellMeasurer compatibility */ + invalidateCellSizeAfterRender({ columnIndex, rowIndex }: CellPosition) { + if (this.VirtualGrid) { + this.VirtualGrid.invalidateCellSizeAfterRender({ + rowIndex, + columnIndex + }); + } + } + + /** See VirtualGrid#measureAllCells */ + measureAllRows() { + if (this.VirtualGrid) { + this.VirtualGrid.measureAllCells(); + } + } + + /** CellMeasurer compatibility */ + recomputeVirtualGridSize({ columnIndex = 0, rowIndex = 0 }: CellPosition = {}) { + if (this.VirtualGrid) { + this.VirtualGrid.recomputeVirtualGridSize({ + rowIndex, + columnIndex + }); + } + } + + /** See VirtualGrid#recomputeVirtualGridSize */ + recomputeRowHeights(index: number = 0) { + if (this.VirtualGrid) { + this.VirtualGrid.recomputeVirtualGridSize({ + rowIndex: index, + columnIndex: 0 + }); + } + } + + /** See VirtualGrid#scrollToPosition */ + scrollToPosition(scrollTop: number = 0) { + if (this.VirtualGrid) { + this.VirtualGrid.scrollToPosition({ scrollTop }); + } + } + + /** See VirtualGrid#scrollToCell */ + scrollToRow(index: number = 0) { + if (this.VirtualGrid) { + this.VirtualGrid.scrollToCell({ + columnIndex: 0, + rowIndex: index + }); + } + } + + render() { + const { className, noRowsRenderer, scrollToIndex, width, columns, rows, tabIndex, style } = this.props; + + const classNames = clsx('ReactVirtualized__List', className); + + return ( + // note: these aria props if rendered will break a11y for role="presentation" + // this approach attempts to fix non standard table grids + // see: https://www.html5accessibility.com/tests/aria-table-fix.html + + ); + } + + _cellRenderer = ({ parent, rowIndex, style, isScrolling, isVisible, key }: CellRendererParams) => { + const { rowRenderer } = this.props; + + // TRICKY The style object is sometimes cached by VirtualGrid. + // This prevents new style objects from bypassing shallowCompare(). + // However as of React 16, style props are auto-frozen (at least in dev mode) + // Check to make sure we can still modify the style before proceeding. + // https://github.com/facebook/react/commit/977357765b44af8ff0cfea327866861073095c12#commitcomment-20648713 + const { writable } = Object.getOwnPropertyDescriptor(style, 'width'); + if (writable) { + // By default, List cells should be 100% width. + // This prevents them from flowing under a scrollbar (if present). + style.width = '100%'; + } + + return rowRenderer({ + index: rowIndex, + style, + isScrolling, + isVisible, + key, + parent + }); + }; + + _setRef = (ref: ?React.ElementRef) => { + this.VirtualGrid = ref; + }; + + _onScroll = ({ clientHeight, scrollHeight, scrollTop }: VirtualGridScroll) => { + const { onScroll } = this.props; + + onScroll({ clientHeight, scrollHeight, scrollTop }); + }; + + _onSectionRendered = ({ + rowOverscanStartIndex, + rowOverscanStopIndex, + rowStartIndex, + rowStopIndex + }: RenderedSection) => { + const { onRowsRendered } = this.props; + + onRowsRendered({ + overscanStartIndex: rowOverscanStartIndex, + overscanStopIndex: rowOverscanStopIndex, + startIndex: rowStartIndex, + stopIndex: rowStopIndex + }); + }; +} diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/Virtualized.md b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/Virtualized.md new file mode 100644 index 00000000000..73ced06a489 --- /dev/null +++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/Virtualized.md @@ -0,0 +1,590 @@ +--- +title: 'Table' +section: 'Virtual Scroll' +--- + +import clsx from 'clsx'; +import PropTypes from 'prop-types'; +import * as React from 'react'; +import { ActionsColumn, Table, TableHeader, TableGridBreakpoint, headerCol, sortable, SortByDirection } from '@patternfly/react-table'; +import { CellMeasurerCache, CellMeasurer} from 'react-virtualized'; +import { AutoSizer, VirtualTableBody } from '@patternfly/react-virtualized-extension'; +import UUID from 'uuid/v1'; +import virtualGridStyles from './VirtualGrid.example.css'; + + +## Simple Example + +```js +import clsx from 'clsx'; +import PropTypes from 'prop-types'; +import * as React from 'react'; +import { Table, TableHeader, TableGridBreakpoint } from '@patternfly/react-table'; +import { CellMeasurerCache, CellMeasurer} from 'react-virtualized'; +import { AutoSizer, VirtualTableBody } from '@patternfly/react-virtualized-extension'; +import virtualGridStyles from './VirtualGrid.example.css'; + +class VirtualizedExample extends React.Component { + constructor(){ + const rows = []; + for (let i = 0; i < 100; i++) { + rows.push({ + id: UUID(), + cells: [`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`] + }); + } + + this.state = { + columns: [ + { title: 'Repositories', props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl'} }, + { title: 'Branches', props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl'} }, + { title: 'Pull requests', props: { className: 'pf-m-4-col-on-md pf-m-4-col-on-lg pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-md'} }, + { title: 'Workspaces', props: { className: 'pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-lg'} }, + { title: 'Last Commit', props: { className: 'pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-xl'} } + ], + rows + }; + this._handleResize = this._handleResize.bind(this); + } + + componentDidMount(){ + // re-render after resize + window.addEventListener('resize', this._handleResize); + } + + componentWillUnmount(){ + window.removeEventListener('resize', this._handleResize); + } + + _handleResize() { + this.forceUpdate(); + } + + render() { + const {columns, rows} = this.state; + + const measurementCache = new CellMeasurerCache({ + fixedWidth: true, + minHeight: 44, + keyMapper: rowIndex => rowIndex + }); + + const rowRenderer = ({index, isScrolling, isVisible, key, style, parent}) => { + const {rows, columns} = this.state; + const text = rows[index].cells[0]; + + const className = clsx({ + isVisible: isVisible + }); + + // do not render non visible elements (this excludes overscan) + if(!isVisible){ + return null; + } + return + + {text} + {text} + {text} + {text} + {text} + + ; + } + + return ( +
+ + +
+ + {({width}) => ( + + )} + +
+ ); + } +} + +export default VirtualizedExample; +``` + +## Sortable Example + +```js +import clsx from 'clsx'; +import PropTypes from 'prop-types'; +import * as React from 'react'; +import { Table, TableHeader, sortable, SortByDirection, TableGridBreakpoint } from '@patternfly/react-table'; +import { CellMeasurerCache, CellMeasurer} from 'react-virtualized'; +import { AutoSizer, VirtualTableBody } from '@patternfly/react-virtualized-extension'; +import virtualGridStyles from './VirtualGrid.example.css'; + +class SortableExample extends React.Component { + constructor(){ + const rows = []; + for (let i = 0; i < 100; i++) { + rows.push({ + id: UUID(), + cells: [`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`] + }); + } + + this.sortableVirtualBody = null; + + this.state = { + columns: [ + { title: 'Repositories', transforms: [sortable], props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl'} }, + { title: 'Branches', props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl'} }, + { title: 'Pull requests', transforms: [sortable], props: { className: 'pf-m-4-col-on-md pf-m-4-col-on-lg pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-md'} }, + { title: 'Workspaces', props: { className: 'pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-lg'} }, + { title: 'Last Commit', props: { className: 'pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-xl'} } + ], + rows, + sortBy: {} + }; + + this.onSort = this.onSort.bind(this); + this._handleResize = this._handleResize.bind(this); + } + + componentDidMount(){ + // re-render after resize + window.addEventListener('resize', this._handleResize); + } + + componentWillUnmount(){ + window.removeEventListener('resize', this._handleResize); + } + + _handleResize() { + this.forceUpdate(); + } + + onSort(_event, index, direction) { + const sortedRows = this.state.rows.sort((a, b) => + a.cells[index] < b.cells[index] ? -1 : a.cells[index] > b.cells[index] ? 1 : 0 + ); + this.setState({ + sortBy: { + index, + direction + }, + rows: direction === SortByDirection.asc ? sortedRows : sortedRows.reverse() + }); + + this.sortableVirtualBody.forceUpdateVirtualGrid(); + } + + render() { + const {sortBy, columns, rows} = this.state; + + const measurementCache = new CellMeasurerCache({ + fixedWidth: true, + minHeight: 44, + keyMapper: rowIndex => rowIndex + }); + + const rowRenderer = ({index, isScrolling, isVisible, key, style, parent}) => { + const {rows, columns} = this.state; + const text = rows[index].cells[0]; + + const className = clsx({ + isVisible: isVisible + }); + + // do not render non visible elements (this excludes overscan) + if(!isVisible){ + return null; + } + return + + {text} + {text} + {text} + {text} + {text} + + ; + } + + return ( +
+ + +
+ + {({width}) => ( + this.sortableVirtualBody = ref} + className={'pf-c-table pf-c-virtualized pf-c-window-scroller'} + deferredMeasurementCache={measurementCache} + rowHeight={measurementCache.rowHeight} + height={400} + overscanRowCount={2} + columns={columns} + rows={rows} + rowCount={rows.length} + rowRenderer={rowRenderer} + width={width} + /> + )} + +
+ ); + } +} + +export default SortableExample; +``` + +## Selectable Example + +```js +import clsx from 'clsx'; +import PropTypes from 'prop-types'; +import * as React from 'react'; +import { Table, TableHeader, headerCol, TableGridBreakpoint } from '@patternfly/react-table'; +import { CellMeasurerCache, CellMeasurer} from 'react-virtualized'; +import { AutoSizer, VirtualTableBody } from '@patternfly/react-virtualized-extension'; +import virtualGridStyles from './VirtualGrid.example.css'; + +class SelectableExample extends React.Component { + constructor(){ + const rows = []; + for (let i = 0; i < 100; i++) { + rows.push({ + selected: false, + id: UUID(), + cells: [`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`] + }); + } + + this.selectableVirtualBody = null; + + this.state = { + columns: [ + //headerCol transform adds checkbox column with pf-m-2-sm, pf-m-1-md+ column space + { title: 'Repositories', cellTransforms: [headerCol()], props: { className: 'pf-m-5-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl'} }, + { title: 'Pull requests', props: { className: 'pf-m-5-col-on-sm pf-m-4-col-on-md pf-m-4-col-on-lg pf-m-3-col-on-xl'} }, + { title: 'Workspaces', props: { className: 'pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-lg'} }, + { title: 'Last Commit', props: { className: 'pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-xl'} } + ], + rows + }; + + this.onSelect = this.onSelect.bind(this); + this._handleResize = this._handleResize.bind(this); + } + + componentDidMount(){ + // re-render after resize + window.addEventListener('resize', this._handleResize); + } + + componentWillUnmount(){ + window.removeEventListener('resize', this._handleResize); + } + + _handleResize() { + this.forceUpdate(); + } + + onSelect(event, isSelected, virtualRowIndex, rowData) { + let rows; + if (virtualRowIndex === -1) { + rows = this.state.rows.map(oneRow => { + oneRow.selected = isSelected; + return oneRow; + }); + } else { + rows = [...this.state.rows]; + const rowIndex = rows.findIndex(r => r.id === rowData.id); + rows[rowIndex].selected = isSelected; + } + this.setState({ + rows + }); + this.selectableVirtualBody.forceUpdateVirtualGrid(); + } + + render() { + const {columns, rows} = this.state; + + const measurementCache = new CellMeasurerCache({ + fixedWidth: true, + minHeight: 44, + keyMapper: rowIndex => rowIndex + }); + + const rowRenderer = ({index, isScrolling, isVisible, key, style, parent}) => { + const {rows, columns} = this.state; + const text = rows[index].cells[0]; + + const className = clsx({ + isVisible: isVisible + }); + + // do not render non visible elements (this excludes overscan) + if(!isVisible){ + return null; + } + return + + + + { this.onSelect(e, e.target.checked, 0, {id: rows[index].id})}} + /> + + {text} + {text} + {text} + {text} + + ; + } + + return ( +
+ + +
+ + {({width}) => ( + this.selectableVirtualBody = ref} + className={'pf-c-table pf-c-virtualized pf-c-window-scroller'} + deferredMeasurementCache={measurementCache} + rowHeight={measurementCache.rowHeight} + height={400} + overscanRowCount={2} + columns={columns} + rows={rows} + rowCount={rows.length} + rowRenderer={rowRenderer} + width={width} + /> + )} + +
+ ); + } +} + +export default SelectableExample; +``` + +## Actions Example + +```js +import clsx from 'clsx'; +import PropTypes from 'prop-types'; +import * as React from 'react'; +import { ActionsColumn, Table, TableHeader, TableGridBreakpoint } from '@patternfly/react-table'; +import { CellMeasurerCache, CellMeasurer} from 'react-virtualized'; +import { AutoSizer, VirtualTableBody } from '@patternfly/react-virtualized-extension'; +import virtualGridStyles from './VirtualGrid.example.css'; + +class ActionsExample extends React.Component { + constructor(){ + const rows = []; + for (let i = 0; i < 100; i++) { + rows.push({ + disableActions: i % 3 === 2, + id: UUID(), + cells: [`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`] + }); + } + + this.actionsVirtualBody = null; + + this.state = { + columns: [ + { title: 'Name', props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl'} }, + { title: 'Namespace', props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl'} }, + { title: 'Labels', props: { className: 'pf-m-4-col-on-md pf-m-4-col-on-lg pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-md'} }, + { title: 'Status', props: { className: 'pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-lg'} }, + { title: 'Pod Selector', props: { className: 'pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-xl'} }, + { title: '', props: { className: 'pf-c-table__action'}}, + ], + rows, + actions: [ + { + title: 'Some action', + onClick: (event, rowId, rowData, extra) => console.log('clicked on Some action, on row: ', rowId) + }, + { + title:
Another action
, + onClick: (event, rowId, rowData, extra) => console.log('clicked on Another action, on row: ', rowId) + }, + { + isSeparator: true + }, + { + title: 'Third action', + onClick: (event, rowId, rowData, extra) => console.log('clicked on Third action, on row: ', rowId) + } + ] + }; + + this._handleResize = this._handleResize.bind(this); + } + + componentDidMount(){ + // re-render after resize + window.addEventListener('resize', this._handleResize); + } + + componentWillUnmount(){ + window.removeEventListener('resize', this._handleResize); + } + + _handleResize() { + this.forceUpdate(); + } + + render() { + const {columns, rows} = this.state; + + const measurementCache = new CellMeasurerCache({ + fixedWidth: true, + minHeight: 44, + keyMapper: rowIndex => rowIndex + }); + + const rowRenderer = ({index, isScrolling, isVisible, key, style, parent}) => { + const {rows, columns, actions} = this.state; + const text = rows[index].cells[0]; + + const className = clsx({ + isVisible: isVisible + }); + + // do not render non visible elements (this excludes overscan) + if(!isVisible){ + return null; + } + return + + {text} + {text} + {text} + {text} + {text} + + + + + ; + } + + return ( +
+ + +
+ + {({width}) => ( + this.actionsVirtualBody = ref} + className={'pf-c-table pf-c-virtualized pf-c-window-scroller'} + deferredMeasurementCache={measurementCache} + rowHeight={measurementCache.rowHeight} + height={400} + overscanRowCount={2} + columns={columns} + rows={rows} + rowCount={rows.length} + rowRenderer={rowRenderer} + width={width} + /> + )} + +
+ ); + } +} + +export default ActionsExample; +``` \ No newline at end of file diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/WindowScroller.example.css b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/WindowScroller.example.css new file mode 100644 index 00000000000..70b69c40208 --- /dev/null +++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/WindowScroller.example.css @@ -0,0 +1,7 @@ +.pf-c-window-scroller .ReactVirtualized__VirtualGrid { + overflow: visible !important; +} + +.pf-c-window-scroller .ReactVirtualized__VirtualGrid__innerScrollContainer { + overflow: visible !important; +} \ No newline at end of file diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/WindowScroller.md b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/WindowScroller.md new file mode 100644 index 00000000000..1ab9a27f098 --- /dev/null +++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/WindowScroller.md @@ -0,0 +1,182 @@ +--- +title: 'Window Scroller' +section: 'Virtual Scroll' +--- + +import clsx from 'clsx'; +import PropTypes from 'prop-types'; +import * as React from 'react'; +import { Table, TableHeader, TableGridBreakpoint } from '@patternfly/react-table'; +import { CellMeasurerCache, CellMeasurer } from 'react-virtualized'; +import { AutoSizer, VirtualTableBody, WindowScroller } from '@patternfly/react-virtualized-extension'; +import UUID from 'uuid/v1'; +import virtualGridStyles from './VirtualGrid.example.css'; +import windowScrollerStyles from './WindowScroller.example.css'; + +## Window Scroller Example + +```js +import clsx from 'clsx'; +import PropTypes from 'prop-types'; +import * as React from 'react'; +import { Table, TableHeader, TableGridBreakpoint } from '@patternfly/react-table'; +import { CellMeasurerCache, CellMeasurer } from 'react-virtualized'; +import { AutoSizer, VirtualTable, WindowScroller } from '@patternfly/react-virtualized-extension'; +import virtualGridStyles from './VirtualGrid.example.css'; +import windowScrollerStyles from './WindowScroller.example.css'; + +class WindowScrollerExample extends React.Component { + constructor(){ + const rows = []; + for (let i = 0; i < 100000; i++) { + const cells = []; + const num = Math.floor(Math.random() * Math.floor(2)) + 1; + for (let j = 0; j < 5; j++) { + const cellValue = i.toString() + ' Arma virumque cano Troiae qui primus ab oris. '.repeat(num); + cells.push(cellValue); + } + rows.push({ + id: UUID(), + cells + }); + } + + this.scrollableElement = React.createRef(); + + this.state = { + scrollToIndex: -1, //can be used to programmatically set current index + scrollableElement: null, + columns: [ + { title: 'Repositories', props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl'} }, + { title: 'Branches', props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl'} }, + { title: 'Pull requests', props: { className: 'pf-m-4-col-on-md pf-m-4-col-on-lg pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-md'} }, + { title: 'Workspaces', props: { className: 'pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-lg'} }, + { title: 'Last Commit', props: { className: 'pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-xl'} } + ], + rows + }; + + this._handleResize = this._handleResize.bind(this); + } + + componentDidMount(){ + // re-render after resize + window.addEventListener('resize', this._handleResize); + } + + componentDidMount(){ + setTimeout(() => { + const scollableElement = document.getElementById('content-scrollable-1'); + this.setState({ scollableElement }); + }); + + // re-render after resize + window.addEventListener('resize', this._handleResize); + } + + componentWillUnmount(){ + window.removeEventListener('resize', this._handleResize); + } + + _handleResize() { + this.forceUpdate(); + } + + render() { + const {scrollToIndex, columns, rows, scollableElement} = this.state; + + const measurementCache = new CellMeasurerCache({ + fixedWidth: true, + minHeight: 44, + keyMapper: rowIndex => rowIndex + }); + + const rowRenderer = ({index, isScrolling, isVisible, key, style, parent}) => { + const {rows, columns} = this.state; + const text = rows[index].cells[0]; + + const className = clsx({ + isVisible: isVisible + }); + + // do not render non visible elements (this excludes overscan) + if(!isVisible){ + return null; + } + return + + {text} + {text} + {text} + {text} + {text} + + ; + } + + return ( +
+
{/* WindowScroller scrollbar gutter spacing */} + + +
+ + {({height, isScrolling, registerChild, onChildScroll, scrollTop}) => ( + + {({width}) => ( +
+ +
+ )} + + )} + +
+
+ ); + } +} + +export default WindowScrollerExample; +``` diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/accessibilityOverscanIndicesGetter.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/accessibilityOverscanIndicesGetter.js new file mode 100644 index 00000000000..24cb2384f7a --- /dev/null +++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/accessibilityOverscanIndicesGetter.js @@ -0,0 +1,38 @@ +// @flow + +import type { OverscanIndicesGetterParams, OverscanIndices } from './types'; + +export const SCROLL_DIRECTION_BACKWARD = -1; +export const SCROLL_DIRECTION_FORWARD = 1; + +export const SCROLL_DIRECTION_HORIZONTAL = 'horizontal'; +export const SCROLL_DIRECTION_VERTICAL = 'vertical'; + +/** + * Calculates the number of cells to overscan before and after a specified range. + * This function ensures that overscanning doesn't exceed the available cells. + */ + +export default function defaultOverscanIndicesGetter({ + cellCount, + overscanCellsCount, + scrollDirection, + startIndex, + stopIndex +}: OverscanIndicesGetterParams): OverscanIndices { + // Make sure we render at least 1 cell extra before and after (except near boundaries) + // This is necessary in order to support keyboard navigation (TAB/SHIFT+TAB) in some cases + // For more info see issues #625 + overscanCellsCount = Math.max(1, overscanCellsCount); + + if (scrollDirection === SCROLL_DIRECTION_FORWARD) { + return { + overscanStartIndex: Math.max(0, startIndex - 1), + overscanStopIndex: Math.min(cellCount - 1, stopIndex + overscanCellsCount) + }; + } + return { + overscanStartIndex: Math.max(0, startIndex - overscanCellsCount), + overscanStopIndex: Math.min(cellCount - 1, stopIndex + 1) + }; +} diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultCellRangeRenderer.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultCellRangeRenderer.js new file mode 100644 index 00000000000..857546d5216 --- /dev/null +++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultCellRangeRenderer.js @@ -0,0 +1,156 @@ +/** @flow */ +/* eslint-disable */ + +import type { CellRangeRendererParams } from './types'; + +/** + * Default implementation of cellRangeRenderer used by Grid. + * This renderer supports cell-caching while the user is scrolling. + */ + +export default function defaultCellRangeRenderer({ + cellCache, + cellRenderer, + columnSizeAndPositionManager, + columnStartIndex, + columnStopIndex, + deferredMeasurementCache, + horizontalOffsetAdjustment, + isScrolling, + isScrollingOptOut, + parent, // Grid (or List or Table) + rowSizeAndPositionManager, + rowStartIndex, + rowStopIndex, + styleCache, + verticalOffsetAdjustment, + visibleColumnIndices, + visibleRowIndices +}: CellRangeRendererParams) { + const renderedCells = []; + + // Browsers have native size limits for elements (eg Chrome 33M pixels, IE 1.5M pixes). + // User cannot scroll beyond these size limitations. + // In order to work around this, ScalingCellSizeAndPositionManager compresses offsets. + // We should never cache styles for compressed offsets though as this can lead to bugs. + // See issue #576 for more. + const areOffsetsAdjusted = + columnSizeAndPositionManager.areOffsetsAdjusted() || rowSizeAndPositionManager.areOffsetsAdjusted(); + + const canCacheStyle = !isScrolling && !areOffsetsAdjusted; + + for (let rowIndex = rowStartIndex; rowIndex <= rowStopIndex; rowIndex++) { + const rowDatum = rowSizeAndPositionManager.getSizeAndPositionOfCell(rowIndex); + + for (let columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) { + const columnDatum = columnSizeAndPositionManager.getSizeAndPositionOfCell(columnIndex); + const isVisible = + columnIndex >= visibleColumnIndices.start && + columnIndex <= visibleColumnIndices.stop && + rowIndex >= visibleRowIndices.start && + rowIndex <= visibleRowIndices.stop; + const key = `${rowIndex}-${columnIndex}`; + let style; + + // Cache style objects so shallow-compare doesn't re-render unnecessarily. + if (canCacheStyle && styleCache[key]) { + style = styleCache[key]; + } else { + // In deferred mode, cells will be initially rendered before we know their size. + // Don't interfere with CellMeasurer's measurements by setting an invalid size. + if (deferredMeasurementCache && !deferredMeasurementCache.has(rowIndex, columnIndex)) { + // Position not-yet-measured cells at top/left 0,0, + // And give them width/height of 'auto' so they can grow larger than the parent Grid if necessary. + // Positioning them further to the right/bottom influences their measured size. + style = { + height: 'auto', + left: 0, + position: 'absolute', + top: 0, + width: 'auto' + }; + } else { + style = { + height: rowDatum.size, + left: columnDatum.offset + horizontalOffsetAdjustment, + position: 'absolute', + top: rowDatum.offset + verticalOffsetAdjustment, + width: columnDatum.size + }; + + styleCache[key] = style; + } + } + + const cellRendererParams = { + columnIndex, + isScrolling, + isVisible, + key, + parent, + rowIndex, + style + }; + + let renderedCell; + + // Avoid re-creating cells while scrolling. + // This can lead to the same cell being created many times and can cause performance issues for "heavy" cells. + // If a scroll is in progress- cache and reuse cells. + // This cache will be thrown away once scrolling completes. + // However if we are scaling scroll positions and sizes, we should also avoid caching. + // This is because the offset changes slightly as scroll position changes and caching leads to stale values. + // For more info refer to issue #395 + // + // If isScrollingOptOut is specified, we always cache cells. + // For more info refer to issue #1028 + if ((isScrollingOptOut || isScrolling) && !horizontalOffsetAdjustment && !verticalOffsetAdjustment) { + if (!cellCache[key]) { + cellCache[key] = cellRenderer(cellRendererParams); + } + + renderedCell = cellCache[key]; + + // If the user is no longer scrolling, don't cache cells. + // This makes dynamic cell content difficult for users and would also lead to a heavier memory footprint. + } else { + renderedCell = cellRenderer(cellRendererParams); + } + + if (renderedCell == null || renderedCell === false) { + continue; + } + + if (process.env.NODE_ENV !== 'production') { + warnAboutMissingStyle(parent, renderedCell); + } + + renderedCells.push(renderedCell); + } + } + + return renderedCells; +} + +function warnAboutMissingStyle(parent, renderedCell) { + if (process.env.NODE_ENV !== 'production') { + if (renderedCell) { + // If the direct child is a CellMeasurer, then we should check its child + // See issue #611 + if (renderedCell.type && renderedCell.type.__internalCellMeasurerFlag) { + renderedCell = renderedCell.props.children; + } + + if ( + renderedCell && + renderedCell.props && + renderedCell.props.style === undefined && + parent.__warnedAboutMissingStyle !== true + ) { + parent.__warnedAboutMissingStyle = true; + + console.warn('Rendered cell should include style property for positioning.'); + } + } + } +} diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultOverscanIndicesGetter.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultOverscanIndicesGetter.js new file mode 100644 index 00000000000..4e2ed49204f --- /dev/null +++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultOverscanIndicesGetter.js @@ -0,0 +1,33 @@ +// @flow + +import type { OverscanIndicesGetterParams, OverscanIndices } from './types'; + +export const SCROLL_DIRECTION_BACKWARD = -1; +export const SCROLL_DIRECTION_FORWARD = 1; + +export const SCROLL_DIRECTION_HORIZONTAL = 'horizontal'; +export const SCROLL_DIRECTION_VERTICAL = 'vertical'; + +/** + * Calculates the number of cells to overscan before and after a specified range. + * This function ensures that overscanning doesn't exceed the available cells. + */ + +export default function defaultOverscanIndicesGetter({ + cellCount, + overscanCellsCount, + scrollDirection, + startIndex, + stopIndex +}: OverscanIndicesGetterParams): OverscanIndices { + if (scrollDirection === SCROLL_DIRECTION_FORWARD) { + return { + overscanStartIndex: Math.max(0, startIndex), + overscanStopIndex: Math.min(cellCount - 1, stopIndex + overscanCellsCount) + }; + } + return { + overscanStartIndex: Math.max(0, startIndex - overscanCellsCount), + overscanStopIndex: Math.min(cellCount - 1, stopIndex) + }; +} diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/index.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/index.js new file mode 100644 index 00000000000..2497d4618e3 --- /dev/null +++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/index.js @@ -0,0 +1,3 @@ +export { AutoSizer, WindowScroller } from 'react-virtualized'; +export { default as VirtualGrid } from './VirtualGrid'; +export { default as VirtualTableBody } from './VirtualTableBody'; diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/types.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/types.js new file mode 100644 index 00000000000..fd450b44a15 --- /dev/null +++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/types.js @@ -0,0 +1,111 @@ +// @flow + +import * as React from 'react'; +import ScalingCellSizeAndPositionManager from './utils/ScalingCellSizeAndPositionManager'; + +export type CellPosition = { columnIndex: number, rowIndex: number }; + +export type CellRendererParams = { + columnIndex: number, + isScrolling: boolean, + isVisible: boolean, + key: string, + parent: Object, + rowIndex: number, + style: Object +}; + +export type CellRenderer = (props: CellRendererParams) => React.Element<*>; + +export type CellCache = { [key: string]: React.Element<*> }; +export type StyleCache = { [key: string]: Object }; + +export type CellRangeRendererParams = { + cellCache: CellCache, + cellRenderer: CellRenderer, + columnSizeAndPositionManager: ScalingCellSizeAndPositionManager, + columnStartIndex: number, + columnStopIndex: number, + deferredMeasurementCache?: Object, + horizontalOffsetAdjustment: number, + isScrolling: boolean, + isScrollingOptOut: boolean, + parent: Object, + rowSizeAndPositionManager: ScalingCellSizeAndPositionManager, + rowStartIndex: number, + rowStopIndex: number, + scrollLeft: number, + scrollTop: number, + styleCache: StyleCache, + verticalOffsetAdjustment: number, + visibleColumnIndices: Object, + visibleRowIndices: Object +}; + +export type CellRangeRenderer = (params: CellRangeRendererParams) => React.Element<*>[]; + +export type CellSizeGetter = (params: { index: number }) => number; + +export type CellSize = CellSizeGetter | number; + +export type NoContentRenderer = () => React.Element<*> | null; + +export type Scroll = { + clientHeight: number, + clientWidth: number, + scrollHeight: number, + scrollLeft: number, + scrollTop: number, + scrollWidth: number +}; + +export type ScrollbarPresenceChange = { + horizontal: boolean, + vertical: boolean, + size: number +}; + +export type RenderedSection = { + columnOverscanStartIndex: number, + columnOverscanStopIndex: number, + columnStartIndex: number, + columnStopIndex: number, + rowOverscanStartIndex: number, + rowOverscanStopIndex: number, + rowStartIndex: number, + rowStopIndex: number +}; + +export type OverscanIndicesGetterParams = { + // One of SCROLL_DIRECTION_HORIZONTAL or SCROLL_DIRECTION_VERTICAL + direction: 'horizontal' | 'vertical', + + // One of SCROLL_DIRECTION_BACKWARD or SCROLL_DIRECTION_FORWARD + scrollDirection: -1 | 1, + + // Number of rows or columns in the current axis + cellCount: number, + + // Maximum number of cells to over-render in either direction + overscanCellsCount: number, + + // Begin of range of visible cells + startIndex: number, + + // End of range of visible cells + stopIndex: number +}; + +export type OverscanIndices = { + overscanStartIndex: number, + overscanStopIndex: number +}; + +export type OverscanIndicesGetter = (params: OverscanIndicesGetterParams) => OverscanIndices; + +export type Alignment = 'auto' | 'end' | 'start' | 'center'; + +export type VisibleCellRange = { + start?: number, + stop?: number +}; diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/CellSizeAndPositionManager.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/CellSizeAndPositionManager.js new file mode 100644 index 00000000000..64cd9021196 --- /dev/null +++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/CellSizeAndPositionManager.js @@ -0,0 +1,256 @@ +/** @flow */ +/* eslint-disable */ + +import LinearLayoutVector from 'linear-layout-vector'; +import type { Alignment, CellSizeGetter, VisibleCellRange } from '../types'; + +type CellSizeAndPositionManagerParams = { + cellCount: number, + cellSizeGetter: CellSizeGetter, + estimatedCellSize: number +}; + +type ConfigureParams = { + cellCount: number, + estimatedCellSize: number, + cellSizeGetter: CellSizeGetter +}; + +type GetUpdatedOffsetForIndex = { + align: Alignment, + containerSize: number, + currentOffset: number, + targetIndex: number +}; + +type GetVisibleCellRangeParams = { + containerSize: number, + offset: number +}; + +type SizeAndPositionData = { + offset: number, + size: number +}; + +/** + * Just-in-time calculates and caches size and position information for a collection of cells. + */ + +export default class CellSizeAndPositionManager { + // Cache of size and position data for cells, mapped by cell index. + // Note that invalid values may exist in this map so only rely on cells up to this._lastMeasuredIndex + _layoutVector: LinearLayoutVector; + + // Measurements for cells up to this index can be trusted; cells afterward should be estimated. + _lastMeasuredIndex = -1; + + _cellCount: number; + _cellSizeGetter: CellSizeGetter; + _estimatedCellSize: number; + + constructor({ cellCount, cellSizeGetter, estimatedCellSize }: CellSizeAndPositionManagerParams) { + this._cellSizeGetter = cellSizeGetter; + this._cellCount = cellCount; + this._estimatedCellSize = estimatedCellSize; + this._layoutVector = new LinearLayoutVector(); + this._layoutVector.setLength(cellCount); + this._layoutVector.setDefaultSize(estimatedCellSize); + } + + areOffsetsAdjusted() { + return false; + } + + configure({ cellCount, estimatedCellSize, cellSizeGetter }: ConfigureParams) { + this._cellCount = cellCount; + this._estimatedCellSize = estimatedCellSize; + this._cellSizeGetter = cellSizeGetter; + this._layoutVector.setLength(cellCount); + this._layoutVector.setDefaultSize(estimatedCellSize); + } + + getCellCount(): number { + return this._cellCount; + } + + getEstimatedCellSize(): number { + return this._estimatedCellSize; + } + + getLastMeasuredIndex(): number { + return this._lastMeasuredIndex; + } + + getOffsetAdjustment() { + return 0; + } + + /** + * This method returns the size and position for the cell at the specified index. + * It just-in-time calculates (or used cached values) for cells leading up to the index. + */ + getSizeAndPositionOfCell(index: number): SizeAndPositionData { + if (index < 0 || index >= this._cellCount) { + throw Error(`Requested index ${index} is outside of range 0..${this._cellCount}`); + } + const vector = this._layoutVector; + if (index > this._lastMeasuredIndex) { + const token = { index: this._lastMeasuredIndex + 1 }; + + for (let i = token.index; i <= index; token.index = ++i) { + const size = this._cellSizeGetter(token); + // undefined or NaN probably means a logic error in the size getter. + // null means we're using CellMeasurer and haven't yet measured a given index. + if (size === undefined || size !== size) { + throw Error(`Invalid size returned for cell ${i} of value ${size}`); + } else if (size !== null) { + vector.setItemSize(i, size); + } + } + this._lastMeasuredIndex = Math.min(index, this._cellCount - 1); + } + + return { + offset: vector.start(index), + size: vector.getItemSize(index) + }; + } + + getSizeAndPositionOfLastMeasuredCell(): SizeAndPositionData { + const index = this._lastMeasuredIndex; + if (index <= 0) { + return { + offset: 0, + size: 0 + }; + } + const vector = this._layoutVector; + return { + offset: vector.start(index), + size: vector.getItemSize(index) + }; + } + + /** + * Total size of all cells being measured. + * This value will be completely estimated initially. + * As cells are measured, the estimate will be updated. + */ + getTotalSize(): number { + const lastIndex = this._cellCount - 1; + return lastIndex >= 0 ? this._layoutVector.end(lastIndex) : 0; + } + + /** + * Determines a new offset that ensures a certain cell is visible, given the current offset. + * If the cell is already visible then the current offset will be returned. + * If the current offset is too great or small, it will be adjusted just enough to ensure the specified index is visible. + * + * @param align Desired alignment within container; one of "auto" (default), "start", or "end" + * @param containerSize Size (width or height) of the container viewport + * @param currentOffset Container's current (x or y) offset + * @param totalSize Total size (width or height) of all cells + * @return Offset to use to ensure the specified cell is visible + */ + getUpdatedOffsetForIndex({ + align = 'auto', + containerSize, + currentOffset, + targetIndex + }: GetUpdatedOffsetForIndex): number { + if (containerSize <= 0) { + return 0; + } + + const datum = this.getSizeAndPositionOfCell(targetIndex); + const maxOffset = datum.offset; + const minOffset = maxOffset - containerSize + datum.size; + + let idealOffset; + + switch (align) { + case 'start': + idealOffset = maxOffset; + break; + case 'end': + idealOffset = minOffset; + break; + case 'center': + idealOffset = maxOffset - (containerSize - datum.size) / 2; + break; + default: + idealOffset = Math.max(minOffset, Math.min(maxOffset, currentOffset)); + break; + } + + const totalSize = this.getTotalSize(); + + return Math.max(0, Math.min(totalSize - containerSize, idealOffset)); + } + + getVisibleCellRange(params: GetVisibleCellRangeParams): VisibleCellRange { + if (this.getTotalSize() === 0) { + return {}; + } + + const { containerSize, offset } = params; + const maxOffset = offset + containerSize - 1; + return { + start: this._findNearestCell(offset), + stop: this._findNearestCell(maxOffset) + }; + } + + /** + * Clear all cached values for cells after the specified index. + * This method should be called for any cell that has changed its size. + * It will not immediately perform any calculations; they'll be performed the next time getSizeAndPositionOfCell() is called. + */ + resetCell(index: number): void { + this._lastMeasuredIndex = Math.min(this._lastMeasuredIndex, index - 1); + } + + /** + * Searches for the cell (index) nearest the specified offset. + * + * If no exact match is found the next lowest cell index will be returned. + * This allows partially visible cells (with offsets just before/above the fold) to be visible. + */ + _findNearestCell(offset: number): number { + if (isNaN(offset)) { + throw Error(`Invalid offset ${offset} specified`); + } + + const vector = this._layoutVector; + const lastIndex = this._cellCount - 1; + // Our search algorithms find the nearest match at or below the specified offset. + // So make sure the offset is at least 0 or no match will be found. + let targetOffset = Math.max(0, Math.min(offset, vector.start(lastIndex))); + // First interrogate the constant-time lookup table + let nearestCellIndex = vector.indexOf(targetOffset); + + // If we haven't yet measured this high, compute sizes for each cell up to the desired offset. + while (nearestCellIndex > this._lastMeasuredIndex) { + // Measure all the cells up to the one we want to find presently. + // Do this before the last-index check to ensure the sparse array + // is fully populated. + this.getSizeAndPositionOfCell(nearestCellIndex); + // No need to search and compare again if we're at the end. + if (nearestCellIndex === lastIndex) { + return nearestCellIndex; + } + nearestCellIndex = vector.indexOf(targetOffset); + // Guard in case `getSizeAndPositionOfCell` didn't fully measure to + // the nearestCellIndex. This might happen scrolling quickly down + // and back up on large lists -- possible race with React or DOM? + if (nearestCellIndex === -1) { + nearestCellIndex = this._lastMeasuredIndex; + this._lastMeasuredIndex = nearestCellIndex - 1; + targetOffset = Math.max(0, Math.min(offset, vector.start(lastIndex))); + } + } + + return nearestCellIndex; + } +} diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/ScalingCellSizeAndPositionManager.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/ScalingCellSizeAndPositionManager.js new file mode 100644 index 00000000000..3686a83af4d --- /dev/null +++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/ScalingCellSizeAndPositionManager.js @@ -0,0 +1,191 @@ +/** @flow */ +/* eslint-disable */ + +import type { Alignment, CellSizeGetter, VisibleCellRange } from '../types'; + +import CellSizeAndPositionManager from './CellSizeAndPositionManager'; +import { getMaxElementSize } from './maxElementSize.js'; + +type ContainerSizeAndOffset = { + containerSize: number, + offset: number +}; + +/** + * Browsers have scroll offset limitations (eg Chrome stops scrolling at ~33.5M pixels where as Edge tops out at ~1.5M pixels). + * After a certain position, the browser won't allow the user to scroll further (even via JavaScript scroll offset adjustments). + * This util picks a lower ceiling for max size and artificially adjusts positions within to make it transparent for users. + */ + +type Params = { + maxScrollSize?: number, + cellCount: number, + cellSizeGetter: CellSizeGetter, + estimatedCellSize: number +}; + +/** + * Extends CellSizeAndPositionManager and adds scaling behavior for lists that are too large to fit within a browser's native limits. + */ +export default class ScalingCellSizeAndPositionManager { + _cellSizeAndPositionManager: CellSizeAndPositionManager; + _maxScrollSize: number; + + constructor({ maxScrollSize = getMaxElementSize(), ...params }: Params) { + // Favor composition over inheritance to simplify IE10 support + this._cellSizeAndPositionManager = new CellSizeAndPositionManager(params); + this._maxScrollSize = maxScrollSize; + } + + areOffsetsAdjusted(): boolean { + return this._cellSizeAndPositionManager.getTotalSize() > this._maxScrollSize; + } + + configure(params: { cellCount: number, estimatedCellSize: number, cellSizeGetter: CellSizeGetter }) { + this._cellSizeAndPositionManager.configure(params); + } + + getCellCount(): number { + return this._cellSizeAndPositionManager.getCellCount(); + } + + getEstimatedCellSize(): number { + return this._cellSizeAndPositionManager.getEstimatedCellSize(); + } + + getLastMeasuredIndex(): number { + return this._cellSizeAndPositionManager.getLastMeasuredIndex(); + } + + /** + * Number of pixels a cell at the given position (offset) should be shifted in order to fit within the scaled container. + * The offset passed to this function is scaled (safe) as well. + */ + getOffsetAdjustment({ + containerSize, + offset // safe + }: ContainerSizeAndOffset): number { + const totalSize = this._cellSizeAndPositionManager.getTotalSize(); + const safeTotalSize = this.getTotalSize(); + const offsetPercentage = this._getOffsetPercentage({ + containerSize, + offset, + totalSize: safeTotalSize + }); + + return Math.round(offsetPercentage * (safeTotalSize - totalSize)); + } + + getSizeAndPositionOfCell(index: number) { + return this._cellSizeAndPositionManager.getSizeAndPositionOfCell(index); + } + + getSizeAndPositionOfLastMeasuredCell() { + return this._cellSizeAndPositionManager.getSizeAndPositionOfLastMeasuredCell(); + } + + /** See CellSizeAndPositionManager#getTotalSize */ + getTotalSize(): number { + return Math.min(this._maxScrollSize, this._cellSizeAndPositionManager.getTotalSize()); + } + + /** See CellSizeAndPositionManager#getUpdatedOffsetForIndex */ + getUpdatedOffsetForIndex({ + align = 'auto', + containerSize, + currentOffset, // safe + targetIndex + }: { + align: Alignment, + containerSize: number, + currentOffset: number, + targetIndex: number + }) { + currentOffset = this._safeOffsetToOffset({ + containerSize, + offset: currentOffset + }); + + const offset = this._cellSizeAndPositionManager.getUpdatedOffsetForIndex({ + align, + containerSize, + currentOffset, + targetIndex + }); + + return this._offsetToSafeOffset({ + containerSize, + offset + }); + } + + /** See CellSizeAndPositionManager#getVisibleCellRange */ + getVisibleCellRange({ + containerSize, + offset // safe + }: ContainerSizeAndOffset): VisibleCellRange { + offset = this._safeOffsetToOffset({ + containerSize, + offset + }); + + return this._cellSizeAndPositionManager.getVisibleCellRange({ + containerSize, + offset + }); + } + + resetCell(index: number): void { + this._cellSizeAndPositionManager.resetCell(index); + } + + _getOffsetPercentage({ + containerSize, + offset, // safe + totalSize + }: { + containerSize: number, + offset: number, + totalSize: number + }) { + return totalSize <= containerSize ? 0 : offset / (totalSize - containerSize); + } + + _offsetToSafeOffset({ + containerSize, + offset // unsafe + }: ContainerSizeAndOffset): number { + const totalSize = this._cellSizeAndPositionManager.getTotalSize(); + const safeTotalSize = this.getTotalSize(); + + if (totalSize === safeTotalSize) { + return offset; + } + const offsetPercentage = this._getOffsetPercentage({ + containerSize, + offset, + totalSize + }); + + return Math.round(offsetPercentage * (safeTotalSize - containerSize)); + } + + _safeOffsetToOffset({ + containerSize, + offset // safe + }: ContainerSizeAndOffset): number { + const totalSize = this._cellSizeAndPositionManager.getTotalSize(); + const safeTotalSize = this.getTotalSize(); + + if (totalSize === safeTotalSize) { + return offset; + } + const offsetPercentage = this._getOffsetPercentage({ + containerSize, + offset, + totalSize: safeTotalSize + }); + + return Math.round(offsetPercentage * (totalSize - containerSize)); + } +} diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/animationFrame.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/animationFrame.js new file mode 100644 index 00000000000..3282efb3120 --- /dev/null +++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/animationFrame.js @@ -0,0 +1,41 @@ +/** + * animationFrame.js + * https://github.com/bvaughn/react-virtualized/blob/9.21.0/source/utils/animationFrame.js + * Brian Vaughn + * + * Forked from version 9.21.0 + * */ + +// Properly handle server-side rendering. +let win; +if (typeof window !== 'undefined') { + win = window; + // eslint-disable-next-line no-restricted-globals +} else if (typeof self !== 'undefined') { + // eslint-disable-next-line no-restricted-globals + win = self; +} else { + win = {}; +} + +// requestAnimationFrame() shim by Paul Irish +// http://paulirish.com/2011/requestanimationframe-for-smart-animating/ +export const raf = + win.requestAnimationFrame || + win.webkitRequestAnimationFrame || + win.mozRequestAnimationFrame || + win.oRequestAnimationFrame || + win.msRequestAnimationFrame || + function raf(callback) { + return win.setTimeout(callback, 1000 / 60); + }; + +export const caf = + win.cancelAnimationFrame || + win.webkitCancelAnimationFrame || + win.mozCancelAnimationFrame || + win.oCancelAnimationFrame || + win.msCancelAnimationFrame || + function cT(id) { + win.clearTimeout(id); + }; diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/calculateSizeAndPositionDataAndUpdateScrollOffset.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/calculateSizeAndPositionDataAndUpdateScrollOffset.js new file mode 100644 index 00000000000..f5c5eb2909f --- /dev/null +++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/calculateSizeAndPositionDataAndUpdateScrollOffset.js @@ -0,0 +1,61 @@ +// @flow + +/** + * Helper method that determines when to recalculate row or column metadata. + */ + +type Params = { + // Number of rows or columns in the current axis + cellCount: number, + + // Width or height of cells for the current axis + cellSize: ?number, + + // Method to invoke if cell metadata should be recalculated + computeMetadataCallback: (props: T) => void, + + // Parameters to pass to :computeMetadataCallback + computeMetadataCallbackProps: T, + + // Newly updated number of rows or columns in the current axis + nextCellsCount: number, + + // Newly updated width or height of cells for the current axis + nextCellSize: ?number, + + // Newly updated scroll-to-index + nextScrollToIndex: number, + + // Scroll-to-index + scrollToIndex: number, + + // Callback to invoke if the scroll position should be recalculated + updateScrollOffsetForScrollToIndex: () => void +}; + +export default function calculateSizeAndPositionDataAndUpdateScrollOffset({ + cellCount, + cellSize, + computeMetadataCallback, + computeMetadataCallbackProps, + nextCellsCount, + nextCellSize, + nextScrollToIndex, + scrollToIndex, + updateScrollOffsetForScrollToIndex +}: Params<*>) { + // Don't compare cell sizes if they are functions because inline functions would cause infinite loops. + // In that event users should use the manual recompute methods to inform of changes. + if ( + cellCount !== nextCellsCount || + ((typeof cellSize === 'number' || typeof nextCellSize === 'number') && cellSize !== nextCellSize) + ) { + computeMetadataCallback(computeMetadataCallbackProps); + + // Updated cell metadata may have hidden the previous scrolled-to item. + // In this case we should also update the scrollTop to ensure it stays visible. + if (scrollToIndex >= 0 && scrollToIndex === nextScrollToIndex) { + updateScrollOffsetForScrollToIndex(); + } + } +} diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/createCallbackMemoizer.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/createCallbackMemoizer.js new file mode 100644 index 00000000000..a1ac48f2eb3 --- /dev/null +++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/createCallbackMemoizer.js @@ -0,0 +1,30 @@ +/** + * Helper utility that updates the specified callback whenever any of the specified indices have changed. + */ +export default function createCallbackMemoizer(requireAllKeys = true) { + let cachedIndices = {}; + + return ({ callback, indices }) => { + const keys = Object.keys(indices); + const allInitialized = + !requireAllKeys || + keys.every(key => { + const value = indices[key]; + return Array.isArray(value) ? value.length > 0 : value >= 0; + }); + const indexChanged = + keys.length !== Object.keys(cachedIndices).length || + keys.some(key => { + const cachedValue = cachedIndices[key]; + const value = indices[key]; + + return Array.isArray(value) ? cachedValue.join(',') !== value.join(',') : cachedValue !== value; + }); + + cachedIndices = indices; + + if (allInitialized && indexChanged) { + callback(indices); + } + }; +} diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/maxElementSize.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/maxElementSize.js new file mode 100644 index 00000000000..506c0c5b62a --- /dev/null +++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/maxElementSize.js @@ -0,0 +1,17 @@ +// @flow + +const DEFAULT_MAX_ELEMENT_SIZE = 1500000; +const CHROME_MAX_ELEMENT_SIZE = 1.67771e7; + +const isBrowser = () => typeof window !== 'undefined'; + +const isChrome = () => !!window.chrome && !!window.chrome.webstore; + +export const getMaxElementSize = (): number => { + if (isBrowser()) { + if (isChrome()) { + return CHROME_MAX_ELEMENT_SIZE; + } + } + return DEFAULT_MAX_ELEMENT_SIZE; +}; diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/requestAnimationTimeout.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/requestAnimationTimeout.js new file mode 100644 index 00000000000..79a44fecd44 --- /dev/null +++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/requestAnimationTimeout.js @@ -0,0 +1,39 @@ +/** + * requestAnimationTimeout.js + * https://github.com/bvaughn/react-virtualized/blob/9.21.0/source/utils/requestAnimationTimeout.js + * Brian Vaughn + * + * Forked from version 9.21.0 + * */ + +import { caf, raf } from './animationFrame'; + +export const cancelAnimationTimeout = frame => caf(frame.id); + +/** + * Recursively calls requestAnimationFrame until a specified delay has been met or exceeded. + * When the delay time has been reached the function you're timing out will be called. + * + * Credit: Joe Lambert (https://gist.github.com/joelambert/1002116#file-requesttimeout-js) + */ +export const requestAnimationTimeout = (callback, delay) => { + let start; + // wait for end of processing current event handler, because event handler may be long + Promise.resolve().then(() => { + start = Date.now(); + }); + + const timeout = () => { + if (Date.now() - start >= delay) { + callback.call(); + } else { + frame.id = raf(timeout); + } + }; + + const frame = { + id: raf(timeout) + }; + + return frame; +}; diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/updateScrollIndexHelper.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/updateScrollIndexHelper.js new file mode 100644 index 00000000000..c0cb6347b9f --- /dev/null +++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/updateScrollIndexHelper.js @@ -0,0 +1,92 @@ +// @flow + +import type { Alignment, CellSize } from '../types'; + +import ScalingCellSizeAndPositionManager from './ScalingCellSizeAndPositionManager.js'; + +/** + * Helper function that determines when to update scroll offsets to ensure that a scroll-to-index remains visible. + * This function also ensures that the scroll ofset isn't past the last column/row of cells. + */ + +type Params = { + // Width or height of cells for the current axis + cellSize?: CellSize, + + // Manages size and position metadata of cells + cellSizeAndPositionManager: ScalingCellSizeAndPositionManager, + + // Previous number of rows or columns + previousCellsCount: number, + + // Previous width or height of cells + previousCellSize: CellSize, + + previousScrollToAlignment: Alignment, + + // Previous scroll-to-index + previousScrollToIndex: number, + + // Previous width or height of the virtualized container + previousSize: number, + + // Current scrollLeft or scrollTop + scrollOffset: number, + + scrollToAlignment: Alignment, + + // Scroll-to-index + scrollToIndex: number, + + // Width or height of the virtualized container + size: number, + + sizeJustIncreasedFromZero: boolean, + + // Callback to invoke with an scroll-to-index value + updateScrollIndexCallback: (index: number) => void +}; + +export default function updateScrollIndexHelper({ + cellSize, + cellSizeAndPositionManager, + previousCellsCount, + previousCellSize, + previousScrollToAlignment, + previousScrollToIndex, + previousSize, + scrollOffset, + scrollToAlignment, + scrollToIndex, + size, + sizeJustIncreasedFromZero, + updateScrollIndexCallback +}: Params) { + const cellCount = cellSizeAndPositionManager.getCellCount(); + const hasScrollToIndex = scrollToIndex >= 0 && scrollToIndex < cellCount; + const sizeHasChanged = + size !== previousSize || + sizeJustIncreasedFromZero || + !previousCellSize || + (typeof cellSize === 'number' && cellSize !== previousCellSize); + + // If we have a new scroll target OR if height/row-height has changed, + // We should ensure that the scroll target is visible. + if ( + hasScrollToIndex && + (sizeHasChanged || scrollToAlignment !== previousScrollToAlignment || scrollToIndex !== previousScrollToIndex) + ) { + updateScrollIndexCallback(scrollToIndex); + + // If we don't have a selected item but list size or number of children have decreased, + // Make sure we aren't scrolled too far past the current content. + } else if (!hasScrollToIndex && cellCount > 0 && (size < previousSize || cellCount < previousCellsCount)) { + // We need to ensure that the current scroll offset is still within the collection's range. + // To do this, we don't need to measure everything; CellMeasurer would perform poorly. + // Just check to make sure we're still okay. + // Only adjust the scroll position if we've scrolled below the last set of rows. + if (scrollOffset > cellSizeAndPositionManager.getTotalSize() - size) { + updateScrollIndexCallback(cellCount - 1); + } + } +} diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/index.js b/packages/patternfly-4/react-virtualized-extension/src/components/index.js new file mode 100644 index 00000000000..1dfee408f4a --- /dev/null +++ b/packages/patternfly-4/react-virtualized-extension/src/components/index.js @@ -0,0 +1 @@ +export * from './Virtualized'; diff --git a/packages/patternfly-4/react-virtualized-extension/src/index.js b/packages/patternfly-4/react-virtualized-extension/src/index.js new file mode 100644 index 00000000000..07635cbbc8e --- /dev/null +++ b/packages/patternfly-4/react-virtualized-extension/src/index.js @@ -0,0 +1 @@ +export * from './components'; diff --git a/yarn.lock b/yarn.lock index 9d71619dece..4c88df211c6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5913,6 +5913,7 @@ clone@^1.0.2: clsx@^1.0.1: version "1.0.4" resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.0.4.tgz#0c0171f6d5cb2fe83848463c15fcc26b4df8c2ec" + integrity sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg== cmd-shim@^2.0.2: version "2.0.2" @@ -12558,6 +12559,7 @@ liftoff@^2.5.0: linear-layout-vector@0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/linear-layout-vector/-/linear-layout-vector-0.0.1.tgz#398114d7303b6ecc7fd6b273af7b8401d8ba9c70" + integrity sha1-OYEU1zA7bsx/1rJzr3uEAdi6nHA= listr-silent-renderer@^1.1.1: version "1.1.1" @@ -16992,7 +16994,7 @@ react-treebeard@^2.1.0: shallowequal "^0.2.2" velocity-react "^1.3.1" -react-virtualized@9.x: +react-virtualized@9.21.1, react-virtualized@9.x: version "9.21.1" resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.21.1.tgz#4dbbf8f0a1420e2de3abf28fbb77120815277b3a" dependencies: From 6eb8355500d492068e1e8eb65542cac6c561a7ed Mon Sep 17 00:00:00 2001 From: zallen <47335686+redallen@users.noreply.github.com> Date: Fri, 7 Jun 2019 11:32:46 -0400 Subject: [PATCH 06/32] fix travis cache config (#2186) --- .travis.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.travis.yml b/.travis.yml index 536f707158c..b8a1b836cde 100644 --- a/.travis.yml +++ b/.travis.yml @@ -32,6 +32,8 @@ cache: - packages/patternfly-4/react-tokens/dist - packages/patternfly-4/react-inline-edit-extension/dist - packages/patternfly-4/react-integration/demo-app-ts/build + - packages/patternfly-4/react-virtualized-extension/dist + - packages/patternfly-4/react-topology/dist - packages/patternfly-4/react-docs/public # To cache PF4 docs - .cache # For incremental builds git: From aad5876c464102cf966ece07887fce93a12a4ca3 Mon Sep 17 00:00:00 2001 From: patternfly-build Date: Fri, 7 Jun 2019 17:19:45 +0000 Subject: [PATCH 07/32] chore(release): releasing packages [ci skip] - @patternfly/react-docs@4.6.6 - @patternfly/react-inline-edit-extension@2.7.2 - @patternfly/react-table@2.10.2 - @patternfly/react-virtualized-extension@1.0.1 --- packages/patternfly-4/react-docs/CHANGELOG.md | 8 ++++++++ packages/patternfly-4/react-docs/package.json | 2 +- .../react-inline-edit-extension/CHANGELOG.md | 8 ++++++++ .../react-inline-edit-extension/package.json | 4 ++-- packages/patternfly-4/react-table/CHANGELOG.md | 8 ++++++++ packages/patternfly-4/react-table/package.json | 6 +++--- .../react-virtualized-extension/CHANGELOG.md | 8 ++++++++ .../react-virtualized-extension/package.json | 12 ++++++------ 8 files changed, 44 insertions(+), 12 deletions(-) create mode 100644 packages/patternfly-4/react-virtualized-extension/CHANGELOG.md diff --git a/packages/patternfly-4/react-docs/CHANGELOG.md b/packages/patternfly-4/react-docs/CHANGELOG.md index c3743c38623..b4733440edb 100644 --- a/packages/patternfly-4/react-docs/CHANGELOG.md +++ b/packages/patternfly-4/react-docs/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [4.6.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.6.5...@patternfly/react-docs@4.6.6) (2019-06-07) + +**Note:** Version bump only for package @patternfly/react-docs + + + + + ## [4.6.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.6.4...@patternfly/react-docs@4.6.5) (2019-06-06) **Note:** Version bump only for package @patternfly/react-docs diff --git a/packages/patternfly-4/react-docs/package.json b/packages/patternfly-4/react-docs/package.json index c4de0798f82..0f7e9d41ce0 100644 --- a/packages/patternfly-4/react-docs/package.json +++ b/packages/patternfly-4/react-docs/package.json @@ -1,7 +1,7 @@ { "name": "@patternfly/react-docs", "description": "PatternFly React Docs", - "version": "4.6.5", + "version": "4.6.6", "author": "Red Hat", "license": "MIT", "private": true, diff --git a/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md b/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md index 3361d4fe556..1cf306f4eda 100644 --- a/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md +++ b/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.7.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.7.1...@patternfly/react-inline-edit-extension@2.7.2) (2019-06-07) + +**Note:** Version bump only for package @patternfly/react-inline-edit-extension + + + + + ## [2.7.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.7.0...@patternfly/react-inline-edit-extension@2.7.1) (2019-06-06) **Note:** Version bump only for package @patternfly/react-inline-edit-extension diff --git a/packages/patternfly-4/react-inline-edit-extension/package.json b/packages/patternfly-4/react-inline-edit-extension/package.json index 898127a04b5..8e27518b8e9 100644 --- a/packages/patternfly-4/react-inline-edit-extension/package.json +++ b/packages/patternfly-4/react-inline-edit-extension/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-inline-edit-extension", - "version": "2.7.1", + "version": "2.7.2", "description": "This library provides inline editing support for PatternFly 4 React table", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -31,7 +31,7 @@ "@patternfly/react-core": "^3.36.1", "@patternfly/react-icons": "^3.9.3", "@patternfly/react-styles": "^3.3.0", - "@patternfly/react-table": "^2.10.1", + "@patternfly/react-table": "^2.10.2", "classnames": "^2.2.5", "exenv": "^1.2.2", "reactabular-table": "^8.14.0" diff --git a/packages/patternfly-4/react-table/CHANGELOG.md b/packages/patternfly-4/react-table/CHANGELOG.md index 758970787a3..643501a19d5 100644 --- a/packages/patternfly-4/react-table/CHANGELOG.md +++ b/packages/patternfly-4/react-table/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.10.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.10.1...@patternfly/react-table@2.10.2) (2019-06-07) + +**Note:** Version bump only for package @patternfly/react-table + + + + + ## [2.10.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.10.0...@patternfly/react-table@2.10.1) (2019-06-06) **Note:** Version bump only for package @patternfly/react-table diff --git a/packages/patternfly-4/react-table/package.json b/packages/patternfly-4/react-table/package.json index e85e091ab33..da34cd05acd 100644 --- a/packages/patternfly-4/react-table/package.json +++ b/packages/patternfly-4/react-table/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-table", - "version": "2.10.1", + "version": "2.10.2", "description": "This library provides a set of React table components for use with the PatternFly 4", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -35,10 +35,10 @@ "exenv": "^1.2.2" }, "peerDependencies": { + "lodash-es": "4.x", "prop-types": "^15.6.1", "react": "^16.4.0", - "react-dom": "^15.6.2 || ^16.4.0", - "lodash-es": "4.x" + "react-dom": "^15.6.2 || ^16.4.0" }, "scripts": { "build": "yarn build:babel && node ./scripts/copyTS.js && node ./build/copyStyles.js", diff --git a/packages/patternfly-4/react-virtualized-extension/CHANGELOG.md b/packages/patternfly-4/react-virtualized-extension/CHANGELOG.md new file mode 100644 index 00000000000..d6a9a45c4d0 --- /dev/null +++ b/packages/patternfly-4/react-virtualized-extension/CHANGELOG.md @@ -0,0 +1,8 @@ +# Change Log + +All notable changes to this project will be documented in this file. +See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +## 1.0.1 (2019-06-07) + +**Note:** Version bump only for package @patternfly/react-virtualized-extension diff --git a/packages/patternfly-4/react-virtualized-extension/package.json b/packages/patternfly-4/react-virtualized-extension/package.json index 30b4902329e..c76b8e44713 100644 --- a/packages/patternfly-4/react-virtualized-extension/package.json +++ b/packages/patternfly-4/react-virtualized-extension/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-virtualized-extension", - "version": "1.0.0", + "version": "1.0.1", "description": "This library provides efficient rendering extensions for PatternFly 4 React tables and lists.", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -31,12 +31,12 @@ "@patternfly/react-core": "^3.36.0", "@patternfly/react-icons": "^3.9.3", "@patternfly/react-styles": "^3.3.0", - "exenv": "^1.2.2", - "react-virtualized": "9.21.1", "clsx": "^1.0.1", "dom-helpers": "^2.4.0 || ^3.0.0", + "exenv": "^1.2.2", + "linear-layout-vector": "0.0.1", "react-lifecycles-compat": "^3.0.4", - "linear-layout-vector": "0.0.1" + "react-virtualized": "9.21.1" }, "peerDependencies": { "@patternfly/react-table": "^2.10.0", @@ -59,7 +59,7 @@ "css": "^2.2.3", "fs-extra": "^6.0.1", "glob": "^7.1.2", - "uuid": "^3.3.2", - "rimraf": "^2.6.2" + "rimraf": "^2.6.2", + "uuid": "^3.3.2" } } From 41d76dcf7e313c7555c9e72f75df5806abc52739 Mon Sep 17 00:00:00 2001 From: Patrick Riley Date: Fri, 7 Jun 2019 13:30:38 -0400 Subject: [PATCH 08/32] fix(react-docs): react-virtualized live edit (#2187) --- .../react-docs/src/components/componentDocs/liveEdit.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/patternfly-4/react-docs/src/components/componentDocs/liveEdit.js b/packages/patternfly-4/react-docs/src/components/componentDocs/liveEdit.js index 3ba7f83305a..f5da4e519ee 100644 --- a/packages/patternfly-4/react-docs/src/components/componentDocs/liveEdit.js +++ b/packages/patternfly-4/react-docs/src/components/componentDocs/liveEdit.js @@ -12,6 +12,7 @@ import * as ReactInlineEdit from '@patternfly/react-inline-edit-extension'; import * as ReactStyledSystem from '@patternfly/react-styled-system'; import * as ReactStyles from '@patternfly/react-styles'; import * as ReactTable from '@patternfly/react-table'; +import * as ReactVirtualizedExtension from '@patternfly/react-virtualized-extension'; import * as ReactTokens from '@patternfly/react-tokens'; import './live-edit.scss'; @@ -46,6 +47,7 @@ export class LiveEdit extends React.Component { ...ReactStyledSystem, ...ReactStyles, ...ReactTable, + ...ReactVirtualizedExtension, ...ReactTokens } : {}; From 0bebc189a8b737a8ca44cea838c6c95443c3bb38 Mon Sep 17 00:00:00 2001 From: patternfly-build Date: Fri, 7 Jun 2019 17:45:38 +0000 Subject: [PATCH 09/32] chore(release): releasing packages [ci skip] - @patternfly/react-docs@4.6.7 --- packages/patternfly-4/react-docs/CHANGELOG.md | 11 +++++++++++ packages/patternfly-4/react-docs/package.json | 2 +- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/patternfly-4/react-docs/CHANGELOG.md b/packages/patternfly-4/react-docs/CHANGELOG.md index b4733440edb..525cd2bec54 100644 --- a/packages/patternfly-4/react-docs/CHANGELOG.md +++ b/packages/patternfly-4/react-docs/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [4.6.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.6.6...@patternfly/react-docs@4.6.7) (2019-06-07) + + +### Bug Fixes + +* **react-docs:** react-virtualized live edit ([#2187](https://github.com/patternfly/patternfly-react/issues/2187)) ([41d76dc](https://github.com/patternfly/patternfly-react/commit/41d76dc)) + + + + + ## [4.6.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.6.5...@patternfly/react-docs@4.6.6) (2019-06-07) **Note:** Version bump only for package @patternfly/react-docs diff --git a/packages/patternfly-4/react-docs/package.json b/packages/patternfly-4/react-docs/package.json index 0f7e9d41ce0..b666874d7c7 100644 --- a/packages/patternfly-4/react-docs/package.json +++ b/packages/patternfly-4/react-docs/package.json @@ -1,7 +1,7 @@ { "name": "@patternfly/react-docs", "description": "PatternFly React Docs", - "version": "4.6.6", + "version": "4.6.7", "author": "Red Hat", "license": "MIT", "private": true, From cb97dfdad3e334e7de31f252c92e2e739b0971cf Mon Sep 17 00:00:00 2001 From: Karel Hala Date: Fri, 7 Jun 2019 22:29:31 +0200 Subject: [PATCH 10/32] feat(PF4: Pagination): When empty array sent to pagination no per page should be visible (#2175) --- .../components/Pagination/OptionsToggle.js | 29 +- .../components/Pagination/Pagination.test.js | 5 + .../Pagination/PaginationOptionsMenu.js | 1 + .../__snapshots__/Pagination.test.js.snap | 401 +++++++++++++++++- 4 files changed, 419 insertions(+), 17 deletions(-) diff --git a/packages/patternfly-4/react-core/src/components/Pagination/OptionsToggle.js b/packages/patternfly-4/react-core/src/components/Pagination/OptionsToggle.js index de9b1479614..b58f345aea0 100644 --- a/packages/patternfly-4/react-core/src/components/Pagination/OptionsToggle.js +++ b/packages/patternfly-4/react-core/src/components/Pagination/OptionsToggle.js @@ -14,6 +14,7 @@ const OptionsToggle = ({ widgetId, onToggle, isOpen, + showToggle, toggleTemplate: ToggleTemplate }) => (
@@ -24,18 +25,20 @@ const OptionsToggle = ({ )} - + {showToggle && ( + + )}
); @@ -48,6 +51,7 @@ OptionsToggle.propTypes = { widgetId: PropTypes.string, onToggle: PropTypes.func, isOpen: PropTypes.bool, + showToggle: PropTypes.bool, toggleTemplate: PropTypes.oneOfType([PropTypes.string, PropTypes.func]) }; @@ -60,6 +64,7 @@ OptionsToggle.defaultProps = { widgetId: '', onToggle: () => undefined, isOpen: false, + showToggle: true, toggleTemplate: '' }; diff --git a/packages/patternfly-4/react-core/src/components/Pagination/Pagination.test.js b/packages/patternfly-4/react-core/src/components/Pagination/Pagination.test.js index a316c2a0839..bf8f7fae9f8 100644 --- a/packages/patternfly-4/react-core/src/components/Pagination/Pagination.test.js +++ b/packages/patternfly-4/react-core/src/components/Pagination/Pagination.test.js @@ -28,6 +28,11 @@ describe('component render', () => { expect(wrapper).toMatchSnapshot(); }); + test('empty per page options', () => { + const wrapper = mount(); + expect(wrapper).toMatchSnapshot(); + }); + test('no items', () => { const wrapper = mount(); expect(wrapper).toMatchSnapshot(); diff --git a/packages/patternfly-4/react-core/src/components/Pagination/PaginationOptionsMenu.js b/packages/patternfly-4/react-core/src/components/Pagination/PaginationOptionsMenu.js index 3e3e6928b83..35e96350037 100644 --- a/packages/patternfly-4/react-core/src/components/Pagination/PaginationOptionsMenu.js +++ b/packages/patternfly-4/react-core/src/components/Pagination/PaginationOptionsMenu.js @@ -123,6 +123,7 @@ class PaginationOptionsMenu extends Component { toggle={ 0} itemsTitle={itemsTitle} onToggle={this.onToggle} isOpen={this.state.isOpen} diff --git a/packages/patternfly-4/react-core/src/components/Pagination/__snapshots__/Pagination.test.js.snap b/packages/patternfly-4/react-core/src/components/Pagination/__snapshots__/Pagination.test.js.snap index a30f459bf9a..5f8401b67da 100644 --- a/packages/patternfly-4/react-core/src/components/Pagination/__snapshots__/Pagination.test.js.snap +++ b/packages/patternfly-4/react-core/src/components/Pagination/__snapshots__/Pagination.test.js.snap @@ -202,6 +202,7 @@ exports[`component render custom pagination toggle 1`] = ` lastIndex={10} onToggle={[Function]} optionsToggle="Select" + showToggle={true} toggleTemplate="\${firstIndex} - \${lastIndex} - \${itemCount} - \${itemsTitle}" widgetId="pagination-options-menu" /> @@ -213,7 +214,7 @@ exports[`component render custom pagination toggle 1`] = ` @@ -622,6 +624,7 @@ exports[`component render custom perPageOptions 1`] = ` lastIndex={10} onToggle={[Function]} optionsToggle="Select" + showToggle={true} toggleTemplate={[Function]} widgetId="pagination-options-menu" /> @@ -643,6 +646,7 @@ exports[`component render custom perPageOptions 1`] = ` onEnter={[Function]} onToggle={[Function]} optionsToggle="Select" + showToggle={true} toggleTemplate={[Function]} widgetId="pagination-options-menu" > @@ -1141,6 +1145,7 @@ exports[`component render custom start end 1`] = ` lastIndex={15} onToggle={[Function]} optionsToggle="Select" + showToggle={true} toggleTemplate={[Function]} widgetId="pagination-options-menu" /> @@ -1152,7 +1157,7 @@ exports[`component render custom start end 1`] = ` @@ -1458,6 +1464,377 @@ exports[`component render custom start end 1`] = ` `; +exports[`component render empty per page options 1`] = ` + +
+
+ 40 items +
+ +
+ + + } + > +
+ +
+ + + + 1 + - + 10 + + + of + + 40 + + + items + + +
+ +
+ +
+ + + + +
+ +`; + exports[`component render last page 1`] = ` @@ -1681,6 +2059,7 @@ exports[`component render last page 1`] = ` onEnter={[Function]} onToggle={[Function]} optionsToggle="Select" + showToggle={true} toggleTemplate={[Function]} widgetId="pagination-options-menu" > @@ -2179,6 +2558,7 @@ exports[`component render limited number of pages 1`] = ` lastIndex={20} onToggle={[Function]} optionsToggle="Select" + showToggle={true} toggleTemplate={[Function]} widgetId="pagination-options-menu" /> @@ -2200,6 +2580,7 @@ exports[`component render limited number of pages 1`] = ` onEnter={[Function]} onToggle={[Function]} optionsToggle="Select" + showToggle={true} toggleTemplate={[Function]} widgetId="pagination-options-menu" > @@ -2698,6 +3079,7 @@ exports[`component render no items 1`] = ` lastIndex={0} onToggle={[Function]} optionsToggle="Select" + showToggle={true} toggleTemplate={[Function]} widgetId="pagination-options-menu" /> @@ -2709,7 +3091,7 @@ exports[`component render no items 1`] = ` @@ -3212,6 +3595,7 @@ exports[`component render should render correctly bottom 1`] = ` lastIndex={10} onToggle={[Function]} optionsToggle="Select" + showToggle={true} toggleTemplate={[Function]} widgetId="pagination-options-menu" /> @@ -3233,6 +3617,7 @@ exports[`component render should render correctly bottom 1`] = ` onEnter={[Function]} onToggle={[Function]} optionsToggle="Select" + showToggle={true} toggleTemplate={[Function]} widgetId="pagination-options-menu" > @@ -3731,6 +4116,7 @@ exports[`component render should render correctly top 1`] = ` lastIndex={10} onToggle={[Function]} optionsToggle="Select" + showToggle={true} toggleTemplate={[Function]} widgetId="pagination-options-menu" /> @@ -3752,6 +4138,7 @@ exports[`component render should render correctly top 1`] = ` onEnter={[Function]} onToggle={[Function]} optionsToggle="Select" + showToggle={true} toggleTemplate={[Function]} widgetId="pagination-options-menu" > @@ -4241,6 +4628,7 @@ exports[`component render titles 1`] = ` lastIndex={10} onToggle={[Function]} optionsToggle="Select" + showToggle={true} toggleTemplate={[Function]} widgetId="pagination-options-menu" /> @@ -4252,7 +4640,7 @@ exports[`component render titles 1`] = ` @@ -4760,6 +5149,7 @@ exports[`component render up drop direction 1`] = ` lastIndex={10} onToggle={[Function]} optionsToggle="Select" + showToggle={true} toggleTemplate={[Function]} widgetId="pagination-options-menu" /> @@ -4771,7 +5161,7 @@ exports[`component render up drop direction 1`] = ` From 979f13f1525410f7bccc108480736d3898550333 Mon Sep 17 00:00:00 2001 From: patternfly-build Date: Fri, 7 Jun 2019 20:52:46 +0000 Subject: [PATCH 11/32] chore(release): releasing packages [ci skip] - @patternfly/react-core@3.37.0 - @patternfly/react-docs@4.6.8 - @patternfly/react-inline-edit-extension@2.7.3 - demo-app-ts@1.18.2 - @patternfly/react-table@2.10.3 - @patternfly/react-virtualized-extension@1.0.2 --- packages/patternfly-4/react-core/CHANGELOG.md | 11 +++++++++++ packages/patternfly-4/react-core/package.json | 2 +- packages/patternfly-4/react-docs/CHANGELOG.md | 8 ++++++++ packages/patternfly-4/react-docs/package.json | 4 ++-- .../react-inline-edit-extension/CHANGELOG.md | 8 ++++++++ .../react-inline-edit-extension/package.json | 6 +++--- .../react-integration/demo-app-ts/CHANGELOG.md | 8 ++++++++ .../react-integration/demo-app-ts/package.json | 4 ++-- packages/patternfly-4/react-table/CHANGELOG.md | 8 ++++++++ packages/patternfly-4/react-table/package.json | 4 ++-- .../react-virtualized-extension/CHANGELOG.md | 8 ++++++++ .../react-virtualized-extension/package.json | 4 ++-- 12 files changed, 63 insertions(+), 12 deletions(-) diff --git a/packages/patternfly-4/react-core/CHANGELOG.md b/packages/patternfly-4/react-core/CHANGELOG.md index 749541a8888..524519faa5c 100644 --- a/packages/patternfly-4/react-core/CHANGELOG.md +++ b/packages/patternfly-4/react-core/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [3.37.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.36.1...@patternfly/react-core@3.37.0) (2019-06-07) + + +### Features + +* **PF4: Pagination:** When empty array sent to pagination no per page should be visible ([#2175](https://github.com/patternfly/patternfly-react/issues/2175)) ([cb97dfd](https://github.com/patternfly/patternfly-react/commit/cb97dfd)) + + + + + ## [3.36.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.36.0...@patternfly/react-core@3.36.1) (2019-06-06) **Note:** Version bump only for package @patternfly/react-core diff --git a/packages/patternfly-4/react-core/package.json b/packages/patternfly-4/react-core/package.json index a0d062f6649..62a52cc996a 100644 --- a/packages/patternfly-4/react-core/package.json +++ b/packages/patternfly-4/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-core", - "version": "3.36.1", + "version": "3.37.0", "description": "This library provides a set of common React components for use with the PatternFly reference implementation.", "main": "dist/js/index.js", "module": "dist/esm/index.js", diff --git a/packages/patternfly-4/react-docs/CHANGELOG.md b/packages/patternfly-4/react-docs/CHANGELOG.md index 525cd2bec54..7f00823549b 100644 --- a/packages/patternfly-4/react-docs/CHANGELOG.md +++ b/packages/patternfly-4/react-docs/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [4.6.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.6.7...@patternfly/react-docs@4.6.8) (2019-06-07) + +**Note:** Version bump only for package @patternfly/react-docs + + + + + ## [4.6.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.6.6...@patternfly/react-docs@4.6.7) (2019-06-07) diff --git a/packages/patternfly-4/react-docs/package.json b/packages/patternfly-4/react-docs/package.json index b666874d7c7..a6dc5c9e5ee 100644 --- a/packages/patternfly-4/react-docs/package.json +++ b/packages/patternfly-4/react-docs/package.json @@ -1,7 +1,7 @@ { "name": "@patternfly/react-docs", "description": "PatternFly React Docs", - "version": "4.6.7", + "version": "4.6.8", "author": "Red Hat", "license": "MIT", "private": true, @@ -17,7 +17,7 @@ "@mdx-js/mdx": "1.0.2", "@mdx-js/react": "1.0.2", "@patternfly/patternfly": "2.8.2", - "@patternfly/react-core": "^3.36.1", + "@patternfly/react-core": "^3.37.0", "@patternfly/react-icons": "^3.9.3", "gatsby": "2.3.14", "gatsby-mdx": "0.6.3", diff --git a/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md b/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md index 1cf306f4eda..7dfa537e65f 100644 --- a/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md +++ b/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.7.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.7.2...@patternfly/react-inline-edit-extension@2.7.3) (2019-06-07) + +**Note:** Version bump only for package @patternfly/react-inline-edit-extension + + + + + ## [2.7.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.7.1...@patternfly/react-inline-edit-extension@2.7.2) (2019-06-07) **Note:** Version bump only for package @patternfly/react-inline-edit-extension diff --git a/packages/patternfly-4/react-inline-edit-extension/package.json b/packages/patternfly-4/react-inline-edit-extension/package.json index 8e27518b8e9..af038ce54e3 100644 --- a/packages/patternfly-4/react-inline-edit-extension/package.json +++ b/packages/patternfly-4/react-inline-edit-extension/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-inline-edit-extension", - "version": "2.7.2", + "version": "2.7.3", "description": "This library provides inline editing support for PatternFly 4 React table", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -28,10 +28,10 @@ "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/", "dependencies": { "@patternfly/patternfly": "2.8.2", - "@patternfly/react-core": "^3.36.1", + "@patternfly/react-core": "^3.37.0", "@patternfly/react-icons": "^3.9.3", "@patternfly/react-styles": "^3.3.0", - "@patternfly/react-table": "^2.10.2", + "@patternfly/react-table": "^2.10.3", "classnames": "^2.2.5", "exenv": "^1.2.2", "reactabular-table": "^8.14.0" diff --git a/packages/patternfly-4/react-integration/demo-app-ts/CHANGELOG.md b/packages/patternfly-4/react-integration/demo-app-ts/CHANGELOG.md index 9405343ef9b..1e5a772ae1f 100644 --- a/packages/patternfly-4/react-integration/demo-app-ts/CHANGELOG.md +++ b/packages/patternfly-4/react-integration/demo-app-ts/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.18.2](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.18.1...demo-app-ts@1.18.2) (2019-06-07) + +**Note:** Version bump only for package demo-app-ts + + + + + ## [1.18.1](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.18.0...demo-app-ts@1.18.1) (2019-06-06) **Note:** Version bump only for package demo-app-ts diff --git a/packages/patternfly-4/react-integration/demo-app-ts/package.json b/packages/patternfly-4/react-integration/demo-app-ts/package.json index d4893c6f75d..fe08df66333 100644 --- a/packages/patternfly-4/react-integration/demo-app-ts/package.json +++ b/packages/patternfly-4/react-integration/demo-app-ts/package.json @@ -1,13 +1,13 @@ { "name": "demo-app-ts", "private": true, - "version": "1.18.1", + "version": "1.18.2", "scripts": { "build:demo-app": "react-scripts build", "start:demo-app": "react-scripts start" }, "dependencies": { - "@patternfly/react-core": "^3.36.1", + "@patternfly/react-core": "^3.37.0", "react": "^16.8.4", "react-dom": "^16.8.4", "react-router": "^4.3.1", diff --git a/packages/patternfly-4/react-table/CHANGELOG.md b/packages/patternfly-4/react-table/CHANGELOG.md index 643501a19d5..3697dba373c 100644 --- a/packages/patternfly-4/react-table/CHANGELOG.md +++ b/packages/patternfly-4/react-table/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.10.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.10.2...@patternfly/react-table@2.10.3) (2019-06-07) + +**Note:** Version bump only for package @patternfly/react-table + + + + + ## [2.10.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.10.1...@patternfly/react-table@2.10.2) (2019-06-07) **Note:** Version bump only for package @patternfly/react-table diff --git a/packages/patternfly-4/react-table/package.json b/packages/patternfly-4/react-table/package.json index da34cd05acd..eede6976ebb 100644 --- a/packages/patternfly-4/react-table/package.json +++ b/packages/patternfly-4/react-table/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-table", - "version": "2.10.2", + "version": "2.10.3", "description": "This library provides a set of React table components for use with the PatternFly 4", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -28,7 +28,7 @@ "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/react-table#readme", "dependencies": { "@patternfly/patternfly": "2.8.2", - "@patternfly/react-core": "^3.36.1", + "@patternfly/react-core": "^3.37.0", "@patternfly/react-icons": "^3.9.3", "@patternfly/react-styles": "^3.3.0", "classnames": "^2.2.5", diff --git a/packages/patternfly-4/react-virtualized-extension/CHANGELOG.md b/packages/patternfly-4/react-virtualized-extension/CHANGELOG.md index d6a9a45c4d0..356d6cf9c30 100644 --- a/packages/patternfly-4/react-virtualized-extension/CHANGELOG.md +++ b/packages/patternfly-4/react-virtualized-extension/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.0.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-virtualized-extension@1.0.1...@patternfly/react-virtualized-extension@1.0.2) (2019-06-07) + +**Note:** Version bump only for package @patternfly/react-virtualized-extension + + + + + ## 1.0.1 (2019-06-07) **Note:** Version bump only for package @patternfly/react-virtualized-extension diff --git a/packages/patternfly-4/react-virtualized-extension/package.json b/packages/patternfly-4/react-virtualized-extension/package.json index c76b8e44713..cdd4a85f9c8 100644 --- a/packages/patternfly-4/react-virtualized-extension/package.json +++ b/packages/patternfly-4/react-virtualized-extension/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-virtualized-extension", - "version": "1.0.1", + "version": "1.0.2", "description": "This library provides efficient rendering extensions for PatternFly 4 React tables and lists.", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -28,7 +28,7 @@ "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/", "dependencies": { "@patternfly/patternfly": "2.8.2", - "@patternfly/react-core": "^3.36.0", + "@patternfly/react-core": "^3.37.0", "@patternfly/react-icons": "^3.9.3", "@patternfly/react-styles": "^3.3.0", "clsx": "^1.0.1", From 59aadfce875d7172c82c56ed70379dafde788896 Mon Sep 17 00:00:00 2001 From: Dan Labrecque Date: Mon, 10 Jun 2019 10:08:45 -0400 Subject: [PATCH 12/32] fix(charts): align label vertically and add donutHeight/Width defaults (#2193) * fix(charts): align label vertically and add defaults for donutHeight donutWidth Fixes https://github.com/patternfly/patternfly-react/issues/2191 Fixes https://github.com/patternfly/patternfly-react/issues/2192 * fix(charts): apply defaults to custom legend https://github.com/patternfly/patternfly-react/issues/2194 --- .../ChartDonutThreshold.tsx | 88 +++++---- .../ChartDonutUtilization.tsx | 113 ++++++++--- .../ChartDonutThreshold.test.tsx.snap | 10 +- .../ChartDonutUtilization.test.tsx.snap | 14 +- .../examples/ChartDonutUtilization.md | 175 ++++++++++++++++-- .../examples/chart-donut-utilization.scss | 51 +++-- 6 files changed, 352 insertions(+), 99 deletions(-) diff --git a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.tsx b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.tsx index fde2c785622..5e3f7343830 100644 --- a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.tsx +++ b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.tsx @@ -122,8 +122,14 @@ export interface ChartDonutThresholdProps extends ChartPieProps { * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of * pixels will depend on the size of the container the chart is rendered into. * - * Note: The parent container must be set to the same height in order to maintain the aspect ratio. Otherwise, the - * innerRadius may need to be set when using this property. + * Note: When adding a legend, height (the overall SVG height) may need to be larger than donutHeight (the donut size) + * in order to accommodate the extra legend. + * + * By default, donutHeight is the min. of either height or width. This covers most use cases in order to accommodate + * legends within the same SVG. However, donutHeight (not height) may need to be set in order to adjust the donut + * height. + * + * The innerRadius may also need to be set when changing the donut size. */ donutHeight?: number; /** @@ -138,8 +144,13 @@ export interface ChartDonutThresholdProps extends ChartPieProps { * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of * pixels will depend on the size of the container the chart is rendered into. * - * Note: The parent container must be set to the same height in order to maintain the aspect ratio. Otherwise, the - * innerRadius may need to be set when using this property. + * Note: When adding a legend, width (the overall SVG width) may need to be larger than donutWidth (the donut size) + * in order to accommodate the extra legend. + * + * By default, donutWidth is the min. of either height or width. This covers most use cases in order to accommodate + * legends within the same SVG. However, donutWidth (not width) may need to be set in order to adjust the donut width. + * + * The innerRadius may also need to be set when changing the donut size. */ donutWidth?: number; /** @@ -211,7 +222,10 @@ export interface ChartDonutThresholdProps extends ChartPieProps { * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of * pixels will depend on the size of the container the chart is rendered into. * - * Note: innerRadius may need to be set when using this property. + * Note: When adding a legend, height (the overall SVG height) may need to be larger than donutHeight (the donut size) + * in order to accommodate the extra legend. + * + * Typically, the parent container is set to the same height in order to maintain the aspect ratio. */ height?: number; /** @@ -344,7 +358,10 @@ export interface ChartDonutThresholdProps extends ChartPieProps { * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of * pixels will depend on the size of the container the chart is rendered into. * - * Note: innerRadius may need to be set when using this property. + * Note: When adding a legend, width (the overall SVG width) may need to be larger than donutWidth (the donut size) + * in order to accommodate the extra legend. + * + * Typically, the parent container is set to the same width in order to maintain the aspect ratio. */ width?: number; /** @@ -383,11 +400,12 @@ export const ChartDonutThreshold: React.FunctionComponent { // Returns computed data representing pie chart slices @@ -410,42 +428,48 @@ export const ChartDonutThreshold: React.FunctionComponent { + const dynamicWidth = donutWidth - (theme.pie.width - dynamicTheme.pie.width); switch (orientation) { case 'left': - return Math.round((theme.pie.width - dynamicTheme.pie.width) / 2); + return Math.round((donutWidth - dynamicWidth) / 2); case 'right': - return -Math.round((theme.pie.width - dynamicTheme.pie.width) / 2); + return -Math.round((donutWidth - dynamicWidth) / 2); default: return 0; } }; // Returns the vertical shift for the dynamic utilization donut cart - const getDynamicDonutDy = (dynamicTheme: ChartThemeDefinition) => - Math.round((theme.pie.height - dynamicTheme.pie.height) / 2); + const getDynamicDonutDy = (dynamicTheme: ChartThemeDefinition) => { + const dynamicHeight = donutHeight - (theme.pie.height - dynamicTheme.pie.height); + return Math.round((donutHeight - dynamicHeight) / 2); + } // Render dynamic utilization donut cart const renderChildren = () => React.Children.toArray(children).map(child => { - const datum = getData([{ ...child.props.data }]); - const orientation = child.props.donutOrientation || donutOrientation; - const dynamicTheme = - child.props.theme || - getDonutThresholdDynamicTheme(child.props.themeColor || themeColor, - child.props.themeVariant || themeVariant); - return React.cloneElement(child, { - donutDx: child.props.donutDx || getDynamicDonutDx(dynamicTheme, orientation), - donutDy: child.props.donutDy || getDynamicDonutDy(dynamicTheme), - donutHeight: child.props.donutHeight || dynamicTheme.pie.height, - donutOrientation: orientation, - donutWidth: child.props.donutWidth || dynamicTheme.pie.width, - endAngle: child.props.endAngle || 360 * (datum[0]._y ? datum[0]._y / 100 : 100), - height: child.props.height || height, - showStatic: child.props.showStatic || false, - standalone: false, - theme: dynamicTheme, - width: child.props.width || width - }); + if (child.props) { + const datum = getData([{ ...child.props.data }]); + const orientation = child.props.donutOrientation || donutOrientation; + const dynamicTheme = + child.props.theme || + getDonutThresholdDynamicTheme(child.props.themeColor || themeColor, + child.props.themeVariant || themeVariant); + return React.cloneElement(child, { + donutDx: child.props.donutDx || getDynamicDonutDx(dynamicTheme, orientation), + donutDy: child.props.donutDy || getDynamicDonutDy(dynamicTheme), + donutHeight: child.props.donutHeight || donutHeight - (theme.pie.height - dynamicTheme.pie.height), + donutOrientation: orientation, + donutWidth: child.props.donutWidth || donutWidth - (theme.pie.width - dynamicTheme.pie.width), + endAngle: child.props.endAngle || 360 * (datum[0]._y ? datum[0]._y / 100 : 100), + height: child.props.height || height, + showStatic: child.props.showStatic || false, + standalone: false, + theme: dynamicTheme, + width: child.props.width || width + }); + } + return child; }); // Static threshold dount chart diff --git a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.tsx b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.tsx index 425be3bd16e..42874621cc6 100644 --- a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.tsx +++ b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.tsx @@ -60,6 +60,13 @@ export interface ChartDonutUtilizationProps extends ChartPieProps { * {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})} */ animate?: AnimatePropTypeInterface; + /** + * The capHeight prop defines a text metric for the font being used: the expected height of capital letters. + * This is necessary because of SVG, which (a) positions the *bottom* of the text at `y`, and (b) has no notion of + * line height. The value should ideally use the same units as `lineHeight` and `dy`, preferably ems. If given a + * unitless number, it is assumed to be ems. + */ + capHeight?: StringOrNumberOrCallback; /** * The categories prop specifies how categorical data for a chart should be ordered. * This prop should be given as an array of string values, or an object with @@ -134,8 +141,14 @@ export interface ChartDonutUtilizationProps extends ChartPieProps { * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of * pixels will depend on the size of the container the chart is rendered into. * - * Note: The parent container must be set to the same height in order to maintain the aspect ratio. Otherwise, the - * innerRadius may need to be set when using this property. + * Note: When adding a legend, height (the overall SVG height) may need to be larger than donutHeight (the donut size) + * in order to accommodate the extra legend. + * + * By default, donutHeight is the min. of either height or width. This covers most use cases in order to accommodate + * legends within the same SVG. However, donutHeight (not height) may need to be set in order to adjust the donut + * height. + * + * The innerRadius may also need to be set when changing the donut size. */ donutHeight?: number; /** @@ -150,8 +163,13 @@ export interface ChartDonutUtilizationProps extends ChartPieProps { * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of * pixels will depend on the size of the container the chart is rendered into. * - * Note: The parent container must be set to the same height in order to maintain the aspect ratio. Otherwise, the - * innerRadius may need to be set when using this property. + * Note: When adding a legend, width (the overall SVG width) may need to be larger than donutWidth (the donut size) + * in order to accommodate the extra legend. + * + * By default, donutWidth is the min. of either height or width. This covers most use cases in order to accommodate + * legends within the same SVG. However, donutWidth (not width) may need to be set in order to adjust the donut width. + * + * The innerRadius may also need to be set when changing the donut size. */ donutWidth?: number; /** @@ -223,7 +241,10 @@ export interface ChartDonutUtilizationProps extends ChartPieProps { * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of * pixels will depend on the size of the container the chart is rendered into. * - * Note: innerRadius may need to be set when using this property. + * Note: When adding a legend, height (the overall SVG height) may need to be larger than donutHeight (the donut size) + * in order to accommodate the extra legend. + * + * Typically, the parent container is set to the same height in order to maintain the aspect ratio. */ height?: number; /** @@ -250,7 +271,9 @@ export interface ChartDonutUtilizationProps extends ChartPieProps { */ labelPosition?: 'startAngle' | 'endAngle' | 'centroid'; /** - * The legend component to render with chart. This overrides other legend props. + * The legend component to render with chart. + * + * Note: Default legend properties may be applied */ legendComponent?: React.ReactElement; /** @@ -261,8 +284,6 @@ export interface ChartDonutUtilizationProps extends ChartPieProps { * Each data point may be any format you wish (depending on the `x` and `y` accessor props), * but by default, an object with x and y properties is expected. * - * Note: Not compatible with legendComponent prop. - * * @example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]} */ legendData?: any[]; @@ -274,9 +295,6 @@ export interface ChartDonutUtilizationProps extends ChartPieProps { * and text-wrapping is not currently supported, so "vertical" * orientation is both the default setting and recommended for * displaying many series of data. - * - * Note: May need to set legendHeight and legendWidth in order to position properly. - * Not compatible with legendComponent prop. */ legendOrientation?: 'horizontal' | 'vertical'; /** @@ -402,7 +420,10 @@ export interface ChartDonutUtilizationProps extends ChartPieProps { * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of * pixels will depend on the size of the container the chart is rendered into. * - * Note: innerRadius may need to be set when using this property. + * Note: When adding a legend, width (the overall SVG width) may need to be larger than donutWidth (the donut size) + * in order to accommodate the extra legend. + * + * Typically, the parent container is set to the same width in order to maintain the aspect ratio. */ width?: number; /** @@ -449,11 +470,12 @@ export const ChartDonutUtilization: React.FunctionComponent { // Returns computed data representing pie chart slices @@ -490,9 +512,31 @@ export const ChartDonutUtilization: React.FunctionComponent { if (legendComponent) { - return legendComponent; - } - if (legendData) { + const props = legendComponent.props; + return React.cloneElement(legendComponent, { + data: props.data ? props.data : legendData, + orientation: props.legendOrientation ? props.legendOrientation : legendOrientation, + standalone: false, + theme: props.theme ? props.theme : theme, + x: props.x ? props.x : getLegendX({ + chartOrientation: donutOrientation, + legendOrientation: props.legendOrientation ? props.legendOrientation : legendOrientation, + legendWidth: getLegendDimensions().width, + theme, + width + }), + y: props.y ? props.y : getLegendY({ + chartDy: donutDy, + chartHeight: donutHeight, + chartOrientation: donutOrientation, + chartType: 'pie', + height, + legendData: props.data ? props.data : legendData, + legendHeight: getLegendDimensions().height, + theme + }) + }); + } else if (legendData) { return ( @@ -522,6 +566,25 @@ export const ChartDonutUtilization: React.FunctionComponent { + if (legendComponent) { + const props = legendComponent.props; + return (VictoryLegend as any).getDimensions({ + data: props.data ? props.data : legendData, + orientation: props.legendOrientation ? props.legendOrientation : legendOrientation, + theme: props.theme ? props.theme : theme, + }); + } else if (legendData) { + return (VictoryLegend as any).getDimensions({ + data: legendData, + orientation: legendOrientation, + theme + }); + } + return {}; + } + // Returns theme based on threshold and current value const getThresholdTheme = () => { const newTheme = { ...theme }; @@ -543,18 +606,10 @@ export const ChartDonutUtilization: React.FunctionComponent `; diff --git a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap index 31cd7c1e016..846aca8d1e8 100644 --- a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap +++ b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap @@ -1015,8 +1015,8 @@ exports[`renders component data 1`] = ` } textAnchor="middle" verticalAnchor="middle" - x={115} - y={115} + x={100} + y={100} /> `; diff --git a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/examples/ChartDonutUtilization.md b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/examples/ChartDonutUtilization.md index 83c9a08756d..d0eff3dd7eb 100644 --- a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/examples/ChartDonutUtilization.md +++ b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/examples/ChartDonutUtilization.md @@ -58,7 +58,7 @@ class UtilizationChart extends React.Component { const { spacer, used } = this.state; return (
-
+
datum.x ? `${datum.x} - ${datum.y}%` : null} @@ -108,7 +108,7 @@ class UtilizationChart extends React.Component { const { spacer, used } = this.state; return (
-
+
datum.x ? `${datum.x} - ${datum.y}%` : null} @@ -133,9 +133,10 @@ import React from 'react'; import { ChartDonutUtilization } from '@patternfly/react-charts';
-
+
datum.x ? `${datum.x} - ${datum.y}%` : null} @@ -157,7 +158,7 @@ import React from 'react'; import { ChartDonutUtilization } from '@patternfly/react-charts';
-
+
-
+
datum.x ? datum.x : null} - width={475} > -
+
datum.x ? datum.x : null} @@ -245,7 +245,7 @@ class ThresholdChart extends React.Component { } ``` -## Green donut utilization chart with static thresholds and right-aligned legend +## Green donut utilization chart with static thresholds and right-aligned (custom) legend ```js import React from 'react'; import { ChartDonutThreshold, ChartDonutUtilization, ChartThemeColor, ChartThemeVariant } from '@patternfly/react-charts'; @@ -273,7 +273,7 @@ class ThresholdChart extends React.Component { const { used } = this.state; return (
-
+
datum.x ? datum.x : null} @@ -282,7 +282,11 @@ class ThresholdChart extends React.Component { datum.x ? `${datum.x} - ${datum.y}%` : null} - legendData={[{ name: `GBps capacity - ${used}%` }, { name: 'Warning threshold at - 60%' }, { name: 'Danger threshold at - 90%' }]} + legendComponent={ + + } subTitle="of 100 GBps" title={`${used}%`} themeColor={ChartThemeColor.green} @@ -303,13 +307,13 @@ import React from 'react'; import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts';
-
+
datum.x ? datum.x : null} - width={275} + width={230} > -
+
``` + +## Small donut utilization chart +```js +import React from 'react'; +import { ChartDonutUtilization } from '@patternfly/react-charts'; + +
+
+ datum.x ? `${datum.x} - ${datum.y}%` : null} + subTitle="of 100 GBps" + title="75%" + width={150} + /> +
+
+``` + +## Small donut utilization chart with right-aligned legend +```js +import React from 'react'; +import { ChartDonutUtilization } from '@patternfly/react-charts'; + +class UtilizationChart extends React.Component { + constructor(props) { + super(props); + this.state = { + spacer: '', + used: 0 + }; + } + + componentDidMount() { + this.interval = setInterval(() => { + const { used } = this.state; + const val = (used + 10) % 100; + this.setState({ + spacer: val < 10 ? ' ' : '', + used: val + }); + }, 1000); + } + + componentWillUnmount() { + clearInterval(this.interval); + } + + render() { + const { spacer, used } = this.state; + return ( +
+
+ datum.x ? `${datum.x} - ${datum.y}%` : null} + legendData={[{ name: `GBps capacity - ${spacer}${used}%` }, { name: 'Unused' }]} + subTitle="of 100 GBps" + title={`${used}%`} + thresholds={[{ value: 60 }, { value: 90 }]} + width={350} + /> +
+
+ ); + } +} +``` + +## Small donut utilization chart with static thresholds +```js +import React from 'react'; +import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts'; + +
+
+ datum.x ? datum.x : null} + width={175} + > + datum.x ? `${datum.x} - ${datum.y}%` : null} + subTitle="of 100 GBps" + title="45%" + /> + +
+
+``` + +## Small donut utilization chart with static thresholds and right-aligned legend +```js +import React from 'react'; +import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts'; + +class ThresholdChart extends React.Component { + constructor(props) { + super(props); + this.state = { + used: 0 + }; + } + + componentDidMount() { + this.interval = setInterval(() => { + const { used } = this.state; + this.setState({ used: (used + 10) % 100 }); + }, 1000); + } + + componentWillUnmount() { + clearInterval(this.interval); + } + + render() { + const { used } = this.state; + return ( +
+
+ datum.x ? datum.x : null} + width={425} + > + datum.x ? `${datum.x} - ${datum.y}%` : null} + legendData={[{ name: `GBps capacity - ${used}%` }, { name: 'Warning threshold at - 60%' }, { name: 'Danger threshold at - 90%' }]} + subTitle="of 100 GBps" + title={`${used}%`} + thresholds={[{ value: 60 }, { value: 90 }]} + /> + +
+
+ ); + } +} +``` diff --git a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/examples/chart-donut-utilization.scss b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/examples/chart-donut-utilization.scss index 13de880e58a..8e37a9a8f27 100644 --- a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/examples/chart-donut-utilization.scss +++ b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/examples/chart-donut-utilization.scss @@ -1,18 +1,33 @@ .ws-preview { & > * { - .donut-threshold-chart-horz { + .donut-threshold-chart { height: 230px; - width: 492px; + width: 230px; + } + + .donut-threshold-chart-sm { + height: 175px; + width: 175px; } - .donut-threshold-chart-horz-sm { + .donut-threshold-chart-legend-bottom { + height: 325px; + width: 230px; + } + + .donut-threshold-chart-legend-left { height: 230px; width: 475px; } - .donut-threshold-chart-vert { - height: 325px; - width: 275px; + .donut-threshold-chart-legend-right { + height: 230px; + width: 492px; + } + + .donut-threshold-chart-legend-right-sm { + height: 175px; + width: 425px; } .donut-utilization-chart { @@ -20,19 +35,29 @@ width: 230px; } - .donut-utilization-chart-horz { - height: 230px; - width: 435px; + .donut-utilization-chart-sm { + height: 150px; + width: 150px; + } + + .donut-utilization-chart-legend-bottom { + height: 275px; + width: 300px; } - .donut-utilization-chart-horz-sm { + .donut-utilization-chart-legend-left { height: 230px; width: 425px; } - .donut-utilization-chart-vert { - height: 275px; - width: 300px; + .donut-utilization-chart-legend-right { + height: 230px; + width: 435px; + } + + .donut-utilization-chart-legend-right-sm { + height: 150px; + width: 350px; } } } From a3e5de0126fd55b64f0327880d8f7c6e0cbe30a9 Mon Sep 17 00:00:00 2001 From: patternfly-build Date: Mon, 10 Jun 2019 14:23:36 +0000 Subject: [PATCH 13/32] chore(release): releasing packages [ci skip] - @patternfly/react-charts@4.1.2 --- packages/patternfly-4/react-charts/CHANGELOG.md | 11 +++++++++++ packages/patternfly-4/react-charts/package.json | 2 +- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/patternfly-4/react-charts/CHANGELOG.md b/packages/patternfly-4/react-charts/CHANGELOG.md index 02e57a52717..d11b1c23292 100644 --- a/packages/patternfly-4/react-charts/CHANGELOG.md +++ b/packages/patternfly-4/react-charts/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 4.1.2 (2019-06-10) + + +### Bug Fixes + +* **charts:** align label vertically and add donutHeight/Width defaults ([#2193](https://github.com/patternfly/patternfly-react/issues/2193)) ([59aadfc](https://github.com/patternfly/patternfly-react/commit/59aadfc)) + + + + + ## [4.1.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.1.0...@patternfly/react-charts@4.1.1) (2019-06-05) **Note:** Version bump only for package @patternfly/react-charts diff --git a/packages/patternfly-4/react-charts/package.json b/packages/patternfly-4/react-charts/package.json index 3029c840b83..b46e92c51a3 100644 --- a/packages/patternfly-4/react-charts/package.json +++ b/packages/patternfly-4/react-charts/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-charts", - "version": "4.1.1", + "version": "4.1.2", "description": "This library provides a set of React chart components for use with the PatternFly reference implementation.", "main": "dist/js/index.js", "module": "dist/esm/index.js", From b35f3d1cc997a04484d92fd13fcde4aa9fffbcc3 Mon Sep 17 00:00:00 2001 From: zallen <47335686+redallen@users.noreply.github.com> Date: Mon, 10 Jun 2019 11:05:10 -0400 Subject: [PATCH 14/32] build(esm): fix esm output and convert react-virtualized-extension to TS (#2190) * convert react-virtualized-extension to typescript * fix babelrcs and package.json * hoist babel config and use json * fix jest test * fix circular dependency * fix pf3 build --- .babelrc | 3 - babel.config.js | 4 + jest.config.js | 2 +- package.json | 19 ++-- .../patternfly-react-extensions/package.json | 11 ++ .../patternfly-react-wooden-tree/package.json | 13 +++ .../patternfly-react/package.json | 11 ++ .../src/components/Cards/Card.js | 37 ------- .../UtilizationTrendCard/UtilizationCard.js | 2 +- .../src/components/Cards/index.js | 18 +++ .../patternfly-3/react-console/package.json | 11 ++ packages/patternfly-4/.babelrc | 11 ++ packages/patternfly-4/.babelrc.js | 38 ------- packages/patternfly-4/react-charts/.babelrc | 3 + .../patternfly-4/react-charts/.babelrc.js | 5 - .../patternfly-4/react-charts/package.json | 11 +- packages/patternfly-4/react-core/.babelrc | 3 + packages/patternfly-4/react-core/.babelrc.js | 20 ---- packages/patternfly-4/react-core/package.json | 9 +- .../react-inline-edit-extension/.babelrc | 6 +- .../react-inline-edit-extension/package.json | 20 +++- .../patternfly-4/react-styled-system/.babelrc | 4 +- .../react-styled-system/package.json | 18 ++- packages/patternfly-4/react-styles/.babelrc | 4 +- .../patternfly-4/react-styles/package.json | 18 ++- packages/patternfly-4/react-table/.babelrc | 6 +- .../patternfly-4/react-table/package.json | 18 ++- .../patternfly-4/react-tokens/package.json | 4 +- .../react-virtualized-extension/.babelrc | 5 +- .../react-virtualized-extension/package.json | 17 ++- .../{VirtualGrid.js => VirtualGrid.ts} | 103 ++++++++++-------- ...irtualTableBody.js => VirtualTableBody.ts} | 20 ++-- ... => accessibilityOverscanIndicesGetter.ts} | 4 +- ...enderer.js => defaultCellRangeRenderer.ts} | 3 +- ...ter.js => defaultOverscanIndicesGetter.ts} | 4 +- .../Virtualized/{index.js => index.ts} | 0 .../Virtualized/{types.js => types.ts} | 26 ++--- ...nager.js => CellSizeAndPositionManager.ts} | 5 +- ...s => ScalingCellSizeAndPositionManager.ts} | 3 +- .../{animationFrame.js => animationFrame.ts} | 0 ...zeAndPositionDataAndUpdateScrollOffset.ts} | 8 +- ...kMemoizer.js => createCallbackMemoizer.ts} | 0 .../{maxElementSize.js => maxElementSize.ts} | 4 +- ...nTimeout.js => requestAnimationTimeout.ts} | 0 ...exHelper.js => updateScrollIndexHelper.ts} | 4 +- .../src/components/{index.js => index.ts} | 0 .../src/{index.js => index.ts} | 0 packages/react-icons/.babelrc | 4 +- packages/react-icons/package.json | 17 ++- test.env.js | 6 +- yarn.lock | 33 ++---- 51 files changed, 298 insertions(+), 297 deletions(-) delete mode 100644 .babelrc create mode 100644 babel.config.js create mode 100644 packages/patternfly-4/.babelrc delete mode 100644 packages/patternfly-4/.babelrc.js create mode 100644 packages/patternfly-4/react-charts/.babelrc delete mode 100644 packages/patternfly-4/react-charts/.babelrc.js create mode 100644 packages/patternfly-4/react-core/.babelrc delete mode 100644 packages/patternfly-4/react-core/.babelrc.js rename packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/{VirtualGrid.js => VirtualGrid.ts} (97%) rename packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/{VirtualTableBody.js => VirtualTableBody.ts} (96%) rename packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/{accessibilityOverscanIndicesGetter.js => accessibilityOverscanIndicesGetter.ts} (93%) rename packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/{defaultCellRangeRenderer.js => defaultCellRangeRenderer.ts} (98%) rename packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/{defaultOverscanIndicesGetter.js => defaultOverscanIndicesGetter.ts} (91%) rename packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/{index.js => index.ts} (100%) rename packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/{types.js => types.ts} (84%) rename packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/{CellSizeAndPositionManager.js => CellSizeAndPositionManager.ts} (98%) rename packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/{ScalingCellSizeAndPositionManager.js => ScalingCellSizeAndPositionManager.ts} (98%) rename packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/{animationFrame.js => animationFrame.ts} (100%) rename packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/{calculateSizeAndPositionDataAndUpdateScrollOffset.js => calculateSizeAndPositionDataAndUpdateScrollOffset.ts} (96%) rename packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/{createCallbackMemoizer.js => createCallbackMemoizer.ts} (100%) rename packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/{maxElementSize.js => maxElementSize.ts} (78%) rename packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/{requestAnimationTimeout.js => requestAnimationTimeout.ts} (100%) rename packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/{updateScrollIndexHelper.js => updateScrollIndexHelper.ts} (97%) rename packages/patternfly-4/react-virtualized-extension/src/components/{index.js => index.ts} (100%) rename packages/patternfly-4/react-virtualized-extension/src/{index.js => index.ts} (100%) diff --git a/.babelrc b/.babelrc deleted file mode 100644 index ec6da7006b9..00000000000 --- a/.babelrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "presets": ["./packages/patternfly-3/.babelrc.js"] -} diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 00000000000..429a1720c05 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,4 @@ +module.exports = { + extends: './packages/patternfly-4/.babelrc', + presets: [['@babel/env', {'modules': 'commonjs'}], '@babel/react'], +} \ No newline at end of file diff --git a/jest.config.js b/jest.config.js index a5d66cd9119..2b770f22737 100644 --- a/jest.config.js +++ b/jest.config.js @@ -26,7 +26,7 @@ module.exports = { "/packages/patternfly-4/react-core/scripts/snapshot-serializer" ], transform: { - '^.+\\.(ts|tsx)?$': 'ts-jest', + '^.+\\.(ts|tsx?)$': 'ts-jest', '^.+\\.jsx?$': 'babel-jest', '\\.(css)$': '/packages/patternfly-4/react-styles/jest-transform.js' }, diff --git a/package.json b/package.json index bca7d01f9c2..475780604be 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,13 @@ }, "homepage": "https://github.com/patternfly/patternfly-react#readme", "devDependencies": { + "@babel/cli": "^7.0.0", + "@babel/core": "^7.0.0", + "@babel/plugin-proposal-class-properties": "^7.0.0", + "@babel/plugin-proposal-object-rest-spread": "^7.0.0", + "@babel/plugin-transform-typescript": "^7.0.0", + "@babel/preset-env": "^7.0.0", + "@babel/preset-react": "^7.0.0", "@storybook/addon-actions": "^v3.4.11", "@storybook/addon-info": "^v3.4.11", "@storybook/addon-knobs": "^v3.4.11", @@ -33,17 +40,7 @@ "@storybook/addons": "^3.3.0", "@storybook/react": "^v3.4.11", "@storybook/storybook-deployer": "^2.1.0", - "babel-cli": "^6.26.0", - "babel-core": "^6.26.0", - "babel-eslint": "^9.0.0", - "babel-jest": "^23.6.0", - "babel-plugin-transform-class-properties": "^6.24.1", - "babel-plugin-transform-export-extensions": "^6.22.0", - "babel-plugin-transform-imports": "^1.5.0", - "babel-plugin-transform-object-assign": "^6.22.0", - "babel-plugin-transform-object-rest-spread": "^6.26.0", - "babel-preset-env": "^1.6.1", - "babel-preset-react": "^6.24.1", + "babel-plugin-typescript-to-proptypes": "^0.17.1", "change-case": "^3.0.2", "codecov": "^3.2.0", "commitizen": "^3.0.7", diff --git a/packages/patternfly-3/patternfly-react-extensions/package.json b/packages/patternfly-3/patternfly-react-extensions/package.json index 0f8c520631a..b4c7fdb6016 100644 --- a/packages/patternfly-3/patternfly-react-extensions/package.json +++ b/packages/patternfly-3/patternfly-react-extensions/package.json @@ -51,6 +51,17 @@ "unidiff": "^1.0.1" }, "devDependencies": { + "babel-cli": "^6.26.0", + "babel-core": "^6.26.0", + "babel-eslint": "^9.0.0", + "babel-jest": "^23.6.0", + "babel-plugin-transform-class-properties": "^6.24.1", + "babel-plugin-transform-export-extensions": "^6.22.0", + "babel-plugin-transform-imports": "^1.5.0", + "babel-plugin-transform-object-assign": "^6.22.0", + "babel-plugin-transform-object-rest-spread": "^6.26.0", + "babel-preset-env": "^1.6.1", + "babel-preset-react": "^6.24.1", "rimraf": "^2.6.2", "shx": "^0.3.2" }, diff --git a/packages/patternfly-3/patternfly-react-wooden-tree/package.json b/packages/patternfly-3/patternfly-react-wooden-tree/package.json index f4db1ceb26a..0c73acee136 100644 --- a/packages/patternfly-3/patternfly-react-wooden-tree/package.json +++ b/packages/patternfly-3/patternfly-react-wooden-tree/package.json @@ -33,6 +33,19 @@ "dependencies": { "react-wooden-tree": "^2.0.1" }, + "devDependencies": { + "babel-cli": "^6.26.0", + "babel-core": "^6.26.0", + "babel-eslint": "^9.0.0", + "babel-jest": "^23.6.0", + "babel-plugin-transform-class-properties": "^6.24.1", + "babel-plugin-transform-export-extensions": "^6.22.0", + "babel-plugin-transform-imports": "^1.5.0", + "babel-plugin-transform-object-assign": "^6.22.0", + "babel-plugin-transform-object-rest-spread": "^6.26.0", + "babel-preset-env": "^1.6.1", + "babel-preset-react": "^6.24.1" + }, "peerDependencies": { "prop-types": "^15.6.1", "react": "^16.3.2", diff --git a/packages/patternfly-3/patternfly-react/package.json b/packages/patternfly-3/patternfly-react/package.json index a566382c20e..dc86bee6c35 100644 --- a/packages/patternfly-3/patternfly-react/package.json +++ b/packages/patternfly-3/patternfly-react/package.json @@ -68,6 +68,17 @@ "clean": "rimraf dist" }, "devDependencies": { + "babel-cli": "^6.26.0", + "babel-core": "^6.26.0", + "babel-eslint": "^9.0.0", + "babel-jest": "^23.6.0", + "babel-plugin-transform-class-properties": "^6.24.1", + "babel-plugin-transform-export-extensions": "^6.22.0", + "babel-plugin-transform-imports": "^1.5.0", + "babel-plugin-transform-object-assign": "^6.22.0", + "babel-plugin-transform-object-rest-spread": "^6.26.0", + "babel-preset-env": "^1.6.1", + "babel-preset-react": "^6.24.1", "clean-css-cli": "^4.2.1", "react-axe": "^3.0.2", "rimraf": "^2.6.2", diff --git a/packages/patternfly-3/patternfly-react/src/components/Cards/Card.js b/packages/patternfly-3/patternfly-react/src/components/Cards/Card.js index b1144b2adfe..1aa2c55d1c4 100644 --- a/packages/patternfly-3/patternfly-react/src/components/Cards/Card.js +++ b/packages/patternfly-3/patternfly-react/src/components/Cards/Card.js @@ -2,25 +2,6 @@ import classNames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; -import CardTitle from './CardTitle'; -import CardBody from './CardBody'; -import CardHeading from './CardHeading'; -import CardFooter from './CardFooter'; -import CardLink from './CardLink'; -import CardGrid from './CardGrid'; -import CardDropdownButton from './CardDropdownButton'; -import CardHeightMatching from './CardHeightMatching'; -import { - UtilizationCard, - UtilizationCardDetails, - UtilizationCardDetailsCount, - UtilizationCardDetailsDesc, - UtilizationCardDetailsLine1, - UtilizationCardDetailsLine2 -} from './UtilizationTrendCard'; - -import { AggregateStatusCount, AggregateStatusNotifications, AggregateStatusNotification } from './AggregateStatusCard'; - /** * Card Component for PatternFly React */ @@ -69,22 +50,4 @@ Card.defaultProps = { cardRef: null }; -Card.Title = CardTitle; -Card.Body = CardBody; -Card.Heading = CardHeading; -Card.Footer = CardFooter; -Card.Link = CardLink; -Card.Grid = CardGrid; -Card.DropdownButton = CardDropdownButton; -Card.HeightMatching = CardHeightMatching; -Card.UtilizationCard = UtilizationCard; -Card.UtilizationCardDetails = UtilizationCardDetails; -Card.UtilizationCardDetailsCount = UtilizationCardDetailsCount; -Card.UtilizationCardDetailsDesc = UtilizationCardDetailsDesc; -Card.UtilizationCardDetailsLine1 = UtilizationCardDetailsLine1; -Card.UtilizationCardDetailsLine2 = UtilizationCardDetailsLine2; -Card.AggregateStatusCount = AggregateStatusCount; -Card.AggregateStatusNotifications = AggregateStatusNotifications; -Card.AggregateStatusNotification = AggregateStatusNotification; - export default Card; diff --git a/packages/patternfly-3/patternfly-react/src/components/Cards/UtilizationTrendCard/UtilizationCard.js b/packages/patternfly-3/patternfly-react/src/components/Cards/UtilizationTrendCard/UtilizationCard.js index 8e1787d2d3a..0b589f4e73c 100644 --- a/packages/patternfly-3/patternfly-react/src/components/Cards/UtilizationTrendCard/UtilizationCard.js +++ b/packages/patternfly-3/patternfly-react/src/components/Cards/UtilizationTrendCard/UtilizationCard.js @@ -1,7 +1,7 @@ import classNames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; -import { Card } from '../index'; +import Card from '../Card'; const UtilizationCard = ({ children, className, ...props }) => { const classes = classNames('card-pf-utilization', className); diff --git a/packages/patternfly-3/patternfly-react/src/components/Cards/index.js b/packages/patternfly-3/patternfly-react/src/components/Cards/index.js index 64d2530f843..5252339c44c 100644 --- a/packages/patternfly-3/patternfly-react/src/components/Cards/index.js +++ b/packages/patternfly-3/patternfly-react/src/components/Cards/index.js @@ -17,6 +17,24 @@ import { UtilizationCardDetailsLine2 } from './UtilizationTrendCard'; +Card.Title = CardTitle; +Card.Body = CardBody; +Card.Heading = CardHeading; +Card.Footer = CardFooter; +Card.Link = CardLink; +Card.Grid = CardGrid; +Card.DropdownButton = CardDropdownButton; +Card.HeightMatching = CardHeightMatching; +Card.UtilizationCard = UtilizationCard; +Card.UtilizationCardDetails = UtilizationCardDetails; +Card.UtilizationCardDetailsCount = UtilizationCardDetailsCount; +Card.UtilizationCardDetailsDesc = UtilizationCardDetailsDesc; +Card.UtilizationCardDetailsLine1 = UtilizationCardDetailsLine1; +Card.UtilizationCardDetailsLine2 = UtilizationCardDetailsLine2; +Card.AggregateStatusCount = AggregateStatusCount; +Card.AggregateStatusNotifications = AggregateStatusNotifications; +Card.AggregateStatusNotification = AggregateStatusNotification; + export { Card, CardTitle, diff --git a/packages/patternfly-3/react-console/package.json b/packages/patternfly-3/react-console/package.json index fdb4d362a1c..39ca82545a1 100644 --- a/packages/patternfly-3/react-console/package.json +++ b/packages/patternfly-3/react-console/package.json @@ -46,6 +46,17 @@ "xterm": "^3.3.0" }, "devDependencies": { + "babel-cli": "^6.26.0", + "babel-core": "^6.26.0", + "babel-eslint": "^9.0.0", + "babel-jest": "^23.6.0", + "babel-plugin-transform-class-properties": "^6.24.1", + "babel-plugin-transform-export-extensions": "^6.22.0", + "babel-plugin-transform-imports": "^1.5.0", + "babel-plugin-transform-object-assign": "^6.22.0", + "babel-plugin-transform-object-rest-spread": "^6.26.0", + "babel-preset-env": "^1.6.1", + "babel-preset-react": "^6.24.1", "patternfly": "^3.58.0", "patternfly-react": "^2.36.0", "rimraf": "^2.6.2", diff --git a/packages/patternfly-4/.babelrc b/packages/patternfly-4/.babelrc new file mode 100644 index 00000000000..38cc0d3fe51 --- /dev/null +++ b/packages/patternfly-4/.babelrc @@ -0,0 +1,11 @@ +{ + "presets": ["@babel/react"], + "ignore": ["**/__snapshots__", "**/*.d.ts"], + "plugins": [ + "@babel/plugin-transform-typescript", + "babel-plugin-typescript-to-proptypes", + "@babel/plugin-proposal-export-default-from", + "@babel/proposal-class-properties", + "@babel/proposal-object-rest-spread", + ] +} diff --git a/packages/patternfly-4/.babelrc.js b/packages/patternfly-4/.babelrc.js deleted file mode 100644 index 0804442c329..00000000000 --- a/packages/patternfly-4/.babelrc.js +++ /dev/null @@ -1,38 +0,0 @@ -const babelENV = process.env.BABEL_ENV || 'development'; -const modules = babelENV !== 'production:esm' ? 'commonjs' : false; - -module.exports = { - presets: [['env', { modules }], 'react'], - plugins: [ - 'transform-class-properties', - 'transform-export-extensions', - 'transform-object-rest-spread', - 'transform-object-assign', - babelENV !== 'development' && [ - 'transform-imports', - { - '@patternfly/react-icons': { - kebabCase: true, - preventFullImport: true, - transform: importName => { - if (importName.toLowerCase() === 'icon') { - throw new Error('Icon import is not allowed'); - } - const importPath = `icons/${importName}`; - if (!modules) { - return `@patternfly/react-icons/dist/esm/${importPath}`; - } - return `@patternfly/react-icons/dist/js/${importPath}`; - } - } - } - ] - ].filter(Boolean), - ignore: (() => { - const ignore = ['src/**/__snapshots__']; - if (babelENV.includes('production')) { - ignore.push('test.js', '__mocks__'); - } - return ignore; - })() -}; diff --git a/packages/patternfly-4/react-charts/.babelrc b/packages/patternfly-4/react-charts/.babelrc new file mode 100644 index 00000000000..25c4221a16d --- /dev/null +++ b/packages/patternfly-4/react-charts/.babelrc @@ -0,0 +1,3 @@ +{ + "extends": "../.babelrc" +} \ No newline at end of file diff --git a/packages/patternfly-4/react-charts/.babelrc.js b/packages/patternfly-4/react-charts/.babelrc.js deleted file mode 100644 index a59fe297daa..00000000000 --- a/packages/patternfly-4/react-charts/.babelrc.js +++ /dev/null @@ -1,5 +0,0 @@ -const coreConfig = require('../react-core/.babelrc.js'); - -module.exports = { - ...coreConfig -} diff --git a/packages/patternfly-4/react-charts/package.json b/packages/patternfly-4/react-charts/package.json index b46e92c51a3..bc74dbb3e44 100644 --- a/packages/patternfly-4/react-charts/package.json +++ b/packages/patternfly-4/react-charts/package.json @@ -37,10 +37,10 @@ }, "scripts": { "build": "yarn build:babel && yarn build:types && node ./scripts/copyTS.js", - "build:babel": "concurrently 'yarn build:babel:cjs' 'yarn build:babel:esm && yarn build:babel:umd'", - "build:babel:cjs": "cross-env BABEL_ENV=production:cjs babel src --out-dir dist/js --extensions '.js,.ts,.tsx' -q", - "build:babel:esm": "cross-env BABEL_ENV=production:esm babel src --out-dir dist/esm --extensions '.js,.ts,.tsx' -q", - "build:babel:umd": "cross-env BABEL_ENV=production:umd babel dist/esm --out-dir dist/umd --plugins transform-es2015-modules-umd --extensions '.js,.ts,.tsx' -q", + "build:babel": "concurrently 'yarn build:babel:esm && yarn build:babel:umd' 'yarn build:babel:cjs'", + "build:babel:cjs": "babel --extensions '.js,.ts,.tsx' src --out-dir dist/js --presets=@babel/env", + "build:babel:esm": "babel --extensions '.js,.ts,.tsx' src --out-dir dist/esm", + "build:babel:umd": "babel dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd", "build:types": "tsc -p tsconfig.gen-dts.json", "clean": "rimraf dist", "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose --source-maps", @@ -60,9 +60,7 @@ "@babel/core": "^7.0.0", "@babel/plugin-proposal-class-properties": "^7.0.0", "@babel/plugin-proposal-export-default-from": "^7.0.0", - "@babel/plugin-proposal-export-namespace-from": "^7.0.0", "@babel/plugin-proposal-object-rest-spread": "^7.0.0", - "@babel/plugin-transform-object-assign": "^7.0.0", "@babel/plugin-transform-typescript": "^7.0.0", "@babel/preset-env": "^7.0.0", "@babel/preset-react": "^7.0.0", @@ -70,7 +68,6 @@ "@patternfly/react-icons": "^3.9.3", "@patternfly/react-tokens": "^2.5.3", "babel-plugin-transform-es2015-modules-umd": "^6.24.1", - "babel-plugin-transform-imports": "^1.5.0", "babel-plugin-typescript-to-proptypes": "^0.17.1", "css": "^2.2.3", "enzyme": "3.9.0", diff --git a/packages/patternfly-4/react-core/.babelrc b/packages/patternfly-4/react-core/.babelrc new file mode 100644 index 00000000000..25c4221a16d --- /dev/null +++ b/packages/patternfly-4/react-core/.babelrc @@ -0,0 +1,3 @@ +{ + "extends": "../.babelrc" +} \ No newline at end of file diff --git a/packages/patternfly-4/react-core/.babelrc.js b/packages/patternfly-4/react-core/.babelrc.js deleted file mode 100644 index ee1e6c7192e..00000000000 --- a/packages/patternfly-4/react-core/.babelrc.js +++ /dev/null @@ -1,20 +0,0 @@ -const babelENV = process.env.BABEL_ENV || 'development'; -const modules = babelENV !== 'production:esm' ? 'commonjs' : false; - -module.exports = { - presets: [['@babel/env', { modules }], '@babel/react'], - ignore: (() => { - const ignore = ['**/__snapshots__', '**/*.d.ts']; - if (babelENV.includes('production')) { - ignore.push('test.js', '__mocks__'); - } - return ignore; - })(), - plugins: [ - '@babel/plugin-transform-typescript', - 'babel-plugin-typescript-to-proptypes', - '@babel/plugin-proposal-export-default-from', - '@babel/proposal-class-properties', - '@babel/proposal-object-rest-spread', - ] -}; diff --git a/packages/patternfly-4/react-core/package.json b/packages/patternfly-4/react-core/package.json index 62a52cc996a..db9875d1541 100644 --- a/packages/patternfly-4/react-core/package.json +++ b/packages/patternfly-4/react-core/package.json @@ -31,9 +31,9 @@ "scripts": { "build": "yarn typecheck && yarn build:babel && yarn build:types && node ./scripts/copyTS.js && node ./scripts/copyStyles.js", "build:babel": "concurrently 'yarn build:babel:esm && yarn build:babel:umd' 'yarn build:babel:cjs'", - "build:babel:cjs": "babel src --out-dir dist/js --extensions '.js,.ts,.tsx' -q", - "build:babel:esm": "babel src --out-dir dist/esm --extensions '.js,.ts,.tsx' -q", - "build:babel:umd": "babel dist/esm --out-dir dist/umd --plugins transform-es2015-modules-umd -q", + "build:babel:cjs": "babel --extensions '.js,.ts,.tsx' src --out-dir dist/js --presets=@babel/env", + "build:babel:esm": "babel --extensions '.js,.ts,.tsx' src --out-dir dist/esm", + "build:babel:umd": "babel dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd", "build:types": "tsc -p tsconfig.gen-dts.json", "clean": "rimraf dist", "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose", @@ -54,9 +54,7 @@ "@babel/core": "^7.0.0", "@babel/plugin-proposal-class-properties": "^7.0.0", "@babel/plugin-proposal-export-default-from": "^7.0.0", - "@babel/plugin-proposal-export-namespace-from": "^7.0.0", "@babel/plugin-proposal-object-rest-spread": "^7.0.0", - "@babel/plugin-transform-object-assign": "^7.0.0", "@babel/plugin-transform-typescript": "^7.0.0", "@babel/preset-env": "^7.0.0", "@babel/preset-react": "^7.0.0", @@ -68,7 +66,6 @@ "@types/react": "~16.8.0", "@types/react-dom": "~16.8.0", "babel-plugin-transform-es2015-modules-umd": "^6.24.1", - "babel-plugin-transform-imports": "^1.5.0", "babel-plugin-typescript-to-proptypes": "^0.17.1", "css": "^2.2.3", "enzyme": "3.9.0", diff --git a/packages/patternfly-4/react-inline-edit-extension/.babelrc b/packages/patternfly-4/react-inline-edit-extension/.babelrc index 36d1937e56b..25c4221a16d 100644 --- a/packages/patternfly-4/react-inline-edit-extension/.babelrc +++ b/packages/patternfly-4/react-inline-edit-extension/.babelrc @@ -1,5 +1,3 @@ { - "presets": [ - "../.babelrc.js" - ] -} + "extends": "../.babelrc" +} \ No newline at end of file diff --git a/packages/patternfly-4/react-inline-edit-extension/package.json b/packages/patternfly-4/react-inline-edit-extension/package.json index af038ce54e3..d507fe70643 100644 --- a/packages/patternfly-4/react-inline-edit-extension/package.json +++ b/packages/patternfly-4/react-inline-edit-extension/package.json @@ -42,11 +42,11 @@ "react-dom": "^15.6.2 || ^16.4.0" }, "scripts": { - "build": "yarn build:babel && yarn build:ts", - "build:babel": "concurrently \"yarn build:babel:cjs\" \"yarn build:babel:esm\"", - "build:babel:cjs": "cross-env BABEL_ENV=production:cjs babel src --out-dir dist/js -q", - "build:babel:esm": "cross-env BABEL_ENV=production:esm babel src --out-dir dist/esm -q", - "build:ts": "node ./scripts/copyTS.js", + "build": "yarn build:babel && node ./scripts/copyTS.js", + "build:babel": "concurrently 'yarn build:babel:esm && yarn build:babel:umd' 'yarn build:babel:cjs'", + "build:babel:cjs": "babel --extensions '.js,.ts,.tsx' src --out-dir dist/js --presets=@babel/env", + "build:babel:esm": "babel --extensions '.js,.ts,.tsx' src --out-dir dist/esm", + "build:babel:umd": "babel dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd", "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose", "postbuild": "node ./build/copyStyles.js" }, @@ -54,6 +54,16 @@ "@patternfly/react-tokens": "^2.5.3" }, "devDependencies": { + "@babel/cli": "^7.0.0", + "@babel/core": "^7.0.0", + "@babel/plugin-proposal-class-properties": "^7.0.0", + "@babel/plugin-proposal-export-default-from": "^7.0.0", + "@babel/plugin-proposal-object-rest-spread": "^7.0.0", + "@babel/plugin-transform-typescript": "^7.0.0", + "@babel/preset-env": "^7.0.0", + "@babel/preset-react": "^7.0.0", + "babel-plugin-transform-es2015-modules-umd": "^6.24.1", + "babel-plugin-typescript-to-proptypes": "^0.17.1", "css": "^2.2.3", "enzyme": "3.9.0", "fs-extra": "^6.0.1", diff --git a/packages/patternfly-4/react-styled-system/.babelrc b/packages/patternfly-4/react-styled-system/.babelrc index 4aa312ac898..25c4221a16d 100644 --- a/packages/patternfly-4/react-styled-system/.babelrc +++ b/packages/patternfly-4/react-styled-system/.babelrc @@ -1,5 +1,3 @@ { - "presets": [ - "../.babelrc.js" - ] + "extends": "../.babelrc" } \ No newline at end of file diff --git a/packages/patternfly-4/react-styled-system/package.json b/packages/patternfly-4/react-styled-system/package.json index ca1e0b901c9..8cbb14d2046 100644 --- a/packages/patternfly-4/react-styled-system/package.json +++ b/packages/patternfly-4/react-styled-system/package.json @@ -27,9 +27,10 @@ "homepage": "https://github.com/patternfly/patternfly-react#readme", "scripts": { "build": "yarn build:babel && node ./scripts/copyTS.js", - "build:babel": "concurrently 'yarn build:babel:cjs' 'yarn build:babel:esm'", - "build:babel:cjs": "cross-env BABEL_ENV=production:cjs babel src --out-dir dist/js -q", - "build:babel:esm": "cross-env BABEL_ENV=production:esm babel src --out-dir dist/esm -q", + "build:babel": "concurrently 'yarn build:babel:esm && yarn build:babel:umd' 'yarn build:babel:cjs'", + "build:babel:cjs": "babel --extensions '.js,.ts,.tsx' src --out-dir dist/js --presets=@babel/env", + "build:babel:esm": "babel --extensions '.js,.ts,.tsx' src --out-dir dist/esm", + "build:babel:umd": "babel dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd", "clean": "rimraf dist", "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose" }, @@ -45,8 +46,17 @@ "react": "^16.4.0" }, "devDependencies": { + "@babel/cli": "^7.0.0", + "@babel/core": "^7.0.0", + "@babel/plugin-proposal-class-properties": "^7.0.0", + "@babel/plugin-proposal-export-default-from": "^7.0.0", + "@babel/plugin-proposal-object-rest-spread": "^7.0.0", + "@babel/plugin-transform-typescript": "^7.0.0", + "@babel/preset-env": "^7.0.0", + "@babel/preset-react": "^7.0.0", "@patternfly/patternfly": "2.8.2", - "babel-core": "^6.26.0", + "babel-plugin-transform-es2015-modules-umd": "^6.24.1", + "babel-plugin-typescript-to-proptypes": "^0.17.1", "css": "^2.2.3", "enzyme": "3.9.0", "fs-extra": "^6.0.1", diff --git a/packages/patternfly-4/react-styles/.babelrc b/packages/patternfly-4/react-styles/.babelrc index 8ade66d8e14..25c4221a16d 100644 --- a/packages/patternfly-4/react-styles/.babelrc +++ b/packages/patternfly-4/react-styles/.babelrc @@ -1,3 +1,3 @@ { - "presets": ["../.babelrc.js"] -} + "extends": "../.babelrc" +} \ No newline at end of file diff --git a/packages/patternfly-4/react-styles/package.json b/packages/patternfly-4/react-styles/package.json index d1b38536b59..9922c87a899 100644 --- a/packages/patternfly-4/react-styles/package.json +++ b/packages/patternfly-4/react-styles/package.json @@ -13,10 +13,10 @@ }, "scripts": { "build": "yarn build:babel && node ./scripts/copyTS.js && yarn build:css && yarn build:types && node ./scripts/copyStyles.js", - "build:babel": "concurrently 'yarn build:babel:cjs' 'yarn build:babel:esm && yarn build:babel:umd'", - "build:babel:cjs": "cross-env BABEL_ENV=production:cjs babel src --out-dir dist/js -q", - "build:babel:esm": "cross-env BABEL_ENV=production:esm babel src --out-dir dist/esm -q", - "build:babel:umd": "cross-env BABEL_ENV=production:umd babel dist/esm --out-dir dist/umd --plugins transform-es2015-modules-umd -q", + "build:babel": "concurrently 'yarn build:babel:esm && yarn build:babel:umd' 'yarn build:babel:cjs'", + "build:babel:cjs": "babel --extensions '.js,.ts,.tsx' src --out-dir dist/js --presets=@babel/preset-env", + "build:babel:esm": "babel --extensions '.js,.ts,.tsx' src --out-dir dist/esm", + "build:babel:umd": "babel dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd", "build:css": "node src/generateClasses.js", "build:types": "tsc", "clean": "rimraf dist css", @@ -38,8 +38,18 @@ "typescript": "3.4.5" }, "devDependencies": { + "@babel/cli": "^7.0.0", + "@babel/core": "^7.0.0", + "@babel/plugin-proposal-class-properties": "^7.0.0", + "@babel/plugin-proposal-export-default-from": "^7.0.0", + "@babel/plugin-proposal-object-rest-spread": "^7.0.0", + "@babel/plugin-transform-flow-strip-types": "^7.0.0", + "@babel/plugin-transform-typescript": "^7.0.0", + "@babel/preset-env": "^7.0.0", + "@babel/preset-react": "^7.0.0", "@patternfly/patternfly": "2.8.2", "babel-plugin-transform-es2015-modules-umd": "^6.24.1", + "babel-plugin-typescript-to-proptypes": "^0.17.1", "glob": "^7.1.2", "rimraf": "^2.6.2" }, diff --git a/packages/patternfly-4/react-table/.babelrc b/packages/patternfly-4/react-table/.babelrc index 36d1937e56b..25c4221a16d 100644 --- a/packages/patternfly-4/react-table/.babelrc +++ b/packages/patternfly-4/react-table/.babelrc @@ -1,5 +1,3 @@ { - "presets": [ - "../.babelrc.js" - ] -} + "extends": "../.babelrc" +} \ No newline at end of file diff --git a/packages/patternfly-4/react-table/package.json b/packages/patternfly-4/react-table/package.json index eede6976ebb..4e22418cc18 100644 --- a/packages/patternfly-4/react-table/package.json +++ b/packages/patternfly-4/react-table/package.json @@ -31,6 +31,7 @@ "@patternfly/react-core": "^3.37.0", "@patternfly/react-icons": "^3.9.3", "@patternfly/react-styles": "^3.3.0", + "@patternfly/react-tokens": "^2.5.3", "classnames": "^2.2.5", "exenv": "^1.2.2" }, @@ -43,14 +44,23 @@ "scripts": { "build": "yarn build:babel && node ./scripts/copyTS.js && node ./build/copyStyles.js", "build:babel": "concurrently 'yarn build:babel:esm && yarn build:babel:umd' 'yarn build:babel:cjs'", - "build:babel:cjs": "babel src --out-dir dist/js -q", - "build:babel:esm": "babel src --out-dir dist/esm -q", - "build:babel:umd": "babel dist/esm --out-dir dist/umd --plugins transform-es2015-modules-umd --extensions '.js,.ts,.tsx' -q", + "build:babel:cjs": "babel --extensions '.js,.ts,.tsx' src --out-dir dist/js --presets=@babel/env", + "build:babel:esm": "babel --extensions '.js,.ts,.tsx' src --out-dir dist/esm", + "build:babel:umd": "babel dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd", "clean": "rimraf dist", "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose" }, "devDependencies": { - "@patternfly/react-tokens": "^2.5.3", + "@babel/cli": "^7.0.0", + "@babel/core": "^7.0.0", + "@babel/plugin-proposal-class-properties": "^7.0.0", + "@babel/plugin-proposal-export-default-from": "^7.0.0", + "@babel/plugin-proposal-object-rest-spread": "^7.0.0", + "@babel/plugin-transform-typescript": "^7.0.0", + "@babel/preset-env": "^7.0.0", + "@babel/preset-react": "^7.0.0", + "babel-plugin-transform-es2015-modules-umd": "^6.24.1", + "babel-plugin-typescript-to-proptypes": "^0.17.1", "css": "^2.2.3", "enzyme": "3.9.0", "fs-extra": "^6.0.1", diff --git a/packages/patternfly-4/react-tokens/package.json b/packages/patternfly-4/react-tokens/package.json index 33a49a89a34..d673bf4f364 100644 --- a/packages/patternfly-4/react-tokens/package.json +++ b/packages/patternfly-4/react-tokens/package.json @@ -26,10 +26,12 @@ "homepage": "https://github.com/patternfly/patternfly-react#readme", "scripts": { "build": "node src/generateTokens.js && yarn build:babel:umd", - "build:babel:umd": "cross-env BABEL_ENV=production:umd babel dist/esm --out-dir dist/umd --plugins transform-es2015-modules-umd -q", + "build:babel:umd": "babel dist/esm --out-dir dist/umd --plugins transform-es2015-modules-umd -q", "clean": "rimraf dist" }, "devDependencies": { + "@babel/cli": "^7.0.0", + "@babel/core": "^7.0.0", "@patternfly/patternfly": "2.8.2", "babel-plugin-transform-es2015-modules-umd": "^6.24.1", "css": "^2.2.3", diff --git a/packages/patternfly-4/react-virtualized-extension/.babelrc b/packages/patternfly-4/react-virtualized-extension/.babelrc index 40b9ca6c624..25c4221a16d 100644 --- a/packages/patternfly-4/react-virtualized-extension/.babelrc +++ b/packages/patternfly-4/react-virtualized-extension/.babelrc @@ -1,6 +1,3 @@ { - "presets": [ - "../.babelrc.js", - "flow" - ] + "extends": "../.babelrc" } \ No newline at end of file diff --git a/packages/patternfly-4/react-virtualized-extension/package.json b/packages/patternfly-4/react-virtualized-extension/package.json index cdd4a85f9c8..b2e23c562c5 100644 --- a/packages/patternfly-4/react-virtualized-extension/package.json +++ b/packages/patternfly-4/react-virtualized-extension/package.json @@ -48,14 +48,23 @@ "scripts": { "build": "yarn build:babel && node ./scripts/copyTS.js && node ./build/copyStyles.js", "build:babel": "concurrently 'yarn build:babel:esm && yarn build:babel:umd' 'yarn build:babel:cjs'", - "build:babel:cjs": "babel src --out-dir dist/js -q", - "build:babel:esm": "babel src --out-dir dist/esm -q", - "build:babel:umd": "babel dist/esm --out-dir dist/umd --plugins transform-es2015-modules-umd --extensions '.js,.ts,.tsx' -q", + "build:babel:cjs": "babel --extensions '.js,.ts,.tsx' src --out-dir dist/js --presets=@babel/env", + "build:babel:esm": "babel --extensions '.js,.ts,.tsx' src --out-dir dist/esm", + "build:babel:umd": "babel dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd", "clean": "rimraf dist", "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose" }, "devDependencies": { - "babel-preset-flow": "^6.23.0", + "@babel/cli": "^7.0.0", + "@babel/core": "^7.0.0", + "@babel/plugin-proposal-class-properties": "^7.0.0", + "@babel/plugin-proposal-export-default-from": "^7.0.0", + "@babel/plugin-proposal-object-rest-spread": "^7.0.0", + "@babel/plugin-transform-typescript": "^7.0.0", + "@babel/preset-env": "^7.0.0", + "@babel/preset-react": "^7.0.0", + "babel-plugin-transform-es2015-modules-umd": "^6.24.1", + "babel-plugin-typescript-to-proptypes": "^0.17.1", "css": "^2.2.3", "fs-extra": "^6.0.1", "glob": "^7.1.2", diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualGrid.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualGrid.ts similarity index 97% rename from packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualGrid.js rename to packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualGrid.ts index ccb17f4b936..b8c95f18e05 100644 --- a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualGrid.js +++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualGrid.ts @@ -1,23 +1,4 @@ -/** @flow */ /* eslint-disable */ - -import type { - CellRenderer, - CellRangeRenderer, - CellPosition, - CellSize, - CellSizeGetter, - NoContentRenderer, - Scroll, - ScrollbarPresenceChange, - RenderedSection, - OverscanIndicesGetter, - Alignment, - CellCache, - StyleCache -} from './types'; -import type { AnimationTimeoutId } from './utils/requestAnimationTimeout'; - import * as React from 'react'; import clsx from 'clsx'; import calculateSizeAndPositionDataAndUpdateScrollOffset from './utils/calculateSizeAndPositionDataAndUpdateScrollOffset'; @@ -33,6 +14,22 @@ import scrollbarSize from 'dom-helpers/util/scrollbarSize'; import { polyfill } from 'react-lifecycles-compat'; import { requestAnimationTimeout, cancelAnimationTimeout } from './utils/requestAnimationTimeout'; +import { + CellRenderer, + CellRangeRenderer, + CellPosition, + CellSize, + CellSizeGetter, + NoContentRenderer, + Scroll, + ScrollbarPresenceChange, + RenderedSection, + OverscanIndicesGetter, + Alignment, + CellCache, + StyleCache +} from './types'; +import { overflow } from 'styled-system'; /** * Specifies the number of milliseconds during which to disable pointer events while a scroll is in progress. * This improves performance and makes scrolling smoother. @@ -93,19 +90,19 @@ type Props = { columnWidth: CellSize, /** Unfiltered props for the VirtualGrid container. */ - containerProps?: Object, + containerProps?: any, /** ARIA role for the cell-container. */ containerRole: string, /** Optional inline style applied to inner cell-container */ - containerStyle: Object, + containerStyle: any, /** * If CellMeasurer is used to measure this VirtualGrid's children, this should be a pointer to its CellMeasurerCache. * A shared CellMeasurerCache reference enables VirtualGrid and CellMeasurer to share measurement data. */ - deferredMeasurementCache?: Object, + deferredMeasurementCache?: any, /** * Used to estimate the total width of a VirtualGrid before all of its columns have actually been measured. @@ -212,10 +209,10 @@ type Props = { scrollToRow: number, /** Optional inline style */ - style: Object, + style: any, /** Tab index for focus */ - tabIndex: ?number, + tabIndex?: number, /** Width of VirtualGrid; this property determines the number of visible (vs virtualized) columns. */ width: number, @@ -236,8 +233,8 @@ type InstanceProps = { prevIsScrolling: boolean, prevScrollToColumn: number, prevScrollToRow: number, - prevScrollLeft: ?number, - prevScrollTop: ?number, + prevScrollLeft?: number, + prevScrollTop?: number, columnSizeAndPositionManager: ScalingCellSizeAndPositionManager, rowSizeAndPositionManager: ScalingCellSizeAndPositionManager, @@ -247,14 +244,14 @@ type InstanceProps = { }; type State = { - instanceProps: InstanceProps, - isScrolling: boolean, - scrollDirectionHorizontal: -1 | 1, - scrollDirectionVertical: -1 | 1, - scrollLeft: number, - scrollTop: number, - scrollPositionChangeReason: 'observed' | 'requested' | null, - needToResetStyleCache: boolean + instanceProps?: InstanceProps, + isScrolling?: boolean, + scrollDirectionHorizontal?: -1 | 1, + scrollDirectionVertical?: -1 | 1, + scrollLeft?: number, + scrollTop?: number, + scrollPositionChangeReason?: 'observed' | 'requested', + needToResetStyleCache?: boolean }; /** @@ -307,7 +304,7 @@ class VirtualGrid extends React.PureComponent { _scrollbarPresenceChanged = false; _scrollingContainer: Element; - _childrenToDisplay: React.Element<*>[]; + _childrenToDisplay: React.ReactElement[]; _columnStartIndex: number; _columnStopIndex: number; @@ -321,7 +318,7 @@ class VirtualGrid extends React.PureComponent { _initialScrollTop: number; _initialScrollLeft: number; - _disablePointerEventsTimeoutId: ?AnimationTimeoutId; + _disablePointerEventsTimeoutId; _styleCache: StyleCache = {}; _cellCache: CellCache = {}; @@ -461,11 +458,11 @@ class VirtualGrid extends React.PureComponent { : SCROLL_DIRECTION_BACKWARD : this.state.scrollDirectionVertical; - const newState: $Shape = { + const newState: State = { isScrolling: true, scrollDirectionHorizontal, scrollDirectionVertical, - scrollPositionChangeReason: SCROLL_POSITION_CHANGE_REASONS.OBSERVED + scrollPositionChangeReason: SCROLL_POSITION_CHANGE_REASONS.OBSERVED as 'observed' | 'requested' }; if (!autoHeight) { @@ -523,7 +520,7 @@ class VirtualGrid extends React.PureComponent { * This function should be called if dynamic column or row sizes have changed but nothing else has. * Since VirtualGrid only receives :columnCount and :rowCount it has no way of detecting when the underlying data changes. */ - recomputeVirtualGridSize({ columnIndex = 0, rowIndex = 0 }: CellPosition = {}) { + recomputeVirtualGridSize({ columnIndex = 0, rowIndex = 0 } = {}) { const { scrollToColumn, scrollToRow } = this.props; const { instanceProps } = this.state; @@ -779,8 +776,8 @@ class VirtualGrid extends React.PureComponent { * 2) New scroll props overriding the current state * 3) Cells-count or cells-size has changed, making previous scroll offsets invalid */ - static getDerivedStateFromProps(nextProps: Props, prevState: State): $Shape { - const newState = {}; + static getDerivedStateFromProps(nextProps: Props, prevState: State): State { + const newState: State = {}; const { instanceProps } = prevState; if ( @@ -917,7 +914,17 @@ class VirtualGrid extends React.PureComponent { const isScrolling = this._isScrolling(); - const gridStyle: Object = { + const gridStyle: { + boxSizing: string, + direction: string, + height: string | number, + position: string, + width: string | number, + WebkitOverflowScrolling: string, + willChange: string, + overflowX?: string, + overflowY?: string + } = { boxSizing: 'border-box', direction: 'ltr', height: autoHeight ? 'auto' : height, @@ -1291,8 +1298,8 @@ class VirtualGrid extends React.PureComponent { prevState: State, scrollLeft?: number, scrollTop?: number - }): $Shape { - const newState: Object = { + }): State { + const newState: any = { scrollPositionChangeReason: SCROLL_POSITION_CHANGE_REASONS.REQUESTED }; @@ -1335,7 +1342,7 @@ class VirtualGrid extends React.PureComponent { } static _wrapSizeGetter(value: CellSize): CellSizeGetter { - return typeof value === 'function' ? value : () => (value: any); + return typeof value === 'function' ? value : () => value as any; } static _getCalculatedScrollLeft(nextProps: Props, prevState: State) { @@ -1363,7 +1370,7 @@ class VirtualGrid extends React.PureComponent { return VirtualGrid._getCalculatedScrollLeft(props, state); } - static _getScrollLeftForScrollToColumnStateUpdate(nextProps: Props, prevState: State): $Shape { + static _getScrollLeftForScrollToColumnStateUpdate(nextProps: Props, prevState: State): State { const { scrollLeft } = prevState; const calculatedScrollLeft = VirtualGrid._getCalculatedScrollLeft(nextProps, prevState); @@ -1437,7 +1444,7 @@ class VirtualGrid extends React.PureComponent { } } - static _getScrollTopForScrollToRowStateUpdate(nextProps: Props, prevState: State): $Shape { + static _getScrollTopForScrollToRowStateUpdate(nextProps: Props, prevState: State): State { const { scrollTop } = prevState; const calculatedScrollTop = VirtualGrid._getCalculatedScrollTop(nextProps, prevState); @@ -1464,7 +1471,7 @@ class VirtualGrid extends React.PureComponent { // This invalid event can be detected by comparing event.target to this component's scrollable DOM element. // See issue #404 for more information. if (event.target === this._scrollingContainer) { - this.handleScrollEvent((event.target: any)); + this.handleScrollEvent(event.target as any); } }; } diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualTableBody.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualTableBody.ts similarity index 96% rename from packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualTableBody.js rename to packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualTableBody.ts index 02180fc3760..d6708ecf229 100644 --- a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualTableBody.js +++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualTableBody.ts @@ -1,8 +1,7 @@ -/** @flow */ /* eslint-disable */ import * as React from 'react'; -import type { +import { NoContentRenderer, Alignment, CellSize, @@ -11,8 +10,6 @@ import type { RenderedSection, CellRendererParams, Scroll as VirtualGridScroll, - RowRenderer, - RenderedRows, Scroll } from './types'; @@ -55,7 +52,7 @@ type Props = { /** Callback invoked with information about the slice of rows that were just rendered. */ - onRowsRendered: (params: RenderedRows) => void, + onRowsRendered: (params: any) => void, /** * Callback invoked whenever the scroll offset changes within the inner scrollable region. @@ -76,7 +73,7 @@ type Props = { rowHeight: CellSize, /** Responsible for rendering a row given an index; ({ index: number }): node */ - rowRenderer: RowRenderer, + rowRenderer: any, /** Number of rows in list. */ rowCount: number, @@ -99,9 +96,9 @@ type Props = { /** Width of list */ width: number, - columns: Array, + columns: any[], - rows: Array + rows: any[] }; export default class VirtualTableBody extends React.PureComponent { @@ -118,7 +115,7 @@ export default class VirtualTableBody extends React.PureComponent { style: {} }; - VirtualGrid: ?React.ElementRef; + VirtualGrid: any; forceUpdateVirtualGrid() { if (this.VirtualGrid) { @@ -199,11 +196,12 @@ export default class VirtualTableBody extends React.PureComponent { const classNames = clsx('ReactVirtualized__List', className); + const VirtualGridAny = VirtualGrid as any; return ( // note: these aria props if rendered will break a11y for role="presentation" // this approach attempts to fix non standard table grids // see: https://www.html5accessibility.com/tests/aria-table-fix.html - { }); }; - _setRef = (ref: ?React.ElementRef) => { + _setRef = (ref: any) => { this.VirtualGrid = ref; }; diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/accessibilityOverscanIndicesGetter.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/accessibilityOverscanIndicesGetter.ts similarity index 93% rename from packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/accessibilityOverscanIndicesGetter.js rename to packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/accessibilityOverscanIndicesGetter.ts index 24cb2384f7a..c1bc8ace6f8 100644 --- a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/accessibilityOverscanIndicesGetter.js +++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/accessibilityOverscanIndicesGetter.ts @@ -1,6 +1,4 @@ -// @flow - -import type { OverscanIndicesGetterParams, OverscanIndices } from './types'; +import { OverscanIndicesGetterParams, OverscanIndices } from './types'; export const SCROLL_DIRECTION_BACKWARD = -1; export const SCROLL_DIRECTION_FORWARD = 1; diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultCellRangeRenderer.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultCellRangeRenderer.ts similarity index 98% rename from packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultCellRangeRenderer.js rename to packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultCellRangeRenderer.ts index 857546d5216..493b5104b60 100644 --- a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultCellRangeRenderer.js +++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultCellRangeRenderer.ts @@ -1,7 +1,6 @@ -/** @flow */ /* eslint-disable */ -import type { CellRangeRendererParams } from './types'; +import { CellRangeRendererParams } from './types'; /** * Default implementation of cellRangeRenderer used by Grid. diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultOverscanIndicesGetter.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultOverscanIndicesGetter.ts similarity index 91% rename from packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultOverscanIndicesGetter.js rename to packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultOverscanIndicesGetter.ts index 4e2ed49204f..7ea879f740b 100644 --- a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultOverscanIndicesGetter.js +++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultOverscanIndicesGetter.ts @@ -1,6 +1,4 @@ -// @flow - -import type { OverscanIndicesGetterParams, OverscanIndices } from './types'; +import { OverscanIndicesGetterParams, OverscanIndices } from './types'; export const SCROLL_DIRECTION_BACKWARD = -1; export const SCROLL_DIRECTION_FORWARD = 1; diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/index.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/index.ts similarity index 100% rename from packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/index.js rename to packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/index.ts diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/types.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/types.ts similarity index 84% rename from packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/types.js rename to packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/types.ts index fd450b44a15..b8b3109eb7d 100644 --- a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/types.js +++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/types.ts @@ -1,24 +1,22 @@ -// @flow - import * as React from 'react'; import ScalingCellSizeAndPositionManager from './utils/ScalingCellSizeAndPositionManager'; -export type CellPosition = { columnIndex: number, rowIndex: number }; +export type CellPosition = { columnIndex?: number, rowIndex?: number }; export type CellRendererParams = { columnIndex: number, isScrolling: boolean, isVisible: boolean, key: string, - parent: Object, + parent: any, rowIndex: number, - style: Object + style: any }; -export type CellRenderer = (props: CellRendererParams) => React.Element<*>; +export type CellRenderer = (props: CellRendererParams) => React.ReactElement; -export type CellCache = { [key: string]: React.Element<*> }; -export type StyleCache = { [key: string]: Object }; +export type CellCache = { [key: string]: React.ReactElement }; +export type StyleCache = { [key: string]: any }; export type CellRangeRendererParams = { cellCache: CellCache, @@ -26,11 +24,11 @@ export type CellRangeRendererParams = { columnSizeAndPositionManager: ScalingCellSizeAndPositionManager, columnStartIndex: number, columnStopIndex: number, - deferredMeasurementCache?: Object, + deferredMeasurementCache?: any, horizontalOffsetAdjustment: number, isScrolling: boolean, isScrollingOptOut: boolean, - parent: Object, + parent: any, rowSizeAndPositionManager: ScalingCellSizeAndPositionManager, rowStartIndex: number, rowStopIndex: number, @@ -38,17 +36,17 @@ export type CellRangeRendererParams = { scrollTop: number, styleCache: StyleCache, verticalOffsetAdjustment: number, - visibleColumnIndices: Object, - visibleRowIndices: Object + visibleColumnIndices: any, + visibleRowIndices: any }; -export type CellRangeRenderer = (params: CellRangeRendererParams) => React.Element<*>[]; +export type CellRangeRenderer = (params: CellRangeRendererParams) => React.ReactElement[]; export type CellSizeGetter = (params: { index: number }) => number; export type CellSize = CellSizeGetter | number; -export type NoContentRenderer = () => React.Element<*> | null; +export type NoContentRenderer = () => React.ReactElement | null; export type Scroll = { clientHeight: number, diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/CellSizeAndPositionManager.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/CellSizeAndPositionManager.ts similarity index 98% rename from packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/CellSizeAndPositionManager.js rename to packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/CellSizeAndPositionManager.ts index 64cd9021196..7c32f03fd2a 100644 --- a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/CellSizeAndPositionManager.js +++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/CellSizeAndPositionManager.ts @@ -1,8 +1,7 @@ -/** @flow */ /* eslint-disable */ import LinearLayoutVector from 'linear-layout-vector'; -import type { Alignment, CellSizeGetter, VisibleCellRange } from '../types'; +import { Alignment, CellSizeGetter, VisibleCellRange } from '../types'; type CellSizeAndPositionManagerParams = { cellCount: number, @@ -40,7 +39,7 @@ type SizeAndPositionData = { export default class CellSizeAndPositionManager { // Cache of size and position data for cells, mapped by cell index. // Note that invalid values may exist in this map so only rely on cells up to this._lastMeasuredIndex - _layoutVector: LinearLayoutVector; + _layoutVector; // Measurements for cells up to this index can be trusted; cells afterward should be estimated. _lastMeasuredIndex = -1; diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/ScalingCellSizeAndPositionManager.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/ScalingCellSizeAndPositionManager.ts similarity index 98% rename from packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/ScalingCellSizeAndPositionManager.js rename to packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/ScalingCellSizeAndPositionManager.ts index 3686a83af4d..3414b9a910f 100644 --- a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/ScalingCellSizeAndPositionManager.js +++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/ScalingCellSizeAndPositionManager.ts @@ -1,7 +1,6 @@ -/** @flow */ /* eslint-disable */ -import type { Alignment, CellSizeGetter, VisibleCellRange } from '../types'; +import { Alignment, CellSizeGetter, VisibleCellRange } from '../types'; import CellSizeAndPositionManager from './CellSizeAndPositionManager'; import { getMaxElementSize } from './maxElementSize.js'; diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/animationFrame.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/animationFrame.ts similarity index 100% rename from packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/animationFrame.js rename to packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/animationFrame.ts diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/calculateSizeAndPositionDataAndUpdateScrollOffset.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/calculateSizeAndPositionDataAndUpdateScrollOffset.ts similarity index 96% rename from packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/calculateSizeAndPositionDataAndUpdateScrollOffset.js rename to packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/calculateSizeAndPositionDataAndUpdateScrollOffset.ts index f5c5eb2909f..a249213838c 100644 --- a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/calculateSizeAndPositionDataAndUpdateScrollOffset.js +++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/calculateSizeAndPositionDataAndUpdateScrollOffset.ts @@ -1,5 +1,3 @@ -// @flow - /** * Helper method that determines when to recalculate row or column metadata. */ @@ -9,7 +7,7 @@ type Params = { cellCount: number, // Width or height of cells for the current axis - cellSize: ?number, + cellSize?: number, // Method to invoke if cell metadata should be recalculated computeMetadataCallback: (props: T) => void, @@ -21,7 +19,7 @@ type Params = { nextCellsCount: number, // Newly updated width or height of cells for the current axis - nextCellSize: ?number, + nextCellSize?: number, // Newly updated scroll-to-index nextScrollToIndex: number, @@ -43,7 +41,7 @@ export default function calculateSizeAndPositionDataAndUpdateScrollOffset({ nextScrollToIndex, scrollToIndex, updateScrollOffsetForScrollToIndex -}: Params<*>) { +}: Params) { // Don't compare cell sizes if they are functions because inline functions would cause infinite loops. // In that event users should use the manual recompute methods to inform of changes. if ( diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/createCallbackMemoizer.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/createCallbackMemoizer.ts similarity index 100% rename from packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/createCallbackMemoizer.js rename to packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/createCallbackMemoizer.ts diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/maxElementSize.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/maxElementSize.ts similarity index 78% rename from packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/maxElementSize.js rename to packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/maxElementSize.ts index 506c0c5b62a..ebd82d343dc 100644 --- a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/maxElementSize.js +++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/maxElementSize.ts @@ -1,11 +1,9 @@ -// @flow - const DEFAULT_MAX_ELEMENT_SIZE = 1500000; const CHROME_MAX_ELEMENT_SIZE = 1.67771e7; const isBrowser = () => typeof window !== 'undefined'; -const isChrome = () => !!window.chrome && !!window.chrome.webstore; +const isChrome = () => !!(window as any).chrome && !!(window as any).chrome.webstore; export const getMaxElementSize = (): number => { if (isBrowser()) { diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/requestAnimationTimeout.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/requestAnimationTimeout.ts similarity index 100% rename from packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/requestAnimationTimeout.js rename to packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/requestAnimationTimeout.ts diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/updateScrollIndexHelper.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/updateScrollIndexHelper.ts similarity index 97% rename from packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/updateScrollIndexHelper.js rename to packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/updateScrollIndexHelper.ts index c0cb6347b9f..e5d5e0fd96c 100644 --- a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/updateScrollIndexHelper.js +++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/updateScrollIndexHelper.ts @@ -1,6 +1,4 @@ -// @flow - -import type { Alignment, CellSize } from '../types'; +import { Alignment, CellSize } from '../types'; import ScalingCellSizeAndPositionManager from './ScalingCellSizeAndPositionManager.js'; diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/index.js b/packages/patternfly-4/react-virtualized-extension/src/components/index.ts similarity index 100% rename from packages/patternfly-4/react-virtualized-extension/src/components/index.js rename to packages/patternfly-4/react-virtualized-extension/src/components/index.ts diff --git a/packages/patternfly-4/react-virtualized-extension/src/index.js b/packages/patternfly-4/react-virtualized-extension/src/index.ts similarity index 100% rename from packages/patternfly-4/react-virtualized-extension/src/index.js rename to packages/patternfly-4/react-virtualized-extension/src/index.ts diff --git a/packages/react-icons/.babelrc b/packages/react-icons/.babelrc index d0be3075281..d51d42dfe95 100644 --- a/packages/react-icons/.babelrc +++ b/packages/react-icons/.babelrc @@ -1,3 +1,3 @@ { - "presets": ["../patternfly-4/.babelrc.js"] -} + "extends": "../patternfly-4/.babelrc" +} \ No newline at end of file diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json index 6087c271ad2..34a67d266b0 100644 --- a/packages/react-icons/package.json +++ b/packages/react-icons/package.json @@ -25,17 +25,26 @@ "homepage": "https://github.com/patternfly/patternfly-react#readme", "scripts": { "build": "node ./build/generateIcons.js && yarn build:babel && node ./scripts/copyTS.js", - "build:babel": "concurrently 'yarn build:babel:cjs' 'yarn build:babel:esm' && yarn build:babel:umd", - "build:babel:cjs": "cross-env BABEL_ENV=production:cjs babel src --out-dir dist/js -q", - "build:babel:esm": "cross-env BABEL_ENV=production:esm babel src --out-dir dist/esm -q", - "build:babel:umd": "cross-env BABEL_ENV=production:umd babel dist/esm --out-dir dist/umd --plugins transform-es2015-modules-umd -q", + "build:babel": "concurrently 'yarn build:babel:esm && yarn build:babel:umd' 'yarn build:babel:cjs'", + "build:babel:cjs": "babel --extensions '.js,.ts,.tsx' src --out-dir dist/js --presets=@babel/env", + "build:babel:esm": "babel --extensions '.js,.ts,.tsx' src --out-dir dist/esm", + "build:babel:umd": "babel dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd", "clean": "rimraf dist src/icons src/index.js src/index.d.ts" }, "devDependencies": { + "@babel/cli": "^7.0.0", + "@babel/core": "^7.0.0", + "@babel/plugin-proposal-class-properties": "^7.0.0", + "@babel/plugin-proposal-export-default-from": "^7.0.0", + "@babel/plugin-proposal-object-rest-spread": "^7.0.0", + "@babel/plugin-transform-typescript": "^7.0.0", + "@babel/preset-env": "^7.0.0", + "@babel/preset-react": "^7.0.0", "@fortawesome/free-regular-svg-icons": "^5.7.2", "@fortawesome/free-solid-svg-icons": "^5.7.2", "@patternfly/patternfly": "2.8.2", "babel-plugin-transform-es2015-modules-umd": "^6.24.1", + "babel-plugin-typescript-to-proptypes": "^0.17.1", "fs-extra": "^6.0.1", "glob": "^7.1.2", "node-plop": "^0.15.0", diff --git a/test.env.js b/test.env.js index a339faf05a5..767857b265e 100644 --- a/test.env.js +++ b/test.env.js @@ -1,6 +1,6 @@ -import 'raf/polyfill'; -import { configure } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; +require('raf/polyfill'); +const { configure } = require('enzyme'); +const Adapter = require('enzyme-adapter-react-16'); const MutationObserverPolyfill = require('mutation-observer'); // referenced from '@novnc/nvnc/core/util/events.js' diff --git a/yarn.lock b/yarn.lock index 4c88df211c6..6a9e1cafc82 100644 --- a/yarn.lock +++ b/yarn.lock @@ -302,13 +302,6 @@ "@babel/helper-plugin-utils" "^7.0.0" "@babel/plugin-syntax-export-default-from" "^7.2.0" -"@babel/plugin-proposal-export-namespace-from@^7.0.0": - version "7.2.0" - resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.2.0.tgz#308fd4d04ff257fc3e4be090550840eeabad5dd9" - dependencies: - "@babel/helper-plugin-utils" "^7.0.0" - "@babel/plugin-syntax-export-namespace-from" "^7.2.0" - "@babel/plugin-proposal-json-strings@^7.2.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.2.0.tgz#568ecc446c6148ae6b267f02551130891e29f317" @@ -375,12 +368,6 @@ dependencies: "@babel/helper-plugin-utils" "^7.0.0" -"@babel/plugin-syntax-export-namespace-from@^7.2.0": - version "7.2.0" - resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.2.0.tgz#8d257838c6b3b779db52c0224443459bd27fb039" - dependencies: - "@babel/helper-plugin-utils" "^7.0.0" - "@babel/plugin-syntax-flow@^7.0.0", "@babel/plugin-syntax-flow@^7.2.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.2.0.tgz#a765f061f803bc48f240c26f8747faf97c26bf7c" @@ -589,12 +576,6 @@ dependencies: "@babel/helper-plugin-utils" "^7.0.0" -"@babel/plugin-transform-object-assign@^7.0.0": - version "7.2.0" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.2.0.tgz#6fdeea42be17040f119e38e23ea0f49f31968bde" - dependencies: - "@babel/helper-plugin-utils" "^7.0.0" - "@babel/plugin-transform-object-super@^7.0.0", "@babel/plugin-transform-object-super@^7.2.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.2.0.tgz#b35d4c10f56bab5d650047dad0f1d8e8814b6598" @@ -3180,6 +3161,7 @@ any-promise@^1.0.0, any-promise@^1.1.0: anymatch@^1.3.0: version "1.3.2" resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a" + integrity sha512-0XNayC8lTHQ2OI8aljNCN3sSx6hsr/1+rlcDAotXJR7C1oZZHCNsfpbKwMjRA3Uqb5tF1Rae2oloTr4xpq+WjA== dependencies: micromatch "^2.1.5" normalize-path "^2.0.0" @@ -3576,6 +3558,7 @@ axobject-query@^2.0.1, axobject-query@^2.0.2: babel-cli@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-cli/-/babel-cli-6.26.0.tgz#502ab54874d7db88ad00b887a06383ce03d002f1" + integrity sha1-UCq1SHTX24itALiHoGODzgPQAvE= dependencies: babel-core "^6.26.0" babel-polyfill "^6.26.0" @@ -4332,6 +4315,7 @@ babel-plugin-transform-function-bind@^6.22.0: babel-plugin-transform-imports@^1.5.0: version "1.5.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-imports/-/babel-plugin-transform-imports-1.5.1.tgz#b3756696aea907719d0d63b0e67c88fba963adb0" + integrity sha512-Jkb0tjqye8kjOD7GdcKJTGB3dC9fruQhwRFZCeYS0sZO2otyjG6SohKR8nZiSm/OvhY+Ny2ktzVE59XKgIqskA== dependencies: babel-types "^6.6.0" is-valid-path "^0.1.1" @@ -4359,6 +4343,7 @@ babel-plugin-transform-minify-booleans@^6.9.0: babel-plugin-transform-object-assign@^6.22.0: version "6.22.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-assign/-/babel-plugin-transform-object-assign-6.22.0.tgz#f99d2f66f1a0b0d498e346c5359684740caa20ba" + integrity sha1-+Z0vZvGgsNSY40bFNZaEdAyqILo= dependencies: babel-runtime "^6.22.0" @@ -4463,6 +4448,7 @@ babel-plugin-typescript-to-proptypes@^0.17.1: babel-polyfill@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.26.0.tgz#379937abc67d7895970adc621f284cd966cf2153" + integrity sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM= dependencies: babel-runtime "^6.26.0" core-js "^2.5.0" @@ -5677,6 +5663,7 @@ chokidar@2.1.2: chokidar@^1.6.1: version "1.7.0" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468" + integrity sha1-eY5ol3gVHIB2tLNg5e3SjNortGg= dependencies: anymatch "^1.3.0" async-each "^1.0.0" @@ -5913,7 +5900,6 @@ clone@^1.0.2: clsx@^1.0.1: version "1.0.4" resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.0.4.tgz#0c0171f6d5cb2fe83848463c15fcc26b4df8c2ec" - integrity sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg== cmd-shim@^2.0.2: version "2.0.2" @@ -12112,7 +12098,6 @@ jsdom@^11.5.1: jsdom@^15.1.0: version "15.1.0" resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-15.1.0.tgz#80c5f0dd69466742ab1194f15d301bdd01417596" - integrity sha512-QEmc2XIkNfCK3KRfa9ljMJjC4kAGdVgRrs/pCBsQG/QoKz0B42+C58f6TdAmhq/rw494eFCoLHxX6+hWuxb96Q== dependencies: abab "^2.0.0" acorn "^6.0.4" @@ -12559,7 +12544,6 @@ liftoff@^2.5.0: linear-layout-vector@0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/linear-layout-vector/-/linear-layout-vector-0.0.1.tgz#398114d7303b6ecc7fd6b273af7b8401d8ba9c70" - integrity sha1-OYEU1zA7bsx/1rJzr3uEAdi6nHA= listr-silent-renderer@^1.1.1: version "1.1.1" @@ -12768,6 +12752,7 @@ lodash.filter@^4.4.0: lodash.findkey@^4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash.findkey/-/lodash.findkey-4.6.0.tgz#83058e903b51cbb759d09ccf546dea3ea39c4718" + integrity sha1-gwWOkDtRy7dZ0JzPVG3qPqOcRxg= lodash.findlastindex@^4.6.0: version "4.6.0" @@ -12868,6 +12853,7 @@ lodash.set@^4.3.2: lodash.snakecase@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz#39d714a35357147837aefd64b5dcbb16becd8f8d" + integrity sha1-OdcUo1NXFHg3rv1ktdy7Fr7Nj40= lodash.some@^4.4.0, lodash.some@^4.6.0: version "4.6.0" @@ -14608,6 +14594,7 @@ osenv@0, osenv@^0.1.4, osenv@^0.1.5: output-file-sync@^1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/output-file-sync/-/output-file-sync-1.1.2.tgz#d0a33eefe61a205facb90092e826598d5245ce76" + integrity sha1-0KM+7+YaIF+suQCS6CZZjVJFznY= dependencies: graceful-fs "^4.1.4" mkdirp "^0.5.1" @@ -17308,6 +17295,7 @@ regenerate@^1.2.1, regenerate@^1.4.0: regenerator-runtime@^0.10.5: version "0.10.5" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658" + integrity sha1-M2w+/BIgrc7dosn6tntaeVWjNlg= regenerator-runtime@^0.11.0: version "0.11.1" @@ -21117,7 +21105,6 @@ ws@^5.2.0, ws@^5.2.1: ws@^6.1.2: version "6.2.1" resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb" - integrity sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA== dependencies: async-limiter "~1.0.0" From 2cbdfb8dd3c7e39b68fa8f7778967eafba688d9a Mon Sep 17 00:00:00 2001 From: Kun Yan Date: Mon, 10 Jun 2019 23:06:24 +0800 Subject: [PATCH 15/32] fix(react-table): Fix error Unknown event handler property `onCollapse`. It will be ignored. (#2195) --- .../src/components/Table/BodyWrapper.js | 2 +- .../Table/__snapshots__/Table.test.js.snap | 80 ------------------- 2 files changed, 1 insertion(+), 81 deletions(-) diff --git a/packages/patternfly-4/react-table/src/components/Table/BodyWrapper.js b/packages/patternfly-4/react-table/src/components/Table/BodyWrapper.js index 9b3c17cc0db..6ffdc21ec7e 100644 --- a/packages/patternfly-4/react-table/src/components/Table/BodyWrapper.js +++ b/packages/patternfly-4/react-table/src/components/Table/BodyWrapper.js @@ -7,7 +7,7 @@ import { mapOpenedRows } from './utils/headerUtils'; // eslint-disable-next-line react/prefer-stateless-function class BodyWrapper extends React.Component { render() { - const { mappedRows, tbodyRef, ...props } = this.props; + const { mappedRows, tbodyRef, rows, onCollapse, ...props } = this.props; if (mappedRows && mappedRows.some(row => row.hasOwnProperty('parent'))) { return ( diff --git a/packages/patternfly-4/react-table/src/components/Table/__snapshots__/Table.test.js.snap b/packages/patternfly-4/react-table/src/components/Table/__snapshots__/Table.test.js.snap index 847654317e7..d7ad140c2b9 100644 --- a/packages/patternfly-4/react-table/src/components/Table/__snapshots__/Table.test.js.snap +++ b/packages/patternfly-4/react-table/src/components/Table/__snapshots__/Table.test.js.snap @@ -2406,8 +2406,6 @@ exports[`Actions table 1`] = ` > Date: Mon, 10 Jun 2019 23:13:55 +0800 Subject: [PATCH 16/32] fix(react-table): Some props of IRow should not required (#2196) --- .../react-table/src/components/Table/Table.d.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/patternfly-4/react-table/src/components/Table/Table.d.ts b/packages/patternfly-4/react-table/src/components/Table/Table.d.ts index 4db02c5dee8..2202173d133 100644 --- a/packages/patternfly-4/react-table/src/components/Table/Table.d.ts +++ b/packages/patternfly-4/react-table/src/components/Table/Table.d.ts @@ -77,9 +77,9 @@ export interface IRowCell { export interface IRow { cells: Array; - isOpen: Boolean; - parent: Number; - props: any; + isOpen?: Boolean; + parent?: Number; + props?: any; fullWidth?: Boolean; noPadding?: Boolean; } From 65727b9a6ffd62fd941255c723a5846ec1739fac Mon Sep 17 00:00:00 2001 From: patternfly-build Date: Mon, 10 Jun 2019 15:50:24 +0000 Subject: [PATCH 17/32] chore(release): releasing packages [ci skip] - patternfly-react-extensions@2.19.1 - patternfly-react-wooden-tree@2.0.1 - patternfly-react@2.36.1 - @patternfly/react-console@1.11.1 - @patternfly/react-charts@4.1.3 - @patternfly/react-core@3.37.1 - @patternfly/react-docs@4.6.9 - @patternfly/react-inline-edit-extension@2.7.4 - demo-app-ts@1.18.3 - @patternfly/react-styled-system@3.5.1 - @patternfly/react-styles@3.3.1 - @patternfly/react-table@2.10.4 - @patternfly/react-tokens@2.5.4 - @patternfly/react-virtualized-extension@1.0.3 - @patternfly/react-icons@3.9.4 --- .../patternfly-react-extensions/CHANGELOG.md | 8 ++++++++ .../patternfly-react-extensions/package.json | 4 ++-- .../patternfly-react-wooden-tree/CHANGELOG.md | 8 ++++++++ .../patternfly-react-wooden-tree/package.json | 2 +- packages/patternfly-3/patternfly-react/CHANGELOG.md | 8 ++++++++ packages/patternfly-3/patternfly-react/package.json | 2 +- packages/patternfly-3/react-console/CHANGELOG.md | 8 ++++++++ packages/patternfly-3/react-console/package.json | 4 ++-- packages/patternfly-4/react-charts/CHANGELOG.md | 8 ++++++++ packages/patternfly-4/react-charts/package.json | 8 ++++---- packages/patternfly-4/react-core/CHANGELOG.md | 8 ++++++++ packages/patternfly-4/react-core/package.json | 8 ++++---- packages/patternfly-4/react-docs/CHANGELOG.md | 8 ++++++++ packages/patternfly-4/react-docs/package.json | 6 +++--- .../react-inline-edit-extension/CHANGELOG.md | 8 ++++++++ .../react-inline-edit-extension/package.json | 12 ++++++------ .../react-integration/demo-app-ts/CHANGELOG.md | 8 ++++++++ .../react-integration/demo-app-ts/package.json | 4 ++-- .../patternfly-4/react-styled-system/CHANGELOG.md | 8 ++++++++ .../patternfly-4/react-styled-system/package.json | 6 +++--- packages/patternfly-4/react-styles/CHANGELOG.md | 8 ++++++++ packages/patternfly-4/react-styles/package.json | 2 +- packages/patternfly-4/react-table/CHANGELOG.md | 12 ++++++++++++ packages/patternfly-4/react-table/package.json | 10 +++++----- packages/patternfly-4/react-tokens/CHANGELOG.md | 8 ++++++++ packages/patternfly-4/react-tokens/package.json | 2 +- .../react-virtualized-extension/CHANGELOG.md | 8 ++++++++ .../react-virtualized-extension/package.json | 8 ++++---- packages/react-icons/CHANGELOG.md | 8 ++++++++ packages/react-icons/package.json | 2 +- 30 files changed, 164 insertions(+), 40 deletions(-) diff --git a/packages/patternfly-3/patternfly-react-extensions/CHANGELOG.md b/packages/patternfly-3/patternfly-react-extensions/CHANGELOG.md index ea538d1eebe..8aff961ff5c 100644 --- a/packages/patternfly-3/patternfly-react-extensions/CHANGELOG.md +++ b/packages/patternfly-3/patternfly-react-extensions/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 2.19.1 (2019-06-10) + +**Note:** Version bump only for package patternfly-react-extensions + + + + + # 2.19.0 (2019-06-05) diff --git a/packages/patternfly-3/patternfly-react-extensions/package.json b/packages/patternfly-3/patternfly-react-extensions/package.json index b4c7fdb6016..a1419ba23b6 100644 --- a/packages/patternfly-3/patternfly-react-extensions/package.json +++ b/packages/patternfly-3/patternfly-react-extensions/package.json @@ -1,6 +1,6 @@ { "name": "patternfly-react-extensions", - "version": "2.19.0", + "version": "2.19.1", "private": false, "description": "This library provides an extended set of React components for use with the PatternFly reference implementation.", "main": "dist/js/index.js", @@ -42,7 +42,7 @@ "classnames": "^2.2.5", "css-element-queries": "^1.0.1", "patternfly": "^3.58.0", - "patternfly-react": "^2.36.0", + "patternfly-react": "^2.36.1", "react-bootstrap": "^0.32.1", "react-click-outside": "^3.0.1", "react-diff-view": "^1.8.1", diff --git a/packages/patternfly-3/patternfly-react-wooden-tree/CHANGELOG.md b/packages/patternfly-3/patternfly-react-wooden-tree/CHANGELOG.md index 53f612ca02b..dbdb650c84c 100644 --- a/packages/patternfly-3/patternfly-react-wooden-tree/CHANGELOG.md +++ b/packages/patternfly-3/patternfly-react-wooden-tree/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 2.0.1 (2019-06-10) + +**Note:** Version bump only for package patternfly-react-wooden-tree + + + + + # 2.0.0 (2019-06-05) diff --git a/packages/patternfly-3/patternfly-react-wooden-tree/package.json b/packages/patternfly-3/patternfly-react-wooden-tree/package.json index 0c73acee136..9a6227dcfa5 100644 --- a/packages/patternfly-3/patternfly-react-wooden-tree/package.json +++ b/packages/patternfly-3/patternfly-react-wooden-tree/package.json @@ -1,6 +1,6 @@ { "name": "patternfly-react-wooden-tree", - "version": "2.0.0", + "version": "2.0.1", "description": "Reexport react-wooden-tree with Patternfly design.", "main": "dist/js/index.js", "module": "dist/esm/index.js", diff --git a/packages/patternfly-3/patternfly-react/CHANGELOG.md b/packages/patternfly-3/patternfly-react/CHANGELOG.md index c480e4b7744..b1fdbbc9617 100644 --- a/packages/patternfly-3/patternfly-react/CHANGELOG.md +++ b/packages/patternfly-3/patternfly-react/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 2.36.1 (2019-06-10) + +**Note:** Version bump only for package patternfly-react + + + + + # 2.36.0 (2019-06-05) diff --git a/packages/patternfly-3/patternfly-react/package.json b/packages/patternfly-3/patternfly-react/package.json index dc86bee6c35..0dbebff8747 100644 --- a/packages/patternfly-3/patternfly-react/package.json +++ b/packages/patternfly-3/patternfly-react/package.json @@ -1,6 +1,6 @@ { "name": "patternfly-react", - "version": "2.36.0", + "version": "2.36.1", "private": false, "description": "This library provides a set of common React components for use with the PatternFly reference implementation.", "main": "dist/js/index.js", diff --git a/packages/patternfly-3/react-console/CHANGELOG.md b/packages/patternfly-3/react-console/CHANGELOG.md index 266b1ae15b1..701e3a9f6b1 100644 --- a/packages/patternfly-3/react-console/CHANGELOG.md +++ b/packages/patternfly-3/react-console/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 1.11.1 (2019-06-10) + +**Note:** Version bump only for package @patternfly/react-console + + + + + # 1.11.0 (2019-06-05) diff --git a/packages/patternfly-3/react-console/package.json b/packages/patternfly-3/react-console/package.json index 39ca82545a1..1f16b3402c5 100644 --- a/packages/patternfly-3/react-console/package.json +++ b/packages/patternfly-3/react-console/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-console", - "version": "1.11.0", + "version": "1.11.1", "private": false, "description": "This library provides a set of Console React components for use with the PatternFly reference implementation.", "main": "dist/js/index.js", @@ -58,7 +58,7 @@ "babel-preset-env": "^1.6.1", "babel-preset-react": "^6.24.1", "patternfly": "^3.58.0", - "patternfly-react": "^2.36.0", + "patternfly-react": "^2.36.1", "rimraf": "^2.6.2", "shx": "^0.3.2" }, diff --git a/packages/patternfly-4/react-charts/CHANGELOG.md b/packages/patternfly-4/react-charts/CHANGELOG.md index d11b1c23292..97a9c4782d4 100644 --- a/packages/patternfly-4/react-charts/CHANGELOG.md +++ b/packages/patternfly-4/react-charts/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [4.1.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.1.2...@patternfly/react-charts@4.1.3) (2019-06-10) + +**Note:** Version bump only for package @patternfly/react-charts + + + + + ## 4.1.2 (2019-06-10) diff --git a/packages/patternfly-4/react-charts/package.json b/packages/patternfly-4/react-charts/package.json index bc74dbb3e44..176c7ad9fcc 100644 --- a/packages/patternfly-4/react-charts/package.json +++ b/packages/patternfly-4/react-charts/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-charts", - "version": "4.1.2", + "version": "4.1.3", "description": "This library provides a set of React chart components for use with the PatternFly reference implementation.", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -29,7 +29,7 @@ }, "homepage": "https://github.com/patternfly/patternfly-react#readme", "dependencies": { - "@patternfly/react-styles": "^3.3.0" + "@patternfly/react-styles": "^3.3.1" }, "peerDependencies": { "prop-types": "^15.6.1", @@ -65,8 +65,8 @@ "@babel/preset-env": "^7.0.0", "@babel/preset-react": "^7.0.0", "@patternfly/patternfly": "2.8.2", - "@patternfly/react-icons": "^3.9.3", - "@patternfly/react-tokens": "^2.5.3", + "@patternfly/react-icons": "^3.9.4", + "@patternfly/react-tokens": "^2.5.4", "babel-plugin-transform-es2015-modules-umd": "^6.24.1", "babel-plugin-typescript-to-proptypes": "^0.17.1", "css": "^2.2.3", diff --git a/packages/patternfly-4/react-core/CHANGELOG.md b/packages/patternfly-4/react-core/CHANGELOG.md index 524519faa5c..9645f143860 100644 --- a/packages/patternfly-4/react-core/CHANGELOG.md +++ b/packages/patternfly-4/react-core/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [3.37.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.37.0...@patternfly/react-core@3.37.1) (2019-06-10) + +**Note:** Version bump only for package @patternfly/react-core + + + + + # [3.37.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.36.1...@patternfly/react-core@3.37.0) (2019-06-07) diff --git a/packages/patternfly-4/react-core/package.json b/packages/patternfly-4/react-core/package.json index db9875d1541..6d3b18fba7c 100644 --- a/packages/patternfly-4/react-core/package.json +++ b/packages/patternfly-4/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-core", - "version": "3.37.0", + "version": "3.37.1", "description": "This library provides a set of common React components for use with the PatternFly reference implementation.", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -41,9 +41,9 @@ "typecheck": "tsc -p tsconfig.typecheck.json" }, "dependencies": { - "@patternfly/react-icons": "^3.9.3", - "@patternfly/react-styles": "^3.3.0", - "@patternfly/react-tokens": "^2.5.3", + "@patternfly/react-icons": "^3.9.4", + "@patternfly/react-styles": "^3.3.1", + "@patternfly/react-tokens": "^2.5.4", "@tippy.js/react": "^1.1.1", "emotion": "^9.2.9", "exenv": "^1.2.2", diff --git a/packages/patternfly-4/react-docs/CHANGELOG.md b/packages/patternfly-4/react-docs/CHANGELOG.md index 7f00823549b..e70d3205d06 100644 --- a/packages/patternfly-4/react-docs/CHANGELOG.md +++ b/packages/patternfly-4/react-docs/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [4.6.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.6.8...@patternfly/react-docs@4.6.9) (2019-06-10) + +**Note:** Version bump only for package @patternfly/react-docs + + + + + ## [4.6.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.6.7...@patternfly/react-docs@4.6.8) (2019-06-07) **Note:** Version bump only for package @patternfly/react-docs diff --git a/packages/patternfly-4/react-docs/package.json b/packages/patternfly-4/react-docs/package.json index a6dc5c9e5ee..448a4cc34d7 100644 --- a/packages/patternfly-4/react-docs/package.json +++ b/packages/patternfly-4/react-docs/package.json @@ -1,7 +1,7 @@ { "name": "@patternfly/react-docs", "description": "PatternFly React Docs", - "version": "4.6.8", + "version": "4.6.9", "author": "Red Hat", "license": "MIT", "private": true, @@ -17,8 +17,8 @@ "@mdx-js/mdx": "1.0.2", "@mdx-js/react": "1.0.2", "@patternfly/patternfly": "2.8.2", - "@patternfly/react-core": "^3.37.0", - "@patternfly/react-icons": "^3.9.3", + "@patternfly/react-core": "^3.37.1", + "@patternfly/react-icons": "^3.9.4", "gatsby": "2.3.14", "gatsby-mdx": "0.6.3", "gatsby-plugin-react-helmet": "^3.0.11", diff --git a/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md b/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md index 7dfa537e65f..ffc4f15cd46 100644 --- a/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md +++ b/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.7.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.7.3...@patternfly/react-inline-edit-extension@2.7.4) (2019-06-10) + +**Note:** Version bump only for package @patternfly/react-inline-edit-extension + + + + + ## [2.7.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.7.2...@patternfly/react-inline-edit-extension@2.7.3) (2019-06-07) **Note:** Version bump only for package @patternfly/react-inline-edit-extension diff --git a/packages/patternfly-4/react-inline-edit-extension/package.json b/packages/patternfly-4/react-inline-edit-extension/package.json index d507fe70643..e0ce010314c 100644 --- a/packages/patternfly-4/react-inline-edit-extension/package.json +++ b/packages/patternfly-4/react-inline-edit-extension/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-inline-edit-extension", - "version": "2.7.3", + "version": "2.7.4", "description": "This library provides inline editing support for PatternFly 4 React table", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -28,10 +28,10 @@ "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/", "dependencies": { "@patternfly/patternfly": "2.8.2", - "@patternfly/react-core": "^3.37.0", - "@patternfly/react-icons": "^3.9.3", - "@patternfly/react-styles": "^3.3.0", - "@patternfly/react-table": "^2.10.3", + "@patternfly/react-core": "^3.37.1", + "@patternfly/react-icons": "^3.9.4", + "@patternfly/react-styles": "^3.3.1", + "@patternfly/react-table": "^2.10.4", "classnames": "^2.2.5", "exenv": "^1.2.2", "reactabular-table": "^8.14.0" @@ -51,7 +51,7 @@ "postbuild": "node ./build/copyStyles.js" }, "optionalDependencies": { - "@patternfly/react-tokens": "^2.5.3" + "@patternfly/react-tokens": "^2.5.4" }, "devDependencies": { "@babel/cli": "^7.0.0", diff --git a/packages/patternfly-4/react-integration/demo-app-ts/CHANGELOG.md b/packages/patternfly-4/react-integration/demo-app-ts/CHANGELOG.md index 1e5a772ae1f..f8db2493bc3 100644 --- a/packages/patternfly-4/react-integration/demo-app-ts/CHANGELOG.md +++ b/packages/patternfly-4/react-integration/demo-app-ts/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.18.3](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.18.2...demo-app-ts@1.18.3) (2019-06-10) + +**Note:** Version bump only for package demo-app-ts + + + + + ## [1.18.2](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.18.1...demo-app-ts@1.18.2) (2019-06-07) **Note:** Version bump only for package demo-app-ts diff --git a/packages/patternfly-4/react-integration/demo-app-ts/package.json b/packages/patternfly-4/react-integration/demo-app-ts/package.json index fe08df66333..7cc7186a780 100644 --- a/packages/patternfly-4/react-integration/demo-app-ts/package.json +++ b/packages/patternfly-4/react-integration/demo-app-ts/package.json @@ -1,13 +1,13 @@ { "name": "demo-app-ts", "private": true, - "version": "1.18.2", + "version": "1.18.3", "scripts": { "build:demo-app": "react-scripts build", "start:demo-app": "react-scripts start" }, "dependencies": { - "@patternfly/react-core": "^3.37.0", + "@patternfly/react-core": "^3.37.1", "react": "^16.8.4", "react-dom": "^16.8.4", "react-router": "^4.3.1", diff --git a/packages/patternfly-4/react-styled-system/CHANGELOG.md b/packages/patternfly-4/react-styled-system/CHANGELOG.md index f446bb4098d..809110cff0e 100644 --- a/packages/patternfly-4/react-styled-system/CHANGELOG.md +++ b/packages/patternfly-4/react-styled-system/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 3.5.1 (2019-06-10) + +**Note:** Version bump only for package @patternfly/react-styled-system + + + + + # [3.5.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styled-system@3.4.6...@patternfly/react-styled-system@3.5.0) (2019-06-05) diff --git a/packages/patternfly-4/react-styled-system/package.json b/packages/patternfly-4/react-styled-system/package.json index 8cbb14d2046..6f41775dc65 100644 --- a/packages/patternfly-4/react-styled-system/package.json +++ b/packages/patternfly-4/react-styled-system/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-styled-system", - "version": "3.5.0", + "version": "3.5.1", "description": "Experimental: Styled System package with PatternFly 4 theming", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -35,8 +35,8 @@ "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose" }, "dependencies": { - "@patternfly/react-styles": "^3.3.0", - "@patternfly/react-tokens": "^2.5.3", + "@patternfly/react-styles": "^3.3.1", + "@patternfly/react-tokens": "^2.5.4", "emotion-theming": "^9.2.9", "react-emotion": "^9.2.9", "styled-system": "^3.1.11" diff --git a/packages/patternfly-4/react-styles/CHANGELOG.md b/packages/patternfly-4/react-styles/CHANGELOG.md index 0b512a80cc4..14f6c42c239 100644 --- a/packages/patternfly-4/react-styles/CHANGELOG.md +++ b/packages/patternfly-4/react-styles/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 3.3.1 (2019-06-10) + +**Note:** Version bump only for package @patternfly/react-styles + + + + + # [3.3.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@3.2.4...@patternfly/react-styles@3.3.0) (2019-06-05) diff --git a/packages/patternfly-4/react-styles/package.json b/packages/patternfly-4/react-styles/package.json index 9922c87a899..c4e17b8e5e8 100644 --- a/packages/patternfly-4/react-styles/package.json +++ b/packages/patternfly-4/react-styles/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-styles", - "version": "3.3.0", + "version": "3.3.1", "main": "dist/js/index.js", "module": "dist/esm/index.js", "types": "dist/js/index.d.ts", diff --git a/packages/patternfly-4/react-table/CHANGELOG.md b/packages/patternfly-4/react-table/CHANGELOG.md index 3697dba373c..ea2c55a7491 100644 --- a/packages/patternfly-4/react-table/CHANGELOG.md +++ b/packages/patternfly-4/react-table/CHANGELOG.md @@ -3,6 +3,18 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.10.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.10.3...@patternfly/react-table@2.10.4) (2019-06-10) + + +### Bug Fixes + +* **react-table:** Fix error Unknown event handler property `onCollapse`. It will be ignored. ([#2195](https://github.com/patternfly/patternfly-react/issues/2195)) ([2cbdfb8](https://github.com/patternfly/patternfly-react/commit/2cbdfb8)) +* **react-table:** Some props of IRow should not required ([#2196](https://github.com/patternfly/patternfly-react/issues/2196)) ([343f928](https://github.com/patternfly/patternfly-react/commit/343f928)) + + + + + ## [2.10.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.10.2...@patternfly/react-table@2.10.3) (2019-06-07) **Note:** Version bump only for package @patternfly/react-table diff --git a/packages/patternfly-4/react-table/package.json b/packages/patternfly-4/react-table/package.json index 4e22418cc18..2dce02aed94 100644 --- a/packages/patternfly-4/react-table/package.json +++ b/packages/patternfly-4/react-table/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-table", - "version": "2.10.3", + "version": "2.10.4", "description": "This library provides a set of React table components for use with the PatternFly 4", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -28,10 +28,10 @@ "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/react-table#readme", "dependencies": { "@patternfly/patternfly": "2.8.2", - "@patternfly/react-core": "^3.37.0", - "@patternfly/react-icons": "^3.9.3", - "@patternfly/react-styles": "^3.3.0", - "@patternfly/react-tokens": "^2.5.3", + "@patternfly/react-core": "^3.37.1", + "@patternfly/react-icons": "^3.9.4", + "@patternfly/react-styles": "^3.3.1", + "@patternfly/react-tokens": "^2.5.4", "classnames": "^2.2.5", "exenv": "^1.2.2" }, diff --git a/packages/patternfly-4/react-tokens/CHANGELOG.md b/packages/patternfly-4/react-tokens/CHANGELOG.md index 80101cfba3d..5f2b529ac68 100644 --- a/packages/patternfly-4/react-tokens/CHANGELOG.md +++ b/packages/patternfly-4/react-tokens/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 2.5.4 (2019-06-10) + +**Note:** Version bump only for package @patternfly/react-tokens + + + + + ## 2.5.3 (2019-05-29) **Note:** Version bump only for package @patternfly/react-tokens diff --git a/packages/patternfly-4/react-tokens/package.json b/packages/patternfly-4/react-tokens/package.json index d673bf4f364..647d0067077 100644 --- a/packages/patternfly-4/react-tokens/package.json +++ b/packages/patternfly-4/react-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-tokens", - "version": "2.5.3", + "version": "2.5.4", "description": "This library provides access to the design tokens of PatternFly 4 from JavaScript", "main": "dist/js/index.js", "module": "dist/esm/index.js", diff --git a/packages/patternfly-4/react-virtualized-extension/CHANGELOG.md b/packages/patternfly-4/react-virtualized-extension/CHANGELOG.md index 356d6cf9c30..7fc823c32d0 100644 --- a/packages/patternfly-4/react-virtualized-extension/CHANGELOG.md +++ b/packages/patternfly-4/react-virtualized-extension/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.0.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-virtualized-extension@1.0.2...@patternfly/react-virtualized-extension@1.0.3) (2019-06-10) + +**Note:** Version bump only for package @patternfly/react-virtualized-extension + + + + + ## [1.0.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-virtualized-extension@1.0.1...@patternfly/react-virtualized-extension@1.0.2) (2019-06-07) **Note:** Version bump only for package @patternfly/react-virtualized-extension diff --git a/packages/patternfly-4/react-virtualized-extension/package.json b/packages/patternfly-4/react-virtualized-extension/package.json index b2e23c562c5..296a787eeae 100644 --- a/packages/patternfly-4/react-virtualized-extension/package.json +++ b/packages/patternfly-4/react-virtualized-extension/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-virtualized-extension", - "version": "1.0.2", + "version": "1.0.3", "description": "This library provides efficient rendering extensions for PatternFly 4 React tables and lists.", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -28,9 +28,9 @@ "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/", "dependencies": { "@patternfly/patternfly": "2.8.2", - "@patternfly/react-core": "^3.37.0", - "@patternfly/react-icons": "^3.9.3", - "@patternfly/react-styles": "^3.3.0", + "@patternfly/react-core": "^3.37.1", + "@patternfly/react-icons": "^3.9.4", + "@patternfly/react-styles": "^3.3.1", "clsx": "^1.0.1", "dom-helpers": "^2.4.0 || ^3.0.0", "exenv": "^1.2.2", diff --git a/packages/react-icons/CHANGELOG.md b/packages/react-icons/CHANGELOG.md index f4caf6ab088..c25275a3f26 100644 --- a/packages/react-icons/CHANGELOG.md +++ b/packages/react-icons/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 3.9.4 (2019-06-10) + +**Note:** Version bump only for package @patternfly/react-icons + + + + + ## 3.9.3 (2019-05-29) **Note:** Version bump only for package @patternfly/react-icons diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json index 34a67d266b0..cba90e334ff 100644 --- a/packages/react-icons/package.json +++ b/packages/react-icons/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-icons", - "version": "3.9.3", + "version": "3.9.4", "description": "PatternFly 4 Icons as React Components", "main": "dist/js/index.js", "module": "dist/esm/index.js", From 417751a305eb9070e57f12e194bd7601aeee4516 Mon Sep 17 00:00:00 2001 From: Patternfly Build Date: Mon, 10 Jun 2019 16:00:30 -0400 Subject: [PATCH 18/32] Bump @patternfly/patternfly versions to 2.12.5 (#2184) * chore(package): Bump @patternfly/patternfly versions to 2.12.5 * fix build failure * fix buil failure * tweak glob --- .../patternfly-4/react-charts/package.json | 2 +- packages/patternfly-4/react-core/package.json | 2 +- packages/patternfly-4/react-docs/package.json | 3 ++- .../react-inline-edit-extension/package.json | 2 +- .../react-styled-system/package.json | 2 +- .../patternfly-4/react-styles/package.json | 2 +- .../react-styles/src/generateClasses.js | 2 +- .../patternfly-4/react-table/package.json | 2 +- .../patternfly-4/react-tokens/package.json | 2 +- .../react-virtualized-extension/package.json | 2 +- packages/react-icons/package.json | 2 +- yarn.lock | 19 +++++++++++++++++++ 12 files changed, 31 insertions(+), 11 deletions(-) diff --git a/packages/patternfly-4/react-charts/package.json b/packages/patternfly-4/react-charts/package.json index 176c7ad9fcc..9936b998a1a 100644 --- a/packages/patternfly-4/react-charts/package.json +++ b/packages/patternfly-4/react-charts/package.json @@ -64,7 +64,7 @@ "@babel/plugin-transform-typescript": "^7.0.0", "@babel/preset-env": "^7.0.0", "@babel/preset-react": "^7.0.0", - "@patternfly/patternfly": "2.8.2", + "@patternfly/patternfly": "2.12.5", "@patternfly/react-icons": "^3.9.4", "@patternfly/react-tokens": "^2.5.4", "babel-plugin-transform-es2015-modules-umd": "^6.24.1", diff --git a/packages/patternfly-4/react-core/package.json b/packages/patternfly-4/react-core/package.json index 6d3b18fba7c..694f6e30049 100644 --- a/packages/patternfly-4/react-core/package.json +++ b/packages/patternfly-4/react-core/package.json @@ -58,7 +58,7 @@ "@babel/plugin-transform-typescript": "^7.0.0", "@babel/preset-env": "^7.0.0", "@babel/preset-react": "^7.0.0", - "@patternfly/patternfly": "2.8.2", + "@patternfly/patternfly": "2.12.5", "@types/enzyme": "3.9.0", "@types/exenv": "^1.2.0", "@types/jest": "^24.0.11", diff --git a/packages/patternfly-4/react-docs/package.json b/packages/patternfly-4/react-docs/package.json index 448a4cc34d7..f2dcb476867 100644 --- a/packages/patternfly-4/react-docs/package.json +++ b/packages/patternfly-4/react-docs/package.json @@ -16,9 +16,10 @@ "dependencies": { "@mdx-js/mdx": "1.0.2", "@mdx-js/react": "1.0.2", - "@patternfly/patternfly": "2.8.2", + "@patternfly/patternfly": "2.12.5", "@patternfly/react-core": "^3.37.1", "@patternfly/react-icons": "^3.9.4", + "@patternfly/react-virtualized-extension": "^1.0.1", "gatsby": "2.3.14", "gatsby-mdx": "0.6.3", "gatsby-plugin-react-helmet": "^3.0.11", diff --git a/packages/patternfly-4/react-inline-edit-extension/package.json b/packages/patternfly-4/react-inline-edit-extension/package.json index e0ce010314c..7a0be599dff 100644 --- a/packages/patternfly-4/react-inline-edit-extension/package.json +++ b/packages/patternfly-4/react-inline-edit-extension/package.json @@ -27,7 +27,7 @@ }, "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/", "dependencies": { - "@patternfly/patternfly": "2.8.2", + "@patternfly/patternfly": "2.12.5", "@patternfly/react-core": "^3.37.1", "@patternfly/react-icons": "^3.9.4", "@patternfly/react-styles": "^3.3.1", diff --git a/packages/patternfly-4/react-styled-system/package.json b/packages/patternfly-4/react-styled-system/package.json index 6f41775dc65..5c9697abc0c 100644 --- a/packages/patternfly-4/react-styled-system/package.json +++ b/packages/patternfly-4/react-styled-system/package.json @@ -54,7 +54,7 @@ "@babel/plugin-transform-typescript": "^7.0.0", "@babel/preset-env": "^7.0.0", "@babel/preset-react": "^7.0.0", - "@patternfly/patternfly": "2.8.2", + "@patternfly/patternfly": "2.12.5", "babel-plugin-transform-es2015-modules-umd": "^6.24.1", "babel-plugin-typescript-to-proptypes": "^0.17.1", "css": "^2.2.3", diff --git a/packages/patternfly-4/react-styles/package.json b/packages/patternfly-4/react-styles/package.json index c4e17b8e5e8..55d8c264271 100644 --- a/packages/patternfly-4/react-styles/package.json +++ b/packages/patternfly-4/react-styles/package.json @@ -47,7 +47,7 @@ "@babel/plugin-transform-typescript": "^7.0.0", "@babel/preset-env": "^7.0.0", "@babel/preset-react": "^7.0.0", - "@patternfly/patternfly": "2.8.2", + "@patternfly/patternfly": "2.12.5", "babel-plugin-transform-es2015-modules-umd": "^6.24.1", "babel-plugin-typescript-to-proptypes": "^0.17.1", "glob": "^7.1.2", diff --git a/packages/patternfly-4/react-styles/src/generateClasses.js b/packages/patternfly-4/react-styles/src/generateClasses.js index 980d3e5a6b8..b91ad5b6984 100644 --- a/packages/patternfly-4/react-styles/src/generateClasses.js +++ b/packages/patternfly-4/react-styles/src/generateClasses.js @@ -11,7 +11,7 @@ const pfStylesDir = dirname(require.resolve('@patternfly/patternfly/patternfly.c const cssFiles = glob.sync('**/*.css', { cwd: pfStylesDir, - ignore: ['assets/**'] + ignore: ['assets/**', '*ie11*.css'] }); cssFiles.forEach(filePath => { diff --git a/packages/patternfly-4/react-table/package.json b/packages/patternfly-4/react-table/package.json index 2dce02aed94..3b4116a3b97 100644 --- a/packages/patternfly-4/react-table/package.json +++ b/packages/patternfly-4/react-table/package.json @@ -27,7 +27,7 @@ }, "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/react-table#readme", "dependencies": { - "@patternfly/patternfly": "2.8.2", + "@patternfly/patternfly": "2.12.5", "@patternfly/react-core": "^3.37.1", "@patternfly/react-icons": "^3.9.4", "@patternfly/react-styles": "^3.3.1", diff --git a/packages/patternfly-4/react-tokens/package.json b/packages/patternfly-4/react-tokens/package.json index 647d0067077..0f512dc8882 100644 --- a/packages/patternfly-4/react-tokens/package.json +++ b/packages/patternfly-4/react-tokens/package.json @@ -32,7 +32,7 @@ "devDependencies": { "@babel/cli": "^7.0.0", "@babel/core": "^7.0.0", - "@patternfly/patternfly": "2.8.2", + "@patternfly/patternfly": "2.12.5", "babel-plugin-transform-es2015-modules-umd": "^6.24.1", "css": "^2.2.3", "fs-extra": "^6.0.1", diff --git a/packages/patternfly-4/react-virtualized-extension/package.json b/packages/patternfly-4/react-virtualized-extension/package.json index 296a787eeae..2472d780fc0 100644 --- a/packages/patternfly-4/react-virtualized-extension/package.json +++ b/packages/patternfly-4/react-virtualized-extension/package.json @@ -27,7 +27,7 @@ }, "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/", "dependencies": { - "@patternfly/patternfly": "2.8.2", + "@patternfly/patternfly": "2.12.5", "@patternfly/react-core": "^3.37.1", "@patternfly/react-icons": "^3.9.4", "@patternfly/react-styles": "^3.3.1", diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json index cba90e334ff..c7ebcd2617d 100644 --- a/packages/react-icons/package.json +++ b/packages/react-icons/package.json @@ -42,7 +42,7 @@ "@babel/preset-react": "^7.0.0", "@fortawesome/free-regular-svg-icons": "^5.7.2", "@fortawesome/free-solid-svg-icons": "^5.7.2", - "@patternfly/patternfly": "2.8.2", + "@patternfly/patternfly": "2.12.5", "babel-plugin-transform-es2015-modules-umd": "^6.24.1", "babel-plugin-typescript-to-proptypes": "^0.17.1", "fs-extra": "^6.0.1", diff --git a/yarn.lock b/yarn.lock index 6a9e1cafc82..dde038ed561 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1714,10 +1714,29 @@ universal-user-agent "^2.0.0" url-template "^2.0.8" +"@patternfly/patternfly@2.12.5": + version "2.12.5" + resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-2.12.5.tgz#f2c5924deb875a8cde95e09e6d5c9022f00429da" + "@patternfly/patternfly@2.8.2": version "2.8.2" resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-2.8.2.tgz#8362795b17a73be76dd9408b3c0d370e8a030d77" +"@patternfly/react-virtualized-extension@^1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@patternfly/react-virtualized-extension/-/react-virtualized-extension-1.0.1.tgz#d5e5e416445d7bc55170a96e3c04caf8c98e309b" + dependencies: + "@patternfly/patternfly" "2.8.2" + "@patternfly/react-core" "^3.36.0" + "@patternfly/react-icons" "^3.9.3" + "@patternfly/react-styles" "^3.3.0" + clsx "^1.0.1" + dom-helpers "^2.4.0 || ^3.0.0" + exenv "^1.2.2" + linear-layout-vector "0.0.1" + react-lifecycles-compat "^3.0.4" + react-virtualized "9.21.1" + "@pieh/friendly-errors-webpack-plugin@1.7.0-chalk-2": version "1.7.0-chalk-2" resolved "https://registry.yarnpkg.com/@pieh/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.7.0-chalk-2.tgz#2e9da9d3ade9d18d013333eb408c457d04eabac0" From fd3d7719c26a1108da09ad259cce8451def63c25 Mon Sep 17 00:00:00 2001 From: Jessie Date: Mon, 10 Jun 2019 16:16:11 -0400 Subject: [PATCH 19/32] feat(backdrop): Convert backdrop to typescript (#2105) * Converted backdrop component to typescript * Add demo and tests --- .../AboutModal/AboutModalContainer.tsx | 2 +- .../AboutModalContainer.test.tsx.snap | 6 ++-- .../src/components/Backdrop/Backdrop.d.ts | 10 ------- .../src/components/Backdrop/Backdrop.js | 27 ----------------- .../{Backdrop.test.js => Backdrop.test.tsx} | 2 +- .../src/components/Backdrop/Backdrop.tsx | 20 +++++++++++++ ...op.test.js.snap => Backdrop.test.tsx.snap} | 0 .../src/components/Backdrop/index.d.ts | 1 - .../src/components/Backdrop/index.js | 1 - .../src/components/Backdrop/index.ts | 1 + .../src/components/Modal/ModalContent.tsx | 2 +- .../__snapshots__/ModalContent.test.tsx.snap | 30 +++++++------------ .../Wizard/__snapshots__/Wizard.test.tsx.snap | 6 ++-- .../cypress/integration/backdrop.spec.ts | 11 +++++++ .../demo-app-ts/src/Demos.ts | 5 ++++ .../demos/BackdropDemo/BackdropDemo.tsx | 12 ++++++++ .../demo-app-ts/src/components/demos/index.ts | 1 + 17 files changed, 67 insertions(+), 70 deletions(-) delete mode 100644 packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.d.ts delete mode 100644 packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.js rename packages/patternfly-4/react-core/src/components/Backdrop/{Backdrop.test.js => Backdrop.test.tsx} (82%) create mode 100644 packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.tsx rename packages/patternfly-4/react-core/src/components/Backdrop/__snapshots__/{Backdrop.test.js.snap => Backdrop.test.tsx.snap} (100%) delete mode 100644 packages/patternfly-4/react-core/src/components/Backdrop/index.d.ts delete mode 100644 packages/patternfly-4/react-core/src/components/Backdrop/index.js create mode 100644 packages/patternfly-4/react-core/src/components/Backdrop/index.ts create mode 100644 packages/patternfly-4/react-integration/cypress/integration/backdrop.spec.ts create mode 100644 packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/BackdropDemo/BackdropDemo.tsx diff --git a/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalContainer.tsx b/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalContainer.tsx index aacbe730a2b..497b6cd2062 100644 --- a/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalContainer.tsx +++ b/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalContainer.tsx @@ -5,7 +5,7 @@ import { AboutModalBoxHero } from './AboutModalBoxHero'; import { AboutModalBoxBrand } from './AboutModalBoxBrand'; import { AboutModalBoxCloseButton } from './AboutModalBoxCloseButton'; import { AboutModalBox } from './AboutModalBox'; -import Backdrop from '../Backdrop/Backdrop'; +import { Backdrop } from '../Backdrop/Backdrop'; import Bullseye from '../../layouts/Bullseye/Bullseye'; export interface AboutModalContainerProps extends React.HTMLProps { diff --git a/packages/patternfly-4/react-core/src/components/AboutModal/__snapshots__/AboutModalContainer.test.tsx.snap b/packages/patternfly-4/react-core/src/components/AboutModal/__snapshots__/AboutModalContainer.test.tsx.snap index 6f52e4feea7..3da487c4c62 100644 --- a/packages/patternfly-4/react-core/src/components/AboutModal/__snapshots__/AboutModalContainer.test.tsx.snap +++ b/packages/patternfly-4/react-core/src/components/AboutModal/__snapshots__/AboutModalContainer.test.tsx.snap @@ -1,9 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`About Modal Container Test isOpen 1`] = ` - + - + `; exports[`About Modal Container Test simple 1`] = `""`; diff --git a/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.d.ts b/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.d.ts deleted file mode 100644 index d618ac52dba..00000000000 --- a/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { FunctionComponent, HTMLProps, ReactNode } from 'react'; - -export interface BackdropProps extends HTMLProps { - children?: ReactNode; - className?: string; -} - -declare const Backdrop: FunctionComponent; - -export default Backdrop; diff --git a/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.js b/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.js deleted file mode 100644 index 066f421ce34..00000000000 --- a/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { css } from '@patternfly/react-styles'; -import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop'; - -const propTypes = { - /** content rendered inside the backdrop */ - children: PropTypes.node, - /** additional classes added to the button */ - className: PropTypes.string -}; - -const defaultProps = { - children: null, - className: '' -}; - -const Backdrop = ({ className, children, ...props }) => ( -
- {children} -
-); - -Backdrop.propTypes = propTypes; -Backdrop.defaultProps = defaultProps; - -export default Backdrop; diff --git a/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.test.js b/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.test.tsx similarity index 82% rename from packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.test.js rename to packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.test.tsx index 99d675aca51..cfd8d97ec70 100644 --- a/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.test.js +++ b/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { shallow } from 'enzyme'; -import Backdrop from './Backdrop'; +import { Backdrop } from './Backdrop'; test('Backdrop Test', () => { const view = shallow(Backdrop); diff --git a/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.tsx b/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.tsx new file mode 100644 index 00000000000..ae7b7c8d7ce --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; +import { css } from '@patternfly/react-styles'; +import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop'; + +export interface BackdropProps extends React.HTMLProps { + /** content rendered inside the backdrop */ + children?: React.ReactNode; + /** additional classes added to the button */ + className?: string; +} + +export const Backdrop: React.FunctionComponent = ({ + children = null, + className = '', + ...props +}: BackdropProps) => ( +
+ {children} +
+) \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/Backdrop/__snapshots__/Backdrop.test.js.snap b/packages/patternfly-4/react-core/src/components/Backdrop/__snapshots__/Backdrop.test.tsx.snap similarity index 100% rename from packages/patternfly-4/react-core/src/components/Backdrop/__snapshots__/Backdrop.test.js.snap rename to packages/patternfly-4/react-core/src/components/Backdrop/__snapshots__/Backdrop.test.tsx.snap diff --git a/packages/patternfly-4/react-core/src/components/Backdrop/index.d.ts b/packages/patternfly-4/react-core/src/components/Backdrop/index.d.ts deleted file mode 100644 index c76cf6cade7..00000000000 --- a/packages/patternfly-4/react-core/src/components/Backdrop/index.d.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as Backdrop, BackdropProps } from './Backdrop'; diff --git a/packages/patternfly-4/react-core/src/components/Backdrop/index.js b/packages/patternfly-4/react-core/src/components/Backdrop/index.js deleted file mode 100644 index 70cf60d910c..00000000000 --- a/packages/patternfly-4/react-core/src/components/Backdrop/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as Backdrop } from './Backdrop'; diff --git a/packages/patternfly-4/react-core/src/components/Backdrop/index.ts b/packages/patternfly-4/react-core/src/components/Backdrop/index.ts new file mode 100644 index 00000000000..b4c58db120a --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/Backdrop/index.ts @@ -0,0 +1 @@ +export * from './Backdrop'; diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalContent.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalContent.tsx index 32f61a280e4..c8a3de99645 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalContent.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalContent.tsx @@ -8,7 +8,7 @@ const FocusTrap: any = require('focus-trap-react'); import styles from '@patternfly/react-styles/css/layouts/Bullseye/bullseye'; import { css } from '@patternfly/react-styles'; -import Backdrop from '../Backdrop/Backdrop'; +import { Backdrop } from '../Backdrop/Backdrop'; import { ModalBoxBody } from './ModalBoxBody'; import { ModalBoxHeader } from './ModalBoxHeader'; import { ModalBoxCloseButton } from './ModalBoxCloseButton'; diff --git a/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalContent.test.tsx.snap b/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalContent.test.tsx.snap index 6c5194b15f3..415e4c3f592 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalContent.test.tsx.snap +++ b/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalContent.test.tsx.snap @@ -1,9 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Modal Content Test isOpen 1`] = ` - + - + `; exports[`Modal Content Test only body 1`] = ` - + - + `; exports[`Modal Content Test with footer 1`] = ` - + - + `; exports[`Modal Content Test with onclose 1`] = ` - + - + `; exports[`Modal Content test without footer 1`] = ` - + - + `; diff --git a/packages/patternfly-4/react-core/src/components/Wizard/__snapshots__/Wizard.test.tsx.snap b/packages/patternfly-4/react-core/src/components/Wizard/__snapshots__/Wizard.test.tsx.snap index 6f2e477daec..1100830e93f 100644 --- a/packages/patternfly-4/react-core/src/components/Wizard/__snapshots__/Wizard.test.tsx.snap +++ b/packages/patternfly-4/react-core/src/components/Wizard/__snapshots__/Wizard.test.tsx.snap @@ -15,9 +15,7 @@ exports[`Wizard should match snapshot 1`] = ` paused={false} tag="div" > - + - + , "containerInfo":
diff --git a/packages/patternfly-4/react-integration/cypress/integration/backdrop.spec.ts b/packages/patternfly-4/react-integration/cypress/integration/backdrop.spec.ts new file mode 100644 index 00000000000..19c4ef4f860 --- /dev/null +++ b/packages/patternfly-4/react-integration/cypress/integration/backdrop.spec.ts @@ -0,0 +1,11 @@ +describe('Backdrop Demo Test', () => { + it('Navigate to demo section', () => { + cy.visit('http://localhost:3000/'); + cy.get('#backdrop-demo-nav-item-link').click(); + cy.url().should('eq', 'http://localhost:3000/backdrop-demo-nav-link'); + }); + + it('Verify has correct className', () => { + cy.get('.backdrop').should('have.class', 'pf-c-backdrop'); + }); +}) \ No newline at end of file diff --git a/packages/patternfly-4/react-integration/demo-app-ts/src/Demos.ts b/packages/patternfly-4/react-integration/demo-app-ts/src/Demos.ts index 7491b597704..5a6c6d32ae7 100644 --- a/packages/patternfly-4/react-integration/demo-app-ts/src/Demos.ts +++ b/packages/patternfly-4/react-integration/demo-app-ts/src/Demos.ts @@ -25,6 +25,11 @@ export const Demos: DemoInterface[] = [ name: 'Avatar Demo', componentType: Examples.AvatarDemo }, + { + id: 'backdrop-demo', + name: 'Backdrop Demo', + componentType: Examples.BackdropDemo + }, { id: 'backgroundimage-demo', name: 'Background Image Demo', diff --git a/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/BackdropDemo/BackdropDemo.tsx b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/BackdropDemo/BackdropDemo.tsx new file mode 100644 index 00000000000..caaa67989ef --- /dev/null +++ b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/BackdropDemo/BackdropDemo.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { Backdrop } from '@patternfly/react-core'; + +export class BackdropDemo extends React.Component { + render() { + return ( + + ); + } +} + + \ No newline at end of file diff --git a/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/index.ts b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/index.ts index e90b8830c72..35aacf61847 100644 --- a/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/index.ts +++ b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/index.ts @@ -1,6 +1,7 @@ export * from './AboutModal/AboutModalDemo'; export * from './AlertDemo/AlertDemo'; export * from './AvatarDemo/AvatarDemo'; +export * from './BackdropDemo/BackdropDemo'; export * from './BackgroundImageDemo/BackgroundImageDemo'; export * from './BadgeDemo/BadgeDemo'; export * from './BrandDemo/BrandDemo'; From 8a90f8000b0116542096f85bb52e3a658c55cf9e Mon Sep 17 00:00:00 2001 From: patternfly-build Date: Mon, 10 Jun 2019 20:47:56 +0000 Subject: [PATCH 20/32] chore(release): releasing packages [ci skip] - @patternfly/react-charts@4.1.4 - @patternfly/react-core@3.38.0 - @patternfly/react-docs@4.6.10 - @patternfly/react-inline-edit-extension@2.7.5 - demo-app-ts@1.19.0 - @patternfly/react-integration@1.18.0 - @patternfly/react-styled-system@3.5.2 - @patternfly/react-styles@3.3.2 - @patternfly/react-table@2.10.5 - @patternfly/react-tokens@2.5.5 - @patternfly/react-virtualized-extension@1.0.4 - @patternfly/react-icons@3.9.5 --- packages/patternfly-4/react-charts/CHANGELOG.md | 8 ++++++++ packages/patternfly-4/react-charts/package.json | 8 ++++---- packages/patternfly-4/react-core/CHANGELOG.md | 11 +++++++++++ packages/patternfly-4/react-core/package.json | 8 ++++---- packages/patternfly-4/react-docs/CHANGELOG.md | 8 ++++++++ packages/patternfly-4/react-docs/package.json | 8 ++++---- .../react-inline-edit-extension/CHANGELOG.md | 8 ++++++++ .../react-inline-edit-extension/package.json | 12 ++++++------ packages/patternfly-4/react-integration/CHANGELOG.md | 12 ++++++++++++ .../react-integration/demo-app-ts/CHANGELOG.md | 11 +++++++++++ .../react-integration/demo-app-ts/package.json | 4 ++-- packages/patternfly-4/react-integration/package.json | 2 +- .../patternfly-4/react-styled-system/CHANGELOG.md | 8 ++++++++ .../patternfly-4/react-styled-system/package.json | 6 +++--- packages/patternfly-4/react-styles/CHANGELOG.md | 8 ++++++++ packages/patternfly-4/react-styles/package.json | 2 +- packages/patternfly-4/react-table/CHANGELOG.md | 8 ++++++++ packages/patternfly-4/react-table/package.json | 10 +++++----- packages/patternfly-4/react-tokens/CHANGELOG.md | 8 ++++++++ packages/patternfly-4/react-tokens/package.json | 2 +- .../react-virtualized-extension/CHANGELOG.md | 8 ++++++++ .../react-virtualized-extension/package.json | 8 ++++---- packages/react-icons/CHANGELOG.md | 8 ++++++++ packages/react-icons/package.json | 2 +- 24 files changed, 142 insertions(+), 36 deletions(-) diff --git a/packages/patternfly-4/react-charts/CHANGELOG.md b/packages/patternfly-4/react-charts/CHANGELOG.md index 97a9c4782d4..831a6661c01 100644 --- a/packages/patternfly-4/react-charts/CHANGELOG.md +++ b/packages/patternfly-4/react-charts/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [4.1.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.1.3...@patternfly/react-charts@4.1.4) (2019-06-10) + +**Note:** Version bump only for package @patternfly/react-charts + + + + + ## [4.1.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.1.2...@patternfly/react-charts@4.1.3) (2019-06-10) **Note:** Version bump only for package @patternfly/react-charts diff --git a/packages/patternfly-4/react-charts/package.json b/packages/patternfly-4/react-charts/package.json index 9936b998a1a..791dbac6f11 100644 --- a/packages/patternfly-4/react-charts/package.json +++ b/packages/patternfly-4/react-charts/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-charts", - "version": "4.1.3", + "version": "4.1.4", "description": "This library provides a set of React chart components for use with the PatternFly reference implementation.", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -29,7 +29,7 @@ }, "homepage": "https://github.com/patternfly/patternfly-react#readme", "dependencies": { - "@patternfly/react-styles": "^3.3.1" + "@patternfly/react-styles": "^3.3.2" }, "peerDependencies": { "prop-types": "^15.6.1", @@ -65,8 +65,8 @@ "@babel/preset-env": "^7.0.0", "@babel/preset-react": "^7.0.0", "@patternfly/patternfly": "2.12.5", - "@patternfly/react-icons": "^3.9.4", - "@patternfly/react-tokens": "^2.5.4", + "@patternfly/react-icons": "^3.9.5", + "@patternfly/react-tokens": "^2.5.5", "babel-plugin-transform-es2015-modules-umd": "^6.24.1", "babel-plugin-typescript-to-proptypes": "^0.17.1", "css": "^2.2.3", diff --git a/packages/patternfly-4/react-core/CHANGELOG.md b/packages/patternfly-4/react-core/CHANGELOG.md index 9645f143860..c8289799342 100644 --- a/packages/patternfly-4/react-core/CHANGELOG.md +++ b/packages/patternfly-4/react-core/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [3.38.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.37.1...@patternfly/react-core@3.38.0) (2019-06-10) + + +### Features + +* **backdrop:** Convert backdrop to typescript ([#2105](https://github.com/patternfly/patternfly-react/issues/2105)) ([fd3d771](https://github.com/patternfly/patternfly-react/commit/fd3d771)) + + + + + ## [3.37.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.37.0...@patternfly/react-core@3.37.1) (2019-06-10) **Note:** Version bump only for package @patternfly/react-core diff --git a/packages/patternfly-4/react-core/package.json b/packages/patternfly-4/react-core/package.json index 694f6e30049..a179a158a2b 100644 --- a/packages/patternfly-4/react-core/package.json +++ b/packages/patternfly-4/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-core", - "version": "3.37.1", + "version": "3.38.0", "description": "This library provides a set of common React components for use with the PatternFly reference implementation.", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -41,9 +41,9 @@ "typecheck": "tsc -p tsconfig.typecheck.json" }, "dependencies": { - "@patternfly/react-icons": "^3.9.4", - "@patternfly/react-styles": "^3.3.1", - "@patternfly/react-tokens": "^2.5.4", + "@patternfly/react-icons": "^3.9.5", + "@patternfly/react-styles": "^3.3.2", + "@patternfly/react-tokens": "^2.5.5", "@tippy.js/react": "^1.1.1", "emotion": "^9.2.9", "exenv": "^1.2.2", diff --git a/packages/patternfly-4/react-docs/CHANGELOG.md b/packages/patternfly-4/react-docs/CHANGELOG.md index e70d3205d06..75d629c950f 100644 --- a/packages/patternfly-4/react-docs/CHANGELOG.md +++ b/packages/patternfly-4/react-docs/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [4.6.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.6.9...@patternfly/react-docs@4.6.10) (2019-06-10) + +**Note:** Version bump only for package @patternfly/react-docs + + + + + ## [4.6.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.6.8...@patternfly/react-docs@4.6.9) (2019-06-10) **Note:** Version bump only for package @patternfly/react-docs diff --git a/packages/patternfly-4/react-docs/package.json b/packages/patternfly-4/react-docs/package.json index f2dcb476867..aacecce0746 100644 --- a/packages/patternfly-4/react-docs/package.json +++ b/packages/patternfly-4/react-docs/package.json @@ -1,7 +1,7 @@ { "name": "@patternfly/react-docs", "description": "PatternFly React Docs", - "version": "4.6.9", + "version": "4.6.10", "author": "Red Hat", "license": "MIT", "private": true, @@ -17,9 +17,9 @@ "@mdx-js/mdx": "1.0.2", "@mdx-js/react": "1.0.2", "@patternfly/patternfly": "2.12.5", - "@patternfly/react-core": "^3.37.1", - "@patternfly/react-icons": "^3.9.4", - "@patternfly/react-virtualized-extension": "^1.0.1", + "@patternfly/react-core": "^3.38.0", + "@patternfly/react-icons": "^3.9.5", + "@patternfly/react-virtualized-extension": "^1.0.4", "gatsby": "2.3.14", "gatsby-mdx": "0.6.3", "gatsby-plugin-react-helmet": "^3.0.11", diff --git a/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md b/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md index ffc4f15cd46..d9896873320 100644 --- a/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md +++ b/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.7.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.7.4...@patternfly/react-inline-edit-extension@2.7.5) (2019-06-10) + +**Note:** Version bump only for package @patternfly/react-inline-edit-extension + + + + + ## [2.7.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.7.3...@patternfly/react-inline-edit-extension@2.7.4) (2019-06-10) **Note:** Version bump only for package @patternfly/react-inline-edit-extension diff --git a/packages/patternfly-4/react-inline-edit-extension/package.json b/packages/patternfly-4/react-inline-edit-extension/package.json index 7a0be599dff..7c30bde0fa0 100644 --- a/packages/patternfly-4/react-inline-edit-extension/package.json +++ b/packages/patternfly-4/react-inline-edit-extension/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-inline-edit-extension", - "version": "2.7.4", + "version": "2.7.5", "description": "This library provides inline editing support for PatternFly 4 React table", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -28,10 +28,10 @@ "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/", "dependencies": { "@patternfly/patternfly": "2.12.5", - "@patternfly/react-core": "^3.37.1", - "@patternfly/react-icons": "^3.9.4", - "@patternfly/react-styles": "^3.3.1", - "@patternfly/react-table": "^2.10.4", + "@patternfly/react-core": "^3.38.0", + "@patternfly/react-icons": "^3.9.5", + "@patternfly/react-styles": "^3.3.2", + "@patternfly/react-table": "^2.10.5", "classnames": "^2.2.5", "exenv": "^1.2.2", "reactabular-table": "^8.14.0" @@ -51,7 +51,7 @@ "postbuild": "node ./build/copyStyles.js" }, "optionalDependencies": { - "@patternfly/react-tokens": "^2.5.4" + "@patternfly/react-tokens": "^2.5.5" }, "devDependencies": { "@babel/cli": "^7.0.0", diff --git a/packages/patternfly-4/react-integration/CHANGELOG.md b/packages/patternfly-4/react-integration/CHANGELOG.md index 20d638ec4d5..be71a2f984e 100644 --- a/packages/patternfly-4/react-integration/CHANGELOG.md +++ b/packages/patternfly-4/react-integration/CHANGELOG.md @@ -3,6 +3,18 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# 1.18.0 (2019-06-10) + + +### Features + +* **backdrop:** Convert backdrop to typescript ([#2105](https://github.com/patternfly/patternfly-react/issues/2105)) ([fd3d771](https://github.com/patternfly/patternfly-react/commit/fd3d771)) +* **PF4: Pagination:** When empty array sent to pagination no per page should be visible ([#2175](https://github.com/patternfly/patternfly-react/issues/2175)) ([cb97dfd](https://github.com/patternfly/patternfly-react/commit/cb97dfd)) + + + + + # [1.17.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-integration@1.16.0...@patternfly/react-integration@1.17.0) (2019-06-05) diff --git a/packages/patternfly-4/react-integration/demo-app-ts/CHANGELOG.md b/packages/patternfly-4/react-integration/demo-app-ts/CHANGELOG.md index f8db2493bc3..1e7c2dcc8b8 100644 --- a/packages/patternfly-4/react-integration/demo-app-ts/CHANGELOG.md +++ b/packages/patternfly-4/react-integration/demo-app-ts/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.19.0](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.18.3...demo-app-ts@1.19.0) (2019-06-10) + + +### Features + +* **backdrop:** Convert backdrop to typescript ([#2105](https://github.com/patternfly/patternfly-react/issues/2105)) ([fd3d771](https://github.com/patternfly/patternfly-react/commit/fd3d771)) + + + + + ## [1.18.3](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.18.2...demo-app-ts@1.18.3) (2019-06-10) **Note:** Version bump only for package demo-app-ts diff --git a/packages/patternfly-4/react-integration/demo-app-ts/package.json b/packages/patternfly-4/react-integration/demo-app-ts/package.json index 7cc7186a780..50823a7b09d 100644 --- a/packages/patternfly-4/react-integration/demo-app-ts/package.json +++ b/packages/patternfly-4/react-integration/demo-app-ts/package.json @@ -1,13 +1,13 @@ { "name": "demo-app-ts", "private": true, - "version": "1.18.3", + "version": "1.19.0", "scripts": { "build:demo-app": "react-scripts build", "start:demo-app": "react-scripts start" }, "dependencies": { - "@patternfly/react-core": "^3.37.1", + "@patternfly/react-core": "^3.38.0", "react": "^16.8.4", "react-dom": "^16.8.4", "react-router": "^4.3.1", diff --git a/packages/patternfly-4/react-integration/package.json b/packages/patternfly-4/react-integration/package.json index a6186f242fd..61a92d9b7b5 100644 --- a/packages/patternfly-4/react-integration/package.json +++ b/packages/patternfly-4/react-integration/package.json @@ -1,7 +1,7 @@ { "name": "@patternfly/react-integration", "private": true, - "version": "1.17.0", + "version": "1.18.0", "description": "Integration testing for PF4 using demo applications", "main": "lib/index.js", "sideEffects": false, diff --git a/packages/patternfly-4/react-styled-system/CHANGELOG.md b/packages/patternfly-4/react-styled-system/CHANGELOG.md index 809110cff0e..41d0ecf612a 100644 --- a/packages/patternfly-4/react-styled-system/CHANGELOG.md +++ b/packages/patternfly-4/react-styled-system/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [3.5.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styled-system@3.5.1...@patternfly/react-styled-system@3.5.2) (2019-06-10) + +**Note:** Version bump only for package @patternfly/react-styled-system + + + + + ## 3.5.1 (2019-06-10) **Note:** Version bump only for package @patternfly/react-styled-system diff --git a/packages/patternfly-4/react-styled-system/package.json b/packages/patternfly-4/react-styled-system/package.json index 5c9697abc0c..0b140b6f499 100644 --- a/packages/patternfly-4/react-styled-system/package.json +++ b/packages/patternfly-4/react-styled-system/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-styled-system", - "version": "3.5.1", + "version": "3.5.2", "description": "Experimental: Styled System package with PatternFly 4 theming", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -35,8 +35,8 @@ "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose" }, "dependencies": { - "@patternfly/react-styles": "^3.3.1", - "@patternfly/react-tokens": "^2.5.4", + "@patternfly/react-styles": "^3.3.2", + "@patternfly/react-tokens": "^2.5.5", "emotion-theming": "^9.2.9", "react-emotion": "^9.2.9", "styled-system": "^3.1.11" diff --git a/packages/patternfly-4/react-styles/CHANGELOG.md b/packages/patternfly-4/react-styles/CHANGELOG.md index 14f6c42c239..b4ba4c5566d 100644 --- a/packages/patternfly-4/react-styles/CHANGELOG.md +++ b/packages/patternfly-4/react-styles/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [3.3.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@3.3.1...@patternfly/react-styles@3.3.2) (2019-06-10) + +**Note:** Version bump only for package @patternfly/react-styles + + + + + ## 3.3.1 (2019-06-10) **Note:** Version bump only for package @patternfly/react-styles diff --git a/packages/patternfly-4/react-styles/package.json b/packages/patternfly-4/react-styles/package.json index 55d8c264271..71da4c8c860 100644 --- a/packages/patternfly-4/react-styles/package.json +++ b/packages/patternfly-4/react-styles/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-styles", - "version": "3.3.1", + "version": "3.3.2", "main": "dist/js/index.js", "module": "dist/esm/index.js", "types": "dist/js/index.d.ts", diff --git a/packages/patternfly-4/react-table/CHANGELOG.md b/packages/patternfly-4/react-table/CHANGELOG.md index ea2c55a7491..cb1df69b510 100644 --- a/packages/patternfly-4/react-table/CHANGELOG.md +++ b/packages/patternfly-4/react-table/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.10.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.10.4...@patternfly/react-table@2.10.5) (2019-06-10) + +**Note:** Version bump only for package @patternfly/react-table + + + + + ## [2.10.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.10.3...@patternfly/react-table@2.10.4) (2019-06-10) diff --git a/packages/patternfly-4/react-table/package.json b/packages/patternfly-4/react-table/package.json index 3b4116a3b97..b75df0ee7fb 100644 --- a/packages/patternfly-4/react-table/package.json +++ b/packages/patternfly-4/react-table/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-table", - "version": "2.10.4", + "version": "2.10.5", "description": "This library provides a set of React table components for use with the PatternFly 4", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -28,10 +28,10 @@ "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/react-table#readme", "dependencies": { "@patternfly/patternfly": "2.12.5", - "@patternfly/react-core": "^3.37.1", - "@patternfly/react-icons": "^3.9.4", - "@patternfly/react-styles": "^3.3.1", - "@patternfly/react-tokens": "^2.5.4", + "@patternfly/react-core": "^3.38.0", + "@patternfly/react-icons": "^3.9.5", + "@patternfly/react-styles": "^3.3.2", + "@patternfly/react-tokens": "^2.5.5", "classnames": "^2.2.5", "exenv": "^1.2.2" }, diff --git a/packages/patternfly-4/react-tokens/CHANGELOG.md b/packages/patternfly-4/react-tokens/CHANGELOG.md index 5f2b529ac68..5e03821752c 100644 --- a/packages/patternfly-4/react-tokens/CHANGELOG.md +++ b/packages/patternfly-4/react-tokens/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.5.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-tokens@2.5.4...@patternfly/react-tokens@2.5.5) (2019-06-10) + +**Note:** Version bump only for package @patternfly/react-tokens + + + + + ## 2.5.4 (2019-06-10) **Note:** Version bump only for package @patternfly/react-tokens diff --git a/packages/patternfly-4/react-tokens/package.json b/packages/patternfly-4/react-tokens/package.json index 0f512dc8882..339471b93e6 100644 --- a/packages/patternfly-4/react-tokens/package.json +++ b/packages/patternfly-4/react-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-tokens", - "version": "2.5.4", + "version": "2.5.5", "description": "This library provides access to the design tokens of PatternFly 4 from JavaScript", "main": "dist/js/index.js", "module": "dist/esm/index.js", diff --git a/packages/patternfly-4/react-virtualized-extension/CHANGELOG.md b/packages/patternfly-4/react-virtualized-extension/CHANGELOG.md index 7fc823c32d0..84636f9269f 100644 --- a/packages/patternfly-4/react-virtualized-extension/CHANGELOG.md +++ b/packages/patternfly-4/react-virtualized-extension/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.0.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-virtualized-extension@1.0.3...@patternfly/react-virtualized-extension@1.0.4) (2019-06-10) + +**Note:** Version bump only for package @patternfly/react-virtualized-extension + + + + + ## [1.0.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-virtualized-extension@1.0.2...@patternfly/react-virtualized-extension@1.0.3) (2019-06-10) **Note:** Version bump only for package @patternfly/react-virtualized-extension diff --git a/packages/patternfly-4/react-virtualized-extension/package.json b/packages/patternfly-4/react-virtualized-extension/package.json index 2472d780fc0..d5234edba9d 100644 --- a/packages/patternfly-4/react-virtualized-extension/package.json +++ b/packages/patternfly-4/react-virtualized-extension/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-virtualized-extension", - "version": "1.0.3", + "version": "1.0.4", "description": "This library provides efficient rendering extensions for PatternFly 4 React tables and lists.", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -28,9 +28,9 @@ "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/", "dependencies": { "@patternfly/patternfly": "2.12.5", - "@patternfly/react-core": "^3.37.1", - "@patternfly/react-icons": "^3.9.4", - "@patternfly/react-styles": "^3.3.1", + "@patternfly/react-core": "^3.38.0", + "@patternfly/react-icons": "^3.9.5", + "@patternfly/react-styles": "^3.3.2", "clsx": "^1.0.1", "dom-helpers": "^2.4.0 || ^3.0.0", "exenv": "^1.2.2", diff --git a/packages/react-icons/CHANGELOG.md b/packages/react-icons/CHANGELOG.md index c25275a3f26..4caf1dd9905 100644 --- a/packages/react-icons/CHANGELOG.md +++ b/packages/react-icons/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [3.9.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-icons@3.9.4...@patternfly/react-icons@3.9.5) (2019-06-10) + +**Note:** Version bump only for package @patternfly/react-icons + + + + + ## 3.9.4 (2019-06-10) **Note:** Version bump only for package @patternfly/react-icons diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json index c7ebcd2617d..73f84f3e166 100644 --- a/packages/react-icons/package.json +++ b/packages/react-icons/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-icons", - "version": "3.9.4", + "version": "3.9.5", "description": "PatternFly 4 Icons as React Components", "main": "dist/js/index.js", "module": "dist/esm/index.js", From 0f9ebf99a158ed9c340e4480e57a053206841b74 Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Mon, 10 Jun 2019 17:21:31 -0400 Subject: [PATCH 21/32] feat(Table): Add support for .pf-m-grid-2xl breakpoint (#2206) Added breakpoint to list of available breakpoints and updated snapshot. Fixes https://github.com/patternfly/patternfly-react/issues/2198 --- .../src/components/Table/Table.d.ts | 3 +- .../react-table/src/components/Table/Table.js | 3 +- .../Table/__snapshots__/Table.test.js.snap | 6053 +++++++++++++++++ 3 files changed, 6057 insertions(+), 2 deletions(-) diff --git a/packages/patternfly-4/react-table/src/components/Table/Table.d.ts b/packages/patternfly-4/react-table/src/components/Table/Table.d.ts index 2202173d133..eb4a91ea269 100644 --- a/packages/patternfly-4/react-table/src/components/Table/Table.d.ts +++ b/packages/patternfly-4/react-table/src/components/Table/Table.d.ts @@ -11,7 +11,8 @@ export const TableGridBreakpoint: { grid: 'grid', gridMd: 'grid-md', gridLg: 'grid-lg', - gridXl: 'grid-xl' + gridXl: 'grid-xl', + grid2xl: 'grid-2xl' }; export const TableVariant: { diff --git a/packages/patternfly-4/react-table/src/components/Table/Table.js b/packages/patternfly-4/react-table/src/components/Table/Table.js index 302bd677e9f..9e5643b3298 100644 --- a/packages/patternfly-4/react-table/src/components/Table/Table.js +++ b/packages/patternfly-4/react-table/src/components/Table/Table.js @@ -17,7 +17,8 @@ export const TableGridBreakpoint = { grid: 'grid', gridMd: 'grid-md', gridLg: 'grid-lg', - gridXl: 'grid-xl' + gridXl: 'grid-xl', + grid2xl: 'grid-2xl' }; export const TableVariant = { diff --git a/packages/patternfly-4/react-table/src/components/Table/__snapshots__/Table.test.js.snap b/packages/patternfly-4/react-table/src/components/Table/__snapshots__/Table.test.js.snap index d7ad140c2b9..2abe5b04541 100644 --- a/packages/patternfly-4/react-table/src/components/Table/__snapshots__/Table.test.js.snap +++ b/packages/patternfly-4/react-table/src/components/Table/__snapshots__/Table.test.js.snap @@ -86125,6 +86125,6059 @@ exports[`Table variants Breakpoint - grid 1`] = ` `; +exports[`Table variants Breakpoint - grid-2xl 1`] = ` + + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + Branches + + Pull requests + + Workspaces + + Last Commit +
+ + +`; + exports[`Table variants Breakpoint - grid-lg 1`] = ` Date: Mon, 10 Jun 2019 21:35:29 +0000 Subject: [PATCH 22/32] chore(release): releasing packages [ci skip] - @patternfly/react-inline-edit-extension@2.7.6 - @patternfly/react-table@2.11.0 --- .../react-inline-edit-extension/CHANGELOG.md | 8 ++++++++ .../react-inline-edit-extension/package.json | 4 ++-- packages/patternfly-4/react-table/CHANGELOG.md | 11 +++++++++++ packages/patternfly-4/react-table/package.json | 2 +- 4 files changed, 22 insertions(+), 3 deletions(-) diff --git a/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md b/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md index d9896873320..7cbb9ea957b 100644 --- a/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md +++ b/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.7.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.7.5...@patternfly/react-inline-edit-extension@2.7.6) (2019-06-10) + +**Note:** Version bump only for package @patternfly/react-inline-edit-extension + + + + + ## [2.7.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.7.4...@patternfly/react-inline-edit-extension@2.7.5) (2019-06-10) **Note:** Version bump only for package @patternfly/react-inline-edit-extension diff --git a/packages/patternfly-4/react-inline-edit-extension/package.json b/packages/patternfly-4/react-inline-edit-extension/package.json index 7c30bde0fa0..81a8629def4 100644 --- a/packages/patternfly-4/react-inline-edit-extension/package.json +++ b/packages/patternfly-4/react-inline-edit-extension/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-inline-edit-extension", - "version": "2.7.5", + "version": "2.7.6", "description": "This library provides inline editing support for PatternFly 4 React table", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -31,7 +31,7 @@ "@patternfly/react-core": "^3.38.0", "@patternfly/react-icons": "^3.9.5", "@patternfly/react-styles": "^3.3.2", - "@patternfly/react-table": "^2.10.5", + "@patternfly/react-table": "^2.11.0", "classnames": "^2.2.5", "exenv": "^1.2.2", "reactabular-table": "^8.14.0" diff --git a/packages/patternfly-4/react-table/CHANGELOG.md b/packages/patternfly-4/react-table/CHANGELOG.md index cb1df69b510..a59be5ec9b8 100644 --- a/packages/patternfly-4/react-table/CHANGELOG.md +++ b/packages/patternfly-4/react-table/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.11.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.10.5...@patternfly/react-table@2.11.0) (2019-06-10) + + +### Features + +* **Table:** Add support for .pf-m-grid-2xl breakpoint ([#2206](https://github.com/patternfly/patternfly-react/issues/2206)) ([0f9ebf9](https://github.com/patternfly/patternfly-react/commit/0f9ebf9)) + + + + + ## [2.10.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.10.4...@patternfly/react-table@2.10.5) (2019-06-10) **Note:** Version bump only for package @patternfly/react-table diff --git a/packages/patternfly-4/react-table/package.json b/packages/patternfly-4/react-table/package.json index b75df0ee7fb..d6cd25d71eb 100644 --- a/packages/patternfly-4/react-table/package.json +++ b/packages/patternfly-4/react-table/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-table", - "version": "2.10.5", + "version": "2.11.0", "description": "This library provides a set of React table components for use with the PatternFly 4", "main": "dist/js/index.js", "module": "dist/esm/index.js", From 6365c33b29faf0b6dd965bdc134e508a20376dc5 Mon Sep 17 00:00:00 2001 From: Dana Gutride Date: Tue, 11 Jun 2019 09:38:17 -0400 Subject: [PATCH 23/32] fix(styles): add sideeffects to react-styles (#2207) --- packages/patternfly-4/react-styles/package.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/patternfly-4/react-styles/package.json b/packages/patternfly-4/react-styles/package.json index 71da4c8c860..511087f7cc9 100644 --- a/packages/patternfly-4/react-styles/package.json +++ b/packages/patternfly-4/react-styles/package.json @@ -4,7 +4,10 @@ "main": "dist/js/index.js", "module": "dist/esm/index.js", "types": "dist/js/index.d.ts", - "sideEffects": false, + "sideEffects": [ + "*.css", + "*.scss" + ], "description": "", "author": "Red Hat", "publishConfig": { From d8bf5f5df124e1045866aa06a804356cffd755b4 Mon Sep 17 00:00:00 2001 From: patternfly-build Date: Tue, 11 Jun 2019 14:02:47 +0000 Subject: [PATCH 24/32] chore(release): releasing packages [ci skip] - @patternfly/react-charts@4.1.5 - @patternfly/react-core@3.38.1 - @patternfly/react-docs@4.6.11 - @patternfly/react-inline-edit-extension@2.7.7 - demo-app-ts@1.19.1 - @patternfly/react-styled-system@3.5.3 - @patternfly/react-styles@3.3.3 - @patternfly/react-table@2.11.1 - @patternfly/react-virtualized-extension@1.0.5 --- packages/patternfly-4/react-charts/CHANGELOG.md | 8 ++++++++ packages/patternfly-4/react-charts/package.json | 4 ++-- packages/patternfly-4/react-core/CHANGELOG.md | 8 ++++++++ packages/patternfly-4/react-core/package.json | 4 ++-- packages/patternfly-4/react-docs/CHANGELOG.md | 8 ++++++++ packages/patternfly-4/react-docs/package.json | 6 +++--- .../react-inline-edit-extension/CHANGELOG.md | 8 ++++++++ .../react-inline-edit-extension/package.json | 8 ++++---- .../react-integration/demo-app-ts/CHANGELOG.md | 8 ++++++++ .../react-integration/demo-app-ts/package.json | 4 ++-- .../patternfly-4/react-styled-system/CHANGELOG.md | 8 ++++++++ .../patternfly-4/react-styled-system/package.json | 4 ++-- packages/patternfly-4/react-styles/CHANGELOG.md | 11 +++++++++++ packages/patternfly-4/react-styles/package.json | 2 +- packages/patternfly-4/react-table/CHANGELOG.md | 8 ++++++++ packages/patternfly-4/react-table/package.json | 6 +++--- .../react-virtualized-extension/CHANGELOG.md | 8 ++++++++ .../react-virtualized-extension/package.json | 6 +++--- 18 files changed, 97 insertions(+), 22 deletions(-) diff --git a/packages/patternfly-4/react-charts/CHANGELOG.md b/packages/patternfly-4/react-charts/CHANGELOG.md index 831a6661c01..dbfd1fb1926 100644 --- a/packages/patternfly-4/react-charts/CHANGELOG.md +++ b/packages/patternfly-4/react-charts/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [4.1.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.1.4...@patternfly/react-charts@4.1.5) (2019-06-11) + +**Note:** Version bump only for package @patternfly/react-charts + + + + + ## [4.1.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.1.3...@patternfly/react-charts@4.1.4) (2019-06-10) **Note:** Version bump only for package @patternfly/react-charts diff --git a/packages/patternfly-4/react-charts/package.json b/packages/patternfly-4/react-charts/package.json index 791dbac6f11..3442af6a225 100644 --- a/packages/patternfly-4/react-charts/package.json +++ b/packages/patternfly-4/react-charts/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-charts", - "version": "4.1.4", + "version": "4.1.5", "description": "This library provides a set of React chart components for use with the PatternFly reference implementation.", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -29,7 +29,7 @@ }, "homepage": "https://github.com/patternfly/patternfly-react#readme", "dependencies": { - "@patternfly/react-styles": "^3.3.2" + "@patternfly/react-styles": "^3.3.3" }, "peerDependencies": { "prop-types": "^15.6.1", diff --git a/packages/patternfly-4/react-core/CHANGELOG.md b/packages/patternfly-4/react-core/CHANGELOG.md index c8289799342..d21a94a2288 100644 --- a/packages/patternfly-4/react-core/CHANGELOG.md +++ b/packages/patternfly-4/react-core/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [3.38.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.38.0...@patternfly/react-core@3.38.1) (2019-06-11) + +**Note:** Version bump only for package @patternfly/react-core + + + + + # [3.38.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.37.1...@patternfly/react-core@3.38.0) (2019-06-10) diff --git a/packages/patternfly-4/react-core/package.json b/packages/patternfly-4/react-core/package.json index a179a158a2b..1b3f03eb8ef 100644 --- a/packages/patternfly-4/react-core/package.json +++ b/packages/patternfly-4/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-core", - "version": "3.38.0", + "version": "3.38.1", "description": "This library provides a set of common React components for use with the PatternFly reference implementation.", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -42,7 +42,7 @@ }, "dependencies": { "@patternfly/react-icons": "^3.9.5", - "@patternfly/react-styles": "^3.3.2", + "@patternfly/react-styles": "^3.3.3", "@patternfly/react-tokens": "^2.5.5", "@tippy.js/react": "^1.1.1", "emotion": "^9.2.9", diff --git a/packages/patternfly-4/react-docs/CHANGELOG.md b/packages/patternfly-4/react-docs/CHANGELOG.md index 75d629c950f..103fa6c38b3 100644 --- a/packages/patternfly-4/react-docs/CHANGELOG.md +++ b/packages/patternfly-4/react-docs/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [4.6.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.6.10...@patternfly/react-docs@4.6.11) (2019-06-11) + +**Note:** Version bump only for package @patternfly/react-docs + + + + + ## [4.6.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.6.9...@patternfly/react-docs@4.6.10) (2019-06-10) **Note:** Version bump only for package @patternfly/react-docs diff --git a/packages/patternfly-4/react-docs/package.json b/packages/patternfly-4/react-docs/package.json index aacecce0746..a3a7faf04e9 100644 --- a/packages/patternfly-4/react-docs/package.json +++ b/packages/patternfly-4/react-docs/package.json @@ -1,7 +1,7 @@ { "name": "@patternfly/react-docs", "description": "PatternFly React Docs", - "version": "4.6.10", + "version": "4.6.11", "author": "Red Hat", "license": "MIT", "private": true, @@ -17,9 +17,9 @@ "@mdx-js/mdx": "1.0.2", "@mdx-js/react": "1.0.2", "@patternfly/patternfly": "2.12.5", - "@patternfly/react-core": "^3.38.0", + "@patternfly/react-core": "^3.38.1", "@patternfly/react-icons": "^3.9.5", - "@patternfly/react-virtualized-extension": "^1.0.4", + "@patternfly/react-virtualized-extension": "^1.0.5", "gatsby": "2.3.14", "gatsby-mdx": "0.6.3", "gatsby-plugin-react-helmet": "^3.0.11", diff --git a/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md b/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md index 7cbb9ea957b..08f142cec47 100644 --- a/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md +++ b/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.7.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.7.6...@patternfly/react-inline-edit-extension@2.7.7) (2019-06-11) + +**Note:** Version bump only for package @patternfly/react-inline-edit-extension + + + + + ## [2.7.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.7.5...@patternfly/react-inline-edit-extension@2.7.6) (2019-06-10) **Note:** Version bump only for package @patternfly/react-inline-edit-extension diff --git a/packages/patternfly-4/react-inline-edit-extension/package.json b/packages/patternfly-4/react-inline-edit-extension/package.json index 81a8629def4..b8f9ed1a6fe 100644 --- a/packages/patternfly-4/react-inline-edit-extension/package.json +++ b/packages/patternfly-4/react-inline-edit-extension/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-inline-edit-extension", - "version": "2.7.6", + "version": "2.7.7", "description": "This library provides inline editing support for PatternFly 4 React table", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -28,10 +28,10 @@ "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/", "dependencies": { "@patternfly/patternfly": "2.12.5", - "@patternfly/react-core": "^3.38.0", + "@patternfly/react-core": "^3.38.1", "@patternfly/react-icons": "^3.9.5", - "@patternfly/react-styles": "^3.3.2", - "@patternfly/react-table": "^2.11.0", + "@patternfly/react-styles": "^3.3.3", + "@patternfly/react-table": "^2.11.1", "classnames": "^2.2.5", "exenv": "^1.2.2", "reactabular-table": "^8.14.0" diff --git a/packages/patternfly-4/react-integration/demo-app-ts/CHANGELOG.md b/packages/patternfly-4/react-integration/demo-app-ts/CHANGELOG.md index 1e7c2dcc8b8..589a6b59f9d 100644 --- a/packages/patternfly-4/react-integration/demo-app-ts/CHANGELOG.md +++ b/packages/patternfly-4/react-integration/demo-app-ts/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.19.1](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.19.0...demo-app-ts@1.19.1) (2019-06-11) + +**Note:** Version bump only for package demo-app-ts + + + + + # [1.19.0](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.18.3...demo-app-ts@1.19.0) (2019-06-10) diff --git a/packages/patternfly-4/react-integration/demo-app-ts/package.json b/packages/patternfly-4/react-integration/demo-app-ts/package.json index 50823a7b09d..3c922f1ab8d 100644 --- a/packages/patternfly-4/react-integration/demo-app-ts/package.json +++ b/packages/patternfly-4/react-integration/demo-app-ts/package.json @@ -1,13 +1,13 @@ { "name": "demo-app-ts", "private": true, - "version": "1.19.0", + "version": "1.19.1", "scripts": { "build:demo-app": "react-scripts build", "start:demo-app": "react-scripts start" }, "dependencies": { - "@patternfly/react-core": "^3.38.0", + "@patternfly/react-core": "^3.38.1", "react": "^16.8.4", "react-dom": "^16.8.4", "react-router": "^4.3.1", diff --git a/packages/patternfly-4/react-styled-system/CHANGELOG.md b/packages/patternfly-4/react-styled-system/CHANGELOG.md index 41d0ecf612a..b2c25b71ce1 100644 --- a/packages/patternfly-4/react-styled-system/CHANGELOG.md +++ b/packages/patternfly-4/react-styled-system/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [3.5.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styled-system@3.5.2...@patternfly/react-styled-system@3.5.3) (2019-06-11) + +**Note:** Version bump only for package @patternfly/react-styled-system + + + + + ## [3.5.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styled-system@3.5.1...@patternfly/react-styled-system@3.5.2) (2019-06-10) **Note:** Version bump only for package @patternfly/react-styled-system diff --git a/packages/patternfly-4/react-styled-system/package.json b/packages/patternfly-4/react-styled-system/package.json index 0b140b6f499..f22c11045b7 100644 --- a/packages/patternfly-4/react-styled-system/package.json +++ b/packages/patternfly-4/react-styled-system/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-styled-system", - "version": "3.5.2", + "version": "3.5.3", "description": "Experimental: Styled System package with PatternFly 4 theming", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -35,7 +35,7 @@ "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose" }, "dependencies": { - "@patternfly/react-styles": "^3.3.2", + "@patternfly/react-styles": "^3.3.3", "@patternfly/react-tokens": "^2.5.5", "emotion-theming": "^9.2.9", "react-emotion": "^9.2.9", diff --git a/packages/patternfly-4/react-styles/CHANGELOG.md b/packages/patternfly-4/react-styles/CHANGELOG.md index b4ba4c5566d..8623655d4fa 100644 --- a/packages/patternfly-4/react-styles/CHANGELOG.md +++ b/packages/patternfly-4/react-styles/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [3.3.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@3.3.2...@patternfly/react-styles@3.3.3) (2019-06-11) + + +### Bug Fixes + +* **styles:** add sideeffects to react-styles ([#2207](https://github.com/patternfly/patternfly-react/issues/2207)) ([6365c33](https://github.com/patternfly/patternfly-react/commit/6365c33)) + + + + + ## [3.3.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@3.3.1...@patternfly/react-styles@3.3.2) (2019-06-10) **Note:** Version bump only for package @patternfly/react-styles diff --git a/packages/patternfly-4/react-styles/package.json b/packages/patternfly-4/react-styles/package.json index 511087f7cc9..be44ff89a4e 100644 --- a/packages/patternfly-4/react-styles/package.json +++ b/packages/patternfly-4/react-styles/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-styles", - "version": "3.3.2", + "version": "3.3.3", "main": "dist/js/index.js", "module": "dist/esm/index.js", "types": "dist/js/index.d.ts", diff --git a/packages/patternfly-4/react-table/CHANGELOG.md b/packages/patternfly-4/react-table/CHANGELOG.md index a59be5ec9b8..6386e9beca9 100644 --- a/packages/patternfly-4/react-table/CHANGELOG.md +++ b/packages/patternfly-4/react-table/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.11.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.11.0...@patternfly/react-table@2.11.1) (2019-06-11) + +**Note:** Version bump only for package @patternfly/react-table + + + + + # [2.11.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.10.5...@patternfly/react-table@2.11.0) (2019-06-10) diff --git a/packages/patternfly-4/react-table/package.json b/packages/patternfly-4/react-table/package.json index d6cd25d71eb..5b790cad642 100644 --- a/packages/patternfly-4/react-table/package.json +++ b/packages/patternfly-4/react-table/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-table", - "version": "2.11.0", + "version": "2.11.1", "description": "This library provides a set of React table components for use with the PatternFly 4", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -28,9 +28,9 @@ "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/react-table#readme", "dependencies": { "@patternfly/patternfly": "2.12.5", - "@patternfly/react-core": "^3.38.0", + "@patternfly/react-core": "^3.38.1", "@patternfly/react-icons": "^3.9.5", - "@patternfly/react-styles": "^3.3.2", + "@patternfly/react-styles": "^3.3.3", "@patternfly/react-tokens": "^2.5.5", "classnames": "^2.2.5", "exenv": "^1.2.2" diff --git a/packages/patternfly-4/react-virtualized-extension/CHANGELOG.md b/packages/patternfly-4/react-virtualized-extension/CHANGELOG.md index 84636f9269f..6f6d9c1bce0 100644 --- a/packages/patternfly-4/react-virtualized-extension/CHANGELOG.md +++ b/packages/patternfly-4/react-virtualized-extension/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.0.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-virtualized-extension@1.0.4...@patternfly/react-virtualized-extension@1.0.5) (2019-06-11) + +**Note:** Version bump only for package @patternfly/react-virtualized-extension + + + + + ## [1.0.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-virtualized-extension@1.0.3...@patternfly/react-virtualized-extension@1.0.4) (2019-06-10) **Note:** Version bump only for package @patternfly/react-virtualized-extension diff --git a/packages/patternfly-4/react-virtualized-extension/package.json b/packages/patternfly-4/react-virtualized-extension/package.json index d5234edba9d..19191ed84f7 100644 --- a/packages/patternfly-4/react-virtualized-extension/package.json +++ b/packages/patternfly-4/react-virtualized-extension/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-virtualized-extension", - "version": "1.0.4", + "version": "1.0.5", "description": "This library provides efficient rendering extensions for PatternFly 4 React tables and lists.", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -28,9 +28,9 @@ "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/", "dependencies": { "@patternfly/patternfly": "2.12.5", - "@patternfly/react-core": "^3.38.0", + "@patternfly/react-core": "^3.38.1", "@patternfly/react-icons": "^3.9.5", - "@patternfly/react-styles": "^3.3.2", + "@patternfly/react-styles": "^3.3.3", "clsx": "^1.0.1", "dom-helpers": "^2.4.0 || ^3.0.0", "exenv": "^1.2.2", From 58eb9ccdcfd020797b6c8a6094c58365be925368 Mon Sep 17 00:00:00 2001 From: Jeff Phillips Date: Tue, 11 Jun 2019 14:13:17 -0400 Subject: [PATCH 25/32] feat(Topology): Add @patternfly/react-topology package (#2170) --- .../src/layouts/Stack/examples/stack.scss | 4 +- .../src/layouts/Toolbar/examples/toolbar.scss | 4 +- packages/patternfly-4/react-docs/.eslintrc.js | 1 + .../patternfly-4/react-docs/gatsby-node.js | 1 + .../src/components/componentDocs/liveEdit.js | 4 +- packages/patternfly-4/react-topology/.babelrc | 3 + .../patternfly-4/react-topology/.npmignore | 1 + .../patternfly-4/react-topology/CHANGELOG.md | 5 + .../patternfly-4/react-topology/README.md | 105 ++ .../react-topology/build/copyStyles.js | 42 + .../patternfly-4/react-topology/package.json | 73 + .../TopologyControlBar.test.tsx | 45 + .../TopologyControlBar/TopologyControlBar.tsx | 294 ++++ .../TopologyControlBar.test.tsx.snap | 1427 +++++++++++++++++ .../css/topology-controlbar-css.ts | 23 + .../components/TopologyControlBar/index.ts | 1 + .../TopologyView/TopologyView.test.tsx | 25 + .../components/TopologyView/TopologyView.tsx | 41 + .../__snapshots__/TopologyView.test.tsx.snap | 141 ++ .../TopologyView/css/topology-view-css.ts | 33 + .../TopologyView/examples/ProjectToolbar.js | 118 ++ .../TopologyView/examples/Topology.md | 121 ++ .../TopologyView/examples/ViewToolbar.js | 139 ++ .../examples/topology-example.scss | 19 + .../src/components/TopologyView/index.ts | 1 + .../react-topology/src/components/index.ts | 2 + .../patternfly-4/react-topology/src/index.ts | 1 + .../react-topology/tsconfig.base.json | 25 + .../react-topology/tsconfig.gen-dts.json | 8 + .../react-topology/tsconfig.typecheck.json | 7 + 30 files changed, 2709 insertions(+), 5 deletions(-) create mode 100644 packages/patternfly-4/react-topology/.babelrc create mode 100644 packages/patternfly-4/react-topology/.npmignore create mode 100644 packages/patternfly-4/react-topology/CHANGELOG.md create mode 100644 packages/patternfly-4/react-topology/README.md create mode 100644 packages/patternfly-4/react-topology/build/copyStyles.js create mode 100644 packages/patternfly-4/react-topology/package.json create mode 100644 packages/patternfly-4/react-topology/src/components/TopologyControlBar/TopologyControlBar.test.tsx create mode 100644 packages/patternfly-4/react-topology/src/components/TopologyControlBar/TopologyControlBar.tsx create mode 100644 packages/patternfly-4/react-topology/src/components/TopologyControlBar/__snapshots__/TopologyControlBar.test.tsx.snap create mode 100644 packages/patternfly-4/react-topology/src/components/TopologyControlBar/css/topology-controlbar-css.ts create mode 100644 packages/patternfly-4/react-topology/src/components/TopologyControlBar/index.ts create mode 100644 packages/patternfly-4/react-topology/src/components/TopologyView/TopologyView.test.tsx create mode 100644 packages/patternfly-4/react-topology/src/components/TopologyView/TopologyView.tsx create mode 100644 packages/patternfly-4/react-topology/src/components/TopologyView/__snapshots__/TopologyView.test.tsx.snap create mode 100644 packages/patternfly-4/react-topology/src/components/TopologyView/css/topology-view-css.ts create mode 100644 packages/patternfly-4/react-topology/src/components/TopologyView/examples/ProjectToolbar.js create mode 100644 packages/patternfly-4/react-topology/src/components/TopologyView/examples/Topology.md create mode 100644 packages/patternfly-4/react-topology/src/components/TopologyView/examples/ViewToolbar.js create mode 100644 packages/patternfly-4/react-topology/src/components/TopologyView/examples/topology-example.scss create mode 100644 packages/patternfly-4/react-topology/src/components/TopologyView/index.ts create mode 100644 packages/patternfly-4/react-topology/src/components/index.ts create mode 100644 packages/patternfly-4/react-topology/src/index.ts create mode 100644 packages/patternfly-4/react-topology/tsconfig.base.json create mode 100644 packages/patternfly-4/react-topology/tsconfig.gen-dts.json create mode 100644 packages/patternfly-4/react-topology/tsconfig.typecheck.json diff --git a/packages/patternfly-4/react-core/src/layouts/Stack/examples/stack.scss b/packages/patternfly-4/react-core/src/layouts/Stack/examples/stack.scss index 4a08fa4a7d8..8057d502281 100644 --- a/packages/patternfly-4/react-core/src/layouts/Stack/examples/stack.scss +++ b/packages/patternfly-4/react-core/src/layouts/Stack/examples/stack.scss @@ -1,11 +1,11 @@ .ws-preview { - & .pf-l-stack { + &.pf-l-stack { padding: 1rem; border-width: 2px; border-style: dashed; } - & .pf-l-stack > .pf-l-stack__item { + &.pf-l-stack > .pf-l-stack__item { padding: 1rem; border-width: 2px; border-style: dashed; diff --git a/packages/patternfly-4/react-core/src/layouts/Toolbar/examples/toolbar.scss b/packages/patternfly-4/react-core/src/layouts/Toolbar/examples/toolbar.scss index 2b87038b590..60e4e6aa862 100644 --- a/packages/patternfly-4/react-core/src/layouts/Toolbar/examples/toolbar.scss +++ b/packages/patternfly-4/react-core/src/layouts/Toolbar/examples/toolbar.scss @@ -1,11 +1,11 @@ .ws-preview { - & .pf-l-toolbar { + &.pf-l-toolbar { padding: 1rem; border-width: 2px; border-style: dashed; } - & .pf-l-toolbar > div { + &.pf-l-toolbar > div { padding: 1rem; border-width: 2px; border-style: dashed; diff --git a/packages/patternfly-4/react-docs/.eslintrc.js b/packages/patternfly-4/react-docs/.eslintrc.js index df4531c0c5d..757807959ff 100644 --- a/packages/patternfly-4/react-docs/.eslintrc.js +++ b/packages/patternfly-4/react-docs/.eslintrc.js @@ -20,6 +20,7 @@ module.exports = { '@patternfly-safe/react-core', '@patternfly-safe/react-icons', '@patternfly-safe/react-tokens', + '@patternfly/react-topology', '@patternfly-safe/patternfly/patternfly.css' ] } diff --git a/packages/patternfly-4/react-docs/gatsby-node.js b/packages/patternfly-4/react-docs/gatsby-node.js index 68c746a33d7..44916e5d3de 100644 --- a/packages/patternfly-4/react-docs/gatsby-node.js +++ b/packages/patternfly-4/react-docs/gatsby-node.js @@ -96,6 +96,7 @@ exports.onCreateWebpackConfig = ({ actions }) => { '@patternfly/react-styles': path.resolve(__dirname, '../react-styles'), '@patternfly/react-table': path.resolve(__dirname, '../react-table'), '@patternfly/react-tokens': path.resolve(__dirname, '../react-tokens'), + '@patternfly/react-topology': path.resolve(__dirname, '../react-topology'), // Hack to work downstream in https://github.com/patternfly/patternfly-org '@content': path.resolve(__dirname, 'src/components/componentDocs') } diff --git a/packages/patternfly-4/react-docs/src/components/componentDocs/liveEdit.js b/packages/patternfly-4/react-docs/src/components/componentDocs/liveEdit.js index f5da4e519ee..f85d739029d 100644 --- a/packages/patternfly-4/react-docs/src/components/componentDocs/liveEdit.js +++ b/packages/patternfly-4/react-docs/src/components/componentDocs/liveEdit.js @@ -14,6 +14,7 @@ import * as ReactStyles from '@patternfly/react-styles'; import * as ReactTable from '@patternfly/react-table'; import * as ReactVirtualizedExtension from '@patternfly/react-virtualized-extension'; import * as ReactTokens from '@patternfly/react-tokens'; +import * as ReactTopology from '@patternfly/react-topology'; import './live-edit.scss'; @@ -48,7 +49,8 @@ export class LiveEdit extends React.Component { ...ReactStyles, ...ReactTable, ...ReactVirtualizedExtension, - ...ReactTokens + ...ReactTokens, + ...ReactTopology } : {}; this.scope = { diff --git a/packages/patternfly-4/react-topology/.babelrc b/packages/patternfly-4/react-topology/.babelrc new file mode 100644 index 00000000000..3eeb33a71bc --- /dev/null +++ b/packages/patternfly-4/react-topology/.babelrc @@ -0,0 +1,3 @@ +{ + "extends": "../.babelrc" +} diff --git a/packages/patternfly-4/react-topology/.npmignore b/packages/patternfly-4/react-topology/.npmignore new file mode 100644 index 00000000000..378eac25d31 --- /dev/null +++ b/packages/patternfly-4/react-topology/.npmignore @@ -0,0 +1 @@ +build diff --git a/packages/patternfly-4/react-topology/CHANGELOG.md b/packages/patternfly-4/react-topology/CHANGELOG.md new file mode 100644 index 00000000000..767840ada8e --- /dev/null +++ b/packages/patternfly-4/react-topology/CHANGELOG.md @@ -0,0 +1,5 @@ +# Change Log + +All notable changes to this project will be documented in this file. +See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + diff --git a/packages/patternfly-4/react-topology/README.md b/packages/patternfly-4/react-topology/README.md new file mode 100644 index 00000000000..7952c074557 --- /dev/null +++ b/packages/patternfly-4/react-topology/README.md @@ -0,0 +1,105 @@ +# @patternfly/react-topology + +This package provides Topology View components based on [PatternFly 4][patternfly-4] + +### Prerequisite + +#### Node Environment + +This project currently supports Node [Active LTS](https://github.com/nodejs/Release#release-schedule) releases. Please stay current with Node Active LTS when developing patternfly-react. + +For example, to develop with Node 8, use the following: + +``` +nvm install 8 +nvm use 8 +``` + +This project also requires a Yarn version of >=1.6.0. The latest version can be installed [here](https://yarnpkg.com/). + +### Installing + +``` +yarn add @patternfly/react-topology +``` + +or + +``` +npm install @patternfly/react-topology --save +``` + +## Usage + +It's strongly advised to use the PatternFly Base CSS in your whole project, or some components may diverge in appearance: + +```javascript +import '@patternfly/react-core/dist/styles/base.css'; +``` + +#### Example Component Usage + +```javascript +import React from 'react'; +... TBD +``` + +## Contribution + +This library makes use of the babel plugin from [@patternfly/react-styles](../react-styles/README.md) to enable providing the CSS alongside the components. This removes the need for consumers to use (style|css|sass)-loaders. For an example of using CSS from core you can reference [Button.js](./src/components/Button/Button.js). For any CSS not provided by core please use the `StyleSheet.create` utility from [@patternfly/react-styles](../react-styles/README.md). This will prevent collisions with any consumers, and allow the CSS to be bundled with the component. + +### Documentation + +This project uses Gatsby. For an overview of the project structure please refer to the [Gatsby documentation - Building with Components](https://www.gatsbyjs.org/docs/building-with-components/). + +A comprehensive list of components and detailed usage of each can be found on the [PatternFly React Docs][docs] website +You can also find how each component is meant to be used from a design perspective on the [PatternFly 4 Core][patternfly-4] website. + +Note: All commands below assume you are on the root directory in this repository. + +### Install + +Run to install all the dependencies + +```sh +yarn && yarn bootstrap && yarn build && yarn build:docs +``` + +### Building + +```sh +yarn bootstrap && yarn build && yarn build:docs +``` + +### Running + +To start the site locally. + +```sh +yarn build && yarn start:pf4 +``` + +### Building + +To build the site. + +```sh +yarn build:docs +``` + +### Building + +``` +yarn build +``` + +### Testing + +Testing is done at the root of this repo. To only run the @patternfly/react-topology tests: + +``` +yarn test packages/patternfly-4/react-topology +``` + +[patternfly-4]: https://github.com/patternfly/patternfly-next +[docs]: https://patternfly-react.surge.sh/patternfly-4 diff --git a/packages/patternfly-4/react-topology/build/copyStyles.js b/packages/patternfly-4/react-topology/build/copyStyles.js new file mode 100644 index 00000000000..3c501ed0ad6 --- /dev/null +++ b/packages/patternfly-4/react-topology/build/copyStyles.js @@ -0,0 +1,42 @@ +/* eslint-disable no-case-declarations */ +const { copySync, readFileSync, writeFileSync } = require('fs-extra'); +const { resolve, dirname, join } = require('path'); +const { parse: parseCSS, stringify: stringifyCSS } = require('css'); + +const baseCSSFilename = 'patternfly-base.css'; +const stylesDir = resolve(__dirname, '../dist/styles'); +const pfDir = dirname(require.resolve(`@patternfly/patternfly/${baseCSSFilename}`)); + +const css = readFileSync(join(pfDir, baseCSSFilename), 'utf8'); +const ast = parseCSS(css); + +const unusedSelectorRegEx = /(\.fas?|\.sr-only)/; +const unusedKeyFramesRegEx = /fa-/; +const unusedFontFamilyRegEx = /Font Awesome 5 Free/; +const ununsedFontFilesRegExt = /(fa-|\.html$|\.css$)/; + +// Core provides font awesome fonts and utlities. React does not use these +ast.stylesheet.rules = ast.stylesheet.rules.filter(rule => { + switch (rule.type) { + case 'rule': + return !rule.selectors.some(sel => unusedSelectorRegEx.test(sel)); + case 'keyframes': + return !unusedKeyFramesRegEx.test(rule.name); + case 'charset': + case 'comment': + return false; + case 'font-face': + const fontFamilyDecl = rule.declarations.find(decl => decl.property === 'font-family'); + return !unusedFontFamilyRegEx.test(fontFamilyDecl.value); + default: + return true; + } +}); + +copySync(join(pfDir, 'assets/images'), join(stylesDir, 'assets/images')); +copySync(join(pfDir, 'assets/fonts'), join(stylesDir, 'assets/fonts'), { + filter(src) { + return !ununsedFontFilesRegExt.test(src); + } +}); +writeFileSync(join(stylesDir, 'base.css'), stringifyCSS(ast)); diff --git a/packages/patternfly-4/react-topology/package.json b/packages/patternfly-4/react-topology/package.json new file mode 100644 index 00000000000..b00185cb417 --- /dev/null +++ b/packages/patternfly-4/react-topology/package.json @@ -0,0 +1,73 @@ +{ + "name": "@patternfly/react-topology", + "version": "2.0.0", + "description": "This library provides a set of React topology view components for use with the PatternFly 4", + "main": "dist/js/index.js", + "module": "dist/esm/index.js", + "types": "dist/js/index.d.ts", + "publishConfig": { + "access": "public", + "tag": "prerelease" + }, + "repository": { + "type": "git", + "url": "https://github.com/patternfly/patternfly-react.git" + }, + "keywords": [ + "react", + "patternfly", + "topology" + ], + "author": "Red Hat", + "license": "MIT", + "bugs": { + "url": "https://github.com/patternfly/patternfly-react/issues" + }, + "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/react-topology#readme", + "dependencies": { + "@patternfly/react-core": "^3.38.0", + "@patternfly/react-icons": "^3.9.5", + "@patternfly/react-styles": "^3.3.2" + }, + "peerDependencies": { + "prop-types": "^15.6.1", + "react": "^16.4.0", + "react-dom": "^15.6.2 || ^16.4.0" + }, + "scripts": { + "build": "yarn typecheck && yarn build:babel && yarn build:types && node ./build/copyStyles.js", + "build:babel": "concurrently 'yarn build:babel:esm && yarn build:babel:umd' 'yarn build:babel:cjs'", + "build:babel:cjs": "babel src --out-dir dist/js --extensions '.js,.ts,.tsx' -q", + "build:babel:esm": "babel src --out-dir dist/esm --extensions '.js,.ts,.tsx' -q", + "build:babel:umd": "babel dist/esm --out-dir dist/umd --plugins transform-es2015-modules-umd --extensions '.js,.ts,.tsx' -q", + "build:types": "tsc -p tsconfig.gen-dts.json", + "clean": "rimraf dist", + "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose", + "lint:ts": "tslint -p tsconfig.typecheck.json", + "typecheck": "tsc -p tsconfig.typecheck.json" + }, + "devDependencies": { + "@babel/cli": "^7.0.0", + "@babel/core": "^7.0.0", + "@babel/plugin-proposal-class-properties": "^7.0.0", + "@babel/plugin-proposal-export-default-from": "^7.0.0", + "@babel/plugin-proposal-object-rest-spread": "^7.0.0", + "@babel/plugin-transform-typescript": "^7.0.0", + "@babel/preset-env": "^7.0.0", + "@babel/preset-react": "^7.0.0", + "@patternfly/react-tokens": "^2.5.1", + "@types/prop-types": "^15.7.0", + "@types/react": "~16.8.0", + "@types/react-dom": "~16.8.0", + "babel-plugin-transform-es2015-modules-umd": "^6.24.1", + "babel-plugin-typescript-to-proptypes": "^0.17.1", + "css": "^2.2.3", + "fs-extra": "^6.0.1", + "glob": "^7.1.2", + "rimraf": "^2.6.2", + "tslint": "^5.12.0", + "tslint-config-prettier": "^1.17.0", + "tslint-react": "^3.6.0", + "typescript": "3.4.5" + } +} diff --git a/packages/patternfly-4/react-topology/src/components/TopologyControlBar/TopologyControlBar.test.tsx b/packages/patternfly-4/react-topology/src/components/TopologyControlBar/TopologyControlBar.test.tsx new file mode 100644 index 00000000000..c9176174473 --- /dev/null +++ b/packages/patternfly-4/react-topology/src/components/TopologyControlBar/TopologyControlBar.test.tsx @@ -0,0 +1,45 @@ +import * as React from 'react'; +import {mount} from 'enzyme'; +import {TopologyControlBar, createTopologyControlButtons, defaultControlButtonsOptions, ZOOM_IN} from './TopologyControlBar'; + +describe('TopologyControlBar', () => { + test('should display the default controls correctly', () => { + const controlButtons = createTopologyControlButtons(); + const mockfn = jest.fn(); + const view = mount( + + ); + expect(view).toMatchSnapshot(); + view + .find(`#${ZOOM_IN}`) + .at(0) + .simulate('click'); + expect(mockfn.mock.calls).toHaveLength(1); + }); + + test('should accept button options correctly', () => { + const mockfn = jest.fn(); + const controlButtons = createTopologyControlButtons( + { ...defaultControlButtonsOptions, + zoomInCallback: mockfn, + zoomInAriaLabel: 'test-zoom-in-aria-label', + zoomInIcon: test zoom in, + zoomInTip: 'test zoom in tooltip', + fitToScreenHidden: true, + resetViewDisabled: true, + legend: false + }); + const view = mount( + + ); + expect(view).toMatchSnapshot(); + view + .find(`#${ZOOM_IN}`) + .at(0) + .simulate('click'); + expect(mockfn.mock.calls).toHaveLength(1); + }); +}); diff --git a/packages/patternfly-4/react-topology/src/components/TopologyControlBar/TopologyControlBar.tsx b/packages/patternfly-4/react-topology/src/components/TopologyControlBar/TopologyControlBar.tsx new file mode 100644 index 00000000000..0259773dec9 --- /dev/null +++ b/packages/patternfly-4/react-topology/src/components/TopologyControlBar/TopologyControlBar.tsx @@ -0,0 +1,294 @@ +import * as React from 'react'; +import { Button, Toolbar, ToolbarGroup, ToolbarItem, Tooltip } from '@patternfly/react-core'; +import { ExpandIcon, ExpandArrowsAltIcon, SearchPlusIcon, SearchMinusIcon } from '@patternfly/react-icons'; + +import { topologyControlbarCss } from './css/topology-controlbar-css'; + +topologyControlbarCss.inject(); + +/* ID's for common control buttons */ +export const ZOOM_IN = 'zoom-in'; +export const ZOOM_OUT = 'zoom-out'; +export const FIT_TO_SCREEN = 'fit-to-screen'; +export const RESET_VIEW = 'reset-view'; +export const LEGEND = 'legend'; + +/* Data needed for each control button */ +export interface TopologyControlButton { + id: any, + icon: React.ReactNode; + tooltip?: React.ReactNode; + ariaLabel?: string; + callback?: (id: any) => void; + disabled?: boolean; + hidden?: boolean; +} + +/* Options for creating the control buttons */ +export interface TopologyControlButtonsOptions { + zoomIn: boolean; + zoomInIcon: React.ReactNode; + zoomInTip: React.ReactNode; + zoomInAriaLabel: string; + zoomInCallback: (id: any) => void; + zoomInDisabled: boolean; + zoomInHidden: boolean; + + zoomOut: boolean; + zoomOutIcon: React.ReactNode; + zoomOutTip: React.ReactNode; + zoomOutAriaLabel: string; + zoomOutCallback: (id: any) => void; + zoomOutDisabled: boolean; + zoomOutHidden: boolean; + + fitToScreen: boolean; + fitToScreenIcon: React.ReactNode; + fitToScreenTip: React.ReactNode; + fitToScreenAriaLabel: string; + fitToScreenCallback: (id: any) => void; + fitToScreenDisabled: boolean; + fitToScreenHidden: boolean; + + resetView: boolean; + resetViewIcon: React.ReactNode; + resetViewTip: React.ReactNode; + resetViewAriaLabel: string; + resetViewCallback: (id: any) => void; + resetViewDisabled: boolean; + resetViewHidden: boolean; + + legend: boolean; + legendIcon: React.ReactNode; + legendTip: string; + legendAriaLabel: string; + legendCallback: (id: any) => void; + legendDisabled: boolean; + legendHidden: boolean; + + customButtons: TopologyControlButton[]; +} + +/* Default options for creating control buttons */ +export const defaultControlButtonsOptions: TopologyControlButtonsOptions = { + zoomIn: true, + zoomInIcon: , + zoomInTip: 'Zoom In', + zoomInAriaLabel: 'Zoom In', + zoomInCallback: null, + zoomInDisabled: false, + zoomInHidden: false, + + zoomOut: true, + zoomOutIcon: , + zoomOutTip: 'Zoom Out', + zoomOutAriaLabel: 'Zoom Out', + zoomOutCallback: null, + zoomOutDisabled: false, + zoomOutHidden: false, + + fitToScreen: true, + fitToScreenIcon: , + fitToScreenTip: 'Fit to Screen', + fitToScreenAriaLabel: 'Fit to Screen', + fitToScreenCallback: null, + fitToScreenDisabled: false, + fitToScreenHidden: false, + + resetView: true, + resetViewIcon: , + resetViewTip: 'Reset View', + resetViewAriaLabel: 'Reset View', + resetViewCallback: null, + resetViewDisabled: false, + resetViewHidden: false, + + legend: true, + legendIcon: 'Legend', + legendTip: '', + legendAriaLabel: null, + legendCallback: null, + legendDisabled: false, + legendHidden: false, + + customButtons: [] +}; + +/* Utility function to create the common control buttons, can pass null for all defaults, or specify overrides */ +export const createTopologyControlButtons = ({ + zoomIn = defaultControlButtonsOptions.zoomIn, + zoomInIcon= defaultControlButtonsOptions.zoomInIcon, + zoomInTip= defaultControlButtonsOptions.zoomInTip, + zoomInAriaLabel= defaultControlButtonsOptions.zoomInAriaLabel, + zoomInCallback= defaultControlButtonsOptions.zoomInCallback, + zoomInDisabled= defaultControlButtonsOptions.zoomInDisabled, + zoomInHidden= defaultControlButtonsOptions.zoomInHidden, + + zoomOut = defaultControlButtonsOptions.zoomOut, + zoomOutIcon = defaultControlButtonsOptions.zoomOutIcon, + zoomOutTip = defaultControlButtonsOptions.zoomOutTip, + zoomOutAriaLabel = defaultControlButtonsOptions.zoomOutAriaLabel, + zoomOutCallback = defaultControlButtonsOptions.zoomOutCallback, + zoomOutDisabled = defaultControlButtonsOptions.zoomOutDisabled, + zoomOutHidden = defaultControlButtonsOptions.zoomOutHidden, + + fitToScreen = defaultControlButtonsOptions.fitToScreen, + fitToScreenIcon = defaultControlButtonsOptions.fitToScreenIcon, + fitToScreenTip = defaultControlButtonsOptions.fitToScreenTip, + fitToScreenAriaLabel = defaultControlButtonsOptions.fitToScreenAriaLabel, + fitToScreenCallback = defaultControlButtonsOptions.fitToScreenCallback, + fitToScreenDisabled = defaultControlButtonsOptions.fitToScreenDisabled, + fitToScreenHidden = defaultControlButtonsOptions.fitToScreenHidden, + + resetView = defaultControlButtonsOptions.resetView, + resetViewIcon = defaultControlButtonsOptions.resetViewIcon, + resetViewTip = defaultControlButtonsOptions.resetViewTip, + resetViewAriaLabel = defaultControlButtonsOptions.resetViewAriaLabel, + resetViewCallback = defaultControlButtonsOptions.resetViewCallback, + resetViewDisabled = defaultControlButtonsOptions.resetViewDisabled, + resetViewHidden = defaultControlButtonsOptions.resetViewHidden, + + legend = defaultControlButtonsOptions.legend, + legendIcon = defaultControlButtonsOptions.legendIcon, + legendTip = defaultControlButtonsOptions.legendTip, + legendAriaLabel = defaultControlButtonsOptions.legendAriaLabel, + legendCallback = defaultControlButtonsOptions.legendCallback, + legendDisabled = defaultControlButtonsOptions.legendDisabled, + legendHidden = defaultControlButtonsOptions.legendHidden, + + customButtons = defaultControlButtonsOptions.customButtons, +} : TopologyControlButtonsOptions = defaultControlButtonsOptions) : TopologyControlButton[] => { + const controlButtons: TopologyControlButton[] = []; + + if (zoomIn) { + controlButtons.push({ + id: ZOOM_IN, + icon: zoomInIcon, + tooltip: zoomInTip, + ariaLabel: zoomInAriaLabel, + callback: zoomInCallback, + disabled: zoomInDisabled, + hidden: zoomInHidden + }); + } + + + if (zoomOut) { + controlButtons.push({ + id: ZOOM_OUT, + icon: zoomOutIcon, + tooltip: zoomOutTip, + ariaLabel: zoomOutAriaLabel, + callback: zoomOutCallback, + disabled: zoomOutDisabled, + hidden: zoomOutHidden + }); + } + + if (fitToScreen) { + controlButtons.push({ + id: FIT_TO_SCREEN, + icon: fitToScreenIcon, + tooltip: fitToScreenTip, + ariaLabel: fitToScreenAriaLabel, + callback: fitToScreenCallback, + disabled: fitToScreenDisabled, + hidden: fitToScreenHidden + }); + } + + if (resetView) { + controlButtons.push({ + id: RESET_VIEW, + icon: resetViewIcon, + tooltip: resetViewTip, + ariaLabel: resetViewAriaLabel, + callback: resetViewCallback, + disabled: resetViewDisabled, + hidden: resetViewHidden + }); + } + + if (customButtons) { + controlButtons.push(...customButtons); + } + + if (legend) { + controlButtons.push({ + id: LEGEND, + icon: legendIcon, + tooltip: legendTip, + ariaLabel: legendAriaLabel, + callback: legendCallback, + disabled: legendDisabled, + hidden: legendHidden + }); + } + + return controlButtons; +}; + +export interface TopologyControlBarProps extends React.HTMLProps { + /** Additional classes added to the control bar */ + className?: string; + /** Any extra child nodes (placed after the buttons) */ + children?: React.ReactNode; + /** Buttons to be added to the bar */ + controlButtons?: TopologyControlButton[]; + /** Callback when any button is clicked, id of the clicked button is passed */ + onButtonClick?: (id: any) => void; +} + +export const TopologyControlBar: React.FunctionComponent = ({ + className = null, + children = null, + controlButtons = [], + onButtonClick = () => undefined, + ...props +}: TopologyControlBarProps) => { + + const handleButtonClick = (event: React.MouseEvent, button: TopologyControlButton) => { + event.preventDefault(); + onButtonClick(button.id); + if (button.callback) { + button.callback(button.id); + } + }; + + const renderButton = (button: TopologyControlButton): React.ReactNode => { + const renderedButton = ( + + ); + + if (button.tooltip) { + return ( + {renderedButton} + ); + } + + return renderedButton; + }; + + return ( + + + {controlButtons.map((button: TopologyControlButton) => { + return button.hidden ? null : {renderButton(button)}; + })} + {children} + + + ); +}; diff --git a/packages/patternfly-4/react-topology/src/components/TopologyControlBar/__snapshots__/TopologyControlBar.test.tsx.snap b/packages/patternfly-4/react-topology/src/components/TopologyControlBar/__snapshots__/TopologyControlBar.test.tsx.snap new file mode 100644 index 00000000000..30a1c6948a4 --- /dev/null +++ b/packages/patternfly-4/react-topology/src/components/TopologyControlBar/__snapshots__/TopologyControlBar.test.tsx.snap @@ -0,0 +1,1427 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TopologyControlBar should accept button options correctly 1`] = ` +.pf-c-button.pf-m-tertiary.pf-topology-control-bar__button.pf-u-px-sm.pf-u-mr-xs { + display: block; +} +.pf-c-tooltip__arrow { + display: block; +} +.pf-c-tooltip { + display: block; +} +.pf-l-toolbar__item { + display: block; +} +.pf-c-button.pf-m-tertiary.pf-topology-control-bar__button.pf-u-px-sm.pf-u-mr-xs { + display: block; +} +.pf-c-tooltip__arrow { + display: block; +} +.pf-c-tooltip { + display: block; +} +.pf-l-toolbar__item { + display: block; +} +.pf-c-button.pf-m-tertiary.pf-topology-control-bar__button.pf-u-px-sm.pf-u-mr-xs.pf-m-disabled { + display: block; +} +.pf-c-tooltip__arrow { + display: block; +} +.pf-c-tooltip { + display: block; +} +.pf-l-toolbar__item { + display: block; +} +.pf-l-toolbar__group { + display: flex; + flex-wrap: wrap; + align-items: center; +} +.pf-l-toolbar.default-test-class { + display: flex; + flex-wrap: wrap; + align-items: center; +} + + + test zoom in + , + "id": "zoom-in", + "tooltip": "test zoom in tooltip", + }, + Object { + "ariaLabel": "Zoom Out", + "callback": null, + "disabled": false, + "hidden": false, + "icon": , + "id": "zoom-out", + "tooltip": "Zoom Out", + }, + Object { + "ariaLabel": "Fit to Screen", + "callback": null, + "disabled": false, + "hidden": true, + "icon": , + "id": "fit-to-screen", + "tooltip": "Fit to Screen", + }, + Object { + "ariaLabel": "Reset View", + "callback": null, + "disabled": true, + "hidden": false, + "icon": , + "id": "reset-view", + "tooltip": "Reset View", + }, + ] + } + id="default-test-id" +> + +
+ +
+ +
+ + + + + test zoom in tooltip + +
+ } + delay={ + Array [ + 500, + 500, + ] + } + distance={15} + flip={true} + lazy={true} + maxWidth="18.75rem" + onCreate={[Function]} + performance={true} + placement="top" + popperOptions={ + Object { + "modifiers": Object { + "hide": Object { + "enabled": true, + }, + "preventOverflow": Object { + "enabled": true, + }, + }, + } + } + theme="pf-tippy" + trigger="mouseenter focus" + zIndex={9999} + > + + + + + } + > +
+ +
+ + +
+ test zoom in tooltip +
+ +
+ + + +
+ + +
+ + + + + Zoom Out + +
+ } + delay={ + Array [ + 500, + 500, + ] + } + distance={15} + flip={true} + lazy={true} + maxWidth="18.75rem" + onCreate={[Function]} + performance={true} + placement="top" + popperOptions={ + Object { + "modifiers": Object { + "hide": Object { + "enabled": true, + }, + "preventOverflow": Object { + "enabled": true, + }, + }, + } + } + theme="pf-tippy" + trigger="mouseenter focus" + zIndex={9999} + > + + + + + } + > +
+ +
+ + +
+ Zoom Out +
+ +
+ + + +
+ + +
+ + + + + Reset View + +
+ } + delay={ + Array [ + 500, + 500, + ] + } + distance={15} + flip={true} + lazy={true} + maxWidth="18.75rem" + onCreate={[Function]} + performance={true} + placement="top" + popperOptions={ + Object { + "modifiers": Object { + "hide": Object { + "enabled": true, + }, + "preventOverflow": Object { + "enabled": true, + }, + }, + } + } + theme="pf-tippy" + trigger="mouseenter focus" + zIndex={9999} + > + + + + + } + > +
+ +
+ + +
+ Reset View +
+ +
+ + + +
+ +
+ +
+ + +`; + +exports[`TopologyControlBar should display the default controls correctly 1`] = ` +.pf-c-button.pf-m-tertiary.pf-topology-control-bar__button.pf-u-px-sm.pf-u-mr-xs { + display: block; +} +.pf-c-tooltip__arrow { + display: block; +} +.pf-c-tooltip { + display: block; +} +.pf-l-toolbar__item { + display: block; +} +.pf-c-button.pf-m-tertiary.pf-topology-control-bar__button.pf-u-px-sm.pf-u-mr-xs { + display: block; +} +.pf-c-tooltip__arrow { + display: block; +} +.pf-c-tooltip { + display: block; +} +.pf-l-toolbar__item { + display: block; +} +.pf-c-button.pf-m-tertiary.pf-topology-control-bar__button.pf-u-px-sm.pf-u-mr-xs { + display: block; +} +.pf-c-tooltip__arrow { + display: block; +} +.pf-c-tooltip { + display: block; +} +.pf-l-toolbar__item { + display: block; +} +.pf-c-button.pf-m-tertiary.pf-topology-control-bar__button.pf-u-px-sm.pf-u-mr-xs { + display: block; +} +.pf-c-tooltip__arrow { + display: block; +} +.pf-c-tooltip { + display: block; +} +.pf-l-toolbar__item { + display: block; +} +.pf-c-button.pf-m-tertiary.pf-topology-control-bar__button.pf-u-px-sm.pf-u-mr-xs { + display: block; +} +.pf-l-toolbar__item { + display: block; +} +.pf-l-toolbar__group { + display: flex; + flex-wrap: wrap; + align-items: center; +} +.pf-l-toolbar.default-test-class { + display: flex; + flex-wrap: wrap; + align-items: center; +} + +, + "id": "zoom-in", + "tooltip": "Zoom In", + }, + Object { + "ariaLabel": "Zoom Out", + "callback": null, + "disabled": false, + "hidden": false, + "icon": , + "id": "zoom-out", + "tooltip": "Zoom Out", + }, + Object { + "ariaLabel": "Fit to Screen", + "callback": null, + "disabled": false, + "hidden": false, + "icon": , + "id": "fit-to-screen", + "tooltip": "Fit to Screen", + }, + Object { + "ariaLabel": "Reset View", + "callback": null, + "disabled": false, + "hidden": false, + "icon": , + "id": "reset-view", + "tooltip": "Reset View", + }, + Object { + "ariaLabel": null, + "callback": null, + "disabled": false, + "hidden": false, + "icon": "Legend", + "id": "legend", + "tooltip": "", + }, + ] + } + id="default-test-id" + onButtonClick={[MockFunction]} +> + +
+ +
+ +
+ + + + + Zoom In + +
+ } + delay={ + Array [ + 500, + 500, + ] + } + distance={15} + flip={true} + lazy={true} + maxWidth="18.75rem" + onCreate={[Function]} + performance={true} + placement="top" + popperOptions={ + Object { + "modifiers": Object { + "hide": Object { + "enabled": true, + }, + "preventOverflow": Object { + "enabled": true, + }, + }, + } + } + theme="pf-tippy" + trigger="mouseenter focus" + zIndex={9999} + > + + + + + } + > +
+ +
+ + +
+ Zoom In +
+ +
+ + + +
+ + +
+ + + + + Zoom Out + +
+ } + delay={ + Array [ + 500, + 500, + ] + } + distance={15} + flip={true} + lazy={true} + maxWidth="18.75rem" + onCreate={[Function]} + performance={true} + placement="top" + popperOptions={ + Object { + "modifiers": Object { + "hide": Object { + "enabled": true, + }, + "preventOverflow": Object { + "enabled": true, + }, + }, + } + } + theme="pf-tippy" + trigger="mouseenter focus" + zIndex={9999} + > + + + + + } + > +
+ +
+ + +
+ Zoom Out +
+ +
+ + + +
+ + +
+ + + + + Fit to Screen + +
+ } + delay={ + Array [ + 500, + 500, + ] + } + distance={15} + flip={true} + lazy={true} + maxWidth="18.75rem" + onCreate={[Function]} + performance={true} + placement="top" + popperOptions={ + Object { + "modifiers": Object { + "hide": Object { + "enabled": true, + }, + "preventOverflow": Object { + "enabled": true, + }, + }, + } + } + theme="pf-tippy" + trigger="mouseenter focus" + zIndex={9999} + > + + + + + } + > +
+ +
+ + +
+ Fit to Screen +
+ +
+ + + +
+ + +
+ + + + + Reset View + +
+ } + delay={ + Array [ + 500, + 500, + ] + } + distance={15} + flip={true} + lazy={true} + maxWidth="18.75rem" + onCreate={[Function]} + performance={true} + placement="top" + popperOptions={ + Object { + "modifiers": Object { + "hide": Object { + "enabled": true, + }, + "preventOverflow": Object { + "enabled": true, + }, + }, + } + } + theme="pf-tippy" + trigger="mouseenter focus" + zIndex={9999} + > + + + + + } + > +
+ +
+ + +
+ Reset View +
+ +
+ + + +
+ + +
+ + +
+ +
+ +
+ + +`; diff --git a/packages/patternfly-4/react-topology/src/components/TopologyControlBar/css/topology-controlbar-css.ts b/packages/patternfly-4/react-topology/src/components/TopologyControlBar/css/topology-controlbar-css.ts new file mode 100644 index 00000000000..6c550f28181 --- /dev/null +++ b/packages/patternfly-4/react-topology/src/components/TopologyControlBar/css/topology-controlbar-css.ts @@ -0,0 +1,23 @@ +import { StyleSheet } from '@patternfly/react-styles'; + +export const topologyControlbarCss = StyleSheet.parse(` + .pf-topology-control-bar { + position: absolute; + bottom: var(--pf-global--spacer--md); + left: var(--pf-global--spacer--xl); + + .pf-c-button.pf-m-tertiary { + background-color: var(--pf-global--BackgroundColor--100); + border: none; + border-radius: var(--pf-global--BorderRadius--sm); + box-shadow: var(--pf-global--BoxShadow--sm); + } + .pf-c-button.pf-m-tertiary:after { + display: none; + } + .pf-c-button.pf-m-tertiary:hover { + border: none; + box-shadow: var(--pf-global--BoxShadow--md); + } + } +`); diff --git a/packages/patternfly-4/react-topology/src/components/TopologyControlBar/index.ts b/packages/patternfly-4/react-topology/src/components/TopologyControlBar/index.ts new file mode 100644 index 00000000000..817d213a556 --- /dev/null +++ b/packages/patternfly-4/react-topology/src/components/TopologyControlBar/index.ts @@ -0,0 +1 @@ +export * from './TopologyControlBar'; diff --git a/packages/patternfly-4/react-topology/src/components/TopologyView/TopologyView.test.tsx b/packages/patternfly-4/react-topology/src/components/TopologyView/TopologyView.test.tsx new file mode 100644 index 00000000000..d0724e23ca4 --- /dev/null +++ b/packages/patternfly-4/react-topology/src/components/TopologyView/TopologyView.test.tsx @@ -0,0 +1,25 @@ +import * as React from 'react'; +import { mount } from 'enzyme'; +import { TopologyView } from './index'; + +describe('TopologyView', () => { + test('should display an empty topology correctly', () => { + const view = mount(); + expect(view).toMatchSnapshot(); + }); + + test('should display topology correctly', () => { + const view = mount( + } + viewToolbar={
} + controlBar={
} + > +
+ + ); + expect(view).toMatchSnapshot(); + }); +}); diff --git a/packages/patternfly-4/react-topology/src/components/TopologyView/TopologyView.tsx b/packages/patternfly-4/react-topology/src/components/TopologyView/TopologyView.tsx new file mode 100644 index 00000000000..92a81b8f420 --- /dev/null +++ b/packages/patternfly-4/react-topology/src/components/TopologyView/TopologyView.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; +import { Stack, StackItem } from '@patternfly/react-core'; + +import { topologyViewCss } from './css/topology-view-css'; + +topologyViewCss.inject(); + +export interface TopologyViewProps extends React.HTMLProps { + /** Additional classes added to the view */ + className?: string; + /** Topology inner container (canvas) */ + children?: React.ReactNode; + /** Context toolbar to be displayed at the top of the view, should contain components for changing context */ + contextToolbar?: React.ReactNode; + /** View toolbar to be displayed below the context toolbar, should contain components for changing view contents */ + viewToolbar?: React.ReactNode; + /** Topology control bar (typically a TopologyControlBar), used to manipulate the graph layout */ + controlBar?: React.ReactNode; +}; + +export const TopologyView: React.FunctionComponent = ({ + className = '', + contextToolbar = null, + viewToolbar = null, + children = null, + controlBar = null, + ...props +}: TopologyViewProps) => { + return ( + + {contextToolbar && {contextToolbar}} + {viewToolbar && {viewToolbar}} + +
+ {children} + {controlBar && {controlBar}} +
+ + + ); +}; diff --git a/packages/patternfly-4/react-topology/src/components/TopologyView/__snapshots__/TopologyView.test.tsx.snap b/packages/patternfly-4/react-topology/src/components/TopologyView/__snapshots__/TopologyView.test.tsx.snap new file mode 100644 index 00000000000..c0f95b8924c --- /dev/null +++ b/packages/patternfly-4/react-topology/src/components/TopologyView/__snapshots__/TopologyView.test.tsx.snap @@ -0,0 +1,141 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TopologyView should display an empty topology correctly 1`] = ` +.pf-topology-content { + display: flex; + background-color: #ededed; + position: relative; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; +} + + + +
+ +
+
+
+ +
+ + +`; + +exports[`TopologyView should display topology correctly 1`] = ` +.pf-topology-control-bar { + display: block; + position: absolute; + bottom: 1rem; + left: 2rem; +} +.pf-topology-content { + display: flex; + background-color: #ededed; + position: relative; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; +} + + + } + controlBar={ +
+ } + id="simple-test-id" + viewToolbar={ +
+ } +> + +
+ +
+
+
+ + +
+
+
+ + +
+
+
+ +
+ +
+
+ +
+ + +`; diff --git a/packages/patternfly-4/react-topology/src/components/TopologyView/css/topology-view-css.ts b/packages/patternfly-4/react-topology/src/components/TopologyView/css/topology-view-css.ts new file mode 100644 index 00000000000..a7df8682e79 --- /dev/null +++ b/packages/patternfly-4/react-topology/src/components/TopologyView/css/topology-view-css.ts @@ -0,0 +1,33 @@ +import { StyleSheet } from '@patternfly/react-styles'; + +export const topologyViewCss = StyleSheet.parse(` + .pf-topology-content { + background-color: var(--pf-global--Color--light-200); + position: relative; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + } + + .pf-topology-control-bar { + position: absolute; + bottom: var(--pf-global--spacer--md); + left: var(--pf-global--spacer--xl); + + .pf-c-button.pf-m-tertiary { + background-color: var(--pf-global--BackgroundColor--100); + border: none; + border-radius: var(--pf-global--BorderRadius--sm); + box-shadow: var(--pf-global--BoxShadow--sm); + } + .pf-c-button.pf-m-tertiary:after { + display: none; + } + .pf-c-button.pf-m-tertiary:hover { + border: none; + box-shadow: var(--pf-global--BoxShadow--md); + } + } +`); diff --git a/packages/patternfly-4/react-topology/src/components/TopologyView/examples/ProjectToolbar.js b/packages/patternfly-4/react-topology/src/components/TopologyView/examples/ProjectToolbar.js new file mode 100644 index 00000000000..ca46deea0d0 --- /dev/null +++ b/packages/patternfly-4/react-topology/src/components/TopologyView/examples/ProjectToolbar.js @@ -0,0 +1,118 @@ +import React from 'react'; +import { + Dropdown, + DropdownPosition, + DropdownToggle, + DropdownItem, + Stack, + StackItem, + Toolbar, + ToolbarGroup, + ToolbarItem +} from '@patternfly/react-core'; + +const projects = [ + { id: 1, name: 'Project 1' }, + { id: 2, name: 'Project 2' }, + { id: 3, name: 'Project 3' }, + { id: 4, name: 'Project 4' }, + { id: 'all', name: 'All' } +]; + +const applications = [ + { id: 1, name: 'Application 1' }, + { id: 2, name: 'Application 2' }, + { id: 3, name: 'Application 3' }, + { id: 4, name: 'Application 4' }, + { id: 'all', name: 'All' } +]; + +export class ProjectToolbar extends React.Component { + state = { + selectedProject: projects[4], + selectedApplication: applications[4], + projectDropDownOpen: false, + applicationDropDownOpen: false + }; + + onProjectDropDownToggle = isOpen => { + this.setState({ projectDropDownOpen: isOpen }); + }; + + onProjectSelect = (e, project) => { + e.preventDefault(); + this.setState({ selectedProject: project, projectDropDownOpen: false }); + }; + + onApplicationDropDownToggle = isOpen => { + this.setState({ applicationDropDownOpen: isOpen }); + }; + + onApplicationSelect = (e, application) => { + e.preventDefault(); + this.setState({ selectedApplication: application, applicationDropDownOpen: false }); + }; + + renderProjectDropdown = () => { + const { projectDropDownOpen, selectedProject } = this.state; + + return ( + + + + + + {selectedProject.name}} + isOpen={projectDropDownOpen} + dropdownItems={projects.map(project => ( + this.onProjectSelect(e, project)}> + {project.name} + + ))} + /> + + + ); + }; + + renderApplicationDropdown = () => { + const { applicationDropDownOpen, selectedApplication } = this.state; + + return ( + + + + + + {selectedApplication.name} + } + isOpen={applicationDropDownOpen} + dropdownItems={applications.map(application => ( + this.onApplicationSelect(e, application)}> + {application.name} + + ))} + /> + + + ); + }; + + render() { + return ( + + + {this.renderProjectDropdown()} + {this.renderApplicationDropdown()} + + + ); + } +} diff --git a/packages/patternfly-4/react-topology/src/components/TopologyView/examples/Topology.md b/packages/patternfly-4/react-topology/src/components/TopologyView/examples/Topology.md new file mode 100644 index 00000000000..fc4f0248e69 --- /dev/null +++ b/packages/patternfly-4/react-topology/src/components/TopologyView/examples/Topology.md @@ -0,0 +1,121 @@ +--- +title: 'TopologyView' +--- + +Note: Topology lives in its own package at [`@patternfly/react-topology`](https://www.npmjs.com/package/@patternfly/react-topology) + +import { ExternalLinkAltIcon, FilmIcon, GlassCheersIcon } from '@patternfly/react-icons'; +import { TopologyView, TopologyControlBar, createTopologyControlButtons } from '@patternfly/react-topology'; +import { ProjectToolbar } from './ProjectToolbar'; +import { ViewToolbar } from './ViewToolbar'; +import './topology-example.scss'; + +## TopologyView - Default Controls + +```js +import React from 'react'; +import { TopologyView, TopologyControlBar, createTopologyControlButtons } from '@patternfly/react-topology'; +import { ProjectToolbar } from './ProjectToolbar'; +import { ViewToolbar } from './ViewToolbar'; + +class DefaultTopologyView extends React.Component { + + render() { + const controlButtons = createTopologyControlButtons(); + + return ( +
+ } + viewToolbar={} + controlBar={} + > +
CANVAS
+ +
+ ); + } +} +``` + +## TopologyView - Selected Controls + +```js +import React from 'react'; +import { TopologyView, TopologyControlBar, createTopologyControlButtons } from '@patternfly/react-topology'; +import { ViewToolbar } from './ViewToolbar'; + +class SelectedTopologyView extends React.Component { + + render() { + const controlButtons = createTopologyControlButtons({ fitToScreen: false, legend: false }); + + return ( +
+ } + controlBar={} + > +
CANVAS
+ +
+ ); + } +} +``` + +## TopologyView - Custom Controls + +```js +import React from 'react'; +import { ExternalLinkAltIcon, FilmIcon, GlassCheersIcon } from '@patternfly/react-icons'; +import { TopologyView, TopologyControlBar, createTopologyControlButtons } from '@patternfly/react-topology'; +import { ViewToolbar } from './ViewToolbar'; + +class CustomTopologyView extends React.Component { + + render() { + const customButtons = [ + { + id: 'custom-1', + icon: , + tooltip: 'External Link', + ariaLabel: 'external link', + callback: null, + disabled: true, + hidden: false + }, + { + id: 'custom-2', + icon: , + tooltip: 'Watch', + ariaLabel: 'watch', + callback: null, + disabled: false, + hidden: false + }, + { + id: 'custom-3', + icon: , + tooltip: 'Cheers', + ariaLabel: 'cheers', + callback: null, + disabled: false, + hidden: true + }, + ] + const controlButtons = createTopologyControlButtons({ fitToScreen: false, customButtons}); + + return ( +
+ } + controlBar={} + > +
CANVAS
+ +
+ ); + } +} +``` diff --git a/packages/patternfly-4/react-topology/src/components/TopologyView/examples/ViewToolbar.js b/packages/patternfly-4/react-topology/src/components/TopologyView/examples/ViewToolbar.js new file mode 100644 index 00000000000..5aaf2518c1a --- /dev/null +++ b/packages/patternfly-4/react-topology/src/components/TopologyView/examples/ViewToolbar.js @@ -0,0 +1,139 @@ +import React from 'react'; +import { + Button, + Dropdown, + DropdownPosition, + DropdownToggle, + DropdownItem, + KebabToggle, + TextInput, + Toolbar, + ToolbarGroup, + ToolbarItem +} from '@patternfly/react-core'; +import { FilterIcon } from '@patternfly/react-icons'; + +export class ViewToolbar extends React.Component { + state = { + filterType: 'Name', + filterValue: '', + filterDropDownOpen: false, + actionKebabOpen: false + }; + + onFilterDropDownToggle = isOpen => { + this.setState({ filterDropDownOpen: isOpen }); + }; + + onFilterTypeSelect = (e, filterType) => { + e.preventDefault(); + this.setState({ + filterType, + filterDropDownOpen: false, + filterValue: filterType === this.state.filterType ? this.state.filterValue : '' + }); + }; + + handleFilterInputChange = value => { + this.setState({ filterValue: value }); + }; + + onActionKebabToggle = isOpen => { + this.setState({ actionKebabOpen: isOpen }); + }; + + onActionKebabSelect = (e, action) => { + e.preventDefault(); + this.setState({ actionKebabOpen: false }); + }; + + renderFilterInput = () => { + const { filterValue } = this.state; + return ( + + ); + }; + + renderFilterTypeDropdown = () => { + const { filterDropDownOpen, filterType } = this.state; + return ( + + + {filterType} + + } + isOpen={filterDropDownOpen} + dropdownItems={[ + this.onFilterTypeSelect(e, 'Name')}> + Name + , + this.onFilterTypeSelect(e, 'Type')}> + Type + , + this.onFilterTypeSelect(e, 'Status')}> + Status + + ]} + /> + ); + }; + + renderActionsdKebab = () => { + const { actionKebabOpen } = this.state; + + return ( + } + isOpen={actionKebabOpen} + isPlain + dropdownItems={[ + this.onActionKebabSelect(e, 'Action 3')}> + Action 3 + , + this.onActionKebabSelect(e, 'Action 4')}> + Action 4 + , + this.onActionKebabSelect(e, 'Disabled Action')}> + Disabled Action + + ]} + /> + ); + }; + + render() { + return ( + + + {this.renderFilterTypeDropdown()} + {this.renderFilterInput()} + + + + + + + + + {this.renderActionsdKebab()} + + + ); + } +} diff --git a/packages/patternfly-4/react-topology/src/components/TopologyView/examples/topology-example.scss b/packages/patternfly-4/react-topology/src/components/TopologyView/examples/topology-example.scss new file mode 100644 index 00000000000..0e1a203a1b8 --- /dev/null +++ b/packages/patternfly-4/react-topology/src/components/TopologyView/examples/topology-example.scss @@ -0,0 +1,19 @@ +.topology-example { + margin: -9px; + width: calc(100% + 18px); + height: 500px; + + .project-toolbar { + .pf-c-dropdown > button { + justify-content: space-between; + width: 150px; + } + } + + .topology-view-filter-dropdown { + > button { + justify-content: space-between; + width: 130px; + } + } +} diff --git a/packages/patternfly-4/react-topology/src/components/TopologyView/index.ts b/packages/patternfly-4/react-topology/src/components/TopologyView/index.ts new file mode 100644 index 00000000000..8124fd0742f --- /dev/null +++ b/packages/patternfly-4/react-topology/src/components/TopologyView/index.ts @@ -0,0 +1 @@ +export * from './TopologyView'; diff --git a/packages/patternfly-4/react-topology/src/components/index.ts b/packages/patternfly-4/react-topology/src/components/index.ts new file mode 100644 index 00000000000..71656309a7d --- /dev/null +++ b/packages/patternfly-4/react-topology/src/components/index.ts @@ -0,0 +1,2 @@ +export * from './TopologyView'; +export * from './TopologyControlBar'; diff --git a/packages/patternfly-4/react-topology/src/index.ts b/packages/patternfly-4/react-topology/src/index.ts new file mode 100644 index 00000000000..07635cbbc8e --- /dev/null +++ b/packages/patternfly-4/react-topology/src/index.ts @@ -0,0 +1 @@ +export * from './components'; diff --git a/packages/patternfly-4/react-topology/tsconfig.base.json b/packages/patternfly-4/react-topology/tsconfig.base.json new file mode 100644 index 00000000000..44d1b907915 --- /dev/null +++ b/packages/patternfly-4/react-topology/tsconfig.base.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "jsx": "react", + "lib": [ + "es2017", + "dom" + ], + "module": "commonjs", + "moduleResolution": "node", + "skipLibCheck": true, + "strict": true, + "strictNullChecks": false, + "target": "es5" + }, + "include": [ + "./src/*", + "./src/**/*" + ], + "exclude": [ + "./src/**/**.test.tsx", + "./src/**/**.test.ts", + "./src/**/examples/**" + ] +} diff --git a/packages/patternfly-4/react-topology/tsconfig.gen-dts.json b/packages/patternfly-4/react-topology/tsconfig.gen-dts.json new file mode 100644 index 00000000000..f4158c6576c --- /dev/null +++ b/packages/patternfly-4/react-topology/tsconfig.gen-dts.json @@ -0,0 +1,8 @@ +{ + "extends": "./tsconfig.base.json", + "compilerOptions": { + "declaration": true, + "emitDeclarationOnly": true, + "outDir": "dist/js" + } +} diff --git a/packages/patternfly-4/react-topology/tsconfig.typecheck.json b/packages/patternfly-4/react-topology/tsconfig.typecheck.json new file mode 100644 index 00000000000..87a71ad6ef0 --- /dev/null +++ b/packages/patternfly-4/react-topology/tsconfig.typecheck.json @@ -0,0 +1,7 @@ +{ + "extends": "./tsconfig.base.json", + "compilerOptions": { + "allowJs": true, + "noEmit": true + } +} From 1970d3e9c90abf9796dcba3f489f4881017485e4 Mon Sep 17 00:00:00 2001 From: patternfly-build Date: Tue, 11 Jun 2019 18:33:57 +0000 Subject: [PATCH 26/32] chore(release): releasing packages [ci skip] - @patternfly/react-core@3.39.0 - @patternfly/react-docs@4.7.0 - @patternfly/react-inline-edit-extension@2.7.8 - demo-app-ts@1.19.2 - @patternfly/react-table@2.11.2 - @patternfly/react-topology@2.1.0 - @patternfly/react-virtualized-extension@1.0.6 --- packages/patternfly-4/react-core/CHANGELOG.md | 11 +++++++++++ packages/patternfly-4/react-core/package.json | 2 +- packages/patternfly-4/react-docs/CHANGELOG.md | 11 +++++++++++ packages/patternfly-4/react-docs/package.json | 6 +++--- .../react-inline-edit-extension/CHANGELOG.md | 8 ++++++++ .../react-inline-edit-extension/package.json | 6 +++--- .../react-integration/demo-app-ts/CHANGELOG.md | 8 ++++++++ .../react-integration/demo-app-ts/package.json | 4 ++-- packages/patternfly-4/react-table/CHANGELOG.md | 8 ++++++++ packages/patternfly-4/react-table/package.json | 4 ++-- packages/patternfly-4/react-topology/CHANGELOG.md | 6 ++++++ packages/patternfly-4/react-topology/package.json | 4 ++-- .../react-virtualized-extension/CHANGELOG.md | 8 ++++++++ .../react-virtualized-extension/package.json | 4 ++-- 14 files changed, 75 insertions(+), 15 deletions(-) diff --git a/packages/patternfly-4/react-core/CHANGELOG.md b/packages/patternfly-4/react-core/CHANGELOG.md index d21a94a2288..d8b74182567 100644 --- a/packages/patternfly-4/react-core/CHANGELOG.md +++ b/packages/patternfly-4/react-core/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [3.39.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.38.1...@patternfly/react-core@3.39.0) (2019-06-11) + + +### Features + +* **Topology:** Add @patternfly/react-topology package ([#2170](https://github.com/patternfly/patternfly-react/issues/2170)) ([58eb9cc](https://github.com/patternfly/patternfly-react/commit/58eb9cc)) + + + + + ## [3.38.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.38.0...@patternfly/react-core@3.38.1) (2019-06-11) **Note:** Version bump only for package @patternfly/react-core diff --git a/packages/patternfly-4/react-core/package.json b/packages/patternfly-4/react-core/package.json index 1b3f03eb8ef..3f71ab48212 100644 --- a/packages/patternfly-4/react-core/package.json +++ b/packages/patternfly-4/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-core", - "version": "3.38.1", + "version": "3.39.0", "description": "This library provides a set of common React components for use with the PatternFly reference implementation.", "main": "dist/js/index.js", "module": "dist/esm/index.js", diff --git a/packages/patternfly-4/react-docs/CHANGELOG.md b/packages/patternfly-4/react-docs/CHANGELOG.md index 103fa6c38b3..d4bda72ebcf 100644 --- a/packages/patternfly-4/react-docs/CHANGELOG.md +++ b/packages/patternfly-4/react-docs/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [4.7.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.6.11...@patternfly/react-docs@4.7.0) (2019-06-11) + + +### Features + +* **Topology:** Add @patternfly/react-topology package ([#2170](https://github.com/patternfly/patternfly-react/issues/2170)) ([58eb9cc](https://github.com/patternfly/patternfly-react/commit/58eb9cc)) + + + + + ## [4.6.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.6.10...@patternfly/react-docs@4.6.11) (2019-06-11) **Note:** Version bump only for package @patternfly/react-docs diff --git a/packages/patternfly-4/react-docs/package.json b/packages/patternfly-4/react-docs/package.json index a3a7faf04e9..849ea732ca0 100644 --- a/packages/patternfly-4/react-docs/package.json +++ b/packages/patternfly-4/react-docs/package.json @@ -1,7 +1,7 @@ { "name": "@patternfly/react-docs", "description": "PatternFly React Docs", - "version": "4.6.11", + "version": "4.7.0", "author": "Red Hat", "license": "MIT", "private": true, @@ -17,9 +17,9 @@ "@mdx-js/mdx": "1.0.2", "@mdx-js/react": "1.0.2", "@patternfly/patternfly": "2.12.5", - "@patternfly/react-core": "^3.38.1", + "@patternfly/react-core": "^3.39.0", "@patternfly/react-icons": "^3.9.5", - "@patternfly/react-virtualized-extension": "^1.0.5", + "@patternfly/react-virtualized-extension": "^1.0.6", "gatsby": "2.3.14", "gatsby-mdx": "0.6.3", "gatsby-plugin-react-helmet": "^3.0.11", diff --git a/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md b/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md index 08f142cec47..a6a4360f4fe 100644 --- a/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md +++ b/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.7.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.7.7...@patternfly/react-inline-edit-extension@2.7.8) (2019-06-11) + +**Note:** Version bump only for package @patternfly/react-inline-edit-extension + + + + + ## [2.7.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.7.6...@patternfly/react-inline-edit-extension@2.7.7) (2019-06-11) **Note:** Version bump only for package @patternfly/react-inline-edit-extension diff --git a/packages/patternfly-4/react-inline-edit-extension/package.json b/packages/patternfly-4/react-inline-edit-extension/package.json index b8f9ed1a6fe..f34f3f2d73a 100644 --- a/packages/patternfly-4/react-inline-edit-extension/package.json +++ b/packages/patternfly-4/react-inline-edit-extension/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-inline-edit-extension", - "version": "2.7.7", + "version": "2.7.8", "description": "This library provides inline editing support for PatternFly 4 React table", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -28,10 +28,10 @@ "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/", "dependencies": { "@patternfly/patternfly": "2.12.5", - "@patternfly/react-core": "^3.38.1", + "@patternfly/react-core": "^3.39.0", "@patternfly/react-icons": "^3.9.5", "@patternfly/react-styles": "^3.3.3", - "@patternfly/react-table": "^2.11.1", + "@patternfly/react-table": "^2.11.2", "classnames": "^2.2.5", "exenv": "^1.2.2", "reactabular-table": "^8.14.0" diff --git a/packages/patternfly-4/react-integration/demo-app-ts/CHANGELOG.md b/packages/patternfly-4/react-integration/demo-app-ts/CHANGELOG.md index 589a6b59f9d..aab3cd00790 100644 --- a/packages/patternfly-4/react-integration/demo-app-ts/CHANGELOG.md +++ b/packages/patternfly-4/react-integration/demo-app-ts/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.19.2](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.19.1...demo-app-ts@1.19.2) (2019-06-11) + +**Note:** Version bump only for package demo-app-ts + + + + + ## [1.19.1](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.19.0...demo-app-ts@1.19.1) (2019-06-11) **Note:** Version bump only for package demo-app-ts diff --git a/packages/patternfly-4/react-integration/demo-app-ts/package.json b/packages/patternfly-4/react-integration/demo-app-ts/package.json index 3c922f1ab8d..a706a0ff5d8 100644 --- a/packages/patternfly-4/react-integration/demo-app-ts/package.json +++ b/packages/patternfly-4/react-integration/demo-app-ts/package.json @@ -1,13 +1,13 @@ { "name": "demo-app-ts", "private": true, - "version": "1.19.1", + "version": "1.19.2", "scripts": { "build:demo-app": "react-scripts build", "start:demo-app": "react-scripts start" }, "dependencies": { - "@patternfly/react-core": "^3.38.1", + "@patternfly/react-core": "^3.39.0", "react": "^16.8.4", "react-dom": "^16.8.4", "react-router": "^4.3.1", diff --git a/packages/patternfly-4/react-table/CHANGELOG.md b/packages/patternfly-4/react-table/CHANGELOG.md index 6386e9beca9..06268f57314 100644 --- a/packages/patternfly-4/react-table/CHANGELOG.md +++ b/packages/patternfly-4/react-table/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.11.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.11.1...@patternfly/react-table@2.11.2) (2019-06-11) + +**Note:** Version bump only for package @patternfly/react-table + + + + + ## [2.11.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.11.0...@patternfly/react-table@2.11.1) (2019-06-11) **Note:** Version bump only for package @patternfly/react-table diff --git a/packages/patternfly-4/react-table/package.json b/packages/patternfly-4/react-table/package.json index 5b790cad642..5dd3b9712af 100644 --- a/packages/patternfly-4/react-table/package.json +++ b/packages/patternfly-4/react-table/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-table", - "version": "2.11.1", + "version": "2.11.2", "description": "This library provides a set of React table components for use with the PatternFly 4", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -28,7 +28,7 @@ "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/react-table#readme", "dependencies": { "@patternfly/patternfly": "2.12.5", - "@patternfly/react-core": "^3.38.1", + "@patternfly/react-core": "^3.39.0", "@patternfly/react-icons": "^3.9.5", "@patternfly/react-styles": "^3.3.3", "@patternfly/react-tokens": "^2.5.5", diff --git a/packages/patternfly-4/react-topology/CHANGELOG.md b/packages/patternfly-4/react-topology/CHANGELOG.md index 767840ada8e..b6d64ae8149 100644 --- a/packages/patternfly-4/react-topology/CHANGELOG.md +++ b/packages/patternfly-4/react-topology/CHANGELOG.md @@ -3,3 +3,9 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# 2.1.0 (2019-06-11) + + +### Features + +* **Topology:** Add @patternfly/react-topology package ([#2170](https://github.com/patternfly/patternfly-react/issues/2170)) ([58eb9cc](https://github.com/patternfly/patternfly-react/commit/58eb9cc)) diff --git a/packages/patternfly-4/react-topology/package.json b/packages/patternfly-4/react-topology/package.json index b00185cb417..3ce026d7242 100644 --- a/packages/patternfly-4/react-topology/package.json +++ b/packages/patternfly-4/react-topology/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-topology", - "version": "2.0.0", + "version": "2.1.0", "description": "This library provides a set of React topology view components for use with the PatternFly 4", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -25,7 +25,7 @@ }, "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/react-topology#readme", "dependencies": { - "@patternfly/react-core": "^3.38.0", + "@patternfly/react-core": "^3.39.0", "@patternfly/react-icons": "^3.9.5", "@patternfly/react-styles": "^3.3.2" }, diff --git a/packages/patternfly-4/react-virtualized-extension/CHANGELOG.md b/packages/patternfly-4/react-virtualized-extension/CHANGELOG.md index 6f6d9c1bce0..8140e01184b 100644 --- a/packages/patternfly-4/react-virtualized-extension/CHANGELOG.md +++ b/packages/patternfly-4/react-virtualized-extension/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.0.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-virtualized-extension@1.0.5...@patternfly/react-virtualized-extension@1.0.6) (2019-06-11) + +**Note:** Version bump only for package @patternfly/react-virtualized-extension + + + + + ## [1.0.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-virtualized-extension@1.0.4...@patternfly/react-virtualized-extension@1.0.5) (2019-06-11) **Note:** Version bump only for package @patternfly/react-virtualized-extension diff --git a/packages/patternfly-4/react-virtualized-extension/package.json b/packages/patternfly-4/react-virtualized-extension/package.json index 19191ed84f7..9a493d70225 100644 --- a/packages/patternfly-4/react-virtualized-extension/package.json +++ b/packages/patternfly-4/react-virtualized-extension/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-virtualized-extension", - "version": "1.0.5", + "version": "1.0.6", "description": "This library provides efficient rendering extensions for PatternFly 4 React tables and lists.", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -28,7 +28,7 @@ "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/", "dependencies": { "@patternfly/patternfly": "2.12.5", - "@patternfly/react-core": "^3.38.1", + "@patternfly/react-core": "^3.39.0", "@patternfly/react-icons": "^3.9.5", "@patternfly/react-styles": "^3.3.3", "clsx": "^1.0.1", From 9b90f94cea164158ce766b6f7fd984f45e3767bd Mon Sep 17 00:00:00 2001 From: Jessie Date: Tue, 11 Jun 2019 15:13:40 -0400 Subject: [PATCH 27/32] feat(ApplicationLauncher): Convert application launcher to typescript (#2166) * Began conversion of application launcher to typescript * fix imports and onSelect * Fix linting errors * Fix imports * Fix imports * Create demo and tests * Fix onSelect and add tests * Address feedback * Address feedback * Add space for linting --- .../ApplicationLauncher.d.ts | 12 -- .../ApplicationLauncher.js | 91 ------------- .../ApplicationLauncher.md | 1 + .../ApplicationLauncher.test.js | 4 +- .../ApplicationLauncher.tsx | 86 +++++++++++++ ...herMenu.js => ApplicationLauncherMenu.tsx} | 85 ++++++------ ...oggle.js => ApplicationLauncherToggle.tsx} | 121 +++++++++--------- .../applicationLauncherConstants.d.ts | 4 - ...ts.js => applicationLauncherConstants.tsx} | 0 .../components/ApplicationLauncher/index.d.ts | 1 - .../components/ApplicationLauncher/index.js | 1 - .../components/ApplicationLauncher/index.ts | 1 + .../src/components/Dropdown/Dropdown.d.ts | 4 +- .../src/components/Dropdown/DropdownItem.d.ts | 31 ++++- .../Dropdown/dropdownConstants.d.ts | 30 +++-- .../integration/applicationlauncher.spec.ts | 28 ++++ .../demo-app-ts/src/Demos.ts | 5 + .../ApplicationLauncherDemo.tsx | 66 ++++++++++ .../demo-app-ts/src/components/demos/index.ts | 1 + 19 files changed, 333 insertions(+), 239 deletions(-) delete mode 100644 packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.d.ts delete mode 100644 packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.js create mode 100644 packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx rename packages/patternfly-4/react-core/src/components/ApplicationLauncher/{ApplicationLauncherMenu.js => ApplicationLauncherMenu.tsx} (53%) rename packages/patternfly-4/react-core/src/components/ApplicationLauncher/{Toggle.js => ApplicationLauncherToggle.tsx} (50%) delete mode 100644 packages/patternfly-4/react-core/src/components/ApplicationLauncher/applicationLauncherConstants.d.ts rename packages/patternfly-4/react-core/src/components/ApplicationLauncher/{applicationLauncherConstants.js => applicationLauncherConstants.tsx} (100%) delete mode 100644 packages/patternfly-4/react-core/src/components/ApplicationLauncher/index.d.ts delete mode 100644 packages/patternfly-4/react-core/src/components/ApplicationLauncher/index.js create mode 100644 packages/patternfly-4/react-core/src/components/ApplicationLauncher/index.ts create mode 100644 packages/patternfly-4/react-integration/cypress/integration/applicationlauncher.spec.ts create mode 100644 packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/ApplicationLauncherDemo/ApplicationLauncherDemo.tsx diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.d.ts b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.d.ts deleted file mode 100644 index 9b873b3e085..00000000000 --- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { FunctionComponent, HTMLProps, ReactNode } from 'react'; - -export interface ApplicationLauncherProps extends HTMLProps { - dropdownItems: ReactNode[]; - isOpen?: boolean; - onSelect(event: React.SyntheticEvent): void; - onToggle?(event: React.SyntheticEvent): void; -} - -declare const ApplicationLauncher: FunctionComponent; - -export default ApplicationLauncher; diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.js b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.js deleted file mode 100644 index 84e1595c113..00000000000 --- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.js +++ /dev/null @@ -1,91 +0,0 @@ -import React, { Children, cloneElement } from 'react'; -import styles from '@patternfly/react-styles/css/components/AppLauncher/app-launcher'; -import { css } from '@patternfly/react-styles'; -import PropTypes from 'prop-types'; -import ApplicationLauncherMenu from './ApplicationLauncherMenu'; -import Toggle from './Toggle'; -import { ThIcon } from '@patternfly/react-icons'; -import { DropdownContext } from '../Dropdown/dropdownConstants'; -import GenerateId from '../../helpers/GenerateId/GenerateId'; - -export const propTypes = { - /** Additional element css classes */ - className: PropTypes.string, - /** Array of DropdownItem nodes that will be rendered in the dropdown Menu list */ - dropdownItems: PropTypes.array, - /** open bool */ - isOpen: PropTypes.bool, - /** Function callback called when user selects item */ - onSelect: PropTypes.func, - /** Callback called when application launcher toggle is clicked */ - onToggle: PropTypes.func, - /** Adds accessible text to the button. Required for plain buttons */ - 'aria-label': PropTypes.string -}; - -export const defaultProps = { - className: '', - dropdownItems: [], - isOpen: false, - onSelect: Function.prototype, - onToggle: Function.prototype, - 'aria-label': 'Actions' -}; - -class ApplicationLauncher extends React.Component { - onEnter = () => { - this.openedOnEnter = true; - }; - - componentDidUpdate() { - if (!this.props.isOpen) this.openedOnEnter = false; - } - - render() { - const { 'aria-label': ariaLabel, dropdownItems, className, isOpen, onSelect, onToggle } = this.props; - return ( - - {randomId => ( -
{ - this.parentRef = ref; - }} - > - {Children.map( - - - , - oneToggle => - cloneElement(oneToggle, { - parentRef: this.parentRef, - id: randomId, - isOpen, - isPlain: true, - 'aria-haspopup': true, - onEnter: this.onEnter - }) - )} - {isOpen && ( - onSelect && onSelect(event)}> - - {dropdownItems} - - - )} -
- )} - - ); - } -} - -ApplicationLauncher.propTypes = propTypes; -ApplicationLauncher.defaultProps = defaultProps; - -export default ApplicationLauncher; diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.md b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.md index 205b23f870a..28cff0d2ec5 100644 --- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.md +++ b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.md @@ -2,6 +2,7 @@ title: 'Application launcher' cssPrefix: 'pf-c-app-launcher' propComponents: ['ApplicationLauncher'] +typescript: true --- import { ApplicationLauncher, DropdownItem, Tooltip } from '@patternfly/react-core'; diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.test.js b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.test.js index 7208f104f39..96f4f47b7ea 100644 --- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.test.js +++ b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.test.js @@ -1,7 +1,7 @@ import React from 'react'; import { shallow } from 'enzyme'; -import ApplicationLauncher from './ApplicationLauncher'; -import DropdownItem from '../Dropdown/DropdownItem'; +import { ApplicationLauncher } from './ApplicationLauncher'; +import { DropdownItem } from '../Dropdown/DropdownItem'; import { DropdownPosition, DropdownDirection } from '../Dropdown/dropdownConstants'; import DropdownSeparator from '../Dropdown/Separator'; diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx new file mode 100644 index 00000000000..b551f3f9159 --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx @@ -0,0 +1,86 @@ +import * as React from 'react'; +import styles from '@patternfly/react-styles/css/components/AppLauncher/app-launcher'; +import { css } from '@patternfly/react-styles'; +import { ApplicationLauncherMenu } from './ApplicationLauncherMenu'; +import { ApplicationLauncherToggle } from './ApplicationLauncherToggle'; +import { ThIcon } from '@patternfly/react-icons'; +import { DropdownContext } from '../Dropdown/dropdownConstants'; +import GenerateId from '../../helpers/GenerateId/GenerateId'; + +export interface ApplicationLauncherProps extends React.HTMLProps { + /** Additional element css classes */ + className: string; + /** Array of DropdownItem nodes that will be rendered in the dropdown Menu list */ + dropdownItems: React.ReactNode[]; + /** open bool */ + isOpen: boolean; + /** Function callback called when user selects item */ + onSelect: (event: any) => void; + /** Callback called when application launcher toggle is clicked */ + onToggle?: (value: boolean) => void; + /** Adds accessible text to the button. Required for plain buttons */ + 'aria-label': string; +} + +export class ApplicationLauncher extends React.Component { + static defaultProps = { + className: '', + dropdownItems: [] as React.ReactNode[], + isOpen: false, + onSelect: (_event: any): any => undefined, + onToggle: (_value: boolean): any => undefined, + 'aria-label': 'Actions' + }; + + parentRef = React.createRef(); + openedOnEnter: boolean = false; + + onEnter = () => { + this.openedOnEnter = true; + }; + + componentDidUpdate() { + if (!this.props.isOpen){ this.openedOnEnter = false}; + } + + render() { + const { 'aria-label': ariaLabel, dropdownItems, className, isOpen, onSelect, onToggle } = this.props; + return ( + + {randomId => ( +
+ {React.Children.map( + + + , + oneToggle => + React.cloneElement(oneToggle, { + parentRef: this.parentRef, + id: randomId, + isOpen, + isPlain: true, + 'aria-haspopup': true, + onEnter: this.onEnter + }) + )} + {isOpen && ( + + + {dropdownItems} + + + )} +
+ )} + + ); + } +} \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncherMenu.js b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncherMenu.tsx similarity index 53% rename from packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncherMenu.js rename to packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncherMenu.tsx index 5faa51d7443..9637e094f49 100644 --- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncherMenu.js +++ b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncherMenu.tsx @@ -1,61 +1,55 @@ -import React from 'react'; +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; import styles from '@patternfly/react-styles/css/components/AppLauncher/app-launcher'; import { css } from '@patternfly/react-styles'; -import PropTypes from 'prop-types'; import { ApplicationLauncherPosition } from './applicationLauncherConstants'; import { DropdownArrowContext } from '../Dropdown/dropdownConstants'; -import ReactDOM from 'react-dom'; import { keyHandler } from '../../helpers/util'; import { KEY_CODES, KEYHANDLER_DIRECTION } from '../../helpers/constants'; -const propTypes = { - /** Anything which can be rendered as dropdown items */ - children: PropTypes.node, - /** Classess applied to root element of dropdown menu */ - className: PropTypes.string, - /** internal index of the item */ - index: PropTypes.number, - /** Flag to indicate if menu is opened */ - isOpen: PropTypes.bool, - /** Flag to indicate if menu should be opened on enter */ - openedOnEnter: PropTypes.bool, - /** Indicates where menu will be alligned horizontally */ - position: PropTypes.oneOf(Object.values(ApplicationLauncherPosition)), - /** Additional props are spread to the container component */ - '': PropTypes.any // eslint-disable-line react/require-default-props -}; +export interface ApplicationLauncherMenuProps extends React.HTMLProps { + /** Anything which can be rendered as dropdown items */ + children?: React.ReactNode; + /** Classess applied to root element of dropdown menu */ + className?: string; + /** internal index of the item */ + index?: number; + /** Flag to indicate if menu is opened */ + isOpen?: boolean; + /** Flag to indicate if menu should be opened on enter */ + openedOnEnter?: boolean; + /** Indicates where menu will be alligned horizontally */ + position?: typeof ApplicationLauncherPosition | keyof typeof ApplicationLauncherPosition; +} -const defaultProps = { - children: null, - className: '', - index: null, - isOpen: true, - openedOnEnter: false, - position: ApplicationLauncherPosition.left -}; +export class ApplicationLauncherMenu extends React.Component { + refsCollection: any[] = []; + ref = React.createRef(); -class ApplicationLauncherMenu extends React.Component { - refsCollection = []; + static defaultProps = { + children: null as React.ReactNode, + className: '', + index: null as number, + isOpen: true, + openedOnEnter: false, + position: ApplicationLauncherPosition.left + }; - childKeyHandler = (index, position, custom = false) => { - keyHandler(index, position, this.refsCollection, this.props.children, custom); + childKeyHandler = (index: number, position: any, custom = false) => { + keyHandler(index, position, this.refsCollection, this.props.children as any[], custom); }; - onKeyDown = event => { + onKeyDown = (event: any) => { // Detected key press on this item, notify the menu parent so that the appropriate // item can be focused - if (event.key === KEY_CODES.TAB) return; + if (event.key === KEY_CODES.TAB) {return}; event.preventDefault(); if (event.keyCode === KEY_CODES.ARROW_UP) { - keyHandler(this.props.index, KEYHANDLER_DIRECTION.UP, this.refsCollection, this.props.children); + keyHandler(this.props.index, KEYHANDLER_DIRECTION.UP, this.refsCollection, this.props.children as any[]); } else if (event.keyCode === KEY_CODES.ARROW_DOWN) { - keyHandler(this.props.index, KEYHANDLER_DIRECTION.DOWN, this.refsCollection, this.props.children); + keyHandler(this.props.index, KEYHANDLER_DIRECTION.DOWN, this.refsCollection, this.props.children as any[]); } else if (event.key === KEY_CODES.ENTER) { - if (!this.ref.current.getAttribute) { - ReactDOM.findDOMNode(this.ref.current).click(); // eslint-disable-line react/no-find-dom-node - } else { - this.ref.current.click && this.ref.current.click(); - } + this.ref.current.click(); } }; @@ -65,7 +59,7 @@ class ApplicationLauncherMenu extends React.Component { } } - sendRef = (index, node, isDisabled) => { + sendRef = (index: number, node: any, isDisabled: boolean) => { if (!node.getAttribute) { this.refsCollection[index] = ReactDOM.findDOMNode(node); // eslint-disable-line react/no-find-dom-node } else if (isDisabled || node.getAttribute('role') === 'separator') { @@ -77,7 +71,7 @@ class ApplicationLauncherMenu extends React.Component { extendChildren() { return React.Children.map(this.props.children, (child, index) => - React.cloneElement(child, { + React.cloneElement(child as any, { index, isAppLauncher: true }) @@ -100,9 +94,4 @@ class ApplicationLauncherMenu extends React.Component { ); } -} - -ApplicationLauncherMenu.propTypes = propTypes; -ApplicationLauncherMenu.defaultProps = defaultProps; - -export default ApplicationLauncherMenu; +} \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/Toggle.js b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncherToggle.tsx similarity index 50% rename from packages/patternfly-4/react-core/src/components/ApplicationLauncher/Toggle.js rename to packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncherToggle.tsx index 1b1c24003f9..5fbcf2997e9 100644 --- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/Toggle.js +++ b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncherToggle.tsx @@ -1,53 +1,53 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; +import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/Button/button'; import { css } from '@patternfly/react-styles'; import { KEY_CODES } from '../../helpers/constants'; -const propTypes = { - /** HTML ID of toggle */ - id: PropTypes.string.isRequired, - /** Type to put on the button */ - type: PropTypes.string, - /** Anything which can be rendered as toggle */ - children: PropTypes.node, - /** Classes applied to root element of toggle */ - className: PropTypes.string, - /** Flag to indicate if menu is opened */ - isOpen: PropTypes.bool, - /** Callback called when toggle is clicked */ - onToggle: PropTypes.func, - /** Callback for toggle open on keyboard entry */ - onEnter: PropTypes.func, - /** Element which wraps toggle */ - parentRef: PropTypes.any, - /** Forces focus state */ - isFocused: PropTypes.bool, - /** Forces hover state */ - isHovered: PropTypes.bool, - /** Forces active state */ - isActive: PropTypes.bool, - /** Display the toggle with no border or background */ - isPlain: PropTypes.bool, - /** Additional props are spread to the container ); } -} - -ApplicationLauncherToggle.propTypes = propTypes; -ApplicationLauncherToggle.defaultProps = defaultProps; - -export default ApplicationLauncherToggle; +} \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/applicationLauncherConstants.d.ts b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/applicationLauncherConstants.d.ts deleted file mode 100644 index d9d4dc49c7c..00000000000 --- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/applicationLauncherConstants.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -export const ApplicationLauncherPosition: { - right: 'right'; - left: 'left'; -}; diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/applicationLauncherConstants.js b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/applicationLauncherConstants.tsx similarity index 100% rename from packages/patternfly-4/react-core/src/components/ApplicationLauncher/applicationLauncherConstants.js rename to packages/patternfly-4/react-core/src/components/ApplicationLauncher/applicationLauncherConstants.tsx diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/index.d.ts b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/index.d.ts deleted file mode 100644 index eb80d448cc0..00000000000 --- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/index.d.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as ApplicationLauncher } from './ApplicationLauncher'; diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/index.js b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/index.js deleted file mode 100644 index eb80d448cc0..00000000000 --- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as ApplicationLauncher } from './ApplicationLauncher'; diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/index.ts b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/index.ts new file mode 100644 index 00000000000..3554cd7dddd --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/index.ts @@ -0,0 +1 @@ +export * from './ApplicationLauncher'; diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.d.ts b/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.d.ts index 0e7ab679cfd..dea648c0a12 100644 --- a/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.d.ts +++ b/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.d.ts @@ -10,8 +10,8 @@ export interface DropdownProps extends HTMLProps { isAction?: boolean; isGrouped?: boolean; onSelect?(event: React.SyntheticEvent): void; - position?: OneOf; - direction?: OneOf; + position?: DropdownPosition | 'right' | 'left'; + direction?: DropdownDirection | 'up' | 'down'; toggle?: ReactNode; } diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/DropdownItem.d.ts b/packages/patternfly-4/react-core/src/components/Dropdown/DropdownItem.d.ts index 009ef1350e9..78131ea10d2 100644 --- a/packages/patternfly-4/react-core/src/components/Dropdown/DropdownItem.d.ts +++ b/packages/patternfly-4/react-core/src/components/Dropdown/DropdownItem.d.ts @@ -1,6 +1,27 @@ -import { HTMLProps, ReactType } from 'react'; +import * as React from 'react'; -export interface DropdownItemProps extends HTMLProps { - component?: ReactType | string; - isDisabled?: Boolean; -} +export interface DropdownItemProps extends React.HTMLProps { + /** Anything which can be rendered as dropdown item */ + children?: React.ReactNode; + /** Classes applied to root element of dropdown item */ + className?: string; + /** Indicates which component will be used as dropdown item */ + component?: React.ReactType | string; + /** Flag if this is for the app launcher */ + isAppLauncher?: boolean; + /** Role for the item */ + role?: string; + /** Render dropdown item as disabled option */ + isDisabled?: boolean; + /** Forces display of the hover state of the element */ + isHovered?: boolean; + /** Default hyperlink location */ + href?: string; + index?: number; + context?: { + keyHandler?: (index: number, direction: string) => void, + sendRef?: (index: number, ref: any, isDisabled: boolean) => void + }; + /** Callback for click event */ + onClick?: () => void; +} \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/dropdownConstants.d.ts b/packages/patternfly-4/react-core/src/components/Dropdown/dropdownConstants.d.ts index a5b28878890..f780651ca46 100644 --- a/packages/patternfly-4/react-core/src/components/Dropdown/dropdownConstants.d.ts +++ b/packages/patternfly-4/react-core/src/components/Dropdown/dropdownConstants.d.ts @@ -1,9 +1,21 @@ -export const DropdownPosition: { - right: 'right'; - left: 'left'; -}; - -export const DropdownDirection: { - up: 'up'; - down: 'down'; -}; +import * as React from 'react'; +import { any } from 'glamor'; + +export enum DropdownPosition { + right = 'right', + left = 'left' +} + +export enum DropdownDirection { + up = 'up', + down = 'down' +} + +export const DropdownContext: React.Context< + (event: any) => void +> + +export const DropdownArrowContext: React.Context<{ + keyHandler: (index: number, position: any, custom: boolean) => void, + sendRef: (index: number, node: any, isDisabled: boolean) => void +}> diff --git a/packages/patternfly-4/react-integration/cypress/integration/applicationlauncher.spec.ts b/packages/patternfly-4/react-integration/cypress/integration/applicationlauncher.spec.ts new file mode 100644 index 00000000000..4cdd6c38bce --- /dev/null +++ b/packages/patternfly-4/react-integration/cypress/integration/applicationlauncher.spec.ts @@ -0,0 +1,28 @@ +describe('Application Launcher Demo Test', () => { + it('Navigate to demo section', () => { + cy.visit('http://localhost:3000/'); + cy.get('#application-launcher-demo-nav-item-link').click(); + cy.url().should('eq', 'http://localhost:3000/application-launcher-demo-nav-link'); + }); + + it('Verify application launcher button', () => { + cy.get('button').should('have.class', 'pf-c-button pf-m-plain'); + }); + + it('Verify app launcher menu toggle', () => { + cy.get('#pf-random-id-0').click(); + cy.get('ul').should('have.class', 'pf-c-app-launcher__menu'); + cy.get('#pf-random-id-0').click(); + cy.get('.pf-c-app-launcher__menu').should('not.exist'); + }); + + // it('Verify onSelect', () => { + // cy.window().then(win => { + // const spy = cy.spy(win.console, "log"); + // cy.get('#pf-random-id-0').click(); + // cy.get('.pf-c-app-launcher__menu-item').first().click(); + // win.console.log('hi'); + // expect(spy).to.be.called.callCount(2); + // }); + // }); +}); diff --git a/packages/patternfly-4/react-integration/demo-app-ts/src/Demos.ts b/packages/patternfly-4/react-integration/demo-app-ts/src/Demos.ts index 5a6c6d32ae7..45d26594a40 100644 --- a/packages/patternfly-4/react-integration/demo-app-ts/src/Demos.ts +++ b/packages/patternfly-4/react-integration/demo-app-ts/src/Demos.ts @@ -20,6 +20,11 @@ export const Demos: DemoInterface[] = [ name: 'Alert Demo', componentType: Examples.AlertDemo }, + { + id: 'application-launcher-demo', + name: 'Application Launcher Demo', + componentType: Examples.ApplicationLauncherDemo + }, { id: 'avatar-demo', name: 'Avatar Demo', diff --git a/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/ApplicationLauncherDemo/ApplicationLauncherDemo.tsx b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/ApplicationLauncherDemo/ApplicationLauncherDemo.tsx new file mode 100644 index 00000000000..f65293b6108 --- /dev/null +++ b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/ApplicationLauncherDemo/ApplicationLauncherDemo.tsx @@ -0,0 +1,66 @@ +import React from 'react'; +import { ApplicationLauncher, DropdownItem, Tooltip } from '@patternfly/react-core'; + +interface ApplicationLauncherState { + isOpen: boolean; +} + + +export class ApplicationLauncherDemo extends React.Component { + onToggle: (isOpen: boolean) => void; + onSelect: (event: any) => void; + constructor(props) { + super(props); + this.state = { + isOpen: false + }; + this.onToggle = isOpen => { + this.setState({ + isOpen + }); + }; + this.onSelect = event => { + console.log("This works") + this.setState({ + isOpen: !this.state.isOpen + }); + }; + } + + render() { + const { isOpen } = this.state; + const dropdownItems = [ + Launch Application 1
}> + + Application 1 + + + , + Launch Application 2
} position="right"> + + Application 2 + + + , + Launch Application 3
} position="right"> + + Application 3 + + + , + Application Unavailable At This Time
} position="bottom"> + + Unavailable Application + + + ]; + return ( + + ); + } +} \ No newline at end of file diff --git a/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/index.ts b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/index.ts index 35aacf61847..8580ffa7ff8 100644 --- a/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/index.ts +++ b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/index.ts @@ -1,4 +1,5 @@ export * from './AboutModal/AboutModalDemo'; +export * from './ApplicationLauncherDemo/ApplicationLauncherDemo'; export * from './AlertDemo/AlertDemo'; export * from './AvatarDemo/AvatarDemo'; export * from './BackdropDemo/BackdropDemo'; From 783251851c9f1fd6503ca31df7ff9beeeabe767e Mon Sep 17 00:00:00 2001 From: Jessie Date: Tue, 11 Jun 2019 15:39:04 -0400 Subject: [PATCH 28/32] feat(Card): Add support for images and actions (#2122) * Get started on card image and actions support * Made checkbox functional * Add additional card examples * Fix images * Fix example images * Address comment * Change positioning of dropdown * Change Checkbox component to checked input --- .../react-core/src/components/Card/Card.md | 260 +++++++++++++++++- .../src/components/Card/CardActions.tsx | 21 ++ .../src/components/Card/CardHead.tsx | 20 ++ .../components/Card/examples/brandImg2.svg | 13 + .../src/components/Card/examples/pfLogo.svg | 37 +++ .../react-core/src/components/Card/index.ts | 2 + packages/patternfly-4/react-docs/package.json | 2 +- 7 files changed, 353 insertions(+), 2 deletions(-) create mode 100644 packages/patternfly-4/react-core/src/components/Card/CardActions.tsx create mode 100644 packages/patternfly-4/react-core/src/components/Card/CardHead.tsx create mode 100644 packages/patternfly-4/react-core/src/components/Card/examples/brandImg2.svg create mode 100644 packages/patternfly-4/react-core/src/components/Card/examples/pfLogo.svg diff --git a/packages/patternfly-4/react-core/src/components/Card/Card.md b/packages/patternfly-4/react-core/src/components/Card/Card.md index 0f9df1e0d64..c96ec63f988 100644 --- a/packages/patternfly-4/react-core/src/components/Card/Card.md +++ b/packages/patternfly-4/react-core/src/components/Card/Card.md @@ -5,7 +5,8 @@ typescript: true propComponents: ['Card', 'CardHeader', 'CardBody', 'CardFooter'] --- -import { Card, CardHeader, CardBody, CardFooter } from '@patternfly/react-core'; +import { Card, CardActions, CardHead, CardHeader, CardBody, CardFooter, Checkbox, DropdownActions } from '@patternfly/react-core'; +import pfLogo from './examples/pfLogo.svg'; ## Simple card ```js @@ -21,6 +22,263 @@ SimpleCard = () => ( ); ``` +## Card with image and actions +```js +import React from 'react'; +import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownPosition, DropdownDirection, KebabToggle, Card, CardHead, CardActions, CardHeader, CardBody } from '@patternfly/react-core'; +import pfLogo from './examples/pfLogo.svg'; + +class KebabDropdown extends React.Component { + constructor(props) { + super(props); + this.state = { + isOpen: false, + check1: false + }; + this.onToggle = isOpen => { + this.setState({ + isOpen + }); + }; + this.onSelect = event => { + this.setState({ + isOpen: !this.state.isOpen + }); + }; + this.onClick = (checked, event) => { + const target = event.target; + const value = target.type === 'checkbox' ? target.checked : target.value; + const name = target.name; + this.setState({ [name]: value }); + }; + } + + render() { + const { isOpen } = this.state; + const dropdownItems = [ + Link, + + Action + , + + Disabled Link + , + + Disabled Action + , + , + Separated Link, + + Separated Action + + ]; + return ( + + + + + } + isOpen={isOpen} + isPlain + dropdownItems={dropdownItems} + position={'right'} + /> + + + + Header + Body + Footer + + ); + } +} +``` + +## Card header in card head +```js + import React from 'react'; +import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownPosition, DropdownDirection, KebabToggle, Card, CardHead, CardActions, CardHeader, CardBody } from '@patternfly/react-core'; + +class KebabDropdown extends React.Component { + constructor(props) { + super(props); + this.state = { + isOpen: false, + check1: false + }; + this.onToggle = isOpen => { + this.setState({ + isOpen + }); + }; + this.onSelect = event => { + this.setState({ + isOpen: !this.state.isOpen + }); + }; + this.onClick = (checked, event) => { + const target = event.target; + const value = target.type === 'checkbox' ? target.checked : target.value; + const name = target.name; + this.setState({ [name]: value }); + }; + } + + render() { + const { isOpen } = this.state; + const dropdownItems = [ + Link, + + Action + , + + Disabled Link + , + + Disabled Action + , + , + Separated Link, + + Separated Action + + ]; + return ( + + + + } + isOpen={isOpen} + isPlain + dropdownItems={dropdownItems} + position={'right'} + /> + + + This is a really really really really really really really really really really long header + + Body + Footer + + ); + } +} +``` + +## Only actions in card head (no header/footer) +```js + import React from 'react'; +import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownPosition, DropdownDirection, KebabToggle, Card, CardHead, CardActions, CardHeader, CardBody } from '@patternfly/react-core'; + +class KebabDropdown extends React.Component { + constructor(props) { + super(props); + this.state = { + isOpen: false, + check1: false + }; + this.onToggle = isOpen => { + this.setState({ + isOpen + }); + }; + this.onSelect = event => { + this.setState({ + isOpen: !this.state.isOpen + }); + }; + this.onClick = (checked, event) => { + const target = event.target; + const value = target.type === 'checkbox' ? target.checked : target.value; + const name = target.name; + this.setState({ [name]: value }); + }; + } + + render() { + const { isOpen } = this.state; + const dropdownItems = [ + Link, + + Action + , + + Disabled Link + , + + Disabled Action + , + , + Separated Link, + + Separated Action + + ]; + return ( + + + + } + isOpen={isOpen} + isPlain + dropdownItems={dropdownItems} + position={'right'} + /> + + + + This is the card body, there is only actions in the card head. + + ); + } +} +``` + +## Only image in the card head +```js +import React from 'react'; +import { Card, CardHeader, CardBody, CardFooter } from '@patternfly/react-core'; + +ImageCard = () => ( + + + + + Header + Body + Footer + +); +``` + ## Card with no footer ```js import React from 'react'; diff --git a/packages/patternfly-4/react-core/src/components/Card/CardActions.tsx b/packages/patternfly-4/react-core/src/components/Card/CardActions.tsx new file mode 100644 index 00000000000..7a036a97273 --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/Card/CardActions.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import { css } from '@patternfly/react-styles'; +import styles from '@patternfly/react-styles/css/components/Card/card'; + + +export interface CardActionsProps extends React.HTMLProps { + /** Content rendered inside the Card Action */ + children?: React.ReactNode; + /** Additional classes added to the Action */ + className?: string; +} + +export const CardActions: React.FunctionComponent = ({ + children = null, + className = '', + ...props +}: CardActionsProps) => ( +
+ {children} +
+); \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/Card/CardHead.tsx b/packages/patternfly-4/react-core/src/components/Card/CardHead.tsx new file mode 100644 index 00000000000..5cabf77531c --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/Card/CardHead.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; +import { css } from '@patternfly/react-styles'; +import styles from '@patternfly/react-styles/css/components/Card/card'; + +export interface CardHeadProps extends React.HTMLProps { + /** Content rendered inside the Card Head */ + children?: React.ReactNode; + /** Additional classes added to the Head */ + className?: string; +} + +export const CardHead: React.FunctionComponent = ({ + children = null, + className = '', + ...props +}: CardHeadProps) => ( +
+ {children} +
+); \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/Card/examples/brandImg2.svg b/packages/patternfly-4/react-core/src/components/Card/examples/brandImg2.svg new file mode 100644 index 00000000000..c02f48300d0 --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/Card/examples/brandImg2.svg @@ -0,0 +1,13 @@ + + + + + + + \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/Card/examples/pfLogo.svg b/packages/patternfly-4/react-core/src/components/Card/examples/pfLogo.svg new file mode 100644 index 00000000000..efca381b551 --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/Card/examples/pfLogo.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + diff --git a/packages/patternfly-4/react-core/src/components/Card/index.ts b/packages/patternfly-4/react-core/src/components/Card/index.ts index 4da33a48e8f..7794f4b0dac 100644 --- a/packages/patternfly-4/react-core/src/components/Card/index.ts +++ b/packages/patternfly-4/react-core/src/components/Card/index.ts @@ -1,4 +1,6 @@ export * from './Card'; +export * from './CardActions'; export * from './CardBody'; export * from './CardFooter'; export * from './CardHeader'; +export * from './CardHead'; diff --git a/packages/patternfly-4/react-docs/package.json b/packages/patternfly-4/react-docs/package.json index 849ea732ca0..0a70b92d6e0 100644 --- a/packages/patternfly-4/react-docs/package.json +++ b/packages/patternfly-4/react-docs/package.json @@ -10,7 +10,7 @@ "build:static": "shx cp -r ../react-core/dist/styles/* static", "clean": "rimraf .cache public static/assets static/base.css", "clean:mdx": "rimraf .cache/caches/gatsby-mdx", - "develop": "yarn build:static && yarn clean:mdx && gatsby develop", + "develop": "yarn build:static && gatsby develop", "serve": "gatsby serve --prefix-paths" }, "dependencies": { From 9be5c0bb4b0c28c0c1cb4b02c50baa1a9cf85962 Mon Sep 17 00:00:00 2001 From: Titani Labaj <39532947+tlabaj@users.noreply.github.com> Date: Tue, 11 Jun 2019 15:41:07 -0400 Subject: [PATCH 29/32] chore(TextArea): Convert TextArea to typescript (#2168) * chore(TextArea): Convert TextArea to typescript #1953 * updates for review commnents * update for review commnets * fix linting error --- .../src/components/TextArea/TextArea.d.ts | 12 ---- .../src/components/TextArea/TextArea.js | 60 ------------------- .../src/components/TextArea/TextArea.md | 7 ++- .../src/components/TextArea/TextArea.test.js | 2 +- .../src/components/TextArea/TextArea.tsx | 60 +++++++++++++++++++ .../__snapshots__/TextArea.test.js.snap | 2 +- .../src/components/TextArea/index.d.ts | 1 - .../src/components/TextArea/index.js | 1 - .../src/components/TextArea/index.ts | 1 + .../cypress/integration/textarea.spec.ts | 37 ++++++++++++ .../demo-app-ts/src/Demos.ts | 5 ++ .../demos/TextAreaDemo/TextAreaDemo.tsx | 42 +++++++++++++ .../demo-app-ts/src/components/demos/index.ts | 1 + 13 files changed, 153 insertions(+), 78 deletions(-) delete mode 100644 packages/patternfly-4/react-core/src/components/TextArea/TextArea.d.ts delete mode 100644 packages/patternfly-4/react-core/src/components/TextArea/TextArea.js create mode 100644 packages/patternfly-4/react-core/src/components/TextArea/TextArea.tsx delete mode 100644 packages/patternfly-4/react-core/src/components/TextArea/index.d.ts delete mode 100644 packages/patternfly-4/react-core/src/components/TextArea/index.js create mode 100644 packages/patternfly-4/react-core/src/components/TextArea/index.ts create mode 100644 packages/patternfly-4/react-integration/cypress/integration/textarea.spec.ts create mode 100644 packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/TextAreaDemo/TextAreaDemo.tsx diff --git a/packages/patternfly-4/react-core/src/components/TextArea/TextArea.d.ts b/packages/patternfly-4/react-core/src/components/TextArea/TextArea.d.ts deleted file mode 100644 index 7ae80fe116c..00000000000 --- a/packages/patternfly-4/react-core/src/components/TextArea/TextArea.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { FormEvent, FunctionComponent, HTMLProps } from 'react'; -import { Omit } from '../../helpers/typeUtils'; - -export interface TextAreaProps extends Omit, 'onChange'> { - isRequired?: boolean; - isValid?: boolean; - onChange?(value: string, event: FormEvent): void; -} - -declare const TextArea: FunctionComponent; - -export default TextArea; diff --git a/packages/patternfly-4/react-core/src/components/TextArea/TextArea.js b/packages/patternfly-4/react-core/src/components/TextArea/TextArea.js deleted file mode 100644 index af778cde576..00000000000 --- a/packages/patternfly-4/react-core/src/components/TextArea/TextArea.js +++ /dev/null @@ -1,60 +0,0 @@ -import React from 'react'; -import styles from '@patternfly/react-styles/css/components/FormControl/form-control'; -import { css } from '@patternfly/react-styles'; -import PropTypes from 'prop-types'; - -const propTypes = { - /** Additional classes added to the TextArea. */ - className: PropTypes.string, - /** Flag to show if the TextArea is required. */ - isRequired: PropTypes.bool, - /** Flag to show if the TextArea is valid or invalid. */ - isValid: PropTypes.bool, - /** Value of the TextArea. */ - value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - /** A callback for when the TextArea value changes. */ - onChange: PropTypes.func, - /** Custom flag to show that the TextArea requires an associated id or aria-label. */ - 'aria-label': props => { - if (!props.id && !props['aria-label']) { - return new Error('TextArea requires either an id or aria-label to be specified'); - } - return null; - }, - /** Additional props are spread to the container