@talend/react-components/lib/List/ListComposition/SortBy/SortBy.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 _reactBootstrap = require("@talend/react-bootstrap");
var _utils = require("@talend/utils");
var _Icon = _interopRequireDefault(require("../../../Icon"));
var _context = require("../context");
var _SortByModule = _interopRequireDefault(require("./SortBy.module.scss"));
var _theme = require("../../../theme");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const theme = (0, _theme.getTheme)(_SortByModule.default);
const AscendingDescendingButton = ({
  id,
  isDescending,
  orderLabel,
  t,
  onClick
}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.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__*/(0, _jsxRuntime.jsx)(_Icon.default, {
    name: isDescending ? 'talend-sort-desc' : 'talend-sort-asc'
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
    className: theme('tc-sort-by-order-chooser-indicator'),
    name: "talend-caret-down",
    transform: !isDescending ? 'rotate-180' : null
  })]
});
AscendingDescendingButton.propTypes = {
  id: _propTypes.default.string.isRequired,
  isDescending: _propTypes.default.bool,
  onClick: _propTypes.default.func.isRequired,
  orderLabel: _propTypes.default.string.isRequired,
  t: _propTypes.default.func.isRequired
};
function SortBy({
  id,
  options,
  onChange,
  value
}) {
  const {
    sortParams,
    setSortParams,
    t
  } = (0, _context.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__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Nav, {
    className: theme('tc-sort-by'),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Navbar.Text, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
          className: theme('tc-sort-by-label'),
          htmlFor: id,
          children: t('LIST_TOOLBAR_SORT_BY', {
            defaultValue: 'Sort by:'
          })
        })
      })
    }), options.length === 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
      className: "navbar-text",
      children: options[0].name
    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.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__*/(0, _jsxRuntime.jsx)(_reactBootstrap.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__*/(0, _jsxRuntime.jsx)("li", {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AscendingDescendingButton, {
        id: id,
        isDescending: isDescending,
        onClick: onOrderChange,
        orderLabel: orderLabel,
        t: t
      })
    })]
  });
}
SortBy.defaultProps = {
  id: (0, _utils.randomUUID)(),
  value: {}
};
if (process.env.NODE_ENV !== 'production') {
  SortBy.propTypes = {
    id: _propTypes.default.string,
    options: _propTypes.default.arrayOf(_propTypes.default.shape({
      key: _propTypes.default.string,
      label: _propTypes.default.string,
      name: _propTypes.default.string
    })).isRequired,
    onChange: _propTypes.default.func,
    value: _propTypes.default.shape({
      sortBy: _propTypes.default.string,
      isDescending: _propTypes.default.bool
    })
  };
}
var _default = exports.default = SortBy;
//# sourceMappingURL=SortBy.component.js.map