1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
3 | import * as React from 'react';
|
4 | import PropTypes from 'prop-types';
|
5 | import clsx from 'clsx';
|
6 | import ArrowDownwardIcon from '../internal/svg-icons/ArrowDownward';
|
7 | import withStyles from '../styles/withStyles';
|
8 | import ButtonBase from '../ButtonBase';
|
9 | import capitalize from '../utils/capitalize';
|
10 | export const styles = theme => ({
|
11 |
|
12 | root: {
|
13 | cursor: 'pointer',
|
14 | display: 'inline-flex',
|
15 | justifyContent: 'flex-start',
|
16 | flexDirection: 'inherit',
|
17 | alignItems: 'center',
|
18 | '&:focus': {
|
19 | color: theme.palette.text.secondary
|
20 | },
|
21 | '&:hover': {
|
22 | color: theme.palette.text.secondary,
|
23 | '& $icon': {
|
24 | opacity: 0.5
|
25 | }
|
26 | },
|
27 | '&$active': {
|
28 | color: theme.palette.text.primary,
|
29 |
|
30 | '&& $icon': {
|
31 | opacity: 1,
|
32 | color: theme.palette.text.secondary
|
33 | }
|
34 | }
|
35 | },
|
36 |
|
37 |
|
38 | active: {},
|
39 |
|
40 |
|
41 | icon: {
|
42 | fontSize: 18,
|
43 | marginRight: 4,
|
44 | marginLeft: 4,
|
45 | opacity: 0,
|
46 | transition: theme.transitions.create(['opacity', 'transform'], {
|
47 | duration: theme.transitions.duration.shorter
|
48 | }),
|
49 | userSelect: 'none'
|
50 | },
|
51 |
|
52 |
|
53 | iconDirectionDesc: {
|
54 | transform: 'rotate(0deg)'
|
55 | },
|
56 |
|
57 |
|
58 | iconDirectionAsc: {
|
59 | transform: 'rotate(180deg)'
|
60 | }
|
61 | });
|
62 |
|
63 |
|
64 |
|
65 |
|
66 | const TableSortLabel = React.forwardRef(function TableSortLabel(props, ref) {
|
67 | const {
|
68 | active = false,
|
69 | children,
|
70 | classes,
|
71 | className,
|
72 | direction = 'asc',
|
73 | hideSortIcon = false,
|
74 | IconComponent = ArrowDownwardIcon
|
75 | } = props,
|
76 | other = _objectWithoutPropertiesLoose(props, ["active", "children", "classes", "className", "direction", "hideSortIcon", "IconComponent"]);
|
77 |
|
78 | return React.createElement(ButtonBase, _extends({
|
79 | className: clsx(classes.root, className, active && classes.active),
|
80 | component: "span",
|
81 | disableRipple: true,
|
82 | ref: ref
|
83 | }, other), children, hideSortIcon && !active ? null : React.createElement(IconComponent, {
|
84 | className: clsx(classes.icon, classes[`iconDirection${capitalize(direction)}`])
|
85 | }));
|
86 | });
|
87 | process.env.NODE_ENV !== "production" ? TableSortLabel.propTypes = {
|
88 | |
89 |
|
90 |
|
91 | active: PropTypes.bool,
|
92 |
|
93 | |
94 |
|
95 |
|
96 | children: PropTypes.node,
|
97 |
|
98 | |
99 |
|
100 |
|
101 |
|
102 | classes: PropTypes.object.isRequired,
|
103 |
|
104 | |
105 |
|
106 |
|
107 | className: PropTypes.string,
|
108 |
|
109 | |
110 |
|
111 |
|
112 | direction: PropTypes.oneOf(['asc', 'desc']),
|
113 |
|
114 | |
115 |
|
116 |
|
117 | hideSortIcon: PropTypes.bool,
|
118 |
|
119 | |
120 |
|
121 |
|
122 | IconComponent: PropTypes.elementType
|
123 | } : void 0;
|
124 | export default withStyles(styles, {
|
125 | name: 'MuiTableSortLabel'
|
126 | })(TableSortLabel); |
\ | No newline at end of file |