@ebay/ui-core-react 7.0.2 → 7.1.0-alpha.3
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/array.polyfill.flat-5BAolFdk.js +1 -0
- package/badge-CoHKfiPt.js +1 -0
- package/button-o4ao46WM.js +1 -0
- package/calendar-CPKqwJVQ.js +1 -0
- package/debounce-BQsYxxOL.js +1 -0
- package/dialog-previous-button-7ePoYWyj.js +1 -0
- package/drawer-BxxlJwkZ.js +1 -0
- package/ebay-alert-dialog.js +1 -0
- package/ebay-badge.js +1 -0
- package/ebay-breadcrumbs.js +1 -0
- package/ebay-button.js +1 -0
- package/ebay-calendar.js +1 -0
- package/ebay-carousel.js +1 -0
- package/ebay-checkbox.js +1 -0
- package/ebay-confirm-dialog.js +1 -0
- package/ebay-cta-button.js +1 -0
- package/ebay-date-textbox.js +1 -0
- package/ebay-dialog-base.js +1 -0
- package/ebay-drawer-dialog.js +1 -0
- package/ebay-eek.js +1 -0
- package/ebay-fake-menu-button.js +1 -0
- package/ebay-fake-menu.js +1 -0
- package/ebay-fake-tabs.js +1 -0
- package/ebay-field.js +1 -0
- package/ebay-fullscreen-dialog.js +1 -0
- package/ebay-icon-button.js +1 -0
- package/ebay-icon.js +1 -0
- package/ebay-infotip.js +1 -0
- package/ebay-inline-notice.js +1 -0
- package/ebay-lightbox-dialog.js +1 -0
- package/ebay-listbox-button.js +2 -0
- package/ebay-menu/menu.d.ts +1 -1
- package/ebay-menu/menu.d.ts.map +1 -1
- package/ebay-menu-button.js +1 -0
- package/ebay-menu.js +1 -0
- package/ebay-notice-base.js +1 -0
- package/ebay-page-notice.js +1 -0
- package/ebay-pagination.js +1 -0
- package/ebay-panel-dialog.js +1 -0
- package/ebay-progress-bar.js +1 -0
- package/ebay-progress-spinner.js +1 -0
- package/ebay-progress-stepper.js +1 -0
- package/ebay-radio.js +1 -0
- package/ebay-section-notice.js +1 -0
- package/ebay-section-title/index.d.ts.map +1 -1
- package/ebay-section-title.js +1 -0
- package/ebay-select.js +1 -0
- package/ebay-signal.js +1 -0
- package/ebay-snackbar-dialog.js +1 -0
- package/ebay-split-button.js +1 -0
- package/ebay-star-rating-select.js +1 -0
- package/ebay-star-rating.js +1 -0
- package/ebay-svg.js +1 -0
- package/ebay-switch.js +1 -0
- package/ebay-tabs.js +1 -0
- package/ebay-textbox.js +1 -0
- package/ebay-toast-dialog.js +1 -0
- package/ebay-tooltip.js +1 -0
- package/ebay-tourtip.js +1 -0
- package/ebay-video.js +1 -0
- package/hooks-Ctier7Yv.js +1 -0
- package/icon-DK6eEQD8.js +1 -0
- package/icon-button-BB6GFLm7.js +1 -0
- package/index-DbjwTbDP.js +1 -0
- package/label-CnrpYJ-g.js +1 -0
- package/menu-DZU8jEPV.js +1 -0
- package/menu-button-label-BcgasGA4.js +1 -0
- package/menu-item-DBi1NcrM.js +1 -0
- package/notice-content-9iF4T8uB.js +1 -0
- package/notice-content-C0ZStfuX.js +1 -0
- package/notice-footer-Cw1DMzoB.js +1 -0
- package/package.json +19 -8
- package/progress-spinner-CDgxI8R_.js +1 -0
- package/range-DOsPN0h5.js +1 -0
- package/textbox-WnB-9F4y.js +1 -0
- package/use-tooltip-BavqG36Z.js +1 -0
- package/utils-C9NL3q0j.js +1 -0
- package/common/component-utils/array.polyfill.flat.js +0 -32
- package/common/component-utils/forwardRef.js +0 -37
- package/common/component-utils/index.js +0 -18
- package/common/component-utils/usePrevious.js +0 -12
- package/common/component-utils/utils.js +0 -26
- package/common/debounce.js +0 -11
- package/common/event-utils/index.js +0 -123
- package/common/event-utils/types.js +0 -14
- package/common/event-utils/use-key-press.js +0 -33
- package/common/event-utils/use-roving-index.js +0 -35
- package/common/floating-label-utils/hooks.js +0 -133
- package/common/notice-utils/notice-content.js +0 -12
- package/common/notice-utils/notice-cta.js +0 -23
- package/common/notice-utils/notice-footer.js +0 -23
- package/common/notice-utils/notice-title.js +0 -24
- package/common/random-id.js +0 -5
- package/common/range.js +0 -5
- package/common/tooltip-utils/constants.js +0 -95
- package/common/tooltip-utils/index.js +0 -19
- package/common/tooltip-utils/tooltip-close-button.js +0 -8
- package/common/tooltip-utils/tooltip-content.js +0 -25
- package/common/tooltip-utils/tooltip-footer.js +0 -9
- package/common/tooltip-utils/tooltip-host.js +0 -24
- package/common/tooltip-utils/tooltip.js +0 -60
- package/common/tooltip-utils/types.js +0 -2
- package/common/tooltip-utils/use-tooltip.js +0 -27
- package/ebay-alert-dialog/alert-dialog.js +0 -55
- package/ebay-alert-dialog/index.js +0 -8
- package/ebay-badge/badge.js +0 -25
- package/ebay-badge/index.js +0 -8
- package/ebay-breadcrumbs/breadcrumb-item.js +0 -27
- package/ebay-breadcrumbs/breadcrumbs.js +0 -64
- package/ebay-breadcrumbs/index.js +0 -10
- package/ebay-button/button-cell.js +0 -29
- package/ebay-button/button-expand.js +0 -13
- package/ebay-button/button-loading.js +0 -11
- package/ebay-button/button-text.js +0 -9
- package/ebay-button/button.js +0 -95
- package/ebay-button/index.js +0 -10
- package/ebay-button/types.js +0 -2
- package/ebay-calendar/calendar.js +0 -306
- package/ebay-calendar/date-utils.js +0 -58
- package/ebay-calendar/index.js +0 -8
- package/ebay-carousel/carousel-control-button.js +0 -24
- package/ebay-carousel/carousel-item.js +0 -59
- package/ebay-carousel/carousel-list.js +0 -81
- package/ebay-carousel/carousel.js +0 -109
- package/ebay-carousel/helpers.js +0 -123
- package/ebay-carousel/index.js +0 -10
- package/ebay-carousel/scroll-to-transition.js +0 -102
- package/ebay-carousel/types.js +0 -2
- package/ebay-checkbox/checkbox.js +0 -77
- package/ebay-checkbox/index.js +0 -8
- package/ebay-confirm-dialog/confirm-dialog.js +0 -56
- package/ebay-confirm-dialog/index.js +0 -8
- package/ebay-cta-button/cta-button.js +0 -30
- package/ebay-cta-button/index.js +0 -8
- package/ebay-date-textbox/date-textbox.js +0 -179
- package/ebay-date-textbox/index.js +0 -8
- package/ebay-dialog-base/components/animation.js +0 -96
- package/ebay-dialog-base/components/dialog-actions.js +0 -8
- package/ebay-dialog-base/components/dialog-close-button.js +0 -8
- package/ebay-dialog-base/components/dialog-footer.js +0 -8
- package/ebay-dialog-base/components/dialog-header.js +0 -22
- package/ebay-dialog-base/components/dialog-previous-button.js +0 -24
- package/ebay-dialog-base/components/dialogBase.js +0 -152
- package/ebay-dialog-base/dialog-base-with-state.js +0 -63
- package/ebay-dialog-base/index.js +0 -18
- package/ebay-drawer-dialog/components/drawer.js +0 -104
- package/ebay-drawer-dialog/index.js +0 -8
- package/ebay-eek/eek-rating.js +0 -23
- package/ebay-eek/eek-util.js +0 -34
- package/ebay-eek/index.js +0 -8
- package/ebay-fake-menu/index.js +0 -12
- package/ebay-fake-menu/menu-item-separator.js +0 -23
- package/ebay-fake-menu/menu-item.js +0 -72
- package/ebay-fake-menu/menu.js +0 -57
- package/ebay-fake-menu-button/index.js +0 -14
- package/ebay-fake-menu-button/menu-button-item.js +0 -5
- package/ebay-fake-menu-button/menu-button-label.js +0 -8
- package/ebay-fake-menu-button/menu-button-separator.js +0 -23
- package/ebay-fake-menu-button/menu-button.js +0 -105
- package/ebay-fake-tabs/fake-tabs.js +0 -54
- package/ebay-fake-tabs/index.js +0 -10
- package/ebay-fake-tabs/tab.js +0 -24
- package/ebay-field/description.js +0 -26
- package/ebay-field/field.js +0 -12
- package/ebay-field/index.js +0 -12
- package/ebay-field/label.js +0 -29
- package/ebay-field/types.js +0 -2
- package/ebay-fullscreen-dialog/fullscreen-dialog.js +0 -25
- package/ebay-fullscreen-dialog/index.js +0 -8
- package/ebay-icon/icon.js +0 -98
- package/ebay-icon/index.js +0 -8
- package/ebay-icon/types.js +0 -3
- package/ebay-icon-button/icon-button.js +0 -40
- package/ebay-icon-button/index.js +0 -8
- package/ebay-infotip/ebay-infotip-content.js +0 -12
- package/ebay-infotip/ebay-infotip-heading.js +0 -23
- package/ebay-infotip/ebay-infotip-host.js +0 -28
- package/ebay-infotip/ebay-infotip.js +0 -79
- package/ebay-infotip/index.js +0 -14
- package/ebay-infotip/types.js +0 -2
- package/ebay-inline-notice/index.js +0 -10
- package/ebay-inline-notice/inline-notice.js +0 -66
- package/ebay-inline-notice/types.js +0 -2
- package/ebay-lightbox-dialog/index.js +0 -8
- package/ebay-lightbox-dialog/lightbox-dialog.js +0 -27
- package/ebay-listbox-button/index.js +0 -10
- package/ebay-listbox-button/listbox-button-option.js +0 -27
- package/ebay-listbox-button/listbox-button.js +0 -252
- package/ebay-menu/index.js +0 -27
- package/ebay-menu/menu-item-separator.js +0 -23
- package/ebay-menu/menu-item.js +0 -67
- package/ebay-menu/menu.js +0 -149
- package/ebay-menu/types.js +0 -2
- package/ebay-menu-button/index.js +0 -29
- package/ebay-menu-button/menu-button-item.js +0 -5
- package/ebay-menu-button/menu-button-label.js +0 -8
- package/ebay-menu-button/menu-button-separator.js +0 -23
- package/ebay-menu-button/menu-button.js +0 -132
- package/ebay-menu-button/types.js +0 -2
- package/ebay-notice-base/components/ebay-notice-content/index.js +0 -8
- package/ebay-notice-base/components/ebay-notice-content/notice-content.js +0 -4
- package/ebay-notice-base/components/ebay-notice-title/index.js +0 -8
- package/ebay-notice-base/components/ebay-notice-title/notice-title.js +0 -8
- package/ebay-notice-base/index.js +0 -7
- package/ebay-page-notice/index.js +0 -16
- package/ebay-page-notice/page-notice-cta.js +0 -9
- package/ebay-page-notice/page-notice-footer.js +0 -9
- package/ebay-page-notice/page-notice-title.js +0 -23
- package/ebay-page-notice/page-notice.js +0 -66
- package/ebay-pagination/const.js +0 -8
- package/ebay-pagination/helpers.js +0 -92
- package/ebay-pagination/index.js +0 -10
- package/ebay-pagination/pagination-item.js +0 -55
- package/ebay-pagination/pagination.js +0 -146
- package/ebay-pagination/types.js +0 -2
- package/ebay-panel-dialog/index.js +0 -8
- package/ebay-panel-dialog/panel-dialog.js +0 -27
- package/ebay-progress-bar/index.js +0 -8
- package/ebay-progress-bar/progress-bar.js +0 -23
- package/ebay-progress-spinner/index.js +0 -8
- package/ebay-progress-spinner/progress-spinner.js +0 -35
- package/ebay-progress-stepper/ebay-progress-step.js +0 -64
- package/ebay-progress-stepper/ebay-progress-stepper.js +0 -70
- package/ebay-progress-stepper/ebay-progress-title.js +0 -5
- package/ebay-progress-stepper/index.js +0 -12
- package/ebay-progress-stepper/types.js +0 -2
- package/ebay-radio/index.js +0 -8
- package/ebay-radio/radio.js +0 -71
- package/ebay-section-notice/index.js +0 -14
- package/ebay-section-notice/section-notice-footer.js +0 -9
- package/ebay-section-notice/section-notice-title.js +0 -23
- package/ebay-section-notice/section-notice.js +0 -82
- package/ebay-section-title/cta.js +0 -26
- package/ebay-section-title/index.js +0 -16
- package/ebay-section-title/info.js +0 -23
- package/ebay-section-title/overflow.js +0 -23
- package/ebay-section-title/section-title.js +0 -35
- package/ebay-section-title/subtitle.js +0 -23
- package/ebay-section-title/title.js +0 -23
- package/ebay-select/ebay-select-option.js +0 -22
- package/ebay-select/ebay-select.js +0 -129
- package/ebay-select/index.js +0 -10
- package/ebay-signal/index.js +0 -8
- package/ebay-signal/signal.js +0 -24
- package/ebay-snackbar-dialog/components/ebay-snackbar-dialog-action.js +0 -24
- package/ebay-snackbar-dialog/components/ebay-snackbar-dialog.js +0 -122
- package/ebay-snackbar-dialog/index.js +0 -7
- package/ebay-split-button/index.js +0 -23
- package/ebay-split-button/split-button.js +0 -30
- package/ebay-split-button/types.js +0 -2
- package/ebay-star-rating/index.js +0 -23
- package/ebay-star-rating/star-rating.js +0 -26
- package/ebay-star-rating-select/index.js +0 -23
- package/ebay-star-rating-select/star-rating-select.js +0 -82
- package/ebay-svg/index.js +0 -8
- package/ebay-svg/svg.js +0 -2548
- package/ebay-switch/ebay-switch.js +0 -61
- package/ebay-switch/index.js +0 -8
- package/ebay-tabs/index.js +0 -12
- package/ebay-tabs/tab-panel.js +0 -24
- package/ebay-tabs/tab.js +0 -24
- package/ebay-tabs/tabs.js +0 -90
- package/ebay-tabs/types.js +0 -2
- package/ebay-textbox/index.js +0 -16
- package/ebay-textbox/postfix-icon.js +0 -26
- package/ebay-textbox/postfix-text.js +0 -8
- package/ebay-textbox/prefix-icon.js +0 -23
- package/ebay-textbox/prefix-text.js +0 -8
- package/ebay-textbox/textbox.js +0 -147
- package/ebay-textbox/types.js +0 -2
- package/ebay-toast-dialog/components/toast.js +0 -26
- package/ebay-toast-dialog/index.js +0 -8
- package/ebay-tooltip/ebay-tooltip-content.js +0 -8
- package/ebay-tooltip/ebay-tooltip-host.js +0 -8
- package/ebay-tooltip/ebay-tooltip.js +0 -85
- package/ebay-tooltip/index.js +0 -14
- package/ebay-tourtip/ebay-tourtip-content.js +0 -8
- package/ebay-tourtip/ebay-tourtip-footer.js +0 -10
- package/ebay-tourtip/ebay-tourtip-heading.js +0 -24
- package/ebay-tourtip/ebay-tourtip-host.js +0 -8
- package/ebay-tourtip/ebay-tourtip.js +0 -70
- package/ebay-tourtip/index.js +0 -18
- package/ebay-video/const.js +0 -19
- package/ebay-video/controls.js +0 -40
- package/ebay-video/index.js +0 -25
- package/ebay-video/reportButton.js +0 -12
- package/ebay-video/source.js +0 -22
- package/ebay-video/types.js +0 -2
- package/ebay-video/video.js +0 -210
|
@@ -1,132 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
26
|
-
var t = {};
|
|
27
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
28
|
-
t[p] = s[p];
|
|
29
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
30
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
31
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
32
|
-
t[p[i]] = s[p[i]];
|
|
33
|
-
}
|
|
34
|
-
return t;
|
|
35
|
-
};
|
|
36
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
37
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
38
|
-
};
|
|
39
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
|
-
const react_1 = __importStar(require("react"));
|
|
41
|
-
const classnames_1 = __importDefault(require("classnames"));
|
|
42
|
-
const component_utils_1 = require("../common/component-utils");
|
|
43
|
-
const ebay_menu_1 = require("../ebay-menu");
|
|
44
|
-
const ebay_button_1 = require("../ebay-button");
|
|
45
|
-
const ebay_icon_button_1 = require("../ebay-icon-button");
|
|
46
|
-
const ebay_icon_1 = require("../ebay-icon");
|
|
47
|
-
const index_1 = require("./index");
|
|
48
|
-
const random_id_1 = require("../common/random-id");
|
|
49
|
-
const event_utils_1 = require("../common/event-utils");
|
|
50
|
-
const EbayMenuButton = (_a) => {
|
|
51
|
-
var { type, variant = 'button', className, text = '', fixWidth, reverse, expanded: defaultExpanded, noToggleIcon, checked, collapseOnSelect, a11yText, prefixId, prefixLabel, onClick = () => { }, onExpand = () => { }, onCollapse = () => { }, onChange = () => { }, onSelect = () => { }, children } = _a, rest = __rest(_a, ["type", "variant", "className", "text", "fixWidth", "reverse", "expanded", "noToggleIcon", "checked", "collapseOnSelect", "a11yText", "prefixId", "prefixLabel", "onClick", "onExpand", "onCollapse", "onChange", "onSelect", "children"]);
|
|
52
|
-
const [expanded, setExpanded] = (0, react_1.useState)(defaultExpanded);
|
|
53
|
-
const [menuId, setMenuId] = (0, react_1.useState)();
|
|
54
|
-
const buttonRef = (0, react_1.useRef)(null);
|
|
55
|
-
const menuRef = (0, react_1.useRef)();
|
|
56
|
-
const menuItems = (0, component_utils_1.filterByType)(children, [index_1.EbayMenuButtonItem, index_1.EbayMenuButtonSeparator]);
|
|
57
|
-
const defaultIndexes = menuItems.map((item) => Boolean(item.props.checked));
|
|
58
|
-
const [checkedIndexes, setCheckedIndexes] = (0, react_1.useState)(defaultIndexes);
|
|
59
|
-
const menuButtonLabel = (0, component_utils_1.findComponent)(children, index_1.EbayMenuButtonLabel);
|
|
60
|
-
const icon = (0, component_utils_1.findComponent)(children, ebay_icon_1.EbayIcon);
|
|
61
|
-
const label = labelWithPrefixAndIcon({ text, prefixId, prefixLabel, menuButtonLabel, icon });
|
|
62
|
-
const wrapperClasses = (0, classnames_1.default)('menu-button', className);
|
|
63
|
-
const menuClasses = (0, classnames_1.default)('menu-button__menu', {
|
|
64
|
-
'menu-button__menu--fix-width': fixWidth,
|
|
65
|
-
'menu-button__menu--reverse': reverse
|
|
66
|
-
});
|
|
67
|
-
(0, react_1.useEffect)(() => {
|
|
68
|
-
const handleBackgroundClick = (e) => {
|
|
69
|
-
const menuEl = menuRef.current;
|
|
70
|
-
const menuClicked = menuEl && menuEl.contains(e.target);
|
|
71
|
-
if (collapseOnSelect || !menuClicked) {
|
|
72
|
-
setExpanded(false);
|
|
73
|
-
}
|
|
74
|
-
};
|
|
75
|
-
if (expanded) {
|
|
76
|
-
onExpand();
|
|
77
|
-
// On React 18 useEffect hooks runs synchronous instead of asynchronous as React 17 or prior
|
|
78
|
-
// causing the event listener to be attached to the document at the same time that the dialog
|
|
79
|
-
// opens. Adding a timeout so the event is attached after the click event that opened the modal
|
|
80
|
-
// is finished.
|
|
81
|
-
setTimeout(() => {
|
|
82
|
-
document.addEventListener('click', handleBackgroundClick, false);
|
|
83
|
-
});
|
|
84
|
-
}
|
|
85
|
-
else if (expanded === false) {
|
|
86
|
-
onCollapse();
|
|
87
|
-
}
|
|
88
|
-
return () => document.removeEventListener('click', handleBackgroundClick, false);
|
|
89
|
-
}, [expanded]);
|
|
90
|
-
(0, react_1.useEffect)(() => {
|
|
91
|
-
setMenuId((0, random_id_1.randomId)());
|
|
92
|
-
}, []);
|
|
93
|
-
const handleMenuKeydown = (e) => {
|
|
94
|
-
(0, event_utils_1.handleEscapeKeydown)(e, () => {
|
|
95
|
-
var _a;
|
|
96
|
-
setExpanded(false);
|
|
97
|
-
(_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
98
|
-
});
|
|
99
|
-
};
|
|
100
|
-
const buttonProps = Object.assign({ ref: buttonRef, className: 'menu-button__button', 'aria-expanded': !!expanded, 'aria-haspopup': true, 'aria-label': a11yText, 'aria-controls': menuId, 'aria-labelledby': prefixId, onClick: e => {
|
|
101
|
-
setExpanded(!expanded);
|
|
102
|
-
onClick(e);
|
|
103
|
-
} }, rest);
|
|
104
|
-
const handleOnChange = (e, eventProps) => {
|
|
105
|
-
if (type === 'radio' || type === 'checkbox') {
|
|
106
|
-
const newCheckedIndexes = checkedIndexes.map((_, i) => eventProps.indexes.includes(i));
|
|
107
|
-
setCheckedIndexes(newCheckedIndexes);
|
|
108
|
-
}
|
|
109
|
-
onChange(e, eventProps);
|
|
110
|
-
};
|
|
111
|
-
const checkedIndex = () => {
|
|
112
|
-
const index = checkedIndexes.findIndex(Boolean);
|
|
113
|
-
return index > -1 ? index : checked;
|
|
114
|
-
};
|
|
115
|
-
return (react_1.default.createElement("span", { className: wrapperClasses },
|
|
116
|
-
variant === 'overflow' ?
|
|
117
|
-
react_1.default.createElement(ebay_icon_button_1.EbayIconButton, Object.assign({ icon: "overflowVertical16" }, buttonProps)) :
|
|
118
|
-
react_1.default.createElement(ebay_button_1.EbayButton, Object.assign({ variant: variant === 'form' ? 'form' : undefined, bodyState: noToggleIcon ? undefined : 'expand' }, buttonProps), label),
|
|
119
|
-
expanded &&
|
|
120
|
-
react_1.default.createElement(ebay_menu_1.EbayMenu, { baseEl: "div", ref: menuRef, type: type, className: menuClasses, tabIndex: -1, id: menuId, autofocus: true, checked: checkedIndex(), onKeyDown: handleMenuKeydown, onChange: handleOnChange, onSelect: onSelect }, menuItems.map((item, i) => (0, react_1.cloneElement)(item, Object.assign(Object.assign({}, item.props), { className: (0, classnames_1.default)(item.props.className, 'menu-button__item'), key: i, checked: checkedIndexes[i] }))))));
|
|
121
|
-
};
|
|
122
|
-
function labelWithPrefixAndIcon({ text, prefixId, prefixLabel, menuButtonLabel, icon }) {
|
|
123
|
-
const textLabelElement = text.length ? react_1.default.createElement("span", null, text) : null;
|
|
124
|
-
const prefixLabelElement = !prefixId && prefixLabel && [
|
|
125
|
-
react_1.default.createElement("span", { className: "menu-button-prefix-label" }, prefixLabel),
|
|
126
|
-
react_1.default.createElement(react_1.default.Fragment, null, "\u00A0")
|
|
127
|
-
];
|
|
128
|
-
const labelWithPrefix = [prefixLabelElement, menuButtonLabel || textLabelElement];
|
|
129
|
-
const labelArray = [icon, labelWithPrefix].flat().filter(Boolean);
|
|
130
|
-
return labelArray.length ? labelArray : null;
|
|
131
|
-
}
|
|
132
|
-
exports.default = EbayMenuButton;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.EbayNoticeContent = void 0;
|
|
7
|
-
var notice_content_1 = require("./notice-content");
|
|
8
|
-
Object.defineProperty(exports, "EbayNoticeContent", { enumerable: true, get: function () { return __importDefault(notice_content_1).default; } });
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.EbayNoticeTitle = void 0;
|
|
7
|
-
var notice_title_1 = require("./notice-title");
|
|
8
|
-
Object.defineProperty(exports, "EbayNoticeTitle", { enumerable: true, get: function () { return __importDefault(notice_title_1).default; } });
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const react_1 = __importDefault(require("react"));
|
|
7
|
-
const EbayNoticeTitle = ({ children }) => (react_1.default.createElement("span", { className: "page-notice__title" }, children));
|
|
8
|
-
exports.default = EbayNoticeTitle;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.EbayNoticeContent = exports.EbayNoticeTitle = void 0;
|
|
4
|
-
var ebay_notice_title_1 = require("./components/ebay-notice-title");
|
|
5
|
-
Object.defineProperty(exports, "EbayNoticeTitle", { enumerable: true, get: function () { return ebay_notice_title_1.EbayNoticeTitle; } });
|
|
6
|
-
var ebay_notice_content_1 = require("./components/ebay-notice-content");
|
|
7
|
-
Object.defineProperty(exports, "EbayNoticeContent", { enumerable: true, get: function () { return ebay_notice_content_1.EbayNoticeContent; } });
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.EbayNoticeContent = exports.EbayPageNoticeCTA = exports.EbayPageNoticeFooter = exports.EbayPageNoticeTitle = exports.EbayPageNotice = void 0;
|
|
7
|
-
var page_notice_1 = require("./page-notice");
|
|
8
|
-
Object.defineProperty(exports, "EbayPageNotice", { enumerable: true, get: function () { return __importDefault(page_notice_1).default; } });
|
|
9
|
-
var page_notice_title_1 = require("./page-notice-title");
|
|
10
|
-
Object.defineProperty(exports, "EbayPageNoticeTitle", { enumerable: true, get: function () { return __importDefault(page_notice_title_1).default; } });
|
|
11
|
-
var page_notice_footer_1 = require("./page-notice-footer");
|
|
12
|
-
Object.defineProperty(exports, "EbayPageNoticeFooter", { enumerable: true, get: function () { return __importDefault(page_notice_footer_1).default; } });
|
|
13
|
-
var page_notice_cta_1 = require("./page-notice-cta");
|
|
14
|
-
Object.defineProperty(exports, "EbayPageNoticeCTA", { enumerable: true, get: function () { return __importDefault(page_notice_cta_1).default; } });
|
|
15
|
-
var ebay_notice_content_1 = require("../ebay-notice-base/components/ebay-notice-content");
|
|
16
|
-
Object.defineProperty(exports, "EbayNoticeContent", { enumerable: true, get: function () { return ebay_notice_content_1.EbayNoticeContent; } });
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const react_1 = __importDefault(require("react"));
|
|
7
|
-
const notice_cta_1 = __importDefault(require("../common/notice-utils/notice-cta"));
|
|
8
|
-
const EbayPageNoticeCTA = ({ className, children }) => (react_1.default.createElement(notice_cta_1.default, { className: className, type: "page" }, children));
|
|
9
|
-
exports.default = EbayPageNoticeCTA;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const react_1 = __importDefault(require("react"));
|
|
7
|
-
const notice_footer_1 = __importDefault(require("../common/notice-utils/notice-footer"));
|
|
8
|
-
const EbayPageNoticeFooter = ({ className, children }) => (react_1.default.createElement(notice_footer_1.default, { className: className, type: "page" }, children));
|
|
9
|
-
exports.default = EbayPageNoticeFooter;
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
-
var t = {};
|
|
4
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
-
t[p] = s[p];
|
|
6
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
-
t[p[i]] = s[p[i]];
|
|
10
|
-
}
|
|
11
|
-
return t;
|
|
12
|
-
};
|
|
13
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
const react_1 = __importDefault(require("react"));
|
|
18
|
-
const notice_title_1 = __importDefault(require("../common/notice-utils/notice-title"));
|
|
19
|
-
const EbayPageNoticeTitle = (_a) => {
|
|
20
|
-
var { className, as, children } = _a, rest = __rest(_a, ["className", "as", "children"]);
|
|
21
|
-
return (react_1.default.createElement(notice_title_1.default, Object.assign({}, rest, { className: className, as: as, type: "page" }), children));
|
|
22
|
-
};
|
|
23
|
-
exports.default = EbayPageNoticeTitle;
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
26
|
-
var t = {};
|
|
27
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
28
|
-
t[p] = s[p];
|
|
29
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
30
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
31
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
32
|
-
t[p[i]] = s[p[i]];
|
|
33
|
-
}
|
|
34
|
-
return t;
|
|
35
|
-
};
|
|
36
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
37
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
38
|
-
};
|
|
39
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
|
-
const react_1 = __importStar(require("react"));
|
|
41
|
-
const notice_content_1 = __importDefault(require("../common/notice-utils/notice-content"));
|
|
42
|
-
const ebay_notice_content_1 = require("../ebay-notice-base/components/ebay-notice-content");
|
|
43
|
-
const ebay_icon_1 = require("../ebay-icon");
|
|
44
|
-
const index_1 = require("./index");
|
|
45
|
-
const EbayPageNotice = (_a) => {
|
|
46
|
-
var { id, status = 'general', children, a11yDismissText, 'aria-label': ariaLabel, onDismiss = () => { } } = _a, rest = __rest(_a, ["id", "status", "children", "a11yDismissText", 'aria-label', "onDismiss"]);
|
|
47
|
-
const [dismissed, setDismissed] = (0, react_1.useState)(false);
|
|
48
|
-
const childrenArray = react_1.default.Children.toArray(children);
|
|
49
|
-
const content = childrenArray.find((child) => child.type === ebay_notice_content_1.EbayNoticeContent);
|
|
50
|
-
if (!content) {
|
|
51
|
-
throw new Error(`EbayPageNotice: Please use a EbayNoticeContent that defines the content of the notice`);
|
|
52
|
-
}
|
|
53
|
-
const handleDismissed = (event) => {
|
|
54
|
-
setDismissed(true);
|
|
55
|
-
onDismiss(event);
|
|
56
|
-
};
|
|
57
|
-
return dismissed ? null : (react_1.default.createElement("section", Object.assign({}, rest, { "aria-labelledby": id || `${status}-status`, className: `page-notice ${status !== `general` ? `page-notice--${status}` : ``}`, role: "region" }),
|
|
58
|
-
status !== `general` ? (react_1.default.createElement("div", { className: "page-notice__header", id: id || `${status}-status` },
|
|
59
|
-
react_1.default.createElement(ebay_icon_1.EbayIcon, { name: `${status}Filled16`, a11yText: ariaLabel, a11yVariant: "label" }))) : null,
|
|
60
|
-
react_1.default.createElement(notice_content_1.default, Object.assign({}, content.props, { type: "page" })),
|
|
61
|
-
children,
|
|
62
|
-
a11yDismissText && (react_1.default.createElement(index_1.EbayPageNoticeFooter, null,
|
|
63
|
-
react_1.default.createElement("button", { "aria-label": a11yDismissText, className: "fake-link page-notice__dismiss", onClick: handleDismissed },
|
|
64
|
-
react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "close16" }))))));
|
|
65
|
-
};
|
|
66
|
-
exports.default = EbayPageNotice;
|
package/ebay-pagination/const.js
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.TRAILING_SPACE_WITH_DOT = exports.LEADING_SPACE_WITH_DOT = exports.MIN_VISIBLE_ITEMS = exports.MAX_PAGES = exports.MIN_PAGES = void 0;
|
|
4
|
-
exports.MIN_PAGES = 1;
|
|
5
|
-
exports.MAX_PAGES = 9;
|
|
6
|
-
exports.MIN_VISIBLE_ITEMS = 4;
|
|
7
|
-
exports.LEADING_SPACE_WITH_DOT = 2;
|
|
8
|
-
exports.TRAILING_SPACE_WITH_DOT = exports.MAX_PAGES - exports.LEADING_SPACE_WITH_DOT;
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.getMaxWidth = exports.calcPageState = exports.pageNumbersAround = void 0;
|
|
4
|
-
const const_1 = require("./const");
|
|
5
|
-
function pageNumbersAround(totalPages, selectedPage, maxVisiblePages = totalPages, variant = null) {
|
|
6
|
-
const withDots = variant === 'show-last' || (variant === 'overflow' && totalPages > const_1.MAX_PAGES);
|
|
7
|
-
const hasLeadingDots = variant === 'overflow' && totalPages > const_1.MAX_PAGES;
|
|
8
|
-
const visibleItems = Math.min(maxVisiblePages, totalPages);
|
|
9
|
-
const startIndexWithoutDots = Math.max(0, selectedPage - Math.ceil((visibleItems - 1) / 2));
|
|
10
|
-
const startIndexWithDots = visibleItems < const_1.MIN_VISIBLE_ITEMS ? selectedPage :
|
|
11
|
-
Math.max(0, selectedPage - Math.floor((visibleItems - 1) / 2));
|
|
12
|
-
const endIndex = (withDots ? startIndexWithDots : startIndexWithoutDots) + visibleItems;
|
|
13
|
-
const closeToEnd = endIndex >= totalPages;
|
|
14
|
-
const closeToFront = selectedPage <= const_1.MIN_VISIBLE_ITEMS;
|
|
15
|
-
const visibleRangeWithDots = (start, end) => {
|
|
16
|
-
const items = visibleRange(totalPages, start, end);
|
|
17
|
-
if (visibleItems > 2) {
|
|
18
|
-
items[end - 2] = 'dots';
|
|
19
|
-
items[end - 1] = 'hidden';
|
|
20
|
-
items[totalPages - 1] = 'visible';
|
|
21
|
-
}
|
|
22
|
-
else if (visibleItems > 1) {
|
|
23
|
-
items[end - 1] = 'dots';
|
|
24
|
-
}
|
|
25
|
-
return items;
|
|
26
|
-
};
|
|
27
|
-
// middle show item[1] (...) and item[item.length - 1] (...)
|
|
28
|
-
const visibleRangeWithOverflowDots = (start, end) => {
|
|
29
|
-
// Following Dot
|
|
30
|
-
if (closeToFront) {
|
|
31
|
-
return visibleRangeWithDots(0, end);
|
|
32
|
-
// Leading Dot
|
|
33
|
-
}
|
|
34
|
-
else if (closeToEnd) {
|
|
35
|
-
const items = visibleRange(totalPages, totalPages - const_1.TRAILING_SPACE_WITH_DOT, totalPages);
|
|
36
|
-
items[0] = 'visible';
|
|
37
|
-
items[1] = 'dots';
|
|
38
|
-
return items;
|
|
39
|
-
}
|
|
40
|
-
// Middle case with Leading & Following Dots
|
|
41
|
-
const items = visibleRange(totalPages, selectedPage - const_1.LEADING_SPACE_WITH_DOT, selectedPage + const_1.LEADING_SPACE_WITH_DOT + 1);
|
|
42
|
-
items[0] = 'visible';
|
|
43
|
-
items[1] = closeToFront ? 'visible' : 'dots';
|
|
44
|
-
items[totalPages - 2] = 'dots';
|
|
45
|
-
items[totalPages - 1] = 'visible';
|
|
46
|
-
return items;
|
|
47
|
-
};
|
|
48
|
-
if (closeToEnd && totalPages <= const_1.MAX_PAGES) {
|
|
49
|
-
return visibleRange(totalPages, totalPages - visibleItems);
|
|
50
|
-
}
|
|
51
|
-
if (withDots) {
|
|
52
|
-
return hasLeadingDots ?
|
|
53
|
-
visibleRangeWithOverflowDots(startIndexWithDots, endIndex) :
|
|
54
|
-
visibleRangeWithDots(startIndexWithDots, endIndex);
|
|
55
|
-
}
|
|
56
|
-
return visibleRange(totalPages, startIndexWithoutDots, endIndex);
|
|
57
|
-
}
|
|
58
|
-
exports.pageNumbersAround = pageNumbersAround;
|
|
59
|
-
function calcPageState(selectedPage, visiblePages, totalPages, variant = 'show-range') {
|
|
60
|
-
if (selectedPage === -1) {
|
|
61
|
-
return [];
|
|
62
|
-
}
|
|
63
|
-
const adjustedNumPages = variant === 'overflow' ? const_1.MAX_PAGES :
|
|
64
|
-
clamp(Math.min(totalPages, visiblePages), const_1.MIN_PAGES, const_1.MAX_PAGES);
|
|
65
|
-
return pageNumbersAround(totalPages, selectedPage - 1, adjustedNumPages, variant);
|
|
66
|
-
}
|
|
67
|
-
exports.calcPageState = calcPageState;
|
|
68
|
-
function clamp(n, min, max) {
|
|
69
|
-
// eslint-disable-next-line no-nested-ternary
|
|
70
|
-
return n <= min ? min : n >= max ? max : n;
|
|
71
|
-
}
|
|
72
|
-
function visibleRange(totalItems, start, end) {
|
|
73
|
-
return Array(totalItems)
|
|
74
|
-
.fill('hidden')
|
|
75
|
-
.fill('visible', start, end);
|
|
76
|
-
}
|
|
77
|
-
/**
|
|
78
|
-
* Calculates the maximum width for an element within its container.
|
|
79
|
-
*
|
|
80
|
-
* Based on eBayUI Core Marko implementation.
|
|
81
|
-
* See https://github.com/eBay/ebayui-core/blob/v8.6.0/src/components/ebay-pagination/component.js#L119-L132
|
|
82
|
-
*/
|
|
83
|
-
function getMaxWidth(el) {
|
|
84
|
-
if (!el) {
|
|
85
|
-
return 0;
|
|
86
|
-
}
|
|
87
|
-
el.style.width = '100vw';
|
|
88
|
-
const result = el.offsetWidth;
|
|
89
|
-
el.style.width = null;
|
|
90
|
-
return result;
|
|
91
|
-
}
|
|
92
|
-
exports.getMaxWidth = getMaxWidth;
|
package/ebay-pagination/index.js
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.EbayPaginationItem = exports.EbayPagination = void 0;
|
|
7
|
-
var pagination_1 = require("./pagination");
|
|
8
|
-
Object.defineProperty(exports, "EbayPagination", { enumerable: true, get: function () { return __importDefault(pagination_1).default; } });
|
|
9
|
-
var pagination_item_1 = require("./pagination-item");
|
|
10
|
-
Object.defineProperty(exports, "EbayPaginationItem", { enumerable: true, get: function () { return __importDefault(pagination_item_1).default; } });
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
-
var t = {};
|
|
4
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
-
t[p] = s[p];
|
|
6
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
-
t[p[i]] = s[p[i]];
|
|
10
|
-
}
|
|
11
|
-
return t;
|
|
12
|
-
};
|
|
13
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
const react_1 = __importDefault(require("react"));
|
|
18
|
-
const ebay_icon_1 = require("../ebay-icon");
|
|
19
|
-
const component_utils_1 = require("../common/component-utils");
|
|
20
|
-
const classnames_1 = __importDefault(require("classnames"));
|
|
21
|
-
const EbayPaginationItem = (_a) => {
|
|
22
|
-
var { pageIndex = 0, key, current, disabled, type = 'page', href, hide, children, a11yPreviousText = 'Previous page', a11yNextText = 'Next page', onSelect, onNext, onPrevious, className, style, forwardedRef } = _a, rest = __rest(_a, ["pageIndex", "key", "current", "disabled", "type", "href", "hide", "children", "a11yPreviousText", "a11yNextText", "onSelect", "onNext", "onPrevious", "className", "style", "forwardedRef"]);
|
|
23
|
-
const handlePageNumber = (e) => {
|
|
24
|
-
var _a;
|
|
25
|
-
onSelect(e, { value: ((_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.innerText) || '', index: pageIndex });
|
|
26
|
-
};
|
|
27
|
-
const handleNextPage = (e) => {
|
|
28
|
-
if (!e.currentTarget.getAttribute('aria-disabled')) {
|
|
29
|
-
onNext(e);
|
|
30
|
-
}
|
|
31
|
-
};
|
|
32
|
-
const handlePreviousPage = (e) => {
|
|
33
|
-
if (!e.currentTarget.getAttribute('aria-disabled')) {
|
|
34
|
-
onPrevious(e);
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
const isAnchor = !!href;
|
|
38
|
-
const ButtonOrAnchor = isAnchor ? 'a' : 'button';
|
|
39
|
-
const iconClassName = isAnchor ? 'icon-link' : 'icon-btn';
|
|
40
|
-
const arrowStyle = Object.assign(Object.assign({}, style), { minWidth: '40px' });
|
|
41
|
-
switch (type) {
|
|
42
|
-
case 'previous':
|
|
43
|
-
return (react_1.default.createElement(ButtonOrAnchor, Object.assign({}, rest, { ref: forwardedRef, "aria-disabled": disabled ? 'true' : undefined, "aria-label": a11yPreviousText, href: disabled ? undefined : href, className: (0, classnames_1.default)(iconClassName, 'pagination__previous'), style: arrowStyle, onClick: handlePreviousPage }),
|
|
44
|
-
react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "arrowLeft16" })));
|
|
45
|
-
case 'next':
|
|
46
|
-
return (react_1.default.createElement(ButtonOrAnchor, Object.assign({}, rest, { ref: forwardedRef, "aria-disabled": disabled ? 'true' : undefined, "aria-label": a11yNextText, href: disabled ? undefined : href, className: (0, classnames_1.default)(iconClassName, 'pagination__next'), style: arrowStyle, onClick: handleNextPage }),
|
|
47
|
-
react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "arrowRight16" })));
|
|
48
|
-
case 'separator':
|
|
49
|
-
return (react_1.default.createElement("span", { key: key, style: style, className: "pagination__item", ref: forwardedRef, role: "separator" }, children));
|
|
50
|
-
default:
|
|
51
|
-
return (react_1.default.createElement("li", Object.assign({}, rest, { hidden: hide }),
|
|
52
|
-
react_1.default.createElement(ButtonOrAnchor, { ref: forwardedRef, "aria-current": current ? 'page' : undefined, href: href, className: "pagination__item", style: style, key: key, onClick: handlePageNumber }, children)));
|
|
53
|
-
}
|
|
54
|
-
};
|
|
55
|
-
exports.default = (0, component_utils_1.withForwardRef)(EbayPaginationItem);
|
|
@@ -1,146 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
26
|
-
var t = {};
|
|
27
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
28
|
-
t[p] = s[p];
|
|
29
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
30
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
31
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
32
|
-
t[p[i]] = s[p[i]];
|
|
33
|
-
}
|
|
34
|
-
return t;
|
|
35
|
-
};
|
|
36
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
37
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
38
|
-
};
|
|
39
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
|
-
const react_1 = __importStar(require("react"));
|
|
41
|
-
const ebay_fake_menu_button_1 = require("../ebay-fake-menu-button");
|
|
42
|
-
const classnames_1 = __importDefault(require("classnames"));
|
|
43
|
-
const debounce_1 = require("../common/debounce");
|
|
44
|
-
const helpers_1 = require("./helpers");
|
|
45
|
-
const component_utils_1 = require("../common/component-utils");
|
|
46
|
-
const ebay_icon_1 = require("../ebay-icon");
|
|
47
|
-
const EbayPagination = (_a) => {
|
|
48
|
-
var { id = 'ebay-pagination', className, a11yCurrentText = 'Pagination - Current Page', a11yPreviousText = 'Previous page', a11yNextText = 'Next page', variant = 'show-range', fluid = false, onPrevious = () => { }, onNext = () => { }, onSelect = () => { }, children } = _a, rest = __rest(_a, ["id", "className", "a11yCurrentText", "a11yPreviousText", "a11yNextText", "variant", "fluid", "onPrevious", "onNext", "onSelect", "children"]);
|
|
49
|
-
const paginationContainerRef = (0, react_1.useRef)(null);
|
|
50
|
-
const childPageRefs = (0, react_1.useRef)([]);
|
|
51
|
-
childPageRefs.current = react_1.Children.map(children, react_1.createRef);
|
|
52
|
-
const totalPages = (0, component_utils_1.filterBy)(children, ({ props }) => props.type === undefined || props.type === 'page').length;
|
|
53
|
-
const itemWidthRef = (0, react_1.useRef)(0);
|
|
54
|
-
const arrowWidthRef = (0, react_1.useRef)(0);
|
|
55
|
-
const getNumOfVisiblePageItems = () => {
|
|
56
|
-
var _a, _b, _c, _d;
|
|
57
|
-
const pageArrowWidth = arrowWidthRef.current || ((_b = (_a = childPageRefs.current[0]) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.offsetWidth);
|
|
58
|
-
arrowWidthRef.current = pageArrowWidth; // cache arrow width since it should be static
|
|
59
|
-
const pageItemWidth = itemWidthRef.current || ((_d = (_c = childPageRefs.current[1]) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.offsetWidth);
|
|
60
|
-
itemWidthRef.current = pageItemWidth; // cache item width since it should be static
|
|
61
|
-
return pageItemWidth ?
|
|
62
|
-
Math.floor(((0, helpers_1.getMaxWidth)(paginationContainerRef.current) - pageArrowWidth * 2) / pageItemWidth) :
|
|
63
|
-
0;
|
|
64
|
-
};
|
|
65
|
-
const [page, setPage] = (0, react_1.useState)([]);
|
|
66
|
-
const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(0);
|
|
67
|
-
// selectedPageIndexFromDotMenu: override pageIndex on pagination with dot menu value
|
|
68
|
-
const updatePages = (selectedPageIndexFromDotMenu) => {
|
|
69
|
-
const selectedPageIndex = selectedPageIndexFromDotMenu || childPageRefs.current.findIndex(pageRef => { var _a; return ((_a = pageRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-current')) === 'page'; });
|
|
70
|
-
const visiblePageItems = getNumOfVisiblePageItems();
|
|
71
|
-
const pageState = (0, helpers_1.calcPageState)(selectedPageIndex, visiblePageItems, totalPages, variant);
|
|
72
|
-
setSelectedIndex(selectedPageIndex);
|
|
73
|
-
setPage(['hidden', ...pageState]);
|
|
74
|
-
};
|
|
75
|
-
(0, react_1.useEffect)(() => {
|
|
76
|
-
const debouncedUpdate = (0, debounce_1.debounce)(updatePages, 16);
|
|
77
|
-
updatePages();
|
|
78
|
-
window.addEventListener('resize', () => debouncedUpdate());
|
|
79
|
-
return () => {
|
|
80
|
-
window.removeEventListener('resize', () => debouncedUpdate());
|
|
81
|
-
};
|
|
82
|
-
}, [children]);
|
|
83
|
-
const createChildItems = (itemType) => {
|
|
84
|
-
let pageIndex = 0;
|
|
85
|
-
const firstDotItems = [];
|
|
86
|
-
const secondDotItems = [];
|
|
87
|
-
const allDotItems = [];
|
|
88
|
-
const firstDot = page.indexOf('dots');
|
|
89
|
-
const lastDot = page.lastIndexOf('dots');
|
|
90
|
-
return react_1.Children.map(children, (item, index) => {
|
|
91
|
-
const { type = 'page', current, disabled, href, children: text } = item.props;
|
|
92
|
-
const isDot = page[index] === 'dots';
|
|
93
|
-
const key = `${id}-item-${index}`;
|
|
94
|
-
const hide = page[index] === 'hidden';
|
|
95
|
-
const isSeparator = isDot && type === 'page';
|
|
96
|
-
const newProps = {
|
|
97
|
-
current, disabled, href,
|
|
98
|
-
type: isSeparator ? 'separator' : type,
|
|
99
|
-
children: isDot ? react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "overflowHorizontal24", focusable: false }) : text,
|
|
100
|
-
pageIndex: type === 'page' ? pageIndex++ : undefined,
|
|
101
|
-
key,
|
|
102
|
-
hide,
|
|
103
|
-
onPrevious, onNext, onSelect, a11yPreviousText, a11yNextText,
|
|
104
|
-
ref: childPageRefs.current[index]
|
|
105
|
-
};
|
|
106
|
-
// include hidden numbers & number of (...)itself
|
|
107
|
-
if ((hide || isDot) && type === 'page') {
|
|
108
|
-
const itemComponent = (react_1.default.createElement(ebay_fake_menu_button_1.EbayFakeMenuButtonItem, { key: key, href: href, onClick: event => {
|
|
109
|
-
if (!href) {
|
|
110
|
-
event.preventDefault();
|
|
111
|
-
}
|
|
112
|
-
const currentTarget = event.currentTarget;
|
|
113
|
-
onSelect(event, { value: (currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.innerText) || '', index: pageIndex });
|
|
114
|
-
updatePages(Number(currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.innerText));
|
|
115
|
-
} }, text));
|
|
116
|
-
if (firstDot === lastDot) {
|
|
117
|
-
allDotItems.push(itemComponent);
|
|
118
|
-
}
|
|
119
|
-
if (selectedIndex - 2 > firstDot && index < selectedIndex) {
|
|
120
|
-
firstDotItems.push(itemComponent);
|
|
121
|
-
}
|
|
122
|
-
if (selectedIndex + 2 < lastDot && index > selectedIndex) {
|
|
123
|
-
secondDotItems.push(itemComponent);
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
if (itemType === 'page' && isDot && variant === 'overflow') {
|
|
127
|
-
let childComponent = allDotItems;
|
|
128
|
-
if (firstDot !== lastDot) {
|
|
129
|
-
childComponent = index === 2 ? firstDotItems : secondDotItems;
|
|
130
|
-
}
|
|
131
|
-
return (react_1.default.createElement("li", { key: key },
|
|
132
|
-
react_1.default.createElement("span", { className: "pagination__item", role: "separator" },
|
|
133
|
-
react_1.default.createElement(ebay_fake_menu_button_1.EbayFakeMenuButton, { a11yText: "Menu", borderless: true, variant: "overflow", noToggleIcon: true }, childComponent))));
|
|
134
|
-
}
|
|
135
|
-
return itemType === type ? (0, react_1.cloneElement)(item, newProps) : null;
|
|
136
|
-
});
|
|
137
|
-
};
|
|
138
|
-
const headingId = `${id}-pagination-heading`;
|
|
139
|
-
return (react_1.default.createElement("nav", Object.assign({}, rest, { role: "navigation", className: (0, classnames_1.default)(className, 'pagination', { 'pagination--fluid': fluid }), "aria-labelledby": headingId, ref: paginationContainerRef }),
|
|
140
|
-
react_1.default.createElement("span", { "aria-live": "polite", role: "status" },
|
|
141
|
-
react_1.default.createElement("h2", { className: "clipped", id: headingId }, a11yCurrentText)),
|
|
142
|
-
createChildItems('previous'),
|
|
143
|
-
react_1.default.createElement("ol", { className: "pagination__items" }, createChildItems('page')),
|
|
144
|
-
createChildItems('next')));
|
|
145
|
-
};
|
|
146
|
-
exports.default = EbayPagination;
|
package/ebay-pagination/types.js
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.EbayPanelDialog = void 0;
|
|
7
|
-
var panel_dialog_1 = require("./panel-dialog");
|
|
8
|
-
Object.defineProperty(exports, "EbayPanelDialog", { enumerable: true, get: function () { return __importDefault(panel_dialog_1).default; } });
|