react-sliding-side-panel
Version:
A sliding panel for React applications
71 lines (70 loc) • 4.38 kB
JavaScript
;
var __assign = (this && this.__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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var react_transition_group_1 = require("react-transition-group");
var getPanelGlassStyle = function (type, size, hidden) {
var horizontal = type === 'bottom' || type === 'top';
return __assign(__assign(__assign({ width: horizontal ? (hidden ? '0' : '100') + "vw" : 100 - size + "vw", height: horizontal ? 100 - size + "vh" : (hidden ? '0' : '100') + "vh" }, (type === 'right' && { left: 0 })), (type === 'top' && { bottom: 0 })), { position: 'inherit' });
};
var getPanelStyle = function (type, size) {
var horizontal = type === 'bottom' || type === 'top';
return __assign(__assign(__assign({ width: horizontal ? '100vw' : size + "vw", height: horizontal ? size + "vh" : '100vh' }, (type === 'right' && { right: 0 })), (type === 'bottom' && { bottom: 0 })), { position: 'inherit', overflow: 'auto' });
};
var SlidingPanel = function (_a) {
var type = _a.type, size = _a.size, panelContainerClassName = _a.panelContainerClassName, panelClassName = _a.panelClassName, isOpen = _a.isOpen, onOpen = _a.onOpen, onOpening = _a.onOpening, onOpened = _a.onOpened, onClose = _a.onClose, onClosing = _a.onClosing, onClosed = _a.onClosed, backdropClicked = _a.backdropClicked, noBackdrop = _a.noBackdrop, children = _a.children;
var glassBefore = type === 'right' || type === 'bottom';
var horizontal = type === 'bottom' || type === 'top';
return (React.createElement("div", null,
React.createElement("div", { className: "sliding-panel-container " + (isOpen ? 'active' : '') + " " + (noBackdrop ? 'click-through' : '') },
React.createElement(react_transition_group_1.CSSTransition, { in: isOpen, timeout: 500, classNames: "panel-container-" + type, unmountOnExit: true, onEnter: onOpen, onEntering: onOpening, onEntered: onOpened, onExit: onClose, onExiting: onClosing, onExited: onClosed, style: { display: horizontal ? 'block' : 'flex' } },
React.createElement("div", null,
glassBefore && (React.createElement("div", { className: "glass", style: getPanelGlassStyle(type, size, !!noBackdrop), onClick: function (e) {
if (!noBackdrop && backdropClicked)
backdropClicked(e);
} })),
React.createElement("div", { className: "panel " + (panelContainerClassName || ''), style: getPanelStyle(type, size) },
React.createElement("div", { className: "panel-content " + (panelClassName || '') }, children)),
!glassBefore && (React.createElement("div", { className: "glass", style: getPanelGlassStyle(type, size, !!noBackdrop), onClick: function (e) {
if (!noBackdrop && backdropClicked)
backdropClicked(e);
} })))))));
};
SlidingPanel.defaultProps = {
type: 'left',
size: 50,
panelClassName: '',
panelContainerClassName: '',
noBackdrop: false,
children: null,
};
exports.default = SlidingPanel;