@tamagui/focusable 1.0.1 → 1.0.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/cjs/focusableInputHOC.js +7 -5
- package/dist/cjs/focusableInputHOC.js.map +2 -2
- package/dist/cjs/registerFocusable.js +1 -1
- package/dist/cjs/registerFocusable.js.map +2 -2
- package/dist/esm/focusableInputHOC.js +8 -6
- package/dist/esm/focusableInputHOC.js.map +2 -2
- package/dist/esm/registerFocusable.js +1 -1
- package/dist/esm/registerFocusable.js.map +2 -2
- package/dist/jsx/focusableInputHOC.js +6 -6
- package/dist/jsx/focusableInputHOC.js.map +2 -2
- package/dist/jsx/registerFocusable.js +1 -1
- package/dist/jsx/registerFocusable.js.map +2 -2
- package/package.json +4 -4
- package/src/focusableInputHOC.tsx +11 -11
- package/src/registerFocusable.ts +1 -1
- package/types/registerFocusable.d.ts +1 -1
|
@@ -32,13 +32,16 @@ function focusableInputHOC(Component) {
|
|
|
32
32
|
(props, ref) => {
|
|
33
33
|
const isInput = (0, import_core.isTamaguiComponent)(Component) && Component.staticConfig.isInput;
|
|
34
34
|
const inputValue = (0, import_react.useRef)(props.value || props.defaultValue || "");
|
|
35
|
+
const unregisterFocusable = (0, import_react.useRef)();
|
|
35
36
|
const inputRef = (0, import_react.useCallback)(
|
|
36
37
|
(input) => {
|
|
38
|
+
var _a;
|
|
37
39
|
if (!props.id)
|
|
38
40
|
return;
|
|
39
41
|
if (!input)
|
|
40
42
|
return;
|
|
41
|
-
(0
|
|
43
|
+
(_a = unregisterFocusable.current) == null ? void 0 : _a.call(unregisterFocusable);
|
|
44
|
+
unregisterFocusable.current = (0, import_registerFocusable.registerFocusable)(props.id, {
|
|
42
45
|
focus: input.focus,
|
|
43
46
|
...isInput && {
|
|
44
47
|
focusAndSelect() {
|
|
@@ -54,12 +57,11 @@ function focusableInputHOC(Component) {
|
|
|
54
57
|
);
|
|
55
58
|
const combinedRefs = (0, import_compose_refs.composeRefs)(ref, inputRef);
|
|
56
59
|
(0, import_react.useEffect)(() => {
|
|
57
|
-
if (!props.id)
|
|
58
|
-
return;
|
|
59
60
|
return () => {
|
|
60
|
-
|
|
61
|
+
var _a;
|
|
62
|
+
(_a = unregisterFocusable.current) == null ? void 0 : _a.call(unregisterFocusable);
|
|
61
63
|
};
|
|
62
|
-
}, [
|
|
64
|
+
}, []);
|
|
63
65
|
const onChangeText = (0, import_core.useEvent)((value) => {
|
|
64
66
|
var _a;
|
|
65
67
|
inputValue.current = value;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/focusableInputHOC.tsx"],
|
|
4
|
-
"sourcesContent": ["import { composeRefs } from '@tamagui/compose-refs'\nimport { TamaguiComponent, isTamaguiComponent, useEvent } from '@tamagui/core'\nimport { forwardRef, useCallback, useEffect, useRef } from 'react'\n\nimport { registerFocusable
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiEe;AAjEf,0BAA4B;AAC5B,kBAA+D;AAC/D,mBAA2D;AAE3D,+
|
|
4
|
+
"sourcesContent": ["import { composeRefs } from '@tamagui/compose-refs'\nimport { TamaguiComponent, isTamaguiComponent, useEvent } from '@tamagui/core'\nimport { forwardRef, useCallback, useEffect, useRef } from 'react'\n\nimport { registerFocusable } from './registerFocusable'\n\nexport function focusableInputHOC<A extends TamaguiComponent>(Component: A): A {\n const component = Component.extractable(\n forwardRef(\n (\n props: {\n id?: string\n onChangeText?: (val: string) => void\n value?: string\n defaultValue?: string\n },\n ref\n ) => {\n const isInput = isTamaguiComponent(Component) && Component.staticConfig.isInput\n const inputValue = useRef(props.value || props.defaultValue || '')\n const unregisterFocusable = useRef<() => void | undefined>()\n\n const inputRef = useCallback(\n (input) => {\n if (!props.id) return\n if (!input) return\n unregisterFocusable.current?.()\n unregisterFocusable.current = registerFocusable(props.id, {\n focus: input.focus,\n\n ...(isInput && {\n // react-native doesn't support programmatic .select()\n focusAndSelect() {\n input.focus()\n if (input.setSelection && typeof inputValue.current === 'string') {\n input.setSelection(0, inputValue.current.length)\n }\n },\n }),\n })\n },\n [isInput, props.id]\n )\n\n const combinedRefs = composeRefs(ref, inputRef)\n\n useEffect(() => {\n return () => {\n unregisterFocusable.current?.()\n }\n }, [])\n\n const onChangeText = useEvent((value) => {\n inputValue.current = value\n props.onChangeText?.(value)\n })\n\n const finalProps = isInput\n ? {\n ...props,\n onChangeText,\n }\n : props\n\n // @ts-expect-error\n return <Component ref={combinedRefs} {...finalProps} />\n }\n )\n ) as any\n\n return component\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiEe;AAjEf,0BAA4B;AAC5B,kBAA+D;AAC/D,mBAA2D;AAE3D,+BAAkC;AAE3B,SAAS,kBAA8C,WAAiB;AAC7E,QAAM,YAAY,UAAU;AAAA,QAC1B;AAAA,MACE,CACE,OAMA,QACG;AACH,cAAM,cAAU,gCAAmB,SAAS,KAAK,UAAU,aAAa;AACxE,cAAM,iBAAa,qBAAO,MAAM,SAAS,MAAM,gBAAgB,EAAE;AACjE,cAAM,0BAAsB,qBAA+B;AAE3D,cAAM,eAAW;AAAA,UACf,CAAC,UAAU;AAvBrB;AAwBY,gBAAI,CAAC,MAAM;AAAI;AACf,gBAAI,CAAC;AAAO;AACZ,sCAAoB,YAApB;AACA,gCAAoB,cAAU,4CAAkB,MAAM,IAAI;AAAA,cACxD,OAAO,MAAM;AAAA,cAEb,GAAI,WAAW;AAAA,gBAEb,iBAAiB;AACf,wBAAM,MAAM;AACZ,sBAAI,MAAM,gBAAgB,OAAO,WAAW,YAAY,UAAU;AAChE,0BAAM,aAAa,GAAG,WAAW,QAAQ,MAAM;AAAA,kBACjD;AAAA,gBACF;AAAA,cACF;AAAA,YACF,CAAC;AAAA,UACH;AAAA,UACA,CAAC,SAAS,MAAM,EAAE;AAAA,QACpB;AAEA,cAAM,mBAAe,iCAAY,KAAK,QAAQ;AAE9C,oCAAU,MAAM;AACd,iBAAO,MAAM;AA/CvB;AAgDY,sCAAoB,YAApB;AAAA,UACF;AAAA,QACF,GAAG,CAAC,CAAC;AAEL,cAAM,mBAAe,sBAAS,CAAC,UAAU;AApDjD;AAqDU,qBAAW,UAAU;AACrB,sBAAM,iBAAN,+BAAqB;AAAA,QACvB,CAAC;AAED,cAAM,aAAa,UACf;AAAA,UACE,GAAG;AAAA,UACH;AAAA,QACF,IACA;AAGJ,eAAO,4CAAC;AAAA,UAAU,KAAK;AAAA,UAAe,GAAG;AAAA,SAAY;AAAA,MACvD;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -23,7 +23,7 @@ __export(registerFocusable_exports, {
|
|
|
23
23
|
unregisterFocusable: () => unregisterFocusable
|
|
24
24
|
});
|
|
25
25
|
module.exports = __toCommonJS(registerFocusable_exports);
|
|
26
|
-
const registerFocusable = (id, input) => {
|
|
26
|
+
const registerFocusable = (id, input) => () => {
|
|
27
27
|
};
|
|
28
28
|
const unregisterFocusable = (id) => {
|
|
29
29
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/registerFocusable.ts"],
|
|
4
|
-
"sourcesContent": ["import { Focusable } from './focusable'\n\nexport const registerFocusable = (id: string, input: Focusable) => {\n // noop focus is handed natively\n}\n\nexport const unregisterFocusable = (id: string) => {\n // noop focus is handed natively\n}\n\nexport const focusFocusable = (id: string) => {\n // noop focus is handed natively\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,MAAM,oBAAoB,CAAC,IAAY,UAAqB;
|
|
4
|
+
"sourcesContent": ["import { Focusable } from './focusable'\n\nexport const registerFocusable = (id: string, input: Focusable) => () => {\n // noop focus is handed natively\n}\n\nexport const unregisterFocusable = (id: string) => {\n // noop focus is handed natively\n}\n\nexport const focusFocusable = (id: string) => {\n // noop focus is handed natively\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,MAAM,oBAAoB,CAAC,IAAY,UAAqB,MAAM;AAEzE;AAEO,MAAM,sBAAsB,CAAC,OAAe;AAEnD;AAEO,MAAM,iBAAiB,CAAC,OAAe;AAE9C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,20 +2,23 @@ import { jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { composeRefs } from "@tamagui/compose-refs";
|
|
3
3
|
import { isTamaguiComponent, useEvent } from "@tamagui/core";
|
|
4
4
|
import { forwardRef, useCallback, useEffect, useRef } from "react";
|
|
5
|
-
import { registerFocusable
|
|
5
|
+
import { registerFocusable } from "./registerFocusable";
|
|
6
6
|
function focusableInputHOC(Component) {
|
|
7
7
|
const component = Component.extractable(
|
|
8
8
|
forwardRef(
|
|
9
9
|
(props, ref) => {
|
|
10
10
|
const isInput = isTamaguiComponent(Component) && Component.staticConfig.isInput;
|
|
11
11
|
const inputValue = useRef(props.value || props.defaultValue || "");
|
|
12
|
+
const unregisterFocusable = useRef();
|
|
12
13
|
const inputRef = useCallback(
|
|
13
14
|
(input) => {
|
|
15
|
+
var _a;
|
|
14
16
|
if (!props.id)
|
|
15
17
|
return;
|
|
16
18
|
if (!input)
|
|
17
19
|
return;
|
|
18
|
-
|
|
20
|
+
(_a = unregisterFocusable.current) == null ? void 0 : _a.call(unregisterFocusable);
|
|
21
|
+
unregisterFocusable.current = registerFocusable(props.id, {
|
|
19
22
|
focus: input.focus,
|
|
20
23
|
...isInput && {
|
|
21
24
|
focusAndSelect() {
|
|
@@ -31,12 +34,11 @@ function focusableInputHOC(Component) {
|
|
|
31
34
|
);
|
|
32
35
|
const combinedRefs = composeRefs(ref, inputRef);
|
|
33
36
|
useEffect(() => {
|
|
34
|
-
if (!props.id)
|
|
35
|
-
return;
|
|
36
37
|
return () => {
|
|
37
|
-
|
|
38
|
+
var _a;
|
|
39
|
+
(_a = unregisterFocusable.current) == null ? void 0 : _a.call(unregisterFocusable);
|
|
38
40
|
};
|
|
39
|
-
}, [
|
|
41
|
+
}, []);
|
|
40
42
|
const onChangeText = useEvent((value) => {
|
|
41
43
|
var _a;
|
|
42
44
|
inputValue.current = value;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/focusableInputHOC.tsx"],
|
|
4
|
-
"sourcesContent": ["import { composeRefs } from '@tamagui/compose-refs'\nimport { TamaguiComponent, isTamaguiComponent, useEvent } from '@tamagui/core'\nimport { forwardRef, useCallback, useEffect, useRef } from 'react'\n\nimport { registerFocusable
|
|
5
|
-
"mappings": "AAiEe;AAjEf,SAAS,mBAAmB;AAC5B,SAA2B,oBAAoB,gBAAgB;AAC/D,SAAS,YAAY,aAAa,WAAW,cAAc;AAE3D,SAAS,
|
|
4
|
+
"sourcesContent": ["import { composeRefs } from '@tamagui/compose-refs'\nimport { TamaguiComponent, isTamaguiComponent, useEvent } from '@tamagui/core'\nimport { forwardRef, useCallback, useEffect, useRef } from 'react'\n\nimport { registerFocusable } from './registerFocusable'\n\nexport function focusableInputHOC<A extends TamaguiComponent>(Component: A): A {\n const component = Component.extractable(\n forwardRef(\n (\n props: {\n id?: string\n onChangeText?: (val: string) => void\n value?: string\n defaultValue?: string\n },\n ref\n ) => {\n const isInput = isTamaguiComponent(Component) && Component.staticConfig.isInput\n const inputValue = useRef(props.value || props.defaultValue || '')\n const unregisterFocusable = useRef<() => void | undefined>()\n\n const inputRef = useCallback(\n (input) => {\n if (!props.id) return\n if (!input) return\n unregisterFocusable.current?.()\n unregisterFocusable.current = registerFocusable(props.id, {\n focus: input.focus,\n\n ...(isInput && {\n // react-native doesn't support programmatic .select()\n focusAndSelect() {\n input.focus()\n if (input.setSelection && typeof inputValue.current === 'string') {\n input.setSelection(0, inputValue.current.length)\n }\n },\n }),\n })\n },\n [isInput, props.id]\n )\n\n const combinedRefs = composeRefs(ref, inputRef)\n\n useEffect(() => {\n return () => {\n unregisterFocusable.current?.()\n }\n }, [])\n\n const onChangeText = useEvent((value) => {\n inputValue.current = value\n props.onChangeText?.(value)\n })\n\n const finalProps = isInput\n ? {\n ...props,\n onChangeText,\n }\n : props\n\n // @ts-expect-error\n return <Component ref={combinedRefs} {...finalProps} />\n }\n )\n ) as any\n\n return component\n}\n"],
|
|
5
|
+
"mappings": "AAiEe;AAjEf,SAAS,mBAAmB;AAC5B,SAA2B,oBAAoB,gBAAgB;AAC/D,SAAS,YAAY,aAAa,WAAW,cAAc;AAE3D,SAAS,yBAAyB;AAE3B,SAAS,kBAA8C,WAAiB;AAC7E,QAAM,YAAY,UAAU;AAAA,IAC1B;AAAA,MACE,CACE,OAMA,QACG;AACH,cAAM,UAAU,mBAAmB,SAAS,KAAK,UAAU,aAAa;AACxE,cAAM,aAAa,OAAO,MAAM,SAAS,MAAM,gBAAgB,EAAE;AACjE,cAAM,sBAAsB,OAA+B;AAE3D,cAAM,WAAW;AAAA,UACf,CAAC,UAAU;AAvBrB;AAwBY,gBAAI,CAAC,MAAM;AAAI;AACf,gBAAI,CAAC;AAAO;AACZ,sCAAoB,YAApB;AACA,gCAAoB,UAAU,kBAAkB,MAAM,IAAI;AAAA,cACxD,OAAO,MAAM;AAAA,cAEb,GAAI,WAAW;AAAA,gBAEb,iBAAiB;AACf,wBAAM,MAAM;AACZ,sBAAI,MAAM,gBAAgB,OAAO,WAAW,YAAY,UAAU;AAChE,0BAAM,aAAa,GAAG,WAAW,QAAQ,MAAM;AAAA,kBACjD;AAAA,gBACF;AAAA,cACF;AAAA,YACF,CAAC;AAAA,UACH;AAAA,UACA,CAAC,SAAS,MAAM,EAAE;AAAA,QACpB;AAEA,cAAM,eAAe,YAAY,KAAK,QAAQ;AAE9C,kBAAU,MAAM;AACd,iBAAO,MAAM;AA/CvB;AAgDY,sCAAoB,YAApB;AAAA,UACF;AAAA,QACF,GAAG,CAAC,CAAC;AAEL,cAAM,eAAe,SAAS,CAAC,UAAU;AApDjD;AAqDU,qBAAW,UAAU;AACrB,sBAAM,iBAAN,+BAAqB;AAAA,QACvB,CAAC;AAED,cAAM,aAAa,UACf;AAAA,UACE,GAAG;AAAA,UACH;AAAA,QACF,IACA;AAGJ,eAAO,oBAAC;AAAA,UAAU,KAAK;AAAA,UAAe,GAAG;AAAA,SAAY;AAAA,MACvD;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/registerFocusable.ts"],
|
|
4
|
-
"sourcesContent": ["import { Focusable } from './focusable'\n\nexport const registerFocusable = (id: string, input: Focusable) => {\n // noop focus is handed natively\n}\n\nexport const unregisterFocusable = (id: string) => {\n // noop focus is handed natively\n}\n\nexport const focusFocusable = (id: string) => {\n // noop focus is handed natively\n}\n"],
|
|
5
|
-
"mappings": "AAEO,MAAM,oBAAoB,CAAC,IAAY,UAAqB;
|
|
4
|
+
"sourcesContent": ["import { Focusable } from './focusable'\n\nexport const registerFocusable = (id: string, input: Focusable) => () => {\n // noop focus is handed natively\n}\n\nexport const unregisterFocusable = (id: string) => {\n // noop focus is handed natively\n}\n\nexport const focusFocusable = (id: string) => {\n // noop focus is handed natively\n}\n"],
|
|
5
|
+
"mappings": "AAEO,MAAM,oBAAoB,CAAC,IAAY,UAAqB,MAAM;AAEzE;AAEO,MAAM,sBAAsB,CAAC,OAAe;AAEnD;AAEO,MAAM,iBAAiB,CAAC,OAAe;AAE9C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,20 +1,22 @@
|
|
|
1
1
|
import { composeRefs } from "@tamagui/compose-refs";
|
|
2
2
|
import { isTamaguiComponent, useEvent } from "@tamagui/core";
|
|
3
3
|
import { forwardRef, useCallback, useEffect, useRef } from "react";
|
|
4
|
-
import { registerFocusable
|
|
4
|
+
import { registerFocusable } from "./registerFocusable";
|
|
5
5
|
function focusableInputHOC(Component) {
|
|
6
6
|
const component = Component.extractable(
|
|
7
7
|
forwardRef(
|
|
8
8
|
(props, ref) => {
|
|
9
9
|
const isInput = isTamaguiComponent(Component) && Component.staticConfig.isInput;
|
|
10
10
|
const inputValue = useRef(props.value || props.defaultValue || "");
|
|
11
|
+
const unregisterFocusable = useRef();
|
|
11
12
|
const inputRef = useCallback(
|
|
12
13
|
(input) => {
|
|
13
14
|
if (!props.id)
|
|
14
15
|
return;
|
|
15
16
|
if (!input)
|
|
16
17
|
return;
|
|
17
|
-
|
|
18
|
+
unregisterFocusable.current?.();
|
|
19
|
+
unregisterFocusable.current = registerFocusable(props.id, {
|
|
18
20
|
focus: input.focus,
|
|
19
21
|
...isInput && {
|
|
20
22
|
focusAndSelect() {
|
|
@@ -30,12 +32,10 @@ function focusableInputHOC(Component) {
|
|
|
30
32
|
);
|
|
31
33
|
const combinedRefs = composeRefs(ref, inputRef);
|
|
32
34
|
useEffect(() => {
|
|
33
|
-
if (!props.id)
|
|
34
|
-
return;
|
|
35
35
|
return () => {
|
|
36
|
-
unregisterFocusable(
|
|
36
|
+
unregisterFocusable.current?.();
|
|
37
37
|
};
|
|
38
|
-
}, [
|
|
38
|
+
}, []);
|
|
39
39
|
const onChangeText = useEvent((value) => {
|
|
40
40
|
inputValue.current = value;
|
|
41
41
|
props.onChangeText?.(value);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/focusableInputHOC.tsx"],
|
|
4
|
-
"sourcesContent": ["import { composeRefs } from '@tamagui/compose-refs'\nimport { TamaguiComponent, isTamaguiComponent, useEvent } from '@tamagui/core'\nimport { forwardRef, useCallback, useEffect, useRef } from 'react'\n\nimport { registerFocusable
|
|
5
|
-
"mappings": "AAAA,SAAS,mBAAmB;AAC5B,SAA2B,oBAAoB,gBAAgB;AAC/D,SAAS,YAAY,aAAa,WAAW,cAAc;AAE3D,SAAS,
|
|
4
|
+
"sourcesContent": ["import { composeRefs } from '@tamagui/compose-refs'\nimport { TamaguiComponent, isTamaguiComponent, useEvent } from '@tamagui/core'\nimport { forwardRef, useCallback, useEffect, useRef } from 'react'\n\nimport { registerFocusable } from './registerFocusable'\n\nexport function focusableInputHOC<A extends TamaguiComponent>(Component: A): A {\n const component = Component.extractable(\n forwardRef(\n (\n props: {\n id?: string\n onChangeText?: (val: string) => void\n value?: string\n defaultValue?: string\n },\n ref\n ) => {\n const isInput = isTamaguiComponent(Component) && Component.staticConfig.isInput\n const inputValue = useRef(props.value || props.defaultValue || '')\n const unregisterFocusable = useRef<() => void | undefined>()\n\n const inputRef = useCallback(\n (input) => {\n if (!props.id) return\n if (!input) return\n unregisterFocusable.current?.()\n unregisterFocusable.current = registerFocusable(props.id, {\n focus: input.focus,\n\n ...(isInput && {\n // react-native doesn't support programmatic .select()\n focusAndSelect() {\n input.focus()\n if (input.setSelection && typeof inputValue.current === 'string') {\n input.setSelection(0, inputValue.current.length)\n }\n },\n }),\n })\n },\n [isInput, props.id]\n )\n\n const combinedRefs = composeRefs(ref, inputRef)\n\n useEffect(() => {\n return () => {\n unregisterFocusable.current?.()\n }\n }, [])\n\n const onChangeText = useEvent((value) => {\n inputValue.current = value\n props.onChangeText?.(value)\n })\n\n const finalProps = isInput\n ? {\n ...props,\n onChangeText,\n }\n : props\n\n // @ts-expect-error\n return <Component ref={combinedRefs} {...finalProps} />\n }\n )\n ) as any\n\n return component\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,mBAAmB;AAC5B,SAA2B,oBAAoB,gBAAgB;AAC/D,SAAS,YAAY,aAAa,WAAW,cAAc;AAE3D,SAAS,yBAAyB;AAE3B,SAAS,kBAA8C,WAAiB;AAC7E,QAAM,YAAY,UAAU;AAAA,IAC1B;AAAA,MACE,CACE,OAMA,QACG;AACH,cAAM,UAAU,mBAAmB,SAAS,KAAK,UAAU,aAAa;AACxE,cAAM,aAAa,OAAO,MAAM,SAAS,MAAM,gBAAgB,EAAE;AACjE,cAAM,sBAAsB,OAA+B;AAE3D,cAAM,WAAW;AAAA,UACf,CAAC,UAAU;AACT,gBAAI,CAAC,MAAM;AAAI;AACf,gBAAI,CAAC;AAAO;AACZ,gCAAoB,UAAU;AAC9B,gCAAoB,UAAU,kBAAkB,MAAM,IAAI;AAAA,cACxD,OAAO,MAAM;AAAA,cAEb,GAAI,WAAW;AAAA,gBAEb,iBAAiB;AACf,wBAAM,MAAM;AACZ,sBAAI,MAAM,gBAAgB,OAAO,WAAW,YAAY,UAAU;AAChE,0BAAM,aAAa,GAAG,WAAW,QAAQ,MAAM;AAAA,kBACjD;AAAA,gBACF;AAAA,cACF;AAAA,YACF,CAAC;AAAA,UACH;AAAA,UACA,CAAC,SAAS,MAAM,EAAE;AAAA,QACpB;AAEA,cAAM,eAAe,YAAY,KAAK,QAAQ;AAE9C,kBAAU,MAAM;AACd,iBAAO,MAAM;AACX,gCAAoB,UAAU;AAAA,UAChC;AAAA,QACF,GAAG,CAAC,CAAC;AAEL,cAAM,eAAe,SAAS,CAAC,UAAU;AACvC,qBAAW,UAAU;AACrB,gBAAM,eAAe,KAAK;AAAA,QAC5B,CAAC;AAED,cAAM,aAAa,UACf;AAAA,UACE,GAAG;AAAA,UACH;AAAA,QACF,IACA;AAGJ,eAAO,CAAC,UAAU,KAAK,kBAAkB,YAAY;AAAA,MACvD;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/registerFocusable.ts"],
|
|
4
|
-
"sourcesContent": ["import { Focusable } from './focusable'\n\nexport const registerFocusable = (id: string, input: Focusable) => {\n // noop focus is handed natively\n}\n\nexport const unregisterFocusable = (id: string) => {\n // noop focus is handed natively\n}\n\nexport const focusFocusable = (id: string) => {\n // noop focus is handed natively\n}\n"],
|
|
5
|
-
"mappings": "AAEO,MAAM,oBAAoB,CAAC,IAAY,UAAqB;
|
|
4
|
+
"sourcesContent": ["import { Focusable } from './focusable'\n\nexport const registerFocusable = (id: string, input: Focusable) => () => {\n // noop focus is handed natively\n}\n\nexport const unregisterFocusable = (id: string) => {\n // noop focus is handed natively\n}\n\nexport const focusFocusable = (id: string) => {\n // noop focus is handed natively\n}\n"],
|
|
5
|
+
"mappings": "AAEO,MAAM,oBAAoB,CAAC,IAAY,UAAqB,MAAM;AAEzE;AAEO,MAAM,sBAAsB,CAAC,OAAe;AAEnD;AAEO,MAAM,iBAAiB,CAAC,OAAe;AAE9C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/focusable",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"source": "src/index.ts",
|
|
6
6
|
"types": "./types/index.d.ts",
|
|
@@ -22,15 +22,15 @@
|
|
|
22
22
|
"clean:build": "tamagui-build clean:build"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@tamagui/compose-refs": "^1.0.
|
|
26
|
-
"@tamagui/core": "^1.0.
|
|
25
|
+
"@tamagui/compose-refs": "^1.0.2",
|
|
26
|
+
"@tamagui/core": "^1.0.2"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"react": "*",
|
|
30
30
|
"react-dom": "*"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
|
-
"@tamagui/build": "^1.0.
|
|
33
|
+
"@tamagui/build": "^1.0.2",
|
|
34
34
|
"react": "^18.2.0",
|
|
35
35
|
"react-dom": "^18.2.0"
|
|
36
36
|
},
|
|
@@ -2,7 +2,7 @@ import { composeRefs } from '@tamagui/compose-refs'
|
|
|
2
2
|
import { TamaguiComponent, isTamaguiComponent, useEvent } from '@tamagui/core'
|
|
3
3
|
import { forwardRef, useCallback, useEffect, useRef } from 'react'
|
|
4
4
|
|
|
5
|
-
import { registerFocusable
|
|
5
|
+
import { registerFocusable } from './registerFocusable'
|
|
6
6
|
|
|
7
7
|
export function focusableInputHOC<A extends TamaguiComponent>(Component: A): A {
|
|
8
8
|
const component = Component.extractable(
|
|
@@ -14,17 +14,18 @@ export function focusableInputHOC<A extends TamaguiComponent>(Component: A): A {
|
|
|
14
14
|
value?: string
|
|
15
15
|
defaultValue?: string
|
|
16
16
|
},
|
|
17
|
-
ref
|
|
17
|
+
ref
|
|
18
18
|
) => {
|
|
19
|
-
const isInput =
|
|
20
|
-
isTamaguiComponent(Component) && Component.staticConfig.isInput
|
|
19
|
+
const isInput = isTamaguiComponent(Component) && Component.staticConfig.isInput
|
|
21
20
|
const inputValue = useRef(props.value || props.defaultValue || '')
|
|
21
|
+
const unregisterFocusable = useRef<() => void | undefined>()
|
|
22
22
|
|
|
23
23
|
const inputRef = useCallback(
|
|
24
24
|
(input) => {
|
|
25
25
|
if (!props.id) return
|
|
26
26
|
if (!input) return
|
|
27
|
-
|
|
27
|
+
unregisterFocusable.current?.()
|
|
28
|
+
unregisterFocusable.current = registerFocusable(props.id, {
|
|
28
29
|
focus: input.focus,
|
|
29
30
|
|
|
30
31
|
...(isInput && {
|
|
@@ -38,17 +39,16 @@ export function focusableInputHOC<A extends TamaguiComponent>(Component: A): A {
|
|
|
38
39
|
}),
|
|
39
40
|
})
|
|
40
41
|
},
|
|
41
|
-
[isInput, props.id]
|
|
42
|
+
[isInput, props.id]
|
|
42
43
|
)
|
|
43
44
|
|
|
44
45
|
const combinedRefs = composeRefs(ref, inputRef)
|
|
45
46
|
|
|
46
47
|
useEffect(() => {
|
|
47
|
-
if (!props.id) return
|
|
48
48
|
return () => {
|
|
49
|
-
unregisterFocusable(
|
|
49
|
+
unregisterFocusable.current?.()
|
|
50
50
|
}
|
|
51
|
-
}, [
|
|
51
|
+
}, [])
|
|
52
52
|
|
|
53
53
|
const onChangeText = useEvent((value) => {
|
|
54
54
|
inputValue.current = value
|
|
@@ -64,8 +64,8 @@ export function focusableInputHOC<A extends TamaguiComponent>(Component: A): A {
|
|
|
64
64
|
|
|
65
65
|
// @ts-expect-error
|
|
66
66
|
return <Component ref={combinedRefs} {...finalProps} />
|
|
67
|
-
}
|
|
68
|
-
)
|
|
67
|
+
}
|
|
68
|
+
)
|
|
69
69
|
) as any
|
|
70
70
|
|
|
71
71
|
return component
|
package/src/registerFocusable.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Focusable } from './focusable';
|
|
2
|
-
export declare const registerFocusable: (id: string, input: Focusable) => void;
|
|
2
|
+
export declare const registerFocusable: (id: string, input: Focusable) => () => void;
|
|
3
3
|
export declare const unregisterFocusable: (id: string) => void;
|
|
4
4
|
export declare const focusFocusable: (id: string) => void;
|
|
5
5
|
//# sourceMappingURL=registerFocusable.d.ts.map
|