@seakoi/native-ui 1.0.0

package/dist/commonjs/components/base/back-to-top/back-to-top.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BackToTop = void 0;
+var _svgIcons = require("@seakoi/svg-icons");
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _index = require("./../index.js");
+var _index2 = require("../../../native-provider/index.js");
+var _index3 = require("./style/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const BackToTop = ({
+  visible = false,
+  onPress,
+  shape = 'round',
+  position,
+  text = '',
+  icon,
+  style
+}) => {
+  const theme = (0, _index2.useTheme)();
+  const styles = (0, _index3.useStyles)();
+  const isRound = shape === 'round';
+  if (!visible) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    style: [styles.base, position, isRound ? styles.round : styles.halfRound, style],
+    onPress: onPress,
+    children: [icon ? icon : /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgIcons.UpOutlined, {
+      size: 22,
+      color: theme.palette.fontGray1
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+      size: 14,
+      font: "semiBold",
+      style: [{
+        color: theme.palette.fontGray1
+      }],
+      children: text
+    })]
+  });
+};
+exports.BackToTop = BackToTop;

package/dist/commonjs/components/base/back-to-top/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _backToTop = require("./back-to-top.js");
+Object.keys(_backToTop).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _backToTop[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _backToTop[key];
+    }
+  });
+});

package/dist/commonjs/components/base/back-to-top/style/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStyles = void 0;
+var _index = require("../../../../native-provider/index.js");
+const SIZE = 52;
+const useStyles = exports.useStyles = (0, _index.createThemedStyles)(theme => {
+  return {
+    container: {
+      position: 'absolute'
+    },
+    base: {
+      backgroundColor: theme.palette.white,
+      borderWidth: 1,
+      borderColor: theme.palette.blueGray6,
+      position: 'absolute'
+    },
+    /** 圆形 */
+    round: {
+      width: SIZE,
+      height: SIZE,
+      borderRadius: theme.roundness.full,
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+    /** 半圆 / 半胶囊 */
+    halfRound: {
+      flexDirection: 'row',
+      padding: 8,
+      borderTopLeftRadius: SIZE / 2,
+      borderBottomLeftRadius: SIZE / 2,
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  };
+});

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

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Badge = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("./../index.js");
+var _index2 = require("../../../native-provider/index.js");
+var _index3 = require("./style/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const Badge = ({
+  visible = true,
+  size = 'large',
+  offset = [0, 0],
+  overflowCount = 99,
+  ...props
+}) => {
+  const theme = (0, _index2.useTheme)();
+  const styles = (0, _index3.useBadgeStyles)();
+  const animateValue = visible ? 1 : 0;
+  const {
+    current: animation
+  } = (0, _react.useRef)(new _reactNative.Animated.Value(animateValue));
+  const [dimensions, setDimensions] = (0, _react.useState)();
+  const displayCount = (0, _react.useMemo)(() => {
+    if (typeof props.count !== 'number') return null;
+    if (props.count <= overflowCount) return props.count;
+    return `${overflowCount}+`;
+  }, [props.count, overflowCount]);
+  (0, _react.useEffect)(() => {
+    _reactNative.Animated.timing(animation, {
+      duration: 100,
+      toValue: animateValue,
+      useNativeDriver: _reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.container,
+    children: [props.children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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 && _reactNative.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__*/(0, _jsxRuntime.jsx)(_index.Text, {
+        color: "white",
+        font: "numeric",
+        size: textSize,
+        numberOfLines: 1,
+        style: {
+          paddingInline: 3
+        },
+        children: displayCount
+      })
+    })]
+  });
+};
+exports.Badge = Badge;

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _badge = require("./badge.js");
+Object.keys(_badge).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _badge[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _badge[key];
+    }
+  });
+});

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

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBadgeStyles = void 0;
+var _index = require("../../../../native-provider/index.js");
+const useBadgeStyles = exports.useBadgeStyles = (0, _index.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/commonjs/components/base/button/button-context.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonContext = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ButtonContext = exports.ButtonContext = /*#__PURE__*/_react.default.createContext(null);

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

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonGroup = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _buttonContext = require("./button-context.js");
+var _index = require("./style/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ButtonGroup = ({
+  children,
+  direction = 'horizontal',
+  gap = 16,
+  style,
+  radius,
+  size,
+  disabled,
+  block
+}) => {
+  const groupStyles = (0, _index.useButtonGroupStyles)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_buttonContext.ButtonContext.Provider, {
+    value: {
+      radius,
+      size,
+      disabled,
+      block
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [groupStyles.container, direction === 'vertical' && groupStyles.vertical, gap > 0 && {
+        gap
+      }, block && {
+        width: '100%'
+      }, style],
+      children: children
+    })
+  });
+};
+exports.ButtonGroup = ButtonGroup;

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

@@ -0,0 +1,219 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Button = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("./../index.js");
+var _index2 = require("../../../native-provider/index.js");
+var _buttonContext = require("./button-context.js");
+var _index3 = require("./style/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const Button = ({
+  text = '',
+  variant = 'base',
+  theme = 'primary',
+  radius,
+  block,
+  disabled,
+  buttonStyle,
+  textStyle,
+  size,
+  onPress,
+  renderLeftIcon,
+  renderRightIcon
+}) => {
+  const styles = (0, _index3.useButtonStyles)();
+  const context = (0, _react.use)(_buttonContext.ButtonContext);
+  const themeColor = (0, _index2.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__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    style: ({
+      pressed
+    }) => _reactNative.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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [renderLeftIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+          children: /*#__PURE__*/_react.default.isValidElement(renderLeftIcon) ? /*#__PURE__*/_react.default.cloneElement(renderLeftIcon, {
+            color: defaultStyle.textColor
+          }) : renderLeftIcon
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+          size: mergedSize === 'medium' ? 14 : 16,
+          style: _reactNative.StyleSheet.flatten([defaultStyle.textStyle, textStyle]),
+          children: text
+        }), renderRightIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+          children: /*#__PURE__*/_react.default.isValidElement(renderRightIcon) ? /*#__PURE__*/_react.default.cloneElement(renderRightIcon, {
+            color: defaultStyle.textColor
+          }) : renderRightIcon
+        })]
+      });
+    }
+  });
+};
+
+/** 生成默认按钮样式 */
+exports.Button = Button;
+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/commonjs/components/base/button/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Button: true
+};
+exports.Button = void 0;
+var _button = require("./button.js");
+Object.keys(_button).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _button[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _button[key];
+    }
+  });
+});
+var _buttonGroup = require("./button-group.js");
+Object.keys(_buttonGroup).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _buttonGroup[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _buttonGroup[key];
+    }
+  });
+});
+const Button = exports.Button = Object.assign(_button.Button, {
+  Group: _buttonGroup.ButtonGroup
+});

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useButtonStyles = exports.useButtonGroupStyles = void 0;
+var _index = require("../../../../native-provider/index.js");
+const useButtonStyles = exports.useButtonStyles = (0, _index.createThemedStyles)(() => {
+  return {
+    button: {
+      flexDirection: 'row',
+      columnGap: 8,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    large: {
+      paddingHorizontal: 20,
+      paddingVertical: 12
+    },
+    medium: {
+      paddingHorizontal: 16,
+      paddingVertical: 8
+    }
+  };
+});
+const useButtonGroupStyles = exports.useButtonGroupStyles = (0, _index.createThemedStyles)(() => {
+  return {
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      flexWrap: 'wrap'
+    },
+    vertical: {
+      flexDirection: 'column',
+      alignItems: 'stretch'
+    }
+  };
+});

package/dist/commonjs/components/base/button/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});