react-ternary-be-gone 0.1.0 → 0.1.2

package/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

package/Case.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+const Case = ({ when, children, default: isDefault = false }) => {
+  // This component is just a marker for Conditional to process
+  return <>{children}</>;
+};
+
+export default Case;

package/Conditional.js

@@ -1,4 +1,8 @@
 import React, { useMemo, useEffect } from 'react';
+import Case from './Case';
+import If from './If';
+import ElseIf from './ElseIf';
+import Else from './Else';
 
 const Conditional = ({
   when,
@@ -27,6 +31,8 @@ const Conditional = ({
   startsWith = null,
   endsWith = null,
   match = null, // regex match
+  // Switch-case feature
+  switch: switchValue,
 }) => {
   const hasCondition = when !== undefined;
   const hasIteration = each !== undefined;
@@ -139,6 +145,133 @@ const Conditional = ({
   // Wrapper component
   const WrapperComponent = wrapper;
 
+  // Switch-case logic
+  if (switchValue !== undefined) {
+    // Find all Case children
+    const caseChildren = React.Children.toArray(children).filter(
+      child => child && child.type === Case
+    );
+    // Find matching case
+    let match = null;
+    let defaultCase = null;
+    caseChildren.forEach(child => {
+      if (child.props.default) {
+        defaultCase = child;
+      } else if (child.props.when === switchValue) {
+        match = child;
+      }
+    });
+    if (match) {
+      return <WrapperComponent>{match.props.children}</WrapperComponent>;
+    } else if (defaultCase) {
+      return <WrapperComponent>{defaultCase.props.children}</WrapperComponent>;
+    } else {
+      return fallback;
+    }
+  }
+
+  // If-ElseIf-Else logic
+  const childrenArray = React.Children.toArray(children);
+  const ifElseBlocks = childrenArray.filter(child =>
+    child && (child.type === If || child.type === ElseIf || child.type === Else)
+  );
+  if (ifElseBlocks.length > 0) {
+    let rendered = null;
+    for (let i = 0; i < ifElseBlocks.length; i++) {
+      const child = ifElseBlocks[i];
+      // Extract Conditional props from child
+      const {
+        when,
+        each,
+        filter,
+        sort,
+        limit,
+        reverse,
+        animate,
+        wrapper: childWrapper,
+        keyExtractor: childKeyExtractor,
+        empty: childEmpty,
+        fallback: childFallback,
+        ...rest
+      } = child.props;
+
+      // Evaluate condition
+      let condition = true;
+      if (child.type === If || child.type === ElseIf) {
+        condition = Boolean(when);
+      }
+
+      // Array processing for each
+      let arrayItems = [];
+      if (each && Array.isArray(each)) {
+        arrayItems = [...each];
+        if (filter && typeof filter === 'function') {
+          arrayItems = arrayItems.filter(filter);
+        }
+        if (sort && typeof sort === 'function') {
+          arrayItems = arrayItems.sort(sort);
+        }
+        if (reverse) {
+          arrayItems = arrayItems.reverse();
+        }
+        if (limit && typeof limit === 'number') {
+          arrayItems = arrayItems.slice(0, limit);
+        }
+      }
+
+      // Render logic
+      if ((child.type === If || child.type === ElseIf) && condition) {
+        if (each && Array.isArray(each)) {
+          if (arrayItems.length === 0) {
+            rendered = childEmpty || childFallback || null;
+            break;
+          }
+          const elements = arrayItems.map((item, idx) => (
+            <React.Fragment key={childKeyExtractor ? childKeyExtractor(item, idx) : idx}>
+              {typeof child.props.children === 'function'
+                ? child.props.children(item, idx, arrayItems)
+                : child.props.children}
+            </React.Fragment>
+          ));
+          rendered = childWrapper
+            ? React.createElement(childWrapper, null, elements)
+            : <>{elements}</>;
+          break;
+        } else {
+          rendered = childWrapper
+            ? React.createElement(childWrapper, null, child.props.children)
+            : <>{child.props.children}</>;
+          break;
+        }
+      }
+      if (child.type === Else) {
+        if (each && Array.isArray(each)) {
+          if (arrayItems.length === 0) {
+            rendered = childEmpty || childFallback || null;
+            break;
+          }
+          const elements = arrayItems.map((item, idx) => (
+            <React.Fragment key={childKeyExtractor ? childKeyExtractor(item, idx) : idx}>
+              {typeof child.props.children === 'function'
+                ? child.props.children(item, idx, arrayItems)
+                : child.props.children}
+            </React.Fragment>
+          ));
+          rendered = childWrapper
+            ? React.createElement(childWrapper, null, elements)
+            : <>{elements}</>;
+          break;
+        } else {
+          rendered = childWrapper
+            ? React.createElement(childWrapper, null, child.props.children)
+            : <>{child.props.children}</>;
+          break;
+        }
+      }
+    }
+    return rendered;
+  }
+
   // Only condition
   if (hasCondition && !hasIteration) {
     return evaluateCondition ? (

package/Else.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+const Else = ({ children, ...rest }) => {
+  // Marker for Conditional, supports all Conditional props
+  return <>{children}</>;
+};
+
+export default Else;

package/ElseIf.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+const ElseIf = ({ when, children, ...rest }) => {
+  // Marker for Conditional, supports all Conditional props
+  return <>{children}</>;
+};
+
+export default ElseIf;

package/If.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+const If = ({ when, children, ...rest }) => {
+  // Marker for Conditional, supports all Conditional props
+  return <>{children}</>;
+};
+
+export default If;

package/README.md

@@ -11,10 +11,12 @@ npm install react-ternary-be-gone
 yarn add react-ternary-be-gone
 ```
 
+
+
 ## Usage
 
 ```javascript
-import Conditional from 'react-ternary-be-gone';
+import Conditional, { Case, If, ElseIf, Else } from 'react-ternary-be-gone';
 
 // Basic conditional rendering
 <Conditional when={true}>
@@ -35,6 +37,120 @@ const items = ['Item 1', 'Item 2', 'Item 3'];
 <Conditional each={items}>
   {(item, index) => <p key={index}>{item}</p>}
 </Conditional>
+
+// Switch-case rendering
+const value = 'b';
+
+<Conditional switch={value}>
+  <Case when="a">A seçildi</Case>
+  <Case when="b">B seçildi</Case>
+  <Case default>Hiçbiri seçilmedi</Case>
+</Conditional>
+
+// If-ElseIf-Else rendering
+const status = 'loading';
+
+<Conditional>
+  <If when={status === 'loading'}>
+    <p>Yükleniyor...</p>
+  </If>
+  <ElseIf when={status === 'success'}>
+    <p>Başarılı!</p>
+  </ElseIf>
+  <Else>
+    <p>Durum bilinmiyor.</p>
+  </Else>
+</Conditional>
+
+// If-ElseIf-Else with advanced props
+const users = [{ id: 1, name: 'Alice', active: true }, { id: 2, name: 'Bob', active: false }];
+
+<Conditional>
+  <If when={users.length > 0} each={users} filter={user => user.active}>
+    {(user) => <p>{user.name}</p>}
+  </If>
+  <Else>
+    <p>Kullanıcı yok.</p>
+  </Else>
+</Conditional>
+```
+### If-ElseIf-Else Blocks
+
+You can use `<If>`, `<ElseIf>`, and `<Else>` as children of `<Conditional>` (without any prop on Conditional itself) to mimic if-else if-else logic. The first matching block is rendered. You can use all Conditional props (each, filter, sort, etc.) on these blocks.
+
+**Example:**
+
+```javascript
+import Conditional, { If, ElseIf, Else } from 'react-ternary-be-gone';
+
+const status = 'success';
+
+<Conditional>
+  <If when={status === 'loading'}>
+    <p>Yükleniyor...</p>
+  </If>
+  <ElseIf when={status === 'success'}>
+    <p>Başarılı!</p>
+  </ElseIf>
+  <Else>
+    <p>Durum bilinmiyor.</p>
+  </Else>
+</Conditional>
+```
+
+**Advanced Example (with array props):**
+
+```javascript
+const users = [{ id: 1, name: 'Alice', active: true }, { id: 2, name: 'Bob', active: false }];
+
+<Conditional>
+  <If when={users.length > 0} each={users} filter={user => user.active}>
+    {(user) => <p>{user.name}</p>}
+  </If>
+  <Else>
+    <p>Kullanıcı yok.</p>
+  </Else>
+</Conditional>
+```
+
+You can use multiple `<ElseIf>` blocks. The first matching block is rendered. All Conditional props (each, filter, sort, etc.) are supported on If/ElseIf/Else blocks.
+### `switch` (Switch-Case Rendering)
+
+Allows you to use switch-case style rendering with `<Case>` children. The `switch` prop sets the value to match, and each `<Case when={...}>...</Case>` child is checked. If no match is found, `<Case default>...</Case>` is rendered if present.
+
+**Type:** `any`
+
+**Example:**
+
+```javascript
+import Conditional, { Case } from 'react-ternary-be-gone';
+
+const value = 'b';
+
+<Conditional switch={value}>
+  <Case when="a">A seçildi</Case>
+  <Case when="b">B seçildi</Case>
+  <Case default>Hiçbiri seçilmedi</Case>
+</Conditional>
+```
+
+#### `<Case>`
+
+Child component for use with `switch` prop. Use `when` for matching value, and `default` for the default case.
+
+**Props:**
+
+- `when`: Value to match against the `switch` prop.
+- `default`: Boolean, renders if no other case matches.
+
+**Example:**
+
+```javascript
+<Conditional switch={status}>
+  <Case when="loading">Yükleniyor...</Case>
+  <Case when="success">Başarılı!</Case>
+  <Case default>Durum bilinmiyor.</Case>
+</Conditional>
 ```
 
 ## Props

package/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@babel/preset-env", "@babel/preset-react"]
+};

package/index.js

@@ -1,5 +1,9 @@
 import Conditional from './Conditional';
+import Case from './Case';
+import If from './If';
+import ElseIf from './ElseIf';
+import Else from './Else';
 import { useConditionalHelpers } from './useConditionalHelpers';
 
 export default Conditional;
-export { useConditionalHelpers };
+export { Case, If, ElseIf, Else, useConditionalHelpers };

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "react-ternary-be-gone",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A React component designed to simplify conditional rendering and list iteration, providing a more readable and maintainable alternative to ternary operators and verbose conditional logic.",
-  "main": "index.js",
+  "main": "dist/index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "babel . --out-dir dist"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
@@ -23,5 +24,9 @@
   "bugs": {
     "url": "https://github.com/sundowatch/react-ternary-be-gone/issues"
   },
-  "homepage": "https://github.com/sundowatch/react-ternary-be-gone#readme"
+  "homepage": "https://github.com/sundowatch/react-ternary-be-gone#readme",
+  "devDependencies": {
+    "@babel/cli": "^7.28.0",
+    "@babel/preset-react": "^7.27.1"
+  }
 }