forked from marmelab/react-admin
-
Notifications
You must be signed in to change notification settings - Fork 1
/
ShowButton.tsx
81 lines (72 loc) · 2.12 KB
/
ShowButton.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import * as React from 'react';
import { FC, memo, useMemo, ReactElement } from 'react';
import PropTypes from 'prop-types';
import ImageEye from '@material-ui/icons/RemoveRedEye';
import { Link } from 'react-router-dom';
import { linkToRecord, Record } from 'ra-core';
import Button, { ButtonProps } from './Button';
/**
* Opens the Show view of a given record
*
* @example // basic usage
* import { ShowButton } from 'react-admin';
*
* const CommentShowButton = ({ record }) => (
* <ShowButton basePath="/comments" label="Show comment" record={record} />
* );
*/
const ShowButton: FC<ShowButtonProps> = ({
basePath = '',
icon = defaultIcon,
label = 'ra.action.show',
record,
scrollToTop = true,
...rest
}) => (
<Button
component={Link}
to={useMemo(
() => ({
pathname: record
? `${linkToRecord(basePath, record.id)}/show`
: '',
state: { _scrollToTop: scrollToTop },
}),
[basePath, record, scrollToTop]
)}
label={label}
onClick={stopPropagation}
{...(rest as any)}
>
{icon}
</Button>
);
const defaultIcon = <ImageEye />;
// useful to prevent click bubbling in a datagrid with rowClick
const stopPropagation = e => e.stopPropagation();
interface Props {
basePath?: string;
icon?: ReactElement;
label?: string;
record?: Record;
scrollToTop?: boolean;
}
export type ShowButtonProps = Props & ButtonProps;
ShowButton.propTypes = {
basePath: PropTypes.string,
icon: PropTypes.element,
label: PropTypes.string,
record: PropTypes.any,
scrollToTop: PropTypes.bool,
};
const PureShowButton = memo(
ShowButton,
(props: ShowButtonProps, nextProps: ShowButtonProps) =>
(props.record && nextProps.record
? props.record.id === nextProps.record.id
: props.record == nextProps.record) && // eslint-disable-line eqeqeq
props.basePath === nextProps.basePath &&
props.to === nextProps.to &&
props.disabled === nextProps.disabled
);
export default PureShowButton;