amotify 0.1.32 → 0.1.34

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

@@ -1,472 +1 @@
-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
-};
+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"]})})]})]}),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};