1
0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2024-12-25 00:11:36 +01:00

docs: Refactor RadioSet & ignore Radio component

This commit is contained in:
Aleksandr Gumroian 2024-09-27 14:43:39 +02:00
parent b6e1e0adae
commit 1ab77decfd
No known key found for this signature in database
GPG Key ID: 9E77849C64F0A733
4 changed files with 53 additions and 38 deletions

48
src/bootstrap/Radio.js Normal file
View File

@ -0,0 +1,48 @@
/*
* Copyright (C) 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 React from "react";
import PropTypes from "prop-types";
Radio.propTypes = {
label: PropTypes.oneOfType([
PropTypes.string,
PropTypes.element,
PropTypes.node,
PropTypes.arrayOf(PropTypes.node),
]).isRequired,
id: PropTypes.string.isRequired,
inline: PropTypes.bool,
helpText: PropTypes.string,
className: PropTypes.string,
};
function Radio({ label, id, helpText, inline, className, ...props }) {
return (
<div
className={`${className || "mb-3"} ${inline ? "form-check form-check-inline" : ""}`.trim()}
>
<input
id={id}
className="form-check-input me-2"
type="radio"
{...props}
/>
<label className="form-check-label" htmlFor={id}>
{label}
{helpText && (
<div className="form-text">
<small>{helpText}</small>
</div>
)}
</label>
</div>
);
}
export default Radio;

View File

@ -10,6 +10,8 @@ import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { useUID } from "react-uid"; import { useUID } from "react-uid";
import Radio from "./Radio";
RadioSet.propTypes = { RadioSet.propTypes = {
/** Name attribute of the input HTML tag. */ /** Name attribute of the input HTML tag. */
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,
@ -73,40 +75,4 @@ function RadioSet({ name, label, choices, value, helpText, inline, ...props }) {
); );
} }
Radio.propTypes = {
label: PropTypes.oneOfType([
PropTypes.string,
PropTypes.element,
PropTypes.node,
PropTypes.arrayOf(PropTypes.node),
]).isRequired,
id: PropTypes.string.isRequired,
inline: PropTypes.bool,
helpText: PropTypes.string,
className: PropTypes.string,
};
export function Radio({ label, id, helpText, inline, className, ...props }) {
return (
<div
className={`${className || "mb-3"} ${inline ? "form-check form-check-inline" : ""}`.trim()}
>
<input
id={id}
className="form-check-input me-2"
type="radio"
{...props}
/>
<label className="form-check-label" htmlFor={id}>
{label}
{helpText && (
<div className="form-text">
<small>{helpText}</small>
</div>
)}
</label>
</div>
);
}
export default RadioSet; export default RadioSet;

View File

@ -28,7 +28,8 @@ export { default as FileInput } from "./bootstrap/FileInput";
export { default as Input } from "./bootstrap/Input"; export { default as Input } from "./bootstrap/Input";
export { default as NumberInput } from "./bootstrap/NumberInput"; export { default as NumberInput } from "./bootstrap/NumberInput";
export { default as PasswordInput } from "./bootstrap/PasswordInput"; export { default as PasswordInput } from "./bootstrap/PasswordInput";
export { default as RadioSet, Radio } from "./bootstrap/RadioSet"; export { default as Radio } from "./bootstrap/Radio";
export { default as RadioSet } from "./bootstrap/RadioSet";
export { default as Select } from "./bootstrap/Select"; export { default as Select } from "./bootstrap/Select";
export { default as TextInput } from "./bootstrap/TextInput"; export { default as TextInput } from "./bootstrap/TextInput";
export { formFieldsSize, buttonFormFieldsSize } from "./bootstrap/constants"; export { formFieldsSize, buttonFormFieldsSize } from "./bootstrap/constants";

View File

@ -65,7 +65,7 @@ module.exports = {
components: "src/bootstrap/*.js", components: "src/bootstrap/*.js",
exampleMode: "expand", exampleMode: "expand",
usageMode: "expand", usageMode: "expand",
ignore: ["src/bootstrap/constants.js"], ignore: ["src/bootstrap/constants.js", "src/bootstrap/Radio.js"],
sectionDepth: 0, sectionDepth: 0,
}, },
], ],