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

package/lib/cjs/components/AccountDataPortability/AccountDataPortability.js

@@ -8,12 +8,12 @@ const material_1 = require("@mui/material");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const lab_1 = require("@mui/lab");
-const moment_1 = tslib_1.__importDefault(require("moment"));
 const api_services_1 = require("@selfcommunity/api-services");
 const utils_1 = require("@selfcommunity/utils");
 const react_core_1 = require("@selfcommunity/react-core");
 const Errors_1 = require("../../constants/Errors");
 const react_intl_1 = require("react-intl");
+const date_fns_1 = require("date-fns");
 const PREFIX = 'SCAccountDataPortability';
 const classes = {
     root: `${PREFIX}-root`,
@@ -95,7 +95,11 @@ function AccountDataPortability(inProps) {
             const url = window.URL.createObjectURL(new Blob([res], { type: 'application/zip' }));
             const link = document.createElement('a');
             link.href = url;
-            link.setAttribute('download', `${scUserContext.user.username}_${intl.formatDate((0, moment_1.default)().format(), { year: 'numeric', month: 'numeric', day: 'numeric' })}.zip`);
+            link.setAttribute('download', `${scUserContext.user.username}_${intl.formatDate((0, date_fns_1.format)(new Date(), "yyyy-MM-dd'T'HH:mm:ssxxx"), {
+                year: 'numeric',
+                month: 'numeric',
+                day: 'numeric'
+            })}.zip`);
             document.body.appendChild(link);
             link.click();
             document.body.removeChild(link);
@@ -160,7 +164,8 @@ function AccountDataPortability(inProps) {
                     // @ts-ignore
                     ul: (chunks) => react_1.default.createElement("ul", null, chunks)
                 } })),
-        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" }))),
+        react_1.default.createElement(lab_1.LoadingButton, { size: "small", loading: (dataPortability && dataPortability.computing) || loading, disabled: !dataPortability ||
+                (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" }))),
         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 },
             react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.downloadButton", defaultMessage: "ui.accountDataPortability.downloadButton" }))),
         react_1.default.createElement("br", null),

package/lib/cjs/components/BottomNavigation/BottomNavigation.js

@@ -71,7 +71,7 @@ function BottomNavigation(inProps) {
     return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root, { [classes.ios]: isIOS }) }, rest), children
         ? children
         : [
-            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,
+            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") }),
             (scUserContext.user || preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY]) &&
                 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,
             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

@@ -1,6 +1,11 @@
 import { AutocompleteProps } from '@mui/material';
 import { SCSuggestionType } from '@selfcommunity/types';
 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'>> {
+    /**
+     * The search form shoul focus on mount
+     * @default false
+     */
+    autoFocus?: boolean;
     /**
      * Handler for search action
      */

package/lib/cjs/components/SearchAutocomplete/SearchAutocomplete.js

@@ -38,7 +38,7 @@ function SearchAutocomplete(inProps) {
         props: inProps,
         name: PREFIX
     });
-    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"]);
+    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"]);
     // CONTEXT
     const scPreferences = (0, react_core_1.useSCPreferences)();
     // STATE
@@ -104,7 +104,7 @@ function SearchAutocomplete(inProps) {
             react_1.default.createElement(material_1.Avatar, { alt: option[types_1.SuggestionType.CATEGORY]['name'], src: option[types_1.SuggestionType.CATEGORY]['image_medium'], variant: "square" }),
             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, {
                 community: scPreferences.preferences[react_core_1.SCPreferences.TEXT_APPLICATION_NAME].value
-            })}`, 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 },
+            })}`, 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 },
                     react_1.default.createElement(material_1.IconButton, { className: classes.clear, onClick: handleClear, size: "small" },
                         react_1.default.createElement(Icon_1.default, null, "close")))) }) }))) }, rest)));
 }

package/lib/cjs/components/SearchDialog/SearchDialog.js

@@ -30,7 +30,7 @@ function Search(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className, SearchAutocompleteProps = {} } = props, rest = tslib_1.__rest(props, ["className", "SearchAutocompleteProps"]);
+    const { className, SearchAutocompleteProps = { autoFocus: true } } = props, rest = tslib_1.__rest(props, ["className", "SearchAutocompleteProps"]);
     return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest),
         react_1.default.createElement(material_1.DialogContent, null,
             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

@@ -6,12 +6,12 @@ import { Box, Typography } from '@mui/material';
 import classNames from 'classnames';
 import Icon from '@mui/material/Icon';
 import { LoadingButton } from '@mui/lab';
-import moment from 'moment';
 import { DataPortabilityService } from '@selfcommunity/api-services';
 import { capitalize, Logger } from '@selfcommunity/utils';
 import { SCUserContext } from '@selfcommunity/react-core';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { FormattedDate, FormattedMessage, FormattedTime, useIntl } from 'react-intl';
+import { differenceInHours, format, parseISO } from 'date-fns';
 const PREFIX = 'SCAccountDataPortability';
 const classes = {
     root: `${PREFIX}-root`,
@@ -93,7 +93,11 @@ export default function AccountDataPortability(inProps) {
             const url = window.URL.createObjectURL(new Blob([res], { type: 'application/zip' }));
             const link = document.createElement('a');
             link.href = url;
-            link.setAttribute('download', `${scUserContext.user.username}_${intl.formatDate(moment().format(), { year: 'numeric', month: 'numeric', day: 'numeric' })}.zip`);
+            link.setAttribute('download', `${scUserContext.user.username}_${intl.formatDate(format(new Date(), "yyyy-MM-dd'T'HH:mm:ssxxx"), {
+                year: 'numeric',
+                month: 'numeric',
+                day: 'numeric'
+            })}.zip`);
             document.body.appendChild(link);
             link.click();
             document.body.removeChild(link);
@@ -158,7 +162,8 @@ export default function AccountDataPortability(inProps) {
                     // @ts-ignore
                     ul: (chunks) => React.createElement("ul", null, chunks)
                 } })),
-        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" }))),
+        React.createElement(LoadingButton, { size: "small", loading: (dataPortability && dataPortability.computing) || loading, disabled: !dataPortability ||
+                (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" }))),
         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 },
             React.createElement(FormattedMessage, { id: "ui.accountDataPortability.downloadButton", defaultMessage: "ui.accountDataPortability.downloadButton" }))),
         React.createElement("br", null),

package/lib/esm/components/BottomNavigation/BottomNavigation.js

@@ -69,7 +69,7 @@ export default function BottomNavigation(inProps) {
     return (React.createElement(Root, Object.assign({ className: classNames(className, classes.root, { [classes.ios]: isIOS }) }, rest), children
         ? children
         : [
-            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,
+            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") }),
             (scUserContext.user || preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY]) &&
                 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,
             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

@@ -1,6 +1,11 @@
 import { AutocompleteProps } from '@mui/material';
 import { SCSuggestionType } from '@selfcommunity/types';
 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'>> {
+    /**
+     * The search form shoul focus on mount
+     * @default false
+     */
+    autoFocus?: boolean;
     /**
      * Handler for search action
      */

package/lib/esm/components/SearchAutocomplete/SearchAutocomplete.js

@@ -36,7 +36,7 @@ export default function SearchAutocomplete(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { id = `${PREFIX}-autocomplete`, className, blurOnSelect, onSearch = null, onClear = null, onSuggestionSelect = (suggestion) => null } = props, rest = __rest(props, ["id", "className", "blurOnSelect", "onSearch", "onClear", "onSuggestionSelect"]);
+    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"]);
     // CONTEXT
     const scPreferences = useSCPreferences();
     // STATE
@@ -102,7 +102,7 @@ export default function SearchAutocomplete(inProps) {
             React.createElement(Avatar, { alt: option[SuggestionType.CATEGORY]['name'], src: option[SuggestionType.CATEGORY]['image_medium'], variant: "square" }),
             React.createElement(Typography, { ml: 1 }, option[SuggestionType.CATEGORY]['name']))))), renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { placeholder: `${intl.formatMessage(messages.placeholder, {
                 community: scPreferences.preferences[SCPreferences.TEXT_APPLICATION_NAME].value
-            })}`, 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 },
+            })}`, 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 },
                     React.createElement(IconButton, { className: classes.clear, onClick: handleClear, size: "small" },
                         React.createElement(Icon, null, "close")))) }) }))) }, rest)));
 }

package/lib/esm/components/SearchDialog/SearchDialog.js

@@ -28,7 +28,7 @@ export default function Search(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className, SearchAutocompleteProps = {} } = props, rest = __rest(props, ["className", "SearchAutocompleteProps"]);
+    const { className, SearchAutocompleteProps = { autoFocus: true } } = props, rest = __rest(props, ["className", "SearchAutocompleteProps"]);
     return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest),
         React.createElement(DialogContent, null,
             React.createElement(SearchAutocomplete, Object.assign({ className: classes.search, blurOnSelect: false, open: true, disablePortal: true }, SearchAutocompleteProps)))));