@clayui/label 3.88.0 → 3.105.1-alpha.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.d.ts +0 -0
- package/lib/index.js.map +1 -0
- package/package.json +5 -6
- package/src/__tests__/__snapshots__/index.tsx.snap +0 -133
- package/src/__tests__/index.tsx +0 -111
- package/src/index.tsx +0 -200
package/lib/index.d.ts
CHANGED
|
File without changes
|
package/lib/index.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["_icon","_interopRequireDefault","require","_link","_classnames","_react","_excluded","_excluded2","_excluded3","_excluded4","_excluded5","obj","__esModule","default","_defineProperty","key","value","_toPropertyKey","Object","defineProperty","enumerable","configurable","writable","arg","_toPrimitive","_typeof","String","input","hint","prim","Symbol","toPrimitive","undefined","res","call","TypeError","Number","_extends","assign","bind","target","i","arguments","length","source","prototype","hasOwnProperty","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","ClayLabelItemAfter","React","forwardRef","_ref","ref","children","className","otherProps","createElement","classNames","displayName","ClayLabelItemBefore","_ref2","ClayLabelItemExpand","_ref3","href","TagName","ClayLink","ClayLabel","_ref4","dismissible","_ref4$displayType","displayType","_ref4$large","large","concat","ClayLabelHybrid","_ref5","closeButtonProps","_ref5$innerElementPro","innerElementProps","_ref5$withClose","withClose","spritemap","Fragment","type","symbol","_default","ItemAfter","ItemBefore","ItemExpand","exports"],"sources":["../src/index.tsx"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport ClayIcon from '@clayui/icon';\nimport ClayLink from '@clayui/link';\nimport classNames from 'classnames';\nimport React from 'react';\n\nconst ClayLabelItemAfter = React.forwardRef<\n\tHTMLSpanElement,\n\tReact.HTMLAttributes<HTMLSpanElement>\n>(({children, className, ...otherProps}, ref) => (\n\t<span\n\t\t{...otherProps}\n\t\tclassName={classNames(className, 'label-item label-item-after')}\n\t\tref={ref}\n\t>\n\t\t{children}\n\t</span>\n));\n\nClayLabelItemAfter.displayName = 'ClayLabelItemAfter';\n\nconst ClayLabelItemBefore = React.forwardRef<\n\tHTMLSpanElement,\n\tReact.HTMLAttributes<HTMLSpanElement>\n>(({children, className, ...otherProps}, ref) => (\n\t<span\n\t\t{...otherProps}\n\t\tclassName={classNames(className, 'label-item label-item-before')}\n\t\tref={ref}\n\t>\n\t\t{children}\n\t</span>\n));\n\nClayLabelItemBefore.displayName = 'ClayLabelItemBefore';\n\nconst ClayLabelItemExpand = React.forwardRef<\n\tHTMLAnchorElement | HTMLSpanElement,\n\tReact.BaseHTMLAttributes<HTMLAnchorElement | HTMLSpanElement>\n>(({children, className, href, ...otherProps}, ref) => {\n\tconst TagName = href ? ClayLink : 'span';\n\n\treturn (\n\t\t<TagName\n\t\t\t{...otherProps}\n\t\t\tclassName={classNames(className, 'label-item label-item-expand')}\n\t\t\thref={href}\n\t\t\tref={ref as React.ComponentProps<typeof ClayLink>['ref']}\n\t\t>\n\t\t\t{children}\n\t\t</TagName>\n\t);\n});\n\nClayLabelItemExpand.displayName = 'ClayLabelItemExpand';\n\ntype DisplayType =\n\t| 'secondary'\n\t| 'info'\n\t| 'warning'\n\t| 'danger'\n\t| 'success'\n\t| 'unstyled';\n\ninterface IBaseProps extends React.BaseHTMLAttributes<HTMLSpanElement> {\n\t/**\n\t * Flag to indicate if `label-dismissible` class should be applied.\n\t */\n\tdismissible?: boolean;\n\n\t/**\n\t * Determines the style of the label.\n\t */\n\tdisplayType?: DisplayType;\n\n\t/**\n\t * Flag to indicate if the label should be of the `large` variant.\n\t */\n\tlarge?: boolean;\n}\n\nconst ClayLabel = React.forwardRef<HTMLSpanElement, IBaseProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdismissible,\n\t\t\tdisplayType = 'secondary',\n\t\t\tlarge = false,\n\t\t\t...otherProps\n\t\t},\n\t\tref\n\t) => {\n\t\treturn (\n\t\t\t<span\n\t\t\t\t{...otherProps}\n\t\t\t\tclassName={classNames('label', className, {\n\t\t\t\t\t'label-dismissible': dismissible,\n\t\t\t\t\t'label-lg': large,\n\t\t\t\t\t[`label-${displayType}`]: displayType,\n\t\t\t\t})}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</span>\n\t\t);\n\t}\n);\n\nClayLabel.displayName = 'ClayLabel';\n\ninterface IProps extends IBaseProps {\n\t/**\n\t * HTML properties that are applied to the 'x' button.\n\t */\n\tcloseButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement> & {\n\t\tref?: (instance: HTMLButtonElement | null) => void;\n\t};\n\n\t/**\n\t * Pros to add to the inner label item\n\t */\n\tinnerElementProps?: React.ComponentProps<typeof ClayLabelItemExpand>;\n\n\t/**\n\t * Path to the location of the spritemap resource used for Icon.\n\t */\n\tspritemap?: string;\n\n\t/**\n\t * Flag to indicate if component should include the close button\n\t */\n\twithClose?: boolean;\n}\n\nconst ClayLabelHybrid = React.forwardRef<\n\tHTMLAnchorElement | HTMLSpanElement,\n\tIProps\n>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tcloseButtonProps,\n\t\t\thref,\n\t\t\tinnerElementProps = {},\n\t\t\twithClose = true,\n\t\t\tspritemap,\n\t\t\t...otherProps\n\t\t}: IProps,\n\t\tref\n\t) => {\n\t\treturn (\n\t\t\t<ClayLabel\n\t\t\t\tdismissible={withClose && !!closeButtonProps}\n\t\t\t\t{...otherProps}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t{!withClose && children}\n\n\t\t\t\t{withClose && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<ClayLabelItemExpand {...innerElementProps} href={href}>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</ClayLabelItemExpand>\n\n\t\t\t\t\t\t{closeButtonProps && (\n\t\t\t\t\t\t\t<ClayLabelItemAfter>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t{...closeButtonProps}\n\t\t\t\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\t\t\t\tcloseButtonProps.className,\n\t\t\t\t\t\t\t\t\t\t'close'\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ClayIcon\n\t\t\t\t\t\t\t\t\t\tspritemap={spritemap}\n\t\t\t\t\t\t\t\t\t\tsymbol=\"times-small\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</ClayLabelItemAfter>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</ClayLabel>\n\t\t);\n\t}\n);\n\nClayLabelHybrid.displayName = 'ClayLabel';\n\nexport default Object.assign(ClayLabelHybrid, {\n\tItemAfter: ClayLabelItemAfter,\n\tItemBefore: ClayLabelItemBefore,\n\tItemExpand: ClayLabelItemExpand,\n});\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@clayui/label",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.105.1-alpha.9+1fe334d52",
|
|
4
4
|
"description": "ClayLabel component",
|
|
5
5
|
"license": "BSD-3-Clause",
|
|
6
6
|
"repository": "https://github.com/liferay/clay",
|
|
@@ -12,8 +12,7 @@
|
|
|
12
12
|
"types": "lib/index.d.ts",
|
|
13
13
|
"ts:main": "src/index.tsx",
|
|
14
14
|
"files": [
|
|
15
|
-
"lib"
|
|
16
|
-
"src"
|
|
15
|
+
"lib"
|
|
17
16
|
],
|
|
18
17
|
"scripts": {
|
|
19
18
|
"build": "babel src --root-mode upward --out-dir lib --extensions .ts,.tsx",
|
|
@@ -26,8 +25,8 @@
|
|
|
26
25
|
"react"
|
|
27
26
|
],
|
|
28
27
|
"dependencies": {
|
|
29
|
-
"@clayui/icon": "^3.
|
|
30
|
-
"@clayui/link": "^3.
|
|
28
|
+
"@clayui/icon": "^3.105.1-alpha.9+1fe334d52",
|
|
29
|
+
"@clayui/link": "^3.105.1-alpha.9+1fe334d52",
|
|
31
30
|
"classnames": "^2.2.6"
|
|
32
31
|
},
|
|
33
32
|
"peerDependencies": {
|
|
@@ -38,5 +37,5 @@
|
|
|
38
37
|
"browserslist": [
|
|
39
38
|
"extends browserslist-config-clay"
|
|
40
39
|
],
|
|
41
|
-
"gitHead": "
|
|
40
|
+
"gitHead": "1fe334d52932180cf2e938c1ce5e146528cbd465"
|
|
42
41
|
}
|
|
@@ -1,133 +0,0 @@
|
|
|
1
|
-
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
-
|
|
3
|
-
exports[`Rendering as a link 1`] = `
|
|
4
|
-
<span
|
|
5
|
-
className="label label-secondary"
|
|
6
|
-
>
|
|
7
|
-
<a
|
|
8
|
-
className="label-item label-item-expand"
|
|
9
|
-
href="#/foo/bar"
|
|
10
|
-
>
|
|
11
|
-
Label w/ link
|
|
12
|
-
</a>
|
|
13
|
-
</span>
|
|
14
|
-
`;
|
|
15
|
-
|
|
16
|
-
exports[`Rendering default 1`] = `
|
|
17
|
-
<span
|
|
18
|
-
className="label label-secondary"
|
|
19
|
-
>
|
|
20
|
-
<span
|
|
21
|
-
className="label-item label-item-expand"
|
|
22
|
-
>
|
|
23
|
-
Default Label
|
|
24
|
-
</span>
|
|
25
|
-
</span>
|
|
26
|
-
`;
|
|
27
|
-
|
|
28
|
-
exports[`Rendering renders as a link and closable 1`] = `
|
|
29
|
-
<span
|
|
30
|
-
className="label label-dismissible label-secondary"
|
|
31
|
-
>
|
|
32
|
-
<a
|
|
33
|
-
className="label-item label-item-expand"
|
|
34
|
-
href="#/foo/bar"
|
|
35
|
-
>
|
|
36
|
-
Label Closable
|
|
37
|
-
</a>
|
|
38
|
-
<span
|
|
39
|
-
className="label-item label-item-after"
|
|
40
|
-
>
|
|
41
|
-
<button
|
|
42
|
-
className="close"
|
|
43
|
-
onClick={[Function]}
|
|
44
|
-
type="button"
|
|
45
|
-
>
|
|
46
|
-
<svg
|
|
47
|
-
className="lexicon-icon lexicon-icon-times-small"
|
|
48
|
-
role="presentation"
|
|
49
|
-
>
|
|
50
|
-
<use
|
|
51
|
-
xlinkHref="path/to/spritemap#times-small"
|
|
52
|
-
/>
|
|
53
|
-
</svg>
|
|
54
|
-
</button>
|
|
55
|
-
</span>
|
|
56
|
-
</span>
|
|
57
|
-
`;
|
|
58
|
-
|
|
59
|
-
exports[`Rendering renders as closable 1`] = `
|
|
60
|
-
<span
|
|
61
|
-
className="label label-dismissible label-secondary"
|
|
62
|
-
>
|
|
63
|
-
<span
|
|
64
|
-
className="label-item label-item-expand"
|
|
65
|
-
>
|
|
66
|
-
Label Closable
|
|
67
|
-
</span>
|
|
68
|
-
<span
|
|
69
|
-
className="label-item label-item-after"
|
|
70
|
-
>
|
|
71
|
-
<button
|
|
72
|
-
className="close"
|
|
73
|
-
onClick={[Function]}
|
|
74
|
-
type="button"
|
|
75
|
-
>
|
|
76
|
-
<svg
|
|
77
|
-
className="lexicon-icon lexicon-icon-times-small"
|
|
78
|
-
role="presentation"
|
|
79
|
-
>
|
|
80
|
-
<use
|
|
81
|
-
xlinkHref="path/to/spritemap#times-small"
|
|
82
|
-
/>
|
|
83
|
-
</svg>
|
|
84
|
-
</button>
|
|
85
|
-
</span>
|
|
86
|
-
</span>
|
|
87
|
-
`;
|
|
88
|
-
|
|
89
|
-
exports[`Rendering renders with ItemAfter 1`] = `
|
|
90
|
-
<span
|
|
91
|
-
className="label label-secondary"
|
|
92
|
-
>
|
|
93
|
-
<span
|
|
94
|
-
className="label-item label-item-expand"
|
|
95
|
-
>
|
|
96
|
-
Label
|
|
97
|
-
</span>
|
|
98
|
-
<span
|
|
99
|
-
className="label-item label-item-after"
|
|
100
|
-
>
|
|
101
|
-
Content after
|
|
102
|
-
</span>
|
|
103
|
-
</span>
|
|
104
|
-
`;
|
|
105
|
-
|
|
106
|
-
exports[`Rendering renders with ItemBefore 1`] = `
|
|
107
|
-
<span
|
|
108
|
-
className="label label-secondary"
|
|
109
|
-
>
|
|
110
|
-
<span
|
|
111
|
-
className="label-item label-item-before"
|
|
112
|
-
>
|
|
113
|
-
Content before
|
|
114
|
-
</span>
|
|
115
|
-
<span
|
|
116
|
-
className="label-item label-item-expand"
|
|
117
|
-
>
|
|
118
|
-
Label
|
|
119
|
-
</span>
|
|
120
|
-
</span>
|
|
121
|
-
`;
|
|
122
|
-
|
|
123
|
-
exports[`Rendering with a different displayType 1`] = `
|
|
124
|
-
<span
|
|
125
|
-
className="label label-success"
|
|
126
|
-
>
|
|
127
|
-
<span
|
|
128
|
-
className="label-item label-item-expand"
|
|
129
|
-
>
|
|
130
|
-
Success Label
|
|
131
|
-
</span>
|
|
132
|
-
</span>
|
|
133
|
-
`;
|
package/src/__tests__/index.tsx
DELETED
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
|
|
3
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import ClayLabel from '..';
|
|
7
|
-
import {cleanup, fireEvent, render} from '@testing-library/react';
|
|
8
|
-
import React from 'react';
|
|
9
|
-
import TestRenderer from 'react-test-renderer';
|
|
10
|
-
|
|
11
|
-
const spritemap = 'path/to/spritemap';
|
|
12
|
-
|
|
13
|
-
describe('Rendering', () => {
|
|
14
|
-
it('default', () => {
|
|
15
|
-
const testRenderer = TestRenderer.create(
|
|
16
|
-
<ClayLabel>Default Label</ClayLabel>
|
|
17
|
-
);
|
|
18
|
-
|
|
19
|
-
expect(testRenderer.toJSON()).toMatchSnapshot();
|
|
20
|
-
});
|
|
21
|
-
|
|
22
|
-
it('with a different displayType ', () => {
|
|
23
|
-
const testRenderer = TestRenderer.create(
|
|
24
|
-
<ClayLabel displayType="success">Success Label</ClayLabel>
|
|
25
|
-
);
|
|
26
|
-
|
|
27
|
-
expect(testRenderer.toJSON()).toMatchSnapshot();
|
|
28
|
-
});
|
|
29
|
-
|
|
30
|
-
it('as a link ', () => {
|
|
31
|
-
const testRenderer = TestRenderer.create(
|
|
32
|
-
<ClayLabel href="#/foo/bar">Label w/ link</ClayLabel>
|
|
33
|
-
);
|
|
34
|
-
|
|
35
|
-
expect(testRenderer.toJSON()).toMatchSnapshot();
|
|
36
|
-
});
|
|
37
|
-
|
|
38
|
-
it('renders as closable', () => {
|
|
39
|
-
const testRenderer = TestRenderer.create(
|
|
40
|
-
<ClayLabel
|
|
41
|
-
closeButtonProps={{
|
|
42
|
-
onClick: () => {},
|
|
43
|
-
}}
|
|
44
|
-
spritemap={spritemap}
|
|
45
|
-
>
|
|
46
|
-
Label Closable
|
|
47
|
-
</ClayLabel>
|
|
48
|
-
);
|
|
49
|
-
|
|
50
|
-
expect(testRenderer.toJSON()).toMatchSnapshot();
|
|
51
|
-
});
|
|
52
|
-
|
|
53
|
-
it('renders as a link and closable', () => {
|
|
54
|
-
const testRenderer = TestRenderer.create(
|
|
55
|
-
<ClayLabel
|
|
56
|
-
closeButtonProps={{
|
|
57
|
-
onClick: () => {},
|
|
58
|
-
}}
|
|
59
|
-
href="#/foo/bar"
|
|
60
|
-
spritemap={spritemap}
|
|
61
|
-
>
|
|
62
|
-
Label Closable
|
|
63
|
-
</ClayLabel>
|
|
64
|
-
);
|
|
65
|
-
|
|
66
|
-
expect(testRenderer.toJSON()).toMatchSnapshot();
|
|
67
|
-
});
|
|
68
|
-
|
|
69
|
-
it('renders with ItemBefore', () => {
|
|
70
|
-
const testRenderer = TestRenderer.create(
|
|
71
|
-
<ClayLabel withClose={false}>
|
|
72
|
-
<ClayLabel.ItemBefore>Content before</ClayLabel.ItemBefore>
|
|
73
|
-
<ClayLabel.ItemExpand>Label</ClayLabel.ItemExpand>
|
|
74
|
-
</ClayLabel>
|
|
75
|
-
);
|
|
76
|
-
|
|
77
|
-
expect(testRenderer.toJSON()).toMatchSnapshot();
|
|
78
|
-
});
|
|
79
|
-
|
|
80
|
-
it('renders with ItemAfter', () => {
|
|
81
|
-
const testRenderer = TestRenderer.create(
|
|
82
|
-
<ClayLabel withClose={false}>
|
|
83
|
-
<ClayLabel.ItemExpand>Label</ClayLabel.ItemExpand>
|
|
84
|
-
<ClayLabel.ItemAfter>Content after</ClayLabel.ItemAfter>
|
|
85
|
-
</ClayLabel>
|
|
86
|
-
);
|
|
87
|
-
|
|
88
|
-
expect(testRenderer.toJSON()).toMatchSnapshot();
|
|
89
|
-
});
|
|
90
|
-
});
|
|
91
|
-
|
|
92
|
-
describe('Interactions', () => {
|
|
93
|
-
afterEach(cleanup);
|
|
94
|
-
|
|
95
|
-
it('clicking the close button should call closeButtonProps.onClick', () => {
|
|
96
|
-
const handleClose = jest.fn();
|
|
97
|
-
|
|
98
|
-
const {container} = render(
|
|
99
|
-
<ClayLabel
|
|
100
|
-
closeButtonProps={{onClick: handleClose}}
|
|
101
|
-
spritemap="foo/bar"
|
|
102
|
-
/>
|
|
103
|
-
);
|
|
104
|
-
|
|
105
|
-
const closeButton = container.querySelector('button');
|
|
106
|
-
|
|
107
|
-
fireEvent.click(closeButton as HTMLButtonElement, {});
|
|
108
|
-
|
|
109
|
-
expect(handleClose).toHaveBeenCalledTimes(1);
|
|
110
|
-
});
|
|
111
|
-
});
|
package/src/index.tsx
DELETED
|
@@ -1,200 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
|
|
3
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import ClayIcon from '@clayui/icon';
|
|
7
|
-
import ClayLink from '@clayui/link';
|
|
8
|
-
import classNames from 'classnames';
|
|
9
|
-
import React from 'react';
|
|
10
|
-
|
|
11
|
-
const ClayLabelItemAfter = React.forwardRef<
|
|
12
|
-
HTMLSpanElement,
|
|
13
|
-
React.HTMLAttributes<HTMLSpanElement>
|
|
14
|
-
>(({children, className, ...otherProps}, ref) => (
|
|
15
|
-
<span
|
|
16
|
-
{...otherProps}
|
|
17
|
-
className={classNames(className, 'label-item label-item-after')}
|
|
18
|
-
ref={ref}
|
|
19
|
-
>
|
|
20
|
-
{children}
|
|
21
|
-
</span>
|
|
22
|
-
));
|
|
23
|
-
|
|
24
|
-
ClayLabelItemAfter.displayName = 'ClayLabelItemAfter';
|
|
25
|
-
|
|
26
|
-
const ClayLabelItemBefore = React.forwardRef<
|
|
27
|
-
HTMLSpanElement,
|
|
28
|
-
React.HTMLAttributes<HTMLSpanElement>
|
|
29
|
-
>(({children, className, ...otherProps}, ref) => (
|
|
30
|
-
<span
|
|
31
|
-
{...otherProps}
|
|
32
|
-
className={classNames(className, 'label-item label-item-before')}
|
|
33
|
-
ref={ref}
|
|
34
|
-
>
|
|
35
|
-
{children}
|
|
36
|
-
</span>
|
|
37
|
-
));
|
|
38
|
-
|
|
39
|
-
ClayLabelItemBefore.displayName = 'ClayLabelItemBefore';
|
|
40
|
-
|
|
41
|
-
const ClayLabelItemExpand = React.forwardRef<
|
|
42
|
-
HTMLAnchorElement | HTMLSpanElement,
|
|
43
|
-
React.BaseHTMLAttributes<HTMLAnchorElement | HTMLSpanElement>
|
|
44
|
-
>(({children, className, href, ...otherProps}, ref) => {
|
|
45
|
-
const TagName = href ? ClayLink : 'span';
|
|
46
|
-
|
|
47
|
-
return (
|
|
48
|
-
<TagName
|
|
49
|
-
{...otherProps}
|
|
50
|
-
className={classNames(className, 'label-item label-item-expand')}
|
|
51
|
-
href={href}
|
|
52
|
-
ref={ref as React.ComponentProps<typeof ClayLink>['ref']}
|
|
53
|
-
>
|
|
54
|
-
{children}
|
|
55
|
-
</TagName>
|
|
56
|
-
);
|
|
57
|
-
});
|
|
58
|
-
|
|
59
|
-
ClayLabelItemExpand.displayName = 'ClayLabelItemExpand';
|
|
60
|
-
|
|
61
|
-
type DisplayType =
|
|
62
|
-
| 'secondary'
|
|
63
|
-
| 'info'
|
|
64
|
-
| 'warning'
|
|
65
|
-
| 'danger'
|
|
66
|
-
| 'success'
|
|
67
|
-
| 'unstyled';
|
|
68
|
-
|
|
69
|
-
interface IBaseProps extends React.BaseHTMLAttributes<HTMLSpanElement> {
|
|
70
|
-
/**
|
|
71
|
-
* Flag to indicate if `label-dismissible` class should be applied.
|
|
72
|
-
*/
|
|
73
|
-
dismissible?: boolean;
|
|
74
|
-
|
|
75
|
-
/**
|
|
76
|
-
* Determines the style of the label.
|
|
77
|
-
*/
|
|
78
|
-
displayType?: DisplayType;
|
|
79
|
-
|
|
80
|
-
/**
|
|
81
|
-
* Flag to indicate if the label should be of the `large` variant.
|
|
82
|
-
*/
|
|
83
|
-
large?: boolean;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
const ClayLabel = React.forwardRef<HTMLSpanElement, IBaseProps>(
|
|
87
|
-
(
|
|
88
|
-
{
|
|
89
|
-
children,
|
|
90
|
-
className,
|
|
91
|
-
dismissible,
|
|
92
|
-
displayType = 'secondary',
|
|
93
|
-
large = false,
|
|
94
|
-
...otherProps
|
|
95
|
-
},
|
|
96
|
-
ref
|
|
97
|
-
) => {
|
|
98
|
-
return (
|
|
99
|
-
<span
|
|
100
|
-
{...otherProps}
|
|
101
|
-
className={classNames('label', className, {
|
|
102
|
-
'label-dismissible': dismissible,
|
|
103
|
-
'label-lg': large,
|
|
104
|
-
[`label-${displayType}`]: displayType,
|
|
105
|
-
})}
|
|
106
|
-
ref={ref}
|
|
107
|
-
>
|
|
108
|
-
{children}
|
|
109
|
-
</span>
|
|
110
|
-
);
|
|
111
|
-
}
|
|
112
|
-
);
|
|
113
|
-
|
|
114
|
-
ClayLabel.displayName = 'ClayLabel';
|
|
115
|
-
|
|
116
|
-
interface IProps extends IBaseProps {
|
|
117
|
-
/**
|
|
118
|
-
* HTML properties that are applied to the 'x' button.
|
|
119
|
-
*/
|
|
120
|
-
closeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
121
|
-
ref?: (instance: HTMLButtonElement | null) => void;
|
|
122
|
-
};
|
|
123
|
-
|
|
124
|
-
/**
|
|
125
|
-
* Pros to add to the inner label item
|
|
126
|
-
*/
|
|
127
|
-
innerElementProps?: React.ComponentProps<typeof ClayLabelItemExpand>;
|
|
128
|
-
|
|
129
|
-
/**
|
|
130
|
-
* Path to the location of the spritemap resource used for Icon.
|
|
131
|
-
*/
|
|
132
|
-
spritemap?: string;
|
|
133
|
-
|
|
134
|
-
/**
|
|
135
|
-
* Flag to indicate if component should include the close button
|
|
136
|
-
*/
|
|
137
|
-
withClose?: boolean;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
const ClayLabelHybrid = React.forwardRef<
|
|
141
|
-
HTMLAnchorElement | HTMLSpanElement,
|
|
142
|
-
IProps
|
|
143
|
-
>(
|
|
144
|
-
(
|
|
145
|
-
{
|
|
146
|
-
children,
|
|
147
|
-
closeButtonProps,
|
|
148
|
-
href,
|
|
149
|
-
innerElementProps = {},
|
|
150
|
-
withClose = true,
|
|
151
|
-
spritemap,
|
|
152
|
-
...otherProps
|
|
153
|
-
}: IProps,
|
|
154
|
-
ref
|
|
155
|
-
) => {
|
|
156
|
-
return (
|
|
157
|
-
<ClayLabel
|
|
158
|
-
dismissible={withClose && !!closeButtonProps}
|
|
159
|
-
{...otherProps}
|
|
160
|
-
ref={ref}
|
|
161
|
-
>
|
|
162
|
-
{!withClose && children}
|
|
163
|
-
|
|
164
|
-
{withClose && (
|
|
165
|
-
<>
|
|
166
|
-
<ClayLabelItemExpand {...innerElementProps} href={href}>
|
|
167
|
-
{children}
|
|
168
|
-
</ClayLabelItemExpand>
|
|
169
|
-
|
|
170
|
-
{closeButtonProps && (
|
|
171
|
-
<ClayLabelItemAfter>
|
|
172
|
-
<button
|
|
173
|
-
{...closeButtonProps}
|
|
174
|
-
className={classNames(
|
|
175
|
-
closeButtonProps.className,
|
|
176
|
-
'close'
|
|
177
|
-
)}
|
|
178
|
-
type="button"
|
|
179
|
-
>
|
|
180
|
-
<ClayIcon
|
|
181
|
-
spritemap={spritemap}
|
|
182
|
-
symbol="times-small"
|
|
183
|
-
/>
|
|
184
|
-
</button>
|
|
185
|
-
</ClayLabelItemAfter>
|
|
186
|
-
)}
|
|
187
|
-
</>
|
|
188
|
-
)}
|
|
189
|
-
</ClayLabel>
|
|
190
|
-
);
|
|
191
|
-
}
|
|
192
|
-
);
|
|
193
|
-
|
|
194
|
-
ClayLabelHybrid.displayName = 'ClayLabel';
|
|
195
|
-
|
|
196
|
-
export default Object.assign(ClayLabelHybrid, {
|
|
197
|
-
ItemAfter: ClayLabelItemAfter,
|
|
198
|
-
ItemBefore: ClayLabelItemBefore,
|
|
199
|
-
ItemExpand: ClayLabelItemExpand,
|
|
200
|
-
});
|