@draftbit/core 46.11.1-c64d65.2 → 46.11.1-ca4afb.2

package/src/index.js

@@ -35,6 +35,7 @@ export { default as Shadow } from "./components/Shadow";
 export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
 export { TabView, TabViewItem } from "./components/TabView";
 export { default as Markdown } from "./components/Markdown";
+export { BottomSheet } from "./components/BottomSheet";
 export { YoutubePlayer } from "./components/YoutubePlayer";
 export { Table, TableRow, TableCell } from "./components/Table";
 /* Deprecated: Fix or Delete!  */

package/src/index.tsx

@@ -58,6 +58,8 @@ export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
 export { TabView, TabViewItem } from "./components/TabView";
 export { default as Markdown } from "./components/Markdown";
 
+export { BottomSheet } from "./components/BottomSheet";
+
 export { YoutubePlayer } from "./components/YoutubePlayer";
 
 export { Table, TableRow, TableCell } from "./components/Table";

package/src/mappings/DeckSwiper.js

@@ -1,12 +1,16 @@
-import { COMPONENT_TYPES, Triggers, createActionProp, createStaticNumberProp, createStaticBoolProp, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
+import { COMPONENT_TYPES, Triggers, createActionProp, createStaticNumberProp, createStaticBoolProp, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Deck Swiper",
     tag: "DeckSwiper",
     description: "Deck swiper container",
     category: COMPONENT_TYPES.swiper,
-    stylesPanelSections: BLOCK_STYLES_SECTIONS,
+    stylesPanelSections: [
+        StylesPanelSections.Size,
+        StylesPanelSections.Margins,
+        StylesPanelSections.Effects,
+    ],
     layout: {
-        width: "100%",
+        position: "absolute",
     },
     triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
     props: {

package/src/mappings/DeckSwiper.ts

@@ -4,7 +4,7 @@ import {
   createActionProp,
   createStaticNumberProp,
   createStaticBoolProp,
-  BLOCK_STYLES_SECTIONS,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -12,9 +12,13 @@ export const SEED_DATA = {
   tag: "DeckSwiper",
   description: "Deck swiper container",
   category: COMPONENT_TYPES.swiper,
-  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  stylesPanelSections: [
+    StylesPanelSections.Size,
+    StylesPanelSections.Margins,
+    StylesPanelSections.Effects,
+  ],
   layout: {
-    width: "100%",
+    position: "absolute",
   },
   triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
   props: {

package/src/mappings/DeckSwiperCard.js

@@ -1,12 +1,19 @@
-import { COMPONENT_TYPES, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
+import { COMPONENT_TYPES, StylesPanelSections } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Deck Swiper Card",
     tag: "DeckSwiperCard",
     description: "Single Deck Swiper Card item to be used in DeckSwiper",
     category: COMPONENT_TYPES.swiper,
-    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+    stylesPanelSections: [
+        StylesPanelSections.LayoutFlexItems,
+        StylesPanelSections.LayoutContent,
+        StylesPanelSections.Background,
+        StylesPanelSections.Size,
+        StylesPanelSections.MarginsAndPaddings,
+        StylesPanelSections.Borders,
+        StylesPanelSections.Effects,
+    ],
     layout: {
-        flex: 1,
         alignItems: "center",
         justifyContent: "center",
         padding: 20,

package/src/mappings/DeckSwiperCard.ts

@@ -1,16 +1,20 @@
-import {
-  COMPONENT_TYPES,
-  CONTAINER_COMPONENT_STYLES_SECTIONS,
-} from "@draftbit/types";
+import { COMPONENT_TYPES, StylesPanelSections } from "@draftbit/types";
 
 export const SEED_DATA = {
   name: "Deck Swiper Card",
   tag: "DeckSwiperCard",
   description: "Single Deck Swiper Card item to be used in DeckSwiper",
   category: COMPONENT_TYPES.swiper,
-  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+  stylesPanelSections: [
+    StylesPanelSections.LayoutFlexItems,
+    StylesPanelSections.LayoutContent,
+    StylesPanelSections.Background,
+    StylesPanelSections.Size,
+    StylesPanelSections.MarginsAndPaddings,
+    StylesPanelSections.Borders,
+    StylesPanelSections.Effects,
+  ],
   layout: {
-    flex: 1,
     alignItems: "center",
     justifyContent: "center",
     padding: 20,

package/src/mappings/Layout.js

@@ -31,7 +31,7 @@ export const SEED_DATA = [
     {
         name: "Spacer",
         tag: "Spacer",
-        category: COMPONENT_TYPES.deprecated,
+        category: COMPONENT_TYPES.layout,
         props: {
             top: {
                 label: "Top",
@@ -106,7 +106,7 @@ export const SEED_DATA = [
     {
         name: "Center",
         tag: "Center",
-        category: COMPONENT_TYPES.deprecated,
+        category: COMPONENT_TYPES.layout,
         stylesPanelSections: [StylesPanelSections.NoStyles],
         props: {
             width: {
@@ -144,7 +144,7 @@ export const SEED_DATA = [
     {
         name: "Circle",
         tag: "Circle",
-        category: COMPONENT_TYPES.deprecated,
+        category: COMPONENT_TYPES.layout,
         stylesPanelSections: [StylesPanelSections.NoStyles],
         props: {
             size: {
@@ -172,7 +172,7 @@ export const SEED_DATA = [
     {
         name: "Square",
         tag: "Square",
-        category: COMPONENT_TYPES.deprecated,
+        category: COMPONENT_TYPES.layout,
         stylesPanelSections: [StylesPanelSections.NoStyles],
         props: {
             size: {

package/src/mappings/Layout.ts

@@ -38,7 +38,7 @@ export const SEED_DATA = [
   {
     name: "Spacer",
     tag: "Spacer",
-    category: COMPONENT_TYPES.deprecated,
+    category: COMPONENT_TYPES.layout,
     props: {
       top: {
         label: "Top",
@@ -113,7 +113,7 @@ export const SEED_DATA = [
   {
     name: "Center",
     tag: "Center",
-    category: COMPONENT_TYPES.deprecated,
+    category: COMPONENT_TYPES.layout,
     stylesPanelSections: [StylesPanelSections.NoStyles],
     props: {
       width: {
@@ -151,7 +151,7 @@ export const SEED_DATA = [
   {
     name: "Circle",
     tag: "Circle",
-    category: COMPONENT_TYPES.deprecated,
+    category: COMPONENT_TYPES.layout,
     stylesPanelSections: [StylesPanelSections.NoStyles],
     props: {
       size: {
@@ -179,7 +179,7 @@ export const SEED_DATA = [
   {
     name: "Square",
     tag: "Square",
-    category: COMPONENT_TYPES.deprecated,
+    category: COMPONENT_TYPES.layout,
     stylesPanelSections: [StylesPanelSections.NoStyles],
     props: {
       size: {

package/src/mappings/Shadow.js

@@ -1,10 +1,16 @@
-import { COMPONENT_TYPES, CONTAINER_COMPONENT_STYLES_SECTIONS, createColorProp, createStaticNumberProp, createStaticBoolProp, createDisabledProp, GROUPS, } from "@draftbit/types";
+import { COMPONENT_TYPES, createColorProp, createStaticNumberProp, createStaticBoolProp, createDisabledProp, GROUPS, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Shadow",
     tag: "Shadow",
     description: "A cross-platform, universal shadow.",
     category: COMPONENT_TYPES.view,
-    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+    stylesPanelSections: [
+        StylesPanelSections.Size,
+        StylesPanelSections.Margins,
+        StylesPanelSections.Position,
+        StylesPanelSections.Borders,
+        StylesPanelSections.Effects,
+    ],
     props: {
         disabled: createDisabledProp({
             description: "Disables the shadow.",
@@ -26,7 +32,7 @@ export const SEED_DATA = {
         paintInside: createStaticBoolProp({
             label: "Paint Inside",
             description: "Apply the shadow below/inside the content.",
-            defaultValue: false,
+            defaultValue: true,
         }),
         stretch: createStaticBoolProp({
             label: "Stretch",

package/src/mappings/Shadow.ts

@@ -1,11 +1,11 @@
 import {
   COMPONENT_TYPES,
-  CONTAINER_COMPONENT_STYLES_SECTIONS,
   createColorProp,
   createStaticNumberProp,
   createStaticBoolProp,
   createDisabledProp,
   GROUPS,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -13,7 +13,13 @@ export const SEED_DATA = {
   tag: "Shadow",
   description: "A cross-platform, universal shadow.",
   category: COMPONENT_TYPES.view,
-  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+  stylesPanelSections: [
+    StylesPanelSections.Size,
+    StylesPanelSections.Margins,
+    StylesPanelSections.Position,
+    StylesPanelSections.Borders,
+    StylesPanelSections.Effects,
+  ],
   props: {
     disabled: createDisabledProp({
       description: "Disables the shadow.",
@@ -35,7 +41,7 @@ export const SEED_DATA = {
     paintInside: createStaticBoolProp({
       label: "Paint Inside",
       description: "Apply the shadow below/inside the content.",
-      defaultValue: false,
+      defaultValue: true,
     }),
     stretch: createStaticBoolProp({
       label: "Stretch",

package/src/utilities.js

@@ -65,6 +65,15 @@ export function extractBorderAndMarginStyles(style, additionalBorderStyles, addi
     ]), identity);
     return { borderStyles, marginStyles };
 }
+export const sizeStyleNames = ["width", "height"];
+export function extractSizeStyles(style, additionalSizeStyles) {
+    const flatStyle = StyleSheet.flatten(style || {});
+    const sizeStyles = pickBy(pick(flatStyle, [
+        ...sizeStyleNames,
+        ...(additionalSizeStyles ? additionalSizeStyles : []),
+    ]), identity);
+    return sizeStyles;
+}
 /**
  * Merges a style object on top of another style object. In React Native,
  * keys with undefined values in a style object will still override styles

package/src/utilities.ts

@@ -98,6 +98,25 @@ export function extractBorderAndMarginStyles(
   return { borderStyles, marginStyles };
 }
 
+export const sizeStyleNames = ["width", "height"];
+
+export function extractSizeStyles(
+  style: StyleProp<any>,
+  additionalSizeStyles?: string[]
+) {
+  const flatStyle = StyleSheet.flatten(style || {});
+
+  const sizeStyles = pickBy(
+    pick(flatStyle, [
+      ...sizeStyleNames,
+      ...(additionalSizeStyles ? additionalSizeStyles : []),
+    ]),
+    identity
+  );
+
+  return sizeStyles;
+}
+
 /**
  * Merges a style object on top of another style object. In React Native,
  * keys with undefined values in a style object will still override styles

package/lib/commonjs/mappings/NativeBase/Layout.js

@@ -1,97 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SEED_DATA = void 0;
-var _types = require("@draftbit/types");
-const SHARED_SEED_DATA = {
-  category: _types.COMPONENT_TYPES.testing /*.layout*/,
-  packageName: "native-base",
-  stylesPanelSections: _types.CONTAINER_COMPONENT_STYLES_SECTIONS
-};
-const CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX = _types.CONTAINER_COMPONENT_STYLES_SECTIONS.filter(item => item !== _types.StylesPanelSections.LayoutFlexItems && item !== _types.StylesPanelSections.LayoutContent);
-const SEED_DATA = [{
-  name: "Aspect Ratio",
-  tag: "AspectRatio",
-  description: "Controls the size of the undefined dimension of a node or child component using an aspect ratio",
-  ...SHARED_SEED_DATA,
-  props: {
-    ratio: (0, _types.createStaticNumberProp)({
-      label: "Ratio",
-      description: "The aspect ratio of the container in decimal format (ex: 3/4 -> 1.33)",
-      defaultValue: 1.33
-    })
-  },
-  stylesPanelSections: [_types.StylesPanelSections.Background, _types.StylesPanelSections.Size, _types.StylesPanelSections.Margins, _types.StylesPanelSections.Position, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Effects]
-}, {
-  name: "Box",
-  tag: "Box",
-  description: "This is a generic component for low level layout needs. It is similar to a div in HTML",
-  ...SHARED_SEED_DATA
-}, {
-  name: "Center",
-  tag: "Center",
-  description: "Center aligns its contents to the center within itself",
-  ...SHARED_SEED_DATA,
-  stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX
-}, {
-  name: "Circle",
-  tag: "Circle",
-  description: "Center aligns its contents to the center within itself with a round border radius",
-  ...SHARED_SEED_DATA,
-  stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX
-}, {
-  name: "Column",
-  tag: "Column",
-  description: "Column aligns items vertically",
-  layout: {
-    flexDirection: "column"
-  },
-  ...SHARED_SEED_DATA
-}, {
-  name: "Row",
-  tag: "Row",
-  description: "Column aligns items horizontally",
-  layout: {
-    flexDirection: "row"
-  },
-  ...SHARED_SEED_DATA
-}, {
-  name: "Spacer",
-  tag: "Spacer",
-  description: "An adjustable, empty space that can be used to tune the spacing between child elements within Flex",
-  layout: {
-    flex: 1
-  },
-  ...SHARED_SEED_DATA,
-  stylesPanelSections: [_types.StylesPanelSections.LayoutSelectedItem, _types.StylesPanelSections.Background, _types.StylesPanelSections.Margins]
-}, {
-  name: "Stack",
-  tag: "Stack",
-  description: "Stack aligns items vertically or horizontally based on the direction prop",
-  ...SHARED_SEED_DATA,
-  props: {
-    isDisabled: (0, _types.createBoolProp)({
-      label: "Disabled",
-      description: "If true, the Stack will be disabled"
-    }),
-    isInvalid: (0, _types.createBoolProp)({
-      label: "Invalid",
-      description: "If true, the Stack will be invalid"
-    })
-  }
-}, {
-  name: "ZStack",
-  tag: "ZStack",
-  description: "ZStack aligns items to the z-axis",
-  ...SHARED_SEED_DATA,
-  props: {
-    reversed: (0, _types.createBoolProp)({
-      label: "Reversed",
-      description: "Determines whether to reverse the direction of items"
-    })
-  }
-}];
-exports.SEED_DATA = SEED_DATA;
-//# sourceMappingURL=Layout.js.map

package/lib/commonjs/mappings/NativeBase/Layout.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["SHARED_SEED_DATA","category","COMPONENT_TYPES","testing","packageName","stylesPanelSections","CONTAINER_COMPONENT_STYLES_SECTIONS","CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX","filter","item","StylesPanelSections","LayoutFlexItems","LayoutContent","SEED_DATA","name","tag","description","props","ratio","createStaticNumberProp","label","defaultValue","Background","Size","Margins","Position","Borders","Effects","layout","flexDirection","flex","LayoutSelectedItem","isDisabled","createBoolProp","isInvalid","reversed"],"sourceRoot":"../../../../src","sources":["mappings/NativeBase/Layout.ts"],"mappings":"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"}

package/lib/module/components/BottomSheet/BottomSheet.tsx.tmp

@@ -1,120 +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,
-  },
-  containerStyle: {
-    flex: 1,
-    overflow: "hidden",
-  },
-  handleContainer: {
-    alignItems: "center",
-    paddingVertical: 20,
-  },
-  handle: {
-    width: 40,
-    height: 2,
-    borderRadius: 4,
-  },
-});
-
-export default withTheme(BottomSheet);