@draftbit/core 46.4.4-04eaf1.2 → 46.4.4-064d36.2

package/lib/commonjs/components/Container.js

@@ -19,8 +19,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-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); }
-
 const Container = _ref => {
   let {
     useThemeGutterPadding,
@@ -82,9 +80,10 @@ const Container = _ref => {
   };
   const Wrap = elevation ? _Elevation.default : _reactNative.View;
   if (elevation) containerStyle.elevation = elevation;
-  return /*#__PURE__*/React.createElement(Wrap, _extends({
-    style: [containerStyle, style]
-  }, rest), backgroundImage ? /*#__PURE__*/React.createElement(_reactNative.ImageBackground, {
+  return /*#__PURE__*/React.createElement(Wrap, {
+    style: [containerStyle, style],
+    ...rest
+  }, backgroundImage ? /*#__PURE__*/React.createElement(_reactNative.ImageBackground, {
     source: typeof backgroundImage === "string" ? {
       uri: backgroundImage
     } : backgroundImage,
@@ -101,4 +100,17 @@ const Container = _ref => {
 
 var _default = (0, _theming.withTheme)(Container);
 
+exports.default = _default;izeMode: backgroundImageResizeMode,
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: innerStyle
+  }, children)) : /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: innerStyle
+  }, children));
+};
+
+var _default = (0, _theming.withTheme)(Container);
+
 exports.default = _default;

package/lib/commonjs/components/Picker/Picker.js

@@ -284,10 +284,6 @@ const Picker = _ref => {
   );
 };
 
-var _default = (0, _theming.withTheme)(Picker);
-
-exports.default = _default;
-
 const styles = _reactNative.StyleSheet.create({
   marginsContainer: {
     alignSelf: "stretch",
@@ -357,4 +353,8 @@ const styles = _reactNative.StyleSheet.create({
     maxWidth: deviceWidth,
     maxHeight: deviceHeight
   }
-});
+});
+
+var _default = (0, _theming.withTheme)(Picker);
+
+exports.default = _default;

package/lib/commonjs/components/Stepper.js

@@ -15,6 +15,8 @@ var _theming = require("../theming");
 
 var _IconButton = _interopRequireDefault(require("./IconButton"));
 
+var _utilities = require("../utilities");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -28,7 +30,6 @@ const Stepper = _ref => {
     value: valueProp,
     defaultValue,
     style,
-    typeStyle,
     iconSize = 24,
     iconColor,
     onChange,
@@ -38,6 +39,10 @@ const Stepper = _ref => {
     },
     Icon
   } = _ref;
+  const {
+    viewStyles,
+    textStyles
+  } = (0, _utilities.extractStyles)(style);
   const [value, setValue] = (0, _react.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0);
 
   const isValidValue = valueArg => valueArg >= min && valueArg <= max;
@@ -60,7 +65,7 @@ const Stepper = _ref => {
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: [{
       flexDirection: "row"
-    }, style]
+    }, viewStyles]
   }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     Icon: Icon,
     icon: "MaterialIcons/remove",
@@ -77,7 +82,7 @@ const Stepper = _ref => {
       alignSelf: "center",
       color: colors.medium,
       marginHorizontal: 8
-    }, typeStyle]
+    }, textStyles]
   }, value), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     Icon: Icon,
     icon: "MaterialIcons/add",

package/lib/commonjs/components/TabView/TabView.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _reactNativeTabView = require("react-native-tab-view");
+
+var _TabViewItem = _interopRequireDefault(require("./TabViewItem"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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); }
+
+const TabViewComponent = _ref => {
+  let {
+    Icon,
+    tabBarPosition,
+    keyboardDismissMode,
+    swipeEnabled,
+    scrollEnabled,
+    activeColor,
+    inactiveColor,
+    pressColor,
+    indicatorColor,
+    style,
+    children
+  } = _ref;
+  const [index, setIndex] = React.useState(0);
+  const [routes, setRoutes] = React.useState([]);
+  const [tabScenes, setTabScenes] = React.useState({});
+  React.useEffect(() => {
+    const newRoutes = [];
+    const scenes = {};
+    React.Children.toArray(children).filter(child => child.type === _TabViewItem.default).forEach(child => {
+      var _child$props;
+
+      if (child !== null && child !== void 0 && (_child$props = child.props) !== null && _child$props !== void 0 && _child$props.id) {
+        var _child$props2, _child$props3;
+
+        newRoutes.push({
+          key: child === null || child === void 0 ? void 0 : (_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.id,
+          ...(child === null || child === void 0 ? void 0 : child.props)
+        });
+
+        scenes[child === null || child === void 0 ? void 0 : (_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.id] = () => child;
+      }
+    });
+    setRoutes(newRoutes);
+    setTabScenes(scenes);
+  }, [children]);
+
+  const indexChangeHandler = i => setIndex(i);
+
+  const renderTabBar = props => {
+    console.log(props);
+    return /*#__PURE__*/React.createElement(_reactNativeTabView.TabBar, _extends({}, props, {
+      activeColor: activeColor,
+      inactiveColor: inactiveColor,
+      pressColor: pressColor,
+      scrollEnabled: scrollEnabled,
+      indicatorStyle: {
+        backgroundColor: indicatorColor
+      },
+      renderIcon: _ref2 => {
+        let {
+          route,
+          color
+        } = _ref2;
+        return route !== null && route !== void 0 && route.icon ? /*#__PURE__*/React.createElement(Icon, {
+          name: route.icon,
+          color: color,
+          size: 36
+        }) : null;
+      },
+      style: style
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement(_reactNativeTabView.TabView, {
+    navigationState: {
+      index,
+      routes
+    },
+    renderScene: (0, _reactNativeTabView.SceneMap)(tabScenes),
+    renderTabBar: renderTabBar,
+    onIndexChange: indexChangeHandler,
+    tabBarPosition: tabBarPosition,
+    keyboardDismissMode: keyboardDismissMode,
+    swipeEnabled: swipeEnabled
+  });
+};
+
+var _default = TabViewComponent;
+exports.default = _default;

package/lib/commonjs/components/TabView/TabViewItem.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+const TabViewItem = _ref => {
+  let {
+    title,
+    id,
+    icon,
+    children,
+    accessibilityLabel
+  } = _ref;
+  console.log({
+    title,
+    id,
+    icon,
+    accessibilityLabel
+  });
+  return children;
+};
+
+var _default = TabViewItem;
+exports.default = _default;

package/lib/commonjs/components/TabView/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TabView", {
+  enumerable: true,
+  get: function () {
+    return _TabView.default;
+  }
+});
+Object.defineProperty(exports, "TabViewItem", {
+  enumerable: true,
+  get: function () {
+    return _TabViewItem.default;
+  }
+});
+
+var _TabView = _interopRequireDefault(require("./TabView"));
+
+var _TabViewItem = _interopRequireDefault(require("./TabViewItem"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/commonjs/components/Text.js

@@ -24,10 +24,14 @@ class Text extends React.Component {
     super(...arguments);
 
     _defineProperty(this, "_root", void 0);
+
+    _defineProperty(this, "state", {
+      nativeProps: {}
+    });
   }
 
   setNativeProps(args) {
-    return this._root && this._root.setNativeProps(args);
+    this.state.nativeProps = args || {};
   }
 
   render() {
@@ -36,7 +40,7 @@ class Text extends React.Component {
       ...rest
     } = this.props;
     const writingDirection = _reactNative.I18nManager.isRTL ? "rtl" : "ltr";
-    return /*#__PURE__*/React.createElement(_reactNative.Text, _extends({}, rest, {
+    return /*#__PURE__*/React.createElement(_reactNative.Text, _extends({}, rest, this.state.nativeProps, {
       ref: c => {
         this._root = c;
       },

package/lib/commonjs/components/TextField.js

@@ -32,6 +32,7 @@ class TextField extends React.Component {
     super(...arguments);
 
     _defineProperty(this, "state", {
+      nativeProps: {},
       labeled: new _reactNative.Animated.Value(this.props.value || this.props.error ? 0 : 1),
       focused: false,
       placeholder: this.props.error ? this.props.placeholder : "",
@@ -162,7 +163,9 @@ class TextField extends React.Component {
    * @internal
    */
   setNativeProps(args) {
-    return this._root && this._root.setNativeProps(args);
+    this.setState(state => ({ ...state,
+      nativeState: args || {}
+    }));
   }
 
   isFocused() {
@@ -444,6 +447,7 @@ class TextField extends React.Component {
       underlineColorAndroid: "transparent",
       style: inputStyles,
       ...rest,
+      ...this.state.nativeProps,
       value: this.state.value
     })), rightIconName ? /*#__PURE__*/React.createElement(Icon, {
       name: rightIconName,

package/lib/commonjs/constants.js

@@ -16,4 +16,4 @@ const APPROX_STATUSBAR_HEIGHT = _reactNative.Platform.select({
   ios: _reactNative.Platform.Version < 11 ? DEFAULT_STATUSBAR_HEIGHT_EXPO : 0
 });
 
-exports.APPROX_STATUSBAR_HEIGHT = APPROX_STATUSBAR_HEIGHT;
+exports.APPROX_STATUSBAR_HEIGHT = APPROX_STATUSBAR_HEIGHT;AR_HEIGHT;

package/lib/commonjs/index.js

@@ -369,6 +369,18 @@ Object.defineProperty(exports, "SwitchRow", {
     return _Switch.SwitchRow;
   }
 });
+Object.defineProperty(exports, "TabView", {
+  enumerable: true,
+  get: function () {
+    return _TabView.TabView;
+  }
+});
+Object.defineProperty(exports, "TabViewItem", {
+  enumerable: true,
+  get: function () {
+    return _TabView.TabViewItem;
+  }
+});
 Object.defineProperty(exports, "TextField", {
   enumerable: true,
   get: function () {
@@ -472,6 +484,8 @@ var _ActionSheet = require("./components/ActionSheet");
 
 var _Swiper = require("./components/Swiper");
 
+var _TabView = require("./components/TabView");
+
 var _Layout = require("./components/Layout");
 
 var _index = require("./components/RadioButton/index");

package/lib/commonjs/mappings/AudioPlayer.js

@@ -12,7 +12,17 @@ const SEED_DATA = {
   tag: "AudioPlayer",
   description: "Given a source URL, plays sounds & audio!",
   category: _types.COMPONENT_TYPES.media,
-  layout: {},
+  stylesPanelSections: [_types.StylesPanelSections.Typography, _types.StylesPanelSections.Background, _types.StylesPanelSections.Borders, _types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position],
+  layout: {
+    backgroundColor: "#eee",
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 8,
+    paddingBottom: 8,
+    borderRadius: 24,
+    flexDirection: "row",
+    alignItems: "center"
+  },
   props: {
     source: {
       group: _types.GROUPS.data,
@@ -23,7 +33,27 @@ const SEED_DATA = {
       defaultValue: "https://static.draftbit.com/audio/intro-to-draftbit-audio.mp3",
       formType: _types.FORM_TYPES.sourceUrl,
       propType: _types.PROP_TYPES.OBJECT
-    }
+    },
+    sliderColor: (0, _types.createColorProp)({
+      label: "Thumb Color",
+      defaultValue: "strong"
+    }),
+    completedTrackColor: (0, _types.createColorProp)({
+      label: "Completed Track Color",
+      defaultValue: "background"
+    }),
+    remainingTrackColor: (0, _types.createColorProp)({
+      label: "Remaining Track Color",
+      defaultValue: "light"
+    }),
+    trackThumbSize: (0, _types.createNumberProp)({
+      label: "Thumb Size",
+      defaultValue: 24
+    }),
+    playIconColor: (0, _types.createColorProp)({
+      label: "Play Icon Color",
+      defaultValue: "strong"
+    })
   }
 };
 exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/mappings/Stepper.js

@@ -12,7 +12,7 @@ const SEED_DATA = [{
   tag: "Stepper",
   description: "A component used to control the quantity of something",
   category: _types.COMPONENT_TYPES.control,
-  stylesPanelSections: _types.BLOCK_STYLES_SECTIONS,
+  stylesPanelSections: [_types.StylesPanelSections.Typography, ..._types.BLOCK_STYLES_SECTIONS],
   layout: {},
   triggers: [_types.Triggers.OnChange],
   props: {

package/lib/commonjs/mappings/TabView.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SEED_DATA = void 0;
+
+var _types = require("@draftbit/types");
+
+const SEED_DATA = [{
+  name: "Tab View",
+  tag: "TabView",
+  category: _types.COMPONENT_TYPES.container,
+  layout: {},
+  props: {
+    tabBarPosition: (0, _types.createTextEnumProp)({
+      label: "Tab Bar Position",
+      description: "Tab Bar Position",
+      options: ["top", "bottom"],
+      defaultValue: "top"
+    }),
+    keyboardDismissMode: (0, _types.createTextEnumProp)({
+      label: "Keyboard Dismiss Mode",
+      description: "Keyboard Dismiss Mode",
+      options: ["auto", "on-drag", "none"],
+      defaultValue: "auto"
+    }),
+    swipeEnabled: (0, _types.createBoolProp)({
+      label: "Swipe Enabled",
+      description: "Swipe Enabled",
+      defaultValue: true
+    }),
+    scrollEnabled: (0, _types.createBoolProp)({
+      label: "Scroll Enabled",
+      description: "Scroll Enabled",
+      defaultValue: true
+    }),
+    activeColor: (0, _types.createColorProp)({
+      label: "Active Color",
+      description: "Active Color",
+      defaultValue: "primary"
+    }),
+    inactiveColor: (0, _types.createColorProp)({
+      label: "Inactive Color",
+      description: "Inactive Color",
+      defaultValue: null
+    }),
+    pressColor: (0, _types.createColorProp)({
+      label: "Press Color",
+      description: "Press Color",
+      defaultValue: null
+    }),
+    indicatorColor: (0, _types.createColorProp)({
+      label: "Indicator Color",
+      description: "Indicator Color",
+      defaultValue: null
+    })
+  }
+}, {
+  name: "Tab View Item",
+  tag: "TabViewItem",
+  category: _types.COMPONENT_TYPES.container,
+  layout: {},
+  props: {
+    title: (0, _types.createTextProp)({
+      label: "Title",
+      description: "Tab Title"
+    }),
+    id: (0, _types.createTextProp)({
+      label: "Id",
+      description: "Tab Id"
+    }),
+    accessibilityLabel: (0, _types.createTextProp)({
+      label: "Accessibility Label",
+      description: "Accessibility Label"
+    })
+  }
+}];
+exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/mappings/TextField.js

@@ -24,7 +24,7 @@ const SEED_DATA_PROPS = {
     description: "Can automatically capitalize sentences, words, and characters (Default: none).",
     editable: true,
     required: false,
-    defaultValue: null,
+    defaultValue: "none",
     options: ["none", "sentences", "words", "characters"],
     formType: _types.FORM_TYPES.flatArray,
     propType: _types.PROP_TYPES.STRING

package/lib/commonjs/mappings/TextInput.js

@@ -103,7 +103,7 @@ const SEED_DATA = [{
       description: "Can automatically capitalize sentences, words, and characters (Default: none).",
       editable: true,
       required: false,
-      defaultValue: null,
+      defaultValue: "none",
       options: ["none", "sentences", "words", "characters"],
       formType: _types.FORM_TYPES.flatArray,
       propType: _types.PROP_TYPES.STRING

package/lib/module/components/CardContainerRating.js

@@ -1,5 +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 React from "react";
 import { View, Text } from "react-native";
 import color from "color";
@@ -47,11 +45,12 @@ const CardContainerRating = _ref => {
       break;
   }
 
-  return /*#__PURE__*/React.createElement(Card, _extends({
+  return /*#__PURE__*/React.createElement(Card, {
     style: style,
     onPress: onPress,
-    numColumns: numColumns
-  }, rest), /*#__PURE__*/React.createElement(Elevation, {
+    numColumns: numColumns,
+    ...rest
+  }, /*#__PURE__*/React.createElement(Elevation, {
     style: {
       elevation,
       borderRadius: roundness
@@ -128,4 +127,15 @@ const CardContainerRating = _ref => {
   })) : null)));
 };
 
+export default withTheme(CardContainerRating);ER_PADDING,
+      borderRadius: ICON_CONTAINER_SIZE,
+      backgroundColor: color(colors.strong).alpha(Config.cardIconBackgroundOpacity).rgb().string()
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: icon,
+    size: Config.cardIconSize,
+    color: colors.surface
+  })) : null)));
+};
+
 export default withTheme(CardContainerRating);

package/lib/module/components/Picker/Picker.js

@@ -261,7 +261,6 @@ const Picker = _ref => {
   );
 };
 
-export default withTheme(Picker);
 const styles = StyleSheet.create({
   marginsContainer: {
     alignSelf: "stretch",
@@ -331,4 +330,5 @@ const styles = StyleSheet.create({
     maxWidth: deviceWidth,
     maxHeight: deviceHeight
   }
-});
+});
+export default withTheme(Picker);

package/lib/module/components/Stepper.js

@@ -3,6 +3,7 @@ import { View, Text } from "react-native";
 import { isNumber } from "lodash";
 import { withTheme } from "../theming";
 import IconButton from "./IconButton";
+import { extractStyles } from "../utilities";
 
 const Stepper = _ref => {
   let {
@@ -11,7 +12,6 @@ const Stepper = _ref => {
     value: valueProp,
     defaultValue,
     style,
-    typeStyle,
     iconSize = 24,
     iconColor,
     onChange,
@@ -21,6 +21,10 @@ const Stepper = _ref => {
     },
     Icon
   } = _ref;
+  const {
+    viewStyles,
+    textStyles
+  } = extractStyles(style);
   const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0);
 
   const isValidValue = valueArg => valueArg >= min && valueArg <= max;
@@ -43,7 +47,7 @@ const Stepper = _ref => {
   return /*#__PURE__*/React.createElement(View, {
     style: [{
       flexDirection: "row"
-    }, style]
+    }, viewStyles]
   }, /*#__PURE__*/React.createElement(IconButton, {
     Icon: Icon,
     icon: "MaterialIcons/remove",
@@ -60,7 +64,7 @@ const Stepper = _ref => {
       alignSelf: "center",
       color: colors.medium,
       marginHorizontal: 8
-    }, typeStyle]
+    }, textStyles]
   }, value), /*#__PURE__*/React.createElement(IconButton, {
     Icon: Icon,
     icon: "MaterialIcons/add",