react-store-input 0.2.6 → 0.5.0

package/dist/use_form_store.js

@@ -1,365 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/use_form_store.tsx
-var use_form_store_exports = {};
-__export(use_form_store_exports, {
-  useFormStore: () => useFormStore
-});
-module.exports = __toCommonJS(use_form_store_exports);
-
-// src/create_render.tsx
-var import_gw_store = require("gw-store");
-var import_jsx_runtime = require("react/jsx-runtime");
-function createRenderWithStore(store) {
-  return function createRender(selector, compare) {
-    function Component() {
-      const result = (0, import_gw_store.useSelector)(store, (state) => state, compare);
-      const content = selector(result);
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: content });
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {});
-  };
-}
-
-// src/use_form_store.tsx
-var import_gw_store2 = require("gw-store");
-
-// src/use_store_component.tsx
-var import_react3 = require("react");
-
-// src/use_store_input.tsx
-var import_date_fns = require("date-fns");
-
-// src/use_store_controller.tsx
-var import_react = require("react");
-function useStoreController(store, props) {
-  const dispatchKey = (0, import_react.useId)();
-  (0, import_react.useEffect)(() => {
-    const unsub = store.subscribe((state, key) => {
-      if (key === dispatchKey) {
-        return;
-      }
-      props.onSubscribe(state);
-    });
-    return () => {
-      unsub();
-    };
-  }, []);
-  const dispatch = () => {
-    store.dispatch(
-      (state) => {
-        props.onDispatch(state);
-      },
-      {
-        key: dispatchKey
-      }
-    );
-  };
-  return {
-    dispatch
-  };
-}
-
-// src/use_store_input.tsx
-function useStoreInput(ref, store, props) {
-  const toInputValue = props.toInputValue || ((value) => {
-    if (value === void 0 || value === null) {
-      return "";
-    }
-    if (props.type === "datetime-local") {
-      const date = new Date(value);
-      if (!isNaN(date.getTime())) {
-        return (0, import_date_fns.format)(date, "yyyy-MM-dd'T'HH:mm:ss");
-      }
-    }
-    return String(value);
-  });
-  const getDefaultValue = () => {
-    if (props.defaultValue !== void 0) {
-      return props.defaultValue;
-    }
-    if (props.type === "checkbox" || props.type === "radio") {
-      return void 0;
-    }
-    return toInputValue(props.getter(store.state));
-  };
-  const toInputChecked = (value) => {
-    if (props.type === "radio") {
-      return value !== void 0 && value === props.value;
-    }
-    return Boolean(value);
-  };
-  const getDefaultChecked = () => {
-    if (props.defaultChecked) {
-      return props.defaultChecked;
-    }
-    if (props.type !== "checkbox" && props.type !== "radio") {
-      return void 0;
-    }
-    return toInputChecked(props.getter(store.state));
-  };
-  const toStateValue = props.toStateValue || ((value) => {
-    if (props.type === "number" || props.type === "range") {
-      return Number(value);
-    }
-    if (props.type === "datetime-local") {
-      return new Date(value);
-    }
-    return value;
-  });
-  const inputProps = useStoreController(store, {
-    onSubscribe: (state) => {
-      const element = ref.current;
-      if (!element) {
-        return;
-      }
-      if ("checked" in element && (props.type === "checkbox" || props.type === "radio")) {
-        const checked = toInputChecked(props.getter(state));
-        if (element.checked === checked) {
-          return;
-        }
-        element.checked = checked;
-      } else {
-        const value = toInputValue(props.getter(state));
-        if (element.value === value) {
-          return;
-        }
-        element.value = value;
-      }
-      const event = new Event("input", { bubbles: true });
-      element.dispatchEvent(event);
-    },
-    onDispatch: (state) => {
-      const element = ref.current;
-      if (!element) {
-        return;
-      }
-      if ("checked" in element && props.type === "checkbox") {
-        props.setter(state, element.checked);
-      } else {
-        props.setter(state, toStateValue(element.value));
-      }
-    }
-  });
-  return {
-    defaultValue: getDefaultValue(),
-    defaultChecked: getDefaultChecked(),
-    onChange: (event) => {
-      inputProps.dispatch();
-      props.onChange?.(event);
-    }
-  };
-}
-
-// src/use_store_input_with_name.tsx
-function useStoreInputWithName(ref, store, props) {
-  const inputProps = useStoreInput(ref, store, {
-    ...props,
-    getter: (state) => {
-      if (props.getter) {
-        return props.getter(state);
-      }
-      return state[props.name];
-    },
-    setter: (state, value) => {
-      if (props.setter) {
-        props.setter(state, value);
-        return;
-      }
-      state[props.name] = value;
-    }
-  });
-  return {
-    ...inputProps,
-    name: "name" in props ? String(props.name) : void 0
-  };
-}
-
-// src/text_editor.tsx
-var import_gw_react_text_editor = require("gw-react-text-editor");
-var import_react2 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function TextEditor({
-  store,
-  name,
-  getter,
-  setter,
-  defaultValue,
-  ref,
-  ...props
-}) {
-  const controllerRef = (0, import_react2.useRef)(null);
-  (0, import_react2.useImperativeHandle)(
-    ref,
-    () => controllerRef.current,
-    []
-  );
-  const { dispatch } = useStoreController(store, {
-    onSubscribe: (state) => {
-      const controller = controllerRef.current;
-      if (!controller) {
-        return;
-      }
-      const getResult = () => {
-        if (getter) {
-          return getter(state) || "";
-        }
-        if (name) {
-          return state[name] || "";
-        }
-        return "";
-      };
-      const result = getResult();
-      if (controller.value !== result) {
-        controller.value = result;
-      }
-    },
-    onDispatch: (state) => {
-      const controller = controllerRef.current;
-      if (!controller) {
-        return;
-      }
-      if (setter) {
-        setter(state, controller.value);
-        return;
-      }
-      if (name) {
-        state[name] = controller.value;
-      }
-    }
-  });
-  const getDefaultValue = () => {
-    if (getter) {
-      return getter(store.state);
-    }
-    if (name) {
-      return store.state[name];
-    }
-    return void 0;
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_gw_react_text_editor.TextEditor,
-    {
-      ...props,
-      ref: controllerRef,
-      defaultValue: defaultValue ?? getDefaultValue(),
-      onChange: (e) => {
-        dispatch();
-        props.onChange?.(e);
-      }
-    }
-  );
-}
-
-// src/use_store_component.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function useStoreComponent(store) {
-  const input = (0, import_react3.useCallback)(function Component(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Input, { store, ...props });
-  }, []);
-  const select = (0, import_react3.useCallback)(function Component(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Select, { store, ...props });
-  }, []);
-  const textarea = (0, import_react3.useCallback)(function Component(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Textarea, { store, ...props });
-  }, []);
-  const textEditor = (0, import_react3.useCallback)(function Component(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TextEditor, { store, ...props });
-  }, []);
-  return {
-    input,
-    select,
-    textarea,
-    textEditor
-  };
-}
-function Input({
-  store,
-  getter,
-  setter,
-  toInputValue,
-  toStateValue,
-  ...props
-}) {
-  const ref = (0, import_react3.useRef)(null);
-  const storeProps = useStoreInputWithName(ref, store, {
-    ...props,
-    getter,
-    setter,
-    toInputValue,
-    toStateValue
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { ref, ...props, ...storeProps });
-}
-function Select({
-  store,
-  getter,
-  setter,
-  toInputValue,
-  toStateValue,
-  ...props
-}) {
-  const ref = (0, import_react3.useRef)(null);
-  const storeProps = useStoreInputWithName(ref, store, {
-    ...props,
-    getter,
-    setter,
-    toInputValue,
-    toStateValue
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("select", { ref, ...props, ...storeProps });
-}
-function Textarea({
-  store,
-  getter,
-  setter,
-  toInputValue,
-  toStateValue,
-  ...props
-}) {
-  const ref = (0, import_react3.useRef)(null);
-  const storeProps = useStoreInputWithName(ref, store, {
-    ...props,
-    getter,
-    setter,
-    toInputValue,
-    toStateValue
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("textarea", { ref, ...props, ...storeProps });
-}
-
-// src/use_form_store.tsx
-function useFormStore(initialState) {
-  const store = (0, import_gw_store2.useStore)(initialState);
-  const storeComponent = useStoreComponent(store);
-  return {
-    get state() {
-      return store.state;
-    },
-    dispatch: store.dispatch,
-    subscribe: store.subscribe,
-    render: createRenderWithStore(store),
-    ...storeComponent
-  };
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  useFormStore
-});

package/dist/use_form_store.mjs

@@ -1,340 +0,0 @@
-// src/create_render.tsx
-import { useSelector } from "gw-store";
-import { Fragment, jsx } from "react/jsx-runtime";
-function createRenderWithStore(store) {
-  return function createRender(selector, compare) {
-    function Component() {
-      const result = useSelector(store, (state) => state, compare);
-      const content = selector(result);
-      return /* @__PURE__ */ jsx(Fragment, { children: content });
-    }
-    return /* @__PURE__ */ jsx(Component, {});
-  };
-}
-
-// src/use_form_store.tsx
-import { useStore } from "gw-store";
-
-// src/use_store_component.tsx
-import { useCallback, useRef as useRef2 } from "react";
-
-// src/use_store_input.tsx
-import { format } from "date-fns";
-
-// src/use_store_controller.tsx
-import { useEffect, useId } from "react";
-function useStoreController(store, props) {
-  const dispatchKey = useId();
-  useEffect(() => {
-    const unsub = store.subscribe((state, key) => {
-      if (key === dispatchKey) {
-        return;
-      }
-      props.onSubscribe(state);
-    });
-    return () => {
-      unsub();
-    };
-  }, []);
-  const dispatch = () => {
-    store.dispatch(
-      (state) => {
-        props.onDispatch(state);
-      },
-      {
-        key: dispatchKey
-      }
-    );
-  };
-  return {
-    dispatch
-  };
-}
-
-// src/use_store_input.tsx
-function useStoreInput(ref, store, props) {
-  const toInputValue = props.toInputValue || ((value) => {
-    if (value === void 0 || value === null) {
-      return "";
-    }
-    if (props.type === "datetime-local") {
-      const date = new Date(value);
-      if (!isNaN(date.getTime())) {
-        return format(date, "yyyy-MM-dd'T'HH:mm:ss");
-      }
-    }
-    return String(value);
-  });
-  const getDefaultValue = () => {
-    if (props.defaultValue !== void 0) {
-      return props.defaultValue;
-    }
-    if (props.type === "checkbox" || props.type === "radio") {
-      return void 0;
-    }
-    return toInputValue(props.getter(store.state));
-  };
-  const toInputChecked = (value) => {
-    if (props.type === "radio") {
-      return value !== void 0 && value === props.value;
-    }
-    return Boolean(value);
-  };
-  const getDefaultChecked = () => {
-    if (props.defaultChecked) {
-      return props.defaultChecked;
-    }
-    if (props.type !== "checkbox" && props.type !== "radio") {
-      return void 0;
-    }
-    return toInputChecked(props.getter(store.state));
-  };
-  const toStateValue = props.toStateValue || ((value) => {
-    if (props.type === "number" || props.type === "range") {
-      return Number(value);
-    }
-    if (props.type === "datetime-local") {
-      return new Date(value);
-    }
-    return value;
-  });
-  const inputProps = useStoreController(store, {
-    onSubscribe: (state) => {
-      const element = ref.current;
-      if (!element) {
-        return;
-      }
-      if ("checked" in element && (props.type === "checkbox" || props.type === "radio")) {
-        const checked = toInputChecked(props.getter(state));
-        if (element.checked === checked) {
-          return;
-        }
-        element.checked = checked;
-      } else {
-        const value = toInputValue(props.getter(state));
-        if (element.value === value) {
-          return;
-        }
-        element.value = value;
-      }
-      const event = new Event("input", { bubbles: true });
-      element.dispatchEvent(event);
-    },
-    onDispatch: (state) => {
-      const element = ref.current;
-      if (!element) {
-        return;
-      }
-      if ("checked" in element && props.type === "checkbox") {
-        props.setter(state, element.checked);
-      } else {
-        props.setter(state, toStateValue(element.value));
-      }
-    }
-  });
-  return {
-    defaultValue: getDefaultValue(),
-    defaultChecked: getDefaultChecked(),
-    onChange: (event) => {
-      inputProps.dispatch();
-      props.onChange?.(event);
-    }
-  };
-}
-
-// src/use_store_input_with_name.tsx
-function useStoreInputWithName(ref, store, props) {
-  const inputProps = useStoreInput(ref, store, {
-    ...props,
-    getter: (state) => {
-      if (props.getter) {
-        return props.getter(state);
-      }
-      return state[props.name];
-    },
-    setter: (state, value) => {
-      if (props.setter) {
-        props.setter(state, value);
-        return;
-      }
-      state[props.name] = value;
-    }
-  });
-  return {
-    ...inputProps,
-    name: "name" in props ? String(props.name) : void 0
-  };
-}
-
-// src/text_editor.tsx
-import {
-  TextEditor as GwTextEditor
-} from "gw-react-text-editor";
-import { useImperativeHandle, useRef } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-function TextEditor({
-  store,
-  name,
-  getter,
-  setter,
-  defaultValue,
-  ref,
-  ...props
-}) {
-  const controllerRef = useRef(null);
-  useImperativeHandle(
-    ref,
-    () => controllerRef.current,
-    []
-  );
-  const { dispatch } = useStoreController(store, {
-    onSubscribe: (state) => {
-      const controller = controllerRef.current;
-      if (!controller) {
-        return;
-      }
-      const getResult = () => {
-        if (getter) {
-          return getter(state) || "";
-        }
-        if (name) {
-          return state[name] || "";
-        }
-        return "";
-      };
-      const result = getResult();
-      if (controller.value !== result) {
-        controller.value = result;
-      }
-    },
-    onDispatch: (state) => {
-      const controller = controllerRef.current;
-      if (!controller) {
-        return;
-      }
-      if (setter) {
-        setter(state, controller.value);
-        return;
-      }
-      if (name) {
-        state[name] = controller.value;
-      }
-    }
-  });
-  const getDefaultValue = () => {
-    if (getter) {
-      return getter(store.state);
-    }
-    if (name) {
-      return store.state[name];
-    }
-    return void 0;
-  };
-  return /* @__PURE__ */ jsx2(
-    GwTextEditor,
-    {
-      ...props,
-      ref: controllerRef,
-      defaultValue: defaultValue ?? getDefaultValue(),
-      onChange: (e) => {
-        dispatch();
-        props.onChange?.(e);
-      }
-    }
-  );
-}
-
-// src/use_store_component.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-function useStoreComponent(store) {
-  const input = useCallback(function Component(props) {
-    return /* @__PURE__ */ jsx3(Input, { store, ...props });
-  }, []);
-  const select = useCallback(function Component(props) {
-    return /* @__PURE__ */ jsx3(Select, { store, ...props });
-  }, []);
-  const textarea = useCallback(function Component(props) {
-    return /* @__PURE__ */ jsx3(Textarea, { store, ...props });
-  }, []);
-  const textEditor = useCallback(function Component(props) {
-    return /* @__PURE__ */ jsx3(TextEditor, { store, ...props });
-  }, []);
-  return {
-    input,
-    select,
-    textarea,
-    textEditor
-  };
-}
-function Input({
-  store,
-  getter,
-  setter,
-  toInputValue,
-  toStateValue,
-  ...props
-}) {
-  const ref = useRef2(null);
-  const storeProps = useStoreInputWithName(ref, store, {
-    ...props,
-    getter,
-    setter,
-    toInputValue,
-    toStateValue
-  });
-  return /* @__PURE__ */ jsx3("input", { ref, ...props, ...storeProps });
-}
-function Select({
-  store,
-  getter,
-  setter,
-  toInputValue,
-  toStateValue,
-  ...props
-}) {
-  const ref = useRef2(null);
-  const storeProps = useStoreInputWithName(ref, store, {
-    ...props,
-    getter,
-    setter,
-    toInputValue,
-    toStateValue
-  });
-  return /* @__PURE__ */ jsx3("select", { ref, ...props, ...storeProps });
-}
-function Textarea({
-  store,
-  getter,
-  setter,
-  toInputValue,
-  toStateValue,
-  ...props
-}) {
-  const ref = useRef2(null);
-  const storeProps = useStoreInputWithName(ref, store, {
-    ...props,
-    getter,
-    setter,
-    toInputValue,
-    toStateValue
-  });
-  return /* @__PURE__ */ jsx3("textarea", { ref, ...props, ...storeProps });
-}
-
-// src/use_form_store.tsx
-function useFormStore(initialState) {
-  const store = useStore(initialState);
-  const storeComponent = useStoreComponent(store);
-  return {
-    get state() {
-      return store.state;
-    },
-    dispatch: store.dispatch,
-    subscribe: store.subscribe,
-    render: createRenderWithStore(store),
-    ...storeComponent
-  };
-}
-export {
-  useFormStore
-};