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.
294 lines (258 loc) • 8.38 kB
JavaScript
import * as dependency_0 from '@beyond-js/kernel/bundle';
import * as dependency_1 from 'react';
import * as dependency_2 from 'pragmate-ui/icons';
import * as dependency_3 from 'framer-motion';
import * as dependency_4 from 'pragmate-ui/base';
import * as dependency_5 from '@beyond-js/kernel/styles';
const {Bundle: __Bundle} = dependency_0;
const __pkg = new __Bundle({"module":{"vspecifier":"pragmate-ui@1.0.1/image"},"type":"code","name":"image"}, import.meta.url).package();;
__pkg.dependencies.update([['react', dependency_1],['pragmate-ui/icons', dependency_2],['framer-motion', dependency_3],['pragmate-ui/base', dependency_4],['@beyond-js/kernel/styles', dependency_5]]);
brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.1/image')
const ims = new Map();
/*************************
INTERNAL MODULE: ./context
*************************/
ims.set('./context', {hash: 818759056, creator: function (require, exports) {
;
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: 2315952625, creator: function (require, exports) {
;
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: 2741910229, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useLoader = useLoader;
var _react = require("react");
/*bundle*/function useLoader(src, onErrorCallback) {
const [status, setStatus] = _react.default.useState('loading');
_react.default.useEffect(() => {
if (!src) {
// setStatus('error');
return;
}
const img = new globalThis.Image();
const onLoad = () => {
setStatus('ready');
};
const onError = e => {
setStatus('error');
if (onErrorCallback) onErrorCallback(e);
};
img.addEventListener('load', onLoad);
img.addEventListener('error', onError);
img.src = src;
return () => {
img.removeEventListener('load', onLoad);
img.removeEventListener('error', onError);
};
}, [src]);
return {
status
};
}
}});
/*********************
INTERNAL MODULE: ./img
*********************/
ims.set('./img', {hash: 3412446156, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Img = Img;
var _react = require("react");
var _context = require("./context");
function Img() {
const {
src,
setState,
state,
alt,
status
} = (0, _context.useImageContext)();
if (status === 'loading') return _react.default.createElement("div", {
className: "pui-image-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: 2150622644, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Image = Image;
var _react = require("react");
var _context = require("./context");
var _error = require("./error");
var _useLoader = require("./hooks/use-loader");
var _img = require("./img");
var _sources = require("./sources");
var _framerMotion = require("framer-motion");
/*bundle*/function Image(props = {}) {
const {
className,
onClick,
children,
sizeLoading
} = props;
const {
status
} = (0, _useLoader.useLoader)(props.src, props.onError);
let cls = `pui-image ${className ? ` ${className}` : ''}`;
if (status === 'loading') cls += ' pui-image-preload';
if (status === '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,
src: props.src,
status
};
const styles = {};
if (status !== 'ready' && !!sizeLoading && typeof sizeLoading === 'object' && sizeLoading.height && sizeLoading.width) {
styles.height = sizeLoading.height;
styles.width = sizeLoading.width;
}
const Content = status === 'error' ? _error.Error : _img.Img;
return _react.default.createElement(_context.ImageContext.Provider, {
value: value
}, _react.default.createElement(_framerMotion.motion.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: 769792670, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
}});
/*******************************
INTERNAL MODULE: ./sources/index
*******************************/
ims.set('./sources/index', {hash: 1995365142, creator: function (require, exports) {
;
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: 377065182, creator: function (require, exports) {
;
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"}];
export let useLoader, Image;
// Module exports
__pkg.exports.process = function({require, prop, value}) {
(require || prop === 'useLoader') && (useLoader = require ? require('./hooks/use-loader').useLoader : value);
(require || prop === 'Image') && (Image = require ? require('./index').Image : value);
};
export const __beyond_pkg = __pkg;
export const hmr = new (function () {
this.on = (event, listener) => void 0;
this.off = (event, listener) => void 0;
});
__pkg.initialise(ims);
//# sourceMappingURL=image.browser.mjs.map