1 | "use strict";
|
2 |
|
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4 |
|
5 | Object.defineProperty(exports, "__esModule", {
|
6 | value: true
|
7 | });
|
8 | exports.default = exports.styles = void 0;
|
9 |
|
10 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
11 |
|
12 | var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
13 |
|
14 | var _react = _interopRequireDefault(require("react"));
|
15 |
|
16 | var _propTypes = _interopRequireDefault(require("prop-types"));
|
17 |
|
18 | var _clsx = _interopRequireDefault(require("clsx"));
|
19 |
|
20 | var _Cancel = _interopRequireDefault(require("../internal/svg-icons/Cancel"));
|
21 |
|
22 | var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
|
23 |
|
24 | var _colorManipulator = require("../styles/colorManipulator");
|
25 |
|
26 | var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
|
27 |
|
28 | var _unsupportedProp = _interopRequireDefault(require("../utils/unsupportedProp"));
|
29 |
|
30 | var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
|
31 |
|
32 | var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
|
33 |
|
34 | var styles = function styles(theme) {
|
35 | var backgroundColor = theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[700];
|
36 | var deleteIconColor = (0, _colorManipulator.fade)(theme.palette.text.primary, 0.26);
|
37 | return {
|
38 |
|
39 | root: {
|
40 | fontFamily: theme.typography.fontFamily,
|
41 | fontSize: theme.typography.pxToRem(13),
|
42 | display: 'inline-flex',
|
43 | alignItems: 'center',
|
44 | justifyContent: 'center',
|
45 | height: 32,
|
46 | color: theme.palette.getContrastText(backgroundColor),
|
47 | backgroundColor: backgroundColor,
|
48 | borderRadius: 32 / 2,
|
49 | whiteSpace: 'nowrap',
|
50 | transition: theme.transitions.create(['background-color', 'box-shadow']),
|
51 |
|
52 | cursor: 'default',
|
53 |
|
54 | outline: 0,
|
55 | textDecoration: 'none',
|
56 | border: 'none',
|
57 |
|
58 | padding: 0,
|
59 |
|
60 | verticalAlign: 'middle',
|
61 | boxSizing: 'border-box',
|
62 | '&$disabled': {
|
63 | opacity: 0.5,
|
64 | pointerEvents: 'none'
|
65 | },
|
66 | '& $avatar': {
|
67 | marginLeft: 5,
|
68 | marginRight: -6,
|
69 | width: 24,
|
70 | height: 24,
|
71 | color: theme.palette.type === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],
|
72 | fontSize: theme.typography.pxToRem(12)
|
73 | },
|
74 | '& $avatarColorPrimary': {
|
75 | color: theme.palette.primary.contrastText,
|
76 | backgroundColor: theme.palette.primary.dark
|
77 | },
|
78 | '& $avatarColorSecondary': {
|
79 | color: theme.palette.secondary.contrastText,
|
80 | backgroundColor: theme.palette.secondary.dark
|
81 | },
|
82 | '& $avatarSmall': {
|
83 | marginLeft: 4,
|
84 | marginRight: -4,
|
85 | width: 18,
|
86 | height: 18,
|
87 | fontSize: theme.typography.pxToRem(10)
|
88 | }
|
89 | },
|
90 |
|
91 |
|
92 | sizeSmall: {
|
93 | height: 24
|
94 | },
|
95 |
|
96 |
|
97 | colorPrimary: {
|
98 | backgroundColor: theme.palette.primary.main,
|
99 | color: theme.palette.primary.contrastText
|
100 | },
|
101 |
|
102 |
|
103 | colorSecondary: {
|
104 | backgroundColor: theme.palette.secondary.main,
|
105 | color: theme.palette.secondary.contrastText
|
106 | },
|
107 |
|
108 |
|
109 | disabled: {},
|
110 |
|
111 |
|
112 | clickable: {
|
113 | userSelect: 'none',
|
114 | WebkitTapHighlightColor: 'transparent',
|
115 | cursor: 'pointer',
|
116 | '&:hover, &:focus': {
|
117 | backgroundColor: (0, _colorManipulator.emphasize)(backgroundColor, 0.08)
|
118 | },
|
119 | '&:active': {
|
120 | boxShadow: theme.shadows[1]
|
121 | }
|
122 | },
|
123 |
|
124 |
|
125 | clickableColorPrimary: {
|
126 | '&:hover, &:focus': {
|
127 | backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.primary.main, 0.08)
|
128 | }
|
129 | },
|
130 |
|
131 |
|
132 | clickableColorSecondary: {
|
133 | '&:hover, &:focus': {
|
134 | backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.secondary.main, 0.08)
|
135 | }
|
136 | },
|
137 |
|
138 |
|
139 | deletable: {
|
140 | '&:focus': {
|
141 | backgroundColor: (0, _colorManipulator.emphasize)(backgroundColor, 0.08)
|
142 | }
|
143 | },
|
144 |
|
145 |
|
146 | deletableColorPrimary: {
|
147 | '&:focus': {
|
148 | backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.primary.main, 0.2)
|
149 | }
|
150 | },
|
151 |
|
152 |
|
153 | deletableColorSecondary: {
|
154 | '&:focus': {
|
155 | backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.secondary.main, 0.2)
|
156 | }
|
157 | },
|
158 |
|
159 |
|
160 | outlined: {
|
161 | backgroundColor: 'transparent',
|
162 | border: "1px solid ".concat(theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'),
|
163 | '$clickable&:hover, $clickable&:focus, $deletable&:focus': {
|
164 | backgroundColor: (0, _colorManipulator.fade)(theme.palette.text.primary, theme.palette.action.hoverOpacity)
|
165 | },
|
166 | '& $avatar': {
|
167 | marginLeft: 4
|
168 | },
|
169 | '& $avatarSmall': {
|
170 | marginLeft: 2
|
171 | },
|
172 | '& $icon': {
|
173 | marginLeft: 4
|
174 | },
|
175 | '& $iconSmall': {
|
176 | marginLeft: 2
|
177 | },
|
178 | '& $deleteIcon': {
|
179 | marginRight: 5
|
180 | },
|
181 | '& $deleteIconSmall': {
|
182 | marginRight: 3
|
183 | }
|
184 | },
|
185 |
|
186 |
|
187 | outlinedPrimary: {
|
188 | color: theme.palette.primary.main,
|
189 | border: "1px solid ".concat(theme.palette.primary.main),
|
190 | '$clickable&:hover, $clickable&:focus, $deletable&:focus': {
|
191 | backgroundColor: (0, _colorManipulator.fade)(theme.palette.primary.main, theme.palette.action.hoverOpacity)
|
192 | }
|
193 | },
|
194 |
|
195 |
|
196 | outlinedSecondary: {
|
197 | color: theme.palette.secondary.main,
|
198 | border: "1px solid ".concat(theme.palette.secondary.main),
|
199 | '$clickable&:hover, $clickable&:focus, $deletable&:focus': {
|
200 | backgroundColor: (0, _colorManipulator.fade)(theme.palette.secondary.main, theme.palette.action.hoverOpacity)
|
201 | }
|
202 | },
|
203 |
|
204 |
|
205 |
|
206 | avatar: {},
|
207 |
|
208 |
|
209 | avatarSmall: {},
|
210 |
|
211 |
|
212 | avatarColorPrimary: {},
|
213 |
|
214 |
|
215 | avatarColorSecondary: {},
|
216 |
|
217 |
|
218 | icon: {
|
219 | color: theme.palette.type === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],
|
220 | marginLeft: 5,
|
221 | marginRight: -6
|
222 | },
|
223 |
|
224 |
|
225 | iconSmall: {
|
226 | width: 18,
|
227 | height: 18,
|
228 | marginLeft: 4,
|
229 | marginRight: -4
|
230 | },
|
231 |
|
232 |
|
233 | iconColorPrimary: {
|
234 | color: 'inherit'
|
235 | },
|
236 |
|
237 |
|
238 | iconColorSecondary: {
|
239 | color: 'inherit'
|
240 | },
|
241 |
|
242 |
|
243 | label: {
|
244 | overflow: 'hidden',
|
245 | textOverflow: 'ellipsis',
|
246 | paddingLeft: 12,
|
247 | paddingRight: 12,
|
248 | whiteSpace: 'nowrap'
|
249 | },
|
250 | labelSmall: {
|
251 | paddingLeft: 8,
|
252 | paddingRight: 8
|
253 | },
|
254 |
|
255 |
|
256 | deleteIcon: {
|
257 | WebkitTapHighlightColor: 'transparent',
|
258 | color: deleteIconColor,
|
259 | height: 22,
|
260 | width: 22,
|
261 | cursor: 'pointer',
|
262 | margin: '0 5px 0 -6px',
|
263 | '&:hover': {
|
264 | color: (0, _colorManipulator.fade)(deleteIconColor, 0.4)
|
265 | }
|
266 | },
|
267 |
|
268 |
|
269 | deleteIconSmall: {
|
270 | height: 16,
|
271 | width: 16,
|
272 | marginRight: 4,
|
273 | marginLeft: -4
|
274 | },
|
275 |
|
276 |
|
277 | deleteIconColorPrimary: {
|
278 | color: (0, _colorManipulator.fade)(theme.palette.primary.contrastText, 0.7),
|
279 | '&:hover, &:active': {
|
280 | color: theme.palette.primary.contrastText
|
281 | }
|
282 | },
|
283 |
|
284 |
|
285 | deleteIconColorSecondary: {
|
286 | color: (0, _colorManipulator.fade)(theme.palette.secondary.contrastText, 0.7),
|
287 | '&:hover, &:active': {
|
288 | color: theme.palette.secondary.contrastText
|
289 | }
|
290 | },
|
291 |
|
292 |
|
293 | deleteIconOutlinedColorPrimary: {
|
294 | color: (0, _colorManipulator.fade)(theme.palette.primary.main, 0.7),
|
295 | '&:hover, &:active': {
|
296 | color: theme.palette.primary.main
|
297 | }
|
298 | },
|
299 |
|
300 |
|
301 | deleteIconOutlinedColorSecondary: {
|
302 | color: (0, _colorManipulator.fade)(theme.palette.secondary.main, 0.7),
|
303 | '&:hover, &:active': {
|
304 | color: theme.palette.secondary.main
|
305 | }
|
306 | }
|
307 | };
|
308 | };
|
309 |
|
310 |
|
311 |
|
312 |
|
313 |
|
314 | exports.styles = styles;
|
315 |
|
316 | var Chip = _react.default.forwardRef(function Chip(props, ref) {
|
317 | var avatarProp = props.avatar,
|
318 | classes = props.classes,
|
319 | className = props.className,
|
320 | clickableProp = props.clickable,
|
321 | _props$color = props.color,
|
322 | color = _props$color === void 0 ? 'default' : _props$color,
|
323 | ComponentProp = props.component,
|
324 | deleteIconProp = props.deleteIcon,
|
325 | _props$disabled = props.disabled,
|
326 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
327 | iconProp = props.icon,
|
328 | label = props.label,
|
329 | onClick = props.onClick,
|
330 | onDelete = props.onDelete,
|
331 | onKeyUp = props.onKeyUp,
|
332 | _props$size = props.size,
|
333 | size = _props$size === void 0 ? 'medium' : _props$size,
|
334 | _props$variant = props.variant,
|
335 | variant = _props$variant === void 0 ? 'default' : _props$variant,
|
336 | other = (0, _objectWithoutProperties2.default)(props, ["avatar", "classes", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyUp", "size", "variant"]);
|
337 |
|
338 | var chipRef = _react.default.useRef(null);
|
339 |
|
340 | var handleRef = (0, _useForkRef.default)(chipRef, ref);
|
341 |
|
342 | var handleDeleteIconClick = function handleDeleteIconClick(event) {
|
343 |
|
344 | event.stopPropagation();
|
345 |
|
346 | if (onDelete) {
|
347 | onDelete(event);
|
348 | }
|
349 | };
|
350 |
|
351 | var handleKeyUp = function handleKeyUp(event) {
|
352 | if (onKeyUp) {
|
353 | onKeyUp(event);
|
354 | }
|
355 |
|
356 |
|
357 | if (event.currentTarget !== event.target) {
|
358 | return;
|
359 | }
|
360 |
|
361 | var key = event.key;
|
362 |
|
363 | if (onDelete && (key === 'Backspace' || key === 'Delete')) {
|
364 | onDelete(event);
|
365 | } else if (key === 'Escape' && chipRef.current) {
|
366 | chipRef.current.blur();
|
367 | }
|
368 | };
|
369 |
|
370 | var clickable = clickableProp !== false && onClick ? true : clickableProp;
|
371 | var small = size === 'small';
|
372 | var Component = ComponentProp || (clickable ? _ButtonBase.default : 'div');
|
373 | var moreProps = Component === _ButtonBase.default ? {
|
374 | component: 'div'
|
375 | } : {};
|
376 | var deleteIcon = null;
|
377 |
|
378 | if (onDelete) {
|
379 | 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);
|
380 | deleteIcon = deleteIconProp && _react.default.isValidElement(deleteIconProp) ? _react.default.cloneElement(deleteIconProp, {
|
381 | className: (0, _clsx.default)(deleteIconProp.props.className, classes.deleteIcon, customClasses),
|
382 | onClick: handleDeleteIconClick
|
383 | }) : _react.default.createElement(_Cancel.default, {
|
384 | className: (0, _clsx.default)(classes.deleteIcon, customClasses),
|
385 | onClick: handleDeleteIconClick
|
386 | });
|
387 | }
|
388 |
|
389 | var avatar = null;
|
390 |
|
391 | if (avatarProp && _react.default.isValidElement(avatarProp)) {
|
392 | avatar = _react.default.cloneElement(avatarProp, {
|
393 | className: (0, _clsx.default)(classes.avatar, avatarProp.props.className, small && classes.avatarSmall, color !== 'default' && classes["avatarColor".concat((0, _capitalize.default)(color))])
|
394 | });
|
395 | }
|
396 |
|
397 | var icon = null;
|
398 |
|
399 | if (iconProp && _react.default.isValidElement(iconProp)) {
|
400 | icon = _react.default.cloneElement(iconProp, {
|
401 | className: (0, _clsx.default)(classes.icon, iconProp.props.className, small && classes.iconSmall, color !== 'default' && classes["iconColor".concat((0, _capitalize.default)(color))])
|
402 | });
|
403 | }
|
404 |
|
405 | if (process.env.NODE_ENV !== 'production') {
|
406 | if (avatar && icon) {
|
407 | console.error('Material-UI: the Chip component can not handle the avatar ' + 'and the icon prop at the same time. Pick one.');
|
408 | }
|
409 | }
|
410 |
|
411 | return _react.default.createElement(Component, (0, _extends2.default)({
|
412 | role: clickable || onDelete ? 'button' : undefined,
|
413 | 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, {
|
414 | primary: classes.outlinedPrimary,
|
415 | secondary: classes.outlinedSecondary
|
416 | }[color]], disabled && classes.disabled, small && classes.sizeSmall, clickable && classes.clickable, onDelete && classes.deletable),
|
417 | "aria-disabled": disabled ? true : undefined,
|
418 | tabIndex: clickable || onDelete ? 0 : undefined,
|
419 | onClick: onClick,
|
420 | onKeyUp: handleKeyUp,
|
421 | ref: handleRef
|
422 | }, moreProps, other), avatar || icon, _react.default.createElement("span", {
|
423 | className: (0, _clsx.default)(classes.label, small && classes.labelSmall)
|
424 | }, label), deleteIcon);
|
425 | });
|
426 |
|
427 | process.env.NODE_ENV !== "production" ? Chip.propTypes = {
|
428 | |
429 |
|
430 |
|
431 | avatar: _propTypes.default.element,
|
432 |
|
433 | |
434 |
|
435 |
|
436 |
|
437 | children: _unsupportedProp.default,
|
438 |
|
439 | |
440 |
|
441 |
|
442 |
|
443 | classes: _propTypes.default.object.isRequired,
|
444 |
|
445 | |
446 |
|
447 |
|
448 | className: _propTypes.default.string,
|
449 |
|
450 | |
451 |
|
452 |
|
453 |
|
454 |
|
455 |
|
456 |
|
457 | clickable: _propTypes.default.bool,
|
458 |
|
459 | |
460 |
|
461 |
|
462 | color: _propTypes.default.oneOf(['default', 'primary', 'secondary']),
|
463 |
|
464 | |
465 |
|
466 |
|
467 |
|
468 | component: _propTypes.default.elementType,
|
469 |
|
470 | |
471 |
|
472 |
|
473 | deleteIcon: _propTypes.default.element,
|
474 |
|
475 | |
476 |
|
477 |
|
478 | disabled: _propTypes.default.bool,
|
479 |
|
480 | |
481 |
|
482 |
|
483 | icon: _propTypes.default.element,
|
484 |
|
485 | |
486 |
|
487 |
|
488 | label: _propTypes.default.node,
|
489 |
|
490 | |
491 |
|
492 |
|
493 | onClick: _propTypes.default.func,
|
494 |
|
495 | |
496 |
|
497 |
|
498 |
|
499 | onDelete: _propTypes.default.func,
|
500 |
|
501 | |
502 |
|
503 |
|
504 | onKeyDown: _propTypes.default.func,
|
505 |
|
506 | |
507 |
|
508 |
|
509 | onKeyUp: _propTypes.default.func,
|
510 |
|
511 | |
512 |
|
513 |
|
514 | size: _propTypes.default.oneOf(['small', 'medium']),
|
515 |
|
516 | |
517 |
|
518 |
|
519 | variant: _propTypes.default.oneOf(['default', 'outlined'])
|
520 | } : void 0;
|
521 |
|
522 | var _default = (0, _withStyles.default)(styles, {
|
523 | name: 'MuiChip'
|
524 | })(Chip);
|
525 |
|
526 | exports.default = _default; |
\ | No newline at end of file |