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

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,

src/optionalDependencies/PostCssPackage.ts

@@ -0,0 +1,13 @@
+let PostCssPackage: {postcss: any, cssjs: any} | undefined;
+try {
+  const postcss = require('postcss');
+  const cssjs = require('postcss-js');
+
+
+  PostCssPackage = {
+    postcss,
+    cssjs
+  };
+} catch (error) {}
+
+export default PostCssPackage;

src/optionalDependencies/index.web.ts

@@ -0,0 +1,9 @@
+export {default as NetInfoPackage} from './NetInfoPackage';
+export {default as HapticFeedbackPackage} from './HapticFeedbackPackage';
+export {PickerPackage, CommunityPickerPackage} from './PickerPackage';
+export {default as SvgPackage} from './SvgPackage';
+export {createShimmerPlaceholder} from './ShimmerPackage';
+export {default as LinearGradientPackage} from './LinearGradientPackage';
+export {default as AsyncStoragePackage} from './AsyncStoragePackage';
+export {default as PostCssPackage} from './PostCssPackage';
+

src/utils/imageUtils.ts

@@ -11,6 +11,13 @@ export function isSvg(source: ImageProps['source']) {
   return typeof source === 'string' || typeof source === 'function' || isSvgUri(source);
 }
 
+export function isBase64ImageContent(data: string) {
+  const base64Content = data.split(',')[1];
+  const base64regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/;
+  return base64regex.test(base64Content);
+}
+
 export function getAsset(assetName = '', assetGroup = '') {
   return get(Assets, `${assetGroup}.${assetName}`);
 }
+

webDemo/package.json

@@ -30,7 +30,9 @@
     "react-native-svg-transformer": "^0.14.3",
     "react-native-ui-lib": "snapshot",
     "react-native-web": "^0.18.6",
-    "typescript": "^4.4.2"
+    "typescript": "^4.4.2",
+    "postcss": "^8.4.21",
+    "postcss-js": "^4.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.14.8",

webDemo/src/App.tsx

@@ -38,6 +38,24 @@ interface ItemToRender {
   title: string,
   FC: React.FC
 }
+const svgData = `<?xml version="1.0" encoding="UTF-8"?>
+<svg data-bbox="2 2 28 28" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" height="800" width="800" data-type="ugc">
+    <g>
+        <defs>
+            <linearGradient gradientUnits="userSpaceOnUse" gradientTransform="matrix(.893 0 0 .893 -64.139 -782.556)" y2="878.134" x2="105.452" y1="910.226" x1="73.714" id="1c6ca7ff-eba0-4dd0-82e3-63fdfa256791">
+                <stop stop-color="#0296d8" offset="0"/>
+                <stop stop-color="#8371d9" offset="1"/>
+            </linearGradient>
+            <linearGradient gradientUnits="userSpaceOnUse" gradientTransform="matrix(.893 0 0 .893 -64.139 -782.556)" y2="875.745" x2="102.279" y1="905.226" x1="69.813" id="85cd62d4-a6c1-4ded-b1ca-e6c438f49e1b">
+                <stop stop-color="#cb55c0" offset="0"/>
+                <stop stop-color="#f28e0e" offset="1"/>
+            </linearGradient>
+        </defs>
+        <path d="M2 2v28h28v-.047l-6.95-7-6.95-7.007 6.95-7.012L29.938 2Z" fill="url(#1c6ca7ff-eba0-4dd0-82e3-63fdfa256791)"/>
+        <path d="M16.318 2 2 16.318V30h.124l14.008-14.008-.031-.031L23.05 8.95 29.938 2Z" fill="url(#85cd62d4-a6c1-4ded-b1ca-e6c438f49e1b)"/>
+    </g>
+</svg>
+`;
 
 const itemsToRender: ItemToRender[] = [
   {
@@ -91,6 +109,20 @@ const itemsToRender: ItemToRender[] = [
       />
     )
   },
+  {
+    title: 'Button with Svg as <svg> data tag',
+    FC: () => (
+      <Button
+        label={'Svg tag'}
+        size={Button.sizes.large}
+        iconSource={svgData}
+        iconStyle={{
+          width: 24,
+          height: 24
+        }}
+      />
+    )
+  },
   {
     title: 'Link Button',
     FC: () => (

webDemo/webpack.config.js

@@ -22,7 +22,9 @@ const baseProjectSource = [
   path.resolve(appDirectory, 'node_modules/@react-native-community/netinfo'),
   path.resolve(appDirectory, 'node_modules/@react-native-community/datetimepicker'),
   path.resolve(appDirectory, 'node_modules/react-native-color'),
-  path.resolve(appDirectory, 'node_modules/react-native-ui-lib')
+  path.resolve(appDirectory, 'node_modules/react-native-ui-lib'),
+  path.resolve(appDirectory, 'node_modules/postcss'),
+  path.resolve(appDirectory, 'node_modules/postcss-js')
 ];
 
 const useBabelForRN = {