@seakoi/native-ui 1.0.0

package/src/components/base/form/style/form-item.ts

@@ -0,0 +1,27 @@
+import { createThemedStyles } from '#native-provider';
+
+export const useFormItemStyles = createThemedStyles(theme => ({
+  contentContainer: {
+    width: '100%',
+  },
+  label: {
+    color: theme.palette.fontGray1,
+  },
+  control: {
+    flex: 1,
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'flex-end',
+    position: 'relative',
+  },
+  mark: {
+    color: theme.palette.error7,
+    marginLeft: theme.spacing.xxs,
+  },
+  verticalLayout: {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+  },
+}));

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

@@ -0,0 +1,12 @@
+import { createThemedStyles } from '#native-provider';
+
+export * from './form-item';
+
+export const useFormStyles = createThemedStyles(() => ({
+  container: {
+    flex: 1,
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+}));

package/src/components/base/index.ts

@@ -0,0 +1,31 @@
+/** 导出基础组件 */
+export * from './address-picker';
+export * from './async-boundary';
+export * from './avatar';
+export * from './back-to-top';
+export * from './badge';
+export * from './button';
+export * from './calendar';
+export * from './cell';
+export * from './checkbox';
+export * from './collapse';
+export * from './countdown';
+export * from './date-picker';
+export * from './date-picker-view';
+export * from './divider';
+export * from './flex';
+export * from './form';
+export * from './input';
+export * from './link';
+export * from './loading';
+export * from './modal';
+export * from './nav-bar';
+export * from './picker';
+export * from './picker-view';
+export * from './portal';
+export * from './radio';
+export * from './result';
+export * from './surface';
+export * from './switch';
+export * from './tabs';
+export * from './text';

package/src/components/base/input/base-input.tsx

@@ -0,0 +1,240 @@
+import { CloseOutlined } from '@seakoi/svg-icons';
+import { useControllableValue, useLatest, useUpdateEffect } from 'ahooks';
+import React, { type RefAttributes, useEffect, useRef, useState } from 'react';
+import {
+  Animated,
+  Platform,
+  type StyleProp,
+  TextInput as NativeTextInput,
+  type TextInputProps as NativeTextProps,
+  type TextStyle,
+  TouchableOpacity,
+  type ViewStyle,
+} from 'react-native';
+
+import { Flex, Text } from '#components/base';
+import { useTheme } from '#native-provider';
+import { useMergeRefs } from '#shared/hooks';
+import { safetyRenderChildren } from '#shared/utils';
+
+import { useBaseInputStyles } from './style';
+
+export interface BaseInputProps
+  extends Omit<NativeTextProps, 'style'>,
+    RefAttributes<NativeTextInput> {
+  /** 是否禁用编辑 */
+  disabled?: boolean;
+  /** 允许清除输入内容 */
+  allowClear?: boolean | { clearIcon: React.ReactElement };
+  /** 输入框前缀内容 */
+  prefix?: React.ReactNode;
+  /** 输入框后缀内容 */
+  suffix?: React.ReactNode;
+  /** 小数点位数 */
+  decimalPlaces?: number;
+  /** 自定义输入的模式
+   * 1、alphanumeric：字母数字
+   * 2、alphanumericPlusMinus：字母数字加+ -
+   */
+  customInputMode?: 'alphanumeric' | 'alphanumericPlusMinus';
+  /** 自定义输入模式回调函数 */
+  onCustomInputMode?: (
+    defaultNormalizedValue: string,
+    customInputModeNormalizedValue: string,
+  ) => void;
+  /** 输入框样式 */
+  inputStyle?: StyleProp<TextStyle>;
+  /** 容器样式 */
+  style?: StyleProp<ViewStyle>;
+  /** 点击清除图标时的回调函数 */
+  onClear?: () => void;
+  /** 自定义格式化文本函数 */
+  formatValue?: (normalizedValue: string, originalValue: string) => string;
+  /** 焦点变化回调函数 */
+  onFocusChange?: (focused: boolean) => void;
+}
+
+export const BaseInput: React.FC<BaseInputProps> = ({
+  decimalPlaces = 2,
+  ...props
+}) => {
+  const theme = useTheme();
+  const styles = useBaseInputStyles();
+
+  const inputRef = useRef<NativeTextInput>(null);
+  const mergeRefs = useMergeRefs([inputRef, props.ref]);
+  const [inputIsFocused, setInputIsFocused] = useState(false);
+  const elementState = useRef({ pointerDown: false });
+  const onFocusChangeRef = useLatest(props.onFocusChange);
+
+  const [inputValue, setInputValue] = useControllableValue<string | undefined>(
+    props,
+    {
+      trigger: 'onChangeText',
+      defaultValue: props.defaultValue,
+    },
+  );
+
+  const animateValue = inputValue && inputIsFocused ? 1 : 0;
+  const hasSuffixNode = !!(props.allowClear || props.suffix);
+
+  const { current: scale } = useRef(new Animated.Value(animateValue));
+  const { current: opacity } = useRef(new Animated.Value(animateValue));
+
+  useUpdateEffect(
+    () => onFocusChangeRef.current?.(inputIsFocused),
+    [inputIsFocused],
+  );
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.timing(opacity, {
+        duration: 150,
+        toValue: animateValue,
+        useNativeDriver: Platform.OS !== 'web',
+      }),
+      Animated.timing(scale, {
+        duration: 150,
+        toValue: animateValue,
+        useNativeDriver: Platform.OS !== 'web',
+      }),
+    ]).start();
+  }, [animateValue, opacity, scale]);
+
+  /**
+   * 格式化文本值
+   * @param originalValue 初始输入文本
+   * @returns 格式化的文本值
+   */
+  const formatTextValue = (originalValue: string) => {
+    let defaultNormalizeValue = originalValue;
+    if (!(Platform.OS === 'ios' && originalValue.includes('\u3000'))) {
+      /** 非 IOS 手写情况：移除前空格 */
+      defaultNormalizeValue = originalValue.replace(/^\s+/, '');
+    }
+    if (props.inputMode === 'numeric' || props.inputMode === 'decimal') {
+      /** 处理数字文本 */
+      defaultNormalizeValue = defaultNormalizeValue
+        .replace(/[^0-9]/g, '')
+        .replace(/^0+(\d)/, '$1');
+      if (props.inputMode === 'decimal') {
+        const regexp = new RegExp(`^(\\d+)(\\.\\d{0,${decimalPlaces}}).*`);
+        defaultNormalizeValue = defaultNormalizeValue
+          .replace(/(\..*?)\..*/g, '$1')
+          .replace(regexp, '$1$2');
+      }
+    }
+    if (props.customInputMode) {
+      /** 处理自定义字符 */
+      let customInputModeNormalizedValue = defaultNormalizeValue;
+      if (
+        props.customInputMode === 'alphanumeric' ||
+        props.customInputMode === 'alphanumericPlusMinus'
+      ) {
+        let pattern = /[^a-zA-Z0-9]/g;
+        if (props.customInputMode === 'alphanumericPlusMinus') {
+          pattern = /[^a-zA-Z0-9+-]/g;
+        }
+        customInputModeNormalizedValue = defaultNormalizeValue.replace(pattern, '');
+      }
+      props.onCustomInputMode?.(
+        defaultNormalizeValue,
+        customInputModeNormalizedValue,
+      );
+      defaultNormalizeValue = customInputModeNormalizedValue;
+    }
+
+    if (typeof props.formatValue === 'function') {
+      defaultNormalizeValue = props.formatValue(
+        defaultNormalizeValue,
+        originalValue,
+      );
+    }
+    return defaultNormalizeValue;
+  };
+
+  return (
+    <Flex
+      align="center"
+      justify="space-between"
+      gap={theme.spacing.md}
+      style={props.style}
+      onPointerDown={() => {
+        elementState.current = {
+          pointerDown: true,
+        };
+      }}
+    >
+      {safetyRenderChildren(props.prefix, content => (
+        <Text size={14}>{content}</Text>
+      ))}
+      <NativeTextInput
+        placeholder="请输入"
+        enterKeyHint="done"
+        autoCapitalize="none"
+        allowFontScaling={false}
+        selectionColor={theme.palette.brand7}
+        placeholderTextColor={theme.palette.fontGray3}
+        {...props}
+        ref={mergeRefs}
+        value={inputValue}
+        editable={!props.disabled || props.editable}
+        onChangeText={textValue => setInputValue(formatTextValue(textValue))}
+        style={[styles.input, { textAlign: props.textAlign }, props.inputStyle]}
+        onFocus={event => {
+          if (!inputIsFocused && elementState.current.pointerDown) {
+            props.onFocus?.(event);
+            setInputIsFocused(true);
+          }
+          elementState.current = {
+            pointerDown: false,
+          };
+        }}
+        onBlur={event => {
+          if (!elementState.current.pointerDown) {
+            props.onBlur?.(event);
+            setInputIsFocused(false);
+            setInputValue(inputValue?.trimEnd());
+          } else {
+            inputRef.current?.focus();
+          }
+          elementState.current = {
+            pointerDown: false,
+          };
+        }}
+      />
+      {!!hasSuffixNode && (
+        <Flex align="center" gap={theme.spacing.sm}>
+          {!!props.allowClear && (
+            <Animated.View
+              style={{
+                opacity,
+                flexBasis: 'auto',
+                transform: [{ scale }],
+              }}
+            >
+              <TouchableOpacity
+                hitSlop={4}
+                activeOpacity={0.8}
+                disabled={!inputValue}
+                onPress={() => {
+                  props.onClear?.();
+                  setInputValue('');
+                }}
+              >
+                {typeof props.allowClear === 'object' ? (
+                  props.allowClear.clearIcon
+                ) : (
+                  <CloseOutlined color={theme.palette.fontGray3} />
+                )}
+              </TouchableOpacity>
+            </Animated.View>
+          )}
+          {safetyRenderChildren(props.suffix, content => (
+            <Text size={14}>{content}</Text>
+          ))}
+        </Flex>
+      )}
+    </Flex>
+  );
+};

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

@@ -0,0 +1,17 @@
+import { Input as _Input } from './input';
+import { InputCaptcha } from './input-captcha';
+import { InputPassword } from './input-password';
+import { InputSearch } from './input-search';
+import { InputTextArea } from './input-textarea';
+
+export * from './input-captcha';
+export * from './input-password';
+export * from './input-search';
+export * from './input-textarea';
+
+export const Input = Object.assign(_Input, {
+  Search: InputSearch,
+  Captcha: InputCaptcha,
+  Password: InputPassword,
+  TextArea: InputTextArea,
+});

package/src/components/base/input/input-captcha.tsx

@@ -0,0 +1,83 @@
+import { useInterval, useRequest } from 'ahooks';
+import React, { useState } from 'react';
+import { TouchableOpacity } from 'react-native';
+
+import { Text } from '#components/base';
+import { useTheme } from '#native-provider';
+
+import { Input, type InputProps } from './input';
+import { useCaptchaStyles } from './style';
+
+type Seconds = number;
+export interface InputCaptchaProps extends Omit<InputProps, 'suffix'> {
+  /** 等待重试时长 */
+  retryTime?: Seconds;
+  /** 发送按钮文本 */
+  sendText?: string;
+  /** 发送验证码 */
+  onSendCaptcha: () => Promise<void>;
+}
+export const InputCaptcha: React.FC<InputCaptchaProps> = ({
+  retryTime = 60,
+  sendText = '获取验证码',
+  ...props
+}) => {
+  const theme = useTheme();
+  const styles = useCaptchaStyles();
+
+  const [retryResetTime, setRetryResetTime] = useState(retryTime);
+  const [waitToRetryTimer, setWaitToRetryTimer] = useState<number>();
+
+  useInterval(() => {
+    const nextRetryResetTime = retryResetTime - 1;
+    if (nextRetryResetTime <= 0) {
+      /** 重置定时器 */
+      setRetryResetTime(retryTime);
+      setWaitToRetryTimer(undefined);
+    } else {
+      setRetryResetTime(nextRetryResetTime);
+    }
+  }, waitToRetryTimer);
+
+  const sendCaptcha = useRequest(props.onSendCaptcha, {
+    manual: true,
+    debounceWait: 250,
+    debounceLeading: true,
+    debounceTrailing: false,
+    onSuccess: () => setWaitToRetryTimer(1000),
+  });
+
+  return (
+    <Input
+      maxLength={6}
+      inputMode="numeric"
+      placeholder="请输入验证码"
+      autoComplete="one-time-code"
+      textContentType="oneTimeCode"
+      {...props}
+      style={[styles.container, props.style]}
+      suffix={
+        <TouchableOpacity
+          activeOpacity={0.8}
+          onPress={sendCaptcha.run}
+          disabled={!!waitToRetryTimer}
+        >
+          {!waitToRetryTimer ? (
+            <Text size={14} font="semiBold" color={theme.palette.brand7}>
+              {sendText}
+            </Text>
+          ) : (
+            <Text.Highlight
+              size={14}
+              font="semiBold"
+              keywords={/(\d+)/}
+              color={theme.palette.fontGray4}
+            >
+              {retryResetTime}秒后重试
+            </Text.Highlight>
+          )}
+        </TouchableOpacity>
+      }
+    />
+  );
+};

package/src/components/base/input/input-password.tsx

@@ -0,0 +1,56 @@
+import { EyeInvisibleOutlined, EyeOutlined, LockOutlined } from '@seakoi/svg-icons';
+import { useControllableValue } from 'ahooks';
+import React, { type ReactNode } from 'react';
+import { Platform, TouchableOpacity } from 'react-native';
+
+import { Input, type InputProps } from './input';
+
+const defaultIconRender = (visible: boolean) => {
+  return visible ? <EyeOutlined /> : <EyeInvisibleOutlined />;
+};
+
+interface VisibilityToggle {
+  visible?: boolean;
+  onVisibleChange?: (visible: boolean) => void;
+}
+export interface InputPasswordProps extends Omit<InputProps, 'suffix'> {
+  /** 是否显示切换按钮或者控制密码显隐 */
+  visibilityToggle?: boolean | VisibilityToggle;
+  /** 自定义切换图标 */
+  iconRender?: (visible: boolean) => ReactNode;
+}
+export const InputPassword: React.FC<InputPasswordProps> = ({ ...props }) => {
+  const [visiblePassword, setVisiblePassword] = useControllableValue(
+    typeof props.visibilityToggle === 'boolean'
+      ? { visible: false }
+      : props.visibilityToggle,
+    { valuePropName: 'visible', trigger: 'onVisibleChange' },
+  );
+
+  const showSwitchIcon = props.visibilityToggle !== false;
+  const iconRender = props.iconRender ?? defaultIconRender;
+
+  return (
+    <Input
+      inputMode="text"
+      prefix={<LockOutlined />}
+      textContentType="password"
+      autoComplete={Platform.select({
+        android: 'password',
+        default: 'new-password',
+      })}
+      {...props}
+      secureTextEntry={!visiblePassword}
+      suffix={
+        showSwitchIcon && (
+          <TouchableOpacity
+            activeOpacity={0.8}
+            onPress={() => setVisiblePassword(prevState => !prevState)}
+          >
+            {iconRender(visiblePassword)}
+          </TouchableOpacity>
+        )
+      }
+    />
+  );
+};

package/src/components/base/input/input-search.tsx

@@ -0,0 +1,57 @@
+import { SearchOutlined } from '@seakoi/svg-icons';
+import React, { isValidElement, type ReactElement, useRef } from 'react';
+import { type TextInput as NativeTextInput, TouchableOpacity } from 'react-native';
+
+import { Flex, Text } from '#components/base';
+import { useTheme } from '#native-provider';
+import { useMergeRefs } from '#shared/hooks';
+
+import { Input, type InputProps } from './input';
+import { useSearchStyles } from './style';
+
+export interface SearchProps extends InputProps {
+  /** 取消按钮文本 */
+  cancelText?: string | ReactElement;
+  /** 点击取消按钮时的回调函数 */
+  onCancel?: () => void;
+}
+
+export const InputSearch: React.FC<SearchProps> = ({ ...props }) => {
+  const theme = useTheme();
+  const styles = useSearchStyles();
+  const inputRef = useRef<NativeTextInput>(null);
+  const mergeRefs = useMergeRefs([props.ref, inputRef]);
+
+  return (
+    <Flex align="center" gap={theme.spacing.lg}>
+      <Input
+        allowClear
+        variant="filled"
+        inputMode="search"
+        placeholder="请输入搜索内容"
+        {...props}
+        ref={mergeRefs}
+        prefix={<SearchOutlined color={theme.palette.fontGray3} />}
+        inputStyle={[styles.input, props.inputStyle]}
+        style={[styles.inputContainer, props.style]}
+      />
+      {!!props.cancelText && (
+        <TouchableOpacity
+          activeOpacity={0.8}
+          onPress={() => {
+            props.onCancel?.();
+            inputRef.current?.clear();
+          }}
+        >
+          {isValidElement(props.cancelText) ? (
+            props.cancelText
+          ) : (
+            <Text size={16} color={theme.palette.brand7}>
+              {props.cancelText}
+            </Text>
+          )}
+        </TouchableOpacity>
+      )}
+    </Flex>
+  );
+};

package/src/components/base/input/input-textarea.tsx

@@ -0,0 +1,100 @@
+import { useBoolean, useControllableValue } from 'ahooks';
+import React, { type ReactNode, useEffect, useMemo, useRef } from 'react';
+import { Keyboard, type StyleProp, type ViewStyle } from 'react-native';
+
+import { Flex, Text } from '#components/base';
+import { useTheme } from '#native-provider';
+
+import { BaseInput } from './base-input';
+import { type InputProps } from './input';
+import { useTextAreaStyles, useVariantStyles } from './style';
+
+type ShowCountFormatter = (info: {
+  count: number;
+  inputValue: string;
+  maxLength?: number;
+}) => ReactNode;
+export interface InputTextAreaProps extends InputProps {
+  /** input 容器样式 */
+  inputContainer?: StyleProp<ViewStyle>;
+  /** 自适应内容高度 */
+  autoSize?: boolean | { minRows?: number; maxRows?: number };
+  /** 文本计数器 */
+  showCount?: boolean | { formatter: ShowCountFormatter };
+}
+
+export const InputTextArea: React.FC<InputTextAreaProps> = ({
+  variant = 'outlined',
+  ...props
+}) => {
+  const theme = useTheme();
+  const styles = useTextAreaStyles();
+  const { variant: variantStyle } = useVariantStyles({ variant });
+  const showCountFormatter = useRef<ShowCountFormatter>(null);
+
+  const [textScrollEnabled, textScrollEnabledActions] = useBoolean(true);
+  const [inputValue, setInputValue] = useControllableValue<string>(props, {
+    trigger: 'onChangeText',
+    defaultValue: props.defaultValue ?? '',
+  });
+
+  if (typeof props.showCount === 'object') {
+    showCountFormatter.current = props.showCount.formatter;
+  }
+
+  const textCount = useMemo(() => {
+    if (showCountFormatter.current) {
+      return showCountFormatter.current({
+        inputValue,
+        count: inputValue.length,
+        maxLength: props.maxLength,
+      });
+    }
+    if (!props.maxLength || typeof props.maxLength !== 'number') {
+      /** 忽略非数字 */
+      return inputValue.length;
+    }
+    return [inputValue.length, props.maxLength].join(' / ');
+  }, [inputValue, props.maxLength]);
+
+  useEffect(() => {
+    const showSubscription = Keyboard.addListener(
+      'keyboardDidHide',
+      textScrollEnabledActions.setTrue,
+    );
+    const hideSubscription = Keyboard.addListener(
+      'keyboardWillShow',
+      textScrollEnabledActions.setFalse,
+    );
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <Flex
+      vertical
+      align="flex-end"
+      gap={theme.spacing.sm}
+      style={[variantStyle, props.style]}
+    >
+      <BaseInput
+        {...props}
+        multiline
+        inputMode="text"
+        value={inputValue}
+        textAlignVertical="top"
+        onChangeText={setInputValue}
+        scrollEnabled={textScrollEnabled}
+        style={[styles.inputContainer, props.inputContainer]}
+      />
+      {!!props.showCount && (
+        <Text size={12} color={theme.palette.fontGray3}>
+          {textCount}
+        </Text>
+      )}
+    </Flex>
+  );
+};

package/src/components/base/input/input.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { BaseInput, type BaseInputProps } from './base-input';
+import { useVariantStyles } from './style';
+
+export interface InputProps extends BaseInputProps {
+  /** 输入框外观变体 */
+  variant?: 'filled' | 'borderless' | 'outlined';
+}
+
+export const Input: React.FC<InputProps> = ({
+  variant = 'borderless',
+  ...props
+}) => {
+  const styles = useVariantStyles({ variant });
+  return (
+    <BaseInput
+      {...props}
+      inputStyle={props.inputStyle}
+      style={[styles.variant, props.style]}
+    />
+  );
+};