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:
parent
e7758cab9a
commit
b6e1e0adae
42
src/bootstrap/ThreeDotsMenu.js
Normal file
42
src/bootstrap/ThreeDotsMenu.js
Normal 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;
|
40
src/bootstrap/ThreeDotsMenu.md
Normal file
40
src/bootstrap/ThreeDotsMenu.md
Normal 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>;
|
||||||
|
```
|
|
@ -79,10 +79,7 @@ module.exports = {
|
||||||
__dirname,
|
__dirname,
|
||||||
"node_modules/bootstrap/dist/css/bootstrap.min.css"
|
"node_modules/bootstrap/dist/css/bootstrap.min.css"
|
||||||
),
|
),
|
||||||
path.join(
|
path.join(__dirname, "node_modules/bootstrap/dist/js/bootstrap.min.js"),
|
||||||
__dirname,
|
|
||||||
"node_modules/@fortawesome/fontawesome-free/css/all.min.css"
|
|
||||||
),
|
|
||||||
],
|
],
|
||||||
styleguideComponents: {
|
styleguideComponents: {
|
||||||
LogoRenderer: path.join(__dirname, "docs/components/Logo"),
|
LogoRenderer: path.join(__dirname, "docs/components/Logo"),
|
||||||
|
|
Loading…
Reference in New Issue
Block a user