feat(react/ribbon): port editability select

This commit is contained in:
Elian Doran
2025-08-21 22:19:26 +03:00
parent 1964fb90d5
commit f772f59d7c
7 changed files with 117 additions and 138 deletions

View File

@@ -2,6 +2,7 @@ import { Dropdown as BootstrapDropdown } from "bootstrap";
import { ComponentChildren } from "preact";
import Icon from "./Icon";
import { useEffect, useMemo, useRef, type CSSProperties } from "preact/compat";
import "./FormList.css";
interface FormListOpts {
children: ComponentChildren;
@@ -76,27 +77,33 @@ interface FormListItemOpts {
active?: boolean;
badges?: FormListBadge[];
disabled?: boolean;
checked?: boolean;
checked?: boolean | null;
selected?: boolean;
onClick?: () => void;
description?: string;
className?: string;
}
export function FormListItem({ children, icon, value, title, active, badges, disabled, checked, onClick }: FormListItemOpts) {
export function FormListItem({ children, icon, value, title, active, badges, disabled, checked, onClick, description, selected }: FormListItemOpts) {
if (checked) {
icon = "bx bx-check";
}
return (
<a
class={`dropdown-item ${active ? "active" : ""} ${disabled ? "disabled" : ""}`}
class={`dropdown-item ${active ? "active" : ""} ${disabled ? "disabled" : ""} ${selected ? "selected" : ""}`}
data-value={value} title={title}
tabIndex={0}
onClick={onClick}
>
<Icon icon={icon} />&nbsp;
{children}
{badges && badges.map(({ className, text }) => (
<span className={`badge ${className ?? ""}`}>{text}</span>
))}
<div>
{children}
{badges && badges.map(({ className, text }) => (
<span className={`badge ${className ?? ""}`}>{text}</span>
))}
{description && <div className="description">{description}</div>}
</div>
</a>
);
}