Merge remote-tracking branch 'origin' into release

.gitignore

@@ -66,6 +66,7 @@ dist
 dist-ts
 package-lock.json
 docs/components/**
+scripts/token.js
 
 # Ruby / CocoaPods
 /ios/Pods/

demo/src/screens/componentScreens/SegmentedControlScreen.tsx

@@ -18,7 +18,8 @@ const segments: Record<string, Array<SegmentedControlItemProps>> = {
   fifth: [{label: 'Full'}, {label: 'Width'}],
   sixth: [{label: 'Full'}, {label: 'Width'}, {label: 'With'}, {label: 'A'}, {label: 'Very Long Segment'}],
   seventh: [{label: '$'}, {label: '%'}],
-  eighth: [{label: 'Plus', iconSource: Assets.icons.plusSmall}, {label: 'Minus', iconSource: Assets.icons.minusSmall}, {label: 'Check', iconSource: Assets.icons.checkSmall}]
+  eighth: [{label: 'Plus', iconSource: Assets.icons.plusSmall}, {label: 'Minus', iconSource: Assets.icons.minusSmall}, {label: 'Check', iconSource: Assets.icons.checkSmall}],
+  ninth: [{label: 'with'}, {label: 'a'}, {label: 'label'}]
 };
 
 const SegmentedControlScreen = () => {
@@ -87,6 +88,15 @@ const SegmentedControlScreen = () => {
           style={styles.customStyle}
           segmentsStyle={styles.customSegmentsStyle}
         />
+        <Text marginT-s4 center>
+          With a label
+        </Text>
+        <SegmentedControl
+          containerStyle={styles.container}
+          segments={segments.ninth}
+          preset={screenPreset}
+          label="Control label"
+        />
       </View>
     </View>
   );

demo/src/screens/componentScreens/StackAggregatorScreen.tsx

@@ -3,7 +3,6 @@ import React, {Component} from 'react';
 import {ScrollView} from 'react-native';
 import {Colors, View, Text, Button, StackAggregator} from 'react-native-ui-lib';
 
-
 const TEXTS = [
   'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
   'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
@@ -12,28 +11,28 @@ const TEXTS = [
 ];
 
 export default class StackAggregatorScreen extends Component {
-  state = { 
+  state = {
     contents: TEXTS,
     collapsed: true
   };
 
   onItemPress = (index: number) => {
     console.warn('item pressed: ', index);
-  }
+  };
 
   onPress = (index: number) => {
     console.warn('item\'s button pressed: ', index);
-  }
+  };
 
   refreshItems = () => {
     const newItems = _.clone(this.state.contents);
     newItems.push('New Item');
     this.setState({contents: newItems});
-  }
+  };
 
   toggleCollapsed = () => {
     this.setState({collapsed: !this.state.collapsed});
-  }
+  };
 
   renderItem = (_: string, index: number) => {
     return (
@@ -42,7 +41,7 @@ export default class StackAggregatorScreen extends Component {
         <Text>{this.state.contents[index]}</Text>
       </View>
     );
-  }
+  };
 
   render() {
     const {collapsed} = this.state;
@@ -53,18 +52,18 @@ export default class StackAggregatorScreen extends Component {
           <Button link label={collapsed ? 'Open Stack' : 'Close Stack'} onPress={this.toggleCollapsed}/>
           <Button link label="Update content" onPress={this.refreshItems}/>
         </View>
-        <Text center grey40 text90 marginT-20>Thu, 10 Dec, 11:29</Text>
-        <StackAggregator
-          containerStyle={{marginTop: 12}}
-          onItemPress={this.onItemPress}
-          collapsed={collapsed}
-        >
+        <Text center grey40 text90 marginT-20>
+          Thu, 10 Dec, 11:29
+        </Text>
+        <StackAggregator containerStyle={{marginTop: 12}} onItemPress={this.onItemPress} collapsed={collapsed}>
           {_.map(this.state.contents, (item, index) => {
             return this.renderItem(item, index);
           })}
         </StackAggregator>
 
-        <Text center grey40 text90 marginT-20>Thu, 11 Dec, 13:03</Text>
+        <Text center grey40 text90 marginT-20>
+          Thu, 11 Dec, 13:03
+        </Text>
         <StackAggregator
           containerStyle={{marginTop: 12}}
           onItemPress={this.onItemPress}

scripts/prReleaseNotes.js

@@ -1,4 +1,8 @@
-const GITHUB_TOKEN = 'xxxx';
+const GITHUB_TOKEN = require('./token');
+// scripts/token.js:
+// const token = 'XXX';
+// module.exports = token;
+
 const LATEST_VERSION = '7.10.0';
 const NEW_VERSION = '7.11.0';
 const FILE_PREFIX = 'uilib';

src/assets/icons/index.js

@@ -17,6 +17,9 @@ export const icons = {
   get x() {
     return require('./x.png');
   },
+  get xMedium() {
+    return require('./xMedium.png');
+  },
   get xFlat() {
     return require('./xFlat.png');
   }

src/components/badge/index.tsx

@@ -65,7 +65,7 @@ export type BadgeProps = ViewProps &
     /**
      * Additional styles for the badge label
      */
-    labelStyle?: TextStyle;
+    labelStyle?: StyleProp<TextStyle>;
     /**
      * Receives a number from 1 to 4, representing the label's max digit length.
      * Beyond the max number for that digit length, a "+" will show at the end.

src/components/button/index.tsx

@@ -227,7 +227,7 @@ class Button extends PureComponent<Props, ButtonState> {
     let outlineStyle;
     if ((outline || outlineColor) && !this.isLink) {
       outlineStyle = {
-        borderWidth: outlineWidth || 1,
+        borderWidth: outlineWidth ?? 1,
         borderColor: outlineColor || Colors.$outlinePrimary
       };
 

src/components/colorSwatch/index.tsx

@@ -2,7 +2,7 @@ import React, {PureComponent} from 'react';
 import {StyleSheet, Animated, Easing, LayoutChangeEvent, StyleProp, ViewStyle} from 'react-native';
 import Assets from '../../assets';
 import {BorderRadiuses, Colors} from '../../style';
-import {Constants} from '../../commons/new';
+import {asBaseComponent, BaseComponentInjectedProps, Constants, ColorsModifiers} from '../../commons/new';
 import View from '../view';
 import TouchableOpacity from '../touchableOpacity';
 import Image from '../image';
@@ -50,7 +50,7 @@ interface Props {
    */
   size?: number;
 }
-export type ColorSwatchProps = Props;
+export type ColorSwatchProps = Props & ColorsModifiers;
 
 const transparentImage = require('./assets/transparentSwatch/TransparentSwatch.png');
 const DEFAULT_SIZE = Constants.isTablet ? 44 : 36;
@@ -62,7 +62,7 @@ export const SWATCH_SIZE = DEFAULT_SIZE;
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ColorPickerScreen.tsx
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ColorPalette/ColorPalette.gif?raw=true
  */
-class ColorSwatch extends PureComponent<Props> {
+class ColorSwatch extends PureComponent<Props & BaseComponentInjectedProps> {
   static displayName = 'ColorSwatch';
 
   state = {
@@ -71,7 +71,7 @@ class ColorSwatch extends PureComponent<Props> {
     animatedScale: new Animated.Value(0.5)
   };
 
-  styles = createStyles(this.props);
+  styles = createStyles({...this.props, color: this.color});
   layout = {x: 0, y: 0};
 
   componentDidMount() {
@@ -85,6 +85,11 @@ class ColorSwatch extends PureComponent<Props> {
     }
   }
 
+  get color() {
+    const {color, modifiers} = this.props;
+    return color || modifiers?.color;
+  }
+
   animateSwatch(newValue: number) {
     const {animatedOpacity, animatedScale} = this.state;
 
@@ -118,7 +123,8 @@ class ColorSwatch extends PureComponent<Props> {
   }
 
   onPress = () => {
-    const {color = '', value, index} = this.props;
+    const {value, index} = this.props;
+    const color = this.color ?? '';
     const tintColor = this.getTintColor(value);
     const result = value || color;
     const hexString = Colors.getHexString(result);
@@ -135,7 +141,7 @@ class ColorSwatch extends PureComponent<Props> {
   }
 
   getAccessibilityInfo() {
-    const {color} = this.props;
+    const color = this.color;
 
     return {
       accessibilityLabel: color && Colors.getColorName(color),
@@ -152,7 +158,8 @@ class ColorSwatch extends PureComponent<Props> {
   };
 
   renderContent() {
-    const {style, color, onPress, unavailable, size = DEFAULT_SIZE, ...others} = this.props;
+    const {style, onPress, unavailable, size = DEFAULT_SIZE, ...others} = this.props;
+    const color = this.color;
     const {isSelected} = this.state;
     const Container = onPress ? TouchableOpacity : View;
     const tintColor = this.getTintColor(color);
@@ -213,7 +220,7 @@ class ColorSwatch extends PureComponent<Props> {
   }
 }
 
-export default ColorSwatch;
+export default asBaseComponent<ColorSwatchProps>(ColorSwatch);
 
 function createStyles({color = Colors.grey30}) {
   return StyleSheet.create({

src/components/hint/index.tsx

@@ -534,7 +534,8 @@ class Hint extends Component<HintProps, HintState> {
   }
 
   renderMockChildren() {
-    const {children} = this.props;
+    const {children, backdropColor} = this.props;
+    const isBackdropColorPassed = backdropColor !== undefined;
     if (children && React.isValidElement(children)) {
       const layout = {
         ...this.getContainerPosition(),
@@ -545,7 +546,7 @@ class Hint extends Component<HintProps, HintState> {
       };
 
       return (
-        <View style={[styles.mockChildrenContainer, layout]}>
+        <View style={[styles.mockChildrenContainer, layout, !isBackdropColorPassed && styles.hidden]}>
           {React.cloneElement<any>(children, {
             collapsable: false,
             key: 'mock',
@@ -609,6 +610,7 @@ const styles = StyleSheet.create({
   container: {
     position: 'absolute'
   },
+  hidden: {opacity: 0},
   overlayContainer: {
     zIndex: 10,
     elevation: 10

src/components/index.js

@@ -134,6 +134,9 @@ export default {
   get ProgressBar() {
     return require('./progressBar').default;
   },
+  get ProgressiveImage() {
+    return require('./progressiveImage').default;
+  },
   get StateScreen() {
     return require('./stateScreen').default;
   },

src/components/picker/PickerItemsList.tsx

@@ -36,7 +36,7 @@ const PickerItemsList = (props: PickerItemsListProps) => {
   } = props;
   const context = useContext(PickerContext);
 
-  const [wheelPickerValue, setWheelPickerValue] = useState<PickerSingleValue>(context.value ?? items?.[0].value);
+  const [wheelPickerValue, setWheelPickerValue] = useState<PickerSingleValue>(context.value ?? items?.[0]?.value);
   // TODO: Might not need this memoized style, instead we can move it to a stylesheet
   const wrapperContainerStyle = useMemo(() => {
     // const shouldFlex = Constants.isWeb ? 1 : useDialog ? 1 : 1;

src/components/progressiveImage/index.js → src/components/progressiveImage/index.tsx

@@ -1,46 +1,37 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {View, StyleSheet, Animated} from 'react-native';
-import AnimatedImage from '../animatedImage';
+import AnimatedImage, {AnimatedImageProps} from '../animatedImage';
 import {Colors} from '../../style';
 
 /**
- * @description: Image component that loads first a small thumbnail of the images, 
+ * @description: Image component that loads first a small thumbnail of the images,
  *               and fades-in the full-sized image with animation once it's loaded
  * @extends: AnimatedImage
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ProgressiveImageScreen.js
  */
-class ProgressiveImage extends React.Component {
+
+export type ProgressiveImageProps = {
+  /**
+   * small thumbnail source to display while the full-size image is loading
+   */
+  thumbnailSource: AnimatedImageProps['source'];
+};
+
+class ProgressiveImage extends React.Component<ProgressiveImageProps, {}> {
   static displayName = 'ProgressiveImage';
-  static propTypes = {
-    /**
-     * small thumbnail source to display while the full-size image is loading
-     */
-    thumbnailSource: PropTypes.object
-  };
 
   thumbnailAnimated = new Animated.Value(0);
   imageAnimated = new Animated.Value(0);
 
   getThumbnail = () => {
     const {thumbnailSource, ...props} = this.props;
 
-    return (
-      <AnimatedImage                
-        {...props}
-        source={thumbnailSource}
-        loader={<View style={styles.container}/>}        
-      />
-    );
+    return <AnimatedImage {...props} source={thumbnailSource} loader={<View style={styles.container}/>}/>;
   };
 
-  render() {    
-    return (
-      <AnimatedImage        
-        {...this.props}
-        loader={this.getThumbnail()}
-      />
-    );
+  render() {
+    //@ts-ignore
+    return <AnimatedImage {...this.props} loader={this.getThumbnail()}/>;
   }
 }
 
@@ -50,5 +41,4 @@ const styles = StyleSheet.create({
   }
 });
 
-
 export default ProgressiveImage;

src/components/segmentedControl/__tests__/index.spec.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import SegmentedControl, {type SegmentedControlProps} from '../index';
+
+const testSegmentes = [{label: 'Segmented 1'}, {label: 'Segmented 2'}, {label: 'Segmented 3'}, {label: 'Segmented 4'}];
+
+const TestCase = (props: Partial<SegmentedControlProps>) => {
+  return <SegmentedControl segments={testSegmentes} {...props}/>;
+};
+
+describe('SegmentedControl', () => {
+  it('should render', () => {
+    const renderTree = render(<TestCase/>);
+    expect(renderTree).toBeTruthy();
+  });
+  it('should render with a label', () => {
+    const renderTree = render(<TestCase label="Test Label"/>);
+    expect(renderTree.queryByText('Test Label')).toBeTruthy();
+  });
+});