@seakoi/native-ui 1.0.0 → 1.1.0

package/src/components/base/carousel/style/index.ts

@@ -0,0 +1,42 @@
+import { createThemedStyles } from '#native-provider';
+
+export const useCarouselStyles = createThemedStyles(theme => ({
+  container: {
+    overflow: 'hidden',
+    height: '100%',
+    width: '100%',
+  },
+  track: {
+    flex: 1,
+    overflow: 'hidden',
+  },
+  trackInner: {
+    flexGrow: 0,
+    flexShrink: 0,
+  },
+  slide: {
+    flexGrow: 0,
+    flexShrink: 0,
+    overflow: 'hidden',
+  },
+  indicatorContainer: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 8,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 6,
+  },
+  indicatorDot: {
+    width: 6,
+    height: 6,
+    borderRadius: theme.roundness.full,
+    backgroundColor: theme.palette.fontGray5,
+    opacity: 0.6,
+  },
+  indicatorDotActive: {
+    opacity: 1,
+  },
+}));

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

@@ -0,0 +1,134 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+/** Carousel 组件暴露的实例方法 */
+export interface CarouselRef {
+  /** 滚动到指定索引 */
+  swipeTo: (index: number) => void;
+  /** 滚动到下一页 */
+  swipeNext: () => void;
+  /** 滚动到上一页 */
+  swipePrev: () => void;
+}
+
+/** Carousel 组件属性 */
+export interface CarouselProps {
+  /**
+   * 初始展示的索引
+   * @default 0
+   */
+  defaultIndex?: number;
+
+  /**
+   * 是否允许手势滑动
+   * @default true
+   */
+  allowTouchMove?: boolean;
+
+  /**
+   * 是否自动轮播
+   * - `false`: 不自动轮播
+   * - `true`: 正向自动轮播
+   * - `'reverse'`: 反向自动轮播
+   * @default false
+   */
+  autoplay?: boolean | 'reverse';
+
+  /**
+   * 自动轮播间隔，单位：毫秒
+   * @default 3000
+   */
+  autoplayInterval?: number;
+
+  /**
+   * 是否开启循环播放
+   * @default false
+   */
+  loop?: boolean;
+
+  /**
+   * 滑动方向
+   * @default 'horizontal'
+   */
+  direction?: 'horizontal' | 'vertical';
+
+  /** 索引变化回调 */
+  onIndexChange?: (index: number) => void;
+
+  /** 指示器配置 */
+  indicatorProps?: {
+    /** 指示器激活状态颜色 */
+    color?: string;
+    /** 指示器容器样式 */
+    style?: StyleProp<ViewStyle>;
+  };
+
+  /**
+   * 自定义指示器
+   * - `false`: 不展示指示器
+   * - 函数：接收总数与当前索引，返回自定义节点
+   */
+  indicator?: false | ((total: number, current: number) => ReactNode);
+
+  /**
+   * 单个滑块所占轨道宽（高）度百分比
+   * 取值范围 0 ~ 100
+   * @default 100
+   */
+  slideSize?: number;
+
+  /**
+   * 轨道两侧预留的偏移量百分比
+   * 用于在两端留出空白
+   * @default 0
+   */
+  trackOffset?: number;
+
+  /**
+   * 是否在边界处卡住
+   * 开启后滑动到边缘不会完全滑出可视区域
+   * @default true
+   */
+  stuckAtBoundary?: boolean;
+
+  /**
+   * 是否开启橡皮筋效果
+   * 关闭后到达边界时不再有超出回弹
+   * @default true
+   */
+  rubberband?: boolean;
+
+  /**
+   * 虚拟渲染时前后额外渲染的滑块个数
+   * 仅在使用 render prop 且传入 total 时生效
+   * @default 2
+   */
+  virtualOverscan?: number;
+
+  /**
+   * 总滑块数量
+   * 使用 render prop children 时需要手动传入
+   */
+  total?: number;
+
+  /**
+   * 滑块内容
+   * - 直接传入 CarouselItem 列表
+   * - 或者传入 render prop，根据索引返回节点
+   */
+  children?:
+    | ReactElement<CarouselItemProps>
+    | ReactElement<CarouselItemProps>[]
+    | ((index: number) => ReactElement<CarouselItemProps>);
+
+  /** 容器样式 */
+  style?: StyleProp<ViewStyle>;
+}
+
+/** CarouselItem 组件属性 */
+export interface CarouselItemProps {
+  /** 滑块内容 */
+  children?: ReactNode;
+  /** 滑块容器样式 */
+  style?: StyleProp<ViewStyle>;
+}

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

@@ -0,0 +1,26 @@
+import { Children, type ReactElement } from 'react';
+
+import type { CarouselItemProps, CarouselProps } from '#components/base';
+
+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;
+};

package/src/components/base/index.ts

@@ -6,6 +6,7 @@ export * from './back-to-top';
 export * from './badge';
 export * from './button';
 export * from './calendar';
+export * from './carousel';
 export * from './cell';
 export * from './checkbox';
 export * from './collapse';