@seakoi/native-ui 1.0.0

package/dist/module/components/base/badge/badge.js

@@ -0,0 +1,93 @@
+"use strict";
+
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Platform, StyleSheet, View } from 'react-native';
+import { Text } from "./../index.js";
+import { useTheme } from "../../../native-provider/index.js";
+import { useBadgeStyles } from "./style/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Badge = ({
+  visible = true,
+  size = 'large',
+  offset = [0, 0],
+  overflowCount = 99,
+  ...props
+}) => {
+  const theme = useTheme();
+  const styles = useBadgeStyles();
+  const animateValue = visible ? 1 : 0;
+  const {
+    current: animation
+  } = useRef(new Animated.Value(animateValue));
+  const [dimensions, setDimensions] = useState();
+  const displayCount = useMemo(() => {
+    if (typeof props.count !== 'number') return null;
+    if (props.count <= overflowCount) return props.count;
+    return `${overflowCount}+`;
+  }, [props.count, overflowCount]);
+  useEffect(() => {
+    Animated.timing(animation, {
+      duration: 100,
+      toValue: animateValue,
+      useNativeDriver: Platform.OS !== 'web'
+    }).start();
+  }, [animateValue, animation]);
+  const isSmall = size !== 'large';
+  const isDot = displayCount === null;
+  const dotSize = isSmall ? 7 : 12;
+  const textSize = isSmall ? 11 : 14;
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [props.children, /*#__PURE__*/_jsx(Animated.View, {
+      onLayout: ({
+        nativeEvent
+      }) => {
+        if (!props.children) return;
+        setDimensions({
+          width: nativeEvent.layout.width,
+          height: nativeEvent.layout.height
+        });
+      },
+      style: [styles.badge, {
+        minWidth: dotSize,
+        minHeight: dotSize,
+        opacity: animation,
+        transform: [{
+          scale: animation
+        }]
+      }, isDot && {
+        borderRadius: theme.roundness.full
+      }, props.color && {
+        backgroundColor: props.color
+      }, props.children && StyleSheet.flatten([styles.offset, {
+        top: offset[0],
+        right: offset[1],
+        transform: [{
+          translateX: '50%'
+        }, {
+          translateY: '-50%'
+        }]
+      }]),
+      // 修复 Android 上的 badge 位置偏移问题
+      dimensions && {
+        transform: [{
+          translateX: dimensions.width / 2
+        }, {
+          translateY: -dimensions.height / 2
+        }, {
+          scale: animation
+        }]
+      }, props.containerStyle],
+      children: displayCount !== null && /*#__PURE__*/_jsx(Text, {
+        color: "white",
+        font: "numeric",
+        size: textSize,
+        numberOfLines: 1,
+        style: {
+          paddingInline: 3
+        },
+        children: displayCount
+      })
+    })]
+  });
+};

package/dist/module/components/base/badge/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export * from "./badge.js";

package/dist/module/components/base/badge/style/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+export const useBadgeStyles = createThemedStyles(theme => ({
+  container: {
+    position: 'relative',
+    alignItems: 'flex-start'
+  },
+  badge: {
+    overflow: 'hidden',
+    userSelect: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: theme.palette.white,
+    borderRadius: theme.roundness.md,
+    backgroundColor: theme.palette.error7
+  },
+  offset: {
+    position: 'absolute',
+    transform: [{
+      translateX: '50%'
+    }, {
+      translateY: '-50%'
+    }]
+  }
+}));

package/dist/module/components/base/button/button-context.js

@@ -0,0 +1,4 @@
+"use strict";
+
+import React from 'react';
+export const ButtonContext = /*#__PURE__*/React.createContext(null);

package/dist/module/components/base/button/button-group.js

@@ -0,0 +1,35 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import { ButtonContext } from "./button-context.js";
+import { useButtonGroupStyles } from "./style/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ButtonGroup = ({
+  children,
+  direction = 'horizontal',
+  gap = 16,
+  style,
+  radius,
+  size,
+  disabled,
+  block
+}) => {
+  const groupStyles = useButtonGroupStyles();
+  return /*#__PURE__*/_jsx(ButtonContext.Provider, {
+    value: {
+      radius,
+      size,
+      disabled,
+      block
+    },
+    children: /*#__PURE__*/_jsx(View, {
+      style: [groupStyles.container, direction === 'vertical' && groupStyles.vertical, gap > 0 && {
+        gap
+      }, block && {
+        width: '100%'
+      }, style],
+      children: children
+    })
+  });
+};

package/dist/module/components/base/button/button.js

@@ -0,0 +1,213 @@
+"use strict";
+
+import React, { use } from 'react';
+import { Pressable, StyleSheet } from 'react-native';
+import { Text } from "./../index.js";
+import { useTheme } from "../../../native-provider/index.js";
+import { ButtonContext } from "./button-context.js";
+import { useButtonStyles } from "./style/index.js";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Button = ({
+  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 /*#__PURE__*/_jsx(Pressable, {
+    style: ({
+      pressed
+    }) => StyleSheet.flatten([styles.button, styles[mergedSize], {
+      borderRadius: mergedRadius
+    }, mergedBlock && {
+      flex: 1
+    }, getButtonStyleByPressed(pressed).buttonStyle, buttonStyle]),
+    onPress: onPress,
+    disabled: mergedDisabled,
+    children: ({
+      pressed
+    }) => {
+      const defaultStyle = getButtonStyleByPressed(pressed);
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [renderLeftIcon && /*#__PURE__*/_jsx(_Fragment, {
+          children: /*#__PURE__*/React.isValidElement(renderLeftIcon) ? /*#__PURE__*/React.cloneElement(renderLeftIcon, {
+            color: defaultStyle.textColor
+          }) : renderLeftIcon
+        }), /*#__PURE__*/_jsx(Text, {
+          size: mergedSize === 'medium' ? 14 : 16,
+          style: StyleSheet.flatten([defaultStyle.textStyle, textStyle]),
+          children: text
+        }), renderRightIcon && /*#__PURE__*/_jsx(_Fragment, {
+          children: /*#__PURE__*/React.isValidElement(renderRightIcon) ? /*#__PURE__*/React.cloneElement(renderRightIcon, {
+            color: defaultStyle.textColor
+          }) : renderRightIcon
+        })]
+      });
+    }
+  });
+};
+
+/** 生成默认按钮样式 */
+const getButtonStyle = ({
+  variant,
+  theme,
+  themeColor,
+  status
+}) => {
+  const buttonStyle = {};
+  const 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/dist/module/components/base/button/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+import { Button as _Button } from "./button.js";
+import { ButtonGroup } from "./button-group.js";
+export * from "./button.js";
+export * from "./button-group.js";
+export const Button = Object.assign(_Button, {
+  Group: ButtonGroup
+});

package/dist/module/components/base/button/style/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+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/dist/module/components/base/button/types.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export {};