improve RadioButtonGroup with size prop

dzonidoo · Aug 17, 2023 · ae6973a · ae6973a
1 parent 1757b11
commit ae6973a
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 12 deletions.
diff --git a/assets/features/sections/SectionSwitch.tsx b/assets/features/sections/SectionSwitch.tsx
@@ -2,10 +2,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
+import classNames from 'classnames';
 
 import {selectSection} from './actions';
 import {sectionsPropType} from './types';
-import {gettext} from '../../utils';
+import {assertNever, gettext} from '../../utils';
 
 function SectionSwitch({sections, activeSection, selectSection}: any) {
     return (
@@ -24,21 +25,51 @@ interface IProps {
     options: Array<{_id: string, name: string}>;
     switchOptions: (optionId: string) => void;
     activeOptionId: string;
+    size?: 'small' | 'large'; // defaults to large
+    fullWidth?: boolean;
+    gap?: boolean;
+    className?: string;
 }
 
-export const RadioButtonGroup: React.ComponentType<IProps> = ({options, switchOptions, activeOptionId}) => {
+export const RadioButtonGroup: React.ComponentType<IProps> = (props) => {
+    const {options, switchOptions, activeOptionId, fullWidth, gap, className} = props;
+
+    const wrapperClasses = classNames('toggle-button__group toggle-button__group--navbar ms-0 me-3', {
+        'toggle-button__group--spaced': gap,
+        'toggle-button__group--stretch-items': fullWidth,
+        [`${className}`]: className,
+    });
+
+    const size: IProps['size'] = props.size ?? 'large';
+
+    const classList = ['toggle-button'];
+
+    if (size === 'large') {
+        classList.push('toggle-button--large');
+    } else if (size === 'small') {
+        classList.push('toggle-button--small');
+    } else {
+        assertNever(size);
+    }
+
     return (
-        <div className="toggle-button__group toggle-button__group--navbar ms-0 me-3">
+        <div className={wrapperClasses}>
             {
-                options.map((section: any) => (
-                    <button
-                        key={section._id}
-                        className={'toggle-button' + (section._id === activeOptionId ? ' toggle-button--active' : '')}
-                        onClick={() => switchOptions(section._id)}
-                    >
-                        {gettext(section.name)}
-                    </button>
-                ))
+                options.map((section: any) => {
+                    const buttonClasses = classNames(classList, {
+                        'toggle-button--active': section._id === activeOptionId,
+                    });
+
+                    return (
+                        <button
+                            key={section._id}
+                            className={buttonClasses}
+                            onClick={() => switchOptions(section._id)}
+                        >
+                            {gettext(section.name)}
+                        </button>
+                    );
+                })
             }
         </div>
     );

diff --git a/assets/utils.tsx b/assets/utils.tsx
@@ -77,6 +77,10 @@ export const KEYCODES = {
     DOWN: 40,
 };
 
+export function assertNever(x: never): never {
+    throw new Error('Unexpected object: ' + x);
+}
+
 /**
  * Create redux store with default middleware
  *