@seakoi/native-ui 1.1.3 → 1.2.0

package/dist/typescript/components/base/tag/style/index.d.ts

@@ -0,0 +1,61 @@
+export declare const useTagStyles: (options?: import("../../../../shared/utils").AnyObject | undefined) => {
+    tag: {};
+    large: {
+        paddingHorizontal: number;
+        paddingVertical: number;
+        borderRadius: number;
+    };
+    medium: {
+        paddingHorizontal: number;
+        paddingVertical: number;
+        borderRadius: number;
+    };
+    small: {
+        paddingHorizontal: number;
+        paddingVertical: number;
+        borderRadius: number;
+    };
+    disabled: {
+        opacity: number;
+    };
+    'font-small': {
+        fontSize: number;
+    };
+    'font-medium': {
+        fontSize: number;
+    };
+    'font-large': {
+        fontSize: number;
+    };
+    filled: {
+        backgroundColor: any;
+    };
+    'text-filled': {
+        color: any;
+    };
+    outlined: {
+        borderColor: any;
+        borderWidth: number;
+    };
+    'text-outlined': {
+        color: any;
+    };
+    solid: {
+        backgroundColor: any;
+    };
+    'text-solid': {
+        color: string;
+    };
+};
+export declare const useTagGroupStyles: (options?: import("../../../../shared/utils").AnyObject | undefined) => {
+    container: {
+        flexDirection: "row";
+        alignItems: "center";
+        flexWrap: "wrap";
+    };
+    vertical: {
+        flexDirection: "column";
+        alignItems: "stretch";
+    };
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/typescript/components/base/tag/style/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/base/tag/style/index.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEvB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;CAY5B,CAAC"}

package/dist/typescript/components/base/tag/tag-context.d.ts

@@ -0,0 +1,3 @@
+import type { TagContextValue } from './types';
+export declare const TagContext: import("react").Context<TagContextValue>;
+//# sourceMappingURL=tag-context.d.ts.map

package/dist/typescript/components/base/tag/tag-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-context.d.ts","sourceRoot":"","sources":["../../../../../src/components/base/tag/tag-context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,UAAU,0CAGrB,CAAC"}

package/dist/typescript/components/base/tag/tag-group.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { TagGroupProps } from './types';
+export declare const TagGroup: React.FC<TagGroupProps>;
+//# sourceMappingURL=tag-group.d.ts.map

package/dist/typescript/components/base/tag/tag-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-group.d.ts","sourceRoot":"","sources":["../../../../../src/components/base/tag/tag-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuB5C,CAAC"}

package/dist/typescript/components/base/tag/tag.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type TagProps } from './types';
+export declare const Tag: React.FC<TagProps>;
+//# sourceMappingURL=tag.d.ts.map

package/dist/typescript/components/base/tag/tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../../../src/components/base/tag/tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAC;AAO5C,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AACxC,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAyClC,CAAC"}

package/dist/typescript/components/base/tag/types.d.ts

@@ -0,0 +1,48 @@
+import type { PropsWithChildren } from 'react';
+import type { GestureResponderEvent, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { AnyObject } from '#shared/utils/types';
+export interface TagProps {
+    /** 标签文本 */
+    text?: string;
+    /** 标签主题色 */
+    color?: string;
+    /** 结构形态 */
+    variant?: 'filled' | 'solid' | 'outlined';
+    /** 标签样式 */
+    style?: StyleProp<ViewStyle>;
+    /** 标签内容样式 */
+    textStyle?: StyleProp<TextStyle>;
+    /** 标签主题色 */
+    theme?: 'primary' | 'default' | 'danger';
+    /** 标签尺寸 */
+    size?: 'small' | 'medium' | 'large';
+    /** 标签是否可关闭 */
+    closable?: boolean;
+    /** 标签图标 */
+    icon?: React.ReactElement<AnyObject>;
+    /** 标签内容 */
+    child?: React.ReactNode;
+    /** 标签跳转链接 */
+    href?: string;
+    /** 标签是否禁用 */
+    disabled?: boolean;
+    /** 标签跳转链接目标 */
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    /** 标签点击 事件 */
+    onPress?: (event: GestureResponderEvent) => void;
+}
+export interface TagGroupProps extends PropsWithChildren, TagContextValue {
+    /** 容器样式 */
+    style?: StyleProp<ViewStyle>;
+    /** 容器样式 */
+    gap?: number;
+    /** 容器样式 */
+    direction?: 'horizontal' | 'vertical';
+}
+export interface TagContextValue {
+    /** 按钮标签的尺寸 */
+    size?: 'small' | 'medium' | 'large';
+    /** 按钮标签的禁用状态 */
+    disabled?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/typescript/components/base/tag/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/base/tag/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACT,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAErD,MAAM,WAAW,QAAQ;IACvB,WAAW;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,WAAW;IACX,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC;IAE1C,WAAW;IACX,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B,aAAa;IACb,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAEjC,YAAY;IACZ,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IAEzC,WAAW;IACX,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEpC,cAAc;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,WAAW;IACX,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IAErC,WAAW;IACX,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB,aAAa;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,aAAa;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,eAAe;IACf,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAEjD,cAAc;IACd,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAClD;AAED,MAAM,WAAW,aAAc,SAAQ,iBAAiB,EAAE,eAAe;IACvE,WAAW;IACX,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B,WAAW;IACX,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,WAAW;IACX,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACvC;AAED,MAAM,WAAW,eAAe;IAC9B,cAAc;IACd,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,gBAAgB;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seakoi/native-ui",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "type": "module",
   "keywords": [
     "ui-design",

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

@@ -0,0 +1,80 @@
+import { View, type ViewStyle } from 'react-native';
+
+import type { CarouselProps } from './types';
+
+interface CarouselIndicatorProps {
+  /** 指示器配置（false 表示不显示，函数表示自定义渲染） */
+  indicator: CarouselProps['indicator'];
+  /** 指示器属性配置（颜色、样式） */
+  indicatorProps: CarouselProps['indicatorProps'];
+  /** 轮播项总数 */
+  total: number;
+  /** 当前激活的索引 */
+  current: number;
+  /** 激活状态的指示器颜色 */
+  activeColor: string;
+  /** 非激活状态的指示器颜色 */
+  inactiveColor: string;
+  /** 指示器样式对象 */
+  styles: {
+    indicatorContainer: ViewStyle;
+    indicatorDot: ViewStyle;
+    indicatorDotActive: ViewStyle;
+  };
+}
+
+/**
+ * 轮播图指示器渲染组件
+ *
+ * 负责渲染轮播图底部的指示器（小圆点），支持自定义指示器或使用默认样式。
+ * 当轮播项总数小于等于 1 时，不显示指示器。
+ *
+ * @param props - 组件属性配置
+ * @param props.indicator - 指示器配置（false 表示不显示，函数表示自定义渲染）
+ * @param props.indicatorProps - 指示器属性配置（颜色、样式）
+ * @param props.total - 轮播项总数
+ * @param props.current - 当前激活的索引
+ * @param props.activeColor - 激活状态的指示器颜色
+ * @param props.inactiveColor - 非激活状态的指示器颜色
+ * @param props.styles - 指示器样式对象
+ *
+ * @returns 渲染的指示器内容或 null
+ */
+export const CarouselIndicator = (props: CarouselIndicatorProps) => {
+  const {
+    indicator,
+    indicatorProps,
+    total,
+    current,
+    activeColor,
+    inactiveColor,
+    styles,
+  } = props;
+
+  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={[styles.indicatorContainer, indicatorProps?.style]}>
+      {Array.from({ length: total }, (_, i) => {
+        const isActive = i === current;
+        return (
+          <View
+            key={i}
+            style={[
+              styles.indicatorDot,
+              { backgroundColor: isActive ? dotActiveColor : inactiveColor },
+              isActive && styles.indicatorDotActive,
+            ]}
+          />
+        );
+      })}
+    </View>
+  );
+};

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

@@ -0,0 +1,177 @@
+import { useMemoizedFn } from 'ahooks';
+import { clamp } from 'lodash-es';
+import { type ReactNode, useMemo } from 'react';
+import { View, type ViewStyle } from 'react-native';
+
+interface CarouselSlidesProps<Data = unknown> {
+  /** 数据源数组 */
+  data: Data[];
+  /** 渲染每一项的函数 */
+  renderItem: (item: Data, index: number) => ReactNode;
+  /** 轮播项总数 */
+  total: number;
+  /** 虚拟渲染范围（start、end、isVirtual） */
+  virtualRange: {
+    start: number;
+    end: number;
+    isVirtual: boolean;
+  } | null;
+  /** 是否启用循环播放 */
+  loopEnabled: boolean;
+  /** 循环播放时前置克隆节点数量 */
+  clonesBefore: number;
+  /** 滑动方向 */
+  direction: 'horizontal' | 'vertical';
+  /** 单个滑块的像素大小 */
+  slidePixels: number;
+  /** 扩展后的总数（包含克隆节点） */
+  extTotal: number;
+}
+
+/**
+ * 轮播图滑块渲染组件
+ *
+ * 负责渲染轮播图的滑块内容，使用 data + renderItem 模式。
+ * 实现虚拟渲染优化，仅渲染可见范围内的滑块，并处理循环播放时的克隆逻辑。
+ * 为虚拟渲染添加前后占位空间，确保滚动位置正确。
+ *
+ * @template Data - 数据项类型
+ * @param props - 组件属性配置
+ * @param props.data - 数据源数组
+ * @param props.renderItem - 渲染每一项的函数
+ * @param props.total - 轮播项总数
+ * @param props.virtualRange - 虚拟渲染范围（start、end、isVirtual）
+ * @param props.loopEnabled - 是否启用循环播放
+ * @param props.clonesBefore - 循环播放时前置克隆节点数量
+ * @param props.direction - 滑动方向
+ * @param props.slidePixels - 单个滑块的像素大小
+ * @param props.extTotal - 扩展后的总数（包含克隆节点）
+ *
+ * @returns 渲染的滑块内容或 null
+ */
+export const CarouselSlides = <Data = unknown,>(
+  props: CarouselSlidesProps<Data>,
+) => {
+  const {
+    data,
+    renderItem,
+    total,
+    virtualRange,
+    loopEnabled,
+    clonesBefore,
+    direction,
+    slidePixels,
+    extTotal,
+  } = props;
+
+  // 计算滑块包装器样式
+  const slideWrapperStyle: ViewStyle = useMemo(() => {
+    return direction === 'horizontal'
+      ? { width: slidePixels, height: '100%' }
+      : { height: slidePixels, width: '100%' };
+  }, [direction, slidePixels]);
+
+  // 计算虚拟渲染的占位空间样式
+  const spacerStyles = useMemo(() => {
+    if (!virtualRange) return null;
+
+    const { start, end } = virtualRange;
+    const leadingSize = start * slidePixels;
+    const trailingSize = (extTotal - end - 1) * slidePixels;
+
+    return {
+      leading:
+        direction === 'horizontal'
+          ? { width: leadingSize }
+          : { height: leadingSize },
+      trailing:
+        direction === 'horizontal'
+          ? { width: trailingSize }
+          : { height: trailingSize },
+      leadingSize,
+      trailingSize,
+    };
+  }, [virtualRange, slidePixels, extTotal, direction]);
+
+  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 slideElements = useMemo(() => {
+    if (!virtualRange) return null;
+
+    const { start, end } = virtualRange;
+    const elements: ReactNode[] = [];
+
+    const getElementForExtIndex = (extIndex: number) => {
+      const logicalIndex = loopEnabled
+        ? getIndexFromExtIndex(extIndex)
+        : clamp(extIndex, 0, total - 1);
+
+      const item = data[logicalIndex];
+      return renderItem(item, logicalIndex);
+    };
+
+    for (let extIndex = start; extIndex <= end; extIndex += 1) {
+      const element = getElementForExtIndex(extIndex);
+      if (!element) continue;
+      elements.push(
+        <View key={extIndex} style={slideWrapperStyle}>
+          {element}
+        </View>,
+      );
+    }
+
+    return elements;
+  }, [
+    virtualRange,
+    loopEnabled,
+    total,
+    data,
+    renderItem,
+    slideWrapperStyle,
+    getIndexFromExtIndex,
+  ]);
+
+  // 前置占位空间
+  const leadSpacer = useMemo(() => {
+    if (
+      !virtualRange?.isVirtual ||
+      !spacerStyles ||
+      spacerStyles.leadingSize <= 0
+    ) {
+      return null;
+    }
+    return <View style={spacerStyles.leading} />;
+  }, [virtualRange?.isVirtual, spacerStyles]);
+
+  // 后置占位空间
+  const trailSpacer = useMemo(() => {
+    if (
+      !virtualRange?.isVirtual ||
+      !spacerStyles ||
+      spacerStyles.trailingSize <= 0
+    ) {
+      return null;
+    }
+    return <View style={spacerStyles.trailing} />;
+  }, [virtualRange?.isVirtual, spacerStyles]);
+
+  if (!virtualRange) return null;
+
+  return (
+    <>
+      {leadSpacer}
+      {slideElements}
+      {trailSpacer}
+    </>
+  );
+};