react-native-system-ui 0.0.1 → 0.0.2

package/dist/es/components/notify/imperative.js

@@ -1,154 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React from 'react';
-import Portal from '../portal/Portal';
-import { isFunction, isString, isText } from '../../utils/validate';
-import Notify from './Notify';
-const activeKeys = new Set();
-const notifyOptions = new Map();
-const notifyControllers = new Map();
-let allowMultiple = false;
-const baseOptions = {
-  type: 'primary',
-  position: 'top',
-  duration: 3000,
-  safeAreaInsetTop: true,
-  safeAreaInsetBottom: false
-};
-let currentOptions = {
-  ...baseOptions
-};
-const typeDefaults = new Map();
-const parseOptions = input => {
-  if (/*#__PURE__*/React.isValidElement(input) || isText(input)) {
-    return {
-      message: input
-    };
-  }
-  return input ?? {};
-};
-const mergeOptions = (input, fallbackType) => {
-  const type = input.type ?? fallbackType;
-  const base = {
-    ...currentOptions,
-    ...typeDefaults.get(type)
-  };
-  const merged = {
-    ...base,
-    ...input,
-    type
-  };
-  merged.duration = merged.duration ?? base.duration ?? 3000;
-  return merged;
-};
-const removeNotify = key => {
-  Portal.remove(key);
-  activeKeys.delete(key);
-  notifyOptions.delete(key);
-  notifyControllers.delete(key);
-};
-const closeNotify = key => {
-  const controller = notifyControllers.get(key);
-  if (controller) {
-    controller.close();
-  } else {
-    removeNotify(key);
-  }
-};
-const NotifyPortal = ({
-  id,
-  options
-}) => {
-  const [visible, setVisible] = React.useState(true);
-  React.useEffect(() => {
-    notifyControllers.set(id, {
-      close: () => setVisible(false)
-    });
-    return () => {
-      notifyControllers.delete(id);
-    };
-  }, [id]);
-  const handleClose = () => {
-    options.onClose?.();
-    setVisible(false);
-  };
-  const handleClosed = () => {
-    options.onClosed?.();
-    removeNotify(id);
-  };
-  return /*#__PURE__*/React.createElement(Notify, _extends({}, options, {
-    visible: visible,
-    onClose: handleClose,
-    onClosed: handleClosed
-  }));
-};
-const showNotify = (input, fallbackType = 'primary') => {
-  const opts = mergeOptions(parseOptions(input), fallbackType);
-  if (!allowMultiple) {
-    activeKeys.forEach(key => closeNotify(key));
-  }
-  const key = Portal.add(null);
-  notifyOptions.set(key, opts);
-  Portal.update(key, /*#__PURE__*/React.createElement(NotifyPortal, {
-    id: key,
-    options: opts
-  }));
-  activeKeys.add(key);
-  const config = next => {
-    const prev = notifyOptions.get(key);
-    if (!prev) return;
-    const nextInput = isFunction(next) ? next(prev) : next;
-    const parsed = parseOptions(nextInput);
-    const nextType = parsed.type ?? prev.type ?? fallbackType;
-    const merged = {
-      ...prev,
-      ...parsed,
-      type: nextType
-    };
-    if ('duration' in parsed && parsed.duration == null) {
-      merged.duration = baseOptions.duration ?? 3000;
-    }
-    notifyOptions.set(key, merged);
-    Portal.update(key, /*#__PURE__*/React.createElement(NotifyPortal, {
-      id: key,
-      options: merged
-    }));
-  };
-  return {
-    clear: () => closeNotify(key),
-    update: next => config(next),
-    config
-  };
-};
-export const NotifyImperative = {
-  show: options => showNotify(options),
-  primary: options => showNotify(options, 'primary'),
-  success: options => showNotify(options, 'success'),
-  danger: options => showNotify(options, 'danger'),
-  warning: options => showNotify(options, 'warning'),
-  clear: () => {
-    activeKeys.forEach(key => closeNotify(key));
-  },
-  allowMultiple: (value = true) => {
-    allowMultiple = value;
-  },
-  setDefaultOptions: (typeOrOptions, options) => {
-    if (isString(typeOrOptions)) {
-      typeDefaults.set(typeOrOptions, options ?? {});
-    } else {
-      currentOptions = {
-        ...currentOptions,
-        ...typeOrOptions
-      };
-    }
-  },
-  resetDefaultOptions: type => {
-    if (type) {
-      typeDefaults.delete(type);
-    } else {
-      currentOptions = {
-        ...baseOptions
-      };
-      typeDefaults.clear();
-    }
-  }
-};

package/dist/es/components/notify/types.d.ts

@@ -1,63 +0,0 @@
-import type * as React from 'react'
-import type { StyleProp, TextStyle, ViewStyle } from 'react-native'
-
-import type { DeepPartial } from '../../types'
-
-export type NotifyType = 'primary' | 'success' | 'danger' | 'warning'
-export type NotifyPosition = 'top' | 'bottom'
-
-export interface NotifyTokens {
-  defaults: {
-    type: NotifyType
-    position: NotifyPosition
-    duration: number
-    closeOnClick: boolean
-    animationDuration: number
-    safeAreaInsetTop: boolean
-    safeAreaInsetBottom: boolean
-  }
-  layout: {
-    portal: ViewStyle
-    container: ViewStyle
-    safeArea: ViewStyle
-    content: ViewStyle
-    text: TextStyle
-  }
-  colors: {
-    variants: Record<NotifyType, { background: string; text: string }>
-  }
-  typography: {
-    fontSize: number
-    lineHeight: number
-  }
-  sizing: {
-    minHeight: number
-  }
-  spacing: {
-    paddingVertical: number
-    paddingHorizontal: number
-  }
-}
-
-export interface NotifyProps {
-  visible: boolean
-  message?: React.ReactNode
-  type?: NotifyType
-  duration?: number
-  position?: NotifyPosition
-  color?: string
-  background?: string
-  safeAreaInsetTop?: boolean
-  safeAreaInsetBottom?: boolean
-  zIndex?: number
-  closeOnClick?: boolean
-  style?: StyleProp<ViewStyle>
-  textStyle?: StyleProp<TextStyle>
-  tokensOverride?: DeepPartial<NotifyTokens>
-  onClick?: () => void
-  onClose?: () => void
-  onOpen?: () => void
-  onOpened?: () => void
-  onClosed?: () => void
-}
-

package/dist/es/components/number-keyboard/NumberKeyboard.js

@@ -1,421 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React from 'react';
-import { Animated, Easing, Pressable, SafeAreaView, StyleSheet, Text, View } from 'react-native';
-import { useControllableValue } from '../../hooks';
-import { nativeDriverEnabled } from '../../platform';
-import { parseNumberLike } from '../../utils/number';
-import { createPlatformShadow } from '../../utils/createPlatformShadow';
-import Loading from '../loading';
-import Portal from '../portal/Portal';
-import { isText } from '../../utils/validate';
-import { useNumberKeyboardTokens } from './tokens';
-const keyboardRegistry = new Set();
-const BASE_KEYS = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
-const shuffle = list => {
-  const next = [...list];
-  for (let i = next.length - 1; i > 0; i -= 1) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [next[i], next[j]] = [next[j], next[i]];
-  }
-  return next;
-};
-const NumberKeyboard = props => {
-  const {
-    visible,
-    title,
-    tokensOverride,
-    theme = 'default',
-    extraKey,
-    randomKeyOrder,
-    showDeleteKey = true,
-    closeButtonText,
-    deleteButtonText,
-    closeButtonLoading,
-    onChange,
-    onInput,
-    onDelete,
-    onClose,
-    onBlur,
-    onHide,
-    onShow,
-    value: _value,
-    defaultValue: _defaultValue,
-    maxlength: maxlengthProp,
-    blurOnClose = true,
-    safeAreaInsetBottom = true,
-    transition = true,
-    transitionDuration = 300,
-    numberKeyRender,
-    deleteRender,
-    extraKeyRender,
-    style,
-    ...rest
-  } = props;
-  const tokens = useNumberKeyboardTokens(tokensOverride);
-  const {
-    colors,
-    radii,
-    shadow,
-    sizing,
-    spacing
-  } = tokens;
-  const [mergedValue, setMergedValue] = useControllableValue(props, {
-    defaultValue: '',
-    valuePropName: 'value',
-    defaultValuePropName: 'defaultValue',
-    trigger: 'onChange'
-  });
-  const value = mergedValue ?? '';
-  const maxlength = React.useMemo(() => {
-    const parsed = parseNumberLike(maxlengthProp, undefined);
-    if (parsed === undefined || !Number.isFinite(parsed) || parsed < 0) return undefined;
-    return Math.floor(parsed);
-  }, [maxlengthProp]);
-  const resolvedCloseText = theme === 'custom' ? closeButtonText ?? '完成' : closeButtonText;
-  const closeSelf = React.useCallback(() => {
-    onClose?.();
-    if (blurOnClose) {
-      onBlur?.();
-    }
-  }, [blurOnClose, onBlur, onClose]);
-  const prevVisible = React.useRef(visible);
-  React.useEffect(() => {
-    if (visible && !prevVisible.current) {
-      onShow?.();
-    }
-    if (!visible && prevVisible.current) {
-      onHide?.();
-    }
-    prevVisible.current = visible;
-  }, [visible, onShow, onHide]);
-
-  // 仅允许一个键盘可见：当本实例显示时，通知其他实例关闭
-  React.useEffect(() => {
-    if (visible) {
-      keyboardRegistry.add(closeSelf);
-      // 关闭其他已注册的键盘
-      keyboardRegistry.forEach(fn => {
-        if (fn !== closeSelf) {
-          fn();
-        }
-      });
-    } else {
-      keyboardRegistry.delete(closeSelf);
-    }
-    return () => {
-      keyboardRegistry.delete(closeSelf);
-    };
-  }, [visible, closeSelf]);
-  const keys = React.useMemo(() => {
-    const shouldShuffle = Boolean(randomKeyOrder) && visible;
-    const numbers = shouldShuffle ? shuffle(BASE_KEYS.slice(0, 9)) : BASE_KEYS.slice(0, 9);
-    const main = numbers.map(text => ({
-      text,
-      type: ''
-    }));
-    if (theme === 'custom') {
-      const extras = Array.isArray(extraKey) ? extraKey : extraKey ? [extraKey] : [];
-      if (extras.length === 1) {
-        main.push({
-          text: '0',
-          type: '',
-          wider: true
-        }, {
-          text: extras[0],
-          type: 'extra'
-        });
-      } else if (extras.length >= 2) {
-        main.push({
-          text: extras[0],
-          type: 'extra'
-        }, {
-          text: '0',
-          type: ''
-        }, {
-          text: extras[1],
-          type: 'extra'
-        });
-      } else {
-        main.push({
-          text: '0',
-          type: ''
-        });
-      }
-      return main;
-    }
-    const normalizedExtra = Array.isArray(extraKey) ? extraKey[0] ?? '' : extraKey ?? '';
-    main.push({
-      text: normalizedExtra,
-      type: 'extra'
-    });
-    main.push({
-      text: '0',
-      type: ''
-    });
-    main.push({
-      type: showDeleteKey ? 'delete' : '',
-      text: showDeleteKey ? undefined : ''
-    });
-    return main;
-  }, [extraKey, randomKeyOrder, showDeleteKey, theme, visible]);
-  const handleInput = (text, type) => {
-    if (type === 'delete') {
-      if (!value) return;
-      onDelete?.();
-      const next = value.slice(0, -1);
-      setMergedValue(next);
-      return;
-    }
-    if (type === 'close') {
-      closeSelf();
-      return;
-    }
-    if (type === 'extra' && !text) {
-      closeSelf();
-      return;
-    }
-    if (!text) return;
-    if (maxlength !== undefined && value.length >= maxlength) {
-      return;
-    }
-    onInput?.(text);
-    const next = `${value}${text}`;
-    setMergedValue(next);
-  };
-  const wrapperShadow = createPlatformShadow({
-    color: shadow.color,
-    opacity: shadow.opacity,
-    radius: shadow.radius,
-    offsetY: shadow.offsetY,
-    elevation: shadow.elevation
-  });
-  const getKeyContent = key => {
-    if (key.type === 'delete') {
-      if (deleteRender) return deleteRender();
-      return deleteButtonText ?? '⌫';
-    }
-    if (key.type === 'extra') {
-      const extraText = key.text ?? '';
-      if (extraKeyRender) return extraKeyRender(extraText);
-      return extraText || '⌨︎';
-    }
-    if (key.type === 'close') {
-      return resolvedCloseText ?? '完成';
-    }
-    const keyText = key.text ?? '';
-    if (numberKeyRender) {
-      return numberKeyRender(keyText);
-    }
-    return keyText;
-  };
-  const renderKey = (key, index, options) => {
-    const isClose = options?.isClose;
-    const isPlaceholder = key.type === '' && !key.text;
-    const disabled = isPlaceholder || isClose && closeButtonLoading;
-    const onPress = disabled ? undefined : () => handleInput(key.text, key.type);
-    const backgroundColor = isClose ? colors.closeBackground : colors.keyBackground;
-    const activeBackground = colors.keyActiveBackground;
-    const inactiveTextColor = isClose ? colors.closeText : colors.keyText;
-    const pressedTextColor = isClose ? colors.closeText : colors.keyTextActive;
-    const contentNode = getKeyContent(key);
-    return /*#__PURE__*/React.createElement(Pressable, {
-      key: `${key.type}-${index}-${key.text ?? index}`,
-      onPress: onPress,
-      disabled: disabled,
-      style: {
-        flexBasis: key.wider ? '64%' : '30%',
-        flexGrow: key.wider ? 2 : 1,
-        opacity: isPlaceholder ? 1 : disabled ? 0.6 : 1
-      },
-      accessible: !isPlaceholder,
-      accessibilityRole: isPlaceholder ? undefined : 'button',
-      accessibilityLabel: isPlaceholder ? undefined : key.type === 'delete' ? 'delete' : key.type === 'close' ? resolvedCloseText ?? 'close' : key.type === 'extra' ? key.text ?? 'collapse' : key.text,
-      accessibilityState: isPlaceholder ? undefined : {
-        disabled: !!disabled
-      },
-      accessibilityElementsHidden: isPlaceholder,
-      importantForAccessibility: isPlaceholder ? 'no-hide-descendants' : undefined
-    }, ({
-      pressed
-    }) => {
-      const isPressed = pressed && !disabled;
-      const keyBackground = disabled ? colors.keyBackground : isPressed ? activeBackground : backgroundColor;
-      const textColor = isPressed ? pressedTextColor : inactiveTextColor;
-      return /*#__PURE__*/React.createElement(View, {
-        style: [styles.key, {
-          height: isClose ? sizing.closeHeight : sizing.keyHeight,
-          backgroundColor: keyBackground,
-          borderRadius: radii.key
-        }]
-      }, isClose && closeButtonLoading ? /*#__PURE__*/React.createElement(Loading, {
-        size: 18,
-        color: textColor
-      }) : isText(contentNode) ? /*#__PURE__*/React.createElement(Text, {
-        style: [styles.keyText, {
-          color: textColor,
-          fontSize: sizing.fontSize
-        }]
-      }, contentNode) : contentNode == null || contentNode === false ? null : contentNode);
-    });
-  };
-  const animated = React.useRef(new Animated.Value(visible ? 1 : 0)).current;
-  const animationRef = React.useRef(null);
-  const [contentHeight, setContentHeight] = React.useState(0);
-  const [shouldRender, setShouldRender] = React.useState(visible);
-  const effectiveDuration = transition === false ? 0 : transitionDuration;
-  React.useEffect(() => {
-    if (visible) {
-      setShouldRender(true);
-    }
-    animationRef.current?.stop();
-    const animation = Animated.timing(animated, {
-      toValue: visible ? 1 : 0,
-      duration: effectiveDuration,
-      useNativeDriver: nativeDriverEnabled,
-      easing: visible ? Easing.out(Easing.cubic) : Easing.in(Easing.cubic)
-    });
-    animationRef.current = animation;
-    animation.start(({
-      finished
-    }) => {
-      if (finished && !visible) {
-        setShouldRender(false);
-      }
-    });
-    return () => {
-      animationRef.current?.stop();
-      animationRef.current = null;
-    };
-  }, [animated, visible, effectiveDuration]);
-  const translateY = animated.interpolate({
-    inputRange: [0, 1],
-    outputRange: [contentHeight || 320, 0]
-  });
-  const handleLayout = e => {
-    const {
-      height
-    } = e.nativeEvent.layout;
-    if (Math.abs(height - contentHeight) > 0.5) {
-      setContentHeight(height);
-    }
-  };
-  if (!shouldRender && !visible) {
-    return null;
-  }
-  const keyboardNode = /*#__PURE__*/React.createElement(Animated.View, _extends({}, rest, {
-    pointerEvents: visible ? 'auto' : 'none',
-    onLayout: handleLayout,
-    style: [styles.wrapper, wrapperShadow, style, {
-      transform: [{
-        translateY
-      }],
-      backgroundColor: colors.background
-    }]
-  }), (title || closeButtonText) && theme === 'default' && /*#__PURE__*/React.createElement(View, {
-    style: [styles.header, {
-      paddingHorizontal: spacing.titlePadding
-    }]
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: [styles.title, styles.titleOverlay, {
-      color: colors.title
-    }],
-    numberOfLines: 1
-  }, title), resolvedCloseText ? /*#__PURE__*/React.createElement(Pressable, {
-    onPress: () => handleInput(undefined, 'close'),
-    style: styles.headerClose,
-    accessibilityRole: "button",
-    accessibilityLabel: resolvedCloseText
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: {
-      color: colors.title
-    }
-  }, resolvedCloseText)) : null), theme === 'custom' ? /*#__PURE__*/React.createElement(View, {
-    style: [styles.customRow, {
-      paddingHorizontal: spacing.paddingHorizontal,
-      paddingBottom: spacing.paddingVertical,
-      gap: spacing.keyGap
-    }]
-  }, /*#__PURE__*/React.createElement(View, {
-    style: [styles.customMain, {
-      gap: spacing.keyGap
-    }]
-  }, keys.map((key, index) => renderKey(key, index))), /*#__PURE__*/React.createElement(View, {
-    style: [styles.customSidebar, {
-      gap: spacing.keyGap
-    }]
-  }, showDeleteKey ? renderKey({
-    type: 'delete'
-  }, 999) : null, renderKey({
-    type: 'close',
-    text: resolvedCloseText
-  }, 1000, {
-    isClose: true
-  }))) : /*#__PURE__*/React.createElement(View, {
-    style: [styles.defaultRow, {
-      paddingHorizontal: spacing.paddingHorizontal,
-      paddingBottom: spacing.paddingVertical,
-      gap: spacing.keyGap
-    }]
-  }, keys.map((key, index) => renderKey(key, index))), safeAreaInsetBottom ? /*#__PURE__*/React.createElement(SafeAreaView, {
-    style: {
-      width: '100%'
-    }
-  }) : null);
-  return /*#__PURE__*/React.createElement(Portal, null, keyboardNode);
-};
-const styles = StyleSheet.create({
-  wrapper: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 0
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    height: 44,
-    position: 'relative'
-  },
-  title: {
-    fontSize: 16,
-    fontWeight: '600'
-  },
-  titleOverlay: {
-    position: 'absolute',
-    left: 12,
-    right: 12,
-    textAlign: 'center'
-  },
-  headerClose: {
-    minWidth: 56,
-    alignItems: 'flex-end'
-  },
-  key: {
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  keyText: {
-    includeFontPadding: false,
-    textAlign: 'center'
-  },
-  defaultRow: {
-    flexDirection: 'row',
-    flexWrap: 'wrap'
-  },
-  customRow: {
-    flexDirection: 'row'
-  },
-  customMain: {
-    flex: 3,
-    flexDirection: 'row',
-    flexWrap: 'wrap'
-  },
-  customSidebar: {
-    flex: 1,
-    flexDirection: 'column',
-    justifyContent: 'space-between'
-  }
-});
-NumberKeyboard.displayName = 'NumberKeyboard';
-export default NumberKeyboard;

package/dist/es/components/number-keyboard/tokens.js

@@ -1,45 +0,0 @@
-import { createComponentTokensHook } from '../../design-system';
-const createTokens = foundations => {
-  const {
-    palette,
-    spacing,
-    radii,
-    fontSize
-  } = foundations;
-  const onPrimary = palette.primary.foreground ?? '#ffffff';
-  return {
-    colors: {
-      background: palette.default[100],
-      title: palette.default[700],
-      keyBackground: '#ffffff',
-      keyActiveBackground: palette.default[100],
-      keyText: palette.default[900],
-      keyTextActive: palette.primary[600],
-      closeBackground: palette.primary[600],
-      closeText: onPrimary,
-      border: palette.default[200]
-    },
-    spacing: {
-      paddingHorizontal: spacing.md,
-      paddingVertical: spacing.sm,
-      keyGap: spacing.xs,
-      titlePadding: spacing.md
-    },
-    sizing: {
-      keyHeight: 54,
-      closeHeight: 44,
-      fontSize: 28
-    },
-    radii: {
-      key: radii.xs
-    },
-    shadow: {
-      color: '#000000',
-      opacity: 0.08,
-      radius: 6,
-      offsetY: 0,
-      elevation: 6
-    }
-  };
-};
-export const useNumberKeyboardTokens = createComponentTokensHook('numberKeyboard', createTokens);