@openameba/spindle-ui 0.50.0 → 0.50.1
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/CHANGELOG.md +17 -0
- package/Pagination/Pagination.css +1 -1
- package/Pagination/Pagination.d.ts.map +1 -1
- package/Pagination/Pagination.js +14 -6
- package/Pagination/Pagination.js.map +1 -1
- package/Pagination/Pagination.mjs +14 -6
- package/Pagination/hooks/useShowItem.d.ts +2 -2
- package/Pagination/hooks/useShowItem.d.ts.map +1 -1
- package/Pagination/hooks/useShowItem.js +17 -5
- package/Pagination/hooks/useShowItem.js.map +1 -1
- package/Pagination/hooks/useShowItem.mjs +17 -5
- package/SnackBar/SnackBar.d.ts +4 -10
- package/SnackBar/SnackBar.d.ts.map +1 -1
- package/SnackBar/SnackBar.js +20 -78
- package/SnackBar/SnackBar.js.map +1 -1
- package/SnackBar/SnackBar.mjs +20 -77
- package/StackNotificationManager/StackNotificationManager.d.ts +43 -0
- package/StackNotificationManager/StackNotificationManager.d.ts.map +1 -1
- package/StackNotificationManager/StackNotificationManager.js.map +1 -1
- package/StackNotificationManager/hooks.d.ts +58 -12
- package/StackNotificationManager/hooks.d.ts.map +1 -1
- package/StackNotificationManager/hooks.js +126 -2
- package/StackNotificationManager/hooks.js.map +1 -1
- package/StackNotificationManager/hooks.mjs +128 -7
- package/StackNotificationManager/index.d.ts +2 -2
- package/StackNotificationManager/index.d.ts.map +1 -1
- package/StackNotificationManager/index.js +2 -1
- package/StackNotificationManager/index.js.map +1 -1
- package/StackNotificationManager/index.mjs +1 -1
- package/Toast/Toast.d.ts +5 -10
- package/Toast/Toast.d.ts.map +1 -1
- package/Toast/Toast.js +20 -97
- package/Toast/Toast.js.map +1 -1
- package/Toast/Toast.mjs +17 -73
- package/index.css +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,23 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.50.1](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.50.0...@openameba/spindle-ui@0.50.1) (2022-10-27)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **spindle-ui:** pagination display item ([e62621e](https://github.com/openameba/spindle/commit/e62621e31fc8a286e3a47a04aac40f7695636f57))
|
|
12
|
+
* **spindle-ui:** pagination style and docs ([a307efb](https://github.com/openameba/spindle/commit/a307efb1c70c700b739afe98336d2a5c2bff06c5))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### Features
|
|
16
|
+
|
|
17
|
+
* **spindle-ui:** add useStackNotificationComponent ([b18c498](https://github.com/openameba/spindle/commit/b18c4981bc38c9a7e2abd682ef504b55bcfde2bb))
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
6
23
|
# [0.50.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.49.1...@openameba/spindle-ui@0.50.0) (2022-10-20)
|
|
7
24
|
|
|
8
25
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.spui-PaginationItem-link{align-items:center;background:none;border:none;border-radius:12px;box-sizing:border-box;color:var(--color-text-medium-emphasis);display:flex;font-size:.875em;font-weight:700;height:40px;justify-content:center;line-height:1.3;margin:0;min-width:40px;padding:0;position:relative;-webkit-tap-highlight-color:var(--Pagination-tapHighlightColor);text-decoration:none}.spui-PaginationItem-link--first[aria-disabled],.spui-PaginationItem-link--last[aria-disabled],.spui-PaginationItem-link--next[aria-disabled],.spui-PaginationItem-link--prev[aria-disabled]{opacity:.3}.spui-PaginationItem-link[aria-disabled]:focus-visible{outline:none}.spui-PaginationItem-link:not([aria-disabled]):focus-visible{outline:2px solid var(--color-focus-clarity);outline-offset:1px}.spui-PaginationItem-icon{box-sizing:border-box;height:24px;padding:0 4px;width:24px}.spui-PaginationItem-link--prev{flex-direction:row-reverse}.spui-PaginationItem-link--prev .spui-PaginationItem-label{padding-right:8px}.spui-PaginationItem-link--next .spui-PaginationItem-label{padding-left:8px}@media (hover:hover){.spui-PaginationItem-link:not([aria-disabled]):hover{background:var(--color-surface-tertiary)}}@media screen and (max-width:768px){.spui-PaginationItem-label{display:none}}:root{--Pagination-tapHighlightColor:var(--color-tap-highlight-base)}.spui-Pagination{align-items:center;display:flex;flex-direction:column}.spui-Pagination-list{align-items:center;display:flex;list-style:none;margin:0;padding:0}.spui-Pagination-item{align-items:center;display:flex;margin:0 5px}.spui-Pagination-item--first,.spui-Pagination-item--last{margin:0}.spui-Pagination-horizontal{color:var(--color-object-low-emphasis)}.spui-Pagination-link{align-items:center;background:none;border:none;border-radius:12px;box-sizing:border-box;display:flex;font-size:.875em;height:40px;justify-content:center;line-height:1.3;margin:0;min-width:40px;padding:0 4px;position:relative;-webkit-tap-highlight-color:var(--Pagination-tapHighlightColor);text-decoration:none}.spui-Pagination-link:not([aria-current]){background:var(--color-surface-tertiary);color:var(--color-text-medium-emphasis);font-weight:700}.spui-Pagination-link:focus:not(:focus-visible){outline:none}.spui-Pagination-link[aria-current]{border:1px solid var(--color-border-low-emphasis);color:var(--color-text-low-emphasis)}.spui-Pagination-link:focus-visible{outline:2px solid var(--color-focus-clarity);outline-offset:1px}@media (hover:hover){.spui-Pagination-link:not([aria-current]):hover{background-color:var(--color-surface-quaternary)}}.spui-Pagination-count{color:var(--color-text-low-emphasis);font-size:.8125em;line-height:1.3;margin:12px 0 0;padding:0}.spui-Pagination-horizontal+.spui-Pagination-link,.spui-Pagination-link+.spui-Pagination-horizontal{margin-left:8px}@media screen and (max-width:414px){.spui-Pagination-item
|
|
1
|
+
.spui-PaginationItem-link{align-items:center;background:none;border:none;border-radius:12px;box-sizing:border-box;color:var(--color-text-medium-emphasis);display:flex;font-size:.875em;font-weight:700;height:40px;justify-content:center;line-height:1.3;margin:0;min-width:40px;padding:0;position:relative;-webkit-tap-highlight-color:var(--Pagination-tapHighlightColor);text-decoration:none}.spui-PaginationItem-link--first[aria-disabled],.spui-PaginationItem-link--last[aria-disabled],.spui-PaginationItem-link--next[aria-disabled],.spui-PaginationItem-link--prev[aria-disabled]{opacity:.3}.spui-PaginationItem-link[aria-disabled]:focus-visible{outline:none}.spui-PaginationItem-link:not([aria-disabled]):focus-visible{outline:2px solid var(--color-focus-clarity);outline-offset:1px}.spui-PaginationItem-icon{box-sizing:border-box;height:24px;padding:0 4px;width:24px}.spui-PaginationItem-link--prev{flex-direction:row-reverse}.spui-PaginationItem-link--prev .spui-PaginationItem-label{padding-right:8px}.spui-PaginationItem-link--next .spui-PaginationItem-label{padding-left:8px}@media (hover:hover){.spui-PaginationItem-link:not([aria-disabled]):hover{background:var(--color-surface-tertiary)}}@media screen and (max-width:768px){.spui-PaginationItem-label{display:none}}:root{--Pagination-tapHighlightColor:var(--color-tap-highlight-base)}.spui-Pagination{align-items:center;display:flex;flex-direction:column}.spui-Pagination-list{align-items:center;display:flex;list-style:none;margin:0;padding:0}.spui-Pagination-item{align-items:center;display:flex;margin:0 5px}.spui-Pagination-item--first,.spui-Pagination-item--last{margin:0}.spui-Pagination-horizontal{color:var(--color-object-low-emphasis)}.spui-Pagination-link{align-items:center;background:none;border:none;border-radius:12px;box-sizing:border-box;display:flex;font-size:.875em;height:40px;justify-content:center;line-height:1.3;margin:0;min-width:40px;padding:0 4px;position:relative;-webkit-tap-highlight-color:var(--Pagination-tapHighlightColor);text-decoration:none}.spui-Pagination-link:not([aria-current]){background:var(--color-surface-tertiary);color:var(--color-text-medium-emphasis);font-weight:700}.spui-Pagination-link:focus:not(:focus-visible){outline:none}.spui-Pagination-link[aria-current]{border:1px solid var(--color-border-low-emphasis);color:var(--color-text-low-emphasis)}.spui-Pagination-link:focus-visible{outline:2px solid var(--color-focus-clarity);outline-offset:1px}@media (hover:hover){.spui-Pagination-link:not([aria-current]):hover{background-color:var(--color-surface-quaternary)}}.spui-Pagination-count{color:var(--color-text-low-emphasis);font-size:.8125em;line-height:1.3;margin:12px 0 0;padding:0}.spui-Pagination-horizontal+.spui-Pagination-link,.spui-Pagination-link+.spui-Pagination-horizontal{margin-left:8px}@media screen and (max-width:414px){.spui-Pagination-item--hidden{display:none}}@media screen and (max-width:360px){.spui-Pagination-item--first,.spui-Pagination-item--last{display:none}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAM3C,UAAU,KAAM,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACvD,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,CACZ,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,EACtD,UAAU,EAAE,MAAM,KACf,IAAI,CAAC;IACV,SAAS,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;CAC3C;AAID,eAAO,MAAM,UAAU,UAAW,KAAK,
|
|
1
|
+
{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAM3C,UAAU,KAAM,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACvD,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,CACZ,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,EACtD,UAAU,EAAE,MAAM,KACf,IAAI,CAAC;IACV,SAAS,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;CAC3C;AAID,eAAO,MAAM,UAAU,UAAW,KAAK,gBAoJtC,CAAC"}
|
package/Pagination/Pagination.js
CHANGED
|
@@ -56,12 +56,10 @@ var useShowItem_1 = require("./hooks/useShowItem");
|
|
|
56
56
|
var BLOCK_NAME = 'spui-Pagination';
|
|
57
57
|
var Pagination = function (props) {
|
|
58
58
|
var current = props.current, total = props.total, _a = props.showCount, showCount = _a === void 0 ? false : _a, _b = props.showPrevNext, showPrevNext = _b === void 0 ? true : _b, _c = props.showFirstLast, showFirstLast = _c === void 0 ? false : _c, onPageChange = props.onPageChange, createUrl = props.createUrl, className = props.className, rest = __rest(props, ["current", "total", "showCount", "showPrevNext", "showFirstLast", "onPageChange", "createUrl", "className"]);
|
|
59
|
-
var pageItem = 5;
|
|
60
59
|
var _d = (0, useShowItem_1.useShowItem)({
|
|
61
60
|
current: current,
|
|
62
61
|
total: total,
|
|
63
|
-
|
|
64
|
-
}), displayItem = _d.displayItem, showPrevHorizontal = _d.showPrevHorizontal, showNextHorizontal = _d.showNextHorizontal;
|
|
62
|
+
}), displayItem = _d.displayItem, showPrevHorizontal = _d.showPrevHorizontal, showNextHorizontal = _d.showNextHorizontal, hideDisplayItem = _d.hideDisplayItem;
|
|
65
63
|
var handleClick = (0, react_1.useCallback)(function (event, pageNumber) {
|
|
66
64
|
onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(event, pageNumber);
|
|
67
65
|
}, [onPageChange]);
|
|
@@ -73,15 +71,25 @@ var Pagination = function (props) {
|
|
|
73
71
|
react_1.default.createElement(PaginationItem_1.default, { type: "prev", current: current, total: total, onClick: handleClick, createUrl: createUrl }))),
|
|
74
72
|
displayItem.map(function (pageNumber, index) {
|
|
75
73
|
var isCurrent = current === pageNumber;
|
|
74
|
+
var isHidden = showPrevNext &&
|
|
75
|
+
hideDisplayItem &&
|
|
76
|
+
(current - 1 === pageNumber || current + 1 === pageNumber);
|
|
76
77
|
var hasRelAttribute = current === pageNumber + 1;
|
|
77
|
-
|
|
78
|
-
|
|
78
|
+
var showPrevMenuHorizontal = index === 0 && showPrevHorizontal;
|
|
79
|
+
var showNextMenuHorizontal = index === displayItem.length - 1 && showNextHorizontal;
|
|
80
|
+
return (react_1.default.createElement("li", { className: [
|
|
81
|
+
"".concat(BLOCK_NAME, "-item"),
|
|
82
|
+
isHidden && "".concat(BLOCK_NAME, "-item--hidden"),
|
|
83
|
+
]
|
|
84
|
+
.filter(Boolean)
|
|
85
|
+
.join(' '), key: "pagination-item-".concat(pageNumber) },
|
|
86
|
+
showNextMenuHorizontal && (react_1.default.createElement(MenuHorizontal_1.default, { "aria-hidden": "true", className: "".concat(BLOCK_NAME, "-horizontal") })),
|
|
79
87
|
react_1.default.createElement("a", { className: "".concat(BLOCK_NAME, "-link"), rel: hasRelAttribute ? undefined : 'nofollow', href: isCurrent ? undefined : createUrl(pageNumber), "aria-current": isCurrent ? 'page' : undefined, "aria-disabled": isCurrent ? true : undefined, onClick: isCurrent
|
|
80
88
|
? undefined
|
|
81
89
|
: function (e) {
|
|
82
90
|
handleClick(e, pageNumber);
|
|
83
91
|
}, "aria-label": "".concat(pageNumber, "\u30DA\u30FC\u30B8\u76EE") }, pageNumber),
|
|
84
|
-
|
|
92
|
+
showPrevMenuHorizontal && (react_1.default.createElement(MenuHorizontal_1.default, { "aria-hidden": "true", className: "".concat(BLOCK_NAME, "-horizontal") }))));
|
|
85
93
|
}),
|
|
86
94
|
showPrevNext && (react_1.default.createElement("li", { className: "".concat(BLOCK_NAME, "-item ").concat(BLOCK_NAME, "-item--next") },
|
|
87
95
|
react_1.default.createElement(PaginationItem_1.default, { type: "next", current: current, total: total, onClick: handleClick, createUrl: createUrl }))),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA2C;AAC3C,0EAAoD;AAEpD,oEAA8C;AAC9C,mDAAkD;AAelD,IAAM,UAAU,GAAG,iBAAiB,CAAC;AAE9B,IAAM,UAAU,GAAG,UAAC,KAAY;IAEnC,IAAA,OAAO,GASL,KAAK,QATA,EACP,KAAK,GAQH,KAAK,MARF,EACL,KAOE,KAAK,UAPU,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,KAME,KAAK,aANY,EAAnB,YAAY,mBAAG,IAAI,KAAA,EACnB,KAKE,KAAK,cALc,EAArB,aAAa,mBAAG,KAAK,KAAA,EACrB,YAAY,GAIV,KAAK,aAJK,EACZ,SAAS,GAGP,KAAK,UAHE,EACT,SAAS,GAEP,KAAK,UAFE,EACN,IAAI,UACL,KAAK,EAVH,4GAUL,CADQ,CACC;
|
|
1
|
+
{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"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"}
|
|
@@ -5,11 +5,9 @@ import { useShowItem } from './hooks/useShowItem';
|
|
|
5
5
|
const BLOCK_NAME = 'spui-Pagination';
|
|
6
6
|
export const Pagination = (props) => {
|
|
7
7
|
const { current, total, showCount = false, showPrevNext = true, showFirstLast = false, onPageChange, createUrl, className, ...rest } = props;
|
|
8
|
-
const
|
|
9
|
-
const { displayItem, showPrevHorizontal, showNextHorizontal } = useShowItem({
|
|
8
|
+
const { displayItem, showPrevHorizontal, showNextHorizontal, hideDisplayItem, } = useShowItem({
|
|
10
9
|
current,
|
|
11
10
|
total,
|
|
12
|
-
pageItem,
|
|
13
11
|
});
|
|
14
12
|
const handleClick = useCallback((event, pageNumber) => {
|
|
15
13
|
onPageChange?.(event, pageNumber);
|
|
@@ -22,15 +20,25 @@ export const Pagination = (props) => {
|
|
|
22
20
|
React.createElement(PaginationItem, { type: "prev", current: current, total: total, onClick: handleClick, createUrl: createUrl }))),
|
|
23
21
|
displayItem.map((pageNumber, index) => {
|
|
24
22
|
const isCurrent = current === pageNumber;
|
|
23
|
+
const isHidden = showPrevNext &&
|
|
24
|
+
hideDisplayItem &&
|
|
25
|
+
(current - 1 === pageNumber || current + 1 === pageNumber);
|
|
25
26
|
const hasRelAttribute = current === pageNumber + 1;
|
|
26
|
-
|
|
27
|
-
|
|
27
|
+
const showPrevMenuHorizontal = index === 0 && showPrevHorizontal;
|
|
28
|
+
const showNextMenuHorizontal = index === displayItem.length - 1 && showNextHorizontal;
|
|
29
|
+
return (React.createElement("li", { className: [
|
|
30
|
+
`${BLOCK_NAME}-item`,
|
|
31
|
+
isHidden && `${BLOCK_NAME}-item--hidden`,
|
|
32
|
+
]
|
|
33
|
+
.filter(Boolean)
|
|
34
|
+
.join(' '), key: `pagination-item-${pageNumber}` },
|
|
35
|
+
showNextMenuHorizontal && (React.createElement(MenuHorizontal, { "aria-hidden": "true", className: `${BLOCK_NAME}-horizontal` })),
|
|
28
36
|
React.createElement("a", { className: `${BLOCK_NAME}-link`, rel: hasRelAttribute ? undefined : 'nofollow', href: isCurrent ? undefined : createUrl(pageNumber), "aria-current": isCurrent ? 'page' : undefined, "aria-disabled": isCurrent ? true : undefined, onClick: isCurrent
|
|
29
37
|
? undefined
|
|
30
38
|
: (e) => {
|
|
31
39
|
handleClick(e, pageNumber);
|
|
32
40
|
}, "aria-label": `${pageNumber}ページ目` }, pageNumber),
|
|
33
|
-
|
|
41
|
+
showPrevMenuHorizontal && (React.createElement(MenuHorizontal, { "aria-hidden": "true", className: `${BLOCK_NAME}-horizontal` }))));
|
|
34
42
|
}),
|
|
35
43
|
showPrevNext && (React.createElement("li", { className: `${BLOCK_NAME}-item ${BLOCK_NAME}-item--next` },
|
|
36
44
|
React.createElement(PaginationItem, { type: "next", current: current, total: total, onClick: handleClick, createUrl: createUrl }))),
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
declare type Payload = {
|
|
2
2
|
current: number;
|
|
3
3
|
total: number;
|
|
4
|
-
pageItem: number;
|
|
5
4
|
};
|
|
6
|
-
export declare function useShowItem({ current, total
|
|
5
|
+
export declare function useShowItem({ current, total }: Payload): {
|
|
7
6
|
displayItem: number[];
|
|
8
7
|
showPrevHorizontal: boolean;
|
|
9
8
|
showNextHorizontal: boolean;
|
|
9
|
+
hideDisplayItem: boolean;
|
|
10
10
|
};
|
|
11
11
|
export {};
|
|
12
12
|
//# sourceMappingURL=useShowItem.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useShowItem.d.ts","sourceRoot":"","sources":["../../../src/Pagination/hooks/useShowItem.ts"],"names":[],"mappings":"AAEA,aAAK,OAAO,GAAG;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"useShowItem.d.ts","sourceRoot":"","sources":["../../../src/Pagination/hooks/useShowItem.ts"],"names":[],"mappings":"AAEA,aAAK,OAAO,GAAG;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAIF,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,OAAO;;;;;EAiCtD"}
|
|
@@ -2,10 +2,15 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useShowItem = void 0;
|
|
4
4
|
var react_1 = require("react");
|
|
5
|
+
var MAX_PAGE_ITEM = 5;
|
|
5
6
|
function useShowItem(_a) {
|
|
6
|
-
var current = _a.current, total = _a.total
|
|
7
|
+
var current = _a.current, total = _a.total;
|
|
7
8
|
var displayItem = (0, react_1.useMemo)(function () {
|
|
8
|
-
if (
|
|
9
|
+
if (total < MAX_PAGE_ITEM) {
|
|
10
|
+
// 総ページ数がMAX_PAGE_ITEMよりも小さい場合
|
|
11
|
+
return Array.from({ length: total }, function (_element, index) { return index + 1; });
|
|
12
|
+
}
|
|
13
|
+
else if (current === 1 || current === 2) {
|
|
9
14
|
// 現在値が1か2の場合は"1,2,3,4,total"とする
|
|
10
15
|
return [1, 2, 3, 4, total];
|
|
11
16
|
}
|
|
@@ -19,10 +24,17 @@ function useShowItem(_a) {
|
|
|
19
24
|
}
|
|
20
25
|
}, [current, total]);
|
|
21
26
|
// totalは表示数超えている前提で、前から2つ目のアイテムが2より大きいかどうか（最初が連続した数字じゃないことをチェック）
|
|
22
|
-
var showPrevHorizontal = total >
|
|
27
|
+
var showPrevHorizontal = total > MAX_PAGE_ITEM && 2 < displayItem[1];
|
|
23
28
|
// totalは表示数超えている前提で、後ろから2つ目のアイテムがtotal-1より小さいか（最後が連続した数字じゃないことをチェック）
|
|
24
|
-
var showNextHorizontal = total >
|
|
25
|
-
|
|
29
|
+
var showNextHorizontal = total > MAX_PAGE_ITEM && displayItem[MAX_PAGE_ITEM - 2] < total - 1;
|
|
30
|
+
// 総ページ数が5件より大きい場合
|
|
31
|
+
var hideDisplayItem = total > MAX_PAGE_ITEM;
|
|
32
|
+
return {
|
|
33
|
+
displayItem: displayItem,
|
|
34
|
+
showPrevHorizontal: showPrevHorizontal,
|
|
35
|
+
showNextHorizontal: showNextHorizontal,
|
|
36
|
+
hideDisplayItem: hideDisplayItem,
|
|
37
|
+
};
|
|
26
38
|
}
|
|
27
39
|
exports.useShowItem = useShowItem;
|
|
28
40
|
//# sourceMappingURL=useShowItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useShowItem.js","sourceRoot":"","sources":["../../../src/Pagination/hooks/useShowItem.ts"],"names":[],"mappings":";;;AAAA,+BAAgC;
|
|
1
|
+
{"version":3,"file":"useShowItem.js","sourceRoot":"","sources":["../../../src/Pagination/hooks/useShowItem.ts"],"names":[],"mappings":";;;AAAA,+BAAgC;AAOhC,IAAM,aAAa,GAAG,CAAC,CAAC;AAExB,SAAgB,WAAW,CAAC,EAA2B;QAAzB,OAAO,aAAA,EAAE,KAAK,WAAA;IAC1C,IAAM,WAAW,GAAG,IAAA,eAAO,EAAC;QAC1B,IAAI,KAAK,GAAG,aAAa,EAAE;YACzB,8BAA8B;YAC9B,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,UAAC,QAAQ,EAAE,KAAK,IAAK,OAAA,KAAK,GAAG,CAAC,EAAT,CAAS,CAAC,CAAC;SACtE;aAAM,IAAI,OAAO,KAAK,CAAC,IAAI,OAAO,KAAK,CAAC,EAAE;YACzC,gCAAgC;YAChC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC;SAC5B;aAAM,IAAI,OAAO,KAAK,KAAK,IAAI,OAAO,KAAK,KAAK,GAAG,CAAC,EAAE;YACrD,2CAA2C;YAC3C,OAAO,CAAC,CAAC,EAAE,OAAO,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;SACtD;aAAM;YACL,+CAA+C;YAC/C,OAAO,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;SACpD;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IAErB,iEAAiE;IACjE,IAAM,kBAAkB,GAAG,KAAK,GAAG,aAAa,IAAI,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;IAEvE,qEAAqE;IACrE,IAAM,kBAAkB,GACtB,KAAK,GAAG,aAAa,IAAI,WAAW,CAAC,aAAa,GAAG,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;IAEtE,kBAAkB;IAClB,IAAM,eAAe,GAAG,KAAK,GAAG,aAAa,CAAC;IAE9C,OAAO;QACL,WAAW,aAAA;QACX,kBAAkB,oBAAA;QAClB,kBAAkB,oBAAA;QAClB,eAAe,iBAAA;KAChB,CAAC;AACJ,CAAC;AAjCD,kCAiCC"}
|
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
import { useMemo } from 'react';
|
|
2
|
-
|
|
2
|
+
const MAX_PAGE_ITEM = 5;
|
|
3
|
+
export function useShowItem({ current, total }) {
|
|
3
4
|
const displayItem = useMemo(() => {
|
|
4
|
-
if (
|
|
5
|
+
if (total < MAX_PAGE_ITEM) {
|
|
6
|
+
// 総ページ数がMAX_PAGE_ITEMよりも小さい場合
|
|
7
|
+
return Array.from({ length: total }, (_element, index) => index + 1);
|
|
8
|
+
}
|
|
9
|
+
else if (current === 1 || current === 2) {
|
|
5
10
|
// 現在値が1か2の場合は"1,2,3,4,total"とする
|
|
6
11
|
return [1, 2, 3, 4, total];
|
|
7
12
|
}
|
|
@@ -15,8 +20,15 @@ export function useShowItem({ current, total, pageItem = 5 }) {
|
|
|
15
20
|
}
|
|
16
21
|
}, [current, total]);
|
|
17
22
|
// totalは表示数超えている前提で、前から2つ目のアイテムが2より大きいかどうか（最初が連続した数字じゃないことをチェック）
|
|
18
|
-
const showPrevHorizontal = total >
|
|
23
|
+
const showPrevHorizontal = total > MAX_PAGE_ITEM && 2 < displayItem[1];
|
|
19
24
|
// totalは表示数超えている前提で、後ろから2つ目のアイテムがtotal-1より小さいか（最後が連続した数字じゃないことをチェック）
|
|
20
|
-
const showNextHorizontal = total >
|
|
21
|
-
|
|
25
|
+
const showNextHorizontal = total > MAX_PAGE_ITEM && displayItem[MAX_PAGE_ITEM - 2] < total - 1;
|
|
26
|
+
// 総ページ数が5件より大きい場合
|
|
27
|
+
const hideDisplayItem = total > MAX_PAGE_ITEM;
|
|
28
|
+
return {
|
|
29
|
+
displayItem,
|
|
30
|
+
showPrevHorizontal,
|
|
31
|
+
showNextHorizontal,
|
|
32
|
+
hideDisplayItem,
|
|
33
|
+
};
|
|
22
34
|
}
|
package/SnackBar/SnackBar.d.ts
CHANGED
|
@@ -1,22 +1,16 @@
|
|
|
1
1
|
import React, { ReactNode } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { StackNotificationComponentProps } from '../StackNotificationManager/StackNotificationManager';
|
|
3
3
|
declare type Variant = 'information' | 'confirmation' | 'error';
|
|
4
|
-
declare type Props = {
|
|
4
|
+
declare type Props = StackNotificationComponentProps<{
|
|
5
5
|
children?: React.ReactElement;
|
|
6
6
|
active?: boolean;
|
|
7
|
-
offset?: {
|
|
8
|
-
[K in keyof StackPositionOffset]?: StackPositionOffset[K];
|
|
9
|
-
};
|
|
10
7
|
duration?: number;
|
|
11
8
|
onHide?: () => void;
|
|
12
|
-
position?: StackPosition;
|
|
13
9
|
variant?: Variant;
|
|
14
|
-
|
|
15
|
-
stackPosition?: number;
|
|
16
|
-
};
|
|
10
|
+
}>;
|
|
17
11
|
export declare const BLOCK_NAME = "spui-SnackBar";
|
|
18
12
|
export declare const ANIMATION_DURATION = 300;
|
|
19
|
-
export declare const
|
|
13
|
+
export declare const DISPLAYING_TIMEOUT_DURATION: number;
|
|
20
14
|
export declare const SnackBar: {
|
|
21
15
|
Frame: ({ children, active, position, offset, onHide, variant, stackPosition, setContentHeight, }: Props) => React.ReactElement;
|
|
22
16
|
Icon: React.FC<{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SnackBar.d.ts","sourceRoot":"","sources":["../../src/SnackBar/SnackBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAOZ,SAAS,
|
|
1
|
+
{"version":3,"file":"SnackBar.d.ts","sourceRoot":"","sources":["../../src/SnackBar/SnackBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAOZ,SAAS,EAGV,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,+BAA+B,EAAE,MAAM,sDAAsD,CAAC;AAEvG,aAAK,OAAO,GAAG,aAAa,GAAG,cAAc,GAAG,OAAO,CAAC;AAExD,aAAK,KAAK,GAAG,+BAA+B,CAAC;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH,eAAO,MAAM,UAAU,kBAAkB,CAAC;AAG1C,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAGtC,eAAO,MAAM,2BAA2B,QAAoC,CAAC;AA0K7E,eAAO,MAAM,QAAQ;uGAzJlB,KAAK,KAAG,MAAM,YAAY;;kBAwGF,SAAS;;;kBAGT,SAAS;;;eAIzB,SAAS;kBAAY,SAAS;;;eAqB9B,SAAS;kBAAY,SAAS;;CA2BxC,CAAC"}
|
package/SnackBar/SnackBar.js
CHANGED
|
@@ -45,8 +45,9 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
45
45
|
return t;
|
|
46
46
|
};
|
|
47
47
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
48
|
-
exports.SnackBar = exports.
|
|
48
|
+
exports.SnackBar = exports.DISPLAYING_TIMEOUT_DURATION = exports.ANIMATION_DURATION = exports.BLOCK_NAME = void 0;
|
|
49
49
|
var react_1 = __importStar(require("react"));
|
|
50
|
+
var StackNotificationManager_1 = require("../StackNotificationManager");
|
|
50
51
|
var Icon_1 = require("../Icon");
|
|
51
52
|
var IconButton_1 = require("../IconButton");
|
|
52
53
|
var TextLink_1 = require("../TextLink/TextLink");
|
|
@@ -54,93 +55,34 @@ var TextButton_1 = require("../TextButton/TextButton");
|
|
|
54
55
|
exports.BLOCK_NAME = 'spui-SnackBar';
|
|
55
56
|
// Duration for css animation.
|
|
56
57
|
exports.ANIMATION_DURATION = 300;
|
|
57
|
-
|
|
58
|
-
|
|
58
|
+
var MAX_DURATION = 10000;
|
|
59
|
+
exports.DISPLAYING_TIMEOUT_DURATION = MAX_DURATION - exports.ANIMATION_DURATION;
|
|
59
60
|
var DEFAULT_VARIANT = 'information';
|
|
60
61
|
var Frame = function (_a) {
|
|
61
62
|
var _b;
|
|
62
|
-
var _c, _d, _e, _f;
|
|
63
|
-
var
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
};
|
|
72
|
-
var formattedDuration = exports.MAX_DURATION - exports.ANIMATION_DURATION;
|
|
73
|
-
var timeoutID = (0, react_1.useRef)(null);
|
|
74
|
-
var _m = (0, react_1.useState)(0), clientHeight = _m[0], setClientHeight = _m[1];
|
|
75
|
-
var _o = (0, react_1.useState)(false), shouldAnimation = _o[0], setShouldAnimation = _o[1];
|
|
76
|
-
var _p = (0, react_1.useState)(false), active = _p[0], setActive = _p[1];
|
|
77
|
-
var setIsShowWithTimeout = (0, react_1.useCallback)(function () {
|
|
78
|
-
// Out animation is executed after `formattedDuration` seconds.
|
|
79
|
-
if (timeoutID.current === null && isShow) {
|
|
80
|
-
timeoutID.current = window.setTimeout(function () {
|
|
81
|
-
setIsShow(false);
|
|
82
|
-
}, formattedDuration);
|
|
83
|
-
}
|
|
84
|
-
}, [isShow, timeoutID, setIsShow, formattedDuration]);
|
|
85
|
-
var resetTimeout = (0, react_1.useCallback)(function () {
|
|
86
|
-
if (timeoutID.current) {
|
|
87
|
-
window.clearTimeout(timeoutID.current);
|
|
88
|
-
timeoutID.current = null;
|
|
89
|
-
}
|
|
90
|
-
}, [timeoutID]);
|
|
91
|
-
var handleTransitionEnd = (0, react_1.useCallback)(function () {
|
|
92
|
-
if (onHide && !isShow) {
|
|
93
|
-
onHide();
|
|
94
|
-
setActive(false);
|
|
95
|
-
timeoutID.current = null;
|
|
96
|
-
}
|
|
97
|
-
}, [isShow, onHide]);
|
|
98
|
-
var handleOnClickCloseButton = (0, react_1.useCallback)(function () {
|
|
99
|
-
setIsShow(false);
|
|
100
|
-
}, []);
|
|
101
|
-
(0, react_1.useEffect)(function () {
|
|
102
|
-
// Animation is not stopped even if `active` props is changed while running animation.
|
|
103
|
-
if (active && timeoutID.current === null) {
|
|
104
|
-
// Wait for applying transition until style is determined.
|
|
105
|
-
setShouldAnimation(true);
|
|
106
|
-
setIsShow(true);
|
|
107
|
-
}
|
|
108
|
-
if (!active) {
|
|
109
|
-
setShouldAnimation(false);
|
|
110
|
-
}
|
|
111
|
-
}, [active]);
|
|
112
|
-
(0, react_1.useEffect)(function () {
|
|
113
|
-
setIsShowWithTimeout();
|
|
114
|
-
return resetTimeout;
|
|
115
|
-
}, [setIsShowWithTimeout, resetTimeout]);
|
|
116
|
-
(0, react_1.useEffect)(function () {
|
|
117
|
-
if (_active) {
|
|
118
|
-
setActive(true);
|
|
119
|
-
}
|
|
120
|
-
if (!_active && isShow) {
|
|
121
|
-
setIsShow(false);
|
|
122
|
-
}
|
|
123
|
-
}, [_active, isShow]);
|
|
124
|
-
(0, react_1.useEffect)(function () {
|
|
125
|
-
setContentHeight === null || setContentHeight === void 0 ? void 0 : setContentHeight(clientHeight + VERTICAL_GAP);
|
|
126
|
-
}, [clientHeight, setContentHeight]);
|
|
127
|
-
var positionPrefix = position.startsWith('top') ? 'top' : 'bottom';
|
|
128
|
-
var positionSuffix = position.slice(positionPrefix.length).toLowerCase();
|
|
129
|
-
var orderOffsetTop = stackPosition + offset.top;
|
|
130
|
-
var orderOffsetBottom = stackPosition + offset.bottom;
|
|
63
|
+
var children = _a.children, _active = _a.active, _c = _a.position, _position = _c === void 0 ? 'topCenter' : _c, _d = _a.offset, _offset = _d === void 0 ? {} : _d, onHide = _a.onHide, _e = _a.variant, variant = _e === void 0 ? DEFAULT_VARIANT : _e, _f = _a.stackPosition, stackPosition = _f === void 0 ? 0 : _f, setContentHeight = _a.setContentHeight;
|
|
64
|
+
var _g = (0, StackNotificationManager_1.useStackNotificationComponent)({
|
|
65
|
+
active: _active,
|
|
66
|
+
position: _position,
|
|
67
|
+
offset: _offset,
|
|
68
|
+
onHide: onHide,
|
|
69
|
+
stackPosition: stackPosition,
|
|
70
|
+
setContentHeight: setContentHeight,
|
|
71
|
+
displayingTimeout: exports.DISPLAYING_TIMEOUT_DURATION,
|
|
72
|
+
}), isShow = _g.isShow, active = _g.active, shouldAnimation = _g.shouldAnimation, position = _g.position, orderOffset = _g.orderOffset, offset = _g.offset, initialHeight = _g.initialHeight, setIsShow = _g.setIsShow, _h = _g.focusEvent, setIsShowWithTimeout = _h.setIsShowWithTimeout, resetTimeout = _h.resetTimeout, setClientHeight = _g.setClientHeight, handleTransitionEnd = _g.handleTransitionEnd, handleOnClickCloseButton = _g.handleOnClickCloseButton;
|
|
131
73
|
return (react_1.default.createElement("div", { style: (_b = {},
|
|
132
|
-
_b['--SnackBar--initial-height-top'] = "".concat(
|
|
133
|
-
_b['--SnackBar--initial-height-bottom'] = "".concat(
|
|
134
|
-
_b['--SnackBar--order-offset-top'] = "".concat(
|
|
135
|
-
_b['--SnackBar--order-offset-bottom'] = "".concat(-
|
|
74
|
+
_b['--SnackBar--initial-height-top'] = "".concat(initialHeight.top, "px"),
|
|
75
|
+
_b['--SnackBar--initial-height-bottom'] = "".concat(initialHeight.bottom, "px"),
|
|
76
|
+
_b['--SnackBar--order-offset-top'] = "".concat(orderOffset.top, "px"),
|
|
77
|
+
_b['--SnackBar--order-offset-bottom'] = "".concat(-orderOffset.bottom, "px"),
|
|
136
78
|
_b['--SnackBar--offset-top'] = "".concat(offset.top, "px"),
|
|
137
79
|
_b['--SnackBar--offset-bottom'] = "".concat(offset.bottom, "px"),
|
|
138
80
|
_b['--SnackBar--offset-left'] = "".concat(offset.left, "px"),
|
|
139
81
|
_b['--SnackBar--offset-right'] = "".concat(offset.right, "px"),
|
|
140
|
-
_b['--SnackBar--text-align'] =
|
|
82
|
+
_b['--SnackBar--text-align'] = position.horizontal,
|
|
141
83
|
_b), className: [
|
|
142
84
|
exports.BLOCK_NAME,
|
|
143
|
-
"".concat(exports.BLOCK_NAME, "--").concat(
|
|
85
|
+
"".concat(exports.BLOCK_NAME, "--").concat(position.vertical),
|
|
144
86
|
shouldAnimation && "".concat(exports.BLOCK_NAME, "--slide"),
|
|
145
87
|
isShow && "".concat(exports.BLOCK_NAME, "-slide--in"),
|
|
146
88
|
!active && "".concat(exports.BLOCK_NAME, "--hidden"),
|
package/SnackBar/SnackBar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SnackBar.js","sourceRoot":"","sources":["../../src/SnackBar/SnackBar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"SnackBar.js","sourceRoot":"","sources":["../../src/SnackBar/SnackBar.tsx"],"names":[],"mappings":"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"}
|
package/SnackBar/SnackBar.mjs
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import React, { Children, cloneElement,
|
|
1
|
+
import React, { Children, cloneElement, useMemo, } from 'react';
|
|
2
|
+
import { useStackNotificationComponent } from '../StackNotificationManager';
|
|
2
3
|
import { CrossBold } from '../Icon';
|
|
3
4
|
import { IconButton } from '../IconButton';
|
|
4
5
|
import { TextLink as SpindleTextLink } from '../TextLink/TextLink';
|
|
@@ -6,90 +7,32 @@ import { TextButton as SpindleTextButton } from '../TextButton/TextButton';
|
|
|
6
7
|
export const BLOCK_NAME = 'spui-SnackBar';
|
|
7
8
|
// Duration for css animation.
|
|
8
9
|
export const ANIMATION_DURATION = 300;
|
|
9
|
-
|
|
10
|
-
const
|
|
10
|
+
const MAX_DURATION = 10000;
|
|
11
|
+
export const DISPLAYING_TIMEOUT_DURATION = MAX_DURATION - ANIMATION_DURATION;
|
|
11
12
|
const DEFAULT_VARIANT = 'information';
|
|
12
|
-
const Frame = ({ children, active: _active, position = 'topCenter', offset: _offset = {}, onHide, variant = DEFAULT_VARIANT, stackPosition = 0, setContentHeight, }) => {
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
const timeoutID = useRef(null);
|
|
23
|
-
const [clientHeight, setClientHeight] = useState(0);
|
|
24
|
-
const [shouldAnimation, setShouldAnimation] = useState(false);
|
|
25
|
-
const [active, setActive] = useState(false);
|
|
26
|
-
const setIsShowWithTimeout = useCallback(() => {
|
|
27
|
-
// Out animation is executed after `formattedDuration` seconds.
|
|
28
|
-
if (timeoutID.current === null && isShow) {
|
|
29
|
-
timeoutID.current = window.setTimeout(() => {
|
|
30
|
-
setIsShow(false);
|
|
31
|
-
}, formattedDuration);
|
|
32
|
-
}
|
|
33
|
-
}, [isShow, timeoutID, setIsShow, formattedDuration]);
|
|
34
|
-
const resetTimeout = useCallback(() => {
|
|
35
|
-
if (timeoutID.current) {
|
|
36
|
-
window.clearTimeout(timeoutID.current);
|
|
37
|
-
timeoutID.current = null;
|
|
38
|
-
}
|
|
39
|
-
}, [timeoutID]);
|
|
40
|
-
const handleTransitionEnd = useCallback(() => {
|
|
41
|
-
if (onHide && !isShow) {
|
|
42
|
-
onHide();
|
|
43
|
-
setActive(false);
|
|
44
|
-
timeoutID.current = null;
|
|
45
|
-
}
|
|
46
|
-
}, [isShow, onHide]);
|
|
47
|
-
const handleOnClickCloseButton = useCallback(() => {
|
|
48
|
-
setIsShow(false);
|
|
49
|
-
}, []);
|
|
50
|
-
useEffect(() => {
|
|
51
|
-
// Animation is not stopped even if `active` props is changed while running animation.
|
|
52
|
-
if (active && timeoutID.current === null) {
|
|
53
|
-
// Wait for applying transition until style is determined.
|
|
54
|
-
setShouldAnimation(true);
|
|
55
|
-
setIsShow(true);
|
|
56
|
-
}
|
|
57
|
-
if (!active) {
|
|
58
|
-
setShouldAnimation(false);
|
|
59
|
-
}
|
|
60
|
-
}, [active]);
|
|
61
|
-
useEffect(() => {
|
|
62
|
-
setIsShowWithTimeout();
|
|
63
|
-
return resetTimeout;
|
|
64
|
-
}, [setIsShowWithTimeout, resetTimeout]);
|
|
65
|
-
useEffect(() => {
|
|
66
|
-
if (_active) {
|
|
67
|
-
setActive(true);
|
|
68
|
-
}
|
|
69
|
-
if (!_active && isShow) {
|
|
70
|
-
setIsShow(false);
|
|
71
|
-
}
|
|
72
|
-
}, [_active, isShow]);
|
|
73
|
-
useEffect(() => {
|
|
74
|
-
setContentHeight?.(clientHeight + VERTICAL_GAP);
|
|
75
|
-
}, [clientHeight, setContentHeight]);
|
|
76
|
-
const positionPrefix = position.startsWith('top') ? 'top' : 'bottom';
|
|
77
|
-
const positionSuffix = position.slice(positionPrefix.length).toLowerCase();
|
|
78
|
-
const orderOffsetTop = stackPosition + offset.top;
|
|
79
|
-
const orderOffsetBottom = stackPosition + offset.bottom;
|
|
13
|
+
const Frame = ({ children, active: _active, position: _position = 'topCenter', offset: _offset = {}, onHide, variant = DEFAULT_VARIANT, stackPosition = 0, setContentHeight, }) => {
|
|
14
|
+
const { isShow, active, shouldAnimation, position, orderOffset, offset, initialHeight, setIsShow, focusEvent: { setIsShowWithTimeout, resetTimeout }, setClientHeight, handleTransitionEnd, handleOnClickCloseButton, } = useStackNotificationComponent({
|
|
15
|
+
active: _active,
|
|
16
|
+
position: _position,
|
|
17
|
+
offset: _offset,
|
|
18
|
+
onHide,
|
|
19
|
+
stackPosition,
|
|
20
|
+
setContentHeight,
|
|
21
|
+
displayingTimeout: DISPLAYING_TIMEOUT_DURATION,
|
|
22
|
+
});
|
|
80
23
|
return (React.createElement("div", { style: {
|
|
81
|
-
['--SnackBar--initial-height-top']: `${
|
|
82
|
-
['--SnackBar--initial-height-bottom']: `${
|
|
83
|
-
['--SnackBar--order-offset-top']: `${
|
|
84
|
-
['--SnackBar--order-offset-bottom']: `${-
|
|
24
|
+
['--SnackBar--initial-height-top']: `${initialHeight.top}px`,
|
|
25
|
+
['--SnackBar--initial-height-bottom']: `${initialHeight.bottom}px`,
|
|
26
|
+
['--SnackBar--order-offset-top']: `${orderOffset.top}px`,
|
|
27
|
+
['--SnackBar--order-offset-bottom']: `${-orderOffset.bottom}px`,
|
|
85
28
|
['--SnackBar--offset-top']: `${offset.top}px`,
|
|
86
29
|
['--SnackBar--offset-bottom']: `${offset.bottom}px`,
|
|
87
30
|
['--SnackBar--offset-left']: `${offset.left}px`,
|
|
88
31
|
['--SnackBar--offset-right']: `${offset.right}px`,
|
|
89
|
-
['--SnackBar--text-align']:
|
|
32
|
+
['--SnackBar--text-align']: position.horizontal,
|
|
90
33
|
}, className: [
|
|
91
34
|
BLOCK_NAME,
|
|
92
|
-
`${BLOCK_NAME}--${
|
|
35
|
+
`${BLOCK_NAME}--${position.vertical}`,
|
|
93
36
|
shouldAnimation && `${BLOCK_NAME}--slide`,
|
|
94
37
|
isShow && `${BLOCK_NAME}-slide--in`,
|
|
95
38
|
!active && `${BLOCK_NAME}--hidden`,
|