ag-common 0.0.666 → 0.0.668

package/dist/ui/components/Toast/base.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
-import type { IToastInt, IToastProviderOptions, TAddToast } from './types';
+import type { IVarStyles } from '../../styles/common';
+import type { IToastInt, IToastProviderOptions, TAddToast, TAddToastDetailed } from './types';
 export declare const ToastContext: React.Context<{
     addToast: TAddToast;
+    addToastDetailed: TAddToastDetailed;
 }>;
-export declare const Toast: ({ toast, close, providerOptions, }: {
+export declare const Toast: ({ toast, close, style, }: {
     toast: IToastInt;
-    providerOptions: IToastProviderOptions;
+    style: IVarStyles;
     close: (s: string) => void;
 }) => React.JSX.Element;
 export declare const ToastProvider: ({ children, providerOptions, }: {

package/dist/ui/components/Toast/base.js

@@ -32,6 +32,9 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = __importStar(require("react"));
 const random_1 = require("../../../common/helpers/random");
 const Warning_1 = require("../../icons/Warning");
+const common_1 = require("../../styles/common");
+const FlexColumn_1 = require("../FlexColumn");
+const FlexRow_1 = require("../FlexRow");
 const ProgressBar_1 = require("../ProgressBar");
 const Cross_1 = require("./Cross");
 const Tick_1 = require("./Tick");
@@ -42,6 +45,11 @@ const ToastContainerStyle = styled_1.default.div `
   right: 0;
   margin: 0.5rem;
   z-index: 10000;
+
+  display: flex;
+  flex-flow: column;
+  align-items: flex-end;
+  max-width: 50vw;
 `;
 const ToastStyle = styled_1.default.div `
   display: flex;
@@ -49,19 +57,13 @@ const ToastStyle = styled_1.default.div `
   align-items: center;
   padding: 0.5rem;
   position: relative;
-  color: white;
   font-size: 1.2rem;
   &:not(:last-of-type) {
     margin-bottom: 8px;
   }
 
+  border: solid 1px;
   border-radius: 6px;
-  background-color: rgba(0, 0, 0, 0.8);
-  color: white;
-  &[data-dark='false'] {
-    background-color: rgba(255, 255, 255, 0.8);
-    color: black;
-  }
 `;
 const CloseStyle = styled_1.default.span `
   position: absolute;
@@ -77,15 +79,9 @@ const CloseStyle = styled_1.default.span `
   justify-content: center;
   align-items: center;
   color: white;
+  z-index: 1;
   &:hover {
-    background-color: #333;
-  }
-
-  &[data-dark='false'] {
-    color: #000;
-    &:hover {
-      background-color: #eee;
-    }
+    background-color: var(--bg);
   }
 `;
 const Icon = styled_1.default.div `
@@ -97,15 +93,14 @@ const ProgressBarStyled = (0, styled_1.default)(ProgressBar_1.ProgressBar) `
   height: 0.75rem;
   margin-top: 0.5rem;
 `;
-const Toast = ({ toast, close, providerOptions, }) => {
-    var _a, _b, _c, _d, _e, _f;
-    const darkMode = (_a = providerOptions === null || providerOptions === void 0 ? void 0 : providerOptions.darkMode) !== null && _a !== void 0 ? _a : false;
+const Toast = ({ toast, close, style, }) => {
+    var _a, _b, _c, _d, _e;
     let closeMs;
-    if ((_b = toast.options) === null || _b === void 0 ? void 0 : _b.autoClose) {
-        closeMs = (_c = toast.options) === null || _c === void 0 ? void 0 : _c.autoClose;
+    if ((_a = toast.options) === null || _a === void 0 ? void 0 : _a.autoClose) {
+        closeMs = (_b = toast.options) === null || _b === void 0 ? void 0 : _b.autoClose;
     }
-    else if (((_d = toast.options) === null || _d === void 0 ? void 0 : _d.autoClose) === undefined) {
-        if (((_e = toast === null || toast === void 0 ? void 0 : toast.options) === null || _e === void 0 ? void 0 : _e.appearance) === 'success') {
+    else if (((_c = toast.options) === null || _c === void 0 ? void 0 : _c.autoClose) === undefined) {
+        if (((_d = toast === null || toast === void 0 ? void 0 : toast.options) === null || _d === void 0 ? void 0 : _d.appearance) === 'success') {
             closeMs = 5000;
         }
         else {
@@ -113,7 +108,7 @@ const Toast = ({ toast, close, providerOptions, }) => {
         }
     }
     let icon = react_1.default.createElement(Tick_1.Tick, null);
-    switch ((_f = toast === null || toast === void 0 ? void 0 : toast.options) === null || _f === void 0 ? void 0 : _f.appearance) {
+    switch ((_e = toast === null || toast === void 0 ? void 0 : toast.options) === null || _e === void 0 ? void 0 : _e.appearance) {
         case 'error': {
             icon = react_1.default.createElement(Cross_1.Cross, null);
             break;
@@ -131,24 +126,43 @@ const Toast = ({ toast, close, providerOptions, }) => {
         return () => clearTimeout(timeout);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return (react_1.default.createElement(ToastStyle, { "data-dark": darkMode },
-        react_1.default.createElement(CloseStyle, { "data-dark": darkMode, onClick: () => close(toast.id) }, "\u00D7"),
-        react_1.default.createElement(Icon, null, icon),
-        toast.message,
+    if (toast.type === 'standard') {
+        const st = { color: style.color, '--bg': style.borderColor };
+        return (react_1.default.createElement(ToastStyle, { style: style },
+            react_1.default.createElement(CloseStyle, { onClick: () => close(toast.id), style: st }, "\u00D7"),
+            react_1.default.createElement(Icon, { style: { fill: style.color } }, icon),
+            toast.message,
+            closeMs !== undefined && (react_1.default.createElement(ProgressBarStyled, { max: 100, min: 0, dotPercentages: null, transitionToMs: closeMs }))));
+    }
+    const st = { color: style.color, '--bg': style.borderColor };
+    return (react_1.default.createElement(ToastStyle, { style: style },
+        react_1.default.createElement(CloseStyle, { onClick: () => close(toast.id), style: st }, "\u00D7"),
+        react_1.default.createElement(FlexRow_1.FlexRow, { noWrap: true, center: true },
+            toast.icon === undefined && react_1.default.createElement(Icon, null, icon),
+            toast.icon,
+            react_1.default.createElement(FlexColumn_1.FlexColumn, { style: { marginLeft: toast.icon === null ? '0' : '0.5rem' } },
+                react_1.default.createElement("b", null, toast.title),
+                toast.content)),
         closeMs !== undefined && (react_1.default.createElement(ProgressBarStyled, { max: 100, min: 0, dotPercentages: null, transitionToMs: closeMs }))));
 };
 exports.Toast = Toast;
 const ToastProvider = ({ children, providerOptions, }) => {
     const [toasts, setToasts] = (0, react_1.useState)([]);
     const addToast = (message, options) => setToasts((currentToasts) => [
-        ...currentToasts.filter((ct) => ct.message !== message ||
+        ...currentToasts.filter((ct) => ct.type === 'detailed' ||
+            ct.message !== message ||
             JSON.stringify(ct.options) !== JSON.stringify(options)),
-        { id: (0, random_1.random)(10000).toString(), message, options },
+        { id: (0, random_1.random)(10000).toString(), message, options, type: 'standard' },
+    ]);
+    const addToastDetailed = (p, options) => setToasts((currentToasts) => [
+        ...currentToasts,
+        Object.assign(Object.assign({ id: (0, random_1.random)(10000).toString() }, p), { options, type: 'detailed' }),
     ]);
     const close = (id) => setToasts((currentToasts) => currentToasts.filter((toast) => toast.id !== id));
-    const contextValue = (0, react_1.useMemo)(() => ({ addToast }), []);
+    const contextValue = (0, react_1.useMemo)(() => ({ addToast, addToastDetailed }), []);
+    const style = (0, common_1.getVarStyles)(providerOptions === null || providerOptions === void 0 ? void 0 : providerOptions.style);
     return (react_1.default.createElement(exports.ToastContext.Provider, { value: contextValue },
         children,
-        react_1.default.createElement(ToastContainerStyle, null, toasts.map((toast) => (react_1.default.createElement(exports.Toast, { key: toast.id, toast: toast, close: close, providerOptions: providerOptions !== null && providerOptions !== void 0 ? providerOptions : {} }))))));
+        react_1.default.createElement(ToastContainerStyle, null, toasts.map((toast) => (react_1.default.createElement(exports.Toast, { key: toast.id, toast: toast, close: close, style: style }))))));
 };
 exports.ToastProvider = ToastProvider;

package/dist/ui/components/Toast/types.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+import type { IVarStyles } from '../../styles';
 export type TToastAppearance = 'error' | 'warning' | 'success';
 export type TToastOptions = {
     appearance: TToastAppearance;
@@ -5,14 +7,24 @@ export type TToastOptions = {
     autoClose?: number | null;
 } | undefined;
 export type TAddToast = (m: string, options?: TToastOptions) => void;
+export type TAddToastDetailed = (p: Omit<IToastDetailed, 'id' | 'type' | 'options'>, options?: TToastOptions) => void;
 export interface IToastProviderOptions {
-    /** default false */
-    darkMode?: boolean;
+    style?: Partial<IVarStyles>;
 }
-export interface IToast {
+interface IToastStandard {
+    type: 'standard';
     message: string;
     options?: TToastOptions;
+    id: string;
 }
-export interface IToastInt extends IToast {
+interface IToastDetailed {
+    type: 'detailed';
+    title?: string;
+    content: JSX.Element;
     id: string;
+    options?: TToastOptions;
+    /** if provided will show. undef will show default icon. null wont show */
+    icon?: JSX.Element | null;
 }
+export type IToastInt = IToastStandard | IToastDetailed;
+export {};

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.666",
+  "version": "0.0.668",
   "name": "ag-common",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",