148 lines
4.2 KiB
JavaScript
148 lines
4.2 KiB
JavaScript
import _extends from 'babel-runtime/helpers/extends';
|
|
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
|
|
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
|
|
} = props,
|
|
other = _objectWithoutProperties(props, ['children', 'classes', 'className', 'component', 'sortDirection', 'numeric', 'padding', 'scope', 'variant']);
|
|
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 React.createElement(
|
|
Component,
|
|
_extends({ className: className, 'aria-sort': ariaSort, scope: scope }, other),
|
|
children
|
|
);
|
|
}
|
|
|
|
TableCell.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
/**
|
|
* 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); |