@crossed/ui
Version:
A universal & performant styling library for React Native, Next.js & React
234 lines (233 loc) • 7.62 kB
JavaScript
"use client";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Toast_exports = {};
__export(Toast_exports, {
Toast: () => Toast,
ToastDescription: () => ToastDescription,
ToastIcon: () => ToastIcon,
ToastPreset: () => ToastPreset,
ToastProgress: () => ToastProgress,
ToastTitle: () => ToastTitle
});
module.exports = __toCommonJS(Toast_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_core = require("@crossed/core");
var import_styled = require("@crossed/styled");
var import_react = require("react");
var import_layout = require("../layout");
var import_buttons = require("../buttons");
var import_react_native_reanimated = __toESM(require("react-native-reanimated"));
var import_Banner = require("./Banner");
var import_flex = require("../styles/flex");
const toastStyles = (0, import_styled.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 = (0, import_styled.createStyles)(
() => ({
container: {
base: {
borderWidth: 0
},
media: {
xs: {},
md: {
flexDirection: "column",
maxWidth: 538
}
},
variants: {}
}
})
);
const progressBarBackground = (0, import_styled.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__ */ (0, import_jsx_runtime.jsx)(
import_Banner.Banner,
{
status,
alignSelf: "flex-end",
space: "xs",
...props,
style: (0, import_styled.composeStyles)(toastStyles.container, props.style),
children
}
);
};
const Preset = ({
status,
title,
description,
onClose,
duration,
onDurationEnd,
...props
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
Toast,
{
status,
...props,
style: (0, import_styled.composeStyles)(toastPresetStyles.container, props.style),
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_layout.XBox, { space: "xs", justifyContent: "between", style: import_flex.shrinkStyles.on, children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_layout.XBox, { space: "xs", style: import_flex.shrinkStyles.on, children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Toast.Icon, {}),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_layout.YBox, { alignSelf: "center", style: import_flex.shrinkStyles.on, children: [
title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Toast.Title, { children: title }),
description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Toast.Description, { children: description })
] })
] }),
!!onClose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_buttons.CloseButton,
{
onPress: onClose,
style: (0, import_styled.inlineStyle)(() => ({
base: { width: 20, height: 20, alignSelf: "flex-start" }
}))
}
)
] }),
!!duration && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Toast.Progress, { duration, onDurationEnd })
]
}
);
const Icon = ({
style
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Banner.Banner.Icon, { style });
};
const Title = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Banner.Banner.Title, { ...props });
};
const Description = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Banner.Banner.Description, { ...props });
};
const Progress = ({ duration = 4e3, onDurationEnd }) => {
const start = (0, import_react_native_reanimated.useSharedValue)(0);
const { status } = (0, import_react.useContext)(import_Banner.bannerContext);
const animatedStyle = (0, import_react_native_reanimated.useAnimatedStyle)(() => {
return {
transform: [
{
translateX: (0, import_react_native_reanimated.withTiming)(-1 * start.value, {
duration,
easing: import_react_native_reanimated.Easing.linear
})
}
]
};
}, [start]);
setTimeout(() => {
onDurationEnd == null ? void 0 : onDurationEnd();
}, duration);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_layout.Box,
{
style: (0, import_styled.inlineStyle)(() => ({
base: { overflow: "hidden", height: 5, width: "100%" }
})),
onLayout: ({ nativeEvent: { layout } }) => {
start.value = layout.width;
},
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_native_reanimated.default.View,
{
style: [
animatedStyle,
(0, import_styled.composeStyles)(
progressBarBackground[status],
(0, import_styled.inlineStyle)(() => ({
base: {
position: "absolute",
top: 0,
bottom: 0,
left: 0,
right: 0
}
}))
).style().style
]
}
)
}
);
};
const Toast = (0, import_core.withStaticProperties)(Container, {
Icon,
Title,
Description,
Preset,
Progress
});
const {
Icon: ToastIcon,
Title: ToastTitle,
Description: ToastDescription,
Progress: ToastProgress,
Preset: ToastPreset
} = Toast;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Toast,
ToastDescription,
ToastIcon,
ToastPreset,
ToastProgress,
ToastTitle
});
//# sourceMappingURL=Toast.js.map