@openameba/spindle-ui 0.51.0 → 0.52.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/.scaffdog/component.md +111 -0
- package/.scaffdog/config.ts +3 -0
- package/CHANGELOG.md +74 -0
- package/Dialog/Dialog.d.ts.map +1 -1
- package/Dialog/Dialog.js +4 -3
- package/Dialog/Dialog.js.map +1 -1
- package/Dialog/Dialog.mjs +4 -3
- package/Modal/AppealModal.d.ts.map +1 -1
- package/Modal/AppealModal.js +4 -3
- package/Modal/AppealModal.js.map +1 -1
- package/Modal/AppealModal.mjs +4 -3
- package/Pagination/Pagination.css +1 -1
- package/Pagination/Pagination.d.ts +2 -4
- package/Pagination/Pagination.d.ts.map +1 -1
- package/Pagination/Pagination.js +45 -17
- package/Pagination/Pagination.js.map +1 -1
- package/Pagination/Pagination.mjs +41 -17
- package/Pagination/hooks/useShowItem.d.ts +15 -6
- package/Pagination/hooks/useShowItem.d.ts.map +1 -1
- package/Pagination/hooks/useShowItem.js +51 -31
- package/Pagination/hooks/useShowItem.js.map +1 -1
- package/Pagination/hooks/useShowItem.mjs +44 -31
- package/README.md +21 -0
- package/TextLink/index.d.ts +2 -0
- package/TextLink/index.d.ts.map +1 -0
- package/TextLink/index.js +6 -0
- package/TextLink/index.js.map +1 -0
- package/TextLink/index.mjs +1 -0
- package/index.css +1 -1
- package/index.d.ts +14 -14
- package/index.d.ts.map +1 -1
- package/index.js +5 -5
- package/index.js.map +1 -1
- package/index.mjs +16 -15
- package/package.json +4 -2
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: 'component'
|
|
3
|
+
root: 'src/'
|
|
4
|
+
output: '**/*'
|
|
5
|
+
ignore: []
|
|
6
|
+
questions:
|
|
7
|
+
name: 'Please enter a component name.'
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# `{{ inputs.name | pascal }}/index.ts`
|
|
11
|
+
|
|
12
|
+
```typescript
|
|
13
|
+
export { {{ inputs.name | pascal }} } from './{{ inputs.name | pascal }}';
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
# `{{ inputs.name | pascal }}/{{ inputs.name | pascal }}.tsx`
|
|
17
|
+
|
|
18
|
+
```typescript
|
|
19
|
+
import React from 'react';
|
|
20
|
+
|
|
21
|
+
type Props = {};
|
|
22
|
+
|
|
23
|
+
const BLOCK_NAME = 'spui-{{ inputs.name | pascal }}';
|
|
24
|
+
|
|
25
|
+
export const {{ inputs.name | pascal }}: React.FC<Props> = ({}) => {
|
|
26
|
+
return (
|
|
27
|
+
<div className={BLOCK_NAME}></div>
|
|
28
|
+
);
|
|
29
|
+
};
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
# `{{ inputs.name | pascal }}/{{ inputs.name | pascal }}.css`
|
|
33
|
+
|
|
34
|
+
```css
|
|
35
|
+
.spui-{{ inputs.name | pascal }} {}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
# `{{ inputs.name | pascal }}/{{ inputs.name | pascal }}.stories.mdx`
|
|
39
|
+
|
|
40
|
+
```
|
|
41
|
+
import { Meta, Story, Source } from ‘@storybook/addon-docs/blocks’;
|
|
42
|
+
import { {{ inputs.name | pascal }} } from ‘./{{ inputs.name | pascal }}‘;
|
|
43
|
+
|
|
44
|
+
# {{ inputs.name | pascal }}
|
|
45
|
+
|
|
46
|
+
<Meta title=“{{ inputs.name | pascal }}” component={ {{ inputs.name | pascal }} } />
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
<Source
|
|
51
|
+
language=‘javascript’
|
|
52
|
+
code={`import { {{ inputs.name | pascal }} } from ‘@openameba/spindle-ui’`}
|
|
53
|
+
/>
|
|
54
|
+
|
|
55
|
+
<Source
|
|
56
|
+
language=‘css’
|
|
57
|
+
code={`@import ‘./node_modules/@openameba/spindle-ui/{{ inputs.name | pascal }}/{{ inputs.name | pascal }}.css’`}
|
|
58
|
+
/>
|
|
59
|
+
|
|
60
|
+
<Source
|
|
61
|
+
language=‘html’
|
|
62
|
+
code={`<link rel=“stylesheet” href=“https://unpkg.com/@openameba/spindle-ui/{{ inputs.name | pascal }}/{{ inputs.name | pascal }}.css”>`}
|
|
63
|
+
/>
|
|
64
|
+
|
|
65
|
+
## Normal
|
|
66
|
+
|
|
67
|
+
<Preview withSource=“open”>
|
|
68
|
+
<Story name=“Normal”>
|
|
69
|
+
<{{ inputs.name | pascal }} />
|
|
70
|
+
</Story>
|
|
71
|
+
</Preview>
|
|
72
|
+
|
|
73
|
+
<Source
|
|
74
|
+
code={``}
|
|
75
|
+
/>
|
|
76
|
+
|
|
77
|
+
<Source
|
|
78
|
+
language=‘html’
|
|
79
|
+
code={``}
|
|
80
|
+
/>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
# `{{ inputs.name | pascal }}/{{ inputs.name | pascal }}.test.tsx`
|
|
84
|
+
|
|
85
|
+
```typescript
|
|
86
|
+
import React from 'react';
|
|
87
|
+
import { render } from '@testing-library/react';
|
|
88
|
+
import { jest } from '@jest/globals';
|
|
89
|
+
|
|
90
|
+
import { {{ inputs.name | pascal }} } from './{{ inputs.name | pascal }}';
|
|
91
|
+
|
|
92
|
+
describe('<{{ inputs.name | pascal }} />', () => {
|
|
93
|
+
test('', () => {
|
|
94
|
+
render(<{{ inputs.name | pascal }} />);
|
|
95
|
+
|
|
96
|
+
// expect().toEqual();
|
|
97
|
+
});
|
|
98
|
+
});
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
# `./index.ts`
|
|
102
|
+
|
|
103
|
+
```typescript
|
|
104
|
+
{{ read output.abs }}export { {{ inputs.name | pascal }} } from './{{ inputs.name | pascal }}';
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
# `./index.css`
|
|
108
|
+
|
|
109
|
+
```css
|
|
110
|
+
{{ read output.abs }}@import './{{ inputs.name | pascal }}/{{ inputs.name | pascal }}.css';
|
|
111
|
+
```
|
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,80 @@
|
|
|
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.52.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.51.0...@openameba/spindle-ui@0.52.0) (2022-12-08)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **spindle-ui:** adjustment document ([b97b0a1](https://github.com/openameba/spindle/commit/b97b0a10b767cde7ff10900ba0bc324d0146e66c))
|
|
12
|
+
* **spindle-ui:** avoid running dialog showModal() twice ([8c94ddd](https://github.com/openameba/spindle/commit/8c94ddd2ebc9247e9be8bc2fc162403e619ffb80))
|
|
13
|
+
* **spindle-ui:** change show ellipsis logic ([3c2e598](https://github.com/openameba/spindle/commit/3c2e598660d0724d57aa4bc4c3559d0bb2df93d3))
|
|
14
|
+
* **spindle-ui:** change show item logic ([6dfd0af](https://github.com/openameba/spindle/commit/6dfd0af8c01b96a65e57d009f2c9307a1e27101d))
|
|
15
|
+
* **spindle-ui:** change total threshold name ([baf5b96](https://github.com/openameba/spindle/commit/baf5b967193005583e8bbc768cfbfbf845e73d58))
|
|
16
|
+
* **spindle-ui:** delete pagination ellipsis unused style ([a1f333b](https://github.com/openameba/spindle/commit/a1f333b009ffc1801c52564524cf1ebd64018e92))
|
|
17
|
+
* **spindle-ui:** delete pagination normal story ([dc02419](https://github.com/openameba/spindle/commit/dc0241935cf1bf6568d77db48ff604260a69ed62))
|
|
18
|
+
* **spindle-ui:** delete show first last storybook ([85da2b5](https://github.com/openameba/spindle/commit/85da2b55dcb20b638746306c1f6e16088063b639))
|
|
19
|
+
* **spindle-ui:** delete show first last test code ([b8efcca](https://github.com/openameba/spindle/commit/b8efcca192203f6563d4b624f60da17339063d0a))
|
|
20
|
+
* **spindle-ui:** delete show total props ([76af01f](https://github.com/openameba/spindle/commit/76af01fdf603070799cf92fb64b840386c9f7097))
|
|
21
|
+
* **spindle-ui:** make enabled import TextLink from entry point ([7402d9a](https://github.com/openameba/spindle/commit/7402d9a1fbea08a231fbb3974a01325655ab4c71))
|
|
22
|
+
* **spindle-ui:** max show item size ([3b41bd1](https://github.com/openameba/spindle/commit/3b41bd19b85a18d8e82819547cf9ed3791f0e7a0))
|
|
23
|
+
* **spindle-ui:** on page change props ([55e8b60](https://github.com/openameba/spindle/commit/55e8b609dd7cad2fbe4c858d5a1fc534c8a628b8))
|
|
24
|
+
* **spindle-ui:** pagination breakpoint ([bd18821](https://github.com/openameba/spindle/commit/bd1882160e219d700da4d1286d2590c87bd73707))
|
|
25
|
+
* **spindle-ui:** pagination ellipsis margin style ([408ca61](https://github.com/openameba/spindle/commit/408ca61b56fa848f0c1c5e929ec7ac1fe0f5fdc0))
|
|
26
|
+
* **spindle-ui:** pagination link style ([d5b5d2c](https://github.com/openameba/spindle/commit/d5b5d2cb42d95b54d0549296aae03f72735b71ee))
|
|
27
|
+
* **spindle-ui:** pagination show prev next logic ([1a61400](https://github.com/openameba/spindle/commit/1a61400c92efc56abdff388795ff2c8e529358f1))
|
|
28
|
+
* **spindle-ui:** pagination story ([00cebb4](https://github.com/openameba/spindle/commit/00cebb4f8a5c9a0296104cbfbc6922949a08b360))
|
|
29
|
+
* **spindle-ui:** pagination test case ([32731b2](https://github.com/openameba/spindle/commit/32731b2e0df3663a1df07385d769dba8516aad12))
|
|
30
|
+
* **spindle-ui:** pagination test case ([8315bcf](https://github.com/openameba/spindle/commit/8315bcf09682c86dffb5aa1941ac8360607f5c2e))
|
|
31
|
+
* **spindle-ui:** pagination test case ([7ccab3f](https://github.com/openameba/spindle/commit/7ccab3fdf907f1d3d0eb56813aaeb96bba789197))
|
|
32
|
+
* **spindle-ui:** pagination use callback and effect ([8bbcc9c](https://github.com/openameba/spindle/commit/8bbcc9c682d67593e0d28cbebfd80801016a9a5f))
|
|
33
|
+
* **spindle-ui:** show item logic ([659afe2](https://github.com/openameba/spindle/commit/659afe28d9533a27a9f3468a5fd138185eab88e8))
|
|
34
|
+
* **spindle-ui:** show item size ([cd12e8e](https://github.com/openameba/spindle/commit/cd12e8e2de9bd0f772ad3da0fdba949fb63a221f))
|
|
35
|
+
* **spindle-ui:** show total story book pattern ([1ecf615](https://github.com/openameba/spindle/commit/1ecf615f02d6bf96df70e65abd4ce2234a9fd9e6))
|
|
36
|
+
* **spindle-ui:** update document ([20577b1](https://github.com/openameba/spindle/commit/20577b10cd632939d21b657ac1dbce0828cfeb0f))
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
### Code Refactoring
|
|
40
|
+
|
|
41
|
+
* **spindle-ui:** export components directly ([694dab6](https://github.com/openameba/spindle/commit/694dab6df3fcf902809e3ee0b24295109fc55ae8))
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
### Features
|
|
45
|
+
|
|
46
|
+
* **spindle-ui:** add pagination window resize ([6743c29](https://github.com/openameba/spindle/commit/6743c2983ac4e54676b96b2462ac6777281f1e18))
|
|
47
|
+
* **spindle-ui:** change pagination bundlesize ([62866cf](https://github.com/openameba/spindle/commit/62866cf986c36aebe5bfe390cf66794d01edb742))
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
### BREAKING CHANGES
|
|
51
|
+
|
|
52
|
+
* **spindle-ui:** TypeScript under v3.8 has been no longer supported
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
## [0.51.1-alpha.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.51.0...@openameba/spindle-ui@0.51.1-alpha.0) (2022-11-28)
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
### Bug Fixes
|
|
62
|
+
|
|
63
|
+
* **spindle-ui:** avoid running dialog showModal() twice ([8c94ddd](https://github.com/openameba/spindle/commit/8c94ddd2ebc9247e9be8bc2fc162403e619ffb80))
|
|
64
|
+
* **spindle-ui:** make enabled import TextLink from entry point ([7402d9a](https://github.com/openameba/spindle/commit/7402d9a1fbea08a231fbb3974a01325655ab4c71))
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
### Code Refactoring
|
|
68
|
+
|
|
69
|
+
* **spindle-ui:** export components directly ([694dab6](https://github.com/openameba/spindle/commit/694dab6df3fcf902809e3ee0b24295109fc55ae8))
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
### BREAKING CHANGES
|
|
73
|
+
|
|
74
|
+
* **spindle-ui:** TypeScript under v3.8 has been no longer supported
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
|
|
6
80
|
# [0.51.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.50.1...@openameba/spindle-ui@0.51.0) (2022-11-07)
|
|
7
81
|
|
|
8
82
|
|
package/Dialog/Dialog.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAIf,UAAU,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,WAAW,CAAC;IACnE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;CACrD;AAED,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,UAAU,UAAU;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAIf,UAAU,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,WAAW,CAAC;IACnE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;CACrD;AAED,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,UAAU,UAAU;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AA4GD,eAAO,MAAM,MAAM;;yCAhCyB,UAAU;8BAQrB,UAAU;6BAQX,UAAU;;;;;CAsBzC,CAAC"}
|
package/Dialog/Dialog.js
CHANGED
|
@@ -80,17 +80,18 @@ var Frame = (0, react_1.forwardRef)(function Dialog(_a, ref) {
|
|
|
80
80
|
}, [dialogEl, handleAnimationEnd]);
|
|
81
81
|
(0, react_1.useEffect)(function () {
|
|
82
82
|
var _a;
|
|
83
|
-
|
|
83
|
+
var dialog = dialogEl.current;
|
|
84
|
+
if (!dialog) {
|
|
84
85
|
return;
|
|
85
86
|
}
|
|
86
87
|
// Remove this when browsers support :has() pseudo-class
|
|
87
88
|
var classNameToStopScrollBehindDialog = "".concat(BLOCK_NAME, "--open");
|
|
88
89
|
if (open) {
|
|
89
|
-
|
|
90
|
+
!dialog.open && ((_a = dialog.showModal) === null || _a === void 0 ? void 0 : _a.call(dialog));
|
|
90
91
|
document.documentElement.classList.add(classNameToStopScrollBehindDialog);
|
|
91
92
|
}
|
|
92
93
|
else {
|
|
93
|
-
(
|
|
94
|
+
(dialog === null || dialog === void 0 ? void 0 : dialog.open) && setClosing(true);
|
|
94
95
|
// Always remove this class to avoid unexpected scroll stopping
|
|
95
96
|
document.documentElement.classList.remove(classNameToStopScrollBehindDialog);
|
|
96
97
|
}
|
package/Dialog/Dialog.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAMe;AACf,sEAAyC;AACzC,8CAAsD;AAoBtD,IAAM,UAAU,GAAG,aAAa,CAAC;AACjC,IAAM,kBAAkB,GAAG,sBAAsB,CAAC;AAElD,IAAM,KAAK,GAAG,IAAA,kBAAU,EAAiC,SAAS,MAAM,CACtE,EAA+C,EAC/C,GAAG;IADD,IAAA,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,IAAI,UAAA,EAAE,OAAO,aAAA,EAAK,IAAI,cAA7C,4CAA+C,CAAF;IAGvC,IAAA,KAAwB,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAC;IAC9C,IAAM,QAAQ,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAC,CAAC;IAEjD,IAAM,gBAAgB,GAAG,UAAC,KAAuC;QAC/D,KAAK,CAAC,cAAc,EAAE,CAAC,CAAC,kCAAkC;QAC1D,OAAO,OAAO,KAAK,UAAU,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC;IAClD,CAAC,CAAC;IAEF,IAAM,kBAAkB,GAAG,IAAA,mBAAW,EACpC,UAAC,KAAqB;QACpB,IACE,QAAQ,CAAC,OAAO;YAChB,KAAK,CAAC,aAAa,KAAK,kBAAkB;YAC1C,CAAC,KAAK,CAAC,aAAa,CAAC,wBAAwB;UAC7C;YACA,QAAQ,CAAC,OAAO,CAAC,KAAK,IAAI,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YACnD,UAAU,CAAC,KAAK,CAAC,CAAC;SACnB;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,IAAA,iBAAS,EAAC;QACR,IAAM,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC;QAChC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,gBAAgB,CAAC,cAAc,EAAE,kBAAkB,EAAE,KAAK,CAAC,CAAC;QAEpE,OAAO;YACL,OAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,mBAAmB,CAAC,cAAc,EAAE,kBAAkB,EAAE,KAAK,CAAC;QAAtE,CAAsE,CAAC;IAC3E,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAEnC,IAAA,iBAAS,EAAC;;QACR,
|
|
1
|
+
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"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"}
|
package/Dialog/Dialog.mjs
CHANGED
|
@@ -25,17 +25,18 @@ const Frame = forwardRef(function Dialog({ children, className, open, onClose, .
|
|
|
25
25
|
return () => dialog?.removeEventListener('animationend', handleAnimationEnd, false);
|
|
26
26
|
}, [dialogEl, handleAnimationEnd]);
|
|
27
27
|
useEffect(() => {
|
|
28
|
-
|
|
28
|
+
const dialog = dialogEl.current;
|
|
29
|
+
if (!dialog) {
|
|
29
30
|
return;
|
|
30
31
|
}
|
|
31
32
|
// Remove this when browsers support :has() pseudo-class
|
|
32
33
|
const classNameToStopScrollBehindDialog = `${BLOCK_NAME}--open`;
|
|
33
34
|
if (open) {
|
|
34
|
-
|
|
35
|
+
!dialog.open && dialog.showModal?.();
|
|
35
36
|
document.documentElement.classList.add(classNameToStopScrollBehindDialog);
|
|
36
37
|
}
|
|
37
38
|
else {
|
|
38
|
-
|
|
39
|
+
dialog?.open && setClosing(true);
|
|
39
40
|
// Always remove this class to avoid unexpected scroll stopping
|
|
40
41
|
document.documentElement.classList.remove(classNameToStopScrollBehindDialog);
|
|
41
42
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppealModal.d.ts","sourceRoot":"","sources":["../../src/Modal/AppealModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAOf,aAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzC,UAAU,gBAAiB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,WAAW,CAAC;IACxE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;CACrD;AAED,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;
|
|
1
|
+
{"version":3,"file":"AppealModal.d.ts","sourceRoot":"","sources":["../../src/Modal/AppealModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAOf,aAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzC,UAAU,gBAAiB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,WAAW,CAAC;IACxE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;CACrD;AAED,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AA2KD,eAAO,MAAM,WAAW;;;;;mCArCc,MAAM,cAAc,CAAC,GAAG,CAAC;mCAQzB,MAAM,cAAc,CAAC,KAAK,CAAC;kCAQ5B,MAAM,cAAc,CAAC,GAAG,CAAC;;;;;CA4B7D,CAAC"}
|
package/Modal/AppealModal.js
CHANGED
|
@@ -89,17 +89,18 @@ var Frame = (0, react_1.forwardRef)(function AppealModal(_a, ref) {
|
|
|
89
89
|
}, [dialogEl, handleAnimationEnd]);
|
|
90
90
|
(0, react_1.useEffect)(function () {
|
|
91
91
|
var _a;
|
|
92
|
-
|
|
92
|
+
var dialog = dialogEl.current;
|
|
93
|
+
if (!dialog) {
|
|
93
94
|
return;
|
|
94
95
|
}
|
|
95
96
|
// Remove this when browsers support :has() pseudo-class
|
|
96
97
|
var classNameToStopScrollBehindDialog = "".concat(BLOCK_NAME, "--open");
|
|
97
98
|
if (open) {
|
|
98
|
-
|
|
99
|
+
!dialog.open && ((_a = dialog.showModal) === null || _a === void 0 ? void 0 : _a.call(dialog));
|
|
99
100
|
document.documentElement.classList.add(classNameToStopScrollBehindDialog);
|
|
100
101
|
}
|
|
101
102
|
else {
|
|
102
|
-
(
|
|
103
|
+
(dialog === null || dialog === void 0 ? void 0 : dialog.open) && setClosing(true);
|
|
103
104
|
// Always remove this class to avoid unexpected scroll stopping
|
|
104
105
|
document.documentElement.classList.remove(classNameToStopScrollBehindDialog);
|
|
105
106
|
}
|
package/Modal/AppealModal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppealModal.js","sourceRoot":"","sources":["../../src/Modal/AppealModal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAMe;AACf,sEAAyC;AACzC,8CAAsD;AACtD,gCAAoC;AACpC,4CAA2C;AAC3C,gDAA+C;AAiB/C,IAAM,UAAU,GAAG,kBAAkB,CAAC;AACtC,IAAM,kBAAkB,GAAG,2BAA2B,CAAC;AAEvD,IAAM,KAAK,GAAG,IAAA,kBAAU,EACtB,SAAS,WAAW,CAClB,EAA+D,EAC/D,GAAG;IADD,IAAA,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,IAAI,UAAA,EAAE,YAAc,EAAd,IAAI,mBAAG,OAAO,KAAA,EAAE,OAAO,aAAA,EAAK,IAAI,cAA7D,oDAA+D,CAAF;IAGvD,IAAA,KAAwB,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAC;IAC9C,IAAM,QAAQ,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAC,CAAC;IAEjD,IAAM,gBAAgB,GAAG,UAAC,KAAuC;QAC/D,KAAK,CAAC,cAAc,EAAE,CAAC,CAAC,kCAAkC;QAC1D,OAAO,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,IAAM,iBAAiB,GAAG,UAAC,KAA0C;QACnE,wBAAwB;QACxB,IAAI,KAAK,CAAC,MAAM,KAAK,QAAQ,CAAC,OAAO,EAAE;YACrC,OAAO,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC;SAC3B;IACH,CAAC,CAAC;IAEF,IAAM,kBAAkB,GAAG,IAAA,mBAAW,EACpC,UAAC,KAAqB;QACpB,IACE,QAAQ,CAAC,OAAO;YAChB,KAAK,CAAC,aAAa,KAAK,kBAAkB;YAC1C,CAAC,KAAK,CAAC,aAAa,CAAC,wBAAwB;UAC7C;YACA,QAAQ,CAAC,OAAO,CAAC,KAAK,IAAI,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YACnD,UAAU,CAAC,KAAK,CAAC,CAAC;SACnB;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,IAAA,iBAAS,EAAC;QACR,IAAM,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC;QAChC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,gBAAgB,CAAC,cAAc,EAAE,kBAAkB,EAAE,KAAK,CAAC,CAAC;QAEpE,OAAO;YACL,OAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,mBAAmB,CAAC,cAAc,EAAE,kBAAkB,EAAE,KAAK,CAAC;QAAtE,CAAsE,CAAC;IAC3E,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAEnC,IAAA,iBAAS,EAAC;;QACR,
|
|
1
|
+
{"version":3,"file":"AppealModal.js","sourceRoot":"","sources":["../../src/Modal/AppealModal.tsx"],"names":[],"mappings":"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"}
|
package/Modal/AppealModal.mjs
CHANGED
|
@@ -34,17 +34,18 @@ const Frame = forwardRef(function AppealModal({ children, className, open, size
|
|
|
34
34
|
return () => dialog?.removeEventListener('animationend', handleAnimationEnd, false);
|
|
35
35
|
}, [dialogEl, handleAnimationEnd]);
|
|
36
36
|
useEffect(() => {
|
|
37
|
-
|
|
37
|
+
const dialog = dialogEl.current;
|
|
38
|
+
if (!dialog) {
|
|
38
39
|
return;
|
|
39
40
|
}
|
|
40
41
|
// Remove this when browsers support :has() pseudo-class
|
|
41
42
|
const classNameToStopScrollBehindDialog = `${BLOCK_NAME}--open`;
|
|
42
43
|
if (open) {
|
|
43
|
-
|
|
44
|
+
!dialog.open && dialog.showModal?.();
|
|
44
45
|
document.documentElement.classList.add(classNameToStopScrollBehindDialog);
|
|
45
46
|
}
|
|
46
47
|
else {
|
|
47
|
-
|
|
48
|
+
dialog?.open && setClosing(true);
|
|
48
49
|
// Always remove this class to avoid unexpected scroll stopping
|
|
49
50
|
document.documentElement.classList.remove(classNameToStopScrollBehindDialog);
|
|
50
51
|
}
|
|
@@ -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-
|
|
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-ellipsis{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 10px;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-total{color:var(--color-text-low-emphasis);font-size:.8125em;line-height:1.3;margin:12px 0 0;padding:0}.spui-Pagination-link+.spui-Pagination-ellipsis{margin-left:10px}@media screen and (max-width:360px){.spui-Pagination-item--first,.spui-Pagination-item--last{display:none}}
|
|
@@ -2,10 +2,8 @@ import React from 'react';
|
|
|
2
2
|
interface Props extends React.HTMLAttributes<HTMLElement> {
|
|
3
3
|
current: number;
|
|
4
4
|
total: number;
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
showFirstLast?: boolean;
|
|
8
|
-
onPageChange: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>, pageNumber: number) => void;
|
|
5
|
+
showTotal?: boolean;
|
|
6
|
+
onPageChange?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>, pageNumber: number) => void;
|
|
9
7
|
createUrl: (pageNumber: number) => string;
|
|
10
8
|
}
|
|
11
9
|
export declare const Pagination: (props: Props) => JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAMxE,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,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,gBAyKtC,CAAC"}
|
package/Pagination/Pagination.js
CHANGED
|
@@ -54,15 +54,52 @@ var MenuHorizontal_1 = __importDefault(require("../Icon/MenuHorizontal"));
|
|
|
54
54
|
var PaginationItem_1 = __importDefault(require("./PaginationItem"));
|
|
55
55
|
var useShowItem_1 = require("./hooks/useShowItem");
|
|
56
56
|
var BLOCK_NAME = 'spui-Pagination';
|
|
57
|
+
// ページ総数の閾値
|
|
58
|
+
var TOTAL_THRESHOLD = 100;
|
|
59
|
+
// ウィンドウリサイズ時の間引き処理時間
|
|
60
|
+
var RESIZE_DELAY_TIME = 800;
|
|
57
61
|
var Pagination = function (props) {
|
|
58
|
-
var current = props.current, total = props.total, _a = props.
|
|
59
|
-
var
|
|
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 handleMatchMedia = typeof window !== 'undefined' && window.matchMedia
|
|
64
|
+
? window.matchMedia('(max-width: 360px)')
|
|
65
|
+
: undefined;
|
|
66
|
+
var isMatchMedia = (0, react_1.useRef)(handleMatchMedia);
|
|
67
|
+
var _b = (0, react_1.useState)(function () {
|
|
68
|
+
return isMatchMedia.current ? isMatchMedia.current.matches : false;
|
|
69
|
+
}), matches = _b[0], setMatches = _b[1];
|
|
70
|
+
var onChangeView = (0, react_1.useCallback)(function () {
|
|
71
|
+
var isMatchMedia = handleMatchMedia;
|
|
72
|
+
setMatches(isMatchMedia && isMatchMedia.matches ? isMatchMedia.matches : false);
|
|
73
|
+
}, [handleMatchMedia]);
|
|
74
|
+
var onOrientationchange = (0, react_1.useCallback)(function () {
|
|
75
|
+
onChangeView();
|
|
76
|
+
}, [onChangeView]);
|
|
77
|
+
(0, react_1.useEffect)(function () {
|
|
78
|
+
window.addEventListener('orientationchange', onOrientationchange, false);
|
|
79
|
+
return function () {
|
|
80
|
+
return window.removeEventListener('orientationchange', onOrientationchange);
|
|
81
|
+
};
|
|
82
|
+
}, [onOrientationchange]);
|
|
83
|
+
var onResizeView = (0, react_1.useCallback)(function () {
|
|
84
|
+
setTimeout(function () {
|
|
85
|
+
onChangeView();
|
|
86
|
+
}, RESIZE_DELAY_TIME);
|
|
87
|
+
}, [onChangeView]);
|
|
88
|
+
(0, react_1.useEffect)(function () {
|
|
89
|
+
window.addEventListener('resize', onResizeView, false);
|
|
90
|
+
return function () { return window.removeEventListener('resize', onResizeView); };
|
|
91
|
+
}, [onResizeView]);
|
|
92
|
+
var displayItem = (0, useShowItem_1.useShowItem)({
|
|
60
93
|
current: current,
|
|
61
94
|
total: total,
|
|
62
|
-
|
|
95
|
+
showItemSize: matches ? 3 : 5,
|
|
96
|
+
totalThreshold: TOTAL_THRESHOLD,
|
|
97
|
+
});
|
|
63
98
|
var handleClick = (0, react_1.useCallback)(function (event, pageNumber) {
|
|
64
99
|
onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(event, pageNumber);
|
|
65
100
|
}, [onPageChange]);
|
|
101
|
+
var showPrevNext = total < TOTAL_THRESHOLD;
|
|
102
|
+
var showFirstLast = total >= TOTAL_THRESHOLD;
|
|
66
103
|
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),
|
|
67
104
|
react_1.default.createElement("ul", { className: "".concat(BLOCK_NAME, "-list") },
|
|
68
105
|
showFirstLast && (react_1.default.createElement("li", { className: "".concat(BLOCK_NAME, "-item ").concat(BLOCK_NAME, "-item--first") },
|
|
@@ -71,31 +108,22 @@ var Pagination = function (props) {
|
|
|
71
108
|
react_1.default.createElement(PaginationItem_1.default, { type: "prev", current: current, total: total, onClick: handleClick, createUrl: createUrl }))),
|
|
72
109
|
displayItem.map(function (pageNumber, index) {
|
|
73
110
|
var isCurrent = current === pageNumber;
|
|
74
|
-
var isHidden = showPrevNext &&
|
|
75
|
-
hideDisplayItem &&
|
|
76
|
-
(current - 1 === pageNumber || current + 1 === pageNumber);
|
|
77
111
|
var hasRelAttribute = current === pageNumber + 1;
|
|
78
|
-
|
|
79
|
-
var
|
|
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") })),
|
|
112
|
+
// 数字が隣接していない場合に表示
|
|
113
|
+
var showEllipsis = !!displayItem[index + 1] && displayItem[index + 1] - pageNumber > 1;
|
|
114
|
+
return (react_1.default.createElement("li", { className: "".concat(BLOCK_NAME, "-item"), key: "pagination-item-".concat(pageNumber) },
|
|
87
115
|
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
|
|
88
116
|
? undefined
|
|
89
117
|
: function (e) {
|
|
90
118
|
handleClick(e, pageNumber);
|
|
91
119
|
}, "aria-label": "".concat(pageNumber, "\u30DA\u30FC\u30B8\u76EE") }, pageNumber),
|
|
92
|
-
|
|
120
|
+
showEllipsis && (react_1.default.createElement(MenuHorizontal_1.default, { "aria-hidden": "true", className: "".concat(BLOCK_NAME, "-ellipsis") }))));
|
|
93
121
|
}),
|
|
94
122
|
showPrevNext && (react_1.default.createElement("li", { className: "".concat(BLOCK_NAME, "-item ").concat(BLOCK_NAME, "-item--next") },
|
|
95
123
|
react_1.default.createElement(PaginationItem_1.default, { type: "next", current: current, total: total, onClick: handleClick, createUrl: createUrl }))),
|
|
96
124
|
showFirstLast && (react_1.default.createElement("li", { className: "".concat(BLOCK_NAME, "-item ").concat(BLOCK_NAME, "-item--last") },
|
|
97
125
|
react_1.default.createElement(PaginationItem_1.default, { type: "last", current: current, total: total, onClick: handleClick, createUrl: createUrl })))),
|
|
98
|
-
|
|
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") },
|
|
99
127
|
current,
|
|
100
128
|
"/",
|
|
101
129
|
total,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,17 +1,50 @@
|
|
|
1
|
-
import React, { useCallback } from 'react';
|
|
1
|
+
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
5
|
const BLOCK_NAME = 'spui-Pagination';
|
|
6
|
+
// ページ総数の閾値
|
|
7
|
+
const TOTAL_THRESHOLD = 100;
|
|
8
|
+
// ウィンドウリサイズ時の間引き処理時間
|
|
9
|
+
const RESIZE_DELAY_TIME = 800;
|
|
6
10
|
export const Pagination = (props) => {
|
|
7
|
-
const { current, total,
|
|
8
|
-
const
|
|
11
|
+
const { current, total, showTotal = false, onPageChange, createUrl, className, ...rest } = props;
|
|
12
|
+
const handleMatchMedia = typeof window !== 'undefined' && window.matchMedia
|
|
13
|
+
? window.matchMedia('(max-width: 360px)')
|
|
14
|
+
: undefined;
|
|
15
|
+
const isMatchMedia = useRef(handleMatchMedia);
|
|
16
|
+
const [matches, setMatches] = useState(() => isMatchMedia.current ? isMatchMedia.current.matches : false);
|
|
17
|
+
const onChangeView = useCallback(() => {
|
|
18
|
+
const isMatchMedia = handleMatchMedia;
|
|
19
|
+
setMatches(isMatchMedia && isMatchMedia.matches ? isMatchMedia.matches : false);
|
|
20
|
+
}, [handleMatchMedia]);
|
|
21
|
+
const onOrientationchange = useCallback(() => {
|
|
22
|
+
onChangeView();
|
|
23
|
+
}, [onChangeView]);
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
window.addEventListener('orientationchange', onOrientationchange, false);
|
|
26
|
+
return () => window.removeEventListener('orientationchange', onOrientationchange);
|
|
27
|
+
}, [onOrientationchange]);
|
|
28
|
+
const onResizeView = useCallback(() => {
|
|
29
|
+
setTimeout(() => {
|
|
30
|
+
onChangeView();
|
|
31
|
+
}, RESIZE_DELAY_TIME);
|
|
32
|
+
}, [onChangeView]);
|
|
33
|
+
useEffect(() => {
|
|
34
|
+
window.addEventListener('resize', onResizeView, false);
|
|
35
|
+
return () => window.removeEventListener('resize', onResizeView);
|
|
36
|
+
}, [onResizeView]);
|
|
37
|
+
const displayItem = useShowItem({
|
|
9
38
|
current,
|
|
10
39
|
total,
|
|
40
|
+
showItemSize: matches ? 3 : 5,
|
|
41
|
+
totalThreshold: TOTAL_THRESHOLD,
|
|
11
42
|
});
|
|
12
43
|
const handleClick = useCallback((event, pageNumber) => {
|
|
13
44
|
onPageChange?.(event, pageNumber);
|
|
14
45
|
}, [onPageChange]);
|
|
46
|
+
const showPrevNext = total < TOTAL_THRESHOLD;
|
|
47
|
+
const showFirstLast = total >= TOTAL_THRESHOLD;
|
|
15
48
|
return (React.createElement("nav", { "aria-label": "\u30DA\u30FC\u30B8\u30CD\u30FC\u30B7\u30E7\u30F3", className: [BLOCK_NAME, className].filter(Boolean).join(' ').trim(), ...rest },
|
|
16
49
|
React.createElement("ul", { className: `${BLOCK_NAME}-list` },
|
|
17
50
|
showFirstLast && (React.createElement("li", { className: `${BLOCK_NAME}-item ${BLOCK_NAME}-item--first` },
|
|
@@ -20,31 +53,22 @@ export const Pagination = (props) => {
|
|
|
20
53
|
React.createElement(PaginationItem, { type: "prev", current: current, total: total, onClick: handleClick, createUrl: createUrl }))),
|
|
21
54
|
displayItem.map((pageNumber, index) => {
|
|
22
55
|
const isCurrent = current === pageNumber;
|
|
23
|
-
const isHidden = showPrevNext &&
|
|
24
|
-
hideDisplayItem &&
|
|
25
|
-
(current - 1 === pageNumber || current + 1 === pageNumber);
|
|
26
56
|
const hasRelAttribute = current === pageNumber + 1;
|
|
27
|
-
|
|
28
|
-
const
|
|
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` })),
|
|
57
|
+
// 数字が隣接していない場合に表示
|
|
58
|
+
const showEllipsis = !!displayItem[index + 1] && displayItem[index + 1] - pageNumber > 1;
|
|
59
|
+
return (React.createElement("li", { className: `${BLOCK_NAME}-item`, key: `pagination-item-${pageNumber}` },
|
|
36
60
|
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
|
|
37
61
|
? undefined
|
|
38
62
|
: (e) => {
|
|
39
63
|
handleClick(e, pageNumber);
|
|
40
64
|
}, "aria-label": `${pageNumber}ページ目` }, pageNumber),
|
|
41
|
-
|
|
65
|
+
showEllipsis && (React.createElement(MenuHorizontal, { "aria-hidden": "true", className: `${BLOCK_NAME}-ellipsis` }))));
|
|
42
66
|
}),
|
|
43
67
|
showPrevNext && (React.createElement("li", { className: `${BLOCK_NAME}-item ${BLOCK_NAME}-item--next` },
|
|
44
68
|
React.createElement(PaginationItem, { type: "next", current: current, total: total, onClick: handleClick, createUrl: createUrl }))),
|
|
45
69
|
showFirstLast && (React.createElement("li", { className: `${BLOCK_NAME}-item ${BLOCK_NAME}-item--last` },
|
|
46
70
|
React.createElement(PaginationItem, { type: "last", current: current, total: total, onClick: handleClick, createUrl: createUrl })))),
|
|
47
|
-
|
|
71
|
+
showTotal && (React.createElement("p", { className: `${BLOCK_NAME}-total`, "aria-label": `${total}ページ中の${current}ページ目` },
|
|
48
72
|
current,
|
|
49
73
|
"/",
|
|
50
74
|
total,
|
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
declare type Payload = {
|
|
2
2
|
current: number;
|
|
3
3
|
total: number;
|
|
4
|
+
showItemSize: 3 | 5;
|
|
5
|
+
totalThreshold: number;
|
|
4
6
|
};
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
/**
|
|
8
|
+
* useShowItem分岐条件
|
|
9
|
+
* 1.総ページ数が表示したいアイテム数以下の場合、総ページ数と同じアイテム数を返す
|
|
10
|
+
* 2.総ページ数がアイテムの表示最大数以下、または総ページ数が閾値以上の場合
|
|
11
|
+
* 1.現在のページ数が中央値 + 1より小さい場合、表示したいアイテム数を最初のページから返す
|
|
12
|
+
* 2.現在のページ数が総ページ数 - 中央値より大きい場合、総ページ数からさかのぼった表示したいアイテム数を返す
|
|
13
|
+
* 3.現在のページ数と前後に表示したいアイテム数を返す
|
|
14
|
+
* 3.上記に該当しない場合は以下の処理を行う
|
|
15
|
+
* 1.現在のページ数が中央値 + 1より小さい場合、表示したいアイテム数を最初のページから返し最後は総ページ数を返す
|
|
16
|
+
* 2.現在のページ数が総ページ数 - 中央値より大きい場合、最初のページとtotalまでの表示したいアイテム数を返す
|
|
17
|
+
* 3.最初のアイテムは1を最後のアイテムは総ページ数を返すとともにlengthが3の場合は現在のページ数のみでlengthが5の場合は現在のページ数とその前後のアイテム数を返す
|
|
18
|
+
*/
|
|
19
|
+
export declare function useShowItem({ current, total, showItemSize, totalThreshold, }: Payload): number[];
|
|
11
20
|
export {};
|
|
12
21
|
//# sourceMappingURL=useShowItem.d.ts.map
|