react-ternary-be-gone 0.1.1 → 0.1.3

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 selected</Case>
+  <Case when="b">B selected</Case>
+  <Case default>None selected</Case>
+</Conditional>
+
+// If-ElseIf-Else rendering
+const status = 'loading';
+
+<Conditional>
+  <If when={status === 'loading'}>
+  <p>Loading...</p>
+  </If>
+  <ElseIf when={status === 'success'}>
+  <p>Success!</p>
+  </ElseIf>
+  <Else>
+  <p>Status unknown.</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>No users found.</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">Loading...</Case>
+  <Case when="success">Success!</Case>
+  <Case default>Status unknown.</Case>
+</Conditional>
 ```
 
 ## Props

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,6 +1,6 @@
 {
   "name": "react-ternary-be-gone",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "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": "dist/index.js",
   "scripts": {

package/dist/Conditional.js

@@ -1,206 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const Conditional = _ref => {
-  let {
-    when,
-    each,
-    children,
-    fallback = null,
-    empty = null,
-    loading = false,
-    error = null,
-    keyExtractor = (item, index) => index,
-    // New features
-    filter = null,
-    sort = null,
-    limit = null,
-    reverse = false,
-    animate = false,
-    wrapper = _react.default.Fragment,
-    debug = false,
-    onRender = null,
-    // Conditional rendering helpers
-    gt = null,
-    // greater than
-    lt = null,
-    // less than
-    eq = null,
-    // equal
-    ne = null,
-    // not equal
-    includes = null,
-    startsWith = null,
-    endsWith = null,
-    match = null // regex match
-  } = _ref;
-  const hasCondition = when !== undefined;
-  const hasIteration = each !== undefined;
-
-  // Advanced condition evaluation
-  const evaluateCondition = (0, _react.useMemo)(() => {
-    if (when !== undefined) return Boolean(when);
-
-    // Numerical comparisons
-    if (gt !== null && typeof gt === 'object') {
-      const {
-        value,
-        target
-      } = gt;
-      return value > target;
-    }
-    if (lt !== null && typeof lt === 'object') {
-      const {
-        value,
-        target
-      } = lt;
-      return value < target;
-    }
-    if (eq !== null && typeof eq === 'object') {
-      const {
-        value,
-        target
-      } = eq;
-      return value === target;
-    }
-    if (ne !== null && typeof ne === 'object') {
-      const {
-        value,
-        target
-      } = ne;
-      return value !== target;
-    }
-
-    // String operations
-    if (includes !== null && typeof includes === 'object') {
-      const {
-        value,
-        target
-      } = includes;
-      return String(value).includes(target);
-    }
-    if (startsWith !== null && typeof startsWith === 'object') {
-      const {
-        value,
-        target
-      } = startsWith;
-      return String(value).startsWith(target);
-    }
-    if (endsWith !== null && typeof endsWith === 'object') {
-      const {
-        value,
-        target
-      } = endsWith;
-      return String(value).endsWith(target);
-    }
-    if (match !== null && typeof match === 'object') {
-      const {
-        value,
-        pattern
-      } = match;
-      return new RegExp(pattern).test(String(value));
-    }
-    return true;
-  }, [when, gt, lt, eq, ne, includes, startsWith, endsWith, match]);
-
-  // Array processing
-  const processedArray = (0, _react.useMemo)(() => {
-    if (!hasIteration || !Array.isArray(each)) return [];
-    let result = [...each];
-
-    // Apply filter
-    if (filter && typeof filter === 'function') {
-      result = result.filter(filter);
-    }
-
-    // Apply sort
-    if (sort && typeof sort === 'function') {
-      result = result.sort(sort);
-    }
-
-    // Apply reverse
-    if (reverse) {
-      result = result.reverse();
-    }
-
-    // Apply limit
-    if (limit && typeof limit === 'number') {
-      result = result.slice(0, limit);
-    }
-    if (debug) {
-      console.log('Conditional Debug:', {
-        original: each,
-        processed: result,
-        filter: !!filter,
-        sort: !!sort,
-        reverse,
-        limit
-      });
-    }
-    return result;
-  }, [each, filter, sort, reverse, limit, hasIteration, debug]);
-
-  // Render callback
-  (0, _react.useEffect)(() => {
-    if (onRender && typeof onRender === 'function') {
-      onRender({
-        condition: evaluateCondition,
-        itemCount: processedArray.length,
-        hasCondition,
-        hasIteration
-      });
-    }
-  }, [evaluateCondition, processedArray.length, hasCondition, hasIteration, onRender]);
-
-  // Loading state
-  if (loading) {
-    return fallback || /*#__PURE__*/_react.default.createElement("div", {
-      className: "conditional-loading"
-    }, "Loading...");
-  }
-
-  // Error state
-  if (error) {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "conditional-error"
-    }, "Error: ", error);
-  }
-
-  // Wrapper component
-  const WrapperComponent = wrapper;
-
-  // Only condition
-  if (hasCondition && !hasIteration) {
-    return evaluateCondition ? /*#__PURE__*/_react.default.createElement(WrapperComponent, null, children) : fallback;
-  }
-
-  // Only iteration
-  if (!hasCondition && hasIteration) {
-    if (processedArray.length === 0) {
-      return empty || fallback;
-    }
-    const elements = processedArray.map((item, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
-      key: keyExtractor(item, index)
-    }, typeof children === 'function' ? children(item, index, processedArray) : children));
-    return animate ? /*#__PURE__*/_react.default.createElement(WrapperComponent, {
-      className: "conditional-animated"
-    }, elements) : /*#__PURE__*/_react.default.createElement(WrapperComponent, null, elements);
-  }
-
-  // Both condition and iteration
-  if (hasCondition && hasIteration) {
-    if (!evaluateCondition) return fallback;
-    if (processedArray.length === 0) return empty || fallback;
-    const elements = processedArray.map((item, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
-      key: keyExtractor(item, index)
-    }, children(item, index, processedArray)));
-    return /*#__PURE__*/_react.default.createElement(WrapperComponent, null, elements);
-  }
-  return /*#__PURE__*/_react.default.createElement(WrapperComponent, null, children);
-};
-var _default = exports.default = Conditional;

package/dist/babel.config.js

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

package/dist/index.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-Object.defineProperty(exports, "useConditionalHelpers", {
-  enumerable: true,
-  get: function () {
-    return _useConditionalHelpers.useConditionalHelpers;
-  }
-});
-var _Conditional = _interopRequireDefault(require("./Conditional"));
-var _useConditionalHelpers = require("./useConditionalHelpers");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = _Conditional.default;

package/dist/useConditionalHelpers.js

@@ -1,53 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useConditionalHelpers = void 0;
-var _react = require("react");
-const useConditionalHelpers = () => {
-  return (0, _react.useMemo)(() => ({
-    // Quick condition helpers
-    isEmpty: array => ({
-      when: !array || array.length === 0
-    }),
-    isNotEmpty: array => ({
-      when: array && array.length > 0
-    }),
-    hasLength: (array, length) => ({
-      when: array && array.length === length
-    }),
-    isEven: num => ({
-      when: num % 2 === 0
-    }),
-    isOdd: num => ({
-      when: num % 2 !== 0
-    }),
-    // Array processing helpers
-    sortBy: function (field) {
-      let order = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'asc';
-      return (a, b) => {
-        const aValue = a[field];
-        const bValue = b[field];
-        if (aValue < bValue) {
-          return order === 'asc' ? -1 : 1;
-        }
-        if (aValue > bValue) {
-          return order === 'asc' ? 1 : -1;
-        }
-        return 0;
-      };
-    },
-    filterBy: (field, value) => item => item[field] === value,
-    unique: (array, key) => {
-      const seen = new Set();
-      return array.filter(item => {
-        const keyValue = typeof key === 'function' ? key(item) : item[key];
-        const isNew = !seen.has(keyValue);
-        seen.add(keyValue);
-        return isNew;
-      });
-    }
-  }), []);
-};
-exports.useConditionalHelpers = useConditionalHelpers;