react-store-input 0.1.5 → 0.1.6

package/dist/use_store_component.mjs

@@ -1,7 +1,5 @@
 // src/use_store_component.tsx
-import {
-  useCallback
-} from "react";
+import { useCallback } from "react";
 import React from "react";
 
 // src/use_store_input.tsx
@@ -34,7 +32,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;
@@ -48,26 +46,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;
@@ -92,16 +88,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) => {
@@ -134,7 +129,7 @@ function useStoreInput(store, props) {
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
-      inputProps.onChange();
+      inputProps.dispatch();
       props.onChange?.(event);
     }
   };
@@ -166,15 +161,24 @@ function useStoreInputWithName(store, props) {
 
 // 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 });
-  }, []);
+  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,
@@ -185,27 +189,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__ */ React.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__ */ React.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__ */ React.createElement("textarea", { ...props, ...storeProps });
 }
 export {

package/dist/use_store_controller.d.mts

@@ -9,7 +9,7 @@ type StoreControllerProps<TController, TState> = {
 };
 declare function useStoreController<TController, TState>(store: Store<TState>, props: StoreControllerProps<TController, TState>): {
     ref: React.RefObject<TController | null>;
-    onChange: () => void;
+    dispatch: () => void;
 };
 
 export { type StoreControllerProps, useStoreController };

package/dist/use_store_controller.d.ts

@@ -9,7 +9,7 @@ type StoreControllerProps<TController, TState> = {
 };
 declare function useStoreController<TController, TState>(store: Store<TState>, props: StoreControllerProps<TController, TState>): {
     ref: React.RefObject<TController | null>;
-    onChange: () => void;
+    dispatch: () => void;
 };
 
 export { type StoreControllerProps, useStoreController };

package/dist/use_store_controller.js

@@ -48,7 +48,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;
@@ -62,7 +62,7 @@ function useStoreController(store, props) {
   };
   return {
     ref,
-    onChange
+    dispatch
   };
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/use_store_controller.mjs

@@ -24,7 +24,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;
@@ -38,7 +38,7 @@ function useStoreController(store, props) {
   };
   return {
     ref,
-    onChange
+    dispatch
   };
 }
 export {

package/dist/use_store_input.d.mts

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import { Ref, HTMLInputTypeAttribute } from 'react';
 import { Store } from './use_store.mjs';
 
-type StoreInputProps<TInputElement, TState> = {
+type StoreInputProps<TInputElement, TState, TValue> = {
     ref?: Ref<TInputElement>;
     type?: HTMLInputTypeAttribute;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -10,10 +10,12 @@ type StoreInputProps<TInputElement, TState> = {
     defaultChecked?: boolean | undefined;
     onChange?: (event: React.ChangeEvent<TInputElement>) => void;
 } & {
-    getter: (state: TState) => unknown;
-    setter: (state: TState, value: unknown) => void;
+    getter: (state: TState) => TValue;
+    setter: (state: TState, value: TValue) => void;
+    toInputValue?: (value: TValue) => string;
+    toStateValue?: (value: string) => TValue;
 };
-declare function useStoreInput<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState>(store: Store<TState>, props: StoreInputProps<TInputElement, TState>): {
+declare function useStoreInput<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState, TValue>(store: Store<TState>, props: StoreInputProps<TInputElement, TState, TValue>): {
     ref: React$1.RefObject<TInputElement | null>;
     defaultValue: string | number | readonly string[] | undefined;
     defaultChecked: boolean | undefined;

package/dist/use_store_input.d.ts

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import { Ref, HTMLInputTypeAttribute } from 'react';
 import { Store } from './use_store.js';
 
-type StoreInputProps<TInputElement, TState> = {
+type StoreInputProps<TInputElement, TState, TValue> = {
     ref?: Ref<TInputElement>;
     type?: HTMLInputTypeAttribute;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -10,10 +10,12 @@ type StoreInputProps<TInputElement, TState> = {
     defaultChecked?: boolean | undefined;
     onChange?: (event: React.ChangeEvent<TInputElement>) => void;
 } & {
-    getter: (state: TState) => unknown;
-    setter: (state: TState, value: unknown) => void;
+    getter: (state: TState) => TValue;
+    setter: (state: TState, value: TValue) => void;
+    toInputValue?: (value: TValue) => string;
+    toStateValue?: (value: string) => TValue;
 };
-declare function useStoreInput<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState>(store: Store<TState>, props: StoreInputProps<TInputElement, TState>): {
+declare function useStoreInput<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState, TValue>(store: Store<TState>, props: StoreInputProps<TInputElement, TState, TValue>): {
     ref: React$1.RefObject<TInputElement | null>;
     defaultValue: string | number | readonly string[] | undefined;
     defaultChecked: boolean | undefined;

package/dist/use_store_input.js

@@ -52,7 +52,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;
@@ -66,26 +66,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;
@@ -110,16 +108,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) => {
@@ -152,7 +149,7 @@ function useStoreInput(store, props) {
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
-      inputProps.onChange();
+      inputProps.dispatch();
       props.onChange?.(event);
     }
   };

package/dist/use_store_input.mjs

@@ -28,7 +28,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;
@@ -42,26 +42,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;
@@ -86,16 +84,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) => {
@@ -128,7 +125,7 @@ function useStoreInput(store, props) {
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
-      inputProps.onChange();
+      inputProps.dispatch();
       props.onChange?.(event);
     }
   };

package/dist/use_store_input_with_name.d.mts

@@ -2,10 +2,11 @@ import * as React from 'react';
 import { Store } from './use_store.mjs';
 import { StoreInputProps } from './use_store_input.mjs';
 
-type Props<TInputElement, TState> = Omit<StoreInputProps<TInputElement, TState>, "getter" | "setter"> & Partial<Pick<StoreInputProps<TInputElement, TState>, "getter" | "setter">> & {
-    name?: keyof TState;
+type InferNameFromProps<TState, TName extends keyof TState | undefined, TValue> = undefined extends TName ? TValue : TName extends keyof TState ? TState[TName] : TValue;
+type StoreInputWithNameProps<TInputElement, TState, TName extends keyof TState | undefined, TValue> = Omit<StoreInputProps<TInputElement, TState, InferNameFromProps<TState, TName, TValue>>, "getter" | "setter"> & Partial<Pick<StoreInputProps<TInputElement, TState, InferNameFromProps<TState, TName, TValue>>, "getter" | "setter">> & {
+    name?: TName;
 };
-declare function useStoreInputWithName<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState>(store: Store<TState>, props: Props<TInputElement, TState>): {
+declare function useStoreInputWithName<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState, TName extends keyof TState | undefined, TValue>(store: Store<TState>, props: StoreInputWithNameProps<TInputElement, TState, TName, TValue>): {
     name: string | undefined;
     ref: React.RefObject<TInputElement | null>;
     defaultValue: string | number | readonly string[] | undefined;
@@ -13,4 +14,4 @@ declare function useStoreInputWithName<TInputElement extends HTMLInputElement |
     onChange: (event: React.ChangeEvent<TInputElement>) => void;
 };
 
-export { useStoreInputWithName };
+export { type InferNameFromProps, type StoreInputWithNameProps, useStoreInputWithName };

package/dist/use_store_input_with_name.d.ts

@@ -2,10 +2,11 @@ import * as React from 'react';
 import { Store } from './use_store.js';
 import { StoreInputProps } from './use_store_input.js';
 
-type Props<TInputElement, TState> = Omit<StoreInputProps<TInputElement, TState>, "getter" | "setter"> & Partial<Pick<StoreInputProps<TInputElement, TState>, "getter" | "setter">> & {
-    name?: keyof TState;
+type InferNameFromProps<TState, TName extends keyof TState | undefined, TValue> = undefined extends TName ? TValue : TName extends keyof TState ? TState[TName] : TValue;
+type StoreInputWithNameProps<TInputElement, TState, TName extends keyof TState | undefined, TValue> = Omit<StoreInputProps<TInputElement, TState, InferNameFromProps<TState, TName, TValue>>, "getter" | "setter"> & Partial<Pick<StoreInputProps<TInputElement, TState, InferNameFromProps<TState, TName, TValue>>, "getter" | "setter">> & {
+    name?: TName;
 };
-declare function useStoreInputWithName<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState>(store: Store<TState>, props: Props<TInputElement, TState>): {
+declare function useStoreInputWithName<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState, TName extends keyof TState | undefined, TValue>(store: Store<TState>, props: StoreInputWithNameProps<TInputElement, TState, TName, TValue>): {
     name: string | undefined;
     ref: React.RefObject<TInputElement | null>;
     defaultValue: string | number | readonly string[] | undefined;
@@ -13,4 +14,4 @@ declare function useStoreInputWithName<TInputElement extends HTMLInputElement |
     onChange: (event: React.ChangeEvent<TInputElement>) => void;
 };
 
-export { useStoreInputWithName };
+export { type InferNameFromProps, type StoreInputWithNameProps, useStoreInputWithName };

package/dist/use_store_input_with_name.js

@@ -54,7 +54,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;
@@ -68,26 +68,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;
@@ -112,16 +110,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) => {
@@ -154,7 +151,7 @@ function useStoreInput(store, props) {
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
-      inputProps.onChange();
+      inputProps.dispatch();
       props.onChange?.(event);
     }
   };

package/dist/use_store_input_with_name.mjs

@@ -28,7 +28,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;
@@ -42,26 +42,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;
@@ -86,16 +84,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) => {
@@ -128,7 +125,7 @@ function useStoreInput(store, props) {
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
-      inputProps.onChange();
+      inputProps.dispatch();
       props.onChange?.(event);
     }
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-store-input",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.mjs",
   "module": "./dist/index.js",

package/dist/serialize.d.mts

@@ -1,4 +0,0 @@
-declare function serialize(value: unknown): unknown;
-declare function deserialize(data: unknown): unknown;
-
-export { deserialize, serialize };

package/dist/serialize.d.ts

@@ -1,4 +0,0 @@
-declare function serialize(value: unknown): unknown;
-declare function deserialize(data: unknown): unknown;
-
-export { deserialize, serialize };