@wwog/react 1.2.0 → 1.2.2

package/README.md

@@ -141,32 +141,24 @@ function Example({ isActive }) {
 - `<True condition={...}>`：当 condition 为 true 时渲染子内容。
 - `<False condition={...}>`：当 condition 为 false 时渲染子内容。
 
-#### `<Toggle>`
+#### `<Toggle>` (v1.2.0+)
 
 声明式切换组件，在预定义选项中切换值，并通过指定属性传递给子组件，支持自定义切换逻辑。
 
+> v1.2.1 Indexing is now used to fix bugs with arbitrary values
+
 ```tsx
 import { Toggle } from "@wwog/react";
 
-interface ThemeChildProps {
-  theme: string;
-  toggleTheme: () => void;
-}
-const ThemeChild: React.FC<ThemeChildProps> = ({ theme, toggleTheme }) => (
-  <div onClick={toggleTheme}>当前主题: {theme}</div>
-);
-
-<Toggle source="light" options={["light", "dark"]} target="theme" toggleTarget="toggleTheme">
-  <ThemeChild />
-</Toggle>
+<Toggle options={["light", "dark"]} render={(value,toggle)=>{/* xxx */}}/>
 ```
 
-- `source`：初始切换值。
 - `options`：可切换的值数组。
+- `index`：默认:0。
 - `target`：传递切换值给子节点的属性名，默认 value。
 - `toggleTarget`：传递切换函数给子节点的属性名，默认 toggle。
 - `next`：自定义切换逻辑函数。
-- `children`：渲染内容。
+- `render`：渲染函数。
 
 ### 通用组件
 
@@ -292,12 +284,20 @@ function Layout() {
 
 - Loop：灵活的迭代渲染，支持数组、对象和范围。
 - Try：封装异步逻辑，处理 Promise 状态。
-- Toggle：基于布尔状态切换 on 和 off 内容。
 - Pick：轻量版值选择渲染，类似枚举匹配。
 - Render：动态渲染函数，简化复杂渲染逻辑。
 - Once：确保内容仅渲染一次，适合初始化。
 - Each：增强列表渲染，支持过滤和排序。
 
+### hooks
+
+- 一些常用的hooks的封装
+
+### useControlled (v1.2.0+)
+
+- 受控组件和非受控组件的切换,方便组件开发
+
+
 ## License
 
 MIT

package/dist/index.d.mts

@@ -194,70 +194,41 @@ interface ToggleProps<T = boolean> {
     /**
      * @description_en The initial value to toggle.
      * @description_zh 初始切换值。
+     * @default 0
      */
-    source: T;
+    index?: number;
     /**
      * @description_en Array of values to toggle between.
      * @description_zh 可切换的值数组。
      */
     options: T[];
     /**
-     * @description_en The prop name to pass the toggled value to children.
-     * @description_zh 将切换后的值传递给子节点的属性名。
-     * @default 'value'
-     */
-    target?: string;
-    /**
-     * @description_en The prop name to pass the toggle function to children.
-     * @description_zh 将切换函数传递给子节点的属性名。
-     * @default 'toggle'
-     */
-    toggleTarget?: string;
-    /**
-     * @description_en Function to determine the next value in the toggle sequence.
-     * @description_zh 确定切换序列中下一个值的函数。
+     * @description_en Function to determine the next value index in the toggle sequence.
+     * @description_zh 确定切换序列中下一个值索引的函数。
      * @optional
      */
-    next?: (current: T, options: T[]) => T;
+    next?: (curIndex: number, options: T[]) => number;
     /**
-     * @description_en Content to render, receiving the toggled value and toggle function via the target and toggleTarget props.
-     * @description_zh 渲染的内容，通过 target 和 toggleTarget 属性接收切换后的值和切换函数。
+     * @description_en Render function, receiving the toggled value and toggle function.
+     * @description_zh 渲染函数，接收切换后的值和切换函数。
      */
-    children: ReactNode;
+    render: (value: T, toggle: () => void) => ReactNode;
 }
 /**
- * @description_zh 一个声明式组件，用于在预定义选项中切换值并通过指定属性传递给子组件，支持自定义切换逻辑。
- * @description_en A declarative component for toggling between predefined values and passing them to children via specified props, supporting custom toggle logic.
+ * @description_zh 一个声明式组件，用于在预定义选项中切换值并通过 render 函数传递给子组件，支持自定义切换逻辑。
+ * @description_en A declarative component for toggling between predefined values and passing them to children via a render function, supporting custom toggle logic.
  * @component
  * @example
  * ```tsx
- * interface ThemeChildProps {
- *   theme: string;
- *   toggleTheme: () => void;
- * }
- * const ThemeChild: FC<ThemeChildProps> = ({ theme, toggleTheme }) => (
- *   <div onClick={toggleTheme}>当前主题: {theme}</div>
- * );
- *
- * <Toggle source="light" options={["light", "dark"]} target="theme" toggleTarget="toggleTheme">
- *   <ThemeChild />
- * </Toggle>
- * ```
- *
- * @example
- * ```tsx
  * <Toggle
- *   source={1}
- *   options={[1, 2, 3]}
- *   target="value"
- *   toggleTarget="toggleValue"
- *   next={(current, options) => options[(options.indexOf(current) + 1) % options.length]}
- * >
- *   <ValueChild />
- * </Toggle>
+ *   options={["light", "dark"]}
+ *   render={(theme, toggleTheme) => (
+ *     <div onClick={toggleTheme}>当前主题: {theme}</div>
+ *   )}
+ * />
  * ```
  */
-declare const Toggle: <T>(props: ToggleProps<T>) => (string | number | bigint | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined>)[] | null | undefined;
+declare const Toggle: <T>(props: ToggleProps<T>) => React$1.ReactNode;
 
 interface SizeBoxProps {
     size?: number | string;

package/dist/index.js

@@ -1 +1 @@
-import n,{useMemo as y,useState as S,Fragment as I,useCallback as T}from"react";function C(e,t){if(e===void 0)return;let l=0;if(Array.isArray(e)){for(const a of e)if(t(a,l++)===!1)break}else t(e,l)}const x=(e,t)=>e===t,g=e=>n.createElement(n.Fragment,null,e.children);g.displayName="Switch_Case";const E=e=>n.createElement(n.Fragment,null,e.children);E.displayName="Switch_Default";const p=e=>{const{value:t,compare:l=x,children:a,strict:o=!1}=e,r=new Set;let c=null,m=null,f=!1;return C(a,(s,d)=>{if(!n.isValidElement(s))throw new Error(`Switch Children only accepts valid React elements at index ${d}`);const i=s.type;if(i.displayName===g.displayName){const u=s.props;if(r.has(u.value))throw new Error(`Switch found duplicate Case value at index ${d}: ${JSON.stringify(u.value)}${o?" (detected in strict mode)":""}`);if(r.add(u.value),!c&&l(t,u.value)&&(c=u.children,o===!1))return!1}else if(i.displayName===E.displayName){if(f)throw new Error(`Switch can only have one Default child at index ${d}`);if(f=!0,m=s.props.children,!o&&c)return!1}else throw new Error(`Switch Children only accepts 'Case' or 'Default' elements, found: ${String(i.displayName||i.name||i)} at index ${d}`)}),n.createElement(n.Fragment,null,c??m)};p.displayName="Switch",p.Case=g,p.Default=E,p.createTyped=function(){return{Switch:p,Case:g,Default:E}};const w=e=>n.createElement(n.Fragment,null,e.children),N=({children:e})=>n.createElement(n.Fragment,null,e),v=e=>n.createElement(n.Fragment,null,e.children);w.displayName="If_Then",N.displayName="If_Else",v.displayName="If_ElseIf";const h=({condition:e,children:t})=>{let l=null,a=null;const o=[];if(n.Children.forEach(t,r=>{if(!n.isValidElement(r))throw new Error("If component only accepts valid React elements");const c=r.type;if(c.displayName===w.displayName){if(l)throw new Error("If component can only have one Then child");l=r}else if(c.displayName===v.displayName)o.push(r);else if(c.displayName===N.displayName){if(a)throw new Error("If component can only have one Else child");a=r}else throw new Error(`If component only accepts 'Then', 'ElseIf', or 'Else' elements as children, found: ${String(c.displayName||c.name||c)}`)}),e)return l?n.createElement(n.Fragment,null,l.props.children):null;for(const r of o)if(r.props.condition)return n.createElement(n.Fragment,null,r.props.children);return a?n.createElement(n.Fragment,null,a.props.children):null};h.displayName="If",h.Then=w,h.ElseIf=v,h.Else=N,h.createTyped=function(){return{If:h,Then:w,ElseIf:v,Else:N}};const k=({condition:e,children:t})=>e?n.createElement(n.Fragment,null,t):null,b=({condition:e,children:t})=>e===!1?n.createElement(n.Fragment,null,t):null,$=({all:e,any:t,none:l,children:a,fallback:o})=>y(()=>(e&&(t||l)&&console.warn('When: Multiple condition types (all, any, none) provided; "all" takes precedence.'),!!(e&&e.length>0&&e.every(Boolean)||t&&t.length>0&&t.some(Boolean)||l&&l.length>0&&l.every(r=>!r))),[e,t,l])?n.createElement(n.Fragment,null,a):n.createElement(n.Fragment,null,o||null),D=({data:e,transform:t,render:l,fallback:a})=>{const o=y(()=>t.reduce((r,c)=>c(r),e),[e,t]);return o==null?n.createElement(n.Fragment,null,a||null):n.createElement(n.Fragment,null,l(o))},O=e=>{const{source:t,options:l,target:a="value",toggleTarget:o="toggle",next:r,children:c}=e,m=y(()=>l.includes(t)?t:l[0],[t,l]),[f,s]=S(m),d=()=>{s(i=>l.length?r?r(i,l):l[(l.indexOf(i)+1)%l.length]||l[0]:i)};return n.Children.map(c,i=>n.isValidElement(i)?n.cloneElement(i,{[a]:f,[o]:d}):i)},_=e=>{const{children:t,h:l,w:a,size:o,height:r,width:c,className:m}=e;return n.createElement("div",{style:{width:o||a||c,height:o||l||r,flexShrink:0},className:m},t)};function A(e){const{items:t,renderItem:l,filter:a}=e;return t?n.createElement(I,null,t.map((o,r)=>a&&!a(o)?null:l(o,r))):(console.error("ArrayRender: items is null"),null)}const B=({let:e,props:t,children:l,fallback:a})=>{const o=y(()=>typeof e=="function"?e(t):e,[e,t]);return!l||!Object.keys(o).length?n.createElement(n.Fragment,null,a||null):n.createElement(n.Fragment,null,l(o))},R="onChange",V="value";function P(e){const{defaultValue:t,onBeforeChange:l,trigger:a=R,valuePropName:o=V,props:r}=e,c=Object.prototype.hasOwnProperty.call(r,o),[m,f]=S(t),s=c?r[o]:m,d=y(()=>r[a],[r,a]),i=T(u=>{const F=typeof u=="function"?u(s):u;l&&l(F,s)===!1||(c||f(F),d&&d(F))},[c,l,a,s,d]);return[s,i]}export{A as ArrayRender,b as False,h as If,D as Pipe,B as Scope,_ as SizeBox,p as Switch,O as Toggle,k as True,$ as When,C as childrenLoop,P as useControlled};
+import n,{useMemo as y,useEffect as C,useState as S,Fragment as x,useCallback as T}from"react";function I(e,l){if(e===void 0)return;let t=0;if(Array.isArray(e)){for(const r of e)if(l(r,t++)===!1)break}else l(e,t)}const b=(e,l)=>e===l,E=e=>n.createElement(n.Fragment,null,e.children);E.displayName="Switch_Case";const g=e=>n.createElement(n.Fragment,null,e.children);g.displayName="Switch_Default";const p=e=>{const{value:l,compare:t=b,children:r,strict:o=!1}=e,a=new Set;let i=null,u=null,d=!1;return I(r,(s,m)=>{if(!n.isValidElement(s))throw new Error(`Switch Children only accepts valid React elements at index ${m}`);const f=s.type;if(f.displayName===E.displayName){const c=s.props;if(a.has(c.value))throw new Error(`Switch found duplicate Case value at index ${m}: ${JSON.stringify(c.value)}${o?" (detected in strict mode)":""}`);if(a.add(c.value),!i&&t(l,c.value)&&(i=c.children,o===!1))return!1}else if(f.displayName===g.displayName){if(d)throw new Error(`Switch can only have one Default child at index ${m}`);if(d=!0,u=s.props.children,!o&&i)return!1}else throw new Error(`Switch Children only accepts 'Case' or 'Default' elements, found: ${String(f.displayName||f.name||f)} at index ${m}`)}),n.createElement(n.Fragment,null,i??u)};p.displayName="Switch",p.Case=E,p.Default=g,p.createTyped=function(){return{Switch:p,Case:E,Default:g}};const w=e=>n.createElement(n.Fragment,null,e.children),N=({children:e})=>n.createElement(n.Fragment,null,e),v=e=>n.createElement(n.Fragment,null,e.children);w.displayName="If_Then",N.displayName="If_Else",v.displayName="If_ElseIf";const h=({condition:e,children:l})=>{let t=null,r=null;const o=[];if(n.Children.forEach(l,a=>{if(!n.isValidElement(a))throw new Error("If component only accepts valid React elements");const i=a.type;if(i.displayName===w.displayName){if(t)throw new Error("If component can only have one Then child");t=a}else if(i.displayName===v.displayName)o.push(a);else if(i.displayName===N.displayName){if(r)throw new Error("If component can only have one Else child");r=a}else throw new Error(`If component only accepts 'Then', 'ElseIf', or 'Else' elements as children, found: ${String(i.displayName||i.name||i)}`)}),e)return t?n.createElement(n.Fragment,null,t.props.children):null;for(const a of o)if(a.props.condition)return n.createElement(n.Fragment,null,a.props.children);return r?n.createElement(n.Fragment,null,r.props.children):null};h.displayName="If",h.Then=w,h.ElseIf=v,h.Else=N,h.createTyped=function(){return{If:h,Then:w,ElseIf:v,Else:N}};const k=({condition:e,children:l})=>e?n.createElement(n.Fragment,null,l):null,$=({condition:e,children:l})=>e===!1?n.createElement(n.Fragment,null,l):null,D=({all:e,any:l,none:t,children:r,fallback:o})=>y(()=>(e&&(l||t)&&console.warn('When: Multiple condition types (all, any, none) provided; "all" takes precedence.'),!!(e&&e.length>0&&e.every(Boolean)||l&&l.length>0&&l.some(Boolean)||t&&t.length>0&&t.every(a=>!a))),[e,l,t])?n.createElement(n.Fragment,null,r):n.createElement(n.Fragment,null,o||null),_=({data:e,transform:l,render:t,fallback:r})=>{const o=y(()=>l.reduce((a,i)=>i(a),e),[e,l]);return o==null?n.createElement(n.Fragment,null,r||null):n.createElement(n.Fragment,null,t(o))},A=e=>{const{index:l=0,options:t,next:r,render:o}=e;C(()=>{if(t.length<l+1)throw new Error(`Index ${l} is out of bounds for options array of length ${t.length}. Defaulting to first option.`)},[l,t]);const[a,i]=S(l),u=()=>{i(d=>t.length?r?r(d,t):(d+1)%t.length:d)};return o(t[a],u)},B=e=>{const{children:l,h:t,w:r,size:o,height:a,width:i,className:u}=e;return n.createElement("div",{style:{width:o||r||i,height:o||t||a,flexShrink:0},className:u},l)};function O(e){const{items:l,renderItem:t,filter:r}=e;return l?n.createElement(x,null,l.map((o,a)=>r&&!r(o)?null:t(o,a))):(console.error("ArrayRender: items is null"),null)}const R=({let:e,props:l,children:t,fallback:r})=>{const o=y(()=>typeof e=="function"?e(l):e,[e,l]);return!t||!Object.keys(o).length?n.createElement(n.Fragment,null,r||null):n.createElement(n.Fragment,null,t(o))},P="onChange",V="value";function j(e){const{defaultValue:l,onBeforeChange:t,trigger:r=P,valuePropName:o=V,props:a}=e,i=Object.prototype.hasOwnProperty.call(a,o),[u,d]=S(l),s=i?a[o]:u,m=y(()=>a[r],[a,r]),f=T(c=>{const F=typeof c=="function"?c(s):c;t&&t(F,s)===!1||(i||d(F),m&&m(F))},[i,t,r,s,m]);return[s,f]}export{O as ArrayRender,$ as False,h as If,_ as Pipe,R as Scope,B as SizeBox,p as Switch,A as Toggle,k as True,D as When,I as childrenLoop,j as useControlled};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wwog/react",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "",
   "keywords": [],
   "author": "wwog",

package/src/ProcessControl/Toggle.tsx

@@ -1,105 +1,67 @@
-import React, { ReactNode, useState, useMemo } from "react";
+import React, { useState, useEffect, ReactNode } from "react";
 
 export interface ToggleProps<T = boolean> {
   /**
    * @description_en The initial value to toggle.
    * @description_zh 初始切换值。
+   * @default 0
    */
-  source: T;
+  index?: number;
   /**
    * @description_en Array of values to toggle between.
    * @description_zh 可切换的值数组。
    */
   options: T[];
   /**
-   * @description_en The prop name to pass the toggled value to children.
-   * @description_zh 将切换后的值传递给子节点的属性名。
-   * @default 'value'
-   */
-  target?: string;
-  /**
-   * @description_en The prop name to pass the toggle function to children.
-   * @description_zh 将切换函数传递给子节点的属性名。
-   * @default 'toggle'
-   */
-  toggleTarget?: string;
-  /**
-   * @description_en Function to determine the next value in the toggle sequence.
-   * @description_zh 确定切换序列中下一个值的函数。
+   * @description_en Function to determine the next value index in the toggle sequence.
+   * @description_zh 确定切换序列中下一个值索引的函数。
    * @optional
    */
-  next?: (current: T, options: T[]) => T;
+  next?: (curIndex: number, options: T[]) => number;
   /**
-   * @description_en Content to render, receiving the toggled value and toggle function via the target and toggleTarget props.
-   * @description_zh 渲染的内容，通过 target 和 toggleTarget 属性接收切换后的值和切换函数。
+   * @description_en Render function, receiving the toggled value and toggle function.
+   * @description_zh 渲染函数，接收切换后的值和切换函数。
    */
-  children: ReactNode;
+  render: (value: T, toggle: () => void) => ReactNode;
 }
 
 /**
- * @description_zh 一个声明式组件，用于在预定义选项中切换值并通过指定属性传递给子组件，支持自定义切换逻辑。
- * @description_en A declarative component for toggling between predefined values and passing them to children via specified props, supporting custom toggle logic.
+ * @description_zh 一个声明式组件，用于在预定义选项中切换值并通过 render 函数传递给子组件，支持自定义切换逻辑。
+ * @description_en A declarative component for toggling between predefined values and passing them to children via a render function, supporting custom toggle logic.
  * @component
  * @example
  * ```tsx
- * interface ThemeChildProps {
- *   theme: string;
- *   toggleTheme: () => void;
- * }
- * const ThemeChild: FC<ThemeChildProps> = ({ theme, toggleTheme }) => (
- *   <div onClick={toggleTheme}>当前主题: {theme}</div>
- * );
- *
- * <Toggle source="light" options={["light", "dark"]} target="theme" toggleTarget="toggleTheme">
- *   <ThemeChild />
- * </Toggle>
- * ```
- *
- * @example
- * ```tsx
  * <Toggle
- *   source={1}
- *   options={[1, 2, 3]}
- *   target="value"
- *   toggleTarget="toggleValue"
- *   next={(current, options) => options[(options.indexOf(current) + 1) % options.length]}
- * >
- *   <ValueChild />
- * </Toggle>
+ *   options={["light", "dark"]}
+ *   render={(theme, toggleTheme) => (
+ *     <div onClick={toggleTheme}>当前主题: {theme}</div>
+ *   )}
+ * />
  * ```
  */
 export const Toggle = <T,>(props: ToggleProps<T>) => {
   const {
-    source,
+    index = 0,
     options,
-    target = "value",
-    toggleTarget = "toggle",
     next,
-    children,
+    render,
   } = props;
-  const defaultValue = useMemo(() => {
-    return options.includes(source) ? source : options[0];
-  }, [source, options]);
 
-  const [currentValue, setCurrentValue] = useState<T>(defaultValue);
+  useEffect(() => {
+    if (options.length < index + 1) {
+      throw new Error(
+        `Index ${index} is out of bounds for options array of length ${options.length}. Defaulting to first option.`
+      );
+    }
+  }, [index, options]);
 
+  const [curIndex, setCurIndex] = useState<number>(index);
   const toggle = () => {
-    setCurrentValue((prev) => {
+    setCurIndex((prev) => {
       if (!options.length) return prev;
-      const nextValue = next
-        ? next(prev, options)
-        : options[(options.indexOf(prev) + 1) % options.length] || options[0];
-      return nextValue;
+      return next ? next(prev, options) : (prev + 1) % options.length;
     });
   };
 
-  return React.Children.map(children, (child) => {
-    if (React.isValidElement(child)) {
-      return React.cloneElement(child, {
-        [target]: currentValue,
-        [toggleTarget]: toggle,
-      } as { [key: string]: any });
-    }
-    return child;
-  });
+  return render(options[curIndex], toggle);
 };