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

package/src/components/RadioButton/RadioButtonRow.js

@@ -5,7 +5,7 @@ import Text from "../Text";
 import { useRadioButtonGroupContext } from "./context";
 import { Direction as GroupDirection } from "./context";
 import Touchable from "../Touchable";
-import { extractStyles } from "../../utilities";
+import { extractStyles, getRealValue } from "../../utilities";
 export var Direction;
 (function (Direction) {
     Direction["Row"] = "row";
@@ -22,19 +22,25 @@ const getRadioButtonAlignment = (parentDirection, direction) => {
         return "flex-end";
     }
 };
-const renderLabel = (value, labelStyle, textStyle) => {
-    if (typeof value === "string") {
-        return React.createElement(Text, { style: [labelStyle, textStyle] }, value);
+const renderLabel = (label, labelStyle, textStyle) => {
+    if (typeof label === "string") {
+        return React.createElement(Text, { style: [labelStyle, textStyle] }, label);
     }
     else {
-        return React.createElement(React.Fragment, null, value);
+        return React.createElement(React.Fragment, null, label);
     }
 };
-const RadioButtonRow = ({ Icon, label, value, color, unselectedColor, onPress = () => { }, labelContainerStyle, labelStyle, radioButtonStyle, direction = Direction.Row, selected, disabled, style, ...rest }) => {
+const RadioButtonRow = ({ Icon, label, value, color, unselectedColor, onPress, labelContainerStyle, labelStyle, radioButtonStyle, direction = Direction.Row, selected, disabled, style, ...rest }) => {
     const { value: contextValue, onValueChange, direction: parentDirection, } = useRadioButtonGroupContext();
+    const realValue = getRealValue(value);
+    const realContextValue = getRealValue(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);
     return (React.createElement(Touchable, { onPress: handlePress, style: [styles.mainParent, { flexDirection: direction }, viewStyles], disabled: disabled, ...rest },
@@ -49,7 +55,7 @@ const RadioButtonRow = ({ Icon, label, value, color, unselectedColor, onPress =
                 flex: 1,
                 alignItems: getRadioButtonAlignment(parentDirection, direction),
             } },
-            React.createElement(RadioButton, { Icon: Icon, selected: selected || (contextValue != null && contextValue === value), color: color, unselectedColor: unselectedColor, onPress: handlePress, style: radioButtonStyle }))));
+            React.createElement(RadioButton, { Icon: Icon, selected: isSelected ? true : false, value: realValue, color: color, unselectedColor: unselectedColor, style: radioButtonStyle }))));
 };
 const styles = StyleSheet.create({
     mainParent: {

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, getRealValue } 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; // 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 = getRealValue(value);
+  const realContextValue = getRealValue(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

@@ -40,3 +40,15 @@ export function applyStyles(baseStyles, stylesToApply) {
     }
     return flattenedStyles;
 }
+export function getRealValue(value) {
+    // console.log("getRealValue typeof", typeof value);
+    // console.log("getRealValue value", value);
+    switch (typeof value) {
+        case "string":
+            return value;
+        case "number":
+            return String(value);
+        default:
+            return undefined;
+    }
+}

package/src/utilities.ts

@@ -63,3 +63,16 @@ export function applyStyles(
 
   return flattenedStyles;
 }
+
+export function getRealValue(value: any) {
+  // console.log("getRealValue typeof", typeof value);
+  // console.log("getRealValue value", value);
+  switch (typeof value) {
+    case "string":
+      return value;
+    case "number":
+      return String(value);
+    default:
+      return undefined;
+  }
+}