@seakoi/native-ui 1.0.0

package/src/components/base/button/button.tsx

@@ -0,0 +1,269 @@
+import React, { use } from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+
+import { Text } from '#components/base';
+import { useTheme } from '#native-provider';
+import { type Theme } from '#shared/theme';
+
+import { ButtonContext } from './button-context';
+import { useButtonStyles } from './style';
+import type { ButtonProps } from './types';
+
+export const Button: React.FC<ButtonProps> = ({
+  text = '',
+  variant = 'base',
+  theme = 'primary',
+  radius,
+  block,
+  disabled,
+  buttonStyle,
+  textStyle,
+  size,
+  onPress,
+  renderLeftIcon,
+  renderRightIcon,
+}) => {
+  const styles = useButtonStyles();
+
+  const context = use(ButtonContext);
+
+  const themeColor = useTheme();
+
+  const mergedSize = size ?? context?.size ?? 'medium';
+  const mergedRadius = radius ?? context?.radius ?? 4;
+  const mergedBlock = block ?? context?.block ?? false;
+  const mergedDisabled = disabled ?? context?.disabled ?? false;
+
+  const getButtonStyleByPressed = pressed => {
+    const status = pressed ? 'pressed' : mergedDisabled ? 'disabled' : 'normal';
+    return getButtonStyle({
+      variant,
+      status,
+      theme,
+      themeColor,
+    });
+  };
+
+  return (
+    <Pressable
+      style={({ pressed }) =>
+        StyleSheet.flatten([
+          styles.button,
+          styles[mergedSize],
+          { borderRadius: mergedRadius },
+          mergedBlock && { flex: 1 },
+          getButtonStyleByPressed(pressed).buttonStyle,
+          buttonStyle,
+        ])
+      }
+      onPress={onPress}
+      disabled={mergedDisabled}
+    >
+      {({ pressed }) => {
+        const defaultStyle = getButtonStyleByPressed(pressed);
+        return (
+          <>
+            {renderLeftIcon && (
+              <>
+                {React.isValidElement(renderLeftIcon)
+                  ? React.cloneElement(renderLeftIcon, {
+                      color: defaultStyle.textColor,
+                    })
+                  : renderLeftIcon}
+              </>
+            )}
+            <Text
+              size={mergedSize === 'medium' ? 14 : 16}
+              style={StyleSheet.flatten([defaultStyle.textStyle, textStyle])}
+            >
+              {text}
+            </Text>
+            {renderRightIcon && (
+              <>
+                {React.isValidElement(renderRightIcon)
+                  ? React.cloneElement(renderRightIcon, {
+                      color: defaultStyle.textColor,
+                    })
+                  : renderRightIcon}
+              </>
+            )}
+          </>
+        );
+      }}
+    </Pressable>
+  );
+};
+
+/** 生成默认按钮样式 */
+const getButtonStyle = ({
+  variant,
+  theme,
+  themeColor,
+  status,
+}: {
+  variant: NonNullable<ButtonProps['variant']>;
+  theme: NonNullable<ButtonProps['theme']>;
+  themeColor: Theme;
+  status: 'normal' | 'pressed' | 'disabled';
+}) => {
+  const buttonStyle: ViewStyle = {};
+  const textStyle: TextStyle = {};
+
+  /** 基础按钮样式 */
+  const BASE_COLOR_MAP = {
+    primary: {
+      mainColor: themeColor.palette.brand7,
+      textColor: themeColor.palette.white,
+      pressedColor: themeColor.palette.brand8,
+      pressedTextColor: themeColor.palette.white,
+      disabledColor: themeColor.palette.brand4,
+      disabledTextColor: themeColor.palette.fontWhite2,
+    },
+
+    secondary: {
+      mainColor: themeColor.palette.brand1,
+      textColor: themeColor.palette.brand7,
+      pressedColor: themeColor.palette.brand2,
+      pressedTextColor: themeColor.palette.brand8,
+      disabledColor: themeColor.palette.brand1,
+      disabledTextColor: themeColor.palette.brand4,
+    },
+
+    default: {
+      mainColor: themeColor.palette.gray1,
+      textColor: themeColor.palette.fontGray1,
+      pressedColor: themeColor.palette.gray3,
+      pressedTextColor: themeColor.palette.fontGray1,
+      disabledColor: themeColor.palette.gray1,
+      disabledTextColor: themeColor.palette.fontGray4,
+    },
+  };
+
+  /** 描边按钮样式 */
+  const OUTLINE_COLOR_MAP = {
+    primary: {
+      mainColor: themeColor.palette.brand7,
+      pressedColor: themeColor.palette.brand8,
+      disabledColor: themeColor.palette.brand4,
+    },
+
+    default: {
+      mainColor: themeColor.palette.fontGray1,
+      borderColor: themeColor.palette.blueGray4,
+      pressedColor: themeColor.palette.fontGray1,
+      pressedBgColor: themeColor.palette.blueGray3,
+      pressedBorderColor: themeColor.palette.blueGray4,
+      disabledColor: themeColor.palette.fontGray4,
+      disabledBorderColor: themeColor.palette.blueGray2,
+    },
+
+    danger: {
+      mainColor: themeColor.palette.error7,
+      pressedColor: themeColor.palette.error8,
+      disabledColor: themeColor.palette.error4,
+    },
+  };
+
+  /** 幽灵按钮样式 */
+  const GHOST_COLOR_MAP = {
+    primary: {
+      mainColor: themeColor.palette.brand7,
+      pressedColor: themeColor.palette.brand8,
+      disabledColor: themeColor.palette.brand4,
+    },
+  };
+
+  /** 文本按钮样式 */
+  const TEXT_COLOR_MAP = {
+    primary: {
+      mainColor: themeColor.palette.brand7,
+      pressedColor: themeColor.palette.brand8,
+      disabledColor: themeColor.palette.brand4,
+    },
+  };
+
+  if (variant === 'base') {
+    const baseColor = BASE_COLOR_MAP[theme] ?? {};
+
+    buttonStyle.backgroundColor = baseColor.mainColor;
+    textStyle.color = baseColor.textColor;
+
+    if (status === 'disabled') {
+      buttonStyle.backgroundColor = baseColor.disabledColor;
+      textStyle.color = baseColor.disabledTextColor;
+    }
+    if (status === 'pressed') {
+      buttonStyle.backgroundColor = baseColor.pressedColor;
+      textStyle.color = baseColor.pressedTextColor;
+    }
+  }
+
+  if (variant === 'outline') {
+    const outlineColor = OUTLINE_COLOR_MAP[theme] ?? {};
+
+    buttonStyle.borderWidth = 1;
+    buttonStyle.backgroundColor = 'transparent';
+
+    textStyle.color = outlineColor.mainColor;
+    buttonStyle.borderColor = outlineColor.borderColor || outlineColor.mainColor;
+
+    if (status === 'pressed') {
+      textStyle.color = outlineColor.pressedColor;
+      buttonStyle.borderColor =
+        outlineColor.pressedBorderColor || outlineColor.pressedColor;
+      buttonStyle.backgroundColor = outlineColor.pressedBgColor || 'transparent';
+    }
+
+    if (status === 'disabled') {
+      textStyle.color = outlineColor.disabledColor;
+      buttonStyle.borderColor =
+        outlineColor.disabledBorderColor || outlineColor.disabledColor;
+    }
+  }
+
+  if (variant === 'ghost') {
+    const ghostColor = GHOST_COLOR_MAP[theme] ?? {};
+
+    buttonStyle.borderWidth = 1;
+    buttonStyle.backgroundColor = 'transparent';
+    buttonStyle.borderStyle = 'dashed';
+
+    textStyle.color = ghostColor.mainColor;
+    buttonStyle.borderColor = ghostColor.mainColor;
+
+    if (status === 'disabled') {
+      textStyle.color = ghostColor.disabledColor;
+      buttonStyle.borderColor = ghostColor.disabledColor;
+    }
+    if (status === 'pressed') {
+      textStyle.color = ghostColor.pressedColor;
+      buttonStyle.borderColor = ghostColor.pressedColor;
+    }
+  }
+
+  if (variant === 'text') {
+    const textColor = TEXT_COLOR_MAP[theme] ?? {};
+
+    buttonStyle.borderWidth = 0;
+    textStyle.color = textColor.mainColor;
+    buttonStyle.backgroundColor = 'transparent';
+
+    if (status === 'disabled') {
+      textStyle.color = textColor.disabledColor;
+    }
+    if (status === 'pressed') {
+      textStyle.color = textColor.pressedColor;
+    }
+  }
+
+  return {
+    buttonStyle,
+    textStyle,
+    textColor: textStyle.color,
+  };
+};

package/src/components/base/button/index.ts

@@ -0,0 +1,10 @@
+import { Button as _Button } from './button';
+import { ButtonGroup } from './button-group';
+
+export * from './button';
+export * from './button-group';
+export type * from './types';
+
+export const Button = Object.assign(_Button, {
+  Group: ButtonGroup,
+});

package/src/components/base/button/style/index.tsx

@@ -0,0 +1,34 @@
+import { createThemedStyles } from '#native-provider';
+
+export const useButtonStyles = createThemedStyles(() => {
+  return {
+    button: {
+      flexDirection: 'row',
+      columnGap: 8,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    large: {
+      paddingHorizontal: 20,
+      paddingVertical: 12,
+    },
+    medium: {
+      paddingHorizontal: 16,
+      paddingVertical: 8,
+    },
+  };
+});
+
+export const useButtonGroupStyles = createThemedStyles(() => {
+  return {
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      flexWrap: 'wrap',
+    },
+    vertical: {
+      flexDirection: 'column',
+      alignItems: 'stretch',
+    },
+  };
+});

package/src/components/base/button/types.ts

@@ -0,0 +1,84 @@
+import type { PropsWithChildren } from 'react';
+import type {
+  GestureResponderEvent,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+
+import type { AnyObject } from '#shared/utils/types';
+export interface ButtonProps {
+  /** 文案 */
+  text?: string;
+
+  /** 结构形态 */
+  variant?: 'base' | 'outline' | 'ghost' | 'text';
+
+  /** 主题色 */
+  theme?: 'primary' | 'secondary' | 'default' | 'danger';
+
+  /**
+   * 圆角
+   *
+   * @default 4
+   *  */
+  radius?: number;
+
+  /**
+   * 是否占满父容器
+   *
+   * @default false
+   *  */
+  block?: boolean;
+
+  /**
+   * 禁用
+   *
+   * @default false
+   *  */
+  disabled?: boolean;
+
+  /**
+   * 尺寸
+   *
+   * @default 'medium'
+   *  */
+  size?: 'medium' | 'large';
+
+  /** 按钮样式 */
+  buttonStyle?: StyleProp<ViewStyle>;
+
+  /** 文本样式 */
+  textStyle?: StyleProp<TextStyle>;
+
+  /** 事件 */
+  onPress?: (event: GestureResponderEvent) => void;
+
+  /** 左边图标 */
+  renderLeftIcon?: React.ReactElement<AnyObject>;
+
+  /** 右边图标 */
+  renderRightIcon?: React.ReactElement<AnyObject>;
+}
+
+export interface ButtonGroupProps extends PropsWithChildren, ButtonContextValue {
+  /** 排列方向 */
+  direction?: 'horizontal' | 'vertical';
+
+  /** 间距 */
+  gap?: number;
+
+  /** 容器样式 */
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface ButtonContextValue {
+  /** 按钮的圆角 */
+  radius?: number;
+  /** 按钮的尺寸 */
+  size?: 'medium' | 'large';
+  /** 按钮的禁用状态 */
+  disabled?: boolean;
+  /** 按钮是否占满父容器 */
+  block?: boolean;
+}