bananas-commerce-admin
Version:
What's this, an admin for apes?
21 lines • 1.9 kB
JavaScript
import React, { useState } from "react";
import Autocomplete from "@mui/material/Autocomplete";
import FormHelperText from "@mui/material/FormHelperText";
import Grid from "@mui/material/Grid2";
import Stack from "@mui/material/Stack";
import TextField from "@mui/material/TextField";
import { useCardContext } from "../../contexts/CardContext";
import LabeledValue from "../LabeledValue";
export const CardFieldAutoComplete = ({ fallback = "—", fallbackPredicate = (value) => value == null || (Array.isArray(value) && value.length === 0), formName, helperText, isEditable = true, isReadable = true, label, options, size = "grow", value: defaultValue, ...props }) => {
const { isCompact, isEditing } = useCardContext();
// Manage the selected options state
const [selectedOptions, setSelectedOptions] = useState(defaultValue ?? []);
return (React.createElement(Grid, { size: size }, isEditing && isEditable ? (React.createElement(Stack, { alignItems: "center", justifyContent: "space-between" },
React.createElement(Autocomplete, { isOptionEqualToValue: (option, value) => option.id === value.id, multiple: true, options: options ?? [], renderInput: (props) => React.createElement(TextField, { ...props, label: label }), sx: { width: "100%" }, value: selectedOptions, onChange: (_, value) => setSelectedOptions(value), ...props }),
selectedOptions.map((option) => (React.createElement("input", { key: option.id, name: formName, type: "hidden", value: option.id }))),
helperText != null && React.createElement(FormHelperText, null, helperText))) : (isReadable && (React.createElement(LabeledValue, { compact: isCompact, label: label, value: fallbackPredicate(defaultValue)
? fallback
: defaultValue.map(({ label }) => label).join(", ") })))));
};
export default CardFieldAutoComplete;
//# sourceMappingURL=CardFieldAutoComplete.js.map