mirror of
https://gitlab.nic.cz/turris/reforis/foris-js.git
synced 2024-12-24 00:01:36 +01:00
Update Bootstrap library to version 5.3.x
This commit is contained in:
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/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",
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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
|
||||||
×
|
type="button"
|
||||||
</button>
|
className="btn-close"
|
||||||
) : (
|
onClick={onDismiss}
|
||||||
false
|
aria-label={_("Close")}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -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"
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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">×</span>
|
/>
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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,
|
||||||
};
|
};
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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\\"
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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";
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user