@crossed/ui/lib/module/feedback/Toast.js

A universal & performant styling library for React Native, Next.js & React

"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { withStaticProperties } from "@crossed/core";
import {
  composeStyles,
  createStyles,
  inlineStyle
} from "@crossed/styled";
import { useContext } from "react";
import { Box, YBox, XBox } from "../layout";
import { CloseButton } from "../buttons";
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withTiming,
  Easing
} from "react-native-reanimated";
import { Banner, bannerContext } from "./Banner";
import { shrinkStyles } from "../styles/flex";
const toastStyles = createStyles(
  (t) => ({
    container: {
      base: {
        padding: t.space.xs,
        borderRadius: 8
      },
      media: {
        xs: {
          paddingVertical: t.space.xs,
          paddingHorizontal: t.space.xs
        },
        md: {
          flexDirection: "column",
          alignItems: "flex-start",
          paddingVertical: t.space.xs,
          paddingHorizontal: t.space.xs
        }
      },
      web: {
        base: {
          boxShadow: "0px 1px 4px 0px #00000026"
        }
      },
      variants: {}
    }
  })
);
const toastPresetStyles = createStyles(
  () => ({
    container: {
      base: {
        borderWidth: 0
      },
      media: {
        xs: {},
        md: {
          flexDirection: "column",
          maxWidth: 538
        }
      },
      variants: {}
    }
  })
);
const progressBarBackground = createStyles((t) => ({
  success: { base: { backgroundColor: t.colors.success.primary } },
  error: { base: { backgroundColor: t.colors.error.primary } },
  info: { base: { backgroundColor: t.colors.info.primary } },
  warning: { base: { backgroundColor: t.colors.warning.primary } }
}));
const Container = ({ status = "info", children, ...props }) => {
  return /* @__PURE__ */ jsx(
    Banner,
    {
      status,
      alignSelf: "flex-end",
      space: "xs",
      ...props,
      style: composeStyles(toastStyles.container, props.style),
      children
    }
  );
};
const Preset = ({
  status,
  title,
  description,
  onClose,
  duration,
  onDurationEnd,
  ...props
}) => /* @__PURE__ */ jsxs(
  Toast,
  {
    status,
    ...props,
    style: composeStyles(toastPresetStyles.container, props.style),
    children: [
      /* @__PURE__ */ jsxs(XBox, { space: "xs", justifyContent: "between", style: shrinkStyles.on, children: [
        /* @__PURE__ */ jsxs(XBox, { space: "xs", style: shrinkStyles.on, children: [
          /* @__PURE__ */ jsx(Toast.Icon, {}),
          /* @__PURE__ */ jsxs(YBox, { alignSelf: "center", style: shrinkStyles.on, children: [
            title && /* @__PURE__ */ jsx(Toast.Title, { children: title }),
            description && /* @__PURE__ */ jsx(Toast.Description, { children: description })
          ] })
        ] }),
        !!onClose && /* @__PURE__ */ jsx(
          CloseButton,
          {
            onPress: onClose,
            style: inlineStyle(() => ({
              base: { width: 20, height: 20, alignSelf: "flex-start" }
            }))
          }
        )
      ] }),
      !!duration && /* @__PURE__ */ jsx(Toast.Progress, { duration, onDurationEnd })
    ]
  }
);
const Icon = ({
  style
}) => {
  return /* @__PURE__ */ jsx(Banner.Icon, { style });
};
const Title = (props) => {
  return /* @__PURE__ */ jsx(Banner.Title, { ...props });
};
const Description = (props) => {
  return /* @__PURE__ */ jsx(Banner.Description, { ...props });
};
const Progress = ({ duration = 4e3, onDurationEnd }) => {
  const start = useSharedValue(0);
  const { status } = useContext(bannerContext);
  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateX: withTiming(-1 * start.value, {
            duration,
            easing: Easing.linear
          })
        }
      ]
    };
  }, [start]);
  setTimeout(() => {
    onDurationEnd == null ? void 0 : onDurationEnd();
  }, duration);
  return /* @__PURE__ */ jsx(
    Box,
    {
      style: inlineStyle(() => ({
        base: { overflow: "hidden", height: 5, width: "100%" }
      })),
      onLayout: ({ nativeEvent: { layout } }) => {
        start.value = layout.width;
      },
      children: /* @__PURE__ */ jsx(
        Animated.View,
        {
          style: [
            animatedStyle,
            composeStyles(
              progressBarBackground[status],
              inlineStyle(() => ({
                base: {
                  position: "absolute",
                  top: 0,
                  bottom: 0,
                  left: 0,
                  right: 0
                }
              }))
            ).style().style
          ]
        }
      )
    }
  );
};
const Toast = withStaticProperties(Container, {
  Icon,
  Title,
  Description,
  Preset,
  Progress
});
const {
  Icon: ToastIcon,
  Title: ToastTitle,
  Description: ToastDescription,
  Progress: ToastProgress,
  Preset: ToastPreset
} = Toast;
export {
  Toast,
  ToastDescription,
  ToastIcon,
  ToastPreset,
  ToastProgress,
  ToastTitle
};
//# sourceMappingURL=Toast.js.map