@selfcommunity/react-ui 0.7.0-alpha.309 → 0.7.0-alpha.310

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 (15) hide show
  1. package/lib/cjs/components/AccountDataPortability/AccountDataPortability.js +8 -3
  2. package/lib/cjs/components/BottomNavigation/BottomNavigation.js +1 -1
  3. package/lib/cjs/components/SearchAutocomplete/SearchAutocomplete.d.ts +5 -0
  4. package/lib/cjs/components/SearchAutocomplete/SearchAutocomplete.js +2 -2
  5. package/lib/cjs/components/SearchDialog/SearchDialog.js +1 -1
  6. package/lib/esm/components/AccountDataPortability/AccountDataPortability.js +8 -3
  7. package/lib/esm/components/BottomNavigation/BottomNavigation.js +1 -1
  8. package/lib/esm/components/SearchAutocomplete/SearchAutocomplete.d.ts +5 -0
  9. package/lib/esm/components/SearchAutocomplete/SearchAutocomplete.js +2 -2
  10. package/lib/esm/components/SearchDialog/SearchDialog.js +1 -1
  11. package/lib/umd/53.js +2 -0
  12. package/lib/umd/{329.js.LICENSE.txt → 53.js.LICENSE.txt} +0 -4
  13. package/lib/umd/react-ui.js +1 -1
  14. package/package.json +5 -5
  15. package/lib/umd/329.js +0 -2
package/lib/cjs/components/AccountDataPortability/AccountDataPortability.js CHANGED
@@ -8,12 +8,12 @@ const material_1 = require("@mui/material");
8
8
  const classnames_1 = tslib_1.__importDefault(require("classnames"));
9
9
  const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
10
10
  const lab_1 = require("@mui/lab");
11
- const moment_1 = tslib_1.__importDefault(require("moment"));
12
11
  const api_services_1 = require("@selfcommunity/api-services");
13
12
  const utils_1 = require("@selfcommunity/utils");
14
13
  const react_core_1 = require("@selfcommunity/react-core");
15
14
  const Errors_1 = require("../../constants/Errors");
16
15
  const react_intl_1 = require("react-intl");
16
+ const date_fns_1 = require("date-fns");
17
17
  const PREFIX = 'SCAccountDataPortability';
18
18
  const classes = {
19
19
  root: `${PREFIX}-root`,
@@ -95,7 +95,11 @@ function AccountDataPortability(inProps) {
95
95
  const url = window.URL.createObjectURL(new Blob([res], { type: 'application/zip' }));
96
96
  const link = document.createElement('a');
97
97
  link.href = url;
98
- link.setAttribute('download', `${scUserContext.user.username}_${intl.formatDate((0, moment_1.default)().format(), { year: 'numeric', month: 'numeric', day: 'numeric' })}.zip`);
98
+ link.setAttribute('download', `${scUserContext.user.username}_${intl.formatDate((0, date_fns_1.format)(new Date(), "yyyy-MM-dd'T'HH:mm:ssxxx"), {
99
+ year: 'numeric',
100
+ month: 'numeric',
101
+ day: 'numeric'
102
+ })}.zip`);
99
103
  document.body.appendChild(link);
100
104
  link.click();
101
105
  document.body.removeChild(link);
@@ -160,7 +164,8 @@ function AccountDataPortability(inProps) {
160
164
  // @ts-ignore
161
165
  ul: (chunks) => react_1.default.createElement("ul", null, chunks)
162
166
  } })),
163
- react_1.default.createElement(lab_1.LoadingButton, { size: "small", loading: (dataPortability && dataPortability.computing) || loading, disabled: !dataPortability || (dataPortability && (dataPortability.computing || (0, moment_1.default)().diff((0, moment_1.default)(dataPortability.requested_at), 'hours') < 24)), loadingPosition: "start", startIcon: react_1.default.createElement(Icon_1.default, null, "folder_open"), variant: "outlined", className: classes.createButton, onClick: handleCreateDataPortabilityFile }, (dataPortability && dataPortability.computing) || loading ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.createLoadingButton", defaultMessage: "ui.accountDataPortability.createLoadingButton" })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.createButton", defaultMessage: "ui.accountDataPortability.createButton" }))),
167
+ react_1.default.createElement(lab_1.LoadingButton, { size: "small", loading: (dataPortability && dataPortability.computing) || loading, disabled: !dataPortability ||
168
+ (dataPortability && (dataPortability.computing || (0, date_fns_1.differenceInHours)(new Date(), (0, date_fns_1.parseISO)(dataPortability.requested_at.toString())) < 24)), loadingPosition: "start", startIcon: react_1.default.createElement(Icon_1.default, null, "folder_open"), variant: "outlined", className: classes.createButton, onClick: handleCreateDataPortabilityFile }, (dataPortability && dataPortability.computing) || loading ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.createLoadingButton", defaultMessage: "ui.accountDataPortability.createLoadingButton" })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.createButton", defaultMessage: "ui.accountDataPortability.createButton" }))),
164
169
  dataPortability && !dataPortability.computing && dataPortability.generated_at && (react_1.default.createElement(lab_1.LoadingButton, { size: "small", loading: downloadingDataPortability, loadingPosition: "start", startIcon: react_1.default.createElement(Icon_1.default, null, "cloud_download_outlined"), variant: 'outlined', className: classes.downloadButton, onClick: handleDownloadDataPortabilityFile },
165
170
  react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.downloadButton", defaultMessage: "ui.accountDataPortability.downloadButton" }))),
166
171
  react_1.default.createElement("br", null),
package/lib/cjs/components/BottomNavigation/BottomNavigation.js CHANGED
@@ -71,7 +71,7 @@ function BottomNavigation(inProps) {
71
71
  return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root, { [classes.ios]: isIOS }) }, rest), children
72
72
  ? children
73
73
  : [
74
- scUserContext.user ? (react_1.default.createElement(material_1.BottomNavigationAction, { key: "home", className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), icon: react_1.default.createElement(material_1.Icon, null, "home") })) : null,
74
+ react_1.default.createElement(material_1.BottomNavigationAction, { key: "home", className: classes.action, component: react_core_1.Link, to: scUserContext.user ? scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}) : '/', value: scUserContext.user ? scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}) : '/', icon: react_1.default.createElement(material_1.Icon, null, "home") }),
75
75
  (scUserContext.user || preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY]) &&
76
76
  preferences[react_core_1.SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED] ? (react_1.default.createElement(material_1.BottomNavigationAction, { key: "explore", className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}), icon: react_1.default.createElement(material_1.Icon, null, "explore") })) : null,
77
77
  scUserContext.user ? (react_1.default.createElement(material_1.BottomNavigationAction, { key: "notifications", className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), icon: react_1.default.createElement(material_1.Badge, { badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" },
package/lib/cjs/components/SearchAutocomplete/SearchAutocomplete.d.ts CHANGED
@@ -1,6 +1,11 @@
1
1
  import { AutocompleteProps } from '@mui/material';
2
2
  import { SCSuggestionType } from '@selfcommunity/types';
3
3
  export interface SearchAutocompleteProps extends Pick<AutocompleteProps<string, false, false, true>, Exclude<keyof AutocompleteProps<string, false, false, true>, 'inputValue' | 'freeSolo' | 'multiple' | 'autoComplete' | 'loading' | 'loadingText' | 'noOptionsText' | 'options' | 'getOptionLabel' | 'onInputChange' | 'renderOption' | 'renderInput'>> {
4
+ /**
5
+ * The search form shoul focus on mount
6
+ * @default false
7
+ */
8
+ autoFocus?: boolean;
4
9
  /**
5
10
  * Handler for search action
6
11
  */
package/lib/cjs/components/SearchAutocomplete/SearchAutocomplete.js CHANGED
@@ -38,7 +38,7 @@ function SearchAutocomplete(inProps) {
38
38
  props: inProps,
39
39
  name: PREFIX
40
40
  });
41
- const { id = `${PREFIX}-autocomplete`, className, blurOnSelect, onSearch = null, onClear = null, onSuggestionSelect = (suggestion) => null } = props, rest = tslib_1.__rest(props, ["id", "className", "blurOnSelect", "onSearch", "onClear", "onSuggestionSelect"]);
41
+ const { id = `${PREFIX}-autocomplete`, className, blurOnSelect, autoFocus = false, onSearch = null, onClear = null, onSuggestionSelect = (suggestion) => null } = props, rest = tslib_1.__rest(props, ["id", "className", "blurOnSelect", "autoFocus", "onSearch", "onClear", "onSuggestionSelect"]);
42
42
  // CONTEXT
43
43
  const scPreferences = (0, react_core_1.useSCPreferences)();
44
44
  // STATE
@@ -104,7 +104,7 @@ function SearchAutocomplete(inProps) {
104
104
  react_1.default.createElement(material_1.Avatar, { alt: option[types_1.SuggestionType.CATEGORY]['name'], src: option[types_1.SuggestionType.CATEGORY]['image_medium'], variant: "square" }),
105
105
  react_1.default.createElement(material_1.Typography, { ml: 1 }, option[types_1.SuggestionType.CATEGORY]['name']))))), renderInput: (params) => (react_1.default.createElement(material_1.TextField, Object.assign({}, params, { placeholder: `${intl.formatMessage(messages.placeholder, {
106
106
  community: scPreferences.preferences[react_core_1.SCPreferences.TEXT_APPLICATION_NAME].value
107
- })}`, InputProps: Object.assign(Object.assign({}, params.InputProps), { name: 'search-autocomplete', className: classes.input, startAdornment: react_1.default.createElement(Icon_1.default, { className: classes.icon }, "search"), endAdornment: (react_1.default.createElement(material_1.Fade, { in: value.length > 0 || Boolean(onClear), appear: false },
107
+ })}`, InputProps: Object.assign(Object.assign({}, params.InputProps), { autoFocus, name: 'search-autocomplete', className: classes.input, startAdornment: react_1.default.createElement(Icon_1.default, { className: classes.icon }, "search"), endAdornment: (react_1.default.createElement(material_1.Fade, { in: value.length > 0 || Boolean(onClear), appear: false },
108
108
  react_1.default.createElement(material_1.IconButton, { className: classes.clear, onClick: handleClear, size: "small" },
109
109
  react_1.default.createElement(Icon_1.default, null, "close")))) }) }))) }, rest)));
110
110
  }
package/lib/cjs/components/SearchDialog/SearchDialog.js CHANGED
@@ -30,7 +30,7 @@ function Search(inProps) {
30
30
  props: inProps,
31
31
  name: PREFIX
32
32
  });
33
- const { className, SearchAutocompleteProps = {} } = props, rest = tslib_1.__rest(props, ["className", "SearchAutocompleteProps"]);
33
+ const { className, SearchAutocompleteProps = { autoFocus: true } } = props, rest = tslib_1.__rest(props, ["className", "SearchAutocompleteProps"]);
34
34
  return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest),
35
35
  react_1.default.createElement(material_1.DialogContent, null,
36
36
  react_1.default.createElement(SearchAutocomplete_1.default, Object.assign({ className: classes.search, blurOnSelect: false, open: true, disablePortal: true }, SearchAutocompleteProps)))));
package/lib/esm/components/AccountDataPortability/AccountDataPortability.js CHANGED
@@ -6,12 +6,12 @@ import { Box, Typography } from '@mui/material';
6
6
  import classNames from 'classnames';
7
7
  import Icon from '@mui/material/Icon';
8
8
  import { LoadingButton } from '@mui/lab';
9
- import moment from 'moment';
10
9
  import { DataPortabilityService } from '@selfcommunity/api-services';
11
10
  import { capitalize, Logger } from '@selfcommunity/utils';
12
11
  import { SCUserContext } from '@selfcommunity/react-core';
13
12
  import { SCOPE_SC_UI } from '../../constants/Errors';
14
13
  import { FormattedDate, FormattedMessage, FormattedTime, useIntl } from 'react-intl';
14
+ import { differenceInHours, format, parseISO } from 'date-fns';
15
15
  const PREFIX = 'SCAccountDataPortability';
16
16
  const classes = {
17
17
  root: `${PREFIX}-root`,
@@ -93,7 +93,11 @@ export default function AccountDataPortability(inProps) {
93
93
  const url = window.URL.createObjectURL(new Blob([res], { type: 'application/zip' }));
94
94
  const link = document.createElement('a');
95
95
  link.href = url;
96
- link.setAttribute('download', `${scUserContext.user.username}_${intl.formatDate(moment().format(), { year: 'numeric', month: 'numeric', day: 'numeric' })}.zip`);
96
+ link.setAttribute('download', `${scUserContext.user.username}_${intl.formatDate(format(new Date(), "yyyy-MM-dd'T'HH:mm:ssxxx"), {
97
+ year: 'numeric',
98
+ month: 'numeric',
99
+ day: 'numeric'
100
+ })}.zip`);
97
101
  document.body.appendChild(link);
98
102
  link.click();
99
103
  document.body.removeChild(link);
@@ -158,7 +162,8 @@ export default function AccountDataPortability(inProps) {
158
162
  // @ts-ignore
159
163
  ul: (chunks) => React.createElement("ul", null, chunks)
160
164
  } })),
161
- React.createElement(LoadingButton, { size: "small", loading: (dataPortability && dataPortability.computing) || loading, disabled: !dataPortability || (dataPortability && (dataPortability.computing || moment().diff(moment(dataPortability.requested_at), 'hours') < 24)), loadingPosition: "start", startIcon: React.createElement(Icon, null, "folder_open"), variant: "outlined", className: classes.createButton, onClick: handleCreateDataPortabilityFile }, (dataPortability && dataPortability.computing) || loading ? (React.createElement(FormattedMessage, { id: "ui.accountDataPortability.createLoadingButton", defaultMessage: "ui.accountDataPortability.createLoadingButton" })) : (React.createElement(FormattedMessage, { id: "ui.accountDataPortability.createButton", defaultMessage: "ui.accountDataPortability.createButton" }))),
165
+ React.createElement(LoadingButton, { size: "small", loading: (dataPortability && dataPortability.computing) || loading, disabled: !dataPortability ||
166
+ (dataPortability && (dataPortability.computing || differenceInHours(new Date(), parseISO(dataPortability.requested_at.toString())) < 24)), loadingPosition: "start", startIcon: React.createElement(Icon, null, "folder_open"), variant: "outlined", className: classes.createButton, onClick: handleCreateDataPortabilityFile }, (dataPortability && dataPortability.computing) || loading ? (React.createElement(FormattedMessage, { id: "ui.accountDataPortability.createLoadingButton", defaultMessage: "ui.accountDataPortability.createLoadingButton" })) : (React.createElement(FormattedMessage, { id: "ui.accountDataPortability.createButton", defaultMessage: "ui.accountDataPortability.createButton" }))),
162
167
  dataPortability && !dataPortability.computing && dataPortability.generated_at && (React.createElement(LoadingButton, { size: "small", loading: downloadingDataPortability, loadingPosition: "start", startIcon: React.createElement(Icon, null, "cloud_download_outlined"), variant: 'outlined', className: classes.downloadButton, onClick: handleDownloadDataPortabilityFile },
163
168
  React.createElement(FormattedMessage, { id: "ui.accountDataPortability.downloadButton", defaultMessage: "ui.accountDataPortability.downloadButton" }))),
164
169
  React.createElement("br", null),
package/lib/esm/components/BottomNavigation/BottomNavigation.js CHANGED
@@ -69,7 +69,7 @@ export default function BottomNavigation(inProps) {
69
69
  return (React.createElement(Root, Object.assign({ className: classNames(className, classes.root, { [classes.ios]: isIOS }) }, rest), children
70
70
  ? children
71
71
  : [
72
- scUserContext.user ? (React.createElement(BottomNavigationAction, { key: "home", className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), icon: React.createElement(Icon, null, "home") })) : null,
72
+ React.createElement(BottomNavigationAction, { key: "home", className: classes.action, component: Link, to: scUserContext.user ? scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) : '/', value: scUserContext.user ? scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) : '/', icon: React.createElement(Icon, null, "home") }),
73
73
  (scUserContext.user || preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY]) &&
74
74
  preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED] ? (React.createElement(BottomNavigationAction, { key: "explore", className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), icon: React.createElement(Icon, null, "explore") })) : null,
75
75
  scUserContext.user ? (React.createElement(BottomNavigationAction, { key: "notifications", className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), icon: React.createElement(Badge, { badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" },
package/lib/esm/components/SearchAutocomplete/SearchAutocomplete.d.ts CHANGED
@@ -1,6 +1,11 @@
1
1
  import { AutocompleteProps } from '@mui/material';
2
2
  import { SCSuggestionType } from '@selfcommunity/types';
3
3
  export interface SearchAutocompleteProps extends Pick<AutocompleteProps<string, false, false, true>, Exclude<keyof AutocompleteProps<string, false, false, true>, 'inputValue' | 'freeSolo' | 'multiple' | 'autoComplete' | 'loading' | 'loadingText' | 'noOptionsText' | 'options' | 'getOptionLabel' | 'onInputChange' | 'renderOption' | 'renderInput'>> {
4
+ /**
5
+ * The search form shoul focus on mount
6
+ * @default false
7
+ */
8
+ autoFocus?: boolean;
4
9
  /**
5
10
  * Handler for search action
6
11
  */
package/lib/esm/components/SearchAutocomplete/SearchAutocomplete.js CHANGED
@@ -36,7 +36,7 @@ export default function SearchAutocomplete(inProps) {
36
36
  props: inProps,
37
37
  name: PREFIX
38
38
  });
39
- const { id = `${PREFIX}-autocomplete`, className, blurOnSelect, onSearch = null, onClear = null, onSuggestionSelect = (suggestion) => null } = props, rest = __rest(props, ["id", "className", "blurOnSelect", "onSearch", "onClear", "onSuggestionSelect"]);
39
+ const { id = `${PREFIX}-autocomplete`, className, blurOnSelect, autoFocus = false, onSearch = null, onClear = null, onSuggestionSelect = (suggestion) => null } = props, rest = __rest(props, ["id", "className", "blurOnSelect", "autoFocus", "onSearch", "onClear", "onSuggestionSelect"]);
40
40
  // CONTEXT
41
41
  const scPreferences = useSCPreferences();
42
42
  // STATE
@@ -102,7 +102,7 @@ export default function SearchAutocomplete(inProps) {
102
102
  React.createElement(Avatar, { alt: option[SuggestionType.CATEGORY]['name'], src: option[SuggestionType.CATEGORY]['image_medium'], variant: "square" }),
103
103
  React.createElement(Typography, { ml: 1 }, option[SuggestionType.CATEGORY]['name']))))), renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { placeholder: `${intl.formatMessage(messages.placeholder, {
104
104
  community: scPreferences.preferences[SCPreferences.TEXT_APPLICATION_NAME].value
105
- })}`, InputProps: Object.assign(Object.assign({}, params.InputProps), { name: 'search-autocomplete', className: classes.input, startAdornment: React.createElement(Icon, { className: classes.icon }, "search"), endAdornment: (React.createElement(Fade, { in: value.length > 0 || Boolean(onClear), appear: false },
105
+ })}`, InputProps: Object.assign(Object.assign({}, params.InputProps), { autoFocus, name: 'search-autocomplete', className: classes.input, startAdornment: React.createElement(Icon, { className: classes.icon }, "search"), endAdornment: (React.createElement(Fade, { in: value.length > 0 || Boolean(onClear), appear: false },
106
106
  React.createElement(IconButton, { className: classes.clear, onClick: handleClear, size: "small" },
107
107
  React.createElement(Icon, null, "close")))) }) }))) }, rest)));
108
108
  }
package/lib/esm/components/SearchDialog/SearchDialog.js CHANGED
@@ -28,7 +28,7 @@ export default function Search(inProps) {
28
28
  props: inProps,
29
29
  name: PREFIX
30
30
  });
31
- const { className, SearchAutocompleteProps = {} } = props, rest = __rest(props, ["className", "SearchAutocompleteProps"]);
31
+ const { className, SearchAutocompleteProps = { autoFocus: true } } = props, rest = __rest(props, ["className", "SearchAutocompleteProps"]);
32
32
  return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest),
33
33
  React.createElement(DialogContent, null,
34
34
  React.createElement(SearchAutocomplete, Object.assign({ className: classes.search, blurOnSelect: false, open: true, disablePortal: true }, SearchAutocompleteProps)))));