@selfcommunity/react-ui 1.2.0-alpha.4 → 1.2.0-alpha.6

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.
@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const jsx_runtime_1 = require("react/jsx-runtime");
4
4
  const material_1 = require("@mui/material");
5
5
  const constants_1 = require("../constants");
6
- const react_1 = require("react");
7
6
  const classes = {
7
+ optionsContainer: `${constants_1.PREFIX}-options-container`,
8
8
  optionsWrapper: `${constants_1.PREFIX}-options-wrapper`,
9
9
  optionsDivider: `${constants_1.PREFIX}-options-divider`,
10
10
  optionsButtonWrapper: `${constants_1.PREFIX}-options-button-wrapper`
11
11
  };
12
12
  function OptionsSkeleton() {
13
- return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.optionsWrapper }, { children: Array.from(Array(3)).map((_, i) => ((0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ component: "fieldset", variant: "standard" }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormLabel, Object.assign({ component: "legend" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "52px", height: "21px" }) })), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Switch, {}), label: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "215px", height: "38px" }) })] }), i))) })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.optionsDivider }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.optionsButtonWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rounded", width: "133px", height: "33px" }) }))] }));
13
+ return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.optionsContainer }, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.optionsWrapper }, { children: Array.from(Array(3)).map((_, i) => ((0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ component: "fieldset", variant: "standard" }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormLabel, Object.assign({ component: "legend" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "52px", height: "21px" }) })), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Switch, {}), label: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "215px", height: "38px" }) })] }), i))) })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.optionsDivider }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.optionsButtonWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rounded", width: "133px", height: "33px" }) }))] })));
14
14
  }
15
15
  exports.default = OptionsSkeleton;
@@ -26,7 +26,8 @@ const classes = {
26
26
  divider: `${constants_1.PREFIX}-action-comment-divider`,
27
27
  inline: `${constants_1.PREFIX}-action-comment-inline`,
28
28
  button: `${constants_1.PREFIX}-action-comment-button`,
29
- viewAudienceButton: `${constants_1.PREFIX}-action-comment-view-audience-button`
29
+ viewAudienceButton: `${constants_1.PREFIX}-action-comment-view-audience-button`,
30
+ paperContrastColor: `${constants_1.PREFIX}-paper-contrast-color`
30
31
  };
31
32
  const Root = (0, material_1.styled)(material_1.Box, {
32
33
  name: constants_1.PREFIX,
@@ -52,7 +53,9 @@ function Comment(props) {
52
53
  audience = ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", size: "small", disabled: true, color: "inherit" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 18, width: 50 }) })));
53
54
  }
54
55
  else {
55
- audience = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: onViewCommentsAction ? ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", size: "small", onClick: onViewCommentsAction, color: "inherit" }, { children: `${intl.formatMessage(messages.comments, { total: obj.comment_count })}` }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: feedObjectTemplate === feedObject_1.SCFeedObjectTemplateType.DETAIL ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: `${intl.formatMessage(messages.comments, { total: obj.comment_count })}` }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", size: "small", component: react_core_1.Link, to: scRoutingContext.url((0, contribution_1.getContributionRouteName)(obj), (0, contribution_1.getRouteData)(obj)), classes: { root: classes.viewAudienceButton } }, { children: `${intl.formatMessage(messages.comments, { total: obj.comment_count })}` }))) })) }));
56
+ audience = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: onViewCommentsAction ? ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", size: "small", onClick: onViewCommentsAction, color: "inherit" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", sx: { '&': { all: 'unset' } }, className: classes.paperContrastColor }, { children: `${intl.formatMessage(messages.comments, { total: obj.comment_count })}` })) }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: feedObjectTemplate === feedObject_1.SCFeedObjectTemplateType.DETAIL ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.paperContrastColor }, { children: `${intl.formatMessage(messages.comments, {
57
+ total: obj.comment_count
58
+ })}` }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", size: "small", component: react_core_1.Link, to: scRoutingContext.url((0, contribution_1.getContributionRouteName)(obj), (0, contribution_1.getRouteData)(obj)), classes: { root: classes.viewAudienceButton } }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", sx: { '&': { all: 'unset' } }, className: classes.paperContrastColor }, { children: `${intl.formatMessage(messages.comments, { total: obj.comment_count })}` })) }))) })) }));
56
59
  }
57
60
  }
58
61
  return audience;
@@ -1,12 +1,12 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Divider, FormControl, FormControlLabel, FormLabel, Skeleton, Stack, Switch } from '@mui/material';
2
+ import { Box, Divider, FormControl, FormControlLabel, FormLabel, Skeleton, Stack, Switch } from '@mui/material';
3
3
  import { PREFIX } from '../constants';
4
- import { Fragment } from 'react';
5
4
  const classes = {
5
+ optionsContainer: `${PREFIX}-options-container`,
6
6
  optionsWrapper: `${PREFIX}-options-wrapper`,
7
7
  optionsDivider: `${PREFIX}-options-divider`,
8
8
  optionsButtonWrapper: `${PREFIX}-options-button-wrapper`
9
9
  };
10
10
  export default function OptionsSkeleton() {
11
- return (_jsxs(Fragment, { children: [_jsx(Stack, Object.assign({ className: classes.optionsWrapper }, { children: Array.from(Array(3)).map((_, i) => (_jsxs(FormControl, Object.assign({ component: "fieldset", variant: "standard" }, { children: [_jsx(FormLabel, Object.assign({ component: "legend" }, { children: _jsx(Skeleton, { animation: "wave", variant: "text", width: "52px", height: "21px" }) })), _jsx(FormControlLabel, { control: _jsx(Switch, {}), label: _jsx(Skeleton, { animation: "wave", variant: "text", width: "215px", height: "38px" }) })] }), i))) })), _jsx(Divider, { className: classes.optionsDivider }), _jsx(Stack, Object.assign({ className: classes.optionsButtonWrapper }, { children: _jsx(Skeleton, { animation: "wave", variant: "rounded", width: "133px", height: "33px" }) }))] }));
11
+ return (_jsxs(Box, Object.assign({ className: classes.optionsContainer }, { children: [_jsx(Stack, Object.assign({ className: classes.optionsWrapper }, { children: Array.from(Array(3)).map((_, i) => (_jsxs(FormControl, Object.assign({ component: "fieldset", variant: "standard" }, { children: [_jsx(FormLabel, Object.assign({ component: "legend" }, { children: _jsx(Skeleton, { animation: "wave", variant: "text", width: "52px", height: "21px" }) })), _jsx(FormControlLabel, { control: _jsx(Switch, {}), label: _jsx(Skeleton, { animation: "wave", variant: "text", width: "215px", height: "38px" }) })] }), i))) })), _jsx(Divider, { className: classes.optionsDivider }), _jsx(Stack, Object.assign({ className: classes.optionsButtonWrapper }, { children: _jsx(Skeleton, { animation: "wave", variant: "rounded", width: "133px", height: "33px" }) }))] })));
12
12
  }
@@ -24,7 +24,8 @@ const classes = {
24
24
  divider: `${PREFIX}-action-comment-divider`,
25
25
  inline: `${PREFIX}-action-comment-inline`,
26
26
  button: `${PREFIX}-action-comment-button`,
27
- viewAudienceButton: `${PREFIX}-action-comment-view-audience-button`
27
+ viewAudienceButton: `${PREFIX}-action-comment-view-audience-button`,
28
+ paperContrastColor: `${PREFIX}-paper-contrast-color`
28
29
  };
29
30
  const Root = styled(Box, {
30
31
  name: PREFIX,
@@ -50,7 +51,9 @@ export default function Comment(props) {
50
51
  audience = (_jsx(Button, Object.assign({ variant: "text", size: "small", disabled: true, color: "inherit" }, { children: _jsx(Skeleton, { animation: "wave", height: 18, width: 50 }) })));
51
52
  }
52
53
  else {
53
- audience = (_jsx(_Fragment, { children: onViewCommentsAction ? (_jsx(Button, Object.assign({ variant: "text", size: "small", onClick: onViewCommentsAction, color: "inherit" }, { children: `${intl.formatMessage(messages.comments, { total: obj.comment_count })}` }))) : (_jsx(_Fragment, { children: feedObjectTemplate === SCFeedObjectTemplateType.DETAIL ? (_jsx(Typography, Object.assign({ variant: "body2" }, { children: `${intl.formatMessage(messages.comments, { total: obj.comment_count })}` }))) : (_jsx(Button, Object.assign({ variant: "text", size: "small", component: Link, to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), classes: { root: classes.viewAudienceButton } }, { children: `${intl.formatMessage(messages.comments, { total: obj.comment_count })}` }))) })) }));
54
+ audience = (_jsx(_Fragment, { children: onViewCommentsAction ? (_jsx(Button, Object.assign({ variant: "text", size: "small", onClick: onViewCommentsAction, color: "inherit" }, { children: _jsx(Typography, Object.assign({ component: "span", sx: { '&': { all: 'unset' } }, className: classes.paperContrastColor }, { children: `${intl.formatMessage(messages.comments, { total: obj.comment_count })}` })) }))) : (_jsx(_Fragment, { children: feedObjectTemplate === SCFeedObjectTemplateType.DETAIL ? (_jsx(Typography, Object.assign({ variant: "body2", className: classes.paperContrastColor }, { children: `${intl.formatMessage(messages.comments, {
55
+ total: obj.comment_count
56
+ })}` }))) : (_jsx(Button, Object.assign({ variant: "text", size: "small", component: Link, to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), classes: { root: classes.viewAudienceButton } }, { children: _jsx(Typography, Object.assign({ component: "span", sx: { '&': { all: 'unset' } }, className: classes.paperContrastColor }, { children: `${intl.formatMessage(messages.comments, { total: obj.comment_count })}` })) }))) })) }));
54
57
  }
55
58
  }
56
59
  return audience;