186 lines
6.2 KiB
JavaScript
186 lines
6.2 KiB
JavaScript
|
|
import _defineProperty from 'babel-runtime/helpers/defineProperty';
|
||
|
|
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
|
||
|
|
import _extends from 'babel-runtime/helpers/extends';
|
||
|
|
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
||
|
|
import _createClass from 'babel-runtime/helpers/createClass';
|
||
|
|
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
||
|
|
import _inherits from 'babel-runtime/helpers/inherits';
|
||
|
|
import Trigger from 'rc-trigger';
|
||
|
|
import React from 'react';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import classnames from 'classnames';
|
||
|
|
import DropdownMenu from './DropdownMenu';
|
||
|
|
import ReactDOM from 'react-dom';
|
||
|
|
import { isSingleMode } 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 = function (_React$Component) {
|
||
|
|
_inherits(SelectTrigger, _React$Component);
|
||
|
|
|
||
|
|
function SelectTrigger() {
|
||
|
|
var _ref;
|
||
|
|
|
||
|
|
var _temp, _this, _ret;
|
||
|
|
|
||
|
|
_classCallCheck(this, SelectTrigger);
|
||
|
|
|
||
|
|
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||
|
|
args[_key] = arguments[_key];
|
||
|
|
}
|
||
|
|
|
||
|
|
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = SelectTrigger.__proto__ || Object.getPrototypeOf(SelectTrigger)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
||
|
|
dropdownWidth: null
|
||
|
|
}, _this.setDropdownWidth = function () {
|
||
|
|
var width = ReactDOM.findDOMNode(_this).offsetWidth;
|
||
|
|
if (width !== _this.state.dropdownWidth) {
|
||
|
|
_this.setState({ dropdownWidth: width });
|
||
|
|
}
|
||
|
|
}, _this.getInnerMenu = function () {
|
||
|
|
return _this.popupMenu && _this.popupMenu.refs.menu;
|
||
|
|
}, _this.getPopupDOMNode = function () {
|
||
|
|
return _this.refs.trigger.getPopupDomNode();
|
||
|
|
}, _this.getDropdownElement = function (newProps) {
|
||
|
|
var props = _this.props;
|
||
|
|
return React.createElement(DropdownMenu, _extends({
|
||
|
|
ref: _this.saveMenu
|
||
|
|
}, newProps, {
|
||
|
|
prefixCls: _this.getDropdownPrefixCls(),
|
||
|
|
onMenuSelect: props.onMenuSelect,
|
||
|
|
onMenuDeselect: props.onMenuDeselect,
|
||
|
|
value: props.value,
|
||
|
|
firstActiveValue: props.firstActiveValue,
|
||
|
|
defaultActiveFirstOption: props.defaultActiveFirstOption,
|
||
|
|
dropdownMenuStyle: props.dropdownMenuStyle
|
||
|
|
}));
|
||
|
|
}, _this.getDropdownTransitionName = function () {
|
||
|
|
var props = _this.props;
|
||
|
|
var transitionName = props.transitionName;
|
||
|
|
if (!transitionName && props.animation) {
|
||
|
|
transitionName = _this.getDropdownPrefixCls() + '-' + props.animation;
|
||
|
|
}
|
||
|
|
return transitionName;
|
||
|
|
}, _this.getDropdownPrefixCls = function () {
|
||
|
|
return _this.props.prefixCls + '-dropdown';
|
||
|
|
}, _this.saveMenu = function (menu) {
|
||
|
|
_this.popupMenu = menu;
|
||
|
|
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||
|
|
}
|
||
|
|
|
||
|
|
_createClass(SelectTrigger, [{
|
||
|
|
key: 'componentDidMount',
|
||
|
|
value: function componentDidMount() {
|
||
|
|
this.setDropdownWidth();
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
key: 'componentDidUpdate',
|
||
|
|
value: function componentDidUpdate() {
|
||
|
|
this.setDropdownWidth();
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
key: 'render',
|
||
|
|
value: function render() {
|
||
|
|
var _popupClassName;
|
||
|
|
|
||
|
|
var _props = this.props,
|
||
|
|
onPopupFocus = _props.onPopupFocus,
|
||
|
|
props = _objectWithoutProperties(_props, ['onPopupFocus']);
|
||
|
|
|
||
|
|
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, dropdownPrefixCls + '--' + (multiple ? 'multiple' : 'single'), 1), _popupClassName);
|
||
|
|
var popupElement = this.getDropdownElement({
|
||
|
|
menuItems: props.options,
|
||
|
|
onPopupFocus: onPopupFocus,
|
||
|
|
multiple: multiple,
|
||
|
|
inputValue: inputValue,
|
||
|
|
visible: visible
|
||
|
|
});
|
||
|
|
var hideAction = void 0;
|
||
|
|
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] = this.state.dropdownWidth + 'px';
|
||
|
|
}
|
||
|
|
|
||
|
|
return React.createElement(
|
||
|
|
Trigger,
|
||
|
|
_extends({}, props, {
|
||
|
|
showAction: disabled ? [] : ['click'],
|
||
|
|
hideAction: hideAction,
|
||
|
|
ref: 'trigger',
|
||
|
|
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);
|
||
|
|
|
||
|
|
SelectTrigger.propTypes = {
|
||
|
|
onPopupFocus: 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
|
||
|
|
};
|
||
|
|
export default SelectTrigger;
|
||
|
|
|
||
|
|
|
||
|
|
SelectTrigger.displayName = 'SelectTrigger';
|