@essential-js/ui
Version:
EssentialJS UI
197 lines (189 loc) • 6.54 kB
JavaScript
System.register(["@beyond-js/kernel/bundle", "@beyond-js/kernel/styles", "react"], function (_export, _context) {
"use strict";
var dependency_0, dependency_1, dependency_2, __Bundle, __pkg, ims, Card, ElementTitle, Table, __beyond_pkg, hmr;
_export({
Card: void 0,
ElementTitle: void 0,
Table: void 0
});
return {
setters: [function (_beyondJsKernelBundle) {
dependency_0 = _beyondJsKernelBundle;
}, function (_beyondJsKernelStyles) {
dependency_1 = _beyondJsKernelStyles;
}, function (_react2) {
dependency_2 = _react2;
}],
execute: function () {
({
Bundle: __Bundle
} = dependency_0);
__pkg = new __Bundle({
"module": {
"vspecifier": "@essential-js/ui@1.0.0/menu"
},
"type": "code"
}, _context.meta.url).package();
;
__pkg.dependencies.update([['@beyond-js/kernel/styles', dependency_1], ['react', dependency_2]]);
brequire('@beyond-js/kernel/styles').styles.register('@essential-js/ui@1.0.0/menu');
ims = new Map();
/**********************
INTERNAL MODULE: ./card
**********************/
ims.set('./card', {
hash: 2723939661,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Card = Card;
var _react = require("react");
/*bundle*/
function Card({
children,
...props
}) {
return _react.default.createElement("article", {
...props,
className: `essential__card ${props.className}`
}, children);
}
}
});
/*******************************
INTERNAL MODULE: ./element-title
*******************************/
ims.set('./element-title', {
hash: 4047878754,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ElementTitle = ElementTitle;
var _react = require("react");
const DEFAULT_APARITION_TIME = 500;
const DEFAULT_OFFSET = 10;
/*bundle*/
function ElementTitle({
offsetX = DEFAULT_OFFSET,
offsetY = DEFAULT_OFFSET,
children,
aparitionTime = DEFAULT_APARITION_TIME,
message,
...props
}) {
const [showTooltip, setShowTooltip] = _react.default.useState(false);
const [mousePosition, setMousePosition] = _react.default.useState({
x: 0,
y: 0
});
const tooltipRef = _react.default.useRef(null);
const messageRef = _react.default.useRef(null);
_react.default.useEffect(() => {
const handleClickOutside = event => {
if (tooltipRef.current && messageRef.current && !tooltipRef.current.contains(event.target) && !messageRef.current.contains(event.target)) {
setShowTooltip(false);
}
};
document.addEventListener('click', handleClickOutside);
return () => {
document.removeEventListener('click', handleClickOutside);
};
}, []);
const handleMouseMove = event => {
setMousePosition({
x: event.pageX,
y: event.pageY
});
};
function handleMouseEnter() {
setTimeout(() => {
setShowTooltip(true);
}, aparitionTime ?? DEFAULT_APARITION_TIME);
}
function handleMouseLeave() {
setShowTooltip(false);
}
return _react.default.createElement("div", {
...props,
ref: tooltipRef,
className: "essential__title",
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave,
onMouseMove: handleMouseMove
}, _react.default.createElement("div", {
ref: messageRef
}, children), showTooltip && _react.default.createElement("div", {
className: "title__element",
style: {
top: mousePosition.y + offsetY,
left: mousePosition.x + offsetX
}
}, message));
}
}
});
/***********************
INTERNAL MODULE: ./table
***********************/
ims.set('./table', {
hash: 2392233890,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Table = Table;
var _react = require("react");
/*bundle*/
function Table({
breakpoint = 750,
children,
...props
}) {
const breakpointClass = `breakpoint-${breakpoint}px`;
const styles = props.style;
return _react.default.createElement("table", {
...props,
style: styles,
className: `essential__table ${props.className} ${breakpointClass}`
}, children);
}
}
});
__pkg.exports.descriptor = [{
"im": "./card",
"from": "Card",
"name": "Card"
}, {
"im": "./element-title",
"from": "ElementTitle",
"name": "ElementTitle"
}, {
"im": "./table",
"from": "Table",
"name": "Table"
}];
// Module exports
__pkg.exports.process = function ({
require,
prop,
value
}) {
(require || prop === 'Card') && _export("Card", Card = require ? require('./card').Card : value);
(require || prop === 'ElementTitle') && _export("ElementTitle", ElementTitle = require ? require('./element-title').ElementTitle : value);
(require || prop === 'Table') && _export("Table", Table = require ? require('./table').Table : value);
};
_export("__beyond_pkg", __beyond_pkg = __pkg);
_export("hmr", hmr = new function () {
this.on = (event, listener) => void 0;
this.off = (event, listener) => void 0;
}());
__pkg.initialise(ims);
}
};
});
//# sourceMappingURL=menu.sjs.js.map