ferns-ui 0.3.1 → 0.4.0

package/dist/Avatar.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+interface AvatarProps {
+    /**
+     * The name of the user. This is used for the placeholder treatment if an image is not available.
+     */
+    name: string;
+    /**
+     * Override the generated initials from `name`.
+     */
+    initials?: string;
+    /**
+     * Adds a white border around Avatar so it's visible when displayed on other images.
+     */
+    outline?: boolean;
+    /**
+     * xs: 24px, sm: 32px, md: 48px, lg: 64px, xl: 120px.
+     */
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    /**
+     * The URL of the user's image.
+     */
+    src?: string;
+}
+export declare const Avatar: (props: AvatarProps) => React.ReactElement;
+export {};

package/dist/Avatar.js

@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+import { Image, Text, View } from "react-native";
+import { Box } from "./Box";
+import { Unifier } from "./Unifier";
+const sizes = {
+    xs: 24,
+    sm: 32,
+    md: 48,
+    lg: 64,
+    xl: 120,
+};
+export const Avatar = (props) => {
+    const [isImageLoaded, setIsImageLoaded] = useState(true);
+    const { name, initials, outline, size = "md", src } = props;
+    const width = sizes[size];
+    const height = sizes[size];
+    const radius = sizes[size] / 2;
+    const fontSize = sizes[size] / 2;
+    const computedInitials = initials !== null && initials !== void 0 ? initials : name.match(/(^\S\S?|\s\S)?/g)
+        .map((v) => v.trim())
+        .join("")
+        .match(/(^\S|\S$)?/g)
+        .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: Unifier.theme.gray,
+        } },
+        React.createElement(Text, { style: { fontSize, color: Unifier.theme.darkGray } }, computedInitials)))));
+};
+//# sourceMappingURL=Avatar.js.map

package/dist/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AACtC,OAAO,EAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAElC,MAAM,KAAK,GAAG;IACZ,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,GAAG;CACR,CAAC;AAyBF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAsB,EAAE;IAC/D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACzD,MAAM,EAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,EAAC,GAAG,KAAK,CAAC;IAC1D,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;IAC1B,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;IAC3B,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC/B,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACjC,MAAM,gBAAgB,GACpB,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GACP,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAS;SACnC,GAAG,CAAC,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;SAC5B,IAAI,CAAC,EAAE,CAAC;SACR,KAAK,CAAC,aAAa,CAAC;SACpB,IAAI,CAAC,EAAE,CAAC;SACR,iBAAiB,EAAE,CAAC;IAEzB,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACvD,OAAO,CACL,oBAAC,GAAG,IACF,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACrC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAC,QAAQ,EACjB,QAAQ,EAAC,UAAU,EACnB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAE,KAAK,IAEX,GAAG,IAAI,aAAa,CAAC,CAAC,CAAC;IACtB,yGAAyG;IACzG,mCAAmC;IACnC,oBAAC,KAAK,IACJ,UAAU,EAAC,SAAS,EACpB,MAAM,EAAE,EAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,aAAa,EAAC,EACxC,KAAK,EAAE;YACL,YAAY,EAAE,MAAM;YACpB,MAAM;YACN,KAAK;YACL,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,QAAQ,EAAE,QAAQ;SACnB,EACD,OAAO,EAAE,gBAAgB,GACzB,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,IAAI,IACH,KAAK,EAAE;YACL,MAAM;YACN,KAAK;YACL,YAAY,EAAE,MAAM;YACpB,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,eAAe,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI;SACpC;QAED,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAC,IAAG,gBAAgB,CAAQ,CAC5E,CACR,CACG,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/Common.d.ts

@@ -437,7 +437,7 @@ export interface SpinnerProps {
     color?: Color;
 }
 export interface MaskProps {
-    children?: React.ReactNode;
+    children?: React.ReactElement;
     shape?: "circle" | "rounded" | "square";
     height?: number | string;
     width?: number | string;

package/dist/Mask.d.ts

@@ -1,5 +1,3 @@
 import React from "react";
 import { MaskProps } from "./Common";
-export declare class Mask extends React.Component<MaskProps, {}> {
-    render(): React.ReactNode;
-}
+export declare function Mask(props: MaskProps): React.ReactElement | null;

package/dist/Mask.js

@@ -1,22 +1,19 @@
 import React from "react";
-export class Mask extends React.Component {
-    render() {
-        // if (this.props.shape === "rounded") {
-        //   return <Box style={{overflow: "hidden", borderRadius: 12}}>{this.props.children}</Box>;
-        // } else if (this.props.shape === "circle") {
-        //   return <Box style={{overflow: "hidden", borderRadius: 1000}}>{this.props.children}</Box>;
-        // }
-        // if (this.props.rounding) {
-        //   let rounding = this.props.rounding === "circle" ? 100 : this.props.rounding;
-        //   // Subtract 1 from rounding because of some very odd rendering.
-        //   return (
-        //     // <View style={{borderRadius: (rounding - 1) * 4, overflow: "visible"}}>
-        //       <View>{this.props.children}</View>
-        //     // </View>
-        //   );
-        // } else {
-        return this.props.children;
-        // }
+import { View } from "react-native";
+export function Mask(props) {
+    if (props.shape === "rounded") {
+        return React.createElement(View, { style: { overflow: "hidden", borderRadius: 12 } }, props.children);
+    }
+    else if (props.shape === "circle") {
+        return React.createElement(View, { style: { overflow: "hidden", borderRadius: 1000 } }, props.children);
+    }
+    if (props.rounding) {
+        const rounding = props.rounding === "circle" ? 100 : props.rounding;
+        // Subtract 1 from rounding because of some very odd rendering.
+        return (React.createElement(View, { style: { borderRadius: (rounding - 1) * 4, overflow: "visible" } }, props.children));
+    }
+    else {
+        return props.children || null;
     }
 }
 //# sourceMappingURL=Mask.js.map

package/dist/Mask.js.map

@@ -1 +1 @@
-{"version":3,"file":"Mask.js","sourceRoot":"","sources":["../src/Mask.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,OAAO,IAAK,SAAQ,KAAK,CAAC,SAAwB;IACtD,MAAM;QACJ,wCAAwC;QACxC,4FAA4F;QAC5F,8CAA8C;QAC9C,8FAA8F;QAC9F,IAAI;QACJ,6BAA6B;QAC7B,iFAAiF;QACjF,oEAAoE;QACpE,aAAa;QACb,gFAAgF;QAChF,2CAA2C;QAC3C,iBAAiB;QACjB,OAAO;QACP,WAAW;QACX,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;QAC3B,IAAI;IACN,CAAC;CACF"}
+{"version":3,"file":"Mask.js","sourceRoot":"","sources":["../src/Mask.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,IAAI,EAAC,MAAM,cAAc,CAAC;AAIlC,MAAM,UAAU,IAAI,CAAC,KAAgB;IACnC,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,EAAE;QAC7B,OAAO,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,EAAC,IAAG,KAAK,CAAC,QAAQ,CAAQ,CAAC;KACrF;SAAM,IAAI,KAAK,CAAC,KAAK,KAAK,QAAQ,EAAE;QACnC,OAAO,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,IAAI,EAAC,IAAG,KAAK,CAAC,QAAQ,CAAQ,CAAC;KACvF;IACD,IAAI,KAAK,CAAC,QAAQ,EAAE;QAClB,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC;QACpE,+DAA+D;QAC/D,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAC,YAAY,EAAE,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAC,IAAG,KAAK,CAAC,QAAQ,CAAQ,CAC9F,CAAC;KACH;SAAM;QACL,OAAO,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC;KAC/B;AACH,CAAC"}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./Common";
+export * from "./Avatar";
 export * from "./Banner";
 export * from "./BlurBox";
 export * from "./Body";

package/dist/index.js

@@ -1,4 +1,5 @@
 export * from "./Common";
+export * from "./Avatar";
 export * from "./Banner";
 export * from "./BlurBox";
 export * from "./Body";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,4BAA4B;AAC5B,4BAA4B;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,2BAA2B;AAE3B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,2BAA2B;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,4BAA4B;AAC5B,4BAA4B;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,2BAA2B;AAE3B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,2BAA2B;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferns-ui",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "main": "dist/index.js",
   "license": "Apache-2.0",
   "scripts": {

package/src/Avatar.tsx

@@ -0,0 +1,98 @@
+import React, {useState} from "react";
+import {Image, Text, View} from "react-native";
+
+import {Box} from "./Box";
+import {Unifier} from "./Unifier";
+
+const sizes = {
+  xs: 24,
+  sm: 32,
+  md: 48,
+  lg: 64,
+  xl: 120,
+};
+
+interface AvatarProps {
+  /**
+   * The name of the user. This is used for the placeholder treatment if an image is not available.
+   */
+  name: string;
+  /**
+   * Override the generated initials from `name`.
+   */
+  initials?: string;
+  /**
+   * Adds a white border around Avatar so it's visible when displayed on other images.
+   */
+  outline?: boolean;
+  /**
+   * xs: 24px, sm: 32px, md: 48px, lg: 64px, xl: 120px.
+   */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /**
+   * The URL of the user's image.
+   */
+  src?: string;
+}
+
+export const Avatar = (props: AvatarProps): React.ReactElement => {
+  const [isImageLoaded, setIsImageLoaded] = useState(true);
+  const {name, initials, outline, size = "md", src} = props;
+  const width = sizes[size];
+  const height = sizes[size];
+  const radius = sizes[size] / 2;
+  const fontSize = sizes[size] / 2;
+  const computedInitials =
+    initials ??
+    (name.match(/(^\S\S?|\s\S)?/g) as any)
+      .map((v: string) => v.trim())
+      .join("")
+      .match(/(^\S|\S$)?/g)
+      .join("")
+      .toLocaleUpperCase();
+
+  const handleImageError = () => setIsImageLoaded(false);
+  return (
+    <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.
+        <Image
+          resizeMode="contain"
+          source={{uri: src, cache: "force-cache"}}
+          style={{
+            borderRadius: radius,
+            height,
+            width,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            overflow: "hidden",
+          }}
+          onError={handleImageError}
+        />
+      ) : (
+        <View
+          style={{
+            height,
+            width,
+            borderRadius: radius,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: Unifier.theme.gray,
+          }}
+        >
+          <Text style={{fontSize, color: Unifier.theme.darkGray}}>{computedInitials}</Text>
+        </View>
+      )}
+    </Box>
+  );
+};

package/src/Common.ts

@@ -776,7 +776,7 @@ export interface SpinnerProps {
 }
 
 export interface MaskProps {
-  children?: React.ReactNode;
+  children?: React.ReactElement;
   shape?: "circle" | "rounded" | "square";
   height?: number | string;
   width?: number | string;

package/src/Mask.tsx

@@ -1,24 +1,21 @@
 import React from "react";
+import {View} from "react-native";
 
 import {MaskProps} from "./Common";
 
-export class Mask extends React.Component<MaskProps, {}> {
-  render() {
-    // if (this.props.shape === "rounded") {
-    //   return <Box style={{overflow: "hidden", borderRadius: 12}}>{this.props.children}</Box>;
-    // } else if (this.props.shape === "circle") {
-    //   return <Box style={{overflow: "hidden", borderRadius: 1000}}>{this.props.children}</Box>;
-    // }
-    // if (this.props.rounding) {
-    //   let rounding = this.props.rounding === "circle" ? 100 : this.props.rounding;
-    //   // Subtract 1 from rounding because of some very odd rendering.
-    //   return (
-    //     // <View style={{borderRadius: (rounding - 1) * 4, overflow: "visible"}}>
-    //       <View>{this.props.children}</View>
-    //     // </View>
-    //   );
-    // } else {
-    return this.props.children;
-    // }
+export function Mask(props: MaskProps): React.ReactElement | null {
+  if (props.shape === "rounded") {
+    return <View style={{overflow: "hidden", borderRadius: 12}}>{props.children}</View>;
+  } else if (props.shape === "circle") {
+    return <View style={{overflow: "hidden", borderRadius: 1000}}>{props.children}</View>;
+  }
+  if (props.rounding) {
+    const rounding = props.rounding === "circle" ? 100 : props.rounding;
+    // Subtract 1 from rounding because of some very odd rendering.
+    return (
+      <View style={{borderRadius: (rounding - 1) * 4, overflow: "visible"}}>{props.children}</View>
+    );
+  } else {
+    return props.children || null;
   }
 }

package/src/index.tsx

@@ -1,4 +1,5 @@
 export * from "./Common";
+export * from "./Avatar";
 export * from "./Banner";
 export * from "./BlurBox";
 export * from "./Body";