grommet/components/SelectMultiple/stories/Disabled.js

focus on the essential experience

"use strict";

exports.__esModule = true;
exports["default"] = exports.Disabled = void 0;
var _react = _interopRequireWildcard(require("react"));
var _grommet = require("grommet");
var _SelectMultiple = require("../SelectMultiple");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 && {}.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 defaultOptions = ['French Vanilla Cake with Buttercream', 'Sweet Grilled Peaches', 'Chocolate Chip Cookies', 'Pineapple Upside-Down Cake', 'Peanut Butter Chocolate Fondue', 'Strawberry Shortcake', 'Peach Cobbler', 'German Chocolate Cake', 'Carrot Cake with Cream Cheese Frosting', 'Cinnamon Coffee Cake'];
var Disabled = exports.Disabled = function Disabled() {
  var _useState = (0, _react.useState)(defaultOptions),
    options = _useState[0],
    setOptions = _useState[1];
  var _useState2 = (0, _react.useState)(['Chocolate Chip Cookies', 'Strawberry Shortcake']),
    valueMultiple = _useState2[0],
    setValueMultiple = _useState2[1];
  return (
    /*#__PURE__*/
    // Uncomment <Grommet> lines when using outside of storybook
    // <Grommet theme={...}>
    _react["default"].createElement(_grommet.Box, {
      fill: true,
      align: "center",
      pad: "large",
      gap: "large"
    }, /*#__PURE__*/_react["default"].createElement(_grommet.Text, null, "SelectMultiple Disabled"), /*#__PURE__*/_react["default"].createElement(_SelectMultiple.SelectMultiple, {
      width: "medium",
      showSelectedInline: true,
      dropProps: {
        width: 'medium'
      }
      // icon={<CaretDown />}
      // icon={false}
      ,
      disabled: ['Chocolate Chip Cookies', 'Pineapple Upside-Down Cake'],
      value: valueMultiple,
      placeholder: "Select",
      options: options,
      onSearch: function onSearch(text) {
        // The line below escapes regular expression special characters:
        // [ \ ^ $ . | ? * + ( )
        var escapedText = text.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&');

        // Create the regular expression with modified value which
        // handles escaping special characters. Without escaping special
        // characters, errors will appear in the console
        var exp = new RegExp(escapedText, 'i');
        setOptions(defaultOptions.filter(function (o) {
          return exp.test(o);
        }));
      },
      onClose: function onClose() {
        return setOptions(defaultOptions);
      },
      onChange: function onChange(_ref) {
        var value = _ref.value;
        setValueMultiple(value);
      }
    }))
    // </Grommet>
  );
};
Disabled.parameters = {
  chromatic: {
    disable: true
  }
};
Disabled.args = {
  full: true
};
var _default = exports["default"] = {
  title: 'Input/SelectMultiple/Disabled'
};