pragmate-ui/image/image.browser.mjs

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.

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 '@beyond-js/kernel/styles';

const {Bundle: __Bundle} = dependency_0;
const __pkg = new __Bundle({"module":{"vspecifier":"pragmate-ui@1.0.0-beta.7/image"},"type":"code","name":"image"}, import.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')


const 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"}];

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