@selfcommunity/react-ui 0.11.0-mui7.19 → 0.11.0-mui7.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/FeedObjectMediaPreview/FeedObjectMediaPreview.js +1 -1
- package/lib/cjs/components/PlatformWidget/PlatformWidget.js +2 -2
- package/lib/cjs/shared/Media/File/DisplayComponent.js +1 -1
- package/lib/cjs/shared/Media/Link/DisplayComponent.js +4 -12
- package/lib/esm/components/FeedObjectMediaPreview/FeedObjectMediaPreview.js +1 -1
- package/lib/esm/components/PlatformWidget/PlatformWidget.js +2 -2
- package/lib/esm/shared/Media/File/DisplayComponent.js +1 -1
- package/lib/esm/shared/Media/Link/DisplayComponent.js +5 -13
- package/lib/umd/react-ui.js +1 -1
- package/package.json +8 -8
|
@@ -59,6 +59,6 @@ exports.default = (inProps) => {
|
|
|
59
59
|
*/
|
|
60
60
|
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: mediaObjectTypes.map((mediaObject) => {
|
|
61
61
|
const { displayProps = {} } = mediaObject;
|
|
62
|
-
return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(mediaObject.displayComponent, Object.assign({ medias: medias }, displayProps, { onMediaClick: handleMediaClick })) }, mediaObject.name));
|
|
62
|
+
return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(mediaObject.displayComponent, Object.assign({ medias: medias }, displayProps, (mediaObject.name !== 'share' && { onMediaClick: handleMediaClick }))) }, mediaObject.name));
|
|
63
63
|
}) })));
|
|
64
64
|
};
|
|
@@ -57,11 +57,11 @@ const Root = (0, material_1.styled)(Widget_1.default, {
|
|
|
57
57
|
display: 'flex',
|
|
58
58
|
paddingBottom: 0,
|
|
59
59
|
boxShadow: 'inset -1px -3px 7px -4px #CECECE',
|
|
60
|
-
|
|
60
|
+
WebkitOverflowScrolling: 'touch',
|
|
61
61
|
overflowX: 'auto',
|
|
62
62
|
overflowY: 'hidden',
|
|
63
63
|
scrollbarWidth: 'none' /* Firefox */,
|
|
64
|
-
|
|
64
|
+
MsOverflowStyle: 'none' /* IE and Edge */,
|
|
65
65
|
'&::-webkit-scrollbar': {
|
|
66
66
|
display: 'none'
|
|
67
67
|
}
|
|
@@ -63,7 +63,7 @@ exports.default = (props) => {
|
|
|
63
63
|
return;
|
|
64
64
|
}
|
|
65
65
|
setPreview(index);
|
|
66
|
-
onMediaClick(images[index]);
|
|
66
|
+
onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(images[index]);
|
|
67
67
|
}, [gallery, setPreview, images, onMediaClick]);
|
|
68
68
|
// RENDERING
|
|
69
69
|
const renderTitle = (o) => {
|
|
@@ -27,13 +27,13 @@ const classes = {
|
|
|
27
27
|
const Root = (0, material_1.styled)(material_1.Box, {
|
|
28
28
|
name: constants_1.PREFIX,
|
|
29
29
|
slot: 'DisplayRoot'
|
|
30
|
-
})(
|
|
30
|
+
})();
|
|
31
31
|
exports.default = (props) => {
|
|
32
32
|
// PROPS
|
|
33
33
|
const { className = '', medias, fullWidth = false, onMediaClick = null } = props, rest = tslib_1.__rest(props, ["className", "medias", "fullWidth", "onMediaClick"]);
|
|
34
34
|
// HANDLERS
|
|
35
35
|
const handleLinkClick = (link) => {
|
|
36
|
-
onMediaClick
|
|
36
|
+
onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(link);
|
|
37
37
|
};
|
|
38
38
|
// MEMO
|
|
39
39
|
const _medias = (0, react_1.useMemo)(() => medias.filter(filter_1.default), [medias]);
|
|
@@ -48,15 +48,7 @@ exports.default = (props) => {
|
|
|
48
48
|
// return renderHtml(media, key);
|
|
49
49
|
// }
|
|
50
50
|
const domain = new URL(media.embed.metadata.url).hostname.replace('www.', '');
|
|
51
|
-
return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.displayLink }, { children: [media.embed.metadata.images && media.embed.metadata.images.length > 0 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: fullWidth ? ((0, jsx_runtime_1.jsx)(material_1.Box, { className: (0, classnames_1.default)(classes.thumbnailFullWidth, classes.image), style: { background: `url(${media.image})`, paddingBottom: `${100 / media.image_width / media.image_height}%` } })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { className: (0, classnames_1.default)(classes.thumbnail, classes.image), style: { background: `url(${media.image})` } })) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.snippet }, { children: [(0, jsx_runtime_1.jsx)("b", Object.assign({ className: classes.snippetTitle }, { children: media.embed.metadata.title })), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: classes.snippetDescription }, { children: media.embed.metadata.description })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: media.embed.metadata.url, target:
|
|
52
|
-
};
|
|
53
|
-
/**
|
|
54
|
-
* Render html embed
|
|
55
|
-
* @param media
|
|
56
|
-
* @param key
|
|
57
|
-
*/
|
|
58
|
-
const renderHtml = (media, key) => {
|
|
59
|
-
return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.displayHtmlWrap }, { children: [(0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: media.embed.metadata.html }, className: classes.displayHtml }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.displayHtmlPlaceholder, style: { paddingTop: `${(100 * media.embed.metadata.height) / media.embed.metadata.width}%`, maxHeight: media.embed.metadata.height } }, { children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20, className: classes.displayHtmlLoading }) }))] }), key));
|
|
51
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.displayLink }, { children: [media.embed.metadata.images && media.embed.metadata.images.length > 0 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: fullWidth ? ((0, jsx_runtime_1.jsx)(material_1.Box, { className: (0, classnames_1.default)(classes.thumbnailFullWidth, classes.image), style: { background: `url(${media.image})`, paddingBottom: `${100 / media.image_width / media.image_height}%` } })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { className: (0, classnames_1.default)(classes.thumbnail, classes.image), style: { background: `url(${media.image})` } })) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.snippet }, { children: [(0, jsx_runtime_1.jsx)("b", Object.assign({ className: classes.snippetTitle }, { children: media.embed.metadata.title })), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: classes.snippetDescription }, { children: media.embed.metadata.description })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: media.embed.metadata.url, target: "_blank", onClick: () => handleLinkClick(media) }, { children: domain }))] })), (0, jsx_runtime_1.jsx)("div", { style: { clear: 'both' } })] }), key));
|
|
60
52
|
};
|
|
61
53
|
/**
|
|
62
54
|
* Renders component
|
|
@@ -66,7 +58,7 @@ exports.default = (props) => {
|
|
|
66
58
|
}
|
|
67
59
|
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.displayRoot) }, rest, { children: _medias.map((l, i) => {
|
|
68
60
|
if (l.embed.metadata && l.embed.metadata.type === Media_1.MEDIA_TYPE_VIDEO) {
|
|
69
|
-
return (0, jsx_runtime_1.jsx)(AutoPlayer_1.default, { url: l.url, width:
|
|
61
|
+
return (0, jsx_runtime_1.jsx)(AutoPlayer_1.default, { url: l.url, width: "100%", height: 360, onVideoWatch: () => handleLinkClick(l) }, i);
|
|
70
62
|
}
|
|
71
63
|
return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: renderPreview(l, i) }, i);
|
|
72
64
|
}) })));
|
|
@@ -57,6 +57,6 @@ export default (inProps) => {
|
|
|
57
57
|
*/
|
|
58
58
|
return (_jsx(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: mediaObjectTypes.map((mediaObject) => {
|
|
59
59
|
const { displayProps = {} } = mediaObject;
|
|
60
|
-
return (_jsx("div", { children: _jsx(mediaObject.displayComponent, Object.assign({ medias: medias }, displayProps, { onMediaClick: handleMediaClick })) }, mediaObject.name));
|
|
60
|
+
return (_jsx("div", { children: _jsx(mediaObject.displayComponent, Object.assign({ medias: medias }, displayProps, (mediaObject.name !== 'share' && { onMediaClick: handleMediaClick }))) }, mediaObject.name));
|
|
61
61
|
}) })));
|
|
62
62
|
};
|
|
@@ -55,11 +55,11 @@ const Root = styled(Widget, {
|
|
|
55
55
|
display: 'flex',
|
|
56
56
|
paddingBottom: 0,
|
|
57
57
|
boxShadow: 'inset -1px -3px 7px -4px #CECECE',
|
|
58
|
-
|
|
58
|
+
WebkitOverflowScrolling: 'touch',
|
|
59
59
|
overflowX: 'auto',
|
|
60
60
|
overflowY: 'hidden',
|
|
61
61
|
scrollbarWidth: 'none' /* Firefox */,
|
|
62
|
-
|
|
62
|
+
MsOverflowStyle: 'none' /* IE and Edge */,
|
|
63
63
|
'&::-webkit-scrollbar': {
|
|
64
64
|
display: 'none'
|
|
65
65
|
}
|
|
@@ -61,7 +61,7 @@ export default (props) => {
|
|
|
61
61
|
return;
|
|
62
62
|
}
|
|
63
63
|
setPreview(index);
|
|
64
|
-
onMediaClick(images[index]);
|
|
64
|
+
onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(images[index]);
|
|
65
65
|
}, [gallery, setPreview, images, onMediaClick]);
|
|
66
66
|
// RENDERING
|
|
67
67
|
const renderTitle = (o) => {
|
|
@@ -5,7 +5,7 @@ import { MEDIA_TYPE_VIDEO } from '../../../constants/Media';
|
|
|
5
5
|
import AutoPlayer from '../../AutoPlayer';
|
|
6
6
|
import classNames from 'classnames';
|
|
7
7
|
import { PREFIX } from './constants';
|
|
8
|
-
import { styled,
|
|
8
|
+
import { styled, Box } from '@mui/material';
|
|
9
9
|
import filter from './filter';
|
|
10
10
|
const classes = {
|
|
11
11
|
displayRoot: `${PREFIX}-display-root`,
|
|
@@ -25,13 +25,13 @@ const classes = {
|
|
|
25
25
|
const Root = styled(Box, {
|
|
26
26
|
name: PREFIX,
|
|
27
27
|
slot: 'DisplayRoot'
|
|
28
|
-
})(
|
|
28
|
+
})();
|
|
29
29
|
export default (props) => {
|
|
30
30
|
// PROPS
|
|
31
31
|
const { className = '', medias, fullWidth = false, onMediaClick = null } = props, rest = __rest(props, ["className", "medias", "fullWidth", "onMediaClick"]);
|
|
32
32
|
// HANDLERS
|
|
33
33
|
const handleLinkClick = (link) => {
|
|
34
|
-
onMediaClick
|
|
34
|
+
onMediaClick === null || onMediaClick === void 0 ? void 0 : onMediaClick(link);
|
|
35
35
|
};
|
|
36
36
|
// MEMO
|
|
37
37
|
const _medias = useMemo(() => medias.filter(filter), [medias]);
|
|
@@ -46,15 +46,7 @@ export default (props) => {
|
|
|
46
46
|
// return renderHtml(media, key);
|
|
47
47
|
// }
|
|
48
48
|
const domain = new URL(media.embed.metadata.url).hostname.replace('www.', '');
|
|
49
|
-
return (_jsxs(Box, Object.assign({ className: classes.displayLink }, { children: [media.embed.metadata.images && media.embed.metadata.images.length > 0 && (_jsx(_Fragment, { children: fullWidth ? (_jsx(Box, { className: classNames(classes.thumbnailFullWidth, classes.image), style: { background: `url(${media.image})`, paddingBottom: `${100 / media.image_width / media.image_height}%` } })) : (_jsx(Box, { className: classNames(classes.thumbnail, classes.image), style: { background: `url(${media.image})` } })) })), _jsxs(Box, Object.assign({ className: classes.snippet }, { children: [_jsx("b", Object.assign({ className: classes.snippetTitle }, { children: media.embed.metadata.title })), _jsx("br", {}), _jsx("p", Object.assign({ className: classes.snippetDescription }, { children: media.embed.metadata.description })), _jsx("a", Object.assign({ href: media.embed.metadata.url, target:
|
|
50
|
-
};
|
|
51
|
-
/**
|
|
52
|
-
* Render html embed
|
|
53
|
-
* @param media
|
|
54
|
-
* @param key
|
|
55
|
-
*/
|
|
56
|
-
const renderHtml = (media, key) => {
|
|
57
|
-
return (_jsxs(Box, Object.assign({ className: classes.displayHtmlWrap }, { children: [_jsx("div", { dangerouslySetInnerHTML: { __html: media.embed.metadata.html }, className: classes.displayHtml }), _jsx("div", Object.assign({ className: classes.displayHtmlPlaceholder, style: { paddingTop: `${(100 * media.embed.metadata.height) / media.embed.metadata.width}%`, maxHeight: media.embed.metadata.height } }, { children: _jsx(CircularProgress, { size: 20, className: classes.displayHtmlLoading }) }))] }), key));
|
|
49
|
+
return (_jsxs(Box, Object.assign({ className: classes.displayLink }, { children: [media.embed.metadata.images && media.embed.metadata.images.length > 0 && (_jsx(_Fragment, { children: fullWidth ? (_jsx(Box, { className: classNames(classes.thumbnailFullWidth, classes.image), style: { background: `url(${media.image})`, paddingBottom: `${100 / media.image_width / media.image_height}%` } })) : (_jsx(Box, { className: classNames(classes.thumbnail, classes.image), style: { background: `url(${media.image})` } })) })), _jsxs(Box, Object.assign({ className: classes.snippet }, { children: [_jsx("b", Object.assign({ className: classes.snippetTitle }, { children: media.embed.metadata.title })), _jsx("br", {}), _jsx("p", Object.assign({ className: classes.snippetDescription }, { children: media.embed.metadata.description })), _jsx("a", Object.assign({ href: media.embed.metadata.url, target: "_blank", onClick: () => handleLinkClick(media) }, { children: domain }))] })), _jsx("div", { style: { clear: 'both' } })] }), key));
|
|
58
50
|
};
|
|
59
51
|
/**
|
|
60
52
|
* Renders component
|
|
@@ -64,7 +56,7 @@ export default (props) => {
|
|
|
64
56
|
}
|
|
65
57
|
return (_jsx(Root, Object.assign({ className: classNames(className, classes.displayRoot) }, rest, { children: _medias.map((l, i) => {
|
|
66
58
|
if (l.embed.metadata && l.embed.metadata.type === MEDIA_TYPE_VIDEO) {
|
|
67
|
-
return _jsx(AutoPlayer, { url: l.url, width:
|
|
59
|
+
return _jsx(AutoPlayer, { url: l.url, width: "100%", height: 360, onVideoWatch: () => handleLinkClick(l) }, i);
|
|
68
60
|
}
|
|
69
61
|
return _jsx(React.Fragment, { children: renderPreview(l, i) }, i);
|
|
70
62
|
}) })));
|