amotify 0.1.31 → 0.1.32

package/dist/fn/Snackbar.js

@@ -1 +1,216 @@
-import{b as m,c,d as C}from"../chunk-VY3566IV.js";import{Fragment as O,jsx as o,jsxs as P}from"react/jsx-runtime";import{createElement as _}from"react";import{$$ as s,Config as S,useStore as p,$$fromRoot as w}from"../@utils/_";import{useState as f,useEffect as D}from"react";import x from"../atoms/Box";import y from"../atoms/Flex";import E from"../atoms/FAI";import R from"../mols/Row";import A from"./Button";import{SnackbarClasses as k}from"../@styles/componentClasses/_";const u={add:function(i){return p.get("Snackbar-"+S.get().sessionUID).add(i),this},remove:function(i){return p.get("Snackbar-"+S.get().sessionUID).remove(i),this},Wrapper:()=>o(B.Wrapper,{})},B={Cell:i=>{let b=i,{snackID:l,secondsToClose:n=10,componentID:g=s.uuid.gen(),children:d,customChildren:e}=b,r=C(b,["snackID","secondsToClose","componentID","children","customChildren"]),[t]=f(g),[a,h]=f(!1);D(()=>{let v=w('[data-component-id="'+t+'"]');setTimeout(()=>{v.addClass(k("FadeIn"))},10),p.set({key:"Snackbar-"+l,value:{remove:()=>{v.addClass(k("FadeOut"))}}})},[]),D(()=>{s.interval.clear("Snackbar-"+t),a||setTimeout(()=>{s.interval.standBy("Snackbar-"+t,n*1e3,()=>{a||u.remove(l)})},100)},[a]);let I=o(O,{});return e?I=o(e,{close:()=>{u.remove(l)}}):I=P(R.Separate,{verticalAlign:"top",children:[o(x,{padding:["1/4",0],flexSizing:0,children:s.is.function(d)?o(d,{}):d}),o(A.Button.Clear.R,{color:"layer",backgroundColor:"lcOpLow",fontColor:"white",ssSphere:2.5,onClick:()=>{u.remove(l)},children:o(E.Times,{})})]}),o(x,c(m({className:k("Cell"),opacity:"trans",width:1,padding:"2/3",marginBottom:1,borderRadius:"1.tone.primary",fontColor:"white",boxShadow:"1.remark",backgroundColor:"dark",transition:"middle",componentID:t,onMouseOver:()=>{h(!0)},onMouseOut:()=>{h(!1)}},r),{children:I}))},Wrapper:()=>{let[i,l]=f(s.uuid.gen()),[n,g]=f([]);p.set({key:"Snackbar-"+S.get().sessionUID,value:{add:e=>{e.snackID=e.snackID||s.uuid.gen();let r=n.findIndex(t=>t.snackID==e.snackID);if(r==-1)n.unshift(c(m({},e),{snackID:e.snackID}));else{let t=[...n];t[r]=c(m({},e),{snackID:e.snackID}),n=t}l(s.uuid.gen())},remove:e=>{let r=p.get("Snackbar-"+e);r&&r.remove&&(r.remove(),setTimeout(()=>{let t=n.findIndex(a=>a.snackID==e);if(t!=-1){let a=[...n];a.splice(t,1),g(a)}},210))}}});let d=n.map(e=>_(B.Cell,c(m({},e),{key:e.snackID})));return o(y,{className:["AMOTIFY_be",k("Wrapper")].join(" "),position:"fixed",right:0,bottom:0,paddingLeft:0,paddingRight:1,paddingBottom:"safeAreaBottom",verticalAlign:"bottom",children:d,overflow:"auto",UnderBreakPointStyles:{left:0,paddingLeft:1,width:"auto"}})}};export{u as Snackbar,u as default};
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-JJ3PEWPN.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+import {
+  $$,
+  Config,
+  useStore,
+  $$fromRoot
+} from "../@utils/_";
+import {
+  useState,
+  useEffect
+} from "react";
+import Box from "../atoms/Box";
+import Flex from "../atoms/Flex";
+import FAI from "../atoms/FAI";
+import Row from "../mols/Row";
+import Button from "./Button";
+import { SnackbarClasses } from "../@styles/componentClasses/_";
+const Snackbar = {
+  add: function(params) {
+    useStore.get("Snackbar-" + Config.get().sessionUID).add(params);
+    return this;
+  },
+  remove: function(val_componentID) {
+    useStore.get("Snackbar-" + Config.get().sessionUID).remove(val_componentID);
+    return this;
+  },
+  Wrapper: () => {
+    return /* @__PURE__ */ jsx(Comps.Wrapper, {});
+  }
+};
+const Comps = {
+  Cell: (props) => {
+    let _a = props, {
+      snackID,
+      secondsToClose = 10,
+      componentID = $$.uuid.gen(),
+      children: Children,
+      customChildren: CustomChildren
+    } = _a, others = __objRest(_a, [
+      "snackID",
+      "secondsToClose",
+      "componentID",
+      "children",
+      "customChildren"
+    ]);
+    let [val_componentID] = useState(componentID);
+    let [val_mouseOn, set_mouseOn] = useState(false);
+    useEffect(() => {
+      let Wrapper = $$fromRoot('[data-component-id="' + val_componentID + '"]');
+      setTimeout(() => {
+        Wrapper.addClass(SnackbarClasses("FadeIn"));
+      }, 10);
+      useStore.set({
+        key: "Snackbar-" + snackID,
+        value: {
+          remove: () => {
+            Wrapper.addClass(SnackbarClasses("FadeOut"));
+          }
+        }
+      });
+    }, []);
+    useEffect(() => {
+      $$.interval.clear("Snackbar-" + val_componentID);
+      if (!val_mouseOn) {
+        setTimeout(() => {
+          $$.interval.standBy(
+            "Snackbar-" + val_componentID,
+            secondsToClose * 1e3,
+            () => {
+              if (!val_mouseOn)
+                Snackbar.remove(snackID);
+            }
+          );
+        }, 100);
+      }
+    }, [val_mouseOn]);
+    let Content = /* @__PURE__ */ jsx(Fragment, {});
+    if (CustomChildren) {
+      Content = /* @__PURE__ */ jsx(
+        CustomChildren,
+        {
+          close: () => {
+            Snackbar.remove(snackID);
+          }
+        }
+      );
+    } else {
+      Content = /* @__PURE__ */ jsxs(
+        Row.Separate,
+        {
+          verticalAlign: "top",
+          children: [
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                padding: ["1/4", 0],
+                flexSizing: 0,
+                children: $$.is.function(Children) ? /* @__PURE__ */ jsx(Children, {}) : Children
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button.Button.Clear.R,
+              {
+                color: "layer",
+                backgroundColor: "lcOpLow",
+                fontColor: "white",
+                ssSphere: 2.5,
+                onClick: () => {
+                  Snackbar.remove(snackID);
+                },
+                children: /* @__PURE__ */ jsx(FAI.Times, {})
+              }
+            )
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Box,
+      __spreadProps(__spreadValues({
+        className: SnackbarClasses("Cell"),
+        opacity: "trans",
+        width: 1,
+        padding: "2/3",
+        marginBottom: 1,
+        borderRadius: "1.tone.primary",
+        fontColor: "white",
+        boxShadow: "1.remark",
+        backgroundColor: "dark",
+        transition: "middle",
+        componentID: val_componentID,
+        onMouseOver: () => {
+          set_mouseOn(true);
+        },
+        onMouseOut: () => {
+          set_mouseOn(false);
+        }
+      }, others), {
+        children: Content
+      })
+    );
+  },
+  Wrapper: () => {
+    let [val_refresh, set_refresh] = useState($$.uuid.gen());
+    let [val_elements, set_elements] = useState([]);
+    useStore.set({
+      key: "Snackbar-" + Config.get().sessionUID,
+      value: {
+        add: (params) => {
+          params.snackID = params.snackID || $$.uuid.gen();
+          let findIndex = val_elements.findIndex((el) => el.snackID == params.snackID);
+          if (findIndex == -1) {
+            val_elements.unshift(__spreadProps(__spreadValues({}, params), {
+              snackID: params.snackID
+            }));
+          } else {
+            let newList = [...val_elements];
+            newList[findIndex] = __spreadProps(__spreadValues({}, params), {
+              snackID: params.snackID
+            });
+            val_elements = newList;
+          }
+          set_refresh($$.uuid.gen());
+        },
+        remove: (snackID) => {
+          let component = useStore.get("Snackbar-" + snackID);
+          if (component && component.remove) {
+            component.remove();
+            setTimeout(() => {
+              let findIndex = val_elements.findIndex((cell) => cell.snackID == snackID);
+              if (findIndex != -1) {
+                let newList = [...val_elements];
+                newList.splice(findIndex, 1);
+                set_elements(newList);
+              }
+            }, 210);
+          }
+        }
+      }
+    });
+    let Snackbars = val_elements.map((el) => /* @__PURE__ */ createElement(Comps.Cell, __spreadProps(__spreadValues({}, el), { key: el.snackID })));
+    return /* @__PURE__ */ jsx(
+      Flex,
+      {
+        className: [
+          "AMOTIFY_be",
+          SnackbarClasses("Wrapper")
+        ].join(" "),
+        position: "fixed",
+        right: 0,
+        bottom: 0,
+        paddingLeft: 0,
+        paddingRight: 1,
+        paddingBottom: "safeAreaBottom",
+        verticalAlign: "bottom",
+        children: Snackbars,
+        overflow: "auto",
+        UnderBreakPointStyles: {
+          left: 0,
+          paddingLeft: 1,
+          width: "auto"
+        }
+      }
+    );
+  }
+};
+export {
+  Snackbar,
+  Snackbar as default
+};