Merge pull request #8337 from marmelab/docs-jsdoc-fixes

[Doc] Update jsDocs to access record from context instead of props

Author: djhi

packages/ra-core/src/dataProvider/useCreate.ts

@@ -39,9 +39,10 @@ import { RaRecord, CreateParams } from '../types';
  *
  * @example // set params when calling the create callback
  *
- * import { useCreate } from 'react-admin';
+ * import { useCreate, useRecordContext } from 'react-admin';
  *
- * const LikeButton = ({ record }) => {
+ * const LikeButton = () => {
+ *     const record = useRecordContext();
  *     const like = { postId: record.id };
  *     const [create, { isLoading, error }] = useCreate();
  *     const handleClick = () => {
@@ -53,9 +54,10 @@ import { RaRecord, CreateParams } from '../types';
  *
  * @example // set params when calling the hook
  *
- * import { useCreate } from 'react-admin';
+ * import { useCreate, useRecordContext } from 'react-admin';
  *
- * const LikeButton = ({ record }) => {
+ * const LikeButton = () => {
+ *     const record = useRecordContext();
  *     const like = { postId: record.id };
  *     const [create, { isLoading, error }] = useCreate('likes', { data: like });
  *     if (error) { return <p>ERROR</p>; }

packages/ra-core/src/dataProvider/useDelete.ts

@@ -48,9 +48,10 @@ import {
  *
  * @example // set params when calling the deleteOne callback
  *
- * import { useDelete } from 'react-admin';
+ * import { useDelete, useRecordContext } from 'react-admin';
  *
- * const DeleteButton = ({ record }) => {
+ * const DeleteButton = () => {
+ *     const record = useRecordContext();
  *     const [deleteOne, { isLoading, error }] = useDelete();
  *     const handleClick = () => {
  *         deleteOne('likes', { id: record.id, previousData: record })
@@ -61,9 +62,10 @@ import {
  *
  * @example // set params when calling the hook
  *
- * import { useDelete } from 'react-admin';
+ * import { useDelete, useRecordContext } from 'react-admin';
  *
- * const DeleteButton = ({ record }) => {
+ * const DeleteButton = () => {
+ *     const record = useRecordContext();
  *     const [deleteOne, { isLoading, error }] = useDelete('likes', { id: record.id, previousData: record });
  *     if (error) { return <p>ERROR</p>; }
  *     return <button disabled={isLoading} onClick={() => deleteOne()}>Delete</button>;

packages/ra-core/src/dataProvider/useGetManyAggregate.ts

@@ -49,9 +49,10 @@ import { useDataProvider } from './useDataProvider';
  *
  * @example
  *
- * import { useGetManyAggregate } from 'react-admin';
+ * import { useGetManyAggregate, useRecordContext } from 'react-admin';
  *
- * const PostTags = ({ record }) => {
+ * const PostTags = () => {
+ *     const record = useRecordContext();
  *     const { data, isLoading, error } = useGetManyAggregate('tags', { ids: record.tagIds });
  *     if (isLoading) { return <Loading />; }
  *     if (error) { return <p>ERROR</p>; }

packages/ra-core/src/dataProvider/useGetManyReference.ts

@@ -39,14 +39,14 @@ import { useDataProvider } from './useDataProvider';
  * @prop params.filter The request filters, e.g. { title: 'hello, world' }
  * @prop params.meta Optional meta parameters
  *
- *
  * @returns The current request state. Destructure as { data, total, error, isLoading, refetch }.
  *
  * @example
  *
- * import { useGetManyReference } from 'react-admin';
+ * import { useGetManyReference, useRecordContext } from 'react-admin';
  *
- * const PostComments = ({ record }) => {
+ * const PostComments = () => {
+ *     const record = useRecordContext();
  *     // fetch all comments related to the current record
  *     const { data, isLoading, error } = useGetManyReference(
  *         'comments',

packages/ra-core/src/dataProvider/useGetOne.ts

@@ -31,9 +31,10 @@ import { useDataProvider } from './useDataProvider';
  *
  * @example
  *
- * import { useGetOne } from 'react-admin';
+ * import { useGetOne, useRecordContext } from 'react-admin';
  *
- * const UserProfile = ({ record }) => {
+ * const UserProfile = () => {
+ *     const record = useRecordContext();
  *     const { data, isLoading, error } = useGetOne('users', { id: record.id });
  *     if (isLoading) { return <Loading />; }
  *     if (error) { return <p>ERROR</p>; }

packages/ra-core/src/dataProvider/useUpdate.ts

@@ -50,9 +50,10 @@ import {
  *
  * @example // set params when calling the update callback
  *
- * import { useUpdate } from 'react-admin';
+ * import { useUpdate, useRecordContext } from 'react-admin';
  *
- * const IncreaseLikeButton = ({ record }) => {
+ * const IncreaseLikeButton = () => {
+ *     const record = useRecordContext();
  *     const diff = { likes: record.likes + 1 };
  *     const [update, { isLoading, error }] = useUpdate();
  *     const handleClick = () => {
@@ -64,9 +65,10 @@ import {
  *
  * @example // set params when calling the hook
  *
- * import { useUpdate } from 'react-admin';
+ * import { useUpdate, useRecordContext } from 'react-admin';
  *
- * const IncreaseLikeButton = ({ record }) => {
+ * const IncreaseLikeButton = () => {
+ *     const record = useRecordContext();
  *     const diff = { likes: record.likes + 1 };
  *     const [update, { isLoading, error }] = useUpdate('likes', { id: record.id, data: diff, previousData: record });
  *     if (error) { return <p>ERROR</p>; }

packages/ra-core/src/dataProvider/useUpdateMany.ts

@@ -50,9 +50,10 @@ import { Identifier } from '..';
  *
  * @example // set params when calling the updateMany callback
  *
- * import { useUpdateMany } from 'react-admin';
+ * import { useUpdateMany, useListContext } from 'react-admin';
  *
- * const BulkResetViewsButton = ({ selectedIds }) => {
+ * const BulkResetViewsButton = () => {
+ *     const { selectedIds } = useListContext();
  *     const [updateMany, { isLoading, error }] = useUpdateMany();
  *     const handleClick = () => {
  *         updateMany('posts', { ids: selectedIds, data: { views: 0 } });
@@ -63,9 +64,10 @@ import { Identifier } from '..';
  *
  * @example // set params when calling the hook
  *
- * import { useUpdateMany } from 'react-admin';
+ * import { useUpdateMany, useListContext } from 'react-admin';
  *
- * const BulkResetViewsButton = ({ selectedIds }) => {
+ * const BulkResetViewsButton = () => {
+ *     const { selectedIds } = useListContext();
  *     const [updateMany, { isLoading, error }] = useUpdateMany('posts', { ids: selectedIds, data: { views: 0 } });
  *     if (error) { return <p>ERROR</p>; }
  *     return <button disabled={isLoading} onClick={() => updateMany()}>Reset views</button>;

packages/ra-ui-materialui/src/button/ShowButton.tsx

@@ -16,11 +16,14 @@ import { Button, ButtonProps } from './Button';
  * Opens the Show view of a given record
  *
  * @example // basic usage
- * import { ShowButton } from 'react-admin';
+ * import { ShowButton, useRecordContext } from 'react-admin';
  *
- * const CommentShowButton = ({ record }) => (
- *     <ShowButton label="Show comment" record={record} />
- * );
+ * const CommentShowButton = () => {
+ *     const record = useRecordContext();
+ *     return (
+ *         <ShowButton label="Show comment" record={record} />
+ *     );
+ * };
  */
 const ShowButton = <RecordType extends RaRecord = any>(
     props: ShowButtonProps<RecordType>

packages/ra-ui-materialui/src/detail/EditActions.tsx

@@ -14,11 +14,11 @@ import TopToolbar from '../layout/TopToolbar';
  *
  * @example
  *     import Button from '@mui/material/Button';
- *     import { TopToolbar, ShowButton, Edit } from 'react-admin';
+ *     import { TopToolbar, EditButton, Edit } from 'react-admin';
  *
- *     const PostEditActions = ({ record, resource }) => (
+ *     const PostEditActions = () => (
  *         <TopToolbar>
- *             <ShowButton record={record} />
+ *             <EditButton />
  *             // Add your custom actions here
  *             <Button color="primary" onClick={customAction}>Custom Action</Button>
  *         </TopToolbar>

packages/ra-ui-materialui/src/detail/ShowActions.tsx

@@ -14,11 +14,11 @@ import TopToolbar from '../layout/TopToolbar';
  *
  * @example
  *     import Button from '@mui/material/Button';
- *     import { TopToolbar, EditButton, Show } from 'react-admin';
+ *     import { TopToolbar, ShowButton, Show } from 'react-admin';
  *
- *     const PostShowActions = ({ record, resource }) => (
+ *     const PostShowActions = () => (
  *         <TopToolbar>
- *             <EditButton record={record} />
+ *             <ShowButton />
  *             // Add your custom actions here //
  *             <Button color="primary" onClick={customAction}>Custom Action</Button>
  *         </TopToolbar>

packages/ra-ui-materialui/src/field/ArrayField.tsx

@@ -61,13 +61,16 @@ import { PublicFieldProps, InjectedFieldProps, fieldPropTypes } from './types';
  * to write your own component:
  *
  * @example
- *     const TagsField = ({ record }) => (
- *          <ul>
- *              {record.tags.map(item => (
- *                  <li key={item.name}>{item.name}</li>
- *              ))}
- *          </ul>
- *     );
+ *   const TagsField = () => {
+ *       const record = useRecordContext();
+ *       return (
+ *           <ul>
+ *               {record.tags.map(item => (
+ *                   <li key={item.name}>{item.name}</li>
+ *               ))}
+ *           </ul>
+ *       );
+ *   };
  */
 export const ArrayField: FC<ArrayFieldProps> = memo(props => {
     const { children, resource, source } = props;

packages/ra-ui-materialui/src/field/SelectField.tsx

@@ -55,7 +55,10 @@ import { PublicFieldProps, InjectedFieldProps, fieldPropTypes } from './types';
  *    { id: 123, first_name: 'Leo', last_name: 'Tolstoi' },
  *    { id: 456, first_name: 'Jane', last_name: 'Austen' },
  * ];
- * const FullNameField = ({ record }) => <Chip>{record.first_name} {record.last_name}</Chip>;
+ * const FullNameField = () => {
+ *     const record = useRecordContext();
+ *     return (<Chip>{record.first_name} {record.last_name}</Chip>)
+ * };
  * <SelectField source="gender" choices={choices} optionText={<FullNameField />}/>
  *
  * The current choice is translated by default, so you can use translation identifiers as choices:

packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx

@@ -60,7 +60,10 @@ import { LinearProgress } from '../layout';
  *    { id: 123, first_name: 'Leo', last_name: 'Tolstoi' },
  *    { id: 456, first_name: 'Jane', last_name: 'Austen' },
  * ];
- * const FullNameField = ({ record }) => <span>{record.first_name} {record.last_name}</span>;
+ * const FullNameField = () => {
+ *     const record = useRecordContext();
+ *     return (<span>{record.first_name} {record.last_name}</span>)
+ * };
  * <RadioButtonGroupInput source="recipients" choices={choices} optionText={<FullNameField />}/>
  *
  * The choices are translated by default, so you can use translation identifiers as choices:

packages/ra-ui-materialui/src/input/SelectArrayInput.tsx

@@ -71,7 +71,10 @@ import {
  *    { id: 123, first_name: 'Leo', last_name: 'Tolstoi' },
  *    { id: 456, first_name: 'Jane', last_name: 'Austen' },
  * ];
- * const FullNameField = ({ record }) => <span>{record.first_name} {record.last_name}</span>;
+ * const FullNameField = () => {
+ *     const record = useRecordContext();
+ *     return (<span>{record.first_name} {record.last_name}</span>)
+ * };
  * <SelectArrayInput source="authors" choices={choices} optionText={<FullNameField />}/>
  *
  * The choices are translated by default, so you can use translation identifiers as choices: