@talend/react-components/lib-esm/ResourceList/Resource/Resource.component.js

Set of react components.

import { Fragment } from 'react';
import { withTranslation } from 'react-i18next';
import classNames from 'classnames';
import { formatDistanceToNow } from 'date-fns/formatDistanceToNow';
import PropTypes from 'prop-types';
import I18N_DOMAIN_COMPONENTS from '../../constants';
import getLocale from '../../i18n/DateFnsLocale/locale';
import Icon from '../../Icon';
import getDefaultT from '../../translate';
import { getRowData } from '../../VirtualizedList/utils/gridrow';
import theme from './Resource.module.scss';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const FLAGS = {
  CERTIFIED: 'talend-badge',
  FAVORITE: 'talend-star'
};
function getDateLabel(t, date) {
  return formatDistanceToNow(new Date(date), {
    addSuffix: true,
    locale: getLocale(t)
  });
}
function getAuthorLabel(t, author, date) {
  return t('RESOURCE_OWNED_BY', {
    defaultValue: 'owned by {{ author }}, {{date}}',
    author,
    date: getDateLabel(t, date)
  });
}
function Resource({
  parent,
  index,
  style,
  className,
  as,
  t,
  ...rest
}) {
  const rowData = getRowData(parent, index);
  if (!rowData) {
    return null;
  }
  let onRowClick;
  const {
    icon,
    name,
    author,
    modified,
    flags = [],
    subtitle
  } = rowData;
  if (parent.props.onRowClick) {
    onRowClick = event => parent.props.onRowClick({
      event,
      rowData
    });
  }
  function hasPropRender() {
    return typeof as === 'function';
  }
  return (
    /*#__PURE__*/
    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
    _jsx("div", {
      className: classNames('resource-item', theme['resource-item'], {
        [theme.center]: !hasPropRender()
      }, className),
      style: style,
      role: "listitem",
      tabIndex: "0",
      "aria-posinset": index + 1,
      "aria-setsize": parent.props.rowCount,
      "aria-label": name,
      onClick: onRowClick,
      ...rest,
      children: hasPropRender() ? as(rowData) : /*#__PURE__*/_jsxs(Fragment, {
        children: [icon && /*#__PURE__*/_jsx(Icon, {
          className: theme.icon,
          name: icon
        }), /*#__PURE__*/_jsxs("div", {
          className: classNames('data-container', theme['data-container']),
          children: [/*#__PURE__*/_jsx("span", {
            className: classNames('title', theme.title),
            children: name
          }), author && subtitle === undefined && /*#__PURE__*/_jsx("small", {
            className: classNames('author', theme.author),
            children: getAuthorLabel(t, author, modified)
          }), subtitle !== undefined && !author && /*#__PURE__*/_jsx("small", {
            className: classNames('subtitle', theme.subtitle),
            title: subtitle,
            children: subtitle
          })]
        }), /*#__PURE__*/_jsx("div", {
          className: classNames('flags-container', theme['flags-container']),
          children: Object.keys(FLAGS).map((flag, flagIndex) => /*#__PURE__*/_jsx(Icon, {
            className: classNames(theme.flag, {
              [theme.visible]: flags.includes(flag)
            }),
            name: FLAGS[flag]
          }, flagIndex))
        })]
      })
    })
  );
}
Resource.defaultProps = {
  t: getDefaultT()
};
Resource.propTypes = {
  index: PropTypes.number,
  style: PropTypes.object,
  t: PropTypes.func,
  className: PropTypes.string,
  parent: PropTypes.shape({
    props: PropTypes.shape({
      onRowClick: PropTypes.func,
      collection: PropTypes.arrayOf(PropTypes.shape({
        icon: PropTypes.string,
        name: PropTypes.string,
        author: PropTypes.string,
        subtitle: PropTypes.string,
        modified: PropTypes.string,
        flags: PropTypes.arrayOf(PropTypes.string)
      }))
    })
  }),
  as: PropTypes.func
};
export default withTranslation(I18N_DOMAIN_COMPONENTS)(Resource);
//# sourceMappingURL=Resource.component.js.map