feat: added linear progress bar component

deriv-com · Mar 1, 2024 · 0d7e936 · 0d7e936
1 parent 92a6b68
commit 0d7e936
Show file tree

Hide file tree

Showing 3 changed files with 140 additions and 49 deletions.
diff --git a/lib/components/ProgressBar/ProgressBar.scss b/lib/components/ProgressBar/ProgressBar.scss
@@ -1,24 +1,101 @@
-.progress-bar {
-    display: flex;
-    justify-content: center;
-    cursor: pointer;
+/** @define dc-progress-slider */
+// Progress Slider
+.deriv-progress-slider {
+    position: relative;
+    width: 100%;
+    padding: unset;
+    box-sizing: border-box;
+    margin: 8px 0;
+    border-bottom: 1px solid var(--general-section-1);
 
-    &-active {
-        width: 2.5rem;
-        height: 0.8rem;
-        background-color: #ff444f;
-        border-radius: 1rem;
+    &__track {
+        background: var(--text-disabled);
+        position: relative;
+        margin: 2px 0 8px;
+        height: 6px;
+        width: 100%;
+        border-radius: #{$BORDER_RADIUS * 2};
     }
 
-    &-inactive {
-        width: 0.8rem;
-        height: 0.8rem;
-        margin: 0 0.4rem;
-        border-radius: 50%;
-        background-color: #c2c2c2;
+    &__line {
+        background: var(--state-hover);
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        border-radius: #{$BORDER_RADIUS * 2};
+        pointer-events: none;
+        transition: width 0.3s;
+
+        &--green {
+            background: var(--status-success) !important;
+        }
+        &--yellow {
+            background: var(--status-warning) !important;
+        }
+        &--red {
+            background: var(--status-danger) !important;
+        }
     }
+    &__infinite-loader {
+        position: relative;
+        height: 4px;
+        display: block;
+        width: 100%;
+        background-color: var(--state-hover);
+        border-radius: 2px;
+        background-clip: padding-box;
+        margin: 0.5rem 0 1rem;
+        overflow: hidden;
+
+        &--indeterminate {
+            background-color: var(--state-active);
 
-    &-transition {
-        transition: all 0.24s linear;
+            &:before,
+            &:after {
+                content: '';
+                position: absolute;
+                background-color: inherit;
+                top: 0;
+                left: 0;
+                bottom: 0;
+                will-change: left, right;
+            }
+            &:before {
+                animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+            }
+            &:after {
+                animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+                animation-delay: 1.15s;
+            }
+        }
+        @keyframes indeterminate {
+            0% {
+                left: -35%;
+                right: 100%;
+            }
+            60% {
+                left: 100%;
+                right: -90%;
+            }
+            100% {
+                left: 100%;
+                right: -90%;
+            }
+        }
+        @keyframes indeterminate-short {
+            0% {
+                left: -200%;
+                right: 100%;
+            }
+            60% {
+                left: 107%;
+                right: -8%;
+            }
+            100% {
+                left: 107%;
+                right: -8%;
+            }
+        }
     }
 }
diff --git a/lib/components/ProgressBar/index.tsx b/lib/components/ProgressBar/index.tsx
@@ -1,27 +1,49 @@
 import React from 'react';
-import './ProgressBar.scss';
+import clsx from 'clsx';
+import { Text } from '../Text';
+import { TGenericSizes } from "../../types";
+import "./ProgressBar.scss"
 
-type TProps = {
-    activeIndex: number;
-    count: number;
-    onClick?: (index: number) => void;
+type TProgressSliderProps = {
+    className?: string;
+    is_loading: boolean;
+    label:React.ReactNode;
+    percentage:number;
+    size?: Extract<TGenericSizes, "lg" | "md" | "sm" | "xs">;
 };
 
-export const ProgressBar: React.FC<TProps> = ({ activeIndex, count, onClick }) => {
+export const LinearProgressBar = ({
+    className,
+    is_loading,
+    label,
+    percentage,
+    size="xs"
+}: TProgressSliderProps) => {
     return (
-        <div className='progress-bar' role='progressbar'>
-            {[...Array(count).keys()].map(idx => {
-                const isActive = idx === activeIndex;
-                const barClassname = isActive ? 'progress-bar-active' : 'progress-bar-inactive';
+        <div className={clsx('deriv-progress-slider', className)}>
+                <React.Fragment>
+                    <Text size={size} className='deriv-progress-slider__remaining-time'>
+                       {label}
+                    </Text>
+                    {is_loading || percentage < 1 ? (
+                        <div className='deriv-progress-slider__infinite-loader'>
+                            <div className='deriv-progress-slider__infinite-loader--indeterminate' />
+                        </div>
+                    ) : (
+                        /* Calculate line width based on percentage of time left */
+                        <div className='deriv-progress-slider__track'>
+                            <div
+                                className={clsx('deriv-progress-slider__line', {
+                                    'deriv-progress-slider__line--green': percentage >= 50,
+                                    'deriv-progress-slider__line--yellow': percentage < 50 && percentage >= 20,
+                                    'deriv-progress-slider__line--red': percentage < 20,
+                                })}
+                                style={{ width: `${percentage}%` }}
+                            />
+                        </div>
+                    )}
+                </React.Fragment>
 
-                return (
-                    <div
-                        className={`${barClassname} progress-bar-transition`}
-                        key={`progress-bar-${idx}`}
-                        onClick={() => onClick?.(idx)}
-                    />
-                );
-            })}
         </div>
     );
 };
diff --git a/src/Progresstest.tsx b/src/Progresstest.tsx
@@ -1,22 +1,14 @@
-import React, { useState } from 'react';
-import { ProgressBar } from "../lib/components/ProgressBar";
+import React from 'react';
+import { LinearProgressBar } from "../lib/components/ProgressBar";
 
 const ParentComponent: React.FC = () => {
-    // Example state to manage active index
-    const [activeIndex, setActiveIndex] = useState<number>(0);
-
-    // Example function to handle click on progress bar
-    const handleProgressBarClick = (index: number) => {
-        setActiveIndex(index);
-    };
-
     return (
         <div className='parent-component'>
             {/* Example usage of ProgressBar */}
-            <ProgressBar
-                activeIndex={activeIndex}
-                count={5} // Example count, adjust as needed
-                onClick={handleProgressBarClick}
+            <LinearProgressBar
+                is_loading={true}
+                percentage={50}
+                label="text"
             />
         </div>
     );