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