react-store-input 0.2.4 → 0.2.6

package/dist/use_store_component.js

@@ -32,28 +32,20 @@ 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) {
+function useStoreController(store, props) {
+  const dispatchKey = (0, import_react.useId)();
   (0, import_react.useEffect)(() => {
-    const unsubscribe = store.subscribe(subscriber);
+    const unsub = store.subscribe((state, key) => {
+      if (key === dispatchKey) {
+        return;
+      }
+      props.onSubscribe(state);
+    });
     return () => {
-      unsubscribe();
+      unsub();
     };
   }, []);
-}
-
-// src/use_store_controller.tsx
-function useStoreController(store, props) {
-  const dispatchKey = (0, import_react2.useId)();
-  useSubscribe(store, (state, key) => {
-    if (key === dispatchKey) {
-      return;
-    }
-    props.onSubscribe(state);
-  });
   const dispatch = () => {
     store.dispatch(
       (state) => {
@@ -184,22 +176,102 @@ function useStoreInputWithName(ref, store, props) {
   };
 }
 
-// src/use_store_component.tsx
+// src/text_editor.tsx
+var import_gw_react_text_editor = require("gw-react-text-editor");
+var import_react2 = require("react");
 var import_jsx_runtime = 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_runtime.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_runtime2 = require("react/jsx-runtime");
 function useStoreComponent(store) {
   const input = (0, import_react3.useCallback)(function Component(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, { store, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Input, { store, ...props });
   }, []);
   const select = (0, import_react3.useCallback)(function Component(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Select, { store, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Select, { store, ...props });
   }, []);
   const textarea = (0, import_react3.useCallback)(function Component(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Textarea, { store, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Textarea, { store, ...props });
+  }, []);
+  const textEditor = (0, import_react3.useCallback)(function Component(props) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TextEditor, { store, ...props });
   }, []);
   return {
     input,
     select,
-    textarea
+    textarea,
+    textEditor
   };
 }
 function Input({
@@ -218,7 +290,7 @@ function Input({
     toInputValue,
     toStateValue
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ref, ...props, ...storeProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { ref, ...props, ...storeProps });
 }
 function Select({
   store,
@@ -236,7 +308,7 @@ function Select({
     toInputValue,
     toStateValue
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("select", { ref, ...props, ...storeProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("select", { ref, ...props, ...storeProps });
 }
 function Textarea({
   store,
@@ -254,7 +326,7 @@ function Textarea({
     toInputValue,
     toStateValue
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", { ref, ...props, ...storeProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("textarea", { ref, ...props, ...storeProps });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/use_store_component.mjs

@@ -1,32 +1,24 @@
 // src/use_store_component.tsx
-import { useCallback, useRef } from "react";
+import { useCallback, useRef as useRef2 } from "react";
 
 // src/use_store_input.tsx
 import { format } from "date-fns";
 
 // src/use_store_controller.tsx
-import { useId } from "react";
-
-// src/use_subscribe.tsx
-import { useEffect } from "react";
-function useSubscribe(store, subscriber) {
+import { useEffect, useId } from "react";
+function useStoreController(store, props) {
+  const dispatchKey = useId();
   useEffect(() => {
-    const unsubscribe = store.subscribe(subscriber);
+    const unsub = store.subscribe((state, key) => {
+      if (key === dispatchKey) {
+        return;
+      }
+      props.onSubscribe(state);
+    });
     return () => {
-      unsubscribe();
+      unsub();
     };
   }, []);
-}
-
-// src/use_store_controller.tsx
-function useStoreController(store, props) {
-  const dispatchKey = useId();
-  useSubscribe(store, (state, key) => {
-    if (key === dispatchKey) {
-      return;
-    }
-    props.onSubscribe(state);
-  });
   const dispatch = () => {
     store.dispatch(
       (state) => {
@@ -157,22 +149,104 @@ function useStoreInputWithName(ref, store, props) {
   };
 }
 
-// src/use_store_component.tsx
+// src/text_editor.tsx
+import {
+  TextEditor as GwTextEditor
+} from "gw-react-text-editor";
+import { useImperativeHandle, useRef } from "react";
 import { jsx } 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__ */ jsx(
+    GwTextEditor,
+    {
+      ...props,
+      ref: controllerRef,
+      defaultValue: defaultValue ?? getDefaultValue(),
+      onChange: (e) => {
+        dispatch();
+        props.onChange?.(e);
+      }
+    }
+  );
+}
+
+// src/use_store_component.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
 function useStoreComponent(store) {
   const input = useCallback(function Component(props) {
-    return /* @__PURE__ */ jsx(Input, { store, ...props });
+    return /* @__PURE__ */ jsx2(Input, { store, ...props });
   }, []);
   const select = useCallback(function Component(props) {
-    return /* @__PURE__ */ jsx(Select, { store, ...props });
+    return /* @__PURE__ */ jsx2(Select, { store, ...props });
   }, []);
   const textarea = useCallback(function Component(props) {
-    return /* @__PURE__ */ jsx(Textarea, { store, ...props });
+    return /* @__PURE__ */ jsx2(Textarea, { store, ...props });
+  }, []);
+  const textEditor = useCallback(function Component(props) {
+    return /* @__PURE__ */ jsx2(TextEditor, { store, ...props });
   }, []);
   return {
     input,
     select,
-    textarea
+    textarea,
+    textEditor
   };
 }
 function Input({
@@ -183,7 +257,7 @@ function Input({
   toStateValue,
   ...props
 }) {
-  const ref = useRef(null);
+  const ref = useRef2(null);
   const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
@@ -191,7 +265,7 @@ function Input({
     toInputValue,
     toStateValue
   });
-  return /* @__PURE__ */ jsx("input", { ref, ...props, ...storeProps });
+  return /* @__PURE__ */ jsx2("input", { ref, ...props, ...storeProps });
 }
 function Select({
   store,
@@ -201,7 +275,7 @@ function Select({
   toStateValue,
   ...props
 }) {
-  const ref = useRef(null);
+  const ref = useRef2(null);
   const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
@@ -209,7 +283,7 @@ function Select({
     toInputValue,
     toStateValue
   });
-  return /* @__PURE__ */ jsx("select", { ref, ...props, ...storeProps });
+  return /* @__PURE__ */ jsx2("select", { ref, ...props, ...storeProps });
 }
 function Textarea({
   store,
@@ -219,7 +293,7 @@ function Textarea({
   toStateValue,
   ...props
 }) {
-  const ref = useRef(null);
+  const ref = useRef2(null);
   const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
@@ -227,7 +301,7 @@ function Textarea({
     toInputValue,
     toStateValue
   });
-  return /* @__PURE__ */ jsx("textarea", { ref, ...props, ...storeProps });
+  return /* @__PURE__ */ jsx2("textarea", { ref, ...props, ...storeProps });
 }
 export {
   Input,

package/dist/use_store_controller.d.mts

@@ -1,4 +1,4 @@
-import { Store } from './use_store.mjs';
+import { Store } from 'gw-store';
 
 type StoreControllerProps<TState> = {
     onSubscribe: (state: TState) => void;

package/dist/use_store_controller.d.ts

@@ -1,4 +1,4 @@
-import { Store } from './use_store.js';
+import { Store } from 'gw-store';
 
 type StoreControllerProps<TState> = {
     onSubscribe: (state: TState) => void;

package/dist/use_store_controller.js

@@ -23,28 +23,20 @@ __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) {
+function useStoreController(store, props) {
+  const dispatchKey = (0, import_react.useId)();
   (0, import_react.useEffect)(() => {
-    const unsubscribe = store.subscribe(subscriber);
+    const unsub = store.subscribe((state, key) => {
+      if (key === dispatchKey) {
+        return;
+      }
+      props.onSubscribe(state);
+    });
     return () => {
-      unsubscribe();
+      unsub();
     };
   }, []);
-}
-
-// src/use_store_controller.tsx
-function useStoreController(store, props) {
-  const dispatchKey = (0, import_react2.useId)();
-  useSubscribe(store, (state, key) => {
-    if (key === dispatchKey) {
-      return;
-    }
-    props.onSubscribe(state);
-  });
   const dispatch = () => {
     store.dispatch(
       (state) => {

package/dist/use_store_controller.mjs

@@ -1,26 +1,18 @@
 // src/use_store_controller.tsx
-import { useId } from "react";
-
-// src/use_subscribe.tsx
-import { useEffect } from "react";
-function useSubscribe(store, subscriber) {
+import { useEffect, useId } from "react";
+function useStoreController(store, props) {
+  const dispatchKey = useId();
   useEffect(() => {
-    const unsubscribe = store.subscribe(subscriber);
+    const unsub = store.subscribe((state, key) => {
+      if (key === dispatchKey) {
+        return;
+      }
+      props.onSubscribe(state);
+    });
     return () => {
-      unsubscribe();
+      unsub();
     };
   }, []);
-}
-
-// src/use_store_controller.tsx
-function useStoreController(store, props) {
-  const dispatchKey = useId();
-  useSubscribe(store, (state, key) => {
-    if (key === dispatchKey) {
-      return;
-    }
-    props.onSubscribe(state);
-  });
   const dispatch = () => {
     store.dispatch(
       (state) => {

package/dist/use_store_input.d.mts

@@ -1,5 +1,5 @@
 import { HTMLInputTypeAttribute, RefObject } from 'react';
-import { Store } from './use_store.mjs';
+import { Store } from 'gw-store';
 
 type StoreInputProps<TInputElement, TState, TValue> = {
     type?: HTMLInputTypeAttribute;

package/dist/use_store_input.d.ts

@@ -1,5 +1,5 @@
 import { HTMLInputTypeAttribute, RefObject } from 'react';
-import { Store } from './use_store.js';
+import { Store } from 'gw-store';
 
 type StoreInputProps<TInputElement, TState, TValue> = {
     type?: HTMLInputTypeAttribute;

package/dist/use_store_input.js

@@ -26,28 +26,20 @@ module.exports = __toCommonJS(use_store_input_exports);
 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) {
+function useStoreController(store, props) {
+  const dispatchKey = (0, import_react.useId)();
   (0, import_react.useEffect)(() => {
-    const unsubscribe = store.subscribe(subscriber);
+    const unsub = store.subscribe((state, key) => {
+      if (key === dispatchKey) {
+        return;
+      }
+      props.onSubscribe(state);
+    });
     return () => {
-      unsubscribe();
+      unsub();
     };
   }, []);
-}
-
-// src/use_store_controller.tsx
-function useStoreController(store, props) {
-  const dispatchKey = (0, import_react2.useId)();
-  useSubscribe(store, (state, key) => {
-    if (key === dispatchKey) {
-      return;
-    }
-    props.onSubscribe(state);
-  });
   const dispatch = () => {
     store.dispatch(
       (state) => {

package/dist/use_store_input.mjs

@@ -2,28 +2,20 @@
 import { format } from "date-fns";
 
 // src/use_store_controller.tsx
-import { useId } from "react";
-
-// src/use_subscribe.tsx
-import { useEffect } from "react";
-function useSubscribe(store, subscriber) {
+import { useEffect, useId } from "react";
+function useStoreController(store, props) {
+  const dispatchKey = useId();
   useEffect(() => {
-    const unsubscribe = store.subscribe(subscriber);
+    const unsub = store.subscribe((state, key) => {
+      if (key === dispatchKey) {
+        return;
+      }
+      props.onSubscribe(state);
+    });
     return () => {
-      unsubscribe();
+      unsub();
     };
   }, []);
-}
-
-// src/use_store_controller.tsx
-function useStoreController(store, props) {
-  const dispatchKey = useId();
-  useSubscribe(store, (state, key) => {
-    if (key === dispatchKey) {
-      return;
-    }
-    props.onSubscribe(state);
-  });
   const dispatch = () => {
     store.dispatch(
       (state) => {

package/dist/use_store_input_with_name.d.mts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { RefObject } from 'react';
-import { Store } from './use_store.mjs';
+import { Store } from 'gw-store';
 import { StoreInputProps } from './use_store_input.mjs';
 
 type InferNameFromProps<TState, TName extends keyof TState | undefined, TValue> = undefined extends TName ? TValue : TName extends keyof TState ? TState[TName] : TValue;

package/dist/use_store_input_with_name.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { RefObject } from 'react';
-import { Store } from './use_store.js';
+import { Store } from 'gw-store';
 import { StoreInputProps } from './use_store_input.js';
 
 type InferNameFromProps<TState, TName extends keyof TState | undefined, TValue> = undefined extends TName ? TValue : TName extends keyof TState ? TState[TName] : TValue;

package/dist/use_store_input_with_name.js

@@ -28,28 +28,20 @@ module.exports = __toCommonJS(use_store_input_with_name_exports);
 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) {
+function useStoreController(store, props) {
+  const dispatchKey = (0, import_react.useId)();
   (0, import_react.useEffect)(() => {
-    const unsubscribe = store.subscribe(subscriber);
+    const unsub = store.subscribe((state, key) => {
+      if (key === dispatchKey) {
+        return;
+      }
+      props.onSubscribe(state);
+    });
     return () => {
-      unsubscribe();
+      unsub();
     };
   }, []);
-}
-
-// src/use_store_controller.tsx
-function useStoreController(store, props) {
-  const dispatchKey = (0, import_react2.useId)();
-  useSubscribe(store, (state, key) => {
-    if (key === dispatchKey) {
-      return;
-    }
-    props.onSubscribe(state);
-  });
   const dispatch = () => {
     store.dispatch(
       (state) => {

package/dist/use_store_input_with_name.mjs

@@ -2,28 +2,20 @@
 import { format } from "date-fns";
 
 // src/use_store_controller.tsx
-import { useId } from "react";
-
-// src/use_subscribe.tsx
-import { useEffect } from "react";
-function useSubscribe(store, subscriber) {
+import { useEffect, useId } from "react";
+function useStoreController(store, props) {
+  const dispatchKey = useId();
   useEffect(() => {
-    const unsubscribe = store.subscribe(subscriber);
+    const unsub = store.subscribe((state, key) => {
+      if (key === dispatchKey) {
+        return;
+      }
+      props.onSubscribe(state);
+    });
     return () => {
-      unsubscribe();
+      unsub();
     };
   }, []);
-}
-
-// src/use_store_controller.tsx
-function useStoreController(store, props) {
-  const dispatchKey = useId();
-  useSubscribe(store, (state, key) => {
-    if (key === dispatchKey) {
-      return;
-    }
-    props.onSubscribe(state);
-  });
   const dispatch = () => {
     store.dispatch(
       (state) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-store-input",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.mjs",
   "module": "./dist/index.js",
@@ -18,14 +18,14 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/dndnsoft/react-store-input.git"
+    "url": "git+https://github.com/gawonsoft/react-store-input.git"
   },
   "author": "",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/dndnsoft/react-store-input/issues"
+    "url": "https://github.com/gawonsoft/react-store-input/issues"
   },
-  "homepage": "https://github.com/dndnsoft/react-store-input#readme",
+  "homepage": "https://github.com/gawonsoft/react-store-input#readme",
   "description": "",
   "devDependencies": {
     "@types/node": "^24.10.1",
@@ -40,6 +40,8 @@
   },
   "dependencies": {
     "date-fns": "^4.1.0",
+    "gw-react-text-editor": "^0.1.4",
+    "gw-store": "^0.1.1",
     "immer": "^11.1.3"
   }
 }