Skip to content

Commit e4dbaf6

Browse files
bfollingtonbfollington
committed
Intial commit
0 parents  commit e4dbaf6

File tree

8 files changed

+335
-0
lines changed

8 files changed

+335
-0
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
test-bundle.js

‎README.md

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# React Conditionals
2+
3+
Sick of ternary operators and if-else's above your render method? Want declarative logic without a bizarre syntax?
4+
5+
<Condition>
6+
<Case test={userAgrees()}>Me too.</Case>
7+
<Case default>Sorry to hear that.</Case>
8+
</Condition>
9+
10+
## Installation
11+
12+
`npm install react-conditional --save`
13+
14+
## Usage
15+
16+
var React = require("react");
17+
18+
var conditionals = require("./index.js");
19+
var Condition = conditionals.Condition;
20+
var Case = conditionals.Case;
21+
22+
var mp = document.querySelector("#mount");
23+
24+
function userAgentContains(string) {
25+
return navigator.userAgent.toLowerCase().indexOf(string) > -1;
26+
}
27+
28+
function deferredChecker() {
29+
return true;
30+
}
31+
32+
React.render(
33+
<div>
34+
35+
<Condition>
36+
<Case test={true}><p>Only one entry in a Condition can match.</p></Case>
37+
<Case test={true}><p>I'm invisible.</p></Case>
38+
</Condition>
39+
40+
<Condition>
41+
<Case test={false}><p>One of your cases should match.</p></Case>
42+
<Case test={false}><p>One of your cases should match.</p></Case>
43+
<Case default>
44+
<p>You can mark a case as default to always match. We can also nest conditions.</p>
45+
<Condition>
46+
<Case test={userAgentContains("chrome")}><p>You're using Chrome.</p></Case>
47+
<Case test={userAgentContains("firefox")}><p>You're using Firefox.</p></Case>
48+
<Case default><p>You're using a browser I didn't check for (not that that matters).</p></Case>
49+
</Condition>
50+
</Case>
51+
</Condition>
52+
53+
<Case test={true}><p>Cases can be used alone too</p></Case>
54+
<Case test={deferredChecker}><p>Tests can accept a function to evaluate later too.</p></Case>
55+
<Case test={Math.random() < 0.5}><p>Visible Sometimes</p></Case>
56+
57+
</div>,
58+
mp
59+
);

‎example.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<html>
2+
<head>
3+
<meta charset="utf-8">
4+
</head>
5+
<body>
6+
<div id="mount"></div>
7+
8+
<script type="text/javascript" src="test-bundle.js" charset="utf-8"></script>
9+
</body>
10+
</html>

‎index.js

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
"use strict";
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
7+
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
8+
9+
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
10+
11+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
12+
13+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
14+
15+
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
16+
17+
var _react = require("react");
18+
19+
var _react2 = _interopRequireDefault(_react);
20+
21+
function isTrue(test) {
22+
var didMatch = false;
23+
24+
if (test) {
25+
if (test.call) {
26+
//it's a function
27+
didMatch = test();
28+
} else {
29+
didMatch = test;
30+
}
31+
}
32+
33+
return didMatch ? true : false;
34+
}
35+
36+
var Condition = (function (_React$Component) {
37+
_inherits(Condition, _React$Component);
38+
39+
function Condition(props) {
40+
_classCallCheck(this, Condition);
41+
42+
_get(Object.getPrototypeOf(Condition.prototype), "constructor", this).call(this, props);
43+
}
44+
45+
_createClass(Condition, [{
46+
key: "render",
47+
value: function render() {
48+
49+
var childToRender = null;
50+
51+
var child;
52+
for (var i = 0; i < this.props.children.length; i++) {
53+
child = this.props.children[i];
54+
55+
if (isTrue(child.props.test) || child.props["default"]) {
56+
childToRender = child;
57+
break;
58+
}
59+
}
60+
61+
return childToRender;
62+
}
63+
}]);
64+
65+
return Condition;
66+
})(_react2["default"].Component);
67+
68+
exports.Condition = Condition;
69+
70+
var Case = (function (_React$Component2) {
71+
_inherits(Case, _React$Component2);
72+
73+
function Case(props) {
74+
_classCallCheck(this, Case);
75+
76+
_get(Object.getPrototypeOf(Case.prototype), "constructor", this).call(this, props);
77+
78+
this.match = false;
79+
}
80+
81+
_createClass(Case, [{
82+
key: "didMatch",
83+
value: function didMatch() {
84+
return this.match;
85+
}
86+
}, {
87+
key: "render",
88+
value: function render() {
89+
90+
this.match = isTrue(this.props.test) || this.props["default"];
91+
92+
if (!this.match) {
93+
return null;
94+
}
95+
96+
return _react2["default"].createElement(
97+
"span",
98+
null,
99+
this.props.children
100+
);
101+
}
102+
}]);
103+
104+
return Case;
105+
})(_react2["default"].Component);
106+
107+
exports.Case = Case;
108+

‎lib/Condition.jsx

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import React from "react";
2+
3+
function isTrue(test) {
4+
var didMatch = false;
5+
6+
if (test) {
7+
if (test.call) { //it's a function
8+
didMatch = test();
9+
} else {
10+
didMatch = test;
11+
}
12+
}
13+
14+
return didMatch ? true : false;
15+
}
16+
17+
export class Condition extends React.Component {
18+
constructor(props) {
19+
super(props);
20+
}
21+
22+
render() {
23+
24+
var childToRender = null;
25+
26+
var child;
27+
for (var i = 0; i < this.props.children.length; i++) {
28+
child = this.props.children[i];
29+
30+
if (isTrue(child.props.test) || child.props.default) {
31+
childToRender = child;
32+
break;
33+
}
34+
}
35+
36+
return (
37+
childToRender
38+
);
39+
}
40+
}
41+
42+
export class Case extends React.Component {
43+
constructor(props) {
44+
super(props);
45+
46+
this.match = false;
47+
}
48+
49+
didMatch() {
50+
return this.match;
51+
}
52+
53+
render() {
54+
55+
this.match = isTrue(this.props.test) || this.props.default;
56+
57+
if (!this.match) {
58+
return null;
59+
}
60+
61+
return (
62+
<span>
63+
{this.props.children}
64+
</span>
65+
);
66+
}
67+
}

‎package.json

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "react-conditional",
3+
"description": "Add templating logic through a JSX api.",
4+
"version": "1.0.0",
5+
"author": "Ben Follington",
6+
"contributors": [],
7+
"license": "MIT",
8+
"repository": "bfollington/react-conditional",
9+
"homepage": "https://github.com/bfollington/react-conditional",
10+
"keywords": [
11+
"react"
12+
],
13+
"engines": {
14+
"node": ">= 0.10.0"
15+
},
16+
"peerDependencies": {
17+
"react": "^0.13.3"
18+
},
19+
"devDependencies": {
20+
"babel": "^5.8.23",
21+
"babel-core": "^5.8.25",
22+
"babel-loader": "^5.3.2",
23+
"webpack": "^1.12.2"
24+
},
25+
"scripts": {
26+
"build": "babel lib/Condition.jsx > index.js",
27+
"test-build": "webpack"
28+
}
29+
}

‎test.js

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
var React = require("react");
2+
3+
var conditionals = require("./index.js");
4+
var Condition = conditionals.Condition;
5+
var Case = conditionals.Case;
6+
7+
var mp = document.querySelector("#mount");
8+
9+
function userAgentContains(string) {
10+
return navigator.userAgent.toLowerCase().indexOf(string) > -1;
11+
}
12+
13+
function deferredChecker() {
14+
return true;
15+
}
16+
17+
React.render(
18+
<div>
19+
20+
<Condition>
21+
<Case test={true}><p>Only one entry in a Condition can match.</p></Case>
22+
<Case test={true}><p>I'm invisible.</p></Case>
23+
</Condition>
24+
25+
<Condition>
26+
<Case test={false}><p>One of your cases should match.</p></Case>
27+
<Case test={false}><p>One of your cases should match.</p></Case>
28+
<Case default>
29+
<p>You can mark a case as default to always match. We can also nest conditions.</p>
30+
<Condition>
31+
<Case test={userAgentContains("chrome")}><p>You're using Chrome.</p></Case>
32+
<Case test={userAgentContains("firefox")}><p>You're using Firefox.</p></Case>
33+
<Case default><p>You're using a browser I didn't check for (not that that matters).</p></Case>
34+
</Condition>
35+
</Case>
36+
</Condition>
37+
38+
<Case test={true}><p>Cases can be used alone too</p></Case>
39+
<Case test={deferredChecker}><p>Tests can accept a function to evaluate later too.</p></Case>
40+
<Case test={Math.random() < 0.5}><p>Visible Sometimes</p></Case>
41+
42+
</div>,
43+
mp
44+
);

‎webpack.config.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
module.exports = {
2+
entry: "./test.js",
3+
output: {
4+
path: __dirname,
5+
filename: "test-bundle.js"
6+
},
7+
module: {
8+
loaders: [
9+
{
10+
test: /\.jsx?$/,
11+
exclude: /(node_modules|bower_components)/,
12+
loader: 'babel'
13+
}
14+
]
15+
}
16+
};

0 commit comments

Comments
 (0)