@draftbit/core 43.4.4 → 43.4.5-958f08.1

package/lib/typescript/src/utilities.d.ts

@@ -16,3 +16,4 @@ export declare function extractStyles(style: StyleProp<any>): {
  * `const mergedStyles = StyleSheet.flatten([{ color: "red" }, { color: undefined }])`
  */
 export declare function applyStyles(baseStyles: Array<StyleProp<any>>, stylesToApply: StyleProp<any> | undefined): any;
+export declare function getRealValue(value: any): string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "43.4.4",
+  "version": "43.4.5-958f08.1+958f0845",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -80,5 +80,5 @@
       ]
     ]
   },
-  "gitHead": "39c758981f54b268cc4c58202f077287c99a2e91"
+  "gitHead": "958f08459dc0f48d20fb89fa7b9607837796c151"
 }

package/src/components/RadioButton/RadioButton.js

@@ -1,16 +1,20 @@
 import * as React from "react";
 import Config from "../Config";
 import IconButton from "../IconButton";
+import { getRealValue } from "../../utilities";
 import { useRadioButtonGroupContext } from "./context";
-const RadioButton = ({ Icon, disabled = false, color, value, selected, unselectedColor, onPress = () => { }, size = Config.radioButtonSize, selectedIcon = "MaterialIcons/radio-button-checked", unselectedIcon = "MaterialIcons/radio-button-unchecked", style, ...rest }) => {
+const RadioButton = ({ Icon, disabled = false, color, value, selected, unselectedColor, onPress, size = Config.radioButtonSize, selectedIcon = "MaterialIcons/radio-button-checked", unselectedIcon = "MaterialIcons/radio-button-unchecked", style, ...rest }) => {
     const { value: contextValue, onValueChange } = useRadioButtonGroupContext();
+    const realValue = getRealValue(value);
+    const realContextValue = getRealValue(contextValue);
+    const isSelected = selected ??
+        (realContextValue && realValue && realContextValue === realValue);
     const handlePress = () => {
-        onPress && onPress();
-        if (onValueChange && value) {
-            onValueChange(value);
+        if (realValue) {
+            onPress?.(realValue);
+            onValueChange?.(realValue);
         }
     };
-    const isSelected = selected || (contextValue != null && contextValue === value);
     return (React.createElement(IconButton, { Icon: Icon, icon: isSelected ? selectedIcon : unselectedIcon, color: isSelected ? color : unselectedColor, disabled: disabled, onPress: handlePress, size: size, style: style, ...rest }));
 };
 export default RadioButton;

package/src/components/RadioButton/RadioButton.tsx

@@ -3,6 +3,7 @@ import { StyleProp, ViewStyle } from "react-native";
 
 import Config from "../Config";
 import IconButton from "../IconButton";
+import { getRealValue } from "../../utilities";
 import { useRadioButtonGroupContext } from "./context";
 
 import type { IconSlot } from "../../interfaces/Icon";
@@ -13,7 +14,7 @@ export type RadioButtonProps = {
   color?: string;
   value?: string;
   unselectedColor?: string;
-  onPress?: () => void;
+  onPress?: (value: string) => void;
   style?: StyleProp<ViewStyle>;
   size?: number;
   selectedIcon?: string;
@@ -27,7 +28,7 @@ const RadioButton: React.FC<RadioButtonProps> = ({
   value,
   selected,
   unselectedColor,
-  onPress = () => {},
+  onPress,
   size = Config.radioButtonSize,
   selectedIcon = "MaterialIcons/radio-button-checked",
   unselectedIcon = "MaterialIcons/radio-button-unchecked",
@@ -36,17 +37,19 @@ const RadioButton: React.FC<RadioButtonProps> = ({
 }) => {
   const { value: contextValue, onValueChange } = useRadioButtonGroupContext();
 
-  const handlePress = () => {
-    onPress && onPress();
+  const realValue = getRealValue(value);
+  const realContextValue = getRealValue(contextValue);
+  const isSelected =
+    selected ??
+    (realContextValue && realValue && realContextValue === realValue);
 
-    if (onValueChange && value) {
-      onValueChange(value);
+  const handlePress = () => {
+    if (realValue) {
+      onPress?.(realValue);
+      onValueChange?.(realValue);
     }
   };
 
-  const isSelected =
-    selected || (contextValue != null && contextValue === value);
-
   return (
     <IconButton
       Icon={Icon}

package/src/components/RadioButton/RadioButtonGroup.js

@@ -1,22 +1,28 @@
 import * as React from "react";
 import { View } from "react-native";
+import { getRealValue } from "../../utilities";
 import { radioButtonGroupContext, Direction } from "./context";
 const { Provider } = radioButtonGroupContext;
-const RadioButtonGroup = ({ direction = Direction.Vertical, value, onValueChange = () => { }, defaultValue, style, children, ...rest }) => {
-    const [internalValue, setInternalValue] = React.useState(value || defaultValue);
+const RadioButtonGroup = ({ direction = Direction.Vertical, value, onValueChange, defaultValue, style, children, ...rest }) => {
+    const [internalValue, setInternalValue] = React.useState();
     React.useEffect(() => {
-        if (value != null) {
-            setInternalValue(value);
+        const realValue = getRealValue(value);
+        if (realValue) {
+            setInternalValue(realValue);
         }
     }, [value]);
     React.useEffect(() => {
-        if (defaultValue != null) {
-            setInternalValue(defaultValue);
+        const realDefaultValue = getRealValue(defaultValue);
+        if (realDefaultValue) {
+            setInternalValue(realDefaultValue);
         }
     }, [defaultValue]);
     const handleValueChange = (newValue) => {
-        setInternalValue(newValue);
-        onValueChange(newValue);
+        const realNewValue = getRealValue(newValue);
+        if (realNewValue) {
+            setInternalValue(newValue);
+            onValueChange?.(newValue);
+        }
     };
     const _containerStyle = [
         {

package/src/components/RadioButton/RadioButtonGroup.tsx

@@ -1,13 +1,14 @@
 import * as React from "react";
 import { View, StyleProp, ViewStyle } from "react-native";
 import type { Theme } from "../../styles/DefaultTheme";
+import { getRealValue } from "../../utilities";
 import { radioButtonGroupContext, Direction } from "./context";
 export interface RadioButtonGroupProps {
   direction?: Direction;
   style?: StyleProp<ViewStyle>;
   value?: string;
   onValueChange?: (value: string) => void;
-  defaultValue?: string;
+  defaultValue?: string | number;
   theme: Theme;
   children: React.ReactNode;
 }
@@ -17,31 +18,39 @@ const { Provider } = radioButtonGroupContext;
 const RadioButtonGroup: React.FC<RadioButtonGroupProps> = ({
   direction = Direction.Vertical,
   value,
-  onValueChange = () => {},
+  onValueChange,
   defaultValue,
   style,
   children,
   ...rest
 }) => {
-  const [internalValue, setInternalValue] = React.useState<string | undefined>(
-    value || defaultValue
-  );
+  const [internalValue, setInternalValue] = React.useState<
+    string | undefined
+  >();
 
   React.useEffect(() => {
-    if (value != null) {
-      setInternalValue(value);
+    const realValue = getRealValue(value);
+
+    if (realValue) {
+      setInternalValue(realValue);
     }
   }, [value]);
 
   React.useEffect(() => {
-    if (defaultValue != null) {
-      setInternalValue(defaultValue);
+    const realDefaultValue = getRealValue(defaultValue);
+
+    if (realDefaultValue) {
+      setInternalValue(realDefaultValue);
     }
   }, [defaultValue]);
 
-  const handleValueChange = (newValue: string) => {
-    setInternalValue(newValue);
-    onValueChange(newValue);
+  const handleValueChange = (newValue: any) => {
+    const realNewValue = getRealValue(newValue);
+
+    if (realNewValue) {
+      setInternalValue(newValue);
+      onValueChange?.(newValue);
+    }
   };
 
   const _containerStyle: StyleProp<ViewStyle> = [

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/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;
+  }
+}