@hzblj/kara-components 0.27.0 → 0.27.1
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/CHANGELOG.md +11 -0
- package/lib/module/molecules/navigation-bar/navigation-bar.android.js +2 -5
- package/lib/module/molecules/navigation-bar/navigation-bar.android.js.map +1 -1
- package/lib/typescript/molecules/navigation-bar/bar-search-field.d.ts +1 -1
- package/package.json +4 -4
- package/src/molecules/navigation-bar/bar-search-field.tsx +1 -1
- package/src/molecules/navigation-bar/navigation-bar.android.tsx +2 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
# @hzblj/kara-components
|
|
2
2
|
|
|
3
|
+
## 0.27.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#93](https://github.com/hzblj/kara-ui/pull/93) [`2ca91cf`](https://github.com/hzblj/kara-ui/commit/2ca91cf797ebf8471ca027131ec9362be516c1d5) Thanks [@hzblj](https://github.com/hzblj)! - Android integrated search: the bar's search closes on its first Cancel (the field's focus event now carries `hasText`, since it reached JS a frame before the emptied text), the hidden `TopAppBar` under the open search no longer takes taps or TalkBack focus at the field's edges, and `autoFocus` shows the keyboard only once the field really has focus.
|
|
8
|
+
|
|
9
|
+
- Updated dependencies [[`2ca91cf`](https://github.com/hzblj/kara-ui/commit/2ca91cf797ebf8471ca027131ec9362be516c1d5), [`4b04a5c`](https://github.com/hzblj/kara-ui/commit/4b04a5c1ed207a6a4a809f4d1e63abafb71aa6d5)]:
|
|
10
|
+
- @hzblj/kara-native@0.27.1
|
|
11
|
+
- @hzblj/kara-theme@0.27.1
|
|
12
|
+
- @hzblj/kara-sx@0.27.1
|
|
13
|
+
|
|
3
14
|
## 0.27.0
|
|
4
15
|
|
|
5
16
|
### Minor Changes
|
|
@@ -53,7 +53,6 @@ export const NavigationBar = ({
|
|
|
53
53
|
const font = theme.typography.headline;
|
|
54
54
|
const color = theme.color(inverted ? 'content.on.accent' : 'content.primary');
|
|
55
55
|
const fieldRef = useRef(null);
|
|
56
|
-
const query = useRef('');
|
|
57
56
|
const echo = useRef(null);
|
|
58
57
|
const [searchActive, setSearchActive] = useState(false);
|
|
59
58
|
const integrated = search?.placement === 'integratedButton';
|
|
@@ -75,16 +74,15 @@ export const NavigationBar = ({
|
|
|
75
74
|
return searchItem && buttonPlacement === 'trailing' ? [searchItem, ...items] : items;
|
|
76
75
|
}, [buttonPlacement, searchItem, trailingItems]);
|
|
77
76
|
const handleChangeText = useCallback(text => {
|
|
78
|
-
query.current = text;
|
|
79
77
|
if (echo.current === text) {
|
|
80
78
|
echo.current = null;
|
|
81
79
|
return;
|
|
82
80
|
}
|
|
83
81
|
onChangeText?.(text);
|
|
84
82
|
}, [onChangeText]);
|
|
85
|
-
const handleFocusChange = useCallback(focused => {
|
|
83
|
+
const handleFocusChange = useCallback((focused, hasText) => {
|
|
86
84
|
onFocusChange?.(focused);
|
|
87
|
-
if (!focused &&
|
|
85
|
+
if (!focused && !hasText) {
|
|
88
86
|
setSearchActive(false);
|
|
89
87
|
}
|
|
90
88
|
}, [onFocusChange]);
|
|
@@ -96,7 +94,6 @@ export const NavigationBar = ({
|
|
|
96
94
|
},
|
|
97
95
|
setText: text => {
|
|
98
96
|
echo.current = text;
|
|
99
|
-
query.current = text;
|
|
100
97
|
fieldRef.current?.setQuery(text).catch(ignoreDetachedView);
|
|
101
98
|
}
|
|
102
99
|
}), []);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["iconResourceName","GLYPHS","TopAppBar","useAppTheme","useCallback","useImperativeHandle","useMemo","useRef","useState","Island","BarSearchField","BarSearchRow","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","BAR_HEIGHT","DEFAULT_LABELS","back","close","search","NO_ITEMS","ignoreDetachedView","undefined","toNativeItem","onPress","testID","item","type","iconName","icon","label","NavigationBar","inverted","leadingItems","title","titleAlignment","titleVisible","trailingItems","theme","font","typography","headline","color","fieldRef","
|
|
1
|
+
{"version":3,"names":["iconResourceName","GLYPHS","TopAppBar","useAppTheme","useCallback","useImperativeHandle","useMemo","useRef","useState","Island","BarSearchField","BarSearchRow","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","BAR_HEIGHT","DEFAULT_LABELS","back","close","search","NO_ITEMS","ignoreDetachedView","undefined","toNativeItem","onPress","testID","item","type","iconName","icon","label","NavigationBar","inverted","leadingItems","title","titleAlignment","titleVisible","trailingItems","theme","font","typography","headline","color","fieldRef","echo","searchActive","setSearchActive","integrated","placement","buttonPlacement","onChangeText","onFocusChange","searchItem","buttonIcon","android","buttonLabel","nativeLeadingItems","items","map","nativeTrailingItems","handleChangeText","text","current","handleFocusChange","focused","hasText","ref","clear","clearQuery","catch","blurField","setText","setQuery","field","autoFocus","cancelLabel","clearIcon","placeholder","voice","children","h","matchContents","w","fontFamily","fontSize","itemColor","titleColor","Search"],"sourceRoot":"../../../../src","sources":["molecules/navigation-bar/navigation-bar.android.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -11,7 +11,7 @@ export type BarSearchFieldProps = {
|
|
|
11
11
|
cancelLabel?: string;
|
|
12
12
|
clearIcon?: IconName;
|
|
13
13
|
onChangeText: (text: string) => void;
|
|
14
|
-
onFocusChange?: (focused: boolean) => void;
|
|
14
|
+
onFocusChange?: (focused: boolean, hasText: boolean) => void;
|
|
15
15
|
placeholder: string;
|
|
16
16
|
ref?: Ref<SearchFieldRef>;
|
|
17
17
|
testID?: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hzblj/kara-components",
|
|
3
|
-
"version": "0.27.
|
|
3
|
+
"version": "0.27.1",
|
|
4
4
|
"description": "The atoms, molecules, organisms and templates of @hzblj/kara-ui — real SwiftUI and Jetpack Compose views through @expo/ui.",
|
|
5
5
|
"author": "Jan Blazej",
|
|
6
6
|
"license": "MIT",
|
|
@@ -66,9 +66,9 @@
|
|
|
66
66
|
"dependencies": {
|
|
67
67
|
"@hzblj/expo-native-icons": "^0.2.0",
|
|
68
68
|
"@hzblj/expo-rich-haptics": "^0.1.0",
|
|
69
|
-
"@hzblj/kara-native": "^0.27.
|
|
70
|
-
"@hzblj/kara-sx": "^0.27.
|
|
71
|
-
"@hzblj/kara-theme": "^0.27.
|
|
69
|
+
"@hzblj/kara-native": "^0.27.1",
|
|
70
|
+
"@hzblj/kara-sx": "^0.27.1",
|
|
71
|
+
"@hzblj/kara-theme": "^0.27.1",
|
|
72
72
|
"sf-symbols-typescript": "^2.2.0"
|
|
73
73
|
},
|
|
74
74
|
"peerDependencies": {
|
|
@@ -25,7 +25,7 @@ export type BarSearchFieldProps = {
|
|
|
25
25
|
cancelLabel?: string
|
|
26
26
|
clearIcon?: IconName
|
|
27
27
|
onChangeText: (text: string) => void
|
|
28
|
-
onFocusChange?: (focused: boolean) => void
|
|
28
|
+
onFocusChange?: (focused: boolean, hasText: boolean) => void
|
|
29
29
|
placeholder: string
|
|
30
30
|
ref?: Ref<SearchFieldRef>
|
|
31
31
|
testID?: string
|
|
@@ -42,7 +42,6 @@ export const NavigationBar: NavigationBarComponent = ({
|
|
|
42
42
|
const color = theme.color(inverted ? 'content.on.accent' : 'content.primary')
|
|
43
43
|
|
|
44
44
|
const fieldRef = useRef<SearchFieldRef>(null)
|
|
45
|
-
const query = useRef('')
|
|
46
45
|
const echo = useRef<string | null>(null)
|
|
47
46
|
const [searchActive, setSearchActive] = useState(false)
|
|
48
47
|
|
|
@@ -76,8 +75,6 @@ export const NavigationBar: NavigationBarComponent = ({
|
|
|
76
75
|
|
|
77
76
|
const handleChangeText = useCallback(
|
|
78
77
|
(text: string) => {
|
|
79
|
-
query.current = text
|
|
80
|
-
|
|
81
78
|
if (echo.current === text) {
|
|
82
79
|
echo.current = null
|
|
83
80
|
return
|
|
@@ -89,10 +86,10 @@ export const NavigationBar: NavigationBarComponent = ({
|
|
|
89
86
|
)
|
|
90
87
|
|
|
91
88
|
const handleFocusChange = useCallback(
|
|
92
|
-
(focused: boolean) => {
|
|
89
|
+
(focused: boolean, hasText: boolean) => {
|
|
93
90
|
onFocusChange?.(focused)
|
|
94
91
|
|
|
95
|
-
if (!focused &&
|
|
92
|
+
if (!focused && !hasText) {
|
|
96
93
|
setSearchActive(false)
|
|
97
94
|
}
|
|
98
95
|
},
|
|
@@ -109,7 +106,6 @@ export const NavigationBar: NavigationBarComponent = ({
|
|
|
109
106
|
},
|
|
110
107
|
setText: (text: string) => {
|
|
111
108
|
echo.current = text
|
|
112
|
-
query.current = text
|
|
113
109
|
fieldRef.current?.setQuery(text).catch(ignoreDetachedView)
|
|
114
110
|
},
|
|
115
111
|
}),
|