react-elegant-ui/components/Menu/__examples__/common.example.js

Elegant UI components, made by BEM best practices for react

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.WithSearch = exports.Radio = exports.Disabled = exports.Complex = exports.Checkbox = exports.Base = void 0;
var _react = _interopRequireWildcard(require("react"));
var _desktop = require("../../Icon/Icon.bundle/desktop");
var _desktop2 = require("../Menu.bundle/desktop");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var __assign = void 0 && (void 0).__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];
      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
    }
    return t;
  };
  return __assign.apply(this, arguments);
};
var __read = void 0 && (void 0).__read || function (o, n) {
  var m = typeof Symbol === "function" && o[Symbol.iterator];
  if (!m) return o;
  var i = m.call(o),
    r,
    ar = [],
    e;
  try {
    while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
  } catch (error) {
    e = {
      error: error
    };
  } finally {
    try {
      if (r && !r.done && (m = i["return"])) m.call(i);
    } finally {
      if (e) throw e.error;
    }
  }
  return ar;
};
var Menu = function (props) {
  var _a = __read((0, _react.useState)(props.value), 2),
    value = _a[0],
    setValue = _a[1];
  var _b = __read((0, _react.useState)(false), 2),
    isFocused = _b[0],
    setFocus = _b[1];
  var _c = __read((0, _react.useState)(), 2),
    cursorIdRef = _c[0],
    cursorIdRefSet = _c[1];
  return /*#__PURE__*/_react.default.createElement(_desktop2.Menu, __assign({
    "aria-activedescendant": !isFocused ? undefined : cursorIdRef !== null && cursorIdRef !== void 0 ? cursorIdRef : undefined,
    cursorIdRef: cursorIdRefSet
  }, props, {
    value: value,
    setValue: setValue,
    isFocused: isFocused,
    onFocus: function () {
      return setFocus(true);
    },
    onBlur: function () {
      return setFocus(false);
    },
    tabIndex: 0,
    style: {
      width: 'max-content'
    }
  }));
};
var demoList = [{
  id: 'apple',
  content: 'Apple',
  disabled: true
}, {
  id: 'banana',
  content: 'Banana'
}, {
  id: 'meat',
  content: 'Meat'
}, {
  id: 'hidden',
  content: 'Hidden value',
  hidden: true
}, {
  title: 'Group name',
  items: [{
    id: 'sosage',
    content: 'Sosage',
    disabled: true
  }, {
    id: 'butter',
    content: 'Butter',
    disabled: true
  }, {
    id: 'bread',
    content: 'Bread'
  }]
}, {
  id: 'milk',
  content: 'Milk',
  disabled: true
}];
var Base = function () {
  return /*#__PURE__*/_react.default.createElement(Menu, {
    items: demoList,
    onPick: function (id) {
      return console.log("Pick by item \"".concat(id, "\""));
    }
  });
};
exports.Base = Base;
var WithSearch = function () {
  return /*#__PURE__*/_react.default.createElement(Menu, {
    items: demoList,
    onPick: function (id) {
      return console.log("Pick by item \"".concat(id, "\""));
    },
    searchable: true,
    searchPlaceholder: "Search"
  });
};
exports.WithSearch = WithSearch;
var Complex = function () {
  return /*#__PURE__*/_react.default.createElement(Menu, {
    items: [{
      id: 'item1',
      content: ( /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_desktop.Icon, {
        glyph: "check"
      }), " complex item #1", ' ', /*#__PURE__*/_react.default.createElement(_desktop.Icon, {
        glyph: "close"
      }))),
      textContent: 'item 1'
    }, {
      id: 'item2',
      content: ( /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_desktop.Icon, {
        glyph: "check"
      }), " complex item #2", ' ', /*#__PURE__*/_react.default.createElement(_desktop.Icon, {
        glyph: "close"
      }))),
      textContent: 'item 2'
    }, {
      id: 'item3',
      content: ( /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_desktop.Icon, {
        glyph: "check"
      }), " complex item #3", ' ', /*#__PURE__*/_react.default.createElement(_desktop.Icon, {
        glyph: "close"
      }))),
      textContent: 'item 3'
    }],
    onPick: function (id) {
      return console.log("Pick by complex item \"".concat(id, "\""));
    }
  });
};
exports.Complex = Complex;
var Radio = function () {
  return /*#__PURE__*/_react.default.createElement(Menu, {
    items: demoList,
    type: "radio",
    value: 'banana'
  });
};
exports.Radio = Radio;
var Checkbox = function () {
  return /*#__PURE__*/_react.default.createElement(Menu, {
    items: demoList,
    type: "checkbox",
    value: ['meat', 'sosage']
  });
};
exports.Checkbox = Checkbox;
var Disabled = function () {
  return /*#__PURE__*/_react.default.createElement(Menu, {
    items: demoList,
    type: "radio",
    value: 'banana',
    disabled: true
  });
};
exports.Disabled = Disabled;