@beppla/tapas-ui 1.5.12 → 1.5.13

package/components/Dropdown/InputDropdown.tsx

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

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

@@ -1,302 +0,0 @@
-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>
-);