organism-react-scroll-nav/build/cjs/src/ui/pages/index.js

A React scroll spy library with flux

"use strict";

var _interopRequireDefault = require("reshow-runtime/helpers/interopRequireDefault");
var _interopRequireWildcard = require("reshow-runtime/helpers/interopRequireWildcard");
exports.__esModule = true;
exports["default"] = void 0;
var _objectSpread2 = _interopRequireDefault(require("reshow-runtime/helpers/objectSpread2"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("reshow-runtime/helpers/objectWithoutPropertiesLoose"));
var _reactAtomicOrganism = require("react-atomic-organism");
var _reactAtomicMolecule = require("react-atomic-molecule");
var React = _interopRequireWildcard(require("react"));
var _ScrollSpy = _interopRequireDefault(require("../organisms/ScrollSpy.js"));
var _ScrollReceiver = _interopRequireDefault(require("../organisms/ScrollReceiver.js"));
var _SmoothScrollLink = _interopRequireDefault(require("../organisms/SmoothScrollLink.js"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["targetInfo", "style"]; // @ts-check
var useState = React.useState;

/**
 * Production please use
 * import {xxx} from 'organism-react-scroll-nav';
 */

var MenuItem = function MenuItem(_ref) {
  var targetInfo = _ref.targetInfo,
    style = _ref.style,
    reset = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
  var activeStyle = null;
  if (targetInfo.active) {
    activeStyle = Styles.active;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])({
    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, Styles.link), style), activeStyle)
  }, reset));
};
var Index = function Index() {
  var _Checkbox;
  injects = (0, _reactAtomicMolecule.useLazyInject)(InjectStyles, injects);
  var _useState = useState(false),
    isMonitor = _useState[0],
    setIsMonitor = _useState[1];
  /**
   * @param {object} e
   */
  var handleEnable = function handleEnable(e) {
    if (e.checked) {
      setIsMonitor(true);
    } else {
      setIsMonitor(false);
    }
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      id: "nav-parent",
      style: Styles.nav,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SmoothScrollLink["default"], {
        scrollRefId: "nav-parent",
        container: MenuItem,
        targetId: "t1",
        style: {
          background: "#3498DB"
        },
        children: "test1"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SmoothScrollLink["default"], {
        scrollRefId: "nav-parent",
        container: MenuItem,
        targetId: "t2",
        style: {
          background: "#F1C40F"
        },
        children: "test2"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SmoothScrollLink["default"], {
        scrollRefId: "nav-parent",
        container: MenuItem,
        targetId: "t3",
        style: {
          background: "#2ECC71"
        },
        children: "test3"
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      style: {
        paddingTop: 66
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollSpy["default"], {
        id: "t1",
        style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, Styles.content), {}, {
          background: "#3498DB"
        }),
        children: "test111"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollSpy["default"], {
        id: "t2",
        style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, Styles.content), {}, {
          background: "#F1C40F"
        }),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollSpy["default"], {
          monitorScroll: isMonitor,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollReceiver["default"], {
            style: {
              border: "1px solid #fff"
            },
            children: function children(_ref2) {
              var targetInfo = _ref2.targetInfo,
                refCb = _ref2.refCb;
              return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                ref: refCb,
                style: {
                  border: "1px solid hsl(242, 100%, 50%)"
                },
                children: ["test222 scrollUp: " + targetInfo.scrollInfo.isScrollUp + " scrollDown: " + targetInfo.scrollInfo.isScrollDown, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                  style: {
                    fontSize: "1.2rem"
                  },
                  children: [_Checkbox || (_Checkbox = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactAtomicOrganism.Checkbox, {
                    label: "enable monitor this area",
                    toggle: true,
                    onChange: handleEnable
                  })), "When enable and you scroll over here will make test2 button miss actived."]
                })]
              });
            }
          })
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollSpy["default"], {
        id: "t3",
        style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, Styles.content), {}, {
          background: "#2ECC71"
        }),
        children: "test333"
      })]
    })]
  });
};
var _default = exports["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"]
};
module.exports = exports.default;