@jiovan-labs/react-condition 0.0.0-stage → 2.0.1

package/README.zh-TW.md

@@ -0,0 +1,304 @@
+# @jiovan-labs/react-condition
+
+[![NPM version](https://img.shields.io/npm/v/@jiovan-labs/react-condition.svg?style=flat)](https://npmjs.org/package/@jiovan-labs/react-condition)
+[![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat)](LICENSE.txt)
+[![NPM downloads](http://img.shields.io/npm/dm/@jiovan-labs/react-condition.svg?style=flat)](https://npmjs.org/package/@jiovan-labs/react-condition)
+
+🏅 React 條件性渲染組件 👍
+
+## 特性
+
+✅ 支持 'If' 條件渲染
+
+✅ 支持 'If'-'Then' 條件渲染
+
+✅ 支持 'If'-'Else' 條件渲染
+
+✅ 支持 'If'-'Then'-Else' 條件渲染
+
+✅ 支持 'For' 條件渲染
+
+✅ 支持 'Do' 條件渲染
+
+✅ 支持 'While' 條件渲染
+
+✅ 支持 'MapIterator' 條件渲染
+
+✅ 支持 'SetIterator' 條件渲染
+
+✅ 支持 'ObjectIterator' 條件渲染
+
+## 快速開始
+
+您可以在您的 React 項目中使用以下命令來安裝本組件庫：
+
+```bash
+$ npm install @jiovan-labs/react-condition --save
+```
+
+然后，您可以使用以下命令來導入組件：
+
+```tsx | pure
+import { If, For, Switch, Do, While } from '@jiovan-labs/react-condition';
+import { MapIterator, SetIterator, ObjectIterator } from '@jiovan-labs/react-condition';
+```
+
+享受您和 `react-condition` 的編程之旅吧 ✌️
+
+## 示例
+
+### If
+
+> `If.Then` 和 `If.Else` 都有一個 `render` 屬性 `() => React.ReactNode`，這樣您也可以通過它來返回自定義的渲染內容, 比 React 的 `children` 屬性權重要高。
+
+#### If
+
+```tsx | pure
+import React from 'react';
+import { If } from '@jiovan-labs/react-condition';
+
+export default () => {
+    const param: boolean = true;
+    return (
+        <If condition={param}>
+            <span>Hello World</span>
+        </If>
+    );
+}
+```
+
+#### If-Then
+
+```tsx | pure
+import React from 'react';
+import { If } from '@jiovan-labs/react-condition';
+
+export default () => {
+    const param: number = 1;
+    return (
+        <If condition={param}>
+            <If.Then>
+                <span>Hello World</span>
+            </If.Then>
+        </If>
+    );
+}
+```
+
+#### If-Else
+
+```tsx | pure
+import React from 'react';
+import { If } from '@jiovan-labs/react-condition';
+
+export default () => {
+    const param: boolean = false;
+    return (
+        <If condition={param}>
+            <span>Hello World</span>
+            <If.Else>
+                <span>Hello Jiovan</span>
+            </If.Else>
+        </If>
+    );
+}
+```
+
+#### If-Then-Else
+
+```tsx | pure
+import React from 'react';
+import { If } from '@jiovan-labs/react-condition';
+
+export default () => {
+    const param: boolean = false;
+    return (
+        <If condition={param}>
+            <If.Then>
+                <span>Hello World</span>
+            </If.Then>
+            <If.Else>
+                <span>Hello Jiovan</span>
+            </If.Else>
+        </If>
+    );
+}
+```
+
+### For
+
+```tsx | pure
+import React from 'react';
+import { For } from '@jiovan-labs/react-condition';
+
+export default () => {
+    return (
+        <For
+            of={['foo', 'bar']}
+            render={(item, index) => {
+                return (
+                    <span key={index}>Hello, {item}</span>
+                );
+            }}
+        />
+    );
+}
+```
+
+### Switch
+
+> `Switch.Case` 和 `Switch.Default` 都有一個 `render` 屬性 `() => React.ReactNode`，這樣您也可以通過它來返回自定義的渲染內容, 比 React 的 `children` 屬性權重要高。
+
+```tsx | pure
+import React from 'react';
+import { Switch } from '@jiovan-labs/react-condition';
+
+export default () => {
+    const username: string = 'admin';
+
+    return (
+        <Switch>
+            <Switch.Case condition={username.includes('admin')}>
+                <span>admin</span>
+            </Switch.Case>
+            <Switch.Case condition={username.includes('guest')}>
+                <span>guest</span>
+            </Switch.Case>
+            <Switch.Default>
+                <span>root</span>
+            </Switch.Default>
+        </Switch>
+    );
+}
+```
+
+### Do
+
+```tsx | pure
+import React from 'react';
+import { Do } from '@jiovan-labs/react-condition';
+
+export default () => {
+    let param: number = 0;
+    return (
+        <Do
+            condition={() => {
+                return param < 2;
+            }}
+            render={(index) => {
+                param++;
+                return (
+                    <span key={index}>Hello, {index}</span>
+                );
+            }}
+        />
+    );
+}
+```
+
+### While
+
+```tsx | pure
+import React from 'react';
+import { While } from '@jiovan-labs/react-condition';
+
+export default () => {
+    let param: number = 0;
+    return (
+        <While
+            condition={() => {
+                return param++ < 2;
+            }}
+            render={(index) => {
+                return (
+                    <span key={index}>Hello, {index}</span>
+                );
+            }}
+        />
+    );
+}
+```
+
+### MapIterator
+
+```tsx | pure
+import React from 'react';
+import { MapIterator } from '@jiovan-labs/react-condition';
+
+export default () => {
+    const map = new Map([
+        ['foo', 'bar'],
+        ['hello', 'world'],
+    ]);
+    return (
+        <MapIterator
+            of={map}
+            render={(value, key, index) => {
+                return (
+                    <span key={index}>Hooray, {key}-{value}</span>
+                );
+            }}
+        />
+    );
+}
+```
+
+### SetIterator
+
+```tsx | pure
+import React from 'react';
+import { SetIterator } from '@jiovan-labs/react-condition';
+
+export default () => {
+    const set = new Set<string>([
+        'foo-bar',
+        'hello-world',
+    ]);
+    return (
+        <SetIterator
+            of={set}
+            render={(item, index) => {
+                return (
+                    <span key={index}>Hooray, {item}</span>
+                );
+            }}
+        />
+    );
+}
+```
+
+### ObjectIterator
+
+```tsx | pure
+import React from 'react';
+import { ObjectIterator } from '@jiovan-labs/react-condition';
+
+export default () => {
+    const param: object = {
+        'foo': 'bar',
+        'hello': 'world',
+    };
+    return (
+        <ObjectIterator
+            of={param}
+            render={(value, key, index) => {
+                return (
+                    <span key={index}>Hooray, {key}-{value}</span>
+                );
+            }}
+        />
+    );
+}
+```
+
+## 授權
+
+本組件庫授權基于 [MIT License](https://mit-license.org/) 協議
+
+## 版權
+
+北京玖漫科技有限公司
+
+## 網站
+
+- Jiovan: [https://joivan.com](https://joivan.com)

package/dist/cjs/index.d.ts

@@ -0,0 +1,8 @@
+export { Do, type DoProps } from './util/Do';
+export { For, type ForProps } from './util/For';
+export { If, type IfProps, type IfThenProps, type IfElseProps } from './util/If';
+export { MapIterator, type MapIteratorProps } from './util/MapIterator';
+export { ObjectIterator, type ObjectIteratorProps } from './util/ObjectIterator';
+export { SetIterator, type SetIteratorProps } from './util/SetIterator';
+export { Switch, type SwitchCaseProps, type SwitchDefaultProps } from './util/Switch';
+export { While, type WhileProps } from './util/While';

package/dist/cjs/index.js

@@ -0,0 +1,50 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Do: () => import_Do.Do,
+  For: () => import_For.For,
+  If: () => import_If.If,
+  MapIterator: () => import_MapIterator.MapIterator,
+  ObjectIterator: () => import_ObjectIterator.ObjectIterator,
+  SetIterator: () => import_SetIterator.SetIterator,
+  Switch: () => import_Switch.Switch,
+  While: () => import_While.While
+});
+module.exports = __toCommonJS(src_exports);
+var import_Do = require("./util/Do");
+var import_For = require("./util/For");
+var import_If = require("./util/If");
+var import_MapIterator = require("./util/MapIterator");
+var import_ObjectIterator = require("./util/ObjectIterator");
+var import_SetIterator = require("./util/SetIterator");
+var import_Switch = require("./util/Switch");
+var import_While = require("./util/While");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Do,
+  For,
+  If,
+  MapIterator,
+  ObjectIterator,
+  SetIterator,
+  Switch,
+  While
+});

package/dist/cjs/util/Do.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type DoProps = React.PropsWithChildren<{
+    condition: () => boolean | number | string | undefined | null;
+    render?: (index: number) => React.ReactNode;
+}>;
+export declare const Do: any;

package/dist/cjs/util/Do.js

@@ -0,0 +1,44 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/util/Do.tsx
+var Do_exports = {};
+__export(Do_exports, {
+  Do: () => Do
+});
+module.exports = __toCommonJS(Do_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var Do = (props) => {
+  const result = [];
+  let index = 0;
+  do {
+    if (props.render) {
+      result.push(props == null ? void 0 : props.render(index));
+    } else if (!props.render && props.children) {
+      result.push(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "condition-do", children: props.children }, index)
+      );
+    }
+    index++;
+  } while (props.condition());
+  return result;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Do
+});

package/dist/cjs/util/For.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type ForProps = React.PropsWithChildren<{
+    of: any[];
+    render?: (item: any, index: number) => React.ReactNode;
+}>;
+export declare const For: any;

package/dist/cjs/util/For.js

@@ -0,0 +1,39 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/util/For.tsx
+var For_exports = {};
+__export(For_exports, {
+  For: () => For
+});
+module.exports = __toCommonJS(For_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var For = (props) => {
+  return props.of.map((item, index) => {
+    if (props.render) {
+      return props.render(item, index);
+    } else if (!props.render && props.children) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "condition-for", children: props.children }, index);
+    }
+    return void 0;
+  });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  For
+});

package/dist/cjs/util/If.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type IfProps = React.PropsWithChildren<{
+    condition: boolean | number | string | undefined | null;
+    validation?: boolean;
+}>;
+export type IfThenProps = IfProps & {
+    render?: () => React.ReactNode;
+};
+export type IfElseProps = IfThenProps;
+export declare const If: any;

package/dist/cjs/util/If.js

@@ -0,0 +1,69 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/util/If.tsx
+var If_exports = {};
+__export(If_exports, {
+  If: () => If
+});
+module.exports = __toCommonJS(If_exports);
+var import_react = __toESM(require("react"));
+var If = (props) => {
+  if (!props.children) {
+    return void 0;
+  }
+  if (props.validation !== false) {
+    let thenCount = 0, elseCount = 0;
+    import_react.default.Children.forEach(props.children, (item) => {
+      const childType = item == null ? void 0 : item.type;
+      if (childType === If.Then) {
+        thenCount++;
+      }
+      if (childType === If.Else) {
+        elseCount++;
+      }
+    });
+    if (thenCount > 1 || elseCount > 1) {
+      throw SyntaxError(`Each statement of 'If.Then/If.Else' for [If condition='${props.condition}'] must be a single one!`);
+    }
+  }
+  return import_react.default.Children.map(props.children, (item) => {
+    const isElse = (item == null ? void 0 : item.type) === If.Else;
+    return props.condition && !isElse || !props.condition && isElse ? item : void 0;
+  });
+};
+If.Then = (props) => {
+  return (props == null ? void 0 : props.render) ? props.render() : props == null ? void 0 : props.children;
+};
+If.Else = (props) => {
+  return (props == null ? void 0 : props.render) ? props.render() : props == null ? void 0 : props.children;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  If
+});

package/dist/cjs/util/MapIterator.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type MapIteratorProps = React.PropsWithChildren<{
+    of: Map<any, any> | ReadonlyMap<any, any>;
+    render?: (value: any, key: any, index: number) => React.ReactNode;
+}>;
+export declare const MapIterator: any;

package/dist/cjs/util/MapIterator.js

@@ -0,0 +1,39 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/util/MapIterator.tsx
+var MapIterator_exports = {};
+__export(MapIterator_exports, {
+  MapIterator: () => MapIterator
+});
+module.exports = __toCommonJS(MapIterator_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var MapIterator = (props) => {
+  return Array.from(props.of).map((item, index) => {
+    if (props.render) {
+      return (item == null ? void 0 : item.length) > 1 ? props.render(item[1], item[0], index) : void 0;
+    } else if (!props.render && props.children) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "condition-map-iterator", children: props.children }, index);
+    }
+    return void 0;
+  });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MapIterator
+});

package/dist/cjs/util/ObjectIterator.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type ObjectIteratorProps<T extends object> = React.PropsWithChildren<{
+    of: T;
+    render?: (value: any, key: string, index: number) => React.ReactNode;
+}>;
+export declare const ObjectIterator: any;

package/dist/cjs/util/ObjectIterator.js

@@ -0,0 +1,42 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/util/ObjectIterator.tsx
+var ObjectIterator_exports = {};
+__export(ObjectIterator_exports, {
+  ObjectIterator: () => ObjectIterator
+});
+module.exports = __toCommonJS(ObjectIterator_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var ObjectIterator = (props) => {
+  if (!props.of) {
+    return void 0;
+  }
+  return Object.keys(props.of).map((item, index) => {
+    if (props.render) {
+      return props.render(props.of[item], item, index);
+    } else if (!props.render && props.children) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "condition-object-iterator", children: props.children }, index);
+    }
+    return void 0;
+  });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ObjectIterator
+});

package/dist/cjs/util/SetIterator.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type SetIteratorProps = React.PropsWithChildren<{
+    of: Set<any>;
+    render?: (item: any, index: number) => React.ReactNode;
+}>;
+export declare const SetIterator: any;

package/dist/cjs/util/SetIterator.js

@@ -0,0 +1,39 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/util/SetIterator.tsx
+var SetIterator_exports = {};
+__export(SetIterator_exports, {
+  SetIterator: () => SetIterator
+});
+module.exports = __toCommonJS(SetIterator_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var SetIterator = (props) => {
+  return Array.from(props.of).map((item, index) => {
+    if (props.render) {
+      return props.render(item, index);
+    } else if (!props.render && props.children) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "condition-set-iterator", children: props.children }, index);
+    }
+    return void 0;
+  });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SetIterator
+});