react-store-input 0.1.1 → 0.1.3

package/dist/use_store_component.js

@@ -0,0 +1,258 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/use_store_component.tsx
+var use_store_component_exports = {};
+__export(use_store_component_exports, {
+  Input: () => Input,
+  Select: () => Select,
+  Textarea: () => Textarea,
+  useStoreComponent: () => useStoreComponent
+});
+module.exports = __toCommonJS(use_store_component_exports);
+var import_react4 = require("react");
+var import_react5 = __toESM(require("react"));
+
+// src/use_store_input.tsx
+var import_react3 = require("react");
+var import_date_fns = require("date-fns");
+
+// src/use_store_controller.tsx
+var import_react2 = require("react");
+
+// src/use_subscribe.tsx
+var import_react = require("react");
+function useSubscribe(store, subscriber) {
+  (0, import_react.useEffect)(() => {
+    const unsubscribe = store.subscribe(subscriber);
+    return () => {
+      unsubscribe();
+    };
+  }, [store]);
+}
+
+// src/use_store_controller.tsx
+function useStoreController(store, props) {
+  const ref = (0, import_react2.useRef)(null);
+  const dispatchKey = (0, import_react2.useId)();
+  (0, import_react2.useEffect)(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    if (typeof props.ref === "function") {
+      props.ref(element);
+    } else if (props.ref) {
+      props.ref.current = element;
+    }
+  }, []);
+  useSubscribe(store, (state, key) => {
+    if (key === dispatchKey) {
+      return;
+    }
+    if (!ref.current) return;
+    props.onSubscribe(state, ref.current);
+  });
+  const onChange = () => {
+    store.dispatch(
+      (state) => {
+        const element = ref.current;
+        if (!element) return;
+        props.onDispatch(state, element);
+      },
+      {
+        key: dispatchKey
+      }
+    );
+  };
+  return {
+    dispatchKey,
+    ref,
+    onChange
+  };
+}
+
+// src/use_store_input.tsx
+function useStoreInput(store, props) {
+  const toInputValue = (value) => {
+    if (value === void 0 || value === null) {
+      return "";
+    }
+    if (props.type === "datetime-local") {
+      if (value instanceof Date) {
+        return (0, import_date_fns.format)(value, "yyyy-MM-dd'T'HH:mm:ss");
+      }
+      if (typeof value === "string") {
+        return toInputValue(new Date(value));
+      }
+    }
+    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));
+  };
+  function toStateValue(value) {
+    const selected = props.getter(store.state);
+    if (typeof selected === "number") {
+      return Number(value);
+    }
+    if (selected instanceof Date) {
+      return new Date(value);
+    }
+    return value;
+  }
+  const inputProps = useStoreController(store, {
+    ref: props.ref,
+    onSubscribe: (state, element) => {
+      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, element) => {
+      if ("checked" in element && props.type === "checkbox") {
+        props.setter(state, element.checked);
+      } else {
+        props.setter(state, toStateValue(element.value));
+      }
+    }
+  });
+  return {
+    ref: inputProps.ref,
+    dispatchKey: inputProps.dispatchKey,
+    defaultValue: getDefaultValue(),
+    defaultChecked: getDefaultChecked(),
+    onChange: (event) => {
+      inputProps.onChange();
+      props.onChange?.(event);
+    }
+  };
+}
+
+// src/use_store_input_with_name.tsx
+function useStoreInputWithName(store, props) {
+  const inputProps = useStoreInput(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/use_store_component.tsx
+function useStoreComponent(store) {
+  const input = (0, import_react4.useCallback)(function Component(props) {
+    return /* @__PURE__ */ import_react5.default.createElement(Input, { store, ...props });
+  }, []);
+  const select = (0, import_react4.useCallback)(function Component(props) {
+    return /* @__PURE__ */ import_react5.default.createElement(Select, { store, ...props });
+  }, []);
+  const textarea = (0, import_react4.useCallback)(function Component(props) {
+    return /* @__PURE__ */ import_react5.default.createElement(Textarea, { store, ...props });
+  }, []);
+  return {
+    input,
+    select,
+    textarea
+  };
+}
+function Input({
+  store,
+  ...props
+}) {
+  const storeProps = useStoreInputWithName(store, props);
+  return /* @__PURE__ */ import_react5.default.createElement("input", { ...props, ...storeProps });
+}
+function Select({
+  store,
+  ...props
+}) {
+  const storeProps = useStoreInputWithName(store, props);
+  return /* @__PURE__ */ import_react5.default.createElement("select", { ...props, ...storeProps });
+}
+function Textarea({
+  store,
+  ...props
+}) {
+  const storeProps = useStoreInputWithName(store, props);
+  return /* @__PURE__ */ import_react5.default.createElement("textarea", { ...props, ...storeProps });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Input,
+  Select,
+  Textarea,
+  useStoreComponent
+});

package/dist/use_store_component.mjs

@@ -0,0 +1,222 @@
+// src/use_store_component.tsx
+import {
+  useCallback
+} from "react";
+import React from "react";
+
+// src/use_store_input.tsx
+import "react";
+import { format } from "date-fns";
+
+// src/use_store_controller.tsx
+import { useEffect as useEffect2, useId, useRef } from "react";
+
+// src/use_subscribe.tsx
+import { useEffect } from "react";
+function useSubscribe(store, subscriber) {
+  useEffect(() => {
+    const unsubscribe = store.subscribe(subscriber);
+    return () => {
+      unsubscribe();
+    };
+  }, [store]);
+}
+
+// src/use_store_controller.tsx
+function useStoreController(store, props) {
+  const ref = useRef(null);
+  const dispatchKey = useId();
+  useEffect2(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    if (typeof props.ref === "function") {
+      props.ref(element);
+    } else if (props.ref) {
+      props.ref.current = element;
+    }
+  }, []);
+  useSubscribe(store, (state, key) => {
+    if (key === dispatchKey) {
+      return;
+    }
+    if (!ref.current) return;
+    props.onSubscribe(state, ref.current);
+  });
+  const onChange = () => {
+    store.dispatch(
+      (state) => {
+        const element = ref.current;
+        if (!element) return;
+        props.onDispatch(state, element);
+      },
+      {
+        key: dispatchKey
+      }
+    );
+  };
+  return {
+    dispatchKey,
+    ref,
+    onChange
+  };
+}
+
+// src/use_store_input.tsx
+function useStoreInput(store, props) {
+  const toInputValue = (value) => {
+    if (value === void 0 || value === null) {
+      return "";
+    }
+    if (props.type === "datetime-local") {
+      if (value instanceof Date) {
+        return format(value, "yyyy-MM-dd'T'HH:mm:ss");
+      }
+      if (typeof value === "string") {
+        return toInputValue(new Date(value));
+      }
+    }
+    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));
+  };
+  function toStateValue(value) {
+    const selected = props.getter(store.state);
+    if (typeof selected === "number") {
+      return Number(value);
+    }
+    if (selected instanceof Date) {
+      return new Date(value);
+    }
+    return value;
+  }
+  const inputProps = useStoreController(store, {
+    ref: props.ref,
+    onSubscribe: (state, element) => {
+      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, element) => {
+      if ("checked" in element && props.type === "checkbox") {
+        props.setter(state, element.checked);
+      } else {
+        props.setter(state, toStateValue(element.value));
+      }
+    }
+  });
+  return {
+    ref: inputProps.ref,
+    dispatchKey: inputProps.dispatchKey,
+    defaultValue: getDefaultValue(),
+    defaultChecked: getDefaultChecked(),
+    onChange: (event) => {
+      inputProps.onChange();
+      props.onChange?.(event);
+    }
+  };
+}
+
+// src/use_store_input_with_name.tsx
+function useStoreInputWithName(store, props) {
+  const inputProps = useStoreInput(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/use_store_component.tsx
+function useStoreComponent(store) {
+  const input = useCallback(function Component(props) {
+    return /* @__PURE__ */ React.createElement(Input, { store, ...props });
+  }, []);
+  const select = useCallback(function Component(props) {
+    return /* @__PURE__ */ React.createElement(Select, { store, ...props });
+  }, []);
+  const textarea = useCallback(function Component(props) {
+    return /* @__PURE__ */ React.createElement(Textarea, { store, ...props });
+  }, []);
+  return {
+    input,
+    select,
+    textarea
+  };
+}
+function Input({
+  store,
+  ...props
+}) {
+  const storeProps = useStoreInputWithName(store, props);
+  return /* @__PURE__ */ React.createElement("input", { ...props, ...storeProps });
+}
+function Select({
+  store,
+  ...props
+}) {
+  const storeProps = useStoreInputWithName(store, props);
+  return /* @__PURE__ */ React.createElement("select", { ...props, ...storeProps });
+}
+function Textarea({
+  store,
+  ...props
+}) {
+  const storeProps = useStoreInputWithName(store, props);
+  return /* @__PURE__ */ React.createElement("textarea", { ...props, ...storeProps });
+}
+export {
+  Input,
+  Select,
+  Textarea,
+  useStoreComponent
+};

package/dist/use_store_controller.d.mts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Ref } from 'react';
+import { Store } from './use_store.mjs';
+
+type StoreControllerProps<TController, TState> = {
+    ref?: Ref<TController>;
+    onSubscribe: (state: TState, element: TController) => void;
+    onDispatch: (state: TState, element: TController) => void;
+};
+declare function useStoreController<TController, TState>(store: Store<TState>, props: StoreControllerProps<TController, TState>): {
+    dispatchKey: string;
+    ref: React.RefObject<TController | null>;
+    onChange: () => void;
+};
+
+export { type StoreControllerProps, useStoreController };

package/dist/use_store_controller.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Ref } from 'react';
+import { Store } from './use_store.js';
+
+type StoreControllerProps<TController, TState> = {
+    ref?: Ref<TController>;
+    onSubscribe: (state: TState, element: TController) => void;
+    onDispatch: (state: TState, element: TController) => void;
+};
+declare function useStoreController<TController, TState>(store: Store<TState>, props: StoreControllerProps<TController, TState>): {
+    dispatchKey: string;
+    ref: React.RefObject<TController | null>;
+    onChange: () => void;
+};
+
+export { type StoreControllerProps, useStoreController };

package/dist/use_store_controller.js

@@ -0,0 +1,82 @@
+"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_store_controller.tsx
+var use_store_controller_exports = {};
+__export(use_store_controller_exports, {
+  useStoreController: () => useStoreController
+});
+module.exports = __toCommonJS(use_store_controller_exports);
+var import_react2 = require("react");
+
+// src/use_subscribe.tsx
+var import_react = require("react");
+function useSubscribe(store, subscriber) {
+  (0, import_react.useEffect)(() => {
+    const unsubscribe = store.subscribe(subscriber);
+    return () => {
+      unsubscribe();
+    };
+  }, [store]);
+}
+
+// src/use_store_controller.tsx
+function useStoreController(store, props) {
+  const ref = (0, import_react2.useRef)(null);
+  const dispatchKey = (0, import_react2.useId)();
+  (0, import_react2.useEffect)(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    if (typeof props.ref === "function") {
+      props.ref(element);
+    } else if (props.ref) {
+      props.ref.current = element;
+    }
+  }, []);
+  useSubscribe(store, (state, key) => {
+    if (key === dispatchKey) {
+      return;
+    }
+    if (!ref.current) return;
+    props.onSubscribe(state, ref.current);
+  });
+  const onChange = () => {
+    store.dispatch(
+      (state) => {
+        const element = ref.current;
+        if (!element) return;
+        props.onDispatch(state, element);
+      },
+      {
+        key: dispatchKey
+      }
+    );
+  };
+  return {
+    dispatchKey,
+    ref,
+    onChange
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useStoreController
+});

package/dist/use_store_controller.mjs

@@ -0,0 +1,57 @@
+// src/use_store_controller.tsx
+import { useEffect as useEffect2, useId, useRef } from "react";
+
+// src/use_subscribe.tsx
+import { useEffect } from "react";
+function useSubscribe(store, subscriber) {
+  useEffect(() => {
+    const unsubscribe = store.subscribe(subscriber);
+    return () => {
+      unsubscribe();
+    };
+  }, [store]);
+}
+
+// src/use_store_controller.tsx
+function useStoreController(store, props) {
+  const ref = useRef(null);
+  const dispatchKey = useId();
+  useEffect2(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    if (typeof props.ref === "function") {
+      props.ref(element);
+    } else if (props.ref) {
+      props.ref.current = element;
+    }
+  }, []);
+  useSubscribe(store, (state, key) => {
+    if (key === dispatchKey) {
+      return;
+    }
+    if (!ref.current) return;
+    props.onSubscribe(state, ref.current);
+  });
+  const onChange = () => {
+    store.dispatch(
+      (state) => {
+        const element = ref.current;
+        if (!element) return;
+        props.onDispatch(state, element);
+      },
+      {
+        key: dispatchKey
+      }
+    );
+  };
+  return {
+    dispatchKey,
+    ref,
+    onChange
+  };
+}
+export {
+  useStoreController
+};

package/dist/use_store_input.d.mts

@@ -1,19 +1,24 @@
-import React__default, { DetailedHTMLProps, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import * as React$1 from 'react';
+import { Ref, HTMLInputTypeAttribute } from 'react';
 import { Store } from './use_store.mjs';
 
-type StoreInputProps<TElement extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, TState> = Omit<TElement extends HTMLInputElement ? DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> : TElement extends HTMLSelectElement ? DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> : DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "name"> & {
-    name: keyof TState;
+type StoreInputProps<TInputElement, TState> = {
+    ref?: Ref<TInputElement>;
+    type?: HTMLInputTypeAttribute;
+    defaultValue?: string | number | readonly string[] | undefined;
+    value?: string | number | readonly string[] | undefined;
+    defaultChecked?: boolean | undefined;
+    onChange?: (event: React.ChangeEvent<TInputElement>) => void;
+} & {
+    getter: (state: TState) => unknown;
+    setter: (state: TState, value: unknown) => void;
 };
-declare function useStoreInput<TState>(store: Store<TState>): {
-    input: React__default.FC<StoreInputProps<HTMLInputElement, TState>>;
-    select: React__default.FC<StoreInputProps<HTMLSelectElement, TState>>;
-    textarea: React__default.FC<StoreInputProps<HTMLTextAreaElement, TState>>;
+declare function useStoreInput<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState>(store: Store<TState>, props: StoreInputProps<TInputElement, TState>): {
+    ref: React$1.RefObject<TInputElement | null>;
+    dispatchKey: string;
+    defaultValue: string | number | readonly string[] | undefined;
+    defaultChecked: boolean | undefined;
+    onChange: (event: React.ChangeEvent<TInputElement>) => void;
 };
-type StoreInputPropsWithStore<TElement extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, TState> = StoreInputProps<TElement, TState> & {
-    store: Store<TState>;
-};
-declare function Input<TState>({ store, ...props }: StoreInputPropsWithStore<HTMLInputElement, TState>): React__default.JSX.Element;
-declare function Select<TState>({ store, ...props }: StoreInputPropsWithStore<HTMLSelectElement, TState>): React__default.JSX.Element;
-declare function Textarea<TState>({ store, ...props }: StoreInputPropsWithStore<HTMLTextAreaElement, TState>): React__default.JSX.Element;
 
-export { Input, Select, type StoreInputPropsWithStore, Textarea, useStoreInput };
+export { type StoreInputProps, useStoreInput };