pragmate-ui
Version:
An advanced, on-demand React UI library optimized for BeyondJS. Pragmate UI provides modular, responsive, and accessible components with a focus on efficient bundle sizes and a streamlined development process.
258 lines (241 loc) • 7.97 kB
JavaScript
define(["exports", "module", "@beyond-js/kernel/bundle", "@beyond-js/kernel/styles", "pragmate-ui/icons", "react", "prismjs", "pragmate-ui/toast"], function (_exports, _amd_module, dependency_0, dependency_1, dependency_2, dependency_3, dependency_4, dependency_5) {
"use strict";
Object.defineProperty(_exports, "__esModule", {
value: true
});
_exports.hmr = _exports.__beyond_pkg = _exports.InlineCode = _exports.CodeBox = _exports.Code = void 0;
const {
Bundle: __Bundle
} = dependency_0;
const __pkg = new __Bundle({
"module": {
"vspecifier": "pragmate-ui@1.0.1/code"
},
"type": "code"
}, _amd_module.uri).package();
;
__pkg.dependencies.update([['@beyond-js/kernel/styles', dependency_1], ['pragmate-ui/icons', dependency_2], ['react', dependency_3], ['prismjs', dependency_4], ['pragmate-ui/toast', dependency_5]]);
brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.1/code');
const ims = new Map();
/***************************
INTERNAL MODULE: ./clipboard
***************************/
ims.set('./clipboard', {
hash: 1917992420,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Clipboard = Clipboard;
var _icons = require("pragmate-ui/icons");
var _react = require("react");
var _useClick = require("./use-click");
function Clipboard({
text
}) {
const [ref, onClick] = (0, _useClick.useClick)();
return _react.default.createElement("div", {
className: 'clipboard__container',
"data-text": text,
ref: ref,
onClick: onClick
}, _react.default.createElement(_icons.IconButton, {
title: 'copy',
icon: 'copy'
}), _react.default.createElement("span", {
className: 'action-copied'
}, "Copied"));
}
}
});
/**************************
INTERNAL MODULE: ./code-box
**************************/
ims.set('./code-box', {
hash: 2123332791,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CodeBox = CodeBox;
var _react = require("react");
var _code = require("./code");
var _clipboard = require("./clipboard");
/*bundle*/
function CodeBox({
title,
language,
children
}) {
return _react.default.createElement("div", {
className: 'code__box'
}, _react.default.createElement("header", null, _react.default.createElement("div", {
className: 'tab active'
}, title), _react.default.createElement(_clipboard.Clipboard, {
text: children
})), _react.default.createElement("section", {
className: 'box__code'
}, _react.default.createElement(_code.Code, {
language: language,
clipboard: false
}, children)));
}
}
});
/**********************
INTERNAL MODULE: ./code
**********************/
ims.set('./code', {
hash: 1110291450,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Code = Code;
var _react = require("react");
var Prism = require("prismjs");
var _clipboard = require("./clipboard");
/*bundle*/
function Code({
language = 'typescript',
children,
clipboard = true
}) {
const createMarkup = () => {
if (!children) {
return {
__html: ''
};
}
const html = Prism.highlight(children, Prism.languages.javascript, language);
return {
__html: html
};
};
const cls = `code-container${clipboard ? ' has-clipboard' : ''}`;
return _react.default.createElement("div", {
className: cls
}, _react.default.createElement("pre", {
className: `regular__code language-${language}`,
dangerouslySetInnerHTML: createMarkup()
}), clipboard && _react.default.createElement(_clipboard.Clipboard, {
text: children
}));
}
}
});
/************************
INTERNAL MODULE: ./inline
************************/
ims.set('./inline', {
hash: 1462049212,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.InlineCode = InlineCode;
var _react = require("react");
/*bundle*/
function InlineCode({
children
}) {
return _react.default.createElement("code", {
className: "inline__code"
}, children);
}
}
});
/***************************
INTERNAL MODULE: ./use-click
***************************/
ims.set('./use-click', {
hash: 3962409993,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useClick = useClick;
var _react = require("react");
var _toast = require("pragmate-ui/toast");
function useClick() {
const ref = _react.default.useRef(null);
const polyfill = text => {
const textArea = document.createElement('textarea');
textArea.value = text;
// Avoid scrolling to bottom
textArea.style.top = '0';
textArea.style.left = '0';
textArea.style.position = 'fixed';
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
const successful = document.execCommand('copy');
const msg = successful ? 'successful' : 'unsuccessful';
console.log('Fallback: Copying text command was ' + msg);
} catch (err) {
console.error('Fallback: Oops, unable to copy', err);
}
};
const onClick = async event => {
const target = event.currentTarget;
_toast.toast.info('copied');
const text = target.dataset.text;
if (!navigator.clipboard) {
return polyfill(text);
}
try {
await navigator.clipboard.writeText(text);
const span = ref.current.querySelector('.action-copied');
span.classList.add('show');
window.setTimeout(() => {
span.classList.add('hide');
window.setTimeout(() => span.classList.remove('show', 'hide'), 300);
}, 500);
} catch (e) {
console.log('some error', e);
}
};
return [ref, onClick];
}
}
});
__pkg.exports.descriptor = [{
"im": "./code-box",
"from": "CodeBox",
"name": "CodeBox"
}, {
"im": "./code",
"from": "Code",
"name": "Code"
}, {
"im": "./inline",
"from": "InlineCode",
"name": "InlineCode"
}];
let CodeBox = _exports.CodeBox = void 0,
Code = _exports.Code = void 0,
InlineCode = _exports.InlineCode = void 0;
// Module exports
__pkg.exports.process = function ({
require,
prop,
value
}) {
(require || prop === 'CodeBox') && (_exports.CodeBox = CodeBox = require ? require('./code-box').CodeBox : value);
(require || prop === 'Code') && (_exports.Code = Code = require ? require('./code').Code : value);
(require || prop === 'InlineCode') && (_exports.InlineCode = InlineCode = require ? require('./inline').InlineCode : value);
};
const __beyond_pkg = _exports.__beyond_pkg = __pkg;
const hmr = _exports.hmr = new function () {
this.on = (event, listener) => void 0;
this.off = (event, listener) => void 0;
}();
__pkg.initialise(ims);
});
//# sourceMappingURL=code.amd.js.map