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