@draftbit/core 47.0.0-eae99e.2 → 47.0.1-17098e.2

package/src/components/Container.tsx

@@ -0,0 +1,116 @@
+import * as React from "react";
+import {
+  View,
+  ImageBackground,
+  ImageSourcePropType,
+  StyleProp,
+  StyleSheet,
+  ViewStyle,
+} from "react-native";
+import { withTheme } from "../theming";
+
+import Elevation from "./Elevation";
+import type { Theme } from "../styles/DefaultTheme";
+import { ResizeModeType } from "./ResizeMode";
+
+type Props = {
+  theme: Theme;
+  useThemeGutterPadding: boolean;
+  borderColor: string;
+  borderWidth: number;
+  backgroundColor: string;
+  backgroundImage?: string | ImageSourcePropType;
+  backgroundImageResizeMode?: ResizeModeType;
+  elevation?: number;
+  style?: StyleProp<ViewStyle>;
+  children?: React.ReactNode;
+};
+
+const Container: React.FC<React.PropsWithChildren<Props>> = ({
+  useThemeGutterPadding,
+  borderColor,
+  borderWidth,
+  backgroundColor,
+  backgroundImage,
+  backgroundImageResizeMode,
+  elevation,
+  style,
+  children,
+  theme, // eslint-disable-line @typescript-eslint/no-unused-vars
+  ...rest
+}) => {
+  const {
+    flex,
+    flexGrow,
+    flexWrap,
+    flexBasis,
+    flexShrink,
+    flexDirection,
+    alignContent,
+    justifyContent,
+    alignItems,
+    padding,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingVertical,
+    paddingHorizontal,
+    ...styleProp
+  } = StyleSheet.flatten(style) || {};
+
+  const containerStyle: StyleProp<ViewStyle> = {
+    backgroundColor,
+    borderColor,
+    borderWidth,
+    width: "100%",
+    ...styleProp,
+  };
+
+  const innerStyle: StyleProp<ViewStyle> = {
+    flex,
+    flexGrow,
+    flexWrap,
+    flexBasis,
+    flexShrink,
+    flexDirection,
+    alignContent,
+    justifyContent,
+    alignItems,
+    padding,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingVertical,
+    paddingHorizontal: paddingHorizontal || useThemeGutterPadding ? 16 : 0,
+  };
+
+  const Wrap = elevation ? Elevation : View;
+
+  if (elevation) containerStyle.elevation = elevation;
+
+  return (
+    <Wrap style={[containerStyle, style]} {...rest}>
+      {backgroundImage ? (
+        <ImageBackground
+          source={
+            typeof backgroundImage === "string"
+              ? { uri: backgroundImage }
+              : backgroundImage
+          }
+          resizeMode={backgroundImageResizeMode}
+          style={{
+            flex: 1,
+          }}
+        >
+          <View style={innerStyle}>{children}</View>
+        </ImageBackground>
+      ) : (
+        <View style={innerStyle}>{children}</View>
+      )}
+    </Wrap>
+  );
+};
+
+export default withTheme(Container);

package/src/components/DatePicker/DatePicker.js

@@ -6,6 +6,7 @@ import { withTheme } from "../../theming";
 import Portal from "../Portal/Portal";
 import Touchable from "../Touchable";
 import DateTimePicker from "./DatePickerComponent";
+import { extractStyles } from "../../utilities";
 const AnimatedText = Animated.createAnimatedComponent(Text);
 const FOCUS_ANIMATION_DURATION = 150;
 const BLUR_ANIMATION_DURATION = 180;
@@ -24,7 +25,7 @@ const MONTHS = [
     "November",
     "December",
 ];
-const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disabledOpacity }, date, onDateChange = () => { }, defaultValue, disabled = false, mode = "date", format, type = "underline", leftIconName, rightIconName, leftIconMode = "inset", label, placeholder, ...props }) => {
+const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disabledOpacity }, date, onDateChange = () => { }, defaultValue, disabled = false, mode = "date", format, type = "underline", leftIconName, rightIconName, leftIconMode = "inset", label, labelSize, labelColor, placeholder, borderColor: inputBorderColor, borderColorActive: inputBorderColorActive, ...props }) => {
     const [value, setValue] = React.useState(date || defaultValue);
     React.useEffect(() => {
         if (defaultValue != null) {
@@ -36,6 +37,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
     const [placeholder1, setPlaceholder1] = React.useState("");
     const [focused, setFocused] = React.useState(false);
     const [labelLayout, setLabelLayout] = React.useState({ measured: false, width: 0 });
+    const { viewStyles, textStyles } = extractStyles(style);
     const getValidDate = () => {
         if (!value) {
             return new Date();
@@ -125,8 +127,10 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
     };
     const MINIMIZED_LABEL_Y_OFFSET = -(typography.caption.lineHeight + 4);
     const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -(16 * 0.5 + 4);
-    const MAXIMIZED_LABEL_FONT_SIZE = typography.subtitle1.fontSize;
-    const MINIMIZED_LABEL_FONT_SIZE = typography.caption.fontSize;
+    const MAXIMIZED_LABEL_FONT_SIZE = textStyles.fontSize || typography.subtitle1.fontSize;
+    const MINIMIZED_LABEL_FONT_SIZE = labelSize
+        ? labelSize
+        : typography.caption.fontSize;
     const hasActiveOutline = focused;
     let inputTextColor, activeColor, underlineColor, borderColor, placeholderColor, containerStyle, backgroundColor, inputStyle;
     inputTextColor = colors.strong;
@@ -138,9 +142,9 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
         backgroundColor = colors.divider;
     }
     else {
-        activeColor = colors.primary;
-        placeholderColor = borderColor = colors.light;
-        underlineColor = colors.light;
+        activeColor = inputBorderColorActive || colors.primary;
+        placeholderColor = inputBorderColor || colors.light;
+        underlineColor = inputBorderColor || colors.light;
         backgroundColor = colors.background;
     }
     const { lineHeight, ...subtitle1 } = typography.subtitle1;
@@ -202,6 +206,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
     const labelStyle = {
         ...typography.subtitle1,
         top: type === "solid" ? 16 : 0,
+        fontFamily: textStyles === null || textStyles === void 0 ? void 0 : textStyles.fontFamily,
         left: leftIconName && leftIconMode === "inset"
             ? ICON_SIZE + (type === "solid" ? 16 : 12)
             : 0,
@@ -252,7 +257,11 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
             React.createElement(View, { pointerEvents: "none" },
                 React.createElement(View, { style: [styles.container, style] },
                     leftIconName && leftIconMode === "outset" ? (React.createElement(Icon, { ...leftIconProps, style: leftIconStyle })) : null,
-                    React.createElement(View, { style: [containerStyle, style ? { height: style.height } : {}] },
+                    React.createElement(View, { style: [
+                            containerStyle,
+                            style ? { height: style.height } : {},
+                            viewStyles,
+                        ] },
                         type === "underline" ? (
                         // When type === 'flat', render an underline
                         React.createElement(Animated.View, { style: [
@@ -282,7 +291,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
                                     type === "solid" ? { paddingHorizontal: 12 } : {},
                                     labelStyle,
                                     {
-                                        color: colors.light,
+                                        color: labelColor || colors.light,
                                         opacity: labeled.interpolate({
                                             inputRange: [0, 1],
                                             outputRange: [hasActiveOutline ? 1 : 0, 0],
@@ -294,7 +303,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
                                     type === "solid" ? { paddingHorizontal: 12 } : {},
                                     labelStyle,
                                     {
-                                        color: placeholderColor,
+                                        color: labelColor || placeholderColor,
                                         opacity: hasActiveOutline ? labeled : 1,
                                     },
                                 ], numberOfLines: 1 }, label))) : null,
@@ -302,7 +311,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
                                 ...leftIconStyle,
                                 marginLeft: type === "solid" ? 16 : 0,
                             } })) : null,
-                        React.createElement(NativeTextInput, { value: formatDate(), placeholder: label ? placeholder1 : placeholder, editable: !disabled, placeholderTextColor: placeholderColor, selectionColor: activeColor, onFocus: _handleFocus, onBlur: _handleBlur, underlineColorAndroid: "transparent", style: inputStyles, ...props })),
+                        React.createElement(NativeTextInput, { value: formatDate(), placeholder: label ? placeholder1 : placeholder, editable: !disabled, placeholderTextColor: placeholderColor, selectionColor: activeColor, onFocus: _handleFocus, onBlur: _handleBlur, underlineColorAndroid: "transparent", style: [inputStyles, textStyles], ...props })),
                     rightIconName ? (React.createElement(Icon, { name: rightIconName, size: ICON_SIZE, color: colors.light, style: {
                             position: "absolute",
                             right: 16,

package/src/components/DatePicker/DatePicker.tsx

@@ -23,6 +23,7 @@ import DateTimePicker from "./DatePickerComponent";
 
 import type { Theme } from "../../styles/DefaultTheme";
 import type { IconSlot } from "../../interfaces/Icon";
+import { extractStyles } from "../../utilities";
 
 const AnimatedText = Animated.createAnimatedComponent(Text);
 
@@ -31,14 +32,13 @@ const BLUR_ANIMATION_DURATION = 180;
 const ICON_SIZE = 24;
 
 type Props = {
-  style?: StyleProp<ViewStyle> & { height?: number };
+  style?: StyleProp<ViewStyle | TextStyle> & { height?: number };
   theme: Theme;
   // initialDate?: string;
   // locale?: string;
   // minuteInterval?: number;
   // timeZoneOffsetInMinutes?: number;
   // error?: boolean;
-  // type?: string;
   date?: Date;
   format?: string;
   onDateChange?: (data?: Date) => void;
@@ -47,10 +47,14 @@ type Props = {
   mode?: "date" | "time" | "datetime";
   type?: "solid" | "underline";
   label?: string;
+  labelSize?: number;
+  labelColor?: string;
   placeholder?: string;
   leftIconName?: string;
   leftIconMode?: "outset" | "inset";
   rightIconName?: string;
+  borderColor?: string;
+  borderColorActive?: string;
 } & IconSlot &
   TextInputProps;
 
@@ -84,7 +88,11 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
   rightIconName,
   leftIconMode = "inset",
   label,
+  labelSize,
+  labelColor,
   placeholder,
+  borderColor: inputBorderColor,
+  borderColorActive: inputBorderColorActive,
   ...props
 }) => {
   const [value, setValue] = React.useState<any>(date || defaultValue);
@@ -106,6 +114,8 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
     width: number;
   }>({ measured: false, width: 0 });
 
+  const { viewStyles, textStyles } = extractStyles(style);
+
   const getValidDate = (): Date => {
     if (!value) {
       return new Date();
@@ -211,8 +221,11 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
 
   const MINIMIZED_LABEL_Y_OFFSET = -(typography.caption.lineHeight + 4);
   const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -(16 * 0.5 + 4);
-  const MAXIMIZED_LABEL_FONT_SIZE = typography.subtitle1.fontSize;
-  const MINIMIZED_LABEL_FONT_SIZE = typography.caption.fontSize;
+  const MAXIMIZED_LABEL_FONT_SIZE =
+    textStyles.fontSize || typography.subtitle1.fontSize;
+  const MINIMIZED_LABEL_FONT_SIZE = labelSize
+    ? labelSize
+    : typography.caption.fontSize;
 
   const hasActiveOutline = focused;
 
@@ -233,9 +246,9 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
     underlineColor = "transparent";
     backgroundColor = colors.divider;
   } else {
-    activeColor = colors.primary;
-    placeholderColor = borderColor = colors.light;
-    underlineColor = colors.light;
+    activeColor = inputBorderColorActive || colors.primary;
+    placeholderColor = inputBorderColor || colors.light;
+    underlineColor = inputBorderColor || colors.light;
     backgroundColor = colors.background;
   }
 
@@ -306,6 +319,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
   const labelStyle = {
     ...typography.subtitle1,
     top: type === "solid" ? 16 : 0,
+    fontFamily: textStyles?.fontFamily,
     left:
       leftIconName && leftIconMode === "inset"
         ? ICON_SIZE + (type === "solid" ? 16 : 12)
@@ -364,7 +378,11 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
               <Icon {...leftIconProps} style={leftIconStyle} />
             ) : null}
             <View
-              style={[containerStyle, style ? { height: style.height } : {}]}
+              style={[
+                containerStyle,
+                style ? { height: style.height } : {},
+                viewStyles,
+              ]}
             >
               {type === "underline" ? (
                 // When type === 'flat', render an underline
@@ -406,7 +424,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
                       type === "solid" ? { paddingHorizontal: 12 } : {},
                       labelStyle,
                       {
-                        color: colors.light,
+                        color: labelColor || colors.light,
                         opacity: labeled.interpolate({
                           inputRange: [0, 1],
                           outputRange: [hasActiveOutline ? 1 : 0, 0],
@@ -423,7 +441,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
                       type === "solid" ? { paddingHorizontal: 12 } : {},
                       labelStyle,
                       {
-                        color: placeholderColor,
+                        color: labelColor || placeholderColor,
                         opacity: hasActiveOutline ? labeled : 1,
                       },
                     ]}
@@ -453,7 +471,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
                 onFocus={_handleFocus}
                 onBlur={_handleBlur}
                 underlineColorAndroid={"transparent"}
-                style={inputStyles}
+                style={[inputStyles, textStyles]}
                 {...props}
               />
             </View>

package/src/components/DeprecatedCardWrapper.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { withTheme } from "../theming";
+import { Pressable } from "react-native";
+const getWidth = (numColumns) => {
+    switch (numColumns) {
+        case 1:
+            return "33%";
+        case 2:
+            return "50%";
+        default:
+            return "100%";
+    }
+};
+const Card = ({ numColumns = 3, children, onPress, style, ...rest }) => {
+    const width = getWidth(numColumns);
+    return (React.createElement(Pressable, { disabled: !onPress, onPress: onPress, style: [style, { width }], ...rest }, children));
+};
+export default withTheme(Card);

package/src/components/DeprecatedCardWrapper.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { withTheme } from "../theming";
+import { StyleProp, ViewStyle, Pressable } from "react-native";
+import theme from "../styles/DefaultTheme";
+
+type Props = {
+  numColumns?: number;
+  children?: React.ReactNode;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  theme: typeof theme;
+};
+
+const getWidth = (numColumns: number) => {
+  switch (numColumns) {
+    case 1:
+      return "33%";
+    case 2:
+      return "50%";
+    default:
+      return "100%";
+  }
+};
+
+const Card: React.FC<React.PropsWithChildren<Props>> = ({
+  numColumns = 3,
+  children,
+  onPress,
+  style,
+  ...rest
+}) => {
+  const width = getWidth(numColumns);
+  return (
+    <Pressable
+      disabled={!onPress}
+      onPress={onPress}
+      style={[style, { width }]}
+      {...rest}
+    >
+      {children}
+    </Pressable>
+  );
+};
+
+export default withTheme(Card);

package/src/components/{DeprecatedButton.js → DeprecatedFAB.js}

@@ -1,20 +1,20 @@
 import * as React from "react";
-import { ActivityIndicator, View, Text, StyleSheet, } from "react-native";
+import { ActivityIndicator, View, StyleSheet, Pressable, } from "react-native";
 import color from "color";
 import Config from "./Config";
-import Touchable from "./Touchable";
+import Text from "./Text";
 import Elevation from "./Elevation";
 import { withTheme } from "../theming";
-const Button = ({ Icon, icon, disabled = false, type = "solid", loading = false, labelColor, color: colorOverride, children, onPress, elevation = 0, style, theme: { colors, disabledOpacity, roundness, typography }, ...rest }) => {
+const FAB = ({ Icon, icon, disabled = false, type = "solid", loading = false, color: colorOverride, label, onPress, elevation = 0, style, theme: { colors, disabledOpacity, roundness, typography }, ...rest }) => {
     let backgroundColor, borderColor, textColor, borderWidth;
     const buttonColor = colorOverride || colors.primary;
-    if (type === "solid") {
+    if (type === "standard" || type === "extended" || type === "fixed") {
         backgroundColor = buttonColor;
         if (disabled) {
             textColor = color(colors.surface).alpha(disabledOpacity).rgb().string();
         }
         else {
-            textColor = labelColor || colors.surface;
+            textColor = colors.surface;
         }
     }
     else {
@@ -23,7 +23,7 @@ const Button = ({ Icon, icon, disabled = false, type = "solid", loading = false,
             textColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
         }
         else {
-            textColor = labelColor || buttonColor;
+            textColor = buttonColor;
         }
     }
     if (type === "outline") {
@@ -44,43 +44,53 @@ const Button = ({ Icon, icon, disabled = false, type = "solid", loading = false,
         borderColor,
         borderWidth,
         borderRadius: roundness,
+        alignItems: "center",
+        justifyContent: "center",
     };
+    const buttonStyles = [styles.button, buttonStyle];
+    const contentStyle = [styles.content];
     const textStyle = {
         textAlign: "center",
         color: textColor,
-        marginVertical: 16,
-        marginHorizontal: 16,
     };
     const iconStyle = [
         styles.icon,
         {
-            marginLeft: 16,
-            marginRight: -8,
             width: Config.buttonIconSize,
         },
     ];
-    const { margin, marginEnd, marginTop, marginLeft, marginRight, marginBottom, marginHorizontal, marginVertical, ...innerStyles } = StyleSheet.flatten(style || {});
-    const margins = {
-        margin,
-        marginEnd,
-        marginTop,
-        marginLeft,
-        marginRight,
-        marginBottom,
-        marginHorizontal,
-        marginVertical,
-    };
-    return (React.createElement(Elevation, { style: { elevation, alignSelf: "stretch", ...margins } },
-        React.createElement(Touchable, { ...rest, onPress: onPress, accessibilityState: { disabled }, accessibilityRole: "button", disabled: disabled || loading, style: [styles.button, buttonStyle, innerStyles] },
+    if (type === "standard" || type === "outline") {
+        buttonStyle.width = Config.FABSize;
+        buttonStyle.height = Config.FABSize;
+        buttonStyle.borderRadius = Config.FABBorderRadius;
+        contentStyle.push({
+            width: Config.FABSize,
+            height: Config.FABSize,
+        });
+    }
+    if (type === "extended" || type === "fixed") {
+        iconStyle.push({
+            marginLeft: 16,
+            marginRight: -8,
+        });
+        textStyle.margin = 16;
+    }
+    if (type === "fixed") {
+        buttonStyles.push({
+            height: Config.FABFixedHeight,
+            alignSelf: "stretch",
+        });
+    }
+    return (React.createElement(Elevation, { style: [{ elevation }, style] },
+        React.createElement(Pressable, { ...rest, onPress: onPress, accessibilityState: { disabled }, accessibilityRole: "button", disabled: disabled || loading, style: buttonStyles },
             React.createElement(View, { style: styles.content },
                 icon && loading !== true ? (React.createElement(View, { style: iconStyle },
                     React.createElement(Icon, { name: icon, size: Config.buttonIconSize, color: textColor }))) : null,
                 loading ? (React.createElement(ActivityIndicator, { size: "small", color: textColor, style: iconStyle })) : null,
-                React.createElement(Text, { numberOfLines: 1, style: [textStyle, typography.button] }, children)))));
+                label ? (React.createElement(Text, { numberOfLines: 1, style: [textStyle, typography.button] }, label)) : null))));
 };
 const styles = StyleSheet.create({
     button: {
-        minWidth: 64,
         borderStyle: "solid",
     },
     content: {
@@ -89,7 +99,16 @@ const styles = StyleSheet.create({
         justifyContent: "center",
     },
     icon: {
+        alignItems: "center",
+        justifyContent: "center",
         width: Config.buttonIconSize,
     },
+    fixed: {
+        left: 0,
+        right: 0,
+        bottom: 0,
+        height: 64,
+        borderRadius: 0,
+    },
 });
-export default withTheme(Button);
+export default withTheme(FAB);