@draftbit/core 47.0.0-eae99e.2 → 47.0.1-9fd6f2.2

package/lib/module/components/ProgressBar.js

@@ -0,0 +1,149 @@
+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); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import React, { Component } from "react";
+import { Animated, Easing, View, I18nManager } from "react-native";
+const INDETERMINATE_WIDTH_FACTOR = 0.3;
+const BAR_WIDTH_ZERO_POSITION = INDETERMINATE_WIDTH_FACTOR / (1 + INDETERMINATE_WIDTH_FACTOR);
+export default class ProgressBar extends Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "handleLayout", event => {
+      const {
+        width = 150,
+        onLayout
+      } = this.props;
+      if (!width) {
+        this.setState({
+          width: event.nativeEvent.layout.width
+        });
+      }
+      if (onLayout) {
+        onLayout(event);
+      }
+    });
+    const {
+      progress: progressP = 0,
+      indeterminate = false
+    } = props;
+    const progress = Math.min(Math.max(progressP, 0), 1);
+    this.state = {
+      width: 0,
+      progress: new Animated.Value(indeterminate ? INDETERMINATE_WIDTH_FACTOR : progress),
+      animationValue: new Animated.Value(BAR_WIDTH_ZERO_POSITION)
+    };
+  }
+  componentDidMount() {
+    const {
+      indeterminate = false
+    } = this.props;
+    if (indeterminate) {
+      this.animate();
+    }
+  }
+  componentDidUpdate(prevProps) {
+    const {
+      indeterminate = false,
+      useNativeDriver = false,
+      progress: progressP = 0,
+      animationType = "spring",
+      animationConfig = {
+        bounciness: 0
+      },
+      animated = true
+    } = this.props;
+    if (prevProps.indeterminate !== indeterminate) {
+      if (indeterminate) {
+        this.animate();
+      } else {
+        Animated.spring(this.state.animationValue, {
+          toValue: BAR_WIDTH_ZERO_POSITION,
+          useNativeDriver
+        }).start();
+      }
+    }
+    if (prevProps.indeterminate !== indeterminate || prevProps.progress !== progressP) {
+      const progress = this.props.indeterminate ? INDETERMINATE_WIDTH_FACTOR : Math.min(Math.max(progressP, 0), 1);
+      if (animated) {
+        Animated[animationType](this.state.progress, {
+          ...animationConfig,
+          toValue: progress,
+          velocity: 0,
+          //adjust this value if animation fails - velocity is required
+          useNativeDriver
+        }).start();
+      } else {
+        this.state.progress.setValue(progress);
+      }
+    }
+  }
+  animate() {
+    const {
+      useNativeDriver = false,
+      indeterminateAnimationDuration = 1000
+    } = this.props;
+    this.state.animationValue.setValue(0);
+    Animated.timing(this.state.animationValue, {
+      toValue: 1,
+      duration: indeterminateAnimationDuration,
+      easing: Easing.linear,
+      isInteraction: false,
+      useNativeDriver
+    }).start(endState => {
+      if (endState.finished) {
+        this.animate();
+      }
+    });
+  }
+  render() {
+    const {
+      borderColor,
+      borderRadius = 4,
+      borderWidth = 1,
+      children,
+      color = "rgba(0, 122, 255, 1)",
+      style,
+      unfilledColor,
+      width = 150,
+      ...restProps
+    } = this.props;
+    const innerWidth = Math.max(0, width || this.state.width) - borderWidth * 2;
+    const containerStyle = {
+      width,
+      borderWidth,
+      borderColor: borderColor || color,
+      borderRadius,
+      overflow: "hidden",
+      backgroundColor: unfilledColor
+    };
+    const progressStyle = {
+      backgroundColor: color,
+      // Always take up full height of container.
+      height: "100%",
+      transform: [{
+        translateX: this.state.animationValue.interpolate({
+          inputRange: [0, 1],
+          outputRange: [innerWidth * -INDETERMINATE_WIDTH_FACTOR, innerWidth]
+        })
+      }, {
+        translateX: this.state.progress.interpolate({
+          inputRange: [0, 1],
+          outputRange: [innerWidth / (I18nManager.isRTL ? 2 : -2), 0]
+        })
+      }, {
+        // Interpolation a temp workaround for https://github.com/facebook/react-native/issues/6278
+        scaleX: this.state.progress.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0.0001, 1]
+        })
+      }]
+    };
+    return /*#__PURE__*/React.createElement(View, _extends({
+      style: [containerStyle, style],
+      onLayout: this.handleLayout
+    }, restProps), /*#__PURE__*/React.createElement(Animated.View, {
+      style: progressStyle
+    }), children);
+  }
+}

package/lib/module/components/ProgressCircle.js

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { Text } from "react-native";
+import AnimatedCircularProgress from "./AnimatedCircularProgress";
+import { withTheme } from "../theming";
+const ProgressCircle = _ref => {
+  let {
+    progress = 0.5,
+    style,
+    color = "primary",
+    size = 100,
+    showsText = true,
+    unfilledColor,
+    strokeCap = "butt",
+    textStyle,
+    thickness = 1,
+    theme
+  } = _ref;
+  const progressNum = Math.round(progress * 100);
+  const tintColor = color || theme.colors.primary;
+  const backgroundColor = unfilledColor || theme.colors.secondary;
+  return /*#__PURE__*/React.createElement(AnimatedCircularProgress, {
+    size: size,
+    width: thickness,
+    backgroundWidth: thickness,
+    fill: progressNum,
+    tintColor: tintColor,
+    backgroundColor: backgroundColor,
+    rotation: 0,
+    lineCap: strokeCap,
+    style: style
+  }, fill => showsText ? /*#__PURE__*/React.createElement(Text, {
+    style: [{
+      fontSize: size * 0.275,
+      color: tintColor
+    }, textStyle]
+  }, Math.round(fill), "%") : null);
+};
+export default withTheme(ProgressCircle);

package/lib/module/components/ProgressIndicator.js

@@ -0,0 +1,45 @@
+import * as React from "react";
+import StepIndicator from "./StepIndicator";
+import { withTheme } from "../theming";
+const ProgressIndicator = _ref => {
+  let {
+    numberOfSteps,
+    currentStep,
+    currentStepStrokeWidth = 3,
+    stepStrokeCurrentColor = "primary",
+    stepIndicatorSize,
+    currentStepIndicatorSize,
+    stepIndicatorCurrentColor,
+    stepIndicatorLabelCurrentColor,
+    stepIndicatorLabelFontSize = 12,
+    stepNumberFinishedColor = "strongInverse",
+    stepNumberUnfinishedColor = "primary",
+    unfinishedColor = "light",
+    finishedColor = "primary",
+    theme
+  } = _ref;
+  const currentPosition = currentStep - 1;
+  return /*#__PURE__*/React.createElement(StepIndicator, {
+    stepCount: numberOfSteps,
+    currentPosition: currentPosition,
+    customStyles: {
+      stepIndicatorSize,
+      currentStepIndicatorSize: currentStepIndicatorSize ? currentStepIndicatorSize : stepIndicatorSize,
+      stepStrokeFinishedColor: finishedColor,
+      stepStrokeUnFinishedColor: unfinishedColor,
+      separatorFinishedColor: finishedColor,
+      separatorUnFinishedColor: unfinishedColor,
+      stepIndicatorFinishedColor: finishedColor,
+      stepIndicatorUnFinishedColor: unfinishedColor,
+      currentStepStrokeWidth,
+      stepStrokeCurrentColor: stepStrokeCurrentColor || stepIndicatorCurrentColor,
+      stepIndicatorLabelUnFinishedColor: stepNumberUnfinishedColor,
+      stepIndicatorLabelFinishedColor: stepNumberFinishedColor,
+      stepIndicatorCurrentColor: stepIndicatorCurrentColor || unfinishedColor,
+      stepIndicatorLabelCurrentColor: stepIndicatorLabelCurrentColor || stepNumberUnfinishedColor,
+      stepIndicatorLabelFontSize,
+      labelFontFamily: theme.typography.body1.fontFamily
+    }
+  });
+};
+export default withTheme(ProgressIndicator);

package/lib/module/components/RadioButton/RadioButton.js

@@ -40,5 +40,4 @@ const RadioButton = _ref => {
     style: style
   }, rest));
 };
-export default RadioButton;
-//# sourceMappingURL=RadioButton.js.map
+export default RadioButton;

package/lib/module/components/RadioButton/RadioButtonFieldGroup.js

@@ -24,5 +24,4 @@ const RadioButtonFieldGroup = _ref => {
     theme: theme
   }, rest), children));
 };
-export default withTheme(RadioButtonFieldGroup);
-//# sourceMappingURL=RadioButtonFieldGroup.js.map
+export default withTheme(RadioButtonFieldGroup);

package/lib/module/components/RadioButton/RadioButtonGroup.js

@@ -56,5 +56,4 @@ const RadioButtonGroup = _ref => {
     style: _containerStyle
   }, children)));
 };
-export default RadioButtonGroup;
-//# sourceMappingURL=RadioButtonGroup.js.map
+export default RadioButtonGroup;

package/lib/module/components/RadioButton/RadioButtonRow.js

@@ -106,5 +106,4 @@ const styles = StyleSheet.create({
     flex: 3
   }
 });
-export default RadioButtonRow;
-//# sourceMappingURL=RadioButtonRow.js.map
+export default RadioButtonRow;

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

@@ -11,5 +11,4 @@ export const radioButtonGroupContext = /*#__PURE__*/createContext({
 });
 export function useRadioButtonGroupContext() {
   return useContext(radioButtonGroupContext);
-}
-//# sourceMappingURL=context.js.map
+}

package/lib/module/components/RadioButton/index.js

@@ -1,5 +1,4 @@
 export { default as RadioButton } from "./RadioButton";
 export { default as RadioButtonGroup } from "./RadioButtonGroup";
 export { default as RadioButtonRow } from "./RadioButtonRow";
-export { default as RadioButtonFieldGroup } from "./RadioButtonFieldGroup";
-//# sourceMappingURL=index.js.map
+export { default as RadioButtonFieldGroup } from "./RadioButtonFieldGroup";

package/lib/module/components/ResizeMode.js

@@ -0,0 +1 @@
+export {};

package/lib/module/components/Row.js

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { View, Text, Image, StyleSheet } from "react-native";
+import { withTheme } from "../theming";
+import Config from "./Config";
+const Row = _ref => {
+  let {
+    titleTypeStyle,
+    titleColor,
+    subtitleTypeStyle,
+    subtitleColor,
+    title,
+    subtitle,
+    multilineSubtitle,
+    image,
+    right,
+    style
+  } = _ref;
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, {
+      padding: 16
+    }, style]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.leftContainer
+  }, image && /*#__PURE__*/React.createElement(Image, {
+    source: typeof image === "string" ? {
+      uri: image
+    } : image,
+    style: {
+      marginRight: 12,
+      width: subtitle ? Config.rowMultiLineImageSize : Config.rowSingleLineImageSize,
+      height: subtitle ? Config.rowMultiLineImageSize : Config.rowSingleLineImageSize
+    }
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles.textContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [titleTypeStyle, {
+      color: titleColor
+    }],
+    numberOfLines: 1
+  }, title), subtitle ? /*#__PURE__*/React.createElement(Text, {
+    style: [subtitleTypeStyle, {
+      color: subtitleColor,
+      marginTop: 4
+    }],
+    numberOfLines: multilineSubtitle ? undefined : 1
+  }, subtitle) : null)), right && right());
+};
+const styles = StyleSheet.create({
+  leftContainer: {
+    flexDirection: "row",
+    flex: 1
+  },
+  container: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  textContainer: {
+    flex: 1,
+    justifyContent: "center"
+  }
+});
+export default withTheme(Row);

package/lib/module/components/RowBodyIcon.js

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { withTheme } from "../theming";
+import Row from "./Row";
+import Config from "./Config";
+const RowBodyIcon = _ref => {
+  let {
+    Icon,
+    title,
+    subtitle,
+    icon,
+    style,
+    theme: {
+      colors,
+      typography
+    }
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Row, {
+    titleTypeStyle: typography.body1,
+    titleColor: colors.medium,
+    subtitleTypeStyle: typography.subtitle2,
+    subtitleColor: colors.light,
+    title: title,
+    subtitle: subtitle,
+    right: () => /*#__PURE__*/React.createElement(Icon, {
+      name: icon,
+      size: Config.rowSingleLineIconSize,
+      color: colors.light,
+      style: {
+        marginLeft: 16
+      }
+    }),
+    style: style
+  });
+};
+export default withTheme(RowBodyIcon);

package/lib/module/components/RowHeadlineImageCaption.js

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Text } from "react-native";
+import { withTheme } from "../theming";
+import Row from "./Row";
+const RowHeadlineImageCaption = _ref => {
+  let {
+    title,
+    subtitle,
+    caption,
+    image,
+    style,
+    theme: {
+      colors,
+      typography
+    }
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Row, {
+    titleTypeStyle: typography.headline6,
+    titleColor: colors.strong,
+    subtitleTypeStyle: typography.body2,
+    subtitleColor: colors.medium,
+    title: title,
+    subtitle: subtitle,
+    image: image,
+    right: () => /*#__PURE__*/React.createElement(Text, {
+      style: {
+        ...typography.caption,
+        color: colors.strong,
+        marginLeft: 16
+      }
+    }, caption),
+    style: style
+  });
+};
+export default withTheme(RowHeadlineImageCaption);

package/lib/module/components/RowHeadlineImageIcon.js

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { withTheme } from "../theming";
+import Row from "./Row";
+import Config from "./Config";
+const RowHeadlineImageIcon = _ref => {
+  let {
+    Icon,
+    icon,
+    title,
+    image,
+    subtitle,
+    multilineSubtitle = false,
+    style,
+    theme: {
+      colors,
+      typography
+    }
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Row, {
+    titleTypeStyle: typography.headline6,
+    titleColor: colors.strong,
+    subtitleTypeStyle: typography.body2,
+    subtitleColor: colors.medium,
+    title: title,
+    subtitle: subtitle,
+    multilineSubtitle: multilineSubtitle,
+    image: image,
+    right: () => /*#__PURE__*/React.createElement(Icon, {
+      name: icon,
+      size: multilineSubtitle ? Config.rowMultiLineIconSize : Config.rowSingleLineIconSize,
+      color: colors.light,
+      style: {
+        marginLeft: 16,
+        alignSelf: multilineSubtitle ? "flex-start" : "center",
+        marginTop: multilineSubtitle ? 4 : 0
+      }
+    }),
+    style: style
+  });
+};
+export default withTheme(RowHeadlineImageIcon);

package/lib/module/components/SVG.js

@@ -26,5 +26,4 @@ const SVG = _ref => {
     }
   }));
 };
-export default SVG;
-//# sourceMappingURL=SVG.js.map
+export default SVG;

package/lib/module/components/ScreenContainer.js

@@ -46,5 +46,4 @@ const styles = StyleSheet.create({
     flex: undefined
   }
 });
-export default withTheme(ScreenContainer);
-//# sourceMappingURL=ScreenContainer.js.map
+export default withTheme(ScreenContainer);

package/lib/module/components/Slider.js

@@ -98,5 +98,4 @@ const styles = StyleSheet.create({
     marginHorizontal: 12
   }
 });
-export default withTheme(Slider);
-//# sourceMappingURL=Slider.js.map
+export default withTheme(Slider);

package/lib/module/components/StarRating.js

@@ -74,5 +74,4 @@ const styles = StyleSheet.create({
     width: "50%"
   }
 });
-export default withTheme(StarRating);
-//# sourceMappingURL=StarRating.js.map
+export default withTheme(StarRating);