@itwin/itwinui-react/esm/core/Tile/Tile.js

A react component library for iTwinUI

import * as React from 'react';
import cx from 'classnames';
import {
  StatusIconMap,
  SvgMore,
  SvgNew,
  SvgCheckmark,
  useSafeContext,
  supportsHas,
  polymorphic,
  Box,
} from '../../utils/index.js';
import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
import { IconButton } from '../Buttons/IconButton.js';
import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
import { LinkAction } from '../LinkAction/LinkAction.js';
let TileContext = React.createContext(void 0);
if ('development' === process.env.NODE_ENV)
  TileContext.displayName = 'TileContext';
let TileWrapper = React.forwardRef((props, forwardedRef) => {
  let {
    className,
    status,
    variant,
    isNew,
    isSelected,
    isLoading,
    isDisabled,
    ...rest
  } = props;
  let [localActionable, setLocalActionable] = React.useState(false);
  let isActionable = localActionable;
  return React.createElement(
    TileContext.Provider,
    {
      value: {
        status,
        variant,
        isNew,
        isSelected,
        isLoading,
        isActionable,
        isDisabled,
        setActionable: setLocalActionable,
      },
    },
    React.createElement(Box, {
      className: cx(
        'iui-tile',
        {
          'iui-folder': 'folder' === variant,
          'iui-new': isNew,
          'iui-selected': isSelected,
          'iui-actionable': isActionable,
          [`iui-${status}`]: !!status,
          'iui-loading': isLoading,
        },
        className,
      ),
      'aria-disabled': isDisabled,
      ref: forwardedRef,
      ...rest,
    }),
  );
});
if ('development' === process.env.NODE_ENV)
  TileWrapper.displayName = 'Tile.Wrapper';
let TileAction = React.forwardRef((props, forwardedRef) => {
  let { onClick, children, href, ...rest } = props;
  let { setActionable, isDisabled } = useSafeContext(TileContext);
  React.useEffect(() => {
    if (!supportsHas()) setActionable(true);
  }, [setActionable]);
  return React.createElement(
    LinkAction,
    {
      as: props.href ? 'a' : 'button',
      href: href,
      onClick: isDisabled ? void 0 : onClick,
      'aria-disabled': isDisabled,
      ref: forwardedRef,
      ...rest,
    },
    children,
  );
});
if ('development' === process.env.NODE_ENV)
  TileAction.displayName = 'Tile.Action';
let TileThumbnailArea = polymorphic.div('iui-tile-thumbnail');
if ('development' === process.env.NODE_ENV)
  TileThumbnailArea.displayName = 'Tile.ThumbnailArea';
let TileThumbnailPicture = React.forwardRef((props, forwardedRef) => {
  let { className, url, children, ...rest } = props;
  if (url)
    return React.createElement(Box, {
      className: cx('iui-tile-thumbnail-picture', className),
      style: {
        backgroundImage: 'string' == typeof url ? `url(${url})` : void 0,
      },
      ref: forwardedRef,
      ...rest,
    });
  return React.createElement(
    Box,
    {
      className: cx('iui-thumbnail-icon', className),
      ref: forwardedRef,
      ...rest,
    },
    children,
  );
});
if ('development' === process.env.NODE_ENV)
  TileThumbnailPicture.displayName = 'Tile.TileThumbnailPicture';
let TileQuickAction = polymorphic.div('iui-tile-thumbnail-quick-action');
if ('development' === process.env.NODE_ENV)
  TileQuickAction.displayName = 'Tile.QuickAction';
let TileTypeIndicator = polymorphic.div('iui-tile-thumbnail-type-indicator');
if ('development' === process.env.NODE_ENV)
  TileTypeIndicator.displayName = 'Tile.TypeIndicator';
let TileIconButton = React.forwardRef((props, forwardedRef) => {
  let { className, children, ...rest } = props;
  return React.createElement(
    IconButton,
    {
      className: cx('iui-tile-thumbnail-button', className),
      styleType: 'borderless',
      size: 'small',
      ref: forwardedRef,
      ...rest,
    },
    children,
  );
});
if ('development' === process.env.NODE_ENV)
  TileIconButton.displayName = 'Tile.IconButton';
let TileBadgeContainer = polymorphic.div('iui-tile-thumbnail-badge-container');
if ('development' === process.env.NODE_ENV)
  TileBadgeContainer.displayName = 'Tile.BadgeContainer';
let TileName = React.forwardRef((props, forwardedRef) => {
  let { className, children, name, ...rest } = props;
  return React.createElement(
    Box,
    {
      className: cx('iui-tile-name', className),
      ref: forwardedRef,
      ...rest,
    },
    children ?? React.createElement(Tile.NameLabel, null, name),
  );
});
if ('development' === process.env.NODE_ENV)
  TileBadgeContainer.displayName = 'Tile.Name';
let TileNameIcon = React.forwardRef((props, forwardedRef) => {
  let { children, className, ...rest } = props;
  let { status, isLoading, isSelected, isNew } = useSafeContext(TileContext);
  let StatusIcon = !!status && StatusIconMap[status];
  let icon;
  if (StatusIcon)
    icon = React.createElement(StatusIcon, {
      'aria-hidden': true,
    });
  if (isLoading)
    icon = React.createElement(ProgressRadial, {
      size: 'x-small',
      'aria-hidden': true,
      indeterminate: true,
    });
  if (isSelected)
    icon = React.createElement(SvgCheckmark, {
      'aria-hidden': true,
    });
  if (isNew)
    icon = React.createElement(SvgNew, {
      'aria-hidden': true,
    });
  return children || icon
    ? React.createElement(
        Box,
        {
          className: cx('iui-tile-status-icon', className),
          ref: forwardedRef,
          ...rest,
        },
        children ?? icon,
      )
    : null;
});
if ('development' === process.env.NODE_ENV)
  TileNameIcon.displayName = 'Tile.NameIcon';
let TileNameLabel = polymorphic.span('iui-tile-name-label');
if ('development' === process.env.NODE_ENV)
  TileNameLabel.displayName = 'Tile.NameLabel';
let TileContentArea = polymorphic.div('iui-tile-content');
if ('development' === process.env.NODE_ENV)
  TileContentArea.displayName = 'Tile.ContentArea';
let TileDescription = polymorphic.div('iui-tile-description');
if ('development' === process.env.NODE_ENV)
  TileDescription.displayName = 'Tile.Description';
let TileMetadata = polymorphic.div('iui-tile-metadata');
if ('development' === process.env.NODE_ENV)
  TileMetadata.displayName = 'Tile.Metadata';
let TileMoreOptions = React.forwardRef((props, forwardedRef) => {
  let { className, children = [], buttonProps, ...rest } = props;
  let [isMenuVisible, setIsMenuVisible] = React.useState(false);
  return React.createElement(
    Box,
    {
      className: cx(
        'iui-tile-more-options',
        {
          'iui-visible': isMenuVisible,
        },
        className,
      ),
      ref: forwardedRef,
      ...rest,
    },
    React.createElement(
      DropdownMenu,
      {
        onVisibleChange: setIsMenuVisible,
        menuItems: children,
        closeOnItemClick: true,
      },
      React.createElement(
        IconButton,
        {
          styleType: 'borderless',
          size: 'small',
          'aria-label': 'More options',
          ...buttonProps,
        },
        React.createElement(SvgMore, null),
      ),
    ),
  );
});
if ('development' === process.env.NODE_ENV)
  TileMoreOptions.displayName = 'Tile.MoreOptions';
let TileButtons = polymorphic.div('iui-tile-buttons');
if ('development' === process.env.NODE_ENV)
  TileButtons.displayName = 'Tile.Buttons';
let TileComponent = React.forwardRef((props, forwardedRef) => {
  let {
    name,
    description,
    status,
    isNew,
    isLoading,
    isSelected,
    thumbnail,
    badge,
    leftIcon,
    rightIcon,
    buttons,
    metadata,
    moreOptions,
    children,
    isActionable,
    isDisabled,
    onClick,
    ...rest
  } = props;
  return React.createElement(
    TileWrapper,
    {
      ref: forwardedRef,
      isNew: isNew,
      isSelected: isSelected,
      isLoading: isLoading,
      status: status,
      isDisabled: isDisabled,
      ...rest,
    },
    React.createElement(
      TileName,
      null,
      (status || isNew || isLoading || isSelected) &&
        React.createElement(TileNameIcon, null),
      React.createElement(
        TileNameLabel,
        null,
        isActionable
          ? React.createElement(
              TileAction,
              {
                onClick: isDisabled ? void 0 : onClick,
                'aria-disabled': isDisabled,
              },
              name,
            )
          : name,
      ),
    ),
    thumbnail &&
      React.createElement(
        TileThumbnailArea,
        null,
        'string' != typeof thumbnail
          ? React.createElement(TileThumbnailPicture, null, thumbnail)
          : React.createElement(TileThumbnailPicture, {
              url: thumbnail,
            }),
        badge && React.createElement(TileBadgeContainer, null, badge),
        leftIcon && React.createElement(TileTypeIndicator, null, leftIcon),
        rightIcon && React.createElement(TileQuickAction, null, rightIcon),
      ),
    React.createElement(
      TileContentArea,
      null,
      description && React.createElement(TileDescription, null, description),
      moreOptions && React.createElement(TileMoreOptions, null, moreOptions),
      metadata && React.createElement(TileMetadata, null, metadata),
      children,
    ),
    buttons && React.createElement(TileButtons, null, buttons),
  );
});
if ('development' === process.env.NODE_ENV) TileComponent.displayName = 'Tile';
export const Tile = Object.assign(TileComponent, {
  Wrapper: TileWrapper,
  ThumbnailArea: TileThumbnailArea,
  ThumbnailPicture: TileThumbnailPicture,
  QuickAction: TileQuickAction,
  TypeIndicator: TileTypeIndicator,
  BadgeContainer: TileBadgeContainer,
  IconButton: TileIconButton,
  Name: TileName,
  NameIcon: TileNameIcon,
  NameLabel: TileNameLabel,
  Action: TileAction,
  ContentArea: TileContentArea,
  Description: TileDescription,
  Metadata: TileMetadata,
  MoreOptions: TileMoreOptions,
  Buttons: TileButtons,
});