@selfcommunity/react-ui 0.11.0-alpha.94 → 0.11.0-alpha.95

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/components/CategoryHeader/CategoryHeader.d.ts +6 -0
  2. package/lib/cjs/components/CategoryHeader/CategoryHeader.js +6 -3
  3. package/lib/esm/components/CategoryHeader/CategoryHeader.d.ts +6 -0
  4. package/lib/esm/components/CategoryHeader/CategoryHeader.js +6 -3
  5. package/lib/umd/react-ui.js +1 -1
  6. package/package.json +3 -3
package/lib/cjs/components/CategoryHeader/CategoryHeader.d.ts CHANGED
@@ -27,6 +27,11 @@ export interface CategoryHeaderProps {
27
27
  * @default {}
28
28
  */
29
29
  CategoryFollowersButtonProps?: Pick<CategoryFollowersButtonProps, Exclude<keyof CategoryFollowersButtonProps, 'category' | 'categoryId'>>;
30
+ /**
31
+ * shows category tags
32
+ * @default false
33
+ */
34
+ showTags?: boolean;
30
35
  /**
31
36
  * Any other properties
32
37
  */
@@ -56,6 +61,7 @@ export interface CategoryHeaderProps {
56
61
  |name|.SCCategoryHeader-name|Styles applied to the name element.|
57
62
  |slogan|.SCCategoryHeader-slogan|Styles applied to the slogan element.|
58
63
  |info|.SCCategoryHeader-info|Styles applied to the info element.|
64
+ |tags|.SCCategoryHeader-tags|Styles applied to the tags elements.|
59
65
  |followedCounter|.SCCategoryHeader-followed-by-counter|Styles applied to the followers counter element.|
60
66
  |followed|.SCCategoryHeader-followed|Styles applied to the followers avatars section.|
61
67
  |action|.SCCategoryHeader-action|Styles applied to the action section.|
package/lib/cjs/components/CategoryHeader/CategoryHeader.js CHANGED
@@ -13,12 +13,14 @@ const system_1 = require("@mui/system");
13
13
  const CategoryFollowersButton_1 = tslib_1.__importDefault(require("../CategoryFollowersButton"));
14
14
  const constants_1 = require("./constants");
15
15
  const BuyButton_1 = tslib_1.__importDefault(require("../BuyButton"));
16
+ const TagChip_1 = tslib_1.__importDefault(require("../../shared/TagChip"));
16
17
  const classes = {
17
18
  root: `${constants_1.PREFIX}-root`,
18
19
  cover: `${constants_1.PREFIX}-cover`,
19
20
  name: `${constants_1.PREFIX}-name`,
20
21
  slogan: `${constants_1.PREFIX}-slogan`,
21
22
  info: `${constants_1.PREFIX}-info`,
23
+ tags: `${constants_1.PREFIX}-tags`,
22
24
  followedCounter: `${constants_1.PREFIX}-followed-counter`,
23
25
  followed: `${constants_1.PREFIX}-followed`,
24
26
  action: `${constants_1.PREFIX}-action`
@@ -51,6 +53,7 @@ const Root = (0, material_1.styled)(material_1.Box, {
51
53
  |name|.SCCategoryHeader-name|Styles applied to the name element.|
52
54
  |slogan|.SCCategoryHeader-slogan|Styles applied to the slogan element.|
53
55
  |info|.SCCategoryHeader-info|Styles applied to the info element.|
56
+ |tags|.SCCategoryHeader-tags|Styles applied to the tags elements.|
54
57
  |followedCounter|.SCCategoryHeader-followed-by-counter|Styles applied to the followers counter element.|
55
58
  |followed|.SCCategoryHeader-followed|Styles applied to the followers avatars section.|
56
59
  |action|.SCCategoryHeader-action|Styles applied to the action section.|
@@ -58,13 +61,13 @@ const Root = (0, material_1.styled)(material_1.Box, {
58
61
  * @param inProps
59
62
  */
60
63
  function CategoryHeader(inProps) {
61
- var _a;
64
+ var _a, _b;
62
65
  // PROPS
63
66
  const props = (0, system_1.useThemeProps)({
64
67
  props: inProps,
65
68
  name: constants_1.PREFIX
66
69
  });
67
- const { className, categoryId, category, CategoryFollowButtonProps = {}, CategoryFollowersButtonProps = {} } = props, rest = tslib_1.__rest(props, ["className", "categoryId", "category", "CategoryFollowButtonProps", "CategoryFollowersButtonProps"]);
70
+ const { className, categoryId, category, CategoryFollowButtonProps = {}, CategoryFollowersButtonProps = {}, showTags = false } = props, rest = tslib_1.__rest(props, ["className", "categoryId", "category", "CategoryFollowButtonProps", "CategoryFollowersButtonProps", "showTags"]);
68
71
  // STATE
69
72
  const { scCategory, setSCCategory } = (0, react_core_1.useSCFetchCategory)({ id: categoryId, category });
70
73
  const categoryFollowEnabled = (0, react_core_1.useSCPreferenceEnabled)(react_core_1.SCPreferences.CONFIGURATIONS_CATEGORY_FOLLOW_ENABLED);
@@ -81,6 +84,6 @@ function CategoryHeader(inProps) {
81
84
  if (!scCategory) {
82
85
  return null;
83
86
  }
84
- 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 }))), 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 && ((_a = scCategory.paywalls) === null || _a === void 0 ? void 0 : _a.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))] }))] }))] })));
87
+ 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))] }))] }))] })));
85
88
  }
86
89
  exports.default = CategoryHeader;
package/lib/esm/components/CategoryHeader/CategoryHeader.d.ts CHANGED
@@ -27,6 +27,11 @@ export interface CategoryHeaderProps {
27
27
  * @default {}
28
28
  */
29
29
  CategoryFollowersButtonProps?: Pick<CategoryFollowersButtonProps, Exclude<keyof CategoryFollowersButtonProps, 'category' | 'categoryId'>>;
30
+ /**
31
+ * shows category tags
32
+ * @default false
33
+ */
34
+ showTags?: boolean;
30
35
  /**
31
36
  * Any other properties
32
37
  */
@@ -56,6 +61,7 @@ export interface CategoryHeaderProps {
56
61
  |name|.SCCategoryHeader-name|Styles applied to the name element.|
57
62
  |slogan|.SCCategoryHeader-slogan|Styles applied to the slogan element.|
58
63
  |info|.SCCategoryHeader-info|Styles applied to the info element.|
64
+ |tags|.SCCategoryHeader-tags|Styles applied to the tags elements.|
59
65
  |followedCounter|.SCCategoryHeader-followed-by-counter|Styles applied to the followers counter element.|
60
66
  |followed|.SCCategoryHeader-followed|Styles applied to the followers avatars section.|
61
67
  |action|.SCCategoryHeader-action|Styles applied to the action section.|
package/lib/esm/components/CategoryHeader/CategoryHeader.js CHANGED
@@ -11,12 +11,14 @@ import { useThemeProps } from '@mui/system';
11
11
  import CategoryFollowersButton from '../CategoryFollowersButton';
12
12
  import { PREFIX } from './constants';
13
13
  import BuyButton from '../BuyButton';
14
+ import TagChip from '../../shared/TagChip';
14
15
  const classes = {
15
16
  root: `${PREFIX}-root`,
16
17
  cover: `${PREFIX}-cover`,
17
18
  name: `${PREFIX}-name`,
18
19
  slogan: `${PREFIX}-slogan`,
19
20
  info: `${PREFIX}-info`,
21
+ tags: `${PREFIX}-tags`,
20
22
  followedCounter: `${PREFIX}-followed-counter`,
21
23
  followed: `${PREFIX}-followed`,
22
24
  action: `${PREFIX}-action`
@@ -49,6 +51,7 @@ const Root = styled(Box, {
49
51
  |name|.SCCategoryHeader-name|Styles applied to the name element.|
50
52
  |slogan|.SCCategoryHeader-slogan|Styles applied to the slogan element.|
51
53
  |info|.SCCategoryHeader-info|Styles applied to the info element.|
54
+ |tags|.SCCategoryHeader-tags|Styles applied to the tags elements.|
52
55
  |followedCounter|.SCCategoryHeader-followed-by-counter|Styles applied to the followers counter element.|
53
56
  |followed|.SCCategoryHeader-followed|Styles applied to the followers avatars section.|
54
57
  |action|.SCCategoryHeader-action|Styles applied to the action section.|
@@ -56,13 +59,13 @@ const Root = styled(Box, {
56
59
  * @param inProps
57
60
  */
58
61
  export default function CategoryHeader(inProps) {
59
- var _a;
62
+ var _a, _b;
60
63
  // PROPS
61
64
  const props = useThemeProps({
62
65
  props: inProps,
63
66
  name: PREFIX
64
67
  });
65
- const { className, categoryId, category, CategoryFollowButtonProps = {}, CategoryFollowersButtonProps = {} } = props, rest = __rest(props, ["className", "categoryId", "category", "CategoryFollowButtonProps", "CategoryFollowersButtonProps"]);
68
+ const { className, categoryId, category, CategoryFollowButtonProps = {}, CategoryFollowersButtonProps = {}, showTags = false } = props, rest = __rest(props, ["className", "categoryId", "category", "CategoryFollowButtonProps", "CategoryFollowersButtonProps", "showTags"]);
66
69
  // STATE
67
70
  const { scCategory, setSCCategory } = useSCFetchCategory({ id: categoryId, category });
68
71
  const categoryFollowEnabled = useSCPreferenceEnabled(SCPreferences.CONFIGURATIONS_CATEGORY_FOLLOW_ENABLED);
@@ -79,5 +82,5 @@ export default function CategoryHeader(inProps) {
79
82
  if (!scCategory) {
80
83
  return null;
81
84
  }
82
- 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 }))), 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 && ((_a = scCategory.paywalls) === null || _a === void 0 ? void 0 : _a.length) > 0 && scCategory.payment_order && (_jsx(BuyButton, { contentType: SCContentType.CATEGORY, content: scCategory })), _jsx(CategoryFollowButton, Object.assign({ category: scCategory, onFollow: handleFollow }, CategoryFollowButtonProps))] }))] }))] })));
85
+ 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))] }))] }))] })));
83
86
  }