aljaz/mutiny-web
1
0
Fork 0
mirror of https://github.com/aljazceru/mutiny-web.git synced 2026-01-04 06:44:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

tag editor without tag buttons

Browse Source
This commit is contained in:
Paul Miller
2023-04-26 10:55:47 -05:00
parent 339904737b
commit 3eb2e0bdb9
2 changed files with 21 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/TagEditor.tsx
View File

@@ -1,83 +1,63 @@
import { Select, createOptions } from "@thisbeyond/solid-select";
import { For, createSignal } from "solid-js";
import "~/styles/solid-select.css"
import { SmallHeader } from "./layout";
// take two arrays, subtract the second from the first, then return the first
function subtract<T>(a: T[], b: T[]) {
const set = new Set(b);
return a.filter(x => !set.has(x));
};
// combine two arrays and keep only the items that are unique
function combineUnique<T>(a: T[], b: T[]) {
const set = new Set([...a, ...b]);
return [...set];
};
// simple math.random based id generator
const createUniqueId = () => Math.random().toString(36).substr(2, 9);
type Contact = {
export type TagItem = {
id: string;
name: string;
kind: "text" | "contact";
}
const fakeContacts: Contact[] = [
{ id: createUniqueId(), name: "👤 Alice" },
{ id: createUniqueId(), name: "👤 Tony" },
{ id: createUniqueId(), name: "👤 @benthecarman" },
{ id: createUniqueId(), name: "👀 Uknown" }
]
const createValue = (name: string) => {
return { id: createUniqueId(), name };
return { id: createUniqueId(), name, kind: "text" };
};
export function TagEditor() {
const candidates = [...fakeContacts];
export function TagEditor(props: { title: string, values: TagItem[], setValues: (values: TagItem[]) => void, selectedValues: TagItem[], setSelectedValues: (values: TagItem[]) => void }) {
const onChange = (selected: TagItem[]) => {
props.setSelectedValues(selected);
const [values, setValues] = createSignal(candidates);
const [selectedValues, setSelectedValues] = createSignal<Contact[]>([]);
const onChange = (selected: Contact[]) => {
setSelectedValues(selected);
console.log(selected)
const lastValue = selected[selected.length - 1];
if (lastValue && !values().includes(lastValue)) {
setValues([...values(), lastValue]);
if (lastValue && !props.values.includes(lastValue)) {
props.setValues([...props.values, lastValue]);
}
};
const props = createOptions(values, {
const selectProps = createOptions(props.values, {
key: "name",
disable: (value) => selectedValues().includes(value),
disable: (value) => props.selectedValues.includes(value),
filterable: true, // Default
createable: createValue,
});
return (
<div class="flex flex-col gap-2 flex-grow flex-shrink flex-1" >
<SmallHeader>Tag the origin</SmallHeader>
<SmallHeader>{props.title}</SmallHeader>
<Select
multiple
onChange={onChange}
placeholder="Where's it coming from?"
{...props}
{...selectProps}
/>
<div class="flex gap-2 flex-wrap">
<For each={subtract(fakeContacts, selectedValues())}>
{/* TODO: blocked on https://github.com/thisbeyond/solid-select/issues/39 */}
{/* <div class="flex gap-2 flex-wrap">
<For each={subtract(props.values, props.selectedValues).slice(0, 3)}>
{(contact) => (
<div onClick={() => onChange([...selectedValues(), contact])} class="bg-m-blue px-1 rounded cursor-pointer hover:outline-white hover:outline-1">+ {contact.name}</div>
<div onClick={() => onChange([...props.selectedValues, contact])} class="bg-m-blue/50 px-1 py-[0.5] rounded cursor-pointer hover:outline-white hover:outline-1">{contact.name}</div>
)}
</For>
</div>
{/* <div>
<pre>{JSON.stringify(selectedValues(), null, 2)}</pre>
</div>
<div>
<pre>{JSON.stringify(values(), null, 2)}</pre>
<button class="bg-black border border-white px-1 py-[0.5] rounded cursor-pointer hover:outline-white hover:outline-1">+ Add Contact</button>
</div> */}
</div >
)