@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 ownKeys(object, enumerableOnly) {
  var keys = Object.keys(object);

  if (Object.getOwnPropertySymbols) {
    var symbols = Object.getOwnPropertySymbols(object);
    if (enumerableOnly) symbols = symbols.filter(function (sym) {
      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
    });
    keys.push.apply(keys, symbols);
  }

  return keys;
}

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

    if (i % 2) {
      ownKeys(Object(source), true).forEach(function (key) {
        _defineProperty(target, key, source[key]);
      });
    } else if (Object.getOwnPropertyDescriptors) {
      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
    } else {
      ownKeys(Object(source)).forEach(function (key) {
        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(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, _objectSpread2(_objectSpread2({}, data), {}, {
      attrs: _objectSpread2({}, props)
    }), [icon, children]);
  }
};

export default sorting_item;