@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.25 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import { createStyles } from "@mantine/core";
import { useState } from "react";
import { MagnifyingGlassIconMini } from "@airplane/views/icons/index.js";
import { TextInputComponent } from "../textinput/TextInput.js";
import { useAsyncDebounce } from "./useAsyncDebounce.js";
const useStyles = createStyles((theme) => {
return {
filterWrapper: {
width: "200px",
height: "2rem"
}
};
});
const Filter = ({
initialValue,
setValue
}) => {
const {
classes
} = useStyles();
const [filter, setFilter] = useState(initialValue);
const onChange = useAsyncDebounce((value) => {
setValue(value || void 0);
}, 200);
return /* @__PURE__ */ jsx(TextInputComponent, { value: filter || "", size: "xs", onChange: (e) => {
setFilter(e.target.value);
onChange(e.target.value);
}, styles: (theme) => ({
icon: {
color: theme.colors.gray[6]
},
input: {
color: theme.colors.gray[6],
height: "2rem",
minHeight: "2rem"
}
}), icon: /* @__PURE__ */ jsx(MagnifyingGlassIconMini, {}), className: classes.filterWrapper, "aria-label": "filter" });
};
const Filter$1 = Filter;
export {
Filter$1 as default
};
//# sourceMappingURL=Filter.js.map