@wwog/react 1.2.4 → 1.2.6

package/README.md

@@ -312,6 +312,48 @@ function Layout() {
 }
 ```
 
+#### `<ClassName>` (v1.2.5+)
+
+用于将 CSS 类名分类编写的组件，内置类似`clsx`的功能，并且可以去除重复的 className。
+
+```tsx
+import { ClassName } from "@wwog/react";
+
+function Example() {
+  return (
+    <ClassName
+      className={{
+        base: "p-2 bg-white",
+        hover: "hover:bg-gray-100",
+        active: "active:bg-gray-200",
+        focus: "focus:ring-2",
+        other: "button",
+      }}
+    >
+      <button>点击我</button>
+    </ClassName>
+  );
+}
+```
+
+还可以使用容器包装元素：
+
+```tsx
+<ClassName
+  className={{
+    base: ["p-2", { "bg-red-500": isError }],
+    hover: { "hover:bg-blue-500": true },
+  }}
+  asWrapper="span"
+>
+  内容
+</ClassName>
+```
+
+- `className`：分类的类名对象，支持各种状态的类名（base, hover, active, focus, disabled 等）
+- `asWrapper`：是否生成包含所有 className 的 wrapper，默认 false，传递标签名如'div'或'span'
+- `children`：子元素，通常是一个 React 元素
+
 ### hooks
 
 - 一些常用的 hooks 的封装
@@ -324,11 +366,45 @@ function Layout() {
 
 - 用于部分组件的内部函数,如需要也可使用
 
-formatDate 比较标准的格式化时间函数
+#### `formatDate`
+
+比较标准的格式化时间函数
+
+#### `childrenLoop`
+
+可以中断的子节点遍历，让一些分支流程拥有极致性能
+
+#### `Counter`
+
+计数器
+
+#### `cn` (v1.2.5+)
+
+一个高效的 CSS 类名合并工具函数，类似于`clsx`或`classnames`，但能自动去除重复的类名。
+
+```tsx
+import { cn } from "@wwog/react";
+
+function Example({ isActive, isDisabled }) {
+  return (
+    <div
+      className={cn("base-class", ["array-class-1", "array-class-2"], {
+        "active-class": isActive,
+        "disabled-class": isDisabled,
+      })}
+    >
+      内容
+    </div>
+  );
+}
+```
 
-childrenLoop 可以中断的子节点遍历，让一些分支流程拥有极致性能
+支持多种参数类型：
 
-Counter 计数器
+- 字符串: `"class1 class2"`
+- 字符串数组: `["class1", "class2"]`
+- 对象: `{ "class1": true, "class2": false }`
+- 以上类型的任意组合
 
 ## License
 

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import React$1, { ReactNode, FC, Dispatch } from 'react';
+import React$1, { ReactNode, FC, HTMLElementType, Dispatch } from 'react';
 
 interface SwitchProps<T> {
     value: T;
@@ -190,46 +190,6 @@ interface PipeProps {
  */
 declare const Pipe: FC<PipeProps>;
 
-interface ToggleProps<T = boolean> {
-    /**
-     * @description_en The initial value to toggle.
-     * @description_zh 初始切换值。
-     * @default 0
-     */
-    index?: number;
-    /**
-     * @description_en Array of values to toggle between.
-     * @description_zh 可切换的值数组。
-     */
-    options: T[];
-    /**
-     * @description_en Function to determine the next value index in the toggle sequence.
-     * @description_zh 确定切换序列中下一个值索引的函数。
-     * @optional
-     */
-    next?: (curIndex: number, options: T[]) => number;
-    /**
-     * @description_en Render function, receiving the toggled value and toggle function.
-     * @description_zh 渲染函数，接收切换后的值和切换函数。
-     */
-    render: (value: T, toggle: () => void) => ReactNode;
-}
-/**
- * @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
- * <Toggle
- *   options={["light", "dark"]}
- *   render={(theme, toggleTheme) => (
- *     <div onClick={toggleTheme}>当前主题: {theme}</div>
- *   )}
- * />
- * ```
- */
-declare const Toggle: <T>(props: ToggleProps<T>) => React$1.ReactNode;
-
 interface SizeBoxProps {
     size?: number | string;
     height?: number | string;
@@ -244,13 +204,6 @@ interface SizeBoxProps {
  */
 declare const SizeBox: FC<SizeBoxProps>;
 
-interface ArrayRenderProps<T> {
-    items: T[];
-    renderItem: (item: T, index: number) => React$1.ReactNode;
-    filter?: (item: T) => boolean;
-}
-declare function ArrayRender<T>(props: ArrayRenderProps<T>): ReactNode;
-
 /**
  * Props for the `Scope` component.
  *
@@ -306,6 +259,98 @@ interface ScopeProps {
  */
 declare const Scope: FC<ScopeProps>;
 
+type CxInput = string | string[] | Record<string, boolean> | undefined | null | false;
+declare function cx(...args: CxInput[]): string;
+
+interface ClassNameProps {
+    className?: {
+        base?: CxInput;
+        hover?: CxInput;
+        active?: CxInput;
+        focus?: CxInput;
+        disabled?: CxInput;
+        [key: string]: CxInput;
+    };
+    /**
+     * @description 传入容器标签名.是否生成包含所有 `className` 的 `wrapper`, 默认 false, 传递 `true` 为 `div。`
+     * @description_en Whether to generate a `wrapper` containing all `className`, default is false, and pass the container tag name, if `true` will be `div`.
+     */
+    asWrapper?: boolean | HTMLElementType;
+    children?: React$1.ReactNode;
+}
+/**
+ * @description 用于将 `className` 分类编写的组件，内置了类似`clsx`的功能,并且去除重复的 className。
+ * @description_en A component for `className` classification, built-in similar to `clsx` functionality, and removes duplicate className.
+ * @component
+ * @example
+ * ```tsx
+ * <ClassName className={{ base: "p-2 bg-red", hover: ["hover:bg-blue", { "hover:text-white": true }] }}>
+ *   <button>Click me</button>
+ * </ClassName>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <ClassName
+ *   className={{
+ *     base: ["p-2", { "bg-red": condition }],
+ *     hover: { "hover:bg-blue": true },
+ *   }}
+ *   asWrapper="span"
+ * >
+ *   <button>Click me</button>
+ * </ClassName>
+ * ```
+ */
+declare const ClassName: FC<ClassNameProps>;
+
+interface ToggleProps<T = boolean> {
+    /**
+     * @description_en The initial value to toggle.
+     * @description_zh 初始切换值。
+     * @default 0
+     */
+    index?: number;
+    /**
+     * @description_en Array of values to toggle between.
+     * @description_zh 可切换的值数组。
+     */
+    options: T[];
+    /**
+     * @description_en Function to determine the next value index in the toggle sequence.
+     * @description_zh 确定切换序列中下一个值索引的函数。
+     * @optional
+     */
+    next?: (curIndex: number, options: T[]) => number;
+    /**
+     * @description_en Render function, receiving the toggled value and toggle function.
+     * @description_zh 渲染函数，接收切换后的值和切换函数。
+     */
+    render: (value: T, toggle: () => void) => ReactNode;
+}
+/**
+ * @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
+ * <Toggle
+ *   options={["light", "dark"]}
+ *   render={(theme, toggleTheme) => (
+ *     <div onClick={toggleTheme}>当前主题: {theme}</div>
+ *   )}
+ * />
+ * ```
+ */
+declare const Toggle: <T>(props: ToggleProps<T>) => React$1.ReactNode;
+
+interface ArrayRenderProps<T> {
+    items: T[];
+    renderItem: (item: T, index: number) => React$1.ReactNode;
+    filter?: (item: T) => boolean;
+}
+declare function ArrayRender<T>(props: ArrayRenderProps<T>): ReactNode;
+
 interface DateRenderProps<T = string> {
     /**
      * @description_en The input date to render (Date object, ISO string, or timestamp).
@@ -349,11 +394,33 @@ interface DateRenderProps<T = string> {
  */
 declare function DateRender<T = string>({ source, format, children, }: DateRenderProps<T>): React$1.JSX.Element | null;
 
-/**
- * @description 性能优化，替代 React.Children.forEach, 回调可以返回 false 来中断循环
- * @description_en Replace React.Children.forEach, the callback can return false to interrupt the loop
- */
-declare function childrenLoop(children: React$1.ReactNode | undefined, callback: (child: React$1.ReactNode, index: number) => boolean | void): void;
+interface UseControlledOptions<T> {
+    /**
+     * @description - 非受控模式下的默认值,会被受控模式下的值覆盖
+     * @description_en - Default value in uncontrolled mode, will be overridden by the value in controlled mode
+     */
+    defaultValue: T;
+    /**
+     * @description - 值变更前的回调函数，可用于拦截或修改新值
+     * @description_en - Callback function before the value changes, can be used to intercept or modify the new value
+     */
+    onBeforeChange?: (newValue: T, currentValue: T) => boolean | void;
+    /**
+     * @description - 当值发生变化时触发的回调函数名
+     * @description_en - Callback function name triggered when the value changes
+     * @default - onChange
+     */
+    trigger?: string;
+    /**
+     * @description - 值的属性名
+     * @description_en - Property name of the value
+     * @default - value
+     */
+    valuePropName?: string;
+    props: Record<string, any>;
+}
+declare function useControlled<T>(options: UseControlledOptions<T>): [T, Dispatch<React.SetStateAction<T>>];
+
 /**
  * @param schema
  * @example
@@ -393,32 +460,11 @@ declare class Counter {
     next(): number;
 }
 
-interface UseControlledOptions<T> {
-    /**
-     * @description - 非受控模式下的默认值,会被受控模式下的值覆盖
-     * @description_en - Default value in uncontrolled mode, will be overridden by the value in controlled mode
-     */
-    defaultValue: T;
-    /**
-     * @description - 值变更前的回调函数，可用于拦截或修改新值
-     * @description_en - Callback function before the value changes, can be used to intercept or modify the new value
-     */
-    onBeforeChange?: (newValue: T, currentValue: T) => boolean | void;
-    /**
-     * @description - 当值发生变化时触发的回调函数名
-     * @description_en - Callback function name triggered when the value changes
-     * @default - onChange
-     */
-    trigger?: string;
-    /**
-     * @description - 值的属性名
-     * @description_en - Property name of the value
-     * @default - value
-     */
-    valuePropName?: string;
-    props: Record<string, any>;
-}
-declare function useControlled<T>(options: UseControlledOptions<T>): [T, Dispatch<React.SetStateAction<T>>];
+/**
+ * @description 性能优化，替代 React.Children.forEach, 回调可以返回 false 来中断循环
+ * @description_en Replace React.Children.forEach, the callback can return false to interrupt the loop
+ */
+declare function childrenLoop(children: React$1.ReactNode | undefined, callback: (child: React$1.ReactNode, index: number) => boolean | void): void;
 
-export { ArrayRender, Counter, DateRender, False, If, Pipe, Scope, SizeBox, Switch, Toggle, True, When, childrenLoop, formatDate, useControlled };
-export type { ArrayRenderProps, DateRenderProps, ElseIfProps, ElseProps, FalseProps, IfProps, PipeProps, ScopeProps, SwitchCaseProps, SwitchDefaultProps, SwitchProps, ThenProps, ToggleProps, TrueProps, UseControlledOptions, WhenProps };
+export { ArrayRender, ClassName, Counter, DateRender, False, If, Pipe, Scope, SizeBox, Switch, Toggle, True, When, childrenLoop, cx, formatDate, useControlled };
+export type { ArrayRenderProps, ClassNameProps, CxInput, DateRenderProps, ElseIfProps, ElseProps, FalseProps, IfProps, PipeProps, ScopeProps, SwitchCaseProps, SwitchDefaultProps, SwitchProps, ThenProps, ToggleProps, TrueProps, UseControlledOptions, WhenProps };

package/dist/index.js

@@ -1 +1 @@
-import r,{useMemo as p,useEffect as J,useState as b,Fragment as O,useCallback as H}from"react";function I(e,t){if(e===void 0)return;let n=0;if(Array.isArray(e)){for(const l of e)if(t(l,n++)===!1)break}else t(e,n)}function R(e,t){const n=t||new Date,l=n.getFullYear(),a=n.getMonth()+1,o=n.getDate(),i=n.getHours(),c=n.getMinutes(),u=n.getSeconds(),d=n.getMilliseconds(),s=n.getDay(),f=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],m=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],y=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],T=["January","February","March","April","May","June","July","August","September","October","November","December"],M=s===0?6:s-1,C=m[M],v=f[M],D=a-1,Y=T[D],x=y[D],A={YY:l.toString().slice(2),YYYY:l.toString(),M:a.toString(),MM:a.toString().padStart(2,"0"),MMM:x,MMMM:Y,D:o.toString(),DD:o.toString().padStart(2,"0"),d:s.toString(),dd:v,ddd:v,dddd:C,H:i.toString(),HH:i.toString().padStart(2,"0"),h:(i%12).toString(),hh:(i%12).toString().padStart(2,"0"),m:c.toString(),mm:c.toString().padStart(2,"0"),s:u.toString(),ss:u.toString().padStart(2,"0"),SSS:d.toString().padStart(3,"0"),Z:"+08:00",ZZ:"+0800",A:i<12?"AM":"PM",a:i<12?"am":"pm"};return e.replace(/YYYY|YY|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|m{1,2}|s{1,2}|SSS|Z{1,2}|A|a/g,k=>A[k])}class _{count=0;next(){return this.count++}}const B=(e,t)=>e===t,S=e=>r.createElement(r.Fragment,null,e.children);S.displayName="Switch_Case";const E=e=>r.createElement(r.Fragment,null,e.children);E.displayName="Switch_Default";const g=e=>{const{value:t,compare:n=B,children:l,strict:a=!1}=e,o=new Set;let i=null,c=null,u=!1;return I(l,(d,s)=>{if(!r.isValidElement(d))throw new Error(`Switch Children only accepts valid React elements at index ${s}`);const f=d.type;if(f.displayName===S.displayName){const m=d.props;if(o.has(m.value))throw new Error(`Switch found duplicate Case value at index ${s}: ${JSON.stringify(m.value)}${a?" (detected in strict mode)":""}`);if(o.add(m.value),!i&&n(t,m.value)&&(i=m.children,a===!1))return!1}else if(f.displayName===E.displayName){if(u)throw new Error(`Switch can only have one Default child at index ${s}`);if(u=!0,c=d.props.children,!a&&i)return!1}else throw new Error(`Switch Children only accepts 'Case' or 'Default' elements, found: ${String(f.displayName||f.name||f)} at index ${s}`)}),r.createElement(r.Fragment,null,i??c)};g.displayName="Switch",g.Case=S,g.Default=E,g.createTyped=function(){return{Switch:g,Case:S,Default:E}};const w=e=>r.createElement(r.Fragment,null,e.children),N=({children:e})=>r.createElement(r.Fragment,null,e),F=e=>r.createElement(r.Fragment,null,e.children);w.displayName="If_Then",N.displayName="If_Else",F.displayName="If_ElseIf";const h=({condition:e,children:t})=>{let n=null,l=null;const a=[];if(r.Children.forEach(t,o=>{if(!r.isValidElement(o))throw new Error("If component only accepts valid React elements");const i=o.type;if(i.displayName===w.displayName){if(n)throw new Error("If component can only have one Then child");n=o}else if(i.displayName===F.displayName)a.push(o);else if(i.displayName===N.displayName){if(l)throw new Error("If component can only have one Else child");l=o}else throw new Error(`If component only accepts 'Then', 'ElseIf', or 'Else' elements as children, found: ${String(i.displayName||i.name||i)}`)}),e)return n?r.createElement(r.Fragment,null,n.props.children):null;for(const o of a)if(o.props.condition)return r.createElement(r.Fragment,null,o.props.children);return l?r.createElement(r.Fragment,null,l.props.children):null};h.displayName="If",h.Then=w,h.ElseIf=F,h.Else=N,h.createTyped=function(){return{If:h,Then:w,ElseIf:F,Else:N}};const P=({condition:e,children:t})=>e?r.createElement(r.Fragment,null,t):null,W=({condition:e,children:t})=>e===!1?r.createElement(r.Fragment,null,t):null,Z=({all:e,any:t,none:n,children:l,fallback:a})=>p(()=>(e&&(t||n)&&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)||n&&n.length>0&&n.every(o=>!o))),[e,t,n])?r.createElement(r.Fragment,null,l):r.createElement(r.Fragment,null,a||null),V=({data:e,transform:t,render:n,fallback:l})=>{const a=p(()=>t.reduce((o,i)=>i(o),e),[e,t]);return a==null?r.createElement(r.Fragment,null,l||null):r.createElement(r.Fragment,null,n(a))},$=e=>{const{index:t=0,options:n,next:l,render:a}=e;J(()=>{if(n.length<t+1)throw new Error(`Index ${t} is out of bounds for options array of length ${n.length}. Defaulting to first option.`)},[t,n]);const[o,i]=b(t),c=()=>{i(u=>n.length?l?l(u,n):(u+1)%n.length:u)};return a(n[o],c)},j=e=>{const{children:t,h:n,w:l,size:a,height:o,width:i,className:c}=e;return r.createElement("div",{style:{width:a||l||i,height:a||n||o,flexShrink:0},className:c},t)};function z(e){const{items:t,renderItem:n,filter:l}=e;return t?r.createElement(O,null,t.map((a,o)=>l&&!l(a)?null:n(a,o))):(console.error("ArrayRender: items is null"),null)}const L=({let:e,props:t,children:n,fallback:l})=>{const a=p(()=>typeof e=="function"?e(t):e,[e,t]);return!n||!Object.keys(a).length?r.createElement(r.Fragment,null,l||null):r.createElement(r.Fragment,null,n(a))};function q({source:e,format:t,children:n}){const l=p(()=>{if(e instanceof Date)return e;if(typeof e=="string"||typeof e=="number"){const o=new Date(e);return isNaN(o.getTime())?null:o}return null},[e]),a=p(()=>l?t?t(l):l.toLocaleString():null,[l,t]);return!a||!n?null:r.createElement(r.Fragment,null,n(a))}const G="onChange",K="value";function Q(e){const{defaultValue:t,onBeforeChange:n,trigger:l=G,valuePropName:a=K,props:o}=e,i=Object.prototype.hasOwnProperty.call(o,a),[c,u]=b(t),d=i?o[a]:c,s=p(()=>o[l],[o,l]),f=H(m=>{const y=typeof m=="function"?m(d):m;n&&n(y,d)===!1||(i||u(y),s&&s(y))},[i,n,l,d,s]);return[d,f]}export{z as ArrayRender,_ as Counter,q as DateRender,W as False,h as If,V as Pipe,L as Scope,j as SizeBox,g as Switch,$ as Toggle,P as True,Z as When,I as childrenLoop,R as formatDate,Q as useControlled};
+import r,{useMemo as h,useEffect as C,isValidElement as I,Fragment as M,cloneElement as R,useState as T,useCallback as H}from"react";function A(n,t){if(n===void 0)return;let e=0;if(Array.isArray(n)){for(const l of n)if(t(l,e++)===!1)break}else t(n,e)}const P=(n,t)=>n===t,S=n=>r.createElement(r.Fragment,null,n.children);S.displayName="Switch_Case";const E=n=>r.createElement(r.Fragment,null,n.children);E.displayName="Switch_Default";const g=n=>{const{value:t,compare:e=P,children:l,strict:a=!1}=n,o=new Set;let s=null,c=null,u=!1;return A(l,(d,i)=>{if(!r.isValidElement(d))throw new Error(`Switch Children only accepts valid React elements at index ${i}`);const f=d.type;if(f.displayName===S.displayName){const m=d.props;if(o.has(m.value))throw new Error(`Switch found duplicate Case value at index ${i}: ${JSON.stringify(m.value)}${a?" (detected in strict mode)":""}`);if(o.add(m.value),!s&&e(t,m.value)&&(s=m.children,a===!1))return!1}else if(f.displayName===E.displayName){if(u)throw new Error(`Switch can only have one Default child at index ${i}`);if(u=!0,c=d.props.children,!a&&s)return!1}else throw new Error(`Switch Children only accepts 'Case' or 'Default' elements, found: ${String(f.displayName||f.name||f)} at index ${i}`)}),r.createElement(r.Fragment,null,s??c)};g.displayName="Switch",g.Case=S,g.Default=E,g.createTyped=function(){return{Switch:g,Case:S,Default:E}};const w=n=>r.createElement(r.Fragment,null,n.children),N=({children:n})=>r.createElement(r.Fragment,null,n),F=n=>r.createElement(r.Fragment,null,n.children);w.displayName="If_Then",N.displayName="If_Else",F.displayName="If_ElseIf";const p=({condition:n,children:t})=>{let e=null,l=null;const a=[];if(r.Children.forEach(t,o=>{if(!r.isValidElement(o))throw new Error("If component only accepts valid React elements");const s=o.type;if(s.displayName===w.displayName){if(e)throw new Error("If component can only have one Then child");e=o}else if(s.displayName===F.displayName)a.push(o);else if(s.displayName===N.displayName){if(l)throw new Error("If component can only have one Else child");l=o}else throw new Error(`If component only accepts 'Then', 'ElseIf', or 'Else' elements as children, found: ${String(s.displayName||s.name||s)}`)}),n)return e?r.createElement(r.Fragment,null,e.props.children):null;for(const o of a)if(o.props.condition)return r.createElement(r.Fragment,null,o.props.children);return l?r.createElement(r.Fragment,null,l.props.children):null};p.displayName="If",p.Then=w,p.ElseIf=F,p.Else=N,p.createTyped=function(){return{If:p,Then:w,ElseIf:F,Else:N}};const W=({condition:n,children:t})=>n?r.createElement(r.Fragment,null,t):null,_=({condition:n,children:t})=>n===!1?r.createElement(r.Fragment,null,t):null,B=({all:n,any:t,none:e,children:l,fallback:a})=>h(()=>(n&&(t||e)&&console.warn('When: Multiple condition types (all, any, none) provided; "all" takes precedence.'),!!(n&&n.length>0&&n.every(Boolean)||t&&t.length>0&&t.some(Boolean)||e&&e.length>0&&e.every(o=>!o))),[n,t,e])?r.createElement(r.Fragment,null,l):r.createElement(r.Fragment,null,a||null),V=({data:n,transform:t,render:e,fallback:l})=>{const a=h(()=>t.reduce((o,s)=>s(o),n),[n,t]);return a==null?r.createElement(r.Fragment,null,l||null):r.createElement(r.Fragment,null,e(a))},Z=n=>{const{children:t,h:e,w:l,size:a,height:o,width:s,className:c}=n;return r.createElement("div",{style:{width:a||l||s,height:a||e||o,flexShrink:0},className:c},t)},$=({let:n,props:t,children:e,fallback:l})=>{const a=h(()=>typeof n=="function"?n(t):n,[n,t]);return!e||!Object.keys(a).length?r.createElement(r.Fragment,null,l||null):r.createElement(r.Fragment,null,e(a))};function v(...n){const t=new Set;for(const e of n)if(e){if(typeof e=="string")t.add(e);else if(Array.isArray(e))e.forEach(l=>t.add(l));else if(typeof e=="object")for(const[l,a]of Object.entries(e))a&&t.add(l)}return Array.from(t).join(" ")}const z=n=>{const{className:t,children:e,asWrapper:l}=n;if(C(()=>{I(e)===!1&&console.warn("<ClassName>: children is not a valid React element. Please check your code.")},[e]),!e)return null;if(!t)return r.createElement(M,null,e);const a=v(...Object.values(t));return l?r.createElement(typeof l=="string"?l:"div",{className:a},e):I(e)?R(e,{className:v(e.props.className,a)}):r.createElement(M,null,e)},L=n=>{const{index:t=0,options:e,next:l,render:a}=n;C(()=>{if(e.length<t+1)throw new Error(`Index ${t} is out of bounds for options array of length ${e.length}. Defaulting to first option.`)},[t,e]);const[o,s]=T(t),c=()=>{s(u=>e.length?l?l(u,e):(u+1)%e.length:u)};return a(e[o],c)};function q(n){const{items:t,renderItem:e,filter:l}=n;return t?r.createElement(M,null,t.map((a,o)=>l&&!l(a)?null:e(a,o))):(console.error("ArrayRender: items is null"),null)}function G({source:n,format:t,children:e}){const l=h(()=>{if(n instanceof Date)return n;if(typeof n=="string"||typeof n=="number"){const o=new Date(n);return isNaN(o.getTime())?null:o}return null},[n]),a=h(()=>l?t?t(l):l.toLocaleString():null,[l,t]);return!a||!e?null:r.createElement(r.Fragment,null,e(a))}const K="onChange",Q="value";function U(n){const{defaultValue:t,onBeforeChange:e,trigger:l=K,valuePropName:a=Q,props:o}=n,s=Object.prototype.hasOwnProperty.call(o,a),[c,u]=T(t),d=s?o[a]:c,i=h(()=>o[l],[o,l]),f=H(m=>{const y=typeof m=="function"?m(d):m;e&&e(y,d)===!1||(s||u(y),i&&i(y))},[s,e,d,i]);return[d,f]}function X(n,t){const e=t||new Date,l=e.getFullYear(),a=e.getMonth()+1,o=e.getDate(),s=e.getHours(),c=e.getMinutes(),u=e.getSeconds(),d=e.getMilliseconds(),i=e.getDay(),f=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],m=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],y=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],Y=["January","February","March","April","May","June","July","August","September","October","November","December"],x=m[i],D=f[i],b=a-1,k=Y[b],O=y[b],J={YY:l.toString().slice(2),YYYY:l.toString(),M:a.toString(),MM:a.toString().padStart(2,"0"),MMM:O,MMMM:k,D:o.toString(),DD:o.toString().padStart(2,"0"),d:i.toString(),dd:D,ddd:D,dddd:x,H:s.toString(),HH:s.toString().padStart(2,"0"),h:(s%12).toString(),hh:(s%12).toString().padStart(2,"0"),m:c.toString(),mm:c.toString().padStart(2,"0"),s:u.toString(),ss:u.toString().padStart(2,"0"),SSS:d.toString().padStart(3,"0"),Z:"+08:00",ZZ:"+0800",A:s<12?"AM":"PM",a:s<12?"am":"pm"};return n.replace(/YYYY|YY|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|m{1,2}|s{1,2}|SSS|Z{1,2}|A|a/g,j=>J[j])}class ee{count=0;next(){return this.count++}}export{q as ArrayRender,z as ClassName,ee as Counter,G as DateRender,_ as False,p as If,V as Pipe,$ as Scope,Z as SizeBox,g as Switch,L as Toggle,W as True,B as When,A as childrenLoop,v as cx,X as formatDate,U as useControlled};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wwog/react",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "description": "",
   "keywords": [],
   "author": "wwog",
@@ -17,9 +17,10 @@
   "scripts": {
     "build": "unbuild",
     "format": "biome format --write src",
-    "check": "biome check --apply src",
-    "test": "pnpm check && pnpm test:types && vitest run --coverage",
-    "test:types": "tsc --noEmit --skipLibCheck"
+    "check": "biome check --write src",
+    "test": "vitest run",
+    "test:types": "tsc --noEmit --skipLibCheck",
+    "all-suites": "pnpm run format && pnpm run check && pnpm run test:types && pnpm run test"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",

package/src/{ProcessControl → components/ProcessControl}/Switch.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { childrenLoop } from "../utils";
+import { childrenLoop } from "../../utils/reactUtils";
 
 export interface SwitchProps<T> {
   value: T;
@@ -120,5 +120,5 @@ Switch.createTyped = function <T>() {
     Switch: (props: SwitchProps<T>) => React.ReactElement | null;
     Case: (props: SwitchCaseProps<T>) => React.ReactElement;
     Default: (props: SwitchDefaultProps) => React.ReactElement;
-  } 
+  };
 };

package/src/components/ProcessControl/index.ts

@@ -0,0 +1,4 @@
+export * from './Switch'
+export * from './If'
+export * from './When'
+export * from './Pipe'

package/src/components/Struct/index.ts

@@ -0,0 +1,2 @@
+export * from './ArrayRender'
+export * from './DateRender'

package/src/components/Sundry/ClassName.tsx

@@ -0,0 +1,86 @@
+import React, {
+  cloneElement,
+  FC,
+  Fragment,
+  isValidElement,
+  useEffect,
+  type HTMLElementType,
+} from "react";
+import { cx, type CxInput } from "../../utils/cx";
+
+export interface ClassNameProps {
+  className?: {
+    base?: CxInput;
+    hover?: CxInput;
+    active?: CxInput;
+    focus?: CxInput;
+    disabled?: CxInput;
+    [key: string]: CxInput;
+  };
+  /**
+   * @description 传入容器标签名.是否生成包含所有 `className` 的 `wrapper`, 默认 false, 传递 `true` 为 `div。`
+   * @description_en Whether to generate a `wrapper` containing all `className`, default is false, and pass the container tag name, if `true` will be `div`.
+   */
+  asWrapper?: boolean | HTMLElementType;
+  children?: React.ReactNode;
+}
+
+/**
+ * @description 用于将 `className` 分类编写的组件，内置了类似`clsx`的功能,并且去除重复的 className。
+ * @description_en A component for `className` classification, built-in similar to `clsx` functionality, and removes duplicate className.
+ * @component
+ * @example
+ * ```tsx
+ * <ClassName className={{ base: "p-2 bg-red", hover: ["hover:bg-blue", { "hover:text-white": true }] }}>
+ *   <button>Click me</button>
+ * </ClassName>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <ClassName
+ *   className={{
+ *     base: ["p-2", { "bg-red": condition }],
+ *     hover: { "hover:bg-blue": true },
+ *   }}
+ *   asWrapper="span"
+ * >
+ *   <button>Click me</button>
+ * </ClassName>
+ * ```
+ */
+export const ClassName: FC<ClassNameProps> = (props) => {
+  const { className, children, asWrapper } = props;
+
+  useEffect(() => {
+    if (isValidElement(children) === false) {
+      console.warn(
+        "<ClassName>: children is not a valid React element. Please check your code."
+      );
+    }
+  }, [children]);
+
+  if (!children) {
+    return null;
+  }
+
+  if (!className) {
+    return <Fragment>{children}</Fragment>;
+  }
+
+  const generatedCls = cx(...Object.values(className));
+
+  if (asWrapper) {
+    const Wrapper = typeof asWrapper === "string" ? asWrapper : "div";
+    return <Wrapper className={generatedCls}>{children}</Wrapper>;
+  }
+
+  if (isValidElement(children)) {
+    return cloneElement(children, {
+      //@ts-expect-error type error
+      className: cx(children.props.className, generatedCls),
+    } as any);
+  }
+
+  return <Fragment>{children}</Fragment>;
+};

package/src/components/Sundry/index.ts

@@ -0,0 +1,4 @@
+export * from './SizeBox'
+export * from './Scope'
+export * from './ClassName'
+export * from './Toggle'

package/src/hooks/index.ts

@@ -1 +1 @@
-export * from "./useControlled";
+export * from './useControlled'

package/src/hooks/useControlled.ts

@@ -1,36 +1,36 @@
-import { useCallback, useMemo, useState, type Dispatch } from "react";
+import {type Dispatch, useCallback, useMemo, useState} from 'react'
 
-const DEFAULT_TRIGGER = "onChange";
-const DEFAULT_VALUE_PROP_NAME = "value";
+const DEFAULT_TRIGGER = 'onChange'
+const DEFAULT_VALUE_PROP_NAME = 'value'
 
 export interface UseControlledOptions<T> {
   /**
    * @description - 非受控模式下的默认值,会被受控模式下的值覆盖
    * @description_en - Default value in uncontrolled mode, will be overridden by the value in controlled mode
    */
-  defaultValue: T;
+  defaultValue: T
   /**
    * @description - 值变更前的回调函数，可用于拦截或修改新值
    * @description_en - Callback function before the value changes, can be used to intercept or modify the new value
    */
-  onBeforeChange?: (newValue: T, currentValue: T) => boolean | void;
+  onBeforeChange?: (newValue: T, currentValue: T) => boolean | void
   /**
    * @description - 当值发生变化时触发的回调函数名
    * @description_en - Callback function name triggered when the value changes
    * @default - onChange
    */
-  trigger?: string;
+  trigger?: string
   /**
    * @description - 值的属性名
    * @description_en - Property name of the value
    * @default - value
    */
-  valuePropName?: string;
-  props: Record<string, any>;
+  valuePropName?: string
+  props: Record<string, any>
 }
 
 export function useControlled<T>(
-  options: UseControlledOptions<T>
+  options: UseControlledOptions<T>,
 ): [T, Dispatch<React.SetStateAction<T>>] {
   const {
     defaultValue,
@@ -38,36 +38,31 @@ export function useControlled<T>(
     trigger = DEFAULT_TRIGGER,
     valuePropName = DEFAULT_VALUE_PROP_NAME,
     props,
-  } = options;
-  const isControlled = Object.prototype.hasOwnProperty.call(
-    props,
-    valuePropName
-  );
-  const [internalValue, setInternalValue] = useState<T>(defaultValue);
-  const value = isControlled ? props[valuePropName] : internalValue;
-  const onChange = useMemo(() => props[trigger], [props, trigger]);
+  } = options
+  const isControlled = Object.prototype.hasOwnProperty.call(props, valuePropName)
+  const [internalValue, setInternalValue] = useState<T>(defaultValue)
+  const value = isControlled ? props[valuePropName] : internalValue
+  const onChange = useMemo(() => props[trigger], [props, trigger])
 
   const setValue = useCallback<Dispatch<React.SetStateAction<T>>>(
     (newValue) => {
       const resolvedValue =
-        typeof newValue === "function"
-          ? (newValue as (prev: T) => T)(value)
-          : newValue;
+        typeof newValue === 'function' ? (newValue as (prev: T) => T)(value) : newValue
       if (onBeforeChange) {
-        const shouldProceed = onBeforeChange(resolvedValue, value);
+        const shouldProceed = onBeforeChange(resolvedValue, value)
         if (shouldProceed === false) {
-          return;
+          return
         }
       }
       if (!isControlled) {
-        setInternalValue(resolvedValue);
+        setInternalValue(resolvedValue)
       }
       if (onChange) {
-        onChange(resolvedValue);
+        onChange(resolvedValue)
       }
     },
-    [isControlled, onBeforeChange, trigger, value, onChange]
-  );
+    [isControlled, onBeforeChange, value, onChange],
+  )
 
-  return [value, setValue];
+  return [value, setValue]
 }

package/src/index.ts

@@ -1,4 +1,9 @@
-export * from "./ProcessControl";
-export * from "./Common";
-export * from "./utils";
-export * from "./hooks";
+export * from './components/ProcessControl'
+export * from './components/Sundry'
+export * from './components/Struct'
+
+export * from './hooks'
+
+export * from './utils/sundry'
+export * from './utils/cx'
+export * from './utils/reactUtils'

package/src/utils/cx.test.ts

@@ -0,0 +1,33 @@
+import {describe, expect, it} from 'vitest'
+import {cx} from './cx'
+
+describe('cx', () => {
+  it('应该正确合并字符串类名', () => {
+    expect(cx('foo', 'bar')).toBe('foo bar')
+    expect(cx('foo', 'bar', 'baz')).toBe('foo bar baz')
+  })
+
+  it('应该过滤掉 falsy 值', () => {
+    expect(cx('foo', null, 'bar', undefined, false)).toBe('foo bar')
+  })
+
+  it('应该正确处理数组', () => {
+    expect(cx(['foo', 'bar'])).toBe('foo bar')
+    expect(cx('baz', ['foo', 'bar'])).toBe('baz foo bar')
+  })
+
+  it('应该正确处理对象', () => {
+    expect(cx({foo: true, bar: false})).toBe('foo')
+    expect(cx({foo: true, bar: true})).toBe('foo bar')
+  })
+
+  it('应该正确处理混合输入', () => {
+    expect(cx('foo', ['bar', 'baz'], {qux: true, quux: false})).toBe('foo bar baz qux')
+  })
+
+  it('应该去除重复的类名', () => {
+    expect(cx('foo', 'foo', 'bar')).toBe('foo bar')
+    expect(cx('foo', ['foo', 'bar'])).toBe('foo bar')
+    expect(cx('foo', {foo: true})).toBe('foo')
+  })
+})

package/src/utils/cx.ts

@@ -0,0 +1,25 @@
+export type CxInput = string | string[] | Record<string, boolean> | undefined | null | false
+
+export function cx(...args: CxInput[]): string {
+  const classes = new Set<string>()
+
+  for (const arg of args) {
+    if (!arg) {
+      continue
+    }
+
+    if (typeof arg === 'string') {
+      classes.add(arg)
+    } else if (Array.isArray(arg)) {
+      arg.forEach((item) => classes.add(item))
+    } else if (typeof arg === 'object') {
+      for (const [key, value] of Object.entries(arg)) {
+        if (value) {
+          classes.add(key)
+        }
+      }
+    }
+  }
+
+  return Array.from(classes).join(' ')
+}

package/src/utils/reactUtils.ts

@@ -0,0 +1,22 @@
+import type React from 'react'
+/**
+ * @description 性能优化，替代 React.Children.forEach, 回调可以返回 false 来中断循环
+ * @description_en Replace React.Children.forEach, the callback can return false to interrupt the loop
+ */
+export function childrenLoop(
+  children: React.ReactNode | undefined,
+  callback: (child: React.ReactNode, index: number) => boolean | void,
+): void {
+  if (children === undefined) return
+  let index = 0
+  if (Array.isArray(children)) {
+    for (const child of children) {
+      const shouldContinue = callback(child, index++)
+      if (shouldContinue === false) {
+        break
+      }
+    }
+  } else {
+    callback(children, index)
+  }
+}

package/src/utils/sundry.test.ts

@@ -0,0 +1,130 @@
+import {describe, expect, it} from 'vitest'
+import {Counter, formatDate} from './sundry'
+
+describe('formatDate', () => {
+  // 使用一个固定的日期来测试，以避免时间差异导致的测试失败
+  // 2023-04-15 14:30:45.678 星期六
+  const testDate = new Date(2023, 3, 15, 14, 30, 45, 678)
+
+  it('应该正确格式化年份', () => {
+    expect(formatDate('YY', testDate)).toBe('23')
+    expect(formatDate('YYYY', testDate)).toBe('2023')
+  })
+
+  it('应该正确格式化月份', () => {
+    expect(formatDate('M', testDate)).toBe('4')
+    expect(formatDate('MM', testDate)).toBe('04')
+    expect(formatDate('MMM', testDate)).toBe('Apr')
+    expect(formatDate('MMMM', testDate)).toBe('April')
+  })
+
+  it('应该正确格式化日期', () => {
+    expect(formatDate('D', testDate)).toBe('15')
+    expect(formatDate('DD', testDate)).toBe('15')
+  })
+
+  it('应该正确格式化星期', () => {
+    expect(formatDate('d', testDate)).toBe('6')
+    expect(formatDate('dd', testDate)).toBe('Sat')
+    expect(formatDate('ddd', testDate)).toBe('Sat')
+    expect(formatDate('dddd', testDate)).toBe('Saturday')
+  })
+
+  it('应该正确格式化小时', () => {
+    expect(formatDate('H', testDate)).toBe('14')
+    expect(formatDate('HH', testDate)).toBe('14')
+    expect(formatDate('h', testDate)).toBe('2')
+    expect(formatDate('hh', testDate)).toBe('02')
+  })
+
+  it('应该正确格式化分钟和秒', () => {
+    expect(formatDate('m', testDate)).toBe('30')
+    expect(formatDate('mm', testDate)).toBe('30')
+    expect(formatDate('s', testDate)).toBe('45')
+    expect(formatDate('ss', testDate)).toBe('45')
+  })
+
+  it('应该正确格式化毫秒', () => {
+    expect(formatDate('SSS', testDate)).toBe('678')
+  })
+
+  it('应该正确格式化上午/下午', () => {
+    expect(formatDate('A', testDate)).toBe('PM')
+    expect(formatDate('a', testDate)).toBe('pm')
+
+    const morningDate = new Date(2023, 3, 15, 9, 30, 45, 678)
+    expect(formatDate('A', morningDate)).toBe('AM')
+    expect(formatDate('a', morningDate)).toBe('am')
+  })
+
+  it('应该正确组合多种格式', () => {
+    expect(formatDate('YYYY-MM-DD', testDate)).toBe('2023-04-15')
+    expect(formatDate('YYYY/MM/DD HH:mm:ss', testDate)).toBe('2023/04/15 14:30:45')
+    expect(formatDate('YYYY年MM月DD日 HH时mm分ss秒', testDate)).toBe('2023年04月15日 14时30分45秒')
+    expect(formatDate('YY-MM-DD hh:mm:ss A', testDate)).toBe('23-04-15 02:30:45 PM')
+  })
+
+  it('当不传入日期时应该使用当前日期', () => {
+    // 由于测试时间不确定，这里只测试格式是否正确，不测试具体的值
+    const result = formatDate('YYYY-MM-DD')
+    expect(result).toMatch(/^\d{4}-\d{2}-\d{2}$/)
+  })
+})
+
+describe('Counter', () => {
+  it('应该从0开始计数', () => {
+    const counter = new Counter()
+    expect(counter.count).toBe(0)
+  })
+
+  it('next() 方法应该返回当前计数并递增', () => {
+    const counter = new Counter()
+    expect(counter.next()).toBe(0)
+    expect(counter.count).toBe(1)
+    expect(counter.next()).toBe(1)
+    expect(counter.count).toBe(2)
+  })
+
+  it('连续调用 next() 应该正确递增', () => {
+    const counter = new Counter()
+    expect(counter.next()).toBe(0)
+    expect(counter.next()).toBe(1)
+    expect(counter.next()).toBe(2)
+    expect(counter.next()).toBe(3)
+    expect(counter.count).toBe(4)
+  })
+})
+
+/* describe("cx", () => {
+  it("应该正确合并字符串类名", () => {
+    expect(cx("foo", "bar")).toBe("foo bar");
+    expect(cx("foo", "bar", "baz")).toBe("foo bar baz");
+  });
+
+  it("应该过滤掉 falsy 值", () => {
+    expect(cx("foo", null, "bar", undefined, false)).toBe("foo bar");
+  });
+
+  it("应该正确处理数组", () => {
+    expect(cx(["foo", "bar"])).toBe("foo bar");
+    expect(cx("baz", ["foo", "bar"])).toBe("baz foo bar");
+  });
+
+  it("应该正确处理对象", () => {
+    expect(cx({ foo: true, bar: false })).toBe("foo");
+    expect(cx({ foo: true, bar: true })).toBe("foo bar");
+  });
+
+  it("应该正确处理混合输入", () => {
+    expect(cx("foo", ["bar", "baz"], { qux: true, quux: false })).toBe(
+      "foo bar baz qux"
+    );
+  });
+
+  it("应该去除重复的类名", () => {
+    expect(cx("foo", "foo", "bar")).toBe("foo bar");
+    expect(cx("foo", ["foo", "bar"])).toBe("foo bar");
+    expect(cx("foo", { foo: true })).toBe("foo");
+  });
+});
+ */

package/src/utils/sundry.ts

@@ -0,0 +1,130 @@
+/**
+ * @param schema
+ * @example
+ * YY | 18 | Two-digit year
+ * YYYY | 2018 | Four-digit year
+ * M | 1-12 | The month, beginning at 1
+ * MM | 01-12 | The month, 2-digits
+ * MMM | Jan-Dec | The abbreviated month name
+ * MMMM | January-December | The full month name
+ * D | 1-31 | The day of the month
+ * DD | 01-31 | The day of the month, 2-digits
+ * d | 0-6 | The day of the week, with Sunday as 0
+ * dd | Su-Sa | The min name of the day of the week
+ * ddd | Sun-Sat | The short name of the day of the week
+ * dddd | Sunday-Saturday | The name of the day of the week
+ * H | 0-23 | The hour
+ * HH | 00-23 | The hour, 2-digits
+ * h | 1-12 | The hour, 12-hour clock
+ * hh | 01-12 | The hour, 12-hour clock, 2-digits
+ * m | 0-59 | The minute
+ * mm | 00-59 | The minute, 2-digits
+ * s | 0-59 | The second
+ * ss | 00-59 | The second, 2-digits
+ * SSS | 000-999 | The millisecond, 3-digits
+ * Z | +05:00 | The offset from UTC, ±HH:mm
+ * ZZ | +0500 | The offset from UTC, ±HHmm
+ * A | AM | PM
+ * a | am | pm
+ */
+export function formatDate(schema: string, date?: Date): string {
+  const d = date || new Date()
+  const year = d.getFullYear()
+  const month = d.getMonth() + 1
+  const day = d.getDate()
+  const hour = d.getHours()
+  const minute = d.getMinutes()
+  const second = d.getSeconds()
+  const millisecond = d.getMilliseconds()
+  const week = d.getDay()
+  const weekName = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+  const weekFullName = [
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday',
+  ]
+  const monthName = [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec',
+  ]
+  const monthFullName = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ]
+  // 直接使用 week 索引，不进行转换，因为 getDay() 已经返回了正确的星期索引 (0-6)
+  const weekFull = weekFullName[week]!
+  const weekShort = weekName[week]!
+  const monthIndex = month - 1
+  const monthFull = monthFullName[monthIndex]!
+  const monthShort = monthName[monthIndex]!
+  const map: Record<string, string> = {
+    YY: year.toString().slice(2),
+    YYYY: year.toString(),
+    M: month.toString(),
+    MM: month.toString().padStart(2, '0'),
+    MMM: monthShort,
+    MMMM: monthFull,
+    D: day.toString(),
+    DD: day.toString().padStart(2, '0'),
+    d: week.toString(),
+    dd: weekShort,
+    ddd: weekShort,
+    dddd: weekFull,
+    H: hour.toString(),
+    HH: hour.toString().padStart(2, '0'),
+    h: (hour % 12).toString(),
+    hh: (hour % 12).toString().padStart(2, '0'),
+    m: minute.toString(),
+    mm: minute.toString().padStart(2, '0'),
+    s: second.toString(),
+    ss: second.toString().padStart(2, '0'),
+    SSS: millisecond.toString().padStart(3, '0'),
+    Z: '+08:00',
+    ZZ: '+0800',
+    A: hour < 12 ? 'AM' : 'PM',
+    a: hour < 12 ? 'am' : 'pm',
+  }
+
+  return schema.replace(
+    /YYYY|YY|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|m{1,2}|s{1,2}|SSS|Z{1,2}|A|a/g,
+    (match) => {
+      return map[match]!
+    },
+  )
+}
+
+export class Counter {
+  count = 0
+
+  /**
+   * @description 获取下一个计数值,不考虑越界。
+   * @description_en Get the next count value, without considering overflow.
+   */
+  next() {
+    return this.count++
+  }
+}

package/src/Common/index.ts

@@ -1,4 +0,0 @@
-export * from "./SizeBox";
-export * from "./ArrayRender";
-export * from "./Scope";
-export * from "./DateRender";

package/src/ProcessControl/index.ts

@@ -1,5 +0,0 @@
-export * from "./Switch";
-export * from "./If";
-export * from "./When";
-export * from "./Pipe";
-export * from "./Toggle";

package/src/utils/index.ts

@@ -1,153 +0,0 @@
-import React from "react";
-/**
- * @description 性能优化，替代 React.Children.forEach, 回调可以返回 false 来中断循环
- * @description_en Replace React.Children.forEach, the callback can return false to interrupt the loop
- */
-export function childrenLoop(
-  children: React.ReactNode | undefined,
-  callback: (child: React.ReactNode, index: number) => boolean | void
-): void {
-  if (children === undefined) return;
-  let index = 0;
-  if (Array.isArray(children)) {
-    for (const child of children) {
-      const shouldContinue = callback(child, index++);
-      if (shouldContinue === false) {
-        break;
-      }
-    }
-  } else {
-    callback(children, index);
-  }
-}
-
-/**
- * @param schema
- * @example
- * YY | 18 | Two-digit year
- * YYYY | 2018 | Four-digit year
- * M | 1-12 | The month, beginning at 1
- * MM | 01-12 | The month, 2-digits
- * MMM | Jan-Dec | The abbreviated month name
- * MMMM | January-December | The full month name
- * D | 1-31 | The day of the month
- * DD | 01-31 | The day of the month, 2-digits
- * d | 0-6 | The day of the week, with Sunday as 0
- * dd | Su-Sa | The min name of the day of the week
- * ddd | Sun-Sat | The short name of the day of the week
- * dddd | Sunday-Saturday | The name of the day of the week
- * H | 0-23 | The hour
- * HH | 00-23 | The hour, 2-digits
- * h | 1-12 | The hour, 12-hour clock
- * hh | 01-12 | The hour, 12-hour clock, 2-digits
- * m | 0-59 | The minute
- * mm | 00-59 | The minute, 2-digits
- * s | 0-59 | The second
- * ss | 00-59 | The second, 2-digits
- * SSS | 000-999 | The millisecond, 3-digits
- * Z | +05:00 | The offset from UTC, ±HH:mm
- * ZZ | +0500 | The offset from UTC, ±HHmm
- * A | AM | PM
- * a | am | pm
- */
-export function formatDate(schema: string, date?: Date): string {
-  const d = date || new Date();
-  const year = d.getFullYear();
-  const month = d.getMonth() + 1;
-  const day = d.getDate();
-  const hour = d.getHours();
-  const minute = d.getMinutes();
-  const second = d.getSeconds();
-  const millisecond = d.getMilliseconds();
-  const week = d.getDay();
-  const weekName = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-  const weekFullName = [
-    "Sunday",
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday",
-  ];
-  const monthName = [
-    "Jan",
-    "Feb",
-    "Mar",
-    "Apr",
-    "May",
-    "Jun",
-    "Jul",
-    "Aug",
-    "Sep",
-    "Oct",
-    "Nov",
-    "Dec",
-  ];
-  const monthFullName = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ];
-  const weekIndex = week === 0 ? 6 : week - 1;
-  const weekFull = weekFullName[weekIndex]!;
-  const weekShort = weekName[weekIndex]!;
-  const monthIndex = month - 1;
-  const monthFull = monthFullName[monthIndex]!;
-  const monthShort = monthName[monthIndex]!;
-  const map: Record<string, string> = {
-    YY: year.toString().slice(2),
-    YYYY: year.toString(),
-    M: month.toString(),
-    MM: month.toString().padStart(2, "0"),
-    MMM: monthShort,
-    MMMM: monthFull,
-    D: day.toString(),
-    DD: day.toString().padStart(2, "0"),
-    d: week.toString(),
-    dd: weekShort,
-    ddd: weekShort,
-    dddd: weekFull,
-    H: hour.toString(),
-    HH: hour.toString().padStart(2, "0"),
-    h: (hour % 12).toString(),
-    hh: (hour % 12).toString().padStart(2, "0"),
-    m: minute.toString(),
-    mm: minute.toString().padStart(2, "0"),
-    s: second.toString(),
-    ss: second.toString().padStart(2, "0"),
-    SSS: millisecond.toString().padStart(3, "0"),
-    Z: "+08:00",
-    ZZ: "+0800",
-    A: hour < 12 ? "AM" : "PM",
-    a: hour < 12 ? "am" : "pm",
-  };
-
-  return schema.replace(
-    /YYYY|YY|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|m{1,2}|s{1,2}|SSS|Z{1,2}|A|a/g,
-    (match) => {
-      return map[match]!;
-    }
-  );
-}
-
-export class Counter {
-  count = 0;
-
-  /**
-   * @description 获取下一个计数值,不考虑越界。
-   * @description_en Get the next count value, without considering overflow.
-   */
-  next() {
-    return this.count++;
-  }
-}