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.
419 lines (393 loc) • 13.7 kB
JavaScript
System.register(["@beyond-js/kernel/bundle", "react", "pragmate-ui/icons", "@beyond-js/kernel/styles"], function (_export, _context2) {
"use strict";
var dependency_0, dependency_1, dependency_2, dependency_3, __Bundle, __pkg, ims, useLoader, Image, __beyond_pkg, hmr;
_export({
useLoader: void 0,
Image: void 0
});
return {
setters: [function (_beyondJsKernelBundle) {
dependency_0 = _beyondJsKernelBundle;
}, function (_react2) {
dependency_1 = _react2;
}, function (_pragmateUiIcons) {
dependency_2 = _pragmateUiIcons;
}, function (_beyondJsKernelStyles) {
dependency_3 = _beyondJsKernelStyles;
}],
execute: function () {
({
Bundle: __Bundle
} = dependency_0);
__pkg = new __Bundle({
"module": {
"vspecifier": "pragmate-ui@1.0.0-beta.7/image"
},
"type": "code",
"name": "image"
}, _context2.meta.url).package();
;
__pkg.dependencies.update([['react', dependency_1], ['pragmate-ui/icons', dependency_2], ['@beyond-js/kernel/styles', dependency_3]]);
brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.0-beta.7/image');
ims = new Map();
/*************************
INTERNAL MODULE: ./context
*************************/
ims.set('./context', {
hash: 313846646,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useImageContext = exports.ImageContext = void 0;
var React = require("react");
const ImageContext = exports.ImageContext = React.createContext({});
const useImageContext = () => React.useContext(ImageContext);
exports.useImageContext = useImageContext;
}
});
/*****************************
INTERNAL MODULE: ./error/index
*****************************/
ims.set('./error/index', {
hash: 3024019220,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Error = Error;
var _react = require("react");
var _context = require("../context");
var _icons = require("pragmate-ui/icons");
function Error() {
const {
src,
onError
} = (0, _context.useImageContext)();
const onClickError = event => {
event.stopPropagation();
if (onError && typeof onError === 'function') onError(event);
};
return _react.default.createElement("div", {
"data-src": src,
className: "pui_image__error-container pui-image-error"
}, onError && _react.default.createElement(_icons.IconButton, {
onClick: onClickError,
icon: "refresh"
}));
}
}
});
/**********************************
INTERNAL MODULE: ./hooks/use-loader
**********************************/
ims.set('./hooks/use-loader', {
hash: 1622359040,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useLoader = useLoader;
var _react = require("react");
/*bundle*/
function useLoader(src) {
const [status, setStatus] = _react.default.useState('loading');
_react.default.useEffect(() => {
if (!src) {
setStatus('error');
return;
}
const img = new globalThis.Image();
const manager = event => {
const methods = {
add: 'addEventListener',
remove: 'removeEventListener'
};
const states = {
load: 'ready',
error: 'error'
};
const events = ['load', 'error'];
const method = methods[event];
events.forEach(event => img[method](event, () => setStatus(states[event])));
};
manager('add');
img.src = src;
return () => {
manager('remove');
};
}, [src]);
return {
status
};
}
}
});
/***********************************
INTERNAL MODULE: ./hooks/use-loading
***********************************/
ims.set('./hooks/use-loading', {
hash: 3896164140,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useLoading = useLoading;
var _react = require("react");
function useLoading(props) {
const initialState = {
size: '200x200',
loaded: false
};
const [image, setImage] = (0, _react.useState)();
const [state, setState] = (0, _react.useState)(initialState);
const loadImage = (url, size) => {
let finalSrc = url;
const newImage = new globalThis.Image();
newImage.onload = () => setState({
...state,
loaded: true,
error: false
});
newImage.onerror = () => {
setState({
...state,
error: true,
loaded: false
});
};
newImage.src = finalSrc;
setImage(newImage);
setState({
...state,
url,
size,
src: finalSrc,
loaded: true
});
};
(0, _react.useEffect)(() => {
const currentSrc = props.src;
// console.log(0.4, props.src);
if (state.url !== currentSrc) {
let size = props.size ?? state.size;
loadImage(currentSrc, size);
}
return () => setImage({
...state,
onload: undefined,
onerror: undefined
});
}, [props.src]);
return [state, setState];
}
}
});
/*********************
INTERNAL MODULE: ./img
*********************/
ims.set('./img', {
hash: 3342056460,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Img = Img;
var _react = require("react");
var _context = require("./context");
function Img() {
const {
src,
setState,
state,
loading,
alt,
status
} = (0, _context.useImageContext)();
if (status === 'loading') return _react.default.createElement("div", {
className: 'pui-image-loading'
}, loading);
if (status === 'error') return _react.default.createElement("div", {
className: 'pui-image-error'
}, alt);
return _react.default.createElement("img", {
src: src
});
}
}
});
/***********************
INTERNAL MODULE: ./index
***********************/
ims.set('./index', {
hash: 375441823,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Image = Image;
var _react = require("react");
var _context = require("./context");
var _error = require("./error");
var _img = require("./img");
var _sources = require("./sources");
var _useLoading = require("./hooks/use-loading");
var _useLoader = require("./hooks/use-loader");
/*bundle*/
function Image(props = {}) {
const {
className,
onClick,
children,
sizeLoading
} = props;
const [state, setState] = (0, _useLoading.useLoading)(props);
const {
error,
loaded,
htmlLoaded
} = state;
const {
status
} = (0, _useLoader.useLoader)(props.src);
let cls = `pui-image ${className ? ` ${className}` : ''}`;
if (!loaded && !htmlLoaded) cls += ' pui-image-preload';
if (error) cls += ' pui-image-error';
const properties = {
...props,
className: cls,
onClick
};
['src', 'alt', 'onError', 'children', 'size', 'loading', 'error', 'sources', 'sizeLoading'].forEach(prop => delete properties[prop]);
const value = {
...props,
state,
src: props.src,
status,
setState
};
const styles = {};
if ((!loaded || !htmlLoaded || error) && !!sizeLoading && typeof sizeLoading === 'object' && sizeLoading.height && sizeLoading.width) {
styles.height = sizeLoading.height;
styles.width = sizeLoading.width;
}
const Content = error ? _error.Error : _img.Img;
return _react.default.createElement(_context.ImageContext.Provider, {
value: value
}, _react.default.createElement("picture", {
...properties,
style: styles,
"data-src": props.src
}, _react.default.createElement(_sources.Sources, null), _react.default.createElement(Content, {
...properties
}), children));
}
}
});
/**********************************
INTERNAL MODULE: ./interfaces/index
**********************************/
ims.set('./interfaces/index', {
hash: 1816874829,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
}
});
/*******************************
INTERNAL MODULE: ./sources/index
*******************************/
ims.set('./sources/index', {
hash: 1201684484,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Sources = Sources;
var _react = require("react");
var _context = require("../context");
var _item = require("./item");
function Sources() {
const {
sources
} = (0, _context.useImageContext)();
if (!sources || !Array.isArray(sources) || !sources.length) return null;
const output = sources.map(item => _react.default.createElement(_item.Item, {
key: item.srcSet,
...item
}));
return _react.default.createElement(_react.default.Fragment, null, output);
}
}
});
/******************************
INTERNAL MODULE: ./sources/item
******************************/
ims.set('./sources/item', {
hash: 2213837683,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Item = Item;
var _react = require("react");
function Item(props) {
if (!props.srcSet) return null;
let media = "";
const {
maxWidth,
minWidth
} = props;
if (!maxWidth && !!minWidth) media = `(min-width: ${minWidth}px)`;
if (!!maxWidth && !minWidth) media = `(max-width: ${maxWidth}px)`;
if (!!maxWidth && !!minWidth) media = `(min-width: ${minWidth}px) and (max-width: ${maxWidth}px)`;
const properties = {
...props
};
["maxWidth", "minWidth"].forEach(item => delete properties[item]);
return _react.default.createElement("source", {
media: media,
...properties
});
}
;
}
});
__pkg.exports.descriptor = [{
"im": "./hooks/use-loader",
"from": "useLoader",
"name": "useLoader"
}, {
"im": "./index",
"from": "Image",
"name": "Image"
}];
// Module exports
__pkg.exports.process = function ({
require,
prop,
value
}) {
(require || prop === 'useLoader') && _export("useLoader", useLoader = require ? require('./hooks/use-loader').useLoader : value);
(require || prop === 'Image') && _export("Image", Image = require ? require('./index').Image : 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=image.sjs.js.map