@seakoi/native-ui 1.1.3 → 1.3.0

package/src/components/base/carousel/carousel-item.tsx

@@ -1,35 +0,0 @@
-import type { FC, PropsWithChildren } from 'react';
-import { View } from 'react-native';
-
-import type { CarouselItemProps } from './types';
-
-const FULL_SIZE_STYLE = { height: '100%', width: '100%' } as const;
-
-/**
- * 轮播项组件
- *
- * 用于包裹轮播图中的每一项内容，自动填充父容器的宽高。
- *
- * @example
- * ```tsx
- * <Carousel>
- *   <Carousel.Item>
- *     <Image source={image1} />
- *   </Carousel.Item>
- *   <Carousel.Item>
- *     <Image source={image2} />
- *   </Carousel.Item>
- * </Carousel>
- * ```
- *
- * @param props - 组件属性
- * @param props.children - 轮播项内容
- * @param props.style - 容器样式
- * @returns 轮播项组件
- */
-export const CarouselItem: FC<PropsWithChildren<CarouselItemProps>> = ({
-  children,
-  style,
-}) => {
-  return <View style={[FULL_SIZE_STYLE, style]}>{children}</View>;
-};

package/src/components/base/carousel/constants.ts

@@ -1,19 +0,0 @@
-/**
- * 轮播图动画时长（毫秒）
- */
-export const CAROUSEL_ANIMATION_DURATION = 300;
-
-/**
- * 橡皮筋效果阻尼系数
- */
-export const RUBBERBAND_DAMPING = 0.35;
-
-/**
- * 手势识别最小移动距离（像素）
- */
-export const GESTURE_MIN_DISTANCE = 5;
-
-/**
- * 速度投影系数（用于计算惯性滑动距离）
- */
-export const VELOCITY_PROJECTION_FACTOR = 2000;

package/src/components/base/carousel/hooks/use-carousel-indicator.tsx

@@ -1,84 +0,0 @@
-import { useMemoizedFn } from 'ahooks';
-import { StyleSheet, View } from 'react-native';
-
-import type { CarouselProps } from '../types';
-
-interface UseCarouselIndicatorParams {
-  indicator: CarouselProps['indicator'];
-  indicatorProps: CarouselProps['indicatorProps'];
-  total: number;
-  current: number;
-  activeColor: string;
-  inactiveColor: string;
-  styles: {
-    indicatorContainer: object;
-    indicatorDot: object;
-    indicatorDotActive: object;
-  };
-}
-
-/**
- * 轮播图指示器渲染 Hook
- *
- * 负责渲染轮播图底部的指示器（小圆点），支持自定义指示器或使用默认样式。
- * 当轮播项总数小于等于 1 时，不显示指示器。
- *
- * @param params - Hook 参数配置
- * @param params.indicator - 指示器配置（false 表示不显示，函数表示自定义渲染）
- * @param params.indicatorProps - 指示器属性配置（颜色、样式）
- * @param params.total - 轮播项总数
- * @param params.current - 当前激活的索引
- * @param params.activeColor - 激活状态的指示器颜色
- * @param params.inactiveColor - 非激活状态的指示器颜色
- * @param params.styles - 指示器样式对象
- *
- * @returns Hook 返回值
- * @returns renderIndicator - 渲染指示器的方法，返回 ReactNode 或 null
- */
-export const useCarouselIndicator = (params: UseCarouselIndicatorParams) => {
-  const {
-    indicator,
-    indicatorProps,
-    total,
-    current,
-    activeColor,
-    inactiveColor,
-    styles,
-  } = params;
-
-  const renderIndicator = useMemoizedFn(() => {
-    if (indicator === false) return null;
-    if (total <= 1) return null;
-
-    if (typeof indicator === 'function') {
-      return indicator(total, current);
-    }
-
-    const dotActiveColor = indicatorProps?.color ?? activeColor;
-
-    return (
-      <View
-        style={StyleSheet.flatten([
-          styles.indicatorContainer,
-          indicatorProps?.style,
-        ])}
-      >
-        {Array.from({ length: total }, (_, i) => {
-          const isActive = i === current;
-          return (
-            <View
-              key={i}
-              style={StyleSheet.flatten([
-                styles.indicatorDot,
-                { backgroundColor: isActive ? dotActiveColor : inactiveColor },
-                isActive && styles.indicatorDotActive,
-              ])}
-            />
-          );
-        })}
-      </View>
-    );
-  });
-
-  return { renderIndicator };
-};

package/src/components/base/carousel/hooks/use-carousel-slides.tsx

@@ -1,131 +0,0 @@
-import { useMemoizedFn } from 'ahooks';
-import { clamp } from 'lodash-es';
-import { type ReactElement, useMemo } from 'react';
-import { View, type ViewStyle } from 'react-native';
-
-import type { CarouselItemProps } from '../types';
-import { isRenderPropChildren, normalizeChildren } from '../utils';
-
-interface UseCarouselSlidesParams {
-  children:
-    | ReactElement<CarouselItemProps>
-    | ReactElement<CarouselItemProps>[]
-    | ((index: number) => ReactElement<CarouselItemProps>)
-    | undefined;
-  total: number;
-  virtualRange: {
-    start: number;
-    end: number;
-    isVirtual: boolean;
-  } | null;
-  loopEnabled: boolean;
-  clonesBefore: number;
-  slideWrapperStyle: ViewStyle;
-  spacerStyles: {
-    leading: ViewStyle;
-    trailing: ViewStyle;
-    leadingSize: number;
-    trailingSize: number;
-  } | null;
-  slideStyles: {
-    slide: ViewStyle;
-  };
-}
-
-/**
- * 轮播图滑块渲染 Hook
- *
- * 负责渲染轮播图的滑块内容，支持静态子组件和 render prop 两种方式。
- * 实现虚拟渲染优化，仅渲染可见范围内的滑块，并处理循环播放时的克隆逻辑。
- * 为虚拟渲染添加前后占位空间，确保滚动位置正确。
- *
- * @param params - Hook 参数配置
- * @param params.children - 轮播项内容（静态子组件或 render prop 函数）
- * @param params.total - 轮播项总数
- * @param params.virtualRange - 虚拟渲染范围（start、end、isVirtual）
- * @param params.loopEnabled - 是否启用循环播放
- * @param params.clonesBefore - 循环播放时前置克隆节点数量
- * @param params.slideWrapperStyle - 滑块包装器样式
- * @param params.spacerStyles - 虚拟渲染占位空间样式
- * @param params.slideStyles - 滑块样式对象
- *
- * @returns Hook 返回值
- * @returns staticSlides - 静态滑块数组（仅在非 render prop 模式下有值）
- * @returns renderSlides - 渲染滑块的方法，返回 ReactNode 或 null
- */
-export const useCarouselSlides = (params: UseCarouselSlidesParams) => {
-  const {
-    children,
-    total,
-    virtualRange,
-    loopEnabled,
-    clonesBefore,
-    slideWrapperStyle,
-    spacerStyles,
-    slideStyles,
-  } = params;
-
-  const staticSlides = useMemo(() => {
-    if (isRenderPropChildren(children)) return [];
-    return normalizeChildren(children, total);
-  }, [children, total]);
-
-  const getIndexFromExtIndex = useMemoizedFn((extIndex: number) => {
-    if (!loopEnabled) return clamp(extIndex, 0, total - 1);
-    if (extIndex < clonesBefore) {
-      return (((extIndex - clonesBefore) % total) + total) % total;
-    }
-    if (extIndex >= clonesBefore + total) {
-      return (extIndex - clonesBefore - total) % total;
-    }
-    return extIndex - clonesBefore;
-  });
-
-  const renderSlides = useMemoizedFn(() => {
-    if (!virtualRange) return null;
-
-    const { start, end, isVirtual } = virtualRange;
-
-    const getElementForExtIndex = (extIndex: number) => {
-      const logicalIndex = loopEnabled
-        ? getIndexFromExtIndex(extIndex)
-        : clamp(extIndex, 0, total - 1);
-
-      if (isRenderPropChildren(children)) return children(logicalIndex);
-      return staticSlides[logicalIndex];
-    };
-
-    const slideElements: ReactElement[] = [];
-    for (let extIndex = start; extIndex <= end; extIndex += 1) {
-      const element = getElementForExtIndex(extIndex);
-      if (!element) continue;
-      slideElements.push(
-        <View key={extIndex} style={[slideStyles.slide, slideWrapperStyle]}>
-          {element}
-        </View>,
-      );
-    }
-
-    const leadSpacer =
-      isVirtual && spacerStyles && spacerStyles.leadingSize > 0 ? (
-        <View style={spacerStyles.leading} />
-      ) : null;
-    const trailSpacer =
-      isVirtual && spacerStyles && spacerStyles.trailingSize > 0 ? (
-        <View style={spacerStyles.trailing} />
-      ) : null;
-
-    return (
-      <>
-        {leadSpacer}
-        {slideElements}
-        {trailSpacer}
-      </>
-    );
-  });
-
-  return {
-    staticSlides,
-    renderSlides,
-  };
-};

package/src/components/base/carousel/utils.ts

@@ -1,55 +0,0 @@
-import { Children, type ReactElement } from 'react';
-
-import type { CarouselItemProps, CarouselProps } from './types';
-
-export const isRenderPropChildren = (
-  children: CarouselProps['children'],
-): children is (index: number) => ReactElement<CarouselItemProps> => {
-  return typeof children === 'function';
-};
-
-export const normalizeChildren = (
-  children: CarouselProps['children'],
-  total: number,
-): ReactElement[] => {
-  if (!children) return [];
-  if (isRenderPropChildren(children)) {
-    return Array.from({ length: total }, (_, i) => children(i));
-  }
-  return Children.toArray(children) as ReactElement[];
-};
-
-export const getDefaultTotal = (children: CarouselProps['children']) => {
-  if (!children) return 0;
-  if (isRenderPropChildren(children)) return 0;
-  return Array.isArray(children) ? children.length : 1;
-};
-
-/**
- * 计算轮播边界索引范围
- *
- * @param params - 参数配置
- * @param params.total - 轮播项总数
- * @param params.slideSize - 单个滑块所占百分比 (0-100)
- * @param params.trackOffset - 轨道偏移百分比 (0-100)
- * @param params.stuckAtBoundary - 是否在边界处卡住
- * @returns 边界索引范围 { min, max }
- */
-export const getBoundaryIndexRange = (params: {
-  total: number;
-  slideSize: number;
-  trackOffset: number;
-  stuckAtBoundary: boolean;
-}) => {
-  const { total, slideSize, trackOffset, stuckAtBoundary } = params;
-
-  if (total <= 0) return { min: 0, max: 0 };
-  if (!stuckAtBoundary) return { min: 0, max: total - 1 };
-
-  const slideRatio = slideSize / 100;
-  const offsetRatio = trackOffset / 100;
-
-  const min = 0 + offsetRatio / (slideRatio || 1);
-  const max = total - 1 - (1 - slideRatio - offsetRatio) / (slideRatio || 1);
-  return { min, max };
-};

package/src/components/base/date-picker-view/date-range-picker-view.tsx

@@ -1,191 +0,0 @@
-import dayjs from 'dayjs';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-
-import {
-  Button,
-  DateTimePicker,
-  Flex,
-  ModalHeader,
-  type ModalHeaderBaseProps,
-  Text,
-} from '#components/base';
-
-import { useDateRangePickerStyles } from './style';
-import type { DateTimePickerProps } from './types';
-import { sortRange } from './utils';
-
-export interface DateRangePickerViewProps
-  extends Omit<DateTimePickerProps, 'value' | 'defaultValue' | 'onChange'>,
-    ModalHeaderBaseProps {
-  /** 当前值（受控） */
-  value?: [Date, Date];
-  /** 默认值 (非受控) */
-  defaultValue?: [Date, Date];
-  /** 值变化时的回调 */
-  onChange?: (value: [Date, Date]) => void;
-  /** start 开始时间的占位文案 */
-  startText?: string;
-  /** end 结束时间的占位文案 */
-  endText?: string;
-  /** 确定按钮文案 */
-  confirmText?: string;
-  /** 重置按钮文案 */
-  resetText?: string;
-  /**
-   * 自定义格式化函数。
-   * 配置参考 https://day.js.org/docs/zh-CN/display/format
-   */
-  formatter: string | ((date: Date) => string);
-}
-
-type Selected = 'start' | 'end';
-
-export const DateRangePickerView: React.FC<DateRangePickerViewProps> = ({
-  onClose,
-  min,
-  max,
-  value,
-  defaultValue,
-  onChange,
-  title = '自定义日期',
-  startText = '请选择开始时间',
-  endText = '请选择结束时间',
-  confirmText = '确定',
-  resetText = '重置',
-  formatter,
-}) => {
-  const styles = useDateRangePickerStyles();
-
-  /** 当前编辑的是 start 还是 end */
-  const [selected, setSelected] = useState<Selected>('start');
-
-  /** 初始化 draft */
-  const [draft, setDraft] = useState<[Date?, Date?]>(() => {
-    if (value) return sortRange(value);
-    if (defaultValue) return sortRange(defaultValue);
-    return [new Date(), undefined];
-  });
-
-  const _startText =
-    (draft[0] &&
-      (typeof formatter === 'string'
-        ? dayjs(draft[0]).format(formatter)
-        : formatter(draft[0]))) ||
-    startText;
-  const _endText =
-    (draft[1] &&
-      (typeof formatter === 'string'
-        ? dayjs(draft[1]).format(formatter)
-        : formatter(draft[1]))) ||
-    endText;
-
-  /** Picker 当前值 */
-  const pickerValue = (selected === 'start' ? draft[0] : draft[1]) ?? new Date();
-
-  /** Picker 可选范围 - 优化依赖 */
-  const minDate = useMemo(() => {
-    return selected === 'end' ? (draft[0] ?? min) : min;
-  }, [selected, draft, min]);
-
-  const maxDate = useMemo(() => {
-    return selected === 'start' ? (draft[1] ?? max) : max;
-  }, [selected, draft, max]);
-
-  /** Picker 改 draft */
-  const onChangePicker = useCallback(
-    (date: Date) => {
-      setDraft(prev => {
-        const index = selected === 'start' ? 0 : 1;
-        // 如果日期相同，不更新
-        if (prev[index]?.getTime() === date.getTime()) {
-          return prev;
-        }
-        const next: [Date?, Date?] = [prev[0], prev[1]];
-        next[index] = date;
-        return next;
-      });
-    },
-    [selected],
-  );
-
-  const changeSelected = useCallback((nextSelected: Selected) => {
-    setSelected(nextSelected);
-    setDraft(prev => {
-      const next: [Date?, Date?] = [prev[0], prev[1]];
-      const index = nextSelected === 'start' ? 0 : 1;
-
-      next[index] ??= new Date();
-      return next;
-    });
-  }, []);
-
-  /** 重置 */
-  const onReset = useCallback(() => {
-    setDraft([new Date(), undefined]);
-    setSelected('start');
-  }, []);
-
-  /** 是否可以确定 */
-  const canConfirm = Boolean(draft[0] && draft[1]);
-
-  /** 确定：唯一对外出口 */
-  const onConfirm = useCallback(() => {
-    if (!draft[0] || !draft[1]) return;
-
-    // start > end 自动修正
-    onChange?.(sortRange([draft[0], draft[1]]));
-  }, [draft, onChange]);
-
-  // 受控模式：检测外部 value 变化
-  useEffect(() => {
-    if (value) {
-      const sorted = sortRange(value);
-
-      setDraft(sorted);
-    }
-  }, [value]);
-
-  return (
-    <Flex vertical align="stretch" style={styles.container}>
-      {/* Header */}
-      <ModalHeader title={title} onClose={onClose} />
-
-      <Flex>
-        <Button
-          variant="outline"
-          theme={selected === 'start' ? 'primary' : 'default'}
-          block
-          text={_startText}
-          onPress={() => changeSelected('start')}
-        />
-        <Text>—</Text>
-        <Button
-          variant="outline"
-          theme={selected === 'end' ? 'primary' : 'default'}
-          block
-          text={_endText}
-          onPress={() => changeSelected('end')}
-        />
-      </Flex>
-
-      {/* Picker */}
-      <DateTimePicker
-        value={pickerValue}
-        min={minDate}
-        max={maxDate}
-        onChange={onChangePicker}
-      />
-
-      {/* Footer */}
-      <Button.Group block>
-        <Button size="large" text={resetText} theme="secondary" onPress={onReset} />
-        <Button
-          size="large"
-          text={confirmText}
-          onPress={onConfirm}
-          disabled={!canConfirm}
-        />
-      </Button.Group>
-    </Flex>
-  );
-};

package/src/components/base/date-picker-view/date-time-picker.tsx

@@ -1,34 +0,0 @@
-import { useControllableValue } from 'ahooks';
-import { useMemo } from 'react';
-
-import { PickerView } from '#components/base';
-
-import { useDateTimePicker } from './hooks/use-date-time-picker';
-import type { DateTimePickerProps } from './types';
-
-export const DateTimePicker: React.FC<DateTimePickerProps> = ({
-  mode = 'Y-D',
-  min,
-  max,
-  ...restProps
-}) => {
-  // 确保有一个稳定的默认日期值
-  const defaultDate = useMemo(() => new Date(), []);
-
-  const [value, onChange] = useControllableValue(restProps, {
-    defaultValue: defaultDate,
-  });
-
-  // 确保 value 始终有值，避免 undefined 传递给 hook
-  const safeValue = value ?? defaultDate;
-
-  const [values, columns, onChangePicker] = useDateTimePicker({
-    mode,
-    value: safeValue,
-    onChange,
-    min,
-    max,
-  });
-
-  return <PickerView columns={columns} value={values} onChange={onChangePicker} />;
-};