UNPKG

8.16 kBJavaScriptView Raw
1import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
3import _extends from "@babel/runtime/helpers/esm/extends";
4import * as React from 'react';
5import PropTypes from 'prop-types';
6import clsx from 'clsx';
7import { unstable_composeClasses as composeClasses } from '@mui/base';
8import { darken, alpha, lighten } from '@mui/system';
9import capitalize from '../utils/capitalize';
10import TableContext from '../Table/TableContext';
11import Tablelvl2Context from '../Table/Tablelvl2Context';
12import useThemeProps from '../styles/useThemeProps';
13import styled from '../styles/styled';
14import tableCellClasses, { getTableCellUtilityClass } from './tableCellClasses';
15import { jsx as _jsx } from "react/jsx-runtime";
16
17var 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
30var 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 // Workaround for a rendering bug with spanned columns in Chrome 62.0.
44 // Removes the alpha (sets it to 1), and lightens or darkens the theme color.
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 // prevent the checkbox column from growing
63 padding: '0 12px 0 16px',
64 '& > *': {
65 padding: 0
66 }
67 }), ownerState.padding === 'checkbox' && {
68 width: 48,
69 // prevent the checkbox column from growing
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 * The component renders a `<th>` element when the parent context is a header
91 * or otherwise a `<td>` element.
92 */
93
94var TableCell = /*#__PURE__*/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 /*#__PURE__*/_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});
156process.env.NODE_ENV !== "production" ? TableCell.propTypes
157/* remove-proptypes */
158= {
159 // ----------------------------- Warning --------------------------------
160 // | These PropTypes are generated from the TypeScript type definitions |
161 // | To update them edit the d.ts file and run "yarn proptypes" |
162 // ----------------------------------------------------------------------
163
164 /**
165 * Set the text-align on the table cell content.
166 *
167 * Monetary or generally number fields **should be right aligned** as that allows
168 * you to add them up quickly in your head without having to worry about decimals.
169 * @default 'inherit'
170 */
171 align: PropTypes.oneOf(['center', 'inherit', 'justify', 'left', 'right']),
172
173 /**
174 * The content of the component.
175 */
176 children: PropTypes.node,
177
178 /**
179 * Override or extend the styles applied to the component.
180 */
181 classes: PropTypes.object,
182
183 /**
184 * @ignore
185 */
186 className: PropTypes.string,
187
188 /**
189 * The component used for the root node.
190 * Either a string to use a HTML element or a component.
191 */
192 component: PropTypes.elementType,
193
194 /**
195 * Sets the padding applied to the cell.
196 * The prop defaults to the value (`'default'`) inherited from the parent Table component.
197 */
198 padding: PropTypes.oneOf(['checkbox', 'none', 'normal']),
199
200 /**
201 * Set scope attribute.
202 */
203 scope: PropTypes.string,
204
205 /**
206 * Specify the size of the cell.
207 * The prop defaults to the value (`'medium'`) inherited from the parent Table component.
208 */
209 size: PropTypes
210 /* @typescript-to-proptypes-ignore */
211 .oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
212
213 /**
214 * Set aria-sort direction.
215 */
216 sortDirection: PropTypes.oneOf(['asc', 'desc', false]),
217
218 /**
219 * The system prop that allows defining system overrides as well as additional CSS styles.
220 */
221 sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
222
223 /**
224 * Specify the cell type.
225 * The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components.
226 */
227 variant: PropTypes.oneOf(['body', 'footer', 'head'])
228} : void 0;
229export default TableCell;
\No newline at end of file