@beppla/tapas-ui 1.4.32 → 1.4.34

package/components/TableColumnHeader/TableColumnHeader.tsx

@@ -0,0 +1,273 @@
+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

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

package/components/Tag/Tag.tsx

@@ -0,0 +1,92 @@
+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

@@ -0,0 +1,309 @@
+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

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