@draftbit/core 47.0.1-17098e.2 → 47.0.1-2aab54.2

package/src/components/DeprecatedButton.tsx

@@ -0,0 +1,214 @@
+import * as React from "react";
+import {
+  ActivityIndicator,
+  View,
+  Text,
+  StyleSheet,
+  TouchableHighlightProps,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+} from "react-native";
+import color from "color";
+import Config from "./Config";
+import Touchable from "./Touchable";
+import Elevation from "./Elevation";
+import { withTheme } from "../theming";
+
+import type { Theme } from "../styles/DefaultTheme";
+import type { IconSlot } from "../interfaces/Icon";
+
+/**
+ * A button is component that the user can press to trigger an action.
+ *
+ * <div class="screenshots">
+ *   <figure>
+ *     <img src="screenshots/button-1.png" />
+ *     <figcaption>Text button</figcaption>
+ *   </figure>
+ *   <figure>
+ *     <img src="screenshots/button-2.png" />
+ *     <figcaption>Outlined button</figcaption>
+ *   </figure>
+ *   <figure>
+ *     <img src="screenshots/button-3.png" />
+ *     <figcaption>Contained button</figcaption>
+ *   </figure>
+ * </div>
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Button } from '@draftbit/ui';
+ *
+ * const MyComponent = () => (
+ *   <Button icon="add-a-photo" type="solid" onPress={() => console.log('Pressed')}>
+ *     Press me
+ *   </Button>
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ */
+
+type Props = {
+  disabled?: boolean;
+  type?: "solid" | "outline" | "text";
+  loading?: boolean;
+  icon?: string;
+  labelColor?: string;
+  color?: string;
+  children?: React.ReactNode;
+  onPress: () => void;
+  elevation?: number;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+} & TouchableHighlightProps &
+  IconSlot;
+
+const Button: React.FC<React.PropsWithChildren<Props>> = ({
+  Icon,
+  icon,
+  disabled = false,
+  type = "solid",
+  loading = false,
+  labelColor,
+  color: colorOverride,
+  children,
+  onPress,
+  elevation = 0,
+  style,
+  theme: { colors, disabledOpacity, roundness, typography },
+  ...rest
+}) => {
+  let backgroundColor, borderColor, textColor, borderWidth;
+  const buttonColor = colorOverride || colors.primary;
+
+  if (type === "solid") {
+    backgroundColor = buttonColor;
+
+    if (disabled) {
+      textColor = color(colors.surface).alpha(disabledOpacity).rgb().string();
+    } else {
+      textColor = labelColor || colors.surface;
+    }
+  } else {
+    backgroundColor = "transparent";
+
+    if (disabled) {
+      textColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
+    } else {
+      textColor = labelColor || buttonColor;
+    }
+  }
+
+  if (type === "outline") {
+    if (disabled) {
+      borderColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
+    } else {
+      borderColor = buttonColor;
+    }
+    borderWidth = StyleSheet.hairlineWidth;
+  } else {
+    borderColor = "transparent";
+    borderWidth = 0;
+  }
+
+  const buttonStyle = {
+    backgroundColor,
+    borderColor,
+    borderWidth,
+    borderRadius: roundness,
+  };
+
+  const textStyle: StyleProp<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 (
+    <Elevation style={{ elevation, alignSelf: "stretch", ...margins }}>
+      <Touchable
+        {...rest}
+        onPress={onPress}
+        accessibilityState={{ disabled }}
+        accessibilityRole="button"
+        disabled={disabled || loading}
+        style={[styles.button, buttonStyle, innerStyles]}
+      >
+        <View style={styles.content}>
+          {icon && loading !== true ? (
+            <View style={iconStyle}>
+              <Icon
+                name={icon}
+                size={Config.buttonIconSize}
+                color={textColor}
+              />
+            </View>
+          ) : null}
+          {loading ? (
+            <ActivityIndicator
+              size="small"
+              color={textColor}
+              style={iconStyle}
+            />
+          ) : null}
+          <Text numberOfLines={1} style={[textStyle, typography.button]}>
+            {children}
+          </Text>
+        </View>
+      </Touchable>
+    </Elevation>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    minWidth: 64,
+    borderStyle: "solid",
+  },
+  content: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  icon: {
+    width: Config.buttonIconSize,
+  },
+});
+
+export default withTheme(Button);

package/src/components/DeprecatedCardWrapper.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { withTheme } from "../theming";
-import { Pressable } from "react-native";
+import Touchable from "./Touchable";
 const getWidth = (numColumns) => {
     switch (numColumns) {
         case 1:
@@ -13,6 +13,6 @@ const getWidth = (numColumns) => {
 };
 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));
+    return (React.createElement(Touchable, { disabled: !onPress, onPress: onPress, style: [style, { width }], ...rest }, children));
 };
 export default withTheme(Card);

package/src/components/DeprecatedCardWrapper.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { withTheme } from "../theming";
-import { StyleProp, ViewStyle, Pressable } from "react-native";
+import Touchable from "./Touchable";
+import { StyleProp, ViewStyle } from "react-native";
 import theme from "../styles/DefaultTheme";
 
 type Props = {
@@ -31,14 +32,14 @@ const Card: React.FC<React.PropsWithChildren<Props>> = ({
 }) => {
   const width = getWidth(numColumns);
   return (
-    <Pressable
+    <Touchable
       disabled={!onPress}
       onPress={onPress}
       style={[style, { width }]}
       {...rest}
     >
       {children}
-    </Pressable>
+    </Touchable>
   );
 };
 

package/src/components/DeprecatedFAB.js

@@ -1,8 +1,9 @@
 import * as React from "react";
-import { ActivityIndicator, View, StyleSheet, Pressable, } from "react-native";
+import { ActivityIndicator, View, StyleSheet, } from "react-native";
 import color from "color";
 import Config from "./Config";
 import Text from "./Text";
+import Touchable from "./Touchable";
 import Elevation from "./Elevation";
 import { withTheme } from "../theming";
 const FAB = ({ Icon, icon, disabled = false, type = "solid", loading = false, color: colorOverride, label, onPress, elevation = 0, style, theme: { colors, disabledOpacity, roundness, typography }, ...rest }) => {
@@ -82,7 +83,7 @@ const FAB = ({ Icon, icon, disabled = false, type = "solid", loading = false, co
         });
     }
     return (React.createElement(Elevation, { style: [{ elevation }, style] },
-        React.createElement(Pressable, { ...rest, onPress: onPress, accessibilityState: { disabled }, accessibilityRole: "button", disabled: disabled || loading, style: buttonStyles },
+        React.createElement(Touchable, { ...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,

package/src/components/DeprecatedFAB.tsx

@@ -3,15 +3,15 @@ import {
   ActivityIndicator,
   View,
   StyleSheet,
+  TouchableHighlightProps,
   StyleProp,
   ViewStyle,
   TextStyle,
-  Pressable,
-  PressableProps,
 } from "react-native";
 import color from "color";
 import Config from "./Config";
 import Text from "./Text";
+import Touchable from "./Touchable";
 import Elevation from "./Elevation";
 import { withTheme } from "../theming";
 
@@ -65,7 +65,7 @@ type Props = {
   elevation?: number;
   theme: Theme;
   style?: StyleProp<ViewStyle>;
-} & PressableProps &
+} & TouchableHighlightProps &
   IconSlot;
 
 const FAB: React.FC<React.PropsWithChildren<Props>> = ({
@@ -169,7 +169,7 @@ const FAB: React.FC<React.PropsWithChildren<Props>> = ({
 
   return (
     <Elevation style={[{ elevation }, style]}>
-      <Pressable
+      <Touchable
         {...rest}
         onPress={onPress}
         accessibilityState={{ disabled }}
@@ -200,7 +200,7 @@ const FAB: React.FC<React.PropsWithChildren<Props>> = ({
             </Text>
           ) : null}
         </View>
-      </Pressable>
+      </Touchable>
     </Elevation>
   );
 };

package/src/components/Picker/Picker.js

@@ -1,11 +1,12 @@
 import * as React from "react";
-import { View, StyleSheet, Text, Platform, Dimensions, Pressable, } from "react-native";
+import { View, StyleSheet, Text, Platform, Dimensions, } from "react-native";
 import { omit, pickBy, identity, isObject } from "lodash";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { Picker as NativePicker } from "@react-native-picker/picker";
 import { withTheme } from "../../theming";
 import Portal from "../Portal/Portal";
-import { Button } from "../Button";
+import Button from "../DeprecatedButton";
+import Touchable from "../Touchable";
 import { extractStyles, extractBorderAndMarginStyles, borderStyleNames, marginStyleNames, } from "../../utilities";
 function normalizeOptions(options) {
     if (options.length === 0) {
@@ -165,7 +166,7 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
     return (
     /* marginsContainer */
     React.createElement(View, { style: [styles.marginsContainer, marginStyles] },
-        React.createElement(Pressable, { disabled: disabled, onPress: togglePickerVisible, style: styles.touchableContainer },
+        React.createElement(Touchable, { disabled: disabled, onPress: togglePickerVisible, style: styles.touchableContainer },
             React.createElement(View, { pointerEvents: "none", style: [
                     styles.outsetContainer,
                     stylesWithoutBordersAndMargins,

package/src/components/Picker/Picker.tsx

@@ -7,7 +7,6 @@ import {
   ViewStyle,
   StyleProp,
   Dimensions,
-  Pressable,
 } from "react-native";
 import { omit, pickBy, identity, isObject } from "lodash";
 import { SafeAreaView } from "react-native-safe-area-context";
@@ -15,7 +14,8 @@ import { Picker as NativePicker } from "@react-native-picker/picker";
 
 import { withTheme } from "../../theming";
 import Portal from "../Portal/Portal";
-import { Button } from "../Button";
+import Button from "../DeprecatedButton";
+import Touchable from "../Touchable";
 import type { Theme } from "../../styles/DefaultTheme";
 import type { IconSlot } from "../../interfaces/Icon";
 import {
@@ -306,7 +306,7 @@ const Picker: React.FC<PickerProps> = ({
     /* marginsContainer */
     <View style={[styles.marginsContainer, marginStyles]}>
       {/* touchableContainer */}
-      <Pressable
+      <Touchable
         disabled={disabled}
         onPress={togglePickerVisible}
         style={styles.touchableContainer}
@@ -342,7 +342,7 @@ const Picker: React.FC<PickerProps> = ({
           </View>
         </View>
         {assistiveTextLabel}
-      </Pressable>
+      </Touchable>
 
       {/* iosPicker */}
       {isIos && pickerVisible ? (

package/src/components/Picker/PickerComponent.ios.js

@@ -5,7 +5,7 @@ import omit from "lodash.omit";
 import { Picker as NativePicker } from "@react-native-picker/picker";
 import { withTheme } from "../../theming";
 import Portal from "../Portal/Portal";
-import { Button } from "../Button";
+import Button from "../DeprecatedButton";
 import TextField from "../TextField";
 import Touchable from "../Touchable";
 import { extractStyles } from "../../utilities";

package/src/components/Picker/PickerComponent.ios.tsx

@@ -8,7 +8,7 @@ import { Picker as NativePicker } from "@react-native-picker/picker";
 import { withTheme } from "../../theming";
 
 import Portal from "../Portal/Portal";
-import { Button } from "../Button";
+import Button from "../DeprecatedButton";
 import TextField from "../TextField";
 import Touchable from "../Touchable";
 import { PickerComponentProps } from "./PickerTypes";

package/src/components/Touchable.js

@@ -1,17 +1,12 @@
-import React, { useCallback } from "react";
-import { Pressable, } from "react-native";
-export default function Touchable({ children, disabled, onPress, onLongPress, hitSlop, delayLongPress, activeOpacity, disabledOpacity, style, ...props }) {
-    const getOpacity = useCallback((pressed) => {
-        if (disabled) {
-            return disabledOpacity;
-        }
-        else {
-            if (pressed)
-                return activeOpacity;
-            else
-                return 1;
-        }
-    }, [activeOpacity, disabled, disabledOpacity]);
-    const _style = useCallback(({ pressed }) => [style, { opacity: getOpacity(pressed) }], [getOpacity, style]);
-    return (React.createElement(Pressable, { onPress: onPress, onLongPress: onLongPress, disabled: disabled, delayLongPress: delayLongPress ? delayLongPress : 500, hitSlop: hitSlop ? hitSlop : 8, style: _style, ...props }, children));
+import React from "react";
+import { Pressable } from "react-native";
+export default function Touchable({ children, disabled, onPress, style, ...props }) {
+    return (React.createElement(Pressable, { onPress: onPress, disabled: disabled, hitSlop: 8, style: ({ pressed }) => {
+            return [
+                {
+                    opacity: pressed || disabled ? 0.75 : 1,
+                },
+                style,
+            ];
+        }, ...props }, children));
 }

package/src/components/Touchable.tsx

@@ -1,64 +1,33 @@
-import React, { useCallback } from "react";
-import {
-  Pressable,
-  PressableProps,
-  PressableStateCallbackType,
-  StyleProp,
-  ViewStyle,
-} from "react-native";
+import React from "react";
+import { Pressable, ViewStyle, PressableProps } from "react-native";
 
 type Props = {
   disabled?: boolean;
   children: React.ReactNode;
   style?: ViewStyle;
   onPress?: () => void;
-  onLongPress?: () => void;
-  delayLongPress?: number;
-  hitSlop?: number;
-  pressRetentionOffset?: number;
-  activeOpacity?: number;
-  disabledOpacity?: number;
 } & PressableProps;
 
-export type StyleType = (
-  state: PressableStateCallbackType
-) => StyleProp<ViewStyle>;
-
 export default function Touchable({
   children,
   disabled,
   onPress,
-  onLongPress,
-  hitSlop,
-  delayLongPress,
-  activeOpacity,
-  disabledOpacity,
   style,
   ...props
 }: Props) {
-  const getOpacity = useCallback(
-    (pressed: boolean) => {
-      if (disabled) {
-        return disabledOpacity;
-      } else {
-        if (pressed) return activeOpacity;
-        else return 1;
-      }
-    },
-    [activeOpacity, disabled, disabledOpacity]
-  );
-  const _style = useCallback<StyleType>(
-    ({ pressed }) => [style as ViewStyle, { opacity: getOpacity(pressed) }],
-    [getOpacity, style]
-  );
   return (
     <Pressable
       onPress={onPress}
-      onLongPress={onLongPress}
       disabled={disabled}
-      delayLongPress={delayLongPress ? delayLongPress : 500}
-      hitSlop={hitSlop ? hitSlop : 8}
-      style={_style}
+      hitSlop={8}
+      style={({ pressed }) => {
+        return [
+          {
+            opacity: pressed || disabled ? 0.75 : 1,
+          },
+          style,
+        ];
+      }}
       {...props}
     >
       {children}

package/src/components/Touchable.web.js

@@ -0,0 +1,2 @@
+import { TouchableOpacity } from "react-native";
+export default TouchableOpacity;

package/src/components/Touchable.web.tsx

@@ -0,0 +1,3 @@
+import { TouchableOpacity } from "react-native";
+
+export default TouchableOpacity;

package/src/index.js

@@ -2,51 +2,132 @@ export { injectIcon } from "./interfaces/Icon";
 export { withTheme, ThemeProvider } from "./theming";
 export { default as Provider } from "./Provider";
 export { default as DefaultTheme } from "./styles/DefaultTheme";
-export { Link } from "./components/Text";
+/** Replaced By NativeBase
+ * export { default as Avatar } from "./components/CircleImage";
+ * export { default as Container } from "./components/Container";
+ * export { default as FAB } from "./components/FAB";
+ * export {
+  Center,
+  Circle,
+  Square,
+  Row,
+  Stack,
+  Spacer,
+} from "./components/Layout";
+ */
+// BASIC
+export { default as ScreenContainer } from "./components/ScreenContainer";
 export { default as Banner } from "./components/Banner";
+// BUTTONS
 export { Button, ButtonSolid, ButtonOutline } from "./components/Button";
-export { default as Avatar } from "./components/CircleImage";
-export { default as AvatarEdit } from "./components/AvatarEdit";
-export { default as Card } from "./components/Card";
-export { default as Carousel } from "./components/Carousel";
-export { Checkbox, CheckboxGroup, CheckboxRow } from "./components/Checkbox";
-export { default as CircleImage } from "./components/CircleImage";
-export { default as Container } from "./components/Container";
-export { default as Divider } from "./components/Divider";
-export { default as FAB } from "./components/FAB";
-export { default as FieldSearchBarFull } from "./components/FieldSearchBarFull";
+export { Link } from "./components/Text";
 export { default as IconButton } from "./components/IconButton";
-export { default as Image } from "./components/Image";
-export { default as SVG } from "./components/SVG";
+export { default as Touchable } from "./components/Touchable";
+export { default as ToggleButton } from "./components/ToggleButton";
+// INPUTS
+export { default as DatePicker } from "./components/DatePicker/DatePicker";
 export { default as NumberInput } from "./components/NumberInput";
-export { default as ScreenContainer } from "./components/ScreenContainer";
+export { default as TextField } from "./components/TextField";
+export { default as FieldSearchBarFull } from "./components/FieldSearchBarFull";
+export { default as Picker } from "./components/Picker/Picker";
+// CONTROLS
+export { Checkbox, CheckboxGroup, CheckboxRow } from "./components/Checkbox";
+export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup, } from "./components/RadioButton/index";
+export { default as Slider } from "./components/Slider";
+export { default as Stepper } from "./components/Stepper";
 export { default as StarRating } from "./components/StarRating";
-export { default as Surface } from "./components/Surface";
 export { default as Switch, SwitchRow } from "./components/Switch";
-export { default as TextField } from "./components/TextField";
-export { default as ToggleButton } from "./components/ToggleButton";
-export { default as Touchable } from "./components/Touchable";
+// MEDIA
+export { default as SVG } from "./components/SVG";
+export { default as Image } from "./components/Image";
+// export { default as Avatar } from "./components/CircleImage"; Replaced by NativeBase
+export { default as AvatarEdit } from "./components/AvatarEdit";
+export { default as CircleImage } from "./components/CircleImage";
+// SWIPER
+export { Swiper, SwiperItem } from "./components/Swiper";
+// CONTAINERS
 export { AccordionGroup, AccordionItem } from "./components/Accordion";
+export { default as Surface } from "./components/Surface";
+// ACTIONSHEET
 export { ActionSheet, ActionSheetItem, ActionSheetCancel, } from "./components/ActionSheet";
-export { Swiper, SwiperItem } from "./components/Swiper";
-export { Center, Circle, Square, Row, Stack, Spacer, } from "./components/Layout";
-export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup, } from "./components/RadioButton/index";
-/* Deprecated: Fix or Delete!  */
-export { default as CardBlock } from "./components/CardBlock";
-export { default as CardContainer } from "./components/CardContainer";
-export { default as CardContainerRating } from "./components/CardContainerRating";
-export { default as CardInline } from "./components/CardInline";
-export { default as DatePicker } from "./components/DatePicker/DatePicker";
+// OTHER
+export { default as Carousel } from "./components/Carousel";
+export { default as Divider } from "./components/Divider";
 export { default as HeaderLarge } from "./components/HeaderLarge";
 export { default as HeaderMedium } from "./components/HeaderMedium";
 export { default as HeaderOverline } from "./components/HeaderOverline";
-export { default as Picker } from "./components/Picker/Picker";
 export { default as ProgressBar } from "./components/ProgressBar";
 export { default as ProgressCircle } from "./components/ProgressCircle";
 export { default as RowBodyIcon } from "./components/RowBodyIcon";
 export { default as RowHeadlineImageCaption } from "./components/RowHeadlineImageCaption";
 export { default as RowHeadlineImageIcon } from "./components/RowHeadlineImageIcon";
-export { default as Slider } from "./components/Slider";
-export { default as Stepper } from "./components/Stepper";
+export { default as Card } from "./components/Card";
+export { default as CardBlock } from "./components/CardBlock";
+export { default as CardContainer } from "./components/CardContainer";
+export { default as CardContainerRating } from "./components/CardContainerRating";
+export { default as CardInline } from "./components/CardInline";
 export { useAuthState } from "./components/useAuthState";
-// a comment to fix sourcemap comment issue
+/**
+ * NativeBase Components Jan 2023
+ *
+ * ALERT
+ * - AlertDialog
+ * - AlertDialog.Header
+ * - AlertDialog.Body
+ * - AlertDialog.Footer
+ * - AlertDialog.Content
+ * - AlertDialog.CloseButton
+ *
+ * FORMS
+ * - Button -- COMMENTED OUT
+ * - Button.Group -- COMMENTED OUT
+ * - Fab
+ *
+ * DATA DISPLAY
+ * - Badge
+ * - Divider
+ *
+ * FEEDBACK
+ * - Alert
+ * - Alert.Icon
+ * - Progress
+ *
+ * LAYOUT
+ * - AspectRatio
+ * - Box
+ * - Center
+ * - Square
+ * - Circle
+ * - Column
+ * - Container
+ * - Flex
+ * - Spacer
+ * - Row
+ * - Stack
+ * - ZStack
+ *
+ * MEDIA
+ * - Avatar
+ * - Avatar.Badge
+ * - Avatar.Group
+ *
+ * MENU
+ * - Menu
+ * - Menu.Item
+ * - Menu.Group
+ * - Menu.OptionGroup
+ * - Menu.ItemOption
+ * - Menu.Trigger
+ *
+ * MODAL
+ * - Modal
+ * - Modal.Content
+ * - Modal.Header
+ * - Modal.Footer
+ * - Modal.Body
+ * - Modal.CloseButton
+ *
+ * OTHER
+ * - Tooltip
+ *
+ * */