react-native-keyboard-controller
Version:
Keyboard manager which works in identical way on both iOS and Android
176 lines (174 loc) • 7 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 _module = require("../../module");
var _useColorScheme = _interopRequireDefault(require("../hooks/useColorScheme"));
var _KeyboardStickyView = _interopRequireDefault(require("../KeyboardStickyView"));
var _Arrow = _interopRequireDefault(require("./Arrow"));
var _Button = _interopRequireDefault(require("./Button"));
var _colors = require("./colors");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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); }
const TEST_ID_KEYBOARD_TOOLBAR = "keyboard.toolbar";
const TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS = `${TEST_ID_KEYBOARD_TOOLBAR}.previous`;
const TEST_ID_KEYBOARD_TOOLBAR_NEXT = `${TEST_ID_KEYBOARD_TOOLBAR}.next`;
const TEST_ID_KEYBOARD_TOOLBAR_CONTENT = `${TEST_ID_KEYBOARD_TOOLBAR}.content`;
const TEST_ID_KEYBOARD_TOOLBAR_DONE = `${TEST_ID_KEYBOARD_TOOLBAR}.done`;
const KEYBOARD_TOOLBAR_HEIGHT = 42;
const DEFAULT_OPACITY = "FF";
/**
* `KeyboardToolbar` is a component that is shown above the keyboard with `Prev`/`Next` and
* `Done` buttons.
*/
const KeyboardToolbar = ({
content,
theme = _colors.colors,
doneText = "Done",
button,
icon,
showArrows = true,
onNextCallback,
onPrevCallback,
onDoneCallback,
blur = null,
opacity = DEFAULT_OPACITY,
offset: {
closed = 0,
opened = 0
} = {},
enabled = true,
insets,
...rest
}) => {
const colorScheme = (0, _useColorScheme.default)();
const [inputs, setInputs] = (0, _react.useState)({
current: 0,
count: 0
});
const isPrevDisabled = inputs.current === 0;
const isNextDisabled = inputs.current === inputs.count - 1;
(0, _react.useEffect)(() => {
const subscription = _bindings.FocusedInputEvents.addListener("focusDidSet", e => {
setInputs(e);
});
return subscription.remove;
}, []);
const doneStyle = (0, _react.useMemo)(() => [styles.doneButton, {
color: theme[colorScheme].primary
}], [colorScheme, theme]);
const toolbarStyle = (0, _react.useMemo)(() => [styles.toolbar, {
backgroundColor: `${theme[colorScheme].background}${opacity}`
}, {
paddingLeft: insets === null || insets === void 0 ? void 0 : insets.left,
paddingRight: insets === null || insets === void 0 ? void 0 : insets.right
}], [colorScheme, opacity, theme, insets]);
const offset = (0, _react.useMemo)(() => ({
closed: closed + KEYBOARD_TOOLBAR_HEIGHT,
opened
}), [closed, opened]);
const ButtonContainer = button || _Button.default;
const IconContainer = icon || _Arrow.default;
const onPressNext = (0, _react.useCallback)(event => {
onNextCallback === null || onNextCallback === void 0 || onNextCallback(event);
if (!event.isDefaultPrevented()) {
_module.KeyboardController.setFocusTo("next");
}
}, [onNextCallback]);
const onPressPrev = (0, _react.useCallback)(event => {
onPrevCallback === null || onPrevCallback === void 0 || onPrevCallback(event);
if (!event.isDefaultPrevented()) {
_module.KeyboardController.setFocusTo("prev");
}
}, [onPrevCallback]);
const onPressDone = (0, _react.useCallback)(event => {
onDoneCallback === null || onDoneCallback === void 0 || onDoneCallback(event);
if (!event.isDefaultPrevented()) {
_module.KeyboardController.dismiss();
}
}, [onDoneCallback]);
return /*#__PURE__*/_react.default.createElement(_KeyboardStickyView.default, {
enabled: enabled,
offset: offset
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({}, rest, {
style: toolbarStyle,
testID: TEST_ID_KEYBOARD_TOOLBAR
}), blur, showArrows && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.arrows
}, /*#__PURE__*/_react.default.createElement(ButtonContainer, {
accessibilityHint: "Moves focus to the previous field",
accessibilityLabel: "Previous",
disabled: isPrevDisabled,
testID: TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS,
theme: theme,
onPress: onPressPrev
}, /*#__PURE__*/_react.default.createElement(IconContainer, {
disabled: isPrevDisabled,
theme: theme,
type: "prev"
})), /*#__PURE__*/_react.default.createElement(ButtonContainer, {
accessibilityHint: "Moves focus to the next field",
accessibilityLabel: "Next",
disabled: isNextDisabled,
testID: TEST_ID_KEYBOARD_TOOLBAR_NEXT,
theme: theme,
onPress: onPressNext
}, /*#__PURE__*/_react.default.createElement(IconContainer, {
disabled: isNextDisabled,
theme: theme,
type: "next"
}))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.flex,
testID: TEST_ID_KEYBOARD_TOOLBAR_CONTENT
}, content), doneText && /*#__PURE__*/_react.default.createElement(ButtonContainer, {
accessibilityHint: "Closes the keyboard",
accessibilityLabel: "Done",
rippleRadius: 28,
style: styles.doneButtonContainer,
testID: TEST_ID_KEYBOARD_TOOLBAR_DONE,
theme: theme,
onPress: onPressDone
}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
maxFontSizeMultiplier: 1.3,
style: doneStyle
}, doneText))));
};
const styles = _reactNative.StyleSheet.create({
flex: {
flex: 1
},
toolbar: {
position: "absolute",
bottom: 0,
alignItems: "center",
width: "100%",
flexDirection: "row",
height: KEYBOARD_TOOLBAR_HEIGHT
},
arrows: {
flexDirection: "row",
paddingLeft: 8
},
doneButton: {
fontWeight: "600",
fontSize: 15
},
doneButtonContainer: {
marginRight: 16,
marginLeft: 8
}
});
var _default = exports.default = KeyboardToolbar;
//# sourceMappingURL=index.js.map