@openameba/spindle-ui 0.63.2 → 0.64.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/CHANGELOG.md +11 -0
- package/Pagination/Pagination.d.ts +2 -0
- package/Pagination/Pagination.d.ts.map +1 -1
- package/Pagination/Pagination.js +7 -7
- package/Pagination/Pagination.js.map +1 -1
- package/Pagination/Pagination.mjs +7 -7
- package/Pagination/PaginationItem.d.ts +2 -0
- package/Pagination/PaginationItem.d.ts.map +1 -1
- package/Pagination/PaginationItem.js +3 -2
- package/Pagination/PaginationItem.js.map +1 -1
- package/Pagination/PaginationItem.mjs +3 -2
- package/Pagination/helpers/getLinkRelAttribute.d.ts +8 -0
- package/Pagination/helpers/getLinkRelAttribute.d.ts.map +1 -0
- package/Pagination/helpers/getLinkRelAttribute.js +16 -0
- package/Pagination/helpers/getLinkRelAttribute.js.map +1 -0
- package/Pagination/helpers/getLinkRelAttribute.mjs +10 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
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.64.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.63.2...@openameba/spindle-ui@0.64.0) (2023-10-16)
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
- **spindle-ui:** add helper to get rel attribute of each anchor elements ([531c89e](https://github.com/openameba/spindle/commit/531c89e3584a0a02655aa116cb8f8157a58bde8f))
|
|
11
|
+
- **spindle-ui:** add linkFollowType props in Pagination ([e0a6213](https://github.com/openameba/spindle/commit/e0a6213b448033f6a680e127e1733cf4cef2b63f))
|
|
12
|
+
|
|
13
|
+
### BREAKING CHANGES
|
|
14
|
+
|
|
15
|
+
- **spindle-ui:** Pagination requires the 'linkFollowType' property to be set.
|
|
16
|
+
|
|
6
17
|
## [0.63.2](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.63.1...@openameba/spindle-ui@0.63.2) (2023-10-11)
|
|
7
18
|
|
|
8
19
|
### Bug Fixes
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
export declare type LinkFollowType = 'all' | 'none' | 'firstPage';
|
|
2
3
|
interface Props extends React.HTMLAttributes<HTMLElement> {
|
|
3
4
|
current: number;
|
|
4
5
|
total: number;
|
|
6
|
+
linkFollowType: LinkFollowType;
|
|
5
7
|
showTotal?: boolean;
|
|
6
8
|
onPageChange?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>, pageNumber: number) => void;
|
|
7
9
|
createUrl: (pageNumber: number) => string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAOxE,oBAAY,cAAc,GAAG,KAAK,GAAG,MAAM,GAAG,WAAW,CAAC;AAE1D,UAAU,KAAM,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACvD,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,cAAc,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,CACb,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;AAUD,eAAO,MAAM,UAAU,UAAW,KAAK,gBA6KtC,CAAC"}
|
package/Pagination/Pagination.js
CHANGED
|
@@ -53,13 +53,14 @@ var react_1 = __importStar(require("react"));
|
|
|
53
53
|
var MenuHorizontal_1 = __importDefault(require("../Icon/MenuHorizontal"));
|
|
54
54
|
var PaginationItem_1 = __importDefault(require("./PaginationItem"));
|
|
55
55
|
var useShowItem_1 = require("./hooks/useShowItem");
|
|
56
|
+
var getLinkRelAttribute_1 = require("./helpers/getLinkRelAttribute");
|
|
56
57
|
var BLOCK_NAME = 'spui-Pagination';
|
|
57
58
|
// ページ総数の閾値
|
|
58
59
|
var TOTAL_THRESHOLD = 100;
|
|
59
60
|
// ウィンドウリサイズ時の間引き処理時間
|
|
60
61
|
var RESIZE_DELAY_TIME = 800;
|
|
61
62
|
var Pagination = function (props) {
|
|
62
|
-
var current = props.current, total = props.total, _a = props.showTotal, showTotal = _a === void 0 ? false : _a, onPageChange = props.onPageChange, createUrl = props.createUrl, className = props.className, rest = __rest(props, ["current", "total", "showTotal", "onPageChange", "createUrl", "className"]);
|
|
63
|
+
var current = props.current, total = props.total, linkFollowType = props.linkFollowType, _a = props.showTotal, showTotal = _a === void 0 ? false : _a, onPageChange = props.onPageChange, createUrl = props.createUrl, className = props.className, rest = __rest(props, ["current", "total", "linkFollowType", "showTotal", "onPageChange", "createUrl", "className"]);
|
|
63
64
|
var handleMatchMedia = typeof window !== 'undefined' && window.matchMedia
|
|
64
65
|
? window.matchMedia('(max-width: 360px)')
|
|
65
66
|
: undefined;
|
|
@@ -103,16 +104,15 @@ var Pagination = function (props) {
|
|
|
103
104
|
return (react_1.default.createElement("nav", __assign({ "aria-label": "\u30DA\u30FC\u30B8\u30CD\u30FC\u30B7\u30E7\u30F3", className: [BLOCK_NAME, className].filter(Boolean).join(' ').trim() }, rest),
|
|
104
105
|
react_1.default.createElement("ul", { className: "".concat(BLOCK_NAME, "-list") },
|
|
105
106
|
showFirstLast && (react_1.default.createElement("li", { className: "".concat(BLOCK_NAME, "-item ").concat(BLOCK_NAME, "-item--first") },
|
|
106
|
-
react_1.default.createElement(PaginationItem_1.default, { type: "first", current: current, total: total, onClick: handleClick, createUrl: createUrl }))),
|
|
107
|
+
react_1.default.createElement(PaginationItem_1.default, { type: "first", current: current, linkFollowType: linkFollowType, total: total, onClick: handleClick, createUrl: createUrl }))),
|
|
107
108
|
showPrevNext && (react_1.default.createElement("li", { className: "".concat(BLOCK_NAME, "-item ").concat(BLOCK_NAME, "-item--prev") },
|
|
108
|
-
react_1.default.createElement(PaginationItem_1.default, { type: "prev", current: current, total: total, onClick: handleClick, createUrl: createUrl }))),
|
|
109
|
+
react_1.default.createElement(PaginationItem_1.default, { type: "prev", current: current, linkFollowType: linkFollowType, total: total, onClick: handleClick, createUrl: createUrl }))),
|
|
109
110
|
displayItem.map(function (pageNumber, index) {
|
|
110
111
|
var isCurrent = current === pageNumber;
|
|
111
|
-
var hasRelAttribute = current === pageNumber + 1;
|
|
112
112
|
// 数字が隣接していない場合に表示
|
|
113
113
|
var showEllipsis = !!displayItem[index + 1] && displayItem[index + 1] - pageNumber > 1;
|
|
114
114
|
return (react_1.default.createElement("li", { className: "".concat(BLOCK_NAME, "-item"), key: "pagination-item-".concat(pageNumber) },
|
|
115
|
-
react_1.default.createElement("a", { className: "".concat(BLOCK_NAME, "-link"), rel:
|
|
115
|
+
react_1.default.createElement("a", { className: "".concat(BLOCK_NAME, "-link"), rel: (0, getLinkRelAttribute_1.getLinkRelAttribute)({ linkFollowType: linkFollowType, pageNumber: pageNumber }), href: isCurrent ? undefined : createUrl(pageNumber), "aria-current": isCurrent ? 'page' : undefined, "aria-disabled": isCurrent ? true : undefined, onClick: isCurrent
|
|
116
116
|
? undefined
|
|
117
117
|
: function (e) {
|
|
118
118
|
handleClick(e, pageNumber);
|
|
@@ -120,9 +120,9 @@ var Pagination = function (props) {
|
|
|
120
120
|
showEllipsis && (react_1.default.createElement(MenuHorizontal_1.default, { "aria-hidden": "true", className: "".concat(BLOCK_NAME, "-ellipsis") }))));
|
|
121
121
|
}),
|
|
122
122
|
showPrevNext && (react_1.default.createElement("li", { className: "".concat(BLOCK_NAME, "-item ").concat(BLOCK_NAME, "-item--next") },
|
|
123
|
-
react_1.default.createElement(PaginationItem_1.default, { type: "next", current: current, total: total, onClick: handleClick, createUrl: createUrl }))),
|
|
123
|
+
react_1.default.createElement(PaginationItem_1.default, { type: "next", current: current, linkFollowType: linkFollowType, total: total, onClick: handleClick, createUrl: createUrl }))),
|
|
124
124
|
showFirstLast && (react_1.default.createElement("li", { className: "".concat(BLOCK_NAME, "-item ").concat(BLOCK_NAME, "-item--last") },
|
|
125
|
-
react_1.default.createElement(PaginationItem_1.default, { type: "last", current: current, total: total, onClick: handleClick, createUrl: createUrl })))),
|
|
125
|
+
react_1.default.createElement(PaginationItem_1.default, { type: "last", current: current, linkFollowType: linkFollowType, total: total, onClick: handleClick, createUrl: createUrl })))),
|
|
126
126
|
showTotal && (react_1.default.createElement("p", { className: "".concat(BLOCK_NAME, "-total"), "aria-label": "".concat(total, "\u30DA\u30FC\u30B8\u4E2D\u306E").concat(current, "\u30DA\u30FC\u30B8\u76EE") },
|
|
127
127
|
current,
|
|
128
128
|
"/",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAwE;AACxE,0EAAoD;AAEpD,oEAA8C;AAC9C,mDAAkD;
|
|
1
|
+
{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,13 +2,14 @@ import React, { useCallback, useEffect, useState, useRef } from 'react';
|
|
|
2
2
|
import MenuHorizontal from '../Icon/MenuHorizontal';
|
|
3
3
|
import PaginationItem from './PaginationItem';
|
|
4
4
|
import { useShowItem } from './hooks/useShowItem';
|
|
5
|
+
import { getLinkRelAttribute } from './helpers/getLinkRelAttribute';
|
|
5
6
|
const BLOCK_NAME = 'spui-Pagination';
|
|
6
7
|
// ページ総数の閾値
|
|
7
8
|
const TOTAL_THRESHOLD = 100;
|
|
8
9
|
// ウィンドウリサイズ時の間引き処理時間
|
|
9
10
|
const RESIZE_DELAY_TIME = 800;
|
|
10
11
|
export const Pagination = (props) => {
|
|
11
|
-
const { current, total, showTotal = false, onPageChange, createUrl, className, ...rest } = props;
|
|
12
|
+
const { current, total, linkFollowType, showTotal = false, onPageChange, createUrl, className, ...rest } = props;
|
|
12
13
|
const handleMatchMedia = typeof window !== 'undefined' && window.matchMedia
|
|
13
14
|
? window.matchMedia('(max-width: 360px)')
|
|
14
15
|
: undefined;
|
|
@@ -48,16 +49,15 @@ export const Pagination = (props) => {
|
|
|
48
49
|
return (React.createElement("nav", { "aria-label": "\u30DA\u30FC\u30B8\u30CD\u30FC\u30B7\u30E7\u30F3", className: [BLOCK_NAME, className].filter(Boolean).join(' ').trim(), ...rest },
|
|
49
50
|
React.createElement("ul", { className: `${BLOCK_NAME}-list` },
|
|
50
51
|
showFirstLast && (React.createElement("li", { className: `${BLOCK_NAME}-item ${BLOCK_NAME}-item--first` },
|
|
51
|
-
React.createElement(PaginationItem, { type: "first", current: current, total: total, onClick: handleClick, createUrl: createUrl }))),
|
|
52
|
+
React.createElement(PaginationItem, { type: "first", current: current, linkFollowType: linkFollowType, total: total, onClick: handleClick, createUrl: createUrl }))),
|
|
52
53
|
showPrevNext && (React.createElement("li", { className: `${BLOCK_NAME}-item ${BLOCK_NAME}-item--prev` },
|
|
53
|
-
React.createElement(PaginationItem, { type: "prev", current: current, total: total, onClick: handleClick, createUrl: createUrl }))),
|
|
54
|
+
React.createElement(PaginationItem, { type: "prev", current: current, linkFollowType: linkFollowType, total: total, onClick: handleClick, createUrl: createUrl }))),
|
|
54
55
|
displayItem.map((pageNumber, index) => {
|
|
55
56
|
const isCurrent = current === pageNumber;
|
|
56
|
-
const hasRelAttribute = current === pageNumber + 1;
|
|
57
57
|
// 数字が隣接していない場合に表示
|
|
58
58
|
const showEllipsis = !!displayItem[index + 1] && displayItem[index + 1] - pageNumber > 1;
|
|
59
59
|
return (React.createElement("li", { className: `${BLOCK_NAME}-item`, key: `pagination-item-${pageNumber}` },
|
|
60
|
-
React.createElement("a", { className: `${BLOCK_NAME}-link`, rel:
|
|
60
|
+
React.createElement("a", { className: `${BLOCK_NAME}-link`, rel: getLinkRelAttribute({ linkFollowType, pageNumber }), href: isCurrent ? undefined : createUrl(pageNumber), "aria-current": isCurrent ? 'page' : undefined, "aria-disabled": isCurrent ? true : undefined, onClick: isCurrent
|
|
61
61
|
? undefined
|
|
62
62
|
: (e) => {
|
|
63
63
|
handleClick(e, pageNumber);
|
|
@@ -65,9 +65,9 @@ export const Pagination = (props) => {
|
|
|
65
65
|
showEllipsis && (React.createElement(MenuHorizontal, { "aria-hidden": "true", className: `${BLOCK_NAME}-ellipsis` }))));
|
|
66
66
|
}),
|
|
67
67
|
showPrevNext && (React.createElement("li", { className: `${BLOCK_NAME}-item ${BLOCK_NAME}-item--next` },
|
|
68
|
-
React.createElement(PaginationItem, { type: "next", current: current, total: total, onClick: handleClick, createUrl: createUrl }))),
|
|
68
|
+
React.createElement(PaginationItem, { type: "next", current: current, linkFollowType: linkFollowType, total: total, onClick: handleClick, createUrl: createUrl }))),
|
|
69
69
|
showFirstLast && (React.createElement("li", { className: `${BLOCK_NAME}-item ${BLOCK_NAME}-item--last` },
|
|
70
|
-
React.createElement(PaginationItem, { type: "last", current: current, total: total, onClick: handleClick, createUrl: createUrl })))),
|
|
70
|
+
React.createElement(PaginationItem, { type: "last", current: current, linkFollowType: linkFollowType, total: total, onClick: handleClick, createUrl: createUrl })))),
|
|
71
71
|
showTotal && (React.createElement("p", { className: `${BLOCK_NAME}-total`, "aria-label": `${total}ページ中の${current}ページ目` },
|
|
72
72
|
current,
|
|
73
73
|
"/",
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import React, { FC } from 'react';
|
|
2
|
+
import type { LinkFollowType } from './Pagination';
|
|
2
3
|
declare type Props = {
|
|
3
4
|
type: 'first' | 'last' | 'next' | 'prev';
|
|
4
5
|
current: number;
|
|
5
6
|
total: number;
|
|
7
|
+
linkFollowType: LinkFollowType;
|
|
6
8
|
onClick: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>, pageNumber: number) => void;
|
|
7
9
|
createUrl: (pageNumber: number) => string;
|
|
8
10
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationItem.d.ts","sourceRoot":"","sources":["../../src/Pagination/PaginationItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAQlC,aAAK,KAAK,GAAG;IACX,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACzC,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CACP,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,CAAC;AAIF,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"PaginationItem.d.ts","sourceRoot":"","sources":["../../src/Pagination/PaginationItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAQlC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,aAAK,KAAK,GAAG;IACX,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACzC,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,cAAc,CAAC;IAC/B,OAAO,EAAE,CACP,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,CAAC;AAIF,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,KAAK,CA8FpC,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -10,9 +10,10 @@ var ChevronLeftBold_1 = __importDefault(require("../Icon/ChevronLeftBold"));
|
|
|
10
10
|
var TriangleendRightBold_1 = __importDefault(require("../Icon/TriangleendRightBold"));
|
|
11
11
|
var TriangleendLeftBold_1 = __importDefault(require("../Icon/TriangleendLeftBold"));
|
|
12
12
|
var useItemPageNumber_1 = require("./hooks/useItemPageNumber");
|
|
13
|
+
var getLinkRelAttribute_1 = require("./helpers/getLinkRelAttribute");
|
|
13
14
|
var BLOCK_NAME = 'spui-PaginationItem';
|
|
14
15
|
exports.PaginationItem = react_1.default.memo(function PaginationItem(_a) {
|
|
15
|
-
var type = _a.type, current = _a.current, total = _a.total, onClick = _a.onClick, createUrl = _a.createUrl;
|
|
16
|
+
var type = _a.type, current = _a.current, total = _a.total, linkFollowType = _a.linkFollowType, onClick = _a.onClick, createUrl = _a.createUrl;
|
|
16
17
|
var isDisabled = type === 'first' || type === 'prev' ? current === 1 : current === total;
|
|
17
18
|
var isShowLabel = type === 'prev' || type === 'next';
|
|
18
19
|
var pageNumber = (0, useItemPageNumber_1.useItemPageNumber)({
|
|
@@ -47,7 +48,7 @@ exports.PaginationItem = react_1.default.memo(function PaginationItem(_a) {
|
|
|
47
48
|
},
|
|
48
49
|
},
|
|
49
50
|
};
|
|
50
|
-
return (react_1.default.createElement("a", { className: "".concat(BLOCK_NAME, "-link ").concat(BLOCK_NAME, "-link--").concat(type), rel:
|
|
51
|
+
return (react_1.default.createElement("a", { className: "".concat(BLOCK_NAME, "-link ").concat(BLOCK_NAME, "-link--").concat(type), rel: (0, getLinkRelAttribute_1.getLinkRelAttribute)({ linkFollowType: linkFollowType, pageNumber: pageNumber }), "aria-label": itemPropMap[type].label, href: isDisabled ? undefined : createUrl(pageNumber), "aria-disabled": isDisabled ? true : undefined, onClick: isDisabled
|
|
51
52
|
? undefined
|
|
52
53
|
: function (e) {
|
|
53
54
|
onClick(e, pageNumber);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationItem.js","sourceRoot":"","sources":["../../src/Pagination/PaginationItem.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAkC;AAClC,8EAAwD;AACxD,4EAAsD;AACtD,sFAAgE;AAChE,oFAA8D;AAE9D,+DAA8D;
|
|
1
|
+
{"version":3,"file":"PaginationItem.js","sourceRoot":"","sources":["../../src/Pagination/PaginationItem.tsx"],"names":[],"mappings":"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"}
|
|
@@ -4,8 +4,9 @@ import ChevronLeftBold from '../Icon/ChevronLeftBold';
|
|
|
4
4
|
import TriangleendRightBold from '../Icon/TriangleendRightBold';
|
|
5
5
|
import TriangleendLeftBold from '../Icon/TriangleendLeftBold';
|
|
6
6
|
import { useItemPageNumber } from './hooks/useItemPageNumber';
|
|
7
|
+
import { getLinkRelAttribute } from './helpers/getLinkRelAttribute';
|
|
7
8
|
const BLOCK_NAME = 'spui-PaginationItem';
|
|
8
|
-
export const PaginationItem = React.memo(function PaginationItem({ type, current, total, onClick, createUrl }) {
|
|
9
|
+
export const PaginationItem = React.memo(function PaginationItem({ type, current, total, linkFollowType, onClick, createUrl, }) {
|
|
9
10
|
const isDisabled = type === 'first' || type === 'prev' ? current === 1 : current === total;
|
|
10
11
|
const isShowLabel = type === 'prev' || type === 'next';
|
|
11
12
|
const { pageNumber } = useItemPageNumber({
|
|
@@ -40,7 +41,7 @@ export const PaginationItem = React.memo(function PaginationItem({ type, current
|
|
|
40
41
|
},
|
|
41
42
|
},
|
|
42
43
|
};
|
|
43
|
-
return (React.createElement("a", { className: `${BLOCK_NAME}-link ${BLOCK_NAME}-link--${type}`, rel:
|
|
44
|
+
return (React.createElement("a", { className: `${BLOCK_NAME}-link ${BLOCK_NAME}-link--${type}`, rel: getLinkRelAttribute({ linkFollowType, pageNumber }), "aria-label": itemPropMap[type].label, href: isDisabled ? undefined : createUrl(pageNumber), "aria-disabled": isDisabled ? true : undefined, onClick: isDisabled
|
|
44
45
|
? undefined
|
|
45
46
|
: (e) => {
|
|
46
47
|
onClick(e, pageNumber);
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { LinkFollowType } from '../Pagination';
|
|
2
|
+
declare type Payload = {
|
|
3
|
+
linkFollowType: LinkFollowType;
|
|
4
|
+
pageNumber: number;
|
|
5
|
+
};
|
|
6
|
+
export declare function getLinkRelAttribute({ linkFollowType, pageNumber }: Payload): "nofollow" | undefined;
|
|
7
|
+
export {};
|
|
8
|
+
//# sourceMappingURL=getLinkRelAttribute.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getLinkRelAttribute.d.ts","sourceRoot":"","sources":["../../../src/Pagination/helpers/getLinkRelAttribute.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAEpD,aAAK,OAAO,GAAG;IACb,cAAc,EAAE,cAAc,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,EAAE,OAAO,0BAS1E"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.getLinkRelAttribute = void 0;
|
|
4
|
+
function getLinkRelAttribute(_a) {
|
|
5
|
+
var linkFollowType = _a.linkFollowType, pageNumber = _a.pageNumber;
|
|
6
|
+
switch (linkFollowType) {
|
|
7
|
+
case 'all':
|
|
8
|
+
return undefined;
|
|
9
|
+
case 'none':
|
|
10
|
+
return 'nofollow';
|
|
11
|
+
case 'firstPage':
|
|
12
|
+
return pageNumber === 1 ? undefined : 'nofollow';
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
exports.getLinkRelAttribute = getLinkRelAttribute;
|
|
16
|
+
//# sourceMappingURL=getLinkRelAttribute.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getLinkRelAttribute.js","sourceRoot":"","sources":["../../../src/Pagination/helpers/getLinkRelAttribute.ts"],"names":[],"mappings":";;;AAOA,SAAgB,mBAAmB,CAAC,EAAuC;QAArC,cAAc,oBAAA,EAAE,UAAU,gBAAA;IAC9D,QAAQ,cAAc,EAAE;QACtB,KAAK,KAAK;YACR,OAAO,SAAS,CAAC;QACnB,KAAK,MAAM;YACT,OAAO,UAAU,CAAC;QACpB,KAAK,WAAW;YACd,OAAO,UAAU,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC;KACpD;AACH,CAAC;AATD,kDASC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@openameba/spindle-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.64.0",
|
|
4
4
|
"main": "./index.js",
|
|
5
5
|
"module": "./index.mjs",
|
|
6
6
|
"types": "./index.d.ts",
|
|
@@ -102,5 +102,5 @@
|
|
|
102
102
|
"ts-jest": "29.1.1",
|
|
103
103
|
"webpack": "^5.73.0"
|
|
104
104
|
},
|
|
105
|
-
"gitHead": "
|
|
105
|
+
"gitHead": "f8b2b3b23d2d2b7ac274fcab162368d19b680782"
|
|
106
106
|
}
|