Skip to content

feat(demo/dropdown-menu): add props table #1684

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Utsav789 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(demo/dropdown-menu): add props table #1684

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 118 additions & 1 deletion apps/demo/src/Views/Ui/components/DropdownMenuDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useTranslation } from "@prefabs.tech/react-i18n";
import { Button, DropdownMenu, Page } from "@prefabs.tech/react-ui";
import { Button, DropdownMenu, Page, TDataTable } from "@prefabs.tech/react-ui";
import { useNavigate } from "react-router-dom";

import { CodeBlock, Section } from "../../../components/Demo";
Expand Down Expand Up @@ -51,6 +51,93 @@ export const DropdownMenuDemo = () => {
);
};

const propertiesData = [
{
default: '""',
description: t("ui:dropdownMenu.propertiesDescription.className"),
id: 1,
prop: "className",
type: "string",
},
{
default: "-",
description: t("ui:dropdownMenu.propertiesDescription.close"),
id: 2,
prop: "close",
type: "() => void",
},
{
default: "false",
description: t("ui:dropdownMenu.propertiesDescription.hideDropdownIcon"),
id: 3,
prop: "hideDropdownIcon",
type: "boolean",
},
{
default: "false",
description: t("ui:dropdownMenu.propertiesDescription.isControlled"),
id: 4,
prop: "isControlled",
type: "boolean",
},
{
default: "false",
description: t("ui:dropdownMenu.propertiesDescription.isOpen"),
id: 5,
prop: "isOpen",
type: "boolean",
},
{
default: "-",
description: t("ui:dropdownMenu.propertiesDescription.label"),
id: 6,
prop: "label",
type: "React.ReactNode",
},
{
default: "[]",
description: t("ui:dropdownMenu.propertiesDescription.menu"),
id: 7,
prop: "menu",
type: "MenuItem[]",
},
{
default: "0",
description: t("ui:dropdownMenu.propertiesDescription.offset"),
id: 8,
prop: "offset",
type: "number",
},
{
default: '"bottom-start"',
description: t("ui:dropdownMenu.propertiesDescription.position"),
id: 9,
prop: "position",
type: "string",
},
{
default: "-",
description: t("ui:dropdownMenu.propertiesDescription.renderOption"),
id: 10,
prop: "renderOption",
type: "(item: MenuItem) => React.ReactNode",
},
{
default: "-",
description: t("ui:dropdownMenu.propertiesDescription.toggle"),
id: 11,
prop: "toggle",
type: "() => void",
},
{
default: "Ellipsis Icon",
description: t("ui:dropdownMenu.propertiesDescription.trigger"),
id: 12,
prop: "trigger",
type: "React.ReactNode",
},
];

return (
<Page
subtitle={t("dropdownMenu.subtitle")}
Expand Down Expand Up @@ -135,6 +222,36 @@ return (<DropdownMenu
<DropdownMenu menu={menuItems} hideDropdownIcon />
<CodeBlock exampleCode="<DropdownMenu menu={menuItems} hideDropdownIcon />" />
</Section>

<Section
title={t("headers.propertiesValue", {
value: "DropdownMenu",
})}
>
<TDataTable
columns={[
{
accessorKey: "prop",
header: "Properties",
},
{
accessorKey: "type",
header: "Type",
},
{
accessorKey: "default",
header: "Default",
},
{
accessorKey: "description",
header: "Description",
},
]}
data={propertiesData}
paginated={false}
persistState={false}
/>
</Section>
</Page>
);
};
28 changes: 21 additions & 7 deletions apps/demo/src/locales/en/ui.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,20 +201,34 @@
}
},
"dropdownMenu": {
"label": {
"delete": "Delete",
"edit": "Edit",
"setting": "Settings",
"user": "User",
"view": "View"
},
"propertiesDescription": {
"className": "Style class of the component.",
"close": "Callback to close the menu programmatically.",
"hideDropdownIcon": "If true, hides the default arrow icon next to the label.",
"isControlled": "Determines if the menu state is controlled externally.",
"isOpen": "Specifies whether the menu is currently open.",
"label": "The label text or node to display on the trigger button.",
"menu": "An array of menu items to display.",
"offset": "The offset distance from the trigger element.",
"position": "Position of the menu relative to the trigger (e.g., 'bottom-start').",
"renderOption": "Function to customize the rendering of menu items.",
"toggle": "Callback to toggle the menu visibility.",
"trigger": "Custom element to use as the menu trigger instead of the default button."
},
"subtitle": "The Dropdown component provides an accessible and customizable menu for selecting actions or options. It supports labels, icons, slots for custom triggers and icons, and emits events on selection.",
"title": "Dropdown menu",
"usage": {
"hiddenDropdownIcon": "Hidden dropdown icon with default label",
"leftAlign": "Popup align left",
"severity": "Severity",
"templating": "Menu templating"
},
"label": {
"delete": "Delete",
"edit": "Edit",
"setting": "Settings",
"user": "User",
"view": "View"
}
},
"editableTitle": {
Expand Down
34 changes: 24 additions & 10 deletions apps/demo/src/locales/fr/ui.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@
"label": "Label (fr)",
"locale": "Locales support (fr)",
"notFound": "Missing country code (fr)",
"positions": {
"positions": {
"left": "Left (default) (fr)",
"right": "Right (fr)",
"rightEdge": "Right edge (fr)"
Expand Down Expand Up @@ -165,7 +165,7 @@
"single": "Select a country... (fr)"
},
"propertiesDescription": {
"autoSortOptions":"By default, options are sorted alphabetically. If false, countries are sorted by priority in the order groups → favorites → include → fallback-locale translations, preserving the defined order. (fr)",
"autoSortOptions": "By default, options are sorted alphabetically. If false, countries are sorted by priority in the order groups → favorites → include → fallback-locale translations, preserving the defined order. (fr)",
"data": "Custom country data to overwrite existing entries or add new ones. (fr)",
"exclude": "An array of country codes to remove from the list. (fr)",
"fallbackLocale": "Locale used when active locale translation is missing. (fr)",
Expand Down Expand Up @@ -201,20 +201,34 @@
}
},
"dropdownMenu": {
"subtitle": "The Dropdown component provides an accessible and customizable menu for selecting actions or options. It supports labels, icons, slots for custom triggers and icons, and emits events on selection (fr).",
"title": "Dropdown menu (fr)",
"usage": {
"hiddenDropdownIcon": "Hidden dropdown icon with default label (fr)",
"leftAlign": "Popup align left (fr)",
"severity": "Severity (fr)",
"templating": "Menu templating (fr)"
},
"label": {
"delete": "Delete (fr)",
"edit": "Edit (fr)",
"setting": "Settings (fr)",
"user": "User (fr)",
"view": "View (fr)"
},
"propertiesDescription": {
"className": "Style class of the component. (fr)",
"close": "Callback to close the menu programmatically. (fr)",
"hideDropdownIcon": "If true, hides the default arrow icon next to the label. (fr)",
"isControlled": "Determines if the menu state is controlled externally. (fr)",
"isOpen": "Specifies whether the menu is currently open. (fr)",
"label": "The label text or node to display on the trigger button. (fr)",
"menu": "An array of menu items to display. (fr)",
"offset": "The offset distance from the trigger element. (fr)",
"position": "Position of the menu relative to the trigger (e.g., 'bottom-start'). (fr)",
"renderOption": "Function to customize the rendering of menu items. (fr)",
"toggle": "Callback to toggle the menu visibility. (fr)",
"trigger": "Custom element to use as the menu trigger instead of the default button. (fr)"
},
"subtitle": "The Dropdown component provides an accessible and customizable menu for selecting actions or options. It supports labels, icons, slots for custom triggers and icons, and emits events on selection. (fr)",
"title": "Dropdown menu (fr)",
"usage": {
"hiddenDropdownIcon": "Hidden dropdown icon with default label (fr)",
"leftAlign": "Popup align left (fr)",
"severity": "Severity (fr)",
"templating": "Menu templating (fr)"
}
},
"editableTitle": {
Expand Down