Skip to content

Commit

Permalink
Migrate TableCell to emotion
Browse files Browse the repository at this point in the history
  • Loading branch information
@natac13
natac13 committed Jan 28, 2021
1 parent fda75f6 commit f1eb70b
Show file tree
Hide file tree
Showing 10 changed files with 202 additions and 75 deletions.
6 changes: 5 additions & 1 deletion docs/pages/api-docs/table-cell.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"sortDirection": {
"type": { "name": "enum", "description": "'asc'<br>&#124;&nbsp;'desc'<br>&#124;&nbsp;false" }
},
"sx": { "type": { "name": "object" } },
"variant": {
"type": {
"name": "enum",
Expand All @@ -36,12 +37,15 @@
"body",
"footer",
"sizeSmall",
"sizeMedium",
"paddingCheckbox",
"paddingNone",
"paddingDefault",
"alignLeft",
"alignCenter",
"alignRight",
"alignJustify",
"alignInherit",
"stickyHeader"
],
"globalClasses": {},
Expand All @@ -52,6 +56,6 @@
"filename": "/packages/material-ui/src/TableCell/TableCell.js",
"inheritance": null,
"demos": "<ul><li><a href=\"/components/tables/\">Tables</a></li></ul>",
"styledComponent": false,
"styledComponent": true,
"cssComponent": false
}
16 changes: 16 additions & 0 deletions docs/translations/api-docs/table-cell/table-cell.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"scope": "Set scope attribute.",
"size": "Specify the size of the cell. The prop defaults to the value (<code>&#39;medium&#39;</code>) inherited from the parent Table component.",
"sortDirection": "Set aria-sort direction.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/basics/#the-sx-prop\">`sx` page</a> for more details.",
"variant": "Specify the cell type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components."
},
"classDescriptions": {
Expand All @@ -33,6 +34,11 @@
"nodeName": "the root element",
"conditions": "<code>size=\"small\"</code>"
},
"sizeMedium": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>size=\"medium\"</code>"
},
"paddingCheckbox": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
Expand All @@ -43,6 +49,11 @@
"nodeName": "the root element",
"conditions": "<code>padding=\"none\"</code>"
},
"paddingDefault": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>padding=\"default\"</code>"
},
"alignLeft": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
Expand All @@ -63,6 +74,11 @@
"nodeName": "the root element",
"conditions": "<code>align=\"justify\"</code>"
},
"alignInherit": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>align=\"inherit\"</code>"
},
"stickyHeader": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
Expand Down
11 changes: 9 additions & 2 deletions packages/material-ui/src/TableCell/TableCell.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { SxProps } from '@material-ui/system';
import * as React from 'react';
import { InternalStandardProps as StandardProps } from '..';
import { InternalStandardProps as StandardProps, Theme } from '..';
import { Padding, Size } from '../Table';

export { Padding, Size };
Expand Down Expand Up @@ -39,6 +40,8 @@ export interface TableCellProps extends StandardProps<TableCellBaseProps, 'align
footer?: string;
/** Styles applied to the root element if `size="small"`. */
sizeSmall?: string;
/** Styles applied to the root element if `size="medium"`. */
sizeMedium?: string;
/** Styles applied to the root element if `padding="checkbox"`. */
paddingCheckbox?: string;
/** Styles applied to the root element if `padding="none"`. */
Expand All @@ -51,7 +54,7 @@ export interface TableCellProps extends StandardProps<TableCellBaseProps, 'align
alignRight?: string;
/** Styles applied to the root element if `align="justify"`. */
alignJustify?: string;
/** Styles applied to the root element if `context.table.stickyHeader={true}`. */
/** Styles applied to the root element if `align="inherit"`. */
stickyHeader?: string;
};
/**
Expand All @@ -77,6 +80,10 @@ export interface TableCellProps extends StandardProps<TableCellBaseProps, 'align
* Set aria-sort direction.
*/
sortDirection?: SortDirection;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
/**
* Specify the cell type.
* The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components.
Expand Down
169 changes: 113 additions & 56 deletions packages/material-ui/src/TableCell/TableCell.js
View file
Original file line number Diff line number Diff line change
@@ -1,102 +1,150 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
import { deepmerge } from '@material-ui/utils';
import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
import capitalize from '../utils/capitalize';
import { darken, alpha, lighten } from '../styles/colorManipulator';
import TableContext from '../Table/TableContext';
import Tablelvl2Context from '../Table/Tablelvl2Context';

export const styles = (theme) => ({
import useThemeProps from '../styles/useThemeProps';
import experimentalStyled from '../styles/experimentalStyled';
import tableCellClasses, { getTableCellUtilityClass } from './tableCellClasses';

// classes[variant],
// {
// [classes.stickyHeader]: variant === 'head' && table && table.stickyHeader,
// [classes[`align${capitalize(align)}`]]: align !== 'inherit',
// [classes[`padding${capitalize(padding)}`]]: padding !== 'default',
// [classes[`size${capitalize(size)}`]]: size !== 'medium',
// },
const overridesResolver = (props, styles) => {
const { styleProps } = props;

return deepmerge(styles.root || {}, {
...styles[styleProps.variant],
...(styleProps.align !== 'inherit' && styles[`align${capitalize(styleProps.align)}`]),
...(styleProps.padding !== 'default' && styles[`padding${capitalize(styleProps.padding)}`]),
...styles[`size${capitalize(styleProps.size)}`],
...(styleProps.stickyHeader && styles.stickyHeader),
});
};

const useUtilityClasses = (styleProps) => {
const { classes, variant, align, padding, size, stickyHeader } = styleProps;

const slots = {
root: [
'root',
variant,
align !== 'inherit' && `align${capitalize(align)}`,
padding !== 'default' && `padding${capitalize(padding)}`,
`size${capitalize(size)}`,
stickyHeader && 'stickyHeader',
],
};

return composeClasses(slots, getTableCellUtilityClass, classes);
};

const TableCellRoot = experimentalStyled(
'td',
{},
{
name: 'MuiTableCell',
slot: 'Root',
overridesResolver,
},
)(({ theme, styleProps }) => ({
/* Styles applied to the root element. */
root: {
...theme.typography.body2,
display: 'table-cell',
verticalAlign: 'inherit',
// Workaround for a rendering bug with spanned columns in Chrome 62.0.
// Removes the alpha (sets it to 1), and lightens or darkens the theme color.
borderBottom: `1px solid
...theme.typography.body2,
display: 'table-cell',
verticalAlign: 'inherit',
// Workaround for a rendering bug with spanned columns in Chrome 62.0.
// Removes the alpha (sets it to 1), and lightens or darkens the theme color.
borderBottom: `1px solid
${
theme.palette.mode === 'light'
? lighten(alpha(theme.palette.divider, 1), 0.88)
: darken(alpha(theme.palette.divider, 1), 0.68)
}`,
textAlign: 'left',
padding: 16,
},
textAlign: 'left',
padding: 16,
/* Styles applied to the root element if `variant="head"` or `context.table.head`. */
head: {
...(styleProps.variant === 'head' && {
color: theme.palette.text.primary,
lineHeight: theme.typography.pxToRem(24),
fontWeight: theme.typography.fontWeightMedium,
},
}),
/* Styles applied to the root element if `variant="body"` or `context.table.body`. */
body: {

...(styleProps.variant === 'body' && {
color: theme.palette.text.primary,
},
}),
/* Styles applied to the root element if `variant="footer"` or `context.table.footer`. */
footer: {
...(styleProps.variant === 'footer' && {
color: theme.palette.text.secondary,
lineHeight: theme.typography.pxToRem(21),
fontSize: theme.typography.pxToRem(12),
},
}),
/* Styles applied to the root element if `size="small"`. */
sizeSmall: {
...(styleProps.size === 'small' && {
padding: '6px 16px',
'&$paddingCheckbox': {
[`&.${tableCellClasses.paddingCheckbox}`]: {
width: 24, // prevent the checkbox column from growing
padding: '0 12px 0 16px',
'& > *': {
padding: 0,
},
},
},
}),
/* Styles applied to the root element if `padding="checkbox"`. */
paddingCheckbox: {
...(styleProps.padding === 'checkbox' && {
width: 48, // prevent the checkbox column from growing
padding: '0 0 0 4px',
},
}),
/* Styles applied to the root element if `padding="none"`. */
paddingNone: {
...(styleProps.padding === 'none' && {
padding: 0,
},
}),
/* Styles applied to the root element if `align="left"`. */
alignLeft: {
...(styleProps.align === 'left' && {
textAlign: 'left',
},
}),
/* Styles applied to the root element if `align="center"`. */
alignCenter: {
...(styleProps.align === 'center' && {
textAlign: 'center',
},
}),
/* Styles applied to the root element if `align="right"`. */
alignRight: {
...(styleProps.align === 'right' && {
textAlign: 'right',
flexDirection: 'row-reverse',
},
}),
/* Styles applied to the root element if `align="justify"`. */
alignJustify: {
...(styleProps.align === 'justify' && {
textAlign: 'justify',
},
}),
/* Styles applied to the root element if `context.table.stickyHeader={true}`. */
stickyHeader: {
...(styleProps.stickyHeader && {
position: 'sticky',
top: 0,
left: 0,
zIndex: 2,
backgroundColor: theme.palette.background.default,
},
});
}),
}));

/**
* The component renders a `<th>` element when the parent context is a header
* or otherwise a `<td>` element.
*/
const TableCell = React.forwardRef(function TableCell(props, ref) {
const TableCell = React.forwardRef(function TableCell(inProps, ref) {
const props = useThemeProps({ props: inProps, name: 'MuiTableCell' });
const {
align = 'inherit',
classes,
className,
component,
component: componentProp,
padding: paddingProp,
scope: scopeProp,
size: sizeProp,
Expand All @@ -110,12 +158,12 @@ const TableCell = React.forwardRef(function TableCell(props, ref) {

const isHeadCell = tablelvl2 && tablelvl2.variant === 'head';
let role;
let Component;
if (component) {
Component = component;
let component;
if (componentProp) {
component = componentProp;
role = isHeadCell ? 'columnheader' : 'cell';
} else {
Component = isHeadCell ? 'th' : 'td';
component = isHeadCell ? 'th' : 'td';
}

let scope = scopeProp;
Expand All @@ -126,28 +174,33 @@ const TableCell = React.forwardRef(function TableCell(props, ref) {
const size = sizeProp || (table && table.size ? table.size : 'medium');
const variant = variantProp || (tablelvl2 && tablelvl2.variant);

const styleProps = {
...props,
align,
component,
padding,
size,
sortDirection,
stickyHeader: variant === 'head' && table && table.stickyHeader,
variant,
};

const classes = useUtilityClasses(styleProps);

let ariaSort = null;
if (sortDirection) {
ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
}

return (
<Component
<TableCellRoot
as={component}
ref={ref}
className={clsx(
classes.root,
classes[variant],
{
[classes.stickyHeader]: variant === 'head' && table && table.stickyHeader,
[classes[`align${capitalize(align)}`]]: align !== 'inherit',
[classes[`padding${capitalize(padding)}`]]: padding !== 'default',
[classes[`size${capitalize(size)}`]]: size !== 'medium',
},
className,
)}
className={clsx(classes.root, className)}
aria-sort={ariaSort}
role={role}
scope={scope}
styleProps={styleProps}
{...other}
/>
);
Expand Down Expand Up @@ -201,11 +254,15 @@ TableCell.propTypes = {
* Set aria-sort direction.
*/
sortDirection: PropTypes.oneOf(['asc', 'desc', false]),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: PropTypes.object,
/**
* Specify the cell type.
* The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components.
*/
variant: PropTypes.oneOf(['body', 'footer', 'head']),
};

export default withStyles(styles, { name: 'MuiTableCell' })(TableCell);
export default TableCell;
Loading

0 comments on commit f1eb70b

Please sign in to comment.