react-native-surveys/Forms/components/Toast/Toast.js

Build your own forms, surveys and polls for your React Native apps.

import React, { useEffect } from "react";
import { View, StyleSheet, TouchableOpacity, Text } from "react-native";
import { colors } from "../../theme";
import { CloseIcon, ToastError } from "../../assets/icons";

const callAll = (...fns) => (...args) => fns.forEach(fn => fn && fn(...args));

export const Toast = props => {
  const { children, variant, onClose, action, removable, id, duration } = props;

  const onActionClick = actionProp => {
    if (actionProp && actionProp.closeOnClick && onClose) {
      return callAll(actionProp.handler, onClose);
    }

    return action.handler;
  };

  useEffect(() => {
    if (duration) {
      setTimeout(onClose, duration);
    }
  });
  let variantStyle = {};

  switch (variant) {
    case "success":
      variantStyle.backgroundColor = colors.toastSuccess;
      break;

    case "warning":
      variantStyle.backgroundColor = colors.toastWarning;
      break;

    case "error":
      variantStyle.backgroundColor = colors.toastError;
      break;

    case "info":
      variantStyle.backgroundColor = colors.toastInfo;
      break;

    default:
      variantStyle.backgroundColor = colors.white;
  }

  return React.createElement(
    View,
    {
      style: [variantStyle, styles.container],
      id: id
    },
    React.createElement(
      View,
      {
        style: styles.icon
      },
      React.createElement(ToastError, {
        size: 20
      })
    ),
    React.createElement(
      Text,
      {
        style: styles.toastContent
      },
      children
    ),
    (action || removable) &&
      React.createElement(
        View,
        {
          style: styles.toastAction
        },
        action &&
          action.label &&
          action.handler &&
          React.createElement(
            TouchableOpacity,
            {
              style: styles.customAction,
              onPress: onActionClick(action)
            },
            action.label
          ),
        removable &&
          React.createElement(
            TouchableOpacity,
            {
              "aria-label": "Close toast",
              style: styles.close,
              onPress: onClose
            },
            React.createElement(CloseIcon, {
              size: 18,
              white: true
            })
          )
      )
  );
};
const styles = StyleSheet.create({
  container: {
    display: "flex",
    flexDirection: "row",
    alignItems: "flex-start",
    width: 320,
    paddingVertical: 10,
    paddingHorizontal: 12,
    borderRadius: 6
  },
  close: {
    display: "flex",
    alignItems: "center",
    marginLeft: 16
  },
  toastAction: {
    marginLeft: "auto",
    display: "flex",
    alignItems: "center"
  },
  customAction: {
    color: colors.white,
    backgroundColor: "transparent",
    marginLeft: 16,
    fontWeight: "bold",
    padding: 0,
    lineHeight: 20
  },
  toastContent: {
    color: colors.white,
    fontSize: 15,
    fontWeight: "bold"
  },
  icon: {
    paddingRight: 12,
    display: "flex",
    alignItems: "center"
  }
});