@draftbit/core 46.4.4-caab07.0 → 46.4.4-cc754a.2

package/src/components/CircularProgress.js

@@ -2,151 +2,80 @@ 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)
-        )
-    );
-  }
+    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/Config.js

@@ -1,71 +1,64 @@
 import { Dimensions, Platform } from "react-native";
 const getWindowDimensions = () => {
-  const { width, height } = Dimensions.get("window");
-  return {
-    windowWidth: width,
-    windowHeight: height,
-  };
+    const { width, height } = Dimensions.get("window");
+    return {
+        windowWidth: width,
+        windowHeight: height,
+    };
 };
 const { windowWidth, windowHeight } = getWindowDimensions();
 const getFilters = (options) => {
-  const { width, height } = options;
-  const filters = ["c_scale", "q_auto", "dpr_auto"];
-  if (width) filters.push(`w_${width}`);
-  if (height) filters.push(`h_${height}`);
-  return filters.join(",");
+    const { width, height } = options;
+    const filters = ["c_scale", "q_auto", "dpr_auto"];
+    if (width)
+        filters.push(`w_${width}`);
+    if (height)
+        filters.push(`h_${height}`);
+    return filters.join(",");
 };
 const buildImageUrl = (options, name) => {
-  const filters = getFilters(options);
-  return [
-    "https://res.cloudinary.com/altos/image/upload",
-    filters,
-    `${name}.png`,
-  ].join("/");
+    const filters = getFilters(options);
+    return [
+        "https://res.cloudinary.com/altos/image/upload",
+        filters,
+        `${name}.png`,
+    ].join("/");
 };
 const getExtension = () => {
-  return Platform.OS === "web" ? ".svg" : ".png";
+    return Platform.OS === "web" ? ".svg" : ".png";
 };
 export default {
-  windowWidth,
-  windowHeight,
-  avatarImageUrl: buildImageUrl(
-    {
-      width: 60,
-      height: 60,
-    },
-    "Avatar"
-  ),
-  avatarImageSize: 60,
-  cardImageSize: 200,
-  cardImageUrl:
-    "https://static.draftbit.com/images/placeholder-image" + getExtension(),
-  cardIconSize: 16,
-  cardIconBackgroundOpacity: 0.24,
-  cardIconElevation: 1,
-  placeholderImageURL:
-    "https://static.draftbit.com/images/placeholder-image" + getExtension(),
-  getPlaceholderImageUrl: (size) =>
-    buildImageUrl(
-      { width: size.width, height: size.height },
-      "image-placeholder_1"
-    ),
-  placeholderSvgURL: "https://static.draftbit.com/images/placeholder-image.svg",
-  squareImageUrl: buildImageUrl({ width: 100, height: 100 }, "Avatar"),
-  FABSize: 40,
-  FABBorderRadius: 20,
-  FABFixedHeight: 64,
-  cardContainerShortImageAspectRatio: 1,
-  rowSingleLineImageSize: 24,
-  rowMultiLineImageSize: 48,
-  rowSingleLineIconSize: 24,
-  rowMultiLineIconSize: 16,
-  headerIconSize: 24,
-  buttonIconSize: 24,
-  swiperInactiveDotSize: 6,
-  swiperActiveDotSize: 10,
-  fieldSearchBarFullIconSize: 24,
-  stepperButtonSize: 40,
-  radioButtonSize: 24,
-  topSafeAreaViewHeight: 0,
-  // topSafeAreaViewHeight: Platform.OS === "android" ? Constants.statusBarHeight : 0
+    windowWidth,
+    windowHeight,
+    avatarImageUrl: buildImageUrl({
+        width: 60,
+        height: 60,
+    }, "Avatar"),
+    avatarImageSize: 60,
+    cardImageSize: 200,
+    cardImageUrl: "https://static.draftbit.com/images/placeholder-image" + getExtension(),
+    cardIconSize: 16,
+    cardIconBackgroundOpacity: 0.24,
+    cardIconElevation: 1,
+    placeholderImageURL: "https://static.draftbit.com/images/placeholder-image" + getExtension(),
+    getPlaceholderImageUrl: (size) => buildImageUrl({ width: size.width, height: size.height }, "image-placeholder_1"),
+    placeholderSvgURL: "https://static.draftbit.com/images/placeholder-image.svg",
+    squareImageUrl: buildImageUrl({ width: 100, height: 100 }, "Avatar"),
+    FABSize: 40,
+    FABBorderRadius: 20,
+    FABFixedHeight: 64,
+    cardContainerShortImageAspectRatio: 1,
+    rowSingleLineImageSize: 24,
+    rowMultiLineImageSize: 48,
+    rowSingleLineIconSize: 24,
+    rowMultiLineIconSize: 16,
+    headerIconSize: 24,
+    buttonIconSize: 24,
+    swiperInactiveDotSize: 6,
+    swiperActiveDotSize: 10,
+    fieldSearchBarFullIconSize: 24,
+    stepperButtonSize: 40,
+    radioButtonSize: 24,
+    topSafeAreaViewHeight: 0,
+    // topSafeAreaViewHeight: Platform.OS === "android" ? Constants.statusBarHeight : 0
 };

package/src/components/Container.js

@@ -1,85 +1,43 @@
 import * as React from "react";
-import { View, ImageBackground, StyleSheet } from "react-native";
+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)
-  );
+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);