fix: types of components

Author: theankurkedia

example/src/storybook/stories/PinInput/custom.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import {
-  PinInput,
   SubmitButton,
   ResetButton,
   Box,
   ButtonGroup,
+  PinInput,
 } from '@native-base/formik-ui';
 import { Formik } from 'formik';
 import { Heading, FormControl } from 'native-base';

src/components/FormControlComponents/number-input/index.tsx renamed to src/components/FormControlComponents/NumberInput/index.tsx

@@ -1,10 +1,10 @@
 import { PinInput as NBPinInput } from 'native-base';
 import { useField, useFormikContext } from 'formik';
-import React, { FC } from 'react';
+import React from 'react';
 import type { PinInputProps } from './type';
 
-export const PinInput: FC<PinInputProps> = (props: PinInputProps, ref: any) => {
-  const { name, children, PinInputProps, ...rest } = props;
+export const PinInput = React.forwardRef((props: PinInputProps, ref: any) => {
+  const { name, children, pinInputProps, ...rest } = props;
   const [field, { error }] = useField(name);
   const { handleChange } = useFormikContext();
 
@@ -13,12 +13,12 @@ export const PinInput: FC<PinInputProps> = (props: PinInputProps, ref: any) => {
       isInvalid={!!error}
       onChange={handleChange(name)}
       value={field.value}
-      {...PinInputProps}
+      {...pinInputProps}
       {...rest}
       ref={ref}
     >
       {children}
     </NBPinInput>
   );
-};
-export default PinInput;
+});
+export default React.memo(PinInput);

src/components/FormControlComponents/pin-input/PinInput.tsx renamed to src/components/FormControlComponents/PinInput/PinInput.tsx

@@ -6,6 +6,6 @@ let PinInputTemp: any = PinInputMain;
 PinInputTemp.Field = NBPinInput.Field;
 
 // To add typings
-let PinInput = PinInputTemp as PinInputComponentType;
+const PinInput = PinInputTemp as PinInputComponentType;
 
 export { PinInput };

src/components/FormControlComponents/pin-input/index.tsx renamed to src/components/FormControlComponents/PinInput/index.tsx

@@ -6,6 +6,6 @@ export type PinInputProps = BaseProps & {
   PinInputProps?: IPinInputProps;
   children?: ReactNode;
 };
-export type PinInputComponentType = PinInputProps & {
+export type PinInputComponentType = ((props: PinInputProps) => JSX.Element) & {
   Field: React.MemoExoticComponent<(props: IInputProps) => JSX.Element>;
 };

src/components/FormControlComponents/pin-input/type.ts renamed to src/components/FormControlComponents/PinInput/type.ts

@@ -1,11 +1,11 @@
 export * from './input';
 export * from './checkbox';
-export * from './number-input';
-export * from './pin-input';
+export * from './NumberInput';
+export * from './PinInput';
 export * from './radio';
 export * from './select';
 export * from './slider';
 export * from './switch';
 export * from './textarea';
-export * from './submit-button';
-export * from './reset-button';
+export * from './SubmitButton';
+export * from './ResetButton';

src/components/FormControlComponents/reset-button/index.tsx renamed to src/components/FormControlComponents/ResetButton/index.tsx

@@ -6,7 +6,7 @@ export type SliderProps = BaseProps & {
   sliderProps?: ISliderProps;
   children: ReactNode;
 };
-export type SliderComponentType = SliderProps & {
+export type SliderComponentType = ((props: SliderProps) => JSX.Element) & {
   Thumb: React.MemoExoticComponent<(props: IBoxProps) => JSX.Element>;
   Track: React.MemoExoticComponent<(props: IBoxProps) => JSX.Element>;
   FilledTrack: React.MemoExoticComponent<(props: IBoxProps) => JSX.Element>;