react-elegant-ui/esm/components/Select/__examples__/common.example.js

Elegant UI components, made by BEM best practices for react

var __assign = this && this.__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 = this && this.__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;
};
import React, { useEffect, useState } from 'react';
import root from 'react-shadow';
import { useForceUpdate } from '../../../hooks/useForceUpdate';
import { Select as SelectControl } from '../Select.bundle/desktop';
var Select = function (props) {
  var _a = __read(useState(props.value), 2),
    value = _a[0],
    setValue = _a[1];
  return /*#__PURE__*/React.createElement(SelectControl, __assign({}, props, {
    value: value,
    setValue: setValue
  }));
};
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
}];
export var Radio = function () {
  return /*#__PURE__*/React.createElement(Select, {
    options: demoList,
    value: 'apple',
    placeholder: "Select something"
  });
};
export var Checkbox = function () {
  return /*#__PURE__*/React.createElement(Select, {
    options: demoList,
    value: ['banana', 'meat'],
    placeholder: "Select something"
  });
};
export var Disabled = function () {
  return /*#__PURE__*/React.createElement(Select, {
    options: demoList,
    value: 'banana',
    placeholder: "Select something",
    disabled: true
  });
};
export var ShadowDOM = function () {
  // Wait loading page, cuz styles may be inject in runtime
  var update = useForceUpdate();
  useEffect(function () {
    window.addEventListener('load', update);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return /*#__PURE__*/React.createElement(root.div, {
    onKeyDown: function (evt) {
      evt.stopPropagation();
    },
    mode: "closed"
  }, /*#__PURE__*/React.createElement("div", null, Array.from(document.styleSheets).map(function (_a, idx) {
    var href = _a.href;
    return href === null ? undefined : ( /*#__PURE__*/React.createElement("link", {
      key: idx,
      href: href,
      rel: "stylesheet"
    }));
  })), /*#__PURE__*/React.createElement("div", null, "Component inside shadowDOM"), /*#__PURE__*/React.createElement(Radio, null));
};