diff --git a/docs/CreateEdit.md b/docs/CreateEdit.md index 27ef5ebf8d9..bf807a98cff 100644 --- a/docs/CreateEdit.md +++ b/docs/CreateEdit.md @@ -147,15 +147,6 @@ export const PostEdit = (props) => ( ); ``` -React Admin also updates the page title based on this `title` prop, as long as it's a string. If you're passing an element as `title`, like in the example above, you have to update the page title yourself. React-admin exports a hook called `useDocumentTitle` to make this simple: - -```jsx -const PostTitle = ({ record }) => { - useDocumentTitle(record ?? record.title); - return Post {record ? `"${record.title}"` : ''}; -}; -``` - ### Actions You can replace the list of default actions by your own element using the `actions` prop: diff --git a/docs/Reference.md b/docs/Reference.md index d7d7f63574d..d6e30346a1a 100644 --- a/docs/Reference.md +++ b/docs/Reference.md @@ -157,7 +157,6 @@ title: "Reference" * [`useDataProvider`](./Actions.md#usedataprovider-hook) * [`useDelete`](./Actions.md#usedelete) * [`useDeleteMany`](./Actions.md#usedeletemany) -* `useDocumentTitle` * [`useEditController`](./CreateEdit.md#useeditcontroller) * `useFilterState` * [`useGetIdentity`](./Authentication.md#usegetidentity-hook) diff --git a/examples/simple/src/posts/PostTitle.tsx b/examples/simple/src/posts/PostTitle.tsx index 90356784d3f..e3ac61928d5 100644 --- a/examples/simple/src/posts/PostTitle.tsx +++ b/examples/simple/src/posts/PostTitle.tsx @@ -1,11 +1,13 @@ import * as React from 'react'; -import { useTranslate, TitleProps, useDocumentTitle } from 'react-admin'; +import { useTranslate, TitleProps } from 'react-admin'; export default ({ record }: TitleProps) => { const translate = useTranslate(); - const title = translate('post.edit.title', { title: record?.title ?? '' }); - - useDocumentTitle(title); - - return {record ? title : ''}; + return ( + + {record + ? translate('post.edit.title', { title: record.title }) + : ''} + + ); }; diff --git a/examples/simple/src/tags/TagEdit.tsx b/examples/simple/src/tags/TagEdit.tsx index 8e486ade00d..e0f1fd0b064 100644 --- a/examples/simple/src/tags/TagEdit.tsx +++ b/examples/simple/src/tags/TagEdit.tsx @@ -32,7 +32,7 @@ const TagEdit = props => ( basePath="/posts" resource="posts" filter={{ tags: [props.id] }} - title={false} + title=" " > diff --git a/packages/ra-core/src/util/index.ts b/packages/ra-core/src/util/index.ts index 80dbd95aec6..5b43891e3c6 100644 --- a/packages/ra-core/src/util/index.ts +++ b/packages/ra-core/src/util/index.ts @@ -12,7 +12,6 @@ import warning from './warning'; import useWhyDidYouUpdate from './useWhyDidYouUpdate'; import { useSafeSetState, useTimeout } from './hooks'; import { getMutationMode } from './getMutationMode'; -export * from './useDocumentTitle'; export * from './indexById'; export { diff --git a/packages/ra-core/src/util/useDocumentTitle.ts b/packages/ra-core/src/util/useDocumentTitle.ts deleted file mode 100644 index 40d04065b51..00000000000 --- a/packages/ra-core/src/util/useDocumentTitle.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { useEffect } from 'react'; - -/** - * A hook that updates the document title whenever the argument changes - * @example - * - * const MyComponent = (props => { - * useDocumentTitle(props.record && props.record.title); - * return { - if (title) { - document.title = title; - } - }, [title]); -} diff --git a/packages/ra-ui-materialui/src/layout/Title.tsx b/packages/ra-ui-materialui/src/layout/Title.tsx index 10560c2b672..27f33ba95f4 100644 --- a/packages/ra-ui-materialui/src/layout/Title.tsx +++ b/packages/ra-ui-materialui/src/layout/Title.tsx @@ -3,13 +3,12 @@ import { FC, cloneElement, ReactElement } from 'react'; import { createPortal } from 'react-dom'; import PropTypes from 'prop-types'; import { useTranslate, Record, warning } from 'ra-core'; -import { TitleText } from './TitleText'; export interface TitleProps { className?: string; defaultTitle?: string; record?: Record; - title?: string | ReactElement | false; + title?: string | ReactElement; } const Title: FC = ({ @@ -27,18 +26,16 @@ const Title: FC = ({ if (!container) return null; - if (typeof title === 'boolean' && !title) return null; - warning(!defaultTitle && !title, 'Missing title prop in element'); const titleElement = !title ? ( - <TitleText className={className} {...rest} text={defaultTitle} /> + <span className={className} {...rest}> + {defaultTitle} + </span> ) : typeof title === 'string' ? ( - <TitleText - className={className} - {...rest} - text={translate(title, { _: title })} - /> + <span className={className} {...rest}> + {translate(title, { _: title })} + </span> ) : ( cloneElement(title, { className, record, ...rest }) ); @@ -48,14 +45,12 @@ const Title: FC<TitleProps> = ({ export const TitlePropType = PropTypes.oneOfType([ PropTypes.string, PropTypes.element, - PropTypes.bool, ]); Title.propTypes = { defaultTitle: PropTypes.string, className: PropTypes.string, record: PropTypes.any, - // @ts-ignore title: TitlePropType, }; diff --git a/packages/ra-ui-materialui/src/layout/TitleText.tsx b/packages/ra-ui-materialui/src/layout/TitleText.tsx deleted file mode 100644 index 9c3a447f540..00000000000 --- a/packages/ra-ui-materialui/src/layout/TitleText.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import { useDocumentTitle } from 'ra-core'; - -export interface TitleTextProps extends React.HTMLProps<HTMLSpanElement> { - text: string; -} - -export function TitleText({ text, ...rest }: TitleTextProps) { - useDocumentTitle(text); - - return <span {...rest}>{text}</span>; -} diff --git a/packages/ra-ui-materialui/src/layout/index.ts b/packages/ra-ui-materialui/src/layout/index.ts index 6af791703b1..1f643a911ce 100644 --- a/packages/ra-ui-materialui/src/layout/index.ts +++ b/packages/ra-ui-materialui/src/layout/index.ts @@ -21,7 +21,6 @@ import Title, { TitleProps, TitlePropType } from './Title'; import TitleForRecord from './TitleForRecord'; import TopToolbar from './TopToolbar'; import UserMenu, { UserMenuProps } from './UserMenu'; -export * from './TitleText'; export { AppBar, diff --git a/packages/ra-ui-materialui/src/types.ts b/packages/ra-ui-materialui/src/types.ts index c6e466abf88..df192154b1d 100644 --- a/packages/ra-ui-materialui/src/types.ts +++ b/packages/ra-ui-materialui/src/types.ts @@ -28,7 +28,7 @@ export interface ListProps extends ResourceComponentProps { perPage?: number; sort?: SortPayload; syncWithLocation?: boolean; - title?: string | ReactElement | false; + title?: string | ReactElement; } export interface EditProps extends ResourceComponentPropsWithId { @@ -43,7 +43,7 @@ export interface EditProps extends ResourceComponentPropsWithId { onSuccess?: OnSuccess; onFailure?: OnFailure; transform?: (data: RaRecord) => RaRecord | Promise<RaRecord>; - title?: string | ReactElement | false; + title?: string | ReactElement; } export interface CreateProps extends ResourceComponentProps { @@ -56,7 +56,7 @@ export interface CreateProps extends ResourceComponentProps { onSuccess?: OnSuccess; onFailure?: OnFailure; transform?: (data: RaRecord) => RaRecord | Promise<RaRecord>; - title?: string | ReactElement | false; + title?: string | ReactElement; } export interface ShowProps extends ResourceComponentPropsWithId { @@ -65,7 +65,7 @@ export interface ShowProps extends ResourceComponentPropsWithId { classes?: any; className?: string; component?: ElementType; - title?: string | ReactElement | false; + title?: string | ReactElement; } export interface BulkActionProps {