@seakoi/native-ui 1.0.0

package/dist/module/components/base/form/error-helper-text.js

@@ -0,0 +1,61 @@
+"use strict";
+
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, View } from 'react-native';
+import { Text } from "./../index.js";
+import { useTheme } from "../../../native-provider/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ErrorHelperText = props => {
+  const theme = useTheme();
+  const [showHelperText, setShowHelperText] = useState(false);
+  const [contentHeight, setContentHeight] = useState({
+    measured: false,
+    value: 0
+  });
+  const animationValue = props.errors?.length ? 1 : 0;
+  const shouldRender = props.errors?.length || showHelperText;
+  const {
+    current: animation
+  } = useRef(new Animated.Value(animationValue));
+  useEffect(() => {
+    if (animationValue) {
+      setShowHelperText(true);
+    }
+    Animated.timing(animation, {
+      duration: 100,
+      useNativeDriver: false,
+      toValue: animationValue
+    }).start(({
+      finished
+    }) => {
+      if (finished && !animationValue) {
+        setShowHelperText(false);
+      }
+    });
+  }, [animation, animationValue]);
+  if (!shouldRender) return;
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [contentHeight.measured && {
+      height: animation.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, contentHeight.value]
+      })
+    }],
+    children: /*#__PURE__*/_jsx(View, {
+      onLayout: ({
+        nativeEvent
+      }) => {
+        if (!contentHeight.measured) {
+          setContentHeight({
+            measured: true,
+            value: nativeEvent.layout.height
+          });
+        }
+      },
+      children: props.errors?.map((errorText, index) => /*#__PURE__*/_jsx(Text, {
+        color: theme.palette.error7,
+        children: errorText
+      }, index))
+    })
+  });
+};

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

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

package/dist/module/components/base/form/form-item.js

@@ -0,0 +1,101 @@
+"use strict";
+
+import { isEqual } from 'lodash-es';
+import { Field as RCField } from 'rc-field-form';
+import React, { useContext } from 'react';
+import { View } from 'react-native';
+import { Cell, Flex, Text } from "./../index.js";
+import { ErrorHelperText } from "./error-helper-text.js";
+import { FieldLayoutContext, FormContext } from "./form-context.js";
+import { useFormItemStyles } from "./style/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Memoized = /*#__PURE__*/React.memo(props => props.children, (prev, next) => {
+  return prev.update === next.update && isEqual(prev.control, next.control);
+});
+export const FormItem = ({
+  onPress,
+  onLayout,
+  onLongPress,
+  ...props
+}) => {
+  const styles = useFormItemStyles();
+  const formContext = useContext(FormContext);
+  const layoutsContext = useContext(FieldLayoutContext);
+  const isVerticalLayout = formContext?.layout === 'vertical';
+  const labelStyle = props.labelStyle ?? formContext?.labelStyle;
+  const showACellArrow = formContext?.variant === 'cell-group' && (props.showCellArrow ?? formContext.showCellArrow);
+  let messageVariables = {};
+  if (typeof props.label === 'string') {
+    messageVariables.label = props.label;
+  } else if (props.name) {
+    messageVariables.label = String(props.name);
+  }
+  if (props.messageVariables) {
+    messageVariables = {
+      ...messageVariables,
+      ...props.messageVariables
+    };
+  }
+  return /*#__PURE__*/_jsx(RCField, {
+    ...props,
+    messageVariables: messageVariables,
+    children: (control, meta, context) => {
+      const mergedControl = {
+        ...control,
+        disabled: formContext?.disabled
+      };
+      const isRequired = props.required ?? props.rules?.some(rule => {
+        if (typeof rule === 'function') {
+          const ruleEntity = rule(context);
+          return ruleEntity.required && !ruleEntity.warningOnly;
+        }
+        return typeof rule === 'object' && !!rule.required && rule.warningOnly;
+      });
+      const childNode = typeof props.children !== 'function' ? props.children : props.children(context);
+      const mergedDisabled = childNode?.props.disabled || mergedControl?.disabled;
+      return /*#__PURE__*/_jsx(Cell, {
+        style: props.style,
+        onPress: onPress,
+        onLongPress: onLongPress,
+        showArrow: showACellArrow,
+        disabledPress: mergedDisabled,
+        onLayout: event => {
+          onLayout?.(event);
+          if (props.name && layoutsContext) {
+            const {
+              layout
+            } = event.nativeEvent;
+            layoutsContext.registerFieldLayout(props.name, layout);
+          }
+        },
+        description: /*#__PURE__*/_jsx(ErrorHelperText, {
+          errors: meta.errors
+        }),
+        title: /*#__PURE__*/_jsxs(Flex, {
+          style: [styles.contentContainer, isVerticalLayout && styles.verticalLayout, props.contentContainerStyle],
+          children: [/*#__PURE__*/_jsxs(Text, {
+            style: labelStyle,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: [styles.label, labelStyle],
+              children: props.label
+            }), !isRequired && /*#__PURE__*/_jsx(Text, {
+              style: styles.mark,
+              children: "*"
+            })]
+          }), !!childNode && /*#__PURE__*/_jsx(View, {
+            style: [styles.control, formContext?.wrapperStyle],
+            children: /*#__PURE__*/_jsx(Memoized, {
+              control: mergedControl,
+              update: childNode,
+              children: /*#__PURE__*/React.cloneElement(childNode, {
+                ...childNode.props,
+                ...control,
+                disabled: mergedDisabled
+              })
+            })
+          })]
+        })
+      });
+    }
+  });
+};

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

@@ -0,0 +1,87 @@
+"use strict";
+
+import { useMemoizedFn } from 'ahooks';
+import RCForm, { useForm } from 'rc-field-form';
+import React, { useImperativeHandle, useMemo, useRef } from 'react';
+import { View } from 'react-native';
+import { Cell } from "../cell/index.js";
+import { FieldLayoutContext, FormContext } from "./form-context.js";
+import { useFormStyles } from "./style/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Form({
+  style,
+  requiredMark,
+  scrollView,
+  disabled = false,
+  showCellArrow = false,
+  layout = 'horizontal',
+  variant = 'cell-group',
+  ...props
+}) {
+  const styles = useFormStyles();
+  const [formIns] = useForm(props.form);
+  const itemsLayoutMap = useRef({});
+  const createFieldKey = useMemoizedFn(name => {
+    return !Array.isArray(name) ? name : name.join('.');
+  });
+
+  /** 表单上下文 */
+  const contextValue = useMemo(() => {
+    return {
+      variant,
+      layout,
+      disabled,
+      showCellArrow
+    };
+  }, [disabled, layout, showCellArrow, variant]);
+
+  /** 表单项布局上下文 */
+  const fieldLayoutContextValue = useMemo(() => {
+    return {
+      registerFieldLayout: (name, layout) => {
+        const fieldKey = createFieldKey(name);
+        itemsLayoutMap.current = {
+          ...itemsLayoutMap.current,
+          [fieldKey]: layout
+        };
+      }
+    };
+  }, [createFieldKey]);
+  const scrollToFirstError = ({
+    errorFields
+  }) => {
+    if (!errorFields.length) return;
+    const fieldKey = createFieldKey(errorFields[0].name);
+    const layoutValue = itemsLayoutMap.current[fieldKey];
+    if (layoutValue && scrollView?.current) {
+      scrollView.current.scrollTo({
+        y: layoutValue.y,
+        animated: true
+      });
+    }
+  };
+  useImperativeHandle(props.ref, () => formIns);
+  return /*#__PURE__*/_jsx(FormContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(FieldLayoutContext, {
+      value: fieldLayoutContextValue,
+      children: /*#__PURE__*/_jsx(RCForm, {
+        ...props,
+        form: formIns,
+        component: false,
+        onFinishFailed: errorInfo => {
+          scrollToFirstError(errorInfo);
+          props.onFinishFailed?.(errorInfo);
+        },
+        children: variant !== 'cell-group' ? /*#__PURE__*/_jsx(View, {
+          style: [styles.container, style],
+          children: props.children
+        }) : /*#__PURE__*/_jsx(Cell.Group, {
+          bordered: true,
+          style: style,
+          children: props.children
+        })
+      })
+    })
+  });
+}

package/dist/module/components/base/form/hooks/use-form.js

@@ -0,0 +1,9 @@
+"use strict";
+
+import { useForm as useRCForm } from 'rc-field-form';
+import { useMemo } from 'react';
+export function useForm(form) {
+  const [rcForm] = useRCForm();
+  const wrapForm = useMemo(() => form ?? rcForm, [form, rcForm]);
+  return [wrapForm];
+}

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

@@ -0,0 +1,12 @@
+"use strict";
+
+import { Form as _Form } from "./form.js";
+import { FormItem } from "./form-item.js";
+import { useForm } from "./hooks/use-form.js";
+export * from "./form.js";
+export * from "./form-context.js";
+export * from "./form-item.js";
+export const Form = Object.assign(_Form, {
+  Item: FormItem,
+  useForm: useForm
+});

package/dist/module/components/base/form/style/form-item.js

@@ -0,0 +1,28 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+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/dist/module/components/base/form/style/index.js

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

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

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

package/dist/module/components/base/input/base-input.js

@@ -0,0 +1,166 @@
+"use strict";
+
+import { CloseOutlined } from '@seakoi/svg-icons';
+import { useControllableValue, useLatest, useUpdateEffect } from 'ahooks';
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, Platform, TextInput as NativeTextInput, TouchableOpacity } from 'react-native';
+import { Flex, Text } from "./../index.js";
+import { useTheme } from "../../../native-provider/index.js";
+import { useMergeRefs } from "../../../shared/hooks/index.js";
+import { safetyRenderChildren } from "../../../shared/utils/index.js";
+import { useBaseInputStyles } from "./style/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const BaseInput = ({
+  decimalPlaces = 2,
+  ...props
+}) => {
+  const theme = useTheme();
+  const styles = useBaseInputStyles();
+  const inputRef = useRef(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(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 => {
+    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 /*#__PURE__*/_jsxs(Flex, {
+    align: "center",
+    justify: "space-between",
+    gap: theme.spacing.md,
+    style: props.style,
+    onPointerDown: () => {
+      elementState.current = {
+        pointerDown: true
+      };
+    },
+    children: [safetyRenderChildren(props.prefix, content => /*#__PURE__*/_jsx(Text, {
+      size: 14,
+      children: content
+    })), /*#__PURE__*/_jsx(NativeTextInput, {
+      placeholder: "\u8BF7\u8F93\u5165",
+      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 && /*#__PURE__*/_jsxs(Flex, {
+      align: "center",
+      gap: theme.spacing.sm,
+      children: [!!props.allowClear && /*#__PURE__*/_jsx(Animated.View, {
+        style: {
+          opacity,
+          flexBasis: 'auto',
+          transform: [{
+            scale
+          }]
+        },
+        children: /*#__PURE__*/_jsx(TouchableOpacity, {
+          hitSlop: 4,
+          activeOpacity: 0.8,
+          disabled: !inputValue,
+          onPress: () => {
+            props.onClear?.();
+            setInputValue('');
+          },
+          children: typeof props.allowClear === 'object' ? props.allowClear.clearIcon : /*#__PURE__*/_jsx(CloseOutlined, {
+            color: theme.palette.fontGray3
+          })
+        })
+      }), safetyRenderChildren(props.suffix, content => /*#__PURE__*/_jsx(Text, {
+        size: 14,
+        children: content
+      }))]
+    })]
+  });
+};

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

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

package/dist/module/components/base/input/input-captcha.js

@@ -0,0 +1,63 @@
+"use strict";
+
+import { useInterval, useRequest } from 'ahooks';
+import React, { useState } from 'react';
+import { TouchableOpacity } from 'react-native';
+import { Text } from "./../index.js";
+import { useTheme } from "../../../native-provider/index.js";
+import { Input } from "./input.js";
+import { useCaptchaStyles } from "./style/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const InputCaptcha = ({
+  retryTime = 60,
+  sendText = '获取验证码',
+  ...props
+}) => {
+  const theme = useTheme();
+  const styles = useCaptchaStyles();
+  const [retryResetTime, setRetryResetTime] = useState(retryTime);
+  const [waitToRetryTimer, setWaitToRetryTimer] = useState();
+  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 /*#__PURE__*/_jsx(Input, {
+    maxLength: 6,
+    inputMode: "numeric",
+    placeholder: "\u8BF7\u8F93\u5165\u9A8C\u8BC1\u7801",
+    autoComplete: "one-time-code",
+    textContentType: "oneTimeCode",
+    ...props,
+    style: [styles.container, props.style],
+    suffix: /*#__PURE__*/_jsx(TouchableOpacity, {
+      activeOpacity: 0.8,
+      onPress: sendCaptcha.run,
+      disabled: !!waitToRetryTimer,
+      children: !waitToRetryTimer ? /*#__PURE__*/_jsx(Text, {
+        size: 14,
+        font: "semiBold",
+        color: theme.palette.brand7,
+        children: sendText
+      }) : /*#__PURE__*/_jsxs(Text.Highlight, {
+        size: 14,
+        font: "semiBold",
+        keywords: /(\d+)/,
+        color: theme.palette.fontGray4,
+        children: [retryResetTime, "\u79D2\u540E\u91CD\u8BD5"]
+      })
+    })
+  });
+};

package/dist/module/components/base/input/input-password.js

@@ -0,0 +1,39 @@
+"use strict";
+
+import { EyeInvisibleOutlined, EyeOutlined, LockOutlined } from '@seakoi/svg-icons';
+import { useControllableValue } from 'ahooks';
+import React from 'react';
+import { Platform, TouchableOpacity } from 'react-native';
+import { Input } from "./input.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const defaultIconRender = visible => {
+  return visible ? /*#__PURE__*/_jsx(EyeOutlined, {}) : /*#__PURE__*/_jsx(EyeInvisibleOutlined, {});
+};
+export const InputPassword = ({
+  ...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 /*#__PURE__*/_jsx(Input, {
+    inputMode: "text",
+    prefix: /*#__PURE__*/_jsx(LockOutlined, {}),
+    textContentType: "password",
+    autoComplete: Platform.select({
+      android: 'password',
+      default: 'new-password'
+    }),
+    ...props,
+    secureTextEntry: !visiblePassword,
+    suffix: showSwitchIcon && /*#__PURE__*/_jsx(TouchableOpacity, {
+      activeOpacity: 0.8,
+      onPress: () => setVisiblePassword(prevState => !prevState),
+      children: iconRender(visiblePassword)
+    })
+  });
+};