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

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _reactI18next = require("react-i18next");
var _constants = _interopRequireDefault(require("../constants"));
var _Header = _interopRequireDefault(require("./Header/Header.component"));
var _HeaderInput = _interopRequireDefault(require("./Header/HeaderInput.component"));
var _Items = _interopRequireDefault(require("./Items/Items.component"));
var _ListViewModule = _interopRequireDefault(require("./ListView.module.scss"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const DISPLAY_MODE_DEFAULT = 'DISPLAY_MODE_DEFAULT';
const DISPLAY_MODE_SEARCH = 'DISPLAY_MODE_SEARCH';
function listviewClasses() {
  return (0, _classnames.default)(_ListViewModule.default['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__*/(0, _jsxRuntime.jsx)(_HeaderInput.default, {
          ...propsInput
        });
      }
    default:
      {
        const propsDefault = {
          headerDefault,
          headerLabel,
          labelProps,
          required,
          nbItems: items.length,
          nbItemsSelected: items.filter(item => !!item.checked).length
        };
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header.default, {
          ...propsDefault
        });
      }
  }
}
function ListView(props) {
  const {
    t
  } = (0, _reactI18next.useTranslation)(_constants.default);
  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__*/(0, _jsxRuntime.jsxs)("div", {
    className: listviewClasses(),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderListView, {
      ...props
    }), props.items.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Items.default, {
      ...props
    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      className: _ListViewModule.default['empty-message'],
      children: label
    })]
  });
}
ListView.DISPLAY_MODES = {
  DISPLAY_MODE_DEFAULT,
  DISPLAY_MODE_SEARCH
};
ListView.displayName = 'ListView';
ListView.propTypes = {
  displayMode: _propTypes.default.oneOf(Object.values(ListView.DISPLAY_MODES)),
  items: _propTypes.default.arrayOf(_propTypes.default.object)
};
ListView.defaultProps = {
  items: []
};
HeaderListView.defaultProps = {
  displayMode: DISPLAY_MODE_DEFAULT
};
HeaderListView.propTypes = {
  displayMode: _propTypes.default.oneOf(Object.values(ListView.DISPLAY_MODES)),
  headerDefault: _propTypes.default.arrayOf(_propTypes.default.object),
  headerInput: _propTypes.default.arrayOf(_propTypes.default.object),
  headerLabel: _propTypes.default.string,
  labelProps: _propTypes.default.object,
  items: ListView.propTypes.items,
  onInputChange: _propTypes.default.func,
  onAddKeyDown: _propTypes.default.func,
  required: _propTypes.default.bool,
  searchPlaceholder: _propTypes.default.string
};
var _default = exports.default = ListView;
//# sourceMappingURL=ListView.component.js.map