@wwog/react 1.2.1 → 1.2.3

package/README.md

@@ -150,25 +150,18 @@ function Example({ isActive }) {
 ```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 */
+  }}
+/>;
 ```
 
 - `options`：可切换的值数组。
 - `index`：默认:0。
-- `target`：传递切换值给子节点的属性名，默认 value。
-- `toggleTarget`：传递切换函数给子节点的属性名，默认 toggle。
 - `next`：自定义切换逻辑函数。
-- `children`：渲染内容。
+- `render`：渲染函数。
 
 ### 通用组件
 
@@ -263,6 +256,37 @@ function Example() {
 - `children`：作用域变量的渲染函数。
 - `fallback`：无内容时的兜底渲染。
 
+#### `<DateRender>` (v1.2.3+)
+
+一个声明式组件，用于格式化并渲染日期，简单易用且支持自定义格式化。
+
+```tsx
+import { DateRender } from "@wwog/react";
+
+function Example() {
+  return (
+    <>
+      {/* 使用默认格式化 */}
+      <DateRender source="2025-05-06">
+        {(formatted) => <div>日期: {formatted}</div>}
+      </DateRender>
+
+      {/* 使用自定义格式化 */}
+      <DateRender
+        source={new Date()}
+        format={(date) => date.toLocaleDateString("zh-CN")}
+      >
+        {(formatted) => <div>日期: {formatted}</div>}
+      </DateRender>
+    </>
+  );
+}
+```
+
+- `source`：要渲染的输入日期（Date 对象、ISO 字符串或时间戳）。
+- `format`：可选的格式化日期的函数，默认使用 `toLocaleString()`。
+- `children`：渲染格式化后日期的函数，接收格式化后的日期作为参数。
+
 #### `<SizeBox>`
 
 创建固定尺寸的容器，用于布局调整和间距控制。
@@ -288,25 +312,20 @@ function Layout() {
 }
 ```
 
-### Ideas
-
-> 需求不高,但有用的组件
-
-- Loop：灵活的迭代渲染，支持数组、对象和范围。
-- Try：封装异步逻辑，处理 Promise 状态。
-- Pick：轻量版值选择渲染，类似枚举匹配。
-- Render：动态渲染函数，简化复杂渲染逻辑。
-- Once：确保内容仅渲染一次，适合初始化。
-- Each：增强列表渲染，支持过滤和排序。
-
 ### hooks
 
-- 一些常用的hooks的封装
+- 一些常用的 hooks 的封装
 
-### useControlled (v1.2.0+)
+#### useControlled (v1.2.0+)
 
 - 受控组件和非受控组件的切换,方便组件开发
 
+### method
+
+- 用于部分组件的内部函数,如需要也可使用
+
+formatDate  比较标准的格式化时间函数
+childrenLoop 可以中断的子节点遍历，让一些分支流程拥有极致性能
 
 ## License
 

package/dist/index.d.mts

@@ -202,18 +202,6 @@ interface ToggleProps<T = boolean> {
      * @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 index in the toggle sequence.
      * @description_zh 确定切换序列中下一个值索引的函数。
@@ -221,46 +209,26 @@ interface ToggleProps<T = boolean> {
      */
     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={(currentIndex, options) => {
- *     return (currentIndex + 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 | 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> | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>)[] | null | undefined;
+declare const Toggle: <T>(props: ToggleProps<T>) => React$1.ReactNode;
 
 interface SizeBoxProps {
     size?: number | string;
@@ -338,11 +306,84 @@ interface ScopeProps {
  */
 declare const Scope: FC<ScopeProps>;
 
+interface DateRenderProps<T = string> {
+    /**
+     * @description_en The input date to render (Date object, ISO string, or timestamp).
+     * @description_zh 要渲染的输入日期（Date 对象、ISO 字符串或时间戳）。
+     */
+    source: Date | string | number;
+    /**
+     * @description_en Function to format the date.
+     * @description_zh 格式化日期的函数。
+     * @optional
+     * @default toLocaleString
+     */
+    format?: (date: Date) => T;
+    /**
+     * @description_en Function to render the formatted date.
+     * @description_zh 渲染格式化后日期的函数。
+     */
+    children: (formatted: T) => React$1.ReactNode;
+}
+/**
+ * @description_zh 一个声明式组件，用于格式化并渲染日期，简单易用且支持自定义格式化。
+ * @description_en A declarative component for formatting and rendering dates, simple to use with support for custom formatting.
+ * @component
+ * @template T - The type of the formatted date value
+ * @example
+ * ```tsx
+ * <DateRender source="2025-05-06">
+ *   {(formatted) => <div>日期: {formatted}</div>}
+ * </DateRender>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <DateRender<string>
+ *   source={new Date()}
+ *   format={(date) => date.toLocaleDateString("zh-CN")}
+ * >
+ *   {(formatted) => <div>日期: {formatted}</div>}
+ * </DateRender>
+ * ```
+ */
+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;
+/**
+ * @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
+ */
+declare function formatDate(schema: string, date?: Date): string;
 
 interface UseControlledOptions<T> {
     /**
@@ -371,5 +412,5 @@ interface UseControlledOptions<T> {
 }
 declare function useControlled<T>(options: UseControlledOptions<T>): [T, Dispatch<React.SetStateAction<T>>];
 
-export { ArrayRender, False, If, Pipe, Scope, SizeBox, Switch, Toggle, True, When, childrenLoop, useControlled };
-export type { ArrayRenderProps, ElseIfProps, ElseProps, FalseProps, IfProps, PipeProps, ScopeProps, SwitchCaseProps, SwitchDefaultProps, SwitchProps, ThenProps, ToggleProps, TrueProps, UseControlledOptions, WhenProps };
+export { ArrayRender, 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 };

package/dist/index.js

@@ -1 +1 @@
-import n,{useMemo as y,useEffect as C,useState as S,Fragment as T,useCallback as x}from"react";function I(e,l){if(e===void 0)return;let t=0;if(Array.isArray(e)){for(const a of e)if(l(a,t++)===!1)break}else l(e,t)}const $=(e,l)=>e===l,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:l,compare:t=$,children:a,strict:o=!1}=e,r=new Set;let i=null,u=null,h=!1;return I(a,(s,d)=>{if(!n.isValidElement(s))throw new Error(`Switch Children only accepts valid React elements at index ${d}`);const c=s.type;if(c.displayName===g.displayName){const m=s.props;if(r.has(m.value))throw new Error(`Switch found duplicate Case value at index ${d}: ${JSON.stringify(m.value)}${o?" (detected in strict mode)":""}`);if(r.add(m.value),!i&&t(l,m.value)&&(i=m.children,o===!1))return!1}else if(c.displayName===E.displayName){if(h)throw new Error(`Switch can only have one Default child at index ${d}`);if(h=!0,u=s.props.children,!o&&i)return!1}else throw new Error(`Switch Children only accepts 'Case' or 'Default' elements, found: ${String(c.displayName||c.name||c)} at index ${d}`)}),n.createElement(n.Fragment,null,i??u)};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 f=({condition:e,children:l})=>{let t=null,a=null;const o=[];if(n.Children.forEach(l,r=>{if(!n.isValidElement(r))throw new Error("If component only accepts valid React elements");const i=r.type;if(i.displayName===w.displayName){if(t)throw new Error("If component can only have one Then child");t=r}else if(i.displayName===v.displayName)o.push(r);else if(i.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(i.displayName||i.name||i)}`)}),e)return t?n.createElement(n.Fragment,null,t.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};f.displayName="If",f.Then=w,f.ElseIf=v,f.Else=N,f.createTyped=function(){return{If:f,Then:w,ElseIf:v,Else:N}};const b=({condition:e,children:l})=>e?n.createElement(n.Fragment,null,l):null,k=({condition:e,children:l})=>e===!1?n.createElement(n.Fragment,null,l):null,D=({all:e,any:l,none:t,children:a,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(r=>!r))),[e,l,t])?n.createElement(n.Fragment,null,a):n.createElement(n.Fragment,null,o||null),_=({data:e,transform:l,render:t,fallback:a})=>{const o=y(()=>l.reduce((r,i)=>i(r),e),[e,l]);return o==null?n.createElement(n.Fragment,null,a||null):n.createElement(n.Fragment,null,t(o))},A=e=>{const{index:l=0,options:t,target:a="value",toggleTarget:o="toggle",next:r,children:i}=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[u,h]=S(l),s=()=>r?r(u,t):(u+1)%t.length,d=()=>{h(c=>t.length?s():c)};return n.Children.map(i,c=>n.isValidElement(c)?n.cloneElement(c,{[a]:u,[o]:d}):c)},B=e=>{const{children:l,h:t,w:a,size:o,height:r,width:i,className:u}=e;return n.createElement("div",{style:{width:o||a||i,height:o||t||r,flexShrink:0},className:u},l)};function O(e){const{items:l,renderItem:t,filter:a}=e;return l?n.createElement(T,null,l.map((o,r)=>a&&!a(o)?null:t(o,r))):(console.error("ArrayRender: items is null"),null)}const R=({let:e,props:l,children:t,fallback:a})=>{const o=y(()=>typeof e=="function"?e(l):e,[e,l]);return!t||!Object.keys(o).length?n.createElement(n.Fragment,null,a||null):n.createElement(n.Fragment,null,t(o))},V="onChange",P="value";function j(e){const{defaultValue:l,onBeforeChange:t,trigger:a=V,valuePropName:o=P,props:r}=e,i=Object.prototype.hasOwnProperty.call(r,o),[u,h]=S(l),s=i?r[o]:u,d=y(()=>r[a],[r,a]),c=x(m=>{const F=typeof m=="function"?m(s):m;t&&t(F,s)===!1||(i||h(F),d&&d(F))},[i,t,a,s,d]);return[s,c]}export{O as ArrayRender,k as False,f as If,_ as Pipe,R as Scope,B as SizeBox,p as Switch,A as Toggle,b as True,D as When,I as childrenLoop,j as useControlled};
+import r,{useMemo as h,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,Y=m[M],v=f[M],D=a-1,C=T[D],A=y[D],x={YY:l.toString().slice(2),YYYY:l.toString(),M:a.toString(),MM:a.toString().padStart(2,"0"),MMM:A,MMMM:C,D:o.toString(),DD:o.toString().padStart(2,"0"),d:s.toString(),dd:v,ddd:v,dddd:Y,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=>x[k])}const _=(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=_,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 p=({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};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 B=({condition:e,children:t})=>e?r.createElement(r.Fragment,null,t):null,P=({condition:e,children:t})=>e===!1?r.createElement(r.Fragment,null,t):null,W=({all:e,any:t,none:n,children:l,fallback:a})=>h(()=>(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),Z=({data:e,transform:t,render:n,fallback:l})=>{const a=h(()=>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))},V=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)},$=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 j(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 z=({let:e,props:t,children:n,fallback:l})=>{const a=h(()=>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 L({source:e,format:t,children:n}){const l=h(()=>{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=h(()=>l?t?t(l):l.toLocaleString():null,[l,t]);return!a||!n?null:r.createElement(r.Fragment,null,n(a))}const q="onChange",G="value";function K(e){const{defaultValue:t,onBeforeChange:n,trigger:l=q,valuePropName:a=G,props:o}=e,i=Object.prototype.hasOwnProperty.call(o,a),[c,u]=b(t),d=i?o[a]:c,s=h(()=>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{j as ArrayRender,L as DateRender,P as False,p as If,Z as Pipe,z as Scope,$ as SizeBox,g as Switch,V as Toggle,B as True,W as When,I as childrenLoop,R as formatDate,K as useControlled};

package/package.json

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

package/src/Common/DateRender.tsx

@@ -0,0 +1,72 @@
+import React, { useMemo } from "react";
+
+export interface DateRenderProps<T = string> {
+  /**
+   * @description_en The input date to render (Date object, ISO string, or timestamp).
+   * @description_zh 要渲染的输入日期（Date 对象、ISO 字符串或时间戳）。
+   */
+  source: Date | string | number;
+  /**
+   * @description_en Function to format the date.
+   * @description_zh 格式化日期的函数。
+   * @optional
+   * @default toLocaleString
+   */
+  format?: (date: Date) => T;
+  /**
+   * @description_en Function to render the formatted date.
+   * @description_zh 渲染格式化后日期的函数。
+   */
+  children: (formatted: T) => React.ReactNode;
+}
+
+/**
+ * @description_zh 一个声明式组件，用于格式化并渲染日期，简单易用且支持自定义格式化。
+ * @description_en A declarative component for formatting and rendering dates, simple to use with support for custom formatting.
+ * @component
+ * @template T - The type of the formatted date value
+ * @example
+ * ```tsx
+ * <DateRender source="2025-05-06">
+ *   {(formatted) => <div>日期: {formatted}</div>}
+ * </DateRender>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <DateRender<string>
+ *   source={new Date()}
+ *   format={(date) => date.toLocaleDateString("zh-CN")}
+ * >
+ *   {(formatted) => <div>日期: {formatted}</div>}
+ * </DateRender>
+ * ```
+ */
+export function DateRender<T = string>({
+  source,
+  format,
+  children,
+}: DateRenderProps<T>) {
+  const date = useMemo(() => {
+    if (source instanceof Date) return source;
+    if (typeof source === "string" || typeof source === "number") {
+      const parsed = new Date(source);
+      return isNaN(parsed.getTime()) ? null : parsed;
+    }
+    return null;
+  }, [source]);
+
+  const formattedDate = useMemo(() => {
+    if (!date) return null;
+    if (format) {
+      return format(date);
+    }
+    return date.toLocaleString() as unknown as T;
+  }, [date, format]);
+
+  if (!formattedDate || !children) {
+    return null;
+  }
+
+  return <>{children(formattedDate)}</>;
+}

package/src/Common/index.ts

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

package/src/ProcessControl/Toggle.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useState, useMemo, useEffect } from "react";
+import React, { useState, useEffect, ReactNode } from "react";
 
 export interface ToggleProps<T = boolean> {
   /**
@@ -12,18 +12,6 @@ export interface ToggleProps<T = boolean> {
    * @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 index in the toggle sequence.
    * @description_zh 确定切换序列中下一个值索引的函数。
@@ -31,54 +19,32 @@ export interface ToggleProps<T = boolean> {
    */
   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={(currentIndex, options) => {
- *     return (currentIndex + 1) % options.length;
- *   }}
- * >
- *   <ValueChild />
- * </Toggle>
+ *   options={["light", "dark"]}
+ *   render={(theme, toggleTheme) => (
+ *     <div onClick={toggleTheme}>当前主题: {theme}</div>
+ *   )}
+ * />
  * ```
  */
 export const Toggle = <T,>(props: ToggleProps<T>) => {
   const {
     index = 0,
     options,
-    target = "value",
-    toggleTarget = "toggle",
     next,
-    children,
+    render,
   } = props;
 
   useEffect(() => {
@@ -90,27 +56,12 @@ export const Toggle = <T,>(props: ToggleProps<T>) => {
   }, [index, options]);
 
   const [curIndex, setCurIndex] = useState<number>(index);
-  const nextIndex = () => {
-    if (next) {
-      return next(curIndex, options);
-    }
-    return (curIndex + 1) % options.length;
-  };
-
   const toggle = () => {
     setCurIndex((prev) => {
       if (!options.length) return prev;
-      return nextIndex();
+      return next ? next(prev, options) : (prev + 1) % options.length;
     });
   };
 
-  return React.Children.map(children, (child) => {
-    if (React.isValidElement(child)) {
-      return React.cloneElement(child, {
-        [target]: curIndex,
-        [toggleTarget]: toggle,
-      } as { [key: string]: any });
-    }
-    return child;
-  });
+  return render(options[curIndex], toggle);
 };

package/src/utils/index.ts

@@ -20,3 +20,122 @@ export function childrenLoop(
     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]!;
+    }
+  );
+}