organism-react-scroll-animate
Version:
137 lines (136 loc) • 4.51 kB
JavaScript
import _classCallCheck from "reshow-runtime/es/helpers/classCallCheck";
import _createClass from "reshow-runtime/es/helpers/createClass";
import _inherits from "reshow-runtime/es/helpers/inherits";
import _createSuper from "reshow-runtime/es/helpers/createSuper";
import _objectSpread from "reshow-runtime/es/helpers/objectSpread2";
var _BlackCircle, _WhiteCircle, _BlackCircle2, _BlackCircle3, _WhiteCircle2, _BlackCircle4, _BlackCircle5, _WhiteCircle3, _BlackCircle6;
import React, { Component } from "react";
/**
* Production please use
* import ScrollAnimate from "organism-react-scroll-animate"
*/
import ScrollAnimate from "../organisms/ScrollAnimate.mjs";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var BlackCircle = function BlackCircle(props) {
return /*#__PURE__*/_jsx(ScrollAnimate, _objectSpread(_objectSpread({}, props), {}, {
style: Styles.block,
children: /*#__PURE__*/_jsx("div", {
style: _objectSpread(_objectSpread({}, Styles.circle), {}, {
background: "#000",
color: "#fff"
}),
children: props.children
})
}));
};
var WhiteCircle = function WhiteCircle(props) {
return /*#__PURE__*/_jsx(ScrollAnimate, _objectSpread(_objectSpread({}, props), {}, {
style: Styles.block,
children: /*#__PURE__*/_jsx("div", {
style: _objectSpread(_objectSpread({}, Styles.circle), {}, {
border: "1px solid #000"
}),
children: props.children
})
}));
};
var Index = /*#__PURE__*/function (_Component) {
_inherits(Index, _Component);
var _super = _createSuper(Index);
function Index() {
_classCallCheck(this, Index);
return _super.apply(this, arguments);
}
_createClass(Index, [{
key: "render",
value: function render() {
/*
return (
<BlackCircle
key={6}
once={false}
enter="fadeOutRight-1000"
id="last"
isKeep={true}
>
6 Right (Keep)
</BlackCircle>
);
*/
return /*#__PURE__*/_jsxs("div", {
children: [/*#__PURE__*/_jsxs("div", {
style: Styles.row,
children: [_BlackCircle || (_BlackCircle = /*#__PURE__*/_jsx(BlackCircle, {
once: false,
enter: "fadeInRight-1000",
children: "0 Right"
}, 0)), _WhiteCircle || (_WhiteCircle = /*#__PURE__*/_jsx(WhiteCircle, {
once: false,
enter: "fadeInLeft-1000",
children: "1 Left"
}, 1)), _BlackCircle2 || (_BlackCircle2 = /*#__PURE__*/_jsx(BlackCircle, {
once: false,
enter: "fadeInUp-1000",
children: "2 Up"
}, 2))]
}), /*#__PURE__*/_jsxs("div", {
style: Styles.row,
children: [_BlackCircle3 || (_BlackCircle3 = /*#__PURE__*/_jsx(BlackCircle, {
once: true,
enter: "fadeInLeft-1000",
children: "3 Left (once)"
}, 3)), _WhiteCircle2 || (_WhiteCircle2 = /*#__PURE__*/_jsx(WhiteCircle, {
once: false,
enter: "fadeInDown-1000",
children: "4 Down"
}, 4)), _BlackCircle4 || (_BlackCircle4 = /*#__PURE__*/_jsx(BlackCircle, {
once: true,
enter: "fadeInRight-1000",
children: "5 Right (once)"
}, 5))]
}), /*#__PURE__*/_jsxs("div", {
style: Styles.row,
children: [_BlackCircle5 || (_BlackCircle5 = /*#__PURE__*/_jsx(BlackCircle, {
once: false,
enter: "fadeOutRight-1000",
id: "last",
isKeep: true,
children: "6 Right (Keep)"
}, 6)), _WhiteCircle3 || (_WhiteCircle3 = /*#__PURE__*/_jsx(WhiteCircle, {
once: false,
enter: "fadeOutUp-1000",
children: "7 Up"
}, 7)), _BlackCircle6 || (_BlackCircle6 = /*#__PURE__*/_jsx(BlackCircle, {
once: false,
enter: "fadeOutLeft-1000",
children: "8 Left"
}, 8))]
})]
});
}
}]);
return Index;
}(Component);
export default Index;
var size = "100px";
var Styles = {
row: {
minHeight: "200px",
marginBottom: "160px"
},
block: {
display: "inline-block",
margin: "0 50px",
minHeight: size,
minWidth: size
},
circle: {
borderRadius: "50%",
width: size,
height: size,
lineHeight: size,
textAlign: "center",
overflow: "hidden"
}
};