@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,59 +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
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
|
-
const react_1 = __importStar(require("react"));
|
|
38
|
-
const component_utils_1 = require("../common/component-utils");
|
|
39
|
-
const helpers_1 = require("./helpers");
|
|
40
|
-
const EbayCarouselItem = (_a) => {
|
|
41
|
-
var { slideWidth, offset, forwardedRef, children } = _a, rest = __rest(_a, ["slideWidth", "offset", "forwardedRef", "children"]);
|
|
42
|
-
const itemRef = (0, react_1.useRef)();
|
|
43
|
-
const [isVisible, setIsVisible] = (0, react_1.useState)(false);
|
|
44
|
-
(0, react_1.useImperativeHandle)(forwardedRef, () => {
|
|
45
|
-
if (!itemRef.current)
|
|
46
|
-
return;
|
|
47
|
-
const { left, right } = (0, helpers_1.getRelativeRects)(itemRef.current);
|
|
48
|
-
const fullyVisible = left === undefined ||
|
|
49
|
-
(left - offset >= -0.01 && right - offset <= slideWidth + 0.01);
|
|
50
|
-
setIsVisible(fullyVisible);
|
|
51
|
-
return {
|
|
52
|
-
left,
|
|
53
|
-
right,
|
|
54
|
-
fullyVisible
|
|
55
|
-
};
|
|
56
|
-
}, [slideWidth, offset]);
|
|
57
|
-
return (react_1.default.createElement("li", Object.assign({ ref: itemRef, "aria-hidden": !isVisible }, rest), children));
|
|
58
|
-
};
|
|
59
|
-
exports.default = (0, component_utils_1.withForwardRef)(EbayCarouselItem);
|
|
@@ -1,81 +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 __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
-
};
|
|
28
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
-
const react_1 = __importStar(require("react"));
|
|
30
|
-
const classnames_1 = __importDefault(require("classnames"));
|
|
31
|
-
const helpers_1 = require("./helpers");
|
|
32
|
-
const scroll_to_transition_1 = require("./scroll-to-transition");
|
|
33
|
-
const CarouselList = ({ gap = 16, itemsPerSlide, slideWidth, offset, activeIndex, nextControlDisabled, className, itemsRef, children, onSetActiveIndex, onScroll }) => {
|
|
34
|
-
const [translateLeft, setTranslateLeft] = (0, react_1.useState)(0);
|
|
35
|
-
const [skipScrolling, setSkipScrolling] = (0, react_1.useState)(false);
|
|
36
|
-
const [scrollTransitioning, setScrollTransitioning] = (0, react_1.useState)(false);
|
|
37
|
-
const listRef = (0, react_1.useRef)(null);
|
|
38
|
-
const scrollTimeout = (0, react_1.useRef)(null);
|
|
39
|
-
(0, react_1.useEffect)(() => {
|
|
40
|
-
const size = react_1.Children.count(children);
|
|
41
|
-
if (!size || !listRef.current)
|
|
42
|
-
return;
|
|
43
|
-
if (skipScrolling) {
|
|
44
|
-
setSkipScrolling(false);
|
|
45
|
-
return;
|
|
46
|
-
}
|
|
47
|
-
const list = listRef.current;
|
|
48
|
-
const isNativeScroll = (0, helpers_1.isNativeScrolling)(list);
|
|
49
|
-
if (isNativeScroll) {
|
|
50
|
-
setScrollTransitioning(true);
|
|
51
|
-
(0, scroll_to_transition_1.scrollTransition)(list, offset, () => setScrollTransitioning(false));
|
|
52
|
-
}
|
|
53
|
-
else {
|
|
54
|
-
setTranslateLeft(offset);
|
|
55
|
-
}
|
|
56
|
-
}, [offset]);
|
|
57
|
-
const handleFinishScrolling = (0, react_1.useCallback)(() => {
|
|
58
|
-
const scrollLeft = listRef.current.scrollLeft;
|
|
59
|
-
const closest = (0, helpers_1.getClosestIndex)(scrollLeft, itemsRef.current, slideWidth, itemsPerSlide, gap);
|
|
60
|
-
if (closest !== activeIndex) {
|
|
61
|
-
setSkipScrolling(true);
|
|
62
|
-
onSetActiveIndex(closest);
|
|
63
|
-
onScroll({ index: closest });
|
|
64
|
-
}
|
|
65
|
-
}, [listRef.current, itemsRef.current, slideWidth, activeIndex, onSetActiveIndex]);
|
|
66
|
-
const handleScroll = () => {
|
|
67
|
-
if (scrollTimeout.current) {
|
|
68
|
-
clearTimeout(scrollTimeout.current);
|
|
69
|
-
}
|
|
70
|
-
scrollTimeout.current = setTimeout(() => {
|
|
71
|
-
if (!scrollTransitioning) {
|
|
72
|
-
handleFinishScrolling();
|
|
73
|
-
}
|
|
74
|
-
}, 640);
|
|
75
|
-
};
|
|
76
|
-
return (react_1.default.createElement("div", { className: (0, classnames_1.default)('carousel__viewport', {
|
|
77
|
-
'carousel__viewport--mask': !nextControlDisabled
|
|
78
|
-
}, className) },
|
|
79
|
-
react_1.default.createElement("ul", { className: "carousel__list", ref: listRef, onScroll: handleScroll, style: { transform: `translate3d(${-translateLeft}px, 0, 0)` } }, (0, helpers_1.alterChildren)(children, itemsRef, itemsPerSlide, slideWidth, offset, gap))));
|
|
80
|
-
};
|
|
81
|
-
exports.default = CarouselList;
|
|
@@ -1,109 +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 carousel_control_button_1 = __importDefault(require("./carousel-control-button"));
|
|
43
|
-
const carousel_list_1 = __importDefault(require("./carousel-list"));
|
|
44
|
-
const helpers_1 = require("./helpers");
|
|
45
|
-
const debounce_1 = require("../common/debounce");
|
|
46
|
-
// TO-DO:
|
|
47
|
-
// Image slides
|
|
48
|
-
// Auto play (+ onPlay/onPause callbacks)
|
|
49
|
-
const EbayCarousel = (_a) => {
|
|
50
|
-
var { gap = 16, index = 0, itemsPerSlide: _itemsPerSlide, a11yPreviousText, a11yNextText, onScroll = () => { }, onNext = () => { }, onPrevious = () => { }, onSlide = () => { }, className, children } = _a, rest = __rest(_a, ["gap", "index", "itemsPerSlide", "a11yPreviousText", "a11yNextText", "onScroll", "onNext", "onPrevious", "onSlide", "className", "children"]);
|
|
51
|
-
const [activeIndex, setActiveIndex] = (0, react_1.useState)(index);
|
|
52
|
-
const [slideWidth, setSlideWidth] = (0, react_1.useState)(0);
|
|
53
|
-
const [offset, setOffset] = (0, react_1.useState)(0);
|
|
54
|
-
const containerRef = (0, react_1.useRef)(null);
|
|
55
|
-
const itemsRef = (0, react_1.useRef)([]);
|
|
56
|
-
const itemCount = react_1.Children.count(children);
|
|
57
|
-
const itemsPerSlide = Math.floor(_itemsPerSlide) || undefined;
|
|
58
|
-
const isSingleSlide = itemCount <= itemsPerSlide;
|
|
59
|
-
const prevControlDisabled = isSingleSlide || offset === 0;
|
|
60
|
-
const nextControlDisabled = isSingleSlide || (offset === (0, helpers_1.getMaxOffset)(itemsRef.current, slideWidth));
|
|
61
|
-
const handleResize = () => {
|
|
62
|
-
if (!containerRef.current)
|
|
63
|
-
return;
|
|
64
|
-
const { width: containerWidth } = containerRef.current.getBoundingClientRect();
|
|
65
|
-
setSlideWidth(containerWidth);
|
|
66
|
-
};
|
|
67
|
-
(0, react_1.useEffect)(() => {
|
|
68
|
-
window.addEventListener('resize', (0, debounce_1.debounce)(handleResize, 16));
|
|
69
|
-
return () => {
|
|
70
|
-
window.removeEventListener('resize', (0, debounce_1.debounce)(handleResize, 16));
|
|
71
|
-
};
|
|
72
|
-
}, []);
|
|
73
|
-
(0, react_1.useEffect)(() => {
|
|
74
|
-
setOffset((0, helpers_1.getOffset)(itemsRef.current, activeIndex, slideWidth));
|
|
75
|
-
}, [activeIndex, slideWidth]);
|
|
76
|
-
(0, react_1.useEffect)(() => {
|
|
77
|
-
if (index >= 0 && index <= itemCount - 1) {
|
|
78
|
-
setActiveIndex(index);
|
|
79
|
-
}
|
|
80
|
-
}, [index]);
|
|
81
|
-
(0, react_1.useEffect)(() => {
|
|
82
|
-
itemsRef.current = itemsRef.current.splice(0, itemCount);
|
|
83
|
-
}, [children]);
|
|
84
|
-
(0, react_1.useEffect)(() => {
|
|
85
|
-
const { width: containerWidth } = containerRef.current.getBoundingClientRect();
|
|
86
|
-
setSlideWidth(containerWidth);
|
|
87
|
-
}, [containerRef.current]);
|
|
88
|
-
const handleControlClick = (event, { direction }) => {
|
|
89
|
-
const nextIndex = (0, helpers_1.getNextIndex)(direction, activeIndex, itemsRef.current, slideWidth, itemsPerSlide);
|
|
90
|
-
const slide = (0, helpers_1.getSlide)(activeIndex, itemsPerSlide, nextIndex);
|
|
91
|
-
setActiveIndex(nextIndex);
|
|
92
|
-
if (direction === 'LEFT') {
|
|
93
|
-
onPrevious(event);
|
|
94
|
-
}
|
|
95
|
-
else {
|
|
96
|
-
onNext(event);
|
|
97
|
-
}
|
|
98
|
-
onSlide({ slide });
|
|
99
|
-
};
|
|
100
|
-
return (react_1.default.createElement("div", Object.assign({ className: (0, classnames_1.default)('carousel', className, {
|
|
101
|
-
'carousel--slides': itemsPerSlide,
|
|
102
|
-
'carousel--peek': itemsPerSlide % 1 === 0
|
|
103
|
-
}) }, rest),
|
|
104
|
-
react_1.default.createElement("div", { ref: containerRef, className: "carousel__container" },
|
|
105
|
-
react_1.default.createElement(carousel_control_button_1.default, { label: a11yPreviousText, type: "prev", disabled: prevControlDisabled, onClick: handleControlClick }),
|
|
106
|
-
react_1.default.createElement(carousel_list_1.default, { itemsRef: itemsRef, offset: offset, gap: gap, itemsPerSlide: itemsPerSlide, nextControlDisabled: nextControlDisabled, activeIndex: activeIndex, onScroll: onScroll, onSetActiveIndex: setActiveIndex, slideWidth: slideWidth }, children),
|
|
107
|
-
react_1.default.createElement(carousel_control_button_1.default, { type: "next", label: a11yNextText, disabled: nextControlDisabled, onClick: handleControlClick }))));
|
|
108
|
-
};
|
|
109
|
-
exports.default = EbayCarousel;
|
package/ebay-carousel/helpers.js
DELETED
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.getClosestIndex = exports.getNextIndex = exports.getSlide = exports.alterChildren = exports.getOffset = exports.getMaxOffset = exports.isNativeScrolling = exports.getRelativeRects = void 0;
|
|
4
|
-
const react_1 = require("react");
|
|
5
|
-
function getRelativeRects(el) {
|
|
6
|
-
const parent = el.parentElement;
|
|
7
|
-
const currentLeft = parent
|
|
8
|
-
? parent.firstElementChild.getBoundingClientRect().left
|
|
9
|
-
: 0;
|
|
10
|
-
const { left, right } = el.getBoundingClientRect();
|
|
11
|
-
return {
|
|
12
|
-
left: left - currentLeft,
|
|
13
|
-
right: right - currentLeft
|
|
14
|
-
};
|
|
15
|
-
}
|
|
16
|
-
exports.getRelativeRects = getRelativeRects;
|
|
17
|
-
const isNativeScrolling = (el) => getComputedStyle(el).overflowX !== 'visible';
|
|
18
|
-
exports.isNativeScrolling = isNativeScrolling;
|
|
19
|
-
const getMaxOffset = (items, slideWidth) => {
|
|
20
|
-
if (!items.length) {
|
|
21
|
-
return 0;
|
|
22
|
-
}
|
|
23
|
-
const lastEl = items[items.length - 1];
|
|
24
|
-
return Math.max(lastEl.right - slideWidth, 0) || 0;
|
|
25
|
-
};
|
|
26
|
-
exports.getMaxOffset = getMaxOffset;
|
|
27
|
-
const getOffset = (items, index, slideWidth) => {
|
|
28
|
-
if (!items.length) {
|
|
29
|
-
return 0;
|
|
30
|
-
}
|
|
31
|
-
return Math.min(items[index].left, (0, exports.getMaxOffset)(items, slideWidth)) || 0;
|
|
32
|
-
};
|
|
33
|
-
exports.getOffset = getOffset;
|
|
34
|
-
const alterChildren = (children, itemsRef, itemsPerSlide, slideWidth, offset, gap) => react_1.Children.map(children, (item, index) => {
|
|
35
|
-
const { style = {} } = item.props;
|
|
36
|
-
let itemWidth;
|
|
37
|
-
if (itemsPerSlide) {
|
|
38
|
-
const itemsInSlide = itemsPerSlide + (itemsPerSlide % 1);
|
|
39
|
-
itemWidth = `calc(${100 / itemsInSlide}% - ${((itemsInSlide - 1) * gap) / itemsInSlide}px)`;
|
|
40
|
-
}
|
|
41
|
-
const isStartOfSlide = itemsPerSlide ? index % itemsPerSlide === 0 : true;
|
|
42
|
-
return (0, react_1.cloneElement)(item, Object.assign(Object.assign({}, item.props), { slideWidth,
|
|
43
|
-
offset, ref: el => {
|
|
44
|
-
itemsRef.current[index] = el;
|
|
45
|
-
}, className: isStartOfSlide ? 'carousel__snap-point' : item.props.className, style: Object.assign(Object.assign({}, style), { width: itemWidth || style.width, marginRight: gap && index !== react_1.Children.count(children) - 1 ? `${gap}px` : style.marginRight }) }));
|
|
46
|
-
});
|
|
47
|
-
exports.alterChildren = alterChildren;
|
|
48
|
-
/**
|
|
49
|
-
* Ensures that an index is valid.
|
|
50
|
-
*/
|
|
51
|
-
const normalizeIndex = (index, items, itemsPerSlide) => {
|
|
52
|
-
if (index > 0) {
|
|
53
|
-
let result = index;
|
|
54
|
-
result %= items.length || 1; // Ensure index is within bounds.
|
|
55
|
-
result -= result % (itemsPerSlide || 1); // Round index to the nearest valid slide index.
|
|
56
|
-
result = Math.abs(result); // Ensure positive value.
|
|
57
|
-
return result;
|
|
58
|
-
}
|
|
59
|
-
return 0;
|
|
60
|
-
};
|
|
61
|
-
/**
|
|
62
|
-
* Gets the slide for a given index.
|
|
63
|
-
* Defaults to the current index if none provided.
|
|
64
|
-
*/
|
|
65
|
-
const getSlide = (activeIndex, itemsPerSlide, nextIndex = activeIndex) => {
|
|
66
|
-
if (!itemsPerSlide) {
|
|
67
|
-
return;
|
|
68
|
-
}
|
|
69
|
-
return Math.ceil(nextIndex / itemsPerSlide);
|
|
70
|
-
};
|
|
71
|
-
exports.getSlide = getSlide;
|
|
72
|
-
const getDelta = (direction) => direction === 'LEFT' ? -1 : 1;
|
|
73
|
-
const getNextIndex = (direction, activeIndex, items, slideWidth, itemsPerSlide) => {
|
|
74
|
-
let i = activeIndex;
|
|
75
|
-
let item;
|
|
76
|
-
// If going backward from 0, we go to the end.
|
|
77
|
-
if (direction === 'LEFT' && i === 0) {
|
|
78
|
-
i = items.length - 1;
|
|
79
|
-
}
|
|
80
|
-
else {
|
|
81
|
-
// Find the index of the next item that is not fully in view.
|
|
82
|
-
do {
|
|
83
|
-
const delta = getDelta(direction);
|
|
84
|
-
item = items[i += delta];
|
|
85
|
-
} while (item && item.fullyVisible);
|
|
86
|
-
if (direction === 'LEFT' && !itemsPerSlide) {
|
|
87
|
-
// If going left without items per slide, go as far left as possible while keeping this item fully in view.
|
|
88
|
-
const targetOffset = item.right - slideWidth;
|
|
89
|
-
do {
|
|
90
|
-
item = items[--i];
|
|
91
|
-
} while (item && item.left >= targetOffset);
|
|
92
|
-
i += 1;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
return normalizeIndex(i, items, itemsPerSlide);
|
|
96
|
-
};
|
|
97
|
-
exports.getNextIndex = getNextIndex;
|
|
98
|
-
const getClosestIndex = (scrollLeft, items, slideWidth, itemsPerSlide = 1, gap) => {
|
|
99
|
-
let closest;
|
|
100
|
-
if (scrollLeft >= (0, exports.getMaxOffset)(items, slideWidth) - gap) {
|
|
101
|
-
closest = items.length - 1;
|
|
102
|
-
}
|
|
103
|
-
else {
|
|
104
|
-
// Find the closest item using a binary search on each carousel slide.
|
|
105
|
-
const totalItems = items.length;
|
|
106
|
-
let low = 0;
|
|
107
|
-
let high = Math.ceil(totalItems / itemsPerSlide) - 1;
|
|
108
|
-
while (high - low > 1) {
|
|
109
|
-
const mid = Math.floor((low + high) / 2);
|
|
110
|
-
if (scrollLeft > items[mid * itemsPerSlide].left) {
|
|
111
|
-
low = mid;
|
|
112
|
-
}
|
|
113
|
-
else {
|
|
114
|
-
high = mid;
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
const deltaLow = Math.abs(scrollLeft - items[low * itemsPerSlide].left);
|
|
118
|
-
const deltaHigh = Math.abs(scrollLeft - items[high * itemsPerSlide].left);
|
|
119
|
-
closest = normalizeIndex((deltaLow > deltaHigh ? high : low) * itemsPerSlide, items, itemsPerSlide);
|
|
120
|
-
}
|
|
121
|
-
return closest;
|
|
122
|
-
};
|
|
123
|
-
exports.getClosestIndex = getClosestIndex;
|
package/ebay-carousel/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.EbayCarouselItem = exports.EbayCarousel = void 0;
|
|
7
|
-
var carousel_1 = require("./carousel");
|
|
8
|
-
Object.defineProperty(exports, "EbayCarousel", { enumerable: true, get: function () { return __importDefault(carousel_1).default; } });
|
|
9
|
-
var carousel_item_1 = require("./carousel-item");
|
|
10
|
-
Object.defineProperty(exports, "EbayCarouselItem", { enumerable: true, get: function () { return __importDefault(carousel_item_1).default; } });
|
|
@@ -1,102 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
// copy-pasted from @ebay/ebayui-core/dist/components/ebay-carousel/utils/scroll-transition
|
|
3
|
-
// todo: replace with ebayui-core-react/ebay-carousel when it's ready
|
|
4
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
5
|
-
exports.scrollTransition = void 0;
|
|
6
|
-
const onScrollEnd = (el, fn) => {
|
|
7
|
-
let timeout;
|
|
8
|
-
let frame;
|
|
9
|
-
let lastPos;
|
|
10
|
-
(function checkMoved() {
|
|
11
|
-
const { scrollLeft } = el;
|
|
12
|
-
if (lastPos !== scrollLeft) {
|
|
13
|
-
lastPos = scrollLeft;
|
|
14
|
-
timeout = setTimeout(() => {
|
|
15
|
-
frame = requestAnimationFrame(checkMoved);
|
|
16
|
-
}, 90);
|
|
17
|
-
return;
|
|
18
|
-
}
|
|
19
|
-
fn(lastPos);
|
|
20
|
-
}());
|
|
21
|
-
return () => {
|
|
22
|
-
clearTimeout(timeout);
|
|
23
|
-
cancelAnimationFrame(frame);
|
|
24
|
-
};
|
|
25
|
-
};
|
|
26
|
-
const supportsScrollBehavior = typeof window !== 'undefined' && 'scrollBehavior' in document.body.style;
|
|
27
|
-
/**
|
|
28
|
-
* Utility to animate scroll position of an element using an `ease-out` curve over 250ms.
|
|
29
|
-
* Cancels the animation if the user touches back down.
|
|
30
|
-
*
|
|
31
|
-
* @param {HTMLElement} el The element to scroll.
|
|
32
|
-
* @param {number} to The offset to animate to.
|
|
33
|
-
* @param {function} fn A function that will be called after the transition completes.
|
|
34
|
-
* @return {function} A function that cancels the transition.
|
|
35
|
-
*/
|
|
36
|
-
function scrollTransition(el, to, fn) {
|
|
37
|
-
if (supportsScrollBehavior) {
|
|
38
|
-
el.scrollTo({ left: to });
|
|
39
|
-
return onScrollEnd(el, fn);
|
|
40
|
-
}
|
|
41
|
-
let lastPosition;
|
|
42
|
-
let cancelInterruptTransition;
|
|
43
|
-
let frame = requestAnimationFrame(startTime => {
|
|
44
|
-
const { scrollLeft } = el;
|
|
45
|
-
const distance = to - scrollLeft;
|
|
46
|
-
const duration = 450;
|
|
47
|
-
(function animate(curTime) {
|
|
48
|
-
const delta = curTime - startTime;
|
|
49
|
-
if (delta > duration) {
|
|
50
|
-
el.scrollLeft = to;
|
|
51
|
-
cancel();
|
|
52
|
-
return fn();
|
|
53
|
-
}
|
|
54
|
-
el.scrollLeft = easeInOut(delta / duration) * distance + scrollLeft;
|
|
55
|
-
frame = requestAnimationFrame(animate);
|
|
56
|
-
}(startTime));
|
|
57
|
-
});
|
|
58
|
-
// The animation can be interrupted by new touch events.
|
|
59
|
-
el.addEventListener('touchstart', handleTouchStart);
|
|
60
|
-
return cancel;
|
|
61
|
-
function cancel() {
|
|
62
|
-
cancelAnimationFrame(frame);
|
|
63
|
-
if (lastPosition === undefined) {
|
|
64
|
-
cancelTouchStart();
|
|
65
|
-
}
|
|
66
|
-
else {
|
|
67
|
-
if (cancelInterruptTransition)
|
|
68
|
-
cancelInterruptTransition();
|
|
69
|
-
cancelTouchEnd();
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
function handleTouchStart() {
|
|
73
|
-
cancel();
|
|
74
|
-
lastPosition = el.scrollLeft;
|
|
75
|
-
// If we were interrupted by a touch start we wait for a touch end to see if we moved.
|
|
76
|
-
el.addEventListener('touchend', handleTouchEnd);
|
|
77
|
-
}
|
|
78
|
-
function handleTouchEnd() {
|
|
79
|
-
cancelTouchEnd();
|
|
80
|
-
// If we haven't moved because of the interrupt we continue to transition.
|
|
81
|
-
if (lastPosition === el.scrollLeft) {
|
|
82
|
-
cancelInterruptTransition = scrollTransition(el, to, fn);
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
function cancelTouchStart() {
|
|
86
|
-
el.removeEventListener('touchstart', handleTouchStart);
|
|
87
|
-
}
|
|
88
|
-
function cancelTouchEnd() {
|
|
89
|
-
el.removeEventListener('touchend', handleTouchEnd);
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
exports.scrollTransition = scrollTransition;
|
|
93
|
-
/**
|
|
94
|
-
* Ease out timing function.
|
|
95
|
-
* Based on https://gist.github.com/gre/1650294.
|
|
96
|
-
*
|
|
97
|
-
* @param {number} val - A number between 0 and 1.
|
|
98
|
-
* @return {number}
|
|
99
|
-
*/
|
|
100
|
-
function easeInOut(val) {
|
|
101
|
-
return val < 0.5 ? 2 * val * val : -1 + (4 - 2 * val) * val;
|
|
102
|
-
}
|
package/ebay-carousel/types.js
DELETED
|
@@ -1,77 +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 ebay_icon_1 = require("../ebay-icon");
|
|
43
|
-
const ebay_field_1 = require("../ebay-field");
|
|
44
|
-
const component_utils_1 = require("../common/component-utils");
|
|
45
|
-
const isControlled = checked => typeof checked !== 'undefined';
|
|
46
|
-
const EbayCheckbox = (_a) => {
|
|
47
|
-
var { id, size = 'default', className, style, checked, defaultChecked = false, onChange = () => { }, onFocus = () => { }, onKeyDown = () => { }, children, inputRef } = _a, rest = __rest(_a, ["id", "size", "className", "style", "checked", "defaultChecked", "onChange", "onFocus", "onKeyDown", "children", "inputRef"]);
|
|
48
|
-
const [isChecked, setChecked] = (0, react_1.useState)(defaultChecked);
|
|
49
|
-
const handleChange = (e) => {
|
|
50
|
-
const input = e.target;
|
|
51
|
-
onChange(e, { value: input === null || input === void 0 ? void 0 : input.value, checked: Boolean(input === null || input === void 0 ? void 0 : input.checked) });
|
|
52
|
-
setChecked(input === null || input === void 0 ? void 0 : input.checked);
|
|
53
|
-
};
|
|
54
|
-
const handleFocus = (e) => { var _a, _b; return onFocus(e, { value: (_a = e.target) === null || _a === void 0 ? void 0 : _a.value, checked: Boolean((_b = e.target) === null || _b === void 0 ? void 0 : _b.checked) }); };
|
|
55
|
-
const handleKeyDown = (e) => {
|
|
56
|
-
const input = e.target;
|
|
57
|
-
onKeyDown(e, { value: input.value, checked: Boolean(input.checked) });
|
|
58
|
-
};
|
|
59
|
-
const containerClass = (0, classnames_1.default)('checkbox', className, { 'checkbox--large': size === 'large' });
|
|
60
|
-
const iconChecked = size === 'large' ?
|
|
61
|
-
react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "checkboxChecked24", className: "checkbox__checked" }) :
|
|
62
|
-
react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "checkboxChecked18", className: "checkbox__checked" });
|
|
63
|
-
const iconUnChecked = size === 'large' ?
|
|
64
|
-
react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "checkboxUnchecked24", className: "checkbox__unchecked" }) :
|
|
65
|
-
react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "checkboxUnchecked18", className: "checkbox__unchecked" });
|
|
66
|
-
const ebayLabel = (0, component_utils_1.findComponent)(children, ebay_field_1.EbayLabel);
|
|
67
|
-
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
68
|
-
react_1.default.createElement("span", { className: containerClass, style: Object.assign(Object.assign({}, style), { alignItems: 'center' }) },
|
|
69
|
-
react_1.default.createElement("input", Object.assign({}, rest, { id: id, className: "checkbox__control", type: "checkbox", checked: isControlled(checked) ? checked : isChecked, onChange: handleChange, onFocus: handleFocus, onKeyDown: handleKeyDown, ref: inputRef })),
|
|
70
|
-
react_1.default.createElement("span", { className: "checkbox__icon", hidden: true },
|
|
71
|
-
iconChecked,
|
|
72
|
-
iconUnChecked)),
|
|
73
|
-
ebayLabel ?
|
|
74
|
-
(0, react_1.cloneElement)(ebayLabel, Object.assign(Object.assign({}, ebayLabel.props), { position: 'end', htmlFor: id })) :
|
|
75
|
-
children));
|
|
76
|
-
};
|
|
77
|
-
exports.default = EbayCheckbox;
|
package/ebay-checkbox/index.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.EbayCheckbox = void 0;
|
|
7
|
-
var checkbox_1 = require("./checkbox");
|
|
8
|
-
Object.defineProperty(exports, "EbayCheckbox", { enumerable: true, get: function () { return __importDefault(checkbox_1).default; } });
|
|
@@ -1,56 +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 ebay_dialog_base_1 = require("../ebay-dialog-base");
|
|
43
|
-
const ebay_button_1 = require("../ebay-button");
|
|
44
|
-
const classPrefix = 'confirm-dialog';
|
|
45
|
-
const EbayConfirmDialog = (_a) => {
|
|
46
|
-
var { a11yCloseText = 'Close Dialog', confirmText, rejectText, onReject = () => { }, onConfirm = () => { } } = _a, rest = __rest(_a, ["a11yCloseText", "confirmText", "rejectText", "onReject", "onConfirm"]);
|
|
47
|
-
const confirmBtnRef = (0, react_1.useRef)(null);
|
|
48
|
-
const confirmId = 'confirm-dialog-confirm';
|
|
49
|
-
const mainId = 'confirm-dialog-main';
|
|
50
|
-
return (react_1.default.createElement(ebay_dialog_base_1.DialogBaseWithState, Object.assign({ focus: confirmBtnRef }, rest, { a11yCloseText: a11yCloseText, role: "dialog", mainId: mainId, classPrefix: classPrefix, className: (0, classnames_1.default)(rest.className, `${classPrefix}--mask-fade`), windowClass: `${classPrefix}__window ${classPrefix}__window--fade`, buttonPosition: "hidden", onCloseBtnClick: onReject }),
|
|
51
|
-
rest.children,
|
|
52
|
-
react_1.default.createElement(ebay_dialog_base_1.EbayDialogFooter, null,
|
|
53
|
-
react_1.default.createElement(ebay_button_1.EbayButton, { onClick: onReject, className: "confirm-dialog__reject" }, rejectText),
|
|
54
|
-
react_1.default.createElement(ebay_button_1.EbayButton, { ref: confirmBtnRef, priority: "primary", onClick: onConfirm, id: confirmId, "aria-describedby": mainId, className: "confirm-dialog__confirm" }, confirmText))));
|
|
55
|
-
};
|
|
56
|
-
exports.default = EbayConfirmDialog;
|
|
@@ -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.EbayConfirmDialog = void 0;
|
|
7
|
-
var confirm_dialog_1 = require("./confirm-dialog");
|
|
8
|
-
Object.defineProperty(exports, "EbayConfirmDialog", { enumerable: true, get: function () { return __importDefault(confirm_dialog_1).default; } });
|