Allow item select to be nullable

Author: davenquinn

packages/form-components/src/item-select/examples.ts

@@ -38,16 +38,16 @@ export const exampleMapLayers: MapLayer[] = [
   { id: 5, name: "Layer 5" },
 ];
 
-export function BaseDataTypeSelect({ state, setState }) {
+export function BaseDataTypeSelect({ state, setState, ...rest }) {
   return h(ItemSelect<DataType>, {
+    ...rest,
     items: exampleDataTypes,
     selectedItem: state,
     onSelectItem: setState,
     label: "data type",
     icon: "tag",
     itemComponent: ({ item, ...rest }) => {
       return h(MenuItem, {
-        ...rest,
         icon: h(Box, {
           is: "span",
           width: "1em",
@@ -56,13 +56,15 @@ export function BaseDataTypeSelect({ state, setState }) {
           borderRadius: "3px",
         }),
         text: item.name,
+        ...rest,
       });
     },
   });
 }
 
-export function BaseMapLayerSelect({ state, setState }) {
+export function BaseMapLayerSelect({ state, setState, ...rest }) {
   return h(ItemSelect<MapLayer>, {
+    ...rest,
     items: exampleMapLayers,
     selectedItem: state,
     onSelectItem: (layer) => {

packages/form-components/src/item-select/index.module.sass

@@ -1,2 +1,12 @@
-.placeholder
+.placeholder:global(.bp5-menu-item)
   color: var(--secondary-color)
+
+.target-container
+  display: flex
+  flex-direction: row
+
+.target-select
+  list-style: none
+  padding: 0
+  margin: 0
+  flex-grow: 1

packages/form-components/src/item-select/index.ts

@@ -1,5 +1,5 @@
 import hyper from "@macrostrat/hyper";
-import { IconName, Menu, MenuItem, Spinner } from "@blueprintjs/core";
+import { IconName, MenuItem, Spinner, Button } from "@blueprintjs/core";
 import { ComponentType, MouseEventHandler, ReactNode } from "react";
 import { Select } from "@blueprintjs/select";
 import styles from "./index.module.sass";
@@ -15,14 +15,22 @@ export function ItemSelect<T extends Nameable>({
   icon = null,
   itemComponent = DefaultItemComponent,
   className,
+  filterable = false,
+  minimal = true,
+  usePortal = true,
+  nullable = false,
 }: {
   items: T[] | null;
   selectedItem: T | null;
-  onSelectItem(item: T): void;
+  onSelectItem(item: T | null): void;
   label: string;
   icon: IconName | ReactNode | null;
   itemComponent?: ComponentType<ItemComponentProps<T>>;
   className?: string;
+  filterable?: boolean;
+  minimal?: boolean;
+  usePortal?: boolean;
+  nullable?: boolean;
 }) {
   let placeholder = `Select ${singularReferent(label)}`;
   let _icon: IconName | ReactNode = icon;
@@ -54,14 +62,26 @@ export function ItemSelect<T extends Nameable>({
         },
         onItemSelect: onSelectItem,
         popoverProps: {
-          minimal: true,
-          usePortal: false,
+          minimal,
+          usePortal,
           matchTargetWidth: true,
         },
-        filterable: false,
+        filterable,
         fill: true,
       },
-      h(Menu, content)
+      h("div.target-container", [
+        h("ul.target-select", content),
+        h.if(nullable)(Button, {
+          minimal: true,
+          icon: "cross",
+          intent: "danger",
+          onClick(evt) {
+            onSelectItem(null);
+            evt.stopPropagation();
+          },
+          disabled: selectedItem == null,
+        }),
+      ])
     )
   );
 }

packages/form-components/src/item-select/item-select.stories.ts

@@ -32,3 +32,14 @@ export function DataTypeSelect() {
   const [state, setState] = useState<DataType | null>(null);
   return h(BaseDataTypeSelect, { state, setState });
 }
+
+export function Nullable() {
+  const [state, setState] = useState<DataType | null>(null);
+  return h(BaseDataTypeSelect, {
+    state,
+    setState(dt) {
+      console.log(dt), setState(dt);
+    },
+    nullable: true,
+  });
+}