@talend/react-components/lib-esm/List/ListComposition/SortBy/SortBy.component.js

Set of react components.

import PropTypes from 'prop-types';
import { Navbar, MenuItem, NavDropdown, Nav, Button } from '@talend/react-bootstrap';
import { randomUUID } from '@talend/utils';
import Icon from '../../../Icon';
import { useListContext } from '../context';
import cssModule from './SortBy.module.scss';
import { getTheme } from '../../../theme';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const theme = getTheme(cssModule);
const AscendingDescendingButton = ({
  id,
  isDescending,
  orderLabel,
  t,
  onClick
}) => /*#__PURE__*/_jsxs(Button, {
  "aria-label": t('LIST_CHANGE_SORT_BY_ORDER', {
    defaultValue: 'Change sort order. Current order: {{sortOrder}}.',
    sortOrder: orderLabel
  }),
  bsStyle: "link",
  className: theme('tc-sort-by-order-chooser'),
  id: `${id}-order-chooser`,
  onClick: onClick,
  children: [/*#__PURE__*/_jsx(Icon, {
    name: isDescending ? 'talend-sort-desc' : 'talend-sort-asc'
  }), /*#__PURE__*/_jsx(Icon, {
    className: theme('tc-sort-by-order-chooser-indicator'),
    name: "talend-caret-down",
    transform: !isDescending ? 'rotate-180' : null
  })]
});
AscendingDescendingButton.propTypes = {
  id: PropTypes.string.isRequired,
  isDescending: PropTypes.bool,
  onClick: PropTypes.func.isRequired,
  orderLabel: PropTypes.string.isRequired,
  t: PropTypes.func.isRequired
};
function SortBy({
  id,
  options,
  onChange,
  value
}) {
  const {
    sortParams,
    setSortParams,
    t
  } = useListContext();
  const isControlled = onChange && value;
  const currentValue = isControlled ? value : sortParams;
  const isDescending = currentValue.isDescending;
  // Current selected option
  const selectedOption = options.find(option => option.key === currentValue.sortBy);
  const selectedLabel = selectedOption ? selectedOption.label : 'N.C';
  const orderLabel = isDescending ? t('LIST_SELECT_SORT_BY_ORDER_DESC', {
    defaultValue: 'Descending'
  }) : t('LIST_SELECT_SORT_BY_ORDER_ASC', {
    defaultValue: 'Ascending'
  });
  const performChange = (event, nextValue) => {
    if (isControlled) {
      onChange(event, nextValue);
    } else {
      setSortParams(nextValue);
    }
  };

  // Sort field
  const onSortByChange = (val, event) => {
    performChange(event, {
      ...currentValue,
      sortBy: val
    });
  };

  // Sort order
  const onOrderChange = event => performChange(event, {
    ...currentValue,
    isDescending: !isDescending
  });
  return /*#__PURE__*/_jsxs(Nav, {
    className: theme('tc-sort-by'),
    children: [/*#__PURE__*/_jsx("li", {
      children: /*#__PURE__*/_jsx(Navbar.Text, {
        children: /*#__PURE__*/_jsx("label", {
          className: theme('tc-sort-by-label'),
          htmlFor: id,
          children: t('LIST_TOOLBAR_SORT_BY', {
            defaultValue: 'Sort by:'
          })
        })
      })
    }), options.length === 1 ? /*#__PURE__*/_jsx("li", {
      className: "navbar-text",
      children: options[0].name
    }) : /*#__PURE__*/_jsx(NavDropdown, {
      "aria-label": t('LIST_CHANGE_SORT_BY', {
        defaultValue: 'Change sort criteria. Current sort criteria: {{sortBy}}.',
        sortBy: selectedLabel
      }),
      className: theme('tc-sort-by-items'),
      id: `${id}-by`,
      onSelect: onSortByChange,
      title: selectedLabel,
      children: options.map(({
        key,
        label
      }, index) => /*#__PURE__*/_jsx(MenuItem, {
        "aria-label": t('LIST_SELECT_SORT_BY', {
          defaultValue: 'Select {{sortBy}} as current sort criteria.',
          sortBy: label
        }),
        eventKey: key,
        id: `${id}-${key}`,
        children: label
      }, `${key}-${index}`))
    }), selectedOption && /*#__PURE__*/_jsx("li", {
      children: /*#__PURE__*/_jsx(AscendingDescendingButton, {
        id: id,
        isDescending: isDescending,
        onClick: onOrderChange,
        orderLabel: orderLabel,
        t: t
      })
    })]
  });
}
SortBy.defaultProps = {
  id: randomUUID(),
  value: {}
};
if (process.env.NODE_ENV !== 'production') {
  SortBy.propTypes = {
    id: PropTypes.string,
    options: PropTypes.arrayOf(PropTypes.shape({
      key: PropTypes.string,
      label: PropTypes.string,
      name: PropTypes.string
    })).isRequired,
    onChange: PropTypes.func,
    value: PropTypes.shape({
      sortBy: PropTypes.string,
      isDescending: PropTypes.bool
    })
  };
}
export default SortBy;
//# sourceMappingURL=SortBy.component.js.map