@onesy/ui-react
Version:
UI for React
281 lines (278 loc) • 11.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _Type = _interopRequireDefault(require("../Type"));
var _Surface = _interopRequireDefault(require("../Surface"));
var _Line = _interopRequireDefault(require("../Line"));
var _useVisible = _interopRequireDefault(require("../useVisible/useVisible"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ref", "tonal", "color", "src", "url", "urlSmall", "sources", "alt", "description", "alignDescription", "width", "height", "align", "responsive", "lazyLoad", "fullWidth", "maxWidth", "loading", "RootProps", "NoImageProps", "DescriptionProps", "UseVisibleProps", "className", "style", "children"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const useStyle = (0, _styleReact.style)(theme => ({
root: {
position: 'relative',
display: 'inline-block',
lineHeight: '0'
},
root_figure: {
'& img': {
height: 'auto',
width: '100%'
}
},
root_picture: {
'& img': {
height: 'auto',
width: '100%'
}
},
picture: {
position: 'relative',
display: 'inline-block'
},
figcaption: {
'&.onesy-Type-root': {
padding: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(2, 'px')}`
}
},
align_description_start: {
textAlign: 'start'
},
align_description_left: {
textAlign: 'left'
},
align_description_center: {
textAlign: 'center'
},
align_description_right: {
textAlign: 'right'
},
align_description_end: {
textAlign: 'end'
},
align_start: {
marginInlineEnd: 'auto'
},
align_left: {
marginLeft: 'auto'
},
align_center: {
marginInline: 'auto'
},
align_right: {
marginRight: 'auto'
},
align_end: {
marginInlineStart: 'auto'
},
align_unset: {
marginInline: 'unset'
},
responsive: {
height: 'auto',
maxWidth: '100%'
},
// maxWidth
maxWidth_xxs: {
maxWidth: '320px'
},
maxWidth_xs: {
maxWidth: '400px'
},
maxWidth_sm: {
maxWidth: '600px'
},
maxWidth_rg: {
maxWidth: '960px'
},
maxWidth_lg: {
maxWidth: '1240px'
},
maxWidth_xl: {
maxWidth: '1920px'
},
maxWidth_unset: {
maxWidth: 'unset'
},
fullWidth: {
display: 'block',
width: '100%'
},
noImage: {
width: '100%',
maxWidth: '540px',
aspectRatio: '4 / 3',
backgroundColor: theme.palette.color.neutral[100],
backgroundImage: `linear-gradient(${theme.palette.light ? '130deg' : '330deg'}, ${theme.methods.palette.color.colorToRgb(theme.palette.color.primary.main, 0.14)} 0%, ${theme.methods.palette.color.colorToRgb(theme.palette.color.secondary.main, 0.14)} 40%, ${theme.methods.palette.color.colorToRgb(theme.palette.color.quaternary.main, 0.14)} 100%)`,
cursor: 'default',
userSelect: 'none'
}
}), {
name: 'onesy-Image'
});
const Image = props_ => {
var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3;
const theme = (0, _styleReact.useOnesyTheme)();
const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyImage) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
const Type = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
const Surface = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Surface) || _Surface.default;
const {
ref,
tonal = true,
color = 'primary',
src,
url,
urlSmall,
sources,
alt,
description,
alignDescription = 'start',
width,
height,
align,
responsive = true,
lazyLoad = true,
fullWidth,
maxWidth,
loading,
RootProps,
NoImageProps,
DescriptionProps,
UseVisibleProps,
className,
style,
children: children_
} = props,
otherProps = (0, _objectWithoutProperties2.default)(props, _excluded);
const other = otherProps;
const {
classes
} = useStyle();
let Component = 'img';
const [root, setRoot] = _react.default.useState();
const [loaded, setLoaded] = _react.default.useState(false);
const [source, setSource] = _react.default.useState('');
const visiblity = lazyLoad ? (0, _useVisible.default)(_objectSpread({
element: root
}, UseVisibleProps)) : {
visible: true
};
const refs = {
root: _react.default.useRef(undefined),
loaded: _react.default.useRef(loaded)
};
refs.loaded.current = loaded;
const imageLoad = value => new Promise((resolve, reject) => {
const image = window.document.createElement('img');
let imageLoaded = false;
const check = () => {
if (image.complete && image.naturalWidth !== 0) imageLoaded = true;
if (imageLoaded) return resolve(true);
setTimeout(check, 40);
};
const onLoad = event => {
check();
};
const onError = () => {
resolve(false);
};
image.onload = onLoad;
image.onerror = onError;
image.src = value;
if (image.complete) return resolve(true);
});
const init = async () => {
const URL = src || url || urlSmall;
const isLoaded = await imageLoad(URL);
setSource(isLoaded ? URL : '');
setLoaded(true);
};
_react.default.useEffect(() => {
if (visiblity !== null && visiblity !== void 0 && visiblity.visible && !refs.loaded.current) {
init();
}
}, [visiblity === null || visiblity === void 0 ? void 0 : visiblity.visible]);
_react.default.useEffect(() => {
if (loaded) init();
}, [src]);
const noImage = loaded && !source;
const children = _react.default.Children.toArray(children_);
const picture = !!children.length || !!(sources !== null && sources !== void 0 && sources.length);
if (picture && !description) {
Component = 'picture';
}
// description
if (description) Component = 'figure';
const rootIsImage = !picture && !description;
// surface
if (picture || description) {
other.tonal = tonal;
other.color = color;
other.Component = Component;
Component = Surface;
} else if (rootIsImage && !noImage) {
other.src = source;
other.atl = alt;
other.width = width;
other.height = height;
other.loading = loading;
other.style = style;
}
const Wrapper = picture && description ? 'picture' : _react.default.Fragment;
const WrapperProps = picture && description ? {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Image', theme) && ['onesy-Image-picture'], classes.picture])
} : {};
if (!rootIsImage && !noImage) {
const imgElement = /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
src: src,
alt: alt || '',
width: width,
height: height,
loading: loading,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Image', theme) && ['onesy-Image-img'], className, classes.img]),
style: style
});
other.children = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, _objectSpread(_objectSpread({}, WrapperProps), {}, {
children: [(sources === null || sources === void 0 ? void 0 : sources.length) && sources.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("source", _objectSpread({}, item), index)), children, imgElement]
})), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread({
Component: "figcaption",
version: "b3"
}, DescriptionProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Image', theme) && ['onesy-Image-figcaption'], DescriptionProps === null || DescriptionProps === void 0 ? void 0 : DescriptionProps.className, className, classes.figcaption, classes[`align_description_${alignDescription}`]]),
children: description
}))]
});
}
if (noImage) {
Component = Line;
other.fullWidth = true;
other.children = children;
other.style = style;
delete other.Component;
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread(_objectSpread({
ref: item_0 => {
if (ref) {
if ((0, _utils.is)('function', ref)) ref(item_0);else ref.current = item_0;
}
setRoot(item_0);
refs.root.current = item_0;
}
}, RootProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Image', theme) && ['onesy-Image-root', noImage && 'onesy-Image-no-image', picture && !description && `onesy-Image-picture`], RootProps === null || RootProps === void 0 ? void 0 : RootProps.className, className, classes.root, classes[`align_${align}`], noImage && classes.noImage, responsive && classes.responsive, maxWidth && classes[`maxWidth_${maxWidth}`], fullWidth && classes.fullWidth, rootIsImage && classes.root_img, picture && !description && classes.root_picture, description && classes.root_figure])
}, other));
};
Image.displayName = 'onesy-Image';
var _default = exports.default = Image;