History

mushka c3c59ceaff changed size names in app buttons		2022-03-10 15:59:04 +03:00
..
group-buttons-menu.stories.js	changed size names in app buttons	2022-03-10 15:59:04 +03:00
group-buttons-menu.test.js	Web: Components: changed component hierarchy	2021-02-24 17:42:09 +03:00
index.js	Web: Components: Added update the "More items" length when adding new properties that do not fit to the full width of the menu header.	2021-09-20 08:38:45 +03:00
README.md	Web: Components/Common: fix imports	2021-02-26 00:19:45 +03:00
styled-group-buttons-menu.js	Web: Components: fixed group-button-menu styles	2021-10-07 17:44:37 +03:00

README.md

GroupButtonsMenu

Menu for group actions on a page.

Usage

import GroupButtonsMenu from "@appserver/components/group-buttons-menu";

const menuItems = [
  {
    label: "Select",
    isDropdown: true,
    isSeparator: true,
    isSelect: true,
    fontWeight: "bold",
    children: [
      <DropDownItem key="aaa" label="aaa" />,
      <DropDownItem key="bbb" label="bbb" />,
      <DropDownItem key="ccc" label="ccc" />,
    ],
    onSelect: (a) => console.log(a),
  },
  {
    label: "Menu item 1",
    disabled: false,
    onClick: () => console.log("Menu item 1 action"),
  },
  {
    label: "Menu item 2",
    disabled: true,
    onClick: () => console.log("Menu item 2 action"),
  },
];

<GroupButtonsMenu
  checked={false}
  menuItems={menuItems}
  visible={false}
  moreLabel="More"
  closeTitle="Close"
  onClose={() => console.log("Close action")}
  onChange={() => console.log("Toggle action")}
  selected={menuItems[0].label}
/>

Properties

Props	Type	Required	Values	Default	Description
`checked`	`bool`	-	-	`false`	Sets initial value of checkbox
`selected`	`string`	-	-	`Select`	Selected header value
`menuItems`	`array`	-	-	-	Button collection
`visible`	`bool`	-	-	-	Sets menu visibility
`moreLabel`	`string`	-	-	`More`	Label for more button
`closeTitle`	`string`	-	-	`Close`	Title for close menu button
`onClick`	`function`	-	-	-	onClick action on GroupButton`s
`onClose`	`function`	-	-	-	onClose action if menu closing
`onChange`	`function`	-	-	-	onChange action on use selecting