From ad331201f5f3d9cf1ba99c830449127e7df90390 Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Wed, 9 Aug 2023 09:16:24 -0400 Subject: [PATCH] chore(build): address linting rule violations (#9396) * WIP ESlint errors fix styling test errors disable rule enable rule try moving export update class component exports fix table export fix test fix linting errors PR feedback from Eric * revert remove displayName and fix lint issues * fix lint error in test --- .eslintrc.json | 4 +- .../src/components/Chart/Chart.tsx | 14 +- .../components/ChartBoxPlot/ChartBoxPlot.tsx | 3 +- .../components/ChartBullet/ChartBullet.tsx | 6 +- .../ChartBulletComparativeWarningMeasure.tsx | 4 +- .../ChartBullet/ChartBulletGroupTitle.tsx | 6 +- .../ChartBulletPrimarySegmentedMeasure.tsx | 5 +- .../ChartBullet/utils/chart-bullet-size.ts | 1 - .../src/components/ChartGroup/ChartGroup.tsx | 6 +- .../ChartLegendTooltip/ChartLegendTooltip.tsx | 2 +- .../ChartLegendTooltipContent.tsx | 2 +- .../src/components/ChartPie/ChartPie.tsx | 12 +- .../src/components/ChartPoint/path-helpers.ts | 2 +- .../ChartTheme/themes/color-theme.ts | 8 +- .../src/components/ChartUtils/chart-domain.ts | 2 +- .../ChartUtils/chart-interactive-legend.ts | 2 +- .../src/components/ChartUtils/chart-legend.ts | 2 +- .../components/ChartUtils/chart-patterns.tsx | 12 +- .../ChartUtils/chart-theme-types.ts | 2 +- .../components/ChartUtils/chart-tooltip.ts | 6 +- .../src/components/CodeEditor/CodeEditor.tsx | 4 +- .../CodeEditor/__test__/CodeEditor.test.tsx | 8 +- .../CodeEditor/examples/CodeEditorBasic.tsx | 10 +- .../examples/CodeEditorCustomControl.tsx | 4 +- .../examples/CodeEditorShortcutMainHeader.tsx | 4 +- .../examples/CodeEditorSizeToFit.tsx | 2 +- .../src/components/AboutModal/AboutModal.tsx | 2 +- .../AboutModal/AboutModalBoxCloseButton.tsx | 2 +- .../AboutModal/examples/AboutModalBasic.tsx | 2 +- ...AboutModalComplexUserPositionedContent.tsx | 2 +- .../examples/AboutModalWithoutProductName.tsx | 2 +- ...cordionFixedWithMultipleExpandBehavior.tsx | 2 +- .../src/components/Alert/AlertGroup.tsx | 4 +- .../Alert/examples/AlertAsyncLiveRegion.tsx | 2 +- .../Alert/examples/AlertDynamicLiveRegion.tsx | 2 +- .../Alert/examples/AlertGroupAsync.tsx | 4 +- .../examples/AlertGroupMultipleDynamic.tsx | 4 +- .../examples/AlertGroupSingularDynamic.tsx | 4 +- .../AlertGroupSingularDynamicOverflow.tsx | 4 +- .../Alert/examples/AlertGroupToast.tsx | 4 +- .../AlertGroupToastOverflowCapture.tsx | 4 +- .../react-core/src/components/Alert/index.ts | 2 +- .../react-core/src/components/Brand/Brand.tsx | 8 +- .../components/Brand/examples/BrandBasic.tsx | 4 +- .../Button/examples/ButtonVariations.tsx | 18 ++- .../src/components/Card/CardHeaderMain.tsx | 2 +- .../src/components/Card/CardTitle.tsx | 2 +- .../Card/examples/CardWithModifiers.tsx | 4 +- .../src/components/Checkbox/Checkbox.tsx | 4 +- .../react-core/src/components/Chip/Chip.tsx | 4 +- .../src/components/Chip/ChipGroup.tsx | 12 +- .../Chip/examples/ChipGroupInline.tsx | 4 +- .../examples/ChipGroupRemovableCategories.tsx | 6 +- .../Chip/examples/ChipGroupWithCategories.tsx | 4 +- .../ClipboardCopy/ClipboardCopy.tsx | 4 +- .../ClipboardCopy/ClipboardCopyExpanded.tsx | 4 +- .../CodeBlock/examples/CodeBlockBasic.tsx | 2 +- .../examples/CodeBlockExpandable.tsx | 4 +- .../src/components/DataList/DataList.tsx | 4 +- .../src/components/DataList/DataListItem.tsx | 4 +- .../components/DataList/DataListItemRow.tsx | 2 +- .../DataList/examples/DataListDraggable.tsx | 2 +- .../DragDrop/examples/DragDropBasic.tsx | 2 +- .../examples/DragDropMultipleLists.tsx | 2 +- .../Dropdown/examples/DropdownBasic.tsx | 8 +- .../DualListSelector/DualListSelector.tsx | 4 +- .../DualListSelector/DualListSelectorTree.tsx | 2 +- .../DualListSelectorTreeItem.tsx | 6 +- .../DualListSelectorComposableDragDrop.tsx | 24 ++-- .../components/DualListSelector/treeUtils.ts | 18 +-- .../EmptyState/EmptyStateActions.tsx | 2 +- .../ExpandableSection/ExpandableSection.tsx | 4 +- .../src/components/FileUpload/FileUpload.tsx | 4 +- .../FileUploadTextWithRestrictions.tsx | 10 +- .../src/components/Form/FormContext.tsx | 1 + .../src/components/Form/FormSection.tsx | 2 +- .../Form/InternalFormFieldGroup.tsx | 2 +- .../src/components/FormSelect/FormSelect.tsx | 4 +- .../src/components/InputGroup/InputGroup.tsx | 5 +- .../components/JumpLinks/JumpLinksItem.tsx | 4 +- .../src/components/Label/LabelGroup.tsx | 8 +- .../components/Label/examples/LabelFilled.tsx | 6 +- .../Label/examples/LabelOutline.tsx | 56 +++++++- .../react-core/src/components/Label/index.ts | 2 +- .../src/components/LoginPage/LoginForm.tsx | 4 +- .../components/Menu/examples/MenuBasic.tsx | 10 +- .../Menu/examples/MenuOptionMultiSelect.tsx | 2 +- .../Menu/examples/MenuScrollable.tsx | 2 +- .../MenuScrollableCustomMenuHeight.tsx | 2 +- .../Menu/examples/MenuWithActions.tsx | 2 +- .../Menu/examples/MenuWithCheckbox.tsx | 2 +- .../Menu/examples/MenuWithFavorites.tsx | 8 +- .../Menu/examples/MenuWithFooter.tsx | 2 +- .../Menu/examples/MenuWithViewMore.tsx | 4 +- .../src/components/MenuToggle/MenuToggle.tsx | 2 +- .../MenuToggle/MenuToggleAction.tsx | 4 +- .../MenuToggle/MenuToggleCheckbox.tsx | 6 +- .../examples/MenuToggleTypeahead.tsx | 15 ++- .../react-core/src/components/Modal/Modal.tsx | 4 +- .../examples/ModalWithOverflowingContent.tsx | 2 +- .../MultipleFileUploadButton.tsx | 8 +- .../MultipleFileUploadMain.tsx | 6 +- .../MultipleFileUploadStatusItem.tsx | 4 +- .../MultipleFileUploadTitleTextSeparator.tsx | 8 +- .../react-core/src/components/Nav/Nav.tsx | 4 +- .../src/components/Nav/NavExpandable.tsx | 4 +- .../react-core/src/components/Nav/NavItem.tsx | 5 +- .../react-core/src/components/Nav/NavList.tsx | 4 +- .../NotificationDrawerListItem.tsx | 4 +- .../components/NumberInput/NumberInput.tsx | 2 +- .../examples/NumberInputVaryingSizes.tsx | 8 +- .../examples/NumberInputWithStatus.tsx | 2 +- .../components/OverflowMenu/OverflowMenu.tsx | 4 +- .../OverflowMenu/OverflowMenuContent.tsx | 2 +- .../OverflowMenu/OverflowMenuControl.tsx | 2 +- .../OverflowMenu/OverflowMenuGroup.tsx | 2 +- .../OverflowMenu/OverflowMenuItem.tsx | 2 +- .../react-core/src/components/Page/Page.tsx | 4 +- .../src/components/Pagination/Navigation.tsx | 16 ++- .../Pagination/examples/PaginationSticky.tsx | 2 +- .../components/Popover/PopoverHeaderText.tsx | 7 +- .../Popover/examples/PopoverAdvanced.tsx | 4 +- .../examples/PopoverCloseUncontrolled.tsx | 2 +- .../src/components/Progress/Progress.tsx | 4 +- .../Progress/examples/ProgressHelperText.tsx | 2 +- .../react-core/src/components/Radio/Radio.tsx | 4 +- .../SearchInput/AdvancedSearchMenu.tsx | 2 +- .../components/SearchInput/SearchInput.tsx | 6 +- .../src/components/SimpleList/SimpleList.tsx | 4 +- .../components/SimpleList/SimpleListItem.tsx | 4 +- .../src/components/Switch/Switch.tsx | 6 +- .../react-core/src/components/Tabs/Tab.tsx | 5 +- .../react-core/src/components/Tabs/Tabs.tsx | 14 +- .../src/components/TextArea/TextArea.tsx | 2 +- .../src/components/TextInput/TextInput.tsx | 1 + .../TextInput/examples/TextInputBasic.tsx | 9 +- .../examples/TextInputGroupFilters.tsx | 4 +- .../src/components/TimePicker/TimePicker.tsx | 4 +- .../components/TimePicker/TimePickerUtils.tsx | 5 +- .../components/ToggleGroup/ToggleGroup.tsx | 2 +- .../examples/ToggleGroupCompact.tsx | 2 +- .../examples/ToggleGroupDefaultMultiple.tsx | 2 +- .../ToggleGroup/examples/ToggleGroupIcon.tsx | 2 +- .../examples/ToggleGroupTextIcon.tsx | 2 +- .../src/components/Toolbar/Toolbar.tsx | 8 +- .../Toolbar/ToolbarChipGroupContent.tsx | 4 +- .../src/components/Toolbar/ToolbarContent.tsx | 4 +- .../Toolbar/ToolbarExpandableContent.tsx | 4 +- .../src/components/Toolbar/ToolbarFilter.tsx | 6 +- .../components/Toolbar/ToolbarToggleGroup.tsx | 4 +- .../Toolbar/examples/ToolbarSticky.tsx | 11 +- .../src/components/TreeView/TreeView.tsx | 2 +- .../components/TreeView/TreeViewListItem.tsx | 14 +- .../src/components/TreeView/TreeViewRoot.tsx | 15 ++- .../src/components/Wizard/Wizard.tsx | 8 +- .../src/components/Wizard/WizardContext.tsx | 23 ++-- .../src/components/Wizard/WizardHeader.tsx | 4 +- .../components/Wizard/WizardNavInternal.tsx | 8 +- .../src/components/Wizard/WizardToggle.tsx | 6 +- .../WizardEnabledOnFormValidation.tsx | 11 +- .../examples/WizardWithCustomFooter.tsx | 16 ++- .../Wizard/examples/WizardWithCustomNav.tsx | 2 +- .../react-core/src/demos/Card/CardData.jsx | 127 +++++++++--------- .../examples/FilterAttributeSearch.tsx | 1 - .../Filters/examples/FilterCheckboxSelect.tsx | 1 - .../demos/Filters/examples/FilterFaceted.tsx | 1 - .../examples/FilterMixedSelectGroup.tsx | 1 - .../examples/FilterSameSelectGroup.tsx | 1 - .../Filters/examples/FilterSearchInput.tsx | 1 - .../Filters/examples/FilterSingleSelect.tsx | 1 - .../src/demos/examples/DashboardHeader.js | 6 +- .../examples/JumpLinks/JumpLinksWithDrawer.js | 4 +- .../Page/PageStickySectionBreadcrumb.tsx | 6 +- .../examples/Page/PageStickySectionGroup.tsx | 6 +- .../Page/PageStickySectionGroupAlternate.tsx | 6 +- .../src/demos/examples/Tabs/ModalTabs.tsx | 2 +- .../src/demos/examples/Tabs/TabsAndTable.tsx | 8 +- .../ApplicationLauncher.tsx | 11 +- .../ApplicationLauncherAlignRight.tsx | 2 +- .../examples/ApplicationLauncherBasic.tsx | 2 +- .../ApplicationLauncherCustomIcon.tsx | 2 +- .../examples/ApplicationLauncherDisabled.tsx | 2 +- .../ApplicationLauncherDocumentBody.tsx | 2 +- .../ApplicationLauncherFavoritesAndSearch.tsx | 6 +- .../ApplicationLauncherSectionsAndIcons.tsx | 2 +- .../examples/ApplicationLauncherTooltip.tsx | 2 +- .../ContextSelector/ContextSelector.tsx | 4 +- .../ContextSelector/ContextSelectorItem.tsx | 6 +- .../ContextSelectorMenuList.tsx | 4 +- .../ContextSelector/ContextSelectorToggle.tsx | 6 +- .../examples/ContextSelectorBasic.tsx | 2 +- .../examples/ContextSelectorPlainText.tsx | 2 +- .../examples/ContextSelectorWithFooter.tsx | 2 +- .../components/Dropdown/DropdownMenu.tsx | 4 +- .../Dropdown/DropdownToggleAction.tsx | 5 +- .../Dropdown/DropdownToggleCheckbox.tsx | 3 +- .../Dropdown/DropdownWithContext.tsx | 4 +- .../Dropdown/InternalDropdownItem.tsx | 4 +- .../deprecated/components/Dropdown/Toggle.tsx | 4 +- .../PageHeader/tests/PageHeaderTools.test.tsx | 6 +- .../tests/PageHeaderToolsGroup.test.tsx | 6 +- .../tests/PageHeaderToolsItem.test.tsx | 4 +- .../deprecated/components/Select/Select.tsx | 66 ++++----- .../components/Select/SelectMenu.tsx | 4 +- .../components/Select/SelectOption.tsx | 8 +- .../deprecated/components/Wizard/Wizard.tsx | 6 +- .../components/Wizard/WizardHeader.tsx | 4 +- .../examples/WizardAnchorsForNavItems.tsx | 6 +- .../Wizard/examples/WizardBasic.tsx | 4 +- .../examples/WizardBasicWithDisabledSteps.tsx | 4 +- .../src/helpers/GenerateId/GenerateId.ts | 4 +- .../src/helpers/KeyboardHandler.tsx | 8 +- packages/react-core/src/helpers/favorites.ts | 20 +-- packages/react-core/src/helpers/util.ts | 20 +-- .../src/components/Table/ActionsColumn.tsx | 4 +- .../src/components/Table/EditColumn.tsx | 6 +- .../Table/EditableSelectInputCell.tsx | 5 +- .../src/components/Table/RowWrapper.tsx | 8 +- .../src/components/Table/Table.tsx | 2 +- .../Table/base/evaluate-transforms.ts | 4 +- .../src/components/Table/base/provider.tsx | 4 +- .../src/components/Table/base/types.tsx | 5 +- .../Table/examples/TableActions.tsx | 2 +- .../components/Table/examples/TableBasic.tsx | 2 +- .../Table/examples/TableCellWidth.tsx | 2 +- .../Table/examples/TableClickable.tsx | 2 +- .../Table/examples/TableDraggable.tsx | 20 +-- .../Table/examples/TableExpandable.tsx | 6 +- .../Table/examples/TableFavoritable.tsx | 12 +- .../examples/TableMultipleStickyColumns.tsx | 2 +- .../Table/examples/TableNestedExpandable.tsx | 15 +-- .../examples/TableNestedTableExpandable.tsx | 20 +-- .../Table/examples/TableRightStickyColumn.tsx | 2 +- .../Table/examples/TableSelectable.tsx | 8 +- .../Table/examples/TableStickyColumn.tsx | 2 +- .../examples/TableStickyColumnsAndHeader.tsx | 2 +- .../Table/examples/TableStriped.tsx | 2 +- .../Table/examples/TableStripedExpandable.tsx | 13 +- .../examples/TableStripedMultipleTbody.tsx | 4 +- .../components/Table/examples/TableTree.tsx | 20 +-- .../Table/utils/decorators/cellActions.tsx | 104 +++++++------- .../Table/utils/decorators/cellWidth.ts | 18 +-- .../Table/utils/decorators/classNames.ts | 10 +- .../Table/utils/decorators/editable.tsx | 4 +- .../Table/utils/headerUtils.test.tsx | 20 +-- .../components/Table/utils/headerUtils.tsx | 8 +- .../src/components/Table/utils/utils.tsx | 18 +-- .../components/Table/BodyWrapper.tsx | 2 +- .../src/deprecated/components/Table/Table.tsx | 7 +- .../components/Table/base/body-row.tsx | 4 +- .../deprecated/components/Table/base/body.tsx | 9 +- .../components/Table/base/header.tsx | 7 +- .../Table/examples/LegacyTableActions.tsx | 11 +- .../Table/examples/LegacyTableBasic.tsx | 2 +- .../Table/examples/LegacyTableCellWidth.tsx | 2 +- .../Table/examples/LegacyTableClickable.tsx | 2 +- .../examples/LegacyTableControllingText.tsx | 9 +- .../Table/examples/LegacyTableExpandable.tsx | 8 +- .../Table/examples/LegacyTableFavoritable.tsx | 12 +- .../examples/LegacyTableSelectableRadio.tsx | 2 +- .../Table/examples/LegacyTableSortable.tsx | 2 +- .../Table/examples/LegacyTableStriped.tsx | 2 +- .../examples/LegacyTableStripedCustomTr.tsx | 2 +- .../examples/LegacyTableStripedExpandable.tsx | 8 +- .../Table/examples/LegacyTableTree.tsx | 18 +-- .../src/test-helpers/MockedTableChanges.js | 38 +++--- 266 files changed, 989 insertions(+), 803 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 4343a4a8f08..b78d47c5ef8 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -106,9 +106,9 @@ "never" ], "patternfly-react/import-tokens-icons": "error", - "patternfly-react/no-anonymous-functions": "off", + "patternfly-react/no-anonymous-functions": "error", "prefer-const": "error", - "prettier/prettier": "off", + "prettier/prettier": "error", "radix": [ "error", "as-needed" diff --git a/packages/react-charts/src/components/Chart/Chart.tsx b/packages/react-charts/src/components/Chart/Chart.tsx index a61afb93dc9..d7954a92db9 100644 --- a/packages/react-charts/src/components/Chart/Chart.tsx +++ b/packages/react-charts/src/components/Chart/Chart.tsx @@ -24,13 +24,13 @@ import { ChartContainer } from '../ChartContainer/ChartContainer'; import { ChartLegend } from '../ChartLegend/ChartLegend'; import { ChartCommonStyles } from '../ChartTheme/ChartStyles'; import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; -import { getClassName } from "../ChartUtils/chart-helpers"; -import { getLabelTextSize } from "../ChartUtils/chart-label"; -import { getComputedLegend, getLegendItemsExtraHeight } from "../ChartUtils/chart-legend"; -import { getPaddingForSide } from "../ChartUtils/chart-padding"; -import { getPatternDefs, mergePatternData, useDefaultPatternProps } from "../ChartUtils/chart-patterns"; -import { getChartTheme } from "../ChartUtils/chart-theme-types"; -import { useEffect } from "react"; +import { getClassName } from '../ChartUtils/chart-helpers'; +import { getLabelTextSize } from '../ChartUtils/chart-label'; +import { getComputedLegend, getLegendItemsExtraHeight } from '../ChartUtils/chart-legend'; +import { getPaddingForSide } from '../ChartUtils/chart-padding'; +import { getPatternDefs, mergePatternData, useDefaultPatternProps } from '../ChartUtils/chart-patterns'; +import { getChartTheme } from '../ChartUtils/chart-theme-types'; +import { useEffect } from 'react'; /** * Chart is a wrapper component that reconciles the domain for all its children, controls the layout of the chart, diff --git a/packages/react-charts/src/components/ChartBoxPlot/ChartBoxPlot.tsx b/packages/react-charts/src/components/ChartBoxPlot/ChartBoxPlot.tsx index 694e2dc197b..a5b396b2098 100644 --- a/packages/react-charts/src/components/ChartBoxPlot/ChartBoxPlot.tsx +++ b/packages/react-charts/src/components/ChartBoxPlot/ChartBoxPlot.tsx @@ -16,7 +16,8 @@ import { SortOrderPropType, StringOrNumberOrCallback, StringOrNumberOrList, - VictoryStyleInterface, OrientationTypes + VictoryStyleInterface, + OrientationTypes } from 'victory-core'; import { VictoryBoxPlot, diff --git a/packages/react-charts/src/components/ChartBullet/ChartBullet.tsx b/packages/react-charts/src/components/ChartBullet/ChartBullet.tsx index 9fb402e6d60..72d01043bea 100644 --- a/packages/react-charts/src/components/ChartBullet/ChartBullet.tsx +++ b/packages/react-charts/src/components/ChartBullet/ChartBullet.tsx @@ -17,7 +17,7 @@ import { ChartLegend } from '../ChartLegend/ChartLegend'; import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; import { ChartTooltip } from '../ChartTooltip/ChartTooltip'; import { ChartBulletStyles } from '../ChartTheme/ChartStyles'; -import { getComputedLegend, getLegendItemsExtraHeight } from "../ChartUtils/chart-legend"; +import { getComputedLegend, getLegendItemsExtraHeight } from '../ChartUtils/chart-legend'; import { ChartBulletComparativeErrorMeasure } from './ChartBulletComparativeErrorMeasure'; import { ChartBulletComparativeMeasure } from './ChartBulletComparativeMeasure'; import { ChartBulletComparativeWarningMeasure } from './ChartBulletComparativeWarningMeasure'; @@ -27,8 +27,8 @@ import { ChartBulletPrimarySegmentedMeasure } from './ChartBulletPrimarySegmente import { ChartBulletQualitativeRange } from './ChartBulletQualitativeRange'; import { getBulletDomain } from './utils/chart-bullet-domain'; import { getBulletThemeWithLegendColorScale } from './utils/chart-bullet-theme'; -import { getPaddingForSide } from "../ChartUtils/chart-padding"; -import { useEffect } from "react"; +import { getPaddingForSide } from '../ChartUtils/chart-padding'; +import { useEffect } from 'react'; /** * ChartBullet renders a dataset as a bullet chart. diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeWarningMeasure.tsx b/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeWarningMeasure.tsx index 7c931286fa3..cddbf6aab35 100644 --- a/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeWarningMeasure.tsx +++ b/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeWarningMeasure.tsx @@ -163,7 +163,9 @@ export interface ChartBulletComparativeWarningMeasureProps { y?: DataGetterPropType; } -export const ChartBulletComparativeWarningMeasure: React.FunctionComponent = ({ +export const ChartBulletComparativeWarningMeasure: React.FunctionComponent< + ChartBulletComparativeWarningMeasureProps +> = ({ allowTooltip = true, ariaDesc, ariaTitle, diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletGroupTitle.tsx b/packages/react-charts/src/components/ChartBullet/ChartBulletGroupTitle.tsx index 25cb96e2466..6e91e5a1e3c 100644 --- a/packages/react-charts/src/components/ChartBullet/ChartBulletGroupTitle.tsx +++ b/packages/react-charts/src/components/ChartBullet/ChartBulletGroupTitle.tsx @@ -4,11 +4,7 @@ import { ChartContainer } from '../ChartContainer/ChartContainer'; import { ChartLabel } from '../ChartLabel/ChartLabel'; import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; import { ChartBulletStyles } from '../ChartTheme/ChartStyles'; -import { - getLabelTextSize, - getBulletLabelX, - getBulletLabelY -} from '../ChartUtils/chart-label'; +import { getLabelTextSize, getBulletLabelX, getBulletLabelY } from '../ChartUtils/chart-label'; import { getPaddingForSide } from '../ChartUtils/chart-padding'; import { getBulletGroupTitleTheme } from '../ChartUtils/chart-theme-types'; diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletPrimarySegmentedMeasure.tsx b/packages/react-charts/src/components/ChartBullet/ChartBulletPrimarySegmentedMeasure.tsx index 8b7b64caea3..c40309be7fc 100644 --- a/packages/react-charts/src/components/ChartBullet/ChartBulletPrimarySegmentedMeasure.tsx +++ b/packages/react-charts/src/components/ChartBullet/ChartBulletPrimarySegmentedMeasure.tsx @@ -8,7 +8,10 @@ import { ChartContainer } from '../ChartContainer/ChartContainer'; import { ChartBulletStyles } from '../ChartTheme/ChartStyles'; import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; import { ChartTooltip } from '../ChartTooltip/ChartTooltip'; -import { getBulletPrimaryNegativeMeasureTheme, getBulletPrimarySegmentedMeasureTheme } from '../ChartUtils/chart-theme-types'; +import { + getBulletPrimaryNegativeMeasureTheme, + getBulletPrimarySegmentedMeasureTheme +} from '../ChartUtils/chart-theme-types'; /** * ChartBulletPrimarySegmentedMeasure renders a dataset as the primary segmented measure. diff --git a/packages/react-charts/src/components/ChartBullet/utils/chart-bullet-size.ts b/packages/react-charts/src/components/ChartBullet/utils/chart-bullet-size.ts index 2e23a4f7eb3..65a14cbd217 100644 --- a/packages/react-charts/src/components/ChartBullet/utils/chart-bullet-size.ts +++ b/packages/react-charts/src/components/ChartBullet/utils/chart-bullet-size.ts @@ -67,7 +67,6 @@ interface ChartBulletSizeInterface { width: number; // The chart width -- not SVG width } - /** * Scale size per the given size properties * @private diff --git a/packages/react-charts/src/components/ChartGroup/ChartGroup.tsx b/packages/react-charts/src/components/ChartGroup/ChartGroup.tsx index 9ceb0a75dac..85200ec38d0 100644 --- a/packages/react-charts/src/components/ChartGroup/ChartGroup.tsx +++ b/packages/react-charts/src/components/ChartGroup/ChartGroup.tsx @@ -22,11 +22,7 @@ import { VictoryGroup, VictoryGroupProps, VictoryGroupTTargetType } from 'victor import { ChartContainer } from '../ChartContainer/ChartContainer'; import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; import { getClassName } from '../ChartUtils/chart-helpers'; -import { - useDefaultPatternProps, - getPatternDefs, - renderChildrenWithPatterns -} from '../ChartUtils/chart-patterns'; +import { useDefaultPatternProps, getPatternDefs, renderChildrenWithPatterns } from '../ChartUtils/chart-patterns'; import { getTheme } from '../ChartUtils/chart-theme'; /** diff --git a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx index 53dd9c74580..f8549654eb0 100644 --- a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx +++ b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx @@ -18,7 +18,7 @@ import { getLegendTooltipDataProps, getLegendTooltipSize, getLegendTooltipVisibleData, - getLegendTooltipVisibleText, + getLegendTooltipVisibleText } from '../ChartUtils/chart-tooltip'; import { getTheme } from '../ChartUtils/chart-theme'; diff --git a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipContent.tsx b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipContent.tsx index 5f708e69fbf..429402f465c 100644 --- a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipContent.tsx +++ b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipContent.tsx @@ -11,7 +11,7 @@ import { getLegendTooltipDataProps, getLegendTooltipSize, getLegendTooltipVisibleData, - getLegendTooltipVisibleText, + getLegendTooltipVisibleText } from '../ChartUtils/chart-tooltip'; import { getTheme } from '../ChartUtils/chart-theme'; diff --git a/packages/react-charts/src/components/ChartPie/ChartPie.tsx b/packages/react-charts/src/components/ChartPie/ChartPie.tsx index 58dae7c2b89..21aa49232ad 100644 --- a/packages/react-charts/src/components/ChartPie/ChartPie.tsx +++ b/packages/react-charts/src/components/ChartPie/ChartPie.tsx @@ -28,10 +28,10 @@ import { ChartLegend } from '../ChartLegend/ChartLegend'; import { ChartCommonStyles } from '../ChartTheme/ChartStyles'; import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; import { ChartTooltip } from '../ChartTooltip/ChartTooltip'; -import { getComputedLegend, getLegendItemsExtraHeight } from "../ChartUtils/chart-legend"; -import { getPaddingForSide } from "../ChartUtils/chart-padding"; -import { getPatternDefs, useDefaultPatternProps, } from "../ChartUtils/chart-patterns"; -import { getTheme } from "../ChartUtils/chart-theme"; +import { getComputedLegend, getLegendItemsExtraHeight } from '../ChartUtils/chart-legend'; +import { getPaddingForSide } from '../ChartUtils/chart-padding'; +import { getPatternDefs, useDefaultPatternProps } from '../ChartUtils/chart-patterns'; +import { getTheme } from '../ChartUtils/chart-theme'; import { useEffect } from 'react'; /** @@ -512,9 +512,7 @@ export const ChartPie: React.FunctionComponent = ({ theme = getTheme(themeColor), labelComponent = allowTooltip ? ( - ) : ( - undefined - ), + ) : undefined, legendOrientation = theme.legend.orientation as any, height = theme.pie.height, width = theme.pie.width, diff --git a/packages/react-charts/src/components/ChartPoint/path-helpers.ts b/packages/react-charts/src/components/ChartPoint/path-helpers.ts index f1a3aec6fac..d2f6fb0d727 100644 --- a/packages/react-charts/src/components/ChartPoint/path-helpers.ts +++ b/packages/react-charts/src/components/ChartPoint/path-helpers.ts @@ -104,7 +104,7 @@ export const PathHelpers: PathHelpersInterface = { star: (x: number, y: number, size: number) => { const baseSize = 1.35 * size; const angle = Math.PI / 5; - const starCoords = [...Array(10).keys()].map(index => { + const starCoords = [...Array(10).keys()].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/react-charts/src/components/ChartTheme/themes/color-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/color-theme.ts index 4592591e3ed..46c9dff6264 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/color-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/color-theme.ts @@ -33,12 +33,12 @@ export const ColorTheme = (props: ColorThemeInterface) => { colorScale: COLOR_SCALE, style: { q1: { - fill: COLOR_SCALE[0], + fill: COLOR_SCALE[0] }, q3: { - fill: COLOR_SCALE[0], - }, - }, + fill: COLOR_SCALE[0] + } + } }, candlestick: { colorScale: COLOR_SCALE diff --git a/packages/react-charts/src/components/ChartUtils/chart-domain.ts b/packages/react-charts/src/components/ChartUtils/chart-domain.ts index 7712ac66edd..d180d3e3c8d 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-domain.ts +++ b/packages/react-charts/src/components/ChartUtils/chart-domain.ts @@ -105,7 +105,7 @@ export const getDomain = ({ data, maxDomain, minDomain, x, y }: DomainInterface) */ export const getDomains = ({ maxDomain, minDomain, sources }: SourcesInterface): ChartDomain => { const domains: ChartDomain[] = []; - sources.forEach(source => { + sources.forEach((source) => { const { data: compData = source.data } = source.component ? source.component.props : undefined; const domain = getDomain({ data: compData, diff --git a/packages/react-charts/src/components/ChartUtils/chart-interactive-legend.ts b/packages/react-charts/src/components/ChartUtils/chart-interactive-legend.ts index fbddf42cbe0..fba78a17d3d 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-interactive-legend.ts +++ b/packages/react-charts/src/components/ChartUtils/chart-interactive-legend.ts @@ -29,7 +29,7 @@ const getChildNames = ({ chartNames, omitIndex }: ChartInteractiveLegendExtInter chartNames.forEach((chartName: any, index: number) => { if (index !== omitIndex) { if (Array.isArray(chartName)) { - chartName.forEach(name => result.push(name)); + chartName.forEach((name) => result.push(name)); } else { result.push(chartName); } diff --git a/packages/react-charts/src/components/ChartUtils/chart-legend.ts b/packages/react-charts/src/components/ChartUtils/chart-legend.ts index 6a36d18b205..060a683535f 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-legend.ts +++ b/packages/react-charts/src/components/ChartUtils/chart-legend.ts @@ -492,7 +492,7 @@ const getMaxLegendTextSize = ({ legendData, theme }: ChartLegendTextMaxSizeInter } let result = ''; - legendData.forEach(data => { + legendData.forEach((data) => { if (data.name && data.name.length > result.length) { result = data.name; } diff --git a/packages/react-charts/src/components/ChartUtils/chart-patterns.tsx b/packages/react-charts/src/components/ChartUtils/chart-patterns.tsx index 122d9adad3c..08944b00b1c 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-patterns.tsx +++ b/packages/react-charts/src/components/ChartUtils/chart-patterns.tsx @@ -250,9 +250,13 @@ export const getPatternDefs = ({ {colorScale.map((color: string, index: number) => { - const { d, fill, stroke = color, strokeWidth, ...rest } = defaultPatterns[ - (index + offset) % defaultPatterns.length - ]; + const { + d, + fill, + stroke = color, + strokeWidth, + ...rest + } = defaultPatterns[(index + offset) % defaultPatterns.length]; const id = getPatternDefsId(patternId, index); return ( @@ -281,7 +285,7 @@ const getDefaultColorScale = (colorScale: string[], themeColorScale: string[]) = const result: string[] = []; const colors = colorScale ? colorScale : themeColorScale; - colors.forEach(val => result.push(val)); + colors.forEach((val) => result.push(val)); return result; }; diff --git a/packages/react-charts/src/components/ChartUtils/chart-theme-types.ts b/packages/react-charts/src/components/ChartUtils/chart-theme-types.ts index fa11844e771..baeab5caae6 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-theme-types.ts +++ b/packages/react-charts/src/components/ChartUtils/chart-theme-types.ts @@ -17,7 +17,7 @@ import { ChartDonutUtilizationStaticTheme, ChartDonutThresholdDynamicTheme, ChartDonutThresholdStaticTheme, - ChartThresholdTheme, + ChartThresholdTheme } from '../ChartTheme/ChartThemeTypes'; import { getTheme, getCustomTheme } from './chart-theme'; diff --git a/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts b/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts index b065df9a30e..5d7bf819b75 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts +++ b/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts @@ -184,7 +184,7 @@ export const getLegendTooltipSize = ({ }); // Replace whitespace with spacer char for consistency in width - const formattedData = data.map(val => ({ + const formattedData = data.map((val) => ({ name: val.name.replace(/ /g, spacer) })); @@ -231,7 +231,7 @@ export const getLegendTooltipVisibleData = ({ let index = -1; for (let i = 0; i < legendData.length; i++) { const data = legendData[i]; - const activePoint = activePoints ? activePoints.find(item => item.childName === data.childName) : ''; + const activePoint = activePoints ? activePoints.find((item) => item.childName === data.childName) : ''; if ( !activePoint || (data.symbol && data.symbol.type === 'eyeSlash' && data.symbol.fill === chart_color_black_500.var) @@ -273,7 +273,7 @@ export const getLegendTooltipVisibleText = ({ if (legendData) { let index = -1; for (const data of legendData) { - const activePoint = activePoints ? activePoints.find(item => item.childName === data.childName) : ''; + const activePoint = activePoints ? activePoints.find((item) => item.childName === data.childName) : ''; if ( !activePoint || (data.symbol && data.symbol.type === 'eyeSlash' && data.symbol.fill === chart_color_black_500.var) diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx index 9abdd0f13fb..e45aea568ec 100644 --- a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx +++ b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx @@ -230,7 +230,7 @@ interface CodeEditorState { copied: boolean; } -export class CodeEditor extends React.Component { +class CodeEditor extends React.Component { static displayName = 'CodeEditor'; private editor: editor.IStandaloneCodeEditor | null = null; private wrapperRef = React.createRef(); @@ -668,3 +668,5 @@ export class CodeEditor extends React.Component ({ + value: jest.fn().mockImplementation((query) => ({ matches: false, media: query, onchange: null, @@ -12,13 +12,13 @@ Object.defineProperty(window, 'matchMedia', { removeListener: jest.fn(), // Deprecated addEventListener: jest.fn(), removeEventListener: jest.fn(), - dispatchEvent: jest.fn(), - })), + dispatchEvent: jest.fn() + })) }); describe('CodeEditor', () => { beforeAll(() => { - window.HTMLCanvasElement.prototype.getContext = () => ({} as any); + window.HTMLCanvasElement.prototype.getContext = () => ({}) as any; }); test('matches snapshot without props', () => { diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorBasic.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorBasic.tsx index 46c2468287f..da741c2e25d 100644 --- a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorBasic.tsx +++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorBasic.tsx @@ -8,17 +8,17 @@ export const CodeEditorBasic: React.FunctionComponent = () => { const [isReadOnly, setIsReadOnly] = React.useState(false); const [isMinimapVisible, setIsMinimapVisible] = React.useState(false); - const toggleDarkTheme = checked => { + const toggleDarkTheme = (checked) => { setIsDarkTheme(checked); }; - const toggleLineNumbers = checked => { + const toggleLineNumbers = (checked) => { setIsLineNumbersVisible(checked); }; - const toggleReadOnly = checked => { + const toggleReadOnly = (checked) => { setIsReadOnly(checked); }; - const toggleMinimap = checked => { + const toggleMinimap = (checked) => { setIsMinimapVisible(checked); }; @@ -30,7 +30,7 @@ export const CodeEditorBasic: React.FunctionComponent = () => { monaco.editor.getModels()[0].updateOptions({ tabSize: 5 }); }; - const onChange = value => { + const onChange = (value) => { // eslint-disable-next-line no-console console.log(value); }; diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorCustomControl.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorCustomControl.tsx index bdacfdc073c..0d9b1368410 100644 --- a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorCustomControl.tsx +++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorCustomControl.tsx @@ -5,11 +5,11 @@ import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon'; export const CodeEditorCustomControl: React.FunctionComponent = () => { const [code, setCode] = React.useState(''); - const onChange = code => { + const onChange = (code) => { setCode(code); }; - const onExecuteCode = code => { + const onExecuteCode = (code) => { // eslint-disable-next-line no-console console.log(code); }; diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx index 2ca28dc7af8..99cba3581f8 100644 --- a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx +++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx @@ -11,7 +11,7 @@ export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => { monaco.editor.getModels()[0].updateOptions({ tabSize: 5 }); }; - const onChange = value => { + const onChange = (value) => { // eslint-disable-next-line no-console console.log(value); }; @@ -41,7 +41,7 @@ export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => { {shortcut.keys - .map(key => ( + .map((key) => ( {key} diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorSizeToFit.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorSizeToFit.tsx index 3b285d9771e..6b61cc10666 100644 --- a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorSizeToFit.tsx +++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorSizeToFit.tsx @@ -10,7 +10,7 @@ export const CodeEditorSizeToFit: React.FunctionComponent = () => { monaco.editor.getModels()[0].updateOptions({ tabSize: 5 }); }; - const onChange = value => { + const onChange = (value) => { // eslint-disable-next-line no-console console.log(value); }; diff --git a/packages/react-core/src/components/AboutModal/AboutModal.tsx b/packages/react-core/src/components/AboutModal/AboutModal.tsx index a4e5b2c2658..d75aaec82f3 100644 --- a/packages/react-core/src/components/AboutModal/AboutModal.tsx +++ b/packages/react-core/src/components/AboutModal/AboutModal.tsx @@ -90,7 +90,7 @@ export const AboutModal: React.FunctionComponent = ({ = ({ - onClose = _e => undefined as any, + onClose = (_e) => undefined as any, 'aria-label': ariaLabel = 'Close Dialog', ...props }: AboutModalBoxCloseButtonProps) => ( diff --git a/packages/react-core/src/components/AboutModal/examples/AboutModalBasic.tsx b/packages/react-core/src/components/AboutModal/examples/AboutModalBasic.tsx index cdee329bbb5..865262689e0 100644 --- a/packages/react-core/src/components/AboutModal/examples/AboutModalBasic.tsx +++ b/packages/react-core/src/components/AboutModal/examples/AboutModalBasic.tsx @@ -20,7 +20,7 @@ export const AboutModalBasic: React.FunctionComponent = () => { trademark="Trademark and copyright information here" brandImageSrc={brandImg} brandImageAlt="Patternfly Logo" - backgroundImageSrc='/assets/images/pfbg-icon.svg' + backgroundImageSrc="/assets/images/pfbg-icon.svg" productName="Product Name" > diff --git a/packages/react-core/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx b/packages/react-core/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx index 73be08b733d..1029806dd8e 100644 --- a/packages/react-core/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx +++ b/packages/react-core/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx @@ -20,7 +20,7 @@ export const AboutModalComplexUserPositionedContent: React.FunctionComponent = ( trademark="Trademark and copyright information here" brandImageSrc={brandImg} brandImageAlt="Patternfly Logo" - backgroundImageSrc='/assets/images/pfbg-icon.svg' + backgroundImageSrc="/assets/images/pfbg-icon.svg" hasNoContentContainer={true} productName="Product Name" > diff --git a/packages/react-core/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx b/packages/react-core/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx index e03ed49a65b..cae0d76521a 100644 --- a/packages/react-core/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx +++ b/packages/react-core/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx @@ -20,7 +20,7 @@ export const AboutModalWithoutProductName: React.FunctionComponent = () => { trademark="Trademark and copyright information here" brandImageSrc={brandImg} brandImageAlt="Patternfly Logo" - backgroundImageSrc='/assets/images/pfbg-icon.svg' + backgroundImageSrc="/assets/images/pfbg-icon.svg" aria-label="No product name about modal" > diff --git a/packages/react-core/src/components/Accordion/examples/AccordionFixedWithMultipleExpandBehavior.tsx b/packages/react-core/src/components/Accordion/examples/AccordionFixedWithMultipleExpandBehavior.tsx index ec690b1ba42..ceb7a8d4486 100644 --- a/packages/react-core/src/components/Accordion/examples/AccordionFixedWithMultipleExpandBehavior.tsx +++ b/packages/react-core/src/components/Accordion/examples/AccordionFixedWithMultipleExpandBehavior.tsx @@ -4,7 +4,7 @@ import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@pa export const AccordionFixedWithMultipleExpandBehavior: React.FunctionComponent = () => { const [expanded, setExpanded] = React.useState(['ex2-toggle4']); - const toggle = id => { + const toggle = (id) => { const index = expanded.indexOf(id); const newExpanded: string[] = index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id]; diff --git a/packages/react-core/src/components/Alert/AlertGroup.tsx b/packages/react-core/src/components/Alert/AlertGroup.tsx index b3a33b21504..12c99aa8daf 100644 --- a/packages/react-core/src/components/Alert/AlertGroup.tsx +++ b/packages/react-core/src/components/Alert/AlertGroup.tsx @@ -26,7 +26,7 @@ interface AlertGroupState { container: HTMLElement; } -export class AlertGroup extends React.Component { +class AlertGroup extends React.Component { static displayName = 'AlertGroup'; state = { container: undefined @@ -93,3 +93,5 @@ export class AlertGroup extends React.Component { const getUniqueId: () => number = () => new Date().getTime(); const addAlert = (alertInfo: AlertInfo) => { - setAlerts(prevAlertInfo => [...prevAlertInfo, alertInfo]); + setAlerts((prevAlertInfo) => [...prevAlertInfo, alertInfo]); }; React.useEffect(() => { diff --git a/packages/react-core/src/components/Alert/examples/AlertDynamicLiveRegion.tsx b/packages/react-core/src/components/Alert/examples/AlertDynamicLiveRegion.tsx index 5438f14cf82..af6bbbf41fe 100644 --- a/packages/react-core/src/components/Alert/examples/AlertDynamicLiveRegion.tsx +++ b/packages/react-core/src/components/Alert/examples/AlertDynamicLiveRegion.tsx @@ -13,7 +13,7 @@ export const DynamicLiveRegionAlert: React.FunctionComponent = () => { const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' '); const addAlert = (alertInfo: AlertInfo) => { - setAlerts(prevAlertInfo => [...prevAlertInfo, alertInfo]); + setAlerts((prevAlertInfo) => [...prevAlertInfo, alertInfo]); }; const addSuccessAlert = () => { diff --git a/packages/react-core/src/components/Alert/examples/AlertGroupAsync.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupAsync.tsx index b302808bc1f..3b4af10ddc1 100644 --- a/packages/react-core/src/components/Alert/examples/AlertGroupAsync.tsx +++ b/packages/react-core/src/components/Alert/examples/AlertGroupAsync.tsx @@ -19,7 +19,7 @@ export const AlertGroupAsync: React.FunctionComponent = () => { const getUniqueId = () => new Date().getTime(); const addAlert = () => { - setAlerts(prevAlerts => [ + setAlerts((prevAlerts) => [ ...prevAlerts, { title: `Async notification ${prevAlerts.length + 1} was added to the queue.`, @@ -30,7 +30,7 @@ export const AlertGroupAsync: React.FunctionComponent = () => { }; const removeAlert = (key: React.Key) => { - setAlerts(prevAlerts => [...prevAlerts.filter(alert => alert.key !== key)]); + setAlerts((prevAlerts) => [...prevAlerts.filter((alert) => alert.key !== key)]); }; const startAsyncAlerts = () => { diff --git a/packages/react-core/src/components/Alert/examples/AlertGroupMultipleDynamic.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupMultipleDynamic.tsx index ba5c9060b09..4573b4653e3 100644 --- a/packages/react-core/src/components/Alert/examples/AlertGroupMultipleDynamic.tsx +++ b/packages/react-core/src/components/Alert/examples/AlertGroupMultipleDynamic.tsx @@ -13,11 +13,11 @@ export const AlertGroupMultipleDynamic: React.FunctionComponent = () => { const [alerts, setAlerts] = React.useState[]>([]); const addAlerts = (incomingAlerts: Partial[]) => { - setAlerts(prevAlerts => [...prevAlerts, ...incomingAlerts]); + setAlerts((prevAlerts) => [...prevAlerts, ...incomingAlerts]); }; const removeAlert = (key: React.Key) => { - setAlerts(prevAlerts => [...prevAlerts.filter(alert => alert.key !== key)]); + setAlerts((prevAlerts) => [...prevAlerts.filter((alert) => alert.key !== key)]); }; const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' '); diff --git a/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamic.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamic.tsx index d2d339d8286..577c6a30c71 100644 --- a/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamic.tsx +++ b/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamic.tsx @@ -13,11 +13,11 @@ export const AlertGroupSingularDynamic: React.FunctionComponent = () => { const [alerts, setAlerts] = React.useState[]>([]); const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => { - setAlerts(prevAlerts => [...prevAlerts, { title, variant, key }]); + setAlerts((prevAlerts) => [...prevAlerts, { title, variant, key }]); }; const removeAlert = (key: React.Key) => { - setAlerts(prevAlerts => [...prevAlerts.filter(alert => alert.key !== key)]); + setAlerts((prevAlerts) => [...prevAlerts.filter((alert) => alert.key !== key)]); }; const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' '); diff --git a/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamicOverflow.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamicOverflow.tsx index ebf127e8e82..8f2d5172432 100644 --- a/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamicOverflow.tsx +++ b/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamicOverflow.tsx @@ -24,12 +24,12 @@ export const AlertGroupSingularDynamicOverflow: React.FunctionComponent = () => }; const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => { - setAlerts(prevAlerts => [...prevAlerts, { title, variant, key }]); + setAlerts((prevAlerts) => [...prevAlerts, { title, variant, key }]); setOverflowMessage(getOverflowMessage(alerts.length + 1)); }; const removeAlert = (key: React.Key) => { - const newAlerts = alerts.filter(alert => alert.key !== key); + const newAlerts = alerts.filter((alert) => alert.key !== key); setAlerts(newAlerts); setOverflowMessage(getOverflowMessage(newAlerts.length)); }; diff --git a/packages/react-core/src/components/Alert/examples/AlertGroupToast.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupToast.tsx index abf012abb88..be6ca455fe4 100644 --- a/packages/react-core/src/components/Alert/examples/AlertGroupToast.tsx +++ b/packages/react-core/src/components/Alert/examples/AlertGroupToast.tsx @@ -13,11 +13,11 @@ export const AlertGroupToast: React.FunctionComponent = () => { const [alerts, setAlerts] = React.useState[]>([]); const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => { - setAlerts(prevAlerts => [...prevAlerts, { title, variant, key }]); + setAlerts((prevAlerts) => [...prevAlerts, { title, variant, key }]); }; const removeAlert = (key: React.Key) => { - setAlerts(prevAlerts => [...prevAlerts.filter(alert => alert.key !== key)]); + setAlerts((prevAlerts) => [...prevAlerts.filter((alert) => alert.key !== key)]); }; const btnClasses = ['pf-v5-c-button', 'pf-m-secondary'].join(' '); diff --git a/packages/react-core/src/components/Alert/examples/AlertGroupToastOverflowCapture.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupToastOverflowCapture.tsx index cadaa98b8b2..4115d295cab 100644 --- a/packages/react-core/src/components/Alert/examples/AlertGroupToastOverflowCapture.tsx +++ b/packages/react-core/src/components/Alert/examples/AlertGroupToastOverflowCapture.tsx @@ -24,12 +24,12 @@ export const AlertGroupToastOverflowCapture: React.FunctionComponent = () => { }; const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => { - setAlerts(prevAlerts => [...prevAlerts, { title, variant, key }]); + setAlerts((prevAlerts) => [...prevAlerts, { title, variant, key }]); setOverflowMessage(getOverflowMessage(alerts.length + 1)); }; const removeAlert = (key: React.Key) => { - const newAlerts = alerts.filter(alert => alert.key !== key); + const newAlerts = alerts.filter((alert) => alert.key !== key); setAlerts(newAlerts); setOverflowMessage(getOverflowMessage(newAlerts.length)); }; diff --git a/packages/react-core/src/components/Alert/index.ts b/packages/react-core/src/components/Alert/index.ts index 5122cae9524..d5b940cc0a1 100644 --- a/packages/react-core/src/components/Alert/index.ts +++ b/packages/react-core/src/components/Alert/index.ts @@ -2,4 +2,4 @@ export * from './Alert'; export * from './AlertContext'; export * from './AlertActionCloseButton'; export * from './AlertActionLink'; -export * from './AlertGroup'; \ No newline at end of file +export * from './AlertGroup'; diff --git a/packages/react-core/src/components/Brand/Brand.tsx b/packages/react-core/src/components/Brand/Brand.tsx index 595109b8218..03ed8a9bcea 100644 --- a/packages/react-core/src/components/Brand/Brand.tsx +++ b/packages/react-core/src/components/Brand/Brand.tsx @@ -68,7 +68,13 @@ export const Brand: React.FunctionComponent = ({ {alt} ) : ( - {alt} + {alt} ) ); }; diff --git a/packages/react-core/src/components/Brand/examples/BrandBasic.tsx b/packages/react-core/src/components/Brand/examples/BrandBasic.tsx index 760d4a05f42..fa75a91d862 100644 --- a/packages/react-core/src/components/Brand/examples/BrandBasic.tsx +++ b/packages/react-core/src/components/Brand/examples/BrandBasic.tsx @@ -2,4 +2,6 @@ import React from 'react'; import { Brand } from '@patternfly/react-core'; import pfLogo from './pfLogo.svg'; -export const BrandBasic: React.FunctionComponent = () => ; +export const BrandBasic: React.FunctionComponent = () => ( + +); diff --git a/packages/react-core/src/components/Button/examples/ButtonVariations.tsx b/packages/react-core/src/components/Button/examples/ButtonVariations.tsx index 1eef9ff07ff..badb9e33d91 100644 --- a/packages/react-core/src/components/Button/examples/ButtonVariations.tsx +++ b/packages/react-core/src/components/Button/examples/ButtonVariations.tsx @@ -7,12 +7,24 @@ import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon'; export const ButtonVariations: React.FunctionComponent = () => ( - {' '} + {' '} + {' '} {' '} - {' '} - + {' '} + {' '} +

-
-
diff --git a/packages/react-table/src/components/Table/EditableSelectInputCell.tsx b/packages/react-table/src/components/Table/EditableSelectInputCell.tsx index 014303e1b6f..ca6c3ffd6d3 100644 --- a/packages/react-table/src/components/Table/EditableSelectInputCell.tsx +++ b/packages/react-table/src/components/Table/EditableSelectInputCell.tsx @@ -1,9 +1,6 @@ import * as React from 'react'; import { css } from '@patternfly/react-styles'; -import { - Select, - SelectOptionObject -} from '@patternfly/react-core/dist/esm/deprecated/components/Select'; +import { Select, SelectOptionObject } from '@patternfly/react-core/dist/esm/deprecated/components/Select'; import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit'; import formStyles from '@patternfly/react-styles/css/components/Form/form'; import { EditableSelectInputProps } from './base/types'; diff --git a/packages/react-table/src/components/Table/RowWrapper.tsx b/packages/react-table/src/components/Table/RowWrapper.tsx index b0534d59850..f8d17756e9e 100644 --- a/packages/react-table/src/components/Table/RowWrapper.tsx +++ b/packages/react-table/src/components/Table/RowWrapper.tsx @@ -26,7 +26,7 @@ export interface RowWrapperProps extends OUIAProps { ouiaId?: number | string; } -export class RowWrapper extends React.Component { +class RowWrapper extends React.Component { static displayName = 'RowWrapper'; static defaultProps = { className: '' as string, @@ -79,13 +79,13 @@ export class RowWrapper extends React.Component { handleScroll = (event: Event): void => { if (!this._unmounted) { - this.props.onScroll((event as unknown) as React.UIEvent); + this.props.onScroll(event as unknown as React.UIEvent); } }; handleResize = (event: Event) => { if (!this._unmounted) { - this.props.onResize((event as unknown) as React.UIEvent); + this.props.onResize(event as unknown as React.UIEvent); } }; @@ -117,3 +117,5 @@ export class RowWrapper extends React.Component { ); } } + +export { RowWrapper }; diff --git a/packages/react-table/src/components/Table/Table.tsx b/packages/react-table/src/components/Table/Table.tsx index 6e0fed70d51..8dbaaf0a8d3 100644 --- a/packages/react-table/src/components/Table/Table.tsx +++ b/packages/react-table/src/components/Table/Table.tsx @@ -164,7 +164,7 @@ const TableBase: React.FunctionComponent = ({ const activeElement = document.activeElement; const key = event.key; const rows = (Array.from(tableRef.current.querySelectorAll('tbody tr')) as Element[]).filter( - el => !el.classList.contains('pf-m-disabled') && !(el as HTMLElement).hidden + (el) => !el.classList.contains('pf-m-disabled') && !(el as HTMLElement).hidden ); if (key === 'Space' || key === 'Enter') { (activeElement as HTMLElement).click(); diff --git a/packages/react-table/src/components/Table/base/evaluate-transforms.ts b/packages/react-table/src/components/Table/base/evaluate-transforms.ts index f38c388cfb3..5449074cf9b 100644 --- a/packages/react-table/src/components/Table/base/evaluate-transforms.ts +++ b/packages/react-table/src/components/Table/base/evaluate-transforms.ts @@ -18,7 +18,7 @@ export function evaluateTransforms( extraParameters: ExtraParamsType = {} ) { if (process.env.NODE_ENV !== 'production') { - if (!transforms.every(f => typeof f === 'function')) { + if (!transforms.every((f) => typeof f === 'function')) { throw new Error("All transforms weren't functions!"); } } @@ -27,5 +27,5 @@ export function evaluateTransforms( return {}; } - return mergeProps(...transforms.map(transform => transform(value, extraParameters))); + return mergeProps(...transforms.map((transform) => transform(value, extraParameters))); } diff --git a/packages/react-table/src/components/Table/base/provider.tsx b/packages/react-table/src/components/Table/base/provider.tsx index 771b53e5d2a..5ab4762a889 100644 --- a/packages/react-table/src/components/Table/base/provider.tsx +++ b/packages/react-table/src/components/Table/base/provider.tsx @@ -20,7 +20,7 @@ export const ProviderContext = React.createContext({ renderers: null as RenderersTypes['renderers'] }); -export class Provider extends React.Component { +class Provider extends React.Component { static displayName = 'Provider'; static defaultProps = { renderers: TableDefaults.renderers @@ -55,3 +55,5 @@ export class Provider extends React.Component { ); } } + +export { Provider }; diff --git a/packages/react-table/src/components/Table/base/types.tsx b/packages/react-table/src/components/Table/base/types.tsx index e147be2321f..eb83d0ac4fe 100644 --- a/packages/react-table/src/components/Table/base/types.tsx +++ b/packages/react-table/src/components/Table/base/types.tsx @@ -9,10 +9,7 @@ import * as React from 'react'; import { TooltipProps } from '@patternfly/react-core/dist/esm/components/Tooltip'; import { PopoverProps } from '@patternfly/react-core/dist/esm/components/Popover'; import { DropdownPosition, DropdownDirection } from '@patternfly/react-core/dist/esm/deprecated/components/Dropdown'; -import { - SelectOptionObject, - SelectProps -} from '@patternfly/react-core/dist/esm/deprecated/components/Select'; +import { SelectOptionObject, SelectProps } from '@patternfly/react-core/dist/esm/deprecated/components/Select'; import { Table } from '../Table'; import { Thead } from '../Thead'; import { Tbody } from '../Tbody'; diff --git a/packages/react-table/src/components/Table/examples/TableActions.tsx b/packages/react-table/src/components/Table/examples/TableActions.tsx index 864f74e998e..9d42be87717 100644 --- a/packages/react-table/src/components/Table/examples/TableActions.tsx +++ b/packages/react-table/src/components/Table/examples/TableActions.tsx @@ -121,7 +121,7 @@ export const TableActions: React.FunctionComponent = () => { - {repositories.map(repo => { + {repositories.map((repo) => { // Arbitrary logic to determine which rows get which actions in this example let rowActions: IAction[] | null = defaultActions(repo); if (repo.name === 'a') { diff --git a/packages/react-table/src/components/Table/examples/TableBasic.tsx b/packages/react-table/src/components/Table/examples/TableBasic.tsx index 2721e83ebf0..29803a796e7 100644 --- a/packages/react-table/src/components/Table/examples/TableBasic.tsx +++ b/packages/react-table/src/components/Table/examples/TableBasic.tsx @@ -73,7 +73,7 @@ export const TableBasic: React.FunctionComponent = () => { - {repositories.map(repo => ( + {repositories.map((repo) => ( {repo.name} {repo.branches} diff --git a/packages/react-table/src/components/Table/examples/TableCellWidth.tsx b/packages/react-table/src/components/Table/examples/TableCellWidth.tsx index 5d094dd74d8..c6b3322f8a3 100644 --- a/packages/react-table/src/components/Table/examples/TableCellWidth.tsx +++ b/packages/react-table/src/components/Table/examples/TableCellWidth.tsx @@ -39,7 +39,7 @@ export const TableCellWidth: React.FunctionComponent = () => { - {repositories.map(repo => ( + {repositories.map((repo) => ( {repo.name} {repo.branches} diff --git a/packages/react-table/src/components/Table/examples/TableClickable.tsx b/packages/react-table/src/components/Table/examples/TableClickable.tsx index becadfe9680..7102484a403 100644 --- a/packages/react-table/src/components/Table/examples/TableClickable.tsx +++ b/packages/react-table/src/components/Table/examples/TableClickable.tsx @@ -41,7 +41,7 @@ export const TableClickable: React.FunctionComponent = () => { - {repositories.map(repo => ( + {repositories.map((repo) => ( setSelectedRepoName(repo.name)} diff --git a/packages/react-table/src/components/Table/examples/TableDraggable.tsx b/packages/react-table/src/components/Table/examples/TableDraggable.tsx index f67f91dee84..d37a0307617 100644 --- a/packages/react-table/src/components/Table/examples/TableDraggable.tsx +++ b/packages/react-table/src/components/Table/examples/TableDraggable.tsx @@ -11,7 +11,7 @@ export const TableDraggable: React.FunctionComponent = () => { const bodyRef = React.useRef(); - const onDragStart: TrProps['onDragStart'] = evt => { + const onDragStart: TrProps['onDragStart'] = (evt) => { evt.dataTransfer.effectAllowed = 'move'; evt.dataTransfer.setData('text/plain', evt.currentTarget.id); const draggedItemId = evt.currentTarget.id; @@ -37,20 +37,20 @@ export const TableDraggable: React.FunctionComponent = () => { const move = (itemOrder: string[]) => { const ulNode = bodyRef.current; const nodes = Array.from(ulNode.children); - if (nodes.map(node => node.id).every((id, i) => id === itemOrder[i])) { + if (nodes.map((node) => node.id).every((id, i) => id === itemOrder[i])) { return; } while (ulNode.firstChild) { ulNode.removeChild(ulNode.lastChild); } - itemOrder.forEach(id => { - ulNode.appendChild(nodes.find(n => n.id === id)); + itemOrder.forEach((id) => { + ulNode.appendChild(nodes.find((n) => n.id === id)); }); }; const onDragCancel = () => { - Array.from(bodyRef.current.children).forEach(el => { + Array.from(bodyRef.current.children).forEach((el) => { el.classList.remove(styles.modifiers.ghostRow); el.setAttribute('aria-pressed', 'false'); }); @@ -59,7 +59,7 @@ export const TableDraggable: React.FunctionComponent = () => { setIsDragging(false); }; - const onDragLeave: TbodyProps['onDragLeave'] = evt => { + const onDragLeave: TbodyProps['onDragLeave'] = (evt) => { if (!isValidDrop(evt)) { move(itemOrder); setDraggingToItemIndex(null); @@ -76,7 +76,7 @@ export const TableDraggable: React.FunctionComponent = () => { ); }; - const onDrop: TrProps['onDrop'] = evt => { + const onDrop: TrProps['onDrop'] = (evt) => { if (isValidDrop(evt)) { setItemOrder(tempItemOrder); } else { @@ -84,7 +84,7 @@ export const TableDraggable: React.FunctionComponent = () => { } }; - const onDragOver: TbodyProps['onDragOver'] = evt => { + const onDragOver: TbodyProps['onDragOver'] = (evt) => { evt.preventDefault(); const curListItem = (evt.target as HTMLTableSectionElement).closest('tr'); @@ -92,7 +92,7 @@ export const TableDraggable: React.FunctionComponent = () => { return null; } else { const dragId = curListItem.id; - const newDraggingToItemIndex = Array.from(bodyRef.current.children).findIndex(item => item.id === dragId); + const newDraggingToItemIndex = Array.from(bodyRef.current.children).findIndex((item) => item.id === dragId); if (newDraggingToItemIndex !== draggingToItemIndex) { const tempItemOrder = moveItem([...itemOrder], draggedItemId, newDraggingToItemIndex); move(tempItemOrder); @@ -102,7 +102,7 @@ export const TableDraggable: React.FunctionComponent = () => { } }; - const onDragEnd: TrProps['onDragEnd'] = evt => { + const onDragEnd: TrProps['onDragEnd'] = (evt) => { const target = evt.target as HTMLTableRowElement; target.classList.remove(styles.modifiers.ghostRow); target.setAttribute('aria-pressed', 'false'); diff --git a/packages/react-table/src/components/Table/examples/TableExpandable.tsx b/packages/react-table/src/components/Table/examples/TableExpandable.tsx index 50f7124473c..7cb8ab08e11 100644 --- a/packages/react-table/src/components/Table/examples/TableExpandable.tsx +++ b/packages/react-table/src/components/Table/examples/TableExpandable.tsx @@ -96,11 +96,11 @@ export const TableExpandable: React.FunctionComponent = () => { // In this example, expanded rows are tracked by the repo names from each row. This could be any unique identifier. // This is to prevent state from being based on row order index in case we later add sorting. // Note that this behavior is very similar to selection state. - const initialExpandedRepoNames = repositories.filter(repo => !!repo.details).map(repo => repo.name); // Default to all expanded + const initialExpandedRepoNames = repositories.filter((repo) => !!repo.details).map((repo) => repo.name); // Default to all expanded const [expandedRepoNames, setExpandedRepoNames] = React.useState(initialExpandedRepoNames); const setRepoExpanded = (repo: Repository, isExpanding = true) => - setExpandedRepoNames(prevExpanded => { - const otherExpandedRepoNames = prevExpanded.filter(r => r !== repo.name); + setExpandedRepoNames((prevExpanded) => { + const otherExpandedRepoNames = prevExpanded.filter((r) => r !== repo.name); return isExpanding ? [...otherExpandedRepoNames, repo.name] : otherExpandedRepoNames; }); const isRepoExpanded = (repo: Repository) => expandedRepoNames.includes(repo.name); diff --git a/packages/react-table/src/components/Table/examples/TableFavoritable.tsx b/packages/react-table/src/components/Table/examples/TableFavoritable.tsx index 53c08f82074..8ece6c568e3 100644 --- a/packages/react-table/src/components/Table/examples/TableFavoritable.tsx +++ b/packages/react-table/src/components/Table/examples/TableFavoritable.tsx @@ -36,8 +36,8 @@ export const TableFavoritable: React.FunctionComponent = () => { // Favorite state is similar to selection state, see Selectable with checkbox. const [favoriteRepoNames, setFavoriteRepoNames] = React.useState([]); const setRepoFavorited = (repo: Repository, isFavoriting = true) => - setFavoriteRepoNames(prevFavorites => { - const otherFavorites = prevFavorites.filter(r => r !== repo.name); + setFavoriteRepoNames((prevFavorites) => { + const otherFavorites = prevFavorites.filter((r) => r !== repo.name); return isFavoriting ? [...otherFavorites, repo.name] : otherFavorites; }); const isRepoFavorited = (repo: Repository) => favoriteRepoNames.includes(repo.name); @@ -47,10 +47,10 @@ export const TableFavoritable: React.FunctionComponent = () => { // For more complex sorting, see Sortable. // Note: We also memoize the sortable values with useCallback to prevent rows jumping around when you change // the favorites while sorting on that column. Only updating the sort state will reorder the rows. - const getSortableRowValues = React.useCallback((repo: Repository): boolean[] => [isRepoFavorited(repo)], [ - activeSortIndex, - activeSortDirection - ]); + const getSortableRowValues = React.useCallback( + (repo: Repository): boolean[] => [isRepoFavorited(repo)], + [activeSortIndex, activeSortDirection] + ); // Note that we perform the sort as part of the component's render logic and not in onSort. // We shouldn't store the list of data in state because we don't want to have to sync that with props. diff --git a/packages/react-table/src/components/Table/examples/TableMultipleStickyColumns.tsx b/packages/react-table/src/components/Table/examples/TableMultipleStickyColumns.tsx index 0fbe3ca7cee..a2c99a4adfe 100644 --- a/packages/react-table/src/components/Table/examples/TableMultipleStickyColumns.tsx +++ b/packages/react-table/src/components/Table/examples/TableMultipleStickyColumns.tsx @@ -114,7 +114,7 @@ export const TableMultipleStickyColumns: React.FunctionComponent = () => { - {sortedFacts.map(fact => ( + {sortedFacts.map((fact) => ( {fact.name} diff --git a/packages/react-table/src/components/Table/examples/TableNestedExpandable.tsx b/packages/react-table/src/components/Table/examples/TableNestedExpandable.tsx index 4c317e05997..cee6e77f2a1 100644 --- a/packages/react-table/src/components/Table/examples/TableNestedExpandable.tsx +++ b/packages/react-table/src/components/Table/examples/TableNestedExpandable.tsx @@ -1,14 +1,5 @@ import React from 'react'; -import { - Table, - Thead, - Tr, - Th, - Tbody, - Td, - InnerScrollContainer, - ExpandableRowContent -} from '@patternfly/react-table'; +import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ExpandableRowContent } from '@patternfly/react-table'; import { Button } from '@patternfly/react-core'; interface Team { @@ -62,8 +53,8 @@ export const TableNestedExpandable: React.FunctionComponent = () => { // Note that this behavior is very similar to selection state. const [expandedTeamNames, setExpandedTeamNames] = React.useState([]); const setTeamExpanded = (team: Team, isExpanding = true) => - setExpandedTeamNames(prevExpanded => { - const otherExpandedTeamNames = prevExpanded.filter(t => t !== team.name); + setExpandedTeamNames((prevExpanded) => { + const otherExpandedTeamNames = prevExpanded.filter((t) => t !== team.name); return isExpanding ? [...otherExpandedTeamNames, team.name] : otherExpandedTeamNames; }); const isTeamExpanded = (team: Team) => expandedTeamNames.includes(team.name); diff --git a/packages/react-table/src/components/Table/examples/TableNestedTableExpandable.tsx b/packages/react-table/src/components/Table/examples/TableNestedTableExpandable.tsx index 93a14c53143..59855116a9c 100644 --- a/packages/react-table/src/components/Table/examples/TableNestedTableExpandable.tsx +++ b/packages/react-table/src/components/Table/examples/TableNestedTableExpandable.tsx @@ -1,16 +1,6 @@ /* eslint-disable no-console */ import React from 'react'; -import { - Table, - Thead, - Tr, - Th, - Tbody, - Td, - ExpandableRowContent, - ActionsColumn, - IAction -} from '@patternfly/react-table'; +import { Table, Thead, Tr, Th, Tbody, Td, ExpandableRowContent, ActionsColumn, IAction } from '@patternfly/react-table'; interface Repository { name: string; @@ -57,7 +47,7 @@ const NestedReposTable: React.FunctionComponent = () => { - {prs.map(repo => ( + {prs.map((repo) => ( {repo.name} {repo.branches} @@ -111,11 +101,11 @@ export const TableExpandable: React.FunctionComponent = () => { // In this example, expanded rows are tracked by the repo names from each row. This could be any unique identifier. // This is to prevent state from being based on row order index in case we later add sorting. // Note that this behavior is very similar to selection state. - const initialExpandedRepoNames = repositories.filter(repo => !!repo.nestedComponent).map(repo => repo.name); // Default to all expanded + const initialExpandedRepoNames = repositories.filter((repo) => !!repo.nestedComponent).map((repo) => repo.name); // Default to all expanded const [expandedRepoNames, setExpandedRepoNames] = React.useState(initialExpandedRepoNames); const setRepoExpanded = (repo: Repository, isExpanding = true) => - setExpandedRepoNames(prevExpanded => { - const otherExpandedRepoNames = prevExpanded.filter(r => r !== repo.name); + setExpandedRepoNames((prevExpanded) => { + const otherExpandedRepoNames = prevExpanded.filter((r) => r !== repo.name); return isExpanding ? [...otherExpandedRepoNames, repo.name] : otherExpandedRepoNames; }); const isRepoExpanded = (repo: Repository) => expandedRepoNames.includes(repo.name); diff --git a/packages/react-table/src/components/Table/examples/TableRightStickyColumn.tsx b/packages/react-table/src/components/Table/examples/TableRightStickyColumn.tsx index ee3373599c5..c4650185cb3 100644 --- a/packages/react-table/src/components/Table/examples/TableRightStickyColumn.tsx +++ b/packages/react-table/src/components/Table/examples/TableRightStickyColumn.tsx @@ -110,7 +110,7 @@ export const ComposableTableRightStickyColumn: React.FunctionComponent = () => { - {sortedFacts.map(fact => ( + {sortedFacts.map((fact) => ( {fact.name} diff --git a/packages/react-table/src/components/Table/examples/TableSelectable.tsx b/packages/react-table/src/components/Table/examples/TableSelectable.tsx index a61213f2615..5811846fb93 100644 --- a/packages/react-table/src/components/Table/examples/TableSelectable.tsx +++ b/packages/react-table/src/components/Table/examples/TableSelectable.tsx @@ -35,12 +35,12 @@ export const TableSelectable: React.FunctionComponent = () => { // This is to prevent state from being based on row order index in case we later add sorting. const [selectedRepoNames, setSelectedRepoNames] = React.useState([]); const setRepoSelected = (repo: Repository, isSelecting = true) => - setSelectedRepoNames(prevSelected => { - const otherSelectedRepoNames = prevSelected.filter(r => r !== repo.name); + setSelectedRepoNames((prevSelected) => { + const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name); return isSelecting && isRepoSelectable(repo) ? [...otherSelectedRepoNames, repo.name] : otherSelectedRepoNames; }); const selectAllRepos = (isSelecting = true) => - setSelectedRepoNames(isSelecting ? selectableRepos.map(r => r.name) : []); + setSelectedRepoNames(isSelecting ? selectableRepos.map((r) => r.name) : []); const areAllReposSelected = selectedRepoNames.length === selectableRepos.length; const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name); @@ -56,7 +56,7 @@ export const TableSelectable: React.FunctionComponent = () => { numberSelected > 0 ? Array.from(new Array(numberSelected + 1), (_x, i) => i + recentSelectedRowIndex) : Array.from(new Array(Math.abs(numberSelected) + 1), (_x, i) => i + rowIndex); - intermediateIndexes.forEach(index => setRepoSelected(repositories[index], isSelecting)); + intermediateIndexes.forEach((index) => setRepoSelected(repositories[index], isSelecting)); } else { setRepoSelected(repo, isSelecting); } diff --git a/packages/react-table/src/components/Table/examples/TableStickyColumn.tsx b/packages/react-table/src/components/Table/examples/TableStickyColumn.tsx index 8544c860423..f6fea54a9bb 100644 --- a/packages/react-table/src/components/Table/examples/TableStickyColumn.tsx +++ b/packages/react-table/src/components/Table/examples/TableStickyColumn.tsx @@ -106,7 +106,7 @@ export const TableStickyColumn: React.FunctionComponent = () => { - {sortedFacts.map(fact => ( + {sortedFacts.map((fact) => ( {fact.name} diff --git a/packages/react-table/src/components/Table/examples/TableStickyColumnsAndHeader.tsx b/packages/react-table/src/components/Table/examples/TableStickyColumnsAndHeader.tsx index d76292189a2..68d39559119 100644 --- a/packages/react-table/src/components/Table/examples/TableStickyColumnsAndHeader.tsx +++ b/packages/react-table/src/components/Table/examples/TableStickyColumnsAndHeader.tsx @@ -126,7 +126,7 @@ export const TableStickyColumnsAndHeader: React.FunctionComponent = () => { - {sortedFacts.map(fact => ( + {sortedFacts.map((fact) => ( {fact.name} diff --git a/packages/react-table/src/components/Table/examples/TableStriped.tsx b/packages/react-table/src/components/Table/examples/TableStriped.tsx index 52bba996a15..7f1cf54fd03 100644 --- a/packages/react-table/src/components/Table/examples/TableStriped.tsx +++ b/packages/react-table/src/components/Table/examples/TableStriped.tsx @@ -39,7 +39,7 @@ export const TableStriped: React.FunctionComponent = () => { - {repositories.map(repo => ( + {repositories.map((repo) => ( {repo.name} {repo.branches} diff --git a/packages/react-table/src/components/Table/examples/TableStripedExpandable.tsx b/packages/react-table/src/components/Table/examples/TableStripedExpandable.tsx index 630b3a9b467..ddfd7dee692 100644 --- a/packages/react-table/src/components/Table/examples/TableStripedExpandable.tsx +++ b/packages/react-table/src/components/Table/examples/TableStripedExpandable.tsx @@ -91,11 +91,11 @@ export const TableStripedExpandable: React.FunctionComponent = () => { // In this example, expanded rows are tracked by the repo names from each row. This could be any unique identifier. // This is to prevent state from being based on row order index in case we later add sorting. // Note that this behavior is very similar to selection state. - const initialExpandedRepoNames = repositories.filter(repo => !!repo.details).map(repo => repo.name); // Default to all expanded + const initialExpandedRepoNames = repositories.filter((repo) => !!repo.details).map((repo) => repo.name); // Default to all expanded const [expandedRepoNames, setExpandedRepoNames] = React.useState(initialExpandedRepoNames); const setRepoExpanded = (repo: Repository, isExpanding = true) => - setExpandedRepoNames(prevExpanded => { - const otherExpandedRepoNames = prevExpanded.filter(r => r !== repo.name); + setExpandedRepoNames((prevExpanded) => { + const otherExpandedRepoNames = prevExpanded.filter((r) => r !== repo.name); return isExpanding ? [...otherExpandedRepoNames, repo.name] : otherExpandedRepoNames; }); const isRepoExpanded = (repo: Repository) => expandedRepoNames.includes(repo.name); @@ -112,12 +112,7 @@ export const TableStripedExpandable: React.FunctionComponent = () => { id="toggle-compact-striped" name="toggle-compact-striped" /> - +
- {repositories1.map(repo => ( + {repositories1.map((repo) => ( - {repositories2.map(repo => ( + {repositories2.map((repo) => (
diff --git a/packages/react-table/src/components/Table/examples/TableStripedMultipleTbody.tsx b/packages/react-table/src/components/Table/examples/TableStripedMultipleTbody.tsx index a6425b06409..df0d9c70bae 100644 --- a/packages/react-table/src/components/Table/examples/TableStripedMultipleTbody.tsx +++ b/packages/react-table/src/components/Table/examples/TableStripedMultipleTbody.tsx @@ -74,7 +74,7 @@ export const TableStripedMultipleTbody: React.FunctionComponent = () => {
{repo.description ? ( @@ -95,7 +95,7 @@ export const TableStripedMultipleTbody: React.FunctionComponent = () => { ))}
{repo.description ? ( diff --git a/packages/react-table/src/components/Table/examples/TableTree.tsx b/packages/react-table/src/components/Table/examples/TableTree.tsx index 64c9c68fa29..afb7464708d 100644 --- a/packages/react-table/src/components/Table/examples/TableTree.tsx +++ b/packages/react-table/src/components/Table/examples/TableTree.tsx @@ -93,7 +93,7 @@ export const TableTree: React.FunctionComponent = () => { return [node]; } else { let children: RepositoriesTreeNode[] = []; - node.children.forEach(child => { + node.children.forEach((child) => { children = [...children, ...getDescendants(child)]; }); return children; @@ -101,9 +101,9 @@ export const TableTree: React.FunctionComponent = () => { }; const areAllDescendantsSelected = (node: RepositoriesTreeNode) => - getDescendants(node).every(n => selectedNodeNames.includes(n.name)); + getDescendants(node).every((n) => selectedNodeNames.includes(n.name)); const areSomeDescendantsSelected = (node: RepositoriesTreeNode) => - getDescendants(node).some(n => selectedNodeNames.includes(n.name)); + getDescendants(node).some((n) => selectedNodeNames.includes(n.name)); const isNodeChecked = (node: RepositoriesTreeNode) => { if (areAllDescendantsSelected(node)) { @@ -144,19 +144,19 @@ export const TableTree: React.FunctionComponent = () => { const treeRow: TdProps['treeRow'] = { onCollapse: () => - setExpandedNodeNames(prevExpanded => { - const otherExpandedNodeNames = prevExpanded.filter(name => name !== node.name); + setExpandedNodeNames((prevExpanded) => { + const otherExpandedNodeNames = prevExpanded.filter((name) => name !== node.name); return isExpanded ? otherExpandedNodeNames : [...otherExpandedNodeNames, node.name]; }), onToggleRowDetails: () => - setExpandedDetailsNodeNames(prevDetailsExpanded => { - const otherDetailsExpandedNodeNames = prevDetailsExpanded.filter(name => name !== node.name); + setExpandedDetailsNodeNames((prevDetailsExpanded) => { + const otherDetailsExpandedNodeNames = prevDetailsExpanded.filter((name) => name !== node.name); return isDetailsExpanded ? otherDetailsExpandedNodeNames : [...otherDetailsExpandedNodeNames, node.name]; }), onCheckChange: (_event, isChecking) => { - const nodeNamesToCheck = getDescendants(node).map(n => n.name); - setSelectedNodeNames(prevSelected => { - const otherSelectedNodeNames = prevSelected.filter(name => !nodeNamesToCheck.includes(name)); + const nodeNamesToCheck = getDescendants(node).map((n) => n.name); + setSelectedNodeNames((prevSelected) => { + const otherSelectedNodeNames = prevSelected.filter((name) => !nodeNamesToCheck.includes(name)); return !isChecking ? otherSelectedNodeNames : [...otherSelectedNodeNames, ...nodeNamesToCheck]; }); }, diff --git a/packages/react-table/src/components/Table/utils/decorators/cellActions.tsx b/packages/react-table/src/components/Table/utils/decorators/cellActions.tsx index c91a3097c7c..adef0c16dee 100644 --- a/packages/react-table/src/components/Table/utils/decorators/cellActions.tsx +++ b/packages/react-table/src/components/Table/utils/decorators/cellActions.tsx @@ -21,59 +21,57 @@ const resolveOrDefault = ( extraData: IExtraData ) => (typeof resolver === 'function' ? resolver(rowData, extraData) : defaultValue); -export const cellActions = ( - actions: IActions, - actionResolver: IActionsResolver, - areActionsDisabled: IAreActionsDisabled -): ITransform => ( - label: IFormatterValueType, - { - rowData, - column, - rowIndex, - columnIndex, - column: { - extraParams: { actionsToggle, actionsPopperProps } - }, - property - }: IExtra -) => { - const extraData = { - rowIndex, - columnIndex, - column, - property - }; - const resolvedActions = resolveOrDefault(actionResolver, actions, rowData, extraData) as IAction[]; - const resolvedIsDisabled = resolveOrDefault( - areActionsDisabled, - rowData && rowData.disableActions, - rowData, - extraData - ) as boolean; +export const cellActions = + (actions: IActions, actionResolver: IActionsResolver, areActionsDisabled: IAreActionsDisabled): ITransform => + ( + label: IFormatterValueType, + { + rowData, + column, + rowIndex, + columnIndex, + column: { + extraParams: { actionsToggle, actionsPopperProps } + }, + property + }: IExtra + ) => { + const extraData = { + rowIndex, + columnIndex, + column, + property + }; + const resolvedActions = resolveOrDefault(actionResolver, actions, rowData, extraData) as IAction[]; + const resolvedIsDisabled = resolveOrDefault( + areActionsDisabled, + rowData && rowData.disableActions, + rowData, + extraData + ) as boolean; - const renderProps = - resolvedActions && (resolvedActions as []).length > 0 - ? { - children: ( - - {label as React.ReactNode} - - ) - } - : {}; + const renderProps = + resolvedActions && (resolvedActions as []).length > 0 + ? { + children: ( + + {label as React.ReactNode} + + ) + } + : {}; - return { - className: css(styles.tableAction), - style: { paddingRight: 0 }, - isVisible: true, - ...renderProps + return { + className: css(styles.tableAction), + style: { paddingRight: 0 }, + isVisible: true, + ...renderProps + }; }; -}; diff --git a/packages/react-table/src/components/Table/utils/decorators/cellWidth.ts b/packages/react-table/src/components/Table/utils/decorators/cellWidth.ts index 99a7068cec7..8c7b8b1e788 100644 --- a/packages/react-table/src/components/Table/utils/decorators/cellWidth.ts +++ b/packages/react-table/src/components/Table/utils/decorators/cellWidth.ts @@ -19,12 +19,12 @@ type WidthClass = | 'width_90' | 'width_100'; -export const cellWidth = ( - width: 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 60 | 70 | 80 | 90 | 100 -): ITransform => () => ({ - className: css( - styles.modifiers[ - typeof width === 'number' ? (`width_${width}` as WidthClass) : (`width${capitalize(width)}` as WidthClass) - ] - ) -}); +export const cellWidth = + (width: 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 60 | 70 | 80 | 90 | 100): ITransform => + () => ({ + className: css( + styles.modifiers[ + typeof width === 'number' ? (`width_${width}` as WidthClass) : (`width${capitalize(width)}` as WidthClass) + ] + ) + }); diff --git a/packages/react-table/src/components/Table/utils/decorators/classNames.ts b/packages/react-table/src/components/Table/utils/decorators/classNames.ts index f6d3e9adefa..55e70e8d90e 100644 --- a/packages/react-table/src/components/Table/utils/decorators/classNames.ts +++ b/packages/react-table/src/components/Table/utils/decorators/classNames.ts @@ -31,13 +31,15 @@ export interface IVisibility { } export const Visibility = visibilityModifiers - .filter(key => styles.modifiers[key]) + .filter((key) => styles.modifiers[key]) .reduce((acc, curr) => { const key2 = curr.replace('_2xl', '2Xl') as keyof typeof Visibility; acc[key2] = styles.modifiers[curr]; return acc; }, {} as IVisibility); -export const classNames = (...classes: string[]): ITransform => () => ({ - className: css(...classes) -}); +export const classNames = + (...classes: string[]): ITransform => + () => ({ + className: css(...classes) + }); diff --git a/packages/react-table/src/components/Table/utils/decorators/editable.tsx b/packages/react-table/src/components/Table/utils/decorators/editable.tsx index 7a42a04ec5b..da3bbacb1d0 100644 --- a/packages/react-table/src/components/Table/utils/decorators/editable.tsx +++ b/packages/react-table/src/components/Table/utils/decorators/editable.tsx @@ -15,7 +15,7 @@ export const editable: ITransform = (label: IFormatterValueType, { rowIndex, row validationErrors = rowData.rowEditValidationRules && rowData.rowEditValidationRules.reduce((acc, rule) => { - const invalidCells = (rowData.cells as IRowCell[]).filter(cellData => { + const invalidCells = (rowData.cells as IRowCell[]).filter((cellData) => { const testValue = cellData.props.editableValue === '' ? '' : cellData.props.editableValue || cellData.props.value; @@ -45,7 +45,7 @@ export const editable: ITransform = (label: IFormatterValueType, { rowIndex, row }); if (invalidCells.length) { - acc[rule.name] = invalidCells.map(cell => cell.props.name); + acc[rule.name] = invalidCells.map((cell) => cell.props.name); } return acc; }, {} as RowErrors); diff --git a/packages/react-table/src/components/Table/utils/headerUtils.test.tsx b/packages/react-table/src/components/Table/utils/headerUtils.test.tsx index 8f652c8dadd..f6cb287ad45 100644 --- a/packages/react-table/src/components/Table/utils/headerUtils.test.tsx +++ b/packages/react-table/src/components/Table/utils/headerUtils.test.tsx @@ -12,9 +12,9 @@ describe('headerUtils', () => { expect(collapsibleTransfroms[0].extraParams.onCollapse).toBeDefined(); expect(collapsibleTransfroms[0].header.transforms).toHaveLength(2); expect(collapsibleTransfroms[1].cell.transforms).toHaveLength(3); - expect(collapsibleTransfroms[1].cell.transforms.find(transform => transform.name === 'parentId')).toBeDefined(); + expect(collapsibleTransfroms[1].cell.transforms.find((transform) => transform.name === 'parentId')).toBeDefined(); expect( - collapsibleTransfroms[1].cell.transforms.find(transform => transform.name === 'expandedRowFormatter') + collapsibleTransfroms[1].cell.transforms.find((transform) => transform.name === 'expandedRowFormatter') ).toBeDefined(); }); @@ -101,8 +101,8 @@ describe('headerUtils', () => { ], {} ); - expect(result[0].header.formatters.find(formatter => formatter.name === 'testFunc')).toBeDefined(); - expect(result[0].header.transforms.find(transform => transform.name === 'testFunc')).toBeDefined(); + expect(result[0].header.formatters.find((formatter) => formatter.name === 'testFunc')).toBeDefined(); + expect(result[0].header.transforms.find((transform) => transform.name === 'testFunc')).toBeDefined(); }); test('custom functions in header', () => { @@ -119,8 +119,8 @@ describe('headerUtils', () => { ], {} ); - expect(result[0].header.formatters.find(formatter => formatter.name === 'testFunc')).toBeDefined(); - expect(result[0].header.transforms.find(transform => transform.name === 'testFunc')).toBeDefined(); + expect(result[0].header.formatters.find((formatter) => formatter.name === 'testFunc')).toBeDefined(); + expect(result[0].header.transforms.find((transform) => transform.name === 'testFunc')).toBeDefined(); }); }); @@ -151,8 +151,8 @@ describe('headerUtils', () => { ], {} ); - expect(result[0].cell.formatters.find(formatter => formatter.name === 'testFunc')).toBeDefined(); - expect(result[0].cell.transforms.find(transform => transform.name === 'testFunc')).toBeDefined(); + expect(result[0].cell.formatters.find((formatter) => formatter.name === 'testFunc')).toBeDefined(); + expect(result[0].cell.transforms.find((transform) => transform.name === 'testFunc')).toBeDefined(); }); test('custom functions in header', () => { @@ -169,8 +169,8 @@ describe('headerUtils', () => { ], {} ); - expect(result[0].cell.formatters.find(formatter => formatter.name === 'testFunc')).toBeDefined(); - expect(result[0].cell.transforms.find(transform => transform.name === 'testFunc')).toBeDefined(); + expect(result[0].cell.formatters.find((formatter) => formatter.name === 'testFunc')).toBeDefined(); + expect(result[0].cell.transforms.find((transform) => transform.name === 'testFunc')).toBeDefined(); }); describe('custom dataLabel', () => { diff --git a/packages/react-table/src/components/Table/utils/headerUtils.tsx b/packages/react-table/src/components/Table/utils/headerUtils.tsx index 16947f6fce1..093c661d273 100644 --- a/packages/react-table/src/components/Table/utils/headerUtils.tsx +++ b/packages/react-table/src/components/Table/utils/headerUtils.tsx @@ -99,13 +99,7 @@ const mapHeader = (column: ICell, extra: any, key: number, ...props: any) => { } return { - property: - (typeof title === 'string' && - title - .toLowerCase() - .trim() - .replace(/\s/g, '-')) || - `column-${key}`, + property: (typeof title === 'string' && title.toLowerCase().trim().replace(/\s/g, '-')) || `column-${key}`, extraParams: extra, data: column.data, header: generateHeader(column, title), diff --git a/packages/react-table/src/components/Table/utils/utils.tsx b/packages/react-table/src/components/Table/utils/utils.tsx index 05cff012879..f8ab36cb535 100644 --- a/packages/react-table/src/components/Table/utils/utils.tsx +++ b/packages/react-table/src/components/Table/utils/utils.tsx @@ -37,12 +37,12 @@ export const isRowExpanded = (row: IRow, rows: IRow[]) => { }; export const getErrorTextByValidator = (validatorName: string, validators: IValidatorDef[]) => { - const result = validators.filter(validator => validator.name === validatorName); + const result = validators.filter((validator) => validator.name === validatorName); return result[0].errorText; }; export const cancelCellEdits = (row: IRow) => { - (row.cells as IRowCell[]).forEach(cell => { + (row.cells as IRowCell[]).forEach((cell) => { delete cell.props.errorText; delete cell.props.editableValue; cell.props.isValid = true; @@ -65,7 +65,7 @@ export const validateCellEdits = ( ) => { row.isValid = Object.keys(validationErrors).length ? false : true; - (row.cells as IRowCell[]).forEach(cell => { + (row.cells as IRowCell[]).forEach((cell) => { delete cell.props.errorText; const hasValue = cell.props.value !== undefined && cell.props.value !== null; @@ -74,8 +74,8 @@ export const validateCellEdits = ( if (cell.props && hasValue && hasEditableValue) { if (type === 'save') { const errorMsg = Object.keys(validationErrors) - .filter(validatorName => validationErrors[validatorName].includes(cell.props.name)) - .map(validatorName => getErrorTextByValidator(validatorName, row.rowEditValidationRules)); + .filter((validatorName) => validationErrors[validatorName].includes(cell.props.name)) + .map((validatorName) => getErrorTextByValidator(validatorName, row.rowEditValidationRules)); if (errorMsg.length) { cell.props.errorText = cell.props.name ? errorMsg.join(', ') : missingPropErrorTxt; @@ -94,7 +94,7 @@ export const validateCellEdits = ( }; export const applyCellEdits = (row: IRow, type: RowEditType) => { - (row.cells as IRowCell[]).forEach(cell => { + (row.cells as IRowCell[]).forEach((cell) => { delete cell.props.errorText; const hasValue = cell.props.value !== undefined && cell.props.value !== null; const hasEditableValue = cell.props.editableValue !== undefined && cell.props.editableValue !== null; @@ -119,11 +119,7 @@ export const applyCellEdits = (row: IRow, type: RowEditType) => { return row; }; -const camelize = (s: string) => - s - .toUpperCase() - .replace('-', '') - .replace('_', ''); +const camelize = (s: string) => s.toUpperCase().replace('-', '').replace('_', ''); export const toCamel = (s: string) => s.replace(/([-_][a-z])/gi, camelize); /** diff --git a/packages/react-table/src/deprecated/components/Table/BodyWrapper.tsx b/packages/react-table/src/deprecated/components/Table/BodyWrapper.tsx index 80615c7e9ac..2518d65b91f 100644 --- a/packages/react-table/src/deprecated/components/Table/BodyWrapper.tsx +++ b/packages/react-table/src/deprecated/components/Table/BodyWrapper.tsx @@ -28,7 +28,7 @@ export const BodyWrapper: React.FunctionComponent = ({ /* eslint-enable @typescript-eslint/no-unused-vars */ ...props }: BodyWrapperProps) => { - if (mappedRows && mappedRows.some(row => row.hasOwnProperty('parent'))) { + if (mappedRows && mappedRows.some((row) => row.hasOwnProperty('parent'))) { return ( {mapOpenedRows(mappedRows, props.children).map((oneRow, key) => ( diff --git a/packages/react-table/src/deprecated/components/Table/Table.tsx b/packages/react-table/src/deprecated/components/Table/Table.tsx index b783f88cd9a..013d8245393 100644 --- a/packages/react-table/src/deprecated/components/Table/Table.tsx +++ b/packages/react-table/src/deprecated/components/Table/Table.tsx @@ -27,7 +27,8 @@ import { IHeaderRow, OnFavorite, TreeRowWrapper, - CustomActionsToggleProps } from '../../../components'; + CustomActionsToggleProps +} from '../../../components'; export interface TableProps extends OUIAProps { /** Adds an accessible name for the Table */ @@ -131,7 +132,7 @@ export interface TableProps extends OUIAProps { ouiaSafe?: boolean; } -export class Table extends React.Component { +class Table extends React.Component { static displayName = 'Table'; static hasWarnBeta = false; static defaultProps: Partial = { @@ -297,3 +298,5 @@ export class Table extends React.Component { return table; } } + +export { Table }; diff --git a/packages/react-table/src/deprecated/components/Table/base/body-row.tsx b/packages/react-table/src/deprecated/components/Table/base/body-row.tsx index 7d8f81c5c71..748a961f3e5 100644 --- a/packages/react-table/src/deprecated/components/Table/base/body-row.tsx +++ b/packages/react-table/src/deprecated/components/Table/base/body-row.tsx @@ -28,7 +28,7 @@ export interface BodyRowProps { rowKey: string; } -export class BodyRow extends React.Component { +class BodyRow extends React.Component { static displayName = 'BodyRow'; static defaultProps = { // eslint-disable-next-line @typescript-eslint/no-unused-vars @@ -97,3 +97,5 @@ export class BodyRow extends React.Component { ); } } + +export { BodyRow }; diff --git a/packages/react-table/src/deprecated/components/Table/base/body.tsx b/packages/react-table/src/deprecated/components/Table/base/body.tsx index 98f08cfccf7..f665aa76aff 100644 --- a/packages/react-table/src/deprecated/components/Table/base/body.tsx +++ b/packages/react-table/src/deprecated/components/Table/base/body.tsx @@ -6,7 +6,14 @@ */ import * as React from 'react'; import isEqual from 'lodash/isEqual'; -import { RowsType, RowType, RowKeyType, RenderersTypes, createElementType, ColumnsType } from '../../../../components/Table/base/types'; +import { + RowsType, + RowType, + RowKeyType, + RenderersTypes, + createElementType, + ColumnsType +} from '../../../../components/Table/base/types'; import { ProviderContext } from '../../../../components/Table/base/provider'; import { resolveRowKey } from './resolve-row-key'; import { BodyRow } from './body-row'; diff --git a/packages/react-table/src/deprecated/components/Table/base/header.tsx b/packages/react-table/src/deprecated/components/Table/base/header.tsx index 1e3ac95fd57..ff40421e601 100644 --- a/packages/react-table/src/deprecated/components/Table/base/header.tsx +++ b/packages/react-table/src/deprecated/components/Table/base/header.tsx @@ -5,12 +5,7 @@ * https://github.com/reactabular/reactabular/tree/v8.14.0/packages/reactabular-table/src */ import * as React from 'react'; -import { - createElementType, - RowsType, - ColumnsType, - RenderersTypes -} from '../../../../components/Table/base/types'; +import { createElementType, RowsType, ColumnsType, RenderersTypes } from '../../../../components/Table/base/types'; import { ProviderContext } from '../../../../components/Table/base/provider'; import { HeaderRow } from './header-row'; diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableActions.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableActions.tsx index 79cb06eac67..8d8644743cd 100644 --- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableActions.tsx +++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableActions.tsx @@ -19,12 +19,7 @@ import { IActionsResolver, TableText } from '@patternfly/react-table'; -import { - Table, - TableBody, - TableHeader, - TableProps -} from '@patternfly/react-table/deprecated'; +import { Table, TableBody, TableHeader, TableProps } from '@patternfly/react-table/deprecated'; interface Repository { name: string; @@ -78,7 +73,7 @@ export const LegacyTableActions: React.FunctionComponent = () => { { title: '', dataLabel: 'Action', cellTransforms: [fitContent] } ]; - const rows: TableProps['rows'] = repositories.map(repo => { + const rows: TableProps['rows'] = repositories.map((repo) => { let singleActionButton: React.ReactNode = null; if (repo.singleAction !== '') { singleActionButton = ( @@ -196,7 +191,7 @@ export const LegacyTableActions: React.FunctionComponent = () => { rows={rows} {...(propToUse === 'actions' && { actions })} {...(propToUse === 'actionResolver' && { actionResolver })} - areActionsDisabled={rowData => !!rowData.disableActions} + areActionsDisabled={(rowData) => !!rowData.disableActions} dropdownPosition="left" dropdownDirection="down" actionsToggle={useCustomToggle ? customActionsToggle : undefined} diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableBasic.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableBasic.tsx index 528ccc3cce3..5f01e26dc5b 100644 --- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableBasic.tsx +++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableBasic.tsx @@ -45,7 +45,7 @@ export const LegacyTableBasic: React.FunctionComponent = () => { }; const columns: TableProps['cells'] = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit']; - const rows: TableProps['rows'] = repositories.map(repo => [ + const rows: TableProps['rows'] = repositories.map((repo) => [ repo.name, repo.branches, repo.prs, diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableCellWidth.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableCellWidth.tsx index f6f78c1360c..b143b419c9c 100644 --- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableCellWidth.tsx +++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableCellWidth.tsx @@ -50,7 +50,7 @@ export const LegacyTableCellWidth: React.FunctionComponent = () => { transforms: [cellWidth(30)] } ]; - const rows: TableProps['rows'] = repositories.map(repo => [ + const rows: TableProps['rows'] = repositories.map((repo) => [ repo.name, repo.branches, repo.prs, diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableClickable.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableClickable.tsx index 198f5a0ed05..6d67155bb31 100644 --- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableClickable.tsx +++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableClickable.tsx @@ -72,7 +72,7 @@ export const LegacyTableClickable: React.FunctionComponent = () => { cellTransforms: [textCenter] } ]; - const rows: TableProps['rows'] = repositories.map(repo => { + const rows: TableProps['rows'] = repositories.map((repo) => { let cells: (string | ICell)[] = [repo.name, repo.branches || '', repo.prs || '', repo.workspaces, repo.lastCommit]; // These rows have arbitrary differences for this example, but these could be based on some other conditions if (repo.name === 'one - 2') { diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableControllingText.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableControllingText.tsx index b1eded86df4..76a56db6c85 100644 --- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableControllingText.tsx +++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableControllingText.tsx @@ -1,12 +1,5 @@ import React from 'react'; -import { - cellWidth, - truncate, - breakWord, - wrappable, - fitContent, - nowrap -} from '@patternfly/react-table'; +import { cellWidth, truncate, breakWord, wrappable, fitContent, nowrap } from '@patternfly/react-table'; import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated'; // This example has been simplified to focus on the text modifier props. In real usage, diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableExpandable.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableExpandable.tsx index 5c4b6334234..7fe8ff494ec 100644 --- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableExpandable.tsx +++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableExpandable.tsx @@ -77,11 +77,11 @@ export const LegacyTableExpandable: React.FunctionComponent = () => { // In this example, expanded rows are tracked by the repo names from each row. This could be any unique identifier. // This is to prevent state from being based on row order index in case we later add sorting. // Note that this behavior is very similar to selection state. - const initialExpandedRepoNames = repositories.filter(repo => !!repo.details).map(repo => repo.name); // Default to all expanded + const initialExpandedRepoNames = repositories.filter((repo) => !!repo.details).map((repo) => repo.name); // Default to all expanded const [expandedRepoNames, setExpandedRepoNames] = React.useState(initialExpandedRepoNames); const setRepoExpanded = (repo: Repository, isExpanding = true) => - setExpandedRepoNames(prevExpanded => { - const otherExpandedRepoNames = prevExpanded.filter(r => r !== repo.name); + setExpandedRepoNames((prevExpanded) => { + const otherExpandedRepoNames = prevExpanded.filter((r) => r !== repo.name); return isExpanding ? [...otherExpandedRepoNames, repo.name] : otherExpandedRepoNames; }); const isRepoExpanded = (repo: Repository) => expandedRepoNames.includes(repo.name); @@ -103,7 +103,7 @@ export const LegacyTableExpandable: React.FunctionComponent = () => { { title: '' /* deliberately empty */, dataLabel: 'Label for mobile view' } ]; const rows: TableProps['rows'] = []; - repositories.forEach(repo => { + repositories.forEach((repo) => { rows.push({ ...(repo.details ? { isOpen: isRepoExpanded(repo) } : {}), cells: [repo.name, repo.branches, repo.prs, repo.workspaces] diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableFavoritable.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableFavoritable.tsx index 854cab28089..8ee18daa482 100644 --- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableFavoritable.tsx +++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableFavoritable.tsx @@ -30,8 +30,8 @@ export const LegacyTableFavoritable: React.FunctionComponent = () => { // Favorite state is similar to selection state. See selectedRepoNames and associated code below. const [favoriteRepoNames, setFavoriteRepoNames] = React.useState([]); const setRepoFavorited = (repo: Repository, isFavoriting = true) => - setFavoriteRepoNames(prevFavorites => { - const otherFavorites = prevFavorites.filter(r => r !== repo.name); + setFavoriteRepoNames((prevFavorites) => { + const otherFavorites = prevFavorites.filter((r) => r !== repo.name); return isFavoriting ? [...otherFavorites, repo.name] : otherFavorites; }); const isRepoFavorited = (repo: Repository) => favoriteRepoNames.includes(repo.name); @@ -78,12 +78,12 @@ export const LegacyTableFavoritable: React.FunctionComponent = () => { // This is to prevent state from being based on row order index in case we later add sorting. const [selectedRepoNames, setSelectedRepoNames] = React.useState([]); const setRepoSelected = (repo: Repository, isSelecting = true) => - setSelectedRepoNames(prevSelected => { - const otherSelectedRepoNames = prevSelected.filter(r => r !== repo.name); + setSelectedRepoNames((prevSelected) => { + const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name); return isSelecting && isRepoSelectable(repo) ? [...otherSelectedRepoNames, repo.name] : otherSelectedRepoNames; }); const selectAllRepos = (isSelecting = true) => - setSelectedRepoNames(isSelecting ? selectableRepos.map(r => r.name) : []); + setSelectedRepoNames(isSelecting ? selectableRepos.map((r) => r.name) : []); const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name); const columns: TableProps['cells'] = [ @@ -93,7 +93,7 @@ export const LegacyTableFavoritable: React.FunctionComponent = () => { 'Workspaces', 'Last commit' ]; - const rows: TableProps['rows'] = sortedRepositories.map(repo => { + const rows: TableProps['rows'] = sortedRepositories.map((repo) => { const favorited = isRepoFavorited(repo); return { favorited, diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSelectableRadio.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSelectableRadio.tsx index b47014b03b0..6a88dcd470a 100644 --- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSelectableRadio.tsx +++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSelectableRadio.tsx @@ -31,7 +31,7 @@ export const LegacyTableSelectableRadio: React.FunctionComponent = () => { 'Workspaces', 'Last commit' ]; - const rows: TableProps['rows'] = repositories.map(repo => ({ + const rows: TableProps['rows'] = repositories.map((repo) => ({ cells: [repo.name, repo.branches, repo.prs, repo.workspaces, repo.lastCommit], selected: selectedRepoName === repo.name, disableSelection: !isRepoSelectable(repo) diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortable.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortable.tsx index efb624eaf86..8ce156065b8 100644 --- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortable.tsx +++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortable.tsx @@ -82,7 +82,7 @@ export const LegacyTableSortable: React.FunctionComponent = () => { ] } ]; - const rows: TableProps['rows'] = sortedRepositories.map(repo => [ + const rows: TableProps['rows'] = sortedRepositories.map((repo) => [ repo.name, repo.branches, repo.prs, diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableStriped.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableStriped.tsx index 11d034d7601..ea0b6f76554 100644 --- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableStriped.tsx +++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableStriped.tsx @@ -35,7 +35,7 @@ export const LegacyTableStriped: React.FunctionComponent = () => { ]; const columns: TableProps['cells'] = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit']; - const rows: TableProps['rows'] = repositories.map(repo => [ + const rows: TableProps['rows'] = repositories.map((repo) => [ repo.name, repo.branches, repo.prs, diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableStripedCustomTr.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableStripedCustomTr.tsx index c9dd1396ecb..2731c116aff 100644 --- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableStripedCustomTr.tsx +++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableStripedCustomTr.tsx @@ -19,7 +19,7 @@ export const LegacyTableStripedCustomTr: React.FunctionComponent = () => { ]; const columns: TableProps['cells'] = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit']; - const rows: TableProps['rows'] = repositories.map(repo => [ + const rows: TableProps['rows'] = repositories.map((repo) => [ repo.name, repo.branches || '', repo.prs || '', diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableStripedExpandable.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableStripedExpandable.tsx index cb9953abccf..28c1549927b 100644 --- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableStripedExpandable.tsx +++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableStripedExpandable.tsx @@ -77,11 +77,11 @@ export const LegacyTableStripedExpandable: React.FunctionComponent = () => { // In this example, expanded rows are tracked by the repo names from each row. This could be any unique identifier. // This is to prevent state from being based on row order index in case we later add sorting. // Note that this behavior is very similar to selection state. - const initialExpandedRepoNames = repositories.filter(repo => !!repo.details).map(repo => repo.name); // Default to all expanded + const initialExpandedRepoNames = repositories.filter((repo) => !!repo.details).map((repo) => repo.name); // Default to all expanded const [expandedRepoNames, setExpandedRepoNames] = React.useState(initialExpandedRepoNames); const setRepoExpanded = (repo: Repository, isExpanding = true) => - setExpandedRepoNames(prevExpanded => { - const otherExpandedRepoNames = prevExpanded.filter(r => r !== repo.name); + setExpandedRepoNames((prevExpanded) => { + const otherExpandedRepoNames = prevExpanded.filter((r) => r !== repo.name); return isExpanding ? [...otherExpandedRepoNames, repo.name] : otherExpandedRepoNames; }); const isRepoExpanded = (repo: Repository) => expandedRepoNames.includes(repo.name); @@ -103,7 +103,7 @@ export const LegacyTableStripedExpandable: React.FunctionComponent = () => { { title: '' /* deliberately empty */, dataLabel: 'Label for mobile view' } ]; const rows: TableProps['rows'] = []; - repositories.forEach(repo => { + repositories.forEach((repo) => { rows.push({ ...(repo.details ? { isOpen: isRepoExpanded(repo) } : {}), cells: [repo.name, repo.branches, repo.prs, repo.workspaces] diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableTree.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableTree.tsx index 547aaa9f951..a70feca7068 100644 --- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableTree.tsx +++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableTree.tsx @@ -85,9 +85,9 @@ export const LegacyTableTree: React.FunctionComponent = () => { const getDescendants = (node: RepositoriesTreeNode): RepositoriesTreeNode[] => [node].concat(...(node.children ? node.children.map(getDescendants) : [])); const areAllDescendantsSelected = (node: RepositoriesTreeNode) => - getDescendants(node).every(n => selectedNodeNames.includes(n.name)); + getDescendants(node).every((n) => selectedNodeNames.includes(n.name)); const areSomeDescendantsSelected = (node: RepositoriesTreeNode) => - getDescendants(node).some(n => selectedNodeNames.includes(n.name)); + getDescendants(node).some((n) => selectedNodeNames.includes(n.name)); const isNodeChecked = (node: RepositoriesTreeNode) => { if (areAllDescendantsSelected(node)) { @@ -157,17 +157,17 @@ export const LegacyTableTree: React.FunctionComponent = () => { const onCollapse: OnTreeRowCollapse = (_event, rowIndex) => { const node = flattenedNodes[rowIndex]; const isExpanded = expandedNodeNames.includes(node.name); - setExpandedNodeNames(prevExpanded => { - const otherExpandedNodeNames = prevExpanded.filter(name => name !== node.name); + setExpandedNodeNames((prevExpanded) => { + const otherExpandedNodeNames = prevExpanded.filter((name) => name !== node.name); return isExpanded ? otherExpandedNodeNames : [...otherExpandedNodeNames, node.name]; }); }; const onCheck: OnCheckChange = (_event, isChecking, rowIndex) => { const node = flattenedNodes[rowIndex]; - const nodeNamesToCheck = getDescendants(node).map(n => n.name); - setSelectedNodeNames(prevSelected => { - const otherSelectedNodeNames = prevSelected.filter(name => !nodeNamesToCheck.includes(name)); + const nodeNamesToCheck = getDescendants(node).map((n) => n.name); + setSelectedNodeNames((prevSelected) => { + const otherSelectedNodeNames = prevSelected.filter((name) => !nodeNamesToCheck.includes(name)); return !isChecking ? otherSelectedNodeNames : [...otherSelectedNodeNames, ...nodeNamesToCheck]; }); }; @@ -175,8 +175,8 @@ export const LegacyTableTree: React.FunctionComponent = () => { const onToggleRowDetails: OnToggleRowDetails = (_event, rowIndex) => { const node = flattenedNodes[rowIndex]; const isDetailsExpanded = expandedDetailsNodeNames.includes(node.name); - setExpandedDetailsNodeNames(prevDetailsExpanded => { - const otherDetailsExpandedNodeNames = prevDetailsExpanded.filter(name => name !== node.name); + setExpandedDetailsNodeNames((prevDetailsExpanded) => { + const otherDetailsExpandedNodeNames = prevDetailsExpanded.filter((name) => name !== node.name); return isDetailsExpanded ? otherDetailsExpandedNodeNames : [...otherDetailsExpandedNodeNames, node.name]; }); }; diff --git a/packages/react-table/src/test-helpers/MockedTableChanges.js b/packages/react-table/src/test-helpers/MockedTableChanges.js index ece469f3169..d21d2738299 100644 --- a/packages/react-table/src/test-helpers/MockedTableChanges.js +++ b/packages/react-table/src/test-helpers/MockedTableChanges.js @@ -3,27 +3,29 @@ import PropTypes from 'prop-types'; import { TableContext } from '../components/Table/Table'; import { TableHeader } from '../components/Table'; -export const withContext = ({ context = {}, contextType = {} }) => WrappedComponent => { - class WithContext extends Component { - getChildContext() { - return context; - } +export const withContext = + ({ context = {}, contextType = {} }) => + (WrappedComponent) => { + class WithContext extends Component { + getChildContext() { + return context; + } - render() { - return {this.props.children}; + render() { + return {this.props.children}; + } } - } - WithContext.propTypes = { - children: PropTypes.node + WithContext.propTypes = { + children: PropTypes.node + }; + WithContext.defaultProps = { + children: null + }; + WithContext.WrappedComponent = WrappedComponent; + WithContext.childContextTypes = contextType; + + return WithContext; }; - WithContext.defaultProps = { - children: null - }; - WithContext.WrappedComponent = WrappedComponent; - WithContext.childContextTypes = contextType; - - return WithContext; -}; export const TableProvider = withContext({ context: {