@selfcommunity/react-ui 1.0.4 → 1.1.0-alpha.1

package/lib/cjs/components/CategoryHeader/CategoryHeader.js

@@ -14,6 +14,7 @@ const CategoryFollowersButton_1 = tslib_1.__importDefault(require("../CategoryFo
 const constants_1 = require("./constants");
 const BuyButton_1 = tslib_1.__importDefault(require("../BuyButton"));
 const TagChip_1 = tslib_1.__importDefault(require("../../shared/TagChip"));
+const HtmlInfoDialog_1 = tslib_1.__importDefault(require("../HtmlInfoDialog"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     cover: `${constants_1.PREFIX}-cover`,
@@ -71,6 +72,7 @@ function CategoryHeader(inProps) {
     // STATE
     const { scCategory, setSCCategory } = (0, react_core_1.useSCFetchCategory)({ id: categoryId, category });
     const categoryFollowEnabled = (0, react_core_1.useSCPreferenceEnabled)(react_core_1.SCPreferences.CONFIGURATIONS_CATEGORY_FOLLOW_ENABLED);
+    const [openHtmlInfoDialog, setOpenHtmlInfoDialog] = (0, react_1.useState)(false);
     // PAYMENTS
     const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
     /**
@@ -84,6 +86,6 @@ function CategoryHeader(inProps) {
     if (!scCategory) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Paper, { style: _backgroundCover, classes: { root: classes.cover } }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.info }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.name, gutterBottom: true }, { children: scCategory.name })), scCategory.slogan && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.slogan }, { children: scCategory.slogan }))), showTags && ((_a = scCategory.tags) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.tags }, { children: scCategory.tags.map((t) => ((0, jsx_runtime_1.jsx)(TagChip_1.default, { tag: t, disposable: false, clickable: false }, t.id))) }))), categoryFollowEnabled && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.followed }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.followedCounter, component: "div" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryHeader.followedBy", defaultMessage: "ui.categoryHeader.followedBy", values: { total: scCategory.followers_counter } }) })), (0, jsx_runtime_1.jsx)(CategoryFollowersButton_1.default, Object.assign({ category: scCategory, categoryId: scCategory === null || scCategory === void 0 ? void 0 : scCategory.id }, CategoryFollowersButtonProps))] }))), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.action }, { children: [isPaymentsEnabled && ((_b = scCategory.paywalls) === null || _b === void 0 ? void 0 : _b.length) > 0 && scCategory.payment_order && ((0, jsx_runtime_1.jsx)(BuyButton_1.default, { contentType: types_1.SCContentType.CATEGORY, content: scCategory })), (0, jsx_runtime_1.jsx)(CategoryFollowButton_1.default, Object.assign({ category: scCategory, onFollow: handleFollow }, CategoryFollowButtonProps))] }))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: scCategory.html_info && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", onClick: () => setOpenHtmlInfoDialog(true) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "info" }) }))) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.info }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.name, gutterBottom: true }, { children: scCategory.name })), scCategory.slogan && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.slogan }, { children: scCategory.slogan }))), showTags && ((_a = scCategory.tags) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.tags }, { children: scCategory.tags.map((t) => ((0, jsx_runtime_1.jsx)(TagChip_1.default, { tag: t, disposable: false, clickable: false }, t.id))) }))), categoryFollowEnabled && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.followed }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.followedCounter, component: "div" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryHeader.followedBy", defaultMessage: "ui.categoryHeader.followedBy", values: { total: scCategory.followers_counter } }) })), (0, jsx_runtime_1.jsx)(CategoryFollowersButton_1.default, Object.assign({ category: scCategory, categoryId: scCategory === null || scCategory === void 0 ? void 0 : scCategory.id }, CategoryFollowersButtonProps))] }))), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.action }, { children: [isPaymentsEnabled && ((_b = scCategory.paywalls) === null || _b === void 0 ? void 0 : _b.length) > 0 && scCategory.payment_order && ((0, jsx_runtime_1.jsx)(BuyButton_1.default, { contentType: types_1.SCContentType.CATEGORY, content: scCategory })), (0, jsx_runtime_1.jsx)(CategoryFollowButton_1.default, Object.assign({ category: scCategory, onFollow: handleFollow }, CategoryFollowButtonProps))] }))] })), openHtmlInfoDialog && (0, jsx_runtime_1.jsx)(HtmlInfoDialog_1.default, { open: true, htmlInfo: category.html_info, onClose: () => setOpenHtmlInfoDialog(false) })] })));
 }
 exports.default = CategoryHeader;

package/lib/cjs/components/HtmlInfoDialog/HtmlInfoDialog.d.ts

@@ -0,0 +1,27 @@
+import { BaseDialogProps } from '../../shared/BaseDialog';
+export interface HtmlInfoDialogProps extends BaseDialogProps {
+    /**
+     * The category's html text.
+     */
+    htmlInfo: string;
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default undefined
+     */
+    className?: string;
+    /**
+     * Open dialog
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * On dialog close callback function
+     * @default undefined
+     */
+    onClose?: () => void;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+export default function HtmlInfoDialog(inProps: HtmlInfoDialogProps): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/components/HtmlInfoDialog/HtmlInfoDialog.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
+const constants_1 = require("./constants");
+const react_intl_1 = require("react-intl");
+const Root = (0, material_1.styled)(BaseDialog_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
+function HtmlInfoDialog(inProps) {
+    //PROPS
+    const props = (0, material_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { htmlInfo, className, open = false, onClose } = props, rest = tslib_1.__rest(props, ["htmlInfo", "className", "open", "onClose"]);
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: "md", title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryHeader.htmlInfo.dialog.title", defaultMessage: "ui.categoryHeader.htmlInfo.dialog.title" }), fullWidth: true, open: open, scroll: "body", onClose: onClose, className: className, slotProps: {
+            paper: {
+                elevation: 0
+            }
+        } }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { dangerouslySetInnerHTML: { __html: htmlInfo } }) })));
+}
+exports.default = HtmlInfoDialog;

package/lib/cjs/components/HtmlInfoDialog/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCHtmlInfoDialog";

package/lib/cjs/components/HtmlInfoDialog/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCHtmlInfoDialog';

package/lib/cjs/components/HtmlInfoDialog/index.d.ts

@@ -0,0 +1,3 @@
+import HtmlInfoDialog, { HtmlInfoDialogProps } from './HtmlInfoDialog';
+export default HtmlInfoDialog;
+export { HtmlInfoDialogProps };

package/lib/cjs/components/HtmlInfoDialog/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const HtmlInfoDialog_1 = tslib_1.__importDefault(require("./HtmlInfoDialog"));
+exports.default = HtmlInfoDialog_1.default;

package/lib/esm/components/CategoryHeader/CategoryHeader.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { Box, Paper, Typography, styled } from '@mui/material';
+import { useMemo, useState } from 'react';
+import { Box, Button, Icon, Paper, Typography, styled } from '@mui/material';
 import CategoryFollowButton from '../CategoryFollowButton';
 import { FormattedMessage } from 'react-intl';
 import { SCPreferences, useSCFetchCategory, useSCPaymentsEnabled, useSCPreferenceEnabled } from '@selfcommunity/react-core';
@@ -12,6 +12,7 @@ import CategoryFollowersButton from '../CategoryFollowersButton';
 import { PREFIX } from './constants';
 import BuyButton from '../BuyButton';
 import TagChip from '../../shared/TagChip';
+import HtmlInfoDialog from '../HtmlInfoDialog';
 const classes = {
     root: `${PREFIX}-root`,
     cover: `${PREFIX}-cover`,
@@ -69,6 +70,7 @@ export default function CategoryHeader(inProps) {
     // STATE
     const { scCategory, setSCCategory } = useSCFetchCategory({ id: categoryId, category });
     const categoryFollowEnabled = useSCPreferenceEnabled(SCPreferences.CONFIGURATIONS_CATEGORY_FOLLOW_ENABLED);
+    const [openHtmlInfoDialog, setOpenHtmlInfoDialog] = useState(false);
     // PAYMENTS
     const { isPaymentsEnabled } = useSCPaymentsEnabled();
     /**
@@ -82,5 +84,5 @@ export default function CategoryHeader(inProps) {
     if (!scCategory) {
         return null;
     }
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Paper, { style: _backgroundCover, classes: { root: classes.cover } }), _jsxs(Box, Object.assign({ className: classes.info }, { children: [_jsx(Typography, Object.assign({ variant: "h3", className: classes.name, gutterBottom: true }, { children: scCategory.name })), scCategory.slogan && (_jsx(Typography, Object.assign({ variant: "h5", className: classes.slogan }, { children: scCategory.slogan }))), showTags && ((_a = scCategory.tags) === null || _a === void 0 ? void 0 : _a.length) > 0 && (_jsx(Box, Object.assign({ className: classes.tags }, { children: scCategory.tags.map((t) => (_jsx(TagChip, { tag: t, disposable: false, clickable: false }, t.id))) }))), categoryFollowEnabled && (_jsxs(Box, Object.assign({ className: classes.followed }, { children: [_jsx(Typography, Object.assign({ className: classes.followedCounter, component: "div" }, { children: _jsx(FormattedMessage, { id: "ui.categoryHeader.followedBy", defaultMessage: "ui.categoryHeader.followedBy", values: { total: scCategory.followers_counter } }) })), _jsx(CategoryFollowersButton, Object.assign({ category: scCategory, categoryId: scCategory === null || scCategory === void 0 ? void 0 : scCategory.id }, CategoryFollowersButtonProps))] }))), _jsxs(Box, Object.assign({ className: classes.action }, { children: [isPaymentsEnabled && ((_b = scCategory.paywalls) === null || _b === void 0 ? void 0 : _b.length) > 0 && scCategory.payment_order && (_jsx(BuyButton, { contentType: SCContentType.CATEGORY, content: scCategory })), _jsx(CategoryFollowButton, Object.assign({ category: scCategory, onFollow: handleFollow }, CategoryFollowButtonProps))] }))] }))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: scCategory.html_info && (_jsx(Button, Object.assign({ variant: "contained", onClick: () => setOpenHtmlInfoDialog(true) }, { children: _jsx(Icon, { children: "info" }) }))) })), _jsxs(Box, Object.assign({ className: classes.info }, { children: [_jsx(Typography, Object.assign({ variant: "h3", className: classes.name, gutterBottom: true }, { children: scCategory.name })), scCategory.slogan && (_jsx(Typography, Object.assign({ variant: "h5", className: classes.slogan }, { children: scCategory.slogan }))), showTags && ((_a = scCategory.tags) === null || _a === void 0 ? void 0 : _a.length) > 0 && (_jsx(Box, Object.assign({ className: classes.tags }, { children: scCategory.tags.map((t) => (_jsx(TagChip, { tag: t, disposable: false, clickable: false }, t.id))) }))), categoryFollowEnabled && (_jsxs(Box, Object.assign({ className: classes.followed }, { children: [_jsx(Typography, Object.assign({ className: classes.followedCounter, component: "div" }, { children: _jsx(FormattedMessage, { id: "ui.categoryHeader.followedBy", defaultMessage: "ui.categoryHeader.followedBy", values: { total: scCategory.followers_counter } }) })), _jsx(CategoryFollowersButton, Object.assign({ category: scCategory, categoryId: scCategory === null || scCategory === void 0 ? void 0 : scCategory.id }, CategoryFollowersButtonProps))] }))), _jsxs(Box, Object.assign({ className: classes.action }, { children: [isPaymentsEnabled && ((_b = scCategory.paywalls) === null || _b === void 0 ? void 0 : _b.length) > 0 && scCategory.payment_order && (_jsx(BuyButton, { contentType: SCContentType.CATEGORY, content: scCategory })), _jsx(CategoryFollowButton, Object.assign({ category: scCategory, onFollow: handleFollow }, CategoryFollowButtonProps))] }))] })), openHtmlInfoDialog && _jsx(HtmlInfoDialog, { open: true, htmlInfo: category.html_info, onClose: () => setOpenHtmlInfoDialog(false) })] })));
 }

package/lib/esm/components/HtmlInfoDialog/HtmlInfoDialog.d.ts

@@ -0,0 +1,27 @@
+import { BaseDialogProps } from '../../shared/BaseDialog';
+export interface HtmlInfoDialogProps extends BaseDialogProps {
+    /**
+     * The category's html text.
+     */
+    htmlInfo: string;
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default undefined
+     */
+    className?: string;
+    /**
+     * Open dialog
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * On dialog close callback function
+     * @default undefined
+     */
+    onClose?: () => void;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+export default function HtmlInfoDialog(inProps: HtmlInfoDialogProps): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/HtmlInfoDialog/HtmlInfoDialog.js

@@ -0,0 +1,23 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, styled, useThemeProps } from '@mui/material';
+import BaseDialog from '../../shared/BaseDialog';
+import { PREFIX } from './constants';
+import { FormattedMessage } from 'react-intl';
+const Root = styled(BaseDialog, {
+    name: PREFIX,
+    slot: 'Root'
+})(() => ({}));
+export default function HtmlInfoDialog(inProps) {
+    //PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { htmlInfo, className, open = false, onClose } = props, rest = __rest(props, ["htmlInfo", "className", "open", "onClose"]);
+    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: "md", title: _jsx(FormattedMessage, { id: "ui.categoryHeader.htmlInfo.dialog.title", defaultMessage: "ui.categoryHeader.htmlInfo.dialog.title" }), fullWidth: true, open: open, scroll: "body", onClose: onClose, className: className, slotProps: {
+            paper: {
+                elevation: 0
+            }
+        } }, rest, { children: _jsx(Box, { dangerouslySetInnerHTML: { __html: htmlInfo } }) })));
+}

package/lib/esm/components/HtmlInfoDialog/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCHtmlInfoDialog";

package/lib/esm/components/HtmlInfoDialog/constants.js

@@ -0,0 +1 @@
+export const PREFIX = 'SCHtmlInfoDialog';

package/lib/esm/components/HtmlInfoDialog/index.d.ts

@@ -0,0 +1,3 @@
+import HtmlInfoDialog, { HtmlInfoDialogProps } from './HtmlInfoDialog';
+export default HtmlInfoDialog;
+export { HtmlInfoDialogProps };

package/lib/esm/components/HtmlInfoDialog/index.js

@@ -0,0 +1,2 @@
+import HtmlInfoDialog from './HtmlInfoDialog';
+export default HtmlInfoDialog;