@draftbit/core 43.4.5-312b1d.1 → 43.4.5-4e19aa.1

package/src/components/RadioButton/RadioButton.tsx

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

package/src/components/RadioButton/RadioButtonGroup.js

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

package/src/components/RadioButton/RadioButtonGroup.tsx

@@ -1,14 +1,13 @@
 import * as React from "react";
 import { View, StyleProp, ViewStyle } from "react-native";
 import type { Theme } from "../../styles/DefaultTheme";
-import { getValueForRadioButton } from "../../utilities";
 import { radioButtonGroupContext, Direction } from "./context";
 export interface RadioButtonGroupProps {
   direction?: Direction;
   style?: StyleProp<ViewStyle>;
   value?: string;
   onValueChange?: (value: string) => void;
-  defaultValue?: string | number;
+  defaultValue?: string;
   theme: Theme;
   children: React.ReactNode;
 }
@@ -18,39 +17,31 @@ 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
-  >();
+  const [internalValue, setInternalValue] = React.useState<string | undefined>(
+    value || defaultValue
+  );
 
   React.useEffect(() => {
-    const realValue = getValueForRadioButton(value);
-
-    if (realValue) {
-      setInternalValue(realValue);
+    if (value != null) {
+      setInternalValue(value);
     }
   }, [value]);
 
   React.useEffect(() => {
-    const realDefaultValue = getValueForRadioButton(defaultValue);
-
-    if (realDefaultValue) {
-      setInternalValue(realDefaultValue);
+    if (defaultValue != null) {
+      setInternalValue(defaultValue);
     }
   }, [defaultValue]);
 
-  const handleValueChange = (newValue?: string | number) => {
-    const realNewValue = getValueForRadioButton(newValue);
-
-    if (realNewValue) {
-      setInternalValue(realNewValue);
-      onValueChange?.(realNewValue);
-    }
+  const handleValueChange = (newValue: string) => {
+    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, getValueForRadioButton } from "../../utilities";
+import { extractStyles } from "../../utilities";
 export var Direction;
 (function (Direction) {
     Direction["Row"] = "row";
@@ -22,25 +22,19 @@ const getRadioButtonAlignment = (parentDirection, direction) => {
         return "flex-end";
     }
 };
-const renderLabel = (label, labelStyle, textStyle) => {
-    if (typeof label === "string") {
-        return React.createElement(Text, { style: [labelStyle, textStyle] }, label);
+const renderLabel = (value, labelStyle, textStyle) => {
+    if (typeof value === "string") {
+        return React.createElement(Text, { style: [labelStyle, textStyle] }, value);
     }
     else {
-        return React.createElement(React.Fragment, null, label);
+        return React.createElement(React.Fragment, null, value);
     }
 };
-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 = getValueForRadioButton(value);
-    const realContextValue = getValueForRadioButton(contextValue);
-    const isSelected = selected ??
-        (realContextValue && realValue && realContextValue === realValue);
     const handlePress = () => {
-        if (realValue) {
-            onPress?.(realValue);
-            onValueChange?.(realValue);
-        }
+        onPress(value);
+        onValueChange && onValueChange(value);
     };
     const { textStyles, viewStyles } = extractStyles(style);
     return (React.createElement(Touchable, { onPress: handlePress, style: [styles.mainParent, { flexDirection: direction }, viewStyles], disabled: disabled, ...rest },
@@ -55,7 +49,7 @@ const RadioButtonRow = ({ Icon, label, value, color, unselectedColor, onPress, l
                 flex: 1,
                 alignItems: getRadioButtonAlignment(parentDirection, direction),
             } },
-            React.createElement(RadioButton, { Icon: Icon, selected: isSelected ? true : false, value: realValue, color: color, unselectedColor: unselectedColor, style: radioButtonStyle }))));
+            React.createElement(RadioButton, { Icon: Icon, selected: selected || (contextValue != null && contextValue === value), color: color, unselectedColor: unselectedColor, onPress: handlePress, 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, getValueForRadioButton } from "../../utilities";
+import { extractStyles } 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 | number; // A string (or number that will be parsed String(number)) that this radio button row represents when selected
+  value: string; // A string that this radio button row represents when selected
   color?: string;
   unselectedColor?: string;
   labelContainerStyle: StyleProp<ViewStyle>;
@@ -46,14 +46,14 @@ const getRadioButtonAlignment = (
 };
 
 const renderLabel = (
-  label: string | React.ReactNode,
+  value: string | React.ReactNode,
   labelStyle: StyleProp<TextStyle>,
   textStyle: StyleProp<TextStyle>
 ) => {
-  if (typeof label === "string") {
-    return <Text style={[labelStyle, textStyle]}>{label}</Text>;
+  if (typeof value === "string") {
+    return <Text style={[labelStyle, textStyle]}>{value}</Text>;
   } else {
-    return <>{label}</>;
+    return <>{value}</>;
   }
 };
 
@@ -63,7 +63,7 @@ const RadioButtonRow: React.FC<RadioButtonRowProps & IconSlot> = ({
   value,
   color,
   unselectedColor,
-  onPress,
+  onPress = () => {},
   labelContainerStyle,
   labelStyle,
   radioButtonStyle,
@@ -79,17 +79,9 @@ 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 = () => {
-    if (realValue) {
-      onPress?.(realValue);
-      onValueChange?.(realValue);
-    }
+    onPress(value);
+    onValueChange && onValueChange(value);
   };
 
   const { textStyles, viewStyles } = extractStyles(style);
@@ -120,10 +112,12 @@ const RadioButtonRow: React.FC<RadioButtonRowProps & IconSlot> = ({
       >
         <RadioButton
           Icon={Icon}
-          selected={isSelected ? true : false}
-          value={realValue}
+          selected={
+            selected || (contextValue != null && contextValue === value)
+          }
           color={color}
           unselectedColor={unselectedColor}
+          onPress={handlePress}
           style={radioButtonStyle}
         />
       </View>

package/src/components/Table/index.js

@@ -0,0 +1,6 @@
+export { default as Table } from "./table";
+export { default as TableHeader } from "./tableHeader";
+export { default as TablePaginator } from "./tablePaginator";
+export { default as TableRow } from "./tableRow";
+export { default as TableCell } from "./tableCell";
+export { default as TableTitle } from "./tableTitle";

package/src/components/Table/index.tsx

@@ -0,0 +1,6 @@
+export { default as Table } from "./table";
+export { default as TableHeader } from "./tableHeader";
+export { default as TablePaginator } from "./tablePaginator";
+export { default as TableRow } from "./tableRow";
+export { default as TableCell } from "./tableCell";
+export { default as TableTitle } from "./tableTitle";

package/src/components/Table/table.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+const Table = ({ children, style, ...rest }) => (React.createElement(View, { ...rest, style: [styles.wrapper, style] }, children));
+const styles = StyleSheet.create({
+    wrapper: {
+        display: "flex",
+        flexDirection: "column",
+    },
+});
+export default Table;

package/src/components/Table/table.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { View, StyleProp, ViewStyle, StyleSheet } from "react-native";
+
+export interface TableProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+const Table = ({ children, style, ...rest }: TableProps) => (
+  <View {...rest} style={[styles.wrapper, style]}>
+    {children}
+  </View>
+);
+
+const styles = StyleSheet.create({
+  wrapper: {
+    display: "flex",
+    flexDirection: "column",
+  },
+});
+
+export default Table;

package/src/components/Table/tableCell.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+const TableCell = ({ children, style, numeric, value, ...rest }) => (React.createElement(View, { ...rest, style: [styles.wrapper, numeric && styles.right, style] },
+    React.createElement(Text, { numberOfLines: 1 },
+        children,
+        value)));
+const styles = StyleSheet.create({
+    wrapper: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "row",
+    },
+    right: {
+        justifyContent: "flex-end",
+    },
+});
+export default TableCell;

package/src/components/Table/tableCell.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { View, Text, StyleProp, ViewStyle, StyleSheet } from "react-native";
+
+export interface TableCellProps {
+  children: React.ReactNode;
+  numeric?: boolean;
+  style?: StyleProp<ViewStyle>;
+  value: string;
+}
+
+const TableCell = ({
+  children,
+  style,
+  numeric,
+  value,
+  ...rest
+}: TableCellProps) => (
+  <View {...rest} style={[styles.wrapper, numeric && styles.right, style]}>
+    <Text numberOfLines={1}>
+      {children}
+      {value}
+    </Text>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "row",
+  },
+  right: {
+    justifyContent: "flex-end",
+  },
+});
+
+export default TableCell;

package/src/components/Table/tableHeader.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { withTheme } from "../../theming";
+const TableHeader = ({ children, style, theme, ...rest }) => (React.createElement(View, { ...rest, style: [styles.wrapper, { borderBottomColor: theme.colors.medium }, style] }, children));
+const styles = StyleSheet.create({
+    wrapper: {
+        display: "flex",
+        flexDirection: "row",
+    },
+});
+export default withTheme(TableHeader);

package/src/components/Table/tableHeader.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { View, StyleProp, ViewStyle, StyleSheet } from "react-native";
+import { Theme } from "../../styles/DefaultTheme";
+import { withTheme } from "../../theming";
+
+export interface TableHeaderProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+}
+
+const TableHeader = ({ children, style, theme, ...rest }: TableHeaderProps) => (
+  <View
+    {...rest}
+    style={[styles.wrapper, { borderBottomColor: theme.colors.medium }, style]}
+  >
+    {children}
+  </View>
+);
+
+const styles = StyleSheet.create({
+  wrapper: {
+    display: "flex",
+    flexDirection: "row",
+  },
+});
+
+export default withTheme(TableHeader);

package/src/components/Table/tablePaginator.js

@@ -0,0 +1,5 @@
+import React from "react";
+import { View, Text } from "react-native";
+const TablePaginator = () => (React.createElement(View, null,
+    React.createElement(Text, null, "Table Paginator")));
+export default TablePaginator;

package/src/components/Table/tablePaginator.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { View, Text } from "react-native";
+
+const TablePaginator = () => (
+  <View>
+    <Text>Table Paginator</Text>
+  </View>
+);
+
+export default TablePaginator;

package/src/components/Table/tableRow.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { withTheme } from "../../theming";
+const TableRow = ({ children, style, theme, ...rest }) => (React.createElement(View, { ...rest, style: [styles.container, { borderBottomColor: theme.colors.light }, style] },
+    React.createElement(View, { style: styles.content }, children)));
+const styles = StyleSheet.create({
+    container: {
+        display: "flex",
+        flexDirection: "row",
+    },
+    content: {
+        flex: 1,
+        flexDirection: "row",
+    },
+});
+export default withTheme(TableRow);

package/src/components/Table/tableRow.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { View, StyleProp, ViewStyle, StyleSheet } from "react-native";
+import { Theme } from "../../styles/DefaultTheme";
+import { withTheme } from "../../theming";
+export interface TableRowProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+}
+
+const TableRow = ({ children, style, theme, ...rest }: TableRowProps) => (
+  <View
+    {...rest}
+    style={[styles.container, { borderBottomColor: theme.colors.light }, style]}
+  >
+    <View style={styles.content}>{children}</View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    display: "flex",
+    flexDirection: "row",
+  },
+  content: {
+    flex: 1,
+    flexDirection: "row",
+  },
+});
+
+export default withTheme(TableRow);

package/src/components/Table/tableTitle.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { extractStyles } from "../../utilities";
+const TableTitle = ({ children, style, numeric = false, isAscending = false, numberOfLines = 1, title, ...rest }) => {
+    const { textStyles, viewStyles } = extractStyles(style);
+    return (React.createElement(View, { ...rest, style: [styles.wrapper, numeric && styles.right, viewStyles] },
+        React.createElement(Text, { style: [isAscending ? styles.sorted : { color: "gray" }, textStyles], numberOfLines: numberOfLines },
+            children,
+            title)));
+};
+const styles = StyleSheet.create({
+    wrapper: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "row",
+    },
+    right: {
+        justifyContent: "flex-end",
+    },
+    sorted: {
+    // marginLeft: 8,
+    },
+    icon: {
+        height: 24,
+        justifyContent: "center",
+    },
+});
+export default TableTitle;

package/src/components/Table/tableTitle.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { View, Text, StyleProp, ViewStyle, StyleSheet } from "react-native";
+import { extractStyles } from "../../utilities";
+
+export interface TableCellProps {
+  children: React.ReactNode;
+  numeric?: boolean;
+  isAscending: boolean;
+  numberOfLines?: number;
+  title?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const TableTitle = ({
+  children,
+  style,
+  numeric = false,
+  isAscending = false,
+  numberOfLines = 1,
+  title,
+  ...rest
+}: TableCellProps) => {
+  const { textStyles, viewStyles } = extractStyles(style);
+
+  return (
+    <View
+      {...rest}
+      style={[styles.wrapper, numeric && styles.right, viewStyles]}
+    >
+      <Text
+        style={[isAscending ? styles.sorted : { color: "gray" }, textStyles]}
+        numberOfLines={numberOfLines}
+      >
+        {children}
+        {title}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "row",
+  },
+  right: {
+    justifyContent: "flex-end",
+  },
+  sorted: {
+    // marginLeft: 8,
+  },
+  icon: {
+    height: 24,
+    justifyContent: "center",
+  },
+});
+
+export default TableTitle;

package/src/index.js

@@ -29,6 +29,7 @@ export { ActionSheet, ActionSheetItem, ActionSheetCancel, } from "./components/A
 export { Swiper, SwiperItem } from "./components/Swiper";
 export { Center, Circle, Square, Row, Stack, Spacer, } from "./components/Layout";
 export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup, } from "./components/RadioButton/index";
+export { Table, TableRow, TablePaginator, TableHeader, TableCell, TableTitle, } from "./components/Table";
 /* Deprecated: Fix or Delete!  */
 export { default as Button } from "./components/DeprecatedButton";
 export { default as CardBlock } from "./components/CardBlock";

package/src/index.tsx

@@ -49,6 +49,15 @@ export {
   RadioButtonFieldGroup,
 } from "./components/RadioButton/index";
 
+export {
+  Table,
+  TableRow,
+  TablePaginator,
+  TableHeader,
+  TableCell,
+  TableTitle,
+} from "./components/Table";
+
 /* Deprecated: Fix or Delete!  */
 export { default as Button } from "./components/DeprecatedButton";
 export { default as CardBlock } from "./components/CardBlock";