choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
288 lines (244 loc) • 10.6 kB
JavaScript
;
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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _trigger = _interopRequireDefault(require("../trigger"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _DropdownMenu = _interopRequireDefault(require("./DropdownMenu"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _util = require("./util");
var _spin = _interopRequireDefault(require("../../spin"));
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 = (0, _getPrototypeOf2["default"])(Derived),
result;
if (isNativeReflectConstruct()) {
var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
result = Reflect.construct(Super, arguments, NewTarget);
} else {
result = Super.apply(this, arguments);
}
return (0, _possibleConstructorReturn2["default"])(this, result);
};
}
_trigger["default"].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) {
(0, _inherits2["default"])(SelectTrigger, _Component);
var _super = _createSuper(SelectTrigger);
function SelectTrigger() {
var _this;
(0, _classCallCheck2["default"])(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));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
dropdownWidth: null
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setDropdownWidth", function () {
var width = _reactDom["default"].findDOMNode((0, _assertThisInitialized2["default"])(_this)).offsetWidth;
if (width !== _this.state.dropdownWidth) {
_this.setState({
dropdownWidth: width
});
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getInnerMenu", function () {
return _this.dropdownMenuRef && _this.dropdownMenuRef.menuRef;
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getFilterInput", function () {
return _this.dropdownMenuRef && _this.dropdownMenuRef.filterRef;
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getPopupDOMNode", function () {
return _this.triggerRef.getPopupDomNode();
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getDropdownElement", function (newProps) {
var props = _this.props;
var loading = props.loading;
if (typeof loading === 'boolean') {
loading = {
spinning: loading
};
}
return _react["default"].createElement(_spin["default"], loading, _react["default"].createElement(_DropdownMenu["default"], (0, _extends2["default"])({
ref: (0, _util.saveRef)((0, _assertThisInitialized2["default"])(_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
})));
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getDropdownTransitionName", function () {
var props = _this.props;
var transitionName = props.transitionName;
if (!transitionName && props.animation) {
transitionName = "".concat(_this.getDropdownPrefixCls(), "-").concat(props.animation);
}
return transitionName;
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getDropdownPrefixCls", function () {
return "".concat(_this.props.prefixCls, "-dropdown");
});
return _this;
}
(0, _createClass2["default"])(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 = (0, _objectWithoutProperties2["default"])(_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 = {}, (0, _defineProperty2["default"])(_popupClassName, dropdownClassName, !!dropdownClassName), (0, _defineProperty2["default"])(_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 = (0, _objectSpread2["default"])({}, dropdownStyle);
var widthProp = dropdownMatchSelectWidth ? 'width' : 'minWidth';
if (this.state.dropdownWidth && !popupStyle[widthProp]) {
popupStyle[widthProp] = "".concat(this.state.dropdownWidth, "px");
}
return _react["default"].createElement(_trigger["default"], (0, _extends2["default"])({}, props, {
action: disabled ? [] : ['click'],
ref: (0, _util.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: (0, _classnames["default"])(popupClassName),
popupStyle: popupStyle
}), props.children);
}
}]);
return SelectTrigger;
}(_react.Component);
exports["default"] = SelectTrigger;
(0, _defineProperty2["default"])(SelectTrigger, "propTypes", {
onPopupFocus: _propTypes["default"].func,
onPopupScroll: _propTypes["default"].func,
dropdownMatchSelectWidth: _propTypes["default"].bool,
dropdownAlign: _propTypes["default"].object,
visible: _propTypes["default"].bool,
disabled: _propTypes["default"].bool,
showSearch: _propTypes["default"].bool,
dropdownClassName: _propTypes["default"].string,
onDropdownMouseDown: _propTypes["default"].any,
dropdownStyle: _propTypes["default"].any,
multiple: _propTypes["default"].bool,
inputValue: _propTypes["default"].string,
filterOption: _propTypes["default"].any,
options: _propTypes["default"].any,
prefixCls: _propTypes["default"].string,
popupClassName: _propTypes["default"].string,
popupPlacement: _propTypes["default"].string,
children: _propTypes["default"].any,
filter: _propTypes["default"].bool,
builtinPlacements: _propTypes["default"].any,
getRootDomNode: _propTypes["default"].func,
loading: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].object]),
onKeyDown: _propTypes["default"].func
});
(0, _defineProperty2["default"])(SelectTrigger, "defaultProps", {
popupPlacement: 'bottomLeft',
loading: false
});
SelectTrigger.displayName = 'SelectTrigger';
//# sourceMappingURL=SelectTrigger.js.map