@draftbit/core 48.5.6 → 48.5.7-26899.2

package/src/components/Pressable.tsx

@@ -1,44 +1,44 @@
-import React from "react";
-import {
-  Pressable as NativePressable,
-  PressableProps,
-  ViewStyle,
-} from "react-native";
-
-type Props = {
-  style?: ViewStyle;
-  activeOpacity?: number;
-  disabledOpacity?: number;
-} & PressableProps;
-
-export default function Pressable({
-  children,
-  disabled,
-  onPress,
-  activeOpacity = 0.8,
-  disabledOpacity = 0.8,
-  delayLongPress,
-  hitSlop,
-  style,
-  ...props
-}: Props) {
-  return (
-    <NativePressable
-      onPress={onPress}
-      disabled={disabled}
-      delayLongPress={delayLongPress ? delayLongPress : 500}
-      hitSlop={hitSlop ? hitSlop : 8}
-      style={({ pressed }) => {
-        return [
-          {
-            opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1,
-          },
-          style,
-        ];
-      }}
-      {...props}
-    >
-      {children}
-    </NativePressable>
-  );
-}
+import React from "react";
+import {
+  Pressable as NativePressable,
+  PressableProps,
+  ViewStyle,
+} from "react-native";
+
+type Props = {
+  style?: ViewStyle;
+  activeOpacity?: number;
+  disabledOpacity?: number;
+} & PressableProps;
+
+export default function Pressable({
+  children,
+  disabled,
+  onPress,
+  activeOpacity = 0.8,
+  disabledOpacity = 0.8,
+  delayLongPress,
+  hitSlop,
+  style,
+  ...props
+}: Props) {
+  return (
+    <NativePressable
+      onPress={onPress}
+      disabled={disabled}
+      delayLongPress={delayLongPress ? delayLongPress : 500}
+      hitSlop={hitSlop ? hitSlop : 8}
+      style={({ pressed }) => {
+        return [
+          {
+            opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1,
+          },
+          style,
+        ];
+      }}
+      {...props}
+    >
+      {children}
+    </NativePressable>
+  );
+}

package/src/components/Progress/CircularProgress/CircularProgress.js

@@ -0,0 +1,103 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+import { View } from "react-native";
+import Animated, { useAnimatedProps, useSharedValue, withTiming, } from "react-native-reanimated";
+import { DEFAULT_ANIMATION_DURATION, } from "../ProgressCommon";
+export const AnimatedPath = Animated.createAnimatedComponent(Path);
+export const CircularProgress = ({ theme, minimumValue = 0, maximumValue = 100, value = minimumValue, thickness = 10, trackThickness = thickness, color = theme.colors.primary, trackColor = theme.colors.divider, trackOpacity = 1, showTrack = true, animationDuration = DEFAULT_ANIMATION_DURATION, isAnimated = true, lineCap = "round", trackLineCap = lineCap, dashWidth, trackDashWidth, dashGap, trackDashGap, dashOffset, trackDashOffset, customDashArray, trackCustomDashArray, onFullPathWidth, startPosition = "top", style, testID, }) => {
+    const [svgContainerWidth, setSvgContainerWidth] = React.useState(0);
+    const [circumfrence, setCircumefrence] = React.useState(0);
+    const dashArray = dashWidth !== undefined
+        ? `${dashWidth} ${dashGap || dashWidth}`
+        : undefined;
+    const trackDashArray = trackDashWidth !== undefined
+        ? `${trackDashWidth} ${trackDashGap || trackDashWidth}`
+        : undefined;
+    const maxThickness = Math.max(thickness, trackThickness);
+    const thicknessOffset = maxThickness / 2; // This offset guarantees nothing is cut off by view bounds
+    const radius = svgContainerWidth / 2;
+    const c = 2 * Math.PI * radius;
+    if (c !== circumfrence) {
+        setCircumefrence(c);
+    }
+    const startAngle = React.useMemo(() => {
+        switch (startPosition) {
+            case "top":
+                return 0;
+            case "right":
+                return 90;
+            case "bottom":
+                return 180;
+            case "left":
+                return 270;
+        }
+    }, [startPosition]);
+    const currentFillPercentage = value / (maximumValue + minimumValue);
+    const currentAngle = useSharedValue(startAngle);
+    const progressPathAnimatedProps = useAnimatedProps(() => {
+        const isBelowMinAngle = currentAngle.value <= startAngle;
+        return {
+            d: circlePath(radius, radius, radius - thicknessOffset, startAngle, Math.min(currentAngle.value, startAngle + 360) //Prevents going beyond the max angle
+            ),
+            strokeOpacity: isBelowMinAngle ? 0.0 : 1.0,
+        };
+    });
+    React.useEffect(() => {
+        currentAngle.value = withTiming(startAngle + currentFillPercentage * 360, {
+            duration: isAnimated ? animationDuration : 0,
+        });
+    }, [
+        value,
+        currentFillPercentage,
+        animationDuration,
+        currentAngle,
+        maximumValue,
+        minimumValue,
+        isAnimated,
+        startAngle,
+    ]);
+    React.useEffect(() => {
+        onFullPathWidth === null || onFullPathWidth === void 0 ? void 0 : onFullPathWidth(circumfrence);
+    }, [circumfrence, onFullPathWidth]);
+    return (React.createElement(View, { onLayout: (event) => {
+            const width = event.nativeEvent.layout.width;
+            setSvgContainerWidth(width);
+        }, style: [
+            {
+                height: svgContainerWidth,
+            },
+            style,
+        ] },
+        React.createElement(Svg, { testID: testID !== null && testID !== void 0 ? testID : "circular-progress-component", style: { flex: 1 } },
+            showTrack && (React.createElement(Path, { d: circlePath(radius, radius, radius - thicknessOffset, startAngle, startAngle + 360), stroke: trackColor, strokeWidth: trackThickness, strokeOpacity: trackOpacity, strokeLinecap: trackLineCap, strokeDasharray: trackCustomDashArray || trackDashArray, strokeDashoffset: trackDashOffset, fill: "rgba(0,0,0,0)" })),
+            React.createElement(AnimatedPath, { animatedProps: progressPathAnimatedProps, stroke: color, strokeWidth: thickness, strokeLinecap: lineCap, strokeDasharray: customDashArray || dashArray, strokeDashoffset: dashOffset, fill: "rgba(0,0,0,0)", onPress: () => { } }))));
+};
+// From: https://github.com/bartgryszko/react-native-circular-progress/blob/a93b501aea40306126c8ede72089741eead52308/src/CircularProgress.js#L15
+function circlePath(x, y, radius, startAngle, endAngle) {
+    "worklet"; // Reanimated worklet to be runnable on the UI thread
+    function 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),
+        };
+    }
+    var start = polarToCartesian(x, y, radius, endAngle * 0.9999);
+    var end = 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(" ");
+}
+//# sourceMappingURL=CircularProgress.js.map

package/src/components/Progress/CircularProgress/CircularProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgress.js","sourceRoot":"","sources":["CircularProgress.tsx"],"names":[],"mappings":"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"}

package/src/components/Progress/CircularProgress/CircularProgress.tsx

@@ -1,205 +1,205 @@
-import React from "react";
-import Svg, { Path, PathProps } from "react-native-svg";
-import { View } from "react-native";
-import Animated, {
-  useAnimatedProps,
-  useSharedValue,
-  withTiming,
-} from "react-native-reanimated";
-import {
-  DEFAULT_ANIMATION_DURATION,
-  ValueProgressProps,
-  CircularProgressProps,
-} from "../ProgressCommon";
-
-export const AnimatedPath = Animated.createAnimatedComponent(Path);
-
-export const CircularProgress: React.FC<
-  ValueProgressProps & CircularProgressProps
-> = ({
-  theme,
-  minimumValue = 0,
-  maximumValue = 100,
-  value = minimumValue,
-  thickness = 10,
-  trackThickness = thickness,
-  color = theme.colors.primary,
-  trackColor = theme.colors.divider,
-  trackOpacity = 1,
-  showTrack = true,
-  animationDuration = DEFAULT_ANIMATION_DURATION,
-  isAnimated = true,
-  lineCap = "round",
-  trackLineCap = lineCap,
-  dashWidth,
-  trackDashWidth,
-  dashGap,
-  trackDashGap,
-  dashOffset,
-  trackDashOffset,
-  customDashArray,
-  trackCustomDashArray,
-  onFullPathWidth,
-  startPosition = "top",
-  style,
-  testID,
-}) => {
-  const [svgContainerWidth, setSvgContainerWidth] = React.useState(0);
-  const [circumfrence, setCircumefrence] = React.useState(0);
-
-  const dashArray =
-    dashWidth !== undefined
-      ? `${dashWidth} ${dashGap || dashWidth}`
-      : undefined;
-  const trackDashArray =
-    trackDashWidth !== undefined
-      ? `${trackDashWidth} ${trackDashGap || trackDashWidth}`
-      : undefined;
-
-  const maxThickness = Math.max(thickness, trackThickness);
-  const thicknessOffset = maxThickness / 2; // This offset guarantees nothing is cut off by view bounds
-
-  const radius = svgContainerWidth / 2;
-
-  const c = 2 * Math.PI * radius;
-  if (c !== circumfrence) {
-    setCircumefrence(c);
-  }
-
-  const startAngle = React.useMemo(() => {
-    switch (startPosition) {
-      case "top":
-        return 0;
-      case "right":
-        return 90;
-      case "bottom":
-        return 180;
-      case "left":
-        return 270;
-    }
-  }, [startPosition]);
-
-  const currentFillPercentage = value / (maximumValue + minimumValue);
-  const currentAngle = useSharedValue(startAngle);
-
-  const progressPathAnimatedProps = useAnimatedProps<PathProps>(() => {
-    const isBelowMinAngle = currentAngle.value <= startAngle;
-    return {
-      d: circlePath(
-        radius,
-        radius,
-        radius - thicknessOffset,
-        startAngle,
-        Math.min(currentAngle.value, startAngle + 360) //Prevents going beyond the max angle
-      ),
-      strokeOpacity: isBelowMinAngle ? 0.0 : 1.0,
-    };
-  });
-
-  React.useEffect(() => {
-    currentAngle.value = withTiming(startAngle + currentFillPercentage * 360, {
-      duration: isAnimated ? animationDuration : 0,
-    });
-  }, [
-    value,
-    currentFillPercentage,
-    animationDuration,
-    currentAngle,
-    maximumValue,
-    minimumValue,
-    isAnimated,
-    startAngle,
-  ]);
-
-  React.useEffect(() => {
-    onFullPathWidth?.(circumfrence);
-  }, [circumfrence, onFullPathWidth]);
-
-  return (
-    <View
-      onLayout={(event) => {
-        const width = event.nativeEvent.layout.width;
-        setSvgContainerWidth(width);
-      }}
-      style={[
-        {
-          height: svgContainerWidth,
-        },
-        style,
-      ]}
-    >
-      <Svg testID={testID ?? "circular-progress-component"} style={{ flex: 1 }}>
-        {showTrack && (
-          <Path
-            d={circlePath(
-              radius,
-              radius,
-              radius - thicknessOffset,
-              startAngle,
-              startAngle + 360
-            )}
-            stroke={trackColor}
-            strokeWidth={trackThickness}
-            strokeOpacity={trackOpacity}
-            strokeLinecap={trackLineCap}
-            strokeDasharray={trackCustomDashArray || trackDashArray}
-            strokeDashoffset={trackDashOffset}
-            fill={"rgba(0,0,0,0)"} //Prevents default black fill
-          />
-        )}
-        <AnimatedPath
-          animatedProps={progressPathAnimatedProps}
-          stroke={color}
-          strokeWidth={thickness}
-          strokeLinecap={lineCap}
-          strokeDasharray={customDashArray || dashArray}
-          strokeDashoffset={dashOffset}
-          fill={"rgba(0,0,0,0)"}
-          onPress={() => {}} //Addresses reanimated issue with SVG (https://github.com/software-mansion/react-native-reanimated/issues/3321#issuecomment-1256983430)
-        />
-      </Svg>
-    </View>
-  );
-};
-
-// From: https://github.com/bartgryszko/react-native-circular-progress/blob/a93b501aea40306126c8ede72089741eead52308/src/CircularProgress.js#L15
-function circlePath(
-  x: number,
-  y: number,
-  radius: number,
-  startAngle: number,
-  endAngle: number
-) {
-  "worklet"; // Reanimated worklet to be runnable on the UI thread
-
-  function polarToCartesian(
-    centerX: number,
-    centerY: number,
-    radius: number,
-    angleInDegrees: number
-  ) {
-    var angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
-    return {
-      x: centerX + radius * Math.cos(angleInRadians),
-      y: centerY + radius * Math.sin(angleInRadians),
-    };
-  }
-
-  var start = polarToCartesian(x, y, radius, endAngle * 0.9999);
-  var end = 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(" ");
-}
+import React from "react";
+import Svg, { Path, PathProps } from "react-native-svg";
+import { View } from "react-native";
+import Animated, {
+  useAnimatedProps,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import {
+  DEFAULT_ANIMATION_DURATION,
+  ValueProgressProps,
+  CircularProgressProps,
+} from "../ProgressCommon";
+
+export const AnimatedPath = Animated.createAnimatedComponent(Path);
+
+export const CircularProgress: React.FC<
+  ValueProgressProps & CircularProgressProps
+> = ({
+  theme,
+  minimumValue = 0,
+  maximumValue = 100,
+  value = minimumValue,
+  thickness = 10,
+  trackThickness = thickness,
+  color = theme.colors.primary,
+  trackColor = theme.colors.divider,
+  trackOpacity = 1,
+  showTrack = true,
+  animationDuration = DEFAULT_ANIMATION_DURATION,
+  isAnimated = true,
+  lineCap = "round",
+  trackLineCap = lineCap,
+  dashWidth,
+  trackDashWidth,
+  dashGap,
+  trackDashGap,
+  dashOffset,
+  trackDashOffset,
+  customDashArray,
+  trackCustomDashArray,
+  onFullPathWidth,
+  startPosition = "top",
+  style,
+  testID,
+}) => {
+  const [svgContainerWidth, setSvgContainerWidth] = React.useState(0);
+  const [circumfrence, setCircumefrence] = React.useState(0);
+
+  const dashArray =
+    dashWidth !== undefined
+      ? `${dashWidth} ${dashGap || dashWidth}`
+      : undefined;
+  const trackDashArray =
+    trackDashWidth !== undefined
+      ? `${trackDashWidth} ${trackDashGap || trackDashWidth}`
+      : undefined;
+
+  const maxThickness = Math.max(thickness, trackThickness);
+  const thicknessOffset = maxThickness / 2; // This offset guarantees nothing is cut off by view bounds
+
+  const radius = svgContainerWidth / 2;
+
+  const c = 2 * Math.PI * radius;
+  if (c !== circumfrence) {
+    setCircumefrence(c);
+  }
+
+  const startAngle = React.useMemo(() => {
+    switch (startPosition) {
+      case "top":
+        return 0;
+      case "right":
+        return 90;
+      case "bottom":
+        return 180;
+      case "left":
+        return 270;
+    }
+  }, [startPosition]);
+
+  const currentFillPercentage = value / (maximumValue + minimumValue);
+  const currentAngle = useSharedValue(startAngle);
+
+  const progressPathAnimatedProps = useAnimatedProps<PathProps>(() => {
+    const isBelowMinAngle = currentAngle.value <= startAngle;
+    return {
+      d: circlePath(
+        radius,
+        radius,
+        radius - thicknessOffset,
+        startAngle,
+        Math.min(currentAngle.value, startAngle + 360) //Prevents going beyond the max angle
+      ),
+      strokeOpacity: isBelowMinAngle ? 0.0 : 1.0,
+    };
+  });
+
+  React.useEffect(() => {
+    currentAngle.value = withTiming(startAngle + currentFillPercentage * 360, {
+      duration: isAnimated ? animationDuration : 0,
+    });
+  }, [
+    value,
+    currentFillPercentage,
+    animationDuration,
+    currentAngle,
+    maximumValue,
+    minimumValue,
+    isAnimated,
+    startAngle,
+  ]);
+
+  React.useEffect(() => {
+    onFullPathWidth?.(circumfrence);
+  }, [circumfrence, onFullPathWidth]);
+
+  return (
+    <View
+      onLayout={(event) => {
+        const width = event.nativeEvent.layout.width;
+        setSvgContainerWidth(width);
+      }}
+      style={[
+        {
+          height: svgContainerWidth,
+        },
+        style,
+      ]}
+    >
+      <Svg testID={testID ?? "circular-progress-component"} style={{ flex: 1 }}>
+        {showTrack && (
+          <Path
+            d={circlePath(
+              radius,
+              radius,
+              radius - thicknessOffset,
+              startAngle,
+              startAngle + 360
+            )}
+            stroke={trackColor}
+            strokeWidth={trackThickness}
+            strokeOpacity={trackOpacity}
+            strokeLinecap={trackLineCap}
+            strokeDasharray={trackCustomDashArray || trackDashArray}
+            strokeDashoffset={trackDashOffset}
+            fill={"rgba(0,0,0,0)"} //Prevents default black fill
+          />
+        )}
+        <AnimatedPath
+          animatedProps={progressPathAnimatedProps}
+          stroke={color}
+          strokeWidth={thickness}
+          strokeLinecap={lineCap}
+          strokeDasharray={customDashArray || dashArray}
+          strokeDashoffset={dashOffset}
+          fill={"rgba(0,0,0,0)"}
+          onPress={() => {}} //Addresses reanimated issue with SVG (https://github.com/software-mansion/react-native-reanimated/issues/3321#issuecomment-1256983430)
+        />
+      </Svg>
+    </View>
+  );
+};
+
+// From: https://github.com/bartgryszko/react-native-circular-progress/blob/a93b501aea40306126c8ede72089741eead52308/src/CircularProgress.js#L15
+function circlePath(
+  x: number,
+  y: number,
+  radius: number,
+  startAngle: number,
+  endAngle: number
+) {
+  "worklet"; // Reanimated worklet to be runnable on the UI thread
+
+  function polarToCartesian(
+    centerX: number,
+    centerY: number,
+    radius: number,
+    angleInDegrees: number
+  ) {
+    var angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
+    return {
+      x: centerX + radius * Math.cos(angleInRadians),
+      y: centerY + radius * Math.sin(angleInRadians),
+    };
+  }
+
+  var start = polarToCartesian(x, y, radius, endAngle * 0.9999);
+  var end = 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(" ");
+}

package/src/components/Progress/CircularProgress/index.js

@@ -0,0 +1,14 @@
+import React from "react";
+import IndeterminateProgress from "../IndeterminateProgress";
+import { CircularProgress as CircularProgressComponent } from "./CircularProgress";
+import { withTheme } from "../../../theming";
+const CircularProgress = (props) => {
+    if (props.indeterminate) {
+        return (React.createElement(IndeterminateProgress, { ProgressComponent: CircularProgressComponent, ...props }));
+    }
+    else {
+        return React.createElement(CircularProgressComponent, { ...props });
+    }
+};
+export default withTheme(CircularProgress);
+//# sourceMappingURL=index.js.map

package/src/components/Progress/CircularProgress/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,qBAAqB,MAAM,0BAA0B,CAAC;AAM7D,OAAO,EAAE,gBAAgB,IAAI,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AACnF,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,MAAM,gBAAgB,GAElB,CAAC,KAAK,EAAE,EAAE;IACZ,IAAI,KAAK,CAAC,aAAa,EAAE;QACvB,OAAO,CACL,oBAAC,qBAAqB,IACpB,iBAAiB,EACf,yBAAwE,KAEtE,KAAK,GACT,CACH,CAAC;KACH;SAAM;QACL,OAAO,oBAAC,yBAAyB,OAAK,KAAK,GAAI,CAAC;KACjD;AACH,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC,gBAAgB,CAAC,CAAC"}