lkd-web-kit 0.4.0 → 0.4.2
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/components/InfinityLoader/index.cjs +3 -3
- package/dist/components/SelectInfinity/index.cjs +118 -74
- package/dist/components/SelectInfinity/index.js +119 -75
- package/dist/contexts/NavigationHistoryContext/index.cjs +5 -5
- package/dist/contexts/PageDataContext/index.cjs +3 -3
- package/dist/dist/components/InfinityLoader/index.cjs +46 -0
- package/dist/dist/components/InfinityLoader/index.js +42 -0
- package/dist/dist/form/utils/zodValidator.cjs +15 -0
- package/dist/dist/form/utils/zodValidator.js +11 -0
- package/dist/dist/hocs/withForm.cjs +51 -0
- package/dist/dist/hocs/withForm.js +47 -0
- package/dist/form/FormButtonSubmit.cjs +3 -2
- package/dist/form/FormButtonSubmit.js +3 -2
- package/dist/form/base/FormSelectInfinity.cjs +15 -9
- package/dist/form/base/FormSelectInfinity.js +16 -10
- package/dist/hocs/withModalManager.cjs +3 -3
- package/dist/hooks/useOnScrollProgress.cjs +2 -2
- package/dist/index.cjs +5 -2
- package/dist/index.d.ts +48 -25
- package/dist/index.js +3 -2
- package/dist/node_modules/@tanstack/react-virtual/dist/esm/index.cjs +71 -0
- package/dist/node_modules/@tanstack/react-virtual/dist/esm/index.js +42 -0
- package/dist/node_modules/@tanstack/virtual-core/dist/esm/index.cjs +744 -0
- package/dist/node_modules/@tanstack/virtual-core/dist/esm/index.js +730 -0
- package/dist/node_modules/@tanstack/virtual-core/dist/esm/utils.cjs +71 -0
- package/dist/node_modules/@tanstack/virtual-core/dist/esm/utils.js +64 -0
- package/dist/utils/virtual-styles.cjs +30 -0
- package/dist/utils/virtual-styles.js +25 -0
- package/package.json +4 -1
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
|
+
|
|
5
|
+
function memo(getDeps, fn, opts) {
|
|
6
|
+
let deps = opts.initialDeps ?? [];
|
|
7
|
+
let result;
|
|
8
|
+
function memoizedFunction() {
|
|
9
|
+
var _a, _b, _c, _d;
|
|
10
|
+
let depTime;
|
|
11
|
+
if (opts.key && ((_a = opts.debug) == null ? void 0 : _a.call(opts))) depTime = Date.now();
|
|
12
|
+
const newDeps = getDeps();
|
|
13
|
+
const depsChanged = newDeps.length !== deps.length || newDeps.some((dep, index) => deps[index] !== dep);
|
|
14
|
+
if (!depsChanged) {
|
|
15
|
+
return result;
|
|
16
|
+
}
|
|
17
|
+
deps = newDeps;
|
|
18
|
+
let resultTime;
|
|
19
|
+
if (opts.key && ((_b = opts.debug) == null ? void 0 : _b.call(opts))) resultTime = Date.now();
|
|
20
|
+
result = fn(...newDeps);
|
|
21
|
+
if (opts.key && ((_c = opts.debug) == null ? void 0 : _c.call(opts))) {
|
|
22
|
+
const depEndTime = Math.round((Date.now() - depTime) * 100) / 100;
|
|
23
|
+
const resultEndTime = Math.round((Date.now() - resultTime) * 100) / 100;
|
|
24
|
+
const resultFpsPercentage = resultEndTime / 16;
|
|
25
|
+
const pad = (str, num) => {
|
|
26
|
+
str = String(str);
|
|
27
|
+
while (str.length < num) {
|
|
28
|
+
str = " " + str;
|
|
29
|
+
}
|
|
30
|
+
return str;
|
|
31
|
+
};
|
|
32
|
+
console.info(
|
|
33
|
+
`%c⏱ ${pad(resultEndTime, 5)} /${pad(depEndTime, 5)} ms`,
|
|
34
|
+
`
|
|
35
|
+
font-size: .6rem;
|
|
36
|
+
font-weight: bold;
|
|
37
|
+
color: hsl(${Math.max(
|
|
38
|
+
0,
|
|
39
|
+
Math.min(120 - 120 * resultFpsPercentage, 120)
|
|
40
|
+
)}deg 100% 31%);`,
|
|
41
|
+
opts == null ? void 0 : opts.key
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
(_d = opts == null ? void 0 : opts.onChange) == null ? void 0 : _d.call(opts, result);
|
|
45
|
+
return result;
|
|
46
|
+
}
|
|
47
|
+
memoizedFunction.updateDeps = (newDeps) => {
|
|
48
|
+
deps = newDeps;
|
|
49
|
+
};
|
|
50
|
+
return memoizedFunction;
|
|
51
|
+
}
|
|
52
|
+
function notUndefined(value, msg) {
|
|
53
|
+
if (value === void 0) {
|
|
54
|
+
throw new Error(`Unexpected undefined${""}`);
|
|
55
|
+
} else {
|
|
56
|
+
return value;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
const approxEqual = (a, b) => Math.abs(a - b) <= 1;
|
|
60
|
+
const debounce = (targetWindow, fn, ms) => {
|
|
61
|
+
let timeoutId;
|
|
62
|
+
return function(...args) {
|
|
63
|
+
targetWindow.clearTimeout(timeoutId);
|
|
64
|
+
timeoutId = targetWindow.setTimeout(() => fn.apply(this, args), ms);
|
|
65
|
+
};
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
exports.approxEqual = approxEqual;
|
|
69
|
+
exports.debounce = debounce;
|
|
70
|
+
exports.memo = memo;
|
|
71
|
+
exports.notUndefined = notUndefined;
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
function memo(getDeps, fn, opts) {
|
|
2
|
+
let deps = opts.initialDeps ?? [];
|
|
3
|
+
let result;
|
|
4
|
+
function memoizedFunction() {
|
|
5
|
+
var _a, _b, _c, _d;
|
|
6
|
+
let depTime;
|
|
7
|
+
if (opts.key && ((_a = opts.debug) == null ? void 0 : _a.call(opts))) depTime = Date.now();
|
|
8
|
+
const newDeps = getDeps();
|
|
9
|
+
const depsChanged = newDeps.length !== deps.length || newDeps.some((dep, index) => deps[index] !== dep);
|
|
10
|
+
if (!depsChanged) {
|
|
11
|
+
return result;
|
|
12
|
+
}
|
|
13
|
+
deps = newDeps;
|
|
14
|
+
let resultTime;
|
|
15
|
+
if (opts.key && ((_b = opts.debug) == null ? void 0 : _b.call(opts))) resultTime = Date.now();
|
|
16
|
+
result = fn(...newDeps);
|
|
17
|
+
if (opts.key && ((_c = opts.debug) == null ? void 0 : _c.call(opts))) {
|
|
18
|
+
const depEndTime = Math.round((Date.now() - depTime) * 100) / 100;
|
|
19
|
+
const resultEndTime = Math.round((Date.now() - resultTime) * 100) / 100;
|
|
20
|
+
const resultFpsPercentage = resultEndTime / 16;
|
|
21
|
+
const pad = (str, num) => {
|
|
22
|
+
str = String(str);
|
|
23
|
+
while (str.length < num) {
|
|
24
|
+
str = " " + str;
|
|
25
|
+
}
|
|
26
|
+
return str;
|
|
27
|
+
};
|
|
28
|
+
console.info(
|
|
29
|
+
`%c⏱ ${pad(resultEndTime, 5)} /${pad(depEndTime, 5)} ms`,
|
|
30
|
+
`
|
|
31
|
+
font-size: .6rem;
|
|
32
|
+
font-weight: bold;
|
|
33
|
+
color: hsl(${Math.max(
|
|
34
|
+
0,
|
|
35
|
+
Math.min(120 - 120 * resultFpsPercentage, 120)
|
|
36
|
+
)}deg 100% 31%);`,
|
|
37
|
+
opts == null ? void 0 : opts.key
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
(_d = opts == null ? void 0 : opts.onChange) == null ? void 0 : _d.call(opts, result);
|
|
41
|
+
return result;
|
|
42
|
+
}
|
|
43
|
+
memoizedFunction.updateDeps = (newDeps) => {
|
|
44
|
+
deps = newDeps;
|
|
45
|
+
};
|
|
46
|
+
return memoizedFunction;
|
|
47
|
+
}
|
|
48
|
+
function notUndefined(value, msg) {
|
|
49
|
+
if (value === void 0) {
|
|
50
|
+
throw new Error(`Unexpected undefined${""}`);
|
|
51
|
+
} else {
|
|
52
|
+
return value;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
const approxEqual = (a, b) => Math.abs(a - b) <= 1;
|
|
56
|
+
const debounce = (targetWindow, fn, ms) => {
|
|
57
|
+
let timeoutId;
|
|
58
|
+
return function(...args) {
|
|
59
|
+
targetWindow.clearTimeout(timeoutId);
|
|
60
|
+
timeoutId = targetWindow.setTimeout(() => fn.apply(this, args), ms);
|
|
61
|
+
};
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
export { approxEqual, debounce, memo, notUndefined };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
|
+
|
|
5
|
+
const getVirtualItemProps = (item, virtualizer) => {
|
|
6
|
+
return {
|
|
7
|
+
ref: virtualizer.measureElement,
|
|
8
|
+
["data-index"]: item.index,
|
|
9
|
+
style: {
|
|
10
|
+
position: "absolute",
|
|
11
|
+
top: 0,
|
|
12
|
+
left: 0,
|
|
13
|
+
width: "100%",
|
|
14
|
+
transform: `translateY(${item.start - virtualizer.options.scrollMargin}px)`
|
|
15
|
+
},
|
|
16
|
+
key: item.key
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
const getVirtualContainerProps = (virtualizer) => {
|
|
20
|
+
return {
|
|
21
|
+
style: {
|
|
22
|
+
height: virtualizer.getTotalSize(),
|
|
23
|
+
width: "100%",
|
|
24
|
+
position: "relative"
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
exports.getVirtualContainerProps = getVirtualContainerProps;
|
|
30
|
+
exports.getVirtualItemProps = getVirtualItemProps;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
const getVirtualItemProps = (item, virtualizer) => {
|
|
2
|
+
return {
|
|
3
|
+
ref: virtualizer.measureElement,
|
|
4
|
+
["data-index"]: item.index,
|
|
5
|
+
style: {
|
|
6
|
+
position: "absolute",
|
|
7
|
+
top: 0,
|
|
8
|
+
left: 0,
|
|
9
|
+
width: "100%",
|
|
10
|
+
transform: `translateY(${item.start - virtualizer.options.scrollMargin}px)`
|
|
11
|
+
},
|
|
12
|
+
key: item.key
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
const getVirtualContainerProps = (virtualizer) => {
|
|
16
|
+
return {
|
|
17
|
+
style: {
|
|
18
|
+
height: virtualizer.getTotalSize(),
|
|
19
|
+
width: "100%",
|
|
20
|
+
position: "relative"
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export { getVirtualContainerProps, getVirtualItemProps };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "lkd-web-kit",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.2",
|
|
4
4
|
"description": "A template for creating React component libraries with Vite.",
|
|
5
5
|
"author": "LKD",
|
|
6
6
|
"license": "MIT",
|
|
@@ -66,5 +66,8 @@
|
|
|
66
66
|
"react-hook-form": "^7.58.1",
|
|
67
67
|
"react-query-kit": "^3.3.1",
|
|
68
68
|
"zod": "^3.25.67"
|
|
69
|
+
},
|
|
70
|
+
"dependencies": {
|
|
71
|
+
"@tanstack/react-virtual": "^3.13.11"
|
|
69
72
|
}
|
|
70
73
|
}
|