@selfcommunity/react-ui 0.7.42-alpha.2 → 0.7.43-alpha.0

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 (8) hide show
  1. package/lib/cjs/components/Categories/Categories.js +2 -2
  2. package/lib/cjs/components/Category/Category.d.ts +9 -0
  3. package/lib/cjs/components/Category/Category.js +9 -2
  4. package/lib/esm/components/Categories/Categories.js +2 -2
  5. package/lib/esm/components/Category/Category.d.ts +9 -0
  6. package/lib/esm/components/Category/Category.js +10 -3
  7. package/lib/umd/react-ui.js +1 -1
  8. package/package.json +7 -7
package/lib/cjs/components/Categories/Categories.js CHANGED
@@ -131,8 +131,8 @@ function Categories(inProps) {
131
131
  react_1.default.createElement(material_1.TextField, { fullWidth: true, value: filterName, label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.categories.filterByName", defaultMessage: "ui.categories.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }))))),
132
132
  loading ? (react_1.default.createElement(CategoriesSkeletonComponent, Object.assign({}, CategoriesSkeletonProps))) : (react_1.default.createElement(material_1.Grid, { container: true, spacing: { xs: 3 }, className: classes.categories }, !filteredCategories.length ? (react_1.default.createElement(material_1.Grid, { item: true },
133
133
  react_1.default.createElement(material_1.Typography, { className: classes.noResults, variant: "body2" },
134
- react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.categories.noResults", defaultMessage: "ui.categories.noResults" })))) : (react_1.default.createElement(react_1.default.Fragment, null, filteredCategories.map((category) => (react_1.default.createElement(material_1.Grid, { item: true, xs: 12, sm: 6, md: 4, key: category.id },
135
- react_1.default.createElement(CategoryComponent, Object.assign({ category: category }, CategoryComponentProps, { className: classes.category })))))))))));
134
+ react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.categories.noResults", defaultMessage: "ui.categories.noResults" })))) : (react_1.default.createElement(react_1.default.Fragment, null, filteredCategories.map((category) => (react_1.default.createElement(material_1.Grid, { item: true, xs: 12, sm: 6, md: 6, lg: 4, key: category.id },
135
+ react_1.default.createElement(CategoryComponent, Object.assign({ category: category }, CategoryComponentProps, { showTooltip: true, className: classes.category })))))))))));
136
136
  /**
137
137
  * Renders root object (if content availability community option is false and user is anonymous, component is hidden)
138
138
  */
package/lib/cjs/components/Category/Category.d.ts CHANGED
@@ -27,6 +27,11 @@ export interface CategoryProps extends WidgetProps {
27
27
  * @default true
28
28
  */
29
29
  showFollowers?: boolean;
30
+ /**
31
+ * Prop to show category name tooltip
32
+ * @default false
33
+ */
34
+ showTooltip?: boolean;
30
35
  /**
31
36
  * Any other properties
32
37
  */
@@ -54,6 +59,10 @@ export interface CategoryProps extends WidgetProps {
54
59
  |categoryImage|.SCCategory-category-image|Styles applied to category image element.|
55
60
  |title|.SCCategory-title|Styles applied to the title element.|
56
61
  |actions|.SCCategory-actions|Styles applied to action section.|
62
+ |primary|.SCCategory-primary|Styles applied to category primary section (when showTooltip prop is set to true)|
63
+ |secondary|.SCCategory-secondary|Styles applied to category secondary section (when showTooltip prop is set to true)|
64
+ |followed|.SCCategory-followed|Styles applied to a category item when it is followed|
65
+ |autoFollowed|.SCCategory-auto-followed|Styles applied to a category item when auto followed is set to true|
57
66
 
58
67
  * @param inProps
59
68
  */
package/lib/cjs/components/Category/Category.js CHANGED
@@ -22,6 +22,8 @@ const messages = (0, react_intl_1.defineMessages)({
22
22
  const classes = {
23
23
  root: `${constants_1.PREFIX}-root`,
24
24
  categoryImage: `${constants_1.PREFIX}-category-image`,
25
+ primary: `${constants_1.PREFIX}-primary`,
26
+ secondary: `${constants_1.PREFIX}-secondary`,
25
27
  title: `${constants_1.PREFIX}-title`,
26
28
  followed: `${constants_1.PREFIX}-followed`,
27
29
  autoFollowed: `${constants_1.PREFIX}-auto-followed`,
@@ -53,6 +55,10 @@ const Root = (0, styles_1.styled)(BaseItemButton_1.default, {
53
55
  |categoryImage|.SCCategory-category-image|Styles applied to category image element.|
54
56
  |title|.SCCategory-title|Styles applied to the title element.|
55
57
  |actions|.SCCategory-actions|Styles applied to action section.|
58
+ |primary|.SCCategory-primary|Styles applied to category primary section (when showTooltip prop is set to true)|
59
+ |secondary|.SCCategory-secondary|Styles applied to category secondary section (when showTooltip prop is set to true)|
60
+ |followed|.SCCategory-followed|Styles applied to a category item when it is followed|
61
+ |autoFollowed|.SCCategory-auto-followed|Styles applied to a category item when auto followed is set to true|
56
62
 
57
63
  * @param inProps
58
64
  */
@@ -62,7 +68,7 @@ function Category(inProps) {
62
68
  props: inProps,
63
69
  name: constants_1.PREFIX
64
70
  });
65
- const { categoryId = null, category = null, className = null, elevation, autoHide = false, categoryFollowButtonProps = {}, showFollowers = true, ButtonBaseProps = null } = props, rest = tslib_1.__rest(props, ["categoryId", "category", "className", "elevation", "autoHide", "categoryFollowButtonProps", "showFollowers", "ButtonBaseProps"]);
71
+ const { categoryId = null, category = null, className = null, elevation, autoHide = false, categoryFollowButtonProps = {}, showFollowers = true, showTooltip = false, ButtonBaseProps = null } = props, rest = tslib_1.__rest(props, ["categoryId", "category", "className", "elevation", "autoHide", "categoryFollowButtonProps", "showFollowers", "showTooltip", "ButtonBaseProps"]);
66
72
  // CONTEXT
67
73
  const scRoutingContext = (0, react_core_1.useSCRouting)();
68
74
  // STATE
@@ -76,7 +82,8 @@ function Category(inProps) {
76
82
  }
77
83
  // RENDER
78
84
  if (!autoHide) {
79
- return (react_1.default.createElement(Root, Object.assign({ elevation: elevation, className: (0, classnames_1.default)(classes.root, className, { [classes.followed]: scCategory.followed }, { [classes.autoFollowed]: scCategory.auto_follow === types_1.SCCategoryAutoFollowType.FORCED }), ButtonBaseProps: _ButtonBaseProps, image: react_1.default.createElement(material_1.Avatar, { alt: scCategory.name, src: scCategory.image_medium, variant: "square", className: classes.categoryImage }), primary: scCategory.name, secondary: showFollowers ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan, actions: react_1.default.createElement(CategoryFollowButton_1.default, Object.assign({ category: scCategory }, categoryFollowButtonProps)) }, rest)));
85
+ return (react_1.default.createElement(Root, Object.assign({ disableTypography: showTooltip, elevation: elevation, className: (0, classnames_1.default)(classes.root, className, { [classes.followed]: scCategory.followed }, { [classes.autoFollowed]: scCategory.auto_follow === types_1.SCCategoryAutoFollowType.FORCED }), ButtonBaseProps: _ButtonBaseProps, image: react_1.default.createElement(material_1.Avatar, { alt: scCategory.name, src: scCategory.image_medium, variant: "square", className: classes.categoryImage }), primary: react_1.default.createElement(react_1.default.Fragment, null, showTooltip ? (react_1.default.createElement(material_1.Tooltip, { title: scCategory.name },
86
+ react_1.default.createElement(material_1.Typography, { className: classes.primary, component: "span", variant: "body1" }, scCategory.name))) : (scCategory.name)), secondary: react_1.default.createElement(react_1.default.Fragment, null, showTooltip ? (react_1.default.createElement(material_1.Typography, { className: classes.secondary, component: "p", variant: "body2" }, showFollowers ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan)) : (react_1.default.createElement(react_1.default.Fragment, null, showFollowers ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan))), actions: react_1.default.createElement(CategoryFollowButton_1.default, Object.assign({ category: scCategory }, categoryFollowButtonProps)) }, rest)));
80
87
  }
81
88
  return null;
82
89
  }
package/lib/esm/components/Categories/Categories.js CHANGED
@@ -129,8 +129,8 @@ export default function Categories(inProps) {
129
129
  React.createElement(TextField, { fullWidth: true, value: filterName, label: React.createElement(FormattedMessage, { id: "ui.categories.filterByName", defaultMessage: "ui.categories.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }))))),
130
130
  loading ? (React.createElement(CategoriesSkeletonComponent, Object.assign({}, CategoriesSkeletonProps))) : (React.createElement(Grid, { container: true, spacing: { xs: 3 }, className: classes.categories }, !filteredCategories.length ? (React.createElement(Grid, { item: true },
131
131
  React.createElement(Typography, { className: classes.noResults, variant: "body2" },
132
- React.createElement(FormattedMessage, { id: "ui.categories.noResults", defaultMessage: "ui.categories.noResults" })))) : (React.createElement(React.Fragment, null, filteredCategories.map((category) => (React.createElement(Grid, { item: true, xs: 12, sm: 6, md: 4, key: category.id },
133
- React.createElement(CategoryComponent, Object.assign({ category: category }, CategoryComponentProps, { className: classes.category })))))))))));
132
+ React.createElement(FormattedMessage, { id: "ui.categories.noResults", defaultMessage: "ui.categories.noResults" })))) : (React.createElement(React.Fragment, null, filteredCategories.map((category) => (React.createElement(Grid, { item: true, xs: 12, sm: 6, md: 6, lg: 4, key: category.id },
133
+ React.createElement(CategoryComponent, Object.assign({ category: category }, CategoryComponentProps, { showTooltip: true, className: classes.category })))))))))));
134
134
  /**
135
135
  * Renders root object (if content availability community option is false and user is anonymous, component is hidden)
136
136
  */
package/lib/esm/components/Category/Category.d.ts CHANGED
@@ -27,6 +27,11 @@ export interface CategoryProps extends WidgetProps {
27
27
  * @default true
28
28
  */
29
29
  showFollowers?: boolean;
30
+ /**
31
+ * Prop to show category name tooltip
32
+ * @default false
33
+ */
34
+ showTooltip?: boolean;
30
35
  /**
31
36
  * Any other properties
32
37
  */
@@ -54,6 +59,10 @@ export interface CategoryProps extends WidgetProps {
54
59
  |categoryImage|.SCCategory-category-image|Styles applied to category image element.|
55
60
  |title|.SCCategory-title|Styles applied to the title element.|
56
61
  |actions|.SCCategory-actions|Styles applied to action section.|
62
+ |primary|.SCCategory-primary|Styles applied to category primary section (when showTooltip prop is set to true)|
63
+ |secondary|.SCCategory-secondary|Styles applied to category secondary section (when showTooltip prop is set to true)|
64
+ |followed|.SCCategory-followed|Styles applied to a category item when it is followed|
65
+ |autoFollowed|.SCCategory-auto-followed|Styles applied to a category item when auto followed is set to true|
57
66
 
58
67
  * @param inProps
59
68
  */
package/lib/esm/components/Category/Category.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { __rest } from "tslib";
2
2
  import React, { useMemo } from 'react';
3
3
  import { styled } from '@mui/material/styles';
4
- import { Avatar } from '@mui/material';
4
+ import { Avatar, Tooltip, Typography } from '@mui/material';
5
5
  import { Link, SCRoutes, useSCFetchCategory, useSCRouting } from '@selfcommunity/react-core';
6
6
  import { SCCategoryAutoFollowType } from '@selfcommunity/types';
7
7
  import CategorySkeleton from './Skeleton';
@@ -20,6 +20,8 @@ const messages = defineMessages({
20
20
  const classes = {
21
21
  root: `${PREFIX}-root`,
22
22
  categoryImage: `${PREFIX}-category-image`,
23
+ primary: `${PREFIX}-primary`,
24
+ secondary: `${PREFIX}-secondary`,
23
25
  title: `${PREFIX}-title`,
24
26
  followed: `${PREFIX}-followed`,
25
27
  autoFollowed: `${PREFIX}-auto-followed`,
@@ -51,6 +53,10 @@ const Root = styled(BaseItemButton, {
51
53
  |categoryImage|.SCCategory-category-image|Styles applied to category image element.|
52
54
  |title|.SCCategory-title|Styles applied to the title element.|
53
55
  |actions|.SCCategory-actions|Styles applied to action section.|
56
+ |primary|.SCCategory-primary|Styles applied to category primary section (when showTooltip prop is set to true)|
57
+ |secondary|.SCCategory-secondary|Styles applied to category secondary section (when showTooltip prop is set to true)|
58
+ |followed|.SCCategory-followed|Styles applied to a category item when it is followed|
59
+ |autoFollowed|.SCCategory-auto-followed|Styles applied to a category item when auto followed is set to true|
54
60
 
55
61
  * @param inProps
56
62
  */
@@ -60,7 +66,7 @@ export default function Category(inProps) {
60
66
  props: inProps,
61
67
  name: PREFIX
62
68
  });
63
- const { categoryId = null, category = null, className = null, elevation, autoHide = false, categoryFollowButtonProps = {}, showFollowers = true, ButtonBaseProps = null } = props, rest = __rest(props, ["categoryId", "category", "className", "elevation", "autoHide", "categoryFollowButtonProps", "showFollowers", "ButtonBaseProps"]);
69
+ const { categoryId = null, category = null, className = null, elevation, autoHide = false, categoryFollowButtonProps = {}, showFollowers = true, showTooltip = false, ButtonBaseProps = null } = props, rest = __rest(props, ["categoryId", "category", "className", "elevation", "autoHide", "categoryFollowButtonProps", "showFollowers", "showTooltip", "ButtonBaseProps"]);
64
70
  // CONTEXT
65
71
  const scRoutingContext = useSCRouting();
66
72
  // STATE
@@ -74,7 +80,8 @@ export default function Category(inProps) {
74
80
  }
75
81
  // RENDER
76
82
  if (!autoHide) {
77
- return (React.createElement(Root, Object.assign({ elevation: elevation, className: classNames(classes.root, className, { [classes.followed]: scCategory.followed }, { [classes.autoFollowed]: scCategory.auto_follow === SCCategoryAutoFollowType.FORCED }), ButtonBaseProps: _ButtonBaseProps, image: React.createElement(Avatar, { alt: scCategory.name, src: scCategory.image_medium, variant: "square", className: classes.categoryImage }), primary: scCategory.name, secondary: showFollowers ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan, actions: React.createElement(CategoryFollowButton, Object.assign({ category: scCategory }, categoryFollowButtonProps)) }, rest)));
83
+ return (React.createElement(Root, Object.assign({ disableTypography: showTooltip, elevation: elevation, className: classNames(classes.root, className, { [classes.followed]: scCategory.followed }, { [classes.autoFollowed]: scCategory.auto_follow === SCCategoryAutoFollowType.FORCED }), ButtonBaseProps: _ButtonBaseProps, image: React.createElement(Avatar, { alt: scCategory.name, src: scCategory.image_medium, variant: "square", className: classes.categoryImage }), primary: React.createElement(React.Fragment, null, showTooltip ? (React.createElement(Tooltip, { title: scCategory.name },
84
+ React.createElement(Typography, { className: classes.primary, component: "span", variant: "body1" }, scCategory.name))) : (scCategory.name)), secondary: React.createElement(React.Fragment, null, showTooltip ? (React.createElement(Typography, { className: classes.secondary, component: "p", variant: "body2" }, showFollowers ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan)) : (React.createElement(React.Fragment, null, showFollowers ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan))), actions: React.createElement(CategoryFollowButton, Object.assign({ category: scCategory }, categoryFollowButtonProps)) }, rest)));
78
85
  }
79
86
  return null;
80
87
  }