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.
346 lines (323 loc) • 11.7 kB
JavaScript
System.register(["@beyond-js/kernel/bundle", "react", "pragmate-ui/icons", "framer-motion", "pragmate-ui/base", "@beyond-js/kernel/styles"], function (_export, _context2) {
"use strict";
var dependency_0, dependency_1, dependency_2, dependency_3, dependency_4, dependency_5, __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 (_framerMotion2) {
dependency_3 = _framerMotion2;
}, function (_pragmateUiBase) {
dependency_4 = _pragmateUiBase;
}, function (_beyondJsKernelStyles) {
dependency_5 = _beyondJsKernelStyles;
}],
execute: function () {
({
Bundle: __Bundle
} = dependency_0);
__pkg = new __Bundle({
"module": {
"vspecifier": "pragmate-ui@1.0.1/image"
},
"type": "code",
"name": "image"
}, _context2.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');
ims = new Map();
/*************************
INTERNAL MODULE: ./context
*************************/
ims.set('./context', {
hash: 818759056,
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: 2315952625,
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: 2741910229,
creator: function (require, exports) {
"use strict";
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) {
"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,
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) {
"use strict";
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) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
}
});
/*******************************
INTERNAL MODULE: ./sources/index
*******************************/
ims.set('./sources/index', {
hash: 1995365142,
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: 377065182,
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