Typescript/wizard move to typescript

demo/src/screens/componentScreens/WizardScreen.js → demo/src/screens/componentScreens/WizardScreen.tsx

@@ -9,25 +9,30 @@ const stepTypes = _.map(Wizard.States, state => {
   return <Text key={state}>{state}</Text>;
 });
 
-export default class WizardScreen extends Component {
-  constructor(props) {
-    super(props);
+interface State {
+  activeIndex: number;
+  completedStepIndex?: number;
+  allTypesIndex: number;
+  selectedFlavor: string;
+  customerName?: string;
+  toastMessage?: string;
+}
 
-    this.state = {
-      activeIndex: 0,
-      completedStepIndex: undefined,
-      allTypesIndex: 0,
-      selectedFlavor: initialFlavor,
-      customerName: undefined,
-      toastMessage: undefined
-    };
-  }
+export default class WizardScreen extends Component<{}, State> {
+  state = {
+    activeIndex: 0,
+    completedStepIndex: undefined,
+    allTypesIndex: 0,
+    selectedFlavor: initialFlavor,
+    customerName: undefined,
+    toastMessage: undefined
+  };
 
-  onActiveIndexChanged = activeIndex => {
+  onActiveIndexChanged = (activeIndex: number) => {
     this.setState({activeIndex});
   };
 
-  onAllTypesIndexChanged = allTypesIndex => {
+  onAllTypesIndexChanged = (allTypesIndex: number) => {
     this.setState({allTypesIndex});
   };
 
@@ -88,7 +93,7 @@ export default class WizardScreen extends Component {
     }
   };
 
-  renderNextButton = disabled => {
+  renderNextButton = (disabled?: boolean) => {
     const {activeIndex} = this.state;
     const label = activeIndex === 2 ? 'done & reset' : 'next';
 
@@ -104,12 +109,12 @@ export default class WizardScreen extends Component {
     );
   };
 
-  renderFlavorRadioButton = index => {
+  renderFlavorRadioButton = (index: number) => {
     const value = flavors[index];
     return <RadioButton testID={value} marginL-10={index > 0} value={value} label={value}/>;
   };
 
-  setSelectedFlavor = selectedFlavor => {
+  setSelectedFlavor = (selectedFlavor: string) => {
     this.setState({selectedFlavor});
   };
 
@@ -130,7 +135,7 @@ export default class WizardScreen extends Component {
     );
   };
 
-  onNameEntered = customerName => {
+  onNameEntered = (customerName: string) => {
     this.setState({customerName});
   };
 
@@ -178,7 +183,7 @@ export default class WizardScreen extends Component {
     }
   };
 
-  getStepState(index) {
+  getStepState(index: number) {
     const {activeIndex, completedStepIndex} = this.state;
     let state = Wizard.States.DISABLED;
     if (completedStepIndex > index - 1) {

generatedTypes/components/wizard/WizardStates.d.ts

@@ -0,0 +1,2 @@
+import { WizardStepsConfig } from './types';
+export declare const StatesConfig: WizardStepsConfig;

generatedTypes/components/wizard/WizardStep.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { WizardStepProps } from './types';
+declare const _default: React.ComponentClass<WizardStepProps & {
+    useCustomTheme?: boolean | undefined;
+}, any>;
+export default _default;

generatedTypes/components/wizard/index.d.ts

@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import WizardStep from './WizardStep';
+import { WizardProps, WizardStepProps, WizardStepStates, WizardStepConfig, WizardStepsConfig } from './types';
+export { WizardProps, WizardStepProps, WizardStepStates, WizardStepConfig, WizardStepsConfig };
+interface State {
+    maxWidth: number;
+}
+/**
+ * @description: Wizard Component: a wizard presents a series of steps in  prescribed order
+ * that the user needs to complete in order to accomplish a goal (e.g. purchase a product).
+ *
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/WizardScreen.js
+ * @notes: Use Wizard with nested Wizard.Step(s) to achieve the desired result.
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Wizard/Wizard.gif?raw=true
+ * @image: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Wizard/WizardPresets.png?raw=true
+ */
+declare class Wizard extends Component<WizardProps, State> {
+    static displayName: string;
+    static Step: typeof WizardStep;
+    static States: typeof WizardStepStates;
+    constructor(props: WizardProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    onOrientationChange: () => void;
+    getMaxWidth(): number;
+    renderChildren(): React.DetailedReactHTMLElement<any, HTMLElement>[] | null | undefined;
+    render(): JSX.Element;
+}
+declare const _default: React.ComponentClass<WizardProps & {
+    useCustomTheme?: boolean | undefined;
+}, any> & typeof Wizard;
+export default _default;

generatedTypes/components/wizard/types.d.ts

@@ -0,0 +1,88 @@
+import { ImageProps } from '../image';
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+export declare enum WizardStepStates {
+    ENABLED = "enabled",
+    DISABLED = "disabled",
+    ERROR = "error",
+    SKIPPED = "skipped",
+    COMPLETED = "completed"
+}
+export interface WizardStepProps {
+    /**
+     * The state of the step (Wizard.States.X)
+     */
+    state: WizardStepStates;
+    /**
+     * The label of the item
+     */
+    label?: string;
+    /**
+     * Additional styles for the label
+     */
+    labelStyle?: StyleProp<TextStyle>;
+    /**
+     * Additional styles for the connector
+     */
+    connectorStyle?: StyleProp<ViewStyle>;
+    /**
+     * Color of the step index (or of the icon, when provided)
+     */
+    color?: string;
+    /**
+     * Color of the circle
+     */
+    circleColor?: string;
+    /**
+     * The step's circle size (diameter)
+     */
+    circleSize?: number;
+    /**
+     * Circle's background color
+     */
+    circleBackgroundColor?: string;
+    /**
+     * Icon to replace the (default) index
+     */
+    icon?: ImageProps;
+    /**
+     * Additional styles for the index's label (when icon is not provided)
+     */
+    indexLabelStyle?: StyleProp<TextStyle>;
+    /**
+     * Whether the step should be enabled
+     */
+    enabled?: boolean;
+    /**
+     * Extra text to be read in accessibility mode
+     */
+    accessibilityInfo?: string;
+}
+export declare type WizardStepConfig = Omit<WizardStepProps, 'state'>;
+export interface WizardStepsConfig {
+    enabled?: WizardStepConfig;
+    disabled?: WizardStepConfig;
+    error?: WizardStepConfig;
+    skipped?: WizardStepConfig;
+    completed?: WizardStepConfig;
+    active?: WizardStepConfig;
+}
+export interface WizardProps {
+    /**
+     * The active step's index
+     */
+    activeIndex: number;
+    /**
+     * The configuration of the active step (see Wizard.Step.propTypes)
+     */
+    activeConfig?: WizardStepProps;
+    /**
+     * Callback that is called when the active step is changed (i.e. a step was clicked on).
+     * The new activeIndex will be the input of the callback.
+     */
+    onActiveIndexChanged?: (index: number) => void;
+    /**
+     * Add or override style of the container
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    testID?: string;
+}

generatedTypes/index.d.ts

@@ -75,6 +75,7 @@ export {default as Dialog, DialogProps} from './components/dialog';
 export {default as PageControl, PageControlProps} from './components/pageControl';
 export {default as Carousel, CarouselProps, PageControlPosition} from './components/carousel';
 export {default as ActionSheet} from './components/actionSheet';
+export {default as Wizard, WizardProps, WizardStepProps, WizardStepStates, WizardStepConfig, WizardStepsConfig} from './components/wizard';
 
 /* All components with manual typings */
 export {
@@ -120,4 +121,3 @@ export const SafeAreaInsetsManager;
 export const SafeAreaSpacerView;
 export const SelectableComponent;
 export const TextField;
-export const Wizard;

src/components/wizard/WizardStates.js → src/components/wizard/WizardStates.ts

@@ -1,16 +1,9 @@
 import Colors from '../../style/colors';
 const checkMarkSmall = require('./assets/checkMarkSmall.png');
 const exclamationSmall = require('./assets/exclamationSmall.png');
+import {WizardStepsConfig} from './types';
 
-export const States = {
-  ENABLED: 'enabled',
-  DISABLED: 'disabled',
-  ERROR: 'error',
-  SKIPPED: 'skipped',
-  COMPLETED: 'completed'
-};
-
-export const StatesConfig = {
+export const StatesConfig: WizardStepsConfig = {
   enabled: {color: Colors.dark30, circleColor: Colors.dark60, enabled: true},
   disabled: {color: Colors.dark50, circleColor: Colors.dark60},
   error: {color: Colors.red30, icon: exclamationSmall, enabled: true, accessibilityInfo: 'Validation Error'},

src/components/wizard/WizardStep.js → src/components/wizard/WizardStep.tsx

@@ -1,16 +1,23 @@
 import _ from 'lodash';
-import PropTypes from 'prop-types';
-import React from 'react';
+import React, {Component} from 'react';
 import {StyleSheet} from 'react-native';
 import View from '../view';
 import Text from '../text';
 import Image from '../image';
 import TouchableOpacity from '../touchableOpacity';
-import {PureBaseComponent} from '../../commons';
+import {asBaseComponent} from '../../commons/new';
 import Colors from '../../style/colors';
 import BorderRadiuses from '../../style/borderRadiuses';
 import Spacings from '../../style/spacings';
-import {States, StatesConfig} from './WizardStates';
+import {WizardStepProps, WizardProps} from './types';
+import {StatesConfig} from './WizardStates';
+
+// Includes private props from the Wizard
+interface Props extends WizardStepProps, Omit<WizardProps, 'onActiveIndexChanged | containerStyle'> {
+  index: number;
+  maxWidth: number;
+  onPress: WizardProps['onActiveIndexChanged'];
+}
 
 /**
  * @description: WizardStep Component: a wizard presents a series of steps in  prescribed order
@@ -19,62 +26,11 @@ import {States, StatesConfig} from './WizardStates';
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/WizardScreen.js
  * @notes: Use Wizard with nested Wizard.Step(s) to achieve the desired result.
  */
-export default class WizardStep extends PureBaseComponent {
+class WizardStep extends Component<Props> {
   static displayName = 'Wizard.Step';
 
-  static propTypes = {
-    /**
-     * The state of the step (Wizard.States.X)
-     */
-    state: PropTypes.oneOf(Object.values(States)),
-    /**
-     * The label of the item
-     */
-    label: PropTypes.string,
-    /**
-     * Additional styles for the label
-     */
-    labelStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
-    /**
-     * Additional styles for the connector
-     */
-    connectorStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
-    /**
-     * Color of the step index (or of the icon, when provided)
-     */
-    color: PropTypes.string,
-    /**
-     * Color of the circle
-     */
-    circleColor: PropTypes.string,
-    /**
-     * The step's circle size (diameter)
-     */
-    circleSize: PropTypes.number,
-    /**
-     * Circle's background color
-     */
-    circleBackgroundColor: PropTypes.string,
-    /**
-     * Icon to replace the (default) index
-     */
-    icon: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
-    /**
-     * Additional styles for the index's label (when icon is not provided)
-     */
-    indexLabelStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
-    /**
-     * Whether the step should be enabled
-     */
-    enabled: PropTypes.bool,
-    /**
-     * Extra text to be read in accessibility mode
-     */
-    accessibilityInfo: PropTypes.string
-  };
-
   getProps() {
-    const props = this.getThemeProps();
+    const props = this.props;
     const {state, activeConfig: propsActiveConfig, index, activeIndex} = props;
     const config = StatesConfig[state];
     const activeConfig = index === activeIndex ? propsActiveConfig : {};
@@ -88,7 +44,7 @@ export default class WizardStep extends PureBaseComponent {
     return `Step ${index + 1}, ${label}, ${extraInfo}`;
   }
 
-  renderCircle(props) {
+  renderCircle(props: Props) {
     const {
       testID,
       index,
@@ -153,6 +109,8 @@ export default class WizardStep extends PureBaseComponent {
   }
 }
 
+export default asBaseComponent<WizardStepProps>(WizardStep);
+
 const styles = StyleSheet.create({
   connector: {
     borderWidth: 0.5,