@selfcommunity/react-ui 1.2.5-alpha.2 → 1.2.5-alpha.3
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.
- package/lib/cjs/components/FeedObject/Actions/Comment/Comment.js +3 -1
- package/lib/cjs/components/FeedObject/Actions/Share/Share.js +4 -2
- package/lib/cjs/components/SearchAutocomplete/SearchAutocomplete.js +5 -7
- package/lib/cjs/components/VoteAudienceButton/VoteAudienceButton.js +2 -2
- package/lib/esm/components/FeedObject/Actions/Comment/Comment.js +3 -1
- package/lib/esm/components/FeedObject/Actions/Share/Share.js +4 -2
- package/lib/esm/components/SearchAutocomplete/SearchAutocomplete.js +5 -7
- package/lib/esm/components/VoteAudienceButton/VoteAudienceButton.js +2 -2
- package/lib/umd/react-ui.js +1 -1
- package/package.json +2 -2
|
@@ -53,7 +53,9 @@ function Comment(props) {
|
|
|
53
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 }) })));
|
|
54
54
|
}
|
|
55
55
|
else {
|
|
56
|
-
audience = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: onViewCommentsAction ? ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({
|
|
56
|
+
audience = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: onViewCommentsAction ? ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ title: intl.formatMessage(messages.comments, {
|
|
57
|
+
total: obj.comment_count
|
|
58
|
+
}), variant: "text", size: "small", onClick: onViewCommentsAction, color: "inherit" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", className: classes.paperContrastColor }, { children: intl.formatMessage(messages.comments, {
|
|
57
59
|
total: obj.comment_count
|
|
58
60
|
}) })) }))) : ((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, {
|
|
59
61
|
total: obj.comment_count
|
|
@@ -182,9 +182,11 @@ function Share(props) {
|
|
|
182
182
|
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 }) })));
|
|
183
183
|
}
|
|
184
184
|
else {
|
|
185
|
-
audience = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({
|
|
185
|
+
audience = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ title: intl.formatMessage(messages.shares, {
|
|
186
|
+
total: sharesCount
|
|
187
|
+
}), variant: "text", size: "small", onClick: handleToggleSharesDialog, disabled: sharesCount < 1, classes: { root: classes.viewAudienceButton } }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", className: classes.paperContrastColor }, { children: intl.formatMessage(messages.shares, {
|
|
186
188
|
total: sharesCount
|
|
187
|
-
})
|
|
189
|
+
}) })) })), openSharesDialog && sharesCount > 0 && ((0, jsx_runtime_1.jsx)(SharesDialog_1.default, { feedObject: obj, feedObjectType: obj.type, open: openSharesDialog, onClose: handleToggleSharesDialog }))] }));
|
|
188
190
|
}
|
|
189
191
|
}
|
|
190
192
|
return audience;
|
|
@@ -118,7 +118,7 @@ function SearchAutocomplete(inProps) {
|
|
|
118
118
|
fetchResults();
|
|
119
119
|
}
|
|
120
120
|
}, [value]);
|
|
121
|
-
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className), blurOnSelect: blurOnSelect, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, freeSolo: true, autoComplete: true, disableClearable: true, loading: isLoading, loadingText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.searchAutocomplete.loading", defaultMessage: "ui.searchAutocomplete.loading" }), noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.searchAutocomplete.noOptions", defaultMessage: "ui.searchAutocomplete.noOptions" }), options: options, getOptionLabel: (option) => {
|
|
121
|
+
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, role: "search", className: (0, classnames_1.default)(classes.root, className), blurOnSelect: blurOnSelect, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, freeSolo: true, autoComplete: true, disableClearable: true, loading: isLoading, loadingText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.searchAutocomplete.loading", defaultMessage: "ui.searchAutocomplete.loading" }), noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.searchAutocomplete.noOptions", defaultMessage: "ui.searchAutocomplete.noOptions" }), options: options, getOptionLabel: (option) => {
|
|
122
122
|
if (typeof option === 'string') {
|
|
123
123
|
return option;
|
|
124
124
|
}
|
|
@@ -139,13 +139,11 @@ function SearchAutocomplete(inProps) {
|
|
|
139
139
|
id: 'ui.searchAutocomplete.endAdornment.title',
|
|
140
140
|
defaultMessage: 'ui.searchAutocomplete.endAdornment.title'
|
|
141
141
|
}), className: classes.clear, onClick: handleClear, size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) })) }))) }),
|
|
142
|
-
htmlInput: {
|
|
143
|
-
role: 'search',
|
|
144
|
-
name: 'search-autocomplete',
|
|
145
|
-
title: intl.formatMessage(messages.placeholder, {
|
|
142
|
+
htmlInput: Object.assign(Object.assign({}, params.inputProps), { name: 'search-autocomplete', 'aria-label': intl.formatMessage(messages.placeholder, {
|
|
146
143
|
community: scPreferences.preferences[react_core_1.SCPreferences.TEXT_APPLICATION_NAME].value
|
|
147
|
-
})
|
|
148
|
-
|
|
144
|
+
}), title: intl.formatMessage(messages.placeholder, {
|
|
145
|
+
community: scPreferences.preferences[react_core_1.SCPreferences.TEXT_APPLICATION_NAME].value
|
|
146
|
+
}), autoComplete: 'off' })
|
|
149
147
|
} }))) }, rest)));
|
|
150
148
|
}
|
|
151
149
|
exports.default = SearchAutocomplete;
|
|
@@ -111,13 +111,13 @@ function VoteAudienceButton(inProps) {
|
|
|
111
111
|
}, [reactions.default, isLoading, error, contributionReactionsCount, scUserContext.user, contributionVoted]);
|
|
112
112
|
const dialogTitle = (0, react_1.useMemo)(() => {
|
|
113
113
|
if (reactions.default && !isLoading) {
|
|
114
|
-
return ((0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ className: classes.dialogTabs, value: tab, onChange: handleChangeTab
|
|
114
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ className: classes.dialogTabs, value: tab, onChange: handleChangeTab }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.voteAudienceButton.dialog.tab.all", id: "ui.voteAudienceButton.dialog.tab.all" }) }), contributionReactionsCount &&
|
|
115
115
|
contributionReactionsCount.map((count) => ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "medium" }, { children: (0, jsx_runtime_1.jsx)("img", { alt: count.reaction.label, src: count.reaction.image, width: "100%", height: "100%" }) })), count.count] }) }, count.reaction.id)))] })));
|
|
116
116
|
}
|
|
117
117
|
else {
|
|
118
118
|
return (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.voteAudienceButton.dialog.title", id: "ui.voteAudienceButton.dialog.title" });
|
|
119
119
|
}
|
|
120
120
|
}, [tab, reactions, contributionReactionsCount]);
|
|
121
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ title: intl.formatMessage({ id: 'ui.voteAudienceButton.title', defaultMessage: 'ui.voteAudienceButton.title' }),
|
|
121
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ title: intl.formatMessage({ id: 'ui.voteAudienceButton.title', defaultMessage: 'ui.voteAudienceButton.title' }), onClick: handleOpen, disabled: isLoading || Boolean(error) || contributionVoteCount === 0, loading: isLoading, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: "span" }, { children: [audienceIcon, "\u00A0", scUserContext.user && contributionVoted ? (contributionVoteCount === 1 ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.voteAudienceButton.votedOnlyByMe", defaultMessage: "ui.voteAudienceButton.votedOnlyByMe" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.voteAudienceButton.votedByMe", defaultMessage: "ui.voteAudienceButton.votedByMe", values: { total: contributionVoteCount - 1 } }))) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.voteAudienceButton.votes", defaultMessage: "ui.voteAudienceButton.votes", values: { total: contributionVoteCount } }))] })) })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ title: dialogTitle, onClose: handleClose, open: open, DialogContentProps: {} }, { children: isLoadingVoteList && !voteList ? ((0, jsx_runtime_1.jsx)(CentralProgress_1.default, { size: 50 })) : ((0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: voteList.length, next: () => handleFetchVoteList({}), hasMoreNext: voteListHasNext, loaderNext: (0, jsx_runtime_1.jsx)(CentralProgress_1.default, { size: 30 }), height: 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", align: "center", fontWeight: "bold" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.voteAudienceButton.dialog.end", defaultMessage: "ui.voteAudienceButton.dialog.end" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: voteList.map((vote) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: vote.user, badgeContent: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ className: classes.dialogVoteBadge }, { children: vote.reaction ? ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: (0, jsx_runtime_1.jsx)("img", { alt: vote.reaction.label, src: vote.reaction.image, width: "100%", height: "100%" }) })) : ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "thumb_up" })) })), onClick: handleClose }) }, vote.user.id))) }) }))) })))] }));
|
|
122
122
|
}
|
|
123
123
|
exports.default = VoteAudienceButton;
|
|
@@ -51,7 +51,9 @@ export default function Comment(props) {
|
|
|
51
51
|
audience = (_jsx(Button, Object.assign({ variant: "text", size: "small", disabled: true, color: "inherit" }, { children: _jsx(Skeleton, { animation: "wave", height: 18, width: 50 }) })));
|
|
52
52
|
}
|
|
53
53
|
else {
|
|
54
|
-
audience = (_jsx(_Fragment, { children: onViewCommentsAction ? (_jsx(Button, Object.assign({
|
|
54
|
+
audience = (_jsx(_Fragment, { children: onViewCommentsAction ? (_jsx(Button, Object.assign({ title: intl.formatMessage(messages.comments, {
|
|
55
|
+
total: obj.comment_count
|
|
56
|
+
}), variant: "text", size: "small", onClick: onViewCommentsAction, color: "inherit" }, { children: _jsx(Typography, Object.assign({ component: "span", className: classes.paperContrastColor }, { children: intl.formatMessage(messages.comments, {
|
|
55
57
|
total: obj.comment_count
|
|
56
58
|
}) })) }))) : (_jsx(_Fragment, { children: feedObjectTemplate === SCFeedObjectTemplateType.DETAIL ? (_jsx(Typography, Object.assign({ variant: "body2", className: classes.paperContrastColor }, { children: `${intl.formatMessage(messages.comments, {
|
|
57
59
|
total: obj.comment_count
|
|
@@ -180,9 +180,11 @@ export default function Share(props) {
|
|
|
180
180
|
audience = (_jsx(Button, Object.assign({ variant: "text", size: "small", disabled: true, color: "inherit" }, { children: _jsx(Skeleton, { animation: "wave", height: 18, width: 50 }) })));
|
|
181
181
|
}
|
|
182
182
|
else {
|
|
183
|
-
audience = (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({
|
|
183
|
+
audience = (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ title: intl.formatMessage(messages.shares, {
|
|
184
|
+
total: sharesCount
|
|
185
|
+
}), variant: "text", size: "small", onClick: handleToggleSharesDialog, disabled: sharesCount < 1, classes: { root: classes.viewAudienceButton } }, { children: _jsx(Typography, Object.assign({ component: "span", className: classes.paperContrastColor }, { children: intl.formatMessage(messages.shares, {
|
|
184
186
|
total: sharesCount
|
|
185
|
-
})
|
|
187
|
+
}) })) })), openSharesDialog && sharesCount > 0 && (_jsx(SharesDialog, { feedObject: obj, feedObjectType: obj.type, open: openSharesDialog, onClose: handleToggleSharesDialog }))] }));
|
|
186
188
|
}
|
|
187
189
|
}
|
|
188
190
|
return audience;
|
|
@@ -116,7 +116,7 @@ export default function SearchAutocomplete(inProps) {
|
|
|
116
116
|
fetchResults();
|
|
117
117
|
}
|
|
118
118
|
}, [value]);
|
|
119
|
-
return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className), blurOnSelect: blurOnSelect, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, freeSolo: true, autoComplete: true, disableClearable: true, loading: isLoading, loadingText: _jsx(FormattedMessage, { id: "ui.searchAutocomplete.loading", defaultMessage: "ui.searchAutocomplete.loading" }), noOptionsText: _jsx(FormattedMessage, { id: "ui.searchAutocomplete.noOptions", defaultMessage: "ui.searchAutocomplete.noOptions" }), options: options, getOptionLabel: (option) => {
|
|
119
|
+
return (_jsx(Root, Object.assign({ id: id, role: "search", className: classNames(classes.root, className), blurOnSelect: blurOnSelect, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, freeSolo: true, autoComplete: true, disableClearable: true, loading: isLoading, loadingText: _jsx(FormattedMessage, { id: "ui.searchAutocomplete.loading", defaultMessage: "ui.searchAutocomplete.loading" }), noOptionsText: _jsx(FormattedMessage, { id: "ui.searchAutocomplete.noOptions", defaultMessage: "ui.searchAutocomplete.noOptions" }), options: options, getOptionLabel: (option) => {
|
|
120
120
|
if (typeof option === 'string') {
|
|
121
121
|
return option;
|
|
122
122
|
}
|
|
@@ -137,12 +137,10 @@ export default function SearchAutocomplete(inProps) {
|
|
|
137
137
|
id: 'ui.searchAutocomplete.endAdornment.title',
|
|
138
138
|
defaultMessage: 'ui.searchAutocomplete.endAdornment.title'
|
|
139
139
|
}), className: classes.clear, onClick: handleClear, size: "small" }, { children: _jsx(Icon, { children: "close" }) })) }))) }),
|
|
140
|
-
htmlInput: {
|
|
141
|
-
role: 'search',
|
|
142
|
-
name: 'search-autocomplete',
|
|
143
|
-
title: intl.formatMessage(messages.placeholder, {
|
|
140
|
+
htmlInput: Object.assign(Object.assign({}, params.inputProps), { name: 'search-autocomplete', 'aria-label': intl.formatMessage(messages.placeholder, {
|
|
144
141
|
community: scPreferences.preferences[SCPreferences.TEXT_APPLICATION_NAME].value
|
|
145
|
-
})
|
|
146
|
-
|
|
142
|
+
}), title: intl.formatMessage(messages.placeholder, {
|
|
143
|
+
community: scPreferences.preferences[SCPreferences.TEXT_APPLICATION_NAME].value
|
|
144
|
+
}), autoComplete: 'off' })
|
|
147
145
|
} }))) }, rest)));
|
|
148
146
|
}
|
|
@@ -109,12 +109,12 @@ export default function VoteAudienceButton(inProps) {
|
|
|
109
109
|
}, [reactions.default, isLoading, error, contributionReactionsCount, scUserContext.user, contributionVoted]);
|
|
110
110
|
const dialogTitle = useMemo(() => {
|
|
111
111
|
if (reactions.default && !isLoading) {
|
|
112
|
-
return (_jsxs(Tabs, Object.assign({ className: classes.dialogTabs, value: tab, onChange: handleChangeTab
|
|
112
|
+
return (_jsxs(Tabs, Object.assign({ className: classes.dialogTabs, value: tab, onChange: handleChangeTab }, { children: [_jsx(Tab, { label: _jsx(FormattedMessage, { defaultMessage: "ui.voteAudienceButton.dialog.tab.all", id: "ui.voteAudienceButton.dialog.tab.all" }) }), contributionReactionsCount &&
|
|
113
113
|
contributionReactionsCount.map((count) => (_jsx(Tab, { label: _jsxs(_Fragment, { children: [_jsx(Icon, Object.assign({ fontSize: "medium" }, { children: _jsx("img", { alt: count.reaction.label, src: count.reaction.image, width: "100%", height: "100%" }) })), count.count] }) }, count.reaction.id)))] })));
|
|
114
114
|
}
|
|
115
115
|
else {
|
|
116
116
|
return _jsx(FormattedMessage, { defaultMessage: "ui.voteAudienceButton.dialog.title", id: "ui.voteAudienceButton.dialog.title" });
|
|
117
117
|
}
|
|
118
118
|
}, [tab, reactions, contributionReactionsCount]);
|
|
119
|
-
return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ title: intl.formatMessage({ id: 'ui.voteAudienceButton.title', defaultMessage: 'ui.voteAudienceButton.title' }),
|
|
119
|
+
return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ title: intl.formatMessage({ id: 'ui.voteAudienceButton.title', defaultMessage: 'ui.voteAudienceButton.title' }), onClick: handleOpen, disabled: isLoading || Boolean(error) || contributionVoteCount === 0, loading: isLoading, className: classNames(classes.root, className) }, rest, { children: _jsxs(Typography, Object.assign({ component: "span" }, { children: [audienceIcon, "\u00A0", scUserContext.user && contributionVoted ? (contributionVoteCount === 1 ? (_jsx(FormattedMessage, { id: "ui.voteAudienceButton.votedOnlyByMe", defaultMessage: "ui.voteAudienceButton.votedOnlyByMe" })) : (_jsx(FormattedMessage, { id: "ui.voteAudienceButton.votedByMe", defaultMessage: "ui.voteAudienceButton.votedByMe", values: { total: contributionVoteCount - 1 } }))) : (_jsx(FormattedMessage, { id: "ui.voteAudienceButton.votes", defaultMessage: "ui.voteAudienceButton.votes", values: { total: contributionVoteCount } }))] })) })), open && (_jsx(DialogRoot, Object.assign({ title: dialogTitle, onClose: handleClose, open: open, DialogContentProps: {} }, { children: isLoadingVoteList && !voteList ? (_jsx(CentralProgress, { size: 50 })) : (_jsx(InfiniteScroll, Object.assign({ dataLength: voteList.length, next: () => handleFetchVoteList({}), hasMoreNext: voteListHasNext, loaderNext: _jsx(CentralProgress, { size: 30 }), height: 400, endMessage: _jsx(Typography, Object.assign({ variant: "body2", align: "center", fontWeight: "bold" }, { children: _jsx(FormattedMessage, { id: "ui.voteAudienceButton.dialog.end", defaultMessage: "ui.voteAudienceButton.dialog.end" }) })) }, { children: _jsx(List, { children: voteList.map((vote) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: vote.user, badgeContent: _jsx(Avatar, Object.assign({ className: classes.dialogVoteBadge }, { children: vote.reaction ? (_jsx(Icon, { children: _jsx("img", { alt: vote.reaction.label, src: vote.reaction.image, width: "100%", height: "100%" }) })) : (_jsx(Icon, { children: "thumb_up" })) })), onClick: handleClose }) }, vote.user.id))) }) }))) })))] }));
|
|
120
120
|
}
|