react-native-ui-lib 7.39.0-snapshot.6543 → 7.39.0-snapshot.6546

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.39.0-snapshot.6543",
+  "version": "7.39.0-snapshot.6546",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/scripts/docs/buildDocsCommon.js

@@ -88,9 +88,13 @@ function processComponents(components) {
     content += `sidebar_label: ${componentName}\n`;
     content += '---\n\n';
 
-    content += `import ComponentPage from '@site/src/components/ComponentPage';\n\n`;
-    const componentObject = JSON.stringify(component);
-    content += `<ComponentPage component={${componentObject}}/>\n`;
+    if (component.docs) {
+      content += `import ComponentPage from '@site/src/components/ComponentPage';\n\n`;
+      const componentObject = JSON.stringify(component);
+      content += `<ComponentPage component={${componentObject}}/>\n`;
+    } else {
+      content += `${buildOldDocs(component)}\n`;
+    }
 
     let dirPath;
     switch (component.category) {
@@ -149,4 +153,84 @@ function logStatistics(components) {
   }
 }
 
+function buildOldDocs(component) {
+  let content = '';
+  content += `import UILivePreview from '@site/src/components/UILivePreview';\n\n`;
+
+  /* General Info */
+  content += `${component.description}  \n`;
+  if (typeof component.example === 'string') {
+    content += `[(code example)](${component.example})\n`;
+  } else if (Array.isArray(component.example)) {
+    content += '(code examples: ';
+    component.example.forEach((example, index) => {
+      const slashIndex = example.lastIndexOf('/');
+      const dotIndex = example.lastIndexOf('.');
+      content += `${index > 0 ? ', ' : ''}[${example.slice(slashIndex + 1, dotIndex)}](${example})`;
+    });
+    content += ')\n';
+  }
+
+  if (component.extends) {
+    let extendsText = component.extends?.join(', ');
+    if (component.extendsLink) {
+      extendsText = `[${extendsText}](${component.extendsLink})`;
+    } else {
+      extendsText = _.map(component.extends, generateExtendsLink).join(', ');
+    }
+    content += ':::info\n';
+    content += `This component extends **${extendsText}** props.\n`;
+    content += ':::\n';
+  }
+
+  if (component.modifiers) {
+    content += ':::tip\n';
+    content += `This component support **${component.modifiers?.join(', ')}** modifiers.\n`;
+    content += ':::\n';
+  }
+
+  if (component.caution) {
+    content += ':::caution\n';
+    content += `${component.caution}\n`;
+    content += ':::\n';
+  }
+
+  if (component.note) {
+    content += ':::note\n';
+    content += `${component.note}\n`;
+    content += ':::\n';
+  }
+
+  /* Images */
+  content += `<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}>`;
+  component.images?.forEach(image => {
+    content += `<img style={{maxHeight: '420px'}} src={'${image}'}/>`;
+    content += '\n\n';
+  });
+  content += '</div>\n\n';
+
+  /* Snippet */
+  if (component.snippet) {
+    content += `### Usage\n`;
+    content += `<UILivePreview componentName={"${component.name}"} code={\`${component.snippet
+      ?.map(item => _.replace(item, new RegExp(/\$[1-9]/, 'g'), ''))
+      .join('\n')
+      .toString()}\`}/>\n\n`;
+  }
+
+  /* Props */
+  content += '## API\n';
+  _.sortBy(component.props, p => p.name)?.forEach(prop => {
+    content += `### ${prop.name}\n`;
+    if (prop.note) {
+      content += `#### ${prop.note}\n`;
+    }
+    content += `${prop.description}\n`;
+    // content += `<span style={{color: 'grey'}}>${_.escape(prop.type)}</span>\n\n`;
+    content += `\`${prop.type} \` \n\n`;
+  });
+
+  return content;
+}
+
 module.exports = {buildDocs};

package/src/components/avatar/index.d.ts

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { StyleProp, ViewStyle, ImagePropsBase, ImageStyle, TextStyle, AccessibilityProps } from 'react-native';
+import { StyleProp, ViewStyle, ImagePropsBase, ImageStyle, TextStyle, TextProps, AccessibilityProps } from 'react-native';
 import { BadgeProps } from '../badge';
 import { ImageProps } from '../image';
 import { AnimatedImageProps } from '../animatedImage';
@@ -95,6 +95,7 @@ export type AvatarProps = Pick<AccessibilityProps, 'accessibilityLabel'> & Props
      * The label color
      */
     labelColor?: string;
+    labelEllipsizeMode?: TextProps['ellipsizeMode'];
     /**
      * ribbon label to display on the avatar
      */
@@ -162,21 +163,14 @@ declare const Avatar: React.ForwardRefExoticComponent<Pick<AccessibilityProps, "
      * Image props object
      */
     imageProps?: Partial<Omit<import("react-native").ImageProps, "source"> & Pick<import("react-native").ImageBackgroundProps, "imageStyle"> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & import("../..").RecorderProps & {
-        /**
-         * Avatar colors to be used when useAutoColors is true
-         */
         sourceTransformer?: ((props: any) => import("../image").ImageSourceType) | undefined;
         assetName?: string | undefined;
         assetGroup?: string | undefined;
         tintColor?: string | undefined;
-        supportRTL?: boolean | undefined; /**
-         * Background color for Avatar
-         */
+        supportRTL?: boolean | undefined;
         cover?: boolean | undefined;
         aspectRatio?: number | undefined;
-        overlayType?: string | undefined; /**
-         * Image props object
-         */
+        overlayType?: string | undefined;
         overlayIntensity?: import("../overlay").OverlayIntensityType | undefined;
         overlayColor?: string | undefined;
         customOverlayContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
@@ -230,6 +224,7 @@ declare const Avatar: React.ForwardRefExoticComponent<Pick<AccessibilityProps, "
      * The label color
      */
     labelColor?: string | undefined;
+    labelEllipsizeMode?: TextProps['ellipsizeMode'];
     /**
      * ribbon label to display on the avatar
      */
@@ -291,21 +286,14 @@ declare const _default: React.ForwardRefExoticComponent<Pick<AccessibilityProps,
      * Image props object
      */
     imageProps?: Partial<Omit<import("react-native").ImageProps, "source"> & Pick<import("react-native").ImageBackgroundProps, "imageStyle"> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & import("../..").RecorderProps & {
-        /**
-         * Avatar colors to be used when useAutoColors is true
-         */
         sourceTransformer?: ((props: any) => import("../image").ImageSourceType) | undefined;
         assetName?: string | undefined;
         assetGroup?: string | undefined;
         tintColor?: string | undefined;
-        supportRTL?: boolean | undefined; /**
-         * Background color for Avatar
-         */
+        supportRTL?: boolean | undefined;
         cover?: boolean | undefined;
         aspectRatio?: number | undefined;
-        overlayType?: string | undefined; /**
-         * Image props object
-         */
+        overlayType?: string | undefined;
         overlayIntensity?: import("../overlay").OverlayIntensityType | undefined;
         overlayColor?: string | undefined;
         customOverlayContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
@@ -359,6 +347,7 @@ declare const _default: React.ForwardRefExoticComponent<Pick<AccessibilityProps,
      * The label color
      */
     labelColor?: string | undefined;
+    labelEllipsizeMode?: "middle" | "head" | "tail" | "clip" | undefined;
     /**
      * ribbon label to display on the avatar
      */

package/src/components/avatar/index.js

@@ -56,6 +56,7 @@ const Avatar = forwardRef((props, ref) => {
     useAutoColors,
     autoColorsConfig,
     containerStyle,
+    labelEllipsizeMode = 'clip',
     onPress,
     children
   } = themeProps;
@@ -178,7 +179,7 @@ const Avatar = forwardRef((props, ref) => {
   const Container = onPress ? TouchableOpacity : View;
   return <Container style={_containerStyle} ref={ref} testID={testID} onPress={onPress} accessible={!_isUndefined(onPress)} accessibilityLabel={'Avatar'} accessibilityRole={onPress ? 'button' : 'image'} hitSlop={onPress ? hitTargetPadding : undefined} {...accessibilityProps}>
       <View testID={`${testID}.container`} style={textContainerStyle}>
-        {!_isUndefined(text) && <Text numberOfLines={1} style={textStyle} testID={`${testID}.label`}>
+        {!_isUndefined(text) && <Text numberOfLines={1} ellipsizeMode={labelEllipsizeMode} style={textStyle} testID={`${testID}.label`}>
             {text}
           </Text>}
       </View>
@@ -194,7 +195,8 @@ const styles = StyleSheet.create({
     ...StyleSheet.absoluteFillObject,
     alignItems: 'center',
     justifyContent: 'center',
-    borderRadius: BorderRadiuses.br100
+    borderRadius: BorderRadiuses.br100,
+    overflow: 'hidden'
   },
   initialsContainerWithInset: {
     top: 1,