react-native-ui-lib 7.37.0-snapshot.6102 → 7.37.0-snapshot.6104
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/package.json +1 -1
- package/src/components/hint/Hint.driver.new.d.ts +1 -1
- package/src/components/view/View.driver.new.d.ts +1 -1
- package/src/components/view/View.driver.new.js +3 -2
- package/src/incubator/expandableOverlay/index.d.ts +0 -1
- package/src/incubator/expandableOverlay/index.js +5 -17
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ComponentProps } from '../../testkit/new/Component.driver';
|
|
2
2
|
export declare const HintDriver: (props: ComponentProps) => {
|
|
3
3
|
getHintBubble: () => {
|
|
4
|
-
getStyle: () => any;
|
|
4
|
+
getStyle: (flatten?: boolean) => any;
|
|
5
5
|
getElement: () => import("react-test-renderer").ReactTestInstance;
|
|
6
6
|
queryElement: () => import("react-test-renderer").ReactTestInstance | undefined;
|
|
7
7
|
exists: () => boolean;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ComponentProps } from '../../testkit/new/Component.driver';
|
|
2
2
|
export declare const ViewDriver: (props: ComponentProps) => {
|
|
3
|
-
getStyle: () => any;
|
|
3
|
+
getStyle: (flatten?: boolean) => any;
|
|
4
4
|
getElement: () => import("react-test-renderer").ReactTestInstance;
|
|
5
5
|
queryElement: () => import("react-test-renderer").ReactTestInstance | undefined;
|
|
6
6
|
exists: () => boolean;
|
|
@@ -2,8 +2,9 @@ import { StyleSheet } from 'react-native';
|
|
|
2
2
|
import { useComponentDriver } from "../../testkit/new/Component.driver";
|
|
3
3
|
export const ViewDriver = props => {
|
|
4
4
|
const driver = useComponentDriver(props);
|
|
5
|
-
const getStyle = () => {
|
|
6
|
-
|
|
5
|
+
const getStyle = (flatten = false) => {
|
|
6
|
+
const style = driver.getElement().props.style;
|
|
7
|
+
return flatten ? StyleSheet.flatten(style) : style;
|
|
7
8
|
};
|
|
8
9
|
return {
|
|
9
10
|
...driver,
|
|
@@ -6,7 +6,6 @@ export interface ExpandableOverlayMethods {
|
|
|
6
6
|
openExpandable: () => void;
|
|
7
7
|
closeExpandable: () => void;
|
|
8
8
|
toggleExpandable: () => void;
|
|
9
|
-
focusAccessibility: () => void;
|
|
10
9
|
}
|
|
11
10
|
export interface RenderCustomOverlayProps extends ExpandableOverlayMethods {
|
|
12
11
|
visible: boolean;
|
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
import React, { useCallback, useState, forwardRef, useImperativeHandle
|
|
1
|
+
import React, { useCallback, useState, forwardRef, useImperativeHandle } from 'react';
|
|
2
2
|
import TouchableOpacity from "../../components/touchableOpacity";
|
|
3
3
|
import View from "../../components/view";
|
|
4
4
|
import Modal from "../../components/modal";
|
|
5
5
|
import DialogOld from "../../components/dialog";
|
|
6
6
|
import DialogNew from "../dialog";
|
|
7
7
|
import { Colors } from "../../style";
|
|
8
|
-
import { AccessibilityInfo, findNodeHandle } from 'react-native';
|
|
9
8
|
const ExpandableOverlay = (props, ref) => {
|
|
10
9
|
const {
|
|
11
10
|
children,
|
|
@@ -24,29 +23,19 @@ const ExpandableOverlay = (props, ref) => {
|
|
|
24
23
|
...others
|
|
25
24
|
} = props;
|
|
26
25
|
const [visible, setExpandableVisible] = useState(false);
|
|
27
|
-
const containerRef = useRef(null);
|
|
28
|
-
const focusAccessibility = useCallback(() => {
|
|
29
|
-
const reactTag = findNodeHandle(containerRef.current);
|
|
30
|
-
console.log(`Nitzan - focs reac`, reactTag);
|
|
31
|
-
if (reactTag) {
|
|
32
|
-
AccessibilityInfo.setAccessibilityFocus(reactTag);
|
|
33
|
-
}
|
|
34
|
-
}, [containerRef]);
|
|
35
26
|
const openExpandable = useCallback(() => {
|
|
36
27
|
setExpandableVisible(true);
|
|
37
28
|
onPress?.(props);
|
|
38
29
|
}, [onPress, customValue]);
|
|
39
30
|
const closeExpandable = useCallback(() => {
|
|
40
31
|
setExpandableVisible(false);
|
|
41
|
-
focusAccessibility();
|
|
42
32
|
useDialog ? dialogProps?.onDismiss?.() : modalProps?.onDismiss?.();
|
|
43
|
-
}, [useDialog, dialogProps?.onDismiss, modalProps?.onDismiss
|
|
33
|
+
}, [useDialog, dialogProps?.onDismiss, modalProps?.onDismiss]);
|
|
44
34
|
const toggleExpandable = useCallback(() => visible ? closeExpandable() : openExpandable(), [visible, openExpandable, closeExpandable]);
|
|
45
35
|
useImperativeHandle(ref, () => ({
|
|
46
36
|
openExpandable,
|
|
47
37
|
closeExpandable,
|
|
48
|
-
toggleExpandable
|
|
49
|
-
focusAccessibility
|
|
38
|
+
toggleExpandable
|
|
50
39
|
}));
|
|
51
40
|
const renderModal = () => {
|
|
52
41
|
return <Modal testID={`${testID}.overlay`} overlayBackgroundColor={Colors.$backgroundDefault} {...modalProps} visible={visible} onDismiss={closeExpandable} onRequestClose={closeExpandable} onBackgroundPress={closeExpandable}>
|
|
@@ -66,14 +55,13 @@ const ExpandableOverlay = (props, ref) => {
|
|
|
66
55
|
visible,
|
|
67
56
|
openExpandable,
|
|
68
57
|
closeExpandable,
|
|
69
|
-
toggleExpandable
|
|
70
|
-
focusAccessibility
|
|
58
|
+
toggleExpandable
|
|
71
59
|
});
|
|
72
60
|
} else {
|
|
73
61
|
return useDialog ? renderDialog() : renderModal();
|
|
74
62
|
}
|
|
75
63
|
};
|
|
76
|
-
return <TouchableOpacity
|
|
64
|
+
return <TouchableOpacity {...others} onPress={openExpandable} disabled={disabled} testID={testID}>
|
|
77
65
|
<View pointerEvents="none">{children}</View>
|
|
78
66
|
{renderOverlay()}
|
|
79
67
|
</TouchableOpacity>;
|