@wwog/react 1.3.2 → 1.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1 -1
- package/package.json +11 -12
- package/src/components/Sundry/Observer.tsx +17 -16
- package/src/components/Sundry/Styles.tsx +6 -6
- package/src/utils/promise.ts +1 -2
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wwog/react",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.4",
|
|
4
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.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -20,15 +20,6 @@
|
|
|
20
20
|
],
|
|
21
21
|
"homepage": "https://github.com/wwog/react",
|
|
22
22
|
"license": "MIT",
|
|
23
|
-
"scripts": {
|
|
24
|
-
"build": "unbuild",
|
|
25
|
-
"format": "biome format --write src",
|
|
26
|
-
"check": "biome check --write src",
|
|
27
|
-
"test:unit": "vitest run --browser.headless",
|
|
28
|
-
"test:types": "tsc --noEmit --skipLibCheck",
|
|
29
|
-
"all-suites": "pnpm run format && pnpm run check && pnpm run test:types && pnpm run test:unit",
|
|
30
|
-
"test:watch": "vitest"
|
|
31
|
-
},
|
|
32
23
|
"devDependencies": {
|
|
33
24
|
"@biomejs/biome": "^1.9.4",
|
|
34
25
|
"@types/react": "^19.1.2",
|
|
@@ -50,5 +41,13 @@
|
|
|
50
41
|
"node": ">= 20.0.0",
|
|
51
42
|
"pnpm": ">=8.15.0"
|
|
52
43
|
},
|
|
53
|
-
"
|
|
54
|
-
|
|
44
|
+
"scripts": {
|
|
45
|
+
"build": "unbuild",
|
|
46
|
+
"format": "biome format --write src",
|
|
47
|
+
"check": "biome check --write src",
|
|
48
|
+
"test:unit": "vitest run --browser.headless",
|
|
49
|
+
"test:types": "tsc --noEmit --skipLibCheck",
|
|
50
|
+
"all-suites": "pnpm run format && pnpm run check && pnpm run test:types && pnpm run test:unit",
|
|
51
|
+
"test:watch": "vitest"
|
|
52
|
+
}
|
|
53
|
+
}
|
|
@@ -5,7 +5,10 @@ export interface ObserverProps {
|
|
|
5
5
|
* @description_en Callback function when intersection occurs.
|
|
6
6
|
* @description_zh 交叉时触发的回调函数。
|
|
7
7
|
*/
|
|
8
|
-
onIntersect: (
|
|
8
|
+
onIntersect: (
|
|
9
|
+
entry: IntersectionObserverEntry,
|
|
10
|
+
observer: IntersectionObserver
|
|
11
|
+
) => void;
|
|
9
12
|
/**
|
|
10
13
|
* @description_en Threshold(s) at which to trigger the callback. Default is 0.1.
|
|
11
14
|
* @description_zh 触发回调的阈值,默认为 0.1。
|
|
@@ -76,14 +79,14 @@ export interface ObserverProps {
|
|
|
76
79
|
* <Observer onIntersect={loadImage} triggerOnce>
|
|
77
80
|
* <img data-src="image.jpg" alt="Lazy loaded" />
|
|
78
81
|
* </Observer>
|
|
79
|
-
*
|
|
82
|
+
*
|
|
80
83
|
* // 无限滚动示例
|
|
81
84
|
* <Observer onIntersect={loadMore} threshold={0.1}>
|
|
82
85
|
* <div>滚动到这里加载更多</div>
|
|
83
86
|
* </Observer>
|
|
84
|
-
*
|
|
87
|
+
*
|
|
85
88
|
* // 自定义根元素和边距
|
|
86
|
-
* <Observer
|
|
89
|
+
* <Observer
|
|
87
90
|
* onIntersect={handleIntersect}
|
|
88
91
|
* root={scrollContainer}
|
|
89
92
|
* rootMargin="100px"
|
|
@@ -115,7 +118,7 @@ export const Observer: React.FC<ObserverProps> = ({
|
|
|
115
118
|
|
|
116
119
|
// 检查浏览器支持
|
|
117
120
|
if (!window.IntersectionObserver) {
|
|
118
|
-
console.warn(
|
|
121
|
+
console.warn("IntersectionObserver is not supported in this browser");
|
|
119
122
|
return;
|
|
120
123
|
}
|
|
121
124
|
|
|
@@ -123,17 +126,15 @@ export const Observer: React.FC<ObserverProps> = ({
|
|
|
123
126
|
|
|
124
127
|
const handleIntersect = (entries: IntersectionObserverEntry[]) => {
|
|
125
128
|
entries.forEach((entry) => {
|
|
126
|
-
if (
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
129
|
+
if (triggerOnce && hasTriggeredRef.current) {
|
|
130
|
+
return;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
onIntersect(entry, observerRef.current!);
|
|
130
134
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
hasTriggeredRef.current = true;
|
|
135
|
-
observerRef.current?.unobserve(element);
|
|
136
|
-
}
|
|
135
|
+
if (triggerOnce) {
|
|
136
|
+
hasTriggeredRef.current = true;
|
|
137
|
+
observerRef.current?.unobserve(element);
|
|
137
138
|
}
|
|
138
139
|
});
|
|
139
140
|
};
|
|
@@ -165,4 +166,4 @@ export const Observer: React.FC<ObserverProps> = ({
|
|
|
165
166
|
{children}
|
|
166
167
|
</div>
|
|
167
168
|
);
|
|
168
|
-
};
|
|
169
|
+
};
|
|
@@ -91,12 +91,6 @@ export const Styles: FC<StylesProps> = ({
|
|
|
91
91
|
if (!children) {
|
|
92
92
|
return null;
|
|
93
93
|
}
|
|
94
|
-
if (Children.count(children) > 1) {
|
|
95
|
-
console.error(
|
|
96
|
-
"<Styles>: children has more than one child. Please check your code."
|
|
97
|
-
);
|
|
98
|
-
return <Fragment>{children}</Fragment>;
|
|
99
|
-
}
|
|
100
94
|
|
|
101
95
|
if (!className) {
|
|
102
96
|
return <Fragment>{children}</Fragment>;
|
|
@@ -109,6 +103,12 @@ export const Styles: FC<StylesProps> = ({
|
|
|
109
103
|
const Tag = asWrapper === true ? "div" : asWrapper;
|
|
110
104
|
return <Tag className={generatedClassName}>{children}</Tag>;
|
|
111
105
|
}
|
|
106
|
+
if (Children.count(children) > 1) {
|
|
107
|
+
console.error(
|
|
108
|
+
"<Styles>: children has more than one child. Please check your code."
|
|
109
|
+
);
|
|
110
|
+
return <Fragment>{children}</Fragment>;
|
|
111
|
+
}
|
|
112
112
|
if (isValidElement(children)) {
|
|
113
113
|
const typeChildren = children as any;
|
|
114
114
|
let processedChildClassName = typeChildren?.props?.className;
|
package/src/utils/promise.ts
CHANGED