From 543080f6db658cae697dd6ffef9c97b1bc2616f6 Mon Sep 17 00:00:00 2001 From: Paul Miller Date: Tue, 2 May 2023 17:11:45 -0500 Subject: [PATCH] add contact editor --- src/components/AmountEditable.tsx | 2 +- src/components/ColorRadioGroup.tsx | 59 +++++++++++++++++++ src/components/ContactEditor.tsx | 93 ++++++++++++++++++++++++++++++ src/components/TagEditor.tsx | 9 ++- 4 files changed, 161 insertions(+), 2 deletions(-) create mode 100644 src/components/ColorRadioGroup.tsx create mode 100644 src/components/ContactEditor.tsx diff --git a/src/components/AmountEditable.tsx b/src/components/AmountEditable.tsx index 013d474..63bfb1a 100644 --- a/src/components/AmountEditable.tsx +++ b/src/components/AmountEditable.tsx @@ -131,7 +131,7 @@ export function AmountEditable(props: { initialAmountSats: string, setAmountSats } const DIALOG_POSITIONER = "fixed inset-0 safe-top safe-bottom z-50" - const DIALOG_CONTENT = "h-full safe-bottom flex flex-col justify-between p-4 backdrop-blur-md bg-neutral-800/70" + const DIALOG_CONTENT = "h-full safe-bottom flex flex-col justify-between p-4 backdrop-blur-xl bg-neutral-800/70" return ( diff --git a/src/components/ColorRadioGroup.tsx b/src/components/ColorRadioGroup.tsx new file mode 100644 index 0000000..98b03f0 --- /dev/null +++ b/src/components/ColorRadioGroup.tsx @@ -0,0 +1,59 @@ +import { RadioGroup as Kobalte } from '@kobalte/core'; +import { type JSX, Show, splitProps, For } from 'solid-js'; + +type RadioGroupProps = { + name: string; + label?: string | undefined; + options: { label: string; value: string }[]; + value: string | undefined; + error: string; + required?: boolean | undefined; + disabled?: boolean | undefined; + ref: (element: HTMLInputElement | HTMLTextAreaElement) => void; + onInput: JSX.EventHandler; + onChange: JSX.EventHandler; + onBlur: JSX.EventHandler; +}; +type Color = "blue" | "green" | "red" | "gray" + +const colorVariants = { + blue: "bg-m-blue", + green: "bg-m-green", + red: "bg-m-red", + gray: "bg-[#898989]", +} + +export function ColorRadioGroup(props: RadioGroupProps) { + const [rootProps, inputProps] = splitProps( + props, + ['name', 'value', 'required', 'disabled'], + ['ref', 'onInput', 'onChange', 'onBlur'] + ); + return ( + + + + {props.label} + + +
+ + {(option) => ( + + + + + + {/* {option.label} */} + + )} + +
+ {props.error} + + ); +} \ No newline at end of file diff --git a/src/components/ContactEditor.tsx b/src/components/ContactEditor.tsx new file mode 100644 index 0000000..447ba5b --- /dev/null +++ b/src/components/ContactEditor.tsx @@ -0,0 +1,93 @@ +import { For, Show, createEffect, createMemo, createSignal } from 'solid-js'; +import { Button, LargeHeader, VStack } from '~/components/layout'; +import { useMegaStore } from '~/state/megaStore'; +import { satsToUsd } from '~/utils/conversions'; +import { Amount } from './Amount'; +import { Dialog, RadioGroup } from '@kobalte/core'; +import close from "~/assets/icons/close.svg"; +import { SubmitHandler, createForm, required, reset, setValue } from '@modular-forms/solid'; +import { TextField } from './layout/TextField'; +import { ColorRadioGroup } from './ColorRadioGroup'; + +type Color = "blue" | "green" | "red" | "gray" + +type Contact = { + name: string; + npub?: string; + isExchange: boolean; + color: string; +} + +// const colorOptions = ["blue", "green", "red", "gray"] + +const colorOptions = [{ label: "blue", value: "blue" }, { label: "green", value: "green" }, { label: "red", value: "red" }, { label: "gray", value: "gray" }] + +const INITIAL: Contact = { name: "", isExchange: false, color: "gray" } + +export function ContactEditor(props: { createContact: (name: string) => void }) { + const [isOpen, setIsOpen] = createSignal(true); + + const [contactForm, { Form, Field }] = createForm({ initialValues: INITIAL }); + + // What we're all here for in the first place: returning a value + const handleSubmit: SubmitHandler = (c: Contact) => { + // e.preventDefault() + + props.createContact(c.name) + + setIsOpen(false); + } + + createEffect(() => { + // When isOpen changes we reset the form + if (isOpen()) { + reset(contactForm, { initialValues: INITIAL }) + } + }) + + const DIALOG_POSITIONER = "fixed inset-0 safe-top safe-bottom z-50" + const DIALOG_CONTENT = "h-full safe-bottom flex flex-col justify-between p-4 backdrop-blur-xl bg-neutral-800/70" + + return ( + + + +
+ setIsOpen(false)}> +
+ +
+
+
+ + Create Contact + + + {(field, props) => ( + + )} + + + {(field, props) => ( + + )} + + + {(field, props) => ( + + )} + + +
+ +
+ +
+ + + ); +} diff --git a/src/components/TagEditor.tsx b/src/components/TagEditor.tsx index 64b8a7c..213ff2e 100644 --- a/src/components/TagEditor.tsx +++ b/src/components/TagEditor.tsx @@ -2,6 +2,7 @@ import { Select, createOptions } from "@thisbeyond/solid-select"; import "~/styles/solid-select.css" import { SmallHeader } from "./layout"; import { For } from "solid-js"; +import { ContactEditor } from "./ContactEditor"; // take two arrays, subtract the second from the first, then return the first function subtract(a: T[], b: T[]) { @@ -41,6 +42,11 @@ export function TagEditor(props: { title: string, values: TagItem[], setValues: createable: createValue, }); + const newContact = (name: string) => { + const contact: TagItem = { id: createUniqueId(), name, kind: "contact" }; + onChange([...props.selectedValues, contact]) + } + return (
{props.title} @@ -57,7 +63,8 @@ export function TagEditor(props: { title: string, values: TagItem[], setValues:
onChange([...props.selectedValues, contact])} class="border border-l-white/50 border-r-white/50 border-t-white/75 border-b-white/25 bg-m-blue px-1 py-[0.5] rounded cursor-pointer hover:outline-white hover:outline-1">{contact.name}
)} - + {/* */} +
)