react-native-system-ui 0.0.1-beta0 → 0.0.2

package/dist/es/notice-bar/NoticeBar.js

@@ -0,0 +1,364 @@
+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, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Easing, Pressable, StyleSheet, Text, View, Platform } from 'react-native';
+import { Arrow, Close } from 'react-native-system-icon';
+import { useAriaPress } from '../../hooks';
+import { parseNumber } from '../../utils/number';
+import { isRenderable, isText } from '../../utils/validate';
+import { nativeDriverEnabled } from '../../platform';
+import { useNoticeBarTokens } from './tokens';
+const AnimatedText = Animated.createAnimatedComponent(Text);
+const IS_WEB = Platform.OS === 'web';
+if (IS_WEB) {
+  const globalObj = typeof globalThis !== 'undefined' ? globalThis : window;
+  if (globalObj.global === undefined) {
+    globalObj.global = globalObj;
+  }
+}
+export const NoticeBar = props => {
+  const {
+    text,
+    children,
+    color,
+    background,
+    leftIcon,
+    rightIcon,
+    mode,
+    tokensOverride,
+    delay = 1,
+    speed = 60,
+    scrollable,
+    wrapable = false,
+    direction = 'horizontal',
+    items,
+    verticalInterval = 3000,
+    verticalDuration = 300,
+    onPress,
+    onClose,
+    onReplay,
+    textProps,
+    style,
+    ...rest
+  } = props;
+  const tokens = useNoticeBarTokens(tokensOverride);
+  const resolvedColor = color ?? tokens.colors.text;
+  const resolvedBackground = background ?? tokens.colors.background;
+  const content = text ?? children;
+  const isTextContent = isText(content);
+  const isVertical = direction === 'vertical';
+  const [visible, setVisible] = useState(true);
+  const {
+    onLayout: textOnLayout,
+    ...restTextProps
+  } = textProps ?? {};
+  const [contentWidth, setContentWidth] = useState(0);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const translateX = useRef(new Animated.Value(0)).current;
+  const resolvedDelay = Math.max(0, parseNumber(delay, 1));
+  const resolvedSpeed = parseNumber(speed, 60);
+  const resolvedVerticalInterval = Math.max(0, parseNumber(verticalInterval, 3000));
+  const resolvedVerticalDuration = Math.max(0, parseNumber(verticalDuration, 300));
+  const verticalItems = useMemo(() => {
+    if (!isVertical) return [];
+    if (items && items.length) return items;
+    const childArray = React.Children.toArray(children);
+    if (childArray.length) return childArray;
+    return text !== undefined ? [text] : [];
+  }, [children, isVertical, items, text]);
+  const hasVerticalLoop = isVertical && verticalItems.length > 1;
+  const verticalTrackItems = useMemo(() => hasVerticalLoop ? [...verticalItems, verticalItems[0]] : verticalItems, [hasVerticalLoop, verticalItems]);
+  const verticalTranslateY = useRef(new Animated.Value(0)).current;
+  const [itemHeight, setItemHeight] = useState(0);
+  const setContentWidthSafe = useCallback(next => {
+    setContentWidth(prev => Math.abs(prev - next) < 0.5 ? prev : next);
+  }, []);
+  const setContainerWidthSafe = useCallback(next => {
+    setContainerWidth(prev => Math.abs(prev - next) < 0.5 ? prev : next);
+  }, []);
+  const handleClose = useCallback(() => {
+    setVisible(false);
+    onClose?.();
+  }, [onClose]);
+  const closePress = useAriaPress({
+    disabled: mode !== 'closeable' || !visible,
+    onPress: handleClose,
+    extraProps: {
+      accessibilityRole: 'button',
+      accessibilityLabel: '关闭'
+    }
+  });
+  const barPress = useAriaPress({
+    disabled: !onPress || !visible,
+    onPress,
+    extraProps: onPress ? {
+      accessibilityRole: 'button'
+    } : undefined
+  });
+  const rightNode = useMemo(() => {
+    if (mode === 'closeable') {
+      return /*#__PURE__*/React.createElement(Pressable, _extends({
+        hitSlop: 8
+      }, closePress.interactionProps), /*#__PURE__*/React.createElement(Close, {
+        size: 16,
+        fill: resolvedColor,
+        color: resolvedColor
+      }));
+    }
+    if (mode === 'link') {
+      return /*#__PURE__*/React.createElement(Arrow, {
+        size: 16,
+        fill: resolvedColor,
+        color: resolvedColor
+      });
+    }
+    return rightIcon || null;
+  }, [closePress.interactionProps, mode, resolvedColor, rightIcon]);
+  const hasLeft = isRenderable(leftIcon);
+  const hasRight = Boolean(rightNode);
+  const effectiveContainerWidth = useMemo(() => Math.max(0, containerWidth - (hasLeft ? tokens.spacing.sidePadding : 0) - (hasRight ? tokens.spacing.sidePadding : 0)), [containerWidth, hasLeft, hasRight, tokens.spacing.sidePadding]);
+  const shouldScroll = useMemo(() => !isVertical && !wrapable && (scrollable ?? contentWidth > effectiveContainerWidth), [contentWidth, effectiveContainerWidth, isVertical, scrollable, wrapable]);
+  useEffect(() => {
+    if (!visible) {
+      translateX.stopAnimation();
+      return;
+    }
+    if (isVertical) {
+      translateX.stopAnimation();
+      return;
+    }
+    if (!shouldScroll || contentWidth === 0 || containerWidth === 0) {
+      translateX.setValue(0);
+      return;
+    }
+    if (resolvedSpeed <= 0 || !Number.isFinite(resolvedSpeed)) {
+      translateX.setValue(0);
+      return;
+    }
+    let cancelled = false;
+    const duration = (contentWidth + containerWidth) / resolvedSpeed * 1000;
+    const run = initial => {
+      translateX.setValue(initial ? 0 : containerWidth);
+      Animated.sequence([Animated.delay(resolvedDelay * 1000), Animated.timing(translateX, {
+        toValue: -contentWidth,
+        duration,
+        easing: Easing.linear,
+        useNativeDriver: nativeDriverEnabled
+      })]).start(({
+        finished
+      }) => {
+        if (finished && !cancelled) {
+          onReplay?.();
+          run(false);
+        }
+      });
+    };
+    run(true);
+    return () => {
+      cancelled = true;
+      translateX.stopAnimation();
+    };
+  }, [shouldScroll, translateX, visible, resolvedDelay, resolvedSpeed, contentWidth, containerWidth, onReplay, isVertical]);
+  useEffect(() => {
+    if (!visible) {
+      verticalTranslateY.stopAnimation();
+      return;
+    }
+    if (!hasVerticalLoop || itemHeight === 0) {
+      verticalTranslateY.setValue(0);
+      return;
+    }
+    let cancelled = false;
+    let timeout = null;
+    let nextIndex = 1;
+    const schedule = () => {
+      timeout = setTimeout(() => {
+        Animated.timing(verticalTranslateY, {
+          toValue: -itemHeight * nextIndex,
+          duration: resolvedVerticalDuration,
+          easing: Easing.linear,
+          useNativeDriver: nativeDriverEnabled
+        }).start(({
+          finished
+        }) => {
+          if (cancelled || !finished) {
+            return;
+          }
+          nextIndex += 1;
+          if (nextIndex > verticalItems.length) {
+            verticalTranslateY.setValue(0);
+            nextIndex = 1;
+          }
+          schedule();
+        });
+      }, resolvedVerticalInterval);
+    };
+    schedule();
+    return () => {
+      cancelled = true;
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+      verticalTranslateY.stopAnimation();
+    };
+  }, [visible, hasVerticalLoop, itemHeight, resolvedVerticalDuration, resolvedVerticalInterval, verticalItems, verticalTranslateY]);
+  const handleItemLayout = useCallback(event => {
+    const height = event?.nativeEvent?.layout?.height;
+    if (!height) return;
+    setItemHeight(prev => prev === 0 || Math.abs(prev - height) >= 0.5 ? height : prev);
+  }, []);
+  const verticalContentNode = useMemo(() => {
+    if (!isVertical) return null;
+    if (verticalTrackItems.length === 0) return null;
+    if (!hasVerticalLoop) {
+      const single = verticalTrackItems[0];
+      if (isText(single)) {
+        return /*#__PURE__*/React.createElement(Text, _extends({
+          onLayout: textOnLayout,
+          style: [styles.text, {
+            color: resolvedColor,
+            fontSize: tokens.typography.fontSize
+          }],
+          numberOfLines: 1,
+          ellipsizeMode: "tail"
+        }, restTextProps), single);
+      }
+      return single;
+    }
+    return /*#__PURE__*/React.createElement(View, {
+      style: [styles.verticalViewport, itemHeight ? {
+        height: itemHeight
+      } : undefined],
+      pointerEvents: "none"
+    }, /*#__PURE__*/React.createElement(Animated.View, {
+      style: [styles.verticalTrack, {
+        transform: [{
+          translateY: verticalTranslateY
+        }]
+      }]
+    }, verticalTrackItems.map((item, index) => /*#__PURE__*/React.createElement(View, {
+      key: index,
+      onLayout: index === 0 ? handleItemLayout : undefined,
+      style: styles.verticalItem
+    }, isText(item) ? /*#__PURE__*/React.createElement(Text, _extends({
+      onLayout: textOnLayout,
+      style: [styles.text, {
+        color: resolvedColor,
+        fontSize: tokens.typography.fontSize
+      }],
+      numberOfLines: 1,
+      ellipsizeMode: "tail"
+    }, restTextProps), item) : item))));
+  }, [handleItemLayout, hasVerticalLoop, isVertical, itemHeight, resolvedColor, restTextProps, textOnLayout, tokens.typography.fontSize, verticalTrackItems, verticalTranslateY]);
+  const handleContainerLayout = useCallback(event => {
+    setContainerWidthSafe(event.nativeEvent.layout.width);
+  }, [setContainerWidthSafe]);
+  const handleTextLayout = useCallback(event => {
+    setContentWidthSafe(event.nativeEvent.layout.width);
+    textOnLayout?.(event);
+  }, [setContentWidthSafe, textOnLayout]);
+  const handleNodeLayout = useCallback(event => setContentWidthSafe(event.nativeEvent.layout.width), [setContentWidthSafe]);
+  if (!visible) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Pressable, _extends({
+    style: [styles.container, {
+      backgroundColor: resolvedBackground,
+      paddingHorizontal: tokens.spacing.paddingHorizontal,
+      paddingVertical: wrapable ? tokens.spacing.wrapPaddingVertical : tokens.spacing.paddingVertical,
+      minHeight: tokens.layout.minHeight,
+      borderRadius: tokens.layout.radius
+    }, style],
+    disabled: barPress.states.disabled
+  }, barPress.interactionProps, rest), hasLeft ? /*#__PURE__*/React.createElement(View, {
+    style: [styles.sideSection, {
+      minWidth: tokens.layout.sideMinWidth
+    }]
+  }, leftIcon) : null, /*#__PURE__*/React.createElement(View, {
+    onLayout: handleContainerLayout,
+    style: [styles.content, wrapable && styles.contentWrap, hasLeft && {
+      paddingLeft: tokens.spacing.sidePadding
+    }, hasRight && {
+      paddingRight: tokens.spacing.sidePadding
+    }],
+    pointerEvents: "none"
+  }, isVertical ? verticalContentNode : shouldScroll ? isTextContent ? /*#__PURE__*/React.createElement(AnimatedText, _extends({
+    onLayout: handleTextLayout,
+    style: [styles.text, styles.scrollText, {
+      color: resolvedColor,
+      fontSize: tokens.typography.fontSize,
+      transform: [{
+        translateX
+      }]
+    }]
+  }, IS_WEB ? {} : {
+    numberOfLines: 1,
+    ellipsizeMode: 'clip'
+  }, restTextProps), content) : /*#__PURE__*/React.createElement(Animated.View, {
+    onLayout: handleNodeLayout,
+    style: [styles.text, {
+      transform: [{
+        translateX
+      }]
+    }]
+  }, content) : isTextContent ? /*#__PURE__*/React.createElement(Text, _extends({
+    onLayout: handleTextLayout,
+    style: [styles.text, {
+      color: resolvedColor,
+      fontSize: tokens.typography.fontSize
+    }, wrapable && styles.wrapText],
+    numberOfLines: wrapable ? undefined : 1,
+    ellipsizeMode: wrapable ? 'tail' : 'clip'
+  }, restTextProps), content) : /*#__PURE__*/React.createElement(View, {
+    onLayout: handleNodeLayout,
+    style: [styles.text, wrapable && styles.wrapText]
+  }, content)), rightNode ? /*#__PURE__*/React.createElement(View, {
+    style: [styles.sideSection, {
+      minWidth: tokens.layout.sideMinWidth
+    }]
+  }, rightNode) : null);
+};
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  sideSection: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+    overflow: 'hidden'
+  },
+  text: {
+    flexShrink: 0
+  },
+  scrollText: Platform.select({
+    web: {
+      whiteSpace: 'nowrap',
+      textOverflow: 'clip'
+    },
+    default: {}
+  }),
+  wrapText: {
+    flexWrap: 'wrap',
+    flexShrink: 1
+  },
+  contentWrap: {
+    flexDirection: 'column'
+  },
+  verticalViewport: {
+    width: '100%',
+    overflow: 'hidden'
+  },
+  verticalTrack: {
+    flexDirection: 'column',
+    width: '100%'
+  },
+  verticalItem: {
+    width: '100%',
+    justifyContent: 'center'
+  }
+});
+NoticeBar.displayName = 'NoticeBar';

package/dist/es/notice-bar/index.js

@@ -0,0 +1,2 @@
+import { NoticeBar } from './NoticeBar';
+export default NoticeBar;

package/dist/es/notice-bar/tokens.js

@@ -0,0 +1,30 @@
+import { createComponentTokensHook } from '../../design-system';
+export const createNoticeBarTokens = foundations => {
+  const {
+    palette,
+    fontSize,
+    spacing,
+    radii
+  } = foundations;
+  return {
+    colors: {
+      text: palette.warning[600],
+      background: palette.warning[50]
+    },
+    typography: {
+      fontSize: fontSize.sm
+    },
+    layout: {
+      minHeight: 40,
+      radius: radii.lg,
+      sideMinWidth: 24
+    },
+    spacing: {
+      paddingHorizontal: spacing.lg,
+      paddingVertical: spacing.sm,
+      wrapPaddingVertical: spacing.md,
+      sidePadding: spacing.sm
+    }
+  };
+};
+export const useNoticeBarTokens = createComponentTokensHook('noticeBar', createNoticeBarTokens);

package/dist/es/notify/Notify.js

@@ -0,0 +1,178 @@
+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, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Pressable, SafeAreaView, Text, View } from 'react-native';
+import { isFunction, isText } from '../../utils';
+import { useAriaPress } from '../../hooks';
+import { usePresenceAnimation } from '../../hooks/usePresenceAnimation';
+import Portal from '../portal/Portal';
+import { useOverlayStack } from '../overlay';
+import { SafeAreaClipProvider } from '../safe-area';
+import { useNotifyTokens } from './tokens';
+export const Notify = props => {
+  const {
+    visible,
+    message,
+    type: typeProp,
+    duration: durationProp,
+    position: positionProp,
+    color,
+    background,
+    zIndex,
+    closeOnClick: closeOnClickProp,
+    style,
+    textStyle,
+    tokensOverride,
+    onClick,
+    onClose,
+    onOpen,
+    onOpened,
+    onClosed
+  } = props;
+  const tokens = useNotifyTokens(tokensOverride);
+  const type = typeProp ?? tokens.defaults.type;
+  const position = positionProp ?? tokens.defaults.position;
+  const closeOnClick = closeOnClickProp ?? tokens.defaults.closeOnClick;
+  const safeAreaInsetTop = props.safeAreaInsetTop ?? (position === 'top' ? tokens.defaults.safeAreaInsetTop : false);
+  const safeAreaInsetBottom = props.safeAreaInsetBottom ?? (position === 'bottom' ? tokens.defaults.safeAreaInsetBottom : false);
+  const variant = tokens.colors.variants[type];
+  const resolvedBackground = background ?? variant.background;
+  const resolvedTextColor = color ?? variant.text;
+  const resolvedDuration = durationProp ?? tokens.defaults.duration;
+  const topInsetStyle = useMemo(() => ({
+    backgroundColor: resolvedBackground
+  }), [resolvedBackground]);
+  const {
+    mounted,
+    animated
+  } = usePresenceAnimation(visible, {
+    duration: tokens.defaults.animationDuration,
+    appear: true
+  });
+  const {
+    zIndex: stackZIndex
+  } = useOverlayStack({
+    visible: mounted,
+    type: 'notify',
+    zIndex
+  });
+  const prevVisibleRef = useRef(visible);
+  const closingRef = useRef(false);
+  useEffect(() => {
+    let openedTimer = null;
+    if (visible) {
+      closingRef.current = false;
+      if (!prevVisibleRef.current) {
+        onOpen?.();
+        if (onOpened) openedTimer = setTimeout(onOpened, tokens.defaults.animationDuration);
+      }
+    } else if (prevVisibleRef.current) {
+      closingRef.current = true;
+    }
+    prevVisibleRef.current = visible;
+    return () => {
+      if (openedTimer) clearTimeout(openedTimer);
+    };
+  }, [onOpen, onOpened, tokens.defaults.animationDuration, visible]);
+  useEffect(() => {
+    if (!mounted && closingRef.current) {
+      closingRef.current = false;
+      onClosed?.();
+    }
+  }, [mounted, onClosed]);
+  useEffect(() => {
+    let timer = null;
+    if (visible && resolvedDuration > 0) {
+      timer = setTimeout(() => {
+        onClose?.();
+      }, resolvedDuration);
+    }
+    return () => {
+      if (timer) clearTimeout(timer);
+    };
+  }, [onClose, resolvedDuration, visible]);
+  const interactive = closeOnClick || isFunction(onClick);
+  const handlePress = useCallback(() => {
+    onClick?.();
+    if (closeOnClick) onClose?.();
+  }, [closeOnClick, onClick, onClose]);
+  const accessibilityRole = interactive ? 'button' : 'alert';
+  const press = useAriaPress({
+    disabled: !interactive,
+    onPress: handlePress,
+    extraProps: {
+      accessibilityRole,
+      accessibilityLiveRegion: 'assertive'
+    }
+  });
+  const [barHeight, setBarHeight] = useState(0);
+  const handleLayout = useCallback(event => {
+    const height = event.nativeEvent.layout.height;
+    if (!height) return;
+    setBarHeight(prev => prev === height ? prev : height);
+  }, []);
+  const translateDistance = Math.max(barHeight, tokens.sizing.minHeight);
+  const translateY = position === 'bottom' ? animated.interpolate({
+    inputRange: [0, 1],
+    outputRange: [translateDistance, 0]
+  }) : animated.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-translateDistance, 0]
+  });
+  const hasMessage = message !== undefined && message !== null && message !== false && message !== '';
+  if (!mounted) return null;
+  const resolvedZIndex = stackZIndex ?? zIndex;
+  const renderBar = topInsetNode => /*#__PURE__*/React.createElement(Animated.View, {
+    testID: "rv-notify-bar",
+    accessibilityRole: !interactive ? accessibilityRole : undefined,
+    accessibilityLiveRegion: !interactive ? 'assertive' : undefined,
+    onLayout: handleLayout,
+    style: [tokens.layout.container, {
+      backgroundColor: resolvedBackground,
+      opacity: animated,
+      transform: [{
+        translateY
+      }]
+    }, style]
+  }, topInsetNode, /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.content, {
+      paddingHorizontal: tokens.spacing.paddingHorizontal,
+      paddingVertical: tokens.spacing.paddingVertical,
+      minHeight: tokens.sizing.minHeight
+    }]
+  }, hasMessage ? isText(message) ? /*#__PURE__*/React.createElement(Text, {
+    style: [tokens.layout.text, {
+      color: resolvedTextColor,
+      fontSize: tokens.typography.fontSize,
+      lineHeight: tokens.typography.lineHeight
+    }, textStyle]
+  }, message) : message : null), safeAreaInsetBottom && /*#__PURE__*/React.createElement(SafeAreaView, {
+    style: tokens.layout.safeArea
+  }));
+  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(SafeAreaClipProvider, {
+    enabled: safeAreaInsetTop,
+    position: position,
+    topInsetStyle: topInsetStyle,
+    style: [tokens.layout.portal, position === 'bottom' ? {
+      bottom: 0
+    } : {
+      top: 0
+    }, resolvedZIndex !== undefined && resolvedZIndex !== null ? {
+      zIndex: resolvedZIndex
+    } : null]
+  }, ({
+    clipTop,
+    topInset
+  }) => {
+    const topInsetNode = clipTop ? null : safeAreaInsetTop ? /*#__PURE__*/React.createElement(SafeAreaView, {
+      style: tokens.layout.safeArea
+    }) : topInset;
+    return /*#__PURE__*/React.createElement(View, {
+      testID: "rv-notify",
+      pointerEvents: interactive ? 'box-none' : 'none'
+    }, interactive ? /*#__PURE__*/React.createElement(Pressable, _extends({}, press.interactionProps, {
+      disabled: !interactive
+    }), renderBar(topInsetNode)) : renderBar(topInsetNode));
+  }));
+};
+Notify.displayName = 'Notify';
+export default Notify;

package/dist/es/notify/defaults.js

@@ -0,0 +1,9 @@
+export const notifyDefaults = {
+  type: 'primary',
+  position: 'top',
+  duration: 3000,
+  closeOnClick: false,
+  animationDuration: 220,
+  safeAreaInsetTop: false,
+  safeAreaInsetBottom: false
+};