@talend/react-components/lib-esm/ListView/ListView.component.js

Set of react components.

import PropTypes from 'prop-types';
import classNames from 'classnames';
import { useTranslation } from 'react-i18next';
import I18N_DOMAIN_COMPONENTS from '../constants';
import Header from './Header/Header.component';
import HeaderInput from './Header/HeaderInput.component';
import Items from './Items/Items.component';
import theme from './ListView.module.scss';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const DISPLAY_MODE_DEFAULT = 'DISPLAY_MODE_DEFAULT';
const DISPLAY_MODE_SEARCH = 'DISPLAY_MODE_SEARCH';
function listviewClasses() {
  return classNames(theme['tc-listview'], 'tc-listview');
}
function HeaderListView(props) {
  const {
    displayMode,
    onInputChange,
    onAddKeyDown,
    headerInput,
    headerDefault,
    headerLabel,
    labelProps,
    items,
    required,
    searchPlaceholder
  } = props;
  switch (displayMode) {
    case DISPLAY_MODE_SEARCH:
      {
        const propsInput = {
          headerInput,
          onInputChange,
          onAddKeyDown,
          inputPlaceholder: searchPlaceholder
        };
        return /*#__PURE__*/_jsx(HeaderInput, {
          ...propsInput
        });
      }
    default:
      {
        const propsDefault = {
          headerDefault,
          headerLabel,
          labelProps,
          required,
          nbItems: items.length,
          nbItemsSelected: items.filter(item => !!item.checked).length
        };
        return /*#__PURE__*/_jsx(Header, {
          ...propsDefault
        });
      }
  }
}
function ListView(props) {
  const {
    t
  } = useTranslation(I18N_DOMAIN_COMPONENTS);
  const noResultLabel = t('NO_RESULT_FOUND', {
    defaultValue: 'No results found'
  });
  const emptyLabel = t('LISTVIEW_EMPTY', {
    defaultValue: 'This list is empty.'
  });
  const label = props.displayMode === DISPLAY_MODE_SEARCH ? noResultLabel : emptyLabel;
  return /*#__PURE__*/_jsxs("div", {
    className: listviewClasses(),
    children: [/*#__PURE__*/_jsx(HeaderListView, {
      ...props
    }), props.items.length ? /*#__PURE__*/_jsx(Items, {
      ...props
    }) : /*#__PURE__*/_jsx("span", {
      className: theme['empty-message'],
      children: label
    })]
  });
}
ListView.DISPLAY_MODES = {
  DISPLAY_MODE_DEFAULT,
  DISPLAY_MODE_SEARCH
};
ListView.displayName = 'ListView';
ListView.propTypes = {
  displayMode: PropTypes.oneOf(Object.values(ListView.DISPLAY_MODES)),
  items: PropTypes.arrayOf(PropTypes.object)
};
ListView.defaultProps = {
  items: []
};
HeaderListView.defaultProps = {
  displayMode: DISPLAY_MODE_DEFAULT
};
HeaderListView.propTypes = {
  displayMode: PropTypes.oneOf(Object.values(ListView.DISPLAY_MODES)),
  headerDefault: PropTypes.arrayOf(PropTypes.object),
  headerInput: PropTypes.arrayOf(PropTypes.object),
  headerLabel: PropTypes.string,
  labelProps: PropTypes.object,
  items: ListView.propTypes.items,
  onInputChange: PropTypes.func,
  onAddKeyDown: PropTypes.func,
  required: PropTypes.bool,
  searchPlaceholder: PropTypes.string
};
export default ListView;
//# sourceMappingURL=ListView.component.js.map