mirror of https://github.com/jitsi/jitsi-meet
This change serves 2 purposes: - (Hopefully) make the recent list entry options easier to discover - Remove the (now unmaintained) swipeout dependencypull/7865/head
Saúl Ibarra Corretgé
5 years ago
committed by
Saúl Ibarra Corretgé
parent
39af6f5943
commit
63fe1de789
|
After Width: | Height: | Size: 577 B |
@ -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)); |
||||
@ -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_; |
||||
@ -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)); |
||||
Loading…
Reference in new issue