@lumx/react 3.20.1-alpha.29 → 3.20.1-alpha.30

package/_internal/components/user-block-24d97650.js

@@ -0,0 +1,145 @@
+import React__default from 'react';
+import classNames from 'classnames';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { f as forwardRef } from '../forwardRef-8bce732e.js';
+import { u as useTheme } from '../ThemeContext-3181f000.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Orientation, Size, Theme, ColorPalette } from '@lumx/core/js/constants';
+import { Avatar } from './avatar-ed9f4869.js';
+import { Link } from './link-43ee103e.js';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'UserBlock';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  orientation: Orientation.horizontal,
+  size: Size.m
+};
+
+/**
+ * UserBlock component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const UserBlock = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    avatarProps,
+    className,
+    fields,
+    linkProps,
+    linkAs,
+    multipleActions,
+    name,
+    nameProps,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    orientation = DEFAULT_PROPS.orientation,
+    simpleAction,
+    size = DEFAULT_PROPS.size,
+    theme = defaultTheme,
+    children,
+    additionalFields,
+    after,
+    ...forwardedProps
+  } = props;
+  let componentSize = size;
+
+  // Special case - When using vertical orientation force the size to be Sizes.l.
+  if (orientation === Orientation.vertical) {
+    componentSize = Size.l;
+  }
+  const shouldDisplayActions = orientation === Orientation.vertical;
+  const isLink = Boolean(linkProps?.href || linkAs);
+  const isClickable = !!onClick || isLink;
+  const nameBlock = React__default.useMemo(() => {
+    if (!name) {
+      return null;
+    }
+    let NameComponent = 'span';
+    const nProps = {
+      ...nameProps,
+      className: classNames(`${CLASSNAME}__name`, linkProps?.className, nameProps?.className)
+    };
+    if (isClickable) {
+      NameComponent = Link;
+      Object.assign(nProps, {
+        ...linkProps,
+        onClick,
+        linkAs,
+        color: ColorPalette.dark
+      });
+    }
+    return /*#__PURE__*/jsx(NameComponent, {
+      ...nProps,
+      children: name
+    });
+  }, [isClickable, linkAs, linkProps, name, nameProps, onClick]);
+  const shouldDisplayFields = componentSize !== Size.s && componentSize !== Size.xs;
+  const fieldsBlock = fields && shouldDisplayFields && /*#__PURE__*/jsx("div", {
+    className: `${CLASSNAME}__fields`,
+    children: fields.map((field, idx) => /*#__PURE__*/jsx("span", {
+      className: `${CLASSNAME}__field`,
+      children: field
+    }, idx))
+  });
+  return /*#__PURE__*/jsxs("div", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      orientation,
+      size: componentSize,
+      theme,
+      isClickable
+    })),
+    onMouseLeave: onMouseLeave,
+    onMouseEnter: onMouseEnter,
+    children: [avatarProps && /*#__PURE__*/jsx(Avatar, {
+      linkAs: linkAs,
+      linkProps: linkProps,
+      alt: "",
+      ...avatarProps,
+      className: classNames(`${CLASSNAME}__avatar`, avatarProps.className),
+      size: componentSize,
+      onClick: onClick,
+      theme: theme,
+      thumbnailProps: {
+        ...avatarProps?.thumbnailProps,
+        // Disable avatar focus since the name block is the same link / same button.
+        tabIndex: avatarProps ? -1 : undefined
+      }
+    }), (fields || name || children || additionalFields) && /*#__PURE__*/jsxs("div", {
+      className: `${CLASSNAME}__wrapper`,
+      children: [children || nameBlock, fieldsBlock, shouldDisplayFields ? additionalFields : null]
+    }), shouldDisplayActions && simpleAction && /*#__PURE__*/jsx("div", {
+      className: `${CLASSNAME}__action`,
+      children: simpleAction
+    }), shouldDisplayActions && multipleActions && /*#__PURE__*/jsx("div", {
+      className: `${CLASSNAME}__actions`,
+      children: multipleActions
+    }), after ? /*#__PURE__*/jsx("div", {
+      className: `${CLASSNAME}__after`,
+      children: after
+    }) : null]
+  });
+});
+UserBlock.displayName = COMPONENT_NAME;
+UserBlock.className = CLASSNAME;
+UserBlock.defaultProps = DEFAULT_PROPS;
+
+export { UserBlock };
+//# sourceMappingURL=user-block-24d97650.js.map

package/_internal/components/user-block-24d97650.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"user-block-24d97650.js","sources":["../../../src/components/user-block/UserBlock.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport classNames from 'classnames';\n\nimport { Avatar, ColorPalette, Link, Orientation, Size, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { AvatarProps } from '../avatar/Avatar';\n\n/**\n * User block sizes.\n */\nexport type UserBlockSize = Extract<Size, 'xs' | 's' | 'm' | 'l'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface UserBlockProps extends GenericProps, HasTheme {\n    /** Props to pass to the avatar. */\n    avatarProps?: Omit<AvatarProps, 'alt'>;\n    /** Additional fields used to describe the user. */\n    fields?: string[];\n    /** Props to pass to the link wrapping the avatar thumbnail. */\n    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n    /** Multiple action toolbar content. */\n    multipleActions?: ReactNode;\n    /** User name. */\n    name?: React.ReactNode;\n    /** Props to pass to the name block. */\n    nameProps?: GenericProps;\n    /** Orientation. */\n    orientation?: Orientation;\n    /** Simple action toolbar content. */\n    simpleAction?: ReactNode;\n    /** Size variant. */\n    size?: UserBlockSize;\n    /** On click callback. */\n    onClick?(): void;\n    /** On mouse enter callback. */\n    onMouseEnter?(): void;\n    /** On mouse leave callback. */\n    onMouseLeave?(): void;\n    /** Display additional fields below the original name and fields */\n    additionalFields?: React.ReactNode;\n    /** Display an additional element after the entire component. (to the right if orientation is horizontal, at the bottom if orientation is vertical) */\n    after?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'UserBlock';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<UserBlockProps> = {\n    orientation: Orientation.horizontal,\n    size: Size.m,\n};\n\n/**\n * UserBlock component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const UserBlock = forwardRef<UserBlockProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        avatarProps,\n        className,\n        fields,\n        linkProps,\n        linkAs,\n        multipleActions,\n        name,\n        nameProps,\n        onClick,\n        onMouseEnter,\n        onMouseLeave,\n        orientation = DEFAULT_PROPS.orientation,\n        simpleAction,\n        size = DEFAULT_PROPS.size,\n        theme = defaultTheme,\n        children,\n        additionalFields,\n        after,\n        ...forwardedProps\n    } = props;\n    let componentSize = size;\n\n    // Special case - When using vertical orientation force the size to be Sizes.l.\n    if (orientation === Orientation.vertical) {\n        componentSize = Size.l;\n    }\n\n    const shouldDisplayActions: boolean = orientation === Orientation.vertical;\n\n    const isLink = Boolean(linkProps?.href || linkAs);\n    const isClickable = !!onClick || isLink;\n\n    const nameBlock: ReactNode = React.useMemo(() => {\n        if (!name) {\n            return null;\n        }\n        let NameComponent: any = 'span';\n        const nProps: any = {\n            ...nameProps,\n            className: classNames(`${CLASSNAME}__name`, linkProps?.className, nameProps?.className),\n        };\n        if (isClickable) {\n            NameComponent = Link;\n            Object.assign(nProps, {\n                ...linkProps,\n                onClick,\n                linkAs,\n                color: ColorPalette.dark,\n            });\n        }\n        return <NameComponent {...nProps}>{name}</NameComponent>;\n    }, [isClickable, linkAs, linkProps, name, nameProps, onClick]);\n\n    const shouldDisplayFields = componentSize !== Size.s && componentSize !== Size.xs;\n\n    const fieldsBlock: ReactNode = fields && shouldDisplayFields && (\n        <div className={`${CLASSNAME}__fields`}>\n            {fields.map((field: string, idx: number) => (\n                <span key={idx} className={`${CLASSNAME}__field`}>\n                    {field}\n                </span>\n            ))}\n        </div>\n    );\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({ prefix: CLASSNAME, orientation, size: componentSize, theme, isClickable }),\n            )}\n            onMouseLeave={onMouseLeave}\n            onMouseEnter={onMouseEnter}\n        >\n            {avatarProps && (\n                <Avatar\n                    linkAs={linkAs}\n                    linkProps={linkProps}\n                    alt=\"\"\n                    {...(avatarProps as any)}\n                    className={classNames(`${CLASSNAME}__avatar`, avatarProps.className)}\n                    size={componentSize}\n                    onClick={onClick}\n                    theme={theme}\n                    thumbnailProps={{\n                        ...avatarProps?.thumbnailProps,\n                        // Disable avatar focus since the name block is the same link / same button.\n                        tabIndex: avatarProps ? -1 : undefined,\n                    }}\n                />\n            )}\n            {(fields || name || children || additionalFields) && (\n                <div className={`${CLASSNAME}__wrapper`}>\n                    {children || nameBlock}\n                    {fieldsBlock}\n                    {shouldDisplayFields ? additionalFields : null}\n                </div>\n            )}\n            {shouldDisplayActions && simpleAction && <div className={`${CLASSNAME}__action`}>{simpleAction}</div>}\n            {shouldDisplayActions && multipleActions && (\n                <div className={`${CLASSNAME}__actions`}>{multipleActions}</div>\n            )}\n            {after ? <div className={`${CLASSNAME}__after`}>{after}</div> : null}\n        </div>\n    );\n});\nUserBlock.displayName = COMPONENT_NAME;\nUserBlock.className = CLASSNAME;\nUserBlock.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","orientation","Orientation","horizontal","size","Size","m","UserBlock","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","avatarProps","className","fields","linkProps","linkAs","multipleActions","name","nameProps","onClick","onMouseEnter","onMouseLeave","simpleAction","theme","children","additionalFields","after","forwardedProps","componentSize","vertical","l","shouldDisplayActions","isLink","Boolean","href","isClickable","nameBlock","React","useMemo","NameComponent","nProps","classNames","Link","Object","assign","color","ColorPalette","dark","_jsx","shouldDisplayFields","s","xs","fieldsBlock","map","field","idx","_jsxs","handleBasicClasses","prefix","Avatar","alt","thumbnailProps","tabIndex","undefined","displayName","defaultProps"],"mappings":"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"}