amotify 0.1.31 → 0.1.32

package/dist/fn/Input/Switch.js

@@ -1 +1,221 @@
-import{b as l,c as f,d as V}from"../../chunk-VY3566IV.js";import{jsx as a,jsxs as w}from"react/jsx-runtime";import{useState as g}from"react";import{$$ as x}from"../../@utils/_";import s from"../../atoms/Box";import F from"../../mols/Row";import N from"../Button";import{Wrapper as L,BoxWrapper as q,SubmitForm as H,CommonEffects as O}from"./core";import{InputSwitchClasses as c}from"../../@styles/componentClasses/_";function U(e){let{value:I,params:o}=e,{required:y}=o,n=[];return y&&!I&&n.push({type:"invalid",label:"ON\u306B\u306A\u3063\u3066\u3044\u307E\u305B\u3093"}),{ok:!n.filter(({type:r})=>r=="invalid").length,notice:n}}const W=e=>{let k=e,{componentID:I,color:o="posi",required:y,form:n,id:r,enableFormSubmit:R,checkValidationAtFirst:A,onChange:b,onKeyDown:v,onValidate:K,onUpdateValue:T,onUpdateValidValue:B,value:m="",icon:C="",appearance:p="material"}=k,_=V(k,["componentID","color","required","form","id","enableFormSubmit","checkValidationAtFirst","onChange","onKeyDown","onValidate","onUpdateValue","onUpdateValidValue","value","icon","appearance"]),E={componentID:e.componentID||"",dataValue:m,eventType:"init",eventID:x.uuid.gen()},[t,h]=g(E),[u,S]=g({ok:!1,notice:[]}),d=!!t.dataValue;return O({params:e,val_status:t,set_status:h,val_validate:u,set_validate:S,DefaultValidation:U,onUpdateValue:T,onUpdateValidValue:B,ExtraOverrideParams:{dataValue:m,formatValue:m}}),w(q,{val_status:t,set_status:h,val_validate:u,params:e,children:[a("input",l({type:"checkbox","data-form":n,"data-input-type":"switch","data-validation":u.ok,"data-component-id":t.componentID,"data-value":t.dataValue,checked:t.dataValue,className:c("Input"),id:r,onKeyDown:i=>{v&&v(i),R&&H(i)},onChange:i=>{u.ok&&S({ok:!1,notice:[]}),h(f(l({},t),{dataValue:i.target.checked,eventType:"update",eventID:x.uuid.gen()})),b&&b(i)}},_)),a(N.Label.Plain,{tabIndex:-1,htmlFor:r,padding:"1/3",transition:"middle",borderRadius:"1.tone.primary",className:c("Label"),children:a(s,f(l({},p=="applely"?{padding:"1/4",isRounded:!0,backgroundColor:d?o:"5.layer.darker"}:{}),{children:w(F.Center,{unitHeight:2.5,position:"relative",freeCSS:{width:12*4.5},children:[p=="material"?a(s,{position:"absolute",backgroundColor:d?o:"5.layer.darker",borderRadius:"sphere",unitHeight:1,transition:"middle",width:1,className:c("Bar"),opacity:"middle"}):null,a(s,{position:"absolute",top:0,left:0,backgroundColor:p=="material"&&d?o:"white",transition:"middle",ssSphere:2.5,boxShadow:"1.remark",className:c("Dot"),children:C?a(s,{transition:"middle",ssSquare:2,flexCenter:!0,fontColor:p=="applely"&&d?o:"white",children:C}):null})]})}))})]})},D=e=>(e=l({},e),e.color=e.color||"theme",a(L,{componentID:e.componentID,children:W,params:e}));export{D as Switch,D as default};
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../../chunk-JJ3PEWPN.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useState
+} from "react";
+import {
+  $$
+} from "../../@utils/_";
+import Box from "../../atoms/Box";
+import Row from "../../mols/Row";
+import Button from "../Button";
+import {
+  Wrapper,
+  BoxWrapper,
+  SubmitForm,
+  CommonEffects
+} from "./core";
+import { InputSwitchClasses } from "../../@styles/componentClasses/_";
+function DefaultValidation(props) {
+  let { value, params } = props;
+  let { required } = params;
+  let notice = [];
+  if (required && !value) {
+    notice.push({ type: "invalid", label: "ON\u306B\u306A\u3063\u3066\u3044\u307E\u305B\u3093" });
+  }
+  return {
+    ok: !notice.filter(({ type }) => type == "invalid").length,
+    notice
+  };
+}
+const SwitchInput = (params) => {
+  let _a = params, {
+    componentID,
+    color = "posi",
+    required,
+    form,
+    id,
+    enableFormSubmit,
+    checkValidationAtFirst,
+    onChange,
+    onKeyDown,
+    onValidate,
+    onUpdateValue,
+    onUpdateValidValue,
+    value = "",
+    icon = "",
+    appearance = "material"
+  } = _a, others = __objRest(_a, [
+    "componentID",
+    "color",
+    "required",
+    "form",
+    "id",
+    "enableFormSubmit",
+    "checkValidationAtFirst",
+    "onChange",
+    "onKeyDown",
+    "onValidate",
+    "onUpdateValue",
+    "onUpdateValidValue",
+    "value",
+    "icon",
+    "appearance"
+  ]);
+  let Default_Status = {
+    componentID: params.componentID || "",
+    dataValue: value,
+    eventType: "init",
+    eventID: $$.uuid.gen()
+  };
+  let [val_status, set_status] = useState(Default_Status);
+  let [val_validate, set_validate] = useState({
+    ok: false,
+    notice: []
+  });
+  let isChecked = !!val_status.dataValue;
+  CommonEffects({
+    params,
+    val_status,
+    set_status,
+    val_validate,
+    set_validate,
+    DefaultValidation,
+    onUpdateValue,
+    onUpdateValidValue,
+    ExtraOverrideParams: {
+      dataValue: value,
+      formatValue: value
+    }
+  });
+  return /* @__PURE__ */ jsxs(
+    BoxWrapper,
+    {
+      val_status,
+      set_status,
+      val_validate,
+      params,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          __spreadValues({
+            type: "checkbox",
+            "data-form": form,
+            "data-input-type": "switch",
+            "data-validation": val_validate.ok,
+            "data-component-id": val_status.componentID,
+            "data-value": val_status.dataValue,
+            checked: val_status.dataValue,
+            className: InputSwitchClasses("Input"),
+            id,
+            onKeyDown: (event) => {
+              if (onKeyDown)
+                onKeyDown(event);
+              if (enableFormSubmit)
+                SubmitForm(event);
+            },
+            onChange: (event) => {
+              if (val_validate.ok)
+                set_validate({ ok: false, notice: [] });
+              set_status(__spreadProps(__spreadValues({}, val_status), {
+                dataValue: event.target.checked,
+                eventType: "update",
+                eventID: $$.uuid.gen()
+              }));
+              if (onChange)
+                onChange(event);
+            }
+          }, others)
+        ),
+        /* @__PURE__ */ jsx(
+          Button.Label.Plain,
+          {
+            tabIndex: -1,
+            htmlFor: id,
+            padding: "1/3",
+            transition: "middle",
+            borderRadius: "1.tone.primary",
+            className: InputSwitchClasses("Label"),
+            children: /* @__PURE__ */ jsx(
+              Box,
+              __spreadProps(__spreadValues({}, appearance == "applely" ? {
+                padding: "1/4",
+                isRounded: true,
+                backgroundColor: isChecked ? color : "5.layer.darker"
+              } : {}), {
+                children: /* @__PURE__ */ jsxs(
+                  Row.Center,
+                  {
+                    unitHeight: 2.5,
+                    position: "relative",
+                    freeCSS: {
+                      width: 12 * 4.5
+                    },
+                    children: [
+                      appearance == "material" && /* @__PURE__ */ jsx(
+                        Box,
+                        {
+                          position: "absolute",
+                          backgroundColor: isChecked ? color : "5.layer.darker",
+                          borderRadius: "sphere",
+                          unitHeight: 1,
+                          transition: "middle",
+                          width: 1,
+                          className: InputSwitchClasses("Bar"),
+                          opacity: "middle"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Box,
+                        {
+                          position: "absolute",
+                          top: 0,
+                          left: 0,
+                          backgroundColor: appearance == "material" && isChecked ? color : "white",
+                          transition: "middle",
+                          ssSphere: 2.5,
+                          boxShadow: "1.remark",
+                          className: InputSwitchClasses("Dot"),
+                          children: icon && /* @__PURE__ */ jsx(
+                            Box,
+                            {
+                              transition: "middle",
+                              ssSquare: 2,
+                              flexCenter: true,
+                              fontColor: appearance == "applely" && isChecked ? color : "white",
+                              children: icon
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  }
+                )
+              })
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+const Switch = (rawParams) => {
+  rawParams = __spreadValues({}, rawParams);
+  rawParams.color = rawParams.color || "theme";
+  return /* @__PURE__ */ jsx(
+    Wrapper,
+    {
+      componentID: rawParams.componentID,
+      children: SwitchInput,
+      params: rawParams
+    }
+  );
+};
+export {
+  Switch,
+  Switch as default
+};