ncore-ui-kit 1.0.0-alpha.0

package/lib/module/components/avatarGroup/index.js

@@ -0,0 +1,133 @@
+"use strict";
+
+import { Fragment } from "react";
+import { TouchableOpacity, View } from "react-native";
+import stylesheet, { getAvatarGroupSize, useStyles } from "./stylesheet.js";
+import { NCoreUIKitTheme } from "../../core/hooks.js";
+import { UserRound as UserRoundIcon } from "lucide-react-native";
+import Loading from "../loading/index.js";
+import Avatar from "../avatar/index.js";
+import Text from "../text/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AvatarGroup = ({
+  titleAbbreviationType = "first-last",
+  isShowStatusIndicatorSplicer = true,
+  avatarBackgroundColor = "default",
+  isStatusIndicator,
+  isWorkWithAction,
+  size = "medium",
+  borderColor,
+  customTheme,
+  isDisabled,
+  imageProps,
+  isLoading,
+  avatars,
+  onPress,
+  style
+}) => {
+  const {
+    borders,
+    colors
+  } = NCoreUIKitTheme.useContext(customTheme);
+  const currentSize = getAvatarGroupSize({
+    size
+  });
+  const currentAvatars = avatars && avatars.length > 2 ? avatars?.slice(0, 2) : avatars;
+  const {
+    moreAvatarsContainer: moreAvatarsContainerDynamicStyle,
+    iconContainer: iconContainerDynamicStyle,
+    container: containerDynamicStyle,
+    avatar: avatarDynamicStyle,
+    icon: iconDynamicStyle
+  } = useStyles({
+    avatarBackgroundColor,
+    currentSize,
+    borderColor,
+    isDisabled,
+    isLoading,
+    avatars,
+    borders,
+    colors
+  });
+  const renderIcon = () => {
+    if (isLoading) {
+      return renderLoading();
+    }
+    return /*#__PURE__*/_jsx(UserRoundIcon, {
+      color: colors.content.icon.default,
+      size: currentSize.iconSize,
+      style: {
+        ...iconDynamicStyle
+      }
+    });
+  };
+  const renderLoading = () => {
+    return /*#__PURE__*/_jsx(Loading, {
+      color: "default"
+    });
+  };
+  const renderAvatars = () => {
+    if (!currentAvatars || !currentAvatars.length) {
+      return null;
+    }
+    return currentAvatars.map((avatarItem, avatarIndex) => {
+      return /*#__PURE__*/_jsx(Avatar, {
+        ...avatarItem,
+        isShowStatusIndicatorSplicer: isShowStatusIndicatorSplicer,
+        titleAbbreviationType: titleAbbreviationType,
+        avatarBackgroundColor: avatarBackgroundColor,
+        isStatusIndicator: isStatusIndicator,
+        isWorkWithAction: undefined,
+        borderColor: borderColor,
+        customTheme: customTheme,
+        imageProps: imageProps,
+        isShowBorder: true,
+        onPress: undefined,
+        isDisabled: false,
+        isLoading: false,
+        size: size,
+        style: {
+          ...avatarDynamicStyle,
+          ...avatarItem.style,
+          transform: [{
+            translateX: avatarIndex === 0 ? currentSize.size / 3 : 0
+          }]
+        }
+      });
+    });
+  };
+  const renderMoreAvatars = () => {
+    if (!avatars) {
+      return null;
+    }
+    if (avatars.length < 3) {
+      return null;
+    }
+    return /*#__PURE__*/_jsx(View, {
+      style: [stylesheet.moreAvatarsContainer, moreAvatarsContainerDynamicStyle],
+      children: /*#__PURE__*/_jsxs(Text, {
+        variant: "labelLargeSize",
+        color: "mid",
+        children: ["+", avatars.length - 2]
+      })
+    });
+  };
+  const renderContent = () => {
+    return /*#__PURE__*/_jsxs(Fragment, {
+      children: [renderAvatars(), /*#__PURE__*/_jsx(View, {
+        style: [stylesheet.iconContainer, iconContainerDynamicStyle],
+        children: renderIcon()
+      }), renderMoreAvatars()]
+    });
+  };
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    disabled: !isWorkWithAction || isDisabled || isLoading,
+    onPress: !isWorkWithAction || isDisabled || isLoading ? undefined : () => {
+      if (onPress) onPress();
+    },
+    style: [style, stylesheet.container, containerDynamicStyle],
+    children: renderContent()
+  });
+};
+export default AvatarGroup;
+//# sourceMappingURL=index.js.map

package/lib/module/components/avatarGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Fragment","TouchableOpacity","View","stylesheet","getAvatarGroupSize","useStyles","NCoreUIKitTheme","UserRound","UserRoundIcon","Loading","Avatar","Text","jsx","_jsx","jsxs","_jsxs","AvatarGroup","titleAbbreviationType","isShowStatusIndicatorSplicer","avatarBackgroundColor","isStatusIndicator","isWorkWithAction","size","borderColor","customTheme","isDisabled","imageProps","isLoading","avatars","onPress","style","borders","colors","useContext","currentSize","currentAvatars","length","slice","moreAvatarsContainer","moreAvatarsContainerDynamicStyle","iconContainer","iconContainerDynamicStyle","container","containerDynamicStyle","avatar","avatarDynamicStyle","icon","iconDynamicStyle","renderIcon","renderLoading","color","content","default","iconSize","renderAvatars","map","avatarItem","avatarIndex","undefined","isShowBorder","transform","translateX","renderMoreAvatars","children","variant","renderContent","disabled"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/avatarGroup/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/avatarGroup/stylesheet.js

@@ -0,0 +1,117 @@
+"use strict";
+
+import { StyleSheet } from "react-native";
+export const AVATAR_GROUP_SIZES = {
+  xxSmall: {
+    fontSize: "labelSmallSize",
+    iconSize: 14,
+    size: 24
+  },
+  xSmall: {
+    fontSize: "labelMediumSize",
+    iconSize: 18,
+    size: 32
+  },
+  small: {
+    fontSize: "labelLargeSize",
+    iconSize: 22,
+    size: 40
+  },
+  medium: {
+    fontSize: "bodyLargeSize",
+    iconSize: 26,
+    size: 48
+  },
+  large: {
+    fontSize: "headlineSmallSize",
+    iconSize: 32,
+    size: 64
+  },
+  xLarge: {
+    fontSize: "headlineMediumSize",
+    iconSize: 40,
+    size: 80
+  },
+  xxLarge: {
+    fontSize: "displaySmallSize",
+    iconSize: 60,
+    size: 120
+  },
+  xxxLarge: {
+    fontSize: "displayMediumSize",
+    iconSize: 76,
+    size: 150
+  }
+};
+export const getAvatarGroupSize = ({
+  size
+}) => {
+  const currentSize = AVATAR_GROUP_SIZES[size];
+  return {
+    fontSize: currentSize.fontSize,
+    iconSize: currentSize.iconSize,
+    size: currentSize.size
+  };
+};
+const stylesheet = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    position: "relative"
+  },
+  iconContainer: {
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  icon: {},
+  moreAvatarsContainer: {
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});
+export const useStyles = ({
+  avatarBackgroundColor,
+  currentSize,
+  borderColor,
+  isDisabled,
+  isLoading,
+  avatars,
+  borders,
+  colors
+}) => {
+  const styles = {
+    container: {},
+    iconContainer: {
+      borderColor: borderColor ? borderColor === "transparent" ? "transparent" : colors.content.border[borderColor] : avatarBackgroundColor ? colors.content.container[avatarBackgroundColor] : colors.content.container.default,
+      transform: [{
+        translateX: avatars && avatars.length === 1 ? 0 : currentSize.size / 3 * -1
+      }],
+      backgroundColor: colors.content.container.subtle,
+      borderRadius: currentSize.size / 2,
+      borderWidth: borders.subtract,
+      height: currentSize.size,
+      width: currentSize.size
+    },
+    icon: {},
+    moreAvatarsContainer: {
+      borderColor: borderColor ? borderColor === "transparent" ? "transparent" : colors.content.border[borderColor] : avatarBackgroundColor ? colors.content.container[avatarBackgroundColor] : colors.content.container.default,
+      backgroundColor: colors.content.container.subtle,
+      transform: [{
+        translateX: currentSize.size / 1.5 * -1
+      }],
+      borderRadius: currentSize.size / 2,
+      borderWidth: borders.subtract,
+      height: currentSize.size,
+      width: currentSize.size
+    },
+    avatar: {}
+  };
+  if (isDisabled) {
+    styles.container.opacity = 0.33;
+  }
+  if (isLoading) {
+    styles.container.opacity = 0.33;
+  }
+  return styles;
+};
+export default stylesheet;
+//# sourceMappingURL=stylesheet.js.map

package/lib/module/components/avatarGroup/stylesheet.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","AVATAR_GROUP_SIZES","xxSmall","fontSize","iconSize","size","xSmall","small","medium","large","xLarge","xxLarge","xxxLarge","getAvatarGroupSize","currentSize","stylesheet","create","container","flexDirection","position","iconContainer","justifyContent","alignItems","icon","moreAvatarsContainer","useStyles","avatarBackgroundColor","borderColor","isDisabled","isLoading","avatars","borders","colors","styles","content","border","default","transform","translateX","length","backgroundColor","subtle","borderRadius","borderWidth","subtract","height","width","avatar","opacity"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/avatarGroup/stylesheet.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/components/avatarGroup/type.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=type.js.map

package/lib/module/components/avatarGroup/type.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/avatarGroup/type.ts"],"mappings":"","ignoreList":[]}