@draftbit/core 46.4.4-fe82de.2 → 47.0.0-06ea46.2

package/src/components/AnimatedCircularProgress.js

@@ -1,43 +0,0 @@
-import * as React from "react";
-import { Animated, Easing, } from "react-native";
-import CircularProgress from "./CircularProgress";
-const AnimatedProgress = Animated.createAnimatedComponent(CircularProgress);
-const AnimatedCircularProgress = ({ duration = 500, easing = Easing.out(Easing.ease), fill, prefill = 0, useNativeDriver = false, tintColorSecondary, onAnimationComplete, tintColor = "black", ...other }) => {
-    const [fillAnimation] = React.useState(new Animated.Value(prefill));
-    const animate = React.useCallback((toVal = -1, dur, ease) => {
-        const toValue = toVal >= 0 ? toVal : fill;
-        const dura = dur || duration;
-        const eas = ease || easing;
-        const useNative = useNativeDriver;
-        const anim = Animated.timing(fillAnimation, {
-            useNativeDriver: useNative,
-            toValue,
-            easing: eas,
-            duration: dura,
-        });
-        anim.start(onAnimationComplete);
-        return anim;
-    }, [
-        duration,
-        easing,
-        fill,
-        useNativeDriver,
-        fillAnimation,
-        onAnimationComplete,
-    ]);
-    const animateColor = () => {
-        if (!tintColorSecondary) {
-            return tintColor;
-        }
-        const tintAnimation = fillAnimation.interpolate({
-            inputRange: [0, 100],
-            outputRange: [tintColor, tintColorSecondary],
-        });
-        return tintAnimation;
-    };
-    React.useEffect(() => {
-        animate();
-    }, [fill, animate]);
-    return (React.createElement(AnimatedProgress, { ...other, style: other.style, childrenContainerStyle: other.childrenContainerStyle, fill: fillAnimation, tintColor: animateColor() }));
-};
-export default AnimatedCircularProgress;

package/src/components/AnimatedCircularProgress.tsx

@@ -1,101 +0,0 @@
-import * as React from "react";
-import {
-  Animated,
-  Easing,
-  EasingFunction,
-  StyleProp,
-  ViewStyle,
-} from "react-native";
-import CircularProgress, {
-  Props as CircularProgressProps,
-} from "./CircularProgress";
-const AnimatedProgress = Animated.createAnimatedComponent(CircularProgress);
-
-type Props = {
-  duration?: number;
-  easing?: EasingFunction;
-  prefill?: number;
-  useNativeDriver?: boolean;
-  tintColorSecondary?: string;
-  onAnimationComplete?: Animated.EndCallback | undefined;
-} & CircularProgressProps;
-
-const AnimatedCircularProgress: React.FC<React.PropsWithChildren<Props>> = ({
-  duration = 500,
-  easing = Easing.out(Easing.ease),
-  fill,
-  prefill = 0,
-  useNativeDriver = false,
-  tintColorSecondary,
-  onAnimationComplete,
-  tintColor = "black",
-  ...other
-}) => {
-  const [fillAnimation] = React.useState<Animated.Value>(
-    new Animated.Value(prefill)
-  );
-
-  const animate = React.useCallback(
-    (
-      toVal: number = -1,
-      dur?: number,
-      ease?: EasingFunction
-    ): Animated.CompositeAnimation => {
-      const toValue = toVal >= 0 ? toVal : fill;
-      const dura = dur || duration;
-      const eas = ease || easing;
-      const useNative = useNativeDriver;
-
-      const anim = Animated.timing(fillAnimation, {
-        useNativeDriver: useNative,
-        toValue,
-        easing: eas,
-        duration: dura,
-      });
-      anim.start(onAnimationComplete);
-
-      return anim;
-    },
-    [
-      duration,
-      easing,
-      fill,
-      useNativeDriver,
-      fillAnimation,
-      onAnimationComplete,
-    ]
-  );
-
-  const animateColor = () => {
-    if (!tintColorSecondary) {
-      return tintColor;
-    }
-
-    const tintAnimation = fillAnimation.interpolate({
-      inputRange: [0, 100],
-      outputRange: [tintColor, tintColorSecondary],
-    });
-
-    return tintAnimation;
-  };
-
-  React.useEffect(() => {
-    animate();
-  }, [fill, animate]);
-
-  return (
-    <AnimatedProgress
-      {...other}
-      style={other.style as Animated.WithAnimatedValue<StyleProp<ViewStyle>>}
-      childrenContainerStyle={
-        other.childrenContainerStyle as Animated.WithAnimatedValue<
-          StyleProp<ViewStyle>
-        >
-      }
-      fill={fillAnimation}
-      tintColor={animateColor()}
-    />
-  );
-};
-
-export default AnimatedCircularProgress;

package/src/components/AspectRatio.js

@@ -1,18 +0,0 @@
-import React from "react";
-import { View, StyleSheet, } from "react-native";
-const AspectRatio = (props) => {
-    const [layout, setLayout] = React.useState(null);
-    const { aspectRatio = 1, ...inputStyle } = StyleSheet.flatten(props.style) || {};
-    const style = [inputStyle, { aspectRatio }];
-    if (layout) {
-        const { width = 0, height = 0 } = layout;
-        if (width === 0) {
-            style.push({ width: height * (1 / aspectRatio), height });
-        }
-        else {
-            style.push({ width, height: width * (1 / aspectRatio) });
-        }
-    }
-    return (React.createElement(View, { ...props, style: style, onLayout: ({ nativeEvent: { layout: l } }) => setLayout(l) }, props.children));
-};
-export default AspectRatio;

package/src/components/AspectRatio.tsx

@@ -1,40 +0,0 @@
-import React from "react";
-import {
-  View,
-  StyleSheet,
-  LayoutRectangle,
-  StyleProp,
-  ViewStyle,
-} from "react-native";
-
-type Props = {
-  children?: React.ReactNode;
-  style?: StyleProp<ViewStyle>;
-};
-
-const AspectRatio: React.FC<React.PropsWithChildren<Props>> = (props) => {
-  const [layout, setLayout] = React.useState<LayoutRectangle | null>(null);
-  const { aspectRatio = 1, ...inputStyle } =
-    StyleSheet.flatten(props.style) || {};
-  const style = [inputStyle, { aspectRatio }];
-
-  if (layout) {
-    const { width = 0, height = 0 } = layout;
-    if (width === 0) {
-      style.push({ width: height * (1 / aspectRatio), height });
-    } else {
-      style.push({ width, height: width * (1 / aspectRatio) });
-    }
-  }
-  return (
-    <View
-      {...props}
-      style={style}
-      onLayout={({ nativeEvent: { layout: l } }) => setLayout(l)}
-    >
-      {props.children}
-    </View>
-  );
-};
-
-export default AspectRatio;

package/src/components/AvatarEdit.js

@@ -1,30 +0,0 @@
-import * as React from "react";
-import { View } from "react-native";
-import Touchable from "./Touchable";
-import CircleImage from "./CircleImage";
-import { withTheme } from "../theming";
-const AvatarEdit = ({ Icon, image, size = 80, onPress = () => { }, style, theme, ...rest }) => {
-    const colorStyles = {
-        editBackgroundColor: theme.colors.primary,
-        editIconColor: theme.colors.surface,
-        editBorderColor: theme.colors.surface,
-    };
-    const dimensions = {
-        width: size,
-        height: size,
-    };
-    return (React.createElement(View, { style: [style, dimensions], ...rest },
-        React.createElement(Touchable, { onPress: onPress },
-            React.createElement(CircleImage, { source: image, size: size }),
-            React.createElement(View, { style: {
-                    position: "absolute",
-                    top: -3,
-                    right: -3,
-                    borderColor: colorStyles.editBorderColor,
-                    backgroundColor: colorStyles.editBackgroundColor,
-                    borderRadius: size * (3 / 16),
-                    padding: size * (3 / 32),
-                } },
-                React.createElement(Icon, { name: "MaterialIcons/edit", color: colorStyles.editIconColor, size: size * (3 / 16) })))));
-};
-export default withTheme(AvatarEdit);

package/src/components/AvatarEdit.tsx

@@ -1,64 +0,0 @@
-import * as React from "react";
-import { View, ImageSourcePropType, StyleProp, ViewStyle } from "react-native";
-import Touchable from "./Touchable";
-import CircleImage from "./CircleImage";
-import { withTheme } from "../theming";
-
-import type { Theme } from "../styles/DefaultTheme";
-import type { IconSlot } from "../interfaces/Icon";
-
-type Props = {
-  image: string | ImageSourcePropType;
-  size?: number;
-  onPress?: () => void;
-  style?: StyleProp<ViewStyle>;
-  theme: Theme;
-} & IconSlot;
-
-const AvatarEdit: React.FC<React.PropsWithChildren<Props>> = ({
-  Icon,
-  image,
-  size = 80,
-  onPress = () => {},
-  style,
-  theme,
-  ...rest
-}) => {
-  const colorStyles = {
-    editBackgroundColor: theme.colors.primary,
-    editIconColor: theme.colors.surface,
-    editBorderColor: theme.colors.surface,
-  };
-
-  const dimensions = {
-    width: size,
-    height: size,
-  };
-
-  return (
-    <View style={[style, dimensions]} {...rest}>
-      <Touchable onPress={onPress}>
-        <CircleImage source={image} size={size} />
-        <View
-          style={{
-            position: "absolute",
-            top: -3,
-            right: -3,
-            borderColor: colorStyles.editBorderColor,
-            backgroundColor: colorStyles.editBackgroundColor,
-            borderRadius: size * (3 / 16),
-            padding: size * (3 / 32),
-          }}
-        >
-          <Icon
-            name="MaterialIcons/edit"
-            color={colorStyles.editIconColor}
-            size={size * (3 / 16)}
-          />
-        </View>
-      </Touchable>
-    </View>
-  );
-};
-
-export default withTheme(AvatarEdit);

package/src/components/Card.js

@@ -1,57 +0,0 @@
-import React from "react";
-import { StyleSheet, View, Pressable, } from "react-native";
-import Image from "./Image";
-import Surface from "./Surface";
-import { Title, Subtitle, Caption } from "./Typography";
-import { withTheme } from "../theming";
-import Config from "./Config";
-const ICON_SIZE = Config.cardIconSize;
-const ICON_CONTAINER_SIZE = Config.cardIconSize * 2;
-const ICON_CONTAINER_PADDING = Config.cardIconSize / 2 - 1;
-const ICON_ELEVATION = Config.cardIconElevation;
-export const TopRightCircleIcon = withTheme(({ Icon, icon, theme, onPress, }) => {
-    return (React.createElement(Surface, { style: {
-            justifyContent: "center",
-            alignItems: "center",
-            elevation: ICON_ELEVATION,
-            position: "absolute",
-            top: 12,
-            right: 12,
-            width: ICON_CONTAINER_SIZE,
-            height: ICON_CONTAINER_SIZE,
-            padding: ICON_CONTAINER_PADDING,
-            borderRadius: ICON_CONTAINER_SIZE,
-            backgroundColor: "rgba(0, 0, 0, 0.1)",
-        } },
-        React.createElement(Pressable, { disabled: !onPress, onPress: onPress, style: ({ pressed }) => {
-                return [
-                    {
-                        opacity: pressed ? 0.8 : 1,
-                    },
-                ];
-            } },
-            React.createElement(Icon, { name: icon, size: ICON_SIZE, color: theme.colors.surface }))));
-});
-const Card = ({ Icon, image = Config.cardImageUrl, title, subtitle, description, textCentered, icon, aspectRatio = 1.5, elevation = 2, style, onPress, onPressIcon, titleStyle, subtitleStyle, descriptionStyle, theme, children, }) => {
-    const { backgroundColor: bgColor, padding, ...styles } = StyleSheet.flatten(style || {});
-    const backgroundColor = bgColor ? bgColor : theme.colors.surface;
-    const innerPadding = padding ? padding : 12;
-    return (React.createElement(Surface, { style: [{ elevation, backgroundColor }, styles] },
-        React.createElement(Pressable, { disabled: !onPress, onPress: onPress, style: ({ pressed }) => {
-                return [
-                    {
-                        opacity: pressed ? 0.8 : 1,
-                    },
-                ];
-            } },
-            React.createElement(Image, { style: { aspectRatio }, source: typeof image === "string" ? { uri: image } : image, resizeMode: "cover" }),
-            React.createElement(View, { style: { padding: innerPadding } },
-                React.createElement(View, { style: { alignItems: textCentered ? "center" : "flex-start" } },
-                    title || (title && title !== "") ? (React.createElement(Title, { text: title, style: titleStyle })) : null,
-                    subtitle || (subtitle && subtitle !== "") ? (React.createElement(Subtitle, { text: subtitle, style: subtitleStyle })) : null,
-                    description || (description && description !== "") ? (React.createElement(View, { style: { marginTop: 4 } },
-                        React.createElement(Caption, { text: description, style: descriptionStyle }))) : null,
-                    children)),
-            icon ? (React.createElement(TopRightCircleIcon, { Icon: Icon, icon: icon, onPress: onPressIcon })) : null)));
-};
-export default withTheme(Card);

package/src/components/Card.tsx

@@ -1,161 +0,0 @@
-import React from "react";
-import {
-  StyleSheet,
-  View,
-  ImageSourcePropType,
-  StyleProp,
-  ViewStyle,
-  TextStyle,
-  Pressable,
-} from "react-native";
-import Image from "./Image";
-import Surface from "./Surface";
-import { Title, Subtitle, Caption } from "./Typography";
-
-import { withTheme } from "../theming";
-import Config from "./Config";
-
-import type { Theme } from "../styles/DefaultTheme";
-import type { IconSlot } from "../interfaces/Icon";
-
-const ICON_SIZE = Config.cardIconSize;
-const ICON_CONTAINER_SIZE = Config.cardIconSize * 2;
-const ICON_CONTAINER_PADDING = Config.cardIconSize / 2 - 1;
-const ICON_ELEVATION = Config.cardIconElevation;
-
-export const TopRightCircleIcon = withTheme(
-  ({
-    Icon,
-    icon,
-    theme,
-    onPress,
-  }: {
-    icon: string;
-    theme: Theme;
-    onPress?: () => void;
-  } & IconSlot) => {
-    return (
-      <Surface
-        style={{
-          justifyContent: "center",
-          alignItems: "center",
-          elevation: ICON_ELEVATION,
-          position: "absolute",
-          top: 12,
-          right: 12,
-          width: ICON_CONTAINER_SIZE,
-          height: ICON_CONTAINER_SIZE,
-          padding: ICON_CONTAINER_PADDING,
-          borderRadius: ICON_CONTAINER_SIZE,
-          backgroundColor: "rgba(0, 0, 0, 0.1)",
-        }}
-      >
-        <Pressable
-          disabled={!onPress}
-          onPress={onPress}
-          style={({ pressed }) => {
-            return [
-              {
-                opacity: pressed ? 0.8 : 1,
-              },
-            ];
-          }}
-        >
-          <Icon name={icon} size={ICON_SIZE} color={theme.colors.surface} />
-        </Pressable>
-      </Surface>
-    );
-  }
-);
-
-type Props = {
-  image?: string | ImageSourcePropType;
-  title?: string;
-  subtitle?: string;
-  description?: string;
-  textCentered: boolean;
-  icon?: string;
-  aspectRatio?: number;
-  elevation?: number;
-  numColumns?: number;
-  theme: Theme;
-  titleStyle?: StyleProp<TextStyle>;
-  subtitleStyle?: StyleProp<TextStyle>;
-  descriptionStyle?: StyleProp<TextStyle>;
-  style?: StyleProp<ViewStyle>;
-  onPress?: () => void;
-  onPressIcon?: () => void;
-  children?: React.ReactNode;
-} & IconSlot;
-
-const Card: React.FC<React.PropsWithChildren<Props>> = ({
-  Icon,
-  image = Config.cardImageUrl,
-  title,
-  subtitle,
-  description,
-  textCentered,
-  icon,
-  aspectRatio = 1.5,
-  elevation = 2,
-  style,
-  onPress,
-  onPressIcon,
-  titleStyle,
-  subtitleStyle,
-  descriptionStyle,
-  theme,
-  children,
-}) => {
-  const {
-    backgroundColor: bgColor,
-    padding,
-    ...styles
-  } = StyleSheet.flatten(style || {});
-
-  const backgroundColor = bgColor ? bgColor : theme.colors.surface;
-  const innerPadding = padding ? padding : 12;
-
-  return (
-    <Surface style={[{ elevation, backgroundColor }, styles]}>
-      <Pressable
-        disabled={!onPress}
-        onPress={onPress}
-        style={({ pressed }) => {
-          return [
-            {
-              opacity: pressed ? 0.8 : 1,
-            },
-          ];
-        }}
-      >
-        <Image
-          style={{ aspectRatio }}
-          source={typeof image === "string" ? { uri: image } : image}
-          resizeMode="cover"
-        />
-        <View style={{ padding: innerPadding }}>
-          <View style={{ alignItems: textCentered ? "center" : "flex-start" }}>
-            {title || (title && title !== "") ? (
-              <Title text={title} style={titleStyle} />
-            ) : null}
-            {subtitle || (subtitle && subtitle !== "") ? (
-              <Subtitle text={subtitle} style={subtitleStyle} />
-            ) : null}
-            {description || (description && description !== "") ? (
-              <View style={{ marginTop: 4 }}>
-                <Caption text={description} style={descriptionStyle} />
-              </View>
-            ) : null}
-            {children}
-          </View>
-        </View>
-        {icon ? (
-          <TopRightCircleIcon Icon={Icon} icon={icon} onPress={onPressIcon} />
-        ) : null}
-      </Pressable>
-    </Surface>
-  );
-};
-
-export default withTheme(Card);

package/src/components/CardBlock.js

@@ -1,54 +0,0 @@
-import React from "react";
-import { View, Text, } from "react-native";
-import Image from "./Image";
-import Card from "./DeprecatedCardWrapper";
-import Elevation from "./Elevation";
-import { withTheme } from "../theming";
-import Config from "./Config";
-const CardBlock = ({ image = Config.cardImageUrl, title, leftDescription, rightDescription, titleCentered, aspectRatio = 1.5, elevation = 2, numColumns = 3, theme: { colors, roundness, typography }, style, onPress, ...rest }) => {
-    let titleJustification;
-    let titleStyle;
-    if (titleCentered && !leftDescription && !rightDescription) {
-        titleJustification = "center";
-    }
-    else {
-        titleJustification = "space-between";
-    }
-    if (numColumns === 1) {
-        titleStyle = typography.button;
-    }
-    else if (numColumns === 2) {
-        titleStyle = typography.headline6;
-    }
-    else {
-        titleStyle = typography.headline5;
-    }
-    const rightDescriptionStyles = [
-        typography.subtitle2,
-        { color: colors.light },
-    ];
-    return (React.createElement(Card, { style: style, onPress: onPress, numColumns: numColumns, ...rest },
-        React.createElement(View, { style: { backgroundColor: colors.background } },
-            React.createElement(Elevation, { style: { elevation, borderRadius: roundness } },
-                React.createElement(Image, { style: {
-                        borderRadius: roundness,
-                        aspectRatio,
-                    }, source: typeof image === "string" ? { uri: image } : image, resizeMode: "cover" })),
-            title ? (React.createElement(View, { style: {
-                    flexDirection: "row",
-                    alignItems: "center",
-                    justifyContent: titleJustification,
-                    marginTop: numColumns === 3 ? 16 : 12,
-                } },
-                React.createElement(Text, { numberOfLines: 1, style: [titleStyle, { color: colors.strong }] }, title),
-                !leftDescription && rightDescription ? (React.createElement(Text, { style: rightDescriptionStyles }, rightDescription)) : null)) : null,
-            leftDescription ? (React.createElement(View, { style: {
-                    flexDirection: "row",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                    marginTop: numColumns === 3 ? 4 : 4 / 2,
-                } },
-                React.createElement(Text, { numberOfLines: 1, style: [typography.body2, { color: colors.medium }] }, leftDescription),
-                rightDescription ? (React.createElement(Text, { numberOfLines: 1, style: rightDescriptionStyles }, rightDescription)) : null)) : null)));
-};
-export default withTheme(CardBlock);