uilib-native 5.0.1 → 5.1.0-snapshot.7630
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 +4 -5
- package/components/DynamicFonts/FontDownloader.d.ts +0 -41
- package/components/DynamicFonts/FontDownloader.js +0 -140
- package/components/DynamicFonts/FontLoader.d.ts +0 -35
- package/components/DynamicFonts/FontLoader.js +0 -89
- package/components/DynamicFonts/NoPermissionsAcquirer.d.ts +0 -3
- package/components/DynamicFonts/NoPermissionsAcquirer.js +0 -5
- package/components/DynamicFonts/PermissionsAcquirer.android.d.ts +0 -13
- package/components/DynamicFonts/PermissionsAcquirer.android.js +0 -42
- package/components/DynamicFonts/PermissionsAcquirer.ios.d.ts +0 -2
- package/components/DynamicFonts/PermissionsAcquirer.ios.js +0 -2
- package/components/DynamicFonts/PermissionsAcquirer.web.d.ts +0 -2
- package/components/DynamicFonts/PermissionsAcquirer.web.js +0 -2
- package/components/DynamicFonts/RNFSPackage.d.ts +0 -2
- package/components/DynamicFonts/RNFSPackage.js +0 -5
- package/components/DynamicFonts/index.d.ts +0 -61
- package/components/DynamicFonts/index.js +0 -154
- package/components/HighlighterOverlayView/index.d.ts +0 -34
- package/components/HighlighterOverlayView/index.js +0 -49
- package/components/HighlighterOverlayView/index.web.d.ts +0 -34
- package/components/HighlighterOverlayView/index.web.js +0 -15
- package/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/CustomKeyboardView.android.d.ts +0 -10
- package/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/CustomKeyboardView.android.js +0 -51
- package/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/CustomKeyboardView.ios.d.ts +0 -19
- package/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/CustomKeyboardView.ios.js +0 -62
- package/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/CustomKeyboardViewBase.d.ts +0 -27
- package/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/CustomKeyboardViewBase.js +0 -67
- package/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/index.d.ts +0 -4
- package/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/index.js +0 -10
- package/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/index.web.d.ts +0 -3
- package/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/index.web.js +0 -6
- package/components/Keyboard/KeyboardAccessoryView/KeyboardRegistry/EventEmitterManager/index.d.ts +0 -10
- package/components/Keyboard/KeyboardAccessoryView/KeyboardRegistry/EventEmitterManager/index.js +0 -33
- package/components/Keyboard/KeyboardAccessoryView/KeyboardRegistry/index.d.ts +0 -71
- package/components/Keyboard/KeyboardAccessoryView/KeyboardRegistry/index.js +0 -135
- package/components/Keyboard/KeyboardAccessoryView/KeyboardUtils/index.d.ts +0 -26
- package/components/Keyboard/KeyboardAccessoryView/KeyboardUtils/index.js +0 -91
- package/components/Keyboard/KeyboardAccessoryView/TextInputKeyboardManager/TextInputKeyboardManager.android.d.ts +0 -4
- package/components/Keyboard/KeyboardAccessoryView/TextInputKeyboardManager/TextInputKeyboardManager.android.js +0 -9
- package/components/Keyboard/KeyboardAccessoryView/TextInputKeyboardManager/TextInputKeyboardManager.ios.d.ts +0 -10
- package/components/Keyboard/KeyboardAccessoryView/TextInputKeyboardManager/TextInputKeyboardManager.ios.js +0 -64
- package/components/Keyboard/KeyboardAccessoryView/TextInputKeyboardManager/index.d.ts +0 -4
- package/components/Keyboard/KeyboardAccessoryView/TextInputKeyboardManager/index.js +0 -6
- package/components/Keyboard/KeyboardAccessoryView/index.d.ts +0 -84
- package/components/Keyboard/KeyboardAccessoryView/index.js +0 -161
- package/components/Keyboard/KeyboardAwareInsetsView/index.d.ts +0 -16
- package/components/Keyboard/KeyboardAwareInsetsView/index.js +0 -31
- package/components/Keyboard/KeyboardTrackingView/KeyboardTrackingView.android.d.ts +0 -12
- package/components/Keyboard/KeyboardTrackingView/KeyboardTrackingView.android.js +0 -17
- package/components/Keyboard/KeyboardTrackingView/KeyboardTrackingView.ios.d.ts +0 -21
- package/components/Keyboard/KeyboardTrackingView/KeyboardTrackingView.ios.js +0 -35
- package/components/Keyboard/KeyboardTrackingView/index.d.ts +0 -81
- package/components/Keyboard/KeyboardTrackingView/index.js +0 -22
- package/components/Keyboard/KeyboardTrackingView/index.web.d.ts +0 -6
- package/components/Keyboard/KeyboardTrackingView/index.web.js +0 -7
- package/components/Keyboard/index.d.ts +0 -40
- package/components/Keyboard/index.js +0 -13
- package/components/SafeArea/SafeAreaInsetsManager.d.ts +0 -34
- package/components/SafeArea/SafeAreaInsetsManager.js +0 -128
- package/components/SafeArea/SafeAreaSpacerView.d.ts +0 -10
- package/components/SafeArea/SafeAreaSpacerView.js +0 -68
- package/components/SafeArea/SafeAreaSpacerView.web.d.ts +0 -10
- package/components/SafeArea/SafeAreaSpacerView.web.js +0 -9
- package/components/SafeArea/index.d.ts +0 -10
- package/components/SafeArea/index.js +0 -11
- package/components/index.d.ts +0 -6
- package/components/index.js +0 -6
- package/specs/HighlighterViewNativeComponent.d.ts +0 -61
- package/specs/KeyboardTrackingViewNativeComponent.d.ts +0 -58
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
import { useCallback, useEffect, useState } from 'react';
|
|
2
|
-
import { Keyboard, Platform } from 'react-native';
|
|
3
|
-
import TextInputKeyboardManager from "../TextInputKeyboardManager";
|
|
4
|
-
const IS_IOS = Platform.OS === 'ios';
|
|
5
|
-
const DEFAULT_KEYBOARD_HEIGHT = IS_IOS ? 216 : 312; // TODO: verify this value for iOS
|
|
6
|
-
|
|
7
|
-
export default class KeyboardUtils {
|
|
8
|
-
static displayName = 'KeyboardUtils';
|
|
9
|
-
static listeners = {};
|
|
10
|
-
static addListener = (id, onDismiss) => {
|
|
11
|
-
if (id && onDismiss && !KeyboardUtils.listeners[id]) {
|
|
12
|
-
KeyboardUtils.listeners[id] = onDismiss;
|
|
13
|
-
}
|
|
14
|
-
};
|
|
15
|
-
static removeListener = id => {
|
|
16
|
-
if (id && KeyboardUtils.listeners[id]) {
|
|
17
|
-
delete KeyboardUtils.listeners[id];
|
|
18
|
-
}
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* Used to dismiss (close) the keyboard.
|
|
23
|
-
*/
|
|
24
|
-
static dismiss = () => {
|
|
25
|
-
Keyboard.dismiss();
|
|
26
|
-
TextInputKeyboardManager.dismissKeyboard();
|
|
27
|
-
Object.keys(KeyboardUtils.listeners).forEach(key => {
|
|
28
|
-
KeyboardUtils.listeners[key]();
|
|
29
|
-
});
|
|
30
|
-
};
|
|
31
|
-
}
|
|
32
|
-
const useKeyboardHeight = ({
|
|
33
|
-
id,
|
|
34
|
-
onDismiss
|
|
35
|
-
}) => {
|
|
36
|
-
const [isInitialized, setIsInitialized] = useState(false);
|
|
37
|
-
const [keyboardHeight, setKeyboardHeight] = useState(DEFAULT_KEYBOARD_HEIGHT);
|
|
38
|
-
const [isVisible, setIsVisible] = useState(false);
|
|
39
|
-
const keyboardDidShow = useCallback(e => {
|
|
40
|
-
if (!isInitialized) {
|
|
41
|
-
setIsInitialized(true);
|
|
42
|
-
setKeyboardHeight(e.endCoordinates.height);
|
|
43
|
-
}
|
|
44
|
-
setIsVisible(true);
|
|
45
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
46
|
-
}, []);
|
|
47
|
-
const keyboardDidHide = useCallback(() => {
|
|
48
|
-
setIsVisible(false);
|
|
49
|
-
}, []);
|
|
50
|
-
useEffect(() => {
|
|
51
|
-
const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', keyboardDidShow);
|
|
52
|
-
const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', keyboardDidHide);
|
|
53
|
-
// @ts-ignore
|
|
54
|
-
KeyboardUtils.addListener(id, onDismiss);
|
|
55
|
-
return () => {
|
|
56
|
-
keyboardDidShowListener.remove();
|
|
57
|
-
keyboardDidHideListener.remove();
|
|
58
|
-
// @ts-ignore
|
|
59
|
-
KeyboardUtils.removeListener(id);
|
|
60
|
-
};
|
|
61
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
62
|
-
}, []);
|
|
63
|
-
return {
|
|
64
|
-
keyboardHeight,
|
|
65
|
-
isKeyboardVisible: isVisible
|
|
66
|
-
};
|
|
67
|
-
};
|
|
68
|
-
const KeyboardHeightListener = ({
|
|
69
|
-
id,
|
|
70
|
-
onDismiss,
|
|
71
|
-
onKeyboardHeightChange,
|
|
72
|
-
onKeyboardVisibilityChange
|
|
73
|
-
}) => {
|
|
74
|
-
const {
|
|
75
|
-
keyboardHeight,
|
|
76
|
-
isKeyboardVisible
|
|
77
|
-
} = useKeyboardHeight({
|
|
78
|
-
id,
|
|
79
|
-
onDismiss
|
|
80
|
-
});
|
|
81
|
-
useEffect(() => {
|
|
82
|
-
onKeyboardHeightChange?.(keyboardHeight);
|
|
83
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
84
|
-
}, [keyboardHeight]);
|
|
85
|
-
useEffect(() => {
|
|
86
|
-
onKeyboardVisibilityChange?.(isKeyboardVisible);
|
|
87
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
88
|
-
}, [isKeyboardVisible]);
|
|
89
|
-
return null;
|
|
90
|
-
};
|
|
91
|
-
export { useKeyboardHeight, KeyboardHeightListener };
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { NativeModules } from 'react-native';
|
|
2
|
-
const CustomKeyboardInput = NativeModules.CustomKeyboardInputTemp;
|
|
3
|
-
export default class TextInputKeyboardManager {
|
|
4
|
-
static reset = () => CustomKeyboardInput.reset();
|
|
5
|
-
static dismissKeyboard = async () => {
|
|
6
|
-
CustomKeyboardInput.clearFocusedView();
|
|
7
|
-
await TextInputKeyboardManager.reset();
|
|
8
|
-
};
|
|
9
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export default class TextInputKeyboardManager {
|
|
2
|
-
static setInputComponent: (textInputRef: any, { component, initialProps, useSafeArea }: {
|
|
3
|
-
component?: string | undefined;
|
|
4
|
-
initialProps: any;
|
|
5
|
-
useSafeArea?: boolean | undefined;
|
|
6
|
-
}) => void;
|
|
7
|
-
static removeInputComponent: (textInputRef: any) => void;
|
|
8
|
-
static dismissKeyboard: () => void;
|
|
9
|
-
static toggleExpandKeyboard: (textInputRef: any, expand: boolean, performLayoutAnimation?: boolean) => void;
|
|
10
|
-
}
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import ReactNative, { NativeModules, LayoutAnimation } from 'react-native';
|
|
2
|
-
const CustomInputControllerTemp = NativeModules.CustomInputControllerTemp;
|
|
3
|
-
export default class TextInputKeyboardManager {
|
|
4
|
-
static setInputComponent = (textInputRef, {
|
|
5
|
-
component,
|
|
6
|
-
initialProps,
|
|
7
|
-
useSafeArea
|
|
8
|
-
}) => {
|
|
9
|
-
if (!textInputRef || !CustomInputControllerTemp) {
|
|
10
|
-
return;
|
|
11
|
-
}
|
|
12
|
-
const reactTag = findNodeHandle(textInputRef);
|
|
13
|
-
if (reactTag) {
|
|
14
|
-
CustomInputControllerTemp.presentCustomInputComponent(reactTag, {
|
|
15
|
-
component,
|
|
16
|
-
initialProps,
|
|
17
|
-
useSafeArea
|
|
18
|
-
});
|
|
19
|
-
}
|
|
20
|
-
};
|
|
21
|
-
static removeInputComponent = textInputRef => {
|
|
22
|
-
if (!textInputRef || !CustomInputControllerTemp) {
|
|
23
|
-
return;
|
|
24
|
-
}
|
|
25
|
-
const reactTag = findNodeHandle(textInputRef);
|
|
26
|
-
if (reactTag) {
|
|
27
|
-
CustomInputControllerTemp.resetInput(reactTag);
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
static dismissKeyboard = () => {
|
|
31
|
-
CustomInputControllerTemp.dismissKeyboard();
|
|
32
|
-
};
|
|
33
|
-
static toggleExpandKeyboard = (textInputRef, expand, performLayoutAnimation = false) => {
|
|
34
|
-
if (textInputRef) {
|
|
35
|
-
if (performLayoutAnimation) {
|
|
36
|
-
LayoutAnimation.configureNext(springAnimation);
|
|
37
|
-
}
|
|
38
|
-
const reactTag = findNodeHandle(textInputRef);
|
|
39
|
-
if (expand) {
|
|
40
|
-
CustomInputControllerTemp.expandFullScreenForInput(reactTag);
|
|
41
|
-
} else {
|
|
42
|
-
CustomInputControllerTemp.resetSizeForInput(reactTag);
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
};
|
|
46
|
-
}
|
|
47
|
-
function findNodeHandle(ref) {
|
|
48
|
-
return ref.current?.getNodeHandle?.() || ref?.getNodeHandle?.() || ReactNative.findNodeHandle(ref.current || ref);
|
|
49
|
-
}
|
|
50
|
-
const springAnimation = {
|
|
51
|
-
duration: 400,
|
|
52
|
-
create: {
|
|
53
|
-
type: LayoutAnimation.Types.linear,
|
|
54
|
-
property: LayoutAnimation.Properties.opacity
|
|
55
|
-
},
|
|
56
|
-
update: {
|
|
57
|
-
type: LayoutAnimation.Types.spring,
|
|
58
|
-
springDamping: 1.0
|
|
59
|
-
},
|
|
60
|
-
delete: {
|
|
61
|
-
type: LayoutAnimation.Types.linear,
|
|
62
|
-
property: LayoutAnimation.Properties.opacity
|
|
63
|
-
}
|
|
64
|
-
};
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { default as TextInputKeyboardManagerIOS } from './TextInputKeyboardManager.ios';
|
|
2
|
-
import { default as TextInputKeyboardManagerAndroid } from './TextInputKeyboardManager.android';
|
|
3
|
-
declare const TextInputKeyboardManager: typeof TextInputKeyboardManagerIOS | typeof TextInputKeyboardManagerAndroid;
|
|
4
|
-
export default TextInputKeyboardManager;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { Platform } from 'react-native';
|
|
2
|
-
import { default as TextInputKeyboardManagerIOS } from "./TextInputKeyboardManager.ios";
|
|
3
|
-
import { default as TextInputKeyboardManagerAndroid } from "./TextInputKeyboardManager.android";
|
|
4
|
-
const IsAndroid = Platform.OS === 'android';
|
|
5
|
-
const TextInputKeyboardManager = IsAndroid ? TextInputKeyboardManagerAndroid : TextInputKeyboardManagerIOS;
|
|
6
|
-
export default TextInputKeyboardManager;
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
import React, { Component } from 'react';
|
|
2
|
-
import { LayoutChangeEvent } from 'react-native';
|
|
3
|
-
import { KeyboardTrackingViewProps } from '../KeyboardTrackingView';
|
|
4
|
-
type kbTrackingViewProps = Pick<KeyboardTrackingViewProps, 'scrollBehavior' | 'revealKeyboardInteractive' | 'manageScrollView' | 'requiresSameParentToManageScrollView' | 'allowHitsOutsideBounds' | 'addBottomView' | 'bottomViewColor' | 'useSafeArea' | 'usesBottomTabs'>;
|
|
5
|
-
export type KeyboardAccessoryViewProps = kbTrackingViewProps & {
|
|
6
|
-
/**
|
|
7
|
-
* Content to be rendered above the keyboard
|
|
8
|
-
*/
|
|
9
|
-
renderContent?: () => React.ReactElement;
|
|
10
|
-
/**
|
|
11
|
-
* iOS only.
|
|
12
|
-
* The reference to the actual text input (or the keyboard may not reset when instructed to, etc.).
|
|
13
|
-
* This is required.
|
|
14
|
-
*/
|
|
15
|
-
kbInputRef?: any;
|
|
16
|
-
/**
|
|
17
|
-
* The keyboard ID (the componentID sent to KeyboardRegistry)
|
|
18
|
-
*/
|
|
19
|
-
kbComponent?: string;
|
|
20
|
-
/**
|
|
21
|
-
* The props that will be sent to the KeyboardComponent
|
|
22
|
-
*/
|
|
23
|
-
kbInitialProps?: any;
|
|
24
|
-
/**
|
|
25
|
-
* A callback for when the height is changed
|
|
26
|
-
*/
|
|
27
|
-
onHeightChanged?: (height: number) => void;
|
|
28
|
-
/**
|
|
29
|
-
* Callback that will be called when an item on the keyboard has been pressed.
|
|
30
|
-
*/
|
|
31
|
-
onItemSelected?: (component?: string, args?: any) => void;
|
|
32
|
-
/**
|
|
33
|
-
* Callback that will be called if KeyboardRegistry.requestShowKeyboard is called.
|
|
34
|
-
*/
|
|
35
|
-
onRequestShowKeyboard?: () => void;
|
|
36
|
-
/**
|
|
37
|
-
* Callback that will be called once the keyboard has been closed
|
|
38
|
-
*/
|
|
39
|
-
onKeyboardResigned?: () => void;
|
|
40
|
-
children?: React.ReactChild;
|
|
41
|
-
};
|
|
42
|
-
/**
|
|
43
|
-
* @description: View that allows replacing the default keyboard with other components
|
|
44
|
-
* @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/nativeComponentScreens/keyboardAccessory/KeyboardAccessoryViewScreen.js
|
|
45
|
-
* @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/KeyboardAccessoryView/KeyboardAccessoryView.gif?raw=true
|
|
46
|
-
*/
|
|
47
|
-
declare class KeyboardAccessoryView extends Component<KeyboardAccessoryViewProps> {
|
|
48
|
-
static scrollBehaviors: {
|
|
49
|
-
NONE: any;
|
|
50
|
-
SCROLL_TO_BOTTOM_INVERTED_ONLY: any;
|
|
51
|
-
FIXED_OFFSET: any;
|
|
52
|
-
};
|
|
53
|
-
static defaultProps: {
|
|
54
|
-
revealKeyboardInteractive: boolean;
|
|
55
|
-
manageScrollView: boolean;
|
|
56
|
-
requiresSameParentToManageScrollView: boolean;
|
|
57
|
-
addBottomView: boolean;
|
|
58
|
-
allowHitsOutsideBounds: boolean;
|
|
59
|
-
scrollBehavior: any;
|
|
60
|
-
};
|
|
61
|
-
static currentId: number;
|
|
62
|
-
customInputControllerEventsSubscriber: any;
|
|
63
|
-
trackingViewRef: any;
|
|
64
|
-
subscription: any;
|
|
65
|
-
id: number;
|
|
66
|
-
constructor(props: KeyboardAccessoryViewProps);
|
|
67
|
-
state: {
|
|
68
|
-
keyboardHeight: number;
|
|
69
|
-
shouldFocus: boolean;
|
|
70
|
-
};
|
|
71
|
-
componentWillUnmount(): void;
|
|
72
|
-
onContainerComponentHeightChanged(event: LayoutChangeEvent): void;
|
|
73
|
-
onAndroidBackPressed(): boolean;
|
|
74
|
-
getNativeProps(): Promise<any>;
|
|
75
|
-
registerForKeyboardResignedEvent(): void;
|
|
76
|
-
registerAndroidBackHandler(): void;
|
|
77
|
-
processInitialProps(): any;
|
|
78
|
-
scrollToStart(): void;
|
|
79
|
-
onKeyboardHeightChange: (keyboardHeight: number) => void;
|
|
80
|
-
onDismiss: () => void;
|
|
81
|
-
onKeyboardDismiss: () => void;
|
|
82
|
-
render(): React.JSX.Element;
|
|
83
|
-
}
|
|
84
|
-
export default KeyboardAccessoryView;
|
|
@@ -1,161 +0,0 @@
|
|
|
1
|
-
import React, { Component } from 'react';
|
|
2
|
-
import { StyleSheet, Platform, NativeModules, NativeEventEmitter, DeviceEventEmitter, processColor, BackHandler } from 'react-native';
|
|
3
|
-
import KeyboardTrackingView from "../KeyboardTrackingView";
|
|
4
|
-
import CustomKeyboardView from "./CustomKeyboardView";
|
|
5
|
-
import KeyboardUtils, { KeyboardHeightListener } from "./KeyboardUtils";
|
|
6
|
-
const IsIOS = Platform.OS === 'ios';
|
|
7
|
-
const IsAndroid = Platform.OS === 'android';
|
|
8
|
-
/**
|
|
9
|
-
* @description: View that allows replacing the default keyboard with other components
|
|
10
|
-
* @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/nativeComponentScreens/keyboardAccessory/KeyboardAccessoryViewScreen.js
|
|
11
|
-
* @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/KeyboardAccessoryView/KeyboardAccessoryView.gif?raw=true
|
|
12
|
-
*/
|
|
13
|
-
class KeyboardAccessoryView extends Component {
|
|
14
|
-
static scrollBehaviors = KeyboardTrackingView.scrollBehaviors;
|
|
15
|
-
static defaultProps = {
|
|
16
|
-
revealKeyboardInteractive: false,
|
|
17
|
-
manageScrollView: true,
|
|
18
|
-
requiresSameParentToManageScrollView: false,
|
|
19
|
-
addBottomView: false,
|
|
20
|
-
allowHitsOutsideBounds: false,
|
|
21
|
-
scrollBehavior: KeyboardTrackingView.scrollBehaviors.FIXED_OFFSET
|
|
22
|
-
};
|
|
23
|
-
static currentId = 0;
|
|
24
|
-
|
|
25
|
-
// TODO: fix
|
|
26
|
-
|
|
27
|
-
id = ++KeyboardAccessoryView.currentId;
|
|
28
|
-
constructor(props) {
|
|
29
|
-
super(props);
|
|
30
|
-
this.onContainerComponentHeightChanged = this.onContainerComponentHeightChanged.bind(this);
|
|
31
|
-
this.processInitialProps = this.processInitialProps.bind(this);
|
|
32
|
-
this.registerForKeyboardResignedEvent = this.registerForKeyboardResignedEvent.bind(this);
|
|
33
|
-
this.registerAndroidBackHandler = this.registerAndroidBackHandler.bind(this);
|
|
34
|
-
this.onAndroidBackPressed = this.onAndroidBackPressed.bind(this);
|
|
35
|
-
this.registerForKeyboardResignedEvent();
|
|
36
|
-
this.registerAndroidBackHandler();
|
|
37
|
-
}
|
|
38
|
-
state = {
|
|
39
|
-
keyboardHeight: 0,
|
|
40
|
-
shouldFocus: true
|
|
41
|
-
};
|
|
42
|
-
componentWillUnmount() {
|
|
43
|
-
if (this.customInputControllerEventsSubscriber) {
|
|
44
|
-
this.customInputControllerEventsSubscriber.remove();
|
|
45
|
-
}
|
|
46
|
-
if (IsAndroid) {
|
|
47
|
-
this.subscription.remove();
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
onContainerComponentHeightChanged(event) {
|
|
51
|
-
const {
|
|
52
|
-
onHeightChanged
|
|
53
|
-
} = this.props;
|
|
54
|
-
if (onHeightChanged) {
|
|
55
|
-
onHeightChanged(event.nativeEvent.layout.height);
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
onAndroidBackPressed() {
|
|
59
|
-
const {
|
|
60
|
-
kbComponent
|
|
61
|
-
} = this.props;
|
|
62
|
-
if (kbComponent) {
|
|
63
|
-
KeyboardUtils.dismiss();
|
|
64
|
-
return true;
|
|
65
|
-
}
|
|
66
|
-
return false;
|
|
67
|
-
}
|
|
68
|
-
async getNativeProps() {
|
|
69
|
-
if (this.trackingViewRef) {
|
|
70
|
-
return await this.trackingViewRef.getNativeProps();
|
|
71
|
-
}
|
|
72
|
-
return {};
|
|
73
|
-
}
|
|
74
|
-
registerForKeyboardResignedEvent() {
|
|
75
|
-
const {
|
|
76
|
-
onKeyboardResigned
|
|
77
|
-
} = this.props;
|
|
78
|
-
let eventEmitter = null;
|
|
79
|
-
if (IsIOS) {
|
|
80
|
-
if (NativeModules.CustomInputControllerTemp) {
|
|
81
|
-
eventEmitter = new NativeEventEmitter(NativeModules.CustomInputControllerTemp);
|
|
82
|
-
}
|
|
83
|
-
} else {
|
|
84
|
-
eventEmitter = DeviceEventEmitter;
|
|
85
|
-
}
|
|
86
|
-
if (eventEmitter !== null) {
|
|
87
|
-
this.customInputControllerEventsSubscriber = eventEmitter.addListener('kbdResigned', () => {
|
|
88
|
-
if (onKeyboardResigned) {
|
|
89
|
-
onKeyboardResigned();
|
|
90
|
-
}
|
|
91
|
-
});
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
registerAndroidBackHandler() {
|
|
95
|
-
if (IsAndroid) {
|
|
96
|
-
this.subscription = BackHandler.addEventListener('hardwareBackPress', this.onAndroidBackPressed);
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
processInitialProps() {
|
|
100
|
-
const {
|
|
101
|
-
kbInitialProps
|
|
102
|
-
} = this.props;
|
|
103
|
-
if (IsIOS && kbInitialProps && kbInitialProps.backgroundColor) {
|
|
104
|
-
const processedProps = Object.assign({}, kbInitialProps);
|
|
105
|
-
processedProps.backgroundColor = processColor(processedProps.backgroundColor);
|
|
106
|
-
return processedProps;
|
|
107
|
-
}
|
|
108
|
-
return kbInitialProps;
|
|
109
|
-
}
|
|
110
|
-
scrollToStart() {
|
|
111
|
-
if (this.trackingViewRef) {
|
|
112
|
-
this.trackingViewRef.scrollToStart();
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
onKeyboardHeightChange = keyboardHeight => {
|
|
116
|
-
this.setState({
|
|
117
|
-
keyboardHeight
|
|
118
|
-
});
|
|
119
|
-
};
|
|
120
|
-
onDismiss = () => {
|
|
121
|
-
this.setState({
|
|
122
|
-
shouldFocus: false
|
|
123
|
-
});
|
|
124
|
-
};
|
|
125
|
-
onKeyboardDismiss = () => {
|
|
126
|
-
this.setState({
|
|
127
|
-
shouldFocus: true
|
|
128
|
-
});
|
|
129
|
-
};
|
|
130
|
-
render() {
|
|
131
|
-
const {
|
|
132
|
-
keyboardHeight,
|
|
133
|
-
shouldFocus
|
|
134
|
-
} = this.state;
|
|
135
|
-
const {
|
|
136
|
-
renderContent,
|
|
137
|
-
kbInputRef,
|
|
138
|
-
kbComponent,
|
|
139
|
-
onItemSelected,
|
|
140
|
-
onRequestShowKeyboard,
|
|
141
|
-
scrollBehavior,
|
|
142
|
-
...others
|
|
143
|
-
} = this.props;
|
|
144
|
-
return <KeyboardTrackingView {...others} scrollBehavior={scrollBehavior} ref={r => this.trackingViewRef = r} style={styles.trackingToolbarContainer} onLayout={this.onContainerComponentHeightChanged}>
|
|
145
|
-
<KeyboardHeightListener id={`${this.id}`} onDismiss={this.onDismiss} onKeyboardHeightChange={this.onKeyboardHeightChange} />
|
|
146
|
-
<>{renderContent?.()}</>
|
|
147
|
-
<CustomKeyboardView keyboardHeight={keyboardHeight} shouldFocus={shouldFocus} onKeyboardDismiss={this.onKeyboardDismiss} inputRef={kbInputRef} component={kbComponent} initialProps={this.processInitialProps()} onItemSelected={onItemSelected} onRequestShowKeyboard={onRequestShowKeyboard} useSafeArea={others.useSafeArea} />
|
|
148
|
-
</KeyboardTrackingView>;
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
const styles = StyleSheet.create({
|
|
152
|
-
trackingToolbarContainer: {
|
|
153
|
-
...Platform.select({
|
|
154
|
-
ios: {
|
|
155
|
-
...StyleSheet.absoluteFillObject,
|
|
156
|
-
top: undefined
|
|
157
|
-
}
|
|
158
|
-
})
|
|
159
|
-
}
|
|
160
|
-
});
|
|
161
|
-
export default KeyboardAccessoryView;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { KeyboardTrackingViewProps } from '../KeyboardTrackingView';
|
|
3
|
-
type Props = KeyboardTrackingViewProps & {
|
|
4
|
-
offset?: number;
|
|
5
|
-
};
|
|
6
|
-
/**
|
|
7
|
-
* @description: Used to add an inset when a keyboard is used and might hide part of the screen.
|
|
8
|
-
*
|
|
9
|
-
* @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TextFieldScreen/InputsScreen.js
|
|
10
|
-
* @notes: This view is useful only for iOS.
|
|
11
|
-
*/
|
|
12
|
-
declare const KeyboardAwareInsetsView: {
|
|
13
|
-
(props: Props): React.JSX.Element;
|
|
14
|
-
displayName: string;
|
|
15
|
-
};
|
|
16
|
-
export default KeyboardAwareInsetsView;
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { StyleSheet, Dimensions } from 'react-native';
|
|
3
|
-
import KeyboardTrackingView from "../KeyboardTrackingView";
|
|
4
|
-
/**
|
|
5
|
-
* @description: Used to add an inset when a keyboard is used and might hide part of the screen.
|
|
6
|
-
*
|
|
7
|
-
* @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TextFieldScreen/InputsScreen.js
|
|
8
|
-
* @notes: This view is useful only for iOS.
|
|
9
|
-
*/
|
|
10
|
-
const KeyboardAwareInsetsView = props => {
|
|
11
|
-
const {
|
|
12
|
-
offset = 0.5,
|
|
13
|
-
...others
|
|
14
|
-
} = props;
|
|
15
|
-
return <KeyboardTrackingView {...others} pointerEvents={'none'} style={[styles.insetsView, {
|
|
16
|
-
height: offset
|
|
17
|
-
}]} scrollToFocusedInput />;
|
|
18
|
-
};
|
|
19
|
-
const ScreenSize = Dimensions.get('window');
|
|
20
|
-
const styles = StyleSheet.create({
|
|
21
|
-
insetsView: {
|
|
22
|
-
width: ScreenSize.width,
|
|
23
|
-
height: 0.5,
|
|
24
|
-
position: 'absolute',
|
|
25
|
-
bottom: 0,
|
|
26
|
-
left: 0,
|
|
27
|
-
backgroundColor: 'transparent'
|
|
28
|
-
}
|
|
29
|
-
});
|
|
30
|
-
KeyboardAwareInsetsView.displayName = 'KeyboardAwareInsetsView';
|
|
31
|
-
export default KeyboardAwareInsetsView;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import React, { PureComponent } from 'react';
|
|
2
|
-
declare class KeyboardTrackingView extends PureComponent {
|
|
3
|
-
static displayName: string;
|
|
4
|
-
render(): React.JSX.Element;
|
|
5
|
-
getNativeProps(): Promise<{
|
|
6
|
-
trackingViewHeight: number;
|
|
7
|
-
keyboardHeight: number;
|
|
8
|
-
contentTopInset: number;
|
|
9
|
-
}>;
|
|
10
|
-
scrollToStart(): void;
|
|
11
|
-
}
|
|
12
|
-
export default KeyboardTrackingView;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import React, { PureComponent } from 'react';
|
|
2
|
-
import { View } from 'react-native';
|
|
3
|
-
class KeyboardTrackingView extends PureComponent {
|
|
4
|
-
static displayName = 'IGNORE';
|
|
5
|
-
render() {
|
|
6
|
-
return <View {...this.props} />;
|
|
7
|
-
}
|
|
8
|
-
async getNativeProps() {
|
|
9
|
-
return {
|
|
10
|
-
trackingViewHeight: 0,
|
|
11
|
-
keyboardHeight: 0,
|
|
12
|
-
contentTopInset: 0
|
|
13
|
-
};
|
|
14
|
-
}
|
|
15
|
-
scrollToStart() {}
|
|
16
|
-
}
|
|
17
|
-
export default KeyboardTrackingView;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import React, { PureComponent } from 'react';
|
|
2
|
-
import { KeyboardTrackingViewProps } from './index';
|
|
3
|
-
/**
|
|
4
|
-
* @description: A UI component that enables "keyboard tracking" for this view and it's sub-views.
|
|
5
|
-
* Would typically be used when you have a TextField or TextInput inside this view.
|
|
6
|
-
*
|
|
7
|
-
* @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/nativeComponentScreens/KeyboardTrackingViewScreen.js
|
|
8
|
-
* @notes: This view is useful only for iOS.
|
|
9
|
-
* @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/KeyboardTrackingView/KeyboardTrackingView.gif?raw=true
|
|
10
|
-
*/
|
|
11
|
-
declare class KeyboardTrackingView extends PureComponent<KeyboardTrackingViewProps> {
|
|
12
|
-
static displayName: string;
|
|
13
|
-
static defaultProps: {
|
|
14
|
-
useSafeArea: boolean;
|
|
15
|
-
};
|
|
16
|
-
ref?: any;
|
|
17
|
-
render(): React.JSX.Element;
|
|
18
|
-
getNativeProps(): Promise<any>;
|
|
19
|
-
scrollToStart(): void;
|
|
20
|
-
}
|
|
21
|
-
export default KeyboardTrackingView;
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import React, { PureComponent } from 'react';
|
|
2
|
-
import ReactNative, { NativeModules } from 'react-native';
|
|
3
|
-
// Import the Codegen specification for New Architecture
|
|
4
|
-
import KeyboardTrackingViewNativeComponent from "../../../specs/KeyboardTrackingViewNativeComponent";
|
|
5
|
-
const KeyboardTrackingViewTempManager = NativeModules.KeyboardTrackingViewTempManager;
|
|
6
|
-
|
|
7
|
-
/**
|
|
8
|
-
* @description: A UI component that enables "keyboard tracking" for this view and it's sub-views.
|
|
9
|
-
* Would typically be used when you have a TextField or TextInput inside this view.
|
|
10
|
-
*
|
|
11
|
-
* @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/nativeComponentScreens/KeyboardTrackingViewScreen.js
|
|
12
|
-
* @notes: This view is useful only for iOS.
|
|
13
|
-
* @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/KeyboardTrackingView/KeyboardTrackingView.gif?raw=true
|
|
14
|
-
*/
|
|
15
|
-
class KeyboardTrackingView extends PureComponent {
|
|
16
|
-
static displayName = 'KeyboardTrackingView';
|
|
17
|
-
static defaultProps = {
|
|
18
|
-
useSafeArea: false
|
|
19
|
-
};
|
|
20
|
-
render() {
|
|
21
|
-
return <KeyboardTrackingViewNativeComponent {...this.props} ref={r => this.ref = r} />;
|
|
22
|
-
}
|
|
23
|
-
async getNativeProps() {
|
|
24
|
-
if (this.ref && KeyboardTrackingViewTempManager && KeyboardTrackingViewTempManager.getNativeProps) {
|
|
25
|
-
return await KeyboardTrackingViewTempManager.getNativeProps(ReactNative.findNodeHandle(this.ref));
|
|
26
|
-
}
|
|
27
|
-
return {};
|
|
28
|
-
}
|
|
29
|
-
scrollToStart() {
|
|
30
|
-
if (this.ref && KeyboardTrackingViewTempManager && KeyboardTrackingViewTempManager.scrollToStart) {
|
|
31
|
-
KeyboardTrackingViewTempManager.scrollToStart(ReactNative.findNodeHandle(this.ref));
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
export default KeyboardTrackingView;
|
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { StyleProp, ViewStyle, ViewProps } from 'react-native';
|
|
3
|
-
declare const SCROLL_BEHAVIORS: {
|
|
4
|
-
NONE: any;
|
|
5
|
-
SCROLL_TO_BOTTOM_INVERTED_ONLY: any;
|
|
6
|
-
FIXED_OFFSET: any;
|
|
7
|
-
};
|
|
8
|
-
export type KeyboardTrackingViewProps = ViewProps & {
|
|
9
|
-
/**
|
|
10
|
-
* Enables tracking of the keyboard when it's dismissed interactively (false by default).
|
|
11
|
-
* Why? When using an external keyboard (BT),
|
|
12
|
-
* you still get the keyboard events and the view just hovers when you focus the input.
|
|
13
|
-
* Also, if you're not using interactive style of dismissing the keyboard
|
|
14
|
-
* (or if you don't have an input inside this view) it doesn't make sense to track it anyway.
|
|
15
|
-
* (This is caused because of the usage of inputAccessory to be able to track the
|
|
16
|
-
* keyboard interactive change and it introduces this bug)
|
|
17
|
-
*/
|
|
18
|
-
trackInteractive?: boolean;
|
|
19
|
-
/**
|
|
20
|
-
* iOS only.
|
|
21
|
-
* Show the keyboard on a negative scroll
|
|
22
|
-
* default: false
|
|
23
|
-
*/
|
|
24
|
-
revealKeyboardInteractive?: boolean;
|
|
25
|
-
/**
|
|
26
|
-
* iOS only.
|
|
27
|
-
* Set to false to turn off inset management and manage it yourself
|
|
28
|
-
* default: true
|
|
29
|
-
*/
|
|
30
|
-
manageScrollView?: boolean;
|
|
31
|
-
/**
|
|
32
|
-
* iOS only.
|
|
33
|
-
* Set to true manageScrollView is set to true and still does not work,
|
|
34
|
-
* it means that the ScrollView found is the wrong one and you'll have
|
|
35
|
-
* to have the KeyboardAccessoryView and the ScrollView as siblings
|
|
36
|
-
* and set this to true
|
|
37
|
-
*
|
|
38
|
-
* default: false
|
|
39
|
-
*/
|
|
40
|
-
requiresSameParentToManageScrollView?: boolean;
|
|
41
|
-
/**
|
|
42
|
-
* iOS only.
|
|
43
|
-
* Allow hitting sub-views that are placed beyond the view bounds
|
|
44
|
-
*
|
|
45
|
-
* default: false
|
|
46
|
-
*/
|
|
47
|
-
allowHitsOutsideBounds?: boolean;
|
|
48
|
-
scrollToFocusedInput?: boolean;
|
|
49
|
-
/**
|
|
50
|
-
* iOS only.
|
|
51
|
-
* The scrolling behavior (NONE | SCROLL_TO_BOTTOM_INVERTED_ONLY | FIXED_OFFSET)
|
|
52
|
-
*/
|
|
53
|
-
scrollBehavior?: number;
|
|
54
|
-
/**
|
|
55
|
-
* iOS only.
|
|
56
|
-
* Add a SafeArea view beneath the KeyboardAccessoryView
|
|
57
|
-
* default: false
|
|
58
|
-
*/
|
|
59
|
-
addBottomView?: boolean;
|
|
60
|
-
/**
|
|
61
|
-
* iOS only.
|
|
62
|
-
* The bottom view's color
|
|
63
|
-
* default: 'white'
|
|
64
|
-
*/
|
|
65
|
-
bottomViewColor?: string;
|
|
66
|
-
/**
|
|
67
|
-
* Allow control safe area
|
|
68
|
-
*/
|
|
69
|
-
useSafeArea?: boolean;
|
|
70
|
-
/**
|
|
71
|
-
* Whether or not to include bottom tab bar inset
|
|
72
|
-
*/
|
|
73
|
-
usesBottomTabs?: boolean;
|
|
74
|
-
ref?: any;
|
|
75
|
-
style?: StyleProp<ViewStyle>;
|
|
76
|
-
children?: React.ReactChild | React.ReactChild[];
|
|
77
|
-
};
|
|
78
|
-
declare const _default: React.ForwardRefExoticComponent<Omit<KeyboardTrackingViewProps, "ref"> & React.RefAttributes<unknown>> & {
|
|
79
|
-
scrollBehaviors: typeof SCROLL_BEHAVIORS;
|
|
80
|
-
};
|
|
81
|
-
export default _default;
|