1
0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2024-12-25 00:11:36 +01:00

Add ThreeDotsMenu component

ThreeDotsMenu Bootstrap component is a dropdown menu
that appears when the user clicks on three dots.

It is used to display a list of actions that can be
performed on a particular item.
This commit is contained in:
Aleksandr Gumroian 2024-09-27 14:42:29 +02:00
parent e7758cab9a
commit b6e1e0adae
No known key found for this signature in database
GPG Key ID: 9E77849C64F0A733
3 changed files with 83 additions and 4 deletions

View File

@ -0,0 +1,42 @@
/*
* Copyright (C) 2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
*/
import React from "react";
import { faEllipsisVertical } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import PropTypes from "prop-types";
import Button from "./Button";
ThreeDotsMenu.propTypes = {
/** Menu items. */
children: PropTypes.arrayOf(PropTypes.node).isRequired,
};
function ThreeDotsMenu({ children }) {
return (
<div className="dropdown">
<Button
className="btn-sm btn-link text-body"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<FontAwesomeIcon icon={faEllipsisVertical} />
</Button>
<ul className="dropdown-menu">
{children.map((child) => (
<li key={child.key || child.props.id || Math.random()}>
{child}
</li>
))}
</ul>
</div>
);
}
export default ThreeDotsMenu;

View File

@ -0,0 +1,40 @@
ThreeDotsMenu Bootstrap component is a dropdown menu that appears when the user
clicks on three dots. It is used to display a list of actions that can be
performed on a particular item.
```js
import { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEdit, faTrash } from "@fortawesome/free-solid-svg-icons";
const threeDotsMenuItems = [
{
text: "Edit",
icon: faEdit,
onClick: () => {
alert("Edit clicked");
},
},
{
text: "Delete",
icon: faTrash,
onClick: () => {
alert("Delete clicked");
},
},
];
<ThreeDotsMenu>
{threeDotsMenuItems.map((item, index) => (
<button key={index} onClick={item.onClick} className="dropdown-item">
<FontAwesomeIcon
icon={item.icon}
className="me-1"
width="1rem"
size="sm"
/>
{item.text}
</button>
))}
</ThreeDotsMenu>;
```

View File

@ -79,10 +79,7 @@ module.exports = {
__dirname,
"node_modules/bootstrap/dist/css/bootstrap.min.css"
),
path.join(
__dirname,
"node_modules/@fortawesome/fontawesome-free/css/all.min.css"
),
path.join(__dirname, "node_modules/bootstrap/dist/js/bootstrap.min.js"),
],
styleguideComponents: {
LogoRenderer: path.join(__dirname, "docs/components/Logo"),