@git-temporal/git-temporal-react
Version:
<!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
54 lines (53 loc) • 1.84 kB
JavaScript
;
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const lodash_1 = require("lodash");
const styles_1 = require("app/styles");
const openDelaySeconds = 0.25;
const closeDelaySeconds = 0.5;
const openPanelStyle = {
_extends: ['flexColumn'],
position: 'relative',
flexShrink: 0,
width: 300,
transition: `all ${openDelaySeconds}s ease`,
};
const closedPanelStyle = {
_extends: ['flexColumn'],
position: 'relative',
width: 20,
transition: `all ${closeDelaySeconds}s ease`,
};
const toggleIconStyle = {
position: 'absolute',
right: '@margins.medium+px',
top: '@margins.medium+px',
cursor: 'pointer',
zIndex: 1,
};
exports.CollapsibleSidePanel = ({ children, style, onOpen, onClose, }) => {
const [isOpen, setIsOpen] = react_1.useState(false);
const panelStyle = isOpen ? openPanelStyle : closedPanelStyle;
return (react_1.default.createElement("div", { style: styles_1.style(panelStyle, style), onClick: didClickPanel },
react_1.default.createElement("div", { style: styles_1.style(toggleIconStyle), onClick: didToggle }, "|||"),
isOpen && children));
function didClickPanel() {
!isOpen && didToggle();
}
function didToggle() {
if (isOpen) {
onClose && lodash_1.delay(() => onClose(), closeDelaySeconds * 1000);
}
else {
onOpen && lodash_1.delay(() => onOpen(), openDelaySeconds * 1000);
}
setIsOpen(!isOpen);
}
};