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