Web: Components: ContextMenuButton: Fixed property usage. Added new display type - "toggle". Fixed usage on clients.

packages/client/src/pages/FormGallery/TilesView/sub-components/Tile.js

@@ -159,7 +159,7 @@ const Tile = (props) => {
             className="expandButton"
             directionX="right"
             getData={getOptions}
-            isNew={true}
+            displayType="toggle"
             onClick={onContextMenu}
             title={title}
           />

packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/ItemContextOptions.js

@@ -81,7 +81,7 @@ const ItemContextOptions = ({
           onClick={onContextMenu}
           getData={getData}
           directionX="right"
-          isNew={true}
+          displayType="toggle"
         />
       )}
     </StyledItemContextOptions>
@@ -90,13 +90,10 @@ const ItemContextOptions = ({
 
 export default inject(({ filesStore, peopleStore, contextOptionsStore }) => {
   const { getUserContextOptions } = peopleStore.contextOptionsStore;
-  const {
-    setBufferSelection,
-    getFilesContextOptions: getContextOptions,
-  } = filesStore;
-  const {
-    getFilesContextOptions: getContextOptionActions,
-  } = contextOptionsStore;
+  const { setBufferSelection, getFilesContextOptions: getContextOptions } =
+    filesStore;
+  const { getFilesContextOptions: getContextOptionActions } =
+    contextOptionsStore;
 
   return {
     setBufferSelection,

packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js

@@ -679,7 +679,7 @@ class Tile extends React.PureComponent {
                       className="expandButton"
                       directionX="right"
                       getData={getOptions}
-                      isNew={true}
+                      displayType="toggle"
                       onClick={onContextMenu}
                       title={title}
                     />
@@ -772,7 +772,7 @@ class Tile extends React.PureComponent {
                     className="expandButton"
                     directionX="right"
                     getData={getOptions}
-                    isNew={true}
+                    displayType="toggle"
                     onClick={onContextMenu}
                     title={title}
                   />
@@ -851,7 +851,7 @@ class Tile extends React.PureComponent {
                     className="expandButton"
                     directionX="right"
                     getData={getOptions}
-                    isNew={true}
+                    displayType="toggle"
                     onClick={onContextMenu}
                     title={title}
                   />

packages/components/context-menu-button/context-menu-button.stories.js

@@ -62,6 +62,7 @@ const Template = (args) => {
 export const Default = Template.bind({});
 Default.args = {
   title: "Actions",
+  displayType: "dropdown",
   iconName: VerticalDotsReactSvgUrl,
   size: 16,
   directionX: "left",

packages/components/context-menu-button/index.js

@@ -86,7 +86,7 @@ class ContextMenuButton extends React.Component {
   }
 
   onIconButtonClick = (e) => {
-    if (this.props.isDisabled || this.props.isNew) {
+    if (this.props.isDisabled || this.state.displayType === "toggle") {
       this.stopAction;
       return;
     }
@@ -131,7 +131,7 @@ class ContextMenuButton extends React.Component {
   }
 
   callNewMenu = (e) => {
-    if (this.props.isDisabled || !this.props.isNew) {
+    if (this.props.isDisabled || this.state.displayType !== "toggle") {
       this.stopAction;
       return;
     }
@@ -168,7 +168,6 @@ class ContextMenuButton extends React.Component {
       style,
       isFill, // eslint-disable-line react/prop-types
       asideHeader, // eslint-disable-line react/prop-types
-      isNew,
       title,
       zIndex,
       usePortal,
@@ -329,11 +328,7 @@ ContextMenuButton.propTypes = {
   /** Sets the number of columns */
   columnCount: PropTypes.number,
   /** Sets the display type */
-  displayType: PropTypes.string,
-
-  // TODO: rename prop
-  /** Switches to the new view mode */
-  // isNew: PropTypes.bool,
+  displayType: PropTypes.oneOf(["dropdown", "toggle", "aside", "auto"]),
   /** Closing event */
   onClose: PropTypes.func,
   /** Sets the drop down open with the portal */
@@ -356,7 +351,6 @@ ContextMenuButton.defaultProps = {
   directionX: "left",
   isFill: false,
   displayType: "dropdown",
-  isNew: false,
   usePortal: true,
   displayIconBorder: false,
 };

packages/components/row/index.js

@@ -166,7 +166,7 @@ class Row extends React.Component {
               className="expandButton"
               getData={getOptions}
               directionX="right"
-              isNew={true}
+              displayType="toggle"
               onClick={onContextMenu}
             />
           ) : (

packages/components/table-container/TableRow.js

@@ -65,7 +65,7 @@ const TableRow = (props) => {
               className="expandButton"
               getData={getOptions}
               directionX="right"
-              isNew={true}
+              displayType="toggle"
               onClick={onContextMenu}
               onClose={onHideContextMenu}
               title={title}