@tamagui/focusable 1.15.39 → 1.16.0
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 +43 -45
- package/dist/cjs/focusableInputHOC.js.map +1 -1
- package/dist/esm/focusableInputHOC.js +44 -46
- package/dist/esm/focusableInputHOC.js.map +1 -1
- package/dist/esm/focusableInputHOC.mjs +44 -46
- package/dist/esm/focusableInputHOC.mjs.map +1 -1
- package/dist/jsx/focusableInputHOC.js +42 -44
- package/dist/jsx/focusableInputHOC.js.map +1 -1
- package/dist/jsx/focusableInputHOC.mjs +42 -44
- package/dist/jsx/focusableInputHOC.mjs.map +1 -1
- package/package.json +4 -4
- package/src/focusableInputHOC.tsx +53 -55
- package/types/focusableInputHOC.d.ts.map +1 -1
|
@@ -27,54 +27,52 @@ var import_web = require("@tamagui/web");
|
|
|
27
27
|
var import_react = require("react");
|
|
28
28
|
var import_registerFocusable = require("./registerFocusable");
|
|
29
29
|
function focusableInputHOC(Component) {
|
|
30
|
-
const component = Component.
|
|
31
|
-
(
|
|
32
|
-
(
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
input.setSelection(0, inputValue.current.length);
|
|
52
|
-
}
|
|
30
|
+
const component = Component.styleable(
|
|
31
|
+
(props, ref) => {
|
|
32
|
+
const isInput = (0, import_web.isTamaguiComponent)(Component) && Component.staticConfig.isInput;
|
|
33
|
+
const inputValue = (0, import_react.useRef)(props.value || props.defaultValue || "");
|
|
34
|
+
const unregisterFocusable = (0, import_react.useRef)();
|
|
35
|
+
const inputRef = (0, import_react.useCallback)(
|
|
36
|
+
(input) => {
|
|
37
|
+
var _a;
|
|
38
|
+
if (!props.id)
|
|
39
|
+
return;
|
|
40
|
+
if (!input)
|
|
41
|
+
return;
|
|
42
|
+
(_a = unregisterFocusable.current) == null ? void 0 : _a.call(unregisterFocusable);
|
|
43
|
+
unregisterFocusable.current = (0, import_registerFocusable.registerFocusable)(props.id, {
|
|
44
|
+
focus: input.focus,
|
|
45
|
+
...isInput && {
|
|
46
|
+
// react-native doesn't support programmatic .select()
|
|
47
|
+
focusAndSelect() {
|
|
48
|
+
input.focus();
|
|
49
|
+
if (input.setSelection && typeof inputValue.current === "string") {
|
|
50
|
+
input.setSelection(0, inputValue.current.length);
|
|
53
51
|
}
|
|
54
52
|
}
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
(_a = unregisterFocusable.current) == null ? void 0 : _a.call(unregisterFocusable);
|
|
64
|
-
};
|
|
65
|
-
}, []);
|
|
66
|
-
const onChangeText = (0, import_web.useEvent)((value) => {
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
},
|
|
56
|
+
[isInput, props.id]
|
|
57
|
+
);
|
|
58
|
+
const combinedRefs = (0, import_compose_refs.composeRefs)(ref, inputRef);
|
|
59
|
+
(0, import_react.useEffect)(() => {
|
|
60
|
+
return () => {
|
|
67
61
|
var _a;
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
62
|
+
(_a = unregisterFocusable.current) == null ? void 0 : _a.call(unregisterFocusable);
|
|
63
|
+
};
|
|
64
|
+
}, []);
|
|
65
|
+
const onChangeText = (0, import_web.useEvent)((value) => {
|
|
66
|
+
var _a;
|
|
67
|
+
inputValue.current = value;
|
|
68
|
+
(_a = props.onChangeText) == null ? void 0 : _a.call(props, value);
|
|
69
|
+
});
|
|
70
|
+
const finalProps = isInput ? {
|
|
71
|
+
...props,
|
|
72
|
+
onChangeText
|
|
73
|
+
} : props;
|
|
74
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ref: combinedRefs, ...finalProps });
|
|
75
|
+
}
|
|
78
76
|
);
|
|
79
77
|
return component;
|
|
80
78
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/focusableInputHOC.tsx"],
|
|
4
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgEa;AAhEb,0BAA4B;AAC5B,iBAA+D;AAC/D,mBAA+C;AAE/C,+BAAkC;AAE3B,SAAS,kBAA8C,WAAiB;AAC7E,QAAM,YAAY,UAAU;AAAA,IAC1B,CACE,OAMA,QACG;AACH,YAAM,cAAU,+BAAmB,SAAS,KAAK,UAAU,aAAa;AACxE,YAAM,iBAAa,qBAAO,MAAM,SAAS,MAAM,gBAAgB,EAAE;AACjE,YAAM,0BAAsB,qBAA+B;AAE3D,YAAM,eAAW;AAAA,QACf,CAAC,UAAU;AAtBnB;AAuBU,cAAI,CAAC,MAAM;AAAI;AACf,cAAI,CAAC;AAAO;AACZ,oCAAoB,YAApB;AACA,8BAAoB,cAAU,4CAAkB,MAAM,IAAI;AAAA,YACxD,OAAO,MAAM;AAAA,YAEb,GAAI,WAAW;AAAA;AAAA,cAEb,iBAAiB;AACf,sBAAM,MAAM;AACZ,oBAAI,MAAM,gBAAgB,OAAO,WAAW,YAAY,UAAU;AAChE,wBAAM,aAAa,GAAG,WAAW,QAAQ,MAAM;AAAA,gBACjD;AAAA,cACF;AAAA,YACF;AAAA,UACF,CAAC;AAAA,QACH;AAAA,QACA,CAAC,SAAS,MAAM,EAAE;AAAA,MACpB;AAEA,YAAM,mBAAe,iCAAY,KAAK,QAAQ;AAE9C,kCAAU,MAAM;AACd,eAAO,MAAM;AA9CrB;AA+CU,oCAAoB,YAApB;AAAA,QACF;AAAA,MACF,GAAG,CAAC,CAAC;AAEL,YAAM,mBAAe,qBAAS,CAAC,UAAU;AAnD/C;AAoDQ,mBAAW,UAAU;AACrB,oBAAM,iBAAN,+BAAqB;AAAA,MACvB,CAAC;AAED,YAAM,aAAa,UACf;AAAA,QACE,GAAG;AAAA,QACH;AAAA,MACF,IACA;AAGJ,aAAO,4CAAC,aAAU,KAAK,cAAe,GAAG,YAAY;AAAA,IACvD;AAAA,EACF;AAEA,SAAO;AACT;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
|
@@ -1,57 +1,55 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { composeRefs } from "@tamagui/compose-refs";
|
|
3
3
|
import { isTamaguiComponent, useEvent } from "@tamagui/web";
|
|
4
|
-
import {
|
|
4
|
+
import { useCallback, useEffect, useRef } from "react";
|
|
5
5
|
import { registerFocusable } from "./registerFocusable";
|
|
6
6
|
function focusableInputHOC(Component) {
|
|
7
|
-
const component = Component.
|
|
8
|
-
|
|
9
|
-
(
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
input.setSelection(0, inputValue.current.length);
|
|
29
|
-
}
|
|
7
|
+
const component = Component.styleable(
|
|
8
|
+
(props, ref) => {
|
|
9
|
+
const isInput = isTamaguiComponent(Component) && Component.staticConfig.isInput;
|
|
10
|
+
const inputValue = useRef(props.value || props.defaultValue || "");
|
|
11
|
+
const unregisterFocusable = useRef();
|
|
12
|
+
const inputRef = useCallback(
|
|
13
|
+
(input) => {
|
|
14
|
+
var _a;
|
|
15
|
+
if (!props.id)
|
|
16
|
+
return;
|
|
17
|
+
if (!input)
|
|
18
|
+
return;
|
|
19
|
+
(_a = unregisterFocusable.current) == null ? void 0 : _a.call(unregisterFocusable);
|
|
20
|
+
unregisterFocusable.current = registerFocusable(props.id, {
|
|
21
|
+
focus: input.focus,
|
|
22
|
+
...isInput && {
|
|
23
|
+
// react-native doesn't support programmatic .select()
|
|
24
|
+
focusAndSelect() {
|
|
25
|
+
input.focus();
|
|
26
|
+
if (input.setSelection && typeof inputValue.current === "string") {
|
|
27
|
+
input.setSelection(0, inputValue.current.length);
|
|
30
28
|
}
|
|
31
29
|
}
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
(_a = unregisterFocusable.current) == null ? void 0 : _a.call(unregisterFocusable);
|
|
41
|
-
};
|
|
42
|
-
}, []);
|
|
43
|
-
const onChangeText = useEvent((value) => {
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
},
|
|
33
|
+
[isInput, props.id]
|
|
34
|
+
);
|
|
35
|
+
const combinedRefs = composeRefs(ref, inputRef);
|
|
36
|
+
useEffect(() => {
|
|
37
|
+
return () => {
|
|
44
38
|
var _a;
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
39
|
+
(_a = unregisterFocusable.current) == null ? void 0 : _a.call(unregisterFocusable);
|
|
40
|
+
};
|
|
41
|
+
}, []);
|
|
42
|
+
const onChangeText = useEvent((value) => {
|
|
43
|
+
var _a;
|
|
44
|
+
inputValue.current = value;
|
|
45
|
+
(_a = props.onChangeText) == null ? void 0 : _a.call(props, value);
|
|
46
|
+
});
|
|
47
|
+
const finalProps = isInput ? {
|
|
48
|
+
...props,
|
|
49
|
+
onChangeText
|
|
50
|
+
} : props;
|
|
51
|
+
return /* @__PURE__ */ jsx(Component, { ref: combinedRefs, ...finalProps });
|
|
52
|
+
}
|
|
55
53
|
);
|
|
56
54
|
return component;
|
|
57
55
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/focusableInputHOC.tsx"],
|
|
4
|
-
"mappings": "
|
|
4
|
+
"mappings": "AAgEa;AAhEb,SAAS,mBAAmB;AAC5B,SAA2B,oBAAoB,gBAAgB;AAC/D,SAAS,aAAa,WAAW,cAAc;AAE/C,SAAS,yBAAyB;AAE3B,SAAS,kBAA8C,WAAiB;AAC7E,QAAM,YAAY,UAAU;AAAA,IAC1B,CACE,OAMA,QACG;AACH,YAAM,UAAU,mBAAmB,SAAS,KAAK,UAAU,aAAa;AACxE,YAAM,aAAa,OAAO,MAAM,SAAS,MAAM,gBAAgB,EAAE;AACjE,YAAM,sBAAsB,OAA+B;AAE3D,YAAM,WAAW;AAAA,QACf,CAAC,UAAU;AAtBnB;AAuBU,cAAI,CAAC,MAAM;AAAI;AACf,cAAI,CAAC;AAAO;AACZ,oCAAoB,YAApB;AACA,8BAAoB,UAAU,kBAAkB,MAAM,IAAI;AAAA,YACxD,OAAO,MAAM;AAAA,YAEb,GAAI,WAAW;AAAA;AAAA,cAEb,iBAAiB;AACf,sBAAM,MAAM;AACZ,oBAAI,MAAM,gBAAgB,OAAO,WAAW,YAAY,UAAU;AAChE,wBAAM,aAAa,GAAG,WAAW,QAAQ,MAAM;AAAA,gBACjD;AAAA,cACF;AAAA,YACF;AAAA,UACF,CAAC;AAAA,QACH;AAAA,QACA,CAAC,SAAS,MAAM,EAAE;AAAA,MACpB;AAEA,YAAM,eAAe,YAAY,KAAK,QAAQ;AAE9C,gBAAU,MAAM;AACd,eAAO,MAAM;AA9CrB;AA+CU,oCAAoB,YAApB;AAAA,QACF;AAAA,MACF,GAAG,CAAC,CAAC;AAEL,YAAM,eAAe,SAAS,CAAC,UAAU;AAnD/C;AAoDQ,mBAAW,UAAU;AACrB,oBAAM,iBAAN,+BAAqB;AAAA,MACvB,CAAC;AAED,YAAM,aAAa,UACf;AAAA,QACE,GAAG;AAAA,QACH;AAAA,MACF,IACA;AAGJ,aAAO,oBAAC,aAAU,KAAK,cAAe,GAAG,YAAY;AAAA,IACvD;AAAA,EACF;AAEA,SAAO;AACT;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
|
@@ -1,57 +1,55 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { composeRefs } from "@tamagui/compose-refs";
|
|
3
3
|
import { isTamaguiComponent, useEvent } from "@tamagui/web";
|
|
4
|
-
import {
|
|
4
|
+
import { useCallback, useEffect, useRef } from "react";
|
|
5
5
|
import { registerFocusable } from "./registerFocusable";
|
|
6
6
|
function focusableInputHOC(Component) {
|
|
7
|
-
const component = Component.
|
|
8
|
-
|
|
9
|
-
(
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
input.setSelection(0, inputValue.current.length);
|
|
29
|
-
}
|
|
7
|
+
const component = Component.styleable(
|
|
8
|
+
(props, ref) => {
|
|
9
|
+
const isInput = isTamaguiComponent(Component) && Component.staticConfig.isInput;
|
|
10
|
+
const inputValue = useRef(props.value || props.defaultValue || "");
|
|
11
|
+
const unregisterFocusable = useRef();
|
|
12
|
+
const inputRef = useCallback(
|
|
13
|
+
(input) => {
|
|
14
|
+
var _a;
|
|
15
|
+
if (!props.id)
|
|
16
|
+
return;
|
|
17
|
+
if (!input)
|
|
18
|
+
return;
|
|
19
|
+
(_a = unregisterFocusable.current) == null ? void 0 : _a.call(unregisterFocusable);
|
|
20
|
+
unregisterFocusable.current = registerFocusable(props.id, {
|
|
21
|
+
focus: input.focus,
|
|
22
|
+
...isInput && {
|
|
23
|
+
// react-native doesn't support programmatic .select()
|
|
24
|
+
focusAndSelect() {
|
|
25
|
+
input.focus();
|
|
26
|
+
if (input.setSelection && typeof inputValue.current === "string") {
|
|
27
|
+
input.setSelection(0, inputValue.current.length);
|
|
30
28
|
}
|
|
31
29
|
}
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
(_a = unregisterFocusable.current) == null ? void 0 : _a.call(unregisterFocusable);
|
|
41
|
-
};
|
|
42
|
-
}, []);
|
|
43
|
-
const onChangeText = useEvent((value) => {
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
},
|
|
33
|
+
[isInput, props.id]
|
|
34
|
+
);
|
|
35
|
+
const combinedRefs = composeRefs(ref, inputRef);
|
|
36
|
+
useEffect(() => {
|
|
37
|
+
return () => {
|
|
44
38
|
var _a;
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
39
|
+
(_a = unregisterFocusable.current) == null ? void 0 : _a.call(unregisterFocusable);
|
|
40
|
+
};
|
|
41
|
+
}, []);
|
|
42
|
+
const onChangeText = useEvent((value) => {
|
|
43
|
+
var _a;
|
|
44
|
+
inputValue.current = value;
|
|
45
|
+
(_a = props.onChangeText) == null ? void 0 : _a.call(props, value);
|
|
46
|
+
});
|
|
47
|
+
const finalProps = isInput ? {
|
|
48
|
+
...props,
|
|
49
|
+
onChangeText
|
|
50
|
+
} : props;
|
|
51
|
+
return /* @__PURE__ */ jsx(Component, { ref: combinedRefs, ...finalProps });
|
|
52
|
+
}
|
|
55
53
|
);
|
|
56
54
|
return component;
|
|
57
55
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/focusableInputHOC.tsx"],
|
|
4
|
-
"mappings": "
|
|
4
|
+
"mappings": "AAgEa;AAhEb,SAAS,mBAAmB;AAC5B,SAA2B,oBAAoB,gBAAgB;AAC/D,SAAS,aAAa,WAAW,cAAc;AAE/C,SAAS,yBAAyB;AAE3B,SAAS,kBAA8C,WAAiB;AAC7E,QAAM,YAAY,UAAU;AAAA,IAC1B,CACE,OAMA,QACG;AACH,YAAM,UAAU,mBAAmB,SAAS,KAAK,UAAU,aAAa;AACxE,YAAM,aAAa,OAAO,MAAM,SAAS,MAAM,gBAAgB,EAAE;AACjE,YAAM,sBAAsB,OAA+B;AAE3D,YAAM,WAAW;AAAA,QACf,CAAC,UAAU;AAtBnB;AAuBU,cAAI,CAAC,MAAM;AAAI;AACf,cAAI,CAAC;AAAO;AACZ,oCAAoB,YAApB;AACA,8BAAoB,UAAU,kBAAkB,MAAM,IAAI;AAAA,YACxD,OAAO,MAAM;AAAA,YAEb,GAAI,WAAW;AAAA;AAAA,cAEb,iBAAiB;AACf,sBAAM,MAAM;AACZ,oBAAI,MAAM,gBAAgB,OAAO,WAAW,YAAY,UAAU;AAChE,wBAAM,aAAa,GAAG,WAAW,QAAQ,MAAM;AAAA,gBACjD;AAAA,cACF;AAAA,YACF;AAAA,UACF,CAAC;AAAA,QACH;AAAA,QACA,CAAC,SAAS,MAAM,EAAE;AAAA,MACpB;AAEA,YAAM,eAAe,YAAY,KAAK,QAAQ;AAE9C,gBAAU,MAAM;AACd,eAAO,MAAM;AA9CrB;AA+CU,oCAAoB,YAApB;AAAA,QACF;AAAA,MACF,GAAG,CAAC,CAAC;AAEL,YAAM,eAAe,SAAS,CAAC,UAAU;AAnD/C;AAoDQ,mBAAW,UAAU;AACrB,oBAAM,iBAAN,+BAAqB;AAAA,MACvB,CAAC;AAED,YAAM,aAAa,UACf;AAAA,QACE,GAAG;AAAA,QACH;AAAA,MACF,IACA;AAGJ,aAAO,oBAAC,aAAU,KAAK,cAAe,GAAG,YAAY;AAAA,IACvD;AAAA,EACF;AAEA,SAAO;AACT;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
|
@@ -1,53 +1,51 @@
|
|
|
1
1
|
import { composeRefs } from "@tamagui/compose-refs";
|
|
2
2
|
import { isTamaguiComponent, useEvent } from "@tamagui/web";
|
|
3
|
-
import {
|
|
3
|
+
import { useCallback, useEffect, useRef } from "react";
|
|
4
4
|
import { registerFocusable } from "./registerFocusable";
|
|
5
5
|
function focusableInputHOC(Component) {
|
|
6
|
-
const component = Component.
|
|
7
|
-
|
|
8
|
-
(
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
(
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
input.setSelection(0, inputValue.current.length);
|
|
27
|
-
}
|
|
6
|
+
const component = Component.styleable(
|
|
7
|
+
(props, ref) => {
|
|
8
|
+
const isInput = isTamaguiComponent(Component) && Component.staticConfig.isInput;
|
|
9
|
+
const inputValue = useRef(props.value || props.defaultValue || "");
|
|
10
|
+
const unregisterFocusable = useRef();
|
|
11
|
+
const inputRef = useCallback(
|
|
12
|
+
(input) => {
|
|
13
|
+
if (!props.id)
|
|
14
|
+
return;
|
|
15
|
+
if (!input)
|
|
16
|
+
return;
|
|
17
|
+
unregisterFocusable.current?.();
|
|
18
|
+
unregisterFocusable.current = registerFocusable(props.id, {
|
|
19
|
+
focus: input.focus,
|
|
20
|
+
...isInput && {
|
|
21
|
+
// react-native doesn't support programmatic .select()
|
|
22
|
+
focusAndSelect() {
|
|
23
|
+
input.focus();
|
|
24
|
+
if (input.setSelection && typeof inputValue.current === "string") {
|
|
25
|
+
input.setSelection(0, inputValue.current.length);
|
|
28
26
|
}
|
|
29
27
|
}
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
}
|
|
50
|
-
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
},
|
|
31
|
+
[isInput, props.id]
|
|
32
|
+
);
|
|
33
|
+
const combinedRefs = composeRefs(ref, inputRef);
|
|
34
|
+
useEffect(() => {
|
|
35
|
+
return () => {
|
|
36
|
+
unregisterFocusable.current?.();
|
|
37
|
+
};
|
|
38
|
+
}, []);
|
|
39
|
+
const onChangeText = useEvent((value) => {
|
|
40
|
+
inputValue.current = value;
|
|
41
|
+
props.onChangeText?.(value);
|
|
42
|
+
});
|
|
43
|
+
const finalProps = isInput ? {
|
|
44
|
+
...props,
|
|
45
|
+
onChangeText
|
|
46
|
+
} : props;
|
|
47
|
+
return <Component ref={combinedRefs} {...finalProps} />;
|
|
48
|
+
}
|
|
51
49
|
);
|
|
52
50
|
return component;
|
|
53
51
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/focusableInputHOC.tsx"],
|
|
4
|
-
"mappings": "AAAA,SAAS,mBAAmB;AAC5B,SAA2B,oBAAoB,gBAAgB;AAC/D,SAAS,
|
|
4
|
+
"mappings": "AAAA,SAAS,mBAAmB;AAC5B,SAA2B,oBAAoB,gBAAgB;AAC/D,SAAS,aAAa,WAAW,cAAc;AAE/C,SAAS,yBAAyB;AAE3B,SAAS,kBAA8C,WAAiB;AAC7E,QAAM,YAAY,UAAU;AAAA,IAC1B,CACE,OAMA,QACG;AACH,YAAM,UAAU,mBAAmB,SAAS,KAAK,UAAU,aAAa;AACxE,YAAM,aAAa,OAAO,MAAM,SAAS,MAAM,gBAAgB,EAAE;AACjE,YAAM,sBAAsB,OAA+B;AAE3D,YAAM,WAAW;AAAA,QACf,CAAC,UAAU;AACT,cAAI,CAAC,MAAM;AAAI;AACf,cAAI,CAAC;AAAO;AACZ,8BAAoB,UAAU;AAC9B,8BAAoB,UAAU,kBAAkB,MAAM,IAAI;AAAA,YACxD,OAAO,MAAM;AAAA,YAEb,GAAI,WAAW;AAAA;AAAA,cAEb,iBAAiB;AACf,sBAAM,MAAM;AACZ,oBAAI,MAAM,gBAAgB,OAAO,WAAW,YAAY,UAAU;AAChE,wBAAM,aAAa,GAAG,WAAW,QAAQ,MAAM;AAAA,gBACjD;AAAA,cACF;AAAA,YACF;AAAA,UACF,CAAC;AAAA,QACH;AAAA,QACA,CAAC,SAAS,MAAM,EAAE;AAAA,MACpB;AAEA,YAAM,eAAe,YAAY,KAAK,QAAQ;AAE9C,gBAAU,MAAM;AACd,eAAO,MAAM;AACX,8BAAoB,UAAU;AAAA,QAChC;AAAA,MACF,GAAG,CAAC,CAAC;AAEL,YAAM,eAAe,SAAS,CAAC,UAAU;AACvC,mBAAW,UAAU;AACrB,cAAM,eAAe,KAAK;AAAA,MAC5B,CAAC;AAED,YAAM,aAAa,UACf;AAAA,QACE,GAAG;AAAA,QACH;AAAA,MACF,IACA;AAGJ,aAAO,CAAC,UAAU,KAAK,kBAAkB,YAAY;AAAA,IACvD;AAAA,EACF;AAEA,SAAO;AACT;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
|
@@ -1,53 +1,51 @@
|
|
|
1
1
|
import { composeRefs } from "@tamagui/compose-refs";
|
|
2
2
|
import { isTamaguiComponent, useEvent } from "@tamagui/web";
|
|
3
|
-
import {
|
|
3
|
+
import { useCallback, useEffect, useRef } from "react";
|
|
4
4
|
import { registerFocusable } from "./registerFocusable";
|
|
5
5
|
function focusableInputHOC(Component) {
|
|
6
|
-
const component = Component.
|
|
7
|
-
|
|
8
|
-
(
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
(
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
input.setSelection(0, inputValue.current.length);
|
|
27
|
-
}
|
|
6
|
+
const component = Component.styleable(
|
|
7
|
+
(props, ref) => {
|
|
8
|
+
const isInput = isTamaguiComponent(Component) && Component.staticConfig.isInput;
|
|
9
|
+
const inputValue = useRef(props.value || props.defaultValue || "");
|
|
10
|
+
const unregisterFocusable = useRef();
|
|
11
|
+
const inputRef = useCallback(
|
|
12
|
+
(input) => {
|
|
13
|
+
if (!props.id)
|
|
14
|
+
return;
|
|
15
|
+
if (!input)
|
|
16
|
+
return;
|
|
17
|
+
unregisterFocusable.current?.();
|
|
18
|
+
unregisterFocusable.current = registerFocusable(props.id, {
|
|
19
|
+
focus: input.focus,
|
|
20
|
+
...isInput && {
|
|
21
|
+
// react-native doesn't support programmatic .select()
|
|
22
|
+
focusAndSelect() {
|
|
23
|
+
input.focus();
|
|
24
|
+
if (input.setSelection && typeof inputValue.current === "string") {
|
|
25
|
+
input.setSelection(0, inputValue.current.length);
|
|
28
26
|
}
|
|
29
27
|
}
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
}
|
|
50
|
-
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
},
|
|
31
|
+
[isInput, props.id]
|
|
32
|
+
);
|
|
33
|
+
const combinedRefs = composeRefs(ref, inputRef);
|
|
34
|
+
useEffect(() => {
|
|
35
|
+
return () => {
|
|
36
|
+
unregisterFocusable.current?.();
|
|
37
|
+
};
|
|
38
|
+
}, []);
|
|
39
|
+
const onChangeText = useEvent((value) => {
|
|
40
|
+
inputValue.current = value;
|
|
41
|
+
props.onChangeText?.(value);
|
|
42
|
+
});
|
|
43
|
+
const finalProps = isInput ? {
|
|
44
|
+
...props,
|
|
45
|
+
onChangeText
|
|
46
|
+
} : props;
|
|
47
|
+
return <Component ref={combinedRefs} {...finalProps} />;
|
|
48
|
+
}
|
|
51
49
|
);
|
|
52
50
|
return component;
|
|
53
51
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/focusableInputHOC.tsx"],
|
|
4
|
-
"mappings": "AAAA,SAAS,mBAAmB;AAC5B,SAA2B,oBAAoB,gBAAgB;AAC/D,SAAS,
|
|
4
|
+
"mappings": "AAAA,SAAS,mBAAmB;AAC5B,SAA2B,oBAAoB,gBAAgB;AAC/D,SAAS,aAAa,WAAW,cAAc;AAE/C,SAAS,yBAAyB;AAE3B,SAAS,kBAA8C,WAAiB;AAC7E,QAAM,YAAY,UAAU;AAAA,IAC1B,CACE,OAMA,QACG;AACH,YAAM,UAAU,mBAAmB,SAAS,KAAK,UAAU,aAAa;AACxE,YAAM,aAAa,OAAO,MAAM,SAAS,MAAM,gBAAgB,EAAE;AACjE,YAAM,sBAAsB,OAA+B;AAE3D,YAAM,WAAW;AAAA,QACf,CAAC,UAAU;AACT,cAAI,CAAC,MAAM;AAAI;AACf,cAAI,CAAC;AAAO;AACZ,8BAAoB,UAAU;AAC9B,8BAAoB,UAAU,kBAAkB,MAAM,IAAI;AAAA,YACxD,OAAO,MAAM;AAAA,YAEb,GAAI,WAAW;AAAA;AAAA,cAEb,iBAAiB;AACf,sBAAM,MAAM;AACZ,oBAAI,MAAM,gBAAgB,OAAO,WAAW,YAAY,UAAU;AAChE,wBAAM,aAAa,GAAG,WAAW,QAAQ,MAAM;AAAA,gBACjD;AAAA,cACF;AAAA,YACF;AAAA,UACF,CAAC;AAAA,QACH;AAAA,QACA,CAAC,SAAS,MAAM,EAAE;AAAA,MACpB;AAEA,YAAM,eAAe,YAAY,KAAK,QAAQ;AAE9C,gBAAU,MAAM;AACd,eAAO,MAAM;AACX,8BAAoB,UAAU;AAAA,QAChC;AAAA,MACF,GAAG,CAAC,CAAC;AAEL,YAAM,eAAe,SAAS,CAAC,UAAU;AACvC,mBAAW,UAAU;AACrB,cAAM,eAAe,KAAK;AAAA,MAC5B,CAAC;AAED,YAAM,aAAa,UACf;AAAA,QACE,GAAG;AAAA,QACH;AAAA,MACF,IACA;AAGJ,aAAO,CAAC,UAAU,KAAK,kBAAkB,YAAY;AAAA,IACvD;AAAA,EACF;AAEA,SAAO;AACT;",
|
|
5
5
|
"names": []
|
|
6
6
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/focusable",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.16.0",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"source": "src/index.ts",
|
|
6
6
|
"types": "./types/index.d.ts",
|
|
@@ -22,14 +22,14 @@
|
|
|
22
22
|
"clean:build": "tamagui-build clean:build"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@tamagui/compose-refs": "1.
|
|
26
|
-
"@tamagui/web": "1.
|
|
25
|
+
"@tamagui/compose-refs": "1.16.0",
|
|
26
|
+
"@tamagui/web": "1.16.0"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"react": "*"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
|
-
"@tamagui/build": "1.
|
|
32
|
+
"@tamagui/build": "1.16.0",
|
|
33
33
|
"react": "^18.2.0"
|
|
34
34
|
},
|
|
35
35
|
"publishConfig": {
|
|
@@ -1,71 +1,69 @@
|
|
|
1
1
|
import { composeRefs } from '@tamagui/compose-refs'
|
|
2
2
|
import { TamaguiComponent, isTamaguiComponent, useEvent } from '@tamagui/web'
|
|
3
|
-
import {
|
|
3
|
+
import { useCallback, useEffect, useRef } from 'react'
|
|
4
4
|
|
|
5
5
|
import { registerFocusable } from './registerFocusable'
|
|
6
6
|
|
|
7
7
|
export function focusableInputHOC<A extends TamaguiComponent>(Component: A): A {
|
|
8
|
-
const component = Component.
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
)
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
const unregisterFocusable = useRef<() => void | undefined>()
|
|
8
|
+
const component = Component.styleable(
|
|
9
|
+
(
|
|
10
|
+
props: {
|
|
11
|
+
id?: string
|
|
12
|
+
onChangeText?: (val: string) => void
|
|
13
|
+
value?: string
|
|
14
|
+
defaultValue?: string
|
|
15
|
+
},
|
|
16
|
+
ref
|
|
17
|
+
) => {
|
|
18
|
+
const isInput = isTamaguiComponent(Component) && Component.staticConfig.isInput
|
|
19
|
+
const inputValue = useRef(props.value || props.defaultValue || '')
|
|
20
|
+
const unregisterFocusable = useRef<() => void | undefined>()
|
|
22
21
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
22
|
+
const inputRef = useCallback(
|
|
23
|
+
(input) => {
|
|
24
|
+
if (!props.id) return
|
|
25
|
+
if (!input) return
|
|
26
|
+
unregisterFocusable.current?.()
|
|
27
|
+
unregisterFocusable.current = registerFocusable(props.id, {
|
|
28
|
+
focus: input.focus,
|
|
30
29
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
30
|
+
...(isInput && {
|
|
31
|
+
// react-native doesn't support programmatic .select()
|
|
32
|
+
focusAndSelect() {
|
|
33
|
+
input.focus()
|
|
34
|
+
if (input.setSelection && typeof inputValue.current === 'string') {
|
|
35
|
+
input.setSelection(0, inputValue.current.length)
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
}),
|
|
39
|
+
})
|
|
40
|
+
},
|
|
41
|
+
[isInput, props.id]
|
|
42
|
+
)
|
|
44
43
|
|
|
45
|
-
|
|
44
|
+
const combinedRefs = composeRefs(ref, inputRef)
|
|
46
45
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
46
|
+
useEffect(() => {
|
|
47
|
+
return () => {
|
|
48
|
+
unregisterFocusable.current?.()
|
|
49
|
+
}
|
|
50
|
+
}, [])
|
|
52
51
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
52
|
+
const onChangeText = useEvent((value) => {
|
|
53
|
+
inputValue.current = value
|
|
54
|
+
props.onChangeText?.(value)
|
|
55
|
+
})
|
|
57
56
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
57
|
+
const finalProps = isInput
|
|
58
|
+
? {
|
|
59
|
+
...props,
|
|
60
|
+
onChangeText,
|
|
61
|
+
}
|
|
62
|
+
: props
|
|
64
63
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
)
|
|
64
|
+
// @ts-expect-error
|
|
65
|
+
return <Component ref={combinedRefs} {...finalProps} />
|
|
66
|
+
}
|
|
69
67
|
) as any
|
|
70
68
|
|
|
71
69
|
return component
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focusableInputHOC.d.ts","sourceRoot":"","sources":["../src/focusableInputHOC.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAgC,MAAM,cAAc,CAAA;AAK7E,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,gBAAgB,EAAE,SAAS,EAAE,CAAC,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"focusableInputHOC.d.ts","sourceRoot":"","sources":["../src/focusableInputHOC.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAgC,MAAM,cAAc,CAAA;AAK7E,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,gBAAgB,EAAE,SAAS,EAAE,CAAC,GAAG,CAAC,CA+D7E"}
|