GGLinnk/foris-js
1
0
Fork 0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2024-11-14 17:35:35 +01:00
Code Issues Releases Activity

fixup! Update Bootstrap library to version 5.3.x

Browse Source
This commit is contained in:
Aleksandr Gumroian 2024-04-23 15:24:50 +02:00
parent c008d7bcc7
commit 6bd809222c
No known key found for this signature in database
GPG Key ID: 9E77849C64F0A733
11 changed files with 75 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/bootstrap/Input.js
View File

@ -27,14 +27,14 @@ export const Input = forwardRef(
) => {
const uid = useUID();
const inputClassName = `form-control ${className || ""} ${
const inputClassName = `${className || ""} ${
error ? "is-invalid" : ""
}`.trim();
return (
<div className="mb-3">
<label
className={`form-label ${labelClassName}`.trim()}
className={`form-label ${labelClassName || ""}`.trim()}
htmlFor={uid}
>
{label}

7
src/bootstrap/Modal.js
View File

@ -92,11 +92,10 @@ export function ModalHeader({ setShown, title }) {
<h5 className="modal-title">{title}</h5>
<button
type="button"
className="close"
className="btn-close"
onClick={() => setShown(false)}
>
<span aria-hidden="true">&times;</span>
</button>
aria-label={_("Close")}
/>
</div>
);
}

44
src/bootstrap/NumberInput.js
View File

@ -23,7 +23,7 @@ NumberInput.propTypes = {
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Function called when value changes. */
onChange: PropTypes.func.isRequired,
/** Additional description dispaled to the right of input value. */
/** Additional description displayed to the right of input value. */
inlineText: PropTypes.string,
};
@ -49,27 +49,27 @@ export function NumberInput({ onChange, inlineText, value, ...props }) {
return (
<Input type="number" onChange={onChange} value={value} {...props}>
<div className="input-group-append">
{inlineText && <p className="input-group-text">{inlineText}</p>}
<button
type="button"
className="btn btn-outline-secondary"
onMouseDown={() => enableIncrease(true)}
onMouseUp={() => enableIncrease(false)}
aria-label="Increase"
>
<i className="fas fa-plus" />
</button>
<button
type="button"
className="btn btn-outline-secondary"
onMouseDown={() => enableDecrease(true)}
onMouseUp={() => enableDecrease(false)}
aria-label="Decrease"
>
<i className="fas fa-minus" />
</button>
</div>
{inlineText && (
<span className="input-group-text">{inlineText}</span>
)}
<button
type="button"
className="btn btn-outline-secondary"
onMouseDown={() => enableIncrease(true)}
onMouseUp={() => enableIncrease(false)}
aria-label="Increase"
>
<i className="fas fa-plus" />
</button>
<button
type="button"
className="btn btn-outline-secondary"
onMouseDown={() => enableDecrease(true)}
onMouseUp={() => enableDecrease(false)}
aria-label="Decrease"
>
<i className="fas fa-minus" />
</button>
</Input>
);
}

32
src/bootstrap/PasswordInput.js
View File

@ -34,24 +34,20 @@ export function PasswordInput({ withEye, newPass, ...props }) {
autoComplete={newPass ? "new-password" : "current-password"}
{...props}
>
{withEye ? (
<div className="input-group-append">
<button
type="button"
className="input-group-text"
onClick={(e) => {
e.preventDefault();
setHidden((shouldBeHidden) => !shouldBeHidden);
}}
>
<i
className={`fa ${
isHidden ? "fa-eye" : "fa-eye-slash"
}`}
/>
</button>
</div>
) : null}
{withEye && (
<button
type="button"
className="input-group-text"
onClick={(e) => {
e.preventDefault();
setHidden((shouldBeHidden) => !shouldBeHidden);
}}
>
<i
className={`fa ${isHidden ? "fa-eye" : "fa-eye-slash"}`}
/>
</button>
)}
</Input>
);
}

14
src/bootstrap/RadioSet.js
View File

@ -96,24 +96,24 @@ export function Radio({ label, id, helpText, inline, ...props }) {
return (
<>
<div
className={`${
className={`mb-2 ${
inline ? "form-check form-check-inline" : ""
}`.trim()}
>
<input
id={id}
className="form-check-input"
className="form-check-input me-2"
type="radio"
{...props}
/>
<label className="form-check-label" htmlFor={id}>
{label}
{helpText && (
<div className="form-text">
<small>{helpText}</small>
</div>
)}
</label>
{helpText && (
<div className="form-text">
<small>{helpText}</small>
</div>
)}
</div>
</>
);

2
src/bootstrap/Spinner.js
View File

@ -16,7 +16,7 @@ Spinner.propTypes = {
PropTypes.arrayOf(PropTypes.node),
PropTypes.node,
]),
/** Render component with full-screen mode (using apropriate `.css` styles) */
/** Render component with full-screen mode (using appropriate `.css` styles) */
fullScreen: PropTypes.bool.isRequired,
className: PropTypes.string,
};

0
src/bootstrap/Tooltip.js Normal file
View File

10
src/common/WiFiSettings/WiFiForm.js
View File

@ -119,12 +119,10 @@ function DeviceForm({
}))}
{...props}
>
<div className="input-group-append">
<WiFiQRCode
SSID={formData.SSID}
password={formData.password}
/>
</div>
<WiFiQRCode
SSID={formData.SSID}
password={formData.password}
/>
</TextInput>
<PasswordInput

2
src/common/WiFiSettings/WiFiQRCode.js
View File

@ -87,7 +87,7 @@ function QRCodeModal({ shown, setShown, SSID, password }) {
createAndDownloadPdf(SSID, password);
}}
>
<i className="fas fa-arrow-down me-2" />
<i className="fas fa-file-download me-2" />
{_("Download PDF")}
</Button>
</ModalFooter>

2
src/index.js
View File

@ -69,7 +69,7 @@ export {
withErrorMessage,
} from "./utils/conditionalHOCs";
export { ErrorMessage } from "./utils/ErrorMessage";
export { useClickOutside } from "./utils/hooks";
export { useClickOutside, useTooltip } from "./utils/hooks";
export { toLocaleDateString } from "./utils/datetime";
export { displayCard } from "./utils/displayCard";
export { isPluginInstalled } from "./utils/isPluginInstalled";

21
src/utils/hooks.js
View File

@ -5,7 +5,8 @@
* See /LICENSE for more information.
*/
import { useState, useEffect } from "react";
import { useState, useEffect, useRef } from "react";
import { Tooltip } from "bootstrap/dist/js/bootstrap.bundle.min.js";
/** Execute callback when condition is set to true. */
export function useConditionalTimeout(
@ -40,3 +41,21 @@ export function useClickOutside(element, callback) {
};
});
}
export function useTooltip(description, placement = "top", trigger = "hover") {
const tooltipRef = useRef();
useEffect(() => {
const tooltip = new Tooltip(tooltipRef.current, {
title: description,
placement: placement,
trigger: trigger,
});
return () => {
tooltip.dispose();
};
});
return tooltipRef;
}