@draftbit/core 46.9.1-f8902c.2 → 46.9.1

package/src/components/Banner.js

@@ -1,109 +0,0 @@
-import * as React from "react";
-import { Button, Text, View, StyleSheet, Animated, } from "react-native";
-import Surface from "./Surface";
-import shadow from "../styles/shadow";
-import { withTheme } from "../theming";
-const ELEVATION = 1;
-const DEFAULT_MAX_WIDTH = 960;
-const Banner = ({ initiallyVisible = true, dismissable = true, icon, buttonColor, content, contentStyle, style, theme, Icon, ...rest }) => {
-    const [visible, setVisible] = React.useState(initiallyVisible);
-    React.useEffect(() => {
-        if (initiallyVisible) {
-            setVisible(true);
-        }
-    }, [initiallyVisible]);
-    const { current: position } = React.useRef(new Animated.Value(visible ? 1 : 0));
-    const [layout, setLayout] = React.useState({
-        height: 0,
-        measured: false,
-    });
-    React.useEffect(() => {
-        if (visible) {
-            // show
-            Animated.timing(position, {
-                duration: 250,
-                toValue: 1,
-                useNativeDriver: false,
-            }).start();
-        }
-        else {
-            // hide
-            Animated.timing(position, {
-                duration: 200,
-                toValue: 0,
-                useNativeDriver: false,
-            }).start();
-        }
-    }, [visible, position]);
-    const handleLayout = ({ nativeEvent }) => {
-        const { height } = nativeEvent.layout;
-        setLayout({ height, measured: true });
-    };
-    // The banner animation has 2 parts:
-    // 1. Blank spacer element which animates its height to move the content
-    // 2. Actual banner which animates its translateY
-    // In initial render, we position everything normally and measure the height of the banner
-    // Once we have the height, we apply the height to the spacer and switch the banner to position: absolute
-    // We need this because we need to move the content below as if banner's height was being animated
-    // However we can't animated banner's height directly as it'll also resize the content inside
-    const height = Animated.multiply(position, layout.height);
-    const translateY = Animated.multiply(Animated.add(position, -1), layout.height);
-    return (React.createElement(Surface, { ...rest, style: [styles.container, shadow(ELEVATION), style] },
-        React.createElement(View, { style: [styles.wrapper, contentStyle] },
-            React.createElement(Animated.View, { style: { height } }),
-            React.createElement(Animated.View, { onLayout: handleLayout, style: [
-                    layout.measured || !visible
-                        ? // If we have measured banner's height or it's invisible,
-                            // Position it absolutely, the layout will be taken care of the spacer
-                            [styles.absolute, { transform: [{ translateY }] }]
-                        : // Otherwise position it normally
-                            null,
-                    !layout.measured && !visible
-                        ? // If we haven't measured banner's height yet and it's invisible,
-                            // hide it with opacity: 0 so user doesn't see it
-                            { opacity: 0 }
-                        : null,
-                ] },
-                React.createElement(View, { style: [styles.content, { marginBottom: dismissable ? 0 : 16 }] },
-                    icon ? (React.createElement(View, { style: styles.icon },
-                        React.createElement(Icon, { name: icon, size: 40 }))) : null,
-                    React.createElement(Text, { style: [styles.message, { color: theme.colors.text }], accessibilityLiveRegion: visible ? "polite" : "none", accessibilityRole: "alert" }, content)),
-                dismissable ? (React.createElement(View, { style: styles.actions },
-                    React.createElement(Button, { color: buttonColor || theme.colors.primary, title: "Close", onPress: () => setVisible(false) }))) : null))));
-};
-const styles = StyleSheet.create({
-    container: {
-        elevation: ELEVATION,
-    },
-    wrapper: {
-        overflow: "hidden",
-        alignSelf: "center",
-        width: "100%",
-        maxWidth: DEFAULT_MAX_WIDTH,
-    },
-    absolute: {
-        position: "absolute",
-        top: 0,
-        width: "100%",
-    },
-    content: {
-        flexDirection: "row",
-        justifyContent: "flex-start",
-        marginHorizontal: 8,
-        marginTop: 16,
-        marginBottom: 0,
-    },
-    icon: {
-        margin: 8,
-    },
-    message: {
-        flex: 1,
-        margin: 8,
-    },
-    actions: {
-        flexDirection: "row",
-        justifyContent: "flex-end",
-        margin: 8,
-    },
-});
-export default withTheme(Banner);

package/src/components/BottomSheet/BottomSheet.js

@@ -1,57 +0,0 @@
-import React from "react";
-import { StyleSheet, View, } from "react-native";
-import BottomSheetComponent from "./BottomSheetComponent";
-import { withTheme } from "../../theming";
-const BottomSheet = ({ theme, snapPoints = ["10%", "50%", "80%"], initialSnapIndex = 0, showHandle = true, handleColor = theme.colors.divider, topBorderRadius = 20, borderWidth = 1, borderColor = theme.colors.divider, onSettle, style, children, ...rest }) => {
-    const backgroundColor = (style === null || style === void 0 ? void 0 : style.backgroundColor) || theme.colors.background;
-    return (React.createElement(View, { style: styles.parentContainer, pointerEvents: "box-none" },
-        React.createElement(BottomSheetComponent, { componentType: "ScrollView", snapPoints: snapPoints, initialSnapIndex: initialSnapIndex, renderHandle: () => (React.createElement(React.Fragment, null, showHandle && (React.createElement(View, { style: [
-                    styles.handleContainer,
-                    {
-                        backgroundColor,
-                        borderTopLeftRadius: topBorderRadius,
-                        borderTopRightRadius: topBorderRadius,
-                    },
-                ] },
-                React.createElement(View, { style: [styles.handle, { backgroundColor: handleColor }] }))))), contentContainerStyle: [styles.contentContainerStyle, style], containerStyle: StyleSheet.flatten([
-                styles.containerStyle,
-                {
-                    backgroundColor,
-                    borderTopLeftRadius: topBorderRadius,
-                    borderTopRightRadius: topBorderRadius,
-                    borderWidth,
-                    borderColor,
-                },
-            ]), onSettle: onSettle, ...rest }, children)));
-};
-const styles = StyleSheet.create({
-    //Render on top of everything
-    parentContainer: {
-        position: "absolute",
-        left: 0,
-        right: 0,
-        top: 0,
-        bottom: 0,
-        zIndex: 10,
-        overflow: "hidden",
-    },
-    contentContainerStyle: {
-        paddingHorizontal: 16,
-        paddingVertical: 10,
-        flex: 1,
-    },
-    containerStyle: {
-        flex: 1,
-        overflow: "hidden",
-    },
-    handleContainer: {
-        alignItems: "center",
-        paddingVertical: 20,
-    },
-    handle: {
-        width: 40,
-        height: 2,
-        borderRadius: 4,
-    },
-});
-export default withTheme(BottomSheet);

package/src/components/BottomSheet/BottomSheet.tsx

@@ -1,121 +0,0 @@
-import React from "react";
-import {
-  StyleSheet,
-  View,
-  StyleProp,
-  ViewStyle,
-  ScrollViewProps,
-} from "react-native";
-
-import BottomSheetComponent from "./BottomSheetComponent";
-import type { Theme } from "../../styles/DefaultTheme";
-import { withTheme } from "../../theming";
-
-export interface BottomSheetProps extends ScrollViewProps {
-  snapPoints?: (string | number)[];
-  initialSnapIndex?: number;
-  showHandle?: boolean;
-  handleColor?: string;
-  topBorderRadius?: number;
-  borderWidth?: number;
-  borderColor?: string;
-  onSettle?: (index: number) => void;
-  style?: StyleProp<ViewStyle>;
-  theme: Theme;
-}
-
-const BottomSheet: React.FC<React.PropsWithChildren<BottomSheetProps>> = ({
-  theme,
-  snapPoints = ["10%", "50%", "80%"],
-  initialSnapIndex = 0,
-  showHandle = true,
-  handleColor = theme.colors.divider,
-  topBorderRadius = 20,
-  borderWidth = 1,
-  borderColor = theme.colors.divider,
-  onSettle,
-  style,
-  children,
-  ...rest
-}) => {
-  const backgroundColor =
-    (style as ViewStyle)?.backgroundColor || theme.colors.background;
-
-  return (
-    <View style={styles.parentContainer} pointerEvents="box-none">
-      <BottomSheetComponent
-        componentType="ScrollView"
-        snapPoints={snapPoints}
-        initialSnapIndex={initialSnapIndex}
-        renderHandle={() => (
-          <>
-            {showHandle && (
-              <View
-                style={[
-                  styles.handleContainer,
-                  {
-                    backgroundColor,
-                    borderTopLeftRadius: topBorderRadius,
-                    borderTopRightRadius: topBorderRadius,
-                  },
-                ]}
-              >
-                <View
-                  style={[styles.handle, { backgroundColor: handleColor }]}
-                />
-              </View>
-            )}
-          </>
-        )}
-        contentContainerStyle={[styles.contentContainerStyle, style]}
-        containerStyle={StyleSheet.flatten([
-          styles.containerStyle,
-          {
-            backgroundColor,
-            borderTopLeftRadius: topBorderRadius,
-            borderTopRightRadius: topBorderRadius,
-            borderWidth,
-            borderColor,
-          },
-        ])}
-        onSettle={onSettle}
-        {...rest}
-      >
-        {children}
-      </BottomSheetComponent>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  //Render on top of everything
-  parentContainer: {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    zIndex: 10,
-    overflow: "hidden",
-  },
-  contentContainerStyle: {
-    paddingHorizontal: 16,
-    paddingVertical: 10,
-    flex: 1,
-  },
-  containerStyle: {
-    flex: 1,
-    overflow: "hidden",
-  },
-  handleContainer: {
-    alignItems: "center",
-    paddingVertical: 20,
-  },
-  handle: {
-    width: 40,
-    height: 2,
-    borderRadius: 4,
-  },
-});
-
-export default withTheme(BottomSheet);