rnnovaui 0.8.7 → 0.8.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rnnovaui",
-  "version": "0.8.7",
+  "version": "0.8.9",
   "description": "",
   "main": "src/index.js",
   "react-native": "src/index.js",

package/src/components/RadioGroup/UIRadioGroup.js

@@ -38,8 +38,6 @@ const UIRadioGroupComponent = forwardRef(function UIRadioGroup(
 
     onChange,
 
-    name,
-
     label,
     helperText,
     errorText,
@@ -55,7 +53,6 @@ const UIRadioGroupComponent = forwardRef(function UIRadioGroup(
     size = "md",
 
     gap = 12,
-    optionGap,
 
     style,
     labelStyle,
@@ -78,9 +75,8 @@ const UIRadioGroupComponent = forwardRef(function UIRadioGroup(
 
   const selectedValue = isControlled ? value : internalValue;
 
-  const resolvedOrientation = RADIO_GROUP_ORIENTATIONS[orientation]
-    ? orientation
-    : "vertical";
+  const resolvedOrientation =
+    orientation === "horizontal" ? "horizontal" : "vertical";
 
   const resolvedSize = RADIO_GROUP_SIZES[size] ? size : "md";
 
@@ -103,7 +99,7 @@ const UIRadioGroupComponent = forwardRef(function UIRadioGroup(
 
   const contextValue = useMemo(
     () => ({
-      value: selectedValue,
+      selectedValue,
 
       onChange: handleChange,
 
@@ -122,8 +118,10 @@ const UIRadioGroupComponent = forwardRef(function UIRadioGroup(
         {...props}
         ref={ref}
         testID={testID}
-        style={[styles.wrapper, style]}
+        style={[styles.container, style]}
       >
+        {/* GROUP LABEL */}
+
         {label ? (
           <Text
             style={[
@@ -138,7 +136,7 @@ const UIRadioGroupComponent = forwardRef(function UIRadioGroup(
               labelStyle,
             ]}
           >
-            {label}
+            {String(label)}
 
             {required ? (
               <Text
@@ -152,6 +150,8 @@ const UIRadioGroupComponent = forwardRef(function UIRadioGroup(
           </Text>
         ) : null}
 
+        {/* RADIO OPTIONS */}
+
         <View
           style={[
             styles.options,
@@ -161,13 +161,23 @@ const UIRadioGroupComponent = forwardRef(function UIRadioGroup(
               : styles.vertical,
 
             {
-              gap: optionGap ?? gap,
+              columnGap: gap,
+
+              rowGap: gap,
             },
           ]}
         >
-          {children}
+          {React.Children.map(children, (child) => {
+            if (!React.isValidElement(child)) {
+              return null;
+            }
+
+            return child;
+          })}
         </View>
 
+        {/* ERROR / HELPER */}
+
         {hasError ? (
           <Text
             style={[
@@ -180,7 +190,7 @@ const UIRadioGroupComponent = forwardRef(function UIRadioGroup(
               errorStyle,
             ]}
           >
-            {errorText}
+            {String(errorText)}
           </Text>
         ) : helperText ? (
           <Text
@@ -194,7 +204,7 @@ const UIRadioGroupComponent = forwardRef(function UIRadioGroup(
               helperStyle,
             ]}
           >
-            {helperText}
+            {String(helperText)}
           </Text>
         ) : null}
       </View>
@@ -208,8 +218,10 @@ const UIRadioGroupComponent = forwardRef(function UIRadioGroup(
 
 const UIRadioOptionComponent = function UIRadioOptionComponent({
   value,
+
   label = "",
-  description,
+
+  description = "",
 
   disabled = false,
 
@@ -232,16 +244,16 @@ const UIRadioOptionComponent = function UIRadioOptionComponent({
   }
 
   const {
-    value: selectedValue,
+    selectedValue,
     onChange,
     disabled: groupDisabled,
     size,
     error,
   } = context;
 
-  const checked = selectedValue === value;
+  const selected = selectedValue === value;
 
-  const isDisabled = groupDisabled || disabled;
+  const isDisabled = Boolean(groupDisabled || disabled);
 
   const radioSize = getRadioSize(size);
 
@@ -256,112 +268,116 @@ const UIRadioOptionComponent = function UIRadioOptionComponent({
   }, [isDisabled, onChange, value, onPress]);
 
   return (
-    <View style={[styles.optionWrapper, style]}>
-      <Pressable
-        {...props}
-        onPress={handlePress}
-        disabled={isDisabled}
-        accessibilityRole="radio"
-        accessibilityState={{
-          checked,
-          disabled: isDisabled,
-        }}
-        style={({ pressed }) => [
-          styles.optionPressable,
+    <Pressable
+      {...props}
+      onPress={handlePress}
+      disabled={isDisabled}
+      accessibilityRole="radio"
+      accessibilityState={{
+        checked: selected,
+
+        disabled: isDisabled,
+      }}
+      style={({ pressed }) => [
+        styles.option,
+
+        {
+          opacity: isDisabled ? 0.5 : pressed ? 0.7 : 1,
+        },
+
+        style,
+      ]}
+    >
+      {/* RADIO CIRCLE */}
+
+      <View
+        style={[
+          styles.radio,
 
           {
-            opacity: isDisabled ? 0.5 : pressed ? 0.7 : 1,
+            width: radioSize.outer,
+
+            height: radioSize.outer,
+
+            borderRadius: radioSize.outer / 2,
+
+            borderWidth: selected ? 2 : 1.5,
+
+            borderColor: error
+              ? colors.danger || "#DC2626"
+              : selected
+                ? colors.primary || "#FF5A1F"
+                : colors.borderStrong || "#D4D4D4",
           },
         ]}
       >
-        {/* RADIO CIRCLE */}
-        <View
-          style={[
-            styles.radio,
+        {selected ? (
+          <View
+            style={[
+              styles.radioDot,
 
-            {
-              width: radioSize.outer,
+              {
+                width: radioSize.inner,
 
-              height: radioSize.outer,
+                height: radioSize.inner,
 
-              borderRadius: radioSize.outer / 2,
+                borderRadius: radioSize.inner / 2,
 
-              borderColor: error
-                ? colors.danger || "#DC2626"
-                : checked
-                  ? colors.primary || "#FF5A1F"
-                  : colors.borderStrong || "#D4D4D4",
+                backgroundColor: error
+                  ? colors.danger || "#DC2626"
+                  : colors.primary || "#FF5A1F",
+              },
+            ]}
+          />
+        ) : null}
+      </View>
 
-              borderWidth: checked ? 2 : 1.5,
-            },
-          ]}
-        >
-          {checked ? (
-            <View
-              style={[
-                styles.radioDot,
+      {/* LABEL */}
 
-                {
-                  width: radioSize.inner,
+      <View style={styles.content}>
+        {label !== "" ? (
+          <Text
+            style={[
+              styles.optionLabel,
 
-                  height: radioSize.inner,
+              {
+                color: isDisabled
+                  ? colors.textDisabled || "#A3A3A3"
+                  : colors.text || "#111111",
 
-                  borderRadius: radioSize.inner / 2,
+                fontSize: radioSize.fontSize,
 
-                  backgroundColor: error
-                    ? colors.danger || "#DC2626"
-                    : colors.primary || "#FF5A1F",
-                },
-              ]}
-            />
-          ) : null}
-        </View>
+                lineHeight: radioSize.lineHeight,
+              },
 
-        {/* TEXT AREA */}
-        <View style={styles.textContainer}>
-          {label !== "" ? (
-            <Text
-              numberOfLines={0}
-              style={[
-                styles.optionLabel,
-
-                {
-                  color: isDisabled
-                    ? colors.textDisabled || "#A3A3A3"
-                    : colors.text || "#111111",
-
-                  fontSize: radioSize.fontSize,
-
-                  lineHeight: radioSize.lineHeight,
-                },
-
-                labelStyle,
-              ]}
-            >
-              {String(label)}
-            </Text>
-          ) : null}
-
-          {description ? (
-            <Text
-              style={[
-                styles.description,
-
-                {
-                  color: isDisabled
-                    ? colors.textDisabled || "#A3A3A3"
-                    : colors.textSecondary || "#525252",
-                },
-
-                descriptionStyle,
-              ]}
-            >
-              {String(description)}
-            </Text>
-          ) : null}
-        </View>
-      </Pressable>
-    </View>
+              labelStyle,
+            ]}
+          >
+            {String(label)}
+          </Text>
+        ) : null}
+
+        {description !== "" &&
+        description !== null &&
+        description !== undefined ? (
+          <Text
+            style={[
+              styles.description,
+
+              {
+                color: isDisabled
+                  ? colors.textDisabled || "#A3A3A3"
+                  : colors.textSecondary || "#525252",
+              },
+
+              descriptionStyle,
+            ]}
+          >
+            {String(description)}
+          </Text>
+        ) : null}
+      </View>
+    </Pressable>
   );
 };
 
@@ -390,7 +406,7 @@ function getRadioSize(size) {
     case "md":
     default:
       return {
-        outer: 21,
+        outer: 20,
         inner: 9,
         fontSize: 14,
         lineHeight: 20,
@@ -403,12 +419,12 @@ function getRadioSize(size) {
 ========================================================= */
 
 const styles = StyleSheet.create({
-  wrapper: {
+  container: {
     width: "100%",
   },
 
   groupLabel: {
-    marginBottom: 10,
+    marginBottom: 12,
 
     fontSize: 14,
 
@@ -421,10 +437,18 @@ const styles = StyleSheet.create({
 
   options: {
     width: "100%",
+
+    flexDirection: "row",
+
+    flexWrap: "wrap",
+
+    alignItems: "flex-start",
   },
 
   vertical: {
     flexDirection: "column",
+
+    alignItems: "stretch",
   },
 
   horizontal: {
@@ -432,21 +456,29 @@ const styles = StyleSheet.create({
 
     flexWrap: "wrap",
 
-    alignItems: "flex-start",
+    alignItems: "center",
   },
 
-  optionWrapper: {
-    width: "100%",
-  },
+  /*
+   * IMPORTANT:
+   *
+   * The option does NOT have
+   * width: "100%".
+   *
+   * Therefore horizontal options
+   * use only the width they need.
+   */
+
+  option: {
+    flexDirection: "row",
 
-  optionPressable: {
-    width: "100%",
+    alignItems: "center",
 
-    minHeight: 34,
+    flexShrink: 0,
 
-    flexDirection: "row",
+    flexGrow: 0,
 
-    alignItems: "flex-start",
+    minHeight: 32,
   },
 
   radio: {
@@ -455,26 +487,24 @@ const styles = StyleSheet.create({
     alignItems: "center",
 
     justifyContent: "center",
-
-    marginTop: 1,
   },
 
   radioDot: {},
 
-  textContainer: {
-    flex: 1,
-
-    minWidth: 0,
+  content: {
+    flexShrink: 0,
 
-    marginLeft: 10,
+    flexGrow: 0,
 
-    paddingRight: 4,
+    marginLeft: 8,
   },
 
   optionLabel: {
     fontWeight: "500",
 
     includeFontPadding: false,
+
+    flexShrink: 0,
   },
 
   description: {