@seakoi/native-ui 1.0.0

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

@@ -0,0 +1,42 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+export * from "./radio-card.js";
+export const useRadioStyles = createThemedStyles(theme => ({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing.sm,
+    alignItems: 'center',
+    justifyContent: 'flex-start'
+  },
+  fullContainer: {
+    width: '100%',
+    flexShrink: 1,
+    flexBasis: 'auto'
+  },
+  reverseContainerDirection: {
+    flexDirection: 'row-reverse',
+    justifyContent: 'space-between'
+  },
+  wrapper: {
+    flexShrink: 1,
+    flexBasis: 'auto'
+  },
+  icon: {
+    overflow: 'hidden',
+    position: 'relative',
+    display: 'flex',
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+    flexDirection: 'column'
+  },
+  disabledIconBackground: {
+    inset: 2,
+    zIndex: -1,
+    position: 'absolute',
+    borderRadius: theme.roundness.full,
+    backgroundColor: theme.palette.blueGray1
+  }
+}));

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

@@ -0,0 +1,28 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+export const useRadioCardStyles = createThemedStyles(theme => ({
+  radio: {
+    overflow: 'hidden',
+    position: 'relative',
+    padding: 16,
+    width: '100%',
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: theme.palette.gray3,
+    borderRadius: theme.roundness.lg,
+    backgroundColor: theme.palette.white
+  },
+  ribbon: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    borderWidth: 14,
+    borderStyle: 'solid'
+  },
+  checkIcon: {
+    position: 'absolute',
+    top: -2,
+    left: -2
+  }
+}));

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

@@ -0,0 +1,3 @@
+"use strict";
+
+export * from "./result.js";

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

@@ -0,0 +1,105 @@
+"use strict";
+
+import { Image, Platform, View } from 'react-native';
+import { Text } from "./../index.js";
+import { useTheme } from "../../../native-provider/index.js";
+import { useResultStyles } from "./style/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** 默认图片尺寸 */
+const DEFAULT_SIZE = {
+  width: 150,
+  height: 150
+};
+
+/** Result 类型配置 */
+
+/** 类型配置映射表 */
+const RESULT_CONFIG = {
+  'error-network': {
+    description: '您的网络不太顺畅哦～',
+    image: Platform.select({
+      native: require("../../../assets/images/network-error.png"),
+      default: {
+        uri: 'https://center-oss.seakoi.cn/digitizing_center_dev/frontend/app/assets/images/network-error.png'
+      }
+    })
+  },
+  'error-code': {
+    description: '检测app出现异常，建议重新启动app～',
+    image: Platform.select({
+      native: require("../../../assets/images/code-error.png"),
+      default: {
+        uri: 'https://center-oss.seakoi.cn/digitizing_center_dev/frontend/app/assets/images/code-error.png'
+      }
+    })
+  },
+  'error-other': {
+    description: '加载失败～',
+    image: Platform.select({
+      native: require("../../../assets/images/error.png"),
+      default: {
+        uri: 'https://center-oss.seakoi.cn/digitizing_center_dev/frontend/app/assets/images/error.png'
+      }
+    })
+  },
+  'empty-noList': {
+    width: 225,
+    height: 120,
+    description: '暂无数据哦',
+    image: Platform.select({
+      native: require("../../../assets/images/no-list.png"),
+      default: {
+        uri: 'https://center-oss.seakoi.cn/digitizing_center_dev/frontend/app/assets/images/no-list.png'
+      }
+    })
+  },
+  'empty-noDetail': {
+    description: '暂无数据哦',
+    image: Platform.select({
+      native: require("../../../assets/images/no-detail.png"),
+      default: {
+        uri: 'https://center-oss.seakoi.cn/digitizing_center_dev/frontend/app/assets/images/no-detail.png'
+      }
+    })
+  },
+  'empty-noAnnouncement': {
+    description: '暂无数据哦',
+    image: Platform.select({
+      native: require("../../../assets/images/no-announcement.png"),
+      default: {
+        uri: 'https://center-oss.seakoi.cn/digitizing_center_dev/frontend/app/assets/images/no-announcement.png'
+      }
+    })
+  }
+};
+export const Result = ({
+  type,
+  description,
+  image,
+  extra
+}) => {
+  const theme = useTheme();
+  const config = RESULT_CONFIG[type];
+  const styles = useResultStyles();
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsx(Image, {
+      source: image ?? config.image,
+      style: {
+        width: config.width ?? DEFAULT_SIZE.width,
+        height: config.height ?? DEFAULT_SIZE.height
+      },
+      resizeMode: "contain"
+    }), /*#__PURE__*/_jsx(Text, {
+      style: {
+        textAlign: 'center'
+      },
+      size: 14,
+      color: theme.palette.blueGray8,
+      children: description ?? config.description
+    }), extra && /*#__PURE__*/_jsx(View, {
+      style: styles.extra,
+      children: extra
+    })]
+  });
+};

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

@@ -0,0 +1,13 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+export const useResultStyles = createThemedStyles(() => ({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  extra: {
+    marginTop: 12
+  }
+}));

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

@@ -0,0 +1,3 @@
+"use strict";
+
+export {};

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

@@ -0,0 +1,3 @@
+"use strict";
+
+export * from "./surface.js";

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

@@ -0,0 +1,34 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { View } from 'react-native';
+import { useTheme } from "../../../native-provider/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Surface = ({
+  elevation = 0,
+  roundness = 'none',
+  ...props
+}) => {
+  const theme = useTheme();
+  const roundnessStyle = useMemo(() => {
+    if (roundness && Object.keys(theme.roundness).includes(roundness)) {
+      return {
+        borderRadius: theme.roundness[roundness]
+      };
+    }
+  }, [roundness, theme.roundness]);
+  const boxShadowStyle = useMemo(() => {
+    if (elevation || typeof elevation === 'number') {
+      const shadowLevelKey = Object.keys(theme.shadow).find(key => {
+        return key.includes(elevation.toString());
+      });
+      if (shadowLevelKey) return theme.shadow[shadowLevelKey];
+    }
+    return theme.shadow.level0;
+  }, [elevation, theme.shadow]);
+  return /*#__PURE__*/_jsx(View, {
+    ...props,
+    style: [boxShadowStyle, roundnessStyle, props.style],
+    children: props.children
+  });
+};

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

@@ -0,0 +1,3 @@
+"use strict";
+
+export { Switch } from "./switch.js";

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

@@ -0,0 +1,32 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+export const useStyles = createThemedStyles(theme => ({
+  track: {
+    width: 44,
+    height: 24,
+    borderRadius: theme.roundness.full,
+    justifyContent: 'center',
+    padding: 2
+  },
+  trackDisabled: {
+    opacity: 0.5
+  },
+  thumb: {
+    width: 20,
+    height: 20,
+    borderRadius: theme.roundness.full,
+    backgroundColor: theme.palette.white,
+    shadowColor: theme.palette.gray14,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
+    elevation: 2
+  },
+  thumbDisabled: {
+    shadowOpacity: 0.1
+  }
+}));

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

@@ -0,0 +1,82 @@
+"use strict";
+
+import { useMemoizedFn } from 'ahooks';
+import React, { useEffect, useRef } from 'react';
+import { Animated, TouchableOpacity } from 'react-native';
+import { useTheme } from "../../../native-provider/index.js";
+import { useStyles } from "./style/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Switch = ({
+  checked,
+  defaultChecked = false,
+  disabled = false,
+  onChange,
+  activeOpacity = 0.6,
+  style
+}) => {
+  const theme = useTheme();
+  const styles = useStyles();
+
+  // 内部状态
+  const [innerChecked, setInnerChecked] = React.useState(defaultChecked);
+
+  // 受控/非受控逻辑
+  const isChecked = checked !== undefined ? checked : innerChecked;
+
+  // 动画值
+  const thumbTranslateX = useRef(new Animated.Value(isChecked ? 20 : 0)).current;
+  const backgroundColorAnim = useRef(new Animated.Value(isChecked ? 1 : 0)).current;
+
+  // 背景颜色插值
+  const backgroundColor = backgroundColorAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [theme.palette.gray4, theme.palette.brand7]
+  });
+
+  // 状态变化时触发动画
+  useEffect(() => {
+    Animated.parallel([Animated.timing(thumbTranslateX, {
+      toValue: isChecked ? 20 : 0,
+      duration: 200,
+      useNativeDriver: true
+    }), Animated.timing(backgroundColorAnim, {
+      toValue: isChecked ? 1 : 0,
+      duration: 200,
+      useNativeDriver: false
+    })]).start();
+  }, [isChecked, thumbTranslateX, backgroundColorAnim]);
+
+  // 点击处理
+  const handlePress = useMemoizedFn(event => {
+    if (disabled) {
+      return;
+    }
+    const newValue = !isChecked;
+
+    // 如果是非受控组件，更新内部状态
+    if (checked === undefined) {
+      setInnerChecked(newValue);
+    }
+
+    // 触发 onChange 回调
+    onChange?.(newValue, event);
+  });
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    activeOpacity: activeOpacity,
+    disabled: disabled,
+    onPress: handlePress,
+    style: style,
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.track, {
+        backgroundColor
+      }, disabled && styles.trackDisabled],
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.thumb, {
+          transform: [{
+            translateX: thumbTranslateX
+          }]
+        }, disabled && styles.thumbDisabled]
+      })
+    })
+  });
+};

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

@@ -0,0 +1,3 @@
+"use strict";
+
+export {};

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

@@ -0,0 +1,3 @@
+"use strict";
+
+export * from "./tabs.js";

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

@@ -0,0 +1,132 @@
+"use strict";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, ScrollView, TouchableOpacity, View } from 'react-native';
+import { Text } from "./../index.js";
+import { createThemedStyles, useTheme } from "../../../native-provider/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Tabs = ({
+  tabs,
+  onChange
+}) => {
+  const styles = useStyles();
+  const theme = useTheme();
+  const tabNum = tabs.length;
+  const scrollViewWidthRef = useRef(0);
+  const scrollViewRef = useRef(null);
+  const animatedIndicatorWidth = useRef(new Animated.Value(0));
+  const animatedIndicatorLeft = useRef(new Animated.Value(0));
+  const [state, setState] = useState({
+    layoutFinish: false
+  });
+  const layouts = useRef(new Array(tabNum).fill({}));
+  const onLayoutScrollView = useCallback(e => {
+    scrollViewWidthRef.current = e.nativeEvent.layout.width;
+  }, []);
+  const genOnLayoutTab = i => e => {
+    layouts.current[i] = {
+      text: layouts.current[i]?.text,
+      tab: e.nativeEvent.layout
+    };
+    initIndicator();
+  };
+  const genOnLayoutText = i => e => {
+    layouts.current[i] = {
+      tab: layouts.current[i]?.tab,
+      text: e.nativeEvent.layout
+    };
+    initIndicator();
+  };
+  const normalizedTabs = tabs.map(tab => {
+    if (typeof tab === 'string') {
+      return {
+        label: tab,
+        value: tab
+      };
+    }
+  });
+  const navigateTo = index => {
+    const targetLayout = layouts.current[index];
+    const left = targetLayout.tab.x + (targetLayout.tab.width - targetLayout.text.width) / 2;
+    const width = targetLayout.text.width;
+    Animated.parallel([Animated.timing(animatedIndicatorLeft.current, {
+      toValue: left,
+      useNativeDriver: false,
+      duration: 300
+    }), Animated.timing(animatedIndicatorWidth.current, {
+      toValue: width,
+      useNativeDriver: false,
+      duration: 300
+    })]).start();
+    const hh = scrollViewWidthRef.current / 2;
+    scrollViewRef.current?.scrollTo({
+      x: targetLayout.tab.x + targetLayout.tab.width / 2 - hh,
+      animated: true
+    });
+  };
+  const genOnPress = (v, index) => {
+    onChange?.(v);
+    navigateTo(index);
+  };
+  const initIndicator = useCallback(() => {
+    const layoutItems = layouts.current.filter(item => item.tab && item.text);
+    if (layoutItems.length === layouts.current.length) {
+      setState(s => ({
+        ...s,
+        layoutFinish: true
+      }));
+    }
+  }, []);
+  const indicatorJSX = useMemo(() => {
+    return /*#__PURE__*/_jsx(Animated.View, {
+      style: {
+        height: 4,
+        width: animatedIndicatorWidth.current,
+        backgroundColor: theme.palette.brand7,
+        position: 'absolute',
+        left: animatedIndicatorLeft.current,
+        bottom: 0
+      }
+    });
+  }, [theme]);
+  const tabsJSX = normalizedTabs.map((item, index) => {
+    return /*#__PURE__*/_jsx(TouchableOpacity, {
+      style: styles.tabItem,
+      onPress: () => genOnPress(item, index),
+      onLayout: genOnLayoutTab(index),
+      children: /*#__PURE__*/_jsx(Text, {
+        onLayout: genOnLayoutText(index),
+        children: item?.label
+      })
+    }, item?.value);
+  });
+  useEffect(() => {
+    if (state.layoutFinish) {
+      navigateTo(0);
+    }
+  }, [state.layoutFinish]);
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: /*#__PURE__*/_jsxs(ScrollView, {
+      ref: scrollViewRef,
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      onLayout: onLayoutScrollView,
+      contentContainerStyle: {
+        alignContent: 'center',
+        columnGap: 16
+      },
+      children: [tabsJSX, indicatorJSX]
+    })
+  });
+};
+const useStyles = createThemedStyles(() => {
+  return {
+    container: {
+      paddingHorizontal: 16
+    },
+    tabItem: {
+      paddingVertical: 16
+    }
+  };
+});

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

@@ -0,0 +1,9 @@
+"use strict";
+
+import { Text as _Text } from "./text.js";
+import { TextHighlight } from "./text-highlight.js";
+export * from "./text.js";
+export * from "./text-highlight.js";
+export const Text = Object.assign(_Text, {
+  Highlight: TextHighlight
+});

package/dist/module/components/base/text/text-highlight.js

@@ -0,0 +1,42 @@
+"use strict";
+
+import { isValidElement, createElement as _createElement } from 'react';
+import { Text } from "./index.js";
+import { useTheme } from "../../../native-provider/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const escapeRegExp = text => {
+  return text.replace(/([.*+?^${}()|[\]\\])/g, '\\$1');
+};
+export const TextHighlight = props => {
+  const theme = useTheme();
+  const isStringText = typeof props.children === 'string' || Array.isArray(props.children) && !props.children.some(isValidElement);
+  if (!props.keywords || !isStringText) {
+    return /*#__PURE__*/_jsx(Text, {
+      ...props,
+      children: props.children
+    });
+  }
+  let childText = props.children;
+  if (Array.isArray(props.children)) {
+    /** 处理文本存在变量情况 */
+    childText = props.children.join('');
+  }
+  const regex = props.keywords instanceof RegExp ? props.keywords : new RegExp(`(${escapeRegExp(props.keywords)})`, 'gi');
+  return /*#__PURE__*/_jsx(Text, {
+    ...props,
+    children: childText.split(regex).map((content, key) => {
+      let highlightStyle = undefined;
+      if (!content) return null;
+      if (regex.test(content)) {
+        highlightStyle = {
+          color: props.highlightColor ?? theme.palette.brand7
+        };
+      }
+      return /*#__PURE__*/_createElement(Text, {
+        ...props,
+        key: key,
+        style: [props.style, highlightStyle]
+      }, content);
+    })
+  });
+};

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

@@ -0,0 +1,41 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { Platform, Text as NativeText } from 'react-native';
+import { useTheme } from "../../../native-provider/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Text = props => {
+  const theme = useTheme();
+  const textColor = props.color ?? theme.palette.fontGray1;
+  const fontStyle = useMemo(() => {
+    let fontSizeVariant = theme.fonts.regular;
+    if (props.font && Object.keys(theme.fonts).includes(props.font)) {
+      fontSizeVariant = theme.fonts[props.font];
+    }
+    if (props.size) {
+      const fontSizeKey = Object.keys(fontSizeVariant).find(key => {
+        return key.includes(props.size.toString());
+      });
+      if (fontSizeKey) return fontSizeVariant[fontSizeKey];
+    }
+    return Platform.select({
+      web: fontSizeVariant.size16,
+      default: fontSizeVariant.size14
+    });
+  }, [props.font, props.size, theme.fonts]);
+  if (Platform.OS === 'web' && fontStyle.fontSize && fontStyle.lineHeight && fontStyle.lineHeight < fontStyle.fontSize) {
+    // 兼容 Web 端 lineHeight 属性
+    const lineHeight = fontStyle.lineHeight * fontStyle.fontSize;
+    Object.assign(fontStyle, {
+      lineHeight: Number(lineHeight.toFixed(1))
+    });
+  }
+  return /*#__PURE__*/_jsx(NativeText, {
+    ...props,
+    allowFontScaling: false,
+    style: [{
+      color: textColor
+    }, fontStyle, props.style],
+    children: props.children
+  });
+};

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

@@ -0,0 +1,5 @@
+"use strict";
+
+/** 导出业务组件 */
+export * from "./list/index.js";
+export * from "./money/index.js";