@draftbit/core 47.0.0-eae99e.2 → 47.0.1-54c307.2

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/ProgressBar.js

@@ -0,0 +1,118 @@
+import React, { Component } from "react";
+import { Animated, Easing, View, I18nManager, } from "react-native";
+const INDETERMINATE_WIDTH_FACTOR = 0.3;
+const BAR_WIDTH_ZERO_POSITION = INDETERMINATE_WIDTH_FACTOR / (1 + INDETERMINATE_WIDTH_FACTOR);
+export default class ProgressBar extends Component {
+    constructor(props) {
+        super(props);
+        this.handleLayout = (event) => {
+            const { width = 150, onLayout } = this.props;
+            if (!width) {
+                this.setState({ width: event.nativeEvent.layout.width });
+            }
+            if (onLayout) {
+                onLayout(event);
+            }
+        };
+        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) {
+        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,
+                    useNativeDriver,
+                }).start();
+            }
+            else {
+                this.state.progress.setValue(progress);
+            }
+        }
+    }
+    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 = {
+            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 (React.createElement(View, { style: [containerStyle, style], onLayout: this.handleLayout, ...restProps },
+            React.createElement(Animated.View, { style: progressStyle }),
+            children));
+    }
+}

package/src/components/ProgressBar.tsx

@@ -0,0 +1,191 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,64 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,71 @@
+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

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

package/src/components/ResizeMode.ts

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

package/src/components/Row.js

@@ -0,0 +1,48 @@
+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);