@wwog/react 1.0.0 → 1.1.1

package/README.md

@@ -30,25 +30,25 @@ pnpm add @wwog/react
 
 ### 流程控制组件
 
-#### `<If>`, `<Then>`, `<Else>`, `<ElseIf>`
+#### `<If>`
 
 声明式的条件渲染组件，类似于 if-else 语句，但在 JSX 中使用。
 
 ```tsx
-import { If, Then, Else, ElseIf } from '@wwog/react';
+import { If } from '@wwog/react';
 
 function Example({ count }) {
   return (
     <If condition={count > 10}>
-      <Then>
+      <If.Then>
         <p>Count is greater than 10</p>
-      </Then>
-      <ElseIf condition={count > 5}>
+      </If.Then>
+      <If.ElseIf condition={count > 5}>
         <p>Count is greater than 5</p>
-      </ElseIf>
-      <Else>
+      </If.ElseIf>
+      <If.Else>
         <p>Count is 5 or less</p>
-      </Else>
+      </If.Else>
     </If>
   );
 }
@@ -59,23 +59,23 @@ function Example({ count }) {
 类似于 JavaScript 的 switch 语句，但更具声明性和类型安全性。
 
 ```tsx
-import { Switch, Case, Default } from '@wwog/react';
+import { Switch } from '@wwog/react';
 
 function Example({ status }) {
   return (
     <Switch value={status}>
-      <Case value="loading">
+      <Switch.Case value="loading">
         <Loading />
-      </Case>
-      <Case value="success">
+      </Switch.Case>
+      <Switch.Case value="success">
         <Success />
-      </Case>
-      <Case value="error">
+      </Switch.Case>
+      <Switch.Case value="error">
         <Error />
-      </Case>
-      <Default>
+      </Switch.Case>
+      <Switch.Default>
         <p>Unknown status</p>
-      </Default>
+      </Switch.Default>
     </Switch>
   );
 }

package/dist/index.d.mts

@@ -1,3 +1,107 @@
-declare function add(a: number, b: number): number;
+import React$1, { FC as FC$1, ReactNode } from 'react';
 
-export { add };
+interface SwitchProps<T> {
+    value: T;
+    /**
+     * @description 可选的比对函数，默认() => a===b
+     * @description_en optional compare function, default to () => a === b
+     **/
+    compare?: (a: T, b: T) => boolean;
+    children?: React$1.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
+     * @extra
+     * 1.严格模式下，无论什么情况都会循环所有节点，以确保所有的 case 和 default 都能被检查到
+     * 2.非严格模式下，如果有一个 case 匹配成功，就不会继续循环
+     * @extra_en
+     * 1. In strict mode, all nodes will be looped regardless of the situation to ensure that all cases and defaults can be checked
+     * 2. In non-strict mode, if a case matches successfully, it will not continue to loop
+     */
+    strict?: boolean;
+}
+interface SwitchCaseProps<T> {
+    value: T;
+    children?: React$1.ReactNode;
+}
+interface SwitchDefaultProps {
+    children?: React$1.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;
+    displayName: string;
+    Case: {
+        <T>(props: SwitchCaseProps<T>): React$1.ReactElement;
+        displayName: string;
+    };
+    Default: {
+        (props: SwitchDefaultProps): React$1.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;
+    };
+};
+
+interface IfProps {
+    condition: boolean;
+    children?: React$1.ReactNode;
+}
+interface ThenProps {
+    children?: React$1.ReactNode;
+}
+interface ElseProps {
+    children?: React$1.ReactNode;
+}
+interface ElseIfProps {
+    condition: boolean;
+    children?: React$1.ReactNode;
+}
+declare const If: {
+    ({ condition, children, }: IfProps): React$1.ReactElement | null;
+    displayName: string;
+    Then: FC<ThenProps>;
+    ElseIf: FC<ElseIfProps>;
+    Else: 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;
+    };
+};
+
+interface SizeBoxProps {
+    size?: number | string;
+    height?: number | string;
+    width?: number | string;
+    h?: number | string;
+    w?: number | string;
+    children?: ReactNode;
+}
+/**
+ * @description SizeBox 组件用于设置一个固定大小的盒子
+ */
+declare const SizeBox: FC$1<SizeBoxProps>;
+
+interface ArrayRenderProps<T> {
+    items: T[];
+    renderItem: (item: T, index: number) => React.ReactNode;
+    filter?: (item: T) => boolean;
+}
+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;
+
+export { ArrayRender, If, SizeBox, Switch, childrenLoop };
+export type { ArrayRenderProps, ElseIfProps, ElseProps, IfProps, SwitchCaseProps, SwitchDefaultProps, SwitchProps, ThenProps };

package/dist/index.js

@@ -1,5 +1,183 @@
-function add(a, b) {
-  return a + b;
+import React$1, { 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$1.createElement(React$1.Fragment, null, props.children);
+};
+Case.displayName = "Switch_Case";
+const Default = (props) => {
+  return /* @__PURE__ */ React$1.createElement(React$1.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$1.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$1.createElement(React$1.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$1.createElement(React$1.Fragment, null, props.children);
+};
+const Else = ({ children }) => {
+  return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, children);
+};
+const ElseIf = (props) => {
+  return /* @__PURE__ */ React$1.createElement(React$1.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$1.Children.forEach(children, (child) => {
+    if (!React$1.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$1.createElement(React$1.Fragment, null, thenChild.props.children) : null;
+  }
+  const matchedElseIf = elseIfChildren.find((child) => {
+    const elseIfProps = child.props;
+    return elseIfProps.condition;
+  });
+  if (matchedElseIf) {
+    return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, matchedElseIf.props.children);
+  }
+  if (elseChild) {
+    return elseChild ? /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, elseChild.props.children) : null;
+  }
+  return null;
+};
+If.displayName = "If";
+If.Then = Then;
+If.ElseIf = ElseIf;
+If.Else = Else;
+If.createTyped = function() {
+  return {
+    If,
+    Then,
+    ElseIf,
+    Else
+  };
+};
+
+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 { add };
+export { ArrayRender, If, SizeBox, Switch, childrenLoop };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wwog/react",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "",
   "keywords": [],
   "author": "wwog",
@@ -32,5 +32,6 @@
   "engines": {
     "node": ">= 20.0.0",
     "pnpm": ">=8.15.0"
-  }
+  },
+  "packageManager": "pnpm@9.15.1+sha512.1acb565e6193efbebda772702950469150cf12bcc764262e7587e71d19dc98a423dff9536e57ea44c49bdf790ff694e83c27be5faa23d67e0c033b583be4bfcf"
 }

package/src/ProcessControl/If.tsx

@@ -18,13 +18,13 @@ export interface ElseIfProps {
   children?: React.ReactNode;
 }
 
-export const Then: FC<ThenProps> = (props) => {
+const Then: FC<ThenProps> = (props) => {
   return <>{props.children}</>;
 };
-export const Else: FC<ElseProps> = ({ children }) => {
+const Else: FC<ElseProps> = ({ children }) => {
   return <>{children}</>;
 };
-export const ElseIf: FC<ElseIfProps> = (props) => {
+const ElseIf: FC<ElseIfProps> = (props) => {
   return <>{props.children}</>;
 };
 Then.displayName = "If_Then";

package/src/index.ts

@@ -1,3 +1,3 @@
-export function add(a: number, b: number): number {
-  return a + b
-}
+export * from "./ProcessControl";
+export * from "./Common";
+export * from "./utils";

package/src/index copy.ts

@@ -1,3 +0,0 @@
-export * from "./ProcessControl";
-export * from "./Common";
-export * from "./utils";