organism-react-scroll-nav
Version:
A React scroll spy library with flux
173 lines (171 loc) • 4.78 kB
JavaScript
import _objectSpread from "reshow-runtime/es/helpers/objectSpread2";
import _objectWithoutProperties from "reshow-runtime/es/helpers/objectWithoutProperties";
var _excluded = ["targetInfo", "style"];
// @ts-check
import { Checkbox } from "react-atomic-organism";
import { useLazyInject } from "react-atomic-molecule";
import * as React from "react";
var {
useState
} = React;
/**
* Production please use
* import {xxx} from 'organism-react-scroll-nav';
*/
import ScrollSpy from "../organisms/ScrollSpy.mjs";
import ScrollReceiver from "../organisms/ScrollReceiver.mjs";
import SmoothScrollLink from "../organisms/SmoothScrollLink.mjs";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var MenuItem = function MenuItem(_ref) {
var {
targetInfo,
style
} = _ref,
reset = _objectWithoutProperties(_ref, _excluded);
var activeStyle = null;
if (targetInfo.active) {
activeStyle = Styles.active;
}
return /*#__PURE__*/_jsx("div", _objectSpread({
style: _objectSpread(_objectSpread(_objectSpread({}, Styles.link), style), activeStyle)
}, reset));
};
var Index = function Index() {
var _Checkbox;
injects = useLazyInject(InjectStyles, injects);
var [isMonitor, setIsMonitor] = useState(false);
/**
* @param {object} e
*/
var handleEnable = function handleEnable(e) {
if (e.checked) {
setIsMonitor(true);
} else {
setIsMonitor(false);
}
};
return /*#__PURE__*/_jsxs("div", {
children: [/*#__PURE__*/_jsxs("div", {
id: "nav-parent",
style: Styles.nav,
children: [/*#__PURE__*/_jsx(SmoothScrollLink, {
scrollRefId: "nav-parent",
container: MenuItem,
targetId: "t1",
style: {
background: "#3498DB"
},
children: "test1"
}), /*#__PURE__*/_jsx(SmoothScrollLink, {
scrollRefId: "nav-parent",
container: MenuItem,
targetId: "t2",
style: {
background: "#F1C40F"
},
children: "test2"
}), /*#__PURE__*/_jsx(SmoothScrollLink, {
scrollRefId: "nav-parent",
container: MenuItem,
targetId: "t3",
style: {
background: "#2ECC71"
},
children: "test3"
})]
}), /*#__PURE__*/_jsxs("div", {
style: {
paddingTop: 66
},
children: [/*#__PURE__*/_jsx(ScrollSpy, {
id: "t1",
style: _objectSpread(_objectSpread({}, Styles.content), {}, {
background: "#3498DB"
}),
children: "test111"
}), /*#__PURE__*/_jsx(ScrollSpy, {
id: "t2",
style: _objectSpread(_objectSpread({}, Styles.content), {}, {
background: "#F1C40F"
}),
children: /*#__PURE__*/_jsx(ScrollSpy, {
monitorScroll: isMonitor,
children: /*#__PURE__*/_jsx(ScrollReceiver, {
style: {
border: "1px solid #fff"
},
children: function children(_ref2) {
var {
targetInfo,
refCb
} = _ref2;
return /*#__PURE__*/_jsxs("div", {
ref: refCb,
style: {
border: "1px solid hsl(242, 100%, 50%)"
},
children: ["test222 scrollUp: " + targetInfo.scrollInfo.isScrollUp + " scrollDown: " + targetInfo.scrollInfo.isScrollDown, /*#__PURE__*/_jsxs("div", {
style: {
fontSize: "1.2rem"
},
children: [_Checkbox || (_Checkbox = /*#__PURE__*/_jsx(Checkbox, {
label: "enable monitor this area",
toggle: true,
onChange: handleEnable
})), "When enable and you scroll over here will make test2 button miss actived."]
})]
});
}
})
})
}), /*#__PURE__*/_jsx(ScrollSpy, {
id: "t3",
style: _objectSpread(_objectSpread({}, Styles.content), {}, {
background: "#2ECC71"
}),
children: "test333"
})]
})]
});
};
export default Index;
/**
* @type {Object}
*/
var Styles = {
content: {
height: "110vh",
textAlign: "center",
paddingTop: "10%",
fontSize: "4rem",
color: "#fff"
},
link: {
display: "inline-block",
padding: "0.3rem 0.5rem",
fontSize: "2rem",
color: "#fff",
marginRight: "10px",
opacity: "0.5",
cursor: "pointer"
},
active: {
opacity: 1
},
nav: {
position: "fixed",
background: "#fff",
textAlign: "center",
width: "100%",
padding: "10px 0",
top: 0,
zIndex: 999
}
};
var injects;
var InjectStyles = {
body: [{
margin: 0,
padding: 0
}, "body"]
};