├── .gitignore
├── README.md
├── bower.json
├── example
├── demo.gif
└── index.html
├── package.json
├── react-pacman-progress.css
└── react-pacman-progress.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # https://git-scm.com/docs/gitignore
2 | # https://help.github.com/articles/ignoring-files
3 | # Example .gitignore files: https://github.com/github/gitignore
4 | /bower_components/
5 | /node_modules/
6 | .DS_Store
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-pacman-progress
2 |
3 | > Simple [React](http://facebook.github.io/react/index.html) component for a fun progress indicator.
4 |
5 | ### [Demo](https://mathieudutour.github.io/react-pacman-progress)
6 |
7 | [](https://github.com/mathieudutour/react-pacman-progress/blob/master/example/index.html)
8 |
9 | ## Install
10 |
11 | ```bash
12 | npm install react-pacman-progress --save
13 | ```
14 |
15 | or
16 |
17 | ```bash
18 | bower install react-pacman-progress --save
19 | ```
20 |
21 | ## Example
22 |
23 | Controlled usage:
24 |
25 | ```javascript
26 | var PacmanProgress = require('react-pacman-progress');
27 |
28 | var App = React.createClass({
29 | getInitialState() {
30 | return {currentIndex: 0};
31 | },
32 | render() {
33 | var slides = [
34 | {color: '#c0ffee'},
35 | {color: '#deface'},
36 | {color: '#0ff1ce'}
37 | ]
38 | return (
39 |
40 | {
41 | slides.map(function(slide, i) {
42 | return
;
43 | }.bind(this))
44 | }
45 |
46 |
47 | );
48 | },
49 |
50 | handleClick: function() {
51 | this.setState({currentIndex: this.state.currentIndex + 1});
52 | }
53 | });
54 | ```
55 |
56 | ## API
57 |
58 | ### Props
59 |
60 | ##### classNamespace
61 |
62 | Namespace for CSS classes, _optional_, default is `` i.e CSS classes are `'' + 'pacman'`.
63 |
64 | ##### items
65 |
66 | Number of dots for pacman to eat. _required_
67 |
68 | ##### currentIndex
69 |
70 | Position of the pacman. Start at 0. _required_
71 |
72 | ##### onClick
73 |
74 | Function to call when clicking on a dot. _optional_, it takes 3 arguments:
75 | * index of the dot clicked
76 | * whether it was pacman which was clicked or not
77 | * the event
78 |
79 | ```
80 | handleClickPacman(index, isPacman, e) {
81 | e.preventDefault();
82 | this.setState({currentIndex: index});
83 | }
84 | ```
85 |
86 | ## Styles
87 |
88 | Look at [react-pacman-progress.css](https://github.com/mathieudutour/react-pacman-progress/blob/master/react-pacman-progress.css) for an idea on how to style this component.
89 |
90 | ---
91 |
92 | MIT Licensed
93 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-pacman-progress",
3 | "main": [
4 | "react-pacman-progress.js",
5 | "react-pacman-progress.css"
6 | ],
7 | "version": "0.2.0",
8 | "homepage": "https://github.com/mathieudutour/react-pacman-progress",
9 | "description": "Simple react.js component for a fun prgress indicator",
10 | "keywords": [
11 | "react",
12 | "progress",
13 | "pacman",
14 | "component",
15 | "javascript",
16 | "react-component"
17 | ],
18 | "authors": [
19 | "Mathieu Dutour "
20 | ],
21 | "license": "MIT",
22 | "ignore": [
23 | "**/.*",
24 | "node_modules",
25 | "bower_components",
26 | "test",
27 | "tests",
28 | "example"
29 | ],
30 | "dependencies": {
31 | "react": "^0.12.0"
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/example/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mathieudutour/react-pacman-progress/b4c326f53fe08429f1a160c7edf16e2f2e050fde/example/demo.gif
--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | react-pacman-progress example (without JSX)
5 |
6 |
32 |
33 |
34 |
35 |
36 |
37 |
85 |
86 |
87 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-pacman-progress",
3 | "version": "0.2.1",
4 | "description": "Simple react.js component for a fun prgress indicator",
5 | "main": "react-pacman-progress.js",
6 | "peerDependencies": {
7 | "react": "0.x"
8 | },
9 | "scripts": {},
10 | "repository": {
11 | "type": "git",
12 | "url": "https://github.com/mathieudutour/react-pacman-progress"
13 | },
14 | "keywords": [
15 | "react",
16 | "progress",
17 | "pacman",
18 | "component",
19 | "javascript",
20 | "react-component"
21 | ],
22 | "author": "Mathieu Dutour",
23 | "license": "MIT",
24 | "bugs": {
25 | "url": "https://github.com/mathieudutour/react-pacman-progress/issues"
26 | },
27 | "homepage": "https://github.com/mathieudutour/react-pacman-progress"
28 | }
29 |
--------------------------------------------------------------------------------
/react-pacman-progress.css:
--------------------------------------------------------------------------------
1 | .pacman-progress {
2 | position: absolute;
3 | bottom: 100px;
4 | left: 50%;
5 | transition: all 1s ease-in-out 0.2s;
6 | }
7 | .pacman {
8 | position: absolute;
9 | transition: left 0.3s ease-in-out 0.2s;
10 | width: 20px;
11 | height: 20px;
12 | transform: translate(-5px, -5px);
13 | }
14 | .pacman::before {
15 | position: absolute;
16 | content: " ";
17 | width: 20px;
18 | height: 10px;
19 | border-top-left-radius: 10px;
20 | border-top-right-radius: 10px;
21 | background: #FFF;
22 | }
23 |
24 | .pacman::after {
25 | position: absolute;
26 | content: " ";
27 | width: 20px;
28 | height: 10px;
29 | border-bottom-left-radius: 10px;
30 | border-bottom-right-radius: 10px;
31 | background: #FFF;
32 | top: 10px;
33 | }
34 |
35 | .pacman.even::before {
36 | animation: pacman-top 0.12s linear alternate both;
37 | animation-iteration-count: 10;
38 | }
39 | .pacman.even::after {
40 | animation: pacman-bottom 0.12s linear alternate both;
41 | animation-iteration-count: 10;
42 | }
43 | .pacman.odd::before {
44 | animation: pacman-top-bis 0.12s linear alternate both;
45 | animation-iteration-count: 10;
46 | }
47 | .pacman.odd::after {
48 | animation: pacman-bottom-bis 0.12s linear alternate both;
49 | animation-iteration-count: 10;
50 | }
51 |
52 | .point {
53 | position: absolute;
54 | float: left;
55 | background: transparent;
56 | width: 10px;
57 | height: 10px;
58 | border-width: 2px;
59 | border-style: solid;
60 | border-color: #FFF;
61 | border-radius: 50%;
62 | transition: all 0.01s ease-out 0.4s;
63 | }
64 | .point.current {
65 | opacity: 0;
66 | background: #FFF;
67 | }
68 | .point.done {
69 | display: none;
70 | }
71 |
72 | @keyframes pacman-top {
73 | 0% {transform: rotateZ(0deg);}
74 | 100% {transform: rotateZ(-30deg);}
75 | }
76 | @keyframes pacman-top-bis {
77 | 0% {transform: rotateZ(0deg);}
78 | 100% {transform: rotateZ(-30deg);}
79 | }
80 | @keyframes pacman-bottom {
81 | 0% {transform: rotateZ(0deg);}
82 | 100% {transform: rotateZ(30deg);}
83 | }
84 | @keyframes pacman-bottom-bis {
85 | 0% {transform: rotateZ(0deg);}
86 | 100% {transform: rotateZ(30deg);}
87 | }
88 |
--------------------------------------------------------------------------------
/react-pacman-progress.js:
--------------------------------------------------------------------------------
1 | ;(function (root, factory) {
2 | if (typeof module !== 'undefined' && module.exports) {
3 | module.exports = factory(require('react'));
4 | } else if (typeof define === 'function' && define.amd) {
5 | define(['react'], factory);
6 | } else {
7 | root.PacmanProgress = factory(root.React);
8 | }
9 | })(this, function componentFactory(React) {
10 | var PacmanProgress = React.createClass({displayName: 'PacmanProgress',
11 | propTypes: {
12 | classNamespace: React.PropTypes.string,
13 | items: React.PropTypes.number.isRequired,
14 | currentIndex: React.PropTypes.number.isRequired,
15 | onClick: React.PropTypes.func
16 | },
17 |
18 | getDefaultProps: function() {
19 | return {
20 | classNamespace: '',
21 | onClick: function() {}
22 | };
23 | },
24 |
25 | getPacmanClass() {
26 | return this.props.classNamespace +
27 | 'pacman ' +
28 | this.props.classNamespace +
29 | (this.props.currentIndex % 2 ? 'odd' : 'even');
30 | },
31 |
32 | getProgressClass() {
33 | const className = [this.props.classNamespace + 'pacman-progress'];
34 | if (this.props.currentIndex >= this.props.items) {
35 | className.push(this.props.classNamespace + 'complete');
36 | } else {
37 | className.push(this.props.classNamespace + 'not-complete');
38 | }
39 | return className.join(' ');
40 | },
41 |
42 | getPointClass(i) {
43 | const className = [this.props.classNamespace + 'point'];
44 | if (this.props.currentIndex > i) {
45 | className.push(this.props.classNamespace + 'done');
46 | } else if (this.props.currentIndex === i) {
47 | className.push(this.props.classNamespace + 'current');
48 | } else {
49 | className.push(this.props.classNamespace + 'not-done');
50 | }
51 | return className.join(' ');
52 | },
53 |
54 | getPointPosition(i) {
55 | const position = {
56 | top: '-5px',
57 | left: (5 + 20 * (i - this.props.items / 2)) + 'px'
58 | };
59 | return position;
60 | },
61 |
62 | render: function() {
63 | return (
64 | React.createElement('div', {className: this.getProgressClass()},
65 | React.createElement('div', {
66 | className: this.getPacmanClass(),
67 | style: this.getPointPosition(this.props.currentIndex),
68 | onClick: this.props.onClick.bind(this, this.props.currentIndex, true)
69 | }),
70 | Array.apply(null, Array(this.props.items)).map(function(item, i) {
71 | return (
72 | React.createElement('div', {
73 | className: this.getPointClass(i),
74 | style: this.getPointPosition(i),
75 | key: 'pacman-progress-' + i,
76 | onClick: this.props.onClick.bind(this, i, false)
77 | })
78 | );
79 | }.bind(this))
80 | )
81 | );
82 | }
83 | });
84 |
85 | return PacmanProgress;
86 | });
87 |
--------------------------------------------------------------------------------