@draftbit/core 43.3.4-f04c6f.2 → 43.4.2-9ce900.0

package/lib/typescript/src/components/Swiper/Swiper.d.ts

@@ -7,9 +7,13 @@ export interface SwiperProps {
     timeout?: number;
     prevTitle?: string;
     nextTitle?: string;
+    prevTitleColor?: string;
+    nextTitleColor?: string;
     dotsTouchable?: boolean;
+    dotColor?: string;
+    dotActiveColor?: string;
     children: React.ReactNode;
     style?: StyleProp<ViewStyle>;
 }
-declare const Swiper: ({ vertical, loop, timeout, from, prevTitle, nextTitle, dotsTouchable, children, style, }: SwiperProps) => JSX.Element;
+declare const Swiper: ({ vertical, loop, timeout, from, prevTitle, nextTitle, prevTitleColor, nextTitleColor, dotsTouchable, dotColor, dotActiveColor, children, style, }: SwiperProps) => JSX.Element;
 export default Swiper;

package/lib/typescript/src/mappings/{AccordionGroup.d.ts → Accordion.d.ts}

@@ -3,6 +3,13 @@ export declare const SEED_DATA: {
     tag: string;
     description: string;
     category: string;
+    layout: {
+        paddingTop: number;
+        paddingRight: number;
+        paddingBottom: number;
+        paddingLeft: number;
+        fontSize: number;
+    };
     props: {
         openColor: {
             group: string;

package/lib/typescript/src/mappings/Swiper.d.ts

@@ -52,6 +52,46 @@ export declare const SEED_DATA: {
         };
         prevTitle: any;
         nextTitle: any;
+        prevTitleColor: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
+        nextTitleColor: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
+        dotColor: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
+        dotActiveColor: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
         dotsTouchable: {
             label: string;
             description: string;

package/lib/typescript/src/mappings/TextArea.d.ts

@@ -14,8 +14,6 @@ export declare const SEED_DATA: {
         paddingTop: number;
         paddingBottom: number;
         borderRadius: number;
-        textAlignVertical: string;
-        minHeight: number;
     };
     triggers: string[];
     props: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "43.3.4-f04c6f.2+f04c6fc8",
+  "version": "43.4.2-9ce900.0+9ce900f8",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "^43.3.4-f04c6f.2+f04c6fc8",
+    "@draftbit/types": "^43.4.0",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.1.7",
@@ -79,5 +79,5 @@
       ]
     ]
   },
-  "gitHead": "f04c6fc8cb5966dccdf4503e30a94600f28f4674"
+  "gitHead": "9ce900f8e33129c22987973847755c82ca77b67e"
 }

package/src/components/Accordion/AccordionGroup.js

@@ -2,63 +2,43 @@ import * as React from "react";
 import { View, StyleSheet, Pressable, } from "react-native";
 import Text from "../Text";
 import { withTheme } from "../../theming";
+import { extractStyles } from "../../utilities";
 const AccordionGroup = ({ Icon, openColor, closedColor, caretColor, icon, iconSize = 24, style, label, children, expanded: expandedProp, theme, }) => {
     const [expanded, setExpanded] = React.useState(expandedProp || false);
     const handlePressAction = () => {
-        if (expandedProp === undefined) {
-            setExpanded(!expanded);
-        }
+        setExpanded(!expanded);
     };
     const expandedInternal = expandedProp !== undefined ? expandedProp : expanded;
     const expandedColor = openColor || theme.colors.primary;
     const collapsedColor = closedColor || theme.colors.primary;
     const labelColor = expanded ? expandedColor : collapsedColor;
+    const { textStyles, viewStyles } = extractStyles(style);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Pressable, { style: [style], onPress: handlePressAction, accessibilityRole: "button" },
-            React.createElement(View, { style: styles.row },
-                icon ? (React.createElement(Icon, { name: icon, size: iconSize, color: labelColor, style: styles.icon })) : null,
-                React.createElement(View, { style: [styles.item, styles.content] },
-                    React.createElement(Text, { selectable: false, style: [
-                            styles.label,
-                            {
-                                color: labelColor,
-                            },
-                            style,
-                        ] }, label)),
-                React.createElement(View, { style: [styles.item] },
-                    React.createElement(Icon, { name: expanded
-                            ? "MaterialIcons/keyboard-arrow-up"
-                            : "MaterialIcons/keyboard-arrow-down", color: caretColor, size: 24 })))),
-        expandedInternal
-            ? React.Children.map(children, (child) => {
-                if (React.isValidElement(child) &&
-                    !child.props.left &&
-                    !child.props.right) {
-                    return React.cloneElement(child, {
-                        style: child.props.style,
-                    });
-                }
-                return child;
-            })
-            : null));
+        React.createElement(Pressable, { style: [styles.row, viewStyles], onPress: handlePressAction, accessibilityRole: "button" },
+            icon ? (React.createElement(Icon, { name: icon, size: iconSize, color: labelColor, style: styles.icon })) : null,
+            React.createElement(View, { style: styles.content },
+                React.createElement(Text, { selectable: false, style: [
+                        {
+                            color: labelColor,
+                        },
+                        textStyles,
+                    ] }, label)),
+            React.createElement(Icon, { name: expanded
+                    ? "MaterialIcons/keyboard-arrow-up"
+                    : "MaterialIcons/keyboard-arrow-down", color: caretColor, size: 24 })),
+        expandedInternal ? children : null));
 };
 const styles = StyleSheet.create({
     row: {
         flexDirection: "row",
         alignItems: "center",
     },
-    label: {
-        fontSize: 16,
-    },
-    item: {
-        margin: 8,
-    },
     content: {
         flex: 1,
         justifyContent: "center",
     },
     icon: {
-        marginLeft: 8,
+        marginRight: 8,
     },
 });
 export default withTheme(AccordionGroup);

package/src/components/Accordion/AccordionGroup.tsx

@@ -10,6 +10,7 @@ import Text from "../Text";
 import { withTheme } from "../../theming";
 import type { IconSlot } from "../../interfaces/Icon";
 import type { Theme } from "../../styles/DefaultTheme";
+import { extractStyles } from "../../utilities";
 
 type Props = {
   openColor: string;
@@ -42,9 +43,7 @@ const AccordionGroup = ({
   );
 
   const handlePressAction = () => {
-    if (expandedProp === undefined) {
-      setExpanded(!expanded);
-    }
+    setExpanded(!expanded);
   };
 
   const expandedInternal = expandedProp !== undefined ? expandedProp : expanded;
@@ -54,64 +53,47 @@ const AccordionGroup = ({
 
   const labelColor = expanded ? expandedColor : collapsedColor;
 
+  const { textStyles, viewStyles } = extractStyles(style);
+
   return (
     <>
       <Pressable
-        style={[style]}
+        style={[styles.row, viewStyles]}
         onPress={handlePressAction}
         accessibilityRole="button"
       >
-        <View style={styles.row}>
-          {icon ? (
-            <Icon
-              name={icon}
-              size={iconSize}
-              color={labelColor}
-              style={styles.icon}
-            />
-          ) : null}
-          <View style={[styles.item, styles.content]}>
-            <Text
-              selectable={false}
-              style={[
-                styles.label,
-                {
-                  color: labelColor,
-                },
-                style,
-              ]}
-            >
-              {label}
-            </Text>
-          </View>
-          <View style={[styles.item]}>
-            <Icon
-              name={
-                expanded
-                  ? "MaterialIcons/keyboard-arrow-up"
-                  : "MaterialIcons/keyboard-arrow-down"
-              }
-              color={caretColor}
-              size={24}
-            />
-          </View>
+        {icon ? (
+          <Icon
+            name={icon}
+            size={iconSize}
+            color={labelColor}
+            style={styles.icon}
+          />
+        ) : null}
+        <View style={styles.content}>
+          <Text
+            selectable={false}
+            style={[
+              {
+                color: labelColor,
+              },
+              textStyles,
+            ]}
+          >
+            {label}
+          </Text>
         </View>
+        <Icon
+          name={
+            expanded
+              ? "MaterialIcons/keyboard-arrow-up"
+              : "MaterialIcons/keyboard-arrow-down"
+          }
+          color={caretColor}
+          size={24}
+        />
       </Pressable>
-      {expandedInternal
-        ? React.Children.map(children, (child) => {
-            if (
-              React.isValidElement(child) &&
-              !child.props.left &&
-              !child.props.right
-            ) {
-              return React.cloneElement(child, {
-                style: child.props.style,
-              });
-            }
-
-            return child;
-          })
-        : null}
+      {expandedInternal ? children : null}
     </>
   );
 };
@@ -121,18 +103,12 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
   },
-  label: {
-    fontSize: 16,
-  },
-  item: {
-    margin: 8,
-  },
   content: {
     flex: 1,
     justifyContent: "center",
   },
   icon: {
-    marginLeft: 8,
+    marginRight: 8,
   },
 });
 

package/src/components/FAB.js

@@ -28,7 +28,7 @@ const FAB = ({ onPress, disabled, loading, iconName = "MaterialIcons/add", style
                     },
                 ];
             }, ...props },
-            React.createElement(View, null, loading ? (React.createElement(ActivityIndicator, { size: "small", color: color })) : (React.createElement(Icon, { name: iconName, size: 28, color: color }))))));
+            React.createElement(View, null, loading ? (React.createElement(ActivityIndicator, { style: size > 50 ? { marginTop: 2, marginLeft: 2 } : undefined, size: size <= 50 ? "small" : "large", color: color })) : (React.createElement(Icon, { name: iconName, size: size, color: color }))))));
 };
 const styles = StyleSheet.create({
     button: {

package/src/components/FAB.tsx

@@ -77,9 +77,13 @@ const FAB: React.FC<Props> = ({
       >
         <View>
           {loading ? (
-            <ActivityIndicator size="small" color={color} />
+            <ActivityIndicator
+              style={size > 50 ? { marginTop: 2, marginLeft: 2 } : undefined}
+              size={size <= 50 ? "small" : "large"}
+              color={color}
+            />
           ) : (
-            <Icon name={iconName} size={28} color={color} />
+            <Icon name={iconName} size={size} color={color} />
           )}
         </View>
       </Pressable>

package/src/components/Stepper.js

@@ -37,7 +37,7 @@ const Stepper = ({ Icon, value, min, max, style, onChange, defaultValue, theme:
             style,
             borderRadius ? { borderRadius } : {},
         ] },
-        React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/remove", onPress: handleMinus, size: iconSize, color: iconColor, disabled: stateValue === 0 }),
+        React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/remove", onPress: handleMinus, size: iconSize, color: iconColor, disabled: stateValue === min, style: stateValue === min ? { opacity: 0.5 } : {} }),
         React.createElement(Text, { style: [
                 typography.body1,
                 {
@@ -48,6 +48,6 @@ const Stepper = ({ Icon, value, min, max, style, onChange, defaultValue, theme:
                 },
                 typeStyle,
             ] }, value || stateValue),
-        React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/add", onPress: handlePlus, size: iconSize, color: iconColor })));
+        React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/add", onPress: handlePlus, size: iconSize, color: iconColor, disabled: stateValue === max, style: stateValue === max ? { opacity: 0.5 } : {} })));
 };
 export default withTheme(Stepper);

package/src/components/Stepper.tsx

@@ -84,7 +84,8 @@ const Stepper: React.FC<Props> = ({
         onPress={handleMinus}
         size={iconSize}
         color={iconColor}
-        disabled={stateValue === 0}
+        disabled={stateValue === min}
+        style={stateValue === min ? { opacity: 0.5 } : {}}
       />
       <Text
         style={[
@@ -106,6 +107,8 @@ const Stepper: React.FC<Props> = ({
         onPress={handlePlus}
         size={iconSize}
         color={iconColor}
+        disabled={stateValue === max}
+        style={stateValue === max ? { opacity: 0.5 } : {}}
       />
     </View>
   );

package/src/components/Swiper/Swiper.js

@@ -1,10 +1,18 @@
 import React from "react";
 import { View } from "react-native";
 import SwiperComponent from "react-native-web-swiper";
-const Swiper = ({ vertical = false, loop = false, timeout = 0, from = 0, prevTitle = "", nextTitle = "", dotsTouchable = true, children, style, }) => (React.createElement(View, { style: style },
+const Swiper = ({ vertical = false, loop = false, timeout = 0, from = 0, prevTitle = "", nextTitle = "", prevTitleColor, nextTitleColor, dotsTouchable = true, dotColor, dotActiveColor, children, style, }) => (React.createElement(View, { style: style },
     React.createElement(SwiperComponent, { from: from, loop: loop, timeout: timeout, vertical: vertical, controlsProps: {
             prevTitle,
             nextTitle,
+            prevTitleStyle: { color: prevTitleColor },
+            nextTitleStyle: { color: nextTitleColor },
             dotsTouchable,
+            ...(dotColor
+                ? { dotProps: { badgeStyle: { backgroundColor: dotColor } } }
+                : {}),
+            ...(dotActiveColor
+                ? { dotActiveStyle: { backgroundColor: dotActiveColor } }
+                : {}),
         } }, children)));
 export default Swiper;

package/src/components/Swiper/Swiper.tsx

@@ -9,7 +9,11 @@ export interface SwiperProps {
   timeout?: number;
   prevTitle?: string;
   nextTitle?: string;
+  prevTitleColor?: string;
+  nextTitleColor?: string;
   dotsTouchable?: boolean;
+  dotColor?: string;
+  dotActiveColor?: string;
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
 }
@@ -21,7 +25,11 @@ const Swiper = ({
   from = 0,
   prevTitle = "",
   nextTitle = "",
+  prevTitleColor,
+  nextTitleColor,
   dotsTouchable = true,
+  dotColor,
+  dotActiveColor,
   children,
   style,
 }: SwiperProps) => (
@@ -34,7 +42,15 @@ const Swiper = ({
       controlsProps={{
         prevTitle,
         nextTitle,
+        prevTitleStyle: { color: prevTitleColor },
+        nextTitleStyle: { color: nextTitleColor },
         dotsTouchable,
+        ...(dotColor
+          ? { dotProps: { badgeStyle: { backgroundColor: dotColor } } }
+          : {}),
+        ...(dotActiveColor
+          ? { dotActiveStyle: { backgroundColor: dotActiveColor } }
+          : {}),
       }}
     >
       {children}

package/src/mappings/{AccordionGroup.js → Accordion.js}

@@ -1,9 +1,16 @@
 import { COMPONENT_TYPES, createNumberProp, createIconProp, createTextProp, createStaticBoolProp, createColorProp, } from "@draftbit/types";
 export const SEED_DATA = {
-    name: "Accordion Group",
+    name: "Accordion",
     tag: "AccordionGroup",
     description: "An expandable container containing components",
     category: COMPONENT_TYPES.container,
+    layout: {
+        paddingTop: 8,
+        paddingRight: 8,
+        paddingBottom: 8,
+        paddingLeft: 8,
+        fontSize: 16,
+    },
     props: {
         openColor: createColorProp({
             label: "Open text color",

package/src/mappings/{AccordionGroup.ts → Accordion.ts}

@@ -8,10 +8,17 @@ import {
 } from "@draftbit/types";
 
 export const SEED_DATA = {
-  name: "Accordion Group",
+  name: "Accordion",
   tag: "AccordionGroup",
   description: "An expandable container containing components",
   category: COMPONENT_TYPES.container,
+  layout: {
+    paddingTop: 8,
+    paddingRight: 8,
+    paddingBottom: 8,
+    paddingLeft: 8,
+    fontSize: 16,
+  },
   props: {
     openColor: createColorProp({
       label: "Open text color",

package/src/mappings/AccordionItem.js

@@ -3,7 +3,7 @@ export const SEED_DATA = {
     name: "Accordion Item",
     tag: "AccordionItem",
     description: "Item to be used in Accordion",
-    category: COMPONENT_TYPES.button,
+    category: COMPONENT_TYPES.deprecated,
     props: {
         icon: createIconProp(),
         label: createTextProp({

package/src/mappings/AccordionItem.ts

@@ -9,7 +9,7 @@ export const SEED_DATA = {
   name: "Accordion Item",
   tag: "AccordionItem",
   description: "Item to be used in Accordion",
-  category: COMPONENT_TYPES.button,
+  category: COMPONENT_TYPES.deprecated,
   props: {
     icon: createIconProp(),
     label: createTextProp({

package/src/mappings/Stepper.js

@@ -18,7 +18,6 @@ export const SEED_DATA = [
             min: createStaticNumberProp({
                 label: "Minimum",
                 description: "Minimum Number",
-                defaultValue: 0,
             }),
             max: createStaticNumberProp({
                 label: "Maximum",

package/src/mappings/Stepper.ts

@@ -26,7 +26,6 @@ export const SEED_DATA = [
       min: createStaticNumberProp({
         label: "Minimum",
         description: "Minimum Number",
-        defaultValue: 0,
       }),
       max: createStaticNumberProp({
         label: "Maximum",

package/src/mappings/Swiper.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, createBoolProp, createNumberProp, createTextProp, GROUPS, } from "@draftbit/types";
+import { COMPONENT_TYPES, createBoolProp, createNumberProp, createTextProp, createColorProp, GROUPS, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Swiper",
     tag: "Swiper",
@@ -37,6 +37,20 @@ export const SEED_DATA = {
             label: "Next Title",
             defaultValue: "",
         }),
+        prevTitleColor: createColorProp({
+            label: "Previous Title Color",
+        }),
+        nextTitleColor: createColorProp({
+            label: "Next Title Color",
+        }),
+        dotColor: createColorProp({
+            label: "Dot Color",
+            defaultValue: "light",
+        }),
+        dotActiveColor: createColorProp({
+            label: "Dot Active Color",
+            defaultValue: "primary",
+        }),
         dotsTouchable: createBoolProp({
             group: GROUPS.basic,
             label: "Dots Touchable",

package/src/mappings/Swiper.ts

@@ -3,6 +3,7 @@ import {
   createBoolProp,
   createNumberProp,
   createTextProp,
+  createColorProp,
   GROUPS,
 } from "@draftbit/types";
 
@@ -44,6 +45,20 @@ export const SEED_DATA = {
       label: "Next Title",
       defaultValue: "",
     }),
+    prevTitleColor: createColorProp({
+      label: "Previous Title Color",
+    }),
+    nextTitleColor: createColorProp({
+      label: "Next Title Color",
+    }),
+    dotColor: createColorProp({
+      label: "Dot Color",
+      defaultValue: "light",
+    }),
+    dotActiveColor: createColorProp({
+      label: "Dot Active Color",
+      defaultValue: "primary",
+    }),
     dotsTouchable: createBoolProp({
       group: GROUPS.basic,
       label: "Dots Touchable",

package/src/mappings/TextArea.js

@@ -15,8 +15,6 @@ export const SEED_DATA = {
         paddingTop: 8,
         paddingBottom: 8,
         borderRadius: 8,
-        textAlignVertical: "top",
-        minHeight: 100,
     },
     triggers: [Triggers.OnChangeText],
     props: {

package/src/mappings/TextArea.ts

@@ -24,8 +24,6 @@ export const SEED_DATA = {
     paddingTop: 8,
     paddingBottom: 8,
     borderRadius: 8,
-    textAlignVertical: "top",
-    minHeight: 100,
   },
   triggers: [Triggers.OnChangeText],
   props: {

package/lib/commonjs/mappings/AccordionGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["AccordionGroup.ts"],"names":["SEED_DATA","name","tag","description","category","COMPONENT_TYPES","container","props","openColor","label","closedColor","caretColor","iconSize","defaultValue","expanded","icon"],"mappings":";;;;;;;AAAA;;AASO,MAAMA,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,iBADiB;AAEvBC,EAAAA,GAAG,EAAE,gBAFkB;AAGvBC,EAAAA,WAAW,EAAE,+CAHU;AAIvBC,EAAAA,QAAQ,EAAEC,uBAAgBC,SAJH;AAKvBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,SAAS,EAAE,4BAAgB;AACzBC,MAAAA,KAAK,EAAE;AADkB,KAAhB,CADN;AAILC,IAAAA,WAAW,EAAE,4BAAgB;AAC3BD,MAAAA,KAAK,EAAE;AADoB,KAAhB,CAJR;AAOLE,IAAAA,UAAU,EAAE,4BAAgB;AAC1BF,MAAAA,KAAK,EAAE;AADmB,KAAhB,CAPP;AAULG,IAAAA,QAAQ,EAAE,6BAAiB;AACzBH,MAAAA,KAAK,EAAE,WADkB;AAEzBI,MAAAA,YAAY,EAAE;AAFW,KAAjB,CAVL;AAcLJ,IAAAA,KAAK,EAAE,2BAAe;AACpBA,MAAAA,KAAK,EAAE;AADa,KAAf,CAdF;AAiBLK,IAAAA,QAAQ,EAAE,iCAAqB;AAC7BL,MAAAA,KAAK,EAAE,UADsB;AAE7BN,MAAAA,WAAW,EAAE;AAFgB,KAArB,CAjBL;AAqBLY,IAAAA,IAAI,EAAE;AArBD;AALgB,CAAlB","sourcesContent":["import {\n  COMPONENT_TYPES,\n  createNumberProp,\n  createIconProp,\n  createTextProp,\n  createStaticBoolProp,\n  createColorProp,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n  name: \"Accordion Group\",\n  tag: \"AccordionGroup\",\n  description: \"An expandable container containing components\",\n  category: COMPONENT_TYPES.container,\n  props: {\n    openColor: createColorProp({\n      label: \"Open text color\",\n    }),\n    closedColor: createColorProp({\n      label: \"Closed text Color\",\n    }),\n    caretColor: createColorProp({\n      label: \"Caret color\",\n    }),\n    iconSize: createNumberProp({\n      label: \"Icon size\",\n      defaultValue: 24,\n    }),\n    label: createTextProp({\n      label: \"Label\",\n    }),\n    expanded: createStaticBoolProp({\n      label: \"Expanded\",\n      description: \"Whether the AccordionGroup should be expanded or not\",\n    }),\n    icon: createIconProp(),\n  },\n};\n"]}