@draftbit/core 47.1.1-ee131b.2 → 47.2.1-95dcf0.2

package/src/components/Picker/Picker.tsx

@@ -7,6 +7,7 @@ import {
   ViewStyle,
   StyleProp,
   Dimensions,
+  Keyboard,
 } from "react-native";
 import { omit, pickBy, identity, isObject } from "lodash";
 import { SafeAreaView } from "react-native-safe-area-context";
@@ -48,6 +49,7 @@ export type PickerProps = {
   placeholderTextColor?: string;
   rightIconName?: string;
   type?: "solid" | "underline";
+  autoDismissKeyboard?: boolean;
   theme: Theme;
   Icon: IconSlot["Icon"];
 };
@@ -84,10 +86,14 @@ function normalizeOptions(options: PickerProps["options"]): PickerOption[] {
 
 const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
 const isIos = Platform.OS === "ios";
+const isWeb = Platform.OS === "web";
+
 const unstyledColor = "rgba(165, 173, 183, 1)";
 const disabledColor = "rgb(240, 240, 240)";
 const errorColor = "rgba(255, 69, 100, 1)";
 
+//Empty string for 'value' is treated as a non-value
+//reason: Draftbit uses empty string as initial value for string state*/
 const Picker: React.FC<PickerProps> = ({
   error,
   options = [],
@@ -98,7 +104,6 @@ const Picker: React.FC<PickerProps> = ({
   placeholder,
   value,
   disabled = false,
-  theme,
   assistiveText,
   label,
   iconColor = unstyledColor,
@@ -108,6 +113,7 @@ const Picker: React.FC<PickerProps> = ({
   placeholderTextColor = unstyledColor,
   rightIconName,
   type = "solid",
+  autoDismissKeyboard = true,
 }) => {
   const androidPickerRef = React.useRef<any | undefined>(undefined);
 
@@ -122,13 +128,15 @@ const Picker: React.FC<PickerProps> = ({
   };
 
   React.useEffect(() => {
-    if (value != null) {
+    if (value != null && value !== "") {
       setInternalValue(value);
+    } else if (value === "") {
+      setInternalValue(undefined);
     }
   }, [value]);
 
   React.useEffect(() => {
-    if (defaultValue != null) {
+    if (defaultValue != null && defaultValue !== "") {
       setInternalValue(defaultValue);
     }
   }, [defaultValue]);
@@ -139,13 +147,37 @@ const Picker: React.FC<PickerProps> = ({
     }
   }, [pickerVisible, androidPickerRef]);
 
-  const normalizedOptions = normalizeOptions(options);
+  React.useEffect(() => {
+    if (pickerVisible && autoDismissKeyboard) {
+      Keyboard.dismiss();
+    }
+  }, [pickerVisible, autoDismissKeyboard]);
 
-  const pickerOptions = placeholder
-    ? [{ value: placeholder, label: placeholder }, ...normalizedOptions]
-    : normalizedOptions;
+  const normalizedOptions = React.useMemo(
+    () => normalizeOptions(options),
+    [options]
+  );
 
-  const { colors } = theme;
+  //Underlying Picker component defaults selection to first element when value is not provided (or undefined)
+  //Placholder must be the 1st option in order to allow selection of the 'actual' 1st option
+  const pickerOptions = React.useMemo(
+    () =>
+      placeholder
+        ? [{ label: placeholder, value: placeholder }, ...normalizedOptions]
+        : normalizedOptions,
+    [placeholder, normalizedOptions]
+  );
+
+  //When no placeholder is provided then first item should be marked selected to reflect underlying Picker internal state
+  if (
+    !placeholder &&
+    pickerOptions.length &&
+    !internalValue &&
+    internalValue !== pickerOptions[0].value //Prevent infinite state changes incase first value is falsy
+  ) {
+    onValueChange?.(pickerOptions[0].value, 0);
+    setInternalValue(pickerOptions[0].value);
+  }
 
   const { viewStyles, textStyles } = extractStyles(style);
 
@@ -296,10 +328,13 @@ const Picker: React.FC<PickerProps> = ({
   };
 
   const handleValueChange = (newValue: string, itemIndex: number) => {
-    if (!placeholder || itemIndex > 0) {
+    if (newValue !== "" && newValue !== placeholder) {
       onValueChange?.(newValue, itemIndex);
+      setInternalValue(newValue);
+    } else if (newValue === placeholder) {
+      onValueChange?.("", 0);
+      setInternalValue(undefined);
     }
-    setInternalValue(newValue);
   };
 
   return (
@@ -347,15 +382,8 @@ const Picker: React.FC<PickerProps> = ({
       {/* iosPicker */}
       {isIos && pickerVisible ? (
         <Portal>
-          <View
-            style={[
-              styles.iosPicker,
-              {
-                backgroundColor: colors.divider,
-              },
-            ]}
-          >
-            <SafeAreaView style={styles.iosSafeArea}>
+          <SafeAreaView style={styles.iosPicker}>
+            <View style={styles.iosPickerContent}>
               <Button
                 Icon={Icon}
                 type="text"
@@ -378,15 +406,16 @@ const Picker: React.FC<PickerProps> = ({
                   />
                 ))}
               </NativePicker>
-            </SafeAreaView>
-          </View>
+            </View>
+          </SafeAreaView>
         </Portal>
       ) : null}
 
       {/* nonIosPicker */}
-      {!isIos && pickerVisible ? (
+      {/* Web version is collapsed by default, always show to allow direct expand */}
+      {!isIos && (pickerVisible || isWeb) ? (
         <NativePicker
-          enabled={pickerVisible}
+          enabled={!disabled}
           selectedValue={internalValue}
           onValueChange={handleValueChange}
           style={styles.nonIosPicker}
@@ -451,9 +480,9 @@ const styles = StyleSheet.create({
     width: "100%",
     maxWidth: deviceWidth,
     maxHeight: deviceHeight,
-  },
-  iosSafeArea: {
     backgroundColor: "white",
+  },
+  iosPickerContent: {
     flexDirection: "column",
     width: "100%",
     maxWidth: deviceWidth,

package/src/components/ScreenContainer.js

@@ -3,7 +3,8 @@ import { StyleSheet, ScrollView, View, } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { withTheme } from "../theming";
 function ScreenContainer({ scrollable = false, hasSafeArea = false, hasBottomSafeArea = false, hasTopSafeArea = false, theme, style, children, ...rest }) {
-    const backgroundColor = theme.colors.background;
+    var _a;
+    const backgroundColor = ((_a = StyleSheet.flatten(style)) === null || _a === void 0 ? void 0 : _a.backgroundColor) || theme.colors.background;
     const edges = ["left", "right"];
     if (hasSafeArea || hasTopSafeArea) {
         edges.push("top");

package/src/components/ScreenContainer.tsx

@@ -31,7 +31,8 @@ function ScreenContainer({
   children,
   ...rest
 }: ScreenContainerProps) {
-  const backgroundColor = theme.colors.background;
+  const backgroundColor =
+    StyleSheet.flatten(style)?.backgroundColor || theme.colors.background;
 
   const edges: Edge[] = ["left", "right"];
   if (hasSafeArea || hasTopSafeArea) {

package/src/components/Shadow.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+import { Shadow as ShadowComponent } from "react-native-shadow-2";
+import { extractBorderAndMarginStyles, extractSizeStyles } from "../utilities";
+const Shadow = ({ offsetX = 0, offsetY = 0, showShadowSideStart = true, showShadowSideEnd = true, showShadowSideTop = true, showShadowSideBottom = true, showShadowCornerTopStart = true, showShadowCornerTopEnd = true, showShadowCornerBottomStart = true, showShadowCornerBottomEnd = true, paintInside = true, style, ...rest }) => {
+    const { borderStyles } = extractBorderAndMarginStyles(style);
+    const shadowStyles = StyleSheet.flatten([
+        borderStyles,
+        extractSizeStyles(style),
+    ]);
+    const containerStyle = StyleSheet.flatten(style);
+    Object.keys(shadowStyles).forEach((key) => delete containerStyle[key]);
+    return (React.createElement(ShadowComponent, { offset: [offsetX, offsetY], sides: {
+            start: showShadowSideStart,
+            end: showShadowSideEnd,
+            top: showShadowSideTop,
+            bottom: showShadowSideBottom,
+        }, corners: {
+            topStart: showShadowCornerTopStart,
+            topEnd: showShadowCornerTopEnd,
+            bottomStart: showShadowCornerBottomStart,
+            bottomEnd: showShadowCornerBottomEnd,
+        }, style: shadowStyles, containerStyle: containerStyle, paintInside: paintInside, ...rest }));
+};
+export default Shadow;

package/src/components/Shadow.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { StyleProp, ViewStyle, StyleSheet } from "react-native";
+import { Shadow as ShadowComponent } from "react-native-shadow-2";
+import { extractBorderAndMarginStyles, extractSizeStyles } from "../utilities";
+
+interface ShadowProps {
+  disabled?: boolean;
+  startColor?: string;
+  endColor?: string;
+  distance?: number;
+  paintInside?: boolean;
+  stretch?: boolean;
+  offsetX?: number;
+  offsetY?: number;
+  showShadowSideStart?: boolean;
+  showShadowSideEnd?: boolean;
+  showShadowSideTop?: boolean;
+  showShadowSideBottom?: boolean;
+  showShadowCornerTopStart?: boolean;
+  showShadowCornerTopEnd?: boolean;
+  showShadowCornerBottomStart?: boolean;
+  showShadowCornerBottomEnd?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+const Shadow: React.FC<React.PropsWithChildren<ShadowProps>> = ({
+  offsetX = 0,
+  offsetY = 0,
+  showShadowSideStart = true,
+  showShadowSideEnd = true,
+  showShadowSideTop = true,
+  showShadowSideBottom = true,
+  showShadowCornerTopStart = true,
+  showShadowCornerTopEnd = true,
+  showShadowCornerBottomStart = true,
+  showShadowCornerBottomEnd = true,
+  paintInside = true,
+  style,
+  ...rest
+}) => {
+  const { borderStyles } = extractBorderAndMarginStyles(style);
+
+  const shadowStyles = StyleSheet.flatten([
+    borderStyles,
+    extractSizeStyles(style),
+  ]);
+
+  const containerStyle = StyleSheet.flatten(style) as StyleProp<any>;
+  Object.keys(shadowStyles).forEach((key) => delete containerStyle[key]);
+
+  return (
+    <ShadowComponent
+      offset={[offsetX, offsetY]}
+      sides={{
+        start: showShadowSideStart,
+        end: showShadowSideEnd,
+        top: showShadowSideTop,
+        bottom: showShadowSideBottom,
+      }}
+      corners={{
+        topStart: showShadowCornerTopStart,
+        topEnd: showShadowCornerTopEnd,
+        bottomStart: showShadowCornerBottomStart,
+        bottomEnd: showShadowCornerBottomEnd,
+      }}
+      style={shadowStyles}
+      containerStyle={containerStyle}
+      paintInside={paintInside}
+      {...rest}
+    />
+  );
+};
+
+export default Shadow;

package/src/components/Surface.js

@@ -7,7 +7,7 @@ import { withTheme } from "../theming";
 const Surface = ({ elevation: propElevation, style, theme, children, ...rest }) => {
     const { elevation: styleElevation = 3, backgroundColor, ...restStyle } = (StyleSheet.flatten(style) || {});
     const { dark: isDarkTheme, mode, colors } = theme;
-    const elevation = propElevation || styleElevation;
+    const elevation = propElevation !== null && propElevation !== void 0 ? propElevation : styleElevation;
     const evalationStyles = elevation ? shadow(elevation) : {};
     const getBackgroundColor = () => {
         if (backgroundColor) {

package/src/components/Surface.tsx

@@ -34,7 +34,7 @@ const Surface: React.FC<React.PropsWithChildren<Props>> = ({
 
   const { dark: isDarkTheme, mode, colors } = theme;
 
-  const elevation = propElevation || styleElevation;
+  const elevation = propElevation ?? styleElevation;
 
   const evalationStyles = elevation ? shadow(elevation) : {};
 

package/src/components/SwipeableView/SwipeableView.js

@@ -0,0 +1,117 @@
+import React from "react";
+import { View, StyleSheet, Text, } from "react-native";
+import Pressable from "../Pressable";
+import { extractBorderAndMarginStyles, extractEffectStyles, extractFlexItemStyles, extractPositionStyles, extractSizeStyles, extractStyles, } from "../../utilities";
+import { SwipeRow } from "react-native-swipe-list-view";
+import { withTheme } from "../../theming";
+const SwipeableView = ({ theme, style, children, Icon, closeOnPress, leftOpenValue, rightOpenValue, leftActivationValue, rightActivationValue, swipeActivationPercentage = 80, stopLeftSwipe, stopRightSwipe, friction = 20, ...rest }) => {
+    const instanceOfSwipeableViewButtonProps = (object) => {
+        return "title" in object && "side" in object && "onPress" in object;
+    };
+    const instanceOfSwipeableViewSwipeHandlerProps = (object) => {
+        return "title" in object && "side" in object && "onSwipe" in object;
+    };
+    const { viewStyles, textStyles } = extractStyles(style);
+    const { borderStyles, marginStyles } = extractBorderAndMarginStyles(viewStyles);
+    const parentContainerStyles = StyleSheet.flatten([
+        borderStyles,
+        marginStyles,
+        extractFlexItemStyles(viewStyles),
+        extractPositionStyles(viewStyles),
+        extractEffectStyles(viewStyles),
+        extractSizeStyles(viewStyles),
+    ]);
+    //Remove styles already consumed from viewStyles
+    Object.keys(parentContainerStyles).forEach((key) => delete viewStyles[key]);
+    const surfaceContainerStyles = viewStyles;
+    const [componentWidth, setComponentWidth] = React.useState(null);
+    const leftButtons = React.useMemo(() => React.Children.toArray(children).filter((child) => React.isValidElement(child) &&
+        instanceOfSwipeableViewButtonProps(child.props) &&
+        child.props.side === "left"), [children]);
+    const rightButtons = React.useMemo(() => React.Children.toArray(children).filter((child) => React.isValidElement(child) &&
+        instanceOfSwipeableViewButtonProps(child.props) &&
+        child.props.side === "right"), [children]);
+    const leftSwipeHandlers = React.useMemo(() => React.Children.toArray(children).filter((child) => React.isValidElement(child) &&
+        instanceOfSwipeableViewSwipeHandlerProps(child.props) &&
+        child.props.side === "left"), [children]);
+    const rightSwipeHandlers = React.useMemo(() => React.Children.toArray(children).filter((child) => React.isValidElement(child) &&
+        instanceOfSwipeableViewSwipeHandlerProps(child.props) &&
+        child.props.side === "right"), [children]);
+    const remainingChildren = React.useMemo(() => React.Children.toArray(children).filter((child) => React.isValidElement(child) &&
+        !instanceOfSwipeableViewSwipeHandlerProps(child.props) &&
+        !instanceOfSwipeableViewButtonProps(child.props)), [children]);
+    if (leftButtons.length > 2 || rightButtons.length > 2) {
+        throw Error("Cannot have more than 2 buttons per side");
+    }
+    if (leftSwipeHandlers.length > 1 || rightSwipeHandlers.length > 1) {
+        throw Error("Cannot have more than 1 swiper handler per side");
+    }
+    if ((leftButtons.length && leftSwipeHandlers.length) ||
+        (rightButtons.length && rightSwipeHandlers.length)) {
+        throw Error("Cannot combine swiper handler and buttons on the same side");
+    }
+    //Renders a single button/item. Used for both buttons and swipe handler
+    const renderBehindItem = (props, index) => (React.createElement(Pressable, { key: index.toString(), onPress: props.onPress, style: [
+            styles.buttonContainer,
+            { backgroundColor: props.backgroundColor || theme.colors.primary },
+        ] },
+        props.icon && (React.createElement(Icon, { name: props.icon, size: props.iconSize || 25, color: props.color || theme.colors.surface })),
+        React.createElement(Text, { style: [textStyles, { color: props.color || theme.colors.surface }] }, props.title)));
+    const isLeftSwipeHandler = !!leftSwipeHandlers.length;
+    const isRightSwipeHandler = !!rightSwipeHandlers.length;
+    const defaultLeftOpenValue = componentWidth ? componentWidth / 2 : 0;
+    const defaultRightOpenValue = componentWidth ? -componentWidth / 2 : 0;
+    return (React.createElement(View, { onLayout: (event) => {
+            setComponentWidth(event.nativeEvent.layout.width);
+        }, style: [styles.parentContainer, parentContainerStyles] },
+        React.createElement(SwipeRow, { leftOpenValue: isLeftSwipeHandler ? 0 : leftOpenValue || defaultLeftOpenValue //If in swiping mode, don't keep open
+            , rightOpenValue: isRightSwipeHandler ? 0 : rightOpenValue || defaultRightOpenValue, leftActivationValue: leftActivationValue || isLeftSwipeHandler
+                ? defaultLeftOpenValue * (swipeActivationPercentage / 100) //When swipe passes activation percentage then it should be considered activated (call onSwipe)
+                : defaultLeftOpenValue, rightActivationValue: rightActivationValue || isRightSwipeHandler
+                ? defaultRightOpenValue * (swipeActivationPercentage / 100)
+                : defaultRightOpenValue, stopLeftSwipe: stopLeftSwipe || defaultLeftOpenValue, stopRightSwipe: stopRightSwipe || defaultRightOpenValue, onLeftAction: isLeftSwipeHandler
+                ? () => { var _a, _b; return (_b = (_a = leftSwipeHandlers[0].props).onSwipe) === null || _b === void 0 ? void 0 : _b.call(_a); }
+                : undefined, onRightAction: isRightSwipeHandler
+                ? () => { var _a, _b; return (_b = (_a = rightSwipeHandlers[0].props).onSwipe) === null || _b === void 0 ? void 0 : _b.call(_a); }
+                : undefined, closeOnRowPress: closeOnPress, friction: friction, ...rest },
+            React.createElement(View, { style: styles.behindContainer },
+                React.createElement(View, { style: styles.behindContainerItem }, (isLeftSwipeHandler ? leftSwipeHandlers : leftButtons).map((item, index) => renderBehindItem(item.props, index))),
+                React.createElement(View, { style: styles.behindContainerItem }, (isRightSwipeHandler ? rightSwipeHandlers : rightButtons).map((item, index) => renderBehindItem(item.props, index)))),
+            React.createElement(View, { style: [
+                    styles.surfaceContainer,
+                    {
+                        backgroundColor: theme.colors.background,
+                    },
+                    surfaceContainerStyles,
+                ] }, remainingChildren))));
+};
+const styles = StyleSheet.create({
+    parentContainer: {
+        overflow: "hidden",
+        minHeight: 50,
+    },
+    behindContainer: {
+        flex: 1,
+        width: "100%",
+        height: "100%",
+        flexDirection: "row",
+    },
+    behindContainerItem: {
+        flex: 1,
+        flexDirection: "row",
+    },
+    buttonContainer: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    surfaceContainer: {
+        flexDirection: "row",
+        width: "100%",
+        height: "100%",
+        padding: 10,
+        alignItems: "center",
+        overflow: "hidden",
+    },
+});
+export default withTheme(SwipeableView);