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

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useToast = exports.default = exports.ToastProvider = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
var _Icon = _interopRequireDefault(require("../../components/Icon"));
var _Text = _interopRequireDefault(require("../../components/Text"));
var _createStyleSheet = _interopRequireDefault(require("../../styles/createStyleSheet"));
var _useUIKitTheme = _interopRequireDefault(require("../../theme/useUIKitTheme"));
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); }
const ToastContext = /*#__PURE__*/(0, _react.createContext)(null);
const useOpacity = () => {
  const opacity = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
  const transition = value => {
    _reactNative.Animated.timing(opacity, {
      toValue: value,
      duration: 500,
      useNativeDriver: true
    }).start();
  };
  return {
    opacity,
    show: () => transition(1),
    hide: () => transition(0)
  };
};
const Toast = ({
  visible,
  type,
  children,
  top,
  bottom
}) => {
  const {
    colors,
    select,
    palette
  } = (0, _useUIKitTheme.default)();
  const {
    opacity,
    show,
    hide
  } = useOpacity();
  const color = (0, _react.useMemo)(() => {
    if (type === 'error') {
      return select({
        dark: palette.error300,
        light: palette.error200
      });
    }
    if (type === 'success') {
      return select({
        dark: palette.secondary300,
        light: palette.secondary200
      });
    }
    return 'transparent';
  }, [type, select]);
  const backgroundColor = (0, _react.useMemo)(() => {
    return select({
      light: 'rgba(0,0,0,0.64)',
      dark: 'rgba(255,255,255,0.64)'
    });
  }, [select]);
  (0, _react.useEffect)(() => {
    visible ? show() : hide();
  }, [visible]);
  return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
    pointerEvents: 'none',
    style: [styles.toast, {
      opacity,
      top,
      bottom,
      backgroundColor
    }]
  }, type !== 'normal' && /*#__PURE__*/_react.default.createElement(_Icon.default, {
    icon: type === 'success' ? 'done' : 'error',
    color: color,
    containerStyle: styles.icon
  }), /*#__PURE__*/_react.default.createElement(_Text.default, {
    color: colors.onBackgroundReverse01,
    body3: true,
    numberOfLines: 2,
    style: styles.text
  }, children));
};
const VISIBLE_MS = 3000;
const ToastProvider = ({
  children,
  dismissTimeout = VISIBLE_MS
}) => {
  const [state, setState] = (0, _react.useState)({
    visible: false,
    type: 'error',
    text: ''
  });
  const {
    bottom
  } = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
  (0, _react.useEffect)(() => {
    if (!state.visible) return;
    const hideTimeout = setTimeout(() => {
      setState(prev => ({
        ...prev,
        visible: false
      }));
    }, dismissTimeout);
    return () => clearTimeout(hideTimeout);
  });
  return /*#__PURE__*/_react.default.createElement(ToastContext.Provider, {
    value: {
      show: (text, type = 'normal') => text && setState({
        text,
        type,
        visible: true
      })
    }
  }, children, /*#__PURE__*/_react.default.createElement(_reactNative.KeyboardAvoidingView, {
    behavior: _reactNative.Platform.OS === 'ios' ? 'position' : undefined,
    keyboardVerticalOffset: -bottom,
    pointerEvents: 'none'
  }, /*#__PURE__*/_react.default.createElement(Toast, {
    type: state.type,
    visible: state.visible,
    bottom: bottom + styles.toastPosition.bottom
  }, state.text)));
};
exports.ToastProvider = ToastProvider;
const useToast = () => {
  const context = (0, _react.useContext)(ToastContext);
  if (!context) throw new Error('ToastContext is not provided, wrap your app with ToastProvider');
  return context;
};
exports.useToast = useToast;
const styles = (0, _createStyleSheet.default)({
  toast: {
    position: 'absolute',
    height: 48,
    paddingHorizontal: 12,
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'center',
    borderRadius: 24,
    flexDirection: 'row'
  },
  icon: {
    marginEnd: 4
  },
  text: {
    maxWidth: 240,
    paddingHorizontal: 4
  },
  toastPosition: {
    bottom: 60
  }
});
var _default = exports.default = Toast;
//# sourceMappingURL=index.js.map