@clayui/breadcrumb 3.104.0 → 3.105.1-alpha.8
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/Ellipsis.js +58 -0
- package/lib/Item.d.ts +0 -0
- package/lib/Item.js.map +1 -0
- package/lib/index.d.ts +0 -0
- package/lib/index.js.map +1 -0
- package/package.json +6 -7
- package/src/Item.tsx +0 -56
- package/src/__tests__/__snapshots__/index.tsx.snap +0 -191
- package/src/__tests__/index.tsx +0 -136
- package/src/index.tsx +0 -138
package/lib/Ellipsis.js
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _button = _interopRequireDefault(require("@clayui/button"));
|
|
9
|
+
|
|
10
|
+
var _dropDown = _interopRequireDefault(require("@clayui/drop-down"));
|
|
11
|
+
|
|
12
|
+
var _icon = _interopRequireDefault(require("@clayui/icon"));
|
|
13
|
+
|
|
14
|
+
var _react = _interopRequireDefault(require("react"));
|
|
15
|
+
|
|
16
|
+
var _excluded = ["items", "spritemap"];
|
|
17
|
+
|
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
+
|
|
20
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
21
|
+
|
|
22
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
23
|
+
|
|
24
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
25
|
+
|
|
26
|
+
var Ellipsis = function Ellipsis(_ref) {
|
|
27
|
+
var items = _ref.items,
|
|
28
|
+
spritemap = _ref.spritemap,
|
|
29
|
+
otherProps = _objectWithoutProperties(_ref, _excluded);
|
|
30
|
+
|
|
31
|
+
return /*#__PURE__*/_react.default.createElement(_dropDown.default, _extends({
|
|
32
|
+
className: "breadcrumb-item",
|
|
33
|
+
containerElement: "li",
|
|
34
|
+
trigger: /*#__PURE__*/_react.default.createElement(_button.default, {
|
|
35
|
+
className: "breadcrumb-link",
|
|
36
|
+
displayType: "unstyled"
|
|
37
|
+
}, /*#__PURE__*/_react.default.createElement(_icon.default, {
|
|
38
|
+
spritemap: spritemap,
|
|
39
|
+
symbol: "ellipsis-h"
|
|
40
|
+
}), /*#__PURE__*/_react.default.createElement(_icon.default, {
|
|
41
|
+
spritemap: spritemap,
|
|
42
|
+
symbol: "caret-bottom"
|
|
43
|
+
}))
|
|
44
|
+
}, otherProps), /*#__PURE__*/_react.default.createElement(_dropDown.default.ItemList, null, items.map(function (_ref2, i) {
|
|
45
|
+
var href = _ref2.href,
|
|
46
|
+
label = _ref2.label,
|
|
47
|
+
onClick = _ref2.onClick;
|
|
48
|
+
return /*#__PURE__*/_react.default.createElement(_dropDown.default.Item, {
|
|
49
|
+
href: href,
|
|
50
|
+
key: "breadcrumbEllipsisItem".concat(i),
|
|
51
|
+
onClick: onClick,
|
|
52
|
+
title: label
|
|
53
|
+
}, label);
|
|
54
|
+
})));
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
var _default = Ellipsis;
|
|
58
|
+
exports.default = _default;
|
package/lib/Item.d.ts
CHANGED
|
File without changes
|
package/lib/Item.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Item.js","names":["_link","_interopRequireDefault","require","_classnames","_react","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Item","_ref","active","href","label","onClick","otherProps","createElement","className","classNames","undefined","event","preventDefault","_default","exports"],"sources":["../src/Item.tsx"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport ClayLink from '@clayui/link';\nimport classNames from 'classnames';\nimport React from 'react';\n\ninterface IItem extends React.HTMLAttributes<HTMLLIElement> {\n\t/**\n\t * Flag to indicate if the Breadcrumb item is active or not.\n\t */\n\tactive?: boolean;\n\n\t/**\n\t * This value is used to be the target of the link.\n\t */\n\thref?: string;\n\n\t/**\n\t * Label of the Breadcrumb item\n\t */\n\tlabel: string;\n\n\t/**\n\t * Callback for when a Breadcrumb item is clicked.\n\t */\n\tonClick?: (event: React.SyntheticEvent) => void;\n}\n\nconst Item = ({active, href, label, onClick, ...otherProps}: IItem) => (\n\t<li\n\t\tclassName={classNames('breadcrumb-item', {\n\t\t\tactive,\n\t\t})}\n\t\t{...otherProps}\n\t>\n\t\t<ClayLink\n\t\t\taria-current={active ? 'page' : undefined}\n\t\t\tclassName=\"breadcrumb-link\"\n\t\t\tdata-testid={`testId${label}`}\n\t\t\thref={active ? '#' : href}\n\t\t\tonClick={(event) => {\n\t\t\t\tif (onClick) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tonClick(event);\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\t{label}\n\t\t</ClayLink>\n\t</li>\n);\n\nexport default Item;\n"],"mappings":"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"}
|
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":["_button","require","_classnames","_interopRequireDefault","_react","_interopRequireWildcard","_warning","_Item","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","r","l","t","Symbol","iterator","e","u","a","f","next","done","push","value","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","findActiveItems","items","filter","item","active","ClayBreadcrumb","_ref","_ref$ariaLabels","ariaLabels","breadcrumb","close","open","_ref$ellipsisBuffer","ellipsisBuffer","_ref$ellipsisProps","ellipsisProps","className","spritemap","otherProps","warning","_useState","useState","_useState2","collapsed","setCollapsed","createElement","ClayButtonWithIcon","displayType","onClick","size","symbol","title","classNames","Items","_ref2","Fragment","map","React","isValidElement","cloneElement","concat","href","label","_default","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 {ClayButtonWithIcon} from '@clayui/button';\nimport classNames from 'classnames';\nimport React, {useState} from 'react';\nimport warning from 'warning';\n\nimport Item from './Item';\n\ntype TItem = React.ComponentProps<typeof Item>;\ntype TItems = Array<TItem>;\n\ninterface IProps extends React.HTMLAttributes<HTMLOListElement> {\n\t/**\n\t * Defines the aria label of component elements.\n\t */\n\tariaLabels?: {\n\t\tbreadcrumb: string;\n\t\topen: string;\n\t\tclose: string;\n\t};\n\n\t/**\n\t * The number of Breadcrumb Items to show on each side of the active Breadcrumb Item before\n\t * using an ellipsis dropdown.\n\t * @deprecated since v3.91.0 - It is no longer necessary.\n\t */\n\tellipsisBuffer?: number;\n\n\t/**\n\t * Use this property for defining `otherProps` that will be passed to ellipsis dropdown trigger.\n\t * @deprecated since v3.91.0 - It is no longer necessary.\n\t */\n\tellipsisProps?: Object;\n\n\t/**\n\t * Property to define Breadcrumb's items.\n\t */\n\titems: TItems;\n\n\t/**\n\t * Path to the location of the spritemap resource.\n\t */\n\tspritemap?: string;\n}\n\nconst findActiveItems = (items: TItems) => {\n\treturn items.filter((item) => {\n\t\treturn item.active;\n\t});\n};\n\nconst ClayBreadcrumb = ({\n\tariaLabels = {\n\t\tbreadcrumb: 'Breadcrumb',\n\t\tclose: 'Partially nest breadcrumbs',\n\t\topen: 'See full nested',\n\t},\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tellipsisBuffer = 1,\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tellipsisProps = {},\n\tclassName,\n\titems,\n\tspritemap,\n\t...otherProps\n}: IProps) => {\n\twarning(\n\t\tfindActiveItems(items).length === 1,\n\t\t'ClayBreadcrumb expects at least one `active` item on `items`.'\n\t);\n\n\tconst [collapsed, setCollapsed] = useState(false);\n\n\treturn (\n\t\t<nav\n\t\t\taria-label={ariaLabels.breadcrumb}\n\t\t\tclassName=\"align-items-center d-flex\"\n\t\t>\n\t\t\t{items.length > 3 && (\n\t\t\t\t<ClayButtonWithIcon\n\t\t\t\t\taria-expanded={collapsed}\n\t\t\t\t\taria-label={collapsed ? ariaLabels.close : ariaLabels.open}\n\t\t\t\t\tclassName=\"breadcrumb-toggle\"\n\t\t\t\t\tdisplayType={null}\n\t\t\t\t\tonClick={() => setCollapsed(!collapsed)}\n\t\t\t\t\tsize=\"xs\"\n\t\t\t\t\tspritemap={spritemap}\n\t\t\t\t\tsymbol={\n\t\t\t\t\t\tcollapsed ? 'angle-double-left' : 'angle-double-right'\n\t\t\t\t\t}\n\t\t\t\t\ttitle={collapsed ? ariaLabels.close : ariaLabels.open}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<ol {...otherProps} className={classNames('breadcrumb', className)}>\n\t\t\t\t{items.length > 3 && !collapsed ? (\n\t\t\t\t\t<Items\n\t\t\t\t\t\titems={[\n\t\t\t\t\t\t\titems[items.length - 2]!,\n\t\t\t\t\t\t\titems[items.length - 1]!,\n\t\t\t\t\t\t]}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<Items items={items} />\n\t\t\t\t)}\n\t\t\t</ol>\n\t\t</nav>\n\t);\n};\n\ntype ItemsProps = {\n\titems: TItems;\n};\n\nfunction Items({items}: ItemsProps) {\n\treturn (\n\t\t<>\n\t\t\t{items.map((item: TItem | React.ReactNode, i: number) =>\n\t\t\t\tReact.isValidElement(item) ? (\n\t\t\t\t\tReact.cloneElement(item, {key: `ellipsis${i}`})\n\t\t\t\t) : (\n\t\t\t\t\t<Item\n\t\t\t\t\t\tactive={(item as TItem).active}\n\t\t\t\t\t\thref={(item as TItem).href}\n\t\t\t\t\t\tkey={`breadcrumbItem${i}`}\n\t\t\t\t\t\tlabel={(item as TItem).label}\n\t\t\t\t\t\tonClick={(item as TItem).onClick}\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t)}\n\t\t</>\n\t);\n}\n\nexport default ClayBreadcrumb;\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@clayui/breadcrumb",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.105.1-alpha.8+41563f2b8",
|
|
4
4
|
"description": "ClayBreadcrumb 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": "cross-env NODE_ENV=production babel src --root-mode upward --out-dir lib --extensions .ts,.tsx",
|
|
@@ -26,9 +25,9 @@
|
|
|
26
25
|
"react"
|
|
27
26
|
],
|
|
28
27
|
"dependencies": {
|
|
29
|
-
"@clayui/button": "^3.
|
|
30
|
-
"@clayui/icon": "^3.
|
|
31
|
-
"@clayui/link": "^3.
|
|
28
|
+
"@clayui/button": "^3.105.1-alpha.8+41563f2b8",
|
|
29
|
+
"@clayui/icon": "^3.105.1-alpha.8+41563f2b8",
|
|
30
|
+
"@clayui/link": "^3.105.1-alpha.8+41563f2b8",
|
|
32
31
|
"classnames": "^2.2.6",
|
|
33
32
|
"warning": "^4.0.3"
|
|
34
33
|
},
|
|
@@ -40,5 +39,5 @@
|
|
|
40
39
|
"browserslist": [
|
|
41
40
|
"extends browserslist-config-clay"
|
|
42
41
|
],
|
|
43
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "41563f2b8f5a330f313a25b5eb6a56a014cdec2c"
|
|
44
43
|
}
|
package/src/Item.tsx
DELETED
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
|
|
3
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import ClayLink from '@clayui/link';
|
|
7
|
-
import classNames from 'classnames';
|
|
8
|
-
import React from 'react';
|
|
9
|
-
|
|
10
|
-
interface IItem extends React.HTMLAttributes<HTMLLIElement> {
|
|
11
|
-
/**
|
|
12
|
-
* Flag to indicate if the Breadcrumb item is active or not.
|
|
13
|
-
*/
|
|
14
|
-
active?: boolean;
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* This value is used to be the target of the link.
|
|
18
|
-
*/
|
|
19
|
-
href?: string;
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* Label of the Breadcrumb item
|
|
23
|
-
*/
|
|
24
|
-
label: string;
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* Callback for when a Breadcrumb item is clicked.
|
|
28
|
-
*/
|
|
29
|
-
onClick?: (event: React.SyntheticEvent) => void;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
const Item = ({active, href, label, onClick, ...otherProps}: IItem) => (
|
|
33
|
-
<li
|
|
34
|
-
className={classNames('breadcrumb-item', {
|
|
35
|
-
active,
|
|
36
|
-
})}
|
|
37
|
-
{...otherProps}
|
|
38
|
-
>
|
|
39
|
-
<ClayLink
|
|
40
|
-
aria-current={active ? 'page' : undefined}
|
|
41
|
-
className="breadcrumb-link"
|
|
42
|
-
data-testid={`testId${label}`}
|
|
43
|
-
href={active ? '#' : href}
|
|
44
|
-
onClick={(event) => {
|
|
45
|
-
if (onClick) {
|
|
46
|
-
event.preventDefault();
|
|
47
|
-
onClick(event);
|
|
48
|
-
}
|
|
49
|
-
}}
|
|
50
|
-
>
|
|
51
|
-
{label}
|
|
52
|
-
</ClayLink>
|
|
53
|
-
</li>
|
|
54
|
-
);
|
|
55
|
-
|
|
56
|
-
export default Item;
|
|
@@ -1,191 +0,0 @@
|
|
|
1
|
-
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
-
|
|
3
|
-
exports[`ClayBreadcrumb calls callback when an item is clicked 1`] = `
|
|
4
|
-
<div>
|
|
5
|
-
<nav
|
|
6
|
-
aria-label="Breadcrumb"
|
|
7
|
-
class="align-items-center d-flex"
|
|
8
|
-
>
|
|
9
|
-
<button
|
|
10
|
-
aria-expanded="false"
|
|
11
|
-
aria-label="See full nested"
|
|
12
|
-
class="breadcrumb-toggle btn btn-monospaced btn-xs"
|
|
13
|
-
title="See full nested"
|
|
14
|
-
type="button"
|
|
15
|
-
>
|
|
16
|
-
<svg
|
|
17
|
-
class="lexicon-icon lexicon-icon-angle-double-right"
|
|
18
|
-
role="presentation"
|
|
19
|
-
>
|
|
20
|
-
<use
|
|
21
|
-
xlink:href="path/to/spritemap#angle-double-right"
|
|
22
|
-
/>
|
|
23
|
-
</svg>
|
|
24
|
-
</button>
|
|
25
|
-
<ol
|
|
26
|
-
class="breadcrumb"
|
|
27
|
-
>
|
|
28
|
-
<li
|
|
29
|
-
class="breadcrumb-item"
|
|
30
|
-
>
|
|
31
|
-
<a
|
|
32
|
-
class="breadcrumb-link"
|
|
33
|
-
data-testid="testId4"
|
|
34
|
-
>
|
|
35
|
-
4
|
|
36
|
-
</a>
|
|
37
|
-
</li>
|
|
38
|
-
<li
|
|
39
|
-
class="breadcrumb-item"
|
|
40
|
-
>
|
|
41
|
-
<a
|
|
42
|
-
class="breadcrumb-link"
|
|
43
|
-
data-testid="testId5"
|
|
44
|
-
>
|
|
45
|
-
5
|
|
46
|
-
</a>
|
|
47
|
-
</li>
|
|
48
|
-
</ol>
|
|
49
|
-
</nav>
|
|
50
|
-
</div>
|
|
51
|
-
`;
|
|
52
|
-
|
|
53
|
-
exports[`ClayBreadcrumb renders 1`] = `
|
|
54
|
-
<div>
|
|
55
|
-
<nav
|
|
56
|
-
aria-label="Breadcrumb"
|
|
57
|
-
class="align-items-center d-flex"
|
|
58
|
-
>
|
|
59
|
-
<button
|
|
60
|
-
aria-expanded="false"
|
|
61
|
-
aria-label="See full nested"
|
|
62
|
-
class="breadcrumb-toggle btn btn-monospaced btn-xs"
|
|
63
|
-
title="See full nested"
|
|
64
|
-
type="button"
|
|
65
|
-
>
|
|
66
|
-
<svg
|
|
67
|
-
class="lexicon-icon lexicon-icon-angle-double-right"
|
|
68
|
-
role="presentation"
|
|
69
|
-
>
|
|
70
|
-
<use
|
|
71
|
-
xlink:href="path/to/spritemap#angle-double-right"
|
|
72
|
-
/>
|
|
73
|
-
</svg>
|
|
74
|
-
</button>
|
|
75
|
-
<ol
|
|
76
|
-
class="breadcrumb"
|
|
77
|
-
>
|
|
78
|
-
<li
|
|
79
|
-
class="breadcrumb-item"
|
|
80
|
-
>
|
|
81
|
-
<a
|
|
82
|
-
class="breadcrumb-link"
|
|
83
|
-
data-testid="testId4"
|
|
84
|
-
href="#4"
|
|
85
|
-
>
|
|
86
|
-
4
|
|
87
|
-
</a>
|
|
88
|
-
</li>
|
|
89
|
-
<li
|
|
90
|
-
class="breadcrumb-item"
|
|
91
|
-
>
|
|
92
|
-
<a
|
|
93
|
-
class="breadcrumb-link"
|
|
94
|
-
data-testid="testId5"
|
|
95
|
-
href="#5"
|
|
96
|
-
>
|
|
97
|
-
5
|
|
98
|
-
</a>
|
|
99
|
-
</li>
|
|
100
|
-
</ol>
|
|
101
|
-
</nav>
|
|
102
|
-
</div>
|
|
103
|
-
`;
|
|
104
|
-
|
|
105
|
-
exports[`ClayBreadcrumb renders with properties passed by \`ellipsisProps\` 1`] = `
|
|
106
|
-
<div>
|
|
107
|
-
<nav
|
|
108
|
-
aria-label="Breadcrumb"
|
|
109
|
-
class="align-items-center d-flex"
|
|
110
|
-
>
|
|
111
|
-
<button
|
|
112
|
-
aria-expanded="false"
|
|
113
|
-
aria-label="See full nested"
|
|
114
|
-
class="breadcrumb-toggle btn btn-monospaced btn-xs"
|
|
115
|
-
title="See full nested"
|
|
116
|
-
type="button"
|
|
117
|
-
>
|
|
118
|
-
<svg
|
|
119
|
-
class="lexicon-icon lexicon-icon-angle-double-right"
|
|
120
|
-
role="presentation"
|
|
121
|
-
>
|
|
122
|
-
<use
|
|
123
|
-
xlink:href="path/to/spritemap#angle-double-right"
|
|
124
|
-
/>
|
|
125
|
-
</svg>
|
|
126
|
-
</button>
|
|
127
|
-
<ol
|
|
128
|
-
class="breadcrumb"
|
|
129
|
-
>
|
|
130
|
-
<li
|
|
131
|
-
class="breadcrumb-item"
|
|
132
|
-
>
|
|
133
|
-
<a
|
|
134
|
-
class="breadcrumb-link"
|
|
135
|
-
data-testid="testId4"
|
|
136
|
-
href="#4"
|
|
137
|
-
>
|
|
138
|
-
4
|
|
139
|
-
</a>
|
|
140
|
-
</li>
|
|
141
|
-
<li
|
|
142
|
-
class="breadcrumb-item"
|
|
143
|
-
>
|
|
144
|
-
<a
|
|
145
|
-
class="breadcrumb-link"
|
|
146
|
-
data-testid="testId5"
|
|
147
|
-
href="#5"
|
|
148
|
-
>
|
|
149
|
-
5
|
|
150
|
-
</a>
|
|
151
|
-
</li>
|
|
152
|
-
</ol>
|
|
153
|
-
</nav>
|
|
154
|
-
</div>
|
|
155
|
-
`;
|
|
156
|
-
|
|
157
|
-
exports[`ClayBreadcrumb throws a warning when not passing \`active\` to any \`items\` 1`] = `
|
|
158
|
-
<div>
|
|
159
|
-
<nav
|
|
160
|
-
aria-label="Breadcrumb"
|
|
161
|
-
class="align-items-center d-flex"
|
|
162
|
-
>
|
|
163
|
-
<ol
|
|
164
|
-
class="breadcrumb"
|
|
165
|
-
>
|
|
166
|
-
<li
|
|
167
|
-
class="breadcrumb-item"
|
|
168
|
-
>
|
|
169
|
-
<a
|
|
170
|
-
class="breadcrumb-link"
|
|
171
|
-
data-testid="testId1"
|
|
172
|
-
href="#1"
|
|
173
|
-
>
|
|
174
|
-
1
|
|
175
|
-
</a>
|
|
176
|
-
</li>
|
|
177
|
-
<li
|
|
178
|
-
class="breadcrumb-item"
|
|
179
|
-
>
|
|
180
|
-
<a
|
|
181
|
-
class="breadcrumb-link"
|
|
182
|
-
data-testid="testId2"
|
|
183
|
-
href="#2"
|
|
184
|
-
>
|
|
185
|
-
2
|
|
186
|
-
</a>
|
|
187
|
-
</li>
|
|
188
|
-
</ol>
|
|
189
|
-
</nav>
|
|
190
|
-
</div>
|
|
191
|
-
`;
|
package/src/__tests__/index.tsx
DELETED
|
@@ -1,136 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
|
|
3
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import ClayBreadcrumb from '..';
|
|
7
|
-
import {cleanup, fireEvent, render} from '@testing-library/react';
|
|
8
|
-
import React from 'react';
|
|
9
|
-
|
|
10
|
-
describe('ClayBreadcrumb', () => {
|
|
11
|
-
afterEach(() => cleanup());
|
|
12
|
-
|
|
13
|
-
const items = [
|
|
14
|
-
{
|
|
15
|
-
active: true,
|
|
16
|
-
href: '#1',
|
|
17
|
-
label: '1',
|
|
18
|
-
},
|
|
19
|
-
{
|
|
20
|
-
href: '#2',
|
|
21
|
-
label: '2',
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
href: '#3',
|
|
25
|
-
label: '3',
|
|
26
|
-
},
|
|
27
|
-
{
|
|
28
|
-
href: '#4',
|
|
29
|
-
label: '4',
|
|
30
|
-
},
|
|
31
|
-
{
|
|
32
|
-
href: '#5',
|
|
33
|
-
label: '5',
|
|
34
|
-
},
|
|
35
|
-
];
|
|
36
|
-
|
|
37
|
-
it('renders', () => {
|
|
38
|
-
const {container} = render(
|
|
39
|
-
<ClayBreadcrumb items={items} spritemap="path/to/spritemap" />
|
|
40
|
-
);
|
|
41
|
-
|
|
42
|
-
expect(container).toMatchSnapshot();
|
|
43
|
-
});
|
|
44
|
-
|
|
45
|
-
it('throws a warning when not passing `active` to any `items`', () => {
|
|
46
|
-
const mockWarnings = jest
|
|
47
|
-
.spyOn(global.console, 'error')
|
|
48
|
-
.mockImplementation(() => null);
|
|
49
|
-
|
|
50
|
-
const items = [
|
|
51
|
-
{
|
|
52
|
-
href: '#1',
|
|
53
|
-
label: '1',
|
|
54
|
-
},
|
|
55
|
-
{
|
|
56
|
-
href: '#2',
|
|
57
|
-
label: '2',
|
|
58
|
-
},
|
|
59
|
-
];
|
|
60
|
-
|
|
61
|
-
const {container} = render(
|
|
62
|
-
<ClayBreadcrumb
|
|
63
|
-
ellipsisBuffer={3}
|
|
64
|
-
items={items}
|
|
65
|
-
spritemap="path/to/spritemap"
|
|
66
|
-
/>
|
|
67
|
-
);
|
|
68
|
-
|
|
69
|
-
expect(mockWarnings).toBeCalled();
|
|
70
|
-
expect(mockWarnings.mock.calls[0]![0]).toBe(
|
|
71
|
-
'Warning: ClayBreadcrumb expects at least one `active` item on `items`.'
|
|
72
|
-
);
|
|
73
|
-
|
|
74
|
-
expect(container).toMatchSnapshot();
|
|
75
|
-
jest.resetAllMocks();
|
|
76
|
-
});
|
|
77
|
-
|
|
78
|
-
it('renders with properties passed by `ellipsisProps`', () => {
|
|
79
|
-
const {container} = render(
|
|
80
|
-
<ClayBreadcrumb
|
|
81
|
-
ellipsisBuffer={1}
|
|
82
|
-
ellipsisProps={{style: {fontSize: '15px'}}}
|
|
83
|
-
items={items}
|
|
84
|
-
spritemap="path/to/spritemap"
|
|
85
|
-
/>
|
|
86
|
-
);
|
|
87
|
-
|
|
88
|
-
expect(container).toMatchSnapshot();
|
|
89
|
-
});
|
|
90
|
-
|
|
91
|
-
it('calls callback when an item is clicked', () => {
|
|
92
|
-
const itemClickMock = jest.fn((event) => {
|
|
93
|
-
event.persist();
|
|
94
|
-
});
|
|
95
|
-
|
|
96
|
-
const itemsWithoutHref = [
|
|
97
|
-
{
|
|
98
|
-
active: true,
|
|
99
|
-
label: '1',
|
|
100
|
-
onClick: itemClickMock,
|
|
101
|
-
},
|
|
102
|
-
{
|
|
103
|
-
label: '2',
|
|
104
|
-
onClick: itemClickMock,
|
|
105
|
-
},
|
|
106
|
-
{
|
|
107
|
-
label: '3',
|
|
108
|
-
onClick: itemClickMock,
|
|
109
|
-
},
|
|
110
|
-
{
|
|
111
|
-
label: '4',
|
|
112
|
-
onClick: itemClickMock,
|
|
113
|
-
},
|
|
114
|
-
{
|
|
115
|
-
label: '5',
|
|
116
|
-
onClick: itemClickMock,
|
|
117
|
-
},
|
|
118
|
-
];
|
|
119
|
-
|
|
120
|
-
const {container, getByTestId} = render(
|
|
121
|
-
<ClayBreadcrumb
|
|
122
|
-
ellipsisBuffer={1}
|
|
123
|
-
items={itemsWithoutHref}
|
|
124
|
-
spritemap="path/to/spritemap"
|
|
125
|
-
/>
|
|
126
|
-
);
|
|
127
|
-
|
|
128
|
-
fireEvent.click(getByTestId('testId5'));
|
|
129
|
-
|
|
130
|
-
expect(itemClickMock).toHaveBeenCalled();
|
|
131
|
-
|
|
132
|
-
expect(itemClickMock.mock.calls[0]![0].type).toBe('click');
|
|
133
|
-
|
|
134
|
-
expect(container).toMatchSnapshot();
|
|
135
|
-
});
|
|
136
|
-
});
|
package/src/index.tsx
DELETED
|
@@ -1,138 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
|
|
3
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import {ClayButtonWithIcon} from '@clayui/button';
|
|
7
|
-
import classNames from 'classnames';
|
|
8
|
-
import React, {useState} from 'react';
|
|
9
|
-
import warning from 'warning';
|
|
10
|
-
|
|
11
|
-
import Item from './Item';
|
|
12
|
-
|
|
13
|
-
type TItem = React.ComponentProps<typeof Item>;
|
|
14
|
-
type TItems = Array<TItem>;
|
|
15
|
-
|
|
16
|
-
interface IProps extends React.HTMLAttributes<HTMLOListElement> {
|
|
17
|
-
/**
|
|
18
|
-
* Defines the aria label of component elements.
|
|
19
|
-
*/
|
|
20
|
-
ariaLabels?: {
|
|
21
|
-
breadcrumb: string;
|
|
22
|
-
open: string;
|
|
23
|
-
close: string;
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* The number of Breadcrumb Items to show on each side of the active Breadcrumb Item before
|
|
28
|
-
* using an ellipsis dropdown.
|
|
29
|
-
* @deprecated since v3.91.0 - It is no longer necessary.
|
|
30
|
-
*/
|
|
31
|
-
ellipsisBuffer?: number;
|
|
32
|
-
|
|
33
|
-
/**
|
|
34
|
-
* Use this property for defining `otherProps` that will be passed to ellipsis dropdown trigger.
|
|
35
|
-
* @deprecated since v3.91.0 - It is no longer necessary.
|
|
36
|
-
*/
|
|
37
|
-
ellipsisProps?: Object;
|
|
38
|
-
|
|
39
|
-
/**
|
|
40
|
-
* Property to define Breadcrumb's items.
|
|
41
|
-
*/
|
|
42
|
-
items: TItems;
|
|
43
|
-
|
|
44
|
-
/**
|
|
45
|
-
* Path to the location of the spritemap resource.
|
|
46
|
-
*/
|
|
47
|
-
spritemap?: string;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
const findActiveItems = (items: TItems) => {
|
|
51
|
-
return items.filter((item) => {
|
|
52
|
-
return item.active;
|
|
53
|
-
});
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
const ClayBreadcrumb = ({
|
|
57
|
-
ariaLabels = {
|
|
58
|
-
breadcrumb: 'Breadcrumb',
|
|
59
|
-
close: 'Partially nest breadcrumbs',
|
|
60
|
-
open: 'See full nested',
|
|
61
|
-
},
|
|
62
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
63
|
-
ellipsisBuffer = 1,
|
|
64
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
65
|
-
ellipsisProps = {},
|
|
66
|
-
className,
|
|
67
|
-
items,
|
|
68
|
-
spritemap,
|
|
69
|
-
...otherProps
|
|
70
|
-
}: IProps) => {
|
|
71
|
-
warning(
|
|
72
|
-
findActiveItems(items).length === 1,
|
|
73
|
-
'ClayBreadcrumb expects at least one `active` item on `items`.'
|
|
74
|
-
);
|
|
75
|
-
|
|
76
|
-
const [collapsed, setCollapsed] = useState(false);
|
|
77
|
-
|
|
78
|
-
return (
|
|
79
|
-
<nav
|
|
80
|
-
aria-label={ariaLabels.breadcrumb}
|
|
81
|
-
className="align-items-center d-flex"
|
|
82
|
-
>
|
|
83
|
-
{items.length > 3 && (
|
|
84
|
-
<ClayButtonWithIcon
|
|
85
|
-
aria-expanded={collapsed}
|
|
86
|
-
aria-label={collapsed ? ariaLabels.close : ariaLabels.open}
|
|
87
|
-
className="breadcrumb-toggle"
|
|
88
|
-
displayType={null}
|
|
89
|
-
onClick={() => setCollapsed(!collapsed)}
|
|
90
|
-
size="xs"
|
|
91
|
-
spritemap={spritemap}
|
|
92
|
-
symbol={
|
|
93
|
-
collapsed ? 'angle-double-left' : 'angle-double-right'
|
|
94
|
-
}
|
|
95
|
-
title={collapsed ? ariaLabels.close : ariaLabels.open}
|
|
96
|
-
/>
|
|
97
|
-
)}
|
|
98
|
-
<ol {...otherProps} className={classNames('breadcrumb', className)}>
|
|
99
|
-
{items.length > 3 && !collapsed ? (
|
|
100
|
-
<Items
|
|
101
|
-
items={[
|
|
102
|
-
items[items.length - 2]!,
|
|
103
|
-
items[items.length - 1]!,
|
|
104
|
-
]}
|
|
105
|
-
/>
|
|
106
|
-
) : (
|
|
107
|
-
<Items items={items} />
|
|
108
|
-
)}
|
|
109
|
-
</ol>
|
|
110
|
-
</nav>
|
|
111
|
-
);
|
|
112
|
-
};
|
|
113
|
-
|
|
114
|
-
type ItemsProps = {
|
|
115
|
-
items: TItems;
|
|
116
|
-
};
|
|
117
|
-
|
|
118
|
-
function Items({items}: ItemsProps) {
|
|
119
|
-
return (
|
|
120
|
-
<>
|
|
121
|
-
{items.map((item: TItem | React.ReactNode, i: number) =>
|
|
122
|
-
React.isValidElement(item) ? (
|
|
123
|
-
React.cloneElement(item, {key: `ellipsis${i}`})
|
|
124
|
-
) : (
|
|
125
|
-
<Item
|
|
126
|
-
active={(item as TItem).active}
|
|
127
|
-
href={(item as TItem).href}
|
|
128
|
-
key={`breadcrumbItem${i}`}
|
|
129
|
-
label={(item as TItem).label}
|
|
130
|
-
onClick={(item as TItem).onClick}
|
|
131
|
-
/>
|
|
132
|
-
)
|
|
133
|
-
)}
|
|
134
|
-
</>
|
|
135
|
-
);
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
export default ClayBreadcrumb;
|