Skip to content

Commit 3c9bd5f

Browse files
azuazu
committed
add example
1 parent 7880ba1 commit 3c9bd5f

14 files changed

Lines changed: 1176 additions & 0 deletions

File tree

‎example/.gitignore‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# dependencies
4+
node_modules
5+
6+
# testing
7+
coverage
8+
9+
# production
10+
build
11+
12+
# misc
13+
.DS_Store
14+
npm-debug.log

‎example/README.md‎

Lines changed: 920 additions & 0 deletions
Large diffs are not rendered by default.

‎example/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<link rel="shortcut icon" href="./src/favicon.ico">
7+
<title>React App</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<!--
12+
This HTML file is a template.
13+
If you open it directly in the browser, you will see an empty page.
14+
15+
You can add webfonts, meta tags, or analytics to this file.
16+
The build step will place the bundled scripts into the <body> tag.
17+
18+
To begin the development, run `npm start` in this folder.
19+
To create a production bundle, use `npm run build`.
20+
-->
21+
</body>
22+
</html>

‎example/package.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "example",
3+
"version": "0.1.0",
4+
"private": true,
5+
"devDependencies": {
6+
"react-scripts": "0.4.1"
7+
},
8+
"dependencies": {
9+
"react": "^15.3.1",
10+
"react-dom": "^15.3.1",
11+
"react-toggle-pattern": "file:../"
12+
},
13+
"scripts": {
14+
"start": "react-scripts start",
15+
"build": "react-scripts build",
16+
"test": "react-scripts test --env=jsdom",
17+
"update": "npm rm react-toggle-pattern && npm i",
18+
"eject": "react-scripts eject"
19+
},
20+
"eslintConfig": {
21+
"extends": "./node_modules/react-scripts/config/eslint.js"
22+
}
23+
}

‎example/src/ActiveElement.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// LICENSE : MIT
2+
"use strict";
3+
import React, {Component} from 'react';
4+
class ActiveElement extends Component {
5+
constructor() {
6+
super();
7+
this.state = {
8+
activeElement: null
9+
};
10+
this.update = () => {
11+
this.setState({
12+
activeElement: document.activeElement.tagName
13+
});
14+
}
15+
}
16+
17+
componentDidMount() {
18+
setInterval(this.update, 100);
19+
}
20+
21+
render() {
22+
return (
23+
<div className="ActiveElement">
24+
ActiveElement: {this.state.activeElement}
25+
</div>
26+
);
27+
}
28+
}
29+
30+
export default ActiveElement;

‎example/src/App.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.App {
2+
text-align: center;
3+
}
4+
5+
.App-header {
6+
background-color: #222;
7+
height: 150px;
8+
padding: 20px;
9+
color: white;
10+
}
11+
12+
.App-intro {
13+
font-size: large;
14+
}
15+
16+
@keyframes App-logo-spin {
17+
from {
18+
transform: rotate(0deg);
19+
}
20+
to {
21+
transform: rotate(360deg);
22+
}
23+
}
24+
25+
.SVGIcon {
26+
width: 10em;
27+
height: 10em;
28+
}
29+
.SVGIcon use {
30+
width: 10em;
31+
height: 10em;
32+
}

‎example/src/App.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React, {Component} from 'react';
2+
import {TogglePattern} from "react-toggle-pattern";
3+
import ActiveElement from "./ActiveElement";
4+
import './App.css';
5+
6+
class App extends Component {
7+
constructor() {
8+
super();
9+
this.state = {
10+
pattern: "A"
11+
}
12+
}
13+
14+
render() {
15+
const onClickA = () => {
16+
this.setState({
17+
pattern: "B"
18+
})
19+
};
20+
const onClickB = () => {
21+
this.setState({
22+
pattern: "A"
23+
});
24+
};
25+
return (
26+
<div className="App">
27+
<TogglePattern pattern={this.state.pattern}>
28+
<div pattern={"A"} onClick={onClickA}>
29+
<button><p>
30+
A
31+
</p></button>
32+
</div>
33+
<div pattern={"B"} onClick={onClickB}>
34+
<span>BBB</span>
35+
<button>
36+
<span>B</span>
37+
</button>
38+
</div>
39+
</TogglePattern>
40+
<ActiveElement />
41+
</div>
42+
);
43+
}
44+
}
45+
46+
export default App;

‎example/src/App.test.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
5+
it('renders without crashing', () => {
6+
const div = document.createElement('div');
7+
ReactDOM.render(<App />, div);
8+
});

‎example/src/SVGIcon/SVGIcon.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// LICENSE : MIT
2+
"use strict";
3+
const React = require("react");
4+
export default class SVGIcon extends React.Component {
5+
render() {
6+
const name = this.props.name;
7+
const href = `resources/svg/icons.svg#${name}`;
8+
return (
9+
<svg className="SVGIcon" {...this.props}>
10+
<use xlinkHref={href}/>
11+
</svg>
12+
13+
);
14+
}
15+
}
16+
SVGIcon.propTypes = {
17+
name: React.PropTypes.oneOf([
18+
"play",
19+
"play-no-space",
20+
"cross",
21+
"check",
22+
"star",
23+
"heart1",
24+
"heart2",
25+
"hearts",
26+
"twitter"
27+
]).isRequired
28+
};

‎example/src/favicon.ico‎

24.3 KB
Binary file not shown.

0 commit comments

Comments
 (0)