@draftbit/core 47.0.0-eae99e.2 → 47.0.1-0e56b5.2

package/src/components/Header.tsx

@@ -0,0 +1,105 @@
+import * as React from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from "react-native";
+import { withTheme } from "../theming";
+import Divider from "./Divider";
+import Touchable from "./Touchable";
+import Config from "./Config";
+
+import type { Theme } from "../styles/DefaultTheme";
+import type { IconSlot } from "../interfaces/Icon";
+
+type Props = {
+  titleTypeStyle?: StyleProp<TextStyle>;
+  titleColor: string;
+  title: string;
+  buttonText: string;
+  dividerTopMargin?: number;
+  icon: string;
+  onPress: () => void;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+} & IconSlot;
+
+const Header: React.FC<React.PropsWithChildren<Props>> = ({
+  Icon,
+  titleTypeStyle,
+  titleColor,
+  title,
+  buttonText,
+  dividerTopMargin,
+  icon,
+  onPress,
+  style,
+  theme: { colors, typography },
+}) => {
+  return (
+    <View style={[styles.container, style]}>
+      <View style={styles.topContainer}>
+        <Text
+          style={[
+            titleTypeStyle,
+            {
+              color: titleColor,
+              flex: 1,
+            },
+          ]}
+          numberOfLines={1}
+        >
+          {title}
+        </Text>
+        {onPress && (
+          <Touchable
+            style={{ alignSelf: "center", marginLeft: 12 }}
+            onPress={onPress}
+          >
+            <View style={styles.buttonContainer}>
+              <Text
+                style={[
+                  typography.subtitle2,
+                  {
+                    color: colors.light,
+                    marginRight: 8,
+                  },
+                ]}
+                numberOfLines={1}
+              >
+                {buttonText}
+              </Text>
+              <Icon
+                name={icon}
+                size={Config.headerIconSize}
+                color={colors.light}
+              />
+            </View>
+          </Touchable>
+        )}
+      </View>
+      <Divider style={{ marginTop: dividerTopMargin || 16 }} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: "stretch",
+  },
+  topContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  buttonContainer: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});
+
+export default withTheme(Header);

package/src/components/HeaderLarge.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { withTheme } from "../theming";
+import Header from "./Header";
+const HeaderLarge = ({ Icon, title, buttonText, icon, onPress = () => { }, style, theme: { colors, typography }, }) => {
+    return (React.createElement(Header, { Icon: Icon, titleTypeStyle: typography.headline4, titleColor: colors.strong, title: title, buttonText: buttonText, icon: icon, onPress: onPress, style: style }));
+};
+export default withTheme(HeaderLarge);

package/src/components/HeaderLarge.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { withTheme } from "../theming";
+import type { Theme } from "../styles/DefaultTheme";
+import type { IconSlot } from "../interfaces/Icon";
+import Header from "./Header";
+import { StyleProp, ViewStyle } from "react-native";
+
+type Props = {
+  title: string;
+  buttonText: string;
+  icon: string;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+} & IconSlot;
+
+const HeaderLarge: React.FC<React.PropsWithChildren<Props>> = ({
+  Icon,
+  title,
+  buttonText,
+  icon,
+  onPress = () => {},
+  style,
+  theme: { colors, typography },
+}) => {
+  return (
+    <Header
+      Icon={Icon}
+      titleTypeStyle={typography.headline4}
+      titleColor={colors.strong}
+      title={title}
+      buttonText={buttonText}
+      icon={icon}
+      onPress={onPress}
+      style={style}
+    />
+  );
+};
+
+export default withTheme(HeaderLarge);

package/src/components/HeaderMedium.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { withTheme } from "../theming";
+import Header from "./Header";
+const HeaderMedium = ({ Icon, title, buttonText, icon, onPress = () => { }, style, theme: { colors, typography }, }) => {
+    return (React.createElement(Header, { Icon: Icon, titleTypeStyle: typography.headline6, titleColor: colors.strong, title: title, buttonText: buttonText, icon: icon, onPress: onPress, style: style }));
+};
+export default withTheme(HeaderMedium);

package/src/components/HeaderMedium.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { withTheme } from "../theming";
+import type { Theme } from "../styles/DefaultTheme";
+import type { IconSlot } from "../interfaces/Icon";
+
+import Header from "./Header";
+import { StyleProp, ViewStyle } from "react-native";
+
+type Props = {
+  title: string;
+  buttonText: string;
+  icon: string;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+} & IconSlot;
+
+const HeaderMedium: React.FC<React.PropsWithChildren<Props>> = ({
+  Icon,
+  title,
+  buttonText,
+  icon,
+  onPress = () => {},
+  style,
+  theme: { colors, typography },
+}) => {
+  return (
+    <Header
+      Icon={Icon}
+      titleTypeStyle={typography.headline6}
+      titleColor={colors.strong}
+      title={title}
+      buttonText={buttonText}
+      icon={icon}
+      onPress={onPress}
+      style={style}
+    />
+  );
+};
+
+export default withTheme(HeaderMedium);

package/src/components/HeaderOverline.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { withTheme } from "../theming";
+import Header from "./Header";
+const HeaderOverline = ({ Icon, title, buttonText, icon, onPress = () => { }, style, theme: { colors, typography }, }) => {
+    return (React.createElement(Header, { Icon: Icon, titleTypeStyle: typography.overline, titleColor: colors.light, title: title && title.toUpperCase(), buttonText: buttonText, icon: icon, dividerTopMargin: 12, onPress: onPress, style: style }));
+};
+export default withTheme(HeaderOverline);

package/src/components/HeaderOverline.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { withTheme } from "../theming";
+import type { Theme } from "../styles/DefaultTheme";
+import type { IconSlot } from "../interfaces/Icon";
+
+import Header from "./Header";
+import { StyleProp, ViewStyle } from "react-native";
+
+type Props = {
+  title: string;
+  buttonText: string;
+  icon: string;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+} & IconSlot;
+
+const HeaderOverline: React.FC<React.PropsWithChildren<Props>> = ({
+  Icon,
+  title,
+  buttonText,
+  icon,
+  onPress = () => {},
+  style,
+  theme: { colors, typography },
+}) => {
+  return (
+    <Header
+      Icon={Icon}
+      titleTypeStyle={typography.overline}
+      titleColor={colors.light}
+      title={title && title.toUpperCase()}
+      buttonText={buttonText}
+      icon={icon}
+      dividerTopMargin={12}
+      onPress={onPress}
+      style={style}
+    />
+  );
+};
+
+export default withTheme(HeaderOverline);

package/src/components/Image.js

@@ -0,0 +1,47 @@
+/* README: Internal Image component used for stuff like Card. DO NOT EXPORT! */
+import React from "react";
+import { Image as NativeImage, StyleSheet, } from "react-native";
+import Config from "./Config";
+import AspectRatio from "./AspectRatio";
+const generateDimensions = ({ aspectRatio, width, height }) => {
+    if (aspectRatio && !width && !height) {
+        return {
+            aspectRatio,
+            width: "100%",
+        };
+    }
+    if (aspectRatio && height) {
+        return {
+            aspectRatio,
+            height,
+            width: aspectRatio * height,
+        };
+    }
+    if (aspectRatio && width) {
+        return {
+            aspectRatio,
+            width,
+            height: width / aspectRatio,
+        };
+    }
+    return { width, height };
+};
+const Image = ({ source, resizeMode = "cover", style, ...props }) => {
+    let imageSource = source === null || source === undefined
+        ? Config.placeholderImageURL
+        : source;
+    const styles = StyleSheet.flatten(style || {});
+    const { aspectRatio, width, height } = generateDimensions(styles);
+    if (aspectRatio) {
+        return (React.createElement(AspectRatio, { style: [style, { width, height, aspectRatio }] },
+            React.createElement(NativeImage, { ...props, source: imageSource, resizeMode: resizeMode, style: [
+                    style,
+                    {
+                        height: "100%",
+                        width: "100%",
+                    },
+                ] })));
+    }
+    return (React.createElement(NativeImage, { ...props, source: source, resizeMode: resizeMode, style: style }));
+};
+export default Image;

package/src/components/Image.tsx

@@ -0,0 +1,91 @@
+/* README: Internal Image component used for stuff like Card. DO NOT EXPORT! */
+import React from "react";
+import {
+  Image as NativeImage,
+  ImageProps,
+  StyleSheet,
+  ImageSourcePropType,
+} from "react-native";
+import Config from "./Config";
+
+import AspectRatio from "./AspectRatio";
+
+type ImageStyleProp = {
+  width?: number;
+  height?: number;
+  aspectRatio?: number;
+};
+
+const generateDimensions = ({ aspectRatio, width, height }: ImageStyleProp) => {
+  if (aspectRatio && !width && !height) {
+    return {
+      aspectRatio,
+      width: "100%",
+    };
+  }
+
+  if (aspectRatio && height) {
+    return {
+      aspectRatio,
+      height,
+      width: aspectRatio * height,
+    };
+  }
+
+  if (aspectRatio && width) {
+    return {
+      aspectRatio,
+      width,
+      height: width / aspectRatio,
+    };
+  }
+
+  return { width, height };
+};
+
+const Image: React.FC<ImageProps> = ({
+  source,
+  resizeMode = "cover",
+  style,
+  ...props
+}) => {
+  let imageSource =
+    source === null || source === undefined
+      ? Config.placeholderImageURL
+      : source;
+
+  const styles = StyleSheet.flatten(style || {});
+  const { aspectRatio, width, height } = generateDimensions(
+    styles as ImageStyleProp
+  );
+
+  if (aspectRatio) {
+    return (
+      <AspectRatio style={[style, { width, height, aspectRatio }]}>
+        <NativeImage
+          {...props}
+          source={imageSource as ImageSourcePropType}
+          resizeMode={resizeMode}
+          style={[
+            style,
+            {
+              height: "100%",
+              width: "100%",
+            },
+          ]}
+        />
+      </AspectRatio>
+    );
+  }
+
+  return (
+    <NativeImage
+      {...props}
+      source={source as ImageSourcePropType}
+      resizeMode={resizeMode}
+      style={style}
+    />
+  );
+};
+
+export default Image;

package/src/components/Justification.js

@@ -0,0 +1 @@
+export {};

package/src/components/Justification.ts

@@ -0,0 +1,8 @@
+export type justificationType =
+  | "flex-start"
+  | "flex-end"
+  | "center"
+  | "space-between"
+  | "space-around"
+  | "space-evenly"
+  | undefined;

package/src/components/Picker/Picker.js

@@ -1,12 +1,11 @@
 import * as React from "react";
-import { View, StyleSheet, Text, Platform, Dimensions, } from "react-native";
+import { View, StyleSheet, Text, Platform, Dimensions, Pressable, } from "react-native";
 import { omit, pickBy, identity, isObject } from "lodash";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { Picker as NativePicker } from "@react-native-picker/picker";
 import { withTheme } from "../../theming";
 import Portal from "../Portal/Portal";
-import Button from "../DeprecatedButton";
-import Touchable from "../Touchable";
+import { Button } from "../Button";
 import { extractStyles, extractBorderAndMarginStyles, borderStyleNames, marginStyleNames, } from "../../utilities";
 function normalizeOptions(options) {
     if (options.length === 0) {
@@ -166,7 +165,7 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
     return (
     /* marginsContainer */
     React.createElement(View, { style: [styles.marginsContainer, marginStyles] },
-        React.createElement(Touchable, { disabled: disabled, onPress: togglePickerVisible, style: styles.touchableContainer },
+        React.createElement(Pressable, { disabled: disabled, onPress: togglePickerVisible, style: styles.touchableContainer },
             React.createElement(View, { pointerEvents: "none", style: [
                     styles.outsetContainer,
                     stylesWithoutBordersAndMargins,

package/src/components/Picker/Picker.tsx

@@ -7,6 +7,7 @@ import {
   ViewStyle,
   StyleProp,
   Dimensions,
+  Pressable,
 } from "react-native";
 import { omit, pickBy, identity, isObject } from "lodash";
 import { SafeAreaView } from "react-native-safe-area-context";
@@ -14,8 +15,7 @@ import { Picker as NativePicker } from "@react-native-picker/picker";
 
 import { withTheme } from "../../theming";
 import Portal from "../Portal/Portal";
-import Button from "../DeprecatedButton";
-import Touchable from "../Touchable";
+import { Button } from "../Button";
 import type { Theme } from "../../styles/DefaultTheme";
 import type { IconSlot } from "../../interfaces/Icon";
 import {
@@ -306,7 +306,7 @@ const Picker: React.FC<PickerProps> = ({
     /* marginsContainer */
     <View style={[styles.marginsContainer, marginStyles]}>
       {/* touchableContainer */}
-      <Touchable
+      <Pressable
         disabled={disabled}
         onPress={togglePickerVisible}
         style={styles.touchableContainer}
@@ -342,7 +342,7 @@ const Picker: React.FC<PickerProps> = ({
           </View>
         </View>
         {assistiveTextLabel}
-      </Touchable>
+      </Pressable>
 
       {/* iosPicker */}
       {isIos && pickerVisible ? (

package/src/components/Picker/PickerComponent.ios.js

@@ -5,7 +5,7 @@ import omit from "lodash.omit";
 import { Picker as NativePicker } from "@react-native-picker/picker";
 import { withTheme } from "../../theming";
 import Portal from "../Portal/Portal";
-import Button from "../DeprecatedButton";
+import { Button } from "../Button";
 import TextField from "../TextField";
 import Touchable from "../Touchable";
 import { extractStyles } from "../../utilities";

package/src/components/Picker/PickerComponent.ios.tsx

@@ -8,7 +8,7 @@ import { Picker as NativePicker } from "@react-native-picker/picker";
 import { withTheme } from "../../theming";
 
 import Portal from "../Portal/Portal";
-import Button from "../DeprecatedButton";
+import { Button } from "../Button";
 import TextField from "../TextField";
 import Touchable from "../Touchable";
 import { PickerComponentProps } from "./PickerTypes";

package/src/components/Pressable.js

@@ -0,0 +1,17 @@
+import React, { useCallback } from "react";
+import { Pressable as NativePressable, } from "react-native";
+export default function Pressable({ children, disabled, onPress, onLongPress, hitSlop, delayLongPress, activeOpacity, disabledOpacity, style, ...props }) {
+    const getOpacity = useCallback((pressed) => {
+        if (disabled) {
+            return disabledOpacity;
+        }
+        else {
+            if (pressed)
+                return activeOpacity;
+            else
+                return 1;
+        }
+    }, [activeOpacity, disabled, disabledOpacity]);
+    const _style = useCallback(({ pressed }) => [style, { opacity: getOpacity(pressed) }], [getOpacity, style]);
+    return (React.createElement(NativePressable, { onPress: onPress, onLongPress: onLongPress, disabled: disabled, delayLongPress: delayLongPress ? delayLongPress : 500, hitSlop: hitSlop ? hitSlop : 8, style: _style, ...props }, children));
+}

package/src/components/Pressable.tsx

@@ -0,0 +1,67 @@
+import React, { useCallback } from "react";
+import {
+  Pressable as NativePressable,
+  PressableProps,
+  PressableStateCallbackType,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
+
+type Props = {
+  disabled?: boolean;
+  children: React.ReactNode;
+  style?: ViewStyle;
+  onPress?: () => void;
+  onLongPress?: () => void;
+  delayLongPress?: number;
+  hitSlop?: number;
+  pressRetentionOffset?: number;
+  activeOpacity?: number;
+  disabledOpacity?: number;
+} & PressableProps;
+
+export type StyleType = (
+  state: PressableStateCallbackType
+) => StyleProp<ViewStyle>;
+
+export default function Pressable({
+  children,
+  disabled,
+  onPress,
+  onLongPress,
+  hitSlop,
+  delayLongPress,
+  activeOpacity,
+  disabledOpacity,
+  style,
+  ...props
+}: Props) {
+  const getOpacity = useCallback(
+    (pressed: boolean) => {
+      if (disabled) {
+        return disabledOpacity;
+      } else {
+        if (pressed) return activeOpacity;
+        else return 1;
+      }
+    },
+    [activeOpacity, disabled, disabledOpacity]
+  );
+  const _style = useCallback<StyleType>(
+    ({ pressed }) => [style as ViewStyle, { opacity: getOpacity(pressed) }],
+    [getOpacity, style]
+  );
+  return (
+    <NativePressable
+      onPress={onPress}
+      onLongPress={onLongPress}
+      disabled={disabled}
+      delayLongPress={delayLongPress ? delayLongPress : 500}
+      hitSlop={hitSlop ? hitSlop : 8}
+      style={_style}
+      {...props}
+    >
+      {children}
+    </NativePressable>
+  );
+}