From d66b422f80393f9a957043da827ce01a0ad9726f Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Sun, 22 Mar 2020 00:31:30 +0100 Subject: [PATCH] arrowParents: always --- dangerfile.js | 14 +- docs/next.config.js | 4 +- docs/pages/_app.js | 12 +- docs/pages/_document.js | 6 +- docs/pages/api-docs/autocomplete.md | 2 +- docs/pages/api-docs/pagination.md | 2 +- docs/pages/api-docs/slider.md | 4 +- docs/pages/components/material-icons.js | 2 +- docs/pages/index.js | 4 +- docs/pages/performance/table-component.js | 2 +- docs/pages/performance/table-emotion.js | 2 +- docs/pages/performance/table-hook.js | 2 +- .../performance/table-styled-components.js | 2 +- docs/pages/versions.js | 6 +- docs/scripts/buildApi.js | 24 +-- docs/scripts/buildIcons.js | 6 +- docs/scripts/formattedTSDemos.js | 12 +- docs/scripts/i18n.js | 4 +- docs/scripts/updateIconSynonyms.js | 6 +- docs/src/modules/components/Ad.js | 6 +- docs/src/modules/components/AdCarbon.js | 2 +- docs/src/modules/components/AdCodeFund.js | 2 +- docs/src/modules/components/AdInHouse.js | 2 +- docs/src/modules/components/AppDrawer.js | 4 +- .../modules/components/AppDrawerNavItem.js | 4 +- docs/src/modules/components/AppFooter.js | 4 +- docs/src/modules/components/AppFrame.js | 14 +- docs/src/modules/components/AppSearch.js | 8 +- .../modules/components/AppTableOfContents.js | 14 +- docs/src/modules/components/Demo.js | 20 +- docs/src/modules/components/DemoLanguages.js | 2 +- docs/src/modules/components/DemoSandboxed.js | 6 +- .../src/modules/components/DiamondSponsors.js | 4 +- docs/src/modules/components/EditPage.js | 4 +- docs/src/modules/components/Head.js | 4 +- docs/src/modules/components/Link.js | 2 +- docs/src/modules/components/MarkdownDocs.js | 6 +- .../src/modules/components/MarkdownElement.js | 6 +- docs/src/modules/components/Notifications.js | 10 +- docs/src/modules/components/ThemeContext.js | 4 +- docs/src/modules/components/TopLayoutBlog.js | 2 +- .../modules/components/TopLayoutCompany.js | 2 +- .../src/modules/components/useMarkdownDocs.js | 8 +- docs/src/modules/redux/initRedux.js | 2 +- docs/src/modules/redux/optionsReducer.js | 2 +- docs/src/modules/utils/defaultPropsHandler.js | 10 +- docs/src/modules/utils/find.js | 6 +- docs/src/modules/utils/generateMarkdown.js | 20 +- docs/src/modules/utils/helpers.js | 6 +- docs/src/modules/utils/mapTranslations.js | 2 +- docs/src/modules/utils/parseMarkdown.js | 4 +- docs/src/modules/utils/parseTest.js | 2 +- .../pages/components/alert/ActionAlerts.js | 2 +- .../src/pages/components/alert/ColorAlerts.js | 2 +- .../components/alert/DescriptionAlerts.js | 2 +- .../pages/components/alert/FilledAlerts.js | 2 +- docs/src/pages/components/alert/IconAlerts.js | 2 +- .../pages/components/alert/OutlinedAlerts.js | 2 +- .../pages/components/alert/SimpleAlerts.js | 2 +- .../components/alert/TransitionAlerts.js | 2 +- .../src/pages/components/app-bar/BackToTop.js | 4 +- .../pages/components/app-bar/BottomAppBar.js | 2 +- .../pages/components/app-bar/ButtonAppBar.js | 2 +- .../pages/components/app-bar/DenseAppBar.js | 2 +- .../pages/components/app-bar/MenuAppBar.js | 6 +- .../components/app-bar/PrimarySearchAppBar.js | 6 +- .../components/app-bar/ProminentAppBar.js | 2 +- .../components/app-bar/ProminentAppBar.tsx | 2 +- .../pages/components/app-bar/SearchAppBar.js | 2 +- .../components/autocomplete/Asynchronous.js | 8 +- .../components/autocomplete/Asynchronous.tsx | 8 +- .../components/autocomplete/CheckboxesTags.js | 4 +- .../autocomplete/CheckboxesTags.tsx | 4 +- .../pages/components/autocomplete/ComboBox.js | 4 +- .../components/autocomplete/ComboBox.tsx | 4 +- .../components/autocomplete/CountrySelect.js | 10 +- .../components/autocomplete/CountrySelect.tsx | 10 +- .../components/autocomplete/CustomizedHook.js | 2 +- .../autocomplete/CustomizedHook.tsx | 2 +- .../autocomplete/DisabledOptions.js | 6 +- .../autocomplete/DisabledOptions.tsx | 6 +- .../pages/components/autocomplete/Filter.js | 6 +- .../pages/components/autocomplete/Filter.tsx | 4 +- .../components/autocomplete/FixedTags.js | 4 +- .../components/autocomplete/FixedTags.tsx | 4 +- .../pages/components/autocomplete/FreeSolo.js | 8 +- .../components/autocomplete/FreeSolo.tsx | 8 +- .../autocomplete/FreeSoloCreateOption.js | 6 +- .../autocomplete/FreeSoloCreateOption.tsx | 6 +- .../FreeSoloCreateOptionDialog.js | 12 +- .../FreeSoloCreateOptionDialog.tsx | 10 +- .../components/autocomplete/GitHubLabel.js | 10 +- .../components/autocomplete/GitHubLabel.tsx | 6 +- .../components/autocomplete/GoogleMaps.js | 16 +- .../components/autocomplete/GoogleMaps.tsx | 10 +- .../pages/components/autocomplete/Grouped.js | 8 +- .../pages/components/autocomplete/Grouped.tsx | 8 +- .../components/autocomplete/Highlights.js | 4 +- .../components/autocomplete/Highlights.tsx | 4 +- .../components/autocomplete/Playground.js | 34 ++-- .../components/autocomplete/Playground.tsx | 32 ++-- .../pages/components/autocomplete/Sizes.js | 26 +-- .../pages/components/autocomplete/Sizes.tsx | 24 +-- .../src/pages/components/autocomplete/Tags.js | 14 +- .../pages/components/autocomplete/Tags.tsx | 12 +- .../autocomplete/UseAutocomplete.js | 4 +- .../autocomplete/UseAutocomplete.tsx | 2 +- .../components/autocomplete/Virtualize.js | 12 +- .../components/autocomplete/Virtualize.tsx | 8 +- .../pages/components/avatars/BadgeAvatars.js | 6 +- .../components/avatars/FallbackAvatars.js | 2 +- .../pages/components/avatars/IconAvatars.js | 2 +- .../pages/components/avatars/ImageAvatars.js | 2 +- .../pages/components/avatars/LetterAvatars.js | 2 +- .../pages/components/avatars/SizeAvatars.js | 2 +- .../components/avatars/VariantAvatars.js | 2 +- .../components/backdrop/SimpleBackdrop.js | 2 +- .../pages/components/badges/BadgeAlignment.js | 6 +- docs/src/pages/components/badges/BadgeMax.js | 2 +- .../pages/components/badges/BadgeOverlap.js | 2 +- .../components/badges/BadgeVisibility.js | 2 +- .../components/badges/CustomizedBadges.js | 2 +- docs/src/pages/components/badges/DotBadge.js | 2 +- .../pages/components/badges/ShowZeroBadge.js | 2 +- .../pages/components/badges/SimpleBadge.js | 2 +- .../components/breadcrumbs/CustomSeparator.js | 2 +- .../breadcrumbs/CustomizedBreadcrumbs.js | 2 +- .../components/breadcrumbs/IconBreadcrumbs.js | 2 +- .../breadcrumbs/RouterBreadcrumbs.js | 8 +- .../breadcrumbs/RouterBreadcrumbs.tsx | 4 +- .../button-group/BasicButtonGroup.js | 2 +- .../button-group/GroupOrientation.js | 2 +- .../button-group/GroupOrientation.tsx | 2 +- .../button-group/GroupSizesColors.js | 2 +- .../components/button-group/SplitButton.js | 6 +- .../components/button-group/SplitButton.tsx | 4 +- .../pages/components/buttons/ButtonBase.js | 4 +- .../pages/components/buttons/ButtonBase.tsx | 2 +- .../pages/components/buttons/ButtonSizes.js | 2 +- .../components/buttons/ContainedButtons.js | 2 +- .../components/buttons/CustomizedButtons.js | 4 +- .../pages/components/buttons/IconButtons.js | 2 +- .../components/buttons/IconLabelButtons.js | 2 +- .../components/buttons/OutlinedButtons.js | 2 +- .../pages/components/buttons/TextButtons.js | 2 +- .../pages/components/buttons/UploadButtons.js | 2 +- .../components/cards/MediaControlCard.js | 2 +- .../components/cards/RecipeReviewCard.js | 2 +- .../components/checkboxes/CheckboxLabels.js | 4 +- .../pages/components/checkboxes/Checkboxes.js | 2 +- .../components/checkboxes/CheckboxesGroup.js | 6 +- .../components/checkboxes/CheckboxesGroup.tsx | 2 +- docs/src/pages/components/chips/Chips.js | 2 +- docs/src/pages/components/chips/ChipsArray.js | 8 +- .../src/pages/components/chips/ChipsArray.tsx | 4 +- .../pages/components/chips/ChipsPlayground.js | 6 +- .../pages/components/chips/OutlinedChips.js | 2 +- docs/src/pages/components/chips/SmallChips.js | 2 +- .../components/chips/SmallOutlinedChips.js | 2 +- .../click-away-listener/ClickAway.js | 4 +- .../click-away-listener/ClickAway.tsx | 2 +- .../components/dialogs/ConfirmationDialog.js | 8 +- .../components/dialogs/ConfirmationDialog.tsx | 2 +- .../components/dialogs/CustomizedDialogs.js | 8 +- .../components/dialogs/FullScreenDialog.js | 2 +- .../components/dialogs/MaxWidthDialog.js | 6 +- .../pages/components/dialogs/ScrollDialog.js | 2 +- .../pages/components/dialogs/SimpleDialog.js | 6 +- .../pages/components/dialogs/SimpleDialog.tsx | 2 +- .../components/dividers/InsetDividers.js | 2 +- .../pages/components/dividers/ListDividers.js | 2 +- .../components/dividers/MiddleDividers.js | 2 +- .../components/dividers/SubheaderDividers.js | 2 +- .../components/dividers/VerticalDividers.js | 2 +- .../pages/components/drawers/ClippedDrawer.js | 2 +- .../pages/components/drawers/MiniDrawer.js | 2 +- .../components/drawers/PermanentDrawerLeft.js | 2 +- .../drawers/PermanentDrawerRight.js | 2 +- .../drawers/PersistentDrawerLeft.js | 2 +- .../drawers/PersistentDrawerRight.js | 2 +- .../components/drawers/ResponsiveDrawer.js | 2 +- .../drawers/SwipeableTemporaryDrawer.js | 6 +- .../drawers/SwipeableTemporaryDrawer.tsx | 2 +- .../components/drawers/TemporaryDrawer.js | 6 +- .../components/drawers/TemporaryDrawer.tsx | 2 +- .../ActionsInExpansionPanelSummary.js | 12 +- .../ActionsInExpansionPanelSummary.tsx | 12 +- .../ControlledExpansionPanels.js | 4 +- .../CustomizedExpansionPanels.js | 4 +- .../CustomizedExpansionPanels.tsx | 2 +- .../DetailedExpansionPanel.js | 2 +- .../expansion-panels/SimpleExpansionPanel.js | 2 +- .../FloatingActionButtonSize.js | 2 +- .../FloatingActionButtonZoom.js | 4 +- .../FloatingActionButtons.js | 2 +- .../components/grid-list/AdvancedGridList.js | 4 +- .../components/grid-list/AdvancedGridList.tsx | 2 +- .../components/grid-list/ImageGridList.js | 4 +- .../components/grid-list/ImageGridList.tsx | 2 +- .../grid-list/SingleLineGridList.js | 4 +- .../grid-list/SingleLineGridList.tsx | 2 +- .../components/grid-list/TitlebarGridList.js | 4 +- .../components/grid-list/TitlebarGridList.tsx | 2 +- docs/src/pages/components/grid/AutoGrid.js | 2 +- .../pages/components/grid/AutoGridNoWrap.js | 2 +- docs/src/pages/components/grid/CSSGrid.js | 2 +- .../src/pages/components/grid/CenteredGrid.js | 2 +- docs/src/pages/components/grid/ComplexGrid.js | 2 +- .../pages/components/grid/FullWidthGrid.js | 2 +- .../pages/components/grid/InteractiveGrid.js | 10 +- .../pages/components/grid/InteractiveGrid.tsx | 8 +- docs/src/pages/components/grid/NestedGrid.js | 2 +- docs/src/pages/components/grid/SpacingGrid.js | 8 +- .../src/pages/components/grid/SpacingGrid.tsx | 4 +- .../pages/components/hidden/BreakpointDown.js | 2 +- .../pages/components/hidden/BreakpointOnly.js | 2 +- .../pages/components/hidden/BreakpointUp.js | 2 +- .../components/hidden/GridIntegration.js | 2 +- .../src/pages/components/icons/FontAwesome.js | 2 +- docs/src/pages/components/icons/Icons.js | 2 +- .../pages/components/icons/SvgIconsColor.js | 2 +- .../pages/components/icons/SvgIconsSize.js | 2 +- .../components/icons/SvgMaterialIcons.js | 2 +- docs/src/pages/components/links/Links.js | 4 +- .../pages/components/lists/AlignItemsList.js | 2 +- .../pages/components/lists/CheckboxList.js | 6 +- .../pages/components/lists/CheckboxList.tsx | 2 +- .../components/lists/CheckboxListSecondary.js | 6 +- .../lists/CheckboxListSecondary.tsx | 2 +- docs/src/pages/components/lists/FolderList.js | 2 +- docs/src/pages/components/lists/InsetList.js | 2 +- .../pages/components/lists/InteractiveList.js | 13 +- .../components/lists/InteractiveList.tsx | 11 +- docs/src/pages/components/lists/NestedList.js | 2 +- .../components/lists/PinnedSubheaderList.js | 6 +- .../components/lists/PinnedSubheaderList.tsx | 4 +- .../components/lists/SelectedListItem.js | 10 +- .../components/lists/SelectedListItem.tsx | 8 +- docs/src/pages/components/lists/SimpleList.js | 2 +- .../components/lists/SwitchListSecondary.js | 4 +- .../pages/components/lists/VirtualizedList.js | 2 +- .../components/material-icons/SearchIcons.js | 30 +-- .../src/pages/components/menus/ContextMenu.js | 2 +- .../pages/components/menus/CustomizedMenus.js | 6 +- .../components/menus/CustomizedMenus.tsx | 2 +- docs/src/pages/components/menus/FadeMenu.js | 2 +- docs/src/pages/components/menus/LongMenu.js | 4 +- docs/src/pages/components/menus/LongMenu.tsx | 2 +- .../components/menus/MenuListComposition.js | 6 +- .../components/menus/MenuListComposition.tsx | 2 +- .../pages/components/menus/MenuPopupState.js | 2 +- .../pages/components/menus/MenuPopupState.tsx | 2 +- .../pages/components/menus/SimpleListMenu.js | 6 +- .../pages/components/menus/SimpleListMenu.tsx | 2 +- docs/src/pages/components/menus/SimpleMenu.js | 2 +- .../src/pages/components/modal/ServerModal.js | 2 +- .../src/pages/components/modal/SimpleModal.js | 2 +- .../src/pages/components/modal/SpringModal.js | 2 +- .../components/modal/TransitionsModal.js | 2 +- .../components/pagination/BasicPagination.js | 2 +- .../pagination/PaginationButtons.js | 2 +- .../pagination/PaginationControlled.js | 2 +- .../components/pagination/PaginationLink.js | 2 +- .../pagination/PaginationOutlined.js | 2 +- .../components/pagination/PaginationRanges.js | 2 +- .../pagination/PaginationRounded.js | 2 +- .../components/pagination/PaginationSize.js | 2 +- .../src/pages/components/paper/SimplePaper.js | 2 +- docs/src/pages/components/paper/Variants.js | 2 +- .../components/pickers/DateAndTimePickers.js | 2 +- .../pages/components/pickers/DatePickers.js | 2 +- .../components/pickers/MaterialUIPickers.js | 2 +- .../pages/components/pickers/TimePickers.js | 2 +- .../components/popover/AnchorPlayground.js | 14 +- .../components/popover/MouseOverPopover.js | 4 +- .../components/popover/PopoverPopupState.js | 2 +- .../pages/components/popover/SimplePopover.js | 4 +- .../components/popper/FakedReferencePopper.js | 2 +- .../components/popper/PopperPopupState.js | 4 +- .../components/popper/PositionedPopper.js | 6 +- .../components/popper/PositionedPopper.tsx | 2 +- .../components/popper/ScrollPlayground.js | 16 +- .../pages/components/popper/SimplePopper.js | 4 +- .../pages/components/popper/SpringPopper.js | 4 +- .../components/popper/TransitionsPopper.js | 4 +- .../pages/components/portal/SimplePortal.js | 2 +- .../progress/CircularDeterminate.js | 4 +- .../progress/CircularDeterminate.tsx | 2 +- .../progress/CircularIndeterminate.js | 2 +- .../progress/CircularIntegration.js | 2 +- .../components/progress/CircularStatic.js | 4 +- .../components/progress/CircularStatic.tsx | 2 +- .../progress/CustomizedProgressBars.js | 2 +- .../components/progress/DelayingAppearance.js | 4 +- .../progress/DelayingAppearance.tsx | 2 +- .../pages/components/progress/LinearBuffer.js | 2 +- .../components/progress/LinearDeterminate.js | 4 +- .../components/progress/LinearDeterminate.tsx | 2 +- .../progress/LinearIndeterminate.js | 2 +- .../pages/components/progress/LinearQuery.js | 2 +- .../components/radio-buttons/ErrorRadios.js | 6 +- .../components/radio-buttons/ErrorRadios.tsx | 2 +- .../components/radio-buttons/RadioButtons.js | 4 +- .../radio-buttons/RadioButtonsGroup.js | 2 +- .../components/rating/CustomizedRatings.js | 4 +- .../src/pages/components/rating/HalfRating.js | 2 +- .../src/pages/components/rating/RatingSize.js | 2 +- .../selects/ControlledOpenSelect.js | 4 +- .../components/selects/CustomizedSelects.js | 6 +- .../pages/components/selects/DialogSelect.js | 4 +- .../pages/components/selects/GroupedSelect.js | 2 +- .../components/selects/MultipleSelect.js | 24 +-- .../components/selects/MultipleSelect.tsx | 18 +- .../pages/components/selects/NativeSelects.js | 4 +- .../pages/components/selects/SimpleSelect.js | 6 +- .../pages/components/selects/SimpleSelect.tsx | 2 +- .../src/pages/components/skeleton/Facebook.js | 2 +- .../components/slider/CustomizedSlider.js | 4 +- .../components/slider/CustomizedSlider.tsx | 2 +- .../components/slider/DiscreteSliderLabel.js | 2 +- .../components/slider/DiscreteSliderMarks.js | 2 +- .../components/slider/DiscreteSliderValues.js | 2 +- .../slider/DiscreteSliderValues.tsx | 2 +- .../pages/components/slider/InputSlider.js | 2 +- .../components/slider/NonLinearSlider.js | 4 +- .../components/slider/NonLinearSlider.tsx | 4 +- .../components/slider/TrackFalseSlider.js | 2 +- .../components/slider/TrackInvertedSlider.js | 2 +- .../snackbars/ConsecutiveSnackbars.js | 4 +- .../snackbars/CustomizedSnackbars.js | 2 +- .../components/snackbars/DirectionSnackbar.js | 2 +- .../snackbars/FabIntegrationSnackbar.js | 2 +- .../snackbars/IntegrationNotistack.js | 2 +- .../components/snackbars/LongTextSnackbar.js | 2 +- .../snackbars/PositionedSnackbar.js | 2 +- .../snackbars/TransitionsSnackbar.js | 2 +- .../speed-dial/OpenIconSpeedDial.js | 6 +- .../speed-dial/OpenIconSpeedDial.tsx | 4 +- .../speed-dial/SpeedDialTooltipOpen.js | 6 +- .../speed-dial/SpeedDialTooltipOpen.tsx | 4 +- .../pages/components/speed-dial/SpeedDials.js | 8 +- .../components/speed-dial/SpeedDials.tsx | 2 +- .../components/steppers/CustomizedSteppers.js | 12 +- .../steppers/CustomizedSteppers.tsx | 10 +- .../components/steppers/DotsMobileStepper.js | 4 +- .../components/steppers/DotsMobileStepper.tsx | 4 +- ...HorizontalLinearAlternativeLabelStepper.js | 8 +- ...orizontalLinearAlternativeLabelStepper.tsx | 6 +- .../steppers/HorizontalLinearStepper.js | 14 +- .../steppers/HorizontalLinearStepper.tsx | 8 +- ...izontalNonLinearAlternativeLabelStepper.js | 14 +- ...zontalNonLinearAlternativeLabelStepper.tsx | 6 +- .../steppers/HorizontalNonLinearStepper.js | 6 +- .../steppers/HorizontalNonLinearStepper.tsx | 2 +- .../HorizontalNonLinearStepperWithError.js | 16 +- .../HorizontalNonLinearStepperWithError.tsx | 8 +- .../steppers/ProgressMobileStepper.js | 4 +- .../steppers/ProgressMobileStepper.tsx | 4 +- .../steppers/SwipeableTextMobileStepper.js | 8 +- .../steppers/SwipeableTextMobileStepper.tsx | 6 +- .../components/steppers/TextMobileStepper.js | 6 +- .../components/steppers/TextMobileStepper.tsx | 4 +- .../steppers/VerticalLinearStepper.js | 6 +- .../steppers/VerticalLinearStepper.tsx | 4 +- .../components/switches/CustomizedSwitches.js | 6 +- .../pages/components/switches/SwitchLabels.js | 2 +- .../src/pages/components/switches/Switches.js | 2 +- .../components/switches/SwitchesGroup.js | 2 +- .../pages/components/switches/SwitchesSize.js | 2 +- .../components/switches/SwitchesSize.tsx | 2 +- .../components/tables/AcccessibleTable.js | 2 +- .../components/tables/AcccessibleTable.tsx | 2 +- .../tables/CustomPaginationActionsTable.js | 14 +- .../tables/CustomPaginationActionsTable.tsx | 2 +- .../components/tables/CustomizedTables.js | 6 +- .../components/tables/CustomizedTables.tsx | 2 +- .../src/pages/components/tables/DenseTable.js | 2 +- .../pages/components/tables/DenseTable.tsx | 2 +- .../pages/components/tables/EnhancedTable.js | 24 +-- .../pages/components/tables/EnhancedTable.tsx | 8 +- .../components/tables/MaterialTableDemo.js | 16 +- .../components/tables/MaterialTableDemo.tsx | 16 +- .../tables/ReactVirtualizedTable.js | 4 +- .../tables/ReactVirtualizedTable.tsx | 2 +- .../pages/components/tables/SimpleTable.js | 2 +- .../pages/components/tables/SimpleTable.tsx | 2 +- .../pages/components/tables/SpanningTable.js | 2 +- .../pages/components/tables/SpanningTable.tsx | 2 +- .../components/tables/StickyHeadTable.js | 14 +- .../components/tables/StickyHeadTable.tsx | 6 +- .../pages/components/tabs/CustomizedTabs.js | 12 +- .../pages/components/tabs/FullWidthTabs.js | 4 +- docs/src/pages/components/tabs/NavTabs.js | 4 +- .../tabs/ScrollableTabsButtonAuto.js | 2 +- .../tabs/ScrollableTabsButtonForce.js | 2 +- .../tabs/ScrollableTabsButtonPrevent.js | 2 +- docs/src/pages/components/tabs/SimpleTabs.js | 2 +- .../pages/components/tabs/TabsWrappedLabel.js | 2 +- .../src/pages/components/tabs/VerticalTabs.js | 2 +- .../components/text-fields/BasicTextFields.js | 2 +- .../components/text-fields/ColorTextFields.js | 2 +- .../text-fields/ComposedTextField.js | 4 +- .../text-fields/CustomizedInputBase.js | 2 +- .../text-fields/CustomizedInputs.js | 6 +- .../text-fields/FormPropsTextFields.js | 2 +- .../components/text-fields/FormattedInputs.js | 8 +- .../text-fields/FormattedInputs.tsx | 2 +- .../components/text-fields/InputAdornments.js | 6 +- .../components/text-fields/InputWithIcon.js | 2 +- .../pages/components/text-fields/Inputs.js | 2 +- .../text-fields/LayoutTextFields.js | 2 +- .../text-fields/MultilineTextFields.js | 4 +- .../text-fields/SelectTextFields.js | 16 +- .../text-fields/SelectTextFields.tsx | 12 +- .../components/text-fields/StateTextFields.js | 4 +- .../components/text-fields/TextFieldSizes.js | 2 +- .../text-fields/ValidationTextFields.js | 2 +- .../toggle-button/CustomizedDividers.js | 4 +- .../toggle-button/CustomizedDividers.tsx | 2 +- .../toggle-button/ToggleButtonNotEmpty.js | 2 +- .../toggle-button/ToggleButtonNotEmpty.tsx | 2 +- .../components/toggle-button/ToggleButtons.js | 2 +- .../toggle-button/ToggleButtons.tsx | 2 +- .../components/tooltips/CustomizedTooltips.js | 6 +- .../components/tooltips/SimpleTooltips.js | 2 +- .../components/tooltips/VariableWidth.js | 2 +- .../transfer-list/SelectAllTransferList.js | 14 +- .../transfer-list/SelectAllTransferList.tsx | 4 +- .../components/transfer-list/TransferList.js | 12 +- .../components/transfer-list/TransferList.tsx | 4 +- .../components/transitions/SimpleCollapse.js | 4 +- .../components/transitions/SimpleCollapse.tsx | 2 +- .../components/transitions/SimpleFade.js | 4 +- .../components/transitions/SimpleFade.tsx | 2 +- .../components/transitions/SimpleGrow.js | 4 +- .../components/transitions/SimpleGrow.tsx | 2 +- .../components/transitions/SimpleSlide.js | 4 +- .../components/transitions/SimpleSlide.tsx | 2 +- .../components/transitions/SimpleZoom.js | 4 +- .../components/transitions/SimpleZoom.tsx | 2 +- .../tree-view/CustomizedTreeView.js | 4 +- .../components/tree-view/GmailTreeView.js | 2 +- .../components/tree-view/RecursiveTreeView.js | 4 +- .../tree-view/RecursiveTreeView.tsx | 2 +- .../components/typography/TypographyTheme.js | 2 +- .../components/use-media-query/ServerSide.js | 2 +- .../pages/css-in-js/basics/AdaptingHook.js | 4 +- .../basics/AdaptingStyledComponents.js | 4 +- .../customization/breakpoints/MediaQuery.js | 2 +- docs/src/pages/customization/color/Color.js | 10 +- .../pages/customization/color/ColorDemo.js | 2 +- .../pages/customization/color/ColorTool.js | 24 +-- .../customization/components/DynamicCSS.js | 4 +- .../components/DynamicCSSVariables.js | 2 +- .../components/DynamicClassName.js | 2 +- .../components/DynamicInlineStyle.js | 2 +- .../components/DynamicThemeNesting.js | 2 +- .../default-theme/DefaultTheme.js | 12 +- .../customization/density/DensityTool.js | 4 +- .../pages/customization/palette/DarkTheme.js | 2 +- .../pages/customization/palette/Intentions.js | 2 +- .../customization/theming/CustomStyles.js | 2 +- .../theming/ThemeNestingExtend.js | 2 +- .../typography/ResponsiveFontSizesChart.js | 6 +- .../discover-more/languages/Languages.js | 2 +- .../pages/discover-more/showcase/Showcase.js | 12 +- docs/src/pages/discover-more/team/Team.js | 4 +- .../getting-started/templates/Templates.js | 4 +- .../getting-started/templates/album/Album.js | 4 +- .../getting-started/templates/blog/Blog.js | 4 +- .../getting-started/templates/blog/Footer.js | 2 +- .../getting-started/templates/blog/Header.js | 4 +- .../getting-started/templates/blog/Main.js | 4 +- .../templates/blog/MainFeaturedPost.js | 2 +- .../templates/blog/Markdown.js | 2 +- .../getting-started/templates/blog/Sidebar.js | 6 +- .../templates/checkout/Checkout.js | 4 +- .../templates/checkout/Review.js | 6 +- .../templates/dashboard/Dashboard.js | 2 +- .../templates/dashboard/Orders.js | 4 +- .../templates/pricing/Pricing.js | 10 +- .../templates/sign-in-side/SignInSide.js | 2 +- .../templates/sign-in/SignIn.js | 2 +- .../templates/sign-up/SignUp.js | 2 +- .../templates/sticky-footer/StickyFooter.js | 2 +- .../pages/guides/composition/Composition.js | 2 +- .../guides/interoperability/EmotionTheme.js | 2 +- .../guides/interoperability/EmotionTheme.tsx | 2 +- .../StyledComponentsPortal.js | 2 +- docs/src/pages/guides/localization/Locales.js | 2 +- .../src/pages/guides/localization/Locales.tsx | 2 +- .../pages/guides/right-to-left/RtlOptOut.js | 2 +- docs/src/pages/landing/Pro.js | 4 +- docs/src/pages/landing/QuickWord.js | 4 +- docs/src/pages/landing/Quotes.js | 8 +- docs/src/pages/landing/Sponsors.js | 4 +- docs/src/pages/landing/Steps.js | 4 +- docs/src/pages/landing/Themes.js | 4 +- docs/src/pages/landing/Users.js | 6 +- .../onepirate/ForgotPassword.js | 4 +- .../pages/premium-themes/onepirate/SignIn.js | 4 +- .../pages/premium-themes/onepirate/SignUp.js | 4 +- .../onepirate/modules/components/AppBar.js | 2 +- .../onepirate/modules/components/Button.js | 2 +- .../onepirate/modules/components/Markdown.js | 12 +- .../onepirate/modules/components/Paper.js | 2 +- .../onepirate/modules/components/Snackbar.js | 2 +- .../onepirate/modules/components/TextField.js | 2 +- .../onepirate/modules/components/Toolbar.js | 2 +- .../modules/components/Typography.js | 2 +- .../onepirate/modules/form/FormFeedback.js | 2 +- .../onepirate/modules/form/defer.js | 2 +- .../onepirate/modules/views/AppAppBar.js | 2 +- .../onepirate/modules/views/AppFooter.js | 4 +- .../onepirate/modules/views/AppForm.js | 2 +- .../onepirate/modules/views/ProductCTA.js | 4 +- .../modules/views/ProductCategories.js | 4 +- .../onepirate/modules/views/ProductHero.js | 2 +- .../modules/views/ProductHeroLayout.js | 2 +- .../modules/views/ProductHowItWorks.js | 2 +- .../modules/views/ProductSmokingHero.js | 2 +- .../onepirate/modules/views/ProductValues.js | 2 +- .../pages/premium-themes/paperbase/Content.js | 2 +- .../pages/premium-themes/paperbase/Header.js | 2 +- .../premium-themes/paperbase/Navigator.js | 2 +- .../src/pages/styles/advanced/ThemeNesting.js | 4 +- .../pages/styles/advanced/ThemeNesting.tsx | 2 +- docs/src/pages/styles/advanced/Theming.js | 2 +- docs/src/pages/styles/basics/AdaptingHOC.js | 4 +- docs/src/pages/styles/basics/AdaptingHook.js | 4 +- .../styles/basics/AdaptingStyledComponents.js | 4 +- docs/src/pages/styles/basics/StressTest.js | 10 +- docs/src/pages/versions/StableVersions.js | 2 +- docs/src/sw.js | 2 +- examples/create-react-app/src/ProTip.js | 2 +- .../gatsby-theme/src/components/ProTip.js | 2 +- examples/gatsby/src/components/ProTip.js | 2 +- .../pages/_document.tsx | 4 +- examples/nextjs/pages/_document.js | 4 +- examples/nextjs/src/ProTip.js | 2 +- examples/preact/src/ProTip.js | 2 +- examples/ssr/ProTip.js | 2 +- .../Material-UI.framerfx/code/RadioGroup.tsx | 2 +- framer/scripts/additionalProps.js | 2 +- framer/scripts/buildFramer.js | 14 +- modules/handleKillSignals.js | 4 +- modules/log.js | 2 +- modules/waterfall/Queue.js | 4 +- modules/waterfall/metric.js | 12 +- modules/waterfall/retry.js | 2 +- modules/waterfall/sleep.js | 2 +- .../src/rules/docgen-ignore-before-comment.js | 4 +- .../src/rules/restricted-path-imports.js | 2 +- packages/material-ui-benchmark/src/core.js | 4 +- packages/material-ui-benchmark/src/docs.js | 6 +- packages/material-ui-benchmark/src/styles.js | 12 +- packages/material-ui-benchmark/src/system.js | 4 +- .../src/util/getJSExports.js | 2 +- .../material-ui-codemod/src/util/memoize.js | 2 +- .../src/v0.15.0/import-path.js | 4 +- .../src/v1.0.0/color-imports.js | 14 +- .../src/v1.0.0/import-path.js | 4 +- .../src/v1.0.0/svg-icon-imports.js | 4 +- .../src/v4.0.0/optimal-imports.js | 6 +- .../src/v4.0.0/theme-spacing-api.js | 12 +- .../src/v4.0.0/top-level-imports.js | 2 +- .../src/NProgressBar/NProgressBar.js | 2 +- packages/material-ui-icons/builder.js | 10 +- packages/material-ui-icons/builder.test.js | 2 +- .../scripts/create-typings.js | 4 +- .../material-ui-icons/scripts/download.js | 4 +- packages/material-ui-lab/src/Alert/Alert.js | 2 +- .../src/AlertTitle/AlertTitle.js | 2 +- .../src/Autocomplete/Autocomplete.js | 8 +- .../src/Autocomplete/Autocomplete.test.js | 176 +++++++++--------- .../src/AvatarGroup/AvatarGroup.js | 4 +- .../src/Pagination/Pagination.js | 2 +- .../src/Pagination/usePagination.js | 8 +- .../src/PaginationItem/PaginationItem.js | 2 +- packages/material-ui-lab/src/Rating/Rating.js | 22 +-- .../material-ui-lab/src/Skeleton/Skeleton.js | 2 +- .../src/SpeedDial/SpeedDial.js | 16 +- .../src/SpeedDial/SpeedDial.test.js | 12 +- .../src/SpeedDialAction/SpeedDialAction.js | 2 +- .../src/SpeedDialIcon/SpeedDialIcon.js | 2 +- .../src/ToggleButton/ToggleButton.js | 4 +- .../src/ToggleButton/ToggleButton.test.js | 6 +- .../ToggleButtonGroup/ToggleButtonGroup.js | 4 +- .../material-ui-lab/src/TreeItem/TreeItem.js | 18 +- .../src/TreeItem/TreeItem.test.js | 2 +- .../material-ui-lab/src/TreeView/TreeView.js | 57 +++--- packages/material-ui-lab/src/index.test.js | 2 +- .../src/useAutocomplete/useAutocomplete.js | 50 ++--- .../useAutocomplete/useAutocomplete.test.js | 2 +- .../src/StylesProvider/StylesProvider.test.js | 2 +- .../src/ThemeProvider/ThemeProvider.test.js | 2 +- .../src/getStylesCreator/getStylesCreator.js | 2 +- .../src/makeStyles/makeStyles.spec.tsx | 2 +- .../src/makeStyles/makeStyles.test.js | 20 +- .../src/mergeClasses/mergeClasses.js | 2 +- .../material-ui-styles/src/styled/styled.js | 6 +- .../src/styled/styled.test.js | 4 +- .../src/withStyles/withStyles.js | 4 +- .../src/withStyles/withStyles.test.js | 8 +- .../src/withTheme/withTheme.js | 4 +- .../material-ui-styles/test/styles.spec.tsx | 10 +- .../material-ui-system/src/breakpoints.js | 4 +- packages/material-ui-system/src/compose.js | 2 +- packages/material-ui-system/src/css.js | 4 +- packages/material-ui-system/src/display.js | 2 +- packages/material-ui-system/src/memoize.js | 2 +- packages/material-ui-system/src/spacing.js | 12 +- .../material-ui-system/src/spacing.test.js | 2 +- packages/material-ui-system/src/style.js | 4 +- packages/material-ui-system/src/style.test.js | 4 +- packages/material-ui-utils/src/deepmerge.js | 2 +- .../src/elementAcceptingRef.test.js | 4 +- .../src/elementTypeAcceptingRef.test.js | 4 +- packages/material-ui-utils/src/exactProp.js | 6 +- packages/material-ui/src/AppBar/AppBar.js | 2 +- packages/material-ui/src/Avatar/Avatar.js | 2 +- packages/material-ui/src/Badge/Badge.js | 2 +- .../src/BottomNavigation/BottomNavigation.js | 2 +- .../BottomNavigationAction.js | 4 +- .../src/Breadcrumbs/BreadcrumbCollapsed.js | 2 +- .../src/Breadcrumbs/Breadcrumbs.js | 4 +- packages/material-ui/src/Button/Button.js | 2 +- .../material-ui/src/Button/Button.spec.tsx | 14 +- .../material-ui/src/ButtonBase/ButtonBase.js | 12 +- .../src/ButtonBase/ButtonBase.test.js | 24 +-- .../material-ui/src/ButtonBase/TouchRipple.js | 8 +- .../src/ButtonGroup/ButtonGroup.js | 4 +- .../src/CardActionArea/CardActionArea.js | 2 +- .../material-ui/src/CardMedia/CardMedia.js | 2 +- packages/material-ui/src/Checkbox/Checkbox.js | 2 +- packages/material-ui/src/Chip/Chip.js | 10 +- packages/material-ui/src/Chip/Chip.test.js | 10 +- .../src/CircularProgress/CircularProgress.js | 4 +- .../ClickAwayListener/ClickAwayListener.js | 4 +- .../ClickAwayListener.test.js | 2 +- packages/material-ui/src/Collapse/Collapse.js | 6 +- .../material-ui/src/Collapse/Collapse.test.js | 4 +- .../material-ui/src/Container/Container.js | 2 +- .../src/CssBaseline/CssBaseline.js | 4 +- packages/material-ui/src/Dialog/Dialog.js | 6 +- .../src/DialogContent/DialogContent.js | 2 +- packages/material-ui/src/Divider/Divider.js | 2 +- packages/material-ui/src/Drawer/Drawer.js | 2 +- .../src/ExpansionPanel/ExpansionPanel.js | 6 +- .../src/ExpansionPanel/ExpansionPanel.test.js | 2 +- .../ExpansionPanelSummary.js | 8 +- packages/material-ui/src/Fab/Fab.js | 2 +- packages/material-ui/src/Fade/Fade.js | 2 +- .../src/FilledInput/FilledInput.js | 2 +- .../src/FormControl/FormControl.js | 4 +- .../src/FormControlLabel/FormControlLabel.js | 4 +- .../FormControlLabel/FormControlLabel.test.js | 2 +- .../src/FormHelperText/FormHelperText.js | 2 +- .../src/FormHelperText/FormHelperText.test.js | 2 +- .../material-ui/src/FormLabel/FormLabel.js | 2 +- .../src/FormLabel/FormLabel.test.js | 2 +- packages/material-ui/src/Grid/Grid.js | 6 +- packages/material-ui/src/Grid/Grid.test.js | 2 +- packages/material-ui/src/GridList/GridList.js | 2 +- .../material-ui/src/GridList/GridList.test.js | 10 +- .../src/GridListTile/GridListTile.js | 2 +- .../src/GridListTileBar/GridListTileBar.js | 2 +- packages/material-ui/src/Grow/Grow.js | 2 +- packages/material-ui/src/Grow/Grow.test.js | 2 +- packages/material-ui/src/Hidden/HiddenCss.js | 8 +- .../material-ui/src/Hidden/HiddenJs.test.js | 4 +- packages/material-ui/src/Icon/Icon.js | 2 +- .../material-ui/src/IconButton/IconButton.js | 6 +- packages/material-ui/src/Input/Input.js | 2 +- .../material-ui/src/InputBase/InputBase.js | 14 +- .../src/InputBase/InputBase.test.js | 4 +- .../material-ui/src/InputBase/utils.test.js | 8 +- .../material-ui/src/InputLabel/InputLabel.js | 2 +- .../src/LinearProgress/LinearProgress.js | 4 +- packages/material-ui/src/Link/Link.js | 4 +- packages/material-ui/src/Link/Link.test.js | 2 +- packages/material-ui/src/ListItem/ListItem.js | 6 +- .../material-ui/src/ListItem/ListItem.test.js | 2 +- .../src/ListItemIcon/ListItemIcon.js | 2 +- .../src/ListSubheader/ListSubheader.js | 2 +- packages/material-ui/src/Menu/Menu.js | 4 +- packages/material-ui/src/Menu/Menu.test.js | 4 +- packages/material-ui/src/MenuItem/MenuItem.js | 2 +- .../material-ui/src/MenuItem/MenuItem.test.js | 2 +- packages/material-ui/src/MenuList/MenuList.js | 4 +- .../src/MobileStepper/MobileStepper.js | 2 +- packages/material-ui/src/Modal/Modal.js | 8 +- packages/material-ui/src/Modal/Modal.test.js | 20 +- .../material-ui/src/Modal/ModalManager.js | 18 +- packages/material-ui/src/Modal/TrapFocus.js | 4 +- .../src/NativeSelect/NativeSelect.js | 2 +- .../src/OutlinedInput/NotchedOutline.js | 2 +- .../src/OutlinedInput/OutlinedInput.js | 4 +- packages/material-ui/src/Paper/Paper.js | 2 +- packages/material-ui/src/Popover/Popover.js | 12 +- .../material-ui/src/Popover/Popover.test.js | 20 +- packages/material-ui/src/Popper/Popper.js | 6 +- .../material-ui/src/Popper/Popper.test.js | 6 +- .../material-ui/src/Portal/Portal.test.js | 2 +- packages/material-ui/src/Radio/Radio.js | 2 +- .../material-ui/src/Radio/RadioButtonIcon.js | 2 +- .../material-ui/src/RadioGroup/RadioGroup.js | 2 +- .../src/RadioGroup/RadioGroup.test.js | 2 +- .../material-ui/src/RootRef/RootRef.test.js | 4 +- .../ScopedCssBaseline/ScopedCssBaseline.js | 2 +- .../material-ui/src/Select/Select.test.js | 16 +- .../material-ui/src/Select/SelectInput.js | 22 +-- packages/material-ui/src/Slide/Slide.js | 2 +- packages/material-ui/src/Slide/Slide.test.js | 4 +- packages/material-ui/src/Slider/Slider.js | 44 ++--- .../material-ui/src/Slider/Slider.test.js | 10 +- packages/material-ui/src/Slider/ValueLabel.js | 2 +- packages/material-ui/src/Snackbar/Snackbar.js | 10 +- .../src/SnackbarContent/SnackbarContent.js | 2 +- packages/material-ui/src/Step/Step.js | 2 +- packages/material-ui/src/Step/Step.test.js | 4 +- .../src/StepConnector/StepConnector.js | 2 +- .../src/StepContent/StepContent.js | 2 +- .../src/StepContent/StepContent.test.js | 2 +- packages/material-ui/src/StepIcon/StepIcon.js | 2 +- .../material-ui/src/StepLabel/StepLabel.js | 2 +- packages/material-ui/src/SvgIcon/SvgIcon.js | 2 +- .../material-ui/src/SvgIcon/SvgIcon.test.js | 2 +- .../src/SwipeableDrawer/SwipeArea.js | 2 +- .../src/SwipeableDrawer/SwipeableDrawer.js | 10 +- .../SwipeableDrawer/SwipeableDrawer.test.js | 6 +- packages/material-ui/src/Switch/Switch.js | 2 +- packages/material-ui/src/Tab/Tab.js | 4 +- packages/material-ui/src/Table/Table.js | 2 +- packages/material-ui/src/Table/Table.test.js | 2 +- .../src/TableBody/TableBody.test.js | 2 +- .../material-ui/src/TableCell/TableCell.js | 2 +- .../src/TableFooter/TableFooter.test.js | 2 +- .../src/TableHead/TableHead.test.js | 2 +- .../src/TablePagination/TablePagination.js | 6 +- .../TablePagination/TablePagination.test.js | 2 +- .../TablePagination/TablePaginationActions.js | 4 +- packages/material-ui/src/TableRow/TableRow.js | 2 +- .../src/TableSortLabel/TableSortLabel.js | 2 +- packages/material-ui/src/Tabs/TabIndicator.js | 2 +- packages/material-ui/src/Tabs/Tabs.js | 10 +- packages/material-ui/src/Tabs/Tabs.test.js | 6 +- .../src/TextField/TextField.spec.tsx | 2 +- .../src/TextField/TextField.test.js | 4 +- .../src/TextareaAutosize/TextareaAutosize.js | 4 +- .../TextareaAutosize/TextareaAutosize.test.js | 2 +- packages/material-ui/src/Toolbar/Toolbar.js | 2 +- packages/material-ui/src/Tooltip/Tooltip.js | 18 +- .../material-ui/src/Tooltip/Tooltip.test.js | 6 +- .../material-ui/src/Typography/Typography.js | 2 +- .../src/Typography/Typography.test.js | 2 +- packages/material-ui/src/Zoom/Zoom.js | 2 +- packages/material-ui/src/index.test.js | 2 +- .../material-ui/src/internal/SwitchBase.js | 6 +- .../src/internal/SwitchBase.test.js | 4 +- packages/material-ui/src/internal/animate.js | 2 +- .../material-ui/src/internal/animate.test.js | 12 +- .../src/internal/svg-icons/index.test.js | 4 +- packages/material-ui/src/locale/index.js | 60 +++--- .../src/styles/colorManipulator.js | 10 +- .../src/styles/createPalette.test.js | 2 +- .../material-ui/src/styles/createSpacing.js | 2 +- .../src/styles/createSpacing.test.js | 8 +- .../src/styles/createTypography.js | 2 +- .../src/styles/createTypography.test.js | 4 +- packages/material-ui/src/styles/cssUtils.js | 2 +- .../material-ui/src/styles/cssUtils.test.js | 4 +- .../src/styles/responsiveFontSizes.js | 6 +- packages/material-ui/src/styles/styled.js | 2 +- .../material-ui/src/styles/transitions.js | 6 +- .../src/test-utils/describeConformance.js | 8 +- .../src/test-utils/findOutermostIntrinsic.js | 2 +- .../material-ui/src/test-utils/until.test.js | 2 +- packages/material-ui/src/transitions/utils.js | 2 +- .../src/useMediaQuery/useMediaQuery.test.js | 12 +- .../src/useScrollTrigger/useScrollTrigger.js | 2 +- .../material-ui/src/utils/focusVisible.js | 2 +- .../src/utils/focusVisible.test.js | 2 +- packages/material-ui/src/utils/index.test.js | 2 +- .../src/utils/requirePropFactory.js | 8 +- .../material-ui/src/utils/useControlled.js | 2 +- packages/material-ui/src/utils/useForkRef.js | 2 +- .../src/withMobileDialog/withMobileDialog.js | 2 +- .../withMobileDialog/withMobileDialog.test.js | 4 +- .../material-ui/src/withWidth/withWidth.js | 2 +- .../src/withWidth/withWidth.test.js | 6 +- .../material-ui/test/integration/Menu.test.js | 4 +- .../test/integration/MenuList.test.js | 2 +- .../test/integration/Select.test.js | 2 +- .../typescript/OverridableComponent.spec.tsx | 18 +- .../test/typescript/components.spec.tsx | 128 ++++++------- .../test/typescript/styles.spec.tsx | 20 +- packages/material-ui/test/umd/run.js | 6 +- prettier.config.js | 1 - scripts/buildColorTypes.js | 10 +- scripts/copy-files.js | 8 +- scripts/deduplicate.js | 4 +- scripts/jsonlint.js | 8 +- scripts/listChangedFiles.test.js | 2 +- scripts/prettier.js | 8 +- scripts/sizeSnapshot/create.js | 8 +- scripts/sizeSnapshot/loadComparison.js | 2 +- scripts/sizeSnapshot/webpack.config.js | 4 +- scripts/use-react-dist-tag.js | 6 +- scripts/use-typescript-dist-tag.js | 4 +- test/regressions/TestViewer.js | 2 +- test/regressions/index.js | 6 +- test/regressions/tests/Grid/StressGrid.js | 2 +- test/regressions/tests/Menu/LongMenu.js | 2 +- .../regressions/tests/SpeedDial/Directions.js | 6 +- .../tests/Table/DenseCheckboxTable.js | 4 +- test/regressions/tests/Textarea/Textarea.js | 2 +- test/utils/consoleErrorMock.js | 2 +- test/utils/createDOM.js | 4 +- 819 files changed, 2138 insertions(+), 2096 deletions(-) diff --git a/dangerfile.js b/dangerfile.js index b274d226b2e7c5..0961649e4c499f 100644 --- a/dangerfile.js +++ b/dangerfile.js @@ -43,7 +43,7 @@ async function cleanup() { * @param {number} gzipThreshold */ function createComparisonFilter(parsedThreshold, gzipThreshold) { - return comparisonEntry => { + return (comparisonEntry) => { const [, snapshot] = comparisonEntry; return ( Math.abs(snapshot.parsed.absoluteDiff) >= parsedThreshold || @@ -97,8 +97,8 @@ function formatDiff(absoluteChange, relativeChange) { * @returns {string} */ function generateMDTable(headers, body) { - const headerRow = headers.map(header => header.label); - const alignmentRow = headers.map(header => { + const headerRow = headers.map((header) => header.label); + const alignmentRow = headers.map((header) => { if (header.align === 'right') { return ' ---:'; } @@ -108,7 +108,7 @@ function generateMDTable(headers, body) { return ' --- '; }); - return [headerRow, alignmentRow, ...body].map(row => row.join(' | ')).join('\n'); + return [headerRow, alignmentRow, ...body].map((row) => row.join(' | ')).join('\n'); } function generateEmphasizedChange([bundle, { parsed, gzip }]) { @@ -174,7 +174,7 @@ function sieveResults(results) { const main = []; const pages = []; - results.forEach(entry => { + results.forEach((entry) => { const [bundleId] = entry; if (bundleId.startsWith('docs:')) { @@ -221,7 +221,7 @@ async function run() { } const mainDetailsTable = createComparisonTable(mainResults, { - computeBundleLabel: bundleId => { + computeBundleLabel: (bundleId) => { if (bundleId === 'packages/material-ui/build/umd/material-ui.production.min.js') { return '@material-ui/core[umd]'; } @@ -238,7 +238,7 @@ async function run() { }, }); const pageDetailsTable = createComparisonTable(pageResults, { - computeBundleLabel: bundleId => { + computeBundleLabel: (bundleId) => { // a page if (bundleId.startsWith('docs:/')) { const host = `https://deploy-preview-${danger.github.pr.number}--material-ui.netlify.com`; diff --git a/docs/next.config.js b/docs/next.config.js index eba4b8acaae04f..96c5b1ae243948 100644 --- a/docs/next.config.js +++ b/docs/next.config.js @@ -142,7 +142,7 @@ module.exports = { function traverse(pages2, userLanguage) { const prefix = userLanguage === 'en' ? '' : `/${userLanguage}`; - pages2.forEach(page => { + pages2.forEach((page) => { if (!page.children) { map[`${prefix}${page.pathname.replace(/^\/api-docs\/(.*)/, '/api/$1')}`] = { page: page.pathname, @@ -165,7 +165,7 @@ module.exports = { } else { // eslint-disable-next-line no-console console.log('Considering various locales for SSR'); - LANGUAGES_SSR.forEach(userLanguage => { + LANGUAGES_SSR.forEach((userLanguage) => { traverse(pages, userLanguage); }); } diff --git a/docs/pages/_app.js b/docs/pages/_app.js index 86b67144408054..2240e1bd7bc109 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -49,7 +49,7 @@ function loadCrowdin() { function LanguageNegotiation() { const dispatch = useDispatch(); const router = useRouter(); - const userLanguage = useSelector(state => state.options.userLanguage); + const userLanguage = useSelector((state) => state.options.userLanguage); React.useEffect(() => { if (userLanguage === 'aa') { @@ -127,9 +127,9 @@ function usePersistCodeVariant(initialCodeVariant = CODE_VARIANTS.JS, codeVarian function PersistState() { const dispatch = useDispatch(); - const options = useSelector(state => state.options); + const options = useSelector((state) => state.options); - const codeVariant = usePersistCodeVariant(options.codeVariant, nextCodeVariant => + const codeVariant = usePersistCodeVariant(options.codeVariant, (nextCodeVariant) => dispatch({ type: ACTION_TYPES.OPTIONS_CHANGE, payload: { codeVariant: nextCodeVariant } }), ); @@ -164,7 +164,7 @@ function forcePageReload(registration) { } function listenInstalledStateChange() { - registration.installing.addEventListener('statechange', event => { + registration.installing.addEventListener('statechange', (event) => { // console.log('statechange', event.target.state); if (event.target.state === 'installed' && registration.waiting) { // A new service worker is available, inform the user @@ -244,7 +244,7 @@ Tip: you can access the documentation \`theme\` object directly in the console. } function findActivePage(currentPages, pathname) { - const activePage = find(currentPages, page => { + const activePage = find(currentPages, (page) => { if (page.children) { if (pathname.indexOf(`${page.pathname}/`) === 0) { // Check if one of the children matches (for /components) @@ -305,7 +305,7 @@ function AppWrapper(props) { return ( - {fonts.map(font => ( + {fonts.map((font) => ( ))} diff --git a/docs/pages/_document.js b/docs/pages/_document.js index 29c60abb10ca0d..12bb08fbea9f3c 100644 --- a/docs/pages/_document.js +++ b/docs/pages/_document.js @@ -57,7 +57,7 @@ export default class MyDocument extends Document { href={`https://material-ui.com${rewriteUrlForNextExport(canonical)}`} hrefLang="x-default" /> - {LANGUAGES_SSR.map(userLanguage2 => ( + {LANGUAGES_SSR.map((userLanguage2) => ( { +MyDocument.getInitialProps = async (ctx) => { // Resolution order // // On the server: @@ -121,7 +121,7 @@ MyDocument.getInitialProps = async ctx => { ctx.renderPage = () => originalRenderPage({ - enhanceApp: App => props => sheets.collect(), + enhanceApp: (App) => (props) => sheets.collect(), }); const initialProps = await Document.getInitialProps(ctx); diff --git a/docs/pages/api-docs/autocomplete.md b/docs/pages/api-docs/autocomplete.md index 7a5f34918693db..574bd0497811ca 100644 --- a/docs/pages/api-docs/autocomplete.md +++ b/docs/pages/api-docs/autocomplete.md @@ -46,7 +46,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | forcePopupIcon | 'auto'
| bool | 'auto' | Force the visibility display of the popup icon. | | freeSolo | bool | false | If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options. | | getOptionDisabled | func | | Used to determine the disabled state for a given option. | -| getOptionLabel | func | x => x | Used to determine the string value for a given option. It's used to fill the input (and the list box options if `renderOption` is not provided). | +| getOptionLabel | func | (x) => x | Used to determine the string value for a given option. It's used to fill the input (and the list box options if `renderOption` is not provided). | | getOptionSelected | func | | Used to determine if an option is selected. Uses strict equality by default. | | groupBy | func | | If provided, the options will be grouped under the returned string. The groupBy value is also used as the text for group headings when `renderGroup` is not provided.

**Signature:**
`function(options: T) => string`
*options:* The option to group. | | id | string | | This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id. | diff --git a/docs/pages/api-docs/pagination.md b/docs/pages/api-docs/pagination.md index 5a6e79c80e2fe9..a7d37c779b4ee6 100644 --- a/docs/pages/api-docs/pagination.md +++ b/docs/pages/api-docs/pagination.md @@ -35,7 +35,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | hidePrevButton | bool | false | If `true`, hide the previous-page button. | | onChange | func | | Callback fired when the page is changed.

**Signature:**
`function(event: object, page: number) => void`
*event:* The event source of the callback.
*page:* The page selected. | | page | number | | The current page. | -| renderItem | func | item => <PaginationItem {...item} /> | Render the item.

**Signature:**
`function(params: object) => ReactNode`
*params:* The props to spread on a PaginationItem. | +| renderItem | func | (item) => <PaginationItem {...item} /> | Render the item.

**Signature:**
`function(params: object) => ReactNode`
*params:* The props to spread on a PaginationItem. | | shape | 'round'
| 'rounded' | 'round' | The shape of the pagination items. | | showFirstButton | bool | false | If `true`, show the first-page button. | | showLastButton | bool | false | If `true`, show the last-page button. | diff --git a/docs/pages/api-docs/slider.md b/docs/pages/api-docs/slider.md index f3bd9818ea9ab5..61751c83682a00 100644 --- a/docs/pages/api-docs/slider.md +++ b/docs/pages/api-docs/slider.md @@ -41,14 +41,14 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | onChange | func | | Callback function that is fired when the slider's value changed.

**Signature:**
`function(event: object, value: number \| number[]) => void`
*event:* The event source of the callback.
*value:* The new value. | | onChangeCommitted | func | | Callback function that is fired when the `mouseup` is triggered.

**Signature:**
`function(event: object, value: number \| number[]) => void`
*event:* The event source of the callback.
*value:* The new value. | | orientation | 'horizontal'
| 'vertical' | 'horizontal' | The slider orientation. | -| scale | func | x => x | A transformation function, to change the scale of the slider. | +| scale | func | (x) => x | A transformation function, to change the scale of the slider. | | step | number | 1 | The granularity with which the slider can step through values. (A "discrete" slider.) The `min` prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.
When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. | | ThumbComponent | elementType | 'span' | The component used to display the value label. | | track | 'normal'
| false
| 'inverted' | 'normal' | The track presentation:
- `normal` the track will render a bar representing the slider value. - `inverted` the track will render a bar representing the remaining slider value. - `false` the track will render without a bar. | | value | number
| Array<number> | | The value of the slider. For ranged sliders, provide an array with two values. | | ValueLabelComponent | elementType | ValueLabel | The value label component. | | valueLabelDisplay | 'on'
| 'auto'
| 'off' | 'off' | Controls when the value label is displayed:
- `auto` the value label will display when the thumb is hovered or focused. - `on` will display persistently. - `off` will never display. | -| valueLabelFormat | string
| func | x => x | The format function the value label's value.
When a function is provided, it should have the following signature:
- {number} value The value label's value to format - {number} index The value label's index to format | +| valueLabelFormat | string
| func | (x) => x | The format function the value label's value.
When a function is provided, it should have the following signature:
- {number} value The value label's value to format - {number} index The value label's index to format | The `ref` is forwarded to the root element. diff --git a/docs/pages/components/material-icons.js b/docs/pages/components/material-icons.js index 1311773de90e68..7126c13656fbfb 100644 --- a/docs/pages/components/material-icons.js +++ b/docs/pages/components/material-icons.js @@ -3,7 +3,7 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; import Markdown from 'docs/src/pages/components/material-icons/material-icons.md'; import SearchIcons from 'docs/src/pages/components/material-icons/SearchIcons'; -const req = name => { +const req = (name) => { const map = { 'material-icons.md': Markdown, 'SearchIcons.js': { diff --git a/docs/pages/index.js b/docs/pages/index.js index 46f4e3d356b845..43bc2303007984 100644 --- a/docs/pages/index.js +++ b/docs/pages/index.js @@ -31,7 +31,7 @@ function loadDependencies() { } const useStyles = makeStyles( - theme => ({ + (theme) => ({ root: { flex: '1 0 100%', }, @@ -109,7 +109,7 @@ export default function LandingPage() { loadDependencies(); }, []); - const t = useSelector(state => state.options.t); + const t = useSelector((state) => state.options.t); const classes = useStyles(); return ( diff --git a/docs/pages/performance/table-component.js b/docs/pages/performance/table-component.js index 8c014cff93a1fe..2d07ed1bd732c3 100644 --- a/docs/pages/performance/table-component.js +++ b/docs/pages/performance/table-component.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import NoSsr from '@material-ui/core/NoSsr'; -const createComponent = defaultComponent => { +const createComponent = (defaultComponent) => { const MyComponent = React.forwardRef(function MyComponent(props, ref) { const { component: Component = defaultComponent, ...other } = props; diff --git a/docs/pages/performance/table-emotion.js b/docs/pages/performance/table-emotion.js index e92cada727e9b6..4d226759172d49 100644 --- a/docs/pages/performance/table-emotion.js +++ b/docs/pages/performance/table-emotion.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import NoSsr from '@material-ui/core/NoSsr'; -const createComponent = defaultComponent => { +const createComponent = (defaultComponent) => { const MyComponent = React.forwardRef(function MyComponent(props, ref) { const { component: Component = defaultComponent, ...other } = props; diff --git a/docs/pages/performance/table-hook.js b/docs/pages/performance/table-hook.js index 6073873d61a3d8..f7349df262f7be 100644 --- a/docs/pages/performance/table-hook.js +++ b/docs/pages/performance/table-hook.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { makeStyles } from '@material-ui/styles'; import NoSsr from '@material-ui/core/NoSsr'; -const createComponent = defaultComponent => { +const createComponent = (defaultComponent) => { const useStyles = makeStyles({ root: { background: 'pink', diff --git a/docs/pages/performance/table-styled-components.js b/docs/pages/performance/table-styled-components.js index f0bb541b5c6869..f55575b58541c0 100644 --- a/docs/pages/performance/table-styled-components.js +++ b/docs/pages/performance/table-styled-components.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import styled from 'styled-components'; import NoSsr from '@material-ui/core/NoSsr'; -const createComponent = defaultComponent => { +const createComponent = (defaultComponent) => { const MyComponent = React.forwardRef(function MyComponent(props, ref) { const { component: Component = defaultComponent, ...other } = props; diff --git a/docs/pages/versions.js b/docs/pages/versions.js index 943d70b32a5721..7215c291050835 100644 --- a/docs/pages/versions.js +++ b/docs/pages/versions.js @@ -28,9 +28,9 @@ Page.getInitialProps = async () => { const FILTERED_BRANCHES = ['latest', 'staging', 'l10n', 'next']; const branches = await getBranches(); - let versions = branches.map(n => n.name); - versions = versions.filter(value => FILTERED_BRANCHES.indexOf(value) === -1); - versions = versions.map(version => ({ + let versions = branches.map((n) => n.name); + versions = versions.filter((value) => FILTERED_BRANCHES.indexOf(value) === -1); + versions = versions.map((version) => ({ version, // Replace dot with dashes for Netlify branch subdomains url: `https://${version.replace(/\./g, '-')}.material-ui.com`, diff --git a/docs/scripts/buildApi.js b/docs/scripts/buildApi.js index 587b101ed9ac68..accbf24f1b9d71 100644 --- a/docs/scripts/buildApi.js +++ b/docs/scripts/buildApi.js @@ -23,7 +23,7 @@ import createGenerateClassName from '../../packages/material-ui-styles/src/creat const generateClassName = createGenerateClassName(); function ensureExists(pat, mask, cb) { - mkdir(pat, mask, err => { + mkdir(pat, mask, (err) => { if (err) { if (err.code === 'EEXIST') { cb(null); // ignore the error if the folder already exists @@ -103,7 +103,7 @@ function computeApiDescription(api, options) { remark() .use(function docsLinksAttacher() { return function transformer(tree) { - remarkVisit(tree, 'link', linkNode => { + remarkVisit(tree, 'link', (linkNode) => { if (linkNode.url.startsWith('/')) { linkNode.url = `${host}${linkNode.url}`; } @@ -165,10 +165,10 @@ async function annotateComponentDefinition(component, api) { } const demos = uniqBy( - api.pagesMarkdown.filter(page => { + api.pagesMarkdown.filter((page) => { return page.components.includes(api.name); }, []), - page => page.pathname, + (page) => page.pathname, ); let inheritanceAPILink = null; @@ -186,7 +186,7 @@ async function annotateComponentDefinition(component, api) { 'Demos:', '', ...demos.map( - page => `- [${pageToTitle(page)}](${HOST}${rewriteUrlForNextExport(page.pathname)})`, + (page) => `- [${pageToTitle(page)}](${HOST}${rewriteUrlForNextExport(page.pathname)})`, ), '', ); @@ -198,7 +198,7 @@ async function annotateComponentDefinition(component, api) { } const jsdoc = `/**\n${markdownLines - .map(line => (line.length > 0 ? ` * ${line}` : ` *`)) + .map((line) => (line.length > 0 ? ` * ${line}` : ` *`)) .join('\n')}\n */`; const typesSourceNew = typesSource.slice(0, start) + jsdoc + typesSource.slice(end); writeFileSync(typesFilename, typesSourceNew, { encoding: 'utf8' }); @@ -226,7 +226,7 @@ async function buildDocs(options) { if (component.styles && component.default.options) { // Collect the customization points of the `classes` property. styles.classes = Object.keys(getStylesCreator(component.styles).create(theme)).filter( - className => !className.match(/^(@media|@keyframes)/), + (className) => !className.match(/^(@media|@keyframes)/), ); styles.name = component.default.options.name; styles.globalClasses = styles.classes.reduce((acc, key) => { @@ -309,7 +309,7 @@ async function buildDocs(options) { throw err; } - ensureExists(docsApiDirectory, 0o744, err => { + ensureExists(docsApiDirectory, 0o744, (err) => { if (err) { console.log('Error creating directory', docsApiDirectory); return; @@ -339,18 +339,18 @@ export default function Page() { function run() { const pagesMarkdown = findPagesMarkdown() - .map(markdown => { + .map((markdown) => { const markdownSource = readFileSync(markdown.filename, 'utf8'); return { ...markdown, components: getHeaders(markdownSource).components, }; }) - .filter(markdown => markdown.components.length > 0); + .filter((markdown) => markdown.components.length > 0); const components = findComponents(path.resolve(rootDirectory, args[2])); - components.forEach(component => { - buildDocs({ component, pagesMarkdown }).catch(error => { + components.forEach((component) => { + buildDocs({ component, pagesMarkdown }).catch((error) => { console.warn(`error building docs for ${component.filename}`); console.error(error); process.exit(1); diff --git a/docs/scripts/buildIcons.js b/docs/scripts/buildIcons.js index 88eae5a039c94d..23026d15f1527f 100644 --- a/docs/scripts/buildIcons.js +++ b/docs/scripts/buildIcons.js @@ -9,11 +9,11 @@ const OUTPUT_DIR = path.join(__dirname, '../public/static/icons'); console.log('Generating Icons'); const promises = SIZES.map( - size => + (size) => new Promise((resolve, reject) => { gm(INPUT_ICON) .resize(size, size) - .write(path.join(OUTPUT_DIR, `${size}x${size}.png`), err => { + .write(path.join(OUTPUT_DIR, `${size}x${size}.png`), (err) => { if (err) { reject(err); return; @@ -25,7 +25,7 @@ const promises = SIZES.map( }), ); -Promise.all(promises).catch(err => { +Promise.all(promises).catch((err) => { setTimeout(() => { console.log(err); throw err; diff --git a/docs/scripts/formattedTSDemos.js b/docs/scripts/formattedTSDemos.js index d23dd36f393dd3..002ba74a995e7f 100644 --- a/docs/scripts/formattedTSDemos.js +++ b/docs/scripts/formattedTSDemos.js @@ -39,7 +39,7 @@ async function getFiles(root) { const files = []; await Promise.all( - (await fse.readdir(root)).map(async name => { + (await fse.readdir(root)).map(async (name) => { const filePath = path.join(root, name); const stat = await fse.stat(filePath); @@ -48,7 +48,7 @@ async function getFiles(root) { } else if ( stat.isFile() && filePath.endsWith('.tsx') && - !ignoreList.some(ignorePath => filePath.endsWith(path.normalize(ignorePath))) + !ignoreList.some((ignorePath) => filePath.endsWith(path.normalize(ignorePath))) ) { files.push(filePath); } @@ -116,8 +116,8 @@ async function main(argv) { let successful = 0; let failed = 0; let skipped = 0; - (await Promise.all(tsxFiles.map(file => transpileFile(file, program, cacheDisabled)))).forEach( - result => { + (await Promise.all(tsxFiles.map((file) => transpileFile(file, program, cacheDisabled)))).forEach( + (result) => { switch (result) { case TranspileResult.Success: { successful += 1; @@ -157,7 +157,7 @@ async function main(argv) { return; } - tsxFiles.forEach(filePath => { + tsxFiles.forEach((filePath) => { fse.watchFile(filePath, { interval: 500 }, async () => { if ((await transpileFile(filePath, program, true)) === 0) { console.log('Success - %s', filePath); @@ -172,7 +172,7 @@ yargs .command({ command: '$0', description: 'transpile typescript demos', - builder: command => { + builder: (command) => { return command .option('watch', { default: false, diff --git a/docs/scripts/i18n.js b/docs/scripts/i18n.js index c5a76fdb9bf522..33e3570f9d777f 100644 --- a/docs/scripts/i18n.js +++ b/docs/scripts/i18n.js @@ -10,8 +10,8 @@ async function run() { const translationsFile = await fse.readFile(translationsFilename, 'utf8'); const output = JSON.parse(translationsFile); - const traverse = pages2 => { - pages2.forEach(page => { + const traverse = (pages2) => { + pages2.forEach((page) => { if (page.pathname.indexOf('/api') === -1 && page.pathname.indexOf('/blog') === -1) { const title = pageToTitle(page); diff --git a/docs/scripts/updateIconSynonyms.js b/docs/scripts/updateIconSynonyms.js index 2d8a7d63a676ca..b3dc9fb337d19b 100644 --- a/docs/scripts/updateIconSynonyms.js +++ b/docs/scripts/updateIconSynonyms.js @@ -6,7 +6,7 @@ import synonyms from 'docs/src/pages/components/material-icons/synonyms'; import myDestRewriter from '../../packages/material-ui-icons/renameFilters/material-design-icons'; function not(a, b) { - return a.filter(value => b.indexOf(value) === -1); + return a.filter((value) => b.indexOf(value) === -1); } function union(a, b) { @@ -35,7 +35,7 @@ async function run() { ); let newSynonyms = 'const synonyms = {\n'; - iconList.forEach(icon => { + iconList.forEach((icon) => { const synonymsIconStrings = synonyms[icon] ? synonyms[icon].split(' ') : []; // Some MD tags have multiple words in a string, so we separate those out to dedupe them @@ -46,7 +46,7 @@ async function run() { let mergedStrings = union(synonymsIconStrings, materialIconStrings); mergedStrings = mergedStrings // remove strings that are substrings of others - .filter(tag => !mergedStrings.some(one => one.includes(tag) && one !== tag)) + .filter((tag) => !mergedStrings.some((one) => one.includes(tag) && one !== tag)) .sort() .join(' '); diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js index c248653e7c48ff..3539bb097501cb 100644 --- a/docs/src/modules/components/Ad.js +++ b/docs/src/modules/components/Ad.js @@ -8,7 +8,7 @@ import AdCodeFund from 'docs/src/modules/components/AdCodeFund'; import AdCarbon from 'docs/src/modules/components/AdCarbon'; import AdInHouse from 'docs/src/modules/components/AdInHouse'; -const styles = theme => ({ +const styles = (theme) => ({ root: { position: 'relative', minHeight: 124, @@ -26,7 +26,7 @@ const styles = theme => ({ }); function Adblock(props) { - const t = useSelector(state => state.options.t); + const t = useSelector((state) => state.options.t); return ( @@ -150,7 +150,7 @@ function Ad(props) { }, [checkAdblock]); React.useEffect(() => { - const handler = event => { + const handler = (event) => { if (event.detail.status === 'no-advertiser') { setCodeFundOut(true); } diff --git a/docs/src/modules/components/AdCarbon.js b/docs/src/modules/components/AdCarbon.js index c6bac824a6bb29..c5c78963a6ef8a 100644 --- a/docs/src/modules/components/AdCarbon.js +++ b/docs/src/modules/components/AdCarbon.js @@ -2,7 +2,7 @@ import React from 'react'; import { withStyles } from '@material-ui/core/styles'; import loadScript from 'docs/src/modules/utils/loadScript'; -const styles = theme => ({ +const styles = (theme) => ({ '@global': { '#carbonads': { display: 'block', diff --git a/docs/src/modules/components/AdCodeFund.js b/docs/src/modules/components/AdCodeFund.js index 02cf51b925f564..a7b3a5f2e6269a 100644 --- a/docs/src/modules/components/AdCodeFund.js +++ b/docs/src/modules/components/AdCodeFund.js @@ -2,7 +2,7 @@ import React from 'react'; import { withStyles } from '@material-ui/core/styles'; import loadScript from 'docs/src/modules/utils/loadScript'; -const styles = theme => ({ +const styles = (theme) => ({ '@global': { '#cf': { display: 'block', diff --git a/docs/src/modules/components/AdInHouse.js b/docs/src/modules/components/AdInHouse.js index 288a14b302d2a5..3cf5f20465b195 100644 --- a/docs/src/modules/components/AdInHouse.js +++ b/docs/src/modules/components/AdInHouse.js @@ -3,7 +3,7 @@ import React from 'react'; import propTypes from 'prop-types'; import { makeStyles } from '@material-ui/core/styles'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'block', overflow: 'hidden', diff --git a/docs/src/modules/components/AppDrawer.js b/docs/src/modules/components/AppDrawer.js index 582a43ac48ed1f..05132cca7774f6 100644 --- a/docs/src/modules/components/AppDrawer.js +++ b/docs/src/modules/components/AppDrawer.js @@ -51,7 +51,7 @@ PersistScroll.propTypes = { children: PropTypes.node, }; -const styles = theme => ({ +const styles = (theme) => ({ paper: { width: 240, backgroundColor: theme.palette.background.level1, @@ -140,7 +140,7 @@ const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent); function AppDrawer(props) { const { classes, className, disablePermanent, mobileOpen, onClose, onOpen } = props; const { activePage, pages } = React.useContext(PageContext); - const t = useSelector(state => state.options.t); + const t = useSelector((state) => state.options.t); const drawer = ( diff --git a/docs/src/modules/components/AppDrawerNavItem.js b/docs/src/modules/components/AppDrawerNavItem.js index d730db5d831158..35238109f99f6d 100644 --- a/docs/src/modules/components/AppDrawerNavItem.js +++ b/docs/src/modules/components/AppDrawerNavItem.js @@ -7,7 +7,7 @@ import Button from '@material-ui/core/Button'; import Collapse from '@material-ui/core/Collapse'; import Link from 'docs/src/modules/components/Link'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ item: { display: 'block', paddingTop: 0, @@ -56,7 +56,7 @@ export default function AppDrawerNavItem(props) { const [open, setOpen] = React.useState(openImmediately); const handleClick = () => { - setOpen(oldOpen => !oldOpen); + setOpen((oldOpen) => !oldOpen); }; const style = { diff --git a/docs/src/modules/components/AppFooter.js b/docs/src/modules/components/AppFooter.js index 9680e88f3e6b2e..0eb49aa9b347cc 100644 --- a/docs/src/modules/components/AppFooter.js +++ b/docs/src/modules/components/AppFooter.js @@ -10,7 +10,7 @@ import Container from '@material-ui/core/Container'; import Divider from '@material-ui/core/Divider'; import Link from 'docs/src/modules/components/Link'; -const styles = theme => ({ +const styles = (theme) => ({ root: { marginTop: theme.spacing(6), }, @@ -52,7 +52,7 @@ const styles = theme => ({ function AppFooter(props) { const { classes } = props; - const t = useSelector(state => state.options.t); + const t = useSelector((state) => state.options.t); return (
diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js index 0fe1735cacd086..137033766c6d30 100644 --- a/docs/src/modules/components/AppFrame.js +++ b/docs/src/modules/components/AppFrame.js @@ -75,7 +75,7 @@ function DeferredAppSearch() { ); } -const styles = theme => ({ +const styles = (theme) => ({ '@global': { '#main-content': { outline: 0, @@ -146,16 +146,16 @@ const styles = theme => ({ function AppFrame(props) { const { children, classes } = props; const theme = useTheme(); - const t = useSelector(state => state.options.t); - const userLanguage = useSelector(state => state.options.userLanguage); + const t = useSelector((state) => state.options.t); + const userLanguage = useSelector((state) => state.options.userLanguage); const crowdInLocale = LOCALES[userLanguage] || userLanguage; const [languageMenu, setLanguageMenu] = React.useState(null); - const handleLanguageIconClick = event => { + const handleLanguageIconClick = (event) => { setLanguageMenu(event.currentTarget); }; - const handleLanguageMenuClose = event => { + const handleLanguageMenuClose = (event) => { if (event.currentTarget.nodeName === 'A') { document.cookie = `userLanguage=noDefault;path=/;max-age=31536000`; } @@ -231,7 +231,7 @@ function AppFrame(props) { {userLanguage === 'aa' ? 'Translating' - : LANGUAGES_LABEL.filter(language => language.code === userLanguage)[0].text} + : LANGUAGES_LABEL.filter((language) => language.code === userLanguage)[0].text} @@ -243,7 +243,7 @@ function AppFrame(props) { open={Boolean(languageMenu)} onClose={handleLanguageMenuClose} > - {LANGUAGES_LABEL.map(language => ( + {LANGUAGES_LABEL.map((language) => ( ({ + (theme) => ({ '@global': { '.algolia-autocomplete': { '& .ds-dropdown-menu': { @@ -116,7 +116,7 @@ export default function AppSearch() { const classes = useStyles(); const inputRef = React.useRef(null); const theme = useTheme(); - const userLanguage = useSelector(state => state.options.userLanguage); + const userLanguage = useSelector((state) => state.options.userLanguage); React.useEffect(() => { const styleNode = loadCSS( @@ -130,7 +130,7 @@ export default function AppSearch() { }, []); React.useEffect(() => { - const handleKeyDown = event => { + const handleKeyDown = (event) => { // Use event.keyCode to support IE 11 if ( [ @@ -178,7 +178,7 @@ export default function AppSearch() { // debug: true, // Set debug to true if you want to inspect the dropdown. }); - search.autocomplete.on('autocomplete:cursorchanged', event => { + search.autocomplete.on('autocomplete:cursorchanged', (event) => { const combobox = event.target; const selectedOptionNode = document.getElementById( combobox.getAttribute('aria-activedescendant'), diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js index e7632435c5fc71..7cd92269a00257 100644 --- a/docs/src/modules/components/AppTableOfContents.js +++ b/docs/src/modules/components/AppTableOfContents.js @@ -13,7 +13,7 @@ import DiamondSponsors from 'docs/src/modules/components/DiamondSponsors'; import Link from 'docs/src/modules/components/Link'; import PageContext from 'docs/src/modules/components/PageContext'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { top: 70, // Fix IE 11 position sticky issue. @@ -100,14 +100,14 @@ function getItemsServer(contents, itemsCollector) { function getItemsClient(items) { const itemsClient = []; - items.forEach(item2 => { + items.forEach((item2) => { itemsClient.push({ ...item2, node: document.getElementById(item2.hash), }); if (item2.children.length > 0) { - item2.children.forEach(item3 => { + item2.children.forEach((item3) => { itemsClient.push({ ...item3, node: document.getElementById(item3.hash), @@ -142,7 +142,7 @@ function useThrottledOnScroll(callback, delay) { export default function AppTableOfContents(props) { const { contents } = props; const classes = useStyles(); - const t = useSelector(state => state.options.t); + const t = useSelector((state) => state.options.t); const itemsServer = React.useMemo(() => { const itemsCollectorRef = { current: [] }; @@ -199,7 +199,7 @@ export default function AppTableOfContents(props) { // Corresponds to 10 frames at 60 Hz useThrottledOnScroll(itemsServer.length > 0 ? findActiveIndex : null, 166); - const handleClick = hash => event => { + const handleClick = (hash) => (event) => { // Ignore click for new tab/new window behavior if ( event.defaultPrevented || @@ -255,12 +255,12 @@ export default function AppTableOfContents(props) { {t('tableOfContents')} - {itemsServer.map(item2 => ( + {itemsServer.map((item2) => (
  • {itemLink(item2)} {item2.children.length > 0 ? (
      - {item2.children.map(item3 => ( + {item2.children.map((item3) => (
    • {itemLink(item3, true)}
      • ))}
    diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js index db77aa8c7a9e2e..1b84e2441116a2 100644 --- a/docs/src/modules/components/Demo.js +++ b/docs/src/modules/components/Demo.js @@ -41,7 +41,7 @@ function addHiddenInput(form, name, value) { form.appendChild(input); } -const styles = theme => ({ +const styles = (theme) => ({ root: { marginBottom: 40, marginLeft: -theme.spacing(2), @@ -164,8 +164,8 @@ function useUniqueId(prefix) { function Demo(props) { const { classes, demo, demoOptions, githubLocation } = props; const dispatch = useDispatch(); - const t = useSelector(state => state.options.t); - const codeVariant = useSelector(state => state.options.codeVariant); + const t = useSelector((state) => state.options.t); + const codeVariant = useSelector((state) => state.options.codeVariant); const demoData = getDemoData(codeVariant, demo, githubLocation); const [sourceHintSeen, setSourceHintSeen] = React.useState(false); @@ -174,7 +174,7 @@ function Demo(props) { }, []); const [demoHovered, setDemoHovered] = React.useState(false); - const handleDemoHover = event => { + const handleDemoHover = (event) => { setDemoHovered(event.type === 'mouseenter'); }; @@ -231,7 +231,7 @@ function Demo(props) { }; const [anchorEl, setAnchorEl] = React.useState(null); - const handleMoreClick = event => { + const handleMoreClick = (event) => { setAnchorEl(event.currentTarget); }; @@ -260,7 +260,7 @@ function Demo(props) { addHiddenInput(form, 'project[description]', demoConfig.description); addHiddenInput(form, 'project[dependencies]', JSON.stringify(demoConfig.dependencies)); addHiddenInput(form, 'project[devDependencies]', JSON.stringify(demoConfig.devDependencies)); - Object.keys(demoConfig.files).forEach(key => { + Object.keys(demoConfig.files).forEach((key) => { const value = demoConfig.files[key]; addHiddenInput(form, `project[files][${key}]`, value); }); @@ -289,7 +289,7 @@ function Demo(props) { demoOptions.bg = true; } - const createHandleCodeSourceLink = anchor => async () => { + const createHandleCodeSourceLink = (anchor) => async () => { try { await copy(`${window.location.href.split('#')[0]}#${anchor}`); setSnackbarMessage(t('copiedSourceLink')); @@ -310,11 +310,11 @@ function Demo(props) { const handleCodeOpenClick = () => { document.cookie = `sourceHintSeen=true;path=/;max-age=31536000`; - setCodeOpen(open => !open); + setCodeOpen((open) => !open); setSourceHintSeen(setSourceHintSeen(true)); }; - const match = useMediaQuery(theme => theme.breakpoints.up('sm')); + const match = useMediaQuery((theme) => theme.breakpoints.up('sm')); const jsx = getJsxPreview(demoData.raw || ''); const showPreview = @@ -330,7 +330,7 @@ function Demo(props) { showCodeLabel = showPreview ? t('showFullSource') : t('showSource'); } - const [demoKey, resetDemo] = React.useReducer(key => key + 1, 0); + const [demoKey, resetDemo] = React.useReducer((key) => key + 1, 0); const demoSourceId = useUniqueId(`demo-`); const openDemoSource = codeOpen || showPreview; diff --git a/docs/src/modules/components/DemoLanguages.js b/docs/src/modules/components/DemoLanguages.js index f5f9b38c18c6eb..22a95770b9bff6 100644 --- a/docs/src/modules/components/DemoLanguages.js +++ b/docs/src/modules/components/DemoLanguages.js @@ -20,7 +20,7 @@ const styles = { function DemoLanguages(props) { const { classes, codeOpen, codeVariant, demo, gaEventLabel, onLanguageClick } = props; const hasTSVariant = demo.rawTS; - const t = useSelector(state => state.options.t); + const t = useSelector((state) => state.options.t); function renderedCodeVariant() { if (codeVariant === CODE_VARIANTS.TS && hasTSVariant) { diff --git a/docs/src/modules/components/DemoSandboxed.js b/docs/src/modules/components/DemoSandboxed.js index 1a2b3bdd1541dd..9375e3a84b1c7f 100644 --- a/docs/src/modules/components/DemoSandboxed.js +++ b/docs/src/modules/components/DemoSandboxed.js @@ -8,7 +8,7 @@ import Frame from 'react-frame-component'; import { useSelector } from 'react-redux'; import DemoErrorBoundary from 'docs/src/modules/components/DemoErrorBoundary'; -const styles = theme => ({ +const styles = (theme) => ({ frame: { backgroundColor: theme.palette.background.default, flexGrow: 1, @@ -26,7 +26,7 @@ function DemoFrame(props) { }); const instanceRef = React.useRef(); - const handleRef = React.useCallback(ref => { + const handleRef = React.useCallback((ref) => { instanceRef.current = { contentDocument: ref ? ref.node.contentDocument : null, contentWindow: ref ? ref.node.contentWindow : null, @@ -90,7 +90,7 @@ function DemoSandboxed(props) { const Sandbox = iframe ? StyledFrame : React.Fragment; const sandboxProps = iframe ? { title: `${name} demo`, ...other } : {}; - const t = useSelector(state => state.options.t); + const t = useSelector((state) => state.options.t); return ( diff --git a/docs/src/modules/components/DiamondSponsors.js b/docs/src/modules/components/DiamondSponsors.js index aebebf5956aa93..fb3edcc27f4d03 100644 --- a/docs/src/modules/components/DiamondSponsors.js +++ b/docs/src/modules/components/DiamondSponsors.js @@ -4,7 +4,7 @@ import { useSelector } from 'react-redux'; import { makeStyles } from '@material-ui/core/styles'; import AddIcon from '@material-ui/icons/Add'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { '& a': { display: 'block', @@ -35,7 +35,7 @@ const useStyles = makeStyles(theme => ({ export default function DiamondSponsors() { const classes = useStyles(); - const t = useSelector(state => state.options.t); + const t = useSelector((state) => state.options.t); return (
    diff --git a/docs/src/modules/components/EditPage.js b/docs/src/modules/components/EditPage.js index be8eef2661af14..2bf301ecab026b 100644 --- a/docs/src/modules/components/EditPage.js +++ b/docs/src/modules/components/EditPage.js @@ -6,8 +6,8 @@ import { SOURCE_CODE_ROOT_URL } from 'docs/src/modules/constants'; export default function EditPage(props) { const { markdownLocation } = props; - const t = useSelector(state => state.options.t); - const userLanguage = useSelector(state => state.options.userLanguage); + const t = useSelector((state) => state.options.t); + const userLanguage = useSelector((state) => state.options.userLanguage); const LOCALES = { zh: 'zh-CN', pt: 'pt-BR', es: 'es-ES' }; const CROWDIN_ROOT_URL = 'https://translate.material-ui.com/project/material-ui-docs/'; const crowdInLocale = LOCALES[userLanguage] || userLanguage; diff --git a/docs/src/modules/components/Head.js b/docs/src/modules/components/Head.js index d6ad2a572fbd68..2020e47d5bf1ba 100644 --- a/docs/src/modules/components/Head.js +++ b/docs/src/modules/components/Head.js @@ -6,9 +6,9 @@ import PropTypes from 'prop-types'; import { useSelector } from 'react-redux'; export default function Head(props) { - const t = useSelector(state => state.options.t); + const t = useSelector((state) => state.options.t); const { description = t('strapline'), title = t('headTitle'), children } = props; - const userLanguage = useSelector(state => state.options.userLanguage); + const userLanguage = useSelector((state) => state.options.userLanguage); const router = useRouter(); return ( diff --git a/docs/src/modules/components/Link.js b/docs/src/modules/components/Link.js index c37627c5511ec7..d37662b0e47b15 100644 --- a/docs/src/modules/components/Link.js +++ b/docs/src/modules/components/Link.js @@ -40,7 +40,7 @@ function Link(props) { const router = useRouter(); - const userLanguage = useSelector(state => state.options.userLanguage); + const userLanguage = useSelector((state) => state.options.userLanguage); const className = clsx(classNameProps, { [activeClassName]: router.pathname === routerHref && activeClassName, }); diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js index 3ca29a85c7fede..37a99a7f22523d 100644 --- a/docs/src/modules/components/MarkdownDocs.js +++ b/docs/src/modules/components/MarkdownDocs.js @@ -20,7 +20,7 @@ import { getHeaders, getTitle, getDescription } from 'docs/src/modules/utils/par import { pageToTitleI18n } from 'docs/src/modules/utils/helpers'; import Link from 'docs/src/modules/components/Link'; -const styles = theme => ({ +const styles = (theme) => ({ root: { width: '100%', }, @@ -98,7 +98,7 @@ function MarkdownDocs(props) { reqSource, } = props; - const t = useSelector(state => state.options.t); + const t = useSelector((state) => state.options.t); const markdownDocs = useMarkdownDocs({ markdown: markdownProp, @@ -112,7 +112,7 @@ function MarkdownDocs(props) { const { activePage, pages } = React.useContext(PageContext); const pageList = flattenPages(pages); - const currentPageNum = findIndex(pageList, page => page.pathname === activePage.pathname); + const currentPageNum = findIndex(pageList, (page) => page.pathname === activePage.pathname); const currentPage = pageList[currentPageNum]; const prevPage = pageList[currentPageNum - 1]; const nextPage = pageList[currentPageNum + 1]; diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index 90e6c155b4036e..3ec9fd8c5e3c82 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -53,7 +53,7 @@ const externs = [ renderer.link = (href, title, text) => { let more = ''; - if (externs.some(domain => href.indexOf(domain) !== -1)) { + if (externs.some((domain) => href.indexOf(domain) !== -1)) { more = ' target="_blank" rel="noopener nofollow"'; } @@ -114,7 +114,7 @@ const markedOptions = { renderer, }; -const styles = theme => ({ +const styles = (theme) => ({ root: { ...theme.typography.body1, color: theme.palette.text.primary, @@ -298,7 +298,7 @@ const styles = theme => ({ function MarkdownElement(props) { const { classes, className, text, ...other } = props; - const userLanguage = useSelector(state => state.options.userLanguage); + const userLanguage = useSelector((state) => state.options.userLanguage); // eslint-disable-next-line no-underscore-dangle global.__MARKED_USER_LANGUAGE__ = userLanguage; diff --git a/docs/src/modules/components/Notifications.js b/docs/src/modules/components/Notifications.js index 84856f2033316f..89391b70953ebf 100644 --- a/docs/src/modules/components/Notifications.js +++ b/docs/src/modules/components/Notifications.js @@ -19,7 +19,7 @@ import sleep from 'modules/waterfall/sleep'; import { getCookie } from 'docs/src/modules/utils/helpers'; import notifications from '../../../notifications.json'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ paper: { transformOrigin: 'top right', }, @@ -68,11 +68,11 @@ export default function Notifications() { const [open, setOpen] = React.useState(false); const [tooltipOpen, setTooltipOpen] = React.useState(false); const anchorRef = React.useRef(null); - const t = useSelector(state => state.options.t); - const userLanguage = useSelector(state => state.options.userLanguage); + const t = useSelector((state) => state.options.t); + const userLanguage = useSelector((state) => state.options.userLanguage); const handleToggle = () => { - setOpen(prevOpen => !prevOpen); + setOpen((prevOpen) => !prevOpen); setTooltipOpen(false); setUnseenNotificationsCount(0); document.cookie = `lastSeenNotification=${messageList[0].id};path=/;max-age=31536000`; @@ -93,7 +93,7 @@ export default function Notifications() { const handleMessage = () => { const lastSeen = getLastSeenNotification(); - const userMessages = messages.filter(message => { + const userMessages = messages.filter((message) => { if ( message.userLanguage && message.userLanguage !== userLanguage && diff --git a/docs/src/modules/components/ThemeContext.js b/docs/src/modules/components/ThemeContext.js index 3f1966c6e80399..c238fcbafb2633 100644 --- a/docs/src/modules/components/ThemeContext.js +++ b/docs/src/modules/components/ThemeContext.js @@ -147,7 +147,7 @@ export function ThemeProvider(props) { } }, themeInitialOptions); - const userLanguage = useSelector(state => state.options.userLanguage); + const userLanguage = useSelector((state) => state.options.userLanguage); const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)'); const preferredType = prefersDarkMode ? 'dark' : 'light'; const { dense, direction, paletteColors, paletteType = preferredType, spacing } = themeOptions; @@ -235,5 +235,5 @@ ThemeProvider.propTypes = { */ export function useChangeTheme() { const dispatch = React.useContext(DispatchContext); - return React.useCallback(options => dispatch({ type: 'CHANGE', payload: options }), [dispatch]); + return React.useCallback((options) => dispatch({ type: 'CHANGE', payload: options }), [dispatch]); } diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js index 9e2c04008c686c..92532e3fdcc32b 100644 --- a/docs/src/modules/components/TopLayoutBlog.js +++ b/docs/src/modules/components/TopLayoutBlog.js @@ -9,7 +9,7 @@ import useMarkdownDocs from 'docs/src/modules/components/useMarkdownDocs'; import { getHeaders, getTitle, getDescription } from 'docs/src/modules/utils/parseMarkdown'; import AppFooter from 'docs/src/modules/components/AppFooter'; -const styles = theme => ({ +const styles = (theme) => ({ root: { flexGrow: 1, }, diff --git a/docs/src/modules/components/TopLayoutCompany.js b/docs/src/modules/components/TopLayoutCompany.js index 1d44cadb8f6138..785a21f08b08b1 100644 --- a/docs/src/modules/components/TopLayoutCompany.js +++ b/docs/src/modules/components/TopLayoutCompany.js @@ -8,7 +8,7 @@ import useMarkdownDocs from 'docs/src/modules/components/useMarkdownDocs'; import { getHeaders, getTitle, getDescription } from 'docs/src/modules/utils/parseMarkdown'; import AppFooter from 'docs/src/modules/components/AppFooter'; -const styles = theme => ({ +const styles = (theme) => ({ root: { flex: '1 0 100%', }, diff --git a/docs/src/modules/components/useMarkdownDocs.js b/docs/src/modules/components/useMarkdownDocs.js index 895f016d1d8a29..aefcb091bd7335 100644 --- a/docs/src/modules/components/useMarkdownDocs.js +++ b/docs/src/modules/components/useMarkdownDocs.js @@ -17,14 +17,14 @@ export default function useMarkdownDocs(options) { reqSource, } = options; - const userLanguage = useSelector(state => state.options.userLanguage); + const userLanguage = useSelector((state) => state.options.userLanguage); let demos; let markdown = markdownProp; if (!markdown) { demos = {}; const markdowns = {}; - req.keys().forEach(filename => { + req.keys().forEach((filename) => { if (filename.indexOf('.md') !== -1) { const match = filename.match(/-([a-z]{2})\.md$/); @@ -59,7 +59,7 @@ export default function useMarkdownDocs(options) { const { activePage } = React.useContext(PageContext); let location = locationProp || (activePage && activePage.pathname); - const t = useSelector(state => state.options.t); + const t = useSelector((state) => state.options.t); if (location && !locationProp) { const token = location.split('/'); @@ -79,7 +79,7 @@ export default function useMarkdownDocs(options) { ${headers.components .map( - component => + (component) => `- [<${component} />](${rewriteUrlForNextExport(`/api/${kebabCase(component)}`)})`, ) .join('\n')} diff --git a/docs/src/modules/redux/initRedux.js b/docs/src/modules/redux/initRedux.js index 7accbdaf8a2fab..62c4470b10eeab 100644 --- a/docs/src/modules/redux/initRedux.js +++ b/docs/src/modules/redux/initRedux.js @@ -3,7 +3,7 @@ import { createStore, combineReducers, applyMiddleware, compose } from 'redux'; import optionsReducer from 'docs/src/modules/redux/optionsReducer'; // Get the Redux DevTools extension and fallback to a no-op function -let devtools = x => x; +let devtools = (x) => x; if ( process.env.NODE_ENV !== 'production' && diff --git a/docs/src/modules/redux/optionsReducer.js b/docs/src/modules/redux/optionsReducer.js index 60ec4d1dca5206..0b736de8af6af8 100644 --- a/docs/src/modules/redux/optionsReducer.js +++ b/docs/src/modules/redux/optionsReducer.js @@ -15,7 +15,7 @@ function getPath(obj, path) { const warnOnce = {}; -const getT = memoize(userLanguage => (key, options = {}) => { +const getT = memoize((userLanguage) => (key, options = {}) => { const { ignoreWarning = false } = options; const wordings = translations[userLanguage]; diff --git a/docs/src/modules/utils/defaultPropsHandler.js b/docs/src/modules/utils/defaultPropsHandler.js index c89b882db50e31..961a1524b2d4a0 100644 --- a/docs/src/modules/utils/defaultPropsHandler.js +++ b/docs/src/modules/utils/defaultPropsHandler.js @@ -46,7 +46,7 @@ function getDefaultValue(propertyPath) { } function getJsdocDefaultValue(jsdoc) { - const defaultTag = jsdoc.tags.find(tag => tag.title === 'default'); + const defaultTag = jsdoc.tags.find((tag) => tag.title === 'default'); if (defaultTag === undefined) { return undefined; } @@ -55,8 +55,8 @@ function getJsdocDefaultValue(jsdoc) { function getDefaultValuesFromProps(properties, documentation) { properties - .filter(propertyPath => types.Property.check(propertyPath.node)) - .forEach(propertyPath => { + .filter((propertyPath) => types.Property.check(propertyPath.node)) + .forEach((propertyPath) => { const propName = getPropertyName(propertyPath); if (!propName) return; @@ -93,10 +93,10 @@ function getPropsPath(functionBody) { let propsPath; // visitVariableDeclarator, can't use visit body.node since it looses scope information functionBody - .filter(path => { + .filter((path) => { return types.VariableDeclaration.check(path.node); }) - .forEach(path => { + .forEach((path) => { const declaratorPath = path.get('declarations', 0); if (declaratorPath.get('init', 'name').value === 'props') { propsPath = declaratorPath.get('id'); diff --git a/docs/src/modules/utils/find.js b/docs/src/modules/utils/find.js index e7a1543a048494..3c8a0b7918da5c 100644 --- a/docs/src/modules/utils/find.js +++ b/docs/src/modules/utils/find.js @@ -14,7 +14,7 @@ function findPagesMarkdown( ) { const items = fs.readdirSync(directory); - items.forEach(item => { + items.forEach((item) => { const itemPath = path.resolve(directory, item); if (fs.statSync(itemPath).isDirectory()) { @@ -51,7 +51,7 @@ const componentRegex = /^([A-Z][a-z]+)+\.js/; function findComponents(directory, components = []) { const items = fs.readdirSync(directory); - items.forEach(item => { + items.forEach((item) => { const itemPath = path.resolve(directory, item); if (fs.statSync(itemPath).isDirectory()) { @@ -82,7 +82,7 @@ function findPages( directory = path.resolve(__dirname, '../../../pages'), pages = [], ) { - fs.readdirSync(directory).forEach(item => { + fs.readdirSync(directory).forEach((item) => { const itemPath = path.resolve(directory, item); const pathname = itemPath .replace(new RegExp(`\\${path.sep}`, 'g'), '/') diff --git a/docs/src/modules/utils/generateMarkdown.js b/docs/src/modules/utils/generateMarkdown.js index 5d460d98d90355..1c93cd386b0567 100644 --- a/docs/src/modules/utils/generateMarkdown.js +++ b/docs/src/modules/utils/generateMarkdown.js @@ -7,7 +7,7 @@ import { SOURCE_CODE_ROOT_URL, LANGUAGES_IN_PROGRESS } from 'docs/src/modules/co const PATH_REPLACE_REGEX = /\\/g; const PATH_SEPARATOR = '/'; -const DEMO_IGNORE = LANGUAGES_IN_PROGRESS.map(language => `-${language}.md`); +const DEMO_IGNORE = LANGUAGES_IN_PROGRESS.map((language) => `-${language}.md`); function normalizePath(path) { return path.replace(PATH_REPLACE_REGEX, PATH_SEPARATOR); @@ -91,7 +91,7 @@ function resolveType(type) { } if (type.type === 'UnionType') { - return type.elements.map(t => resolveType(t)).join(' \\| '); + return type.elements.map((t) => resolveType(t)).join(' \\| '); } return type.name; @@ -119,7 +119,7 @@ function generatePropDescription(prop) { .replace(/(\r?\n){2}/g, '
    ') .replace(/\r?\n/g, ' '); - if (parsed.tags.some(tag => tag.title === 'ignore')) { + if (parsed.tags.some((tag) => tag.title === 'ignore')) { return null; } @@ -127,7 +127,7 @@ function generatePropDescription(prop) { if (type.name === 'func' && parsed.tags.length > 0) { // Remove new lines from tag descriptions to avoid markdown errors. - parsed.tags.forEach(tag => { + parsed.tags.forEach((tag) => { if (tag.description) { tag.description = tag.description.replace(/\r*\n/g, ' '); } @@ -149,7 +149,7 @@ function generatePropDescription(prop) { signature += '

    **Signature:**
    `function('; signature += parsedArgs - .map(tag => { + .map((tag) => { if (tag.type.type === 'OptionalType') { return `${tag.name}?: ${tag.type.expression.name}`; } @@ -158,7 +158,7 @@ function generatePropDescription(prop) { }) .join(', '); signature += `) => ${parsedReturns.type.name}\`
    `; - signature += parsedArgs.map(tag => `*${tag.name}:* ${tag.description}`).join('
    '); + signature += parsedArgs.map((tag) => `*${tag.name}:* ${tag.description}`).join('
    '); if (parsedReturns.description) { signature += `
    *returns* (${parsedReturns.type.name}): ${parsedReturns.description}`; } @@ -203,7 +203,7 @@ function generatePropType(type) { case 'shape': return `{ ${Object.keys(type.value) - .map(subValue => { + .map((subValue) => { const subType = type.value[subValue]; return `${subValue}${subType.required ? '' : '?'}: ${generatePropType(subType)}`; }) @@ -213,7 +213,7 @@ function generatePropType(type) { case 'enum': { return ( type.value - .map(type2 => { + .map((type2) => { if (type.name === 'enum') { return escapeCell(type2.value); } @@ -352,7 +352,7 @@ function generateClasses(reactAPI) { text = `| Rule name | Global class | Description | |:-----|:-------------|:------------|\n`; text += reactAPI.styles.classes - .map(styleRule => { + .map((styleRule) => { if (styleRule === '@global') { return '| @global | | Apply global styles.'; } @@ -433,7 +433,7 @@ function generateDemos(reactAPI) { return `## Demos ${pagesMarkdown - .map(page => `- [${pageToTitle(page)}](${rewriteUrlForNextExport(page.pathname)})`) + .map((page) => `- [${pageToTitle(page)}](${rewriteUrlForNextExport(page.pathname)})`) .join('\n')} `; diff --git a/docs/src/modules/utils/helpers.js b/docs/src/modules/utils/helpers.js index b461d7bca8d014..c4ef4d8af5f619 100644 --- a/docs/src/modules/utils/helpers.js +++ b/docs/src/modules/utils/helpers.js @@ -11,7 +11,7 @@ function titleize(string) { return string .split('-') - .map(word => word.charAt(0).toUpperCase() + word.slice(1)) + .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) .join(' '); } @@ -58,10 +58,10 @@ const packagesWithBundledTypes = ['@material-ui/core', '@material-ui/lab']; */ function addTypeDeps(deps) { const packagesWithDTPackage = Object.keys(deps).filter( - name => packagesWithBundledTypes.indexOf(name) === -1, + (name) => packagesWithBundledTypes.indexOf(name) === -1, ); - packagesWithDTPackage.forEach(name => { + packagesWithDTPackage.forEach((name) => { let resolvedName = name; // scoped package? if (name.startsWith('@')) { diff --git a/docs/src/modules/utils/mapTranslations.js b/docs/src/modules/utils/mapTranslations.js index 18da9fb1221d38..25192727da188a 100644 --- a/docs/src/modules/utils/mapTranslations.js +++ b/docs/src/modules/utils/mapTranslations.js @@ -1,6 +1,6 @@ export default function mapTranslations(req, ext) { const translations = {}; - req.keys().forEach(filename => { + req.keys().forEach((filename) => { const match = filename.match(new RegExp(`-([a-z]{2}).${ext}$`)); if (match) { diff --git a/docs/src/modules/utils/parseMarkdown.js b/docs/src/modules/utils/parseMarkdown.js index 9e237bc9aa7b5f..2f75a72b9d4ea8 100644 --- a/docs/src/modules/utils/parseMarkdown.js +++ b/docs/src/modules/utils/parseMarkdown.js @@ -26,7 +26,7 @@ export function getHeaders(markdown) { if (headers.components) { headers.components = headers.components .split(',') - .map(x => x.trim()) + .map((x) => x.trim()) .sort(); } else { headers.components = []; @@ -41,7 +41,7 @@ export function getContents(markdown) { return markdown .replace(headerRegExp, '') // Remove header information .split(/^{{("demo":[^}]*)}}$/gm) // Split markdown into an array, separating demos - .filter(content => !emptyRegExp.test(content)); // Remove empty lines + .filter((content) => !emptyRegExp.test(content)); // Remove empty lines } export function getTitle(markdown) { diff --git a/docs/src/modules/utils/parseTest.js b/docs/src/modules/utils/parseTest.js index a429fac038c27e..a0d3ba4253b1f2 100644 --- a/docs/src/modules/utils/parseTest.js +++ b/docs/src/modules/utils/parseTest.js @@ -94,7 +94,7 @@ export default async function parseTest(componentFilename) { }; const { properties = [] } = descriptor; - properties.forEach(property => { + properties.forEach((property) => { const key = property.key.name; switch (key) { diff --git a/docs/src/pages/components/alert/ActionAlerts.js b/docs/src/pages/components/alert/ActionAlerts.js index c4bffa039d3d41..32149b01c52848 100644 --- a/docs/src/pages/components/alert/ActionAlerts.js +++ b/docs/src/pages/components/alert/ActionAlerts.js @@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'; import Alert from '@material-ui/lab/Alert'; import Button from '@material-ui/core/Button'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', '& > * + *': { diff --git a/docs/src/pages/components/alert/ColorAlerts.js b/docs/src/pages/components/alert/ColorAlerts.js index f90d05ce50d51d..dbc9ac4be981fb 100644 --- a/docs/src/pages/components/alert/ColorAlerts.js +++ b/docs/src/pages/components/alert/ColorAlerts.js @@ -2,7 +2,7 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Alert from '@material-ui/lab/Alert'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', '& > * + *': { diff --git a/docs/src/pages/components/alert/DescriptionAlerts.js b/docs/src/pages/components/alert/DescriptionAlerts.js index f0b2a3bbcbb2b5..45ef1697ef16ef 100644 --- a/docs/src/pages/components/alert/DescriptionAlerts.js +++ b/docs/src/pages/components/alert/DescriptionAlerts.js @@ -2,7 +2,7 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import { Alert, AlertTitle } from '@material-ui/lab'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', '& > * + *': { diff --git a/docs/src/pages/components/alert/FilledAlerts.js b/docs/src/pages/components/alert/FilledAlerts.js index 9f9b5a357c686c..bcd5e13b14aba9 100644 --- a/docs/src/pages/components/alert/FilledAlerts.js +++ b/docs/src/pages/components/alert/FilledAlerts.js @@ -2,7 +2,7 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Alert from '@material-ui/lab/Alert'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', '& > * + *': { diff --git a/docs/src/pages/components/alert/IconAlerts.js b/docs/src/pages/components/alert/IconAlerts.js index b64fb4486bd360..d6e2be0f9352a7 100644 --- a/docs/src/pages/components/alert/IconAlerts.js +++ b/docs/src/pages/components/alert/IconAlerts.js @@ -4,7 +4,7 @@ import Alert from '@material-ui/lab/Alert'; import CheckIcon from '@material-ui/icons/Check'; import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', '& > * + *': { diff --git a/docs/src/pages/components/alert/OutlinedAlerts.js b/docs/src/pages/components/alert/OutlinedAlerts.js index 54dc9651b88c8f..7e8ea442f6d9a1 100644 --- a/docs/src/pages/components/alert/OutlinedAlerts.js +++ b/docs/src/pages/components/alert/OutlinedAlerts.js @@ -2,7 +2,7 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Alert from '@material-ui/lab/Alert'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', '& > * + *': { diff --git a/docs/src/pages/components/alert/SimpleAlerts.js b/docs/src/pages/components/alert/SimpleAlerts.js index 5b0fc608d6fcc4..6cf9eaca6a801c 100644 --- a/docs/src/pages/components/alert/SimpleAlerts.js +++ b/docs/src/pages/components/alert/SimpleAlerts.js @@ -2,7 +2,7 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Alert from '@material-ui/lab/Alert'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', '& > * + *': { diff --git a/docs/src/pages/components/alert/TransitionAlerts.js b/docs/src/pages/components/alert/TransitionAlerts.js index 746ebeaf748790..625388448f4cc6 100644 --- a/docs/src/pages/components/alert/TransitionAlerts.js +++ b/docs/src/pages/components/alert/TransitionAlerts.js @@ -6,7 +6,7 @@ import Collapse from '@material-ui/core/Collapse'; import Button from '@material-ui/core/Button'; import CloseIcon from '@material-ui/icons/Close'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', '& > * + *': { diff --git a/docs/src/pages/components/app-bar/BackToTop.js b/docs/src/pages/components/app-bar/BackToTop.js index 5f36f2a1f945cf..5ac3757a8d74f9 100644 --- a/docs/src/pages/components/app-bar/BackToTop.js +++ b/docs/src/pages/components/app-bar/BackToTop.js @@ -12,7 +12,7 @@ import Fab from '@material-ui/core/Fab'; import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp'; import Zoom from '@material-ui/core/Zoom'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { position: 'fixed', bottom: theme.spacing(2), @@ -32,7 +32,7 @@ function ScrollTop(props) { threshold: 100, }); - const handleClick = event => { + const handleClick = (event) => { const anchor = (event.target.ownerDocument || document).querySelector('#back-to-top-anchor'); if (anchor) { diff --git a/docs/src/pages/components/app-bar/BottomAppBar.js b/docs/src/pages/components/app-bar/BottomAppBar.js index d3191aef1cdbd6..aff556b916c8eb 100644 --- a/docs/src/pages/components/app-bar/BottomAppBar.js +++ b/docs/src/pages/components/app-bar/BottomAppBar.js @@ -67,7 +67,7 @@ const messages = [ }, ]; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ text: { padding: theme.spacing(2, 2, 0), }, diff --git a/docs/src/pages/components/app-bar/ButtonAppBar.js b/docs/src/pages/components/app-bar/ButtonAppBar.js index 30d4f390f261c2..a597f2c9dc4b63 100644 --- a/docs/src/pages/components/app-bar/ButtonAppBar.js +++ b/docs/src/pages/components/app-bar/ButtonAppBar.js @@ -7,7 +7,7 @@ import Button from '@material-ui/core/Button'; import IconButton from '@material-ui/core/IconButton'; import MenuIcon from '@material-ui/icons/Menu'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, }, diff --git a/docs/src/pages/components/app-bar/DenseAppBar.js b/docs/src/pages/components/app-bar/DenseAppBar.js index 800b192623993b..1804e7add08edc 100644 --- a/docs/src/pages/components/app-bar/DenseAppBar.js +++ b/docs/src/pages/components/app-bar/DenseAppBar.js @@ -6,7 +6,7 @@ import Typography from '@material-ui/core/Typography'; import IconButton from '@material-ui/core/IconButton'; import MenuIcon from '@material-ui/icons/Menu'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, }, diff --git a/docs/src/pages/components/app-bar/MenuAppBar.js b/docs/src/pages/components/app-bar/MenuAppBar.js index 4cebb348c8d6ec..55e28fdd855571 100644 --- a/docs/src/pages/components/app-bar/MenuAppBar.js +++ b/docs/src/pages/components/app-bar/MenuAppBar.js @@ -12,7 +12,7 @@ import FormGroup from '@material-ui/core/FormGroup'; import MenuItem from '@material-ui/core/MenuItem'; import Menu from '@material-ui/core/Menu'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, }, @@ -30,11 +30,11 @@ export default function MenuAppBar() { const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); - const handleChange = event => { + const handleChange = (event) => { setAuth(event.target.checked); }; - const handleMenu = event => { + const handleMenu = (event) => { setAnchorEl(event.currentTarget); }; diff --git a/docs/src/pages/components/app-bar/PrimarySearchAppBar.js b/docs/src/pages/components/app-bar/PrimarySearchAppBar.js index 1570d526c910d2..5c907e687980d9 100644 --- a/docs/src/pages/components/app-bar/PrimarySearchAppBar.js +++ b/docs/src/pages/components/app-bar/PrimarySearchAppBar.js @@ -15,7 +15,7 @@ import MailIcon from '@material-ui/icons/Mail'; import NotificationsIcon from '@material-ui/icons/Notifications'; import MoreIcon from '@material-ui/icons/MoreVert'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ grow: { flexGrow: 1, }, @@ -87,7 +87,7 @@ export default function PrimarySearchAppBar() { const isMenuOpen = Boolean(anchorEl); const isMobileMenuOpen = Boolean(mobileMoreAnchorEl); - const handleProfileMenuOpen = event => { + const handleProfileMenuOpen = (event) => { setAnchorEl(event.currentTarget); }; @@ -100,7 +100,7 @@ export default function PrimarySearchAppBar() { handleMobileMenuClose(); }; - const handleMobileMenuOpen = event => { + const handleMobileMenuOpen = (event) => { setMobileMoreAnchorEl(event.currentTarget); }; diff --git a/docs/src/pages/components/app-bar/ProminentAppBar.js b/docs/src/pages/components/app-bar/ProminentAppBar.js index 445bebb7655dca..4c3d0189dd997c 100644 --- a/docs/src/pages/components/app-bar/ProminentAppBar.js +++ b/docs/src/pages/components/app-bar/ProminentAppBar.js @@ -8,7 +8,7 @@ import MenuIcon from '@material-ui/icons/Menu'; import SearchIcon from '@material-ui/icons/Search'; import MoreIcon from '@material-ui/icons/MoreVert'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, }, diff --git a/docs/src/pages/components/app-bar/ProminentAppBar.tsx b/docs/src/pages/components/app-bar/ProminentAppBar.tsx index 445bebb7655dca..4c3d0189dd997c 100644 --- a/docs/src/pages/components/app-bar/ProminentAppBar.tsx +++ b/docs/src/pages/components/app-bar/ProminentAppBar.tsx @@ -8,7 +8,7 @@ import MenuIcon from '@material-ui/icons/Menu'; import SearchIcon from '@material-ui/icons/Search'; import MoreIcon from '@material-ui/icons/MoreVert'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, }, diff --git a/docs/src/pages/components/app-bar/SearchAppBar.js b/docs/src/pages/components/app-bar/SearchAppBar.js index b6e29ca868a8a2..5edccad937a52b 100644 --- a/docs/src/pages/components/app-bar/SearchAppBar.js +++ b/docs/src/pages/components/app-bar/SearchAppBar.js @@ -8,7 +8,7 @@ import { fade, makeStyles } from '@material-ui/core/styles'; import MenuIcon from '@material-ui/icons/Menu'; import SearchIcon from '@material-ui/icons/Search'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, }, diff --git a/docs/src/pages/components/autocomplete/Asynchronous.js b/docs/src/pages/components/autocomplete/Asynchronous.js index 6c65770f44ab20..9ff1deb9616c93 100644 --- a/docs/src/pages/components/autocomplete/Asynchronous.js +++ b/docs/src/pages/components/autocomplete/Asynchronous.js @@ -6,7 +6,7 @@ import Autocomplete from '@material-ui/lab/Autocomplete'; import CircularProgress from '@material-ui/core/CircularProgress'; function sleep(delay = 0) { - return new Promise(resolve => { + return new Promise((resolve) => { setTimeout(resolve, delay); }); } @@ -29,7 +29,7 @@ export default function Asynchronous() { const countries = await response.json(); if (active) { - setOptions(Object.keys(countries).map(key => countries[key].item[0])); + setOptions(Object.keys(countries).map((key) => countries[key].item[0])); } })(); @@ -56,10 +56,10 @@ export default function Asynchronous() { setOpen(false); }} getOptionSelected={(option, value) => option.name === value.name} - getOptionLabel={option => option.name} + getOptionLabel={(option) => option.name} options={options} loading={loading} - renderInput={params => ( + renderInput={(params) => ( { + return new Promise((resolve) => { setTimeout(resolve, delay); }); } @@ -33,7 +33,7 @@ export default function Asynchronous() { const countries = await response.json(); if (active) { - setOptions(Object.keys(countries).map(key => countries[key].item[0]) as CountryType[]); + setOptions(Object.keys(countries).map((key) => countries[key].item[0]) as CountryType[]); } })(); @@ -60,10 +60,10 @@ export default function Asynchronous() { setOpen(false); }} getOptionSelected={(option, value) => option.name === value.name} - getOptionLabel={option => option.name} + getOptionLabel={(option) => option.name} options={options} loading={loading} - renderInput={params => ( + renderInput={(params) => ( option.title} + getOptionLabel={(option) => option.title} renderOption={(option, { selected }) => ( )} style={{ width: 500 }} - renderInput={params => ( + renderInput={(params) => ( )} /> diff --git a/docs/src/pages/components/autocomplete/CheckboxesTags.tsx b/docs/src/pages/components/autocomplete/CheckboxesTags.tsx index e6661e77dda655..97e99d45740040 100644 --- a/docs/src/pages/components/autocomplete/CheckboxesTags.tsx +++ b/docs/src/pages/components/autocomplete/CheckboxesTags.tsx @@ -17,7 +17,7 @@ export default function CheckboxesTags() { id="checkboxes-tags-demo" options={top100Films} disableCloseOnSelect - getOptionLabel={option => option.title} + getOptionLabel={(option) => option.title} renderOption={(option, { selected }) => ( )} style={{ width: 500 }} - renderInput={params => ( + renderInput={(params) => ( )} /> diff --git a/docs/src/pages/components/autocomplete/ComboBox.js b/docs/src/pages/components/autocomplete/ComboBox.js index d861ea76e0860d..6c996784ceb5b7 100644 --- a/docs/src/pages/components/autocomplete/ComboBox.js +++ b/docs/src/pages/components/autocomplete/ComboBox.js @@ -8,9 +8,9 @@ export default function ComboBox() { option.title} + getOptionLabel={(option) => option.title} style={{ width: 300 }} - renderInput={params => } + renderInput={(params) => } /> ); } diff --git a/docs/src/pages/components/autocomplete/ComboBox.tsx b/docs/src/pages/components/autocomplete/ComboBox.tsx index d861ea76e0860d..6c996784ceb5b7 100644 --- a/docs/src/pages/components/autocomplete/ComboBox.tsx +++ b/docs/src/pages/components/autocomplete/ComboBox.tsx @@ -8,9 +8,9 @@ export default function ComboBox() { option.title} + getOptionLabel={(option) => option.title} style={{ width: 300 }} - renderInput={params => } + renderInput={(params) => } /> ); } diff --git a/docs/src/pages/components/autocomplete/CountrySelect.js b/docs/src/pages/components/autocomplete/CountrySelect.js index 5984ec1c45b5b2..87e7cd6da01afc 100644 --- a/docs/src/pages/components/autocomplete/CountrySelect.js +++ b/docs/src/pages/components/autocomplete/CountrySelect.js @@ -8,7 +8,9 @@ import { makeStyles } from '@material-ui/core/styles'; // ⚠️ No support for IE 11 function countryToFlag(isoCode) { return typeof String.fromCodePoint !== 'undefined' - ? isoCode.toUpperCase().replace(/./g, char => String.fromCodePoint(char.charCodeAt(0) + 127397)) + ? isoCode + .toUpperCase() + .replace(/./g, (char) => String.fromCodePoint(char.charCodeAt(0) + 127397)) : isoCode; } @@ -34,14 +36,14 @@ export default function CountrySelect() { option: classes.option, }} autoHighlight - getOptionLabel={option => option.label} - renderOption={option => ( + getOptionLabel={(option) => option.label} + renderOption={(option) => ( {countryToFlag(option.code)} {option.label} ({option.code}) +{option.phone} )} - renderInput={params => ( + renderInput={(params) => ( String.fromCodePoint(char.charCodeAt(0) + 127397)) + ? isoCode + .toUpperCase() + .replace(/./g, (char) => String.fromCodePoint(char.charCodeAt(0) + 127397)) : isoCode; } @@ -34,14 +36,14 @@ export default function CountrySelect() { option: classes.option, }} autoHighlight - getOptionLabel={option => option.label} - renderOption={option => ( + getOptionLabel={(option) => option.label} + renderOption={(option) => ( {countryToFlag(option.code)} {option.label} ({option.code}) +{option.phone} )} - renderInput={params => ( + renderInput={(params) => ( option.title, + getOptionLabel: (option) => option.title, }); return ( diff --git a/docs/src/pages/components/autocomplete/CustomizedHook.tsx b/docs/src/pages/components/autocomplete/CustomizedHook.tsx index c19c9d8411dbae..12363d728e8a32 100644 --- a/docs/src/pages/components/autocomplete/CustomizedHook.tsx +++ b/docs/src/pages/components/autocomplete/CustomizedHook.tsx @@ -143,7 +143,7 @@ export default function CustomizedHook() { defaultValue: [top100Films[1]], multiple: true, options: top100Films, - getOptionLabel: option => option.title, + getOptionLabel: (option) => option.title, }); return ( diff --git a/docs/src/pages/components/autocomplete/DisabledOptions.js b/docs/src/pages/components/autocomplete/DisabledOptions.js index b40312041fa0bb..2159c1455eb2d9 100644 --- a/docs/src/pages/components/autocomplete/DisabledOptions.js +++ b/docs/src/pages/components/autocomplete/DisabledOptions.js @@ -8,9 +8,11 @@ export default function DisabledOptions() { option === timeSlots[0] || option === timeSlots[2]} + getOptionDisabled={(option) => option === timeSlots[0] || option === timeSlots[2]} style={{ width: 300 }} - renderInput={params => } + renderInput={(params) => ( + + )} /> ); } diff --git a/docs/src/pages/components/autocomplete/DisabledOptions.tsx b/docs/src/pages/components/autocomplete/DisabledOptions.tsx index b40312041fa0bb..2159c1455eb2d9 100644 --- a/docs/src/pages/components/autocomplete/DisabledOptions.tsx +++ b/docs/src/pages/components/autocomplete/DisabledOptions.tsx @@ -8,9 +8,11 @@ export default function DisabledOptions() { option === timeSlots[0] || option === timeSlots[2]} + getOptionDisabled={(option) => option === timeSlots[0] || option === timeSlots[2]} style={{ width: 300 }} - renderInput={params => } + renderInput={(params) => ( + + )} /> ); } diff --git a/docs/src/pages/components/autocomplete/Filter.js b/docs/src/pages/components/autocomplete/Filter.js index 3ceccae605bf1b..5d750037522dfe 100644 --- a/docs/src/pages/components/autocomplete/Filter.js +++ b/docs/src/pages/components/autocomplete/Filter.js @@ -5,7 +5,7 @@ import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete const filterOptions = createFilterOptions({ matchFrom: 'start', - stringify: option => option.title, + stringify: (option) => option.title, }); export default function Filter() { @@ -13,10 +13,10 @@ export default function Filter() { option.title} + getOptionLabel={(option) => option.title} filterOptions={filterOptions} style={{ width: 300 }} - renderInput={params => } + renderInput={(params) => } /> ); } diff --git a/docs/src/pages/components/autocomplete/Filter.tsx b/docs/src/pages/components/autocomplete/Filter.tsx index 86fb696811b5f2..2056941814f0b1 100644 --- a/docs/src/pages/components/autocomplete/Filter.tsx +++ b/docs/src/pages/components/autocomplete/Filter.tsx @@ -13,10 +13,10 @@ export default function Filter() { option.title} + getOptionLabel={(option) => option.title} filterOptions={filterOptions} style={{ width: 300 }} - renderInput={params => } + renderInput={(params) => } /> ); } diff --git a/docs/src/pages/components/autocomplete/FixedTags.js b/docs/src/pages/components/autocomplete/FixedTags.js index 7398159fc8173e..186fdcd9e2d6d2 100644 --- a/docs/src/pages/components/autocomplete/FixedTags.js +++ b/docs/src/pages/components/autocomplete/FixedTags.js @@ -10,7 +10,7 @@ export default function FixedTags() { multiple id="fixed-tags-demo" options={top100Films} - getOptionLabel={option => option.title} + getOptionLabel={(option) => option.title} defaultValue={[top100Films[6], top100Films[13]]} renderTags={(value, getTagProps) => value.map((option, index) => ( @@ -18,7 +18,7 @@ export default function FixedTags() { )) } style={{ width: 500 }} - renderInput={params => ( + renderInput={(params) => ( )} /> diff --git a/docs/src/pages/components/autocomplete/FixedTags.tsx b/docs/src/pages/components/autocomplete/FixedTags.tsx index 7398159fc8173e..186fdcd9e2d6d2 100644 --- a/docs/src/pages/components/autocomplete/FixedTags.tsx +++ b/docs/src/pages/components/autocomplete/FixedTags.tsx @@ -10,7 +10,7 @@ export default function FixedTags() { multiple id="fixed-tags-demo" options={top100Films} - getOptionLabel={option => option.title} + getOptionLabel={(option) => option.title} defaultValue={[top100Films[6], top100Films[13]]} renderTags={(value, getTagProps) => value.map((option, index) => ( @@ -18,7 +18,7 @@ export default function FixedTags() { )) } style={{ width: 500 }} - renderInput={params => ( + renderInput={(params) => ( )} /> diff --git a/docs/src/pages/components/autocomplete/FreeSolo.js b/docs/src/pages/components/autocomplete/FreeSolo.js index e6efaa351bb37f..dc2372f2a71713 100644 --- a/docs/src/pages/components/autocomplete/FreeSolo.js +++ b/docs/src/pages/components/autocomplete/FreeSolo.js @@ -9,8 +9,8 @@ export default function FreeSolo() { option.title)} - renderInput={params => ( + options={top100Films.map((option) => option.title)} + renderInput={(params) => ( )} /> @@ -18,8 +18,8 @@ export default function FreeSolo() { freeSolo id="free-solo-2-demo" disableClearable - options={top100Films.map(option => option.title)} - renderInput={params => ( + options={top100Films.map((option) => option.title)} + renderInput={(params) => ( option.title)} - renderInput={params => ( + options={top100Films.map((option) => option.title)} + renderInput={(params) => ( )} /> @@ -18,8 +18,8 @@ export default function FreeSolo() { freeSolo id="free-solo-2-demo" disableClearable - options={top100Films.map(option => option.title)} - renderInput={params => ( + options={top100Films.map((option) => option.title)} + renderInput={(params) => ( { + getOptionLabel={(option) => { // e.g value selected with enter, right from the input if (typeof option === 'string') { return option; @@ -46,10 +46,10 @@ export default function FreeSoloCreateOption() { } return option.title; }} - renderOption={option => option.title} + renderOption={(option) => option.title} style={{ width: 300 }} freeSolo - renderInput={params => ( + renderInput={(params) => ( )} /> diff --git a/docs/src/pages/components/autocomplete/FreeSoloCreateOption.tsx b/docs/src/pages/components/autocomplete/FreeSoloCreateOption.tsx index ed864cc9b47d43..68883e5a01d99c 100644 --- a/docs/src/pages/components/autocomplete/FreeSoloCreateOption.tsx +++ b/docs/src/pages/components/autocomplete/FreeSoloCreateOption.tsx @@ -35,7 +35,7 @@ export default function FreeSoloCreateOption() { }} id="free-solo-with-text-demo" options={top100Films as FilmOptionType[]} - getOptionLabel={option => { + getOptionLabel={(option) => { // e.g value selected with enter, right from the input if (typeof option === 'string') { return option; @@ -45,10 +45,10 @@ export default function FreeSoloCreateOption() { } return option.title; }} - renderOption={option => option.title} + renderOption={(option) => option.title} style={{ width: 300 }} freeSolo - renderInput={params => ( + renderInput={(params) => ( )} /> diff --git a/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.js b/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.js index 9ac3158273f9be..ab5ec617e4aa52 100644 --- a/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.js +++ b/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.js @@ -29,7 +29,7 @@ export default function FreeSoloCreateOptionDialog() { year: '', }); - const handleSubmit = event => { + const handleSubmit = (event) => { event.preventDefault(); setValue({ title: dialogValue.title, @@ -82,7 +82,7 @@ export default function FreeSoloCreateOptionDialog() { }} id="free-solo-dialog-demo" options={top100Films} - getOptionLabel={option => { + getOptionLabel={(option) => { // e.g value selected with enter, right from the input if (typeof option === 'string') { return option; @@ -92,10 +92,10 @@ export default function FreeSoloCreateOptionDialog() { } return option.title; }} - renderOption={option => option.title} + renderOption={(option) => option.title} style={{ width: 300 }} freeSolo - renderInput={params => ( + renderInput={(params) => ( )} /> @@ -111,7 +111,7 @@ export default function FreeSoloCreateOptionDialog() { margin="dense" id="name" value={dialogValue.title} - onChange={event => setDialogValue({ ...dialogValue, title: event.target.value })} + onChange={(event) => setDialogValue({ ...dialogValue, title: event.target.value })} label="title" type="text" /> @@ -119,7 +119,7 @@ export default function FreeSoloCreateOptionDialog() { margin="dense" id="name" value={dialogValue.year} - onChange={event => setDialogValue({ ...dialogValue, year: event.target.value })} + onChange={(event) => setDialogValue({ ...dialogValue, year: event.target.value })} label="year" type="number" /> diff --git a/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.tsx b/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.tsx index f0c234cea1743a..19de8ffd897a6d 100644 --- a/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.tsx +++ b/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.tsx @@ -79,7 +79,7 @@ export default function FreeSoloCreateOptionDialog() { }} id="free-solo-dialog-demo" options={top100Films} - getOptionLabel={option => { + getOptionLabel={(option) => { // e.g value selected with enter, right from the input if (typeof option === 'string') { return option; @@ -89,10 +89,10 @@ export default function FreeSoloCreateOptionDialog() { } return option.title; }} - renderOption={option => option.title} + renderOption={(option) => option.title} style={{ width: 300 }} freeSolo - renderInput={params => ( + renderInput={(params) => ( )} /> @@ -108,7 +108,7 @@ export default function FreeSoloCreateOptionDialog() { margin="dense" id="name" value={dialogValue.title} - onChange={event => setDialogValue({ ...dialogValue, title: event.target.value })} + onChange={(event) => setDialogValue({ ...dialogValue, title: event.target.value })} label="title" type="text" /> @@ -116,7 +116,7 @@ export default function FreeSoloCreateOptionDialog() { margin="dense" id="name" value={dialogValue.year} - onChange={event => setDialogValue({ ...dialogValue, year: event.target.value })} + onChange={(event) => setDialogValue({ ...dialogValue, year: event.target.value })} label="year" type="number" /> diff --git a/docs/src/pages/components/autocomplete/GitHubLabel.js b/docs/src/pages/components/autocomplete/GitHubLabel.js index 996ac97ea2a7d3..2f1c309bd48db3 100644 --- a/docs/src/pages/components/autocomplete/GitHubLabel.js +++ b/docs/src/pages/components/autocomplete/GitHubLabel.js @@ -9,7 +9,7 @@ import Autocomplete from '@material-ui/lab/Autocomplete'; import ButtonBase from '@material-ui/core/ButtonBase'; import InputBase from '@material-ui/core/InputBase'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: 221, fontSize: 13, @@ -123,7 +123,7 @@ export default function GitHubLabel() { const [pendingValue, setPendingValue] = React.useState([]); const theme = useTheme(); - const handleClick = event => { + const handleClick = (event) => { setPendingValue(value); setAnchorEl(event.currentTarget); }; @@ -154,7 +154,7 @@ export default function GitHubLabel() { Labels - {value.map(label => ( + {value.map((label) => (
    option.name} - renderInput={params => ( + getOptionLabel={(option) => option.name} + renderInput={(params) => ( Labels - {value.map(label => ( + {value.map((label) => (
    option.name} - renderInput={params => ( + getOptionLabel={(option) => option.name} + renderInput={(params) => ( ({ +const useStyles = makeStyles((theme) => ({ icon: { color: theme.palette.text.secondary, marginRight: theme.spacing(2), @@ -47,7 +47,7 @@ export default function GoogleMaps() { loaded.current = true; } - const handleChange = event => { + const handleChange = (event) => { setInputValue(event.target.value); }; @@ -74,7 +74,7 @@ export default function GoogleMaps() { return undefined; } - fetch({ input: inputValue }, results => { + fetch({ input: inputValue }, (results) => { if (active) { setOptions(results || []); } @@ -89,12 +89,12 @@ export default function GoogleMaps() { (typeof option === 'string' ? option : option.description)} - filterOptions={x => x} + getOptionLabel={(option) => (typeof option === 'string' ? option : option.description)} + filterOptions={(x) => x} options={options} autoComplete includeInputInList - renderInput={params => ( + renderInput={(params) => ( )} - renderOption={option => { + renderOption={(option) => { const matches = option.structured_formatting.main_text_matched_substrings; const parts = parse( option.structured_formatting.main_text, - matches.map(match => [match.offset, match.offset + match.length]), + matches.map((match) => [match.offset, match.offset + match.length]), ); return ( diff --git a/docs/src/pages/components/autocomplete/GoogleMaps.tsx b/docs/src/pages/components/autocomplete/GoogleMaps.tsx index 7d4ebedabad936..6cfcbc50920bcb 100644 --- a/docs/src/pages/components/autocomplete/GoogleMaps.tsx +++ b/docs/src/pages/components/autocomplete/GoogleMaps.tsx @@ -22,7 +22,7 @@ function loadScript(src: string, position: HTMLElement | null, id: string) { const autocompleteService = { current: null }; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ icon: { color: theme.palette.text.secondary, marginRight: theme.spacing(2), @@ -103,12 +103,12 @@ export default function GoogleMaps() { (typeof option === 'string' ? option : option.description)} - filterOptions={x => x} + getOptionLabel={(option) => (typeof option === 'string' ? option : option.description)} + filterOptions={(x) => x} options={options} autoComplete includeInputInList - renderInput={params => ( + renderInput={(params) => ( )} - renderOption={option => { + renderOption={(option) => { const matches = option.structured_formatting.main_text_matched_substrings; const parts = parse( option.structured_formatting.main_text, diff --git a/docs/src/pages/components/autocomplete/Grouped.js b/docs/src/pages/components/autocomplete/Grouped.js index e9d2b1f28264ad..8fbd2cf626f9c1 100644 --- a/docs/src/pages/components/autocomplete/Grouped.js +++ b/docs/src/pages/components/autocomplete/Grouped.js @@ -4,7 +4,7 @@ import TextField from '@material-ui/core/TextField'; import Autocomplete from '@material-ui/lab/Autocomplete'; export default function Grouped() { - const options = top100Films.map(option => { + const options = top100Films.map((option) => { const firstLetter = option.title[0].toUpperCase(); return { firstLetter: /[0-9]/.test(firstLetter) ? '0-9' : firstLetter, @@ -16,10 +16,10 @@ export default function Grouped() { -b.firstLetter.localeCompare(a.firstLetter))} - groupBy={option => option.firstLetter} - getOptionLabel={option => option.title} + groupBy={(option) => option.firstLetter} + getOptionLabel={(option) => option.title} style={{ width: 300 }} - renderInput={params => } + renderInput={(params) => } /> ); } diff --git a/docs/src/pages/components/autocomplete/Grouped.tsx b/docs/src/pages/components/autocomplete/Grouped.tsx index e9d2b1f28264ad..8fbd2cf626f9c1 100644 --- a/docs/src/pages/components/autocomplete/Grouped.tsx +++ b/docs/src/pages/components/autocomplete/Grouped.tsx @@ -4,7 +4,7 @@ import TextField from '@material-ui/core/TextField'; import Autocomplete from '@material-ui/lab/Autocomplete'; export default function Grouped() { - const options = top100Films.map(option => { + const options = top100Films.map((option) => { const firstLetter = option.title[0].toUpperCase(); return { firstLetter: /[0-9]/.test(firstLetter) ? '0-9' : firstLetter, @@ -16,10 +16,10 @@ export default function Grouped() { -b.firstLetter.localeCompare(a.firstLetter))} - groupBy={option => option.firstLetter} - getOptionLabel={option => option.title} + groupBy={(option) => option.firstLetter} + getOptionLabel={(option) => option.title} style={{ width: 300 }} - renderInput={params => } + renderInput={(params) => } /> ); } diff --git a/docs/src/pages/components/autocomplete/Highlights.js b/docs/src/pages/components/autocomplete/Highlights.js index 77cfdacffdfdb2..ae7f8a522bf295 100644 --- a/docs/src/pages/components/autocomplete/Highlights.js +++ b/docs/src/pages/components/autocomplete/Highlights.js @@ -11,8 +11,8 @@ export default function Highlights() { id="highlights-demo" style={{ width: 300 }} options={top100Films} - getOptionLabel={option => option.title} - renderInput={params => ( + getOptionLabel={(option) => option.title} + renderInput={(params) => ( )} renderOption={(option, { inputValue }) => { diff --git a/docs/src/pages/components/autocomplete/Highlights.tsx b/docs/src/pages/components/autocomplete/Highlights.tsx index 77cfdacffdfdb2..ae7f8a522bf295 100644 --- a/docs/src/pages/components/autocomplete/Highlights.tsx +++ b/docs/src/pages/components/autocomplete/Highlights.tsx @@ -11,8 +11,8 @@ export default function Highlights() { id="highlights-demo" style={{ width: 300 }} options={top100Films} - getOptionLabel={option => option.title} - renderInput={params => ( + getOptionLabel={(option) => option.title} + renderInput={(params) => ( )} renderOption={(option, { inputValue }) => { diff --git a/docs/src/pages/components/autocomplete/Playground.js b/docs/src/pages/components/autocomplete/Playground.js index 8022dc0ab15bd8..bf208044a67ba1 100644 --- a/docs/src/pages/components/autocomplete/Playground.js +++ b/docs/src/pages/components/autocomplete/Playground.js @@ -6,11 +6,11 @@ import Autocomplete from '@material-ui/lab/Autocomplete'; export default function Playground() { const defaultProps = { options: top100Films, - getOptionLabel: option => option.title, + getOptionLabel: (option) => option.title, }; const flatProps = { - options: top100Films.map(option => option.title), + options: top100Films.map((option) => option.title), }; const [value, setValue] = React.useState(null); @@ -21,13 +21,13 @@ export default function Playground() { {...defaultProps} id="debug" debug - renderInput={params => } + renderInput={(params) => } /> ( + renderInput={(params) => ( )} /> @@ -35,24 +35,26 @@ export default function Playground() { {...defaultProps} id="clear-on-escape" clearOnEscape - renderInput={params => } + renderInput={(params) => } /> } + renderInput={(params) => } /> } + renderInput={(params) => ( + + )} /> } + renderInput={(params) => } /> { setValue(newValue); }} - renderInput={params => } + renderInput={(params) => } /> } + renderInput={(params) => } /> } + renderInput={(params) => } /> } + renderInput={(params) => } /> } + renderInput={(params) => } /> } + renderInput={(params) => } /> } + renderInput={(params) => } /> } + renderInput={(params) => } />
    ); diff --git a/docs/src/pages/components/autocomplete/Playground.tsx b/docs/src/pages/components/autocomplete/Playground.tsx index e7d99762b87354..44c68000d1c57c 100644 --- a/docs/src/pages/components/autocomplete/Playground.tsx +++ b/docs/src/pages/components/autocomplete/Playground.tsx @@ -9,7 +9,7 @@ export default function Playground() { getOptionLabel: (option: FilmOptionType) => option.title, }; const flatProps = { - options: top100Films.map(option => option.title), + options: top100Films.map((option) => option.title), }; const [value, setValue] = React.useState(null); @@ -19,13 +19,13 @@ export default function Playground() { {...defaultProps} id="debug" debug - renderInput={params => } + renderInput={(params) => } /> ( + renderInput={(params) => ( )} /> @@ -33,24 +33,26 @@ export default function Playground() { {...defaultProps} id="clear-on-escape" clearOnEscape - renderInput={params => } + renderInput={(params) => } /> } + renderInput={(params) => } /> } + renderInput={(params) => ( + + )} /> } + renderInput={(params) => } /> { setValue(newValue); }} - renderInput={params => } + renderInput={(params) => } /> } + renderInput={(params) => } /> } + renderInput={(params) => } /> } + renderInput={(params) => } /> } + renderInput={(params) => } /> } + renderInput={(params) => } /> } + renderInput={(params) => } /> } + renderInput={(params) => } />
    ); diff --git a/docs/src/pages/components/autocomplete/Sizes.js b/docs/src/pages/components/autocomplete/Sizes.js index 7d43095461ea88..475226fb7be104 100644 --- a/docs/src/pages/components/autocomplete/Sizes.js +++ b/docs/src/pages/components/autocomplete/Sizes.js @@ -5,7 +5,7 @@ import Autocomplete from '@material-ui/lab/Autocomplete'; import { makeStyles } from '@material-ui/core/styles'; import TextField from '@material-ui/core/TextField'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: 500, '& > * + *': { @@ -23,9 +23,9 @@ export default function Sizes() { id="size-small-standard" size="small" options={top100Films} - getOptionLabel={option => option.title} + getOptionLabel={(option) => option.title} defaultValue={top100Films[13]} - renderInput={params => ( + renderInput={(params) => ( )} /> @@ -34,9 +34,9 @@ export default function Sizes() { id="size-small-standard-multi" size="small" options={top100Films} - getOptionLabel={option => option.title} + getOptionLabel={(option) => option.title} defaultValue={[top100Films[13]]} - renderInput={params => ( + renderInput={(params) => ( )} /> @@ -44,9 +44,9 @@ export default function Sizes() { id="size-small-outlined" size="small" options={top100Films} - getOptionLabel={option => option.title} + getOptionLabel={(option) => option.title} defaultValue={top100Films[13]} - renderInput={params => ( + renderInput={(params) => ( )} /> @@ -55,9 +55,9 @@ export default function Sizes() { id="size-small-outlined-multi" size="small" options={top100Films} - getOptionLabel={option => option.title} + getOptionLabel={(option) => option.title} defaultValue={[top100Films[13]]} - renderInput={params => ( + renderInput={(params) => ( )} /> @@ -65,7 +65,7 @@ export default function Sizes() { id="size-small-filled" size="small" options={top100Films} - getOptionLabel={option => option.title} + getOptionLabel={(option) => option.title} defaultValue={top100Films[13]} renderTags={(value, getTagProps) => value.map((option, index) => ( @@ -77,7 +77,7 @@ export default function Sizes() { /> )) } - renderInput={params => ( + renderInput={(params) => ( )} /> @@ -86,7 +86,7 @@ export default function Sizes() { id="size-small-filled-multi" size="small" options={top100Films} - getOptionLabel={option => option.title} + getOptionLabel={(option) => option.title} defaultValue={[top100Films[13]]} renderTags={(value, getTagProps) => value.map((option, index) => ( @@ -98,7 +98,7 @@ export default function Sizes() { /> )) } - renderInput={params => ( + renderInput={(params) => ( )} /> diff --git a/docs/src/pages/components/autocomplete/Sizes.tsx b/docs/src/pages/components/autocomplete/Sizes.tsx index 00ccb066e74b4a..6707b50244d9ea 100644 --- a/docs/src/pages/components/autocomplete/Sizes.tsx +++ b/docs/src/pages/components/autocomplete/Sizes.tsx @@ -25,9 +25,9 @@ export default function Sizes() { id="size-small-standard" size="small" options={top100Films} - getOptionLabel={option => option.title} + getOptionLabel={(option) => option.title} defaultValue={top100Films[13]} - renderInput={params => ( + renderInput={(params) => ( )} /> @@ -36,9 +36,9 @@ export default function Sizes() { id="size-small-standard-multi" size="small" options={top100Films} - getOptionLabel={option => option.title} + getOptionLabel={(option) => option.title} defaultValue={[top100Films[13]]} - renderInput={params => ( + renderInput={(params) => ( )} /> @@ -46,9 +46,9 @@ export default function Sizes() { id="size-small-outlined" size="small" options={top100Films} - getOptionLabel={option => option.title} + getOptionLabel={(option) => option.title} defaultValue={top100Films[13]} - renderInput={params => ( + renderInput={(params) => ( )} /> @@ -57,9 +57,9 @@ export default function Sizes() { id="size-small-outlined-multi" size="small" options={top100Films} - getOptionLabel={option => option.title} + getOptionLabel={(option) => option.title} defaultValue={[top100Films[13]]} - renderInput={params => ( + renderInput={(params) => ( )} /> @@ -67,7 +67,7 @@ export default function Sizes() { id="size-small-filled" size="small" options={top100Films} - getOptionLabel={option => option.title} + getOptionLabel={(option) => option.title} defaultValue={top100Films[13]} renderTags={(value, getTagProps) => value.map((option, index) => ( @@ -79,7 +79,7 @@ export default function Sizes() { /> )) } - renderInput={params => ( + renderInput={(params) => ( )} /> @@ -88,7 +88,7 @@ export default function Sizes() { id="size-small-filled-multi" size="small" options={top100Films} - getOptionLabel={option => option.title} + getOptionLabel={(option) => option.title} defaultValue={[top100Films[13]]} renderTags={(value, getTagProps) => value.map((option, index) => ( @@ -100,7 +100,7 @@ export default function Sizes() { /> )) } - renderInput={params => ( + renderInput={(params) => ( )} /> diff --git a/docs/src/pages/components/autocomplete/Tags.js b/docs/src/pages/components/autocomplete/Tags.js index 1b2ba569a145c1..f5c867e4d2e3f1 100644 --- a/docs/src/pages/components/autocomplete/Tags.js +++ b/docs/src/pages/components/autocomplete/Tags.js @@ -5,7 +5,7 @@ import Autocomplete from '@material-ui/lab/Autocomplete'; import { makeStyles } from '@material-ui/core/styles'; import TextField from '@material-ui/core/TextField'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: 500, '& > * + *': { @@ -23,9 +23,9 @@ export default function Tags() { multiple id="tags-standard" options={top100Films} - getOptionLabel={option => option.title} + getOptionLabel={(option) => option.title} defaultValue={[top100Films[13]]} - renderInput={params => ( + renderInput={(params) => ( option.title} + getOptionLabel={(option) => option.title} defaultValue={[top100Films[13]]} filterSelectedOptions - renderInput={params => ( + renderInput={(params) => ( option.title)} + options={top100Films.map((option) => option.title)} defaultValue={[top100Films[13].title]} freeSolo renderTags={(value, getTagProps) => @@ -61,7 +61,7 @@ export default function Tags() { )) } - renderInput={params => ( + renderInput={(params) => ( )} /> diff --git a/docs/src/pages/components/autocomplete/Tags.tsx b/docs/src/pages/components/autocomplete/Tags.tsx index ea8fe3e72d3805..74a3643538cfb6 100644 --- a/docs/src/pages/components/autocomplete/Tags.tsx +++ b/docs/src/pages/components/autocomplete/Tags.tsx @@ -25,9 +25,9 @@ export default function Tags() { multiple id="tags-standard" options={top100Films} - getOptionLabel={option => option.title} + getOptionLabel={(option) => option.title} defaultValue={[top100Films[13]]} - renderInput={params => ( + renderInput={(params) => ( option.title} + getOptionLabel={(option) => option.title} defaultValue={[top100Films[13]]} filterSelectedOptions - renderInput={params => ( + renderInput={(params) => ( option.title)} + options={top100Films.map((option) => option.title)} defaultValue={[top100Films[13].title]} freeSolo renderTags={(value: string[], getTagProps) => @@ -63,7 +63,7 @@ export default function Tags() { )) } - renderInput={params => ( + renderInput={(params) => ( )} /> diff --git a/docs/src/pages/components/autocomplete/UseAutocomplete.js b/docs/src/pages/components/autocomplete/UseAutocomplete.js index 14f82a5d2f6fbe..9ac6e9448ae4ed 100644 --- a/docs/src/pages/components/autocomplete/UseAutocomplete.js +++ b/docs/src/pages/components/autocomplete/UseAutocomplete.js @@ -3,7 +3,7 @@ import React from 'react'; import useAutocomplete from '@material-ui/lab/useAutocomplete'; import { makeStyles } from '@material-ui/core/styles'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ label: { display: 'block', }, @@ -45,7 +45,7 @@ export default function UseAutocomplete() { } = useAutocomplete({ id: 'use-autocomplete-demo', options: top100Films, - getOptionLabel: option => option.title, + getOptionLabel: (option) => option.title, }); return ( diff --git a/docs/src/pages/components/autocomplete/UseAutocomplete.tsx b/docs/src/pages/components/autocomplete/UseAutocomplete.tsx index c7bfa1a01e3335..867317a69bcfd5 100644 --- a/docs/src/pages/components/autocomplete/UseAutocomplete.tsx +++ b/docs/src/pages/components/autocomplete/UseAutocomplete.tsx @@ -47,7 +47,7 @@ export default function UseAutocomplete() { } = useAutocomplete({ id: 'use-autocomplete-demo', options: top100Films, - getOptionLabel: option => option.title, + getOptionLabel: (option) => option.title, }); return ( diff --git a/docs/src/pages/components/autocomplete/Virtualize.js b/docs/src/pages/components/autocomplete/Virtualize.js index b925891a168879..f3804d170d83c0 100644 --- a/docs/src/pages/components/autocomplete/Virtualize.js +++ b/docs/src/pages/components/autocomplete/Virtualize.js @@ -36,7 +36,7 @@ const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) const itemCount = itemData.length; const itemSize = smUp ? 36 : 48; - const getChildSize = child => { + const getChildSize = (child) => { if (React.isValidElement(child) && child.type === ListSubheader) { return 48; } @@ -61,7 +61,7 @@ const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) key={itemCount} outerElementType={OuterElementType} innerElementType="ul" - itemSize={index => getChildSize(itemData[index])} + itemSize={(index) => getChildSize(itemData[index])} overscanCount={5} itemCount={itemCount} > @@ -100,7 +100,7 @@ const OPTIONS = Array.from(new Array(10000)) .map(() => random(10 + Math.ceil(Math.random() * 20))) .sort((a, b) => a.toUpperCase().localeCompare(b.toUpperCase())); -const renderGroup = params => [ +const renderGroup = (params) => [ {params.key} , @@ -119,9 +119,9 @@ export default function Virtualize() { ListboxComponent={ListboxComponent} renderGroup={renderGroup} options={OPTIONS} - groupBy={option => option[0].toUpperCase()} - renderInput={params => } - renderOption={option => {option}} + groupBy={(option) => option[0].toUpperCase()} + renderInput={(params) => } + renderOption={(option) => {option}} /> ); } diff --git a/docs/src/pages/components/autocomplete/Virtualize.tsx b/docs/src/pages/components/autocomplete/Virtualize.tsx index 84aecff0ce08fc..fc731622fe3bc4 100644 --- a/docs/src/pages/components/autocomplete/Virtualize.tsx +++ b/docs/src/pages/components/autocomplete/Virtualize.tsx @@ -60,7 +60,7 @@ const ListboxComponent = React.forwardRef(function ListboxCompon key={itemCount} outerElementType={OuterElementType} innerElementType="ul" - itemSize={index => getChildSize(itemData[index])} + itemSize={(index) => getChildSize(itemData[index])} overscanCount={5} itemCount={itemCount} > @@ -114,9 +114,9 @@ export default function Virtualize() { ListboxComponent={ListboxComponent as React.ComponentType>} renderGroup={renderGroup} options={OPTIONS} - groupBy={option => option[0].toUpperCase()} - renderInput={params => } - renderOption={option => {option}} + groupBy={(option) => option[0].toUpperCase()} + renderInput={(params) => } + renderOption={(option) => {option}} /> ); } diff --git a/docs/src/pages/components/avatars/BadgeAvatars.js b/docs/src/pages/components/avatars/BadgeAvatars.js index 51deb2a9cbddb9..3628f06eaa70ff 100644 --- a/docs/src/pages/components/avatars/BadgeAvatars.js +++ b/docs/src/pages/components/avatars/BadgeAvatars.js @@ -3,7 +3,7 @@ import Badge from '@material-ui/core/Badge'; import Avatar from '@material-ui/core/Avatar'; import { makeStyles, withStyles } from '@material-ui/core/styles'; -const StyledBadge = withStyles(theme => ({ +const StyledBadge = withStyles((theme) => ({ badge: { backgroundColor: '#44b700', color: '#44b700', @@ -32,7 +32,7 @@ const StyledBadge = withStyles(theme => ({ }, }))(Badge); -const SmallAvatar = withStyles(theme => ({ +const SmallAvatar = withStyles((theme) => ({ root: { width: 22, height: 22, @@ -40,7 +40,7 @@ const SmallAvatar = withStyles(theme => ({ }, }))(Avatar); -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', '& > *': { diff --git a/docs/src/pages/components/avatars/FallbackAvatars.js b/docs/src/pages/components/avatars/FallbackAvatars.js index 808c5d3e812632..dbaa10c1273e99 100644 --- a/docs/src/pages/components/avatars/FallbackAvatars.js +++ b/docs/src/pages/components/avatars/FallbackAvatars.js @@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'; import Avatar from '@material-ui/core/Avatar'; import { deepOrange } from '@material-ui/core/colors'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', '& > *': { diff --git a/docs/src/pages/components/avatars/IconAvatars.js b/docs/src/pages/components/avatars/IconAvatars.js index 4af6bc088fa6a3..7a39ea80d80664 100644 --- a/docs/src/pages/components/avatars/IconAvatars.js +++ b/docs/src/pages/components/avatars/IconAvatars.js @@ -6,7 +6,7 @@ import FolderIcon from '@material-ui/icons/Folder'; import PageviewIcon from '@material-ui/icons/Pageview'; import AssignmentIcon from '@material-ui/icons/Assignment'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', '& > *': { diff --git a/docs/src/pages/components/avatars/ImageAvatars.js b/docs/src/pages/components/avatars/ImageAvatars.js index 468fab2ea8493e..b3c080e427505e 100644 --- a/docs/src/pages/components/avatars/ImageAvatars.js +++ b/docs/src/pages/components/avatars/ImageAvatars.js @@ -2,7 +2,7 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Avatar from '@material-ui/core/Avatar'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', '& > *': { diff --git a/docs/src/pages/components/avatars/LetterAvatars.js b/docs/src/pages/components/avatars/LetterAvatars.js index fb126df2c7dc61..9f538a64f60ea2 100644 --- a/docs/src/pages/components/avatars/LetterAvatars.js +++ b/docs/src/pages/components/avatars/LetterAvatars.js @@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'; import Avatar from '@material-ui/core/Avatar'; import { deepOrange, deepPurple } from '@material-ui/core/colors'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', '& > *': { diff --git a/docs/src/pages/components/avatars/SizeAvatars.js b/docs/src/pages/components/avatars/SizeAvatars.js index e9d0028594137f..2312e92a7a78c2 100644 --- a/docs/src/pages/components/avatars/SizeAvatars.js +++ b/docs/src/pages/components/avatars/SizeAvatars.js @@ -2,7 +2,7 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Avatar from '@material-ui/core/Avatar'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', '& > *': { diff --git a/docs/src/pages/components/avatars/VariantAvatars.js b/docs/src/pages/components/avatars/VariantAvatars.js index 497cf2a91fe2cb..c4566908ccf5b8 100644 --- a/docs/src/pages/components/avatars/VariantAvatars.js +++ b/docs/src/pages/components/avatars/VariantAvatars.js @@ -4,7 +4,7 @@ import Avatar from '@material-ui/core/Avatar'; import { deepOrange, green } from '@material-ui/core/colors'; import AssignmentIcon from '@material-ui/icons/Assignment'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', '& > *': { diff --git a/docs/src/pages/components/backdrop/SimpleBackdrop.js b/docs/src/pages/components/backdrop/SimpleBackdrop.js index 141b7f694616e2..9b5df345848ff2 100644 --- a/docs/src/pages/components/backdrop/SimpleBackdrop.js +++ b/docs/src/pages/components/backdrop/SimpleBackdrop.js @@ -4,7 +4,7 @@ import CircularProgress from '@material-ui/core/CircularProgress'; import Button from '@material-ui/core/Button'; import { makeStyles } from '@material-ui/core/styles'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ backdrop: { zIndex: theme.zIndex.drawer + 1, color: '#fff', diff --git a/docs/src/pages/components/badges/BadgeAlignment.js b/docs/src/pages/components/badges/BadgeAlignment.js index 27574669afb161..f0b7c467322dbf 100644 --- a/docs/src/pages/components/badges/BadgeAlignment.js +++ b/docs/src/pages/components/badges/BadgeAlignment.js @@ -9,7 +9,7 @@ import { makeStyles } from '@material-ui/core/styles'; import MailIcon from '@material-ui/icons/Mail'; import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', }, @@ -30,11 +30,11 @@ export default function BadgeAlignment() { const [horizontal, setHorizontal] = React.useState('right'); const [vertical, setVertical] = React.useState('top'); - const handleHorizontalChange = event => { + const handleHorizontalChange = (event) => { setHorizontal(event.target.value); }; - const handleVerticalChange = event => { + const handleVerticalChange = (event) => { setVertical(event.target.value); }; diff --git a/docs/src/pages/components/badges/BadgeMax.js b/docs/src/pages/components/badges/BadgeMax.js index 319b6c58e80788..e6c6d3a60899ef 100644 --- a/docs/src/pages/components/badges/BadgeMax.js +++ b/docs/src/pages/components/badges/BadgeMax.js @@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'; import Badge from '@material-ui/core/Badge'; import MailIcon from '@material-ui/icons/Mail'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { '& > *': { margin: theme.spacing(2), diff --git a/docs/src/pages/components/badges/BadgeOverlap.js b/docs/src/pages/components/badges/BadgeOverlap.js index 278f60f05484a5..7f47b0caf6247e 100644 --- a/docs/src/pages/components/badges/BadgeOverlap.js +++ b/docs/src/pages/components/badges/BadgeOverlap.js @@ -3,7 +3,7 @@ import clsx from 'clsx'; import { makeStyles } from '@material-ui/core/styles'; import Badge from '@material-ui/core/Badge'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { '& > *': { margin: theme.spacing(1), diff --git a/docs/src/pages/components/badges/BadgeVisibility.js b/docs/src/pages/components/badges/BadgeVisibility.js index a1c15a76fe650a..e18744432877a6 100644 --- a/docs/src/pages/components/badges/BadgeVisibility.js +++ b/docs/src/pages/components/badges/BadgeVisibility.js @@ -9,7 +9,7 @@ import MailIcon from '@material-ui/icons/Mail'; import Switch from '@material-ui/core/Switch'; import FormControlLabel from '@material-ui/core/FormControlLabel'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', flexDirection: 'column', diff --git a/docs/src/pages/components/badges/CustomizedBadges.js b/docs/src/pages/components/badges/CustomizedBadges.js index 637b72898875ec..fcc148a8e35c08 100644 --- a/docs/src/pages/components/badges/CustomizedBadges.js +++ b/docs/src/pages/components/badges/CustomizedBadges.js @@ -4,7 +4,7 @@ import { withStyles } from '@material-ui/core/styles'; import IconButton from '@material-ui/core/IconButton'; import ShoppingCartIcon from '@material-ui/icons/ShoppingCart'; -const StyledBadge = withStyles(theme => ({ +const StyledBadge = withStyles((theme) => ({ badge: { right: -3, top: 13, diff --git a/docs/src/pages/components/badges/DotBadge.js b/docs/src/pages/components/badges/DotBadge.js index fe2495e927db0e..108c5cbc352e5d 100644 --- a/docs/src/pages/components/badges/DotBadge.js +++ b/docs/src/pages/components/badges/DotBadge.js @@ -4,7 +4,7 @@ import Badge from '@material-ui/core/Badge'; import MailIcon from '@material-ui/icons/Mail'; import Typography from '@material-ui/core/Typography'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { '& > *': { margin: theme.spacing(1), diff --git a/docs/src/pages/components/badges/ShowZeroBadge.js b/docs/src/pages/components/badges/ShowZeroBadge.js index e39160f5ff93fe..572e27c17e6d6f 100644 --- a/docs/src/pages/components/badges/ShowZeroBadge.js +++ b/docs/src/pages/components/badges/ShowZeroBadge.js @@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'; import Badge from '@material-ui/core/Badge'; import MailIcon from '@material-ui/icons/Mail'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { '& > *': { margin: theme.spacing(1), diff --git a/docs/src/pages/components/badges/SimpleBadge.js b/docs/src/pages/components/badges/SimpleBadge.js index 72c40fee285321..5f3584d23980ab 100644 --- a/docs/src/pages/components/badges/SimpleBadge.js +++ b/docs/src/pages/components/badges/SimpleBadge.js @@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'; import Badge from '@material-ui/core/Badge'; import MailIcon from '@material-ui/icons/Mail'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { '& > *': { margin: theme.spacing(1), diff --git a/docs/src/pages/components/breadcrumbs/CustomSeparator.js b/docs/src/pages/components/breadcrumbs/CustomSeparator.js index 47f87526444c9d..17972ddbb8e991 100644 --- a/docs/src/pages/components/breadcrumbs/CustomSeparator.js +++ b/docs/src/pages/components/breadcrumbs/CustomSeparator.js @@ -5,7 +5,7 @@ import Typography from '@material-ui/core/Typography'; import Link from '@material-ui/core/Link'; import NavigateNextIcon from '@material-ui/icons/NavigateNext'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { '& > * + *': { marginTop: theme.spacing(2), diff --git a/docs/src/pages/components/breadcrumbs/CustomizedBreadcrumbs.js b/docs/src/pages/components/breadcrumbs/CustomizedBreadcrumbs.js index 4ca9d97d0a627e..aea881e9e1d071 100644 --- a/docs/src/pages/components/breadcrumbs/CustomizedBreadcrumbs.js +++ b/docs/src/pages/components/breadcrumbs/CustomizedBreadcrumbs.js @@ -5,7 +5,7 @@ import Chip from '@material-ui/core/Chip'; import HomeIcon from '@material-ui/icons/Home'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -const StyledBreadcrumb = withStyles(theme => ({ +const StyledBreadcrumb = withStyles((theme) => ({ root: { backgroundColor: theme.palette.grey[100], height: theme.spacing(3), diff --git a/docs/src/pages/components/breadcrumbs/IconBreadcrumbs.js b/docs/src/pages/components/breadcrumbs/IconBreadcrumbs.js index 452da3413df3c5..703be643166cf0 100644 --- a/docs/src/pages/components/breadcrumbs/IconBreadcrumbs.js +++ b/docs/src/pages/components/breadcrumbs/IconBreadcrumbs.js @@ -7,7 +7,7 @@ import HomeIcon from '@material-ui/icons/Home'; import WhatshotIcon from '@material-ui/icons/Whatshot'; import GrainIcon from '@material-ui/icons/Grain'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ link: { display: 'flex', }, diff --git a/docs/src/pages/components/breadcrumbs/RouterBreadcrumbs.js b/docs/src/pages/components/breadcrumbs/RouterBreadcrumbs.js index f86a9bf643f14d..e76c4b24fc7628 100644 --- a/docs/src/pages/components/breadcrumbs/RouterBreadcrumbs.js +++ b/docs/src/pages/components/breadcrumbs/RouterBreadcrumbs.js @@ -41,7 +41,7 @@ ListItemLink.propTypes = { to: PropTypes.string.isRequired, }; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', flexDirection: 'column', @@ -56,14 +56,14 @@ const useStyles = makeStyles(theme => ({ }, })); -const LinkRouter = props => ; +const LinkRouter = (props) => ; export default function RouterBreadcrumbs() { const classes = useStyles(); const [open, setOpen] = React.useState(true); const handleClick = () => { - setOpen(prevOpen => !prevOpen); + setOpen((prevOpen) => !prevOpen); }; return ( @@ -71,7 +71,7 @@ export default function RouterBreadcrumbs() {
    {({ location }) => { - const pathnames = location.pathname.split('/').filter(x => x); + const pathnames = location.pathname.split('/').filter((x) => x); return ( diff --git a/docs/src/pages/components/breadcrumbs/RouterBreadcrumbs.tsx b/docs/src/pages/components/breadcrumbs/RouterBreadcrumbs.tsx index c353b012027fd2..cb5f6481145a6a 100644 --- a/docs/src/pages/components/breadcrumbs/RouterBreadcrumbs.tsx +++ b/docs/src/pages/components/breadcrumbs/RouterBreadcrumbs.tsx @@ -70,7 +70,7 @@ export default function RouterBreadcrumbs() { const [open, setOpen] = React.useState(true); const handleClick = () => { - setOpen(prevOpen => !prevOpen); + setOpen((prevOpen) => !prevOpen); }; return ( @@ -78,7 +78,7 @@ export default function RouterBreadcrumbs() {
    {({ location }) => { - const pathnames = location.pathname.split('/').filter(x => x); + const pathnames = location.pathname.split('/').filter((x) => x); return ( diff --git a/docs/src/pages/components/button-group/BasicButtonGroup.js b/docs/src/pages/components/button-group/BasicButtonGroup.js index e2b580e62f6011..de94dac8594798 100644 --- a/docs/src/pages/components/button-group/BasicButtonGroup.js +++ b/docs/src/pages/components/button-group/BasicButtonGroup.js @@ -3,7 +3,7 @@ import Button from '@material-ui/core/Button'; import ButtonGroup from '@material-ui/core/ButtonGroup'; import { makeStyles } from '@material-ui/core/styles'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', flexDirection: 'column', diff --git a/docs/src/pages/components/button-group/GroupOrientation.js b/docs/src/pages/components/button-group/GroupOrientation.js index f60b9f3372fe47..0a9fcd784ab808 100644 --- a/docs/src/pages/components/button-group/GroupOrientation.js +++ b/docs/src/pages/components/button-group/GroupOrientation.js @@ -3,7 +3,7 @@ import Button from '@material-ui/core/Button'; import ButtonGroup from '@material-ui/core/ButtonGroup'; import { makeStyles } from '@material-ui/core/styles'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', '& > *': { diff --git a/docs/src/pages/components/button-group/GroupOrientation.tsx b/docs/src/pages/components/button-group/GroupOrientation.tsx index f60b9f3372fe47..0a9fcd784ab808 100644 --- a/docs/src/pages/components/button-group/GroupOrientation.tsx +++ b/docs/src/pages/components/button-group/GroupOrientation.tsx @@ -3,7 +3,7 @@ import Button from '@material-ui/core/Button'; import ButtonGroup from '@material-ui/core/ButtonGroup'; import { makeStyles } from '@material-ui/core/styles'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', '& > *': { diff --git a/docs/src/pages/components/button-group/GroupSizesColors.js b/docs/src/pages/components/button-group/GroupSizesColors.js index bf008c58e05bf9..750f520b22760f 100644 --- a/docs/src/pages/components/button-group/GroupSizesColors.js +++ b/docs/src/pages/components/button-group/GroupSizesColors.js @@ -3,7 +3,7 @@ import Button from '@material-ui/core/Button'; import ButtonGroup from '@material-ui/core/ButtonGroup'; import { makeStyles } from '@material-ui/core/styles'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', flexDirection: 'column', diff --git a/docs/src/pages/components/button-group/SplitButton.js b/docs/src/pages/components/button-group/SplitButton.js index b201c0ebdc7abd..746ea9732139f1 100644 --- a/docs/src/pages/components/button-group/SplitButton.js +++ b/docs/src/pages/components/button-group/SplitButton.js @@ -27,10 +27,10 @@ export default function SplitButton() { }; const handleToggle = () => { - setOpen(prevOpen => !prevOpen); + setOpen((prevOpen) => !prevOpen); }; - const handleClose = event => { + const handleClose = (event) => { if (anchorRef.current && anchorRef.current.contains(event.target)) { return; } @@ -71,7 +71,7 @@ export default function SplitButton() { key={option} disabled={index === 2} selected={index === selectedIndex} - onClick={event => handleMenuItemClick(event, index)} + onClick={(event) => handleMenuItemClick(event, index)} > {option} diff --git a/docs/src/pages/components/button-group/SplitButton.tsx b/docs/src/pages/components/button-group/SplitButton.tsx index bf7d3d66c34e90..d01239a30803ce 100644 --- a/docs/src/pages/components/button-group/SplitButton.tsx +++ b/docs/src/pages/components/button-group/SplitButton.tsx @@ -30,7 +30,7 @@ export default function SplitButton() { }; const handleToggle = () => { - setOpen(prevOpen => !prevOpen); + setOpen((prevOpen) => !prevOpen); }; const handleClose = (event: React.MouseEvent) => { @@ -74,7 +74,7 @@ export default function SplitButton() { key={option} disabled={index === 2} selected={index === selectedIndex} - onClick={event => handleMenuItemClick(event, index)} + onClick={(event) => handleMenuItemClick(event, index)} > {option} diff --git a/docs/src/pages/components/buttons/ButtonBase.js b/docs/src/pages/components/buttons/ButtonBase.js index 08b1270ac10367..2b1926863a84aa 100644 --- a/docs/src/pages/components/buttons/ButtonBase.js +++ b/docs/src/pages/components/buttons/ButtonBase.js @@ -21,7 +21,7 @@ const images = [ }, ]; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', flexWrap: 'wrap', @@ -99,7 +99,7 @@ export default function ButtonBases() { return (
    - {images.map(image => ( + {images.map((image) => ( - {images.map(image => ( + {images.map((image) => ( ({ +const useStyles = makeStyles((theme) => ({ margin: { margin: theme.spacing(1), }, diff --git a/docs/src/pages/components/buttons/ContainedButtons.js b/docs/src/pages/components/buttons/ContainedButtons.js index 368423b512fcf0..2924b88f13e587 100644 --- a/docs/src/pages/components/buttons/ContainedButtons.js +++ b/docs/src/pages/components/buttons/ContainedButtons.js @@ -2,7 +2,7 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { '& > *': { margin: theme.spacing(1), diff --git a/docs/src/pages/components/buttons/CustomizedButtons.js b/docs/src/pages/components/buttons/CustomizedButtons.js index 15dcf7af45893b..d1248a6f6b64ca 100644 --- a/docs/src/pages/components/buttons/CustomizedButtons.js +++ b/docs/src/pages/components/buttons/CustomizedButtons.js @@ -41,7 +41,7 @@ const BootstrapButton = withStyles({ }, })(Button); -const ColorButton = withStyles(theme => ({ +const ColorButton = withStyles((theme) => ({ root: { color: theme.palette.getContrastText(purple[500]), backgroundColor: purple[500], @@ -51,7 +51,7 @@ const ColorButton = withStyles(theme => ({ }, }))(Button); -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ margin: { margin: theme.spacing(1), }, diff --git a/docs/src/pages/components/buttons/IconButtons.js b/docs/src/pages/components/buttons/IconButtons.js index c99035c6077e47..a09a65a5a9f762 100644 --- a/docs/src/pages/components/buttons/IconButtons.js +++ b/docs/src/pages/components/buttons/IconButtons.js @@ -5,7 +5,7 @@ import DeleteIcon from '@material-ui/icons/Delete'; import AlarmIcon from '@material-ui/icons/Alarm'; import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { '& > *': { margin: theme.spacing(1), diff --git a/docs/src/pages/components/buttons/IconLabelButtons.js b/docs/src/pages/components/buttons/IconLabelButtons.js index ef57c35dbc5914..e8a4884208da86 100644 --- a/docs/src/pages/components/buttons/IconLabelButtons.js +++ b/docs/src/pages/components/buttons/IconLabelButtons.js @@ -7,7 +7,7 @@ import KeyboardVoiceIcon from '@material-ui/icons/KeyboardVoice'; import Icon from '@material-ui/core/Icon'; import SaveIcon from '@material-ui/icons/Save'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ button: { margin: theme.spacing(1), }, diff --git a/docs/src/pages/components/buttons/OutlinedButtons.js b/docs/src/pages/components/buttons/OutlinedButtons.js index 101029c8cbe363..38236532fbaf85 100644 --- a/docs/src/pages/components/buttons/OutlinedButtons.js +++ b/docs/src/pages/components/buttons/OutlinedButtons.js @@ -2,7 +2,7 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { '& > *': { margin: theme.spacing(1), diff --git a/docs/src/pages/components/buttons/TextButtons.js b/docs/src/pages/components/buttons/TextButtons.js index 4b3ed43eab6fb5..40b0f4cdd27042 100644 --- a/docs/src/pages/components/buttons/TextButtons.js +++ b/docs/src/pages/components/buttons/TextButtons.js @@ -2,7 +2,7 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { '& > *': { margin: theme.spacing(1), diff --git a/docs/src/pages/components/buttons/UploadButtons.js b/docs/src/pages/components/buttons/UploadButtons.js index 34af8b626a80d7..c41fadc252cd4a 100644 --- a/docs/src/pages/components/buttons/UploadButtons.js +++ b/docs/src/pages/components/buttons/UploadButtons.js @@ -4,7 +4,7 @@ import Button from '@material-ui/core/Button'; import IconButton from '@material-ui/core/IconButton'; import PhotoCamera from '@material-ui/icons/PhotoCamera'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { '& > *': { margin: theme.spacing(1), diff --git a/docs/src/pages/components/cards/MediaControlCard.js b/docs/src/pages/components/cards/MediaControlCard.js index 45cef7d97fc282..7ec6abd80b0724 100644 --- a/docs/src/pages/components/cards/MediaControlCard.js +++ b/docs/src/pages/components/cards/MediaControlCard.js @@ -9,7 +9,7 @@ import SkipPreviousIcon from '@material-ui/icons/SkipPrevious'; import PlayArrowIcon from '@material-ui/icons/PlayArrow'; import SkipNextIcon from '@material-ui/icons/SkipNext'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', }, diff --git a/docs/src/pages/components/cards/RecipeReviewCard.js b/docs/src/pages/components/cards/RecipeReviewCard.js index 04a18b6a912f10..6272437dfc284b 100644 --- a/docs/src/pages/components/cards/RecipeReviewCard.js +++ b/docs/src/pages/components/cards/RecipeReviewCard.js @@ -16,7 +16,7 @@ import ShareIcon from '@material-ui/icons/Share'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import MoreVertIcon from '@material-ui/icons/MoreVert'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { maxWidth: 345, }, diff --git a/docs/src/pages/components/checkboxes/CheckboxLabels.js b/docs/src/pages/components/checkboxes/CheckboxLabels.js index 14948b92e5f636..a628ecb069fa17 100644 --- a/docs/src/pages/components/checkboxes/CheckboxLabels.js +++ b/docs/src/pages/components/checkboxes/CheckboxLabels.js @@ -17,7 +17,7 @@ const GreenCheckbox = withStyles({ }, }, checked: {}, -})(props => ); +})((props) => ); export default function CheckboxLabels() { const [state, setState] = React.useState({ @@ -27,7 +27,7 @@ export default function CheckboxLabels() { checkedG: true, }); - const handleChange = event => { + const handleChange = (event) => { setState({ ...state, [event.target.name]: event.target.checked }); }; diff --git a/docs/src/pages/components/checkboxes/Checkboxes.js b/docs/src/pages/components/checkboxes/Checkboxes.js index a8cfae91babe2e..e1032dcafe05a6 100644 --- a/docs/src/pages/components/checkboxes/Checkboxes.js +++ b/docs/src/pages/components/checkboxes/Checkboxes.js @@ -4,7 +4,7 @@ import Checkbox from '@material-ui/core/Checkbox'; export default function Checkboxes() { const [checked, setChecked] = React.useState(true); - const handleChange = event => { + const handleChange = (event) => { setChecked(event.target.checked); }; diff --git a/docs/src/pages/components/checkboxes/CheckboxesGroup.js b/docs/src/pages/components/checkboxes/CheckboxesGroup.js index 3d5368fd27634f..573a3872f1cdda 100644 --- a/docs/src/pages/components/checkboxes/CheckboxesGroup.js +++ b/docs/src/pages/components/checkboxes/CheckboxesGroup.js @@ -7,7 +7,7 @@ import FormControlLabel from '@material-ui/core/FormControlLabel'; import FormHelperText from '@material-ui/core/FormHelperText'; import Checkbox from '@material-ui/core/Checkbox'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', }, @@ -24,12 +24,12 @@ export default function CheckboxesGroup() { antoine: false, }); - const handleChange = event => { + const handleChange = (event) => { setState({ ...state, [event.target.name]: event.target.checked }); }; const { gilad, jason, antoine } = state; - const error = [gilad, jason, antoine].filter(v => v).length !== 2; + const error = [gilad, jason, antoine].filter((v) => v).length !== 2; return (
    diff --git a/docs/src/pages/components/checkboxes/CheckboxesGroup.tsx b/docs/src/pages/components/checkboxes/CheckboxesGroup.tsx index fe0c30c7a67856..b65a4803faec10 100644 --- a/docs/src/pages/components/checkboxes/CheckboxesGroup.tsx +++ b/docs/src/pages/components/checkboxes/CheckboxesGroup.tsx @@ -31,7 +31,7 @@ export default function CheckboxesGroup() { }; const { gilad, jason, antoine } = state; - const error = [gilad, jason, antoine].filter(v => v).length !== 2; + const error = [gilad, jason, antoine].filter((v) => v).length !== 2; return (
    diff --git a/docs/src/pages/components/chips/Chips.js b/docs/src/pages/components/chips/Chips.js index 5c45b3e770be6a..5237d2f321f426 100644 --- a/docs/src/pages/components/chips/Chips.js +++ b/docs/src/pages/components/chips/Chips.js @@ -5,7 +5,7 @@ import Chip from '@material-ui/core/Chip'; import FaceIcon from '@material-ui/icons/Face'; import DoneIcon from '@material-ui/icons/Done'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', justifyContent: 'center', diff --git a/docs/src/pages/components/chips/ChipsArray.js b/docs/src/pages/components/chips/ChipsArray.js index 148155c4d2ac5e..e25333f09705ad 100644 --- a/docs/src/pages/components/chips/ChipsArray.js +++ b/docs/src/pages/components/chips/ChipsArray.js @@ -4,7 +4,7 @@ import Chip from '@material-ui/core/Chip'; import Paper from '@material-ui/core/Paper'; import TagFacesIcon from '@material-ui/icons/TagFaces'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', justifyContent: 'center', @@ -26,13 +26,13 @@ export default function ChipsArray() { { key: 4, label: 'Vue.js' }, ]); - const handleDelete = chipToDelete => () => { - setChipData(chips => chips.filter(chip => chip.key !== chipToDelete.key)); + const handleDelete = (chipToDelete) => () => { + setChipData((chips) => chips.filter((chip) => chip.key !== chipToDelete.key)); }; return ( - {chipData.map(data => { + {chipData.map((data) => { let icon; if (data.label === 'React') { diff --git a/docs/src/pages/components/chips/ChipsArray.tsx b/docs/src/pages/components/chips/ChipsArray.tsx index 694c7462d8d76c..8ded962dcaa8d9 100644 --- a/docs/src/pages/components/chips/ChipsArray.tsx +++ b/docs/src/pages/components/chips/ChipsArray.tsx @@ -34,12 +34,12 @@ export default function ChipsArray() { ]); const handleDelete = (chipToDelete: ChipData) => () => { - setChipData(chips => chips.filter(chip => chip.key !== chipToDelete.key)); + setChipData((chips) => chips.filter((chip) => chip.key !== chipToDelete.key)); }; return ( - {chipData.map(data => { + {chipData.map((data) => { let icon; if (data.label === 'React') { diff --git a/docs/src/pages/components/chips/ChipsPlayground.js b/docs/src/pages/components/chips/ChipsPlayground.js index cada0448448fb6..f659812b1848ce 100644 --- a/docs/src/pages/components/chips/ChipsPlayground.js +++ b/docs/src/pages/components/chips/ChipsPlayground.js @@ -13,7 +13,7 @@ import Chip from '@material-ui/core/Chip'; import FaceIcon from '@material-ui/icons/Face'; import DoneIcon from '@material-ui/icons/Done'; -const styles = theme => ({ +const styles = (theme) => ({ root: { flexGrow: 1, }, @@ -33,8 +33,8 @@ function ChipsPlayground(props) { size: 'medium', }); - const handleChange = event => { - setState(state => ({ + const handleChange = (event) => { + setState((state) => ({ ...state, [event.target.name]: event.target.value, })); diff --git a/docs/src/pages/components/chips/OutlinedChips.js b/docs/src/pages/components/chips/OutlinedChips.js index 06a8bd55d80ec6..9ff2f40198d117 100644 --- a/docs/src/pages/components/chips/OutlinedChips.js +++ b/docs/src/pages/components/chips/OutlinedChips.js @@ -5,7 +5,7 @@ import Chip from '@material-ui/core/Chip'; import FaceIcon from '@material-ui/icons/Face'; import DoneIcon from '@material-ui/icons/Done'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', justifyContent: 'center', diff --git a/docs/src/pages/components/chips/SmallChips.js b/docs/src/pages/components/chips/SmallChips.js index 3d3d27960c4e97..49e817bac7e85f 100644 --- a/docs/src/pages/components/chips/SmallChips.js +++ b/docs/src/pages/components/chips/SmallChips.js @@ -5,7 +5,7 @@ import Chip from '@material-ui/core/Chip'; import FaceIcon from '@material-ui/icons/Face'; import DoneIcon from '@material-ui/icons/Done'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', justifyContent: 'center', diff --git a/docs/src/pages/components/chips/SmallOutlinedChips.js b/docs/src/pages/components/chips/SmallOutlinedChips.js index 20adf44dd9e8ba..4a5e213e0975e3 100644 --- a/docs/src/pages/components/chips/SmallOutlinedChips.js +++ b/docs/src/pages/components/chips/SmallOutlinedChips.js @@ -5,7 +5,7 @@ import Chip from '@material-ui/core/Chip'; import FaceIcon from '@material-ui/icons/Face'; import DoneIcon from '@material-ui/icons/Done'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', justifyContent: 'center', diff --git a/docs/src/pages/components/click-away-listener/ClickAway.js b/docs/src/pages/components/click-away-listener/ClickAway.js index 708db48ea4e88a..e45a91d5d5b64f 100644 --- a/docs/src/pages/components/click-away-listener/ClickAway.js +++ b/docs/src/pages/components/click-away-listener/ClickAway.js @@ -2,7 +2,7 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import ClickAwayListener from '@material-ui/core/ClickAwayListener'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ wrapper: { position: 'relative', }, @@ -22,7 +22,7 @@ export default function ClickAway() { const [open, setOpen] = React.useState(false); const handleClick = () => { - setOpen(prev => !prev); + setOpen((prev) => !prev); }; const handleClickAway = () => { diff --git a/docs/src/pages/components/click-away-listener/ClickAway.tsx b/docs/src/pages/components/click-away-listener/ClickAway.tsx index 04670ed4d48fc3..161672b39dd60d 100644 --- a/docs/src/pages/components/click-away-listener/ClickAway.tsx +++ b/docs/src/pages/components/click-away-listener/ClickAway.tsx @@ -24,7 +24,7 @@ export default function ClickAway() { const [open, setOpen] = React.useState(false); const handleClick = () => { - setOpen(prev => !prev); + setOpen((prev) => !prev); }; const handleClickAway = () => { diff --git a/docs/src/pages/components/dialogs/ConfirmationDialog.js b/docs/src/pages/components/dialogs/ConfirmationDialog.js index d2f86797140fe0..5c4bbe175faaa4 100644 --- a/docs/src/pages/components/dialogs/ConfirmationDialog.js +++ b/docs/src/pages/components/dialogs/ConfirmationDialog.js @@ -55,7 +55,7 @@ function ConfirmationDialogRaw(props) { onClose(value); }; - const handleChange = event => { + const handleChange = (event) => { setValue(event.target.value); }; @@ -78,7 +78,7 @@ function ConfirmationDialogRaw(props) { value={value} onChange={handleChange} > - {options.map(option => ( + {options.map((option) => ( } label={option} /> ))} @@ -101,7 +101,7 @@ ConfirmationDialogRaw.propTypes = { value: PropTypes.string.isRequired, }; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', maxWidth: 360, @@ -122,7 +122,7 @@ export default function ConfirmationDialog() { setOpen(true); }; - const handleClose = newValue => { + const handleClose = (newValue) => { setOpen(false); if (newValue) { diff --git a/docs/src/pages/components/dialogs/ConfirmationDialog.tsx b/docs/src/pages/components/dialogs/ConfirmationDialog.tsx index 01aba01a5096a2..76374825cfa56f 100644 --- a/docs/src/pages/components/dialogs/ConfirmationDialog.tsx +++ b/docs/src/pages/components/dialogs/ConfirmationDialog.tsx @@ -86,7 +86,7 @@ function ConfirmationDialogRaw(props: ConfirmationDialogRawProps) { value={value} onChange={handleChange} > - {options.map(option => ( + {options.map((option) => ( } label={option} /> ))} diff --git a/docs/src/pages/components/dialogs/CustomizedDialogs.js b/docs/src/pages/components/dialogs/CustomizedDialogs.js index 8037bfeace6245..36d01859fdfa3d 100644 --- a/docs/src/pages/components/dialogs/CustomizedDialogs.js +++ b/docs/src/pages/components/dialogs/CustomizedDialogs.js @@ -9,7 +9,7 @@ import IconButton from '@material-ui/core/IconButton'; import CloseIcon from '@material-ui/icons/Close'; import Typography from '@material-ui/core/Typography'; -const styles = theme => ({ +const styles = (theme) => ({ root: { margin: 0, padding: theme.spacing(2), @@ -22,7 +22,7 @@ const styles = theme => ({ }, }); -const DialogTitle = withStyles(styles)(props => { +const DialogTitle = withStyles(styles)((props) => { const { children, classes, onClose, ...other } = props; return ( @@ -36,13 +36,13 @@ const DialogTitle = withStyles(styles)(props => { ); }); -const DialogContent = withStyles(theme => ({ +const DialogContent = withStyles((theme) => ({ root: { padding: theme.spacing(2), }, }))(MuiDialogContent); -const DialogActions = withStyles(theme => ({ +const DialogActions = withStyles((theme) => ({ root: { margin: 0, padding: theme.spacing(1), diff --git a/docs/src/pages/components/dialogs/FullScreenDialog.js b/docs/src/pages/components/dialogs/FullScreenDialog.js index 892d61e98ac5b0..ec51dc1000d312 100644 --- a/docs/src/pages/components/dialogs/FullScreenDialog.js +++ b/docs/src/pages/components/dialogs/FullScreenDialog.js @@ -13,7 +13,7 @@ import Typography from '@material-ui/core/Typography'; import CloseIcon from '@material-ui/icons/Close'; import Slide from '@material-ui/core/Slide'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ appBar: { position: 'relative', }, diff --git a/docs/src/pages/components/dialogs/MaxWidthDialog.js b/docs/src/pages/components/dialogs/MaxWidthDialog.js index 11f437339d04b7..c630595b59a95f 100644 --- a/docs/src/pages/components/dialogs/MaxWidthDialog.js +++ b/docs/src/pages/components/dialogs/MaxWidthDialog.js @@ -13,7 +13,7 @@ import MenuItem from '@material-ui/core/MenuItem'; import Select from '@material-ui/core/Select'; import Switch from '@material-ui/core/Switch'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ form: { display: 'flex', flexDirection: 'column', @@ -43,11 +43,11 @@ export default function MaxWidthDialog() { setOpen(false); }; - const handleMaxWidthChange = event => { + const handleMaxWidthChange = (event) => { setMaxWidth(event.target.value); }; - const handleFullWidthChange = event => { + const handleFullWidthChange = (event) => { setFullWidth(event.target.checked); }; diff --git a/docs/src/pages/components/dialogs/ScrollDialog.js b/docs/src/pages/components/dialogs/ScrollDialog.js index fc317f46454d77..c41fcfa02ee857 100644 --- a/docs/src/pages/components/dialogs/ScrollDialog.js +++ b/docs/src/pages/components/dialogs/ScrollDialog.js @@ -10,7 +10,7 @@ export default function ScrollDialog() { const [open, setOpen] = React.useState(false); const [scroll, setScroll] = React.useState('paper'); - const handleClickOpen = scrollType => () => { + const handleClickOpen = (scrollType) => () => { setOpen(true); setScroll(scrollType); }; diff --git a/docs/src/pages/components/dialogs/SimpleDialog.js b/docs/src/pages/components/dialogs/SimpleDialog.js index 9c7d185eaf3815..38b189941a6891 100644 --- a/docs/src/pages/components/dialogs/SimpleDialog.js +++ b/docs/src/pages/components/dialogs/SimpleDialog.js @@ -30,7 +30,7 @@ function SimpleDialog(props) { onClose(selectedValue); }; - const handleListItemClick = value => { + const handleListItemClick = (value) => { onClose(value); }; @@ -38,7 +38,7 @@ function SimpleDialog(props) { Set backup account - {emails.map(email => ( + {emails.map((email) => ( handleListItemClick(email)} key={email}> @@ -76,7 +76,7 @@ export default function SimpleDialogDemo() { setOpen(true); }; - const handleClose = value => { + const handleClose = (value) => { setOpen(false); setSelectedValue(value); }; diff --git a/docs/src/pages/components/dialogs/SimpleDialog.tsx b/docs/src/pages/components/dialogs/SimpleDialog.tsx index 4386c8e3459535..762a0373fdd7e5 100644 --- a/docs/src/pages/components/dialogs/SimpleDialog.tsx +++ b/docs/src/pages/components/dialogs/SimpleDialog.tsx @@ -43,7 +43,7 @@ function SimpleDialog(props: SimpleDialogProps) { Set backup account - {emails.map(email => ( + {emails.map((email) => ( handleListItemClick(email)} key={email}> diff --git a/docs/src/pages/components/dividers/InsetDividers.js b/docs/src/pages/components/dividers/InsetDividers.js index 0b338b622a3b27..7823d26e9612be 100644 --- a/docs/src/pages/components/dividers/InsetDividers.js +++ b/docs/src/pages/components/dividers/InsetDividers.js @@ -10,7 +10,7 @@ import WorkIcon from '@material-ui/icons/Work'; import BeachAccessIcon from '@material-ui/icons/BeachAccess'; import Divider from '@material-ui/core/Divider'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', maxWidth: 360, diff --git a/docs/src/pages/components/dividers/ListDividers.js b/docs/src/pages/components/dividers/ListDividers.js index 424b04a49d2fdc..6a29bdecde4c54 100644 --- a/docs/src/pages/components/dividers/ListDividers.js +++ b/docs/src/pages/components/dividers/ListDividers.js @@ -5,7 +5,7 @@ import ListItem from '@material-ui/core/ListItem'; import ListItemText from '@material-ui/core/ListItemText'; import Divider from '@material-ui/core/Divider'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', maxWidth: 360, diff --git a/docs/src/pages/components/dividers/MiddleDividers.js b/docs/src/pages/components/dividers/MiddleDividers.js index c18798e5a8031a..433727b27f6059 100644 --- a/docs/src/pages/components/dividers/MiddleDividers.js +++ b/docs/src/pages/components/dividers/MiddleDividers.js @@ -6,7 +6,7 @@ import Grid from '@material-ui/core/Grid'; import Divider from '@material-ui/core/Divider'; import Typography from '@material-ui/core/Typography'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', maxWidth: 360, diff --git a/docs/src/pages/components/dividers/SubheaderDividers.js b/docs/src/pages/components/dividers/SubheaderDividers.js index 39c33a2c008918..7cf228dadbf1f7 100644 --- a/docs/src/pages/components/dividers/SubheaderDividers.js +++ b/docs/src/pages/components/dividers/SubheaderDividers.js @@ -9,7 +9,7 @@ import BeachAccessIcon from '@material-ui/icons/BeachAccess'; import Divider from '@material-ui/core/Divider'; import Typography from '@material-ui/core/Typography'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', maxWidth: 360, diff --git a/docs/src/pages/components/dividers/VerticalDividers.js b/docs/src/pages/components/dividers/VerticalDividers.js index b35859e1fc26f5..926cea6997403d 100644 --- a/docs/src/pages/components/dividers/VerticalDividers.js +++ b/docs/src/pages/components/dividers/VerticalDividers.js @@ -9,7 +9,7 @@ import FormatUnderlinedIcon from '@material-ui/icons/FormatUnderlined'; import Grid from '@material-ui/core/Grid'; import Divider from '@material-ui/core/Divider'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: 'fit-content', border: `1px solid ${theme.palette.divider}`, diff --git a/docs/src/pages/components/drawers/ClippedDrawer.js b/docs/src/pages/components/drawers/ClippedDrawer.js index dddc72c6ce5da8..bafdaf0795171f 100644 --- a/docs/src/pages/components/drawers/ClippedDrawer.js +++ b/docs/src/pages/components/drawers/ClippedDrawer.js @@ -15,7 +15,7 @@ import MailIcon from '@material-ui/icons/Mail'; const drawerWidth = 240; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', }, diff --git a/docs/src/pages/components/drawers/MiniDrawer.js b/docs/src/pages/components/drawers/MiniDrawer.js index a5efd14879b779..723bc2065ebd45 100644 --- a/docs/src/pages/components/drawers/MiniDrawer.js +++ b/docs/src/pages/components/drawers/MiniDrawer.js @@ -20,7 +20,7 @@ import MailIcon from '@material-ui/icons/Mail'; const drawerWidth = 240; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', }, diff --git a/docs/src/pages/components/drawers/PermanentDrawerLeft.js b/docs/src/pages/components/drawers/PermanentDrawerLeft.js index 07b0625f21bbea..b8a5303c259ffb 100644 --- a/docs/src/pages/components/drawers/PermanentDrawerLeft.js +++ b/docs/src/pages/components/drawers/PermanentDrawerLeft.js @@ -15,7 +15,7 @@ import MailIcon from '@material-ui/icons/Mail'; const drawerWidth = 240; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', }, diff --git a/docs/src/pages/components/drawers/PermanentDrawerRight.js b/docs/src/pages/components/drawers/PermanentDrawerRight.js index a60e2a4d547ca3..5045b9cd777d0e 100644 --- a/docs/src/pages/components/drawers/PermanentDrawerRight.js +++ b/docs/src/pages/components/drawers/PermanentDrawerRight.js @@ -15,7 +15,7 @@ import MailIcon from '@material-ui/icons/Mail'; const drawerWidth = 240; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', }, diff --git a/docs/src/pages/components/drawers/PersistentDrawerLeft.js b/docs/src/pages/components/drawers/PersistentDrawerLeft.js index 860bd7ea260e43..b8acf88133c5d6 100644 --- a/docs/src/pages/components/drawers/PersistentDrawerLeft.js +++ b/docs/src/pages/components/drawers/PersistentDrawerLeft.js @@ -20,7 +20,7 @@ import MailIcon from '@material-ui/icons/Mail'; const drawerWidth = 240; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', }, diff --git a/docs/src/pages/components/drawers/PersistentDrawerRight.js b/docs/src/pages/components/drawers/PersistentDrawerRight.js index 2f03f70b8a61fe..bada510ed2c497 100644 --- a/docs/src/pages/components/drawers/PersistentDrawerRight.js +++ b/docs/src/pages/components/drawers/PersistentDrawerRight.js @@ -20,7 +20,7 @@ import MailIcon from '@material-ui/icons/Mail'; const drawerWidth = 240; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', }, diff --git a/docs/src/pages/components/drawers/ResponsiveDrawer.js b/docs/src/pages/components/drawers/ResponsiveDrawer.js index bcc1162e6c6494..fb1a840aa05012 100644 --- a/docs/src/pages/components/drawers/ResponsiveDrawer.js +++ b/docs/src/pages/components/drawers/ResponsiveDrawer.js @@ -19,7 +19,7 @@ import { makeStyles, useTheme } from '@material-ui/core/styles'; const drawerWidth = 240; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', }, diff --git a/docs/src/pages/components/drawers/SwipeableTemporaryDrawer.js b/docs/src/pages/components/drawers/SwipeableTemporaryDrawer.js index 416a08548341db..4dfc8434405bfd 100644 --- a/docs/src/pages/components/drawers/SwipeableTemporaryDrawer.js +++ b/docs/src/pages/components/drawers/SwipeableTemporaryDrawer.js @@ -29,7 +29,7 @@ export default function SwipeableTemporaryDrawer() { right: false, }); - const toggleDrawer = (anchor, open) => event => { + const toggleDrawer = (anchor, open) => (event) => { if (event && event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) { return; } @@ -37,7 +37,7 @@ export default function SwipeableTemporaryDrawer() { setState({ ...state, [anchor]: open }); }; - const list = anchor => ( + const list = (anchor) => (
    - {['left', 'right', 'top', 'bottom'].map(anchor => ( + {['left', 'right', 'top', 'bottom'].map((anchor) => ( - {(['left', 'right', 'top', 'bottom'] as Anchor[]).map(anchor => ( + {(['left', 'right', 'top', 'bottom'] as Anchor[]).map((anchor) => ( event => { + const toggleDrawer = (anchor, open) => (event) => { if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) { return; } @@ -37,7 +37,7 @@ export default function TemporaryDrawer() { setState({ ...state, [anchor]: open }); }; - const list = anchor => ( + const list = (anchor) => (
    - {['left', 'right', 'top', 'bottom'].map(anchor => ( + {['left', 'right', 'top', 'bottom'].map((anchor) => ( diff --git a/docs/src/pages/components/drawers/TemporaryDrawer.tsx b/docs/src/pages/components/drawers/TemporaryDrawer.tsx index 0bf2584b11d595..c190b017266257 100644 --- a/docs/src/pages/components/drawers/TemporaryDrawer.tsx +++ b/docs/src/pages/components/drawers/TemporaryDrawer.tsx @@ -76,7 +76,7 @@ export default function TemporaryDrawer() { return (
    - {(['left', 'right', 'top', 'bottom'] as Anchor[]).map(anchor => ( + {(['left', 'right', 'top', 'bottom'] as Anchor[]).map((anchor) => ( diff --git a/docs/src/pages/components/expansion-panels/ActionsInExpansionPanelSummary.js b/docs/src/pages/components/expansion-panels/ActionsInExpansionPanelSummary.js index 821f8b8c126287..e18c12499a1991 100644 --- a/docs/src/pages/components/expansion-panels/ActionsInExpansionPanelSummary.js +++ b/docs/src/pages/components/expansion-panels/ActionsInExpansionPanelSummary.js @@ -28,8 +28,8 @@ export default function ActionsInExpansionPanelSummary() { > event.stopPropagation()} - onFocus={event => event.stopPropagation()} + onClick={(event) => event.stopPropagation()} + onFocus={(event) => event.stopPropagation()} control={} label="I acknowledge that I should stop the click event propagation" /> @@ -50,8 +50,8 @@ export default function ActionsInExpansionPanelSummary() { > event.stopPropagation()} - onFocus={event => event.stopPropagation()} + onClick={(event) => event.stopPropagation()} + onFocus={(event) => event.stopPropagation()} control={} label="I acknowledge that I should stop the focus event propagation" /> @@ -72,8 +72,8 @@ export default function ActionsInExpansionPanelSummary() { > event.stopPropagation()} - onFocus={event => event.stopPropagation()} + onClick={(event) => event.stopPropagation()} + onFocus={(event) => event.stopPropagation()} control={} label="I acknowledge that I should provide an aria-label on each action that I add" /> diff --git a/docs/src/pages/components/expansion-panels/ActionsInExpansionPanelSummary.tsx b/docs/src/pages/components/expansion-panels/ActionsInExpansionPanelSummary.tsx index 821f8b8c126287..e18c12499a1991 100644 --- a/docs/src/pages/components/expansion-panels/ActionsInExpansionPanelSummary.tsx +++ b/docs/src/pages/components/expansion-panels/ActionsInExpansionPanelSummary.tsx @@ -28,8 +28,8 @@ export default function ActionsInExpansionPanelSummary() { > event.stopPropagation()} - onFocus={event => event.stopPropagation()} + onClick={(event) => event.stopPropagation()} + onFocus={(event) => event.stopPropagation()} control={} label="I acknowledge that I should stop the click event propagation" /> @@ -50,8 +50,8 @@ export default function ActionsInExpansionPanelSummary() { > event.stopPropagation()} - onFocus={event => event.stopPropagation()} + onClick={(event) => event.stopPropagation()} + onFocus={(event) => event.stopPropagation()} control={} label="I acknowledge that I should stop the focus event propagation" /> @@ -72,8 +72,8 @@ export default function ActionsInExpansionPanelSummary() { > event.stopPropagation()} - onFocus={event => event.stopPropagation()} + onClick={(event) => event.stopPropagation()} + onFocus={(event) => event.stopPropagation()} control={} label="I acknowledge that I should provide an aria-label on each action that I add" /> diff --git a/docs/src/pages/components/expansion-panels/ControlledExpansionPanels.js b/docs/src/pages/components/expansion-panels/ControlledExpansionPanels.js index 5347fb5ef1c7e5..0065302e06fa51 100644 --- a/docs/src/pages/components/expansion-panels/ControlledExpansionPanels.js +++ b/docs/src/pages/components/expansion-panels/ControlledExpansionPanels.js @@ -6,7 +6,7 @@ import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'; import Typography from '@material-ui/core/Typography'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', }, @@ -25,7 +25,7 @@ export default function ControlledExpansionPanels() { const classes = useStyles(); const [expanded, setExpanded] = React.useState(false); - const handleChange = panel => (event, isExpanded) => { + const handleChange = (panel) => (event, isExpanded) => { setExpanded(isExpanded ? panel : false); }; diff --git a/docs/src/pages/components/expansion-panels/CustomizedExpansionPanels.js b/docs/src/pages/components/expansion-panels/CustomizedExpansionPanels.js index 80e078d1c347a3..68b80d7372082d 100644 --- a/docs/src/pages/components/expansion-panels/CustomizedExpansionPanels.js +++ b/docs/src/pages/components/expansion-panels/CustomizedExpansionPanels.js @@ -40,7 +40,7 @@ const ExpansionPanelSummary = withStyles({ expanded: {}, })(MuiExpansionPanelSummary); -const ExpansionPanelDetails = withStyles(theme => ({ +const ExpansionPanelDetails = withStyles((theme) => ({ root: { padding: theme.spacing(2), }, @@ -49,7 +49,7 @@ const ExpansionPanelDetails = withStyles(theme => ({ export default function CustomizedExpansionPanels() { const [expanded, setExpanded] = React.useState('panel1'); - const handleChange = panel => (event, newExpanded) => { + const handleChange = (panel) => (event, newExpanded) => { setExpanded(newExpanded ? panel : false); }; diff --git a/docs/src/pages/components/expansion-panels/CustomizedExpansionPanels.tsx b/docs/src/pages/components/expansion-panels/CustomizedExpansionPanels.tsx index 1b2cef4ffa2ec5..4fa299ac06635e 100644 --- a/docs/src/pages/components/expansion-panels/CustomizedExpansionPanels.tsx +++ b/docs/src/pages/components/expansion-panels/CustomizedExpansionPanels.tsx @@ -40,7 +40,7 @@ const ExpansionPanelSummary = withStyles({ expanded: {}, })(MuiExpansionPanelSummary); -const ExpansionPanelDetails = withStyles(theme => ({ +const ExpansionPanelDetails = withStyles((theme) => ({ root: { padding: theme.spacing(2), }, diff --git a/docs/src/pages/components/expansion-panels/DetailedExpansionPanel.js b/docs/src/pages/components/expansion-panels/DetailedExpansionPanel.js index 21e1709fa6f1c6..25f9c33b9c1fba 100644 --- a/docs/src/pages/components/expansion-panels/DetailedExpansionPanel.js +++ b/docs/src/pages/components/expansion-panels/DetailedExpansionPanel.js @@ -11,7 +11,7 @@ import Chip from '@material-ui/core/Chip'; import Button from '@material-ui/core/Button'; import Divider from '@material-ui/core/Divider'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', }, diff --git a/docs/src/pages/components/expansion-panels/SimpleExpansionPanel.js b/docs/src/pages/components/expansion-panels/SimpleExpansionPanel.js index 479b453ecbd184..0fd1f5ae9faa97 100644 --- a/docs/src/pages/components/expansion-panels/SimpleExpansionPanel.js +++ b/docs/src/pages/components/expansion-panels/SimpleExpansionPanel.js @@ -6,7 +6,7 @@ import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'; import Typography from '@material-ui/core/Typography'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', }, diff --git a/docs/src/pages/components/floating-action-button/FloatingActionButtonSize.js b/docs/src/pages/components/floating-action-button/FloatingActionButtonSize.js index 3363c4eaeb1593..235fbe8a7c0882 100644 --- a/docs/src/pages/components/floating-action-button/FloatingActionButtonSize.js +++ b/docs/src/pages/components/floating-action-button/FloatingActionButtonSize.js @@ -4,7 +4,7 @@ import Fab from '@material-ui/core/Fab'; import AddIcon from '@material-ui/icons/Add'; import NavigationIcon from '@material-ui/icons/Navigation'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ margin: { margin: theme.spacing(1), }, diff --git a/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.js b/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.js index 97cbb2f6c6e458..b85e43150e7c09 100644 --- a/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.js +++ b/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.js @@ -45,7 +45,7 @@ function a11yProps(index) { }; } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { backgroundColor: theme.palette.background.paper, width: 500, @@ -75,7 +75,7 @@ export default function FloatingActionButtonZoom() { setValue(newValue); }; - const handleChangeIndex = index => { + const handleChangeIndex = (index) => { setValue(index); }; diff --git a/docs/src/pages/components/floating-action-button/FloatingActionButtons.js b/docs/src/pages/components/floating-action-button/FloatingActionButtons.js index b913f10bd3eb78..67cc81513012e9 100644 --- a/docs/src/pages/components/floating-action-button/FloatingActionButtons.js +++ b/docs/src/pages/components/floating-action-button/FloatingActionButtons.js @@ -6,7 +6,7 @@ import EditIcon from '@material-ui/icons/Edit'; import FavoriteIcon from '@material-ui/icons/Favorite'; import NavigationIcon from '@material-ui/icons/Navigation'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { '& > *': { margin: theme.spacing(1), diff --git a/docs/src/pages/components/grid-list/AdvancedGridList.js b/docs/src/pages/components/grid-list/AdvancedGridList.js index 93b45a770ceccb..cc3da68c9f10b4 100644 --- a/docs/src/pages/components/grid-list/AdvancedGridList.js +++ b/docs/src/pages/components/grid-list/AdvancedGridList.js @@ -7,7 +7,7 @@ import IconButton from '@material-ui/core/IconButton'; import StarBorderIcon from '@material-ui/icons/StarBorder'; import tileData from './tileData'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', flexWrap: 'wrap', @@ -55,7 +55,7 @@ export default function AdvancedGridList() { return (
    - {tileData.map(tile => ( + {tileData.map((tile) => ( {tile.title} - {tileData.map(tile => ( + {tileData.map((tile) => ( {tile.title} ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', flexWrap: 'wrap', @@ -42,7 +42,7 @@ export default function ImageGridList() { return (
    - {tileData.map(tile => ( + {tileData.map((tile) => ( {tile.title} diff --git a/docs/src/pages/components/grid-list/ImageGridList.tsx b/docs/src/pages/components/grid-list/ImageGridList.tsx index 341791820d6194..ca2c1b3f524c5e 100644 --- a/docs/src/pages/components/grid-list/ImageGridList.tsx +++ b/docs/src/pages/components/grid-list/ImageGridList.tsx @@ -44,7 +44,7 @@ export default function ImageGridList() { return (
    - {tileData.map(tile => ( + {tileData.map((tile) => ( {tile.title} diff --git a/docs/src/pages/components/grid-list/SingleLineGridList.js b/docs/src/pages/components/grid-list/SingleLineGridList.js index f8b48fe994511f..34eb5c00cdf077 100644 --- a/docs/src/pages/components/grid-list/SingleLineGridList.js +++ b/docs/src/pages/components/grid-list/SingleLineGridList.js @@ -7,7 +7,7 @@ import IconButton from '@material-ui/core/IconButton'; import StarBorderIcon from '@material-ui/icons/StarBorder'; import tileData from './tileData'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', flexWrap: 'wrap', @@ -52,7 +52,7 @@ export default function SingleLineGridList() { return (
    - {tileData.map(tile => ( + {tileData.map((tile) => ( {tile.title} - {tileData.map(tile => ( + {tileData.map((tile) => ( {tile.title} ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', flexWrap: 'wrap', @@ -51,7 +51,7 @@ export default function TitlebarGridList() { December - {tileData.map(tile => ( + {tileData.map((tile) => ( {tile.title} December - {tileData.map(tile => ( + {tileData.map((tile) => ( {tile.title} ({ +const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, }, diff --git a/docs/src/pages/components/grid/AutoGridNoWrap.js b/docs/src/pages/components/grid/AutoGridNoWrap.js index 4d1cb71d12786d..ab5ada388a3bde 100644 --- a/docs/src/pages/components/grid/AutoGridNoWrap.js +++ b/docs/src/pages/components/grid/AutoGridNoWrap.js @@ -5,7 +5,7 @@ import Grid from '@material-ui/core/Grid'; import Avatar from '@material-ui/core/Avatar'; import Typography from '@material-ui/core/Typography'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, overflow: 'hidden', diff --git a/docs/src/pages/components/grid/CSSGrid.js b/docs/src/pages/components/grid/CSSGrid.js index 1909a78e66854d..88a1faa522cdd6 100644 --- a/docs/src/pages/components/grid/CSSGrid.js +++ b/docs/src/pages/components/grid/CSSGrid.js @@ -5,7 +5,7 @@ import Paper from '@material-ui/core/Paper'; import Divider from '@material-ui/core/Divider'; import Grid from '@material-ui/core/Grid'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ container: { display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', diff --git a/docs/src/pages/components/grid/CenteredGrid.js b/docs/src/pages/components/grid/CenteredGrid.js index 2a7c6b0b8d1d10..283858381b036d 100644 --- a/docs/src/pages/components/grid/CenteredGrid.js +++ b/docs/src/pages/components/grid/CenteredGrid.js @@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'; import Paper from '@material-ui/core/Paper'; import Grid from '@material-ui/core/Grid'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, }, diff --git a/docs/src/pages/components/grid/ComplexGrid.js b/docs/src/pages/components/grid/ComplexGrid.js index 7bea0575e008dc..50eaf95bd79408 100644 --- a/docs/src/pages/components/grid/ComplexGrid.js +++ b/docs/src/pages/components/grid/ComplexGrid.js @@ -5,7 +5,7 @@ import Paper from '@material-ui/core/Paper'; import Typography from '@material-ui/core/Typography'; import ButtonBase from '@material-ui/core/ButtonBase'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, }, diff --git a/docs/src/pages/components/grid/FullWidthGrid.js b/docs/src/pages/components/grid/FullWidthGrid.js index c7dfdb069758b0..c8a30226e65a33 100644 --- a/docs/src/pages/components/grid/FullWidthGrid.js +++ b/docs/src/pages/components/grid/FullWidthGrid.js @@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'; import Paper from '@material-ui/core/Paper'; import Grid from '@material-ui/core/Grid'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, }, diff --git a/docs/src/pages/components/grid/InteractiveGrid.js b/docs/src/pages/components/grid/InteractiveGrid.js index 27394fa9ab2290..3514ca31072270 100644 --- a/docs/src/pages/components/grid/InteractiveGrid.js +++ b/docs/src/pages/components/grid/InteractiveGrid.js @@ -9,7 +9,7 @@ import Paper from '@material-ui/core/Paper'; import { makeStyles } from '@material-ui/core/styles'; import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, }, @@ -54,7 +54,7 @@ export default function InteractiveGrid() { direction={direction} justify={justify} > - {[0, 1, 2].map(value => ( + {[0, 1, 2].map((value) => ( { + onChange={(event) => { setDirection(event.target.value); }} > @@ -100,7 +100,7 @@ export default function InteractiveGrid() { name="justify" aria-label="justify" value={justify} - onChange={event => { + onChange={(event) => { setJustify(event.target.value); }} > @@ -125,7 +125,7 @@ export default function InteractiveGrid() { name="alignItems" aria-label="align items" value={alignItems} - onChange={event => { + onChange={(event) => { setAlignItems(event.target.value); }} > diff --git a/docs/src/pages/components/grid/InteractiveGrid.tsx b/docs/src/pages/components/grid/InteractiveGrid.tsx index 0b87c9b074b1fd..7837827d8492b0 100644 --- a/docs/src/pages/components/grid/InteractiveGrid.tsx +++ b/docs/src/pages/components/grid/InteractiveGrid.tsx @@ -56,7 +56,7 @@ export default function InteractiveGrid() { direction={direction} justify={justify} > - {[0, 1, 2].map(value => ( + {[0, 1, 2].map((value) => ( { + onChange={(event) => { setDirection((event.target as HTMLInputElement).value as GridDirection); }} > @@ -102,7 +102,7 @@ export default function InteractiveGrid() { name="justify" aria-label="justify" value={justify} - onChange={event => { + onChange={(event) => { setJustify((event.target as HTMLInputElement).value as GridJustification); }} > @@ -127,7 +127,7 @@ export default function InteractiveGrid() { name="alignItems" aria-label="align items" value={alignItems} - onChange={event => { + onChange={(event) => { setAlignItems((event.target as HTMLInputElement).value as GridItemsAlignment); }} > diff --git a/docs/src/pages/components/grid/NestedGrid.js b/docs/src/pages/components/grid/NestedGrid.js index 06c6eae903293c..b495f12bc9a2b4 100644 --- a/docs/src/pages/components/grid/NestedGrid.js +++ b/docs/src/pages/components/grid/NestedGrid.js @@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'; import Paper from '@material-ui/core/Paper'; import Grid from '@material-ui/core/Grid'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, }, diff --git a/docs/src/pages/components/grid/SpacingGrid.js b/docs/src/pages/components/grid/SpacingGrid.js index 8b0bdc52f846fc..1198a4d237f187 100644 --- a/docs/src/pages/components/grid/SpacingGrid.js +++ b/docs/src/pages/components/grid/SpacingGrid.js @@ -7,7 +7,7 @@ import RadioGroup from '@material-ui/core/RadioGroup'; import Radio from '@material-ui/core/Radio'; import Paper from '@material-ui/core/Paper'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, }, @@ -24,7 +24,7 @@ export default function SpacingGrid() { const [spacing, setSpacing] = React.useState(2); const classes = useStyles(); - const handleChange = event => { + const handleChange = (event) => { setSpacing(Number(event.target.value)); }; @@ -32,7 +32,7 @@ export default function SpacingGrid() { - {[0, 1, 2].map(value => ( + {[0, 1, 2].map((value) => ( @@ -51,7 +51,7 @@ export default function SpacingGrid() { onChange={handleChange} row > - {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(value => ( + {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((value) => ( - {[0, 1, 2].map(value => ( + {[0, 1, 2].map((value) => ( @@ -53,7 +53,7 @@ export default function SpacingGrid() { onChange={handleChange} row > - {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(value => ( + {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((value) => (
    • {`I'm sticky ${sectionId}`} - {[0, 1, 2].map(item => ( + {[0, 1, 2].map((item) => ( diff --git a/docs/src/pages/components/lists/PinnedSubheaderList.tsx b/docs/src/pages/components/lists/PinnedSubheaderList.tsx index 34d01128d58b76..9328e018eb6d29 100644 --- a/docs/src/pages/components/lists/PinnedSubheaderList.tsx +++ b/docs/src/pages/components/lists/PinnedSubheaderList.tsx @@ -30,11 +30,11 @@ export default function PinnedSubheaderList() { return ( }> - {[0, 1, 2, 3, 4].map(sectionId => ( + {[0, 1, 2, 3, 4].map((sectionId) => (
      • {`I'm sticky ${sectionId}`} - {[0, 1, 2].map(item => ( + {[0, 1, 2].map((item) => ( diff --git a/docs/src/pages/components/lists/SelectedListItem.js b/docs/src/pages/components/lists/SelectedListItem.js index 4e1cabea727f66..3ec2975a596903 100644 --- a/docs/src/pages/components/lists/SelectedListItem.js +++ b/docs/src/pages/components/lists/SelectedListItem.js @@ -8,7 +8,7 @@ import Divider from '@material-ui/core/Divider'; import InboxIcon from '@material-ui/icons/Inbox'; import DraftsIcon from '@material-ui/icons/Drafts'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', maxWidth: 360, @@ -30,7 +30,7 @@ export default function SelectedListItem() { handleListItemClick(event, 0)} + onClick={(event) => handleListItemClick(event, 0)} > @@ -40,7 +40,7 @@ export default function SelectedListItem() { handleListItemClick(event, 1)} + onClick={(event) => handleListItemClick(event, 1)} > @@ -53,14 +53,14 @@ export default function SelectedListItem() { handleListItemClick(event, 2)} + onClick={(event) => handleListItemClick(event, 2)} > handleListItemClick(event, 3)} + onClick={(event) => handleListItemClick(event, 3)} > diff --git a/docs/src/pages/components/lists/SelectedListItem.tsx b/docs/src/pages/components/lists/SelectedListItem.tsx index 2c4efeb7c3d95a..31cbb914c95d5a 100644 --- a/docs/src/pages/components/lists/SelectedListItem.tsx +++ b/docs/src/pages/components/lists/SelectedListItem.tsx @@ -35,7 +35,7 @@ export default function SelectedListItem() { handleListItemClick(event, 0)} + onClick={(event) => handleListItemClick(event, 0)} > @@ -45,7 +45,7 @@ export default function SelectedListItem() { handleListItemClick(event, 1)} + onClick={(event) => handleListItemClick(event, 1)} > @@ -58,14 +58,14 @@ export default function SelectedListItem() { handleListItemClick(event, 2)} + onClick={(event) => handleListItemClick(event, 2)} > handleListItemClick(event, 3)} + onClick={(event) => handleListItemClick(event, 3)} > diff --git a/docs/src/pages/components/lists/SimpleList.js b/docs/src/pages/components/lists/SimpleList.js index 88b13d82397188..da537bd9183830 100644 --- a/docs/src/pages/components/lists/SimpleList.js +++ b/docs/src/pages/components/lists/SimpleList.js @@ -8,7 +8,7 @@ import Divider from '@material-ui/core/Divider'; import InboxIcon from '@material-ui/icons/Inbox'; import DraftsIcon from '@material-ui/icons/Drafts'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', maxWidth: 360, diff --git a/docs/src/pages/components/lists/SwitchListSecondary.js b/docs/src/pages/components/lists/SwitchListSecondary.js index 556568c63868fc..d6a2238982c930 100644 --- a/docs/src/pages/components/lists/SwitchListSecondary.js +++ b/docs/src/pages/components/lists/SwitchListSecondary.js @@ -10,7 +10,7 @@ import Switch from '@material-ui/core/Switch'; import WifiIcon from '@material-ui/icons/Wifi'; import BluetoothIcon from '@material-ui/icons/Bluetooth'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', maxWidth: 360, @@ -22,7 +22,7 @@ export default function SwitchListSecondary() { const classes = useStyles(); const [checked, setChecked] = React.useState(['wifi']); - const handleToggle = value => () => { + const handleToggle = (value) => () => { const currentIndex = checked.indexOf(value); const newChecked = [...checked]; diff --git a/docs/src/pages/components/lists/VirtualizedList.js b/docs/src/pages/components/lists/VirtualizedList.js index d2d75c45566751..1658decbcc9424 100644 --- a/docs/src/pages/components/lists/VirtualizedList.js +++ b/docs/src/pages/components/lists/VirtualizedList.js @@ -5,7 +5,7 @@ import ListItem from '@material-ui/core/ListItem'; import ListItemText from '@material-ui/core/ListItemText'; import { FixedSizeList } from 'react-window'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', height: 400, diff --git a/docs/src/pages/components/material-icons/SearchIcons.js b/docs/src/pages/components/material-icons/SearchIcons.js index 1593494029e43a..5237da9c29adfa 100644 --- a/docs/src/pages/components/material-icons/SearchIcons.js +++ b/docs/src/pages/components/material-icons/SearchIcons.js @@ -82,16 +82,16 @@ function selectNode(node) { selection.addRange(range); } -let Icons = props => { +let Icons = (props) => { const { icons, classes, handleClickOpen } = props; - const handleClick = event => { + const handleClick = (event) => { selectNode(event.currentTarget); }; return (
        - {icons.map(icon => { + {icons.map((icon) => { return ( ({ +const useDialogStyles = makeStyles((theme) => ({ markdown: { '& pre': { borderRadius: 0, @@ -172,11 +172,11 @@ const useDialogStyles = makeStyles(theme => ({ }, })); -let DialogDetails = props => { +let DialogDetails = (props) => { const classes = useDialogStyles(); const { open, selectedIcon, handleClose } = props; - const handleClick = event => { + const handleClick = (event) => { selectNode(event.currentTarget); }; @@ -276,7 +276,7 @@ DialogDetails.propTypes = { }; DialogDetails = React.memo(DialogDetails); -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ form: { margin: theme.spacing(2, 0), }, @@ -341,7 +341,7 @@ const searchIndex = FlexSearch.create({ const allIconsMap = {}; const allIcons = Object.keys(mui) .sort() - .map(key => { + .map((key) => { let tag; if (key.indexOf('Outlined') !== -1) { tag = 'Outlined'; @@ -377,7 +377,7 @@ export default function SearchIcons() { const [open, setOpen] = React.useState(false); const [selectedIcon, setSelectedIcon] = React.useState(null); - const handleClickOpen = React.useCallback(event => { + const handleClickOpen = React.useCallback((event) => { setSelectedIcon(allIconsMap[event.currentTarget.getAttribute('title')]); setOpen(true); }, []); @@ -396,7 +396,7 @@ export default function SearchIcons() { const handleChange = React.useMemo( () => - debounce(value => { + debounce((value) => { if (!isMounted.current) { return; } @@ -404,7 +404,7 @@ export default function SearchIcons() { if (value === '') { setKeys(null); } else { - searchIndex.search(value).then(results => { + searchIndex.search(value).then((results) => { setKeys(results); // Keep track of the no results so we can add synonyms in the future. @@ -424,8 +424,8 @@ export default function SearchIcons() { const icons = React.useMemo( () => - (keys === null ? allIcons : keys.map(key => allIconsMap[key])).filter( - icon => tag === icon.tag, + (keys === null ? allIcons : keys.map((key) => allIconsMap[key])).filter( + (icon) => tag === icon.tag, ), [tag, keys], ); @@ -435,7 +435,7 @@ export default function SearchIcons() {
        - {['Filled', 'Outlined', 'Rounded', 'Two tone', 'Sharp'].map(key => { + {['Filled', 'Outlined', 'Rounded', 'Two tone', 'Sharp'].map((key) => { return ( { + onChange={(event) => { handleChange(event.target.value); }} className={classes.input} diff --git a/docs/src/pages/components/menus/ContextMenu.js b/docs/src/pages/components/menus/ContextMenu.js index 921000dc59bb65..b5296d581974ab 100644 --- a/docs/src/pages/components/menus/ContextMenu.js +++ b/docs/src/pages/components/menus/ContextMenu.js @@ -11,7 +11,7 @@ const initialState = { export default function ContextMenu() { const [state, setState] = React.useState(initialState); - const handleClick = event => { + const handleClick = (event) => { event.preventDefault(); setState({ mouseX: event.clientX - 2, diff --git a/docs/src/pages/components/menus/CustomizedMenus.js b/docs/src/pages/components/menus/CustomizedMenus.js index 520c1c4c361025..de08a7c2d26729 100644 --- a/docs/src/pages/components/menus/CustomizedMenus.js +++ b/docs/src/pages/components/menus/CustomizedMenus.js @@ -13,7 +13,7 @@ const StyledMenu = withStyles({ paper: { border: '1px solid #d3d4d5', }, -})(props => ( +})((props) => ( )); -const StyledMenuItem = withStyles(theme => ({ +const StyledMenuItem = withStyles((theme) => ({ root: { '&:focus': { backgroundColor: theme.palette.primary.main, @@ -43,7 +43,7 @@ const StyledMenuItem = withStyles(theme => ({ export default function CustomizedMenus() { const [anchorEl, setAnchorEl] = React.useState(null); - const handleClick = event => { + const handleClick = (event) => { setAnchorEl(event.currentTarget); }; diff --git a/docs/src/pages/components/menus/CustomizedMenus.tsx b/docs/src/pages/components/menus/CustomizedMenus.tsx index a1167dacc09486..2be252464b99de 100644 --- a/docs/src/pages/components/menus/CustomizedMenus.tsx +++ b/docs/src/pages/components/menus/CustomizedMenus.tsx @@ -29,7 +29,7 @@ const StyledMenu = withStyles({ /> )); -const StyledMenuItem = withStyles(theme => ({ +const StyledMenuItem = withStyles((theme) => ({ root: { '&:focus': { backgroundColor: theme.palette.primary.main, diff --git a/docs/src/pages/components/menus/FadeMenu.js b/docs/src/pages/components/menus/FadeMenu.js index f56aca8765e4e6..705505f52b72f5 100644 --- a/docs/src/pages/components/menus/FadeMenu.js +++ b/docs/src/pages/components/menus/FadeMenu.js @@ -8,7 +8,7 @@ export default function FadeMenu() { const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); - const handleClick = event => { + const handleClick = (event) => { setAnchorEl(event.currentTarget); }; diff --git a/docs/src/pages/components/menus/LongMenu.js b/docs/src/pages/components/menus/LongMenu.js index 2d364f5f3d7ddf..d90ca4faee001c 100644 --- a/docs/src/pages/components/menus/LongMenu.js +++ b/docs/src/pages/components/menus/LongMenu.js @@ -27,7 +27,7 @@ export default function LongMenu() { const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); - const handleClick = event => { + const handleClick = (event) => { setAnchorEl(event.currentTarget); }; @@ -58,7 +58,7 @@ export default function LongMenu() { }, }} > - {options.map(option => ( + {options.map((option) => ( {option} diff --git a/docs/src/pages/components/menus/LongMenu.tsx b/docs/src/pages/components/menus/LongMenu.tsx index 807bf94c9a9bc0..f81279c4195dc5 100644 --- a/docs/src/pages/components/menus/LongMenu.tsx +++ b/docs/src/pages/components/menus/LongMenu.tsx @@ -58,7 +58,7 @@ export default function LongMenu() { }, }} > - {options.map(option => ( + {options.map((option) => ( {option} diff --git a/docs/src/pages/components/menus/MenuListComposition.js b/docs/src/pages/components/menus/MenuListComposition.js index 8e89beaaba39c9..4effad0c7f67d9 100644 --- a/docs/src/pages/components/menus/MenuListComposition.js +++ b/docs/src/pages/components/menus/MenuListComposition.js @@ -8,7 +8,7 @@ import MenuItem from '@material-ui/core/MenuItem'; import MenuList from '@material-ui/core/MenuList'; import { makeStyles } from '@material-ui/core/styles'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', }, @@ -23,10 +23,10 @@ export default function MenuListComposition() { const anchorRef = React.useRef(null); const handleToggle = () => { - setOpen(prevOpen => !prevOpen); + setOpen((prevOpen) => !prevOpen); }; - const handleClose = event => { + const handleClose = (event) => { if (anchorRef.current && anchorRef.current.contains(event.target)) { return; } diff --git a/docs/src/pages/components/menus/MenuListComposition.tsx b/docs/src/pages/components/menus/MenuListComposition.tsx index de035ffcd18480..e51a4efcdcbef2 100644 --- a/docs/src/pages/components/menus/MenuListComposition.tsx +++ b/docs/src/pages/components/menus/MenuListComposition.tsx @@ -25,7 +25,7 @@ export default function MenuListComposition() { const anchorRef = React.useRef(null); const handleToggle = () => { - setOpen(prevOpen => !prevOpen); + setOpen((prevOpen) => !prevOpen); }; const handleClose = (event: React.MouseEvent) => { diff --git a/docs/src/pages/components/menus/MenuPopupState.js b/docs/src/pages/components/menus/MenuPopupState.js index 6b131e78505b3b..615d8667e141d7 100644 --- a/docs/src/pages/components/menus/MenuPopupState.js +++ b/docs/src/pages/components/menus/MenuPopupState.js @@ -7,7 +7,7 @@ import PopupState, { bindTrigger, bindMenu } from 'material-ui-popup-state'; export default function MenuPopupState() { return ( - {popupState => ( + {(popupState) => (
        diff --git a/docs/src/pages/components/slider/CustomizedSlider.tsx b/docs/src/pages/components/slider/CustomizedSlider.tsx index e4ae7d83f87d74..265dad0461df85 100644 --- a/docs/src/pages/components/slider/CustomizedSlider.tsx +++ b/docs/src/pages/components/slider/CustomizedSlider.tsx @@ -200,7 +200,7 @@ export default function CustomizedSlider() { Airbnb (index === 0 ? 'Minimum price' : 'Maximum price')} + getAriaLabel={(index) => (index === 0 ? 'Minimum price' : 'Maximum price')} defaultValue={[20, 40]} />
    • diff --git a/docs/src/pages/components/slider/DiscreteSliderLabel.js b/docs/src/pages/components/slider/DiscreteSliderLabel.js index a86412f46ef38b..6d86097a35afca 100644 --- a/docs/src/pages/components/slider/DiscreteSliderLabel.js +++ b/docs/src/pages/components/slider/DiscreteSliderLabel.js @@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/core/Slider'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: 300, }, diff --git a/docs/src/pages/components/slider/DiscreteSliderMarks.js b/docs/src/pages/components/slider/DiscreteSliderMarks.js index 5119b72c20ebea..35865074d4adc0 100644 --- a/docs/src/pages/components/slider/DiscreteSliderMarks.js +++ b/docs/src/pages/components/slider/DiscreteSliderMarks.js @@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/core/Slider'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: 300, }, diff --git a/docs/src/pages/components/slider/DiscreteSliderValues.js b/docs/src/pages/components/slider/DiscreteSliderValues.js index 493e0f6b14b337..440c428c48e681 100644 --- a/docs/src/pages/components/slider/DiscreteSliderValues.js +++ b/docs/src/pages/components/slider/DiscreteSliderValues.js @@ -33,7 +33,7 @@ function valuetext(value) { } function valueLabelFormat(value) { - return marks.findIndex(mark => mark.value === value) + 1; + return marks.findIndex((mark) => mark.value === value) + 1; } export default function DiscreteSlider() { diff --git a/docs/src/pages/components/slider/DiscreteSliderValues.tsx b/docs/src/pages/components/slider/DiscreteSliderValues.tsx index c4efab8b7ea96d..a1d2feda98ae89 100644 --- a/docs/src/pages/components/slider/DiscreteSliderValues.tsx +++ b/docs/src/pages/components/slider/DiscreteSliderValues.tsx @@ -33,7 +33,7 @@ function valuetext(value: number) { } function valueLabelFormat(value: number) { - return marks.findIndex(mark => mark.value === value) + 1; + return marks.findIndex((mark) => mark.value === value) + 1; } export default function DiscreteSlider() { diff --git a/docs/src/pages/components/slider/InputSlider.js b/docs/src/pages/components/slider/InputSlider.js index 8dcbb78d2c26cd..39d6db49718edc 100644 --- a/docs/src/pages/components/slider/InputSlider.js +++ b/docs/src/pages/components/slider/InputSlider.js @@ -23,7 +23,7 @@ export default function InputSlider() { setValue(newValue); }; - const handleInputChange = event => { + const handleInputChange = (event) => { setValue(event.target.value === '' ? '' : Number(event.target.value)); }; diff --git a/docs/src/pages/components/slider/NonLinearSlider.js b/docs/src/pages/components/slider/NonLinearSlider.js index b930caaa1bee19..e85769e473093f 100644 --- a/docs/src/pages/components/slider/NonLinearSlider.js +++ b/docs/src/pages/components/slider/NonLinearSlider.js @@ -6,7 +6,7 @@ function valueLabelFormat(value) { const [coefficient, exponent] = value .toExponential() .split('e') - .map(item => Number(item)); + .map((item) => Number(item)); return `${Math.round(coefficient)}e^${exponent}`; } @@ -27,7 +27,7 @@ export default function NonLinearSlider() { min={0} step={0.1} max={6} - scale={x => x ** 10} + scale={(x) => x ** 10} getAriaValueText={valueLabelFormat} valueLabelFormat={valueLabelFormat} onChange={handleChange} diff --git a/docs/src/pages/components/slider/NonLinearSlider.tsx b/docs/src/pages/components/slider/NonLinearSlider.tsx index 4b5757c3884e65..1853f1ab510a75 100644 --- a/docs/src/pages/components/slider/NonLinearSlider.tsx +++ b/docs/src/pages/components/slider/NonLinearSlider.tsx @@ -6,7 +6,7 @@ function valueLabelFormat(value: number) { const [coefficient, exponent] = value .toExponential() .split('e') - .map(item => Number(item)); + .map((item) => Number(item)); return `${Math.round(coefficient)}e^${exponent}`; } @@ -27,7 +27,7 @@ export default function NonLinearSlider() { min={0} step={0.1} max={6} - scale={x => x ** 10} + scale={(x) => x ** 10} getAriaValueText={valueLabelFormat} valueLabelFormat={valueLabelFormat} onChange={handleChange} diff --git a/docs/src/pages/components/slider/TrackFalseSlider.js b/docs/src/pages/components/slider/TrackFalseSlider.js index a15016ecd87285..164f2692f00fdd 100644 --- a/docs/src/pages/components/slider/TrackFalseSlider.js +++ b/docs/src/pages/components/slider/TrackFalseSlider.js @@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/core/Slider'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: 250, }, diff --git a/docs/src/pages/components/slider/TrackInvertedSlider.js b/docs/src/pages/components/slider/TrackInvertedSlider.js index d596aa29aed008..8e527208350934 100644 --- a/docs/src/pages/components/slider/TrackInvertedSlider.js +++ b/docs/src/pages/components/slider/TrackInvertedSlider.js @@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/core/Slider'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: 250, }, diff --git a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js index 02493c6e2954d8..b04b139848bd79 100644 --- a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js +++ b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js @@ -5,7 +5,7 @@ import Snackbar from '@material-ui/core/Snackbar'; import IconButton from '@material-ui/core/IconButton'; import CloseIcon from '@material-ui/icons/Close'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ close: { padding: theme.spacing(0.5), }, @@ -23,7 +23,7 @@ export default function ConsecutiveSnackbars() { } }; - const handleClick = message => () => { + const handleClick = (message) => () => { queueRef.current.push({ message, key: new Date().getTime(), diff --git a/docs/src/pages/components/snackbars/CustomizedSnackbars.js b/docs/src/pages/components/snackbars/CustomizedSnackbars.js index 0f0b0047aa7300..3dc1ca37162d0f 100644 --- a/docs/src/pages/components/snackbars/CustomizedSnackbars.js +++ b/docs/src/pages/components/snackbars/CustomizedSnackbars.js @@ -8,7 +8,7 @@ function Alert(props) { return ; } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', '& > * + *': { diff --git a/docs/src/pages/components/snackbars/DirectionSnackbar.js b/docs/src/pages/components/snackbars/DirectionSnackbar.js index 8ab7521044e474..ad4583d3b3fad8 100644 --- a/docs/src/pages/components/snackbars/DirectionSnackbar.js +++ b/docs/src/pages/components/snackbars/DirectionSnackbar.js @@ -23,7 +23,7 @@ export default function DirectionSnackbar() { const [open, setOpen] = React.useState(false); const [transition, setTransition] = React.useState(undefined); - const handleClick = Transition => () => { + const handleClick = (Transition) => () => { setTransition(() => Transition); setOpen(true); }; diff --git a/docs/src/pages/components/snackbars/FabIntegrationSnackbar.js b/docs/src/pages/components/snackbars/FabIntegrationSnackbar.js index 0086764fc4391b..d7a24c837dd88a 100644 --- a/docs/src/pages/components/snackbars/FabIntegrationSnackbar.js +++ b/docs/src/pages/components/snackbars/FabIntegrationSnackbar.js @@ -11,7 +11,7 @@ import Fab from '@material-ui/core/Fab'; import AddIcon from '@material-ui/icons/Add'; import Snackbar from '@material-ui/core/Snackbar'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ '@global': { body: { backgroundColor: theme.palette.background.paper, diff --git a/docs/src/pages/components/snackbars/IntegrationNotistack.js b/docs/src/pages/components/snackbars/IntegrationNotistack.js index 8723385bdf3898..4b61cac3ceb88f 100644 --- a/docs/src/pages/components/snackbars/IntegrationNotistack.js +++ b/docs/src/pages/components/snackbars/IntegrationNotistack.js @@ -9,7 +9,7 @@ function MyApp() { enqueueSnackbar('I love snacks.'); }; - const handleClickVariant = variant => () => { + const handleClickVariant = (variant) => () => { // variant could be success, error, warning, info, or default enqueueSnackbar('This is a success message!', { variant }); }; diff --git a/docs/src/pages/components/snackbars/LongTextSnackbar.js b/docs/src/pages/components/snackbars/LongTextSnackbar.js index 685e5ee298900e..1cb1212263e20c 100644 --- a/docs/src/pages/components/snackbars/LongTextSnackbar.js +++ b/docs/src/pages/components/snackbars/LongTextSnackbar.js @@ -9,7 +9,7 @@ const action = ( ); -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { maxWidth: 600, '& > * + *': { diff --git a/docs/src/pages/components/snackbars/PositionedSnackbar.js b/docs/src/pages/components/snackbars/PositionedSnackbar.js index 8e41c53f9fcce7..b15642f8f6b35a 100644 --- a/docs/src/pages/components/snackbars/PositionedSnackbar.js +++ b/docs/src/pages/components/snackbars/PositionedSnackbar.js @@ -11,7 +11,7 @@ export default function PositionedSnackbar() { const { vertical, horizontal, open } = state; - const handleClick = newState => () => { + const handleClick = (newState) => () => { setState({ open: true, ...newState }); }; diff --git a/docs/src/pages/components/snackbars/TransitionsSnackbar.js b/docs/src/pages/components/snackbars/TransitionsSnackbar.js index cb366a58166538..d8c8aa1c971495 100644 --- a/docs/src/pages/components/snackbars/TransitionsSnackbar.js +++ b/docs/src/pages/components/snackbars/TransitionsSnackbar.js @@ -19,7 +19,7 @@ export default function TransitionsSnackbar() { Transition: Fade, }); - const handleClick = Transition => () => { + const handleClick = (Transition) => () => { setState({ open: true, Transition, diff --git a/docs/src/pages/components/speed-dial/OpenIconSpeedDial.js b/docs/src/pages/components/speed-dial/OpenIconSpeedDial.js index 1b8c662984463b..43627c35869606 100644 --- a/docs/src/pages/components/speed-dial/OpenIconSpeedDial.js +++ b/docs/src/pages/components/speed-dial/OpenIconSpeedDial.js @@ -11,7 +11,7 @@ import ShareIcon from '@material-ui/icons/Share'; import FavoriteIcon from '@material-ui/icons/Favorite'; import EditIcon from '@material-ui/icons/Edit'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { height: 380, transform: 'translateZ(0px)', @@ -38,7 +38,7 @@ export default function OpenIconSpeedDial() { const [hidden, setHidden] = React.useState(false); const handleVisibility = () => { - setHidden(prevHidden => !prevHidden); + setHidden((prevHidden) => !prevHidden); }; const handleOpen = () => { @@ -61,7 +61,7 @@ export default function OpenIconSpeedDial() { onOpen={handleOpen} open={open} > - {actions.map(action => ( + {actions.map((action) => ( { - setHidden(prevHidden => !prevHidden); + setHidden((prevHidden) => !prevHidden); }; const handleOpen = () => { @@ -63,7 +63,7 @@ export default function OpenIconSpeedDial() { onOpen={handleOpen} open={open} > - {actions.map(action => ( + {actions.map((action) => ( ({ +const useStyles = makeStyles((theme) => ({ root: { height: 380, transform: 'translateZ(0px)', @@ -38,7 +38,7 @@ export default function SpeedDialTooltipOpen() { const [hidden, setHidden] = React.useState(false); const handleVisibility = () => { - setHidden(prevHidden => !prevHidden); + setHidden((prevHidden) => !prevHidden); }; const handleOpen = () => { @@ -62,7 +62,7 @@ export default function SpeedDialTooltipOpen() { onOpen={handleOpen} open={open} > - {actions.map(action => ( + {actions.map((action) => ( { - setHidden(prevHidden => !prevHidden); + setHidden((prevHidden) => !prevHidden); }; const handleOpen = () => { @@ -64,7 +64,7 @@ export default function SpeedDialTooltipOpen() { onOpen={handleOpen} open={open} > - {actions.map(action => ( + {actions.map((action) => ( ({ +const useStyles = makeStyles((theme) => ({ root: { transform: 'translateZ(0px)', flexGrow: 1, @@ -54,11 +54,11 @@ export default function SpeedDials() { const [open, setOpen] = React.useState(false); const [hidden, setHidden] = React.useState(false); - const handleDirectionChange = event => { + const handleDirectionChange = (event) => { setDirection(event.target.value); }; - const handleHiddenChange = event => { + const handleHiddenChange = (event) => { setHidden(event.target.checked); }; @@ -102,7 +102,7 @@ export default function SpeedDials() { open={open} direction={direction} > - {actions.map(action => ( + {actions.map((action) => ( - {actions.map(action => ( + {actions.map((action) => ( ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', }, @@ -190,11 +190,11 @@ export default function CustomizedSteppers() { const steps = getSteps(); const handleNext = () => { - setActiveStep(prevActiveStep => prevActiveStep + 1); + setActiveStep((prevActiveStep) => prevActiveStep + 1); }; const handleBack = () => { - setActiveStep(prevActiveStep => prevActiveStep - 1); + setActiveStep((prevActiveStep) => prevActiveStep - 1); }; const handleReset = () => { @@ -204,21 +204,21 @@ export default function CustomizedSteppers() { return (
    - {steps.map(label => ( + {steps.map((label) => ( {label} ))} }> - {steps.map(label => ( + {steps.map((label) => ( {label} ))} }> - {steps.map(label => ( + {steps.map((label) => ( {label} diff --git a/docs/src/pages/components/steppers/CustomizedSteppers.tsx b/docs/src/pages/components/steppers/CustomizedSteppers.tsx index fd7aa438e7e40f..67074d23232b38 100644 --- a/docs/src/pages/components/steppers/CustomizedSteppers.tsx +++ b/docs/src/pages/components/steppers/CustomizedSteppers.tsx @@ -181,11 +181,11 @@ export default function CustomizedSteppers() { const steps = getSteps(); const handleNext = () => { - setActiveStep(prevActiveStep => prevActiveStep + 1); + setActiveStep((prevActiveStep) => prevActiveStep + 1); }; const handleBack = () => { - setActiveStep(prevActiveStep => prevActiveStep - 1); + setActiveStep((prevActiveStep) => prevActiveStep - 1); }; const handleReset = () => { @@ -195,21 +195,21 @@ export default function CustomizedSteppers() { return (
    - {steps.map(label => ( + {steps.map((label) => ( {label} ))} }> - {steps.map(label => ( + {steps.map((label) => ( {label} ))} }> - {steps.map(label => ( + {steps.map((label) => ( {label} diff --git a/docs/src/pages/components/steppers/DotsMobileStepper.js b/docs/src/pages/components/steppers/DotsMobileStepper.js index bf3e28dc344196..6330501afff77e 100644 --- a/docs/src/pages/components/steppers/DotsMobileStepper.js +++ b/docs/src/pages/components/steppers/DotsMobileStepper.js @@ -18,11 +18,11 @@ export default function DotsMobileStepper() { const [activeStep, setActiveStep] = React.useState(0); const handleNext = () => { - setActiveStep(prevActiveStep => prevActiveStep + 1); + setActiveStep((prevActiveStep) => prevActiveStep + 1); }; const handleBack = () => { - setActiveStep(prevActiveStep => prevActiveStep - 1); + setActiveStep((prevActiveStep) => prevActiveStep - 1); }; return ( diff --git a/docs/src/pages/components/steppers/DotsMobileStepper.tsx b/docs/src/pages/components/steppers/DotsMobileStepper.tsx index bf3e28dc344196..6330501afff77e 100644 --- a/docs/src/pages/components/steppers/DotsMobileStepper.tsx +++ b/docs/src/pages/components/steppers/DotsMobileStepper.tsx @@ -18,11 +18,11 @@ export default function DotsMobileStepper() { const [activeStep, setActiveStep] = React.useState(0); const handleNext = () => { - setActiveStep(prevActiveStep => prevActiveStep + 1); + setActiveStep((prevActiveStep) => prevActiveStep + 1); }; const handleBack = () => { - setActiveStep(prevActiveStep => prevActiveStep - 1); + setActiveStep((prevActiveStep) => prevActiveStep - 1); }; return ( diff --git a/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js b/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js index 9de6f9572ff451..143f2510e5596b 100644 --- a/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js +++ b/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js @@ -6,7 +6,7 @@ import StepLabel from '@material-ui/core/StepLabel'; import Button from '@material-ui/core/Button'; import Typography from '@material-ui/core/Typography'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', }, @@ -42,11 +42,11 @@ export default function HorizontalLabelPositionBelowStepper() { const steps = getSteps(); const handleNext = () => { - setActiveStep(prevActiveStep => prevActiveStep + 1); + setActiveStep((prevActiveStep) => prevActiveStep + 1); }; const handleBack = () => { - setActiveStep(prevActiveStep => prevActiveStep - 1); + setActiveStep((prevActiveStep) => prevActiveStep - 1); }; const handleReset = () => { @@ -56,7 +56,7 @@ export default function HorizontalLabelPositionBelowStepper() { return (
    - {steps.map(label => ( + {steps.map((label) => ( {label} diff --git a/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.tsx b/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.tsx index 61112f8707a84d..f1eb622a3db658 100644 --- a/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.tsx +++ b/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.tsx @@ -44,11 +44,11 @@ export default function HorizontalLabelPositionBelowStepper() { const steps = getSteps(); const handleNext = () => { - setActiveStep(prevActiveStep => prevActiveStep + 1); + setActiveStep((prevActiveStep) => prevActiveStep + 1); }; const handleBack = () => { - setActiveStep(prevActiveStep => prevActiveStep - 1); + setActiveStep((prevActiveStep) => prevActiveStep - 1); }; const handleReset = () => { @@ -58,7 +58,7 @@ export default function HorizontalLabelPositionBelowStepper() { return (
    - {steps.map(label => ( + {steps.map((label) => ( {label} diff --git a/docs/src/pages/components/steppers/HorizontalLinearStepper.js b/docs/src/pages/components/steppers/HorizontalLinearStepper.js index 4966677206fbb0..c8793143ee189b 100644 --- a/docs/src/pages/components/steppers/HorizontalLinearStepper.js +++ b/docs/src/pages/components/steppers/HorizontalLinearStepper.js @@ -6,7 +6,7 @@ import StepLabel from '@material-ui/core/StepLabel'; import Button from '@material-ui/core/Button'; import Typography from '@material-ui/core/Typography'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', }, @@ -42,11 +42,11 @@ export default function HorizontalLinearStepper() { const [skipped, setSkipped] = React.useState(new Set()); const steps = getSteps(); - const isStepOptional = step => { + const isStepOptional = (step) => { return step === 1; }; - const isStepSkipped = step => { + const isStepSkipped = (step) => { return skipped.has(step); }; @@ -57,12 +57,12 @@ export default function HorizontalLinearStepper() { newSkipped.delete(activeStep); } - setActiveStep(prevActiveStep => prevActiveStep + 1); + setActiveStep((prevActiveStep) => prevActiveStep + 1); setSkipped(newSkipped); }; const handleBack = () => { - setActiveStep(prevActiveStep => prevActiveStep - 1); + setActiveStep((prevActiveStep) => prevActiveStep - 1); }; const handleSkip = () => { @@ -72,8 +72,8 @@ export default function HorizontalLinearStepper() { throw new Error("You can't skip a step that isn't optional."); } - setActiveStep(prevActiveStep => prevActiveStep + 1); - setSkipped(prevSkipped => { + setActiveStep((prevActiveStep) => prevActiveStep + 1); + setSkipped((prevSkipped) => { const newSkipped = new Set(prevSkipped.values()); newSkipped.add(activeStep); return newSkipped; diff --git a/docs/src/pages/components/steppers/HorizontalLinearStepper.tsx b/docs/src/pages/components/steppers/HorizontalLinearStepper.tsx index 819e145baedc0a..6f4d46b4a3005b 100644 --- a/docs/src/pages/components/steppers/HorizontalLinearStepper.tsx +++ b/docs/src/pages/components/steppers/HorizontalLinearStepper.tsx @@ -59,12 +59,12 @@ export default function HorizontalLinearStepper() { newSkipped.delete(activeStep); } - setActiveStep(prevActiveStep => prevActiveStep + 1); + setActiveStep((prevActiveStep) => prevActiveStep + 1); setSkipped(newSkipped); }; const handleBack = () => { - setActiveStep(prevActiveStep => prevActiveStep - 1); + setActiveStep((prevActiveStep) => prevActiveStep - 1); }; const handleSkip = () => { @@ -74,8 +74,8 @@ export default function HorizontalLinearStepper() { throw new Error("You can't skip a step that isn't optional."); } - setActiveStep(prevActiveStep => prevActiveStep + 1); - setSkipped(prevSkipped => { + setActiveStep((prevActiveStep) => prevActiveStep + 1); + setSkipped((prevSkipped) => { const newSkipped = new Set(prevSkipped.values()); newSkipped.add(activeStep); return newSkipped; diff --git a/docs/src/pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.js b/docs/src/pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.js index 899bab749a4b1a..ae77ab784d3f6f 100644 --- a/docs/src/pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.js +++ b/docs/src/pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.js @@ -6,7 +6,7 @@ import StepButton from '@material-ui/core/StepButton'; import Button from '@material-ui/core/Button'; import Typography from '@material-ui/core/Typography'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', }, @@ -53,7 +53,7 @@ export default function HorizontalNonLinearAlternativeLabelStepper() { return getSteps().length; }; - const isStepOptional = step => { + const isStepOptional = (step) => { return step === 1; }; @@ -64,8 +64,8 @@ export default function HorizontalNonLinearAlternativeLabelStepper() { throw new Error("You can't skip a step that isn't optional."); } - setActiveStep(prevActiveStep => prevActiveStep + 1); - setSkipped(prevSkipped => { + setActiveStep((prevActiveStep) => prevActiveStep + 1); + setSkipped((prevSkipped) => { const newSkipped = new Set(prevSkipped.values()); newSkipped.add(activeStep); return newSkipped; @@ -100,10 +100,10 @@ export default function HorizontalNonLinearAlternativeLabelStepper() { }; const handleBack = () => { - setActiveStep(prevActiveStep => prevActiveStep - 1); + setActiveStep((prevActiveStep) => prevActiveStep - 1); }; - const handleStep = step => () => { + const handleStep = (step) => () => { setActiveStep(step); }; @@ -128,7 +128,7 @@ export default function HorizontalNonLinearAlternativeLabelStepper() { setSkipped(new Set()); }; - const isStepSkipped = step => { + const isStepSkipped = (step) => { return skipped.has(step); }; diff --git a/docs/src/pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.tsx b/docs/src/pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.tsx index eb7e808b967768..f82d8519c28449 100644 --- a/docs/src/pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.tsx +++ b/docs/src/pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.tsx @@ -66,8 +66,8 @@ export default function HorizontalNonLinearAlternativeLabelStepper() { throw new Error("You can't skip a step that isn't optional."); } - setActiveStep(prevActiveStep => prevActiveStep + 1); - setSkipped(prevSkipped => { + setActiveStep((prevActiveStep) => prevActiveStep + 1); + setSkipped((prevSkipped) => { const newSkipped = new Set(prevSkipped.values()); newSkipped.add(activeStep); return newSkipped; @@ -102,7 +102,7 @@ export default function HorizontalNonLinearAlternativeLabelStepper() { }; const handleBack = () => { - setActiveStep(prevActiveStep => prevActiveStep - 1); + setActiveStep((prevActiveStep) => prevActiveStep - 1); }; const handleStep = (step: number) => () => { diff --git a/docs/src/pages/components/steppers/HorizontalNonLinearStepper.js b/docs/src/pages/components/steppers/HorizontalNonLinearStepper.js index 6d66c8b56964be..9156d1890a9ed9 100644 --- a/docs/src/pages/components/steppers/HorizontalNonLinearStepper.js +++ b/docs/src/pages/components/steppers/HorizontalNonLinearStepper.js @@ -6,7 +6,7 @@ import StepButton from '@material-ui/core/StepButton'; import Button from '@material-ui/core/Button'; import Typography from '@material-ui/core/Typography'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', }, @@ -72,10 +72,10 @@ export default function HorizontalNonLinearStepper() { }; const handleBack = () => { - setActiveStep(prevActiveStep => prevActiveStep - 1); + setActiveStep((prevActiveStep) => prevActiveStep - 1); }; - const handleStep = step => () => { + const handleStep = (step) => () => { setActiveStep(step); }; diff --git a/docs/src/pages/components/steppers/HorizontalNonLinearStepper.tsx b/docs/src/pages/components/steppers/HorizontalNonLinearStepper.tsx index 6c9fcfa1d9cb5b..322587504a6698 100644 --- a/docs/src/pages/components/steppers/HorizontalNonLinearStepper.tsx +++ b/docs/src/pages/components/steppers/HorizontalNonLinearStepper.tsx @@ -74,7 +74,7 @@ export default function HorizontalNonLinearStepper() { }; const handleBack = () => { - setActiveStep(prevActiveStep => prevActiveStep - 1); + setActiveStep((prevActiveStep) => prevActiveStep - 1); }; const handleStep = (step: number) => () => { diff --git a/docs/src/pages/components/steppers/HorizontalNonLinearStepperWithError.js b/docs/src/pages/components/steppers/HorizontalNonLinearStepperWithError.js index 5745d8a02ca598..e7afc938bf5fb6 100644 --- a/docs/src/pages/components/steppers/HorizontalNonLinearStepperWithError.js +++ b/docs/src/pages/components/steppers/HorizontalNonLinearStepperWithError.js @@ -6,7 +6,7 @@ import StepLabel from '@material-ui/core/StepLabel'; import Button from '@material-ui/core/Button'; import Typography from '@material-ui/core/Typography'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', }, @@ -42,15 +42,15 @@ export default function HorizontalNonLinearStepperWithError() { const [skipped, setSkipped] = React.useState(new Set()); const steps = getSteps(); - const isStepOptional = step => { + const isStepOptional = (step) => { return step === 1; }; - const isStepFailed = step => { + const isStepFailed = (step) => { return step === 1; }; - const isStepSkipped = step => { + const isStepSkipped = (step) => { return skipped.has(step); }; @@ -61,12 +61,12 @@ export default function HorizontalNonLinearStepperWithError() { newSkipped.delete(activeStep); } - setActiveStep(prevActiveStep => prevActiveStep + 1); + setActiveStep((prevActiveStep) => prevActiveStep + 1); setSkipped(newSkipped); }; const handleBack = () => { - setActiveStep(prevActiveStep => prevActiveStep - 1); + setActiveStep((prevActiveStep) => prevActiveStep - 1); }; const handleSkip = () => { @@ -76,12 +76,12 @@ export default function HorizontalNonLinearStepperWithError() { throw new Error("You can't skip a step that isn't optional."); } - setSkipped(prevSkipped => { + setSkipped((prevSkipped) => { const newSkipped = new Set(prevSkipped.values()); newSkipped.add(activeStep); return newSkipped; }); - setActiveStep(prevActiveStep => prevActiveStep + 1); + setActiveStep((prevActiveStep) => prevActiveStep + 1); }; const handleReset = () => { diff --git a/docs/src/pages/components/steppers/HorizontalNonLinearStepperWithError.tsx b/docs/src/pages/components/steppers/HorizontalNonLinearStepperWithError.tsx index c2f6718933bc44..f4446a0ee59319 100644 --- a/docs/src/pages/components/steppers/HorizontalNonLinearStepperWithError.tsx +++ b/docs/src/pages/components/steppers/HorizontalNonLinearStepperWithError.tsx @@ -63,12 +63,12 @@ export default function HorizontalNonLinearStepperWithError() { newSkipped.delete(activeStep); } - setActiveStep(prevActiveStep => prevActiveStep + 1); + setActiveStep((prevActiveStep) => prevActiveStep + 1); setSkipped(newSkipped); }; const handleBack = () => { - setActiveStep(prevActiveStep => prevActiveStep - 1); + setActiveStep((prevActiveStep) => prevActiveStep - 1); }; const handleSkip = () => { @@ -78,12 +78,12 @@ export default function HorizontalNonLinearStepperWithError() { throw new Error("You can't skip a step that isn't optional."); } - setSkipped(prevSkipped => { + setSkipped((prevSkipped) => { const newSkipped = new Set(prevSkipped.values()); newSkipped.add(activeStep); return newSkipped; }); - setActiveStep(prevActiveStep => prevActiveStep + 1); + setActiveStep((prevActiveStep) => prevActiveStep + 1); }; const handleReset = () => { diff --git a/docs/src/pages/components/steppers/ProgressMobileStepper.js b/docs/src/pages/components/steppers/ProgressMobileStepper.js index 79c15ed5545afc..5785487d9e728a 100644 --- a/docs/src/pages/components/steppers/ProgressMobileStepper.js +++ b/docs/src/pages/components/steppers/ProgressMobileStepper.js @@ -18,11 +18,11 @@ export default function ProgressMobileStepper() { const [activeStep, setActiveStep] = React.useState(0); const handleNext = () => { - setActiveStep(prevActiveStep => prevActiveStep + 1); + setActiveStep((prevActiveStep) => prevActiveStep + 1); }; const handleBack = () => { - setActiveStep(prevActiveStep => prevActiveStep - 1); + setActiveStep((prevActiveStep) => prevActiveStep - 1); }; return ( diff --git a/docs/src/pages/components/steppers/ProgressMobileStepper.tsx b/docs/src/pages/components/steppers/ProgressMobileStepper.tsx index 79c15ed5545afc..5785487d9e728a 100644 --- a/docs/src/pages/components/steppers/ProgressMobileStepper.tsx +++ b/docs/src/pages/components/steppers/ProgressMobileStepper.tsx @@ -18,11 +18,11 @@ export default function ProgressMobileStepper() { const [activeStep, setActiveStep] = React.useState(0); const handleNext = () => { - setActiveStep(prevActiveStep => prevActiveStep + 1); + setActiveStep((prevActiveStep) => prevActiveStep + 1); }; const handleBack = () => { - setActiveStep(prevActiveStep => prevActiveStep - 1); + setActiveStep((prevActiveStep) => prevActiveStep - 1); }; return ( diff --git a/docs/src/pages/components/steppers/SwipeableTextMobileStepper.js b/docs/src/pages/components/steppers/SwipeableTextMobileStepper.js index 9a068801f6385f..76b9a5aa0a6f61 100644 --- a/docs/src/pages/components/steppers/SwipeableTextMobileStepper.js +++ b/docs/src/pages/components/steppers/SwipeableTextMobileStepper.js @@ -39,7 +39,7 @@ const tutorialSteps = [ }, ]; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { maxWidth: 400, flexGrow: 1, @@ -67,14 +67,14 @@ function SwipeableTextMobileStepper() { const maxSteps = tutorialSteps.length; const handleNext = () => { - setActiveStep(prevActiveStep => prevActiveStep + 1); + setActiveStep((prevActiveStep) => prevActiveStep + 1); }; const handleBack = () => { - setActiveStep(prevActiveStep => prevActiveStep - 1); + setActiveStep((prevActiveStep) => prevActiveStep - 1); }; - const handleStepChange = step => { + const handleStepChange = (step) => { setActiveStep(step); }; diff --git a/docs/src/pages/components/steppers/SwipeableTextMobileStepper.tsx b/docs/src/pages/components/steppers/SwipeableTextMobileStepper.tsx index 647af09b9df5d3..68bd08e0ca6258 100644 --- a/docs/src/pages/components/steppers/SwipeableTextMobileStepper.tsx +++ b/docs/src/pages/components/steppers/SwipeableTextMobileStepper.tsx @@ -39,7 +39,7 @@ const tutorialSteps = [ }, ]; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { maxWidth: 400, flexGrow: 1, @@ -67,11 +67,11 @@ function SwipeableTextMobileStepper() { const maxSteps = tutorialSteps.length; const handleNext = () => { - setActiveStep(prevActiveStep => prevActiveStep + 1); + setActiveStep((prevActiveStep) => prevActiveStep + 1); }; const handleBack = () => { - setActiveStep(prevActiveStep => prevActiveStep - 1); + setActiveStep((prevActiveStep) => prevActiveStep - 1); }; const handleStepChange = (step: number) => { diff --git a/docs/src/pages/components/steppers/TextMobileStepper.js b/docs/src/pages/components/steppers/TextMobileStepper.js index 8377479962a839..5f35381caa131f 100644 --- a/docs/src/pages/components/steppers/TextMobileStepper.js +++ b/docs/src/pages/components/steppers/TextMobileStepper.js @@ -35,7 +35,7 @@ const tutorialSteps = [ }, ]; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { maxWidth: 400, flexGrow: 1, @@ -63,11 +63,11 @@ export default function TextMobileStepper() { const maxSteps = tutorialSteps.length; const handleNext = () => { - setActiveStep(prevActiveStep => prevActiveStep + 1); + setActiveStep((prevActiveStep) => prevActiveStep + 1); }; const handleBack = () => { - setActiveStep(prevActiveStep => prevActiveStep - 1); + setActiveStep((prevActiveStep) => prevActiveStep - 1); }; return ( diff --git a/docs/src/pages/components/steppers/TextMobileStepper.tsx b/docs/src/pages/components/steppers/TextMobileStepper.tsx index 9dbf5ece562113..7eed96ee3399c7 100644 --- a/docs/src/pages/components/steppers/TextMobileStepper.tsx +++ b/docs/src/pages/components/steppers/TextMobileStepper.tsx @@ -65,11 +65,11 @@ export default function TextMobileStepper() { const maxSteps = tutorialSteps.length; const handleNext = () => { - setActiveStep(prevActiveStep => prevActiveStep + 1); + setActiveStep((prevActiveStep) => prevActiveStep + 1); }; const handleBack = () => { - setActiveStep(prevActiveStep => prevActiveStep - 1); + setActiveStep((prevActiveStep) => prevActiveStep - 1); }; return ( diff --git a/docs/src/pages/components/steppers/VerticalLinearStepper.js b/docs/src/pages/components/steppers/VerticalLinearStepper.js index 7a36735f1328d7..0c60881576fa25 100644 --- a/docs/src/pages/components/steppers/VerticalLinearStepper.js +++ b/docs/src/pages/components/steppers/VerticalLinearStepper.js @@ -8,7 +8,7 @@ import Button from '@material-ui/core/Button'; import Paper from '@material-ui/core/Paper'; import Typography from '@material-ui/core/Typography'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', }, @@ -52,11 +52,11 @@ export default function VerticalLinearStepper() { const steps = getSteps(); const handleNext = () => { - setActiveStep(prevActiveStep => prevActiveStep + 1); + setActiveStep((prevActiveStep) => prevActiveStep + 1); }; const handleBack = () => { - setActiveStep(prevActiveStep => prevActiveStep - 1); + setActiveStep((prevActiveStep) => prevActiveStep - 1); }; const handleReset = () => { diff --git a/docs/src/pages/components/steppers/VerticalLinearStepper.tsx b/docs/src/pages/components/steppers/VerticalLinearStepper.tsx index 84d9283ddb5d66..8f782d600bc3dc 100644 --- a/docs/src/pages/components/steppers/VerticalLinearStepper.tsx +++ b/docs/src/pages/components/steppers/VerticalLinearStepper.tsx @@ -54,11 +54,11 @@ export default function VerticalLinearStepper() { const steps = getSteps(); const handleNext = () => { - setActiveStep(prevActiveStep => prevActiveStep + 1); + setActiveStep((prevActiveStep) => prevActiveStep + 1); }; const handleBack = () => { - setActiveStep(prevActiveStep => prevActiveStep - 1); + setActiveStep((prevActiveStep) => prevActiveStep - 1); }; const handleReset = () => { diff --git a/docs/src/pages/components/switches/CustomizedSwitches.js b/docs/src/pages/components/switches/CustomizedSwitches.js index 34e64499ef6749..32ff2e0e92fc05 100644 --- a/docs/src/pages/components/switches/CustomizedSwitches.js +++ b/docs/src/pages/components/switches/CustomizedSwitches.js @@ -21,7 +21,7 @@ const PurpleSwitch = withStyles({ track: {}, })(Switch); -const IOSSwitch = withStyles(theme => ({ +const IOSSwitch = withStyles((theme) => ({ root: { width: 42, height: 26, @@ -74,7 +74,7 @@ const IOSSwitch = withStyles(theme => ({ ); }); -const AntSwitch = withStyles(theme => ({ +const AntSwitch = withStyles((theme) => ({ root: { width: 28, height: 16, @@ -115,7 +115,7 @@ export default function CustomizedSwitches() { checkedC: true, }); - const handleChange = event => { + const handleChange = (event) => { setState({ ...state, [event.target.name]: event.target.checked }); }; diff --git a/docs/src/pages/components/switches/SwitchLabels.js b/docs/src/pages/components/switches/SwitchLabels.js index 4bb7066a390f1b..4f39011c3860f5 100644 --- a/docs/src/pages/components/switches/SwitchLabels.js +++ b/docs/src/pages/components/switches/SwitchLabels.js @@ -9,7 +9,7 @@ export default function SwitchLabels() { checkedB: true, }); - const handleChange = event => { + const handleChange = (event) => { setState({ ...state, [event.target.name]: event.target.checked }); }; diff --git a/docs/src/pages/components/switches/Switches.js b/docs/src/pages/components/switches/Switches.js index d617cd700b90bb..851b59eadbaa2a 100644 --- a/docs/src/pages/components/switches/Switches.js +++ b/docs/src/pages/components/switches/Switches.js @@ -7,7 +7,7 @@ export default function Switches() { checkedB: true, }); - const handleChange = event => { + const handleChange = (event) => { setState({ ...state, [event.target.name]: event.target.checked }); }; diff --git a/docs/src/pages/components/switches/SwitchesGroup.js b/docs/src/pages/components/switches/SwitchesGroup.js index c18f8560f1f8ee..1703b2af48cfc6 100644 --- a/docs/src/pages/components/switches/SwitchesGroup.js +++ b/docs/src/pages/components/switches/SwitchesGroup.js @@ -13,7 +13,7 @@ export default function SwitchesGroup() { antoine: true, }); - const handleChange = event => { + const handleChange = (event) => { setState({ ...state, [event.target.name]: event.target.checked }); }; diff --git a/docs/src/pages/components/switches/SwitchesSize.js b/docs/src/pages/components/switches/SwitchesSize.js index 27458ffd6b726c..65f65dfa64c758 100644 --- a/docs/src/pages/components/switches/SwitchesSize.js +++ b/docs/src/pages/components/switches/SwitchesSize.js @@ -7,7 +7,7 @@ export default function SwitchesSize() { const [checked, setChecked] = React.useState(false); const toggleChecked = () => { - setChecked(prev => !prev); + setChecked((prev) => !prev); }; return ( diff --git a/docs/src/pages/components/switches/SwitchesSize.tsx b/docs/src/pages/components/switches/SwitchesSize.tsx index 27458ffd6b726c..65f65dfa64c758 100644 --- a/docs/src/pages/components/switches/SwitchesSize.tsx +++ b/docs/src/pages/components/switches/SwitchesSize.tsx @@ -7,7 +7,7 @@ export default function SwitchesSize() { const [checked, setChecked] = React.useState(false); const toggleChecked = () => { - setChecked(prev => !prev); + setChecked((prev) => !prev); }; return ( diff --git a/docs/src/pages/components/tables/AcccessibleTable.js b/docs/src/pages/components/tables/AcccessibleTable.js index 3cdce195fa79fe..77a581f54d51ed 100644 --- a/docs/src/pages/components/tables/AcccessibleTable.js +++ b/docs/src/pages/components/tables/AcccessibleTable.js @@ -41,7 +41,7 @@ export default function AcccessibleTable() { - {rows.map(row => ( + {rows.map((row) => ( {row.name} diff --git a/docs/src/pages/components/tables/AcccessibleTable.tsx b/docs/src/pages/components/tables/AcccessibleTable.tsx index 73e03c578fed98..0499822bdad921 100644 --- a/docs/src/pages/components/tables/AcccessibleTable.tsx +++ b/docs/src/pages/components/tables/AcccessibleTable.tsx @@ -41,7 +41,7 @@ export default function AcccessibleTable() { - {rows.map(row => ( + {rows.map((row) => ( {row.name} diff --git a/docs/src/pages/components/tables/CustomPaginationActionsTable.js b/docs/src/pages/components/tables/CustomPaginationActionsTable.js index a6b4fc8335f297..8ec1eb70d999dd 100644 --- a/docs/src/pages/components/tables/CustomPaginationActionsTable.js +++ b/docs/src/pages/components/tables/CustomPaginationActionsTable.js @@ -15,7 +15,7 @@ import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft'; import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight'; import LastPageIcon from '@material-ui/icons/LastPage'; -const useStyles1 = makeStyles(theme => ({ +const useStyles1 = makeStyles((theme) => ({ root: { flexShrink: 0, marginLeft: theme.spacing(2.5), @@ -27,19 +27,19 @@ function TablePaginationActions(props) { const theme = useTheme(); const { count, page, rowsPerPage, onChangePage } = props; - const handleFirstPageButtonClick = event => { + const handleFirstPageButtonClick = (event) => { onChangePage(event, 0); }; - const handleBackButtonClick = event => { + const handleBackButtonClick = (event) => { onChangePage(event, page - 1); }; - const handleNextButtonClick = event => { + const handleNextButtonClick = (event) => { onChangePage(event, page + 1); }; - const handleLastPageButtonClick = event => { + const handleLastPageButtonClick = (event) => { onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1)); }; @@ -117,7 +117,7 @@ export default function CustomPaginationActionsTable() { setPage(newPage); }; - const handleChangeRowsPerPage = event => { + const handleChangeRowsPerPage = (event) => { setRowsPerPage(parseInt(event.target.value, 10)); setPage(0); }; @@ -129,7 +129,7 @@ export default function CustomPaginationActionsTable() { {(rowsPerPage > 0 ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) : rows - ).map(row => ( + ).map((row) => ( {row.name} diff --git a/docs/src/pages/components/tables/CustomPaginationActionsTable.tsx b/docs/src/pages/components/tables/CustomPaginationActionsTable.tsx index 3df50b2c10939e..601be11f88838d 100644 --- a/docs/src/pages/components/tables/CustomPaginationActionsTable.tsx +++ b/docs/src/pages/components/tables/CustomPaginationActionsTable.tsx @@ -132,7 +132,7 @@ export default function CustomPaginationActionsTable() { {(rowsPerPage > 0 ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) : rows - ).map(row => ( + ).map((row) => ( {row.name} diff --git a/docs/src/pages/components/tables/CustomizedTables.js b/docs/src/pages/components/tables/CustomizedTables.js index 0228fd245a514b..c30237047fd256 100644 --- a/docs/src/pages/components/tables/CustomizedTables.js +++ b/docs/src/pages/components/tables/CustomizedTables.js @@ -8,7 +8,7 @@ import TableHead from '@material-ui/core/TableHead'; import TableRow from '@material-ui/core/TableRow'; import Paper from '@material-ui/core/Paper'; -const StyledTableCell = withStyles(theme => ({ +const StyledTableCell = withStyles((theme) => ({ head: { backgroundColor: theme.palette.common.black, color: theme.palette.common.white, @@ -18,7 +18,7 @@ const StyledTableCell = withStyles(theme => ({ }, }))(TableCell); -const StyledTableRow = withStyles(theme => ({ +const StyledTableRow = withStyles((theme) => ({ root: { '&:nth-of-type(odd)': { backgroundColor: theme.palette.background.default, @@ -60,7 +60,7 @@ export default function CustomizedTables() { - {rows.map(row => ( + {rows.map((row) => ( {row.name} diff --git a/docs/src/pages/components/tables/CustomizedTables.tsx b/docs/src/pages/components/tables/CustomizedTables.tsx index d830b80785a62b..b601786ea9e8ce 100644 --- a/docs/src/pages/components/tables/CustomizedTables.tsx +++ b/docs/src/pages/components/tables/CustomizedTables.tsx @@ -64,7 +64,7 @@ export default function CustomizedTables() { - {rows.map(row => ( + {rows.map((row) => ( {row.name} diff --git a/docs/src/pages/components/tables/DenseTable.js b/docs/src/pages/components/tables/DenseTable.js index abe728c371572d..208c68866358c7 100644 --- a/docs/src/pages/components/tables/DenseTable.js +++ b/docs/src/pages/components/tables/DenseTable.js @@ -42,7 +42,7 @@ export default function DenseTable() { - {rows.map(row => ( + {rows.map((row) => ( {row.name} diff --git a/docs/src/pages/components/tables/DenseTable.tsx b/docs/src/pages/components/tables/DenseTable.tsx index c198063decf2c9..11f09011e9c025 100644 --- a/docs/src/pages/components/tables/DenseTable.tsx +++ b/docs/src/pages/components/tables/DenseTable.tsx @@ -42,7 +42,7 @@ export default function DenseTable() { - {rows.map(row => ( + {rows.map((row) => ( {row.name} diff --git a/docs/src/pages/components/tables/EnhancedTable.js b/docs/src/pages/components/tables/EnhancedTable.js index e923ccbf2afcf4..9c6973ad32ae0e 100644 --- a/docs/src/pages/components/tables/EnhancedTable.js +++ b/docs/src/pages/components/tables/EnhancedTable.js @@ -64,7 +64,7 @@ function stableSort(array, comparator) { if (order !== 0) return order; return a[1] - b[1]; }); - return stabilizedThis.map(el => el[0]); + return stabilizedThis.map((el) => el[0]); } const headCells = [ @@ -77,7 +77,7 @@ const headCells = [ function EnhancedTableHead(props) { const { classes, onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } = props; - const createSortHandler = property => event => { + const createSortHandler = (property) => (event) => { onRequestSort(event, property); }; @@ -92,7 +92,7 @@ function EnhancedTableHead(props) { inputProps={{ 'aria-label': 'select all desserts' }} /> - {headCells.map(headCell => ( + {headCells.map((headCell) => ( ({ +const useToolbarStyles = makeStyles((theme) => ({ root: { paddingLeft: theme.spacing(2), paddingRight: theme.spacing(1), @@ -148,7 +148,7 @@ const useToolbarStyles = makeStyles(theme => ({ }, })); -const EnhancedTableToolbar = props => { +const EnhancedTableToolbar = (props) => { const classes = useToolbarStyles(); const { numSelected } = props; @@ -189,7 +189,7 @@ EnhancedTableToolbar.propTypes = { numSelected: PropTypes.number.isRequired, }; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { width: '100%', }, @@ -228,9 +228,9 @@ export default function EnhancedTable() { setOrderBy(property); }; - const handleSelectAllClick = event => { + const handleSelectAllClick = (event) => { if (event.target.checked) { - const newSelecteds = rows.map(n => n.name); + const newSelecteds = rows.map((n) => n.name); setSelected(newSelecteds); return; } @@ -261,16 +261,16 @@ export default function EnhancedTable() { setPage(newPage); }; - const handleChangeRowsPerPage = event => { + const handleChangeRowsPerPage = (event) => { setRowsPerPage(parseInt(event.target.value, 10)); setPage(0); }; - const handleChangeDense = event => { + const handleChangeDense = (event) => { setDense(event.target.checked); }; - const isSelected = name => selected.indexOf(name) !== -1; + const isSelected = (name) => selected.indexOf(name) !== -1; const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage); @@ -304,7 +304,7 @@ export default function EnhancedTable() { return ( handleClick(event, row.name)} + onClick={(event) => handleClick(event, row.name)} role="checkbox" aria-checked={isItemSelected} tabIndex={-1} diff --git a/docs/src/pages/components/tables/EnhancedTable.tsx b/docs/src/pages/components/tables/EnhancedTable.tsx index 8a62992e29e4f5..3bf1ca8197c9fe 100644 --- a/docs/src/pages/components/tables/EnhancedTable.tsx +++ b/docs/src/pages/components/tables/EnhancedTable.tsx @@ -82,7 +82,7 @@ function stableSort(array: T[], comparator: (a: T, b: T) => number) { if (order !== 0) return order; return a[1] - b[1]; }); - return stabilizedThis.map(el => el[0]); + return stabilizedThis.map((el) => el[0]); } interface HeadCell { @@ -127,7 +127,7 @@ function EnhancedTableHead(props: EnhancedTableProps) { inputProps={{ 'aria-label': 'select all desserts' }} /> - {headCells.map(headCell => ( + {headCells.map((headCell) => ( ) => { if (event.target.checked) { - const newSelecteds = rows.map(n => n.name); + const newSelecteds = rows.map((n) => n.name); setSelected(newSelecteds); return; } @@ -332,7 +332,7 @@ export default function EnhancedTable() { return ( handleClick(event, row.name)} + onClick={(event) => handleClick(event, row.name)} role="checkbox" aria-checked={isItemSelected} tabIndex={-1} diff --git a/docs/src/pages/components/tables/MaterialTableDemo.js b/docs/src/pages/components/tables/MaterialTableDemo.js index 822b1c082ceaef..d3502f251711d9 100644 --- a/docs/src/pages/components/tables/MaterialTableDemo.js +++ b/docs/src/pages/components/tables/MaterialTableDemo.js @@ -30,11 +30,11 @@ export default function MaterialTableDemo() { columns={state.columns} data={state.data} editable={{ - onRowAdd: newData => - new Promise(resolve => { + onRowAdd: (newData) => + new Promise((resolve) => { setTimeout(() => { resolve(); - setState(prevState => { + setState((prevState) => { const data = [...prevState.data]; data.push(newData); return { ...prevState, data }; @@ -42,11 +42,11 @@ export default function MaterialTableDemo() { }, 600); }), onRowUpdate: (newData, oldData) => - new Promise(resolve => { + new Promise((resolve) => { setTimeout(() => { resolve(); if (oldData) { - setState(prevState => { + setState((prevState) => { const data = [...prevState.data]; data[data.indexOf(oldData)] = newData; return { ...prevState, data }; @@ -54,11 +54,11 @@ export default function MaterialTableDemo() { } }, 600); }), - onRowDelete: oldData => - new Promise(resolve => { + onRowDelete: (oldData) => + new Promise((resolve) => { setTimeout(() => { resolve(); - setState(prevState => { + setState((prevState) => { const data = [...prevState.data]; data.splice(data.indexOf(oldData), 1); return { ...prevState, data }; diff --git a/docs/src/pages/components/tables/MaterialTableDemo.tsx b/docs/src/pages/components/tables/MaterialTableDemo.tsx index 113478fe6b0a7d..c0d6e0cc61a794 100644 --- a/docs/src/pages/components/tables/MaterialTableDemo.tsx +++ b/docs/src/pages/components/tables/MaterialTableDemo.tsx @@ -42,11 +42,11 @@ export default function MaterialTableDemo() { columns={state.columns} data={state.data} editable={{ - onRowAdd: newData => - new Promise(resolve => { + onRowAdd: (newData) => + new Promise((resolve) => { setTimeout(() => { resolve(); - setState(prevState => { + setState((prevState) => { const data = [...prevState.data]; data.push(newData); return { ...prevState, data }; @@ -54,11 +54,11 @@ export default function MaterialTableDemo() { }, 600); }), onRowUpdate: (newData, oldData) => - new Promise(resolve => { + new Promise((resolve) => { setTimeout(() => { resolve(); if (oldData) { - setState(prevState => { + setState((prevState) => { const data = [...prevState.data]; data[data.indexOf(oldData)] = newData; return { ...prevState, data }; @@ -66,11 +66,11 @@ export default function MaterialTableDemo() { } }, 600); }), - onRowDelete: oldData => - new Promise(resolve => { + onRowDelete: (oldData) => + new Promise((resolve) => { setTimeout(() => { resolve(); - setState(prevState => { + setState((prevState) => { const data = [...prevState.data]; data.splice(data.indexOf(oldData), 1); return { ...prevState, data }; diff --git a/docs/src/pages/components/tables/ReactVirtualizedTable.js b/docs/src/pages/components/tables/ReactVirtualizedTable.js index c6a47aad0e6681..d5fd2c5b3554e6 100644 --- a/docs/src/pages/components/tables/ReactVirtualizedTable.js +++ b/docs/src/pages/components/tables/ReactVirtualizedTable.js @@ -6,7 +6,7 @@ import TableCell from '@material-ui/core/TableCell'; import Paper from '@material-ui/core/Paper'; import { AutoSizer, Column, Table } from 'react-virtualized'; -const styles = theme => ({ +const styles = (theme) => ({ flexContainer: { display: 'flex', alignItems: 'center', @@ -104,7 +104,7 @@ class MuiVirtualizedTable extends React.PureComponent { return ( + headerRenderer={(headerProps) => this.headerRenderer({ ...headerProps, columnIndex: index, diff --git a/docs/src/pages/components/tables/ReactVirtualizedTable.tsx b/docs/src/pages/components/tables/ReactVirtualizedTable.tsx index 3193397edb888d..2275f8db614153 100644 --- a/docs/src/pages/components/tables/ReactVirtualizedTable.tsx +++ b/docs/src/pages/components/tables/ReactVirtualizedTable.tsx @@ -134,7 +134,7 @@ class MuiVirtualizedTable extends React.PureComponent return ( + headerRenderer={(headerProps) => this.headerRenderer({ ...headerProps, columnIndex: index, diff --git a/docs/src/pages/components/tables/SimpleTable.js b/docs/src/pages/components/tables/SimpleTable.js index f7e14b48d10644..1803f509786ebc 100644 --- a/docs/src/pages/components/tables/SimpleTable.js +++ b/docs/src/pages/components/tables/SimpleTable.js @@ -42,7 +42,7 @@ export default function SimpleTable() { - {rows.map(row => ( + {rows.map((row) => ( {row.name} diff --git a/docs/src/pages/components/tables/SimpleTable.tsx b/docs/src/pages/components/tables/SimpleTable.tsx index f182b843ad4f53..26e4361ba677ca 100644 --- a/docs/src/pages/components/tables/SimpleTable.tsx +++ b/docs/src/pages/components/tables/SimpleTable.tsx @@ -42,7 +42,7 @@ export default function SimpleTable() { - {rows.map(row => ( + {rows.map((row) => ( {row.name} diff --git a/docs/src/pages/components/tables/SpanningTable.js b/docs/src/pages/components/tables/SpanningTable.js index 7dc1b226758d5b..eb172345d20186 100644 --- a/docs/src/pages/components/tables/SpanningTable.js +++ b/docs/src/pages/components/tables/SpanningTable.js @@ -64,7 +64,7 @@ export default function SpanningTable() { - {rows.map(row => ( + {rows.map((row) => ( {row.desc} {row.qty} diff --git a/docs/src/pages/components/tables/SpanningTable.tsx b/docs/src/pages/components/tables/SpanningTable.tsx index b3b82c0fe5f0eb..f85698c81cc79d 100644 --- a/docs/src/pages/components/tables/SpanningTable.tsx +++ b/docs/src/pages/components/tables/SpanningTable.tsx @@ -71,7 +71,7 @@ export default function SpanningTable() { - {rows.map(row => ( + {rows.map((row) => ( {row.desc} {row.qty} diff --git a/docs/src/pages/components/tables/StickyHeadTable.js b/docs/src/pages/components/tables/StickyHeadTable.js index 697d3e3fc8c9f6..70adf976d8d4f5 100644 --- a/docs/src/pages/components/tables/StickyHeadTable.js +++ b/docs/src/pages/components/tables/StickyHeadTable.js @@ -17,21 +17,21 @@ const columns = [ label: 'Population', minWidth: 170, align: 'right', - format: value => value.toLocaleString(), + format: (value) => value.toLocaleString(), }, { id: 'size', label: 'Size\u00a0(km\u00b2)', minWidth: 170, align: 'right', - format: value => value.toLocaleString(), + format: (value) => value.toLocaleString(), }, { id: 'density', label: 'Density', minWidth: 170, align: 'right', - format: value => value.toFixed(2), + format: (value) => value.toFixed(2), }, ]; @@ -76,7 +76,7 @@ export default function StickyHeadTable() { setPage(newPage); }; - const handleChangeRowsPerPage = event => { + const handleChangeRowsPerPage = (event) => { setRowsPerPage(+event.target.value); setPage(0); }; @@ -87,7 +87,7 @@ export default function StickyHeadTable() { - {columns.map(column => ( + {columns.map((column) => ( - {rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(row => { + {rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => { return ( - {columns.map(column => { + {columns.map((column) => { const value = row[column.id]; return ( diff --git a/docs/src/pages/components/tables/StickyHeadTable.tsx b/docs/src/pages/components/tables/StickyHeadTable.tsx index d73546c5f547b2..9b27438a01177e 100644 --- a/docs/src/pages/components/tables/StickyHeadTable.tsx +++ b/docs/src/pages/components/tables/StickyHeadTable.tsx @@ -103,7 +103,7 @@ export default function StickyHeadTable() {
    - {columns.map(column => ( + {columns.map((column) => ( - {rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(row => { + {rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => { return ( - {columns.map(column => { + {columns.map((column) => { const value = row[column.id]; return ( diff --git a/docs/src/pages/components/tabs/CustomizedTabs.js b/docs/src/pages/components/tabs/CustomizedTabs.js index 495227f3530eb1..4fefd883de2be7 100644 --- a/docs/src/pages/components/tabs/CustomizedTabs.js +++ b/docs/src/pages/components/tabs/CustomizedTabs.js @@ -13,7 +13,7 @@ const AntTabs = withStyles({ }, })(Tabs); -const AntTab = withStyles(theme => ({ +const AntTab = withStyles((theme) => ({ root: { textTransform: 'none', minWidth: 72, @@ -44,7 +44,7 @@ const AntTab = withStyles(theme => ({ }, }, selected: {}, -}))(props => ); +}))((props) => ); const StyledTabs = withStyles({ indicator: { @@ -57,9 +57,9 @@ const StyledTabs = withStyles({ backgroundColor: '#635ee7', }, }, -})(props => }} />); +})((props) => }} />); -const StyledTab = withStyles(theme => ({ +const StyledTab = withStyles((theme) => ({ root: { textTransform: 'none', color: '#fff', @@ -70,9 +70,9 @@ const StyledTab = withStyles(theme => ({ opacity: 1, }, }, -}))(props => ); +}))((props) => ); -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, }, diff --git a/docs/src/pages/components/tabs/FullWidthTabs.js b/docs/src/pages/components/tabs/FullWidthTabs.js index 9a9dca65635909..471d3a803a9b60 100644 --- a/docs/src/pages/components/tabs/FullWidthTabs.js +++ b/docs/src/pages/components/tabs/FullWidthTabs.js @@ -38,7 +38,7 @@ function a11yProps(index) { }; } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { backgroundColor: theme.palette.background.paper, width: 500, @@ -54,7 +54,7 @@ export default function FullWidthTabs() { setValue(newValue); }; - const handleChangeIndex = index => { + const handleChangeIndex = (index) => { setValue(index); }; diff --git a/docs/src/pages/components/tabs/NavTabs.js b/docs/src/pages/components/tabs/NavTabs.js index 0a3e0973ee7766..30d18f0d9a0e00 100644 --- a/docs/src/pages/components/tabs/NavTabs.js +++ b/docs/src/pages/components/tabs/NavTabs.js @@ -41,7 +41,7 @@ function LinkTab(props) { return ( { + onClick={(event) => { event.preventDefault(); }} {...props} @@ -49,7 +49,7 @@ function LinkTab(props) { ); } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, backgroundColor: theme.palette.background.paper, diff --git a/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.js b/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.js index be8f15c4082657..afb04f734ae7f7 100644 --- a/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.js +++ b/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.js @@ -37,7 +37,7 @@ function a11yProps(index) { }; } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, width: '100%', diff --git a/docs/src/pages/components/tabs/ScrollableTabsButtonForce.js b/docs/src/pages/components/tabs/ScrollableTabsButtonForce.js index c2a9498af51e4e..7c37f18ab05761 100644 --- a/docs/src/pages/components/tabs/ScrollableTabsButtonForce.js +++ b/docs/src/pages/components/tabs/ScrollableTabsButtonForce.js @@ -44,7 +44,7 @@ function a11yProps(index) { }; } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, width: '100%', diff --git a/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.js b/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.js index 5618ccfb01dd97..09cca4907fecdc 100644 --- a/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.js +++ b/docs/src/pages/components/tabs/ScrollableTabsButtonPrevent.js @@ -44,7 +44,7 @@ function a11yProps(index) { }; } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, width: '100%', diff --git a/docs/src/pages/components/tabs/SimpleTabs.js b/docs/src/pages/components/tabs/SimpleTabs.js index 6b46571d534d09..d1c9a2c38373e0 100644 --- a/docs/src/pages/components/tabs/SimpleTabs.js +++ b/docs/src/pages/components/tabs/SimpleTabs.js @@ -37,7 +37,7 @@ function a11yProps(index) { }; } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, backgroundColor: theme.palette.background.paper, diff --git a/docs/src/pages/components/tabs/TabsWrappedLabel.js b/docs/src/pages/components/tabs/TabsWrappedLabel.js index 93ebbf19892247..290f158336cbcd 100644 --- a/docs/src/pages/components/tabs/TabsWrappedLabel.js +++ b/docs/src/pages/components/tabs/TabsWrappedLabel.js @@ -37,7 +37,7 @@ function a11yProps(index) { }; } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, backgroundColor: theme.palette.background.paper, diff --git a/docs/src/pages/components/tabs/VerticalTabs.js b/docs/src/pages/components/tabs/VerticalTabs.js index 4565d0ba2c3409..dc2207caeef00a 100644 --- a/docs/src/pages/components/tabs/VerticalTabs.js +++ b/docs/src/pages/components/tabs/VerticalTabs.js @@ -36,7 +36,7 @@ function a11yProps(index) { }; } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, backgroundColor: theme.palette.background.paper, diff --git a/docs/src/pages/components/text-fields/BasicTextFields.js b/docs/src/pages/components/text-fields/BasicTextFields.js index 412b88401f9bfe..e38fd5df1d1109 100644 --- a/docs/src/pages/components/text-fields/BasicTextFields.js +++ b/docs/src/pages/components/text-fields/BasicTextFields.js @@ -2,7 +2,7 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import TextField from '@material-ui/core/TextField'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { '& > *': { margin: theme.spacing(1), diff --git a/docs/src/pages/components/text-fields/ColorTextFields.js b/docs/src/pages/components/text-fields/ColorTextFields.js index c56b9afc40bc96..87b0128b546552 100644 --- a/docs/src/pages/components/text-fields/ColorTextFields.js +++ b/docs/src/pages/components/text-fields/ColorTextFields.js @@ -2,7 +2,7 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import TextField from '@material-ui/core/TextField'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { '& > *': { margin: theme.spacing(1), diff --git a/docs/src/pages/components/text-fields/ComposedTextField.js b/docs/src/pages/components/text-fields/ComposedTextField.js index fcefa18ed1d52e..9b1460aa54c837 100644 --- a/docs/src/pages/components/text-fields/ComposedTextField.js +++ b/docs/src/pages/components/text-fields/ComposedTextField.js @@ -7,7 +7,7 @@ import Input from '@material-ui/core/Input'; import InputLabel from '@material-ui/core/InputLabel'; import OutlinedInput from '@material-ui/core/OutlinedInput'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { '& > *': { margin: theme.spacing(1), @@ -19,7 +19,7 @@ export default function ComposedTextField() { const [name, setName] = React.useState('Composed TextField'); const classes = useStyles(); - const handleChange = event => { + const handleChange = (event) => { setName(event.target.value); }; diff --git a/docs/src/pages/components/text-fields/CustomizedInputBase.js b/docs/src/pages/components/text-fields/CustomizedInputBase.js index f3b85a6f6d48b4..260bfd30a15b6c 100644 --- a/docs/src/pages/components/text-fields/CustomizedInputBase.js +++ b/docs/src/pages/components/text-fields/CustomizedInputBase.js @@ -8,7 +8,7 @@ import MenuIcon from '@material-ui/icons/Menu'; import SearchIcon from '@material-ui/icons/Search'; import DirectionsIcon from '@material-ui/icons/Directions'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { padding: '2px 4px', display: 'flex', diff --git a/docs/src/pages/components/text-fields/CustomizedInputs.js b/docs/src/pages/components/text-fields/CustomizedInputs.js index fc02df94c5395c..07aaac51ac5818 100644 --- a/docs/src/pages/components/text-fields/CustomizedInputs.js +++ b/docs/src/pages/components/text-fields/CustomizedInputs.js @@ -34,7 +34,7 @@ const CssTextField = withStyles({ }, })(TextField); -const BootstrapInput = withStyles(theme => ({ +const BootstrapInput = withStyles((theme) => ({ root: { 'label + &': { marginTop: theme.spacing(3), @@ -69,7 +69,7 @@ const BootstrapInput = withStyles(theme => ({ }, }))(InputBase); -const useStylesReddit = makeStyles(theme => ({ +const useStylesReddit = makeStyles((theme) => ({ root: { border: '1px solid #e2e2e1', overflow: 'hidden', @@ -94,7 +94,7 @@ function RedditTextField(props) { return ; } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', flexWrap: 'wrap', diff --git a/docs/src/pages/components/text-fields/FormPropsTextFields.js b/docs/src/pages/components/text-fields/FormPropsTextFields.js index d1aa2523002089..a3f3a09a92efb9 100644 --- a/docs/src/pages/components/text-fields/FormPropsTextFields.js +++ b/docs/src/pages/components/text-fields/FormPropsTextFields.js @@ -2,7 +2,7 @@ import React from 'react'; import TextField from '@material-ui/core/TextField'; import { makeStyles } from '@material-ui/core/styles'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { '& .MuiTextField-root': { margin: theme.spacing(1), diff --git a/docs/src/pages/components/text-fields/FormattedInputs.js b/docs/src/pages/components/text-fields/FormattedInputs.js index 89dfe4ca85d2c5..83f15ff1b17876 100644 --- a/docs/src/pages/components/text-fields/FormattedInputs.js +++ b/docs/src/pages/components/text-fields/FormattedInputs.js @@ -8,7 +8,7 @@ import InputLabel from '@material-ui/core/InputLabel'; import TextField from '@material-ui/core/TextField'; import FormControl from '@material-ui/core/FormControl'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { '& > *': { margin: theme.spacing(1), @@ -22,7 +22,7 @@ function TextMaskCustom(props) { return ( { + ref={(ref) => { inputRef(ref ? ref.inputElement : null); }} mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]} @@ -43,7 +43,7 @@ function NumberFormatCustom(props) { { + onValueChange={(values) => { onChange({ target: { value: values.value, @@ -69,7 +69,7 @@ export default function FormattedInputs() { numberformat: '1320', }); - const handleChange = event => { + const handleChange = (event) => { setValues({ ...values, [event.target.name]: event.target.value, diff --git a/docs/src/pages/components/text-fields/FormattedInputs.tsx b/docs/src/pages/components/text-fields/FormattedInputs.tsx index d0abcfc26d840d..4738bf44aaf657 100644 --- a/docs/src/pages/components/text-fields/FormattedInputs.tsx +++ b/docs/src/pages/components/text-fields/FormattedInputs.tsx @@ -49,7 +49,7 @@ function NumberFormatCustom(props: NumberFormatCustomProps) { { + onValueChange={(values) => { onChange({ target: { value: values.value, diff --git a/docs/src/pages/components/text-fields/InputAdornments.js b/docs/src/pages/components/text-fields/InputAdornments.js index 53b16c03573160..9b12237971a460 100644 --- a/docs/src/pages/components/text-fields/InputAdornments.js +++ b/docs/src/pages/components/text-fields/InputAdornments.js @@ -13,7 +13,7 @@ import TextField from '@material-ui/core/TextField'; import Visibility from '@material-ui/icons/Visibility'; import VisibilityOff from '@material-ui/icons/VisibilityOff'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', flexWrap: 'wrap', @@ -39,7 +39,7 @@ export default function InputAdornments() { showPassword: false, }); - const handleChange = prop => event => { + const handleChange = (prop) => (event) => { setValues({ ...values, [prop]: event.target.value }); }; @@ -47,7 +47,7 @@ export default function InputAdornments() { setValues({ ...values, showPassword: !values.showPassword }); }; - const handleMouseDownPassword = event => { + const handleMouseDownPassword = (event) => { event.preventDefault(); }; diff --git a/docs/src/pages/components/text-fields/InputWithIcon.js b/docs/src/pages/components/text-fields/InputWithIcon.js index 0d7d0811a58dad..9c1b1e53046365 100644 --- a/docs/src/pages/components/text-fields/InputWithIcon.js +++ b/docs/src/pages/components/text-fields/InputWithIcon.js @@ -8,7 +8,7 @@ import TextField from '@material-ui/core/TextField'; import Grid from '@material-ui/core/Grid'; import AccountCircle from '@material-ui/icons/AccountCircle'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ margin: { margin: theme.spacing(1), }, diff --git a/docs/src/pages/components/text-fields/Inputs.js b/docs/src/pages/components/text-fields/Inputs.js index 5b7935c67083ca..83d19d24a9d7dd 100644 --- a/docs/src/pages/components/text-fields/Inputs.js +++ b/docs/src/pages/components/text-fields/Inputs.js @@ -2,7 +2,7 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Input from '@material-ui/core/Input'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { '& > *': { margin: theme.spacing(1), diff --git a/docs/src/pages/components/text-fields/LayoutTextFields.js b/docs/src/pages/components/text-fields/LayoutTextFields.js index 51d5e6b0ad9116..b2307dbc31fdd6 100644 --- a/docs/src/pages/components/text-fields/LayoutTextFields.js +++ b/docs/src/pages/components/text-fields/LayoutTextFields.js @@ -2,7 +2,7 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import TextField from '@material-ui/core/TextField'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', flexWrap: 'wrap', diff --git a/docs/src/pages/components/text-fields/MultilineTextFields.js b/docs/src/pages/components/text-fields/MultilineTextFields.js index 3f3f7a695e8123..f060867fb2ca0e 100644 --- a/docs/src/pages/components/text-fields/MultilineTextFields.js +++ b/docs/src/pages/components/text-fields/MultilineTextFields.js @@ -2,7 +2,7 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import TextField from '@material-ui/core/TextField'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { '& .MuiTextField-root': { margin: theme.spacing(1), @@ -15,7 +15,7 @@ export default function MultilineTextFields() { const classes = useStyles(); const [value, setValue] = React.useState('Controlled'); - const handleChange = event => { + const handleChange = (event) => { setValue(event.target.value); }; diff --git a/docs/src/pages/components/text-fields/SelectTextFields.js b/docs/src/pages/components/text-fields/SelectTextFields.js index 7f214a6d1465d5..b1b5fd9d55fe04 100644 --- a/docs/src/pages/components/text-fields/SelectTextFields.js +++ b/docs/src/pages/components/text-fields/SelectTextFields.js @@ -22,7 +22,7 @@ const currencies = [ }, ]; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { '& .MuiTextField-root': { margin: theme.spacing(1), @@ -35,7 +35,7 @@ export default function MultilineTextFields() { const classes = useStyles(); const [currency, setCurrency] = React.useState('EUR'); - const handleChange = event => { + const handleChange = (event) => { setCurrency(event.target.value); }; @@ -50,7 +50,7 @@ export default function MultilineTextFields() { onChange={handleChange} helperText="Please select your currency" > - {currencies.map(option => ( + {currencies.map((option) => ( {option.label} @@ -67,7 +67,7 @@ export default function MultilineTextFields() { }} helperText="Please select your currency" > - {currencies.map(option => ( + {currencies.map((option) => ( @@ -84,7 +84,7 @@ export default function MultilineTextFields() { helperText="Please select your currency" variant="filled" > - {currencies.map(option => ( + {currencies.map((option) => ( {option.label} @@ -102,7 +102,7 @@ export default function MultilineTextFields() { helperText="Please select your currency" variant="filled" > - {currencies.map(option => ( + {currencies.map((option) => ( @@ -119,7 +119,7 @@ export default function MultilineTextFields() { helperText="Please select your currency" variant="outlined" > - {currencies.map(option => ( + {currencies.map((option) => ( {option.label} @@ -137,7 +137,7 @@ export default function MultilineTextFields() { helperText="Please select your currency" variant="outlined" > - {currencies.map(option => ( + {currencies.map((option) => ( diff --git a/docs/src/pages/components/text-fields/SelectTextFields.tsx b/docs/src/pages/components/text-fields/SelectTextFields.tsx index 9f3e6c86ee2ecc..8c8612bfd6aa44 100644 --- a/docs/src/pages/components/text-fields/SelectTextFields.tsx +++ b/docs/src/pages/components/text-fields/SelectTextFields.tsx @@ -52,7 +52,7 @@ export default function MultilineTextFields() { onChange={handleChange} helperText="Please select your currency" > - {currencies.map(option => ( + {currencies.map((option) => ( {option.label} @@ -69,7 +69,7 @@ export default function MultilineTextFields() { }} helperText="Please select your currency" > - {currencies.map(option => ( + {currencies.map((option) => ( @@ -86,7 +86,7 @@ export default function MultilineTextFields() { helperText="Please select your currency" variant="filled" > - {currencies.map(option => ( + {currencies.map((option) => ( {option.label} @@ -104,7 +104,7 @@ export default function MultilineTextFields() { helperText="Please select your currency" variant="filled" > - {currencies.map(option => ( + {currencies.map((option) => ( @@ -121,7 +121,7 @@ export default function MultilineTextFields() { helperText="Please select your currency" variant="outlined" > - {currencies.map(option => ( + {currencies.map((option) => ( {option.label} @@ -139,7 +139,7 @@ export default function MultilineTextFields() { helperText="Please select your currency" variant="outlined" > - {currencies.map(option => ( + {currencies.map((option) => ( diff --git a/docs/src/pages/components/text-fields/StateTextFields.js b/docs/src/pages/components/text-fields/StateTextFields.js index c04cf7077b2117..3b2e7dc2ecab3e 100644 --- a/docs/src/pages/components/text-fields/StateTextFields.js +++ b/docs/src/pages/components/text-fields/StateTextFields.js @@ -2,7 +2,7 @@ import React from 'react'; import TextField from '@material-ui/core/TextField'; import { makeStyles } from '@material-ui/core/styles'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { '& .MuiTextField-root': { margin: theme.spacing(1), @@ -14,7 +14,7 @@ const useStyles = makeStyles(theme => ({ export default function StateTextFields() { const classes = useStyles(); const [name, setName] = React.useState('Cat in the Hat'); - const handleChange = event => { + const handleChange = (event) => { setName(event.target.value); }; diff --git a/docs/src/pages/components/text-fields/TextFieldSizes.js b/docs/src/pages/components/text-fields/TextFieldSizes.js index f94ac31c91c4c8..7dc8afaf17a916 100644 --- a/docs/src/pages/components/text-fields/TextFieldSizes.js +++ b/docs/src/pages/components/text-fields/TextFieldSizes.js @@ -2,7 +2,7 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import TextField from '@material-ui/core/TextField'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { '& .MuiTextField-root': { margin: theme.spacing(1), diff --git a/docs/src/pages/components/text-fields/ValidationTextFields.js b/docs/src/pages/components/text-fields/ValidationTextFields.js index ea72d1f0b43da0..b52d7e6770887a 100644 --- a/docs/src/pages/components/text-fields/ValidationTextFields.js +++ b/docs/src/pages/components/text-fields/ValidationTextFields.js @@ -2,7 +2,7 @@ import React from 'react'; import TextField from '@material-ui/core/TextField'; import { makeStyles } from '@material-ui/core/styles'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { '& .MuiTextField-root': { margin: theme.spacing(1), diff --git a/docs/src/pages/components/toggle-button/CustomizedDividers.js b/docs/src/pages/components/toggle-button/CustomizedDividers.js index 2bda6e3fccaf2f..cd2481cb9e84ad 100644 --- a/docs/src/pages/components/toggle-button/CustomizedDividers.js +++ b/docs/src/pages/components/toggle-button/CustomizedDividers.js @@ -14,7 +14,7 @@ import Paper from '@material-ui/core/Paper'; import ToggleButton from '@material-ui/lab/ToggleButton'; import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ paper: { display: 'flex', border: `1px solid ${theme.palette.divider}`, @@ -27,7 +27,7 @@ const useStyles = makeStyles(theme => ({ }, })); -const StyledToggleButtonGroup = withStyles(theme => ({ +const StyledToggleButtonGroup = withStyles((theme) => ({ grouped: { margin: theme.spacing(0.5), border: 'none', diff --git a/docs/src/pages/components/toggle-button/CustomizedDividers.tsx b/docs/src/pages/components/toggle-button/CustomizedDividers.tsx index a50bf317966ab3..88455af838e000 100644 --- a/docs/src/pages/components/toggle-button/CustomizedDividers.tsx +++ b/docs/src/pages/components/toggle-button/CustomizedDividers.tsx @@ -29,7 +29,7 @@ const useStyles = makeStyles((theme: Theme) => }), ); -const StyledToggleButtonGroup = withStyles(theme => ({ +const StyledToggleButtonGroup = withStyles((theme) => ({ grouped: { margin: theme.spacing(0.5), border: 'none', diff --git a/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js b/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js index 2e89be3feb47d1..b01e16caf8ff3f 100644 --- a/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js +++ b/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js @@ -11,7 +11,7 @@ import Grid from '@material-ui/core/Grid'; import ToggleButton from '@material-ui/lab/ToggleButton'; import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ toggleContainer: { margin: theme.spacing(2, 0), }, diff --git a/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.tsx b/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.tsx index 84d4f742cfef01..a5eb1f14acf7fa 100644 --- a/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.tsx +++ b/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.tsx @@ -11,7 +11,7 @@ import Grid from '@material-ui/core/Grid'; import ToggleButton from '@material-ui/lab/ToggleButton'; import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ toggleContainer: { margin: theme.spacing(2, 0), }, diff --git a/docs/src/pages/components/toggle-button/ToggleButtons.js b/docs/src/pages/components/toggle-button/ToggleButtons.js index 7f9aa624841ad3..fbf339f2cd74a6 100644 --- a/docs/src/pages/components/toggle-button/ToggleButtons.js +++ b/docs/src/pages/components/toggle-button/ToggleButtons.js @@ -14,7 +14,7 @@ import Grid from '@material-ui/core/Grid'; import ToggleButton from '@material-ui/lab/ToggleButton'; import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ toggleContainer: { margin: theme.spacing(2, 0), }, diff --git a/docs/src/pages/components/toggle-button/ToggleButtons.tsx b/docs/src/pages/components/toggle-button/ToggleButtons.tsx index 909552f11abd2b..1bde4550a03cc5 100644 --- a/docs/src/pages/components/toggle-button/ToggleButtons.tsx +++ b/docs/src/pages/components/toggle-button/ToggleButtons.tsx @@ -14,7 +14,7 @@ import Grid from '@material-ui/core/Grid'; import ToggleButton from '@material-ui/lab/ToggleButton'; import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ toggleContainer: { margin: theme.spacing(2, 0), }, diff --git a/docs/src/pages/components/tooltips/CustomizedTooltips.js b/docs/src/pages/components/tooltips/CustomizedTooltips.js index 3ab92ce2bb8cc3..9e7b52783c6ce9 100644 --- a/docs/src/pages/components/tooltips/CustomizedTooltips.js +++ b/docs/src/pages/components/tooltips/CustomizedTooltips.js @@ -4,7 +4,7 @@ import Button from '@material-ui/core/Button'; import Tooltip from '@material-ui/core/Tooltip'; import Typography from '@material-ui/core/Typography'; -const LightTooltip = withStyles(theme => ({ +const LightTooltip = withStyles((theme) => ({ tooltip: { backgroundColor: theme.palette.common.white, color: 'rgba(0, 0, 0, 0.87)', @@ -13,7 +13,7 @@ const LightTooltip = withStyles(theme => ({ }, }))(Tooltip); -const useStylesBootstrap = makeStyles(theme => ({ +const useStylesBootstrap = makeStyles((theme) => ({ arrow: { color: theme.palette.common.black, }, @@ -28,7 +28,7 @@ function BootstrapTooltip(props) { return ; } -const HtmlTooltip = withStyles(theme => ({ +const HtmlTooltip = withStyles((theme) => ({ tooltip: { backgroundColor: '#f5f5f9', color: 'rgba(0, 0, 0, 0.87)', diff --git a/docs/src/pages/components/tooltips/SimpleTooltips.js b/docs/src/pages/components/tooltips/SimpleTooltips.js index b999ad408adb29..b0ff6b72d1a4ec 100644 --- a/docs/src/pages/components/tooltips/SimpleTooltips.js +++ b/docs/src/pages/components/tooltips/SimpleTooltips.js @@ -6,7 +6,7 @@ import DeleteIcon from '@material-ui/icons/Delete'; import IconButton from '@material-ui/core/IconButton'; import Tooltip from '@material-ui/core/Tooltip'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ fab: { margin: theme.spacing(2), }, diff --git a/docs/src/pages/components/tooltips/VariableWidth.js b/docs/src/pages/components/tooltips/VariableWidth.js index ac24a5e5c6bb2d..d608f91e6c562b 100644 --- a/docs/src/pages/components/tooltips/VariableWidth.js +++ b/docs/src/pages/components/tooltips/VariableWidth.js @@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import Tooltip from '@material-ui/core/Tooltip'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ button: { margin: theme.spacing(1), }, diff --git a/docs/src/pages/components/transfer-list/SelectAllTransferList.js b/docs/src/pages/components/transfer-list/SelectAllTransferList.js index 4e783e905db566..80251070eecb87 100644 --- a/docs/src/pages/components/transfer-list/SelectAllTransferList.js +++ b/docs/src/pages/components/transfer-list/SelectAllTransferList.js @@ -11,7 +11,7 @@ import Checkbox from '@material-ui/core/Checkbox'; import Button from '@material-ui/core/Button'; import Divider from '@material-ui/core/Divider'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { margin: 'auto', }, @@ -30,11 +30,11 @@ const useStyles = makeStyles(theme => ({ })); function not(a, b) { - return a.filter(value => b.indexOf(value) === -1); + return a.filter((value) => b.indexOf(value) === -1); } function intersection(a, b) { - return a.filter(value => b.indexOf(value) !== -1); + return a.filter((value) => b.indexOf(value) !== -1); } function union(a, b) { @@ -50,7 +50,7 @@ export default function TransferList() { const leftChecked = intersection(checked, left); const rightChecked = intersection(checked, right); - const handleToggle = value => () => { + const handleToggle = (value) => () => { const currentIndex = checked.indexOf(value); const newChecked = [...checked]; @@ -63,9 +63,9 @@ export default function TransferList() { setChecked(newChecked); }; - const numberOfChecked = items => intersection(checked, items).length; + const numberOfChecked = (items) => intersection(checked, items).length; - const handleToggleAll = items => () => { + const handleToggleAll = (items) => () => { if (numberOfChecked(items) === items.length) { setChecked(not(checked, items)); } else { @@ -103,7 +103,7 @@ export default function TransferList() { /> - {items.map(value => { + {items.map((value) => { const labelId = `transfer-list-all-item-${value}-label`; return ( diff --git a/docs/src/pages/components/transfer-list/SelectAllTransferList.tsx b/docs/src/pages/components/transfer-list/SelectAllTransferList.tsx index 73f0330151f600..d6ab306d6c48ef 100644 --- a/docs/src/pages/components/transfer-list/SelectAllTransferList.tsx +++ b/docs/src/pages/components/transfer-list/SelectAllTransferList.tsx @@ -32,11 +32,11 @@ const useStyles = makeStyles((theme: Theme) => ); function not(a: number[], b: number[]) { - return a.filter(value => b.indexOf(value) === -1); + return a.filter((value) => b.indexOf(value) === -1); } function intersection(a: number[], b: number[]) { - return a.filter(value => b.indexOf(value) !== -1); + return a.filter((value) => b.indexOf(value) !== -1); } function union(a: number[], b: number[]) { diff --git a/docs/src/pages/components/transfer-list/TransferList.js b/docs/src/pages/components/transfer-list/TransferList.js index 2f20fd885f45b2..be5282befdd64a 100644 --- a/docs/src/pages/components/transfer-list/TransferList.js +++ b/docs/src/pages/components/transfer-list/TransferList.js @@ -9,7 +9,7 @@ import Checkbox from '@material-ui/core/Checkbox'; import Button from '@material-ui/core/Button'; import Paper from '@material-ui/core/Paper'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { margin: 'auto', }, @@ -24,11 +24,11 @@ const useStyles = makeStyles(theme => ({ })); function not(a, b) { - return a.filter(value => b.indexOf(value) === -1); + return a.filter((value) => b.indexOf(value) === -1); } function intersection(a, b) { - return a.filter(value => b.indexOf(value) !== -1); + return a.filter((value) => b.indexOf(value) !== -1); } export default function TransferList() { @@ -40,7 +40,7 @@ export default function TransferList() { const leftChecked = intersection(checked, left); const rightChecked = intersection(checked, right); - const handleToggle = value => () => { + const handleToggle = (value) => () => { const currentIndex = checked.indexOf(value); const newChecked = [...checked]; @@ -75,10 +75,10 @@ export default function TransferList() { setRight([]); }; - const customList = items => ( + const customList = (items) => ( - {items.map(value => { + {items.map((value) => { const labelId = `transfer-list-item-${value}-label`; return ( diff --git a/docs/src/pages/components/transfer-list/TransferList.tsx b/docs/src/pages/components/transfer-list/TransferList.tsx index 2edd70b1c1d065..30a6e6fcef9386 100644 --- a/docs/src/pages/components/transfer-list/TransferList.tsx +++ b/docs/src/pages/components/transfer-list/TransferList.tsx @@ -26,11 +26,11 @@ const useStyles = makeStyles((theme: Theme) => ); function not(a: number[], b: number[]) { - return a.filter(value => b.indexOf(value) === -1); + return a.filter((value) => b.indexOf(value) === -1); } function intersection(a: number[], b: number[]) { - return a.filter(value => b.indexOf(value) !== -1); + return a.filter((value) => b.indexOf(value) !== -1); } export default function TransferList() { diff --git a/docs/src/pages/components/transitions/SimpleCollapse.js b/docs/src/pages/components/transitions/SimpleCollapse.js index aef64f14308cd6..2f4a59c4989e49 100644 --- a/docs/src/pages/components/transitions/SimpleCollapse.js +++ b/docs/src/pages/components/transitions/SimpleCollapse.js @@ -5,7 +5,7 @@ import Paper from '@material-ui/core/Paper'; import Collapse from '@material-ui/core/Collapse'; import FormControlLabel from '@material-ui/core/FormControlLabel'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { height: 180, }, @@ -31,7 +31,7 @@ export default function SimpleCollapse() { const [checked, setChecked] = React.useState(false); const handleChange = () => { - setChecked(prev => !prev); + setChecked((prev) => !prev); }; return ( diff --git a/docs/src/pages/components/transitions/SimpleCollapse.tsx b/docs/src/pages/components/transitions/SimpleCollapse.tsx index 4ffffe215e22a0..65eb578e009971 100644 --- a/docs/src/pages/components/transitions/SimpleCollapse.tsx +++ b/docs/src/pages/components/transitions/SimpleCollapse.tsx @@ -33,7 +33,7 @@ export default function SimpleCollapse() { const [checked, setChecked] = React.useState(false); const handleChange = () => { - setChecked(prev => !prev); + setChecked((prev) => !prev); }; return ( diff --git a/docs/src/pages/components/transitions/SimpleFade.js b/docs/src/pages/components/transitions/SimpleFade.js index 88fb74a8c30030..ede6c30ca25508 100644 --- a/docs/src/pages/components/transitions/SimpleFade.js +++ b/docs/src/pages/components/transitions/SimpleFade.js @@ -5,7 +5,7 @@ import Paper from '@material-ui/core/Paper'; import Fade from '@material-ui/core/Fade'; import FormControlLabel from '@material-ui/core/FormControlLabel'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { height: 180, }, @@ -31,7 +31,7 @@ export default function SimpleFade() { const [checked, setChecked] = React.useState(false); const handleChange = () => { - setChecked(prev => !prev); + setChecked((prev) => !prev); }; return ( diff --git a/docs/src/pages/components/transitions/SimpleFade.tsx b/docs/src/pages/components/transitions/SimpleFade.tsx index ceb626bc5cffa0..d26d2757d9cf06 100644 --- a/docs/src/pages/components/transitions/SimpleFade.tsx +++ b/docs/src/pages/components/transitions/SimpleFade.tsx @@ -33,7 +33,7 @@ export default function SimpleFade() { const [checked, setChecked] = React.useState(false); const handleChange = () => { - setChecked(prev => !prev); + setChecked((prev) => !prev); }; return ( diff --git a/docs/src/pages/components/transitions/SimpleGrow.js b/docs/src/pages/components/transitions/SimpleGrow.js index 33bf826bf4846a..f92492973b1a31 100644 --- a/docs/src/pages/components/transitions/SimpleGrow.js +++ b/docs/src/pages/components/transitions/SimpleGrow.js @@ -5,7 +5,7 @@ import Paper from '@material-ui/core/Paper'; import Grow from '@material-ui/core/Grow'; import FormControlLabel from '@material-ui/core/FormControlLabel'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { height: 180, }, @@ -31,7 +31,7 @@ export default function SimpleGrow() { const [checked, setChecked] = React.useState(false); const handleChange = () => { - setChecked(prev => !prev); + setChecked((prev) => !prev); }; return ( diff --git a/docs/src/pages/components/transitions/SimpleGrow.tsx b/docs/src/pages/components/transitions/SimpleGrow.tsx index 6f9598cbfaa175..deada717a3af07 100644 --- a/docs/src/pages/components/transitions/SimpleGrow.tsx +++ b/docs/src/pages/components/transitions/SimpleGrow.tsx @@ -33,7 +33,7 @@ export default function SimpleGrow() { const [checked, setChecked] = React.useState(false); const handleChange = () => { - setChecked(prev => !prev); + setChecked((prev) => !prev); }; return ( diff --git a/docs/src/pages/components/transitions/SimpleSlide.js b/docs/src/pages/components/transitions/SimpleSlide.js index 42cb85a5e3ff20..70bc6ef7b27e44 100644 --- a/docs/src/pages/components/transitions/SimpleSlide.js +++ b/docs/src/pages/components/transitions/SimpleSlide.js @@ -5,7 +5,7 @@ import Slide from '@material-ui/core/Slide'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import { makeStyles } from '@material-ui/core/styles'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { height: 180, }, @@ -33,7 +33,7 @@ export default function SimpleSlide() { const [checked, setChecked] = React.useState(false); const handleChange = () => { - setChecked(prev => !prev); + setChecked((prev) => !prev); }; return ( diff --git a/docs/src/pages/components/transitions/SimpleSlide.tsx b/docs/src/pages/components/transitions/SimpleSlide.tsx index d84879d098d887..3b3df65ddb8f8c 100644 --- a/docs/src/pages/components/transitions/SimpleSlide.tsx +++ b/docs/src/pages/components/transitions/SimpleSlide.tsx @@ -35,7 +35,7 @@ export default function SimpleSlide() { const [checked, setChecked] = React.useState(false); const handleChange = () => { - setChecked(prev => !prev); + setChecked((prev) => !prev); }; return ( diff --git a/docs/src/pages/components/transitions/SimpleZoom.js b/docs/src/pages/components/transitions/SimpleZoom.js index 4a109ba353e203..04862fb571dd7b 100644 --- a/docs/src/pages/components/transitions/SimpleZoom.js +++ b/docs/src/pages/components/transitions/SimpleZoom.js @@ -5,7 +5,7 @@ import Zoom from '@material-ui/core/Zoom'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import { makeStyles } from '@material-ui/core/styles'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { height: 180, }, @@ -31,7 +31,7 @@ export default function SimpleZoom() { const [checked, setChecked] = React.useState(false); const handleChange = () => { - setChecked(prev => !prev); + setChecked((prev) => !prev); }; return ( diff --git a/docs/src/pages/components/transitions/SimpleZoom.tsx b/docs/src/pages/components/transitions/SimpleZoom.tsx index 64e9a9a3c83675..a5b7fac8792660 100644 --- a/docs/src/pages/components/transitions/SimpleZoom.tsx +++ b/docs/src/pages/components/transitions/SimpleZoom.tsx @@ -33,7 +33,7 @@ export default function SimpleZoom() { const [checked, setChecked] = React.useState(false); const handleChange = () => { - setChecked(prev => !prev); + setChecked((prev) => !prev); }; return ( diff --git a/docs/src/pages/components/tree-view/CustomizedTreeView.js b/docs/src/pages/components/tree-view/CustomizedTreeView.js index 82c5a6a7fdb389..ee10f7ca2338a7 100644 --- a/docs/src/pages/components/tree-view/CustomizedTreeView.js +++ b/docs/src/pages/components/tree-view/CustomizedTreeView.js @@ -54,7 +54,7 @@ TransitionComponent.propTypes = { in: PropTypes.bool, }; -const StyledTreeItem = withStyles(theme => ({ +const StyledTreeItem = withStyles((theme) => ({ iconContainer: { '& .close': { opacity: 0.3, @@ -65,7 +65,7 @@ const StyledTreeItem = withStyles(theme => ({ paddingLeft: 18, borderLeft: `1px dashed ${fade(theme.palette.text.primary, 0.4)}`, }, -}))(props => ); +}))((props) => ); const useStyles = makeStyles({ root: { diff --git a/docs/src/pages/components/tree-view/GmailTreeView.js b/docs/src/pages/components/tree-view/GmailTreeView.js index 219cd86df796b9..19d1101bf3d1b5 100644 --- a/docs/src/pages/components/tree-view/GmailTreeView.js +++ b/docs/src/pages/components/tree-view/GmailTreeView.js @@ -14,7 +14,7 @@ import LocalOfferIcon from '@material-ui/icons/LocalOffer'; import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'; import ArrowRightIcon from '@material-ui/icons/ArrowRight'; -const useTreeItemStyles = makeStyles(theme => ({ +const useTreeItemStyles = makeStyles((theme) => ({ root: { color: theme.palette.text.secondary, '&:hover > $content': { diff --git a/docs/src/pages/components/tree-view/RecursiveTreeView.js b/docs/src/pages/components/tree-view/RecursiveTreeView.js index 537e43a47cbe56..10583dac060082 100644 --- a/docs/src/pages/components/tree-view/RecursiveTreeView.js +++ b/docs/src/pages/components/tree-view/RecursiveTreeView.js @@ -37,9 +37,9 @@ const useStyles = makeStyles({ export default function RecursiveTreeView() { const classes = useStyles(); - const renderTree = nodes => ( + const renderTree = (nodes) => ( - {Array.isArray(nodes.children) ? nodes.children.map(node => renderTree(node)) : null} + {Array.isArray(nodes.children) ? nodes.children.map((node) => renderTree(node)) : null} ); diff --git a/docs/src/pages/components/tree-view/RecursiveTreeView.tsx b/docs/src/pages/components/tree-view/RecursiveTreeView.tsx index afcb4c6b291667..7ed8e6ba98c074 100644 --- a/docs/src/pages/components/tree-view/RecursiveTreeView.tsx +++ b/docs/src/pages/components/tree-view/RecursiveTreeView.tsx @@ -45,7 +45,7 @@ export default function RecursiveTreeView() { const renderTree = (nodes: RenderTree) => ( - {Array.isArray(nodes.children) ? nodes.children.map(node => renderTree(node)) : null} + {Array.isArray(nodes.children) ? nodes.children.map((node) => renderTree(node)) : null} ); diff --git a/docs/src/pages/components/typography/TypographyTheme.js b/docs/src/pages/components/typography/TypographyTheme.js index 9bfb9d827730b0..a78b985e28abee 100644 --- a/docs/src/pages/components/typography/TypographyTheme.js +++ b/docs/src/pages/components/typography/TypographyTheme.js @@ -1,7 +1,7 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { ...theme.typography.button, backgroundColor: theme.palette.background.paper, diff --git a/docs/src/pages/components/use-media-query/ServerSide.js b/docs/src/pages/components/use-media-query/ServerSide.js index a618604e769102..26c0b1a19710e6 100644 --- a/docs/src/pages/components/use-media-query/ServerSide.js +++ b/docs/src/pages/components/use-media-query/ServerSide.js @@ -10,7 +10,7 @@ function MyComponent() { } export default function ServerSide() { - const ssrMatchMedia = query => ({ + const ssrMatchMedia = (query) => ({ matches: mediaQuery.match(query, { // The estimated CSS width of the browser. width: 800, diff --git a/docs/src/pages/css-in-js/basics/AdaptingHook.js b/docs/src/pages/css-in-js/basics/AdaptingHook.js index f79872145bf7ad..5ca06dc39a276a 100644 --- a/docs/src/pages/css-in-js/basics/AdaptingHook.js +++ b/docs/src/pages/css-in-js/basics/AdaptingHook.js @@ -5,13 +5,13 @@ import Button from '@material-ui/core/Button'; const useStyles = makeStyles({ root: { - background: props => + background: (props) => props.color === 'red' ? 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)' : 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)', border: 0, borderRadius: 3, - boxShadow: props => + boxShadow: (props) => props.color === 'red' ? '0 3px 5px 2px rgba(255, 105, 135, .3)' : '0 3px 5px 2px rgba(33, 203, 243, .3)', diff --git a/docs/src/pages/css-in-js/basics/AdaptingStyledComponents.js b/docs/src/pages/css-in-js/basics/AdaptingStyledComponents.js index dba62e99eea47b..a96a8c27755b5c 100644 --- a/docs/src/pages/css-in-js/basics/AdaptingStyledComponents.js +++ b/docs/src/pages/css-in-js/basics/AdaptingStyledComponents.js @@ -3,13 +3,13 @@ import { styled } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; const MyButton = styled(({ color, ...other }) =>
    - {LANGUAGES_LABEL.map(language => ( + {LANGUAGES_LABEL.map((language) => ( {language.text} diff --git a/docs/src/pages/discover-more/showcase/Showcase.js b/docs/src/pages/discover-more/showcase/Showcase.js index d78949d2c794a9..0528ef84312048 100644 --- a/docs/src/pages/discover-more/showcase/Showcase.js +++ b/docs/src/pages/discover-more/showcase/Showcase.js @@ -14,7 +14,7 @@ import GitHubIcon from '@material-ui/icons/GitHub'; import Link from 'docs/src/modules/components/Link'; import appList from './appList'; -const styles = theme => ({ +const styles = (theme) => ({ root: { flexGrow: 1, }, @@ -45,7 +45,7 @@ function stableSort(array, cmp) { if (order !== 0) return order; return a[1] - b[1]; }); - return stabilizedThis.map(el => el[0]); + return stabilizedThis.map((el) => el[0]); } // Returns a function that sorts reverse numerically by value of `key` @@ -71,9 +71,9 @@ function Showcase(props) { const { classes } = props; const [sortFunctionName, setSortFunctionName] = React.useState('dateAdded'); const sortFunction = sortFunctions[sortFunctionName]; - const t = useSelector(state => state.options.t); + const t = useSelector((state) => state.options.t); - const handleChangeSort = event => { + const handleChangeSort = (event) => { setSortFunctionName(event.target.value); }; @@ -88,9 +88,9 @@ function Showcase(props) { {stableSort( - appList.filter(item => item[sortFunctionName] !== undefined), + appList.filter((item) => item[sortFunctionName] !== undefined), sortFunction, - ).map(app => ( + ).map((app) => (
    {app.title} diff --git a/docs/src/pages/discover-more/team/Team.js b/docs/src/pages/discover-more/team/Team.js index 65fe37899e758b..afef76563d632a 100644 --- a/docs/src/pages/discover-more/team/Team.js +++ b/docs/src/pages/discover-more/team/Team.js @@ -107,7 +107,7 @@ const partners = [ }, ]; -const styles = theme => ({ +const styles = (theme) => ({ details: { margin: theme.spacing(1, 1, 1, 0), }, @@ -137,7 +137,7 @@ function Group(props) { {description} - {members.map(member => ( + {members.map((member) => ( diff --git a/docs/src/pages/getting-started/templates/Templates.js b/docs/src/pages/getting-started/templates/Templates.js index 0a84bc87a1e408..55b324a8d06f98 100644 --- a/docs/src/pages/getting-started/templates/Templates.js +++ b/docs/src/pages/getting-started/templates/Templates.js @@ -108,11 +108,11 @@ function layouts(t) { function Templates(props) { const { classes } = props; - const t = useSelector(state => state.options.t); + const t = useSelector((state) => state.options.t); return ( - {layouts(t).map(layout => ( + {layouts(t).map((layout) => ( ({ +const useStyles = makeStyles((theme) => ({ icon: { marginRight: theme.spacing(2), }, @@ -106,7 +106,7 @@ export default function Album() { {/* End hero unit */} - {cards.map(card => ( + {cards.map((card) => ( ({ +const useStyles = makeStyles((theme) => ({ mainGrid: { marginTop: theme.spacing(3), }, @@ -100,7 +100,7 @@ export default function Blog() {
    - {featuredPosts.map(post => ( + {featuredPosts.map((post) => ( ))} diff --git a/docs/src/pages/getting-started/templates/blog/Footer.js b/docs/src/pages/getting-started/templates/blog/Footer.js index 7064c4c9c78a50..3a3990e1b5f028 100644 --- a/docs/src/pages/getting-started/templates/blog/Footer.js +++ b/docs/src/pages/getting-started/templates/blog/Footer.js @@ -18,7 +18,7 @@ function Copyright() { ); } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ footer: { backgroundColor: theme.palette.background.paper, // marginTop: theme.spacing(8), diff --git a/docs/src/pages/getting-started/templates/blog/Header.js b/docs/src/pages/getting-started/templates/blog/Header.js index 898a38006cd995..634f0544b26a33 100644 --- a/docs/src/pages/getting-started/templates/blog/Header.js +++ b/docs/src/pages/getting-started/templates/blog/Header.js @@ -8,7 +8,7 @@ import SearchIcon from '@material-ui/icons/Search'; import Typography from '@material-ui/core/Typography'; import Link from '@material-ui/core/Link'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ toolbar: { borderBottom: `1px solid ${theme.palette.divider}`, }, @@ -51,7 +51,7 @@ export default function Header(props) { - {sections.map(section => ( + {sections.map((section) => ( ({ +const useStyles = makeStyles((theme) => ({ markdown: { ...theme.typography.body2, padding: theme.spacing(3, 0), @@ -23,7 +23,7 @@ export default function Main(props) { {title} - {posts.map(post => ( + {posts.map((post) => ( {post} diff --git a/docs/src/pages/getting-started/templates/blog/MainFeaturedPost.js b/docs/src/pages/getting-started/templates/blog/MainFeaturedPost.js index ec8406bcc7deae..b325d91d9f8247 100644 --- a/docs/src/pages/getting-started/templates/blog/MainFeaturedPost.js +++ b/docs/src/pages/getting-started/templates/blog/MainFeaturedPost.js @@ -6,7 +6,7 @@ import Typography from '@material-ui/core/Typography'; import Grid from '@material-ui/core/Grid'; import Link from '@material-ui/core/Link'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ mainFeaturedPost: { position: 'relative', backgroundColor: theme.palette.grey[800], diff --git a/docs/src/pages/getting-started/templates/blog/Markdown.js b/docs/src/pages/getting-started/templates/blog/Markdown.js index 4ad95951cd01fe..ae2fe4ee5b1f3e 100644 --- a/docs/src/pages/getting-started/templates/blog/Markdown.js +++ b/docs/src/pages/getting-started/templates/blog/Markdown.js @@ -4,7 +4,7 @@ import { withStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import Link from '@material-ui/core/Link'; -const styles = theme => ({ +const styles = (theme) => ({ listItem: { marginTop: theme.spacing(1), }, diff --git a/docs/src/pages/getting-started/templates/blog/Sidebar.js b/docs/src/pages/getting-started/templates/blog/Sidebar.js index 57bf4c7fc83f40..ade1f04f0e457f 100644 --- a/docs/src/pages/getting-started/templates/blog/Sidebar.js +++ b/docs/src/pages/getting-started/templates/blog/Sidebar.js @@ -6,7 +6,7 @@ import Paper from '@material-ui/core/Paper'; import Typography from '@material-ui/core/Typography'; import Link from '@material-ui/core/Link'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ sidebarAboutBox: { padding: theme.spacing(2), backgroundColor: theme.palette.grey[200], @@ -31,7 +31,7 @@ export default function Sidebar(props) { Archives - {archives.map(archive => ( + {archives.map((archive) => ( {archive.title} @@ -39,7 +39,7 @@ export default function Sidebar(props) { Social - {social.map(network => ( + {social.map((network) => ( diff --git a/docs/src/pages/getting-started/templates/checkout/Checkout.js b/docs/src/pages/getting-started/templates/checkout/Checkout.js index 60038326b0281c..c5f78760988451 100644 --- a/docs/src/pages/getting-started/templates/checkout/Checkout.js +++ b/docs/src/pages/getting-started/templates/checkout/Checkout.js @@ -27,7 +27,7 @@ function Copyright() { ); } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ appBar: { position: 'relative', }, @@ -107,7 +107,7 @@ export default function Checkout() { Checkout - {steps.map(label => ( + {steps.map((label) => ( {label} diff --git a/docs/src/pages/getting-started/templates/checkout/Review.js b/docs/src/pages/getting-started/templates/checkout/Review.js index a8f9d472371919..bb9c1a341d8488 100644 --- a/docs/src/pages/getting-started/templates/checkout/Review.js +++ b/docs/src/pages/getting-started/templates/checkout/Review.js @@ -21,7 +21,7 @@ const payments = [ { name: 'Expiry date', detail: '04/2024' }, ]; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ listItem: { padding: theme.spacing(1, 0), }, @@ -42,7 +42,7 @@ export default function Review() { Order summary - {products.map(product => ( + {products.map((product) => ( {product.price} @@ -68,7 +68,7 @@ export default function Review() { Payment details - {payments.map(payment => ( + {payments.map((payment) => ( {payment.name} diff --git a/docs/src/pages/getting-started/templates/dashboard/Dashboard.js b/docs/src/pages/getting-started/templates/dashboard/Dashboard.js index 40618b1af9d398..ba8baeb49b4aa8 100644 --- a/docs/src/pages/getting-started/templates/dashboard/Dashboard.js +++ b/docs/src/pages/getting-started/templates/dashboard/Dashboard.js @@ -38,7 +38,7 @@ function Copyright() { const drawerWidth = 240; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', }, diff --git a/docs/src/pages/getting-started/templates/dashboard/Orders.js b/docs/src/pages/getting-started/templates/dashboard/Orders.js index b6dff78a817640..5171cf9ea0efb0 100644 --- a/docs/src/pages/getting-started/templates/dashboard/Orders.js +++ b/docs/src/pages/getting-started/templates/dashboard/Orders.js @@ -25,7 +25,7 @@ function preventDefault(event) { event.preventDefault(); } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ seeMore: { marginTop: theme.spacing(3), }, @@ -47,7 +47,7 @@ export default function Orders() { - {rows.map(row => ( + {rows.map((row) => ( {row.date} {row.name} diff --git a/docs/src/pages/getting-started/templates/pricing/Pricing.js b/docs/src/pages/getting-started/templates/pricing/Pricing.js index 7c94e9cd15f4f2..dcee983306a1ec 100644 --- a/docs/src/pages/getting-started/templates/pricing/Pricing.js +++ b/docs/src/pages/getting-started/templates/pricing/Pricing.js @@ -28,7 +28,7 @@ function Copyright() { ); } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ '@global': { ul: { margin: 0, @@ -166,7 +166,7 @@ export default function Pricing() { {/* End hero unit */} - {tiers.map(tier => ( + {tiers.map((tier) => ( // Enterprise card is full width at sm breakpoint @@ -188,7 +188,7 @@ export default function Pricing() {
      - {tier.description.map(line => ( + {tier.description.map((line) => ( {line} @@ -208,13 +208,13 @@ export default function Pricing() { {/* Footer */} - {footers.map(footer => ( + {footers.map((footer) => ( {footer.title}
        - {footer.description.map(item => ( + {footer.description.map((item) => (
      • {item} diff --git a/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js b/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js index 3b177d13abc81b..b00d45ac69e717 100644 --- a/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js +++ b/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js @@ -26,7 +26,7 @@ function Copyright() { ); } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { height: '100vh', }, diff --git a/docs/src/pages/getting-started/templates/sign-in/SignIn.js b/docs/src/pages/getting-started/templates/sign-in/SignIn.js index 4d7ed4f8ca5868..8029453a0812b7 100644 --- a/docs/src/pages/getting-started/templates/sign-in/SignIn.js +++ b/docs/src/pages/getting-started/templates/sign-in/SignIn.js @@ -26,7 +26,7 @@ function Copyright() { ); } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ paper: { marginTop: theme.spacing(8), display: 'flex', diff --git a/docs/src/pages/getting-started/templates/sign-up/SignUp.js b/docs/src/pages/getting-started/templates/sign-up/SignUp.js index ee6f7a2d127318..a8cb440ca9d365 100644 --- a/docs/src/pages/getting-started/templates/sign-up/SignUp.js +++ b/docs/src/pages/getting-started/templates/sign-up/SignUp.js @@ -26,7 +26,7 @@ function Copyright() { ); } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ paper: { marginTop: theme.spacing(8), display: 'flex', diff --git a/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.js b/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.js index 9d16ff4d317427..51d4efc246306b 100644 --- a/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.js +++ b/docs/src/pages/getting-started/templates/sticky-footer/StickyFooter.js @@ -18,7 +18,7 @@ function Copyright() { ); } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', flexDirection: 'column', diff --git a/docs/src/pages/guides/composition/Composition.js b/docs/src/pages/guides/composition/Composition.js index 069b9e9bee11b1..c07315faffb76e 100644 --- a/docs/src/pages/guides/composition/Composition.js +++ b/docs/src/pages/guides/composition/Composition.js @@ -2,7 +2,7 @@ import React from 'react'; import IconButton from '@material-ui/core/IconButton'; import Icon from '@material-ui/core/Icon'; -const WrappedIcon = props => ; +const WrappedIcon = (props) => ; WrappedIcon.muiName = 'Icon'; export default function Composition() { diff --git a/docs/src/pages/guides/interoperability/EmotionTheme.js b/docs/src/pages/guides/interoperability/EmotionTheme.js index 5b2df294f7b96b..113fec183cbf07 100644 --- a/docs/src/pages/guides/interoperability/EmotionTheme.js +++ b/docs/src/pages/guides/interoperability/EmotionTheme.js @@ -22,7 +22,7 @@ export default function EmotionTheme() {
    - {versions.map(doc => ( + {versions.map((doc) => ( diff --git a/docs/src/sw.js b/docs/src/sw.js index df6f45e4079b52..094a0c313c0456 100644 --- a/docs/src/sw.js +++ b/docs/src/sw.js @@ -13,7 +13,7 @@ workbox.core.setCacheNameDetails({ workbox.routing.registerRoute(/(\/|\.js)$/, workbox.strategies.staleWhileRevalidate()); -self.addEventListener('message', event => { +self.addEventListener('message', (event) => { switch (event.data) { case 'skipWaiting': // console.log('self.skipWaiting()'); diff --git a/examples/create-react-app/src/ProTip.js b/examples/create-react-app/src/ProTip.js index e9b38c4dbd96c0..b541be43ba54d2 100644 --- a/examples/create-react-app/src/ProTip.js +++ b/examples/create-react-app/src/ProTip.js @@ -12,7 +12,7 @@ function LightBulbIcon(props) { ); } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { margin: theme.spacing(6, 0, 3), }, diff --git a/examples/gatsby-theme/src/components/ProTip.js b/examples/gatsby-theme/src/components/ProTip.js index b8d3ba882f32fe..509ef3390f1ec2 100644 --- a/examples/gatsby-theme/src/components/ProTip.js +++ b/examples/gatsby-theme/src/components/ProTip.js @@ -12,7 +12,7 @@ function LightBulbIcon(props) { ); } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { margin: theme.spacing(6, 0, 3), }, diff --git a/examples/gatsby/src/components/ProTip.js b/examples/gatsby/src/components/ProTip.js index e9b38c4dbd96c0..b541be43ba54d2 100644 --- a/examples/gatsby/src/components/ProTip.js +++ b/examples/gatsby/src/components/ProTip.js @@ -12,7 +12,7 @@ function LightBulbIcon(props) { ); } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { margin: theme.spacing(6, 0, 3), }, diff --git a/examples/nextjs-with-typescript/pages/_document.tsx b/examples/nextjs-with-typescript/pages/_document.tsx index 205055b69e5523..8eba0558edbc72 100644 --- a/examples/nextjs-with-typescript/pages/_document.tsx +++ b/examples/nextjs-with-typescript/pages/_document.tsx @@ -24,7 +24,7 @@ export default class MyDocument extends Document { } } -MyDocument.getInitialProps = async ctx => { +MyDocument.getInitialProps = async (ctx) => { // Resolution order // // On the server: @@ -53,7 +53,7 @@ MyDocument.getInitialProps = async ctx => { ctx.renderPage = () => originalRenderPage({ - enhanceApp: App => props => sheets.collect(), + enhanceApp: (App) => (props) => sheets.collect(), }); const initialProps = await Document.getInitialProps(ctx); diff --git a/examples/nextjs/pages/_document.js b/examples/nextjs/pages/_document.js index 205055b69e5523..8eba0558edbc72 100644 --- a/examples/nextjs/pages/_document.js +++ b/examples/nextjs/pages/_document.js @@ -24,7 +24,7 @@ export default class MyDocument extends Document { } } -MyDocument.getInitialProps = async ctx => { +MyDocument.getInitialProps = async (ctx) => { // Resolution order // // On the server: @@ -53,7 +53,7 @@ MyDocument.getInitialProps = async ctx => { ctx.renderPage = () => originalRenderPage({ - enhanceApp: App => props => sheets.collect(), + enhanceApp: (App) => (props) => sheets.collect(), }); const initialProps = await Document.getInitialProps(ctx); diff --git a/examples/nextjs/src/ProTip.js b/examples/nextjs/src/ProTip.js index e9b38c4dbd96c0..b541be43ba54d2 100644 --- a/examples/nextjs/src/ProTip.js +++ b/examples/nextjs/src/ProTip.js @@ -12,7 +12,7 @@ function LightBulbIcon(props) { ); } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { margin: theme.spacing(6, 0, 3), }, diff --git a/examples/preact/src/ProTip.js b/examples/preact/src/ProTip.js index e9b38c4dbd96c0..b541be43ba54d2 100644 --- a/examples/preact/src/ProTip.js +++ b/examples/preact/src/ProTip.js @@ -12,7 +12,7 @@ function LightBulbIcon(props) { ); } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { margin: theme.spacing(6, 0, 3), }, diff --git a/examples/ssr/ProTip.js b/examples/ssr/ProTip.js index e9b38c4dbd96c0..b541be43ba54d2 100644 --- a/examples/ssr/ProTip.js +++ b/examples/ssr/ProTip.js @@ -12,7 +12,7 @@ function LightBulbIcon(props) { ); } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { margin: theme.spacing(6, 0, 3), }, diff --git a/framer/Material-UI.framerfx/code/RadioGroup.tsx b/framer/Material-UI.framerfx/code/RadioGroup.tsx index ce52dcdd4398b6..6916c8a3e2697d 100644 --- a/framer/Material-UI.framerfx/code/RadioGroup.tsx +++ b/framer/Material-UI.framerfx/code/RadioGroup.tsx @@ -18,7 +18,7 @@ export function RadioGroup(props) {
    {label} - {labels.map(radioLabel => { + {labels.map((radioLabel) => { return ; })} diff --git a/framer/scripts/additionalProps.js b/framer/scripts/additionalProps.js index badea2c6238186..844590463f3398 100644 --- a/framer/scripts/additionalProps.js +++ b/framer/scripts/additionalProps.js @@ -1,6 +1,6 @@ import { componentSettings } from './framerConfig'; -const additionalProps = component => { +const additionalProps = (component) => { const templates = { appBarColor: { type: { diff --git a/framer/scripts/buildFramer.js b/framer/scripts/buildFramer.js index 4efdcc346c1acc..d93b552f1549de 100644 --- a/framer/scripts/buildFramer.js +++ b/framer/scripts/buildFramer.js @@ -62,11 +62,11 @@ function options(type, separator) { let optionsString = ''; if (type.value) { if (type.name === 'enum') { - type.value.forEach(value => { + type.value.forEach((value) => { optionsString += `${value.value}${separator}`; }); } else if (type.name === 'union') { - type.value.forEach(value => { + type.value.forEach((value) => { optionsString += `${value.name}${separator}`; }); } @@ -90,7 +90,7 @@ function getTemplateStrings(reactAPI) { let controls = ''; let style = ''; - reactAPI.propNames.forEach(propName => { + reactAPI.propNames.forEach((propName) => { const prop = reactAPI.props[propName]; prop.name = propName; @@ -172,7 +172,7 @@ ${propName}: { if (componentSettings[reactAPI.name].style) { const keys = Object.keys(componentSettings[reactAPI.name].style); - keys.forEach(key => { + keys.forEach((key) => { style += ` ${key}: '${componentSettings[reactAPI.name].style[key]}',\n`; }); } @@ -188,7 +188,7 @@ ${propName}: { } function ensureExists(pat, mask, cb) { - mkdir(pat, mask, err => { + mkdir(pat, mask, (err) => { if (err) { if (err.code === 'EEXIST') { cb(null); // ignore the error if the folder already exists @@ -202,7 +202,7 @@ function ensureExists(pat, mask, cb) { } function writeFile(reactAPI) { - ensureExists(framerDirectory, 0o744, err => { + ensureExists(framerDirectory, 0o744, (err) => { if (err) { console.log('Error creating directory', framerDirectory); return; @@ -252,7 +252,7 @@ function buildFramer(componentObject) { function run() { const components = findComponents(path.resolve(process.cwd(), args[2])); - components.forEach(component => { + components.forEach((component) => { if (args[4]) { if (args[4] === path.parse(component.filename).name) { buildFramer(component); diff --git a/modules/handleKillSignals.js b/modules/handleKillSignals.js index b9edeb8584bcd5..98a854d8ba737d 100644 --- a/modules/handleKillSignals.js +++ b/modules/handleKillSignals.js @@ -66,7 +66,7 @@ function removeTeardown(teardown) { function handleKillSignals() { // Process on exit and signals. // https://nodejs.org/api/process.html#process_event_exit - process.on('exit', code => { + process.on('exit', (code) => { const msg = `💀 Node stopped with code ${code}`; if (code === 0) { @@ -96,7 +96,7 @@ function handleKillSignals() { 'SIGSEGV', 'SIGUSR2', 'SIGTERM', - ].forEach(signal => { + ].forEach((signal) => { process.on(signal, () => { shutdown(signal, 'signal'); }); diff --git a/modules/log.js b/modules/log.js index f5ad3e3a31df06..4eb43e3a231d15 100644 --- a/modules/log.js +++ b/modules/log.js @@ -74,7 +74,7 @@ function fastAndSafeJsonStringify(object) { } function logMethod(process, console, type) { - return object => { + return (object) => { const { name, msg, force = false } = object; let formatedMsg = msg; diff --git a/modules/waterfall/Queue.js b/modules/waterfall/Queue.js index 21a1cf83b9752f..1ac580be4e9304 100644 --- a/modules/waterfall/Queue.js +++ b/modules/waterfall/Queue.js @@ -12,7 +12,7 @@ class Queue { this.concurrency = options.concurrency || 1; } - push = entries => { + push = (entries) => { this.pendingEntries = this.pendingEntries.concat(entries); this.process(); }; @@ -20,7 +20,7 @@ class Queue { process = () => { const scheduled = this.pendingEntries.splice(0, this.concurrency - this.inFlight); this.inFlight += scheduled.length; - scheduled.forEach(async task => { + scheduled.forEach(async (task) => { try { await this.worker(task); } catch (err) { diff --git a/modules/waterfall/metric.js b/modules/waterfall/metric.js index ab262b0463e836..98a0abbc87ff10 100644 --- a/modules/waterfall/metric.js +++ b/modules/waterfall/metric.js @@ -5,11 +5,11 @@ const times = new Map(); const implementations = { mark: { - start: name => { + start: (name) => { times.set(name, performance.now()); performance.mark(`metric_${name}_start`); }, - end: name => { + end: (name) => { const endMark = `metric_${name}_end`; performance.mark(endMark); const startMark = `metric_${name}_start`; @@ -19,21 +19,21 @@ const implementations = { }, }, now: { - start: name => { + start: (name) => { times.set(name, performance.now()); }, - end: name => { + end: (name) => { const time = times.get(name); const duration = performance.now() - time; return duration; }, }, hrtime: { - start: name => { + start: (name) => { // https://nodejs.org/api/process.html#process_process_hrtime_time times.set(name, process.hrtime()); }, - end: name => { + end: (name) => { const time = times.get(name); const durations = process.hrtime(time); const duration = durations[0] / 1e3 + durations[1] / 1e6; diff --git a/modules/waterfall/retry.js b/modules/waterfall/retry.js index 5bda24bf9ecaad..fc6bbb1e30c8f6 100644 --- a/modules/waterfall/retry.js +++ b/modules/waterfall/retry.js @@ -7,7 +7,7 @@ async function retry(tryFunction, options = {}) { let output = null; let exitErr = null; - const bail = err => { + const bail = (err) => { exitErr = err; }; diff --git a/modules/waterfall/sleep.js b/modules/waterfall/sleep.js index 8c8a12bb7d5a68..1ca84351fa20ba 100644 --- a/modules/waterfall/sleep.js +++ b/modules/waterfall/sleep.js @@ -1,5 +1,5 @@ function sleep(delay = 0) { - return new Promise(resolve => { + return new Promise((resolve) => { setTimeout(resolve, delay); }); } diff --git a/packages/eslint-plugin-material-ui/src/rules/docgen-ignore-before-comment.js b/packages/eslint-plugin-material-ui/src/rules/docgen-ignore-before-comment.js index cff9570313fe3d..69d541d086941e 100644 --- a/packages/eslint-plugin-material-ui/src/rules/docgen-ignore-before-comment.js +++ b/packages/eslint-plugin-material-ui/src/rules/docgen-ignore-before-comment.js @@ -1,6 +1,6 @@ module.exports = { - create: context => { - context.getAllComments().forEach(comment => { + create: (context) => { + context.getAllComments().forEach((comment) => { if (comment.type !== 'Block') { return; } diff --git a/packages/eslint-plugin-material-ui/src/rules/restricted-path-imports.js b/packages/eslint-plugin-material-ui/src/rules/restricted-path-imports.js index 37f3c5343107df..158123f02afe46 100644 --- a/packages/eslint-plugin-material-ui/src/rules/restricted-path-imports.js +++ b/packages/eslint-plugin-material-ui/src/rules/restricted-path-imports.js @@ -1,6 +1,6 @@ // See tests for valid examples. // Rationale: Importing anything deeper will use the commonJS build -module.exports = context => { +module.exports = (context) => { return { ImportDeclaration(node) { const { source } = node; diff --git a/packages/material-ui-benchmark/src/core.js b/packages/material-ui-benchmark/src/core.js index 34ea10e8efa83f..6781a20288a1e4 100644 --- a/packages/material-ui-benchmark/src/core.js +++ b/packages/material-ui-benchmark/src/core.js @@ -6,7 +6,7 @@ import { StylesProvider } from '@material-ui/styles'; import ButtonBase from '@material-ui/core/ButtonBase'; const suite = new Benchmark.Suite('core', { - onError: event => { + onError: (event) => { console.log(event.target.error); }, }); @@ -48,7 +48,7 @@ suite .add('ButtonBase disable ripple', () => { ReactDOMServer.renderToString(Material-UI); }) - .on('cycle', event => { + .on('cycle', (event) => { console.log(String(event.target)); }) .run(); diff --git a/packages/material-ui-benchmark/src/docs.js b/packages/material-ui-benchmark/src/docs.js index a4a045ae5c439d..24ed9d61797d07 100644 --- a/packages/material-ui-benchmark/src/docs.js +++ b/packages/material-ui-benchmark/src/docs.js @@ -10,7 +10,7 @@ import { createStore } from 'redux'; import { Provider } from 'react-redux'; const suite = new Benchmark.Suite('core', { - onError: event => { + onError: (event) => { console.log(event.target.error); }, }); @@ -21,7 +21,7 @@ const markdown = fs.readFileSync( 'UTF-8', ); -const store = createStore(state => state, { +const store = createStore((state) => state, { options: { userLanguage: 'en', }, @@ -38,7 +38,7 @@ suite , ); }) - .on('cycle', event => { + .on('cycle', (event) => { console.log(String(event.target)); }) .run(); diff --git a/packages/material-ui-benchmark/src/styles.js b/packages/material-ui-benchmark/src/styles.js index 07875c14ebd77e..2a30c48ee5bafb 100644 --- a/packages/material-ui-benchmark/src/styles.js +++ b/packages/material-ui-benchmark/src/styles.js @@ -12,7 +12,7 @@ import jss, { getDynamicStyles } from 'jss'; import Box from '@material-ui/core/Box'; const suite = new Benchmark.Suite('styles', { - onError: event => { + onError: (event) => { console.log(event.target.error); }, }); @@ -65,11 +65,11 @@ const emotionCss = css` ${cssContent} `; -const JSSButton = injectSheet(cssObject)(props => ( +const JSSButton = injectSheet(cssObject)((props) => ( - + @@ -36,10 +36,10 @@ const ButtonTest = () => ( // By default the underlying component is a button element:
    ', () => { render(
    - {value => { + {(value) => { context = value; return ; }} diff --git a/packages/material-ui/src/TableBody/TableBody.test.js b/packages/material-ui/src/TableBody/TableBody.test.js index 197d4eb549509a..864b8ec93999ce 100644 --- a/packages/material-ui/src/TableBody/TableBody.test.js +++ b/packages/material-ui/src/TableBody/TableBody.test.js @@ -45,7 +45,7 @@ describe('', () => { mountInTable( - {value => { + {(value) => { context = value; }} diff --git a/packages/material-ui/src/TableCell/TableCell.js b/packages/material-ui/src/TableCell/TableCell.js index b2695d8759a0f0..b8cfac6db66c07 100644 --- a/packages/material-ui/src/TableCell/TableCell.js +++ b/packages/material-ui/src/TableCell/TableCell.js @@ -7,7 +7,7 @@ import { darken, fade, lighten } from '../styles/colorManipulator'; import TableContext from '../Table/TableContext'; import Tablelvl2Context from '../Table/Tablelvl2Context'; -export const styles = theme => ({ +export const styles = (theme) => ({ /* Styles applied to the root element. */ root: { ...theme.typography.body2, diff --git a/packages/material-ui/src/TableFooter/TableFooter.test.js b/packages/material-ui/src/TableFooter/TableFooter.test.js index fa9fe7f2752613..f79ee4113fefcb 100644 --- a/packages/material-ui/src/TableFooter/TableFooter.test.js +++ b/packages/material-ui/src/TableFooter/TableFooter.test.js @@ -43,7 +43,7 @@ describe('', () => { mountInTable( - {value => { + {(value) => { context = value; }} diff --git a/packages/material-ui/src/TableHead/TableHead.test.js b/packages/material-ui/src/TableHead/TableHead.test.js index d371008d4a2cdf..8eb32198d8de8b 100644 --- a/packages/material-ui/src/TableHead/TableHead.test.js +++ b/packages/material-ui/src/TableHead/TableHead.test.js @@ -42,7 +42,7 @@ describe('', () => { mountInTable( - {value => { + {(value) => { context = value; }} diff --git a/packages/material-ui/src/TablePagination/TablePagination.js b/packages/material-ui/src/TablePagination/TablePagination.js index 5f75bc45979db7..f1803bcffce689 100644 --- a/packages/material-ui/src/TablePagination/TablePagination.js +++ b/packages/material-ui/src/TablePagination/TablePagination.js @@ -11,7 +11,7 @@ import Toolbar from '../Toolbar'; import Typography from '../Typography'; import TablePaginationActions from './TablePaginationActions'; -export const styles = theme => ({ +export const styles = (theme) => ({ /* Styles applied to the root element. */ root: { color: theme.palette.text.primary, @@ -124,7 +124,7 @@ const TablePagination = React.forwardRef(function TablePagination(props, ref) { onChange={onChangeRowsPerPage} {...SelectProps} > - {rowsPerPageOptions.map(rowsPerPageOption => ( + {rowsPerPageOptions.map((rowsPerPageOption) => ( { + page: chainPropTypes(PropTypes.number.isRequired, (props) => { const { count, page, rowsPerPage } = props; if (count === -1) { diff --git a/packages/material-ui/src/TablePagination/TablePagination.test.js b/packages/material-ui/src/TablePagination/TablePagination.test.js index a00a62dd2e48ea..7dc3580765b5b6 100644 --- a/packages/material-ui/src/TablePagination/TablePagination.test.js +++ b/packages/material-ui/src/TablePagination/TablePagination.test.js @@ -53,7 +53,7 @@ describe('', () => { mount: mountInTable, refInstanceof: window.HTMLTableCellElement, // can only use `td` in a tr so we just fake a different component - testComponentPropWith: props =>
    , + testComponentPropWith: (props) => , }), ); diff --git a/packages/material-ui/src/TablePagination/TablePaginationActions.js b/packages/material-ui/src/TablePagination/TablePaginationActions.js index c878bd70d69e5a..feb499783d0e6a 100644 --- a/packages/material-ui/src/TablePagination/TablePaginationActions.js +++ b/packages/material-ui/src/TablePagination/TablePaginationActions.js @@ -21,11 +21,11 @@ const TablePaginationActions = React.forwardRef(function TablePaginationActions( const theme = useTheme(); - const handleBackButtonClick = event => { + const handleBackButtonClick = (event) => { onChangePage(event, page - 1); }; - const handleNextButtonClick = event => { + const handleNextButtonClick = (event) => { onChangePage(event, page + 1); }; diff --git a/packages/material-ui/src/TableRow/TableRow.js b/packages/material-ui/src/TableRow/TableRow.js index e37741476d643f..0fb9458c72999e 100644 --- a/packages/material-ui/src/TableRow/TableRow.js +++ b/packages/material-ui/src/TableRow/TableRow.js @@ -5,7 +5,7 @@ import withStyles from '../styles/withStyles'; import Tablelvl2Context from '../Table/Tablelvl2Context'; import { fade } from '../styles/colorManipulator'; -export const styles = theme => ({ +export const styles = (theme) => ({ /* Styles applied to the root element. */ root: { color: 'inherit', diff --git a/packages/material-ui/src/TableSortLabel/TableSortLabel.js b/packages/material-ui/src/TableSortLabel/TableSortLabel.js index 1182460181ef38..41eed5173739ba 100644 --- a/packages/material-ui/src/TableSortLabel/TableSortLabel.js +++ b/packages/material-ui/src/TableSortLabel/TableSortLabel.js @@ -6,7 +6,7 @@ import withStyles from '../styles/withStyles'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; -export const styles = theme => ({ +export const styles = (theme) => ({ /* Styles applied to the root element. */ root: { cursor: 'pointer', diff --git a/packages/material-ui/src/Tabs/TabIndicator.js b/packages/material-ui/src/Tabs/TabIndicator.js index 159c3ec60412cc..efc3b5e5f8f484 100644 --- a/packages/material-ui/src/Tabs/TabIndicator.js +++ b/packages/material-ui/src/Tabs/TabIndicator.js @@ -4,7 +4,7 @@ import clsx from 'clsx'; import withStyles from '../styles/withStyles'; import capitalize from '../utils/capitalize'; -export const styles = theme => ({ +export const styles = (theme) => ({ root: { position: 'absolute', height: 2, diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js index 47cca79fe1d74d..dc23fcd2bcf7aa 100644 --- a/packages/material-ui/src/Tabs/Tabs.js +++ b/packages/material-ui/src/Tabs/Tabs.js @@ -14,7 +14,7 @@ import TabScrollButton from './TabScrollButton'; import useEventCallback from '../utils/useEventCallback'; import useTheme from '../styles/useTheme'; -export const styles = theme => ({ +export const styles = (theme) => ({ /* Styles applied to the root element. */ root: { overflow: 'hidden', @@ -203,11 +203,11 @@ const Tabs = React.forwardRef(function Tabs(props, ref) { } }); - const scroll = scrollValue => { + const scroll = (scrollValue) => { animate(scrollStart, tabsRef.current, scrollValue); }; - const moveTabsScroll = delta => { + const moveTabsScroll = (delta) => { let scrollValue = tabsRef.current[scrollStart]; if (vertical) { @@ -229,7 +229,7 @@ const Tabs = React.forwardRef(function Tabs(props, ref) { moveTabsScroll(tabsRef.current[clientSize]); }; - const handleScrollbarSizeChange = React.useCallback(scrollbarHeight => { + const handleScrollbarSizeChange = React.useCallback((scrollbarHeight) => { setScrollerStyle({ overflow: null, marginBottom: -scrollbarHeight, @@ -378,7 +378,7 @@ const Tabs = React.forwardRef(function Tabs(props, ref) { ); let childIndex = 0; - const children = React.Children.map(childrenProp, child => { + const children = React.Children.map(childrenProp, (child) => { if (!React.isValidElement(child)) { return null; } diff --git a/packages/material-ui/src/Tabs/Tabs.test.js b/packages/material-ui/src/Tabs/Tabs.test.js index 432171d137247d..a0a56d8756b7ff 100644 --- a/packages/material-ui/src/Tabs/Tabs.test.js +++ b/packages/material-ui/src/Tabs/Tabs.test.js @@ -20,8 +20,8 @@ AccessibleTabScrollButton.propTypes = { const findScrollButton = (container, direction) => container.querySelector(`div[data-direction="${direction}"]`); -const hasLeftScrollButton = container => findScrollButton(container, 'left') != null; -const hasRightScrollButton = container => findScrollButton(container, 'right') != null; +const hasLeftScrollButton = (container) => findScrollButton(container, 'left') != null; +const hasRightScrollButton = (container) => findScrollButton(container, 'right') != null; describe('', () => { const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); @@ -77,7 +77,7 @@ describe('', () => { render( { + action={(actions) => { tabsActions = actions; }} > diff --git a/packages/material-ui/src/TextField/TextField.spec.tsx b/packages/material-ui/src/TextField/TextField.spec.tsx index 95c803dbd2bf6f..441e9ee81dd226 100644 --- a/packages/material-ui/src/TextField/TextField.spec.tsx +++ b/packages/material-ui/src/TextField/TextField.spec.tsx @@ -26,7 +26,7 @@ import TextField from '@material-ui/core/TextField'; { + onChange={(event) => { // type inference for event still works? const value = event.target.value; // $ExpectType string }} diff --git a/packages/material-ui/src/TextField/TextField.test.js b/packages/material-ui/src/TextField/TextField.test.js index 68a41859cb7af2..0841525d19c1ec 100644 --- a/packages/material-ui/src/TextField/TextField.test.js +++ b/packages/material-ui/src/TextField/TextField.test.js @@ -63,7 +63,7 @@ describe('', () => { expect(container.querySelector('label')).to.have.class('foo'); }); - ['', undefined].forEach(label => { + ['', undefined].forEach((label) => { it(`should not render empty (${label}) label element`, () => { const { container } = render(); @@ -143,7 +143,7 @@ describe('', () => { const { container } = render( - {currencies.map(option => ( + {currencies.map((option) => ( diff --git a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js index 935c3b5cd6bc8d..df03a9eb85e5db 100644 --- a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js +++ b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js @@ -75,7 +75,7 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref) const outerHeightStyle = outerHeight + (boxSizing === 'border-box' ? padding + border : 0); const overflow = Math.abs(outerHeight - innerHeight) <= 1; - setState(prevState => { + setState((prevState) => { // Need a large enough difference to update the height. // This prevents infinite rendering loop. if ( @@ -127,7 +127,7 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref) renders.current = 0; }, [value]); - const handleChange = event => { + const handleChange = (event) => { renders.current = 0; if (!isControlled) { diff --git a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.test.js b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.test.js index 976bd9de695ba8..74d66f80d1bc70 100644 --- a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.test.js +++ b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.test.js @@ -52,7 +52,7 @@ describe('', () => { } before(() => { - stub(window, 'getComputedStyle').value(node => getComputedStyleStub[node] || {}); + stub(window, 'getComputedStyle').value((node) => getComputedStyleStub[node] || {}); }); after(() => { diff --git a/packages/material-ui/src/Toolbar/Toolbar.js b/packages/material-ui/src/Toolbar/Toolbar.js index f17abf3ed3b3d9..e41190438e9821 100644 --- a/packages/material-ui/src/Toolbar/Toolbar.js +++ b/packages/material-ui/src/Toolbar/Toolbar.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import withStyles from '../styles/withStyles'; -export const styles = theme => ({ +export const styles = (theme) => ({ /* Styles applied to the root element. */ root: { position: 'relative', diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js index b09ed5f4f74c61..1d8154194bb5f2 100644 --- a/packages/material-ui/src/Tooltip/Tooltip.js +++ b/packages/material-ui/src/Tooltip/Tooltip.js @@ -81,7 +81,7 @@ function arrowGenerator() { }; } -export const styles = theme => ({ +export const styles = (theme) => ({ /* Styles applied to the Popper component. */ popper: { zIndex: theme.zIndex.tooltip, @@ -266,7 +266,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) { }; }, []); - const handleOpen = event => { + const handleOpen = (event) => { clearTimeout(hystersisTimer); hystersisOpen = true; @@ -280,7 +280,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) { } }; - const handleEnter = event => { + const handleEnter = (event) => { const childrenProps = children.props; if ( @@ -326,7 +326,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) { } }; - const handleFocus = event => { + const handleFocus = (event) => { // Workaround for https://github.com/facebook/react/issues/7769 // The autoFocus of React might trigger the event before the componentDidMount. // We need to account for this eventuality. @@ -345,7 +345,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) { } }; - const handleClose = event => { + const handleClose = (event) => { clearTimeout(hystersisTimer); hystersisTimer = setTimeout(() => { hystersisOpen = false; @@ -362,7 +362,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) { }, theme.transitions.duration.shortest); }; - const handleLeave = event => { + const handleLeave = (event) => { const childrenProps = children.props; if (event.type === 'blur') { @@ -388,7 +388,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) { }, leaveDelay); }; - const handleTouchStart = event => { + const handleTouchStart = (event) => { ignoreNonTouchEvents.current = true; const childrenProps = children.props; @@ -405,7 +405,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) { }, enterTouchDelay); }; - const handleTouchEnd = event => { + const handleTouchEnd = (event) => { if (children.props.onTouchEnd) { children.props.onTouchEnd(event); } @@ -422,7 +422,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) { const handleFocusRef = useForkRef(focusVisibleRef, handleUseRef); // can be removed once we drop support for non ref forwarding class components const handleOwnRef = React.useCallback( - instance => { + (instance) => { // #StrictMode ready setRef(handleFocusRef, ReactDOM.findDOMNode(instance)); }, diff --git a/packages/material-ui/src/Tooltip/Tooltip.test.js b/packages/material-ui/src/Tooltip/Tooltip.test.js index b76d1705036216..bc2fb3001bbbb5 100644 --- a/packages/material-ui/src/Tooltip/Tooltip.test.js +++ b/packages/material-ui/src/Tooltip/Tooltip.test.js @@ -184,7 +184,7 @@ describe('', () => { }); it('should handle autoFocus + onFocus forwarding', () => { - const AutoFocus = props => ( + const AutoFocus = (props) => (
    {props.open ? ( @@ -273,7 +273,7 @@ describe('', () => { 'onMouseLeave', 'onFocus', 'onBlur', - ].forEach(name => { + ].forEach((name) => { it(`should be transparent for the ${name} event`, () => { const handler = spy(); const wrapper = mount( @@ -425,7 +425,7 @@ describe('', () => { }} />, ); - expect(popperRef.current.modifiers.find(x => x.name === 'arrow').foo).to.equal('bar'); + expect(popperRef.current.modifiers.find((x) => x.name === 'arrow').foo).to.equal('bar'); }); }); diff --git a/packages/material-ui/src/Typography/Typography.js b/packages/material-ui/src/Typography/Typography.js index b12f64103901f4..43c211a15548ad 100644 --- a/packages/material-ui/src/Typography/Typography.js +++ b/packages/material-ui/src/Typography/Typography.js @@ -4,7 +4,7 @@ import clsx from 'clsx'; import withStyles from '../styles/withStyles'; import capitalize from '../utils/capitalize'; -export const styles = theme => ({ +export const styles = (theme) => ({ /* Styles applied to the root element. */ root: { margin: 0, diff --git a/packages/material-ui/src/Typography/Typography.test.js b/packages/material-ui/src/Typography/Typography.test.js index 696a9a73001ab9..f292be18006838 100644 --- a/packages/material-ui/src/Typography/Typography.test.js +++ b/packages/material-ui/src/Typography/Typography.test.js @@ -58,7 +58,7 @@ describe('', () => { assert.strictEqual(wrapper.hasClass(classes.alignCenter), true); }); ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'body2', 'body1', 'caption', 'button'].forEach( - variant => { + (variant) => { it(`should render ${variant} text`, () => { // @ts-ignore literal/tuple type widening const wrapper = shallow(Hello); diff --git a/packages/material-ui/src/Zoom/Zoom.js b/packages/material-ui/src/Zoom/Zoom.js index 7a19850a3cd972..96efdb60ee9a08 100644 --- a/packages/material-ui/src/Zoom/Zoom.js +++ b/packages/material-ui/src/Zoom/Zoom.js @@ -56,7 +56,7 @@ const Zoom = React.forwardRef(function Zoom(props, ref) { } }; - const handleExit = node => { + const handleExit = (node) => { const transitionProps = getTransitionProps( { style, timeout }, { diff --git a/packages/material-ui/src/index.test.js b/packages/material-ui/src/index.test.js index bc20c013b77201..467d261fca773f 100644 --- a/packages/material-ui/src/index.test.js +++ b/packages/material-ui/src/index.test.js @@ -13,7 +13,7 @@ describe('material-ui', () => { }); it('should not do undefined exports', () => { - Object.keys(MaterialUI).forEach(exportKey => + Object.keys(MaterialUI).forEach((exportKey) => assert.strictEqual(Boolean(MaterialUI[exportKey]), true), ); }); diff --git a/packages/material-ui/src/internal/SwitchBase.js b/packages/material-ui/src/internal/SwitchBase.js index 035b192dc7a12b..cea7842b853994 100644 --- a/packages/material-ui/src/internal/SwitchBase.js +++ b/packages/material-ui/src/internal/SwitchBase.js @@ -62,7 +62,7 @@ const SwitchBase = React.forwardRef(function SwitchBase(props, ref) { const muiFormControl = useFormControl(); - const handleFocus = event => { + const handleFocus = (event) => { if (onFocus) { onFocus(event); } @@ -72,7 +72,7 @@ const SwitchBase = React.forwardRef(function SwitchBase(props, ref) { } }; - const handleBlur = event => { + const handleBlur = (event) => { if (onBlur) { onBlur(event); } @@ -82,7 +82,7 @@ const SwitchBase = React.forwardRef(function SwitchBase(props, ref) { } }; - const handleInputChange = event => { + const handleInputChange = (event) => { const newChecked = event.target.checked; setCheckedState(newChecked); diff --git a/packages/material-ui/src/internal/SwitchBase.test.js b/packages/material-ui/src/internal/SwitchBase.test.js index b54e47e0889dc3..2283e9e5c9e7f7 100644 --- a/packages/material-ui/src/internal/SwitchBase.test.js +++ b/packages/material-ui/src/internal/SwitchBase.test.js @@ -9,7 +9,7 @@ import SwitchBase from './SwitchBase'; import FormControl, { useFormControl } from '../FormControl'; import IconButton from '../IconButton'; -const shouldSuccessOnce = name => func => () => { +const shouldSuccessOnce = (name) => (func) => () => { global.successOnce = global.successOnce || {}; if (!global.successOnce[name]) { @@ -186,7 +186,7 @@ describe('', () => { describe('handleInputChange()', () => { it('should call onChange when uncontrolled', () => { - const handleChange = spy(event => event.target.checked); + const handleChange = spy((event) => event.target.checked); const { getByRole } = render( cancelled = true; }; - const step = timestamp => { + const step = (timestamp) => { if (cancelled) { cb(new Error('Animation cancelled')); return; diff --git a/packages/material-ui/src/internal/animate.test.js b/packages/material-ui/src/internal/animate.test.js index 090ec09b3e6a27..e5388e3505d486 100644 --- a/packages/material-ui/src/internal/animate.test.js +++ b/packages/material-ui/src/internal/animate.test.js @@ -36,30 +36,30 @@ describe('animate', () => { } }); - it('should work', done => { + it('should work', (done) => { container.scrollLeft = 200; assert.strictEqual(container.scrollLeft, 200); - animate('scrollLeft', container, 300, {}, err => { + animate('scrollLeft', container, 300, {}, (err) => { assert.strictEqual(err, null); assert.strictEqual(container.scrollLeft, 300); done(); }); }); - it('should work when asking for the current value', done => { + it('should work when asking for the current value', (done) => { container.scrollLeft = 200; assert.strictEqual(container.scrollLeft, 200); - animate('scrollLeft', container, 200, {}, err => { + animate('scrollLeft', container, 200, {}, (err) => { assert.strictEqual(err.message, 'Element already at target position'); assert.strictEqual(container.scrollLeft, 200); done(); }); }); - it('should be able to cancel the animation', done => { + it('should be able to cancel the animation', (done) => { container.scrollLeft = 200; assert.strictEqual(container.scrollLeft, 200); - const cancel = animate('scrollLeft', container, 300, {}, err => { + const cancel = animate('scrollLeft', container, 300, {}, (err) => { assert.strictEqual(err.message, 'Animation cancelled'); assert.strictEqual(container.scrollLeft, 200); done(); diff --git a/packages/material-ui/src/internal/svg-icons/index.test.js b/packages/material-ui/src/internal/svg-icons/index.test.js index 6dc62e85750081..bdbf2df4522972 100644 --- a/packages/material-ui/src/internal/svg-icons/index.test.js +++ b/packages/material-ui/src/internal/svg-icons/index.test.js @@ -11,7 +11,7 @@ describe('svg-icons', () => { shallow = createShallow(); }); - it('should be able to render all of them', done => { + it('should be able to render all of them', (done) => { // This test can only be run on the node env if (!fs.readdir) { done(); @@ -23,7 +23,7 @@ describe('svg-icons', () => { throw err; } - files.forEach(file => { + files.forEach((file) => { // Ignore everything that's not a component if (!/^[A-Z].*\.js$/.test(file)) { return; diff --git a/packages/material-ui/src/locale/index.js b/packages/material-ui/src/locale/index.js index 801bffb0906b63..4ad63e205787a8 100644 --- a/packages/material-ui/src/locale/index.js +++ b/packages/material-ui/src/locale/index.js @@ -7,7 +7,7 @@ export const azAZ = { nextIconButtonText: 'Növbəti səhifə', }, MuiRating: { - getLabelText: value => { + getLabelText: (value) => { let pluralForm = 'Ulduz'; const lastDigit = value % 10; @@ -41,7 +41,7 @@ export const bgBG = { nextIconButtonText: 'Следваща страница', }, MuiRating: { - getLabelText: value => `${value} Звезд${value !== 1 ? 'и' : 'а'}`, + getLabelText: (value) => `${value} Звезд${value !== 1 ? 'и' : 'а'}`, emptyLabelText: 'Изчисти', }, MuiAutocomplete: { @@ -66,7 +66,7 @@ export const caES = { nextIconButtonText: 'Següent pàgina', }, MuiRating: { - getLabelText: value => `${value} ${value !== 1 ? 'Estrelles' : 'Estrella'}`, + getLabelText: (value) => `${value} ${value !== 1 ? 'Estrelles' : 'Estrella'}`, emptyLabelText: 'Buit', }, MuiAutocomplete: { @@ -91,7 +91,7 @@ export const csCZ = { nextIconButtonText: 'Další stránka', }, MuiRating: { - getLabelText: value => { + getLabelText: (value) => { if (value === 1) { return `${value} hvězdička`; } @@ -124,7 +124,7 @@ export const deDE = { nextIconButtonText: 'Nächste Seite', }, MuiRating: { - getLabelText: value => `${value} ${value !== 1 ? 'Sterne' : 'Stern'}`, + getLabelText: (value) => `${value} ${value !== 1 ? 'Sterne' : 'Stern'}`, emptyLabelText: 'Empty', }, MuiAutocomplete: { @@ -201,7 +201,7 @@ export const esES = { nextIconButtonText: 'Siguiente página', }, MuiRating: { - getLabelText: value => `${value} Estrella${value !== 1 ? 's' : ''}`, + getLabelText: (value) => `${value} Estrella${value !== 1 ? 's' : ''}`, emptyLabelText: 'Empty', }, MuiAutocomplete: { @@ -226,7 +226,7 @@ export const etEE = { nextIconButtonText: 'Järgmine lehekülg', }, MuiRating: { - getLabelText: value => `${value} Tärn${value !== 1 ? 'i' : ''}`, + getLabelText: (value) => `${value} Tärn${value !== 1 ? 'i' : ''}`, emptyLabelText: 'Tühi', }, MuiAutocomplete: { @@ -272,7 +272,7 @@ export const faIR = { nextIconButtonText: 'صفحهٔ بعد', }, MuiRating: { - getLabelText: value => `${value} ستاره`, + getLabelText: (value) => `${value} ستاره`, emptyLabelText: 'Empty', }, MuiAutocomplete: { @@ -297,7 +297,7 @@ export const fiFI = { nextIconButtonText: 'Seuraava sivu', }, MuiRating: { - getLabelText: value => `${value} Täht${value !== 1 ? 'eä' : 'i'}`, + getLabelText: (value) => `${value} Täht${value !== 1 ? 'eä' : 'i'}`, emptyLabelText: 'Tyhjä', }, MuiAutocomplete: { @@ -325,7 +325,7 @@ export const frFR = { nextIconButtonText: 'Page suivante', }, MuiRating: { - getLabelText: value => `${value} Etoile${value !== 1 ? 's' : ''}`, + getLabelText: (value) => `${value} Etoile${value !== 1 ? 's' : ''}`, emptyLabelText: 'Vide', }, MuiAutocomplete: { @@ -372,7 +372,7 @@ export const heIL = { nextIconButtonText: 'העמוד הבא', }, MuiRating: { - getLabelText: value => `${value} כוכב${value !== 1 ? 'ים' : ''}`, + getLabelText: (value) => `${value} כוכב${value !== 1 ? 'ים' : ''}`, emptyLabelText: 'ריק', }, MuiAutocomplete: { @@ -397,7 +397,7 @@ export const huHU = { nextIconButtonText: 'Következő oldal', }, MuiRating: { - getLabelText: value => `${value} Csillag`, + getLabelText: (value) => `${value} Csillag`, emptyLabelText: 'Üres', }, MuiAutocomplete: { @@ -422,7 +422,7 @@ export const hyAM = { nextIconButtonText: 'Հաջորդը', }, MuiRating: { - getLabelText: value => `${value} Աստղ`, + getLabelText: (value) => `${value} Աստղ`, emptyLabelText: 'Դատարկ', }, MuiAutocomplete: { @@ -448,7 +448,7 @@ export const idID = { nextIconButtonText: 'Halaman selanjutnya', }, MuiRating: { - getLabelText: value => `${value} Bintang`, + getLabelText: (value) => `${value} Bintang`, emptyLabelText: 'Empty', }, MuiAutocomplete: { @@ -473,7 +473,7 @@ export const isIS = { nextIconButtonText: 'Næsta síða', }, MuiRating: { - getLabelText: value => `${value} ${value === 1 ? 'Stjarna' : 'Stjörnur'}`, + getLabelText: (value) => `${value} ${value === 1 ? 'Stjarna' : 'Stjörnur'}`, emptyLabelText: 'Tómt', }, MuiAutocomplete: { @@ -498,7 +498,7 @@ export const itIT = { nextIconButtonText: 'Pagina successiva', }, MuiRating: { - getLabelText: value => `${value} Stell${value !== 1 ? 'e' : 'a'}`, + getLabelText: (value) => `${value} Stell${value !== 1 ? 'e' : 'a'}`, emptyLabelText: 'Vuoto', }, MuiAutocomplete: { @@ -523,7 +523,7 @@ export const jaJP = { nextIconButtonText: '次のページ', }, MuiRating: { - getLabelText: value => `${value} ${value !== 1 ? '出演者' : '星'}`, + getLabelText: (value) => `${value} ${value !== 1 ? '出演者' : '星'}`, emptyLabelText: 'Empty', }, MuiAutocomplete: { @@ -548,7 +548,7 @@ export const koKR = { nextIconButtonText: '다음 페이지', }, MuiRating: { - getLabelText: value => `${value} 점`, + getLabelText: (value) => `${value} 점`, emptyLabelText: 'Empty', }, MuiAutocomplete: { @@ -570,7 +570,7 @@ export const nlNL = { nextIconButtonText: 'Volgende pagina', }, MuiRating: { - getLabelText: value => `${value} Ster${value !== 1 ? 'ren' : ''}`, + getLabelText: (value) => `${value} Ster${value !== 1 ? 'ren' : ''}`, emptyLabelText: 'Empty', }, MuiAutocomplete: { @@ -595,7 +595,7 @@ export const plPL = { nextIconButtonText: 'Następna strona', }, MuiRating: { - getLabelText: value => { + getLabelText: (value) => { let pluralForm = 'gwiazdek'; const lastDigit = value % 10; @@ -631,7 +631,7 @@ export const ptBR = { nextIconButtonText: 'Próxima página', }, MuiRating: { - getLabelText: value => `${value} Estrela${value !== 1 ? 's' : ''}`, + getLabelText: (value) => `${value} Estrela${value !== 1 ? 's' : ''}`, emptyLabelText: 'Empty', }, MuiAutocomplete: { @@ -656,7 +656,7 @@ export const ptPT = { nextIconButtonText: 'Próxima página', }, MuiRating: { - getLabelText: value => `${value} Estrela${value !== 1 ? 's' : ''}`, + getLabelText: (value) => `${value} Estrela${value !== 1 ? 's' : ''}`, emptyLabelText: 'Empty', }, MuiAutocomplete: { @@ -678,7 +678,7 @@ export const roRO = { nextIconButtonText: 'Pagina următoare', }, MuiRating: { - getLabelText: value => `${value} St${value !== 1 ? 'ele' : 'ea'}`, + getLabelText: (value) => `${value} St${value !== 1 ? 'ele' : 'ea'}`, emptyLabelText: 'Empty', }, MuiAutocomplete: { @@ -703,7 +703,7 @@ export const ruRU = { nextIconButtonText: 'Следующая страница', }, MuiRating: { - getLabelText: value => { + getLabelText: (value) => { let pluralForm = 'Звёзд'; const lastDigit = value % 10; @@ -739,7 +739,7 @@ export const skSK = { nextIconButtonText: 'Ďalšia stránka', }, MuiRating: { - getLabelText: value => { + getLabelText: (value) => { if (value === 1) { return `${value} hviezdička`; } @@ -772,7 +772,7 @@ export const svSE = { nextIconButtonText: 'Nästa sida', }, MuiRating: { - getLabelText: value => `${value} ${value !== 1 ? 'Stjärnor' : 'Stjärna'}`, + getLabelText: (value) => `${value} ${value !== 1 ? 'Stjärnor' : 'Stjärna'}`, emptyLabelText: 'Empty', }, MuiAutocomplete: { @@ -798,7 +798,7 @@ export const trTR = { nextIconButtonText: 'Sonraki sayfa', }, MuiRating: { - getLabelText: value => `${value} Yıldız`, + getLabelText: (value) => `${value} Yıldız`, emptyLabelText: 'Empty', }, MuiAutocomplete: { @@ -823,7 +823,7 @@ export const ukUA = { nextIconButtonText: 'Наступна сторінка', }, MuiRating: { - getLabelText: value => { + getLabelText: (value) => { let pluralForm = 'Зірок'; const lastDigit = value % 10; @@ -860,7 +860,7 @@ export const viVN = { nextIconButtonText: 'Trang sau', }, MuiRating: { - getLabelText: value => `${value} sao`, + getLabelText: (value) => `${value} sao`, emptyLabelText: 'Trống', }, MuiAutocomplete: { @@ -885,7 +885,7 @@ export const zhCN = { nextIconButtonText: '下一页', }, MuiRating: { - getLabelText: value => `${value} 星${value !== 1 ? '星' : ''}`, + getLabelText: (value) => `${value} 星${value !== 1 ? '星' : ''}`, emptyLabelText: 'Empty', }, MuiAutocomplete: { diff --git a/packages/material-ui/src/styles/colorManipulator.js b/packages/material-ui/src/styles/colorManipulator.js index 10ec115d4baa3b..8ef994f7d43c02 100644 --- a/packages/material-ui/src/styles/colorManipulator.js +++ b/packages/material-ui/src/styles/colorManipulator.js @@ -31,10 +31,10 @@ export function hexToRgb(color) { let colors = color.match(re); if (colors && colors[0].length === 1) { - colors = colors.map(n => n + n); + colors = colors.map((n) => n + n); } - return colors ? `rgb(${colors.map(n => parseInt(n, 16)).join(', ')})` : ''; + return colors ? `rgb(${colors.map((n) => parseInt(n, 16)).join(', ')})` : ''; } function intToHex(int) { @@ -55,7 +55,7 @@ export function rgbToHex(color) { } const { values } = decomposeColor(color); - return `#${values.map(n => intToHex(n)).join('')}`; + return `#${values.map((n) => intToHex(n)).join('')}`; } /** @@ -115,7 +115,7 @@ export function decomposeColor(color) { } let values = color.substring(marker + 1, color.length - 1).split(','); - values = values.map(value => parseFloat(value)); + values = values.map((value) => parseFloat(value)); return { type, values }; } @@ -171,7 +171,7 @@ export function getLuminance(color) { color = decomposeColor(color); let rgb = color.type === 'hsl' ? decomposeColor(hslToRgb(color)).values : color.values; - rgb = rgb.map(val => { + rgb = rgb.map((val) => { val /= 255; // normalized return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4; }); diff --git a/packages/material-ui/src/styles/createPalette.test.js b/packages/material-ui/src/styles/createPalette.test.js index 24688e43456ab2..bd6770013473ad 100644 --- a/packages/material-ui/src/styles/createPalette.test.js +++ b/packages/material-ui/src/styles/createPalette.test.js @@ -144,7 +144,7 @@ describe('createPalette()', () => { [null, 'missing background argument in getContrastText(null)'], ['', 'missing background argument in getContrastText()'], [0, 'missing background argument in getContrastText(0)'], - ].forEach(testEntry => { + ].forEach((testEntry) => { const [argument, errorMessage] = testEntry; expect(() => getContrastText(argument), errorMessage).to.throw(); diff --git a/packages/material-ui/src/styles/createSpacing.js b/packages/material-ui/src/styles/createSpacing.js index 4988e39096d442..644d2a9a79c984 100644 --- a/packages/material-ui/src/styles/createSpacing.js +++ b/packages/material-ui/src/styles/createSpacing.js @@ -33,7 +33,7 @@ export default function createSpacing(spacingInput = 8) { } return args - .map(factor => { + .map((factor) => { const output = transform(factor); return typeof output === 'number' ? `${output}px` : output; }) diff --git a/packages/material-ui/src/styles/createSpacing.test.js b/packages/material-ui/src/styles/createSpacing.test.js index d659e2ae660645..72cd90f5cf9636 100644 --- a/packages/material-ui/src/styles/createSpacing.test.js +++ b/packages/material-ui/src/styles/createSpacing.test.js @@ -11,9 +11,9 @@ describe('createSpacing', () => { expect(spacing(1)).to.equal(10); spacing = createSpacing([0, 8, 16]); expect(spacing(2)).to.equal(16); - spacing = createSpacing(factor => factor ** 2); + spacing = createSpacing((factor) => factor ** 2); expect(spacing(2)).to.equal(4); - spacing = createSpacing(factor => `${0.25 * factor}rem`); + spacing = createSpacing((factor) => `${0.25 * factor}rem`); expect(spacing(2)).to.equal('0.5rem'); }); @@ -26,7 +26,7 @@ describe('createSpacing', () => { let spacing; spacing = createSpacing(); expect(spacing()).to.equal(8); - spacing = createSpacing(factor => `${0.25 * factor}rem`); + spacing = createSpacing((factor) => `${0.25 * factor}rem`); expect(spacing()).to.equal('0.25rem'); }); @@ -34,7 +34,7 @@ describe('createSpacing', () => { let spacing; spacing = createSpacing(); expect(spacing(1, 2)).to.equal('8px 16px'); - spacing = createSpacing(factor => `${0.25 * factor}rem`); + spacing = createSpacing((factor) => `${0.25 * factor}rem`); expect(spacing(1, 2)).to.equal('0.25rem 0.5rem'); }); diff --git a/packages/material-ui/src/styles/createTypography.js b/packages/material-ui/src/styles/createTypography.js index bb3b6fe572692f..9aaf9f33a91706 100644 --- a/packages/material-ui/src/styles/createTypography.js +++ b/packages/material-ui/src/styles/createTypography.js @@ -42,7 +42,7 @@ export default function createTypography(palette, typography) { } const coef = fontSize / 14; - const pxToRem = pxToRem2 || (size => `${(size / htmlFontSize) * coef}rem`); + const pxToRem = pxToRem2 || ((size) => `${(size / htmlFontSize) * coef}rem`); const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => ({ fontFamily, fontWeight, diff --git a/packages/material-ui/src/styles/createTypography.test.js b/packages/material-ui/src/styles/createTypography.test.js index 9a0dfe57508a28..639899545c9291 100644 --- a/packages/material-ui/src/styles/createTypography.test.js +++ b/packages/material-ui/src/styles/createTypography.test.js @@ -21,7 +21,7 @@ describe('createTypography', () => { }); it('should accept a function', () => { - const typography = createTypography(palette, paletteCurrent => { + const typography = createTypography(palette, (paletteCurrent) => { assert.strictEqual(palette, paletteCurrent); return { fontSize: 15 }; @@ -63,7 +63,7 @@ describe('createTypography', () => { 'overline', ]; - allVariants.forEach(variant => { + allVariants.forEach((variant) => { assert.strictEqual(typography[variant].marginLeft, 0); }); }); diff --git a/packages/material-ui/src/styles/cssUtils.js b/packages/material-ui/src/styles/cssUtils.js index 6c5cbacbe7ce1b..120a85292a851c 100644 --- a/packages/material-ui/src/styles/cssUtils.js +++ b/packages/material-ui/src/styles/cssUtils.js @@ -112,7 +112,7 @@ export function responsiveProperty({ }; const factor = (max - min) / breakpoints[breakpoints.length - 1]; - breakpoints.forEach(breakpoint => { + breakpoints.forEach((breakpoint) => { let value = min + factor * breakpoint; if (transform !== null) { diff --git a/packages/material-ui/src/styles/cssUtils.test.js b/packages/material-ui/src/styles/cssUtils.test.js index 266f0c85be7752..f8f9f4510fa81f 100644 --- a/packages/material-ui/src/styles/cssUtils.test.js +++ b/packages/material-ui/src/styles/cssUtils.test.js @@ -53,7 +53,7 @@ describe('cssUtils', () => { { args: { size: 8, grid: 17 }, expected: 0 }, ]; - tests.forEach(test => { + tests.forEach((test) => { const { args: { size, grid }, expected, @@ -73,7 +73,7 @@ describe('cssUtils', () => { { lineHeight: 1.0, pixels: 3, htmlFontSize: 14 }, ]; - tests.forEach(test => { + tests.forEach((test) => { const { lineHeight, pixels, htmlFontSize } = test; describe(`when ${lineHeight} lineHeight, ${pixels} pixels, diff --git a/packages/material-ui/src/styles/responsiveFontSizes.js b/packages/material-ui/src/styles/responsiveFontSizes.js index 05ac2ca61b7492..f1fa158dbdb3d1 100644 --- a/packages/material-ui/src/styles/responsiveFontSizes.js +++ b/packages/material-ui/src/styles/responsiveFontSizes.js @@ -29,9 +29,9 @@ export default function responsiveFontSizes(themeInput, options = {}) { // Convert between css lengths e.g. em->px or px->rem // Set the baseFontSize for your project. Defaults to 16px (also the browser default). const convert = convertLength(typography.htmlFontSize); - const breakpointValues = breakpoints.map(x => theme.breakpoints.values[x]); + const breakpointValues = breakpoints.map((x) => theme.breakpoints.values[x]); - variants.forEach(variant => { + variants.forEach((variant) => { const style = typography[variant]; const remFontSize = parseFloat(convert(style.fontSize, 'rem')); @@ -61,7 +61,7 @@ export default function responsiveFontSizes(themeInput, options = {}) { let transform = null; if (!disableAlign) { - transform = value => + transform = (value) => alignProperty({ size: value, grid: fontGrid({ pixels: 4, lineHeight, htmlFontSize: typography.htmlFontSize }), diff --git a/packages/material-ui/src/styles/styled.js b/packages/material-ui/src/styles/styled.js index 5f16549bdbf8bf..fbfecf873ec89f 100644 --- a/packages/material-ui/src/styles/styled.js +++ b/packages/material-ui/src/styles/styled.js @@ -1,7 +1,7 @@ import { styled as styledWithoutDefault } from '@material-ui/styles'; import defaultTheme from './defaultTheme'; -const styled = Component => { +const styled = (Component) => { const componentCreator = styledWithoutDefault(Component); return (style, options) => diff --git a/packages/material-ui/src/styles/transitions.js b/packages/material-ui/src/styles/transitions.js index 2df51895c37438..d19282bc9b9d38 100644 --- a/packages/material-ui/src/styles/transitions.js +++ b/packages/material-ui/src/styles/transitions.js @@ -52,8 +52,8 @@ export default { } = options; if (process.env.NODE_ENV !== 'production') { - const isString = value => typeof value === 'string'; - const isNumber = value => !isNaN(parseFloat(value)); + const isString = (value) => typeof value === 'string'; + const isNumber = (value) => !isNaN(parseFloat(value)); if (!isString(props) && !Array.isArray(props)) { console.error('Material-UI: argument "props" must be a string or Array.'); } @@ -79,7 +79,7 @@ export default { return (Array.isArray(props) ? props : [props]) .map( - animatedProp => + (animatedProp) => `${animatedProp} ${ typeof durationOption === 'string' ? durationOption : formatMs(durationOption) } ${easingOption} ${typeof delay === 'string' ? delay : formatMs(delay)}`, diff --git a/packages/material-ui/src/test-utils/describeConformance.js b/packages/material-ui/src/test-utils/describeConformance.js index 4f56b66e6f6f6b..ee0bb44f062e9e 100644 --- a/packages/material-ui/src/test-utils/describeConformance.js +++ b/packages/material-ui/src/test-utils/describeConformance.js @@ -24,7 +24,7 @@ import testRef from './testRef'; function findRootComponent(wrapper, { component }) { const outermostHostElement = findOutermostIntrinsic(wrapper).getElement(); - return wrapper.find(component).filterWhere(componentWrapper => { + return wrapper.find(component).filterWhere((componentWrapper) => { return componentWrapper.contains(outermostHostElement); }); } @@ -157,7 +157,7 @@ function testReactTestRenderer(element) { it('should render without errors in ReactTestRenderer', () => { ReactTestRenderer.act(() => { ReactTestRenderer.create(element, { - createNodeMock: node => { + createNodeMock: (node) => { return document.createElement(node.type); }, }); @@ -199,8 +199,8 @@ export default function describeConformance(minimalElement, getOptions) { after(runAfterHook); Object.keys(fullSuite) - .filter(testKey => only.indexOf(testKey) !== -1 && skip.indexOf(testKey) === -1) - .forEach(testKey => { + .filter((testKey) => only.indexOf(testKey) !== -1 && skip.indexOf(testKey) === -1) + .forEach((testKey) => { const test = fullSuite[testKey]; test(minimalElement, getOptions); }); diff --git a/packages/material-ui/src/test-utils/findOutermostIntrinsic.js b/packages/material-ui/src/test-utils/findOutermostIntrinsic.js index ef5b76fd9eddda..4756ab19f05abf 100644 --- a/packages/material-ui/src/test-utils/findOutermostIntrinsic.js +++ b/packages/material-ui/src/test-utils/findOutermostIntrinsic.js @@ -15,5 +15,5 @@ export function wrapsIntrinsicElement(reactWrapper) { * @returns {import('enzyme').ReactWrapper} the wrapper for the outermost DOM node */ export default function findOutermostIntrinsic(reactWrapper) { - return reactWrapper.findWhere(n => n.exists() && wrapsIntrinsicElement(n)).first(); + return reactWrapper.findWhere((n) => n.exists() && wrapsIntrinsicElement(n)).first(); } diff --git a/packages/material-ui/src/test-utils/until.test.js b/packages/material-ui/src/test-utils/until.test.js index 976d887ef20245..8bdb4c63decb41 100644 --- a/packages/material-ui/src/test-utils/until.test.js +++ b/packages/material-ui/src/test-utils/until.test.js @@ -5,7 +5,7 @@ import { shallow } from 'enzyme'; import until from './until'; const Div = () =>
    ; -const hoc = Component => () => ; +const hoc = (Component) => () => ; describe('until', () => { it('shallow renders the current wrapper one level deep', () => { diff --git a/packages/material-ui/src/transitions/utils.js b/packages/material-ui/src/transitions/utils.js index a456ed5881dba0..169cbd63a5a58e 100644 --- a/packages/material-ui/src/transitions/utils.js +++ b/packages/material-ui/src/transitions/utils.js @@ -1,4 +1,4 @@ -export const reflow = node => node.scrollTop; +export const reflow = (node) => node.scrollTop; export function getTransitionProps(props, options) { const { timeout, style = {} } = props; diff --git a/packages/material-ui/src/useMediaQuery/useMediaQuery.test.js b/packages/material-ui/src/useMediaQuery/useMediaQuery.test.js index 70cd5fd631c6ac..8242bc58ffdbd3 100644 --- a/packages/material-ui/src/useMediaQuery/useMediaQuery.test.js +++ b/packages/material-ui/src/useMediaQuery/useMediaQuery.test.js @@ -11,15 +11,15 @@ import useMediaQuery from './useMediaQuery'; function createMatchMedia(width, ref) { const listeners = []; - return query => { + return (query) => { const instance = { matches: mediaQuery.match(query, { width, }), - addListener: listener => { + addListener: (listener) => { listeners.push(listener); }, - removeListener: listener => { + removeListener: (listener) => { const index = listeners.indexOf(listener); if (index > -1) { listeners.splice(index, 1); @@ -193,7 +193,7 @@ describe('useMediaQuery', () => { it('should be able to change the query dynamically', () => { const ref = React.createRef(); const text = () => ref.current.textContent; - const Test = props => { + const Test = (props) => { const matches = useMediaQuery(props.query, { defaultMatches: true, }); @@ -215,7 +215,7 @@ describe('useMediaQuery', () => { it('should observe the media query', () => { const ref = React.createRef(); const text = () => ref.current.textContent; - const Test = props => { + const Test = (props) => { const matches = useMediaQuery(props.query); React.useEffect(() => values(matches)); return {`${matches}`}; @@ -249,7 +249,7 @@ describe('useMediaQuery', () => { } const Test = () => { - const ssrMatchMedia = query => ({ + const ssrMatchMedia = (query) => ({ matches: mediaQuery.match(query, { width: 3000, }), diff --git a/packages/material-ui/src/useScrollTrigger/useScrollTrigger.js b/packages/material-ui/src/useScrollTrigger/useScrollTrigger.js index 75d5a798a90649..79e0e331c69cc1 100644 --- a/packages/material-ui/src/useScrollTrigger/useScrollTrigger.js +++ b/packages/material-ui/src/useScrollTrigger/useScrollTrigger.js @@ -26,7 +26,7 @@ export default function useScrollTrigger(options = {}) { const [trigger, setTrigger] = React.useState(() => getTrigger(null, store, other)); React.useEffect(() => { - const handleScroll = event => { + const handleScroll = (event) => { setTrigger(getTrigger(event, store, other)); }; diff --git a/packages/material-ui/src/utils/focusVisible.js b/packages/material-ui/src/utils/focusVisible.js index ae908177ab800d..a331de1971c2a1 100644 --- a/packages/material-ui/src/utils/focusVisible.js +++ b/packages/material-ui/src/utils/focusVisible.js @@ -132,7 +132,7 @@ function handleBlurVisible() { } export function useIsFocusVisible() { - const ref = React.useCallback(instance => { + const ref = React.useCallback((instance) => { const node = ReactDOM.findDOMNode(instance); if (node != null) { prepare(node.ownerDocument); diff --git a/packages/material-ui/src/utils/focusVisible.test.js b/packages/material-ui/src/utils/focusVisible.test.js index 0839eb8166ddda..c33b26578c3d84 100644 --- a/packages/material-ui/src/utils/focusVisible.test.js +++ b/packages/material-ui/src/utils/focusVisible.test.js @@ -30,7 +30,7 @@ const SimpleButton = React.forwardRef(function SimpleButton(props, ref) { } }; - const handleFocus = event => { + const handleFocus = (event) => { if (isFocusVisible(event)) { setFocusVisible(true); } diff --git a/packages/material-ui/src/utils/index.test.js b/packages/material-ui/src/utils/index.test.js index b27a4714b3a0e5..ee7adc18118e45 100644 --- a/packages/material-ui/src/utils/index.test.js +++ b/packages/material-ui/src/utils/index.test.js @@ -77,7 +77,7 @@ describe('utils/index.js', () => { const { innerRef } = props; const ownRef = React.useRef(null); const [, forceUpdate] = React.useState(0); - React.useEffect(() => forceUpdate(n => !n), []); + React.useEffect(() => forceUpdate((n) => !n), []); const handleRef = useForkRef(innerRef, ownRef); diff --git a/packages/material-ui/src/utils/requirePropFactory.js b/packages/material-ui/src/utils/requirePropFactory.js index 702c394c13069b..4d6707aab111be 100644 --- a/packages/material-ui/src/utils/requirePropFactory.js +++ b/packages/material-ui/src/utils/requirePropFactory.js @@ -3,7 +3,13 @@ export default function requirePropFactory(componentNameInError) { return () => null; } - const requireProp = requiredProp => (props, propName, componentName, location, propFullName) => { + const requireProp = (requiredProp) => ( + props, + propName, + componentName, + location, + propFullName, + ) => { const propFullNameSafe = propFullName || propName; if (typeof props[propName] !== 'undefined' && !props[requiredProp]) { diff --git a/packages/material-ui/src/utils/useControlled.js b/packages/material-ui/src/utils/useControlled.js index fbb7ba5a13c062..9d6811f1408eae 100644 --- a/packages/material-ui/src/utils/useControlled.js +++ b/packages/material-ui/src/utils/useControlled.js @@ -37,7 +37,7 @@ export default function useControlled({ controlled, default: defaultProp, name } }, [JSON.stringify(defaultProp)]); } - const setValueIfUncontrolled = React.useCallback(newValue => { + const setValueIfUncontrolled = React.useCallback((newValue) => { if (!isControlled) { setValue(newValue); } diff --git a/packages/material-ui/src/utils/useForkRef.js b/packages/material-ui/src/utils/useForkRef.js index c750c9bb8e4ff5..5e67bbaf0b421e 100644 --- a/packages/material-ui/src/utils/useForkRef.js +++ b/packages/material-ui/src/utils/useForkRef.js @@ -11,7 +11,7 @@ export default function useForkRef(refA, refB) { if (refA == null && refB == null) { return null; } - return refValue => { + return (refValue) => { setRef(refA, refValue); setRef(refB, refValue); }; diff --git a/packages/material-ui/src/withMobileDialog/withMobileDialog.js b/packages/material-ui/src/withMobileDialog/withMobileDialog.js index d68225983bc3ac..95a9ff074eaa55 100644 --- a/packages/material-ui/src/withMobileDialog/withMobileDialog.js +++ b/packages/material-ui/src/withMobileDialog/withMobileDialog.js @@ -7,7 +7,7 @@ import withWidth, { isWidthDown } from '../withWidth'; * (defaults to 'sm' for mobile devices). * Notice that this Higher-order Component is incompatible with server-side rendering. */ -const withMobileDialog = (options = {}) => Component => { +const withMobileDialog = (options = {}) => (Component) => { const { breakpoint = 'sm' } = options; function WithMobileDialog(props) { diff --git a/packages/material-ui/src/withMobileDialog/withMobileDialog.test.js b/packages/material-ui/src/withMobileDialog/withMobileDialog.test.js index 53c1cefc976999..fae76b6ad88300 100644 --- a/packages/material-ui/src/withMobileDialog/withMobileDialog.test.js +++ b/packages/material-ui/src/withMobileDialog/withMobileDialog.test.js @@ -15,7 +15,7 @@ describe('withMobileDialog', () => { }); function isFullScreen(breakpoints, width) { - breakpoints.forEach(breakpoint => { + breakpoints.forEach((breakpoint) => { it(`is for width: ${width} <= ${breakpoint}`, () => { const ResponsiveDialog = withMobileDialog({ breakpoint })(Dialog); const wrapper = shallow( @@ -29,7 +29,7 @@ describe('withMobileDialog', () => { } function isNotFullScreen(breakpoints, width) { - breakpoints.forEach(breakpoint => { + breakpoints.forEach((breakpoint) => { it(`is not for width: ${width} > ${breakpoint}`, () => { const ResponsiveDialog = withMobileDialog({ breakpoint })(Dialog); const wrapper = shallow( diff --git a/packages/material-ui/src/withWidth/withWidth.js b/packages/material-ui/src/withWidth/withWidth.js index fa735d426b6a48..6aa6f849e4d3f7 100644 --- a/packages/material-ui/src/withWidth/withWidth.js +++ b/packages/material-ui/src/withWidth/withWidth.js @@ -25,7 +25,7 @@ export const isWidthDown = (breakpoint, width, inclusive = true) => { const useEnhancedEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect; -const withWidth = (options = {}) => Component => { +const withWidth = (options = {}) => (Component) => { const { withTheme: withThemeOption = false, noSSR = false, diff --git a/packages/material-ui/src/withWidth/withWidth.test.js b/packages/material-ui/src/withWidth/withWidth.test.js index 82259c0dd9311f..657090b9cea444 100644 --- a/packages/material-ui/src/withWidth/withWidth.test.js +++ b/packages/material-ui/src/withWidth/withWidth.test.js @@ -8,16 +8,16 @@ import withWidth, { isWidthDown, isWidthUp } from './withWidth'; import createMuiTheme from '../styles/createMuiTheme'; function createMatchMedia(width, ref) { - return query => { + return (query) => { const listeners = []; const instance = { matches: mediaQuery.match(query, { width, }), - addListener: listener => { + addListener: (listener) => { listeners.push(listener); }, - removeListener: listener => { + removeListener: (listener) => { const index = listeners.indexOf(listener); if (index > -1) { listeners.splice(index, 1); diff --git a/packages/material-ui/test/integration/Menu.test.js b/packages/material-ui/test/integration/Menu.test.js index 917f67876726cf..eb43878c8db072 100644 --- a/packages/material-ui/test/integration/Menu.test.js +++ b/packages/material-ui/test/integration/Menu.test.js @@ -19,7 +19,7 @@ function ButtonMenu(props) { const [anchorEl, setAnchorEl] = React.useState(null); const [selectedIndex, setSelectedIndex] = React.useState(selectedIndexProp || null); - const handleClickListItem = event => { + const handleClickListItem = (event) => { setAnchorEl(event.currentTarget); }; @@ -57,7 +57,7 @@ function ButtonMenu(props) { handleMenuItemClick(event, index)} + onClick={(event) => handleMenuItemClick(event, index)} > {option} diff --git a/packages/material-ui/test/integration/MenuList.test.js b/packages/material-ui/test/integration/MenuList.test.js index 64e484789fe7d3..09992ebbfd271e 100644 --- a/packages/material-ui/test/integration/MenuList.test.js +++ b/packages/material-ui/test/integration/MenuList.test.js @@ -538,7 +538,7 @@ describe(' integration', () => { expect(getByText('Worm')).to.have.focus; }); - it('should reset the character buffer after 500ms', done => { + it('should reset the character buffer after 500ms', (done) => { const { getByText } = render( Worm diff --git a/packages/material-ui/test/integration/Select.test.js b/packages/material-ui/test/integration/Select.test.js index 06e07193326df1..4ede8e1418095b 100644 --- a/packages/material-ui/test/integration/Select.test.js +++ b/packages/material-ui/test/integration/Select.test.js @@ -15,7 +15,7 @@ describe('} value={10} onChange={e => log(e.currentTarget.value)}> +