@seakoi/native-ui 1.0.0 → 1.1.1

package/src/components/base/address-picker-view/address-picker-view.tsx

@@ -0,0 +1,202 @@
+import { CloseOutlined } from '@seakoi/svg-icons';
+import { useControllableValue, useMemoizedFn } from 'ahooks';
+import React, { useMemo, useState } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { Button, PickerView, Text } from '#components/base';
+import type {
+  Column,
+  PickerOptionCascade,
+  PickerValue,
+} from '#components/base/picker-view';
+import { useTheme } from '#native-provider';
+
+import { useAddressPickerStyles } from './style';
+import type { AddressPickerSelectType, AddressPickerViewProps } from './types';
+import { getSelectedOptions } from './utils';
+
+const HIT_SLOP = { top: 10, bottom: 10, left: 10, right: 10 };
+
+const ADDRESS_PICKER_CONFIG: Record<
+  AddressPickerSelectType,
+  { depth: number; title: string }
+> = {
+  province: { depth: 1, title: '请选择省' },
+  city: { depth: 2, title: '请选择省市' },
+  district: { depth: 3, title: '请选择省市区' },
+  street: { depth: 4, title: '请选择省市区、街道' },
+};
+
+export const AddressPickerView: React.FC<AddressPickerViewProps> = props => {
+  const {
+    confirmText = '确定',
+    cancelText = '取消',
+    onCancel,
+    onConfirm,
+    columns,
+    selectType = 'district',
+    title,
+    onClose,
+    style,
+    ...restProps
+  } = props;
+  const theme = useTheme();
+
+  const defaultTitle = ADDRESS_PICKER_CONFIG[selectType].title;
+  const finalTitle = title ?? defaultTitle;
+  const visibleItemCount = 5;
+  const itemHeight = 42;
+
+  const styles = useAddressPickerStyles({ height: itemHeight * visibleItemCount });
+
+  /** 管理已确认的值（与父组件同步） 受控与非受控*/
+  const [value, onChange] = useControllableValue<PickerValue[]>(props, {
+    defaultValue: [],
+  });
+
+  /** 管理选择器的值（内部状态*/
+  const [pickerValue, setPickerValue] = useState<PickerValue[]>(value || []);
+  /** 管理上一次确认的值（用于判断是否需要更新内部状态） */
+  const [prevValue, setPrevValue] = useState(value);
+  if (value !== prevValue) {
+    setPrevValue(value);
+    setPickerValue(value || []);
+  }
+
+  /**
+   * @param v 选择器的值
+   * @description 当选择器的值发生变化时，更新内部状态
+   * @returns void
+   *  */
+  const handlePickerChange = useMemoizedFn((v: PickerValue[]) => {
+    setPickerValue(v);
+  });
+  /**
+   * @description 确认选择
+   * @returns void
+   * */
+  const handleConfirm = useMemoizedFn(() => {
+    const options = getSelectedOptions(columns, pickerValue);
+    onChange(pickerValue, options);
+    onConfirm?.(pickerValue, options);
+  });
+  /**
+   * @description 取消选择
+   * @returns void
+   * */
+  const handleCancel = useMemoizedFn(() => {
+    setPickerValue(value || []);
+    onCancel?.();
+  });
+
+  const handleClose = useMemoizedFn(() => {
+    onClose?.();
+  });
+
+  /**
+   * @description 剪裁列
+   * @param columns 列
+   * @param selectType 选择类型
+   * @returns 剪裁后的列
+   * */
+  const prunedColumns = useMemo(() => {
+    const depth = ADDRESS_PICKER_CONFIG[selectType].depth || 3;
+
+    const prune = (cols: Column[], currentDepth: number): Column[] => {
+      if (!cols) {
+        return [];
+      }
+      if (currentDepth >= depth) {
+        return cols.map(col => {
+          /** 剪裁列，移除子项 */
+          if (
+            typeof col === 'object' &&
+            col !== null &&
+            !Array.isArray(col) &&
+            'children' in col
+          ) {
+            const { children, ...rest } = col as PickerOptionCascade;
+            return rest;
+          }
+          return col;
+        });
+      }
+      /** 递归剪裁子项 */
+      return cols.map(col => {
+        if (
+          typeof col === 'object' &&
+          col !== null &&
+          !Array.isArray(col) &&
+          'children' in col
+        ) {
+          const option = col as PickerOptionCascade;
+          if (option.children) {
+            return {
+              ...option,
+              children: prune(
+                option.children,
+                currentDepth + 1,
+              ) as PickerOptionCascade[],
+            };
+          }
+          return option;
+        }
+        return col;
+      });
+    };
+
+    return prune(columns, 1);
+  }, [columns, selectType]);
+  return (
+    <View style={[styles.container, style]}>
+      <SafeAreaView edges={['bottom', 'left', 'right']}>
+        {/* Header */}
+        <View style={styles.header}>
+          {React.isValidElement(finalTitle) ? (
+            finalTitle
+          ) : (
+            <Text style={styles.title}>{finalTitle}</Text>
+          )}
+          <TouchableOpacity
+            onPress={handleClose}
+            style={styles.closeIcon}
+            hitSlop={HIT_SLOP}
+          >
+            <CloseOutlined size={20} color={theme.palette.fontGray3} />
+          </TouchableOpacity>
+        </View>
+        {/* Picker Content */}
+        <View style={styles.pickerContainer}>
+          <PickerView
+            {...restProps}
+            columns={prunedColumns}
+            value={pickerValue}
+            onChange={handlePickerChange}
+            itemHeight={itemHeight}
+          />
+        </View>
+
+        {/* Footer */}
+        <View style={styles.footer}>
+          <Button
+            text={cancelText}
+            variant="base"
+            theme="secondary"
+            size="large"
+            onPress={handleCancel}
+            buttonStyle={styles.button}
+          />
+          <Button
+            text={confirmText}
+            variant="base"
+            theme="primary"
+            size="large"
+            onPress={handleConfirm}
+            buttonStyle={styles.button}
+          />
+        </View>
+      </SafeAreaView>
+    </View>
+  );
+};

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

@@ -0,0 +1,35 @@
+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>;
+};