ferns-ui 0.14.0 → 0.15.0

package/dist/Avatar.d.ts

@@ -23,6 +23,19 @@ interface AvatarProps {
      * The URL of the user's image.
      */
     src?: string;
+    /**
+     * The fit for the image within the Avatar: "cover" | "contain" | "none".
+     * Default is undefined. See Image.tsx for more info
+     */
+    imageFit?: "cover" | "contain" | "none";
+    /**
+     * Allow user to edit the image of the avatar
+     */
+    editAvatarImage?: boolean;
+    /**
+     * Function to handle the avatar image edit
+     */
+    onChange?: (val: any) => void;
 }
 export declare const Avatar: (props: AvatarProps) => React.ReactElement;
 export {};

package/dist/Avatar.js

@@ -1,6 +1,9 @@
+import { launchImageLibraryAsync, MediaTypeOptions } from "expo-image-picker";
 import React, { useState } from "react";
 import { Image, Text, View } from "react-native";
 import { Box } from "./Box";
+import { iconSizeToNumber } from "./Common";
+import { Icon } from "./Icon";
 import { Unifier } from "./Unifier";
 const sizes = {
     xs: 24,
@@ -10,9 +13,10 @@ const sizes = {
     xl: 120,
 };
 export const Avatar = (props) => {
-    var _a;
+    var _a, _b;
     const [isImageLoaded, setIsImageLoaded] = useState(true);
-    const { name, initials, outline, size = "md", src } = props;
+    const [src, setSrc] = useState((_a = props.src) !== null && _a !== void 0 ? _a : undefined);
+    const { name, initials, outline, size = "md", imageFit = "contain", editAvatarImage, onChange, } = props;
     const width = sizes[size];
     const height = sizes[size];
     const radius = sizes[size] / 2;
@@ -24,28 +28,44 @@ export const Avatar = (props) => {
         .join("")
         .toLocaleUpperCase();
     const handleImageError = () => setIsImageLoaded(false);
-    return (React.createElement(Box, { border: outline ? "white" : undefined, height: height, overflow: "hidden", position: "relative", rounding: "circle", width: width }, src && isImageLoaded ? (
-    // TODO: Make our Image component rounding work so that we can use it for Avatar. Currently it creates an
-    //  unrounded box around the Image.
-    React.createElement(Image, { resizeMode: "contain", source: { uri: src, cache: "force-cache" }, style: {
-            borderRadius: radius,
-            height,
-            width,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            overflow: "hidden",
-        }, onError: handleImageError })) : (React.createElement(View, { style: {
-            height,
-            width,
-            borderRadius: radius,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            backgroundColor: props.backgroundColor
-                ? Unifier.theme[props.backgroundColor]
-                : Unifier.theme.gray,
-        } },
-        React.createElement(Text, { style: { fontSize, color: (_a = props.textColor) !== null && _a !== void 0 ? _a : Unifier.theme.darkGray } }, computedInitials)))));
+    const pickImage = async () => {
+        // TODO: Add permission request to use camera to take a picture
+        const result = await launchImageLibraryAsync({
+            mediaTypes: MediaTypeOptions.Images,
+            allowsEditing: true,
+        });
+        if (!result.cancelled) {
+            setSrc(result.uri);
+            if (onChange) {
+                onChange(result);
+            }
+        }
+    };
+    return (React.createElement(Box, { border: outline ? "white" : undefined, height: height, overflow: "hidden", position: "relative", rounding: "circle", width: editAvatarImage ? width + iconSizeToNumber(size) : width },
+        editAvatarImage && (React.createElement(Box, { bottom: true, position: "absolute", right: true, zIndex: 5, onClick: pickImage },
+            React.createElement(Icon, { color: "black", name: "edit", size: size }))),
+        src && isImageLoaded ? (
+        // TODO: Make our Image component rounding work so that we can use it for Avatar. Currently it creates an
+        // unrounded box around the Image.
+        React.createElement(Image, { resizeMode: imageFit, source: { uri: src, cache: "force-cache" }, style: {
+                borderRadius: radius,
+                height,
+                width,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                overflow: "hidden",
+            }, onError: handleImageError })) : (React.createElement(View, { style: {
+                height,
+                width,
+                borderRadius: radius,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: props.backgroundColor
+                    ? Unifier.theme[props.backgroundColor]
+                    : Unifier.theme.gray,
+            } },
+            React.createElement(Text, { style: { fontSize, color: (_b = props.textColor) !== null && _b !== void 0 ? _b : Unifier.theme.darkGray } }, computedInitials)))));
 };
 //# sourceMappingURL=Avatar.js.map

package/dist/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferns-ui",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "main": "dist/index.js",
   "license": "Apache-2.0",
   "scripts": {
@@ -145,6 +145,7 @@
     "eslint-plugin-unused-imports": "2.0.0",
     "expo-font": "^10.0.5",
     "expo-haptics": "~11.3.0",
+    "expo-image-picker": "^13.3.1",
     "lodash": "^4.17.21",
     "mixpanel-browser": "^2.38.0",
     "moment-timezone": "^0.5.35",
@@ -176,13 +177,14 @@
     "@react-native-picker/picker": "2.4.4",
     "expo-font": "^10.0.5",
     "expo-haptics": "~11.3.0",
+    "expo-image-picker": "^13.3.1",
     "lodash": "^4.17.21",
     "mixpanel-browser": "^2.38.0",
     "moment-timezone": "^0.5.35",
     "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
-    "react-dev-utils": "^12.0.1",
     "react-datetime-picker": "^4.0.1",
+    "react-dev-utils": "^12.0.1",
     "react-dom": "18.2.0",
     "react-native": "0.69.4",
     "react-native-calendars": "^1.1288.2",

package/src/Avatar.tsx

@@ -1,8 +1,10 @@
+import {launchImageLibraryAsync, MediaTypeOptions} from "expo-image-picker";
 import React, {useState} from "react";
-import {Image, Text, View} from "react-native";
+import {Image, ImageResizeMode, Text, View} from "react-native";
 
 import {Box} from "./Box";
-import {AllColors} from "./Common";
+import {AllColors, iconSizeToNumber} from "./Common";
+import {Icon} from "./Icon";
 import {Unifier} from "./Unifier";
 
 const sizes = {
@@ -38,11 +40,33 @@ interface AvatarProps {
    * The URL of the user's image.
    */
   src?: string;
+  /**
+   * The fit for the image within the Avatar: "cover" | "contain" | "none".
+   * Default is undefined. See Image.tsx for more info
+   */
+  imageFit?: "cover" | "contain" | "none";
+  /**
+   * Allow user to edit the image of the avatar
+   */
+  editAvatarImage?: boolean;
+  /**
+   * Function to handle the avatar image edit
+   */
+  onChange?: (val: any) => void;
 }
 
 export const Avatar = (props: AvatarProps): React.ReactElement => {
   const [isImageLoaded, setIsImageLoaded] = useState(true);
-  const {name, initials, outline, size = "md", src} = props;
+  const [src, setSrc] = useState(props.src ?? undefined);
+  const {
+    name,
+    initials,
+    outline,
+    size = "md",
+    imageFit = "contain",
+    editAvatarImage,
+    onChange,
+  } = props;
   const width = sizes[size];
   const height = sizes[size];
   const radius = sizes[size] / 2;
@@ -57,6 +81,22 @@ export const Avatar = (props: AvatarProps): React.ReactElement => {
       .toLocaleUpperCase();
 
   const handleImageError = () => setIsImageLoaded(false);
+
+  const pickImage = async () => {
+    // TODO: Add permission request to use camera to take a picture
+    const result = await launchImageLibraryAsync({
+      mediaTypes: MediaTypeOptions.Images,
+      allowsEditing: true,
+    });
+
+    if (!result.cancelled) {
+      setSrc(result.uri);
+      if (onChange) {
+        onChange(result);
+      }
+    }
+  };
+
   return (
     <Box
       border={outline ? "white" : undefined}
@@ -64,13 +104,18 @@ export const Avatar = (props: AvatarProps): React.ReactElement => {
       overflow="hidden"
       position="relative"
       rounding="circle"
-      width={width}
+      width={editAvatarImage ? width + iconSizeToNumber(size) : width}
     >
+      {editAvatarImage && (
+        <Box bottom position="absolute" right zIndex={5} onClick={pickImage}>
+          <Icon color="black" name="edit" size={size} />
+        </Box>
+      )}
       {src && isImageLoaded ? (
         // TODO: Make our Image component rounding work so that we can use it for Avatar. Currently it creates an
-        //  unrounded box around the Image.
+        // unrounded box around the Image.
         <Image
-          resizeMode="contain"
+          resizeMode={imageFit as ImageResizeMode}
           source={{uri: src, cache: "force-cache"}}
           style={{
             borderRadius: radius,