organism-react-scroll-animate
Version:
139 lines (138 loc) • 5.35 kB
JavaScript
;
var _interopRequireDefault = require("reshow-runtime/helpers/interopRequireDefault");
var _interopRequireWildcard = require("reshow-runtime/helpers/interopRequireWildcard");
exports.__esModule = true;
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("reshow-runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("reshow-runtime/helpers/createClass"));
var _inherits2 = _interopRequireDefault(require("reshow-runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("reshow-runtime/helpers/createSuper"));
var _objectSpread2 = _interopRequireDefault(require("reshow-runtime/helpers/objectSpread2"));
var _react = _interopRequireWildcard(require("react"));
var _ScrollAnimate = _interopRequireDefault(require("../organisms/ScrollAnimate.js"));
var _jsxRuntime = require("react/jsx-runtime");
var _BlackCircle, _WhiteCircle, _BlackCircle2, _BlackCircle3, _WhiteCircle2, _BlackCircle4, _BlackCircle5, _WhiteCircle3, _BlackCircle6;
var BlackCircle = function BlackCircle(props) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollAnimate["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
style: Styles.block,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, Styles.circle), {}, {
background: "#000",
color: "#fff"
}),
children: props.children
})
}));
};
var WhiteCircle = function WhiteCircle(props) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollAnimate["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
style: Styles.block,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, Styles.circle), {}, {
border: "1px solid #000"
}),
children: props.children
})
}));
};
var Index = /*#__PURE__*/function (_Component) {
(0, _inherits2["default"])(Index, _Component);
var _super = (0, _createSuper2["default"])(Index);
function Index() {
(0, _classCallCheck2["default"])(this, Index);
return _super.apply(this, arguments);
}
(0, _createClass2["default"])(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__*/(0, _jsxRuntime.jsxs)("div", {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
style: Styles.row,
children: [_BlackCircle || (_BlackCircle = /*#__PURE__*/(0, _jsxRuntime.jsx)(BlackCircle, {
once: false,
enter: "fadeInRight-1000",
children: "0 Right"
}, 0)), _WhiteCircle || (_WhiteCircle = /*#__PURE__*/(0, _jsxRuntime.jsx)(WhiteCircle, {
once: false,
enter: "fadeInLeft-1000",
children: "1 Left"
}, 1)), _BlackCircle2 || (_BlackCircle2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(BlackCircle, {
once: false,
enter: "fadeInUp-1000",
children: "2 Up"
}, 2))]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
style: Styles.row,
children: [_BlackCircle3 || (_BlackCircle3 = /*#__PURE__*/(0, _jsxRuntime.jsx)(BlackCircle, {
once: true,
enter: "fadeInLeft-1000",
children: "3 Left (once)"
}, 3)), _WhiteCircle2 || (_WhiteCircle2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(WhiteCircle, {
once: false,
enter: "fadeInDown-1000",
children: "4 Down"
}, 4)), _BlackCircle4 || (_BlackCircle4 = /*#__PURE__*/(0, _jsxRuntime.jsx)(BlackCircle, {
once: true,
enter: "fadeInRight-1000",
children: "5 Right (once)"
}, 5))]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
style: Styles.row,
children: [_BlackCircle5 || (_BlackCircle5 = /*#__PURE__*/(0, _jsxRuntime.jsx)(BlackCircle, {
once: false,
enter: "fadeOutRight-1000",
id: "last",
isKeep: true,
children: "6 Right (Keep)"
}, 6)), _WhiteCircle3 || (_WhiteCircle3 = /*#__PURE__*/(0, _jsxRuntime.jsx)(WhiteCircle, {
once: false,
enter: "fadeOutUp-1000",
children: "7 Up"
}, 7)), _BlackCircle6 || (_BlackCircle6 = /*#__PURE__*/(0, _jsxRuntime.jsx)(BlackCircle, {
once: false,
enter: "fadeOutLeft-1000",
children: "8 Left"
}, 8))]
})]
});
}
}]);
return Index;
}(_react.Component);
var _default = Index;
exports["default"] = _default;
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"
}
};
module.exports = exports.default;