rn,recent-list: replace swipe options with long-press sheet

This change serves 2 purposes:

- (Hopefully) make the recent list entry options easier to discover
- Remove the (now unmaintained) swipeout dependency

lang/main.json

@@ -366,7 +366,7 @@
         "password": "$t(lockRoomPasswordUppercase):",
         "title": "Share",
         "tooltip": "Share link and dial-in info for this meeting",
-        "label": "Meeting info"
+        "label": "Dial-in info"
     },
     "inviteDialog": {
         "alertText": "Failed to invite some participants.",
@@ -876,12 +876,12 @@
         "getHelp": "Get help",
         "go": "GO",
         "goSmall": "GO",
-        "info": "Info",
+        "info": "Dial-in info",
         "join": "CREATE / JOIN",
         "moderatedMessage": "Or <a href=\"{{url}}\" rel=\"noopener noreferrer\" target=\"_blank\">book a meeting URL</a> in advance where you are the only moderator.",
         "privacy": "Privacy",
         "recentList": "Recent",
-        "recentListDelete": "Delete",
+        "recentListDelete": "Delete entry",
         "recentListEmpty": "Your recent list is currently empty. Chat with your team and you will find all your recent meetings here.",
         "reducedUIText": "Welcome to {{app}}!",
         "roomNameAllowedChars": "Meeting name should not contain any of these characters: ?, &, :, ', \", %, #.",

package.json

@@ -81,7 +81,6 @@
     "react-native-sound": "github:jitsi/react-native-sound#3fe5480fce935e888d5089d94a191c7c7e3aa190",
     "react-native-svg": "9.7.1",
     "react-native-svg-transformer": "0.13.0",
-    "react-native-swipeout": "2.3.6",
     "react-native-watch-connectivity": "0.4.3",
     "react-native-webrtc": "1.84.0",
     "react-native-webview": "10.9.0",

react/features/base/icons/svg/index.js

@@ -91,6 +91,7 @@ export { default as IconShareVideo } from './shared-video.svg';
 export { default as IconSwitchCamera } from './switch-camera.svg';
 export { default as IconTileView } from './tiles-many.svg';
 export { default as IconToggleRecording } from './camera-take-picture.svg';
+export { default as IconTrash } from './trash.svg';
 export { default as IconVideoQualityAudioOnly } from './AUD.svg';
 export { default as IconVideoQualityHD } from './HD.svg';
 export { default as IconVideoQualityLD } from './LD.svg';

react/features/base/icons/svg/trash.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trash-alt" class="svg-inline--fa fa-trash-alt fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"></path></svg>

react/features/base/react/components/NavigateSectionList.js

@@ -20,6 +20,11 @@ type Props = {
      */
     disabled: boolean,
 
+    /**
+     * Function to be invoked when an item is long pressed. The item is passed.
+     */
+    onLongPress: Function,
+
     /**
      * Function to be invoked when an item is pressed. The item's URL is passed.
      */
@@ -44,13 +49,7 @@ type Props = {
     /**
      * An array of sections
      */
-    sections: Array<Section>,
-
-    /**
-     * Optional array of on-slide actions this list should support. For details
-     * see https://github.com/dancormier/react-native-swipeout.
-     */
-    slideActions?: Array<Object>
+    sections: Array<Section>
 };
 
 /**
@@ -83,11 +82,11 @@ class NavigateSectionList extends Component<Props> {
     constructor(props: Props) {
         super(props);
         this._getItemKey = this._getItemKey.bind(this);
+        this._onLongPress = this._onLongPress.bind(this);
         this._onPress = this._onPress.bind(this);
         this._onRefresh = this._onRefresh.bind(this);
         this._renderItem = this._renderItem.bind(this);
-        this._renderListEmptyComponent
-            = this._renderListEmptyComponent.bind(this);
+        this._renderListEmptyComponent = this._renderListEmptyComponent.bind(this);
         this._renderSectionHeader = this._renderSectionHeader.bind(this);
     }
 
@@ -131,6 +130,25 @@ class NavigateSectionList extends Component<Props> {
         return `${index}-${item.key}`;
     }
 
+    _onLongPress: string => Function;
+
+    /**
+     * Returns a function that is used in the onLongPress callback of the items.
+     *
+     * @param {Object} item - The item that was long-pressed.
+     * @private
+     * @returns {Function}
+     */
+    _onLongPress(item) {
+        const { disabled, onLongPress } = this.props;
+
+        if (!disabled && typeof onLongPress === 'function') {
+            return () => onLongPress(item);
+        }
+
+        return null;
+    }
+
     _onPress: string => Function;
 
     /**
@@ -210,10 +228,10 @@ class NavigateSectionList extends Component<Props> {
             <NavigateSectionListItem
                 item = { item }
                 key = { key }
+                onLongPress = { url ? this._onLongPress(item) : undefined }
                 onPress = { url ? this._onPress(url) : undefined }
                 secondaryAction = {
-                    url ? undefined : this._onSecondaryAction(id) }
-                slideActions = { this.props.slideActions } />
+                    url ? undefined : this._onSecondaryAction(id) } />
         );
     }
 

react/features/base/react/components/native/AvatarListItem.js

@@ -52,6 +52,11 @@ type Props = {
      */
     linesStyle?: StyleType,
 
+    /**
+     * Function to invoke on long press.
+     */
+    onLongPress: ?Function,
+
     /**
      * Function to invoke on press.
      */
@@ -88,13 +93,16 @@ export default class AvatarListItem extends Component<Props> {
             avatarOnly,
             avatarSize = AVATAR_SIZE,
             avatarStatus,
-            avatarStyle
+            avatarStyle,
+            onLongPress,
+            onPress
         } = this.props;
         const { avatar, colorBase, lines, title } = this.props.item;
 
         return (
             <Container
-                onClick = { this.props.onPress }
+                onClick = { onPress }
+                onLongPress = { onLongPress }
                 style = { styles.listItem }
                 underlayColor = { UNDERLAY_COLOR }>
                 <Avatar

react/features/base/react/components/native/NavigateSectionListItem.js

@@ -1,9 +1,7 @@
 // @flow
 
 import React, { Component } from 'react';
-import Swipeout from 'react-native-swipeout';
 
-import { ColorPalette } from '../../../styles';
 import type { Item } from '../../Types';
 
 import AvatarListItem from './AvatarListItem';
@@ -19,20 +17,19 @@ type Props = {
     item: Item,
 
     /**
-     * Function to be invoked when an Item is pressed. The Item's URL is passed.
+     * Function to be invoked when an item is long pressed. The item is passed.
      */
-    onPress: ?Function,
+    onLongPress: ?Function,
 
     /**
-     * Function to be invoked when secondary action was performed on an Item.
+     * Function to be invoked when an Item is pressed. The Item's URL is passed.
      */
-    secondaryAction: ?Function,
+    onPress: ?Function,
 
     /**
-     * Optional array of on-slide actions this list should support. For details
-     * see https://github.com/dancormier/react-native-swipeout.
+     * Function to be invoked when secondary action was performed on an Item.
      */
-    slideActions?: Array<Object>
+    secondaryAction: ?Function
 }
 
 /**
@@ -116,37 +113,15 @@ export default class NavigateSectionListItem extends Component<Props> {
      * @returns {ReactElement}
      */
     render() {
-        const { item, slideActions } = this.props;
-        const { id } = item;
-        let right;
-
-        // NOTE: The {@code Swipeout} component has an onPress prop encapsulated
-        // in the {@code right} array, but we need to bind it to the ID of the
-        // item too.
-
-        if (slideActions) {
-            right = [];
-            for (const slideAction of slideActions) {
-                right.push({
-                    backgroundColor: slideAction.backgroundColor,
-                    onPress: slideAction.onPress.bind(undefined, id),
-                    text: slideAction.text
-                });
-            }
-        }
+        const { item, onLongPress, onPress, secondaryAction } = this.props;
 
         return (
-            <Swipeout
-                autoClose = { true }
-                backgroundColor = { ColorPalette.transparent }
-                right = { right }>
-                <AvatarListItem
-                    item = { item }
-                    onPress = { this.props.onPress } >
-                    { this.props.secondaryAction
-                            && this._renderSecondaryAction() }
-                </AvatarListItem>
-            </Swipeout>
+            <AvatarListItem
+                item = { item }
+                onLongPress = { onLongPress }
+                onPress = { onPress } >
+                { secondaryAction && this._renderSecondaryAction() }
+            </AvatarListItem>
         );
     }
 }

react/features/calendar-sync/components/CalendarListContent.native.js

@@ -106,7 +106,7 @@ class CalendarListContent extends Component<Props> {
         );
     }
 
-    _onPress: (string, ?string) => Function;
+    _onPress: (string, ?string) => void;
 
     /**
      * Handles the list's navigate action.
@@ -259,9 +259,7 @@ class CalendarListContent extends Component<Props> {
  * Maps redux state to component props.
  *
  * @param {Object} state - The redux state.
- * @returns {{
- *     _eventList: Array<Object>
- * }}
+ * @returns {Props}
  */
 function _mapStateToProps(state: Object) {
     return {

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

@@ -0,0 +1,48 @@
+// @flow
+
+import { translate } from '../../base/i18n';
+import { IconTrash } from '../../base/icons';
+import { connect } from '../../base/redux';
+import { AbstractButton, type AbstractButtonProps } from '../../base/toolbox/components';
+import { deleteRecentListEntry } from '../actions';
+
+export type Props = AbstractButtonProps & {
+
+    /**
+     * The redux {@code dispatch} function.
+     */
+    dispatch: Function,
+
+    /**
+     * The ID of the entry to be deleted.
+     */
+    itemId: Object,
+
+    /**
+     * The function to be used to translate i18n labels.
+     */
+    t: Function
+};
+
+/**
+ * A recent list menu button which deletes the selected entry.
+ */
+class DeleteItemButton extends AbstractButton<Props, *> {
+    accessibilityLabel = 'welcomepage.recentListDelete';
+    icon = IconTrash;
+    label = 'welcomepage.recentListDelete';
+
+    /**
+     * Handles clicking / pressing the button.
+     *
+     * @private
+     * @returns {void}
+     */
+    _handleClick() {
+        const { dispatch, itemId } = this.props;
+
+        dispatch(deleteRecentListEntry(itemId));
+    }
+}
+
+export default translate(connect()(DeleteItemButton));

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

@@ -4,16 +4,14 @@ import React from 'react';
 import type { Dispatch } from 'redux';
 
 import { getDefaultURL } from '../../app/functions';
+import { openDialog } from '../../base/dialog/actions';
 import { translate } from '../../base/i18n';
-import { setActiveModalId } from '../../base/modal';
 import { NavigateSectionList, type Section } from '../../base/react';
 import { connect } from '../../base/redux';
-import { ColorPalette } from '../../base/styles';
-import { DIAL_IN_SUMMARY_VIEW_ID } from '../../invite/constants';
-import { deleteRecentListEntry } from '../actions';
 import { isRecentListEnabled, toDisplayableList } from '../functions';
 
 import AbstractRecentList from './AbstractRecentList';
+import RecentListItemMenu from './RecentListItemMenu.native';
 
 /**
  * The type of the React {@code Component} props of {@link RecentList}
@@ -62,8 +60,8 @@ class RecentList extends AbstractRecentList<Props> {
     constructor(props: Props) {
         super(props);
 
-        this._onDelete = this._onDelete.bind(this);
-        this._onShowDialInInfo = this._onShowDialInInfo.bind(this);
+        // Bind event handlers so they are only bound once per instance.
+        this._onLongPress = this._onLongPress.bind(this);
     }
 
     /**
@@ -82,50 +80,29 @@ class RecentList extends AbstractRecentList<Props> {
             _recentList
         } = this.props;
         const recentList = toDisplayableList(_recentList, t, _defaultServerURL);
-        const slideActions = [ {
-            backgroundColor: ColorPalette.blue,
-            onPress: this._onShowDialInInfo,
-            text: t('welcomepage.info')
-        }, {
-            backgroundColor: 'red',
-            onPress: this._onDelete,
-            text: t('welcomepage.recentListDelete')
-        } ];
 
         return (
             <NavigateSectionList
                 disabled = { disabled }
+                onLongPress = { this._onLongPress }
                 onPress = { this._onPress }
                 renderListEmptyComponent
                     = { this._getRenderListEmptyComponent() }
-                sections = { recentList }
-                slideActions = { slideActions } />
+                sections = { recentList } />
         );
     }
 
-    _onDelete: Object => void
+    _onLongPress: (Object) => void;
 
     /**
-     * Callback for the delete action of the list.
+     * Handles the list's navigate action.
      *
-     * @param {Object} itemId - The ID of the entry thats deletion is
-     * requested.
+     * @private
+     * @param {Object} item - The item which was long pressed.
      * @returns {void}
      */
-    _onDelete(itemId) {
-        this.props.dispatch(deleteRecentListEntry(itemId));
-    }
-
-    _onShowDialInInfo: Object => void
-
-    /**
-     * Callback for the dial-in info action of the list.
-     *
-     * @param {Object} itemId - The ID of the entry for which we'd like to show the dial in numbers.
-     * @returns {void}
-     */
-    _onShowDialInInfo(itemId) {
-        this.props.dispatch(setActiveModalId(DIAL_IN_SUMMARY_VIEW_ID, { summaryUrl: itemId.url }));
+    _onLongPress(item) {
+        this.props.dispatch(openDialog(RecentListItemMenu, { item }));
     }
 }
 
@@ -133,10 +110,7 @@ class RecentList extends AbstractRecentList<Props> {
  * Maps redux state to component props.
  *
  * @param {Object} state - The redux state.
- * @returns {{
- *     _defaultServerURL: string,
- *     _recentList: Array
- * }}
+ * @returns {Props}
  */
 export function _mapStateToProps(state: Object) {
     return {

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

@@ -0,0 +1,143 @@
+// @flow
+
+import React, { PureComponent } from 'react';
+import { Text, View } from 'react-native';
+
+import { ColorSchemeRegistry } from '../../base/color-scheme';
+import { BottomSheet, hideDialog, isDialogOpen } from '../../base/dialog';
+import { type Item } from '../../base/react/Types';
+import { connect } from '../../base/redux';
+import { StyleType } from '../../base/styles';
+
+import DeleteItemButton from './DeleteItemButton.native';
+import ShowDialInInfoButton from './ShowDialInInfoButton.native';
+import styles from './styles';
+
+type Props = {
+
+    /**
+     * The Redux dispatch function.
+     */
+    dispatch: Function,
+
+    /**
+     * Item being rendered in this menu.
+     */
+    item: Item,
+
+    /**
+     * The color-schemed stylesheet of the BottomSheet.
+     */
+    _bottomSheetStyles: StyleType,
+
+    /**
+     * True if the menu is currently open, false otherwise.
+     */
+    _isOpen: boolean
+}
+
+// eslint-disable-next-line prefer-const
+let RecentListItemMenu_;
+
+/**
+ * Class to implement a popup menu that opens upon long pressing a recent list item.
+ */
+class RecentListItemMenu extends PureComponent<Props> {
+    /**
+     * Constructor of the component.
+     *
+     * @inheritdoc
+     */
+    constructor(props: Props) {
+        super(props);
+
+        this._onCancel = this._onCancel.bind(this);
+        this._renderMenuHeader = this._renderMenuHeader.bind(this);
+    }
+
+    /**
+     * Implements {@code Component#render}.
+     *
+     * @inheritdoc
+     */
+    render() {
+        const { _bottomSheetStyles, item } = this.props;
+        const buttonProps = {
+            afterClick: this._onCancel,
+            itemId: item.id,
+            showLabel: true,
+            styles: _bottomSheetStyles.buttons
+        };
+
+        return (
+            <BottomSheet
+                onCancel = { this._onCancel }
+                renderHeader = { this._renderMenuHeader }>
+                <DeleteItemButton { ...buttonProps } />
+                <ShowDialInInfoButton { ...buttonProps } />
+            </BottomSheet>
+        );
+    }
+
+    _onCancel: () => boolean;
+
+    /**
+     * Callback to hide this menu.
+     *
+     * @private
+     * @returns {boolean}
+     */
+    _onCancel() {
+        if (this.props._isOpen) {
+            this.props.dispatch(hideDialog(RecentListItemMenu_));
+
+            return true;
+        }
+
+        return false;
+    }
+
+    _renderMenuHeader: () => React$Element<any>;
+
+    /**
+     * Function to render the menu's header.
+     *
+     * @returns {React$Element}
+     */
+    _renderMenuHeader() {
+        const { _bottomSheetStyles, item } = this.props;
+
+        return (
+            <View
+                style = { [
+                    _bottomSheetStyles.sheet,
+                    styles.entryNameContainer
+                ] }>
+                <Text
+                    ellipsizeMode = { 'middle' }
+                    numberOfLines = { 1 }
+                    style = { styles.entryNameLabel }>
+                    { item.title }
+                </Text>
+            </View>
+        );
+    }
+}
+
+/**
+ * Function that maps parts of Redux state tree into component props.
+ *
+ * @param {Object} state - Redux state.
+ * @private
+ * @returns {Props}
+ */
+function _mapStateToProps(state) {
+    return {
+        _bottomSheetStyles: ColorSchemeRegistry.get(state, 'BottomSheet'),
+        _isOpen: isDialogOpen(state, RecentListItemMenu_)
+    };
+}
+
+RecentListItemMenu_ = connect(_mapStateToProps)(RecentListItemMenu);
+
+export default RecentListItemMenu_;

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

@@ -0,0 +1,49 @@
+// @flow
+
+import { translate } from '../../base/i18n';
+import { IconInfo } from '../../base/icons';
+import { setActiveModalId } from '../../base/modal';
+import { connect } from '../../base/redux';
+import { AbstractButton, type AbstractButtonProps } from '../../base/toolbox/components';
+import { DIAL_IN_SUMMARY_VIEW_ID } from '../../invite/constants';
+
+export type Props = AbstractButtonProps & {
+
+    /**
+     * The redux {@code dispatch} function.
+     */
+    dispatch: Function,
+
+    /**
+     * The ID of the entry to be deleted.
+     */
+    itemId: Object,
+
+    /**
+     * The function to be used to translate i18n labels.
+     */
+    t: Function
+};
+
+/**
+ * A recent list menu button which opens the dial-in info dialog.
+ */
+class ShowDialInInfoButton extends AbstractButton<Props, *> {
+    accessibilityLabel = 'welcomepage.info';
+    icon = IconInfo;
+    label = 'welcomepage.info';
+
+    /**
+     * Handles clicking / pressing the button.
+     *
+     * @private
+     * @returns {void}
+     */
+    _handleClick() {
+        const { dispatch, itemId } = this.props;
+
+        dispatch(setActiveModalId(DIAL_IN_SUMMARY_VIEW_ID, { summaryUrl: itemId.url }));
+    }
+}
+
+export default translate(connect()(ShowDialInInfoButton));

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

@@ -1,4 +1,4 @@
-import { createStyleSheet } from '../../base/styles';
+import { ColorPalette, createStyleSheet } from '../../base/styles';
 
 /**
  * The styles of the React {@code Component}s of the feature recent-list i.e.
@@ -22,5 +22,23 @@ export default createStyleSheet({
         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
     }
 });