uilib-native 5.0.0 → 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/ios/reactnativeuilib/keyboardtrackingview/KeyboardTrackingViewTempManager.m +5 -5
- 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,26 +0,0 @@
|
|
|
1
|
-
export default class KeyboardUtils {
|
|
2
|
-
static displayName: string;
|
|
3
|
-
private static listeners;
|
|
4
|
-
private static addListener;
|
|
5
|
-
private static removeListener;
|
|
6
|
-
/**
|
|
7
|
-
* Used to dismiss (close) the keyboard.
|
|
8
|
-
*/
|
|
9
|
-
static dismiss: () => void;
|
|
10
|
-
}
|
|
11
|
-
interface KeyboardHeightProps {
|
|
12
|
-
id: string;
|
|
13
|
-
onDismiss: () => void;
|
|
14
|
-
}
|
|
15
|
-
declare const useKeyboardHeight: ({ id, onDismiss }: KeyboardHeightProps) => {
|
|
16
|
-
keyboardHeight: number;
|
|
17
|
-
isKeyboardVisible: boolean;
|
|
18
|
-
};
|
|
19
|
-
export interface KeyboardHeightListenerProps {
|
|
20
|
-
id: string;
|
|
21
|
-
onDismiss: () => void;
|
|
22
|
-
onKeyboardHeightChange?: (height: number) => void;
|
|
23
|
-
onKeyboardVisibilityChange?: (isKeyboardVisible: boolean) => void;
|
|
24
|
-
}
|
|
25
|
-
declare const KeyboardHeightListener: ({ id, onDismiss, onKeyboardHeightChange, onKeyboardVisibilityChange }: KeyboardHeightListenerProps) => null;
|
|
26
|
-
export { useKeyboardHeight, KeyboardHeightListener };
|
|
@@ -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;
|