Typescript/feature highlight (#1338)

* index file .js to .tsx

* migrate FeatureHighlight to typescript

* demo-screen .js -> .tsx

* migrate demo screen to typescript

* Fixing warning

* export FeatureHighlight ts component

* marked part of the props as optional

* removed .d.ts file

* // @ts-expect-error since it hasn't been exported yet

* removed redundant default props

Author: mendyEdri

demo/src/screens/componentScreens/FeatureHighlightScreen.js renamed to demo/src/screens/componentScreens/FeatureHighlightScreen.tsx

@@ -23,16 +23,22 @@ const messages = [
   'Here is where you can view demos of all Uilib components'
 ];
 
-class FeatureHighlightScreen extends Component {
-  constructor(props) {
+interface State {
+  currentTargetIndex: number;
+  showFTE: boolean;
+}
+
+class FeatureHighlightScreen extends Component<{}, State> {
+  viewRef: any;
+  targets: {[key: string]: any} = {};
+
+  constructor(props: any) {
     super(props);
 
     this.state = {
       showFTE: false,
       currentTargetIndex: 0
     };
-
-    this.targets = {};
   }
 
   componentDidMount() {
@@ -46,7 +52,7 @@ class FeatureHighlightScreen extends Component {
     this.setState({showFTE: false}, () => {
       if (this.viewRef) {
         const reactTag = findNodeHandle(this.viewRef);
-        AccessibilityInfo.setAccessibilityFocus(reactTag);
+        reactTag && AccessibilityInfo.setAccessibilityFocus(reactTag);
       }
     });
   };
@@ -55,7 +61,7 @@ class FeatureHighlightScreen extends Component {
     this.setState({showFTE: true});
   };
 
-  addTarget(ref, id) {
+  addTarget(ref: any, id: string) {
     if (ref && !this.targets[id]) {
       this.targets[id] = ref;
     }
@@ -68,7 +74,7 @@ class FeatureHighlightScreen extends Component {
     this.moveToPage(newTargetIndex);
   };
 
-  moveToPage(index) {
+  moveToPage(index: number) {
     if (index < _.size(this.targets)) {
       this.setState({currentTargetIndex: index});
     } else {
@@ -87,7 +93,7 @@ class FeatureHighlightScreen extends Component {
     };
   }
 
-  onPagePress = index => {
+  onPagePress = (index: number) => {
     this.moveToPage(index);
   };
 

src/components/featureHighlight/__tests__/index.spec.js

@@ -1,16 +1,15 @@
 import {updateConstants} from '../../../helpers/Constants';
+import {testable as FeatureHighlight} from '../';
 
 describe('FeatureHighlight', () => {
-  let FeatureHighlight;
 
   beforeEach(() => {
     mockScreenDimentions();
-    FeatureHighlight = require('../index').default;
   });
 
   describe('getContentPosition', () => {
     it('massage should be placed above element positioned below screen\'s vertical center', () => {
-      const uut = new FeatureHighlight({});
+      const uut = new FeatureHighlight({visible: true});
       uut.state = {
         contentTopPosition: 0
       };