wip: add back fields/

Author: blacksmithgu

src/ui/fields/editable.tsx

@@ -0,0 +1,10 @@
+/** An editable value; provides the initial value as well as a callback which (asynchronously) edits the value. */
+export interface Editable<T> {
+    /** The initial value to display. The component should track the current value if it is updated. */
+    initial: T;
+    /**
+     * A callback to update the value in it's original datasource; can optionally provide the expected current value for validation. Returns whether
+     * the value was successfully updated.
+     */
+    update: (incoming: T, original?: T) => Promise<boolean>;
+} 

src/ui/fields/select.tsx

@@ -0,0 +1,46 @@
+import { useCallback, useState } from "preact/hooks";
+import Select from "react-select";
+
+/** @internal Editable component which updates an editable. */
+export function RawSelectEditable({
+    options,
+    initialValue,
+    onUpdate
+}: {
+    /** The options you can select from. */
+    options: (string | number)[];
+    initialValue: string | string[];
+    onUpdate: (string | string[]) => void;
+}) {
+    const [value, setValue] = useState(initialValue);
+
+    return <Select
+        classNamePrefix="datacore-selectable"
+        onChange={onChange}
+        unstyled
+        isMulti={config?.multi ?? false}
+        options={config?.options ?? []}
+        menuPortalTarget={document.body}
+                classNames={{
+
+
+                    input: (props: any) => "prompt-input",
+
+
+                    valueContainer: (props: any) => "suggestion-item value-container",
+
+
+                    container: (props: any) => "suggestion-container",
+
+
+                    menu: (props: any) => "suggestion-content suggestion-container",
+
+
+                    option: (props: any) => `suggestion-item${props.isSelected ? " is-selected" : ""}`,
+
+
+                }}
+
+
+            />
+}