1 line
8.8 KiB
JSON
1 line
8.8 KiB
JSON
{"ast":null,"code":"import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _assertThisInitialized from \"@babel/runtime/helpers/esm/assertThisInitialized\";\nimport _inheritsLoose from \"@babel/runtime/helpers/esm/inheritsLoose\";\n/* eslint react/no-find-dom-node: 0 */\n// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-find-dom-node.md\n\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { Manager } from 'react-popper';\nimport classNames from 'classnames';\nimport { DropdownContext } from './DropdownContext';\nimport { mapToCssModules, omit, keyCodes, tagPropType } from './utils';\nvar propTypes = {\n a11y: PropTypes.bool,\n disabled: PropTypes.bool,\n direction: PropTypes.oneOf(['up', 'down', 'left', 'right']),\n group: PropTypes.bool,\n isOpen: PropTypes.bool,\n nav: PropTypes.bool,\n active: PropTypes.bool,\n addonType: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['prepend', 'append'])]),\n size: PropTypes.string,\n tag: tagPropType,\n toggle: PropTypes.func,\n children: PropTypes.node,\n className: PropTypes.string,\n cssModule: PropTypes.object,\n inNavbar: PropTypes.bool,\n setActiveFromChild: PropTypes.bool\n};\nvar defaultProps = {\n a11y: true,\n isOpen: false,\n direction: 'down',\n nav: false,\n active: false,\n addonType: false,\n inNavbar: false,\n setActiveFromChild: false\n};\n\nvar Dropdown = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(Dropdown, _React$Component);\n\n function Dropdown(props) {\n var _this;\n\n _this = _React$Component.call(this, props) || this;\n _this.addEvents = _this.addEvents.bind(_assertThisInitialized(_this));\n _this.handleDocumentClick = _this.handleDocumentClick.bind(_assertThisInitialized(_this));\n _this.handleKeyDown = _this.handleKeyDown.bind(_assertThisInitialized(_this));\n _this.removeEvents = _this.removeEvents.bind(_assertThisInitialized(_this));\n _this.toggle = _this.toggle.bind(_assertThisInitialized(_this));\n _this.containerRef = React.createRef();\n return _this;\n }\n\n var _proto = Dropdown.prototype;\n\n _proto.getContextValue = function getContextValue() {\n return {\n toggle: this.toggle,\n isOpen: this.props.isOpen,\n direction: this.props.direction === 'down' && this.props.dropup ? 'up' : this.props.direction,\n inNavbar: this.props.inNavbar,\n disabled: this.props.disabled\n };\n };\n\n _proto.componentDidMount = function componentDidMount() {\n this.handleProps();\n };\n\n _proto.componentDidUpdate = function componentDidUpdate(prevProps) {\n if (this.props.isOpen !== prevProps.isOpen) {\n this.handleProps();\n }\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n this.removeEvents();\n };\n\n _proto.getContainer = function getContainer() {\n return this.containerRef.current;\n };\n\n _proto.getMenuCtrl = function getMenuCtrl() {\n if (this._$menuCtrl) return this._$menuCtrl;\n this._$menuCtrl = this.getContainer().querySelector('[aria-expanded]');\n return this._$menuCtrl;\n };\n\n _proto.getMenuItems = function getMenuItems() {\n return [].slice.call(this.getContainer().querySelectorAll('[role=\"menuitem\"]'));\n };\n\n _proto.addEvents = function addEvents() {\n var _this2 = this;\n\n ['click', 'touchstart', 'keyup'].forEach(function (event) {\n return document.addEventListener(event, _this2.handleDocumentClick, true);\n });\n };\n\n _proto.removeEvents = function removeEvents() {\n var _this3 = this;\n\n ['click', 'touchstart', 'keyup'].forEach(function (event) {\n return document.removeEventListener(event, _this3.handleDocumentClick, true);\n });\n };\n\n _proto.handleDocumentClick = function handleDocumentClick(e) {\n if (e && (e.which === 3 || e.type === 'keyup' && e.which !== keyCodes.tab)) return;\n var container = this.getContainer();\n\n if (container.contains(e.target) && container !== e.target && (e.type !== 'keyup' || e.which === keyCodes.tab)) {\n return;\n }\n\n this.toggle(e);\n };\n\n _proto.handleKeyDown = function handleKeyDown(e) {\n var _this4 = this;\n\n if (/input|textarea/i.test(e.target.tagName) || keyCodes.tab === e.which && (e.target.getAttribute('role') !== 'menuitem' || !this.props.a11y)) {\n return;\n }\n\n e.preventDefault();\n if (this.props.disabled) return;\n\n if (this.getMenuCtrl() === e.target) {\n if (!this.props.isOpen && [keyCodes.space, keyCodes.enter, keyCodes.up, keyCodes.down].indexOf(e.which) > -1) {\n this.toggle(e);\n setTimeout(function () {\n return _this4.getMenuItems()[0].focus();\n });\n } else if (this.props.isOpen && e.which === keyCodes.esc) {\n this.toggle(e);\n }\n }\n\n if (this.props.isOpen && e.target.getAttribute('role') === 'menuitem') {\n if ([keyCodes.tab, keyCodes.esc].indexOf(e.which) > -1) {\n this.toggle(e);\n this.getMenuCtrl().focus();\n } else if ([keyCodes.space, keyCodes.enter].indexOf(e.which) > -1) {\n e.target.click();\n this.getMenuCtrl().focus();\n } else if ([keyCodes.down, keyCodes.up].indexOf(e.which) > -1 || [keyCodes.n, keyCodes.p].indexOf(e.which) > -1 && e.ctrlKey) {\n var $menuitems = this.getMenuItems();\n var index = $menuitems.indexOf(e.target);\n\n if (keyCodes.up === e.which || keyCodes.p === e.which && e.ctrlKey) {\n index = index !== 0 ? index - 1 : $menuitems.length - 1;\n } else if (keyCodes.down === e.which || keyCodes.n === e.which && e.ctrlKey) {\n index = index === $menuitems.length - 1 ? 0 : index + 1;\n }\n\n $menuitems[index].focus();\n } else if (keyCodes.end === e.which) {\n var _$menuitems = this.getMenuItems();\n\n _$menuitems[_$menuitems.length - 1].focus();\n } else if (keyCodes.home === e.which) {\n var _$menuitems2 = this.getMenuItems();\n\n _$menuitems2[0].focus();\n } else if (e.which >= 48 && e.which <= 90) {\n var _$menuitems3 = this.getMenuItems();\n\n var charPressed = String.fromCharCode(e.which).toLowerCase();\n\n for (var i = 0; i < _$menuitems3.length; i += 1) {\n var firstLetter = _$menuitems3[i].textContent && _$menuitems3[i].textContent[0].toLowerCase();\n\n if (firstLetter === charPressed) {\n _$menuitems3[i].focus();\n\n break;\n }\n }\n }\n }\n };\n\n _proto.handleProps = function handleProps() {\n if (this.props.isOpen) {\n this.addEvents();\n } else {\n this.removeEvents();\n }\n };\n\n _proto.toggle = function toggle(e) {\n if (this.props.disabled) {\n return e && e.preventDefault();\n }\n\n return this.props.toggle(e);\n };\n\n _proto.render = function render() {\n var _classNames, _ref;\n\n var _omit = omit(this.props, ['toggle', 'disabled', 'inNavbar', 'a11y']),\n className = _omit.className,\n cssModule = _omit.cssModule,\n direction = _omit.direction,\n isOpen = _omit.isOpen,\n group = _omit.group,\n size = _omit.size,\n nav = _omit.nav,\n setActiveFromChild = _omit.setActiveFromChild,\n active = _omit.active,\n addonType = _omit.addonType,\n tag = _omit.tag,\n attrs = _objectWithoutPropertiesLoose(_omit, [\"className\", \"cssModule\", \"direction\", \"isOpen\", \"group\", \"size\", \"nav\", \"setActiveFromChild\", \"active\", \"addonType\", \"tag\"]);\n\n var Tag = tag || (nav ? 'li' : 'div');\n var subItemIsActive = false;\n\n if (setActiveFromChild) {\n React.Children.map(this.props.children[1].props.children, function (dropdownItem) {\n if (dropdownItem && dropdownItem.props.active) subItemIsActive = true;\n });\n }\n\n var classes = mapToCssModules(classNames(className, direction !== 'down' && \"drop\" + direction, nav && active ? 'active' : false, setActiveFromChild && subItemIsActive ? 'active' : false, (_classNames = {}, _classNames[\"input-group-\" + addonType] = addonType, _classNames['btn-group'] = group, _classNames[\"btn-group-\" + size] = !!size, _classNames.dropdown = !group && !addonType, _classNames.show = isOpen, _classNames['nav-item'] = nav, _classNames)), cssModule);\n return React.createElement(DropdownContext.Provider, {\n value: this.getContextValue()\n }, React.createElement(Manager, null, React.createElement(Tag, _extends({}, attrs, (_ref = {}, _ref[typeof Tag === 'string' ? 'ref' : 'innerRef'] = this.containerRef, _ref), {\n onKeyDown: this.handleKeyDown,\n className: classes\n }))));\n };\n\n return Dropdown;\n}(React.Component);\n\nDropdown.propTypes = propTypes;\nDropdown.defaultProps = defaultProps;\nexport default Dropdown;","map":null,"metadata":{},"sourceType":"module"} |