dropdown.js
5.36 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var React = _interopRequireWildcard(require("react"));
var _rcDropdown = _interopRequireDefault(require("rc-dropdown"));
var _classnames = _interopRequireDefault(require("classnames"));
var _RightOutlined = _interopRequireDefault(require("@ant-design/icons/RightOutlined"));
var _dropdownButton = _interopRequireDefault(require("./dropdown-button"));
var _configProvider = require("../config-provider");
var _devWarning = _interopRequireDefault(require("../_util/devWarning"));
var _type = require("../_util/type");
var _reactNode = require("../_util/reactNode");
var Placements = (0, _type.tuple)('topLeft', 'topCenter', 'topRight', 'bottomLeft', 'bottomCenter', 'bottomRight');
var Dropdown = function Dropdown(props) {
var _React$useContext = React.useContext(_configProvider.ConfigContext),
getContextPopupContainer = _React$useContext.getPopupContainer,
getPrefixCls = _React$useContext.getPrefixCls,
direction = _React$useContext.direction;
var getTransitionName = function getTransitionName() {
var _props$placement = props.placement,
placement = _props$placement === void 0 ? '' : _props$placement,
transitionName = props.transitionName;
if (transitionName !== undefined) {
return transitionName;
}
if (placement.indexOf('top') >= 0) {
return 'slide-down';
}
return 'slide-up';
};
var renderOverlay = function renderOverlay(prefixCls) {
// rc-dropdown already can process the function of overlay, but we have check logic here.
// So we need render the element to check and pass back to rc-dropdown.
var overlay = props.overlay;
var overlayNode;
if (typeof overlay === 'function') {
overlayNode = overlay();
} else {
overlayNode = overlay;
}
overlayNode = React.Children.only(typeof overlayNode === 'string' ? /*#__PURE__*/React.createElement("span", null, overlayNode) : overlayNode);
var overlayProps = overlayNode.props; // Warning if use other mode
(0, _devWarning["default"])(!overlayProps.mode || overlayProps.mode === 'vertical', 'Dropdown', "mode=\"".concat(overlayProps.mode, "\" is not supported for Dropdown's Menu.")); // menu cannot be selectable in dropdown defaultly
// menu should be focusable in dropdown defaultly
var _overlayProps$selecta = overlayProps.selectable,
selectable = _overlayProps$selecta === void 0 ? false : _overlayProps$selecta,
_overlayProps$focusab = overlayProps.focusable,
focusable = _overlayProps$focusab === void 0 ? true : _overlayProps$focusab;
var expandIcon = /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-menu-submenu-arrow")
}, /*#__PURE__*/React.createElement(_RightOutlined["default"], {
className: "".concat(prefixCls, "-menu-submenu-arrow-icon")
}));
var fixedModeOverlay = typeof overlayNode.type === 'string' ? overlayNode : (0, _reactNode.cloneElement)(overlayNode, {
mode: 'vertical',
selectable: selectable,
focusable: focusable,
expandIcon: expandIcon
});
return fixedModeOverlay;
};
var getPlacement = function getPlacement() {
var placement = props.placement;
if (placement !== undefined) {
return placement;
}
return direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
};
var arrow = props.arrow,
customizePrefixCls = props.prefixCls,
children = props.children,
trigger = props.trigger,
disabled = props.disabled,
getPopupContainer = props.getPopupContainer,
overlayClassName = props.overlayClassName;
var prefixCls = getPrefixCls('dropdown', customizePrefixCls);
var child = React.Children.only(children);
var dropdownTrigger = (0, _reactNode.cloneElement)(child, {
className: (0, _classnames["default"])("".concat(prefixCls, "-trigger"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-rtl"), direction === 'rtl'), child.props.className),
disabled: disabled
});
var overlayClassNameCustomized = (0, _classnames["default"])(overlayClassName, (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-rtl"), direction === 'rtl'));
var triggerActions = disabled ? [] : trigger;
var alignPoint;
if (triggerActions && triggerActions.indexOf('contextMenu') !== -1) {
alignPoint = true;
}
return /*#__PURE__*/React.createElement(_rcDropdown["default"], (0, _extends2["default"])({
arrow: arrow,
alignPoint: alignPoint
}, props, {
overlayClassName: overlayClassNameCustomized,
prefixCls: prefixCls,
getPopupContainer: getPopupContainer || getContextPopupContainer,
transitionName: getTransitionName(),
trigger: triggerActions,
overlay: function overlay() {
return renderOverlay(prefixCls);
},
placement: getPlacement()
}), dropdownTrigger);
};
Dropdown.Button = _dropdownButton["default"];
Dropdown.defaultProps = {
mouseEnterDelay: 0.15,
mouseLeaveDelay: 0.1
};
var _default = Dropdown;
exports["default"] = _default;