@draftbit/core 47.0.0-df8093.2 → 47.0.0

package/src/components/CardContainerShortImage.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import {
+  View,
+  Text,
+  ImageSourcePropType,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
+import Image from "./Image";
+import Card from "./DeprecatedCardWrapper";
+import Elevation from "./Elevation";
+import { withTheme } from "../theming";
+import Config from "./Config";
+import theme from "../styles/DefaultTheme";
+
+type Props = {
+  image?: string | ImageSourcePropType;
+  title?: string;
+  subtitle?: string;
+  mode?: "right" | "left";
+  aspectRatio?: number;
+  elevation?: number;
+  theme: typeof theme;
+  style?: StyleProp<ViewStyle>;
+  onPress: () => void;
+};
+
+const CardContainerShortImage: React.FC<React.PropsWithChildren<Props>> = ({
+  image = Config.squareImageUrl,
+  title,
+  subtitle,
+  mode = "left",
+  aspectRatio = 1,
+  elevation = 2,
+  theme: { colors, roundness, typography },
+  style,
+  onPress,
+  ...rest
+}) => {
+  return (
+    <Card style={style} onPress={onPress} {...rest}>
+      <Elevation
+        style={{
+          elevation,
+          borderRadius: roundness,
+        }}
+      >
+        <View
+          style={{
+            overflow: "hidden",
+            flexDirection: "row",
+            justifyContent: mode === "right" ? "space-between" : "flex-start",
+            borderRadius: roundness,
+          }}
+        >
+          {mode === "left" && (
+            <Image
+              style={{ aspectRatio }}
+              source={typeof image === "string" ? { uri: image } : image}
+              resizeMode="cover"
+            />
+          )}
+          <View
+            style={{
+              padding: 16,
+              backgroundColor: colors.surface,
+              flex: 1,
+            }}
+          >
+            <Text
+              numberOfLines={1}
+              style={[typography.headline5, { color: colors.strong }]}
+            >
+              {title}
+            </Text>
+            {subtitle ? (
+              <Text
+                numberOfLines={1}
+                style={[
+                  typography.body2,
+                  { color: colors.medium, marginTop: 4 },
+                ]}
+              >
+                {subtitle}
+              </Text>
+            ) : null}
+          </View>
+          {mode === "right" && (
+            <Image
+              style={{ aspectRatio }}
+              source={typeof image === "string" ? { uri: image } : image}
+              resizeMode="cover"
+            />
+          )}
+        </View>
+      </Elevation>
+    </Card>
+  );
+};
+
+export default withTheme(CardContainerShortImage);

package/src/components/CardInline.tsx

@@ -0,0 +1,93 @@
+// @ts-nocheck
+import React from "react";
+import {
+  Pressable,
+  View,
+  ImageSourcePropType,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+  StyleSheet,
+} from "react-native";
+import { Title, Subtitle } from "./Typography";
+import Image from "./Image";
+import Surface from "./Surface";
+import Config from "./Config";
+import { withTheme } from "../theming";
+import theme from "../styles/DefaultTheme";
+
+type Props = {
+  image?: string | ImageSourcePropType;
+  title?: string;
+  subtitle?: string;
+  aspectRatio?: number;
+  elevation?: number;
+  theme: typeof theme;
+  style?: StyleProp<ViewStyle>;
+  titleStyle?: StyleProp<TextStyle>;
+  subtitleStyle?: StyleProp<TextStyle>;
+  onPress: () => void;
+};
+
+const CardInline: React.FC<React.PropsWithChildren<Props>> = ({
+  image = Config.cardImageUrl,
+  title,
+  subtitle,
+  aspectRatio = 1.5,
+  elevation = 2,
+  style,
+  titleStyle,
+  subtitleStyle,
+  onPress,
+}) => {
+  const { alignItems, justifyContent, width, height } = StyleSheet.flatten(
+    style || {}
+  );
+  const imageStyles = width && height ? { width, height } : { aspectRatio };
+  return (
+    <Surface style={[{ elevation }, style]}>
+      <Pressable
+        disabled={!onPress}
+        onPress={onPress}
+        style={({ pressed }) => {
+          return [
+            {
+              opacity: pressed ? 0.8 : 1,
+            },
+          ];
+        }}
+      >
+        <Image
+          style={imageStyles}
+          source={typeof image === "string" ? { uri: image } : image}
+          resizeMode="cover"
+        />
+        <View style={[styles.overlay, { justifyContent, alignItems }]}>
+          {title ? (
+            <Title style={[{ color: "white" }, titleStyle]} text={title} />
+          ) : null}
+          {subtitle ? (
+            <Subtitle
+              style={[{ color: "rgba(255, 255, 255, 0.7)" }, subtitleStyle]}
+              text={subtitle}
+            />
+          ) : null}
+        </View>
+      </Pressable>
+    </Surface>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    padding: 16,
+    backgroundColor: "rgba(0, 0, 0, 0.2)",
+  },
+});
+
+export default withTheme(CardInline);

package/src/components/Carousel.tsx

@@ -0,0 +1,134 @@
+import * as React from "react";
+import { withTheme } from "../theming";
+import {
+  ScrollView,
+  View,
+  StyleSheet,
+  Dimensions,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
+import Image from "./Image";
+
+const screenWidth = Dimensions.get("window").width;
+
+type Props = {
+  data?: any[];
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  dotColor?: string;
+  theme: any;
+};
+
+function Pager({
+  color,
+  index,
+  length,
+}: {
+  color: string;
+  index: number;
+  length: number;
+}) {
+  return (
+    <View style={styles.pager}>
+      {Array.from({ length }).map((_, i) => {
+        const current = index === i;
+        const opacity = current ? 1 : 0.5;
+        const size = current ? 10 : 8;
+        return (
+          <View
+            key={i}
+            style={[
+              styles.bullet,
+              { backgroundColor: color, opacity, width: size, height: size },
+            ]}
+          />
+        );
+      })}
+    </View>
+  );
+}
+
+function Carousel({
+  data,
+  children,
+  dotColor = "strong",
+  style,
+  ...rest
+}: React.PropsWithChildren<Props>) {
+  const [index, setIndex] = React.useState(0);
+
+  const length = React.Children.count(children);
+  const itemsLength = (data?.length ?? 0) + length;
+  const slides = Array.isArray(data) ? data : [];
+
+  const { width, height } = StyleSheet.flatten(style || {});
+  const slideWidth = width || screenWidth;
+  const slideHeight = height || 250;
+
+  return (
+    <View style={[styles.container, style]} {...rest}>
+      <ScrollView
+        pagingEnabled
+        horizontal
+        decelerationRate="fast"
+        scrollEventThrottle={200}
+        showsHorizontalScrollIndicator={false}
+        onScroll={({ nativeEvent }) => {
+          const layoutWidth = nativeEvent.layoutMeasurement.width;
+          const offset = nativeEvent.contentOffset.x;
+          const currentIndex = Math.ceil(offset / layoutWidth);
+          setIndex(currentIndex);
+        }}
+      >
+        {slides.length > 0
+          ? slides.map((item, i) => {
+              return (
+                <Image
+                  key={i}
+                  resizeMode="cover"
+                  source={typeof item === "string" ? { uri: item } : item}
+                  style={[{ width: slideWidth, height: slideHeight }]}
+                />
+              );
+            })
+          : null}
+        {React.Children.map(children, (child: any) => {
+          const s = child?.props?.style || {};
+          return (
+            <View style={{ width: slideWidth }}>
+              {React.cloneElement(child, {
+                style: { ...s, width: slideWidth },
+              })}
+            </View>
+          );
+        })}
+      </ScrollView>
+      <Pager color={dotColor} index={index} length={itemsLength} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: "#eee",
+  },
+  pager: {
+    position: "absolute",
+    bottom: 12,
+    left: 0,
+    right: 0,
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  bullet: {
+    marginHorizontal: 2,
+    width: 10,
+    height: 10,
+    borderRadius: 20,
+    backgroundColor: "#000",
+  },
+});
+
+export default withTheme(Carousel);

package/src/components/CircleImage.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import {
+  Image,
+  ImageSourcePropType,
+  StyleProp,
+  ImageStyle,
+} from "react-native";
+import Config from "./Config";
+interface Props {
+  source?: string | ImageSourcePropType;
+  size?: number;
+  style?: StyleProp<ImageStyle>;
+}
+
+const CircleImage: React.FC<React.PropsWithChildren<Props>> = ({
+  source = Config.placeholderImageURL,
+  size = 60,
+  style,
+  ...props
+}) => {
+  const borderRadius = size / 2;
+
+  return (
+    <Image
+      style={[{ width: size, height: size, borderRadius }, style]}
+      source={typeof source === "string" ? { uri: source } : source}
+      resizeMode="cover"
+      {...props}
+    />
+  );
+};
+
+export default CircleImage;

package/src/components/CircularProgress.tsx

@@ -0,0 +1,188 @@
+import React from "react";
+import { View, StyleProp, ViewStyle } from "react-native";
+import { Svg, Path, G } from "react-native-svg";
+
+export type Props = {
+  size: number;
+  width: number;
+  backgroundWidth?: number;
+  tintColor?: string;
+  tintTransparency?: boolean;
+  backgroundColor?: string;
+  style?: StyleProp<ViewStyle>;
+  rotation?: string | number | undefined;
+  lineCap?: "butt" | "square" | "round" | undefined;
+  arcSweepAngle?: number;
+  fill: number;
+  children?: (fill: number) => React.ReactNode;
+  childrenContainerStyle?: StyleProp<ViewStyle>;
+  padding?: number;
+  renderCap?: (obj: { center: { x: number; y: number } }) => React.ReactNode;
+  dashedBackground?: { width: number; gap: number };
+  dashedTint?: { width: number; gap: number };
+};
+
+class CircularProgress extends React.Component<Props> {
+  polarToCartesian = (
+    centerX: number,
+    centerY: number,
+    radius: number,
+    angleInDegrees: number
+  ): { x: number; y: number } => {
+    var angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
+    return {
+      x: centerX + radius * Math.cos(angleInRadians),
+      y: centerY + radius * Math.sin(angleInRadians),
+    };
+  };
+
+  circlePath = (
+    x: number,
+    y: number,
+    radius: number,
+    startAngle: number,
+    endAngle: number
+  ): string => {
+    var start = this.polarToCartesian(x, y, radius, endAngle * 0.9999);
+    var end = this.polarToCartesian(x, y, radius, startAngle);
+    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
+    var d = [
+      "M",
+      start.x,
+      start.y,
+      "A",
+      radius,
+      radius,
+      0,
+      largeArcFlag,
+      0,
+      end.x,
+      end.y,
+    ];
+    return d.join(" ");
+  };
+
+  clampFill = (fill: number) => Math.min(100, Math.max(0, fill));
+
+  render() {
+    const {
+      size,
+      width,
+      backgroundWidth,
+      tintColor = "black",
+      tintTransparency = true,
+      backgroundColor,
+      style,
+      rotation = 90,
+      lineCap = "butt",
+      arcSweepAngle = 360,
+      fill,
+      children,
+      childrenContainerStyle,
+      padding = 0,
+      renderCap,
+      dashedBackground = { width: 0, gap: 0 },
+      dashedTint = { width: 0, gap: 0 },
+    } = this.props;
+
+    const maxWidthCircle = backgroundWidth
+      ? Math.max(width, backgroundWidth)
+      : width;
+    const sizeWithPadding = size / 2 + padding / 2;
+    const radius = size / 2 - maxWidthCircle / 2 - padding / 2;
+
+    const currentFillAngle = (arcSweepAngle * this.clampFill(fill)) / 100;
+    const backgroundPath = this.circlePath(
+      sizeWithPadding,
+      sizeWithPadding,
+      radius,
+      tintTransparency ? 0 : currentFillAngle,
+      arcSweepAngle
+    );
+    const circlePathItem = this.circlePath(
+      sizeWithPadding,
+      sizeWithPadding,
+      radius,
+      0,
+      currentFillAngle
+    );
+    const coordinate = this.polarToCartesian(
+      sizeWithPadding,
+      sizeWithPadding,
+      radius,
+      currentFillAngle
+    );
+    const cap = renderCap ? renderCap({ center: coordinate }) : null;
+
+    const offset = size - maxWidthCircle * 2;
+
+    const localChildrenContainerStyle: StyleProp<ViewStyle>[] = [
+      {
+        position: "absolute",
+        left: maxWidthCircle + padding / 2,
+        top: maxWidthCircle + padding / 2,
+        width: offset,
+        height: offset,
+        borderRadius: offset / 2,
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden",
+      },
+      childrenContainerStyle,
+    ];
+
+    const strokeDasharrayTint =
+      dashedTint.gap > 0
+        ? Object.values(dashedTint)
+            .map((value) => value.toString())
+            .join(" ")
+        : "";
+
+    const strokeDasharrayBackground =
+      dashedBackground.gap > 0
+        ? Object.values(dashedBackground)
+            .map((value) => value.toString())
+            .join(" ")
+        : "";
+
+    return (
+      <View style={style}>
+        <Svg width={size + padding} height={size + padding}>
+          {/* @ts-ignore */}
+          <G
+            rotation={rotation}
+            originX={(size + padding) / 2}
+            originY={(size + padding) / 2}
+          >
+            {backgroundColor && (
+              <Path
+                d={backgroundPath}
+                stroke={backgroundColor}
+                strokeWidth={backgroundWidth || width}
+                strokeLinecap={lineCap}
+                strokeDasharray={strokeDasharrayBackground}
+                fill="transparent"
+              />
+            )}
+            {fill > 0 && (
+              <Path
+                d={circlePathItem}
+                stroke={tintColor}
+                strokeWidth={width}
+                strokeLinecap={lineCap}
+                strokeDasharray={strokeDasharrayTint}
+                fill="transparent"
+              />
+            )}
+            {cap}
+          </G>
+        </Svg>
+        {children && (
+          <View style={localChildrenContainerStyle}>{children(fill)}</View>
+        )}
+      </View>
+    );
+  }
+}
+
+export default CircularProgress;

package/src/components/Container.tsx

@@ -0,0 +1,116 @@
+import * as React from "react";
+import {
+  View,
+  ImageBackground,
+  ImageSourcePropType,
+  StyleProp,
+  StyleSheet,
+  ViewStyle,
+} from "react-native";
+import { withTheme } from "../theming";
+
+import Elevation from "./Elevation";
+import type { Theme } from "../styles/DefaultTheme";
+import { ResizeModeType } from "./ResizeMode";
+
+type Props = {
+  theme: Theme;
+  useThemeGutterPadding: boolean;
+  borderColor: string;
+  borderWidth: number;
+  backgroundColor: string;
+  backgroundImage?: string | ImageSourcePropType;
+  backgroundImageResizeMode?: ResizeModeType;
+  elevation?: number;
+  style?: StyleProp<ViewStyle>;
+  children?: React.ReactNode;
+};
+
+const Container: React.FC<React.PropsWithChildren<Props>> = ({
+  useThemeGutterPadding,
+  borderColor,
+  borderWidth,
+  backgroundColor,
+  backgroundImage,
+  backgroundImageResizeMode,
+  elevation,
+  style,
+  children,
+  theme, // eslint-disable-line @typescript-eslint/no-unused-vars
+  ...rest
+}) => {
+  const {
+    flex,
+    flexGrow,
+    flexWrap,
+    flexBasis,
+    flexShrink,
+    flexDirection,
+    alignContent,
+    justifyContent,
+    alignItems,
+    padding,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingVertical,
+    paddingHorizontal,
+    ...styleProp
+  } = StyleSheet.flatten(style) || {};
+
+  const containerStyle: StyleProp<ViewStyle> = {
+    backgroundColor,
+    borderColor,
+    borderWidth,
+    width: "100%",
+    ...styleProp,
+  };
+
+  const innerStyle: StyleProp<ViewStyle> = {
+    flex,
+    flexGrow,
+    flexWrap,
+    flexBasis,
+    flexShrink,
+    flexDirection,
+    alignContent,
+    justifyContent,
+    alignItems,
+    padding,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingVertical,
+    paddingHorizontal: paddingHorizontal || useThemeGutterPadding ? 16 : 0,
+  };
+
+  const Wrap = elevation ? Elevation : View;
+
+  if (elevation) containerStyle.elevation = elevation;
+
+  return (
+    <Wrap style={[containerStyle, style]} {...rest}>
+      {backgroundImage ? (
+        <ImageBackground
+          source={
+            typeof backgroundImage === "string"
+              ? { uri: backgroundImage }
+              : backgroundImage
+          }
+          resizeMode={backgroundImageResizeMode}
+          style={{
+            flex: 1,
+          }}
+        >
+          <View style={innerStyle}>{children}</View>
+        </ImageBackground>
+      ) : (
+        <View style={innerStyle}>{children}</View>
+      )}
+    </Wrap>
+  );
+};
+
+export default withTheme(Container);