@wwog/react 1.1.7 → 1.1.8

package/README.md

@@ -145,7 +145,7 @@ function Example({ isActive }) {
 
 #### `<ArrayRender>`
 
-高效渲染数组数据的工具组件，支持过滤和自定义渲染。
+内部仅单次循环。高效渲染数组数据的工具组件，支持过滤和自定义渲染。
 
 ```tsx
 import { ArrayRender } from "@wwog/react";
@@ -181,8 +181,8 @@ function Example({ users }) {
     <Pipe
       data={users}
       transform={[
-        (data) => data.filter(user => user.active),
-        (data) => data.map(user => user.name)
+        (data) => data.filter((user) => user.active),
+        (data) => data.map((user) => user.name),
       ]}
       render={(names) => <div>{names.join(", ")}</div>}
       fallback={<div>No Data</div>}
@@ -210,15 +210,23 @@ import { Scope } from "@wwog/react";
 function Example() {
   return (
     <Scope let={{ count: 1, text: "Hello" }}>
-      {({ count, text }) => <div>{text} {count}</div>}
+      {({ count, text }) => (
+        <div>
+          {text} {count}
+        </div>
+      )}
     </Scope>
   );
 }
 
 // 支持函数式 let
-<Scope let={(props) => ({ total: props.items.length })} props={{ items: [1, 2] }} fallback={<div>Empty</div>}>
+<Scope
+  let={(props) => ({ total: props.items.length })}
+  props={{ items: [1, 2] }}
+  fallback={<div>Empty</div>}
+>
   {({ total }) => <div>Total: {total}</div>}
-</Scope>
+</Scope>;
 ```
 
 - `let`：对象或函数，定义作用域变量。
@@ -230,6 +238,8 @@ function Example() {
 
 创建固定尺寸的容器，用于布局调整和间距控制。
 
+> v1.1.8: Fixed SizeBox not working in 'flex' layouts, add classname props
+
 ```tsx
 import { SizeBox } from "@wwog/react";
 
@@ -261,9 +271,6 @@ function Layout() {
 - Once：确保内容仅渲染一次，适合初始化。
 - Each：增强列表渲染，支持过滤和排序。
 
-
 ## License
 
 MIT
-
-

package/dist/index.d.mts

@@ -197,6 +197,7 @@ interface SizeBoxProps {
     h?: number | string;
     w?: number | string;
     children?: ReactNode;
+    className?: string;
 }
 /**
  * @description SizeBox 组件用于设置一个固定大小的盒子

package/dist/index.js

@@ -1 +1 @@
-import n,{useMemo as g,Fragment as S}from"react";function v(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 I=(e,l)=>e===l,f=e=>n.createElement(n.Fragment,null,e.children);f.displayName="Switch_Case";const p=e=>n.createElement(n.Fragment,null,e.children);p.displayName="Switch_Default";const s=e=>{const{value:l,compare:t=I,children:a,strict:r=!1}=e,i=new Set;let c=null,N=null,F=!1;return v(a,(u,h)=>{if(!n.isValidElement(u))throw new Error(`Switch Children only accepts valid React elements at index ${h}`);const d=u.type;if(d.displayName===f.displayName){const m=u.props;if(i.has(m.value))throw new Error(`Switch found duplicate Case value at index ${h}: ${JSON.stringify(m.value)}${r?" (detected in strict mode)":""}`);if(i.add(m.value),!c&&t(l,m.value)&&(c=m.children,r===!1))return!1}else if(d.displayName===p.displayName){if(F)throw new Error(`Switch can only have one Default child at index ${h}`);if(F=!0,N=u.props.children,!r&&c)return!1}else throw new Error(`Switch Children only accepts 'Case' or 'Default' elements, found: ${String(d.displayName||d.name||d)} at index ${h}`)}),n.createElement(n.Fragment,null,c??N)};s.displayName="Switch",s.Case=f,s.Default=p,s.createTyped=function(){return{Switch:s,Case:f,Default:p}};const y=e=>n.createElement(n.Fragment,null,e.children),E=({children:e})=>n.createElement(n.Fragment,null,e),w=e=>n.createElement(n.Fragment,null,e.children);y.displayName="If_Then",E.displayName="If_Else",w.displayName="If_ElseIf";const o=({condition:e,children:l})=>{let t=null,a=null;const r=[];if(n.Children.forEach(l,i=>{if(!n.isValidElement(i))throw new Error("If component only accepts valid React elements");const c=i.type;if(c.displayName===y.displayName){if(t)throw new Error("If component can only have one Then child");t=i}else if(c.displayName===w.displayName)r.push(i);else if(c.displayName===E.displayName){if(a)throw new Error("If component can only have one Else child");a=i}else throw new Error(`If component only accepts 'Then', 'ElseIf', or 'Else' elements as children, found: ${String(c.displayName||c.name||c)}`)}),e)return t?n.createElement(n.Fragment,null,t.props.children):null;for(const i of r)if(i.props.condition)return n.createElement(n.Fragment,null,i.props.children);return a?n.createElement(n.Fragment,null,a.props.children):null};o.displayName="If",o.Then=y,o.ElseIf=w,o.Else=E,o.createTyped=function(){return{If:o,Then:y,ElseIf:w,Else:E}};const C=({condition:e,children:l})=>e?n.createElement(n.Fragment,null,l):null,T=({condition:e,children:l})=>e===!1?n.createElement(n.Fragment,null,l):null,k=({all:e,any:l,none:t,children:a,fallback:r})=>g(()=>(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(i=>!i))),[e,l,t])?n.createElement(n.Fragment,null,a):n.createElement(n.Fragment,null,r||null),x=({data:e,transform:l,render:t,fallback:a})=>{const r=g(()=>l.reduce((i,c)=>c(i),e),[e,l]);return r==null?n.createElement(n.Fragment,null,a||null):n.createElement(n.Fragment,null,t(r))},$=e=>{const{children:l,h:t,w:a,size:r,height:i,width:c}=e;return n.createElement("div",{style:{width:r||a||c,height:r||t||i}},l)};function b(e){const{items:l,renderItem:t,filter:a}=e;return l?n.createElement(S,null,l.map((r,i)=>a&&!a(r)?null:t(r,i))):(console.error("ArrayRender: items is null"),null)}const D=({let:e,props:l,children:t,fallback:a})=>{const r=g(()=>typeof e=="function"?e(l):e,[e,l]);return!t||!Object.keys(r).length?n.createElement(n.Fragment,null,a||null):n.createElement(n.Fragment,null,t(r))};export{b as ArrayRender,T as False,o as If,x as Pipe,D as Scope,$ as SizeBox,s as Switch,C as True,k as When,v as childrenLoop};
+import n,{useMemo as N,Fragment as S}from"react";function v(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 I=(e,l)=>e===l,p=e=>n.createElement(n.Fragment,null,e.children);p.displayName="Switch_Case";const y=e=>n.createElement(n.Fragment,null,e.children);y.displayName="Switch_Default";const o=e=>{const{value:l,compare:t=I,children:a,strict:r=!1}=e,i=new Set;let c=null,u=null,F=!1;return v(a,(h,f)=>{if(!n.isValidElement(h))throw new Error(`Switch Children only accepts valid React elements at index ${f}`);const d=h.type;if(d.displayName===p.displayName){const m=h.props;if(i.has(m.value))throw new Error(`Switch found duplicate Case value at index ${f}: ${JSON.stringify(m.value)}${r?" (detected in strict mode)":""}`);if(i.add(m.value),!c&&t(l,m.value)&&(c=m.children,r===!1))return!1}else if(d.displayName===y.displayName){if(F)throw new Error(`Switch can only have one Default child at index ${f}`);if(F=!0,u=h.props.children,!r&&c)return!1}else throw new Error(`Switch Children only accepts 'Case' or 'Default' elements, found: ${String(d.displayName||d.name||d)} at index ${f}`)}),n.createElement(n.Fragment,null,c??u)};o.displayName="Switch",o.Case=p,o.Default=y,o.createTyped=function(){return{Switch:o,Case:p,Default:y}};const E=e=>n.createElement(n.Fragment,null,e.children),w=({children:e})=>n.createElement(n.Fragment,null,e),g=e=>n.createElement(n.Fragment,null,e.children);E.displayName="If_Then",w.displayName="If_Else",g.displayName="If_ElseIf";const s=({condition:e,children:l})=>{let t=null,a=null;const r=[];if(n.Children.forEach(l,i=>{if(!n.isValidElement(i))throw new Error("If component only accepts valid React elements");const c=i.type;if(c.displayName===E.displayName){if(t)throw new Error("If component can only have one Then child");t=i}else if(c.displayName===g.displayName)r.push(i);else if(c.displayName===w.displayName){if(a)throw new Error("If component can only have one Else child");a=i}else throw new Error(`If component only accepts 'Then', 'ElseIf', or 'Else' elements as children, found: ${String(c.displayName||c.name||c)}`)}),e)return t?n.createElement(n.Fragment,null,t.props.children):null;for(const i of r)if(i.props.condition)return n.createElement(n.Fragment,null,i.props.children);return a?n.createElement(n.Fragment,null,a.props.children):null};s.displayName="If",s.Then=E,s.ElseIf=g,s.Else=w,s.createTyped=function(){return{If:s,Then:E,ElseIf:g,Else:w}};const C=({condition:e,children:l})=>e?n.createElement(n.Fragment,null,l):null,T=({condition:e,children:l})=>e===!1?n.createElement(n.Fragment,null,l):null,k=({all:e,any:l,none:t,children:a,fallback:r})=>N(()=>(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(i=>!i))),[e,l,t])?n.createElement(n.Fragment,null,a):n.createElement(n.Fragment,null,r||null),x=({data:e,transform:l,render:t,fallback:a})=>{const r=N(()=>l.reduce((i,c)=>c(i),e),[e,l]);return r==null?n.createElement(n.Fragment,null,a||null):n.createElement(n.Fragment,null,t(r))},$=e=>{const{children:l,h:t,w:a,size:r,height:i,width:c,className:u}=e;return n.createElement("div",{style:{width:r||a||c,height:r||t||i,flexShrink:0},className:u},l)};function b(e){const{items:l,renderItem:t,filter:a}=e;return l?n.createElement(S,null,l.map((r,i)=>a&&!a(r)?null:t(r,i))):(console.error("ArrayRender: items is null"),null)}const D=({let:e,props:l,children:t,fallback:a})=>{const r=N(()=>typeof e=="function"?e(l):e,[e,l]);return!t||!Object.keys(r).length?n.createElement(n.Fragment,null,a||null):n.createElement(n.Fragment,null,t(r))};export{b as ArrayRender,T as False,s as If,x as Pipe,D as Scope,$ as SizeBox,o as Switch,C as True,k as When,v as childrenLoop};

package/package.json

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

package/src/Common/SizeBox.tsx

@@ -7,16 +7,22 @@ interface SizeBoxProps {
   h?: number | string;
   w?: number | string;
   children?: ReactNode;
+  className?: string;
 }
 /**
  * @description SizeBox 组件用于设置一个固定大小的盒子
  */
 export const SizeBox: FC<SizeBoxProps> = (props) => {
-  const { children, h, w, size, height, width } = props;
+  const { children, h, w, size, height, width, className } = props;
 
   const widthValue = size || w || width;
   const heightValue = size || h || height;
   return (
-    <div style={{ width: widthValue, height: heightValue }}>{children}</div>
+    <div
+      style={{ width: widthValue, height: heightValue, flexShrink: 0 }}
+      className={className}
+    >
+      {children}
+    </div>
   );
 };