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

package/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Jiovan Ltd. All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,304 @@
-# Temporary Holding Version
+# @jiovan-labs/react-condition
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[![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)
+
+🏅 Render components conditionally for React 👍
+
+## Features
+
+✅ Supports 'If' conditions
+
+✅ Supports 'If'-'Then' conditions
+
+✅ Supports 'If'-'Else' conditions
+
+✅ Supports 'If'-'Then'-Else' conditions
+
+✅ Supports 'For' conditions
+
+✅ Supports 'Do' conditions
+
+✅ Supports 'While' conditions
+
+✅ Supports 'MapIterator' conditions
+
+✅ Supports 'SetIterator' conditions
+
+✅ Supports 'ObjectIterator' conditions
+
+## Quickstart
+
+You can install this package in your React project as follows:
+
+```bash
+$ npm install @jiovan-labs/react-condition --save
+```
+
+Then, you may import components as follows:
+
+```tsx | pure
+import { If, For, Switch, Do, While } from '@jiovan-labs/react-condition';
+import { MapIterator, SetIterator, ObjectIterator } from '@jiovan-labs/react-condition';
+```
+
+Enjoy your coding journey with `react-condition`. ✌️
+
+## Example
+
+### If
+
+> Both of the `If.Then` and `If.Else` have a `render` property (() => React.ReactNode), thus you can customize the rendering contents instead of the 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
+
+> Both of the `Switch.Case` and `Switch.Default` have a `render` property (() => React.ReactNode), thus you can customize the rendering contents instead of the 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>
+                );
+            }}
+        />
+    );
+}
+```
+
+## License
+
+This project is under the [MIT License](https://mit-license.org/).
+
+## Copyright
+
+Beijing Jiovan Technology Ltd.
+
+## Website
+
+- Jiovan: [https://joivan.com](https://joivan.com)

package/README.zh-CN.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)