@beppla/tapas-ui 1.5.9 → 1.5.11

package/components/Dropdown/InputDropdown.tsx

@@ -0,0 +1,188 @@
+import React, {Fragment, useState, useEffect} from 'react';
+import {TouchableOpacity, ScrollView} from 'react-native';
+import {withTheme} from '@rneui/themed';
+import CustomDropdown, {Props as CustomDropdownProps} from './CustomDropdown';
+import CustomListItem, {ItemProps} from '../ListItem/ListItem';
+import {TapasInput} from '../Input/Input';
+import Icon from '../Icons/TapasIcon';
+export * from './CustomDropdown';
+// @ts-expect-error CustomDropdownProps has conflicting index signature
+interface InputDropdownProps extends CustomDropdownProps {
+  options?: ItemProps[];
+  onChange?: (value?: ItemProps) => void;
+  value: ItemProps;
+  readOnly?: boolean;
+  clearable?: boolean;
+  prefix?: string;
+  width?: number;
+  subWidth?: number;
+  subHeight?: number;
+  onClose?: () => void;
+  onPress?: () => void;
+  onSearch?: (value: string) => void;
+  required?: boolean;
+  label: string;
+  defaultShowLabel?: boolean;
+  labelBg?: string;
+  labelColor?: string;
+  disabled?: boolean;
+  allCreate?: boolean;
+  labelPosition?: 'top' | 'middle';
+  children?: React.ReactNode;
+}
+
+const InputDropdown: React.FC<InputDropdownProps> = ({
+  value,
+  prefix = '',
+  options,
+  onChange,
+  width,
+  subWidth,
+  subHeight = 150,
+  required,
+  isVisible,
+  readOnly,
+  clearable,
+  label,
+  defaultShowLabel,
+  labelBg,
+  labelColor,
+  disabled,
+  allCreate,
+  labelPosition,
+  // @ts-expect-error theme injected by withTheme HOC
+  theme,
+  children,
+  ...props
+}) => {
+  const [selected, selectedItem] = useState<any>(value);
+  const [inputValue, setInputValue] = useState<string>(value?.name || '');
+  const [list, setList] = useState<any>(options);
+
+  const clearInput = () => {
+    setInputValue('');
+    selectedItem({});
+    setList(options);
+    onChange && onChange();
+    props.onPress && props.onPress();
+  };
+  useEffect(() => {
+    if (value) {
+      selectedItem(value);
+      setInputValue(value.name);
+    }
+  }, [JSON.stringify(value)]);
+
+  const simpleFilter = (val?: string) => {
+    if (!val) {
+      setList(options);
+      return;
+    }
+    if (Array.isArray(options)) {
+      const filterList = options?.filter(({name}) => name.includes(val));
+      setList(filterList);
+    }
+  };
+  return (
+    <CustomDropdown
+      value={value?.name}
+      isVisible={isVisible}
+      width={width}
+      subWidth={subWidth}
+      subHeight={subHeight}
+      {...props}
+      customButton={
+        <TapasInput
+          required={required}
+          disabled={disabled}
+          readOnly={readOnly}
+          defaultShowLabel={defaultShowLabel}
+          value={inputValue}
+          onFocus={() => {
+            setList(options);
+            props.onPress && props.onPress();
+          }}
+          onChange={(e) => {
+            setInputValue(e.nativeEvent.text);
+            simpleFilter(e.nativeEvent.text);
+            props.onSearch && props.onSearch(e.nativeEvent.text);
+          }}
+          onBlur={() => {
+            if (!allCreate) setInputValue(selected?.name || '');
+          }}
+          label={label}
+          rightIconContainerStyle={{position: 'absolute', right: 8, top: -4}}
+          rightIcon={
+            <Fragment>
+              {readOnly || !inputValue || !clearable ? (
+                <Icon
+                  size={20}
+                  name={isVisible ? 'arrow_drop_up' : 'arrow_drop_down'}
+                  color={disabled ? theme.colors.disabled : theme.colors.colorNormalIcon}
+                />
+              ) : (
+                <TouchableOpacity onPress={clearInput}>
+                  <Icon
+                    size={20}
+                    name={isVisible ? 'clear-all' : 'arrow_drop_down'}
+                    color={disabled ? theme.colors.disabled : theme.colors.colorNormalIcon}
+                  />
+                </TouchableOpacity>
+              )}
+            </Fragment>
+          }
+          labelPosition={labelPosition}
+          labelBg={
+            labelBg ? labelBg : (theme as Record<string, any>)?.colors?.background
+          }
+          labelColor={
+            disabled ? (theme as Record<string, any>)?.colors?.disabled : (theme as Record<string, any>)?.colors?.secondary
+          }
+        />
+      }
+      onClose={() => {
+        props.onClose && props.onClose();
+      }}
+      onPress={() => {
+        props.onPress && props.onPress();
+      }}
+    >
+      {Array.isArray(list) ? (
+        <ScrollView 
+          style={{width: subWidth, maxHeight: subHeight}}
+          keyboardShouldPersistTaps="handled"
+          keyboardDismissMode="none"
+        >
+          {list?.map((item, index) => {
+            const visibleItems = list.filter(item => !item.hide);
+            const currentVisibleIndex = visibleItems.findIndex(visibleItem => visibleItem === item);
+            const isFirst = currentVisibleIndex === 0;
+            const isLast = currentVisibleIndex === visibleItems.length - 1;
+            
+            return (
+              !item.hide && (
+                <CustomListItem
+                  onItemPress={(value) => {
+                    selectedItem(value);
+                    setInputValue(value.name);
+                    onChange && onChange(value);
+                    props.onClose && props.onClose();
+                  }}
+                  key={index}
+                  item={item}
+                  selected={selected}
+                  isFirst={isFirst}
+                  isLast={isLast}
+                />
+              )
+            );
+          })}
+        </ScrollView>
+      ) : (
+        <Fragment>{children}</Fragment>
+      )}
+    </CustomDropdown>
+  );
+};
+
+export default withTheme(InputDropdown);

package/components/ExternalLink/ExternalLink.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Platform, Linking, TouchableOpacity, Text } from 'react-native';
+import { withTheme, makeStyles } from '@rneui/themed';
+
+type Props = {
+  href: string;
+  children: React.ReactNode;
+  style?: any;
+  textStyle?: any;
+  onPress?: () => void;
+};
+
+const ExternalLink: React.FC<Props> = ({ 
+  href, 
+  children, 
+  style, 
+  textStyle, 
+  onPress,
+  ...rest 
+}) => {
+  const styles = useStyles();
+
+  const handlePress = async () => {
+    if (onPress) {
+      onPress();
+      return;
+    }
+
+    if (Platform.OS !== 'web') {
+      // For mobile platforms, use Linking to open external browser
+      const supported = await Linking.canOpenURL(href);
+      if (supported) {
+        await Linking.openURL(href);
+      } else {
+        console.warn(`Cannot open URL: ${href}`);
+      }
+    } else {
+      // For web, open in new tab
+      window.open(href, '_blank');
+    }
+  };
+
+  return (
+    <TouchableOpacity
+      {...rest}
+      style={[styles.link, style]}
+      onPress={handlePress}
+    >
+      {typeof children === 'string' ? (
+        <Text style={[styles.linkText, textStyle]}>{children}</Text>
+      ) : (
+        children
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const useStyles = makeStyles((theme) => ({
+  link: {
+    // Base link styles
+  },
+  linkText: {
+    color: theme.colors.primary,
+    textDecorationLine: 'underline',
+    fontSize: 16,
+  },
+}));
+
+export default withTheme(ExternalLink);

package/components/Gantt/Accessories.tsx

@@ -0,0 +1,302 @@
+import React from "react";
+import { StyleProp, View, ViewStyle, Text, Pressable } from "react-native";
+import { ChildrenProps, DateUnit } from "./types";
+import { useContext } from "react";
+import { GanttContext } from "./Gantt";
+import { Avatar } from "@rneui/themed";
+import {
+  calculateItemWidth,
+  calculateTimeOffsetForTimeLine,
+  calculateTimeOffsetInCell,
+  defaultColumnHeaderHeight,
+  defaultColumnWidth,
+  defaultRowHeight,
+  generateColumnTitle,
+} from "./helper";
+
+/**
+ * 甘特Context
+ */
+export const useGanttContext = () => {
+  const context = useContext(GanttContext);
+  if (!context) {
+    throw new Error("useGanttContext must be used within a GanttProvider");
+  }
+  return context;
+};
+
+/**
+ * 甘特Grid中的单元格容器模板
+ * @param data - 附带循环模板数据
+ * @param columnIndex - 列索引
+ * @param rowIndex - 行索引
+ * @param style - 模板样式（含模板在grid中对左，对上坐标）
+ */
+export const GanttItemWrapper: React.FC<any> = ({
+  data,
+  columnIndex,
+  rowIndex,
+  style,
+}) => {
+  const { ItemRenderer, cardRender, rangeVal, attachPressCard } = data;
+  return (
+    <ItemRenderer
+      columnIndex={columnIndex}
+      rowIndex={rowIndex}
+      rowHeight={data.rowHeight}
+      curColumnIndex={data.curColumnIndex}
+      columnWidth={data.columnWidth}
+      curColumnText={data.curColumnText}
+      currentTime={data.currentTime}
+      ItemRenderer={cardRender}
+      attachPressCard={attachPressCard}
+      rangeVal={rangeVal}
+      startDate={data.startDate}
+      endDate={data.endDate}
+      unit={data.unit}
+      style={{
+        ...style,
+        overflow: "hidden",
+        top:
+          style.top +
+          (data.headersRender
+            ? data.columnHeaderHeight ?? defaultColumnHeaderHeight
+            : 0),
+      }}
+    />
+  );
+};
+
+/**
+ * 列头模板容器
+ * @param children - 子元素
+ * @param style - 模板样式（含模板在grid中对左，对上坐标）
+ */
+export const ColumnHeaderCon = ({
+  style,
+  children,
+}: {
+  style: any;
+  children: React.ReactNode;
+}) => (
+  <div className="sticky" style={style}>
+    {children}
+  </div>
+);
+
+/**
+ * 列头单元格模板
+ * @param theme - 皮肤主题
+ * @param columnIndex - 列索引
+ * @param rowIndex - 行索引
+ * @param style - 模板样式（含模板在grid中对左，对上坐标）
+ */
+export const ColumnHeaderCellRnder = ({
+  columnIndex,
+  curColumnIndex,
+  curColumnText,
+  currentTime = new Date(),
+  columnWidth = 165,
+  startDate,
+  unit = DateUnit.HELF,
+  style,
+  theme,
+}: ChildrenProps) => (
+  <div className="column-headers" style={{ ...style, overflow: "visible" }}>
+    <span
+      style={{
+        position: "absolute",
+        left: columnIndex === 0 ? 0 : -20,
+        width: 40,
+        textAlign: "center",
+        fontSize: theme?.fonts.sizeS ?? 12,
+        lineHeight: "24px",
+        fontWeight: 400,
+        color: theme?.colorTextPlaceholder ?? "rgba(0,0,0,.26)",
+      }}
+    >
+      {columnIndex !== undefined && startDate
+        ? generateColumnTitle(unit, columnIndex, startDate)
+        : "N/A"}
+    </span>
+    {curColumnIndex === columnIndex && (
+      <TimeLineText
+        theme={theme}
+        text={curColumnText ?? "N/A"}
+        date={currentTime}
+        unit={unit}
+        columnWidth={columnWidth}
+      />
+    )}
+  </div>
+);
+
+/**
+ * 甘特Grid单元格模板(无内容只是背景占位)
+ * @param style - 模板样式（含模板在grid中对左，对上坐标）
+ */
+export const GanttCellRender: React.FC<ChildrenProps> = ({
+  style,
+  curColumnIndex,
+  columnIndex = -1,
+  rowIndex = -1,
+  columnWidth = defaultColumnWidth,
+  rowHeight = defaultRowHeight,
+  theme,
+  rangeVal,
+  attachPressCard,
+  unit = DateUnit.HELF,
+  ItemRenderer,
+}) => {
+  let renderItem = false;
+  let itemInfo;
+  let itemLeft = 0;
+  let itemWidth = 0;
+  if (ItemRenderer) {
+    const { gridDataMap } = useGanttContext();
+    if (rowIndex >= 0 && columnIndex >= 0) {
+      itemInfo = gridDataMap.get(rowIndex)?.get(columnIndex);
+      if (itemInfo) {
+        renderItem = true;
+        itemLeft = calculateTimeOffsetInCell(
+          unit,
+          columnWidth,
+          itemInfo.startTime
+        );
+        itemWidth = calculateItemWidth(
+          unit,
+          columnWidth,
+          itemInfo.startTime,
+          itemInfo.endTime
+        );
+      }
+    }
+  }
+  const goRenderCard =
+    ItemRenderer &&
+    renderItem &&
+    itemInfo &&
+    ((rangeVal &&
+      (!rangeVal[0] || itemInfo.startTime >= rangeVal[0]) &&
+      (!rangeVal[1] || itemInfo.endTime <= rangeVal[1])) ||
+      !rangeVal);
+
+  return (
+    <div
+      key={`Gantt-cell-${rowIndex}-${columnIndex}`}
+      style={{
+        ...style,
+        display: "flex",
+        whiteSpace: "nowrap",
+        borderLeft: "1px solid rgba(0, 0, 0, 0.12)",
+        overflow: "visible",
+        backgroundColor:
+          (columnIndex ?? 0) < (curColumnIndex ?? 0)
+            ? theme?.grey5 ?? "rgba(0, 0, 0, 0.04)"
+            : "initial",
+      }}
+    >
+      {goRenderCard && itemInfo && (
+        <Pressable
+          style={{
+            position: "absolute",
+            display: "flex",
+            flexDirection: "column",
+            left: itemLeft,
+            width: itemWidth || 0,
+            height: rowHeight - 8,
+            overflow: "hidden",
+            zIndex: 2,
+          }}
+          key={`Gantt-cell-inner-${rowIndex}-${columnIndex}`}
+          onPress={() =>
+            attachPressCard?.({
+              columnIndex,
+              rowIndex,
+              dataIndex: itemInfo.taskIndex,
+            })
+          }
+        >
+          <ItemRenderer
+            columnIndex={columnIndex}
+            rowIndex={rowIndex}
+            dataIndex={itemInfo.taskIndex}
+          />
+        </Pressable>
+      )}
+    </div>
+  );
+};
+
+/**
+ * 甘特Grid根据最小时间单位显示的当前时间线
+ * @param text - 时间线具体值
+ * @param style - 样式
+ * @param theme - 皮肤主题
+ */
+export const Timeline = React.forwardRef<
+  View,
+  {
+    theme: any;
+    text: string;
+    style: StyleProp<ViewStyle>;
+  }
+>(({ style }, ref) => {
+  return <View style={style} ref={ref}></View>;
+});
+
+/**
+ * 甘特Grid根据最小时间单位显示的当前时间线 显示的文本组件 （含在列头）
+ * @param text - 时间线具体值
+ * @param unit - 当前时间最小单位
+ * @param date - 当前时间
+ * @param columnWidth - 列宽
+ * @param theme - 皮肤主题
+ */
+export const TimeLineText = ({
+  theme,
+  text,
+  unit,
+  date,
+  columnWidth,
+}: {
+  text: string;
+  theme: any;
+  unit: DateUnit;
+  date: Date;
+  columnWidth: number;
+}) => (
+  <View
+    style={{
+      position: "absolute",
+      display: "flex",
+      flexDirection: "column",
+      width: 40,
+      height: 24,
+      bottom: -2.25,
+      left: calculateTimeOffsetForTimeLine(unit, columnWidth, date) - 20,
+    }}
+  >
+    <Text
+      style={{
+        color: theme?.colorTextAccent ?? "#F55523",
+        fontSize: 12,
+        width: 40,
+        height: 18,
+        lineHeight: 18,
+        fontWeight: "bold",
+        textAlign: "center",
+      }}
+    >
+      {text}
+    </Text>
+    <Avatar
+      size={7}
+      rounded
+      containerStyle={{
+        alignSelf: "center",
+        backgroundColor: theme?.colorTextAccent ?? "#F55523",
+      }}
+    />
+  </View>
+);