mirror of
				https://gitlab.nic.cz/turris/reforis/foris-js.git
				synced 2025-11-03 23:00:31 +01:00 
			
		
		
		
	Add "inline" option to RadioSet
This commit is contained in:
		@@ -1,5 +1,5 @@
 | 
				
			|||||||
/*
 | 
					/*
 | 
				
			||||||
 * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
 | 
					 * Copyright (C) 2020 CZ.NIC z.s.p.o. (http://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.
 | 
				
			||||||
@@ -33,9 +33,18 @@ RadioSet.propTypes = {
 | 
				
			|||||||
    value: PropTypes.string,
 | 
					    value: PropTypes.string,
 | 
				
			||||||
    /** Help text message . */
 | 
					    /** Help text message . */
 | 
				
			||||||
    helpText: PropTypes.string,
 | 
					    helpText: PropTypes.string,
 | 
				
			||||||
 | 
					    inline: PropTypes.bool,
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export function RadioSet({ name, label, choices, value, helpText, ...props }) {
 | 
					export function RadioSet({
 | 
				
			||||||
 | 
					    name,
 | 
				
			||||||
 | 
					    label,
 | 
				
			||||||
 | 
					    choices,
 | 
				
			||||||
 | 
					    value,
 | 
				
			||||||
 | 
					    helpText,
 | 
				
			||||||
 | 
					    inline,
 | 
				
			||||||
 | 
					    ...props
 | 
				
			||||||
 | 
					}) {
 | 
				
			||||||
    const uid = useUID();
 | 
					    const uid = useUID();
 | 
				
			||||||
    const radios = choices.map((choice, key) => {
 | 
					    const radios = choices.map((choice, key) => {
 | 
				
			||||||
        const id = `${name}-${key}`;
 | 
					        const id = `${name}-${key}`;
 | 
				
			||||||
@@ -48,6 +57,7 @@ export function RadioSet({ name, label, choices, value, helpText, ...props }) {
 | 
				
			|||||||
                value={choice.value}
 | 
					                value={choice.value}
 | 
				
			||||||
                helpText={choice.helpText}
 | 
					                helpText={choice.helpText}
 | 
				
			||||||
                checked={choice.value === value}
 | 
					                checked={choice.value === value}
 | 
				
			||||||
 | 
					                inline={inline}
 | 
				
			||||||
                {...props}
 | 
					                {...props}
 | 
				
			||||||
            />
 | 
					            />
 | 
				
			||||||
        );
 | 
					        );
 | 
				
			||||||
@@ -76,15 +86,16 @@ Radio.propTypes = {
 | 
				
			|||||||
        PropTypes.arrayOf(PropTypes.node),
 | 
					        PropTypes.arrayOf(PropTypes.node),
 | 
				
			||||||
    ]).isRequired,
 | 
					    ]).isRequired,
 | 
				
			||||||
    id: PropTypes.string.isRequired,
 | 
					    id: PropTypes.string.isRequired,
 | 
				
			||||||
 | 
					    inline: PropTypes.bool,
 | 
				
			||||||
    helpText: PropTypes.string,
 | 
					    helpText: PropTypes.string,
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export function Radio({ label, id, helpText, ...props }) {
 | 
					export function Radio({ label, id, helpText, inline, ...props }) {
 | 
				
			||||||
    return (
 | 
					    return (
 | 
				
			||||||
        <>
 | 
					        <>
 | 
				
			||||||
            <div
 | 
					            <div
 | 
				
			||||||
                className={`custom-control custom-radio ${
 | 
					                className={`custom-control custom-radio ${
 | 
				
			||||||
                    !helpText ? "custom-control-inline" : ""
 | 
					                    inline ? "custom-control-inline" : ""
 | 
				
			||||||
                }`.trim()}
 | 
					                }`.trim()}
 | 
				
			||||||
            >
 | 
					            >
 | 
				
			||||||
                <input
 | 
					                <input
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -23,7 +23,7 @@ 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 custom-switch">
 | 
					        <div className="form-group switch">
 | 
				
			||||||
            <div
 | 
					            <div
 | 
				
			||||||
                className={`custom-control custom-switch ${
 | 
					                className={`custom-control custom-switch ${
 | 
				
			||||||
                    !helpText ? "custom-control-inline" : ""
 | 
					                    !helpText ? "custom-control-inline" : ""
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user