@draftbit/core 46.4.4-caab07.0 → 46.4.4-cc754a.2

package/src/components/Stepper.js

@@ -3,79 +3,39 @@ import { View, Text } from "react-native";
 import { isNumber } from "lodash";
 import { withTheme } from "../theming";
 import IconButton from "./IconButton";
-const Stepper = ({
-  min = -Infinity,
-  max = Infinity,
-  value: valueProp,
-  defaultValue,
-  style,
-  typeStyle,
-  iconSize = 24,
-  iconColor,
-  onChange,
-  theme: { colors, typography },
-  Icon,
-}) => {
-  const [value, setValue] = useState(
-    defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0
-  );
-  const isValidValue = (valueArg) => valueArg >= min && valueArg <= max;
-  const handlePlusOrMinus = (type) => {
-    const newValue = type === "plus" ? value + 1 : value - 1;
-    if (isValidValue(newValue)) {
-      setValue(newValue);
-      onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-    }
-  };
-  useEffect(() => {
-    if (
-      valueProp != null &&
-      isNumber(valueProp) &&
-      valueProp !== value &&
-      isValidValue(valueProp)
-    ) {
-      setValue(valueProp);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [valueProp]);
-  return React.createElement(
-    View,
-    { style: [{ flexDirection: "row" }, style] },
-    React.createElement(IconButton, {
-      Icon: Icon,
-      icon: "MaterialIcons/remove",
-      onPress: () => handlePlusOrMinus("minus"),
-      size: iconSize,
-      color: iconColor,
-      disabled: value === min,
-      style: { opacity: value === min ? 0.5 : 1 },
-    }),
-    React.createElement(
-      Text,
-      {
-        style: [
-          typography.body1,
-          {
-            textAlign: "center",
-            alignSelf: "center",
-            color: colors.medium,
-            marginHorizontal: 8,
-          },
-          typeStyle,
-        ],
-      },
-      value
-    ),
-    React.createElement(IconButton, {
-      Icon: Icon,
-      icon: "MaterialIcons/add",
-      onPress: () => handlePlusOrMinus("plus"),
-      size: iconSize,
-      color: iconColor,
-      disabled: value === max,
-      style: { opacity: value === max ? 0.5 : 1 },
-    })
-  );
+import { extractStyles } from "../utilities";
+const Stepper = ({ min = -Infinity, max = Infinity, value: valueProp, defaultValue, style, iconSize = 24, iconColor, onChange, theme: { colors, typography }, Icon, }) => {
+    const { viewStyles, textStyles } = extractStyles(style);
+    const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0);
+    const isValidValue = (valueArg) => valueArg >= min && valueArg <= max;
+    const handlePlusOrMinus = (type) => {
+        const newValue = type === "plus" ? value + 1 : value - 1;
+        if (isValidValue(newValue)) {
+            setValue(newValue);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+        }
+    };
+    useEffect(() => {
+        if (valueProp != null &&
+            isNumber(valueProp) &&
+            valueProp !== value &&
+            isValidValue(valueProp)) {
+            setValue(valueProp);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [valueProp]);
+    return (React.createElement(View, { style: [{ flexDirection: "row" }, viewStyles] },
+        React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/remove", onPress: () => handlePlusOrMinus("minus"), size: iconSize, color: iconColor, disabled: value === min, style: { opacity: value === min ? 0.5 : 1 } }),
+        React.createElement(Text, { style: [
+                typography.body1,
+                {
+                    textAlign: "center",
+                    alignSelf: "center",
+                    color: colors.medium,
+                    marginHorizontal: 8,
+                },
+                textStyles,
+            ] }, value),
+        React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/add", onPress: () => handlePlusOrMinus("plus"), size: iconSize, color: iconColor, disabled: value === max, style: { opacity: value === max ? 0.5 : 1 } })));
 };
-//oh hello
 export default withTheme(Stepper);

package/src/components/Stepper.tsx

@@ -6,14 +6,14 @@ import { withTheme } from "../theming";
 import type { Theme } from "../styles/DefaultTheme";
 import type { IconSlot } from "../interfaces/Icon";
 import IconButton from "./IconButton";
+import { extractStyles } from "../utilities";
 
 type Props = {
   min: number;
   max: number;
   value?: number;
   defaultValue?: number;
-  style?: StyleProp<ViewStyle>;
-  typeStyle?: StyleProp<TextStyle>;
+  style?: StyleProp<ViewStyle | TextStyle>;
   iconSize: number;
   iconColor?: string;
   onChange?: (value: number) => void;
@@ -26,13 +26,13 @@ const Stepper: FC<Props> = ({
   value: valueProp,
   defaultValue,
   style,
-  typeStyle,
   iconSize = 24,
   iconColor,
   onChange,
   theme: { colors, typography },
   Icon,
 }) => {
+  const { viewStyles, textStyles } = extractStyles(style);
   const [value, setValue] = useState(defaultValue ?? 0);
 
   const isValidValue = (valueArg: number) => valueArg >= min && valueArg <= max;
@@ -59,7 +59,7 @@ const Stepper: FC<Props> = ({
   }, [valueProp]);
 
   return (
-    <View style={[{ flexDirection: "row" }, style]}>
+    <View style={[{ flexDirection: "row" }, viewStyles]}>
       <IconButton
         Icon={Icon}
         icon="MaterialIcons/remove"
@@ -79,7 +79,7 @@ const Stepper: FC<Props> = ({
             color: colors.medium,
             marginHorizontal: 8,
           },
-          typeStyle,
+          textStyles,
         ]}
       >
         {value}
@@ -97,5 +97,5 @@ const Stepper: FC<Props> = ({
     </View>
   );
 };
-//oh hello
+
 export default withTheme(Stepper);

package/src/components/Surface.js

@@ -1,47 +1,32 @@
 /* Copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx */
 import * as React from "react";
-import { Animated, StyleSheet } from "react-native";
+import { Animated, StyleSheet, } from "react-native";
 import shadow from "../styles/shadow";
 import overlay from "../styles/overlay";
 import { withTheme } from "../theming";
-const Surface = ({
-  elevation: propElevation,
-  style,
-  theme,
-  children,
-  ...rest
-}) => {
-  const {
-    elevation: styleElevation = 3,
-    backgroundColor,
-    ...restStyle
-  } = StyleSheet.flatten(style) || {};
-  const { dark: isDarkTheme, mode, colors } = theme;
-  const elevation = propElevation || styleElevation;
-  const evalationStyles = elevation ? shadow(elevation) : {};
-  const getBackgroundColor = () => {
-    if (backgroundColor) {
-      return backgroundColor;
-    } else if (isDarkTheme && mode === "adaptive") {
-      return overlay(elevation, colors.surface);
-    } else {
-      return colors.surface;
-    }
-  };
-  return React.createElement(
-    Animated.View,
-    {
-      ...rest,
-      style: [
-        {
-          backgroundColor: getBackgroundColor(),
-          elevation,
-          ...evalationStyles,
-          ...restStyle,
-        },
-      ],
-    },
-    children
-  );
+const Surface = ({ elevation: propElevation, style, theme, children, ...rest }) => {
+    const { elevation: styleElevation = 3, backgroundColor, ...restStyle } = (StyleSheet.flatten(style) || {});
+    const { dark: isDarkTheme, mode, colors } = theme;
+    const elevation = propElevation || styleElevation;
+    const evalationStyles = elevation ? shadow(elevation) : {};
+    const getBackgroundColor = () => {
+        if (backgroundColor) {
+            return backgroundColor;
+        }
+        else if (isDarkTheme && mode === "adaptive") {
+            return overlay(elevation, colors.surface);
+        }
+        else {
+            return colors.surface;
+        }
+    };
+    return (React.createElement(Animated.View, { ...rest, style: [
+            {
+                backgroundColor: getBackgroundColor(),
+                elevation,
+                ...evalationStyles,
+                ...restStyle,
+            },
+        ] }, children));
 };
 export default withTheme(Surface);

package/src/components/Swiper/Swiper.js

@@ -1,60 +1,29 @@
 import React from "react";
 import { View } from "react-native";
 import SwiperComponent from "react-native-web-swiper";
-const Swiper = ({
-  vertical = false,
-  loop = false,
-  timeout = 0,
-  from = 0,
-  prevTitle = "",
-  nextTitle = "",
-  prevTitleColor,
-  nextTitleColor,
-  dotsTouchable = true,
-  dotColor,
-  dotActiveColor,
-  data,
-  keyExtractor,
-  renderItem,
-  children,
-  style,
-}) =>
-  React.createElement(
-    View,
-    { style: style },
-    React.createElement(
-      SwiperComponent,
-      {
-        from: from,
-        loop: loop,
-        timeout: timeout,
-        vertical: vertical,
-        controlsProps: {
-          prevTitle,
-          nextTitle,
-          prevTitleStyle: { color: prevTitleColor },
-          nextTitleStyle: { color: nextTitleColor },
-          dotsTouchable,
-          ...(dotColor
-            ? { dotProps: { badgeStyle: { backgroundColor: dotColor } } }
-            : {}),
-          ...(dotActiveColor
-            ? { dotActiveStyle: { backgroundColor: dotActiveColor } }
-            : {}),
-        },
-      },
-      data && renderItem
+const Swiper = ({ vertical = false, loop = false, timeout = 0, from = 0, prevTitle = "", nextTitle = "", prevTitleColor, nextTitleColor, dotsTouchable = true, dotColor, dotActiveColor, data, keyExtractor, renderItem, children, style, }) => (React.createElement(View, { style: style },
+    React.createElement(SwiperComponent, { from: from, loop: loop, timeout: timeout, vertical: vertical, controlsProps: {
+            prevTitle,
+            nextTitle,
+            prevTitleStyle: { color: prevTitleColor },
+            nextTitleStyle: { color: nextTitleColor },
+            dotsTouchable,
+            ...(dotColor
+                ? { dotProps: { badgeStyle: { backgroundColor: dotColor } } }
+                : {}),
+            ...(dotActiveColor
+                ? { dotActiveStyle: { backgroundColor: dotActiveColor } }
+                : {}),
+        } }, data && renderItem
         ? data.map((item, index) => {
             const component = renderItem({ item, index });
             if (!component) {
-              return null;
+                return null;
             }
             const key = keyExtractor ? keyExtractor(item, index) : index;
             return React.cloneElement(component, {
-              key,
+                key,
             });
-          })
-        : children
-    )
-  );
+        })
+        : children)));
 export default Swiper;

package/src/components/Swiper/SwiperItem.js

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

package/src/components/Switch.js

@@ -1,111 +1,55 @@
 import * as React from "react";
-import { Switch as NativeSwitch } from "react-native";
+import { Switch as NativeSwitch, } from "react-native";
 import { withTheme } from "../theming";
 import FormRow from "./FormRow";
 import { RowDirection } from "@draftbit/types";
 import { usePrevious } from "../hooks";
-function Switch({
-  value,
-  defaultValue,
-  disabled,
-  onValueChange,
-  activeTrackColor,
-  inactiveTrackColor,
-  activeThumbColor,
-  inactiveThumbColor,
-  theme,
-  style,
-  ...rest
-}) {
-  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);
-  React.useEffect(() => {
-    if (defaultValue !== previousDefaultValue) {
-      setChecked(Boolean(defaultValue));
-    }
-  }, [defaultValue, previousDefaultValue]);
-  return React.createElement(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,
-  });
+function Switch({ value, defaultValue, disabled, onValueChange, activeTrackColor, inactiveTrackColor, activeThumbColor, inactiveThumbColor, theme, style, ...rest }) {
+    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);
+    React.useEffect(() => {
+        if (defaultValue !== previousDefaultValue) {
+            setChecked(Boolean(defaultValue));
+        }
+    }, [defaultValue, previousDefaultValue]);
+    return (React.createElement(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 }));
 }
-function Row({
-  label = "Label",
-  direction = RowDirection.Row,
-  style,
-  value,
-  defaultValue,
-  disabled,
-  onValueChange,
-  activeTrackColor,
-  inactiveTrackColor,
-  activeThumbColor,
-  inactiveThumbColor,
-  theme,
-  ...rest
-}) {
-  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 React.createElement(
-    FormRow,
-    {
-      disabled: disabled,
-      onPress: () => {
-        setChecked(!checked);
-        onValueChange && onValueChange(!checked);
-      },
-      label: label,
-      direction: direction,
-      style: style,
-      ...rest,
-    },
-    React.createElement(Switch, {
-      theme: theme,
-      value: checked,
-      disabled: disabled,
-      onValueChange: onValueChange,
-      activeTrackColor: activeTrackColor,
-      inactiveTrackColor: inactiveTrackColor,
-      activeThumbColor: activeThumbColor,
-      inactiveThumbColor: inactiveThumbColor,
-    })
-  );
+function Row({ label = "Label", direction = RowDirection.Row, style, value, defaultValue, disabled, onValueChange, activeTrackColor, inactiveTrackColor, activeThumbColor, inactiveThumbColor, theme, ...rest }) {
+    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 (React.createElement(FormRow, { disabled: disabled, onPress: () => {
+            setChecked(!checked);
+            onValueChange && onValueChange(!checked);
+        }, label: label, direction: direction, style: style, ...rest },
+        React.createElement(Switch, { theme: theme, value: checked, disabled: disabled, onValueChange: onValueChange, activeTrackColor: activeTrackColor, inactiveTrackColor: inactiveTrackColor, activeThumbColor: activeThumbColor, inactiveThumbColor: inactiveThumbColor })));
 }
 const SwitchRow = withTheme(Row);
 export { SwitchRow };

package/src/components/Text.js

@@ -2,45 +2,31 @@ import * as React from "react";
 import { Text as NativeText, I18nManager } from "react-native";
 import { withTheme } from "../theming";
 class Text extends React.Component {
-  constructor() {
-    super(...arguments);
-    this.state = {
-      nativeProps: {},
-    };
-  }
-  setNativeProps(args) {
-    this.state.nativeProps = args || {};
-  }
-  render() {
-    const { style, ...rest } = this.props;
-    const writingDirection = I18nManager.isRTL ? "rtl" : "ltr";
-    return React.createElement(NativeText, {
-      ...rest,
-      ...this.state.nativeProps,
-      ref: (c) => {
-        this._root = c;
-      },
-      style: [
-        {
-          textAlign: "left",
-          writingDirection,
-        },
-        style,
-      ],
-    });
-  }
+    constructor() {
+        super(...arguments);
+        this.state = {
+            nativeProps: {},
+        };
+    }
+    setNativeProps(args) {
+        this.state.nativeProps = args || {};
+    }
+    render() {
+        const { style, ...rest } = this.props;
+        const writingDirection = I18nManager.isRTL ? "rtl" : "ltr";
+        return (React.createElement(NativeText, { ...rest, ...this.state.nativeProps, ref: (c) => {
+                this._root = c;
+            }, style: [
+                {
+                    textAlign: "left",
+                    writingDirection,
+                },
+                style,
+            ] }));
+    }
 }
 export const BaseLink = ({ style, theme, title, ...props }) => {
-  return React.createElement(
-    Text,
-    {
-      hitSlop: 8,
-      style: [{ color: theme.colors.primary }, style],
-      theme: theme,
-      ...props,
-    },
-    title
-  );
+    return (React.createElement(Text, { hitSlop: 8, style: [{ color: theme.colors.primary }, style], theme: theme, ...props }, title));
 };
 const Link = withTheme(BaseLink);
 export { Link };