GGLinnk/foris-js
1
0
Fork 0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2025-07-31 19:53:28 +02: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
22 changed files with 190 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/bootstrap/Alert.js
View File

@@ -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}>
&times;
</button>
) : (
false
{onDismiss && (
<button
type="button"
className="btn-close"
onClick={onDismiss}
aria-label={_("Close")}
/>
)}
{children}
</div>

4
src/bootstrap/Button.js
View File

@@ -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"
/>

35
src/bootstrap/CheckBox.js
View File

@@ -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>
);
}

21
src/bootstrap/Input.js
View File

@@ -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>
);
}

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>
);
}

26
src/bootstrap/RadioSet.js
View File

@@ -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>
</>
);

16
src/bootstrap/Select.js
View File

@@ -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>
);
}

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,
};

44
src/bootstrap/Switch.js
View File

@@ -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>
);
}

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

@@ -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>