@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.
@@ -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
- '-webkit-overflow-scrolling': 'touch',
60
+ WebkitOverflowScrolling: 'touch',
61
61
  overflowX: 'auto',
62
62
  overflowY: 'hidden',
63
63
  scrollbarWidth: 'none' /* Firefox */,
64
- '-ms-overflow-style': 'none' /* IE and Edge */,
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
- })(({ theme }) => ({}));
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 && onMediaClick(link);
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: '_blank', onClick: () => handleLinkClick(media) }, { children: domain }))] })), (0, jsx_runtime_1.jsx)("div", { style: { clear: 'both' } })] }), key));
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: '100%', height: 360, onVideoWatch: () => handleLinkClick(l) }, i);
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
- '-webkit-overflow-scrolling': 'touch',
58
+ WebkitOverflowScrolling: 'touch',
59
59
  overflowX: 'auto',
60
60
  overflowY: 'hidden',
61
61
  scrollbarWidth: 'none' /* Firefox */,
62
- '-ms-overflow-style': 'none' /* IE and Edge */,
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, CircularProgress, Box } from '@mui/material';
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
- })(({ theme }) => ({}));
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 && onMediaClick(link);
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: '_blank', onClick: () => handleLinkClick(media) }, { children: domain }))] })), _jsx("div", { style: { clear: 'both' } })] }), key));
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: '100%', height: 360, onVideoWatch: () => handleLinkClick(l) }, i);
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
  }) })));