@ebay/ui-core-react 4.2.5 → 5.0.0
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/README.md +8 -6
- package/common/event-utils/index.d.ts +10 -7
- package/common/event-utils/index.d.ts.map +1 -1
- package/common/event-utils/index.js +11 -3
- package/common/event-utils/types.d.ts +7 -0
- package/common/event-utils/types.d.ts.map +1 -1
- package/common/event-utils/types.js +12 -0
- package/common/floating-label-utils/hooks.d.ts +2 -1
- package/common/floating-label-utils/hooks.d.ts.map +1 -1
- package/common/floating-label-utils/hooks.js +5 -4
- package/ebay-alert-dialog/README.md +3 -2
- package/ebay-alert-dialog/alert-dialog.d.ts +0 -1
- package/ebay-alert-dialog/alert-dialog.d.ts.map +1 -1
- package/ebay-alert-dialog/alert-dialog.js +1 -1
- package/ebay-breadcrumbs/README.md +1 -1
- package/ebay-breadcrumbs/breadcrumbs.d.ts +3 -2
- package/ebay-breadcrumbs/breadcrumbs.d.ts.map +1 -1
- package/ebay-breadcrumbs/breadcrumbs.js +1 -1
- package/ebay-button/README.md +4 -4
- package/ebay-carousel/carousel.js +1 -1
- package/ebay-checkbox/README.md +11 -10
- package/ebay-checkbox/checkbox.d.ts +15 -3
- package/ebay-checkbox/checkbox.d.ts.map +1 -1
- package/ebay-checkbox/checkbox.js +9 -4
- package/ebay-confirm-dialog/README.md +6 -6
- package/ebay-confirm-dialog/confirm-dialog.d.ts +0 -1
- package/ebay-confirm-dialog/confirm-dialog.d.ts.map +1 -1
- package/ebay-confirm-dialog/confirm-dialog.js +1 -1
- package/ebay-dialog-base/components/dialogBase.d.ts +3 -2
- package/ebay-dialog-base/components/dialogBase.d.ts.map +1 -1
- package/ebay-dialog-base/components/dialogBase.js +6 -3
- package/ebay-drawer-dialog/README.md +7 -6
- package/ebay-drawer-dialog/components/drawer.d.ts +3 -0
- package/ebay-drawer-dialog/components/drawer.d.ts.map +1 -1
- package/ebay-fake-menu/README.md +5 -5
- package/ebay-fake-menu/menu-item.d.ts +1 -1
- package/ebay-fake-menu/menu-item.d.ts.map +1 -1
- package/ebay-fake-menu/menu.d.ts +9 -5
- package/ebay-fake-menu/menu.d.ts.map +1 -1
- package/ebay-fake-menu/menu.js +2 -2
- package/ebay-fake-menu-button/README.md +9 -4
- package/ebay-fake-menu-button/menu-button.d.ts +9 -2
- package/ebay-fake-menu-button/menu-button.d.ts.map +1 -1
- package/ebay-fake-menu-button/menu-button.js +7 -5
- package/ebay-fullscreen-dialog/fullscreen-dialog.d.ts +0 -1
- package/ebay-fullscreen-dialog/fullscreen-dialog.d.ts.map +1 -1
- package/ebay-fullscreen-dialog/fullscreen-dialog.js +1 -1
- package/ebay-icon-button/README.md +9 -0
- package/ebay-icon-button/icon-button.d.ts +3 -1
- package/ebay-icon-button/icon-button.d.ts.map +1 -1
- package/ebay-icon-button/icon-button.js +8 -2
- package/ebay-lightbox-dialog/lightbox-dialog.d.ts +0 -1
- package/ebay-lightbox-dialog/lightbox-dialog.d.ts.map +1 -1
- package/ebay-lightbox-dialog/lightbox-dialog.js +1 -1
- package/ebay-listbox-button/README.md +8 -1
- package/ebay-listbox-button/listbox-button.d.ts +11 -3
- package/ebay-listbox-button/listbox-button.d.ts.map +1 -1
- package/ebay-listbox-button/listbox-button.js +41 -16
- package/ebay-menu/README.md +5 -4
- package/ebay-menu/menu-item.d.ts +1 -1
- package/ebay-menu/menu-item.d.ts.map +1 -1
- package/ebay-menu/menu.d.ts +4 -4
- package/ebay-menu/menu.d.ts.map +1 -1
- package/ebay-menu/menu.js +85 -42
- package/ebay-menu/types.d.ts +21 -12
- package/ebay-menu/types.d.ts.map +1 -1
- package/ebay-menu-button/README.md +2 -2
- package/ebay-menu-button/menu-button.d.ts +3 -3
- package/ebay-menu-button/menu-button.d.ts.map +1 -1
- package/ebay-menu-button/menu-button.js +18 -4
- package/ebay-page-notice/README.md +5 -1
- package/ebay-page-notice/index.d.ts +1 -1
- package/ebay-page-notice/index.d.ts.map +1 -1
- package/ebay-page-notice/page-notice.d.ts +5 -4
- package/ebay-page-notice/page-notice.d.ts.map +1 -1
- package/ebay-page-notice/page-notice.js +7 -8
- package/ebay-pagination/README.md +5 -5
- package/ebay-pagination/pagination-item.d.ts +8 -4
- package/ebay-pagination/pagination-item.d.ts.map +1 -1
- package/ebay-pagination/pagination-item.js +2 -1
- package/ebay-pagination/pagination.d.ts +8 -5
- package/ebay-pagination/pagination.d.ts.map +1 -1
- package/ebay-pagination/pagination.js +1 -1
- package/ebay-panel-dialog/panel-dialog.d.ts +0 -1
- package/ebay-panel-dialog/panel-dialog.d.ts.map +1 -1
- package/ebay-panel-dialog/panel-dialog.js +1 -1
- package/ebay-radio/README.md +7 -2
- package/ebay-radio/radio.d.ts +12 -3
- package/ebay-radio/radio.d.ts.map +1 -1
- package/ebay-radio/radio.js +7 -5
- package/ebay-section-notice/README.md +5 -0
- package/ebay-section-notice/index.d.ts +1 -1
- package/ebay-section-notice/index.d.ts.map +1 -1
- package/ebay-section-notice/section-notice.d.ts +6 -3
- package/ebay-section-notice/section-notice.d.ts.map +1 -1
- package/ebay-section-notice/section-notice.js +32 -4
- package/ebay-select/README.md +3 -1
- package/ebay-select/ebay-select.d.ts +7 -2
- package/ebay-select/ebay-select.d.ts.map +1 -1
- package/ebay-select/ebay-select.js +1 -1
- package/ebay-select/index.d.ts +1 -1
- package/ebay-select/index.d.ts.map +1 -1
- package/ebay-split-button/README.md +2 -2
- package/ebay-split-button/split-button.js +1 -1
- package/ebay-split-button/types.d.ts +2 -3
- package/ebay-split-button/types.d.ts.map +1 -1
- package/ebay-star-rating-select/README.md +8 -0
- package/ebay-star-rating-select/star-rating-select.d.ts +8 -4
- package/ebay-star-rating-select/star-rating-select.d.ts.map +1 -1
- package/ebay-star-rating-select/star-rating-select.js +8 -8
- package/ebay-switch/README.md +5 -1
- package/ebay-switch/ebay-switch.d.ts +7 -3
- package/ebay-switch/ebay-switch.d.ts.map +1 -1
- package/ebay-switch/ebay-switch.js +6 -3
- package/ebay-tabs/README.md +6 -10
- package/ebay-tabs/tab-panel.d.ts +0 -1
- package/ebay-tabs/tab-panel.d.ts.map +1 -1
- package/ebay-tabs/tab-panel.js +2 -2
- package/ebay-tabs/tab.d.ts +1 -7
- package/ebay-tabs/tab.d.ts.map +1 -1
- package/ebay-tabs/tab.js +2 -7
- package/ebay-tabs/tabs.d.ts +7 -1
- package/ebay-tabs/tabs.d.ts.map +1 -1
- package/ebay-tabs/tabs.js +12 -19
- package/ebay-textbox/README.md +16 -9
- package/ebay-textbox/postfix-icon.d.ts.map +1 -1
- package/ebay-textbox/postfix-icon.js +25 -3
- package/ebay-textbox/prefix-icon.d.ts.map +1 -1
- package/ebay-textbox/prefix-icon.js +24 -2
- package/ebay-textbox/textbox.d.ts +17 -7
- package/ebay-textbox/textbox.d.ts.map +1 -1
- package/ebay-textbox/textbox.js +47 -14
- package/ebay-textbox/types.d.ts +2 -2
- package/ebay-textbox/types.d.ts.map +1 -1
- package/ebay-video/README.md +7 -5
- package/ebay-video/controls.d.ts.map +1 -1
- package/ebay-video/controls.js +10 -4
- package/ebay-video/reportButton.d.ts +1 -5
- package/ebay-video/reportButton.d.ts.map +1 -1
- package/ebay-video/reportButton.js +3 -3
- package/ebay-video/video.d.ts +13 -10
- package/ebay-video/video.d.ts.map +1 -1
- package/ebay-video/video.js +4 -1
- package/package.json +1 -1
package/ebay-textbox/README.md
CHANGED
|
@@ -11,19 +11,15 @@ yarn add @ebay/ui-core-react
|
|
|
11
11
|
```
|
|
12
12
|
|
|
13
13
|
### Import JS
|
|
14
|
-
|
|
15
14
|
```jsx harmony
|
|
16
15
|
import { EbayTextbox } from '@ebay/ui-core-react/ebay-textbox'
|
|
17
16
|
```
|
|
18
17
|
|
|
19
18
|
### Import following styles from SKIN
|
|
20
|
-
|
|
21
19
|
```jsx harmony
|
|
22
20
|
import "@ebay/skin/textbox";
|
|
23
21
|
```
|
|
24
|
-
|
|
25
22
|
### or if using CSS/SCSS
|
|
26
|
-
|
|
27
23
|
```jsx
|
|
28
24
|
import "@ebay/skin/textbox.css";
|
|
29
25
|
```
|
|
@@ -44,12 +40,23 @@ import "@ebay/skin/textbox.css";
|
|
|
44
40
|
| `defaultValue` | String | No | No | Indicates the default input element value. Use when the component is not controlled. |
|
|
45
41
|
| `inputSize` | String | No | No | `default` (default), `large` |
|
|
46
42
|
| `floatingLabel` | String | No | No | Indicates that the input is a floating label type and renders it as a label |
|
|
47
|
-
| `onFocus` | Function | No | No | Called when input gets focus, parameters passed: `originalEvent`, `value` |
|
|
48
|
-
| `onBlur` | Function | No | No | Called when input loses focus, parameters passed: `originalEvent`, `value` |
|
|
49
|
-
| `onChange` | Function | No | No | Called when input changes value, parameters passed: `originalEvent`, `value` |
|
|
50
|
-
| `onButtonClick` | Function | No | No | Triggers when clicking on postfix-icon-button. Requires `buttonAriaLabel` to be present in order to attach correctly |
|
|
51
43
|
|
|
52
|
-
|
|
44
|
+
## Callbacks
|
|
45
|
+
| Name | Required | Description | Arguments |
|
|
46
|
+
|------|----------|-------------|-----------|
|
|
47
|
+
|
|
48
|
+
| `onChange` | No | Triggered when focus leaves and value is changed. | `(ChangeEvent, { value: string })` | |
|
|
49
|
+
| `onInputChange` | No | Triggered when the value of the input is changed. | `(ChangeEvent, { value: string })` | |
|
|
50
|
+
| `onFocus` | No | Called when input gets focus | `(FocusEvent, { value: string })` |
|
|
51
|
+
| `onBlur` | No | Called when input loses focus | `(FocusEvent, { value: string })` |
|
|
52
|
+
| `onKeyPress` | No | Called on key press | `(KeyboardEvent, { value: string })` |
|
|
53
|
+
| `onKeyUp` | No | Called on key up | `(KeyboardEvent, { value: string })` |
|
|
54
|
+
| `onKeyDown` | No | Called on key down | `(KeyboardEvent, { value: string })` |
|
|
55
|
+
| `onInvalid` | No | Triggered when value is invalid | `(ChangeEvent, { value: string })` |
|
|
56
|
+
| `onFloatingLabelInit` | No | Triggered when floating label is initialized | `()` |
|
|
57
|
+
| `onButtonClick` | No | Triggers when clicking on postfix-icon-button. Requires `buttonAriaLabel` to be present in order to attach correctly | `(MouseEvent, { value: string })` |
|
|
58
|
+
|
|
59
|
+
It supports all the events supported by an input element (e.g. `onInput`, `onPaste`)
|
|
53
60
|
|
|
54
61
|
## EbayTextboxPrefixIcon
|
|
55
62
|
| Name | Type | Required | Description |
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"postfix-icon.d.ts","sourceRoot":"","sources":["../../src/ebay-textbox/postfix-icon.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAI9C,QAAA,MAAM,sBAAsB,EAAE,EAAE,CAAC,oBAAoB,
|
|
1
|
+
{"version":3,"file":"postfix-icon.d.ts","sourceRoot":"","sources":["../../src/ebay-textbox/postfix-icon.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAI9C,QAAA,MAAM,sBAAsB,EAAE,EAAE,CAAC,oBAAoB,CAaR,CAAA;AAE7C,eAAe,sBAAsB,CAAA"}
|
|
@@ -1,4 +1,26 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
+
var t = {};
|
|
15
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
+
t[p] = s[p];
|
|
17
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
+
t[p[i]] = s[p[i]];
|
|
21
|
+
}
|
|
22
|
+
return t;
|
|
23
|
+
};
|
|
2
24
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
25
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
26
|
};
|
|
@@ -7,9 +29,9 @@ var react_1 = __importDefault(require("react"));
|
|
|
7
29
|
var ebay_icon_1 = require("../ebay-icon");
|
|
8
30
|
var ebay_icon_button_1 = require("../ebay-icon-button");
|
|
9
31
|
var EbayTextboxPostfixIcon = function (_a) {
|
|
10
|
-
var name = _a.name, buttonAriaLabel = _a.buttonAriaLabel, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b;
|
|
32
|
+
var name = _a.name, buttonAriaLabel = _a.buttonAriaLabel, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b, rest = __rest(_a, ["name", "buttonAriaLabel", "onClick"]);
|
|
11
33
|
return buttonAriaLabel ?
|
|
12
|
-
react_1.default.createElement(ebay_icon_button_1.EbayIconButton, { "aria-label": buttonAriaLabel, icon: name, transparent: true, onClick: onClick }) :
|
|
13
|
-
react_1.default.createElement(ebay_icon_1.EbayIcon, { name: name });
|
|
34
|
+
react_1.default.createElement(ebay_icon_button_1.EbayIconButton, __assign({ "aria-label": buttonAriaLabel, icon: name, transparent: true, onClick: onClick }, rest)) :
|
|
35
|
+
react_1.default.createElement(ebay_icon_1.EbayIcon, __assign({ name: name }, rest));
|
|
14
36
|
};
|
|
15
37
|
exports.default = EbayTextboxPostfixIcon;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"prefix-icon.d.ts","sourceRoot":"","sources":["../../src/ebay-textbox/prefix-icon.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAE9C,QAAA,MAAM,qBAAqB,EAAE,EAAE,CAAC,oBAAoB,
|
|
1
|
+
{"version":3,"file":"prefix-icon.d.ts","sourceRoot":"","sources":["../../src/ebay-textbox/prefix-icon.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAE9C,QAAA,MAAM,qBAAqB,EAAE,EAAE,CAAC,oBAAoB,CAKnD,CAAA;AAED,eAAe,qBAAqB,CAAA"}
|
|
@@ -1,4 +1,26 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
+
var t = {};
|
|
15
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
+
t[p] = s[p];
|
|
17
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
+
t[p[i]] = s[p[i]];
|
|
21
|
+
}
|
|
22
|
+
return t;
|
|
23
|
+
};
|
|
2
24
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
25
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
26
|
};
|
|
@@ -6,7 +28,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
28
|
var react_1 = __importDefault(require("react"));
|
|
7
29
|
var ebay_icon_1 = require("../ebay-icon");
|
|
8
30
|
var EbayTextboxPrefixIcon = function (_a) {
|
|
9
|
-
var name = _a.name;
|
|
10
|
-
return (react_1.default.createElement(ebay_icon_1.EbayIcon, { name: name }));
|
|
31
|
+
var name = _a.name, rest = __rest(_a, ["name"]);
|
|
32
|
+
return (react_1.default.createElement(ebay_icon_1.EbayIcon, __assign({ name: name }, rest)));
|
|
11
33
|
};
|
|
12
34
|
exports.default = EbayTextboxPrefixIcon;
|
|
@@ -1,19 +1,29 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { ComponentProps, Ref } from 'react';
|
|
2
2
|
import { Size } from './index';
|
|
3
|
+
import { EbayChangeEventHandler, EbayEventHandler, EbayFocusEventHandler, EbayKeyboardEventHandler, EbayMouseEventHandler } from '../common/event-utils/types';
|
|
3
4
|
declare type TextInputProps = ComponentProps<'input'> & ComponentProps<'textarea'>;
|
|
5
|
+
export declare type TextboxEventProps = {
|
|
6
|
+
value: string;
|
|
7
|
+
};
|
|
4
8
|
export declare type EbayTextboxProps = {
|
|
5
9
|
fluid?: boolean;
|
|
6
10
|
invalid?: boolean;
|
|
7
11
|
multiline?: boolean;
|
|
8
12
|
defaultValue?: string;
|
|
9
13
|
inputSize?: Size;
|
|
10
|
-
onFocus?: (e?: FocusEvent<HTMLTextAreaElement & HTMLInputElement>, value?: string) => void;
|
|
11
|
-
onBlur?: (e?: FocusEvent<HTMLTextAreaElement & HTMLInputElement>, value?: string) => void;
|
|
12
|
-
onChange?: (e: ChangeEvent<HTMLTextAreaElement & HTMLInputElement>, value: string) => void;
|
|
13
|
-
onButtonClick?: (e: MouseEvent, value: string) => void;
|
|
14
14
|
floatingLabel?: string;
|
|
15
|
+
onChange?: EbayChangeEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
|
|
16
|
+
onInputChange?: EbayChangeEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
|
|
17
|
+
onFocus?: EbayFocusEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
|
|
18
|
+
onBlur?: EbayFocusEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
|
|
19
|
+
onKeyPress?: EbayKeyboardEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
|
|
20
|
+
onKeyUp?: EbayKeyboardEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
|
|
21
|
+
onKeyDown?: EbayKeyboardEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
|
|
22
|
+
onInvalid?: EbayEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
|
|
23
|
+
onFloatingLabelInit?: () => void;
|
|
24
|
+
onButtonClick?: EbayKeyboardEventHandler<HTMLInputElement, TextboxEventProps> & EbayMouseEventHandler<HTMLInputElement, TextboxEventProps>;
|
|
15
25
|
forwardedRef?: Ref<HTMLTextAreaElement | HTMLInputElement>;
|
|
16
|
-
} & Omit<TextInputProps, 'onFocus' | 'onBlur'>;
|
|
17
|
-
declare const _default: React.ForwardRefExoticComponent<Pick<EbayTextboxProps, "form" | "slot" | "style" | "title" | "pattern" | "type" | "invalid" | "key" | "value" | "className" | "disabled" | "inputSize" | "placeholder" | "children" | "dir" | "list" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "cols" | "crossOrigin" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "readOnly" | "required" | "rows" | "size" | "src" | "step" | "width" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "forwardedRef" | "fluid" | "floatingLabel" | "dirName" | "multiline" | "onButtonClick"> & React.RefAttributes<React.FC<EbayTextboxProps>>>;
|
|
26
|
+
} & Omit<TextInputProps, 'onFocus' | 'onBlur' | 'onChange' | 'onKeyPress' | 'onKeyUp' | 'onKeyDown' | 'onInvalid'>;
|
|
27
|
+
declare const _default: React.ForwardRefExoticComponent<Pick<EbayTextboxProps, "form" | "slot" | "style" | "title" | "pattern" | "type" | "invalid" | "key" | "value" | "className" | "disabled" | "inputSize" | "placeholder" | "children" | "dir" | "list" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "cols" | "crossOrigin" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "readOnly" | "required" | "rows" | "size" | "src" | "step" | "width" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "forwardedRef" | "fluid" | "floatingLabel" | "dirName" | "multiline" | "onInputChange" | "onFloatingLabelInit" | "onButtonClick"> & React.RefAttributes<React.FC<EbayTextboxProps>>>;
|
|
18
28
|
export default _default;
|
|
19
29
|
//# sourceMappingURL=textbox.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textbox.d.ts","sourceRoot":"","sources":["../../src/ebay-textbox/textbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"textbox.d.ts","sourceRoot":"","sources":["../../src/ebay-textbox/textbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACI,cAAc,EAAM,GAAG,EAGxC,MAAM,OAAO,CAAA;AAGd,OAAO,EAAiD,IAAI,EAAE,MAAM,SAAS,CAAA;AAE7E,OAAO,EACH,sBAAsB,EACtB,gBAAgB,EAChB,qBAAqB,EACrB,wBAAwB,EAAE,qBAAqB,EAClD,MAAM,6BAA6B,CAAA;AAIpC,aAAK,cAAc,GAAG,cAAc,CAAC,OAAO,CAAC,GAAG,cAAc,CAAC,UAAU,CAAC,CAAA;AAE1E,oBAAY,iBAAiB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AACjD,oBAAY,gBAAgB,GAAG;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAC7F,aAAa,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAClG,OAAO,CAAC,EAAE,qBAAqB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAC3F,MAAM,CAAC,EAAE,qBAAqB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAC1F,UAAU,CAAC,EAAE,wBAAwB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IACjG,OAAO,CAAC,EAAE,wBAAwB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAC9F,SAAS,CAAC,EAAE,wBAAwB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAChG,SAAS,CAAC,EAAE,gBAAgB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IACxF,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,aAAa,CAAC,EAAE,wBAAwB,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,GACzE,qBAAqB,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAC/D,YAAY,CAAC,EAAE,GAAG,CAAC,mBAAmB,GAAG,gBAAgB,CAAC,CAAC;CAC9D,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,WAAW,CAAC,CAAC;;AAuJnH,wBAA4D"}
|
package/ebay-textbox/textbox.js
CHANGED
|
@@ -51,38 +51,67 @@ var index_1 = require("./index");
|
|
|
51
51
|
var hooks_1 = require("../common/floating-label-utils/hooks");
|
|
52
52
|
var isControlled = function (value) { return typeof value !== 'undefined'; };
|
|
53
53
|
var EbayTextbox = function (_a) {
|
|
54
|
-
var _b = _a.type, type = _b === void 0 ? 'text' : _b, invalid = _a.invalid, fluid = _a.fluid, multiline = _a.multiline, _c = _a.onChange, onChange = _c === void 0 ? function () { } : _c, _d = _a.
|
|
55
|
-
var
|
|
56
|
-
var
|
|
54
|
+
var _b = _a.type, type = _b === void 0 ? 'text' : _b, invalid = _a.invalid, fluid = _a.fluid, multiline = _a.multiline, _c = _a.onChange, onChange = _c === void 0 ? function () { } : _c, _d = _a.onInputChange, onInputChange = _d === void 0 ? function () { } : _d, _e = _a.onFocus, onFocus = _e === void 0 ? function () { } : _e, _f = _a.onBlur, onBlur = _f === void 0 ? function () { } : _f, _g = _a.onKeyPress, onKeyPress = _g === void 0 ? function () { } : _g, _h = _a.onKeyUp, onKeyUp = _h === void 0 ? function () { } : _h, _j = _a.onKeyDown, onKeyDown = _j === void 0 ? function () { } : _j, _k = _a.onInvalid, onInvalid = _k === void 0 ? function () { } : _k, _l = _a.onFloatingLabelInit, onFloatingLabelInit = _l === void 0 ? function () { } : _l, _m = _a.onButtonClick, onButtonClick = _m === void 0 ? function () { } : _m, autoFocus = _a.autoFocus, _o = _a.defaultValue, defaultValue = _o === void 0 ? '' : _o, controlledValue = _a.value, forwardedRef = _a.forwardedRef, _p = _a.inputSize, inputSize = _p === void 0 ? 'default' : _p, floatingLabel = _a.floatingLabel, children = _a.children, placeholder = _a.placeholder, rest = __rest(_a, ["type", "invalid", "fluid", "multiline", "onChange", "onInputChange", "onFocus", "onBlur", "onKeyPress", "onKeyUp", "onKeyDown", "onInvalid", "onFloatingLabelInit", "onButtonClick", "autoFocus", "defaultValue", "value", "forwardedRef", "inputSize", "floatingLabel", "children", "placeholder"]);
|
|
55
|
+
var _q = react_1.useState(defaultValue), value = _q[0], setValue = _q[1];
|
|
56
|
+
var _r = react_1.useState(defaultValue), inputValue = _r[0], setInputValue = _r[1];
|
|
57
|
+
var _s = hooks_1.useFloatingLabel({
|
|
57
58
|
ref: forwardedRef,
|
|
58
59
|
inputId: rest.id,
|
|
59
60
|
className: rest.className,
|
|
60
61
|
disabled: rest.disabled,
|
|
61
62
|
label: floatingLabel,
|
|
62
63
|
inputSize: inputSize,
|
|
63
|
-
inputValue: controlledValue ||
|
|
64
|
+
inputValue: controlledValue || inputValue,
|
|
64
65
|
placeholder: placeholder,
|
|
65
|
-
invalid: invalid
|
|
66
|
-
|
|
66
|
+
invalid: invalid,
|
|
67
|
+
onMount: onFloatingLabelInit
|
|
68
|
+
}), label = _s.label, Container = _s.Container, onFloatingLabelBlur = _s.onBlur, onFloatingLabelFocus = _s.onFocus, ref = _s.ref, floatingLabelPlaceholder = _s.placeholder;
|
|
67
69
|
var handleFocus = function (event) {
|
|
68
|
-
|
|
70
|
+
var _a;
|
|
71
|
+
onFocus(event, { value: ((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value) || defaultValue });
|
|
69
72
|
onFloatingLabelFocus();
|
|
70
73
|
};
|
|
71
74
|
var handleBlur = function (event) {
|
|
72
|
-
|
|
75
|
+
var _a;
|
|
76
|
+
var newValue = (_a = event.target) === null || _a === void 0 ? void 0 : _a.value;
|
|
77
|
+
onBlur(event, { value: newValue });
|
|
78
|
+
if (newValue !== value) {
|
|
79
|
+
onChange(event, { value: newValue });
|
|
80
|
+
setValue(newValue);
|
|
81
|
+
}
|
|
73
82
|
onFloatingLabelBlur();
|
|
74
83
|
};
|
|
84
|
+
var handleKeyPress = function (event) {
|
|
85
|
+
var textbox = event.target;
|
|
86
|
+
onKeyPress(event, { value: textbox === null || textbox === void 0 ? void 0 : textbox.value });
|
|
87
|
+
};
|
|
88
|
+
var handleKeyUp = function (event) {
|
|
89
|
+
var textbox = event.target;
|
|
90
|
+
onKeyUp(event, { value: textbox === null || textbox === void 0 ? void 0 : textbox.value });
|
|
91
|
+
};
|
|
92
|
+
var handleKeyDown = function (event) {
|
|
93
|
+
var textbox = event.target;
|
|
94
|
+
onKeyDown(event, { value: textbox === null || textbox === void 0 ? void 0 : textbox.value });
|
|
95
|
+
};
|
|
96
|
+
var handleInvalid = function (event) {
|
|
97
|
+
var textbox = event.target;
|
|
98
|
+
onInvalid(event, { value: textbox === null || textbox === void 0 ? void 0 : textbox.value });
|
|
99
|
+
};
|
|
100
|
+
var handleButtonClick = function (event) {
|
|
101
|
+
onButtonClick(event, { value: value });
|
|
102
|
+
};
|
|
75
103
|
react_1.useEffect(function () {
|
|
76
104
|
if (autoFocus) {
|
|
77
105
|
handleFocus();
|
|
78
106
|
}
|
|
79
107
|
}, []);
|
|
80
|
-
var
|
|
81
|
-
var
|
|
108
|
+
var handleInputChange = function (e) {
|
|
109
|
+
var _a;
|
|
110
|
+
var newValue = (_a = e.target) === null || _a === void 0 ? void 0 : _a.value;
|
|
82
111
|
if (!isControlled(controlledValue)) {
|
|
83
|
-
|
|
112
|
+
setInputValue(newValue);
|
|
84
113
|
}
|
|
85
|
-
|
|
114
|
+
onInputChange(e, { value: newValue });
|
|
86
115
|
};
|
|
87
116
|
var Input = multiline ? 'textarea' : 'input';
|
|
88
117
|
var Wrapper = fluid ? 'div' : 'span';
|
|
@@ -99,7 +128,11 @@ var EbayTextbox = function (_a) {
|
|
|
99
128
|
label,
|
|
100
129
|
react_1.default.createElement(Wrapper, { className: wrapperClassName },
|
|
101
130
|
prefixIcon,
|
|
102
|
-
react_1.default.createElement(Input, __assign({}, rest, { className: inputClassName, type: type, "aria-invalid": invalid, value: isControlled(controlledValue) ? controlledValue :
|
|
103
|
-
postfixIcon && react_1.cloneElement(postfixIcon, __assign({
|
|
131
|
+
react_1.default.createElement(Input, __assign({}, rest, { className: inputClassName, type: type, "aria-invalid": invalid, value: isControlled(controlledValue) ? controlledValue : inputValue, onChange: handleInputChange, onBlur: handleBlur, onFocus: handleFocus, onKeyPress: handleKeyPress, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onInvalid: handleInvalid, autoFocus: autoFocus, ref: ref, placeholder: floatingLabelPlaceholder })),
|
|
132
|
+
postfixIcon && react_1.cloneElement(postfixIcon, __assign(__assign({}, postfixIcon.props), { onClick: function (e) {
|
|
133
|
+
var _a = postfixIcon.props.onClick, iconClick = _a === void 0 ? function () { } : _a;
|
|
134
|
+
iconClick(e);
|
|
135
|
+
handleButtonClick(e);
|
|
136
|
+
} })))));
|
|
104
137
|
};
|
|
105
138
|
exports.default = component_utils_1.withForwardRef(EbayTextbox);
|
package/ebay-textbox/types.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { KeyboardEvent, MouseEvent } from 'react';
|
|
1
|
+
import { ComponentProps, KeyboardEvent, MouseEvent } from 'react';
|
|
2
2
|
import type { Icon } from '../ebay-icon';
|
|
3
3
|
export declare type Size = 'default' | 'large';
|
|
4
|
-
export declare type EbayTextboxIconProps = {
|
|
4
|
+
export declare type EbayTextboxIconProps = ComponentProps<'button'> & ComponentProps<'a'> & {
|
|
5
5
|
name: Icon;
|
|
6
6
|
buttonAriaLabel?: string;
|
|
7
7
|
onClick?: (e: KeyboardEvent | MouseEvent) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-textbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-textbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAExC,oBAAY,IAAI,GAAG,SAAS,GAAG,OAAO,CAAA;AAEtC,oBAAY,oBAAoB,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG,cAAc,CAAC,GAAG,CAAC,GAAG;IAChF,IAAI,EAAE,IAAI,CAAA;IACV,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,GAAG,UAAU,KAAK,IAAI,CAAA;CACpD,CAAA"}
|
package/ebay-video/README.md
CHANGED
|
@@ -37,14 +37,16 @@ import 'shaka-player/dist/controls.css'
|
|
|
37
37
|
| a11yPlayText | String | Yes | a11y text for the play button |
|
|
38
38
|
| errorText | String | Yes | content for error when an either the library or video cannot load |
|
|
39
39
|
| reportText | String | Yes | text for report button |
|
|
40
|
-
|
|
41
|
-
|
|
|
42
|
-
|
|
43
|
-
|
|
|
40
|
+
## Callbacks
|
|
41
|
+
| Name | Required | Description | Arguments |
|
|
42
|
+
|----------------|----------|------------------------------------------------------------------|---------------------------------------------|
|
|
43
|
+
| onLoadError | No | triggered when there is a load error with video player or source | (Event) |
|
|
44
|
+
| onPlay | No | triggered when playback starts | (Event, { player }) |
|
|
45
|
+
| onVolumeChange | No | triggered when volume is changed | (Event, { volume: number, muted: boolean }) |
|
|
46
|
+
| onReport | No | triggered when report button is clicked | |
|
|
44
47
|
|
|
45
48
|
|
|
46
49
|
## EbayVideoSource Props
|
|
47
|
-
|
|
48
50
|
| Name | Type | Required | Description |
|
|
49
51
|
|------|--------|----------|-----------------------------------------------------------------------------------------------------------------|
|
|
50
52
|
| src | String | Yes | video/playlist URL
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../../src/ebay-video/controls.tsx"],"names":[],"mappings":"AAKA,wBAAgB,cAAc,CAAC,QAAQ,aAAW,GAAG;IAAE,MAAM,MAAA;CAAE,
|
|
1
|
+
{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../../src/ebay-video/controls.tsx"],"names":[],"mappings":"AAKA,wBAAgB,cAAc,CAAC,QAAQ,aAAW,GAAG;IAAE,MAAM,MAAA;CAAE,CA0B9D"}
|
package/ebay-video/controls.js
CHANGED
|
@@ -28,7 +28,10 @@ function customControls(onReport) {
|
|
|
28
28
|
__extends(class_1, _super);
|
|
29
29
|
function class_1(parent, controls, text) {
|
|
30
30
|
var _this = _super.call(this, parent, controls) || this;
|
|
31
|
-
appendChild(parent, react_1.default.createElement(reportButton_1.ReportButton,
|
|
31
|
+
appendChild(parent, react_1.default.createElement(reportButton_1.ReportButton, null, text), function (button) {
|
|
32
|
+
// have to listen to clicks this way (React onClick will not work):
|
|
33
|
+
_this.eventManager.listen(button, 'click', onReport);
|
|
34
|
+
});
|
|
32
35
|
return _this;
|
|
33
36
|
}
|
|
34
37
|
return class_1;
|
|
@@ -45,8 +48,11 @@ function customControls(onReport) {
|
|
|
45
48
|
return { Report: Report };
|
|
46
49
|
}
|
|
47
50
|
exports.customControls = customControls;
|
|
48
|
-
function appendChild(container, reactElement) {
|
|
51
|
+
function appendChild(container, reactElement, callback) {
|
|
49
52
|
var tempEl = document.createElement('div');
|
|
50
|
-
react_dom_1.default.render(reactElement, tempEl)
|
|
51
|
-
|
|
53
|
+
react_dom_1.default.render(reactElement, tempEl, function () {
|
|
54
|
+
var child = tempEl.firstChild;
|
|
55
|
+
container.appendChild(child);
|
|
56
|
+
callback(child);
|
|
57
|
+
});
|
|
52
58
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reportButton.d.ts","sourceRoot":"","sources":["../../src/ebay-video/reportButton.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"reportButton.d.ts","sourceRoot":"","sources":["../../src/ebay-video/reportButton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAGjC,eAAO,MAAM,YAAY,EAAE,EAI1B,CAAA"}
|
|
@@ -4,11 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.ReportButton = void 0;
|
|
7
|
-
var ebay_icon_1 = require("../ebay-icon");
|
|
8
7
|
var react_1 = __importDefault(require("react"));
|
|
8
|
+
var ebay_icon_1 = require("../ebay-icon");
|
|
9
9
|
exports.ReportButton = function (_a) {
|
|
10
|
-
var
|
|
11
|
-
return (react_1.default.createElement("button", { className: "video-player__report-button"
|
|
10
|
+
var children = _a.children;
|
|
11
|
+
return (react_1.default.createElement("button", { className: "video-player__report-button" },
|
|
12
12
|
react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "flag24" }),
|
|
13
13
|
children));
|
|
14
14
|
};
|
package/ebay-video/video.d.ts
CHANGED
|
@@ -1,6 +1,14 @@
|
|
|
1
|
-
import { ComponentProps, FC,
|
|
1
|
+
import { ComponentProps, FC, MouseEvent } from 'react';
|
|
2
2
|
import { VideoAction, VideoPlayView } from './types';
|
|
3
|
-
|
|
3
|
+
import { EbayEventHandler } from '../common/event-utils/types';
|
|
4
|
+
export declare type PlayEventProps = {
|
|
5
|
+
player: Player;
|
|
6
|
+
};
|
|
7
|
+
export declare type VolumeChangeProps = {
|
|
8
|
+
volume: number;
|
|
9
|
+
muted: boolean;
|
|
10
|
+
};
|
|
11
|
+
export declare type EbayVideoProps = Omit<ComponentProps<'video'>, 'onPlay' | 'onVolumeChange'> & {
|
|
4
12
|
width?: number;
|
|
5
13
|
height?: number;
|
|
6
14
|
thumbnail?: string;
|
|
@@ -18,14 +26,9 @@ export declare type EbayVideoProps = ComponentProps<'video'> & {
|
|
|
18
26
|
errorText: string;
|
|
19
27
|
reportText?: string;
|
|
20
28
|
onLoadError?: (err: Error) => void;
|
|
21
|
-
onPlay?:
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
onVolumeChange?: (e: SyntheticEvent, { volume: number, muted: boolean }: {
|
|
25
|
-
volume: any;
|
|
26
|
-
muted: any;
|
|
27
|
-
}) => void;
|
|
28
|
-
onReport?: () => void;
|
|
29
|
+
onPlay?: EbayEventHandler<HTMLVideoElement, PlayEventProps>;
|
|
30
|
+
onVolumeChange?: EbayEventHandler<HTMLVideoElement, VolumeChangeProps>;
|
|
31
|
+
onReport?: (event?: MouseEvent<HTMLButtonElement>) => void;
|
|
29
32
|
};
|
|
30
33
|
declare const EbayVideo: FC<EbayVideoProps>;
|
|
31
34
|
export default EbayVideo;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../src/ebay-video/video.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../src/ebay-video/video.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAkB,UAAU,EAA+B,MAAM,OAAO,CAAA;AAO1G,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAIpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AAE9D,oBAAY,cAAc,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;CAClB,CAAA;AACD,oBAAY,iBAAiB,GAAG;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;CAClB,CAAA;AACD,oBAAY,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,QAAQ,GAAG,gBAAgB,CAAC,GAAG;IACtF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,aAAa,CAAC;IAEzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC;IAC5D,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IACvE,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC9D,CAAC;AAEF,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAqOjC,CAAA;AAgBD,eAAe,SAAS,CAAA"}
|
package/ebay-video/video.js
CHANGED
|
@@ -182,7 +182,10 @@ var EbayVideo = function (_a) {
|
|
|
182
182
|
};
|
|
183
183
|
var handleVolumeChange = function (e) {
|
|
184
184
|
var eventTarget = e.currentTarget;
|
|
185
|
-
onVolumeChange(e, {
|
|
185
|
+
onVolumeChange(e, {
|
|
186
|
+
volume: Math.round((eventTarget.volume + Number.EPSILON) * 100) / 100,
|
|
187
|
+
muted: eventTarget.muted
|
|
188
|
+
});
|
|
186
189
|
};
|
|
187
190
|
var handleOnPause = function () {
|
|
188
191
|
// On IOS, the controls force showing up if the video exist fullscreen while playing.
|