@draftbit/core 47.0.1-cc5ccc.2 → 47.0.1-ed6e56.2

package/src/components/DatePicker/DatePicker.tsx

@@ -515,6 +515,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
               <DateTimePicker
                 value={getValidDate()}
                 mode={mode}
+                displayMode="default"
                 isVisible={pickerVisible}
                 toggleVisibility={toggleVisibility}
                 onChange={(_event: any, data: any) => {

package/src/components/DatePicker/DatePickerComponent.js

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

package/src/components/DatePicker/DatePickerComponent.tsx

@@ -1,21 +1,20 @@
 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,
+  displayMode = "default",
   mode,
   toggleVisibility,
 }) => {
-  return Platform.OS === "ios" || Platform.OS === "android" ? (
+  return (
     <DateTimePickerModal
       date={value}
       mode={mode}
       isVisible={true}
-      display={Platform.OS === "ios" ? "spinner" : "default"}
+      display={displayMode}
       onCancel={() => {
         console.log("Picker cancelled before selecting anything.");
         toggleVisibility();
@@ -24,13 +23,6 @@ const DatePickerComponent: React.FC<React.PropsWithChildren<Props>> = ({
         onChange(null, data);
       }}
     />
-  ) : (
-    <DateTimePicker
-      value={value}
-      mode={mode}
-      onChange={onChange}
-      display={"default"}
-    />
   );
 };
 

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

@@ -25,6 +25,6 @@ const DatePickerComponent = ({ value, onChange, mode, toggleVisibility, isVisibl
             React.createElement(Picker, { value: value, open: isVisible, onChange: (d) => {
                     toggleVisibility();
                     onChange(null, d);
-                }, onClose: () => toggleVisibility(), variant: "dialog", TextFieldComponent: () => null }))));
+                }, onClose: () => toggleVisibility(), TextFieldComponent: () => null }))));
 };
 export default withTheme(DatePickerComponent);

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

@@ -48,7 +48,6 @@ const DatePickerComponent: React.FC<Props & { theme: typeof Theme }> = ({
             onChange(null, d);
           }}
           onClose={() => toggleVisibility()}
-          variant="dialog"
           TextFieldComponent={() => null}
         />
       </ThemeProvider>

package/src/components/DatePicker/DatePickerComponentType.ts

@@ -6,5 +6,14 @@ export interface DatePickerComponentProps {
   mode: "date" | "time" | "datetime";
   toggleVisibility: () => void;
   isVisible?: boolean;
+  displayMode?:
+    | "default"
+    | "compact"
+    | "inline"
+    | "spinner"
+    | "clock"
+    | "calendar"
+    | undefined;
+  variant?: "dialog" | "inline" | undefined;
   theme?: typeof theme;
 }

package/src/components/DatePicker/DatePickerInput.js

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { View, TextInput, Platform, } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import dateFormat from "dateformat";
+import Portal from "../Portal/Portal";
+import Touchable from "../Touchable";
+import DateTimePicker from "./DatePickerComponent";
+const MONTHS = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+];
+const DatePickerInput = ({ style, date, onDateChange = () => { }, defaultValue, disabled = false, mode = "date", format, androidDisplay = "default", iosDisplay = "default", webDisplay = "dialog", placeholder, ...props }) => {
+    const [value, setValue] = React.useState(date || defaultValue);
+    React.useEffect(() => {
+        if (defaultValue != null) {
+            setValue(defaultValue);
+        }
+    }, [defaultValue]);
+    const [pickerVisible, setPickerVisible] = React.useState(false);
+    const [focused, setFocused] = React.useState(false);
+    const getValidDate = () => {
+        if (!value) {
+            return new Date();
+        }
+        return typeof (value === null || value === void 0 ? void 0 : value.getMonth) === "function" ? value : new Date();
+    };
+    const formatDate = () => {
+        if (!value)
+            return "";
+        let newDate = getValidDate();
+        if (format)
+            return dateFormat(newDate, format);
+        if (mode === "time") {
+            return `${newDate.toLocaleTimeString()}`;
+        }
+        if (mode === "datetime") {
+            return `${newDate.toLocaleString()}`;
+        }
+        return `${MONTHS[newDate.getMonth()]} ${newDate.getDate()}, ${newDate.getFullYear()}`;
+    };
+    const toggleVisibility = async () => {
+        setPickerVisible(!pickerVisible);
+        focused ? _handleBlur() : _handleFocus();
+    };
+    const insets = useSafeAreaInsets();
+    React.useEffect(() => {
+        setValue(date);
+    }, [date]);
+    const _handleFocus = () => {
+        if (disabled) {
+            return;
+        }
+        setFocused(true);
+    };
+    const _handleBlur = () => {
+        if (disabled) {
+            return;
+        }
+        setFocused(false);
+    };
+    return (React.createElement(View, null,
+        React.createElement(Touchable, { disabled: disabled, onPress: toggleVisibility },
+            React.createElement(TextInput, { value: formatDate(), placeholder: placeholder, editable: !disabled, onFocus: _handleFocus, onBlur: _handleBlur, style: style, ...props })),
+        pickerVisible && (React.createElement(Portal, null,
+            React.createElement(View, { style: {
+                    paddingTop: insets.top,
+                    paddingBottom: insets.bottom,
+                    paddingLeft: insets.left,
+                    paddingRight: insets.right,
+                } },
+                Platform.OS === "web" && (React.createElement(DateTimePicker, { value: getValidDate(), mode: mode, isVisible: pickerVisible, toggleVisibility: toggleVisibility, onChange: (_event, data) => {
+                        toggleVisibility();
+                        setValue(data);
+                        onDateChange(data);
+                    } })),
+                Platform.OS === "ios" && (React.createElement(DateTimePicker, { value: getValidDate(), mode: mode, displayMode: iosDisplay, isVisible: pickerVisible, toggleVisibility: toggleVisibility, onChange: (_event, data) => {
+                        toggleVisibility();
+                        setValue(data);
+                        onDateChange(data);
+                    } })),
+                Platform.OS === "android" && (React.createElement(DateTimePicker, { value: getValidDate(), mode: mode, variant: webDisplay, displayMode: androidDisplay, isVisible: pickerVisible, toggleVisibility: toggleVisibility, onChange: (_event, data) => {
+                        toggleVisibility();
+                        setValue(data);
+                        onDateChange(data);
+                    } })))))));
+};
+export default DatePickerInput;

package/src/components/DatePicker/DatePickerInput.tsx

@@ -0,0 +1,195 @@
+import * as React from "react";
+import {
+  View,
+  StyleProp,
+  ViewStyle,
+  TextInputProps,
+  TextInput,
+  Platform,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import dateFormat from "dateformat";
+import Portal from "../Portal/Portal";
+import Touchable from "../Touchable";
+import DateTimePicker from "./DatePickerComponent";
+
+type Props = {
+  style?: StyleProp<ViewStyle>;
+  date?: Date;
+  format?: string;
+  onDateChange?: (data?: Date) => void;
+  defaultValue?: Date;
+  disabled?: boolean;
+  mode?: "date" | "time" | "datetime";
+  androidDisplay: "default" | "spinner" | "calendar" | "clock";
+  iosDisplay: "default" | "spinner" | "compact" | "inline";
+  webDisplay: "dialog" | "inline";
+  placeholder?: string;
+} & TextInputProps;
+
+const MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+const DatePickerInput: React.FC<React.PropsWithChildren<Props>> = ({
+  style,
+  date,
+  onDateChange = () => {},
+  defaultValue,
+  disabled = false,
+  mode = "date",
+  format,
+  androidDisplay = "default",
+  iosDisplay = "default",
+  webDisplay = "dialog",
+  placeholder,
+  ...props
+}) => {
+  const [value, setValue] = React.useState<any>(date || defaultValue);
+
+  React.useEffect(() => {
+    if (defaultValue != null) {
+      setValue(defaultValue);
+    }
+  }, [defaultValue]);
+
+  const [pickerVisible, setPickerVisible] = React.useState(false);
+  const [focused, setFocused] = React.useState<boolean>(false);
+
+  const getValidDate = (): Date => {
+    if (!value) {
+      return new Date();
+    }
+    return typeof value?.getMonth === "function" ? value : new Date();
+  };
+
+  const formatDate = (): string => {
+    if (!value) return "";
+    let newDate = getValidDate();
+
+    if (format) return dateFormat(newDate, format);
+
+    if (mode === "time") {
+      return `${newDate.toLocaleTimeString()}`;
+    }
+
+    if (mode === "datetime") {
+      return `${newDate.toLocaleString()}`;
+    }
+
+    return `${
+      MONTHS[newDate.getMonth()]
+    } ${newDate.getDate()}, ${newDate.getFullYear()}`;
+  };
+
+  const toggleVisibility = async () => {
+    setPickerVisible(!pickerVisible);
+    focused ? _handleBlur() : _handleFocus();
+  };
+
+  const insets = useSafeAreaInsets();
+
+  React.useEffect(() => {
+    setValue(date);
+  }, [date]);
+
+  const _handleFocus = () => {
+    if (disabled) {
+      return;
+    }
+
+    setFocused(true);
+  };
+
+  const _handleBlur = () => {
+    if (disabled) {
+      return;
+    }
+    setFocused(false);
+  };
+
+  return (
+    <View>
+      <Touchable disabled={disabled} onPress={toggleVisibility}>
+        <TextInput
+          value={formatDate()}
+          placeholder={placeholder}
+          editable={!disabled}
+          onFocus={_handleFocus}
+          onBlur={_handleBlur}
+          style={style}
+          {...props}
+        />
+      </Touchable>
+      {pickerVisible && (
+        <Portal>
+          <View
+            style={{
+              paddingTop: insets.top,
+              paddingBottom: insets.bottom,
+              paddingLeft: insets.left,
+              paddingRight: insets.right,
+            }}
+          >
+            {Platform.OS === "web" && (
+              <DateTimePicker
+                value={getValidDate()}
+                mode={mode}
+                isVisible={pickerVisible}
+                toggleVisibility={toggleVisibility}
+                onChange={(_event: any, data: any) => {
+                  toggleVisibility();
+                  setValue(data);
+                  onDateChange(data);
+                }}
+              />
+            )}
+            {Platform.OS === "ios" && (
+              <DateTimePicker
+                value={getValidDate()}
+                mode={mode}
+                displayMode={iosDisplay}
+                isVisible={pickerVisible}
+                toggleVisibility={toggleVisibility}
+                onChange={(_event: any, data: any) => {
+                  toggleVisibility();
+                  setValue(data);
+                  onDateChange(data);
+                }}
+              />
+            )}
+            {Platform.OS === "android" && (
+              <DateTimePicker
+                value={getValidDate()}
+                mode={mode}
+                variant={webDisplay}
+                displayMode={androidDisplay}
+                isVisible={pickerVisible}
+                toggleVisibility={toggleVisibility}
+                onChange={(_event: any, data: any) => {
+                  toggleVisibility();
+                  setValue(data);
+                  onDateChange(data);
+                }}
+              />
+            )}
+          </View>
+        </Portal>
+      )}
+    </View>
+  );
+};
+
+export default DatePickerInput;

package/src/components/DeprecatedButton.js

@@ -0,0 +1,95 @@
+import * as React from "react";
+import { ActivityIndicator, View, Text, StyleSheet, } from "react-native";
+import color from "color";
+import Config from "./Config";
+import Touchable from "./Touchable";
+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 }) => {
+    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 = {
+        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] },
+            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)))));
+};
+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/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);