@gitlab/ui/dist/components/base/sorting/sorting_item.js

GitLab UI Components

import GlDropdownItem from '../dropdown/dropdown_item';
import GlIcon from '../icon/icon';

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

function _objectSpread(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};
    var ownKeys = Object.keys(source);

    if (typeof Object.getOwnPropertySymbols === 'function') {
      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
      }));
    }

    ownKeys.forEach(function (key) {
      _defineProperty(target, key, source[key]);
    });
  }

  return target;
}

/**
 * Sorting Item
 *
 * This is written as a functional component because it is a simple wrapper over
 * the GlDropdownItem component and does not use internal state. Functional
 * components are cheaper to render and often used as wrappers like this. We're
 * not using the <template functional> syntax here because it does not support
 * custom child components wihtout extra work inside GitLab or extra work
 * required by the user.
 */

var sorting_item = {
  functional: true,
  name: 'GlSortingItem',
  props: {
    active: {
      type: Boolean,
      default: false,
      required: false
    },
    href: {
      type: String,
      default: null,
      required: false
    }
  },
  render: function render(createElement, _ref) {
    var children = _ref.children,
        data = _ref.data,
        _ref$props = _ref.props,
        props = _ref$props === void 0 ? {} : _ref$props;
    var classNames = "gl-sorting-item js-active-icon ".concat(props.active ? '' : 'inactive');
    var icon = createElement(GlIcon, {
      class: classNames,
      attrs: {
        name: 'mobile-issue-close',
        size: 16,
        ariaLabel: 'Selected'
      }
    });
    return createElement(GlDropdownItem, _objectSpread({}, data, {
      attrs: _objectSpread({}, props)
    }), [icon, children]);
  }
};

export default sorting_item;