bee-select
Version:
select ui component for react
249 lines (199 loc) • 10.6 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _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; };
var _trigger = require('bee-overlay/build/trigger');
var _trigger2 = _interopRequireDefault(_trigger);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
var _util = require('./util');
var _DropdownMenu = require('./DropdownMenu');
var _DropdownMenu2 = _interopRequireDefault(_DropdownMenu);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
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 _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); } /**
* This source code is quoted from rc-select.
* homepage: https://github.com/react-component/select
*/
_trigger2["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
}
}
};
var SelectTrigger = function (_React$Component) {
_inherits(SelectTrigger, _React$Component);
function SelectTrigger(props) {
_classCallCheck(this, SelectTrigger);
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
_initialiseProps.call(_this);
_this.saveDropdownMenuRef = (0, _util.saveRef)(_this, 'dropdownMenuRef');
_this.saveTriggerRef = (0, _util.saveRef)(_this, 'triggerRef');
_this.state = {
dropdownWidth: null
};
return _this;
}
SelectTrigger.prototype.componentDidMount = function componentDidMount() {
if (this.props.open) {
//宽度计算时机修改
this.setDropdownWidth();
}
};
SelectTrigger.prototype.componentDidUpdate = function componentDidUpdate() {
if (this.props.visible) {
//宽度计算时机修改
this.setDropdownWidth();
}
};
SelectTrigger.prototype.render = 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 ((0, _util.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 _react2["default"].createElement(
_trigger2["default"],
_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: (0, _classnames2["default"])(popupClassName),
popupStyle: popupStyle
}),
props.children
);
};
return SelectTrigger;
}(_react2["default"].Component);
SelectTrigger.propTypes = {
onPopupFocus: _propTypes2["default"].func,
onPopupScroll: _propTypes2["default"].func,
dropdownMatchSelectWidth: _propTypes2["default"].bool,
dropdownAlign: _propTypes2["default"].object,
visible: _propTypes2["default"].bool,
disabled: _propTypes2["default"].bool,
showSearch: _propTypes2["default"].bool,
dropdownClassName: _propTypes2["default"].string,
multiple: _propTypes2["default"].bool,
inputValue: _propTypes2["default"].string,
filterOption: _propTypes2["default"].any,
options: _propTypes2["default"].any,
prefixCls: _propTypes2["default"].string,
popupClassName: _propTypes2["default"].string,
children: _propTypes2["default"].any,
showAction: _propTypes2["default"].arrayOf(_propTypes2["default"].string),
menuItemSelectedIcon: _propTypes2["default"].oneOfType([_propTypes2["default"].func, _propTypes2["default"].node])
};
var _initialiseProps = function _initialiseProps() {
var _this2 = this;
this.setDropdownWidth = function () {
if (!_this2.props.dropdownMatchSelectWidth) {
return;
}
var width = _reactDom2["default"].findDOMNode(_this2).offsetWidth;
if (width !== _this2.state.dropdownWidth) {
_this2.setState({ dropdownWidth: width });
}
};
this.getInnerMenu = function () {
return _this2.dropdownMenuRef && _this2.dropdownMenuRef.menuRef;
};
this.getPopupDOMNode = function () {
return _this2.triggerRef.getPopupDomNode();
};
this.getDropdownElement = function (newProps) {
var props = _this2.props;
return _react2["default"].createElement(_DropdownMenu2["default"], _extends({
ref: _this2.saveDropdownMenuRef
}, newProps, {
clsPrefix: _this2.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
}));
};
this.getDropdownTransitionName = function () {
var props = _this2.props;
var transitionName = props.transitionName;
if (!transitionName && props.animation) {
transitionName = _this2.getDropdownPrefixCls() + '-' + props.animation;
}
return transitionName;
};
this.getDropdownPrefixCls = function () {
return _this2.props.prefixCls + '-dropdown';
};
};
exports["default"] = SelectTrigger;
SelectTrigger.displayName = 'SelectTrigger';
module.exports = exports['default'];