K0ndee/split button

docs/component-docs.config.ts

@@ -135,6 +135,9 @@ const pages = {
     SegmentedButtons: 'SegmentedButtons/SegmentedButtons',
   },
   Snackbar: 'Snackbar',
+  SplitButton: {
+    SplitButton: 'SplitButton/SplitButton',
+  },
   Surface: 'Surface',
   Switch: {
     Switch: 'Switch/Switch',

docs/src/data/screenshots.ts

@@ -134,6 +134,10 @@ export const screenshots = {
     multiselect: 'screenshots/segmented-button-multi-select.png',
   },
   Snackbar: 'screenshots/snackbar.gif',
+  SplitButton: {
+    collapsed: 'screenshots/split-button-collapsed.png',
+    expanded: 'screenshots/split-button-expanded.png',
+  },
   Surface: {
     elevated: 'screenshots/surface-elevated-full-width.png',
     flat: 'screenshots/surface-flat-full-width.png',

docs/src/data/themeColors.ts

@@ -307,6 +307,37 @@ export const themeColors = {
       iconColor: 'theme.colors.inverseOnSurface',
     },
   },
+  SplitButton: {
+    active: {
+      filled: {
+        backgroundColor: 'theme.colors.primary',
+        textColor: 'theme.colors.onPrimary',
+      },
+      tonal: {
+        backgroundColor: 'theme.colors.secondaryContainer',
+        textColor: 'theme.colors.onSecondaryContainer',
+      },
+      elevated: {
+        backgroundColor: 'theme.colors.surfaceContainerLow',
+        textColor: 'theme.colors.primary',
+      },
+      outlined: {
+        textColor: 'theme.colors.onSurfaceVariant',
+        borderColor: 'theme.colors.outlineVariant',
+      },
+    },
+    disabled: {
+      '-': {
+        backgroundColor: 'theme.colors.onSurface',
+        textColor: 'theme.colors.onSurface',
+      },
+      outlined: {
+        backgroundColor: 'transparent',
+        textColor: 'theme.colors.outlineVariant',
+        borderColor: 'theme.colors.outlineVariant',
+      },
+    },
+  },
   Surface: {
     flat: {
       backgroundColor: 'theme.colors.elevation[elevation]',

example/src/ExampleList.tsx

@@ -36,6 +36,7 @@ import SegmentedButtonMultiselectRealCase from './Examples/SegmentedButtons/Segm
 import SegmentedButtonRealCase from './Examples/SegmentedButtons/SegmentedButtonRealCase';
 import SegmentedButtonExample from './Examples/SegmentedButtonsExample';
 import SnackbarExample from './Examples/SnackbarExample';
+import SplitButtonExample from './Examples/SplitButtonExample';
 import SurfaceExample from './Examples/SurfaceExample';
 import SwitchExample from './Examples/SwitchExample';
 import TeamDetails from './Examples/TeamDetails';
@@ -79,6 +80,7 @@ export const mainExamples = {
   Searchbar: SearchbarExample,
   SegmentedButton: SegmentedButtonExample,
   Snackbar: SnackbarExample,
+  SplitButton: SplitButtonExample,
   Surface: SurfaceExample,
   Switch: SwitchExample,
   Text: TextExample,

example/src/Examples/SplitButtonExample.tsx

@@ -0,0 +1,149 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { List, Menu, SplitButton, Switch, useTheme } from 'react-native-paper';
+
+import ScreenWrapper from '../ScreenWrapper';
+
+const modes = ['filled', 'tonal', 'elevated', 'outlined'] as const;
+const sizes = [
+  'extra-small',
+  'small',
+  'medium',
+  'large',
+  'extra-large',
+] as const;
+const SplitButtonExample = () => {
+  const [menuVisible, setMenuVisible] = React.useState(false);
+  const [disabled, setDisabled] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
+  const theme = useTheme();
+
+  return (
+    <ScreenWrapper>
+      <List.Section title="Playground">
+        <View style={styles.playground}>
+          <Menu
+            visible={menuVisible}
+            onDismiss={() => setMenuVisible(false)}
+            anchorPosition="bottom"
+            anchor={
+              <SplitButton
+                label="Send"
+                icon="send"
+                disabled={disabled}
+                loading={loading}
+                onPress={() => {}}
+                onTrailingPress={() => setMenuVisible(true)}
+                trailingAccessibilityLabel="Show send options"
+                trailingAccessibilityState={{ expanded: menuVisible }}
+              />
+            }
+          >
+            <Menu.Item
+              leadingIcon="send-clock"
+              title="Schedule send"
+              onPress={() => setMenuVisible(false)}
+            />
+            <Menu.Item
+              leadingIcon="content-save"
+              title="Save draft"
+              onPress={() => setMenuVisible(false)}
+            />
+          </Menu>
+        </View>
+        <List.Item
+          title="Disabled"
+          right={() => <Switch value={disabled} onValueChange={setDisabled} />}
+        />
+        <List.Item
+          title="Loading"
+          right={() => <Switch value={loading} onValueChange={setLoading} />}
+        />
+      </List.Section>
+
+      <List.Section title="Modes">
+        <View style={styles.row}>
+          {modes.map((mode) => (
+            <SplitButton
+              key={mode}
+              mode={mode}
+              icon="plus"
+              label={mode}
+              onPress={() => {}}
+              onTrailingPress={() => {}}
+              trailingAccessibilityLabel={`${mode} options`}
+            />
+          ))}
+        </View>
+      </List.Section>
+
+      <List.Section title="Sizes">
+        <View style={styles.column}>
+          {sizes.map((size) => (
+            <SplitButton
+              key={size}
+              size={size}
+              icon="plus"
+              label={size}
+              onPress={() => {}}
+              onTrailingPress={() => {}}
+              trailingAccessibilityLabel={`${size} options`}
+            />
+          ))}
+        </View>
+      </List.Section>
+
+      <List.Section title="Custom">
+        <View style={styles.column}>
+          <SplitButton
+            mode="outlined"
+            icon="palette"
+            label="Custom color"
+            buttonColor={theme.colors.tertiaryContainer}
+            textColor={theme.colors.onTertiaryContainer}
+            onPress={() => {}}
+            onTrailingPress={() => {}}
+            trailingAccessibilityLabel="Custom color options"
+          />
+          <SplitButton
+            mode="filled"
+            label="Custom label style"
+            icon="format-bold"
+            labelStyle={styles.boldLabel}
+            onPress={() => {}}
+            onTrailingPress={() => {}}
+            trailingAccessibilityLabel="Custom label options"
+          />
+        </View>
+      </List.Section>
+    </ScreenWrapper>
+  );
+};
+
+SplitButtonExample.title = 'SplitButton';
+
+const styles = StyleSheet.create({
+  playground: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    alignItems: 'flex-start',
+  },
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    gap: 12,
+  },
+  column: {
+    alignItems: 'flex-start',
+    paddingHorizontal: 16,
+    gap: 16,
+  },
+  boldLabel: {
+    fontWeight: '800',
+  },
+});
+
+export default SplitButtonExample;