react-native-keyboard-controller
Version:
Keyboard manager which works in identical way on both iOS and Android
173 lines • 6.27 kB
JavaScript
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import React, { useEffect, useMemo, useState } from "react";
import { StyleSheet, View } from "react-native";
import { FocusedInputEvents } from "../../bindings";
import { useKeyboardState } from "../../hooks";
import KeyboardStickyView from "../KeyboardStickyView";
import Arrow from "./Arrow";
import Button from "./Button";
import { colors } from "./colors";
import { Background, Content, Done, Next, Prev } from "./compound/components";
import { ToolbarContext } from "./compound/context";
import { DEFAULT_OPACITY, KEYBOARD_HAS_ROUNDED_CORNERS, KEYBOARD_TOOLBAR_HEIGHT, OPENED_OFFSET, TEST_ID_KEYBOARD_TOOLBAR } from "./constants";
/**
* `KeyboardToolbar` is a component that is shown above the keyboard with `Prev`/`Next` buttons from left and
* `Done` button from the right (to dismiss the keyboard). Allows to add customizable content (yours UI elements) in the middle.
*
* @param props - Component props.
* @returns A component that is shown above the keyboard with `Prev`/`Next` and `Done` buttons.
* @see {@link https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-toolbar|Documentation} page for more details.
* @example
* ```tsx
* <KeyboardToolbar>
* <KeyboardToolbar.Done text="Close" />
* </KeyboardToolbar>
* ```
*/
const KeyboardToolbar = props => {
const {
children,
content,
theme = colors,
doneText = "Done",
button,
icon,
showArrows = true,
onNextCallback,
onPrevCallback,
onDoneCallback,
blur = null,
opacity = DEFAULT_OPACITY,
offset: {
closed = 0,
opened = 0
} = {},
enabled = true,
insets,
...rest
} = props;
const colorScheme = useKeyboardState(state => state.appearance);
const [inputs, setInputs] = useState({
current: 0,
count: 0
});
const isPrevDisabled = inputs.current === 0;
const isNextDisabled = inputs.current === inputs.count - 1;
const buttonContainer = button ?? Button;
const iconContainer = icon ?? Arrow;
useEffect(() => {
const subscription = FocusedInputEvents.addListener("focusDidSet", e => {
setInputs(e);
});
return subscription.remove;
}, []);
const toolbarStyle = useMemo(() => [styles.toolbar, {
backgroundColor: `${theme[colorScheme].background}${opacity}`
}, !KEYBOARD_HAS_ROUNDED_CORNERS ? {
paddingLeft: insets === null || insets === void 0 ? void 0 : insets.left,
paddingRight: insets === null || insets === void 0 ? void 0 : insets.right
} : null, KEYBOARD_HAS_ROUNDED_CORNERS ? styles.floating : null], [colorScheme, opacity, theme, insets]);
const containerStyle = useMemo(() => [KEYBOARD_HAS_ROUNDED_CORNERS ? {
marginLeft: ((insets === null || insets === void 0 ? void 0 : insets.left) ?? 0) + 16,
marginRight: ((insets === null || insets === void 0 ? void 0 : insets.right) ?? 0) + 16
} : null], [insets]);
const offset = useMemo(() => ({
closed: closed + KEYBOARD_TOOLBAR_HEIGHT,
opened: opened + OPENED_OFFSET
}), [closed, opened]);
let backgroundElement = null;
let arrowsElement = null;
let contentContainer = null;
let doneElement = null;
if (children) {
let prevChild = null;
let nextChild = null;
let contentChild = null;
let doneChild = null;
let backgroundChild = null;
React.Children.forEach(children, child => {
if (! /*#__PURE__*/React.isValidElement(child)) {
return;
}
const type = child.type;
if (type === Background) {
backgroundChild = child;
} else if (type === Content) {
contentChild = child;
} else if (type === Prev) {
prevChild = child;
} else if (type === Next) {
nextChild = child;
} else if (type === Done) {
doneChild = child;
}
});
backgroundElement = backgroundChild;
doneElement = doneChild;
arrowsElement = prevChild || nextChild ? /*#__PURE__*/React.createElement(View, {
style: styles.arrows
}, prevChild, nextChild) : null;
contentContainer = contentChild ?? /*#__PURE__*/React.createElement(Content, null, contentChild);
} else {
backgroundElement = blur;
arrowsElement = showArrows ? /*#__PURE__*/React.createElement(View, {
style: styles.arrows
}, /*#__PURE__*/React.createElement(Prev, {
button: buttonContainer,
icon: iconContainer,
onPress: onPrevCallback
}), /*#__PURE__*/React.createElement(Next, {
button: buttonContainer,
icon: iconContainer,
onPress: onNextCallback
})) : null;
contentContainer = /*#__PURE__*/React.createElement(Content, null, content);
doneElement = doneText ? /*#__PURE__*/React.createElement(Done, {
button: buttonContainer,
text: doneText,
onPress: onDoneCallback
}) : null;
}
const contextValue = useMemo(() => ({
theme,
isPrevDisabled,
isNextDisabled
}), [theme, isPrevDisabled, isNextDisabled]);
return /*#__PURE__*/React.createElement(ToolbarContext.Provider, {
value: contextValue
}, /*#__PURE__*/React.createElement(KeyboardStickyView, {
enabled: enabled,
offset: offset,
style: containerStyle
}, /*#__PURE__*/React.createElement(View, _extends({}, rest, {
style: toolbarStyle,
testID: TEST_ID_KEYBOARD_TOOLBAR
}), backgroundElement, arrowsElement, contentContainer, doneElement)));
};
const styles = StyleSheet.create({
toolbar: {
position: "absolute",
bottom: 0,
alignItems: "center",
width: "100%",
flexDirection: "row",
height: KEYBOARD_TOOLBAR_HEIGHT
},
arrows: {
flexDirection: "row",
paddingLeft: 8
},
floating: {
alignSelf: "center",
borderRadius: 20,
overflow: "hidden"
}
});
KeyboardToolbar.Background = Background;
KeyboardToolbar.Content = Content;
KeyboardToolbar.Prev = Prev;
KeyboardToolbar.Next = Next;
KeyboardToolbar.Done = Done;
export { colors as DefaultKeyboardToolbarTheme };
export default KeyboardToolbar;
//# sourceMappingURL=index.js.map