tiansijie/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
  <!-- put additional styles and scripts here -->
</head>
<body>
  <div id="container"></div>
  <!-- put markup and other contents here -->
</body>
</html>

## index.js
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
import React from "react";
import ReactDOM from "react-dom";
import ToolTip from 'react-portal-tooltip';
import InfinityMenu from "react-infinity-menu";
//import "react-infinity-menu/src/infinity-menu.css";

class ListService extends React.Component {

    state = {
      isTooltipActive: false,
      toolTipParent: ""
    }

    componentWillMount() {
      this.setState({
        toolTipParent: "#" + this.getTooltipID()
      })
    }

    getTooltipID = () => {
      var id = "toolTip_" + this.props.data.id;
      return id;
    }

    render() {
      let style = {
        style: {
          margin: "auto",
          width: "90%",
          maxWidth: "220px",
          left: 0,
          right:0
        },
        arrowStyle: {
          color: '#ffffff'
        }
      }

      return (
        <div>
          <ToolTip active={this.state.isTooltipActive} position="top" arrow="right" parent={this.state.toolTipParent} style={style}>
              <div>
                  <p>This is the content of the tooltip {this.getTooltipID()}</p>
                  <img src="image.png"/>
              </div>
          </ToolTip>
          <div className="ServiceMenuService" onClick={this.props.onClick} >

              <span className="ServiceTitle">{this.props.name}</span>
              <FontIcon
                id={this.getTooltipID()}
                onClick={()=>this.setState({isTooltipActive: !this.state.isTooltipActive})}
              >info_outline</FontIcon>
          </div>
        </div>

      );

    }
}


const tree = [
	{
		name: "menu1", /*require*/
		id: 1, /*require*/
		isOpen: true, /*require*/
		customComponent: ListService,
		children: [
			{
				name: "submenu1",
				id: 1,
				isOpen: true,
				customComponent: ListService,
				children: [
					{
						name: "item1-1",
						id: 1
					},
					{
						name: "item1-2",
						id: 2
					}
				]
			},
			{
				name: "submenu2",
				id: 2,
				isOpen: true,
				customComponent: ListService,
				children: [
					{
						name: "item2-1",
						id: 1
					}
				]
			}
		]
	},
	{
		name: "menu2", /*require*/
		id: 2, /*require*/
		isOpen: true, /*require*/
		customComponent: ListService,
		children: [
			{
				name: "item3-1",
				id: 1
			}
		]
	}
];

class Example extends React.Component {
  state = {
    tree: tree
  };

	onNodeMouseClick(event, tree, node, level, keyPath) {
		this.setState({
			tree: tree
		});
	}

	onLeafMouseClick(event, leaf) {
		console.log( leaf.id ); // Prints the leaf id
		console.log( leaf.name ); // Prints the leaf name
	}

	onLeafMouseUp(event, leaf) {
		console.log( leaf.id ); // Prints the leaf id
		console.log( leaf.name ); // Prints the leaf name
	}

	onLeafMouseDown(event, leaf) {
		console.log( leaf.id ); // Prints the leaf id
		console.log( leaf.name ); // Prints the leaf name
	}

	render() {
		return (
			<InfinityMenu
				tree={this.state.tree}
				onNodeMouseClick={this.onNodeMouseClick}
				onLeafMouseClick={this.onLeafMouseClick}/*optional*/
				onLeafMouseDown={this.onLeafMouseDown}/*optional*/
				onLeafMouseUp={this.onLeafMouseUp}/*optional*/
				maxLeaves={5}/*optional*/
			/>
		);
	}
}


ReactDOM.render(
  <Example />,
  document.getElementById('container')
);

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "babel-runtime": "6.23.0",
    "react": "15.6.0",
    "react-portal-tooltip": "1.1.5",
    "react-infinity-menu": "3.2.0",
    "react-dom": "15.6.0"
  }
}

## transpiled.js
"use strict";

var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require("babel-runtime/helpers/createClass");

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require("babel-runtime/helpers/inherits");

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _reactDom = require("react-dom");

var _reactDom2 = _interopRequireDefault(_reactDom);

var _reactPortalTooltip = require("react-portal-tooltip");

var _reactPortalTooltip2 = _interopRequireDefault(_reactPortalTooltip);

var _reactInfinityMenu = require("react-infinity-menu");

var _reactInfinityMenu2 = _interopRequireDefault(_reactInfinityMenu);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

//import "react-infinity-menu/src/infinity-menu.css";

// write ES2015 code and import modules from npm
// and then press "Execute" to run your program

var ListService = function (_React$Component) {
	(0, _inherits3.default)(ListService, _React$Component);

	function ListService() {
		var _Object$getPrototypeO;

		var _temp, _this, _ret;

		(0, _classCallCheck3.default)(this, ListService);

		for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
			args[_key] = arguments[_key];
		}

		return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_Object$getPrototypeO = (0, _getPrototypeOf2.default)(ListService)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
			isTooltipActive: false,
			toolTipParent: ""
		}, _this.getTooltipID = function () {
			var id = "toolTip_" + _this.props.data.id;
			return id;
		}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
	}

	(0, _createClass3.default)(ListService, [{
		key: "componentWillMount",
		value: function componentWillMount() {
			this.setState({
				toolTipParent: "#" + this.getTooltipID()
			});
		}
	}, {
		key: "render",
		value: function render() {
			var _this2 = this;

			var style = {
				style: {
					margin: "auto",
					width: "90%",
					maxWidth: "220px",
					left: 0,
					right: 0
				},
				arrowStyle: {
					color: '#ffffff'
				}
			};

			return _react2.default.createElement(
				"div",
				null,
				_react2.default.createElement(
					_reactPortalTooltip2.default,
					{ active: this.state.isTooltipActive, position: "top", arrow: "right", parent: this.state.toolTipParent, style: style },
					_react2.default.createElement(
						"div",
						null,
						_react2.default.createElement(
							"p",
							null,
							"This is the content of the tooltip ",
							this.getTooltipID()
						),
						_react2.default.createElement("img", { src: "image.png" })
					)
				),
				_react2.default.createElement(
					"div",
					{ className: "ServiceMenuService", onClick: this.props.onClick },
					_react2.default.createElement(
						"span",
						{ className: "ServiceTitle" },
						this.props.name
					),
					_react2.default.createElement(
						FontIcon,
						{
							id: this.getTooltipID(),
							onClick: function onClick() {
								return _this2.setState({ isTooltipActive: !_this2.state.isTooltipActive });
							}
						},
						"info_outline"
					)
				)
			);
		}
	}]);
	return ListService;
}(_react2.default.Component);

var tree = [{
	name: "menu1", /*require*/
	id: 1, /*require*/
	isOpen: true, /*require*/
	customComponent: ListService,
	children: [{
		name: "submenu1",
		id: 1,
		isOpen: true,
		customComponent: ListService,
		children: [{
			name: "item1-1",
			id: 1
		}, {
			name: "item1-2",
			id: 2
		}]
	}, {
		name: "submenu2",
		id: 2,
		isOpen: true,
		customComponent: ListService,
		children: [{
			name: "item2-1",
			id: 1
		}]
	}]
}, {
	name: "menu2", /*require*/
	id: 2, /*require*/
	isOpen: true, /*require*/
	customComponent: ListService,
	children: [{
		name: "item3-1",
		id: 1
	}]
}];

var Example = function (_React$Component2) {
	(0, _inherits3.default)(Example, _React$Component2);

	function Example() {
		var _Object$getPrototypeO2;

		var _temp2, _this3, _ret2;

		(0, _classCallCheck3.default)(this, Example);

		for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
			args[_key2] = arguments[_key2];
		}

		return _ret2 = (_temp2 = (_this3 = (0, _possibleConstructorReturn3.default)(this, (_Object$getPrototypeO2 = (0, _getPrototypeOf2.default)(Example)).call.apply(_Object$getPrototypeO2, [this].concat(args))), _this3), _this3.state = {
			tree: tree
		}, _temp2), (0, _possibleConstructorReturn3.default)(_this3, _ret2);
	}

	(0, _createClass3.default)(Example, [{
		key: "onNodeMouseClick",
		value: function onNodeMouseClick(event, tree, node, level, keyPath) {
			this.setState({
				tree: tree
			});
		}
	}, {
		key: "onLeafMouseClick",
		value: function onLeafMouseClick(event, leaf) {
			console.log(leaf.id); // Prints the leaf id
			console.log(leaf.name); // Prints the leaf name
		}
	}, {
		key: "onLeafMouseUp",
		value: function onLeafMouseUp(event, leaf) {
			console.log(leaf.id); // Prints the leaf id
			console.log(leaf.name); // Prints the leaf name
		}
	}, {
		key: "onLeafMouseDown",
		value: function onLeafMouseDown(event, leaf) {
			console.log(leaf.id); // Prints the leaf id
			console.log(leaf.name); // Prints the leaf name
		}
	}, {
		key: "render",
		value: function render() {
			return _react2.default.createElement(_reactInfinityMenu2.default, {
				tree: this.state.tree,
				onNodeMouseClick: this.onNodeMouseClick,
				onLeafMouseClick: this.onLeafMouseClick /*optional*/
				, onLeafMouseDown: this.onLeafMouseDown /*optional*/
				, onLeafMouseUp: this.onLeafMouseUp /*optional*/
				, maxLeaves: 5 /*optional*/
			});
		}
	}]);
	return Example;
}(_react2.default.Component);

_reactDom2.default.render(_react2.default.createElement(Example, null), document.getElementById('container'));
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<!-- put additional styles and scripts here -->
	</head>
	<body>
	<div id="container"></div>
	<!-- put markup and other contents here -->
	</body>
	</html>
	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program
	import React from "react";
	import ReactDOM from "react-dom";
	import ToolTip from 'react-portal-tooltip';
	import InfinityMenu from "react-infinity-menu";
	//import "react-infinity-menu/src/infinity-menu.css";

	class ListService extends React.Component {

	state = {
	isTooltipActive: false,
	toolTipParent: ""
	}

	componentWillMount() {
	this.setState({
	toolTipParent: "#" + this.getTooltipID()
	})
	}

	getTooltipID = () => {
	var id = "toolTip_" + this.props.data.id;
	return id;
	}

	render() {
	let style = {
	style: {
	margin: "auto",
	width: "90%",
	maxWidth: "220px",
	left: 0,
	right:0
	},
	arrowStyle: {
	color: '#ffffff'
	}
	}

	return (
	<div>
	<ToolTip active={this.state.isTooltipActive} position="top" arrow="right" parent={this.state.toolTipParent} style={style}>
	<div>
	<p>This is the content of the tooltip {this.getTooltipID()}</p>
	<img src="image.png"/>
	</div>
	</ToolTip>
	<div className="ServiceMenuService" onClick={this.props.onClick} >

	<span className="ServiceTitle">{this.props.name}</span>
	<FontIcon
	id={this.getTooltipID()}
	onClick={()=>this.setState({isTooltipActive: !this.state.isTooltipActive})}
	>info_outline</FontIcon>
	</div>
	</div>

	);

	}
	}


	const tree = [
	{
	name: "menu1", /require/
	id: 1, /require/
	isOpen: true, /require/
	customComponent: ListService,
	children: [
	{
	name: "submenu1",
	id: 1,
	isOpen: true,
	customComponent: ListService,
	children: [
	{
	name: "item1-1",
	id: 1
	},
	{
	name: "item1-2",
	id: 2
	}
	]
	},
	{
	name: "submenu2",
	id: 2,
	isOpen: true,
	customComponent: ListService,
	children: [
	{
	name: "item2-1",
	id: 1
	}
	]
	}
	]
	},
	{
	name: "menu2", /require/
	id: 2, /require/
	isOpen: true, /require/
	customComponent: ListService,
	children: [
	{
	name: "item3-1",
	id: 1
	}
	]
	}
	];

	class Example extends React.Component {
	state = {
	tree: tree
	};

	onNodeMouseClick(event, tree, node, level, keyPath) {
	this.setState({
	tree: tree
	});
	}

	onLeafMouseClick(event, leaf) {
	console.log( leaf.id ); // Prints the leaf id
	console.log( leaf.name ); // Prints the leaf name
	}

	onLeafMouseUp(event, leaf) {
	console.log( leaf.id ); // Prints the leaf id
	console.log( leaf.name ); // Prints the leaf name
	}

	onLeafMouseDown(event, leaf) {
	console.log( leaf.id ); // Prints the leaf id
	console.log( leaf.name ); // Prints the leaf name
	}

	render() {
	return (
	<InfinityMenu
	tree={this.state.tree}
	onNodeMouseClick={this.onNodeMouseClick}
	onLeafMouseClick={this.onLeafMouseClick}/optional/
	onLeafMouseDown={this.onLeafMouseDown}/optional/
	onLeafMouseUp={this.onLeafMouseUp}/optional/
	maxLeaves={5}/optional/
	/>
	);
	}
	}


	ReactDOM.render(
	<Example />,
	document.getElementById('container')
	);
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"babel-runtime": "6.23.0",
	"react": "15.6.0",
	"react-portal-tooltip": "1.1.5",
	"react-infinity-menu": "3.2.0",
	"react-dom": "15.6.0"
	}
	}
	"use strict";

	var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");

	var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

	var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

	var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

	var _createClass2 = require("babel-runtime/helpers/createClass");

	var _createClass3 = _interopRequireDefault(_createClass2);

	var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

	var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

	var _inherits2 = require("babel-runtime/helpers/inherits");

	var _inherits3 = _interopRequireDefault(_inherits2);

	var _react = require("react");

	var _react2 = _interopRequireDefault(_react);

	var _reactDom = require("react-dom");

	var _reactDom2 = _interopRequireDefault(_reactDom);

	var _reactPortalTooltip = require("react-portal-tooltip");

	var _reactPortalTooltip2 = _interopRequireDefault(_reactPortalTooltip);

	var _reactInfinityMenu = require("react-infinity-menu");

	var _reactInfinityMenu2 = _interopRequireDefault(_reactInfinityMenu);

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	//import "react-infinity-menu/src/infinity-menu.css";

	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program

	var ListService = function (_React$Component) {
	(0, _inherits3.default)(ListService, _React$Component);

	function ListService() {
	var _Object$getPrototypeO;

	var _temp, _this, _ret;

	(0, _classCallCheck3.default)(this, ListService);

	for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
	args[_key] = arguments[_key];
	}

	return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_Object$getPrototypeO = (0, _getPrototypeOf2.default)(ListService)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
	isTooltipActive: false,
	toolTipParent: ""
	}, _this.getTooltipID = function () {
	var id = "toolTip_" + _this.props.data.id;
	return id;
	}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
	}

	(0, _createClass3.default)(ListService, [{
	key: "componentWillMount",
	value: function componentWillMount() {
	this.setState({
	toolTipParent: "#" + this.getTooltipID()
	});
	}
	}, {
	key: "render",
	value: function render() {
	var _this2 = this;

	var style = {
	style: {
	margin: "auto",
	width: "90%",
	maxWidth: "220px",
	left: 0,
	right: 0
	},
	arrowStyle: {
	color: '#ffffff'
	}
	};

	return _react2.default.createElement(
	"div",
	null,
	_react2.default.createElement(
	_reactPortalTooltip2.default,
	{ active: this.state.isTooltipActive, position: "top", arrow: "right", parent: this.state.toolTipParent, style: style },
	_react2.default.createElement(
	"div",
	null,
	_react2.default.createElement(
	"p",
	null,
	"This is the content of the tooltip ",
	this.getTooltipID()
	),
	_react2.default.createElement("img", { src: "image.png" })
	)
	),
	_react2.default.createElement(
	"div",
	{ className: "ServiceMenuService", onClick: this.props.onClick },
	_react2.default.createElement(
	"span",
	{ className: "ServiceTitle" },
	this.props.name
	),
	_react2.default.createElement(
	FontIcon,
	{
	id: this.getTooltipID(),
	onClick: function onClick() {
	return _this2.setState({ isTooltipActive: !_this2.state.isTooltipActive });
	}
	},
	"info_outline"
	)
	)
	);
	}
	}]);
	return ListService;
	}(_react2.default.Component);

	var tree = [{
	name: "menu1", /require/
	id: 1, /require/
	isOpen: true, /require/
	customComponent: ListService,
	children: [{
	name: "submenu1",
	id: 1,
	isOpen: true,
	customComponent: ListService,
	children: [{
	name: "item1-1",
	id: 1
	}, {
	name: "item1-2",
	id: 2
	}]
	}, {
	name: "submenu2",
	id: 2,
	isOpen: true,
	customComponent: ListService,
	children: [{
	name: "item2-1",
	id: 1
	}]
	}]
	}, {
	name: "menu2", /require/
	id: 2, /require/
	isOpen: true, /require/
	customComponent: ListService,
	children: [{
	name: "item3-1",
	id: 1
	}]
	}];

	var Example = function (_React$Component2) {
	(0, _inherits3.default)(Example, _React$Component2);

	function Example() {
	var _Object$getPrototypeO2;

	var _temp2, _this3, _ret2;

	(0, _classCallCheck3.default)(this, Example);

	for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
	args[_key2] = arguments[_key2];
	}

	return _ret2 = (_temp2 = (_this3 = (0, _possibleConstructorReturn3.default)(this, (_Object$getPrototypeO2 = (0, _getPrototypeOf2.default)(Example)).call.apply(_Object$getPrototypeO2, [this].concat(args))), _this3), _this3.state = {
	tree: tree
	}, _temp2), (0, _possibleConstructorReturn3.default)(_this3, _ret2);
	}

	(0, _createClass3.default)(Example, [{
	key: "onNodeMouseClick",
	value: function onNodeMouseClick(event, tree, node, level, keyPath) {
	this.setState({
	tree: tree
	});
	}
	}, {
	key: "onLeafMouseClick",
	value: function onLeafMouseClick(event, leaf) {
	console.log(leaf.id); // Prints the leaf id
	console.log(leaf.name); // Prints the leaf name
	}
	}, {
	key: "onLeafMouseUp",
	value: function onLeafMouseUp(event, leaf) {
	console.log(leaf.id); // Prints the leaf id
	console.log(leaf.name); // Prints the leaf name
	}
	}, {
	key: "onLeafMouseDown",
	value: function onLeafMouseDown(event, leaf) {
	console.log(leaf.id); // Prints the leaf id
	console.log(leaf.name); // Prints the leaf name
	}
	}, {
	key: "render",
	value: function render() {
	return _react2.default.createElement(_reactInfinityMenu2.default, {
	tree: this.state.tree,
	onNodeMouseClick: this.onNodeMouseClick,
	onLeafMouseClick: this.onLeafMouseClick /optional/
	, onLeafMouseDown: this.onLeafMouseDown /optional/
	, onLeafMouseUp: this.onLeafMouseUp /optional/
	, maxLeaves: 5 /optional/
	});
	}
	}]);
	return Example;
	}(_react2.default.Component);

	_reactDom2.default.render(_react2.default.createElement(Example, null), document.getElementById('container'));