voronianski/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNext Bin Sketch</title>

  <script src="https://fb.me/react-0.14.8.min.js"></script>
  <script src="https://fb.me/react-dom-0.14.8.min.js"></script>
  <script src="https://npmcdn.com/swipe-js-iso@2.0.3/swipe.min.js"></script>
  <script src="https://npmcdn.com/react-swipe@5.0.8/dist/react-swipe.js"></script>

  <style>
    body {
      background: #f3f3f3;
      font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
      text-align: center;
      -webkit-text-size-adjust: none;
    }

    .carousel .item {
      background: #fff;
      overflow: hidden;
      line-height: 214px;
      height: 214px;
    }
  </style>
</head>
<body>
  <div id="app"></div>
</body>
</html>

## index.js
// ReactSwipe.js - Swipe.js as a React component
// https://github.com/voronianski/react-swipe
// NOTE: all dependencies in this example are loaded in HTML tab as scripts

class Carousel extends React.Component {
  constructor() {
    super();

    this.state = {
      conditionalFlag: false
    };
  }

  componentDidUpdate(prevProps, prevState) {
    // due to buggy iframe behavior
    window.dispatchEvent(new Event('resize'));
  }

  next() {
    this.refs.reactSwipe.next();
  }

  prev() {
    this.refs.reactSwipe.prev();
  }

  render() {
    return (
      <div>
        <ReactSwipe ref="reactSwipe" className="carousel">
          {
            this.state.conditionalFlag &&
              <span>CONDITIONAL TEST</span>
          }
          <span>TEST</span>
          <span>TEST2</span>
        </ReactSwipe>

        <div>
          <button type="button" onClick={::this.prev}>Prev</button>
          <button type="button" onClick={::this.next}>Next</button>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Carousel />,
  document.getElementById('app')
);

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "babel-runtime": "6.22.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);

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

// ReactSwipe.js - Swipe.js as a React component
// https://github.com/voronianski/react-swipe
// NOTE: all dependencies in this example are loaded in HTML tab as scripts

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

  function Carousel() {
    (0, _classCallCheck3.default)(this, Carousel);

    var _this = (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(Carousel).call(this));

    _this.state = {
      conditionalFlag: false
    };
    return _this;
  }

  (0, _createClass3.default)(Carousel, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState) {
      // due to buggy iframe behavior
      window.dispatchEvent(new Event('resize'));
    }
  }, {
    key: "next",
    value: function next() {
      this.refs.reactSwipe.next();
    }
  }, {
    key: "prev",
    value: function prev() {
      this.refs.reactSwipe.prev();
    }
  }, {
    key: "render",
    value: function render() {
      return React.createElement(
        "div",
        null,
        React.createElement(
          ReactSwipe,
          { ref: "reactSwipe", className: "carousel" },
          this.state.conditionalFlag && React.createElement(
            "span",
            null,
            "CONDITIONAL TEST"
          ),
          React.createElement(
            "span",
            null,
            "TEST"
          ),
          React.createElement(
            "span",
            null,
            "TEST2"
          )
        ),
        React.createElement(
          "div",
          null,
          React.createElement(
            "button",
            { type: "button", onClick: this.prev.bind(this) },
            "Prev"
          ),
          React.createElement(
            "button",
            { type: "button", onClick: this.next.bind(this) },
            "Next"
          )
        )
      );
    }
  }]);
  return Carousel;
}(React.Component);

ReactDOM.render(React.createElement(Carousel, null), document.getElementById('app'));
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNext Bin Sketch</title>

	<script src="https://fb.me/react-0.14.8.min.js"></script>
	<script src="https://fb.me/react-dom-0.14.8.min.js"></script>
	<script src="https://npmcdn.com/swipe-js-iso@2.0.3/swipe.min.js"></script>
	<script src="https://npmcdn.com/react-swipe@5.0.8/dist/react-swipe.js"></script>

	<style>
	body {
	background: #f3f3f3;
	font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	text-align: center;
	-webkit-text-size-adjust: none;
	}

	.carousel .item {
	background: #fff;
	overflow: hidden;
	line-height: 214px;
	height: 214px;
	}
	</style>
	</head>
	<body>
	<div id="app"></div>
	</body>
	</html>
	// ReactSwipe.js - Swipe.js as a React component
	// https://github.com/voronianski/react-swipe
	// NOTE: all dependencies in this example are loaded in HTML tab as scripts

	class Carousel extends React.Component {
	constructor() {
	super();

	this.state = {
	conditionalFlag: false
	};
	}

	componentDidUpdate(prevProps, prevState) {
	// due to buggy iframe behavior
	window.dispatchEvent(new Event('resize'));
	}

	next() {
	this.refs.reactSwipe.next();
	}

	prev() {
	this.refs.reactSwipe.prev();
	}

	render() {
	return (
	<div>
	<ReactSwipe ref="reactSwipe" className="carousel">
	{
	this.state.conditionalFlag &&
	<span>CONDITIONAL TEST</span>
	}
	<span>TEST</span>
	<span>TEST2</span>
	</ReactSwipe>

	<div>
	<button type="button" onClick={::this.prev}>Prev</button>
	<button type="button" onClick={::this.next}>Next</button>
	</div>
	</div>
	);
	}
	}

	ReactDOM.render(
	<Carousel />,
	document.getElementById('app')
	);
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"babel-runtime": "6.22.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);

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

	// ReactSwipe.js - Swipe.js as a React component
	// https://github.com/voronianski/react-swipe
	// NOTE: all dependencies in this example are loaded in HTML tab as scripts

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

	function Carousel() {
	(0, _classCallCheck3.default)(this, Carousel);

	var _this = (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(Carousel).call(this));

	_this.state = {
	conditionalFlag: false
	};
	return _this;
	}

	(0, _createClass3.default)(Carousel, [{
	key: "componentDidUpdate",
	value: function componentDidUpdate(prevProps, prevState) {
	// due to buggy iframe behavior
	window.dispatchEvent(new Event('resize'));
	}
	}, {
	key: "next",
	value: function next() {
	this.refs.reactSwipe.next();
	}
	}, {
	key: "prev",
	value: function prev() {
	this.refs.reactSwipe.prev();
	}
	}, {
	key: "render",
	value: function render() {
	return React.createElement(
	"div",
	null,
	React.createElement(
	ReactSwipe,
	{ ref: "reactSwipe", className: "carousel" },
	this.state.conditionalFlag && React.createElement(
	"span",
	null,
	"CONDITIONAL TEST"
	),
	React.createElement(
	"span",
	null,
	"TEST"
	),
	React.createElement(
	"span",
	null,
	"TEST2"
	)
	),
	React.createElement(
	"div",
	null,
	React.createElement(
	"button",
	{ type: "button", onClick: this.prev.bind(this) },
	"Prev"
	),
	React.createElement(
	"button",
	{ type: "button", onClick: this.next.bind(this) },
	"Next"
	)
	)
	);
	}
	}]);
	return Carousel;
	}(React.Component);

	ReactDOM.render(React.createElement(Carousel, null), document.getElementById('app'));