@draftbit/core 43.4.4-03ab3e.0 → 43.4.5-312b1d.1

package/src/components/RadioButton/RadioButtonRow.tsx

@@ -13,7 +13,7 @@ import { useRadioButtonGroupContext } from "./context";
 import type { IconSlot } from "../../interfaces/Icon";
 import { Direction as GroupDirection } from "./context";
 import Touchable from "../Touchable";
-import { extractStyles } from "../../utilities";
+import { extractStyles, getValueForRadioButton } from "../../utilities";
 
 export enum Direction {
   Row = "row",
@@ -22,7 +22,7 @@ export enum Direction {
 
 export interface RadioButtonRowProps extends Omit<RadioButtonProps, "onPress"> {
   label: string | React.ReactNode;
-  value: string; // A string that this radio button row represents when selected
+  value: string | number; // A string (or number that will be parsed String(number)) that this radio button row represents when selected
   color?: string;
   unselectedColor?: string;
   labelContainerStyle: StyleProp<ViewStyle>;
@@ -46,14 +46,14 @@ const getRadioButtonAlignment = (
 };
 
 const renderLabel = (
-  value: string | React.ReactNode,
+  label: string | React.ReactNode,
   labelStyle: StyleProp<TextStyle>,
   textStyle: StyleProp<TextStyle>
 ) => {
-  if (typeof value === "string") {
-    return <Text style={[labelStyle, textStyle]}>{value}</Text>;
+  if (typeof label === "string") {
+    return <Text style={[labelStyle, textStyle]}>{label}</Text>;
   } else {
-    return <>{value}</>;
+    return <>{label}</>;
   }
 };
 
@@ -63,7 +63,7 @@ const RadioButtonRow: React.FC<RadioButtonRowProps & IconSlot> = ({
   value,
   color,
   unselectedColor,
-  onPress = () => {},
+  onPress,
   labelContainerStyle,
   labelStyle,
   radioButtonStyle,
@@ -79,9 +79,17 @@ const RadioButtonRow: React.FC<RadioButtonRowProps & IconSlot> = ({
     direction: parentDirection,
   } = useRadioButtonGroupContext();
 
+  const realValue = getValueForRadioButton(value);
+  const realContextValue = getValueForRadioButton(contextValue);
+  const isSelected =
+    selected ??
+    (realContextValue && realValue && realContextValue === realValue);
+
   const handlePress = () => {
-    onPress(value);
-    onValueChange && onValueChange(value);
+    if (realValue) {
+      onPress?.(realValue);
+      onValueChange?.(realValue);
+    }
   };
 
   const { textStyles, viewStyles } = extractStyles(style);
@@ -112,12 +120,10 @@ const RadioButtonRow: React.FC<RadioButtonRowProps & IconSlot> = ({
       >
         <RadioButton
           Icon={Icon}
-          selected={
-            selected || (contextValue != null && contextValue === value)
-          }
+          selected={isSelected ? true : false}
+          value={realValue}
           color={color}
           unselectedColor={unselectedColor}
-          onPress={handlePress}
           style={radioButtonStyle}
         />
       </View>

package/src/mappings/LinearGradient.js

@@ -67,11 +67,11 @@ export const SEED_DATA = {
         }),
         color2: createColorProp({
             label: "Color 2",
-            defaultValue: "rgba(251, 252, 253, 1)",
+            defaultValue: "secondary",
         }),
         color1: createColorProp({
             label: "Color 1",
-            defaultValue: "rgba(90, 69, 255, 1)",
+            defaultValue: "primary",
         }),
     },
 };

package/src/mappings/LinearGradient.ts

@@ -73,11 +73,11 @@ export const SEED_DATA = {
     }),
     color2: createColorProp({
       label: "Color 2",
-      defaultValue: "rgba(251, 252, 253, 1)",
+      defaultValue: "secondary",
     }),
     color1: createColorProp({
       label: "Color 1",
-      defaultValue: "rgba(90, 69, 255, 1)",
+      defaultValue: "primary",
     }),
   },
 };

package/src/utilities.js

@@ -1,4 +1,5 @@
 import { StyleSheet } from "react-native";
+import { isString, isNumber } from "lodash";
 export function extractStyles(style) {
     const { color, fontFamily, fontWeight, fontSize, lineHeight, letterSpacing, textTransform, textAlign, textDecorationLine, textDecorationColor, textDecorationStyle, ...viewStyles } = StyleSheet.flatten(style || {});
     const textStyles = {
@@ -40,3 +41,17 @@ export function applyStyles(baseStyles, stylesToApply) {
     }
     return flattenedStyles;
 }
+export function getValueForRadioButton(value) {
+    if (isString(value)) {
+        return value;
+    }
+    else if (isNumber(value)) {
+        return String(value);
+    }
+    else if (value === undefined) {
+        return undefined;
+    }
+    else {
+        throw new Error(`Invalid value: ${value}`);
+    }
+}

package/src/utilities.ts

@@ -1,4 +1,5 @@
 import { StyleSheet, StyleProp, TextStyle } from "react-native";
+import { isString, isNumber } from "lodash";
 
 export function extractStyles(style: StyleProp<any>) {
   const {
@@ -63,3 +64,15 @@ export function applyStyles(
 
   return flattenedStyles;
 }
+
+export function getValueForRadioButton(value?: string | number) {
+  if (isString(value)) {
+    return value;
+  } else if (isNumber(value)) {
+    return String(value);
+  } else if (value === undefined) {
+    return undefined;
+  } else {
+    throw new Error(`Invalid value: ${value}`);
+  }
+}