From 1e69dc93d6823dc7d86a3c9cdcd20a38e5c6dead Mon Sep 17 00:00:00 2001 From: Leonard Kim Date: Fri, 13 Apr 2018 13:32:30 -0700 Subject: [PATCH] ref(toolbar): kill Stateless Toolbar and Invite, Feedback, Profile buttons --- .../feedback/components/FeedbackButton.web.js | 113 -------------- react/features/feedback/components/index.js | 1 - .../invite/components/InviteButton.native.js | 1 - .../components/ProfileButton.native.js | 0 .../toolbox/components/ProfileButton.web.js | 147 ------------------ .../components/StatelessToolbar.web.js | 65 -------- .../components/StatelessToolbarButton.js | 130 ---------------- 7 files changed, 457 deletions(-) delete mode 100644 react/features/feedback/components/FeedbackButton.web.js delete mode 100644 react/features/invite/components/InviteButton.native.js delete mode 100644 react/features/toolbox/components/ProfileButton.native.js delete mode 100644 react/features/toolbox/components/ProfileButton.web.js delete mode 100644 react/features/toolbox/components/StatelessToolbar.web.js delete mode 100644 react/features/toolbox/components/StatelessToolbarButton.js diff --git a/react/features/feedback/components/FeedbackButton.web.js b/react/features/feedback/components/FeedbackButton.web.js deleted file mode 100644 index 75cd67a39..000000000 --- a/react/features/feedback/components/FeedbackButton.web.js +++ /dev/null @@ -1,113 +0,0 @@ -// @flow - -import Tooltip from '@atlaskit/tooltip'; -import React, { Component } from 'react'; -import { connect } from 'react-redux'; - -import { translate } from '../../base/i18n'; - -import { openFeedbackDialog } from '../actions'; - -/** - * The type of the React {@code Component} props of {@link FeedbackButton}. - */ -type Props = { - - /** - * The JitsiConference for which the feedback will be about. - * - * FIXME define JitsiConference type - * @type {JitsiConference} - */ - _conference: Object, - - /** - * Redux store dispatch function. - */ - dispatch: Dispatch<*>, - - /** - * Invoked to obtain translated strings. - */ - t: Function, - - /** - * From which side of the button the tooltip should appear from. - */ - tooltipPosition: string -} - -/** - * Implements a Web/React Component which renders a feedback button. - */ -class FeedbackButton extends Component { - _onClick: Function; - - /** - * Initializes a new FeedbackButton instance. - * - * @param {Object} props - The read-only properties with which the new - * instance is to be initialized. - */ - constructor(props: Object) { - super(props); - - // Bind event handlers so they are only bound once for every instance. - this._onClick = this._onClick.bind(this); - } - - /** - * Implements React's {@link Component#render()}. - * - * @inheritdoc - * @returns {ReactElement} - */ - render() { - return ( - - ); - } - - /** - * Dispatches an action to open a dialog requesting call feedback. - * - * @private - * @returns {void} - */ - _onClick() { - const { _conference, dispatch } = this.props; - - dispatch(openFeedbackDialog(_conference)); - } -} - -/** - * Maps (parts of) the Redux state to the associated Conference's props. - * - * @param {Object} state - The Redux state. - * @private - * @returns {{ - * _toolboxVisible: boolean - * }} - */ -function _mapStateToProps(state) { - return { - /** - * The JitsiConference for which the feedback will be about. - * - * @private - * @type {JitsiConference} - */ - _conference: state['features/base/conference'].conference - }; -} - -export default translate(connect(_mapStateToProps)(FeedbackButton)); diff --git a/react/features/feedback/components/index.js b/react/features/feedback/components/index.js index bea3d61b6..b4cc07a73 100644 --- a/react/features/feedback/components/index.js +++ b/react/features/feedback/components/index.js @@ -1,2 +1 @@ -export { default as FeedbackButton } from './FeedbackButton'; export { default as FeedbackDialog } from './FeedbackDialog'; diff --git a/react/features/invite/components/InviteButton.native.js b/react/features/invite/components/InviteButton.native.js deleted file mode 100644 index 8b1378917..000000000 --- a/react/features/invite/components/InviteButton.native.js +++ /dev/null @@ -1 +0,0 @@ - diff --git a/react/features/toolbox/components/ProfileButton.native.js b/react/features/toolbox/components/ProfileButton.native.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/react/features/toolbox/components/ProfileButton.web.js b/react/features/toolbox/components/ProfileButton.web.js deleted file mode 100644 index 3f1d6be2c..000000000 --- a/react/features/toolbox/components/ProfileButton.web.js +++ /dev/null @@ -1,147 +0,0 @@ -/* @flow */ - -import PropTypes from 'prop-types'; -import React, { Component } from 'react'; -import { connect } from 'react-redux'; - -import { - createToolbarEvent, - sendAnalytics -} from '../../analytics'; -import { - getAvatarURL, - getLocalParticipant -} from '../../base/participants'; -import UIEvents from '../../../../service/UI/UIEvents'; - -import ToolbarButton from './ToolbarButton'; - -declare var APP: Object; - -/** - * The default configuration for the button. - * - * @type {Object} - */ -const DEFAULT_BUTTON_CONFIGURATION = { - buttonName: 'profile', - classNames: [ 'button' ], - enabled: true, - id: 'toolbar_button_profile', - tooltipKey: 'profile.setDisplayNameLabel' -}; - -/** - * React {@code Component} for the profile button. - * - * @extends Component - */ -class ProfileButton extends Component<*> { - _onClick: Function; - - /** - * {@code ProfileButton}'s property types. - * - * @static - */ - static propTypes = { - /** - * The redux representation of the local participant. - */ - _localParticipant: PropTypes.object, - - /** - * Whether the button support clicking or not. - */ - _unclickable: PropTypes.bool, - - /** - * Whether the side panel is opened or not. - */ - toggled: PropTypes.bool, - - /** - * From which side tooltips should display. Will be re-used for - * displaying the inline dialog for video quality adjustment. - */ - tooltipPosition: PropTypes.string - }; - - /** - * Initializes a new {@code ProfileButton} instance. - * - * @param {Object} props - The read-only properties with which the new - * instance is to be initialized. - */ - constructor(props) { - super(props); - - // Bind event handlers so they are only bound once for every instance. - this._onClick = this._onClick.bind(this); - } - - /** - * Implements React's {@link Component#render()}. - * - * @inheritdoc - * @returns {ReactElement} - */ - render() { - const { - _localParticipant, - _unclickable, - tooltipPosition, - toggled - } = this.props; - const buttonConfiguration = { - ...DEFAULT_BUTTON_CONFIGURATION, - unclickable: _unclickable, - toggled - }; - - return ( - - - - ); - } - - /** - * Click handler for the button. - * - * @returns {void} - */ - _onClick() { - if (!this.props._unclickable) { - // TODO: Include an 'enable' attribute, which specifies whether - // the profile panel was opened or closed. - sendAnalytics(createToolbarEvent('profile')); - APP.UI.emitEvent(UIEvents.TOGGLE_PROFILE); - } - } -} - -/** - * Maps (parts of) the Redux state to the associated {@code ProfileButton} - * component's props. - * - * @param {Object} state - The Redux state. - * @private - * @returns {{ - * _localParticipant: Object, - * _unclickable: boolean - * }} - */ -function _mapStateToProps(state) { - return { - _localParticipant: getLocalParticipant(state), - _unclickable: !state['features/base/jwt'].isGuest - }; -} - -export default connect(_mapStateToProps)(ProfileButton); diff --git a/react/features/toolbox/components/StatelessToolbar.web.js b/react/features/toolbox/components/StatelessToolbar.web.js deleted file mode 100644 index 74e28092b..000000000 --- a/react/features/toolbox/components/StatelessToolbar.web.js +++ /dev/null @@ -1,65 +0,0 @@ -/* @flow */ - -import PropTypes from 'prop-types'; -import React, { Component } from 'react'; - -/** - * Implements a toolbar in React/Web. It is a strip that contains a set of - * toolbar items such as buttons. - * - * @class StatelessToolbar - * @extends Component - */ -export default class StatelessToolbar extends Component<*> { - /** - * Base toolbar component's property types. - * - * @static - */ - static propTypes = { - /** - * Children of current React component. - */ - children: PropTypes.node, - - /** - * Toolbar's class name. - */ - className: PropTypes.string, - - /** - * Handler for mouse out event. - */ - onMouseOut: PropTypes.func, - - /** - * Handler for mouse over event. - */ - onMouseOver: PropTypes.func - }; - - /** - * Implements React's {@link Component#render()}. - * - * @inheritdoc - * @returns {ReactElement} - */ - render(): React$Element<*> { - const { - className, - onMouseOut, - onMouseOver - } = this.props; - - return ( -
- { - this.props.children - } -
- ); - } -} diff --git a/react/features/toolbox/components/StatelessToolbarButton.js b/react/features/toolbox/components/StatelessToolbarButton.js deleted file mode 100644 index 822c5300f..000000000 --- a/react/features/toolbox/components/StatelessToolbarButton.js +++ /dev/null @@ -1,130 +0,0 @@ -/* @flow */ - -import PropTypes from 'prop-types'; -import React from 'react'; - -import AbstractToolbarButton from './AbstractToolbarButton'; - -type MapOfAttributes = { [key: string]: * }; - - -/* eslint-disable flowtype/space-before-type-colon */ - -/** - * Takes toolbar button props and maps them to HTML attributes to set. - * - * @param {Object} props - Props set to the React component. - * @returns {MapOfAttributes} - */ -function getButtonAttributesByProps(props: Object = {}) - : MapOfAttributes { - // XXX Make sure to not modify props.classNames because that'd be bad - // practice. - const classNames = (props.classNames && [ ...props.classNames ]) || []; - - props.toggled && classNames.push('toggled'); - props.unclickable && classNames.push('unclickable'); - - const result: MapOfAttributes = { - className: classNames.join(' '), - 'data-container': 'body', - 'data-placement': 'bottom', - id: props.id - }; - - if (!props.enabled) { - result.disabled = 'disabled'; - } - - if (props.hidden) { - result.style = { display: 'none' }; - } - - if (props.tooltipText) { - result.content = props.tooltipText; - } - - return result; -} - -/* eslint-enable flowtype/space-before-type-colon */ - -/** - * Represents a button in Toolbar on React. - * - * @class ToolbarButton - * @extends AbstractToolbarButton - */ -export default class StatelessToolbarButton extends AbstractToolbarButton { - _onClick: Function; - - /** - * Toolbar button component's property types. - * - * @static - */ - static propTypes = { - ...AbstractToolbarButton.propTypes, - - /** - * Object describing button. - */ - button: PropTypes.object.isRequired - }; - - /** - * Initializes new ToolbarButton instance. - * - * @param {Object} props - The read-only properties with which the new - * instance is to be initialized. - */ - constructor(props: Object) { - super(props); - - // Bind methods to save the context - this._onClick = this._onClick.bind(this); - } - - /** - * Implements React's {@link Component#render()}. - * - * @inheritdoc - * @returns {ReactElement} - */ - render(): React$Element<*> { - const { button } = this.props; - const attributes = getButtonAttributesByProps(button); - - return ( -
- - { this.props.children } - -
- ); - } - - /** - * Wrapper on on click handler props for current button. - * - * @param {Event} event - Click event object. - * @returns {void} - * @private - */ - _onClick(event: Event): void { - const { - button, - onClick - } = this.props; - const { - enabled, - unclickable - } = button; - - if (enabled && !unclickable && onClick) { - onClick(event); - } - } -}