rsuite 5.10.0 → 5.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ButtonToolbar/styles/index.less +1 -1
- package/CHANGELOG.md +28 -0
- package/Nav/styles/index.less +7 -1
- package/Navbar/styles/index.less +6 -1
- package/README.md +4 -0
- package/Sidenav/styles/index.less +7 -5
- package/cjs/Cascader/DropdownMenu.js +8 -3
- package/cjs/DateRangePicker/DateRangePicker.d.ts +2 -0
- package/cjs/DateRangePicker/DateRangePicker.js +4 -2
- package/cjs/Disclosure/Disclosure.d.ts +1 -1
- package/cjs/Disclosure/DisclosureContext.d.ts +1 -1
- package/cjs/Dropdown/Dropdown.js +26 -110
- package/cjs/Dropdown/DropdownItem.js +14 -58
- package/cjs/Dropdown/DropdownMenu.js +32 -76
- package/cjs/Dropdown/DropdownToggle.js +4 -17
- package/cjs/Form/Form.js +21 -7
- package/cjs/Form/FormContext.d.ts +18 -13
- package/cjs/Form/useSchemaModel.d.ts +9 -0
- package/cjs/Form/useSchemaModel.js +46 -0
- package/cjs/FormControl/FormControl.d.ts +3 -0
- package/cjs/FormControl/FormControl.js +9 -2
- package/cjs/FormControl/useRegisterModel.d.ts +4 -0
- package/cjs/FormControl/useRegisterModel.js +20 -0
- package/cjs/Menu/Menu.d.ts +1 -0
- package/cjs/Menu/Menu.js +1 -0
- package/cjs/Menu/MenuItem.d.ts +1 -0
- package/cjs/Menu/MenuItem.js +1 -0
- package/cjs/Menu/Menubar.d.ts +3 -0
- package/cjs/Menu/Menubar.js +14 -3
- package/cjs/Nav/Nav.d.ts +7 -2
- package/cjs/Nav/Nav.js +105 -5
- package/cjs/Nav/NavContext.d.ts +2 -8
- package/cjs/Nav/NavContext.js +1 -7
- package/cjs/Nav/NavDropdown.d.ts +71 -0
- package/cjs/Nav/NavDropdown.js +193 -0
- package/cjs/Nav/NavDropdownItem.d.ts +39 -0
- package/cjs/Nav/NavDropdownItem.js +141 -0
- package/cjs/Nav/NavDropdownMenu.d.ts +26 -0
- package/cjs/Nav/NavDropdownMenu.js +156 -0
- package/cjs/Nav/NavDropdownToggle.d.ts +21 -0
- package/cjs/Nav/NavDropdownToggle.js +74 -0
- package/cjs/Nav/NavItem.d.ts +2 -0
- package/cjs/Nav/NavItem.js +13 -26
- package/cjs/Nav/NavMenu.d.ts +38 -0
- package/cjs/Nav/NavMenu.js +122 -0
- package/cjs/Navbar/NavbarDropdown.d.ts +57 -0
- package/cjs/Navbar/NavbarDropdown.js +147 -0
- package/cjs/Navbar/NavbarDropdownItem.d.ts +41 -0
- package/cjs/Navbar/NavbarDropdownItem.js +149 -0
- package/cjs/Navbar/NavbarDropdownMenu.d.ts +37 -0
- package/cjs/Navbar/NavbarDropdownMenu.js +155 -0
- package/cjs/Navbar/NavbarDropdownToggle.d.ts +19 -0
- package/cjs/Navbar/NavbarDropdownToggle.js +72 -0
- package/cjs/Navbar/NavbarItem.d.ts +5 -2
- package/cjs/Navbar/NavbarItem.js +10 -4
- package/cjs/Picker/utils.js +22 -15
- package/cjs/Sidenav/ExpandedSidenavDropdown.d.ts +43 -0
- package/cjs/Sidenav/ExpandedSidenavDropdown.js +166 -0
- package/cjs/Sidenav/ExpandedSidenavDropdownItem.d.ts +31 -0
- package/cjs/Sidenav/ExpandedSidenavDropdownItem.js +141 -0
- package/cjs/Sidenav/ExpandedSidenavDropdownMenu.d.ts +26 -0
- package/cjs/Sidenav/ExpandedSidenavDropdownMenu.js +145 -0
- package/cjs/Sidenav/Sidenav.d.ts +8 -2
- package/cjs/Sidenav/Sidenav.js +1 -2
- package/cjs/Sidenav/SidenavDropdown.d.ts +30 -8
- package/cjs/Sidenav/SidenavDropdown.js +144 -73
- package/cjs/Sidenav/SidenavDropdownItem.d.ts +22 -5
- package/cjs/Sidenav/SidenavDropdownItem.js +88 -72
- package/cjs/Sidenav/SidenavDropdownMenu.d.ts +26 -16
- package/cjs/Sidenav/SidenavDropdownMenu.js +122 -90
- package/cjs/Sidenav/SidenavDropdownToggle.d.ts +19 -0
- package/cjs/Sidenav/SidenavDropdownToggle.js +72 -0
- package/cjs/Sidenav/SidenavItem.d.ts +3 -0
- package/cjs/Sidenav/SidenavItem.js +22 -14
- package/cjs/utils/deprecateComponent.js +4 -6
- package/cjs/utils/deprecatePropType.d.ts +1 -5
- package/cjs/utils/deprecatePropType.js +7 -14
- package/cjs/utils/dom.d.ts +1 -1
- package/cjs/utils/useInternalId.d.ts +1 -1
- package/cjs/utils/useInternalId.js +2 -2
- package/cjs/utils/warnOnce.d.ts +9 -0
- package/cjs/utils/warnOnce.js +22 -0
- package/dist/rsuite-rtl.css +19 -10
- package/dist/rsuite-rtl.min.css +1 -1
- package/dist/rsuite-rtl.min.css.map +1 -1
- package/dist/rsuite.css +19 -10
- package/dist/rsuite.js +300 -25
- package/dist/rsuite.js.map +1 -1
- package/dist/rsuite.min.css +1 -1
- package/dist/rsuite.min.css.map +1 -1
- package/dist/rsuite.min.js +1 -1
- package/dist/rsuite.min.js.map +1 -1
- package/esm/Cascader/DropdownMenu.js +8 -3
- package/esm/DateRangePicker/DateRangePicker.d.ts +2 -0
- package/esm/DateRangePicker/DateRangePicker.js +4 -2
- package/esm/Disclosure/Disclosure.d.ts +1 -1
- package/esm/Disclosure/DisclosureContext.d.ts +1 -1
- package/esm/Dropdown/Dropdown.js +25 -105
- package/esm/Dropdown/DropdownItem.js +13 -55
- package/esm/Dropdown/DropdownMenu.js +31 -76
- package/esm/Dropdown/DropdownToggle.js +4 -14
- package/esm/Form/Form.js +19 -7
- package/esm/Form/FormContext.d.ts +18 -13
- package/esm/Form/useSchemaModel.d.ts +9 -0
- package/esm/Form/useSchemaModel.js +39 -0
- package/esm/FormControl/FormControl.d.ts +3 -0
- package/esm/FormControl/FormControl.js +9 -6
- package/esm/FormControl/useRegisterModel.d.ts +4 -0
- package/esm/FormControl/useRegisterModel.js +14 -0
- package/esm/Menu/Menu.d.ts +1 -0
- package/esm/Menu/Menu.js +1 -0
- package/esm/Menu/MenuItem.d.ts +1 -0
- package/esm/Menu/MenuItem.js +1 -0
- package/esm/Menu/Menubar.d.ts +3 -0
- package/esm/Menu/Menubar.js +13 -3
- package/esm/Nav/Nav.d.ts +7 -2
- package/esm/Nav/Nav.js +96 -5
- package/esm/Nav/NavContext.d.ts +2 -8
- package/esm/Nav/NavContext.js +1 -6
- package/esm/Nav/NavDropdown.d.ts +71 -0
- package/esm/Nav/NavDropdown.js +170 -0
- package/esm/Nav/NavDropdownItem.d.ts +39 -0
- package/esm/Nav/NavDropdownItem.js +123 -0
- package/esm/Nav/NavDropdownMenu.d.ts +26 -0
- package/esm/Nav/NavDropdownMenu.js +138 -0
- package/esm/Nav/NavDropdownToggle.d.ts +21 -0
- package/esm/Nav/NavDropdownToggle.js +57 -0
- package/esm/Nav/NavItem.d.ts +2 -0
- package/esm/Nav/NavItem.js +13 -21
- package/esm/Nav/NavMenu.d.ts +38 -0
- package/esm/Nav/NavMenu.js +98 -0
- package/esm/Navbar/NavbarDropdown.d.ts +57 -0
- package/esm/Navbar/NavbarDropdown.js +124 -0
- package/esm/Navbar/NavbarDropdownItem.d.ts +41 -0
- package/esm/Navbar/NavbarDropdownItem.js +128 -0
- package/esm/Navbar/NavbarDropdownMenu.d.ts +37 -0
- package/esm/Navbar/NavbarDropdownMenu.js +135 -0
- package/esm/Navbar/NavbarDropdownToggle.d.ts +19 -0
- package/esm/Navbar/NavbarDropdownToggle.js +55 -0
- package/esm/Navbar/NavbarItem.d.ts +5 -2
- package/esm/Navbar/NavbarItem.js +11 -4
- package/esm/Picker/utils.js +22 -14
- package/esm/Sidenav/ExpandedSidenavDropdown.d.ts +43 -0
- package/esm/Sidenav/ExpandedSidenavDropdown.js +140 -0
- package/esm/Sidenav/ExpandedSidenavDropdownItem.d.ts +31 -0
- package/esm/Sidenav/ExpandedSidenavDropdownItem.js +120 -0
- package/esm/Sidenav/ExpandedSidenavDropdownMenu.d.ts +26 -0
- package/esm/Sidenav/ExpandedSidenavDropdownMenu.js +121 -0
- package/esm/Sidenav/Sidenav.d.ts +8 -2
- package/esm/Sidenav/Sidenav.js +1 -2
- package/esm/Sidenav/SidenavDropdown.d.ts +30 -8
- package/esm/Sidenav/SidenavDropdown.js +145 -75
- package/esm/Sidenav/SidenavDropdownItem.d.ts +22 -5
- package/esm/Sidenav/SidenavDropdownItem.js +87 -71
- package/esm/Sidenav/SidenavDropdownMenu.d.ts +26 -16
- package/esm/Sidenav/SidenavDropdownMenu.js +122 -86
- package/esm/Sidenav/SidenavDropdownToggle.d.ts +19 -0
- package/esm/Sidenav/SidenavDropdownToggle.js +55 -0
- package/esm/Sidenav/SidenavItem.d.ts +3 -0
- package/esm/Sidenav/SidenavItem.js +23 -15
- package/esm/utils/deprecateComponent.js +3 -4
- package/esm/utils/deprecatePropType.d.ts +1 -5
- package/esm/utils/deprecatePropType.js +3 -13
- package/esm/utils/dom.d.ts +1 -1
- package/esm/utils/useInternalId.d.ts +1 -1
- package/esm/utils/useInternalId.js +2 -2
- package/esm/utils/warnOnce.d.ts +9 -0
- package/esm/utils/warnOnce.js +18 -0
- package/package.json +1 -1
- package/styles/variables.less +1 -0
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
6
|
+
|
|
7
|
+
exports.__esModule = true;
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
|
|
12
|
+
var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
|
|
13
|
+
|
|
14
|
+
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
15
|
+
|
|
16
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
17
|
+
|
|
18
|
+
var _omit2 = _interopRequireDefault(require("lodash/omit"));
|
|
19
|
+
|
|
20
|
+
var _Menu = _interopRequireDefault(require("../Menu/Menu"));
|
|
21
|
+
|
|
22
|
+
var _MenuItem = _interopRequireDefault(require("../Menu/MenuItem"));
|
|
23
|
+
|
|
24
|
+
var _utils = require("../utils");
|
|
25
|
+
|
|
26
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
27
|
+
|
|
28
|
+
var _AngleLeft = _interopRequireDefault(require("@rsuite/icons/legacy/AngleLeft"));
|
|
29
|
+
|
|
30
|
+
var _AngleRight = _interopRequireDefault(require("@rsuite/icons/legacy/AngleRight"));
|
|
31
|
+
|
|
32
|
+
var _useCustom2 = _interopRequireDefault(require("../utils/useCustom"));
|
|
33
|
+
|
|
34
|
+
var _NavContext = _interopRequireDefault(require("./NavContext"));
|
|
35
|
+
|
|
36
|
+
var _templateObject, _templateObject2;
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* @private
|
|
40
|
+
*/
|
|
41
|
+
var NavDropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
42
|
+
var nav = (0, _react.useContext)(_NavContext.default);
|
|
43
|
+
|
|
44
|
+
if (!nav) {
|
|
45
|
+
throw new Error('<Nav.Dropdown.Menu> should be used within a <Nav> component.');
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
var onToggle = props.onToggle,
|
|
49
|
+
eventKey = props.eventKey,
|
|
50
|
+
title = props.title,
|
|
51
|
+
_props$classPrefix = props.classPrefix,
|
|
52
|
+
classPrefix = _props$classPrefix === void 0 ? 'dropdown-menu' : _props$classPrefix,
|
|
53
|
+
children = props.children,
|
|
54
|
+
rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["onToggle", "eventKey", "title", "classPrefix", "children"]);
|
|
55
|
+
|
|
56
|
+
var _useCustom = (0, _useCustom2.default)('DropdownMenu'),
|
|
57
|
+
rtl = _useCustom.rtl;
|
|
58
|
+
|
|
59
|
+
var handleToggleSubmenu = (0, _react.useCallback)(function (open, event) {
|
|
60
|
+
onToggle === null || onToggle === void 0 ? void 0 : onToggle(open, eventKey, event);
|
|
61
|
+
}, [eventKey, onToggle]);
|
|
62
|
+
|
|
63
|
+
var _useClassNames = (0, _utils.useClassNames)(classPrefix),
|
|
64
|
+
prefix = _useClassNames.prefix;
|
|
65
|
+
|
|
66
|
+
var _useClassNames2 = (0, _utils.useClassNames)('dropdown-menu'),
|
|
67
|
+
withMenuClassPrefix = _useClassNames2.withClassPrefix,
|
|
68
|
+
mergeMenuClassName = _useClassNames2.merge;
|
|
69
|
+
|
|
70
|
+
var _useClassNames3 = (0, _utils.useClassNames)('dropdown-item'),
|
|
71
|
+
mergeItemClassNames = _useClassNames3.merge,
|
|
72
|
+
withItemClassPrefix = _useClassNames3.withClassPrefix,
|
|
73
|
+
prefixItemClassName = _useClassNames3.prefix; // Parent menu exists. This is a submenu.
|
|
74
|
+
// Should render a `menuitem` that controls this submenu.
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
var _omit = (0, _omit2.default)(rest, ['trigger']),
|
|
78
|
+
icon = _omit.icon,
|
|
79
|
+
className = _omit.className,
|
|
80
|
+
disabled = _omit.disabled,
|
|
81
|
+
menuProps = (0, _objectWithoutPropertiesLoose2.default)(_omit, ["icon", "className", "disabled"]);
|
|
82
|
+
|
|
83
|
+
var Icon = rtl ? _AngleLeft.default : _AngleRight.default;
|
|
84
|
+
return /*#__PURE__*/_react.default.createElement(_Menu.default, {
|
|
85
|
+
openMenuOn: ['mouseover', 'click'],
|
|
86
|
+
renderMenuButton: function renderMenuButton(_ref, buttonRef) {
|
|
87
|
+
var open = _ref.open,
|
|
88
|
+
menuButtonProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["open"]);
|
|
89
|
+
return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
|
|
90
|
+
disabled: disabled
|
|
91
|
+
}, function (_ref2, menuitemRef) {
|
|
92
|
+
var selected = _ref2.selected,
|
|
93
|
+
active = _ref2.active,
|
|
94
|
+
menuitem = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ["selected", "active"]);
|
|
95
|
+
var classes = mergeItemClassNames(className, prefixItemClassName(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["toggle"]))), withItemClassPrefix({
|
|
96
|
+
'with-icon': icon,
|
|
97
|
+
open: open,
|
|
98
|
+
active: selected,
|
|
99
|
+
disabled: disabled,
|
|
100
|
+
focus: active
|
|
101
|
+
}));
|
|
102
|
+
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
|
|
103
|
+
ref: (0, _utils.mergeRefs)(buttonRef, menuitemRef),
|
|
104
|
+
className: classes,
|
|
105
|
+
"data-event-key": eventKey,
|
|
106
|
+
"data-event-key-type": typeof eventKey
|
|
107
|
+
}, menuitem, (0, _omit2.default)(menuButtonProps, ['role'])), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
|
|
108
|
+
className: prefix('menu-icon')
|
|
109
|
+
}), title, /*#__PURE__*/_react.default.createElement(Icon, {
|
|
110
|
+
className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["toggle-icon"])))
|
|
111
|
+
}));
|
|
112
|
+
});
|
|
113
|
+
},
|
|
114
|
+
renderMenuPopup: function renderMenuPopup(_ref3, popupRef) {
|
|
115
|
+
var open = _ref3.open,
|
|
116
|
+
popupProps = (0, _objectWithoutPropertiesLoose2.default)(_ref3, ["open"]);
|
|
117
|
+
var menuClassName = mergeMenuClassName(className, withMenuClassPrefix());
|
|
118
|
+
return /*#__PURE__*/_react.default.createElement("ul", (0, _extends2.default)({
|
|
119
|
+
ref: popupRef,
|
|
120
|
+
className: menuClassName,
|
|
121
|
+
hidden: !open
|
|
122
|
+
}, popupProps, menuProps), children);
|
|
123
|
+
},
|
|
124
|
+
onToggleMenu: handleToggleSubmenu
|
|
125
|
+
}, function (_ref4, menuContainerRef) {
|
|
126
|
+
var open = _ref4.open,
|
|
127
|
+
menuContainer = (0, _objectWithoutPropertiesLoose2.default)(_ref4, ["open"]);
|
|
128
|
+
var classes = mergeItemClassNames(className, withItemClassPrefix({
|
|
129
|
+
disabled: disabled,
|
|
130
|
+
open: open,
|
|
131
|
+
submenu: true
|
|
132
|
+
}));
|
|
133
|
+
return /*#__PURE__*/_react.default.createElement("li", (0, _extends2.default)({
|
|
134
|
+
ref: (0, _utils.mergeRefs)(ref, menuContainerRef),
|
|
135
|
+
className: classes
|
|
136
|
+
}, menuContainer));
|
|
137
|
+
});
|
|
138
|
+
});
|
|
139
|
+
|
|
140
|
+
NavDropdownMenu.displayName = 'Nav.Dropdown.Menu';
|
|
141
|
+
NavDropdownMenu.propTypes = {
|
|
142
|
+
active: _propTypes.default.bool,
|
|
143
|
+
className: _propTypes.default.string,
|
|
144
|
+
children: _propTypes.default.node,
|
|
145
|
+
icon: _propTypes.default.any,
|
|
146
|
+
classPrefix: _propTypes.default.string,
|
|
147
|
+
pullLeft: _propTypes.default.bool,
|
|
148
|
+
title: _propTypes.default.node,
|
|
149
|
+
open: _propTypes.default.bool,
|
|
150
|
+
eventKey: _propTypes.default.any,
|
|
151
|
+
expanded: _propTypes.default.bool,
|
|
152
|
+
collapsible: _propTypes.default.bool,
|
|
153
|
+
onToggle: _propTypes.default.func
|
|
154
|
+
};
|
|
155
|
+
var _default = NavDropdownMenu;
|
|
156
|
+
exports.default = _default;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Button from '../Button';
|
|
3
|
+
import { WithAsProps, RsRefForwardingComponent, TypeAttributes } from '../@types/common';
|
|
4
|
+
import { NavItemProps } from './NavItem';
|
|
5
|
+
export interface NavDropdownToggleProps extends WithAsProps {
|
|
6
|
+
icon?: NavItemProps['icon'];
|
|
7
|
+
noCaret?: boolean;
|
|
8
|
+
renderToggle?: (props: WithAsProps, ref: React.Ref<any>) => any;
|
|
9
|
+
placement?: TypeAttributes.Placement8;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* @private this component is not supposed to be used directly
|
|
13
|
+
* Instead it's rendered by a <Nav.Menu> call
|
|
14
|
+
*
|
|
15
|
+
* <Nav>
|
|
16
|
+
* <Nav.Menu> -> This will render <NavDropdown> component that renders a <NavDropdownToggle>
|
|
17
|
+
* </Nav.Menu>
|
|
18
|
+
* </Nav>
|
|
19
|
+
*/
|
|
20
|
+
declare const NavDropdownToggle: RsRefForwardingComponent<typeof Button, NavDropdownToggleProps>;
|
|
21
|
+
export default NavDropdownToggle;
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
exports.__esModule = true;
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
|
|
10
|
+
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
11
|
+
|
|
12
|
+
var _react = _interopRequireDefault(require("react"));
|
|
13
|
+
|
|
14
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
15
|
+
|
|
16
|
+
var _ArrowDownLine = _interopRequireDefault(require("@rsuite/icons/ArrowDownLine"));
|
|
17
|
+
|
|
18
|
+
var _utils = require("../utils");
|
|
19
|
+
|
|
20
|
+
var _NavItem = _interopRequireDefault(require("./NavItem"));
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* @private this component is not supposed to be used directly
|
|
24
|
+
* Instead it's rendered by a <Nav.Menu> call
|
|
25
|
+
*
|
|
26
|
+
* <Nav>
|
|
27
|
+
* <Nav.Menu> -> This will render <NavDropdown> component that renders a <NavDropdownToggle>
|
|
28
|
+
* </Nav.Menu>
|
|
29
|
+
* </Nav>
|
|
30
|
+
*/
|
|
31
|
+
var NavDropdownToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
32
|
+
var _props$as = props.as,
|
|
33
|
+
Component = _props$as === void 0 ? _NavItem.default : _props$as,
|
|
34
|
+
className = props.className,
|
|
35
|
+
_props$classPrefix = props.classPrefix,
|
|
36
|
+
classPrefix = _props$classPrefix === void 0 ? 'dropdown-toggle' : _props$classPrefix,
|
|
37
|
+
renderToggle = props.renderToggle,
|
|
38
|
+
children = props.children,
|
|
39
|
+
noCaret = props.noCaret,
|
|
40
|
+
rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "renderToggle", "children", "noCaret"]);
|
|
41
|
+
|
|
42
|
+
var _useClassNames = (0, _utils.useClassNames)(classPrefix),
|
|
43
|
+
withClassPrefix = _useClassNames.withClassPrefix,
|
|
44
|
+
merge = _useClassNames.merge;
|
|
45
|
+
|
|
46
|
+
var _useClassNames2 = (0, _utils.useClassNames)('nav-item'),
|
|
47
|
+
prefixNavItem = _useClassNames2.prefix;
|
|
48
|
+
|
|
49
|
+
var classes = merge(className, withClassPrefix({
|
|
50
|
+
'no-caret': noCaret
|
|
51
|
+
}));
|
|
52
|
+
|
|
53
|
+
var toggle = /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
|
|
54
|
+
ref: ref,
|
|
55
|
+
className: classes
|
|
56
|
+
}), children, !noCaret && /*#__PURE__*/_react.default.createElement(_ArrowDownLine.default, {
|
|
57
|
+
className: prefixNavItem('caret')
|
|
58
|
+
}));
|
|
59
|
+
|
|
60
|
+
return renderToggle ? renderToggle(rest, ref) : toggle;
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
NavDropdownToggle.displayName = 'Nav.Dropdown.Toggle';
|
|
64
|
+
NavDropdownToggle.propTypes = {
|
|
65
|
+
className: _propTypes.default.string,
|
|
66
|
+
children: _propTypes.default.node,
|
|
67
|
+
classPrefix: _propTypes.default.string,
|
|
68
|
+
noCaret: _propTypes.default.bool,
|
|
69
|
+
as: _propTypes.default.elementType,
|
|
70
|
+
renderToggle: _propTypes.default.func,
|
|
71
|
+
placement: _propTypes.default.oneOf(['bottomStart', 'bottomEnd', 'topStart', 'topEnd', 'leftStart', 'rightStart', 'leftEnd', 'rightEnd'])
|
|
72
|
+
};
|
|
73
|
+
var _default = NavDropdownToggle;
|
|
74
|
+
exports.default = _default;
|
package/cjs/Nav/NavItem.d.ts
CHANGED
|
@@ -21,6 +21,8 @@ export interface NavItemProps<T = string> extends WithAsProps, Omit<React.HTMLAt
|
|
|
21
21
|
}
|
|
22
22
|
/**
|
|
23
23
|
* The <Nav.Item> API
|
|
24
|
+
* When used as direct child of <Nav>, render the NavItem
|
|
25
|
+
* When used within a <Nav.Menu>, render the NavDropdownItem
|
|
24
26
|
*/
|
|
25
27
|
declare const NavItem: RsRefForwardingComponent<'a', NavItemProps>;
|
|
26
28
|
export default NavItem;
|
package/cjs/Nav/NavItem.js
CHANGED
|
@@ -23,20 +23,20 @@ var _SafeAnchor = _interopRequireDefault(require("../SafeAnchor"));
|
|
|
23
23
|
|
|
24
24
|
var _utils = require("../utils");
|
|
25
25
|
|
|
26
|
-
var _Sidenav = require("../Sidenav/Sidenav");
|
|
27
|
-
|
|
28
26
|
var _NavContext = _interopRequireDefault(require("./NavContext"));
|
|
29
27
|
|
|
30
|
-
var _Navbar = require("../Navbar/Navbar");
|
|
31
|
-
|
|
32
|
-
var _SidenavItem = _interopRequireDefault(require("../Sidenav/SidenavItem"));
|
|
33
|
-
|
|
34
|
-
var _NavbarItem = _interopRequireDefault(require("../Navbar/NavbarItem"));
|
|
35
|
-
|
|
36
28
|
/**
|
|
37
29
|
* The <Nav.Item> API
|
|
30
|
+
* When used as direct child of <Nav>, render the NavItem
|
|
31
|
+
* When used within a <Nav.Menu>, render the NavDropdownItem
|
|
38
32
|
*/
|
|
39
33
|
var NavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
34
|
+
var nav = (0, _react.useContext)(_NavContext.default);
|
|
35
|
+
|
|
36
|
+
if (!nav) {
|
|
37
|
+
throw new Error('<Nav.Item> must be rendered within a <Nav> component.');
|
|
38
|
+
}
|
|
39
|
+
|
|
40
40
|
var _props$as = props.as,
|
|
41
41
|
Component = _props$as === void 0 ? _SafeAnchor.default : _props$as,
|
|
42
42
|
activeProp = props.active,
|
|
@@ -53,18 +53,13 @@ var NavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
53
53
|
onClick = props.onClick,
|
|
54
54
|
onSelectProp = props.onSelect,
|
|
55
55
|
rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "active", "disabled", "eventKey", "className", "classPrefix", "style", "children", "icon", "divider", "panel", "onClick", "onSelect"]);
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
activeKey = _useContext.activeKey,
|
|
59
|
-
onSelectFromNav = _useContext.onSelect;
|
|
60
|
-
|
|
56
|
+
var activeKey = nav.activeKey,
|
|
57
|
+
onSelectFromNav = nav.onSelect;
|
|
61
58
|
var active = activeProp !== null && activeProp !== void 0 ? activeProp : !(0, _isNil.default)(eventKey) && (0, _utils.shallowEqual)(eventKey, activeKey);
|
|
62
59
|
var emitSelect = (0, _react.useCallback)(function (event) {
|
|
63
60
|
onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(eventKey, event);
|
|
64
61
|
onSelectFromNav === null || onSelectFromNav === void 0 ? void 0 : onSelectFromNav(eventKey, event);
|
|
65
62
|
}, [eventKey, onSelectProp, onSelectFromNav]);
|
|
66
|
-
var navbar = (0, _react.useContext)(_Navbar.NavbarContext);
|
|
67
|
-
var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);
|
|
68
63
|
|
|
69
64
|
var _useClassNames = (0, _utils.useClassNames)(classPrefix),
|
|
70
65
|
withClassPrefix = _useClassNames.withClassPrefix,
|
|
@@ -82,10 +77,6 @@ var NavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
82
77
|
}
|
|
83
78
|
}, [disabled, emitSelect, onClick]);
|
|
84
79
|
|
|
85
|
-
if (sidenav) {
|
|
86
|
-
return /*#__PURE__*/_react.default.createElement(_SidenavItem.default, props);
|
|
87
|
-
}
|
|
88
|
-
|
|
89
80
|
if (divider) {
|
|
90
81
|
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
|
|
91
82
|
ref: ref,
|
|
@@ -103,12 +94,6 @@ var NavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
103
94
|
}, rest), children);
|
|
104
95
|
}
|
|
105
96
|
|
|
106
|
-
if (navbar) {
|
|
107
|
-
return /*#__PURE__*/_react.default.createElement(_NavbarItem.default, (0, _extends2.default)({
|
|
108
|
-
ref: ref
|
|
109
|
-
}, props));
|
|
110
|
-
}
|
|
111
|
-
|
|
112
97
|
return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
|
|
113
98
|
ref: ref,
|
|
114
99
|
tabIndex: disabled ? -1 : undefined
|
|
@@ -117,7 +102,9 @@ var NavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
117
102
|
onClick: handleClick,
|
|
118
103
|
style: style,
|
|
119
104
|
"aria-selected": active || undefined
|
|
120
|
-
}), icon
|
|
105
|
+
}), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
|
|
106
|
+
className: prefix('icon')
|
|
107
|
+
}), children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
|
|
121
108
|
});
|
|
122
109
|
|
|
123
110
|
NavItem.displayName = 'Nav.Item';
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React, { Dispatch } from 'react';
|
|
2
|
+
import { NavDropdownProps } from './NavDropdown';
|
|
3
|
+
import { NavDropdownMenuProps } from './NavDropdownMenu';
|
|
4
|
+
export interface NavMenuProps extends NavDropdownProps, Omit<NavDropdownMenuProps, 'onToggle'> {
|
|
5
|
+
}
|
|
6
|
+
export declare type NavMenuState = {
|
|
7
|
+
items: {
|
|
8
|
+
_id: any;
|
|
9
|
+
eventKey?: any;
|
|
10
|
+
active: boolean;
|
|
11
|
+
}[];
|
|
12
|
+
};
|
|
13
|
+
export declare type NavMenuContextProps = [NavMenuState, Dispatch<NavMenuAction>];
|
|
14
|
+
export declare const NavMenuContext: React.Context<NavMenuContextProps | null>;
|
|
15
|
+
export declare enum NavMenuActionType {
|
|
16
|
+
RegisterItem = 0,
|
|
17
|
+
UnregisterItem = 1
|
|
18
|
+
}
|
|
19
|
+
export declare type NavMenuAction = {
|
|
20
|
+
type: NavMenuActionType.RegisterItem;
|
|
21
|
+
payload: {
|
|
22
|
+
_id: any;
|
|
23
|
+
eventKey?: any;
|
|
24
|
+
active: boolean;
|
|
25
|
+
};
|
|
26
|
+
} | {
|
|
27
|
+
type: NavMenuActionType.UnregisterItem;
|
|
28
|
+
payload: {
|
|
29
|
+
_id: any;
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
/**
|
|
33
|
+
* The <Nav.Menu> API
|
|
34
|
+
* When used as direct child of <Nav>, render the NavDropdown
|
|
35
|
+
* When used within another <Nav.Menu>, render the NavDropdownMenu
|
|
36
|
+
*/
|
|
37
|
+
declare const NavMenu: React.ForwardRefExoticComponent<NavMenuProps & React.RefAttributes<any>>;
|
|
38
|
+
export default NavMenu;
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
+
|
|
5
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
6
|
+
|
|
7
|
+
exports.__esModule = true;
|
|
8
|
+
exports.default = exports.NavMenuActionType = exports.NavMenuContext = void 0;
|
|
9
|
+
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
|
|
12
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
+
|
|
14
|
+
var _NavDropdown = _interopRequireDefault(require("./NavDropdown"));
|
|
15
|
+
|
|
16
|
+
var _NavDropdownMenu = _interopRequireDefault(require("./NavDropdownMenu"));
|
|
17
|
+
|
|
18
|
+
var _Sidenav = require("../Sidenav/Sidenav");
|
|
19
|
+
|
|
20
|
+
var _SidenavDropdown = _interopRequireDefault(require("../Sidenav/SidenavDropdown"));
|
|
21
|
+
|
|
22
|
+
var _Navbar = require("../Navbar");
|
|
23
|
+
|
|
24
|
+
var _NavbarDropdown = _interopRequireDefault(require("../Navbar/NavbarDropdown"));
|
|
25
|
+
|
|
26
|
+
var _NavbarDropdownMenu = _interopRequireDefault(require("../Navbar/NavbarDropdownMenu"));
|
|
27
|
+
|
|
28
|
+
var _SidenavDropdownMenu = _interopRequireDefault(require("../Sidenav/SidenavDropdownMenu"));
|
|
29
|
+
|
|
30
|
+
var NavMenuContext = /*#__PURE__*/_react.default.createContext(null);
|
|
31
|
+
|
|
32
|
+
exports.NavMenuContext = NavMenuContext;
|
|
33
|
+
NavMenuContext.displayName = 'NavMenu.Context';
|
|
34
|
+
var NavMenuActionType;
|
|
35
|
+
exports.NavMenuActionType = NavMenuActionType;
|
|
36
|
+
|
|
37
|
+
(function (NavMenuActionType) {
|
|
38
|
+
NavMenuActionType[NavMenuActionType["RegisterItem"] = 0] = "RegisterItem";
|
|
39
|
+
NavMenuActionType[NavMenuActionType["UnregisterItem"] = 1] = "UnregisterItem";
|
|
40
|
+
})(NavMenuActionType || (exports.NavMenuActionType = NavMenuActionType = {}));
|
|
41
|
+
|
|
42
|
+
var initilNavMenuState = {
|
|
43
|
+
items: []
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
var reducer = function reducer(state, action) {
|
|
47
|
+
switch (action.type) {
|
|
48
|
+
case NavMenuActionType.RegisterItem:
|
|
49
|
+
return (0, _extends2.default)({}, state, {
|
|
50
|
+
items: [].concat(state.items.filter(function (item) {
|
|
51
|
+
return item._id !== action.payload._id;
|
|
52
|
+
}), [action.payload])
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
case NavMenuActionType.UnregisterItem:
|
|
56
|
+
return (0, _extends2.default)({}, state, {
|
|
57
|
+
items: state.items.filter(function (item) {
|
|
58
|
+
return item._id !== action.payload._id;
|
|
59
|
+
})
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
default:
|
|
63
|
+
throw new Error('Unrecognizable action type: ' + action.type);
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
/**
|
|
67
|
+
* The <Nav.Menu> API
|
|
68
|
+
* When used as direct child of <Nav>, render the NavDropdown
|
|
69
|
+
* When used within another <Nav.Menu>, render the NavDropdownMenu
|
|
70
|
+
*/
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
var NavMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
74
|
+
var parentNavMenu = (0, _react.useContext)(NavMenuContext);
|
|
75
|
+
var navMenuContext = (0, _react.useReducer)(reducer, initilNavMenuState);
|
|
76
|
+
var navbar = (0, _react.useContext)(_Navbar.NavbarContext);
|
|
77
|
+
var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);
|
|
78
|
+
|
|
79
|
+
if (!parentNavMenu) {
|
|
80
|
+
if (navbar) {
|
|
81
|
+
return /*#__PURE__*/_react.default.createElement(NavMenuContext.Provider, {
|
|
82
|
+
value: navMenuContext
|
|
83
|
+
}, /*#__PURE__*/_react.default.createElement(_NavbarDropdown.default, (0, _extends2.default)({
|
|
84
|
+
ref: ref
|
|
85
|
+
}, props)));
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
if (sidenav) {
|
|
89
|
+
return /*#__PURE__*/_react.default.createElement(NavMenuContext.Provider, {
|
|
90
|
+
value: navMenuContext
|
|
91
|
+
}, /*#__PURE__*/_react.default.createElement(_SidenavDropdown.default, (0, _extends2.default)({
|
|
92
|
+
ref: ref
|
|
93
|
+
}, props)));
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
return /*#__PURE__*/_react.default.createElement(NavMenuContext.Provider, {
|
|
97
|
+
value: navMenuContext
|
|
98
|
+
}, /*#__PURE__*/_react.default.createElement(_NavDropdown.default, (0, _extends2.default)({
|
|
99
|
+
ref: ref
|
|
100
|
+
}, props)));
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
if (navbar) {
|
|
104
|
+
return /*#__PURE__*/_react.default.createElement(_NavbarDropdownMenu.default, (0, _extends2.default)({
|
|
105
|
+
ref: ref
|
|
106
|
+
}, props));
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
if (sidenav) {
|
|
110
|
+
return /*#__PURE__*/_react.default.createElement(_SidenavDropdownMenu.default, (0, _extends2.default)({
|
|
111
|
+
ref: ref
|
|
112
|
+
}, props));
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
return /*#__PURE__*/_react.default.createElement(_NavDropdownMenu.default, (0, _extends2.default)({
|
|
116
|
+
ref: ref
|
|
117
|
+
}, props));
|
|
118
|
+
});
|
|
119
|
+
|
|
120
|
+
NavMenu.displayName = 'Nav.Menu';
|
|
121
|
+
var _default = NavMenu;
|
|
122
|
+
exports.default = _default;
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { TypeAttributes, WithAsProps, RsRefForwardingComponent } from '../@types/common';
|
|
3
|
+
import { IconProps } from '@rsuite/icons/lib/Icon';
|
|
4
|
+
import Button from '../Button';
|
|
5
|
+
import NavDropdownItem from '../Nav/NavDropdownItem';
|
|
6
|
+
import NavDropdownMenu from '../Nav/NavDropdownMenu';
|
|
7
|
+
export declare type NavbarDropdownTrigger = 'click' | 'hover' | 'contextMenu';
|
|
8
|
+
export interface NavbarDropdownProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect' | 'title'> {
|
|
9
|
+
/** Define the title as a submenu */
|
|
10
|
+
title?: React.ReactNode;
|
|
11
|
+
/** Set the icon */
|
|
12
|
+
icon?: React.ReactElement<IconProps>;
|
|
13
|
+
/** Triggering events */
|
|
14
|
+
trigger?: NavbarDropdownTrigger | readonly NavbarDropdownTrigger[];
|
|
15
|
+
/** The placement of Menu */
|
|
16
|
+
placement?: TypeAttributes.Placement8;
|
|
17
|
+
/** Whether or not component is disabled */
|
|
18
|
+
disabled?: boolean;
|
|
19
|
+
/** The style of the menu */
|
|
20
|
+
menuStyle?: React.CSSProperties;
|
|
21
|
+
/** A css class to apply to the Toggle DOM node */
|
|
22
|
+
toggleClassName?: string;
|
|
23
|
+
/** You can use a custom element type for this toggle component */
|
|
24
|
+
toggleAs?: React.ElementType;
|
|
25
|
+
/** No caret variation */
|
|
26
|
+
noCaret?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Open the menu and control it
|
|
29
|
+
* @deprecated
|
|
30
|
+
*/
|
|
31
|
+
open?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* @deprecated
|
|
34
|
+
*/
|
|
35
|
+
renderTitle?: (children: React.ReactNode) => React.ReactNode;
|
|
36
|
+
/** Custom Toggle */
|
|
37
|
+
renderToggle?: (props: WithAsProps, ref: React.Ref<any>) => any;
|
|
38
|
+
/** The callback function that the menu closes */
|
|
39
|
+
onClose?: () => void;
|
|
40
|
+
/** Menu Pop-up callback function */
|
|
41
|
+
onOpen?: () => void;
|
|
42
|
+
/** Callback function for menu state switching */
|
|
43
|
+
onToggle?: (open: boolean, eventKey?: T | undefined, event?: React.SyntheticEvent) => void;
|
|
44
|
+
}
|
|
45
|
+
export interface NavbarDropdownComponent extends RsRefForwardingComponent<'div', NavbarDropdownProps> {
|
|
46
|
+
<ToggleAs extends React.ElementType = typeof Button>(props: NavbarDropdownProps & {
|
|
47
|
+
ref?: React.Ref<any>;
|
|
48
|
+
toggleAs?: ToggleAs;
|
|
49
|
+
} & React.ComponentProps<ToggleAs>, context: any): JSX.Element | null;
|
|
50
|
+
Item: typeof NavDropdownItem;
|
|
51
|
+
Menu: typeof NavDropdownMenu;
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* @private
|
|
55
|
+
*/
|
|
56
|
+
declare const NavbarDropdown: NavbarDropdownComponent;
|
|
57
|
+
export default NavbarDropdown;
|