@material-ui/core
Version:
React components that implement Google's Material Design.
528 lines (446 loc) • 17.3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.styles = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _clsx = _interopRequireDefault(require("clsx"));
var _Cancel = _interopRequireDefault(require("../internal/svg-icons/Cancel"));
var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
var _colorManipulator = require("../styles/colorManipulator");
var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
var _unsupportedProp = _interopRequireDefault(require("../utils/unsupportedProp"));
var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
var styles = function styles(theme) {
var backgroundColor = theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[700];
var deleteIconColor = (0, _colorManipulator.fade)(theme.palette.text.primary, 0.26);
return {
/* Styles applied to the root element. */
root: {
fontFamily: theme.typography.fontFamily,
fontSize: theme.typography.pxToRem(13),
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
height: 32,
color: theme.palette.getContrastText(backgroundColor),
backgroundColor: backgroundColor,
borderRadius: 32 / 2,
whiteSpace: 'nowrap',
transition: theme.transitions.create(['background-color', 'box-shadow']),
// label will inherit this from root, then `clickable` class overrides this for both
cursor: 'default',
// We disable the focus ring for mouse, touch and keyboard users.
outline: 0,
textDecoration: 'none',
border: 'none',
// Remove `button` border
padding: 0,
// Remove `button` padding
verticalAlign: 'middle',
boxSizing: 'border-box',
'&$disabled': {
opacity: 0.5,
pointerEvents: 'none'
},
'& $avatar': {
marginLeft: 5,
marginRight: -6,
width: 24,
height: 24,
color: theme.palette.type === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],
fontSize: theme.typography.pxToRem(12)
},
'& $avatarColorPrimary': {
color: theme.palette.primary.contrastText,
backgroundColor: theme.palette.primary.dark
},
'& $avatarColorSecondary': {
color: theme.palette.secondary.contrastText,
backgroundColor: theme.palette.secondary.dark
},
'& $avatarSmall': {
marginLeft: 4,
marginRight: -4,
width: 18,
height: 18,
fontSize: theme.typography.pxToRem(10)
}
},
/* Styles applied to the root element if `size="small"`. */
sizeSmall: {
height: 24
},
/* Styles applied to the root element if `color="primary"`. */
colorPrimary: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText
},
/* Styles applied to the root element if `color="secondary"`. */
colorSecondary: {
backgroundColor: theme.palette.secondary.main,
color: theme.palette.secondary.contrastText
},
/* Pseudo-class applied to the root element if `disabled={true}`. */
disabled: {},
/* Styles applied to the root element if `onClick` is defined or `clickable={true}`. */
clickable: {
userSelect: 'none',
WebkitTapHighlightColor: 'transparent',
// Remove grey highlight
cursor: 'pointer',
'&:hover, &:focus': {
backgroundColor: (0, _colorManipulator.emphasize)(backgroundColor, 0.08)
},
'&:active': {
boxShadow: theme.shadows[1]
}
},
/* Styles applied to the root element if `onClick` and `color="primary"` is defined or `clickable={true}`. */
clickableColorPrimary: {
'&:hover, &:focus': {
backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.primary.main, 0.08)
}
},
/* Styles applied to the root element if `onClick` and `color="secondary"` is defined or `clickable={true}`. */
clickableColorSecondary: {
'&:hover, &:focus': {
backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.secondary.main, 0.08)
}
},
/* Styles applied to the root element if `onDelete` is defined. */
deletable: {
'&:focus': {
backgroundColor: (0, _colorManipulator.emphasize)(backgroundColor, 0.08)
}
},
/* Styles applied to the root element if `onDelete` and `color="primary"` is defined. */
deletableColorPrimary: {
'&:focus': {
backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.primary.main, 0.2)
}
},
/* Styles applied to the root element if `onDelete` and `color="secondary"` is defined. */
deletableColorSecondary: {
'&:focus': {
backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.secondary.main, 0.2)
}
},
/* Styles applied to the root element if `variant="outlined"`. */
outlined: {
backgroundColor: 'transparent',
border: "1px solid ".concat(theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'),
'$clickable&:hover, $clickable&:focus, $deletable&:focus': {
backgroundColor: (0, _colorManipulator.fade)(theme.palette.text.primary, theme.palette.action.hoverOpacity)
},
'& $avatar': {
marginLeft: 4
},
'& $avatarSmall': {
marginLeft: 2
},
'& $icon': {
marginLeft: 4
},
'& $iconSmall': {
marginLeft: 2
},
'& $deleteIcon': {
marginRight: 5
},
'& $deleteIconSmall': {
marginRight: 3
}
},
/* Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
outlinedPrimary: {
color: theme.palette.primary.main,
border: "1px solid ".concat(theme.palette.primary.main),
'$clickable&:hover, $clickable&:focus, $deletable&:focus': {
backgroundColor: (0, _colorManipulator.fade)(theme.palette.primary.main, theme.palette.action.hoverOpacity)
}
},
/* Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */
outlinedSecondary: {
color: theme.palette.secondary.main,
border: "1px solid ".concat(theme.palette.secondary.main),
'$clickable&:hover, $clickable&:focus, $deletable&:focus': {
backgroundColor: (0, _colorManipulator.fade)(theme.palette.secondary.main, theme.palette.action.hoverOpacity)
}
},
// TODO remove in V5
/* Styles applied to the `avatar` element. */
avatar: {},
/* Styles applied to the `avatar` element if `size="small"`. */
avatarSmall: {},
/* Styles applied to the `avatar` element if `color="primary"`. */
avatarColorPrimary: {},
/* Styles applied to the `avatar` element if `color="secondary"`. */
avatarColorSecondary: {},
/* Styles applied to the `icon` element. */
icon: {
color: theme.palette.type === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],
marginLeft: 5,
marginRight: -6
},
/* Styles applied to the `icon` element if `size="small"`. */
iconSmall: {
width: 18,
height: 18,
marginLeft: 4,
marginRight: -4
},
/* Styles applied to the `icon` element if `color="primary"`. */
iconColorPrimary: {
color: 'inherit'
},
/* Styles applied to the `icon` element if `color="secondary"`. */
iconColorSecondary: {
color: 'inherit'
},
/* Styles applied to the label `span` element`. */
label: {
display: 'flex',
alignItems: 'center',
paddingLeft: 12,
paddingRight: 12,
whiteSpace: 'nowrap'
},
labelSmall: {
paddingLeft: 8,
paddingRight: 8
},
/* Styles applied to the `deleteIcon` element. */
deleteIcon: {
// Remove grey highlight
WebkitTapHighlightColor: 'transparent',
color: deleteIconColor,
height: 22,
width: 22,
cursor: 'pointer',
margin: '0 5px 0 -6px',
'&:hover': {
color: (0, _colorManipulator.fade)(deleteIconColor, 0.4)
}
},
/* Styles applied to the `deleteIcon` element if `size="small"`. */
deleteIconSmall: {
height: 16,
width: 16,
marginRight: 4,
marginLeft: -4
},
/* Styles applied to the deleteIcon element if `color="primary"` and `variant="default"`. */
deleteIconColorPrimary: {
color: (0, _colorManipulator.fade)(theme.palette.primary.contrastText, 0.7),
'&:hover, &:active': {
color: theme.palette.primary.contrastText
}
},
/* Styles applied to the deleteIcon element if `color="secondary"` and `variant="default"`. */
deleteIconColorSecondary: {
color: (0, _colorManipulator.fade)(theme.palette.secondary.contrastText, 0.7),
'&:hover, &:active': {
color: theme.palette.secondary.contrastText
}
},
/* Styles applied to the deleteIcon element if `color="primary"` and `variant="outlined"`. */
deleteIconOutlinedColorPrimary: {
color: (0, _colorManipulator.fade)(theme.palette.primary.main, 0.7),
'&:hover, &:active': {
color: theme.palette.primary.main
}
},
/* Styles applied to the deleteIcon element if `color="secondary"` and `variant="outlined"`. */
deleteIconOutlinedColorSecondary: {
color: (0, _colorManipulator.fade)(theme.palette.secondary.main, 0.7),
'&:hover, &:active': {
color: theme.palette.secondary.main
}
}
};
};
/**
* Chips represent complex entities in small blocks, such as a contact.
*/
exports.styles = styles;
var Chip = _react.default.forwardRef(function Chip(props, ref) {
var avatarProp = props.avatar,
classes = props.classes,
className = props.className,
clickableProp = props.clickable,
_props$color = props.color,
color = _props$color === void 0 ? 'default' : _props$color,
ComponentProp = props.component,
deleteIconProp = props.deleteIcon,
_props$disabled = props.disabled,
disabled = _props$disabled === void 0 ? false : _props$disabled,
iconProp = props.icon,
label = props.label,
onClick = props.onClick,
onDelete = props.onDelete,
onKeyUp = props.onKeyUp,
_props$size = props.size,
size = _props$size === void 0 ? 'medium' : _props$size,
_props$variant = props.variant,
variant = _props$variant === void 0 ? 'default' : _props$variant,
other = (0, _objectWithoutProperties2.default)(props, ["avatar", "classes", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyUp", "size", "variant"]);
var chipRef = _react.default.useRef(null);
var handleRef = (0, _useForkRef.default)(chipRef, ref);
var handleDeleteIconClick = function handleDeleteIconClick(event) {
// Stop the event from bubbling up to the `Chip`
event.stopPropagation();
if (onDelete) {
onDelete(event);
}
};
var handleKeyUp = function handleKeyUp(event) {
if (onKeyUp) {
onKeyUp(event);
} // Ignore events from children of `Chip`.
if (event.currentTarget !== event.target) {
return;
}
var key = event.key;
if (onDelete && (key === 'Backspace' || key === 'Delete')) {
onDelete(event);
} else if (key === 'Escape' && chipRef.current) {
chipRef.current.blur();
}
};
var clickable = clickableProp !== false && onClick ? true : clickableProp;
var small = size === 'small';
var Component = ComponentProp || (clickable ? _ButtonBase.default : 'div');
var moreProps = Component === _ButtonBase.default ? {
component: 'div'
} : {};
var deleteIcon = null;
if (onDelete) {
var customClasses = (0, _clsx.default)(color !== 'default' && (variant === "default" ? classes["deleteIconColor".concat((0, _capitalize.default)(color))] : classes["deleteIconOutlinedColor".concat((0, _capitalize.default)(color))]), small && classes.deleteIconSmall);
deleteIcon = deleteIconProp && _react.default.isValidElement(deleteIconProp) ? _react.default.cloneElement(deleteIconProp, {
className: (0, _clsx.default)(deleteIconProp.props.className, classes.deleteIcon, customClasses),
onClick: handleDeleteIconClick
}) : _react.default.createElement(_Cancel.default, {
className: (0, _clsx.default)(classes.deleteIcon, customClasses),
onClick: handleDeleteIconClick
});
}
var avatar = null;
if (avatarProp && _react.default.isValidElement(avatarProp)) {
avatar = _react.default.cloneElement(avatarProp, {
className: (0, _clsx.default)(classes.avatar, avatarProp.props.className, small && classes.avatarSmall, color !== 'default' && classes["avatarColor".concat((0, _capitalize.default)(color))])
});
}
var icon = null;
if (iconProp && _react.default.isValidElement(iconProp)) {
icon = _react.default.cloneElement(iconProp, {
className: (0, _clsx.default)(classes.icon, iconProp.props.className, small && classes.iconSmall, color !== 'default' && classes["iconColor".concat((0, _capitalize.default)(color))])
});
}
if (process.env.NODE_ENV !== 'production') {
if (avatar && icon) {
console.error('Material-UI: the Chip component can not handle the avatar ' + 'and the icon prop at the same time. Pick one.');
}
}
return _react.default.createElement(Component, (0, _extends2.default)({
role: clickable || onDelete ? 'button' : undefined,
className: (0, _clsx.default)(classes.root, className, color !== 'default' && [classes["color".concat((0, _capitalize.default)(color))], clickable && classes["clickableColor".concat((0, _capitalize.default)(color))], onDelete && classes["deletableColor".concat((0, _capitalize.default)(color))]], variant !== "default" && [classes.outlined, {
primary: classes.outlinedPrimary,
secondary: classes.outlinedSecondary
}[color]], disabled && classes.disabled, small && classes.sizeSmall, clickable && classes.clickable, onDelete && classes.deletable),
"aria-disabled": disabled ? true : undefined,
tabIndex: clickable || onDelete ? 0 : undefined,
onClick: onClick,
onKeyUp: handleKeyUp,
ref: handleRef
}, moreProps, other), avatar || icon, _react.default.createElement("span", {
className: (0, _clsx.default)(classes.label, small && classes.labelSmall)
}, label), deleteIcon);
});
process.env.NODE_ENV !== "production" ? Chip.propTypes = {
/**
* Avatar element.
*/
avatar: _propTypes.default.element,
/**
* This prop isn't supported.
* Use the `component` prop if you need to change the children structure.
*/
children: _unsupportedProp.default,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: _propTypes.default.object.isRequired,
/**
* @ignore
*/
className: _propTypes.default.string,
/**
* If true, the chip will appear clickable, and will raise when pressed,
* even if the onClick prop is not defined.
* If false, the chip will not be clickable, even if onClick prop is defined.
* This can be used, for example,
* along with the component prop to indicate an anchor Chip is clickable.
*/
clickable: _propTypes.default.bool,
/**
* The color of the component. It supports those theme colors that make sense for this component.
*/
color: _propTypes.default.oneOf(['default', 'primary', 'secondary']),
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component: _propTypes.default.elementType,
/**
* Override the default delete icon element. Shown only if `onDelete` is set.
*/
deleteIcon: _propTypes.default.element,
/**
* If `true`, the chip should be displayed in a disabled state.
*/
disabled: _propTypes.default.bool,
/**
* Icon element.
*/
icon: _propTypes.default.element,
/**
* The content of the label.
*/
label: _propTypes.default.node,
/**
* @ignore
*/
onClick: _propTypes.default.func,
/**
* Callback function fired when the delete icon is clicked.
* If set, the delete icon will be shown.
*/
onDelete: _propTypes.default.func,
/**
* @ignore
*/
onKeyDown: _propTypes.default.func,
/**
* @ignore
*/
onKeyUp: _propTypes.default.func,
/**
* The size of the chip.
*/
size: _propTypes.default.oneOf(['small', 'medium']),
/**
* The variant to use.
*/
variant: _propTypes.default.oneOf(['default', 'outlined'])
} : void 0;
var _default = (0, _withStyles.default)(styles, {
name: 'MuiChip'
})(Chip);
exports.default = _default;