react-native-system-ui 1.0.2 → 1.0.4

package/dist/es/components/image/Image.js

@@ -1,238 +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 { ActivityIndicator, Image as RNImage, Platform, Pressable, StyleSheet, View } from 'react-native';
-import { SvgUri } from 'react-native-svg';
-import { isNumber, isString, renderTextOrNode } from '../../utils';
-import { isRenderable, isText } from '../../utils/validate';
-import { useLocale } from '../config-provider/useLocale';
-import { useImageTokens } from './tokens';
-const resolveFitMode = fit => {
-  switch (fit) {
-    case 'fill':
-      return 'stretch';
-    case 'scale-down':
-      return 'contain';
-    case 'none':
-      return 'center';
-    default:
-      return fit;
-  }
-};
-const LAYOUT_STYLE_KEYS = new Set(['width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'flex', 'flexGrow', 'flexShrink', 'flexBasis', 'alignSelf', 'aspectRatio', 'position', 'top', 'right', 'bottom', 'left', 'start', 'end', 'opacity', 'borderRadius']);
-const isLayoutStyleKey = key => LAYOUT_STYLE_KEYS.has(key) || key === 'backgroundColor' || key.startsWith('margin') || key.startsWith('padding') || key.startsWith('border') || key.endsWith('Radius');
-const splitImageStyle = style => {
-  if (!style) return {
-    container: undefined,
-    image: undefined
-  };
-  const flattened = StyleSheet.flatten(style) ?? {};
-  const flattenedRecord = flattened;
-  const container = {};
-  const image = {};
-  for (const key of Object.keys(flattenedRecord)) {
-    const value = flattenedRecord[key];
-    if (value === undefined) continue;
-    if (isLayoutStyleKey(key)) container[key] = value;else image[key] = value;
-  }
-  return {
-    container: Object.keys(container).length ? container : undefined,
-    image: Object.keys(image).length ? image : undefined
-  };
-};
-const PRESERVE_ASPECT_RATIO_MAP = {
-  contain: 'xMidYMid meet',
-  'scale-down': 'xMidYMid meet',
-  stretch: 'none',
-  fill: 'none',
-  none: 'xMidYMid meet',
-  center: 'xMidYMid meet'
-};
-const resolvePreserveAspectRatio = fit => PRESERVE_ASPECT_RATIO_MAP[fit] || 'xMidYMid slice';
-const WEB_IMAGE_STYLE = Platform.OS === 'web' ? {
-  height: 'revert-layer',
-  width: 'revert-layer'
-} : undefined;
-const resolveSourceUri = source => {
-  if (!source) return undefined;
-  if (typeof source === 'number') return undefined;
-  if (Array.isArray(source)) {
-    for (const item of source) {
-      if (item && typeof item === 'object' && 'uri' in item && typeof item.uri === 'string') return item.uri;
-    }
-    return undefined;
-  }
-  if (typeof source === 'object' && 'uri' in source && typeof source.uri === 'string') return source.uri;
-  return undefined;
-};
-const ImageImpl = (props, ref) => {
-  const {
-    src,
-    source,
-    width,
-    height,
-    radius,
-    round,
-    fit: fitP,
-    showLoading: showLoadP,
-    showError: showErrP,
-    loadingText: loadTxtP,
-    loadingIcon,
-    errorIcon,
-    iconSize: iconSzP,
-    loadingSize,
-    errorText: errTxtP,
-    fallback,
-    onPress,
-    alt,
-    accessibilityLabel,
-    ['aria-label']: ariaLabel,
-    containerStyle,
-    style,
-    children,
-    tokensOverride,
-    onLoad,
-    onError,
-    ...rest
-  } = props;
-  const locale = useLocale();
-  const tokens = useImageTokens(tokensOverride);
-  const fit = fitP ?? tokens.defaults.fit;
-  const showLoading = showLoadP ?? tokens.defaults.showLoading;
-  const showError = showErrP ?? tokens.defaults.showError;
-  const loadingText = loadTxtP !== undefined ? loadTxtP : locale?.vanImage?.loading ?? tokens.defaults.loadingText;
-  const errorText = errTxtP !== undefined ? errTxtP : locale?.vanImage?.error ?? tokens.defaults.errorText;
-  const {
-    container: containerLayoutStyle,
-    image: imageStyleWithLayout
-  } = useMemo(() => splitImageStyle(style), [style]);
-  const actualSource = useMemo(() => source ? source : src ? {
-    uri: src
-  } : undefined, [source, src]);
-  const sourceKey = useMemo(() => {
-    if (source) {
-      if (typeof source === 'number') return `res:${source}`;
-      const u = resolveSourceUri(source);
-      if (u) return `uri:${u}`;
-      return 'source:unknown';
-    }
-    ;
-    if (src) return `src:${src}`;
-    return 'none';
-  }, [source, src]);
-  const accLabel = alt ?? accessibilityLabel ?? ariaLabel;
-  const [state, setState] = useState(() => actualSource ? 'loading' : 'idle');
-  useEffect(() => {
-    setState(actualSource ? 'loading' : 'idle');
-  }, [sourceKey]);
-  const onLoadRef = useRef(onLoad);
-  onLoadRef.current = onLoad;
-  const onErrorRef = useRef(onError);
-  onErrorRef.current = onError;
-  const handleLoad = useCallback(event => {
-    setState('loaded');
-    onLoadRef.current?.(event);
-  }, []);
-  const handleError = useCallback(event => {
-    setState('error');
-    onErrorRef.current?.(event);
-  }, []);
-  const handleSvgLoad = useCallback(() => {
-    handleLoad({
-      nativeEvent: {}
-    });
-  }, [handleLoad]);
-  const handleSvgError = useCallback(err => {
-    handleError({
-      nativeEvent: {
-        error: err
-      }
-    });
-  }, [handleError]);
-  const uri = useMemo(() => resolveSourceUri(actualSource), [actualSource]);
-  const normalizedUri = isString(uri) ? uri.toLowerCase() : undefined;
-  const isSvg = !!normalizedUri && (normalizedUri.endsWith('.svg') || normalizedUri.includes('.svg?') || normalizedUri.includes('/svg?'));
-  const rLoadSz = isNumber(loadingSize) ? loadingSize : tokens.defaults.loadingIndicatorBaseSize;
-  const rErrIconSz = iconSzP ?? tokens.defaults.iconSize;
-  const clickableRole = onPress ? 'button' : undefined;
-  const pressableProps = onPress ? {
-    onPress
-  } : null;
-  const renderLabel = (node, color, marginTop) => {
-    if (!isRenderable(node)) return null;
-    const textNode = renderTextOrNode(node, [tokens.layout.label, {
-      color: color
-    }, marginTop ? {
-      marginTop: marginTop
-    } : undefined].filter(Boolean));
-    return marginTop && !isText(node) ? /*#__PURE__*/React.createElement(View, {
-      style: {
-        marginTop: marginTop
-      }
-    }, textNode) : textNode;
-  };
-  const computedContainerStyle = useMemo(() => [tokens.layout.container, {
-    width: width,
-    height: height,
-    backgroundColor: tokens.colors.background
-  }, round ? {
-    borderRadius: tokens.defaults.roundRadius
-  } : isNumber(radius) ? {
-    borderRadius: radius
-  } : undefined, containerStyle, containerLayoutStyle], [containerLayoutStyle, containerStyle, height, radius, round, tokens.colors.background, tokens.defaults.roundRadius, tokens.layout.container, width]);
-  const imgAccLabel = !onPress ? accLabel : undefined;
-  const imageNode = actualSource ? isSvg && Platform.OS !== 'web' && uri ? /*#__PURE__*/React.createElement(SvgUri, _extends({
-    width: "100%",
-    height: "100%",
-    uri: uri,
-    preserveAspectRatio: resolvePreserveAspectRatio(fit),
-    accessible: !onPress,
-    accessibilityLabel: imgAccLabel
-  }, rest, {
-    style: [tokens.layout.absoluteFill, imageStyleWithLayout],
-    onLoad: handleSvgLoad,
-    onError: handleSvgError
-  })) : /*#__PURE__*/React.createElement(RNImage, _extends({
-    ref: ref,
-    accessible: !onPress,
-    accessibilityLabel: imgAccLabel
-  }, rest, {
-    source: actualSource,
-    style: [tokens.layout.absoluteFill, imageStyleWithLayout, WEB_IMAGE_STYLE],
-    resizeMode: resolveFitMode(fit),
-    onLoad: handleLoad,
-    onError: handleError
-  })) : null;
-  const content = /*#__PURE__*/React.createElement(React.Fragment, null, state === 'loading' && showLoading && /*#__PURE__*/React.createElement(View, {
-    style: tokens.layout.overlay,
-    pointerEvents: "none",
-    testID: "rv-image-loading"
-  }, loadingIcon || /*#__PURE__*/React.createElement(ActivityIndicator, {
-    color: tokens.colors.text,
-    size: isString(loadingSize) ? loadingSize : 'small',
-    style: {
-      transform: [{
-        scale: rLoadSz / tokens.defaults.loadingIndicatorBaseSize
-      }]
-    }
-  }), renderLabel(loadingText, tokens.colors.text, tokens.defaults.loadingLabelMarginTop)), imageNode, state === 'error' && showError && /*#__PURE__*/React.createElement(View, {
-    style: tokens.layout.overlay,
-    pointerEvents: "none",
-    testID: "rv-image-error"
-  }, errorIcon && /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.iconContainer, {
-      width: rErrIconSz,
-      height: rErrIconSz
-    }]
-  }, errorIcon), isRenderable(fallback) ? renderLabel(fallback, tokens.colors.error) : renderLabel(errorText, tokens.colors.error)), children);
-  return pressableProps ? /*#__PURE__*/React.createElement(Pressable, _extends({}, pressableProps, {
-    accessibilityRole: clickableRole,
-    accessibilityLabel: accLabel,
-    style: computedContainerStyle
-  }), content) : /*#__PURE__*/React.createElement(View, {
-    accessibilityLabel: accLabel,
-    style: computedContainerStyle
-  }, content);
-};
-const ImageForwardRef = /*#__PURE__*/React.forwardRef(ImageImpl);
-const Image = /*#__PURE__*/React.memo(ImageForwardRef);
-export default Image;
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)({}).hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},_extends.apply(null,arguments)}import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{ActivityIndicator,Image as RNImage,Platform,Pressable,StyleSheet,View}from"react-native";import{SvgUri}from"react-native-svg";import{isNumber,isString,renderTextOrNode}from"../../utils";import{isRenderable,isText}from"../../utils/validate";import{useLocale}from"../config-provider/useLocale";import{useImageTokens}from"./tokens";const resolveFitMode=e=>{switch(e){case"fill":return"stretch";case"scale-down":return"contain";case"none":return"center";default:return e}},LAYOUT_STYLE_KEYS=new Set(["width","height","minWidth","minHeight","maxWidth","maxHeight","flex","flexGrow","flexShrink","flexBasis","alignSelf","aspectRatio","position","top","right","bottom","left","start","end","opacity","borderRadius"]),isLayoutStyleKey=e=>LAYOUT_STYLE_KEYS.has(e)||"backgroundColor"===e||e.startsWith("margin")||e.startsWith("padding")||e.startsWith("border")||e.endsWith("Radius"),splitImageStyle=e=>{if(!e)return{container:void 0,image:void 0};const t=StyleSheet.flatten(e)??{},r={},o={};for(const e of Object.keys(t)){const i=t[e];void 0!==i&&(isLayoutStyleKey(e)?r[e]=i:o[e]=i)}return{container:Object.keys(r).length?r:void 0,image:Object.keys(o).length?o:void 0}},PRESERVE_ASPECT_RATIO_MAP={contain:"xMidYMid meet","scale-down":"xMidYMid meet",stretch:"none",fill:"none",none:"xMidYMid meet",center:"xMidYMid meet"},resolvePreserveAspectRatio=e=>PRESERVE_ASPECT_RATIO_MAP[e]||"xMidYMid slice",WEB_IMAGE_STYLE="web"===Platform.OS?{height:"revert-layer",width:"revert-layer"}:void 0,resolveSourceUri=e=>{if(e&&"number"!=typeof e){if(!Array.isArray(e))return"object"==typeof e&&"uri"in e&&"string"==typeof e.uri?e.uri:void 0;for(const t of e)if(t&&"object"==typeof t&&"uri"in t&&"string"==typeof t.uri)return t.uri}},ImageImpl=(e,t)=>{const{src:r,source:o,width:i,height:a,radius:s,round:n,fit:l,showLoading:c,showError:d,loadingText:u,loadingIcon:m,errorIcon:f,iconSize:g,loadingSize:v,errorText:y,fallback:b,onPress:h,alt:R,accessibilityLabel:E,"aria-label":S,containerStyle:p,style:w,children:I,tokensOverride:x,onLoad:M,onError:L,...T}=e,_=useLocale(),k=useImageTokens(x),A=l??k.defaults.fit,P=c??k.defaults.showLoading,O=d??k.defaults.showError,Y=void 0!==u?u:_?.vanImage?.loading??k.defaults.loadingText,C=void 0!==y?y:_?.vanImage?.error??k.defaults.errorText,{container:W,image:V}=useMemo(()=>splitImageStyle(w),[w]),j=useMemo(()=>o||(r?{uri:r}:void 0),[o,r]),z=useMemo(()=>{if(o){if("number"==typeof o)return`res:${o}`;const e=resolveSourceUri(o);return e?`uri:${e}`:"source:unknown"}return r?`src:${r}`:"none"},[o,r]),F=R??E??S,[N,U]=useState(()=>j?"loading":"idle");useEffect(()=>{U(j?"loading":"idle")},[z]);const B=useRef(M);B.current=M;const K=useRef(L);K.current=L;const G=useCallback(e=>{U("loaded"),B.current?.(e)},[]),$=useCallback(e=>{U("error"),K.current?.(e)},[]),D=useCallback(()=>{G({nativeEvent:{}})},[G]),H=useCallback(e=>{$({nativeEvent:{error:e}})},[$]),q=useMemo(()=>resolveSourceUri(j),[j]),J=isString(q)?q.toLowerCase():void 0,Q=!!J&&(J.endsWith(".svg")||J.includes(".svg?")||J.includes("/svg?")),X=isNumber(v)?v:k.defaults.loadingIndicatorBaseSize,Z=g??k.defaults.iconSize,ee=h?"button":void 0,te=h?{onPress:h}:null,re=(e,t,r)=>{if(!isRenderable(e))return null;const o=renderTextOrNode(e,[k.layout.label,{color:t},r?{marginTop:r}:void 0].filter(Boolean));return r&&!isText(e)?React.createElement(View,{style:{marginTop:r}},o):o},oe=useMemo(()=>[k.layout.container,{width:i,height:a,backgroundColor:k.colors.background},n?{borderRadius:k.defaults.roundRadius}:isNumber(s)?{borderRadius:s}:void 0,p,W],[W,p,a,s,n,k.colors.background,k.defaults.roundRadius,k.layout.container,i]),ie=h?void 0:F,ae=j?Q&&"web"!==Platform.OS&&q?React.createElement(SvgUri,_extends({width:"100%",height:"100%",uri:q,preserveAspectRatio:resolvePreserveAspectRatio(A),accessible:!h,accessibilityLabel:ie},T,{style:[k.layout.absoluteFill,V],onLoad:D,onError:H})):React.createElement(RNImage,_extends({ref:t,accessible:!h,accessibilityLabel:ie},T,{source:j,style:[k.layout.absoluteFill,V,WEB_IMAGE_STYLE],resizeMode:resolveFitMode(A),onLoad:G,onError:$})):null,se=React.createElement(React.Fragment,null,"loading"===N&&P&&React.createElement(View,{style:k.layout.overlay,pointerEvents:"none",testID:"rv-image-loading"},m||React.createElement(ActivityIndicator,{color:k.colors.text,size:isString(v)?v:"small",style:{transform:[{scale:X/k.defaults.loadingIndicatorBaseSize}]}}),re(Y,k.colors.text,k.defaults.loadingLabelMarginTop)),ae,"error"===N&&O&&React.createElement(View,{style:k.layout.overlay,pointerEvents:"none",testID:"rv-image-error"},f&&React.createElement(View,{style:[k.layout.iconContainer,{width:Z,height:Z}]},f),isRenderable(b)?re(b,k.colors.error):re(C,k.colors.error)),I);return te?React.createElement(Pressable,_extends({},te,{accessibilityRole:ee,accessibilityLabel:F,style:oe}),se):React.createElement(View,{accessibilityLabel:F,style:oe},se)},ImageForwardRef=React.forwardRef(ImageImpl),Image=React.memo(ImageForwardRef);export default Image;

package/dist/es/components/image/index.js

@@ -1,3 +1 @@
-import Image from './Image';
-export { useImageTokens } from './tokens';
-export default Image;
+import Image from"./Image";export{useImageTokens}from"./tokens";export default Image;

package/dist/es/components/image/tokens.js

@@ -1,60 +1 @@
-import { createComponentTokensHook } from '../../design-system';
-const createTokens = foundations => {
-  const {
-    palette,
-    spacing,
-    fontSize,
-    radii,
-    typography
-  } = foundations;
-  return {
-    defaults: {
-      fit: 'cover',
-      showLoading: true,
-      showError: true,
-      loadingText: 'Loading...',
-      errorText: 'Failed to load',
-      iconSize: 20,
-      loadingIndicatorBaseSize: 20,
-      loadingLabelMarginTop: spacing.xs,
-      roundRadius: radii.full
-    },
-    layout: {
-      container: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        overflow: 'hidden'
-      },
-      overlay: {
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-        alignItems: 'center',
-        justifyContent: 'center'
-      },
-      label: {
-        fontFamily: typography.fontFamily,
-        fontSize: fontSize.xs
-      },
-      iconContainer: {
-        alignItems: 'center',
-        justifyContent: 'center'
-      },
-      absoluteFill: {
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0
-      }
-    },
-    colors: {
-      background: '#ffffff',
-      text: palette.default[500],
-      error: palette.danger[500]
-    }
-  };
-};
-export const useImageTokens = createComponentTokensHook('image', createTokens);
+import{createComponentTokensHook}from"../../design-system";const createTokens=e=>{const{palette:o,spacing:t,fontSize:n,radii:a,typography:i}=e,r=e.surface??"#ffffff";return{defaults:{fit:"cover",showLoading:!0,showError:!0,loadingText:"Loading...",errorText:"Failed to load",iconSize:20,loadingIndicatorBaseSize:20,loadingLabelMarginTop:t.xs,roundRadius:a.full},layout:{container:{alignItems:"center",justifyContent:"center",overflow:"hidden"},overlay:{position:"absolute",top:0,right:0,bottom:0,left:0,alignItems:"center",justifyContent:"center"},label:{fontFamily:i.fontFamily,fontSize:n.xs},iconContainer:{alignItems:"center",justifyContent:"center"},absoluteFill:{position:"absolute",top:0,right:0,bottom:0,left:0}},colors:{background:r,text:o.default[500],error:o.danger[500]}}};export const useImageTokens=createComponentTokensHook("image",createTokens);