Click here for a list of Country codes', + "Please specify Country code
Click here for a list of Country codes", close: 'true', help: 'Enter a valid phone number', formControl: ({ validationState, ...props }) =>
Click here for a list of Country codes' + "Please specify Country code
Click here for a list of Country codes" ), close: select('Close Popover', ['true', 'false'], 'true') }); diff --git a/packages/patternfly-3/patternfly-react/src/components/Form/Stories/FormExample.js b/packages/patternfly-3/patternfly-react/src/components/Form/Stories/FormExample.js index 2b8d7a13312..f1fe8ffd3fe 100644 --- a/packages/patternfly-3/patternfly-react/src/components/Form/Stories/FormExample.js +++ b/packages/patternfly-3/patternfly-react/src/components/Form/Stories/FormExample.js @@ -15,9 +15,13 @@ export class FormExample extends React.Component { getValidationState() { const { length } = this.state.value; - if (length > 10) { return 'success'; } - else if (length > 5) { return 'warning'; } - else if (length > 0) { return 'error'; } + if (length > 10) { + return 'success'; + } else if (length > 5) { + return 'warning'; + } else if (length > 0) { + return 'error'; + } return null; } diff --git a/packages/patternfly-3/patternfly-react/src/components/Form/Stories/HorizontalFormField.js b/packages/patternfly-3/patternfly-react/src/components/Form/Stories/HorizontalFormField.js index 299c7403e72..0f839df0316 100644 --- a/packages/patternfly-3/patternfly-react/src/components/Form/Stories/HorizontalFormField.js +++ b/packages/patternfly-3/patternfly-react/src/components/Form/Stories/HorizontalFormField.js @@ -20,8 +20,12 @@ export const HorizontalFormField = ({ }) => { const controlProps = { ...props }; - if (bsSize) { controlProps.bsSize = bsSize; } - if (validationState) { controlProps.validationState = validationState; } + if (bsSize) { + controlProps.bsSize = bsSize; + } + if (validationState) { + controlProps.validationState = validationState; + } const formGroupProps = { key: controlId, controlId, ...controlProps }; diff --git a/packages/patternfly-3/patternfly-react/src/components/Form/Stories/InlineFormField.js b/packages/patternfly-3/patternfly-react/src/components/Form/Stories/InlineFormField.js index 968b5512916..788e7fcb782 100644 --- a/packages/patternfly-3/patternfly-react/src/components/Form/Stories/InlineFormField.js +++ b/packages/patternfly-3/patternfly-react/src/components/Form/Stories/InlineFormField.js @@ -6,8 +6,12 @@ import { Form } from '../index'; export const InlineFormField = ({ controlId, label, formControl, validationState, bsSize, showLabel, ...props }) => { const controlProps = { ...props }; - if (bsSize) { controlProps.bsSize = bsSize; } - if (validationState) { controlProps.validationState = validationState; } + if (bsSize) { + controlProps.bsSize = bsSize; + } + if (validationState) { + controlProps.validationState = validationState; + } const formGroupProps = { key: controlId, controlId, ...controlProps }; diff --git a/packages/patternfly-3/patternfly-react/src/components/Form/Stories/VerticalFormField.js b/packages/patternfly-3/patternfly-react/src/components/Form/Stories/VerticalFormField.js index 63625b02af7..fac2edbdb28 100644 --- a/packages/patternfly-3/patternfly-react/src/components/Form/Stories/VerticalFormField.js +++ b/packages/patternfly-3/patternfly-react/src/components/Form/Stories/VerticalFormField.js @@ -19,8 +19,12 @@ export const VerticalFormField = ({ }) => { const controlProps = { ...props }; - if (bsSize) { controlProps.bsSize = bsSize; } - if (validationState) { controlProps.validationState = validationState; } + if (bsSize) { + controlProps.bsSize = bsSize; + } + if (validationState) { + controlProps.validationState = validationState; + } const formGroupProps = { key: controlId, controlId, ...controlProps }; diff --git a/packages/patternfly-3/patternfly-react/src/components/InfoTip/InfoTip.js b/packages/patternfly-3/patternfly-react/src/components/InfoTip/InfoTip.js index 391c4a66b74..d1d0084348c 100644 --- a/packages/patternfly-3/patternfly-react/src/components/InfoTip/InfoTip.js +++ b/packages/patternfly-3/patternfly-react/src/components/InfoTip/InfoTip.js @@ -13,7 +13,7 @@ class InfoTip extends React.Component { handleEnterKeyDown = event => { this.setState({ open: !this.state.open }); event.preventDefault(); - } + }; handleTabKeyDown = event => { if (this.state.footerFocused) { @@ -23,7 +23,7 @@ class InfoTip extends React.Component { } event.stopPropagation(); event.nativeEvent.stopImmediatePropagation(); - } + }; handleKeyDown = event => { if (event.shiftKey && event.keyCode) { @@ -39,24 +39,24 @@ class InfoTip extends React.Component { default: return null; } - } + }; handleBackFocus = () => { if (this.state.open) { this.setState({ open: false }); } - } + }; handleClick = event => { event.preventDefault(); this.setState({ open: !this.state.open }); - } + }; handleBlur = event => { if (event && event.relatedTarget) { event.relatedTarget.click(); } this.setState({ open: false }); - } + }; render() { const { children, onToggle, ...props } = this.props; diff --git a/packages/patternfly-3/patternfly-react/src/components/Label/CompoundLabel.js b/packages/patternfly-3/patternfly-react/src/components/Label/CompoundLabel.js index 617752e88d5..7487a14c23b 100644 --- a/packages/patternfly-3/patternfly-react/src/components/Label/CompoundLabel.js +++ b/packages/patternfly-3/patternfly-react/src/components/Label/CompoundLabel.js @@ -16,11 +16,13 @@ class CompoundLabel extends React.Component { className={this.props.innerClassName} overlayPlacement={this.props.overlayPlacement} /> - ) + ); render() { const values = [...this.props.values]; - if (values.length === 0) { return null; } + if (values.length === 0) { + return null; + } const categoryTooltip =
Main Dialog Text
; diff --git a/packages/patternfly-3/patternfly-react/src/components/MessageDialog/Stories/MessageDialogError.js b/packages/patternfly-3/patternfly-react/src/components/MessageDialog/Stories/MessageDialogError.js index 4a700308700..36efdca9a8b 100644 --- a/packages/patternfly-3/patternfly-react/src/components/MessageDialog/Stories/MessageDialogError.js +++ b/packages/patternfly-3/patternfly-react/src/components/MessageDialog/Stories/MessageDialogError.js @@ -11,15 +11,15 @@ class MessageDialogError extends Component { primaryAction = () => { this.setState(() => ({ show: false })); - } + }; secondaryAction = () => { this.setState(() => ({ show: false })); - } + }; showModal = () => { this.setState(() => ({ show: true })); - } + }; render() { const primaryContent =Main Dialog Text
; diff --git a/packages/patternfly-3/patternfly-react/src/components/MessageDialog/Stories/MessageDialogInfo.js b/packages/patternfly-3/patternfly-react/src/components/MessageDialog/Stories/MessageDialogInfo.js index d6a0b3c64fa..67bdce38ef5 100644 --- a/packages/patternfly-3/patternfly-react/src/components/MessageDialog/Stories/MessageDialogInfo.js +++ b/packages/patternfly-3/patternfly-react/src/components/MessageDialog/Stories/MessageDialogInfo.js @@ -11,15 +11,15 @@ class MessageDialogInfo extends Component { primaryAction = () => { this.setState(() => ({ show: false })); - } + }; secondaryAction = () => { this.setState(() => ({ show: false })); - } + }; showModal = () => { this.setState(() => ({ show: true })); - } + }; render() { const primaryContent =Main Dialog Text
; diff --git a/packages/patternfly-3/patternfly-react/src/components/MessageDialog/Stories/MessageDialogNondestructiveAction.js b/packages/patternfly-3/patternfly-react/src/components/MessageDialog/Stories/MessageDialogNondestructiveAction.js index d5163838a13..6e73e63028b 100644 --- a/packages/patternfly-3/patternfly-react/src/components/MessageDialog/Stories/MessageDialogNondestructiveAction.js +++ b/packages/patternfly-3/patternfly-react/src/components/MessageDialog/Stories/MessageDialogNondestructiveAction.js @@ -11,15 +11,15 @@ class MessageDialogNondestructiveAction extends Component { primaryAction = () => { this.setState(() => ({ show: false })); - } + }; secondaryAction = () => { this.setState(() => ({ show: false })); - } + }; showModal = () => { this.setState(() => ({ show: true })); - } + }; render() { const primaryContent =Main Dialog Text
; diff --git a/packages/patternfly-3/patternfly-react/src/components/MessageDialog/Stories/MessageDialogQuestion.js b/packages/patternfly-3/patternfly-react/src/components/MessageDialog/Stories/MessageDialogQuestion.js index 74756134cac..25b11073123 100644 --- a/packages/patternfly-3/patternfly-react/src/components/MessageDialog/Stories/MessageDialogQuestion.js +++ b/packages/patternfly-3/patternfly-react/src/components/MessageDialog/Stories/MessageDialogQuestion.js @@ -11,15 +11,15 @@ class MessageDialogQuestion extends Component { primaryAction = () => { this.setState(() => ({ show: false })); - } + }; secondaryAction = () => { this.setState(() => ({ show: false })); - } + }; showModal = () => { this.setState(() => ({ show: true })); - } + }; render() { const primaryContent =Main Dialog Text. Are you sure you want to xxxxx?
; diff --git a/packages/patternfly-3/patternfly-react/src/components/MessageDialog/Stories/MessageDialogSuccess.js b/packages/patternfly-3/patternfly-react/src/components/MessageDialog/Stories/MessageDialogSuccess.js index 96ecf0d473b..8700ea9416e 100644 --- a/packages/patternfly-3/patternfly-react/src/components/MessageDialog/Stories/MessageDialogSuccess.js +++ b/packages/patternfly-3/patternfly-react/src/components/MessageDialog/Stories/MessageDialogSuccess.js @@ -11,15 +11,15 @@ class MessageDialogSuccess extends Component { primaryAction = () => { this.setState(() => ({ show: false })); - } + }; secondaryAction = () => { this.setState(() => ({ show: false })); - } + }; showModal = () => { this.setState(() => ({ show: true })); - } + }; render() { const primaryContent =Main Dialog Text
; diff --git a/packages/patternfly-3/patternfly-react/src/components/MessageDialog/Stories/MessageDialogToggleableOptions.js b/packages/patternfly-3/patternfly-react/src/components/MessageDialog/Stories/MessageDialogToggleableOptions.js index 4a08c7027bd..da308db9c36 100644 --- a/packages/patternfly-3/patternfly-react/src/components/MessageDialog/Stories/MessageDialogToggleableOptions.js +++ b/packages/patternfly-3/patternfly-react/src/components/MessageDialog/Stories/MessageDialogToggleableOptions.js @@ -13,15 +13,15 @@ class MessageDialogToggleableOptions extends Component { primaryAction = () => { // Do some stuff this.setState(() => ({ show: false })); - } + }; secondaryAction = () => { this.setState(() => ({ show: false })); - } + }; showModal = () => { this.setState(() => ({ show: true })); - } + }; render() { // StoryBook Knobs Config diff --git a/packages/patternfly-3/patternfly-react/src/components/MessageDialog/Stories/MessageDialogWarning.js b/packages/patternfly-3/patternfly-react/src/components/MessageDialog/Stories/MessageDialogWarning.js index 654d9b6061a..b7fed11b37c 100644 --- a/packages/patternfly-3/patternfly-react/src/components/MessageDialog/Stories/MessageDialogWarning.js +++ b/packages/patternfly-3/patternfly-react/src/components/MessageDialog/Stories/MessageDialogWarning.js @@ -11,15 +11,15 @@ class MessageDialogWarning extends Component { primaryAction = () => { this.setState(() => ({ show: false })); - } + }; secondaryAction = () => { this.setState(() => ({ show: false })); - } + }; showModal = () => { this.setState(() => ({ show: true })); - } + }; render() { const primaryContent =Main Dialog Text
; diff --git a/packages/patternfly-3/patternfly-react/src/components/Modal/Patterns/StatefulModalPattern.js b/packages/patternfly-3/patternfly-react/src/components/Modal/Patterns/StatefulModalPattern.js index 7d83d9d2383..92ebf495615 100644 --- a/packages/patternfly-3/patternfly-react/src/components/Modal/Patterns/StatefulModalPattern.js +++ b/packages/patternfly-3/patternfly-react/src/components/Modal/Patterns/StatefulModalPattern.js @@ -19,11 +19,11 @@ class StatefulModalPattern extends React.Component { open = () => { this.setState({ show: true }); - } + }; close = () => { this.setState({ show: false }); - } + }; getModalPatternProps = () => this.props; diff --git a/packages/patternfly-3/patternfly-react/src/components/Modal/Stories/ModalPatternExample.js b/packages/patternfly-3/patternfly-react/src/components/Modal/Stories/ModalPatternExample.js index 1567c3556ba..c0bfa7f7638 100644 --- a/packages/patternfly-3/patternfly-react/src/components/Modal/Stories/ModalPatternExample.js +++ b/packages/patternfly-3/patternfly-react/src/components/Modal/Stories/ModalPatternExample.js @@ -14,11 +14,11 @@ export class ModalPatternExample extends React.Component { setTimeout(() => { this.setState({ loading: false }); }, 1000); - } + }; close = () => { this.setState({ showModal: false, loading: false }); - } + }; renderStateless = () => { // We need knobs on the stateless example, because we must drive its state ourselves. @@ -44,7 +44,7 @@ export class ModalPatternExample extends React.Component { ); - } + }; renderStateful = () => ( // No knobs for the stateful example, we want to let it control its own state. @@ -66,7 +66,7 @@ export class ModalPatternExample extends React.Component {
diff --git a/packages/patternfly-3/patternfly-react/src/components/Table/TableConfirmButtonsRow.js b/packages/patternfly-3/patternfly-react/src/components/Table/TableConfirmButtonsRow.js
index 590bde30cc7..fe1f008abd6 100644
--- a/packages/patternfly-3/patternfly-react/src/components/Table/TableConfirmButtonsRow.js
+++ b/packages/patternfly-3/patternfly-react/src/components/Table/TableConfirmButtonsRow.js
@@ -34,16 +34,16 @@ class TableConfirmButtonsRow extends React.Component {
rowDimensions: this.element.getBoundingClientRect()
});
}
- }
+ };
handleScroll = event => {
this.saveRowDimensions();
- }
+ };
handleResize = event => {
this.fetchClientDimensions();
this.saveRowDimensions();
- }
+ };
fetchClientDimensions() {
this.setState({
diff --git a/packages/patternfly-3/patternfly-react/src/components/Table/__mocks__/mockClientPaginationTable.js b/packages/patternfly-3/patternfly-react/src/components/Table/__mocks__/mockClientPaginationTable.js
index f617b3fc87d..ad836bea4ab 100644
--- a/packages/patternfly-3/patternfly-react/src/components/Table/__mocks__/mockClientPaginationTable.js
+++ b/packages/patternfly-3/patternfly-react/src/components/Table/__mocks__/mockClientPaginationTable.js
@@ -251,34 +251,34 @@ export class MockClientPaginationTable extends React.Component {
}
onFirstPage = () => {
this.setPage(1);
- }
+ };
onLastPage = () => {
const { page } = this.state.pagination;
const totalPages = this.totalPages();
if (page < totalPages) {
this.setPage(totalPages);
}
- }
+ };
onNextPage = () => {
const { page } = this.state.pagination;
if (page < this.totalPages()) {
this.setPage(this.state.pagination.page + 1);
}
- }
+ };
onPageInput = e => {
this.setState({ pageChangeValue: e.target.value });
- }
+ };
onPerPageSelect = (eventKey, e) => {
const newPaginationState = Object.assign({}, this.state.pagination);
newPaginationState.perPage = eventKey;
newPaginationState.page = 1;
this.setState({ pagination: newPaginationState });
- }
+ };
onPreviousPage = () => {
if (this.state.pagination.page > 1) {
this.setPage(this.state.pagination.page - 1);
}
- }
+ };
onRow = (row, { rowIndex }) => {
const { selectedRows } = this.state;
const selected = selectedRows.indexOf(row.id) > -1;
@@ -286,7 +286,7 @@ export class MockClientPaginationTable extends React.Component {
className: classNames({ selected }),
role: 'row'
};
- }
+ };
onSelectAllRows = event => {
const { onRowsLogger } = this.props;
const { rows, selectedRows } = this.state;
@@ -316,7 +316,7 @@ export class MockClientPaginationTable extends React.Component {
});
onRowsLogger(updatedRows.filter(r => r.selected));
}
- }
+ };
onSelectRow = (event, row) => {
const { onRowsLogger } = this.props;
const { rows, selectedRows } = this.state;
@@ -339,10 +339,10 @@ export class MockClientPaginationTable extends React.Component {
});
onRowsLogger(rows.filter(r => r.selected));
}
- }
+ };
onSubmit = () => {
this.setPage(this.state.pageChangeValue);
- }
+ };
setPage = value => {
const page = Number(value);
if (!Number.isNaN(value) && value !== '' && page > 0 && page <= this.totalPages()) {
@@ -350,7 +350,7 @@ export class MockClientPaginationTable extends React.Component {
newPaginationState.page = page;
this.setState({ pagination: newPaginationState, pageChangeValue: page });
}
- }
+ };
currentRows() {
const { rows, sortingColumns, columns, pagination } = this.state;
return compose(
@@ -366,7 +366,7 @@ export class MockClientPaginationTable extends React.Component {
totalPages = () => {
const { perPage } = this.state.pagination;
return Math.ceil(mockRows.length / perPage);
- }
+ };
render() {
const { columns, pagination, sortingColumns, pageChangeValue } = this.state;
const sortedPaginatedRows = this.currentRows();
diff --git a/packages/patternfly-3/patternfly-react/src/components/Table/__mocks__/mockServerPaginationTable.js b/packages/patternfly-3/patternfly-react/src/components/Table/__mocks__/mockServerPaginationTable.js
index 7189dd5ea8a..80eb02ce349 100644
--- a/packages/patternfly-3/patternfly-react/src/components/Table/__mocks__/mockServerPaginationTable.js
+++ b/packages/patternfly-3/patternfly-react/src/components/Table/__mocks__/mockServerPaginationTable.js
@@ -211,14 +211,14 @@ export class MockServerPaginationTable extends React.Component {
const newPaginationState = Object.assign({}, this.state.pagination);
newPaginationState.page = page;
this.getPage(this.state.sortingColumns, newPaginationState);
- }
+ };
onPerPageSelect = (eventKey, e) => {
const newPaginationState = Object.assign({}, this.state.pagination);
newPaginationState.perPage = eventKey;
newPaginationState.page = 1;
this.getPage(this.state.sortingColumns, newPaginationState);
- }
+ };
onSelectAllRows = event => {
const { sortingColumns, pagination, rows } = this.state;
@@ -227,7 +227,7 @@ export class MockServerPaginationTable extends React.Component {
// refresh rows after all rows selected
this.getPage(sortingColumns, pagination);
});
- }
+ };
onSelectRow = (event, row) => {
const { sortingColumns, pagination } = this.state;
@@ -235,7 +235,7 @@ export class MockServerPaginationTable extends React.Component {
// refresh rows after row is selected
this.getPage(sortingColumns, pagination);
});
- }
+ };
onSort = (e, column, sortDirection) => {
// Clearing existing sortingColumns does simple single column sort. To do multisort,
// set each column based on existing sorts specified and set sort position.
@@ -249,7 +249,7 @@ export class MockServerPaginationTable extends React.Component {
alert(`Server API called with: sort by ${column.property} ${updatedSortingColumns[column.property].direction}`);
this.getPage(updatedSortingColumns, this.state.pagination);
- }
+ };
getPage(sortingColumns, pagination) {
const { onServerPageLogger } = this.props;
diff --git a/packages/patternfly-3/patternfly-react/src/components/ToastNotification/TimedToastNotification.js b/packages/patternfly-3/patternfly-react/src/components/ToastNotification/TimedToastNotification.js
index d664e68238b..c6fce04bd4d 100644
--- a/packages/patternfly-3/patternfly-react/src/components/ToastNotification/TimedToastNotification.js
+++ b/packages/patternfly-3/patternfly-react/src/components/ToastNotification/TimedToastNotification.js
@@ -43,12 +43,12 @@ class TimedToastNotification extends React.Component {
onMouseEnter = () => {
const { onMouseEnter } = this.props;
onMouseEnter && onMouseEnter();
- }
+ };
onMouseLeave = () => {
const { onMouseLeave } = this.props;
onMouseLeave && onMouseLeave();
- }
+ };
render() {
const { children, className, type, onDismiss } = this.props;
const { onMouseEnter, onMouseLeave } = this;
diff --git a/packages/patternfly-3/patternfly-react/src/components/ToastNotification/ToastNotification.stories.js b/packages/patternfly-3/patternfly-react/src/components/ToastNotification/ToastNotification.stories.js
index 818c17254d8..b6ff9e27b33 100644
--- a/packages/patternfly-3/patternfly-react/src/components/ToastNotification/ToastNotification.stories.js
+++ b/packages/patternfly-3/patternfly-react/src/components/ToastNotification/ToastNotification.stories.js
@@ -70,7 +70,7 @@ class ToastNotificationStoryWrapper extends React.Component {
type: 'info',
persistent: false,
timerdelay: 8000,
- message: 'By default, a toast notification\'s timer expires after eight seconds.'
+ message: "By default, a toast notification's timer expires after eight seconds."
},
{
key: 2,
diff --git a/packages/patternfly-3/patternfly-react/src/components/ToastNotification/ToastNotificationList.js b/packages/patternfly-3/patternfly-react/src/components/ToastNotification/ToastNotificationList.js
index d9a615781d5..fe5bbadf510 100644
--- a/packages/patternfly-3/patternfly-react/src/components/ToastNotification/ToastNotificationList.js
+++ b/packages/patternfly-3/patternfly-react/src/components/ToastNotification/ToastNotificationList.js
@@ -18,19 +18,19 @@ class ToastNotificationList extends React.Component {
this.setState({ paused: true });
const { onMouseEnter } = this.props;
onMouseEnter();
- }
+ };
onMouseLeave = () => {
this.setState({ paused: false });
const { onMouseLeave } = this.props;
onMouseLeave();
- }
+ };
onMouseOver = () => {
this.setState({ paused: true });
const { onMouseOver } = this.props;
onMouseOver();
- }
+ };
renderChildren() {
const { paused } = this.state;
diff --git a/packages/patternfly-3/patternfly-react/src/components/Toolbar/ToolbarFind.js b/packages/patternfly-3/patternfly-react/src/components/Toolbar/ToolbarFind.js
index 7a81ea1b44e..72f9e606cf5 100644
--- a/packages/patternfly-3/patternfly-react/src/components/Toolbar/ToolbarFind.js
+++ b/packages/patternfly-3/patternfly-react/src/components/Toolbar/ToolbarFind.js
@@ -19,7 +19,7 @@ class ToolbarFind extends React.Component {
if (keyEvent.key === 'Enter' && onEnter) {
onEnter(currentValue);
}
- }
+ };
handleFindNext = () => {
const { currentValue } = this.state;
@@ -28,7 +28,7 @@ class ToolbarFind extends React.Component {
if (onFindNext) {
onFindNext(currentValue);
}
- }
+ };
handleFindPrevious = () => {
const { currentValue } = this.state;
@@ -37,7 +37,7 @@ class ToolbarFind extends React.Component {
if (onFindPrevious) {
onFindPrevious(currentValue);
}
- }
+ };
handleValueChange = event => {
const { onChange } = this.props;
@@ -47,15 +47,15 @@ class ToolbarFind extends React.Component {
if (onChange) {
onChange(event.target.value);
}
- }
+ };
hideDropdown = () => {
this.setState({ dropdownShown: false });
- }
+ };
toggleDropdownShown = () => {
this.setState(prevState => ({ dropdownShown: !prevState.dropdownShown }));
- }
+ };
renderCounts() {
const { currentValue } = this.state;
diff --git a/packages/patternfly-3/patternfly-react/src/components/Toolbar/__mocks__/mockToolbarExample.js b/packages/patternfly-3/patternfly-react/src/components/Toolbar/__mocks__/mockToolbarExample.js
index 0e5585ad349..8fb4f02a42f 100644
--- a/packages/patternfly-3/patternfly-react/src/components/Toolbar/__mocks__/mockToolbarExample.js
+++ b/packages/patternfly-3/patternfly-react/src/components/Toolbar/__mocks__/mockToolbarExample.js
@@ -26,7 +26,7 @@ export class MockToolbarExample extends React.Component {
keyEvent.stopPropagation();
keyEvent.preventDefault();
}
- }
+ };
setViewType(viewType) {
const { onViewChanged } = this.props;
@@ -47,13 +47,13 @@ export class MockToolbarExample extends React.Component {
this.filterAdded(currentFilterType, filterValue);
}
}
- }
+ };
clearFilters = () => {
const { onFiltersChanged } = this.props;
this.setState({ activeFilters: [] });
onFiltersChanged && onFiltersChanged('Filters cleared.');
- }
+ };
filterAdded = (field, value) => {
const { onFiltersChanged } = this.props;
@@ -77,14 +77,14 @@ export class MockToolbarExample extends React.Component {
const activeFilters = [...this.state.activeFilters, { label: filterText }];
this.setState({ activeFilters });
onFiltersChanged && onFiltersChanged(`Filter Added: ${filterText}`);
- }
+ };
filterCategorySelected = category => {
const { filterCategory } = this.state;
if (filterCategory !== category) {
this.setState({ filterCategory: category });
}
- }
+ };
filterValueSelected = filterValue => {
const { currentFilterType, currentValue } = this.state;
@@ -95,7 +95,7 @@ export class MockToolbarExample extends React.Component {
this.filterAdded(currentFilterType, filterValue);
}
}
- }
+ };
removeFilter = filter => {
const { onFiltersChanged } = this.props;
@@ -107,7 +107,7 @@ export class MockToolbarExample extends React.Component {
this.setState({ activeFilters: updated });
}
onFiltersChanged && onFiltersChanged(`Filter Removed: ${filter.label}`);
- }
+ };
selectFilterType = filterType => {
const { currentFilterType } = this.state;
@@ -118,7 +118,7 @@ export class MockToolbarExample extends React.Component {
this.setState({ filterCategory: undefined });
}
}
- }
+ };
toggleCurrentSortDirection = () => {
const { isSortAscending } = this.state;
@@ -126,7 +126,7 @@ export class MockToolbarExample extends React.Component {
this.setState({ isSortAscending: !isSortAscending });
onSortChanged && onSortChanged(`sort ascending: ${!isSortAscending}`);
- }
+ };
updateCurrentSortType = sortType => {
const { currentSortType } = this.state;
@@ -140,11 +140,11 @@ export class MockToolbarExample extends React.Component {
});
}
onSortChanged && onSortChanged(`sort type: ${sortType.title}`);
- }
+ };
updateCurrentValue = event => {
this.setState({ currentValue: event.target.value });
- }
+ };
renderInput() {
const { currentFilterType, currentValue, filterCategory } = this.state;
diff --git a/packages/patternfly-3/patternfly-react/src/components/TreeView/TreeView.js b/packages/patternfly-3/patternfly-react/src/components/TreeView/TreeView.js
index 74b50133226..0abb5006c21 100644
--- a/packages/patternfly-3/patternfly-react/src/components/TreeView/TreeView.js
+++ b/packages/patternfly-3/patternfly-react/src/components/TreeView/TreeView.js
@@ -16,7 +16,7 @@ class TreeView extends React.Component {
onFocus = node => {
this.setState(() => ({ focusedNodeId: node.dataset.id }));
- }
+ };
onKeyDown = event => {
const nodes = this.getVisibleNodes([...this.treeRef.current.getElementsByTagName('li')]);
@@ -33,7 +33,7 @@ class TreeView extends React.Component {
const [lastVisibleNode] = nodes.slice(-1);
lastVisibleNode.focus();
}
- }
+ };
onKeyPress = event => {
const nodes = this.getVisibleNodes([...this.treeRef.current.getElementsByTagName('li')]);
@@ -58,13 +58,13 @@ class TreeView extends React.Component {
if (key === '*') {
this.setState(prevState => ({ expandSiblings: prevState.focusedNodeId }));
}
- }
+ };
getVisibleNodes = nodes => nodes.filter(node => !node.className.match(/node-hidden/));
clearExpandSiblings = () => {
this.setState(() => ({ expandSiblings: '' }));
- }
+ };
treeRef = React.createRef();
diff --git a/packages/patternfly-3/patternfly-react/src/components/TreeView/TreeViewNode.js b/packages/patternfly-3/patternfly-react/src/components/TreeView/TreeViewNode.js
index b513f8c7f2d..c4562eb9d50 100644
--- a/packages/patternfly-3/patternfly-react/src/components/TreeView/TreeViewNode.js
+++ b/packages/patternfly-3/patternfly-react/src/components/TreeView/TreeViewNode.js
@@ -64,17 +64,17 @@ class TreeViewNode extends Component {
e.stopPropagation();
this.handleSelect(e);
}
- }
+ };
onFocus = e => {
e.stopPropagation();
this.props.onFocus(this.nodeRef.current);
this.setState(() => ({ focused: true }));
- }
+ };
onBlur = () => {
this.setState(() => ({ focused: false }));
- }
+ };
handleSelect = e => {
const { node, selectNode } = this.props;
@@ -85,16 +85,16 @@ class TreeViewNode extends Component {
this.nodeRef.current.focus();
selectNode(node);
}
- }
+ };
toggleExpand = e => {
e.stopPropagation();
this.toggleExpandedState();
- }
+ };
toggleExpandedState = () => {
this.setState(prevState => ({ expanded: !prevState.expanded }));
- }
+ };
nodeRef = React.createRef();
diff --git a/packages/patternfly-3/patternfly-react/src/components/TreeView/__mocks__/MockTreeView.js b/packages/patternfly-3/patternfly-react/src/components/TreeView/__mocks__/MockTreeView.js
index 677aa85ef5f..8c9400277d7 100644
--- a/packages/patternfly-3/patternfly-react/src/components/TreeView/__mocks__/MockTreeView.js
+++ b/packages/patternfly-3/patternfly-react/src/components/TreeView/__mocks__/MockTreeView.js
@@ -27,13 +27,13 @@ export class MockTreeView extends React.Component {
return { ...node, selected: false };
}
return node;
- })
+ });
selectNode = selectedNode => {
this.setState(prevState => ({
nodes: this.nodeSelector(prevState.nodes, selectedNode)
}));
- }
+ };
render() {
const { nodes } = this.state;
diff --git a/packages/patternfly-3/patternfly-react/src/components/TypeAheadSelect/AsyncTypeAheadSelect.js b/packages/patternfly-3/patternfly-react/src/components/TypeAheadSelect/AsyncTypeAheadSelect.js
index 53d17c9505c..766f4124607 100644
--- a/packages/patternfly-3/patternfly-react/src/components/TypeAheadSelect/AsyncTypeAheadSelect.js
+++ b/packages/patternfly-3/patternfly-react/src/components/TypeAheadSelect/AsyncTypeAheadSelect.js
@@ -16,7 +16,7 @@ class AsyncTypeAheadSelect extends React.Component {
handleSearch = query => {
this.onSearchStart();
Promise.resolve(this.props.onSearch(query)).then(options => this.onSearchEnd(options));
- }
+ };
render() {
const { innerRef, ...props } = this.props;
diff --git a/packages/patternfly-3/patternfly-react/src/components/TypeAheadSelect/mock.js b/packages/patternfly-3/patternfly-react/src/components/TypeAheadSelect/mock.js
index 14dcfbf6514..63fd6ee93d8 100644
--- a/packages/patternfly-3/patternfly-react/src/components/TypeAheadSelect/mock.js
+++ b/packages/patternfly-3/patternfly-react/src/components/TypeAheadSelect/mock.js
@@ -185,7 +185,7 @@ const mockData = {
'Tajikistan',
'Tanzania',
'Thailand',
- 'Timor L\'Este',
+ "Timor L'Este",
'Togo',
'Tonga',
'Trinidad & Tobago',
diff --git a/packages/patternfly-3/patternfly-react/src/components/VerticalNav/VerticalNav.js b/packages/patternfly-3/patternfly-react/src/components/VerticalNav/VerticalNav.js
index 393fd9626b6..a85a3477277 100644
--- a/packages/patternfly-3/patternfly-react/src/components/VerticalNav/VerticalNav.js
+++ b/packages/patternfly-3/patternfly-react/src/components/VerticalNav/VerticalNav.js
@@ -63,29 +63,29 @@ class BaseVerticalNav extends React.Component {
const { onLayoutChange, setControlledState } = this.props;
setControlledState({ isMobile: newLayout === 'mobile' });
onLayoutChange && onLayoutChange(newLayout);
- }
+ };
setActivePath = activePath => {
if (!this.state.controlledActivePath) {
this.props.setControlledState({ activePath });
}
- }
+ };
setControlledActivePath = controlledActivePath => {
this.setState({ controlledActivePath });
- }
+ };
setControlledHoverPath = controlledHoverPath => {
this.setState({ controlledHoverPath });
- }
+ };
setControlledMobilePath = controlledMobilePath => {
this.setState({ controlledMobilePath });
- }
+ };
setControlledPinnedPath = controlledPinnedPath => {
this.setState({ controlledPinnedPath });
- }
+ };
setHoverPath = hoverPath => {
if (!this.state.controlledHoverPath) {
@@ -94,56 +94,56 @@ class BaseVerticalNav extends React.Component {
...(hoverPath === null ? { showMobileNav: false } : {})
});
}
- }
+ };
setMobilePath = mobilePath => {
if (!this.state.controlledMobilePath) {
this.props.setControlledState({ mobilePath });
}
- }
+ };
setPinnedPath = pinnedPath => {
if (!this.state.controlledPinnedPath) {
this.props.setControlledState({ pinnedPath });
}
- }
+ };
hoverTimer = new Timer();
clearBodyClasses = () => {
if (this.props.dynamicBodyClasses) {
setBodyClassIf(false, 'collapsed-nav');
setBodyClassIf(false, 'hidden-nav');
}
- }
+ };
collapseMenu = () => {
const { onCollapse, setControlledState } = this.props;
setControlledState({ navCollapsed: true });
onCollapse && onCollapse();
- }
+ };
expandMenu = () => {
const { onExpand, setControlledState } = this.props;
setControlledState({ navCollapsed: false });
onExpand && onExpand();
- }
+ };
forceHideSecondaryMenu = () => {
this.setState({ forceHidden: true }); // eslint-disable-line react/no-unused-state
setTimeout(() => {
this.setState({ forceHidden: false }); // eslint-disable-line react/no-unused-state
}, 500);
- }
+ };
handleBodyClick = () => {
// Clear hover state on body click. Helps especially when using blurDisabled prop.
this.setHoverPath(null);
- }
+ };
navigateToItem = item => {
const { onNavigate } = this.props;
onNavigate(item);
// Note: This should become router-aware later on.
- }
+ };
updateBodyClasses = () => {
// Note: Updating the body element classes from here like this is a hacky, non-react-y pattern.
@@ -154,7 +154,7 @@ class BaseVerticalNav extends React.Component {
setBodyClassIf(!isMobile && collapsed, 'collapsed-nav');
setBodyClassIf(isMobile, 'hidden-nav');
}
- }
+ };
updateNavOnItemBlur = (primary, secondary, tertiary, idPath, parentPath, noDelay, callback) => {
const { hoverPath, blurDelay, blurDisabled, setControlledState } = this.props;
@@ -181,7 +181,7 @@ class BaseVerticalNav extends React.Component {
}
}
}
- }
+ };
updateNavOnItemClick = (primary, secondary, tertiary, idPath, parentPath) => {
const { onItemClick, hoverPath, hoverDisabled, isMobile } = this.props;
@@ -201,7 +201,7 @@ class BaseVerticalNav extends React.Component {
this.navigateToItem(item);
}
onItemClick && onItemClick(primary, secondary, tertiary);
- }
+ };
updateNavOnItemHover = (primary, secondary, tertiary, idPath, parentPath, callback) => {
const { onItemHover, hoverPath, hoverDelay, hoverDisabled, isMobile } = this.props;
@@ -221,7 +221,7 @@ class BaseVerticalNav extends React.Component {
}, hoverDelay);
}
}
- }
+ };
updateNavOnMenuToggleClick = () => {
const { onMenuToggleClick, isMobile, showMobileNav, navCollapsed, setControlledState } = this.props;
@@ -238,21 +238,21 @@ class BaseVerticalNav extends React.Component {
this.collapseMenu();
}
onMenuToggleClick && onMenuToggleClick();
- }
+ };
updateNavOnMobileSelection = (primary, secondary, tertiary) => {
const { onMobileSelection } = this.props;
// All the behavior here is handled by mobilePath and setMobilePath,
// but we still make a callback available here.
onMobileSelection && onMobileSelection(primary, secondary, tertiary);
- }
+ };
updateNavOnPin = (item, depth, pinned) => {
const { onItemPin, isMobile } = this.props;
if (!isMobile) {
onItemPin && onItemPin(item, depth, pinned);
}
- }
+ };
render() {
const { items, children } = this.props;
diff --git a/packages/patternfly-3/patternfly-react/src/components/VerticalNav/VerticalNav.stories.js b/packages/patternfly-3/patternfly-react/src/components/VerticalNav/VerticalNav.stories.js
index 9f8447198fe..9ef30c6c463 100644
--- a/packages/patternfly-3/patternfly-react/src/components/VerticalNav/VerticalNav.stories.js
+++ b/packages/patternfly-3/patternfly-react/src/components/VerticalNav/VerticalNav.stories.js
@@ -215,7 +215,8 @@ stories.add(
'Custom Masthead',
withInfo({
propTablesExclude: [MockFixedLayout, MockIconBarChildren, Icon, MenuItem, Dropdown, Dropdown.Menu, Dropdown.Toggle],
- text: 'Example using the **Masthead**, **Brand** and **IconBar** components with images. (items from \'Items as Objects\').'
+ text:
+ "Example using the **Masthead**, **Brand** and **IconBar** components with images. (items from 'Items as Objects')."
})(() => (
tag that will be included in an external svg. Set standalone to false to
@@ -360,7 +357,7 @@ export const Chart: React.FunctionComponent = ({
ariaDesc,
ariaTitle,
children,
- legendComponent = = ({
...rest
}: ChartProps) => {
const defaultPadding = {
- bottom: getPaddingForSide('bottom', padding, theme.chart.padding),
+ bottom: getPaddingForSide('bottom', padding, theme.chart.padding),
left: getPaddingForSide('left', padding, theme.chart.padding),
right: getPaddingForSide('right', padding, theme.chart.padding),
- top: getPaddingForSide('top', padding, theme.chart.padding),
+ top: getPaddingForSide('top', padding, theme.chart.padding)
};
// Clone so users can override container props
@@ -389,7 +386,7 @@ export const Chart: React.FunctionComponent = ({
title: ariaTitle,
theme,
...containerComponent.props,
- className: getClassName({className: containerComponent.props.className}) // Override VictoryContainer class name
+ className: getClassName({ className: containerComponent.props.className }) // Override VictoryContainer class name
});
const legend = React.cloneElement(legendComponent, {
@@ -412,7 +409,7 @@ export const Chart: React.FunctionComponent = ({
// Adjust for axis label
React.Children.toArray(children).map((child: any) => {
if (child.type.role === 'axis' && child.props.label && !child.props.dependentAxis) {
- xAxisLabelHeight = getLabelTextSize({text: child.props.label, theme}).height + 10;
+ xAxisLabelHeight = getLabelTextSize({ text: child.props.label, theme }).height + 10;
legendTitleHeight = 0;
}
});
diff --git a/packages/patternfly-4/react-charts/src/components/ChartArea/ChartArea.test.tsx b/packages/patternfly-4/react-charts/src/components/ChartArea/ChartArea.test.tsx
index 1fb3b2b5cec..864a3e8bccf 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartArea/ChartArea.test.tsx
+++ b/packages/patternfly-4/react-charts/src/components/ChartArea/ChartArea.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { shallow } from 'enzyme';
import { ChartArea } from '../ChartArea';
-Object.values([true, false]).forEach((isRead) => {
+Object.values([true, false]).forEach(isRead => {
test('ChartArea', () => {
const view = shallow( = ({
...containerComponent.props
});
return tag that will be included in an external svg. Set standalone to false to
@@ -310,22 +313,13 @@ export interface ChartAxisProps extends VictoryAxisProps {
axis?: React.CSSProperties;
axisLabel?: React.CSSProperties;
grid?: {
- [K in keyof React.CSSProperties]:
- | string
- | number
- | ((tick?: any) => string | number)
+ [K in keyof React.CSSProperties]: string | number | ((tick?: any) => string | number);
};
ticks?: {
- [K in keyof React.CSSProperties]:
- | string
- | number
- | ((tick?: any) => string | number)
+ [K in keyof React.CSSProperties]: string | number | ((tick?: any) => string | number);
};
tickLabels?: {
- [K in keyof React.CSSProperties]:
- | string
- | number
- | ((tick?: any) => string | number)
+ [K in keyof React.CSSProperties]: string | number | ((tick?: any) => string | number);
};
};
/**
diff --git a/packages/patternfly-4/react-charts/src/components/ChartBar/ChartBar.test.tsx b/packages/patternfly-4/react-charts/src/components/ChartBar/ChartBar.test.tsx
index 48237775359..e0a4d6fb0b6 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartBar/ChartBar.test.tsx
+++ b/packages/patternfly-4/react-charts/src/components/ChartBar/ChartBar.test.tsx
@@ -4,7 +4,7 @@ import { Chart } from '../Chart';
import { ChartBar } from './ChartBar';
import { ChartGroup } from '../ChartGroup';
-Object.values([true, false]).forEach((isRead) => {
+Object.values([true, false]).forEach(isRead => {
test('ChartBar', () => {
const view = shallow( = ({
themeColor,
themeVariant,
- // destructure last
+ // destructure last
theme = getTheme(themeColor, themeVariant),
...rest
}: ChartBarProps) => {
@@ -415,7 +419,7 @@ export const ChartBar: React.FunctionComponent = ({
...containerComponent.props
});
return `${datum.name}: ${datum.y}`}
- maxDomain={{y: 100}}
+ maxDomain={{ y: 100 }}
primarySegmentedMeasureData={[{ name: 'Measure', y: 50 }]}
qualitativeRangeData={[{ name: 'Range', y: 50 }, { name: 'Range', y: 75 }]}
width={450}
diff --git a/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBullet.tsx b/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBullet.tsx
index e004ca84467..683616b59b5 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBullet.tsx
+++ b/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBullet.tsx
@@ -1,11 +1,6 @@
import * as React from 'react';
import hoistNonReactStatics from 'hoist-non-react-statics';
-import {
- DataGetterPropType,
- DomainPropType,
- PaddingProps,
- VictoryChart,
-} from 'victory';
+import { DataGetterPropType, DomainPropType, PaddingProps, VictoryChart } from 'victory';
import {
getComparativeMeasureErrorWidth,
getComparativeMeasureWidth,
@@ -243,7 +238,7 @@ export interface ChartBulletProps {
*
* Note: The x domain is expected to be `x: 2` in order to position all measures properly
*/
- maxDomain?: number | { x?: number, y?: number };
+ maxDomain?: number | { x?: number; y?: number };
/**
* The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum
* domain of a chart is static, while the maximum value depends on data or other variable information. If the domain
@@ -260,7 +255,7 @@ export interface ChartBulletProps {
*
* Note: The x domain is expected to be `x: 0` in order to position all measures properly
*/
- minDomain?: number | { x?: number, y?: number };
+ minDomain?: number | { x?: number; y?: number };
/**
* The padding props specifies the amount of padding in number of pixels between
* the edge of the chart and any rendered child components. This prop can be given
@@ -540,10 +535,10 @@ export const ChartBullet: React.FunctionComponent = ({
};
const defaultPadding = {
- bottom: getPaddingForSide('bottom', padding, theme.chart.padding),
+ bottom: getPaddingForSide('bottom', padding, theme.chart.padding),
left: getPaddingForSide('left', padding, theme.chart.padding),
right: getPaddingForSide('right', padding, theme.chart.padding),
- top: getPaddingForSide('top', padding, theme.chart.padding),
+ top: getPaddingForSide('top', padding, theme.chart.padding)
};
// Bullet group title
@@ -574,7 +569,7 @@ export const ChartBullet: React.FunctionComponent = ({
// Comparative error measure
const comparativeErrorMeasure = React.cloneElement(comparativeErrorMeasureComponent, {
allowTooltip,
- barWidth: getComparativeMeasureErrorWidth({height: chartSize.height, horizontal, width: chartSize.width}),
+ barWidth: getComparativeMeasureErrorWidth({ height: chartSize.height, horizontal, width: chartSize.width }),
constrainToVisibleArea,
data: comparativeErrorMeasureData,
domain,
@@ -592,7 +587,7 @@ export const ChartBullet: React.FunctionComponent = ({
// Comparative warning measure
const comparativeWarningMeasure = React.cloneElement(comparativeWarningMeasureComponent, {
allowTooltip,
- barWidth: getComparativeMeasureWarningWidth({height: chartSize.height, horizontal, width: chartSize.width}),
+ barWidth: getComparativeMeasureWarningWidth({ height: chartSize.height, horizontal, width: chartSize.width }),
constrainToVisibleArea,
data: comparativeWarningMeasureData,
domain,
@@ -609,8 +604,8 @@ export const ChartBullet: React.FunctionComponent = ({
// Comparative zero measure
const comparativeZeroMeasure = React.cloneElement(comparativeZeroMeasureComponent, {
- barWidth: getComparativeMeasureWidth({height: chartSize.height, horizontal, width: chartSize.width}),
- data: [{y: 0}],
+ barWidth: getComparativeMeasureWidth({ height: chartSize.height, horizontal, width: chartSize.width }),
+ data: [{ y: 0 }],
domain,
height: chartSize.height,
horizontal,
@@ -618,7 +613,7 @@ export const ChartBullet: React.FunctionComponent = ({
standalone: false,
width: chartSize.width,
...comparativeZeroMeasureComponent.props
- })
+ });
// Legend
const legend = React.cloneElement(legendComponent, {
@@ -648,7 +643,7 @@ export const ChartBullet: React.FunctionComponent = ({
labelComponent: allowTooltip ? = ({
const primarySegmentedMeasure = React.cloneElement(primarySegmentedMeasureComponent, {
allowTooltip,
constrainToVisibleArea,
- barWidth: getPrimarySegmentedMeasureWidth({height: chartSize.height, horizontal, width: chartSize.width}),
+ barWidth: getPrimarySegmentedMeasureWidth({ height: chartSize.height, horizontal, width: chartSize.width }),
data: primarySegmentedMeasureData,
domain,
height: chartSize.height,
@@ -682,7 +677,7 @@ export const ChartBullet: React.FunctionComponent = ({
const qualitativeRange = React.cloneElement(qualitativeRangeComponent, {
allowTooltip,
constrainToVisibleArea,
- barWidth: getQualitativeRangeBarWidth({height: chartSize.height, horizontal, width: chartSize.width}),
+ barWidth: getQualitativeRangeBarWidth({ height: chartSize.height, horizontal, width: chartSize.width }),
data: qualitativeRangeData,
domain,
height: chartSize.height,
@@ -710,7 +705,7 @@ export const ChartBullet: React.FunctionComponent = ({
range = maxVal - minVal;
}
const tickInterval = range / (ChartBulletStyles.axisTickCount - 1);
- for (let i = minVal; i < maxVal;) {
+ for (let i = minVal; i < maxVal; ) {
i += tickInterval;
tickValues.push(Math.ceil(i));
}
@@ -728,12 +723,16 @@ export const ChartBullet: React.FunctionComponent = ({
// Adjust for padding
if (legendPosition === ChartLegendPosition.bottom) {
dy = horizontal
- ? defaultPadding.top * .5 + (defaultPadding.bottom * .5 - (defaultPadding.bottom)) - 25
- : title ? -defaultPadding.bottom + 60 : -defaultPadding.bottom;
+ ? defaultPadding.top * 0.5 + (defaultPadding.bottom * 0.5 - defaultPadding.bottom) - 25
+ : title
+ ? -defaultPadding.bottom + 60
+ : -defaultPadding.bottom;
} else if (legendPosition === ChartLegendPosition.bottomLeft) {
dy = horizontal
- ? defaultPadding.top * .5 + (defaultPadding.bottom * .5 - (defaultPadding.bottom)) - 25
- : title ? -defaultPadding.bottom + 60 : -defaultPadding.bottom;
+ ? defaultPadding.top * 0.5 + (defaultPadding.bottom * 0.5 - defaultPadding.bottom) - 25
+ : title
+ ? -defaultPadding.bottom + 60
+ : -defaultPadding.bottom;
dx = -10;
}
return (
@@ -755,12 +754,12 @@ export const ChartBullet: React.FunctionComponent = ({
// Returns comparative zero measure
const getComparativeZeroMeasure = () => {
const _domain: any = domain;
- const low = Array.isArray(_domain)
- ? _domain[0]
- : _domain.y && Array.isArray(_domain.y) ? _domain.y[0] : 0;
+ const low = Array.isArray(_domain) ? _domain[0] : _domain.y && Array.isArray(_domain.y) ? _domain.y[0] : 0;
const high = Array.isArray(_domain)
? _domain[_domain.length - 1]
- : _domain.y && Array.isArray(_domain.y) ? _domain.y[_domain.y.length - 1] : 0;
+ : _domain.y && Array.isArray(_domain.y)
+ ? _domain.y[_domain.y.length - 1]
+ : 0;
if (low < 0 && high > 0) {
return comparativeZeroMeasure;
@@ -771,14 +770,16 @@ export const ChartBullet: React.FunctionComponent = ({
// Axis component for custom tick values
const axis = React.cloneElement(axisComponent, {
dependentAxis: horizontal ? false : true,
- domain: !horizontal ? domain : {
- x: (domain as any).y,
- y: (domain as any).x
- },
+ domain: !horizontal
+ ? domain
+ : {
+ x: (domain as any).y,
+ y: (domain as any).x
+ },
height: chartSize.height,
// Adjust for padding
- offsetX: !horizontal ? defaultPadding.left * .5 + (defaultPadding.right * .5 - (defaultPadding.right - 55)) : 0,
- offsetY: horizontal ? 80 - defaultPadding.top * .5 + (defaultPadding.bottom * .5 - 25) : 0,
+ offsetX: !horizontal ? defaultPadding.left * 0.5 + (defaultPadding.right * 0.5 - (defaultPadding.right - 55)) : 0,
+ offsetY: horizontal ? 80 - defaultPadding.top * 0.5 + (defaultPadding.bottom * 0.5 - 25) : 0,
padding,
standalone: false,
tickCount: ChartBulletStyles.axisTickCount,
@@ -803,19 +804,11 @@ export const ChartBullet: React.FunctionComponent = ({
);
return standalone ? (
-
+
{bulletChart}
) : (
-
- {bulletChart}
-
+ {bulletChart}
);
};
diff --git a/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletComparativeErrorMeasure.test.tsx b/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletComparativeErrorMeasure.test.tsx
index 70ec37eef46..b68c2fe56e7 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletComparativeErrorMeasure.test.tsx
+++ b/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletComparativeErrorMeasure.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { shallow } from 'enzyme';
import { ChartBulletComparativeErrorMeasure } from './ChartBulletComparativeErrorMeasure';
-Object.values([true, false]).forEach((isRead) => {
+Object.values([true, false]).forEach(isRead => {
test('ChartBulletComparativeErrorMeasure', () => {
const view = shallow(
) : (
-
- {measure}
-
+ {measure}
);
};
diff --git a/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletComparativeMeasure.test.tsx b/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletComparativeMeasure.test.tsx
index 15affe868a5..d65dd925056 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletComparativeMeasure.test.tsx
+++ b/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletComparativeMeasure.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { shallow } from 'enzyme';
import { ChartBulletComparativeMeasure } from './ChartBulletComparativeMeasure';
-Object.values([true, false]).forEach((isRead) => {
+Object.values([true, false]).forEach(isRead => {
test('ChartBulletComparativeMeasure', () => {
const view = shallow( {
if (!horizontal) {
return 0;
}
- const result = (typeof barWidth === 'function') ? barWidth(data, false) : barWidth;
+ const result = typeof barWidth === 'function' ? barWidth(data, false) : barWidth;
return -(result / 2);
},
orientation: 'top',
@@ -219,7 +213,7 @@ export const ChartBulletComparativeMeasure: React.FunctionComponent {
return React.cloneElement(measureComponent, {
barWidth,
- data: [{...dataPoint}],
+ data: [{ ...dataPoint }],
domain,
height,
horizontal,
@@ -239,9 +233,7 @@ export const ChartBulletComparativeMeasure: React.FunctionComponent
) : (
-
- {measure}
-
+ {measure}
);
};
diff --git a/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletComparativeWarningMeasure.test.tsx b/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletComparativeWarningMeasure.test.tsx
index ce00bdfb564..f87bf35ce3e 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletComparativeWarningMeasure.test.tsx
+++ b/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletComparativeWarningMeasure.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { shallow } from 'enzyme';
import { ChartBulletComparativeWarningMeasure } from './ChartBulletComparativeWarningMeasure';
-Object.values([true, false]).forEach((isRead) => {
+Object.values([true, false]).forEach(isRead => {
test('ChartBulletComparativeZeroMeasure', () => {
const view = shallow( = ({
+export const ChartBulletComparativeWarningMeasure: React.FunctionComponent<
+ ChartBulletComparativeWarningMeasureProps
+> = ({
allowTooltip = true,
ariaDesc,
ariaTitle,
@@ -211,9 +207,7 @@ export const ChartBulletComparativeWarningMeasure: React.FunctionComponent
) : (
-
- {measure}
-
+ {measure}
);
};
diff --git a/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletGroupTitle.test.tsx b/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletGroupTitle.test.tsx
index 3eab6fe3dbb..700d3873f1a 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletGroupTitle.test.tsx
+++ b/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletGroupTitle.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { shallow } from 'enzyme';
import { ChartBulletGroupTitle } from './ChartBulletGroupTitle';
-Object.values([true, false]).forEach((isRead) => {
+Object.values([true, false]).forEach(isRead => {
test('ChartBulletGroupTitle', () => {
const view = shallow( {
const defaultPadding = {
- bottom: getPaddingForSide('bottom', padding, theme.chart.padding),
+ bottom: getPaddingForSide('bottom', padding, theme.chart.padding),
left: getPaddingForSide('left', padding, theme.chart.padding),
right: getPaddingForSide('right', padding, theme.chart.padding),
- top: getPaddingForSide('top', padding, theme.chart.padding),
+ top: getPaddingForSide('top', padding, theme.chart.padding)
};
const labelPadding = {
- bottom: getPaddingForSide('bottom', padding, theme.legend.style.labels.padding),
+ bottom: getPaddingForSide('bottom', padding, theme.legend.style.labels.padding),
left: getPaddingForSide('left', padding, theme.legend.style.labels.padding),
right: getPaddingForSide('right', padding, theme.legend.style.labels.padding),
- top: getPaddingForSide('top', padding, theme.legend.style.labels.padding),
+ top: getPaddingForSide('top', padding, theme.legend.style.labels.padding)
};
// Horizontal divider to render under the group title
const getDivider = () => {
- const titleSize = getLabelTextSize({text: title, theme});
- const subTitleSize = getLabelTextSize({text: subTitle, theme});
- const dy = title && subTitle
- ? titleSize.height + subTitleSize.height + labelPadding.top + labelPadding.bottom
- : titleSize.height + labelPadding.top + labelPadding.bottom;
+ const titleSize = getLabelTextSize({ text: title, theme });
+ const subTitleSize = getLabelTextSize({ text: subTitle, theme });
+ const dy =
+ title && subTitle
+ ? titleSize.height + subTitleSize.height + labelPadding.top + labelPadding.bottom
+ : titleSize.height + labelPadding.top + labelPadding.bottom;
return React.cloneElement(dividerComponent, {
x1: defaultPadding.left,
@@ -166,7 +170,7 @@ export const ChartBulletGroupTitle: React.FunctionComponent
- {getTitle()}
- {getDivider()}
-
- )
+ const groupTitle = Boolean(title) && (
+
+ {getTitle()}
+ {getDivider()}
+
);
return standalone ? (
@@ -198,8 +200,6 @@ export const ChartBulletGroupTitle: React.FunctionComponent
) : (
-
- {groupTitle}
-
+ {groupTitle}
);
};
diff --git a/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletPrimaryDotMeasure.test.tsx b/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletPrimaryDotMeasure.test.tsx
index 297eecccbed..a8fedaeb9c9 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletPrimaryDotMeasure.test.tsx
+++ b/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletPrimaryDotMeasure.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { shallow } from 'enzyme';
import { ChartBulletPrimaryDotMeasure } from './ChartBulletPrimaryDotMeasure';
-Object.values([true, false]).forEach((isRead) => {
+Object.values([true, false]).forEach(isRead => {
test('ChartBulletPrimaryDotMeasure', () => {
const view = shallow( {
return React.cloneElement(measureComponent, {
- data: [{...dataPoint}],
+ data: [{ ...dataPoint }],
domain,
height,
horizontal,
@@ -242,9 +237,7 @@ export const ChartBulletPrimaryDotMeasure: React.FunctionComponent
) : (
-
- {measure}
-
+ {measure}
);
};
diff --git a/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletPrimarySegmentedMeasure.test.tsx b/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletPrimarySegmentedMeasure.test.tsx
index b79dbdbd416..82b8c90bbc2 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletPrimarySegmentedMeasure.test.tsx
+++ b/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletPrimarySegmentedMeasure.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { shallow } from 'enzyme';
import { ChartBulletPrimarySegmentedMeasure } from './ChartBulletPrimarySegmentedMeasure';
-Object.values([true, false]).forEach((isRead) => {
+Object.values([true, false]).forEach(isRead => {
test('ChartBulletPrimarySegmentedMeasure', () => {
const view = shallow( {
if (!horizontal) {
return 0;
}
- const result = (typeof barWidth === 'function') ? barWidth(data, false) : barWidth;
+ const result = typeof barWidth === 'function' ? barWidth(data, false) : barWidth;
return -(result / 2);
},
orientation: 'top',
@@ -244,7 +238,7 @@ export const ChartBulletPrimarySegmentedMeasure: React.FunctionComponent {
return React.cloneElement(measureComponent, {
barWidth,
- data: [{...dataPoint}],
+ data: [{ ...dataPoint }],
domain,
height,
horizontal,
@@ -269,9 +263,7 @@ export const ChartBulletPrimarySegmentedMeasure: React.FunctionComponent
) : (
-
- {measure}
-
+ {measure}
);
};
diff --git a/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletQualitativeRange.test.tsx b/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletQualitativeRange.test.tsx
index 19d6251f36e..d34ce604ec8 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletQualitativeRange.test.tsx
+++ b/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletQualitativeRange.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { shallow } from 'enzyme';
import { ChartBulletQualitativeRange } from './ChartBulletQualitativeRange';
-Object.values([true, false]).forEach((isRead) => {
+Object.values([true, false]).forEach(isRead => {
test('ChartBulletQualitativeRange', () => {
const view = shallow( {
if (!horizontal) {
return 0;
}
- const result = (typeof barWidth === 'function') ? barWidth(data, false) : barWidth;
+ const result = typeof barWidth === 'function' ? barWidth(data, false) : barWidth;
return -(result / 2);
},
orientation: 'top',
@@ -255,7 +249,7 @@ export const ChartBulletQualitativeRange: React.FunctionComponent {
return React.cloneElement(measureComponent, {
barWidth,
- data: [{...dataPoint}],
+ data: [{ ...dataPoint }],
domain,
height,
horizontal,
@@ -280,9 +274,7 @@ export const ChartBulletQualitativeRange: React.FunctionComponent
) : (
-
- {measure}
-
+ {measure}
);
};
diff --git a/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletTitle.test.tsx b/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletTitle.test.tsx
index 1852fc9f663..58d66cd4dc1 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletTitle.test.tsx
+++ b/packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBulletTitle.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { shallow } from 'enzyme';
import { ChartBulletTitle } from './ChartBulletTitle';
-Object.values([true, false]).forEach((isRead) => {
+Object.values([true, false]).forEach(isRead => {
test('ChartBulletTitle', () => {
const view = shallow( =
};
const defaultPadding = {
- bottom: getPaddingForSide('bottom', padding, theme.chart.padding),
+ bottom: getPaddingForSide('bottom', padding, theme.chart.padding),
left: getPaddingForSide('left', padding, theme.chart.padding),
right: getPaddingForSide('right', padding, theme.chart.padding),
- top: getPaddingForSide('top', padding, theme.chart.padding),
+ top: getPaddingForSide('top', padding, theme.chart.padding)
};
// Returns title
@@ -168,7 +165,7 @@ export const ChartBulletTitle: React.FunctionComponent =
// The x and y calculations below are used to adjust the position of the title, based on padding and scale.
// This ensures that when padding is adjusted, the title moves along with the chart's position.
return React.cloneElement(titleComponent, {
- ...showBoth && { capHeight },
+ ...(showBoth && { capHeight }),
style: [ChartBulletStyles.label.title, ChartBulletStyles.label.subTitle],
text: showBoth ? [title, subTitle] : title,
textAnchor: labelPosition === 'top-left' ? 'start' : horizontal ? 'end' : 'middle',
@@ -176,24 +173,30 @@ export const ChartBulletTitle: React.FunctionComponent =
// Adjust for padding
x: horizontal
? getBulletLabelX({
- chartWidth: chartSize.width,
- dx: labelPosition === 'top-left'
- ? defaultPadding.left
- : defaultPadding.left - ChartCommonStyles.label.margin * 1.75,
- labelPosition: 'left', // skip 'bottom'
- legendPosition,
- svgWidth: width
- })
- : defaultPadding.left * .5 + (defaultPadding.right * .5 - (defaultPadding.right - 50)) +
+ chartWidth: chartSize.width,
+ dx:
+ labelPosition === 'top-left'
+ ? defaultPadding.left
+ : defaultPadding.left - ChartCommonStyles.label.margin * 1.75,
+ labelPosition: 'left', // skip 'bottom'
+ legendPosition,
+ svgWidth: width
+ })
+ : defaultPadding.left * 0.5 +
+ (defaultPadding.right * 0.5 - (defaultPadding.right - 50)) +
ChartBulletStyles.qualitativeRangeWidth / 2,
y: getBulletLabelY({
chartHeight: chartSize.height,
// Adjust for padding
- dy: labelPosition === 'top-left'
- ? defaultPadding.top * .5 + (defaultPadding.bottom * .5 - (defaultPadding.bottom)) + 58 -
- ChartCommonStyles.legend.margin + (showBoth ? 0 : 1)
- : horizontal
- ? defaultPadding.top * .5 + (defaultPadding.bottom * .5 - (defaultPadding.bottom))
+ dy:
+ labelPosition === 'top-left'
+ ? defaultPadding.top * 0.5 +
+ (defaultPadding.bottom * 0.5 - defaultPadding.bottom) +
+ 58 -
+ ChartCommonStyles.legend.margin +
+ (showBoth ? 0 : 1)
+ : horizontal
+ ? defaultPadding.top * 0.5 + (defaultPadding.bottom * 0.5 - defaultPadding.bottom)
: ChartCommonStyles.legend.margin * 2 - defaultPadding.bottom,
labelPosition
}),
@@ -206,8 +209,6 @@ export const ChartBulletTitle: React.FunctionComponent =
{getTitle()}
) : (
-
- {getTitle()}
-
+ {getTitle()}
);
};
diff --git a/packages/patternfly-4/react-charts/src/components/ChartBullet/utils/chart-bullet-data.ts b/packages/patternfly-4/react-charts/src/components/ChartBullet/utils/chart-bullet-data.ts
index 6ac6b8a7294..c16d8226d2b 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartBullet/utils/chart-bullet-data.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartBullet/utils/chart-bullet-data.ts
@@ -51,12 +51,12 @@ export const getComparativeMeasureData = ({
}: ChartBulletDataInterface) => {
const datum: any[] = [];
- Data.formatData(data, {y}, ['y']).forEach(((dataPoint: any, index: number) => {
+ Data.formatData(data, { y }, ['y']).forEach((dataPoint: any, index: number) => {
datum.push({
...dataPoint,
_index: index // Save to sync legend color
});
- }));
+ });
const computedData = datum.map((dataPoint: any, index: number) => {
return {
@@ -126,7 +126,7 @@ export const getPrimarySegmentedMeasureData = ({
const negativeDatum: any[] = [];
const positiveDatum: any[] = [];
- Data.formatData(data, {y, y0}, ['y', 'y0']).forEach(((dataPoint: any, index: number) => {
+ Data.formatData(data, { y, y0 }, ['y', 'y0']).forEach((dataPoint: any, index: number) => {
if (dataPoint._y < 0) {
negativeDatum.push({
...dataPoint,
@@ -138,11 +138,12 @@ export const getPrimarySegmentedMeasureData = ({
_index: index // Save to sync legend color
});
}
- }));
+ });
// Instead of relying on colorScale, colors must be added to each measure in ascending order
- const negativeComputedData = negativeDatum.sort((a: any, b: any) => b._y - a._y).
- map((dataPoint: any, index: number) => {
+ const negativeComputedData = negativeDatum
+ .sort((a: any, b: any) => b._y - a._y)
+ .map((dataPoint: any, index: number) => {
return {
...dataPoint,
x: 1,
@@ -152,11 +153,13 @@ export const getPrimarySegmentedMeasureData = ({
: negativeMeasureTheme.group.colorScale[index % theme.group.colorScale.length]
};
// Sort descending so largest bar is appears behind others
- }).reverse();
+ })
+ .reverse();
// Instead of relying on colorScale, colors must be added to each measure in ascending order
- const positiveComputedData = positiveDatum.sort((a: any, b: any) => a._y - b._y).
- map((dataPoint: any, index: number) => {
+ const positiveComputedData = positiveDatum
+ .sort((a: any, b: any) => a._y - b._y)
+ .map((dataPoint: any, index: number) => {
return {
...dataPoint,
x: 1,
@@ -166,12 +169,10 @@ export const getPrimarySegmentedMeasureData = ({
: theme.group.colorScale[index % theme.group.colorScale.length]
};
// Sort descending so largest bar is appears behind others
- }).reverse();
+ })
+ .reverse();
- return [
- ...negativeComputedData,
- ...positiveComputedData
- ];
+ return [...negativeComputedData, ...positiveComputedData];
};
export const getQualitativeRangeData = ({
@@ -187,15 +188,16 @@ export const getQualitativeRangeData = ({
}: ChartBulletDataInterface) => {
const datum: any[] = [];
- Data.formatData(data, {y, y0}, ['y', 'y0']).forEach(((dataPoint: any, index: number) => {
+ Data.formatData(data, { y, y0 }, ['y', 'y0']).forEach((dataPoint: any, index: number) => {
datum.push({
...dataPoint,
_index: index // Save to sync legend color
});
- }));
+ });
- const computedData = datum.sort((a: any, b: any) => invert ? b._y - a._y : a._y - b._y).
- map((dataPoint: any, index: number) => {
+ const computedData = datum
+ .sort((a: any, b: any) => (invert ? b._y - a._y : a._y - b._y))
+ .map((dataPoint: any, index: number) => {
return {
...dataPoint,
x: 1,
@@ -204,7 +206,8 @@ export const getQualitativeRangeData = ({
_color: theme.group.colorScale[index % theme.group.colorScale.length]
};
// Sort descending so largest bar is appears behind others
- }).reverse();
+ })
+ .reverse();
return computedData;
};
diff --git a/packages/patternfly-4/react-charts/src/components/ChartBullet/utils/chart-bullet-domain.ts b/packages/patternfly-4/react-charts/src/components/ChartBullet/utils/chart-bullet-domain.ts
index 984b4e08805..cf094f19fac 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartBullet/utils/chart-bullet-domain.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartBullet/utils/chart-bullet-domain.ts
@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
import { ChartDomain, getDomains } from '../../ChartUtils';
interface ChartBulletDomainInterface {
@@ -34,22 +34,28 @@ export const getBulletDomain = ({
const domain = getDomains({
maxDomain,
minDomain,
- sources: [{
- component: comparativeErrorMeasureComponent,
- data: comparativeErrorMeasureData
- }, {
- component: comparativeWarningMeasureComponent,
- data: comparativeWarningMeasureData
- }, {
- component: primaryDotMeasureComponent,
- data: primaryDotMeasureData
- }, {
- component: primarySegmentedMeasureComponent,
- data: primarySegmentedMeasureData
- }, {
- component: qualitativeRangeComponent,
- data: qualitativeRangeData
- }]
+ sources: [
+ {
+ component: comparativeErrorMeasureComponent,
+ data: comparativeErrorMeasureData
+ },
+ {
+ component: comparativeWarningMeasureComponent,
+ data: comparativeWarningMeasureData
+ },
+ {
+ component: primaryDotMeasureComponent,
+ data: primaryDotMeasureData
+ },
+ {
+ component: primarySegmentedMeasureComponent,
+ data: primarySegmentedMeasureData
+ },
+ {
+ component: qualitativeRangeComponent,
+ data: qualitativeRangeData
+ }
+ ]
});
// Note that comparative measures and qualitative range bars are currently given an x-value of 1, while the bar widths
// fill the domain. At one point, lines were used to represent comparative warning, comparative error, and zero
diff --git a/packages/patternfly-4/react-charts/src/components/ChartBullet/utils/chart-bullet-size.ts b/packages/patternfly-4/react-charts/src/components/ChartBullet/utils/chart-bullet-size.ts
index 680fdcbe94a..95ebc4762a1 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartBullet/utils/chart-bullet-size.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartBullet/utils/chart-bullet-size.ts
@@ -1,5 +1,5 @@
import { ChartThemeDefinition } from '../../ChartTheme';
-import { ChartBulletStyles } from '../../ChartTheme';
+import { ChartBulletStyles } from '../../ChartTheme';
import {
getBulletComparativeErrorMeasureTheme,
getBulletComparativeMeasureTheme,
@@ -24,7 +24,7 @@ interface ChartBulletSizeInterface {
theme?: ChartThemeDefinition;
themeColor?: string;
themeVariant?: string;
- width: number; // The chart width -- not SVG width
+ width: number; // The chart width -- not SVG width
}
export const getComparativeMeasureErrorWidth = ({
@@ -35,14 +35,15 @@ export const getComparativeMeasureErrorWidth = ({
width,
// destructure last
- theme = getBulletComparativeErrorMeasureTheme(themeColor, themeVariant),
-}: ChartBulletSizeInterface) => scaleBarWidth({
- defaultSize: theme.bar.height,
- height,
- horizontal,
- value: ChartBulletStyles.comparativeMeasureErrorWidth,
- width
-});
+ theme = getBulletComparativeErrorMeasureTheme(themeColor, themeVariant)
+}: ChartBulletSizeInterface) =>
+ scaleBarWidth({
+ defaultSize: theme.bar.height,
+ height,
+ horizontal,
+ value: ChartBulletStyles.comparativeMeasureErrorWidth,
+ width
+ });
export const getComparativeMeasureWidth = ({
height,
@@ -52,14 +53,15 @@ export const getComparativeMeasureWidth = ({
width,
// destructure last
- theme = getBulletComparativeMeasureTheme(themeColor, themeVariant),
-}: ChartBulletSizeInterface) => scaleBarWidth({
- defaultSize: theme.bar.height,
- height,
- horizontal,
- value: ChartBulletStyles.comparativeMeasureWidth,
- width
-});
+ theme = getBulletComparativeMeasureTheme(themeColor, themeVariant)
+}: ChartBulletSizeInterface) =>
+ scaleBarWidth({
+ defaultSize: theme.bar.height,
+ height,
+ horizontal,
+ value: ChartBulletStyles.comparativeMeasureWidth,
+ width
+ });
export const getComparativeMeasureWarningWidth = ({
height,
@@ -69,14 +71,15 @@ export const getComparativeMeasureWarningWidth = ({
width,
// destructure last
- theme = getBulletComparativeWarningMeasureTheme(themeColor, themeVariant),
-}: ChartBulletSizeInterface) => scaleBarWidth({
- defaultSize: theme.bar.height,
- height,
- horizontal,
- value: ChartBulletStyles.comparativeMeasureWarningWidth,
- width
-});
+ theme = getBulletComparativeWarningMeasureTheme(themeColor, themeVariant)
+}: ChartBulletSizeInterface) =>
+ scaleBarWidth({
+ defaultSize: theme.bar.height,
+ height,
+ horizontal,
+ value: ChartBulletStyles.comparativeMeasureWarningWidth,
+ width
+ });
export const getPrimaryDotMeasureSize = ({
height,
@@ -86,14 +89,15 @@ export const getPrimaryDotMeasureSize = ({
width,
// destructure last
- theme = getBulletPrimaryDotMeasureTheme(themeColor, themeVariant),
-}: ChartBulletSizeInterface) => scaleSize({
- defaultSize: theme.group.height,
- height,
- horizontal,
- value: ChartBulletStyles.primaryDotMeasureSize,
- width
-});
+ theme = getBulletPrimaryDotMeasureTheme(themeColor, themeVariant)
+}: ChartBulletSizeInterface) =>
+ scaleSize({
+ defaultSize: theme.group.height,
+ height,
+ horizontal,
+ value: ChartBulletStyles.primaryDotMeasureSize,
+ width
+ });
export const getPrimarySegmentedMeasureWidth = ({
height,
@@ -103,15 +107,16 @@ export const getPrimarySegmentedMeasureWidth = ({
width,
// destructure last
- theme = getBulletPrimarySegmentedMeasureTheme(themeColor, themeVariant),
-}: ChartBulletSizeInterface) => scaleBarWidth({
- defaultSize: theme.group.height,
- height,
- horizontal,
- scale: .3,
- value: ChartBulletStyles.primarySegmentedMeasureWidth,
- width
-});
+ theme = getBulletPrimarySegmentedMeasureTheme(themeColor, themeVariant)
+}: ChartBulletSizeInterface) =>
+ scaleBarWidth({
+ defaultSize: theme.group.height,
+ height,
+ horizontal,
+ scale: 0.3,
+ value: ChartBulletStyles.primarySegmentedMeasureWidth,
+ width
+ });
export const getQualitativeRangeBarWidth = ({
height,
@@ -121,27 +126,22 @@ export const getQualitativeRangeBarWidth = ({
width,
// destructure last
- theme = getBulletQualitativeRangeTheme(themeColor, themeVariant),
-}: ChartBulletSizeInterface) => scaleBarWidth({
- defaultSize: theme.group.height,
- height,
- horizontal,
- value: ChartBulletStyles.qualitativeRangeWidth,
- width
-});
-
-const scale = ({
- defaultSize,
- height,
- horizontal = true,
- scale = 1,
- value,
- width
-}: ChartBulletScaleInterface) => horizontal
- ? height > defaultSize
- ? value + (height - defaultSize) * scale
- : value - (defaultSize - height) * scale
- : width > defaultSize
+ theme = getBulletQualitativeRangeTheme(themeColor, themeVariant)
+}: ChartBulletSizeInterface) =>
+ scaleBarWidth({
+ defaultSize: theme.group.height,
+ height,
+ horizontal,
+ value: ChartBulletStyles.qualitativeRangeWidth,
+ width
+ });
+
+const scale = ({ defaultSize, height, horizontal = true, scale = 1, value, width }: ChartBulletScaleInterface) =>
+ horizontal
+ ? height > defaultSize
+ ? value + (height - defaultSize) * scale
+ : value - (defaultSize - height) * scale
+ : width > defaultSize
? value + (width - defaultSize) * scale
: value - (defaultSize - width) * scale;
@@ -149,13 +149,11 @@ const scale = ({
export const scaleBarWidth = (props: ChartBulletScaleInterface) => Math.max(scale(props), 0);
// Scale size per the given size properties
-export const scaleSize = ({
- value,
- ...rest
-}: ChartBulletScaleInterface) => Math.round(
- scale({
- scale: 1 / value,
- value,
- ...rest,
- })
-);
+export const scaleSize = ({ value, ...rest }: ChartBulletScaleInterface) =>
+ Math.round(
+ scale({
+ scale: 1 / value,
+ value,
+ ...rest
+ })
+ );
diff --git a/packages/patternfly-4/react-charts/src/components/ChartBullet/utils/chart-bullet-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartBullet/utils/chart-bullet-theme.ts
index 5c2d25d3fcb..a95f5d98df6 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartBullet/utils/chart-bullet-theme.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartBullet/utils/chart-bullet-theme.ts
@@ -4,7 +4,7 @@ import {
getComparativeWarningMeasureData,
getPrimarySegmentedMeasureData,
getQualitativeRangeData
-} from './chart-bullet-data';
+} from './chart-bullet-data';
import { ChartThemeDefinition } from '../../ChartTheme';
import { getBulletTheme } from '../../ChartUtils';
@@ -125,7 +125,8 @@ export const getBulletThemeWithLegendColorScale = ({
qualitativeRangeData,
qualitativeRangeLegendData,
themeColor,
- themeVariant});
+ themeVariant
+ });
const theme = getBulletTheme(themeColor, themeVariant);
theme.legend.colorScale = [...colorScale];
diff --git a/packages/patternfly-4/react-charts/src/components/ChartContainer/ChartContainer.test.tsx b/packages/patternfly-4/react-charts/src/components/ChartContainer/ChartContainer.test.tsx
index 25ed039c08d..6ac0370f3af 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartContainer/ChartContainer.test.tsx
+++ b/packages/patternfly-4/react-charts/src/components/ChartContainer/ChartContainer.test.tsx
@@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
import { ChartContainer } from './ChartContainer';
import { ChartLegend } from '../ChartLegend';
-Object.values([true, false]).forEach((isRead) => {
+Object.values([true, false]).forEach(isRead => {
test('ChartContainer', () => {
const view = shallow( = ({
theme = getTheme(themeColor, themeVariant),
...rest
}: ChartContainerProps) => {
- const chartClassName = getClassName({className});
+ const chartClassName = getClassName({ className });
// Note: theme is valid, but @types/victory is missing a prop type
// @ts-ignore
return = ({
...rest
}: ChartDonutProps) => {
const defaultPadding = {
- bottom: getPaddingForSide('bottom', padding, theme.pie.padding),
+ bottom: getPaddingForSide('bottom', padding, theme.pie.padding),
left: getPaddingForSide('left', padding, theme.pie.padding),
right: getPaddingForSide('right', padding, theme.pie.padding),
- top: getPaddingForSide('top', padding, theme.pie.padding),
+ top: getPaddingForSide('top', padding, theme.pie.padding)
};
- const chartRadius = radius ? radius : Helpers.getRadius({
- height,
- width,
- padding: defaultPadding
- });
+ const chartRadius = radius
+ ? radius
+ : Helpers.getRadius({
+ height,
+ width,
+ padding: defaultPadding
+ });
const chartInnerRadius = innerRadius ? innerRadius : chartRadius - 9; // Todo: Add pf-core variable
// Returns subtitle
@@ -505,7 +507,7 @@ export const ChartDonut: React.FunctionComponent = ({
const showBoth = title && subTitle && subTitlePosition == ChartDonutSubTitlePosition.center;
return React.cloneElement(titleComponent, {
- ...showBoth && { capHeight },
+ ...(showBoth && { capHeight }),
key: 'pf-chart-donut-title',
style: [ChartDonutStyles.label.title, ChartDonutStyles.label.subTitle],
text: showBoth ? [title, subTitle] : title,
@@ -545,19 +547,21 @@ export const ChartDonut: React.FunctionComponent = ({
);
// Clone so users can override container props
- const container = React.cloneElement(containerComponent, {
- desc: ariaDesc,
- height,
- title: ariaTitle,
- width,
- theme,
- ...containerComponent.props
- }, [chart, getTitle(), getSubTitle()]);
+ const container = React.cloneElement(
+ containerComponent,
+ {
+ desc: ariaDesc,
+ height,
+ title: ariaTitle,
+ width,
+ theme,
+ ...containerComponent.props
+ },
+ [chart, getTitle(), getSubTitle()]
+ );
return standalone ? (
-
- {container}
-
+ {container}
) : (
{chart}
diff --git a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.test.tsx b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.test.tsx
index b1d80e3f66a..cd32d654816 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.test.tsx
+++ b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { shallow } from 'enzyme';
import { ChartDonutThreshold } from './ChartDonutThreshold';
-Object.values([true, false]).forEach((isRead) => {
+Object.values([true, false]).forEach(isRead => {
test('ChartDonutThreshold', () => {
const view = shallow( {
const defaultPadding = {
- bottom: getPaddingForSide('bottom', padding, theme.pie.padding),
+ bottom: getPaddingForSide('bottom', padding, theme.pie.padding),
left: getPaddingForSide('left', padding, theme.pie.padding),
right: getPaddingForSide('right', padding, theme.pie.padding),
- top: getPaddingForSide('top', padding, theme.pie.padding),
+ top: getPaddingForSide('top', padding, theme.pie.padding)
};
- const chartRadius = radius | Helpers.getRadius({
- height,
- width,
- padding: defaultPadding
- });
+ const chartRadius =
+ radius |
+ Helpers.getRadius({
+ height,
+ width,
+ padding: defaultPadding
+ });
// Returns computed data representing pie chart slices
const getComputedData = () => {
// Format and sort data. Sorting ensures thresholds are displayed in the correct order and simplifies calculations.
- const datum = Data.formatData(data, {x, y, ...rest}, ['x', 'y']).sort((a: any, b: any) => a._y - b._y);
+ const datum = Data.formatData(data, { x, y, ...rest }, ['x', 'y']).sort((a: any, b: any) => a._y - b._y);
// Data must be offset so that the sum of all data point y-values (including the final slice) == 100.
- const [prev, computedData] = datum.reduce((acc: [number, any], dataPoint: {_x: number | string, _y: number}) => {
- return [
- dataPoint._y, // Set the previous value to current y value
- [
- ...acc[1],
- {
- x: dataPoint._x, // Conditionally add x property only if it is in the original data object
- y: dataPoint._y - acc[0] // Must be offset by previous value
- }
- ]
- ];
- }, [0, []]);
+ const [prev, computedData] = datum.reduce(
+ (acc: [number, any], dataPoint: { _x: number | string; _y: number }) => {
+ return [
+ dataPoint._y, // Set the previous value to current y value
+ [
+ ...acc[1],
+ {
+ x: dataPoint._x, // Conditionally add x property only if it is in the original data object
+ y: dataPoint._y - acc[0] // Must be offset by previous value
+ }
+ ]
+ ];
+ },
+ [0, []]
+ );
return [
...computedData,
{
- y: prev ? (100 - prev) : 0
+ y: prev ? 100 - prev : 0
}
];
};
@@ -464,9 +469,9 @@ export const ChartDonutThreshold: React.FunctionComponent
- {container}
-
+ {container}
) : (
{chart}
diff --git a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.test.tsx b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.test.tsx
index 59536336d51..00e55e5822c 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.test.tsx
+++ b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { shallow } from 'enzyme';
import { ChartDonutUtilization } from './ChartDonutUtilization';
-Object.values([true, false]).forEach((isRead) => {
+Object.values([true, false]).forEach(isRead => {
test('ChartDonutUtilization', () => {
const view = shallow( {
const datum = getData();
- const computedData: [{ x?: any, y: any}] = [{ x: datum[0]._x, y: datum[0]._y || 0 }];
+ const computedData: [{ x?: any; y: any }] = [{ x: datum[0]._x, y: datum[0]._y || 0 }];
if (showStatic) {
computedData.push({ y: datum[0]._x ? Math.abs(100 - datum[0]._y) : 100 });
}
@@ -503,7 +503,8 @@ export const ChartDonutUtilization: React.FunctionComponent
- {container}
-
- ) : (
-
- {chart}
-
+ const container = React.cloneElement(
+ containerComponent,
+ {
+ desc: ariaDesc,
+ height,
+ title: ariaTitle,
+ width,
+ theme,
+ ...containerComponent.props
+ },
+ [chart]
);
+
+ return standalone ? {container} : {chart} ;
};
// Note: VictoryPie.role must be hoisted
diff --git a/packages/patternfly-4/react-charts/src/components/ChartGroup/ChartGroup.test.tsx b/packages/patternfly-4/react-charts/src/components/ChartGroup/ChartGroup.test.tsx
index 9041c15dcfe..2ead03e167b 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartGroup/ChartGroup.test.tsx
+++ b/packages/patternfly-4/react-charts/src/components/ChartGroup/ChartGroup.test.tsx
@@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
import { ChartArea } from '../ChartArea';
import { ChartGroup } from './ChartGroup';
-Object.values([true, false]).forEach((isRead) => {
+Object.values([true, false]).forEach(isRead => {
test('ChartGroup', () => {
const view = shallow( = ({
title: ariaTitle,
theme,
...containerComponent.props,
- className: getClassName({className: containerComponent.props.className}) // Override VictoryContainer class name
+ className: getClassName({ className: containerComponent.props.className }) // Override VictoryContainer class name
});
- return {children} ;
+ return (
+
+ {children}
+
+ );
};
// Note: VictoryGroup.role must be hoisted
diff --git a/packages/patternfly-4/react-charts/src/components/ChartLabel/ChartLabel.test.tsx b/packages/patternfly-4/react-charts/src/components/ChartLabel/ChartLabel.test.tsx
index 9972c4be9c2..e2ee380e557 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartLabel/ChartLabel.test.tsx
+++ b/packages/patternfly-4/react-charts/src/components/ChartLabel/ChartLabel.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { shallow } from 'enzyme';
import { ChartLabel } from './ChartLabel';
-Object.values([true, false]).forEach((isRead) => {
+Object.values([true, false]).forEach(isRead => {
test('ChartLabel', () => {
const view = shallow(` element.
*/
@@ -162,15 +158,13 @@ export interface ChartLabelProps extends VictoryLabelProps {
y?: number;
}
-export const ChartLabel: React.FunctionComponent = ({
- style,
- ...rest
-}: ChartLabelProps) => {
- const applyDefaultStyle = (customStyle: React.CSSProperties) => defaults(customStyle, {
- fontFamily: ChartCommonStyles.label.fontFamily,
- fontSize: ChartCommonStyles.label.fontSize,
- letterSpacing: ChartCommonStyles.label.letterSpacing
- });
+export const ChartLabel: React.FunctionComponent = ({ style, ...rest }: ChartLabelProps) => {
+ const applyDefaultStyle = (customStyle: React.CSSProperties) =>
+ defaults(customStyle, {
+ fontFamily: ChartCommonStyles.label.fontFamily,
+ fontSize: ChartCommonStyles.label.fontSize,
+ letterSpacing: ChartCommonStyles.label.letterSpacing
+ });
const newStyle = Array.isArray(style) ? style.map(applyDefaultStyle) : applyDefaultStyle(style);
return = ({
};
// Note: VictoryLegend.role must be hoisted, but getBaseProps causes error with ChartVoronoiContainer
-hoistNonReactStatics(ChartLegend, VictoryLegend, { getBaseProps: true});
+hoistNonReactStatics(ChartLegend, VictoryLegend, { getBaseProps: true });
diff --git a/packages/patternfly-4/react-charts/src/components/ChartLegend/ChartLegendWrapper.tsx b/packages/patternfly-4/react-charts/src/components/ChartLegend/ChartLegendWrapper.tsx
index 2fbd6ef1fe8..a5c147dbd56 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartLegend/ChartLegendWrapper.tsx
+++ b/packages/patternfly-4/react-charts/src/components/ChartLegend/ChartLegendWrapper.tsx
@@ -147,7 +147,7 @@ export const ChartLegendWrapper: React.FunctionComponent
- {legend}
-
- );
+ return {legend} ;
};
diff --git a/packages/patternfly-4/react-charts/src/components/ChartLine/ChartLine.test.tsx b/packages/patternfly-4/react-charts/src/components/ChartLine/ChartLine.test.tsx
index d1f9ec35543..fd042c7655a 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartLine/ChartLine.test.tsx
+++ b/packages/patternfly-4/react-charts/src/components/ChartLine/ChartLine.test.tsx
@@ -4,7 +4,7 @@ import { Chart } from '../Chart';
import { ChartGroup } from '../ChartGroup';
import { ChartLine } from './ChartLine';
-Object.values([true, false]).forEach((isRead) => {
+Object.values([true, false]).forEach(isRead => {
test('ChartLine', () => {
const view = shallow( = ({
...containerComponent.props
});
return = ({
allowTooltip = true,
@@ -416,23 +416,29 @@ export const ChartPie: React.FunctionComponent = ({
// destructure last
theme = getTheme(themeColor, themeVariant),
- labelComponent = allowTooltip ? = ({
};
// Clone so users can override container props
- const container = React.cloneElement(containerComponent, {
- desc: ariaDesc,
- height,
- title: ariaTitle,
- width,
- theme,
- ...containerComponent.props
- }, [chart, getWrappedLegend()]);
+ const container = React.cloneElement(
+ containerComponent,
+ {
+ desc: ariaDesc,
+ height,
+ title: ariaTitle,
+ width,
+ theme,
+ ...containerComponent.props
+ },
+ [chart, getWrappedLegend()]
+ );
return standalone ? (
-
- {container}
-
+ {container}
) : (
{chart}
diff --git a/packages/patternfly-4/react-charts/src/components/ChartPoint/ChartPoint.test.tsx b/packages/patternfly-4/react-charts/src/components/ChartPoint/ChartPoint.test.tsx
index cbb16660766..b12bbdd21c0 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartPoint/ChartPoint.test.tsx
+++ b/packages/patternfly-4/react-charts/src/components/ChartPoint/ChartPoint.test.tsx
@@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
import { ChartLegend } from '../ChartLegend';
import { ChartPoint } from './ChartPoint';
-Object.values([true, false]).forEach((isRead) => {
+Object.values([true, false]).forEach(isRead => {
test('ChartPoint', () => {
const view = shallow( = ({
return React.cloneElement(pathComponent, {
className,
clipPath,
- d: getPath({datum, active, ...rest}),
+ d: getPath({ datum, active, ...rest }),
events,
role,
shapeRendering,
diff --git a/packages/patternfly-4/react-charts/src/components/ChartPoint/path-helpers.ts b/packages/patternfly-4/react-charts/src/components/ChartPoint/path-helpers.ts
index 4f17fc381db..e6b3175c2b6 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartPoint/path-helpers.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartPoint/path-helpers.ts
@@ -89,7 +89,7 @@ export const PathHelpers = {
const baseSize = 1.35 * size;
const angle = Math.PI / 5;
const range = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
- const starCoords = range.map((index) => {
+ const starCoords = range.map(index => {
const length = index % 2 === 0 ? baseSize : baseSize / 2;
return `${length * Math.sin(angle * (index + 1)) + x},
${length * Math.cos(angle * (index + 1)) + y}`;
diff --git a/packages/patternfly-4/react-charts/src/components/ChartScatter/ChartScatter.test.tsx b/packages/patternfly-4/react-charts/src/components/ChartScatter/ChartScatter.test.tsx
index c6175d6e2f3..6436a9d29f6 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartScatter/ChartScatter.test.tsx
+++ b/packages/patternfly-4/react-charts/src/components/ChartScatter/ChartScatter.test.tsx
@@ -4,7 +4,7 @@ import { Chart } from '../Chart/Chart';
import { ChartGroup } from '../ChartGroup/ChartGroup';
import { ChartScatter } from './ChartScatter';
-Object.values([true, false]).forEach((isRead) => {
+Object.values([true, false]).forEach(isRead => {
test('ChartScatter', () => {
const view = shallow( = ({
...containerComponent.props
});
return tag that will be included in an external svg. Set standalone to false to
@@ -352,10 +355,14 @@ export const ChartStack: React.FunctionComponent = ({
title: ariaTitle,
theme,
...containerComponent.props,
- className: getClassName({className: containerComponent.props.className}) // Override VictoryContainer class name
+ className: getClassName({ className: containerComponent.props.className }) // Override VictoryContainer class name
});
- return {children} ;
-}
+ return (
+
+ {children}
+
+ );
+};
// Note: VictoryStack.getChildren & VictoryStack.role must be hoisted
hoistNonReactStatics(ChartStack, VictoryStack);
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/ChartTheme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/ChartTheme.ts
index 9e3e34dc075..0b96d5de731 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartTheme/ChartTheme.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/ChartTheme.ts
@@ -14,14 +14,8 @@ import {
} from './themes/bullet-theme';
import { DonutTheme } from './themes/donut-theme';
import { ThresholdTheme } from './themes/threshold-theme';
-import {
- DonutThresholdDynamicTheme,
- DonutThresholdStaticTheme
-} from './themes/donut-threshold-theme';
-import {
- DonutUtilizationDynamicTheme,
- DonutUtilizationStaticTheme
-} from './themes/donut-utilization-theme';
+import { DonutThresholdDynamicTheme, DonutThresholdStaticTheme } from './themes/donut-threshold-theme';
+import { DonutUtilizationDynamicTheme, DonutUtilizationStaticTheme } from './themes/donut-utilization-theme';
export interface ChartThemeDefinitionInterface extends VictoryThemeDefinition {
area?: any;
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/styles/common-styles.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/styles/common-styles.ts
index c8b1a925ef6..e65bf3f4260 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartTheme/styles/common-styles.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/styles/common-styles.ts
@@ -17,10 +17,10 @@ export const CommonStyles = {
fontFamily: TYPOGRAPHY_FONT_FAMILY,
fontSize: TYPOGRAPHY_FONT_SIZE,
letterSpacing: TYPOGRAPHY_LETTER_SPACING,
- margin: chart_global_label_Margin.value,
+ margin: chart_global_label_Margin.value
},
legend: {
margin: chart_legend_Margin.value,
position: chart_legend_position.value
- },
+ }
};
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/styles/donut-utilization-styles.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/styles/donut-utilization-styles.ts
index b2d23728b3f..672997d07c1 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartTheme/styles/donut-utilization-styles.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/styles/donut-utilization-styles.ts
@@ -1,15 +1,9 @@
/* eslint-disable camelcase */
-import {
- chart_donut_threshold_warning_Color,
- chart_donut_threshold_danger_Color,
-} from '@patternfly/react-tokens';
+import { chart_donut_threshold_warning_Color, chart_donut_threshold_danger_Color } from '@patternfly/react-tokens';
// Donut utilization styles
export const DonutUtilizationStyles = {
thresholds: {
- colorScale: [
- chart_donut_threshold_warning_Color.value,
- chart_donut_threshold_danger_Color.value
- ]
+ colorScale: [chart_donut_threshold_warning_Color.value, chart_donut_threshold_danger_Color.value]
}
};
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/axis-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/axis-theme.ts
index 090899e63b7..48787097eb3 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/axis-theme.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/axis-theme.ts
@@ -1,8 +1,5 @@
/* eslint-disable camelcase */
-import {
- chart_axis_grid_stroke_Color,
- chart_axis_tick_stroke_Color
-} from '@patternfly/react-tokens';
+import { chart_axis_grid_stroke_Color, chart_axis_tick_stroke_Color } from '@patternfly/react-tokens';
// Axis theme
export const AxisTheme = {
@@ -15,5 +12,5 @@ export const AxisTheme = {
stroke: chart_axis_tick_stroke_Color.value
}
}
- },
+ }
};
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/base-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/base-theme.ts
index c1f7c79c04e..5c8c383b678 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/base-theme.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/base-theme.ts
@@ -96,7 +96,7 @@ import {
chart_voronoi_flyout_stroke_Width,
chart_voronoi_flyout_PointerEvents,
chart_voronoi_flyout_stroke_Color,
- chart_voronoi_flyout_stroke_Fill,
+ chart_voronoi_flyout_stroke_Fill
} from '@patternfly/react-tokens';
// Note: Values must be in pixles
@@ -361,7 +361,7 @@ export const BaseTheme = {
fill: chart_voronoi_flyout_stroke_Fill.value, // background
pointerEvents: chart_voronoi_flyout_PointerEvents.value,
stroke: chart_voronoi_flyout_stroke_Color.value, // border
- strokeWidth: chart_voronoi_flyout_stroke_Width.value,
+ strokeWidth: chart_voronoi_flyout_stroke_Width.value
}
}
}
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/color-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/color-theme.ts
index 730b33a3759..00ff87b38de 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/color-theme.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/color-theme.ts
@@ -4,9 +4,7 @@ interface ColorThemeInterface {
// Victory theme properties only
export const ColorTheme = (props: ColorThemeInterface) => {
- const {
- COLOR_SCALE
- } = props;
+ const { COLOR_SCALE } = props;
return {
area: {
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/cyan-color-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/cyan-color-theme.ts
index 039a89eb594..0e1d514c86c 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/cyan-color-theme.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/cyan-color-theme.ts
@@ -20,4 +20,4 @@ const COLOR_SCALE = [
export const DarkCyanColorTheme = ColorTheme({
COLOR_SCALE
-}) ;
+});
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/gold-color-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/gold-color-theme.ts
index 1b67e5c8273..a273d911ad7 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/gold-color-theme.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/gold-color-theme.ts
@@ -15,10 +15,9 @@ const COLOR_SCALE = [
chart_color_gold_100.value,
chart_color_gold_500.value,
chart_color_gold_200.value,
- chart_color_gold_400.value,
-
+ chart_color_gold_400.value
];
export const DarkGoldColorTheme = ColorTheme({
COLOR_SCALE
-}) ;
+});
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/orange-color-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/orange-color-theme.ts
index 52df58f9472..9cd224804ac 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/orange-color-theme.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/orange-color-theme.ts
@@ -15,8 +15,7 @@ const COLOR_SCALE = [
chart_color_orange_100.value,
chart_color_orange_500.value,
chart_color_orange_200.value,
- chart_color_orange_400.value,
-
+ chart_color_orange_400.value
];
export const DarkOrangeColorTheme = ColorTheme({
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/donut-threshold-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/donut-threshold-theme.ts
index 88c4a659f23..9cfbd8e5d30 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/donut-threshold-theme.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/donut-threshold-theme.ts
@@ -15,10 +15,7 @@ import {
// Donut threshold dynamic theme
export const DonutThresholdDynamicTheme = {
legend: {
- colorScale: [
- chart_donut_threshold_second_Color.value,
- chart_donut_threshold_third_Color.value
- ]
+ colorScale: [chart_donut_threshold_second_Color.value, chart_donut_threshold_third_Color.value]
},
pie: {
height: chart_donut_threshold_dynamic_pie_Height.value,
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/donut-utilization-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/donut-utilization-theme.ts
index 31c8cad58e1..a422f71f1f4 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/donut-utilization-theme.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/donut-utilization-theme.ts
@@ -7,7 +7,7 @@ import {
chart_donut_utilization_dynamic_pie_angle_Padding,
chart_donut_utilization_dynamic_pie_Padding,
chart_donut_utilization_dynamic_pie_Width,
- chart_donut_utilization_static_pie_Padding,
+ chart_donut_utilization_static_pie_Padding
} from '@patternfly/react-tokens';
// Donut utilization dynamic theme
@@ -27,12 +27,10 @@ export const DonutUtilizationStaticTheme = {
chart_donut_threshold_first_Color.value,
chart_donut_threshold_second_Color.value,
chart_donut_threshold_third_Color.value
- ],
+ ]
},
pie: {
- colorScale: [
- chart_donut_threshold_first_Color.value
- ],
+ colorScale: [chart_donut_threshold_first_Color.value],
padding: chart_donut_utilization_static_pie_Padding.value
}
};
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/gold-color-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/gold-color-theme.ts
index 40ce58cbad0..da90e67def5 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/gold-color-theme.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/gold-color-theme.ts
@@ -15,8 +15,7 @@ const COLOR_SCALE = [
chart_color_gold_100.value,
chart_color_gold_500.value,
chart_color_gold_200.value,
- chart_color_gold_400.value,
-
+ chart_color_gold_400.value
];
export const LightGoldColorTheme = ColorTheme({
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/orange-color-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/orange-color-theme.ts
index 55d0ea6508e..1b15441aaf6 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/orange-color-theme.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/orange-color-theme.ts
@@ -15,8 +15,7 @@ const COLOR_SCALE = [
chart_color_orange_100.value,
chart_color_orange_500.value,
chart_color_orange_200.value,
- chart_color_orange_400.value,
-
+ chart_color_orange_400.value
];
export const LightOrangeColorTheme = ColorTheme({
diff --git a/packages/patternfly-4/react-charts/src/components/ChartThreshold/ChartThreshold.test.tsx b/packages/patternfly-4/react-charts/src/components/ChartThreshold/ChartThreshold.test.tsx
index ad7dcac0e25..10bd51e2358 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartThreshold/ChartThreshold.test.tsx
+++ b/packages/patternfly-4/react-charts/src/components/ChartThreshold/ChartThreshold.test.tsx
@@ -5,7 +5,7 @@ import { ChartGroup } from '../ChartGroup';
import { ChartThreshold } from './ChartThreshold';
import { ChartThemeColor, ChartThemeVariant } from '../ChartTheme';
-Object.values([true, false]).forEach((isRead) => {
+Object.values([true, false]).forEach(isRead => {
test('ChartThreshold', () => {
const view = shallow(
-
);
diff --git a/packages/patternfly-4/react-charts/src/components/ChartThreshold/ChartThreshold.tsx b/packages/patternfly-4/react-charts/src/components/ChartThreshold/ChartThreshold.tsx
index 4c0810646b4..ac15e01ff5a 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartThreshold/ChartThreshold.tsx
+++ b/packages/patternfly-4/react-charts/src/components/ChartThreshold/ChartThreshold.tsx
@@ -11,9 +11,7 @@ export const ChartThreshold: React.FunctionComponent = ({
...rest
}: ChartLineProps) => {
const theme = getThresholdTheme(themeColor, themeVariant);
- return (
- 'y: ' + point.y} />}
+ containerComponent={ 'y: ' + point.y} />}
height={200}
width={200}
>
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTooltip/ChartTooltip.tsx b/packages/patternfly-4/react-charts/src/components/ChartTooltip/ChartTooltip.tsx
index 72a7eaadbf1..511daed0350 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartTooltip/ChartTooltip.tsx
+++ b/packages/patternfly-4/react-charts/src/components/ChartTooltip/ChartTooltip.tsx
@@ -6,7 +6,7 @@ import {
StringOrNumberOrCallback,
VictoryStyleObject,
VictoryTooltip,
- VictoryTooltipProps,
+ VictoryTooltipProps
} from 'victory';
import { ChartThemeDefinition } from '../ChartTheme';
import { getTheme } from '../ChartUtils';
@@ -34,14 +34,14 @@ export interface ChartTooltipProps extends VictoryTooltipProps {
* ChartVoronoiContainer, the center prop is what enables the mouseFollowTooltips option. When this prop is set,
* non-zero pointerLength values will no longer be respected.
*/
- center?: { x: number, y: number };
+ center?: { x: number; y: number };
/**
* The centerOffset prop determines the position of the center of the tooltip flyout in relation to the flyout
* pointer. This prop should be given as an object of x and y, where each is either a numeric offset value or a
* function that returns a numeric value. When this prop is set, non-zero pointerLength values will no longer be
* respected.
*/
- centerOffset?: { x: number | Function, y: number | Function };
+ centerOffset?: { x: number | Function; y: number | Function };
/**
* The constrainToVisibleArea prop determines whether to coerce tooltips so that they fit within the visible area of
* the chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the
@@ -104,7 +104,7 @@ export interface ChartTooltipProps extends VictoryTooltipProps {
* function of datum. If this prop is not set, flyoutWidth will be determined based on an approximate text size
* calculated from the text and style props provided to VictoryTooltip.
*/
- flyoutWidth?: NumberOrCallback,
+ flyoutWidth?: NumberOrCallback;
/**
* The groupComponent prop takes a component instance which will be used to create group elements for use within
* container elements. This prop defaults to a tag.}
@@ -211,7 +211,7 @@ export const ChartTooltip: React.FunctionComponent = ({
// @ts-ignore
return Test About Modal );
- view.update();
- expect(document.createElement).toBeCalledWith('div');
- expect(document.createElement).toHaveBeenCalledTimes(1);
+ const view = shallow( Test About Modal );
+ view.update();
+ expect(document.createElement).toBeCalledWith('div');
+ expect(document.createElement).toHaveBeenCalledTimes(1);
});
test('About Modal closes with escape', () => {
- shallow(
-
- Test About Modal
-
- );
- const [event, handler] = (document.addEventListener as any).mock.calls[0];
- expect(event).toBe('keydown');
- handler({ keyCode: KEY_CODES.ESCAPE_KEY });
- expect(props.onClose).toBeCalled();
+ shallow(
+
+ Test About Modal
+
+ );
+ const [event, handler] = (document.addEventListener as any).mock.calls[0];
+ expect(event).toBe('keydown');
+ handler({ keyCode: KEY_CODES.ESCAPE_KEY });
+ expect(props.onClose).toBeCalled();
});
test('modal does not call onClose for esc key if it is not open', () => {
- shallow( Test About Modal );
- expect(myMock).toBeCalled();
+ const noImgAltrops = {
+ onClose: jest.fn(),
+ children: 'modal content',
+ productName: 'Product Name',
+ trademark: 'Trademark and copyright information here',
+ brandImageSrc: 'brandImg...',
+ logoImageSrc: 'logoImg...'
+ };
+ const myMock = jest.fn() as any;
+ global.console = { error: myMock } as any;
+ const JSAboutModal = AboutModal as any;
+ shallow( Test About Modal );
+ expect(myMock).toBeCalled();
});
diff --git a/packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.tsx b/packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.tsx
index 1f0efbef6c7..710d4e375ee 100644
--- a/packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.tsx
+++ b/packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.tsx
@@ -65,7 +65,7 @@ export class AboutModal extends React.Component {
if (event.keyCode === KEY_CODES.ESCAPE_KEY && this.props.isOpen) {
this.props.onClose();
}
- }
+ };
toggleSiblingsFromScreenReaders = (hide: boolean) => {
const bodyChildren = document.body.children;
@@ -74,20 +74,20 @@ export class AboutModal extends React.Component {
hide ? child.setAttribute('aria-hidden', '' + hide) : child.removeAttribute('aria-hidden');
}
}
- }
+ };
componentDidMount() {
- const container = document.createElement('div');
- this.setState({ container });
- document.body.appendChild(container);
- document.addEventListener('keydown', this.handleEscKeyClick, false);
+ const container = document.createElement('div');
+ this.setState({ container });
+ document.body.appendChild(container);
+ document.addEventListener('keydown', this.handleEscKeyClick, false);
- if (this.props.isOpen) {
- document.body.classList.add(css(styles.backdropOpen));
- } else {
- document.body.classList.remove(css(styles.backdropOpen));
- }
+ if (this.props.isOpen) {
+ document.body.classList.add(css(styles.backdropOpen));
+ } else {
+ document.body.classList.remove(css(styles.backdropOpen));
}
+ }
componentDidUpdate() {
if (this.props.isOpen) {
@@ -107,7 +107,6 @@ export class AboutModal extends React.Component {
}
render() {
-
const { ...props } = this.props;
const { container } = this.state;
diff --git a/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalBoxCloseButton.tsx b/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalBoxCloseButton.tsx
index 7049709da3f..72bca454af2 100644
--- a/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalBoxCloseButton.tsx
+++ b/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalBoxCloseButton.tsx
@@ -16,9 +16,9 @@ export const AboutModalBoxCloseButton: React.SFC
onClose = () => undefined as any,
...props
}: AboutModalBoxCloseButtonProps) => (
- = ({
);
diff --git a/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalBoxHero.tsx b/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalBoxHero.tsx
index f185ac5d9bc..d3366f5a3c9 100644
--- a/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalBoxHero.tsx
+++ b/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalBoxHero.tsx
@@ -16,9 +16,12 @@ export const AboutModalBoxHero: React.SFC
diff --git a/packages/patternfly-3/patternfly-react/src/components/VerticalNav/VerticalNavConstants.js b/packages/patternfly-3/patternfly-react/src/components/VerticalNav/VerticalNavConstants.js
index 4772ceda46d..a84168296ee 100644
--- a/packages/patternfly-3/patternfly-react/src/components/VerticalNav/VerticalNavConstants.js
+++ b/packages/patternfly-3/patternfly-react/src/components/VerticalNav/VerticalNavConstants.js
@@ -118,9 +118,15 @@ const getNextDepth = depth =>
const deepestOf = (pri, sec, ter) => (pri && sec && ter) || (pri && sec) || pri;
const componentForDepth = depth => {
- if (depth === 'primary') { return VerticalNavItem; }
- if (depth === 'secondary') { return VerticalNavSecondaryItem; }
- if (depth === 'tertiary') { return VerticalNavTertiaryItem; }
+ if (depth === 'primary') {
+ return VerticalNavItem;
+ }
+ if (depth === 'secondary') {
+ return VerticalNavSecondaryItem;
+ }
+ if (depth === 'tertiary') {
+ return VerticalNavTertiaryItem;
+ }
return null;
};
diff --git a/packages/patternfly-3/patternfly-react/src/components/VerticalNav/VerticalNavItem.js b/packages/patternfly-3/patternfly-react/src/components/VerticalNav/VerticalNavItem.js
index bb63db12a77..927054ce0f1 100644
--- a/packages/patternfly-3/patternfly-react/src/components/VerticalNav/VerticalNavItem.js
+++ b/packages/patternfly-3/patternfly-react/src/components/VerticalNav/VerticalNavItem.js
@@ -9,7 +9,9 @@ import VerticalNavItemHelper from './VerticalNavItemHelper';
* In the future, we could lift some of the primary-specific code from Helper into this file.
*/
const BaseVerticalNavItem = props => {
- if (wrongDepth(props, 'primary')) { return correctDepth(props); }
+ if (wrongDepth(props, 'primary')) {
+ return correctDepth(props);
+ }
return
);
- }
+ };
renderStateful = () => (
// No knobs for the stateful example, we want to let it control its own state.
@@ -84,7 +84,7 @@ export class WizardPatternExample extends React.Component {
loading={this.state.loading}
/>
- )
+ );
render() {
return this.props.stateful ? this.renderStateful() : this.renderStateless();
}
diff --git a/packages/patternfly-3/patternfly-react/src/components/Wizard/Stories/mockWizardBase.js b/packages/patternfly-3/patternfly-react/src/components/Wizard/Stories/mockWizardBase.js
index 148086e03a4..ba024559f88 100644
--- a/packages/patternfly-3/patternfly-react/src/components/Wizard/Stories/mockWizardBase.js
+++ b/packages/patternfly-3/patternfly-react/src/components/Wizard/Stories/mockWizardBase.js
@@ -23,7 +23,7 @@ class MockWizardBase extends React.Component {
activeSubStepIndex: steps[prevState.activeStepIndex - 1].subSteps.length - 1
}));
}
- }
+ };
onNextButtonClick = () => {
const { steps } = this.props;
const { activeStepIndex, activeSubStepIndex } = this.state;
@@ -39,13 +39,13 @@ class MockWizardBase extends React.Component {
activeSubStepIndex: 0
}));
}
- }
+ };
onSidebarItemClick = (stepIndex, subStepIndex) => {
this.setState({
activeStepIndex: stepIndex,
activeSubStepIndex: subStepIndex
});
- }
+ };
onStepClick = stepIndex => {
if (stepIndex === this.state.activeStepIndex) {
return;
@@ -54,7 +54,7 @@ class MockWizardBase extends React.Component {
activeStepIndex: stepIndex,
activeSubStepIndex: 0
});
- }
+ };
render() {
return false;
}
diff --git a/packages/patternfly-3/patternfly-react/src/components/Wizard/Stories/mockWizardReviewStepsManager.js b/packages/patternfly-3/patternfly-react/src/components/Wizard/Stories/mockWizardReviewStepsManager.js
index 8c7d78ae614..0f9bba1d4f5 100644
--- a/packages/patternfly-3/patternfly-react/src/components/Wizard/Stories/mockWizardReviewStepsManager.js
+++ b/packages/patternfly-3/patternfly-react/src/components/Wizard/Stories/mockWizardReviewStepsManager.js
@@ -16,7 +16,7 @@ class MockWizardReviewStepsManager extends React.Component {
this.setState({
steps: updated
});
- }
+ };
subStepClicked = (e, stepIndex, subStepIndex) => {
e.preventDefault();
const updated = [...this.state.steps];
@@ -24,7 +24,7 @@ class MockWizardReviewStepsManager extends React.Component {
this.setState({
steps: updated
});
- }
+ };
render() {
const { steps } = this.state;
return (
diff --git a/packages/patternfly-3/react-console/src/SerialConsole/SerialConsole.js b/packages/patternfly-3/react-console/src/SerialConsole/SerialConsole.js
index 6ea69fc2623..41364823820 100644
--- a/packages/patternfly-3/react-console/src/SerialConsole/SerialConsole.js
+++ b/packages/patternfly-3/react-console/src/SerialConsole/SerialConsole.js
@@ -24,21 +24,25 @@ class SerialConsole extends React.Component {
}
onResetClick = event => {
- if (event.button !== 0) { return; }
+ if (event.button !== 0) {
+ return;
+ }
this.props.onDisconnect();
this.props.onConnect();
event.target.blur();
this.focusTerminal();
- }
+ };
onDisconnectClick = event => {
- if (event.button !== 0) { return; }
+ if (event.button !== 0) {
+ return;
+ }
this.props.onDisconnect();
event.target.blur();
this.focusTerminal();
- }
+ };
/**
* Backend sent data.
@@ -60,7 +64,7 @@ class SerialConsole extends React.Component {
focusTerminal = () => {
this.childTerminal && this.childTerminal.focus();
- }
+ };
render() {
const { id, status, topClassName } = this.props;
diff --git a/packages/patternfly-3/react-console/src/SerialConsole/SerialConsole.stories.js b/packages/patternfly-3/react-console/src/SerialConsole/SerialConsole.stories.js
index 6ccb51a59df..acffffacdf8 100644
--- a/packages/patternfly-3/react-console/src/SerialConsole/SerialConsole.stories.js
+++ b/packages/patternfly-3/react-console/src/SerialConsole/SerialConsole.stories.js
@@ -44,13 +44,13 @@ export class SerialConsoleConnector extends React.Component {
passKeys: false,
status: DISCONNECTED // will close the terminal window
});
- }
+ };
onConnect = () => {
log('SerialConsoleConnector.onConnect(), ', this.state);
this.setConnected();
this.tellFairyTale();
- }
+ };
onData = data => {
log('UI terminal component produced data, i.e. a key was pressed, pass it to backend. [', data, ']');
@@ -60,32 +60,32 @@ export class SerialConsoleConnector extends React.Component {
if (this.state.passKeys) {
this.onDataFromBackend(data);
}
- }
+ };
onDataFromBackend = data => {
log('Backend sent data, pass them to the UI component. [', data, ']');
if (this.childSerialconsole) {
this.childSerialconsole.onDataReceived(data);
}
- }
+ };
onDisconnect = () => {
this.setState({
status: DISCONNECTED
});
timeoutIds.forEach(id => clearTimeout(id));
- }
+ };
onResize = (rows, cols) => {
log('UI has been resized, pass this info to backend. [', rows, ', ', cols, ']');
- }
+ };
setConnected = () => {
this.setState({
status: CONNECTED,
passKeys: true
});
- }
+ };
tellFairyTale = () => {
let time = 1000;
@@ -102,7 +102,7 @@ export class SerialConsoleConnector extends React.Component {
time += 5000;
timeoutIds.push(setTimeout(this.onBackendDisconnected, time));
- }
+ };
render() {
return (
diff --git a/packages/patternfly-3/react-console/src/SerialConsole/XTerm.js b/packages/patternfly-3/react-console/src/SerialConsole/XTerm.js
index 9d122ae8506..6a005a02047 100644
--- a/packages/patternfly-3/react-console/src/SerialConsole/XTerm.js
+++ b/packages/patternfly-3/react-console/src/SerialConsole/XTerm.js
@@ -100,7 +100,7 @@ class XTerm extends React.Component {
// https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload
event.returnValue = '';
return '';
- }
+ };
/**
* Backend closed connection.
@@ -125,11 +125,11 @@ class XTerm extends React.Component {
onFocus = () => {
window.addEventListener('beforeunload', this.onBeforeUnload);
- }
+ };
onBlur = () => {
window.removeEventListener('beforeunload', this.onBeforeUnload);
- }
+ };
/**
* If autoFit is enabled, compute the size and set it
@@ -174,8 +174,10 @@ class XTerm extends React.Component {
}
focus = () => {
- if (this.state.terminal) { this.state.terminal.focus(); }
- }
+ if (this.state.terminal) {
+ this.state.terminal.focus();
+ }
+ };
render() {
// ensure react never reuses this div by keying it with the terminal widget
diff --git a/packages/patternfly-3/react-console/src/SpiceConsole/SpiceConsole.js b/packages/patternfly-3/react-console/src/SpiceConsole/SpiceConsole.js
index 82092c82b07..908ac2bca15 100644
--- a/packages/patternfly-3/react-console/src/SpiceConsole/SpiceConsole.js
+++ b/packages/patternfly-3/react-console/src/SpiceConsole/SpiceConsole.js
@@ -45,7 +45,7 @@ class SpiceConsole extends React.Component {
}
onConnected = () => {
this.setState({ status: CONNECTED });
- }
+ };
onCtrlAltDel = e => {
if (this.sc) {
@@ -54,23 +54,23 @@ class SpiceConsole extends React.Component {
sendCtrlAltDel();
window.sc = undefined;
}
- }
+ };
onSpiceError = e => {
this.disconnect();
this.onDisconnected(e);
// if (e !== undefined && e.message === "Permission denied.") {
- }
+ };
onDisconnected = e => {
this.setState({ status: DISCONNECTED });
this.props.onDisconnected(e);
- }
+ };
onSecurityFailure = e => {
this.setState({ status: DISCONNECTED });
this.props.onSecurityFailure(e);
- }
+ };
render() {
const { textDisconnected, textConnecting, textSendShortcut, textCtrlAltDel } = this.props;
diff --git a/packages/patternfly-3/react-console/src/VncConsole/VncConsole.js b/packages/patternfly-3/react-console/src/VncConsole/VncConsole.js
index 91d8af39448..a6df6a15508 100644
--- a/packages/patternfly-3/react-console/src/VncConsole/VncConsole.js
+++ b/packages/patternfly-3/react-console/src/VncConsole/VncConsole.js
@@ -73,45 +73,45 @@ class VncConsole extends React.Component {
return;
}
this.rfb.disconnect();
- }
+ };
onConnected = () => {
this.setState({ status: CONNECTED });
- }
+ };
onCtrlAltDel = e => {
if (this.rfb) {
this.rfb.sendCtrlAltDel();
this.focusVnc(e);
}
- }
+ };
onDisconnected = e => {
this.setState({ status: DISCONNECTED });
this.props.onDisconnected(e);
- }
+ };
onSecurityFailure = e => {
this.setState({ status: DISCONNECTED });
this.props.onSecurityFailure(e);
- }
+ };
removeEventListeners = () => {
this.rfb.removeEventListener('connect', this.onConnected);
this.rfb.removeEventListener('disconnect', this.onDisconnected);
this.rfb.removeEventListener('securityfailure', this.onSecurityFailure);
- }
+ };
setNovncElem = e => {
this.novncElem = e;
- }
+ };
focusVnc = e => {
if (e && e.target && e.target.blur) {
e.target.blur();
}
this.novncElem && this.novncElem.focus();
- }
+ };
render() {
const {
diff --git a/packages/patternfly-4/react-charts/src/components/Chart/Chart.test.tsx b/packages/patternfly-4/react-charts/src/components/Chart/Chart.test.tsx
index 94041f55506..a1535f42455 100644
--- a/packages/patternfly-4/react-charts/src/components/Chart/Chart.test.tsx
+++ b/packages/patternfly-4/react-charts/src/components/Chart/Chart.test.tsx
@@ -4,7 +4,7 @@ import { Chart } from './Chart';
import { ChartGroup } from '../ChartGroup';
import { ChartLine } from '../ChartLine';
-Object.values([true, false]).forEach((isRead) => {
+Object.values([true, false]).forEach(isRead => {
test('Chart', () => {
const view = shallow(
-
-
+
+
+
);
diff --git a/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalBoxContent.tsx b/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalBoxContent.tsx
index 4201d246d6c..2a8b7977584 100644
--- a/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalBoxContent.tsx
+++ b/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalBoxContent.tsx
@@ -28,8 +28,6 @@ export const AboutModalBoxContent: React.SFC
{noAboutModalBoxContentContainer ? children :
- {children}
}
- {trademark} -
+{trademark}
{readerTitle}
- {children && ( -
- {children}
-
- )}
+ {children && {children}
}
{action && (
{React.cloneElement(action as any, { title, variantLabel })}
)}
diff --git a/packages/patternfly-4/react-core/src/components/Alert/AlertIcon.tsx b/packages/patternfly-4/react-core/src/components/Alert/AlertIcon.tsx
index 24fae539106..bcf8aa04be7 100644
--- a/packages/patternfly-4/react-core/src/components/Alert/AlertIcon.tsx
+++ b/packages/patternfly-4/react-core/src/components/Alert/AlertIcon.tsx
@@ -24,11 +24,7 @@ export interface AlertIconProps extends React.HTMLProps
diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx
index d667ee68669..795b94114c2 100644
--- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx
+++ b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx
@@ -5,51 +5,51 @@ import { DropdownDirection, DropdownPosition, DropdownToggle, DropdownContext }
import { DropdownWithContext } from '../Dropdown/DropdownWithContext';
export interface ApplicationLauncherProps extends React.HTMLProps {
- /** Additional element css classes */
- className?: string;
- /** Display menu above or below dropdown toggle */
- direction?: DropdownDirection;
- /**
- * @deprecated
- * Use the items prop instead
- *
- * Array of DropdownItem nodes that will be rendered in the dropdown Menu list
- */
- dropdownItems?: React.ReactNode[];
- /** Array of application launcher items */
- items?: React.ReactNode[];
- /** Render Application launcher toggle as disabled icon */
- isDisabled?: boolean;
- /** open bool */
- isOpen?: boolean;
- /** Indicates where menu will be alligned horizontally */
- position?: DropdownPosition;
- /** 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;
- /** Flag to indicate if application launcher has groups */
- isGrouped?: boolean;
- /** Toggle Icon, optional to override the icon used for the toggle */
- toggleIcon?: React.ReactNode;
+ /** Additional element css classes */
+ className?: string;
+ /** Display menu above or below dropdown toggle */
+ direction?: DropdownDirection;
+ /**
+ * @deprecated
+ * Use the items prop instead
+ *
+ * Array of DropdownItem nodes that will be rendered in the dropdown Menu list
+ */
+ dropdownItems?: React.ReactNode[];
+ /** Array of application launcher items */
+ items?: React.ReactNode[];
+ /** Render Application launcher toggle as disabled icon */
+ isDisabled?: boolean;
+ /** open bool */
+ isOpen?: boolean;
+ /** Indicates where menu will be alligned horizontally */
+ position?: DropdownPosition;
+ /** 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;
+ /** Flag to indicate if application launcher has groups */
+ isGrouped?: boolean;
+ /** Toggle Icon, optional to override the icon used for the toggle */
+ toggleIcon?: React.ReactNode;
}
export class ApplicationLauncher extends React.Component {
static defaultProps = {
- "className": '',
- "isDisabled": false,
- "direction": DropdownDirection.down,
- "dropdownItems": [] as React.ReactNode[],
- "items": [] as React.ReactNode[],
- "isOpen": false,
- "position": DropdownPosition.left,
- "onSelect": (_event: any): any => undefined,
- "onToggle": (_value: boolean): any => undefined,
+ className: '',
+ isDisabled: false,
+ direction: DropdownDirection.down,
+ dropdownItems: [] as React.ReactNode[],
+ items: [] as React.ReactNode[],
+ isOpen: false,
+ position: DropdownPosition.left,
+ onSelect: (_event: any): any => undefined,
+ onToggle: (_value: boolean): any => undefined,
'aria-label': 'Application launcher',
- "isGrouped": false,
- "toggleIcon":
+
{children} : children}
{isExternal && (
<>
- = ({
children,
...props
-}: DropdownGroupProps) => (
-
- {children}
-
-);
+}: DropdownGroupProps) => {children} ;
diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncherSeparator.tsx b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncherSeparator.tsx
index e750237637b..0f0bed66564 100644
--- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncherSeparator.tsx
+++ b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncherSeparator.tsx
@@ -4,6 +4,4 @@ import { DropdownSeparator, SeparatorProps } from '../Dropdown';
export const ApplicationLauncherSeparator: React.FunctionComponent = ({
children,
...props
-}: SeparatorProps) => (
- = ({
- className = '',
- src = '',
- alt,
- ...props
-}: AvatarProps) => (
+export const Avatar: React.SFC = ({ className = '', src = '', alt, ...props }: AvatarProps) => (
);
diff --git a/packages/patternfly-4/react-core/src/components/BackgroundImage/BackgroundImage.test.tsx b/packages/patternfly-4/react-core/src/components/BackgroundImage/BackgroundImage.test.tsx
index f6a0f1fe5c8..dd409af5b45 100644
--- a/packages/patternfly-4/react-core/src/components/BackgroundImage/BackgroundImage.test.tsx
+++ b/packages/patternfly-4/react-core/src/components/BackgroundImage/BackgroundImage.test.tsx
@@ -11,7 +11,7 @@ const images = {
[BackgroundImageSrc.filter]: '/assets/images/background-filter.svg'
};
-Object.values([true, false]).forEach((isRead) => {
+Object.values([true, false]).forEach(isRead => {
test('BackgroundImage', () => {
const view = shallow( = ({
[BackgroundImageSrc.sm]: src,
[BackgroundImageSrc.sm2x]: src,
[BackgroundImageSrc.lg]: src,
- [BackgroundImageSrc.filter]: '', // unused
+ [BackgroundImageSrc.filter]: '' // unused
};
}
// Build stylesheet string based on cssVariables
let cssSheet = '';
- (Object.keys(cssVariables) as [keyof typeof srcMap]).forEach((size) => {
+ (Object.keys(cssVariables) as [keyof typeof srcMap]).forEach(size => {
cssSheet += `${cssVariables[size as keyof typeof cssVariables]}: url('${srcMap[size]}');`;
});
@@ -74,13 +74,15 @@ export const BackgroundImage: React.FunctionComponent = ({
const bgStyles = StyleSheet.create({
bgOverrides: `&.pf-c-background-image {
${cssSheet}
- }`});
+ }`
+ });
return (
);
- }
+ };
}
diff --git a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyButton.test.tsx b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyButton.test.tsx
index 617be02d754..6195a01f415 100644
--- a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyButton.test.tsx
+++ b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyButton.test.tsx
@@ -3,14 +3,14 @@ import { shallow } from 'enzyme';
import { ClipboardCopyButton } from './ClipboardCopyButton';
const props = {
- "id": 'my-id',
- "textId": 'my-text-id',
- "className": 'fancy-copy-button',
- "onClick": jest.fn(),
- "exitDelay": 1000,
- "entryDelay": 2000,
- "maxWidth": '500px',
- "position": 'right' as 'right',
+ id: 'my-id',
+ textId: 'my-text-id',
+ className: 'fancy-copy-button',
+ onClick: jest.fn(),
+ exitDelay: 1000,
+ entryDelay: 2000,
+ maxWidth: '500px',
+ position: 'right' as 'right',
'aria-label': 'click this button to copy text'
};
diff --git a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyButton.tsx b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyButton.tsx
index 603755ab12d..51fab79c328 100644
--- a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyButton.tsx
+++ b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyButton.tsx
@@ -4,7 +4,8 @@ import { css } from '@patternfly/react-styles';
import { CopyIcon } from '@patternfly/react-icons';
import { Tooltip } from '../Tooltip';
-export interface ClipboardCopyButtonProps extends React.DetailedHTMLProps, HTMLButtonElement> {
+export interface ClipboardCopyButtonProps
+ extends React.DetailedHTMLProps, HTMLButtonElement> {
onClick: (event: React.MouseEvent) => void;
children: React.ReactNode;
id: string;
diff --git a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyExpanded.test.tsx b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyExpanded.test.tsx
index 9e81d9f36c8..77e81629c03 100644
--- a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyExpanded.test.tsx
+++ b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyExpanded.test.tsx
@@ -8,10 +8,6 @@ const props = {
};
test('expanded content render', () => {
- const view = shallow(
-
- This is my text
-
- );
+ const view = shallow(This is my text );
expect(view).toMatchSnapshot();
});
diff --git a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyExpanded.tsx b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyExpanded.tsx
index c4d788e120a..5146012a664 100644
--- a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyExpanded.tsx
+++ b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyExpanded.tsx
@@ -33,16 +33,17 @@ export class ClipboardCopyExpanded extends React.Component onChange(e.target.innerText, e)}
- contentEditable={!isReadOnly}
- {...props}
- />;
+ const clipboardCopyExpandableComponent = (
+
onChange(e.target.innerText, e)}
+ contentEditable={!isReadOnly}
+ {...props}
+ />
+ );
- return (isCode ? , HTMLButtonElement> {
+export interface ClipboardCopyToggleProps
+ extends React.DetailedHTMLProps, HTMLButtonElement> {
onClick: (event: React.MouseEvent) => void;
id: string;
textId: string;
@@ -22,7 +23,7 @@ export const ClipboardCopyToggle: React.FunctionComponent {
return (
-
{clipboardCopyExpandableComponent} : clipboardCopyExpandableComponent);
+ return isCode ? {clipboardCopyExpandableComponent} : clipboardCopyExpandableComponent;
}
}
diff --git a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.tsx b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.tsx
index 675f5045073..d88aaa38029 100644
--- a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.tsx
+++ b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.tsx
@@ -3,7 +3,8 @@ import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipbo
import { css } from '@patternfly/react-styles';
import { AngleRightIcon } from '@patternfly/react-icons';
-export interface ClipboardCopyToggleProps extends React.DetailedHTMLProps