react-native-system-ui 1.0.1 → 1.0.3

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

@@ -1,344 +1 @@
-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 { useLocale } from '../config-provider/useLocale';
-import { useDirection } from '../config-provider/useDirection';
-import { parseNumber } from '../../utils/number';
-import { isRenderable, isText } from '../../utils/validate';
-import { renderTextOrNode } from '../../utils';
-import { nativeDriverEnabled } from '../../platform';
-import { useReducedMotion } from '../../hooks/animation';
-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;
-}
-const NoticeBarImpl = 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 locale = useLocale();
-  const layoutDir = useDirection();
-  const reducedMotion = useReducedMotion();
-  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 arr = React.Children.toArray(children);
-    if (arr.length) return arr;
-    return text !== undefined ? [text] : [];
-  }, [children, isVertical, items, text]);
-  const hasVerticalLoop = !reducedMotion && 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 onCloseRef = useRef(onClose);
-  onCloseRef.current = onClose;
-  const onReplayRef = useRef(onReplay);
-  onReplayRef.current = onReplay;
-  const handleClose = useCallback(() => {
-    setVisible(false);
-    onCloseRef.current?.();
-  }, []);
-  const closePress = useAriaPress({
-    disabled: mode !== 'closeable' || !visible,
-    onPress: handleClose,
-    extraProps: {
-      accessibilityRole: 'button',
-      accessibilityLabel: locale?.vanNoticeBar?.close ?? 'Close'
-    }
-  });
-  const barPress = useAriaPress({
-    disabled: !onPress || !visible,
-    onPress,
-    extraProps: onPress ? {
-      accessibilityRole: 'button'
-    } : undefined
-  });
-  const rightNode = mode === 'closeable' ? /*#__PURE__*/React.createElement(Pressable, _extends({
-    hitSlop: 8
-  }, closePress.interactionProps), /*#__PURE__*/React.createElement(Close, {
-    size: 16,
-    fill: resolvedColor,
-    color: resolvedColor
-  })) : mode === 'link' ? /*#__PURE__*/React.createElement(Arrow, {
-    size: 16,
-    fill: resolvedColor,
-    color: resolvedColor
-  }) : rightIcon || null;
-  const hasLeft = isRenderable(leftIcon);
-  const hasRight = Boolean(rightNode);
-  const effectiveContainerWidth = Math.max(0, containerWidth - (hasLeft ? tokens.spacing.sidePadding : 0) - (hasRight ? tokens.spacing.sidePadding : 0));
-  const shouldScroll = !reducedMotion && !isVertical && !wrapable && (scrollable ?? contentWidth > effectiveContainerWidth);
-  useEffect(() => {
-    if (!visible || isVertical) {
-      translateX.stopAnimation();
-      return;
-    }
-    if (!shouldScroll || contentWidth === 0 || containerWidth === 0 || resolvedSpeed <= 0 || !Number.isFinite(resolvedSpeed)) {
-      translateX.setValue(0);
-      return;
-    }
-    let cancelled = false;
-    const duration = (contentWidth + containerWidth) / resolvedSpeed * 1000;
-    const rtlSign = layoutDir === 'rtl' ? -1 : 1;
-    const run = initial => {
-      translateX.setValue(initial ? 0 : rtlSign * containerWidth);
-      Animated.sequence([Animated.delay(resolvedDelay * 1000), Animated.timing(translateX, {
-        toValue: -rtlSign * contentWidth,
-        duration,
-        easing: Easing.linear,
-        useNativeDriver: nativeDriverEnabled,
-        isInteraction: false
-      })]).start(({
-        finished
-      }) => {
-        if (finished && !cancelled) {
-          onReplayRef.current?.();
-          run(false);
-        }
-      });
-    };
-    run(true);
-    return () => {
-      cancelled = true;
-      translateX.stopAnimation();
-    };
-  }, [shouldScroll, translateX, visible, resolvedDelay, resolvedSpeed, contentWidth, containerWidth, isVertical, layoutDir]);
-  useEffect(() => {
-    if (!visible) {
-      verticalTranslateY.stopAnimation();
-      return;
-    }
-    if (!hasVerticalLoop || itemHeight === 0) {
-      verticalTranslateY.setValue(0);
-      return;
-    }
-    const steps = [];
-    for (let i = 1; i <= verticalItems.length; i += 1) {
-      steps.push(Animated.delay(resolvedVerticalInterval), Animated.timing(verticalTranslateY, {
-        toValue: -itemHeight * i,
-        duration: resolvedVerticalDuration,
-        easing: Easing.linear,
-        useNativeDriver: nativeDriverEnabled,
-        isInteraction: false
-      }));
-    }
-    steps.push(Animated.timing(verticalTranslateY, {
-      toValue: 0,
-      duration: 0,
-      useNativeDriver: nativeDriverEnabled,
-      isInteraction: false
-    }));
-    const loopAnimation = Animated.loop(Animated.sequence(steps));
-    loopAnimation.start();
-    return () => {
-      loopAnimation.stop();
-      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 || verticalTrackItems.length === 0) return null;
-    if (!hasVerticalLoop) return renderTextOrNode(verticalTrackItems[0], [S.text, {
-      color: resolvedColor,
-      fontFamily: tokens.typography.fontFamily,
-      fontSize: tokens.typography.fontSize
-    }], {
-      numberOfLines: 1,
-      ...restTextProps
-    });
-    return /*#__PURE__*/React.createElement(View, {
-      style: [S.vViewport, itemHeight ? {
-        height: itemHeight
-      } : undefined],
-      pointerEvents: "none"
-    }, /*#__PURE__*/React.createElement(Animated.View, {
-      renderToHardwareTextureAndroid: true,
-      shouldRasterizeIOS: true,
-      style: [S.vTrack, {
-        transform: [{
-          translateY: verticalTranslateY
-        }]
-      }]
-    }, verticalTrackItems.map((item, index) => /*#__PURE__*/React.createElement(View, {
-      key: index,
-      onLayout: index === 0 ? handleItemLayout : undefined,
-      style: S.vItem
-    }, renderTextOrNode(item, [S.text, {
-      color: resolvedColor,
-      fontFamily: tokens.typography.fontFamily,
-      fontSize: tokens.typography.fontSize
-    }], {
-      numberOfLines: 1,
-      ...restTextProps
-    })))));
-  }, [handleItemLayout, hasVerticalLoop, isVertical, itemHeight, resolvedColor, restTextProps, textOnLayout, tokens.typography.fontFamily, 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: [S.ctr, {
-      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: [S.side, {
-      minWidth: tokens.layout.sideMinWidth
-    }]
-  }, leftIcon), /*#__PURE__*/React.createElement(View, {
-    onLayout: handleContainerLayout,
-    style: [S.content, wrapable && S.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: [S.text, S.scrollText, {
-      color: resolvedColor,
-      fontFamily: tokens.typography.fontFamily,
-      fontSize: tokens.typography.fontSize,
-      transform: [{
-        translateX
-      }]
-    }]
-  }, IS_WEB ? {} : {
-    numberOfLines: 1,
-    ellipsizeMode: 'clip'
-  }, restTextProps), content) : /*#__PURE__*/React.createElement(Animated.View, {
-    onLayout: handleNodeLayout,
-    renderToHardwareTextureAndroid: true,
-    shouldRasterizeIOS: true,
-    style: [S.text, {
-      transform: [{
-        translateX
-      }]
-    }]
-  }, content) : isTextContent ? /*#__PURE__*/React.createElement(Text, _extends({
-    onLayout: handleTextLayout,
-    style: [S.text, {
-      color: resolvedColor,
-      fontFamily: tokens.typography.fontFamily,
-      fontSize: tokens.typography.fontSize
-    }, wrapable && S.wrapText],
-    numberOfLines: wrapable ? undefined : 1,
-    ellipsizeMode: wrapable ? 'tail' : 'clip'
-  }, restTextProps), content) : /*#__PURE__*/React.createElement(View, {
-    onLayout: handleNodeLayout,
-    style: [S.text, wrapable && S.wrapText]
-  }, content)), rightNode && /*#__PURE__*/React.createElement(View, {
-    style: [S.side, {
-      minWidth: tokens.layout.sideMinWidth
-    }]
-  }, rightNode));
-};
-const S = StyleSheet.create({
-  ctr: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  side: {
-    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'
-  },
-  vViewport: {
-    width: '100%',
-    overflow: 'hidden'
-  },
-  vTrack: {
-    flexDirection: 'column',
-    width: '100%'
-  },
-  vItem: {
-    width: '100%',
-    justifyContent: 'center'
-  }
-});
-export const NoticeBar = /*#__PURE__*/React.memo(NoticeBarImpl);
-NoticeBar.displayName = 'NoticeBar';
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var i in a)({}).hasOwnProperty.call(a,i)&&(e[i]=a[i])}return e},_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{useLocale}from"../config-provider/useLocale";import{useDirection}from"../config-provider/useDirection";import{parseNumber}from"../../utils/number";import{isRenderable,isText}from"../../utils/validate";import{renderTextOrNode}from"../../utils";import{nativeDriverEnabled}from"../../platform";import{useReducedMotion}from"../../hooks/animation";import{useNoticeBarTokens}from"./tokens";const AnimatedText=Animated.createAnimatedComponent(Text),IS_WEB="web"===Platform.OS;if(IS_WEB){const e="undefined"!=typeof globalThis?globalThis:window;void 0===e.global&&(e.global=e)}const NoticeBarImpl=e=>{const{text:t,children:a,color:i,background:n,leftIcon:r,rightIcon:o,mode:s,tokensOverride:l,delay:c=1,speed:d=60,scrollable:u,wrapable:m=!1,direction:p="horizontal",items:f,verticalInterval:y=3e3,verticalDuration:h=300,onPress:g,onClose:b,onReplay:v,textProps:x,style:w,...E}=e,R=useLocale(),A=useDirection(),T=useReducedMotion(),k=useNoticeBarTokens(l),P=i??k.colors.text,V=n??k.colors.background,N=t??a,z=isText(N),C="vertical"===p,[I,M]=useState(!0),{onLayout:L,...D}=x??{},[O,B]=useState(0),[F,W]=useState(0),_=useRef(new Animated.Value(0)).current,H=Math.max(0,parseNumber(c,1)),j=parseNumber(d,60),q=Math.max(0,parseNumber(y,3e3)),X=Math.max(0,parseNumber(h,300)),Y=useMemo(()=>{if(!C)return[];if(f&&f.length)return f;const e=React.Children.toArray(a);return e.length?e:void 0!==t?[t]:[]},[a,C,f,t]),G=!T&&C&&Y.length>1,J=useMemo(()=>G?[...Y,Y[0]]:Y,[G,Y]),K=useRef(new Animated.Value(0)).current,[Q,U]=useState(0),Z=useCallback(e=>{B(t=>Math.abs(t-e)<.5?t:e)},[]),$=useCallback(e=>{W(t=>Math.abs(t-e)<.5?t:e)},[]),ee=useRef(b);ee.current=b;const te=useRef(v);te.current=v;const ae=useCallback(()=>{M(!1),ee.current?.()},[]),ie=useAriaPress({disabled:"closeable"!==s||!I,onPress:ae,extraProps:{accessibilityRole:"button",accessibilityLabel:R?.vanNoticeBar?.close??"Close"}}),ne=useAriaPress({disabled:!g||!I,onPress:g,extraProps:g?{accessibilityRole:"button"}:void 0}),re="closeable"===s?React.createElement(Pressable,_extends({hitSlop:8},ie.interactionProps),React.createElement(Close,{size:16,fill:P,color:P})):"link"===s?React.createElement(Arrow,{size:16,fill:P,color:P}):o||null,oe=isRenderable(r),se=Boolean(re),le=Math.max(0,F-(oe?k.spacing.sidePadding:0)-(se?k.spacing.sidePadding:0)),ce=!T&&!C&&!m&&(u??O>le);useEffect(()=>{if(!I||C)return void _.stopAnimation();if(!ce||0===O||0===F||j<=0||!Number.isFinite(j))return void _.setValue(0);let e=!1;const t=(O+F)/j*1e3,a="rtl"===A?-1:1,i=n=>{_.setValue(n?0:a*F),Animated.sequence([Animated.delay(1e3*H),Animated.timing(_,{toValue:-a*O,duration:t,easing:Easing.linear,useNativeDriver:nativeDriverEnabled,isInteraction:!1})]).start(({finished:t})=>{t&&!e&&(te.current?.(),i(!1))})};return i(!0),()=>{e=!0,_.stopAnimation()}},[ce,_,I,H,j,O,F,C,A]),useEffect(()=>{if(!I)return void K.stopAnimation();if(!G||0===Q)return void K.setValue(0);const e=[];for(let t=1;t<=Y.length;t+=1)e.push(Animated.delay(q),Animated.timing(K,{toValue:-Q*t,duration:X,easing:Easing.linear,useNativeDriver:nativeDriverEnabled,isInteraction:!1}));e.push(Animated.timing(K,{toValue:0,duration:0,useNativeDriver:nativeDriverEnabled,isInteraction:!1}));const t=Animated.loop(Animated.sequence(e));return t.start(),()=>{t.stop(),K.stopAnimation()}},[I,G,Q,X,q,Y,K]);const de=useCallback(e=>{const t=e?.nativeEvent?.layout?.height;t&&U(e=>0===e||Math.abs(e-t)>=.5?t:e)},[]),ue=useMemo(()=>C&&0!==J.length?G?React.createElement(View,{style:[S.vViewport,Q?{height:Q}:void 0],pointerEvents:"none"},React.createElement(Animated.View,{renderToHardwareTextureAndroid:!0,shouldRasterizeIOS:!0,style:[S.vTrack,{transform:[{translateY:K}]}]},J.map((e,t)=>React.createElement(View,{key:t,onLayout:0===t?de:void 0,style:S.vItem},renderTextOrNode(e,[S.text,{color:P,fontFamily:k.typography.fontFamily,fontSize:k.typography.fontSize}],{numberOfLines:1,...D}))))):renderTextOrNode(J[0],[S.text,{color:P,fontFamily:k.typography.fontFamily,fontSize:k.typography.fontSize}],{numberOfLines:1,...D}):null,[de,G,C,Q,P,D,L,k.typography.fontFamily,k.typography.fontSize,J,K]),me=useCallback(e=>{$(e.nativeEvent.layout.width)},[$]),pe=useCallback(e=>{Z(e.nativeEvent.layout.width),L?.(e)},[Z,L]),fe=useCallback(e=>Z(e.nativeEvent.layout.width),[Z]);return I?React.createElement(Pressable,_extends({style:[S.ctr,{backgroundColor:V,paddingHorizontal:k.spacing.paddingHorizontal,paddingVertical:m?k.spacing.wrapPaddingVertical:k.spacing.paddingVertical,minHeight:k.layout.minHeight,borderRadius:k.layout.radius},w],disabled:ne.states.disabled},ne.interactionProps,E),oe&&React.createElement(View,{style:[S.side,{minWidth:k.layout.sideMinWidth}]},r),React.createElement(View,{onLayout:me,style:[S.content,m&&S.contentWrap,oe&&{paddingLeft:k.spacing.sidePadding},se&&{paddingRight:k.spacing.sidePadding}],pointerEvents:"none"},C?ue:ce?z?React.createElement(AnimatedText,_extends({onLayout:pe,style:[S.text,S.scrollText,{color:P,fontFamily:k.typography.fontFamily,fontSize:k.typography.fontSize,transform:[{translateX:_}]}]},IS_WEB?{}:{numberOfLines:1,ellipsizeMode:"clip"},D),N):React.createElement(Animated.View,{onLayout:fe,renderToHardwareTextureAndroid:!0,shouldRasterizeIOS:!0,style:[S.text,{transform:[{translateX:_}]}]},N):z?React.createElement(Text,_extends({onLayout:pe,style:[S.text,{color:P,fontFamily:k.typography.fontFamily,fontSize:k.typography.fontSize},m&&S.wrapText],numberOfLines:m?void 0:1,ellipsizeMode:m?"tail":"clip"},D),N):React.createElement(View,{onLayout:fe,style:[S.text,m&&S.wrapText]},N)),re&&React.createElement(View,{style:[S.side,{minWidth:k.layout.sideMinWidth}]},re)):null},S=StyleSheet.create({ctr:{flexDirection:"row",alignItems:"center"},side:{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"},vViewport:{width:"100%",overflow:"hidden"},vTrack:{flexDirection:"column",width:"100%"},vItem:{width:"100%",justifyContent:"center"}});export const NoticeBar=React.memo(NoticeBarImpl);NoticeBar.displayName="NoticeBar";

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

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

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

@@ -1,32 +1 @@
-import { createComponentTokensHook } from '../../design-system';
-export const createNoticeBarTokens = foundations => {
-  const {
-    palette,
-    fontSize,
-    spacing,
-    radii,
-    typography
-  } = foundations;
-  return {
-    colors: {
-      text: palette.warning[600],
-      background: palette.warning[50]
-    },
-    typography: {
-      fontFamily: typography.fontFamily,
-      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);
+import{createComponentTokensHook}from"../../design-system";export const createNoticeBarTokens=o=>{const{palette:e,fontSize:t,spacing:n,radii:i,typography:a}=o;return{colors:{text:e.warning[600],background:e.warning[50]},typography:{fontFamily:a.fontFamily,fontSize:t.sm},layout:{minHeight:40,radius:i.lg,sideMinWidth:24},spacing:{paddingHorizontal:n.lg,paddingVertical:n.sm,wrapPaddingVertical:n.md,sidePadding:n.sm}}};export const useNoticeBarTokens=createComponentTokensHook("noticeBar",createNoticeBarTokens);

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

@@ -1,242 +1 @@
-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, Platform, Pressable, View } from 'react-native';
-import { isFunction, isText, renderTextOrNode } from '../../utils';
-import { isRenderable } from '../../utils/validate';
-import { useAriaPress, useSafeAreaPadding, useOverlayStack } from '../../hooks';
-import Portal from '../portal/Portal';
-import { nativeDriverEnabled } from '../../platform';
-import { useReducedMotion } from '../../hooks/animation';
-import { useNotifyTokens } from './tokens';
-const NotifyContentImpl = props => {
-  const {
-    visible,
-    message,
-    type: typeProp,
-    duration: durationProp,
-    position: positionProp,
-    offset: offsetProp,
-    color,
-    background,
-    zIndex,
-    closeOnClick: closeOnClickProp,
-    style,
-    textStyle,
-    tokensOverride,
-    onClick,
-    onClose,
-    onOpen,
-    onOpened,
-    onClosed
-  } = props;
-  const tokens = useNotifyTokens(tokensOverride);
-  const reducedMotion = useReducedMotion();
-  const safeAreaPadding = useSafeAreaPadding({
-    top: 0,
-    bottom: 0
-  });
-  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 safeAreaTopValue = safeAreaInsetTop && position === 'top' ? safeAreaPadding.paddingTop : 0;
-  const safeAreaBottomValue = safeAreaInsetBottom && position === 'bottom' ? safeAreaPadding.paddingBottom : 0;
-  const offset = typeof offsetProp === 'number' && Number.isFinite(offsetProp) ? Math.max(0, offsetProp) : 0;
-  const addOffset = (value, delta) => typeof value === 'string' ? `calc(${value} + ${delta}px)` : value + delta;
-  const safeAreaBottomInset = safeAreaInsetBottom && position === 'bottom' && typeof safeAreaBottomValue === 'number' ? safeAreaBottomValue + offset : offset;
-  const webTopPadding = Platform.OS === 'web' && position === 'top' ? addOffset(safeAreaTopValue, offset) : undefined;
-  const webBottomPadding = Platform.OS === 'web' && safeAreaInsetBottom && position === 'bottom' ? addOffset(safeAreaBottomValue, offset) : undefined;
-  const variant = tokens.colors.variants[type];
-  const resolvedBackground = background ?? variant.background;
-  const resolvedTextColor = color ?? variant.text;
-  const resolvedDuration = durationProp ?? tokens.defaults.duration;
-  const onCloseRef = useRef(onClose);
-  onCloseRef.current = onClose;
-  const onOpenRef = useRef(onOpen);
-  onOpenRef.current = onOpen;
-  const onOpenedRef = useRef(onOpened);
-  onOpenedRef.current = onOpened;
-  const onClosedRef = useRef(onClosed);
-  onClosedRef.current = onClosed;
-  const onClickRef = useRef(onClick);
-  onClickRef.current = onClick;
-  const [barHeight, setBarHeight] = useState(0);
-  const handleLayout = useCallback(e => {
-    const height = e.nativeEvent.layout.height;
-    if (!height) return;
-    setBarHeight(prev => prev === height ? prev : height);
-  }, []);
-  const canAnimate = barHeight > 0;
-  const [mounted, setMounted] = useState(visible);
-  const animatedValue = useRef(new Animated.Value(0)).current;
-  const animationRef = useRef(null);
-  const animationIdRef = useRef(0);
-  const {
-    zIndex: stackZIndex
-  } = useOverlayStack({
-    visible: mounted,
-    type: 'notify',
-    zIndex
-  });
-  const resolvedZIndex = stackZIndex ?? zIndex;
-  const previousVisibleRef = useRef(visible);
-  const closingRef = useRef(false);
-  useEffect(() => {
-    animationIdRef.current += 1;
-    const animationId = animationIdRef.current;
-    animationRef.current?.stop();
-    const d = reducedMotion ? 0 : tokens.defaults.animationDuration;
-    if (visible) {
-      setMounted(true);
-      if (!canAnimate) {
-        animatedValue.setValue(0);
-        return;
-      }
-      animationRef.current = Animated.timing(animatedValue, {
-        toValue: 1,
-        duration: d,
-        easing: Easing.out(Easing.cubic),
-        useNativeDriver: nativeDriverEnabled,
-        isInteraction: false
-      });
-      animationRef.current.start();
-    } else {
-      if (!canAnimate) {
-        animatedValue.setValue(0);
-        setMounted(false);
-        return;
-      }
-      animationRef.current = Animated.timing(animatedValue, {
-        toValue: 0,
-        duration: d,
-        easing: Easing.out(Easing.cubic),
-        useNativeDriver: nativeDriverEnabled,
-        isInteraction: false
-      });
-      animationRef.current.start(({
-        finished
-      }) => {
-        if (!finished || animationId !== animationIdRef.current) return;
-        setMounted(false);
-      });
-    }
-  }, [animatedValue, canAnimate, reducedMotion, tokens.defaults.animationDuration, visible]);
-  useEffect(() => () => {
-    animationRef.current?.stop();
-  }, []);
-  const resolvedAnimDuration = reducedMotion ? 0 : tokens.defaults.animationDuration;
-  useEffect(() => {
-    if (visible) {
-      closingRef.current = false;
-      if (!previousVisibleRef.current) {
-        onOpenRef.current?.();
-        if (onOpenedRef.current) {
-          const cb = onOpenedRef.current;
-          const t = setTimeout(cb, resolvedAnimDuration);
-          previousVisibleRef.current = visible;
-          return () => clearTimeout(t);
-        }
-      }
-    } else if (previousVisibleRef.current) closingRef.current = true;
-    previousVisibleRef.current = visible;
-  }, [resolvedAnimDuration, visible]);
-  useEffect(() => {
-    if (!mounted && closingRef.current) {
-      closingRef.current = false;
-      onClosedRef.current?.();
-    }
-  }, [mounted]);
-  useEffect(() => {
-    if (!visible || resolvedDuration <= 0) return;
-    const timeout = setTimeout(() => {
-      onCloseRef.current?.();
-    }, resolvedDuration);
-    return () => clearTimeout(timeout);
-  }, [resolvedDuration, visible]);
-  const contentHeight = barHeight > 0 ? barHeight : tokens.sizing.minHeight;
-  const interactive = closeOnClick || isFunction(onClick);
-  const handlePress = useCallback(() => {
-    onClickRef.current?.();
-    if (closeOnClick) onCloseRef.current?.();
-  }, [closeOnClick]);
-  const accessibilityRole = interactive ? 'button' : 'alert';
-  const pressProps = useAriaPress({
-    disabled: !interactive,
-    onPress: handlePress,
-    extraProps: {
-      accessibilityRole,
-      accessibilityLiveRegion: 'assertive'
-    }
-  });
-  const translateY = useMemo(() => position === 'bottom' ? animatedValue.interpolate({
-    inputRange: [0, 1],
-    outputRange: [contentHeight, 0]
-  }) : animatedValue.interpolate({
-    inputRange: [0, 1],
-    outputRange: [-contentHeight, 0]
-  }), [animatedValue, contentHeight, position]);
-  const hasMessage = isRenderable(message) && (typeof message !== 'string' || message !== '');
-  const barRender = useMemo(() => /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.container, position === 'top' ? {
-      paddingTop: webTopPadding ?? addOffset(safeAreaTopValue, offset)
-    } : null, webBottomPadding !== undefined ? {
-      paddingBottom: webBottomPadding
-    } : null]
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      height: contentHeight,
-      overflow: 'hidden'
-    }
-  }, /*#__PURE__*/React.createElement(Animated.View, {
-    testID: "rv-notify-bar",
-    accessibilityRole: !interactive ? accessibilityRole : undefined,
-    accessibilityLiveRegion: !interactive ? 'assertive' : undefined,
-    renderToHardwareTextureAndroid: true,
-    shouldRasterizeIOS: true,
-    onLayout: handleLayout,
-    style: [tokens.layout.container, {
-      opacity: animatedValue,
-      transform: [{
-        translateY
-      }]
-    }, style]
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      backgroundColor: resolvedBackground
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.content, {
-      paddingHorizontal: tokens.spacing.paddingHorizontal,
-      paddingVertical: tokens.spacing.paddingVertical,
-      minHeight: tokens.sizing.minHeight
-    }]
-  }, hasMessage && (isText(message) ? renderTextOrNode(message, [tokens.layout.text, {
-    color: resolvedTextColor,
-    fontFamily: tokens.typography.fontFamily,
-    fontSize: tokens.typography.fontSize,
-    lineHeight: tokens.typography.lineHeight
-  }, textStyle]) : message))))), position === 'bottom' && /*#__PURE__*/React.createElement(View, {
-    style: {
-      height: safeAreaBottomInset
-    }
-  })), [accessibilityRole, animatedValue, contentHeight, handleLayout, hasMessage, interactive, message, offset, resolvedBackground, resolvedTextColor, safeAreaBottomInset, safeAreaTopValue, style, textStyle, tokens.layout.container, tokens.layout.content, tokens.layout.text, tokens.sizing.minHeight, tokens.spacing.paddingHorizontal, tokens.spacing.paddingVertical, tokens.typography.fontFamily, tokens.typography.fontSize, tokens.typography.lineHeight, translateY, webBottomPadding, webTopPadding, position]);
-  if (!mounted) return null;
-  return /*#__PURE__*/React.createElement(View, {
-    testID: "rv-notify",
-    pointerEvents: interactive ? 'box-none' : 'none',
-    style: [tokens.layout.portal, position === 'bottom' ? {
-      bottom: 0
-    } : {
-      top: 0
-    }, resolvedZIndex != null ? {
-      zIndex: resolvedZIndex
-    } : null]
-  }, interactive ? /*#__PURE__*/React.createElement(Pressable, _extends({}, pressProps.interactionProps, {
-    disabled: !interactive
-  }), barRender) : barRender);
-};
-export const NotifyContent = /*#__PURE__*/React.memo(NotifyContentImpl);
-const NotifyImpl = props => /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(NotifyContent, props));
-export const Notify = /*#__PURE__*/React.memo(NotifyImpl);
-export default Notify;
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)({}).hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},_extends.apply(null,arguments)}import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Platform,Pressable,View}from"react-native";import{isFunction,isText,renderTextOrNode}from"../../utils";import{isRenderable}from"../../utils/validate";import{useAriaPress,useSafeAreaPadding,useOverlayStack}from"../../hooks";import Portal from"../portal/Portal";import{nativeDriverEnabled}from"../../platform";import{useReducedMotion}from"../../hooks/animation";import{useNotifyTokens}from"./tokens";const NotifyContentImpl=e=>{const{visible:t,message:n,type:o,duration:r,position:i,offset:a,color:s,background:u,zIndex:l,closeOnClick:c,style:d,textStyle:f,tokensOverride:m,onClick:p,onClose:y,onOpen:g,onOpened:b,onClosed:v}=e,R=useNotifyTokens(m),h=useReducedMotion(),E=useSafeAreaPadding({top:0,bottom:0}),x=o??R.defaults.type,k=i??R.defaults.position,I=c??R.defaults.closeOnClick,P=e.safeAreaInsetTop??("top"===k&&R.defaults.safeAreaInsetTop),T=e.safeAreaInsetBottom??("bottom"===k&&R.defaults.safeAreaInsetBottom),V=P&&"top"===k?E.paddingTop:0,N=T&&"bottom"===k?E.paddingBottom:0,O="number"==typeof a&&Number.isFinite(a)?Math.max(0,a):0,w=(e,t)=>"string"==typeof e?`calc(${e} + ${t}px)`:e+t,z=T&&"bottom"===k&&"number"==typeof N?N+O:O,A="web"===Platform.OS&&"top"===k?w(V,O):void 0,S="web"===Platform.OS&&T&&"bottom"===k?w(N,O):void 0,C=R.colors.variants[x],H=u??C.background,D=s??C.text,F=r??R.defaults.duration,M=useRef(y);M.current=y;const B=useRef(g);B.current=g;const _=useRef(b);_.current=b;const L=useRef(v);L.current=v;const j=useRef(p);j.current=p;const[$,Y]=useState(0),q=useCallback(e=>{const t=e.nativeEvent.layout.height;t&&Y(e=>e===t?e:t)},[]),G=$>0,[J,K]=useState(t),Q=useRef(new Animated.Value(0)).current,U=useRef(null),W=useRef(0),{zIndex:X}=useOverlayStack({visible:J,type:"notify",zIndex:l}),Z=X??l,ee=useRef(t),te=useRef(!1);useEffect(()=>{W.current+=1;const e=W.current;U.current?.stop();const n=h?0:R.defaults.animationDuration;if(t){if(K(!0),!G)return void Q.setValue(0);U.current=Animated.timing(Q,{toValue:1,duration:n,easing:Easing.out(Easing.cubic),useNativeDriver:nativeDriverEnabled,isInteraction:!1}),U.current.start()}else{if(!G)return Q.setValue(0),void K(!1);U.current=Animated.timing(Q,{toValue:0,duration:n,easing:Easing.out(Easing.cubic),useNativeDriver:nativeDriverEnabled,isInteraction:!1}),U.current.start(({finished:t})=>{t&&e===W.current&&K(!1)})}},[Q,G,h,R.defaults.animationDuration,t]),useEffect(()=>()=>{U.current?.stop()},[]);const ne=h?0:R.defaults.animationDuration;useEffect(()=>{if(t){if(te.current=!1,!ee.current&&(B.current?.(),_.current)){const e=_.current,n=setTimeout(e,ne);return ee.current=t,()=>clearTimeout(n)}}else ee.current&&(te.current=!0);ee.current=t},[ne,t]),useEffect(()=>{!J&&te.current&&(te.current=!1,L.current?.())},[J]),useEffect(()=>{if(!t||F<=0)return;const e=setTimeout(()=>{M.current?.()},F);return()=>clearTimeout(e)},[F,t]);const oe=$>0?$:R.sizing.minHeight,re=I||isFunction(p),ie=useCallback(()=>{j.current?.(),I&&M.current?.()},[I]),ae=re?"button":"alert",se=useAriaPress({disabled:!re,onPress:ie,extraProps:{accessibilityRole:ae,accessibilityLiveRegion:"assertive"}}),ue=useMemo(()=>"bottom"===k?Q.interpolate({inputRange:[0,1],outputRange:[oe,0]}):Q.interpolate({inputRange:[0,1],outputRange:[-oe,0]}),[Q,oe,k]),le=isRenderable(n)&&("string"!=typeof n||""!==n),ce=useMemo(()=>React.createElement(View,{style:[R.layout.container,"top"===k?{paddingTop:A??w(V,O)}:null,void 0!==S?{paddingBottom:S}:null]},React.createElement(View,{style:{height:oe,overflow:"hidden"}},React.createElement(Animated.View,{testID:"rv-notify-bar",accessibilityRole:re?void 0:ae,accessibilityLiveRegion:re?void 0:"assertive",renderToHardwareTextureAndroid:!0,shouldRasterizeIOS:!0,onLayout:q,style:[R.layout.container,{opacity:Q,transform:[{translateY:ue}]},d]},React.createElement(View,{style:{backgroundColor:H}},React.createElement(View,{style:[R.layout.content,{paddingHorizontal:R.spacing.paddingHorizontal,paddingVertical:R.spacing.paddingVertical,minHeight:R.sizing.minHeight}]},le&&(isText(n)?renderTextOrNode(n,[R.layout.text,{color:D,fontFamily:R.typography.fontFamily,fontSize:R.typography.fontSize,lineHeight:R.typography.lineHeight},f]):n))))),"bottom"===k&&React.createElement(View,{style:{height:z}})),[ae,Q,oe,q,le,re,n,O,H,D,z,V,d,f,R.layout.container,R.layout.content,R.layout.text,R.sizing.minHeight,R.spacing.paddingHorizontal,R.spacing.paddingVertical,R.typography.fontFamily,R.typography.fontSize,R.typography.lineHeight,ue,S,A,k]);return J?React.createElement(View,{testID:"rv-notify",pointerEvents:re?"box-none":"none",style:[R.layout.portal,"bottom"===k?{bottom:0}:{top:0},null!=Z?{zIndex:Z}:null]},re?React.createElement(Pressable,_extends({},se.interactionProps,{disabled:!re}),ce):ce):null};export const NotifyContent=React.memo(NotifyContentImpl);const NotifyImpl=e=>React.createElement(Portal,null,React.createElement(NotifyContent,e));export const Notify=React.memo(NotifyImpl);export default Notify;