react-store-input 0.2.5 → 0.4.0

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
-};

package/dist/use_store_component.d.mts

@@ -1,23 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { DetailedHTMLProps } from 'react';
-import { Store } from 'gw-store';
-import { StoreInputWithNameProps } from './use_store_input_with_name.mjs';
-import { TextEditorProps } from './text_editor.mjs';
-import './use_store_input.mjs';
-import 'gw-react-text-editor';
-
-type StoreInputWithNameComponentProps<TElement, TState, TName extends keyof TState | undefined, TValue> = StoreInputWithNameProps<TElement, TState, TName, TValue> & Omit<DetailedHTMLProps<React.InputHTMLAttributes<TElement>, TElement>, keyof StoreInputWithNameProps<TElement, TState, TName, TValue>>;
-declare function useStoreComponent<TState>(store: Store<TState>): {
-    input: <TName extends keyof TState | undefined, TValue>(props: StoreInputWithNameComponentProps<HTMLInputElement, TState, TName, TValue>) => react_jsx_runtime.JSX.Element;
-    select: <TName extends keyof TState | undefined, TValue>(props: StoreInputWithNameComponentProps<HTMLSelectElement, TState, TName, TValue>) => react_jsx_runtime.JSX.Element;
-    textarea: <TName extends keyof TState | undefined, TValue>(props: StoreInputWithNameComponentProps<HTMLTextAreaElement, TState, TName, TValue>) => react_jsx_runtime.JSX.Element;
-    textEditor: (props: Omit<TextEditorProps<TState>, "store">) => react_jsx_runtime.JSX.Element;
-};
-type StoreComponentPropsWithStore<TElement extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, TState, TName extends keyof TState | undefined, TValue> = StoreInputWithNameComponentProps<TElement, TState, TName, TValue> & {
-    store: Store<TState>;
-};
-declare function Input<TState, TName extends keyof TState | undefined, TValue>({ store, getter, setter, toInputValue, toStateValue, ...props }: StoreComponentPropsWithStore<HTMLInputElement, TState, TName, TValue>): react_jsx_runtime.JSX.Element;
-declare function Select<TState, TName extends keyof TState | undefined, TValue>({ store, getter, setter, toInputValue, toStateValue, ...props }: StoreComponentPropsWithStore<HTMLSelectElement, TState, TName, TValue>): react_jsx_runtime.JSX.Element;
-declare function Textarea<TState, TName extends keyof TState | undefined, TValue>({ store, getter, setter, toInputValue, toStateValue, ...props }: StoreComponentPropsWithStore<HTMLTextAreaElement, TState, TName, TValue>): react_jsx_runtime.JSX.Element;
-
-export { Input, Select, type StoreComponentPropsWithStore, type StoreInputWithNameComponentProps, Textarea, useStoreComponent };

package/dist/use_store_component.d.ts

@@ -1,23 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { DetailedHTMLProps } from 'react';
-import { Store } from 'gw-store';
-import { StoreInputWithNameProps } from './use_store_input_with_name.js';
-import { TextEditorProps } from './text_editor.js';
-import './use_store_input.js';
-import 'gw-react-text-editor';
-
-type StoreInputWithNameComponentProps<TElement, TState, TName extends keyof TState | undefined, TValue> = StoreInputWithNameProps<TElement, TState, TName, TValue> & Omit<DetailedHTMLProps<React.InputHTMLAttributes<TElement>, TElement>, keyof StoreInputWithNameProps<TElement, TState, TName, TValue>>;
-declare function useStoreComponent<TState>(store: Store<TState>): {
-    input: <TName extends keyof TState | undefined, TValue>(props: StoreInputWithNameComponentProps<HTMLInputElement, TState, TName, TValue>) => react_jsx_runtime.JSX.Element;
-    select: <TName extends keyof TState | undefined, TValue>(props: StoreInputWithNameComponentProps<HTMLSelectElement, TState, TName, TValue>) => react_jsx_runtime.JSX.Element;
-    textarea: <TName extends keyof TState | undefined, TValue>(props: StoreInputWithNameComponentProps<HTMLTextAreaElement, TState, TName, TValue>) => react_jsx_runtime.JSX.Element;
-    textEditor: (props: Omit<TextEditorProps<TState>, "store">) => react_jsx_runtime.JSX.Element;
-};
-type StoreComponentPropsWithStore<TElement extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, TState, TName extends keyof TState | undefined, TValue> = StoreInputWithNameComponentProps<TElement, TState, TName, TValue> & {
-    store: Store<TState>;
-};
-declare function Input<TState, TName extends keyof TState | undefined, TValue>({ store, getter, setter, toInputValue, toStateValue, ...props }: StoreComponentPropsWithStore<HTMLInputElement, TState, TName, TValue>): react_jsx_runtime.JSX.Element;
-declare function Select<TState, TName extends keyof TState | undefined, TValue>({ store, getter, setter, toInputValue, toStateValue, ...props }: StoreComponentPropsWithStore<HTMLSelectElement, TState, TName, TValue>): react_jsx_runtime.JSX.Element;
-declare function Textarea<TState, TName extends keyof TState | undefined, TValue>({ store, getter, setter, toInputValue, toStateValue, ...props }: StoreComponentPropsWithStore<HTMLTextAreaElement, TState, TName, TValue>): react_jsx_runtime.JSX.Element;
-
-export { Input, Select, type StoreComponentPropsWithStore, type StoreInputWithNameComponentProps, Textarea, useStoreComponent };