@seakoi/native-ui 1.0.0

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

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RadioGroup = void 0;
+var _ahooks = require("ahooks");
+var _react = _interopRequireWildcard(require("react"));
+var _radioContext = require("./radio-context.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const RadioGroup = props => {
+  const iconRender = (0, _ahooks.useLatest)(props.iconRender);
+  const [checkedValue, setCheckedValue] = (0, _ahooks.useControllableValue)(props, {
+    trigger: 'onChange',
+    valuePropName: 'value',
+    defaultValuePropName: 'defaultValue'
+  });
+  const contextValue = (0, _react.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__*/(0, _jsxRuntime.jsx)(_radioContext.RadioContext.Provider, {
+    value: contextValue,
+    children: props.children
+  });
+};
+exports.RadioGroup = RadioGroup;

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

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Radio = void 0;
+var _svgIcons = require("@seakoi/svg-icons");
+var _ahooks = require("ahooks");
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("./../index.js");
+var _index2 = require("../../../native-provider/index.js");
+var _radioContext = require("./radio-context.js");
+var _index3 = require("./style/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const Radio = ({
+  align = 'center',
+  titleNumberOfLines = 2,
+  descriptionNumberOfLines = 2,
+  ...props
+}) => {
+  const theme = (0, _index2.useTheme)();
+  const styles = (0, _index3.useRadioStyles)();
+  const context = (0, _react.useContext)(_radioContext.RadioContext);
+  const onRadioIconStateChange = (0, _ahooks.useLatest)(props.onRadioIconStateChange);
+  const [innerChecked, setInnerChecked] = (0, _ahooks.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 = (0, _react.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 = (0, _ahooks.useMemoizedFn)(iconState => {
+    if (props.iconRender) return props.iconRender(iconState);
+    if (context.iconRender) return context.iconRender(iconState);
+    const RadioSvgIcon = !iconState.checked ? _svgIcons.CircleOutlined : _svgIcons.CheckCircleFilled;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.icon,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(RadioSvgIcon, {
+        size: 24,
+        color: iconState.checked ? iconState.disabled ? theme.palette.brand4 : theme.palette.brand7 : theme.palette.gray4
+      }), !!iconState.disabled && !iconState.checked && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.disabledIconBackground
+      })]
+    });
+  });
+  (0, _react.useEffect)(() => {
+    if (onRadioIconStateChange.current) {
+      onRadioIconStateChange.current({
+        checked: isChecked,
+        disabled: isDisabled
+      });
+    }
+  }, [isChecked, onRadioIconStateChange, isDisabled]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_index.Flex, {
+      align: "center",
+      style: [styles.wrapper, props.contentContainerStyle],
+      children: [props.contentPrefix, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.Flex, {
+        vertical: true,
+        align: "flex-start",
+        justify: "flex-start",
+        gap: theme.spacing.xxs,
+        style: styles.wrapper,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+          size: 16,
+          style: props.titleStyle,
+          color: theme.palette.fontGray1,
+          numberOfLines: titleNumberOfLines,
+          children: props.title
+        }), !!props.description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+          size: 14,
+          style: props.descriptionStyle,
+          color: theme.palette.fontGray2,
+          numberOfLines: descriptionNumberOfLines,
+          children: props.description
+        })]
+      })]
+    })]
+  });
+};
+exports.Radio = Radio;

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

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  useRadioStyles: true
+};
+exports.useRadioStyles = void 0;
+var _index = require("../../../../native-provider/index.js");
+var _radioCard = require("./radio-card.js");
+Object.keys(_radioCard).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _radioCard[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _radioCard[key];
+    }
+  });
+});
+const useRadioStyles = exports.useRadioStyles = (0, _index.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/commonjs/components/base/radio/style/radio-card.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRadioCardStyles = void 0;
+var _index = require("../../../../native-provider/index.js");
+const useRadioCardStyles = exports.useRadioCardStyles = (0, _index.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/commonjs/components/base/result/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _result = require("./result.js");
+Object.keys(_result).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _result[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _result[key];
+    }
+  });
+});

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

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Result = void 0;
+var _reactNative = require("react-native");
+var _index = require("./../index.js");
+var _index2 = require("../../../native-provider/index.js");
+var _index3 = require("./style/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/** 默认图片尺寸 */
+const DEFAULT_SIZE = {
+  width: 150,
+  height: 150
+};
+
+/** Result 类型配置 */
+
+/** 类型配置映射表 */
+const RESULT_CONFIG = {
+  'error-network': {
+    description: '您的网络不太顺畅哦～',
+    image: _reactNative.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: _reactNative.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: _reactNative.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: _reactNative.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: _reactNative.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: _reactNative.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'
+      }
+    })
+  }
+};
+const Result = ({
+  type,
+  description,
+  image,
+  extra
+}) => {
+  const theme = (0, _index2.useTheme)();
+  const config = RESULT_CONFIG[type];
+  const styles = (0, _index3.useResultStyles)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.container,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+      source: image ?? config.image,
+      style: {
+        width: config.width ?? DEFAULT_SIZE.width,
+        height: config.height ?? DEFAULT_SIZE.height
+      },
+      resizeMode: "contain"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+      style: {
+        textAlign: 'center'
+      },
+      size: 14,
+      color: theme.palette.blueGray8,
+      children: description ?? config.description
+    }), extra && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.extra,
+      children: extra
+    })]
+  });
+};
+exports.Result = Result;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useResultStyles = void 0;
+var _index = require("../../../../native-provider/index.js");
+const useResultStyles = exports.useResultStyles = (0, _index.createThemedStyles)(() => ({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  extra: {
+    marginTop: 12
+  }
+}));

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _surface = require("./surface.js");
+Object.keys(_surface).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _surface[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _surface[key];
+    }
+  });
+});

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

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Surface = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../../native-provider/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const Surface = ({
+  elevation = 0,
+  roundness = 'none',
+  ...props
+}) => {
+  const theme = (0, _index.useTheme)();
+  const roundnessStyle = (0, _react.useMemo)(() => {
+    if (roundness && Object.keys(theme.roundness).includes(roundness)) {
+      return {
+        borderRadius: theme.roundness[roundness]
+      };
+    }
+  }, [roundness, theme.roundness]);
+  const boxShadowStyle = (0, _react.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    ...props,
+    style: [boxShadowStyle, roundnessStyle, props.style],
+    children: props.children
+  });
+};
+exports.Surface = Surface;

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Switch", {
+  enumerable: true,
+  get: function () {
+    return _switch.Switch;
+  }
+});
+var _switch = require("./switch.js");

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

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStyles = void 0;
+var _index = require("../../../../native-provider/index.js");
+const useStyles = exports.useStyles = (0, _index.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/commonjs/components/base/switch/switch.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Switch = void 0;
+var _ahooks = require("ahooks");
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../../native-provider/index.js");
+var _index2 = require("./style/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const Switch = ({
+  checked,
+  defaultChecked = false,
+  disabled = false,
+  onChange,
+  activeOpacity = 0.6,
+  style
+}) => {
+  const theme = (0, _index.useTheme)();
+  const styles = (0, _index2.useStyles)();
+
+  // 内部状态
+  const [innerChecked, setInnerChecked] = _react.default.useState(defaultChecked);
+
+  // 受控/非受控逻辑
+  const isChecked = checked !== undefined ? checked : innerChecked;
+
+  // 动画值
+  const thumbTranslateX = (0, _react.useRef)(new _reactNative.Animated.Value(isChecked ? 20 : 0)).current;
+  const backgroundColorAnim = (0, _react.useRef)(new _reactNative.Animated.Value(isChecked ? 1 : 0)).current;
+
+  // 背景颜色插值
+  const backgroundColor = backgroundColorAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [theme.palette.gray4, theme.palette.brand7]
+  });
+
+  // 状态变化时触发动画
+  (0, _react.useEffect)(() => {
+    _reactNative.Animated.parallel([_reactNative.Animated.timing(thumbTranslateX, {
+      toValue: isChecked ? 20 : 0,
+      duration: 200,
+      useNativeDriver: true
+    }), _reactNative.Animated.timing(backgroundColorAnim, {
+      toValue: isChecked ? 1 : 0,
+      duration: 200,
+      useNativeDriver: false
+    })]).start();
+  }, [isChecked, thumbTranslateX, backgroundColorAnim]);
+
+  // 点击处理
+  const handlePress = (0, _ahooks.useMemoizedFn)(event => {
+    if (disabled) {
+      return;
+    }
+    const newValue = !isChecked;
+
+    // 如果是非受控组件，更新内部状态
+    if (checked === undefined) {
+      setInnerChecked(newValue);
+    }
+
+    // 触发 onChange 回调
+    onChange?.(newValue, event);
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+    activeOpacity: activeOpacity,
+    disabled: disabled,
+    onPress: handlePress,
+    style: style,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [styles.track, {
+        backgroundColor
+      }, disabled && styles.trackDisabled],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+        style: [styles.thumb, {
+          transform: [{
+            translateX: thumbTranslateX
+          }]
+        }, disabled && styles.thumbDisabled]
+      })
+    })
+  });
+};
+exports.Switch = Switch;

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _tabs = require("./tabs.js");
+Object.keys(_tabs).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _tabs[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _tabs[key];
+    }
+  });
+});