Skip to content
This repository was archived by the owner on Sep 1, 2020. It is now read-only.

Commit 27e8012

Browse files
vkbansalvkbansal
committed
init
temp temp
0 parents  commit 27e8012

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+1478
-0
lines changed

‎.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"stage": 1
3+
}

‎.eslintrc

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
{
2+
"plugins": [
3+
"react"
4+
],
5+
"parser": "babel-eslint",
6+
"ecmaFeatures": {
7+
"arrowFunctions": true,
8+
"blockBindings": true,
9+
"classes": true,
10+
"defaultParams": true,
11+
"destructuring": true,
12+
"forOf": true,
13+
"objectLiteralComputedProperties": true,
14+
"objectLiteralShorthandMethods": true,
15+
"objectLiteralShorthandProperties": true,
16+
"restParams": true,
17+
"spread": true,
18+
"superInFunctions": true,
19+
"templateStrings": true,
20+
"jsx": true
21+
},
22+
"env": {
23+
"browser": true,
24+
"node": true,
25+
"jasmine": true,
26+
"jquery": true,
27+
"es6": true
28+
},
29+
"globals": {
30+
"If": true
31+
},
32+
"rules": {
33+
"strict": [2, "global"],
34+
"block-scoped-var": 2,
35+
"curly": 2,
36+
"dot-notation": [2, {
37+
"allowKeywords": false,
38+
"allowPattern": "^[a-z]+(_[a-z]+)+$"
39+
}],
40+
"guard-for-in": 2,
41+
"no-else-return": 2,
42+
"wrap-iife": [2, "inside"],
43+
"no-throw-literal": 2,
44+
"indent": [2, 4, {"indentSwitchCase": true}],
45+
"brace-style": [2, "1tbs", { "allowSingleLine": true }],
46+
"camelcase": 2,
47+
"eol-last": 2,
48+
"new-cap": [2, {
49+
"newIsCap": true,
50+
"capIsNew": false
51+
}],
52+
"no-mixed-spaces-and-tabs": 2,
53+
"no-multiple-empty-lines": [1, {"max": 2}],
54+
"no-space-before-semi": 2,
55+
"no-spaced-func": 2,
56+
"no-trailing-spaces": 2,
57+
"no-underscore-dangle": 0,
58+
"no-wrap-func": 2,
59+
"no-var": 2,
60+
"object-shorthand": [2, "always"],
61+
"operator-assignment": [2, "always"],
62+
"prefer-const": 0,
63+
"semi": [2, "always"],
64+
"space-before-function-paren": [2, {"anonymous": "always", "named": "never"}],
65+
"space-in-parens": [2, "never"],
66+
"space-infix-ops": 2,
67+
"space-return-throw-case": 2,
68+
"space-unary-ops": [2, {"words": true, "nonwords": false}],
69+
"react/display-name": 1,
70+
"react/jsx-quotes": [2, "double"],
71+
"react/jsx-no-undef": 1,
72+
"react/jsx-uses-react": 1,
73+
"react/jsx-uses-vars": 1,
74+
"react/no-did-mount-set-state": [1, "allowed-in-func"],
75+
"react/no-did-update-set-state": 1,
76+
"react/no-multi-comp": 1,
77+
"react/no-unknown-property": 1,
78+
"react/prop-types": 0,
79+
"react/react-in-jsx-scope": 1,
80+
"react/self-closing-comp": 1,
81+
"react/sort-comp": 1,
82+
"react/wrap-multilines": 1
83+
}
84+
}

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules/
2+
bundle.js
3+
index.html

‎CHANGELOG.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Changelog
2+
3+
All the changes can be found below. Order used:
4+
5+
- Added
6+
- Changed
7+
- Deprecated
8+
- Removed
9+
- Fixed
10+
- Security
11+
12+
## v0.1.0
13+
14+
- Initial Release

‎LICENSE.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2015 Vivek Kumar Bansal
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
# React ContextMenu
2+
3+
ContextMenu in React.
4+
5+
## Installation
6+
7+
```
8+
npm install --save react-contextmenu
9+
```
10+
11+
## Usage
12+
13+
You need to setup two things:
14+
1. The `ContextMenu`
15+
2. The Component on which the `ContextMenu` must be invoked.
16+
17+
```jsx
18+
import { ContextMenu, MenuItem, ContextMenuLayer } from "react-contextmenu";
19+
20+
//Component on which context-menu must be triggred
21+
const MyComponent = ContextMenuLayer("some_unique_identifier", (props) => {
22+
return {
23+
prop1: props.myProp
24+
};
25+
})(React.createClass({
26+
render() {
27+
<div className="well"></div>
28+
}
29+
}));
30+
31+
//The context-menu to be triggered
32+
const MyContextMenu = React.createClass({
33+
render() {
34+
<ContextMenu identifier="some_unique_identifier" currentItem={this.currentItem}>
35+
<MenuItem data={"some_data"} onSelect={this.handleSelect}>
36+
ContextMenu Item 1
37+
</MenuItem>
38+
<MenuItem data={"some_data"} onSelect={this.handleSelect}>
39+
ContextMenu Item 2
40+
</MenuItem>
41+
<MenuItem divider />
42+
<MenuItem data={"some_data"} onSelect={this.handleSelect}>
43+
ContextMenu Item 3
44+
</MenuItem>
45+
</ContextMenu>
46+
},
47+
handleSelect(data, item) {
48+
console.log(data, item);
49+
}
50+
});
51+
52+
const MyApp = React.createClass({
53+
render() {
54+
<div>
55+
<MyComponent {...this.props}/>
56+
<MyContextMenu />
57+
</div>
58+
}
59+
});
60+
61+
React.render(<MyApp myProp={12}/>, document.getElementById("main"));
62+
```
63+
64+
As you can see that the `ContextMenu` to be showed on any component is dependent on a **unique identifier**.
65+
66+
The `ContextMenuLayer` decorator takes two parameters. First is the **unique identifier** (same as the one used on the `ContextMenu`) and second is a function that must return some data that will be passed on to the `onSelect` method of the `MenuItem`. This helps in identifying the component on which context click occured.
67+
68+
##Styling
69+
70+
Currently bootstrap `.dropdown-menu` styles are used for styling the menu and are not included in this package. So, do not forget to include the required css files if you are going to use this project.
71+
72+
## Credits
73+
This project is based on the ideas from [react-dnd](https://github.com/gaearon/react-dnd) by [Dan Abramov](https://github.com/gaearon).
74+
75+
## Author
76+
77+
Vivek Kumar Bansal
78+
79+
## License
80+
81+
[MIT] (./LICENSE.md)

‎dist/react-contextmenu.js

+24
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples.config.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/* eslint-disable */
2+
3+
var webpack = require("webpack");
4+
5+
module.exports = {
6+
entry: "./examples/index.js",
7+
output: {
8+
filename: "./bundle.js",
9+
},
10+
module: {
11+
loaders: [
12+
{
13+
test: /\.js$/,
14+
loaders: ["babel"],
15+
exclude: /node_modules/
16+
}
17+
]
18+
},
19+
plugins: [
20+
new webpack.optimize.OccurenceOrderPlugin(),
21+
new webpack.optimize.UglifyJsPlugin({
22+
compressor: {
23+
warnings: false
24+
}
25+
})
26+
]
27+
};

‎examples/index.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
"use strict";
2+
3+
import React from "react";
4+
import Router, { Route, RouteHandler, Redirect, Link } from "react-router";
5+
import SimpleMenu from "./simple-menu";
6+
import MultipleTargets from "./multiple-targets";
7+
import MultipleMenus from "./multiple-menus";
8+
9+
const App = React.createClass({
10+
displayName: "App",
11+
render() {
12+
return (
13+
<div className="container-fluid">
14+
<h3>React ContextMenu <small>Context menus using react</small></h3>
15+
<div className="col-xs-3">
16+
<ul className="nav nav-pills nav-stacked">
17+
<li><Link to="simple-menu">Simple Menu</Link></li>
18+
<li><Link to="multiple-targets">Multiple Targets</Link></li>
19+
<li><Link to="multiple-menus">Multiple Menus</Link></li>
20+
</ul>
21+
</div>
22+
<div className="col-xs-9" id="main">
23+
<RouteHandler/>
24+
</div>
25+
</div>
26+
);
27+
}
28+
});
29+
30+
const routes = (
31+
<Route handler={App}>
32+
<Route name="simple-menu" path="simple-menu" handler={SimpleMenu}/>
33+
<Route name="multiple-targets" path="multiple-targets" handler={MultipleTargets}/>
34+
<Route name="multiple-menus" path="multiple-menus" handler={MultipleMenus}/>
35+
<Redirect from="/" to="simple-menu"/>
36+
</Route>
37+
);
38+
39+
Router.run(routes, Router.HashLocation, (Root) => {
40+
React.render(<Root/>, document.getElementById("main"));
41+
});

‎examples/multiple-menus/constants.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export default {
2+
menu: "menu",
3+
menu2: "menu2"
4+
};

‎examples/multiple-menus/container.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
"use strict";
2+
3+
import React from "react";
4+
import Target from "./target";
5+
import MenuTypes from "./constants";
6+
7+
8+
const Container = React.createClass({
9+
displayName: "Container",
10+
render() {
11+
return (
12+
<div className="row">
13+
<div className="col-sm-6 text-center">
14+
<Target name="Target 1" menuType={MenuTypes.menu}/>
15+
</div>
16+
<div className="col-sm-6 text-center">
17+
<Target name="Target 2" menuType={MenuTypes.menu2}/>
18+
</div>
19+
</div>
20+
);
21+
}
22+
});
23+
24+
export default Container;

‎examples/multiple-menus/index.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
"use strict";
2+
3+
import React from "react";
4+
import Container from "./container";
5+
import Menu from "./menu";
6+
import Menu2 from "./menu2";
7+
8+
const MultipleMenus = React.createClass({
9+
displayName: "MultipleMenus",
10+
render() {
11+
return (
12+
<div>
13+
<h3>Multiple Menus</h3>
14+
<p>This demo shows usage of multiple menus on multiple targets.</p>
15+
<Container />
16+
<Menu/>
17+
<Menu2 />
18+
</div>
19+
);
20+
}
21+
});
22+
23+
export default MultipleMenus;

‎examples/multiple-menus/menu.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
"use strict";
2+
3+
import React from "react";
4+
import { ContextMenu, MenuItem } from "../../src";
5+
import MenuTypes from "./constants";
6+
7+
const Menu = React.createClass({
8+
displayName: "Menu",
9+
handleClick(data) {
10+
window.alert(`Clicked on menu 1 ${data.item} on ${data.name}`);
11+
},
12+
render() {
13+
return (
14+
<ContextMenu identifier={MenuTypes.menu}>
15+
<MenuItem onSelect={this.handleClick} data={{item: "item 1"}}>Menu 1 Item 1</MenuItem>
16+
<MenuItem onSelect={this.handleClick} data={{item: "item 2"}}>Menu 1 Item 2</MenuItem>
17+
</ContextMenu>
18+
);
19+
}
20+
});
21+
22+
export default Menu;

‎examples/multiple-menus/menu2.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
"use strict";
2+
3+
import React from "react";
4+
import { ContextMenu, MenuItem } from "../../src";
5+
import MenuTypes from "./constants";
6+
7+
const Menu2 = React.createClass({
8+
displayName: "Menu2",
9+
handleClick(data) {
10+
window.alert(`Clicked on menu 2 ${data.item} on ${data.name}`);
11+
},
12+
render() {
13+
return (
14+
<ContextMenu identifier={MenuTypes.menu2}>
15+
<MenuItem onSelect={this.handleClick} data={{item: "item 1"}}>Menu 2 Item 1</MenuItem>
16+
<MenuItem onSelect={this.handleClick} data={{item: "item 2"}}>Menu 2 Item 2</MenuItem>
17+
</ContextMenu>
18+
);
19+
}
20+
});
21+
22+
export default Menu2;

0 commit comments

Comments
 (0)