init

react/features/recent-list/components/AbstractRecentList.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+
+import { createRecentClickedEvent, createRecentSelectedEvent } from '../../analytics/AnalyticsEvents';
+import { sendAnalytics } from '../../analytics/functions';
+import { appNavigate } from '../../app/actions';
+import { IStore } from '../../app/types';
+import AbstractPage from '../../base/react/components/AbstractPage';
+import { Container, Text } from '../../base/react/components/index';
+
+import styles from './styles';
+
+/**
+ * The type of the React {@code Component} props of {@link AbstractRecentList}.
+ */
+interface IProps {
+
+    /**
+     * The redux store's {@code dispatch} function.
+     */
+    dispatch: IStore['dispatch'];
+
+    /**
+     * The translate function.
+     */
+    t: Function;
+}
+
+/**
+ * An abstract component for the recent list.
+ *
+ */
+export default class AbstractRecentList<P extends IProps> extends AbstractPage<P> {
+    /**
+     * Initializes a new {@code RecentList} instance.
+     *
+     * @inheritdoc
+     */
+    constructor(props: P) {
+        super(props);
+
+        this._onPress = this._onPress.bind(this);
+    }
+
+    /**
+     * Implements React's {@link Component#componentDidMount()}. Invoked
+     * immediately after this component is mounted.
+     *
+     * @inheritdoc
+     * @returns {void}
+     */
+    override componentDidMount() {
+        sendAnalytics(createRecentSelectedEvent());
+    }
+
+    /**
+     * Returns a list empty component if a custom one has to be rendered instead
+     * of the default one in the {@link NavigateSectionList}.
+     *
+     * @private
+     * @returns {React$Component}
+     */
+    _getRenderListEmptyComponent() {
+        const { t } = this.props;
+        const descriptionId = 'meetings-list-empty-description';
+
+        return (
+            <Container
+                aria-describedby = { descriptionId }
+                aria-label = { t('welcomepage.recentList') }
+                className = 'meetings-list-empty'
+                role = 'region'
+                style = { styles.emptyListContainer as any }>
+                <Text // @ts-ignore
+                    className = 'description'
+                    id = { descriptionId }
+                    style = { styles.emptyListText as any }>
+                    { t('welcomepage.recentListEmpty') }
+                </Text>
+            </Container>
+        );
+    }
+
+    /**
+     * Handles the list's navigate action.
+     *
+     * @private
+     * @param {string} url - The url string to navigate to.
+     * @returns {void}
+     */
+    _onPress(url: string) {
+        const { dispatch } = this.props;
+
+        sendAnalytics(createRecentClickedEvent('meeting.tile'));
+
+        dispatch(appNavigate(url));
+    }
+}

react/features/recent-list/components/DeleteItemButton.native.ts

@@ -0,0 +1,37 @@
+import { connect } from 'react-redux';
+
+import { translate } from '../../base/i18n/functions';
+import { IconTrash } from '../../base/icons/svg';
+import AbstractButton, { IProps as AbstractButtonProps } from '../../base/toolbox/components/AbstractButton';
+import { deleteRecentListEntry } from '../actions';
+
+export interface IProps extends AbstractButtonProps {
+
+    /**
+     * The ID of the entry to be deleted.
+     */
+    itemId: Object;
+}
+
+/**
+ * A recent list menu button which deletes the selected entry.
+ */
+class DeleteItemButton extends AbstractButton<IProps> {
+    override accessibilityLabel = 'welcomepage.recentListDelete';
+    override icon = IconTrash;
+    override label = 'welcomepage.recentListDelete';
+
+    /**
+     * Handles clicking / pressing the button.
+     *
+     * @private
+     * @returns {void}
+     */
+    override _handleClick() {
+        const { dispatch, itemId } = this.props;
+
+        dispatch(deleteRecentListEntry(itemId));
+    }
+}
+
+export default translate(connect()(DeleteItemButton));

react/features/recent-list/components/RecentList.native.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import { WithTranslation } from 'react-i18next';
+import { GestureResponderEvent, TouchableWithoutFeedback, View, ViewStyle } from 'react-native';
+import { connect } from 'react-redux';
+
+import { getDefaultURL } from '../../app/functions.native';
+import { IReduxState, IStore } from '../../app/types';
+import { openSheet } from '../../base/dialog/actions';
+import { translate } from '../../base/i18n/functions';
+import NavigateSectionList from '../../base/react/components/native/NavigateSectionList';
+import { Item, Section } from '../../base/react/types';
+import styles from '../../welcome/components/styles';
+import { isRecentListEnabled, toDisplayableList } from '../functions.native';
+
+import AbstractRecentList from './AbstractRecentList';
+import RecentListItemMenu from './RecentListItemMenu.native';
+
+/**
+ * The type of the React {@code Component} props of {@link RecentList}.
+ */
+interface IProps extends WithTranslation {
+
+    /**
+     * The default server URL.
+     */
+    _defaultServerURL: string;
+
+    /**
+     * The recent list from the Redux store.
+     */
+    _recentList: Array<Section>;
+
+    /**
+     * Renders the list disabled.
+     */
+    disabled: boolean;
+
+    /**
+     * The redux store's {@code dispatch} function.
+     */
+    dispatch: IStore['dispatch'];
+
+    /**
+     * Callback to be invoked when pressing the list container.
+     */
+    onListContainerPress?: (e?: GestureResponderEvent) => void;
+}
+
+/**
+ * A class that renders the list of the recently joined rooms.
+ *
+ */
+class RecentList extends AbstractRecentList<IProps> {
+    /**
+     * Initializes a new {@code RecentList} instance.
+     *
+     * @inheritdoc
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        // Bind event handlers so they are only bound once per instance.
+        this._onLongPress = this._onLongPress.bind(this);
+    }
+
+    /**
+     * Implements the React Components's render method.
+     *
+     * @inheritdoc
+     */
+    override render() {
+        if (!isRecentListEnabled()) {
+            return null;
+        }
+        const {
+            disabled,
+            onListContainerPress,
+            t,
+            _defaultServerURL,
+            _recentList
+        } = this.props; // @ts-ignore
+        const recentList = toDisplayableList(_recentList, t, _defaultServerURL);
+
+        return (
+            <TouchableWithoutFeedback
+                onPress = { onListContainerPress }>
+                <View style = { (disabled ? styles.recentListDisabled : styles.recentList) as ViewStyle }>
+                    <NavigateSectionList
+                        disabled = { disabled }
+                        onLongPress = { this._onLongPress }
+                        onPress = { this._onPress }
+                        renderListEmptyComponent
+                            = { this._getRenderListEmptyComponent() }
+
+                        // @ts-ignore
+                        sections = { recentList } />
+                </View>
+            </TouchableWithoutFeedback>
+        );
+    }
+
+    /**
+     * Handles the list's navigate action.
+     *
+     * @private
+     * @param {Object} item - The item which was long pressed.
+     * @returns {void}
+     */
+    _onLongPress(item: Item) {
+        this.props.dispatch(openSheet(RecentListItemMenu, { item }));
+    }
+}
+
+/**
+ * Maps redux state to component props.
+ *
+ * @param {Object} state - The redux state.
+ * @returns {IProps}
+ */
+export function _mapStateToProps(state: IReduxState) {
+    return {
+        _defaultServerURL: getDefaultURL(state),
+        _recentList: state['features/recent-list']
+    };
+}
+
+// @ts-ignore
+export default translate(connect(_mapStateToProps)(RecentList));

react/features/recent-list/components/RecentList.web.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { WithTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
+
+import { IReduxState, IStore } from '../../app/types';
+import { translate } from '../../base/i18n/functions';
+import MeetingsList from '../../base/react/components/web/MeetingsList';
+import { deleteRecentListEntry } from '../actions';
+import { isRecentListEnabled, toDisplayableList } from '../functions.web';
+
+import AbstractRecentList from './AbstractRecentList';
+
+/**
+ * The type of the React {@code Component} props of {@link RecentList}.
+ */
+interface IProps extends WithTranslation {
+
+    /**
+     * The recent list from the Redux store.
+     */
+    _recentList: Array<any>;
+
+    /**
+     * Renders the list disabled.
+     */
+    disabled?: boolean;
+
+    /**
+     * The redux store's {@code dispatch} function.
+     */
+    dispatch: IStore['dispatch'];
+}
+
+/**
+ * The cross platform container rendering the list of the recently joined rooms.
+ *
+ */
+class RecentList extends AbstractRecentList<IProps> {
+    /**
+     * Initializes a new {@code RecentList} instance.
+     *
+     * @inheritdoc
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        this._getRenderListEmptyComponent
+            = this._getRenderListEmptyComponent.bind(this);
+        this._onPress = this._onPress.bind(this);
+        this._onItemDelete = this._onItemDelete.bind(this);
+    }
+
+    /**
+     * Deletes a recent entry.
+     *
+     * @param {Object} entry - The entry to be deleted.
+     * @inheritdoc
+     */
+    _onItemDelete(entry: Object) {
+        this.props.dispatch(deleteRecentListEntry(entry));
+    }
+
+    /**
+     * Implements the React Components's render method.
+     *
+     * @inheritdoc
+     */
+    override render() {
+        if (!isRecentListEnabled()) {
+            return null;
+        }
+        const {
+            disabled,
+            _recentList
+        } = this.props;
+        const recentList = toDisplayableList(_recentList);
+
+        return (
+            <MeetingsList
+                disabled = { Boolean(disabled) }
+                hideURL = { true }
+                listEmptyComponent = { this._getRenderListEmptyComponent() }
+                meetings = { recentList }
+                onItemDelete = { this._onItemDelete }
+                onPress = { this._onPress } />
+        );
+    }
+}
+
+/**
+ * Maps redux state to component props.
+ *
+ * @param {Object} state - The redux state.
+ * @returns {{
+ *     _defaultServerURL: string,
+ *     _recentList: Array
+ * }}
+ */
+export function _mapStateToProps(state: IReduxState) {
+    return {
+        _recentList: state['features/recent-list']
+    };
+}
+
+export default translate(connect(_mapStateToProps)(RecentList));

react/features/recent-list/components/RecentListItemMenu.native.tsx

@@ -0,0 +1,102 @@
+import React, { PureComponent } from 'react';
+import { Text, TextStyle, View, ViewStyle } from 'react-native';
+import { connect } from 'react-redux';
+
+import { IStore } from '../../app/types';
+import { hideSheet } from '../../base/dialog/actions';
+import BottomSheet from '../../base/dialog/components/native/BottomSheet';
+import { bottomSheetStyles } from '../../base/dialog/components/native/styles';
+import { Item } from '../../base/react/types';
+
+import DeleteItemButton from './DeleteItemButton.native';
+import ShowDialInInfoButton from './ShowDialInInfoButton.native';
+import styles from './styles.native';
+
+interface IProps {
+
+    /**
+     * The Redux dispatch function.
+     */
+    dispatch: IStore['dispatch'];
+
+    /**
+     * Item being rendered in this menu.
+     */
+    item: Item;
+}
+
+/**
+ * Class to implement a popup menu that opens upon long pressing a recent list item.
+ */
+class RecentListItemMenu extends PureComponent<IProps> {
+    /**
+     * Constructor of the component.
+     *
+     * @inheritdoc
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        this._onCancel = this._onCancel.bind(this);
+        this._renderMenuHeader = this._renderMenuHeader.bind(this);
+    }
+
+    /**
+     * Implements {@code Component#render}.
+     *
+     * @inheritdoc
+     */
+    override render() {
+        const { item } = this.props;
+        const buttonProps = {
+            afterClick: this._onCancel,
+            itemId: item.id,
+            showLabel: true,
+            styles: bottomSheetStyles.buttons
+        };
+
+        return (
+            <BottomSheet
+                renderHeader = { this._renderMenuHeader }>
+                <DeleteItemButton { ...buttonProps } />
+                <ShowDialInInfoButton { ...buttonProps } />
+            </BottomSheet>
+        );
+    }
+
+    /**
+     * Callback to hide this menu.
+     *
+     * @private
+     * @returns {boolean}
+     */
+    _onCancel() {
+        this.props.dispatch(hideSheet());
+    }
+
+    /**
+     * Function to render the menu's header.
+     *
+     * @returns {React$Element}
+     */
+    _renderMenuHeader() {
+        const { item } = this.props;
+
+        return (
+            <View
+                style = { [
+                    bottomSheetStyles.sheet,
+                    styles.entryNameContainer as ViewStyle
+                ] }>
+                <Text
+                    ellipsizeMode = { 'middle' }
+                    numberOfLines = { 1 }
+                    style = { styles.entryNameLabel as TextStyle }>
+                    { item.title }
+                </Text>
+            </View>
+        );
+    }
+}
+
+export default connect()(RecentListItemMenu);

react/features/recent-list/components/ShowDialInInfoButton.native.tsx

@@ -0,0 +1,40 @@
+import { connect } from 'react-redux';
+
+import { translate } from '../../base/i18n/functions';
+import { IconInfoCircle } from '../../base/icons/svg';
+import AbstractButton, { IProps as AbstractButtonProps } from '../../base/toolbox/components/AbstractButton';
+import { navigateRoot } from '../../mobile/navigation/rootNavigationContainerRef';
+import { screen } from '../../mobile/navigation/routes';
+
+export interface IProps extends AbstractButtonProps {
+
+    /**
+     * The ID of the entry to be deleted.
+     */
+    itemId: any;
+}
+
+/**
+ * A recent list menu button which opens the dial-in info dialog.
+ */
+class ShowDialInInfoButton extends AbstractButton<IProps> {
+    override accessibilityLabel = 'welcomepage.info';
+    override icon = IconInfoCircle;
+    override label = 'welcomepage.info';
+
+    /**
+     * Handles clicking / pressing the button.
+     *
+     * @private
+     * @returns {void}
+     */
+    override _handleClick() {
+        const { itemId } = this.props;
+
+        navigateRoot(screen.dialInSummary, {
+            summaryUrl: itemId.url
+        });
+    }
+}
+
+export default translate(connect()(ShowDialInInfoButton));

react/features/recent-list/components/styles.native.ts

@@ -0,0 +1,45 @@
+import { ColorPalette } from '../../base/styles/components/styles/ColorPalette';
+import { createStyleSheet } from '../../base/styles/functions.native';
+
+/**
+ * The styles of the React {@code Component}s of the feature recent-list i.e.
+ * {@code CalendarList}.
+ */
+export default createStyleSheet({
+
+    /**
+     * Text style of the empty recent list message.
+     */
+    emptyListText: {
+        backgroundColor: 'transparent',
+        color: 'rgba(255, 255, 255, 0.6)',
+        textAlign: 'center'
+    },
+
+    /**
+     * The style of the empty recent list container.
+     */
+    emptyListContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 20
+    },
+
+    entryNameContainer: {
+        alignItems: 'center',
+        borderBottomColor: ColorPalette.lightGrey,
+        borderBottomWidth: 1,
+        borderTopLeftRadius: 16,
+        borderTopRightRadius: 16,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        height: 48
+    },
+
+    entryNameLabel: {
+        color: ColorPalette.lightGrey,
+        flexShrink: 1,
+        fontSize: 16,
+        opacity: 0.90
+    }
+});

react/features/recent-list/components/styles.web.ts

@@ -0,0 +1,4 @@
+export default {
+    emptyListContainer: {},
+    emptyListText: {}
+};