@beppla/tapas-ui 1.5.14 → 1.5.15

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'
+}

package/components/Text/Text.tsx

@@ -0,0 +1,152 @@
+import React, {FC, useEffect, useState} from 'react';
+import {makeStyles, withTheme, Text as RNText, TextProps} from "@rneui/themed";
+import {Platform, StyleProp, TouchableOpacity, ViewStyle} from "react-native";
+import Hoverable from '../Hoverable/Hoverable';
+export interface Props extends TextProps {
+    children?: React.ReactNode;
+    mode?: 'standard' |'medium' | 'small';
+    type?: 'primary' | 'secondary';
+    hoverStyle?: StyleProp<ViewStyle>;
+    onPress?: () => void;
+    selected?: boolean;
+    disabled?: boolean;
+}
+const useStyles = makeStyles((theme, ...props) => {
+    const { mode } = props[0] as Props;
+    let height = 40, fontSize = theme.fonts.sizeM;
+    switch (mode) {
+        case'small':
+            height = 32;
+            fontSize = theme.fonts.sizeS;
+            break;
+        case'medium':
+            height = 36;
+            break;
+        default:
+            height = 40;
+            break;
+    }
+    return {
+        textItem: {
+            fontFamily: theme.fonts.fontFamily,
+            fontSize: fontSize,
+            fontWeight: theme.fonts.weightR,
+            color: theme.colors.colorTextPrimary,
+            // textOverflow: 'ellipsis', // Not supported in React Native
+            // whiteSpace: 'nowrap', // Not supported in React Native
+            justifyContent: "center",
+            alignItems: "center",
+            display: "flex",
+            minWidth: 80,
+        },
+        priceRangeItem: {
+            paddingHorizontal: 16,
+            paddingVertical: 8,
+            height: height,
+            minWidth: 80,
+            borderRadius: theme.radius.rounded,
+            marginBottom: 8,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+        },
+        primary: {
+            backgroundColor: theme.colors.grey4,
+        },
+        secondary: {
+            borderColor: theme.colors.grey2,
+            borderWidth: 1,
+        },
+        disabledText: {
+            color: theme.colors.disabled,
+        },
+        secondaryDisableText: {
+            color: theme.colors.disabled,
+            borderColor: theme.colors.disabled,
+            borderWidth: 1,
+        },
+        hovered: {
+            backgroundColor: theme.colors.grey3,
+        },
+        secondaryHovered: {
+            backgroundColor: theme.colors.grey4,
+        },
+        selected: {
+            backgroundColor: theme.colors.primary,
+        },
+        secondarySelected: {
+            backgroundColor: theme.colors.grey4,
+            borderColor: theme.colors.primary,
+            borderWidth: 2,
+            color: theme.colors.primary,
+        },
+        textSelected: {
+            color: theme.colors.white,
+        }
+    }
+});
+
+
+const Text: FC<Props> = ({children,selected = false ,type = 'primary',disabled ,style ,onPress ,hoverStyle , ...props}) => {
+  const styles = useStyles(props);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isSelected, setIsSelected] = useState(selected);
+  const handleItemPress = () => {
+      // setIsSelected(!isSelected);
+      onPress && onPress();
+  };
+
+    const handleMouseEnter = () => {
+        setIsHovered(true);
+    };
+
+    const handleMouseLeave = () => {
+        setIsHovered(false);
+    };
+
+    useEffect(() => {
+        setIsSelected(selected);
+    }, [selected]);
+    const renderText = () => {
+        return (!disabled ?<TouchableOpacity style={[
+            styles.priceRangeItem,
+            type === 'primary' ? styles.primary : styles.secondary,
+            isHovered && (type === 'primary' ? styles.hovered : styles.secondaryHovered),
+            isHovered && hoverStyle,
+            isSelected && (type === 'primary' ? styles.selected : styles.secondarySelected),
+            style
+        ]} onPress={handleItemPress}>
+            <RNText style={[
+                styles.textItem,
+                isSelected && type === 'primary' && styles.textSelected,
+                style,
+            ]} numberOfLines={1} ellipsizeMode="tail" {...props}>
+                {children}
+            </RNText>
+        </TouchableOpacity> : <RNText style={[
+            styles.priceRangeItem,
+            type === 'primary' ? styles.primary : styles.secondary,
+            styles.textItem,
+            disabled && type === 'primary' ? styles.disabledText : styles.secondaryDisableText,
+            style
+        ]} numberOfLines={1} ellipsizeMode="tail" {...props}>
+            {children}
+        </RNText>)
+    }
+
+
+  return (
+      Platform.OS === 'web' ? (
+              <Hoverable
+                  onHoverIn={handleMouseEnter}
+                  onHoverOut={handleMouseLeave}
+              >
+                  {
+                      renderText()
+                  }
+              </Hoverable>
+      ): renderText()
+  )
+}
+
+export default withTheme(Text);