@seakoi/native-ui 1.0.0

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

@@ -0,0 +1,223 @@
+import type {
+  Column,
+  PickerOption,
+  PickerOptionCascade,
+  PickerOptionType,
+  PickerValue,
+  PickerViewProps,
+} from '../types';
+
+export const getVisibleItemCount = (n: number) => {
+  if (n % 2 === 0) {
+    return n + 1;
+  }
+  return n;
+};
+
+/**
+ * 获取当前选项是什么数据
+ * @description cascade 联级选择，multiple 多列选择，single 单列选择
+ */
+
+export const getDataType = (columns: Column[]): PickerOptionType => {
+  const firstColumn = columns[0];
+
+  if (firstColumn) {
+    if ('children' in firstColumn) {
+      return 'cascade';
+    }
+
+    if ('options' in firstColumn || Array.isArray(firstColumn)) {
+      return 'multiple';
+    }
+  }
+
+  return 'single';
+};
+
+/**
+ * 构建选项
+ */
+export const buildOptions = (
+  dataType: PickerOptionType,
+  columns: Column[],
+  values?: PickerValue[],
+): [PickerOption[][], PickerValue[], PickerValue[]] => {
+  switch (dataType) {
+    case 'cascade': {
+      if (!values?.length) {
+        const data = findNextAllColumns(columns as PickerOptionCascade[]);
+
+        return [data.options, [], data.values];
+      }
+
+      return [
+        findAllColumnsByValues(columns as PickerOptionCascade[], values),
+        [],
+        values,
+      ];
+    }
+    case 'multiple': {
+      const mixOptions: PickerOption[][] = [];
+      const defaultValues: PickerValue[] = [];
+
+      columns.forEach(column => {
+        if (Array.isArray(column)) {
+          mixOptions.push(column);
+          defaultValues.push(column[0].value);
+        }
+      });
+
+      return [mixOptions, defaultValues, []];
+    }
+    default: {
+      if (!columns || columns.length === 0) {
+        return [[], [], []];
+      }
+      const options = [columns as PickerOption[]];
+      const [firstColumn] = options[0];
+      const defaultValues = [firstColumn.value];
+      return [options, defaultValues, []];
+    }
+  }
+};
+
+/** 通过已有值找到联级选择的所有子级找到 */
+export const findAllColumnsByValues = (
+  columns: PickerOptionCascade[],
+  values: PickerValue[],
+) => {
+  const options: PickerOption[][] = [];
+
+  let currentColumn = columns;
+
+  values.forEach(value => {
+    options.push(currentColumn);
+
+    const nextIndex = currentColumn.findIndex(item => item.value === value);
+
+    currentColumn = currentColumn[nextIndex]?.children || [];
+  });
+
+  return options;
+};
+
+/** 把联级选择的所有子级找到 */
+export const findNextAllColumns = (columns: PickerOptionCascade[]) => {
+  const options: PickerOption[][] = [];
+  const values: PickerValue[] = [];
+
+  const findNext = (c: PickerOptionCascade[]) => {
+    if (c.length) {
+      options.push(c);
+      values.push(c[0].value);
+
+      const cc = c[0].children || [];
+
+      findNext(cc);
+    }
+  };
+
+  findNext(columns);
+
+  return {
+    options,
+    values,
+  };
+};
+
+// 构建选中的值
+export const buildSelectedValue = (
+  values: PickerValue[],
+  options: PickerOption[][],
+): [PickerValue[], Column[]] => {
+  const selectedColumns = values.map((value, index) => {
+    const vIndex = options[index].findIndex(item => item.value === value);
+    return options[index][vIndex];
+  });
+  return [values, selectedColumns];
+};
+
+export const findDefaultValue = (value: PickerValue, options: PickerOption[]) => {
+  // value 是否在 options 内
+  const valueIndex = options.findIndex(item => item.value === value);
+
+  if (valueIndex < 0 || options[valueIndex].disabled) {
+    // 重新找一个
+    const index = options.findIndex(item => !item.disabled);
+
+    if (index < 0) {
+      return null;
+    }
+
+    return options[index].value;
+  }
+
+  return value;
+};
+
+/**
+ * 根据 value 和 columns 计算对应的 options
+ */
+export const findOptionsByValue = (
+  value: PickerValue[],
+  columns: PickerViewProps['columns'],
+): PickerOption[] => {
+  if (!value?.length) return [];
+
+  const dataType = getDataType(columns);
+
+  switch (dataType) {
+    case 'cascade': {
+      const options: PickerOption[] = [];
+      let currentOptions = columns as PickerOptionCascade[];
+
+      for (const v of value) {
+        const option = currentOptions.find(item => item.value === v);
+        if (option) {
+          options.push(option);
+          currentOptions = option.children || [];
+        }
+      }
+      return options;
+    }
+    case 'multiple': {
+      return value
+        .map((v, index) => {
+          const columnOptions = (columns as PickerOption[][])[index];
+          return columnOptions?.find(item => item.value === v);
+        })
+        .filter(Boolean) as PickerOption[];
+    }
+    default: {
+      const options = columns as PickerOption[];
+      const option = options.find(item => item.value === value[0]);
+      return option ? [option] : [];
+    }
+  }
+};
+
+/**
+ * 获取 columns 的默认值（每列的第一个选项）
+ */
+export const getDefaultValues = (
+  columns: PickerViewProps['columns'],
+): PickerValue[] => {
+  const dataType = getDataType(columns);
+
+  switch (dataType) {
+    case 'cascade': {
+      const data = findNextAllColumns(columns as PickerOptionCascade[]);
+      return data.values;
+    }
+    case 'multiple': {
+      return (columns as PickerOption[][])
+        .map(col => col[0]?.value)
+        .filter(Boolean);
+    }
+    default: {
+      const firstOption = (columns as PickerOption[])[0];
+      return firstOption ? [firstOption.value] : [];
+    }
+  }
+};

package/src/components/base/portal/index.ts

@@ -0,0 +1,14 @@
+import { Portal as _Portal } from './portal';
+import { portal } from './portal-guard';
+import { PortalHost } from './portal-host';
+
+export * from './portal';
+export * from './portal-context';
+export * from './portal-host';
+export type * from './types';
+
+export const Portal = Object.assign(_Portal, {
+  Host: PortalHost,
+  add: portal.add,
+  remove: portal.remove,
+});

package/src/components/base/portal/portal-consumer.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useRef } from 'react';
+
+import { type PortalConsumerProps } from './types';
+
+export const PortalConsumer: React.FC<PortalConsumerProps> = ({
+  manager,
+  children,
+}) => {
+  const keyRef = useRef<number | null>(null);
+
+  // 挂载 & 卸载
+  useEffect(() => {
+    // 只在尚未挂载时挂载
+    if (manager && keyRef.current === null) {
+      keyRef.current = manager.mount(children);
+    }
+
+    return () => {
+      if (keyRef.current !== null) {
+        manager?.unmount(keyRef.current);
+        keyRef.current = null;
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [manager]);
+
+  // 更新 children
+  useEffect(() => {
+    if (keyRef.current !== null) {
+      manager?.update(keyRef.current, children);
+    }
+  }, [children, manager]);
+
+  return null;
+};

package/src/components/base/portal/portal-context.ts

@@ -0,0 +1,48 @@
+import { createContext, type ReactNode, useSyncExternalStore } from 'react';
+
+export interface PortalMethods {
+  mount: (children: ReactNode) => number;
+  update: (key: number, children: ReactNode) => void;
+  unmount: (key: number) => void;
+}
+
+// 用于嵌套 PortalHost 的 context（传送到最近的 PortalHost）
+export const PortalContext = createContext<PortalMethods | null>(null);
+
+// 命名 PortalHost 的注册表
+const namedHostsRegistry = new Map<string, PortalMethods>();
+// 订阅者列表
+const listeners = new Set<() => void>();
+
+// 通知所有订阅者
+const notifyListeners = () => {
+  listeners.forEach(listener => listener());
+};
+
+// 注册命名的 PortalHost
+export const registerHost = (name: string, methods: PortalMethods) => {
+  namedHostsRegistry.set(name, methods);
+  notifyListeners();
+};
+
+// 注销命名的 PortalHost
+export const unregisterHost = (name: string) => {
+  namedHostsRegistry.delete(name);
+  notifyListeners();
+};
+
+// 获取命名的 PortalHost
+export const getHost = (name: string): PortalMethods | null => {
+  return namedHostsRegistry.get(name) ?? null;
+};
+
+// 订阅注册表变化
+const subscribe = (callback: () => void) => {
+  listeners.add(callback);
+  return () => listeners.delete(callback);
+};
+
+// 使用 hook 获取命名的 PortalHost（响应式）
+export const useNamedHost = (name: string): PortalMethods | null => {
+  return useSyncExternalStore(subscribe, () => getHost(name));
+};

package/src/components/base/portal/portal-guard.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+import { DeviceEventEmitter } from 'react-native';
+
+import {
+  NATIVE_UI_PORTAL_ADD_EVENT,
+  NATIVE_UI_PORTAL_REMOVE_EVENT,
+} from '#shared/constants';
+
+class PortalGuard {
+  private nextKey = 10000;
+
+  add = (e: ReactNode) => {
+    const key = this.nextKey++;
+    DeviceEventEmitter.emit(NATIVE_UI_PORTAL_ADD_EVENT, e, key);
+    return key;
+  };
+
+  remove = (key: number) =>
+    DeviceEventEmitter.emit(NATIVE_UI_PORTAL_REMOVE_EVENT, key);
+}
+
+export const portal = new PortalGuard();

package/src/components/base/portal/portal-host.tsx

@@ -0,0 +1,128 @@
+import { type ReactNode, useCallback, useEffect, useMemo, useRef } from 'react';
+import { DeviceEventEmitter, View } from 'react-native';
+
+import {
+  NATIVE_UI_PORTAL_ADD_EVENT,
+  NATIVE_UI_PORTAL_REMOVE_EVENT,
+} from '#shared/constants';
+
+import {
+  PortalContext,
+  type PortalMethods,
+  registerHost,
+  unregisterHost,
+} from './portal-context';
+import { PortalManager } from './portal-manager';
+import { usePortalHostStyles } from './style';
+import {
+  type Operation,
+  type PortalHostProps,
+  type PortalManagerRef,
+} from './types';
+
+export const PortalHost: React.FC<PortalHostProps> = ({ children, name }) => {
+  const portalHostStyles = usePortalHostStyles();
+
+  const managerRef = useRef<PortalManagerRef | null>(null);
+  const nextKeyRef = useRef(0);
+  const queueRef = useRef<Operation[]>([]);
+
+  const mount = useCallback((children: ReactNode, _key?: number) => {
+    const key = _key ?? nextKeyRef.current++;
+    if (managerRef.current) {
+      managerRef.current.mount(key, children);
+    } else {
+      queueRef.current.push({ type: 'mount', key, children });
+    }
+    return key;
+  }, []);
+
+  const update = useCallback((key: number, children: ReactNode) => {
+    if (managerRef.current) {
+      managerRef.current.update(key, children);
+    } else {
+      const op: Operation = { type: 'update', key, children };
+      const index = queueRef.current.findIndex(
+        o => o.type === 'mount' || (o.type === 'update' && o.key === key),
+      );
+      if (index > -1) {
+        queueRef.current[index] = op;
+      } else {
+        queueRef.current.push(op);
+      }
+    }
+  }, []);
+
+  const unmount = useCallback((key: number) => {
+    if (managerRef.current) {
+      managerRef.current.unmount(key);
+    } else {
+      queueRef.current.push({ type: 'unmount', key });
+    }
+  }, []);
+
+  const contextValue = useMemo<PortalMethods>(
+    () => ({ mount, update, unmount }),
+    [mount, update, unmount],
+  );
+
+  useEffect(() => {
+    const manager = managerRef.current;
+    const queue = queueRef.current;
+
+    // 处理队列中积压的操作
+    while (queue.length && manager) {
+      const action = queue.pop();
+      if (!action) continue;
+
+      switch (action.type) {
+        case 'mount':
+          manager.mount(action.key, action.children);
+          break;
+        case 'update':
+          manager.update(action.key, action.children);
+          break;
+        case 'unmount':
+          manager.unmount(action.key);
+          break;
+      }
+    }
+
+    // 只有默认 PortalHost（没有 name）才监听全局事件
+    // 这样 Portal.add() 只会在默认 host 中显示
+    let addListener: { remove: () => void } | null = null;
+    let removeListener: { remove: () => void } | null = null;
+
+    // 如果有 name，注册到全局注册表（用于 <Portal hostName="xxx"> 指定传送）
+    if (name) {
+      registerHost(name, contextValue);
+    } else {
+      addListener = DeviceEventEmitter.addListener(
+        NATIVE_UI_PORTAL_ADD_EVENT,
+        mount,
+      );
+      removeListener = DeviceEventEmitter.addListener(
+        NATIVE_UI_PORTAL_REMOVE_EVENT,
+        unmount,
+      );
+    }
+
+    return () => {
+      if (name) {
+        unregisterHost(name);
+      }
+      addListener?.remove();
+      removeListener?.remove();
+    };
+  }, [mount, unmount, name, contextValue]);
+
+  return (
+    <PortalContext.Provider value={contextValue}>
+      {/* Need collapsable=false here to clip the elevations, otherwise they appear above Portal components */}
+      <View style={portalHostStyles.container} collapsable={false}>
+        {children}
+      </View>
+      <PortalManager ref={managerRef} />
+    </PortalContext.Provider>
+  );
+};

package/src/components/base/portal/portal-manager.tsx

@@ -0,0 +1,52 @@
+import {
+  memo,
+  type ReactNode,
+  type RefAttributes,
+  useCallback,
+  useImperativeHandle,
+  useState,
+} from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { type PortalItem, type PortalManagerRef } from './types';
+
+export const PortalManager: React.FC<RefAttributes<PortalManagerRef>> = memo(
+  ({ ref }) => {
+    const [portals, setPortals] = useState<PortalItem[]>([]);
+
+    const mount = useCallback((key: number, children: ReactNode) => {
+      setPortals(prev => [...prev, { key, children }]);
+    }, []);
+
+    const update = useCallback((key: number, children: ReactNode) => {
+      setPortals(prev =>
+        prev.map(item => (item.key === key ? { ...item, children } : item)),
+      );
+    }, []);
+
+    const unmount = useCallback((key: number) => {
+      setPortals(prev => prev.filter(item => item.key !== key));
+    }, []);
+
+    useImperativeHandle(ref, () => ({ mount, update, unmount }), [
+      mount,
+      update,
+      unmount,
+    ]);
+
+    return (
+      <>
+        {portals.map(({ key, children }) => (
+          <View
+            key={key}
+            collapsable={false}
+            pointerEvents="box-none" // 允许点击穿透到下层
+            style={StyleSheet.absoluteFill} // 绝对定位覆盖全屏
+          >
+            {children}
+          </View>
+        ))}
+      </>
+    );
+  },
+);

package/src/components/base/portal/portal.tsx

@@ -0,0 +1,16 @@
+import { use } from 'react';
+
+import { PortalConsumer } from './portal-consumer';
+import { PortalContext, useNamedHost } from './portal-context';
+import { type PortalProps } from './types';
+
+export const Portal: React.FC<PortalProps> = ({ children, hostName }) => {
+  // 如果指定了 hostName，从注册表获取（响应式）
+  const namedManager = useNamedHost(hostName ?? '');
+  // 否则使用最近的 PortalHost
+  const contextManager = use(PortalContext);
+
+  const manager = hostName ? namedManager : contextManager;
+
+  return <PortalConsumer manager={manager}>{children}</PortalConsumer>;
+};

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

@@ -0,0 +1,7 @@
+import { createThemedStyles } from '#native-provider';
+
+export const usePortalHostStyles = createThemedStyles(() => ({
+  container: {
+    flex: 1,
+  },
+}));

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

@@ -0,0 +1,37 @@
+import { type PropsWithChildren, type ReactNode } from 'react';
+
+import { type PortalMethods } from './portal-context';
+
+// 默认的 PortalHost 名称
+export const DEFAULT_PORTAL_HOST = 'default';
+
+export interface PortalHostProps extends PropsWithChildren {
+  // PortalHost 的名称，用于指定 Portal 传送目标
+  name?: string;
+}
+
+export interface PortalProps {
+  children?: ReactNode;
+  // 目标 PortalHost 的名称，不指定则传送到最近的 PortalHost
+  hostName?: string;
+}
+
+export interface PortalConsumerProps extends PropsWithChildren {
+  manager: PortalMethods | null;
+}
+
+export interface PortalItem {
+  key: number;
+  children: ReactNode;
+}
+
+export interface PortalManagerRef {
+  mount: (key: number, children: ReactNode) => void;
+  update: (key: number, children: ReactNode) => void;
+  unmount: (key: number) => void;
+}
+
+export type Operation =
+  | { type: 'mount'; key: number; children: ReactNode }
+  | { type: 'update'; key: number; children: ReactNode }
+  | { type: 'unmount'; key: number };

package/src/components/base/radio/index.ts

@@ -0,0 +1,12 @@
+import { Radio as _Radio } from './radio';
+import { RadioCard } from './radio-card';
+import { RadioGroup } from './radio-group';
+
+export * from './radio';
+export * from './radio-card';
+export * from './radio-group';
+
+export const Radio = Object.assign(_Radio, {
+  Group: RadioGroup,
+  Card: RadioCard,
+});

package/src/components/base/radio/radio-card.tsx

@@ -0,0 +1,87 @@
+import { CheckOutlined } from '@seakoi/svg-icons';
+import { useMemoizedFn } from 'ahooks';
+import React, { useContext, useState } from 'react';
+import { View } from 'react-native';
+
+import { useTheme } from '#native-provider';
+
+import { Radio, type RadioProps } from './radio';
+import { RadioContext, type RadioIconState } from './radio-context';
+import { useRadioCardStyles } from './style';
+
+export interface RadioCardProps extends RadioProps {
+  /** Radio.Card 图标样式 */
+  variant?: 'normal' | 'ribbon';
+}
+export const RadioCard: React.FC<RadioCardProps> = ({
+  variant = 'normal',
+  ...props
+}) => {
+  const theme = useTheme();
+  const styles = useRadioCardStyles();
+  const context = useContext(RadioContext);
+
+  const [radioIconState, setRadioIconState] = useState<RadioIconState>();
+
+  const isRibbonVariant = variant === 'ribbon';
+  const checkboxIconPlacement =
+    props.radioIconPlacement ?? context.radioIconPlacement;
+
+  const isRibbonUncheckedDisabled =
+    isRibbonVariant && radioIconState?.disabled && !radioIconState.checked;
+  const iconRender = useMemoizedFn((iconState: RadioIconState) => {
+    if (!iconState.checked) return null;
+    const borderColor = iconState.disabled
+      ? theme.palette.brand4
+      : theme.palette.brand7;
+    return (
+      <>
+        <View
+          style={[
+            styles.ribbon,
+            {
+              borderColor,
+              borderRightColor: 'transparent',
+              borderBottomColor: 'transparent',
+            },
+          ]}
+        />
+        <View style={styles.checkIcon}>
+          <CheckOutlined size={20} color={theme.palette.white} />
+        </View>
+      </>
+    );
+  });
+  return (
+    <Radio
+      {...props}
+      titleStyle={[
+        isRibbonVariant && theme.fonts.medium.size16,
+        isRibbonUncheckedDisabled && { color: theme.palette.fontGray5 },
+        props.titleStyle,
+      ]}
+      descriptionStyle={[
+        !isRibbonVariant && { color: theme.palette.fontGray3 },
+        isRibbonUncheckedDisabled && { color: theme.palette.fontGray5 },
+        props.descriptionStyle,
+      ]}
+      iconRender={isRibbonVariant ? iconRender : props.iconRender}
+      radioIconPlacement={
+        isRibbonVariant ? 'left' : (checkboxIconPlacement ?? 'right')
+      }
+      onRadioIconStateChange={iconState => {
+        setRadioIconState(iconState);
+        props.onRadioIconStateChange?.(iconState);
+      }}
+      style={[
+        styles.radio,
+        radioIconState?.checked && {
+          borderColor: radioIconState.disabled
+            ? theme.palette.brand4
+            : theme.palette.brand7,
+        },
+        props.style,
+      ]}
+    />
+  );
+};