@draftbit/core 47.0.0-eae99e.2 → 47.0.1-9fd6f2.2

package/src/components/Carousel.js

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { withTheme } from "../theming";
+import { ScrollView, View, StyleSheet, Dimensions, } from "react-native";
+import Image from "./Image";
+const screenWidth = Dimensions.get("window").width;
+function Pager({ color, index, length, }) {
+    return (React.createElement(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 (React.createElement(View, { key: i, style: [
+                styles.bullet,
+                { backgroundColor: color, opacity, width: size, height: size },
+            ] }));
+    })));
+}
+function Carousel({ data, children, dotColor = "strong", style, ...rest }) {
+    var _a;
+    const [index, setIndex] = React.useState(0);
+    const length = React.Children.count(children);
+    const itemsLength = ((_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : 0) + length;
+    const slides = Array.isArray(data) ? data : [];
+    const { width, height } = StyleSheet.flatten(style || {});
+    const slideWidth = width || screenWidth;
+    const slideHeight = height || 250;
+    return (React.createElement(View, { style: [styles.container, style], ...rest },
+        React.createElement(ScrollView, { pagingEnabled: true, horizontal: true, 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 (React.createElement(Image, { key: i, resizeMode: "cover", source: typeof item === "string" ? { uri: item } : item, style: [{ width: slideWidth, height: slideHeight }] }));
+                })
+                : null,
+            React.Children.map(children, (child) => {
+                var _a;
+                const s = ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.style) || {};
+                return (React.createElement(View, { style: { width: slideWidth } }, React.cloneElement(child, {
+                    style: { ...s, width: slideWidth },
+                })));
+            })),
+        React.createElement(Pager, { color: dotColor, index: index, length: itemsLength })));
+}
+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/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.js

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { Image, } from "react-native";
+import Config from "./Config";
+const CircleImage = ({ source = Config.placeholderImageURL, size = 60, style, ...props }) => {
+    const borderRadius = size / 2;
+    return (React.createElement(Image, { style: [{ width: size, height: size, borderRadius }, style], source: typeof source === "string" ? { uri: source } : source, resizeMode: "cover", ...props }));
+};
+export default CircleImage;

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

@@ -0,0 +1,81 @@
+import React from "react";
+import { View } from "react-native";
+import { Svg, Path, G } from "react-native-svg";
+class CircularProgress extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
+            var angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
+            return {
+                x: centerX + radius * Math.cos(angleInRadians),
+                y: centerY + radius * Math.sin(angleInRadians),
+            };
+        };
+        this.circlePath = (x, y, radius, startAngle, endAngle) => {
+            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(" ");
+        };
+        this.clampFill = (fill) => 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 = [
+            {
+                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 (React.createElement(View, { style: style },
+            React.createElement(Svg, { width: size + padding, height: size + padding },
+                React.createElement(G, { rotation: rotation, originX: (size + padding) / 2, originY: (size + padding) / 2 },
+                    backgroundColor && (React.createElement(Path, { d: backgroundPath, stroke: backgroundColor, strokeWidth: backgroundWidth || width, strokeLinecap: lineCap, strokeDasharray: strokeDasharrayBackground, fill: "transparent" })),
+                    fill > 0 && (React.createElement(Path, { d: circlePathItem, stroke: tintColor, strokeWidth: width, strokeLinecap: lineCap, strokeDasharray: strokeDasharrayTint, fill: "transparent" })),
+                    cap)),
+            children && (React.createElement(View, { style: localChildrenContainerStyle }, children(fill)))));
+    }
+}
+export default CircularProgress;

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

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { View, ImageBackground, StyleSheet, } from "react-native";
+import { withTheme } from "../theming";
+import Elevation from "./Elevation";
+const Container = ({ 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 = {
+        backgroundColor,
+        borderColor,
+        borderWidth,
+        width: "100%",
+        ...styleProp,
+    };
+    const innerStyle = {
+        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 (React.createElement(Wrap, { style: [containerStyle, style], ...rest }, backgroundImage ? (React.createElement(ImageBackground, { source: typeof backgroundImage === "string"
+            ? { uri: backgroundImage }
+            : backgroundImage, resizeMode: backgroundImageResizeMode, style: {
+            flex: 1,
+        } },
+        React.createElement(View, { style: innerStyle }, children))) : (React.createElement(View, { style: innerStyle }, children))));
+};
+export default withTheme(Container);

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);