Merge pull request #202 from BouyguesTelecom/fix/progress-native

Fix native progress
BouyguesTelecom · Dec 16, 2024 · 31ce98d · 31ce98d
2 parents a73a931 + d1e903c
commit 31ce98d
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 68 deletions.
diff --git a/examples/react-template/screens/Progress.tsx b/examples/react-template/screens/Progress.tsx
@@ -1,4 +1,4 @@
-import { StatusState, TypographyBold } from '@trilogy-ds/react'
+import * as React from 'react'
 import {
   Divider,
   Progress,
@@ -8,8 +8,9 @@ import {
   TextLevels,
   Title,
   TitleLevels,
+  View
 } from '@trilogy-ds/react/components'
-import * as React from 'react'
+import { StatusState, TypographyAlign, TypographyBold } from '@trilogy-ds/react'
 
 export const ProgressScreen = (): JSX.Element => {
   return (
@@ -18,12 +19,14 @@ export const ProgressScreen = (): JSX.Element => {
         <Title level={TitleLevels.THREE}>Progress Bar</Title>
 
         <ProgressRadial value={30} secondValue={30}>
-          <Title level={TitleLevels.THREE} marginless>
-            60
-          </Title>
-          <Text level={TextLevels.ONE} marginless>
-            / 100 Go
-          </Text>
+          <View>
+            <Title typo={TypographyAlign.TEXT_CENTERED} level={TitleLevels.THREE} marginless>
+              60
+            </Title>
+            <Text level={TextLevels.ONE} marginless>
+              / 100 Go
+            </Text>
+          </View>
         </ProgressRadial>
 
         <Divider />
@@ -42,27 +45,21 @@ export const ProgressScreen = (): JSX.Element => {
         <Title level={TitleLevels.THREE}>Progression avec unique légende</Title>
         <Divider />
 
-        <Progress value={30} status={StatusState.INFO} />
+        <Progress legendCenter={'Unique legend'} value={30} status={StatusState.INFO} />
       </Section>
       <Section>
         <Title level={TitleLevels.THREE}>Progression avec légendes aux extremités</Title>
         <Divider />
 
-        <Progress
-          value={15}
-          status={StatusState.INFO}
-          legendStart='0Go'
-          legendCenter='Je suis une légende'
-          legendEnd='5Go'
-        />
+        <Progress value={15} status={StatusState.INFO} legendStart='0Go' legendEnd="5Go" />
       </Section>
       <Section>
         <Title level={TitleLevels.THREE}>Barre de progression circulaire children custo</Title>
 
         <Divider />
 
         <ProgressRadial value={30} secondValue={60}>
-          <Title level={TitleLevels.THREE} marginless>
+          <Title typo={TypographyAlign.TEXT_CENTERED} level={TitleLevels.THREE} marginless>
             60
           </Title>
           <Text level={TextLevels.ONE} marginless>
@@ -75,7 +72,7 @@ export const ProgressScreen = (): JSX.Element => {
         <Divider />
 
         <ProgressRadial value={30} secondValue={60}>
-          <Title level={TitleLevels.THREE} marginless>
+          <Title typo={TypographyAlign.TEXT_CENTERED} level={TitleLevels.THREE} marginless>
             60
           </Title>
           <Text level={TextLevels.ONE} marginless>
@@ -84,7 +81,7 @@ export const ProgressScreen = (): JSX.Element => {
         </ProgressRadial>
 
         <ProgressRadial value={30} secondValue={30} small>
-          <Text typo={[TypographyBold.TEXT_WEIGHT_SEMIBOLD]} marginless>
+          <Text typo={[TypographyBold.TEXT_WEIGHT_SEMIBOLD, TypographyAlign.TEXT_CENTERED]} marginless>
             60
           </Text>
           <Text level={TextLevels.FOUR} marginless>
@@ -100,3 +97,4 @@ export const ProgressScreen = (): JSX.Element => {
     </>
   )
 }
+
diff --git a/examples/react-template/screens/Range.tsx b/examples/react-template/screens/Range.tsx
@@ -6,10 +6,10 @@ export const RangeScreen = (): JSX.Element => {
     <Section>
       <Range
         min={0}
-        max={4}
+        max={100}
         unit={"%"}
         valueMin={0}
-        valueMax={4}
+        valueMax={100}
         label="Ceci est un label"
         id={"test"}
         name="name-range"

diff --git a/examples/react-template/screens/Switch.tsx b/examples/react-template/screens/Switch.tsx
@@ -8,6 +8,7 @@ export const SwitchScreen = (): JSX.Element => {
         label='Switch one fullwidth'
         fullWidth
         name='switch one'
+
         // eslint-disable-next-line no-console
         onChange={(e) => {
           console.log('SwitchState =>', e.switchState)

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/react/components/progress/Progress.native.tsx b/packages/react/components/progress/Progress.native.tsx
@@ -1,47 +1,58 @@
-import React, { useEffect, useRef } from 'react'
-import { Animated, StyleSheet } from 'react-native'
-import { ProgressProps } from './ProgressProps'
-import { View } from '@/components/view'
-import { getColorStyle, getStatusStyle, TrilogyColor } from '@/objects'
-import { ComponentName } from '@/components/enumsComponentsName'
+import React, { useEffect, useRef } from "react"
+import { Animated, StyleSheet } from "react-native"
+import { ProgressProps } from "./ProgressProps"
+import { View } from "@/components/view"
+import { Text, TextLevels } from "@/components/text"
+import { getStatusStyle, getColorStyle, TrilogyColor } from "@/objects"
+import { ComponentName } from "@/components/enumsComponentsName"
 
 /**
  * Progress component
  * @param children {ReactNode} Use Children it only if stacked progress
- * @param value {number} Progress value
  * @param status {StatusState} Progress status variant (SUCCESS|INFO|WARNING|ERROR)
  * @param stacked {boolean} Stacked progress
+ * @param legendCenter {stringabsolute} Unique legend
+ * @param legendStart {string} First extremity legend, only with legendEnd property
+ * @param legendEnd {string} Second extremity legend, only with legendStart property
  */
-const Progress = ({ value, status, ...others }: ProgressProps): JSX.Element => {
+const Progress = ({
+                    value,
+                    max = 100,
+                    status,
+                    legendCenter,
+                    legendStart,
+                    legendEnd,
+                    ...others
+                  }: ProgressProps): JSX.Element => {
   const animation = useRef(new Animated.Value(0)).current
 
   useEffect(() => {
     // eslint-disable-next-line no-unused-expressions
-    typeof value === 'number' &&
-      Animated.timing(animation, {
-        toValue: value,
-        duration: 1000,
-        useNativeDriver: false,
-      }).start()
+    typeof value === "number" &&
+    Animated.timing(animation, {
+      toValue: value,
+      duration: 1000,
+      useNativeDriver: false,
+    }).start()
   }, [animation, value])
 
   const height = 6
   const width = animation.interpolate({
-    inputRange: [0, 100],
-    outputRange: ['0%', '100%'],
-    extrapolate: 'clamp',
+    inputRange: [0, max],
+    outputRange: ["0%", `${max}%`],
+    extrapolate: "clamp",
   })
 
   const styles = StyleSheet.create({
     progress: {
-      flexDirection: 'row',
-      width: '100%',
+      flexDirection: "row",
+      width: "100%",
       height: height,
       backgroundColor: getColorStyle(TrilogyColor.MAIN_FADE),
       borderRadius: 15,
     },
-    value: {
-      alignSelf: 'flex-start',
+    percent: {
+      alignSelf: "flex-start",
       height: height,
       backgroundColor: getStatusStyle(status).color,
       borderRadius: 15,
@@ -56,27 +67,41 @@ const Progress = ({ value, status, ...others }: ProgressProps): JSX.Element => {
     },
     test: {
       width: 20,
-      backgroundColor: '#333',
+      backgroundColor: "#333",
       height: 6,
     },
-    uniqueLegend: {
-      textAlign: 'center',
+    legendCenter: {
+      textAlign: "center",
       paddingTop: 5,
-      fontWeight: '500',
+      fontWeight: "500",
+      alignSelf: "center"
     },
     extremLegend: {
-      width: '100%',
-      flexDirection: 'row',
-      justifyContent: 'space-between',
+      width: "100%",
+      flexDirection: "row",
+      justifyContent: "space-between",
       paddingTop: 5,
-      fontWeight: '500',
+      fontWeight: "500",
     },
   })
 
   return (
-    <View style={styles.progress} {...others}>
-      <Animated.View style={[styles.value, { width }]} />
-    </View>
+    <>
+      <View style={styles.progress} {...others}>
+        <Animated.View style={[styles.percent, { width }]} />
+      </View>
+      {legendCenter && (
+        <Text style={styles.legendCenter} level={TextLevels.THREE}>
+          {legendCenter}
+        </Text>
+      )}
+      {legendStart && legendEnd && !legendCenter && (
+        <View style={styles.extremLegend}>
+          <Text level={TextLevels.THREE}>{legendStart}</Text>
+          <Text level={TextLevels.THREE}>{legendEnd}</Text>
+        </View>
+      )}
+    </>
   )
 }
 

diff --git a/packages/react/components/progress/radial/ProgressRadial.native.tsx b/packages/react/components/progress/radial/ProgressRadial.native.tsx
@@ -21,6 +21,7 @@ import { ComponentName } from '@/components/enumsComponentsName'
  * @param skeleton {boolean} Skeleton Progress Radial
  */
 const ProgressRadial = ({
+  children,
   value,
   label,
   description,
@@ -151,7 +152,7 @@ const ProgressRadial = ({
                 {description || ''}
               </Text>
             ) : (
-              <View>{description}</View>
+              <View>{description || children}</View>
             )}
           </View>
         )}