1 | "use strict";
|
2 |
|
3 | exports.__esModule = true;
|
4 | exports.default = void 0;
|
5 |
|
6 | var _classnames = _interopRequireDefault(require("classnames"));
|
7 |
|
8 | var _react = _interopRequireDefault(require("react"));
|
9 |
|
10 | var _FocusListContext = require("./FocusListContext");
|
11 |
|
12 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
13 |
|
14 | function MultiselectTag({
|
15 | className,
|
16 | children,
|
17 | style,
|
18 | label,
|
19 | disabled,
|
20 | readOnly,
|
21 | onRemove,
|
22 | clearTagIcon,
|
23 | dataItem
|
24 | }) {
|
25 | const [ref, focused, id] = (0, _FocusListContext.useListOption)(dataItem);
|
26 |
|
27 | const handleRemove = event => {
|
28 | if (!disabled) onRemove(dataItem, event);
|
29 | };
|
30 |
|
31 | return _react.default.createElement("div", {
|
32 | ref: ref,
|
33 | role: "option",
|
34 | id: id,
|
35 | "data-rw-option": "",
|
36 | "data-rw-focusable": disabled ? undefined : '',
|
37 | "data-rw-focused": focused ? '' : undefined,
|
38 | className: (0, _classnames.default)(className, 'rw-multiselect-tag', disabled && 'rw-state-disabled', focused && !disabled && 'rw-state-focus'),
|
39 | style: style
|
40 | }, _react.default.createElement("span", {
|
41 | className: "rw-multiselect-tag-label"
|
42 | }, children), _react.default.createElement("button", {
|
43 | type: "button"
|
44 | ,
|
45 | tabIndex: -1,
|
46 | onClick: handleRemove,
|
47 | onTouchEnd: handleRemove,
|
48 | disabled: disabled || readOnly,
|
49 | className: "rw-multiselect-tag-btn",
|
50 | "aria-label": label || 'Remove item'
|
51 | }, clearTagIcon));
|
52 | }
|
53 |
|
54 | var _default = MultiselectTag;
|
55 | exports.default = _default; |
\ | No newline at end of file |