snapshot of https://github.com/jitsi/jitsi-meet.git @ fd1749dd28f4138aa80234fc7f311b19aaffa0e7 (2026-09-15)

react/features/base/toolbox/components/ToolboxItem.native.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Text, TextStyle, TouchableHighlight, View, ViewStyle } from 'react-native';
+
+import Icon from '../../icons/components/Icon';
+
+import AbstractToolboxItem, { IProps } from './AbstractToolboxItem';
+
+/**
+ * Native implementation of {@code AbstractToolboxItem}.
+ */
+export default class ToolboxItem extends AbstractToolboxItem<IProps> {
+    /**
+     * Renders the {@code Icon} part of this {@code ToolboxItem}.
+     *
+     * @private
+     * @returns {ReactElement}
+     */
+    _renderIcon() {
+        const { styles } = this.props;
+
+        return (
+            <Icon
+                src = { this.props.icon }
+                style = { styles?.iconStyle } />
+        );
+    }
+
+    /**
+     * Renders this {@code ToolboxItem}. Invoked by {@link AbstractToolboxItem}.
+     *
+     * @override
+     * @protected
+     * @returns {ReactElement}
+     */
+    _renderItem() {
+        const {
+            disabled,
+            elementAfter,
+            onClick,
+            showLabel,
+            styles,
+            toggled
+        } = this.props;
+
+        let children = this._renderIcon();
+
+        // XXX When using a wrapper View, apply the style to it instead of
+        // applying it to the TouchableHighlight.
+        let style = styles?.style;
+
+        if (showLabel) {
+            // XXX TouchableHighlight requires 1 child. If there's a need to
+            // show both the icon and the label, then these two need to be
+            // wrapped in a View.
+            children = (
+                <View style = { style as ViewStyle }>
+                    { children }
+                    <Text style = { styles?.labelStyle as TextStyle }>
+                        { this.label }
+                    </Text>
+                    { elementAfter }
+                </View>
+            );
+
+            // XXX As stated earlier, the style was applied to the wrapper View
+            // (above).
+            style = undefined;
+        }
+
+        return (
+            <TouchableHighlight
+                accessibilityLabel = { this.accessibilityLabel }
+                accessibilityRole = { 'button' }
+                accessibilityState = {{ 'selected': Boolean(toggled) }}
+                disabled = { disabled }
+                onPress = { onClick }
+                style = { style as ViewStyle }
+                underlayColor = { styles?.underlayColor } >
+                { children }
+            </TouchableHighlight>
+        );
+    }
+}