glide-design-system/dist/components/menuItem/MenuItem.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MenuItem = void 0;
require("core-js/modules/es.symbol.description.js");
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
/**
 * display menuItem
 * @param {*} icon An icon element to be displayed before the menu item's content.
 * @param {*} iconPosition The position of the icon relative to the menu item's content. It can be set to "start" (before the content) or "end" (after the content).
 * @param {*} children The content to be displayed inside the menu item. It can be any valid React elements or components.
 * @param {*} onClick A function to be called when the menu item is clicked. It is typically used to handle click events on the menu item. The function will receive the value prop of the menu item as an argument.
 * @param {*} value The value associated with the menu item. It can be used to identify the selected menu item or pass additional data when the onClick event is triggered.
 */
const MenuItem = _ref => {
  let {
    icon,
    iconPosition,
    children,
    onClick: _onClick,
    value,
    style,
    containerStyle,
    className,
    containerClass,
    id,
    name
  } = _ref;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "menuItem ".concat(containerClass ? containerClass : ""),
    style: _objectSpread({}, containerStyle)
  }, " ", /*#__PURE__*/_react.default.createElement("div", {
    id: id,
    "data-testid": id,
    name: name,
    className: "menuItemChild ".concat(className ? className : ""),
    onClick: () => _onClick && _onClick(value),
    style: _objectSpread({
      flexDirection: iconPosition === "end" ? "row-reverse" : ""
    }, style)
  }, icon && /*#__PURE__*/_react.default.createElement("div", {
    className: "menuIcon"
  }, icon), children));
};
exports.MenuItem = MenuItem;
MenuItem.propTypes = {
  loading: _propTypes.default.bool,
  icon: _propTypes.default.object,
  iconPosition: _propTypes.default.oneOf(["start", "end"]),
  onClick: _propTypes.default.func
};