mirror of
https://gitlab.nic.cz/turris/reforis/foris-js.git
synced 2024-11-14 17:35:35 +01:00
Update Bootstrap library to version 5.3.x
This commit is contained in:
Aleksandr Gumroian
parent
96785f0774
commit
42fcc02d83
78
package-lock.json
generated
78
package-lock.json
generated
|
|
@ -22,11 +22,11 @@
|
|||
"@babel/plugin-transform-runtime": "^7.9.0",
|
||||
"@babel/preset-env": "^7.9.0",
|
||||
"@babel/preset-react": "^7.9.4",
|
||||
"@fortawesome/fontawesome-free": "^5.13.0",
|
||||
"@fortawesome/fontawesome-free": "^6.5.2",
|
||||
"@testing-library/react": "^8.0.9",
|
||||
"babel-loader": "^8.1.0",
|
||||
"babel-polyfill": "^6.26.0",
|
||||
"bootstrap": "^4.6.2",
|
||||
"bootstrap": "^5.3.3",
|
||||
"css-loader": "^5.2.4",
|
||||
"eslint": "^6.8.0",
|
||||
"eslint-config-prettier": "^6.11.0",
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
"webpack": "^5.68.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"bootstrap": "^4.6.2",
|
||||
"bootstrap": "^5.3.3",
|
||||
"prop-types": "15.8.1",
|
||||
"react": "16.9.0",
|
||||
"react-dom": "16.9.0",
|
||||
|
|
@ -1822,9 +1822,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@fortawesome/fontawesome-free": {
|
||||
"version": "5.15.3",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.3.tgz",
|
||||
"integrity": "sha512-rFnSUN/QOtnOAgqFRooTA3H57JLDm0QEG/jPdk+tLQNL/eWd+Aok8g3qCI+Q1xuDPWpGW/i9JySpJVsq8Q0s9w==",
|
||||
"version": "6.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.5.2.tgz",
|
||||
"integrity": "sha512-hRILoInAx8GNT5IMkrtIt9blOdrqHOnPBH+k70aWUAqPZPgopb9G5EQJFpaBx/S8zp2fC+mPW349Bziuk1o28Q==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"engines": {
|
||||
|
|
@ -2814,9 +2814,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@popperjs/core": {
|
||||
"version": "2.11.2",
|
||||
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
|
||||
"integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==",
|
||||
"version": "2.11.8",
|
||||
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
|
||||
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
|
||||
"dev": true,
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
|
|
@ -4330,9 +4330,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/bootstrap": {
|
||||
"version": "4.6.2",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
|
||||
"integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
|
||||
"version": "5.3.3",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
|
||||
"integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
|
|
@ -4345,8 +4345,7 @@
|
|||
}
|
||||
],
|
||||
"peerDependencies": {
|
||||
"jquery": "1.9.1 - 3",
|
||||
"popper.js": "^1.16.1"
|
||||
"@popperjs/core": "^2.11.8"
|
||||
}
|
||||
},
|
||||
"node_modules/brace-expansion": {
|
||||
|
|
@ -11673,13 +11672,6 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/jquery": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
|
||||
"integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
|
||||
"dev": true,
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
|
|
@ -13791,18 +13783,6 @@
|
|||
"integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/popper.js": {
|
||||
"version": "1.16.1",
|
||||
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
|
||||
"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
|
||||
"deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/popperjs"
|
||||
}
|
||||
},
|
||||
"node_modules/portfinder": {
|
||||
"version": "1.0.28",
|
||||
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
|
||||
|
|
@ -20398,9 +20378,9 @@
|
|||
}
|
||||
},
|
||||
"@fortawesome/fontawesome-free": {
|
||||
"version": "5.15.3",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.3.tgz",
|
||||
"integrity": "sha512-rFnSUN/QOtnOAgqFRooTA3H57JLDm0QEG/jPdk+tLQNL/eWd+Aok8g3qCI+Q1xuDPWpGW/i9JySpJVsq8Q0s9w==",
|
||||
"version": "6.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.5.2.tgz",
|
||||
"integrity": "sha512-hRILoInAx8GNT5IMkrtIt9blOdrqHOnPBH+k70aWUAqPZPgopb9G5EQJFpaBx/S8zp2fC+mPW349Bziuk1o28Q==",
|
||||
"dev": true
|
||||
},
|
||||
"@gar/promisify": {
|
||||
|
|
@ -21165,9 +21145,9 @@
|
|||
}
|
||||
},
|
||||
"@popperjs/core": {
|
||||
"version": "2.11.2",
|
||||
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
|
||||
"integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==",
|
||||
"version": "2.11.8",
|
||||
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
|
||||
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
|
||||
"dev": true
|
||||
},
|
||||
"@sheerun/mutationobserver-shim": {
|
||||
|
|
@ -22452,9 +22432,9 @@
|
|||
}
|
||||
},
|
||||
"bootstrap": {
|
||||
"version": "4.6.2",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
|
||||
"integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
|
||||
"version": "5.3.3",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
|
||||
"integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
|
|
@ -28040,13 +28020,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"jquery": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
|
||||
"integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
|
||||
"dev": true,
|
||||
"peer": true
|
||||
},
|
||||
"js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
|
|
@ -29672,13 +29645,6 @@
|
|||
"integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
|
||||
"dev": true
|
||||
},
|
||||
"popper.js": {
|
||||
"version": "1.16.1",
|
||||
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
|
||||
"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
|
||||
"dev": true,
|
||||
"peer": true
|
||||
},
|
||||
"portfinder": {
|
||||
"version": "1.0.28",
|
||||
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
"react-uid": "^2.2.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"bootstrap": "^4.6.2",
|
||||
"bootstrap": "^5.3.3",
|
||||
"prop-types": "15.8.1",
|
||||
"react": "16.9.0",
|
||||
"react-dom": "16.9.0",
|
||||
|
|
@ -34,11 +34,11 @@
|
|||
"@babel/plugin-transform-runtime": "^7.9.0",
|
||||
"@babel/preset-env": "^7.9.0",
|
||||
"@babel/preset-react": "^7.9.4",
|
||||
"@fortawesome/fontawesome-free": "^5.13.0",
|
||||
"@fortawesome/fontawesome-free": "^6.5.2",
|
||||
"@testing-library/react": "^8.0.9",
|
||||
"babel-loader": "^8.1.0",
|
||||
"babel-polyfill": "^6.26.0",
|
||||
"bootstrap": "^4.6.2",
|
||||
"bootstrap": "^5.3.3",
|
||||
"css-loader": "^5.2.4",
|
||||
"eslint": "^6.8.0",
|
||||
"eslint-config-prettier": "^6.11.0",
|
||||
|
|
|
|||
|
|
@ -38,16 +38,17 @@ Alert.defaultProps = {
|
|||
export function Alert({ type, onDismiss, children }) {
|
||||
return (
|
||||
<div
|
||||
className={`alert ${
|
||||
className={`alert alert-${type} ${
|
||||
onDismiss ? "alert-dismissible" : ""
|
||||
} alert-${type}`}
|
||||
}`.trim()}
|
||||
>
|
||||
{onDismiss ? (
|
||||
<button type="button" className="close" onClick={onDismiss}>
|
||||
×
|
||||
</button>
|
||||
) : (
|
||||
false
|
||||
{onDismiss && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
onClick={onDismiss}
|
||||
aria-label={_("Close")}
|
||||
/>
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export function Button({
|
|||
}) {
|
||||
let buttonClass = className ? `btn ${className}` : "btn btn-primary";
|
||||
if (forisFormSize) {
|
||||
buttonClass = `${buttonClass} col-sm-12 col-md-3 col-lg-2`;
|
||||
buttonClass = `${buttonClass} col-12 col-md-3 col-lg-2`;
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -44,7 +44,7 @@ export function Button({
|
|||
>
|
||||
{loading && (
|
||||
<span
|
||||
className="spinner-border spinner-border-sm mr-1"
|
||||
className="spinner-border spinner-border-sm me-1"
|
||||
role="status"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -24,25 +24,24 @@ CheckBox.defaultProps = {
|
|||
|
||||
export function CheckBox({ label, helpText, disabled, ...props }) {
|
||||
const uid = useUID();
|
||||
|
||||
return (
|
||||
<div className="form-group">
|
||||
<div className="custom-control custom-checkbox ">
|
||||
<input
|
||||
className="custom-control-input"
|
||||
type="checkbox"
|
||||
id={uid}
|
||||
disabled={disabled}
|
||||
{...props}
|
||||
/>
|
||||
<label className="custom-control-label" htmlFor={uid}>
|
||||
{label}
|
||||
{helpText && (
|
||||
<small className="form-text text-muted">
|
||||
{helpText}
|
||||
</small>
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
<div className="mb-3 form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id={uid}
|
||||
disabled={disabled}
|
||||
{...props}
|
||||
/>
|
||||
<label className="form-check-label" htmlFor={uid}>
|
||||
{label}
|
||||
</label>
|
||||
{helpText && (
|
||||
<div className="form-text">
|
||||
<small>{helpText}</small>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,18 +27,21 @@ export const Input = forwardRef(
|
|||
) => {
|
||||
const uid = useUID();
|
||||
|
||||
const inputClassName = `form-control ${className || ""} ${
|
||||
const inputClassName = `${className || ""} ${
|
||||
error ? "is-invalid" : ""
|
||||
}`.trim();
|
||||
|
||||
return (
|
||||
<div className="form-group">
|
||||
<label className={labelClassName} htmlFor={uid}>
|
||||
<div className="mb-3">
|
||||
<label
|
||||
className={`form-label ${labelClassName || ""}`.trim()}
|
||||
htmlFor={uid}
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
<div className={`input-group ${groupClassName || ""}`.trim()}>
|
||||
<input
|
||||
className={inputClassName}
|
||||
className={`form-control ${inputClassName}`.trim()}
|
||||
type={type}
|
||||
id={uid}
|
||||
ref={ref}
|
||||
|
|
@ -46,10 +49,12 @@ export const Input = forwardRef(
|
|||
/>
|
||||
{children}
|
||||
</div>
|
||||
{error ? <div className="invalid-feedback">{error}</div> : null}
|
||||
{helpText ? (
|
||||
<small className="form-text text-muted">{helpText}</small>
|
||||
) : null}
|
||||
{error && <div className="invalid-feedback">{error}</div>}
|
||||
{helpText && (
|
||||
<div className="form-text">
|
||||
<small>{helpText}</small>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">×</span>
|
||||
</button>
|
||||
aria-label={_("Close")}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ RadioSet.propTypes = {
|
|||
/** Choices . */
|
||||
choices: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
/** Choice lable . */
|
||||
/** Choice label . */
|
||||
label: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.element,
|
||||
|
|
@ -64,7 +64,7 @@ export function RadioSet({
|
|||
});
|
||||
|
||||
return (
|
||||
<div className="form-group">
|
||||
<div className="mb-3">
|
||||
{label && (
|
||||
<label htmlFor={uid} className="d-block">
|
||||
{label}
|
||||
|
|
@ -72,7 +72,9 @@ export function RadioSet({
|
|||
)}
|
||||
{radios}
|
||||
{helpText && (
|
||||
<small className="form-text text-muted">{helpText}</small>
|
||||
<div className="form-text">
|
||||
<small>{helpText}</small>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -94,24 +96,24 @@ export function Radio({ label, id, helpText, inline, ...props }) {
|
|||
return (
|
||||
<>
|
||||
<div
|
||||
className={`custom-control custom-radio ${
|
||||
inline ? "custom-control-inline" : ""
|
||||
className={`mb-2 ${
|
||||
inline ? "form-check form-check-inline" : ""
|
||||
}`.trim()}
|
||||
>
|
||||
<input
|
||||
id={id}
|
||||
className="custom-control-input"
|
||||
className="form-check-input me-2"
|
||||
type="radio"
|
||||
{...props}
|
||||
/>
|
||||
<label className="custom-control-label" htmlFor={id}>
|
||||
<label className="form-check-label" htmlFor={id}>
|
||||
{label}
|
||||
{helpText && (
|
||||
<div className="form-text">
|
||||
<small>{helpText}</small>
|
||||
</div>
|
||||
)}
|
||||
</label>
|
||||
{helpText && (
|
||||
<small className="form-text text-muted mt-0 mb-3">
|
||||
{helpText}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -30,14 +30,18 @@ export function Select({ label, choices, helpText, ...props }) {
|
|||
));
|
||||
|
||||
return (
|
||||
<div className="form-group">
|
||||
<label htmlFor={uid}>{label}</label>
|
||||
<select className="custom-select" id={uid} {...props}>
|
||||
<div className="mb-3">
|
||||
<label className="form-label" htmlFor={uid}>
|
||||
{label}
|
||||
</label>
|
||||
<select className="form-select" id={uid} {...props}>
|
||||
{options}
|
||||
</select>
|
||||
{helpText ? (
|
||||
<small className="form-text text-muted">{helpText}</small>
|
||||
) : null}
|
||||
{helpText && (
|
||||
<div className="form-text">
|
||||
<small>{helpText}</small>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -22,28 +22,30 @@ Switch.propTypes = {
|
|||
|
||||
export function Switch({ label, helpText, switchHeading, ...props }) {
|
||||
const uid = useUID();
|
||||
|
||||
return (
|
||||
<div className={`form-group ${switchHeading ? "switch" : ""}`.trim()}>
|
||||
<div
|
||||
className={`custom-control custom-switch ${
|
||||
!helpText ? "custom-control-inline" : ""
|
||||
} ${switchHeading ? "switch-heading" : ""}`.trim()}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="custom-control-input"
|
||||
id={uid}
|
||||
{...props}
|
||||
/>
|
||||
<label className="custom-control-label" htmlFor={uid}>
|
||||
{label}
|
||||
</label>
|
||||
{helpText && (
|
||||
<small className="form-text text-muted mt-0 mb-3">
|
||||
{helpText}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={`form-check form-switch mb-3 ${
|
||||
switchHeading ? "d-flex align-items-center" : null
|
||||
}`.trim()}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
className={`form-check-input ${
|
||||
switchHeading ? "me-2" : ""
|
||||
}`.trim()}
|
||||
role="switch"
|
||||
id={uid}
|
||||
{...props}
|
||||
/>
|
||||
<label className="form-check-label" htmlFor={uid}>
|
||||
{label}
|
||||
</label>
|
||||
{helpText && (
|
||||
<div className="form-text">
|
||||
<small>{helpText}</small>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ exports[`<Button /> Render button with spinner 1`] = `
|
|||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="spinner-border spinner-border-sm mr-1"
|
||||
class="spinner-border spinner-border-sm me-1"
|
||||
role="status"
|
||||
/>
|
||||
<span>
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ export function ResetWiFiSettings({ ws, endpoint }) {
|
|||
"If a number of wireless cards doesn't match, you may try to reset the Wi-Fi settings. Note that this will remove the current Wi-Fi configuration and restore the default values."
|
||||
)}
|
||||
</p>
|
||||
<div className="text-right">
|
||||
<div className="text-end">
|
||||
<Button
|
||||
className="btn-primary"
|
||||
forisFormSize
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@ function DeviceForm({
|
|||
return (
|
||||
<>
|
||||
<Switch
|
||||
label={<h2>{_(`Wi-Fi ${deviceID + 1}`)}</h2>}
|
||||
label={<h2 className="mb-0">{_(`Wi-Fi ${deviceID + 1}`)}</h2>}
|
||||
checked={formData.enabled}
|
||||
onChange={setFormValue((value) => ({
|
||||
devices: {
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ function QRCodeModal({ shown, setShown, SSID, password }) {
|
|||
createAndDownloadPdf(SSID, password);
|
||||
}}
|
||||
>
|
||||
<i className="fas fa-arrow-down mr-2" />
|
||||
<i className="fas fa-file-download me-2" />
|
||||
{_("Download PDF")}
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
|
|
|
|||
|
|
@ -298,7 +298,7 @@ exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="text-right"
|
||||
class="text-end"
|
||||
>
|
||||
<button
|
||||
class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
|
||||
|
|
@ -321,7 +321,7 @@ exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
|
|||
If a number of wireless cards doesn't match, you may try to reset the Wi-Fi settings. Note that this will remove the current Wi-Fi configuration and restore the default values.
|
||||
</p>
|
||||
<div
|
||||
class="text-right"
|
||||
class="text-end"
|
||||
>
|
||||
<button
|
||||
class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
|
||||
|
|
@ -436,7 +436,7 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
|
|||
<div
|
||||
@@ -551,10 +633,11 @@
|
||||
<div
|
||||
class=\\"text-right\\"
|
||||
class=\\"text-end\\"
|
||||
>
|
||||
<button
|
||||
class=\\"btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center\\"
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ exports[`<SubmitButton/> Render load 1`] = `
|
|||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="spinner-border spinner-border-sm mr-1"
|
||||
class="spinner-border spinner-border-sm me-1"
|
||||
role="status"
|
||||
/>
|
||||
<span>
|
||||
|
|
@ -41,7 +41,7 @@ exports[`<SubmitButton/> Render saving 1`] = `
|
|||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="spinner-border spinner-border-sm mr-1"
|
||||
class="spinner-border spinner-border-sm me-1"
|
||||
role="status"
|
||||
/>
|
||||
<span>
|
||||
|
|
|
|||
|
|
@ -190,7 +190,7 @@ export function ForisForm({
|
|||
<Prompt message={getMessageOnLeavingPage} />
|
||||
<form onSubmit={onSubmit} ref={formReference}>
|
||||
{childrenWithFormProps}
|
||||
<div className="text-right">
|
||||
<div className="text-end">
|
||||
<SubmitButton
|
||||
state={getSubmitButtonState()}
|
||||
disabled={submitButtonIsDisabled}
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
/*
|
||||
* Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
|
||||
* Copyright (C) 2019-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 { useState, useEffect } from "react";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { Tooltip } from "bootstrap/dist/js/bootstrap.bundle.min";
|
||||
|
||||
/** Execute callback when condition is set to true. */
|
||||
export function useConditionalTimeout(
|
||||
|
|
@ -40,3 +41,22 @@ export function useClickOutside(element, callback) {
|
|||
};
|
||||
});
|
||||
}
|
||||
|
||||
/** useTooltip hook for Bootstrap tooltips. */
|
||||
export function useTooltip(description, placement = "top", trigger = "hover") {
|
||||
const tooltipRef = useRef();
|
||||
|
||||
useEffect(() => {
|
||||
const tooltip = new Tooltip(tooltipRef.current, {
|
||||
title: description,
|
||||
placement,
|
||||
trigger,
|
||||
});
|
||||
|
||||
return () => {
|
||||
tooltip.dispose();
|
||||
};
|
||||
});
|
||||
|
||||
return tooltipRef;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user