#193 Add support for react nodes in segmented control labels

snehilvj · Apr 14, 2024 · 94f2967 · 94f2967
1 parent f481820
commit 94f2967
Showing 1 changed file with 22 additions and 1 deletion.
diff --git a/src/ts/components/core/SegmentedControl.tsx b/src/ts/components/core/SegmentedControl.tsx
@@ -5,6 +5,7 @@ import {
     MantineSize,
     SegmentedControlItem,
 } from "@mantine/core";
+import { renderDashComponent } from "dash-extensions-js";
 import { BoxProps } from "props/box";
 import { DashBaseProps, PersistenceProps } from "props/dash";
 import { StylesApiProps } from "props/styles";
@@ -48,18 +49,38 @@ interface Props
 /** SegmentedControl */
 const SegmentedControl = (props: Props) => {
     const {
+        data,
         setProps,
         persistence,
         persisted_props,
         persistence_type,
         ...others
     } = props;
 
+    const renderedData = [];
+    data.forEach((item, index) => {
+        if (typeof item === "string") {
+            renderedData.push(item);
+        } else {
+            const rItem = {
+                value: item["value"],
+                label: renderDashComponent(item["label"]),
+            };
+            renderedData.push(rItem);
+        }
+    });
+
     const onChange = (value: string) => {
         setProps({ value });
     };
 
-    return <MantineSegmentedControl onChange={onChange} {...others} />;
+    return (
+        <MantineSegmentedControl
+            data={renderedData}
+            onChange={onChange}
+            {...others}
+        />
+    );
 };
 
 SegmentedControl.defaultProps = {