Skip to content

Instantly share code, notes, and snippets.

@terrierscript

terrierscript/esnextbin.md

Created August 25, 2016 14:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save terrierscript/4bf66ecfed2b7675c98313f67798664d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save terrierscript/4bf66ecfed2b7675c98313f67798664d to your computer and use it in GitHub Desktop.
Download ZIP
esnextbin sketch
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ESNextbin Sketch</title>
<!-- put additional styles and scripts here -->
</head>
<body>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</body>
</html>
Raw
index.js
import React, { Component } from 'react'
import { StyleSheet, css } from 'aphrodite/no-important'
import ReactDOM from 'react-dom'
const fullScreen = () => ({
height: '100%',
width: '100%',
position: 'absolute',
top: 0,
left: 0
})
const justifyParent = () => ({
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
})
const justifyChild = () => ({
width: 'auto',
position: 'absolute'
})
const style = StyleSheet.create({
container: {
...fullScreen(),
...justifyParent()
},
background: {
...fullScreen(),
opacity: 0.8,
background: '#000'
},
closeButton: {
padding: 3,
textAlign: 'right',
cursor: 'pointer',
color: 'gray'
},
dialog: {
...justifyChild(),
boxSizing: 'border-box',
backgroundColor: '#fff',
padding: 20,
borderRadius: 4,
// dialog size
minWidth: "40%",
minHeight: "40%",
}
})
const animationBase = {
animationDuration: '0.5s',
animationFillMode: 'both'
}
const fadeAnimates = [
{ opacity: 0, display:"none", visibility: "hidden" },
{ opacity: 0.001, display:"block", visibility: "visible" },
{ opacity: 1, display:"block", visibility: "visible" }
]
const fadeIn = {
"0%": fadeAnimates[0],
"0.1%": fadeAnimates[1],
"100%": fadeAnimates[2],
}
const fadeOut = {
"0%": fadeAnimates[2],
"99.9%": fadeAnimates[1],
"100%": fadeAnimates[0],
}
const fade = StyleSheet.create({
enter: {
animationDelay: '0.2s',
animationName: fadeIn,
...animationBase,
},
leave: {
animationName: fadeOut,
...animationBase,
},
})
const DialogHeader = ({onClose}) => {
return <div>
<div className={css(style.closeButton)} onClick={onClose}>× 閉じる</div>
</div>
}
const ModalBackground = (props) => {
return <div {...props} className={css(style.background)} />
}
const Dialog = ({children}) => {
return <div className={css(style.dialog)}>
{children}
</div>
}
const Modal = ({onClose, children}) => {
return (
<div className={css(style.container)}>
<ModalBackground onClick={onClose} />
<Dialog>
<DialogHeader onClose={onClose} />
{children}
</Dialog>
</div>
)
}
const FadeAnimation = ({show, onFinish, children}) => {
let fadeClass = css( show ? fade.enter : fade.leave)
return (
<div className={fadeClass} onAnimationEnd={onFinish}>
{children}
</div>
)
}
class FadeModal extends Component {
state = {
show: true,
}
handleClose = () => ( this.setState({show: false}) )
render () {
if(this.state.finished){
return <noscript/>
}
return (
<FadeAnimation show={this.state.show}>
<Modal onClose={this.handleClose}>
{this.props.children}
</Modal>
</FadeAnimation>
)
}
}
ReactDOM.render(
<FadeModal />,
document.body.appendChild(document.createElement('div'))
)
Raw
package.json
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"babel-runtime": "6.11.6",
"aphrodite": "0.5.0",
"react": "15.3.1",
"react-dom": "15.3.1"
}
}
Raw
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 _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _noImportant = require('aphrodite/no-important');
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var fullScreen = function fullScreen() {
return {
height: '100%',
width: '100%',
position: 'absolute',
top: 0,
left: 0
};
};
var justifyParent = function justifyParent() {
return {
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
};
};
var justifyChild = function justifyChild() {
return {
width: 'auto',
position: 'absolute'
};
};
var style = _noImportant.StyleSheet.create({
container: (0, _extends3.default)({}, fullScreen(), justifyParent()),
background: (0, _extends3.default)({}, fullScreen(), {
opacity: 0.8,
background: '#000'
}),
closeButton: {
padding: 3,
textAlign: 'right',
cursor: 'pointer',
color: 'gray'
},
dialog: (0, _extends3.default)({}, justifyChild(), {
boxSizing: 'border-box',
backgroundColor: '#fff',
padding: 20,
borderRadius: 4,
// dialog size
minWidth: "40%",
minHeight: "40%"
})
});
var animationBase = {
animationDuration: '0.5s',
animationFillMode: 'both'
};
var fadeAnimates = [{ opacity: 0, display: "none", visibility: "hidden" }, { opacity: 0.001, display: "block", visibility: "visible" }, { opacity: 1, display: "block", visibility: "visible" }];
var fadeIn = {
"0%": fadeAnimates[0],
"0.1%": fadeAnimates[1],
"100%": fadeAnimates[2]
};
var fadeOut = {
"0%": fadeAnimates[2],
"99.9%": fadeAnimates[1],
"100%": fadeAnimates[0]
};
var fade = _noImportant.StyleSheet.create({
enter: (0, _extends3.default)({
animationDelay: '0.2s',
animationName: fadeIn
}, animationBase),
leave: (0, _extends3.default)({
animationName: fadeOut
}, animationBase)
});
var DialogHeader = function DialogHeader(_ref) {
var onClose = _ref.onClose;
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(
'div',
{ className: (0, _noImportant.css)(style.closeButton), onClick: onClose },
'× 閉じる'
)
);
};
var ModalBackground = function ModalBackground(props) {
return _react2.default.createElement('div', (0, _extends3.default)({}, props, { className: (0, _noImportant.css)(style.background) }));
};
var Dialog = function Dialog(_ref2) {
var children = _ref2.children;
return _react2.default.createElement(
'div',
{ className: (0, _noImportant.css)(style.dialog) },
children
);
};
var Modal = function Modal(_ref3) {
var onClose = _ref3.onClose;
var children = _ref3.children;
return _react2.default.createElement(
'div',
{ className: (0, _noImportant.css)(style.container) },
_react2.default.createElement(ModalBackground, { onClick: onClose }),
_react2.default.createElement(
Dialog,
null,
_react2.default.createElement(DialogHeader, { onClose: onClose }),
children
)
);
};
var FadeAnimation = function FadeAnimation(_ref4) {
var show = _ref4.show;
var onFinish = _ref4.onFinish;
var children = _ref4.children;
var fadeClass = (0, _noImportant.css)(show ? fade.enter : fade.leave);
return _react2.default.createElement(
'div',
{ className: fadeClass, onAnimationEnd: onFinish },
children
);
};
var FadeModal = function (_Component) {
(0, _inherits3.default)(FadeModal, _Component);
function FadeModal() {
var _Object$getPrototypeO;
var _temp, _this, _ret;
(0, _classCallCheck3.default)(this, FadeModal);
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)(FadeModal)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
show: true
}, _this.handleClose = function () {
return _this.setState({ show: false });
}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
}
(0, _createClass3.default)(FadeModal, [{
key: 'render',
value: function render() {
if (this.state.finished) {
return _react2.default.createElement('noscript', null);
}
return _react2.default.createElement(
FadeAnimation,
{ show: this.state.show },
_react2.default.createElement(
Modal,
{ onClose: this.handleClose },
this.props.children
)
);
}
}]);
return FadeModal;
}(_react.Component);
_reactDom2.default.render(_react2.default.createElement(FadeModal, null), document.body.appendChild(document.createElement('div')));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment