@pdg/react-hook 1.0.29 → 1.0.31
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/dist/index.d.ts +1 -0
- package/dist/index.esm.js +70 -5
- package/dist/index.js +73 -8
- package/dist/useForwardLayoutRef.d.ts +3 -0
- package/dist/useForwardRef.d.ts +1 -1
- package/package.json +19 -17
package/dist/index.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ export * from './useFirstSkipEffect';
|
|
|
4
4
|
export * from './useFirstSkipLayoutEffect';
|
|
5
5
|
export * from './useAutoUpdateRefState';
|
|
6
6
|
export * from './useAutoUpdateLayoutRefState';
|
|
7
|
+
export * from './useForwardLayoutRef';
|
|
7
8
|
export * from './useForwardRef';
|
|
8
9
|
export * from './useAutoUpdateRef';
|
|
9
10
|
export * from './useAutoUpdateLayoutRef';
|
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {useRef,useEffect,useState,useCallback,useLayoutEffect}from'react';
|
|
1
|
+
import {useRef,useEffect,useState,useCallback,useLayoutEffect}from'react';function useFirstSkipEffect(effect, deps) {
|
|
2
2
|
var firstRef = useRef(true);
|
|
3
3
|
useEffect(function () {
|
|
4
4
|
if (firstRef.current) {
|
|
@@ -70,7 +70,7 @@ function useAutoUpdateRefState(state, callback) {
|
|
|
70
70
|
var _a = useState(function () { return (callback ? callback(state) : state); }), _value = _a[0], _setValue = _a[1];
|
|
71
71
|
useFirstSkipEffect(function () {
|
|
72
72
|
var newValue = callback ? callback(state) : state;
|
|
73
|
-
if (!equal(valueRef.current, newValue)) {
|
|
73
|
+
if (!equal$1(valueRef.current, newValue)) {
|
|
74
74
|
valueRef.current = newValue;
|
|
75
75
|
_setValue(newValue);
|
|
76
76
|
}
|
|
@@ -92,6 +92,23 @@ function useAutoUpdateRefState(state, callback) {
|
|
|
92
92
|
return finalNewValue;
|
|
93
93
|
}, [callback]);
|
|
94
94
|
return [valueRef, _value, setValue];
|
|
95
|
+
}
|
|
96
|
+
/********************************************************************************************************************
|
|
97
|
+
* equal
|
|
98
|
+
* ******************************************************************************************************************/
|
|
99
|
+
function equal$1(v1, v2) {
|
|
100
|
+
if (v1 === v2)
|
|
101
|
+
return true;
|
|
102
|
+
if (typeof v1 !== typeof v2)
|
|
103
|
+
return false;
|
|
104
|
+
if (v1 == null || v2 == null)
|
|
105
|
+
return false;
|
|
106
|
+
if (typeof v1 === 'object' && typeof v2 === 'object') {
|
|
107
|
+
return JSON.stringify(v1) === JSON.stringify(v2);
|
|
108
|
+
}
|
|
109
|
+
else {
|
|
110
|
+
return v1 === v2;
|
|
111
|
+
}
|
|
95
112
|
}// 구현부
|
|
96
113
|
function useAutoUpdateLayoutRefState(state, callback) {
|
|
97
114
|
var valueRef = useRef(callback ? callback(state) : state);
|
|
@@ -120,8 +137,49 @@ function useAutoUpdateLayoutRefState(state, callback) {
|
|
|
120
137
|
return finalNewValue;
|
|
121
138
|
}, [callback]);
|
|
122
139
|
return [valueRef, _value, setValue];
|
|
123
|
-
}
|
|
140
|
+
}
|
|
141
|
+
/********************************************************************************************************************
|
|
142
|
+
* equal
|
|
143
|
+
* ******************************************************************************************************************/
|
|
144
|
+
function equal(v1, v2) {
|
|
145
|
+
if (v1 === v2)
|
|
146
|
+
return true;
|
|
147
|
+
if (typeof v1 !== typeof v2)
|
|
148
|
+
return false;
|
|
149
|
+
if (v1 == null || v2 == null)
|
|
150
|
+
return false;
|
|
151
|
+
if (typeof v1 === 'object' && typeof v2 === 'object') {
|
|
152
|
+
return JSON.stringify(v1) === JSON.stringify(v2);
|
|
153
|
+
}
|
|
154
|
+
else {
|
|
155
|
+
return v1 === v2;
|
|
156
|
+
}
|
|
157
|
+
}function useForwardLayoutRef(ref, value, onSet, onUnset) {
|
|
124
158
|
useLayoutEffect(function () {
|
|
159
|
+
onSet === null || onSet === void 0 ? void 0 : onSet(value);
|
|
160
|
+
if (ref) {
|
|
161
|
+
if (typeof ref === 'function') {
|
|
162
|
+
ref(value);
|
|
163
|
+
}
|
|
164
|
+
else {
|
|
165
|
+
ref.current = value;
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
return function () {
|
|
169
|
+
onUnset === null || onUnset === void 0 ? void 0 : onUnset();
|
|
170
|
+
if (ref) {
|
|
171
|
+
if (typeof ref === 'function') {
|
|
172
|
+
ref(null);
|
|
173
|
+
}
|
|
174
|
+
else {
|
|
175
|
+
ref.current = null;
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
};
|
|
179
|
+
}, [onSet, onUnset, ref, value]);
|
|
180
|
+
}function useForwardRef(ref, value, onSet, onUnset) {
|
|
181
|
+
useEffect(function () {
|
|
182
|
+
onSet === null || onSet === void 0 ? void 0 : onSet(value);
|
|
125
183
|
if (ref) {
|
|
126
184
|
if (typeof ref === 'function') {
|
|
127
185
|
ref(value);
|
|
@@ -131,6 +189,7 @@ function useAutoUpdateLayoutRefState(state, callback) {
|
|
|
131
189
|
}
|
|
132
190
|
}
|
|
133
191
|
return function () {
|
|
192
|
+
onUnset === null || onUnset === void 0 ? void 0 : onUnset();
|
|
134
193
|
if (ref) {
|
|
135
194
|
if (typeof ref === 'function') {
|
|
136
195
|
ref(null);
|
|
@@ -140,7 +199,7 @@ function useAutoUpdateLayoutRefState(state, callback) {
|
|
|
140
199
|
}
|
|
141
200
|
}
|
|
142
201
|
};
|
|
143
|
-
}, [ref, value]);
|
|
202
|
+
}, [onSet, onUnset, ref, value]);
|
|
144
203
|
}function useAutoUpdateRef(value) {
|
|
145
204
|
var valueRef = useRef(value);
|
|
146
205
|
var _a = useState(0), setUpdateValue = _a[1];
|
|
@@ -214,6 +273,12 @@ function useAutoUpdateLayoutRefState(state, callback) {
|
|
|
214
273
|
},
|
|
215
274
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
216
275
|
[delayMilliseconds]);
|
|
276
|
+
}
|
|
277
|
+
/********************************************************************************************************************
|
|
278
|
+
* ifUndefined
|
|
279
|
+
* ******************************************************************************************************************/
|
|
280
|
+
function ifUndefined(v, v2) {
|
|
281
|
+
return v === undefined ? v2 : v;
|
|
217
282
|
}function clearIntervalRef(ref) {
|
|
218
283
|
if (ref.current) {
|
|
219
284
|
clearInterval(ref.current);
|
|
@@ -233,4 +298,4 @@ function useAutoUpdateLayoutRefState(state, callback) {
|
|
|
233
298
|
}, ms);
|
|
234
299
|
}, []);
|
|
235
300
|
return [ref, setIntervalFunc];
|
|
236
|
-
}export{clearIntervalRef,clearTimeoutRef,useAutoForceUpdate,useAutoUpdateLayoutRef,useAutoUpdateLayoutRefState,useAutoUpdateLayoutState,useAutoUpdateRef,useAutoUpdateRefState,useAutoUpdateState,useFirstSkipEffect,useFirstSkipLayoutEffect,useForceUpdate,useForwardRef,useIntervalRef,useLayoutPerformance,usePerformance,useTimeoutRef};
|
|
301
|
+
}export{clearIntervalRef,clearTimeoutRef,useAutoForceUpdate,useAutoUpdateLayoutRef,useAutoUpdateLayoutRefState,useAutoUpdateLayoutState,useAutoUpdateRef,useAutoUpdateRefState,useAutoUpdateState,useFirstSkipEffect,useFirstSkipLayoutEffect,useForceUpdate,useForwardLayoutRef,useForwardRef,useIntervalRef,useLayoutPerformance,usePerformance,useTimeoutRef};
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
'use strict';var react=require('react')
|
|
1
|
+
'use strict';var react=require('react');function useFirstSkipEffect(effect, deps) {
|
|
2
2
|
var firstRef = react.useRef(true);
|
|
3
3
|
react.useEffect(function () {
|
|
4
4
|
if (firstRef.current) {
|
|
@@ -70,7 +70,7 @@ function useAutoUpdateRefState(state, callback) {
|
|
|
70
70
|
var _a = react.useState(function () { return (callback ? callback(state) : state); }), _value = _a[0], _setValue = _a[1];
|
|
71
71
|
useFirstSkipEffect(function () {
|
|
72
72
|
var newValue = callback ? callback(state) : state;
|
|
73
|
-
if (!
|
|
73
|
+
if (!equal$1(valueRef.current, newValue)) {
|
|
74
74
|
valueRef.current = newValue;
|
|
75
75
|
_setValue(newValue);
|
|
76
76
|
}
|
|
@@ -92,13 +92,30 @@ function useAutoUpdateRefState(state, callback) {
|
|
|
92
92
|
return finalNewValue;
|
|
93
93
|
}, [callback]);
|
|
94
94
|
return [valueRef, _value, setValue];
|
|
95
|
+
}
|
|
96
|
+
/********************************************************************************************************************
|
|
97
|
+
* equal
|
|
98
|
+
* ******************************************************************************************************************/
|
|
99
|
+
function equal$1(v1, v2) {
|
|
100
|
+
if (v1 === v2)
|
|
101
|
+
return true;
|
|
102
|
+
if (typeof v1 !== typeof v2)
|
|
103
|
+
return false;
|
|
104
|
+
if (v1 == null || v2 == null)
|
|
105
|
+
return false;
|
|
106
|
+
if (typeof v1 === 'object' && typeof v2 === 'object') {
|
|
107
|
+
return JSON.stringify(v1) === JSON.stringify(v2);
|
|
108
|
+
}
|
|
109
|
+
else {
|
|
110
|
+
return v1 === v2;
|
|
111
|
+
}
|
|
95
112
|
}// 구현부
|
|
96
113
|
function useAutoUpdateLayoutRefState(state, callback) {
|
|
97
114
|
var valueRef = react.useRef(callback ? callback(state) : state);
|
|
98
115
|
var _a = react.useState(function () { return (callback ? callback(state) : state); }), _value = _a[0], _setValue = _a[1];
|
|
99
116
|
useFirstSkipLayoutEffect(function () {
|
|
100
117
|
var newValue = callback ? callback(state) : state;
|
|
101
|
-
if (!
|
|
118
|
+
if (!equal(valueRef.current, newValue)) {
|
|
102
119
|
valueRef.current = newValue;
|
|
103
120
|
_setValue(newValue);
|
|
104
121
|
}
|
|
@@ -120,8 +137,49 @@ function useAutoUpdateLayoutRefState(state, callback) {
|
|
|
120
137
|
return finalNewValue;
|
|
121
138
|
}, [callback]);
|
|
122
139
|
return [valueRef, _value, setValue];
|
|
123
|
-
}
|
|
140
|
+
}
|
|
141
|
+
/********************************************************************************************************************
|
|
142
|
+
* equal
|
|
143
|
+
* ******************************************************************************************************************/
|
|
144
|
+
function equal(v1, v2) {
|
|
145
|
+
if (v1 === v2)
|
|
146
|
+
return true;
|
|
147
|
+
if (typeof v1 !== typeof v2)
|
|
148
|
+
return false;
|
|
149
|
+
if (v1 == null || v2 == null)
|
|
150
|
+
return false;
|
|
151
|
+
if (typeof v1 === 'object' && typeof v2 === 'object') {
|
|
152
|
+
return JSON.stringify(v1) === JSON.stringify(v2);
|
|
153
|
+
}
|
|
154
|
+
else {
|
|
155
|
+
return v1 === v2;
|
|
156
|
+
}
|
|
157
|
+
}function useForwardLayoutRef(ref, value, onSet, onUnset) {
|
|
124
158
|
react.useLayoutEffect(function () {
|
|
159
|
+
onSet === null || onSet === void 0 ? void 0 : onSet(value);
|
|
160
|
+
if (ref) {
|
|
161
|
+
if (typeof ref === 'function') {
|
|
162
|
+
ref(value);
|
|
163
|
+
}
|
|
164
|
+
else {
|
|
165
|
+
ref.current = value;
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
return function () {
|
|
169
|
+
onUnset === null || onUnset === void 0 ? void 0 : onUnset();
|
|
170
|
+
if (ref) {
|
|
171
|
+
if (typeof ref === 'function') {
|
|
172
|
+
ref(null);
|
|
173
|
+
}
|
|
174
|
+
else {
|
|
175
|
+
ref.current = null;
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
};
|
|
179
|
+
}, [onSet, onUnset, ref, value]);
|
|
180
|
+
}function useForwardRef(ref, value, onSet, onUnset) {
|
|
181
|
+
react.useEffect(function () {
|
|
182
|
+
onSet === null || onSet === void 0 ? void 0 : onSet(value);
|
|
125
183
|
if (ref) {
|
|
126
184
|
if (typeof ref === 'function') {
|
|
127
185
|
ref(value);
|
|
@@ -131,6 +189,7 @@ function useAutoUpdateLayoutRefState(state, callback) {
|
|
|
131
189
|
}
|
|
132
190
|
}
|
|
133
191
|
return function () {
|
|
192
|
+
onUnset === null || onUnset === void 0 ? void 0 : onUnset();
|
|
134
193
|
if (ref) {
|
|
135
194
|
if (typeof ref === 'function') {
|
|
136
195
|
ref(null);
|
|
@@ -140,7 +199,7 @@ function useAutoUpdateLayoutRefState(state, callback) {
|
|
|
140
199
|
}
|
|
141
200
|
}
|
|
142
201
|
};
|
|
143
|
-
}, [ref, value]);
|
|
202
|
+
}, [onSet, onUnset, ref, value]);
|
|
144
203
|
}function useAutoUpdateRef(value) {
|
|
145
204
|
var valueRef = react.useRef(value);
|
|
146
205
|
var _a = react.useState(0), setUpdateValue = _a[1];
|
|
@@ -203,10 +262,10 @@ function useAutoUpdateLayoutRefState(state, callback) {
|
|
|
203
262
|
var _a = useTimeoutRef(), setDelayTimeout = _a[1];
|
|
204
263
|
var _b = react.useState(0), setValue = _b[1];
|
|
205
264
|
return react.useCallback(function (delay) {
|
|
206
|
-
if (
|
|
265
|
+
if (ifUndefined(delay, delayMilliseconds) !== undefined) {
|
|
207
266
|
setDelayTimeout(function () {
|
|
208
267
|
setValue(function (old) { return old + 1; });
|
|
209
|
-
},
|
|
268
|
+
}, ifUndefined(delay, delayMilliseconds));
|
|
210
269
|
}
|
|
211
270
|
else {
|
|
212
271
|
setValue(function (old) { return old + 1; });
|
|
@@ -214,6 +273,12 @@ function useAutoUpdateLayoutRefState(state, callback) {
|
|
|
214
273
|
},
|
|
215
274
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
216
275
|
[delayMilliseconds]);
|
|
276
|
+
}
|
|
277
|
+
/********************************************************************************************************************
|
|
278
|
+
* ifUndefined
|
|
279
|
+
* ******************************************************************************************************************/
|
|
280
|
+
function ifUndefined(v, v2) {
|
|
281
|
+
return v === undefined ? v2 : v;
|
|
217
282
|
}function clearIntervalRef(ref) {
|
|
218
283
|
if (ref.current) {
|
|
219
284
|
clearInterval(ref.current);
|
|
@@ -233,4 +298,4 @@ function useAutoUpdateLayoutRefState(state, callback) {
|
|
|
233
298
|
}, ms);
|
|
234
299
|
}, []);
|
|
235
300
|
return [ref, setIntervalFunc];
|
|
236
|
-
}exports.clearIntervalRef=clearIntervalRef;exports.clearTimeoutRef=clearTimeoutRef;exports.useAutoForceUpdate=useAutoForceUpdate;exports.useAutoUpdateLayoutRef=useAutoUpdateLayoutRef;exports.useAutoUpdateLayoutRefState=useAutoUpdateLayoutRefState;exports.useAutoUpdateLayoutState=useAutoUpdateLayoutState;exports.useAutoUpdateRef=useAutoUpdateRef;exports.useAutoUpdateRefState=useAutoUpdateRefState;exports.useAutoUpdateState=useAutoUpdateState;exports.useFirstSkipEffect=useFirstSkipEffect;exports.useFirstSkipLayoutEffect=useFirstSkipLayoutEffect;exports.useForceUpdate=useForceUpdate;exports.useForwardRef=useForwardRef;exports.useIntervalRef=useIntervalRef;exports.useLayoutPerformance=useLayoutPerformance;exports.usePerformance=usePerformance;exports.useTimeoutRef=useTimeoutRef;
|
|
301
|
+
}exports.clearIntervalRef=clearIntervalRef;exports.clearTimeoutRef=clearTimeoutRef;exports.useAutoForceUpdate=useAutoForceUpdate;exports.useAutoUpdateLayoutRef=useAutoUpdateLayoutRef;exports.useAutoUpdateLayoutRefState=useAutoUpdateLayoutRefState;exports.useAutoUpdateLayoutState=useAutoUpdateLayoutState;exports.useAutoUpdateRef=useAutoUpdateRef;exports.useAutoUpdateRefState=useAutoUpdateRefState;exports.useAutoUpdateState=useAutoUpdateState;exports.useFirstSkipEffect=useFirstSkipEffect;exports.useFirstSkipLayoutEffect=useFirstSkipLayoutEffect;exports.useForceUpdate=useForceUpdate;exports.useForwardLayoutRef=useForwardLayoutRef;exports.useForwardRef=useForwardRef;exports.useIntervalRef=useIntervalRef;exports.useLayoutPerformance=useLayoutPerformance;exports.usePerformance=usePerformance;exports.useTimeoutRef=useTimeoutRef;
|
package/dist/useForwardRef.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { ForwardedRef } from 'react';
|
|
2
|
-
export declare function useForwardRef<T>(ref: ForwardedRef<T>, value: T): void;
|
|
2
|
+
export declare function useForwardRef<T>(ref: ForwardedRef<T>, value: T, onSet?: (value: T) => void, onUnset?: () => void): void;
|
|
3
3
|
export default useForwardRef;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pdg/react-hook",
|
|
3
3
|
"title": "React Hook",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.31",
|
|
5
5
|
"description": "React Hook",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
@@ -25,8 +25,13 @@
|
|
|
25
25
|
"dev-prd-lib": "cd examples && npm run dev-prd-lib",
|
|
26
26
|
"build": "rollup -c --bundleConfigAsCjs",
|
|
27
27
|
"pub": "npm i && npm run build && npm publish --access=public && rm ./.git/hooks/pre-commit",
|
|
28
|
-
"
|
|
29
|
-
"
|
|
28
|
+
"git:commit": "node .git-commit.cjs",
|
|
29
|
+
"git:push": "git push",
|
|
30
|
+
"git:commit:push": "npm run git:commit && npm run git:push",
|
|
31
|
+
"reset:gitignore": "git rm -r --cached . && git add .",
|
|
32
|
+
"reinstall": "npm run reinstall:module",
|
|
33
|
+
"reinstall:module": "rm -rf node_modules && rm -f package-lock.json && npm i",
|
|
34
|
+
"lint": "eslint './src/**/*.{ts,tsx}'"
|
|
30
35
|
},
|
|
31
36
|
"author": "YOUNG CHUL PARK",
|
|
32
37
|
"license": "MIT",
|
|
@@ -40,30 +45,27 @@
|
|
|
40
45
|
"peerDependencies": {
|
|
41
46
|
"react": ">=17.0.0"
|
|
42
47
|
},
|
|
43
|
-
"dependencies": {
|
|
44
|
-
"@pdg/util": "^1.0.24"
|
|
45
|
-
},
|
|
46
48
|
"devDependencies": {
|
|
49
|
+
"@eslint/js": "^9.28.0",
|
|
47
50
|
"@rollup/plugin-commonjs": "^28.0.3",
|
|
48
51
|
"@rollup/plugin-eslint": "^9.0.5",
|
|
49
52
|
"@rollup/plugin-node-resolve": "^16.0.1",
|
|
50
|
-
"@types/node": "^22.
|
|
53
|
+
"@types/node": "^22.15.29",
|
|
51
54
|
"@types/react": "^19.1.6",
|
|
52
|
-
"@typescript-eslint/
|
|
53
|
-
"
|
|
54
|
-
"eslint": "
|
|
55
|
-
"eslint-
|
|
56
|
-
"eslint-plugin-jsx-a11y": "^6.10.2",
|
|
57
|
-
"eslint-plugin-prettier": "^5.2.6",
|
|
55
|
+
"@typescript-eslint/parser": "^8.33.0",
|
|
56
|
+
"eslint": "9.28.0",
|
|
57
|
+
"eslint-config-prettier": "^10.1.5",
|
|
58
|
+
"eslint-plugin-prettier": "^5.4.1",
|
|
58
59
|
"eslint-plugin-react": "^7.37.5",
|
|
59
60
|
"eslint-plugin-react-hooks": "^5.2.0",
|
|
60
61
|
"prettier": "^3.5.3",
|
|
61
|
-
"rollup": "^4.
|
|
62
|
+
"rollup": "^4.41.1",
|
|
62
63
|
"rollup-plugin-delete": "^2.2.0",
|
|
63
64
|
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
64
|
-
"rollup-plugin-
|
|
65
|
+
"rollup-plugin-sass": "^1.15.2",
|
|
65
66
|
"rollup-plugin-typescript2": "^0.36.0",
|
|
66
|
-
"sass": "^1.
|
|
67
|
-
"typescript": "^5.8.3"
|
|
67
|
+
"sass": "^1.89.1",
|
|
68
|
+
"typescript": "^5.8.3",
|
|
69
|
+
"typescript-eslint": "^8.33.0"
|
|
68
70
|
}
|
|
69
71
|
}
|