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