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

Author: Inbal-Tish

demo/src/screens/componentScreens/ColorPickerScreen.tsx

@@ -2,14 +2,15 @@ import _ from 'lodash';
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
 import {Colors, View, Text, ColorPicker, ColorPalette, ColorName} from 'react-native-ui-lib';
-
+import {renderMultipleSegmentOptions} from '../ExampleScreenPresenter';
 
 interface Props {}
 interface State {
-  color: string,
-  textColor: string,
-  customColors: string[],
-  paletteChange: boolean
+  color: string;
+  textColor: string;
+  customColors: string[];
+  paletteChange: boolean;
+  backgroundColor: string;
 }
 
 const INITIAL_COLOR = Colors.$backgroundPrimaryHeavy;
@@ -24,37 +25,37 @@ const colors = [
   '#8B1079', '#A0138E', '#B13DAC', '#C164BD', '#D08BCD', '#E0B1DE', '#EFD8EE', '#F7EBF7'
 ];
 
-
 export default class ColorPickerScreen extends Component<Props, State> {
   state: State = {
     color: INITIAL_COLOR,
     textColor: Colors.$textDefaultLight,
     customColors: [],
-    paletteChange: false
+    paletteChange: false,
+    backgroundColor: Colors.$backgroundDefault
   };
 
   onDismiss = () => {
     console.log(`screen onDismiss`);
-  }
+  };
 
   onSubmit = (color: string, textColor: string) => {
     const {customColors} = this.state;
     customColors.push(color);
     this.setState({color, textColor, customColors: _.clone(customColors), paletteChange: false});
-  }
+  };
 
   onValueChange = (value: string, options: object) => {
     this.setState({color: value, textColor: options ? _.get(options, 'tintColor') : undefined, paletteChange: false});
-  }
+  };
 
   onPaletteValueChange = (value: string, options: object) => {
     this.setState({color: value, textColor: options ? _.get(options, 'tintColor') : undefined, paletteChange: true});
-  }
+  };
 
   render() {
-    const {color, textColor, customColors, paletteChange} = this.state;
-    const paletteValue = paletteChange ? (color || INITIAL_COLOR) : undefined;
-    const pickerValue = !paletteChange ? (color || INITIAL_COLOR) : undefined;
+    const {color, textColor, customColors, paletteChange, backgroundColor} = this.state;
+    const paletteValue = paletteChange ? color || INITIAL_COLOR : undefined;
+    const pickerValue = !paletteChange ? color || INITIAL_COLOR : undefined;
 
     const mappedColor = ColorName.name(color);
     const nearestColor = mappedColor[0];
@@ -67,18 +68,30 @@ export default class ColorPickerScreen extends Component<Props, State> {
           <Text text60 margin-10 style={{color}}>
             Selected Color: {color}
           </Text>
-          <View center marginB-10 style={{height: 50, width: 200, backgroundColor: color}} >
+          <View center marginB-10 style={{height: 50, width: 200, backgroundColor: color}}>
             <Text text60 style={{color: textColor}}>
               {color}
             </Text>
           </View>
         </View>
         <View bg-$backgroundDefault>
+          <View marginH-20>
+            {renderMultipleSegmentOptions.call(this, 'backgroundColor:', 'backgroundColor', [
+              {label: 'Default', value: Colors.$backgroundDefault},
+              {label: 'Primary', value: Colors.$backgroundPrimaryHeavy},
+              {label: 'Success', value: Colors.$backgroundSuccessHeavy}
+            ])}
+          </View>
           <Text text60 marginL-20 marginB-4 marginT-24>
             Theme Color
           </Text>
           <Text marginL-20>Choose a color for your place’s theme.</Text>
-          <ColorPalette value={paletteValue} onValueChange={this.onPaletteValueChange} colors={colors}/>
+          <ColorPalette
+            value={paletteValue}
+            onValueChange={this.onPaletteValueChange}
+            colors={colors}
+            backgroundColor={backgroundColor}
+          />
           <Text marginL-20 marginT-16>
             Custom Colors
           </Text>
@@ -90,6 +103,7 @@ export default class ColorPickerScreen extends Component<Props, State> {
             onValueChange={this.onValueChange}
             value={pickerValue}
             // animatedIndex={0}
+            backgroundColor={backgroundColor}
           />
         </View>
 

demo/src/screens/componentScreens/GridViewScreen.tsx

@@ -153,7 +153,7 @@ class GridViewScreen extends Component {
             items={contacts}
             // viewWidth={300}
             numColumns={6}
-            lastItemOverlayColor={Colors.rgba(Colors.primary, 0.6)}
+            lastItemOverlayColor={Colors.rgba(Colors.$backgroundPrimaryHeavy, 0.6)}
             lastItemLabel={7}
           />
 
@@ -163,7 +163,7 @@ class GridViewScreen extends Component {
           <GridView
             items={products}
             numColumns={4}
-            lastItemOverlayColor={Colors.rgba(Colors.primary, 0.6)}
+            lastItemOverlayColor={Colors.rgba(Colors.$backgroundPrimaryHeavy, 0.6)}
             lastItemLabel={42}
             keepItemSize
           />

demo/src/screens/componentScreens/MarqueeScreen.tsx

@@ -1,6 +1,5 @@
-import _ from 'lodash';
 import React, {Component} from 'react';
-import {StyleSheet} from 'react-native';
+import {StyleSheet, ScrollView} from 'react-native';
 import {Marquee, MarqueeDirections, Text, View, Spacings} from 'react-native-ui-lib';
 import {renderBooleanOption, renderMultipleSegmentOptions} from '../ExampleScreenPresenter';
 
@@ -61,7 +60,7 @@ export default class MarqueeScreen extends Component<{}> {
 
   render() {
     return (
-      <View flex padding-page>
+      <ScrollView style={styles.container}>
         <Text h1 center margin-20 $textDefault>
           Marquee
         </Text>
@@ -84,12 +83,16 @@ export default class MarqueeScreen extends Component<{}> {
         </View>
         {this.renderHorizontalSection()}
         {this.renderVerticalSection()}
-      </View>
+      </ScrollView>
     );
   }
 }
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20
+  },
   containerHorizontal: {
     borderWidth: 1,
     borderColor: 'black',

lib/components/WheelPicker/index.tsx

@@ -50,7 +50,7 @@ class WheelPicker extends Component<WheelPickerProps> {
 
   static defaultProps = {
     labelStyle: {fontSize: Typography.text70?.fontSize, fontFamily: Typography.text70?.fontFamily},
-    color: Colors.primary
+    color: Colors.$textPrimary
   };
 
   static Item: typeof WheelPickerItem;

package.json

@@ -65,7 +65,7 @@
     "@formatjs/intl-numberformat": "^8.0.4",
     "@formatjs/intl-pluralrules": "^5.0.3",
     "@react-native-community/async-storage": "^1.6.2",
-    "@react-native-community/blur": "^3.4.1",
+    "@react-native-community/blur": "4.3.0",
     "@react-native-community/datetimepicker": "^3.4.6",
     "@react-native-community/netinfo": "^5.6.2",
     "@react-native-picker/picker": "^2.3.0",

src/components/chipsInput/Presenter.ts

@@ -8,7 +8,7 @@ export const hasInvalidChip = (chips: Array<ChipsInputChipProps>) => {
 export const getValidationBasedColor = (chips: Array<ChipsInputChipProps>, defaultChip?: ChipsInputChipProps) => {
   const dismissColor = defaultChip?.dismissColor || Colors.red30;
 
-  return hasInvalidChip(chips) ? dismissColor : Colors.primary;
+  return hasInvalidChip(chips) ? dismissColor : Colors.$backgroundPrimaryHeavy;
 };
 
 export const getCounterTextColor = (stateChips: Array<ChipsInputChipProps>, props: ChipsInputProps) => {

src/components/chipsInput/index.tsx

@@ -572,7 +572,7 @@ const styles = StyleSheet.create({
   tag: {
     borderWidth: 0,
     paddingVertical: 5,
-    backgroundColor: Colors.primary
+    backgroundColor: Colors.$backgroundPrimaryHeavy
   },
   invalidTag: {
     borderWidth: 1,

src/components/colorPalette/index.tsx

@@ -53,6 +53,10 @@ interface Props {
   onValueChange?: (value: string, options: object) => void;
   style?: StyleProp<ViewStyle>;
   testID?: string;
+  /**
+   * Give the ColorPalette a background color
+   */
+  backgroundColor?: string;
 }
 export type ColorPaletteProps = Props;
 
@@ -81,7 +85,8 @@ class ColorPalette extends PureComponent<Props, State> {
   static defaultProps = {
     numberOfRows: DEFAULT_NUMBER_OF_ROWS,
     usePagination: true,
-    loop: true
+    loop: true,
+    backgroundColor: Colors.$backgroundDefault
   };
 
   constructor(props: Props) {
@@ -219,30 +224,31 @@ class ColorPalette extends PureComponent<Props, State> {
     return (margin - 0.001) / 2;
   }
 
-  scrollToSelected = () => setTimeout(() => {
-    const {scrollable, currentPage} = this.state;
-
-    if (scrollable && this.selectedColorIndex !== undefined && this.itemsRefs.current) {
-      // The this.selectedColorIndex layout doesn't update on time
-      // so we use this.selectedColorIndex - 1 and add an offset of 1 Swatch
-      const childRef: any = this.itemsRefs.current[this.selectedColorIndex - 1]?.current;
-
-      if (childRef) {
-        const childLayout = childRef.getLayout();
-        const leftMargins = this.getHorizontalMargins(this.selectedColorIndex).marginLeft;
-        const childX = childLayout.x + childLayout.width + SWATCH_MARGIN + leftMargins + SWATCH_SIZE;
-        if (childX > this.containerWidth) {
-          this.scrollBar?.current?.scrollTo({
-            x: childX + HORIZONTAL_PADDING - this.containerWidth,
-            y: 0,
-            animated: false
-          });
+  scrollToSelected = () =>
+    setTimeout(() => {
+      const {scrollable, currentPage} = this.state;
+
+      if (scrollable && this.selectedColorIndex !== undefined && this.itemsRefs.current) {
+        // The this.selectedColorIndex layout doesn't update on time
+        // so we use this.selectedColorIndex - 1 and add an offset of 1 Swatch
+        const childRef: any = this.itemsRefs.current[this.selectedColorIndex - 1]?.current;
+
+        if (childRef) {
+          const childLayout = childRef.getLayout();
+          const leftMargins = this.getHorizontalMargins(this.selectedColorIndex).marginLeft;
+          const childX = childLayout.x + childLayout.width + SWATCH_MARGIN + leftMargins + SWATCH_SIZE;
+          if (childX > this.containerWidth) {
+            this.scrollBar?.current?.scrollTo({
+              x: childX + HORIZONTAL_PADDING - this.containerWidth,
+              y: 0,
+              animated: false
+            });
+          }
+        } else if (this.usePagination) {
+          this.carousel?.current?.goToPage(this.selectedPage || currentPage, false);
         }
-      } else if (this.usePagination) {
-        this.carousel?.current?.goToPage(this.selectedPage || currentPage, false);
       }
-    }
-  }, 100)
+    }, 100);
 
   onContentSizeChange = (contentWidth: number) => {
     this.setState({
@@ -331,32 +337,32 @@ class ColorPalette extends PureComponent<Props, State> {
   }
 
   renderScrollableContent() {
-    const {containerStyle, ...others} = this.props;
+    const {containerStyle, backgroundColor, ...others} = this.props;
     const {scrollable, contentWidth} = this.state;
 
     return (
       <ScrollBar
         ref={this.scrollBar}
-        style={[containerStyle, styles.scrollContainer]}
+        style={[containerStyle, {backgroundColor}]}
         scrollEnabled={scrollable}
         onContentSizeChange={this.onContentSizeChange}
         height={SCROLLABLE_HEIGHT}
         containerProps={{width: !scrollable ? contentWidth : undefined}}
         gradientHeight={SCROLLABLE_HEIGHT - 12}
-        gradientColor={Colors.$backgroundDefault}
+        gradientColor={backgroundColor}
       >
         {this.renderPalette(others, styles.scrollContent, this.colors, 0)}
       </ScrollBar>
     );
   }
 
   renderPaginationContent() {
-    const {containerStyle, loop, ...others} = this.props;
+    const {containerStyle, loop, backgroundColor, ...others} = this.props;
     const {currentPage} = this.state;
     const colorGroups = _.chunk(this.colors, this.itemsPerPage);
 
     return (
-      <View center style={[containerStyle, styles.paginationContainer]}>
+      <View center style={[containerStyle, styles.paginationContainer, {backgroundColor}]}>
         <Carousel loop={loop} onChangePage={this.onChangePage} ref={this.carousel}>
           {_.map(colorGroups, (colorsPerPage, index) => {
             return this.renderPalette(others, {...styles.page, width: this.containerWidth}, colorsPerPage, index);
@@ -390,12 +396,8 @@ const styles = StyleSheet.create({
   },
   paginationContainer: {
     flex: 1,
-    backgroundColor: Colors.$backgroundDefault,
     paddingBottom: VERTICAL_PADDING
   },
-  scrollContainer: {
-    backgroundColor: Colors.$backgroundDefault
-  },
   page: {
     flexWrap: 'wrap'
   },