[change] modernize ProgressBar

Rewrite ProgressBar to use function components and hooks.
Rewrite the tests to replace enzyme with testing-library.

packages/react-native-web/src/exports/ProgressBar/__tests__/index-test.js

@@ -1,19 +1,19 @@
 /* eslint-env jasmine, jest */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import ProgressBar from '..';
 
 describe('components/ProgressBar', () => {
   describe('progress', () => {
-    it('value as percentage is set to "aria-valuenow"', () => {
-      const component = shallow(<ProgressBar progress={0.5} />);
-      expect(component.prop('aria-valuenow') === 50).toBeTruthy();
+    test('value as percentage is set to "aria-valuenow"', () => {
+      const { container } = render(<ProgressBar progress={0.5} />);
+      expect(container.firstChild.getAttribute('aria-valuenow')).toBe('50');
     });
 
-    it('is ignored when "indeterminate" is "true"', () => {
-      const component = shallow(<ProgressBar indeterminate progress={0.5} />);
-      expect(component.prop('aria-valuenow') === null).toBeTruthy();
+    test('is ignored when "indeterminate" is "true"', () => {
+      const { container } = render(<ProgressBar indeterminate progress={0.5} />);
+      expect(container.firstChild.getAttribute('aria-valuenow')).toBe(null);
     });
   });
 });

packages/react-native-web/src/exports/ProgressBar/index.js

@@ -10,10 +10,9 @@
 import type { ColorValue } from '../../types';
 import type { ViewProps } from '../View';
 
-import applyNativeMethods from '../../modules/applyNativeMethods';
 import StyleSheet from '../StyleSheet';
 import View from '../View';
-import React from 'react';
+import React, { forwardRef, useEffect, useRef } from 'react';
 
 type ProgressBarProps = {
   ...ViewProps,
@@ -23,63 +22,47 @@ type ProgressBarProps = {
   trackColor?: ColorValue
 };
 
-class ProgressBar extends React.Component<ProgressBarProps> {
-  _progressElement: View;
+const ProgressBar = forwardRef<ProgressBarProps, *>((props, ref) => {
+  const {
+    color = '#1976D2',
+    indeterminate = false,
+    progress = 0,
+    trackColor = 'transparent',
+    style,
+    ...other
+  } = props;
 
-  static displayName = 'ProgressBar';
+  const percentageProgress = progress * 100;
 
-  componentDidMount() {
-    this._updateProgressWidth();
-  }
-
-  componentDidUpdate() {
-    this._updateProgressWidth();
-  }
-
-  render() {
-    const {
-      color = '#1976D2',
-      indeterminate = false,
-      progress = 0,
-      trackColor = 'transparent',
-      style,
-      ...other
-    } = this.props;
-
-    const percentageProgress = progress * 100;
-
-    return (
-      <View
-        {...other}
-        accessibilityRole="progressbar"
-        aria-valuemax="100"
-        aria-valuemin="0"
-        aria-valuenow={indeterminate ? null : percentageProgress}
-        style={[styles.track, style, { backgroundColor: trackColor }]}
-      >
-        <View
-          ref={this._setProgressRef}
-          style={[styles.progress, indeterminate && styles.animation, { backgroundColor: color }]}
-        />
-      </View>
-    );
-  }
-
-  _setProgressRef = element => {
-    this._progressElement = element;
-  };
-
-  _updateProgressWidth = () => {
-    const { indeterminate = false, progress = 0 } = this.props;
-    const percentageProgress = indeterminate ? 50 : progress * 100;
+  const progressRef = useRef(null);
+  useEffect(() => {
     const width = indeterminate ? '25%' : `${percentageProgress}%`;
-    if (this._progressElement) {
-      this._progressElement.setNativeProps({
+    if (progressRef.current != null) {
+      progressRef.current.setNativeProps({
         style: { width }
       });
     }
-  };
-}
+  }, [indeterminate, percentageProgress, progressRef]);
+
+  return (
+    <View
+      {...other}
+      accessibilityRole="progressbar"
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow={indeterminate ? null : percentageProgress}
+      ref={ref}
+      style={[styles.track, style, { backgroundColor: trackColor }]}
+    >
+      <View
+        ref={progressRef}
+        style={[styles.progress, indeterminate && styles.animation, { backgroundColor: color }]}
+      />
+    </View>
+  );
+});
+
+ProgressBar.displayName = 'ProgressBar';
 
 const styles = StyleSheet.create({
   track: {
@@ -105,4 +88,4 @@ const styles = StyleSheet.create({
   }
 });
 
-export default applyNativeMethods(ProgressBar);
+export default ProgressBar;