Merge pull request #30 from jim-deriv/Jim/76921/progress-slider-mobil…

…e-component-ts-migration Jim/76921/progress-slider-mobile-component-ts-migration
ali-hosseini-deriv · Jan 5, 2023 · 49ee7b2 · 49ee7b2
2 parents 469a0a9 + 56babaf
commit 49ee7b2
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 23 deletions.
diff --git a/...omponents/progress-slider-mobile/index.js → ...omponents/progress-slider-mobile/index.ts b/...omponents/progress-slider-mobile/index.js → ...omponents/progress-slider-mobile/index.ts
@@ -1,4 +1,4 @@
-import ProgressSliderMobile from './progress-slider-mobile.jsx';
+import ProgressSliderMobile from './progress-slider-mobile';
 import './progress-slider-mobile.scss';
 
 export default ProgressSliderMobile;
diff --git a/...-slider-mobile/progress-slider-mobile.jsx → ...-slider-mobile/progress-slider-mobile.tsx b/...-slider-mobile/progress-slider-mobile.jsx → ...-slider-mobile/progress-slider-mobile.tsx
@@ -1,11 +1,22 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { getTimePercentage } from '@deriv/shared';
-import ProgressTicksMobile from './progress-ticks-mobile.jsx';
+import ProgressTicksMobile from './progress-ticks-mobile';
 import CircularProgress from '../circular-progress';
 import RemainingTime from '../remaining-time';
 import Text from '../text';
+import { TGetCardLables } from '../types';
+
+type TProgressSliderMobileProps = {
+    className?: string;
+    current_tick: number;
+    expiry_time: number;
+    is_loading: boolean;
+    server_time: moment.Moment;
+    start_time: number;
+    ticks_count: number;
+    getCardLabels: TGetCardLables;
+};
 
 const ProgressSliderMobile = ({
     className,
@@ -16,7 +27,7 @@ const ProgressSliderMobile = ({
     expiry_time,
     server_time,
     ticks_count,
-}) => {
+}: TProgressSliderMobileProps) => {
     const percentage = getTimePercentage(server_time, start_time, expiry_time);
     return (
         <div className={classNames('dc-progress-slider-mobile', className)}>
@@ -51,15 +62,4 @@ const ProgressSliderMobile = ({
     );
 };
 
-ProgressSliderMobile.propTypes = {
-    className: PropTypes.string,
-    current_tick: PropTypes.number,
-    expiry_time: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    is_loading: PropTypes.bool,
-    server_time: PropTypes.object,
-    start_time: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    ticks_count: PropTypes.number,
-    getCardLabels: PropTypes.func,
-};
-
 export default ProgressSliderMobile;
diff --git a/...s-slider-mobile/progress-ticks-mobile.jsx → ...s-slider-mobile/progress-ticks-mobile.tsx b/...s-slider-mobile/progress-ticks-mobile.jsx → ...s-slider-mobile/progress-ticks-mobile.tsx
@@ -1,9 +1,15 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import TickProgress from '../tick-progress';
 import Text from '../text';
+import { TGetCardLables } from '../types';
 
-const ProgressTicksMobile = ({ current_tick, getCardLabels, ticks_count }) => {
+type TProgressTicksMobileProps = {
+    current_tick: number;
+    ticks_count: number;
+    getCardLabels: TGetCardLables;
+};
+
+const ProgressTicksMobile = ({ current_tick, getCardLabels, ticks_count }: TProgressTicksMobileProps) => {
     return (
         <div className='dc-progress-slider__ticks'>
             <Text styles={{ lineHeight: '18px' }} size='xxs' className='dc-progress-slider__ticks-caption'>
@@ -14,10 +20,4 @@ const ProgressTicksMobile = ({ current_tick, getCardLabels, ticks_count }) => {
     );
 };
 
-ProgressTicksMobile.propTypes = {
-    current_tick: PropTypes.number,
-    ticks_count: PropTypes.number,
-    getCardLabels: PropTypes.func,
-};
-
 export default ProgressTicksMobile;
diff --git a/packages/components/src/components/types/common.types.ts b/packages/components/src/components/types/common.types.ts
@@ -1,5 +1,7 @@
 import React from 'react';
+import { getCardLabels } from '@deriv/shared';
 
 export type TGenericObjectType = {
     [key: string]: React.ReactNode;
 };
+export type TGetCardLables = () => ReturnType<typeof getCardLabels>;
diff --git a/packages/components/src/components/types/index.ts b/packages/components/src/components/types/index.ts
@@ -2,6 +2,7 @@ import { TIconsManifest, TIconProps } from './icons.types';
 import { TAccordionProps, TAccordionItem } from './accordion.types';
 import { TMultiStepProps, TMultiStepRefProps } from './multi-step.types';
 import { TPopoverProps } from './popover.types';
+import { TGetCardLables } from './common.types';
 
 export type {
     TAccordionItem,
@@ -11,4 +12,5 @@ export type {
     TMultiStepProps,
     TMultiStepRefProps,
     TPopoverProps,
+    TGetCardLables,
 };