@superrb/react-addons 4.0.0-0 → 4.0.0-10
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/.vscode/extensions.json +7 -0
- package/.vscode/settings.json +10 -0
- package/.yarn/sdks/eslint/bin/eslint.js +32 -0
- package/.yarn/sdks/eslint/lib/api.js +32 -0
- package/.yarn/sdks/eslint/lib/unsupported-api.js +32 -0
- package/.yarn/sdks/eslint/package.json +14 -0
- package/.yarn/sdks/integrations.yml +5 -0
- package/.yarn/sdks/prettier/bin/prettier.cjs +32 -0
- package/.yarn/sdks/prettier/index.cjs +32 -0
- package/.yarn/sdks/prettier/package.json +7 -0
- package/.yarn/sdks/typescript/bin/tsc +32 -0
- package/.yarn/sdks/typescript/bin/tsserver +32 -0
- package/.yarn/sdks/typescript/lib/tsc.js +32 -0
- package/.yarn/sdks/typescript/lib/tsserver.js +248 -0
- package/.yarn/sdks/typescript/lib/tsserverlibrary.js +248 -0
- package/.yarn/sdks/typescript/lib/typescript.js +32 -0
- package/.yarn/sdks/typescript/package.json +10 -0
- package/components/button.d.ts +1 -1
- package/components/form.d.ts +2 -1
- package/components/form.d.ts.map +1 -1
- package/components/form.js +8 -5
- package/components/modal.d.ts.map +1 -1
- package/components/modal.js +19 -8
- package/components/slideshow-buttons.d.ts +1 -1
- package/components/slideshow-buttons.d.ts.map +1 -1
- package/config.d.ts +5 -0
- package/config.d.ts.map +1 -0
- package/config.js +23 -0
- package/hooks/use-draggable-scroll.d.ts +2 -2
- package/hooks/use-draggable-scroll.d.ts.map +1 -1
- package/hooks/use-draggable-scroll.js +6 -3
- package/hooks/use-escape.d.ts +4 -1
- package/hooks/use-escape.d.ts.map +1 -1
- package/hooks/use-escape.js +5 -3
- package/hooks/use-event-listener.d.ts +1 -1
- package/hooks/use-event-listener.d.ts.map +1 -1
- package/hooks/use-event-listener.js +6 -6
- package/hooks/use-is-in-viewport.d.ts.map +1 -1
- package/hooks/use-is-in-viewport.js +3 -3
- package/hooks/use-slideshow.js +32 -29
- package/index.d.ts +2 -1
- package/index.d.ts.map +1 -1
- package/index.js +2 -1
- package/package.json +3 -1
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -0,0 +1,248 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
const {existsSync} = require(`fs`);
|
|
4
|
+
const {createRequire, register} = require(`module`);
|
|
5
|
+
const {resolve} = require(`path`);
|
|
6
|
+
const {pathToFileURL} = require(`url`);
|
|
7
|
+
|
|
8
|
+
const relPnpApiPath = "../../../../.pnp.cjs";
|
|
9
|
+
|
|
10
|
+
const absPnpApiPath = resolve(__dirname, relPnpApiPath);
|
|
11
|
+
const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
|
|
12
|
+
const absRequire = createRequire(absPnpApiPath);
|
|
13
|
+
|
|
14
|
+
const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
|
|
15
|
+
const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
|
|
16
|
+
|
|
17
|
+
if (existsSync(absPnpApiPath)) {
|
|
18
|
+
if (!process.versions.pnp) {
|
|
19
|
+
// Setup the environment to be able to require typescript/lib/tsserverlibrary.js
|
|
20
|
+
require(absPnpApiPath).setup();
|
|
21
|
+
if (isPnpLoaderEnabled && register) {
|
|
22
|
+
register(pathToFileURL(absPnpLoaderPath));
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
const wrapWithUserWrapper = existsSync(absUserWrapperPath)
|
|
28
|
+
? exports => absRequire(absUserWrapperPath)(exports)
|
|
29
|
+
: exports => exports;
|
|
30
|
+
|
|
31
|
+
const moduleWrapper = exports => {
|
|
32
|
+
return wrapWithUserWrapper(moduleWrapperFn(exports));
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
const moduleWrapperFn = tsserver => {
|
|
36
|
+
if (!process.versions.pnp) {
|
|
37
|
+
return tsserver;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
const {isAbsolute} = require(`path`);
|
|
41
|
+
const pnpApi = require(`pnpapi`);
|
|
42
|
+
|
|
43
|
+
const isVirtual = str => str.match(/\/(\$\$virtual|__virtual__)\//);
|
|
44
|
+
const isPortal = str => str.startsWith("portal:/");
|
|
45
|
+
const normalize = str => str.replace(/\\/g, `/`).replace(/^\/?/, `/`);
|
|
46
|
+
|
|
47
|
+
const dependencyTreeRoots = new Set(pnpApi.getDependencyTreeRoots().map(locator => {
|
|
48
|
+
return `${locator.name}@${locator.reference}`;
|
|
49
|
+
}));
|
|
50
|
+
|
|
51
|
+
// VSCode sends the zip paths to TS using the "zip://" prefix, that TS
|
|
52
|
+
// doesn't understand. This layer makes sure to remove the protocol
|
|
53
|
+
// before forwarding it to TS, and to add it back on all returned paths.
|
|
54
|
+
|
|
55
|
+
function toEditorPath(str) {
|
|
56
|
+
// We add the `zip:` prefix to both `.zip/` paths and virtual paths
|
|
57
|
+
if (isAbsolute(str) && !str.match(/^\^?(zip:|\/zip\/)/) && (str.match(/\.zip\//) || isVirtual(str))) {
|
|
58
|
+
// We also take the opportunity to turn virtual paths into physical ones;
|
|
59
|
+
// this makes it much easier to work with workspaces that list peer
|
|
60
|
+
// dependencies, since otherwise Ctrl+Click would bring us to the virtual
|
|
61
|
+
// file instances instead of the real ones.
|
|
62
|
+
//
|
|
63
|
+
// We only do this to modules owned by the the dependency tree roots.
|
|
64
|
+
// This avoids breaking the resolution when jumping inside a vendor
|
|
65
|
+
// with peer dep (otherwise jumping into react-dom would show resolution
|
|
66
|
+
// errors on react).
|
|
67
|
+
//
|
|
68
|
+
const resolved = isVirtual(str) ? pnpApi.resolveVirtual(str) : str;
|
|
69
|
+
if (resolved) {
|
|
70
|
+
const locator = pnpApi.findPackageLocator(resolved);
|
|
71
|
+
if (locator && (dependencyTreeRoots.has(`${locator.name}@${locator.reference}`) || isPortal(locator.reference))) {
|
|
72
|
+
str = resolved;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
str = normalize(str);
|
|
77
|
+
|
|
78
|
+
if (str.match(/\.zip\//)) {
|
|
79
|
+
switch (hostInfo) {
|
|
80
|
+
// Absolute VSCode `Uri.fsPath`s need to start with a slash.
|
|
81
|
+
// VSCode only adds it automatically for supported schemes,
|
|
82
|
+
// so we have to do it manually for the `zip` scheme.
|
|
83
|
+
// The path needs to start with a caret otherwise VSCode doesn't handle the protocol
|
|
84
|
+
//
|
|
85
|
+
// Ref: https://github.com/microsoft/vscode/issues/105014#issuecomment-686760910
|
|
86
|
+
//
|
|
87
|
+
// 2021-10-08: VSCode changed the format in 1.61.
|
|
88
|
+
// Before | ^zip:/c:/foo/bar.zip/package.json
|
|
89
|
+
// After | ^/zip//c:/foo/bar.zip/package.json
|
|
90
|
+
//
|
|
91
|
+
// 2022-04-06: VSCode changed the format in 1.66.
|
|
92
|
+
// Before | ^/zip//c:/foo/bar.zip/package.json
|
|
93
|
+
// After | ^/zip/c:/foo/bar.zip/package.json
|
|
94
|
+
//
|
|
95
|
+
// 2022-05-06: VSCode changed the format in 1.68
|
|
96
|
+
// Before | ^/zip/c:/foo/bar.zip/package.json
|
|
97
|
+
// After | ^/zip//c:/foo/bar.zip/package.json
|
|
98
|
+
//
|
|
99
|
+
case `vscode <1.61`: {
|
|
100
|
+
str = `^zip:${str}`;
|
|
101
|
+
} break;
|
|
102
|
+
|
|
103
|
+
case `vscode <1.66`: {
|
|
104
|
+
str = `^/zip/${str}`;
|
|
105
|
+
} break;
|
|
106
|
+
|
|
107
|
+
case `vscode <1.68`: {
|
|
108
|
+
str = `^/zip${str}`;
|
|
109
|
+
} break;
|
|
110
|
+
|
|
111
|
+
case `vscode`: {
|
|
112
|
+
str = `^/zip/${str}`;
|
|
113
|
+
} break;
|
|
114
|
+
|
|
115
|
+
// To make "go to definition" work,
|
|
116
|
+
// We have to resolve the actual file system path from virtual path
|
|
117
|
+
// and convert scheme to supported by [vim-rzip](https://github.com/lbrayner/vim-rzip)
|
|
118
|
+
case `coc-nvim`: {
|
|
119
|
+
str = normalize(resolved).replace(/\.zip\//, `.zip::`);
|
|
120
|
+
str = resolve(`zipfile:${str}`);
|
|
121
|
+
} break;
|
|
122
|
+
|
|
123
|
+
// Support neovim native LSP and [typescript-language-server](https://github.com/theia-ide/typescript-language-server)
|
|
124
|
+
// We have to resolve the actual file system path from virtual path,
|
|
125
|
+
// everything else is up to neovim
|
|
126
|
+
case `neovim`: {
|
|
127
|
+
str = normalize(resolved).replace(/\.zip\//, `.zip::`);
|
|
128
|
+
str = `zipfile://${str}`;
|
|
129
|
+
} break;
|
|
130
|
+
|
|
131
|
+
default: {
|
|
132
|
+
str = `zip:${str}`;
|
|
133
|
+
} break;
|
|
134
|
+
}
|
|
135
|
+
} else {
|
|
136
|
+
str = str.replace(/^\/?/, process.platform === `win32` ? `` : `/`);
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
return str;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
function fromEditorPath(str) {
|
|
144
|
+
switch (hostInfo) {
|
|
145
|
+
case `coc-nvim`: {
|
|
146
|
+
str = str.replace(/\.zip::/, `.zip/`);
|
|
147
|
+
// The path for coc-nvim is in format of /<pwd>/zipfile:/<pwd>/.yarn/...
|
|
148
|
+
// So in order to convert it back, we use .* to match all the thing
|
|
149
|
+
// before `zipfile:`
|
|
150
|
+
return process.platform === `win32`
|
|
151
|
+
? str.replace(/^.*zipfile:\//, ``)
|
|
152
|
+
: str.replace(/^.*zipfile:/, ``);
|
|
153
|
+
} break;
|
|
154
|
+
|
|
155
|
+
case `neovim`: {
|
|
156
|
+
str = str.replace(/\.zip::/, `.zip/`);
|
|
157
|
+
// The path for neovim is in format of zipfile:///<pwd>/.yarn/...
|
|
158
|
+
return str.replace(/^zipfile:\/\//, ``);
|
|
159
|
+
} break;
|
|
160
|
+
|
|
161
|
+
case `vscode`:
|
|
162
|
+
default: {
|
|
163
|
+
return str.replace(/^\^?(zip:|\/zip(\/ts-nul-authority)?)\/+/, process.platform === `win32` ? `` : `/`)
|
|
164
|
+
} break;
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
// Force enable 'allowLocalPluginLoads'
|
|
169
|
+
// TypeScript tries to resolve plugins using a path relative to itself
|
|
170
|
+
// which doesn't work when using the global cache
|
|
171
|
+
// https://github.com/microsoft/TypeScript/blob/1b57a0395e0bff191581c9606aab92832001de62/src/server/project.ts#L2238
|
|
172
|
+
// VSCode doesn't want to enable 'allowLocalPluginLoads' due to security concerns but
|
|
173
|
+
// TypeScript already does local loads and if this code is running the user trusts the workspace
|
|
174
|
+
// https://github.com/microsoft/vscode/issues/45856
|
|
175
|
+
const ConfiguredProject = tsserver.server.ConfiguredProject;
|
|
176
|
+
const {enablePluginsWithOptions: originalEnablePluginsWithOptions} = ConfiguredProject.prototype;
|
|
177
|
+
ConfiguredProject.prototype.enablePluginsWithOptions = function() {
|
|
178
|
+
this.projectService.allowLocalPluginLoads = true;
|
|
179
|
+
return originalEnablePluginsWithOptions.apply(this, arguments);
|
|
180
|
+
};
|
|
181
|
+
|
|
182
|
+
// And here is the point where we hijack the VSCode <-> TS communications
|
|
183
|
+
// by adding ourselves in the middle. We locate everything that looks
|
|
184
|
+
// like an absolute path of ours and normalize it.
|
|
185
|
+
|
|
186
|
+
const Session = tsserver.server.Session;
|
|
187
|
+
const {onMessage: originalOnMessage, send: originalSend} = Session.prototype;
|
|
188
|
+
let hostInfo = `unknown`;
|
|
189
|
+
|
|
190
|
+
Object.assign(Session.prototype, {
|
|
191
|
+
onMessage(/** @type {string | object} */ message) {
|
|
192
|
+
const isStringMessage = typeof message === 'string';
|
|
193
|
+
const parsedMessage = isStringMessage ? JSON.parse(message) : message;
|
|
194
|
+
|
|
195
|
+
if (
|
|
196
|
+
parsedMessage != null &&
|
|
197
|
+
typeof parsedMessage === `object` &&
|
|
198
|
+
parsedMessage.arguments &&
|
|
199
|
+
typeof parsedMessage.arguments.hostInfo === `string`
|
|
200
|
+
) {
|
|
201
|
+
hostInfo = parsedMessage.arguments.hostInfo;
|
|
202
|
+
if (hostInfo === `vscode` && process.env.VSCODE_IPC_HOOK) {
|
|
203
|
+
const [, major, minor] = (process.env.VSCODE_IPC_HOOK.match(
|
|
204
|
+
// The RegExp from https://semver.org/ but without the caret at the start
|
|
205
|
+
/(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/
|
|
206
|
+
) ?? []).map(Number)
|
|
207
|
+
|
|
208
|
+
if (major === 1) {
|
|
209
|
+
if (minor < 61) {
|
|
210
|
+
hostInfo += ` <1.61`;
|
|
211
|
+
} else if (minor < 66) {
|
|
212
|
+
hostInfo += ` <1.66`;
|
|
213
|
+
} else if (minor < 68) {
|
|
214
|
+
hostInfo += ` <1.68`;
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
const processedMessageJSON = JSON.stringify(parsedMessage, (key, value) => {
|
|
221
|
+
return typeof value === 'string' ? fromEditorPath(value) : value;
|
|
222
|
+
});
|
|
223
|
+
|
|
224
|
+
return originalOnMessage.call(
|
|
225
|
+
this,
|
|
226
|
+
isStringMessage ? processedMessageJSON : JSON.parse(processedMessageJSON)
|
|
227
|
+
);
|
|
228
|
+
},
|
|
229
|
+
|
|
230
|
+
send(/** @type {any} */ msg) {
|
|
231
|
+
return originalSend.call(this, JSON.parse(JSON.stringify(msg, (key, value) => {
|
|
232
|
+
return typeof value === `string` ? toEditorPath(value) : value;
|
|
233
|
+
})));
|
|
234
|
+
}
|
|
235
|
+
});
|
|
236
|
+
|
|
237
|
+
return tsserver;
|
|
238
|
+
};
|
|
239
|
+
|
|
240
|
+
const [major, minor] = absRequire(`typescript/package.json`).version.split(`.`, 2).map(value => parseInt(value, 10));
|
|
241
|
+
// In TypeScript@>=5.5 the tsserver uses the public TypeScript API so that needs to be patched as well.
|
|
242
|
+
// Ref https://github.com/microsoft/TypeScript/pull/55326
|
|
243
|
+
if (major > 5 || (major === 5 && minor >= 5)) {
|
|
244
|
+
moduleWrapper(absRequire(`typescript`));
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
// Defer to the real typescript/lib/tsserverlibrary.js your application uses
|
|
248
|
+
module.exports = moduleWrapper(absRequire(`typescript/lib/tsserverlibrary.js`));
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
const {existsSync} = require(`fs`);
|
|
4
|
+
const {createRequire, register} = require(`module`);
|
|
5
|
+
const {resolve} = require(`path`);
|
|
6
|
+
const {pathToFileURL} = require(`url`);
|
|
7
|
+
|
|
8
|
+
const relPnpApiPath = "../../../../.pnp.cjs";
|
|
9
|
+
|
|
10
|
+
const absPnpApiPath = resolve(__dirname, relPnpApiPath);
|
|
11
|
+
const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
|
|
12
|
+
const absRequire = createRequire(absPnpApiPath);
|
|
13
|
+
|
|
14
|
+
const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
|
|
15
|
+
const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
|
|
16
|
+
|
|
17
|
+
if (existsSync(absPnpApiPath)) {
|
|
18
|
+
if (!process.versions.pnp) {
|
|
19
|
+
// Setup the environment to be able to require typescript
|
|
20
|
+
require(absPnpApiPath).setup();
|
|
21
|
+
if (isPnpLoaderEnabled && register) {
|
|
22
|
+
register(pathToFileURL(absPnpLoaderPath));
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
const wrapWithUserWrapper = existsSync(absUserWrapperPath)
|
|
28
|
+
? exports => absRequire(absUserWrapperPath)(exports)
|
|
29
|
+
: exports => exports;
|
|
30
|
+
|
|
31
|
+
// Defer to the real typescript your application uses
|
|
32
|
+
module.exports = wrapWithUserWrapper(absRequire(`typescript`));
|
package/components/button.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ type Props = (PropsWithChildren<HTMLAttributes<HTMLButtonElement | HTMLAnchorEle
|
|
|
6
6
|
className?: string;
|
|
7
7
|
href?: string;
|
|
8
8
|
};
|
|
9
|
-
declare const _default: import("react").
|
|
9
|
+
declare const _default: import("react").NamedExoticComponent<Props & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
|
|
10
10
|
export default _default;
|
|
11
11
|
export type { Props as ButtonProps };
|
|
12
12
|
//# sourceMappingURL=button.d.ts.map
|
package/components/form.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ReactNode, ButtonHTMLAttributes } from 'react';
|
|
2
2
|
import { ObjectSchema, InferType, AnySchema } from 'yup';
|
|
3
|
-
import { FieldError } from 'react-hook-form';
|
|
3
|
+
import { FieldError, Path } from 'react-hook-form';
|
|
4
4
|
import { Status } from '../hooks/use-async';
|
|
5
5
|
import { FieldRenderer } from './form/types';
|
|
6
6
|
type WithRecaptcha<T> = T & {
|
|
@@ -31,6 +31,7 @@ export interface FormProps<T extends ObjectSchema<any>, DataStructure extends In
|
|
|
31
31
|
}
|
|
32
32
|
export interface FormRef<T extends ObjectSchema<any>, DataStructure extends InferType<T> = InferType<T>> {
|
|
33
33
|
form: HTMLFormElement;
|
|
34
|
+
setValue: (name: Path<DataStructure>, value: any) => void;
|
|
34
35
|
submit: () => void;
|
|
35
36
|
reset: () => void;
|
|
36
37
|
values: WithRecaptcha<DataStructure>;
|
package/components/form.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../src/components/form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,SAAS,
|
|
1
|
+
{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../src/components/form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,SAAS,EAST,oBAAoB,EAErB,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAExD,OAAO,EAAiB,UAAU,EAAE,IAAI,EAAW,MAAM,iBAAiB,CAAA;AAE1E,OAAiB,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAY5C,KAAK,aAAa,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,cAAc,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAEvD,MAAM,WAAW,SAAS,CACxB,CAAC,SAAS,YAAY,CAAC,GAAG,CAAC,EAC3B,aAAa,SAAS,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC;IAEjD,MAAM,EAAE,CAAC,CAAA;IACT,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,GAAG,CAAA;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE;SAAG,CAAC,IAAI,CAAC,IAAI,MAAM,GAAG,GAAG;KAAE,CAAA;IACzC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,IAAI,CAAA;IACvC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,IAAI,CAAA;IACvC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,oBAAoB,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC,GAAG,KAAK,CAAA;IAClE,kBAAkB,CAAC,EAAE,CACnB,KAAK,CAAC,EAAE,UAAU,EAClB,WAAW,CAAC,EAAE,SAAS,KACpB,SAAS,CAAA;IACd,YAAY,CAAC,EAAE,CACb,KAAK,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,KAChE,SAAS,CAAA;IACd,SAAS,CAAC,EAAE;SAAG,CAAC,IAAI,aAAa,GAAG,aAAa;KAAE,CAAA;IACnD,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,MAAM,WAAW,OAAO,CACtB,CAAC,SAAS,YAAY,CAAC,GAAG,CAAC,EAC3B,aAAa,SAAS,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC;IAEjD,IAAI,EAAE,eAAe,CAAA;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,aAAa,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;IACzD,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,MAAM,EAAE,aAAa,CAAC,aAAa,CAAC,CAAA;IACpC,MAAM,EAAE;SACL,CAAC,IAAI,aAAa,IAAI,MAAM,CAAC,CAAC,EAAE,WAAW;KAC7C,CAAA;CACF;;AAuVD,wBAA+B"}
|
package/components/form.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useState, useEffect, Fragment, forwardRef, useRef, useCallback, useImperativeHandle, } from 'react';
|
|
4
|
-
import {
|
|
4
|
+
import { kebabCase, sentenceCase } from 'change-case';
|
|
5
5
|
import { useForm } from 'react-hook-form';
|
|
6
6
|
import { yupResolver } from '@hookform/resolvers/yup';
|
|
7
7
|
import useAsync from '../hooks/use-async';
|
|
@@ -13,7 +13,7 @@ import messages from './form/messages.json';
|
|
|
13
13
|
import { GoogleReCaptchaProvider, useGoogleReCaptcha, } from 'react-google-recaptcha-v3';
|
|
14
14
|
const FormInner = forwardRef(function FormInner({ schema, name, action, disabled = false, className = '', initialData = {}, onSubmit, onChange = () => { }, method, onStatusChange = () => { }, renderSuccessMessage = (data) => (_jsx(SuccessMessage, { data: data })), renderErrorMessage = (error, fieldSchema) => (_jsx(ErrorMessage, { error: error, fieldSchema: fieldSchema })), renderSubmit = (props) => _jsx(SubmitButton, { ...props }), renderers = {}, useRecaptcha = true, ...props }, ref) {
|
|
15
15
|
const [response, setResponse] = useState();
|
|
16
|
-
const formRef = useRef();
|
|
16
|
+
const formRef = useRef(null);
|
|
17
17
|
const fieldRefs = useRef(new Map());
|
|
18
18
|
const { executeRecaptcha } = useGoogleReCaptcha();
|
|
19
19
|
for (const name of Object.keys(schema.fields)) {
|
|
@@ -94,6 +94,7 @@ const FormInner = forwardRef(function FormInner({ schema, name, action, disabled
|
|
|
94
94
|
...refs,
|
|
95
95
|
[key]: value,
|
|
96
96
|
}), {}),
|
|
97
|
+
setValue,
|
|
97
98
|
errors,
|
|
98
99
|
response,
|
|
99
100
|
}));
|
|
@@ -118,15 +119,17 @@ const FormInner = forwardRef(function FormInner({ schema, name, action, disabled
|
|
|
118
119
|
setValue(fieldName, field?.value);
|
|
119
120
|
handleInput(event);
|
|
120
121
|
};
|
|
121
|
-
return (_jsx(Fragment, { children: field?.spec?.meta?.hidden === true ? (_jsx(FormField, { register: register(fieldName), schema: field, onInput: onInput, disabled: disabled, ref: (ref) =>
|
|
122
|
+
return (_jsx(Fragment, { children: field?.spec?.meta?.hidden === true ? (_jsx(FormField, { register: register(fieldName), schema: field, onInput: onInput, disabled: disabled, ref: (ref) => {
|
|
123
|
+
fieldRefs.current.set(fieldName, ref);
|
|
124
|
+
} })) : (_jsx("div", { className: `form__group form__group--${kebabCase(fieldName)} ${fieldName in errors ? 'form__group--error' : ''} ${field?.type === 'boolean' ? 'form__group--checkbox' : ''} ${field?.type === 'date' ? 'form__group--date' : ''}`, children: _jsxs("label", { className: "form__label", htmlFor: `${name}__${kebabCase(fieldName)}`, children: [_jsx("span", { className: "form__label-text", "data-label": `${field?.spec?.meta?.buttonLabel ? field?.spec?.meta?.buttonLabel : field?.spec?.label}`, dangerouslySetInnerHTML: {
|
|
122
125
|
__html: `${field?.spec?.label} ${!field?.spec?.optional
|
|
123
126
|
? '<span class="form__required-indicator">*</span>'
|
|
124
127
|
: ''}`,
|
|
125
|
-
} }), fieldName in renderers ? (renderers[fieldName](register(fieldName), errors[fieldName], field)) : (_jsxs(_Fragment, { children: [_jsx(FormField, { register: register(fieldName), id: `${name}__${
|
|
128
|
+
} }), fieldName in renderers ? (renderers[fieldName](register(fieldName), errors[fieldName], field)) : (_jsxs(_Fragment, { children: [_jsx(FormField, { register: register(fieldName), id: `${name}__${kebabCase(fieldName)}`, schema: field, onInput: onInput, onChange: onInput, disabled: disabled, ref: (ref) => {
|
|
126
129
|
fieldRefs.current.set(fieldName, ref);
|
|
127
130
|
} }), fieldName in errors &&
|
|
128
131
|
renderErrorMessage(errors[fieldName], field), field.spec?.meta?.help && (_jsx("p", { className: "form__help", children: field.spec.meta.help }))] }))] }) })) }, key));
|
|
129
|
-
}), renderSubmit({ disabled }), useRecaptcha && (_jsxs("p", { className: "form__recaptcha-message", children: ["This site is protected by reCAPTCHA and the Google", ' ', _jsx("a", { href: "https://policies.google.com/privacy", target: "_blank", rel: "noopener", children: "Privacy Policy" }), ' ', "and", ' ', _jsx("a", { href: "https://policies.google.com/terms", target: "_blank", rel: "noopener", children: "Terms of Service" }), ' ', "apply."] }))] })) }));
|
|
132
|
+
}), renderSubmit({ disabled: disabled || status === 'pending' }), useRecaptcha && (_jsxs("p", { className: "form__recaptcha-message", children: ["This site is protected by reCAPTCHA and the Google", ' ', _jsx("a", { href: "https://policies.google.com/privacy", target: "_blank", rel: "noopener", children: "Privacy Policy" }), ' ', "and", ' ', _jsx("a", { href: "https://policies.google.com/terms", target: "_blank", rel: "noopener", children: "Terms of Service" }), ' ', "apply."] }))] })) }));
|
|
130
133
|
});
|
|
131
134
|
function Form(props, ref) {
|
|
132
135
|
const key = process.env.NEXT_PUBLIC_RECAPTCHA_KEY;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../src/components/modal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,iBAAiB,
|
|
1
|
+
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../src/components/modal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,iBAAiB,EAIlB,MAAM,OAAO,CAAA;AAId,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,IAAI,EACJ,SAAS,EACT,SAAS,EACT,WAAmB,EACnB,aAAoB,EACpB,QAAQ,GACT,EAAE,iBAAiB,CAAC,KAAK,CAAC,2CAuE1B"}
|
package/components/modal.js
CHANGED
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useState, useEffect, useRef, useCallback, } from 'react';
|
|
4
4
|
import { local } from '../storage';
|
|
5
|
-
import {
|
|
5
|
+
import { useEventListener, useLockBodyScroll, useModal } from '../hooks';
|
|
6
6
|
export default function Modal({ name, className, openAfter, dismissable = false, preventScroll = true, children, }) {
|
|
7
7
|
const [dismissed, setDismissed] = useState(false);
|
|
8
|
-
const openTimer = useRef();
|
|
9
|
-
const ref = useRef();
|
|
10
|
-
const innerRef = useRef();
|
|
8
|
+
const openTimer = useRef(null);
|
|
9
|
+
const ref = useRef(null);
|
|
10
|
+
const innerRef = useRef(null);
|
|
11
11
|
const { isOpen, openModal, closeModal } = useModal(name);
|
|
12
12
|
useLockBodyScroll(isOpen && preventScroll);
|
|
13
13
|
useEffect(() => {
|
|
@@ -16,16 +16,27 @@ export default function Modal({ name, className, openAfter, dismissable = false,
|
|
|
16
16
|
}
|
|
17
17
|
}, [dismissable, name]);
|
|
18
18
|
useEffect(() => {
|
|
19
|
-
|
|
19
|
+
if (openTimer.current) {
|
|
20
|
+
clearTimeout(openTimer.current);
|
|
21
|
+
}
|
|
20
22
|
if (!dismissed && openAfter) {
|
|
21
23
|
openTimer.current = setTimeout(() => {
|
|
22
24
|
openModal();
|
|
23
25
|
}, openAfter);
|
|
24
26
|
}
|
|
25
27
|
}, [dismissed, openAfter, openModal]);
|
|
26
|
-
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
if (isOpen) {
|
|
30
|
+
ref.current?.showModal();
|
|
31
|
+
}
|
|
32
|
+
else {
|
|
33
|
+
ref.current?.close();
|
|
34
|
+
}
|
|
35
|
+
return () => {
|
|
36
|
+
ref.current?.close();
|
|
37
|
+
};
|
|
38
|
+
}, [isOpen]);
|
|
27
39
|
useEventListener('click', closeModal, undefined, typeof document !== 'undefined' ? document : undefined);
|
|
28
|
-
useEventListener('click', (event) => event.stopPropagation(), undefined, innerRef.current);
|
|
29
40
|
const close = useCallback(() => {
|
|
30
41
|
closeModal();
|
|
31
42
|
if (dismissable) {
|
|
@@ -33,5 +44,5 @@ export default function Modal({ name, className, openAfter, dismissable = false,
|
|
|
33
44
|
setDismissed(true);
|
|
34
45
|
}
|
|
35
46
|
}, [dismissable, name, closeModal]);
|
|
36
|
-
return (_jsxs("
|
|
47
|
+
return (_jsxs("dialog", { id: name, className: `modal ${className}`, ref: ref, children: [_jsxs("button", { className: 'modal__close', onClick: close, children: [_jsx("span", { className: "screenreader-text", children: "Close Modal" }), "\u00D7"] }), _jsx("div", { className: 'modal__inner', ref: innerRef, onClick: (event) => event.nativeEvent.stopImmediatePropagation(), children: children })] }));
|
|
37
48
|
}
|
|
@@ -4,5 +4,5 @@ import { Slideshow } from '@/hooks/use-slideshow';
|
|
|
4
4
|
export default function SlideshowButtons({ slideshow: { currentSlide, goTo, slideshowRef, atStart, atEnd }, ButtonComponent, }: {
|
|
5
5
|
slideshow: Slideshow;
|
|
6
6
|
ButtonComponent?: FC<ButtonProps>;
|
|
7
|
-
}): JSX.Element;
|
|
7
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
//# sourceMappingURL=slideshow-buttons.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slideshow-buttons.d.ts","sourceRoot":"","sources":["../src/components/slideshow-buttons.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAC1B,OAAe,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAEjD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,EAC/D,eAAwB,GACzB,EAAE;IACD,SAAS,EAAE,SAAS,CAAA;IACpB,eAAe,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAA;CAClC,
|
|
1
|
+
{"version":3,"file":"slideshow-buttons.d.ts","sourceRoot":"","sources":["../src/components/slideshow-buttons.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAC1B,OAAe,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAEjD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,EAC/D,eAAwB,GACzB,EAAE;IACD,SAAS,EAAE,SAAS,CAAA;IACpB,eAAe,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAA;CAClC,2CAqBA"}
|
package/config.d.ts
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { CSPDirectives } from 'csp-header';
|
|
2
|
+
export type CSPPresetGenerator = (...args: any[]) => Partial<CSPDirectives>;
|
|
3
|
+
export declare const cspConfig: CSPPresetGenerator;
|
|
4
|
+
export declare const recaptchaCspConfig: CSPPresetGenerator;
|
|
5
|
+
//# sourceMappingURL=config.d.ts.map
|
package/config.d.ts.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["src/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,aAAa,EAAE,MAAM,YAAY,CAAA;AAEpE,MAAM,MAAM,kBAAkB,GAAG,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,aAAa,CAAC,CAAA;AAE3E,eAAO,MAAM,SAAS,EAAE,kBAatB,CAAA;AAEF,eAAO,MAAM,kBAAkB,EAAE,kBAO/B,CAAA"}
|
package/config.js
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { EVAL, INLINE, SELF, NONE } from 'csp-header';
|
|
2
|
+
export const cspConfig = () => ({
|
|
3
|
+
'default-src': [SELF],
|
|
4
|
+
'connect-src': [SELF],
|
|
5
|
+
'script-src': [SELF, INLINE, EVAL, 'netlify-run.netlify.app'],
|
|
6
|
+
'style-src': [SELF, INLINE],
|
|
7
|
+
'img-src': [SELF, 'blob:', 'data:'],
|
|
8
|
+
'font-src': [SELF, 'data:'],
|
|
9
|
+
'object-src': [NONE],
|
|
10
|
+
'media-src': [SELF, 'blob:', 'data:'],
|
|
11
|
+
'frame-src': [SELF, 'app.netlify.com'],
|
|
12
|
+
'frame-ancestors': [SELF],
|
|
13
|
+
'base-uri': [SELF],
|
|
14
|
+
'form-action': [SELF],
|
|
15
|
+
});
|
|
16
|
+
export const recaptchaCspConfig = () => ({
|
|
17
|
+
'connect-src': ['https://www.google.com/recaptcha/'],
|
|
18
|
+
'script-src': [
|
|
19
|
+
'https://www.google.com/recaptcha/',
|
|
20
|
+
'https://www.gstatic.com/recaptcha/',
|
|
21
|
+
],
|
|
22
|
+
'frame-src': ['https://www.google.com/recaptcha/'],
|
|
23
|
+
});
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { MouseEventHandler,
|
|
1
|
+
import { MouseEventHandler, RefObject } from 'react';
|
|
2
2
|
interface Events {
|
|
3
3
|
onMouseDown: MouseEventHandler<HTMLElement>;
|
|
4
4
|
}
|
|
5
|
-
export default function useDraggableScroll(ref:
|
|
5
|
+
export default function useDraggableScroll(ref: RefObject<HTMLElement | null>, { className, ...opts }: {
|
|
6
6
|
className: string;
|
|
7
7
|
}): {
|
|
8
8
|
events: Events;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-draggable-scroll.d.ts","sourceRoot":"","sources":["../src/hooks/use-draggable-scroll.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EACjB,
|
|
1
|
+
{"version":3,"file":"use-draggable-scroll.d.ts","sourceRoot":"","sources":["../src/hooks/use-draggable-scroll.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EACjB,SAAS,EAIV,MAAM,OAAO,CAAA;AAId,UAAU,MAAM;IACd,WAAW,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAA;CAC5C;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CACxC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAClC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,CAAA;CAAE;;EAkF9C"}
|
|
@@ -8,17 +8,20 @@ export default function useDraggableScroll(ref, { className, ...opts }) {
|
|
|
8
8
|
isMounted: ref.current !== undefined,
|
|
9
9
|
});
|
|
10
10
|
const [modifiedEvents, setModifiedEvents] = useState(events);
|
|
11
|
-
const timer = useRef();
|
|
11
|
+
const timer = useRef(null);
|
|
12
12
|
const [dragging, setDragging] = useState(false);
|
|
13
13
|
const [shouldScroll, setShouldScroll] = useState(false);
|
|
14
14
|
setRef(ref.current);
|
|
15
15
|
useEffect(() => {
|
|
16
|
+
if (!ref.current) {
|
|
17
|
+
return;
|
|
18
|
+
}
|
|
16
19
|
const shouldScroll = ref.current?.scrollWidth > ref.current?.clientWidth ||
|
|
17
20
|
ref.current?.scrollHeight > ref.current?.clientHeight;
|
|
18
21
|
setShouldScroll(shouldScroll);
|
|
19
22
|
const fn = shouldScroll ? 'add' : 'remove';
|
|
20
23
|
ref.current?.classList[fn](`${className}--draggable`);
|
|
21
|
-
}, [ref
|
|
24
|
+
}, [ref, className]);
|
|
22
25
|
const onDragStart = () => {
|
|
23
26
|
setDragging(true);
|
|
24
27
|
ref.current?.classList.add(`${className}--dragging`);
|
|
@@ -50,6 +53,6 @@ export default function useDraggableScroll(ref, { className, ...opts }) {
|
|
|
50
53
|
originalOnMouseDown(event);
|
|
51
54
|
},
|
|
52
55
|
});
|
|
53
|
-
}, [ref, ref.current, setModifiedEvents, shouldScroll]);
|
|
56
|
+
}, [ref, ref.current, setModifiedEvents, shouldScroll]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
54
57
|
return { events: modifiedEvents };
|
|
55
58
|
}
|
package/hooks/use-escape.d.ts
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
declare const useEscape: (ref: RefObject<HTMLElement | null>, callback: () => void, opts?: {
|
|
3
|
+
requireFocus: boolean;
|
|
4
|
+
}) => void;
|
|
2
5
|
export default useEscape;
|
|
3
6
|
//# sourceMappingURL=use-escape.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-escape.d.ts","sourceRoot":"","sources":["../src/hooks/use-escape.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"use-escape.d.ts","sourceRoot":"","sources":["../src/hooks/use-escape.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGjC,QAAA,MAAM,SAAS,GACb,KAAK,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAClC,UAAU,MAAM,IAAI,EACpB;;CAEC,SAiBF,CAAA;AAED,eAAe,SAAS,CAAA"}
|
package/hooks/use-escape.js
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import { useEventListener } from '../hooks';
|
|
2
|
-
const useEscape = (ref, callback
|
|
2
|
+
const useEscape = (ref, callback, opts = {
|
|
3
|
+
requireFocus: true
|
|
4
|
+
}) => {
|
|
3
5
|
useEventListener('keydown', (event) => {
|
|
4
|
-
if (ref.current?.contains(document.activeElement) &&
|
|
6
|
+
if ((opts.requireFocus == false || ref.current?.contains(document.activeElement)) &&
|
|
5
7
|
event.key === 'Escape') {
|
|
6
8
|
event.preventDefault();
|
|
7
9
|
callback();
|
|
8
10
|
}
|
|
9
|
-
}, {}, typeof document !== 'undefined' ? document : undefined, ref.current !== undefined && document !== undefined);
|
|
11
|
+
}, {}, typeof document !== 'undefined' ? document : undefined, ref.current !== undefined && typeof document !== 'undefined');
|
|
10
12
|
};
|
|
11
13
|
export default useEscape;
|
|
@@ -2,6 +2,6 @@ type Target = Document | Window | Element;
|
|
|
2
2
|
type EventMap<T extends Target> = T extends Window ? WindowEventHandlersEventMap & GlobalEventHandlersEventMap : T extends Document ? DocumentEventMap : GlobalEventHandlersEventMap;
|
|
3
3
|
type EventName<T extends Target> = keyof EventMap<T>;
|
|
4
4
|
type EventListener<T extends Target, E extends EventName<T>> = (event: EventMap<T>[E]) => void | boolean;
|
|
5
|
-
export default function useEventListener<T extends Target, E extends EventName<T>>(eventName: E, handler: EventListener<T, E>, options?: boolean | AddEventListenerOptions, element?: T, flag?: boolean): void;
|
|
5
|
+
export default function useEventListener<T extends Target, E extends EventName<T>>(eventName: E, handler: EventListener<T, E>, options?: boolean | AddEventListenerOptions, element?: T | null, flag?: boolean): void;
|
|
6
6
|
export {};
|
|
7
7
|
//# sourceMappingURL=use-event-listener.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-event-listener.d.ts","sourceRoot":"","sources":["../src/hooks/use-event-listener.ts"],"names":[],"mappings":"AAEA,KAAK,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAEzC,KAAK,QAAQ,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,SAAS,MAAM,GAC9C,2BAA2B,GAAG,2BAA2B,GACzD,CAAC,SAAS,QAAQ,GAChB,gBAAgB,GAChB,2BAA2B,CAAA;AAEjC,KAAK,SAAS,CAAC,CAAC,SAAS,MAAM,IAAI,MAAM,QAAQ,CAAC,CAAC,CAAC,CAAA;AAEpD,KAAK,aAAa,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,SAAS,CAAC,CAAC,CAAC,IAAI,CAC7D,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAClB,IAAI,GAAG,OAAO,CAAA;AAGnB,MAAM,CAAC,OAAO,UAAU,gBAAgB,CACtC,CAAC,SAAS,MAAM,EAChB,CAAC,SAAS,SAAS,CAAC,CAAC,CAAC,EAEtB,SAAS,EAAE,CAAC,EACZ,OAAO,EAAE,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,EAC5B,OAAO,GAAE,OAAO,GAAG,uBAA4B,EAC/C,OAAO,CAAC,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"use-event-listener.d.ts","sourceRoot":"","sources":["../src/hooks/use-event-listener.ts"],"names":[],"mappings":"AAEA,KAAK,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAEzC,KAAK,QAAQ,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,SAAS,MAAM,GAC9C,2BAA2B,GAAG,2BAA2B,GACzD,CAAC,SAAS,QAAQ,GAChB,gBAAgB,GAChB,2BAA2B,CAAA;AAEjC,KAAK,SAAS,CAAC,CAAC,SAAS,MAAM,IAAI,MAAM,QAAQ,CAAC,CAAC,CAAC,CAAA;AAEpD,KAAK,aAAa,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,SAAS,CAAC,CAAC,CAAC,IAAI,CAC7D,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAClB,IAAI,GAAG,OAAO,CAAA;AAGnB,MAAM,CAAC,OAAO,UAAU,gBAAgB,CACtC,CAAC,SAAS,MAAM,EAChB,CAAC,SAAS,SAAS,CAAC,CAAC,CAAC,EAEtB,SAAS,EAAE,CAAC,EACZ,OAAO,EAAE,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,EAC5B,OAAO,GAAE,OAAO,GAAG,uBAA4B,EAC/C,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAClB,IAAI,GAAE,OAAc,QAmDrB"}
|
|
@@ -2,8 +2,8 @@ import { useEffect, useRef } from 'react';
|
|
|
2
2
|
// Hook
|
|
3
3
|
export default function useEventListener(eventName, handler, options = {}, element, flag = true) {
|
|
4
4
|
// Create a ref that stores handler
|
|
5
|
-
const savedHandler = useRef();
|
|
6
|
-
const elementRef = useRef();
|
|
5
|
+
const savedHandler = useRef(null);
|
|
6
|
+
const elementRef = useRef(null);
|
|
7
7
|
useEffect(() => {
|
|
8
8
|
elementRef.current = element || window;
|
|
9
9
|
}, [element]);
|
|
@@ -21,17 +21,17 @@ export default function useEventListener(eventName, handler, options = {}, eleme
|
|
|
21
21
|
if (!isSupported)
|
|
22
22
|
return;
|
|
23
23
|
// Create event listener that calls handler function stored in ref
|
|
24
|
-
const eventListener = (event) => savedHandler.current(event);
|
|
24
|
+
const eventListener = (event) => savedHandler.current?.(event);
|
|
25
25
|
if (flag) {
|
|
26
26
|
// Add event listener
|
|
27
|
-
elementRef.current
|
|
27
|
+
elementRef.current?.addEventListener(eventName, eventListener, options);
|
|
28
28
|
}
|
|
29
29
|
else {
|
|
30
|
-
elementRef.current
|
|
30
|
+
elementRef.current?.removeEventListener(eventName, eventListener);
|
|
31
31
|
}
|
|
32
32
|
// Remove event listener on cleanup
|
|
33
33
|
return () => {
|
|
34
|
-
elementRef.current
|
|
34
|
+
elementRef.current?.removeEventListener(eventName, eventListener);
|
|
35
35
|
};
|
|
36
36
|
}, [eventName, handler, options, element, flag]);
|
|
37
37
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-is-in-viewport.d.ts","sourceRoot":"","sources":["../src/hooks/use-is-in-viewport.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,OAAO,UAAQ,EACf,UAAU,SAAY,EACtB,SAAS,WAA0B;;
|
|
1
|
+
{"version":3,"file":"use-is-in-viewport.d.ts","sourceRoot":"","sources":["../src/hooks/use-is-in-viewport.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,OAAO,UAAQ,EACf,UAAU,SAAY,EACtB,SAAS,WAA0B;;kBA2Dd,WAAW,GAAG,IAAI;EAiBxC"}
|