@wwog/react 1.1.3 → 1.1.5

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import React$1, { FC, ReactNode } from 'react';
+import React, { ReactNode, FC } from 'react';
 
 interface SwitchProps<T> {
     value: T;
@@ -7,7 +7,7 @@ interface SwitchProps<T> {
      * @description_en optional compare function, default to () => a === b
      **/
     compare?: (a: T, b: T) => boolean;
-    children?: React$1.ReactNode;
+    children?: React.ReactNode;
     /**
      * @description 是否严格模式，默认 false.建议跟随开发环境变化,严格模式下,会循环所有节点来提供更多的错误提示
      * @description_en strict mode, default to false. It is recommended to follow the development environment changes. In strict mode, all nodes will be looped to provide more error prompts
@@ -22,61 +22,112 @@ interface SwitchProps<T> {
 }
 interface SwitchCaseProps<T> {
     value: T;
-    children?: React$1.ReactNode;
+    children?: React.ReactNode;
 }
 interface SwitchDefaultProps {
-    children?: React$1.ReactNode;
+    children?: React.ReactNode;
 }
 /**
  * @description Switch 组件用于根据传入的 value 渲染不同的子组件
  * @description_en The Switch component is used to render different child components based on the passed value
  */
 declare const Switch: {
-    <T>(props: SwitchProps<T>): React$1.ReactElement | null;
+    <T>(props: SwitchProps<T>): React.ReactElement | null;
     displayName: string;
     Case: {
-        <T>(props: SwitchCaseProps<T>): React$1.ReactElement;
+        <T>(props: SwitchCaseProps<T>): React.ReactElement;
         displayName: string;
     };
     Default: {
-        (props: SwitchDefaultProps): React$1.ReactElement;
+        (props: SwitchDefaultProps): React.ReactElement;
         displayName: string;
     };
     createTyped<T>(): {
-        Switch: (props: SwitchProps<T>) => React$1.ReactElement | null;
-        Case: (props: SwitchCaseProps<T>) => React$1.ReactElement;
-        Default: (props: SwitchDefaultProps) => React$1.ReactElement;
+        Switch: (props: SwitchProps<T>) => React.ReactElement | null;
+        Case: (props: SwitchCaseProps<T>) => React.ReactElement;
+        Default: (props: SwitchDefaultProps) => React.ReactElement;
     };
 };
 
 interface IfProps {
     condition: boolean;
-    children?: React$1.ReactNode;
+    children?: React.ReactNode;
 }
 interface ThenProps {
-    children?: React$1.ReactNode;
+    children?: React.ReactNode;
 }
 interface ElseProps {
-    children?: React$1.ReactNode;
+    children?: React.ReactNode;
 }
 interface ElseIfProps {
     condition: boolean;
-    children?: React$1.ReactNode;
+    children?: React.ReactNode;
 }
 declare const If: {
-    ({ condition, children, }: IfProps): React$1.ReactElement | null;
+    ({ condition, children, }: IfProps): React.ReactElement | null;
     displayName: string;
-    Then: React$1.FC<ThenProps>;
-    ElseIf: React$1.FC<ElseIfProps>;
-    Else: React$1.FC<ElseProps>;
+    Then: React.FC<ThenProps>;
+    ElseIf: React.FC<ElseIfProps>;
+    Else: React.FC<ElseProps>;
     createTyped(): {
-        If: (props: IfProps) => React$1.ReactElement | null;
-        Then: (props: ThenProps) => React$1.ReactElement;
-        ElseIf: (props: ElseIfProps) => React$1.ReactElement;
-        Else: (props: ElseProps) => React$1.ReactElement;
+        If: (props: IfProps) => React.ReactElement | null;
+        Then: (props: ThenProps) => React.ReactElement;
+        ElseIf: (props: ElseIfProps) => React.ReactElement;
+        Else: (props: ElseProps) => React.ReactElement;
     };
 };
 
+interface WhenProps {
+    /**
+     * @description_en An array of conditions where all must be true to render children.
+     * @description_zh 一个条件数组，所有条件都为真时渲染子元素。
+     * @index 1
+     */
+    all?: boolean[];
+    /**
+     * @description_en An array of conditions where at least one must be true to render children.
+     * @description_zh 一个条件数组，至少有一个条件为真时渲染子元素。
+     * @index 2
+     */
+    any?: boolean[];
+    /**
+     * @description_en An array of conditions where all must be false to render children.
+     * @description_zh 一个条件数组，所有条件都为假时渲染子元素。
+     * @index 3
+     */
+    none?: boolean[];
+    /**
+     * @description_en The content to render when conditions are satisfied.
+     * @description_zh 满足条件时渲染的内容。
+     */
+    children?: ReactNode;
+    /**
+     * @description_en The content to render when conditions are not satisfied (alternative to `Else`).
+     * @description_zh 不满足条件时渲染的内容（替代 `Else`）。
+     */
+    fallback?: ReactNode;
+}
+/**
+ * @description_zh 一个声明式组件，用于基于多个条件进行条件渲染。比If更简洁。
+ * @description_en A declarative component for conditional rendering based on multiple conditions. More concise than If.
+ * @component
+ * @example
+ * ```tsx
+ * <When all={[isAdmin, hasPermission]}>
+ *   <AdminPanel />
+ * </When>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <When any={[isLoading, isFetching]} fallback={<ErrorMessage />}>
+ *   <Spinner />
+ * </When>
+ * ```
+ *
+ */
+declare const When: FC<WhenProps>;
+
 interface SizeBoxProps {
     size?: number | string;
     height?: number | string;
@@ -101,7 +152,7 @@ declare function ArrayRender<T>(props: ArrayRenderProps<T>): ReactNode;
  * @description 性能优化，替代 React.Children.forEach, 回调可以返回 false 来中断循环
  * @description_en Replace React.Children.forEach, the callback can return false to interrupt the loop
  */
-declare function childrenLoop(children: React$1.ReactNode | undefined, callback: (child: React$1.ReactNode, index: number) => boolean | void): void;
+declare function childrenLoop(children: React.ReactNode | undefined, callback: (child: React.ReactNode, index: number) => boolean | void): void;
 
-export { ArrayRender, If, SizeBox, Switch, childrenLoop };
-export type { ArrayRenderProps, ElseIfProps, ElseProps, IfProps, SwitchCaseProps, SwitchDefaultProps, SwitchProps, ThenProps };
+export { ArrayRender, If, SizeBox, Switch, When, childrenLoop };
+export type { ArrayRenderProps, ElseIfProps, ElseProps, IfProps, SwitchCaseProps, SwitchDefaultProps, SwitchProps, ThenProps, WhenProps };

package/dist/index.js

@@ -1,4 +1,4 @@
-import React$1, { Fragment } from 'react';
+import React, { useMemo, Fragment } from 'react';
 
 function childrenLoop(children, callback) {
   if (children === void 0) return;
@@ -19,11 +19,11 @@ const defaultCompare = (a, b) => {
   return a === b;
 };
 const Case = (props) => {
-  return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, props.children);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.children);
 };
 Case.displayName = "Switch_Case";
 const Default = (props) => {
-  return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, props.children);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.children);
 };
 Default.displayName = "Switch_Default";
 const Switch = (props) => {
@@ -33,7 +33,7 @@ const Switch = (props) => {
   let defaultChild = null;
   let hasDefault = false;
   childrenLoop(children, (child, index) => {
-    if (!React$1.isValidElement(child)) {
+    if (!React.isValidElement(child)) {
       throw new Error(
         `Switch Children only accepts valid React elements at index ${index}`
       );
@@ -74,7 +74,7 @@ const Switch = (props) => {
       );
     }
   });
-  return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, matchedChildren ?? defaultChild);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, matchedChildren ?? defaultChild);
 };
 Switch.displayName = "Switch";
 Switch.Case = Case;
@@ -88,13 +88,13 @@ Switch.createTyped = function() {
 };
 
 const Then = (props) => {
-  return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, props.children);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.children);
 };
 const Else = ({ children }) => {
-  return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, children);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
 };
 const ElseIf = (props) => {
-  return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, props.children);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.children);
 };
 Then.displayName = "If_Then";
 Else.displayName = "If_Else";
@@ -106,8 +106,8 @@ const If = ({
   let thenChild = null;
   let elseChild = null;
   const elseIfChildren = [];
-  React$1.Children.forEach(children, (child) => {
-    if (!React$1.isValidElement(child)) {
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) {
       throw new Error("If component only accepts valid React elements");
     }
     const type = child.type;
@@ -132,15 +132,15 @@ const If = ({
     }
   });
   if (condition) {
-    return thenChild ? /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, thenChild.props.children) : null;
+    return thenChild ? /* @__PURE__ */ React.createElement(React.Fragment, null, thenChild.props.children) : null;
   }
   for (const elseIf of elseIfChildren) {
     if (elseIf.props.condition) {
-      return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, elseIf.props.children);
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, elseIf.props.children);
     }
   }
   if (elseChild) {
-    return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, elseChild.props.children);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, elseChild.props.children);
   }
   return null;
 };
@@ -157,6 +157,21 @@ If.createTyped = function() {
   };
 };
 
+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;
@@ -178,4 +193,4 @@ function ArrayRender(props) {
   }));
 }
 
-export { ArrayRender, If, SizeBox, Switch, childrenLoop };
+export { ArrayRender, If, SizeBox, Switch, When, childrenLoop };

package/package.json

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

package/src/Common/ArrayRender.tsx

@@ -1,4 +1,4 @@
-import { Fragment, type ReactNode } from "react";
+import React, { Fragment, type ReactNode } from "react";
 
 //#region component Types
 export interface ArrayRenderProps<T> {

package/src/Common/SizeBox.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from "react";
+import React, { FC, ReactNode } from "react";
 
 interface SizeBoxProps {
   size?: number | string;

package/src/ProcessControl/When.tsx

@@ -0,0 +1,67 @@
+import React, { FC, ReactNode, useMemo } from "react";
+
+export interface WhenProps {
+  /**
+   * @description_en An array of conditions where all must be true to render children.
+   * @description_zh 一个条件数组，所有条件都为真时渲染子元素。
+   * @index 1
+   */
+  all?: boolean[];
+  /**
+   * @description_en An array of conditions where at least one must be true to render children.
+   * @description_zh 一个条件数组，至少有一个条件为真时渲染子元素。
+   * @index 2
+   */
+  any?: boolean[];
+  /**
+   * @description_en An array of conditions where all must be false to render children.
+   * @description_zh 一个条件数组，所有条件都为假时渲染子元素。
+   * @index 3
+   */
+  none?: boolean[];
+  /**
+   * @description_en The content to render when conditions are satisfied.
+   * @description_zh 满足条件时渲染的内容。
+   */
+  children?: ReactNode;
+  /**
+   * @description_en The content to render when conditions are not satisfied (alternative to `Else`).
+   * @description_zh 不满足条件时渲染的内容（替代 `Else`）。
+   */
+  fallback?: ReactNode;
+}
+
+/**
+ * @description_zh 一个声明式组件，用于基于多个条件进行条件渲染。比If更简洁。
+ * @description_en A declarative component for conditional rendering based on multiple conditions. More concise than If.
+ * @component
+ * @example
+ * ```tsx
+ * <When all={[isAdmin, hasPermission]}>
+ *   <AdminPanel />
+ * </When>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <When any={[isLoading, isFetching]} fallback={<ErrorMessage />}>
+ *   <Spinner />
+ * </When>
+ * ```
+ *
+ */
+export const When: FC<WhenProps> = ({ 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 ? <>{children}</> : <>{fallback || null}</>;
+};

package/src/ProcessControl/index.ts

@@ -1,2 +1,3 @@
 export * from "./Switch";
 export * from "./If";
+export * from "./When";