@draftbit/core 46.10.3-106fd0.2 → 46.10.3-17bcb4.2

package/lib/commonjs/mappings/ProgressIndicator.js

@@ -0,0 +1,188 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SEED_DATA = void 0;
+var _types = require("@draftbit/types");
+const SEED_DATA = {
+  name: "Progress Indicator",
+  tag: "ProgressIndicator",
+  description: "A component used to show current Step in a process",
+  category: _types.COMPONENT_TYPES.deprecated,
+  stylesPanelSections: _types.BLOCK_STYLES_SECTIONS,
+  preview_image_url: "{CLOUDINARY_URL}/Control_Slider.png",
+  supports_list_render: false,
+  layout: {},
+  props: {
+    numberOfSteps: {
+      group: _types.GROUPS.data,
+      label: "Number of Steps",
+      description: "The border radius for the thumb",
+      editable: true,
+      required: false,
+      formType: _types.FORM_TYPES.number,
+      propType: _types.PROP_TYPES.NUMBER,
+      min: 0,
+      max: 10,
+      step: 1,
+      precision: 0,
+      defaultValue: 5
+    },
+    currentStep: {
+      group: _types.GROUPS.data,
+      label: "Current Step",
+      description: "The step that the user is on",
+      editable: true,
+      required: false,
+      formType: _types.FORM_TYPES.number,
+      propType: _types.PROP_TYPES.NUMBER,
+      min: 0,
+      max: 10,
+      step: 1,
+      precision: 0,
+      defaultValue: 5
+    },
+    stepIndicatorSize: {
+      group: _types.GROUPS.basic,
+      label: "Step Size",
+      description: "The size of the step circle",
+      editable: true,
+      required: false,
+      formType: _types.FORM_TYPES.number,
+      propType: _types.PROP_TYPES.NUMBER,
+      min: 10,
+      max: 100,
+      step: 5,
+      precision: 0,
+      defaultValue: 25
+    },
+    stepIndicatorLabelFontSize: {
+      group: _types.GROUPS.basic,
+      label: "Step Font Size",
+      description: "The font size of the step number",
+      editable: true,
+      required: false,
+      formType: _types.FORM_TYPES.number,
+      propType: _types.PROP_TYPES.NUMBER,
+      min: 6,
+      max: 36,
+      step: 1,
+      precision: 0,
+      defaultValue: 15
+    },
+    currentStepIndicatorLabelFontSize: {
+      group: _types.GROUPS.basic,
+      label: "Current Step Font Size",
+      description: "The font size of the current step number",
+      editable: true,
+      required: false,
+      formType: _types.FORM_TYPES.number,
+      propType: _types.PROP_TYPES.NUMBER,
+      min: 6,
+      max: 36,
+      step: 1,
+      precision: 0,
+      defaultValue: 15
+    },
+    unfinishedColor: {
+      group: _types.GROUPS.basic,
+      label: "Unfinished Color",
+      description: "The color of the step and divider when the step is either not the current step or not finished",
+      editable: true,
+      required: false,
+      formType: _types.FORM_TYPES.color,
+      propType: _types.PROP_TYPES.THEME,
+      defaultValue: null
+    },
+    finishedColor: {
+      group: _types.GROUPS.basic,
+      label: "Finished Color",
+      description: "The color of the step and divider when the step is the current step or finished",
+      editable: true,
+      required: false,
+      formType: _types.FORM_TYPES.color,
+      propType: _types.PROP_TYPES.THEME,
+      defaultValue: null
+    },
+    stepNumberUnfinishedColor: {
+      group: _types.GROUPS.basic,
+      label: "Unfinished Number Color",
+      description: "The color of the number within the step when unfinished",
+      editable: true,
+      required: false,
+      formType: _types.FORM_TYPES.color,
+      propType: _types.PROP_TYPES.THEME,
+      defaultValue: null
+    },
+    stepNumberFinishedColor: {
+      group: _types.GROUPS.basic,
+      label: "Finished Number Color",
+      description: "The color of the number within the step when finished",
+      editable: true,
+      required: false,
+      formType: _types.FORM_TYPES.color,
+      propType: _types.PROP_TYPES.THEME,
+      defaultValue: null
+    },
+    stepIndicatorCurrentColor: {
+      group: _types.GROUPS.basic,
+      label: "Current Step Color",
+      description: "The color of current step circle",
+      editable: true,
+      required: false,
+      formType: _types.FORM_TYPES.color,
+      propType: _types.PROP_TYPES.THEME,
+      defaultValue: null
+    },
+    stepIndicatorLabelCurrentColor: {
+      group: _types.GROUPS.basic,
+      label: "Current Step Number Color",
+      description: "The color of current number within the step circle",
+      editable: true,
+      required: false,
+      formType: _types.FORM_TYPES.color,
+      propType: _types.PROP_TYPES.THEME,
+      defaultValue: null
+    },
+    stepStrokeCurrentColor: {
+      group: _types.GROUPS.basic,
+      label: "Current Step Border Color",
+      description: "The color of current border color of the step",
+      editable: true,
+      required: false,
+      formType: _types.FORM_TYPES.color,
+      propType: _types.PROP_TYPES.THEME,
+      defaultValue: null
+    },
+    currentStepStrokeWidth: {
+      group: _types.GROUPS.basic,
+      label: "Current Step Border Width",
+      description: "The width of the border for the current step",
+      editable: true,
+      required: false,
+      formType: _types.FORM_TYPES.number,
+      propType: _types.PROP_TYPES.NUMBER,
+      min: 1,
+      max: 20,
+      step: 1,
+      precision: 0,
+      defaultValue: 0
+    },
+    currentStepIndicatorSize: {
+      group: _types.GROUPS.basic,
+      label: "Current Step Size",
+      description: "The size of the current step circle",
+      editable: true,
+      required: false,
+      formType: _types.FORM_TYPES.number,
+      propType: _types.PROP_TYPES.NUMBER,
+      min: 10,
+      max: 100,
+      step: 5,
+      precision: 0,
+      defaultValue: null
+    }
+  }
+};
+exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/styles/overlay.js

@@ -15,7 +15,6 @@ function overlay(elevation) {
   let surfaceColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _DarkTheme.default.colors.surface;
   if (isAnimatedValue(elevation)) {
     const inputRange = [0, 1, 2, 3, 8, 24];
-
     // @ts-expect-error: TS doesn't seem to refine the type correctly
     return elevation.interpolate({
       inputRange,
@@ -24,7 +23,6 @@ function overlay(elevation) {
       })
     });
   }
-
   // @ts-expect-error: TS doesn't seem to refine the type correctly
   return calculateColor(surfaceColor, elevation);
 }
@@ -65,4 +63,4 @@ const elevationOverlayTransparency = {
   22: 15.72,
   23: 15.84,
   24: 16
-};
+};};

package/lib/module/components/AnimatedCircularProgress.js

@@ -1,4 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import * as React from "react";
 import { Animated, Easing } from "react-native";
 import CircularProgress from "./CircularProgress";
@@ -46,6 +45,19 @@ const AnimatedCircularProgress = _ref => {
   React.useEffect(() => {
     animate();
   }, [fill, animate]);
+  return /*#__PURE__*/React.createElement(AnimatedProgress, {
+    ...other,
+    style: other.style,
+    childrenContainerStyle: other.childrenContainerStyle,
+    fill: fillAnimation,
+    tintColor: animateColor()
+  });
+};
+export default AnimatedCircularProgress;imation;
+  };
+  React.useEffect(() => {
+    animate();
+  }, [fill, animate]);
   return /*#__PURE__*/React.createElement(AnimatedProgress, _extends({}, other, {
     style: other.style,
     childrenContainerStyle: other.childrenContainerStyle,

package/lib/module/components/AspectRatio.js

@@ -1,3 +1,4 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from "react";
 import { View, StyleSheet } from "react-native";
 const AspectRatio = props => {
@@ -26,24 +27,6 @@ const AspectRatio = props => {
       });
     }
   }
-  return /*#__PURE__*/React.createElement(View, {
-    ...props,
-    style: style,
-    onLayout: _ref => {
-      let {
-        nativeEvent: {
-          layout: l
-        }
-      } = _ref;
-      return setLayout(l);
-    }
-  }, props.children);
-};
-export default AspectRatio;idth,
-        height: width * (1 / aspectRatio)
-      });
-    }
-  }
   return /*#__PURE__*/React.createElement(View, _extends({}, props, {
     style: style,
     onLayout: _ref => {

package/lib/module/components/AvatarEdit.js

@@ -1,4 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import * as React from "react";
 import { View } from "react-native";
 import Touchable from "./Touchable";
@@ -23,9 +22,10 @@ const AvatarEdit = _ref => {
     width: size,
     height: size
   };
-  return /*#__PURE__*/React.createElement(View, _extends({
-    style: [style, dimensions]
-  }, rest), /*#__PURE__*/React.createElement(Touchable, {
+  return /*#__PURE__*/React.createElement(View, {
+    style: [style, dimensions],
+    ...rest
+  }, /*#__PURE__*/React.createElement(Touchable, {
     onPress: onPress
   }, /*#__PURE__*/React.createElement(CircleImage, {
     source: image,
@@ -46,4 +46,15 @@ const AvatarEdit = _ref => {
     size: size * (3 / 16)
   }))));
 };
+export default withTheme(AvatarEdit);yles.editBorderColor,
+      backgroundColor: colorStyles.editBackgroundColor,
+      borderRadius: size * (3 / 16),
+      padding: size * (3 / 32)
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "MaterialIcons/edit",
+    color: colorStyles.editIconColor,
+    size: size * (3 / 16)
+  }))));
+};
 export default withTheme(AvatarEdit);

package/lib/module/components/Banner.js

@@ -1,4 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import * as React from "react";
 import { Button, Text, View, StyleSheet, Animated } from "react-native";
 import Surface from "./Surface";
@@ -61,7 +60,6 @@ const Banner = _ref => {
       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
@@ -71,9 +69,10 @@ const Banner = _ref => {
   // 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 /*#__PURE__*/React.createElement(Surface, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Surface, {
+    ...rest,
     style: [styles.container, shadow(ELEVATION), style]
-  }), /*#__PURE__*/React.createElement(View, {
+  }, /*#__PURE__*/React.createElement(View, {
     style: [styles.wrapper, contentStyle]
   }, /*#__PURE__*/React.createElement(Animated.View, {
     style: {
@@ -154,4 +153,26 @@ const styles = StyleSheet.create({
     margin: 8
   }
 });
+export default withTheme(Banner);
+  },
+  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/lib/module/components/Button.js

@@ -1,4 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import * as React from "react";
 import { Text, Pressable, Platform, StyleSheet, ActivityIndicator } from "react-native";
 import { withTheme } from "../theming";
@@ -53,7 +52,7 @@ function Base(_ref) {
   if (textAlign === "right") {
     buttonStyles.justifyContent = "flex-end";
   }
-  return /*#__PURE__*/React.createElement(Pressable, _extends({
+  return /*#__PURE__*/React.createElement(Pressable, {
     disabled: disabled || loading,
     style: _ref2 => {
       let {
@@ -62,8 +61,9 @@ function Base(_ref) {
       return [styles.base, {
         opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1
       }, buttonStyles];
-    }
-  }, props), loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
+    },
+    ...props
+  }, loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
     size: "small",
     color: color,
     style: styles.loading
@@ -82,13 +82,14 @@ const Solid = _ref3 => {
     theme,
     ...props
   } = _ref3;
-  return /*#__PURE__*/React.createElement(Base, _extends({
+  return /*#__PURE__*/React.createElement(Base, {
     style: [{
       color: "#FFF",
       borderRadius: theme.roundness,
       backgroundColor: theme.colors.primary
-    }, style]
-  }, props));
+    }, style],
+    ...props
+  });
 };
 const ButtonSolid = withTheme(Solid);
 export { ButtonSolid };
@@ -100,13 +101,14 @@ const Outline = _ref4 => {
     theme,
     ...props
   } = _ref4;
-  return /*#__PURE__*/React.createElement(Base, _extends({
+  return /*#__PURE__*/React.createElement(Base, {
     style: [styles.outline, {
       borderRadius: theme.roundness,
       borderColor: theme.colors.primary,
       color: theme.colors.primary
-    }, style]
-  }, props));
+    }, style],
+    ...props
+  });
 };
 const ButtonOutline = withTheme(Outline);
 export { ButtonOutline };
@@ -153,4 +155,25 @@ const styles = StyleSheet.create({
       }
     })
   }
+});or: "transparent",
+    padding: 0,
+    minHeight: undefined
+  },
+  loading: {
+    marginRight: 6
+  },
+  icon: {
+    ...Platform.select({
+      web: {
+        marginTop: 1,
+        marginRight: 4,
+        alignSelf: "center"
+      },
+      default: {
+        marginBottom: 2,
+        marginRight: 4,
+        alignSelf: "center"
+      }
+    })
+  }
 });

package/lib/module/components/Checkbox/CheckboxGroupRow.js

@@ -1,4 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import * as React from "react";
 import { StyleSheet, View, Platform, Pressable } from "react-native";
 import Checkbox from "./Checkbox";
@@ -6,7 +5,7 @@ import Text from "../Text";
 import { useCheckboxGroupContext } from "./context";
 import { Direction as GroupDirection } from "./context";
 import { extractStyles } from "../../utilities";
-export let Direction;
+export var Direction;
 (function (Direction) {
   Direction["Row"] = "row";
   Direction["RowReverse"] = "row-reverse";
@@ -63,13 +62,14 @@ const CheckboxGroupRow = _ref => {
     textStyles,
     viewStyles
   } = extractStyles(style);
-  return /*#__PURE__*/React.createElement(Pressable, _extends({
+  return /*#__PURE__*/React.createElement(Pressable, {
     onPress: handlePress,
     style: [styles.mainParent, {
       flexDirection: direction
     }, viewStyles],
-    disabled: disabled
-  }, rest), /*#__PURE__*/React.createElement(View, {
+    disabled: disabled,
+    ...rest
+  }, /*#__PURE__*/React.createElement(View, {
     style: [styles.label, {
       alignItems: direction === Direction.Row ? "flex-start" : "flex-end"
     }, labelContainerStyle]
@@ -107,4 +107,23 @@ const styles = StyleSheet.create({
     flex: 3
   }
 });
+export default CheckboxGroupRow;reate({
+  mainParent: {
+    alignItems: "center",
+    justifyContent: "space-around",
+    paddingStart: 20,
+    minHeight: 50,
+    paddingEnd: 20,
+    display: "flex",
+    ...Platform.select({
+      web: {
+        cursor: "pointer",
+        userSelect: "none"
+      }
+    })
+  },
+  label: {
+    flex: 3
+  }
+});
 export default CheckboxGroupRow;

package/lib/module/components/Checkbox/CheckboxRow.js

@@ -1,4 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import * as React from "react";
 import { StyleSheet, View, Platform, Pressable } from "react-native";
 import { isString } from "lodash";
@@ -6,7 +5,7 @@ import { extractStyles } from "../../utilities";
 import { usePrevious } from "../../hooks";
 import Text from "../Text";
 import Checkbox from "./Checkbox";
-export let Direction;
+export var Direction;
 (function (Direction) {
   Direction["Row"] = "row";
   Direction["RowReverse"] = "row-reverse";
@@ -48,7 +47,6 @@ const CheckboxRow = _ref => {
       setInternalValue(status);
     }
   }, [status]);
-
   // This special logic is to handle weird APIs like Airtable that return
   // true or undefined for a boolean
   const previousDefaultValue = usePrevious(defaultValue);
@@ -72,13 +70,14 @@ const CheckboxRow = _ref => {
     textStyles,
     viewStyles
   } = extractStyles(style);
-  return /*#__PURE__*/React.createElement(Pressable, _extends({
+  return /*#__PURE__*/React.createElement(Pressable, {
     onPress: handlePress,
     style: [viewStyles, styles.mainParent, {
       flexDirection: direction
     }],
-    disabled: disabled
-  }, rest), /*#__PURE__*/React.createElement(View, {
+    disabled: disabled,
+    ...rest
+  }, /*#__PURE__*/React.createElement(View, {
     style: [styles.label, {
       alignItems: direction === Direction.Row ? "flex-start" : "flex-end"
     }, labelContainerStyle]
@@ -114,4 +113,23 @@ const styles = StyleSheet.create({
     flex: 3
   }
 });
+export default CheckboxRow;heet.create({
+  mainParent: {
+    alignItems: "center",
+    justifyContent: "space-around",
+    paddingStart: 20,
+    minHeight: 50,
+    paddingEnd: 20,
+    display: "flex",
+    ...Platform.select({
+      web: {
+        cursor: "pointer",
+        userSelect: "none"
+      }
+    })
+  },
+  label: {
+    flex: 3
+  }
+});
 export default CheckboxRow;

package/lib/module/components/Checkbox/context.js

@@ -1,5 +1,5 @@
 import { createContext, useContext } from "react";
-export var Direction;
+export let Direction;
 (function (Direction) {
   Direction["Horizontal"] = "horizontal";
   Direction["Vertical"] = "vertical";

package/lib/module/components/CircleImage.js

@@ -1,3 +1,4 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import * as React from "react";
 import { Image } from "react-native";
 import Config from "./Config";
@@ -9,22 +10,6 @@ const CircleImage = _ref => {
     ...props
   } = _ref;
   const borderRadius = size / 2;
-  return /*#__PURE__*/React.createElement(Image, {
-    style: [{
-      width: size,
-      height: size,
-      borderRadius
-    }, style],
-    source: typeof source === "string" ? {
-      uri: source
-    } : source,
-    resizeMode: "cover",
-    ...props
-  });
-};
-export default CircleImage;props
-  } = _ref;
-  const borderRadius = size / 2;
   return /*#__PURE__*/React.createElement(Image, _extends({
     style: [{
       width: size,