@seakoi/native-ui 1.0.0

package/dist/module/components/base/picker-view/utils/picker.js

@@ -0,0 +1,176 @@
+"use strict";
+
+export const getVisibleItemCount = n => {
+  if (n % 2 === 0) {
+    return n + 1;
+  }
+  return n;
+};
+
+/**
+ * 获取当前选项是什么数据
+ * @description cascade 联级选择，multiple 多列选择，single 单列选择
+ */
+
+export const getDataType = columns => {
+  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, columns, values) => {
+  switch (dataType) {
+    case 'cascade':
+      {
+        if (!values?.length) {
+          const data = findNextAllColumns(columns);
+          return [data.options, [], data.values];
+        }
+        return [findAllColumnsByValues(columns, values), [], values];
+      }
+    case 'multiple':
+      {
+        const mixOptions = [];
+        const defaultValues = [];
+        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];
+        const [firstColumn] = options[0];
+        const defaultValues = [firstColumn.value];
+        return [options, defaultValues, []];
+      }
+  }
+};
+
+/** 通过已有值找到联级选择的所有子级找到 */
+export const findAllColumnsByValues = (columns, values) => {
+  const options = [];
+  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 => {
+  const options = [];
+  const values = [];
+  const findNext = c => {
+    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, options) => {
+  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, options) => {
+  // 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, columns) => {
+  if (!value?.length) return [];
+  const dataType = getDataType(columns);
+  switch (dataType) {
+    case 'cascade':
+      {
+        const options = [];
+        let currentOptions = columns;
+        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[index];
+          return columnOptions?.find(item => item.value === v);
+        }).filter(Boolean);
+      }
+    default:
+      {
+        const options = columns;
+        const option = options.find(item => item.value === value[0]);
+        return option ? [option] : [];
+      }
+  }
+};
+
+/**
+ * 获取 columns 的默认值（每列的第一个选项）
+ */
+export const getDefaultValues = columns => {
+  const dataType = getDataType(columns);
+  switch (dataType) {
+    case 'cascade':
+      {
+        const data = findNextAllColumns(columns);
+        return data.values;
+      }
+    case 'multiple':
+      {
+        return columns.map(col => col[0]?.value).filter(Boolean);
+      }
+    default:
+      {
+        const firstOption = columns[0];
+        return firstOption ? [firstOption.value] : [];
+      }
+  }
+};

package/dist/module/components/base/portal/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+import { Portal as _Portal } from "./portal.js";
+import { portal } from "./portal-guard.js";
+import { PortalHost } from "./portal-host.js";
+export * from "./portal.js";
+export * from "./portal-context.js";
+export * from "./portal-host.js";
+export const Portal = Object.assign(_Portal, {
+  Host: PortalHost,
+  add: portal.add,
+  remove: portal.remove
+});

package/dist/module/components/base/portal/portal-consumer.js

@@ -0,0 +1,32 @@
+"use strict";
+
+import { useEffect, useRef } from 'react';
+export const PortalConsumer = ({
+  manager,
+  children
+}) => {
+  const keyRef = useRef(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/dist/module/components/base/portal/portal-context.js

@@ -0,0 +1,43 @@
+"use strict";
+
+import { createContext, useSyncExternalStore } from 'react';
+// 用于嵌套 PortalHost 的 context（传送到最近的 PortalHost）
+export const PortalContext = /*#__PURE__*/createContext(null);
+
+// 命名 PortalHost 的注册表
+const namedHostsRegistry = new Map();
+// 订阅者列表
+const listeners = new Set();
+
+// 通知所有订阅者
+const notifyListeners = () => {
+  listeners.forEach(listener => listener());
+};
+
+// 注册命名的 PortalHost
+export const registerHost = (name, methods) => {
+  namedHostsRegistry.set(name, methods);
+  notifyListeners();
+};
+
+// 注销命名的 PortalHost
+export const unregisterHost = name => {
+  namedHostsRegistry.delete(name);
+  notifyListeners();
+};
+
+// 获取命名的 PortalHost
+export const getHost = name => {
+  return namedHostsRegistry.get(name) ?? null;
+};
+
+// 订阅注册表变化
+const subscribe = callback => {
+  listeners.add(callback);
+  return () => listeners.delete(callback);
+};
+
+// 使用 hook 获取命名的 PortalHost（响应式）
+export const useNamedHost = name => {
+  return useSyncExternalStore(subscribe, () => getHost(name));
+};

package/dist/module/components/base/portal/portal-guard.js

@@ -0,0 +1,14 @@
+"use strict";
+
+import { DeviceEventEmitter } from 'react-native';
+import { NATIVE_UI_PORTAL_ADD_EVENT, NATIVE_UI_PORTAL_REMOVE_EVENT } from "../../../shared/constants/index.js";
+class PortalGuard {
+  nextKey = 10000;
+  add = e => {
+    const key = this.nextKey++;
+    DeviceEventEmitter.emit(NATIVE_UI_PORTAL_ADD_EVENT, e, key);
+    return key;
+  };
+  remove = key => DeviceEventEmitter.emit(NATIVE_UI_PORTAL_REMOVE_EVENT, key);
+}
+export const portal = new PortalGuard();

package/dist/module/components/base/portal/portal-host.js

@@ -0,0 +1,114 @@
+"use strict";
+
+import { 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/index.js";
+import { PortalContext, registerHost, unregisterHost } from "./portal-context.js";
+import { PortalManager } from "./portal-manager.js";
+import { usePortalHostStyles } from "./style/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PortalHost = ({
+  children,
+  name
+}) => {
+  const portalHostStyles = usePortalHostStyles();
+  const managerRef = useRef(null);
+  const nextKeyRef = useRef(0);
+  const queueRef = useRef([]);
+  const mount = useCallback((children, _key) => {
+    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, children) => {
+    if (managerRef.current) {
+      managerRef.current.update(key, children);
+    } else {
+      const op = {
+        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 => {
+    if (managerRef.current) {
+      managerRef.current.unmount(key);
+    } else {
+      queueRef.current.push({
+        type: 'unmount',
+        key
+      });
+    }
+  }, []);
+  const contextValue = useMemo(() => ({
+    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 = null;
+    let removeListener = 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 /*#__PURE__*/_jsxs(PortalContext.Provider, {
+    value: contextValue,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: portalHostStyles.container,
+      collapsable: false,
+      children: children
+    }), /*#__PURE__*/_jsx(PortalManager, {
+      ref: managerRef
+    })]
+  });
+};

package/dist/module/components/base/portal/portal-manager.js

@@ -0,0 +1,43 @@
+"use strict";
+
+import { memo, useCallback, useImperativeHandle, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export const PortalManager = /*#__PURE__*/memo(({
+  ref
+}) => {
+  const [portals, setPortals] = useState([]);
+  const mount = useCallback((key, children) => {
+    setPortals(prev => [...prev, {
+      key,
+      children
+    }]);
+  }, []);
+  const update = useCallback((key, children) => {
+    setPortals(prev => prev.map(item => item.key === key ? {
+      ...item,
+      children
+    } : item));
+  }, []);
+  const unmount = useCallback(key => {
+    setPortals(prev => prev.filter(item => item.key !== key));
+  }, []);
+  useImperativeHandle(ref, () => ({
+    mount,
+    update,
+    unmount
+  }), [mount, update, unmount]);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: portals.map(({
+      key,
+      children
+    }) => /*#__PURE__*/_jsx(View, {
+      collapsable: false,
+      pointerEvents: "box-none" // 允许点击穿透到下层
+      ,
+      style: StyleSheet.absoluteFill // 绝对定位覆盖全屏
+      ,
+      children: children
+    }, key))
+  });
+});

package/dist/module/components/base/portal/portal.js

@@ -0,0 +1,20 @@
+"use strict";
+
+import { use } from 'react';
+import { PortalConsumer } from "./portal-consumer.js";
+import { PortalContext, useNamedHost } from "./portal-context.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Portal = ({
+  children,
+  hostName
+}) => {
+  // 如果指定了 hostName，从注册表获取（响应式）
+  const namedManager = useNamedHost(hostName ?? '');
+  // 否则使用最近的 PortalHost
+  const contextManager = use(PortalContext);
+  const manager = hostName ? namedManager : contextManager;
+  return /*#__PURE__*/_jsx(PortalConsumer, {
+    manager: manager,
+    children: children
+  });
+};

package/dist/module/components/base/portal/style/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+export const usePortalHostStyles = createThemedStyles(() => ({
+  container: {
+    flex: 1
+  }
+}));

package/dist/module/components/base/portal/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+// 默认的 PortalHost 名称
+export const DEFAULT_PORTAL_HOST = 'default';

package/dist/module/components/base/radio/index.js

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

package/dist/module/components/base/radio/radio-card.js

@@ -0,0 +1,62 @@
+"use strict";
+
+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/index.js";
+import { Radio } from "./radio.js";
+import { RadioContext } from "./radio-context.js";
+import { useRadioCardStyles } from "./style/index.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const RadioCard = ({
+  variant = 'normal',
+  ...props
+}) => {
+  const theme = useTheme();
+  const styles = useRadioCardStyles();
+  const context = useContext(RadioContext);
+  const [radioIconState, setRadioIconState] = useState();
+  const isRibbonVariant = variant === 'ribbon';
+  const checkboxIconPlacement = props.radioIconPlacement ?? context.radioIconPlacement;
+  const isRibbonUncheckedDisabled = isRibbonVariant && radioIconState?.disabled && !radioIconState.checked;
+  const iconRender = useMemoizedFn(iconState => {
+    if (!iconState.checked) return null;
+    const borderColor = iconState.disabled ? theme.palette.brand4 : theme.palette.brand7;
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [styles.ribbon, {
+          borderColor,
+          borderRightColor: 'transparent',
+          borderBottomColor: 'transparent'
+        }]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.checkIcon,
+        children: /*#__PURE__*/_jsx(CheckOutlined, {
+          size: 20,
+          color: theme.palette.white
+        })
+      })]
+    });
+  });
+  return /*#__PURE__*/_jsx(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]
+  });
+};

package/dist/module/components/base/radio/radio-context.js

@@ -0,0 +1,4 @@
+"use strict";
+
+import { createContext } from 'react';
+export const RadioContext = /*#__PURE__*/createContext({});

package/dist/module/components/base/radio/radio-group.js

@@ -0,0 +1,28 @@
+"use strict";
+
+import { useControllableValue, useLatest } from 'ahooks';
+import React, { useMemo } from 'react';
+import { RadioContext } from "./radio-context.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const RadioGroup = props => {
+  const iconRender = useLatest(props.iconRender);
+  const [checkedValue, setCheckedValue] = useControllableValue(props, {
+    trigger: 'onChange',
+    valuePropName: 'value',
+    defaultValuePropName: 'defaultValue'
+  });
+  const contextValue = useMemo(() => {
+    return {
+      checkedValue,
+      block: props.block,
+      disabled: props.disabled,
+      radioIconPlacement: props.radioIconPlacement,
+      iconRender: iconRender.current,
+      onCheckedChange: setCheckedValue
+    };
+  }, [checkedValue, iconRender, props.block, props.disabled, props.radioIconPlacement, setCheckedValue]);
+  return /*#__PURE__*/_jsx(RadioContext.Provider, {
+    value: contextValue,
+    children: props.children
+  });
+};

package/dist/module/components/base/radio/radio.js

@@ -0,0 +1,106 @@
+"use strict";
+
+import { CheckCircleFilled, CircleOutlined } from '@seakoi/svg-icons';
+import { useControllableValue, useLatest, useMemoizedFn } from 'ahooks';
+import React, { useContext, useEffect, useMemo } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { Flex, Text } from "./../index.js";
+import { useTheme } from "../../../native-provider/index.js";
+import { RadioContext } from "./radio-context.js";
+import { useRadioStyles } from "./style/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Radio = ({
+  align = 'center',
+  titleNumberOfLines = 2,
+  descriptionNumberOfLines = 2,
+  ...props
+}) => {
+  const theme = useTheme();
+  const styles = useRadioStyles();
+  const context = useContext(RadioContext);
+  const onRadioIconStateChange = useLatest(props.onRadioIconStateChange);
+  const [innerChecked, setInnerChecked] = useControllableValue(props, {
+    trigger: 'onChecked',
+    valuePropName: 'checked',
+    defaultValuePropName: 'defaultChecked'
+  });
+  const isBlock = props.block ?? context.block;
+  const isDisabled = props.disabled ?? context.disabled;
+  const isConfigureValue = props.value || typeof props.value === 'number';
+  const iconPlacement = props.radioIconPlacement ?? context.radioIconPlacement;
+  const isChecked = useMemo(() => {
+    if (props.checked !== undefined) return props.checked;
+    if (isConfigureValue && (context.checkedValue || typeof context.checkedValue === 'number')) {
+      /** 使用 Radio.Group 包裹，且存在 value 值 */
+      return context.checkedValue === props.value;
+    }
+    return innerChecked;
+  }, [props.value, props.checked, innerChecked, isConfigureValue, context.checkedValue]);
+  const iconRender = useMemoizedFn(iconState => {
+    if (props.iconRender) return props.iconRender(iconState);
+    if (context.iconRender) return context.iconRender(iconState);
+    const RadioSvgIcon = !iconState.checked ? CircleOutlined : CheckCircleFilled;
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.icon,
+      children: [/*#__PURE__*/_jsx(RadioSvgIcon, {
+        size: 24,
+        color: iconState.checked ? iconState.disabled ? theme.palette.brand4 : theme.palette.brand7 : theme.palette.gray4
+      }), !!iconState.disabled && !iconState.checked && /*#__PURE__*/_jsx(View, {
+        style: styles.disabledIconBackground
+      })]
+    });
+  });
+  useEffect(() => {
+    if (onRadioIconStateChange.current) {
+      onRadioIconStateChange.current({
+        checked: isChecked,
+        disabled: isDisabled
+      });
+    }
+  }, [isChecked, onRadioIconStateChange, isDisabled]);
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    ref: props.ref,
+    activeOpacity: 0.8,
+    disabled: isDisabled,
+    hitSlop: props.hitSlop,
+    onLayout: props.onLayout,
+    onLongPress: props.onLongPress,
+    onPress: event => {
+      props.onPress?.(event);
+      setInnerChecked(prevState => !prevState);
+      if (isConfigureValue && context.onCheckedChange) {
+        context.onCheckedChange(props.value);
+      }
+    },
+    style: [styles.container, {
+      alignItems: align
+    }, isBlock && styles.fullContainer, iconPlacement === 'right' && styles.reverseContainerDirection, props.style],
+    children: [iconRender({
+      checked: isChecked,
+      disabled: isDisabled
+    }), /*#__PURE__*/_jsxs(Flex, {
+      align: "center",
+      style: [styles.wrapper, props.contentContainerStyle],
+      children: [props.contentPrefix, /*#__PURE__*/_jsxs(Flex, {
+        vertical: true,
+        align: "flex-start",
+        justify: "flex-start",
+        gap: theme.spacing.xxs,
+        style: styles.wrapper,
+        children: [/*#__PURE__*/_jsx(Text, {
+          size: 16,
+          style: props.titleStyle,
+          color: theme.palette.fontGray1,
+          numberOfLines: titleNumberOfLines,
+          children: props.title
+        }), !!props.description && /*#__PURE__*/_jsx(Text, {
+          size: 14,
+          style: props.descriptionStyle,
+          color: theme.palette.fontGray2,
+          numberOfLines: descriptionNumberOfLines,
+          children: props.description
+        })]
+      })]
+    })]
+  });
+};