@wwog/react 1.1.5 → 1.1.6

package/README.md

@@ -35,7 +35,7 @@ pnpm add @wwog/react
 声明式的条件渲染组件，类似于 if-else 语句，但在 JSX 中使用。
 
 ```tsx
-import { If } from '@wwog/react';
+import { If } from "@wwog/react";
 
 function Example({ count }) {
   return (
@@ -59,7 +59,7 @@ function Example({ count }) {
 类似于 JavaScript 的 switch 语句，但更具声明性和类型安全性。
 
 ```tsx
-import { Switch } from '@wwog/react';
+import { Switch } from "@wwog/react";
 
 function Example({ status }) {
   return (
@@ -81,6 +81,62 @@ function Example({ status }) {
 }
 ```
 
+#### `<When>` (v1.1.5+)
+
+一个简洁的条件渲染组件，支持多条件逻辑组合。比 <If> 更加简洁，适用于简单的条件渲染场景。
+
+```jsx
+import { When } from '@wwog/react';
+
+function Example() {
+  const isAdmin = useIsAdmin();
+  const isLoading = useIsLoading();
+  const hasErrors = useHasErrors();
+
+  return (
+    <>
+      {/* 所有条件都为真时渲染 */}
+      <When all={[isAdmin, !isLoading]}>
+        <AdminPanel />
+      </When>
+
+      {/* 任一条件为真时渲染 */}
+      <When any={[isLoading, hasErrors]} fallback={<ReadyContent />}>
+        <LoadingOrErrorMessage />
+      </When>
+
+      {/* 所有条件都为假时渲染 */}
+      <When none={[isAdmin, isLoading]}>
+        <RegularUserContent />
+      </When>
+    </>
+  );
+```
+
+#### `<True>` / `<False>` (v1.1.6+)
+
+用于简化条件渲染的辅助组件，适合简单的布尔判断场景。
+
+```tsx
+import { True, False } from "@wwog/react";
+
+function Example({ isActive }) {
+  return (
+    <>
+      <True condition={isActive}>
+        <p>激活状态</p>
+      </True>
+      <False condition={isActive}>
+        <p>未激活状态</p>
+      </False>
+    </>
+  );
+}
+```
+
+- `<True condition={...}>`：当 condition 为 true 时渲染子内容。
+- `<False condition={...}>`：当 condition 为 false 时渲染子内容。
+
 ### 通用组件
 
 #### `<ArrayRender>`
@@ -88,11 +144,11 @@ function Example({ status }) {
 高效渲染数组数据的工具组件，支持过滤和自定义渲染。
 
 ```tsx
-import { ArrayRender } from '@wwog/react';
+import { ArrayRender } from "@wwog/react";
 
 function UserList({ users }) {
   return (
-    <ArrayRender 
+    <ArrayRender
       items={users}
       filter={(user) => user.active}
       renderItem={(user, index) => (
@@ -110,7 +166,7 @@ function UserList({ users }) {
 创建固定尺寸的容器，用于布局调整和间距控制。
 
 ```tsx
-import { SizeBox } from '@wwog/react';
+import { SizeBox } from "@wwog/react";
 
 function Layout() {
   return (

package/dist/index.d.mts

@@ -76,6 +76,16 @@ declare const If: {
         Else: (props: ElseProps) => React.ReactElement;
     };
 };
+interface TrueProps {
+    condition: boolean;
+    children?: ReactNode;
+}
+declare const True: FC<TrueProps>;
+interface FalseProps {
+    condition: boolean;
+    children?: ReactNode;
+}
+declare const False: FC<FalseProps>;
 
 interface WhenProps {
     /**
@@ -154,5 +164,5 @@ declare function ArrayRender<T>(props: ArrayRenderProps<T>): ReactNode;
  */
 declare function childrenLoop(children: React.ReactNode | undefined, callback: (child: React.ReactNode, index: number) => boolean | void): void;
 
-export { ArrayRender, If, SizeBox, Switch, When, childrenLoop };
-export type { ArrayRenderProps, ElseIfProps, ElseProps, IfProps, SwitchCaseProps, SwitchDefaultProps, SwitchProps, ThenProps, WhenProps };
+export { ArrayRender, False, If, SizeBox, Switch, True, When, childrenLoop };
+export type { ArrayRenderProps, ElseIfProps, ElseProps, FalseProps, IfProps, SwitchCaseProps, SwitchDefaultProps, SwitchProps, ThenProps, TrueProps, WhenProps };

package/dist/index.js

@@ -1,196 +1 @@
-import React, { useMemo, Fragment } from 'react';
-
-function childrenLoop(children, callback) {
-  if (children === void 0) return;
-  let index = 0;
-  if (Array.isArray(children)) {
-    for (const child of children) {
-      const shouldContinue = callback(child, index++);
-      if (shouldContinue === false) {
-        break;
-      }
-    }
-  } else {
-    callback(children, index);
-  }
-}
-
-const defaultCompare = (a, b) => {
-  return a === b;
-};
-const Case = (props) => {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.children);
-};
-Case.displayName = "Switch_Case";
-const Default = (props) => {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.children);
-};
-Default.displayName = "Switch_Default";
-const Switch = (props) => {
-  const { value, compare = defaultCompare, children, strict = false } = props;
-  const seenValues = /* @__PURE__ */ new Set();
-  let matchedChildren = null;
-  let defaultChild = null;
-  let hasDefault = false;
-  childrenLoop(children, (child, index) => {
-    if (!React.isValidElement(child)) {
-      throw new Error(
-        `Switch Children only accepts valid React elements at index ${index}`
-      );
-    }
-    const type = child.type;
-    if (type.displayName === Case.displayName) {
-      const caseProps = child.props;
-      if (seenValues.has(caseProps.value)) {
-        throw new Error(
-          `Switch found duplicate Case value at index ${index}: ${JSON.stringify(
-            caseProps.value
-          )}${strict ? " (detected in strict mode)" : ""}`
-        );
-      }
-      seenValues.add(caseProps.value);
-      if (!matchedChildren && compare(value, caseProps.value)) {
-        matchedChildren = caseProps.children;
-        if (strict === false) {
-          return false;
-        }
-      }
-    } else if (type.displayName === Default.displayName) {
-      if (hasDefault) {
-        throw new Error(
-          `Switch can only have one Default child at index ${index}`
-        );
-      }
-      hasDefault = true;
-      defaultChild = child.props.children;
-      if (!strict && matchedChildren) {
-        return false;
-      }
-    } else {
-      throw new Error(
-        `Switch Children only accepts 'Case' or 'Default' elements, found: ${String(
-          type.displayName || type.name || type
-        )} at index ${index}`
-      );
-    }
-  });
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, matchedChildren ?? defaultChild);
-};
-Switch.displayName = "Switch";
-Switch.Case = Case;
-Switch.Default = Default;
-Switch.createTyped = function() {
-  return {
-    Switch,
-    Case,
-    Default
-  };
-};
-
-const Then = (props) => {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.children);
-};
-const Else = ({ children }) => {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
-};
-const ElseIf = (props) => {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.children);
-};
-Then.displayName = "If_Then";
-Else.displayName = "If_Else";
-ElseIf.displayName = "If_ElseIf";
-const If = ({
-  condition,
-  children
-}) => {
-  let thenChild = null;
-  let elseChild = null;
-  const elseIfChildren = [];
-  React.Children.forEach(children, (child) => {
-    if (!React.isValidElement(child)) {
-      throw new Error("If component only accepts valid React elements");
-    }
-    const type = child.type;
-    if (type.displayName === Then.displayName) {
-      if (thenChild) {
-        throw new Error("If component can only have one Then child");
-      }
-      thenChild = child;
-    } else if (type.displayName === ElseIf.displayName) {
-      elseIfChildren.push(child);
-    } else if (type.displayName === Else.displayName) {
-      if (elseChild) {
-        throw new Error("If component can only have one Else child");
-      }
-      elseChild = child;
-    } else {
-      throw new Error(
-        `If component only accepts 'Then', 'ElseIf', or 'Else' elements as children, found: ${String(
-          type.displayName || type.name || type
-        )}`
-      );
-    }
-  });
-  if (condition) {
-    return thenChild ? /* @__PURE__ */ React.createElement(React.Fragment, null, thenChild.props.children) : null;
-  }
-  for (const elseIf of elseIfChildren) {
-    if (elseIf.props.condition) {
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, elseIf.props.children);
-    }
-  }
-  if (elseChild) {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, elseChild.props.children);
-  }
-  return null;
-};
-If.displayName = "If";
-If.Then = Then;
-If.ElseIf = ElseIf;
-If.Else = Else;
-If.createTyped = function() {
-  return {
-    If,
-    Then,
-    ElseIf,
-    Else
-  };
-};
-
-const When = ({ all, any, none, children, fallback }) => {
-  const shouldRender = useMemo(() => {
-    if (all && (any || none)) {
-      console.warn(
-        'When: Multiple condition types (all, any, none) provided; "all" takes precedence.'
-      );
-    }
-    if (all && all.length > 0 && all.every(Boolean)) return true;
-    if (any && any.length > 0 && any.some(Boolean)) return true;
-    if (none && none.length > 0 && none.every((v) => !v)) return true;
-    return false;
-  }, [all, any, none]);
-  return shouldRender ? /* @__PURE__ */ React.createElement(React.Fragment, null, children) : /* @__PURE__ */ React.createElement(React.Fragment, null, fallback || null);
-};
-
-const SizeBox = (props) => {
-  const { children, h, w, size, height, width } = props;
-  const widthValue = size || w || width;
-  const heightValue = size || h || height;
-  return /* @__PURE__ */ React.createElement("div", { style: { width: widthValue, height: heightValue } }, children);
-};
-
-function ArrayRender(props) {
-  const { items, renderItem, filter } = props;
-  if (!items) {
-    console.error("ArrayRender: items is null");
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(Fragment, null, items.map((item, index) => {
-    if (filter && !filter(item)) {
-      return null;
-    }
-    return renderItem(item, index);
-  }));
-}
-
-export { ArrayRender, If, SizeBox, Switch, When, childrenLoop };
+import n,{useMemo as F,Fragment as I}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 S=(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 c=e=>{const{value:l,compare:t=S,children:a,strict:i=!1}=e,r=new Set;let o=null,g=null,N=!1;return v(a,(h,u)=>{if(!n.isValidElement(h))throw new Error(`Switch Children only accepts valid React elements at index ${u}`);const d=h.type;if(d.displayName===f.displayName){const m=h.props;if(r.has(m.value))throw new Error(`Switch found duplicate Case value at index ${u}: ${JSON.stringify(m.value)}${i?" (detected in strict mode)":""}`);if(r.add(m.value),!o&&t(l,m.value)&&(o=m.children,i===!1))return!1}else if(d.displayName===p.displayName){if(N)throw new Error(`Switch can only have one Default child at index ${u}`);if(N=!0,g=h.props.children,!i&&o)return!1}else throw new Error(`Switch Children only accepts 'Case' or 'Default' elements, found: ${String(d.displayName||d.name||d)} at index ${u}`)}),n.createElement(n.Fragment,null,o??g)};c.displayName="Switch",c.Case=f,c.Default=p,c.createTyped=function(){return{Switch:c,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 s=({condition:e,children:l})=>{let t=null,a=null;const i=[];if(n.Children.forEach(l,r=>{if(!n.isValidElement(r))throw new Error("If component only accepts valid React elements");const o=r.type;if(o.displayName===y.displayName){if(t)throw new Error("If component can only have one Then child");t=r}else if(o.displayName===w.displayName)i.push(r);else if(o.displayName===E.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(o.displayName||o.name||o)}`)}),e)return t?n.createElement(n.Fragment,null,t.props.children):null;for(const r of i)if(r.props.condition)return n.createElement(n.Fragment,null,r.props.children);return a?n.createElement(n.Fragment,null,a.props.children):null};s.displayName="If",s.Then=y,s.ElseIf=w,s.Else=E,s.createTyped=function(){return{If:s,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,x=({all:e,any:l,none:t,children:a,fallback:i})=>F(()=>(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,i||null),$=e=>{const{children:l,h:t,w:a,size:i,height:r,width:o}=e;return n.createElement("div",{style:{width:i||a||o,height:i||t||r}},l)};function D(e){const{items:l,renderItem:t,filter:a}=e;return l?n.createElement(I,null,l.map((i,r)=>a&&!a(i)?null:t(i,r))):(console.error("ArrayRender: items is null"),null)}export{D as ArrayRender,T as False,s as If,$ as SizeBox,c as Switch,C as True,x as When,v as childrenLoop};

package/package.json

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

package/src/ProcessControl/If.tsx

@@ -1,4 +1,4 @@
-import React, { type FC } from "react";
+import React, { type FC, type ReactNode } from "react";
 
 export interface IfProps {
   condition: boolean;
@@ -102,3 +102,19 @@ If.createTyped = function () {
     Else: (props: ElseProps) => React.ReactElement;
   };
 };
+
+export interface TrueProps {
+  condition: boolean;
+  children?: ReactNode;
+}
+export const True: FC<TrueProps> = ({ condition, children }) => {
+  return condition ? <>{children}</> : null;
+};
+
+export interface FalseProps {
+  condition: boolean;
+  children?: ReactNode;
+}
+export const False: FC<FalseProps> = ({ condition, children }) => {
+  return condition === false ? <>{children}</> : null;
+};