@beppla/tapas-ui 1.0.70 → 1.0.72

package/module/Alert/Alert.js

@@ -70,7 +70,6 @@ const Alert = ({
   }))));
 };
 export default withTheme(Alert);
-//# sourceMappingURL=Alert.js.mapmod : {
     "default": mod
   };
 };
@@ -147,4 +146,3 @@ var Alert = function (_a) {
   }))));
 };
 exports.default = (0, themed_1.withTheme)(Alert);
-//# sourceMappingURL=Alert.js.map

package/module/AnimatedNavItem/AnimatedNavItem.js

@@ -1,171 +1,136 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useEffect, useRef, useState, useCallback } from "react";
-import { Text, Animated, Pressable } from "react-native";
-import { withTheme, makeStyles } from "@rneui/themed";
-import TapasIcon from "../Icons/TapasIcon";
-const TapasAnimatedNavItem = ({
-  id,
-  icon,
-  text,
-  minWidth = 40,
-  maxWidth,
-  expanded = false,
-  selected = false,
-  iconSize = 20,
-  iconColor,
-  expandedIconColor,
-  textColor,
-  backgroundColor,
-  expandedBackgroundColor,
-  animationDuration = 200,
-  textStyle,
-  containerStyle,
-  onPress,
-  onLongPress,
-  disabled = false,
-  height = 40,
-  padding = {
-    horizontal: 12,
-    vertical: 0
-  },
-  style,
-  ...otherProps
-}) => {
-  const styles = useStyles({
-    height,
-    padding
-  });
+"use strict";
 
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function (o, v) {
+  Object.defineProperty(o, "default", {
+    enumerable: true,
+    value: v
+  });
+} : function (o, v) {
+  o["default"] = v;
+});
+var __importStar = this && this.__importStar || function () {
+  var ownKeys = function (o) {
+    ownKeys = Object.getOwnPropertyNames || function (o) {
+      var ar = [];
+      for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+      return ar;
+    };
+    return ownKeys(o);
+  };
+  return function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+    __setModuleDefault(result, mod);
+    return result;
+  };
+}();
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TapasAnimatedNavItem = exports.AnimatedNavItem = void 0;
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var themed_1 = require("@rneui/themed");
+var TapasIcon_1 = __importDefault(require("../Icons/TapasIcon"));
+var TapasAnimatedNavItem = function (_a) {
+  var id = _a.id,
+    icon = _a.icon,
+    text = _a.text,
+    _b = _a.minWidth,
+    minWidth = _b === void 0 ? 40 : _b,
+    maxWidth = _a.maxWidth,
+    _c = _a.expanded,
+    expanded = _c === void 0 ? false : _c,
+    _d = _a.selected,
+    selected = _d === void 0 ? false : _d,
+    _e = _a.iconSize,
+    iconSize = _e === void 0 ? 20 : _e,
+    iconColor = _a.iconColor,
+    expandedIconColor = _a.expandedIconColor,
+    textColor = _a.textColor,
+    backgroundColor = _a.backgroundColor,
+    expandedBackgroundColor = _a.expandedBackgroundColor,
+    _f = _a.animationDuration,
+    animationDuration = _f === void 0 ? 200 : _f,
+    textStyle = _a.textStyle,
+    containerStyle = _a.containerStyle,
+    onPress = _a.onPress,
+    onLongPress = _a.onLongPress,
+    _g = _a.disabled,
+    disabled = _g === void 0 ? false : _g,
+    _h = _a.height,
+    height = _h === void 0 ? 40 : _h,
+    _j = _a.padding,
+    padding = _j === void 0 ? {
+      horizontal: 12,
+      vertical: 0
+    } : _j,
+    style = _a.style,
+    otherProps = __rest(_a, ["id", "icon", "text", "minWidth", "maxWidth", "expanded", "selected", "iconSize", "iconColor", "expandedIconColor", "textColor", "backgroundColor", "expandedBackgroundColor", "animationDuration", "textStyle", "containerStyle", "onPress", "onLongPress", "disabled", "height", "padding", "style"]);
+  var styles = useStyles({
+    height: height,
+    padding: padding
+  });
   // 自动计算最大宽度（如果未指定）
-  const [calculatedMaxWidth, setCalculatedMaxWidth] = useState(maxWidth || minWidth);
-  const widthAnim = useRef(new Animated.Value(expanded ? calculatedMaxWidth : minWidth)).current;
-
+  var _k = (0, react_1.useState)(maxWidth || minWidth),
+    calculatedMaxWidth = _k[0],
+    setCalculatedMaxWidth = _k[1];
+  var widthAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(expanded ? calculatedMaxWidth : minWidth)).current;
   // 计算文本宽度
-  useEffect(() => {
+  (0, react_1.useEffect)(function () {
     if (!maxWidth && text) {
       // 简单的文本宽度估算：字符数 * 平均字符宽度 + 图标宽度 + 内边距
-      const estimatedTextWidth = text.length * 10;
-      const iconWidth = icon ? iconSize + 8 : 0; // 图标宽度 + 间距
-      const paddingWidth = (padding.horizontal || 12) * 2;
-      const totalWidth = estimatedTextWidth + iconWidth + paddingWidth;
+      var estimatedTextWidth = text.length * 10;
+      var iconWidth = icon ? iconSize + 8 : 0; // 图标宽度 + 间距
+      var paddingWidth = (padding.horizontal || 12) * 2;
+      var totalWidth = estimatedTextWidth + iconWidth + paddingWidth;
       setCalculatedMaxWidth(Math.max(totalWidth, minWidth));
     }
   }, [text, maxWidth, icon, iconSize, padding.horizontal, minWidth]);
-
   // 动画效果
-  useEffect(() => {
-    const targetWidth = expanded ? calculatedMaxWidth : minWidth;
-    Animated.timing(widthAnim, {
-      toValue: targetWidth,
-      duration: animationDuration,
-      useNativeDriver: false
-    }).start();
-  }, [expanded, calculatedMaxWidth, minWidth, animationDuration]);
-
-  // 处理点击事件
-  const handlePress = useCallback(() => {
-    if (!disabled && onPress) {
-      onPress(id);
-    }
-  }, [disabled, onPress, id]);
-
-  // 处理长按事件
-  const handleLongPress = useCallback(() => {
-    if (!disabled && onLongPress) {
-      onLongPress(id);
-    }
-  }, [disabled, onLongPress, id]);
-
-  // 获取当前状态的颜色
-  const getCurrentIconColor = () => {
-    if (expanded) {
-      return expandedIconColor || styles.expandedIcon.color;
-    }
-    return iconColor || styles.defaultIcon.color;
-  };
-  const getCurrentTextColor = () => {
-    return textColor || styles.text.color;
-  };
-  const getCurrentBackgroundColor = () => {
-    if (expanded || selected) {
-      return expandedBackgroundColor || styles.expandedContainer.backgroundColor;
-    }
-    return backgroundColor || 'transparent';
-  };
-  return /*#__PURE__*/React.createElement(Pressable, _extends({}, otherProps, {
-    style: [styles.container, containerStyle, style, {
-      backgroundColor: getCurrentBackgroundColor(),
-      opacity: disabled ? 0.5 : 1
-    }],
-    onPress: handlePress,
-    onLongPress: handleLongPress,
-    disabled: disabled
-  }), /*#__PURE__*/React.createElement(Animated.View, {
-    style: [styles.animatedContainer, {
-      width: widthAnim
-    }]
-  }, icon && /*#__PURE__*/React.createElement(TapasIcon, {
-    name: icon,
-    size: iconSize,
-    color: getCurrentIconColor()
-  }), expanded && text && /*#__PURE__*/React.createElement(Text, {
-    style: [styles.text, {
-      color: getCurrentTextColor()
-    }, textStyle],
-    numberOfLines: 1,
-    ellipsizeMode: "tail"
-  }, text)));
-};
-const useStyles = makeStyles((theme, props) => {
-  const height = props?.height || 40;
-  const paddingHorizontal = props?.padding?.horizontal || 12;
-  const paddingVertical = props?.padding?.vertical || 0;
-  return {
-    container: {
-      minWidth: 40,
-      width: "auto",
-      display: "flex",
-      flexDirection: "row",
-      height,
-      justifyContent: "center",
-      alignItems: "center",
-      borderRadius: height / 2,
-      overflow: "hidden"
-    },
-    animatedContainer: {
-      height,
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      paddingHorizontal,
-      paddingVertical,
-      gap: 8
-    },
-    text: {
-      fontSize: 14,
-      fontWeight: "600",
-      alignSelf: "center",
-      color: theme?.colors?.white || "#FFFFFF",
-      flexShrink: 1
-    },
-    defaultIcon: {
-      color: theme?.colors?.primary || "#007AFF"
-    },
-    expandedIcon: {
-      color: theme?.colors?.white || "#FFFFFF"
-    },
-    expandedContainer: {
-      backgroundColor: theme?.colors?.primary || "#007AFF"
-    }
-  };
-});
-export default withTheme(TapasAnimatedNavItem);
-
-// Export aliases for compatibility
-export const AnimatedNavItem = withTheme(TapasAnimatedNavItem);
-export { TapasAnimatedNavItem };
-//# sourceMappingURL=AnimatedNavItem.js.mapim, {
+  (0, react_1.useEffect)(function () {
+    var targetWidth = expanded ? calculatedMaxWidth : minWidth;
+    react_native_1.Animated.timing(widthAnim, {
       toValue: targetWidth,
       duration: animationDuration,
       useNativeDriver: false
@@ -272,4 +237,3 @@ var useStyles = (0, themed_1.makeStyles)(function (theme, props) {
 exports.default = (0, themed_1.withTheme)(TapasAnimatedNavItem);
 // Export aliases for compatibility
 exports.AnimatedNavItem = (0, themed_1.withTheme)(TapasAnimatedNavItem);
-//# sourceMappingURL=AnimatedNavItem.js.map

package/module/AnimatedNavItem/index.js

@@ -1,10 +1,5 @@
-"use strict";
-
-var __importDefault = this && this.__importDefault || function (mod) {
-  return mod && mod.__esModule ? mod : {
-    "default": mod
-  };
-};
+export { default } from './AnimatedNavItem';
+export { AnimatedNavItem, TapasAnimatedNavItem } from './AnimatedNavItem';
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -29,4 +24,3 @@ Object.defineProperty(exports, "TapasAnimatedNavItem", {
     return AnimatedNavItem_2.TapasAnimatedNavItem;
   }
 });
-//# sourceMappingURL=index.js.map

package/module/BarChart/BarChart.js

@@ -248,7 +248,6 @@ const styles = StyleSheet.create({
     color: '#999'
   }
 });
-//# sourceMappingURL=BarChart.js.mapack'
     }
   })) : react_1.default.createElement(react_native_1.View, {
     style: styles.horizontalWrapper
@@ -308,4 +307,3 @@ var styles = react_native_1.StyleSheet.create({
     color: '#999'
   }
 });
-//# sourceMappingURL=BarChart.js.map

package/module/BarChart/index.js

@@ -11,4 +11,3 @@ Object.defineProperty(exports, "BarChart", {
     return BarChart_1.BarChart;
   }
 });
-//# sourceMappingURL=index.js.map

package/module/Button/Button.js

@@ -1,85 +1,75 @@
-"use strict";
-
-var __assign = this && this.__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
-var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  var desc = Object.getOwnPropertyDescriptor(m, k);
-  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-    desc = {
-      enumerable: true,
-      get: function () {
-        return m[k];
-      }
-    };
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useState, useCallback, useMemo } from 'react';
+import { Button as RneButton, makeStyles } from '@rneui/themed';
+import { Platform } from 'react-native';
+import Hoverable from '../Hoverable/Hoverable';
+const useStyles = makeStyles(theme => ({
+  buttonHovered: {
+    backgroundColor: theme?.colors?.colorSurface2
+  },
+  outlineButtonHovered: {
+    backgroundColor: theme?.colors?.grey4,
+    borderColor: theme?.colors?.grey4
+  },
+  button: {
+    backgroundColor: theme?.colors?.primary
+  },
+  baseButton: {
+    fontFamily: theme?.fonts?.fontFamily,
+    fontSize: theme?.fonts.sizeM,
+    fontWeight: theme?.fonts.weightM
+  },
+  outlineButton: {
+    borderColor: theme?.colors?.grey4,
+    backgroundColor: theme?.colors?.white || '#ffffff'
   }
-  Object.defineProperty(o, k2, desc);
-} : function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  o[k2] = m[k];
-});
-var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function (o, v) {
-  Object.defineProperty(o, "default", {
-    enumerable: true,
-    value: v
-  });
-} : function (o, v) {
-  o["default"] = v;
-});
-var __importStar = this && this.__importStar || function () {
-  var ownKeys = function (o) {
-    ownKeys = Object.getOwnPropertyNames || function (o) {
-      var ar = [];
-      for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-      return ar;
-    };
-    return ownKeys(o);
-  };
-  return function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-    __setModuleDefault(result, mod);
-    return result;
-  };
-}();
-var __rest = this && this.__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-var __importDefault = this && this.__importDefault || function (mod) {
-  return mod && mod.__esModule ? mod : {
-    "default": mod
-  };
+}));
+export const Button = ({
+  hoverStyle,
+  buttonStyle,
+  width,
+  ...props
+}) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const styles = useStyles(props);
+  const handleMouseEnter = useCallback(() => {
+    setIsHovered(true);
+  }, []);
+  const handleMouseLeave = useCallback(() => {
+    setIsHovered(false);
+  }, []);
+  const {
+    primaryStyle,
+    hoveredStyle
+  } = useMemo(() => ({
+    primaryStyle: props.type === 'solid' ? styles.button : props.type === 'outline' ? styles.outlineButton : {},
+    hoveredStyle: props.type === 'solid' ? styles.buttonHovered : props.type === 'outline' ? styles.outlineButtonHovered : {}
+  }), [props.type, styles]);
+  const newButtonStyle = useMemo(() => isHovered && props.type !== 'clear' ? {
+    ...hoveredStyle,
+    ...hoverStyle
+  } : {
+    ...primaryStyle,
+    ...buttonStyle
+  }, [isHovered, props.type, hoveredStyle, hoverStyle, primaryStyle, buttonStyle]);
+  const containerStyle = useMemo(() => ({
+    width
+  }), [width]);
+  const titleStyleMemo = useMemo(() => [styles.baseButton, props.titleStyle], [styles.baseButton, props.titleStyle]);
+  return Platform.OS === 'web' && props.type !== 'clear' ? /*#__PURE__*/React.createElement(Hoverable, {
+    onHoverIn: handleMouseEnter,
+    onHoverOut: handleMouseLeave
+  }, isHovered => /*#__PURE__*/React.createElement(RneButton, _extends({
+    containerStyle: containerStyle,
+    buttonStyle: isHovered ? [newButtonStyle, hoverStyle].filter(Boolean) : newButtonStyle,
+    titleStyle: isHovered ? [titleStyleMemo, props.selectedTitleStyle] : titleStyleMemo
+  }, props))) : /*#__PURE__*/React.createElement(RneButton, _extends({
+    containerStyle: containerStyle,
+    buttonStyle: newButtonStyle,
+    titleStyle: titleStyleMemo
+  }, props));
 };
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Button = void 0;
-var react_1 = __importStar(require("react"));
-var themed_1 = require("@rneui/themed");
-var react_native_1 = require("react-native");
-var Hoverable_1 = __importDefault(require("../Hoverable/Hoverable"));
-var useStyles = (0, themed_1.makeStyles)(function (theme) {
-  var _a, _b, _c, _d, _e, _f, _g;
-  return {
-    buttonHovered: {
-      backgroundColor: (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.colorSurface2
-    },
-    outlineButtonHovered: {
-      backgroundColor: (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.grey4,
+export default Button;
       borderColor: (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.grey4
     },
     button: {
@@ -147,4 +137,3 @@ var Button = function (_a) {
 };
 exports.Button = Button;
 exports.default = exports.Button;
-//# sourceMappingURL=Button.js.map