indusbit-test/src/components/MultiplyButton.js

Test package for IndusBit

import React, { useState } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  TextInput,
} from "react-native";
import IndusBitTest from "../../IndusBitTest";

const MultiplyButton = ({
  buttonStyle,
  textStyle,
  resultStyle,
  containerStyle,
  title = "Multiply",
  defaultValueA = "0",
  defaultValueB = "0",
  onResult,
}) => {
  const [valueA, setValueA] = useState(defaultValueA);
  const [valueB, setValueB] = useState(defaultValueB);
  const [result, setResult] = useState(null);

  const handleMultiply = async () => {
    try {
      const a = parseFloat(valueA) || 0;
      const b = parseFloat(valueB) || 0;

      const multiplyResult = await IndusBitTest.multiply(a, b);

      setResult(multiplyResult);

      // Call the callback if provided
      if (onResult && typeof onResult === "function") {
        onResult(multiplyResult);
      }
    } catch (error) {
      setResult(`Error: ${error.message}`);
      if (onResult && typeof onResult === "function") {
        onResult(`Error: ${error.message}`);
      }
    }
  };

  return (
    <View style={[styles.container, containerStyle]}>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          value={valueA.toString()}
          onChangeText={setValueA}
          keyboardType="numeric"
          placeholder="Enter first number"
        />
        <Text style={styles.operator}>×</Text>
        <TextInput
          style={styles.input}
          value={valueB.toString()}
          onChangeText={setValueB}
          keyboardType="numeric"
          placeholder="Enter second number"
        />
      </View>

      <TouchableOpacity
        style={[styles.button, buttonStyle]}
        onPress={handleMultiply}
      >
        <Text style={[styles.buttonText, textStyle]}>{title}</Text>
      </TouchableOpacity>

      {result !== null && (
        <Text style={[styles.result, resultStyle]}>Result: {result}</Text>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: "100%",
    padding: 16,
    alignItems: "center",
  },
  inputContainer: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 16,
  },
  input: {
    borderWidth: 1,
    borderColor: "#ccc",
    borderRadius: 4,
    padding: 8,
    width: 100,
    textAlign: "center",
  },
  operator: {
    fontSize: 24,
    marginHorizontal: 8,
  },
  button: {
    backgroundColor: "#4286f4",
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 6,
    marginVertical: 12,
  },
  buttonText: {
    color: "white",
    fontSize: 16,
    fontWeight: "bold",
  },
  result: {
    fontSize: 18,
    fontWeight: "500",
    marginTop: 16,
  },
});

export default MultiplyButton;