choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
276 lines (237 loc) • 8.85 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
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 _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _createSuper(Derived) {
function isNativeReflectConstruct() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
try {
Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
return true;
} catch (e) {
return false;
}
}
return function () {
var Super = _getPrototypeOf(Derived),
result;
if (isNativeReflectConstruct()) {
var NewTarget = _getPrototypeOf(this).constructor;
result = Reflect.construct(Super, arguments, NewTarget);
} else {
result = Super.apply(this, arguments);
}
return _possibleConstructorReturn(this, result);
};
}
import Trigger from '../trigger';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import DropdownMenu from './DropdownMenu';
import ReactDOM from 'react-dom';
import { saveRef } from './util';
import Spin from '../../spin';
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
}
},
bottomRight: {
points: ['tr', 'br'],
offset: [0, 4],
overflow: {
adjustX: 0,
adjustY: 1
}
}
};
var SelectTrigger =
/*#__PURE__*/
function (_Component) {
_inherits(SelectTrigger, _Component);
var _super = _createSuper(SelectTrigger);
function SelectTrigger() {
var _this;
_classCallCheck(this, SelectTrigger);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_defineProperty(_assertThisInitialized(_this), "state", {
dropdownWidth: null
});
_defineProperty(_assertThisInitialized(_this), "setDropdownWidth", function () {
var width = ReactDOM.findDOMNode(_assertThisInitialized(_this)).offsetWidth;
if (width !== _this.state.dropdownWidth) {
_this.setState({
dropdownWidth: width
});
}
});
_defineProperty(_assertThisInitialized(_this), "getInnerMenu", function () {
return _this.dropdownMenuRef && _this.dropdownMenuRef.menuRef;
});
_defineProperty(_assertThisInitialized(_this), "getFilterInput", function () {
return _this.dropdownMenuRef && _this.dropdownMenuRef.filterRef;
});
_defineProperty(_assertThisInitialized(_this), "getPopupDOMNode", function () {
return _this.triggerRef.getPopupDomNode();
});
_defineProperty(_assertThisInitialized(_this), "getDropdownElement", function (newProps) {
var props = _this.props;
var loading = props.loading;
if (typeof loading === 'boolean') {
loading = {
spinning: loading
};
}
return React.createElement(Spin, loading, React.createElement(DropdownMenu, _extends({
ref: saveRef(_assertThisInitialized(_this), 'dropdownMenuRef')
}, newProps, {
prefixCls: _this.getDropdownPrefixCls(),
onMenuSelect: props.onMenuSelect,
onMenuDeselect: props.onMenuDeselect,
onPopupScroll: props.onPopupScroll,
onKeyDown: props.onKeyDown,
value: props.value,
placeholder: props.filterPlaceholder,
checkAll: props.checkAll,
backfillValue: props.backfillValue,
firstActiveValue: props.firstActiveValue,
defaultActiveFirstOption: props.defaultActiveFirstOption,
dropdownMenuStyle: props.dropdownMenuStyle,
onFilterChange: props.onFilterChange,
footer: props.footer,
onMouseDown: props.onDropdownMouseDown
})));
});
_defineProperty(_assertThisInitialized(_this), "getDropdownTransitionName", function () {
var props = _this.props;
var transitionName = props.transitionName;
if (!transitionName && props.animation) {
transitionName = "".concat(_this.getDropdownPrefixCls(), "-").concat(props.animation);
}
return transitionName;
});
_defineProperty(_assertThisInitialized(_this), "getDropdownPrefixCls", function () {
return "".concat(_this.props.prefixCls, "-dropdown");
});
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 _this$props = this.props,
onPopupFocus = _this$props.onPopupFocus,
props = _objectWithoutProperties(_this$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,
filter = props.filter,
filterValue = props.filterValue;
var dropdownPrefixCls = this.getDropdownPrefixCls();
var popupClassName = (_popupClassName = {}, _defineProperty(_popupClassName, dropdownClassName, !!dropdownClassName), _defineProperty(_popupClassName, "".concat(dropdownPrefixCls, "--").concat(multiple ? 'multiple' : 'single'), 1), _popupClassName);
var popupElement = this.getDropdownElement({
menuItems: props.options,
onPopupFocus: onPopupFocus,
multiple: multiple,
inputValue: inputValue,
visible: visible,
filter: filter,
filterValue: filterValue
});
var popupStyle = _objectSpread({}, dropdownStyle);
var widthProp = dropdownMatchSelectWidth ? 'width' : 'minWidth';
if (this.state.dropdownWidth && !popupStyle[widthProp]) {
popupStyle[widthProp] = "".concat(this.state.dropdownWidth, "px");
}
return React.createElement(Trigger, _extends({}, props, {
action: disabled ? [] : ['click'],
ref: saveRef(this, 'triggerRef'),
popupPlacement: props.popupPlacement,
builtinPlacements: props.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;
}(Component);
_defineProperty(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,
onDropdownMouseDown: PropTypes.any,
dropdownStyle: PropTypes.any,
multiple: PropTypes.bool,
inputValue: PropTypes.string,
filterOption: PropTypes.any,
options: PropTypes.any,
prefixCls: PropTypes.string,
popupClassName: PropTypes.string,
popupPlacement: PropTypes.string,
children: PropTypes.any,
filter: PropTypes.bool,
builtinPlacements: PropTypes.any,
getRootDomNode: PropTypes.func,
loading: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
onKeyDown: PropTypes.func
});
_defineProperty(SelectTrigger, "defaultProps", {
popupPlacement: 'bottomLeft',
loading: false
});
export { SelectTrigger as default };
SelectTrigger.displayName = 'SelectTrigger';
//# sourceMappingURL=SelectTrigger.js.map