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