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();
+ });
+});