choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
264 lines (238 loc) • 8.58 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _get from "@babel/runtime/helpers/get";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { __decorate } from "tslib";
import React from 'react';
import { observer } from 'mobx-react';
import { computed, isArrayLike } from 'mobx';
import classNames from 'classnames';
import { Select } from '../select/Select';
import ObserverRadio from '../radio/Radio';
import ObserverCheckBox from '../check-box/CheckBox';
import autobind from '../_util/autobind';
import Option from '../option/Option';
import OptGroup from '../option/OptGroup';
import { $l } from '../locale-context';
import { LabelLayout } from '../form/enum';
import TextField from '../text-field';
import Icon from '../icon';
import Button from '../button/Button';
import { FuncType } from '../button/enum';
import { OTHER_OPTION_PROPS } from '../option/normalizeOptions';
var GroupIdGen = /*#__PURE__*/_regeneratorRuntime.mark(function _callee(id) {
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
if (!true) {
_context.next = 5;
break;
}
_context.next = 3;
return "__group-".concat(id++, "__");
case 3:
_context.next = 0;
break;
case 5:
case "end":
return _context.stop();
}
}
}, _callee);
})(1);
var SelectBox = /*#__PURE__*/function (_Select) {
_inherits(SelectBox, _Select);
var _super = _createSuper(SelectBox);
function SelectBox() {
_classCallCheck(this, SelectBox);
return _super.apply(this, arguments);
}
_createClass(SelectBox, [{
key: "defaultValidationMessages",
get: function get() {
var label = this.getProp('label');
return {
valueMissing: $l('SelectBox', label ? 'value_missing' : 'value_missing_no_label', {
label: label
})
};
}
}, {
key: "name",
get: function get() {
return this.observableProps.name || GroupIdGen.next().value;
}
}, {
key: "getOmitPropsKeys",
value: function getOmitPropsKeys() {
return _get(_getPrototypeOf(SelectBox.prototype), "getOmitPropsKeys", this).call(this).concat(['vertical']);
}
}, {
key: "getClassName",
value: function getClassName() {
var prefixCls = this.prefixCls,
vertical = this.props.vertical;
return _get(_getPrototypeOf(SelectBox.prototype), "getClassName", this).call(this, _defineProperty({}, "".concat(prefixCls, "-vertical"), vertical));
}
}, {
key: "isEmpty",
value: function isEmpty() {
return false;
}
}, {
key: "renderSearcher",
value: function renderSearcher() {
if (this.searchable) {
var placeholder = this.props.placeholder;
return /*#__PURE__*/React.createElement(TextField, {
prefix: /*#__PURE__*/React.createElement(Icon, {
type: "search"
}),
placeholder: placeholder,
value: this.text,
onInput: this.handleInput,
labelLayout: this.labelLayout
});
}
}
}, {
key: "renderWrapper",
value: function renderWrapper() {
var _this = this;
var name = this.name,
options = this.options,
filteredOptions = this.filteredOptions,
textField = this.textField,
valueField = this.valueField,
readOnly = this.readOnly,
disabled = this.disabled;
var _this$props = this.props,
autoFocus = _this$props.autoFocus,
mode = _this$props.mode,
onOption = _this$props.onOption,
optionRenderer = _this$props.optionRenderer,
optionsFilter = _this$props.optionsFilter;
var highlight = this.getProp('highlight');
var items = filteredOptions.reduce(function (arr, record, index, data) {
if (!optionsFilter || optionsFilter(record, index, data)) {
var optionProps = onOption({
dataSet: options,
record: record
});
var text = record.get(textField);
var value = record.get(valueField);
var children = optionRenderer ? optionRenderer({
dataSet: options,
record: record,
text: text,
value: value
}) : text;
var itemProps = _objectSpread(_objectSpread({}, record.get(OTHER_OPTION_PROPS)), {}, {
key: index,
dataSet: null,
record: null,
value: value,
checked: _this.isChecked(_this.getValue(), value),
name: name,
onChange: _this.handleItemChange,
children: children,
autoFocus: autoFocus && index === 0,
readOnly: readOnly,
disabled: disabled,
mode: mode,
noValidate: true,
labelLayout: LabelLayout.none,
highlight: highlight
});
arr.push(_this.renderItem(optionProps ? _objectSpread(_objectSpread(_objectSpread({}, optionProps), itemProps), {}, {
className: classNames(optionProps.className, itemProps.className),
style: _objectSpread(_objectSpread({}, optionProps.style), itemProps.style),
disabled: itemProps.disabled || optionProps.disabled
}) : itemProps));
}
return arr;
}, []);
var className = this.getClassName();
var Element = this.context.formNode ? 'div' : 'form';
return /*#__PURE__*/React.createElement("span", _extends({
key: "wrapper"
}, this.getWrapperProps()), this.renderSearcher(), this.renderSelectAll(), /*#__PURE__*/React.createElement(Element, {
className: className,
onMouseEnter: this.handleMouseEnter,
onMouseLeave: this.handleMouseLeave
}, items), this.renderFloatLabel(), options.paging && options.currentPage < options.totalPage && /*#__PURE__*/React.createElement(Button, {
funcType: FuncType.flat,
icon: "more_horiz",
onClick: this.handleQueryMore
}));
}
}, {
key: "handleQueryMore",
value: function handleQueryMore() {
var options = this.options;
options.queryMore(options.currentPage + 1);
}
}, {
key: "handleInput",
value: function handleInput(e) {
var value = e.target.value;
this.setText(value);
}
}, {
key: "handleItemChange",
value: function handleItemChange(value, oldValue) {
if (this.multiple) {
var values = this.getValues();
if (!value) {
values.splice(values.indexOf(oldValue), 1);
} else {
values.push(value);
}
this.setValue(values);
} else {
this.setValue(value);
}
}
}, {
key: "isChecked",
value: function isChecked(value, checkedValue) {
if (isArrayLike(value)) {
return value.indexOf(checkedValue) !== -1;
}
return value === checkedValue;
}
}, {
key: "renderItem",
value: function renderItem(props) {
if (this.multiple) {
return /*#__PURE__*/React.createElement(ObserverCheckBox, _extends({}, props));
}
return /*#__PURE__*/React.createElement(ObserverRadio, _extends({}, props));
}
}]);
return SelectBox;
}(Select);
SelectBox.displayName = 'SelectBox';
SelectBox.defaultProps = _objectSpread(_objectSpread({}, Select.defaultProps), {}, {
suffixCls: 'select-box',
vertical: false,
selectAllButton: false,
checkValueOnOptionsChange: false
});
SelectBox.Option = Option;
SelectBox.OptGroup = OptGroup; // eslint-disable-next-line camelcase
SelectBox.__IS_IN_CELL_EDITOR = true;
__decorate([computed], SelectBox.prototype, "name", null);
__decorate([autobind], SelectBox.prototype, "handleQueryMore", null);
__decorate([autobind], SelectBox.prototype, "handleInput", null);
__decorate([autobind], SelectBox.prototype, "handleItemChange", null);
SelectBox = __decorate([observer], SelectBox);
export default SelectBox;
//# sourceMappingURL=SelectBox.js.map