@draftbit/core 46.4.4-fe82de.2 → 47.0.0-06ea46.2

package/src/components/CircularProgress.tsx

@@ -1,188 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,116 +0,0 @@
-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);

package/src/components/DeprecatedCardWrapper.js

@@ -1,18 +0,0 @@
-import React from "react";
-import { withTheme } from "../theming";
-import Touchable from "./Touchable";
-const getWidth = (numColumns) => {
-    switch (numColumns) {
-        case 1:
-            return "33%";
-        case 2:
-            return "50%";
-        default:
-            return "100%";
-    }
-};
-const Card = ({ numColumns = 3, children, onPress, style, ...rest }) => {
-    const width = getWidth(numColumns);
-    return (React.createElement(Touchable, { disabled: !onPress, onPress: onPress, style: [style, { width }], ...rest }, children));
-};
-export default withTheme(Card);

package/src/components/DeprecatedCardWrapper.tsx

@@ -1,46 +0,0 @@
-import React from "react";
-import { withTheme } from "../theming";
-import Touchable from "./Touchable";
-import { StyleProp, ViewStyle } from "react-native";
-import theme from "../styles/DefaultTheme";
-
-type Props = {
-  numColumns?: number;
-  children?: React.ReactNode;
-  onPress?: () => void;
-  style?: StyleProp<ViewStyle>;
-  theme: typeof theme;
-};
-
-const getWidth = (numColumns: number) => {
-  switch (numColumns) {
-    case 1:
-      return "33%";
-    case 2:
-      return "50%";
-    default:
-      return "100%";
-  }
-};
-
-const Card: React.FC<React.PropsWithChildren<Props>> = ({
-  numColumns = 3,
-  children,
-  onPress,
-  style,
-  ...rest
-}) => {
-  const width = getWidth(numColumns);
-  return (
-    <Touchable
-      disabled={!onPress}
-      onPress={onPress}
-      style={[style, { width }]}
-      {...rest}
-    >
-      {children}
-    </Touchable>
-  );
-};
-
-export default withTheme(Card);

package/src/components/DeprecatedFAB.js

@@ -1,115 +0,0 @@
-import * as React from "react";
-import { ActivityIndicator, View, StyleSheet, } from "react-native";
-import color from "color";
-import Config from "./Config";
-import Text from "./Text";
-import Touchable from "./Touchable";
-import Elevation from "./Elevation";
-import { withTheme } from "../theming";
-const FAB = ({ Icon, icon, disabled = false, type = "solid", loading = false, color: colorOverride, label, onPress, elevation = 0, style, theme: { colors, disabledOpacity, roundness, typography }, ...rest }) => {
-    let backgroundColor, borderColor, textColor, borderWidth;
-    const buttonColor = colorOverride || colors.primary;
-    if (type === "standard" || type === "extended" || type === "fixed") {
-        backgroundColor = buttonColor;
-        if (disabled) {
-            textColor = color(colors.surface).alpha(disabledOpacity).rgb().string();
-        }
-        else {
-            textColor = colors.surface;
-        }
-    }
-    else {
-        backgroundColor = "transparent";
-        if (disabled) {
-            textColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
-        }
-        else {
-            textColor = buttonColor;
-        }
-    }
-    if (type === "outline") {
-        if (disabled) {
-            borderColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
-        }
-        else {
-            borderColor = buttonColor;
-        }
-        borderWidth = StyleSheet.hairlineWidth;
-    }
-    else {
-        borderColor = "transparent";
-        borderWidth = 0;
-    }
-    const buttonStyle = {
-        backgroundColor,
-        borderColor,
-        borderWidth,
-        borderRadius: roundness,
-        alignItems: "center",
-        justifyContent: "center",
-    };
-    const buttonStyles = [styles.button, buttonStyle];
-    const contentStyle = [styles.content];
-    const textStyle = {
-        textAlign: "center",
-        color: textColor,
-    };
-    const iconStyle = [
-        styles.icon,
-        {
-            width: Config.buttonIconSize,
-        },
-    ];
-    if (type === "standard" || type === "outline") {
-        buttonStyle.width = Config.FABSize;
-        buttonStyle.height = Config.FABSize;
-        buttonStyle.borderRadius = Config.FABBorderRadius;
-        contentStyle.push({
-            width: Config.FABSize,
-            height: Config.FABSize,
-        });
-    }
-    if (type === "extended" || type === "fixed") {
-        iconStyle.push({
-            marginLeft: 16,
-            marginRight: -8,
-        });
-        textStyle.margin = 16;
-    }
-    if (type === "fixed") {
-        buttonStyles.push({
-            height: Config.FABFixedHeight,
-            alignSelf: "stretch",
-        });
-    }
-    return (React.createElement(Elevation, { style: [{ elevation }, style] },
-        React.createElement(Touchable, { ...rest, onPress: onPress, accessibilityState: { disabled }, accessibilityRole: "button", disabled: disabled || loading, style: buttonStyles },
-            React.createElement(View, { style: styles.content },
-                icon && loading !== true ? (React.createElement(View, { style: iconStyle },
-                    React.createElement(Icon, { name: icon, size: Config.buttonIconSize, color: textColor }))) : null,
-                loading ? (React.createElement(ActivityIndicator, { size: "small", color: textColor, style: iconStyle })) : null,
-                label ? (React.createElement(Text, { numberOfLines: 1, style: [textStyle, typography.button] }, label)) : null))));
-};
-const styles = StyleSheet.create({
-    button: {
-        borderStyle: "solid",
-    },
-    content: {
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    icon: {
-        alignItems: "center",
-        justifyContent: "center",
-        width: Config.buttonIconSize,
-    },
-    fixed: {
-        left: 0,
-        right: 0,
-        bottom: 0,
-        height: 64,
-        borderRadius: 0,
-    },
-});
-export default withTheme(FAB);