@seakoi/native-ui 1.1.0 → 1.1.2

package/src/components/base/address-picker-view/index.ts

@@ -0,0 +1,2 @@
+export * from './address-picker-view';
+export type * from './types';

package/src/components/base/address-picker-view/style/index.ts

@@ -0,0 +1,59 @@
+import { createThemedStyles } from '#native-provider';
+
+export const useAddressPickerStyles = createThemedStyles(
+  (theme, options: { height?: number }) => ({
+    container: {
+      backgroundColor: theme.palette.white,
+      borderTopLeftRadius: theme.roundness.lg,
+      borderTopRightRadius: theme.roundness.lg,
+      overflow: 'hidden',
+    },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingHorizontal: theme.spacing.lg,
+      paddingVertical: theme.spacing.md,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.palette.gray1,
+    },
+    title: {
+      fontSize: 16,
+      fontWeight: '600',
+      color: theme.palette.fontGray1,
+    },
+    closeIcon: {
+      padding: 4,
+    },
+    pickerContainer: {
+      height: options?.height ?? 200, // 默认高度，确保 Picker 可见
+      backgroundColor: theme.palette.gray1, // 可选：背景色
+    },
+    footer: {
+      flexDirection: 'row',
+      padding: theme.spacing.lg,
+      gap: theme.spacing.md,
+      borderTopWidth: 1,
+      borderTopColor: theme.palette.gray1,
+    },
+    button: {
+      flex: 1,
+    },
+    columnHeaderContainer: {
+      flexDirection: 'row',
+      borderBottomWidth: 1,
+      borderBottomColor: theme.palette.gray1,
+      backgroundColor: theme.palette.gray1,
+    },
+    columnHeader: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: 8,
+    },
+    columnHeaderText: {
+      fontSize: 12,
+      color: theme.palette.fontGray2,
+    },
+  }),
+);

package/src/components/base/address-picker-view/types.ts

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type {
+  Column,
+  PickerOptionCascade,
+  PickerValue,
+} from '../picker-view/types';
+
+export type AddressPickerSelectType = 'province' | 'city' | 'district' | 'street';
+
+export interface AddressPickerViewProps {
+  /** 容器样式 */
+  style?: StyleProp<ViewStyle>;
+  /** 当前选中值 */
+  value?: PickerValue[];
+  /** 默认选中值 */
+  defaultValue?: PickerValue[];
+  /** 选项列表 */
+  columns: Column[];
+  /** 标题 */
+  title?: ReactNode;
+  /** 确认按钮文字 */
+  confirmText?: string;
+  /** 取消按钮文字 */
+  cancelText?: string;
+  /** 值改变回调 */
+  onChange?: (value: PickerValue[], options: PickerOptionCascade[]) => void;
+  /** 确认回调 */
+  onConfirm?: (value: PickerValue[], options: PickerOptionCascade[]) => void;
+  /** 取消回调 */
+  onCancel?: () => void;
+  /** 关闭回调 */
+  onClose?: () => void;
+  /** 选择类型（控制显示层级） */
+  selectType?: AddressPickerSelectType;
+}
+
+export interface AddressPickerColumnProps {
+  value?: PickerValue;
+  onChange?: (value: PickerValue) => void;
+  options: PickerValue[];
+  itemHeight: number;
+}

package/src/components/base/address-picker-view/utils.ts

@@ -0,0 +1,29 @@
+import type {
+  Column,
+  PickerOptionCascade,
+  PickerValue,
+} from '../picker-view/types';
+
+export const getSelectedOptions = (
+  cols: Column[],
+  vals: PickerValue[],
+): PickerOptionCascade[] => {
+  const options: PickerOptionCascade[] = [];
+  let currentCols = cols as PickerOptionCascade[];
+
+  if (!vals || !currentCols) return [];
+
+  for (const val of vals) {
+    if (!currentCols) {
+      break;
+    }
+    const target = currentCols.find(col => col.value === val);
+    if (target) {
+      options.push(target);
+      currentCols = target.children as PickerOptionCascade[];
+    } else {
+      break;
+    }
+  }
+  return options;
+};

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

@@ -1,11 +1,35 @@
-import type { PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import { View } from 'react-native';
 
 import type { CarouselItemProps } from './types';
 
-export const CarouselItem: React.FC<PropsWithChildren<CarouselItemProps>> = ({
+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={[{ height: '100%', width: '100%' }, style]}>{children}</View>;
+  return <View style={[FULL_SIZE_STYLE, style]}>{children}</View>;
 };