DocSpace-buildtools/packages/asc-web-components/context-menu-button
Alexey Safronov f3afd79a3f Merge branch 'develop' into feature/virtual-rooms-1.2
# Conflicts:
#	packages/asc-web-common/components/AdvancedSelector/AdvancedSelector.js
#	packages/asc-web-common/components/AdvancedSelector/sub-components/Selector.js
#	packages/asc-web-common/components/FilterInput/sub-components/SortComboBox.js
#	packages/asc-web-common/components/PageLayout/index.js
#	packages/asc-web-common/store/SettingsStore.js
#	packages/asc-web-components/avatar-editor/sub-components/avatar-editor-body.js
#	packages/asc-web-components/combobox/index.js
#	packages/asc-web-components/context-menu/styled-context-menu.js
#	packages/asc-web-components/drop-down/index.js
#	packages/asc-web-components/link-with-dropdown/index.js
#	packages/asc-web-components/row/index.js
#	packages/asc-web-components/table-container/StyledTableContainer.js
#	packages/asc-web-components/table-container/TableHeaderCell.js
#	packages/asc-web-components/themes/dark.js
#	products/ASC.Files/Client/public/images/files.menu.svg
#	products/ASC.Files/Client/src/components/Article/Body/TreeFolders.js
#	products/ASC.Files/Client/src/components/Badges.js
#	products/ASC.Files/Client/src/components/QuickButtons.js
#	products/ASC.Files/Client/src/components/panels/NewFilesPanel/index.js
#	products/ASC.Files/Client/src/components/panels/OperationsPanel/index.js
#	products/ASC.Files/Client/src/components/panels/SelectFileDialog/AsideView.js
#	products/ASC.Files/Client/src/components/panels/SelectFileDialog/ModalView.js
#	products/ASC.Files/Client/src/components/panels/SharingPanel/index.js
#	products/ASC.Files/Client/src/components/panels/StyledPanels.js
#	products/ASC.Files/Client/src/components/panels/UploadPanel/FileRow.js
#	products/ASC.Files/Client/src/components/panels/UploadPanel/index.js
#	products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js
#	products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js
#	products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableContainer.js
#	products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableRow.js
#	products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/sub-components/FileNameCell.js
#	products/ASC.Files/Client/src/pages/Home/Section/Filter/index.js
#	products/ASC.Files/Client/src/pages/Home/Section/Header/index.js
#	products/ASC.Files/Client/src/pages/Home/index.js
#	products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/VersionRow.js
#	products/ASC.Files/Client/src/store/UploadDataStore.js
#	products/ASC.People/Client/public/images/people.menu.svg
#	products/ASC.People/Client/src/components/GroupSelector/index.js
#	products/ASC.People/Client/src/components/PeopleSelector/index.js
#	products/ASC.People/Client/src/pages/Home/Section/Body/RowView/userContent.js
#	products/ASC.People/Client/src/pages/Home/index.js
#	products/ASC.People/Client/src/pages/Profile/Section/Body/index.js
#	web/ASC.Web.Client/src/components/NavMenu/sub-components/header-nav.js
#	web/ASC.Web.Client/src/components/NavMenu/sub-components/header.js
#	web/ASC.Web.Client/src/components/NavMenu/sub-components/nav-item.js
#	web/ASC.Web.Client/src/components/NavMenu/sub-components/profile-menu.js
#	web/ASC.Web.Client/src/components/pages/Home/index.js
2022-03-01 13:50:26 +03:00
..
context-menu-button.stories.js Web:Components:ContextMenuButton: add support dark-theme 2021-12-13 20:54:53 +08:00
context-menu-button.test.js Web: Components: changed component hierarchy 2021-02-24 17:42:09 +03:00
index.js Merge branch 'master' into develop 2022-02-21 22:22:38 +03:00
README.md Web: Components/Common: fix imports 2021-02-26 00:19:45 +03:00
styled-context-menu-button.js Web: Components/Common: fix imports 2021-02-26 00:19:45 +03:00

ContextMenuButton

ContextMenuButton is used for displaying context menu actions on a list's item

Usage

import ContextMenuButton from "@appserver/components/context-menu-button";
<ContextMenuButton
  iconName="static/images/vertical-dots.react.svg"
  size={16}
  color="#A3A9AE"
  isDisabled={false}
  title="Actions"
  getData={() => [
    {
      key: "key",
      label: "label",
      onClick: () => alert("label"),
    },
  ]}
/>

Properties

Props Type Required Values Default Description
className string - - - Accepts class
clickColor string - - - Specifies the icon click color
color string - - - Specifies the icon color
data array - - [ ] Array of options for display
directionX oneOf - left,right left What the button will trigger when mouse out of button
getData func - - Function for converting to inner data
hoverColor string - - - Specifies the icon hover color
iconClickName string - - - Specifies the icon click name
iconHoverName string - - - Specifies the icon hover name
iconName string - - VerticalDotsIcon Specifies the icon name
id string - - - Accepts id
isDisabled bool - - false Tells when the button should present a disabled state
onMouseEnter func - - - What the button will trigger when mouse hovered
onMouseLeave func - - - What the button will trigger when mouse leave
onMouseOut func - - - What the button will trigger when mouse out of button
onMouseOver func - - - What the button will trigger when mouse over button
opened bool - - false Tells when the button should present a opened state
size number - - 16 Specifies the icon size
style obj, array - - - Accepts css style
title string - - - Specifies the icon title