@talend/react-components/lib-esm/List/Toolbar/SelectSortBy/SelectSortBy.component.js

Set of react components.

import classNames from 'classnames';
import PropTypes from 'prop-types';
import { Button, MenuItem, Nav, NavDropdown } from '@talend/react-bootstrap';
import { randomUUID } from '@talend/utils';
import Icon from '../../../Icon';
import getDefaultT from '../../../translate';
import theme from './SelectSortBy.module.scss';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function SortByItem({
  option,
  id,
  t,
  onSelect
}) {
  const optionLabel = option.name || option.id;
  return /*#__PURE__*/_jsx(MenuItem, {
    id: id && `${id}-by-item-${option.id}`,
    eventKey: option,
    "aria-label": t('LIST_SELECT_SORT_BY', {
      defaultValue: 'Select {{sortBy}} as current sort criteria.',
      sortBy: optionLabel
    }),
    onSelect: onSelect,
    children: optionLabel
  });
}
SortByItem.propTypes = {
  onSelect: PropTypes.func,
  option: PropTypes.shape({
    id: PropTypes.string,
    name: PropTypes.string
  }),
  id: PropTypes.string,
  t: PropTypes.func
};
function SelectSortBy({
  field,
  id,
  isDescending,
  onChange,
  options,
  t
}) {
  const order = isDescending || false;
  const selected = field && options.find(item => item.id === field);
  function onChangeField(newField, event) {
    return onChange(event, {
      field: newField.id,
      isDescending: order
    });
  }
  function onChangeOrder(event) {
    return onChange(event, {
      field: selected.id,
      isDescending: !order
    });
  }
  const currentSortByLabel = selected ? selected.name || selected.id : 'N.C';
  const currentSortOrderLabel = order ? t('LIST_SELECT_SORT_BY_ORDER_DESC', {
    defaultValue: 'Descending'
  }) : t('LIST_SELECT_SORT_BY_ORDER_ASC', {
    defaultValue: 'Ascending'
  });
  return /*#__PURE__*/_jsxs(Nav, {
    className: theme['tc-list-toolbar-sort-by'],
    children: [options.length === 1 ? /*#__PURE__*/_jsx("li", {
      className: "navbar-text",
      children: options[0].name
    }) : /*#__PURE__*/_jsx(NavDropdown, {
      id: id ? `${id}-by` : randomUUID(),
      title: currentSortByLabel,
      onSelect: onChangeField,
      className: theme['sort-by-items'],
      "aria-label": t('LIST_CHANGE_SORT_BY', {
        defaultValue: 'Change sort criteria. Current sort criteria: {{sortBy}}.',
        sortBy: currentSortByLabel
      }),
      children: options.map(option => /*#__PURE__*/_jsx(SortByItem, {
        option: option,
        id: id,
        t: t
      }, id))
    }), selected && /*#__PURE__*/_jsx("li", {
      children: /*#__PURE__*/_jsxs(Button, {
        id: id && `${id}-order-chooser`,
        "aria-label": t('LIST_CHANGE_SORT_BY_ORDER', {
          defaultValue: 'Change sort order. Current order: {{sortOrder}}.',
          sortOrder: currentSortOrderLabel
        }),
        onClick: onChangeOrder,
        bsStyle: "link",
        className: classNames(theme['tc-list-toolbar-order-chooser'], 'tc-list-toolbar-order-chooser'),
        children: [/*#__PURE__*/_jsx(Icon, {
          name: isDescending ? 'talend-sort-desc' : 'talend-sort-asc'
        }), /*#__PURE__*/_jsx(Icon, {
          name: "talend-caret-down",
          transform: !isDescending && 'rotate-180',
          className: classNames('tc-list-toolbar-order-indicator', theme['tc-list-toolbar-order-indicator'])
        })]
      })
    })]
  });
}
SelectSortBy.propTypes = {
  field: PropTypes.string,
  id: PropTypes.string,
  isDescending: PropTypes.bool,
  onChange: PropTypes.func.isRequired,
  options: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string.isRequired,
    name: PropTypes.string
  })).isRequired,
  t: PropTypes.func
};
SelectSortBy.defaultProps = {
  t: getDefaultT()
};
export default SelectSortBy;
//# sourceMappingURL=SelectSortBy.component.js.map