1 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
2 | import _extends from "@babel/runtime/helpers/esm/extends";
|
3 | import * as React from 'react';
|
4 | import PropTypes from 'prop-types';
|
5 | import clsx from 'clsx';
|
6 | import withStyles from '../styles/withStyles';
|
7 | import capitalize from '../utils/capitalize';
|
8 | import { darken, fade, lighten } from '../styles/colorManipulator';
|
9 | import TableContext from '../Table/TableContext';
|
10 | import Tablelvl2Context from '../Table/Tablelvl2Context';
|
11 | export const styles = theme => ({
|
12 |
|
13 | root: _extends({}, theme.typography.body2, {
|
14 | display: 'table-cell',
|
15 | verticalAlign: 'inherit',
|
16 |
|
17 |
|
18 | borderBottom: `1px solid
|
19 | ${theme.palette.type === 'light' ? lighten(fade(theme.palette.divider, 1), 0.88) : darken(fade(theme.palette.divider, 1), 0.68)}`,
|
20 | textAlign: 'left',
|
21 | padding: 16
|
22 | }),
|
23 |
|
24 |
|
25 | head: {
|
26 | color: theme.palette.text.primary,
|
27 | lineHeight: theme.typography.pxToRem(24),
|
28 | fontWeight: theme.typography.fontWeightMedium
|
29 | },
|
30 |
|
31 |
|
32 | body: {
|
33 | color: theme.palette.text.primary
|
34 | },
|
35 |
|
36 |
|
37 | footer: {
|
38 | color: theme.palette.text.secondary,
|
39 | lineHeight: theme.typography.pxToRem(21),
|
40 | fontSize: theme.typography.pxToRem(12)
|
41 | },
|
42 |
|
43 |
|
44 | sizeSmall: {
|
45 | padding: '6px 24px 6px 16px',
|
46 | '&:last-child': {
|
47 | paddingRight: 16
|
48 | },
|
49 | '&$paddingCheckbox': {
|
50 | width: 24,
|
51 |
|
52 | padding: '0 12px 0 16px',
|
53 | '&:last-child': {
|
54 | paddingLeft: 12,
|
55 | paddingRight: 16
|
56 | },
|
57 | '& > *': {
|
58 | padding: 0
|
59 | }
|
60 | }
|
61 | },
|
62 |
|
63 |
|
64 | paddingCheckbox: {
|
65 | width: 48,
|
66 |
|
67 | padding: '0 0 0 4px',
|
68 | '&:last-child': {
|
69 | paddingLeft: 0,
|
70 | paddingRight: 4
|
71 | }
|
72 | },
|
73 |
|
74 |
|
75 | paddingNone: {
|
76 | padding: 0,
|
77 | '&:last-child': {
|
78 | padding: 0
|
79 | }
|
80 | },
|
81 |
|
82 |
|
83 | alignLeft: {
|
84 | textAlign: 'left'
|
85 | },
|
86 |
|
87 |
|
88 | alignCenter: {
|
89 | textAlign: 'center'
|
90 | },
|
91 |
|
92 |
|
93 | alignRight: {
|
94 | textAlign: 'right',
|
95 | flexDirection: 'row-reverse'
|
96 | },
|
97 |
|
98 |
|
99 | alignJustify: {
|
100 | textAlign: 'justify'
|
101 | },
|
102 |
|
103 |
|
104 | stickyHeader: {
|
105 | position: 'sticky',
|
106 | top: 0,
|
107 | left: 0,
|
108 | zIndex: 2,
|
109 | backgroundColor: theme.palette.background.default
|
110 | }
|
111 | });
|
112 |
|
113 |
|
114 |
|
115 |
|
116 |
|
117 | const TableCell = React.forwardRef(function TableCell(props, ref) {
|
118 | const {
|
119 | align = 'inherit',
|
120 | classes,
|
121 | className,
|
122 | component,
|
123 | padding: paddingProp,
|
124 | scope: scopeProp,
|
125 | size: sizeProp,
|
126 | sortDirection,
|
127 | variant: variantProp
|
128 | } = props,
|
129 | other = _objectWithoutPropertiesLoose(props, ["align", "classes", "className", "component", "padding", "scope", "size", "sortDirection", "variant"]);
|
130 |
|
131 | const table = React.useContext(TableContext);
|
132 | const tablelvl2 = React.useContext(Tablelvl2Context);
|
133 | const isHeadCell = tablelvl2 && tablelvl2.variant === 'head';
|
134 | let role;
|
135 | let Component;
|
136 |
|
137 | if (component) {
|
138 | Component = component;
|
139 | role = isHeadCell ? 'columnheader' : 'cell';
|
140 | } else {
|
141 | Component = isHeadCell ? 'th' : 'td';
|
142 | }
|
143 |
|
144 | let scope = scopeProp;
|
145 |
|
146 | if (!scope && isHeadCell) {
|
147 | scope = 'col';
|
148 | }
|
149 |
|
150 | const padding = paddingProp || (table && table.padding ? table.padding : 'default');
|
151 | const size = sizeProp || (table && table.size ? table.size : 'medium');
|
152 | const variant = variantProp || tablelvl2 && tablelvl2.variant;
|
153 | let ariaSort = null;
|
154 |
|
155 | if (sortDirection) {
|
156 | ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
|
157 | }
|
158 |
|
159 | return React.createElement(Component, _extends({
|
160 | ref: ref,
|
161 | className: clsx(classes.root, classes[variant], className, align !== 'inherit' && classes[`align${capitalize(align)}`], padding !== 'default' && classes[`padding${capitalize(padding)}`], size !== 'medium' && classes[`size${capitalize(size)}`], variant === 'head' && table && table.stickyHeader && classes.stickyHeader),
|
162 | "aria-sort": ariaSort,
|
163 | role: role,
|
164 | scope: scope
|
165 | }, other));
|
166 | });
|
167 | process.env.NODE_ENV !== "production" ? TableCell.propTypes = {
|
168 |
|
169 |
|
170 |
|
171 |
|
172 |
|
173 | |
174 |
|
175 |
|
176 |
|
177 |
|
178 |
|
179 | align: PropTypes.oneOf(['center', 'inherit', 'justify', 'left', 'right']),
|
180 |
|
181 | |
182 |
|
183 |
|
184 | children: PropTypes.node,
|
185 |
|
186 | |
187 |
|
188 |
|
189 |
|
190 | classes: PropTypes.object,
|
191 |
|
192 | |
193 |
|
194 |
|
195 | className: PropTypes.string,
|
196 |
|
197 | |
198 |
|
199 |
|
200 |
|
201 | component: PropTypes
|
202 |
|
203 | .elementType,
|
204 |
|
205 | |
206 |
|
207 |
|
208 |
|
209 | padding: PropTypes.oneOf(['checkbox', 'default', 'none']),
|
210 |
|
211 | |
212 |
|
213 |
|
214 | scope: PropTypes.string,
|
215 |
|
216 | |
217 |
|
218 |
|
219 |
|
220 | size: PropTypes.oneOf(['medium', 'small']),
|
221 |
|
222 | |
223 |
|
224 |
|
225 | sortDirection: PropTypes.oneOf(['asc', 'desc', false]),
|
226 |
|
227 | |
228 |
|
229 |
|
230 |
|
231 | variant: PropTypes.oneOf(['body', 'footer', 'head'])
|
232 | } : void 0;
|
233 | export default withStyles(styles, {
|
234 | name: 'MuiTableCell'
|
235 | })(TableCell); |
\ | No newline at end of file |