156 lines
4.0 KiB
Plaintext
156 lines
4.0 KiB
Plaintext
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classNames from 'classnames';
|
|
import withStyles from '../styles/withStyles';
|
|
import { capitalize } from '../utils/helpers';
|
|
import { darken, fade, lighten } from '../styles/colorManipulator';
|
|
|
|
export const styles = theme => ({
|
|
root: {
|
|
// 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.type === 'light'
|
|
? lighten(fade(theme.palette.divider, 1), 0.88)
|
|
: darken(fade(theme.palette.divider, 1), 0.8)
|
|
}`,
|
|
textAlign: 'left',
|
|
},
|
|
numeric: {
|
|
textAlign: 'right',
|
|
flexDirection: 'row-reverse', // can be dynamically inherited at runtime by contents
|
|
},
|
|
typeHead: {
|
|
color: theme.palette.text.secondary,
|
|
fontSize: theme.typography.pxToRem(12),
|
|
fontWeight: theme.typography.fontWeightMedium,
|
|
position: 'relative', // Workaround for Tooltip positioning issue.
|
|
},
|
|
typeBody: {
|
|
fontSize: theme.typography.pxToRem(13),
|
|
color: theme.palette.text.primary,
|
|
},
|
|
typeFooter: {
|
|
borderBottom: 0,
|
|
color: theme.palette.text.secondary,
|
|
fontSize: theme.typography.pxToRem(12),
|
|
},
|
|
paddingDefault: {
|
|
padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit * 7}px ${theme.spacing.unit /
|
|
2}px ${theme.spacing.unit * 3}px`,
|
|
'&:last-child': {
|
|
paddingRight: theme.spacing.unit * 3,
|
|
},
|
|
},
|
|
paddingDense: {
|
|
paddingRight: theme.spacing.unit * 3,
|
|
},
|
|
paddingCheckbox: {
|
|
padding: '0 12px',
|
|
},
|
|
});
|
|
|
|
function TableCell(props, context) {
|
|
const {
|
|
children,
|
|
classes,
|
|
className: classNameProp,
|
|
component,
|
|
sortDirection,
|
|
numeric,
|
|
padding,
|
|
scope: scopeProp,
|
|
variant,
|
|
...other
|
|
} = props;
|
|
const { table } = context;
|
|
let Component;
|
|
if (component) {
|
|
Component = component;
|
|
} else {
|
|
Component = table && table.head ? 'th' : 'td';
|
|
}
|
|
|
|
let scope = scopeProp;
|
|
if (!scope && table && table.head) {
|
|
scope = 'col';
|
|
}
|
|
|
|
const className = classNames(
|
|
classes.root,
|
|
{
|
|
[classes.numeric]: numeric,
|
|
[classes[`padding${capitalize(padding)}`]]: padding !== 'none' && padding !== 'default',
|
|
[classes.paddingDefault]: padding !== 'none',
|
|
[classes.typeHead]: variant ? variant === 'head' : table && table.head,
|
|
[classes.typeBody]: variant ? variant === 'body' : table && table.body,
|
|
[classes.typeFooter]: variant ? variant === 'footer' : table && table.footer,
|
|
},
|
|
classNameProp,
|
|
);
|
|
|
|
let ariaSort = null;
|
|
if (sortDirection) {
|
|
ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
|
|
}
|
|
|
|
return (
|
|
<Component className={className} aria-sort={ariaSort} scope={scope} {...other}>
|
|
{children}
|
|
</Component>
|
|
);
|
|
}
|
|
|
|
TableCell.propTypes = {
|
|
/**
|
|
* The table cell contents.
|
|
*/
|
|
children: PropTypes.node,
|
|
/**
|
|
* Useful to extend the style applied to components.
|
|
*/
|
|
classes: PropTypes.object.isRequired,
|
|
/**
|
|
* @ignore
|
|
*/
|
|
className: PropTypes.string,
|
|
/**
|
|
* The component used for the root node.
|
|
* Either a string to use a DOM element or a component.
|
|
*/
|
|
component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
|
|
/**
|
|
* If `true`, content will align to the right.
|
|
*/
|
|
numeric: PropTypes.bool,
|
|
/**
|
|
* Sets the padding applied to the cell.
|
|
*/
|
|
padding: PropTypes.oneOf(['default', 'checkbox', 'dense', 'none']),
|
|
/**
|
|
* Set scope attribute.
|
|
*/
|
|
scope: PropTypes.string,
|
|
/**
|
|
* Set aria-sort direction.
|
|
*/
|
|
sortDirection: PropTypes.oneOf(['asc', 'desc', false]),
|
|
/**
|
|
* Specify the cell type.
|
|
* By default, the TableHead, TableBody or TableFooter parent component set the value.
|
|
*/
|
|
variant: PropTypes.oneOf(['head', 'body', 'footer']),
|
|
};
|
|
|
|
TableCell.defaultProps = {
|
|
numeric: false,
|
|
padding: 'default',
|
|
};
|
|
|
|
TableCell.contextTypes = {
|
|
table: PropTypes.object.isRequired,
|
|
};
|
|
|
|
export default withStyles(styles, { name: 'MuiTableCell' })(TableCell);
|