@wwog/react 1.3.3 → 1.3.4

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wwog/react",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "A practical React component library providing declarative flow control and common UI utility components to make your React code more concise and readable.",
   "keywords": [
     "react",

package/src/components/Sundry/Observer.tsx

@@ -5,7 +5,10 @@ export interface ObserverProps {
    * @description_en Callback function when intersection occurs.
    * @description_zh 交叉时触发的回调函数。
    */
-  onIntersect: (entry: IntersectionObserverEntry, observer: IntersectionObserver) => void;
+  onIntersect: (
+    entry: IntersectionObserverEntry,
+    observer: IntersectionObserver
+  ) => void;
   /**
    * @description_en Threshold(s) at which to trigger the callback. Default is 0.1.
    * @description_zh 触发回调的阈值，默认为 0.1。
@@ -76,14 +79,14 @@ export interface ObserverProps {
  * <Observer onIntersect={loadImage} triggerOnce>
  *   <img data-src="image.jpg" alt="Lazy loaded" />
  * </Observer>
- * 
+ *
  * // 无限滚动示例
  * <Observer onIntersect={loadMore} threshold={0.1}>
  *   <div>滚动到这里加载更多</div>
  * </Observer>
- * 
+ *
  * // 自定义根元素和边距
- * <Observer 
+ * <Observer
  *   onIntersect={handleIntersect}
  *   root={scrollContainer}
  *   rootMargin="100px"
@@ -115,7 +118,7 @@ export const Observer: React.FC<ObserverProps> = ({
 
     // 检查浏览器支持
     if (!window.IntersectionObserver) {
-      console.warn('IntersectionObserver is not supported in this browser');
+      console.warn("IntersectionObserver is not supported in this browser");
       return;
     }
 
@@ -123,17 +126,15 @@ export const Observer: React.FC<ObserverProps> = ({
 
     const handleIntersect = (entries: IntersectionObserverEntry[]) => {
       entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          if (triggerOnce && hasTriggeredRef.current) {
-            return;
-          }
+        if (triggerOnce && hasTriggeredRef.current) {
+          return;
+        }
+
+        onIntersect(entry, observerRef.current!);
 
-          onIntersect(entry, observerRef.current!);
-          
-          if (triggerOnce) {
-            hasTriggeredRef.current = true;
-            observerRef.current?.unobserve(element);
-          }
+        if (triggerOnce) {
+          hasTriggeredRef.current = true;
+          observerRef.current?.unobserve(element);
         }
       });
     };
@@ -165,4 +166,4 @@ export const Observer: React.FC<ObserverProps> = ({
       {children}
     </div>
   );
-};
+};