Merge branch 'master' into release

Author: adids1221

src/components/WheelPicker/Item.tsx

@@ -73,6 +73,7 @@ const WheelPickerItem = memo(({
     return [animatedColorStyle, style, fakeLabel ? textWithLabelPaddingStyle : styles.textPadding];
   }, [style, fakeLabel, animatedColorStyle, textWithLabelPaddingStyle]);
 
+  const _fakeLabelStyle = useMemo(() => StyleSheet.flatten([fakeLabelStyle, styles.hidden]), [fakeLabelStyle]);
   return (
     <AnimatedTouchableOpacity
       activeOpacity={1}
@@ -88,22 +89,11 @@ const WheelPickerItem = memo(({
       testID={testID}
       row
     >
-      <AnimatedText
-        text60R
-        testID={`${testID}.text`}
-        numberOfLines={1}
-        style={textStyle}
-        recorderTag={'unmask'}
-      >
+      <AnimatedText text60R testID={`${testID}.text`} numberOfLines={1} style={textStyle} recorderTag={'unmask'}>
         {label}
       </AnimatedText>
       {fakeLabel && (
-        <Text
-          text80M
-          $textDefaultLight
-          {...fakeLabelProps}
-          style={fakeLabelStyle}
-        >
+        <Text text80M $textDefaultLight {...fakeLabelProps} style={_fakeLabelStyle}>
           {fakeLabel}
         </Text>
       )}
@@ -122,5 +112,8 @@ const styles = StyleSheet.create({
   },
   disableRTL: {
     flexDirection: 'row-reverse'
+  },
+  hidden: {
+    opacity: 0
   }
 });

src/components/colorPicker/index.tsx

@@ -1,4 +1,4 @@
-import React, {PureComponent} from 'react';
+import React, {useCallback, useState} from 'react';
 import {StyleSheet} from 'react-native';
 import {asBaseComponent} from '../../commons/new';
 import Assets from '../../assets';
@@ -58,77 +58,65 @@ const ACCESSIBILITY_LABELS = {
  * @notes: This is a screen width component
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ColorPicker/ColorPicker.gif?raw=true
  */
-class ColorPicker extends PureComponent<Props> {
-  static displayName = 'ColorPicker';
+const ColorPicker = (props: Props) => {
+  const {
+    accessibilityLabels = ACCESSIBILITY_LABELS,
+    backgroundColor = Colors.$backgroundDefault,
+    initialColor,
+    colors,
+    value,
+    testID,
+    onValueChange,
+    animatedIndex
+  } = props;
+  const [show, setShow] = useState(false);
 
-  static defaultProps = {
-    accessibilityLabels: ACCESSIBILITY_LABELS,
-    backgroundColor: Colors.$backgroundDefault
-  };
-
-  state = {
-    show: false
-  };
+  const showDialog = useCallback(() => setShow(true), []);
 
-  get animatedIndex() {
-    const {animatedIndex, colors} = this.props;
-    if (animatedIndex === undefined) {
-      return colors.length - 1;
-    }
-    return animatedIndex;
-  }
+  const hideDialog = useCallback(() => setShow(false), []);
 
-  showDialog = () => {
-    this.setState({show: true});
-  };
-
-  hideDialog = () => {
-    this.setState({show: false});
-  };
-
-  render() {
-    const {initialColor, colors, value, testID, accessibilityLabels, backgroundColor, onValueChange} = this.props;
-    const {show} = this.state;
-    return (
-      <View row testID={testID} style={{backgroundColor}}>
-        <ColorPalette
-          value={value}
-          colors={colors}
-          style={styles.palette}
-          usePagination={false}
-          animatedIndex={this.animatedIndex}
-          onValueChange={onValueChange}
-          testID={`${testID}-palette`}
-          backgroundColor={backgroundColor}
-        />
-        <View style={[styles.buttonContainer, {backgroundColor}]}>
-          <Button
-            color={Colors.$textDefault}
-            outlineColor={Colors.$textDefault}
-            style={styles.button}
-            round
-            outline
-            iconSource={Assets.icons.plusSmall}
-            onPress={this.showDialog}
-            testID={`${testID}-button`}
-            accessibilityLabel={accessibilityLabels?.addButton}
-          />
-        </View>
-        <ColorPickerDialog
-          {...this.props}
-          key={initialColor}
-          visible={show}
-          onDismiss={this.hideDialog}
-          accessibilityLabels={{
-            dismissButton: accessibilityLabels?.dismissButton,
-            doneButton: accessibilityLabels?.doneButton,
-            input: accessibilityLabels?.input
-          }}
+  return (
+    <View row testID={testID} style={{backgroundColor}}>
+      <ColorPalette
+        value={value}
+        colors={colors}
+        style={styles.palette}
+        usePagination={false}
+        animatedIndex={animatedIndex ?? colors.length - 1}
+        onValueChange={onValueChange}
+        testID={`${testID}-palette`}
+        backgroundColor={backgroundColor}
+      />
+      <View style={[styles.buttonContainer, {backgroundColor}]}>
+        <Button
+          color={Colors.$textDefault}
+          outlineColor={Colors.$textDefault}
+          style={styles.button}
+          round
+          outline
+          iconSource={Assets.icons.plusSmall}
+          onPress={showDialog}
+          testID={`${testID}-button`}
+          accessibilityLabel={accessibilityLabels?.addButton}
         />
       </View>
-    );
-  }
-}
+      <ColorPickerDialog
+        {...props}
+        key={initialColor}
+        visible={show}
+        onDismiss={hideDialog}
+        accessibilityLabels={{
+          dismissButton: accessibilityLabels?.dismissButton,
+          doneButton: accessibilityLabels?.doneButton,
+          input: accessibilityLabels?.input
+        }}
+        migrate
+      />
+    </View>
+  );
+};
+
+ColorPicker.displayName = 'ColorPicker';
 
 export default asBaseComponent<Props>(ColorPicker);
 

src/components/image/index.tsx

@@ -207,6 +207,7 @@ class Image extends PureComponent<Props, State> {
   renderImage = (useImageInsideContainer: boolean) => {
     const {error} = this.state;
     const source = error ? this.getVerifiedSource(this.props.errorSource) : this.getImageSource();
+
     const {
       tintColor,
       style,

src/components/numberInput/Presenter.ts

@@ -50,7 +50,7 @@ function factor(options: Options): number {
 }
 
 export function getInitialNumber(propsInitialNumber = 0, options: Options) {
-  return propsInitialNumber * factor(options);
+  return Number((propsInitialNumber * factor(options)).toFixed(0));
 }
 
 export function parseInput(text: string, options: Options, initialNumber?: number): NumberInputData {

src/components/numberInput/__tests__/Presenter.spec.ts

@@ -39,6 +39,10 @@ describe('NumberInput', () => {
     it('should return 10 for 1 if fractionDigits is 1', () => {
       expect(getInitialNumber(1, {...EN_OPTIONS, fractionDigits: 1})).toEqual(10);
     });
+
+    it('Handle wrong result with some X.XX numbers', () => {
+      expect(getInitialNumber(8.97, {...EN_OPTIONS})).toEqual(897);
+    });
   });
 
   describe('getInitialData', () => {