UNPKG

choerodon-ui

Version:

An enterprise-class UI design language and React-based implementation

329 lines (290 loc) 10.7 kB
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); export 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: "searchable", get: function get() { var _this$observableProps = this.observableProps.searchable, searchable = _this$observableProps === void 0 ? this.getContextConfig('selectBoxSearchable') : _this$observableProps; return !!searchable; } }, { key: "name", get: function get() { return this.observableProps.name || GroupIdGen.next().value; } }, { key: "mode", get: function get() { return this.props.mode; } }, { key: "isSearchFieldInPopup", value: function isSearchFieldInPopup() { return false; } }, { key: "getOmitPropsKeys", value: function getOmitPropsKeys() { return _get(_getPrototypeOf(SelectBox.prototype), "getOmitPropsKeys", this).call(this).concat(['vertical']); } }, { key: "getClassName", value: function getClassName() { var _get2; var prefixCls = this.prefixCls, vertical = this.props.vertical; for (var _len = arguments.length, props = new Array(_len), _key = 0; _key < _len; _key++) { props[_key] = arguments[_key]; } return (_get2 = _get(_getPrototypeOf(SelectBox.prototype), "getClassName", this)).call.apply(_get2, [this, _defineProperty({}, "".concat(prefixCls, "-vertical"), vertical)].concat(props)); } }, { key: "getWrapperClassNamesExcludeOutput", value: function getWrapperClassNamesExcludeOutput(prefixCls, _) { return _get(_getPrototypeOf(SelectBox.prototype), "getWrapperClassNamesExcludeOutput", this).call(this, prefixCls, 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: "getOptionOtherProps", value: function getOptionOtherProps(_) { return {}; } }, { 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, mode = this.mode; var _this$props = this.props, autoFocus = _this$props.autoFocus, onOption = _this$props.onOption, optionRenderer = _this$props.optionRenderer, optionsFilter = _this$props.optionsFilter; var highlight = this.getDisplayProp('highlight'); var hasRef = false; 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 checked = _this.isChecked(_this.getValue(), value); 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: checked, name: name, onChange: _this.handleItemChange, children: children, autoFocus: autoFocus && index === 0, readOnly: readOnly, disabled: disabled, mode: mode, noValidate: true, labelLayout: LabelLayout.none, highlight: highlight }); if (!hasRef && !disabled && !(itemProps.disabled || optionProps.disabled)) { itemProps.ref = _this.elementReference; hasRef = true; } _extends(itemProps, _this.getOptionOtherProps(checked)); 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; }, []); return /*#__PURE__*/React.createElement("span", _extends({ key: "wrapper" }, this.getWrapperProps()), this.renderSearcher(), this.renderSelectAll(), this.renderSelectItems(items), this.renderFloatLabel(), options.paging && options.currentPage < options.totalPage && /*#__PURE__*/React.createElement(Button, { funcType: FuncType.flat, icon: "more_horiz", onClick: this.handleQueryMore })); } }, { key: "renderSelectItems", value: function renderSelectItems(items) { var className = this.getClassName(); var Element = this.context.formNode ? 'div' : 'form'; return /*#__PURE__*/React.createElement(Element, { className: className, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, items); } }, { 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, "renderSelectItems", null); __decorate([autobind], SelectBox.prototype, "handleQueryMore", null); __decorate([autobind], SelectBox.prototype, "handleInput", null); __decorate([autobind], SelectBox.prototype, "handleItemChange", null); var ObserverSelectBox = /*#__PURE__*/function (_SelectBox) { _inherits(ObserverSelectBox, _SelectBox); var _super2 = _createSuper(ObserverSelectBox); function ObserverSelectBox() { _classCallCheck(this, ObserverSelectBox); return _super2.apply(this, arguments); } return _createClass(ObserverSelectBox); }(SelectBox); ObserverSelectBox.defaultProps = SelectBox.defaultProps; ObserverSelectBox.Option = Option; ObserverSelectBox.OptGroup = OptGroup; // eslint-disable-next-line camelcase ObserverSelectBox.__IS_IN_CELL_EDITOR = true; ObserverSelectBox = __decorate([observer], ObserverSelectBox); export default ObserverSelectBox; //# sourceMappingURL=SelectBox.js.map