mirror of
https://gitlab.nic.cz/turris/reforis/foris-js.git
synced 2024-12-25 00:11:36 +01:00
Compare commits
8 Commits
c0fd0adbc9
...
14b90bbbd4
Author | SHA1 | Date | |
---|---|---|---|
|
14b90bbbd4 | ||
|
85b207b1dd | ||
|
79e61d9507 | ||
|
6795c3941b | ||
|
969e8e6411 | ||
|
0099759279 | ||
|
87c81a2a2d | ||
|
81b71f8153 |
10
CHANGELOG.md
10
CHANGELOG.md
|
@ -8,6 +8,13 @@ and this project adheres to
|
|||
|
||||
## [Unreleased]
|
||||
|
||||
## [6.4.0] - 2024-10-02
|
||||
|
||||
### Changed
|
||||
|
||||
- Refactored Alert component to include dismiss animation and timeout
|
||||
- Refactored ThreeDotsMenu component to include additional props
|
||||
|
||||
## [6.3.0] - 2024-09-27
|
||||
|
||||
### Added
|
||||
|
@ -398,7 +405,8 @@ and this project adheres to
|
|||
## [0.0.7] - 2019-09-02
|
||||
|
||||
[unreleased]:
|
||||
https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.3.0...dev
|
||||
https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.4.0...dev
|
||||
[6.4.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.3.0...v6.4.0
|
||||
[6.3.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.2.1...v6.3.0
|
||||
[6.2.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.2.0...v6.2.1
|
||||
[6.2.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.1.1...v6.2.0
|
||||
|
|
4
package-lock.json
generated
4
package-lock.json
generated
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "foris",
|
||||
"version": "6.3.0",
|
||||
"version": "6.4.0",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "foris",
|
||||
"version": "6.3.0",
|
||||
"version": "6.4.0",
|
||||
"license": "GPL-3.0",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^6.6.0",
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "foris",
|
||||
"version": "6.3.0",
|
||||
"version": "6.4.0",
|
||||
"description": "Foris JS library is a set of components and utils for reForis application and plugins.",
|
||||
"author": "CZ.NIC, z.s.p.o.",
|
||||
"repository": {
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
* See /LICENSE for more information.
|
||||
*/
|
||||
|
||||
import React, { useRef } from "react";
|
||||
import React, { useRef, useEffect, useState } from "react";
|
||||
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
|
@ -40,20 +40,36 @@ Alert.defaultProps = {
|
|||
|
||||
function Alert({ type, onDismiss, children }) {
|
||||
const alertRef = useRef();
|
||||
const [isVisible, setIsVisible] = useState(true);
|
||||
useFocusTrap(alertRef, !!onDismiss);
|
||||
|
||||
useEffect(() => {
|
||||
if (onDismiss) {
|
||||
const timeout = setTimeout(() => setIsVisible(false), 7000);
|
||||
return () => clearTimeout(timeout);
|
||||
}
|
||||
}, [onDismiss]);
|
||||
|
||||
const handleAnimationEnd = () => {
|
||||
if (!isVisible && onDismiss) {
|
||||
onDismiss();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={alertRef}
|
||||
className={`alert alert-${type} ${
|
||||
className={`alert alert-${type} ${isVisible ? "alert-fade-in" : "alert-slide-out-top"} ${
|
||||
onDismiss ? "alert-dismissible" : ""
|
||||
}`.trim()}
|
||||
role="alert"
|
||||
onAnimationEnd={handleAnimationEnd}
|
||||
>
|
||||
{onDismiss && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
onClick={onDismiss}
|
||||
onClick={() => setIsVisible(false)}
|
||||
aria-label={_("Close")}
|
||||
/>
|
||||
)}
|
||||
|
|
|
@ -18,9 +18,9 @@ ThreeDotsMenu.propTypes = {
|
|||
children: PropTypes.arrayOf(PropTypes.node).isRequired,
|
||||
};
|
||||
|
||||
function ThreeDotsMenu({ children }) {
|
||||
function ThreeDotsMenu({ children, ...props }) {
|
||||
return (
|
||||
<div className="dropdown">
|
||||
<div className="dropdown position-static" {...props}>
|
||||
<Button
|
||||
className="btn-sm btn-link text-body"
|
||||
data-bs-toggle="dropdown"
|
||||
|
|
|
@ -43,14 +43,17 @@ describe("AlertContext", () => {
|
|||
expect(componentContainer).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("should dismiss alert with alert button", () => {
|
||||
it("should dismiss alert with alert button", async () => {
|
||||
fireEvent.click(getByText(componentContainer, "Set alert"));
|
||||
// Alert is present
|
||||
expect(getByText(componentContainer, "Alert content")).toBeDefined();
|
||||
|
||||
fireEvent.click(componentContainer.querySelector(".btn-close"));
|
||||
// Alert is gone
|
||||
expect(queryByText(componentContainer, "Alert content")).toBeNull();
|
||||
await (() =>
|
||||
expect(
|
||||
queryByText(componentContainer, "Alert content")
|
||||
).toBeNull());
|
||||
});
|
||||
|
||||
it("should dismiss alert with external button", () => {
|
||||
|
|
|
@ -6,7 +6,7 @@ exports[`AlertContext should render alert 1`] = `
|
|||
id="alert-container"
|
||||
>
|
||||
<div
|
||||
class="alert alert-danger alert-dismissible"
|
||||
class="alert alert-danger alert-fade-in alert-dismissible"
|
||||
role="alert"
|
||||
>
|
||||
<button
|
||||
|
|
Loading…
Reference in New Issue
Block a user