cheeseburger-menu
Version:
A simple sliding side menu component for React
324 lines (309 loc) • 15 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"), require("react-easy-swipe"));
else if(typeof define === 'function' && define.amd)
define("cheeseburger-menu", ["React", "react-easy-swipe"], factory);
else if(typeof exports === 'object')
exports["cheeseburger-menu"] = factory(require("react"), require("react-easy-swipe"));
else
root["cheeseburger-menu"] = factory(root["React"], root["react-easy-swipe"]);
})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE__639__, __WEBPACK_EXTERNAL_MODULE__7__) {
return /******/ (function() { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ 7:
/***/ (function(module) {
module.exports = __WEBPACK_EXTERNAL_MODULE__7__;
/***/ }),
/***/ 639:
/***/ (function(module) {
module.exports = __WEBPACK_EXTERNAL_MODULE__639__;
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
/******/ /* webpack/runtime/compat get default export */
/******/ !function() {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function() { return module['default']; } :
/******/ function() { return module; };
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ !function() {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = function(exports, definition) {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ !function() {
/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
/******/ }();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ !function() {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ }();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
!function() {
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
"default": function() { return /* binding */ src; }
});
// EXTERNAL MODULE: external {"commonjs":"react","commonjs2":"react","amd":"React","root":"React"}
var external_commonjs_react_commonjs2_react_amd_React_root_React_ = __webpack_require__(639);
var external_commonjs_react_commonjs2_react_amd_React_root_React_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_react_commonjs2_react_amd_React_root_React_);
// EXTERNAL MODULE: external "react-easy-swipe"
var external_react_easy_swipe_ = __webpack_require__(7);
var external_react_easy_swipe_default = /*#__PURE__*/__webpack_require__.n(external_react_easy_swipe_);
;// CONCATENATED MODULE: ./node_modules/clsx/dist/clsx.mjs
function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}/* harmony default export */ var dist_clsx = (clsx);
;// CONCATENATED MODULE: ./src/styles.ts
var __assign = (undefined && undefined.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var overlayStyle = function (options) { return ({
position: 'fixed',
top: options.topOffset,
bottom: options.bottomOffset,
left: 0,
right: 0,
zIndex: 1001,
background: 'rgba(0, 0, 0, 0.3)',
opacity: 0,
transition: "opacity ".concat(options.transitionTime, "s, transform 0s ").concat(options.transitionTime, "s"),
transform: "translate3d(".concat(options.isLeft ? '' : '-', "100%, 0px, 0px)"),
}); };
var overlayActiveStyle = function (options) { return (__assign(__assign({}, overlayStyle(options)), { opacity: 1, transition: "opacity ".concat(options.transitionTime, "s"), transform: 'none' })); };
var menuOuterStyle = function (options) { return ({
position: 'fixed',
left: (options.isLeft ? 0 : 'inherit'),
right: (options.isLeft ? 'inherit' : 0),
top: options.topOffset,
bottom: options.bottomOffset,
zIndex: 1002,
width: options.width,
maxWidth: '80%',
transition: "transform ".concat(options.transitionTime, "s"),
transform: getSkew(options) + "translate3d(".concat(options.isLeft ? '-' : '', "100%, 0px, 0px)"),
transformOrigin: 'left',
backgroundColor: options.backgroundColor,
}); };
var menuOuterActiveStyle = function (options) { return (__assign(__assign({}, menuOuterStyle(options)), { transform: getSkew(options) + 'translate3d(0px, 0px, 0px)' })); };
var menuShadowStyle = function (options) { return ({
position: 'absolute',
zIndex: -1,
width: '100%',
height: '100%',
transition: "opacity ".concat(options.transitionTime, "s"),
boxShadow: (options.showShadow ? '0 0 15px 0 rgba(0, 0, 0, .2)' : 'none'),
opacity: 0,
top: 0,
bottom: 0,
left: 0,
right: 0,
}); };
var menuShadowActiveStyle = function (options) { return (__assign(__assign({}, menuShadowStyle(options)), { opacity: 1 })); };
var menuInnerStyle = function (options) { return ({
height: '100%',
paddingBottom: options.topOffset,
overflowY: 'auto',
}); };
function getSkew(options) {
return options.skewY ? "skewY(".concat(options.skewY, "deg) ") : '';
}
;// CONCATENATED MODULE: ./src/index.tsx
var __extends = (undefined && undefined.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var src_assign = (undefined && undefined.__assign) || function () {
src_assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return src_assign.apply(this, arguments);
};
var IDLE = 'idle';
var VERTICAL = 'vertical';
var HORIZONTAL = 'horizontal';
var CheeseburgerMenu = /** @class */ (function (_super) {
__extends(CheeseburgerMenu, _super);
function CheeseburgerMenu(props) {
var _this = _super.call(this, props) || this;
_this.state = {
swiping: false,
direction: IDLE,
swipePosition: { x: 0, y: 0 },
menuExtraStyle: {},
};
_this.onSwipeStart = _this.onSwipeStart.bind(_this);
_this.onSwipeMove = _this.onSwipeMove.bind(_this);
_this.onSwipeEnd = _this.onSwipeEnd.bind(_this);
return _this;
}
CheeseburgerMenu.prototype.onSwipeStart = function () {
if (this.props.isOpen) {
this.setState({
swiping: true,
});
}
};
CheeseburgerMenu.prototype.onSwipeMove = function (position, event) {
if (this.state.swiping) {
var options = this.getOptions();
var direction = this.state.direction;
if (direction === IDLE) {
var swipeThreshold = options.width / 15;
var pastThreshold = ((Math.abs(position.x) > swipeThreshold) ||
(Math.abs(position.y) > swipeThreshold));
if (pastThreshold) {
if (((!this.props.right && position.x < 0) ||
(this.props.right && position.x > 0)) &&
Math.abs(position.x) > Math.abs(position.y)) {
direction = HORIZONTAL;
}
else {
direction = VERTICAL;
}
}
}
if (direction === HORIZONTAL) {
var swipeClosing = ((!this.props.right && position.x < 0) ||
(this.props.right && position.x > 0));
var translateX = (swipeClosing ? position.x : 0);
this.setState({
direction: direction,
swipePosition: position,
menuExtraStyle: {
transform: getSkew(options) + "translate3d(".concat(translateX, "px, 0px, 0px)"),
transition: 'transform 0s',
},
});
event.preventDefault();
}
if (direction === VERTICAL) {
this.setState({
direction: direction,
swipePosition: { x: 0, y: 0 },
menuExtraStyle: {},
});
}
}
};
CheeseburgerMenu.prototype.onSwipeEnd = function () {
var swipeCloseThreshold = this.getOptions().width / 3;
if ((!this.props.right && this.state.swipePosition.x < -swipeCloseThreshold) ||
(this.props.right && this.state.swipePosition.x > swipeCloseThreshold)) {
this.props.closeCallback();
}
this.setState({
swiping: false,
direction: IDLE,
swipePosition: { x: 0, y: 0 },
menuExtraStyle: {},
});
};
CheeseburgerMenu.prototype.getOptions = function () {
var _a, _b, _c, _d, _e, _f;
return {
isLeft: !this.props.right,
transitionTime: (_a = this.props.transitionTime) !== null && _a !== void 0 ? _a : 0.3,
topOffset: (_b = this.props.topOffset) !== null && _b !== void 0 ? _b : 0,
bottomOffset: (_c = this.props.bottomOffset) !== null && _c !== void 0 ? _c : 0,
width: (_d = this.props.width) !== null && _d !== void 0 ? _d : 300,
backgroundColor: (_e = this.props.backgroundColor) !== null && _e !== void 0 ? _e : 'white',
showShadow: !this.props.noShadow,
skewY: (_f = this.props.skewY) !== null && _f !== void 0 ? _f : 0,
};
};
CheeseburgerMenu.prototype.render = function () {
var _a = this.props, isOpen = _a.isOpen, closeCallback = _a.closeCallback, className = _a.className, overlayClassName = _a.overlayClassName, outerClassName = _a.outerClassName, innerClassName = _a.innerClassName, shadowClassName = _a.shadowClassName, children = _a.children;
var options = this.getOptions();
var baseMenuOuterStyle = (isOpen ? menuOuterActiveStyle(options) : menuOuterStyle(options));
var currentMenuOuterStyle = src_assign(src_assign({}, baseMenuOuterStyle), this.state.menuExtraStyle);
return (external_commonjs_react_commonjs2_react_amd_React_root_React_default().createElement("div", { className: dist_clsx('cheeseburger-menu', className, { open: isOpen }) },
external_commonjs_react_commonjs2_react_amd_React_root_React_default().createElement("div", { className: dist_clsx('cheeseburger-menu-overlay', overlayClassName), style: isOpen ? overlayActiveStyle(options) : overlayStyle(options), onClick: closeCallback }),
external_commonjs_react_commonjs2_react_amd_React_root_React_default().createElement((external_react_easy_swipe_default()), { onSwipeStart: this.onSwipeStart, onSwipeMove: this.onSwipeMove, onSwipeEnd: this.onSwipeEnd },
external_commonjs_react_commonjs2_react_amd_React_root_React_default().createElement("div", { className: dist_clsx('cheeseburger-menu-outer', outerClassName), style: currentMenuOuterStyle },
external_commonjs_react_commonjs2_react_amd_React_root_React_default().createElement("div", { className: dist_clsx('cheeseburger-menu-inner', innerClassName), style: menuInnerStyle(options) }, children),
external_commonjs_react_commonjs2_react_amd_React_root_React_default().createElement("div", { className: dist_clsx('cheeseburger-menu-shadow', shadowClassName), style: isOpen ? menuShadowActiveStyle(options) : menuShadowStyle(options) })))));
};
return CheeseburgerMenu;
}(external_commonjs_react_commonjs2_react_amd_React_root_React_.Component));
/* harmony default export */ var src = (CheeseburgerMenu);
}();
/******/ return __webpack_exports__;
/******/ })()
;
});
//# sourceMappingURL=index.js.map