init

react/features/base/toolbox/components/web/ToolboxButtonWithIcon.tsx

@@ -0,0 +1,162 @@
+import React from 'react';
+
+import { NOTIFY_CLICK_MODE } from '../../../../toolbox/types';
+import Icon from '../../../icons/components/Icon';
+import Tooltip from '../../../tooltip/components/Tooltip';
+
+interface IProps {
+
+    /**
+     * The id of the element this button icon controls.
+     */
+    ariaControls?: string;
+
+    /**
+     * Whether the element popup is expanded.
+     */
+    ariaExpanded?: boolean;
+
+    /**
+     * Whether the element has a popup.
+     */
+    ariaHasPopup?: boolean;
+
+    /**
+     * Aria label for the Icon.
+     */
+    ariaLabel?: string;
+
+    /**
+     * The button's key.
+     */
+    buttonKey?: string;
+
+    /**
+     * The decorated component (ToolboxButton).
+     */
+    children: React.ReactNode;
+
+    /**
+     * Icon of the button.
+     */
+    icon: Function;
+
+    /**
+     * Flag used for disabling the small icon.
+     */
+    iconDisabled: boolean;
+
+    /**
+     * The ID of the icon button.
+     */
+    iconId: string;
+
+    /**
+     * The tooltip used for the icon.
+     */
+    iconTooltip: string;
+
+    /**
+     * Notify mode for `toolbarButtonClicked` event -
+     * whether to only notify or to also prevent button click routine.
+     */
+    notifyMode?: string;
+
+    /**
+     * Click handler for the small icon.
+     */
+    onIconClick: Function;
+
+    /**
+     * Keydown handler for icon.
+     */
+    onIconKeyDown?: Function;
+
+    /**
+     * Additional styles.
+     */
+    styles?: Object;
+}
+
+/**
+ * Displays the `ToolboxButtonWithIcon` component.
+ *
+ * @param {Object} props - Component's props.
+ * @returns {ReactElement}
+ */
+export default function ToolboxButtonWithIcon(props: IProps) {
+    const {
+        children,
+        icon,
+        iconDisabled,
+        iconTooltip,
+        buttonKey,
+        notifyMode,
+        onIconClick,
+        onIconKeyDown,
+        styles,
+        ariaLabel,
+        ariaHasPopup,
+        ariaControls,
+        ariaExpanded,
+        iconId
+    } = props;
+
+    const iconProps: {
+        ariaControls?: string;
+        ariaExpanded?: boolean;
+        containerId?: string;
+        onClick?: (e?: React.MouseEvent) => void;
+        onKeyDown?: Function;
+        role?: string;
+        tabIndex?: number;
+    } = {};
+    let className = '';
+
+    if (iconDisabled) {
+        className
+            = 'settings-button-small-icon settings-button-small-icon--disabled';
+    } else {
+        className = 'settings-button-small-icon';
+        iconProps.onClick = (e?: React.MouseEvent) => {
+            if (typeof APP !== 'undefined' && notifyMode) {
+                APP.API.notifyToolbarButtonClicked(
+                    buttonKey, notifyMode === NOTIFY_CLICK_MODE.PREVENT_AND_NOTIFY
+                );
+            }
+
+            if (notifyMode !== NOTIFY_CLICK_MODE.PREVENT_AND_NOTIFY) {
+                onIconClick(e);
+            }
+        };
+        iconProps.onKeyDown = onIconKeyDown;
+        iconProps.role = 'button';
+        iconProps.tabIndex = 0;
+        iconProps.ariaControls = ariaControls;
+        iconProps.ariaExpanded = ariaExpanded;
+        iconProps.containerId = iconId;
+    }
+
+
+    return (
+        <div
+            className = 'settings-button-container'
+            style = { styles }>
+            {children}
+
+            <div>
+                <Tooltip
+                    containerClassName = { className }
+                    content = { iconTooltip }
+                    position = 'top'>
+                    <Icon
+                        { ...iconProps }
+                        ariaHasPopup = { ariaHasPopup }
+                        ariaLabel = { ariaLabel }
+                        size = { 16 }
+                        src = { icon } />
+                </Tooltip>
+            </div>
+        </div>
+    );
+}

react/features/base/toolbox/components/web/ToolboxButtonWithPopup.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+
+import Icon from '../../../icons/components/Icon';
+import Popover from '../../../popover/components/Popover.web';
+
+interface IProps {
+
+    /**
+     * Aria label for the Icon.
+     */
+    ariaLabel?: string;
+
+    /**
+     * The decorated component (ToolboxButton).
+     */
+    children: React.ReactNode;
+
+    /**
+     * Icon of the button.
+     */
+    icon?: Function;
+
+    /**
+     * Flag used for disabling the small icon.
+     */
+    iconDisabled?: boolean;
+
+    /**
+     * Popover close callback.
+     */
+    onPopoverClose: Function;
+
+    /**
+     * Popover open callback.
+     */
+    onPopoverOpen: Function;
+
+    /**
+     * The content that will be displayed inside the popover.
+     */
+    popoverContent: React.ReactNode;
+
+    /**
+     * Additional styles.
+     */
+    styles?: Object;
+
+    /**
+     * Whether the trigger for open/ close should be click or hover.
+     */
+    trigger?: 'hover' | 'click';
+
+    /**
+     * Whether or not the popover is visible.
+     */
+    visible: boolean;
+}
+
+/**
+ * Displays the `ToolboxButtonWithIcon` component.
+ *
+ * @param {Object} props - Component's props.
+ * @returns {ReactElement}
+ */
+export default function ToolboxButtonWithPopup(props: IProps) {
+    const {
+        ariaLabel,
+        children,
+        icon,
+        iconDisabled,
+        onPopoverClose,
+        onPopoverOpen,
+        popoverContent,
+        styles,
+        trigger,
+        visible
+    } = props;
+
+    if (!icon) {
+        return (
+            <div
+                className = 'settings-button-container'
+                style = { styles }>
+                <Popover
+                    content = { popoverContent }
+                    headingLabel = { ariaLabel }
+                    onPopoverClose = { onPopoverClose }
+                    onPopoverOpen = { onPopoverOpen }
+                    position = 'top'
+                    trigger = { trigger }
+                    visible = { visible }>
+                    {children}
+                </Popover>
+            </div>
+        );
+    }
+
+    return (
+        <div
+            className = 'settings-button-container'
+            style = { styles }>
+            {children}
+            <div className = 'settings-button-small-icon-container'>
+                <Popover
+                    content = { popoverContent }
+                    headingLabel = { ariaLabel }
+                    onPopoverClose = { onPopoverClose }
+                    onPopoverOpen = { onPopoverOpen }
+                    position = 'top'
+                    visible = { visible }>
+                    <Icon
+                        alt = { ariaLabel }
+                        className = { `settings-button-small-icon ${iconDisabled
+                            ? 'settings-button-small-icon--disabled'
+                            : ''}` }
+                        size = { 16 }
+                        src = { icon } />
+                </Popover>
+            </div>
+        </div>
+    );
+}