choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
292 lines (245 loc) • 10.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _tslib = require("tslib");
var _react = _interopRequireDefault(require("react"));
var _mobxReact = require("mobx-react");
var _mobx = require("mobx");
var _classnames = _interopRequireDefault(require("classnames"));
var _Select2 = require("../select/Select");
var _Radio = _interopRequireDefault(require("../radio/Radio"));
var _CheckBox = _interopRequireDefault(require("../check-box/CheckBox"));
var _autobind = _interopRequireDefault(require("../_util/autobind"));
var _Option = _interopRequireDefault(require("../option/Option"));
var _OptGroup = _interopRequireDefault(require("../option/OptGroup"));
var _localeContext = require("../locale-context");
var _enum = require("../form/enum");
var _textField = _interopRequireDefault(require("../text-field"));
var _icon = _interopRequireDefault(require("../icon"));
var _Button = _interopRequireDefault(require("../button/Button"));
var _enum2 = require("../button/enum");
var _normalizeOptions = require("../option/normalizeOptions");
var GroupIdGen = /*#__PURE__*/_regenerator["default"].mark(function _callee(id) {
return _regenerator["default"].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) {
(0, _inherits2["default"])(SelectBox, _Select);
var _super = (0, _createSuper2["default"])(SelectBox);
function SelectBox() {
(0, _classCallCheck2["default"])(this, SelectBox);
return _super.apply(this, arguments);
}
(0, _createClass2["default"])(SelectBox, [{
key: "defaultValidationMessages",
get: function get() {
var label = this.getProp('label');
return {
valueMissing: (0, _localeContext.$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 (0, _get2["default"])((0, _getPrototypeOf2["default"])(SelectBox.prototype), "getOmitPropsKeys", this).call(this).concat(['vertical']);
}
}, {
key: "getClassName",
value: function getClassName() {
var prefixCls = this.prefixCls,
vertical = this.props.vertical;
return (0, _get2["default"])((0, _getPrototypeOf2["default"])(SelectBox.prototype), "getClassName", this).call(this, (0, _defineProperty2["default"])({}, "".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["default"].createElement(_textField["default"], {
prefix: /*#__PURE__*/_react["default"].createElement(_icon["default"], {
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 = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, record.get(_normalizeOptions.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: _enum.LabelLayout.none,
highlight: highlight
});
arr.push(_this.renderItem(optionProps ? (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, optionProps), itemProps), {}, {
className: (0, _classnames["default"])(optionProps.className, itemProps.className),
style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, 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["default"].createElement("span", (0, _extends2["default"])({
key: "wrapper"
}, this.getWrapperProps()), this.renderSearcher(), this.renderSelectAll(), /*#__PURE__*/_react["default"].createElement(Element, {
className: className,
onMouseEnter: this.handleMouseEnter,
onMouseLeave: this.handleMouseLeave
}, items), this.renderFloatLabel(), options.paging && options.currentPage < options.totalPage && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
funcType: _enum2.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 ((0, _mobx.isArrayLike)(value)) {
return value.indexOf(checkedValue) !== -1;
}
return value === checkedValue;
}
}, {
key: "renderItem",
value: function renderItem(props) {
if (this.multiple) {
return /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], (0, _extends2["default"])({}, props));
}
return /*#__PURE__*/_react["default"].createElement(_Radio["default"], (0, _extends2["default"])({}, props));
}
}]);
return SelectBox;
}(_Select2.Select);
SelectBox.displayName = 'SelectBox';
SelectBox.defaultProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _Select2.Select.defaultProps), {}, {
suffixCls: 'select-box',
vertical: false,
selectAllButton: false,
checkValueOnOptionsChange: false
});
SelectBox.Option = _Option["default"];
SelectBox.OptGroup = _OptGroup["default"]; // eslint-disable-next-line camelcase
SelectBox.__IS_IN_CELL_EDITOR = true;
(0, _tslib.__decorate)([_mobx.computed], SelectBox.prototype, "name", null);
(0, _tslib.__decorate)([_autobind["default"]], SelectBox.prototype, "handleQueryMore", null);
(0, _tslib.__decorate)([_autobind["default"]], SelectBox.prototype, "handleInput", null);
(0, _tslib.__decorate)([_autobind["default"]], SelectBox.prototype, "handleItemChange", null);
SelectBox = (0, _tslib.__decorate)([_mobxReact.observer], SelectBox);
var _default = SelectBox;
exports["default"] = _default;
//# sourceMappingURL=SelectBox.js.map