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

A react component library for iTwinUI

'use strict';
Object.defineProperty(exports, '__esModule', {
  value: true,
});
Object.defineProperty(exports, 'Tile', {
  enumerable: true,
  get: function () {
    return Tile;
  },
});
const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
const _classnames = /*#__PURE__*/ _interop_require_default._(
  require('classnames'),
);
const _index = require('../../utils/index.js');
const _DropdownMenu = require('../DropdownMenu/DropdownMenu.js');
const _IconButton = require('../Buttons/IconButton.js');
const _ProgressRadial = require('../ProgressIndicators/ProgressRadial.js');
const _LinkAction = require('../LinkAction/LinkAction.js');
const TileContext = _react.createContext(void 0);
if ('development' === process.env.NODE_ENV)
  TileContext.displayName = 'TileContext';
const 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(_index.Box, {
      className: (0, _classnames.default)(
        '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';
const TileAction = _react.forwardRef((props, forwardedRef) => {
  let { onClick, children, href, ...rest } = props;
  let { setActionable, isDisabled } = (0, _index.useSafeContext)(TileContext);
  _react.useEffect(() => {
    if (!(0, _index.supportsHas)()) setActionable(true);
  }, [setActionable]);
  return _react.createElement(
    _LinkAction.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';
const TileThumbnailArea = _index.polymorphic.div('iui-tile-thumbnail');
if ('development' === process.env.NODE_ENV)
  TileThumbnailArea.displayName = 'Tile.ThumbnailArea';
const TileThumbnailPicture = _react.forwardRef((props, forwardedRef) => {
  let { className, url, children, ...rest } = props;
  if (url)
    return _react.createElement(_index.Box, {
      className: (0, _classnames.default)(
        'iui-tile-thumbnail-picture',
        className,
      ),
      style: {
        backgroundImage: 'string' == typeof url ? `url(${url})` : void 0,
      },
      ref: forwardedRef,
      ...rest,
    });
  return _react.createElement(
    _index.Box,
    {
      className: (0, _classnames.default)('iui-thumbnail-icon', className),
      ref: forwardedRef,
      ...rest,
    },
    children,
  );
});
if ('development' === process.env.NODE_ENV)
  TileThumbnailPicture.displayName = 'Tile.TileThumbnailPicture';
const TileQuickAction = _index.polymorphic.div(
  'iui-tile-thumbnail-quick-action',
);
if ('development' === process.env.NODE_ENV)
  TileQuickAction.displayName = 'Tile.QuickAction';
const TileTypeIndicator = _index.polymorphic.div(
  'iui-tile-thumbnail-type-indicator',
);
if ('development' === process.env.NODE_ENV)
  TileTypeIndicator.displayName = 'Tile.TypeIndicator';
const TileIconButton = _react.forwardRef((props, forwardedRef) => {
  let { className, children, ...rest } = props;
  return _react.createElement(
    _IconButton.IconButton,
    {
      className: (0, _classnames.default)(
        'iui-tile-thumbnail-button',
        className,
      ),
      styleType: 'borderless',
      size: 'small',
      ref: forwardedRef,
      ...rest,
    },
    children,
  );
});
if ('development' === process.env.NODE_ENV)
  TileIconButton.displayName = 'Tile.IconButton';
const TileBadgeContainer = _index.polymorphic.div(
  'iui-tile-thumbnail-badge-container',
);
if ('development' === process.env.NODE_ENV)
  TileBadgeContainer.displayName = 'Tile.BadgeContainer';
const TileName = _react.forwardRef((props, forwardedRef) => {
  let { className, children, name, ...rest } = props;
  return _react.createElement(
    _index.Box,
    {
      className: (0, _classnames.default)('iui-tile-name', className),
      ref: forwardedRef,
      ...rest,
    },
    children ?? _react.createElement(Tile.NameLabel, null, name),
  );
});
if ('development' === process.env.NODE_ENV)
  TileBadgeContainer.displayName = 'Tile.Name';
const TileNameIcon = _react.forwardRef((props, forwardedRef) => {
  let { children, className, ...rest } = props;
  let { status, isLoading, isSelected, isNew } = (0, _index.useSafeContext)(
    TileContext,
  );
  let StatusIcon = !!status && _index.StatusIconMap[status];
  let icon;
  if (StatusIcon)
    icon = _react.createElement(StatusIcon, {
      'aria-hidden': true,
    });
  if (isLoading)
    icon = _react.createElement(_ProgressRadial.ProgressRadial, {
      size: 'x-small',
      'aria-hidden': true,
      indeterminate: true,
    });
  if (isSelected)
    icon = _react.createElement(_index.SvgCheckmark, {
      'aria-hidden': true,
    });
  if (isNew)
    icon = _react.createElement(_index.SvgNew, {
      'aria-hidden': true,
    });
  return children || icon
    ? _react.createElement(
        _index.Box,
        {
          className: (0, _classnames.default)(
            'iui-tile-status-icon',
            className,
          ),
          ref: forwardedRef,
          ...rest,
        },
        children ?? icon,
      )
    : null;
});
if ('development' === process.env.NODE_ENV)
  TileNameIcon.displayName = 'Tile.NameIcon';
const TileNameLabel = _index.polymorphic.span('iui-tile-name-label');
if ('development' === process.env.NODE_ENV)
  TileNameLabel.displayName = 'Tile.NameLabel';
const TileContentArea = _index.polymorphic.div('iui-tile-content');
if ('development' === process.env.NODE_ENV)
  TileContentArea.displayName = 'Tile.ContentArea';
const TileDescription = _index.polymorphic.div('iui-tile-description');
if ('development' === process.env.NODE_ENV)
  TileDescription.displayName = 'Tile.Description';
const TileMetadata = _index.polymorphic.div('iui-tile-metadata');
if ('development' === process.env.NODE_ENV)
  TileMetadata.displayName = 'Tile.Metadata';
const TileMoreOptions = _react.forwardRef((props, forwardedRef) => {
  let { className, children = [], buttonProps, ...rest } = props;
  let [isMenuVisible, setIsMenuVisible] = _react.useState(false);
  return _react.createElement(
    _index.Box,
    {
      className: (0, _classnames.default)(
        'iui-tile-more-options',
        {
          'iui-visible': isMenuVisible,
        },
        className,
      ),
      ref: forwardedRef,
      ...rest,
    },
    _react.createElement(
      _DropdownMenu.DropdownMenu,
      {
        onVisibleChange: setIsMenuVisible,
        menuItems: children,
        closeOnItemClick: true,
      },
      _react.createElement(
        _IconButton.IconButton,
        {
          styleType: 'borderless',
          size: 'small',
          'aria-label': 'More options',
          ...buttonProps,
        },
        _react.createElement(_index.SvgMore, null),
      ),
    ),
  );
});
if ('development' === process.env.NODE_ENV)
  TileMoreOptions.displayName = 'Tile.MoreOptions';
const TileButtons = _index.polymorphic.div('iui-tile-buttons');
if ('development' === process.env.NODE_ENV)
  TileButtons.displayName = 'Tile.Buttons';
const 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';
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,
});