@beppla/tapas-ui 1.4.34 → 1.5.0

package/components/TableColumnHeader/TableColumnHeader.tsx

@@ -1,273 +0,0 @@
-import React, { useCallback } from "react";
-import { View, Text, Pressable, ViewProps, TextStyle, StyleProp, ViewStyle } from "react-native";
-import { withTheme, makeStyles } from "@rneui/themed";
-import TapasIcon from "../Icons/TapasIcon";
-
-export type SortDirection = "ASC" | "DESC" | null;
-
-export interface SortState {
-  field: string;
-  direction: SortDirection;
-}
-
-export interface TapasTableColumnHeaderProps extends ViewProps {
-  /** 列标题文本 */
-  title: string;
-  /** 列索引 */
-  columnIndex?: number;
-  /** 字段名称（用于排序标识） */
-  fieldName?: string;
-  /** 是否支持排序 */
-  sortable?: boolean;
-  /** 当前排序状态 */
-  sortDirection?: SortDirection;
-  /** 文本对齐方式 */
-  textAlign?: "left" | "center" | "right";
-  /** 标题文本样式 */
-  titleStyle?: StyleProp<TextStyle>;
-  /** 排序按钮样式 */
-  sortButtonStyle?: StyleProp<ViewStyle>;
-  /** 容器内边距 */
-  padding?: {
-    horizontal?: number;
-    vertical?: number;
-  };
-  /** 排序回调函数 */
-  onSort?: (fieldName: string, direction: SortDirection, columnIndex?: number) => void;
-  /** 点击回调函数 */
-  onPress?: (fieldName: string, columnIndex?: number) => void;
-  /** 长按回调函数 */
-  onLongPress?: (fieldName: string, columnIndex?: number) => void;
-  /** 是否禁用 */
-  disabled?: boolean;
-  /** 排序图标大小 */
-  sortIconSize?: number;
-  /** 排序图标颜色（激活状态） */
-  activeSortIconColor?: string;
-  /** 排序图标颜色（非激活状态） */
-  inactiveSortIconColor?: string;
-  /** 自定义排序图标名称 */
-  sortIcons?: {
-    ascending?: string;
-    descending?: string;
-  };
-  /** 是否显示排序状态指示器 */
-  showSortIndicator?: boolean;
-  /** 最小高度 */
-  minHeight?: number;
-}
-
-const TapasTableColumnHeader: React.FC<TapasTableColumnHeaderProps> = ({
-  title,
-  columnIndex,
-  fieldName,
-  sortable = false,
-  sortDirection = null,
-  textAlign = "left",
-  titleStyle,
-  sortButtonStyle,
-  padding = { horizontal: 16, vertical: 8 },
-  onSort,
-  onPress,
-  onLongPress,
-  disabled = false,
-  sortIconSize = 18,
-  activeSortIconColor,
-  inactiveSortIconColor,
-  sortIcons = {
-    ascending: "arrow_drop_up",
-    descending: "arrow_drop_down",
-  },
-  showSortIndicator = true,
-  minHeight = 40,
-  style,
-  ...otherProps
-}) => {
-  const styles = useStyles({ 
-    textAlign, 
-    padding, 
-    minHeight, 
-    disabled 
-  });
-
-  // 处理排序点击
-  const handleSortPress = useCallback(() => {
-    if (!sortable || disabled || !fieldName) return;
-
-    let newDirection: SortDirection;
-    
-    // 排序逻辑：null -> ASC -> DESC -> null
-    switch (sortDirection) {
-      case null:
-        newDirection = "ASC";
-        break;
-      case "ASC":
-        newDirection = "DESC";
-        break;
-      case "DESC":
-        newDirection = null;
-        break;
-      default:
-        newDirection = "ASC";
-    }
-
-    onSort?.(fieldName, newDirection, columnIndex);
-  }, [sortable, disabled, fieldName, sortDirection, onSort, columnIndex]);
-
-  // 处理普通点击
-  const handlePress = useCallback(() => {
-    if (disabled) return;
-    
-    if (sortable) {
-      handleSortPress();
-    } else if (onPress && fieldName) {
-      onPress(fieldName, columnIndex);
-    }
-  }, [disabled, sortable, handleSortPress, onPress, fieldName, columnIndex]);
-
-  // 处理长按
-  const handleLongPress = useCallback(() => {
-    if (disabled || !fieldName) return;
-    onLongPress?.(fieldName, columnIndex);
-  }, [disabled, fieldName, onLongPress, columnIndex]);
-
-  // 渲染排序指示器
-  const renderSortIndicator = () => {
-    if (!sortable || !showSortIndicator) return null;
-
-    const isAscending = sortDirection === "ASC";
-    const isDescending = sortDirection === "DESC";
-    
-    return (
-      <View style={[styles.sortContainer, sortButtonStyle]}>
-        <View style={styles.sortArrows}>
-          <TapasIcon
-            name={sortIcons.ascending || "arrow_drop_up"}
-            size={sortIconSize}
-            color={
-              isDescending
-                ? activeSortIconColor || styles.activeSortIcon.color
-                : inactiveSortIconColor || styles.inactiveSortIcon.color
-            }
-            style={styles.arrowUp}
-          />
-          <TapasIcon
-            name={sortIcons.descending || "arrow_drop_down"}
-            size={sortIconSize}
-            color={
-              isAscending
-                ? activeSortIconColor || styles.activeSortIcon.color
-                : inactiveSortIconColor || styles.inactiveSortIcon.color
-            }
-            style={styles.arrowDown}
-          />
-        </View>
-      </View>
-    );
-  };
-
-  const renderContent = () => (
-    <View style={styles.content}>
-      <Text 
-        style={[styles.title, titleStyle]}
-        numberOfLines={2}
-        ellipsizeMode="tail"
-      >
-        {title}
-      </Text>
-      {renderSortIndicator()}
-    </View>
-  );
-
-  // 如果可排序或有点击事件，使用 Pressable
-  if (sortable || onPress || onLongPress) {
-    return (
-      <Pressable
-        {...otherProps}
-        style={[styles.container, style]}
-        onPress={handlePress}
-        onLongPress={handleLongPress}
-        disabled={disabled}
-      >
-        {renderContent()}
-      </Pressable>
-    );
-  }
-
-  // 否则使用普通 View
-  return (
-    <View {...otherProps} style={[styles.container, style]}>
-      {renderContent()}
-    </View>
-  );
-};
-
-const useStyles = makeStyles((theme, props?: { 
-  textAlign?: "left" | "center" | "right";
-  padding?: { horizontal?: number; vertical?: number };
-  minHeight?: number;
-  disabled?: boolean;
-}) => {
-  const textAlign = props?.textAlign || "left";
-  const paddingHorizontal = props?.padding?.horizontal || 16;
-  const paddingVertical = props?.padding?.vertical || 8;
-  const minHeight = props?.minHeight || 40;
-  const disabled = props?.disabled || false;
-
-  return {
-    container: {
-      minHeight,
-      paddingHorizontal,
-      paddingVertical,
-      backgroundColor: theme?.colors?.grey5 || "#f8f9fa",
-      borderBottomWidth: 1,
-      borderBottomColor: theme?.colors?.grey3 || "#e0e0e0",
-      opacity: disabled ? 0.5 : 1,
-    },
-    content: {
-      flex: 1,
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: textAlign === "left" ? "flex-start" : 
-                     textAlign === "right" ? "flex-end" : "center",
-      gap: 8,
-    },
-    title: {
-      fontSize: theme?.fonts?.sizeS || 14,
-      fontWeight: "600",
-      color: theme?.colors?.colorTextSecondary || theme?.colors?.grey1 || "#333",
-      flexShrink: 1,
-    },
-    sortContainer: {
-      flexShrink: 0,
-    },
-    sortArrows: {
-      flexDirection: "column",
-      alignItems: "center",
-      justifyContent: "center",
-      height: 20,
-      width: 16,
-      position: "relative",
-    },
-    arrowUp: {
-      position: "absolute",
-      top: -2,
-    },
-    arrowDown: {
-      position: "absolute",
-      bottom: -2,
-    },
-    activeSortIcon: {
-      color: theme?.colors?.primary || "#007AFF",
-    },
-    inactiveSortIcon: {
-      color: theme?.colors?.grey2 || "#999",
-    },
-  };
-});
-
-export default withTheme(TapasTableColumnHeader);
-
-// Export aliases for compatibility
-export const TableColumnHeader = withTheme(TapasTableColumnHeader);
-export { TapasTableColumnHeader };

package/components/TableColumnHeader/index.tsx

@@ -1,7 +0,0 @@
-export { default } from './TableColumnHeader';
-export type { 
-  TapasTableColumnHeaderProps, 
-  SortDirection, 
-  SortState 
-} from './TableColumnHeader';
-export { TableColumnHeader, TapasTableColumnHeader } from './TableColumnHeader';

package/components/Tag/Tag.tsx

@@ -1,92 +0,0 @@
-import React, { Fragment } from "react";
-import { View, StyleProp, ViewStyle, TouchableOpacity } from "react-native";
-import { makeStyles, withTheme, Text as RNText } from "@rneui/themed";
-import Icon from '../Icons/TapasIcon';
-
-export interface TagProps {
-    children?: React.ReactNode;
-    closable?: boolean;
-    onClose?: Function;
-    style?: StyleProp<ViewStyle>;
-    size?: 'small' | 'middle' | 'large';
-    textMaxWidth?: number;
-    disabled?: boolean
-}
-
-const useStyles = makeStyles((theme: any, ...props) => {
-    const { size, textMaxWidth, disabled } = props[0] as TagProps;
-    let height = 36, fontSize = theme.fonts.sizeM, iconSize = 20;
-    switch (size) {
-        case 'small':
-            height = 32;
-            fontSize = theme.fonts.sizeS;
-            iconSize = 16;
-            break;
-        case 'middle':
-            height = 36;
-            break;
-        default:
-            height = 40;
-            break;
-    }
-    return {
-        tagWrap: {
-            marginRight: 8,
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'center',
-            alignItems: 'center',
-            borderRadius: height,
-            paddingHorizontal: 12,
-            paddingVertical: 2,
-            marginBottom: 8,
-            height: height,
-            backgroundColor: theme.colors.grey4,
-        },
-        textItem: {
-            fontFamily: theme?.fonts?.fontFamily,
-            fontSize: fontSize || theme.fonts.sizeM,
-            fontWeight: theme?.fonts.weightR,
-            color: theme.colors.colorTextPrimary,
-            // textOverflow: 'ellipsis', // Not supported in React Native
-            // whiteSpace: 'nowrap', // Not supported in React Native
-            overflow: "hidden",
-            maxWidth: textMaxWidth || 226,
-        },
-        closeIcon: {
-            marginLeft: 8,
-            fontSize: iconSize,
-            color: disabled ? theme.colors.colorTextPlaceholder : theme.colors.colorTextPrimary
-        },
-        disabled: {
-            color: theme.colors.colorTextPlaceholder,
-        },
-    }
-})
-const Tag: React.FC<TagProps> = ({
-    // @ts-ignore
-    theme,
-    ...props
-}) => {
-    const styles = useStyles(props)
-    const { disabled = false, closable = true } = props
-
-    return (
-        <View style={[styles.tagWrap, props.style]} testID="tag">
-            <RNText style={[styles.textItem, disabled && styles.disabled]}>
-                {props.children}
-            </RNText>
-            {closable && <Fragment>
-                {!disabled ? <TouchableOpacity onPress={(e) => {
-                    e.stopPropagation();
-                    props.onClose && props.onClose()
-                }}>
-                    <Icon name="close" style={styles.closeIcon} />
-                </TouchableOpacity>
-                : <Icon name="close" style={styles.closeIcon} />}
-            </Fragment>}
-        </View>
-    )
-}
-
-export default withTheme(Tag)

package/components/Task/Task.tsx

@@ -1,309 +0,0 @@
-import React, { CSSProperties } from "react";
-import { Card, Divider, Text, withTheme } from "@rneui/themed";
-import { View, StyleSheet } from "react-native";
-import CustomIcon from "../Icons/TapasIcon";
-import { TaskStatus } from "./type";
-
-type TaskCardProps = {
-  title: string;
-  description: string[];
-  state: keyof typeof TaskStatus;
-  timeRange: string[];
-  completion?: number;
-  theme?: any;
-  statusText?: Record<keyof typeof TaskStatus, string>;
-  completedText?: string;
-  style?: CSSProperties;
-};
-
-const TaskCard: React.FC<TaskCardProps> = ({
-  title,
-  description,
-  state,
-  completion,
-  theme,
-  timeRange,
-  statusText,
-  completedText,
-  style = {},
-}) => {
-  let stateColor = "";
-  let stateBg = "";
-  let completionVal = completion;
-  switch (state) {
-    case TaskStatus.Ongoing:
-      stateColor = theme?.colorStatusAvailable ?? "#57B07B";
-      stateBg = theme?.colorStatusAvailableBg ?? "#EEF7F2";
-      break;
-    case TaskStatus.Delay:
-      stateColor = theme.colorStatusError ?? "#B81F1E";
-      stateBg = theme?.colorStatusErrorBg ?? "#FFEBEA";
-      break;
-    case TaskStatus.Completed:
-      stateColor = theme.colorPrimaryBorder ?? "rgba(0, 0, 0, 0.12)";
-      stateBg = theme.grey5 ?? "rgba(0, 0, 0, 0.04)";
-      completionVal = 1;
-      break;
-    default:
-      stateColor = theme.colorStatusReserved ?? "#3E6DA4";
-      completionVal = 0;
-      break;
-  }
-
-  return (
-    <div
-      style={{
-        ...style,
-        marginTop: theme?.spacing.tp2xs,
-        marginBottom: theme?.spacing.tp2xs,
-        marginLeft: 0,
-        marginRight: 0,
-        borderRadius: theme?.radius.mini,
-        boxShadow:
-          "0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px 4px 16px 0px rgba(0, 0, 0, 0.12)",
-        display: "flex",
-        flexDirection: "column",
-        overflow: "hidden",
-      }}
-    >
-      <Card
-        containerStyle={{
-          ...styles.container,
-          paddingLeft: theme?.spacing.tpRg,
-          paddingRight: theme?.spacing.tpRg,
-          paddingTop: theme?.spacing.tpSm,
-          paddingBottom: theme?.spacing.tpSm,
-          borderRadius: theme?.radius.mini,
-          borderTopColor:
-            state === TaskStatus.Waiting ? theme?.grey4 : stateColor,
-          borderLeftColor:
-            state === TaskStatus.Waiting ? theme?.grey4 : stateColor,
-          borderRightColor:
-            state === TaskStatus.Waiting ? theme?.grey4 : stateColor,
-          borderBottomColor:
-            state === TaskStatus.Waiting ? theme?.grey4 : stateColor,
-
-          height: undefined,
-          minWidth: undefined,
-        }}
-      >
-        <div
-          style={{
-            ...styles.process,
-            borderRadius: theme?.radius.mini,
-            width: `calc(${
-              (completionVal ?? (state === TaskStatus.Completed ? 1 : 0)) * 100
-            }% + ${
-              !completionVal && state !== TaskStatus.Completed ? 0 : 28
-            }px)`,
-            borderLeftStyle: "solid",
-            borderColor: stateColor,
-            backgroundColor: stateBg,
-          }}
-        ></div>
-        
-        <Card.Title
-          testID="task"
-          style={{
-            ...styles.title,
-            fontSize: theme?.fonts.sizeS,
-            color:
-              state === TaskStatus.Completed
-                ? theme?.grey2 ?? "rgba(0, 0, 0, 0.26)"
-                : theme?.colorTextPrimary ?? "rgba(0, 0, 0, 0.87)",
-            display: "flex",
-            width: "100%",
-            maxHeight: 16,
-            overflow: "hidden",
-          }}
-        >
-          {title}
-        </Card.Title>
-        <View style={{ ...styles.vertical, height: 14 }}>
-          {(description || []).map((str, index) => (
-            <View style={{...styles.vertical, height: 14}} key={`tapas-card-desc-${index}`}>
-              {index > 0 && (
-                <Divider
-                  orientation="vertical"
-                  color={theme?.colorSurface6}
-                  style={styles.divider}
-                />
-              )}
-              <span
-                style={{
-                  ...styles.text,
-                  fontSize: theme.fonts.sizeS,
-                  color:
-                    state === TaskStatus.Completed
-                      ? theme?.grey2 ?? "rgba(0, 0, 0, 0.26)"
-                      : theme?.colorTextSecondary ?? "rgba(0, 0, 0, 0.54)",
-                  whiteSpace: "nowrap",
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  lineHeight: "14px",
-                }}
-              >
-                {str}
-              </span>
-            </View>
-          ))}
-        </View>
-        <View style={styles.vertical}>
-          {state !== TaskStatus.Completed && (
-            <Text
-              style={{
-                ...styles.status,
-                color: stateColor,
-                fontSize: theme.fonts.sizeM,
-                borderRadius: theme?.radius.mini,
-                borderTopColor: stateColor,
-                borderLeftColor: stateColor,
-                borderRightColor: stateColor,
-                borderBottomColor: stateColor,
-              }}
-            >
-              {statusText?.[state] ?? state}
-            </Text>
-          )}
-          <Text
-            style={{
-              ...styles.greyContainer,
-              marginLeft: state === TaskStatus.Completed ? 0 : 4,
-              backgroundColor: theme?.grey5 ?? "rgba(0, 0, 0, 0.04)",
-            }}
-          >
-            <View style={styles.flexRow}>
-              <CustomIcon
-                color={
-                  state === TaskStatus.Completed
-                    ? theme?.grey2 ?? "rgba(0, 0, 0, 0.26)"
-                    : theme?.colorTextSecondary ?? "rgba(0, 0, 0, 0.54)"
-                }
-                style={{ fontSize: theme.fonts.sizeL, marginRight: 4 }}
-                name="check"
-              />
-              <span
-                style={{
-                  fontSize: theme.fonts.sizeS,
-                  color:
-                    state === TaskStatus.Completed
-                      ? theme?.grey2 ?? "rgba(0, 0, 0, 0.26)"
-                      : theme?.colorTextSecondary ?? "rgba(0, 0, 0, 0.54)",
-                  fontWeight: "400",
-                  lineHeight: 24,
-                }}
-              >
-                {state === TaskStatus.Completed
-                  ? completedText ?? state
-                  : `${(completionVal ?? 0) * 100}%`}
-              </span>
-            </View>
-          </Text>
-          {timeRange &&
-            Array.isArray(timeRange) &&
-            timeRange.length > 0 &&
-            state !== TaskStatus.Completed && (
-              <Text
-                style={{
-                  ...styles.greyContainer,
-                  backgroundColor: theme?.grey5 ?? "rgba(0, 0, 0, 0.04)",
-                  overflow: "hidden",
-                }}
-              >
-                <View style={styles.flexRow}>
-                  <CustomIcon
-                    color={theme?.colorTextSecondary ?? "rgba(0, 0, 0, 0.54)"}
-                    style={{ fontSize: theme.fonts.sizeL, marginRight: 4 }}
-                    name="schedule"
-                  />
-                  <span
-                    style={{
-                      fontSize: theme.fonts.sizeS,
-                      color: theme?.colorTextSecondary ?? "rgba(0, 0, 0, 0.54)",
-                      fontWeight: "400",
-                      whiteSpace: "nowrap",
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
-                      lineHeight: 24,
-                    }}
-                  >
-                    {timeRange?.[0]}
-                    {timeRange?.[0] && timeRange?.[1] && " - "}
-                    {timeRange?.[1]}
-                  </span>
-                </View>
-              </Text>
-            )}
-        </View>
-      </Card>
-    </div>
-  );
-};
-
-const styles = StyleSheet.create({
-  process: {
-    position: "absolute",
-    bottom: -8,
-    top: -12,
-    left: -16,
-    borderLeftWidth: 4,
-  },
-  vertical: {
-    display: "flex",
-    maxWidth: '100%',
-    overflow: 'hidden',
-    flexDirection: "row",
-  },
-  flexRow: {
-    display: "flex",
-    flexDirection: "row",
-  },
-  divider: {
-    marginLeft: 6,
-    marginRight: 6,
-    maxHeight: 8,
-    marginTop: 4,
-  },
-  text: {
-    fontWeight: "400",
-  },
-  title: {
-    textAlign: "left",
-    margin: 0,
-    fontWeight: "bold",
-  },
-  container: {
-    height: 80,
-    minWidth: 50,
-    margin: 0,
-    borderWidth: 1,
-    borderStyle: "solid",
-    position: "relative",
-    display: "flex",
-    flexDirection: "column",
-    flexGrow: 1,
-    overflow: "hidden",
-  },
-  status: {
-    borderWidth: 1,
-    borderStyle: "solid",
-    paddingLeft: 6,
-    paddingRight: 6,
-    height: 24,
-    marginTop: 4,
-    fontWeight: "400",
-  },
-  greyContainer: {
-    height: 24,
-    marginTop: 4,
-    fontWeight: "400",
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    marginLeft: 4,
-    paddingLeft: 4,
-    paddingRight: 4,
-  },
-});
-
-export default withTheme(TaskCard);

package/components/Task/type.ts

@@ -1,6 +0,0 @@
-export enum TaskStatus {
-    Waiting = 'Waiting',
-    Ongoing = 'Ongoing',
-    Delay = 'Delay',
-    Completed = 'Completed'
-}