@draftbit/core 47.0.0-0362d7.2 → 47.0.0-06ea46.2

package/src/components/Banner.tsx

@@ -0,0 +1,204 @@
+import * as React from "react";
+import {
+  Button,
+  Text,
+  View,
+  ViewStyle,
+  StyleSheet,
+  StyleProp,
+  Animated,
+} from "react-native";
+import Surface from "./Surface";
+import type { IconSlot } from "../interfaces/Icon";
+import shadow from "../styles/shadow";
+import { withTheme } from "../theming";
+import type { Theme } from "../styles/DefaultTheme";
+
+const ELEVATION = 1;
+const DEFAULT_MAX_WIDTH = 960;
+
+type Props = {
+  initiallyVisible: boolean;
+  dismissable: boolean;
+  buttonColor?: string;
+  icon?: string;
+  content?: string;
+  contentStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>;
+  ref?: React.RefObject<View>;
+  /**
+   * @optional
+   */
+  theme: Theme;
+} & IconSlot;
+
+type NativeEvent = {
+  nativeEvent: {
+    layout: {
+      x: number;
+      y: number;
+      width: number;
+      height: number;
+    };
+  };
+};
+
+const Banner: React.FC<React.PropsWithChildren<Props>> = ({
+  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<Animated.Value>(
+    new Animated.Value(visible ? 1 : 0)
+  );
+  const [layout, setLayout] = React.useState<{
+    height: number;
+    measured: boolean;
+  }>({
+    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 }: 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 (
+    <Surface
+      {...rest}
+      style={[styles.container, shadow(ELEVATION) as ViewStyle, style]}
+    >
+      <View style={[styles.wrapper, contentStyle]}>
+        <Animated.View style={{ height }} />
+        <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,
+          ]}
+        >
+          <View
+            style={[styles.content, { marginBottom: dismissable ? 0 : 16 }]}
+          >
+            {icon ? (
+              <View style={styles.icon}>
+                <Icon name={icon} size={40} />
+              </View>
+            ) : null}
+            <Text
+              style={[styles.message, { color: theme.colors.text }]}
+              accessibilityLiveRegion={visible ? "polite" : "none"}
+              accessibilityRole="alert"
+            >
+              {content}
+            </Text>
+          </View>
+          {dismissable ? (
+            <View style={styles.actions}>
+              <Button
+                color={buttonColor || theme.colors.primary}
+                title="Close"
+                onPress={() => setVisible(false)}
+              />
+            </View>
+          ) : null}
+        </Animated.View>
+      </View>
+    </Surface>
+  );
+};
+
+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/Picker/Picker.js

@@ -194,7 +194,6 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
                     React.createElement(NativePicker, { style: styles.iosNativePicker, selectedValue: internalValue, onValueChange: handleValueChange }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value })))))))) : null,
         !isIos && pickerVisible ? (React.createElement(NativePicker, { enabled: pickerVisible, selectedValue: internalValue, onValueChange: handleValueChange, style: styles.nonIosPicker, ref: androidPickerRef, onBlur: () => setPickerVisible(false) }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value }))))) : null));
 };
-export default withTheme(Picker);
 const styles = StyleSheet.create({
     marginsContainer: {
         alignSelf: "stretch",
@@ -265,3 +264,4 @@ const styles = StyleSheet.create({
         maxHeight: deviceHeight,
     },
 });
+export default withTheme(Picker);

package/src/components/Picker/Picker.tsx

@@ -406,8 +406,6 @@ const Picker: React.FC<PickerProps> = ({
   );
 };
 
-export default withTheme(Picker);
-
 const styles = StyleSheet.create({
   marginsContainer: {
     alignSelf: "stretch",
@@ -478,3 +476,5 @@ const styles = StyleSheet.create({
     maxHeight: deviceHeight,
   },
 });
+
+export default withTheme(Picker);

package/src/index.js

@@ -4,6 +4,7 @@ export { default as Provider } from "./Provider";
 export { default as DefaultTheme } from "./styles/DefaultTheme";
 // BASIC
 export { default as ScreenContainer } from "./components/ScreenContainer";
+export { default as Banner } from "./components/Banner";
 // BUTTONS
 export { Button } from "./components/Button";
 export { Link } from "./components/Text";
@@ -29,5 +30,6 @@ export { Center, Circle, Square, Row, Stack, Spacer, } from "./components/Layout
 export { Swiper, SwiperItem } from "./components/Swiper";
 // CONTAINERS
 export { AccordionGroup, AccordionItem } from "./components/Accordion";
+export { default as Surface } from "./components/Surface";
 // ACTIONSHEET
 export { ActionSheet, ActionSheetItem, ActionSheetCancel, } from "./components/ActionSheet";

package/src/index.tsx

@@ -5,6 +5,7 @@ export { default as DefaultTheme } from "./styles/DefaultTheme";
 
 // BASIC
 export { default as ScreenContainer } from "./components/ScreenContainer";
+export { default as Banner } from "./components/Banner";
 
 // BUTTONS
 export { Button } from "./components/Button";
@@ -49,6 +50,7 @@ export { Swiper, SwiperItem } from "./components/Swiper";
 
 // CONTAINERS
 export { AccordionGroup, AccordionItem } from "./components/Accordion";
+export { default as Surface } from "./components/Surface";
 
 // ACTIONSHEET
 export {

package/src/mappings/NativeBase/Layout/AspectRatio.js

@@ -0,0 +1,9 @@
+import { COMPONENT_TYPES, NB_LAYOUT_STYLES_SECTIONS } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Aspect Ratio",
+    tag: "AspectRatio",
+    description: "AspectRatio controls the size of the undefined dimension of a node or child component.",
+    category: COMPONENT_TYPES.NBLayout,
+    stylesPanelSections: NB_LAYOUT_STYLES_SECTIONS,
+    packageName: "native-base",
+};

package/src/mappings/NativeBase/Layout/AspectRatio.ts

@@ -0,0 +1,11 @@
+import { COMPONENT_TYPES, NB_LAYOUT_STYLES_SECTIONS } from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Aspect Ratio",
+  tag: "AspectRatio",
+  description:
+    "AspectRatio controls the size of the undefined dimension of a node or child component.",
+  category: COMPONENT_TYPES.NBLayout,
+  stylesPanelSections: NB_LAYOUT_STYLES_SECTIONS,
+  packageName: "native-base",
+};

package/src/mappings/NativeBase/Layout/Box.js

@@ -0,0 +1,9 @@
+import { COMPONENT_TYPES, NB_LAYOUT_STYLES_SECTIONS } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Box",
+    tag: "Box",
+    description: "This is a generic component for low level layout needs. It is similar to a div in HTML",
+    category: COMPONENT_TYPES.NBLayout,
+    stylesPanelSections: NB_LAYOUT_STYLES_SECTIONS,
+    packageName: "native-base",
+};

package/src/mappings/NativeBase/Layout/Box.ts

@@ -0,0 +1,11 @@
+import { COMPONENT_TYPES, NB_LAYOUT_STYLES_SECTIONS } from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Box",
+  tag: "Box",
+  description:
+    "This is a generic component for low level layout needs. It is similar to a div in HTML",
+  category: COMPONENT_TYPES.NBLayout,
+  stylesPanelSections: NB_LAYOUT_STYLES_SECTIONS,
+  packageName: "native-base",
+};

package/src/mappings/NativeBase/Layout/Center.js

@@ -0,0 +1,27 @@
+import { COMPONENT_TYPES, NB_LAYOUT_STYLES_SECTIONS } from "@draftbit/types";
+export const SEED_DATA = [
+    {
+        name: "Center",
+        tag: "Center",
+        description: "Centers its child",
+        category: COMPONENT_TYPES.NBLayout,
+        stylesPanelSections: NB_LAYOUT_STYLES_SECTIONS,
+        packageName: "native-base",
+    },
+    {
+        name: "Square",
+        tag: "Square",
+        description: "Centers its child inside a square",
+        category: COMPONENT_TYPES.NBLayout,
+        stylesPanelSections: NB_LAYOUT_STYLES_SECTIONS,
+        packageName: "native-base",
+    },
+    {
+        name: "Circle",
+        tag: "Circle",
+        description: "Centers its child inside a circle",
+        category: COMPONENT_TYPES.NBLayout,
+        stylesPanelSections: NB_LAYOUT_STYLES_SECTIONS,
+        packageName: "native-base",
+    },
+];

package/src/mappings/NativeBase/Layout/Center.ts

@@ -0,0 +1,28 @@
+import { COMPONENT_TYPES, NB_LAYOUT_STYLES_SECTIONS } from "@draftbit/types";
+
+export const SEED_DATA = [
+  {
+    name: "Center",
+    tag: "Center",
+    description: "Centers its child",
+    category: COMPONENT_TYPES.NBLayout,
+    stylesPanelSections: NB_LAYOUT_STYLES_SECTIONS,
+    packageName: "native-base",
+  },
+  {
+    name: "Square",
+    tag: "Square",
+    description: "Centers its child inside a square",
+    category: COMPONENT_TYPES.NBLayout,
+    stylesPanelSections: NB_LAYOUT_STYLES_SECTIONS,
+    packageName: "native-base",
+  },
+  {
+    name: "Circle",
+    tag: "Circle",
+    description: "Centers its child inside a circle",
+    category: COMPONENT_TYPES.NBLayout,
+    stylesPanelSections: NB_LAYOUT_STYLES_SECTIONS,
+    packageName: "native-base",
+  },
+];

package/src/mappings/NativeBase/Layout/Column.js

@@ -0,0 +1,9 @@
+import { COMPONENT_TYPES, NB_LAYOUT_STYLES_SECTIONS } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Column",
+    tag: "VStack",
+    description: "Column aligns items vertically",
+    category: COMPONENT_TYPES.NBLayout,
+    stylesPanelSections: NB_LAYOUT_STYLES_SECTIONS,
+    packageName: "native-base",
+};

package/src/mappings/NativeBase/Layout/Column.ts

@@ -0,0 +1,10 @@
+import { COMPONENT_TYPES, NB_LAYOUT_STYLES_SECTIONS } from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Column",
+  tag: "VStack",
+  description: "Column aligns items vertically",
+  category: COMPONENT_TYPES.NBLayout,
+  stylesPanelSections: NB_LAYOUT_STYLES_SECTIONS,
+  packageName: "native-base",
+};

package/src/mappings/NativeBase/Layout/Container.js

@@ -0,0 +1,9 @@
+import { COMPONENT_TYPES, NB_LAYOUT_STYLES_SECTIONS } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Container",
+    tag: "Container",
+    description: "The Container restricts a content's width according to current breakpoint, while keeping the size fluid.",
+    category: COMPONENT_TYPES.NBLayout,
+    stylesPanelSections: NB_LAYOUT_STYLES_SECTIONS,
+    packageName: "native-base",
+};

package/src/mappings/NativeBase/Layout/Container.ts

@@ -0,0 +1,11 @@
+import { COMPONENT_TYPES, NB_LAYOUT_STYLES_SECTIONS } from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Container",
+  tag: "Container",
+  description:
+    "The Container restricts a content's width according to current breakpoint, while keeping the size fluid.",
+  category: COMPONENT_TYPES.NBLayout,
+  stylesPanelSections: NB_LAYOUT_STYLES_SECTIONS,
+  packageName: "native-base",
+};

package/src/mappings/NativeBase/Layout/Row.js

@@ -0,0 +1,9 @@
+import { COMPONENT_TYPES, NB_LAYOUT_STYLES_SECTIONS } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Row",
+    tag: "HStack",
+    description: "Column aligns items horizontally",
+    category: COMPONENT_TYPES.NBLayout,
+    stylesPanelSections: NB_LAYOUT_STYLES_SECTIONS,
+    packageName: "native-base",
+};

package/src/mappings/NativeBase/Layout/Row.ts

@@ -0,0 +1,10 @@
+import { COMPONENT_TYPES, NB_LAYOUT_STYLES_SECTIONS } from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Row",
+  tag: "HStack",
+  description: "Column aligns items horizontally",
+  category: COMPONENT_TYPES.NBLayout,
+  stylesPanelSections: NB_LAYOUT_STYLES_SECTIONS,
+  packageName: "native-base",
+};

package/src/mappings/NativeBase/Layout/Stack.js

@@ -0,0 +1,9 @@
+import { COMPONENT_TYPES, NB_LAYOUT_STYLES_SECTIONS } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Stack",
+    tag: "Stack",
+    description: "Stack aligns items vertically or horizontally based on the direction prop.",
+    category: COMPONENT_TYPES.NBLayout,
+    stylesPanelSections: NB_LAYOUT_STYLES_SECTIONS,
+    packageName: "native-base",
+};

package/src/mappings/NativeBase/Layout/Stack.ts

@@ -0,0 +1,11 @@
+import { COMPONENT_TYPES, NB_LAYOUT_STYLES_SECTIONS } from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Stack",
+  tag: "Stack",
+  description:
+    "Stack aligns items vertically or horizontally based on the direction prop.",
+  category: COMPONENT_TYPES.NBLayout,
+  stylesPanelSections: NB_LAYOUT_STYLES_SECTIONS,
+  packageName: "native-base",
+};

package/src/mappings/NativeBase/Layout/ZStack.js

@@ -0,0 +1,9 @@
+import { COMPONENT_TYPES, NB_LAYOUT_STYLES_SECTIONS } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Row",
+    tag: "HStack",
+    description: "Column aligns items horizontally",
+    category: COMPONENT_TYPES.NBLayout,
+    stylesPanelSections: NB_LAYOUT_STYLES_SECTIONS,
+    packageName: "native-base",
+};

package/src/mappings/NativeBase/Layout/ZStack.ts

@@ -0,0 +1,10 @@
+import { COMPONENT_TYPES, NB_LAYOUT_STYLES_SECTIONS } from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Row",
+  tag: "HStack",
+  description: "Column aligns items horizontally",
+  category: COMPONENT_TYPES.NBLayout,
+  stylesPanelSections: NB_LAYOUT_STYLES_SECTIONS,
+  packageName: "native-base",
+};