From aebd94ee8dd1543bb0c620b6f5496783eddb8205 Mon Sep 17 00:00:00 2001 From: Daniel Santoro Date: Wed, 6 Nov 2019 16:32:47 -0500 Subject: [PATCH 1/3] Add name to makeStyles options --- packages/ra-ui-materialui/src/auth/Login.tsx | 51 ++++++++++--------- .../ra-ui-materialui/src/auth/LoginForm.tsx | 31 ++++++----- packages/ra-ui-materialui/src/auth/Logout.tsx | 15 +++--- .../src/button/BulkDeleteWithConfirmButton.js | 23 +++++---- .../src/button/BulkDeleteWithUndoButton.js | 23 +++++---- .../ra-ui-materialui/src/button/Button.js | 43 ++++++++-------- .../src/button/CreateButton.js | 33 ++++++------ .../src/button/DeleteWithConfirmButton.js | 23 +++++---- 8 files changed, 133 insertions(+), 109 deletions(-) diff --git a/packages/ra-ui-materialui/src/auth/Login.tsx b/packages/ra-ui-materialui/src/auth/Login.tsx index ef24e667ee9..b05560155f2 100644 --- a/packages/ra-ui-materialui/src/auth/Login.tsx +++ b/packages/ra-ui-materialui/src/auth/Login.tsx @@ -33,30 +33,33 @@ interface Props { theme: object; } -const useStyles = makeStyles((theme: Theme) => ({ - main: { - display: 'flex', - flexDirection: 'column', - minHeight: '100vh', - height: '1px', - alignItems: 'center', - justifyContent: 'flex-start', - backgroundRepeat: 'no-repeat', - backgroundSize: 'cover', - }, - card: { - minWidth: 300, - marginTop: '6em', - }, - avatar: { - margin: '1em', - display: 'flex', - justifyContent: 'center', - }, - icon: { - backgroundColor: theme.palette.secondary[500], - }, -})); +const useStyles = makeStyles( + (theme: Theme) => ({ + main: { + display: 'flex', + flexDirection: 'column', + minHeight: '100vh', + height: '1px', + alignItems: 'center', + justifyContent: 'flex-start', + backgroundRepeat: 'no-repeat', + backgroundSize: 'cover', + }, + card: { + minWidth: 300, + marginTop: '6em', + }, + avatar: { + margin: '1em', + display: 'flex', + justifyContent: 'center', + }, + icon: { + backgroundColor: theme.palette.secondary[500], + }, + }), + { name: 'Login' } +); /** * A standalone login page, to serve as authentication gate to the admin diff --git a/packages/ra-ui-materialui/src/auth/LoginForm.tsx b/packages/ra-ui-materialui/src/auth/LoginForm.tsx index 6fcbc54016c..d9dff40b9fd 100644 --- a/packages/ra-ui-materialui/src/auth/LoginForm.tsx +++ b/packages/ra-ui-materialui/src/auth/LoginForm.tsx @@ -17,20 +17,23 @@ interface FormData { password: string; } -const useStyles = makeStyles((theme: Theme) => ({ - form: { - padding: '0 1em 1em 1em', - }, - input: { - marginTop: '1em', - }, - button: { - width: '100%', - }, - icon: { - marginRight: theme.spacing(1), - }, -})); +const useStyles = makeStyles( + (theme: Theme) => ({ + form: { + padding: '0 1em 1em 1em', + }, + input: { + marginTop: '1em', + }, + button: { + width: '100%', + }, + icon: { + marginRight: theme.spacing(1), + }, + }), + { name: 'LoginForm' } +); const Input = ({ meta: { touched, error }, // eslint-disable-line react/prop-types diff --git a/packages/ra-ui-materialui/src/auth/Logout.tsx b/packages/ra-ui-materialui/src/auth/Logout.tsx index e0a4b3495ad..d7a10298504 100644 --- a/packages/ra-ui-materialui/src/auth/Logout.tsx +++ b/packages/ra-ui-materialui/src/auth/Logout.tsx @@ -13,12 +13,15 @@ interface Props { redirectTo?: string; } -const useStyles = makeStyles((theme: Theme) => ({ - menuItem: { - color: theme.palette.text.secondary, - }, - icon: { minWidth: theme.spacing(5) }, -})); +const useStyles = makeStyles( + (theme: Theme) => ({ + menuItem: { + color: theme.palette.text.secondary, + }, + icon: { minWidth: theme.spacing(5) }, + }), + { name: 'LogoutWithRef' } +); /** * Logout button component, to be passed to the Admin component diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.js b/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.js index 4ea3de5cdb4..cc359ed4adc 100644 --- a/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.js +++ b/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.js @@ -27,18 +27,21 @@ const sanitizeRestProps = ({ ...rest }) => rest; -const useStyles = makeStyles(theme => ({ - deleteButton: { - color: theme.palette.error.main, - '&:hover': { - backgroundColor: fade(theme.palette.error.main, 0.12), - // Reset on mouse devices - '@media (hover: none)': { - backgroundColor: 'transparent', +const useStyles = makeStyles( + theme => ({ + deleteButton: { + color: theme.palette.error.main, + '&:hover': { + backgroundColor: fade(theme.palette.error.main, 0.12), + // Reset on mouse devices + '@media (hover: none)': { + backgroundColor: 'transparent', + }, }, }, - }, -})); + }), + { name: 'BulkDeleteWithConfirmButton' } +); const BulkDeleteWithConfirmButton = ({ basePath, diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.js b/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.js index 17b465c12ac..c7be7d8c691 100644 --- a/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.js +++ b/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.js @@ -26,18 +26,21 @@ const sanitizeRestProps = ({ ...rest }) => rest; -const useStyles = makeStyles(theme => ({ - deleteButton: { - color: theme.palette.error.main, - '&:hover': { - backgroundColor: fade(theme.palette.error.main, 0.12), - // Reset on mouse devices - '@media (hover: none)': { - backgroundColor: 'transparent', +const useStyles = makeStyles( + theme => ({ + deleteButton: { + color: theme.palette.error.main, + '&:hover': { + backgroundColor: fade(theme.palette.error.main, 0.12), + // Reset on mouse devices + '@media (hover: none)': { + backgroundColor: 'transparent', + }, }, }, - }, -})); + }), + { name: 'BulkDeleteWithUndoButton' } +); const BulkDeleteWithUndoButton = ({ basePath, diff --git a/packages/ra-ui-materialui/src/button/Button.js b/packages/ra-ui-materialui/src/button/Button.js index f741abe8ef5..790a1a34712 100644 --- a/packages/ra-ui-materialui/src/button/Button.js +++ b/packages/ra-ui-materialui/src/button/Button.js @@ -10,27 +10,30 @@ import { import classnames from 'classnames'; import { useTranslate } from 'ra-core'; -const useStyles = makeStyles({ - button: { - display: 'inline-flex', - alignItems: 'center', +const useStyles = makeStyles( + { + button: { + display: 'inline-flex', + alignItems: 'center', + }, + label: { + paddingLeft: '0.5em', + }, + labelRightIcon: { + paddingRight: '0.5em', + }, + smallIcon: { + fontSize: 20, + }, + mediumIcon: { + fontSize: 22, + }, + largeIcon: { + fontSize: 24, + }, }, - label: { - paddingLeft: '0.5em', - }, - labelRightIcon: { - paddingRight: '0.5em', - }, - smallIcon: { - fontSize: 20, - }, - mediumIcon: { - fontSize: 22, - }, - largeIcon: { - fontSize: 24, - }, -}); + { name: 'Button' } +); const Button = ({ alignIcon = 'left', diff --git a/packages/ra-ui-materialui/src/button/CreateButton.js b/packages/ra-ui-materialui/src/button/CreateButton.js index aa448ddb5f9..2a71fa9275c 100644 --- a/packages/ra-ui-materialui/src/button/CreateButton.js +++ b/packages/ra-ui-materialui/src/button/CreateButton.js @@ -9,21 +9,24 @@ import { useTranslate } from 'ra-core'; import Button from './Button'; -const useStyles = makeStyles(theme => ({ - floating: { - color: theme.palette.getContrastText(theme.palette.primary.main), - margin: 0, - top: 'auto', - right: 20, - bottom: 60, - left: 'auto', - position: 'fixed', - zIndex: 1000, - }, - floatingLink: { - color: 'inherit', - }, -})); +const useStyles = makeStyles( + theme => ({ + floating: { + color: theme.palette.getContrastText(theme.palette.primary.main), + margin: 0, + top: 'auto', + right: 20, + bottom: 60, + left: 'auto', + position: 'fixed', + zIndex: 1000, + }, + floatingLink: { + color: 'inherit', + }, + }), + { name: 'CreateButton' } +); const CreateButton = ({ basePath = '', diff --git a/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.js b/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.js index 7e1e4403a28..fc67efd70be 100644 --- a/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.js +++ b/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.js @@ -34,18 +34,21 @@ const sanitizeRestProps = ({ ...rest }) => rest; -const useStyles = makeStyles(theme => ({ - deleteButton: { - color: theme.palette.error.main, - '&:hover': { - backgroundColor: fade(theme.palette.error.main, 0.12), - // Reset on mouse devices - '@media (hover: none)': { - backgroundColor: 'transparent', +const useStyles = makeStyles( + theme => ({ + deleteButton: { + color: theme.palette.error.main, + '&:hover': { + backgroundColor: fade(theme.palette.error.main, 0.12), + // Reset on mouse devices + '@media (hover: none)': { + backgroundColor: 'transparent', + }, }, }, - }, -})); + }), + { name: 'DeleteWithConfirmButton' } +); const DeleteWithConfirmButton = ({ basePath, From fd7ba05c3ed8e4b600339644cebb8f3fc48cfd7c Mon Sep 17 00:00:00 2001 From: Daniel Santoro Date: Thu, 7 Nov 2019 16:48:31 -0500 Subject: [PATCH 2/3] Add name to remaining files --- packages/ra-input-rich-text/src/index.js | 2 +- packages/ra-ui-materialui/src/Link.tsx | 15 +-- packages/ra-ui-materialui/src/auth/Logout.tsx | 2 +- .../src/button/DeleteWithUndoButton.js | 23 +++-- .../ra-ui-materialui/src/button/SaveButton.js | 25 ++--- .../ra-ui-materialui/src/detail/Create.js | 29 +++--- packages/ra-ui-materialui/src/detail/Edit.js | 25 ++--- packages/ra-ui-materialui/src/detail/Show.js | 25 ++--- .../src/detail/TabbedShowLayout.js | 17 ++-- .../src/field/BooleanField.tsx | 31 ++++--- .../ra-ui-materialui/src/field/ChipField.tsx | 9 +- .../ra-ui-materialui/src/field/FileField.tsx | 9 +- .../ra-ui-materialui/src/field/ImageField.tsx | 21 +++-- .../src/field/ReferenceArrayField.js | 9 +- .../src/field/ReferenceField.js | 13 ++- .../ra-ui-materialui/src/form/FormInput.js | 9 +- .../ra-ui-materialui/src/form/TabbedForm.js | 19 ++-- packages/ra-ui-materialui/src/form/Toolbar.js | 65 ++++++------- .../src/input/AutocompleteArrayInput.tsx | 91 ++++++++++--------- .../src/input/AutocompleteInput.tsx | 91 ++++++++++--------- .../src/input/AutocompleteSuggestionItem.tsx | 31 ++++--- .../src/input/AutocompleteSuggestionList.tsx | 19 ++-- .../src/input/CheckboxGroupInput.tsx | 2 +- .../src/input/CheckboxGroupInputItem.tsx | 11 ++- .../ra-ui-materialui/src/input/FileInput.tsx | 29 +++--- .../src/input/FileInputPreview.tsx | 15 +-- .../ra-ui-materialui/src/input/ImageInput.tsx | 57 ++++++------ .../ra-ui-materialui/src/input/Labeled.tsx | 37 ++++---- .../src/input/NullableBooleanInput.tsx | 9 +- .../src/input/RadioButtonGroupInput.tsx | 2 +- .../src/input/ResettableTextField.js | 45 +++++---- .../src/input/SearchInput.tsx | 11 ++- .../src/input/SelectArrayInput.tsx | 31 ++++--- .../src/input/SelectInput.tsx | 13 ++- .../ra-ui-materialui/src/layout/AppBar.js | 61 +++++++------ .../src/layout/CardActions.tsx | 21 +++-- .../src/layout/CardContentInner.js | 29 +++--- .../ra-ui-materialui/src/layout/Confirm.js | 41 +++++---- packages/ra-ui-materialui/src/layout/Error.js | 63 +++++++------ .../src/layout/LinearProgress.js | 15 +-- .../ra-ui-materialui/src/layout/Loading.js | 47 +++++----- .../src/layout/LoadingIndicator.js | 11 ++- packages/ra-ui-materialui/src/layout/Menu.js | 15 +-- .../src/layout/MenuItemLink.js | 21 +++-- .../ra-ui-materialui/src/layout/NotFound.js | 55 +++++------ .../src/layout/Notification.tsx | 29 +++--- .../ra-ui-materialui/src/layout/Sidebar.js | 61 +++++++------ .../ra-ui-materialui/src/layout/TopToolbar.js | 43 +++++---- .../src/list/BulkActionsToolbar.js | 59 ++++++------ .../ra-ui-materialui/src/list/Datagrid.js | 71 ++++++++------- .../src/list/DatagridHeaderCell.js | 19 ++-- .../src/list/DatagridLoading.js | 15 +-- packages/ra-ui-materialui/src/list/Filter.js | 11 ++- .../ra-ui-materialui/src/list/FilterButton.js | 9 +- .../ra-ui-materialui/src/list/FilterForm.js | 25 ++--- .../src/list/FilterFormInput.js | 13 ++- packages/ra-ui-materialui/src/list/List.js | 53 ++++++----- .../ra-ui-materialui/src/list/ListToolbar.js | 43 +++++---- .../src/list/PaginationActions.js | 19 ++-- .../ra-ui-materialui/src/list/SimpleList.js | 15 +-- .../src/list/SingleFieldList.js | 19 ++-- 61 files changed, 950 insertions(+), 775 deletions(-) diff --git a/packages/ra-input-rich-text/src/index.js b/packages/ra-input-rich-text/src/index.js index 9d594e3473a..aa2b736c8e6 100644 --- a/packages/ra-input-rich-text/src/index.js +++ b/packages/ra-input-rich-text/src/index.js @@ -9,7 +9,7 @@ import { makeStyles } from '@material-ui/core/styles'; import styles from './styles'; -const useStyles = makeStyles(styles); +const useStyles = makeStyles(styles, { name: 'RichTextInput' }); const RichTextInput = ({ options = {}, // Quill editor options diff --git a/packages/ra-ui-materialui/src/Link.tsx b/packages/ra-ui-materialui/src/Link.tsx index 1a8295b9e3f..2580283af3d 100644 --- a/packages/ra-ui-materialui/src/Link.tsx +++ b/packages/ra-ui-materialui/src/Link.tsx @@ -4,12 +4,15 @@ import classNames from 'classnames'; import { Link as RRLink } from 'react-router-dom'; import { makeStyles } from '@material-ui/core/styles'; -const useStyles = makeStyles(theme => ({ - link: { - textDecoration: 'none', - color: theme.palette.primary.main, - }, -})); +const useStyles = makeStyles( + theme => ({ + link: { + textDecoration: 'none', + color: theme.palette.primary.main, + }, + }), + { name: 'Link' } +); const Link = ({ to, diff --git a/packages/ra-ui-materialui/src/auth/Logout.tsx b/packages/ra-ui-materialui/src/auth/Logout.tsx index d7a10298504..a085ec59036 100644 --- a/packages/ra-ui-materialui/src/auth/Logout.tsx +++ b/packages/ra-ui-materialui/src/auth/Logout.tsx @@ -20,7 +20,7 @@ const useStyles = makeStyles( }, icon: { minWidth: theme.spacing(5) }, }), - { name: 'LogoutWithRef' } + { name: 'Logout' } ); /** diff --git a/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.js b/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.js index d68300656d5..ca8e7c0cfd1 100644 --- a/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.js +++ b/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.js @@ -32,18 +32,21 @@ export const sanitizeRestProps = ({ ...rest }) => rest; -const useStyles = makeStyles(theme => ({ - deleteButton: { - color: theme.palette.error.main, - '&:hover': { - backgroundColor: fade(theme.palette.error.main, 0.12), - // Reset on mouse devices - '@media (hover: none)': { - backgroundColor: 'transparent', +const useStyles = makeStyles( + theme => ({ + deleteButton: { + color: theme.palette.error.main, + '&:hover': { + backgroundColor: fade(theme.palette.error.main, 0.12), + // Reset on mouse devices + '@media (hover: none)': { + backgroundColor: 'transparent', + }, }, }, - }, -})); + }), + { name: 'DeleteWithUndoButton' } +); const DeleteWithUndoButton = ({ label = 'ra.action.delete', diff --git a/packages/ra-ui-materialui/src/button/SaveButton.js b/packages/ra-ui-materialui/src/button/SaveButton.js index 1a62b454bf5..8b2d5d4a78d 100644 --- a/packages/ra-ui-materialui/src/button/SaveButton.js +++ b/packages/ra-ui-materialui/src/button/SaveButton.js @@ -7,17 +7,20 @@ import ContentSave from '@material-ui/icons/Save'; import classnames from 'classnames'; import { useTranslate, useNotify } from 'ra-core'; -const useStyles = makeStyles(theme => ({ - button: { - position: 'relative', - }, - leftIcon: { - marginRight: theme.spacing(1), - }, - icon: { - fontSize: 18, - }, -})); +const useStyles = makeStyles( + theme => ({ + button: { + position: 'relative', + }, + leftIcon: { + marginRight: theme.spacing(1), + }, + icon: { + fontSize: 18, + }, + }), + { name: 'SaveButton' } +); const sanitizeRestProps = ({ basePath, diff --git a/packages/ra-ui-materialui/src/detail/Create.js b/packages/ra-ui-materialui/src/detail/Create.js index 93b83277cfc..39a32dacafd 100644 --- a/packages/ra-ui-materialui/src/detail/Create.js +++ b/packages/ra-ui-materialui/src/detail/Create.js @@ -68,20 +68,23 @@ Create.propTypes = { successMessage: PropTypes.string, }; -const useStyles = makeStyles(theme => ({ - root: {}, - main: { - display: 'flex', - }, - noActions: { - [theme.breakpoints.up('sm')]: { - marginTop: '1em', +const useStyles = makeStyles( + theme => ({ + root: {}, + main: { + display: 'flex', }, - }, - card: { - flex: '1 1 auto', - }, -})); + noActions: { + [theme.breakpoints.up('sm')]: { + marginTop: '1em', + }, + }, + card: { + flex: '1 1 auto', + }, + }), + { name: 'Create' } +); const sanitizeRestProps = ({ actions, diff --git a/packages/ra-ui-materialui/src/detail/Edit.js b/packages/ra-ui-materialui/src/detail/Edit.js index 5c39955a247..97d1bd7943a 100644 --- a/packages/ra-ui-materialui/src/detail/Edit.js +++ b/packages/ra-ui-materialui/src/detail/Edit.js @@ -70,18 +70,21 @@ Edit.propTypes = { successMessage: PropTypes.string, }; -export const useStyles = makeStyles({ - root: {}, - main: { - display: 'flex', +export const useStyles = makeStyles( + { + root: {}, + main: { + display: 'flex', + }, + noActions: { + marginTop: '1em', + }, + card: { + flex: '1 1 auto', + }, }, - noActions: { - marginTop: '1em', - }, - card: { - flex: '1 1 auto', - }, -}); + { name: 'Edit' } +); const sanitizeRestProps = ({ data, diff --git a/packages/ra-ui-materialui/src/detail/Show.js b/packages/ra-ui-materialui/src/detail/Show.js index 6b6ba148924..de70f74471b 100644 --- a/packages/ra-ui-materialui/src/detail/Show.js +++ b/packages/ra-ui-materialui/src/detail/Show.js @@ -67,18 +67,21 @@ Show.propTypes = { title: PropTypes.node, }; -export const useStyles = makeStyles({ - root: {}, - main: { - display: 'flex', +export const useStyles = makeStyles( + { + root: {}, + main: { + display: 'flex', + }, + noActions: { + marginTop: '1em', + }, + card: { + flex: '1 1 auto', + }, }, - noActions: { - marginTop: '1em', - }, - card: { - flex: '1 1 auto', - }, -}); + { name: 'Show' } +); const sanitizeRestProps = ({ actions, diff --git a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js index ec858534dbb..25506056cda 100644 --- a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js +++ b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js @@ -21,13 +21,16 @@ const sanitizeRestProps = ({ ...rest }) => rest; -const useStyles = makeStyles(theme => ({ - content: { - paddingTop: theme.spacing(1), - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(2), - }, -})); +const useStyles = makeStyles( + theme => ({ + content: { + paddingTop: theme.spacing(1), + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(2), + }, + }), + { name: 'TabbedShow' } +); /** * Tabbed Layout for a Show view, showing fields grouped in tabs. diff --git a/packages/ra-ui-materialui/src/field/BooleanField.tsx b/packages/ra-ui-materialui/src/field/BooleanField.tsx index f801ce9e58f..99b67bcdb17 100644 --- a/packages/ra-ui-materialui/src/field/BooleanField.tsx +++ b/packages/ra-ui-materialui/src/field/BooleanField.tsx @@ -12,25 +12,28 @@ import { useTranslate } from 'ra-core'; import { FieldProps, InjectedFieldProps, fieldPropTypes } from './types'; import sanitizeRestProps from './sanitizeRestProps'; -const useStyles = makeStyles({ - label: { - // Move the text out of the flow of the container. - position: 'absolute', +const useStyles = makeStyles( + { + label: { + // Move the text out of the flow of the container. + position: 'absolute', - // Reduce its height and width to just one pixel. - height: 1, - width: 1, + // Reduce its height and width to just one pixel. + height: 1, + width: 1, - // Hide any overflowing elements or text. - overflow: 'hidden', + // Hide any overflowing elements or text. + overflow: 'hidden', - // Clip the box to zero pixels. - clip: 'rect(0, 0, 0, 0)', + // Clip the box to zero pixels. + clip: 'rect(0, 0, 0, 0)', - // Text won't wrap to a second line. - whiteSpace: 'nowrap', + // Text won't wrap to a second line. + whiteSpace: 'nowrap', + }, }, -}); + { name: 'BooleanField' } +); interface Props extends FieldProps { valueLabelTrue?: string; diff --git a/packages/ra-ui-materialui/src/field/ChipField.tsx b/packages/ra-ui-materialui/src/field/ChipField.tsx index 2a8351005e2..71aea469d69 100644 --- a/packages/ra-ui-materialui/src/field/ChipField.tsx +++ b/packages/ra-ui-materialui/src/field/ChipField.tsx @@ -9,9 +9,12 @@ import classnames from 'classnames'; import sanitizeRestProps from './sanitizeRestProps'; import { FieldProps, InjectedFieldProps, fieldPropTypes } from './types'; -const useStyles = makeStyles({ - chip: { margin: 4 }, -}); +const useStyles = makeStyles( + { + chip: { margin: 4 }, + }, + { name: 'ChipField' } +); export const ChipField: FunctionComponent< FieldProps & InjectedFieldProps & ChipProps diff --git a/packages/ra-ui-materialui/src/field/FileField.tsx b/packages/ra-ui-materialui/src/field/FileField.tsx index eb48018d55d..3e38f9389a5 100644 --- a/packages/ra-ui-materialui/src/field/FileField.tsx +++ b/packages/ra-ui-materialui/src/field/FileField.tsx @@ -7,9 +7,12 @@ import classnames from 'classnames'; import sanitizeRestProps from './sanitizeRestProps'; import { FieldProps, InjectedFieldProps, fieldPropTypes } from './types'; -const useStyles = makeStyles({ - root: { display: 'inline-block' }, -}); +const useStyles = makeStyles( + { + root: { display: 'inline-block' }, + }, + { name: 'FileField' } +); interface Props extends FieldProps { src?: string; diff --git a/packages/ra-ui-materialui/src/field/ImageField.tsx b/packages/ra-ui-materialui/src/field/ImageField.tsx index 25990e014fb..a01ae04cba3 100644 --- a/packages/ra-ui-materialui/src/field/ImageField.tsx +++ b/packages/ra-ui-materialui/src/field/ImageField.tsx @@ -7,16 +7,19 @@ import classnames from 'classnames'; import sanitizeRestProps from './sanitizeRestProps'; import { FieldProps, InjectedFieldProps, fieldPropTypes } from './types'; -const useStyles = makeStyles({ - list: { - display: 'flex', - listStyleType: 'none', +const useStyles = makeStyles( + { + list: { + display: 'flex', + listStyleType: 'none', + }, + image: { + margin: '0.5rem', + maxHeight: '10rem', + }, }, - image: { - margin: '0.5rem', - maxHeight: '10rem', - }, -}); + { name: 'ImageField' } +); interface Props extends FieldProps { src?: string; diff --git a/packages/ra-ui-materialui/src/field/ReferenceArrayField.js b/packages/ra-ui-materialui/src/field/ReferenceArrayField.js index 9e6698d6452..882b1f6e762 100644 --- a/packages/ra-ui-materialui/src/field/ReferenceArrayField.js +++ b/packages/ra-ui-materialui/src/field/ReferenceArrayField.js @@ -73,9 +73,12 @@ ReferenceArrayField.defaultProps = { addLabel: true, }; -const useStyles = makeStyles(theme => ({ - progress: { marginTop: theme.spacing(2) }, -})); +const useStyles = makeStyles( + theme => ({ + progress: { marginTop: theme.spacing(2) }, + }), + { name: 'ReferenceArrayField' } +); export const ReferenceArrayFieldView = ({ children, diff --git a/packages/ra-ui-materialui/src/field/ReferenceField.js b/packages/ra-ui-materialui/src/field/ReferenceField.js index 8e718788958..1e19164393c 100644 --- a/packages/ra-ui-materialui/src/field/ReferenceField.js +++ b/packages/ra-ui-materialui/src/field/ReferenceField.js @@ -113,11 +113,14 @@ ReferenceField.defaultProps = { record: {}, }; -const useStyles = makeStyles(theme => ({ - link: { - color: theme.palette.primary.main, - }, -})); +const useStyles = makeStyles( + theme => ({ + link: { + color: theme.palette.primary.main, + }, + }), + { name: 'ReferenceField' } +); // useful to prevent click bubbling in a datagrid with rowClick const stopPropagation = e => e.stopPropagation(); diff --git a/packages/ra-ui-materialui/src/form/FormInput.js b/packages/ra-ui-materialui/src/form/FormInput.js index 610d0bab4e9..38a8efdd2b7 100644 --- a/packages/ra-ui-materialui/src/form/FormInput.js +++ b/packages/ra-ui-materialui/src/form/FormInput.js @@ -7,9 +7,12 @@ import Labeled from '../input/Labeled'; const sanitizeRestProps = ({ basePath, record, ...rest }) => rest; -const useStyles = makeStyles(theme => ({ - input: { width: theme.spacing(32) }, -})); +const useStyles = makeStyles( + theme => ({ + input: { width: theme.spacing(32) }, + }), + { name: 'FormInput' } +); export const FormInput = ({ input, classes: classesOverride, ...rest }) => { const classes = useStyles({ classes: classesOverride }); diff --git a/packages/ra-ui-materialui/src/form/TabbedForm.js b/packages/ra-ui-materialui/src/form/TabbedForm.js index da520e28baa..5bcdca46bae 100644 --- a/packages/ra-ui-materialui/src/form/TabbedForm.js +++ b/packages/ra-ui-materialui/src/form/TabbedForm.js @@ -18,14 +18,17 @@ import Toolbar from './Toolbar'; import TabbedFormTabs, { getTabFullPath } from './TabbedFormTabs'; import { useRouteMatch, useLocation } from 'react-router-dom'; -const useStyles = makeStyles(theme => ({ - errorTabButton: { color: theme.palette.error.main }, - content: { - paddingTop: theme.spacing(1), - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(2), - }, -})); +const useStyles = makeStyles( + theme => ({ + errorTabButton: { color: theme.palette.error.main }, + content: { + paddingTop: theme.spacing(1), + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(2), + }, + }), + { name: 'TabbedForm' } +); const TabbedForm = ({ initialValues, defaultValue, saving, ...props }) => { let redirect = useRef(props.redirect); diff --git a/packages/ra-ui-materialui/src/form/Toolbar.js b/packages/ra-ui-materialui/src/form/Toolbar.js index dc986c79e8a..57782d0265b 100644 --- a/packages/ra-ui-materialui/src/form/Toolbar.js +++ b/packages/ra-ui-materialui/src/form/Toolbar.js @@ -7,38 +7,41 @@ import classnames from 'classnames'; import { SaveButton, DeleteButton } from '../button'; -const useStyles = makeStyles(theme => ({ - toolbar: { - backgroundColor: - theme.palette.type === 'light' - ? theme.palette.grey[100] - : theme.palette.grey[900], - }, - desktopToolbar: { - marginTop: theme.spacing(2), - }, - mobileToolbar: { - position: 'fixed', - bottom: 0, - left: 0, - right: 0, - padding: '16px', - width: '100%', - boxSizing: 'border-box', - flexShrink: 0, - zIndex: 2, - }, - defaultToolbar: { - flex: 1, - display: 'flex', - justifyContent: 'space-between', - }, - spacer: { - [theme.breakpoints.down('xs')]: { - height: '5em', +const useStyles = makeStyles( + theme => ({ + toolbar: { + backgroundColor: + theme.palette.type === 'light' + ? theme.palette.grey[100] + : theme.palette.grey[900], }, - }, -})); + desktopToolbar: { + marginTop: theme.spacing(2), + }, + mobileToolbar: { + position: 'fixed', + bottom: 0, + left: 0, + right: 0, + padding: '16px', + width: '100%', + boxSizing: 'border-box', + flexShrink: 0, + zIndex: 2, + }, + defaultToolbar: { + flex: 1, + display: 'flex', + justifyContent: 'space-between', + }, + spacer: { + [theme.breakpoints.down('xs')]: { + height: '5em', + }, + }, + }), + { name: 'Toolbar' } +); const valueOrDefault = (value, defaultValue) => typeof value === 'undefined' ? defaultValue : value; diff --git a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx index 401207267e5..6ae6c38cc61 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx +++ b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx @@ -466,51 +466,54 @@ const AutocompleteArrayInput: FunctionComponent< ); }; -const useStyles = makeStyles(theme => { - const chipBackgroundColor = - theme.palette.type === 'light' - ? 'rgba(0, 0, 0, 0.09)' - : 'rgba(255, 255, 255, 0.09)'; +const useStyles = makeStyles( + theme => { + const chipBackgroundColor = + theme.palette.type === 'light' + ? 'rgba(0, 0, 0, 0.09)' + : 'rgba(255, 255, 255, 0.09)'; - return { - root: { - flexGrow: 1, - height: 250, - }, - container: { - flexGrow: 1, - position: 'relative', - }, - paper: { - position: 'absolute', - zIndex: 1, - marginTop: theme.spacing(1), - left: 0, - right: 0, - }, - chip: { - margin: theme.spacing(0.5, 0.5, 0.5, 0), - }, - chipContainerFilled: { - margin: '27px 12px 10px 0', - }, - inputRoot: { - flexWrap: 'wrap', - }, - inputRootFilled: { - flexWrap: 'wrap', - '& $chip': { - backgroundColor: chipBackgroundColor, + return { + root: { + flexGrow: 1, + height: 250, }, - }, - inputInput: { - width: 'auto', - flexGrow: 1, - }, - divider: { - height: theme.spacing(2), - }, - }; -}); + container: { + flexGrow: 1, + position: 'relative', + }, + paper: { + position: 'absolute', + zIndex: 1, + marginTop: theme.spacing(1), + left: 0, + right: 0, + }, + chip: { + margin: theme.spacing(0.5, 0.5, 0.5, 0), + }, + chipContainerFilled: { + margin: '27px 12px 10px 0', + }, + inputRoot: { + flexWrap: 'wrap', + }, + inputRootFilled: { + flexWrap: 'wrap', + '& $chip': { + backgroundColor: chipBackgroundColor, + }, + }, + inputInput: { + width: 'auto', + flexGrow: 1, + }, + divider: { + height: theme.spacing(2), + }, + }; + }, + { name: 'AutocompleteArrayInput' } +); export default AutocompleteArrayInput; diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx index 3d1cb4a9fff..397b20466f8 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx +++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx @@ -411,51 +411,54 @@ const AutocompleteInput: FunctionComponent< ); }; -const useStyles = makeStyles(theme => { - const chipBackgroundColor = - theme.palette.type === 'light' - ? 'rgba(0, 0, 0, 0.09)' - : 'rgba(255, 255, 255, 0.09)'; +const useStyles = makeStyles( + theme => { + const chipBackgroundColor = + theme.palette.type === 'light' + ? 'rgba(0, 0, 0, 0.09)' + : 'rgba(255, 255, 255, 0.09)'; - return { - root: { - flexGrow: 1, - height: 250, - }, - container: { - flexGrow: 1, - position: 'relative', - }, - paper: { - position: 'absolute', - zIndex: 1, - marginTop: theme.spacing(1), - left: 0, - right: 0, - }, - chip: { - margin: theme.spacing(0.5, 0.5, 0.5, 0), - }, - chipContainerFilled: { - margin: '27px 12px 10px 0', - }, - inputRoot: { - flexWrap: 'wrap', - }, - inputRootFilled: { - flexWrap: 'wrap', - '& $chip': { - backgroundColor: chipBackgroundColor, + return { + root: { + flexGrow: 1, + height: 250, }, - }, - inputInput: { - width: 'auto', - flexGrow: 1, - }, - divider: { - height: theme.spacing(2), - }, - }; -}); + container: { + flexGrow: 1, + position: 'relative', + }, + paper: { + position: 'absolute', + zIndex: 1, + marginTop: theme.spacing(1), + left: 0, + right: 0, + }, + chip: { + margin: theme.spacing(0.5, 0.5, 0.5, 0), + }, + chipContainerFilled: { + margin: '27px 12px 10px 0', + }, + inputRoot: { + flexWrap: 'wrap', + }, + inputRootFilled: { + flexWrap: 'wrap', + '& $chip': { + backgroundColor: chipBackgroundColor, + }, + }, + inputInput: { + width: 'auto', + flexGrow: 1, + }, + divider: { + height: theme.spacing(2), + }, + }; + }, + { name: 'AutocompleteInput' } +); export default AutocompleteInput; diff --git a/packages/ra-ui-materialui/src/input/AutocompleteSuggestionItem.tsx b/packages/ra-ui-materialui/src/input/AutocompleteSuggestionItem.tsx index 2e2280f322a..c46f0194123 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteSuggestionItem.tsx +++ b/packages/ra-ui-materialui/src/input/AutocompleteSuggestionItem.tsx @@ -5,20 +5,23 @@ import { makeStyles, MenuItem } from '@material-ui/core'; import { MenuItemProps } from '@material-ui/core/MenuItem'; import classnames from 'classnames'; -const useStyles = makeStyles(theme => ({ - root: { - fontWeight: 400, - }, - selected: { - fontWeight: 500, - }, - suggestion: { - display: 'block', - fontFamily: theme.typography.fontFamily, - }, - suggestionText: { fontWeight: 300 }, - highlightedSuggestionText: { fontWeight: 500 }, -})); +const useStyles = makeStyles( + theme => ({ + root: { + fontWeight: 400, + }, + selected: { + fontWeight: 500, + }, + suggestion: { + display: 'block', + fontFamily: theme.typography.fontFamily, + }, + suggestionText: { fontWeight: 300 }, + highlightedSuggestionText: { fontWeight: 500 }, + }), + { name: 'AutocompleteSuggestionItem' } +); interface Props { suggestion: any; diff --git a/packages/ra-ui-materialui/src/input/AutocompleteSuggestionList.tsx b/packages/ra-ui-materialui/src/input/AutocompleteSuggestionList.tsx index 7474a9ddf64..56c2c8593e7 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteSuggestionList.tsx +++ b/packages/ra-ui-materialui/src/input/AutocompleteSuggestionList.tsx @@ -1,15 +1,18 @@ import React, { ReactNode, FunctionComponent } from 'react'; import { makeStyles, Paper, Popper } from '@material-ui/core'; -const useStyles = makeStyles({ - suggestionsContainer: { - zIndex: 2, +const useStyles = makeStyles( + { + suggestionsContainer: { + zIndex: 2, + }, + suggestionsPaper: { + maxHeight: '50vh', + overflowY: 'auto', + }, }, - suggestionsPaper: { - maxHeight: '50vh', - overflowY: 'auto', - }, -}); + { name: 'AutocompleteSuggestionList' } +); interface Props { children: ReactNode; diff --git a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx index be5ea498e83..98bfbfff05e 100644 --- a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx +++ b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx @@ -26,7 +26,7 @@ const useStyles = makeStyles(theme => ({ transform: 'translate(0, 8px) scale(0.75)', transformOrigin: `top ${theme.direction === 'ltr' ? 'left' : 'right'}`, }, -})); +}), { name: 'CheckboxGroupInput' }); /** * An Input component for a checkbox group, using an array of objects for the options diff --git a/packages/ra-ui-materialui/src/input/CheckboxGroupInputItem.tsx b/packages/ra-ui-materialui/src/input/CheckboxGroupInputItem.tsx index ccbea65ba05..748a9c91bc1 100644 --- a/packages/ra-ui-materialui/src/input/CheckboxGroupInputItem.tsx +++ b/packages/ra-ui-materialui/src/input/CheckboxGroupInputItem.tsx @@ -4,11 +4,14 @@ import Checkbox from '@material-ui/core/Checkbox'; import { makeStyles } from '@material-ui/core/styles'; import { useChoices } from 'ra-core'; -const useStyles = makeStyles({ - checkbox: { - height: 32, +const useStyles = makeStyles( + { + checkbox: { + height: 32, + }, }, -}); + { name: 'CheckboxGroupInputItem' } +); const CheckboxGroupInputItem = ({ id, diff --git a/packages/ra-ui-materialui/src/input/FileInput.tsx b/packages/ra-ui-materialui/src/input/FileInput.tsx index 7a7d6fe6e62..573b9228520 100644 --- a/packages/ra-ui-materialui/src/input/FileInput.tsx +++ b/packages/ra-ui-materialui/src/input/FileInput.tsx @@ -18,18 +18,23 @@ import FileInputPreview from './FileInputPreview'; import sanitizeRestProps from './sanitizeRestProps'; import InputHelperText from './InputHelperText'; -const useStyles = makeStyles(theme => ({ - dropZone: { - background: theme.palette.background.default, - cursor: 'pointer', - padding: theme.spacing(1), - textAlign: 'center', - color: theme.palette.getContrastText(theme.palette.background.default), - }, - preview: {}, - removeButton: {}, - root: { width: '100%' }, -})); +const useStyles = makeStyles( + theme => ({ + dropZone: { + background: theme.palette.background.default, + cursor: 'pointer', + padding: theme.spacing(1), + textAlign: 'center', + color: theme.palette.getContrastText( + theme.palette.background.default + ), + }, + preview: {}, + removeButton: {}, + root: { width: '100%' }, + }), + { name: 'FileInput' } +); export interface FileInputProps { accept?: string; diff --git a/packages/ra-ui-materialui/src/input/FileInputPreview.tsx b/packages/ra-ui-materialui/src/input/FileInputPreview.tsx index 04b856c2b0a..9b46f1405d4 100644 --- a/packages/ra-ui-materialui/src/input/FileInputPreview.tsx +++ b/packages/ra-ui-materialui/src/input/FileInputPreview.tsx @@ -5,12 +5,15 @@ import RemoveCircle from '@material-ui/icons/RemoveCircle'; import IconButton from '@material-ui/core/IconButton'; import { useTranslate } from 'ra-core'; -const useStyles = makeStyles(theme => ({ - removeButton: {}, - removeIcon: { - color: theme.palette.error.main, - }, -})); +const useStyles = makeStyles( + theme => ({ + removeButton: {}, + removeIcon: { + color: theme.palette.error.main, + }, + }), + { name: 'FileInputPreview' } +); interface Props { children: ReactNode; diff --git a/packages/ra-ui-materialui/src/input/ImageInput.tsx b/packages/ra-ui-materialui/src/input/ImageInput.tsx index 47c26826b62..1b3aa365018 100644 --- a/packages/ra-ui-materialui/src/input/ImageInput.tsx +++ b/packages/ra-ui-materialui/src/input/ImageInput.tsx @@ -4,34 +4,39 @@ import { makeStyles } from '@material-ui/core/styles'; import FileInput, { FileInputProps, FileInputOptions } from './FileInput'; import { InputProps } from 'ra-core'; -const useStyles = makeStyles(theme => ({ - root: { width: '100%' }, - dropZone: { - background: theme.palette.background.default, - cursor: 'pointer', - padding: theme.spacing(1), - textAlign: 'center', - color: theme.palette.getContrastText(theme.palette.background.default), - }, - preview: { - display: 'inline-block', - }, - removeButton: { - display: 'inline-block', - position: 'relative', - float: 'left', - '& button': { - position: 'absolute', - top: theme.spacing(1), - right: theme.spacing(1), - minWidth: theme.spacing(2), - opacity: 0, +const useStyles = makeStyles( + theme => ({ + root: { width: '100%' }, + dropZone: { + background: theme.palette.background.default, + cursor: 'pointer', + padding: theme.spacing(1), + textAlign: 'center', + color: theme.palette.getContrastText( + theme.palette.background.default + ), }, - '&:hover button': { - opacity: 1, + preview: { + display: 'inline-block', }, - }, -})); + removeButton: { + display: 'inline-block', + position: 'relative', + float: 'left', + '& button': { + position: 'absolute', + top: theme.spacing(1), + right: theme.spacing(1), + minWidth: theme.spacing(2), + opacity: 0, + }, + '&:hover button': { + opacity: 1, + }, + }, + }), + { name: 'ImageInput' } +); const ImageInput = (props: FileInputProps & InputProps) => { const classes = useStyles(props); diff --git a/packages/ra-ui-materialui/src/input/Labeled.tsx b/packages/ra-ui-materialui/src/input/Labeled.tsx index 1e0f64837e3..2e761736089 100644 --- a/packages/ra-ui-materialui/src/input/Labeled.tsx +++ b/packages/ra-ui-materialui/src/input/Labeled.tsx @@ -5,23 +5,26 @@ import FormControl from '@material-ui/core/FormControl'; import { makeStyles } from '@material-ui/core/styles'; import { FieldTitle } from 'ra-core'; -const useStyles = makeStyles(theme => ({ - label: { - position: 'relative', - }, - value: { - fontFamily: theme.typography.fontFamily, - color: 'currentColor', - padding: `${theme.spacing(1)}px 0 ${theme.spacing(1) / 2}px`, - border: 0, - boxSizing: 'content-box', - verticalAlign: 'middle', - background: 'none', - margin: 0, // Reset for Safari - display: 'block', - width: '100%', - }, -})); +const useStyles = makeStyles( + theme => ({ + label: { + position: 'relative', + }, + value: { + fontFamily: theme.typography.fontFamily, + color: 'currentColor', + padding: `${theme.spacing(1)}px 0 ${theme.spacing(1) / 2}px`, + border: 0, + boxSizing: 'content-box', + verticalAlign: 'middle', + background: 'none', + margin: 0, // Reset for Safari + display: 'block', + width: '100%', + }, + }), + { name: 'Labeled' } +); interface Props { children: ReactElement; diff --git a/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx b/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx index a72724e5eb1..388fd6619c3 100644 --- a/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx +++ b/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx @@ -9,9 +9,12 @@ import { useInput, useTranslate, FieldTitle, InputProps } from 'ra-core'; import sanitizeRestProps from './sanitizeRestProps'; import InputHelperText from './InputHelperText'; -const useStyles = makeStyles(theme => ({ - input: { width: theme.spacing(16) }, -})); +const useStyles = makeStyles( + theme => ({ + input: { width: theme.spacing(16) }, + }), + { name: 'NullableBooleanInput' } +); const getBooleanFromString = (value: string): boolean | null => { if (value === 'true') return true; diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx index e2ec097f990..f5fda037cf7 100644 --- a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx +++ b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx @@ -21,7 +21,7 @@ const useStyles = makeStyles(theme => ({ transform: 'translate(0, 5px) scale(0.75)', transformOrigin: `top ${theme.direction === 'ltr' ? 'left' : 'right'}`, }, -})); +}), { name: 'RadioButtonGroupInput' }); /** * An Input component for a radio button group, using an array of objects for the options diff --git a/packages/ra-ui-materialui/src/input/ResettableTextField.js b/packages/ra-ui-materialui/src/input/ResettableTextField.js index d6ad093f0b0..f011b5e0394 100644 --- a/packages/ra-ui-materialui/src/input/ResettableTextField.js +++ b/packages/ra-ui-materialui/src/input/ResettableTextField.js @@ -8,30 +8,29 @@ import { makeStyles } from '@material-ui/core/styles'; import ClearIcon from '@material-ui/icons/Clear'; import { useTranslate } from 'ra-core'; -const useStyles = makeStyles({ - clearIcon: { - height: 16, - width: 0, - }, - visibleClearIcon: { - width: 16, - }, - clearButton: { - height: 24, - padding: 0, - width: 0, - }, - visibleClearButton: { - width: 24, - }, - selectAdornment: { - position: 'absolute', - right: 24, - }, - inputAdornedEnd: { - paddingRight: 0, +const useStyles = makeStyles( + { + clearIcon: { + height: 16, + width: 0, + }, + visibleClearIcon: { + width: 16, + }, + clearButton: { + height: 24, + padding: 0, + width: 0, + }, + visibleClearButton: { + width: 24, + }, + selectAdornment: { + marginRight: 12, + }, }, -}); + { name: 'ResettableTextField' } +); const handleMouseDownClearButton = event => { event.preventDefault(); diff --git a/packages/ra-ui-materialui/src/input/SearchInput.tsx b/packages/ra-ui-materialui/src/input/SearchInput.tsx index d2da2728f2f..12a90a7014a 100644 --- a/packages/ra-ui-materialui/src/input/SearchInput.tsx +++ b/packages/ra-ui-materialui/src/input/SearchInput.tsx @@ -7,11 +7,14 @@ import { useTranslate, InputProps } from 'ra-core'; import TextInput from './TextInput'; -const useStyles = makeStyles({ - input: { - marginTop: 32, +const useStyles = makeStyles( + { + input: { + marginTop: 32, + }, }, -}); + { name: 'SearchInput' } +); const SearchInput: FunctionComponent< InputProps & Omit diff --git a/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx b/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx index 5b90afa68a5..019f2ceb525 100644 --- a/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx +++ b/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx @@ -64,20 +64,23 @@ const sanitizeRestProps = ({ ...rest }: any) => rest; -const useStyles = makeStyles(theme => ({ - root: {}, - chips: { - display: 'flex', - flexWrap: 'wrap', - }, - chip: { - margin: theme.spacing(1 / 4), - }, - select: { - height: 'auto', - overflow: 'auto', - }, -})); +const useStyles = makeStyles( + theme => ({ + root: {}, + chips: { + display: 'flex', + flexWrap: 'wrap', + }, + chip: { + margin: theme.spacing(1 / 4), + }, + select: { + height: 'auto', + overflow: 'auto', + }, + }), + { name: 'SelectArrayInput' } +); /** * An Input component for a select box allowing multiple selections, using an array of objects for the options diff --git a/packages/ra-ui-materialui/src/input/SelectInput.tsx b/packages/ra-ui-materialui/src/input/SelectInput.tsx index a7118c27685..7323bda76cc 100644 --- a/packages/ra-ui-materialui/src/input/SelectInput.tsx +++ b/packages/ra-ui-materialui/src/input/SelectInput.tsx @@ -57,11 +57,14 @@ const sanitizeRestProps = ({ ...rest }: any) => rest; -const useStyles = makeStyles(theme => ({ - input: { - minWidth: theme.spacing(20), - }, -})); +const useStyles = makeStyles( + theme => ({ + input: { + minWidth: theme.spacing(20), + }, + }), + { name: 'SelectInput' } +); /** * An Input component for a select box, using an array of objects for the options diff --git a/packages/ra-ui-materialui/src/layout/AppBar.js b/packages/ra-ui-materialui/src/layout/AppBar.js index 9449a896912..597356b4d77 100644 --- a/packages/ra-ui-materialui/src/layout/AppBar.js +++ b/packages/ra-ui-materialui/src/layout/AppBar.js @@ -15,35 +15,38 @@ import LoadingIndicator from './LoadingIndicator'; import DefaultUserMenu from './UserMenu'; import HideOnScroll from './HideOnScroll'; -const useStyles = makeStyles(theme => ({ - toolbar: { - paddingRight: 24, - }, - menuButton: { - marginLeft: '0.5em', - marginRight: '0.5em', - }, - menuButtonIconClosed: { - transition: theme.transitions.create(['transform'], { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen, - }), - transform: 'rotate(0deg)', - }, - menuButtonIconOpen: { - transition: theme.transitions.create(['transform'], { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen, - }), - transform: 'rotate(180deg)', - }, - title: { - flex: 1, - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', - overflow: 'hidden', - }, -})); +const useStyles = makeStyles( + theme => ({ + toolbar: { + paddingRight: 24, + }, + menuButton: { + marginLeft: '0.5em', + marginRight: '0.5em', + }, + menuButtonIconClosed: { + transition: theme.transitions.create(['transform'], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + transform: 'rotate(0deg)', + }, + menuButtonIconOpen: { + transition: theme.transitions.create(['transform'], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + transform: 'rotate(180deg)', + }, + title: { + flex: 1, + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + overflow: 'hidden', + }, + }), + { name: 'AppBar' } +); const AppBar = ({ children, diff --git a/packages/ra-ui-materialui/src/layout/CardActions.tsx b/packages/ra-ui-materialui/src/layout/CardActions.tsx index a81dd9a5994..d17fb26082d 100644 --- a/packages/ra-ui-materialui/src/layout/CardActions.tsx +++ b/packages/ra-ui-materialui/src/layout/CardActions.tsx @@ -4,16 +4,19 @@ import { warning } from 'ra-core'; import { makeStyles } from '@material-ui/core/styles'; import classnames from 'classnames'; -const useStyles = makeStyles({ - cardActions: { - zIndex: 2, - display: 'flex', - alignItems: 'flex-start', - justifyContent: 'flex-end', - flexWrap: 'wrap', - padding: 0, +const useStyles = makeStyles( + { + cardActions: { + zIndex: 2, + display: 'flex', + alignItems: 'flex-start', + justifyContent: 'flex-end', + flexWrap: 'wrap', + padding: 0, + }, }, -}); + { name: 'CardActions' } +); const CardActions = ({ className, children, ...rest }) => { warning( diff --git a/packages/ra-ui-materialui/src/layout/CardContentInner.js b/packages/ra-ui-materialui/src/layout/CardContentInner.js index 668a7c54224..bd1965d1cd5 100644 --- a/packages/ra-ui-materialui/src/layout/CardContentInner.js +++ b/packages/ra-ui-materialui/src/layout/CardContentInner.js @@ -4,21 +4,24 @@ import classnames from 'classnames'; import CardContent from '@material-ui/core/CardContent'; import { makeStyles } from '@material-ui/core/styles'; -var useStyles = makeStyles(theme => ({ - root: { - paddingTop: 0, - paddingBottom: 0, - '&:first-child': { - paddingTop: 16, - }, - '&:last-child': { - paddingBottom: 16, - [theme.breakpoints.only('xs')]: { - paddingBottom: 70, +var useStyles = makeStyles( + theme => ({ + root: { + paddingTop: 0, + paddingBottom: 0, + '&:first-child': { + paddingTop: 16, + }, + '&:last-child': { + paddingBottom: 16, + [theme.breakpoints.only('xs')]: { + paddingBottom: 70, + }, }, }, - }, -})); + }), + { name: 'CardContentInner' } +); /** * Overrides material-ui CardContent to allow inner content diff --git a/packages/ra-ui-materialui/src/layout/Confirm.js b/packages/ra-ui-materialui/src/layout/Confirm.js index 6ba5ec46759..8e6ae756efe 100644 --- a/packages/ra-ui-materialui/src/layout/Confirm.js +++ b/packages/ra-ui-materialui/src/layout/Confirm.js @@ -13,27 +13,30 @@ import AlertError from '@material-ui/icons/ErrorOutline'; import classnames from 'classnames'; import { useTranslate } from 'ra-core'; -const useStyles = makeStyles(theme => ({ - contentText: { - minWidth: 400, - }, - confirmPrimary: { - color: theme.palette.primary.main, - }, - confirmWarning: { - color: theme.palette.error.main, - '&:hover': { - backgroundColor: fade(theme.palette.error.main, 0.12), - // Reset on mouse devices - '@media (hover: none)': { - backgroundColor: 'transparent', +const useStyles = makeStyles( + theme => ({ + contentText: { + minWidth: 400, + }, + confirmPrimary: { + color: theme.palette.primary.main, + }, + confirmWarning: { + color: theme.palette.error.main, + '&:hover': { + backgroundColor: fade(theme.palette.error.main, 0.12), + // Reset on mouse devices + '@media (hover: none)': { + backgroundColor: 'transparent', + }, }, }, - }, - iconPaddingStyle: { - paddingRight: '0.5em', - }, -})); + iconPaddingStyle: { + paddingRight: '0.5em', + }, + }), + { name: 'Confirm' } +); /** * Confirmation dialog diff --git a/packages/ra-ui-materialui/src/layout/Error.js b/packages/ra-ui-materialui/src/layout/Error.js index ea35ff46bf5..2eb67d1a6bd 100644 --- a/packages/ra-ui-materialui/src/layout/Error.js +++ b/packages/ra-ui-materialui/src/layout/Error.js @@ -13,37 +13,40 @@ import History from '@material-ui/icons/History'; import Title, { TitlePropType } from './Title'; import { useTranslate } from 'ra-core'; -const useStyles = makeStyles(theme => ({ - container: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - [theme.breakpoints.down('sm')]: { - padding: '1em', +const useStyles = makeStyles( + theme => ({ + container: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + [theme.breakpoints.down('sm')]: { + padding: '1em', + }, + fontFamily: 'Roboto, sans-serif', + opacity: 0.5, }, - fontFamily: 'Roboto, sans-serif', - opacity: 0.5, - }, - title: { - display: 'flex', - alignItems: 'center', - }, - icon: { - width: '2em', - height: '2em', - marginRight: '0.5em', - }, - panel: { - marginTop: '1em', - }, - panelDetails: { - whiteSpace: 'pre-wrap', - }, - toolbar: { - marginTop: '2em', - }, -})); + title: { + display: 'flex', + alignItems: 'center', + }, + icon: { + width: '2em', + height: '2em', + marginRight: '0.5em', + }, + panel: { + marginTop: '1em', + }, + panelDetails: { + whiteSpace: 'pre-wrap', + }, + toolbar: { + marginTop: '2em', + }, + }), + { name: 'Error' } +); function goBack() { window.history.go(-1); diff --git a/packages/ra-ui-materialui/src/layout/LinearProgress.js b/packages/ra-ui-materialui/src/layout/LinearProgress.js index ab7423d0661..09f32b87a88 100644 --- a/packages/ra-ui-materialui/src/layout/LinearProgress.js +++ b/packages/ra-ui-materialui/src/layout/LinearProgress.js @@ -4,12 +4,15 @@ import PropTypes from 'prop-types'; import { makeStyles } from '@material-ui/core/styles'; import classnames from 'classnames'; -const useStyles = makeStyles(theme => ({ - root: { - margin: `${theme.spacing(1)}px 0`, - width: `${theme.spacing(20)}px`, - }, -})); +const useStyles = makeStyles( + theme => ({ + root: { + margin: `${theme.spacing(1)}px 0`, + width: `${theme.spacing(20)}px`, + }, + }), + { name: 'LinearProgress' } +); /** * Progress bar formatted to replace an input or a field in a form layout diff --git a/packages/ra-ui-materialui/src/layout/Loading.js b/packages/ra-ui-materialui/src/layout/Loading.js index a00016fea4b..22930fdd73d 100644 --- a/packages/ra-ui-materialui/src/layout/Loading.js +++ b/packages/ra-ui-materialui/src/layout/Loading.js @@ -5,30 +5,33 @@ import classnames from 'classnames'; import CircularProgress from '@material-ui/core/CircularProgress'; import { useTranslate } from 'ra-core'; -const useStyles = makeStyles(theme => ({ - container: { - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - [theme.breakpoints.up('md')]: { - height: '100%', +const useStyles = makeStyles( + theme => ({ + container: { + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + [theme.breakpoints.up('md')]: { + height: '100%', + }, + [theme.breakpoints.down('sm')]: { + height: '100vh', + marginTop: '-3em', + }, }, - [theme.breakpoints.down('sm')]: { - height: '100vh', - marginTop: '-3em', + icon: { + width: '9em', + height: '9em', }, - }, - icon: { - width: '9em', - height: '9em', - }, - message: { - textAlign: 'center', - fontFamily: 'Roboto, sans-serif', - opacity: 0.5, - margin: '0 1em', - }, -})); + message: { + textAlign: 'center', + fontFamily: 'Roboto, sans-serif', + opacity: 0.5, + margin: '0 1em', + }, + }), + { name: 'Loading' } +); const Loading = ({ classes: classesOverride, diff --git a/packages/ra-ui-materialui/src/layout/LoadingIndicator.js b/packages/ra-ui-materialui/src/layout/LoadingIndicator.js index 812b1594215..0b7cc075f21 100644 --- a/packages/ra-ui-materialui/src/layout/LoadingIndicator.js +++ b/packages/ra-ui-materialui/src/layout/LoadingIndicator.js @@ -7,11 +7,14 @@ import CircularProgress from '@material-ui/core/CircularProgress'; import RefreshIconButton from '../button/RefreshIconButton'; -const useStyles = makeStyles({ - loader: { - margin: 14, +const useStyles = makeStyles( + { + loader: { + margin: 14, + }, }, -}); + { name: 'LoadingIndicator' } +); export const LoadingIndicator = ({ classes: classesOverride, diff --git a/packages/ra-ui-materialui/src/layout/Menu.js b/packages/ra-ui-materialui/src/layout/Menu.js index ca70f217b48..4fcbe25ca7b 100644 --- a/packages/ra-ui-materialui/src/layout/Menu.js +++ b/packages/ra-ui-materialui/src/layout/Menu.js @@ -10,13 +10,16 @@ import { getResources, useTranslate } from 'ra-core'; import DashboardMenuItem from './DashboardMenuItem'; import MenuItemLink from './MenuItemLink'; -const useStyles = makeStyles({ - main: { - display: 'flex', - flexDirection: 'column', - justifyContent: 'flex-start', +const useStyles = makeStyles( + { + main: { + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-start', + }, }, -}); + { name: 'Menu' } +); const translatedResourceName = (resource, translate) => translate(`resources.${resource.name}.name`, { diff --git a/packages/ra-ui-materialui/src/layout/MenuItemLink.js b/packages/ra-ui-materialui/src/layout/MenuItemLink.js index 9b06c408a1c..5f82fe9ff5e 100644 --- a/packages/ra-ui-materialui/src/layout/MenuItemLink.js +++ b/packages/ra-ui-materialui/src/layout/MenuItemLink.js @@ -11,15 +11,18 @@ const NavLinkRef = React.forwardRef((props, ref) => ( )); -const useStyles = makeStyles(theme => ({ - root: { - color: theme.palette.text.secondary, - }, - active: { - color: theme.palette.text.primary, - }, - icon: { minWidth: theme.spacing(5) }, -})); +const useStyles = makeStyles( + theme => ({ + root: { + color: theme.palette.text.secondary, + }, + active: { + color: theme.palette.text.primary, + }, + icon: { minWidth: theme.spacing(5) }, + }), + { name: 'MenuItemLink' } +); const MenuItemLink = forwardRef( ( diff --git a/packages/ra-ui-materialui/src/layout/NotFound.js b/packages/ra-ui-materialui/src/layout/NotFound.js index 2e2b4459ed2..190e2498011 100644 --- a/packages/ra-ui-materialui/src/layout/NotFound.js +++ b/packages/ra-ui-materialui/src/layout/NotFound.js @@ -9,34 +9,37 @@ import classnames from 'classnames'; import { useTranslate, Authenticated } from 'ra-core'; import Title from './Title'; -const useStyles = makeStyles(theme => ({ - container: { - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - [theme.breakpoints.up('md')]: { - height: '100%', +const useStyles = makeStyles( + theme => ({ + container: { + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + [theme.breakpoints.up('md')]: { + height: '100%', + }, + [theme.breakpoints.down('sm')]: { + height: '100vh', + marginTop: '-3em', + }, }, - [theme.breakpoints.down('sm')]: { - height: '100vh', - marginTop: '-3em', + icon: { + width: '9em', + height: '9em', }, - }, - icon: { - width: '9em', - height: '9em', - }, - message: { - textAlign: 'center', - fontFamily: 'Roboto, sans-serif', - opacity: 0.5, - margin: '0 1em', - }, - toolbar: { - textAlign: 'center', - marginTop: '2em', - }, -})); + message: { + textAlign: 'center', + fontFamily: 'Roboto, sans-serif', + opacity: 0.5, + margin: '0 1em', + }, + toolbar: { + textAlign: 'center', + marginTop: '2em', + }, + }), + { name: 'NotFound' } +); function goBack() { window.history.go(-1); diff --git a/packages/ra-ui-materialui/src/layout/Notification.tsx b/packages/ra-ui-materialui/src/layout/Notification.tsx index 5c81379a2d8..3d750fc9f57 100644 --- a/packages/ra-ui-materialui/src/layout/Notification.tsx +++ b/packages/ra-ui-materialui/src/layout/Notification.tsx @@ -19,19 +19,22 @@ interface Props { type?: string; } -const useStyles = makeStyles((theme: Theme) => ({ - error: { - backgroundColor: theme.palette.error.dark, - color: theme.palette.error.contrastText, - }, - warning: { - backgroundColor: theme.palette.error.light, - color: theme.palette.error.contrastText, - }, - undo: { - color: theme.palette.primary.light, - }, -})); +const useStyles = makeStyles( + (theme: Theme) => ({ + error: { + backgroundColor: theme.palette.error.dark, + color: theme.palette.error.contrastText, + }, + warning: { + backgroundColor: theme.palette.error.light, + color: theme.palette.error.contrastText, + }, + undo: { + color: theme.palette.primary.light, + }, + }), + { name: 'Notification' } +); const Notification: React.FunctionComponent< Props & Omit diff --git a/packages/ra-ui-materialui/src/layout/Sidebar.js b/packages/ra-ui-materialui/src/layout/Sidebar.js index 7a4fbacf08d..8c8ccf46071 100644 --- a/packages/ra-ui-materialui/src/layout/Sidebar.js +++ b/packages/ra-ui-materialui/src/layout/Sidebar.js @@ -8,34 +8,41 @@ import { setSidebarVisibility } from 'ra-core'; export const DRAWER_WIDTH = 240; export const CLOSED_DRAWER_WIDTH = 55; -const useStyles = makeStyles(theme => ({ - drawerPaper: { - position: 'relative', - height: 'auto', - overflowX: 'hidden', - width: props => - props.open - ? lodashGet(theme, 'sidebar.width', DRAWER_WIDTH) - : lodashGet(theme, 'sidebar.closedWidth', CLOSED_DRAWER_WIDTH), - transition: theme.transitions.create('width', { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen, - }), - backgroundColor: 'transparent', - marginTop: '0.5em', - borderRight: 'none', - [theme.breakpoints.only('xs')]: { - marginTop: 0, - height: '100vh', - position: 'inherit', - backgroundColor: theme.palette.background.default, +const useStyles = makeStyles( + theme => ({ + drawerPaper: { + position: 'relative', + height: 'auto', + overflowX: 'hidden', + width: props => + props.open + ? lodashGet(theme, 'sidebar.width', DRAWER_WIDTH) + : lodashGet( + theme, + 'sidebar.closedWidth', + CLOSED_DRAWER_WIDTH + ), + transition: theme.transitions.create('width', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + backgroundColor: 'transparent', + marginTop: '0.5em', + borderRight: 'none', + [theme.breakpoints.only('xs')]: { + marginTop: 0, + height: '100vh', + position: 'inherit', + backgroundColor: theme.palette.background.default, + }, + [theme.breakpoints.up('md')]: { + border: 'none', + marginTop: '1.5em', + }, }, - [theme.breakpoints.up('md')]: { - border: 'none', - marginTop: '1.5em', - }, - }, -})); + }), + { name: 'Sidebar' } +); const Sidebar = ({ children, closedSize, size, ...rest }) => { const dispatch = useDispatch(); diff --git a/packages/ra-ui-materialui/src/layout/TopToolbar.js b/packages/ra-ui-materialui/src/layout/TopToolbar.js index 86b4a765cae..625fb0ee036 100644 --- a/packages/ra-ui-materialui/src/layout/TopToolbar.js +++ b/packages/ra-ui-materialui/src/layout/TopToolbar.js @@ -4,27 +4,30 @@ import Toolbar from '@material-ui/core/Toolbar'; import { makeStyles } from '@material-ui/core/styles'; import classnames from 'classnames'; -const useStyles = makeStyles(theme => ({ - root: { - display: 'flex', - justifyContent: 'flex-end', - alignItems: 'flex-start', - paddingTop: theme.spacing(3), - paddingBottom: theme.spacing(1), - minHeight: theme.spacing(5), - [theme.breakpoints.up('xs')]: { - paddingLeft: 0, - paddingRight: 0, +const useStyles = makeStyles( + theme => ({ + root: { + display: 'flex', + justifyContent: 'flex-end', + alignItems: 'flex-start', + paddingTop: theme.spacing(3), + paddingBottom: theme.spacing(1), + minHeight: theme.spacing(5), + [theme.breakpoints.up('xs')]: { + paddingLeft: 0, + paddingRight: 0, + }, + [theme.breakpoints.down('sm')]: { + paddingRight: theme.spacing(2), + }, + [theme.breakpoints.down('xs')]: { + padding: theme.spacing(1), + backgroundColor: theme.palette.background.paper, + }, }, - [theme.breakpoints.down('sm')]: { - paddingRight: theme.spacing(2), - }, - [theme.breakpoints.down('xs')]: { - padding: theme.spacing(1), - backgroundColor: theme.palette.background.paper, - }, - }, -})); + }), + { name: 'TopToolbar' } +); const TopToolbar = ({ className, children, ...rest }) => { const classes = useStyles(); diff --git a/packages/ra-ui-materialui/src/list/BulkActionsToolbar.js b/packages/ra-ui-materialui/src/list/BulkActionsToolbar.js index ce7d6a5eaf1..18888ccef39 100644 --- a/packages/ra-ui-materialui/src/list/BulkActionsToolbar.js +++ b/packages/ra-ui-materialui/src/list/BulkActionsToolbar.js @@ -9,34 +9,37 @@ import { useTranslate, sanitizeListRestProps } from 'ra-core'; import TopToolbar from '../layout/TopToolbar'; -const useStyles = makeStyles(theme => ({ - toolbar: { - zIndex: 3, - color: - theme.palette.type === 'light' - ? theme.palette.primary.main - : theme.palette.text.primary, - justifyContent: 'space-between', - backgroundColor: - theme.palette.type === 'light' - ? lighten(theme.palette.primary.light, 0.85) - : theme.palette.primary.dark, - minHeight: theme.spacing(8), - height: theme.spacing(8), - transition: `${theme.transitions.create( - 'height' - )}, ${theme.transitions.create('min-height')}`, - }, - buttons: {}, - collapsed: { - minHeight: 0, - height: 0, - overflowY: 'hidden', - }, - title: { - flex: '0 0 auto', - }, -})); +const useStyles = makeStyles( + theme => ({ + toolbar: { + zIndex: 3, + color: + theme.palette.type === 'light' + ? theme.palette.primary.main + : theme.palette.text.primary, + justifyContent: 'space-between', + backgroundColor: + theme.palette.type === 'light' + ? lighten(theme.palette.primary.light, 0.85) + : theme.palette.primary.dark, + minHeight: theme.spacing(8), + height: theme.spacing(8), + transition: `${theme.transitions.create( + 'height' + )}, ${theme.transitions.create('min-height')}`, + }, + buttons: {}, + collapsed: { + minHeight: 0, + height: 0, + overflowY: 'hidden', + }, + title: { + flex: '0 0 auto', + }, + }), + { name: 'BulkActionsToolbar' } +); const BulkActionsToolbar = ({ basePath, diff --git a/packages/ra-ui-materialui/src/list/Datagrid.js b/packages/ra-ui-materialui/src/list/Datagrid.js index e6a7c27bcd7..cc6546db579 100644 --- a/packages/ra-ui-materialui/src/list/Datagrid.js +++ b/packages/ra-ui-materialui/src/list/Datagrid.js @@ -18,40 +18,43 @@ import DatagridHeaderCell from './DatagridHeaderCell'; import DatagridLoading from './DatagridLoading'; import DatagridBody, { PureDatagridBody } from './DatagridBody'; -const useStyles = makeStyles(theme => ({ - table: { - tableLayout: 'auto', - }, - thead: {}, - tbody: {}, - headerRow: {}, - headerCell: {}, - checkbox: {}, - row: {}, - clickableRow: { - cursor: 'pointer', - }, - rowEven: {}, - rowOdd: {}, - rowCell: {}, - expandHeader: { - padding: 0, - width: theme.spacing(6), - }, - expandIconCell: { - width: theme.spacing(6), - }, - expandIcon: { - padding: theme.spacing(1), - transform: 'rotate(-90deg)', - transition: theme.transitions.create('transform', { - duration: theme.transitions.duration.shortest, - }), - }, - expanded: { - transform: 'rotate(0deg)', - }, -})); +const useStyles = makeStyles( + theme => ({ + table: { + tableLayout: 'auto', + }, + thead: {}, + tbody: {}, + headerRow: {}, + headerCell: {}, + checkbox: {}, + row: {}, + clickableRow: { + cursor: 'pointer', + }, + rowEven: {}, + rowOdd: {}, + rowCell: {}, + expandHeader: { + padding: 0, + width: theme.spacing(6), + }, + expandIconCell: { + width: theme.spacing(6), + }, + expandIcon: { + padding: theme.spacing(1), + transform: 'rotate(-90deg)', + transition: theme.transitions.create('transform', { + duration: theme.transitions.duration.shortest, + }), + }, + expanded: { + transform: 'rotate(0deg)', + }, + }), + { name: 'Datagrid' } +); /** * The Datagrid component renders a list of records as a table. diff --git a/packages/ra-ui-materialui/src/list/DatagridHeaderCell.js b/packages/ra-ui-materialui/src/list/DatagridHeaderCell.js index 343687100af..01f3a0396d1 100644 --- a/packages/ra-ui-materialui/src/list/DatagridHeaderCell.js +++ b/packages/ra-ui-materialui/src/list/DatagridHeaderCell.js @@ -9,16 +9,19 @@ import { makeStyles } from '@material-ui/core/styles'; import { FieldTitle, useTranslate } from 'ra-core'; // remove the sort icons when not active -const useStyles = makeStyles({ - icon: { - display: 'none', - }, - active: { - '& $icon': { - display: 'inline', +const useStyles = makeStyles( + { + icon: { + display: 'none', + }, + active: { + '& $icon': { + display: 'inline', + }, }, }, -}); + { name: 'DatagridHeaderCell' } +); export const DatagridHeaderCell = ({ className, diff --git a/packages/ra-ui-materialui/src/list/DatagridLoading.js b/packages/ra-ui-materialui/src/list/DatagridLoading.js index 69828ecbfab..3d52021ffe4 100644 --- a/packages/ra-ui-materialui/src/list/DatagridLoading.js +++ b/packages/ra-ui-materialui/src/list/DatagridLoading.js @@ -11,12 +11,15 @@ import Checkbox from '@material-ui/core/Checkbox'; import classnames from 'classnames'; import { makeStyles } from '@material-ui/core/styles'; -const useStyles = makeStyles(theme => ({ - root: { - backgroundColor: theme.palette.grey[300], - display: 'flex', - }, -})); +const useStyles = makeStyles( + theme => ({ + root: { + backgroundColor: theme.palette.grey[300], + display: 'flex', + }, + }), + { name: 'DatagridLoading' } +); const Placeholder = ({ classes: classesOverride }) => { const classes = useStyles({ classes: classesOverride }); diff --git a/packages/ra-ui-materialui/src/list/Filter.js b/packages/ra-ui-materialui/src/list/Filter.js index 3e6d84ee06b..dabd71c963e 100644 --- a/packages/ra-ui-materialui/src/list/Filter.js +++ b/packages/ra-ui-materialui/src/list/Filter.js @@ -6,10 +6,13 @@ import { sanitizeListRestProps } from 'ra-core'; import FilterForm from './FilterForm'; import FilterButton from './FilterButton'; -const useStyles = makeStyles({ - button: {}, - form: {}, -}); +const useStyles = makeStyles( + { + button: {}, + form: {}, + }, + { name: 'Filter' } +); const Filter = props => { const classes = useStyles({ classes: props.classes }); diff --git a/packages/ra-ui-materialui/src/list/FilterButton.js b/packages/ra-ui-materialui/src/list/FilterButton.js index 63b7fea3404..8c18b3aaff0 100644 --- a/packages/ra-ui-materialui/src/list/FilterButton.js +++ b/packages/ra-ui-materialui/src/list/FilterButton.js @@ -9,9 +9,12 @@ import lodashGet from 'lodash/get'; import FilterButtonMenuItem from './FilterButtonMenuItem'; import Button from '../button/Button'; -const useStyles = makeStyles({ - root: { display: 'inline-block' }, -}); +const useStyles = makeStyles( + { + root: { display: 'inline-block' }, + }, + { name: 'FilterButton' } +); const FilterButton = ({ filters, diff --git a/packages/ra-ui-materialui/src/list/FilterForm.js b/packages/ra-ui-materialui/src/list/FilterForm.js index 5d248993561..e7cd52f653a 100644 --- a/packages/ra-ui-materialui/src/list/FilterForm.js +++ b/packages/ra-ui-materialui/src/list/FilterForm.js @@ -8,17 +8,20 @@ import lodashGet from 'lodash/get'; import FilterFormInput from './FilterFormInput'; -const useStyles = makeStyles(theme => ({ - form: { - marginTop: -theme.spacing(2), - paddingTop: 0, - display: 'flex', - alignItems: 'flex-end', - flexWrap: 'wrap', - minHeight: theme.spacing(9.5), - }, - clearFix: { clear: 'right' }, -})); +const useStyles = makeStyles( + theme => ({ + form: { + marginTop: -theme.spacing(2), + paddingTop: 0, + display: 'flex', + alignItems: 'flex-end', + flexWrap: 'wrap', + minHeight: theme.spacing(9.5), + }, + clearFix: { clear: 'right' }, + }), + { name: 'FilterForm' } +); const sanitizeRestProps = ({ anyTouched, diff --git a/packages/ra-ui-materialui/src/list/FilterFormInput.js b/packages/ra-ui-materialui/src/list/FilterFormInput.js index d4e0140edf2..b7ec416018b 100644 --- a/packages/ra-ui-materialui/src/list/FilterFormInput.js +++ b/packages/ra-ui-materialui/src/list/FilterFormInput.js @@ -11,11 +11,14 @@ const emptyRecord = {}; const sanitizeRestProps = ({ alwaysOn, ...props }) => props; -const useStyles = makeStyles(theme => ({ - body: { display: 'flex', alignItems: 'flex-end' }, - spacer: { width: theme.spacing(2) }, - hideButton: {}, -})); +const useStyles = makeStyles( + theme => ({ + body: { display: 'flex', alignItems: 'flex-end' }, + spacer: { width: theme.spacing(2) }, + hideButton: {}, + }), + { name: 'FilterFormInput' } +); const FilterFormInput = ({ filterElement, diff --git a/packages/ra-ui-materialui/src/list/List.js b/packages/ra-ui-materialui/src/list/List.js index 01a28c4e2e6..425575935ba 100644 --- a/packages/ra-ui-materialui/src/list/List.js +++ b/packages/ra-ui-materialui/src/list/List.js @@ -19,32 +19,35 @@ import DefaultActions from './ListActions'; const DefaultBulkActionButtons = props => ; -export const useStyles = makeStyles(theme => ({ - root: {}, - main: { - display: 'flex', - }, - content: { - marginTop: 0, - transition: theme.transitions.create('margin-top'), - position: 'relative', - flex: '1 1 auto', - [theme.breakpoints.down('xs')]: { - boxShadow: 'none', +export const useStyles = makeStyles( + theme => ({ + root: {}, + main: { + display: 'flex', }, - }, - bulkActionsDisplayed: { - marginTop: -theme.spacing(8), - transition: theme.transitions.create('margin-top'), - }, - actions: { - zIndex: 2, - display: 'flex', - justifyContent: 'flex-end', - flexWrap: 'wrap', - }, - noResults: { padding: 20 }, -})); + content: { + marginTop: 0, + transition: theme.transitions.create('margin-top'), + position: 'relative', + flex: '1 1 auto', + [theme.breakpoints.down('xs')]: { + boxShadow: 'none', + }, + }, + bulkActionsDisplayed: { + marginTop: -theme.spacing(8), + transition: theme.transitions.create('margin-top'), + }, + actions: { + zIndex: 2, + display: 'flex', + justifyContent: 'flex-end', + flexWrap: 'wrap', + }, + noResults: { padding: 20 }, + }), + { name: 'List' } +); const sanitizeRestProps = ({ actions, diff --git a/packages/ra-ui-materialui/src/list/ListToolbar.js b/packages/ra-ui-materialui/src/list/ListToolbar.js index 9f9feab7b80..37a02a39ddd 100644 --- a/packages/ra-ui-materialui/src/list/ListToolbar.js +++ b/packages/ra-ui-materialui/src/list/ListToolbar.js @@ -3,28 +3,31 @@ import PropTypes from 'prop-types'; import Toolbar from '@material-ui/core/Toolbar'; import { makeStyles } from '@material-ui/core/styles'; -const useStyles = makeStyles(theme => ({ - toolbar: { - justifyContent: 'space-between', - alignItems: 'flex-start', - paddingRight: 0, - [theme.breakpoints.up('xs')]: { - paddingLeft: 0, +const useStyles = makeStyles( + theme => ({ + toolbar: { + justifyContent: 'space-between', + alignItems: 'flex-start', + paddingRight: 0, + [theme.breakpoints.up('xs')]: { + paddingLeft: 0, + }, + [theme.breakpoints.down('xs')]: { + paddingLeft: theme.spacing(2), + backgroundColor: theme.palette.background.paper, + }, }, - [theme.breakpoints.down('xs')]: { - paddingLeft: theme.spacing(2), - backgroundColor: theme.palette.background.paper, + actions: { + paddingTop: theme.spacing(3), + minHeight: theme.spacing(5), + [theme.breakpoints.down('xs')]: { + padding: theme.spacing(1), + backgroundColor: theme.palette.background.paper, + }, }, - }, - actions: { - paddingTop: theme.spacing(3), - minHeight: theme.spacing(5), - [theme.breakpoints.down('xs')]: { - padding: theme.spacing(1), - backgroundColor: theme.palette.background.paper, - }, - }, -})); + }), + { name: 'ListToolbar' } +); const defaultClasses = {}; // avoid needless updates diff --git a/packages/ra-ui-materialui/src/list/PaginationActions.js b/packages/ra-ui-materialui/src/list/PaginationActions.js index a205225d351..ec851afeab5 100644 --- a/packages/ra-ui-materialui/src/list/PaginationActions.js +++ b/packages/ra-ui-materialui/src/list/PaginationActions.js @@ -6,14 +6,17 @@ import ChevronLeft from '@material-ui/icons/ChevronLeft'; import ChevronRight from '@material-ui/icons/ChevronRight'; import { useTranslate } from 'ra-core'; -const useStyles = makeStyles(theme => ({ - actions: { - flexShrink: 0, - color: theme.palette.text.secondary, - marginLeft: 20, - }, - hellip: { padding: '1.2em' }, -})); +const useStyles = makeStyles( + theme => ({ + actions: { + flexShrink: 0, + color: theme.palette.text.secondary, + marginLeft: 20, + }, + hellip: { padding: '1.2em' }, + }), + { name: 'PaginationActions' } +); function PaginationActions({ classes: classesOverride, diff --git a/packages/ra-ui-materialui/src/list/SimpleList.js b/packages/ra-ui-materialui/src/list/SimpleList.js index 6c421926cc0..a494be04038 100644 --- a/packages/ra-ui-materialui/src/list/SimpleList.js +++ b/packages/ra-ui-materialui/src/list/SimpleList.js @@ -11,13 +11,16 @@ import { makeStyles } from '@material-ui/core/styles'; import { Link } from 'react-router-dom'; import { linkToRecord, sanitizeListRestProps } from 'ra-core'; -const useStyles = makeStyles({ - link: { - textDecoration: 'none', - color: 'inherit', +const useStyles = makeStyles( + { + link: { + textDecoration: 'none', + color: 'inherit', + }, + tertiary: { float: 'right', opacity: 0.541176 }, }, - tertiary: { float: 'right', opacity: 0.541176 }, -}); + { name: 'SimpleList' } +); const LinkOrNot = ({ classes: classesOverride, diff --git a/packages/ra-ui-materialui/src/list/SingleFieldList.js b/packages/ra-ui-materialui/src/list/SingleFieldList.js index 75eb61e9ce8..01683ea4f34 100644 --- a/packages/ra-ui-materialui/src/list/SingleFieldList.js +++ b/packages/ra-ui-materialui/src/list/SingleFieldList.js @@ -7,14 +7,17 @@ import { linkToRecord } from 'ra-core'; import Link from '../Link'; -const useStyles = makeStyles(theme => ({ - root: { - display: 'flex', - flexWrap: 'wrap', - marginTop: -theme.spacing(1), - marginBottom: -theme.spacing(1), - }, -})); +const useStyles = makeStyles( + theme => ({ + root: { + display: 'flex', + flexWrap: 'wrap', + marginTop: -theme.spacing(1), + marginBottom: -theme.spacing(1), + }, + }), + { name: 'SingleFieldList' } +); // useful to prevent click bubbling in a datagrid with rowClick const stopPropagation = e => e.stopPropagation(); From 4979a0b610e4c469fcd0c3a178858362c24a2a4e Mon Sep 17 00:00:00 2001 From: Daniel Santoro Date: Fri, 8 Nov 2019 09:42:45 -0500 Subject: [PATCH 3/3] Add Ra prefix to names --- packages/ra-input-rich-text/src/index.js | 2 +- packages/ra-ui-materialui/src/Link.tsx | 2 +- packages/ra-ui-materialui/src/auth/Login.tsx | 2 +- .../ra-ui-materialui/src/auth/LoginForm.tsx | 2 +- packages/ra-ui-materialui/src/auth/Logout.tsx | 2 +- .../src/button/BulkDeleteWithConfirmButton.js | 2 +- .../src/button/BulkDeleteWithUndoButton.js | 2 +- .../ra-ui-materialui/src/button/Button.js | 2 +- .../src/button/CreateButton.js | 2 +- .../src/button/DeleteWithConfirmButton.js | 2 +- .../src/button/DeleteWithUndoButton.js | 2 +- .../ra-ui-materialui/src/button/SaveButton.js | 2 +- .../ra-ui-materialui/src/detail/Create.js | 2 +- packages/ra-ui-materialui/src/detail/Edit.js | 2 +- packages/ra-ui-materialui/src/detail/Show.js | 2 +- .../src/detail/TabbedShowLayout.js | 2 +- .../src/field/BooleanField.tsx | 2 +- .../ra-ui-materialui/src/field/ChipField.tsx | 2 +- .../ra-ui-materialui/src/field/FileField.tsx | 2 +- .../ra-ui-materialui/src/field/ImageField.tsx | 2 +- .../src/field/ReferenceArrayField.js | 2 +- .../src/field/ReferenceField.js | 2 +- .../ra-ui-materialui/src/form/FormInput.js | 2 +- .../ra-ui-materialui/src/form/TabbedForm.js | 2 +- packages/ra-ui-materialui/src/form/Toolbar.js | 2 +- .../src/input/AutocompleteArrayInput.tsx | 2 +- .../src/input/AutocompleteInput.tsx | 2 +- .../src/input/AutocompleteSuggestionItem.tsx | 2 +- .../src/input/AutocompleteSuggestionList.tsx | 2 +- .../src/input/CheckboxGroupInput.tsx | 19 ++++++++++++------- .../src/input/CheckboxGroupInputItem.tsx | 2 +- .../ra-ui-materialui/src/input/FileInput.tsx | 2 +- .../src/input/FileInputPreview.tsx | 2 +- .../ra-ui-materialui/src/input/ImageInput.tsx | 2 +- .../ra-ui-materialui/src/input/Labeled.tsx | 2 +- .../src/input/NullableBooleanInput.tsx | 2 +- .../src/input/RadioButtonGroupInput.tsx | 17 +++++++++++------ .../src/input/ResettableTextField.js | 2 +- .../src/input/SearchInput.tsx | 2 +- .../src/input/SelectArrayInput.tsx | 2 +- .../src/input/SelectInput.tsx | 2 +- .../ra-ui-materialui/src/layout/AppBar.js | 2 +- .../src/layout/CardActions.tsx | 2 +- .../src/layout/CardContentInner.js | 2 +- .../ra-ui-materialui/src/layout/Confirm.js | 2 +- packages/ra-ui-materialui/src/layout/Error.js | 2 +- .../src/layout/LinearProgress.js | 2 +- .../ra-ui-materialui/src/layout/Loading.js | 2 +- .../src/layout/LoadingIndicator.js | 2 +- packages/ra-ui-materialui/src/layout/Menu.js | 2 +- .../src/layout/MenuItemLink.js | 2 +- .../ra-ui-materialui/src/layout/NotFound.js | 2 +- .../src/layout/Notification.tsx | 2 +- .../ra-ui-materialui/src/layout/Sidebar.js | 2 +- .../ra-ui-materialui/src/layout/TopToolbar.js | 2 +- .../src/list/BulkActionsToolbar.js | 2 +- .../ra-ui-materialui/src/list/Datagrid.js | 2 +- .../src/list/DatagridHeaderCell.js | 2 +- .../src/list/DatagridLoading.js | 2 +- packages/ra-ui-materialui/src/list/Filter.js | 2 +- .../ra-ui-materialui/src/list/FilterButton.js | 2 +- .../ra-ui-materialui/src/list/FilterForm.js | 2 +- .../src/list/FilterFormInput.js | 2 +- packages/ra-ui-materialui/src/list/List.js | 2 +- .../ra-ui-materialui/src/list/ListToolbar.js | 2 +- .../src/list/PaginationActions.js | 2 +- .../ra-ui-materialui/src/list/SimpleList.js | 2 +- .../src/list/SingleFieldList.js | 2 +- 68 files changed, 89 insertions(+), 79 deletions(-) diff --git a/packages/ra-input-rich-text/src/index.js b/packages/ra-input-rich-text/src/index.js index aa2b736c8e6..1b1fd2cdf6a 100644 --- a/packages/ra-input-rich-text/src/index.js +++ b/packages/ra-input-rich-text/src/index.js @@ -9,7 +9,7 @@ import { makeStyles } from '@material-ui/core/styles'; import styles from './styles'; -const useStyles = makeStyles(styles, { name: 'RichTextInput' }); +const useStyles = makeStyles(styles, { name: 'RaRichTextInput' }); const RichTextInput = ({ options = {}, // Quill editor options diff --git a/packages/ra-ui-materialui/src/Link.tsx b/packages/ra-ui-materialui/src/Link.tsx index 2580283af3d..ed2cbb5c548 100644 --- a/packages/ra-ui-materialui/src/Link.tsx +++ b/packages/ra-ui-materialui/src/Link.tsx @@ -11,7 +11,7 @@ const useStyles = makeStyles( color: theme.palette.primary.main, }, }), - { name: 'Link' } + { name: 'RaLink' } ); const Link = ({ diff --git a/packages/ra-ui-materialui/src/auth/Login.tsx b/packages/ra-ui-materialui/src/auth/Login.tsx index b05560155f2..74ccc56ecf3 100644 --- a/packages/ra-ui-materialui/src/auth/Login.tsx +++ b/packages/ra-ui-materialui/src/auth/Login.tsx @@ -58,7 +58,7 @@ const useStyles = makeStyles( backgroundColor: theme.palette.secondary[500], }, }), - { name: 'Login' } + { name: 'RaLogin' } ); /** diff --git a/packages/ra-ui-materialui/src/auth/LoginForm.tsx b/packages/ra-ui-materialui/src/auth/LoginForm.tsx index d9dff40b9fd..d889b98057c 100644 --- a/packages/ra-ui-materialui/src/auth/LoginForm.tsx +++ b/packages/ra-ui-materialui/src/auth/LoginForm.tsx @@ -32,7 +32,7 @@ const useStyles = makeStyles( marginRight: theme.spacing(1), }, }), - { name: 'LoginForm' } + { name: 'RaLoginForm' } ); const Input = ({ diff --git a/packages/ra-ui-materialui/src/auth/Logout.tsx b/packages/ra-ui-materialui/src/auth/Logout.tsx index a085ec59036..8f9a32f33c6 100644 --- a/packages/ra-ui-materialui/src/auth/Logout.tsx +++ b/packages/ra-ui-materialui/src/auth/Logout.tsx @@ -20,7 +20,7 @@ const useStyles = makeStyles( }, icon: { minWidth: theme.spacing(5) }, }), - { name: 'Logout' } + { name: 'RaLogout' } ); /** diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.js b/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.js index cc359ed4adc..1869c76b304 100644 --- a/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.js +++ b/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.js @@ -40,7 +40,7 @@ const useStyles = makeStyles( }, }, }), - { name: 'BulkDeleteWithConfirmButton' } + { name: 'RaBulkDeleteWithConfirmButton' } ); const BulkDeleteWithConfirmButton = ({ diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.js b/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.js index c7be7d8c691..9c824835073 100644 --- a/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.js +++ b/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.js @@ -39,7 +39,7 @@ const useStyles = makeStyles( }, }, }), - { name: 'BulkDeleteWithUndoButton' } + { name: 'RaBulkDeleteWithUndoButton' } ); const BulkDeleteWithUndoButton = ({ diff --git a/packages/ra-ui-materialui/src/button/Button.js b/packages/ra-ui-materialui/src/button/Button.js index 790a1a34712..95f4501238d 100644 --- a/packages/ra-ui-materialui/src/button/Button.js +++ b/packages/ra-ui-materialui/src/button/Button.js @@ -32,7 +32,7 @@ const useStyles = makeStyles( fontSize: 24, }, }, - { name: 'Button' } + { name: 'RaButton' } ); const Button = ({ diff --git a/packages/ra-ui-materialui/src/button/CreateButton.js b/packages/ra-ui-materialui/src/button/CreateButton.js index 2a71fa9275c..e34c4a5e971 100644 --- a/packages/ra-ui-materialui/src/button/CreateButton.js +++ b/packages/ra-ui-materialui/src/button/CreateButton.js @@ -25,7 +25,7 @@ const useStyles = makeStyles( color: 'inherit', }, }), - { name: 'CreateButton' } + { name: 'RaCreateButton' } ); const CreateButton = ({ diff --git a/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.js b/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.js index fc67efd70be..448a6362c62 100644 --- a/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.js +++ b/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.js @@ -47,7 +47,7 @@ const useStyles = makeStyles( }, }, }), - { name: 'DeleteWithConfirmButton' } + { name: 'RaDeleteWithConfirmButton' } ); const DeleteWithConfirmButton = ({ diff --git a/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.js b/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.js index ca8e7c0cfd1..eaeb9b35da1 100644 --- a/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.js +++ b/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.js @@ -45,7 +45,7 @@ const useStyles = makeStyles( }, }, }), - { name: 'DeleteWithUndoButton' } + { name: 'RaDeleteWithUndoButton' } ); const DeleteWithUndoButton = ({ diff --git a/packages/ra-ui-materialui/src/button/SaveButton.js b/packages/ra-ui-materialui/src/button/SaveButton.js index 8b2d5d4a78d..c503422a1cd 100644 --- a/packages/ra-ui-materialui/src/button/SaveButton.js +++ b/packages/ra-ui-materialui/src/button/SaveButton.js @@ -19,7 +19,7 @@ const useStyles = makeStyles( fontSize: 18, }, }), - { name: 'SaveButton' } + { name: 'RaSaveButton' } ); const sanitizeRestProps = ({ diff --git a/packages/ra-ui-materialui/src/detail/Create.js b/packages/ra-ui-materialui/src/detail/Create.js index 39a32dacafd..44bb3f2d3eb 100644 --- a/packages/ra-ui-materialui/src/detail/Create.js +++ b/packages/ra-ui-materialui/src/detail/Create.js @@ -83,7 +83,7 @@ const useStyles = makeStyles( flex: '1 1 auto', }, }), - { name: 'Create' } + { name: 'RaCreate' } ); const sanitizeRestProps = ({ diff --git a/packages/ra-ui-materialui/src/detail/Edit.js b/packages/ra-ui-materialui/src/detail/Edit.js index 97d1bd7943a..666efd8be9e 100644 --- a/packages/ra-ui-materialui/src/detail/Edit.js +++ b/packages/ra-ui-materialui/src/detail/Edit.js @@ -83,7 +83,7 @@ export const useStyles = makeStyles( flex: '1 1 auto', }, }, - { name: 'Edit' } + { name: 'RaEdit' } ); const sanitizeRestProps = ({ diff --git a/packages/ra-ui-materialui/src/detail/Show.js b/packages/ra-ui-materialui/src/detail/Show.js index de70f74471b..bb4ff170d0b 100644 --- a/packages/ra-ui-materialui/src/detail/Show.js +++ b/packages/ra-ui-materialui/src/detail/Show.js @@ -80,7 +80,7 @@ export const useStyles = makeStyles( flex: '1 1 auto', }, }, - { name: 'Show' } + { name: 'RaShow' } ); const sanitizeRestProps = ({ diff --git a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js index 25506056cda..263ccf34d32 100644 --- a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js +++ b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js @@ -29,7 +29,7 @@ const useStyles = makeStyles( paddingRight: theme.spacing(2), }, }), - { name: 'TabbedShow' } + { name: 'RaTabbedShowLayout' } ); /** diff --git a/packages/ra-ui-materialui/src/field/BooleanField.tsx b/packages/ra-ui-materialui/src/field/BooleanField.tsx index 99b67bcdb17..e5dc85144d4 100644 --- a/packages/ra-ui-materialui/src/field/BooleanField.tsx +++ b/packages/ra-ui-materialui/src/field/BooleanField.tsx @@ -32,7 +32,7 @@ const useStyles = makeStyles( whiteSpace: 'nowrap', }, }, - { name: 'BooleanField' } + { name: 'RaBooleanField' } ); interface Props extends FieldProps { diff --git a/packages/ra-ui-materialui/src/field/ChipField.tsx b/packages/ra-ui-materialui/src/field/ChipField.tsx index 71aea469d69..a648aadc4ab 100644 --- a/packages/ra-ui-materialui/src/field/ChipField.tsx +++ b/packages/ra-ui-materialui/src/field/ChipField.tsx @@ -13,7 +13,7 @@ const useStyles = makeStyles( { chip: { margin: 4 }, }, - { name: 'ChipField' } + { name: 'RaChipField' } ); export const ChipField: FunctionComponent< diff --git a/packages/ra-ui-materialui/src/field/FileField.tsx b/packages/ra-ui-materialui/src/field/FileField.tsx index 3e38f9389a5..dde47b6a636 100644 --- a/packages/ra-ui-materialui/src/field/FileField.tsx +++ b/packages/ra-ui-materialui/src/field/FileField.tsx @@ -11,7 +11,7 @@ const useStyles = makeStyles( { root: { display: 'inline-block' }, }, - { name: 'FileField' } + { name: 'RaFileField' } ); interface Props extends FieldProps { diff --git a/packages/ra-ui-materialui/src/field/ImageField.tsx b/packages/ra-ui-materialui/src/field/ImageField.tsx index a01ae04cba3..4b93b8c9f6c 100644 --- a/packages/ra-ui-materialui/src/field/ImageField.tsx +++ b/packages/ra-ui-materialui/src/field/ImageField.tsx @@ -18,7 +18,7 @@ const useStyles = makeStyles( maxHeight: '10rem', }, }, - { name: 'ImageField' } + { name: 'RaImageField' } ); interface Props extends FieldProps { diff --git a/packages/ra-ui-materialui/src/field/ReferenceArrayField.js b/packages/ra-ui-materialui/src/field/ReferenceArrayField.js index 882b1f6e762..b08317912e5 100644 --- a/packages/ra-ui-materialui/src/field/ReferenceArrayField.js +++ b/packages/ra-ui-materialui/src/field/ReferenceArrayField.js @@ -77,7 +77,7 @@ const useStyles = makeStyles( theme => ({ progress: { marginTop: theme.spacing(2) }, }), - { name: 'ReferenceArrayField' } + { name: 'RaReferenceArrayField' } ); export const ReferenceArrayFieldView = ({ diff --git a/packages/ra-ui-materialui/src/field/ReferenceField.js b/packages/ra-ui-materialui/src/field/ReferenceField.js index 1e19164393c..8571b63b7c8 100644 --- a/packages/ra-ui-materialui/src/field/ReferenceField.js +++ b/packages/ra-ui-materialui/src/field/ReferenceField.js @@ -119,7 +119,7 @@ const useStyles = makeStyles( color: theme.palette.primary.main, }, }), - { name: 'ReferenceField' } + { name: 'RaReferenceField' } ); // useful to prevent click bubbling in a datagrid with rowClick diff --git a/packages/ra-ui-materialui/src/form/FormInput.js b/packages/ra-ui-materialui/src/form/FormInput.js index 38a8efdd2b7..c7573d07c85 100644 --- a/packages/ra-ui-materialui/src/form/FormInput.js +++ b/packages/ra-ui-materialui/src/form/FormInput.js @@ -11,7 +11,7 @@ const useStyles = makeStyles( theme => ({ input: { width: theme.spacing(32) }, }), - { name: 'FormInput' } + { name: 'RaFormInput' } ); export const FormInput = ({ input, classes: classesOverride, ...rest }) => { diff --git a/packages/ra-ui-materialui/src/form/TabbedForm.js b/packages/ra-ui-materialui/src/form/TabbedForm.js index 5bcdca46bae..bed8d6920e4 100644 --- a/packages/ra-ui-materialui/src/form/TabbedForm.js +++ b/packages/ra-ui-materialui/src/form/TabbedForm.js @@ -27,7 +27,7 @@ const useStyles = makeStyles( paddingRight: theme.spacing(2), }, }), - { name: 'TabbedForm' } + { name: 'RaTabbedForm' } ); const TabbedForm = ({ initialValues, defaultValue, saving, ...props }) => { diff --git a/packages/ra-ui-materialui/src/form/Toolbar.js b/packages/ra-ui-materialui/src/form/Toolbar.js index 57782d0265b..9b75b7c59ba 100644 --- a/packages/ra-ui-materialui/src/form/Toolbar.js +++ b/packages/ra-ui-materialui/src/form/Toolbar.js @@ -40,7 +40,7 @@ const useStyles = makeStyles( }, }, }), - { name: 'Toolbar' } + { name: 'RaToolbar' } ); const valueOrDefault = (value, defaultValue) => diff --git a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx index 6ae6c38cc61..cfbdd24ca50 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx +++ b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx @@ -513,7 +513,7 @@ const useStyles = makeStyles( }, }; }, - { name: 'AutocompleteArrayInput' } + { name: 'RaAutocompleteArrayInput' } ); export default AutocompleteArrayInput; diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx index 397b20466f8..2e1a46f291c 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx +++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx @@ -458,7 +458,7 @@ const useStyles = makeStyles( }, }; }, - { name: 'AutocompleteInput' } + { name: 'RaAutocompleteInput' } ); export default AutocompleteInput; diff --git a/packages/ra-ui-materialui/src/input/AutocompleteSuggestionItem.tsx b/packages/ra-ui-materialui/src/input/AutocompleteSuggestionItem.tsx index c46f0194123..41528d07233 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteSuggestionItem.tsx +++ b/packages/ra-ui-materialui/src/input/AutocompleteSuggestionItem.tsx @@ -20,7 +20,7 @@ const useStyles = makeStyles( suggestionText: { fontWeight: 300 }, highlightedSuggestionText: { fontWeight: 500 }, }), - { name: 'AutocompleteSuggestionItem' } + { name: 'RaAutocompleteSuggestionItem' } ); interface Props { diff --git a/packages/ra-ui-materialui/src/input/AutocompleteSuggestionList.tsx b/packages/ra-ui-materialui/src/input/AutocompleteSuggestionList.tsx index 56c2c8593e7..9f8e097a746 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteSuggestionList.tsx +++ b/packages/ra-ui-materialui/src/input/AutocompleteSuggestionList.tsx @@ -11,7 +11,7 @@ const useStyles = makeStyles( overflowY: 'auto', }, }, - { name: 'AutocompleteSuggestionList' } + { name: 'RaAutocompleteSuggestionList' } ); interface Props { diff --git a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx index 98bfbfff05e..fab7faa9248 100644 --- a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx +++ b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx @@ -20,13 +20,18 @@ const sanitizeRestProps = ({ ...rest }: any) => defaultSanitizeRestProps(rest); -const useStyles = makeStyles(theme => ({ - root: {}, - label: { - transform: 'translate(0, 8px) scale(0.75)', - transformOrigin: `top ${theme.direction === 'ltr' ? 'left' : 'right'}`, - }, -}), { name: 'CheckboxGroupInput' }); +const useStyles = makeStyles( + theme => ({ + root: {}, + label: { + transform: 'translate(0, 8px) scale(0.75)', + transformOrigin: `top ${ + theme.direction === 'ltr' ? 'left' : 'right' + }`, + }, + }), + { name: 'RaCheckboxGroupInput' } +); /** * An Input component for a checkbox group, using an array of objects for the options diff --git a/packages/ra-ui-materialui/src/input/CheckboxGroupInputItem.tsx b/packages/ra-ui-materialui/src/input/CheckboxGroupInputItem.tsx index 748a9c91bc1..faedaf0062f 100644 --- a/packages/ra-ui-materialui/src/input/CheckboxGroupInputItem.tsx +++ b/packages/ra-ui-materialui/src/input/CheckboxGroupInputItem.tsx @@ -10,7 +10,7 @@ const useStyles = makeStyles( height: 32, }, }, - { name: 'CheckboxGroupInputItem' } + { name: 'RaCheckboxGroupInputItem' } ); const CheckboxGroupInputItem = ({ diff --git a/packages/ra-ui-materialui/src/input/FileInput.tsx b/packages/ra-ui-materialui/src/input/FileInput.tsx index 573b9228520..5cccfbf2c0e 100644 --- a/packages/ra-ui-materialui/src/input/FileInput.tsx +++ b/packages/ra-ui-materialui/src/input/FileInput.tsx @@ -33,7 +33,7 @@ const useStyles = makeStyles( removeButton: {}, root: { width: '100%' }, }), - { name: 'FileInput' } + { name: 'RaFileInput' } ); export interface FileInputProps { diff --git a/packages/ra-ui-materialui/src/input/FileInputPreview.tsx b/packages/ra-ui-materialui/src/input/FileInputPreview.tsx index 9b46f1405d4..f425f553851 100644 --- a/packages/ra-ui-materialui/src/input/FileInputPreview.tsx +++ b/packages/ra-ui-materialui/src/input/FileInputPreview.tsx @@ -12,7 +12,7 @@ const useStyles = makeStyles( color: theme.palette.error.main, }, }), - { name: 'FileInputPreview' } + { name: 'RaFileInputPreview' } ); interface Props { diff --git a/packages/ra-ui-materialui/src/input/ImageInput.tsx b/packages/ra-ui-materialui/src/input/ImageInput.tsx index 1b3aa365018..bed50afb04e 100644 --- a/packages/ra-ui-materialui/src/input/ImageInput.tsx +++ b/packages/ra-ui-materialui/src/input/ImageInput.tsx @@ -35,7 +35,7 @@ const useStyles = makeStyles( }, }, }), - { name: 'ImageInput' } + { name: 'RaImageInput' } ); const ImageInput = (props: FileInputProps & InputProps) => { diff --git a/packages/ra-ui-materialui/src/input/Labeled.tsx b/packages/ra-ui-materialui/src/input/Labeled.tsx index 2e761736089..80b0cf7926f 100644 --- a/packages/ra-ui-materialui/src/input/Labeled.tsx +++ b/packages/ra-ui-materialui/src/input/Labeled.tsx @@ -23,7 +23,7 @@ const useStyles = makeStyles( width: '100%', }, }), - { name: 'Labeled' } + { name: 'RaLabeled' } ); interface Props { diff --git a/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx b/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx index 388fd6619c3..b9232fa0e46 100644 --- a/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx +++ b/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx @@ -13,7 +13,7 @@ const useStyles = makeStyles( theme => ({ input: { width: theme.spacing(16) }, }), - { name: 'NullableBooleanInput' } + { name: 'RaNullableBooleanInput' } ); const getBooleanFromString = (value: string): boolean | null => { diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx index f5fda037cf7..2489ab24272 100644 --- a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx +++ b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx @@ -16,12 +16,17 @@ import sanitizeRestProps from './sanitizeRestProps'; import InputHelperText from './InputHelperText'; import RadioButtonGroupInputItem from './RadioButtonGroupInputItem'; -const useStyles = makeStyles(theme => ({ - label: { - transform: 'translate(0, 5px) scale(0.75)', - transformOrigin: `top ${theme.direction === 'ltr' ? 'left' : 'right'}`, - }, -}), { name: 'RadioButtonGroupInput' }); +const useStyles = makeStyles( + theme => ({ + label: { + transform: 'translate(0, 5px) scale(0.75)', + transformOrigin: `top ${ + theme.direction === 'ltr' ? 'left' : 'right' + }`, + }, + }), + { name: 'RaRadioButtonGroupInput' } +); /** * An Input component for a radio button group, using an array of objects for the options diff --git a/packages/ra-ui-materialui/src/input/ResettableTextField.js b/packages/ra-ui-materialui/src/input/ResettableTextField.js index f011b5e0394..4778f04fe29 100644 --- a/packages/ra-ui-materialui/src/input/ResettableTextField.js +++ b/packages/ra-ui-materialui/src/input/ResettableTextField.js @@ -29,7 +29,7 @@ const useStyles = makeStyles( marginRight: 12, }, }, - { name: 'ResettableTextField' } + { name: 'RaResettableTextField' } ); const handleMouseDownClearButton = event => { diff --git a/packages/ra-ui-materialui/src/input/SearchInput.tsx b/packages/ra-ui-materialui/src/input/SearchInput.tsx index 12a90a7014a..39b0f5635ae 100644 --- a/packages/ra-ui-materialui/src/input/SearchInput.tsx +++ b/packages/ra-ui-materialui/src/input/SearchInput.tsx @@ -13,7 +13,7 @@ const useStyles = makeStyles( marginTop: 32, }, }, - { name: 'SearchInput' } + { name: 'RaSearchInput' } ); const SearchInput: FunctionComponent< diff --git a/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx b/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx index 019f2ceb525..7fd8d3e7c05 100644 --- a/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx +++ b/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx @@ -79,7 +79,7 @@ const useStyles = makeStyles( overflow: 'auto', }, }), - { name: 'SelectArrayInput' } + { name: 'RaSelectArrayInput' } ); /** diff --git a/packages/ra-ui-materialui/src/input/SelectInput.tsx b/packages/ra-ui-materialui/src/input/SelectInput.tsx index 7323bda76cc..3c5dc7b81ec 100644 --- a/packages/ra-ui-materialui/src/input/SelectInput.tsx +++ b/packages/ra-ui-materialui/src/input/SelectInput.tsx @@ -63,7 +63,7 @@ const useStyles = makeStyles( minWidth: theme.spacing(20), }, }), - { name: 'SelectInput' } + { name: 'RaSelectInput' } ); /** diff --git a/packages/ra-ui-materialui/src/layout/AppBar.js b/packages/ra-ui-materialui/src/layout/AppBar.js index 597356b4d77..0c4f8cbaa72 100644 --- a/packages/ra-ui-materialui/src/layout/AppBar.js +++ b/packages/ra-ui-materialui/src/layout/AppBar.js @@ -45,7 +45,7 @@ const useStyles = makeStyles( overflow: 'hidden', }, }), - { name: 'AppBar' } + { name: 'RaAppBar' } ); const AppBar = ({ diff --git a/packages/ra-ui-materialui/src/layout/CardActions.tsx b/packages/ra-ui-materialui/src/layout/CardActions.tsx index d17fb26082d..ec81e8d94ea 100644 --- a/packages/ra-ui-materialui/src/layout/CardActions.tsx +++ b/packages/ra-ui-materialui/src/layout/CardActions.tsx @@ -15,7 +15,7 @@ const useStyles = makeStyles( padding: 0, }, }, - { name: 'CardActions' } + { name: 'RaCardActions' } ); const CardActions = ({ className, children, ...rest }) => { diff --git a/packages/ra-ui-materialui/src/layout/CardContentInner.js b/packages/ra-ui-materialui/src/layout/CardContentInner.js index bd1965d1cd5..a04a641ef5d 100644 --- a/packages/ra-ui-materialui/src/layout/CardContentInner.js +++ b/packages/ra-ui-materialui/src/layout/CardContentInner.js @@ -20,7 +20,7 @@ var useStyles = makeStyles( }, }, }), - { name: 'CardContentInner' } + { name: 'RaCardContentInner' } ); /** diff --git a/packages/ra-ui-materialui/src/layout/Confirm.js b/packages/ra-ui-materialui/src/layout/Confirm.js index 8e6ae756efe..d0e1af1b7cc 100644 --- a/packages/ra-ui-materialui/src/layout/Confirm.js +++ b/packages/ra-ui-materialui/src/layout/Confirm.js @@ -35,7 +35,7 @@ const useStyles = makeStyles( paddingRight: '0.5em', }, }), - { name: 'Confirm' } + { name: 'RaConfirm' } ); /** diff --git a/packages/ra-ui-materialui/src/layout/Error.js b/packages/ra-ui-materialui/src/layout/Error.js index 2eb67d1a6bd..a8ceecdf842 100644 --- a/packages/ra-ui-materialui/src/layout/Error.js +++ b/packages/ra-ui-materialui/src/layout/Error.js @@ -45,7 +45,7 @@ const useStyles = makeStyles( marginTop: '2em', }, }), - { name: 'Error' } + { name: 'RaError' } ); function goBack() { diff --git a/packages/ra-ui-materialui/src/layout/LinearProgress.js b/packages/ra-ui-materialui/src/layout/LinearProgress.js index 09f32b87a88..6fae62b6554 100644 --- a/packages/ra-ui-materialui/src/layout/LinearProgress.js +++ b/packages/ra-ui-materialui/src/layout/LinearProgress.js @@ -11,7 +11,7 @@ const useStyles = makeStyles( width: `${theme.spacing(20)}px`, }, }), - { name: 'LinearProgress' } + { name: 'RaLinearProgress' } ); /** diff --git a/packages/ra-ui-materialui/src/layout/Loading.js b/packages/ra-ui-materialui/src/layout/Loading.js index 22930fdd73d..18bdb96b76f 100644 --- a/packages/ra-ui-materialui/src/layout/Loading.js +++ b/packages/ra-ui-materialui/src/layout/Loading.js @@ -30,7 +30,7 @@ const useStyles = makeStyles( margin: '0 1em', }, }), - { name: 'Loading' } + { name: 'RaLoading' } ); const Loading = ({ diff --git a/packages/ra-ui-materialui/src/layout/LoadingIndicator.js b/packages/ra-ui-materialui/src/layout/LoadingIndicator.js index 0b7cc075f21..bd2496b41b9 100644 --- a/packages/ra-ui-materialui/src/layout/LoadingIndicator.js +++ b/packages/ra-ui-materialui/src/layout/LoadingIndicator.js @@ -13,7 +13,7 @@ const useStyles = makeStyles( margin: 14, }, }, - { name: 'LoadingIndicator' } + { name: 'RaLoadingIndicator' } ); export const LoadingIndicator = ({ diff --git a/packages/ra-ui-materialui/src/layout/Menu.js b/packages/ra-ui-materialui/src/layout/Menu.js index 4fcbe25ca7b..05f40bdbb7d 100644 --- a/packages/ra-ui-materialui/src/layout/Menu.js +++ b/packages/ra-ui-materialui/src/layout/Menu.js @@ -18,7 +18,7 @@ const useStyles = makeStyles( justifyContent: 'flex-start', }, }, - { name: 'Menu' } + { name: 'RaMenu' } ); const translatedResourceName = (resource, translate) => diff --git a/packages/ra-ui-materialui/src/layout/MenuItemLink.js b/packages/ra-ui-materialui/src/layout/MenuItemLink.js index 5f82fe9ff5e..468dc4c153c 100644 --- a/packages/ra-ui-materialui/src/layout/MenuItemLink.js +++ b/packages/ra-ui-materialui/src/layout/MenuItemLink.js @@ -21,7 +21,7 @@ const useStyles = makeStyles( }, icon: { minWidth: theme.spacing(5) }, }), - { name: 'MenuItemLink' } + { name: 'RaMenuItemLink' } ); const MenuItemLink = forwardRef( diff --git a/packages/ra-ui-materialui/src/layout/NotFound.js b/packages/ra-ui-materialui/src/layout/NotFound.js index 190e2498011..030d46dcd0c 100644 --- a/packages/ra-ui-materialui/src/layout/NotFound.js +++ b/packages/ra-ui-materialui/src/layout/NotFound.js @@ -38,7 +38,7 @@ const useStyles = makeStyles( marginTop: '2em', }, }), - { name: 'NotFound' } + { name: 'RaNotFound' } ); function goBack() { diff --git a/packages/ra-ui-materialui/src/layout/Notification.tsx b/packages/ra-ui-materialui/src/layout/Notification.tsx index 3d750fc9f57..7d4b6e0f17f 100644 --- a/packages/ra-ui-materialui/src/layout/Notification.tsx +++ b/packages/ra-ui-materialui/src/layout/Notification.tsx @@ -33,7 +33,7 @@ const useStyles = makeStyles( color: theme.palette.primary.light, }, }), - { name: 'Notification' } + { name: 'RaNotification' } ); const Notification: React.FunctionComponent< diff --git a/packages/ra-ui-materialui/src/layout/Sidebar.js b/packages/ra-ui-materialui/src/layout/Sidebar.js index 8c8ccf46071..a7792cae717 100644 --- a/packages/ra-ui-materialui/src/layout/Sidebar.js +++ b/packages/ra-ui-materialui/src/layout/Sidebar.js @@ -41,7 +41,7 @@ const useStyles = makeStyles( }, }, }), - { name: 'Sidebar' } + { name: 'RaSidebar' } ); const Sidebar = ({ children, closedSize, size, ...rest }) => { diff --git a/packages/ra-ui-materialui/src/layout/TopToolbar.js b/packages/ra-ui-materialui/src/layout/TopToolbar.js index 625fb0ee036..f901e30a7c4 100644 --- a/packages/ra-ui-materialui/src/layout/TopToolbar.js +++ b/packages/ra-ui-materialui/src/layout/TopToolbar.js @@ -26,7 +26,7 @@ const useStyles = makeStyles( }, }, }), - { name: 'TopToolbar' } + { name: 'RaTopToolbar' } ); const TopToolbar = ({ className, children, ...rest }) => { diff --git a/packages/ra-ui-materialui/src/list/BulkActionsToolbar.js b/packages/ra-ui-materialui/src/list/BulkActionsToolbar.js index 18888ccef39..9195b515554 100644 --- a/packages/ra-ui-materialui/src/list/BulkActionsToolbar.js +++ b/packages/ra-ui-materialui/src/list/BulkActionsToolbar.js @@ -38,7 +38,7 @@ const useStyles = makeStyles( flex: '0 0 auto', }, }), - { name: 'BulkActionsToolbar' } + { name: 'RaBulkActionsToolbar' } ); const BulkActionsToolbar = ({ diff --git a/packages/ra-ui-materialui/src/list/Datagrid.js b/packages/ra-ui-materialui/src/list/Datagrid.js index cc6546db579..660716d8160 100644 --- a/packages/ra-ui-materialui/src/list/Datagrid.js +++ b/packages/ra-ui-materialui/src/list/Datagrid.js @@ -53,7 +53,7 @@ const useStyles = makeStyles( transform: 'rotate(0deg)', }, }), - { name: 'Datagrid' } + { name: 'RaDatagrid' } ); /** diff --git a/packages/ra-ui-materialui/src/list/DatagridHeaderCell.js b/packages/ra-ui-materialui/src/list/DatagridHeaderCell.js index 01f3a0396d1..487217f3f6f 100644 --- a/packages/ra-ui-materialui/src/list/DatagridHeaderCell.js +++ b/packages/ra-ui-materialui/src/list/DatagridHeaderCell.js @@ -20,7 +20,7 @@ const useStyles = makeStyles( }, }, }, - { name: 'DatagridHeaderCell' } + { name: 'RaDatagridHeaderCell' } ); export const DatagridHeaderCell = ({ diff --git a/packages/ra-ui-materialui/src/list/DatagridLoading.js b/packages/ra-ui-materialui/src/list/DatagridLoading.js index 3d52021ffe4..2f0d00a6b60 100644 --- a/packages/ra-ui-materialui/src/list/DatagridLoading.js +++ b/packages/ra-ui-materialui/src/list/DatagridLoading.js @@ -18,7 +18,7 @@ const useStyles = makeStyles( display: 'flex', }, }), - { name: 'DatagridLoading' } + { name: 'RaDatagridLoading' } ); const Placeholder = ({ classes: classesOverride }) => { diff --git a/packages/ra-ui-materialui/src/list/Filter.js b/packages/ra-ui-materialui/src/list/Filter.js index dabd71c963e..d422d709ec0 100644 --- a/packages/ra-ui-materialui/src/list/Filter.js +++ b/packages/ra-ui-materialui/src/list/Filter.js @@ -11,7 +11,7 @@ const useStyles = makeStyles( button: {}, form: {}, }, - { name: 'Filter' } + { name: 'RaFilter' } ); const Filter = props => { diff --git a/packages/ra-ui-materialui/src/list/FilterButton.js b/packages/ra-ui-materialui/src/list/FilterButton.js index 8c18b3aaff0..2b701e412f4 100644 --- a/packages/ra-ui-materialui/src/list/FilterButton.js +++ b/packages/ra-ui-materialui/src/list/FilterButton.js @@ -13,7 +13,7 @@ const useStyles = makeStyles( { root: { display: 'inline-block' }, }, - { name: 'FilterButton' } + { name: 'RaFilterButton' } ); const FilterButton = ({ diff --git a/packages/ra-ui-materialui/src/list/FilterForm.js b/packages/ra-ui-materialui/src/list/FilterForm.js index e7cd52f653a..bcc744ee23e 100644 --- a/packages/ra-ui-materialui/src/list/FilterForm.js +++ b/packages/ra-ui-materialui/src/list/FilterForm.js @@ -20,7 +20,7 @@ const useStyles = makeStyles( }, clearFix: { clear: 'right' }, }), - { name: 'FilterForm' } + { name: 'RaFilterForm' } ); const sanitizeRestProps = ({ diff --git a/packages/ra-ui-materialui/src/list/FilterFormInput.js b/packages/ra-ui-materialui/src/list/FilterFormInput.js index b7ec416018b..e83cc95ebfa 100644 --- a/packages/ra-ui-materialui/src/list/FilterFormInput.js +++ b/packages/ra-ui-materialui/src/list/FilterFormInput.js @@ -17,7 +17,7 @@ const useStyles = makeStyles( spacer: { width: theme.spacing(2) }, hideButton: {}, }), - { name: 'FilterFormInput' } + { name: 'RaFilterFormInput' } ); const FilterFormInput = ({ diff --git a/packages/ra-ui-materialui/src/list/List.js b/packages/ra-ui-materialui/src/list/List.js index 425575935ba..fd371efe4e7 100644 --- a/packages/ra-ui-materialui/src/list/List.js +++ b/packages/ra-ui-materialui/src/list/List.js @@ -46,7 +46,7 @@ export const useStyles = makeStyles( }, noResults: { padding: 20 }, }), - { name: 'List' } + { name: 'RaList' } ); const sanitizeRestProps = ({ diff --git a/packages/ra-ui-materialui/src/list/ListToolbar.js b/packages/ra-ui-materialui/src/list/ListToolbar.js index 37a02a39ddd..37ef6ff8448 100644 --- a/packages/ra-ui-materialui/src/list/ListToolbar.js +++ b/packages/ra-ui-materialui/src/list/ListToolbar.js @@ -26,7 +26,7 @@ const useStyles = makeStyles( }, }, }), - { name: 'ListToolbar' } + { name: 'RaListToolbar' } ); const defaultClasses = {}; // avoid needless updates diff --git a/packages/ra-ui-materialui/src/list/PaginationActions.js b/packages/ra-ui-materialui/src/list/PaginationActions.js index ec851afeab5..a89a44c8288 100644 --- a/packages/ra-ui-materialui/src/list/PaginationActions.js +++ b/packages/ra-ui-materialui/src/list/PaginationActions.js @@ -15,7 +15,7 @@ const useStyles = makeStyles( }, hellip: { padding: '1.2em' }, }), - { name: 'PaginationActions' } + { name: 'RaPaginationActions' } ); function PaginationActions({ diff --git a/packages/ra-ui-materialui/src/list/SimpleList.js b/packages/ra-ui-materialui/src/list/SimpleList.js index a494be04038..0ab242d6b00 100644 --- a/packages/ra-ui-materialui/src/list/SimpleList.js +++ b/packages/ra-ui-materialui/src/list/SimpleList.js @@ -19,7 +19,7 @@ const useStyles = makeStyles( }, tertiary: { float: 'right', opacity: 0.541176 }, }, - { name: 'SimpleList' } + { name: 'RaSimpleList' } ); const LinkOrNot = ({ diff --git a/packages/ra-ui-materialui/src/list/SingleFieldList.js b/packages/ra-ui-materialui/src/list/SingleFieldList.js index 01683ea4f34..db8b37dfab5 100644 --- a/packages/ra-ui-materialui/src/list/SingleFieldList.js +++ b/packages/ra-ui-materialui/src/list/SingleFieldList.js @@ -16,7 +16,7 @@ const useStyles = makeStyles( marginBottom: -theme.spacing(1), }, }), - { name: 'SingleFieldList' } + { name: 'RaSingleFieldList' } ); // useful to prevent click bubbling in a datagrid with rowClick