Jim/76920/progress-slider-component-ts-migration

packages/components/src/components/progress-slider/index.js → packages/components/src/components/progress-slider/index.ts

@@ -1,4 +1,4 @@
-import ProgressSlider from './progress-slider.jsx';
+import ProgressSlider from './progress-slider';
 import './progress-slider.scss';
 
 export default ProgressSlider;

packages/components/src/components/progress-slider/progress-slider.jsx → packages/components/src/components/progress-slider/progress-slider.tsx

@@ -1,10 +1,21 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { getTimePercentage } from '@deriv/shared';
-import ProgressTicks from './progress-ticks.jsx';
+import ProgressTicks from './progress-ticks';
 import RemainingTime from '../remaining-time';
 import Text from '../text';
+import moment from 'moment';
+
+type TProgressSliderProps = {
+    className?: string;
+    current_tick: number;
+    expiry_time: number & string;
+    getCardLabels: () => { [key: string]: string }; // TODO Use the one from shared workspace after migration
+    is_loading: boolean;
+    server_time: moment.Moment;
+    start_time: number & string;
+    ticks_count: number;
+};
 
 const ProgressSlider = ({
     className,
@@ -15,7 +26,7 @@ const ProgressSlider = ({
     server_time,
     start_time,
     ticks_count,
-}) => {
+}: TProgressSliderProps) => {
     const percentage = getTimePercentage(server_time, start_time, expiry_time);
     return (
         <div className={classNames('dc-progress-slider', className)}>
@@ -50,15 +61,4 @@ const ProgressSlider = ({
 };
 // Keypress events do not trigger on Safari due to the way it handles input type='range' elements, using focus on the input element also doesn't work for Safari.
 
-ProgressSlider.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 ProgressSlider;

packages/components/src/components/progress-slider/progress-ticks.jsx → packages/components/src/components/progress-slider/progress-ticks.tsx

@@ -1,10 +1,15 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import Text from '../text';
 
-const ProgressTicks = ({ current_tick, getCardLabels, ticks_count }) => {
-    const arr_ticks = [...Array(ticks_count).keys()];
+type TProgressTicksProps = {
+    current_tick: number;
+    getCardLabels: () => { [key: string]: string }; // TODO Use the one from shared workspace after migration
+    ticks_count: number;
+};
+
+const ProgressTicks = ({ current_tick, getCardLabels, ticks_count }: TProgressTicksProps) => {
+    const arr_ticks = Array.from(Array(ticks_count).keys());
     return (
         <div className='dc-progress-slider__ticks'>
             <Text styles={{ lineHeight: '18px' }} size='xxs' className='dc-progress-slider__ticks-caption'>
@@ -15,7 +20,7 @@ const ProgressTicks = ({ current_tick, getCardLabels, ticks_count }) => {
                     <div
                         key={idx}
                         className={classNames('dc-progress-slider__ticks-step', {
-                            'dc-progress-slider__ticks-step--marked': idx + 1 <= parseInt(current_tick),
+                            'dc-progress-slider__ticks-step--marked': idx + 1 <= current_tick,
                         })}
                     />
                 ))}
@@ -24,10 +29,4 @@ const ProgressTicks = ({ current_tick, getCardLabels, ticks_count }) => {
     );
 };
 
-ProgressTicks.propTypes = {
-    current_tick: PropTypes.number,
-    ticks_count: PropTypes.number,
-    getCardLabels: PropTypes.func,
-};
-
 export default ProgressTicks;

packages/components/src/components/remaining-time/remaining-time.tsx

@@ -5,13 +5,13 @@ import moment from 'moment';
 type TRemainingTimeProps = {
     end_time?: number;
     start_time: moment.Moment;
-    format: string;
+    format?: string;
     getCardLabels: () => { [key: string]: string }; // TODO Use the one from common after contract-card migration
 };
 
 const RemainingTime = ({ end_time, format, getCardLabels, start_time }: TRemainingTimeProps) => {
     if (!end_time || start_time.unix() > +end_time) {
-        return '';
+        return <React.Fragment />;
     }
 
     const { days, timestamp } = formatDuration(getDiffDuration(start_time.unix(), end_time), format);
@@ -21,7 +21,7 @@ const RemainingTime = ({ end_time, format, getCardLabels, start_time }: TRemaini
     }
     const is_zeroes = /^00:00$/.test(remaining_time);
 
-    return !is_zeroes && <div className='dc-remaining-time'>{remaining_time}</div>;
+    return <React.Fragment>{!is_zeroes && <div className='dc-remaining-time'>{remaining_time}</div>}</React.Fragment>;
 };
 
 export default RemainingTime;

packages/shared/src/utils/contract/contract.ts

@@ -109,7 +109,7 @@ export const getLimitOrderAmount = (limit_order: TLimitOrder) => {
     };
 };
 
-export const getTimePercentage = (server_time: number, start_time: number, expiry_time: number) => {
+export const getTimePercentage = (server_time: moment.Moment, start_time: number, expiry_time: number) => {
     const duration_from_purchase = moment.duration(moment.unix(expiry_time).diff(moment.unix(start_time)));
     const duration_from_now = moment.duration(moment.unix(expiry_time).diff(server_time));
     let percentage = (duration_from_now.asMilliseconds() / duration_from_purchase.asMilliseconds()) * 100;