@selfcommunity/react-ui 0.7.5-alpha.1 → 0.7.5-alpha.2

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.
Files changed (6) hide show
  1. package/lib/cjs/shared/Media/File/PreviewComponent.d.ts +1 -1
  2. package/lib/cjs/shared/Media/File/PreviewComponent.js +9 -2
  3. package/lib/esm/shared/Media/File/PreviewComponent.d.ts +1 -1
  4. package/lib/esm/shared/Media/File/PreviewComponent.js +10 -3
  5. package/lib/umd/react-ui.js +1 -1
  6. package/package.json +4 -4
package/lib/cjs/shared/Media/File/PreviewComponent.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { BoxProps } from '@mui/material';
3
- import { SCMediaType } from '@selfcommunity/types/src/index';
3
+ import { SCMediaType } from '@selfcommunity/types';
4
4
  export interface PreviewComponentProps extends Omit<BoxProps, 'value' | 'onChange'> {
5
5
  onChange: (value: SCMediaType[]) => void;
6
6
  value: SCMediaType[];
package/lib/cjs/shared/Media/File/PreviewComponent.js CHANGED
@@ -24,6 +24,9 @@ const SORTABLE_ID = 'file_sort';
24
24
  const PreviewComponent = react_1.default.forwardRef((props, ref) => {
25
25
  // PROPS
26
26
  const { className, onChange, value = [] } = props, rest = tslib_1.__rest(props, ["className", "onChange", "value"]);
27
+ // HOOKS
28
+ const theme = (0, material_1.useTheme)();
29
+ const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
27
30
  // MEMO
28
31
  const medias = (0, react_1.useMemo)(() => value.filter(filter_1.default), [value]);
29
32
  // EFFECTS
@@ -41,11 +44,15 @@ const PreviewComponent = react_1.default.forwardRef((props, ref) => {
41
44
  onChange && onChange([...value.filter((media) => medias.findIndex((m) => m.id === media.id) === -1), ...medias]);
42
45
  }, [onChange, value]);
43
46
  const handleDelete = (0, react_1.useCallback)((id) => () => onChange && onChange(value.filter((media) => media.id !== id)), [onChange, value]);
44
- return react_1.default.createElement(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.previewRoot) }, rest), medias.length > 0 && (react_1.default.createElement(react_sortablejs_1.ReactSortable, { id: SORTABLE_ID, list: medias, setList: handleSort }, medias.map((media) => (react_1.default.createElement(material_1.Box, { key: media.id, className: classes.media, sx: { backgroundImage: `url(${(media === null || media === void 0 ? void 0 : media.image_thumbnail) ? media.image_thumbnail.url : media.image})` } },
47
+ // RENDER
48
+ const mediaElements = (0, react_1.useMemo)(() => medias.map((media) => (react_1.default.createElement(material_1.Box, { key: media.id, className: classes.media, sx: { backgroundImage: `url(${(media === null || media === void 0 ? void 0 : media.image_thumbnail) ? media.image_thumbnail.url : media.image})` } },
45
49
  react_1.default.createElement(material_1.IconButton, { className: classes.delete, onClick: handleDelete(media.id), size: "small" },
46
50
  react_1.default.createElement(Icon_1.default, null, "delete")),
47
51
  media.title && react_1.default.createElement(material_1.Typography, { className: classes.title },
48
52
  media.type === Media_1.MEDIA_TYPE_DOCUMENT && react_1.default.createElement(Icon_1.default, null, "picture_as_pdf"),
49
- media.title)))))));
53
+ media.title)))), [medias]);
54
+ return react_1.default.createElement(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.previewRoot) }, rest), medias.length > 0 && (isMobile ?
55
+ react_1.default.createElement(material_1.Box, { id: SORTABLE_ID }, mediaElements) :
56
+ react_1.default.createElement(react_sortablejs_1.ReactSortable, { id: SORTABLE_ID, list: medias, setList: handleSort }, mediaElements)));
50
57
  });
51
58
  exports.default = PreviewComponent;
package/lib/esm/shared/Media/File/PreviewComponent.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { BoxProps } from '@mui/material';
3
- import { SCMediaType } from '@selfcommunity/types/src/index';
3
+ import { SCMediaType } from '@selfcommunity/types';
4
4
  export interface PreviewComponentProps extends Omit<BoxProps, 'value' | 'onChange'> {
5
5
  onChange: (value: SCMediaType[]) => void;
6
6
  value: SCMediaType[];
package/lib/esm/shared/Media/File/PreviewComponent.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { __rest } from "tslib";
2
2
  import React, { useCallback, useEffect, useMemo } from 'react';
3
- import { Box, IconButton, Typography } from '@mui/material';
3
+ import { Box, IconButton, Typography, useMediaQuery, useTheme } from '@mui/material';
4
4
  import { styled } from '@mui/material/styles';
5
5
  import Icon from '@mui/material/Icon';
6
6
  import classNames from 'classnames';
@@ -22,6 +22,9 @@ const SORTABLE_ID = 'file_sort';
22
22
  const PreviewComponent = React.forwardRef((props, ref) => {
23
23
  // PROPS
24
24
  const { className, onChange, value = [] } = props, rest = __rest(props, ["className", "onChange", "value"]);
25
+ // HOOKS
26
+ const theme = useTheme();
27
+ const isMobile = useMediaQuery(theme.breakpoints.down('md'));
25
28
  // MEMO
26
29
  const medias = useMemo(() => value.filter(filter), [value]);
27
30
  // EFFECTS
@@ -39,11 +42,15 @@ const PreviewComponent = React.forwardRef((props, ref) => {
39
42
  onChange && onChange([...value.filter((media) => medias.findIndex((m) => m.id === media.id) === -1), ...medias]);
40
43
  }, [onChange, value]);
41
44
  const handleDelete = useCallback((id) => () => onChange && onChange(value.filter((media) => media.id !== id)), [onChange, value]);
42
- return React.createElement(Root, Object.assign({ ref: ref, className: classNames(className, classes.previewRoot) }, rest), medias.length > 0 && (React.createElement(ReactSortable, { id: SORTABLE_ID, list: medias, setList: handleSort }, medias.map((media) => (React.createElement(Box, { key: media.id, className: classes.media, sx: { backgroundImage: `url(${(media === null || media === void 0 ? void 0 : media.image_thumbnail) ? media.image_thumbnail.url : media.image})` } },
45
+ // RENDER
46
+ const mediaElements = useMemo(() => medias.map((media) => (React.createElement(Box, { key: media.id, className: classes.media, sx: { backgroundImage: `url(${(media === null || media === void 0 ? void 0 : media.image_thumbnail) ? media.image_thumbnail.url : media.image})` } },
43
47
  React.createElement(IconButton, { className: classes.delete, onClick: handleDelete(media.id), size: "small" },
44
48
  React.createElement(Icon, null, "delete")),
45
49
  media.title && React.createElement(Typography, { className: classes.title },
46
50
  media.type === MEDIA_TYPE_DOCUMENT && React.createElement(Icon, null, "picture_as_pdf"),
47
- media.title)))))));
51
+ media.title)))), [medias]);
52
+ return React.createElement(Root, Object.assign({ ref: ref, className: classNames(className, classes.previewRoot) }, rest), medias.length > 0 && (isMobile ?
53
+ React.createElement(Box, { id: SORTABLE_ID }, mediaElements) :
54
+ React.createElement(ReactSortable, { id: SORTABLE_ID, list: medias, setList: handleSort }, mediaElements)));
48
55
  });
49
56
  export default PreviewComponent;