@wwog/react 1.3.4 → 1.3.5

package/README.md

@@ -191,7 +191,7 @@ function UserList({ users }) {
 
 > Removed in v1.3.0. The compatibility problem is too big, the desktop web page works well, h5 has a problem.
 
-A component for displaying text with a fixed number of lines, ellipsis, and optional extra content. 
+A component for displaying text with a fixed number of lines, ellipsis, and optional extra content.
 
 ```tsx
 import { Clamp } from "@wwog/react";
@@ -452,6 +452,16 @@ You can also use a container wrapper element:
 
 - Applied to states that can be controlled or uncontrolled components
 
+#### useScreen (v1.3.5+)
+
+> Return the current breakpoint name
+
+- Supports passing in custom breakpoints, defaults to the same breakpoint definitions as TailwindCSS
+
+This hook is implemented based on listening. If you need to use `useScreen` multiple times without changes, it is recommended to use the extended `BreakpointProvider` and `useBreakpoint` to ensure global listening occurs only once.
+
+Development notes: Internally implemented via `mediaQuery`, it does not listen to a specific breakpoint but is optimized to listen only to the previous and next breakpoints of the current breakpoint for better performance.
+
 ### utils
 
 > Internal functions used by some components, which can also be used if needed

package/dist/index.d.mts

@@ -708,5 +708,19 @@ declare class Counter {
 
 declare const safePromiseTry: <T, U extends unknown[]>(callbackFn: (...args: U) => T | PromiseLike<T>, ...args: U) => Promise<Awaited<T>>;
 
-export { ArrayRender, Counter, DateRender, False, If, Observer, Pipe, Scope, SizeBox, Styles, Switch, Toggle, True, When, childrenLoop, createExternalState, createStorageState, cx, formatDate, safePromiseTry, useControlled };
-export type { ArrayRenderProps, CreateStateListener, CxInput, DateRenderProps, ElseIfProps, ElseProps, ExternalSideEffect, ExternalState, ExternalStateOptions, ExternalWithKernel, FalseProps, IfProps, ObserverProps, PipeProps, ScopeProps, StorageStateOptions, StylesDescriptor, StylesProps, StylesType, SwitchCaseProps, SwitchDefaultProps, SwitchProps, ThenProps, ToggleProps, Transform, TrueProps, UseControlledOptions, WhenProps };
+declare const breakpoints: readonly ["base", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+declare const DefBreakpointDesc: BreakpointDesc;
+type BreakpointName = (typeof breakpoints)[number];
+type BreakpointDesc = Partial<Record<BreakpointName, number>>;
+type Responsive<T> = T | Partial<Record<BreakpointName, T>>;
+
+declare function getCurrentBreakpoint(breakpointDesc: BreakpointDesc, width: number): BreakpointName;
+declare function useScreen(breakpointDesc?: BreakpointDesc): "base" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+declare function BreakpointProvider({ children, breakpointDesc, }: {
+    children: React$1.ReactNode;
+    breakpointDesc?: BreakpointDesc;
+}): React$1.JSX.Element;
+declare function useBreakpoint(): "base" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+
+export { ArrayRender, BreakpointProvider, Counter, DateRender, DefBreakpointDesc, False, If, Observer, Pipe, Scope, SizeBox, Styles, Switch, Toggle, True, When, breakpoints, childrenLoop, createExternalState, createStorageState, cx, formatDate, getCurrentBreakpoint, safePromiseTry, useBreakpoint, useControlled, useScreen };
+export type { ArrayRenderProps, BreakpointDesc, BreakpointName, CreateStateListener, CxInput, DateRenderProps, ElseIfProps, ElseProps, ExternalSideEffect, ExternalState, ExternalStateOptions, ExternalWithKernel, FalseProps, IfProps, ObserverProps, PipeProps, Responsive, ScopeProps, StorageStateOptions, StylesDescriptor, StylesProps, StylesType, SwitchCaseProps, SwitchDefaultProps, SwitchProps, ThenProps, ToggleProps, Transform, TrueProps, UseControlledOptions, WhenProps };

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wwog/react",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "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/Layout/Flex.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import type { FC, ReactNode } from "react";
+import type { BreakpointDesc, Responsive } from "../../utils/constants";
+
+interface FlexProps {
+  children?: ReactNode;
+  breakpointDesc?: BreakpointDesc;
+  type?: Responsive<"row" | "column" | "row-reverse" | "column-reverse">;
+}
+export const Flex: FC<FlexProps> = (props) => {
+  const { type } = props;
+  return (
+    <div
+      style={{
+        display: "flex",
+      }}
+    >
+      {props.children}
+    </div>
+  );
+};

package/src/components/Layout/index.ts

@@ -0,0 +1,2 @@
+export * from "./constant";
+export * from "./Flex";

package/src/hooks/index.ts

@@ -1 +1,2 @@
 export * from './useControlled'
+export * from './useScreen'

package/src/hooks/useScreen.tsx

@@ -0,0 +1,120 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+import {
+  breakpoints,
+  DefBreakpointDesc,
+  type BreakpointDesc,
+  type BreakpointName,
+} from "../utils";
+
+const reverseBreakpoints = [...breakpoints].reverse();
+
+export function getCurrentBreakpoint(
+  breakpointDesc: BreakpointDesc,
+  width: number
+): BreakpointName {
+  for (const bp of reverseBreakpoints) {
+    const bpValue = breakpointDesc[bp];
+    if (bpValue !== undefined && !Number.isNaN(bpValue) && width >= bpValue) {
+      return bp;
+    }
+  }
+  return "base";
+}
+
+export function useScreen(breakpointDesc: BreakpointDesc = DefBreakpointDesc) {
+  const [currentBreakpoint, setCurrentBreakpoint] = useState<BreakpointName>(
+    getCurrentBreakpoint(breakpointDesc, window.innerWidth)
+  );
+
+  useEffect(() => {
+    let mediaQueries: MediaQueryList[] = [];
+    let listeners: (() => void)[] = [];
+
+    const updateMediaQueries = () => {
+      // 清理旧的监听器
+      listeners.forEach((removeListener) => removeListener());
+      mediaQueries = [];
+      listeners = [];
+
+      // 计算当前断点
+      const currentBp = getCurrentBreakpoint(breakpointDesc, window.innerWidth);
+      setCurrentBreakpoint(currentBp);
+
+      // 找到当前断点的索引
+      const currentIndex = breakpoints.indexOf(currentBp);
+
+      // 监听下一个断点（min-width）
+      const nextBp = breakpoints[currentIndex + 1];
+      if (nextBp && breakpointDesc[nextBp] !== undefined) {
+        const nextMinWidth = breakpointDesc[nextBp];
+        if (!Number.isNaN(nextMinWidth)) {
+          const mediaQuery = window.matchMedia(
+            `(min-width: ${nextMinWidth}px)`
+          );
+          mediaQueries.push(mediaQuery);
+          const handleMediaChange = () => updateMediaQueries();
+          mediaQuery.addEventListener("change", handleMediaChange);
+          listeners.push(() =>
+            mediaQuery.removeEventListener("change", handleMediaChange)
+          );
+        } else {
+          throw new Error(
+            `Invalid breakpoint value for ${nextBp}: ${breakpointDesc[nextBp]}`
+          );
+        }
+      }
+
+      // 监听上一个断点（max-width）
+      const prevBp = breakpoints[currentIndex - 1];
+      if (prevBp && breakpointDesc[prevBp] !== undefined) {
+        const prevMinWidth = breakpointDesc[prevBp];
+        if (!Number.isNaN(prevMinWidth)) {
+          const mediaQuery = window.matchMedia(
+            `(max-width: ${prevMinWidth - 1}px)`
+          );
+          mediaQueries.push(mediaQuery);
+          const handleMediaChange = () => updateMediaQueries();
+          mediaQuery.addEventListener("change", handleMediaChange);
+          listeners.push(() =>
+            mediaQuery.removeEventListener("change", handleMediaChange)
+          );
+        } else {
+          throw new Error(
+            `Invalid breakpoint value for ${prevBp}: ${breakpointDesc[prevBp]}`
+          );
+        }
+      }
+    };
+
+    // 初次执行
+    updateMediaQueries();
+
+    // 清理函数
+    return () => {
+      listeners.forEach((removeListener) => removeListener());
+    };
+  }, [breakpointDesc]);
+
+  return currentBreakpoint;
+}
+
+const BreakpointContext = createContext<BreakpointName>("base");
+
+export function BreakpointProvider({
+  children,
+  breakpointDesc,
+}: {
+  children: React.ReactNode;
+  breakpointDesc?: BreakpointDesc;
+}) {
+  const breakpoint = useScreen(breakpointDesc);
+  return (
+    <BreakpointContext.Provider value={breakpoint}>
+      {children}
+    </BreakpointContext.Provider>
+  );
+}
+
+export function useBreakpoint() {
+  return useContext(BreakpointContext);
+}

package/src/utils/constants.ts

@@ -0,0 +1,25 @@
+export const breakpoints = [
+  "base",
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl",
+] as const;
+
+export const DefBreakpointDesc: BreakpointDesc = {
+  xs: 475,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536,
+  "3xl": 1920,
+};
+export type BreakpointName = (typeof breakpoints)[number];
+
+export type BreakpointDesc = Partial<Record<BreakpointName, number>>;
+
+export type Responsive<T> = T | Partial<Record<BreakpointName, T>>;

package/src/utils/index.ts

@@ -3,3 +3,4 @@ export * from "./cx";
 export * from "./reactUtils";
 export * from "./sundry";
 export * from "./promise";
+export * from "./constants";

package/src/utils/sundry.ts

@@ -28,103 +28,104 @@
  * 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 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',
-  ]
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ];
   const monthName = [
-    'Jan',
-    'Feb',
-    'Mar',
-    'Apr',
-    'May',
-    'Jun',
-    'Jul',
-    'Aug',
-    'Sep',
-    'Oct',
-    'Nov',
-    'Dec',
-  ]
+    "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',
-  ]
+    "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 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'),
+    MM: month.toString().padStart(2, "0"),
     MMM: monthShort,
     MMMM: monthFull,
     D: day.toString(),
-    DD: day.toString().padStart(2, '0'),
+    DD: day.toString().padStart(2, "0"),
     d: week.toString(),
     dd: weekShort,
     ddd: weekShort,
     dddd: weekFull,
     H: hour.toString(),
-    HH: hour.toString().padStart(2, '0'),
+    HH: hour.toString().padStart(2, "0"),
     h: (hour % 12).toString(),
-    hh: (hour % 12).toString().padStart(2, '0'),
+    hh: (hour % 12).toString().padStart(2, "0"),
     m: minute.toString(),
-    mm: minute.toString().padStart(2, '0'),
+    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',
-  }
+    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]!
-    },
-  )
+      return map[match]!;
+    }
+  );
 }
 
 export class Counter {
-  count = 0
+  count = 0;
 
   /**
    * @description 获取下一个计数值,不考虑越界。
    * @description_en Get the next count value, without considering overflow.
    */
   next() {
-    return this.count++
+    return this.count++;
   }
 }
+