@draftbit/core 48.5.6 → 48.5.7-efd08d.2

package/src/components/Switch.tsx

@@ -1,149 +1,149 @@
-import * as React from "react";
-import {
-  Switch as NativeSwitch,
-  SwitchProps,
-  StyleProp,
-  ViewStyle,
-} from "react-native";
-import { withTheme } from "../theming";
-import FormRow from "./FormRow";
-import { RowDirection } from "@draftbit/types";
-import type { Theme } from "../styles/DefaultTheme";
-import { usePrevious } from "../hooks";
-
-type Props = {
-  value?: boolean;
-  disabled?: boolean;
-  onValueChange?: (value: boolean) => void;
-  defaultValue?: boolean;
-  theme: Theme;
-  activeTrackColor: string;
-  inactiveTrackColor: string;
-  activeThumbColor: string;
-  inactiveThumbColor: string;
-} & SwitchProps;
-
-function Switch({
-  value,
-  defaultValue,
-  disabled,
-  onValueChange,
-  activeTrackColor,
-  inactiveTrackColor,
-  activeThumbColor,
-  inactiveThumbColor,
-  theme,
-  style,
-  ...rest
-}: Props) {
-  const activeTrackThemeColor = activeTrackColor || theme.colors.primary;
-  const inactiveTrackThemeColor = inactiveTrackColor || "#EEE";
-
-  const activeThumbThemeColor = activeThumbColor || "#FFF";
-  const inactiveThumbThemeColor = inactiveThumbColor || "#FFF";
-
-  const [checked, setChecked] = React.useState(value || defaultValue);
-
-  React.useEffect(() => {
-    if (value != null && value !== checked) {
-      setChecked(value);
-    }
-  }, [value, checked]);
-
-  // This special logic is to handle weird APIs like Airtable that return
-  // true or undefined for a boolean
-  const previousDefaultValue = usePrevious(defaultValue) as boolean | undefined;
-  React.useEffect(() => {
-    if (defaultValue !== previousDefaultValue) {
-      setChecked(Boolean(defaultValue));
-    }
-  }, [defaultValue, previousDefaultValue]);
-
-  return (
-    <NativeSwitch
-      value={checked}
-      disabled={disabled}
-      trackColor={{
-        false: inactiveTrackThemeColor,
-        true: activeTrackThemeColor,
-      }}
-      thumbColor={value ? activeThumbThemeColor : inactiveThumbThemeColor}
-      // @ts-ignore react-native-web only
-      activeThumbColor={activeThumbThemeColor}
-      ios_backgroundColor={inactiveTrackThemeColor}
-      style={style}
-      onValueChange={(bool) => {
-        setChecked(bool);
-        onValueChange && onValueChange(bool);
-      }}
-      {...rest}
-    />
-  );
-}
-
-type RowProps = {
-  label: string;
-  direction: RowDirection;
-  style?: StyleProp<ViewStyle>;
-};
-
-function Row({
-  label = "Label",
-  direction = RowDirection.Row,
-  style,
-  value,
-  defaultValue,
-  disabled,
-  onValueChange,
-  activeTrackColor,
-  inactiveTrackColor,
-  activeThumbColor,
-  inactiveThumbColor,
-  theme,
-  ...rest
-}: Props & RowProps) {
-  const [checked, setChecked] = React.useState(
-    value != null ? value : defaultValue
-  );
-
-  React.useEffect(() => {
-    if (value != null) {
-      setChecked(value);
-    }
-  }, [value]);
-
-  React.useEffect(() => {
-    if (defaultValue != null) {
-      setChecked(defaultValue);
-    }
-  }, [defaultValue]);
-
-  return (
-    <FormRow
-      disabled={disabled}
-      onPress={() => {
-        setChecked(!checked);
-        onValueChange && onValueChange(!checked);
-      }}
-      label={label}
-      direction={direction}
-      style={style}
-      {...rest}
-    >
-      <Switch
-        theme={theme}
-        value={checked}
-        disabled={disabled}
-        onValueChange={onValueChange}
-        activeTrackColor={activeTrackColor}
-        inactiveTrackColor={inactiveTrackColor}
-        activeThumbColor={activeThumbColor}
-        inactiveThumbColor={inactiveThumbColor}
-      />
-    </FormRow>
-  );
-}
-
-const SwitchRow = withTheme(Row);
-export { SwitchRow };
-export default withTheme(Switch);
+import * as React from "react";
+import {
+  Switch as NativeSwitch,
+  SwitchProps,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
+import { withTheme } from "../theming";
+import FormRow from "./FormRow";
+import { RowDirection } from "@draftbit/types";
+import type { Theme } from "../styles/DefaultTheme";
+import { usePrevious } from "../hooks";
+
+type Props = {
+  value?: boolean;
+  disabled?: boolean;
+  onValueChange?: (value: boolean) => void;
+  defaultValue?: boolean;
+  theme: Theme;
+  activeTrackColor: string;
+  inactiveTrackColor: string;
+  activeThumbColor: string;
+  inactiveThumbColor: string;
+} & SwitchProps;
+
+function Switch({
+  value,
+  defaultValue,
+  disabled,
+  onValueChange,
+  activeTrackColor,
+  inactiveTrackColor,
+  activeThumbColor,
+  inactiveThumbColor,
+  theme,
+  style,
+  ...rest
+}: Props) {
+  const activeTrackThemeColor = activeTrackColor || theme.colors.primary;
+  const inactiveTrackThemeColor = inactiveTrackColor || "#EEE";
+
+  const activeThumbThemeColor = activeThumbColor || "#FFF";
+  const inactiveThumbThemeColor = inactiveThumbColor || "#FFF";
+
+  const [checked, setChecked] = React.useState(value || defaultValue);
+
+  React.useEffect(() => {
+    if (value != null && value !== checked) {
+      setChecked(value);
+    }
+  }, [value, checked]);
+
+  // This special logic is to handle weird APIs like Airtable that return
+  // true or undefined for a boolean
+  const previousDefaultValue = usePrevious(defaultValue) as boolean | undefined;
+  React.useEffect(() => {
+    if (defaultValue !== previousDefaultValue) {
+      setChecked(Boolean(defaultValue));
+    }
+  }, [defaultValue, previousDefaultValue]);
+
+  return (
+    <NativeSwitch
+      value={checked}
+      disabled={disabled}
+      trackColor={{
+        false: inactiveTrackThemeColor,
+        true: activeTrackThemeColor,
+      }}
+      thumbColor={value ? activeThumbThemeColor : inactiveThumbThemeColor}
+      // @ts-ignore react-native-web only
+      activeThumbColor={activeThumbThemeColor}
+      ios_backgroundColor={inactiveTrackThemeColor}
+      style={style}
+      onValueChange={(bool) => {
+        setChecked(bool);
+        onValueChange && onValueChange(bool);
+      }}
+      {...rest}
+    />
+  );
+}
+
+type RowProps = {
+  label: string;
+  direction: RowDirection;
+  style?: StyleProp<ViewStyle>;
+};
+
+function Row({
+  label = "Label",
+  direction = RowDirection.Row,
+  style,
+  value,
+  defaultValue,
+  disabled,
+  onValueChange,
+  activeTrackColor,
+  inactiveTrackColor,
+  activeThumbColor,
+  inactiveThumbColor,
+  theme,
+  ...rest
+}: Props & RowProps) {
+  const [checked, setChecked] = React.useState(
+    value != null ? value : defaultValue
+  );
+
+  React.useEffect(() => {
+    if (value != null) {
+      setChecked(value);
+    }
+  }, [value]);
+
+  React.useEffect(() => {
+    if (defaultValue != null) {
+      setChecked(defaultValue);
+    }
+  }, [defaultValue]);
+
+  return (
+    <FormRow
+      disabled={disabled}
+      onPress={() => {
+        setChecked(!checked);
+        onValueChange && onValueChange(!checked);
+      }}
+      label={label}
+      direction={direction}
+      style={style}
+      {...rest}
+    >
+      <Switch
+        theme={theme}
+        value={checked}
+        disabled={disabled}
+        onValueChange={onValueChange}
+        activeTrackColor={activeTrackColor}
+        inactiveTrackColor={inactiveTrackColor}
+        activeThumbColor={activeThumbColor}
+        inactiveThumbColor={inactiveThumbColor}
+      />
+    </FormRow>
+  );
+}
+
+const SwitchRow = withTheme(Row);
+export { SwitchRow };
+export default withTheme(Switch);

package/src/components/TabView/TabView.js

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { TabView, TabBar, } from "react-native-tab-view";
+import TabViewItem from "./TabViewItem";
+import { withTheme } from "../../theming";
+import { flattenReactFragments, extractStyles } from "../../utilities";
+const TabViewComponent = ({ Icon, onIndexChanged, onEndReached, initialTabIndex = 0, tabBarPosition, keyboardDismissMode, swipeEnabled, scrollEnabled, activeColor, inactiveColor, pressColor, indicatorColor, tabsBackgroundColor, iconSize = 16, style, theme, children: childrenProp, }) => {
+    const [index, setIndex] = React.useState(initialTabIndex);
+    const [routes, setRoutes] = React.useState([]);
+    const { textStyles, viewStyles } = extractStyles(style);
+    const children = React.useMemo(() => flattenReactFragments(React.Children.toArray(childrenProp)).filter((child) => React.isValidElement(child) && child.type === TabViewItem), [childrenProp]);
+    //Populate routes and scenes based on children
+    React.useEffect(() => {
+        const newRoutes = [];
+        children.forEach((item, idx) => {
+            const child = item;
+            newRoutes.push({
+                key: idx.toString(),
+                title: child.props.title,
+                icon: child.props.icon,
+                accessibilityLabel: child.props.accessibilityLabel,
+            });
+        });
+        setRoutes(newRoutes);
+    }, [children]);
+    const indexChangeHandler = (i) => {
+        setIndex(i);
+        onIndexChanged === null || onIndexChanged === void 0 ? void 0 : onIndexChanged(i);
+        if (i === routes.length) {
+            onEndReached === null || onEndReached === void 0 ? void 0 : onEndReached();
+        }
+    };
+    const renderTabBar = (props) => {
+        return (React.createElement(TabBar, { ...props, activeColor: activeColor || theme.colors.primary, inactiveColor: inactiveColor || "rgb(200,200,200)", pressColor: pressColor || theme.colors.primary, scrollEnabled: scrollEnabled, indicatorStyle: {
+                backgroundColor: indicatorColor || theme.colors.primary,
+            }, labelStyle: textStyles, renderIcon: ({ route, color }) => (route === null || route === void 0 ? void 0 : route.icon) ? (React.createElement(Icon, { name: route.icon, color: color, size: iconSize })) : null, style: {
+                backgroundColor: tabsBackgroundColor || theme.colors.background,
+            } }));
+    };
+    const renderScene = ({ route }) => {
+        const index = Number(route.key);
+        return children[index];
+    };
+    //Cannot render TabView without at least one tab
+    if (!routes.length) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement(TabView, { style: viewStyles, navigationState: { index, routes }, renderScene: renderScene, renderTabBar: renderTabBar, onIndexChange: indexChangeHandler, tabBarPosition: tabBarPosition, keyboardDismissMode: keyboardDismissMode, swipeEnabled: swipeEnabled }));
+};
+export default withTheme(TabViewComponent);
+//# sourceMappingURL=TabView.js.map

package/src/components/TabView/TabView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabView.js","sourceRoot":"","sources":["TabView.tsx"],"names":[],"mappings":"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"}

package/src/components/TabView/TabView.tsx

@@ -1,151 +1,151 @@
-import * as React from "react";
-import { StyleProp, ViewStyle, TextStyle } from "react-native";
-import {
-  TabView,
-  TabBar,
-  SceneRendererProps,
-  NavigationState,
-  Route,
-} from "react-native-tab-view";
-
-import TabViewItem from "./TabViewItem";
-import type { IconSlot } from "../../interfaces/Icon";
-import { withTheme } from "../../theming";
-import type { Theme } from "../../styles/DefaultTheme";
-import { flattenReactFragments, extractStyles } from "../../utilities";
-
-type SceneProps = SceneRendererProps & {
-  route: Route;
-};
-type TabBarProps = SceneRendererProps & {
-  navigationState: NavigationState<any>;
-};
-type TabBarPosition = "top" | "bottom";
-type KeyboardDismissMode = "none" | "auto" | "on-drag";
-
-type TabViewProps = {
-  onIndexChanged?: (index: number) => void;
-  onEndReached?: () => void;
-  initialTabIndex?: number;
-  tabBarPosition?: TabBarPosition;
-  keyboardDismissMode?: KeyboardDismissMode;
-  swipeEnabled?: boolean;
-  scrollEnabled?: boolean;
-  activeColor?: string;
-  inactiveColor?: string;
-  pressColor?: string;
-  indicatorColor?: string;
-  tabsBackgroundColor?: string;
-  iconSize?: number;
-  style?: StyleProp<ViewStyle | TextStyle>;
-  theme: Theme;
-} & IconSlot;
-
-const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
-  Icon,
-  onIndexChanged,
-  onEndReached,
-  initialTabIndex = 0,
-  tabBarPosition,
-  keyboardDismissMode,
-  swipeEnabled,
-  scrollEnabled,
-  activeColor,
-  inactiveColor,
-  pressColor,
-  indicatorColor,
-  tabsBackgroundColor,
-  iconSize = 16,
-  style,
-  theme,
-  children: childrenProp,
-}) => {
-  const [index, setIndex] = React.useState(initialTabIndex);
-  const [routes, setRoutes] = React.useState<Route[]>([]);
-
-  const { textStyles, viewStyles } = extractStyles(style);
-
-  const children: React.ReactNode[] = React.useMemo(
-    () =>
-      flattenReactFragments(
-        React.Children.toArray(childrenProp) as React.ReactElement[]
-      ).filter(
-        (child) => React.isValidElement(child) && child.type === TabViewItem
-      ),
-    [childrenProp]
-  );
-
-  //Populate routes and scenes based on children
-  React.useEffect(() => {
-    const newRoutes: Route[] = [];
-
-    children.forEach((item: any, idx) => {
-      const child = item as React.ReactElement;
-      newRoutes.push({
-        key: idx.toString(),
-        title: child.props.title,
-        icon: child.props.icon,
-        accessibilityLabel: child.props.accessibilityLabel,
-      });
-    });
-
-    setRoutes(newRoutes);
-  }, [children]);
-
-  const indexChangeHandler = (i: number) => {
-    setIndex(i);
-    onIndexChanged?.(i);
-    if (i === routes.length) {
-      onEndReached?.();
-    }
-  };
-
-  const renderTabBar: React.FC<TabBarProps> = (props) => {
-    return (
-      <TabBar
-        {...props}
-        activeColor={activeColor || theme.colors.primary}
-        inactiveColor={inactiveColor || "rgb(200,200,200)"}
-        pressColor={pressColor || theme.colors.primary}
-        scrollEnabled={scrollEnabled}
-        indicatorStyle={{
-          backgroundColor: indicatorColor || theme.colors.primary,
-        }}
-        labelStyle={textStyles}
-        renderIcon={({ route, color }) =>
-          route?.icon ? (
-            <Icon name={route.icon} color={color} size={iconSize} />
-          ) : null
-        }
-        style={{
-          backgroundColor: tabsBackgroundColor || theme.colors.background,
-        }}
-      />
-    );
-  };
-
-  const renderScene = ({ route }: SceneProps) => {
-    const index = Number(route.key);
-    return children[index];
-  };
-
-  //Cannot render TabView without at least one tab
-  if (!routes.length) {
-    return <></>;
-  }
-
-  return (
-    <TabView
-      style={viewStyles}
-      navigationState={{ index, routes }}
-      renderScene={renderScene}
-      renderTabBar={renderTabBar}
-      onIndexChange={indexChangeHandler}
-      tabBarPosition={tabBarPosition}
-      keyboardDismissMode={keyboardDismissMode}
-      swipeEnabled={swipeEnabled}
-    />
-  );
-};
-
-export default withTheme(TabViewComponent);
+import * as React from "react";
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
+import {
+  TabView,
+  TabBar,
+  SceneRendererProps,
+  NavigationState,
+  Route,
+} from "react-native-tab-view";
+
+import TabViewItem from "./TabViewItem";
+import type { IconSlot } from "../../interfaces/Icon";
+import { withTheme } from "../../theming";
+import type { Theme } from "../../styles/DefaultTheme";
+import { flattenReactFragments, extractStyles } from "../../utilities";
+
+type SceneProps = SceneRendererProps & {
+  route: Route;
+};
+type TabBarProps = SceneRendererProps & {
+  navigationState: NavigationState<any>;
+};
+type TabBarPosition = "top" | "bottom";
+type KeyboardDismissMode = "none" | "auto" | "on-drag";
+
+type TabViewProps = {
+  onIndexChanged?: (index: number) => void;
+  onEndReached?: () => void;
+  initialTabIndex?: number;
+  tabBarPosition?: TabBarPosition;
+  keyboardDismissMode?: KeyboardDismissMode;
+  swipeEnabled?: boolean;
+  scrollEnabled?: boolean;
+  activeColor?: string;
+  inactiveColor?: string;
+  pressColor?: string;
+  indicatorColor?: string;
+  tabsBackgroundColor?: string;
+  iconSize?: number;
+  style?: StyleProp<ViewStyle | TextStyle>;
+  theme: Theme;
+} & IconSlot;
+
+const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
+  Icon,
+  onIndexChanged,
+  onEndReached,
+  initialTabIndex = 0,
+  tabBarPosition,
+  keyboardDismissMode,
+  swipeEnabled,
+  scrollEnabled,
+  activeColor,
+  inactiveColor,
+  pressColor,
+  indicatorColor,
+  tabsBackgroundColor,
+  iconSize = 16,
+  style,
+  theme,
+  children: childrenProp,
+}) => {
+  const [index, setIndex] = React.useState(initialTabIndex);
+  const [routes, setRoutes] = React.useState<Route[]>([]);
+
+  const { textStyles, viewStyles } = extractStyles(style);
+
+  const children: React.ReactNode[] = React.useMemo(
+    () =>
+      flattenReactFragments(
+        React.Children.toArray(childrenProp) as React.ReactElement[]
+      ).filter(
+        (child) => React.isValidElement(child) && child.type === TabViewItem
+      ),
+    [childrenProp]
+  );
+
+  //Populate routes and scenes based on children
+  React.useEffect(() => {
+    const newRoutes: Route[] = [];
+
+    children.forEach((item: any, idx) => {
+      const child = item as React.ReactElement;
+      newRoutes.push({
+        key: idx.toString(),
+        title: child.props.title,
+        icon: child.props.icon,
+        accessibilityLabel: child.props.accessibilityLabel,
+      });
+    });
+
+    setRoutes(newRoutes);
+  }, [children]);
+
+  const indexChangeHandler = (i: number) => {
+    setIndex(i);
+    onIndexChanged?.(i);
+    if (i === routes.length) {
+      onEndReached?.();
+    }
+  };
+
+  const renderTabBar: React.FC<TabBarProps> = (props) => {
+    return (
+      <TabBar
+        {...props}
+        activeColor={activeColor || theme.colors.primary}
+        inactiveColor={inactiveColor || "rgb(200,200,200)"}
+        pressColor={pressColor || theme.colors.primary}
+        scrollEnabled={scrollEnabled}
+        indicatorStyle={{
+          backgroundColor: indicatorColor || theme.colors.primary,
+        }}
+        labelStyle={textStyles}
+        renderIcon={({ route, color }) =>
+          route?.icon ? (
+            <Icon name={route.icon} color={color} size={iconSize} />
+          ) : null
+        }
+        style={{
+          backgroundColor: tabsBackgroundColor || theme.colors.background,
+        }}
+      />
+    );
+  };
+
+  const renderScene = ({ route }: SceneProps) => {
+    const index = Number(route.key);
+    return children[index];
+  };
+
+  //Cannot render TabView without at least one tab
+  if (!routes.length) {
+    return <></>;
+  }
+
+  return (
+    <TabView
+      style={viewStyles}
+      navigationState={{ index, routes }}
+      renderScene={renderScene}
+      renderTabBar={renderTabBar}
+      onIndexChange={indexChangeHandler}
+      tabBarPosition={tabBarPosition}
+      keyboardDismissMode={keyboardDismissMode}
+      swipeEnabled={swipeEnabled}
+    />
+  );
+};
+
+export default withTheme(TabViewComponent);

package/src/components/TabView/TabViewItem.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+const TabViewItem = ({ style, children, }) => {
+    return React.createElement(View, { style: [styles.parentContainer, style] }, children);
+};
+const styles = StyleSheet.create({
+    parentContainer: {
+        flex: 1,
+    },
+});
+export default TabViewItem;
+//# sourceMappingURL=TabViewItem.js.map

package/src/components/TabView/TabViewItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabViewItem.js","sourceRoot":"","sources":["TabViewItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAwB,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAStE,MAAM,WAAW,GAAwD,CAAC,EACxE,KAAK,EACL,QAAQ,GACT,EAAE,EAAE;IACH,OAAO,oBAAC,IAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,eAAe,EAAE,KAAK,CAAC,IAAG,QAAQ,CAAQ,CAAC;AACzE,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,eAAe,EAAE;QACf,IAAI,EAAE,CAAC;KACR;CACF,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC"}