@selfcommunity/react-ui 0.7.0-alpha.32 → 0.7.0-alpha.320

package/lib/cjs/shared/MessageChunkUploader/index.js

@@ -1,48 +1,27 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
 const chunked_uploady_1 = require("@rpldy/chunked-uploady");
 const api_services_1 = require("@selfcommunity/api-services");
+const types_1 = require("@selfcommunity/types");
 const react_core_1 = require("@selfcommunity/react-core");
 const uploady_1 = require("@rpldy/uploady");
-const react_1 = __importStar(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const react_intl_1 = require("react-intl");
-const common_1 = __importDefault(require("../../messages/common"));
+const common_1 = tslib_1.__importDefault(require("../../messages/common"));
+const thumbnailCoverter_1 = require("../../utils/thumbnailCoverter");
+const Errors_1 = require("../../constants/Errors");
+const utils_1 = require("@selfcommunity/utils");
 exports.default = (props) => {
     // PROPS
-    const { type = null, onSuccess = null, onProgress = null, onError = null, onStart = null } = props;
+    const { type = null, onSuccess = null, onProgress = null, onError = null } = props;
     // REFS
     const firstRender = (0, react_1.useRef)(true);
     const chunkStateRef = react_1.default.useRef({ chunks: {}, setChunk: null, setChunks: null });
     // STATE
     const [chunks, setChunks] = (0, react_1.useState)({});
     const setChunk = (chunk) => {
-        const _chunks = Object.assign(Object.assign({}, chunks), { [chunk.id]: Object.assign(Object.assign({}, chunks[chunk.id]), chunk) });
+        const _chunks = Object.assign(Object.assign({}, chunkStateRef.current.chunks), { [chunk.id]: Object.assign(Object.assign({}, chunkStateRef.current.chunks[chunk.id]), chunk) });
         setChunks(_chunks);
         chunkStateRef.current.chunks = _chunks;
     };
@@ -53,6 +32,9 @@ exports.default = (props) => {
     const scContext = (0, react_core_1.useSCContext)();
     // INTL
     const intl = (0, react_intl_1.useIntl)();
+    const isImageType = (type) => {
+        return type.startsWith(types_1.SCMessageFileType.IMAGE);
+    };
     // component update
     (0, react_1.useEffect)(() => {
         if (firstRender.current) {
@@ -63,54 +45,92 @@ exports.default = (props) => {
     }, [chunks]);
     // LISTENERS
     (0, uploady_1.useItemStartListener)((item) => {
-        onStart(item.file.type);
-        if (item.file.type.startsWith('image/')) {
+        if (!item.file.type.startsWith(types_1.SCMessageFileType.DOCUMENT)) {
             const reader = new FileReader();
             reader.onload = (e) => {
-                chunkStateRef.current.setChunk({ id: item.id, url: e.target.result });
+                if (isImageType(item.file.type)) {
+                    chunkStateRef.current.setChunk({ id: item.id, file_url: e.target.result });
+                }
+                else {
+                    chunkStateRef.current.setChunk({ id: item.id, video_url: e.target.result });
+                }
             };
             // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
             // @ts-ignore
             reader.readAsDataURL(item.file);
         }
-        chunkStateRef.current.setChunk({ id: item.id, [`file_uuid`]: null, completed: 0, filename: item.file.name, [`qqtotalparts`]: null });
+        chunkStateRef.current.setChunk({ id: item.id, file_uuid: null, completed: 0, file: item.file, totalparts: null });
     });
     (0, uploady_1.useItemProgressListener)((item) => {
         chunkStateRef.current.setChunk({ id: item.id, completed: item.completed });
     });
+    const uploadThumbnail = (item, file) => {
+        const formData = new FormData();
+        formData.append('file', file);
+        formData.append('parentuuid', item.uploadResponse.results[0].data.file_uuid);
+        api_services_1.http
+            .request({
+            url: api_services_1.Endpoints.PrivateMessageUploadThumbnail.url(),
+            method: api_services_1.Endpoints.PrivateMessageUploadThumbnail.method,
+            data: formData,
+            headers: { 'Content-Type': 'multipart/form-data' }
+        })
+            .then((res) => {
+            const _chunks = Object.assign({}, chunkStateRef.current.chunks);
+            delete _chunks[item.id];
+            chunkStateRef.current.setChunks(_chunks);
+            let data = res.data;
+            data.file = item.file;
+            onSuccess(data);
+        })
+            .catch((error) => {
+            error = (0, api_services_1.formatHttpErrorCode)(error);
+            onError(Object.assign({}, chunkStateRef.current.chunks[item.id]), error.fileError
+                ? intl.formatMessage(common_1.default.fileUploadErrorGeneric)
+                : intl.formatMessage(common_1.default.messageFileUploadError, { filename: item.file.name }));
+            const _chunks = Object.assign({}, chunkStateRef.current.chunks);
+            delete _chunks[item.id];
+            chunkStateRef.current.setChunks(_chunks);
+        });
+    };
+    const generateImageThumbnail = (callBack, item, fileUrl) => {
+        callBack(fileUrl, item.file.name)
+            .then((file) => {
+            uploadThumbnail(item, file);
+        })
+            .catch((error) => {
+            console.log(error);
+            onError(Object.assign({}, chunkStateRef.current.chunks[item.id]), intl.formatMessage(common_1.default.messageFileUploadError, { filename: item.file.name }));
+            const _chunks = Object.assign({}, chunkStateRef.current.chunks);
+            delete _chunks[item.id];
+            chunkStateRef.current.setChunks(_chunks);
+        });
+    };
     (0, chunked_uploady_1.useItemFinishListener)((item) => {
-        if (item.file.size < 10485760) {
+        const callBack = item.file.type.startsWith(types_1.SCMessageFileType.DOCUMENT) ? thumbnailCoverter_1.pdfToJpeg : thumbnailCoverter_1.createVideoThumbnail;
+        const formData = new FormData();
+        formData.append('uuid', chunkStateRef.current.chunks[item.id].file_uuid);
+        formData.append('filename', chunkStateRef.current.chunks[item.id].file.name);
+        formData.append('totalparts', chunkStateRef.current.chunks[item.id].totalparts);
+        api_services_1.http
+            .request({
+            url: api_services_1.Endpoints.PrivateMessageChunkUploadDone.url(),
+            method: api_services_1.Endpoints.PrivateMessageChunkUploadDone.method,
+            data: formData,
+            headers: { 'Content-Type': 'multipart/form-data' }
+        })
+            .then((res) => {
+            isImageType(item.file.type) ? uploadThumbnail(item, item.file) : generateImageThumbnail(callBack, item, res.data.file_url);
+        })
+            .catch((error) => {
+            error = (0, api_services_1.formatHttpErrorCode)(error);
+            onError(Object.assign({}, chunkStateRef.current.chunks[item.id]), error.fileError
+                ? intl.formatMessage(common_1.default.fileUploadErrorGeneric)
+                : intl.formatMessage(common_1.default.messageFileUploadError, { filename: item.file.name }));
             const _chunks = Object.assign({}, chunkStateRef.current.chunks);
             delete _chunks[item.id];
             chunkStateRef.current.setChunks(_chunks);
-            onSuccess(item.uploadResponse.results[0].data);
-        }
-        else {
-            const formData = new FormData();
-            formData.append('qquuid', chunkStateRef.current.chunks[item.id].file_uuid);
-            formData.append('qqfilename', chunkStateRef.current.chunks[item.id].filename);
-            formData.append('qqtotalparts', chunkStateRef.current.chunks[item.id].qqtotalparts);
-            api_services_1.http
-                .request({
-                url: api_services_1.Endpoints.PrivateMessageChunkUploadDone.url(),
-                method: api_services_1.Endpoints.PrivateMessageChunkUploadDone.method,
-                data: formData,
-                headers: { 'Content-Type': 'multipart/form-data' }
-            })
-                .then((res) => {
-                const _chunks = Object.assign({}, chunkStateRef.current.chunks);
-                delete _chunks[item.id];
-                chunkStateRef.current.setChunks(_chunks);
-                onSuccess(res.data);
-            })
-                .catch((error) => {
-                error = (0, api_services_1.formatHttpError)(error);
-                onError(Object.assign({}, chunkStateRef.current.chunks[item.id]), error.error);
-                const _chunks = Object.assign({}, chunkStateRef.current.chunks);
-                delete _chunks[item.id];
-                chunkStateRef.current.setChunks(_chunks);
-            });
-        }
+        });
     });
     (0, chunked_uploady_1.useItemErrorListener)((item) => {
         onError(Object.assign({}, chunkStateRef.current.chunks[item.id]), intl.formatMessage(common_1.default.error));
@@ -119,32 +139,23 @@ exports.default = (props) => {
         chunkStateRef.current.setChunks(_chunks);
     });
     (0, chunked_uploady_1.useChunkStartListener)((data) => {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-        // @ts-ignore
-        chunkStateRef.current.setChunk({ id: data.item.id, [`qqpartindex`]: data.chunk.index });
-        chunkStateRef.current.setChunk({ id: data.item.id, [`qqtotalparts`]: data.totalCount });
         const res = {
             url: `${scContext.settings.portal}${api_services_1.Endpoints.PrivateMessageUploadMediaInChunks.url()}`,
             sendOptions: {
-                paramName: 'qqfile',
+                paramName: 'file',
                 headers: { Authorization: `Bearer ${scContext.settings.session.authToken.accessToken}` },
                 method: api_services_1.Endpoints.PrivateMessageUploadMediaInChunks.method
             }
         };
         if (data.totalCount > 1) {
-            res.sendOptions.params = {
-                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                // @ts-ignore
-                qqpartindex: data.chunkIndex,
-                qqtotalparts: data.totalCount
-            };
-        }
-        if (chunkStateRef.current.chunks[data.item.id].file_uuid && data.totalCount > 1) {
-            res.sendOptions.params = {
-                [`qquuid`]: chunkStateRef.current.chunks[data.item.id].file_uuid,
-                [`qqtotalparts`]: chunkStateRef.current.chunks[data.item.id].qqtotalparts,
-                [`qqpartindex`]: chunkStateRef.current.chunks[data.item.id].qqpartindex
+            let _params = {
+                partindex: data.chunk.index,
+                totalparts: data.totalCount
             };
+            if (chunkStateRef.current.chunks[data.item.id].file_uuid) {
+                _params['uuid'] = chunkStateRef.current.chunks[data.item.id].file_uuid;
+            }
+            res.sendOptions.params = _params;
         }
         else {
             chunkStateRef.current.setChunk({ id: data.item.id, type: type || data.sendOptions.paramName });
@@ -152,19 +163,47 @@ exports.default = (props) => {
         return res;
     });
     (0, chunked_uploady_1.useChunkFinishListener)((data) => {
-        chunkStateRef.current.setChunk({ id: data.item.id, [`file_uuid`]: data.uploadData.response.data.file_uuid });
+        chunkStateRef.current.setChunk({
+            id: data.item.id,
+            file_uuid: data.uploadData.response.data.file_uuid,
+            totalparts: data.chunk.index + 1
+        });
     });
     (0, chunked_uploady_1.useRequestPreSend)(({ items, options }) => {
         if (items.length == 0) {
             return Promise.resolve({ options });
         }
-        //returned object can be wrapped with a promise
-        return Promise.resolve({
-            options: {
-                inputFieldName: options.inputFieldName
-            }
-        });
+        else if (isImageType(items[0].file.type)) {
+            return new Promise((resolve, reject) => {
+                Promise.all(items.map((item) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+                    return Object.assign(Object.assign({}, item), { file: item.file.type === 'image/gif' ? item.file : yield (0, thumbnailCoverter_1.createThumbnail)(item.file) });
+                })))
+                    .then((items) => {
+                    resolve({
+                        items: items,
+                        options: {
+                            inputFieldName: options.inputFieldName
+                        }
+                    });
+                })
+                    .catch((error) => {
+                    utils_1.Logger.error(error, Errors_1.SCOPE_SC_UI);
+                    resolve({
+                        options: {
+                            inputFieldName: options.inputFieldName
+                        }
+                    });
+                });
+            });
+        }
+        else {
+            //returned object can be wrapped with a promise
+            return Promise.resolve({
+                options: {
+                    inputFieldName: options.inputFieldName
+                }
+            });
+        }
     });
     return null;
 };
-//# sourceMappingURL=index.js.map

package/lib/cjs/shared/MetadataField/MetadataField.d.ts

@@ -1,8 +1,7 @@
+import { TextFieldProps } from '@mui/material';
 import { SCMetadataType } from '@selfcommunity/types';
-import { TextFieldProps } from '@mui/material/TextField';
 export declare type MetadataFieldProps = TextFieldProps & {
     metadata: SCMetadataType;
 };
 declare const MetadataField: (props: MetadataFieldProps) => JSX.Element;
 export default MetadataField;
-//# sourceMappingURL=MetadataField.d.ts.map

package/lib/cjs/shared/MetadataField/MetadataField.js

@@ -1,48 +1,39 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const material_1 = require("@mui/material");
 const types_1 = require("@selfcommunity/types");
-const EmailTextField_1 = __importDefault(require("../EmailTextField"));
-const UrlTextField_1 = __importDefault(require("../UrlTextField"));
-const PhoneTextField_1 = __importDefault(require("../PhoneTextField"));
+const EmailTextField_1 = tslib_1.__importDefault(require("../EmailTextField"));
+const UrlTextField_1 = tslib_1.__importDefault(require("../UrlTextField"));
+const PhoneTextField_1 = tslib_1.__importDefault(require("../PhoneTextField"));
 const MetadataField = (props) => {
     // PROPS
-    const { metadata, className = '' } = props, rest = __rest(props, ["metadata", "className"]);
+    const { metadata, className = '', label } = props, rest = tslib_1.__rest(props, ["metadata", "className", "label"]);
     // RENDER
     let component = null;
+    const _label = label !== null && label !== void 0 ? label : metadata.label;
     switch (metadata === null || metadata === void 0 ? void 0 : metadata.type) {
         case types_1.SCMetadataTypeFieldType.EMAIL:
-            component = react_1.default.createElement(EmailTextField_1.default, Object.assign({}, rest, { className: className, label: metadata.label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory }));
+            component = react_1.default.createElement(EmailTextField_1.default, Object.assign({}, rest, { className: className, label: _label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory }));
             break;
         case types_1.SCMetadataTypeFieldType.URL:
-            component = react_1.default.createElement(UrlTextField_1.default, Object.assign({}, rest, { type: "url", className: className, label: metadata.label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory }));
+            component = react_1.default.createElement(UrlTextField_1.default, Object.assign({}, rest, { type: "url", className: className, label: _label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory }));
             break;
         case types_1.SCMetadataTypeFieldType.PHONE_NUMBER:
-            component = react_1.default.createElement(PhoneTextField_1.default, Object.assign({}, rest, { className: className, label: metadata.label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory }));
+            component = react_1.default.createElement(PhoneTextField_1.default, Object.assign({}, rest, { className: className, label: _label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory }));
             break;
         case types_1.SCMetadataTypeFieldType.ENUM:
-            component = (react_1.default.createElement(material_1.TextField, Object.assign({}, rest, { className: className, label: metadata.label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory, select: true }), metadata === null || metadata === void 0 ? void 0 : metadata.type_options.map((option) => (react_1.default.createElement(material_1.MenuItem, { key: option, value: option }, option)))));
+            component = (react_1.default.createElement(material_1.TextField, Object.assign({}, rest, { className: className, label: _label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory, select: true }), metadata === null || metadata === void 0 ? void 0 : metadata.type_options.map((option) => (react_1.default.createElement(material_1.MenuItem, { key: option, value: option }, option)))));
+            break;
+        case types_1.SCMetadataTypeFieldType.CHECKBOX:
+            const { value } = rest;
+            component = (react_1.default.createElement(material_1.FormControlLabel, { className: className, control: react_1.default.createElement(material_1.Checkbox, { required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory, checked: Boolean(value) }), label: _label }));
             break;
         default:
-            component = react_1.default.createElement(material_1.TextField, Object.assign({}, rest, { className: className, label: metadata.label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory }));
+            component = react_1.default.createElement(material_1.TextField, Object.assign({}, rest, { className: className, label: _label, required: metadata === null || metadata === void 0 ? void 0 : metadata.mandatory }));
             break;
     }
     return react_1.default.createElement(react_1.default.Fragment, null, component);
 };
 exports.default = MetadataField;
-//# sourceMappingURL=MetadataField.js.map

package/lib/cjs/shared/MetadataField/index.d.ts

@@ -1,3 +1,2 @@
 import MetadataField from './MetadataField';
 export default MetadataField;
-//# sourceMappingURL=index.d.ts.map

package/lib/cjs/shared/MetadataField/index.js

@@ -1,8 +1,5 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const MetadataField_1 = __importDefault(require("./MetadataField"));
+const tslib_1 = require("tslib");
+const MetadataField_1 = tslib_1.__importDefault(require("./MetadataField"));
 exports.default = MetadataField_1.default;
-//# sourceMappingURL=index.js.map

package/lib/cjs/shared/NewChip/NewChip.d.ts

@@ -11,4 +11,3 @@ export interface NotificationNewChipProps extends ChipProps {
     [p: string]: any;
 }
 export default function NewChip(inProps: NotificationNewChipProps): JSX.Element;
-//# sourceMappingURL=NewChip.d.ts.map

package/lib/cjs/shared/NewChip/NewChip.js

@@ -1,14 +1,12 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
 const system_1 = require("@mui/system");
-const classnames_1 = __importDefault(require("classnames"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const PREFIX = 'SCNotificationNewChip';
 const classes = {
     root: `${PREFIX}-root`
@@ -38,4 +36,3 @@ function NewChip(inProps) {
     return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.notification.notificationNewChip.label", defaultMessage: "ui.notification.notificationNewChip.label" }), size: "small", color: "error" }, props)));
 }
 exports.default = NewChip;
-//# sourceMappingURL=NewChip.js.map

package/lib/cjs/shared/NotificationItem/NotificationItem.d.ts

@@ -8,11 +8,6 @@ export interface NotificationItemProps extends Pick<WidgetProps, Exclude<keyof W
      * @default null
      */
     id?: string;
-    /**
-     * Overrides or extends the styles applied to the component.
-     * @default null
-     */
-    className?: string;
     /**
      * Notification Object template type
      * @default 'detail'
@@ -83,7 +78,7 @@ export interface NotificationItemProps extends Pick<WidgetProps, Exclude<keyof W
  |Rule Name|Global class|Description|
  |---|---|---|
  |root|.SCBaseItem-root|Styles applied to the root element.|
- |newSnippet|.SCBaseItem-new-snippet|Styles applied to the root element when notification is marked as new.|
+ |new|.SCBaseItem-new-snippet|Styles applied to the root element when notification is marked as new.|
  |content|.SCBaseItem-content|Styles applied to the content element.|
  |header|.SCBaseItem-header|Styles applied to the header element.|
  |image|.SCBaseItem-image|Styles applied to image section.|
@@ -98,4 +93,3 @@ export interface NotificationItemProps extends Pick<WidgetProps, Exclude<keyof W
  * @param inProps
  */
 export default function NotificationItem(inProps: NotificationItemProps): JSX.Element;
-//# sourceMappingURL=NotificationItem.d.ts.map

package/lib/cjs/shared/NotificationItem/NotificationItem.js

@@ -1,33 +1,17 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
-const classnames_1 = __importDefault(require("classnames"));
-const Widget_1 = __importDefault(require("../../components/Widget"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Widget_1 = tslib_1.__importDefault(require("../../components/Widget"));
 const system_1 = require("@mui/system");
-const NewChip_1 = __importDefault(require("../NewChip/NewChip"));
-const colors_1 = require("@mui/material/colors");
+const NewChip_1 = tslib_1.__importDefault(require("../NewChip/NewChip"));
 const notification_1 = require("../../types/notification");
 const PREFIX = 'SCNotificationItem';
 const classes = {
     root: `${PREFIX}-root`,
-    content: `${PREFIX}-content`,
-    dense: `${PREFIX}-dense`,
     header: `${PREFIX}-header`,
     image: `${PREFIX}-image`,
     snippetImage: `${PREFIX}-snippet-image`,
@@ -37,117 +21,14 @@ const classes = {
     actions: `${PREFIX}-actions`,
     footer: `${PREFIX}-footer`,
     snippet: `${PREFIX}-snippet`,
-    newSnippet: `${PREFIX}-new-snippet`,
+    new: `${PREFIX}-new`,
     newChip: `${PREFIX}-new-chip`
 };
 const Root = (0, styles_1.styled)(Widget_1.default, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`&.${classes.root}`]: {
-        backgroundColor: 'transparent',
-        width: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        marginTop: theme.spacing(),
-        boxSizing: 'border-box',
-        '&.MuiPaper-elevation': {
-            padding: `${theme.spacing()} ${theme.spacing(2)}`
-        },
-        '&.MuiPaper-elevation0': {
-            borderRadius: 0,
-            [`& .${classes.actions}`]: {
-                right: 0
-            }
-        }
-    },
-    [`&.${classes.dense}`]: {
-        '& .SCNotificationItem-header': {
-            alignItems: 'center'
-        },
-        marginTop: 0,
-        padding: `0px ${theme.spacing()} !important`
-    },
-    [`&.${classes.snippet}`]: {
-        '&:before': {
-            borderRadius: '5px',
-            width: '4px',
-            left: 1,
-            height: '100%',
-            display: 'block',
-            zIndex: '20',
-            position: 'absolute',
-            content: '" "',
-            backgroundColor: `${colors_1.grey[200]}`
-        },
-        '& .SCNotificationItem-header': {
-            alignItems: 'flex-start'
-        },
-        '& .SCNotificationItem-content': {
-            padding: `5px ${theme.spacing()}`
-        }
-    },
-    [`&.${classes.newSnippet}`]: {
-        '&:before': {
-            backgroundColor: theme.palette.primary.main
-        }
-    },
-    [`& .${classes.content}`]: {
-        width: '100%',
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'center',
-        alignItems: 'center'
-    },
-    [`& .${classes.header}`]: {
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'flex-start',
-        alignItems: 'flex-start',
-        width: '100%',
-        flex: 1
-    },
-    [`& .${classes.image}`]: {
-        flexShrink: 0,
-        marginRight: theme.spacing(1)
-    },
-    [`& .${classes.snippetImage}`]: {
-        paddingLeft: `${theme.spacing()}`,
-        '& .MuiAvatar-root': {
-            width: 25,
-            height: 25
-        }
-    },
-    [`& .${classes.title}`]: {
-        flex: '1 1 auto',
-        textAlign: 'left',
-        width: '100%'
-    },
-    [`& .${classes.primary}`]: {
-        color: theme.palette.text.primary,
-        textOverflow: 'ellipsis',
-        display: 'inline',
-        overflow: 'hidden'
-    },
-    [`& .${classes.secondary}`]: {
-        textOverflow: 'ellipsis',
-        display: 'inline',
-        overflow: 'hidden',
-        color: theme.palette.text.secondary
-    },
-    [`& .${classes.actions}`]: {
-        '> div': {
-            justifyContent: 'flex-end'
-        },
-        flex: 1
-    },
-    [`& .${classes.footer}`]: {
-        padding: `0px ${theme.spacing()}`,
-        width: '100%'
-    }
-}));
+})(({ theme }) => ({}));
 /**
  * > API documentation for the Community-JS BaseItem component. Learn about the available props and the CSS API.
 
@@ -167,7 +48,7 @@ const Root = (0, styles_1.styled)(Widget_1.default, {
  |Rule Name|Global class|Description|
  |---|---|---|
  |root|.SCBaseItem-root|Styles applied to the root element.|
- |newSnippet|.SCBaseItem-new-snippet|Styles applied to the root element when notification is marked as new.|
+ |new|.SCBaseItem-new-snippet|Styles applied to the root element when notification is marked as new.|
  |content|.SCBaseItem-content|Styles applied to the content element.|
  |header|.SCBaseItem-header|Styles applied to the header element.|
  |image|.SCBaseItem-image|Styles applied to image section.|
@@ -187,26 +68,19 @@ function NotificationItem(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { id = null, className = null, image = null, disableTypography = false, primary = null, primaryTypographyProps = { component: 'span', variant: 'body1' }, secondary = null, secondaryTypographyProps = { component: 'p', variant: 'body2' }, actions = null, footer = null, template = notification_1.SCNotificationObjectTemplateType.DETAIL, isNew = false, elevation = 0 } = props, rest = __rest(props, ["id", "className", "image", "disableTypography", "primary", "primaryTypographyProps", "secondary", "secondaryTypographyProps", "actions", "footer", "template", "isNew", "elevation"]);
-    const isSnippetTemplate = template === notification_1.SCNotificationObjectTemplateType.SNIPPET;
-    const isDetailTemplate = template === notification_1.SCNotificationObjectTemplateType.DETAIL;
-    const isToastTemplate = template === notification_1.SCNotificationObjectTemplateType.TOAST;
+    const { id = null, className = null, image = null, disableTypography = false, primary = null, primaryTypographyProps = { component: 'span', variant: 'body1' }, secondary = null, secondaryTypographyProps = { component: 'p', variant: 'body2' }, actions = null, footer = null, template = notification_1.SCNotificationObjectTemplateType.DETAIL, isNew = false, elevation = 0 } = props, rest = tslib_1.__rest(props, ["id", "className", "image", "disableTypography", "primary", "primaryTypographyProps", "secondary", "secondaryTypographyProps", "actions", "footer", "template", "isNew", "elevation"]);
     // RENDER
-    return (react_1.default.createElement(Root, Object.assign({ id: id }, rest, { className: (0, classnames_1.default)(classes.root, className, {
-            [classes.dense]: isSnippetTemplate || isToastTemplate,
-            [classes.snippet]: isSnippetTemplate,
-            [classes.newSnippet]: isSnippetTemplate && isNew
+    return (react_1.default.createElement(Root, Object.assign({ id: id }, rest, { className: (0, classnames_1.default)(classes.root, className, `${PREFIX}-${template}`, {
+            [classes.new]: isNew
         }), elevation: elevation }),
-        react_1.default.createElement(material_1.Box, { className: classes.content },
-            react_1.default.createElement(material_1.Box, { className: classes.header },
-                image && react_1.default.createElement(material_1.Box, { className: (0, classnames_1.default)(classes.image, { [classes.snippetImage]: isSnippetTemplate }) }, image),
-                react_1.default.createElement(material_1.Box, { className: classes.title },
-                    primary && (react_1.default.createElement(material_1.Box, { className: classes.primary },
-                        isDetailTemplate && isNew && react_1.default.createElement(NewChip_1.default, { className: classes.newChip }),
-                        disableTypography ? primary : react_1.default.createElement(material_1.Typography, Object.assign({}, primaryTypographyProps), primary))),
-                    secondary && (react_1.default.createElement(material_1.Box, { className: classes.secondary }, disableTypography ? secondary : react_1.default.createElement(material_1.Typography, Object.assign({}, secondaryTypographyProps), secondary))))),
-            actions && react_1.default.createElement(material_1.Box, { className: classes.actions }, actions)),
+        react_1.default.createElement(material_1.Box, { className: classes.header },
+            image && react_1.default.createElement(material_1.Box, { className: (0, classnames_1.default)(classes.image) }, image),
+            react_1.default.createElement(material_1.Box, { className: classes.title },
+                primary && (react_1.default.createElement(material_1.Box, { className: classes.primary },
+                    template === notification_1.SCNotificationObjectTemplateType.DETAIL && isNew && react_1.default.createElement(NewChip_1.default, { className: classes.newChip }),
+                    disableTypography ? primary : react_1.default.createElement(material_1.Typography, Object.assign({}, primaryTypographyProps), primary))),
+                secondary && (react_1.default.createElement(material_1.Box, { className: classes.secondary }, disableTypography ? secondary : react_1.default.createElement(material_1.Typography, Object.assign({}, secondaryTypographyProps), secondary))))),
+        actions && react_1.default.createElement(material_1.Box, { className: classes.actions }, actions),
         footer && react_1.default.createElement(material_1.Box, { className: classes.footer }, footer)));
 }
 exports.default = NotificationItem;
-//# sourceMappingURL=NotificationItem.js.map

package/lib/cjs/shared/NotificationItem/index.d.ts

@@ -1,4 +1,3 @@
 import NotificationItem, { NotificationItemProps } from './NotificationItem';
 export default NotificationItem;
 export { NotificationItemProps };
-//# sourceMappingURL=index.d.ts.map