@draftbit/core 46.4.4-f73e6b.2 → 47.0.0-0362d7.2

package/src/components/ProgressBar.tsx

@@ -1,191 +0,0 @@
-import React, { Component } from "react";
-import {
-  Animated,
-  Easing,
-  View,
-  I18nManager,
-  ViewProps,
-  StyleProp,
-  ViewStyle,
-  LayoutChangeEvent,
-} from "react-native";
-
-const INDETERMINATE_WIDTH_FACTOR = 0.3;
-const BAR_WIDTH_ZERO_POSITION =
-  INDETERMINATE_WIDTH_FACTOR / (1 + INDETERMINATE_WIDTH_FACTOR);
-
-type Props = {
-  borderColor?: string;
-  borderRadius?: number;
-  borderWidth?: number;
-  children?: React.ReactNode;
-  color?: string;
-  height?: number;
-  style?: StyleProp<ViewStyle>;
-  unfilledColor?: string;
-  width?: number;
-  animated?: boolean;
-  indeterminate?: boolean;
-  indeterminateAnimationDuration?: number;
-  progress?: number;
-  useNativeDriver?: boolean;
-  animationConfig?: Animated.AnimationConfig;
-  animationType?: "decay" | "timing" | "spring";
-} & ViewProps;
-
-interface State {
-  width: number;
-  progress: Animated.Value;
-  animationValue: Animated.Value;
-}
-
-export default class ProgressBar extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    const { progress: progressP = 0, indeterminate = false } = props;
-    const progress = Math.min(Math.max(progressP, 0), 1);
-    this.state = {
-      width: 0,
-      progress: new Animated.Value(
-        indeterminate ? INDETERMINATE_WIDTH_FACTOR : progress
-      ),
-      animationValue: new Animated.Value(BAR_WIDTH_ZERO_POSITION),
-    };
-  }
-
-  componentDidMount() {
-    const { indeterminate = false } = this.props;
-    if (indeterminate) {
-      this.animate();
-    }
-  }
-
-  componentDidUpdate(prevProps: Props) {
-    const {
-      indeterminate = false,
-      useNativeDriver = false,
-      progress: progressP = 0,
-      animationType = "spring",
-      animationConfig = { bounciness: 0 },
-      animated = true,
-    } = this.props;
-
-    if (prevProps.indeterminate !== indeterminate) {
-      if (indeterminate) {
-        this.animate();
-      } else {
-        Animated.spring(this.state.animationValue, {
-          toValue: BAR_WIDTH_ZERO_POSITION,
-          useNativeDriver,
-        }).start();
-      }
-    }
-    if (
-      prevProps.indeterminate !== indeterminate ||
-      prevProps.progress !== progressP
-    ) {
-      const progress = this.props.indeterminate
-        ? INDETERMINATE_WIDTH_FACTOR
-        : Math.min(Math.max(progressP, 0), 1);
-
-      if (animated) {
-        Animated[animationType](this.state.progress, {
-          ...animationConfig,
-          toValue: progress,
-          velocity: 0, //adjust this value if animation fails - velocity is required
-          useNativeDriver,
-        }).start();
-      } else {
-        this.state.progress.setValue(progress);
-      }
-    }
-  }
-
-  handleLayout = (event: LayoutChangeEvent) => {
-    const { width = 150, onLayout } = this.props;
-    if (!width) {
-      this.setState({ width: event.nativeEvent.layout.width });
-    }
-    if (onLayout) {
-      onLayout(event);
-    }
-  };
-
-  animate() {
-    const { useNativeDriver = false, indeterminateAnimationDuration = 1000 } =
-      this.props;
-    this.state.animationValue.setValue(0);
-    Animated.timing(this.state.animationValue, {
-      toValue: 1,
-      duration: indeterminateAnimationDuration,
-      easing: Easing.linear,
-      isInteraction: false,
-      useNativeDriver,
-    }).start((endState) => {
-      if (endState.finished) {
-        this.animate();
-      }
-    });
-  }
-
-  render() {
-    const {
-      borderColor,
-      borderRadius = 4,
-      borderWidth = 1,
-      children,
-      color = "rgba(0, 122, 255, 1)",
-      style,
-      unfilledColor,
-      width = 150,
-      ...restProps
-    } = this.props;
-
-    const innerWidth = Math.max(0, width || this.state.width) - borderWidth * 2;
-    const containerStyle: StyleProp<ViewStyle> = {
-      width,
-      borderWidth,
-      borderColor: borderColor || color,
-      borderRadius,
-      overflow: "hidden",
-      backgroundColor: unfilledColor,
-    };
-    const progressStyle = {
-      backgroundColor: color,
-      // Always take up full height of container.
-      height: "100%",
-      transform: [
-        {
-          translateX: this.state.animationValue.interpolate({
-            inputRange: [0, 1],
-            outputRange: [innerWidth * -INDETERMINATE_WIDTH_FACTOR, innerWidth],
-          }),
-        },
-        {
-          translateX: this.state.progress.interpolate({
-            inputRange: [0, 1],
-            outputRange: [innerWidth / (I18nManager.isRTL ? 2 : -2), 0],
-          }),
-        },
-        {
-          // Interpolation a temp workaround for https://github.com/facebook/react-native/issues/6278
-          scaleX: this.state.progress.interpolate({
-            inputRange: [0, 1],
-            outputRange: [0.0001, 1],
-          }),
-        },
-      ],
-    };
-
-    return (
-      <View
-        style={[containerStyle, style]}
-        onLayout={this.handleLayout}
-        {...restProps}
-      >
-        <Animated.View style={progressStyle} />
-        {children}
-      </View>
-    );
-  }
-}

package/src/components/ProgressCircle.js

@@ -1,13 +0,0 @@
-import * as React from "react";
-import { Text } from "react-native";
-import AnimatedCircularProgress from "./AnimatedCircularProgress";
-import { withTheme } from "../theming";
-const ProgressCircle = ({ progress = 0.5, style, color = "primary", size = 100, showsText = true, unfilledColor, strokeCap = "butt", textStyle, thickness = 1, theme, }) => {
-    const progressNum = Math.round(progress * 100);
-    const tintColor = color || theme.colors.primary;
-    const backgroundColor = unfilledColor || theme.colors.secondary;
-    return (React.createElement(AnimatedCircularProgress, { size: size, width: thickness, backgroundWidth: thickness, fill: progressNum, tintColor: tintColor, backgroundColor: backgroundColor, rotation: 0, lineCap: strokeCap, style: style }, (fill) => showsText ? (React.createElement(Text, { style: [{ fontSize: size * 0.275, color: tintColor }, textStyle] },
-        Math.round(fill),
-        "%")) : null));
-};
-export default withTheme(ProgressCircle);

package/src/components/ProgressCircle.tsx

@@ -1,64 +0,0 @@
-import * as React from "react";
-import { Text, StyleProp, ViewStyle, TextStyle } from "react-native";
-import AnimatedCircularProgress from "./AnimatedCircularProgress";
-import { withTheme } from "../theming";
-import themeT from "../styles/DefaultTheme";
-import { colorTypes } from "@draftbit/types";
-
-type Props = {
-  progress?: number;
-  style?: StyleProp<ViewStyle>;
-  color?: colorTypes;
-  size?: number;
-  showsText?: boolean;
-  unfilledColor?: colorTypes;
-  strokeCap?: "butt" | "square" | "round" | undefined;
-  textStyle?: StyleProp<TextStyle>;
-  thickness?: number;
-  theme: typeof themeT;
-};
-
-const ProgressCircle: React.FC<React.PropsWithChildren<Props>> = ({
-  progress = 0.5,
-  style,
-  color = "primary",
-  size = 100,
-  showsText = true,
-  unfilledColor,
-  strokeCap = "butt",
-  textStyle,
-  thickness = 1,
-  theme,
-}) => {
-  const progressNum = Math.round(progress * 100);
-
-  const tintColor = color || theme.colors.primary;
-  const backgroundColor = unfilledColor || theme.colors.secondary;
-
-  return (
-    <AnimatedCircularProgress
-      size={size}
-      width={thickness}
-      backgroundWidth={thickness}
-      fill={progressNum}
-      tintColor={tintColor}
-      backgroundColor={backgroundColor}
-      rotation={0}
-      lineCap={strokeCap}
-      style={style}
-    >
-      {/* @ts-ignore */}
-      {(fill) =>
-        showsText ? (
-          <Text
-            style={[{ fontSize: size * 0.275, color: tintColor }, textStyle]}
-          >
-            {Math.round(fill)}%
-          </Text>
-        ) : null
-      }
-    </AnimatedCircularProgress>
-  );
-};
-
-export default withTheme(ProgressCircle);

package/src/components/ProgressIndicator.js

@@ -1,27 +0,0 @@
-import * as React from "react";
-import StepIndicator from "./StepIndicator";
-import { withTheme } from "../theming";
-const ProgressIndicator = ({ numberOfSteps, currentStep, currentStepStrokeWidth = 3, stepStrokeCurrentColor = "primary", stepIndicatorSize, currentStepIndicatorSize, stepIndicatorCurrentColor, stepIndicatorLabelCurrentColor, stepIndicatorLabelFontSize = 12, stepNumberFinishedColor = "strongInverse", stepNumberUnfinishedColor = "primary", unfinishedColor = "light", finishedColor = "primary", theme, }) => {
-    const currentPosition = currentStep - 1;
-    return (React.createElement(StepIndicator, { stepCount: numberOfSteps, currentPosition: currentPosition, customStyles: {
-            stepIndicatorSize,
-            currentStepIndicatorSize: currentStepIndicatorSize
-                ? currentStepIndicatorSize
-                : stepIndicatorSize,
-            stepStrokeFinishedColor: finishedColor,
-            stepStrokeUnFinishedColor: unfinishedColor,
-            separatorFinishedColor: finishedColor,
-            separatorUnFinishedColor: unfinishedColor,
-            stepIndicatorFinishedColor: finishedColor,
-            stepIndicatorUnFinishedColor: unfinishedColor,
-            currentStepStrokeWidth,
-            stepStrokeCurrentColor: stepStrokeCurrentColor || stepIndicatorCurrentColor,
-            stepIndicatorLabelUnFinishedColor: stepNumberUnfinishedColor,
-            stepIndicatorLabelFinishedColor: stepNumberFinishedColor,
-            stepIndicatorCurrentColor: stepIndicatorCurrentColor || unfinishedColor,
-            stepIndicatorLabelCurrentColor: stepIndicatorLabelCurrentColor || stepNumberUnfinishedColor,
-            stepIndicatorLabelFontSize,
-            labelFontFamily: theme.typography.body1.fontFamily,
-        } }));
-};
-export default withTheme(ProgressIndicator);

package/src/components/ProgressIndicator.tsx

@@ -1,71 +0,0 @@
-import * as React from "react";
-import StepIndicator from "./StepIndicator";
-import { withTheme } from "../theming";
-import themeT from "../styles/DefaultTheme";
-import { colorTypes } from "@draftbit/types";
-
-type Props = {
-  numberOfSteps: number;
-  currentStep: number;
-  currentStepStrokeWidth?: number;
-  stepStrokeCurrentColor?: colorTypes;
-  stepIndicatorSize?: number;
-  currentStepIndicatorSize?: number;
-  stepIndicatorCurrentColor?: colorTypes;
-  stepIndicatorLabelCurrentColor?: colorTypes;
-  stepIndicatorLabelFontSize?: number;
-  stepNumberFinishedColor?: colorTypes;
-  stepNumberUnfinishedColor?: colorTypes;
-  unfinishedColor?: colorTypes;
-  finishedColor?: colorTypes;
-  theme: typeof themeT;
-};
-
-const ProgressIndicator: React.FC<React.PropsWithChildren<Props>> = ({
-  numberOfSteps,
-  currentStep,
-  currentStepStrokeWidth = 3,
-  stepStrokeCurrentColor = "primary",
-  stepIndicatorSize,
-  currentStepIndicatorSize,
-  stepIndicatorCurrentColor,
-  stepIndicatorLabelCurrentColor,
-  stepIndicatorLabelFontSize = 12,
-  stepNumberFinishedColor = "strongInverse",
-  stepNumberUnfinishedColor = "primary",
-  unfinishedColor = "light",
-  finishedColor = "primary",
-  theme,
-}) => {
-  const currentPosition = currentStep - 1;
-  return (
-    <StepIndicator
-      stepCount={numberOfSteps}
-      currentPosition={currentPosition}
-      customStyles={{
-        stepIndicatorSize,
-        currentStepIndicatorSize: currentStepIndicatorSize
-          ? currentStepIndicatorSize
-          : stepIndicatorSize,
-        stepStrokeFinishedColor: finishedColor,
-        stepStrokeUnFinishedColor: unfinishedColor,
-        separatorFinishedColor: finishedColor,
-        separatorUnFinishedColor: unfinishedColor,
-        stepIndicatorFinishedColor: finishedColor,
-        stepIndicatorUnFinishedColor: unfinishedColor,
-        currentStepStrokeWidth,
-        stepStrokeCurrentColor:
-          stepStrokeCurrentColor || stepIndicatorCurrentColor,
-        stepIndicatorLabelUnFinishedColor: stepNumberUnfinishedColor,
-        stepIndicatorLabelFinishedColor: stepNumberFinishedColor,
-        stepIndicatorCurrentColor: stepIndicatorCurrentColor || unfinishedColor,
-        stepIndicatorLabelCurrentColor:
-          stepIndicatorLabelCurrentColor || stepNumberUnfinishedColor,
-        stepIndicatorLabelFontSize,
-        labelFontFamily: theme.typography.body1.fontFamily,
-      }}
-    />
-  );
-};
-
-export default withTheme(ProgressIndicator);

package/src/components/ResizeMode.js

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

package/src/components/ResizeMode.ts

@@ -1,7 +0,0 @@
-export type ResizeModeType =
-  | "cover"
-  | "contain"
-  | "stretch"
-  | "repeat"
-  | "center"
-  | undefined;

package/src/components/Row.js

@@ -1,48 +0,0 @@
-import * as React from "react";
-import { View, Text, Image, StyleSheet, } from "react-native";
-import { withTheme } from "../theming";
-import Config from "./Config";
-const Row = ({ titleTypeStyle, titleColor, subtitleTypeStyle, subtitleColor, title, subtitle, multilineSubtitle, image, right, style, }) => {
-    return (React.createElement(View, { style: [styles.container, { padding: 16 }, style] },
-        React.createElement(View, { style: styles.leftContainer },
-            image && (React.createElement(Image, { source: typeof image === "string" ? { uri: image } : image, style: {
-                    marginRight: 12,
-                    width: subtitle
-                        ? Config.rowMultiLineImageSize
-                        : Config.rowSingleLineImageSize,
-                    height: subtitle
-                        ? Config.rowMultiLineImageSize
-                        : Config.rowSingleLineImageSize,
-                } })),
-            React.createElement(View, { style: styles.textContainer },
-                React.createElement(Text, { style: [
-                        titleTypeStyle,
-                        {
-                            color: titleColor,
-                        },
-                    ], numberOfLines: 1 }, title),
-                subtitle ? (React.createElement(Text, { style: [
-                        subtitleTypeStyle,
-                        {
-                            color: subtitleColor,
-                            marginTop: 4,
-                        },
-                    ], numberOfLines: multilineSubtitle ? undefined : 1 }, subtitle)) : null)),
-        right && right()));
-};
-const styles = StyleSheet.create({
-    leftContainer: {
-        flexDirection: "row",
-        flex: 1,
-    },
-    container: {
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-    },
-    textContainer: {
-        flex: 1,
-        justifyContent: "center",
-    },
-});
-export default withTheme(Row);

package/src/components/Row.tsx

@@ -1,108 +0,0 @@
-import * as React from "react";
-import {
-  View,
-  Text,
-  Image,
-  ImageSourcePropType,
-  StyleSheet,
-  StyleProp,
-  TextStyle,
-  ViewStyle,
-} from "react-native";
-import { withTheme } from "../theming";
-import Config from "./Config";
-import theme from "../styles/DefaultTheme";
-
-type Props = {
-  titleTypeStyle?: StyleProp<TextStyle>;
-  titleColor?: string;
-  subtitleTypeStyle?: StyleProp<TextStyle>;
-  subtitleColor?: string;
-  title?: string;
-  subtitle?: string;
-  multilineSubtitle?: boolean;
-  image?: string | ImageSourcePropType;
-  right?: () => React.ReactNode;
-  style?: StyleProp<ViewStyle>;
-  theme: typeof theme;
-};
-
-const Row: React.FC<React.PropsWithChildren<Props>> = ({
-  titleTypeStyle,
-  titleColor,
-  subtitleTypeStyle,
-  subtitleColor,
-  title,
-  subtitle,
-  multilineSubtitle,
-  image,
-  right,
-  style,
-}) => {
-  return (
-    <View style={[styles.container, { padding: 16 }, style]}>
-      <View style={styles.leftContainer}>
-        {image && (
-          <Image
-            source={typeof image === "string" ? { uri: image } : image}
-            style={{
-              marginRight: 12,
-              width: subtitle
-                ? Config.rowMultiLineImageSize
-                : Config.rowSingleLineImageSize,
-              height: subtitle
-                ? Config.rowMultiLineImageSize
-                : Config.rowSingleLineImageSize,
-            }}
-          />
-        )}
-        <View style={styles.textContainer}>
-          <Text
-            style={[
-              titleTypeStyle,
-              {
-                color: titleColor,
-              },
-            ]}
-            numberOfLines={1}
-          >
-            {title}
-          </Text>
-          {subtitle ? (
-            <Text
-              style={[
-                subtitleTypeStyle,
-                {
-                  color: subtitleColor,
-                  marginTop: 4,
-                },
-              ]}
-              numberOfLines={multilineSubtitle ? undefined : 1}
-            >
-              {subtitle}
-            </Text>
-          ) : null}
-        </View>
-      </View>
-      {right && right()}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  leftContainer: {
-    flexDirection: "row",
-    flex: 1,
-  },
-  container: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-  },
-  textContainer: {
-    flex: 1,
-    justifyContent: "center",
-  },
-});
-
-export default withTheme(Row);

package/src/components/RowBodyIcon.js

@@ -1,8 +0,0 @@
-import * as React from "react";
-import { withTheme } from "../theming";
-import Row from "./Row";
-import Config from "./Config";
-const RowBodyIcon = ({ Icon, title, subtitle, icon, style, theme: { colors, typography }, }) => {
-    return (React.createElement(Row, { titleTypeStyle: typography.body1, titleColor: colors.medium, subtitleTypeStyle: typography.subtitle2, subtitleColor: colors.light, title: title, subtitle: subtitle, right: () => (React.createElement(Icon, { name: icon, size: Config.rowSingleLineIconSize, color: colors.light, style: { marginLeft: 16 } })), style: style }));
-};
-export default withTheme(RowBodyIcon);

package/src/components/RowBodyIcon.tsx

@@ -1,47 +0,0 @@
-import * as React from "react";
-import { withTheme } from "../theming";
-import type { Theme } from "../styles/DefaultTheme";
-import type { IconSlot } from "../interfaces/Icon";
-
-import Row from "./Row";
-import Config from "./Config";
-import { StyleProp, ViewStyle } from "react-native";
-
-type Props = {
-  title?: string;
-  subtitle?: string;
-  icon: string;
-  style?: StyleProp<ViewStyle>;
-  theme: Theme;
-} & IconSlot;
-
-const RowBodyIcon: React.FC<React.PropsWithChildren<Props>> = ({
-  Icon,
-  title,
-  subtitle,
-  icon,
-  style,
-  theme: { colors, typography },
-}) => {
-  return (
-    <Row
-      titleTypeStyle={typography.body1}
-      titleColor={colors.medium}
-      subtitleTypeStyle={typography.subtitle2}
-      subtitleColor={colors.light}
-      title={title}
-      subtitle={subtitle}
-      right={() => (
-        <Icon
-          name={icon}
-          size={Config.rowSingleLineIconSize}
-          color={colors.light}
-          style={{ marginLeft: 16 }}
-        />
-      )}
-      style={style}
-    />
-  );
-};
-
-export default withTheme(RowBodyIcon);

package/src/components/RowHeadlineImageCaption.js

@@ -1,12 +0,0 @@
-import * as React from "react";
-import { Text } from "react-native";
-import { withTheme } from "../theming";
-import Row from "./Row";
-const RowHeadlineImageCaption = ({ title, subtitle, caption, image, style, theme: { colors, typography }, }) => {
-    return (React.createElement(Row, { titleTypeStyle: typography.headline6, titleColor: colors.strong, subtitleTypeStyle: typography.body2, subtitleColor: colors.medium, title: title, subtitle: subtitle, image: image, right: () => (React.createElement(Text, { style: {
-                ...typography.caption,
-                color: colors.strong,
-                marginLeft: 16,
-            } }, caption)), style: style }));
-};
-export default withTheme(RowHeadlineImageCaption);

package/src/components/RowHeadlineImageCaption.tsx

@@ -1,49 +0,0 @@
-import * as React from "react";
-import { Text, ImageSourcePropType, StyleProp, ViewStyle } from "react-native";
-import { withTheme } from "../theming";
-import Row from "./Row";
-import theme from "../styles/DefaultTheme";
-
-type Props = {
-  title?: string;
-  subtitle?: string;
-  caption?: string;
-  image: string | ImageSourcePropType;
-  style?: StyleProp<ViewStyle>;
-  theme: typeof theme;
-};
-
-const RowHeadlineImageCaption: React.FC<React.PropsWithChildren<Props>> = ({
-  title,
-  subtitle,
-  caption,
-  image,
-  style,
-  theme: { colors, typography },
-}) => {
-  return (
-    <Row
-      titleTypeStyle={typography.headline6}
-      titleColor={colors.strong}
-      subtitleTypeStyle={typography.body2}
-      subtitleColor={colors.medium}
-      title={title}
-      subtitle={subtitle}
-      image={image}
-      right={() => (
-        <Text
-          style={{
-            ...typography.caption,
-            color: colors.strong,
-            marginLeft: 16,
-          }}
-        >
-          {caption}
-        </Text>
-      )}
-      style={style}
-    />
-  );
-};
-
-export default withTheme(RowHeadlineImageCaption);

package/src/components/RowHeadlineImageIcon.js

@@ -1,14 +0,0 @@
-import * as React from "react";
-import { withTheme } from "../theming";
-import Row from "./Row";
-import Config from "./Config";
-const RowHeadlineImageIcon = ({ Icon, icon, title, image, subtitle, multilineSubtitle = false, style, theme: { colors, typography }, }) => {
-    return (React.createElement(Row, { titleTypeStyle: typography.headline6, titleColor: colors.strong, subtitleTypeStyle: typography.body2, subtitleColor: colors.medium, title: title, subtitle: subtitle, multilineSubtitle: multilineSubtitle, image: image, right: () => (React.createElement(Icon, { name: icon, size: multilineSubtitle
-                ? Config.rowMultiLineIconSize
-                : Config.rowSingleLineIconSize, color: colors.light, style: {
-                marginLeft: 16,
-                alignSelf: multilineSubtitle ? "flex-start" : "center",
-                marginTop: multilineSubtitle ? 4 : 0,
-            } })), style: style }));
-};
-export default withTheme(RowHeadlineImageIcon);