react-native-examples/dapps/pos-app/components/numeric-keyboard.tsx at f1d3f95f252f8ba18233eab6340d094bab2c55ef · reown-com/react-native-examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import { BorderRadius, Spacing } from "@/constants/spacing";
import { useTheme } from "@/hooks/use-theme-color";
import { useAssets } from "expo-asset";
import { Image } from "expo-image";
import { memo } from "react";
import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
import { Button } from "./button";
import { ThemedText } from "./themed-text";

export interface NumericKeyboardProps {
  onKeyPress: (value: string) => void;
  style?: StyleProp<ViewStyle>;
}

function NumericKeyboardBase({ onKeyPress, style }: NumericKeyboardProps) {
  const Theme = useTheme();
  const [assets] = useAssets([require("@/assets/images/backspace.png")]);
  const keys = [
    ["1", "2", "3"],
    ["4", "5", "6"],
    ["7", "8", "9"],
    [".", "0", "erase"],
  ];

  const handlePress = (key: string) => {
    onKeyPress(key);
  };

  return (
    <View style={[styles.container, style]}>
      {keys.map((row, rowIndex) => (
        <View key={`row-${rowIndex}`} style={styles.row}>
          {row.map((key) => (
            <Button
              key={key}
              testID={key === "." ? "key-dot" : `key-${key}`}
              onPress={() => handlePress(key)}
              style={[
                styles.key,
                { backgroundColor: Theme["foreground-primary"] },
              ]}
            >
              {key === "erase" ? (
                <Image
                  source={assets?.[0]}
                  style={[
                    styles.backspace,
                    {
                      tintColor: Theme["text-primary"],
                    },
                  ]}
                  tintColor={Theme["text-primary"]}
                  cachePolicy="memory-disk"
                  priority="high"
                />
              ) : (
                <ThemedText
                  style={[styles.keyText, { color: Theme["text-primary"] }]}
                >
                  {key}
                </ThemedText>
              )}
            </Button>
          ))}
        </View>
      ))}
    </View>
  );
}

export const NumericKeyboard = memo(NumericKeyboardBase);

const styles = StyleSheet.create({
  container: {
    width: "100%",
    gap: Spacing["spacing-3"],
  },
  row: {
    flexDirection: "row",
    justifyContent: "space-around",
    gap: Spacing["spacing-3"],
  },
  key: {
    flex: 1,
    height: 64,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: BorderRadius["4"],
  },
  keyText: {
    fontSize: 22,
    lineHeight: 26,
  },
  backspace: {
    width: 22,
    height: 22,
  },
});