PliWould/components/ProductAttributeEditor.tsx

import { product_type_t } from "@/lib/dimensions";
import { PRODUCT_TYPES, Product } from "@/lib/product";
import Ionicons from "@expo/vector-icons/Ionicons";
import { StyleSheet, TextInput, TouchableHighlight, View } from "react-native";
import SelectDropdown from "react-native-select-dropdown";

export type ProductAttributeChangeFunc = (key: string, newValue: string) => any;
export type ProductAttributeDeleteFunc = (key: string) => any;
export type ChangeAttributeFunction = (oldKey: string, newKey: string) => any;
export type ProductTypeChangeFunc = (
  key: string,
  newProductType: product_type_t
) => any;

export type ProductAttributeProps = {
  attributeKey: string;
  attributeValue: string;
  onProductTypeChange?: ProductTypeChangeFunc;
  onChangeAttributeKey?: ChangeAttributeFunction;
  onChangeAttribute?: ProductAttributeChangeFunc;
  onDelete?: ProductAttributeChangeFunc;
};

const select_product_type_choices = PRODUCT_TYPES.map((p) => [p, p]);

export const ProductAttributeEditor = ({
  attributeKey,
  attributeValue,
  onDelete,
  onChangeAttributeKey,
  onChangeAttribute,
}: ProductAttributeProps) => {
  const doChangeKey = (e: any) => {
    onChangeAttributeKey && onChangeAttributeKey(attributeKey, e);
  };

  const doChangeValue = (e: any) => {
    onChangeAttribute && onChangeAttribute(attributeKey, e);
  };

  return (
    <View>
      <View style={styles.productAttributeRow}>
        <TextInput
          defaultValue={attributeKey}
          onChangeText={doChangeKey}
          style={styles.value}
          aria-label="Edit Key"
        />
        <TextInput
          defaultValue={attributeValue}
          onChangeText={doChangeValue}
          style={styles.value}
          aria-label="Edit Value"
        />
        <TouchableHighlight
          onPress={() => onDelete && onDelete(attributeKey, attributeValue)}
          aria-label="Delete Attribute"
          style={{
            backgroundColor: "darkred",
            borderRadius: 5,
            margin: 5,
            padding: 5,
          }}
        >
          <Ionicons name="trash-bin-outline" size={30} color={"white"} />
        </TouchableHighlight>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  productAttributeRow: {
    flexDirection: "row",
  },
  key: {
    flex: 1,
  },
  value: {
    flex: 1,
    borderWidth: 1,
    borderColor: "grey",
    borderStyle: "solid",
    padding: 10,
  },
});