1 | import cn from 'classnames';
|
2 | import React from 'react';
|
3 | import { useListOption } from './FocusListContext';
|
4 |
|
5 | function MultiselectTag({
|
6 | className,
|
7 | children,
|
8 | style,
|
9 | label,
|
10 | disabled,
|
11 | readOnly,
|
12 | onRemove,
|
13 | clearTagIcon,
|
14 | dataItem
|
15 | }) {
|
16 | const [ref, focused, id] = useListOption(dataItem);
|
17 |
|
18 | const handleRemove = event => {
|
19 | if (!disabled) onRemove(dataItem, event);
|
20 | };
|
21 |
|
22 | return React.createElement("div", {
|
23 | ref: ref,
|
24 | role: "option",
|
25 | id: id,
|
26 | "data-rw-option": "",
|
27 | "data-rw-focusable": disabled ? undefined : '',
|
28 | "data-rw-focused": focused ? '' : undefined,
|
29 | className: cn(className, 'rw-multiselect-tag', disabled && 'rw-state-disabled', focused && !disabled && 'rw-state-focus'),
|
30 | style: style
|
31 | }, React.createElement("span", {
|
32 | className: "rw-multiselect-tag-label"
|
33 | }, children), React.createElement("button", {
|
34 | type: "button"
|
35 | ,
|
36 | tabIndex: -1,
|
37 | onClick: handleRemove,
|
38 | onTouchEnd: handleRemove,
|
39 | disabled: disabled || readOnly,
|
40 | className: "rw-multiselect-tag-btn",
|
41 | "aria-label": label || 'Remove item'
|
42 | }, clearTagIcon));
|
43 | }
|
44 |
|
45 | export default MultiselectTag; |
\ | No newline at end of file |