@sendbird/uikit-react-native-foundation/lib/commonjs/ui/Prompt/index.js

A foundational UI kit for building chat-enabled React Native apps.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _uikitUtils = require("@sendbird/uikit-utils");
var _Modal = _interopRequireDefault(require("../../components/Modal"));
var _Text = _interopRequireDefault(require("../../components/Text"));
var _TextInput = _interopRequireDefault(require("../../components/TextInput"));
var _createStyleSheet = _interopRequireDefault(require("../../styles/createStyleSheet"));
var _useHeaderStyle = _interopRequireDefault(require("../../styles/useHeaderStyle"));
var _useUIKitTheme = _interopRequireDefault(require("../../theme/useUIKitTheme"));
var _Button = _interopRequireDefault(require("../Button"));
var _DialogBox = _interopRequireDefault(require("../Dialog/DialogBox"));
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; }
const Prompt = ({
  onDismiss,
  visible,
  onHide,
  autoFocus = true,
  title,
  defaultValue = '',
  placeholder = 'Enter',
  onSubmit = _uikitUtils.NOOP,
  onCancel = _uikitUtils.NOOP,
  submitLabel = 'Submit',
  cancelLabel = 'Cancel'
}) => {
  const {
    statusBarTranslucent
  } = (0, _useHeaderStyle.default)();
  const {
    colors
  } = (0, _useUIKitTheme.default)();
  const inputRef = (0, _react.useRef)(null);
  const {
    width,
    height
  } = (0, _reactNative.useWindowDimensions)();
  const buttons = [{
    text: cancelLabel,
    onPress: onCancel
  }, {
    text: submitLabel,
    onPress: () => onSubmit(text)
  }];
  const [text, setText] = (0, _react.useState)(defaultValue);

  // FIXME: autoFocus trick with modal
  // Android
  // - InputProps.autoFocus is not trigger keyboard appearing.
  // - InputRef.focus() is trigger keyboard appearing, but position of keyboard selection is always the start of text.
  // iOS
  // - InputProps.autoFocus is trigger weird UI behavior on landscape mode.
  (0, _react.useEffect)(() => {
    if (autoFocus && visible) {
      setTimeout(() => {
        var _inputRef$current, _inputRef$current2;
        if (_reactNative.Platform.OS === 'android') (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.blur();
        (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.focus();
      }, 250);
    }
  }, [autoFocus, visible, `${width}-${height}`]);
  return /*#__PURE__*/_react.default.createElement(_Modal.default, {
    enableKeyboardAvoid: true,
    disableBackgroundClose: true,
    onClose: onHide,
    onDismiss: () => {
      setText('');
      onDismiss === null || onDismiss === void 0 || onDismiss();
    },
    statusBarTranslucent: statusBarTranslucent,
    visible: visible,
    backgroundStyle: {
      alignItems: 'center',
      justifyContent: 'center'
    }
  }, /*#__PURE__*/_react.default.createElement(_DialogBox.default, {
    style: styles.container
  }, Boolean(title) && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: styles.titleContainer
  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
    h1: true,
    color: colors.ui.dialog.default.none.text,
    numberOfLines: 1
  }, title)), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: styles.inputContainer
  }, /*#__PURE__*/_react.default.createElement(_TextInput.default, {
    autoFocus: autoFocus && _reactNative.Platform.OS === 'android',
    ref: inputRef,
    placeholder: placeholder,
    variant: 'underline',
    value: text,
    onChangeText: setText,
    style: {
      paddingStart: 0,
      paddingEnd: 0,
      paddingTop: 10,
      paddingBottom: 10
    }
  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: styles.buttonContainer
  }, buttons.map(({
    text,
    onPress
  }, index) => {
    return /*#__PURE__*/_react.default.createElement(_Button.default, {
      key: text + index,
      variant: 'text',
      style: styles.button,
      contentColor: colors.ui.dialog.default.none.highlight,
      onPress: () => {
        _reactNative.Keyboard.dismiss();
        try {
          onPress === null || onPress === void 0 || onPress();
        } finally {
          onHide();
        }
      }
    }, text);
  }))));
};
const styles = (0, _createStyleSheet.default)({
  container: {
    paddingTop: 8
  },
  titleContainer: {
    marginBottom: 12,
    paddingVertical: 12,
    paddingHorizontal: 24,
    alignItems: 'flex-start'
  },
  inputContainer: {
    paddingHorizontal: 24,
    marginBottom: 12
  },
  buttonContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-end',
    padding: 12
  },
  button: {
    marginStart: 8
  }
});
var _default = exports.default = Prompt;
//# sourceMappingURL=index.js.map