@draftbit/core 48.5.5-ee2f75.2 → 48.5.6

package/src/deprecated-components/CircularProgress.tsx

@@ -1,191 +1,191 @@
-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 };
-};
-
-/**
- * @deprecated DEPRECATED
- */
-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;
+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 };
+};
+
+/**
+ * @deprecated DEPRECATED
+ */
+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/deprecated-components/Container.tsx

@@ -1,126 +1,126 @@
-import * as React from "react";
-import {
-  View,
-  ImageBackground,
-  ImageSourcePropType,
-  StyleProp,
-  StyleSheet,
-  ViewStyle,
-} from "react-native";
-import { withTheme } from "../theming";
-
-import Elevation from "../components/Elevation";
-import type { Theme } from "../styles/DefaultTheme";
-
-type ResizeModeType =
-  | "cover"
-  | "contain"
-  | "stretch"
-  | "repeat"
-  | "center"
-  | undefined;
-
-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;
-};
-
-/**
- * @deprecated DEPRECATED
- */
-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);
+import * as React from "react";
+import {
+  View,
+  ImageBackground,
+  ImageSourcePropType,
+  StyleProp,
+  StyleSheet,
+  ViewStyle,
+} from "react-native";
+import { withTheme } from "../theming";
+
+import Elevation from "../components/Elevation";
+import type { Theme } from "../styles/DefaultTheme";
+
+type ResizeModeType =
+  | "cover"
+  | "contain"
+  | "stretch"
+  | "repeat"
+  | "center"
+  | undefined;
+
+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;
+};
+
+/**
+ * @deprecated DEPRECATED
+ */
+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);