@draftbit/core 48.5.5-bc0b6e.2 → 48.5.6

package/src/components/DatePicker/DatePickerComponent.tsx

@@ -1,43 +1,43 @@
-import React from "react";
-import { Platform } from "react-native";
-import DateTimePicker from "@react-native-community/datetimepicker";
-import DateTimePickerModal from "react-native-modal-datetime-picker";
-import { DatePickerComponentProps as Props } from "./DatePickerComponentType";
-
-const DatePickerComponent: React.FC<React.PropsWithChildren<Props>> = ({
-  value,
-  onChange,
-  mode,
-  minimumDate,
-  maximumDate,
-  toggleVisibility,
-}) => {
-  return Platform.OS === "ios" || Platform.OS === "android" ? (
-    <DateTimePickerModal
-      date={value}
-      mode={mode}
-      isVisible={true}
-      display={Platform.OS === "ios" ? "spinner" : "default"}
-      minimumDate={minimumDate}
-      maximumDate={maximumDate}
-      onCancel={() => {
-        console.log("Picker cancelled before selecting anything.");
-        toggleVisibility();
-      }}
-      onConfirm={(data) => {
-        onChange(null, data);
-      }}
-    />
-  ) : (
-    <DateTimePicker
-      value={value}
-      mode={mode}
-      onChange={onChange}
-      display={"default"}
-      minimumDate={minimumDate}
-      maximumDate={maximumDate}
-    />
-  );
-};
-
-export default DatePickerComponent;
+import React from "react";
+import { Platform } from "react-native";
+import DateTimePicker from "@react-native-community/datetimepicker";
+import DateTimePickerModal from "react-native-modal-datetime-picker";
+import { DatePickerComponentProps as Props } from "./DatePickerComponentType";
+
+const DatePickerComponent: React.FC<React.PropsWithChildren<Props>> = ({
+  value,
+  onChange,
+  mode,
+  minimumDate,
+  maximumDate,
+  toggleVisibility,
+}) => {
+  return Platform.OS === "ios" || Platform.OS === "android" ? (
+    <DateTimePickerModal
+      date={value}
+      mode={mode}
+      isVisible={true}
+      display={Platform.OS === "ios" ? "spinner" : "default"}
+      minimumDate={minimumDate}
+      maximumDate={maximumDate}
+      onCancel={() => {
+        console.log("Picker cancelled before selecting anything.");
+        toggleVisibility();
+      }}
+      onConfirm={(data) => {
+        onChange(null, data);
+      }}
+    />
+  ) : (
+    <DateTimePicker
+      value={value}
+      mode={mode}
+      onChange={onChange}
+      display={"default"}
+      minimumDate={minimumDate}
+      maximumDate={maximumDate}
+    />
+  );
+};
+
+export default DatePickerComponent;

package/src/components/DatePicker/DatePickerComponent.web.tsx

@@ -1,63 +1,63 @@
-import React from "react";
-import DateFnsUtils from "@date-io/date-fns";
-import {
-  MuiPickersUtilsProvider,
-  DatePicker,
-  TimePicker,
-  DateTimePicker,
-} from "@material-ui/pickers";
-import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
-import { DatePickerComponentProps as Props } from "./DatePickerComponentType";
-import { withTheme } from "../../theming";
-import Theme from "../../styles/DefaultTheme";
-
-const DatePickerComponent: React.FC<Props & { theme: typeof Theme }> = ({
-  value,
-  onChange,
-  mode,
-  toggleVisibility,
-  isVisible,
-  minimumDate,
-  maximumDate,
-  theme,
-}) => {
-  const internalTheme = createMuiTheme({
-    palette: {
-      primary: {
-        main: theme.colors.primary || Theme.colors.primary,
-      },
-      secondary: {
-        main: theme.colors.secondary || Theme.colors.secondary,
-      },
-    },
-  });
-
-  const Picker =
-    mode === "date"
-      ? DatePicker
-      : mode === "time"
-      ? TimePicker
-      : DateTimePicker;
-
-  return (
-    <MuiPickersUtilsProvider utils={DateFnsUtils}>
-      <ThemeProvider theme={internalTheme}>
-        <Picker
-          value={value}
-          open={isVisible}
-          onChange={(d) => {
-            toggleVisibility();
-            onChange(null, d);
-          }}
-          onClose={() => toggleVisibility()}
-          variant="dialog"
-          TextFieldComponent={() => null}
-          minDate={minimumDate}
-          maxDate={maximumDate}
-        />
-      </ThemeProvider>
-    </MuiPickersUtilsProvider>
-  );
-};
-
-export default withTheme(DatePickerComponent);
+import React from "react";
+import DateFnsUtils from "@date-io/date-fns";
+import {
+  MuiPickersUtilsProvider,
+  DatePicker,
+  TimePicker,
+  DateTimePicker,
+} from "@material-ui/pickers";
+import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
+import { DatePickerComponentProps as Props } from "./DatePickerComponentType";
+import { withTheme } from "../../theming";
+import Theme from "../../styles/DefaultTheme";
+
+const DatePickerComponent: React.FC<Props & { theme: typeof Theme }> = ({
+  value,
+  onChange,
+  mode,
+  toggleVisibility,
+  isVisible,
+  minimumDate,
+  maximumDate,
+  theme,
+}) => {
+  const internalTheme = createMuiTheme({
+    palette: {
+      primary: {
+        main: theme.colors.primary || Theme.colors.primary,
+      },
+      secondary: {
+        main: theme.colors.secondary || Theme.colors.secondary,
+      },
+    },
+  });
+
+  const Picker =
+    mode === "date"
+      ? DatePicker
+      : mode === "time"
+      ? TimePicker
+      : DateTimePicker;
+
+  return (
+    <MuiPickersUtilsProvider utils={DateFnsUtils}>
+      <ThemeProvider theme={internalTheme}>
+        <Picker
+          value={value}
+          open={isVisible}
+          onChange={(d) => {
+            toggleVisibility();
+            onChange(null, d);
+          }}
+          onClose={() => toggleVisibility()}
+          variant="dialog"
+          TextFieldComponent={() => null}
+          minDate={minimumDate}
+          maxDate={maximumDate}
+        />
+      </ThemeProvider>
+    </MuiPickersUtilsProvider>
+  );
+};
+
+export default withTheme(DatePickerComponent);

package/src/components/DatePicker/DatePickerComponentType.ts

@@ -1,12 +1,12 @@
-import theme from "../../styles/DefaultTheme";
-
-export interface DatePickerComponentProps {
-  value: Date;
-  onChange: (e: any, data?: any) => void;
-  mode: "date" | "time" | "datetime";
-  toggleVisibility: () => void;
-  isVisible?: boolean;
-  minimumDate?: Date;
-  maximumDate?: Date;
-  theme?: typeof theme;
-}
+import theme from "../../styles/DefaultTheme";
+
+export interface DatePickerComponentProps {
+  value: Date;
+  onChange: (e: any, data?: any) => void;
+  mode: "date" | "time" | "datetime";
+  toggleVisibility: () => void;
+  isVisible?: boolean;
+  minimumDate?: Date;
+  maximumDate?: Date;
+  theme?: typeof theme;
+}

package/src/components/DeckSwiper/DeckSwiper.tsx

@@ -1,181 +1,181 @@
-import React from "react";
-import { StyleProp, ViewStyle, StyleSheet, View } from "react-native";
-import DeckSwiperComponent from "react-native-deck-swiper";
-
-export interface DeckSwiperProps<T> {
-  onStartSwipe?: () => void;
-  onEndSwipe?: () => void;
-  onSwipe?: (index: number) => void;
-  onSwipedLeft?: (index: number) => void;
-  onSwipedRight?: (index: number) => void;
-  onSwipedUp?: (index: number) => void;
-  onSwipedDown?: (index: number) => void;
-  onIndexChanged?: (index: number) => void;
-  onEndReached?: () => void;
-  startCardIndex?: number;
-  infiniteSwiping?: boolean;
-  verticalEnabled?: boolean;
-  horizontalEnabled?: boolean;
-  visibleCardCount?: number;
-  data?: Array<T>;
-  keyExtractor?: (item: T) => string;
-  renderItem?: ({ item, index }: { item: T; index: number }) => JSX.Element;
-  style?: StyleProp<ViewStyle>;
-}
-
-const DeckSwiper = <T extends object>({
-  onStartSwipe,
-  onEndSwipe,
-  onSwipe,
-  onSwipedLeft,
-  onSwipedRight,
-  onSwipedUp,
-  onSwipedDown,
-  onIndexChanged,
-  onEndReached,
-  startCardIndex = 0,
-  infiniteSwiping = false,
-  verticalEnabled = true,
-  horizontalEnabled = true,
-  visibleCardCount = 1,
-  data,
-  keyExtractor,
-  renderItem,
-  style,
-  children,
-}: React.PropsWithChildren<DeckSwiperProps<T>>) => {
-  //Both 'renderItem' and 'data' are optional to allow direct children. But if one is included, both need to be included
-  if ((data && !renderItem) || (renderItem && !data)) {
-    throw new Error(
-      "'renderItem' and 'data' need to both be provided to lazily render. Either remove them entirley or include both"
-    );
-  }
-
-  if (data && renderItem && children) {
-    console.warn(
-      "'children' of DeckSwiper ignored due to usage of 'data' and 'renderItem'"
-    );
-  }
-
-  const deckSwiperRef = React.useRef<DeckSwiperComponent<T>>(null);
-
-  const childrenArray = React.useMemo(
-    () => React.Children.toArray(children),
-    [children]
-  );
-
-  // an array of indices based on children count
-  const cardsFillerData = React.useMemo(
-    () => Array.from(Array(childrenArray.length).keys()),
-    [childrenArray]
-  );
-
-  const cardsData = Array.isArray(data) ? data : cardsFillerData;
-
-  const renderCard = (card: any, index: number): JSX.Element => {
-    if (renderItem) {
-      return renderItem({ item: card, index });
-    } else {
-      return <>{childrenArray[index]}</>;
-    }
-  };
-
-  const renderFirstCard = (): JSX.Element | undefined => {
-    if (cardsData.length) {
-      return renderCard(cardsData[0], 0);
-    }
-    return undefined;
-  };
-
-  const cardKeyExtractor = (card: any) => {
-    if (keyExtractor) {
-      return keyExtractor(card);
-    } else {
-      return card?.toString();
-    }
-  };
-
-  /* 
-  react-native-deck-swiper does not re-render cards when parent state changes
-  This forces an update on every re-render to reflect any parent state changes
-  */
-  React.useEffect(() => {
-    deckSwiperRef.current?.forceUpdate();
-  });
-
-  /**
-   * By default react-native-deck-swiper positions everything with absolute position.
-   * To overcome this, it is wrapped in a View to be able to add the component in any layout structure.
-   *
-   *
-   * Since all children of that View are absolutley positioned, the View does not have a height and still looks and behaves weird.
-   * To fix/mitage this without setting a static height, the first card is rendered in invisible state to take up space.
-   * This effectivley makes the default height of the container be the height of the first card.
-   */
-
-  return (
-    <View>
-      <View style={styles.containerHeightFiller}>{renderFirstCard()}</View>
-      <DeckSwiperComponent
-        ref={deckSwiperRef}
-        cards={cardsData as any[]}
-        renderCard={renderCard}
-        keyExtractor={cardKeyExtractor}
-        containerStyle={
-          StyleSheet.flatten([styles.cardsContainer, style]) as
-            | object
-            | undefined
-        }
-        cardStyle={styles.card as object | undefined}
-        onSwiped={onIndexChanged}
-        onSwipedAll={onEndReached}
-        cardIndex={startCardIndex}
-        infinite={infiniteSwiping}
-        verticalSwipe={verticalEnabled}
-        horizontalSwipe={horizontalEnabled}
-        showSecondCard={visibleCardCount > 1}
-        stackSize={visibleCardCount}
-        backgroundColor="transparent"
-        cardVerticalMargin={0}
-        cardHorizontalMargin={0}
-        onSwipedLeft={(index) => {
-          onSwipedLeft?.(index);
-          onSwipe?.(index);
-        }}
-        onSwipedRight={(index) => {
-          onSwipedRight?.(index);
-          onSwipe?.(index);
-        }}
-        onSwipedTop={(index) => {
-          onSwipedUp?.(index);
-          onSwipe?.(index);
-        }}
-        onSwipedBottom={(index) => {
-          onSwipedDown?.(index);
-          onSwipe?.(index);
-        }}
-        //@ts-ignore Not typed, but is implemented and works
-        dragStart={onStartSwipe}
-        //@ts-ignore
-        dragEnd={onEndSwipe}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  cardsContainer: {
-    position: "absolute",
-  },
-  card: {
-    left: 0,
-    right: 0,
-    width: "auto",
-    height: "auto",
-  },
-  containerHeightFiller: {
-    opacity: 0.0,
-  },
-});
-
-export default DeckSwiper;
+import React from "react";
+import { StyleProp, ViewStyle, StyleSheet, View } from "react-native";
+import DeckSwiperComponent from "react-native-deck-swiper";
+
+export interface DeckSwiperProps<T> {
+  onStartSwipe?: () => void;
+  onEndSwipe?: () => void;
+  onSwipe?: (index: number) => void;
+  onSwipedLeft?: (index: number) => void;
+  onSwipedRight?: (index: number) => void;
+  onSwipedUp?: (index: number) => void;
+  onSwipedDown?: (index: number) => void;
+  onIndexChanged?: (index: number) => void;
+  onEndReached?: () => void;
+  startCardIndex?: number;
+  infiniteSwiping?: boolean;
+  verticalEnabled?: boolean;
+  horizontalEnabled?: boolean;
+  visibleCardCount?: number;
+  data?: Array<T>;
+  keyExtractor?: (item: T) => string;
+  renderItem?: ({ item, index }: { item: T; index: number }) => JSX.Element;
+  style?: StyleProp<ViewStyle>;
+}
+
+const DeckSwiper = <T extends object>({
+  onStartSwipe,
+  onEndSwipe,
+  onSwipe,
+  onSwipedLeft,
+  onSwipedRight,
+  onSwipedUp,
+  onSwipedDown,
+  onIndexChanged,
+  onEndReached,
+  startCardIndex = 0,
+  infiniteSwiping = false,
+  verticalEnabled = true,
+  horizontalEnabled = true,
+  visibleCardCount = 1,
+  data,
+  keyExtractor,
+  renderItem,
+  style,
+  children,
+}: React.PropsWithChildren<DeckSwiperProps<T>>) => {
+  //Both 'renderItem' and 'data' are optional to allow direct children. But if one is included, both need to be included
+  if ((data && !renderItem) || (renderItem && !data)) {
+    throw new Error(
+      "'renderItem' and 'data' need to both be provided to lazily render. Either remove them entirley or include both"
+    );
+  }
+
+  if (data && renderItem && children) {
+    console.warn(
+      "'children' of DeckSwiper ignored due to usage of 'data' and 'renderItem'"
+    );
+  }
+
+  const deckSwiperRef = React.useRef<DeckSwiperComponent<T>>(null);
+
+  const childrenArray = React.useMemo(
+    () => React.Children.toArray(children),
+    [children]
+  );
+
+  // an array of indices based on children count
+  const cardsFillerData = React.useMemo(
+    () => Array.from(Array(childrenArray.length).keys()),
+    [childrenArray]
+  );
+
+  const cardsData = Array.isArray(data) ? data : cardsFillerData;
+
+  const renderCard = (card: any, index: number): JSX.Element => {
+    if (renderItem) {
+      return renderItem({ item: card, index });
+    } else {
+      return <>{childrenArray[index]}</>;
+    }
+  };
+
+  const renderFirstCard = (): JSX.Element | undefined => {
+    if (cardsData.length) {
+      return renderCard(cardsData[0], 0);
+    }
+    return undefined;
+  };
+
+  const cardKeyExtractor = (card: any) => {
+    if (keyExtractor) {
+      return keyExtractor(card);
+    } else {
+      return card?.toString();
+    }
+  };
+
+  /* 
+  react-native-deck-swiper does not re-render cards when parent state changes
+  This forces an update on every re-render to reflect any parent state changes
+  */
+  React.useEffect(() => {
+    deckSwiperRef.current?.forceUpdate();
+  });
+
+  /**
+   * By default react-native-deck-swiper positions everything with absolute position.
+   * To overcome this, it is wrapped in a View to be able to add the component in any layout structure.
+   *
+   *
+   * Since all children of that View are absolutley positioned, the View does not have a height and still looks and behaves weird.
+   * To fix/mitage this without setting a static height, the first card is rendered in invisible state to take up space.
+   * This effectivley makes the default height of the container be the height of the first card.
+   */
+
+  return (
+    <View>
+      <View style={styles.containerHeightFiller}>{renderFirstCard()}</View>
+      <DeckSwiperComponent
+        ref={deckSwiperRef}
+        cards={cardsData as any[]}
+        renderCard={renderCard}
+        keyExtractor={cardKeyExtractor}
+        containerStyle={
+          StyleSheet.flatten([styles.cardsContainer, style]) as
+            | object
+            | undefined
+        }
+        cardStyle={styles.card as object | undefined}
+        onSwiped={onIndexChanged}
+        onSwipedAll={onEndReached}
+        cardIndex={startCardIndex}
+        infinite={infiniteSwiping}
+        verticalSwipe={verticalEnabled}
+        horizontalSwipe={horizontalEnabled}
+        showSecondCard={visibleCardCount > 1}
+        stackSize={visibleCardCount}
+        backgroundColor="transparent"
+        cardVerticalMargin={0}
+        cardHorizontalMargin={0}
+        onSwipedLeft={(index) => {
+          onSwipedLeft?.(index);
+          onSwipe?.(index);
+        }}
+        onSwipedRight={(index) => {
+          onSwipedRight?.(index);
+          onSwipe?.(index);
+        }}
+        onSwipedTop={(index) => {
+          onSwipedUp?.(index);
+          onSwipe?.(index);
+        }}
+        onSwipedBottom={(index) => {
+          onSwipedDown?.(index);
+          onSwipe?.(index);
+        }}
+        //@ts-ignore Not typed, but is implemented and works
+        dragStart={onStartSwipe}
+        //@ts-ignore
+        dragEnd={onEndSwipe}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  cardsContainer: {
+    position: "absolute",
+  },
+  card: {
+    left: 0,
+    right: 0,
+    width: "auto",
+    height: "auto",
+  },
+  containerHeightFiller: {
+    opacity: 0.0,
+  },
+});
+
+export default DeckSwiper;

package/src/components/DeckSwiper/DeckSwiperCard.tsx

@@ -1,37 +1,37 @@
-import React from "react";
-import { View, StyleSheet, StyleProp, ViewStyle } from "react-native";
-import type { Theme } from "../../styles/DefaultTheme";
-import { withTheme } from "../../theming";
-
-export interface DeckSwiperCardProps {
-  style?: StyleProp<ViewStyle>;
-  theme: Theme;
-}
-
-const DeckSwiperCard: React.FC<
-  React.PropsWithChildren<DeckSwiperCardProps>
-> = ({ style, children, theme }) => (
-  <View
-    style={[
-      styles.card,
-      {
-        backgroundColor: theme.colors.background,
-        borderColor: theme.colors.divider,
-      },
-      style,
-    ]}
-  >
-    {children}
-  </View>
-);
-
-const styles = StyleSheet.create({
-  card: {
-    alignItems: "center",
-    justifyContent: "center",
-    padding: 20,
-    borderWidth: 2,
-  },
-});
-
-export default withTheme(DeckSwiperCard);
+import React from "react";
+import { View, StyleSheet, StyleProp, ViewStyle } from "react-native";
+import type { Theme } from "../../styles/DefaultTheme";
+import { withTheme } from "../../theming";
+
+export interface DeckSwiperCardProps {
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+}
+
+const DeckSwiperCard: React.FC<
+  React.PropsWithChildren<DeckSwiperCardProps>
+> = ({ style, children, theme }) => (
+  <View
+    style={[
+      styles.card,
+      {
+        backgroundColor: theme.colors.background,
+        borderColor: theme.colors.divider,
+      },
+      style,
+    ]}
+  >
+    {children}
+  </View>
+);
+
+const styles = StyleSheet.create({
+  card: {
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 20,
+    borderWidth: 2,
+  },
+});
+
+export default withTheme(DeckSwiperCard);