react-store-input 0.1.4 → 0.1.6

package/dist/use_form_store.js

@@ -130,18 +130,8 @@ var import_date_fns = require("date-fns");
 var import_react5 = require("react");
 function useStoreController(store, props) {
   const ref = (0, import_react5.useRef)(null);
+  (0, import_react5.useImperativeHandle)(props.ref, () => ref.current, []);
   const dispatchKey = (0, import_react5.useId)();
-  (0, import_react5.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;
@@ -149,7 +139,7 @@ function useStoreController(store, props) {
     if (!ref.current) return;
     props.onSubscribe(state, ref.current);
   });
-  const onChange = () => {
+  const dispatch = () => {
     store.dispatch(
       (state) => {
         const element = ref.current;
@@ -163,26 +153,24 @@ function useStoreController(store, props) {
   };
   return {
     ref,
-    onChange
+    dispatch
   };
 }
 
 // src/use_store_input.tsx
 function useStoreInput(store, props) {
-  const toInputValue = (value) => {
+  const toInputValue = props.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));
+      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;
@@ -207,16 +195,15 @@ function useStoreInput(store, props) {
     }
     return toInputChecked(props.getter(store.state));
   };
-  function toStateValue(value) {
-    const selected = props.getter(store.state);
-    if (typeof selected === "number") {
+  const toStateValue = props.toStateValue || ((value) => {
+    if (props.type === "number" || props.type === "range") {
       return Number(value);
     }
-    if (selected instanceof Date) {
+    if (props.type === "datetime-local") {
       return new Date(value);
     }
     return value;
-  }
+  });
   const inputProps = useStoreController(store, {
     ref: props.ref,
     onSubscribe: (state, element) => {
@@ -249,7 +236,7 @@ function useStoreInput(store, props) {
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
-      inputProps.onChange();
+      inputProps.dispatch();
       props.onChange?.(event);
     }
   };
@@ -281,15 +268,24 @@ function useStoreInputWithName(store, props) {
 
 // src/use_store_component.tsx
 function useStoreComponent(store) {
-  const input = (0, import_react7.useCallback)(function Component(props) {
-    return /* @__PURE__ */ import_react8.default.createElement(Input, { store, ...props });
-  }, []);
-  const select = (0, import_react7.useCallback)(function Component(props) {
-    return /* @__PURE__ */ import_react8.default.createElement(Select, { store, ...props });
-  }, []);
-  const textarea = (0, import_react7.useCallback)(function Component(props) {
-    return /* @__PURE__ */ import_react8.default.createElement(Textarea, { store, ...props });
-  }, []);
+  const input = (0, import_react7.useCallback)(
+    function Component(props) {
+      return /* @__PURE__ */ import_react8.default.createElement(Input, { store, ...props });
+    },
+    []
+  );
+  const select = (0, import_react7.useCallback)(
+    function Component(props) {
+      return /* @__PURE__ */ import_react8.default.createElement(Select, { store, ...props });
+    },
+    []
+  );
+  const textarea = (0, import_react7.useCallback)(
+    function Component(props) {
+      return /* @__PURE__ */ import_react8.default.createElement(Textarea, { store, ...props });
+    },
+    []
+  );
   return {
     input,
     select,
@@ -300,27 +296,51 @@ function Input({
   store,
   getter,
   setter,
+  toInputValue,
+  toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
+  const storeProps = useStoreInputWithName(store, {
+    ...props,
+    getter,
+    setter,
+    toInputValue,
+    toStateValue
+  });
   return /* @__PURE__ */ import_react8.default.createElement("input", { ...props, ...storeProps });
 }
 function Select({
   store,
   getter,
   setter,
+  toInputValue,
+  toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
+  const storeProps = useStoreInputWithName(store, {
+    ...props,
+    getter,
+    setter,
+    toInputValue,
+    toStateValue
+  });
   return /* @__PURE__ */ import_react8.default.createElement("select", { ...props, ...storeProps });
 }
 function Textarea({
   store,
   getter,
   setter,
+  toInputValue,
+  toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
+  const storeProps = useStoreInputWithName(store, {
+    ...props,
+    getter,
+    setter,
+    toInputValue,
+    toStateValue
+  });
   return /* @__PURE__ */ import_react8.default.createElement("textarea", { ...props, ...storeProps });
 }
 

package/dist/use_form_store.mjs

@@ -83,9 +83,7 @@ function useStore(initialState) {
 }
 
 // src/use_store_component.tsx
-import {
-  useCallback
-} from "react";
+import { useCallback } from "react";
 import React2 from "react";
 
 // src/use_store_input.tsx
@@ -93,21 +91,11 @@ import "react";
 import { format } from "date-fns";
 
 // src/use_store_controller.tsx
-import { useEffect as useEffect2, useId, useRef as useRef2 } from "react";
+import { useId, useImperativeHandle, useRef as useRef2 } from "react";
 function useStoreController(store, props) {
   const ref = useRef2(null);
+  useImperativeHandle(props.ref, () => ref.current, []);
   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;
@@ -115,7 +103,7 @@ function useStoreController(store, props) {
     if (!ref.current) return;
     props.onSubscribe(state, ref.current);
   });
-  const onChange = () => {
+  const dispatch = () => {
     store.dispatch(
       (state) => {
         const element = ref.current;
@@ -129,26 +117,24 @@ function useStoreController(store, props) {
   };
   return {
     ref,
-    onChange
+    dispatch
   };
 }
 
 // src/use_store_input.tsx
 function useStoreInput(store, props) {
-  const toInputValue = (value) => {
+  const toInputValue = props.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));
+      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;
@@ -173,16 +159,15 @@ function useStoreInput(store, props) {
     }
     return toInputChecked(props.getter(store.state));
   };
-  function toStateValue(value) {
-    const selected = props.getter(store.state);
-    if (typeof selected === "number") {
+  const toStateValue = props.toStateValue || ((value) => {
+    if (props.type === "number" || props.type === "range") {
       return Number(value);
     }
-    if (selected instanceof Date) {
+    if (props.type === "datetime-local") {
       return new Date(value);
     }
     return value;
-  }
+  });
   const inputProps = useStoreController(store, {
     ref: props.ref,
     onSubscribe: (state, element) => {
@@ -215,7 +200,7 @@ function useStoreInput(store, props) {
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
-      inputProps.onChange();
+      inputProps.dispatch();
       props.onChange?.(event);
     }
   };
@@ -247,15 +232,24 @@ function useStoreInputWithName(store, props) {
 
 // src/use_store_component.tsx
 function useStoreComponent(store) {
-  const input = useCallback(function Component(props) {
-    return /* @__PURE__ */ React2.createElement(Input, { store, ...props });
-  }, []);
-  const select = useCallback(function Component(props) {
-    return /* @__PURE__ */ React2.createElement(Select, { store, ...props });
-  }, []);
-  const textarea = useCallback(function Component(props) {
-    return /* @__PURE__ */ React2.createElement(Textarea, { store, ...props });
-  }, []);
+  const input = useCallback(
+    function Component(props) {
+      return /* @__PURE__ */ React2.createElement(Input, { store, ...props });
+    },
+    []
+  );
+  const select = useCallback(
+    function Component(props) {
+      return /* @__PURE__ */ React2.createElement(Select, { store, ...props });
+    },
+    []
+  );
+  const textarea = useCallback(
+    function Component(props) {
+      return /* @__PURE__ */ React2.createElement(Textarea, { store, ...props });
+    },
+    []
+  );
   return {
     input,
     select,
@@ -266,27 +260,51 @@ function Input({
   store,
   getter,
   setter,
+  toInputValue,
+  toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
+  const storeProps = useStoreInputWithName(store, {
+    ...props,
+    getter,
+    setter,
+    toInputValue,
+    toStateValue
+  });
   return /* @__PURE__ */ React2.createElement("input", { ...props, ...storeProps });
 }
 function Select({
   store,
   getter,
   setter,
+  toInputValue,
+  toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
+  const storeProps = useStoreInputWithName(store, {
+    ...props,
+    getter,
+    setter,
+    toInputValue,
+    toStateValue
+  });
   return /* @__PURE__ */ React2.createElement("select", { ...props, ...storeProps });
 }
 function Textarea({
   store,
   getter,
   setter,
+  toInputValue,
+  toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
+  const storeProps = useStoreInputWithName(store, {
+    ...props,
+    getter,
+    setter,
+    toInputValue,
+    toStateValue
+  });
   return /* @__PURE__ */ React2.createElement("textarea", { ...props, ...storeProps });
 }
 

package/dist/use_store_component.d.mts

@@ -1,21 +1,18 @@
-import React__default, { DetailedHTMLProps, InputHTMLAttributes } from 'react';
 import { Store } from './use_store.mjs';
+import React__default from 'react';
+import { StoreInputWithNameProps } from './use_store_input_with_name.mjs';
+import './use_store_input.mjs';
 
-type StoreComponentProps<TInputElement, TState> = Omit<DetailedHTMLProps<InputHTMLAttributes<TInputElement>, TInputElement>, "name"> & {
-    name?: keyof TState;
-    getter?: (state: TState) => unknown;
-    setter?: (state: TState, value: unknown) => void;
-};
 declare function useStoreComponent<TState>(store: Store<TState>): {
-    input: React__default.FC<StoreComponentProps<HTMLInputElement, TState>>;
-    select: React__default.FC<StoreComponentProps<HTMLSelectElement, TState>>;
-    textarea: React__default.FC<StoreComponentProps<HTMLTextAreaElement, TState>>;
+    input: <TName extends keyof TState | undefined, TValue>(props: StoreInputWithNameProps<HTMLInputElement, TState, TName, TValue>) => React__default.JSX.Element;
+    select: <TName extends keyof TState | undefined, TValue>(props: StoreInputWithNameProps<HTMLSelectElement, TState, TName, TValue>) => React__default.JSX.Element;
+    textarea: <TName extends keyof TState | undefined, TValue>(props: StoreInputWithNameProps<HTMLTextAreaElement, TState, TName, TValue>) => React__default.JSX.Element;
 };
-type StoreComponentPropsWithStore<TElement extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, TState> = StoreComponentProps<TElement, TState> & {
+type StoreComponentPropsWithStore<TElement extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, TState, TName extends keyof TState | undefined, TValue> = StoreInputWithNameProps<TElement, TState, TName, TValue> & {
     store: Store<TState>;
 };
-declare function Input<TState>({ store, getter, setter, ...props }: StoreComponentPropsWithStore<HTMLInputElement, TState>): React__default.JSX.Element;
-declare function Select<TState>({ store, getter, setter, ...props }: StoreComponentPropsWithStore<HTMLSelectElement, TState>): React__default.JSX.Element;
-declare function Textarea<TState>({ store, getter, setter, ...props }: StoreComponentPropsWithStore<HTMLTextAreaElement, TState>): React__default.JSX.Element;
+declare function Input<TState, TName extends keyof TState | undefined, TValue>({ store, getter, setter, toInputValue, toStateValue, ...props }: StoreComponentPropsWithStore<HTMLInputElement, TState, TName, TValue>): React__default.JSX.Element;
+declare function Select<TState, TName extends keyof TState | undefined, TValue>({ store, getter, setter, toInputValue, toStateValue, ...props }: StoreComponentPropsWithStore<HTMLSelectElement, TState, TName, TValue>): React__default.JSX.Element;
+declare function Textarea<TState, TName extends keyof TState | undefined, TValue>({ store, getter, setter, toInputValue, toStateValue, ...props }: StoreComponentPropsWithStore<HTMLTextAreaElement, TState, TName, TValue>): React__default.JSX.Element;
 
-export { Input, Select, type StoreComponentProps, type StoreComponentPropsWithStore, Textarea, useStoreComponent };
+export { Input, Select, type StoreComponentPropsWithStore, Textarea, useStoreComponent };

package/dist/use_store_component.d.ts

@@ -1,21 +1,18 @@
-import React__default, { DetailedHTMLProps, InputHTMLAttributes } from 'react';
 import { Store } from './use_store.js';
+import React__default from 'react';
+import { StoreInputWithNameProps } from './use_store_input_with_name.js';
+import './use_store_input.js';
 
-type StoreComponentProps<TInputElement, TState> = Omit<DetailedHTMLProps<InputHTMLAttributes<TInputElement>, TInputElement>, "name"> & {
-    name?: keyof TState;
-    getter?: (state: TState) => unknown;
-    setter?: (state: TState, value: unknown) => void;
-};
 declare function useStoreComponent<TState>(store: Store<TState>): {
-    input: React__default.FC<StoreComponentProps<HTMLInputElement, TState>>;
-    select: React__default.FC<StoreComponentProps<HTMLSelectElement, TState>>;
-    textarea: React__default.FC<StoreComponentProps<HTMLTextAreaElement, TState>>;
+    input: <TName extends keyof TState | undefined, TValue>(props: StoreInputWithNameProps<HTMLInputElement, TState, TName, TValue>) => React__default.JSX.Element;
+    select: <TName extends keyof TState | undefined, TValue>(props: StoreInputWithNameProps<HTMLSelectElement, TState, TName, TValue>) => React__default.JSX.Element;
+    textarea: <TName extends keyof TState | undefined, TValue>(props: StoreInputWithNameProps<HTMLTextAreaElement, TState, TName, TValue>) => React__default.JSX.Element;
 };
-type StoreComponentPropsWithStore<TElement extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, TState> = StoreComponentProps<TElement, TState> & {
+type StoreComponentPropsWithStore<TElement extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, TState, TName extends keyof TState | undefined, TValue> = StoreInputWithNameProps<TElement, TState, TName, TValue> & {
     store: Store<TState>;
 };
-declare function Input<TState>({ store, getter, setter, ...props }: StoreComponentPropsWithStore<HTMLInputElement, TState>): React__default.JSX.Element;
-declare function Select<TState>({ store, getter, setter, ...props }: StoreComponentPropsWithStore<HTMLSelectElement, TState>): React__default.JSX.Element;
-declare function Textarea<TState>({ store, getter, setter, ...props }: StoreComponentPropsWithStore<HTMLTextAreaElement, TState>): React__default.JSX.Element;
+declare function Input<TState, TName extends keyof TState | undefined, TValue>({ store, getter, setter, toInputValue, toStateValue, ...props }: StoreComponentPropsWithStore<HTMLInputElement, TState, TName, TValue>): React__default.JSX.Element;
+declare function Select<TState, TName extends keyof TState | undefined, TValue>({ store, getter, setter, toInputValue, toStateValue, ...props }: StoreComponentPropsWithStore<HTMLSelectElement, TState, TName, TValue>): React__default.JSX.Element;
+declare function Textarea<TState, TName extends keyof TState | undefined, TValue>({ store, getter, setter, toInputValue, toStateValue, ...props }: StoreComponentPropsWithStore<HTMLTextAreaElement, TState, TName, TValue>): React__default.JSX.Element;
 
-export { Input, Select, type StoreComponentProps, type StoreComponentPropsWithStore, Textarea, useStoreComponent };
+export { Input, Select, type StoreComponentPropsWithStore, Textarea, useStoreComponent };

package/dist/use_store_component.js

@@ -60,18 +60,8 @@ function useSubscribe(store, subscriber) {
 // src/use_store_controller.tsx
 function useStoreController(store, props) {
   const ref = (0, import_react2.useRef)(null);
+  (0, import_react2.useImperativeHandle)(props.ref, () => ref.current, []);
   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;
@@ -79,7 +69,7 @@ function useStoreController(store, props) {
     if (!ref.current) return;
     props.onSubscribe(state, ref.current);
   });
-  const onChange = () => {
+  const dispatch = () => {
     store.dispatch(
       (state) => {
         const element = ref.current;
@@ -93,26 +83,24 @@ function useStoreController(store, props) {
   };
   return {
     ref,
-    onChange
+    dispatch
   };
 }
 
 // src/use_store_input.tsx
 function useStoreInput(store, props) {
-  const toInputValue = (value) => {
+  const toInputValue = props.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));
+      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;
@@ -137,16 +125,15 @@ function useStoreInput(store, props) {
     }
     return toInputChecked(props.getter(store.state));
   };
-  function toStateValue(value) {
-    const selected = props.getter(store.state);
-    if (typeof selected === "number") {
+  const toStateValue = props.toStateValue || ((value) => {
+    if (props.type === "number" || props.type === "range") {
       return Number(value);
     }
-    if (selected instanceof Date) {
+    if (props.type === "datetime-local") {
       return new Date(value);
     }
     return value;
-  }
+  });
   const inputProps = useStoreController(store, {
     ref: props.ref,
     onSubscribe: (state, element) => {
@@ -179,7 +166,7 @@ function useStoreInput(store, props) {
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
-      inputProps.onChange();
+      inputProps.dispatch();
       props.onChange?.(event);
     }
   };
@@ -211,15 +198,24 @@ function useStoreInputWithName(store, props) {
 
 // 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 });
-  }, []);
+  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,
@@ -230,27 +226,51 @@ function Input({
   store,
   getter,
   setter,
+  toInputValue,
+  toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
+  const storeProps = useStoreInputWithName(store, {
+    ...props,
+    getter,
+    setter,
+    toInputValue,
+    toStateValue
+  });
   return /* @__PURE__ */ import_react5.default.createElement("input", { ...props, ...storeProps });
 }
 function Select({
   store,
   getter,
   setter,
+  toInputValue,
+  toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
+  const storeProps = useStoreInputWithName(store, {
+    ...props,
+    getter,
+    setter,
+    toInputValue,
+    toStateValue
+  });
   return /* @__PURE__ */ import_react5.default.createElement("select", { ...props, ...storeProps });
 }
 function Textarea({
   store,
   getter,
   setter,
+  toInputValue,
+  toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
+  const storeProps = useStoreInputWithName(store, {
+    ...props,
+    getter,
+    setter,
+    toInputValue,
+    toStateValue
+  });
   return /* @__PURE__ */ import_react5.default.createElement("textarea", { ...props, ...storeProps });
 }
 // Annotate the CommonJS export names for ESM import in node: