Implement RadioItems and condense types

Author: KoolADE85

components/dash-core-components/src/components/RadioItems.react.js

@@ -0,0 +1,69 @@
+import React, {useMemo} from 'react';
+import {RadioItemsProps, PersistedProps, PersistenceTypes} from '../types';
+import './css/radioitems.css';
+
+import {sanitizeOptions} from '../utils/optionTypes';
+import LoadingElement from '../utils/_LoadingElement';
+import {OptionsList} from '../utils/optionRendering';
+import {isNil} from 'ramda';
+
+/**
+ * RadioItems is a component that encapsulates several radio item inputs.
+ * The values and labels of the RadioItems is specified in the `options`
+ * property and the seleced item is specified with the `value` property.
+ * Each radio item is rendered as an input with a surrounding label.
+ */
+export default function RadioItems({
+    className,
+    id,
+    style,
+    setProps,
+    value,
+    inputStyle = {},
+    inputClassName = '',
+    labelStyle = {},
+    labelClassName = '',
+    options = [],
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    persisted_props = [PersistedProps.value],
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    persistence_type = PersistenceTypes.local,
+    inline = false,
+}: RadioItemsProps) {
+    const sanitizedOptions = useMemo(() => {
+        return sanitizeOptions(options);
+    }, [options]);
+
+    const stylingProps = {
+        id,
+        className: 'dash-radioitems ' + (className ?? ''),
+        style,
+        optionClassName: inline ? 'dash-radioitems-inline' : undefined,
+        inputStyle,
+        inputClassName,
+        labelStyle,
+        labelClassName,
+    };
+
+    return (
+        <LoadingElement>
+            {loadingProps => (
+                <OptionsList
+                    {...loadingProps}
+                    inputType="radio"
+                    options={sanitizedOptions}
+                    selected={isNil(value) ? [] : [value]}
+                    onSelectionChange={selection => {
+                        setProps({value: selection[selection.length - 1]});
+                    }}
+                    {...stylingProps}
+                />
+            )}
+        </LoadingElement>
+    );
+}
+
+RadioItems.dashPersistence = {
+    persisted_props: [PersistedProps.value],
+    persistence_type: PersistenceTypes.local,
+};

components/dash-core-components/src/components/RadioItems.tsx

@@ -1,4 +1,4 @@
 .dash-options-list-option.dash-checklist-inline {
-    display: inline-block;
+    display: inline-flex;
     margin-right: calc(var(--Dash-Spacing) * 4);
 }

components/dash-core-components/src/components/css/checklist.css

@@ -6,7 +6,6 @@
     display: flex;
     align-items: center;
     user-select: none;
-    overflow: hidden;
 }
 
 .dash-options-list-option:not(:has(input[disabled])):hover,
@@ -22,10 +21,8 @@
 
 .dash-options-list-option-text {
     white-space: pre;
-}
-
-.dash-options-list-option-text > * {
-    vertical-align: middle;
+    display: flex;
+    align-items: center;
 }
 
 .dash-options-list-option-checkbox {

components/dash-core-components/src/components/css/optionslist.css

@@ -0,0 +1,4 @@
+.dash-options-list-option.dash-radioitems-inline {
+    display: inline-flex;
+    margin-right: calc(var(--Dash-Spacing) * 4);
+}

components/dash-core-components/src/components/css/radioitems.css

@@ -15,7 +15,7 @@ import Link from './components/Link.react';
 import Loading from './components/Loading.react';
 import Location from './components/Location.react';
 import Markdown from './components/Markdown.react';
-import RadioItems from './components/RadioItems.react';
+import RadioItems from './components/RadioItems';
 import RangeSlider from './components/RangeSlider';
 import Slider from './components/Slider';
 import Store from './components/Store.react';