Simplify editable cell signature
Signed-off-by: Jonathan <contact@grafikart.fr>
This commit is contained in:
Jonathan
@@ -1,28 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { DataTable, CellHead, Cell } from "./DataTable.tsx";
|
||||
|
||||
export default {
|
||||
title: "Atoms/DataTable",
|
||||
component: DataTable,
|
||||
argTypes: {},
|
||||
} satisfies Meta<typeof DataTable>;
|
||||
|
||||
type Story = StoryObj<typeof DataTable>;
|
||||
|
||||
export const Default: Story = {
|
||||
render: () => {
|
||||
return (
|
||||
<DataTable columns={3}>
|
||||
<CellHead>Header 1</CellHead>
|
||||
<CellHead>Header 2</CellHead>
|
||||
<CellHead>Header 3</CellHead>
|
||||
<Cell>Row 1, Cell 1</Cell>
|
||||
<Cell>Row 1, Cell 2</Cell>
|
||||
<Cell>Row 1, Cell 3</Cell>
|
||||
<Cell>Row 2, Cell 1</Cell>
|
||||
<Cell>Row 2, Cell 2</Cell>
|
||||
<Cell>Row 2, Cell 3</Cell>
|
||||
</DataTable>
|
||||
);
|
||||
},
|
||||
};
|
||||
@@ -21,16 +21,17 @@ export function DataTable({
|
||||
};
|
||||
}
|
||||
return {
|
||||
gridTemplateColumns: columns
|
||||
.map((col) => `minmax(0, ${col})`)
|
||||
.join(" "),
|
||||
gridTemplateColumns: columns.join(" "),
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="overflow-auto relative w-full p-1 -m-1">
|
||||
<Card
|
||||
className={clsx(className, "w-full text-left grid")}
|
||||
className={clsx(
|
||||
className,
|
||||
"min-w-min text-left grid overflow-hidden",
|
||||
)}
|
||||
style={style()}
|
||||
>
|
||||
{children}
|
||||
|
||||
65
packages/ui/src/Molecules/Table/DataTable.stories.tsx
Normal file
65
packages/ui/src/Molecules/Table/DataTable.stories.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { type FC, Fragment, useState } from "react";
|
||||
import { CellHead, DataTable, Row } from "../../Atoms/DataTable/DataTable.tsx";
|
||||
import { EditableRow } from "./EditableRow.tsx";
|
||||
import { TextCell } from "./TextCell.tsx";
|
||||
import { fn } from "@storybook/test";
|
||||
import { SelectCell } from "./SelectCell.tsx";
|
||||
import { Badge } from "../../Atoms/Badge/Badge.tsx";
|
||||
|
||||
type Component = FC<{ onUpdate: (key: string, value: unknown) => void }>;
|
||||
|
||||
export default {
|
||||
title: "Atoms/DataTable/Cells",
|
||||
component: Fragment as Component,
|
||||
argTypes: {},
|
||||
args: { onUpdate: fn() },
|
||||
} satisfies Meta<Component>;
|
||||
|
||||
type Story = StoryObj<Component>;
|
||||
|
||||
export const Default: Story = {
|
||||
render: ({ onUpdate }) => {
|
||||
const [state, setState] = useState({
|
||||
name: "John",
|
||||
status: "delivered",
|
||||
statuses: ["delivered", "pending"],
|
||||
});
|
||||
const updateField = (key: string, value: unknown) => {
|
||||
onUpdate(key, value);
|
||||
setState({
|
||||
...state,
|
||||
[key]: value,
|
||||
});
|
||||
};
|
||||
return (
|
||||
<DataTable columns={["1fr", "1fr", "1fr"]}>
|
||||
<Row>
|
||||
<CellHead>Nom</CellHead>
|
||||
<CellHead>Status</CellHead>
|
||||
<CellHead>Statuses</CellHead>
|
||||
</Row>
|
||||
<EditableRow onUpdate={updateField}>
|
||||
<TextCell required name="name" defaultValue={state.name} />
|
||||
<SelectCell
|
||||
items={["delivered", "pending"]}
|
||||
itemRenderer={({ item }) => <Badge>{item}</Badge>}
|
||||
name="status"
|
||||
defaultValue={state.status}
|
||||
/>
|
||||
<SelectCell
|
||||
multiple
|
||||
items={["delivered", "pending"]}
|
||||
itemRenderer={({ item, onRemove }) => (
|
||||
<Badge onClick={() => onRemove?.(item)}>
|
||||
{item}
|
||||
</Badge>
|
||||
)}
|
||||
name="statuses"
|
||||
defaultValue={state.statuses}
|
||||
/>
|
||||
</EditableRow>
|
||||
</DataTable>
|
||||
);
|
||||
},
|
||||
};
|
||||
@@ -1,79 +1,39 @@
|
||||
import * as Popover from "@radix-ui/react-popover";
|
||||
import {
|
||||
type CSSProperties,
|
||||
type KeyboardEventHandler,
|
||||
type ReactNode,
|
||||
Suspense,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import { Cell } from "../../Atoms/DataTable/DataTable.tsx";
|
||||
import { Command } from "cmdk";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import { Spinner } from "../../Atoms/Spinner/Spinner.tsx";
|
||||
import { focusSiblingElement } from "@probo/helpers";
|
||||
import { useEditableRowContext } from "./EditableRow.tsx";
|
||||
|
||||
type Props<T> =
|
||||
| {
|
||||
type: "text";
|
||||
value?: T;
|
||||
blink?: boolean;
|
||||
onValueChange: (value: string) => void;
|
||||
itemRenderer?: undefined;
|
||||
}
|
||||
| {
|
||||
type: "select";
|
||||
items: T[] | (() => T[]);
|
||||
itemRenderer: (v: { item: T }) => ReactNode;
|
||||
value?: T;
|
||||
blink?: boolean;
|
||||
onValueChange: (value: T) => void;
|
||||
}
|
||||
| {
|
||||
type: "multiple";
|
||||
items: T[] | (() => T[]);
|
||||
itemRenderer: (v: { item: T; onRemove?: () => void }) => ReactNode;
|
||||
value?: T[];
|
||||
blink?: boolean;
|
||||
onValueChange: (value: T[]) => void;
|
||||
};
|
||||
|
||||
type PropsField<Type, T> = Props<T> & {
|
||||
type: Type;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
padding: string;
|
||||
height: number;
|
||||
};
|
||||
|
||||
function getKey<T>(item: T): string {
|
||||
if (
|
||||
item &&
|
||||
typeof item === "object" &&
|
||||
"id" in item &&
|
||||
typeof item.id === "string"
|
||||
) {
|
||||
return item.id.toString();
|
||||
}
|
||||
if (typeof item === "string" || typeof item === "number") {
|
||||
return item.toString();
|
||||
}
|
||||
if (item === undefined) {
|
||||
return "";
|
||||
}
|
||||
console.error("Cannot compute a key from item", item);
|
||||
return "";
|
||||
export function useEditableCellRef() {
|
||||
return useRef<{ close: () => void } | null>(null);
|
||||
}
|
||||
|
||||
export function EditableCell<T>(props: Props<T>) {
|
||||
/**
|
||||
* Base component to create an editable table cell
|
||||
*/
|
||||
export function EditableCell(props: {
|
||||
// Name of the field (used to retrieve errors)
|
||||
name?: string;
|
||||
// Label displayed inside the cell
|
||||
label: ReactNode;
|
||||
// Callback when the edit is dismissed
|
||||
onClose: () => void;
|
||||
// Content of the popover (e.g. a field)
|
||||
children: ReactNode;
|
||||
// Ref used to control the popover (used to close it programatically)
|
||||
ref: ReturnType<typeof useEditableCellRef>;
|
||||
}) {
|
||||
const { errors } = useEditableRowContext();
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
const [value, setValueState] = useState(props.value);
|
||||
const [height, setHeight] = useState<number | undefined>(undefined);
|
||||
const [padding, setPadding] = useState("12px");
|
||||
const td = useRef<HTMLTableCellElement>(null);
|
||||
const valueRef = useRef(value);
|
||||
const setValue = (value: T) => {
|
||||
valueRef.current = value;
|
||||
setValueState(value);
|
||||
};
|
||||
|
||||
// When opening the popover, remember the height and padding of the cell
|
||||
const onOpenChange = (open: boolean) => {
|
||||
@@ -81,37 +41,17 @@ export function EditableCell<T>(props: Props<T>) {
|
||||
setHeight(td.current?.offsetHeight ?? undefined);
|
||||
setPadding(getComputedStyle(td.current!).paddingLeft);
|
||||
} else {
|
||||
props.onClose();
|
||||
setHeight(undefined);
|
||||
}
|
||||
// Send the value when closing the popover
|
||||
if (!open && valueRef.current !== props.value) {
|
||||
// @ts-expect-error - cannot unpack value type
|
||||
props.onValueChange(valueRef.current);
|
||||
}
|
||||
setOpen(open);
|
||||
};
|
||||
|
||||
const fieldProps = {
|
||||
height,
|
||||
onValueChange: setValue,
|
||||
onOpenChange,
|
||||
padding,
|
||||
value,
|
||||
} as any;
|
||||
|
||||
const children = (() => {
|
||||
if (!value) {
|
||||
return "";
|
||||
}
|
||||
if (props.type === "select") {
|
||||
// @ts-expect-error TS cannot understand the link between props.type and value
|
||||
return props.itemRenderer({ item: value });
|
||||
}
|
||||
if (Array.isArray(value) && props.type === "multiple") {
|
||||
return <>{value.map((v) => props.itemRenderer({ item: v }))}</>;
|
||||
}
|
||||
return value as ReactNode;
|
||||
})();
|
||||
if (props.ref) {
|
||||
props.ref.current = {
|
||||
close: () => onOpenChange(false),
|
||||
};
|
||||
}
|
||||
|
||||
// Handle keyboard navigation inside the cells
|
||||
const onKeyDown: KeyboardEventHandler<HTMLButtonElement> = (e) => {
|
||||
@@ -129,6 +69,7 @@ export function EditableCell<T>(props: Props<T>) {
|
||||
);
|
||||
}
|
||||
};
|
||||
const hasError = errors && props.name && props.name in errors;
|
||||
|
||||
return (
|
||||
<Popover.Root onOpenChange={onOpenChange} open={isOpen}>
|
||||
@@ -140,9 +81,9 @@ export function EditableCell<T>(props: Props<T>) {
|
||||
className="flex flex-row justify-start hover:bg-level-2 flex-wrap gap-1 items-center relative"
|
||||
style={{ height }}
|
||||
>
|
||||
{children}
|
||||
{props.blink && (
|
||||
<div className="size-2 bg-txt-accent rounded-full top-1/2 right-3 absolute -translate-y-1/2 animate-pulse" />
|
||||
{props.label}
|
||||
{hasError && (
|
||||
<div className="size-2 bg-txt-danger rounded-full top-1/2 right-3 absolute -translate-y-1/2 animate-pulse" />
|
||||
)}
|
||||
</button>
|
||||
</Cell>
|
||||
@@ -153,205 +94,18 @@ export function EditableCell<T>(props: Props<T>) {
|
||||
side="bottom"
|
||||
align="start"
|
||||
sideOffset={height ? height * -1 : 0}
|
||||
style={{
|
||||
minHeight: height,
|
||||
}}
|
||||
style={
|
||||
{
|
||||
minHeight: height,
|
||||
"--padding": padding,
|
||||
"--height": height + "px",
|
||||
} as CSSProperties
|
||||
}
|
||||
className="border border-border-low bg-level-2 min-w-[200px] flex flex-col justify-center rounded-sm"
|
||||
>
|
||||
{props.type === "text" && (
|
||||
<Input {...props} {...fieldProps} />
|
||||
)}
|
||||
{props.type === "select" && (
|
||||
<Select {...props} {...fieldProps} />
|
||||
)}
|
||||
{props.type === "multiple" && (
|
||||
<Multiple {...props} {...fieldProps} />
|
||||
)}
|
||||
{props.children}
|
||||
</Popover.Content>
|
||||
</Popover.Portal>
|
||||
</Popover.Root>
|
||||
);
|
||||
}
|
||||
|
||||
function Input(props: PropsField<"text", string>) {
|
||||
const blurOnTab: KeyboardEventHandler<HTMLInputElement> = (e) => {
|
||||
if (e.key === "Tab") {
|
||||
props.onOpenChange(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<input
|
||||
type="text"
|
||||
defaultValue={props.value}
|
||||
onKeyDown={blurOnTab}
|
||||
className="text-sm text-txt-primary outline-none"
|
||||
onChange={(e) => props.onValueChange(e.currentTarget.value)}
|
||||
style={{ paddingLeft: props.padding }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function Select<T>(props: PropsField<"select", T>) {
|
||||
const { __ } = useTranslate();
|
||||
const showSearch = false;
|
||||
return (
|
||||
<Command className="text-txt-primary absolute left-0 top-0 right-0 bg-level-2 border border-border-low rounded-b-sm">
|
||||
<div
|
||||
style={{ height: props.height, paddingLeft: props.padding }}
|
||||
className="flex flex-col justify-center"
|
||||
onClick={() => props.onOpenChange(false)}
|
||||
>
|
||||
{props.value ? props.itemRenderer({ item: props.value }) : ""}
|
||||
</div>
|
||||
{showSearch && (
|
||||
<Command.Input
|
||||
className="text-sm text-txt-secondary border-y border-border-low py-2 px-3 w-full focus:outline-txt-accent outline"
|
||||
placeholder={__("Search")}
|
||||
/>
|
||||
)}
|
||||
<Command.List>
|
||||
{Array.isArray(props.items) ? (
|
||||
props.items
|
||||
.filter((item) => item !== props.value)
|
||||
.map((item) => (
|
||||
<Command.Item
|
||||
key={getKey(item)}
|
||||
className="py-2 px-3 hover:bg-level-3 data-[selected]:bg-level-3"
|
||||
onSelect={() => {
|
||||
props.onValueChange(item);
|
||||
props.onOpenChange(false);
|
||||
}}
|
||||
>
|
||||
{props.itemRenderer({ item })}
|
||||
</Command.Item>
|
||||
))
|
||||
) : (
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="py-2 px-3">
|
||||
<Spinner />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<SelectItems
|
||||
value={props.value}
|
||||
itemRenderer={props.itemRenderer}
|
||||
items={props.items}
|
||||
onSelect={(item) => {
|
||||
props.onValueChange(item);
|
||||
props.onOpenChange(false);
|
||||
}}
|
||||
/>
|
||||
</Suspense>
|
||||
)}
|
||||
</Command.List>
|
||||
</Command>
|
||||
);
|
||||
}
|
||||
|
||||
function Multiple<T>(props: PropsField<"multiple", T>) {
|
||||
const { __ } = useTranslate();
|
||||
const showSearch = true;
|
||||
|
||||
const pushValue = (item: T) => {
|
||||
props.onValueChange([...(props.value ?? []), item]);
|
||||
};
|
||||
|
||||
const removeValue = (item: T) => {
|
||||
props.onValueChange(
|
||||
props.value!.filter((v) => getKey(v) !== getKey(item)),
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Command className="text-txt-primary absolute left-0 top-0 right-0 bg-level-2 border border-border-low rounded-b-sm">
|
||||
{props.value && props.value.length > 0 && (
|
||||
<div
|
||||
className="flex flex-col gap-2 py-3"
|
||||
style={{
|
||||
paddingLeft: props.padding,
|
||||
}}
|
||||
>
|
||||
{props.value &&
|
||||
props.value.map((item) =>
|
||||
props.itemRenderer({
|
||||
item,
|
||||
onRemove: () => removeValue(item),
|
||||
}),
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{showSearch && (
|
||||
<Command.Input
|
||||
className="text-sm text-txt-secondary border-y border-border-low py-2 px-3 w-full focus:outline-txt-accent outline"
|
||||
placeholder={__("Search")}
|
||||
/>
|
||||
)}
|
||||
<Command.List>
|
||||
{Array.isArray(props.items) ? (
|
||||
props.items
|
||||
.filter((item) => item !== props.value)
|
||||
.map((item, k) => (
|
||||
<Command.Item
|
||||
key={k}
|
||||
className="py-2 px-3 hover:bg-level-3 data-[selected]:bg-level-3"
|
||||
onSelect={() => {
|
||||
pushValue(item);
|
||||
}}
|
||||
>
|
||||
{props.itemRenderer({
|
||||
item,
|
||||
})}
|
||||
</Command.Item>
|
||||
))
|
||||
) : (
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="py-2 px-3">
|
||||
<Spinner />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<SelectItems
|
||||
value={props.value}
|
||||
itemRenderer={props.itemRenderer}
|
||||
items={props.items}
|
||||
onSelect={(item) => {
|
||||
pushValue(item);
|
||||
}}
|
||||
/>
|
||||
</Suspense>
|
||||
)}
|
||||
</Command.List>
|
||||
</Command>
|
||||
);
|
||||
}
|
||||
/**
|
||||
* Resolve items with a suspense
|
||||
*/
|
||||
function SelectItems<T>(props: {
|
||||
value?: T | T[];
|
||||
itemRenderer: (v: { item: T }) => ReactNode;
|
||||
items: () => T[];
|
||||
onSelect: (item: T) => void;
|
||||
}) {
|
||||
const items = props.items();
|
||||
const keys = Array.isArray(props.value)
|
||||
? props.value.map(getKey)
|
||||
: [getKey(props.value)];
|
||||
return (
|
||||
<>
|
||||
{items
|
||||
.filter((item) => !keys.includes(getKey(item)))
|
||||
.map((item) => (
|
||||
<Command.Item
|
||||
key={getKey(item)}
|
||||
className="py-2 px-3 hover:bg-level-3 data-[selected]:bg-level-3"
|
||||
onSelect={() => props.onSelect(item)}
|
||||
>
|
||||
{props.itemRenderer({ item })}
|
||||
</Command.Item>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
46
packages/ui/src/Molecules/Table/EditableRow.tsx
Normal file
46
packages/ui/src/Molecules/Table/EditableRow.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import {
|
||||
createContext,
|
||||
type ReactNode,
|
||||
useContext,
|
||||
useMemo,
|
||||
useRef,
|
||||
} from "react";
|
||||
import { Row } from "../../Atoms/DataTable/DataTable.tsx";
|
||||
|
||||
type Props = {
|
||||
onUpdate: (key: string, value: unknown) => void;
|
||||
errors?: Record<string, string>;
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
export const EditableRowContext = createContext<null | Omit<Props, "children">>(
|
||||
null,
|
||||
);
|
||||
|
||||
export const useEditableRowContext = () => {
|
||||
const context = useContext(EditableRowContext);
|
||||
if (!context) {
|
||||
throw new Error(
|
||||
"useEditableRowContext must be used within an EditableRow",
|
||||
);
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
||||
export function EditableRow(props: Props) {
|
||||
const onUpdateRef = useRef(props.onUpdate);
|
||||
onUpdateRef.current = props.onUpdate;
|
||||
const value = useMemo(
|
||||
() => ({
|
||||
errors: props.errors,
|
||||
onUpdate: (key: string, value: unknown) =>
|
||||
onUpdateRef.current(key, value),
|
||||
}),
|
||||
[props.errors],
|
||||
);
|
||||
return (
|
||||
<EditableRowContext value={value}>
|
||||
<Row>{props.children}</Row>
|
||||
</EditableRowContext>
|
||||
);
|
||||
}
|
||||
164
packages/ui/src/Molecules/Table/SelectCell.tsx
Normal file
164
packages/ui/src/Molecules/Table/SelectCell.tsx
Normal file
@@ -0,0 +1,164 @@
|
||||
import { EditableCell, useEditableCellRef } from "./EditableCell.tsx";
|
||||
import { Command } from "cmdk";
|
||||
import { Fragment, type ReactNode } from "react";
|
||||
import { getKey } from "./utils.ts";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import { useEditableRowContext } from "./EditableRow.tsx";
|
||||
import { useStateWithRef } from "@probo/hooks";
|
||||
import { tv } from "tailwind-variants";
|
||||
import { Badge } from "../../Atoms/Badge/Badge.tsx";
|
||||
|
||||
type Props<T> = {
|
||||
name: string;
|
||||
items: T[];
|
||||
itemRenderer: (v: { item: T; onRemove?: (item: T) => void }) => ReactNode;
|
||||
} & (
|
||||
| { defaultValue: T; multiple?: undefined }
|
||||
| { defaultValue: T[]; multiple: true }
|
||||
);
|
||||
|
||||
export const selectCell = tv({
|
||||
slots: {
|
||||
command:
|
||||
"text-txt-primary absolute left-0 top-0 right-0 bg-level-2 border border-border-low rounded-b-sm",
|
||||
value: "flex flex-col gap-2 py-3 justify-center",
|
||||
input: "text-sm text-txt-secondary border-y border-border-low py-2 px-3 w-full focus:outline-txt-accent outline",
|
||||
item: "py-2 px-3 hover:bg-level-3 data-[selected=true]:bg-level-3",
|
||||
},
|
||||
});
|
||||
|
||||
export function SelectCell<T>(props: Props<T>) {
|
||||
const [value, setValue, valueRef] = useStateWithRef<T | T[]>(
|
||||
props.defaultValue,
|
||||
);
|
||||
const cellRef = useEditableCellRef();
|
||||
const { __ } = useTranslate();
|
||||
const usedKeys = new Set<string>(
|
||||
Array.isArray(value) ? value.map(getKey) : [getKey(value)],
|
||||
);
|
||||
const { onUpdate } = useEditableRowContext();
|
||||
|
||||
const onSelect = (item: T) => {
|
||||
if (props.multiple) {
|
||||
setValue([...((valueRef.current as T[]) ?? []), item]);
|
||||
return;
|
||||
}
|
||||
setValue(item);
|
||||
cellRef.current?.close();
|
||||
};
|
||||
|
||||
const onClose = () => {
|
||||
if (valueRef.current === props.defaultValue) {
|
||||
return;
|
||||
}
|
||||
onUpdate(props.name, valueRef.current);
|
||||
};
|
||||
|
||||
const classNames = selectCell();
|
||||
|
||||
return (
|
||||
<EditableCell
|
||||
name={props.name}
|
||||
label={
|
||||
<SelectValue value={value} itemRenderer={props.itemRenderer} />
|
||||
}
|
||||
onClose={onClose}
|
||||
ref={cellRef}
|
||||
>
|
||||
<Command className={classNames.command()}>
|
||||
<div
|
||||
className={classNames.value()}
|
||||
style={{
|
||||
paddingLeft: "var(--padding)",
|
||||
minHeight: "var(--height)",
|
||||
}}
|
||||
>
|
||||
{" "}
|
||||
<SelectValue
|
||||
onValueChange={setValue}
|
||||
value={value}
|
||||
itemRenderer={props.itemRenderer}
|
||||
/>
|
||||
</div>{" "}
|
||||
{props.multiple && (
|
||||
<Command.Input
|
||||
className={classNames.input()}
|
||||
placeholder={__("Search")}
|
||||
/>
|
||||
)}
|
||||
<Command.List>
|
||||
{props.items
|
||||
.filter((item) => !usedKeys.has(getKey(item)))
|
||||
.map((item) => (
|
||||
<Command.Item
|
||||
key={getKey(item)}
|
||||
className={classNames.item()}
|
||||
onSelect={() => onSelect(item)}
|
||||
>
|
||||
{props.itemRenderer({ item })}
|
||||
</Command.Item>
|
||||
))}
|
||||
</Command.List>
|
||||
</Command>
|
||||
</EditableCell>
|
||||
);
|
||||
}
|
||||
|
||||
export function SelectValue<T>(props: {
|
||||
itemRenderer: Props<T>["itemRenderer"];
|
||||
onValueChange?: (value: T | T[]) => void;
|
||||
value: T | T[] | undefined;
|
||||
}) {
|
||||
if (!props.value) {
|
||||
return "";
|
||||
}
|
||||
if (!Array.isArray(props.value)) {
|
||||
return props.value ? props.itemRenderer({ item: props.value }) : "";
|
||||
}
|
||||
|
||||
const removeValue = (item: T) => {
|
||||
if (!Array.isArray(props.value) || !props.onValueChange) {
|
||||
return;
|
||||
}
|
||||
props.onValueChange(
|
||||
props.value!.filter((v) => getKey(v) !== getKey(item)),
|
||||
);
|
||||
};
|
||||
|
||||
if (!props.onValueChange && props.value.length > 0) {
|
||||
return (
|
||||
<>
|
||||
{props.value.slice(0, 3).map((item) => (
|
||||
<Fragment key={getKey(item)}>
|
||||
{props.itemRenderer({
|
||||
item,
|
||||
onRemove: props.onValueChange
|
||||
? () => removeValue(item)
|
||||
: undefined,
|
||||
})}
|
||||
</Fragment>
|
||||
))}
|
||||
{props.value.length > 3 && (
|
||||
<Badge className="text-txt-secondary">
|
||||
+{props.value.length - 3}
|
||||
</Badge>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{props.value.map((item) => (
|
||||
<Fragment key={getKey(item)}>
|
||||
{props.itemRenderer({
|
||||
item,
|
||||
onRemove: props.onValueChange
|
||||
? () => removeValue(item)
|
||||
: undefined,
|
||||
})}
|
||||
</Fragment>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
47
packages/ui/src/Molecules/Table/TextCell.tsx
Normal file
47
packages/ui/src/Molecules/Table/TextCell.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import { EditableCell, useEditableCellRef } from "./EditableCell.tsx";
|
||||
import { type KeyboardEventHandler, useRef, useState } from "react";
|
||||
import { useEditableRowContext } from "./EditableRow.tsx";
|
||||
|
||||
type Props = {
|
||||
name: string;
|
||||
defaultValue: string;
|
||||
required?: boolean;
|
||||
};
|
||||
|
||||
export function TextCell(props: Props) {
|
||||
const [value, setValue] = useState(props.defaultValue);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const cellRef = useEditableCellRef();
|
||||
const blurOnTab: KeyboardEventHandler<HTMLInputElement> = (e) => {
|
||||
if (e.key === "Tab") {
|
||||
cellRef.current?.close();
|
||||
}
|
||||
};
|
||||
const { onUpdate } = useEditableRowContext();
|
||||
const onClose = () => {
|
||||
const inputValue = (inputRef.current?.value ?? "").trim();
|
||||
// Do not propagate empty value for required fields
|
||||
if (props.required && inputValue === "") {
|
||||
return;
|
||||
}
|
||||
setValue(inputValue);
|
||||
onUpdate(props.name, inputValue);
|
||||
};
|
||||
return (
|
||||
<EditableCell
|
||||
name={props.name}
|
||||
label={value}
|
||||
ref={cellRef}
|
||||
onClose={onClose}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
ref={inputRef}
|
||||
defaultValue={props.defaultValue}
|
||||
onKeyDown={blurOnTab}
|
||||
className="text-sm text-txt-primary outline-none"
|
||||
style={{ paddingLeft: "var(--padding)" }}
|
||||
/>
|
||||
</EditableCell>
|
||||
);
|
||||
}
|
||||
18
packages/ui/src/Molecules/Table/utils.ts
Normal file
18
packages/ui/src/Molecules/Table/utils.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
export function getKey<T>(item: T): string {
|
||||
if (
|
||||
item &&
|
||||
typeof item === "object" &&
|
||||
"id" in item &&
|
||||
typeof item.id === "string"
|
||||
) {
|
||||
return item.id.toString();
|
||||
}
|
||||
if (typeof item === "string" || typeof item === "number") {
|
||||
return item.toString();
|
||||
}
|
||||
if (item === undefined) {
|
||||
return "";
|
||||
}
|
||||
console.error("Cannot compute a key from item", item);
|
||||
return "";
|
||||
}
|
||||
@@ -79,6 +79,13 @@ export { ImpactOptions } from "./Molecules/Select/ImpactOptions";
|
||||
export { DurationPicker } from "./Molecules/DurationPicker/DurationPicker";
|
||||
export { FrameworkLogo } from "./Molecules/Badge/FrameworkLogo";
|
||||
export { EditableCell } from "./Molecules/Table/EditableCell";
|
||||
export { TextCell } from "./Molecules/Table/TextCell";
|
||||
export {
|
||||
SelectCell,
|
||||
selectCell,
|
||||
SelectValue,
|
||||
} from "./Molecules/Table/SelectCell";
|
||||
export { EditableRow } from "./Molecules/Table/EditableRow";
|
||||
|
||||
// Hooks
|
||||
export { useToast, Toasts } from "./Atoms/Toasts/Toasts";
|
||||
|
||||
Reference in New Issue
Block a user