extra-react-hooks 0.5.4 → 0.6.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 +220 -0
- package/lib/index.d.ts +19 -19
- package/lib/index.js +19 -19
- package/lib/types.d.ts +3 -3
- package/lib/types.js +1 -1
- package/lib/use-callback-async.d.ts +2 -2
- package/lib/use-callback-async.js +19 -19
- package/lib/use-callback-async.js.map +1 -1
- package/lib/use-effect-async.d.ts +2 -2
- package/lib/use-effect-async.js +19 -19
- package/lib/use-finite-state-machine.d.ts +3 -3
- package/lib/use-finite-state-machine.js +13 -13
- package/lib/use-force-update.d.ts +1 -1
- package/lib/use-force-update.js +8 -8
- package/lib/use-iife.d.ts +2 -2
- package/lib/use-iife.js +20 -20
- package/lib/use-increment.d.ts +1 -1
- package/lib/use-increment.js +11 -11
- package/lib/use-is-first-render.d.ts +1 -1
- package/lib/use-is-first-render.js +23 -23
- package/lib/use-is-mounted.d.ts +1 -1
- package/lib/use-is-mounted.js +15 -15
- package/lib/use-mount-async.d.ts +1 -1
- package/lib/use-mount-async.js +4 -4
- package/lib/use-mount.d.ts +2 -2
- package/lib/use-mount.js +4 -4
- package/lib/use-multiple-selection.d.ts +9 -9
- package/lib/use-multiple-selection.js +49 -49
- package/lib/use-render-counter.d.ts +1 -1
- package/lib/use-render-counter.js +6 -6
- package/lib/use-resize-observer.d.ts +2 -2
- package/lib/use-resize-observer.js +13 -13
- package/lib/use-single-selection.d.ts +7 -7
- package/lib/use-single-selection.js +22 -22
- package/lib/use-state-cycle.d.ts +2 -2
- package/lib/use-state-cycle.js +15 -15
- package/lib/use-step.d.ts +2 -2
- package/lib/use-step.js +25 -25
- package/lib/use-toggle.d.ts +1 -1
- package/lib/use-toggle.js +8 -8
- package/lib/use-unmount.d.ts +1 -1
- package/lib/use-unmount.js +4 -4
- package/lib/use-update-effect.d.ts +2 -2
- package/lib/use-update-effect.js +10 -10
- package/package.json +3 -2
- package/src/use-callback-async.ts +1 -1
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
4
|
+
|
|
5
|
+
### [0.6.1](https://github.com/BlackGlory/extra-react-hooks/compare/v0.6.0...v0.6.1) (2023-06-13)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* **useCallbackAsync:** deps ([3a13d8f](https://github.com/BlackGlory/extra-react-hooks/commit/3a13d8f86c51c52fd6af65da61734608487f595d))
|
|
11
|
+
|
|
12
|
+
## [0.6.0](https://github.com/BlackGlory/extra-react-hooks/compare/v0.5.4...v0.6.0) (2023-06-12)
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### ⚠ BREAKING CHANGES
|
|
16
|
+
|
|
17
|
+
* Removed React v16 support
|
|
18
|
+
|
|
19
|
+
* remove React v16 support ([919613e](https://github.com/BlackGlory/extra-react-hooks/commit/919613e08b8c89803b2063e33444f8c21d328198))
|
|
20
|
+
|
|
21
|
+
### [0.5.4](https://github.com/BlackGlory/extra-react-hooks/compare/v0.5.3...v0.5.4) (2023-06-12)
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
### Bug Fixes
|
|
25
|
+
|
|
26
|
+
* deps for React 18 ([4b98acd](https://github.com/BlackGlory/extra-react-hooks/commit/4b98acd9fee6bca2ae448e6628bf6c016c8ce994))
|
|
27
|
+
|
|
28
|
+
### [0.5.3](https://github.com/BlackGlory/extra-react-hooks/compare/v0.5.2...v0.5.3) (2023-06-10)
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
### Bug Fixes
|
|
32
|
+
|
|
33
|
+
* export src ([d8d24e3](https://github.com/BlackGlory/extra-react-hooks/commit/d8d24e3fadea11e266c6276dc4cd7cf3a90910b8))
|
|
34
|
+
|
|
35
|
+
### [0.5.2](https://github.com/BlackGlory/extra-react-hooks/compare/v0.5.1...v0.5.2) (2023-04-17)
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
### Features
|
|
39
|
+
|
|
40
|
+
* add `useMountAsync` ([90f43bd](https://github.com/BlackGlory/extra-react-hooks/commit/90f43bd05005f6f80653405e209c3ccfb96265d9))
|
|
41
|
+
|
|
42
|
+
### [0.5.1](https://github.com/BlackGlory/extra-react-hooks/compare/v0.5.0...v0.5.1) (2023-04-16)
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
### Features
|
|
46
|
+
|
|
47
|
+
* add `useEffectAsync`, `useCallbackAsync` ([f01bf2e](https://github.com/BlackGlory/extra-react-hooks/commit/f01bf2ed298ff741806b93a098c842671e9fe492))
|
|
48
|
+
|
|
49
|
+
## [0.5.0](https://github.com/BlackGlory/extra-react-hooks/compare/v0.4.3...v0.5.0) (2023-03-04)
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
### ⚠ BREAKING CHANGES
|
|
53
|
+
|
|
54
|
+
* The minimal version of Node.js is 16
|
|
55
|
+
|
|
56
|
+
* upgrade dependencies ([c4f0e97](https://github.com/BlackGlory/extra-react-hooks/commit/c4f0e97c89e752491a4bc2a036946c54c70a8929))
|
|
57
|
+
|
|
58
|
+
### [0.4.3](https://github.com/BlackGlory/extra-react-hooks/compare/v0.4.2...v0.4.3) (2023-01-28)
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
### Bug Fixes
|
|
62
|
+
|
|
63
|
+
* dependencies ([c04a0ac](https://github.com/BlackGlory/extra-react-hooks/commit/c04a0acf76476c37f7dbc52de843df828d333d52))
|
|
64
|
+
|
|
65
|
+
### [0.4.2](https://github.com/BlackGlory/extra-react-hooks/compare/v0.4.1...v0.4.2) (2023-01-22)
|
|
66
|
+
|
|
67
|
+
### [0.4.1](https://github.com/BlackGlory/extra-react-hooks/compare/v0.4.0...v0.4.1) (2023-01-21)
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
### Bug Fixes
|
|
71
|
+
|
|
72
|
+
* exports ([6782f4a](https://github.com/BlackGlory/extra-react-hooks/commit/6782f4a40921a8d5bc0fa4f38fc37b218ba5a989))
|
|
73
|
+
|
|
74
|
+
## [0.4.0](https://github.com/BlackGlory/extra-react-hooks/compare/v0.3.4...v0.4.0) (2023-01-21)
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
### ⚠ BREAKING CHANGES
|
|
78
|
+
|
|
79
|
+
* CommonJS => ESM
|
|
80
|
+
|
|
81
|
+
* commonjs => esm, remove es2015 support ([a560890](https://github.com/BlackGlory/extra-react-hooks/commit/a560890e0d48892c37efa1e3e0a474816ecedae4))
|
|
82
|
+
|
|
83
|
+
### [0.3.4](https://github.com/BlackGlory/extra-react-hooks/compare/v0.3.3...v0.3.4) (2023-01-21)
|
|
84
|
+
|
|
85
|
+
### [0.3.3](https://github.com/BlackGlory/extra-react-hooks/compare/v0.3.2...v0.3.3) (2022-10-24)
|
|
86
|
+
|
|
87
|
+
### [0.3.2](https://github.com/BlackGlory/extra-react-hooks/compare/v0.3.1...v0.3.2) (2022-09-24)
|
|
88
|
+
|
|
89
|
+
### [0.3.1](https://github.com/BlackGlory/extra-react-hooks/compare/v0.3.0...v0.3.1) (2022-07-22)
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
### Bug Fixes
|
|
93
|
+
|
|
94
|
+
* toggle ([3075106](https://github.com/BlackGlory/extra-react-hooks/commit/307510652ed2e286d729c12e303231df1aa2bc20))
|
|
95
|
+
|
|
96
|
+
## [0.3.0](https://github.com/BlackGlory/extra-react-hooks/compare/v0.2.1...v0.3.0) (2022-07-22)
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
### ⚠ BREAKING CHANGES
|
|
100
|
+
|
|
101
|
+
* - Rewrite `useSingleSelection`
|
|
102
|
+
- Rewrite `useMultipleSelection`
|
|
103
|
+
|
|
104
|
+
### Features
|
|
105
|
+
|
|
106
|
+
* add useUnmount, useIIFE ([fb5eb9d](https://github.com/BlackGlory/extra-react-hooks/commit/fb5eb9d181c461c2eeac9f497b7a551482763049))
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
### Bug Fixes
|
|
110
|
+
|
|
111
|
+
* add props into deps ([def8482](https://github.com/BlackGlory/extra-react-hooks/commit/def8482f3d944bd304cf834e89fa5154b0dbb223))
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
* improve hooks ([69932c2](https://github.com/BlackGlory/extra-react-hooks/commit/69932c2d2a420dc04225dcf245a2bbc3fd03f1fd))
|
|
115
|
+
|
|
116
|
+
### [0.2.1](https://github.com/BlackGlory/extra-react-hooks/compare/v0.2.0...v0.2.1) (2022-07-21)
|
|
117
|
+
|
|
118
|
+
## [0.2.0](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.15...v0.2.0) (2022-07-21)
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
### ⚠ BREAKING CHANGES
|
|
122
|
+
|
|
123
|
+
* - The return value of `useSingleSelection`:
|
|
124
|
+
- Rename `value` to `selectedValue`
|
|
125
|
+
- The return value of `useMultipleSelection`:
|
|
126
|
+
- Rename `values` to `selectedValues`
|
|
127
|
+
|
|
128
|
+
* rename props of return values ([87e357b](https://github.com/BlackGlory/extra-react-hooks/commit/87e357be9e502cd915b4505979184bf85f2819ba))
|
|
129
|
+
|
|
130
|
+
### [0.1.15](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.14...v0.1.15) (2022-07-21)
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
### Features
|
|
134
|
+
|
|
135
|
+
* add useRenderCounter ([c522357](https://github.com/BlackGlory/extra-react-hooks/commit/c5223571d7e1d83cd49349b8e17c005a898e4b0a))
|
|
136
|
+
|
|
137
|
+
### [0.1.14](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.13...v0.1.14) (2022-07-21)
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
### Features
|
|
141
|
+
|
|
142
|
+
* add useIsFirstRender, useUpdateEffect ([b4f315b](https://github.com/BlackGlory/extra-react-hooks/commit/b4f315bcd8f6fd367bdb8044bade741bbdc8d9b9))
|
|
143
|
+
|
|
144
|
+
### [0.1.13](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.12...v0.1.13) (2022-07-21)
|
|
145
|
+
|
|
146
|
+
|
|
147
|
+
### Features
|
|
148
|
+
|
|
149
|
+
* add useMultipleSelection ([2dcfbe6](https://github.com/BlackGlory/extra-react-hooks/commit/2dcfbe65f713bf35915eec967d400c5c44b86e7c))
|
|
150
|
+
|
|
151
|
+
### [0.1.12](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.11...v0.1.12) (2022-06-20)
|
|
152
|
+
|
|
153
|
+
### [0.1.11](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.10...v0.1.11) (2022-03-19)
|
|
154
|
+
|
|
155
|
+
### [0.1.10](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.9...v0.1.10) (2022-01-05)
|
|
156
|
+
|
|
157
|
+
### [0.1.9](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.8...v0.1.9) (2021-12-13)
|
|
158
|
+
|
|
159
|
+
|
|
160
|
+
### Features
|
|
161
|
+
|
|
162
|
+
* add useFiniteStateMachine ([e6e8962](https://github.com/BlackGlory/extra-react-hooks/commit/e6e8962724774a8b217a1fd5332c13ba4ee051f7))
|
|
163
|
+
|
|
164
|
+
### [0.1.8](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.7...v0.1.8) (2021-12-13)
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
### Features
|
|
168
|
+
|
|
169
|
+
* add useForceUpdate ([f747227](https://github.com/BlackGlory/extra-react-hooks/commit/f747227c02c5bb2f0a0f1889de1c022bc9ca1e4d))
|
|
170
|
+
|
|
171
|
+
### [0.1.7](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.6...v0.1.7) (2021-12-10)
|
|
172
|
+
|
|
173
|
+
|
|
174
|
+
### Features
|
|
175
|
+
|
|
176
|
+
* add useStep ([f404846](https://github.com/BlackGlory/extra-react-hooks/commit/f4048462cc254499d7fd06cd51e16e98acd978ca))
|
|
177
|
+
|
|
178
|
+
### [0.1.6](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.5...v0.1.6) (2021-11-15)
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
### Features
|
|
182
|
+
|
|
183
|
+
* add useResizeObserver ([8a4e317](https://github.com/BlackGlory/extra-react-hooks/commit/8a4e317921387fa26e768796e52c8fe44e9b347e))
|
|
184
|
+
|
|
185
|
+
### [0.1.5](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.4...v0.1.5) (2021-10-04)
|
|
186
|
+
|
|
187
|
+
|
|
188
|
+
### Features
|
|
189
|
+
|
|
190
|
+
* add useIncrement ([e5f1fc4](https://github.com/BlackGlory/extra-react-hooks/commit/e5f1fc442a2c69aa490fed873cc21fe4ad9ff76b))
|
|
191
|
+
|
|
192
|
+
### [0.1.4](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.3...v0.1.4) (2021-08-18)
|
|
193
|
+
|
|
194
|
+
|
|
195
|
+
### Features
|
|
196
|
+
|
|
197
|
+
* add useIsMounted ([32a1295](https://github.com/BlackGlory/extra-react-hooks/commit/32a12951aab92ae5734f4caddf45021e2bbed793))
|
|
198
|
+
|
|
199
|
+
### [0.1.3](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.2...v0.1.3) (2021-08-18)
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
### Features
|
|
203
|
+
|
|
204
|
+
* add useStateCycle ([a48da21](https://github.com/BlackGlory/extra-react-hooks/commit/a48da211f364688daa63a0bd5406fa2f2c61eba7))
|
|
205
|
+
|
|
206
|
+
### [0.1.2](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.1...v0.1.2) (2021-07-03)
|
|
207
|
+
|
|
208
|
+
### [0.1.1](https://github.com/BlackGlory/extra-react-hooks/compare/v0.1.0...v0.1.1) (2021-06-29)
|
|
209
|
+
|
|
210
|
+
|
|
211
|
+
### Features
|
|
212
|
+
|
|
213
|
+
* add useMount ([070045a](https://github.com/BlackGlory/extra-react-hooks/commit/070045ac0f209712eadd0f4e79c1328d20745b04))
|
|
214
|
+
|
|
215
|
+
## 0.1.0 (2021-06-04)
|
|
216
|
+
|
|
217
|
+
|
|
218
|
+
### Features
|
|
219
|
+
|
|
220
|
+
* add useToggle, useSingleSelection ([0b9ee92](https://github.com/BlackGlory/extra-react-hooks/commit/0b9ee92597a230989b51b7242f529f0a36590d1f))
|
package/lib/index.d.ts
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
export * from './use-increment.js';
|
|
2
|
-
export * from './use-is-mounted.js';
|
|
3
|
-
export * from './use-is-first-render.js';
|
|
4
|
-
export * from './use-render-counter.js';
|
|
5
|
-
export * from './use-mount.js';
|
|
6
|
-
export * from './use-mount-async.js';
|
|
7
|
-
export * from './use-unmount.js';
|
|
8
|
-
export * from './use-effect-async.js';
|
|
9
|
-
export * from './use-callback-async.js';
|
|
10
|
-
export * from './use-update-effect.js';
|
|
11
|
-
export * from './use-single-selection.js';
|
|
12
|
-
export * from './use-multiple-selection.js';
|
|
13
|
-
export * from './use-state-cycle.js';
|
|
14
|
-
export * from './use-toggle.js';
|
|
15
|
-
export * from './use-resize-observer.js';
|
|
16
|
-
export * from './use-step.js';
|
|
17
|
-
export * from './use-force-update.js';
|
|
18
|
-
export * from './use-finite-state-machine.js';
|
|
19
|
-
export * from './use-iife.js';
|
|
1
|
+
export * from './use-increment.js';
|
|
2
|
+
export * from './use-is-mounted.js';
|
|
3
|
+
export * from './use-is-first-render.js';
|
|
4
|
+
export * from './use-render-counter.js';
|
|
5
|
+
export * from './use-mount.js';
|
|
6
|
+
export * from './use-mount-async.js';
|
|
7
|
+
export * from './use-unmount.js';
|
|
8
|
+
export * from './use-effect-async.js';
|
|
9
|
+
export * from './use-callback-async.js';
|
|
10
|
+
export * from './use-update-effect.js';
|
|
11
|
+
export * from './use-single-selection.js';
|
|
12
|
+
export * from './use-multiple-selection.js';
|
|
13
|
+
export * from './use-state-cycle.js';
|
|
14
|
+
export * from './use-toggle.js';
|
|
15
|
+
export * from './use-resize-observer.js';
|
|
16
|
+
export * from './use-step.js';
|
|
17
|
+
export * from './use-force-update.js';
|
|
18
|
+
export * from './use-finite-state-machine.js';
|
|
19
|
+
export * from './use-iife.js';
|
package/lib/index.js
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
export * from './use-increment.js';
|
|
2
|
-
export * from './use-is-mounted.js';
|
|
3
|
-
export * from './use-is-first-render.js';
|
|
4
|
-
export * from './use-render-counter.js';
|
|
5
|
-
export * from './use-mount.js';
|
|
6
|
-
export * from './use-mount-async.js';
|
|
7
|
-
export * from './use-unmount.js';
|
|
8
|
-
export * from './use-effect-async.js';
|
|
9
|
-
export * from './use-callback-async.js';
|
|
10
|
-
export * from './use-update-effect.js';
|
|
11
|
-
export * from './use-single-selection.js';
|
|
12
|
-
export * from './use-multiple-selection.js';
|
|
13
|
-
export * from './use-state-cycle.js';
|
|
14
|
-
export * from './use-toggle.js';
|
|
15
|
-
export * from './use-resize-observer.js';
|
|
16
|
-
export * from './use-step.js';
|
|
17
|
-
export * from './use-force-update.js';
|
|
18
|
-
export * from './use-finite-state-machine.js';
|
|
19
|
-
export * from './use-iife.js';
|
|
1
|
+
export * from './use-increment.js';
|
|
2
|
+
export * from './use-is-mounted.js';
|
|
3
|
+
export * from './use-is-first-render.js';
|
|
4
|
+
export * from './use-render-counter.js';
|
|
5
|
+
export * from './use-mount.js';
|
|
6
|
+
export * from './use-mount-async.js';
|
|
7
|
+
export * from './use-unmount.js';
|
|
8
|
+
export * from './use-effect-async.js';
|
|
9
|
+
export * from './use-callback-async.js';
|
|
10
|
+
export * from './use-update-effect.js';
|
|
11
|
+
export * from './use-single-selection.js';
|
|
12
|
+
export * from './use-multiple-selection.js';
|
|
13
|
+
export * from './use-state-cycle.js';
|
|
14
|
+
export * from './use-toggle.js';
|
|
15
|
+
export * from './use-resize-observer.js';
|
|
16
|
+
export * from './use-step.js';
|
|
17
|
+
export * from './use-force-update.js';
|
|
18
|
+
export * from './use-finite-state-machine.js';
|
|
19
|
+
export * from './use-iife.js';
|
|
20
20
|
//# sourceMappingURL=index.js.map
|
package/lib/types.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export interface IOptionState {
|
|
2
|
-
selected: boolean;
|
|
3
|
-
}
|
|
1
|
+
export interface IOptionState {
|
|
2
|
+
selected: boolean;
|
|
3
|
+
}
|
package/lib/types.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { DependencyList } from 'react';
|
|
2
|
-
export declare function useCallbackAsync<Args extends unknown[]>(callback: (...args: [...args: Args, signal: AbortSignal]) => Promise<void>, deps: DependencyList): (...args: Args) => void;
|
|
1
|
+
import { DependencyList } from 'react';
|
|
2
|
+
export declare function useCallbackAsync<Args extends unknown[]>(callback: (...args: [...args: Args, signal: AbortSignal]) => Promise<void>, deps: DependencyList): (...args: Args) => void;
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import { useEffect, useCallback, useMemo } from 'react';
|
|
2
|
-
import { go } from '@blackglory/prelude';
|
|
3
|
-
import { AbortController } from 'extra-abort';
|
|
4
|
-
const abort = Symbol();
|
|
5
|
-
export function useCallbackAsync(callback, deps) {
|
|
6
|
-
const controller = useMemo(() => new AbortController(), deps);
|
|
7
|
-
useEffect(() => () => controller.abort(abort), [controller]);
|
|
8
|
-
return useCallback((...args) => {
|
|
9
|
-
go(async () => {
|
|
10
|
-
try {
|
|
11
|
-
await callback(...args, controller.signal);
|
|
12
|
-
}
|
|
13
|
-
catch (err) {
|
|
14
|
-
if (err !== abort)
|
|
15
|
-
throw err;
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
|
-
}, [
|
|
19
|
-
}
|
|
1
|
+
import { useEffect, useCallback, useMemo } from 'react';
|
|
2
|
+
import { go } from '@blackglory/prelude';
|
|
3
|
+
import { AbortController } from 'extra-abort';
|
|
4
|
+
const abort = Symbol();
|
|
5
|
+
export function useCallbackAsync(callback, deps) {
|
|
6
|
+
const controller = useMemo(() => new AbortController(), deps);
|
|
7
|
+
useEffect(() => () => controller.abort(abort), [controller]);
|
|
8
|
+
return useCallback((...args) => {
|
|
9
|
+
go(async () => {
|
|
10
|
+
try {
|
|
11
|
+
await callback(...args, controller.signal);
|
|
12
|
+
}
|
|
13
|
+
catch (err) {
|
|
14
|
+
if (err !== abort)
|
|
15
|
+
throw err;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
}, [controller]);
|
|
19
|
+
}
|
|
20
20
|
//# sourceMappingURL=use-callback-async.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-callback-async.js","sourceRoot":"","sources":["../src/use-callback-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAkB,MAAM,OAAO,CAAA;AACvE,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAE7C,MAAM,KAAK,GAAG,MAAM,EAAE,CAAA;AAEtB,MAAM,UAAU,gBAAgB,CAC9B,QAA0E,EAC1E,IAAoB;IAEpB,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,eAAe,EAAE,EAAE,IAAI,CAAC,CAAA;IAC7D,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAE5D,OAAO,WAAW,CAAC,CAAC,GAAG,IAAU,EAAE,EAAE;QACnC,EAAE,CAAC,KAAK,IAAI,EAAE;YACZ,IAAI;gBACF,MAAM,QAAQ,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,CAAA;aAC3C;YAAC,OAAO,GAAG,EAAE;gBACZ,IAAI,GAAG,KAAK,KAAK;oBAAE,MAAM,GAAG,CAAA;aAC7B;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"use-callback-async.js","sourceRoot":"","sources":["../src/use-callback-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAkB,MAAM,OAAO,CAAA;AACvE,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAE7C,MAAM,KAAK,GAAG,MAAM,EAAE,CAAA;AAEtB,MAAM,UAAU,gBAAgB,CAC9B,QAA0E,EAC1E,IAAoB;IAEpB,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,eAAe,EAAE,EAAE,IAAI,CAAC,CAAA;IAC7D,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAE5D,OAAO,WAAW,CAAC,CAAC,GAAG,IAAU,EAAE,EAAE;QACnC,EAAE,CAAC,KAAK,IAAI,EAAE;YACZ,IAAI;gBACF,MAAM,QAAQ,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,CAAA;aAC3C;YAAC,OAAO,GAAG,EAAE;gBACZ,IAAI,GAAG,KAAK,KAAK;oBAAE,MAAM,GAAG,CAAA;aAC7B;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;AAClB,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { DependencyList } from 'react';
|
|
2
|
-
export declare function useEffectAsync(effect: (signal: AbortSignal) => Promise<void>, deps?: DependencyList): void;
|
|
1
|
+
import { DependencyList } from 'react';
|
|
2
|
+
export declare function useEffectAsync(effect: (signal: AbortSignal) => Promise<void>, deps?: DependencyList): void;
|
package/lib/use-effect-async.js
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import { useEffect } from 'react';
|
|
2
|
-
import { go } from '@blackglory/prelude';
|
|
3
|
-
import { AbortController } from 'extra-abort';
|
|
4
|
-
const abort = Symbol();
|
|
5
|
-
export function useEffectAsync(effect, deps) {
|
|
6
|
-
useEffect(() => {
|
|
7
|
-
const controller = new AbortController();
|
|
8
|
-
go(async () => {
|
|
9
|
-
try {
|
|
10
|
-
await effect(controller.signal);
|
|
11
|
-
}
|
|
12
|
-
catch (err) {
|
|
13
|
-
if (err !== abort)
|
|
14
|
-
throw err;
|
|
15
|
-
}
|
|
16
|
-
});
|
|
17
|
-
return () => controller.abort();
|
|
18
|
-
}, deps);
|
|
19
|
-
}
|
|
1
|
+
import { useEffect } from 'react';
|
|
2
|
+
import { go } from '@blackglory/prelude';
|
|
3
|
+
import { AbortController } from 'extra-abort';
|
|
4
|
+
const abort = Symbol();
|
|
5
|
+
export function useEffectAsync(effect, deps) {
|
|
6
|
+
useEffect(() => {
|
|
7
|
+
const controller = new AbortController();
|
|
8
|
+
go(async () => {
|
|
9
|
+
try {
|
|
10
|
+
await effect(controller.signal);
|
|
11
|
+
}
|
|
12
|
+
catch (err) {
|
|
13
|
+
if (err !== abort)
|
|
14
|
+
throw err;
|
|
15
|
+
}
|
|
16
|
+
});
|
|
17
|
+
return () => controller.abort();
|
|
18
|
+
}, deps);
|
|
19
|
+
}
|
|
20
20
|
//# sourceMappingURL=use-effect-async.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { ObservableFiniteStateMachine, IFiniteStateMachineSchema } from 'extra-fsm';
|
|
2
|
-
export type { ObservableFiniteStateMachine, IFiniteStateMachineSchema } from 'extra-fsm';
|
|
3
|
-
export declare function useFiniteStateMachine<State extends string, Event extends string>(schema: IFiniteStateMachineSchema<State, Event>, initialState: State): ObservableFiniteStateMachine<State, Event>;
|
|
1
|
+
import { ObservableFiniteStateMachine, IFiniteStateMachineSchema } from 'extra-fsm';
|
|
2
|
+
export type { ObservableFiniteStateMachine, IFiniteStateMachineSchema } from 'extra-fsm';
|
|
3
|
+
export declare function useFiniteStateMachine<State extends string, Event extends string>(schema: IFiniteStateMachineSchema<State, Event>, initialState: State): ObservableFiniteStateMachine<State, Event>;
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { useMemo, useEffect } from 'react';
|
|
2
|
-
import { ObservableFiniteStateMachine } from 'extra-fsm';
|
|
3
|
-
import { useForceUpdate } from './use-force-update.js';
|
|
4
|
-
export function useFiniteStateMachine(schema, initialState) {
|
|
5
|
-
const forceUpdate = useForceUpdate();
|
|
6
|
-
const fsm = useMemo(() => new ObservableFiniteStateMachine(schema, initialState), [schema, initialState]);
|
|
7
|
-
useEffect(() => {
|
|
8
|
-
const observable = fsm.observeStateChanges();
|
|
9
|
-
const subscription = observable.subscribe(() => forceUpdate());
|
|
10
|
-
return () => subscription.unsubscribe();
|
|
11
|
-
}, [fsm]);
|
|
12
|
-
return fsm;
|
|
13
|
-
}
|
|
1
|
+
import { useMemo, useEffect } from 'react';
|
|
2
|
+
import { ObservableFiniteStateMachine } from 'extra-fsm';
|
|
3
|
+
import { useForceUpdate } from './use-force-update.js';
|
|
4
|
+
export function useFiniteStateMachine(schema, initialState) {
|
|
5
|
+
const forceUpdate = useForceUpdate();
|
|
6
|
+
const fsm = useMemo(() => new ObservableFiniteStateMachine(schema, initialState), [schema, initialState]);
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
const observable = fsm.observeStateChanges();
|
|
9
|
+
const subscription = observable.subscribe(() => forceUpdate());
|
|
10
|
+
return () => subscription.unsubscribe();
|
|
11
|
+
}, [fsm]);
|
|
12
|
+
return fsm;
|
|
13
|
+
}
|
|
14
14
|
//# sourceMappingURL=use-finite-state-machine.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function useForceUpdate(): () => void;
|
|
1
|
+
export declare function useForceUpdate(): () => void;
|
package/lib/use-force-update.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { useState, useCallback } from 'react';
|
|
2
|
-
export function useForceUpdate() {
|
|
3
|
-
const [, setState] = useState({});
|
|
4
|
-
return useCallback(forceUpdate, []);
|
|
5
|
-
function forceUpdate() {
|
|
6
|
-
setState({});
|
|
7
|
-
}
|
|
8
|
-
}
|
|
1
|
+
import { useState, useCallback } from 'react';
|
|
2
|
+
export function useForceUpdate() {
|
|
3
|
+
const [, setState] = useState({});
|
|
4
|
+
return useCallback(forceUpdate, []);
|
|
5
|
+
function forceUpdate() {
|
|
6
|
+
setState({});
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
9
|
//# sourceMappingURL=use-force-update.js.map
|
package/lib/use-iife.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
export declare function useIIFE(iife: () => void, deps: React.DependencyList): void;
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare function useIIFE(iife: () => void, deps: React.DependencyList): void;
|
package/lib/use-iife.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import { useRef } from 'react';
|
|
2
|
-
import { useIsFirstRender } from "./use-is-first-render.js";
|
|
3
|
-
export function useIIFE(iife, deps) {
|
|
4
|
-
const oldDeps = useRef([]);
|
|
5
|
-
const isFirstRender = useIsFirstRender();
|
|
6
|
-
if (isFirstRender()) {
|
|
7
|
-
iife();
|
|
8
|
-
}
|
|
9
|
-
else {
|
|
10
|
-
if (deps.length === oldDeps.current.length) {
|
|
11
|
-
if (deps.some((x, i) => x !== oldDeps.current[i])) {
|
|
12
|
-
iife();
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
else {
|
|
16
|
-
iife();
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
oldDeps.current = Array.from(deps);
|
|
20
|
-
}
|
|
1
|
+
import { useRef } from 'react';
|
|
2
|
+
import { useIsFirstRender } from "./use-is-first-render.js";
|
|
3
|
+
export function useIIFE(iife, deps) {
|
|
4
|
+
const oldDeps = useRef([]);
|
|
5
|
+
const isFirstRender = useIsFirstRender();
|
|
6
|
+
if (isFirstRender()) {
|
|
7
|
+
iife();
|
|
8
|
+
}
|
|
9
|
+
else {
|
|
10
|
+
if (deps.length === oldDeps.current.length) {
|
|
11
|
+
if (deps.some((x, i) => x !== oldDeps.current[i])) {
|
|
12
|
+
iife();
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
else {
|
|
16
|
+
iife();
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
oldDeps.current = Array.from(deps);
|
|
20
|
+
}
|
|
21
21
|
//# sourceMappingURL=use-iife.js.map
|
package/lib/use-increment.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function useIncrement(initialValue: number): [value: number, increment: (step?: number) => void, reset: () => void];
|
|
1
|
+
export declare function useIncrement(initialValue: number): [value: number, increment: (step?: number) => void, reset: () => void];
|
package/lib/use-increment.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { useState, useCallback } from 'react';
|
|
2
|
-
export function useIncrement(initialValue) {
|
|
3
|
-
const [value, setValue] = useState(initialValue);
|
|
4
|
-
return [value, useCallback(increment, []), useCallback(reset, [])];
|
|
5
|
-
function increment(step = 1) {
|
|
6
|
-
setValue(value => value + step);
|
|
7
|
-
}
|
|
8
|
-
function reset() {
|
|
9
|
-
setValue(initialValue);
|
|
10
|
-
}
|
|
11
|
-
}
|
|
1
|
+
import { useState, useCallback } from 'react';
|
|
2
|
+
export function useIncrement(initialValue) {
|
|
3
|
+
const [value, setValue] = useState(initialValue);
|
|
4
|
+
return [value, useCallback(increment, []), useCallback(reset, [])];
|
|
5
|
+
function increment(step = 1) {
|
|
6
|
+
setValue(value => value + step);
|
|
7
|
+
}
|
|
8
|
+
function reset() {
|
|
9
|
+
setValue(initialValue);
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
12
|
//# sourceMappingURL=use-increment.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function useIsFirstRender(): () => boolean;
|
|
1
|
+
export declare function useIsFirstRender(): () => boolean;
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import { useRef, useCallback } from 'react';
|
|
2
|
-
var State;
|
|
3
|
-
(function (State) {
|
|
4
|
-
State[State["InitialValue"] = 0] = "InitialValue";
|
|
5
|
-
State[State["First"] = 1] = "First";
|
|
6
|
-
State[State["NotFirst"] = 2] = "NotFirst";
|
|
7
|
-
})(State || (State = {}));
|
|
8
|
-
export function useIsFirstRender() {
|
|
9
|
-
const state = useRef(State.InitialValue);
|
|
10
|
-
switch (state.current) {
|
|
11
|
-
case State.InitialValue:
|
|
12
|
-
state.current = State.First;
|
|
13
|
-
break;
|
|
14
|
-
case State.First:
|
|
15
|
-
state.current = State.NotFirst;
|
|
16
|
-
break;
|
|
17
|
-
case State.NotFirst: break;
|
|
18
|
-
}
|
|
19
|
-
return useCallback(isFirstRender, []);
|
|
20
|
-
function isFirstRender() {
|
|
21
|
-
return state.current === State.First;
|
|
22
|
-
}
|
|
23
|
-
}
|
|
1
|
+
import { useRef, useCallback } from 'react';
|
|
2
|
+
var State;
|
|
3
|
+
(function (State) {
|
|
4
|
+
State[State["InitialValue"] = 0] = "InitialValue";
|
|
5
|
+
State[State["First"] = 1] = "First";
|
|
6
|
+
State[State["NotFirst"] = 2] = "NotFirst";
|
|
7
|
+
})(State || (State = {}));
|
|
8
|
+
export function useIsFirstRender() {
|
|
9
|
+
const state = useRef(State.InitialValue);
|
|
10
|
+
switch (state.current) {
|
|
11
|
+
case State.InitialValue:
|
|
12
|
+
state.current = State.First;
|
|
13
|
+
break;
|
|
14
|
+
case State.First:
|
|
15
|
+
state.current = State.NotFirst;
|
|
16
|
+
break;
|
|
17
|
+
case State.NotFirst: break;
|
|
18
|
+
}
|
|
19
|
+
return useCallback(isFirstRender, []);
|
|
20
|
+
function isFirstRender() {
|
|
21
|
+
return state.current === State.First;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
24
|
//# sourceMappingURL=use-is-first-render.js.map
|
package/lib/use-is-mounted.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function useIsMounted(): () => boolean;
|
|
1
|
+
export declare function useIsMounted(): () => boolean;
|
package/lib/use-is-mounted.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { useRef, useCallback } from 'react';
|
|
2
|
-
import { useMount } from './use-mount.js';
|
|
3
|
-
export function useIsMounted() {
|
|
4
|
-
const mounted = useRef(false);
|
|
5
|
-
useMount(() => {
|
|
6
|
-
mounted.current = true;
|
|
7
|
-
return () => {
|
|
8
|
-
mounted.current = false;
|
|
9
|
-
};
|
|
10
|
-
});
|
|
11
|
-
return useCallback(isMounted, []);
|
|
12
|
-
function isMounted() {
|
|
13
|
-
return mounted.current;
|
|
14
|
-
}
|
|
15
|
-
}
|
|
1
|
+
import { useRef, useCallback } from 'react';
|
|
2
|
+
import { useMount } from './use-mount.js';
|
|
3
|
+
export function useIsMounted() {
|
|
4
|
+
const mounted = useRef(false);
|
|
5
|
+
useMount(() => {
|
|
6
|
+
mounted.current = true;
|
|
7
|
+
return () => {
|
|
8
|
+
mounted.current = false;
|
|
9
|
+
};
|
|
10
|
+
});
|
|
11
|
+
return useCallback(isMounted, []);
|
|
12
|
+
function isMounted() {
|
|
13
|
+
return mounted.current;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
16
|
//# sourceMappingURL=use-is-mounted.js.map
|
package/lib/use-mount-async.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function useMountAsync(effect: (signal: AbortSignal) => Promise<void>): void;
|
|
1
|
+
export declare function useMountAsync(effect: (signal: AbortSignal) => Promise<void>): void;
|
package/lib/use-mount-async.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { useEffectAsync } from './use-effect-async.js';
|
|
2
|
-
export function useMountAsync(effect) {
|
|
3
|
-
useEffectAsync(effect, []);
|
|
4
|
-
}
|
|
1
|
+
import { useEffectAsync } from './use-effect-async.js';
|
|
2
|
+
export function useMountAsync(effect) {
|
|
3
|
+
useEffectAsync(effect, []);
|
|
4
|
+
}
|
|
5
5
|
//# sourceMappingURL=use-mount-async.js.map
|
package/lib/use-mount.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { EffectCallback } from 'react';
|
|
2
|
-
export declare function useMount(effect: EffectCallback): void;
|
|
1
|
+
import { EffectCallback } from 'react';
|
|
2
|
+
export declare function useMount(effect: EffectCallback): void;
|
package/lib/use-mount.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { useEffect } from 'react';
|
|
2
|
-
export function useMount(effect) {
|
|
3
|
-
useEffect(effect, []);
|
|
4
|
-
}
|
|
1
|
+
import { useEffect } from 'react';
|
|
2
|
+
export function useMount(effect) {
|
|
3
|
+
useEffect(effect, []);
|
|
4
|
+
}
|
|
5
5
|
//# sourceMappingURL=use-mount.js.map
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { NonEmptyArray } from '@blackglory/prelude';
|
|
2
|
-
import { IOptionState } from "./types.js";
|
|
3
|
-
export declare function useMultipleSelection<T>(options: NonEmptyArray<T>, defaultSelectedIndexes?: number[]): {
|
|
4
|
-
selectedIndexes: number[];
|
|
5
|
-
optionStates: IOptionState[];
|
|
6
|
-
toggle: (index: number) => void;
|
|
7
|
-
select: (index: number) => void;
|
|
8
|
-
unselect: (index: number) => void;
|
|
9
|
-
};
|
|
1
|
+
import { NonEmptyArray } from '@blackglory/prelude';
|
|
2
|
+
import { IOptionState } from "./types.js";
|
|
3
|
+
export declare function useMultipleSelection<T>(options: NonEmptyArray<T>, defaultSelectedIndexes?: number[]): {
|
|
4
|
+
selectedIndexes: number[];
|
|
5
|
+
optionStates: IOptionState[];
|
|
6
|
+
toggle: (index: number) => void;
|
|
7
|
+
select: (index: number) => void;
|
|
8
|
+
unselect: (index: number) => void;
|
|
9
|
+
};
|
|
@@ -1,50 +1,50 @@
|
|
|
1
|
-
import { useState, useMemo, useCallback } from 'react';
|
|
2
|
-
import { assert, toArray } from '@blackglory/prelude';
|
|
3
|
-
import { useIIFE } from "./use-iife.js";
|
|
4
|
-
export function useMultipleSelection(options, defaultSelectedIndexes = []) {
|
|
5
|
-
useIIFE(() => {
|
|
6
|
-
for (const index of defaultSelectedIndexes) {
|
|
7
|
-
assert(index >= 0 && index < options.length, 'The index of parameter defaultSelectedIndexes must be in the range of 0 to values.length');
|
|
8
|
-
}
|
|
9
|
-
}, [defaultSelectedIndexes]);
|
|
10
|
-
const [selectedIndexes, setSelectedIndexes] = useState(new Set(defaultSelectedIndexes));
|
|
11
|
-
return {
|
|
12
|
-
selectedIndexes: useMemo(() => toArray(selectedIndexes), [selectedIndexes]),
|
|
13
|
-
optionStates: useMemo(createOptionStates, [options, selectedIndexes]),
|
|
14
|
-
toggle: useCallback(toggle, [selectedIndexes]),
|
|
15
|
-
select: useCallback(select, []),
|
|
16
|
-
unselect: useCallback(unselect, [])
|
|
17
|
-
};
|
|
18
|
-
function createOptionStates() {
|
|
19
|
-
return options.map((_, index) => {
|
|
20
|
-
const selected = isSelected(index);
|
|
21
|
-
return { selected };
|
|
22
|
-
});
|
|
23
|
-
}
|
|
24
|
-
function isSelected(index) {
|
|
25
|
-
return selectedIndexes.has(index);
|
|
26
|
-
}
|
|
27
|
-
function toggle(index) {
|
|
28
|
-
if (isSelected(index)) {
|
|
29
|
-
unselect(index);
|
|
30
|
-
}
|
|
31
|
-
else {
|
|
32
|
-
select(index);
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
function select(index) {
|
|
36
|
-
setSelectedIndexes(selectedIndexes => {
|
|
37
|
-
const result = new Set(selectedIndexes);
|
|
38
|
-
result.add(index);
|
|
39
|
-
return result;
|
|
40
|
-
});
|
|
41
|
-
}
|
|
42
|
-
function unselect(index) {
|
|
43
|
-
setSelectedIndexes(selectedIndexes => {
|
|
44
|
-
const result = new Set(selectedIndexes);
|
|
45
|
-
result.delete(index);
|
|
46
|
-
return result;
|
|
47
|
-
});
|
|
48
|
-
}
|
|
49
|
-
}
|
|
1
|
+
import { useState, useMemo, useCallback } from 'react';
|
|
2
|
+
import { assert, toArray } from '@blackglory/prelude';
|
|
3
|
+
import { useIIFE } from "./use-iife.js";
|
|
4
|
+
export function useMultipleSelection(options, defaultSelectedIndexes = []) {
|
|
5
|
+
useIIFE(() => {
|
|
6
|
+
for (const index of defaultSelectedIndexes) {
|
|
7
|
+
assert(index >= 0 && index < options.length, 'The index of parameter defaultSelectedIndexes must be in the range of 0 to values.length');
|
|
8
|
+
}
|
|
9
|
+
}, [defaultSelectedIndexes]);
|
|
10
|
+
const [selectedIndexes, setSelectedIndexes] = useState(new Set(defaultSelectedIndexes));
|
|
11
|
+
return {
|
|
12
|
+
selectedIndexes: useMemo(() => toArray(selectedIndexes), [selectedIndexes]),
|
|
13
|
+
optionStates: useMemo(createOptionStates, [options, selectedIndexes]),
|
|
14
|
+
toggle: useCallback(toggle, [selectedIndexes]),
|
|
15
|
+
select: useCallback(select, []),
|
|
16
|
+
unselect: useCallback(unselect, [])
|
|
17
|
+
};
|
|
18
|
+
function createOptionStates() {
|
|
19
|
+
return options.map((_, index) => {
|
|
20
|
+
const selected = isSelected(index);
|
|
21
|
+
return { selected };
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
function isSelected(index) {
|
|
25
|
+
return selectedIndexes.has(index);
|
|
26
|
+
}
|
|
27
|
+
function toggle(index) {
|
|
28
|
+
if (isSelected(index)) {
|
|
29
|
+
unselect(index);
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
select(index);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
function select(index) {
|
|
36
|
+
setSelectedIndexes(selectedIndexes => {
|
|
37
|
+
const result = new Set(selectedIndexes);
|
|
38
|
+
result.add(index);
|
|
39
|
+
return result;
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
function unselect(index) {
|
|
43
|
+
setSelectedIndexes(selectedIndexes => {
|
|
44
|
+
const result = new Set(selectedIndexes);
|
|
45
|
+
result.delete(index);
|
|
46
|
+
return result;
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
50
|
//# sourceMappingURL=use-multiple-selection.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function useRenderCounter(): number;
|
|
1
|
+
export declare function useRenderCounter(): number;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { useRef } from 'react';
|
|
2
|
-
export function useRenderCounter() {
|
|
3
|
-
const counter = useRef(0);
|
|
4
|
-
counter.current++;
|
|
5
|
-
return counter.current;
|
|
6
|
-
}
|
|
1
|
+
import { useRef } from 'react';
|
|
2
|
+
export function useRenderCounter() {
|
|
3
|
+
const counter = useRef(0);
|
|
4
|
+
counter.current++;
|
|
5
|
+
return counter.current;
|
|
6
|
+
}
|
|
7
7
|
//# sourceMappingURL=use-render-counter.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { RefObject, MutableRefObject } from 'react';
|
|
2
|
-
export declare function useResizeObserver(callback: ResizeObserverCallback, refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>): void;
|
|
1
|
+
import { RefObject, MutableRefObject } from 'react';
|
|
2
|
+
export declare function useResizeObserver(callback: ResizeObserverCallback, refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>): void;
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { useEffect } from 'react';
|
|
2
|
-
import { isntNull } from '@blackglory/prelude';
|
|
3
|
-
export function useResizeObserver(callback, refs) {
|
|
4
|
-
const deps = refs.map(x => x.current);
|
|
5
|
-
useEffect(() => {
|
|
6
|
-
const observer = new ResizeObserver(callback);
|
|
7
|
-
refs
|
|
8
|
-
.map(x => x.current)
|
|
9
|
-
.filter(isntNull)
|
|
10
|
-
.forEach(x => observer.observe(x));
|
|
11
|
-
return () => observer.disconnect();
|
|
12
|
-
}, deps);
|
|
13
|
-
}
|
|
1
|
+
import { useEffect } from 'react';
|
|
2
|
+
import { isntNull } from '@blackglory/prelude';
|
|
3
|
+
export function useResizeObserver(callback, refs) {
|
|
4
|
+
const deps = refs.map(x => x.current);
|
|
5
|
+
useEffect(() => {
|
|
6
|
+
const observer = new ResizeObserver(callback);
|
|
7
|
+
refs
|
|
8
|
+
.map(x => x.current)
|
|
9
|
+
.filter(isntNull)
|
|
10
|
+
.forEach(x => observer.observe(x));
|
|
11
|
+
return () => observer.disconnect();
|
|
12
|
+
}, deps);
|
|
13
|
+
}
|
|
14
14
|
//# sourceMappingURL=use-resize-observer.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { NonEmptyArray } from '@blackglory/prelude';
|
|
2
|
-
import { IOptionState } from "./types.js";
|
|
3
|
-
export declare function useSingleSelection<T>(options: NonEmptyArray<T>, defaultSelectedIndex: number): {
|
|
4
|
-
selectedIndex: number;
|
|
5
|
-
optionStates: IOptionState[];
|
|
6
|
-
select: (index: number) => void;
|
|
7
|
-
};
|
|
1
|
+
import { NonEmptyArray } from '@blackglory/prelude';
|
|
2
|
+
import { IOptionState } from "./types.js";
|
|
3
|
+
export declare function useSingleSelection<T>(options: NonEmptyArray<T>, defaultSelectedIndex: number): {
|
|
4
|
+
selectedIndex: number;
|
|
5
|
+
optionStates: IOptionState[];
|
|
6
|
+
select: (index: number) => void;
|
|
7
|
+
};
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import { useState, useMemo, useCallback } from 'react';
|
|
2
|
-
import { assert } from '@blackglory/prelude';
|
|
3
|
-
import { useIIFE } from "./use-iife.js";
|
|
4
|
-
export function useSingleSelection(options, defaultSelectedIndex) {
|
|
5
|
-
useIIFE(() => {
|
|
6
|
-
assert(defaultSelectedIndex >= 0 && defaultSelectedIndex < options.length, 'The parameter defaultSelectedIndex must be in the range of 0 to values.length');
|
|
7
|
-
}, [defaultSelectedIndex]);
|
|
8
|
-
const [selectedIndex, setSelectedIndex] = useState(defaultSelectedIndex);
|
|
9
|
-
return {
|
|
10
|
-
selectedIndex,
|
|
11
|
-
optionStates: useMemo(createOptionStates, [options, selectedIndex]),
|
|
12
|
-
select: useCallback(select, [])
|
|
13
|
-
};
|
|
14
|
-
function createOptionStates() {
|
|
15
|
-
return options.map((_, index) => ({
|
|
16
|
-
selected: index === selectedIndex
|
|
17
|
-
}));
|
|
18
|
-
}
|
|
19
|
-
function select(index) {
|
|
20
|
-
setSelectedIndex(index);
|
|
21
|
-
}
|
|
22
|
-
}
|
|
1
|
+
import { useState, useMemo, useCallback } from 'react';
|
|
2
|
+
import { assert } from '@blackglory/prelude';
|
|
3
|
+
import { useIIFE } from "./use-iife.js";
|
|
4
|
+
export function useSingleSelection(options, defaultSelectedIndex) {
|
|
5
|
+
useIIFE(() => {
|
|
6
|
+
assert(defaultSelectedIndex >= 0 && defaultSelectedIndex < options.length, 'The parameter defaultSelectedIndex must be in the range of 0 to values.length');
|
|
7
|
+
}, [defaultSelectedIndex]);
|
|
8
|
+
const [selectedIndex, setSelectedIndex] = useState(defaultSelectedIndex);
|
|
9
|
+
return {
|
|
10
|
+
selectedIndex,
|
|
11
|
+
optionStates: useMemo(createOptionStates, [options, selectedIndex]),
|
|
12
|
+
select: useCallback(select, [])
|
|
13
|
+
};
|
|
14
|
+
function createOptionStates() {
|
|
15
|
+
return options.map((_, index) => ({
|
|
16
|
+
selected: index === selectedIndex
|
|
17
|
+
}));
|
|
18
|
+
}
|
|
19
|
+
function select(index) {
|
|
20
|
+
setSelectedIndex(index);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
23
|
//# sourceMappingURL=use-single-selection.js.map
|
package/lib/use-state-cycle.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { NonEmptyArray } from '@blackglory/prelude';
|
|
2
|
-
export declare function useStateCycle<T>(orderedStates: NonEmptyArray<T>, initialStateIndex?: number): [state: T, next: () => void];
|
|
1
|
+
import { NonEmptyArray } from '@blackglory/prelude';
|
|
2
|
+
export declare function useStateCycle<T>(orderedStates: NonEmptyArray<T>, initialStateIndex?: number): [state: T, next: () => void];
|
package/lib/use-state-cycle.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { useState, useCallback } from 'react';
|
|
2
|
-
export function useStateCycle(orderedStates, initialStateIndex = 0) {
|
|
3
|
-
const [index, setIndex] = useState(initialStateIndex);
|
|
4
|
-
return [orderedStates[index], useCallback(next, [orderedStates])];
|
|
5
|
-
function next() {
|
|
6
|
-
setIndex(index => {
|
|
7
|
-
if (index + 1 < orderedStates.length) {
|
|
8
|
-
return index + 1;
|
|
9
|
-
}
|
|
10
|
-
else {
|
|
11
|
-
return 0;
|
|
12
|
-
}
|
|
13
|
-
});
|
|
14
|
-
}
|
|
15
|
-
}
|
|
1
|
+
import { useState, useCallback } from 'react';
|
|
2
|
+
export function useStateCycle(orderedStates, initialStateIndex = 0) {
|
|
3
|
+
const [index, setIndex] = useState(initialStateIndex);
|
|
4
|
+
return [orderedStates[index], useCallback(next, [orderedStates])];
|
|
5
|
+
function next() {
|
|
6
|
+
setIndex(index => {
|
|
7
|
+
if (index + 1 < orderedStates.length) {
|
|
8
|
+
return index + 1;
|
|
9
|
+
}
|
|
10
|
+
else {
|
|
11
|
+
return 0;
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
16
|
//# sourceMappingURL=use-state-cycle.js.map
|
package/lib/use-step.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { NonEmptyArray } from '@blackglory/prelude';
|
|
2
|
-
export declare function useStep<T>(steps: NonEmptyArray<T>, initialStepIndex?: number): [currentStep: T, next: () => void, previous: () => void];
|
|
1
|
+
import { NonEmptyArray } from '@blackglory/prelude';
|
|
2
|
+
export declare function useStep<T>(steps: NonEmptyArray<T>, initialStepIndex?: number): [currentStep: T, next: () => void, previous: () => void];
|
package/lib/use-step.js
CHANGED
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
import { useState, useCallback } from 'react';
|
|
2
|
-
export function useStep(steps, initialStepIndex = 0) {
|
|
3
|
-
const [index, setIndex] = useState(initialStepIndex);
|
|
4
|
-
return [steps[index], useCallback(next, [steps]), useCallback(previous, [])];
|
|
5
|
-
function next() {
|
|
6
|
-
setIndex(index => {
|
|
7
|
-
if (index === steps.length - 1) {
|
|
8
|
-
return index;
|
|
9
|
-
}
|
|
10
|
-
else {
|
|
11
|
-
return index + 1;
|
|
12
|
-
}
|
|
13
|
-
});
|
|
14
|
-
}
|
|
15
|
-
function previous() {
|
|
16
|
-
setIndex(index => {
|
|
17
|
-
if (index === 0) {
|
|
18
|
-
return index;
|
|
19
|
-
}
|
|
20
|
-
else {
|
|
21
|
-
return index - 1;
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
|
-
}
|
|
1
|
+
import { useState, useCallback } from 'react';
|
|
2
|
+
export function useStep(steps, initialStepIndex = 0) {
|
|
3
|
+
const [index, setIndex] = useState(initialStepIndex);
|
|
4
|
+
return [steps[index], useCallback(next, [steps]), useCallback(previous, [])];
|
|
5
|
+
function next() {
|
|
6
|
+
setIndex(index => {
|
|
7
|
+
if (index === steps.length - 1) {
|
|
8
|
+
return index;
|
|
9
|
+
}
|
|
10
|
+
else {
|
|
11
|
+
return index + 1;
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
function previous() {
|
|
16
|
+
setIndex(index => {
|
|
17
|
+
if (index === 0) {
|
|
18
|
+
return index;
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
return index - 1;
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
26
|
//# sourceMappingURL=use-step.js.map
|
package/lib/use-toggle.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function useToggle(initialState?: boolean): [on: boolean, toggle: () => void];
|
|
1
|
+
export declare function useToggle(initialState?: boolean): [on: boolean, toggle: () => void];
|
package/lib/use-toggle.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { useState, useCallback } from 'react';
|
|
2
|
-
export function useToggle(initialState = false) {
|
|
3
|
-
const [state, setState] = useState(initialState);
|
|
4
|
-
return [state, useCallback(toggle, [])];
|
|
5
|
-
function toggle() {
|
|
6
|
-
setState(state => !state);
|
|
7
|
-
}
|
|
8
|
-
}
|
|
1
|
+
import { useState, useCallback } from 'react';
|
|
2
|
+
export function useToggle(initialState = false) {
|
|
3
|
+
const [state, setState] = useState(initialState);
|
|
4
|
+
return [state, useCallback(toggle, [])];
|
|
5
|
+
function toggle() {
|
|
6
|
+
setState(state => !state);
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
9
|
//# sourceMappingURL=use-toggle.js.map
|
package/lib/use-unmount.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function useUnmount(effect: () => void): void;
|
|
1
|
+
export declare function useUnmount(effect: () => void): void;
|
package/lib/use-unmount.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { useEffect } from 'react';
|
|
2
|
-
export function useUnmount(effect) {
|
|
3
|
-
useEffect(() => effect, []);
|
|
4
|
-
}
|
|
1
|
+
import { useEffect } from 'react';
|
|
2
|
+
export function useUnmount(effect) {
|
|
3
|
+
useEffect(() => effect, []);
|
|
4
|
+
}
|
|
5
5
|
//# sourceMappingURL=use-unmount.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { EffectCallback } from 'react';
|
|
2
|
-
export declare function useUpdateEffect(effect: EffectCallback, deps?: React.DependencyList): void;
|
|
1
|
+
import { EffectCallback } from 'react';
|
|
2
|
+
export declare function useUpdateEffect(effect: EffectCallback, deps?: React.DependencyList): void;
|
package/lib/use-update-effect.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { useEffect } from 'react';
|
|
2
|
-
import { useIsFirstRender } from './use-is-first-render.js';
|
|
3
|
-
export function useUpdateEffect(effect, deps) {
|
|
4
|
-
const isFirstRender = useIsFirstRender();
|
|
5
|
-
useEffect(() => {
|
|
6
|
-
if (!isFirstRender()) {
|
|
7
|
-
return effect();
|
|
8
|
-
}
|
|
9
|
-
}, deps);
|
|
10
|
-
}
|
|
1
|
+
import { useEffect } from 'react';
|
|
2
|
+
import { useIsFirstRender } from './use-is-first-render.js';
|
|
3
|
+
export function useUpdateEffect(effect, deps) {
|
|
4
|
+
const isFirstRender = useIsFirstRender();
|
|
5
|
+
useEffect(() => {
|
|
6
|
+
if (!isFirstRender()) {
|
|
7
|
+
return effect();
|
|
8
|
+
}
|
|
9
|
+
}, deps);
|
|
10
|
+
}
|
|
11
11
|
//# sourceMappingURL=use-update-effect.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "extra-react-hooks",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"files": [
|
|
@@ -43,6 +43,7 @@
|
|
|
43
43
|
"@typescript-eslint/eslint-plugin": "^5.59.9",
|
|
44
44
|
"@typescript-eslint/parser": "^5.59.9",
|
|
45
45
|
"eslint": "^8.42.0",
|
|
46
|
+
"eslint-plugin-react": "^7.32.2",
|
|
46
47
|
"eslint-plugin-react-hooks": "^4.6.0",
|
|
47
48
|
"husky": "4",
|
|
48
49
|
"karma": "^6.4.2",
|
|
@@ -70,6 +71,6 @@
|
|
|
70
71
|
"rxjs": "^7.8.1"
|
|
71
72
|
},
|
|
72
73
|
"peerDependencies": {
|
|
73
|
-
"react": "^
|
|
74
|
+
"react": "^17 || ^18"
|
|
74
75
|
}
|
|
75
76
|
}
|