@airplane/views
Version:
A React library for building Airplane views. Views components are optimized in style and functionality to produce internal apps that are easy to build and maintain.
45 lines (44 loc) • 1.76 kB
JavaScript
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { Input, ActionIcon } from "@mantine/core";
import { XMarkIconMini, PlusIconMini } from "@airplane/views/icons/index.js";
import { Stack } from "../stack/Stack.js";
import { Button } from "../button/Button.js";
const MultiInput = ({
values,
disabled,
label,
description,
renderInput,
addDisabled,
onAdd,
onRemove,
required,
error
}) => {
return /* @__PURE__ */ jsxs(Stack, { spacing: "xs", children: [
/* @__PURE__ */ jsx(Input.Label, { required, children: label }),
/* @__PURE__ */ jsxs(Stack, { align: "start", spacing: "sm", children: [
values.length > 0 && /* @__PURE__ */ jsx(Fragment, { children: values.map((v, i) => {
return /* @__PURE__ */ jsxs(Stack, { direction: "row", align: "center", spacing: "xs", width: "full", children: [
/* @__PURE__ */ jsx("div", { style: {
flexGrow: 1
}, children: renderInput({
index: i,
value: v,
disabled: !!disabled
}) }),
!disabled && onRemove && /* @__PURE__ */ jsx(ActionIcon, { onClick: () => onRemove(i, v), "aria-label": "remove", children: /* @__PURE__ */ jsx(XMarkIconMini, {}) })
] }, i);
}) }),
!!onAdd && /* @__PURE__ */ jsx(Button, { preset: "tertiary", size: "xs", disabled: disabled || addDisabled, onClick: () => {
onAdd();
}, leftIcon: /* @__PURE__ */ jsx(PlusIconMini, {}), children: values.length === 0 ? "Add" : "Add another" })
] }),
description && /* @__PURE__ */ jsx(Input.Description, { children: description }),
error && /* @__PURE__ */ jsx(Input.Error, { children: error })
] });
};
export {
MultiInput
};
//# sourceMappingURL=MultiInput.js.map