diff --git a/UPGRADE.md b/UPGRADE.md index 04797265c94..ead9618178c 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -362,9 +362,11 @@ export default (type, params) => { } ``` -## ReferenceInputController isLoading injected props renamed to loading +## isLoading injected props renamed to loading -When using custom component with ReferenceInputController, you should rename the component `isLoading` prop to `loading`. +Much of the react-admin controller components that fetch data used to inject an `isLoading` boolean prop, set to true whenever a dataProvider call was pending. this prop was renamed to `loading` everywhere. Use the search and replace feature of your IDE to rename that prop. + +For instance: ```diff - diff --git a/examples/demo/src/layout/Login.js b/examples/demo/src/layout/Login.js index 45f71a342a7..30f8730ada0 100644 --- a/examples/demo/src/layout/Login.js +++ b/examples/demo/src/layout/Login.js @@ -75,7 +75,7 @@ const Login = ({ location }) => { const translate = useTranslate(); const classes = useStyles(); const dispatch = useDispatch(); - const isLoading = useSelector(state => state.admin.loading > 0); + const loading = useSelector(state => state.admin.loading > 0); const login = auth => dispatch( @@ -116,7 +116,7 @@ const Login = ({ location }) => { name="username" component={renderInput} label={translate('ra.auth.username')} - disabled={isLoading} + disabled={loading} />
@@ -125,7 +125,7 @@ const Login = ({ location }) => { component={renderInput} label={translate('ra.auth.password')} type="password" - disabled={isLoading} + disabled={loading} />
@@ -134,11 +134,11 @@ const Login = ({ location }) => { variant="contained" type="submit" color="primary" - disabled={isLoading} + disabled={loading} className={classes.button} fullWidth > - {isLoading && ( + {loading && ( { +const ReviewMobileList = ({ basePath, data, ids, loading, total }) => { const classes = useStyles(); return ( - (isLoading || total > 0) && ( + (loading || total > 0) && ( {ids.map(id => ( }); }); -const CommentPagination = ({ - isLoading, - ids, - page, - perPage, - total, - setPage, -}) => { +const CommentPagination = ({ loading, ids, page, perPage, total, setPage }) => { const translate = useTranslate(); const nbPages = Math.ceil(total / perPage) || 1; - if (!isLoading && (total === 0 || (ids && !ids.length))) { + if (!loading && (total === 0 || (ids && !ids.length))) { return ; } diff --git a/packages/ra-core/src/controller/field/useReferenceManyFieldController.ts b/packages/ra-core/src/controller/field/useReferenceManyFieldController.ts index f841c84886b..a7f321c786c 100644 --- a/packages/ra-core/src/controller/field/useReferenceManyFieldController.ts +++ b/packages/ra-core/src/controller/field/useReferenceManyFieldController.ts @@ -55,7 +55,7 @@ const defaultFilter = {}; * * @example * - * const { isLoading, referenceRecord, resourceLinkPath } = useReferenceManyFieldController({ + * const { loaded, referenceRecord, resourceLinkPath } = useReferenceManyFieldController({ * resource * reference: 'users', * record: { diff --git a/packages/ra-core/src/controller/input/ReferenceArrayInputController.spec.tsx b/packages/ra-core/src/controller/input/ReferenceArrayInputController.spec.tsx index 239fc254d7e..3cff107b576 100644 --- a/packages/ra-core/src/controller/input/ReferenceArrayInputController.spec.tsx +++ b/packages/ra-core/src/controller/input/ReferenceArrayInputController.spec.tsx @@ -19,7 +19,7 @@ describe('', () => { translate: x => `*${x}*`, }; - it('should set isLoading to true as long as there are no references fetched and no selected references', () => { + it('should set loading to true as long as there are no references fetched and no selected references', () => { const children = jest.fn(); shallow( ', () => { ); - assert.equal(children.mock.calls[0][0].isLoading, true); + assert.equal(children.mock.calls[0][0].loading, true); }); - it('should set isLoading to true as long as there are no references fetched and there are no data found for the references already selected', () => { + it('should set loading to true as long as there are no references fetched and there are no data found for the references already selected', () => { const children = jest.fn(); shallow( ', () => { {children} ); - assert.equal(children.mock.calls[0][0].isLoading, true); + assert.equal(children.mock.calls[0][0].loading, true); }); - it('should set isLoading to false if the references are being searched but data from at least one selected reference was found', () => { + it('should set loading to false if the references are being searched but data from at least one selected reference was found', () => { const children = jest.fn(); shallow( ', () => { {children} ); - assert.equal(children.mock.calls[0][0].isLoading, false); + assert.equal(children.mock.calls[0][0].loading, false); assert.deepEqual(children.mock.calls[0][0].choices, [{ id: 1 }]); }); diff --git a/packages/ra-core/src/controller/input/ReferenceArrayInputController.tsx b/packages/ra-core/src/controller/input/ReferenceArrayInputController.tsx index 5b7e38e71f4..fb692721b1f 100644 --- a/packages/ra-core/src/controller/input/ReferenceArrayInputController.tsx +++ b/packages/ra-core/src/controller/input/ReferenceArrayInputController.tsx @@ -27,7 +27,7 @@ const defaultReferenceSource = (resource: string, source: string) => interface ChildrenFuncParams { choices: Record[]; error?: string; - isLoading: boolean; + loading: boolean; onChange: (value: any) => void; setFilter: (filter: any) => void; setPagination: (pagination: Pagination) => void; @@ -288,7 +288,7 @@ export class UnconnectedReferenceArrayInputController extends Component< return children({ choices: dataStatus.choices, error: dataStatus.error, - isLoading: dataStatus.waiting, + loading: dataStatus.waiting, onChange, setFilter: this.debouncedSetFilter, setPagination: this.setPagination, diff --git a/packages/ra-core/src/controller/useCreateController.ts b/packages/ra-core/src/controller/useCreateController.ts index ff6aa5e2e71..5a09fc5bd8c 100644 --- a/packages/ra-core/src/controller/useCreateController.ts +++ b/packages/ra-core/src/controller/useCreateController.ts @@ -14,8 +14,9 @@ import { useTranslate } from '../i18n'; import { useVersion } from '.'; export interface CreateControllerProps { - isLoading: boolean; - isSaving: boolean; + loading: boolean; + loaded: boolean; + saving: boolean; defaultTitle: string; save: (record: Partial, redirect: RedirectionSideEffect) => void; resource: string; @@ -77,7 +78,7 @@ const useCreateController = (props: CreateProps): CreateControllerProps => { const recordToUse = getRecord(location, record); const version = useVersion(); - const [create, { loading: isSaving }] = useCreate(resource); + const [create, { loading: saving }] = useCreate(resource); const save = useCallback( ( @@ -131,8 +132,9 @@ const useCreateController = (props: CreateProps): CreateControllerProps => { }); return { - isLoading: false, - isSaving, + loading: false, + loaded: true, + saving, defaultTitle, save, resource, diff --git a/packages/ra-core/src/controller/useEditController.ts b/packages/ra-core/src/controller/useEditController.ts index 03815c8f1f2..f00db38abbb 100644 --- a/packages/ra-core/src/controller/useEditController.ts +++ b/packages/ra-core/src/controller/useEditController.ts @@ -26,8 +26,9 @@ export interface EditProps { } export interface EditControllerProps { - isLoading: boolean; - isSaving: boolean; + loading: boolean; + loaded: boolean; + saving: boolean; defaultTitle: string; save: (data: Record, redirect?: RedirectionSideEffect) => void; resource: string; @@ -62,7 +63,7 @@ const useEditController = (props: EditProps): EditControllerProps => { const redirect = useRedirect(); const refresh = useRefresh(); const version = useVersion(); - const { data: record, loading } = useGetOne(resource, id, { + const { data: record, loading, loaded } = useGetOne(resource, id, { version, // used to force reload onFailure: () => { notify('ra.notification.item_doesnt_exist', 'warning'); @@ -81,7 +82,7 @@ const useEditController = (props: EditProps): EditControllerProps => { record, }); - const [update, { loading: isSaving }] = useUpdate( + const [update, { loading: saving }] = useUpdate( resource, id, {}, // set by the caller @@ -119,8 +120,9 @@ const useEditController = (props: EditProps): EditControllerProps => { ); return { - isLoading: loading, - isSaving, + loading, + loaded, + saving, defaultTitle, save, resource, diff --git a/packages/ra-core/src/controller/useListController.ts b/packages/ra-core/src/controller/useListController.ts index a1ac625bb17..09b6b3841be 100644 --- a/packages/ra-core/src/controller/useListController.ts +++ b/packages/ra-core/src/controller/useListController.ts @@ -50,7 +50,7 @@ export interface ListControllerProps { hasCreate: boolean; hideFilter: (filterName: string) => void; ids: Identifier[]; - isLoading: boolean; + loading: boolean; loaded: boolean; onSelect: (ids: Identifier[]) => void; onToggleItem: (id: Identifier) => void; @@ -174,7 +174,7 @@ const useListController = (props: ListProps): ListControllerProps => { filterValues: query.filterValues, hasCreate, ids, - isLoading: loading, + loading, loaded, onSelect: selectionModifiers.select, onToggleItem: selectionModifiers.toggle, @@ -204,7 +204,7 @@ export const injectedProps = [ 'hasCreate', 'hideFilter', 'ids', - 'isLoading', + 'loading', 'loaded', 'onSelect', 'onToggleItem', diff --git a/packages/ra-core/src/controller/useShowController.ts b/packages/ra-core/src/controller/useShowController.ts index e3b9a36652f..2d0e9a264c8 100644 --- a/packages/ra-core/src/controller/useShowController.ts +++ b/packages/ra-core/src/controller/useShowController.ts @@ -20,7 +20,8 @@ export interface ShowProps { } export interface ShowControllerProps { - isLoading: boolean; + loading: boolean; + loaded: boolean; defaultTitle: string; resource: string; basePath: string; @@ -53,7 +54,7 @@ const useShowController = (props: ShowProps): ShowControllerProps => { const redirect = useRedirect(); const refresh = useRefresh(); const version = useVersion(); - const { data: record, loading } = useGetOne(resource, id, { + const { data: record, loading, loaded } = useGetOne(resource, id, { version, // used to force reload onFailure: () => { notify('ra.notification.item_doesnt_exist', 'warning'); @@ -73,7 +74,8 @@ const useShowController = (props: ShowProps): ShowControllerProps => { }); return { - isLoading: loading, + loading, + loaded, defaultTitle, resource, basePath, diff --git a/packages/ra-tree-ui-materialui/src/Tree.js b/packages/ra-tree-ui-materialui/src/Tree.js index 624145c21db..25a080b837d 100644 --- a/packages/ra-tree-ui-materialui/src/Tree.js +++ b/packages/ra-tree-ui-materialui/src/Tree.js @@ -31,7 +31,7 @@ const sanitizeRestProps = ({ hasBulkActions, hasCreate, hideFilter, - isLoading, + loading, loaded, loadedOnce, perPage, diff --git a/packages/ra-ui-materialui/src/auth/LoginForm.tsx b/packages/ra-ui-materialui/src/auth/LoginForm.tsx index e6e2072bc91..4fa37b47cae 100644 --- a/packages/ra-ui-materialui/src/auth/LoginForm.tsx +++ b/packages/ra-ui-materialui/src/auth/LoginForm.tsx @@ -49,9 +49,7 @@ const Input = ({ const LoginForm: SFC = ({ redirectTo }) => { const dispatch = useDispatch(); - const isLoading = useSelector( - (state: ReduxState) => state.admin.loading > 0 - ); + const loading = useSelector((state: ReduxState) => state.admin.loading > 0); const translate = useTranslate(); const classes = useStyles({}); @@ -85,7 +83,7 @@ const LoginForm: SFC = ({ redirectTo }) => { name="username" component={Input} label={translate('ra.auth.username')} - disabled={isLoading} + disabled={loading} />
@@ -95,7 +93,7 @@ const LoginForm: SFC = ({ redirectTo }) => { component={Input} label={translate('ra.auth.password')} type="password" - disabled={isLoading} + disabled={loading} />
@@ -104,10 +102,10 @@ const LoginForm: SFC = ({ redirectTo }) => { variant="contained" type="submit" color="primary" - disabled={submitting || isLoading} + disabled={submitting || loading} className={classes.button} > - {isLoading && ( + {loading && ( ', () => { }; const MyComponent = () => ; - it('should render a LinearProgress if isLoading is true', () => { + it('should render a LinearProgress if loading is true', () => { const wrapper = shallow( diff --git a/packages/ra-ui-materialui/src/list/Datagrid.js b/packages/ra-ui-materialui/src/list/Datagrid.js index 0d576fbb7a7..0db4a4ea9df 100644 --- a/packages/ra-ui-materialui/src/list/Datagrid.js +++ b/packages/ra-ui-materialui/src/list/Datagrid.js @@ -112,7 +112,7 @@ function Datagrid({ classes: classesOverride, ...props }) { hasBulkActions, hover, ids, - isLoading, + loading, loaded, onSelect, onToggleItem, @@ -272,7 +272,7 @@ Datagrid.propTypes = { hasBulkActions: PropTypes.bool.isRequired, hover: PropTypes.bool, ids: PropTypes.arrayOf(PropTypes.any).isRequired, - isLoading: PropTypes.bool, + loading: PropTypes.bool, onSelect: PropTypes.func, onToggleItem: PropTypes.func, resource: PropTypes.string, diff --git a/packages/ra-ui-materialui/src/list/List.js b/packages/ra-ui-materialui/src/list/List.js index f750892ad77..f3c3dee5442 100644 --- a/packages/ra-ui-materialui/src/list/List.js +++ b/packages/ra-ui-materialui/src/list/List.js @@ -71,7 +71,7 @@ const sanitizeRestProps = ({ hideFilter, history, ids, - isLoading, + loading, loaded, locale, location, @@ -191,7 +191,7 @@ ListView.propTypes = { hasCreate: PropTypes.bool, hideFilter: PropTypes.func, ids: PropTypes.array, - isLoading: PropTypes.bool, + loading: PropTypes.bool, onSelect: PropTypes.func, onToggleItem: PropTypes.func, onUnselectItems: PropTypes.func, diff --git a/packages/ra-ui-materialui/src/list/List.spec.js b/packages/ra-ui-materialui/src/list/List.spec.js index e907f62dc7f..531ac06881a 100644 --- a/packages/ra-ui-materialui/src/list/List.spec.js +++ b/packages/ra-ui-materialui/src/list/List.spec.js @@ -18,7 +18,7 @@ describe('', () => { filterValues: {}, hasCreate: false, ids: [], - isLoading: false, + loading: false, location: { pathname: '' }, params: {}, perPage: 10, diff --git a/packages/ra-ui-materialui/src/list/Pagination.js b/packages/ra-ui-materialui/src/list/Pagination.js index 1b2be05e08a..8c107e735b9 100644 --- a/packages/ra-ui-materialui/src/list/Pagination.js +++ b/packages/ra-ui-materialui/src/list/Pagination.js @@ -9,7 +9,7 @@ import PaginationLimit from './PaginationLimit'; const emptyArray = []; const Pagination = ({ - isLoading, + loading, page, perPage, rowsPerPageOptions, @@ -64,7 +64,7 @@ const Pagination = ({ ); if (total === 0) { - return isLoading ? : ; + return loading ? : ; } if (isSmall) { return ( @@ -99,7 +99,7 @@ const Pagination = ({ Pagination.propTypes = { ids: PropTypes.array, - isLoading: PropTypes.bool, + loading: PropTypes.bool, page: PropTypes.number, perPage: PropTypes.number, rowsPerPageOptions: PropTypes.arrayOf(PropTypes.number), diff --git a/packages/ra-ui-materialui/src/list/SimpleList.js b/packages/ra-ui-materialui/src/list/SimpleList.js index 87de3780db4..6c421926cc0 100644 --- a/packages/ra-ui-materialui/src/list/SimpleList.js +++ b/packages/ra-ui-materialui/src/list/SimpleList.js @@ -50,7 +50,7 @@ const SimpleList = ({ data, hasBulkActions, ids, - isLoading, + loading, leftAvatar, leftIcon, linkType, @@ -66,7 +66,7 @@ const SimpleList = ({ }) => { const classes = useStyles({ classes: classesOverride }); return ( - (isLoading || total > 0) && ( + (loading || total > 0) && ( {ids.map(id => ( e.stopPropagation(); const sanitizeRestProps = ({ currentSort, setSort, - isLoading, + loading, loaded, ...props }) => props;