248 lines
9.1 KiB
JavaScript
248 lines
9.1 KiB
JavaScript
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
|
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
|
|
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
|
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
|
|
|
function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
|
|
|
|
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
|
|
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
|
|
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
|
|
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
|
|
var __rest = this && this.__rest || function (s, e) {
|
|
var t = {};
|
|
|
|
for (var p in s) {
|
|
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
}
|
|
|
|
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
if (e.indexOf(p[i]) < 0) t[p[i]] = s[p[i]];
|
|
}
|
|
return t;
|
|
};
|
|
|
|
import classnames from 'classnames';
|
|
import * as PropTypes from 'prop-types';
|
|
import Trigger from 'rc-trigger';
|
|
import * as React from 'react';
|
|
import * as ReactDOM from 'react-dom';
|
|
import DropdownMenu from './DropdownMenu';
|
|
import { isSingleMode, saveRef } from './util';
|
|
Trigger.displayName = 'Trigger';
|
|
var BUILT_IN_PLACEMENTS = {
|
|
bottomLeft: {
|
|
points: ['tl', 'bl'],
|
|
offset: [0, 4],
|
|
overflow: {
|
|
adjustX: 0,
|
|
adjustY: 1
|
|
}
|
|
},
|
|
topLeft: {
|
|
points: ['bl', 'tl'],
|
|
offset: [0, -4],
|
|
overflow: {
|
|
adjustX: 0,
|
|
adjustY: 1
|
|
}
|
|
}
|
|
};
|
|
|
|
var SelectTrigger =
|
|
/*#__PURE__*/
|
|
function (_React$Component) {
|
|
_inherits(SelectTrigger, _React$Component);
|
|
|
|
function SelectTrigger(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, SelectTrigger);
|
|
|
|
_this = _possibleConstructorReturn(this, _getPrototypeOf(SelectTrigger).call(this, props));
|
|
_this.dropdownMenuRef = null;
|
|
|
|
_this.setDropdownWidth = function () {
|
|
var dom = ReactDOM.findDOMNode(_assertThisInitialized(_this));
|
|
var width = dom.offsetWidth;
|
|
|
|
if (width !== _this.state.dropdownWidth) {
|
|
_this.setState({
|
|
dropdownWidth: width
|
|
});
|
|
}
|
|
};
|
|
|
|
_this.getInnerMenu = function () {
|
|
return _this.dropdownMenuRef && _this.dropdownMenuRef.menuRef;
|
|
};
|
|
|
|
_this.getPopupDOMNode = function () {
|
|
return _this.triggerRef.getPopupDomNode();
|
|
};
|
|
|
|
_this.getDropdownElement = function (newProps) {
|
|
var props = _this.props;
|
|
var dropdownRender = props.dropdownRender,
|
|
ariaId = props.ariaId;
|
|
var menuNode = React.createElement(DropdownMenu, _extends({
|
|
ref: _this.saveDropdownMenuRef
|
|
}, newProps, {
|
|
ariaId: ariaId,
|
|
prefixCls: _this.getDropdownPrefixCls(),
|
|
onMenuSelect: props.onMenuSelect,
|
|
onMenuDeselect: props.onMenuDeselect,
|
|
onPopupScroll: props.onPopupScroll,
|
|
value: props.value,
|
|
backfillValue: props.backfillValue,
|
|
firstActiveValue: props.firstActiveValue,
|
|
defaultActiveFirstOption: props.defaultActiveFirstOption,
|
|
dropdownMenuStyle: props.dropdownMenuStyle,
|
|
menuItemSelectedIcon: props.menuItemSelectedIcon
|
|
}));
|
|
|
|
if (dropdownRender) {
|
|
return dropdownRender(menuNode, props);
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
_this.getDropdownTransitionName = function () {
|
|
var props = _this.props;
|
|
var transitionName = props.transitionName;
|
|
|
|
if (!transitionName && props.animation) {
|
|
transitionName = "".concat(_this.getDropdownPrefixCls(), "-").concat(props.animation);
|
|
}
|
|
|
|
return transitionName;
|
|
};
|
|
|
|
_this.getDropdownPrefixCls = function () {
|
|
return "".concat(_this.props.prefixCls, "-dropdown");
|
|
};
|
|
|
|
_this.saveDropdownMenuRef = saveRef(_assertThisInitialized(_this), 'dropdownMenuRef');
|
|
_this.saveTriggerRef = saveRef(_assertThisInitialized(_this), 'triggerRef');
|
|
_this.state = {
|
|
dropdownWidth: 0
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
_createClass(SelectTrigger, [{
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.setDropdownWidth();
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate() {
|
|
this.setDropdownWidth();
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _popupClassName;
|
|
|
|
var _a = this.props,
|
|
onPopupFocus = _a.onPopupFocus,
|
|
empty = _a.empty,
|
|
props = __rest(_a, ["onPopupFocus", "empty"]);
|
|
|
|
var multiple = props.multiple,
|
|
visible = props.visible,
|
|
inputValue = props.inputValue,
|
|
dropdownAlign = props.dropdownAlign,
|
|
disabled = props.disabled,
|
|
showSearch = props.showSearch,
|
|
dropdownClassName = props.dropdownClassName,
|
|
dropdownStyle = props.dropdownStyle,
|
|
dropdownMatchSelectWidth = props.dropdownMatchSelectWidth;
|
|
var dropdownPrefixCls = this.getDropdownPrefixCls();
|
|
var popupClassName = (_popupClassName = {}, _defineProperty(_popupClassName, dropdownClassName, !!dropdownClassName), _defineProperty(_popupClassName, "".concat(dropdownPrefixCls, "--").concat(multiple ? 'multiple' : 'single'), 1), _defineProperty(_popupClassName, "".concat(dropdownPrefixCls, "--empty"), empty), _popupClassName);
|
|
var popupElement = this.getDropdownElement({
|
|
menuItems: props.options,
|
|
onPopupFocus: onPopupFocus,
|
|
multiple: multiple,
|
|
inputValue: inputValue,
|
|
visible: visible
|
|
});
|
|
var hideAction;
|
|
|
|
if (disabled) {
|
|
hideAction = [];
|
|
} else if (isSingleMode(props) && !showSearch) {
|
|
hideAction = ['click'];
|
|
} else {
|
|
hideAction = ['blur'];
|
|
}
|
|
|
|
var popupStyle = _extends({}, dropdownStyle);
|
|
|
|
var widthProp = dropdownMatchSelectWidth ? 'width' : 'minWidth';
|
|
|
|
if (this.state.dropdownWidth) {
|
|
popupStyle[widthProp] = "".concat(this.state.dropdownWidth, "px");
|
|
}
|
|
|
|
return React.createElement(Trigger, _extends({}, props, {
|
|
showAction: disabled ? [] : this.props.showAction,
|
|
hideAction: hideAction,
|
|
ref: this.saveTriggerRef,
|
|
popupPlacement: "bottomLeft",
|
|
builtinPlacements: BUILT_IN_PLACEMENTS,
|
|
prefixCls: dropdownPrefixCls,
|
|
popupTransitionName: this.getDropdownTransitionName(),
|
|
onPopupVisibleChange: props.onDropdownVisibleChange,
|
|
popup: popupElement,
|
|
popupAlign: dropdownAlign,
|
|
popupVisible: visible,
|
|
getPopupContainer: props.getPopupContainer,
|
|
popupClassName: classnames(popupClassName),
|
|
popupStyle: popupStyle
|
|
}), props.children);
|
|
}
|
|
}]);
|
|
|
|
return SelectTrigger;
|
|
}(React.Component);
|
|
|
|
export { SelectTrigger as default };
|
|
SelectTrigger.defaultProps = {
|
|
dropdownRender: function dropdownRender(menu) {
|
|
return menu;
|
|
}
|
|
};
|
|
SelectTrigger.propTypes = {
|
|
onPopupFocus: PropTypes.func,
|
|
onPopupScroll: PropTypes.func,
|
|
dropdownMatchSelectWidth: PropTypes.bool,
|
|
dropdownAlign: PropTypes.object,
|
|
visible: PropTypes.bool,
|
|
disabled: PropTypes.bool,
|
|
showSearch: PropTypes.bool,
|
|
dropdownClassName: PropTypes.string,
|
|
multiple: PropTypes.bool,
|
|
inputValue: PropTypes.string,
|
|
filterOption: PropTypes.any,
|
|
options: PropTypes.any,
|
|
prefixCls: PropTypes.string,
|
|
popupClassName: PropTypes.string,
|
|
children: PropTypes.any,
|
|
showAction: PropTypes.arrayOf(PropTypes.string),
|
|
menuItemSelectedIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
|
|
dropdownRender: PropTypes.func,
|
|
ariaId: PropTypes.string
|
|
};
|
|
SelectTrigger.displayName = 'SelectTrigger'; |