amotify 0.1.31 → 0.1.32

package/dist/fn/Input/Chips/Selector.js

@@ -1 +1,472 @@
-import{b as E,c as J,d as W,e as K}from"../../../chunk-VY3566IV.js";import{Fragment as j,jsx as n,jsxs as O}from"react/jsx-runtime";import{useState as I,useEffect as R,useRef as L}from"react";import{$$ as w,$$fromRoot as P,useStore as U}from"../../../@utils/_";import F from"../../../atoms/Box";import _ from"../../../atoms/FAI";import $ from"../../../atoms/Span";import H from"../../../mols/Column";import b from"../../../mols/Row";import V from"../../Button";import k from"../../Sheet";import G from"../../Loader/_";import Q from"../Text";import X from"../Parts";import{InputChipsClasses as Y}from"../../../@styles/componentClasses/_";const Z=e=>{let[y,r]=I("show"),[h,N]=I(""),[u]=I(w.uuid.gen()),[l,g]=I(e.options),[o,C]=I(l[0]||null),[S,x]=I(e.selected),[D,T]=I("init");R(()=>{U.set({key:e.selectorID,value:{updateOptions:t=>{g(t)},updateSelected:t=>{x(t)}}})},[]);const B=L(!1);R(()=>{B.current?k.reposition(e.selectorID):B.current=!0},[l]);const z=L(!1);R(()=>{z.current?(r("interlude"),C(l[0]||null),e.onDynamicSearch?(w.interval.clear(u+"-dynamicSearch"),w.interval.standBy(u+"-dynamicSearch",400,()=>K(void 0,null,function*(){let{options:t}=yield e.onDynamicSearch(h);g(t),r("show")}))):(w.interval.clear(u+"-staticSearch"),w.interval.standBy(u+"-staticSearch",400,()=>K(void 0,null,function*(){let t=new RegExp(h,"ig"),p=[];[...e.options].forEach(a=>{var c;!!(!h||((c=String(a.label))!=null?c:String(a.value)).match(t))&&p.push(a)}),g(p),r("show")})))):z.current=!0},[h]);const M=L(!1);R(()=>{M.current?e.onUpdated({values:S}):M.current=!0},[S]),R(()=>{w.scope(()=>{if(w.is.nullish(o)||D=="MouseEvent")return;let t=P("#"+u+"-Selector-Cell-Wrap");if(!t[0])return;let p=P('[data-chips-selector-cell="'+u+"-"+JSON.stringify((o==null?void 0:o.value)||"").replace(/\"/ig,"")+'"]');if(!p[0])return;let{top:a,height:v}=t.position(),{top:c,height:d}=p.position();if(a<=c&&c+d<=a+v)return;let i=t[0].scrollTop+(c-a);D=="ArrowDown"?i-=v-d-20:D=="ArrowUp"&&(i-=20),t[0].scrollTop=i})},[o]);let A=[];return y=="interlude"?A=[O(b.Center,{padding:2,gap:0,children:[n(G.Theme.R,{showInitial:!0}),n(F,{padding:[0,1],fontSize:"1.mini",fontColor:"4.thin",children:"\u691C\u7D22\u4E2D..."})]})]:A=[l.map((t,p)=>{let{value:a,label:v}=t,c=String(JSON.stringify(a)),d=S.findIndex(f=>JSON.stringify(f.value)==c),i=d!=-1,s=JSON.stringify((o==null?void 0:o.value)||"")==c,m={};return(i||s)&&(m={fontColor:"theme",isSemiBoldFont:!0}),s&&(m.backgroundColor="cloud"),i&&(m.backgroundColor="tcOpFew"),n(V.Button.Clear.R,J(E({borderRadius:"3.tone.tertiary",color:"cloud",padding:"1/3",tabIndex:-1,textAlign:"left","data-chips-selector-cell":u+"-"+c.replace(/\"/ig,""),isActive:i||s,isActiveStyles:m},m),{onMouseOver:()=>{T("MouseEvent"),C(t)},onClick:()=>{let f=[...S];i?f.splice(d,1):(f=[...f,t],e.limit&&f.length>e.limit&&f.shift()),x(f)},children:n(e.SelectorCellComponent,{isSelected:i,isFocused:s,value:a,label:v})}),p)})],O(j,{children:[O(H,{padding:"2/3",gap:"2/3",borderBottom:!0,children:[O(b.Separate,{children:[n(Q.Normal,{value:h,onUpdateValidValue:({value:t})=>{N(t)},id:e.selectorID+"-KeywordInput",padding:"2/3",placeholder:"\u691C\u7D22...",leftIcon:n(X.LeftIcon,{right:"2/3",fontSize:"1.mini",fontColor:"3.blur",children:n(_.Search,{})}),onKeyDown:t=>{let{key:p,metaKey:a,ctrlKey:v}=t,c=a||v;if(["ArrowDown","ArrowUp"].includes(p)){let d=+(p=="ArrowDown")*2-1;if(c){let i=l[d==1?l.length-1:0];C(i)}else{let i=l.findIndex(s=>JSON.stringify(s.value)==JSON.stringify((o==null?void 0:o.value)||""))+d;l[i]?C(l[i]):C(l[d==1?0:l.length-1]||null)}}else if(p=="Enter"){let d=S.findIndex(m=>JSON.stringify(m.value)==JSON.stringify((o==null?void 0:o.value)||"")),i=d!=-1,s=[...S];if(i)s.splice(d,1);else{let m=l.findIndex(f=>JSON.stringify(f.value)==JSON.stringify((o==null?void 0:o.value)||""));if(m==-1)return;s=[...s,l[m]],e.limit&&s.length>e.limit&&s.shift()}x(s)}T(p)}}),n(V.Button.Border.S,{marginRight:"1/3",ssSphere:2,backgroundColor:"cloud",borderRadius:"2.tone.secondary",onClick:()=>{k.close(e.selectorID)},children:n(_.Times,{})})]}),O(b.Separate,{children:[O(b.Left,{gap:"1/2",verticalAlign:"baseline",children:[n($,{fontColor:"theme",children:l.length}),n(F,{fontSize:"1.mini",fontColor:"3.blur",children:"\u4EF6\u306E\u30D2\u30C3\u30C8"})]}),n(b.Right,{children:e.limit?O($,{fontColor:"3.blur",fontSize:"1.mini",children:[n($,{fontSize:"3.paragraph",fontColor:"theme",isSemiBoldFont:!0,children:S.length})," / ",e.limit," \u4EF6"]}):null})]})]}),n(H,{gap:"1/4",padding:"1/2",overflow:"auto",freeCSS:{maxHeight:12*26,maxWidth:12*26},id:u+"-Selector-Cell-Wrap",className:Y("SelectorWrapper"),children:A}),e.bottomContent]})},q={openSelector:e=>{let T=e,{selectorID:y,options:r,selected:h,limit:N,bottomContent:u,onDynamicSearch:l,SelectorCellComponent:g,onUpdated:o,onClosed:C,parent:S}=T,x=W(T,["selectorID","options","selected","limit","bottomContent","onDynamicSearch","SelectorCellComponent","onUpdated","onClosed","parent"]),D=y;g=g||(B=>n(b.Left,{children:B.label})),k.open(J(E({parent:S,sheetID:D,type:"custom",gravityPoint:22,padding:[1,0],hold_state:!0,close_option:{aroundClick:!0,escapeKeyDown:!0}},x),{content:n(F,{borderRadius:"2.tone.secondary",backgroundColor:"1.layer.base",border:!0,boxShadow:"1.normal",overflow:"hidden",children:n(Z,{selectorID:y,options:r,limit:N,selected:h,onUpdated:o,SelectorCellComponent:g,bottomContent:u,onDynamicSearch:l},JSON.stringify(h))}),openAfter:()=>{P("#"+e.selectorID+"-KeywordInput").focus()},closeAfter:()=>{C()}}))},closeSelector:e=>{k.close(e)},updateOptions:(e,y)=>{let r=U.get(e);r&&r.updateOptions&&r.updateOptions(y)},updateSelected:(e,y)=>{let r=U.get(e);r&&r.updateSelected&&r.updateSelected(y)}};export{q as Selector,q as default};
+import {
+  __async,
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../../../chunk-JJ3PEWPN.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  useState,
+  useEffect,
+  useRef
+} from "react";
+import {
+  $$,
+  $$fromRoot,
+  useStore
+} from "../../../@utils/_";
+import Box from "../../../atoms/Box";
+import FAI from "../../../atoms/FAI";
+import Span from "../../../atoms/Span";
+import Column from "../../../mols/Column";
+import Row from "../../../mols/Row";
+import Button from "../../Button";
+import Sheet from "../../Sheet";
+import Loader from "../../Loader/_";
+import Text from "../Text";
+import Parts from "../Parts";
+import { InputChipsClasses } from "../../../@styles/componentClasses/_";
+const Component = (params) => {
+  let [val_status, set_status] = useState("show");
+  let [val_keyword, set_keyword] = useState("");
+  let [val_componentID] = useState($$.uuid.gen());
+  let [val_options, set_options] = useState(params.options);
+  let [val_focus, set_focus] = useState(val_options[0] || null);
+  let [val_selected, set_selected] = useState(params.selected);
+  let [val_keyEvent, set_keyEvent] = useState("init");
+  useEffect(() => {
+    useStore.set({
+      key: params.selectorID,
+      value: {
+        updateOptions: (options) => {
+          set_options(options);
+        },
+        updateSelected: (selected) => {
+          set_selected(selected);
+        }
+      }
+    });
+  }, []);
+  const mountedOptions = useRef(false);
+  useEffect(() => {
+    if (mountedOptions.current) {
+      Sheet.reposition(params.selectorID);
+    } else {
+      mountedOptions.current = true;
+    }
+  }, [val_options]);
+  const mountedKeyword = useRef(false);
+  useEffect(() => {
+    if (mountedKeyword.current) {
+      set_status("interlude");
+      set_focus(val_options[0] || null);
+      if (params.onDynamicSearch) {
+        $$.interval.clear(val_componentID + "-dynamicSearch");
+        $$.interval.standBy(
+          val_componentID + "-dynamicSearch",
+          400,
+          () => __async(void 0, null, function* () {
+            let {
+              options
+            } = yield params.onDynamicSearch(val_keyword);
+            set_options(options);
+            set_status("show");
+          })
+        );
+      } else {
+        $$.interval.clear(val_componentID + "-staticSearch");
+        $$.interval.standBy(
+          val_componentID + "-staticSearch",
+          400,
+          () => __async(void 0, null, function* () {
+            let regExp = new RegExp(val_keyword, "ig");
+            let newSelection = [];
+            [...params.options].forEach((o) => {
+              var _a;
+              let match = Boolean(!val_keyword || ((_a = String(o.label)) != null ? _a : String(o.value)).match(regExp));
+              if (match)
+                newSelection.push(o);
+            });
+            set_options(newSelection);
+            set_status("show");
+          })
+        );
+      }
+    } else {
+      mountedKeyword.current = true;
+    }
+  }, [val_keyword]);
+  const mountedSelected = useRef(false);
+  useEffect(() => {
+    if (mountedSelected.current) {
+      params.onUpdated({
+        values: val_selected
+      });
+    } else {
+      mountedSelected.current = true;
+    }
+  }, [val_selected]);
+  useEffect(() => {
+    $$.scope(() => {
+      if ($$.is.nullish(val_focus))
+        return;
+      if (val_keyEvent == "MouseEvent")
+        return;
+      let Wrapper = $$fromRoot("#" + val_componentID + "-Selector-Cell-Wrap");
+      if (!Wrapper[0])
+        return;
+      let focusCell = $$fromRoot('[data-chips-selector-cell="' + val_componentID + "-" + JSON.stringify((val_focus == null ? void 0 : val_focus.value) || "").replace(/\"/ig, "") + '"]');
+      if (!focusCell[0])
+        return;
+      let { top: pTop, height: pHeight } = Wrapper.position();
+      let { top: cTop, height: cHeight } = focusCell.position();
+      if (pTop <= cTop && cTop + cHeight <= pTop + pHeight)
+        return;
+      let scroll = Wrapper[0].scrollTop + (cTop - pTop);
+      if (val_keyEvent == "ArrowDown") {
+        scroll -= pHeight - cHeight - 20;
+      } else if (val_keyEvent == "ArrowUp") {
+        scroll -= 20;
+      }
+      Wrapper[0].scrollTop = scroll;
+    });
+  }, [val_focus]);
+  let List = [];
+  if (val_status == "interlude") {
+    List = [/* @__PURE__ */ jsxs(
+      Row.Center,
+      {
+        padding: 2,
+        gap: 0,
+        children: [
+          /* @__PURE__ */ jsx(
+            Loader.Theme.R,
+            {
+              showInitial: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              padding: [0, 1],
+              fontSize: "1.mini",
+              fontColor: "4.thin",
+              children: "\u691C\u7D22\u4E2D..."
+            }
+          )
+        ]
+      }
+    )];
+  } else {
+    List = [
+      val_options.map((option, index) => {
+        let {
+          value,
+          label
+        } = option;
+        let safeValue = String(JSON.stringify(value));
+        let findIndex = val_selected.findIndex((v) => JSON.stringify(v.value) == safeValue);
+        let isSelected = findIndex != -1;
+        let isFocused = JSON.stringify((val_focus == null ? void 0 : val_focus.value) || "") == safeValue;
+        let styles = {};
+        if (isSelected || isFocused) {
+          styles = {
+            fontColor: "theme",
+            isSemiBoldFont: true
+          };
+        }
+        if (isFocused)
+          styles.backgroundColor = "cloud";
+        if (isSelected)
+          styles.backgroundColor = "tcOpFew";
+        return /* @__PURE__ */ jsx(
+          Button.Button.Clear.R,
+          __spreadProps(__spreadValues({
+            borderRadius: "3.tone.tertiary",
+            color: "cloud",
+            padding: "1/3",
+            tabIndex: -1,
+            textAlign: "left",
+            "data-chips-selector-cell": val_componentID + "-" + safeValue.replace(/\"/ig, ""),
+            isActive: isSelected || isFocused,
+            isActiveStyles: styles
+          }, styles), {
+            onMouseOver: () => {
+              set_keyEvent("MouseEvent");
+              set_focus(option);
+            },
+            onClick: () => {
+              let newSelected = [...val_selected];
+              if (isSelected) {
+                newSelected.splice(findIndex, 1);
+              } else {
+                newSelected = [
+                  ...newSelected,
+                  option
+                ];
+                if (params.limit && newSelected.length > params.limit) {
+                  newSelected.shift();
+                }
+              }
+              set_selected(newSelected);
+            },
+            children: /* @__PURE__ */ jsx(
+              params.SelectorCellComponent,
+              {
+                isSelected,
+                isFocused,
+                value,
+                label
+              }
+            )
+          }),
+          index
+        );
+      })
+    ];
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Column,
+      {
+        padding: "2/3",
+        gap: "2/3",
+        borderBottom: true,
+        children: [
+          /* @__PURE__ */ jsxs(Row.Separate, { children: [
+            /* @__PURE__ */ jsx(
+              Text.Normal,
+              {
+                value: val_keyword,
+                onUpdateValidValue: ({ value }) => {
+                  set_keyword(value);
+                },
+                id: params.selectorID + "-KeywordInput",
+                padding: "2/3",
+                placeholder: "\u691C\u7D22...",
+                leftIcon: /* @__PURE__ */ jsx(
+                  Parts.LeftIcon,
+                  {
+                    right: "2/3",
+                    fontSize: "1.mini",
+                    fontColor: "3.blur",
+                    children: /* @__PURE__ */ jsx(FAI.Search, {})
+                  }
+                ),
+                onKeyDown: (event) => {
+                  let {
+                    key,
+                    metaKey,
+                    ctrlKey
+                  } = event;
+                  let auxKey = metaKey || ctrlKey;
+                  if (["ArrowDown", "ArrowUp"].includes(key)) {
+                    let dir = Number(key == "ArrowDown") * 2 - 1;
+                    if (auxKey) {
+                      let next = val_options[dir == 1 ? val_options.length - 1 : 0];
+                      set_focus(next);
+                    } else {
+                      let nextIndex = val_options.findIndex((v) => JSON.stringify(v.value) == JSON.stringify((val_focus == null ? void 0 : val_focus.value) || "")) + dir;
+                      if (val_options[nextIndex]) {
+                        set_focus(val_options[nextIndex]);
+                      } else {
+                        set_focus(val_options[dir == 1 ? 0 : val_options.length - 1] || null);
+                      }
+                    }
+                  } else if (key == "Enter") {
+                    let selectedIndex = val_selected.findIndex((v) => JSON.stringify(v.value) == JSON.stringify((val_focus == null ? void 0 : val_focus.value) || ""));
+                    let isSelected = selectedIndex != -1;
+                    let newSelected = [...val_selected];
+                    if (isSelected) {
+                      newSelected.splice(selectedIndex, 1);
+                    } else {
+                      let optionsIndex = val_options.findIndex((v) => JSON.stringify(v.value) == JSON.stringify((val_focus == null ? void 0 : val_focus.value) || ""));
+                      if (optionsIndex == -1)
+                        return;
+                      newSelected = [
+                        ...newSelected,
+                        val_options[optionsIndex]
+                      ];
+                      if (params.limit && newSelected.length > params.limit) {
+                        newSelected.shift();
+                      }
+                    }
+                    set_selected(newSelected);
+                  }
+                  set_keyEvent(key);
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button.Button.Border.S,
+              {
+                marginRight: "1/3",
+                ssSphere: 2,
+                backgroundColor: "cloud",
+                borderRadius: "2.tone.secondary",
+                onClick: () => {
+                  Sheet.close(params.selectorID);
+                },
+                children: /* @__PURE__ */ jsx(FAI.Times, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Row.Separate, { children: [
+            /* @__PURE__ */ jsxs(
+              Row.Left,
+              {
+                gap: "1/2",
+                verticalAlign: "baseline",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Span,
+                    {
+                      fontColor: "theme",
+                      children: val_options.length
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      fontSize: "1.mini",
+                      fontColor: "3.blur",
+                      children: "\u4EF6\u306E\u30D2\u30C3\u30C8"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(Row.Right, { children: !!params.limit && /* @__PURE__ */ jsxs(
+              Span,
+              {
+                fontColor: "3.blur",
+                fontSize: "1.mini",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Span,
+                    {
+                      fontSize: "3.paragraph",
+                      fontColor: "theme",
+                      isSemiBoldFont: true,
+                      children: val_selected.length
+                    }
+                  ),
+                  " / ",
+                  params.limit,
+                  " \u4EF6"
+                ]
+              }
+            ) })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Column,
+      {
+        gap: "1/4",
+        padding: "1/2",
+        overflow: "auto",
+        freeCSS: {
+          maxHeight: 12 * 26,
+          maxWidth: 12 * 26
+        },
+        id: val_componentID + "-Selector-Cell-Wrap",
+        className: InputChipsClasses("SelectorWrapper"),
+        children: List
+      }
+    ),
+    params.bottomContent
+  ] });
+};
+const Selector = {
+  openSelector: (params) => {
+    let _a = params, {
+      selectorID,
+      options,
+      selected,
+      limit,
+      bottomContent,
+      onDynamicSearch,
+      SelectorCellComponent,
+      onUpdated,
+      onClosed,
+      parent
+    } = _a, sheetarams = __objRest(_a, [
+      "selectorID",
+      "options",
+      "selected",
+      "limit",
+      "bottomContent",
+      "onDynamicSearch",
+      "SelectorCellComponent",
+      "onUpdated",
+      "onClosed",
+      "parent"
+    ]);
+    let sheetID = selectorID;
+    SelectorCellComponent = SelectorCellComponent || ((params2) => {
+      return /* @__PURE__ */ jsx(Row.Left, { children: params2.label });
+    });
+    Sheet.open(__spreadProps(__spreadValues({
+      parent,
+      sheetID,
+      type: "custom",
+      gravityPoint: 22,
+      padding: [1, 0],
+      hold_state: true,
+      close_option: {
+        aroundClick: true,
+        escapeKeyDown: true
+      }
+    }, sheetarams), {
+      content: /* @__PURE__ */ jsx(
+        Box,
+        {
+          borderRadius: "2.tone.secondary",
+          backgroundColor: "1.layer.base",
+          border: true,
+          boxShadow: "1.normal",
+          overflow: "hidden",
+          children: /* @__PURE__ */ jsx(
+            Component,
+            {
+              selectorID,
+              options,
+              limit,
+              selected,
+              onUpdated,
+              SelectorCellComponent,
+              bottomContent,
+              onDynamicSearch
+            },
+            JSON.stringify(selected)
+          )
+        }
+      ),
+      openAfter: () => {
+        $$fromRoot("#" + params.selectorID + "-KeywordInput").focus();
+      },
+      closeAfter: () => {
+        onClosed();
+      }
+    }));
+  },
+  closeSelector: (selectorID) => {
+    Sheet.close(selectorID);
+  },
+  updateOptions: (selectorID, options) => {
+    let C = useStore.get(selectorID);
+    if (C && C.updateOptions)
+      C.updateOptions(options);
+  },
+  updateSelected: (selectorID, selected) => {
+    let C = useStore.get(selectorID);
+    if (C && C.updateSelected)
+      C.updateSelected(selected);
+  }
+};
+export {
+  Selector,
+  Selector as default
+};