Merge branch 'master' of github.com:wix/react-native-ui-lib into release

Author: Inbal-Tish

ReactNativeUiLib.podspec

@@ -1,6 +1,6 @@
 require 'json'
 
-package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+package = JSON.parse(File.read(File.join(__dir__, 'lib/package.json')))
 
 Pod::Spec.new do |s|
   s.name         = "ReactNativeUiLib"
@@ -15,7 +15,7 @@ Pod::Spec.new do |s|
   s.module_name  = 'ReactNativeUiLib'
 
   s.source       = { :git => "https://github.com/wix/react-native-ui-lib.git", :tag => "#{s.version}" }
-  s.source_files  = "ios/**/*.{h,m}"
+  s.source_files  = "lib/ios/**/*.{h,m}"
 
   s.dependency 'React'
   s.frameworks = 'UIKit'

package.json

@@ -111,12 +111,14 @@
     "react-native-navigation": "7.30.0",
     "react-native-reanimated": "2.13.0",
     "react-native-shimmer-placeholder": "^2.0.6",
-    "react-native-svg": "^12.1.0",
+    "react-native-svg": "^13.7.0",
     "react-native-svg-transformer": "^0.14.3",
     "react-test-renderer": "^17.0.1",
     "reassure": "^0.4.1",
     "shell-utils": "^1.0.10",
-    "typescript": "4.3.2"
+    "typescript": "4.3.2",
+    "postcss": "^8.4.21",
+    "postcss-js": "^4.0.0"
   },
   "peerDependencies": {
     "react": ">=17.0.1",

src/components/button/ButtonConstants.ts

@@ -1,5 +1,6 @@
 import {ButtonSize} from './ButtonTypes';
 
+
 export const PADDINGS = {
   XSMALL: 3,
   SMALL: 4.5,

src/components/picker/helpers/usePickerLabel.tsx

@@ -2,12 +2,16 @@ import {useCallback, useMemo} from 'react';
 import _ from 'lodash';
 import {PickerProps, PickerValue} from '../types';
 
-interface UsePickerLabelProps extends Pick<PickerProps, 'value' | 'getLabel' | 'getItemLabel' | 'placeholder'> {
+interface UsePickerLabelProps
+  extends Pick<
+    PickerProps,
+    'value' | 'getLabel' | 'getItemLabel' | 'placeholder' | 'accessibilityLabel' | 'accessibilityHint'
+  > {
   items: {value: string | number; label: string}[] | null | undefined;
 }
 
 const usePickerLabel = (props: UsePickerLabelProps) => {
-  const {value, items, getLabel, getItemLabel, placeholder} = props;
+  const {value, items, getLabel, getItemLabel, placeholder, accessibilityLabel, accessibilityHint} = props;
 
   const getLabelsFromArray = useCallback((value: PickerValue) => {
     const itemsByValue = _.keyBy(items, 'value');
@@ -41,10 +45,12 @@ const usePickerLabel = (props: UsePickerLabelProps) => {
   const accessibilityInfo = useMemo(() => {
     const label = _getLabel(value);
     return {
-      accessibilityLabel: label ? `${placeholder}. selected. ${label}` : `Select ${placeholder}`,
-      accessibilityHint: label ? 'Double tap to edit' : `Goes to ${placeholder}. Suggestions will be provided`
+      accessibilityLabel:
+        accessibilityLabel ?? (label ? `${placeholder}. selected. ${label}` : `Select ${placeholder}`),
+      accessibilityHint:
+        accessibilityHint ?? (label ? 'Double tap to edit' : `Goes to ${placeholder}. Suggestions will be provided`)
     };
-  }, [value]);
+  }, [value, accessibilityLabel, accessibilityHint]);
 
   return {
     getLabelsFromArray,

src/components/picker/index.tsx

@@ -88,6 +88,8 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     useSafeArea,
     migrate,
     migrateTextField,
+    accessibilityLabel,
+    accessibilityHint,
     ...others
   } = themeProps;
   const {preset} = others;
@@ -121,6 +123,8 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     items,
     getItemLabel,
     getLabel,
+    accessibilityLabel,
+    accessibilityHint,
     placeholder: themeProps.placeholder
   });
 

src/components/sortableList/SortableList.api.json

@@ -5,6 +5,7 @@
   "extends": ["FlatList"],
   "extendsLink": ["https://reactnative.dev/docs/flatlist"],
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SortableListScreen.tsx",
+  "note": "We've seen a case where not all items are rendered on some Android devices, this appears to be a bug with `FlatList` that is using `CellRendererComponent`, our current workaround is for you to add `initialNumToRender={data.length}`.",
   "props": [
     {
       "name": "data",

src/components/svgImage/index.web.tsx

@@ -1,41 +1,59 @@
-import React from 'react';
-import {isSvg, isSvgUri} from '../../utils/imageUtils';
-// import {SvgPackage} from '../../optionalDependencies';
-
-// const SvgXml = SvgPackage?.SvgXml;
-// const SvgCssUri = SvgPackage?.SvgCssUri;
-// const SvgProps = SvgPackage?.SvgProps; TODO: not sure how (or if) we can use their props
+import React, {useState} from 'react';
+import {isSvg, isSvgUri, isBase64ImageContent} from '../../utils/imageUtils';
 
+const EMPTY_STYLE = '{}';
 export interface SvgImageProps {
   /**
    * the asset tint
    */
   tintColor?: string | null;
   data: any; // TODO: I thought this should be string | React.ReactNode but it doesn't work properly
+  style?: object[];
 }
 
 function SvgImage(props: SvgImageProps) {
-  // tintColor crashes Android, so we're removing this until we properly support it.
-  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
-  // const {data, tintColor, ...others} = props;
-  const {data} = props;
+  const {
+    data,
+    style,
+    ...other
+  } = props;
+
+  const styleObj = Object.assign({}, ...(style || []));
 
-  // if (!SvgXml) {
-  //   // eslint-disable-next-line max-len
-  //   console.error(`RNUILib Image "svg" prop requires installing "react-native-svg" and "react-native-svg-transformer" dependencies`);
-  //   return null;
-  // }
+  
+  const [svgStyleCss, setSvgStyleCss] = useState<string>(EMPTY_STYLE);
+  const [postCssStyleCalled, setPostCssStyleCalled] = useState(false);
+
+  const createStyleSvgCss = async (PostCssPackage: {postcss: any, cssjs:any}) => {
+    setPostCssStyleCalled(true);
+    const {postcss, cssjs} = PostCssPackage;
+    postcss().process(styleObj, {parser: cssjs})
+      .then((style: {css: any}) => setSvgStyleCss(`{${style.css}}`));
+  };
 
   if (isSvgUri(data)) {
-    return <img src={data.uri}/>;
-    // return <SvgCssUri {...others} uri={data.uri}/>;
-  // }
-  //  else if (typeof data === 'string') {
-  //   return <SvgXml xml={data} {...others}/>;
+    return <img {...other} src={data.uri} style={styleObj}/>;
+  } else if (isBase64ImageContent(data)) {
+    return <img {...other} src={data} style={styleObj}/>;
   } else if (data) {
-    return <img src={data}/>;
+    const PostCssPackage = require('../../optionalDependencies').PostCssPackage;
+    if (PostCssPackage) {
+      if (!postCssStyleCalled) {
+        createStyleSvgCss(PostCssPackage);
+        return null;
+      }
+      const svgStyleTag = `<style> svg ${svgStyleCss} </style>`;
+  
+      return (
+        <div
+          {...other}
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{__html: svgStyleTag + data}}
+        />
+      );
+    }
+    
   }
-
   return null;
 }
 

src/components/touchableOpacity/index.tsx

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import React, {PureComponent} from 'react';
+import React, {BaseSyntheticEvent, PureComponent} from 'react';
 import {TouchableOpacity as RNTouchableOpacity, TouchableOpacityProps as RNTouchableOpacityProps} from 'react-native';
 import {
   asBaseComponent,
@@ -155,12 +155,12 @@ class TouchableOpacity extends PureComponent<Props, {active: boolean}> {
     );
   }
 
-  onPress() {
-    this.props.onPress?.(this.props);
+  onPress(event: BaseSyntheticEvent) {
+    this.props.onPress?.({...this.props, ...event});
   }
 
-  onLongPress = () => {
-    this.props.onLongPress?.(this.props);
+  onLongPress = (event: BaseSyntheticEvent) => {
+    this.props.onLongPress?.({...this.props, ...event});
   };
 }
 

src/incubator/Dialog/dialog.api.json

@@ -2,7 +2,7 @@
   "name": "Dialog",
   "category": "incubator",
   "description": "Component for displaying custom content inside a popup dialog",
-  "note": "Use alignment modifiers to control the dialog position (top, bottom, centerV, centerH, etc... by default the dialog is aligned to center)",
+  "note": "Use alignment modifiers to control the dialog position (top, bottom, centerV, centerH, etc... by default the dialog is aligned to center).  \nWhen adding a `FlatList` \\ `ScrollView` to the content be sure to use one from `react-native-gesture-handler` (see [this link](https://github.com/software-mansion/react-native-gesture-handler/issues/1380) for `SectionList`).",
   "modifiers": ["alignment"],
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/incubatorScreens/IncubatorDialogScreen.tsx",
   "props": [

src/incubator/toast/index.tsx

@@ -269,7 +269,8 @@ const styles = StyleSheet.create({
     marginRight: Spacings.s3
   },
   action: {
-    backgroundColor: Colors.$backgroundNeutralLight,
+    borderLeftColor: Colors.$outlineDisabled,
+    borderLeftWidth: 1,
     borderTopRightRadius: BorderRadiuses.br40,
     borderBottomRightRadius: BorderRadiuses.br40,
     paddingHorizontal: Spacings.s3,