react-native-keyboard-controller
Version:
Keyboard manager which works in identical way on both iOS and Android
186 lines (185 loc) • 7.66 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "DefaultKeyboardToolbarTheme", {
enumerable: true,
get: function () {
return _colors.colors;
}
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _bindings = require("../../bindings");
var _hooks = require("../../hooks");
var _KeyboardStickyView = _interopRequireDefault(require("../KeyboardStickyView"));
var _Arrow = _interopRequireDefault(require("./Arrow"));
var _Button = _interopRequireDefault(require("./Button"));
var _colors = require("./colors");
var _components = require("./compound/components");
var _context = require("./compound/context");
var _constants = require("./constants");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
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); }
/**
* `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.colors,
doneText = "Done",
button,
icon,
showArrows = true,
onNextCallback,
onPrevCallback,
onDoneCallback,
blur = null,
opacity = _constants.DEFAULT_OPACITY,
offset: {
closed = 0,
opened = 0
} = {},
enabled = true,
insets,
...rest
} = props;
const colorScheme = (0, _hooks.useKeyboardState)(state => state.appearance);
const [inputs, setInputs] = (0, _react.useState)({
current: 0,
count: 0
});
const isPrevDisabled = inputs.current === 0;
const isNextDisabled = inputs.current === inputs.count - 1;
const buttonContainer = button ?? _Button.default;
const iconContainer = icon ?? _Arrow.default;
(0, _react.useEffect)(() => {
const subscription = _bindings.FocusedInputEvents.addListener("focusDidSet", e => {
setInputs(e);
});
return subscription.remove;
}, []);
const toolbarStyle = (0, _react.useMemo)(() => [styles.toolbar, {
backgroundColor: `${theme[colorScheme].background}${opacity}`
}, !_constants.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, _constants.KEYBOARD_HAS_ROUNDED_CORNERS ? styles.floating : null], [colorScheme, opacity, theme, insets]);
const containerStyle = (0, _react.useMemo)(() => [_constants.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 = (0, _react.useMemo)(() => ({
closed: closed + _constants.KEYBOARD_TOOLBAR_HEIGHT,
opened: opened + _constants.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.default.Children.forEach(children, child => {
if (! /*#__PURE__*/_react.default.isValidElement(child)) {
return;
}
const type = child.type;
if (type === _components.Background) {
backgroundChild = child;
} else if (type === _components.Content) {
contentChild = child;
} else if (type === _components.Prev) {
prevChild = child;
} else if (type === _components.Next) {
nextChild = child;
} else if (type === _components.Done) {
doneChild = child;
}
});
backgroundElement = backgroundChild;
doneElement = doneChild;
arrowsElement = prevChild || nextChild ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.arrows
}, prevChild, nextChild) : null;
contentContainer = contentChild ?? /*#__PURE__*/_react.default.createElement(_components.Content, null, contentChild);
} else {
backgroundElement = blur;
arrowsElement = showArrows ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.arrows
}, /*#__PURE__*/_react.default.createElement(_components.Prev, {
button: buttonContainer,
icon: iconContainer,
onPress: onPrevCallback
}), /*#__PURE__*/_react.default.createElement(_components.Next, {
button: buttonContainer,
icon: iconContainer,
onPress: onNextCallback
})) : null;
contentContainer = /*#__PURE__*/_react.default.createElement(_components.Content, null, content);
doneElement = doneText ? /*#__PURE__*/_react.default.createElement(_components.Done, {
button: buttonContainer,
text: doneText,
onPress: onDoneCallback
}) : null;
}
const contextValue = (0, _react.useMemo)(() => ({
theme,
isPrevDisabled,
isNextDisabled
}), [theme, isPrevDisabled, isNextDisabled]);
return /*#__PURE__*/_react.default.createElement(_context.ToolbarContext.Provider, {
value: contextValue
}, /*#__PURE__*/_react.default.createElement(_KeyboardStickyView.default, {
enabled: enabled,
offset: offset,
style: containerStyle
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({}, rest, {
style: toolbarStyle,
testID: _constants.TEST_ID_KEYBOARD_TOOLBAR
}), backgroundElement, arrowsElement, contentContainer, doneElement)));
};
const styles = _reactNative.StyleSheet.create({
toolbar: {
position: "absolute",
bottom: 0,
alignItems: "center",
width: "100%",
flexDirection: "row",
height: _constants.KEYBOARD_TOOLBAR_HEIGHT
},
arrows: {
flexDirection: "row",
paddingLeft: 8
},
floating: {
alignSelf: "center",
borderRadius: 20,
overflow: "hidden"
}
});
KeyboardToolbar.Background = _components.Background;
KeyboardToolbar.Content = _components.Content;
KeyboardToolbar.Prev = _components.Prev;
KeyboardToolbar.Next = _components.Next;
KeyboardToolbar.Done = _components.Done;
var _default = exports.default = KeyboardToolbar;
//# sourceMappingURL=index.js.map