Javascript dropdownmenu

DescriptionOptionsdropdownMenuMembersDEFAULT_ITEMSMethodsclosedestroydisablePluginenablePluginexecuteCommandisEnabledopenupdatePlugin Description This plugin creates the Handsontable Dropdown Menu. It allows to create a new column at any place in the gridamong other features.Possible values: true (to enable default options), false (to disable completely). or array of any available strings: ["col_left", "col_right", "remove_col", "---------", "undo", "redo"]. See the dropdown menu demo for examples. Example Options Source code dropdownMenu.dropdownMenu : boolean | object | Array The dropdownMenu option configures the DropdownMenu plugin. You can set the dropdownMenu option to one of the following: Setting Description false Disable the DropdownMenu plugin true - Enable the DropdownMenu plugin- Use the default context menu options An array - Enable the DropdownMenu plugin- Modify individual context menu options An object - Enable the DropdownMenu plugin- Apply a custom dropdown menu configuration Read more: Context menu Plugins: DropdownMenu Default: undefined Example Members DEFAULT_ITEMS Source code DropdownMenu.DEFAULT_ITEMS ⇒ Array Default menu items order when dropdownMenu is enabled by setting the config item to true. Methods close Source code dropdownMenu.close() Closes dropdown menu. destroy Source code dropdownMenu.destroy() Destroys the plugin instance. disablePlugin Source code dropdownMenu.disablePlugin() Disables the plugin functionality for this Handsontable instance. enablePlugin Source code dropdownMenu.enablePlugin() Enables the plugin functionality for this Handsontable instance. Emits: Hooks#event:afterDropdownMenuDefaultOptions, Hooks#event:beforeDropdownMenuSetItems executeCommand Source code dropdownMenu.executeCommand(commandName, ...params) Executes context menu command. The executeCommand() method works only for selected cells. When no cells are selected, executeCommand() doesn't do anything. You can execute all predefined commands: 'col_left' - Insert column left 'col_right' - Insert column right 'clear_column' - Clear selected column 'remove_col' - Remove column 'undo' - Undo last action 'redo' - Redo last action 'make_read_only' - Make cell read only 'alignment:left' - Alignment to the left 'alignment:top' - Alignment to the top 'alignment:right' - Alignment to the right 'alignment:bottom' - Alignment to the bottom 'alignment:middle' - Alignment to the middle 'alignment:center' - Alignment to the center (justify). Or you can execute command registered in settings where key is your command name. Param Type Description commandName string Command name to execute. ...params * Additional parameters passed to the command executor. isEnabled Source code dropdownMenu.isEnabled() ⇒ boolean Checks if the plugin is enabled in the handsontable settings. This method is executed in Hooks#beforeInithook and if it returns true then the DropdownMenu#enablePlugin method is called. open Source code dropdownMenu.open(position, offset) Opens menu and re-position it based on the passed coordinates. Emits: Hooks#event:beforeDropdownMenuShow, Hooks#event:afterDropdownMenuShow Param Type Description position Object Event An object with top and left properties which contains coordinates relative to the browsers viewport (without included scroll offsets). Or if the native event is passed the menu will be positioned based on the pageX and pageY coordinates. offset Object An object allows applying the offset to the menu position. updatePlugin Source code dropdownMenu.updatePlugin() Updates the plugin's

150, openOnMouseover: true, }toggle - an renderable item that will open the nested menu on hover. It gets wrapped in a li element, so it might be best to have a button or a link tag.nested - the nested menu's expansion direction. The default case should hopefully be the only used case.Inherit - If the main dropdown menu is aligned left, the nested menu will appear to the left as well.Reverse - If the main dropdown menu is aligned left, the nested menu will appear to the right.Left - Force the menu to appear to the left of the menu.Right - Force the menu to appear to the right of the menu.animate - boolean if the nested menu should animate when appearing. Defaults to falsedirection - The animation direction.upwards - boolean if the nested menu should render upwards. Defaults to falsedelay - A number in ms to allow the mouse to be off of the dropdown menu to close it. Defaults to 500msenterTimeout - the amount of time in ms to end the CSSTransitionGroup. Defaults to 150leaveTimeout - the amount of time in ms to end the CSSTransitionGroup. Defaults to 150openOnMouseover - boolean if the menu can be opened/close by mouseover/mouseleave eventsStylingIn the dist folder, there is a react-dd-menu.css and a react-dd-menu.min.css with the default css stylings. If you have SASS, the source is located in src/scss.If you don't want the default css or to edit the default, the layout is this:.dd-menu| -- toggle component| -- .dd-menu-items| | -- ul| | | [role="separator"], .separatorThe separator can be any element with a classname of .separator or any element with a role of separator (or both). To get the best styling, it should probably be applied to an li element.Usageimport React from 'react';import DropdownMenu from 'react-dd-menu';export default class Example extends React.Component { constructor() { super(); this.state = { isMenuOpen: false }; this.click = this.click.bind(this); this.toggle = this.toggle.bind(this); this.close = this.close.bind(this); } toggle() { this.setState({ isMenuOpen: !this.state.isMenuOpen }); } close() { this.setState({ isMenuOpen: false }); } click() { console.log('You clicked an item'); } render() { const menuOptions = { isOpen: this.state.isMenuOpen, close: this.close, toggle: button type="button" onClick={this.toggle}>Click me!/button>, align: 'right' }; return ( DropdownMenu {...menuOptions}> li>a href="#">Example 1/a>/li> li>button type="button" onClick={this.click}>Example 2/button>/li> /DropdownMenu> ); }}or..var React = require('react');var DropdownMenu = require('react-dd-menu');var Example = React.createClass({ getInitialState: function() { return { isMenuOpen: false }; }, toggle: function() { this.setState({ isMenuOpen: !this.state.isMenuOpen }); }, close: function() { this.setState({ isMenuOpen: false }); }, click: function() { console.log('You clicked an item'); }, render: function() { var menuOptions = { isOpen: this.state.isMenuOpen, close: this.close, toggle: button type="button" onClick={this.toggle}>Click me!/button>, align: 'right' } return ( DropdownMenu {...menuOptions}> li>a href="#">Example 1/a>/li> li>button type="button" onClick={this.click}>Example 2/button>/li> /DropdownMenu> ); }});Nested Menu Example'use strict';import

React from 'react';import DropdownMenu, { NestedDropdownMenu } from 'react-dd-menu';class Example extends React.Component { state = { isMenuOpen: false }; toggle = () => { this.setState({ isMenuOpen: !this.state.isMenuOpen }); } close = () => { this.setState({ isMenuOpen: false }); }; click = () => { console.log('You clicked an item'); }; render() { const menuOptions = { isOpen: this.state.isMenuOpen, close: this.close, toggle: button type="button" onClick={this.toggle}>Click me!/button>, align: 'right', }; const nestedProps = { toggle: a href="#">Hover me for Nested Menu!/a>, animate: true, }; return ( DropdownMenu {...menuOptions}> li>a href="#">Example 1/a>/li> li>button type="button" onClick={this.click}>Example 2/button>/li> li role="separator" className="separator" /> NestedDropdownMenu {...nestedProps}> li>a href="#">I am in a Nested Menu!/a>/li> /NestedDropdownMenu> /DropdownMenu> ); }}Contributors/Local ChangesTo rebuild the source:This will output all the css and js files into ./dist;Versions0.0.2 - Fixed removing the click event listener0.0.3 - Positioning fixes and convenience props for different dropdown menu configs0.0.4 - Fixed width for firefox and added convenience props for sizes0.0.5 - Fixed Button font size, added examples1.0.0 - Added nested dropdown menus, a separator class, drop-up? menus.1.0.1 - Fixed exports for ES5 :(1.0.2 - Added delay to nested dropdown menu closing and added github page for examples.1.0.3 - Fixed problem with multiple menus and added ability to disable animation1.0.4 - Upgraded to React 0.14.01.0.5 - Added ability to disable onClickInside and onClickOutside close of the menus. Added Touch/click support for nested menus.1.0.6 - No new features. Upgraded dev stuff to babel 6 and separated example1.0.7 - Updated to support React 15 as peer dependencies. No real changes needed2.0.0 - Removed PureRenderMixin peerDependecy and switched to PureComponent instead.2.0.1 - Updated for React 15.52.0.2 - Small bugfix for any child elements that had onClick handlers. [#52]