react-native-elements · arpitBhalla · Apr 27, 2022 · Apr 19, 2022 · Apr 27, 2022 · Apr 27, 2022
diff --git a/example/src/views/speedDial.tsx b/example/src/views/speedDial.tsx
@@ -10,8 +10,8 @@ export default () => {
       <Header title="Speed Dial" view="speeddial" />
       <SpeedDial
         isOpen={open}
-        // placement="right"
-        // isOpen={false}
+        labelPressable
+        placement="right"
         overlayColor="transparent"
         icon={{ name: 'edit', color: '#fff' }}
         openIcon={{ name: 'close', color: '#fff' }}
@@ -37,6 +37,7 @@ export default () => {
         openIcon={{ name: 'close', color: '#fff' }}
         onOpen={() => setOpen(!open)}
         onClose={() => setOpen(!open)}
+        labelPressable
       >
         <SpeedDial.Action
           icon={{ name: 'add', color: '#fff' }}

diff --git a/packages/base/src/SpeedDial/SpeedDial.Action.tsx b/packages/base/src/SpeedDial/SpeedDial.Action.tsx
@@ -1,20 +1,26 @@
 import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { Pressable, Text, StyleSheet } from 'react-native';
 import { FAB, FABProps } from '../FAB/index';
 import { RneFunctionComponent } from '../helpers';
 
-export interface SpeedDialActionProps extends Omit<FABProps, 'size'> {}
+export interface SpeedDialActionProps extends Omit<FABProps, 'size'> {
+  /** onPress on Label Press */
+  labelPressable?: boolean;
+}
 
 /** Adds Action to the SpeedDial.
  * This, Receive all [Fab](fab#props) props. */
 export const SpeedDialAction: RneFunctionComponent<SpeedDialActionProps> = ({
   title,
   titleStyle,
   placement,
+  labelPressable,
+  onPress,
   ...actionProps
 }) => {
   return (
-    <View
+    <Pressable
+      onPress={labelPressable ? onPress : undefined}
       style={[
         styles.action,
         placement === 'left' && {
@@ -23,8 +29,13 @@ export const SpeedDialAction: RneFunctionComponent<SpeedDialActionProps> = ({
       ]}
     >
       {title && <Text style={[styles.title, titleStyle]}>{title}</Text>}
-      <FAB {...actionProps} size="small" style={[actionProps.style]} />
-    </View>
+      <FAB
+        {...actionProps}
+        onPress={onPress}
+        size="small"
+        style={[actionProps.style]}
+      />
+    </Pressable>
   );
 };
 

diff --git a/packages/base/src/SpeedDial/SpeedDial.tsx b/packages/base/src/SpeedDial/SpeedDial.tsx
@@ -11,6 +11,7 @@ import { FAB, FABProps } from '../FAB';
 import { IconNode } from '../Icon';
 import Color from 'color';
 import { defaultTheme, RneFunctionComponent } from '../helpers';
+import { SpeedDialActionProps } from './SpeedDial.Action';
 
 export interface SpeedDialProps extends FABProps {
   /** Opens the action stack. */
@@ -39,6 +40,9 @@ export interface SpeedDialProps extends FABProps {
 
   /** Props for Backdrop Pressable */
   backdropPressableProps?: PressableProps;
+
+  /** onPress on Label Press for all Actions*/
+  labelPressable?: boolean;
 }
 
 /** When pressed, a floating action button can display three to six related actions in the form of a speed dial.
@@ -58,6 +62,7 @@ export const SpeedDial: RneFunctionComponent<SpeedDialProps> = ({
   overlayColor,
   theme = defaultTheme,
   placement,
+  labelPressable,
   backdropPressableProps: pressableProps,
   ...rest
 }) => {
@@ -118,7 +123,10 @@ export const SpeedDial: RneFunctionComponent<SpeedDialProps> = ({
         ]}
       >
         {React.Children.toArray(children).map(
-          (ChildAction: React.ReactElement, i: number) => (
+          (
+            ChildAction: React.ReactElement<SpeedDialActionProps>,
+            i: number
+          ) => (
             <Animated.View
               pointerEvents={isOpen ? 'auto' : 'none'}
               key={i}
@@ -129,6 +137,7 @@ export const SpeedDial: RneFunctionComponent<SpeedDialProps> = ({
             >
               {React.cloneElement(ChildAction, {
                 placement,
+                labelPressable,
               })}
             </Animated.View>
           )

diff --git a/packages/base/src/SpeedDial/__tests__/SpeedDial.Action.test.tsx b/packages/base/src/SpeedDial/__tests__/SpeedDial.Action.test.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import { SpeedDial } from '..';
+import { renderWithWrapper } from '../../../.ci/testHelper';
+
+describe('Speed Dial Action', () => {
+  it('should have onPress event', () => {
+    const onPress = jest.fn();
+    const { getByText } = renderWithWrapper(
+      <SpeedDial.Action
+        icon={{ name: 'delete', color: '#fff' }}
+        title="Delete"
+        onPress={onPress}
+      />
+    );
+    const title = getByText('Delete');
+    fireEvent(title, 'press');
+    expect(onPress).toHaveBeenCalled();
+  });
+});
diff --git a/packages/base/src/SpeedDial/__tests__/__snapshots__/SpeedDial.test.tsx.snap b/packages/base/src/SpeedDial/__tests__/__snapshots__/SpeedDial.test.tsx.snap
@@ -86,6 +86,18 @@ exports[`Speed Dial Component should match snapshot 1`] = `
         }
       >
         <View
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
           style={
             Array [
               Object {
@@ -269,6 +281,18 @@ exports[`Speed Dial Component should match snapshot 1`] = `
         }
       >
         <View
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
           style={
             Array [
               Object {

diff --git a/packages/themed/src/SpeedDial/__tests__/__snapshots__/SpeedDial.test.tsx.snap b/packages/themed/src/SpeedDial/__tests__/__snapshots__/SpeedDial.test.tsx.snap
@@ -86,6 +86,18 @@ exports[`Speed Dial Component should render 1`] = `
         }
       >
         <View
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
           style={
             Array [
               Object {
@@ -269,6 +281,18 @@ exports[`Speed Dial Component should render 1`] = `
         }
       >
         <View
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
           style={
             Array [
               Object {

diff --git a/website/docs/components/SpeedDial.Action.mdx b/website/docs/components/SpeedDial.Action.mdx
@@ -15,3 +15,11 @@ This, Receive all [Fab](fab#props) props.
 :::note
 Includes all [FAB](fab#props) props.
 :::
+
+<div class='table-responsive'>
+
+| Name             | Type    | Default | Description            |
+| ---------------- | ------- | ------- | ---------------------- |
+| `labelPressable` | boolean |         | onPress on Label Press |
+
+</div>
diff --git a/website/docs/components/SpeedDial.mdx b/website/docs/components/SpeedDial.mdx
@@ -30,6 +30,7 @@ Includes all [Button](button#props), [FAB](fab#props) props.
 | `backdropPressableProps` | PressableProps   |            | Props for Backdrop Pressable                             |
 | `children`               | SpeedDial.Action |            | SpeedDial Action as children.                            |
 | `isOpen`                 | boolean          | `false`    | Opens the action stack.                                  |
+| `labelPressable`         | boolean          |            | onPress on Label Press for all Actions                   |
 | `onClose`                | Function         | `Function` | Callback fired when the component requests to be closed. |
 | `onOpen`                 | Function         | `Function` | Callback fired when the component requests to be open.   |
 | `openIcon`               | IconNode         |            | Icon shown on FAB when action stack is open.             |