@uva-glass/component-library/dist/components/MultiSelect/MultiSelect.stories.js

React components UvA

import { jsxs as S, jsx as r } from "react/jsx-runtime";
import { fn as d } from "../../index-DXR-TB1d.js";
import { useState as p } from "react";
import { M as e } from "../../TablePlugin-Ba6PaBhf.js";
import { Container as M } from "../../storyComponents/Container/Container.js";
const C = `
  // MultiSelectHeader can be added optionally
  <MultiSelect.MultiSelectHeader label={label} clearTrigger={clearTrigger} onClear={handleClear} />
  <MultiSelect noBorder={noBorder} scrollable={scrollable}>
    {mockItems.map(({ itemName, itemValue, disabled }) => (
      <MultiSelect.MultiSelectItem key={itemName} label={itemName} value={itemValue}
        checked={stateItems.includes(itemValue)} onChange={handleChange} disabled={disabled} />
    ))}
  </MultiSelect>
  `, H = {
  title: "Organisms/MultiSelect",
  component: e,
  argTypes: {
    header: {
      table: {
        disable: !0
      }
    }
  },
  parameters: {
    inspectComponent: e,
    codeString: C
  }
}, m = (i) => {
  const [n, o] = p([]), I = [
    { itemName: "AItem 1", itemValue: "1", disabled: !0 },
    { itemName: "BItem 2", itemValue: "2" },
    { itemName: "Multi line Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3", itemValue: "3" },
    { itemName: "CItem 4", itemValue: "4" },
    { itemName: "DItem 5", itemValue: "5" },
    { itemName: "EItem 6", itemValue: "6" }
  ], h = () => {
    o([]), d()();
  }, b = (t) => {
    const { checked: l, value: a } = t.target;
    o((s) => {
      const c = l ? [...s, a] : s.filter((g) => g !== a);
      return d()(c), c;
    });
  };
  return /* @__PURE__ */ S(M, { children: [
    i.header && /* @__PURE__ */ r(
      e.MultiSelectHeader,
      {
        label: "Item list",
        clearTrigger: n.length > 0 ? "Clear Selection" : "",
        onClear: h
      }
    ),
    /* @__PURE__ */ r(e, { ...i, children: I.map(({ itemName: t, itemValue: l, disabled: a }) => /* @__PURE__ */ r(
      e.MultiSelectItem,
      {
        label: t,
        value: l,
        checked: n.includes(l),
        onChange: b,
        disabled: a
      },
      t
    )) })
  ] });
}, u = {
  scrollable: !0,
  noBorder: !1
}, f = m.bind({});
f.args = {
  ...u
};
const N = m.bind({});
N.args = {
  ...u,
  // boolean is not normal way of adding header but if added after template the rerender logic of
  // storybook would not correctly clear the checkboxes
  header: !0
};
const V = m.bind({});
V.args = {
  scrollable: !1,
  noBorder: !0,
  // boolean is not normal way of adding header but if added after template the rerender logic of
  // storybook would not correctly clear the checkboxes
  header: !0
};
export {
  f as MultiSelectExample,
  N as WithHeader,
  V as WithheaderAndWithoutScrollContainerAndBorder,
  H as default
};
//# sourceMappingURL=MultiSelect.stories.js.map