@selfcommunity/react-ui 0.8.0-alpha.12 → 0.8.0-alpha.13
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/Composer/Composer.js +2 -0
- package/lib/cjs/components/Feed/Feed.js +9 -1
- package/lib/cjs/shared/InfiniteScroll/index.js +1 -1
- package/lib/cjs/utils/formatRelativeTime.js +2 -2
- package/lib/esm/components/Composer/Composer.js +2 -0
- package/lib/esm/components/Feed/Feed.js +11 -3
- package/lib/esm/shared/InfiniteScroll/index.js +1 -1
- package/lib/esm/utils/formatRelativeTime.js +2 -2
- package/lib/umd/react-ui.js +1 -1
- package/package.json +2 -2
|
@@ -26,6 +26,12 @@ const Skeleton_2 = tslib_1.__importDefault(require("./Skeleton"));
|
|
|
26
26
|
const use_deep_compare_effect_1 = require("use-deep-compare-effect");
|
|
27
27
|
const StickyBox_1 = tslib_1.__importDefault(require("../../shared/StickyBox"));
|
|
28
28
|
const constants_1 = require("./constants");
|
|
29
|
+
const messages = (0, react_intl_1.defineMessages)({
|
|
30
|
+
refresh: {
|
|
31
|
+
id: 'ui.feed.refreshRelease',
|
|
32
|
+
defaultMessage: 'ui.feed.refreshRelease'
|
|
33
|
+
}
|
|
34
|
+
});
|
|
29
35
|
const classes = {
|
|
30
36
|
root: `${constants_1.PREFIX}-root`,
|
|
31
37
|
left: `${constants_1.PREFIX}-left`,
|
|
@@ -78,7 +84,9 @@ const Feed = (inProps, ref) => {
|
|
|
78
84
|
props: inProps,
|
|
79
85
|
name: constants_1.PREFIX
|
|
80
86
|
});
|
|
81
|
-
|
|
87
|
+
// HOOKS
|
|
88
|
+
const intl = (0, react_intl_1.useIntl)();
|
|
89
|
+
const { id = 'feed', className, endpoint, endpointQueryParams = { limit: Pagination_1.DEFAULT_PAGINATION_LIMIT, offset: Pagination_1.DEFAULT_PAGINATION_OFFSET }, endMessage = (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.feed.noOtherFeedObject", defaultMessage: "ui.feed.noOtherFeedObject" }), refreshMessage = (0, jsx_runtime_1.jsx)(material_1.Typography, { dangerouslySetInnerHTML: { __html: `${intl.formatMessage(messages.refresh)}` } }), HeaderComponent, FooterComponent = Footer_1.default, FooterComponentProps = {}, widgets = [], ItemComponent, itemPropsGenerator, itemIdGenerator, ItemProps = {}, ItemSkeleton, ItemSkeletonProps = {}, onNextData, onPreviousData, FeedSidebarProps = {}, CustomAdvProps = {}, enabledCustomAdvPositions = [types_1.SCCustomAdvPosition.POSITION_FEED_SIDEBAR, types_1.SCCustomAdvPosition.POSITION_FEED], requireAuthentication = false, cacheStrategy = utils_1.CacheStrategies.NETWORK_ONLY, prefetchedData, scrollableTargetId, VirtualizedScrollerProps = {}, disablePaginationLinks = false, hidePaginationLinks = true, paginationLinksPageQueryParam = Pagination_1.DEFAULT_PAGINATION_QUERY_PARAM_NAME, PaginationLinkProps = {}, hideAdvs = false, emptyFeedPlaceholder } = props;
|
|
82
90
|
// CONTEXT
|
|
83
91
|
const scPreferences = (0, react_1.useContext)(react_core_1.SCPreferencesContext);
|
|
84
92
|
const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
|
|
@@ -225,7 +225,7 @@ class InfiniteScroll extends react_1.Component {
|
|
|
225
225
|
// because heighted infiniteScroll visualy breaks
|
|
226
226
|
// on drag down as overflow becomes visible
|
|
227
227
|
const outerDivStyle = this.props.pullDownToRefresh && this.props.height ? { overflow: 'auto' } : {};
|
|
228
|
-
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: outerDivStyle, className: "infinite-scroll-component__outerdiv" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `infinite-scroll-component ${this.props.className || ''}`, ref: (infScroll) => (this._infScroll = infScroll), style: style }, { children: [this.props.header, this.props.pullDownToRefresh && ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: { position: 'relative' }, ref: (pullDown) => (this._pullDown = pullDown) }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: {
|
|
228
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: outerDivStyle, className: "infinite-scroll-component__outerdiv" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `infinite-scroll-component ${this.props.className || ''}`, ref: (infScroll) => (this._infScroll = infScroll), style: style }, { children: [this.props.header, this.props.pullDownToRefresh && ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: { position: 'relative', marginBottom: 16 }, ref: (pullDown) => (this._pullDown = pullDown) }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: {
|
|
229
229
|
position: 'absolute',
|
|
230
230
|
left: 0,
|
|
231
231
|
right: 0,
|
|
@@ -5,8 +5,8 @@ const getRelativeTime = (date) => {
|
|
|
5
5
|
const diffInMilliseconds = new Date().getTime() - new Date(date).getTime();
|
|
6
6
|
const seconds = Math.floor(diffInMilliseconds / 1000);
|
|
7
7
|
const minutes = Math.floor(seconds / 60);
|
|
8
|
-
const hours = Math.
|
|
9
|
-
const days = Math.
|
|
8
|
+
const hours = Math.floor(minutes / 60);
|
|
9
|
+
const days = Math.round(hours / 24);
|
|
10
10
|
const weeks = Math.floor(days / 7);
|
|
11
11
|
const months = Math.floor(days / 30);
|
|
12
12
|
const years = Math.floor(months / 12);
|
|
@@ -501,6 +501,8 @@ export default function Composer(inProps) {
|
|
|
501
501
|
}
|
|
502
502
|
else {
|
|
503
503
|
onClose && onClose(e);
|
|
504
|
+
setLayer(null);
|
|
505
|
+
dispatch({ type: 'reset' });
|
|
504
506
|
/*setLayer(null);
|
|
505
507
|
feedType && feedType === SCFeedTypologyType.CATEGORY
|
|
506
508
|
? dispatch({type: 'resetCategoryFeed'})
|
|
@@ -3,8 +3,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
3
3
|
import React, { forwardRef, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
|
|
4
4
|
import { Link, SCCache, SCPreferences, SCPreferencesContext, SCUserContext, useIsComponentMountedRef, usePreviousValue, useSCFetchFeed } from '@selfcommunity/react-core';
|
|
5
5
|
import { styled, useTheme } from '@mui/material/styles';
|
|
6
|
-
import { Box, CardContent, Grid, Hidden, useMediaQuery } from '@mui/material';
|
|
7
|
-
import { FormattedMessage } from 'react-intl';
|
|
6
|
+
import { Box, CardContent, Grid, Hidden, Typography, useMediaQuery } from '@mui/material';
|
|
7
|
+
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
|
8
8
|
import { GenericSkeleton } from '../Skeleton';
|
|
9
9
|
import CustomAdv from '../CustomAdv';
|
|
10
10
|
import { SCCustomAdvPosition } from '@selfcommunity/types';
|
|
@@ -23,6 +23,12 @@ import FeedSkeleton from './Skeleton';
|
|
|
23
23
|
import { useDeepCompareEffectNoCheck } from 'use-deep-compare-effect';
|
|
24
24
|
import StickyBoxComp from '../../shared/StickyBox';
|
|
25
25
|
import { PREFIX } from './constants';
|
|
26
|
+
const messages = defineMessages({
|
|
27
|
+
refresh: {
|
|
28
|
+
id: 'ui.feed.refreshRelease',
|
|
29
|
+
defaultMessage: 'ui.feed.refreshRelease'
|
|
30
|
+
}
|
|
31
|
+
});
|
|
26
32
|
const classes = {
|
|
27
33
|
root: `${PREFIX}-root`,
|
|
28
34
|
left: `${PREFIX}-left`,
|
|
@@ -75,7 +81,9 @@ const Feed = (inProps, ref) => {
|
|
|
75
81
|
props: inProps,
|
|
76
82
|
name: PREFIX
|
|
77
83
|
});
|
|
78
|
-
|
|
84
|
+
// HOOKS
|
|
85
|
+
const intl = useIntl();
|
|
86
|
+
const { id = 'feed', className, endpoint, endpointQueryParams = { limit: DEFAULT_PAGINATION_LIMIT, offset: DEFAULT_PAGINATION_OFFSET }, endMessage = _jsx(FormattedMessage, { id: "ui.feed.noOtherFeedObject", defaultMessage: "ui.feed.noOtherFeedObject" }), refreshMessage = _jsx(Typography, { dangerouslySetInnerHTML: { __html: `${intl.formatMessage(messages.refresh)}` } }), HeaderComponent, FooterComponent = Footer, FooterComponentProps = {}, widgets = [], ItemComponent, itemPropsGenerator, itemIdGenerator, ItemProps = {}, ItemSkeleton, ItemSkeletonProps = {}, onNextData, onPreviousData, FeedSidebarProps = {}, CustomAdvProps = {}, enabledCustomAdvPositions = [SCCustomAdvPosition.POSITION_FEED_SIDEBAR, SCCustomAdvPosition.POSITION_FEED], requireAuthentication = false, cacheStrategy = CacheStrategies.NETWORK_ONLY, prefetchedData, scrollableTargetId, VirtualizedScrollerProps = {}, disablePaginationLinks = false, hidePaginationLinks = true, paginationLinksPageQueryParam = DEFAULT_PAGINATION_QUERY_PARAM_NAME, PaginationLinkProps = {}, hideAdvs = false, emptyFeedPlaceholder } = props;
|
|
79
87
|
// CONTEXT
|
|
80
88
|
const scPreferences = useContext(SCPreferencesContext);
|
|
81
89
|
const scUserContext = useContext(SCUserContext);
|
|
@@ -223,7 +223,7 @@ class InfiniteScroll extends Component {
|
|
|
223
223
|
// because heighted infiniteScroll visualy breaks
|
|
224
224
|
// on drag down as overflow becomes visible
|
|
225
225
|
const outerDivStyle = this.props.pullDownToRefresh && this.props.height ? { overflow: 'auto' } : {};
|
|
226
|
-
return (_jsx("div", Object.assign({ style: outerDivStyle, className: "infinite-scroll-component__outerdiv" }, { children: _jsxs("div", Object.assign({ className: `infinite-scroll-component ${this.props.className || ''}`, ref: (infScroll) => (this._infScroll = infScroll), style: style }, { children: [this.props.header, this.props.pullDownToRefresh && (_jsx("div", Object.assign({ style: { position: 'relative' }, ref: (pullDown) => (this._pullDown = pullDown) }, { children: _jsx("div", Object.assign({ style: {
|
|
226
|
+
return (_jsx("div", Object.assign({ style: outerDivStyle, className: "infinite-scroll-component__outerdiv" }, { children: _jsxs("div", Object.assign({ className: `infinite-scroll-component ${this.props.className || ''}`, ref: (infScroll) => (this._infScroll = infScroll), style: style }, { children: [this.props.header, this.props.pullDownToRefresh && (_jsx("div", Object.assign({ style: { position: 'relative', marginBottom: 16 }, ref: (pullDown) => (this._pullDown = pullDown) }, { children: _jsx("div", Object.assign({ style: {
|
|
227
227
|
position: 'absolute',
|
|
228
228
|
left: 0,
|
|
229
229
|
right: 0,
|
|
@@ -2,8 +2,8 @@ export const getRelativeTime = (date) => {
|
|
|
2
2
|
const diffInMilliseconds = new Date().getTime() - new Date(date).getTime();
|
|
3
3
|
const seconds = Math.floor(diffInMilliseconds / 1000);
|
|
4
4
|
const minutes = Math.floor(seconds / 60);
|
|
5
|
-
const hours = Math.
|
|
6
|
-
const days = Math.
|
|
5
|
+
const hours = Math.floor(minutes / 60);
|
|
6
|
+
const days = Math.round(hours / 24);
|
|
7
7
|
const weeks = Math.floor(days / 7);
|
|
8
8
|
const months = Math.floor(days / 30);
|
|
9
9
|
const years = Math.floor(months / 12);
|