Skip to content

Commit 6481d17

Browse files
gdowensgdowens
committed
react toggle button with example page
1 parent c930da2 commit 6481d17

17 files changed

+1232
-0
lines changed

‎.babelrc

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"presets": [
3+
"react",
4+
"es2015",
5+
"stage-0"
6+
]
7+
}

‎.eslintrc

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"extends": "airbnb",
3+
"plugins": [
4+
"react"
5+
]
6+
}

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎.npmignore

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
2+
src/
3+
__tests__/
4+
.eslintrc
5+
.babelrc
6+
webpack.config.js
7+
webpack.demo.config.js

‎__tests__/index-test.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
jest.unmock('../src/index');
2+
3+
import React from 'react';
4+
import ReactDOM from 'react-dom';
5+
import TestUtils from 'react-addons-test-utils';
6+
import index from '../src/index'
7+
8+
describe('<index />', () => {
9+
it('', () => {
10+
const renderer = TestUtils.createRenderer();
11+
renderer.render(
12+
<index />
13+
);
14+
const dom = renderer.getRenderOutput();
15+
//expect(dom.props.//PROPS_NAME).toEqual('//TEXT');
16+
});
17+
});

‎demo/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>React Toggle Button</title>
6+
</head>
7+
<body>
8+
<div id='root'></div>
9+
<script src="./react-toggle-buttonDemo.js"></script>
10+
<a href="https://github.com/gdowens/react-toggle-button" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
11+
<style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
12+
</body>
13+
</html>

‎demo/react-toggle-buttonDemo.js

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/index.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
{
2+
"name": "react-toggle-button",
3+
"version": "1.0.0",
4+
"description": "A React Component.",
5+
"main": "./lib/index.js",
6+
"scripts": {
7+
"start": "webpack-dev-server -d --config webpack.demo.config.js --progress --colors --display-error-details",
8+
"build-demo": "NODE_ENV=production node_modules/.bin/webpack -p --config webpack.demo.config.js --progress --colors --display-error-details",
9+
"build-component": "NODE_ENV=production node_modules/.bin/webpack -p --progress --colors --display-error-details",
10+
"build": "npm run build-component && npm run build-demo",
11+
"prepublish": "npm run build",
12+
"test": "BABEL_JEST_STAGE=0 jest",
13+
"lint": "eslint src/**"
14+
},
15+
"repository": {
16+
"type": "git",
17+
"url": "https://github.com"
18+
},
19+
"keywords": {
20+
"keywords": [
21+
"react",
22+
"reactjs",
23+
"react-component"
24+
]
25+
},
26+
"author": "",
27+
"license": "MIT",
28+
"bugs": {
29+
"url": "https://github.com/gdowens/react-toggle-button/issues"
30+
},
31+
"homepage": "https://github.com/gdowens/react-toggle-button#readme",
32+
"jest": {
33+
"unmockedModulePathPatterns": [
34+
"<rootDir>/node_modules/react",
35+
"<rootDir>/node_modules/react-dom",
36+
"<rootDir>/node_modules/react-addons-test-utils"
37+
]
38+
},
39+
"devDependencies": {
40+
"babel-cli": "^6.10.1",
41+
"babel-jest": "^13.0.0",
42+
"babel-loader": "^6.2.4",
43+
"babel-polyfill": "^6.9.1",
44+
"babel-preset-es2015": "^6.9.0",
45+
"babel-preset-react": "^6.5.0",
46+
"babel-preset-stage-0": "^6.5.0",
47+
"eslint": "^2.13.1",
48+
"eslint-config-airbnb": "^9.0.1",
49+
"eslint-plugin-import": "^1.9.2",
50+
"eslint-plugin-jsx-a11y": "^1.5.3",
51+
"eslint-plugin-react": "^5.2.2",
52+
"jest-cli": "^13.0.0",
53+
"react-addons-css-transition-group": "^15.1.0",
54+
"react-addons-perf": "^15.1.0",
55+
"react-addons-test-utils": "^15.1.0",
56+
"webpack": "^1.13.1",
57+
"webpack-dev-server": "^1.14.1"
58+
},
59+
"dependencies": {
60+
"react": "^15.1.0",
61+
"react-dom": "^15.1.0",
62+
"react-motion": "^0.4.4"
63+
}
64+
}

‎src/colors.js

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
// copied directly from https://github.com/facebook/rebound-js
2+
// rewritten for babel/.eslintrc
3+
4+
// BSD License
5+
6+
// For the rebound-js software
7+
8+
// Copyright (c) 2014, Facebook, Inc. All rights reserved.
9+
10+
// Redistribution and use in source and binary forms, with or without modification,
11+
// are permitted provided that the following conditions are met:
12+
13+
// * Redistributions of source code must retain the above copyright notice, this
14+
// list of conditions and the following disclaimer.
15+
16+
// * Redistributions in binary form must reproduce the above copyright notice,
17+
// this list of conditions and the following disclaimer in the documentation
18+
// and/or other materials provided with the distribution.
19+
20+
// * Neither the name Facebook nor the names of its contributors may be used to
21+
// endorse or promote products derived from this software without specific
22+
// prior written permission.
23+
24+
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
25+
// ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
26+
// WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
27+
// DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
28+
// ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
29+
// (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
30+
// LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
31+
// ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
32+
// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
33+
// SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
34+
35+
const colorCache = {};
36+
// Here are a couple of function to convert colors between hex codes and RGB
37+
// component values. These are handy when performing color
38+
// tweening animations.
39+
40+
export function hexToRGB(c) {
41+
let color = c;
42+
if (colorCache[color]) {
43+
return colorCache[color];
44+
}
45+
color = color.replace('#', '');
46+
if (color.length === 3) {
47+
color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
48+
}
49+
const parts = color.match(/.{2}/g);
50+
51+
const ret = {
52+
r: parseInt(parts[0], 16),
53+
g: parseInt(parts[1], 16),
54+
b: parseInt(parts[2], 16),
55+
};
56+
57+
colorCache[color] = ret;
58+
return ret;
59+
}
60+
61+
export function rgbToHex(red, green, blue) {
62+
let r = red.toString(16);
63+
let g = green.toString(16);
64+
let b = blue.toString(16);
65+
r = r.length < 2 ? '0' + r : r;
66+
g = g.length < 2 ? '0' + g : g;
67+
b = b.length < 2 ? '0' + b : b;
68+
return '#' + r + g + b;
69+
}
70+
71+
// This helper function does a linear interpolation of a value from
72+
// one range to another. This can be very useful for converting the
73+
// motion of a Spring to a range of UI property values. For example a
74+
// spring moving from position 0 to 1 could be interpolated to move a
75+
// view from pixel 300 to 350 and scale it from 0.5 to 1. The current
76+
// position of the `Spring` just needs to be run through this method
77+
// taking its input range in the _from_ parameters with the property
78+
// animation range in the _to_ parameters.
79+
export function mapValueInRange(value, fromLow, fromHigh, toLow, toHigh) {
80+
let fromRangeSize = fromHigh - fromLow;
81+
let toRangeSize = toHigh - toLow;
82+
let valueScale = (value - fromLow) / fromRangeSize;
83+
return toLow + (valueScale * toRangeSize);
84+
}
85+
86+
// Interpolate two hex colors in a 0 - 1 range or optionally provide a
87+
// custom range with fromLow,fromHight. The output will be in hex by default
88+
// unless asRGB is true in which case it will be returned as an rgb string.
89+
export function interpolateColor(val, start, end, low, high, asRGB) {
90+
let fromLow = low === undefined ? 0 : low;
91+
let fromHigh = high === undefined ? 1 : high;
92+
let startColor = hexToRGB(start);
93+
let endColor = hexToRGB(end);
94+
let r = Math.floor(
95+
mapValueInRange(val, fromLow, fromHigh, startColor.r, endColor.r)
96+
);
97+
let g = Math.floor(
98+
mapValueInRange(val, fromLow, fromHigh, startColor.g, endColor.g)
99+
);
100+
let b = Math.floor(
101+
mapValueInRange(val, fromLow, fromHigh, startColor.b, endColor.b)
102+
);
103+
if (asRGB) {
104+
return 'rgb(' + r + ',' + g + ',' + b + ')';
105+
}
106+
return rgbToHex(r, g, b);
107+
}

‎src/iconExamples.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React, { Component } from 'react'
2+
3+
export const Check = () => (
4+
<svg width="14" height="10" viewBox="0 0 14 11" xmlns="http://www.w3.org/2000/svg">
5+
<title>
6+
switch-check
7+
</title>
8+
<path d="M11.264 0L5.26 6.004 2.103 2.847 0 4.95l5.26 5.26 8.108-8.107L11.264 0" fill="#fff" fill-rule="evenodd"/>
9+
</svg>
10+
)
11+
12+
export const X = () => (
13+
<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
14+
<title>
15+
switch-x
16+
</title>
17+
<path d="M9.9 2.12L7.78 0 4.95 2.828 2.12 0 0 2.12l2.83 2.83L0 7.776 2.123 9.9 4.95 7.07 7.78 9.9 9.9 7.776 7.072 4.95 9.9 2.12" fill="#fff" fill-rule="evenodd"/>
18+
</svg>
19+
)

‎src/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+
export default from './react-toggle-button';

0 commit comments

Comments
 (0)