@draftbit/core 46.4.4-6ea8db.2 → 46.4.4-7001c8.2

package/lib/module/components/AnimatedCircularProgress.js

@@ -1,56 +0,0 @@
-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";
-const AnimatedProgress = Animated.createAnimatedComponent(CircularProgress);
-const AnimatedCircularProgress = _ref => {
-  let {
-    duration = 500,
-    easing = Easing.out(Easing.ease),
-    fill,
-    prefill = 0,
-    useNativeDriver = false,
-    tintColorSecondary,
-    onAnimationComplete,
-    tintColor = "black",
-    ...other
-  } = _ref;
-  const [fillAnimation] = React.useState(new Animated.Value(prefill));
-  const animate = React.useCallback(function () {
-    let toVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
-    let dur = arguments.length > 1 ? arguments[1] : undefined;
-    let ease = arguments.length > 2 ? arguments[2] : undefined;
-    const toValue = toVal >= 0 ? toVal : fill;
-    const dura = dur || duration;
-    const eas = ease || easing;
-    const useNative = useNativeDriver;
-    const anim = Animated.timing(fillAnimation, {
-      useNativeDriver: useNative,
-      toValue,
-      easing: eas,
-      duration: dura
-    });
-    anim.start(onAnimationComplete);
-    return anim;
-  }, [duration, easing, fill, useNativeDriver, fillAnimation, onAnimationComplete]);
-  const animateColor = () => {
-    if (!tintColorSecondary) {
-      return tintColor;
-    }
-    const tintAnimation = fillAnimation.interpolate({
-      inputRange: [0, 100],
-      outputRange: [tintColor, tintColorSecondary]
-    });
-    return tintAnimation;
-  };
-  React.useEffect(() => {
-    animate();
-  }, [fill, animate]);
-  return /*#__PURE__*/React.createElement(AnimatedProgress, _extends({}, other, {
-    style: other.style,
-    childrenContainerStyle: other.childrenContainerStyle,
-    fill: fillAnimation,
-    tintColor: animateColor()
-  }));
-};
-export default AnimatedCircularProgress;

package/lib/module/components/AspectRatio.js

@@ -1,42 +0,0 @@
-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 => {
-  const [layout, setLayout] = React.useState(null);
-  const {
-    aspectRatio = 1,
-    ...inputStyle
-  } = StyleSheet.flatten(props.style) || {};
-  const style = [inputStyle, {
-    aspectRatio
-  }];
-  if (layout) {
-    const {
-      width = 0,
-      height = 0
-    } = layout;
-    if (width === 0) {
-      style.push({
-        width: height * (1 / aspectRatio),
-        height
-      });
-    } else {
-      style.push({
-        width,
-        height: width * (1 / aspectRatio)
-      });
-    }
-  }
-  return /*#__PURE__*/React.createElement(View, _extends({}, props, {
-    style: style,
-    onLayout: _ref => {
-      let {
-        nativeEvent: {
-          layout: l
-        }
-      } = _ref;
-      return setLayout(l);
-    }
-  }), props.children);
-};
-export default AspectRatio;

package/lib/module/components/AvatarEdit.js

@@ -1,49 +0,0 @@
-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";
-import CircleImage from "./CircleImage";
-import { withTheme } from "../theming";
-const AvatarEdit = _ref => {
-  let {
-    Icon,
-    image,
-    size = 80,
-    onPress = () => {},
-    style,
-    theme,
-    ...rest
-  } = _ref;
-  const colorStyles = {
-    editBackgroundColor: theme.colors.primary,
-    editIconColor: theme.colors.surface,
-    editBorderColor: theme.colors.surface
-  };
-  const dimensions = {
-    width: size,
-    height: size
-  };
-  return /*#__PURE__*/React.createElement(View, _extends({
-    style: [style, dimensions]
-  }, rest), /*#__PURE__*/React.createElement(Touchable, {
-    onPress: onPress
-  }, /*#__PURE__*/React.createElement(CircleImage, {
-    source: image,
-    size: size
-  }), /*#__PURE__*/React.createElement(View, {
-    style: {
-      position: "absolute",
-      top: -3,
-      right: -3,
-      borderColor: colorStyles.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,157 +0,0 @@
-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";
-import shadow from "../styles/shadow";
-import { withTheme } from "../theming";
-const ELEVATION = 1;
-const DEFAULT_MAX_WIDTH = 960;
-const Banner = _ref => {
-  let {
-    initiallyVisible = true,
-    dismissable = true,
-    icon,
-    buttonColor,
-    content,
-    contentStyle,
-    style,
-    theme,
-    Icon,
-    ...rest
-  } = _ref;
-  const [visible, setVisible] = React.useState(initiallyVisible);
-  React.useEffect(() => {
-    if (initiallyVisible) {
-      setVisible(true);
-    }
-  }, [initiallyVisible]);
-  const {
-    current: position
-  } = React.useRef(new Animated.Value(visible ? 1 : 0));
-  const [layout, setLayout] = React.useState({
-    height: 0,
-    measured: false
-  });
-  React.useEffect(() => {
-    if (visible) {
-      // show
-      Animated.timing(position, {
-        duration: 250,
-        toValue: 1,
-        useNativeDriver: false
-      }).start();
-    } else {
-      // hide
-      Animated.timing(position, {
-        duration: 200,
-        toValue: 0,
-        useNativeDriver: false
-      }).start();
-    }
-  }, [visible, position]);
-  const handleLayout = _ref2 => {
-    let {
-      nativeEvent
-    } = _ref2;
-    const {
-      height
-    } = nativeEvent.layout;
-    setLayout({
-      height,
-      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
-  // In initial render, we position everything normally and measure the height of the banner
-  // Once we have the height, we apply the height to the spacer and switch the banner to position: absolute
-  // We need this because we need to move the content below as if banner's height was being animated
-  // 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, {
-    style: [styles.container, shadow(ELEVATION), style]
-  }), /*#__PURE__*/React.createElement(View, {
-    style: [styles.wrapper, contentStyle]
-  }, /*#__PURE__*/React.createElement(Animated.View, {
-    style: {
-      height
-    }
-  }), /*#__PURE__*/React.createElement(Animated.View, {
-    onLayout: handleLayout,
-    style: [layout.measured || !visible ?
-    // If we have measured banner's height or it's invisible,
-    // Position it absolutely, the layout will be taken care of the spacer
-    [styles.absolute, {
-      transform: [{
-        translateY
-      }]
-    }] :
-    // Otherwise position it normally
-    null, !layout.measured && !visible ?
-    // If we haven't measured banner's height yet and it's invisible,
-    // hide it with opacity: 0 so user doesn't see it
-    {
-      opacity: 0
-    } : null]
-  }, /*#__PURE__*/React.createElement(View, {
-    style: [styles.content, {
-      marginBottom: dismissable ? 0 : 16
-    }]
-  }, icon ? /*#__PURE__*/React.createElement(View, {
-    style: styles.icon
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: icon,
-    size: 40
-  })) : null, /*#__PURE__*/React.createElement(Text, {
-    style: [styles.message, {
-      color: theme.colors.text
-    }],
-    accessibilityLiveRegion: visible ? "polite" : "none",
-    accessibilityRole: "alert"
-  }, content)), dismissable ? /*#__PURE__*/React.createElement(View, {
-    style: styles.actions
-  }, /*#__PURE__*/React.createElement(Button, {
-    color: buttonColor || theme.colors.primary,
-    title: "Close",
-    onPress: () => setVisible(false)
-  })) : null)));
-};
-const styles = StyleSheet.create({
-  container: {
-    elevation: ELEVATION
-  },
-  wrapper: {
-    overflow: "hidden",
-    alignSelf: "center",
-    width: "100%",
-    maxWidth: DEFAULT_MAX_WIDTH
-  },
-  absolute: {
-    position: "absolute",
-    top: 0,
-    width: "100%"
-  },
-  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/Card.js

@@ -1,128 +0,0 @@
-import React from "react";
-import { StyleSheet, View, Pressable } from "react-native";
-import Image from "./Image";
-import Surface from "./Surface";
-import { Title, Subtitle, Caption } from "./Typography";
-import { withTheme } from "../theming";
-import Config from "./Config";
-const ICON_SIZE = Config.cardIconSize;
-const ICON_CONTAINER_SIZE = Config.cardIconSize * 2;
-const ICON_CONTAINER_PADDING = Config.cardIconSize / 2 - 1;
-const ICON_ELEVATION = Config.cardIconElevation;
-export const TopRightCircleIcon = withTheme(_ref => {
-  let {
-    Icon,
-    icon,
-    theme,
-    onPress
-  } = _ref;
-  return /*#__PURE__*/React.createElement(Surface, {
-    style: {
-      justifyContent: "center",
-      alignItems: "center",
-      elevation: ICON_ELEVATION,
-      position: "absolute",
-      top: 12,
-      right: 12,
-      width: ICON_CONTAINER_SIZE,
-      height: ICON_CONTAINER_SIZE,
-      padding: ICON_CONTAINER_PADDING,
-      borderRadius: ICON_CONTAINER_SIZE,
-      backgroundColor: "rgba(0, 0, 0, 0.1)"
-    }
-  }, /*#__PURE__*/React.createElement(Pressable, {
-    disabled: !onPress,
-    onPress: onPress,
-    style: _ref2 => {
-      let {
-        pressed
-      } = _ref2;
-      return [{
-        opacity: pressed ? 0.8 : 1
-      }];
-    }
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: icon,
-    size: ICON_SIZE,
-    color: theme.colors.surface
-  })));
-});
-const Card = _ref3 => {
-  let {
-    Icon,
-    image = Config.cardImageUrl,
-    title,
-    subtitle,
-    description,
-    textCentered,
-    icon,
-    aspectRatio = 1.5,
-    elevation = 2,
-    style,
-    onPress,
-    onPressIcon,
-    titleStyle,
-    subtitleStyle,
-    descriptionStyle,
-    theme,
-    children
-  } = _ref3;
-  const {
-    backgroundColor: bgColor,
-    padding,
-    ...styles
-  } = StyleSheet.flatten(style || {});
-  const backgroundColor = bgColor ? bgColor : theme.colors.surface;
-  const innerPadding = padding ? padding : 12;
-  return /*#__PURE__*/React.createElement(Surface, {
-    style: [{
-      elevation,
-      backgroundColor
-    }, styles]
-  }, /*#__PURE__*/React.createElement(Pressable, {
-    disabled: !onPress,
-    onPress: onPress,
-    style: _ref4 => {
-      let {
-        pressed
-      } = _ref4;
-      return [{
-        opacity: pressed ? 0.8 : 1
-      }];
-    }
-  }, /*#__PURE__*/React.createElement(Image, {
-    style: {
-      aspectRatio
-    },
-    source: typeof image === "string" ? {
-      uri: image
-    } : image,
-    resizeMode: "cover"
-  }), /*#__PURE__*/React.createElement(View, {
-    style: {
-      padding: innerPadding
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      alignItems: textCentered ? "center" : "flex-start"
-    }
-  }, title || title && title !== "" ? /*#__PURE__*/React.createElement(Title, {
-    text: title,
-    style: titleStyle
-  }) : null, subtitle || subtitle && subtitle !== "" ? /*#__PURE__*/React.createElement(Subtitle, {
-    text: subtitle,
-    style: subtitleStyle
-  }) : null, description || description && description !== "" ? /*#__PURE__*/React.createElement(View, {
-    style: {
-      marginTop: 4
-    }
-  }, /*#__PURE__*/React.createElement(Caption, {
-    text: description,
-    style: descriptionStyle
-  })) : null, children)), icon ? /*#__PURE__*/React.createElement(TopRightCircleIcon, {
-    Icon: Icon,
-    icon: icon,
-    onPress: onPressIcon
-  }) : null));
-};
-export default withTheme(Card);

package/lib/module/components/CardBlock.js

@@ -1,98 +0,0 @@
-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 Image from "./Image";
-import Card from "./DeprecatedCardWrapper";
-import Elevation from "./Elevation";
-import { withTheme } from "../theming";
-import Config from "./Config";
-const CardBlock = _ref => {
-  let {
-    image = Config.cardImageUrl,
-    title,
-    leftDescription,
-    rightDescription,
-    titleCentered,
-    aspectRatio = 1.5,
-    elevation = 2,
-    numColumns = 3,
-    theme: {
-      colors,
-      roundness,
-      typography
-    },
-    style,
-    onPress,
-    ...rest
-  } = _ref;
-  let titleJustification;
-  let titleStyle;
-  if (titleCentered && !leftDescription && !rightDescription) {
-    titleJustification = "center";
-  } else {
-    titleJustification = "space-between";
-  }
-  if (numColumns === 1) {
-    titleStyle = typography.button;
-  } else if (numColumns === 2) {
-    titleStyle = typography.headline6;
-  } else {
-    titleStyle = typography.headline5;
-  }
-  const rightDescriptionStyles = [typography.subtitle2, {
-    color: colors.light
-  }];
-  return /*#__PURE__*/React.createElement(Card, _extends({
-    style: style,
-    onPress: onPress,
-    numColumns: numColumns
-  }, rest), /*#__PURE__*/React.createElement(View, {
-    style: {
-      backgroundColor: colors.background
-    }
-  }, /*#__PURE__*/React.createElement(Elevation, {
-    style: {
-      elevation,
-      borderRadius: roundness
-    }
-  }, /*#__PURE__*/React.createElement(Image, {
-    style: {
-      borderRadius: roundness,
-      aspectRatio
-    },
-    source: typeof image === "string" ? {
-      uri: image
-    } : image,
-    resizeMode: "cover"
-  })), title ? /*#__PURE__*/React.createElement(View, {
-    style: {
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: titleJustification,
-      marginTop: numColumns === 3 ? 16 : 12
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    numberOfLines: 1,
-    style: [titleStyle, {
-      color: colors.strong
-    }]
-  }, title), !leftDescription && rightDescription ? /*#__PURE__*/React.createElement(Text, {
-    style: rightDescriptionStyles
-  }, rightDescription) : null) : null, leftDescription ? /*#__PURE__*/React.createElement(View, {
-    style: {
-      flexDirection: "row",
-      justifyContent: "space-between",
-      alignItems: "center",
-      marginTop: numColumns === 3 ? 4 : 4 / 2
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    numberOfLines: 1,
-    style: [typography.body2, {
-      color: colors.medium
-    }]
-  }, leftDescription), rightDescription ? /*#__PURE__*/React.createElement(Text, {
-    numberOfLines: 1,
-    style: rightDescriptionStyles
-  }, rightDescription) : null) : null));
-};
-export default withTheme(CardBlock);

package/lib/module/components/CardContainer.js

@@ -1,121 +0,0 @@
-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";
-import Image from "./Image";
-import Card from "./DeprecatedCardWrapper";
-import Elevation from "./Elevation";
-import { withTheme } from "../theming";
-import Config from "./Config";
-const ICON_CONTAINER_SIZE = Config.cardIconSize * 2;
-const ICON_CONTAINER_PADDING = Config.cardIconSize / 2 - 1;
-const CardContainer = _ref => {
-  let {
-    Icon,
-    icon,
-    image = Config.cardImageUrl,
-    title,
-    leftDescription,
-    rightDescription,
-    textCentered,
-    aspectRatio = 1.5,
-    elevation = 2,
-    numColumns = 3,
-    theme: {
-      colors,
-      roundness,
-      typography
-    },
-    style,
-    onPress,
-    ...rest
-  } = _ref;
-  let textJustification;
-  let titleStyle;
-  if (textCentered && !rightDescription) {
-    textJustification = "center";
-  } else {
-    textJustification = "space-between";
-  }
-  switch (numColumns) {
-    case 2:
-      titleStyle = typography.headline6;
-      break;
-    case 3:
-      titleStyle = typography.headline5;
-      break;
-  }
-  return /*#__PURE__*/React.createElement(Card, _extends({
-    style: style,
-    onPress: onPress,
-    numColumns: numColumns
-  }, rest), /*#__PURE__*/React.createElement(Elevation, {
-    style: {
-      elevation,
-      borderRadius: roundness
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      borderRadius: roundness,
-      overflow: "hidden",
-      backgroundColor: colors.surface
-    }
-  }, /*#__PURE__*/React.createElement(Image, {
-    style: {
-      aspectRatio
-    },
-    source: typeof image === "string" ? {
-      uri: image
-    } : image,
-    resizeMode: "cover"
-  }), /*#__PURE__*/React.createElement(View, {
-    style: {
-      padding: numColumns === 1 ? 8 : 16
-    }
-  }, title ? /*#__PURE__*/React.createElement(View, {
-    style: {
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: textJustification
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    numberOfLines: 1,
-    style: [titleStyle, {
-      color: colors.strong
-    }]
-  }, title)) : null, leftDescription ? /*#__PURE__*/React.createElement(View, {
-    style: {
-      flexDirection: "row",
-      justifyContent: textJustification,
-      alignItems: "center",
-      marginTop: numColumns === 3 ? 4 : 4 / 2
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    numberOfLines: 1,
-    style: [typography.body2, {
-      color: colors.medium
-    }]
-  }, leftDescription), rightDescription ? /*#__PURE__*/React.createElement(Text, {
-    numberOfLines: 1,
-    style: [typography.subtitle2, {
-      color: colors.light
-    }]
-  }, rightDescription) : null) : null), icon ? /*#__PURE__*/React.createElement(Elevation, {
-    style: {
-      elevation: Config.cardIconElevation,
-      position: "absolute",
-      top: 12,
-      right: 12,
-      width: ICON_CONTAINER_SIZE,
-      height: ICON_CONTAINER_SIZE,
-      padding: ICON_CONTAINER_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(CardContainer);