@draftbit/core 48.5.5-bc0b6e.2 → 48.5.6

package/src/components/Progress/LinearProgress/LinearProgress.tsx

@@ -1,133 +1,133 @@
-import React from "react";
-import Svg, { Line, LineProps } from "react-native-svg";
-import { View } from "react-native";
-import Animated, {
-  useAnimatedProps,
-  useSharedValue,
-  withTiming,
-} from "react-native-reanimated";
-import {
-  DEFAULT_ANIMATION_DURATION,
-  ValueProgressProps,
-} from "../ProgressCommon";
-
-export const AnimatedLine = Animated.createAnimatedComponent(Line);
-
-export const LinearProgress: React.FC<ValueProgressProps> = ({
-  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,
-  style,
-  testID,
-}) => {
-  const [svgContainerWidth, setSvgContainerWidth] = 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 progressLineWidth = svgContainerWidth - thicknessOffset;
-  const trackProgressLineWidth = svgContainerWidth - thicknessOffset;
-
-  const currentFillPercentage = value / (maximumValue + minimumValue);
-  const currentProgressLineWidth = useSharedValue(0);
-
-  const progressLineAnimatedProps = useAnimatedProps<LineProps>(() => {
-    const isBelowMinWidth = currentProgressLineWidth.value <= thicknessOffset;
-    return {
-      x2: Math.min(progressLineWidth, currentProgressLineWidth.value), //Prevents going beyond the max width
-      strokeOpacity: isBelowMinWidth ? 0.0 : 1.0,
-    };
-  });
-
-  React.useEffect(() => {
-    currentProgressLineWidth.value = withTiming(
-      progressLineWidth * currentFillPercentage,
-      {
-        duration: isAnimated ? animationDuration : 0,
-      }
-    );
-  }, [
-    value,
-    progressLineWidth,
-    currentFillPercentage,
-    animationDuration,
-    currentProgressLineWidth,
-    maximumValue,
-    minimumValue,
-    isAnimated,
-  ]);
-
-  return (
-    <View
-      onLayout={(event) => {
-        const width = event.nativeEvent.layout.width;
-        setSvgContainerWidth(width);
-        onFullPathWidth?.(width);
-      }}
-      style={[
-        {
-          height: maxThickness,
-        },
-        style,
-      ]}
-    >
-      <Svg testID={testID ?? "linear-progress-component"} style={{ flex: 1 }}>
-        {showTrack && (
-          <Line
-            x1={thicknessOffset}
-            y1={thicknessOffset}
-            x2={trackProgressLineWidth}
-            y2={thicknessOffset}
-            stroke={trackColor}
-            strokeWidth={trackThickness}
-            strokeOpacity={trackOpacity}
-            strokeLinecap={trackLineCap}
-            strokeDasharray={trackCustomDashArray || trackDashArray}
-            strokeDashoffset={trackDashOffset}
-          />
-        )}
-        <AnimatedLine
-          animatedProps={progressLineAnimatedProps}
-          x1={thicknessOffset}
-          y1={thicknessOffset}
-          y2={thicknessOffset}
-          stroke={color}
-          strokeWidth={thickness}
-          strokeLinecap={lineCap}
-          strokeDasharray={customDashArray || dashArray}
-          strokeDashoffset={dashOffset}
-          onPress={() => {}} //Addresses reanimated issue with SVG (https://github.com/software-mansion/react-native-reanimated/issues/3321#issuecomment-1256983430)
-        />
-      </Svg>
-    </View>
-  );
-};
+import React from "react";
+import Svg, { Line, LineProps } from "react-native-svg";
+import { View } from "react-native";
+import Animated, {
+  useAnimatedProps,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import {
+  DEFAULT_ANIMATION_DURATION,
+  ValueProgressProps,
+} from "../ProgressCommon";
+
+export const AnimatedLine = Animated.createAnimatedComponent(Line);
+
+export const LinearProgress: React.FC<ValueProgressProps> = ({
+  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,
+  style,
+  testID,
+}) => {
+  const [svgContainerWidth, setSvgContainerWidth] = 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 progressLineWidth = svgContainerWidth - thicknessOffset;
+  const trackProgressLineWidth = svgContainerWidth - thicknessOffset;
+
+  const currentFillPercentage = value / (maximumValue + minimumValue);
+  const currentProgressLineWidth = useSharedValue(0);
+
+  const progressLineAnimatedProps = useAnimatedProps<LineProps>(() => {
+    const isBelowMinWidth = currentProgressLineWidth.value <= thicknessOffset;
+    return {
+      x2: Math.min(progressLineWidth, currentProgressLineWidth.value), //Prevents going beyond the max width
+      strokeOpacity: isBelowMinWidth ? 0.0 : 1.0,
+    };
+  });
+
+  React.useEffect(() => {
+    currentProgressLineWidth.value = withTiming(
+      progressLineWidth * currentFillPercentage,
+      {
+        duration: isAnimated ? animationDuration : 0,
+      }
+    );
+  }, [
+    value,
+    progressLineWidth,
+    currentFillPercentage,
+    animationDuration,
+    currentProgressLineWidth,
+    maximumValue,
+    minimumValue,
+    isAnimated,
+  ]);
+
+  return (
+    <View
+      onLayout={(event) => {
+        const width = event.nativeEvent.layout.width;
+        setSvgContainerWidth(width);
+        onFullPathWidth?.(width);
+      }}
+      style={[
+        {
+          height: maxThickness,
+        },
+        style,
+      ]}
+    >
+      <Svg testID={testID ?? "linear-progress-component"} style={{ flex: 1 }}>
+        {showTrack && (
+          <Line
+            x1={thicknessOffset}
+            y1={thicknessOffset}
+            x2={trackProgressLineWidth}
+            y2={thicknessOffset}
+            stroke={trackColor}
+            strokeWidth={trackThickness}
+            strokeOpacity={trackOpacity}
+            strokeLinecap={trackLineCap}
+            strokeDasharray={trackCustomDashArray || trackDashArray}
+            strokeDashoffset={trackDashOffset}
+          />
+        )}
+        <AnimatedLine
+          animatedProps={progressLineAnimatedProps}
+          x1={thicknessOffset}
+          y1={thicknessOffset}
+          y2={thicknessOffset}
+          stroke={color}
+          strokeWidth={thickness}
+          strokeLinecap={lineCap}
+          strokeDasharray={customDashArray || dashArray}
+          strokeDashoffset={dashOffset}
+          onPress={() => {}} //Addresses reanimated issue with SVG (https://github.com/software-mansion/react-native-reanimated/issues/3321#issuecomment-1256983430)
+        />
+      </Svg>
+    </View>
+  );
+};

package/src/components/Progress/LinearProgress/index.tsx

@@ -1,25 +1,25 @@
-import React from "react";
-import IndeterminateProgress from "../IndeterminateProgress";
-import {
-  IndeterminateProgressProps,
-  ValueProgressProps,
-} from "../ProgressCommon";
-import { LinearProgress as LinearProgressComponent } from "./LinearProgress";
-import { withTheme } from "../../../theming";
-
-const LinearProgress: React.FC<
-  ValueProgressProps & IndeterminateProgressProps
-> = (props) => {
-  if (props.indeterminate) {
-    return (
-      <IndeterminateProgress
-        ProgressComponent={LinearProgressComponent}
-        {...props}
-      />
-    );
-  } else {
-    return <LinearProgressComponent {...props} />;
-  }
-};
-
-export default withTheme(LinearProgress);
+import React from "react";
+import IndeterminateProgress from "../IndeterminateProgress";
+import {
+  IndeterminateProgressProps,
+  ValueProgressProps,
+} from "../ProgressCommon";
+import { LinearProgress as LinearProgressComponent } from "./LinearProgress";
+import { withTheme } from "../../../theming";
+
+const LinearProgress: React.FC<
+  ValueProgressProps & IndeterminateProgressProps
+> = (props) => {
+  if (props.indeterminate) {
+    return (
+      <IndeterminateProgress
+        ProgressComponent={LinearProgressComponent}
+        {...props}
+      />
+    );
+  } else {
+    return <LinearProgressComponent {...props} />;
+  }
+};
+
+export default withTheme(LinearProgress);

package/src/components/Progress/ProgressCommon.ts

@@ -1,44 +1,44 @@
-import { StyleProp, ViewStyle } from "react-native";
-import { Theme } from "../../styles/DefaultTheme";
-
-type LineCap = "round" | "square";
-
-export const DEFAULT_ANIMATION_DURATION = 500;
-
-export interface BaseProgressProps {
-  thickness?: number;
-  trackThickness?: number;
-  color?: string;
-  trackColor?: string;
-  trackOpacity?: number;
-  showTrack?: boolean;
-  animationDuration?: number;
-  isAnimated?: boolean;
-  lineCap?: LineCap;
-  trackLineCap?: LineCap;
-  dashWidth?: string | number;
-  trackDashWidth?: string | number;
-  dashGap?: string | number;
-  trackDashGap?: string | number;
-  dashOffset?: string | number;
-  trackDashOffset?: string | number;
-  customDashArray?: string;
-  trackCustomDashArray?: string;
-  onFullPathWidth?: (width: number) => void;
-  style?: StyleProp<ViewStyle>;
-  theme: Theme;
-  testID?: string;
-}
-export interface ValueProgressProps extends BaseProgressProps {
-  value?: number;
-  minimumValue?: number;
-  maximumValue?: number;
-}
-
-export interface IndeterminateProgressProps extends BaseProgressProps {
-  indeterminate?: boolean;
-}
-
-export interface CircularProgressProps {
-  startPosition?: "left" | "top" | "right" | "bottom";
-}
+import { StyleProp, ViewStyle } from "react-native";
+import { Theme } from "../../styles/DefaultTheme";
+
+type LineCap = "round" | "square";
+
+export const DEFAULT_ANIMATION_DURATION = 500;
+
+export interface BaseProgressProps {
+  thickness?: number;
+  trackThickness?: number;
+  color?: string;
+  trackColor?: string;
+  trackOpacity?: number;
+  showTrack?: boolean;
+  animationDuration?: number;
+  isAnimated?: boolean;
+  lineCap?: LineCap;
+  trackLineCap?: LineCap;
+  dashWidth?: string | number;
+  trackDashWidth?: string | number;
+  dashGap?: string | number;
+  trackDashGap?: string | number;
+  dashOffset?: string | number;
+  trackDashOffset?: string | number;
+  customDashArray?: string;
+  trackCustomDashArray?: string;
+  onFullPathWidth?: (width: number) => void;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+  testID?: string;
+}
+export interface ValueProgressProps extends BaseProgressProps {
+  value?: number;
+  minimumValue?: number;
+  maximumValue?: number;
+}
+
+export interface IndeterminateProgressProps extends BaseProgressProps {
+  indeterminate?: boolean;
+}
+
+export interface CircularProgressProps {
+  startPosition?: "left" | "top" | "right" | "bottom";
+}

package/src/components/ProgressIndicator.tsx

@@ -1,71 +1,71 @@
-import * as React from "react";
-import StepIndicator from "./StepIndicator";
-import { withTheme } from "../theming";
-import themeT from "../styles/DefaultTheme";
-import { colorTypes } from "@draftbit/types";
-
-type Props = {
-  numberOfSteps: number;
-  currentStep: number;
-  currentStepStrokeWidth?: number;
-  stepStrokeCurrentColor?: colorTypes;
-  stepIndicatorSize?: number;
-  currentStepIndicatorSize?: number;
-  stepIndicatorCurrentColor?: colorTypes;
-  stepIndicatorLabelCurrentColor?: colorTypes;
-  stepIndicatorLabelFontSize?: number;
-  stepNumberFinishedColor?: colorTypes;
-  stepNumberUnfinishedColor?: colorTypes;
-  unfinishedColor?: colorTypes;
-  finishedColor?: colorTypes;
-  theme: typeof themeT;
-};
-
-const ProgressIndicator: React.FC<React.PropsWithChildren<Props>> = ({
-  numberOfSteps,
-  currentStep,
-  currentStepStrokeWidth = 3,
-  stepStrokeCurrentColor = "primary",
-  stepIndicatorSize,
-  currentStepIndicatorSize,
-  stepIndicatorCurrentColor,
-  stepIndicatorLabelCurrentColor,
-  stepIndicatorLabelFontSize = 12,
-  stepNumberFinishedColor = "strongInverse",
-  stepNumberUnfinishedColor = "primary",
-  unfinishedColor = "light",
-  finishedColor = "primary",
-  theme,
-}) => {
-  const currentPosition = currentStep - 1;
-  return (
-    <StepIndicator
-      stepCount={numberOfSteps}
-      currentPosition={currentPosition}
-      customStyles={{
-        stepIndicatorSize,
-        currentStepIndicatorSize: currentStepIndicatorSize
-          ? currentStepIndicatorSize
-          : stepIndicatorSize,
-        stepStrokeFinishedColor: finishedColor,
-        stepStrokeUnFinishedColor: unfinishedColor,
-        separatorFinishedColor: finishedColor,
-        separatorUnFinishedColor: unfinishedColor,
-        stepIndicatorFinishedColor: finishedColor,
-        stepIndicatorUnFinishedColor: unfinishedColor,
-        currentStepStrokeWidth,
-        stepStrokeCurrentColor:
-          stepStrokeCurrentColor || stepIndicatorCurrentColor,
-        stepIndicatorLabelUnFinishedColor: stepNumberUnfinishedColor,
-        stepIndicatorLabelFinishedColor: stepNumberFinishedColor,
-        stepIndicatorCurrentColor: stepIndicatorCurrentColor || unfinishedColor,
-        stepIndicatorLabelCurrentColor:
-          stepIndicatorLabelCurrentColor || stepNumberUnfinishedColor,
-        stepIndicatorLabelFontSize,
-        labelFontFamily: theme.typography.body1.fontFamily,
-      }}
-    />
-  );
-};
-
-export default withTheme(ProgressIndicator);
+import * as React from "react";
+import StepIndicator from "./StepIndicator";
+import { withTheme } from "../theming";
+import themeT from "../styles/DefaultTheme";
+import { colorTypes } from "@draftbit/types";
+
+type Props = {
+  numberOfSteps: number;
+  currentStep: number;
+  currentStepStrokeWidth?: number;
+  stepStrokeCurrentColor?: colorTypes;
+  stepIndicatorSize?: number;
+  currentStepIndicatorSize?: number;
+  stepIndicatorCurrentColor?: colorTypes;
+  stepIndicatorLabelCurrentColor?: colorTypes;
+  stepIndicatorLabelFontSize?: number;
+  stepNumberFinishedColor?: colorTypes;
+  stepNumberUnfinishedColor?: colorTypes;
+  unfinishedColor?: colorTypes;
+  finishedColor?: colorTypes;
+  theme: typeof themeT;
+};
+
+const ProgressIndicator: React.FC<React.PropsWithChildren<Props>> = ({
+  numberOfSteps,
+  currentStep,
+  currentStepStrokeWidth = 3,
+  stepStrokeCurrentColor = "primary",
+  stepIndicatorSize,
+  currentStepIndicatorSize,
+  stepIndicatorCurrentColor,
+  stepIndicatorLabelCurrentColor,
+  stepIndicatorLabelFontSize = 12,
+  stepNumberFinishedColor = "strongInverse",
+  stepNumberUnfinishedColor = "primary",
+  unfinishedColor = "light",
+  finishedColor = "primary",
+  theme,
+}) => {
+  const currentPosition = currentStep - 1;
+  return (
+    <StepIndicator
+      stepCount={numberOfSteps}
+      currentPosition={currentPosition}
+      customStyles={{
+        stepIndicatorSize,
+        currentStepIndicatorSize: currentStepIndicatorSize
+          ? currentStepIndicatorSize
+          : stepIndicatorSize,
+        stepStrokeFinishedColor: finishedColor,
+        stepStrokeUnFinishedColor: unfinishedColor,
+        separatorFinishedColor: finishedColor,
+        separatorUnFinishedColor: unfinishedColor,
+        stepIndicatorFinishedColor: finishedColor,
+        stepIndicatorUnFinishedColor: unfinishedColor,
+        currentStepStrokeWidth,
+        stepStrokeCurrentColor:
+          stepStrokeCurrentColor || stepIndicatorCurrentColor,
+        stepIndicatorLabelUnFinishedColor: stepNumberUnfinishedColor,
+        stepIndicatorLabelFinishedColor: stepNumberFinishedColor,
+        stepIndicatorCurrentColor: stepIndicatorCurrentColor || unfinishedColor,
+        stepIndicatorLabelCurrentColor:
+          stepIndicatorLabelCurrentColor || stepNumberUnfinishedColor,
+        stepIndicatorLabelFontSize,
+        labelFontFamily: theme.typography.body1.fontFamily,
+      }}
+    />
+  );
+};
+
+export default withTheme(ProgressIndicator);

package/src/components/RadioButton/RadioButton.tsx

@@ -1,63 +1,63 @@
-import * as React from "react";
-import { StyleProp, ViewStyle } from "react-native";
-
-import Config from "../Config";
-import IconButton from "../IconButton";
-import { getValueForRadioButton } from "../../utilities";
-import { useRadioButtonGroupContext } from "./context";
-
-import type { IconSlot } from "../../interfaces/Icon";
-
-export type RadioButtonProps = {
-  selected?: boolean;
-  disabled?: boolean;
-  color?: string;
-  value?: string | number;
-  unselectedColor?: string;
-  onPress?: (value?: string) => void;
-  style?: StyleProp<ViewStyle>;
-  size?: number;
-  selectedIcon?: string;
-  unselectedIcon?: string;
-} & IconSlot;
-
-const RadioButton: React.FC<RadioButtonProps> = ({
-  Icon,
-  disabled = false,
-  color,
-  value = "",
-  selected,
-  unselectedColor,
-  onPress,
-  size = Config.radioButtonSize,
-  selectedIcon = "MaterialIcons/radio-button-checked",
-  unselectedIcon = "MaterialIcons/radio-button-unchecked",
-  style,
-  ...rest
-}) => {
-  const { value: contextValue, onValueChange } = useRadioButtonGroupContext();
-
-  const realValue = getValueForRadioButton(value);
-  const realContextValue = getValueForRadioButton(contextValue);
-  const isSelected = selected ?? realContextValue === realValue;
-
-  const handlePress = () => {
-    onPress?.(realValue);
-    onValueChange?.(realValue);
-  };
-
-  return (
-    <IconButton
-      Icon={Icon}
-      icon={isSelected ? selectedIcon : unselectedIcon}
-      color={isSelected ? color : unselectedColor}
-      disabled={disabled}
-      onPress={handlePress}
-      size={size}
-      style={style}
-      {...rest}
-    />
-  );
-};
-
-export default RadioButton;
+import * as React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+
+import Config from "../Config";
+import IconButton from "../IconButton";
+import { getValueForRadioButton } from "../../utilities";
+import { useRadioButtonGroupContext } from "./context";
+
+import type { IconSlot } from "../../interfaces/Icon";
+
+export type RadioButtonProps = {
+  selected?: boolean;
+  disabled?: boolean;
+  color?: string;
+  value?: string | number;
+  unselectedColor?: string;
+  onPress?: (value?: string) => void;
+  style?: StyleProp<ViewStyle>;
+  size?: number;
+  selectedIcon?: string;
+  unselectedIcon?: string;
+} & IconSlot;
+
+const RadioButton: React.FC<RadioButtonProps> = ({
+  Icon,
+  disabled = false,
+  color,
+  value = "",
+  selected,
+  unselectedColor,
+  onPress,
+  size = Config.radioButtonSize,
+  selectedIcon = "MaterialIcons/radio-button-checked",
+  unselectedIcon = "MaterialIcons/radio-button-unchecked",
+  style,
+  ...rest
+}) => {
+  const { value: contextValue, onValueChange } = useRadioButtonGroupContext();
+
+  const realValue = getValueForRadioButton(value);
+  const realContextValue = getValueForRadioButton(contextValue);
+  const isSelected = selected ?? realContextValue === realValue;
+
+  const handlePress = () => {
+    onPress?.(realValue);
+    onValueChange?.(realValue);
+  };
+
+  return (
+    <IconButton
+      Icon={Icon}
+      icon={isSelected ? selectedIcon : unselectedIcon}
+      color={isSelected ? color : unselectedColor}
+      disabled={disabled}
+      onPress={handlePress}
+      size={size}
+      style={style}
+      {...rest}
+    />
+  );
+};
+
+export default RadioButton;