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

Update Bootstrap library to version 5.3.x

Browse Source
This commit is contained in:
Aleksandr Gumroian 2024-04-19 16:09:03 +02:00
parent 96785f0774
commit 42fcc02d83
No known key found for this signature in database
GPG Key ID: 9E77849C64F0A733
22 changed files with 190 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
package-lock.json generated
View File

@ -22,11 +22,11 @@
"@babel/plugin-transform-runtime": "^7.9.0", "@babel/plugin-transform-runtime": "^7.9.0",
"@babel/preset-env": "^7.9.0", "@babel/preset-env": "^7.9.0",
"@babel/preset-react": "^7.9.4", "@babel/preset-react": "^7.9.4",
"@fortawesome/fontawesome-free": "^5.13.0", "@fortawesome/fontawesome-free": "^6.5.2",
"@testing-library/react": "^8.0.9", "@testing-library/react": "^8.0.9",
"babel-loader": "^8.1.0", "babel-loader": "^8.1.0",
"babel-polyfill": "^6.26.0", "babel-polyfill": "^6.26.0",
"bootstrap": "^4.6.2", "bootstrap": "^5.3.3",
"css-loader": "^5.2.4", "css-loader": "^5.2.4",
"eslint": "^6.8.0", "eslint": "^6.8.0",
"eslint-config-prettier": "^6.11.0", "eslint-config-prettier": "^6.11.0",
@ -47,7 +47,7 @@
"webpack": "^5.68.0" "webpack": "^5.68.0"
}, },
"peerDependencies": { "peerDependencies": {
"bootstrap": "^4.6.2", "bootstrap": "^5.3.3",
"prop-types": "15.8.1", "prop-types": "15.8.1",
"react": "16.9.0", "react": "16.9.0",
"react-dom": "16.9.0", "react-dom": "16.9.0",
@ -1822,9 +1822,9 @@
} }
}, },
"node_modules/@fortawesome/fontawesome-free": { "node_modules/@fortawesome/fontawesome-free": {
"version": "5.15.3", "version": "6.5.2",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.3.tgz", "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.5.2.tgz",
"integrity": "sha512-rFnSUN/QOtnOAgqFRooTA3H57JLDm0QEG/jPdk+tLQNL/eWd+Aok8g3qCI+Q1xuDPWpGW/i9JySpJVsq8Q0s9w==", "integrity": "sha512-hRILoInAx8GNT5IMkrtIt9blOdrqHOnPBH+k70aWUAqPZPgopb9G5EQJFpaBx/S8zp2fC+mPW349Bziuk1o28Q==",
"dev": true, "dev": true,
"hasInstallScript": true, "hasInstallScript": true,
"engines": { "engines": {
@ -2814,9 +2814,9 @@
} }
}, },
"node_modules/@popperjs/core": { "node_modules/@popperjs/core": {
"version": "2.11.2", "version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==", "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"dev": true, "dev": true,
"funding": { "funding": {
"type": "opencollective", "type": "opencollective",
@ -4330,9 +4330,9 @@
} }
}, },
"node_modules/bootstrap": { "node_modules/bootstrap": {
"version": "4.6.2", "version": "5.3.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz", "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
"integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==", "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
"dev": true, "dev": true,
"funding": [ "funding": [
{ {
@ -4345,8 +4345,7 @@
} }
], ],
"peerDependencies": { "peerDependencies": {
"jquery": "1.9.1 - 3", "@popperjs/core": "^2.11.8"
"popper.js": "^1.16.1"
} }
}, },
"node_modules/brace-expansion": { "node_modules/brace-expansion": {
@ -11673,13 +11672,6 @@
"node": ">=8" "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": { "node_modules/js-tokens": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@ -13791,18 +13783,6 @@
"integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==", "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
"dev": true "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": { "node_modules/portfinder": {
"version": "1.0.28", "version": "1.0.28",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@ -20398,9 +20378,9 @@
} }
}, },
"@fortawesome/fontawesome-free": { "@fortawesome/fontawesome-free": {
"version": "5.15.3", "version": "6.5.2",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.3.tgz", "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.5.2.tgz",
"integrity": "sha512-rFnSUN/QOtnOAgqFRooTA3H57JLDm0QEG/jPdk+tLQNL/eWd+Aok8g3qCI+Q1xuDPWpGW/i9JySpJVsq8Q0s9w==", "integrity": "sha512-hRILoInAx8GNT5IMkrtIt9blOdrqHOnPBH+k70aWUAqPZPgopb9G5EQJFpaBx/S8zp2fC+mPW349Bziuk1o28Q==",
"dev": true "dev": true
}, },
"@gar/promisify": { "@gar/promisify": {
@ -21165,9 +21145,9 @@
} }
}, },
"@popperjs/core": { "@popperjs/core": {
"version": "2.11.2", "version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==", "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"dev": true "dev": true
}, },
"@sheerun/mutationobserver-shim": { "@sheerun/mutationobserver-shim": {
@ -22452,9 +22432,9 @@
} }
}, },
"bootstrap": { "bootstrap": {
"version": "4.6.2", "version": "5.3.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz", "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
"integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==", "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
"dev": true, "dev": true,
"requires": {} "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": { "js-tokens": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@ -29672,13 +29645,6 @@
"integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==", "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
"dev": true "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": { "portfinder": {
"version": "1.0.28", "version": "1.0.28",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",

6
package.json
View File

@ -22,7 +22,7 @@
"react-uid": "^2.2.0" "react-uid": "^2.2.0"
}, },
"peerDependencies": { "peerDependencies": {
"bootstrap": "^4.6.2", "bootstrap": "^5.3.3",
"prop-types": "15.8.1", "prop-types": "15.8.1",
"react": "16.9.0", "react": "16.9.0",
"react-dom": "16.9.0", "react-dom": "16.9.0",
@ -34,11 +34,11 @@
"@babel/plugin-transform-runtime": "^7.9.0", "@babel/plugin-transform-runtime": "^7.9.0",
"@babel/preset-env": "^7.9.0", "@babel/preset-env": "^7.9.0",
"@babel/preset-react": "^7.9.4", "@babel/preset-react": "^7.9.4",
"@fortawesome/fontawesome-free": "^5.13.0", "@fortawesome/fontawesome-free": "^6.5.2",
"@testing-library/react": "^8.0.9", "@testing-library/react": "^8.0.9",
"babel-loader": "^8.1.0", "babel-loader": "^8.1.0",
"babel-polyfill": "^6.26.0", "babel-polyfill": "^6.26.0",
"bootstrap": "^4.6.2", "bootstrap": "^5.3.3",
"css-loader": "^5.2.4", "css-loader": "^5.2.4",
"eslint": "^6.8.0", "eslint": "^6.8.0",
"eslint-config-prettier": "^6.11.0", "eslint-config-prettier": "^6.11.0",

17
src/bootstrap/Alert.js
View File

@ -38,16 +38,17 @@ Alert.defaultProps = {
export function Alert({ type, onDismiss, children }) { export function Alert({ type, onDismiss, children }) {
return ( return (
<div <div
className={`alert ${ className={`alert alert-${type} ${
onDismiss ? "alert-dismissible" : "" onDismiss ? "alert-dismissible" : ""
} alert-${type}`} }`.trim()}
> >
{onDismiss ? ( {onDismiss && (
<button type="button" className="close" onClick={onDismiss}> <button
&times; type="button"
</button> className="btn-close"
) : ( onClick={onDismiss}
false aria-label={_("Close")}
/>
)} )}
{children} {children}
</div> </div>

4
src/bootstrap/Button.js
View File

@ -33,7 +33,7 @@ export function Button({
}) { }) {
let buttonClass = className ? `btn ${className}` : "btn btn-primary"; let buttonClass = className ? `btn ${className}` : "btn btn-primary";
if (forisFormSize) { if (forisFormSize) {
buttonClass = `${buttonClass} col-sm-12 col-md-3 col-lg-2`; buttonClass = `${buttonClass} col-12 col-md-3 col-lg-2`;
} }
return ( return (
@ -44,7 +44,7 @@ export function Button({
> >
{loading && ( {loading && (
<span <span
className="spinner-border spinner-border-sm mr-1" className="spinner-border spinner-border-sm me-1"
role="status" role="status"
aria-hidden="true" aria-hidden="true"
/> />

35
src/bootstrap/CheckBox.js
View File

@ -24,25 +24,24 @@ CheckBox.defaultProps = {
export function CheckBox({ label, helpText, disabled, ...props }) { export function CheckBox({ label, helpText, disabled, ...props }) {
const uid = useUID(); const uid = useUID();
return ( return (
<div className="form-group"> <div className="mb-3 form-check">
<div className="custom-control custom-checkbox "> <input
<input className="form-check-input"
className="custom-control-input" type="checkbox"
type="checkbox" id={uid}
id={uid} disabled={disabled}
disabled={disabled} {...props}
{...props} />
/> <label className="form-check-label" htmlFor={uid}>
<label className="custom-control-label" htmlFor={uid}> {label}
{label} </label>
{helpText && ( {helpText && (
<small className="form-text text-muted"> <div className="form-text">
{helpText} <small>{helpText}</small>
</small> </div>
)} )}
</label>
</div>
</div> </div>
); );
} }

21
src/bootstrap/Input.js
View File

@ -27,18 +27,21 @@ export const Input = forwardRef(
) => { ) => {
const uid = useUID(); const uid = useUID();
const inputClassName = `form-control ${className || ""} ${ const inputClassName = `${className || ""} ${
error ? "is-invalid" : "" error ? "is-invalid" : ""
}`.trim(); }`.trim();
return ( return (
<div className="form-group"> <div className="mb-3">
<label className={labelClassName} htmlFor={uid}> <label
className={`form-label ${labelClassName || ""}`.trim()}
htmlFor={uid}
>
{label} {label}
</label> </label>
<div className={`input-group ${groupClassName || ""}`.trim()}> <div className={`input-group ${groupClassName || ""}`.trim()}>
<input <input
className={inputClassName} className={`form-control ${inputClassName}`.trim()}
type={type} type={type}
id={uid} id={uid}
ref={ref} ref={ref}
@ -46,10 +49,12 @@ export const Input = forwardRef(
/> />
{children} {children}
</div> </div>
{error ? <div className="invalid-feedback">{error}</div> : null} {error && <div className="invalid-feedback">{error}</div>}
{helpText ? ( {helpText && (
<small className="form-text text-muted">{helpText}</small> <div className="form-text">
) : null} <small>{helpText}</small>
</div>
)}
</div> </div>
); );
} }

7
src/bootstrap/Modal.js
View File

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

44
src/bootstrap/NumberInput.js
View File

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

32
src/bootstrap/PasswordInput.js
View File

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

26
src/bootstrap/RadioSet.js
View File

@ -17,7 +17,7 @@ RadioSet.propTypes = {
/** Choices . */ /** Choices . */
choices: PropTypes.arrayOf( choices: PropTypes.arrayOf(
PropTypes.shape({ PropTypes.shape({
/** Choice lable . */ /** Choice label . */
label: PropTypes.oneOfType([ label: PropTypes.oneOfType([
PropTypes.string, PropTypes.string,
PropTypes.element, PropTypes.element,
@ -64,7 +64,7 @@ export function RadioSet({
}); });
return ( return (
<div className="form-group"> <div className="mb-3">
{label && ( {label && (
<label htmlFor={uid} className="d-block"> <label htmlFor={uid} className="d-block">
{label} {label}
@ -72,7 +72,9 @@ export function RadioSet({
)} )}
{radios} {radios}
{helpText && ( {helpText && (
<small className="form-text text-muted">{helpText}</small> <div className="form-text">
<small>{helpText}</small>
</div>
)} )}
</div> </div>
); );
@ -94,24 +96,24 @@ export function Radio({ label, id, helpText, inline, ...props }) {
return ( return (
<> <>
<div <div
className={`custom-control custom-radio ${ className={`mb-2 ${
inline ? "custom-control-inline" : "" inline ? "form-check form-check-inline" : ""
}`.trim()} }`.trim()}
> >
<input <input
id={id} id={id}
className="custom-control-input" className="form-check-input me-2"
type="radio" type="radio"
{...props} {...props}
/> />
<label className="custom-control-label" htmlFor={id}> <label className="form-check-label" htmlFor={id}>
{label} {label}
{helpText && (
<div className="form-text">
<small>{helpText}</small>
</div>
)}
</label> </label>
{helpText && (
<small className="form-text text-muted mt-0 mb-3">
{helpText}
</small>
)}
</div> </div>
</> </>
); );

16
src/bootstrap/Select.js
View File

@ -30,14 +30,18 @@ export function Select({ label, choices, helpText, ...props }) {
)); ));
return ( return (
<div className="form-group"> <div className="mb-3">
<label htmlFor={uid}>{label}</label> <label className="form-label" htmlFor={uid}>
<select className="custom-select" id={uid} {...props}> {label}
</label>
<select className="form-select" id={uid} {...props}>
{options} {options}
</select> </select>
{helpText ? ( {helpText && (
<small className="form-text text-muted">{helpText}</small> <div className="form-text">
) : null} <small>{helpText}</small>
</div>
)}
</div> </div>
); );
} }

2
src/bootstrap/Spinner.js
View File

@ -16,7 +16,7 @@ Spinner.propTypes = {
PropTypes.arrayOf(PropTypes.node), PropTypes.arrayOf(PropTypes.node),
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, fullScreen: PropTypes.bool.isRequired,
className: PropTypes.string, className: PropTypes.string,
}; };

44
src/bootstrap/Switch.js
View File

@ -22,28 +22,30 @@ Switch.propTypes = {
export function Switch({ label, helpText, switchHeading, ...props }) { export function Switch({ label, helpText, switchHeading, ...props }) {
const uid = useUID(); const uid = useUID();
return ( return (
<div className={`form-group ${switchHeading ? "switch" : ""}`.trim()}> <div
<div className={`form-check form-switch mb-3 ${
className={`custom-control custom-switch ${ switchHeading ? "d-flex align-items-center" : null
!helpText ? "custom-control-inline" : "" }`.trim()}
} ${switchHeading ? "switch-heading" : ""}`.trim()} >
> <input
<input type="checkbox"
type="checkbox" className={`form-check-input ${
className="custom-control-input" switchHeading ? "me-2" : ""
id={uid} }`.trim()}
{...props} role="switch"
/> id={uid}
<label className="custom-control-label" htmlFor={uid}> {...props}
{label} />
</label> <label className="form-check-label" htmlFor={uid}>
{helpText && ( {label}
<small className="form-text text-muted mt-0 mb-3"> </label>
{helpText} {helpText && (
</small> <div className="form-text">
)} <small>{helpText}</small>
</div> </div>
)}
</div> </div>
); );
} }

2
src/bootstrap/__tests__/__snapshots__/Button.test.js.snap
View File

@ -29,7 +29,7 @@ exports[`<Button /> Render button with spinner 1`] = `
> >
<span <span
aria-hidden="true" aria-hidden="true"
class="spinner-border spinner-border-sm mr-1" class="spinner-border spinner-border-sm me-1"
role="status" role="status"
/> />
<span> <span>

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

@ -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." "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> </p>
<div className="text-right"> <div className="text-end">
<Button <Button
className="btn-primary" className="btn-primary"
forisFormSize forisFormSize

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

@ -92,7 +92,7 @@ function DeviceForm({
return ( return (
<> <>
<Switch <Switch
label={<h2>{_(`Wi-Fi ${deviceID + 1}`)}</h2>} label={<h2 className="mb-0">{_(`Wi-Fi ${deviceID + 1}`)}</h2>}
checked={formData.enabled} checked={formData.enabled}
onChange={setFormValue((value) => ({ onChange={setFormValue((value) => ({
devices: { devices: {
@ -119,12 +119,10 @@ function DeviceForm({
}))} }))}
{...props} {...props}
> >
<div className="input-group-append"> <WiFiQRCode
<WiFiQRCode SSID={formData.SSID}
SSID={formData.SSID} password={formData.password}
password={formData.password} />
/>
</div>
</TextInput> </TextInput>
<PasswordInput <PasswordInput

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

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

6
src/common/WiFiSettings/__tests__/__snapshots__/WiFiSettings.test.js.snap
View File

@ -298,7 +298,7 @@ exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
</div> </div>
</div> </div>
<div <div
class="text-right" class="text-end"
> >
<button <button
class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center" 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. 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> </p>
<div <div
class="text-right" class="text-end"
> >
<button <button
class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center" 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 <div
@@ -551,10 +633,11 @@ @@ -551,10 +633,11 @@
<div <div
class=\\"text-right\\" class=\\"text-end\\"
> >
<button <button
class=\\"btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center\\" class=\\"btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center\\"

4
src/form/__tests__/__snapshots__/SubmitButton.test.js.snap
View File

@ -9,7 +9,7 @@ exports[`<SubmitButton/> Render load 1`] = `
> >
<span <span
aria-hidden="true" aria-hidden="true"
class="spinner-border spinner-border-sm mr-1" class="spinner-border spinner-border-sm me-1"
role="status" role="status"
/> />
<span> <span>
@ -41,7 +41,7 @@ exports[`<SubmitButton/> Render saving 1`] = `
> >
<span <span
aria-hidden="true" aria-hidden="true"
class="spinner-border spinner-border-sm mr-1" class="spinner-border spinner-border-sm me-1"
role="status" role="status"
/> />
<span> <span>

2
src/form/components/ForisForm.js
View File

@ -190,7 +190,7 @@ export function ForisForm({
<Prompt message={getMessageOnLeavingPage} /> <Prompt message={getMessageOnLeavingPage} />
<form onSubmit={onSubmit} ref={formReference}> <form onSubmit={onSubmit} ref={formReference}>
{childrenWithFormProps} {childrenWithFormProps}
<div className="text-right"> <div className="text-end">
<SubmitButton <SubmitButton
state={getSubmitButtonState()} state={getSubmitButtonState()}
disabled={submitButtonIsDisabled} disabled={submitButtonIsDisabled}

2
src/index.js
View File

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

24
src/utils/hooks.js
View File

@ -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. * This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information. * 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. */ /** Execute callback when condition is set to true. */
export function useConditionalTimeout( 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;
}