eletrotupi / tcc/ commit / a8152cd

frontend: add a small formatter for values

This might bit me in the ass, but for now it'll do
Pedro Lucas Porcellis porcellis@eletrotupi.com · 5 months ago a8152cd7c2236ab5a4cb9335628c0878ecb8fce4 Browse files
Parents 0cf854c
Changed files
1
Additions
+3
Deletions
-1
frontend/components/ui/ScaleSlider.tsx modified+3 -1
frontend/components/ui/ScaleSlider.tsx
1 1 
import React, { useState } from 'react';
2 2 
import {
3 3 
  View,
4 4 
  Text,
5 5 
  StyleSheet,
13 13
14 14 
interface ScaleSliderProps {
15 15 
  label: string;
16 16 
  value: number;
17 17 
  onValueChange: (value: number) => void;
18 + 
  onValueFormat?: (value: number) => string;
18 19 
  min?: number;
19 20 
  max?: number;
20 21 
  step?: number;
21 22 
  minLabel?: string;
22 23 
  maxLabel?: string;
28 29
29 30 
export const ScaleSlider: React.FC<ScaleSliderProps> = ({
30 31 
  label,
31 32 
  value,
32 33 
  onValueChange,
34 + 
  onValueFormat,
33 35 
  min = 0,
34 36 
  max = 10,
35 37 
  step = 1,
36 38 
  minLabel,
37 39 
  maxLabel,
71 73
72 74 
        <Text style={[
73 75 
          isRich ? styles.valueRich : styles.valueCompact,
74 76 
          { color: textColor },
75 77 
        ]}>
76 - 
          {valueDisplay}
78 + 
          {(onValueFormat ? onValueFormat(valueDisplay) : valueDisplay)}
77 79 
        </Text>
78 80 
      </View>
79 81
80 82 
      {/* XXX: Rich variant needs some extra margin to account for icons */}
81 83 
      <View style={{ marginRight: isRich ? -10 : -15, marginLeft: isRich ? -10 : -15 }}>
178 180 
  rangeLabel: {
179 181 
    ...Theme.typography.labelXs,
180 182 
    fontWeight: 500,
181 183 
  },
182 184 
});